/* Menu Wrapper */
#nav-wrapper /*necesitamos un nav wrapper para mover y centrar el menu */ {
    clear: both;
    /*padding-left:190px;*/ /*version: normal*/ /* necesitamos centrar manualmente */
    padding-left:27px; /*version: opcion extra*/
    height: 30px; /* height: nav-wrapper = nav */
    /*background: url(images/greydeg.jpg) repeat;*/
    background: url(images/menu-1.png);
	position:relative;   /* agregado para que el menu no se esconda detras de las fotos */
	z-index:10;  /* agregado para que el menu no se esconda detras de las fotos */
    }
    
/* Menu */
#nav {
    padding:0px;
    height: 30px; /* height: nav-wrapper = nav */ 
    list-style-type: none;
}

/* Opciones del Menu */
#nav li, #nav li a {
    float: left; /* para que la lista se comporte como un menu horizontal */
}
/* Menu: List Items */
#nav li {   
    position:relative; /*importante*/ /*submenus posicionados relativos a la opcion (li) que los contiene */    
}

/* Menu: Anchor Tags */
/* Poner la mayoria de las especificaciones aqui*/
#nav li a {
    height:20px;
    line-height:20px; /*height = line-height: para alinear verticalmente*/ 
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 8px;
    padding-left: 9px;
    color: #F7F7F7;
    text-decoration: none;
    font-size:11px;
    font-weight: bold;
    text-align:center; /*centra los links */
    /*width:120px;*/ /*version: normal*/ /*pone las opciones del mismo ancho */
    width:140px; /*version: opcion extra*/
    border-left: solid 1px white; /* borde de las opciones */
}
#nav li a.lastitem {border-right:solid 1px white;} /*agrega el borde de la derecha a la ultima opcion del menu */

/* Poner las especificaciones del Hover en A, no en LI */
#nav li a:hover {
    background-color:#F2F2F2;
    text-decoration: none;
    color:#6482C2;    
}


/*Sub Menu */
#nav li ul 
{ display: none; /*para que no aparezca el submenu hasta que se haga hover */
  /*display: block;*/ /* usar block solo temporalmente cuando se edite, para ver como va quedando */
  position: absolute; /*importante*/
  left:0;
  padding:0;
  margin:0;
  top:100%; /* mueve el submenu, desde el tope hacia abajo, un 100% del height del parent (coloca el submenu justo debajo del menu) */
}

/* Hover sobre opciones del menu: muestra submenu */
/* Colocar solo los estilos del submenu en general (conjunto de opciones de submenu) */
/* Nota: se usa > (signo de mas) para que, al hacer hover, se muestre 'solamente' el UL (submenu) que es hijo directo (2do nivel) */
/* Los hijos no immediatos (3er nivel) 'no' se mostrarian */
#nav li:hover > ul {
    display:block; /*muestra el submenu (UL) cuando se hace hover sobre la opcion del menu (LI) (esta opcion antes es hidden) */
    border: 1px solid grey; /* borde alrededor de todo el submenu */
    background: url(images/background_light-2.jpg) top center;
    padding-top:10px;
    padding-bottom:10px;
    padding-right: 10px;
    padding-left: 10px;
 }

/* Opciones del Submenu */
#nav li ul li, #nav li ul li a {
    float:none; /* para que el submenu se despliegue como un bloque */
}
#nav li ul li {
    _display:inline; /* fix for IE6 */
   }

#nav li ul li a {
    display:block; /* esto fuerza a los elementos a ocupar el width especificado */
    width: 180px;
    border:none; /* remueve cualquier borde innecesario */
    border-bottom: 1px solid #757373; /* separador entre opciones */
    height: 15px;
    line-height: 15px; /*height = line-height: para alinear verticalmente*/ 
    text-align:left;
    font-size: 12px;
    color:#3C3C3C;
    font-weight:bold;
    text-decoration: none; 
    }   
#nav li ul li a.first-item {border-top: 3px solid #757373;} /*para poner una linea mas gruesa al principio del submenu (arriba del primer item) */

#nav li ul.long-menu a {width:300px;} /* Para el caso de submenus con opciones largas, hacemos el ancho mas largo */
#nav li ul.about-menu a {width:270px;} /* Para el caso de submenus con opciones largas, hacemos el ancho mas largo */
#nav li ul.short-menu a {width:170px;} /* Para el caso de submenus con opciones cortas, hacemos el ancho mas corto */
#nav li ul.medium-menu a {width:190px;} 
#nav li ul.semilong-menu a {width:317px;}

#nav li ul li a:hover {
    background-color: #93A8D4;
    color: #000000;
    text-decoration: none;
}


/* Sub-sub Menu */
#nav li ul li ul {    
    display:none; /*para que no aparezca el submenu hasta que se haga hover */ 
    }

/* Hover sobre opciones del sub-menu: muestra sub-sub-menu */
#nav li ul li:hover ul {
    left:100%; /*mueve el sub-sub-menu, desde la izquierda hacia un lado, un 100% del ancho del parent/sub-menu (coloca el sub-sub-menu justo al lado del sub-menu) */
    top:0; /* mueve el sub-sub-menu al tope del parent (opcion del sub-menu) que lo llama */
    border: 1px solid grey; /* borde alrededor de todo el submenu */
    background: url(images/background_light-2.jpg) top center;
    background-repeat:no-repeat; /* el background no es suficientemente largo */
    background-color:#C5C1C0; /* el background no es suficientemente largo */
    padding-top:10px;
    padding-bottom:10px;
    padding-right: 10px;
    padding-left: 10px;
}

#nav li ul li ul li a {
    display:block; /* esto fuerza a los elementos a ocupar el width especificado */
    width: 100px; }

#nav li ul li ul.short-short-menu a {width:60px;}  /* Para los years */
#nav li ul.short-video-menu a {width:145px;} /* Para los videos */
#nav li ul.awards-menu a {width:270px;} /* Para los memorial awards */