/* 
 * CSS Document 
 * Bonaval Multimedia S.L.
 * 07/02/2006
 *
 * Hoja de estilos para el menu
 */

/* CONTENEDOR DEL MENU PRINCIPAL */
	.contentMenu {
		background      : #6898c8/*#ededed*/;
		/*float           : left;*/
		width           : 135px;/*
		margin			: 10px 0 0px 0px;*/
		padding			: 0 0 0 0;
		
		
	}



/* BEGIN SUBMENUES STYLE **************************************************************************** */
	/* SUBMENU */
	/* this is the clipping region for the menu. it's width and height get set by script, depending on the size of the items table */
		.mtDropdownMenu {
			position	: absolute;
			overflow	: hidden;
			left		: -1000px;
			top			: -1000px;
		}
	
	/* EFECTO SEMI-TRANSPARENTE */
	/* this DIV is the semi-transparent background of each menu. the -moz-opacity is a proprietary way to get transparency in mozilla, the filter is for IE/windows 5.0+. */
	/* we set the background color in script because ie mac does not use it; that browser only uses a semi-transparent white PNG that the spacer gif inside this DIV is replaced by */
		.mtDropdownMenu .background {
			/*position	: absolute;
			left		: 0px;
			top			: 0px;
			z-index		: 1;
			-moz-opacity: 0.96;
			filter: alpha(opacity=96);*/
		}
	
	/* SOMBRA DERECHA */
	/* same concept as .background, but this is the sliver of shadow on the right of the menu. It's left, height, and background are set by script. In IE5/mac, it uses a PNG */
		.mtDropdownMenu .shadowRight {
			/*position	: absolute;
			z-index		: 3;
			top			: 3px; 
			width		: 2px;
			-moz-opacity: 0.8;
			filter:alpha(opacity=80);*/
		}
	
	/* SOMBRA ABAJO */
	/* same concept as .background, but this is the sliver of shadow on the bottom of the menu. It's top, width, and background are set by script. In IE5/mac, it uses a PNG */
		.mtDropdownMenu .shadowBottom {
			/*position	: absolute;
			z-index		: 1;
			left		: 3px; 
			height		: 2px;
			-moz-opacity: .8;
			filter:alpha(opacity=80);*/
		}	
		
		
	/* ESTILO DEL CONTENEDOR DE LOS SUBMENUES */
	/* this is the main container for the menu itself. it's width and height get set by script, depending on the size of the items table */
		.mtDropdownMenu .content {
			position	: absolute;
		}
	
	
	/* ESTILO DE TODOS LOS SUBMENUES (cajas desplegables) */
	/* this table comprises all menu items. each TR is one item. It is relatively positioned so that the shadow and background transparent divs can be positioned underneath it */
		.mtDropdownMenu .items {
			position	: relative;
			left		: 0px; 
			top			: 0px;
			border-right: 3px solid #002952/*999*/;
			border-bottom:1px solid #002952;
			border-top:1px solid #002952;
			z-index		: 2;
			text-decoration	: none;
			/*color:#FFFFFF;*/
			background-color: #6898c8/*EDEDED*/;
		}
		
		
	/* ESTILO DEL PRIMER NIVEL DE SUBMENU (primera caja desplegable) */
		.mtDropdownMenu.top .items {/*
			 border-top	:none;  /* PARA MENUES HORIZONTALES QUE DESPLIEGAN HACIA ABAJO */
		}
	
	
	/* BEGIN LINKS STYLES ****************************************************** */
		/* ESTILO PARA LOS ENLACES DE LOS SUBMENUES */
		/* each TR.item is one menu item */
			.mtDropdownMenu .item {
				font-family		: Verdana, Arial, Helvetica, sans-serif;
				color			: #FFFFFF/*#002952*/;
				
				/*border		: 1px solid #fff;
				 this is a hack for mac/ie5, whom incorrectly cascades the border properties of the parent table to each row 
				border			: 0px #000 none;*/
				cursor			: pointer;
			}
			.mtDropdownMenu .item .tdLeft { /* celda de la izquierda */
				background-color	: #002952;
				/*color			: #FFFFFF;*/
			}	
			
		/* ESTILO PARA LOS ENLACES DE LOS SUBMENUES - EFECTO HOVER */
		/* this is the class that is used when the mouse is over an item. script sets the row to this class when required. */
			.mtDropdownMenu .item.hover, .item:hover {
				background-color	: #002952;
				color				: #FFFFFF/*F8B600*/;
			}
			.mtDropdownMenu .item .tdLeft:hover {/* celda de la izquierda - hover */
				background-image	: url('../img/flecha_hover.png');	
				background-repeat	: no-repeat;
				/*color			: #FFFFFF/*#002952*/;
			}
		/* END LINKS STYLES ********************************************************** */
		
		
	
	/* ESTILO PARA LAS IMAGENES QUE USEMOS EN CADA ITEM DE LOS SUBMENUES */
		.mtDropdownMenu .item img {
		
		}
		
