@charset "utf-8";
/* Autor: Gustavo Angulo Diestra. gustavoangulo@tallerdali.pe */
header, nav, section, article, aside, figure, footer{
	display:block;
	margin:0;
	padding:0;
}
.limpiar{
	clear:both;
}
p, h1, h2, h3{
	font-family:Arial, sans-serif;
	font-size:12px;
	color:#000;
	margin:0;
}
h1{
	font-size:26px;
}
h2{
	font-size:24px;
}
h3{
	font-size:20px;
}
a{
	font-family:Arial, sans-serif;
	font-size:12px;
	color:#000;
	text-decoration:none;
}
body{
	margin:0;
	background:#164C88;
}
/*---------Cabecera------------*/
#cabecera{
	width:1000px;
	height:70px;
	margin:0 auto;
}
#logo{
	width:294px;
	height:63px;
	float:left;
	padding-top:3px;
	margin-right:343px;
}
#cabecera p{
	width:240px;
	display:block;
	float:left;
	color:#FFF;
	font-size:14px;
	padding-top:30px;
}
#cabecera ul{
	width:110px;
	height:28px;
	display:block;
	float:left;
	margin:0;
	padding:0;
	list-style:none;
	padding-top:33px;
}
#cabecera li{
	float:right;
}
#cabecera li a{
	width:30px;
	height:28px;
	display:block;
	margin-left:6px;
}
/*----------------Menu--------------*/
#menu{
	height:46px;
	border-bottom:2px solid #CCC;
	border-top:2px solid #CCC;
	background:#DDDDDD url(../imagenes/fondoweb.jpg);
	background:linear-gradient(top,#F5F6F8,#DDDDDD,#E8EAE5);
	background:-moz-linear-gradient(top,#F5F6F8,#DDDDDD,#E8EAE5);
	background:-o-linear-gradient(top,#F5F6F8,#DDDDDD,#E8EAE5);
	background:-webkit-linear-gradient(top,#F5F6F8,#DDDDDD,#E8EAE5);
	background:-ms-linear-gradient(top,#F5F6F8,#DDDDDD,#E8EAE5);
}
#menu ul{
	width:998px;/* se le resta el ancho de los pixel que generan los borders*/
	height:46px;
	display:block;
	margin:0 auto;
	padding:0;
	list-style:none;
	border-left:1px solid #B6B6BA;
	border-right:1px solid #B6B6BA;
}
#menu li{
	float:left;
}
#menu li a{
	height:31px;/* a este alto se le resta el padding el primer valor porque aumenta*/
	display:block;
	font-family:"Trebuchet MS", Verdana, sans-serif;
	font-size:13px;
	color:#555555;
	border-right:1px solid #B6B6BA;
	padding:15px 31px 0 31px;
}
#menu li a:hover{
	color:#164C88;
}
#menu li:last-child a{
	border-right:none;
}
#mmovil{
	display:none;/*------desactiva el menu para tabletas---------*/
}
/*-----Cuerpo--------*/
#cuerpo{
	margin-bottom:5px;
}
#banner{
	margin-bottom:5px;
	overflow:hidden;/* todo lo que esta fuera del banner lo esconde*/
}
#banner img{
	width:100%;
	height:auto;
	display:block;
}
/*------Contenidos---------*/
#contenidos{
	width:980px;
	background:#fff;
	min-height:480px;
	margin:0 auto;
	padding:25px 10px;
}
.caja-columnas{
	width:314px;
	float:left;
	margin-right:19px;
}
.sinmargen{
	margin-right:0;
}
#columnas h2{
	margin:0;
	display:block;
	line-height:42px;
	background:#5F6C72;
	text-align:center;
	color:#FFF;
	font-size:14px;
	margin-bottom:6px;
}
.vermas{
	width:180px;
	line-height:30px;
	display:block;
	background:#FFB029;
	text-align:center;
}
.vermas:hover{
	background:#164C88;
	color:#FFF;
}
#columnas ul{
	margin:0;
	padding:0;
	list-style:none;
}
#columnas li a{
	display:block;
	border-bottom:1px solid #DDDDDD;
	padding:5px 0 5px 15px;
	font-size:13px;
	color:#83858C;
	background:url(../imagenes/flecha.png) no-repeat left top;
	background-position:0 4px; /*Mueve el fondo, este código me va permitir dar valores de izq a derecha y de arriba hacia abajo, esto es para bajar la flecha*/
}
#columnas li a:hover{
	text-decoration:underline;
}
/*------------ENLACES EXTERNOS-----------*/
#enlaces-externos h2{
	font-size:14px;
	line-height:30px;
	border-bottom:1px solid #DDD;
	margin:15px 0;
}
#enlaces-externos h2 span{
	background:#43B0E8;
	width:314px;
	display:block;
	text-align:center;
	color:#FFF;
}
.logos{
	margin:0;
	padding:0;
	list-style:none;
}
.logos li{
	float:left;
}
.logos li a{
	display:block;
	margin-right:15px;
	margin-bottom:10px;
}


