/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/final_drop3.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */

/* =========================================================================================================================================== */
/* CLASES PARA CONTROLAR EL MENU MÁS ANCHO */
/* =========================================================================================================================================== */

/* Anchura del DIV exterior */
.MenuCSS1 
{
	display: block;
	float: left;
	clear: none;
	width: 495px;
	position:relative; /* Este param y el siguiente son necesarios para que el flash no tape el menú (el flas tiene lo mismo pero z-index: 0;)*/
	z-index: 2;
}

/* Quitar el estilo de las listas, borders, padding que vienen por defecto en las listas */
.MenuCSS1 ul {padding:0;margin:0;list-style-type:none;}

/* Estilo de los sub-niveles */
/*.MenuCSS1 ul ul {width:198px;}*/

/* Flotar el top de los items de la lista para convertirlo en horizontal y en posición relativa para poder controlar la
   posición del MenuCSS1 */
.MenuCSS1 ul li {float:left;/*height: 3em;line-height:3em;*/}

/* Estilo de los items del sub-nivel */
.MenuCSS1 ul ul li {display:block;position:relative;z-index: 2;}

/* Estilo de los links del nivel superior */
.MenuCSS1 a, .MenuCSS1 a:visited 
{
	display:block;
	float:left;
	width:99px; /* Anchura primer nivel menú */
	height: 68px; /* Altura primer nivel menú */
	font-size:9px;
	font-weight:bold;
	text-decoration:none;
	text-align: center;
	color: #0186A1;
	background:#ffffff;
	letter-spacing: 1px;
	line-height: 28px; /* Incrementa el <br /> que tiene el menú (problemas con IE 6) */
}

/* Estilo de los links del sub-nivel */
.MenuCSS1 ul ul
{
	border-top: solid 1px #cce8ec;
	width: 198px; /* Anchura de los submenús + el padding */
}
.MenuCSS1 ul ul a, .MenuCSS1 ul ul a:visited 
{
	display:block;
	background: #ffffff; /* Color fondo submenú sin posicionar encima */
	color: #0186A1;
	width: 180px; /* Anchura de los submenús */
	height: auto; /*17px; /* Altura de los submenús */
	/*min-height: 17px;*/
	line-height: normal;
	padding: 5px 0px 5px 18px;
	font-size: 11px;
	font-weight: normal;
	text-align: left;
	border-bottom: solid 1px #cce8ec;
}

/* Estilo de la tabla para que no forme parte del mapa - requerido para IE */
/*
.MenuCSS1 ul table ul a, .MenuCSS1 ul table ul a:visited  {width:14em; w\idth:12em;}
.MenuCSS1 table {position:absolute; left:0; top:0; font-size:1em; z-index:-1;}
.MenuCSS1 ul ul table {lef\t:-1px;}
.MenuCSS1 ul ul table ul.left {margin-lef\t:2px;}
*/

.MenuCSS1 li:hover {position:relative;}
* html .MenuCSS1 a:hover {position:relative;}

/* Estilo del fondo de 3 nivel de menús */
.MenuCSS1 ul ul ul a, .MenuCSS1 ul ul ul a:visited 
{
	background: #ffffff;
}

/* Estilo del fondo de 4 nivel de menús */
/*.MenuCSS1 ul ul ul ul a, .MenuCSS1 ul ul ul ul a:visited {background:#000000;}*/
/* Estilo del fondo de 1 nivel de menús */
/*.MenuCSS1 ul :hover a.sub1 {background:#000000;}*/
/* Estilo del fondo de 2 nivel de menús */
/*.MenuCSS1 ul ul :hover a.sub2 {background:#000000;}*/


/* Estilo de los niveles que tienen el mouse encima -------------------------------------------------------- */
/* Primero */
.MenuCSS1 a:hover 
{
	color:#0186A1;
	background: url("../img/fondoMenuClaro.gif") no-repeat;
}
.MenuCSS1 :hover > a 
{
	color:#0186A1;
	background: url("../img/fondoMenuClaro.gif") no-repeat;
}
#menu_MenuSeleccionado /* Propiedades que marcan el menú que ya está seleccionado */
{
	color:#0186A1;
	background: url("../img/fondoMenuOscuro.gif") no-repeat;
}
/* Segundo */
.MenuCSS1 ul ul a:hover /* Para IE 6 */
{
	color: #0186A1;
	background:#cce8ec;
}
.MenuCSS1 ul ul :hover > a 
{
	color: #0186A1;
	background: #cce8ec;
}
/* Tercero */
.MenuCSS1 ul ul ul a:hover /* Para IE 6 */
{
	color: #0186A1;
	background: #cce8ec;
}
.MenuCSS1 ul ul ul :hover > a 
{
	color: #0186A1;
	background: #cce8ec;
}
/* Cuarto */
/*.MenuCSS1 ul ul ul ul a:hover {background:#eee;}*/
/* ------------------------------------------------------------------------------------------------------ */


