/* el espacio del que disponemos tiene 550px de ancho */
#siteMap {
	line-height: 120%;
	display: block;
}

#siteMap, #siteMap ul{
	margin: 0px;
	padding: 0px;
	list-style-type:none;
}

#siteMap ul{
	display:block;
}


/* 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.*/

#siteMap li {
	display: inline;
}

/* PARA LOS ENLACES DE TODOS LOS NIVELES */
#siteMap a{
	display:block;
	font-weight: bold;
	text-decoration: none;
	padding: 3px;
	padding-left: 10px;
	font-size: 85%;
	font-style: normal;
	color: #0000FF;
}

#siteMap a:hover {
	background-color:#006699;
	color: #FFFFFF;
}

/* CAJAS PARA PRIMER NIVEL */
/* anadimos la caja a los elementos de lista descendiente del mainMenu */ 
#siteMap li.mainSection, #siteMap li.currentMainSection {
	display:block;
	width: 270px;
	height: 110px;
	padding: 0;
	border: 0;
	margin: 5px;
	float: left;
	border: solid 1px #006699;
	border-top: solid 6px #006699;
	voice-family: "\"}\"";
	voice-family: inherit;
	width: 258px;
}

html>body #siteMap li.mainSection, html>body #siteMap li.currentMainSection{
	width: 258px;
}


/* 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 */
#siteMap ul{
	margin-bottom: 5px;
}

#siteMap ul ul {
	margin-bottom: 0px;
}

/* ENLACES DE PRIMER NIVEL */
#siteMap .sectionHeader{
	font-size: 90%;
	color: #006699;
	font-style: italic;
	background-color: #FFFFFF;
	padding-bottom: 8px;
}


/* ENLACES DE TERCER NIVEL */
#siteMap ul ul li a{
	padding-left: 20px;
}



/* 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 */
#siteMap li.currentMainSection a.sectionHeader, #siteMap li.currentMainSection a.sectionHeader:hover{
	color: #FFFFFF;
	background-color: #000066;
}

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

/* resaltamos el enlace current */
#siteMap a.current {
	color: #006699;
	background-color: #E6E6E6;
	font-style:italic;
	background-image:url(../images/doble_flecha_current_element.gif);
	background-position:left center;
	background-repeat:no-repeat;	
}