/* -----------------------------------------------------------------------------
Archivo .CSS para los elementos de menús   
  
(c) idoga
-------------------------------------------------------------------------------*/


/*------------------------------------------------------------------------------
    Listas en general: propiedades por defecto
-------------------------------------------------------------------------------*/
ul {
   margin-top: 0;
   margin-right: 0;
   margin-bottom: 1em;        
   margin-left: 0;
}

li {
   margin-top: 0;
   margin-right: 0;
   margin-bottom: 0;
   margin-left: 3em;           
}


/* ----------------------------------------------------------------------------------
  Menú Horizontal (nav): pestañas de navegación de la parte superior (Home, contacto)
-------------------------------------------------------------------------------------
 
   NOTAS PREVIAS
   -------------
   Comenzaremos definiendo una "Banda" horizontal (elemento 'nav' de html5) donde
   se irán  colocando las  pestañas del Menú. Esta banda presenta peculiaridades 
   importantes que se detallarán en los comentarios de este elemento.
                    
   Seguidamente definiremos las clases asociadas a los elementos "ul", "li" e 
   hipervínculos "a".
    
   Aunque hay otros métodos(*) para hacer un menú horizontal, en este caso 
   utilizaremos la técnica de posicionar los elementos "li" (pestañas) de forma 
   flotante (con "float").
     
   Con este posicionamiento, los elementos "li" ("cajas") salen del flujo normal 
   y se desplazan a la zona más a la izquierda o derecha de su posición inicial 
   (según se indique con left o right).
    
   El resto de las cajas se reposicionarán ignorando las cajas posicionadas con 
   float por eso es importante tener en cuenta que se pueden producir solapes. 
    
   Las cajas flotantes en cambio sí tenen en cuenta las otras cajas float y no 
   se solapan colocándose unas junto a las otras, que es el efecto buscado para 
   las pestañas (li) del menú. 
    
   Además tambión posicionaremos el elemento "ul" de forma flotante para hacer 
   que las cajas se agrupen en el lado derecho o izquierdo.
    
                      -------------------0-----------------
   
   (*)OTRA SOLUCIÓN RECOMENDADA ESPECIALMENTE SI SE DESEA CENTRAR LAS PESTAÑAS: 
   
   La solución siguiente es muy sencilla y sirve para disponer las pestañas en 
   cualquier posición. Parece idónea especialmente en el caso de que se deseen 
   centrar las pestañas:
   - Incluir en la clase del elemento que hace de banda la propiedad "text-align: center;" 
   - En la clase del elemento "li" incluir  "display: inline;" (o mejor "inline-block"). 
   Resto propiedades parecidas. 
   
   Esta solución está implementada en mi visor de fotos para disponer los gifs de
   los congtroles de navegación. (Ver notas del archivo VfotosIDG.css)
   
   
                      -------------------0-----------------
   Referencia teórica principal en la que me he apoyado para estas implementaciones:
   Libro: "Introducción a CSS", capítulo 9 - "Listas" de Javier Eguíluz Pérez. 
     
    
-------------------------------------------------------------------------------*/  
          
          
nav {
   /* 
   Banda horizontal donde se situarán las pestañas del menú horizontal.
     
   Sobre este elemento es importante tener en cuenta lo siguiente:
  
   - Como los elementos "ul" y "li" (pestañas del menú) se posicionarán de forma flotante (float), 
   estos salen del flujo normal y en consecuencia la banda contenedora se queda sin contenido y 
   no cubrirá el ancho requerido por las pestañas. La altura de la banda será únicamente la que 
   ocupe el padding, márgenes, bordes. (Más el de cualquier otro contenido que se defina dentro 
   de la banda y que dentro del flujo normal pero no está pensada para esto).
  
   - Este problema parece que es un clásico y puede tener varias soluciones: 
  
      - Definir una altura fija para la banda. Solución muy sencilla pero no recomendable. Es muy probable
      que aparezcan efectos no deseados al cambiar de navegador y/o de dispositivo
  
      - Libro de "Introducción a CSS", capítulo 5.7 de "Posicionamiento Flotante" de Javier Eguíluz Pérez:
      propone insertar, en el código htlme, dentro del div de la banda y justo después de los elementos ul/li, 
      un "div" adicional invisible con la propiedad clear:  <div style="clear: both;"></div> 
      Este elemento div se mostrará debajo de los float y por tanto asegura que el div contenedpr
      cubra las pestañas. El único inconvieniente que veo es una recarga del código html con el div adicional
      que cuando sea revisado siempre se pondrá en duda su objetivo.
  
      - En la "Entrega núm 35 del Tutorial básico del programador web: CSS desde cero" de César Krall (aprenderaprogramar.com)
      se describe en detalle este problema y propone soluciones: convertir tambión en flotatante la caja madre
      (puede no interesar), la solución del div adicional invisible con "clear:both" y también menciona
      la de añadir la propiedad "overflow: hidden" en la caja madre.
       
      - El propio Javier Eguíluz, en su libro "CSS avanzado" propone también la última solución mencionada en 
      el párrafo anterior: añadir "height: auto" junto a "overflow: hidden" en el div contenedor (la banda en este caso). 
       
      - Haciendo pruebas con "overflow: hidden" he comprobado que no es necesario incluir "height: auto" 
      (propiedad por defecto), pero entiendo que será más robusto incluirla.
       
       
    SOLUCIÓN ADOPTADA:  añadir "height: auto " y "overflow: hidden" en el contenedor:         
   
   */                                                     
  
   height: auto;        /*Ver notas anteriores*/
   overflow: hidden;    /*Ver notas anteriores*/
   border-bottom: 1px solid #8c8c8c;    
   padding: 0.2em 1em 0em 1em;   /*arriba/derecha/abajo/izquierda*/

   font-size: 0.75em;
   font-weight: bold; 
   color: black;
   background-color: #01A9DB;
  
}