/* Esconder los sub-niveles y darles una posición absoluta para que no ocupen espacio */
.MenuCSS1 ul ul 
{
	visibility:hidden;
	position:absolute;
	z-index: 2;
	height:0;
	top: 68px; /* Posición donde tiene que aparecer el submenú cuando el mouse está encima */
	left:0;
}

/* Posición del 3 nivel de menús flotantes */
.MenuCSS1 ul ul ul
{
	left: 198px; /* Posición izquierda en donde aparecerá el menú (anchura del menú + padding) */
	top: -1px;
	border-left: solid 1px #cce8ec;
	height: auto; /*17px; /* Altura de los submenús */
	/*min-height: 17px;*/
	line-height: normal;
}

/* Posición del 3 nivel de menús flotantes a la izquierda*/
/*.MenuCSS1 ul ul ul.left {left:-14em;}*/


/* Hacer que el 2 nivel se haga visible cuando el mouse esté encima del primer nivel o con link */
.MenuCSS1 ul li:hover ul, .MenuCSS1 ul a:hover ul 
{
	visibility:visible; 
	height:auto; 
}

/* Mantener el 3 nivel escondido cuando el mouse este encima del listado de primer nivel o link */
.MenuCSS1 ul :hover ul ul{visibility:hidden;}

/* Mantener el 4 nivel escondido cuando el mouse este encima del listado de segundo nivel o link */
.MenuCSS1 ul :hover ul :hover ul ul{visibility:hidden;}

/* Mantener el 3 nivel visible cuando el mouse este encima del listado de segundo nivel o link */
.MenuCSS1 ul :hover ul :hover ul{visibility:visible;}

/* Mantener el 4 nivel visible cuando el mouse este encima del listado de tercer nivel o link */
.MenuCSS1 ul :hover ul :hover ul :hover ul {visibility:visible;}




/* =========================================================================================================================================== */
/* CLASES PARA CONTROLAR EL MENU MÁS ESPRECHO */
/* =========================================================================================================================================== */


/* Anchura del DIV exterior */
.MenuCSS2 
{
	display: block;
	float: left;
	clear: none;
	width: 99px;
	position:relative; /* Este param y el siguiente son necesarios para que el flash no tape el menú (el flas tiene lo mismo pero z-index: 0;)*/
	z-index: 2;
}

/* Quitar el estilo de las listas, borders, padding que vienen por defecto en las listas */
.MenuCSS2 ul {padding:0;margin:0;list-style-type:none;}

/* Estilo de los sub-niveles */
/*.MenuCSS2 ul ul {width:198px;}*/

/* Flotar el top de los items de la lista para convertirlo en horizontal y en posición relativa para poder controlar la
   posición del MenuCSS2 */
.MenuCSS2 ul li {float:left;/*height: 3em;line-height:3em;*/}

/* Estilo de los items del sub-nivel */
.MenuCSS2 ul ul li {display:block;position:relative;z-index: 2;}

/* Estilo de los links del nivel superior */
.MenuCSS2 a, .MenuCSS2 a:visited 
{
	display:block;
	float:left;
	width:99px; /* Anchura primer nivel menú */
	height: 68px; /* Altura primer nivel menú */
	font-size:9px;
	font-weight:bold;
	text-decoration:none;
	text-align: center;
	color: #0186A1;
	background:#ffffff;
	letter-spacing: 1px;
	line-height: 28px; /* Incrementa el <br /> que tiene el menú (problemas con IE 6) */
}

/* Estilo de los links del sub-nivel */
.MenuCSS2 ul ul
{
	border-top: solid 1px #cce8ec;
	width: 99px; /* Anchura de los submenús + el padding */
}
.MenuCSS2 ul ul a, .MenuCSS2 ul ul a:visited 
{
	display:block;
	background: #ffffff; /* Color fondo submenú sin posicionar encima */
	color: #0186A1;
	width: 99px; /* Anchura de los submenús */
	height: auto; /*17px; /* Altura de los submenús */
	/*min-height: 17px;*/
	line-height: normal;
	padding: 5px 0px 5px 15px;
	font-size: 11px;
	font-weight: normal;
	text-align: left;
	border-bottom: solid 1px #cce8ec;
}

