/**
 * URBANA TEVÉ - ESTILOS COMUNES
 * Este archivo contiene todos aquellos estilos aplicables a todas las páginas 
 * del sitio. Por ejemplo: el encabezado, pie de página, navegación, etc.
 */
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);
@import url(http://fonts.googleapis.com/css?family=Amatic+SC);



/**
 * CSS RESET
 * Estilos para eliminar los estilos por defecto del navegador
 */
ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
a {
	text-decoration: none;
}
h1, h2, h3, p {
	margin: 0;
}


/**
 * ====================================================================
 * ESTILOS DEL SITIO WEB
 * Cuerpo de la página y contenedor principal
 * ==================================================================== 
 */
body {
	font-family: 'Open Sans', sans-serif; 
	font-size: 10px;
	background: url(imagenes/fondo_modulo.jpg) repeat top left; 
	margin: 0 0 30px 0;
}

div#caja-ppal {
	width: 100%;
	position: relative;
	background-color: #ffffff;
}


/**
 * Encabezado
 */
header#encabezado {
	width: 100%;
	position: relative;
	margin-bottom: 7px;
	height: 190px;
}
	
header#encabezado ul li {
	font-family: 'Amatic SC', cursive;
	font-size: 20pt;
	font-weight: bold;
}
	
header#encabezado ul li a {	
	color: #ffffff;
}

div#logo {
	width: 17%;
	min-width: 140px;
	margin: 0 0 6px 20px;
	padding-top: 10px;
}

div#logo img {
	width: 100%;
}

div#urbana-lema {
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	background: url(imagenes/urbana_trenes.gif) no-repeat 80px -136px;
	height: 190px;
}
div#urbana-lema span {
	display: block;
}
div#urbana-lema span:nth-child(1) {
	margin-top: 16px;
	margin-left: 163px;
}
div#urbana-lema span:nth-child(2) {
	margin-left: 182px;
}
div#urbana-lema span:nth-child(3) {
	margin-left: 197px;
}
div#urbana-lema span:nth-child(4) {
	margin-left: 201px;
}
div#urbana-lema span:nth-child(5) {
	margin-left: 211px;
}
div#urbana-imagen {
	width: 100%;
	height: 186px;
	background: url(imagenes/urbana_header.gif) no-repeat top right;
	position: absolute;
	top: 0;
	right: 0;
}
div#urbana-imagen-medium {
	display: none;
	width: 64%;
	height: 186px;
	position: absolute;
	top: 0;
	right: 0;
}

header#encabezado li.menu-opcion-float {
	float: right;
	margin: 0 5px 5px 5px;
	padding: 1px 10px;
	border: #000000 3px solid;
	width: 114px;
	text-align: center;
}

header#encabezado li#menu-opcion-0 {
	position: absolute;
	top: 20px;
	left: 816px;
}
header#encabezado li#menu-opcion-1 {
	position: absolute;
	top: 151px;
	left: 298px;
}

header#encabezado li#menu-opcion-2 {
	position: absolute;
	top: 141px;
	left: 794px;
}

header#encabezado li#menu-opcion-3 {
	position: absolute;
	top: 120px;
	left: 549px;
}

header#encabezado li#menu-opcion-4 {
	position: absolute;
	top: 137px;
	left: 652px;
}

header#encabezado li#menu-opcion-5 {
	position: absolute;
	top: 140px;
	left: 423px;
}

/**
 * Navegación auxiliar
 */
nav.navegacion-auxiliar {
	margin: 2px 0 0 0;
	width: 75%;
	overflow: auto;
}

nav.navegacion-auxiliar li {
	float: left;
	margin: 0 4px;
}

nav.navegacion-auxiliar li a {
	color: #68585b;
}
 

/**
 * Pie de página
 */
