/*///////////////////////////////////////////////////////////////////
Menú

Estilos usados para el menú de la web, normalmente situado dentro
de la columna izquierda.
///////////////////////////////////////////////////////////////////*/

#menu { float: left; margin: 0 0 30px;  }

/*Estilos usados en caso de que el menú esté cotenido en un diseño de caja*/

div.box_menu {}
div.box_menu_top { display: none; }
div.box_menu_bottom { display: none; }

/*Encabezado del menú*/

#menu div.menu_title_main {
	margin: 5px 0 0;
	padding: 4px 0 15px 6px;
	font-size: 1.7em;
	color: #fff;
	background: url(../images/bg_menu_header.jpg);
}

/*///////////////////////////////////////////////////////////////////
Profundidad de menú

Estilos generales para las dimensiones de los distintos niveles de
menú
///////////////////////////////////////////////////////////////////*/

#menu ul li a.menu_item_depth_0 {}
#menu ul li a.menu_item_depth_1 {}
#menu ul li a.menu_item_depth_2 {}
#menu ul li a.menu_item_depth_3 {}
#menu ul li a.menu_item_depth_4 {}

/*Al elemento a se le debe poner una dimensión para que el efecto "hover" funcione 
en internet explorer*/

/*///////////////////////////////////////////////////////////////////
Nivel 0
///////////////////////////////////////////////////////////////////*/

/*Estilo para la lista que forma el menú */

#menu ul { }
#menu ul li { border-bottom: 1px dotted #7fa7d7; float: left; width: 220px;  }

/*Estilo para los enlaces de cada elemento del listado*/

#menu ul li a {
	display: block;
	color: #0e4d9a;
	font-size: 1.2em;
	text-decoration: none;
	padding: 12px 0 12px 30px;
	background: url(../images/bullet_menu_depth_0.gif) 11px 15px no-repeat;
	float: left;
	width: 189px;
}

/*Estilo para que al poner el cursor encima del elemento, cambie de aspecto*/

#menu ul li a:hover { color: #e2322a; background: url(../images/bullet_menu_depth_0_selected.gif) 11px 15px no-repeat; }

/*Estilo cuando el elemento está seleccionado, cuando el elemento de menú se corresponde con la sección actual*/

#menu ul li a.selected { color: #e2322a; background: url(../images/bullet_menu_depth_0_selected.gif) 11px 15px no-repeat #a3c0e3; }
#menu ul li a.selected:hover { cursor: default; background: url(../images/bullet_menu_depth_0_selected.gif) 11px 15px no-repeat #a3c0e3;  }

/*Estilo cuando el elemento tiene hijos y uno de ellos está seleccionado, por lo que dicho elemento se encuentra "en ruta" */

#menu ul li a.inroute { color: #e2322a; background: url(../images/bullet_menu_depth_0_selected.gif) 11px 15px no-repeat;}
#menu ul li a.inroute:hover { background-color: #a3c0e3; }

/*Estilo que se aplica cuando el elemento tiene hijos, por si se le quiere dar un diseño especial */

#menu ul li a.has_children {}

/*///////////////////////////////////////////////////////////////////
Nivel 1
///////////////////////////////////////////////////////////////////*/

#menu ul li ul { float: left; border-top: 1px dotted #7fa7d7; }
#menu ul li ul li { border: none; }

#menu ul li ul li a {
	float: left;
	display: inline;
	width: 180px;
	margin: 0 0 0 20px;
	padding: 6px 0 6px 26px;
	font-size: 1em;
	background: url(../images/bullet_menu_depth_1.gif) 11px 10px no-repeat;
}

#menu ul li ul li a:hover { color: #e2322a; background: url(../images/bullet_menu_depth_1_selected.gif) 11px 10px no-repeat; }
#menu ul li ul li a.selected { color: #e2322a; background: url(../images/bullet_menu_depth_1_selected.gif) 11px 10px no-repeat; }
#menu ul li ul li a.selected:hover { cursor: default; background: url(../images/bullet_menu_depth_1_selected.gif) 11px 10px no-repeat; }

#menu ul li ul li a.inroute { color: #e2322a; background: url(../images/bullet_menu_depth_1_selected.gif) 11px 10px no-repeat; }
#menu ul li ul li a.inroute:hover { color: #e2322a; text-decoration: underline; background: url(../images/bullet_menu_depth_1_selected.gif) 11px 10px no-repeat; }

#menu ul li a.has_children {}

/*///////////////////////////////////////////////////////////////////
Nivel 2
///////////////////////////////////////////////////////////////////*/

#menu ul ul ul { border: none; }

#menu ul li ul li ul a {
	width: 165px;
	margin: 0 0 0 35px;
	padding: 6px 0 6px 26px;
	font-size: 0.8em;
	background: url(../images/bullet_menu_depth_1.gif) 11px 10px no-repeat;
}

#menu ul li ul li a:hover { color: #e2322a; background: url(../images/bullet_menu_depth_1_selected.gif) 11px 10px no-repeat; }
#menu ul li ul li a.selected { color: #e2322a; background: url(../images/bullet_menu_depth_1_selected.gif) 11px 10px no-repeat; }
#menu ul li ul li a.selected:hover { cursor: default; background: url(../images/bullet_menu_depth_1_selected.gif) 11px 10px no-repeat; }

#menu ul li a.has_children {}

/*///////////////////////////////////////////////////////////////////
Estilos especiales para dar un diseño diferente a cada elemento de menú
///////////////////////////////////////////////////////////////////*/

/*Nivel 0*/

li#l_menu_item_1_1 {}
li#l_menu_item_1_2 {}
li#l_menu_item_1_3 {}
li#l_menu_item_1_4 {}
li#l_menu_item_1_5 {}

a#menu_item_1_1 {}
a#menu_item_1_2 {}
a#menu_item_1_3 {}
a#menu_item_1_4 {}
a#menu_item_1_5 {}

/*etc*/

/*Nivel 1*/

li#l_menu_item_2_1 {}
li#l_menu_item_2_2 {}
li#l_menu_item_2_3 {}
li#l_menu_item_2_4 {}
li#l_menu_item_2_5 {}

a#menu_item_2_1 {}
a#menu_item_2_2 {}
a#menu_item_2_3 {}
a#menu_item_2_4 {}
a#menu_item_2_5 {}

/*etc*/