﻿
/*Comenzaremos reseteando un par de estilos para que el menú quede mejor y haciendo que el menú principal sea en horizontal.*/
ul, li {
margin:0;
padding:0;
}

ul {
list-style:none;
display:inline-block;
}

ul li {
float:right;
}


/* daremos un poco de estilo al menú principal.*/
ul#dropdownmenu {
margin:0px;/*padding:0;margin:0;*/
padding:0px;
list-style:none;
height:30px;/*height:20px;*/
width:790px;/*width:730px; */
background:#ffd800;
color:White;
text-align:center;
font-family: arial, helvetica, sans-serif;
font-size:10pt;
}

ul#dropdownmenu li {
height:30px;
text-align:center;
}

ul#dropdownmenu li a 
{
display:block;
padding: 5px 0px 0px 0px;
height:25px;/*height:20px;*/
font-family:Arial, Verdana, Geneva, sans-serif;
font-size:10pt;	/*font-size:10pt;*/
text-decoration:none;
background:#ffd800;
color:#FFF;/*color:White;*/
text-align:center;
font-weight:bold;
width:93px;
}

ul#dropdownmenu li a:hover {
/*background-image:url('../Images/Botones/boton azul.ico');*/
background-image:url('../Images/Botones/btnblue.png');
background-repeat:no-repeat;
background-color:#ffd800;
font-size:10pt;
color:White;
}


/*Ahora tenemos que ocultar los sublinks y hacer que sólo se muestren cuando se pasa el cursor sobre el link padre. 
Esto lo haremos usando el selector :hover. */
ul#dropdownmenu li ul {
display:none;
}

ul#dropdownmenu li:hover ul {
display:block;
background:#999;
position:absolute;
}


/*Continuamos añadiendo algo de color a los sublinks:*/
ul#dropdownmenu li:hover ul li {
float:none;
background:#999;
}



/*Finalmente, ocultamos los links nietos (hijos de los hijos), usando la misma técnica que antes. 
Lo único que cambia es que añadimos la propiedad top y left para que los links aparezcan a la derecha y 
no debajo (si aparecen debajo se superponen a los siguientes links hijos).
*/
ul#dropdownmenu li ul li ul, ul#dropdownmenu li:hover ul li ul {
display:none;
}

ul#dropdownmenu li:hover ul li:hover ul {
display:block;
top:0;
left:100%;
}

/*Con esto ya tenemos el menú completado. Este menú permite añadir tres niveles de links 
(padres, hijos y nietos), aunque se puede modificar para que funcione con todos los niveles que se necesiten.
*/









/* daremos un poco de estilo al menú de los terminos y condiciones.*/
ul#idMenuTerms {
margin:0px;/*padding:0;margin:0;*/
padding:0px;
list-style:none;
height:30px;/*height:20px;*/
width:790px;/*width:730px; */
/*background:#ffd800;*/
color:White;
text-align:center;
font-family: arial, helvetica, sans-serif;
font-size:10pt;
}

ul#idMenuTerms li {
height:30px;
text-align:center;
}

ul#idMenuTerms li a 
{
display:block;
padding: 5px 0px 0px 0px;
height:25px;/*height:20px;*/
font-family:Arial, Verdana, Geneva, sans-serif;
font-size:10pt;	/*font-size:10pt;*/
text-decoration:none;
/*background:#ffd800;*/
color:#FFF;/*color:White;*/
text-align:center;
font-weight:bold;
width:93px;
}

ul#idMenuTerms li a:hover {
/*background-image:url('../Images/Botones/btnblue.png');
background-repeat:no-repeat;
background-color:#ffd800;*/
font-size:10pt;
color:White;
text-decoration:underline;
}
