/*
*** Ejemplo de diagramación (maquetación) elástica a dos columnas ***
http://www.100px.com/ejs/8/
Versión: con columna de extras a la derecha
Autor: Nicolás Fantino (ala_747)
Licencia: CC by-sa 1.0
URL licencia: http://creativecommons.org/licenses/by-sa/1.0/
*/
body {
	background-color: #fff;
	color: #666;
	font-family: Arial, Helvetica, sans-serif;
/* definir el tamaño del texto del BODY al 100% es imprescindible
para "ciertos" navegadores (sí, IE por ejemplo) que en su defecto 
reaccionarán de formas extrañas al ampliar el tamaño de letra */
	font-size: 100%;
}
h1 {
	font-size: 3em;
}
h2 {
	font-size: 1.8em;
}
#contenedor {
	font-size: .8em;
	width: 50em;
}
#encabezado {
	clear: both;
	width: 50em;
	color: #69c;
}
#encabezado h1 {
/* Al ser los anchos relativos al tamaño de la tipografía definida en cada bloque
para lograr el efecto de un ancho de 15em al 100% pero con un tamaño de tipografía más grande (3em en el caso de H1)
debemos dividir el ancho al 100% (15em) por el tamaño de la tipografía del bloque (3em).
*/
	width: 5em;
	float: left;
	margin: 0;
	padding: 0;
}
#encabezado p {
	font-size: .85em;
/* Al ser los anchos relativos al tamaño de la tipografía definida en cada bloque
para lograr el efecto de un ancho de 35em al 100% pero con un tamaño de tipografía más pequeño (.85em en este caso)
debemos dividir el ancho al 100% (35em) por el tamaño de la tipografía del bloque (.85em).
Es conveniente redondear el resultado hacia abajo por la cantidad de decimales que puede dar
y porque no todos los navegadores manejarán igual esos decimales.
*/
	width: 41em;
	float: left;
	margin: 1.3em 0;
	color: #9cf;
}
#contenido {
	float: left;
	width: 35em;
	color: #900;
}
#contenido h2 {
	color: #cb9e9e;
}
#extras {
	float: left;
	width: 15em;
}
#extras h2 {
	color: #cfaf30;
}
#extras h3 {
	color: #fc0;
}
#extras p {
	font-size: .85em;
	color: #f90;
}
#pie {
	clear: both;
	font-size: .85em;
}
a {
	color: #f60;
}