@import url(http://fonts.googleapis.com/css?family=Open+Sans);
@import url(http://fonts.googleapis.com/css?family=Amatic+SC);


/**
 * CSS RESET
 * Estilos para resetear 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
 * 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: 95.1%;
	overflow: auto;
	position: relative;
	margin: 5px 2.45%;
}

header#encabezado ul {
	clear: both;
}

header#encabezado ul li {
	font-family: 'Amatic SC', cursive;
	font-size: 2.6em;
	font-weight: bold;
	float: left;
	margin: 5px;
	padding: 5px 10px;
	border: #000000 3px solid;
}
	
header#encabezado ul li a {	
	color: #ffffff;
}

header#encabezado h1#encabezado-ppal {
	font-family: 'Amatic SC', cursive;
	font-size: 8.6em;
	font-weight: bold;
	float: left;
	color: #04aeed;
}

div#logo {
	width: 18%;
	float: right;
	margin-top: 16px;
}

div#logo img {
	width: 100%;
}


/**
 * Pie de página
 */
footer#pie-pagina {
	clear: both;
	width: 100%;
	height: 50px;
	padding-top: 35px;
	font-size: 1em;
	margin: 0 2.45%;	
}



/**
 * Cuerpo de la página
 */
section#caja-ppal-expandida {
	width: 100%;
	margin: 10px 0;
}

section#caja-central {
	width: 70%;
}

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

div#contenido-ppal {
	position: relative;
	padding: 0 3.5%;
	clear: both;
}

aside#caja-lateral-der img {
	width: 92%;
}


/**
 * Estilos y jerarquías de la tipografía
 */
h2.titulo-seccion {
	font-family: 'Amatic SC', cursive;
	font-size: 3.8em;
	font-weight: bold;	
	line-height: 50px;
}
h2.subtitulo-nota {
	font-size: 1.8em;
	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.copete-nota {
	font-size: 11pt;
	line-height: 19pt;
	font-weight: bold;
	color: #000000;
	margin-bottom: 19px;
}
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 .cuerpo-nota-italica {
	font-style: italic;
}

p.cuerpo-nota .cuerpo-nota-negrita {
	font-weight: bold;
}

h3.titulo-articulo-relacionado {
	font-size: 11pt;
	font-weight: bold;	
	text-transform: uppercase;
	color: #ED1C25;
}
h3.articulo-titulo {
	font-size: 16pt;
	font-weight: bold;	
	text-transform: uppercase;
	color: #ED1C25;
}

h1.encabezado {
	font-family: 'Amatic SC', cursive;
	font-size: 40pt;
	font-weight: bold;
	margin-top: 20px;	
}
ul.lista {
	font-size: 10.5pt;
	line-height: 19pt;
	font-weight: normal;
	color: #000000;
}


/**
 * Estilos auxiliares
 */
span.negrita {
	font-weight: bold;
}
 .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;
}
.no-display {
	display: none;
}
.pos-inicio {
	float: left;
}
.pos-final {
	float: right;
}



/**
 * Estilos para ser aplicados únicamente sobre las
 * páginas conteniendo las grillas usadas por el sitio
 * (todos los estilos comienzan con "grilla-".
 */

div#grilla-caja-ppal {
	width: 100%;
	background-color: #ffffff;
	padding: 10px;
}

header#grilla-encabezado {
	width: 100%;
	background-color: #d6e1ea;
	overflow: auto;
	margin-bottom: 10px;
}
	
header#grilla-encabezado ul li {
	float: right;
	padding: 10px;
	margin-left: 5px;
	background-color: #41474c;
}
	
header#grilla-encabezado ul li a {	
	color: #ffffff;
}

div#grilla-logo {
	width: 18%;
}

div#grilla-logo img {
	width: 100%;
}

section#grilla-caja-ppal-expandida {
	clear: both;
	width: 100%;
	background-color: #718da5;
	height: 400px;
	margin: 10px 0;
}

section#grilla-caja-superior {
	clear: both;
	width: 100%;
	background-color: #d9dadb;
	height: 42px;
	margin: 10px 0;
}

section#grilla-caja-central {
	width: 75%;
	background-color: #d9dadb;
	height: 360px;
	margin-bottom: 10px;
}

aside#grilla-caja-lateral-izq {
	float: left;
	width: 23.6%;
	background-color: #85898c;
	height: 360px;
	margin-bottom: 10px;
}

aside#grilla-caja-lateral-der {
	float: right;
	width: 23.6%;
	background-color: #85898c;
	height: 360px;
	margin-bottom: 10px;
}

section#grilla-caja-inferior {
	clear: both;
	width: 100%;
	margin: 10px 0;
}

article.grilla-articulo-relacionado {
	width: 32.266666%;
	height: 150px;
	background-color: #b2b5b7;
	float: left;
	margin-right: 1.6%;
	margin-bottom: 10px;
}

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

footer#grilla-pie-pagina {
	clear: both;
	width: 100%;
	background-color: #d6e1ea;
	height: 50px;
	margin-top: 10px;
}

nav#grilla-botonera-grilla {
	overflow: auto;
	margin: 0 auto;
	width: 350px;
	padding-top: 10px;
}

nav#grilla-botonera-grilla ul li {
	float: left;
	padding: 10px;
	margin-right: 5px;
	background-color: #527184;
}
	
nav#grilla-botonera-grilla ul li a {	
	color: #ffffff;
}


/**
 * Estilos para el mapa de páginas
 */
li span.mapa-nombre-pagina-tit {
	width: 244px;
	font-weight: bold;
	display: inline-block;
	text-transform: uppercase;
}
li span.mapa-link-pagina-tit {
	width: 220px;
	font-weight: bold;
	display: inline-block;
	text-transform: uppercase;
}
li span.mapa-autor-pagina-tit {
	width: 160px;
	font-weight: bold;
	display: inline-block;
	text-transform: uppercase;
}

li span.mapa-nombre-pagina {
	width: 244px;
	display: inline-block;
}
li a.mapa-link-pagina {
	width: 220px;
	display: inline-block;
}
li a.mapa-autor-pagina {
	width: 160px;
	display: inline-block;
}


/** 
 * ====================================================================
 *
 *  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;
    }
    
   /*
 	* Estilos para las grillas 
 	*/
    div#grilla-caja-ppal {
        width: 960px;
        margin: 0 auto;
    }
}


/*
 * Media queries para iPhone 2G-4S
 */
 @media only screen 
	and (min-device-width : 320px) 
	and (max-device-width : 480px) {

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

	.pos-final {
		float: 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;
	}
	

   /*
 	* Estilos para las grillas 
 	*/
    div#grilla-caja-ppal {
        width: 480px;
        margin: 0 auto;
    }
	aside#grilla-caja-lateral-izq {
		float: none;
		width: 100%;
	}
	aside#grilla-caja-lateral-der {
		float: none;
		width: 100%;
	}
	section#grilla-caja-central {
		width: 100%;
	}
	article.grilla-articulo-relacionado {
		float: none;
		width: 100%;
		margin-right: 0;
	} 	
}