/*empezamos por esto, para evitar resultados extraños en distintos navegadores, y algo de estilo al texto*/
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:770px; /*ancho total de la pagina*/ 
	border:1px solid #5CAB7D; /*encadeno los 3 atributos claves del borde en una sola linea, ahorrando codigo XD*/ 
	background-color:#CFE6D9;
	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*/ 
	padding:10px; /*algo de relleno*/
	width:224px; /*este ancho del encabezado*/ 
	height:40px; /*idem*/ 
	border:1px solid #2A441A; /*decoracion*/ 
	background-color:#51795A; /*fondo encabezado*/ 
	float:left; /*lo flotamos a la izquierda*/ 
	display:inline; /*(*)*/ 
	
}

#encabezado h1 { /*encadenamos el identificador del div, con la etiqueta par areferirnos solo al h1 dentro del div encabezado, asi no me jode otros h1 en el resto del documento.*/ 
	font-size:18px;
	font-weight:bold;
	width:224px;
	border-bottom:5px 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:right;
	margin:5px 10px auto 0;
	border:1px solid #5CAB7D;
	width:300px;

} 



#menu 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*/
}
#menu li {
	margin:0; /*le quito el margen al elemento de la lista*/ 
	font-size:12px;
	float:rigth; /*y los floto a la izquierda para eliminar el salto de linea*/ 
}
#menu li a {
	display:block; /*con esto el vinculo tendra un area rectangular, asi no sera solo el texto*/ 
	background-color:#7EBC97; /*algo de color*/ 
	color:#FFFFFF; /*mas*/ 
	width:150px; /*defino el ancho del rectangulo del vinculo*/
	padding:4px 0 5px 150px; /*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; /*Por cualquier cosa, pongo  los vinculos en mayusculas*/
}
#menu li a:hover {
	background-color:#51795A; /*decoración para el evento hover (mouse encima)*/ 
}

#contenido {
	width:750px; /*el ancho mas el padding me da 770px 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:#344E3A;
	width:246px;
	text-transform:uppercase;
	border-bottom:1px dotted #344E3A;
}
#contenido h3 {
	width:246px;
	font-size:14px;
	color:#51795A;
	border-bottom:1px dotted #51795A;
}
/*DEFINO PROPIEDADES Y CARACTERISTICAS RECUADRO CENTRADO*/

#recuadro_centrado {
	width: 300px;    
	margin-left: auto;
	margin-right: auto;
} 
#recuadro_centrado h2 {
	font-size:16px;
	color:#344E3A;
	width:246px;
	text-transform:uppercase;
	border-bottom:1px dotted #344E3A;
}

#recuadro_centrado h3 {
	width:300px;
	font-size:14px;
	color:#51795A;
	border-bottom:1px dotted #51795A;
}
#recuadro_centrado ul {
	list-style-type:square; /*con esto pongo cuadrados en viñetas*/
	list-style-position:outside;/*indico como indentar*/
}
#recuadro_centrado ol {
	list-style-type:square; /*con esto pongo cuadrados en viñetas*/
	list-style-position:outside;/*indico como indentar*/
}
#recuadro_centrado li a {
	display:block; /*con esto el vinculo tendra un area rectangular, asi no sera solo el texto*/ 
	background-color:#B4D8C2; /*color del background de la linkera*/ 
	text-decoration:none; /*elimino el subrayado del vínculo*/ 
	color:#666666; /*color de la fuente del link*/ 
}
#recuadro_centrado li a:hover {
	background-color:#51795A; /*decoración para el evento hover (mouse encima)*/ 
	color:#FFFFFF; /*texto claro para onmouseover*/ 
}
#recuadro_centrado li {
	font-size:12px;
}
/*FIN DE PROPIEDADES DE RECUADRO CENTRADO*/
#footer {
	width:660px; /*menos porque debemos sumar el padding del div contenido*/ 
	text-align:right;
	padding:11px;
	font-size:80%; /*mas pequeño el texto*/ 
	font-style:italic;
	color:#999999;
}