ul.MenuH {
   clear: both;  /*Para que se situe debajo de las cajas flotantes (si existiran)*/
   float: right;  /*Ver notas anteriores*/
   
   margin: 0;
   padding: 0;    
 
   list-style: none;
}

ul.MenuH li {
   float: left;  /*Ver notas anteriores y tener en cuenta que el elemento contenedor de li es ul. */   
   margin: 0.1em 0.1em 0em 0.1em; /*arriba/derecha/abajo/izquierda*/    
   padding: 0; 
}

ul.MenuH li a {
   display: block;

   padding: 0.2em 0.8em 0.1em 0.8em; /*arriba/derecha/abajo/izquierda*/    
   /*border: 1px solid #8c8c8c;*/
   border-top-left-radius: 0.5em;       /*Bordes de la pestaña redondeados*/
   border-top-right-radius: 0.5em;
  
   text-decoration: none;
   color: black;
   background-color: #00BFFF;
  
}

ul.MenuH li a:hover     
{            
   /*Efecto rollover*/
   text-decoration: none; /*sin subrayado*/
   outline:none; /*Sin contorno punteado con :focus y :active*/
   color: red;
   background-color: #d9d9d9;  /*mismo color que el de #area_texto*/  
}


/* -----------------------------------------------------------------------------
              Menús Verticales - Columna de navegación
 ------------------------------------------------------------------------------*/


ul.MenuV { 
   width: 12em;      /*Referencia 12em*/
   padding-left: 1em;

   color: black;
}

ul.MenuV li { 
   /*border-top: 1px solid#d90000;   --> sólo lo lleva la primera li*/
   border-left: 1px solid #d90000; 
   border-bottom: 1px solid #d90000;
   margin: 0;

   font-size: 0.8em;
   list-style: none; /*sin viñetas*/
}

li.MenuV_BordeSuperior{
   border-top: 1px solid #d90000;      /*Primer li del menú*/
}


ul.MenuV a {
   display: block;  /*"a" pasa a ser elemento de bloque => toda la superficie "clickable"*/

   padding: 0.5em;   
   border-left: 3px solid white; /*Borde izqd blanco que cambiará de color al pasar el puntero (ver a:hover)*/
  
   text-decoration: none;  /*Sin subrayado*/
   outline:none; /*Sin contorno punteado con :focus y :active*/
   color: black;
  
}

ul.MenuV a:hover { 
   /*Resaltamos con un borde fijo de color en el lado izquierdo al elemento enfocado
   por el ratón. El borde izquierdo declarado en "#area_lateral a", tiene el mismo grosor que este.
   De esta manera, además del efecto óptico del enfoque (por el cambio de color), se evita el 
   desplazamiento del texto: */
   border-left: 3px solid #d90000;

   color: black;
  
   background-color: white;   /*cambio de color de fondo al enfocar*/
  
}


li.MenuAnidado {     /*Menús anidados (páginas con "más ascendientes")  */
   position: relative;  /*Sin valores. Referencia de elemenos contenidos con "position: absolute"*/
}

li.MenuAnidado ul{    /*Posicionamiento y ocultación*/ 
   /*
   Con "position: absolute", el elemento "ul" sale del flujo normal y se posiciona respecto a su elemento 
   contenedor, en este caso "li.MenuAnidado" (que está posicionado con un valor diferente de "static"). 
   En consecuencia, el borde superior/izquierdo de "li.MenuAnidado" pasa a ser la referencia 
   para el desplazamiento que se desee dar (valores de top/right/bottom/left).
   */    
   position: absolute;
   top: 1.8em;  right: 0em; bottom: 0em; left: 2em;        
  
   display:none;   /*Ocultamos el elemento (situación por defecto cuando no está enfocado)*/
   
}

li.MenuAnidado:hover ul{   /*Visualización del elemento ul oculto*/
   /*
   Al enfocar un "li" con etiqueta de clase "MenuAnidado" que contenga un elemento "ul"
   que estará oculto, lo convertimos en elemento de bloque con "display:block" (y por tanto lo visualizamos).
   */ 
   display:block;
  
   /*border-top: 1px solid #d90000;*/
  
   padding-left: 0em;
   margin-left: 0em;
  
   background-color: #EBE650; /*#FF0CD6;    /* Otra opción: color área texto #d9d9d9; */     
}

li.MenuAnidado ul li{
   background-color: #E9EDEA   /* Otra opción: color área texto #d9d9d9; */
}   

section ul {
   font-size: 0.9em; 
}
              
section ul.textoPequeno {                                              
   font-size: 0.6em;
}