/* --------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */
/* ----------------------- 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 ADALID -------------------------- */
/* --------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */
/* 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}
/* ELIMINAMOS ESTA PARTE PARA UQE CUANDO SON MÁS DE DOS COLUMNAS, LAS ALTURAS DE LAS IMAGENES INTERIORES SEAN IGUALES A LAS ALTERALES.*/
/*
.grid .grid.c_p_10 > div:first-child,
.grid .grid.c_p_14 > div:first-child,
.grid .grid.c_p_20 > div:first-child,
.grid .grid.c_p_24 > div:first-child,
.grid .grid.c_p_30 > div:first-child,
.grid .grid.c_p_40 > div:first-child { padding-left: 0px; box-sizing: border-box}
.grid .grid.c_p_10 > div:last-child,
.grid .grid.c_p_14 > div:last-child,
.grid .grid.c_p_20 > div:last-child,
.grid .grid.c_p_24 > div:last-child,
.grid .grid.c_p_30 > div:last-child,
.grid .grid.c_p_40 > div:last-child { padding-right: 0px; box-sizing: border-box}
.grid .grid[class*="c_p_"] { margin-left: 0px; margin-right: 0px; padding-left: 0; padding-right: 0;}
*/
/*************************/
/*************************/
/* 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_p_10.c_fixed > div[class*="c_w_"] + div > * { padding-left: 10px; box-sizing: border-box}
.grid.c_p_14.c_fixed > div[class*="c_w_"] + div > * { padding-left: 14px; box-sizing: border-box}
.grid.c_p_20.c_fixed > div[class*="c_w_"] + div > * { padding-left: 20px; box-sizing: border-box}
.grid.c_p_24.c_fixed > div[class*="c_w_"] + div > * { padding-left: 24px; box-sizing: border-box}
.grid.c_p_30.c_fixed > div[class*="c_w_"] + div > * { padding-left: 30px; box-sizing: border-box}
.grid.c_p_40.c_fixed > div[class*="c_w_"] + div > * { padding-left: 40px; box-sizing: border-box}
*/
.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;
}