@charset "utf-8";
body
{
	background-color: #0000FF;
}

#caja1
{
	background-color: #28AD00;
	color: #FFFFFF;
	
}
#caja2
{
	background-color: #B0B310;
	color: #101BB3;
	
}
#caja3
{
	background-color: #ED5CD0;
	color: #7B0DDB;
	
}
#caja4
{
	background-color: #B0B310;
	color: #101BB3;
	
}
#caja5
{
	background-color: #28AD00;
	color: #FFFFFF;
	
}
.margenes
{
	padding: 5px;
	margin: 10px;
}
.estiloletra
{
	font familiy: "Cambria";
	font-size: 20px;
	font-weight: bold;
}
#caja2, #caja4
{
font familiy: "Arial";
	font-size: 14px;
	font-weight: italic;
	text-decoration: underline;	
}
#contenedor1
{
	background-color: #FAD6B3;
	width: 400px;
	padding: 10px;
	/*Con overflow: hidden hacemos que el contenedor conozca la altura de sus bloques internos*/
	overflow: hidden;
}
#izquierda
{
	background-color: #62ADDC;
	height: 100px;
	width: 400px;
	/*Hacemos que la caja flote a la derecha del contenedor*/
	float: right;
}
#referncia2
{
	background-color: #D56F1C;
	height: 40px;
	width: 400px;
	/*Con esta opción evitamos que la caja referencia2 se coloque al lado izquierdo de la caja flotante derecha pues rompe el esquema del float, en vez de eso, da un salto de línea y se coloca debajo*/
	clear: both;
}
#contenedor2
{
	background-color: #A14AB0;
	width: 400px;
	padding: 10px;
	overflow: hidden;
}
#float1
{
	background-color: #F0C2DF;
	height: 100px;
	width: 150px;
	float: right;
}
#float2
{
	background-color: #ECE090;
	height: 100px;
	width: 150px;
	float: right;
}
#absoluta
{
	background-color: #8FE7A7;
	height: 100px;
	width: 150px;
	margin-left: 170px;
	margin-top: 20px;
}
#clear
{
background-color: #D0E1F5;
	height: 100px;
	width: 150px;
	clear: both;	
}
/*Aquí inicia la página 16*/
#contenedor3, #contenedor4
{
	background-color: #9E59C9;
	padding: 5px;
	/*Indica que se trata de una caja flexible que nos ayudará a acomodar los elementos.*/
	display: flex;
}
/*Este estilo solo se aplica a #contenedor 3*/
#contenedor3
{
	width: 300px;
	/*Indica la orientación de los elementos de forma horizontal*/
	flex-direction: row;
	/*Aliner los elementos del contenedor al centro, es decir, los bloques de botones tomando en cuenta la orientación horizontal*/
	justify-content: center;
}
/*Este estilo solo se aplica a #contenedor4*/
#contenedor4
{
	width: 100px;
	margin-top: 10px;
	/*Indica la orientación de los elementos de forma vertical*/
	flex-direction: column;
	/*Alínea los elementos del contenedor al centro, es decir, los bloques de botones tomando en cuenta la orientación vertical*/
	align-items: center;
}
.botones
{
	background-color: #F9CE7B;
	/*Redondea los boredes deldiv mediante su valor de radio*/
	border-radius: 10px;
	padding: 10px;
	margin:5px;
	text-align: center;
	font-style: "Comic Sans";
	font-size: 18px;
}
/*El primer estilo afectará alos span cuyo ancestro sea #contenedor5. El segundo estilo afectará a todas lasdemas etiquetas span en el documento.*/
#contenedor5 span
{
	background-color: #F66767;
}
span
{
	background-color: #5867FB;
}
#cuerpo
{
	background-color: #E871F6;
	justify-content: center;
	margin: 10px;
	padding: 10px;
	overflow: hidden;
}
#cabecera
{
	background-color: #DDF443;
	padding: 30px;
	text-align: center;
	font-size: 30px;
	font-weight: bold;
}
#navegacion
{
	background-color: #4AF856;
	margin-top: 10px;
	padding: 5px;
	text-align: center;
}
#noticias
{
	background-color: #E54444;
	height: 300px;
	width: 90px;
	float: left;
}
#banner
{
	background-color: #9C0BE0;
	clear: both;
	padding: 10px;
	text-align: center;
}
#pie
{
	background-color: #9C0BE0;
	clear: both;
	padding:10px;
	text-align: center;
}