/* =====================================================

	WWW.BARRANCOSENPERU.ES 		
	WWW.GOCTA2010.COM 		

	Versión 1.0. Fecha: 15 de Octubre de 2009.
	Antonio Salguero.
	
===================================================== */

* { font-size: 100%; font-family: "Lucida Bright", Georgia, Times, serif; color: #620; }

/* --------------- Textos ---------------------- */
H1 { font: bold 200% "Book Antiqua", "Times New Roman", Times, serif; }
H2 { font: normal 130%  "Lucida Bright", Georgia, "Century Schoolbook", "Bookman Old Style", Times, serif; }
H3, H4, H5, H6  { font: bold 120% "Lucida Bright", Georgia, Times, serif; }
H1, H2, H3, H4, H5, H6, P, LI { Line-height: 150%;}

/* --------------- Enlaces ----------------------  */
A, A:visited { color: #791; text-decoration: none; } 
A:hover, A:active { color: #fa0; text-decoration: underline; }

/* ------------ Tablas y Formularios ------------- */
TABLE, TBODY, THEAD, TFOOT, TR, TH, TD { 	
	vertical-align: top;
 	}
	
IMG { border: 0; }
HR { border: thin dotted #eee; }

/*=================================================== 
			 Clases de Accesibilidad
===================================================== */
.DatosOcultos { display: none !important } /* solo en version sin hoja de estilos */
.DatosTapados { padding-top: 100px !important; } /* solo en version sin fotos */
.DatosAccesibles { position: absolute !important; left:-5000px !important; } /* fuera de pantalla pero acceso con teclado */

/*=================================================== 
			 Estructura Principal
===================================================== */
BODY {
	margin: 0; padding: 0;
	text-align:center; 
	font: normal 90% "Lucida Bright", Georgia, Times, serif;
	} 
/* --------------- Containers Pagina ---------------------- */
#Container {
	text-align:center;
	margin: 0 auto; 
	}	
.Ancho_Pagina {
	width:800px;
	margin: 0 auto;  
	}
/*=================================================== 
 		Area Cabecera
===================================================== */

#Area_Baner { 
	position: relative; 
	height:450px;
	}

#Area_Baner #nombre_web {
	position: absolute;
	top: -30px; right: -60px; 
	} 

#Area_Baner #logo_web { 
	position: absolute;
	top: 30px; left: 100px; 
	} 

#Area_Baner #rotulo { 
	position:absolute; z-index:50;
	right: 50px; top: 20px;
	font-size: 110%;
	font-weight: bold;
	padding: 5px; width:auto;	
	color: #fff;
	back ground: #b20 url();
	}
/*=================================================== 
			 Area Navegar
===================================================== */
#Fond o_Area_Navegar { margin:200px 0 150px; }
#Area_Navegar {
	height: 2.0em; 
	padding: 5px 0;
	}
#Area_Navegar * {
	margin: 0; padding: 0; line-height: normal;
	}
#Area_Navegar .Menu_Nav {
	float:right;
	width: 100%;
	}
/* ............................................. */
/* quita viñetas y fija padding... necesario para que no salga por arriba el marco */
#Area_Navegar .Menu_Nav UL { 
	padding-top: 2px;
	text-align: center;		
	}
/* Float left lo hace horizontal...y position relative sirve para posicionar subnivel */
#Area_Navegar .Menu_Nav LI{
	float:left;
	position:relative;
	z-index:90;
	}
/* necesario para IE 5.0, 6.0 */
#Area_Navegar .Menu_Nav TABLE {
	position:absolute;	z-index:80;
	border-collapse:collapse;
	left: 0; top:1.30em; /* margen igual al alto de titulo */
	}
/* General para todos los titulos y subtitulos */
#Area_Navegar .Menu_Nav LI,
#Area_Navegar .Menu_Nav A,
#Area_Navegar .Menu_Nav A:visited {
	font-size: 105%;
	font-weight: bold;
	display: block;
	height: 1.3em; 
	}
#Area_Navegar .Menu_Nav A,
#Area_Navegar .Menu_Nav A:visited {
	height: auto; 
	}