footer#pie-pagina {
	clear: both;
	width: 94.6%;
	padding: 15px 0 30px 0;
	font-size: 9.5pt;
	margin: 0 2.45%;
	color: #68585b;	
}
footer div.link-redes-sociales {
	float: right;
	margin: 0 15px 0 0;
	line-height: 28px;
}
footer div.link-redes-sociales a {
	float: right;
}
footer .footer-social-icon {
	height: 28px;
	margin-left: 12px;
}

/**
 * ====================================================================
 *  ESTILOS PRINCIAPLES PARA EL CUERPO DE LAS PÁGINAS
 *  Estilos para las secciones principales que definen la GRILLA
 *  (etiquetas "section" y "aside" que estructuran el sitio)
 * ==================================================================== 
 */
section#caja-central {
	width: 70%;
}

section#caja-ppal-expandida {
	width: 100%;
	margin: 10px 0;
}

section#caja-superior {
	clear: both;
	width: 100%;
	height: 42px;
	margin: 0 2.45%;	
}

aside#caja-lateral-izq {
	float: left;
	width: 30%;
	margin-bottom: 10px;
	margin-top: 20px;
}

aside#caja-lateral-der {
	float: right;
	width: 30%;
	margin-bottom: 10px;
	margin-top: 20px;
}

aside#caja-lateral-der.cuadro-referencias {
	float: none;
	position: absolute;
	top: 275px;
	right: 0;
}

section#caja-inferior {
	clear: both;
	width: 100%;
	margin: 10px 2.45%;
	padding-top: 38px;
}



/**
 * ====================================================================
 *  ESTILOS SECUNDARIOS PARA EL CUERPO DE LAS PÁGINAS
 *  Estilos para regiones que aparecen sólo en algunas páginas
 *  como barras laterales, el Slider, artículos relacionados,
 *  cámara en vivo, mapa del barrio
 * ==================================================================== 
 */

/**
 * Estilos para la barra lateral 
 */
div.region-lateral ul#lista-destacados {
	margin-top: 10px;
}

div.region-lateral ul.region-lateral-lista {
	margin-top: 10px;
	margin-right: 10px;
}

div.region-lateral ul.region-lateral-lista li {
	margin-bottom: 12px;
}

article.articulo-lateral {
	margin-bottom: 28px;
}


/**
 * Estilos para la región de artículos relacionados
 */
article.articulo-relacionado {
	width: 30%;
	min-height: 150px;
	float: left;
	margin-right: 2.2%;
	margin-bottom: 10px;
	margin-top: 10px;
	position: relative;
}

article.articulo-relacionado:last-child {
	margin-right: 0;
}

article.articulo-relacionado img.articulo-relacionado-img {
	width: 100%;
	border: #000000 3px solid;
}
article.articulo-relacionado div.articulo-relacionado-texto {
	margin: 10px 0;
}


/**
 * Estilos el SLIDER de la página principal
 */
div#home-slider {
	position: relative;
	clear: both;
	margin: 30px 2.5% 0 3.5%;
}
div#home-slider { 
	position: relative; overflow: auto; 
}
div#home-slider li { 
	list-style: none; 
}
div#home-slider ul li { 
	float: left; 
}

/**
 * Estilos para el MAPA del barrio
 */
div#mapa-barrial {
	width: 97%;
}
div#mapa-barrial img {
	width: 100%;
}

/**
 * Estilos para la región de la página donde se muestra la cámara en vivo
 */
#camara-en-vivo {
	margin-bottom: 30px;
}



/**
 * ====================================================================
 *  ESTILOS PARA EDITORIAL
 *  Estilos para formatear la región donde se muestran artículos
 *  y notas de contenidos editorial.
 * ==================================================================== 
 */

article.articulo-ppal {
	position: relative;
	padding: 0 3.5%;
	clear: both;
}
article.articulo-ppal div.foto-articulo {
	float: left;
	width: 65%;
	margin: 0 20px 10px 0;
	border: #000000 3px solid;
}
article.articulo-ppal div.foto-articulo-grande {
	width: 100%;
	margin: 0 20px 10px 0;
	border: #000000 3px solid;
}
article.articulo-ppal div.foto-articulo.destacado {
		width: 48%;
}
article.articulo-ppal img.articulo-imagen {
	width: 100%;
}

