/* CSS Document */

/*empezamos por esto, para evitar resultados extranos en distintos navegadores, y algo de estilo al texto*/
body {
	font-family:Arial, Helvetica, sans-serif;
	font-size:10px;
	color:#666666;
	text-align:center;
	background-color: #cccc33;
	width: 970px;
	height: 100%;
}
#contenedor {
	width:80px; /*ancho total de la pagina*/ 
	border:1px solid #333333; /*encadeno los 3 atributos claves del borde en una sola linea, ahorrando codigo XD*/ 
	background-color:#FFF8F0;
	margin:10px auto; /*10px arriba y abajo, y auto a los lados, para los navegadores nuevos es suficiente para centrar la pagina*/ 
	text-align:left; /*aqui alineamos todo de nuevo a la izquierda, pero dentro del contenedor*/ 
}
#cabecera {
	margin:8px; /*para que no se pegue al borde*/ 
	padding:8px; /*algo de relleno*/
	width:801px; /*este ancho es para que cuadre con el texto*/ 
	height:60px; /*idem*/ 
	border:0px solid #333333; /*more*/ 
	float:left; /*lo flotamos a la izquierda*/ 
	display:block; /*(*)*/ 
}
#encabezado {
	margin:10px; /*para que no se pegue al borde*/ 
	padding:10px; /*algo de relleno*/
	width:800px; /*este ancho es para que cuadre con el texto*/ 
	height:70px; /*idem*/ 
	border:1px solid #333333; /*decoracion*/ 
	background-color:#CCcc33; /*more*/ 
	float:left; /*lo flotamos a la izquierda*/ 
	display:block; /*(*)*/ 
}
#encabezado h1 { /*encadenamos el identificador del div, con la etiqueta para referirnos solo al h1 dentro del div encabezado,
asi no afectara otros h1 en el resto del documento.*/ 
	font-size:18px;
	font-weight:bold;
	width:224px;
	border-bottom:16px solid #FFFFFF;
	color:#FFFFFF;
	margin:0; /*los h1 vienen con margen, con esto se lo quito*/ 
	text-transform:uppercase; /*convierte todas en mayusculas*/ 
	padding-bottom:10px;
}
#menu {
	float:left;
	margin:10px 10px auto 0;
	border:1px solid #333333;
	width:320px;
	height:24px;
} 
ul {
	list-style-type:none; /*con esto quitamos las vinetas*/
	margin:0; /*le quitamos el margen a la lista*/ 
	padding:0; /*y el relleno*/
}
li {
	margin:0; /*le quito el margen al elemento de la lista*/ 
	float:left; /*y los floto a la izquierda para eliminar el salto de linea*/ 
}
li a {
	display:block; /*con esto el vinculo tendra un area rectangular, asi no sera solo el texto*/ 
	background-color:#CCcc33; /*algo de color*/ 
	color:#FFFFFF; /*mas*/ 
	width:58px; /*defino el ancho del rectangulo del vinculo*/
	padding:4px 0 5px 22px; /*sumamos el relleno al ancho y alto del rectangulo para obtener el div #menu completamente ocupado con los*/ 
	text-decoration:none; /*elimino el subrayado del vnculo*/ 
	font-weight:bold; /*decoracion*/ 
	text-transform:uppercase; /*decorare los vinculos en mayusculas*/
}
li a:hover {
	background-color:#999900; /*decoracion para el evento hover (mouse encima)*/ 
}
#contenido1 {
	clear:left;
	padding:5px;
	background-color: #EFF0C2;
	position: absolute;
	left: 28px;
	top: 111px;
	height: 716px;
	visibility: visible;
	width: 366px;
} 
#contenido2 {
	width:25%px;
	clear:both;
	padding:5px;
	background: #cccc33;
	background-color: #EFF0C2;
} 
#contenido h2 {
	font-size:16px;
	color:#CC0000;
	width:246px;
	text-transform:uppercase;
	border-bottom:1px dotted #CC3300;
}
#contenido h3 {
	width:246px;
	font-size:14px;
	color:#999900;
	border-bottom:1px dotted #999900;
}
#footer {
	width:560px;
	text-align:right;
	padding:2px;
	font-size:10px;
	font-style:normal;
	color:#000000;
	font-family: Arial, Helvetica, sans-serif;
	text-decoration: underline;
	margin: 2px;
	left: 2px;
	top: 2px;
	right: 2px;
	bottom: 2px;
	clip:  rect(2px 2px 2px 2px);
}