body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-color:   #003;
}


/* COMPOSICION DE COLUMNAS -------------------------------------------------------------------*/
#CONTAINER	{
	width:1020px;
	height:auto;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	background-color: #232A7B;
}
	.header{
		height:100px;
		margin-top: 0;
		margin-right: 0;
		margin-bottom: 0px;
		margin-left: 0;
	
		z-index: -999;
	}
	/*
	hacer que se sitúe a la izquierda
	mediante "float"*/
	.izquierda{
		width:144px;
		height:auto;
		float:left;
		min-height:700px;

	}
	.izquierda ul	{
		line-height: 140%;
	}
	.derecha{
	width:200px;
	min-height: 700px;
	float:right;
	vertical-align: top;
	text-align: center;
	z-index: -999;

	}
	/*Ahora le toca a la caja que contendrá la información 
	principal de nuestra página (la div "principal")
	en este caso queremos que se ajuste al espacio
	que sobra a lo ancho del contenedor, por que calculamos, 700px(anchura del mismo)-100px(anchura de la div "izquierda")-150px(anchura de la div "derecha")-20px(total de los margins)-34px(total de los paddings)-6px (total de los borders)=390px.
	Además de esto, también queremos que quede situado entre las cajas que la rodean,
	por lo que calcularemos el espacio que debería quedar a su izquierda y después poner el mismo valor en su "margin-left"
	(Hay que prestar especial atención a contar TODOS los valores que se utilizarán, incluidos, márgenes, padding, bordes...)*/
	.principal{
	min-height:700px;
	margin-top: 0px;
	margin-right: 200px;
	margin-bottom: 0;
	margin-left: 144px;
	padding-top: 2px;
	padding-right: 0px;
	padding-bottom: 5px;
	padding-left: 5px;
	}
	.footer{
	width: auto;
	height:30px;
	border-style:solid;
	border-width:1px;
	border-color:#999;
	margin:5px;
	max-width: 1024px;
	margin-left: auto;
	margin-right: auto;

}
	

/* EL MENU -------------------------------------------------*/


#list-menu{
	width: 144px;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 11px;
	color: #600;
	font-variant: small-caps;
}


#list-menu ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
	border-bottom-style: solid;
	border-bottom-color: #999;
	border-bottom-width: 1px;
}

#list-menu li {
	margin: 0px 0 0;
} 
#list-menu a {
	display: block;
	text-decoration: none;
	border-bottom-width: 1px;
	border-top-color: #999;
	border-top-width: 1px;
	height: 20px;
	border-top-style: solid;
	color: #CCC;
	padding-top: 4px;
	padding-right: 3px;
	padding-bottom: 2px;
	padding-left: 5px;
} 

#list-menu a:link, #list-menu a:active, #list-menu a:visited {
	color: #CCC;
}

#list-menu a:hover {
	background-color: #50599C;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-bottom-color: #fff;
	padding-left: 10px;
	color: #FFF;
}