/* END SUBMENUES STYLE **************************************************************************** */



/* BEGIN MENU STYLE ********************************************************************/
	
	/* ESTILO DEL MENU PRINCIPAL */
	#menu {/*
		background-color	: #6C86BC; 
		padding-left		: 10px;*/
		width				: 140px;
		padding-top			: 0px;
		vertical-align		: top;
		background-image	: url('../img/flecha_bg.png');
		background-repeat	: repeat-y;
	}
	
	/* ESTRUCTURA *****************************************
		<div class=menuItemClass>
			<a class=m>
				texto_opcion_menu
			</a>
		</div>
	*/

	.menuItemClass { /* div contenido por el enlace de clase .m (en el menu principal) */

	}		

	/* AQUI REPETIMOS LAS MISMAS PROPIEDADES DE menuItemClass 
	PORQUE NECESITAMOS ESTA CLASE PARA QUE AL PASAR POR ENCIMA 
	DE LOS SUBMENUES MARQUE EL ITEM DEL MENU PRINCIPAL */
	.menuItemClass:hover, .menuItemClass_over{  /* div contenido por el enlace de clase .m (en el menu principal) - over  */
		
	}		
	 
	.m { /* enlaces que contienen al div de clase menuItemClass */
		background-image	: url('../img/flecha.png');
		background-repeat	: no-repeat;
		display				: block;
		line-height			: 13px;
		padding-top			: 3px;
		padding-bottom		: 3px;	
		padding-left		: 18px; /* para dejar espacio para la flecha blanca de la izquierda */
		cursor				: pointer;
		text-decoration		: none;		
		/*background-color	: /*#6797C8#002952;*/
		background-color	: #6898c8; /******************************/
		border-bottom		: 1px solid #9ABFE4;
		
		/*
		border-bottom:1px dotted #fff;*/
		color				:#ffffff;
		/* ************ */
	}			
	.m:hover{
		background-image	: url('../img/flecha_hover.png');	
		background-repeat	: no-repeat;
		display				: block;
		line-height			: 13px;
		padding-top			: 3px;
		padding-bottom		: 3px;	
		padding-left		: 18px; /* para dejar espacio para la flecha blanca de la izquierda */
		cursor				: pointer;
		text-decoration		: none;
		background-color	: #002952;
		color				: #FFFFFF;
		border-bottom		: 1px solid #fff;
		/*border-bottom:1px dotted #fff;
		/*background-color: #6C86BC;
		color				: #F8B700; /*#F8B700;*/
		/* ************ */
	}	
	
	.m_over{
		background-image	: url('../img/flecha_hover.png');	
		background-repeat	: no-repeat;
		display				: block;
		line-height			: 13px;
		padding-top			: 3px;
		padding-bottom		: 3px;	
		padding-left		: 18px; /* para dejar espacio para la flecha blanca de la izquierda */
		cursor				: pointer;
		text-decoration		: none;
		color				: #FFFFFF;
		background-color	: #002952;
		border-bottom		: 1px solid #fff;
		/*border-bottom:1px dotted #fff;
		background-color: #6C86BC;
		color				: #F8B700; /*#F8B700;*/
		/* ************ */
	}	
	
/* END MENU STYLE ********************************************************************/