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

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

#menu { padding:0; }

/*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 { display: none; }

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

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

#menu ul li a.menu_item_depth_0 { width: 150px; margin: 0; }
#menu ul li a.menu_item_depth_1 { width: 120px; margin: 0 0 0 40px; }
#menu ul li a.menu_item_depth_2 { width: 100px; margin: 0 0 0 60px; }
#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 { list-style: none; margin: 0; padding: 0; }
#menu ul li { width: 190px; }

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

#menu ul li a {
	display: block;
	padding: 14px 0 2px 40px;
	font-weight: bold;
	font-size: 16px;
	color: #4a4d00;
	border-bottom: 1px solid white;
}

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

#menu ul li a:hover { color: black; }

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

#menu ul li a.selected { color: #ee3d1a; cursor: default; }

/*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: #ee3d1a; }

#menu ul li a.inroute:hover { color: #000; }

/*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 { margin: 10px 0 0; }
#menu ul li ul li {}

#menu ul li ul li a {
	padding: 3px 0 3px 10px;
	color: #797e00;
	background: url(../images/arrow_menu_item_depth_1.gif) 0 5px no-repeat;
	border: none;
	font-size: 14px;
}

#menu ul li ul li a:hover {}
#menu ul li ul li a.selected {}

#menu ul li a.has_children {}

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

#menu ul li ul li a.has_children {}

#menu ul li ul li ul { margin: 0 0 5px; }

#menu ul li ul li ul li a {
	padding: 3px 0 3px 10px;
	color: #797e00;
	background: url(../images/arrow_menu_item_depth_2.gif) 0 5px no-repeat;
	border: none;
	font-size: 11px;
	font-weight: normal;
}

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

/*Nivel 0*/

#menu_item_1_1 a { background: url(../images/menu_item01.gif) bottom left no-repeat; }
#menu_item_1_2 a { background: url(../images/menu_item04.gif) bottom left no-repeat; }
#menu_item_1_3 a { background: url(../images/menu_item03.gif) bottom left no-repeat; }
#menu_item_1_4 a { background: url(../images/menu_item05.gif) bottom left no-repeat; }
#menu_item_1_5 a { background: url(../images/menu_item07.gif) bottom left no-repeat; }
#menu_item_1_6 a { background: url(../images/menu_item08.gif) bottom left no-repeat; }
#menu_item_1_7 a { background: url(../images/menu_item06.gif) bottom left no-repeat; }
#menu_item_1_8 a { background: url(../images/menu_item09.gif) bottom left no-repeat; }
#menu_item_1_9 a { background: url(../images/menu_item10.gif) bottom left no-repeat; }
#menu_item_1_10 a { background: url(../images/menu_item11.gif) bottom left no-repeat; }
#menu_item_1_11 a { background: url(../images/menu_item_join.gif) bottom left no-repeat; }