/* ESTILOS PARA EL MENU DE NAVEGACION PRINCIPAL */

#mainMenu {
	line-height: 120%;
	display: block;
}

#mainMenu, #mainMenu ul{
	margin: 0px;
	padding: 0px;
	list-style-type:none;
	text-align: right;
}

#mainMenu ul{
	display: none;
}

/* por defecto los lis son bloques. Sin embargo, IE tiene un bug cuando se incluye un enlace (a) como bloque dentro de un 
elemento li, mostrando un "margen" vertical muy grande. Una forma de evitarlo es hacer que el li tenga como display: inline.
No lo he chequeado intensivamente pero parece que funciona. Otro "workaround" es hacer que el width del bloque-enlace
sea del 100% o una medida fija, en ese caso IE lo visualiza correctamente. Como tengo paddings y todo eso, he optado por
la primera opcion, ya que la segunda requeriria anadir un ancho distinto para cada nivel del menu.*/

#mainMenu li {
	display: inline;
}

/* PARA LOS ENLACES DE TODOS LOS NIVELES */
#mainMenu a{
	display:block;
	text-decoration: none;
	padding: 3px 9px 3px 3px;
	font-size: 85%;
	font-style: normal;
	text-transform: uppercase;
}

#mainMenu a:hover {
	background-color:#000000;
	color: #FFFFFF;
}

/* CAJAS PARA PRIMER NIVEL */
/* anadimos la caja a los elementos de lista descendiente del mainMenu */ 
#mainMenu li.mainSection, #mainMenu li.currentMainSection {
	display:block;
	border-top: solid 1px #00A8E0;
}


/* MARGEN APLICABLE AL PIE DE LAS SECCIONES */
/* cuando estamos en lista de primer nivel aplicamos un margen, pero no en el resto de los casos */
#mainMenu ul{
	margin-bottom: 0px;
}

/* ENLACES DE PRIMER NIVEL */
#mainMenu .sectionHeader{
	font-size: 90%;
	color: #FFFFFF;
	background-color: #006699;
}


/* ENLACES DE TERCER NIVEL */
#mainMenu ul li a {
	color: #666666;
}

/* OPCIONES ACTIVAS */
/* tenemos que indicar de alguna manera el contenido que esta siendo visto:
es decir, la seccion principal en la que estamos y la pagina concreta en la que estamos */

/* resaltamos el enlace sectionHeader para que este marcado, el estilo sera el mismo en hover, para no hacer rollover */
#mainMenu li.currentMainSection a.sectionHeader, #mainMenu li.currentMainSection a.sectionHeader:hover{
	color: #FFFFFF;
	background-color: #000000;
}

/* hacemos que sean visibles los elementos de esta lista, ya que el resto de las secciones permaneceran ocultas */
#mainMenu .currentMainSection ul{
	display: block;
}

/* resaltamos el enlace current */
#mainMenu a.current {
	color: #FFFFFF;
	background-color: #666666;
	font-style:italic;
	border-top: solid 1px #00A8E0;
	background-image:url(../images/doble_flecha_current_element.gif);
	background-position:left center;
	background-repeat:no-repeat;	
}

#mainMenu:after {
	display:block;
	margin-bottom: -12px;
	content:url(../images/menu_end.jpg);
}