@charset "utf-8";
/* CSS Document */

/* Curso CSS estilos aprenderaprogramar.com*/


/*Caja contenedora*/   
#wrap {
	font-size: 0.9em;
	width: 100%;
	background: rgb(0,121,0);
	margin:auto;
	background-color: rgb(0,204,153);
	margin-top:auto;
	}

/* Estilos que crean el menú desplegable */
/*Eliminamos padding y margin que introducen navegadores por defecto en listas*/
#navbar {
	padding: 0;
	margin: 0;
	-moz-border-radius: 2px;
}

/*Elementos items principales de menú que se muestran siempre*/
#navbar li {
	list-style: none;
	float: left;
	margin: 12px;
}
   
#navbar li a {
	display: block; /* Usamos display block para poder aplicar propiedades de caja a links */
	padding: 3px 8px;
	background-color: #00CC99;
	color: #fff;
	text-decoration: none;
}

/*Listas de subitems de menú*/   
#navbar li ul {
	display: none; /*La lista inicialmente no se muestra debido a display:none; */
	background-color: rgb(0,204,153)/*#0F9*/;
}
   
#navbar li:hover ul {
   font-size: 14px;
   display: block; /*Al situar el cursor sobre el item la lista de subitems pasa de display none a display block y se muestra*/
   position: absolute; /*Al desplegarse el submenú no ocupa espacio y no desplaza a otros elementos gracias a que establecemos position absolute*/
   margin: 0; padding: 0; /*Anulamos margin y padding que por defecto introducen navegadores*/
   }
#navbar li:hover li { float: none; } /*Anulamos el float left que define el elemento padre para que los subitems se muestren en vertical */
   
/*Creamos la apariencia de los subitems de menú, color de fondo, borde inferior, color de texto*/
#navbar li:hover li a {
	background-color: #0C9;
	border-bottom: 1px solid #fff;
	color: #060;
}

/*Creamos el efecto de cambio de color y aspecto cuando ponemos el puntero del ratón sobre un subitem de menú*/   
#navbar li li a:hover {
	background-color: #00FFCC;
}
   
.limpiador{padding:0; border-style:none; clear:both;} /*Forzamos a la caja a mostrarse aún conteniendo elementos flotantes*/