div.cuerpo-articulo {
	position: relative;
}
article.articulo-ppal p.pie-de-foto {
	color: #ffffff;
	padding: 0 10px;
}
article.articulo-ppal div.articulo-cierre {
	clear: both;
	margin-bottom: 30px;
	color: #565254;
}

div.elemento-pie-articulo {
	float: right;
	line-height: 48px;
	padding-left: 18px;
}


/**
 * TIPOGRAFÍA
 * Jerarquías y estilos de párrafos, títulos, bajadas, etc.
 */
h2.titulo-seccion {
	font-family: 'Amatic SC', cursive;
	font-size: 30pt;
	font-weight: bold;	
	line-height: 50px;
}
h2.titulo-seccion.destacado-home {
	margin: 28px 0 6px 0;
}
h2.subtitulo-nota {
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 18pt;
	font-weight: bold;
	line-height: 28px;	
	text-transform: uppercase;
	margin-top: 20px;
}
p.texto-bajada {
	font-size: 11.5pt;
	font-weight: bold;
	color: #000000;
	margin-botton: 15px;
}

p.texto-regular {
	font-size: 10.5pt;
	font-weight: normal;
	color: #000000;
}
p.texto-regular a {
	text-decoration: underline;
	color: #000000;
}

p.copete-nota {
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 18pt;
	font-weight: bold;
	color: #565254;
	margin-top: 8px;
	margin-bottom: 20px;
	line-height: 24pt;
}
p.bajada-seccion {
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 18pt;
	font-weight: normal;
	color: #000000;
	margin-top: 8px;
	margin-bottom: 20px;
	line-height: 24pt;
}
a.boton {
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 16pt;
	font-weight: bold;	
	text-transform: uppercase;
	line-height: 30pt;
}
p.cuerpo-tabular {
	font-size: 10.5pt;
	line-height: 19pt;
	font-weight: normal;
}
p.cuerpo-nota {
	font-size: 10.5pt;
	line-height: 19pt;
	font-weight: normal;
	color: #000000;
	margin-bottom: 19px;
}
p.cuerpo-nota a {
	text-decoration: underline;
}
p.cuerpo-nota a.boton {
	text-decoration: none;
}
p.cuerpo-nota .cuerpo-nota-italica {
	font-style: italic;
}

p.cuerpo-nota .cuerpo-nota-negrita {
	font-weight: bold;
}
h3.articulo-lateral-titulo,
h3.articulo-agenda-titulo,
h3.articulo-programacion-titulo,
h3.articulo-relacionado-titulo,
h3.articulo-destacado-titulo {
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 14pt;
	font-weight: bold;	
	text-transform: uppercase;
	color: #ED1C25;
}
h3.articulo-programacion-titulo {
	color: #f6941d;
}
h3.articulo-agenda-titulo {
	color: #26903c;
}
h3.articulo-destacado-titulo {
	color: #26903c;
}
h3.articulo-titulo {
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 28pt;
	font-weight: bold;	
	text-transform: uppercase;
	margin-top: 20px;
	line-height: 32pt;
}
h3.articulo-titulo.evento-destacado {
	margin-top: 0;
}
p.pie-de-foto {
	font-size: 8.6pt;
	line-height: 30px;
}
h1.encabezado {
	font-family: 'Amatic SC', cursive;
	font-size: 60pt;
	font-weight: bold;
	line-height: 100px;	
}
p.leyenda-cierre-articulo,
p.articulo-lateral-sobretitulo {
	font-size: 9pt;
	font-weight: bold;
	color: #68585b;
	text-transform: uppercase;
}
p.leyenda-cierre-articulo {
	line-height: 48px;
	font-style: italic;
	text-transform: none;
}
p.social-leyenda {
	font-size: 10pt;
	font-style: italic;
	font-weight: bold;
}
p.grilla-titulo-columna {
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 18pt;
	font-weight: bold;	
	text-transform: uppercase;
	text-align: center;
}
p.grilla-horario-programa {
	margin-top: 15px;
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 24pt;
	font-weight: bold;
	color: #68585b;
}
p.grilla-titulo-programa {
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 13pt;
	font-weight: bold;	
	text-transform: uppercase;
}
p.grilla-tipo-programa {
	font-size: 9.6pt;
	font-weight: bold;
	color: #68585b;
	text-transform: uppercase;
}
p.grilla-cuerpo-programa {
	font-size: 9pt;
	font-weight: normal;
	color: #000000;
}
p span.etiqueta {
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 13.5pt;
	font-weight: bold;	
	text-transform: uppercase;
}
nav.navegacion-auxiliar li {
	font-size: 10pt;
	font-weight: normal;
	text-transform: uppercase;
}
div#urbana-lema {
	font-size: 11pt;
	font-weight: normal;
	font-style: italic;
}
	

