/* --------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */
/* ----------------------- 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;
}
/* ----------------------------------- */