/* CSS Document */
body {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#666666;
	text-align:left;
	SCROLLBAR-FACE-COLOR: #DFDFDF;
SCROLLBAR-HIGHLIGHT-COLOR: #818181;
SCROLLBAR-SHADOW-COLOR: #818181;
SCROLLBAR-3DLIGHT-COLOR: #eeeeee;
SCROLLBAR-ARROW-COLOR:  #818181;
SCROLLBAR-TRACK-COLOR: #FFFFFF;
SCROLLBAR-DARKSHADOW-COLOR: #eeeeee;
overflow: auto;
	}
#contenedor {
	width:400px; /*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*/ 
}
#encabezado {
	margin:10px; /*para que no se pegue al borde*/ 
	border:1px solid #333333; /*decoracion*/ 
	background-color:#666666; /*more*/ 
	float:right; /*lo flotamos a la derecha*/ 
	text-align:center;
	display:inline; /*(*)*/ 
}
#encabezado h1 { /*encadenamos el identificador del div, con la etiqueta par areferirnos 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;
}
a, a:link, a:visited, a:hover, a:active {text-decoration: none; color: black;}
a:visited {text-decoration: none;color:black;}
a:hover {text-decoration: none;color: black; background-color: rgb(255, 127, 80);}
 
#menu {
	float:left;
	margin:10px 10px auto 0;
	width:320px;
	height:24px;
} 
ul {
	list-style-type:none; /*con esto quitamos las viñetas*/
	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:CENTER; /*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:#CC3300; /*algo de color*/ 
	color:#FFFFFF; /*mas*/ 
	text-decoration:none; /*elimino el subrayado del vínculo*/ 
	font-weight:bold; /*decoración*/ 
	text-transform:uppercase; /*decorare los vinculos en mayusculas*/
}
li a:hover {
	background-color:#999900; /*decoración para el evento hover (mouse encima)*/ 
}
#contenido {
	width:453px; /*el ancho mas el padding me da 600px de ancho que es loque mide la pagina width:580px; */
	clear:both; /*con esto nos aseguramos de que no se ponga nada a los lados*/ 
	padding:10px;
} 
#contenido h1 {
	margin:20px; /*para que no se pegue al borde*/ 
	font-size:12px;
	font-weight:normal; /*decoración*/ 
	width:396px;
	color:black;
}
#enlaces {
	margin:20px; /*para que no se pegue al borde*/ 
	font-size:10px;
	font-weight:normal; /*decoración*/ 
	width:196px;
	color:black;
}
#contenido h2 {
	font-size:16px;
	color:#CC3300;
	width:206px;
	text-transform:uppercase;
	border-bottom:1px dotted #CC3300;
}
#contenido h3 {
	width:246px;
	font-size:14px;
	color:#999900;
	border-bottom:1px dotted #999900;
}
#footer {
	width:453px; /*menos porque debemos sumar el padding del div contenido*/ 
	text-align:center;
	padding:10px;
	font-size:4px;	
	font-style:italic;
	color:white;
	}
#footers {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 8px;
	font-style:italic;
	color: #FF9900;
}