/* BARRA DE MENÚ HORIZONTAL */

#menu_horizontal {
	margin: 0;
}

#menu_horizontal * {
	font-size: 10px;
	line-height: 150%;
}

/* Con esta regla eliminamos el subrayado en los enlaces porque en los menús no es realmente necesario y otras propiedades que en principio han de ser comunes*/

#menu_horizontal a, #menu_horizontal p {
	text-decoration: none;
	color: #000;
}

/* La barra de menús se define como una lista anidada. Esta es la lista de menús. El posicionamiento relativo nos permite colocar la segunda linea (el menú desplegado) justo por debajo, los menús se alinean horizontalmente con text_align */

#menu_horizontal ul.barra {
	position: relative;
	text-align: center;
	margin: 0;
	padding: 4px 0;
	display: block;
	width: 100%; /*IE Win lo necesita para colocar bien la segunda línea*/
	/* Decoracion */	
	background-color: inherit;
}

/* Los menús son los ítems de la lista. El padding no funciona verticalmente. Margin nos permite separar los ítems y Padding nos permite crear un espacio al derecha e izquierda*/

#menu_horizontal ul.barra li {
	display: inline;
	padding: 0px;
	margin: 0 -1px 0 0; /* Separación entre las etiquetas de la barra*/
	border-left: 1px solid #2170BF;
}

#menu_horizontal ul.barra > li:first-child {
	border-left: none;
}

/* Aquí p tiene que funcionar como caja inline*/

#menu_horizontal ul.barra li p,
#menu_horizontal ul.barra li a {
	display: inline;
	padding: 5px 10px; /* padding horizontal = el que queramos, padding-vertical = padding-vertical del UL*/
	background-color: #fff;
	border-bottom: 3px solid #000;
}



/* Marca para el ítem de menú seleccionado actualmente li.actual nos permite definir los atributos de la solapa, pero debemos especificar algunos en la etiqueta del enlace (como el color del texto). Posteriormente deberemos corregir en los items del menú porque heredan algunas de las propiedades definidas aquí */

#menu_horizontal ul.barra li.actual a {
	background-color: #fff;
	border-bottom: 3px solid #2170BF;
}

/* A continuación debemos definir el estado de hover, de una manera similar */


#menu_horizontal ul.barra li a:hover {
	border-bottom: 3px solid #F8DA56;
}

/* Comienza la magia. Aquí definimos el posicionamiento del submenú, relativo a la barra superior (o sea, absoluto tomando como referencia la posición de la lista "barra"). Inicialmente lo tenemos oculto porque sólo se va a mostrar si hacemos hover o si se trata del menú actual.
El posicionamiento vertical se establece relativo (1 em) de modo que es la altura del cuerpo de carácter actual, así nos aseguramos de que siempre sale justo debajo. Si queremos alguna separación podemos utilizar otra medida, o modificar padding o margin verticales.
La definición de la anchura a 100% junto con el margin horizontal auto nos permite centrar la segunda línea bajo la primera.
 */

#menu_horizontal ul.barra li ul.menu {
	display: none;
	position: absolute;
	top: 18px;
	left: 0%;
	padding: 0;
	margin: -2px 0 0 0;
	width: 100%;
	z-index: 100;
	background-color: #fff; /* Hay que poner un relleno apra que no mezclen*/
	border-top: 1px solid #ccc;
}

/* La segunda línea de menús se muestra cuando estamos haciendo hover sobre unos de los menús o bien se muestra la del menú actual */

#menu_horizontal ul.barra li:hover ul.menu {
	display: block;
	z-index: 100;
}

#menu_horizontal ul.barra li.actual ul.menu {
	display: block;
	background-color: #fff;
	z-index: 50;
}

/* Estas reglas controlan la apariencia de los ítems de menú */

/* Aquí los ítems no seleccionados */

#menu_horizontal ul.barra li ul.menu li,
#menu_horizontal ul.barra li.actual ul.menu li a, 
#menu_horizontal ul.barra li:hover ul.menu li a {
	background-color: #fff;
	color: #000;
	border: none;
}

/* Aquí el menú actual */

#menu_horizontal ul.barra li ul.menu li.actual, 
#menu_horizontal ul.barra li.actual ul.menu li.actual, 
#menu_horizontal ul.barra li.actual ul.menu li.actual a, 
#menu_horizontal ul.barra li:hover ul.menu li.actual a{
	background-color: #336699;
	color: #fff;
}

/* Los ítems sobre los que hacemos hovering */

#menu_horizontal ul.barra li.actual ul.menu li:hover, 
#menu_horizontal ul.barra li ul.menu li:hover, 
#menu_horizontal ul.barra li.actual ul.menu li:hover a,   
#menu_horizontal ul.barra li:hover ul.menu li:hover a{
	background-color: #6699CC;
	color: #fff;
}