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

/* Curso CSS estilos aprenderaprogramar.com*/


/*Caja contenedora*/   
#wrap {
	font-size: 0.8em;
	width: 96%;
	background: rgb(158, 75, 138);
	margin:auto;
	background-color: rgb(158, 75, 138);
	margin-top:auto;
	margin-left:25px;
	}

/* 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: 10px;
}
   
#navbar li a {
	display: block; /* Usamos display block para poder aplicar propiedades de caja a links */
	padding: 3px 8px;
	background-color: #9e4b8a;
	color: #fff;
	text-decoration: none;
}
#navbar li:first-child a {
	background-color: #b980ab;
}


/*Listas de subitems de menú*/   
#navbar li ul {
	display: none; /*La lista inicialmente no se muestra debido a display:none; */
	background-color: rgb(158, 75, 138) /*rgb(185, 128, 171)*/;
}

#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: #9e4b8a;
	border-bottom: 1px solid #fff;
	color: #fff;
}
#navbar li:hover li a[href$=".html"] {
	background-color: #b980ab;
	border-bottom: 1px solid #fff;
	color: #fff;
}


/*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: #9e4b8a;
}

   
.limpiador{padding:0; border-style:none; clear:both;} /*Forzamos a la caja a mostrarse aún conteniendo elementos flotantes*/