/* --------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */
/* ----------------------- ESTILOS GENERICOS PARA PERIODICOS ----------------------- */
/* --------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */
html, body, ul, li, p, figure {
margin: 0;
padding: 0;
}
/* alinear imagen o div a la izquierda */
.align_iz {
float: left;
}
/* alinear imagen o div a la derecha */
.align_de {
float: right;
}
/* centrar div */
.centrado {
margin-left: 50%;
transform: translate(-50%, 0%);
-ms-transform: translate(-50%,0%); /* IE 9 */
-webkit-transform: translate(-50%,0%); /* Chrome, Safari, Opera */
}
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 {
display: table;
min-width: 100%;
}
.grid > div {
box-sizing: border-box;
display: table-cell;
vertical-align: top;
}
.grid > div img {
width: inherit;
/*min-width: 100%;*/
/*width: 0px;*/
max-width: 100%;
}
.grid .i_bg {
overflow: hidden;
position: relative;
}
.grid .i_bg img {
transform: translate(-50%,0%);
-ms-transform: translate(-50%,0%); /* IE 9 */
-webkit-transform: translate(-50%,0%); /* Chrome, Safari, Opera */
margin: 0 0 0 50%;
position: absolute;
width: auto;
max-width: inherit;
height: 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 > div { padding-left: 5px; padding-right: 5px;}
.grid.c_p_14 > div { padding-left: 7px; padding-right: 7px;}
.grid.c_p_20 > div { padding-left: 10px; padding-right: 10px;}
.grid.c_p_24 > div { padding-left: 12px; padding-right: 12px;}
.grid.c_p_30 > div { padding-left: 15px; padding-right: 15px;}
.grid.c_p_10 { margin-left:-5px; margin-right: -5px;}
.grid.c_p_14 { margin-left:-7px;; margin-right: -7px;}
.grid.c_p_20 { margin-left:-10px;; margin-right: -10px;}
.grid.c_p_24 { margin-left:-12px; margin-right: -12px}
.grid.c_p_30 { margin-left:-15px; margin-right: -15px}
/*************************/
/*************************/
/* ANCHOS FIJOS */
/*************************/
/*************************/
.grid.c_fixed .c_w_300 > div, .grid.c_fixed .c_w_625 > div, .grid.c_fixed .c_w_420 { width: auto;}
/* ancho fijo a 300px */
.grid.c_p_10.c_fixed > div.c_w_300 { width: 310px; max-width: 310px; min-width: 310px; padding: 0px 5px;}
.grid.c_p_14.c_fixed > div.c_w_300 { width: 314px; max-width: 314px; min-width: 314px; padding: 0px 7px;}
.grid.c_p_20.c_fixed > div.c_w_300 { width: 320px; max-width: 320px; min-width: 320px; padding: 0px 10px;}
.grid.c_p_24.c_fixed > div.c_w_300 { width: 324px; max-width: 324px; min-width: 324px; padding: 0px 12px;}
.grid.c_p_30.c_fixed > div.c_w_300 { width: 330px; max-width: 330px; min-width: 330px; padding: 0px 15px;}
/* ancho fijo a 625px */
.grid.c_p_10.c_fixed > div.c_w_625 { width: 630px; max-width: 630px; min-width: 630px; padding: 0px 5px;}
.grid.c_p_14.c_fixed > div.c_w_625 { width: 632px; max-width: 632px; min-width: 632px; padding: 0px 7px;}
.grid.c_p_20.c_fixed > div.c_w_625 { width: 635px; max-width: 635px; min-width: 635px; padding: 0px 10px;}
.grid.c_p_24.c_fixed > div.c_w_625 { width: 637px; max-width: 637px; min-width: 637px; padding: 0px 12px;}
.grid.c_p_30.c_fixed > div.c_w_625 { width: 640px; max-width: 640px; min-width: 640px; padding: 0px 15px;}
/* ancho fijo a 420px */
.grid.c_p_10.c_fixed > div.c_w_420 { width: 425px; max-width: 425px; min-width: 425px; padding: 0px 5px;}
.grid.c_p_14.c_fixed > div.c_w_420 { width: 427px; max-width: 427px; min-width: 427px; padding: 0px 7px;}
.grid.c_p_20.c_fixed > div.c_w_420 { width: 430px; max-width: 430px; min-width: 430px; padding: 0px 10px;}
.grid.c_p_24.c_fixed > div.c_w_420 { width: 432px; max-width: 432px; min-width: 432px; padding: 0px 12px;}
.grid.c_p_30.c_fixed > div.c_w_420 { width: 435px; max-width: 435px; min-width: 435px; padding: 0px 15px;}
/*************************/
/*************************/
/* ANCHOS IGUALES */
/*************************/
/*************************/
/* 1 columna */
/*------------------------------------------------------------------------*/
.grid > div.c_11 { width: 100%; padding-left: 0; padding-right: 0;}
/* 2 columnas iguales */
/*------------------------------------------------------------------------*/
/*------*/
.grid > div.c_12 { width: 50%;}
/*****/
/*------*/
/* 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%;}
/*****/
/*------*/
/*********** ------------- 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 *+++++++*/
section .not_tipo_1, section .not_tipo_2, section .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:last-child {
float: right;
max-width: 100%;
width: 100%;
}
/* -- NOTICIA TIPO 2 -- */
.not_tipo_2 figure {
float: left;
width: 50%;
}
.not_tipo_2 > div:last-child {
float: right;
width: 50%;
}
/* -- NOTICIA TIPO 3 -- */
.not_tipo_3 figure {
float: left;
max-width: 100%;
width: 100%;
}
.not_tipo_3 > div:last-child {
float: none;
max-width: 100%;
width: 100%;
position: absolute;
}
.not_tipo_3.title_top > div:last-child {
float: none;
max-width: 100%;
width: 100%;
position: absolute;
top:0;
}
.not_tipo_3.title_bottom > div:last-child {
float: none;
max-width: 100%;
width: 100%;
position: absolute;
bottom: 0px;
}
/* ----------------------------------- */