<style type="text/css">

#cabecera {
width:  100% ;
height: 20%;
}

#menu_izquierda {
width: 24%;

float: left; 

height: 400%;
border-right: 0px groove #683C3C;
 padding-right:1%;
}

#contenido {

margin-left: 60px;
width: 84%;
height: 400%;
}

#pie {
width:  100% ;
height: 20%;
}
.h1 {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 18px;
	color: #FFCC99;  
	 background-color:#993333; 	
}
.h2 { font-family: sans-serif;
font-size:12px; font-style:italic;}

.h3 { font-family: sans-serif;
font-size:13px;}


/*** Nav bar styles ***/

ul.nav,
.nav ul{
/*Remove all spacings from the list items*/
        margin: 0;
        padding: 0;
        cursor: default;
        list-style-type: none;
        display: inline;
}

ul.nav{
        display: table;
}
ul.nav>li{
        display: table-cell;
        position: relative;
        padding: 2px 6px;
}


ul.nav>li:hover{
        padding-right: 1px;
} [*]

ul.nav li>ul{
/*Make the sub list items invisible*/
        display: none;
        position: absolute;
        max-width: 40ex;
        margin-left: -6px;
        margin-top: 2px;
}

ul.nav li:hover>ul{
/*When hovered, make them appear*/
        display :  block;
}

.nav ul li a{
/*Make the hyperlinks as a block element, sort of a hover effect*/
        display: block;
        padding: 2px 10px;
}

/*** Menu colors (customizable) ***/

ul.nav,
.nav ul,
.nav ul li a{
        background-color: #fff;
        color: #111111;
}


ul.nav li:hover,
.nav ul li a:hover{
        background-color: #993333;
        color: #fff;
}

ul.nav li:active,
.nav ul li a:active{
        background-color: #036;
        color: #fff;
}

ul.nav,
.nav ul{
        border: 1px solid #993333;
}

.nav a{
        text-decoration: none;
}
</style>