/* Especifico de los titulos */
#Area_Navegar .Menu_Nav LI A, 	
#Area_Navegar .Menu_Nav LI A:visited {
	width: 140px;
	padding: 4px 5px; 
	color: #ca8;
	white-space: nowrap;
	}
/* fija color de fondo de la barra cuando se entra en el submenu */
#Area_Navegar .Menu_Nav LI:hover, 
#Area_Navegar .Menu_Nav LI A:hover{	
	color: #eda; 
	}
/* Especifico de los subtitulos */
#Area_Navegar .Menu_Nav LI LI A, 	
#Area_Navegar .Menu_Nav LI LI A:visited {
	width: 180px;
	padding: 4px 2px; 
	font-size: 75%;
	font-weight: bold;
	color: #ca8; 
	white-space: normal;
	}
#Area_Navegar .Menu_Nav LI LI A:hover {	
	color: #eda; 
	}
/* Oculta subtitulos */
#Area_Navegar .Menu_Nav UL UL { 
	visibility:hidden;
	position:absolute;
	height:0;
	}
/* Muestra subtitulos al pasar encima */
#Area_Navegar .Menu_Nav UL LI:hover UL, 
#Area_Navegar .Menu_Nav UL A:hover UL { visibility:visible;}
#Area_Navegar A.selec:visited  { color: #fa0 !important; }


/* =================================================== 
	 	Area Central (division por zonas)
 ===================================================== */
#Fondo_Area_Central { clear:both; }
/* ............................................. */
#Area_Central_Ex { 
	text-align:center;
	} 
#Area_Central_In { 	
	overflow: hidden;
	padding: 0 10px;
	height: 100%; 
	}
/* ............................................. */
#Zona_Contenido { 
	width: 55%;
	float: left;
	padding-left: 60px; 
	overflow: hidden; 
	}
#Contenido { 
	position:relative; 
	padding: 15px 0;
 	text-align: justify; 
	width: 100%;
	}
	
#Zona_Contenido H1 {
	text-align: center;
	padding: 5px 0; 
	color: #630;
	}
#Zona_Contenido H2 {
	text-align: justify;
	padding: 5px 0; 
	color: #630;
	}

/*=================================================== 
			 Menus
===================================================== */
#Zona_Menu {
	margin-top: 50px;
	padding: 0px 30px 10px 0; 
	float: right;
	width: 27.5%;
	overflow: hidden;
	}
#Menu {
	margin: 0 auto 10px; 
	border: 1px solid #eda;
	text-align:center; padding:0;
	width: 100%; /* 200 utiles * 95% = 190 */
	}
	
/* ............................................. */
#Zona_Menu H3 a, #Zona_Menu H4 {
	font-size: 1.2em;
	font-weight: bold;
	text-align:center;
	padding: 10px 2px;
	text-decoration:none;
	margin:0 auto 8px;
	}
#Menu UL { 
	text-align:left; 
}
#Menu UL LI { 
	border-bottom: 1px dotted #FDFAF1;
	} /* sin borde-bottom no funciona en IE-6 */
#Menu A {
	display: block; 
	font: normal 100% Verdana, Georgia, Arial, Helvetica;
	text-align:left;
	padding: 2px 0;
	}
	
#Menu P {
	font: normal 100% Verdana, Georgia, Arial, Helvetica;
	text-align:center;
	}
	
/* ..................... */
#Zona_Menu IMG { 
	margin: 5px 15px;
	width: 80%;
	}

/* ..................... */
#Contenido IMG { 
	margin: 5px 0; display:block;
	width:100%;
	}

/*=================================================== 
			 Area Pie y Copyright
===================================================== */
#Fondo_Area_Pie { 	clear: both; }
#Area_Pie {
	text-align:justify;
	pad ding: 10px 0;
	}

#Area_Pie P {
	font-size: 105%;
	mar gin: 0 40px; 
	color: #dca;
	}
	
/* ............................................. */

#Fondo_Pie_Copyright { 	clear: both; }

#Area_Copy { 
	font-size: 85%;
	padding: 10px 0;
	}
#Area_Copy .copyright { 
	margin: 0 0 20px; 
	}

/* --------------- Enlaces ----------------------  */