/* Estilo de la tabla para que no forme parte del mapa - requerido para IE */
/*
.MenuCSS2 ul table ul a, .MenuCSS2 ul table ul a:visited  {width:14em; w\idth:12em;}
.MenuCSS2 table {position:absolute; left:0; top:0; font-size:1em; z-index:-1;}
.MenuCSS2 ul ul table {lef\t:-1px;}
.MenuCSS2 ul ul table ul.left {margin-lef\t:2px;}
*/

.MenuCSS2 li:hover {position:relative;}
* html .MenuCSS2 a:hover {position:relative;}

/* Estilo del fondo de 3 nivel de menús */
.MenuCSS2 ul ul ul a, .MenuCSS2 ul ul ul a:visited 
{
	background: #ffffff;
}

/* Estilo del fondo de 4 nivel de menús */
/*.MenuCSS2 ul ul ul ul a, .MenuCSS2 ul ul ul ul a:visited {background:#000000;}*/
/* Estilo del fondo de 1 nivel de menús */
/*.MenuCSS2 ul :hover a.sub1 {background:#000000;}*/
/* Estilo del fondo de 2 nivel de menús */
/*.MenuCSS2 ul ul :hover a.sub2 {background:#000000;}*/


/* Estilo de los niveles que tienen el mouse encima -------------------------------------------------------- */
/* Primero */
.MenuCSS2 a:hover 
{
	color:#0186A1;
	background: url("../img/fondoMenuClaro.gif") no-repeat;
}
.MenuCSS2 :hover > a 
{
	color:#0186A1;
	background: url("../img/fondoMenuClaro.gif") no-repeat;
}
#menu_MenuSeleccionado /* Propiedades que marcan el menú que ya está seleccionado */
{
	color:#0186A1;
	background: url("../img/fondoMenuOscuro.gif") no-repeat;
}
/* Segundo */
.MenuCSS2 ul ul a:hover /* Para IE 6 */
{
	color: #0186A1;
	background:#cce8ec;
}
.MenuCSS2 ul ul :hover > a 
{
	color: #0186A1;
	background: #cce8ec;
}
/* Tercero */
.MenuCSS2 ul ul ul a:hover /* Para IE 6 */
{
	color: #0186A1;
	background: #cce8ec;
}
.MenuCSS2 ul ul ul :hover > a 
{
	color: #0186A1;
	background: #cce8ec;
}
/* Cuarto */
/*.MenuCSS2 ul ul ul ul a:hover {background:#eee;}*/
/* ------------------------------------------------------------------------------------------------------ */


/* Esconder los sub-niveles y darles una posición absoluta para que no ocupen espacio */
.MenuCSS2 ul ul 
{
	visibility:hidden;
	position:absolute;
	z-index: 2;
	height:0;
	top: 68px; /* Posición donde tiene que aparecer el submenú cuando el mouse está encima */
	left:0;
}

/* Posición del 3 nivel de menús flotantes */
.MenuCSS2 ul ul ul
{
	left: 198px; /* Posición izquierda en donde aparecerá el menú (anchura del menú + padding) */
	top: -1px;
	border-left: solid 1px #cce8ec;
	height: auto; /*17px; /* Altura de los submenús */
	/*min-height: 17px;*/
	line-height: normal;
}

/* Posición del 3 nivel de menús flotantes a la izquierda*/
/*.MenuCSS2 ul ul ul.left {left:-14em;}*/


/* Hacer que el 2 nivel se haga visible cuando el mouse esté encima del primer nivel o con link */
.MenuCSS2 ul li:hover ul, .MenuCSS2 ul a:hover ul 
{
	visibility:visible; 
	height:auto; 
}

/* Mantener el 3 nivel escondido cuando el mouse este encima del listado de primer nivel o link */
.MenuCSS2 ul :hover ul ul{visibility:hidden;}

/* Mantener el 4 nivel escondido cuando el mouse este encima del listado de segundo nivel o link */
.MenuCSS2 ul :hover ul :hover ul ul{visibility:hidden;}

/* Mantener el 3 nivel visible cuando el mouse este encima del listado de segundo nivel o link */
.MenuCSS2 ul :hover ul :hover ul{visibility:visible;}

/* Mantener el 4 nivel visible cuando el mouse este encima del listado de tercer nivel o link */
.MenuCSS2 ul :hover ul :hover ul :hover ul {visibility:visible;}