@charset "utf-8";
/* CSS Document */

body {
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:12px;
	color:#666666;
	text-align:center; /*aqui mandamos a centrar todo el contenido*/
}

#contenedor {
	width:950px; /*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:#FFCCFF;
	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;
	margin-top: 5%;
}

#encabezado {
	margin:10px; /*para que no se pegue al borde*/ 
	padding:10px; /*algo de relleno*/
	width:224px; /*este ancho es para que cuadre con el texto*/ 
	height:50px; /*idem*/ 
	border:1px solid #333333; /*decoracion*/ 
	background-color:#CC6600; /*more*/ 
	float:left; /*lo flotamos a la izquierda*/ 
	display:inline; /*para corregir un error de IE*/ 
}

#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 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:left; /*y los floto a la izquierda para eliminar el salto de linea*/
	font-size: 9px;
	text-align: left;
}
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*/
	width:80px; /*defino el ancho del rectangulo del vinculo*/
	padding:6px 0px; /*sumamos el relleno al ancho y alto del rectangulo para obtener el div #menu completamente ocupado con los ítems del menú*/
	text-decoration:none; /*elimino el subrayado del vínculo*/
	font-weight:bold; /*decoración*/
	text-transform:uppercase; /*decorare los vinculos en mayusculas*/
	text-align: center;
}
li a:hover {
	background-color:#999900; /*decoración para el evento hover (mouse encima)*/ 
}

#contenido {
	width:580px; /*el ancho mas el padding me da 600px de ancho que es loque mide la pagina */
	clear:both; /*con esto nos aseguramos de que no se ponga nada a los lados*/ 
	padding:10px;
}

#contenido h2 {
	font-size:16px;
	color:#CC3300;
	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; /*menos porque debemos sumar el padding del div contenido*/ 
	text-align:right;
	padding:10px;
	font-size:80%; /*mas pequeño el texto*/ 
	font-style:italic;
	color:#999999;
}