/**
 * ====================================================================
 *  BOTONES Y MISCELÁNEAS
 *  Estilos para formatear botones y otros elementos misceláneos
 * ==================================================================== 
 */

div.separador-contenido {
	height: 34px;
	background: url(imagenes/separador_03.png) repeat-x center left;
}

img.separador {
	width: 93%;
	height: 27px;
	margin-left: 20px;
	margin-top: 9px;
}

a.boton {
	display: block;
}

a.social-icons {
	height: 40px;
	width: 40px;
	display: block;
}

div.caja-centrada {
	width: 45%;
	margin: 0 auto;
}

img.imagen-centro {
	width: 100%;	
}

span.etiqueta {
	width: 25%;
	display: inline-block;
}

iframe.video-pequeño {
	border: #000000 3px solid;
	margin: 4px 0 8px 0;
}

/**
 * ====================================================================
 *  GRILLA DE PROGRAMACION
 *  Estilos para dar formato a la grilla de programación
 * ====================================================================
 */
div.grilla-dia-semana {
	width: 13.2%;
	margin-right: 1%;
	float: left;
	min-width: 105px;
}

p.grilla-titulo-columna {
	background-color: #f6941d;
	border: #000000 3px solid;
	color: #ffffff;
}
p.grilla-titulo-programa {
	color: #f6941d;
}

div.grilla-separador {
	height: 44px;
	background: url(imagenes/separador_02.png) repeat-x center left;
}

div.grilla-celda:hover {
	background-color: #f6941d;
}

div.grilla-celda:hover p.grilla-titulo-programa {
	color: #ffffff;
}
 
/**
 * ====================================================================
 *  ICONOS DEL SITIO
 *  Estilos mostrar los iconos
 * ==================================================================== 
 */

/**
 * Tamaño mediano
 */
div.icon-medium,
div.icon-medium-narrow  {
	height: 50px;
	width: 50px;
	float: left;
	margin-right: 10px;
} 
div.icon-medium img,
div.icon-medium-narrow img {
	width: 100%;
}
div.icon-medium-narrow {
	margin-right: 0;
} 

/**
 * Tamaño grande
 */
div.icon-large,
div.icon-large-narrow  {
	position: absolute;
	top: 8px;
	left: 22px;
	height: 100px;
	width: 100px;
	float: left;
	margin-right: 10px;
} 
div.icon-large img,
div.icon-large-narrow img {
	width: 100%;
}
div.icon-large-narrow {
	margin-right: 0;
} 

/**
 * Tamaño extra-grande
 */
div.icon-xlarge,
div.icon-xlarge-narrow  {
	height: 100px;
	width: 100px;
	float: left;
	margin-right: 7px;
	margin-left: 20px;
} 
div.icon-xlarge img,
div.icon-xlarge-narrow img {
	width: 100%;
}
div.icon-xlarge-narrow {
	margin-right: 0;
} 