/*------Pie Pagina---------*/
#piepagina{
	background:#5F6C72;
	padding:10px 0;
}
#cajacentropie{
	width:1000px;
	margin:0 auto;
}
#cajacentropie figure{
	width:400px;
	display:block;
	float:left;
}
#cajacentropie figcaption{
	color:#FFF;
	font-family:Arial, sans-serif;
	font-size:12px;
	display:block;
	padding-left:70px;
}
#cajacentropie ul{
	width:180px;
	height:28px;
	display:block;
	float:right;
	margin:0;
	padding:0;
	list-style:none;
}
#cajacentropie ul li{
	float:right;
}
#cajacentropie ul li a{
	display:block;
	line-height:28px;
	margin-left:5px;
	color:#FFF;
}
	
/***************************************************/
/*********** Estilos Tableta 1024  *****************/
/***************************************************/
@media only screen and (max-width:1024px){
	/*---------Cabecera------------*/
	#cabecera{
		width:100%;
		height:70px;
		margin:0 auto;
	}
}
/***************************************************/
/*********** Estilos Tableta 800  *****************/
/***************************************************/
@media only screen and (max-width:800px){
	/*---------Cabecera------------*/
	#cabecera{
		height:auto;
		padding:10px 0;
	}
	#logo{
		width:100%;
		height:auto;
		float:none;
		padding-top:0;
		margin-right:0;
	}
	#logo img{
		display:block;
		margin:0 auto;
	}
	#cabecera p{
		display:none;
	}
	#cabecera ul{
		display:none;
	}
	/*----------------Menu--------------*/
	#menu{
		height:auto;
		border-bottom:none;
		border-top:none;
		background:none;
	}
	#menu ul{
		width:100%;/* se le resta el ancho de los pixel que generan los borders*/
		height:auto;
		display:none;
		margin:0 auto;
		padding:0;
		list-style:none;
		border-left:none;
		border-right:none;
	}
	#menu li{
		float:none;
	}
	#menu li a{
		width:100%;
		height:30px;/* a este alto se le resta el padding el primer valor porque aumenta*/
		display:block;
		font-family:"Trebuchet MS", Verdana, sans-serif;
		font-size:13px;
		color:#FFF;
		text-align:center;
		font-weight:bold;
		border-right:none;
		padding:10px 0 0 0;
		margin-bottom:1px;
		background:#6B757D;
	}
	#menu li a:hover{
		color:#FFF;
		background:#F29F10;
	}
	#mmovil{
		width:96%;
		height:28px;
		display:block;/*------se activa el menu para tabletas a partir de 800px---------*/
		padding:12px 2% 0 2%;
		background:linear-gradient(top,#FAFAFA,#D7D6D6);
		background:-moz-linear-gradient(top,#FAFAFA,#D7D6D6);
		background:-webkit-linear-gradient(top,#FAFAFA,#D7D6D6);
		background:-o-linear-gradient(top,#FAFAFA,#D7D6D6);
		background:-ms-linear-gradient(top,#FAFAFA,#D7D6D6);
		color:#000;
		position:relative;
		margin-bottom:5px;
	}
	#mmovil:after{
		content:"";
		width:30px;
		height:26px;
		display:block;
		background:url(../imagenes/mmovil.png);
		position:absolute;
		top:7px;
		right:7px;
	}
	/*------Contenidos---------*/
	#contenidos{
		width:94%;
		padding:3%;
	}
	.caja-columnas{
		width:100%;
		float:none;
		margin-right:0;
		margin-bottom:15px;
	}
	/*------------ENLACES EXTERNOS-----------*/
	#enlaces-externos h2 span{
		width:100%;
	}
	/*------Pie Pagina---------*/
	#cajacentropie{
		width:100%;
		margin:0 auto;
	}
	#cajacentropie figure{
		width:100%;
		display:block;
		float:none;
	}
	#cajacentropie figure img{
		display:block;
		margin:0 auto;
		margin-bottom:5px;
	}
	#cajacentropie figure figcaption{
		color:#FFF;
		font-family:Arial, sans-serif;
		font-size:12px;
		display:block;
		padding-left:0;
		text-align:center;
		margin-bottom:5px;
	}
	#cajacentropie ul{
		width:180px;
		height:28px;
		display:block;
		float:none;
		margin:0 auto;
		padding:0;
		list-style:none;
	}
}
/***************************************************/
/*********** Estilos Tableta 603  *****************/
/***************************************************/
@media only screen and (max-width:603px){

}
/***************************************************/
/*********** Estilos Tableta 533  *****************/
/***************************************************/
@media only screen and (max-width:533px){

}
/***************************************************/
/*********** Estilos Tableta 480  *****************/
/***************************************************/
@media only screen and (max-width:480px){
	body{
		margin:5px;
	}
}
/***************************************************/
/*********** Estilos Tableta 360  *****************/
/***************************************************/
@media only screen and (max-width:360px){
	#banner{
		display:none;
	}

}
/***************************************************/
/*********** Estilos Tableta 320  *****************/
/***************************************************/
@media only screen and (max-width:320px){
	#logo img{
		width:80%;
		height:auto;
		display:block;
		margin:0 auto;
	}
	.caja-columnas figure img{
		width:100%;
		height:auto;
		display:block;
	}
	#cajacentropie figure img{
		width:70%;
		height:auto;
	}
}
/***************************************************/
/*********** Estilos Tableta 240  *****************/
/***************************************************/
@media only screen and (max-width:240px){

}