/* --------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */
/* ----------------------- ESTILOS GENERICOS PARA PERIODICOS ----------------------- */
/* --------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */
html, body, ul, li, p, figure {
margin: 0;
padding: 0;
}
* {
text-size-adjust: 100%;
outline: none;
}
*:before, *:after {
box-sizing: border-box;
}
/* alinear imagen o div a la izquierda */
.align_iz {
float: left;
}
/* alinear imagen o div a la derecha */
.align_de {
float: right;
}
/* centrar div */
/*
body {
text-align: center;
width: 100%;
}
*/
.centrado {
display: inline-block;
margin: 0 auto;
text-align: left;
}
h1, h2, h3, h4, h5, h6, ul, li {
margin: 0;
padding: 0;
}
/* margenes inferiores */
.ma_in_10 {
margin-bottom: 10px;
}
.ma_in_15 {
margin-bottom: 15px;
}
.ma_in_20 {
margin-bottom: 20px;
}
.ma_in_25 {
margin-bottom: 25px;
}
.ma_in_30 {
margin-bottom: 30px;
}
.ma_in_40 {
margin-bottom: 40px;
}
/* --------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */
/* -------------------------- REJILLA MAQUETACION-------------------------- */
/* --------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */
/* Es importante anadir en el : */
/* */
/* para que la columna de ancho fijo mantenga su tamano al reducir la pantalla */
/* -------------- */
/* -------------- */
/* ESTRUCTURA BASICA DE LA REJILLA */
/* */
/* --------------------------------------------------------------------------------- */
/* ----------------------- */
/* Periodicos que lo usan: */
/* Periodico 1:elsemanaldigital */
/* Periodico 2:eldigitalcastillalamancha */
/* Periodico 3: */
/* ----------------------- */
.grid {
box-sizing: inherit;
display: block;
}
.grid:before, .grid:after {
content: "";
display: table;
clear: both;
}
.grid > div {
float: left; /* para anchos iguales */
box-sizing: inherit;
display: block;
}
.grid > div article figure img {
width: inherit;
min-width: 100%;
max-width: 100%;
}
/* anchos simples */
.w_10 {
width: 10%;
min-width: 10%;
max-width: 10%;
}
.w_20 {
width: 20%;
min-width: 20%;
max-width: 20%;
}
.w_30 {
width: 30%;
min-width: 30%;
max-width: 30%;
}
.w_40 {
width: 40%;
min-width: 40%;
max-width: 40%;
}
.w_50 {
width: 50%;
min-width: 50%;
max-width: 50%;
}
.w_60 {
width: 60%;
min-width: 60%;
max-width: 60%;
}
.w_70 {
width: 70%;
min-width: 70%;
max-width: 70%;
}
.w_80 {
width: 80%;
min-width: 80%;
max-width: 80%;
}
.w_90 {
width: 90%;
min-width: 90%;
max-width: 90%;
}
.w_100 {
width: 100%;
min-width: 100%;
max-width: 100%;
}
/* espacio entre columnas */
.grid.c_p_10 {
padding-left: 5px;
padding-right: 5px;
box-sizing: border-box;
}
.grid.c_p_14 {
padding-left: 7px;
padding-right: 7px;
box-sizing: border-box;
}
.grid.c_p_20 {
padding-left: 10px;
padding-right: 10px;
box-sizing: border-box;
}
.grid.c_p_24 {
padding-left: 12px;
padding-right: 12px;
box-sizing: border-box;
}
.grid.c_p_30 {
padding-left: 15px;
padding-right: 15px;
box-sizing: border-box;
}
.grid.c_p_40 {
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
}
.grid.c_p_10 {
margin-left: -10px;
margin-right: -10px;
}
.grid.c_p_14 {
margin-left: -14px;
margin-right: -14px;
}
.grid.c_p_20 {
margin-left: -20px;
margin-right: -20px;
}
.grid.c_p_24 {
margin-left: -24px;
margin-right: -24px;
}
.grid.c_p_30 {
margin-left: -30px;
margin-right: -30px;
}
.grid.c_p_40 {
margin-left: -40px;
margin-right: -40px;
}
.grid.c_p_10 > div {
padding-left: 5px;
padding-right: 5px;
box-sizing: border-box;
}
.grid.c_p_14 > div {
padding-left: 7px;
padding-right: 7px;
box-sizing: border-box;
}
.grid.c_p_20 > div {
padding-left: 10px;
padding-right: 10px;
box-sizing: border-box;
}
.grid.c_p_24 > div {
padding-left: 12px;
padding-right: 12px;
box-sizing: border-box;
}
.grid.c_p_30 > div {
padding-left: 15px;
padding-right: 15px;
box-sizing: border-box;
}
.grid.c_p_40 > div {
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
}
/*************************/
/*************************/
/* ANCHOS FIJOS */
/*************************/
/*************************/
.grid[class*="c_p_"].c_fixed > div {
padding-left: 0;
padding-right: 0;
}
.grid.c_fixed {
display: table;
min-width: 100%;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}
.grid.c_fixed > div:first-child {
float: left;
}
.grid.c_fixed > div:not([class*="c_w_"]) {
width: 100%;
}
.grid.c_p_10.c_fixed > div:first-child:not([class*="c_w_"]) {
padding-right: 10px;
box-sizing: border-box;
}
.grid.c_p_14.c_fixed > div:first-child:not([class*="c_w_"]) {
padding-right: 14px;
box-sizing: border-box;
}
.grid.c_p_20.c_fixed > div:first-child:not([class*="c_w_"]) {
padding-right: 20px;
box-sizing: border-box;
}
.grid.c_p_24.c_fixed > div:first-child:not([class*="c_w_"]) {
padding-right: 24px;
box-sizing: border-box;
}
.grid.c_p_30.c_fixed > div:first-child:not([class*="c_w_"]) {
padding-right: 30px;
box-sizing: border-box;
}
.grid.c_p_40.c_fixed > div:first-child:not([class*="c_w_"]) {
padding-right: 40px;
box-sizing: border-box;
}
/* en la versión móvil no deben aparecer estos padding-right */
.css_movil .grid.c_p_10.c_fixed > div:first-child:not([class*="c_w_"]) {
padding-right: 0px;
}
.css_movil .grid.c_p_14.c_fixed > div:first-child:not([class*="c_w_"]) {
padding-right: 0px;
}
.css_movil .grid.c_p_20.c_fixed > div:first-child:not([class*="c_w_"]) {
padding-right: 0px;
}
.css_movil .grid.c_p_24.c_fixed > div:first-child:not([class*="c_w_"]) {
padding-right: 0px;
}
.css_movil .grid.c_p_30.c_fixed > div:first-child:not([class*="c_w_"]) {
padding-right: 0px;
}
.css_movil .grid.c_p_40.c_fixed > div:first-child:not([class*="c_w_"]) {
padding-right: 0px;
}
.grid.c_fixed > div + [class*="c_w_"] {
float: none;
}
.grid.c_fixed > [class*="c_w_"] + div {
float: none;
}
.grid.c_fixed > div:last-child {
float: right;
}
/* ancho fijo a 150px */
.grid.c_fixed > div.c_w_150 {
width: 150px;
max-width: 150px;
min-width: 150px;
padding: 0px;
}
/* ancho fijo a 300px */
.grid.c_fixed > div.c_w_300 {
width: 300px;
max-width: 300px;
min-width: 300px;
padding: 0px;
}
/* ancho fijo a 330px */
.grid.c_fixed > div.c_w_330 {
width: 330px;
max-width: 330px;
min-width: 330px;
padding: 0px;
}
/* ancho fijo a 420px */
.grid.c_fixed > div.c_w_420 {
width: 420px;
max-width: 420px;
min-width: 420px;
padding: 0px;
}
/* ancho fijo a 625px */
.grid.c_fixed > div.c_w_625 {
width: 625px;
max-width: 625px;
min-width: 625px;
padding: 0px;
}
/* 1 columna */
/*------------------------------------------------------------------------*/
.grid > div.c_11 {
width: 100%;
padding-left: 0;
padding-right: 0;
}
/* 2 columnas iguales */
/*------------------------------------------------------------------------*/
/*------*/
.grid > div.c_12 {
width: 50%;
}
/*****/
/*------*/
/*************************/
/*************************/
/* ANCHOS IGUALES */
/*************************/
/*************************/
/* 3 columnas iguales */
/*------------------------------------------------------------------------*/
/*------*/
.grid > div.c_13 {
width: 33.333333%;
}
/*****/
/*------*/
/* 4 columnas iguales */
/*------------------------------------------------------------------------*/
/*------*/
.grid > div.c_14 {
width: 25%;
}
/*****/
/*------*/
/* 5 columnas iguales */
/*------------------------------------------------------------------------*/
.grid > div.c_15 {
width: 20%;
}
/*****/
/*------*/
/* 6 columnas iguales */
/*------------------------------------------------------------------------*/
.grid > div.c_16 {
width: 16.666666%;
}
/*****/
/*------*/
/*********** ------------- TERCIOS DE COLUMNAS --------------- ************/
/* columna 2/3 */
/*------------------------------------------------------------------------*/
.grid > div.c_23 {
width: 66.666666%;
}
/* columna 2/4 */
/*------------------------------------------------------------------------*/
.grid > div.c_24 {
width: 50%;
}
/* columna 3/4 */
/*------------------------------------------------------------------------*/
.grid > div.c_34 {
width: 75%;
}
/**************************************/
/**************************************/
/*++++++++++ TIPOS DE NOTICIAS *+++++++*/
.not_tipo_1, .not_tipo_2, .not_tipo_3 {
position: relative;
width: 100%;
display: inline-block;
}
/* -- NOTICIA TIPO 1 -- */
.not_tipo_1 figure {
float: left;
max-width: 100%;
width: 100%;
}
.not_tipo_1 > div {
float: right;
max-width: 100%;
width: 100%;
}
/* -- NOTICIA TIPO 2 -- */
.not_tipo_2 figure {
float: left;
width: 50%;
}
.not_tipo_2 > div.article_textos {
float: right;
width: 50%;
}
/* -- NOTICIA TIPO 3 -- */
.not_tipo_3 figure {
float: left;
max-width: 100%;
width: 100%;
}
.not_tipo_3 > div.article_textos {
float: none;
max-width: 100%;
width: 100%;
position: absolute;
}
.not_tipo_3.title_top > div.article_textos {
float: none;
max-width: 100%;
width: 100%;
position: absolute;
top: 0;
}
.not_tipo_3.title_bottom > div.article_textos {
float: none;
max-width: 100%;
width: 100%;
position: absolute;
bottom: 0px;
}
/* ----------------------------------- */
article figure.centrar_img img.rel_ancho {
width: 100%;
max-width: 100%;
min-width: 100%;
height: auto;
min-height: auto;
max-height: auto;
}
article figure.centrar_img img.rel_alto {
width: auto;
max-width: initial;
min-width: auto;
height: 100%;
min-height: 100%;
max-height: 100%;
}
article figure.centrar_img img.rel_ancho, article figure.centrar_img img.rel_alto {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}