#menu{
	float: left;
	width: 100%;
	clear: both;
	background-image: url(../images/barra.png);
	background-repeat: repeat-x;
}
#menu ul{
	list-style: none;
	display: inline;
	margin: 0;
	padding: 10px 10px 0;
}
#menu li{
	float: left;
	position: relative;
	color: #333;
	margin: 0;
	display: block;
	font-family: Verdana, Geneva, sans-serif;
	background-image: url(../images/barra.png);
	background-repeat: repeat-x;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 9px;
}
#menu #activo{
	color: #333;
}
#menu #activo a{
   padding-bottom: 0px;
}
#menu #activo li, #menu #activo li a, * * #menu #subm li , #menu #subm li a{
	background-image: url(../images/barra2.png);
	background-repeat: repeat-x;
	width: 160px;
	background-position: left top;
}
#menu li ul{
	/* se ocultan los submenus */
   display: block;
	visibility: hidden;
	position: absolute;
	width: auto;
	top: 1.2em;
	left: 0;
}
#menu ul li > #menu ul{
	top: auto;
	left: auto;
}
#menu ul li:hover ul , #menu ul li.over ul{
   visibility: visible;
}
/* se hacen visibles los submenus */
#menu #activo ul , #menu li:hover ul{
   visibility: visible;
}
/* por defecto se ve el submenu que dependa de la opcion activa */
#menu #activo ul{
   z-index: 10;
}
/* el z-index del hover es mayor para poder ver el submenú de otras opciones */
#menu li:hover ul{
   z-index: 100;
}
#menu ul li a{
	float: left;
	display: block;
	text-decoration: none;
	color: #999;
	/* el padding para la izquierda es también de 15 (como la dere), pero al haber puesto 9 en el elemento "li" hay que descontarlo aquí */
   padding: 5px 5px 4px 10px;
	font-weight: normal;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 15px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #FFF;
}
#menu a:hover {
	color: #FFF;
	background-image: url(../images/barra2.png);
	width: auto;
}
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a {
	height: 0%;
}
* #menu a { float: none ; }