/**
 * ====================================================================
 *  ESTILOS AUXILIARES
 * ==================================================================== 
 */
.no-display {
	display: none;
}
.pos-inicio {
	float: left;
}
.pos-final {
	float: right;
}
a.negrita,
span.negrita {
	font-weight: bold;
}
span.barrio-seleccionado {
	font-weight: bold;
	color: #912790;
}
.color-amarillo {
	color: #fedc00;
}
.color-naranja {
	color: #f6941d;
}
.color-rojo {
	color: #ed1c25;
}
.color-azul {
	color: #0256a6;
}
.color-celeste {
	color: #04aeed;
}
.color-verde {
	color: #26903c;
}
.color-violeta	 {
	color: #912790;
}
.color-gris	 {
	color: #2f2c2d;
}
 
 
.paleta-amarillo {
	background-color: #fedc00;
}
.paleta-naranja {
	background-color: #f6941d;
}
.paleta-rojo {
	background-color: #ed1c25;
}
.paleta-azul {
	background-color: #0256a6;
}
.paleta-celeste {
	background-color: #04aeed;
}
.paleta-verde {
	background-color: #26903c;
}
.paleta-violeta	 {
	background-color: #912790;
}
.paleta-gris	 {
	background-color: #2f2c2d;
}


.barra-amarilla {
	background: url(imagenes/barra_amarilla.png) no-repeat top left;
}
.barra-naranja {
	background: url(imagenes/barra_naranja.png) no-repeat top left;
}
.barra-rojo {
	background: url(imagenes/barra_rojo.png) no-repeat top left;
}
.barra-azul {
	background: url(imagenes/barra_azul.png) no-repeat top left;
}
.barra-celeste {
	background: url(imagenes/barra_celeste.png) no-repeat top left;
}
.barra-verde {
	background: url(imagenes/barra_verde.png) no-repeat top left;
}
.barra-violeta {
	background: url(imagenes/barra_violeta.png) no-repeat top left;
}
.barra-gris {
	background: url(imagenes/barra_gris.png) no-repeat top left;
}



/**
 * ====================================================================
 * MEDIA QUERIES
 * Adaptar el layout para Desktop, Tablet y Teléfono
 * ==================================================================== 
 */

@media only screen and (min-width: 960px) {

    div#caja-ppal {
        width: 960px;
        margin: 0 auto;
    }
}

@media only screen and (max-width: 680px) {
	div#urbana-lema span {
		display: none;
	}
}

@media only screen and (min-width: 480px)
	               and (max-width: 960px) {

	nav.urbana-nav {
		display: none;
	}
		
	div#urbana-imagen-medium {
		display: block;
	}
	
	div#urbana-imagen {
		display: none;
	}
}


@media only screen and (max-width : 480px) {

	body {
		font-size: 40px;
	}
	
	.pos-inicio {
		float: none;
	}

	.pos-final {
		float: none;
	}
	
	nav.urbana-nav {
		display: none;
	}

	div#logo {
		display: none;
	}

	header#encabezado li.menu-opcion-float {
		float: none;
		margin: 0;
		padding: 0 10px;
		border-left: #000000 3px solid;	
		border-bottom: #000000 3px solid;
		border-right: #000000 3px solid;
		border-top: none;
		width: 100%;
	}
	
	div#urbana-imagen-medium {
		display: block;
		width: 100%;
	}
	
	div#urbana-imagen {
		display: none;
	}

	div#urbana-lema {
		display: none;
	}
		
    div#caja-ppal {
        width: 100%;
        margin: 0 auto;
    }

	aside#caja-lateral-izq {
		float: none;
		width: 100%;
	}
	aside#caja-lateral-der {
		float: none;
		width: 100%;
	}
	
	section#caja-central {
		width: 100%;
	}
	
	article.articulo-relacionado {
		float: none;
		width: 100%;
		margin-right: 0;
	}
	
	div.grilla-dia-semana {
		width: 100%;
		margin-right: 0;
		float: none;
	}
}