/********************************************************************
  Nombre de la Institucion: MINISTERIO DE AGRICULTURA Y RIEGO
  Nombre del Proyecto:      Estandares de Diseño - Barra de Menus
  Objetivo:                 Estandarizar los estilos referentes a la Tipografia:
  
  Aplicado a		         : Posicion de menu
  									  Tamaño de fuente
  									  Tamaño de interlineado
  									  Color de fondo y bordes
  									  

  Responsable:             : Freddi Herrera
  Fecha Creacion           : Febrero - 2015
  Fecha Actualizacion      : __/__/__
  Detalle de actualización : --------------
**************************************************************************/

/*Estilos del tipo "Identificador - Con Herencia" definidos para la posicion y tamaño de las fuente*/

#menu ul,
#menu li,
#menu span,
#menu a {
  margin: 0;
  padding: 0;
  position: relative;
  font-size: 12px!important;
  color:#523628;
}

/*Estilo del tipo "Identificador" Definido para crear la CAPA CONTENEDORA DEL MENU: Color de fondo y posicion*/

#menu {
  /*line-height: 10%;
  background: #2AC3DF;
  background: -moz-linear-gradient(top, #2AC3DF 0%, #10B9EC 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2AC3DF), color-stop(80%, #10B9EC));
  background: -webkit-linear-gradient(top, #2AC3DF 0%, #10B9EC 80%);
  background: -o-linear-gradient(top, #2AC3DF 0%, #10B9EC 80%);
  background: -ms-linear-gradient(top, #2AC3DF 0%, #10B9EC 80%);
  background: linear-gradient(to bottom, #2AC3DF 0%, #10B9EC 80%);
  width: auto;
  margin-top: 35px;*/

 /*background: #2AC3DF;*/
  background: -moz-linear-gradient(top, #2AC3DF 0%, #10B9EC 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2AC3DF), color-stop(80%, #10B9EC));
  background: -webkit-linear-gradient(top, #2AC3DF 0%, #10B9EC 80%);
  background: -o-linear-gradient(top, #2AC3DF 0%, #10B9EC 80%);
  background: -ms-linear-gradient(top, #2AC3DF 0%, #10B9EC 80%);
  background: linear-gradient(to bottom, #2AC3DF 0%, #10B9EC 80%);
  background: #2AC3DF;
  width: 690px;/*740px*/
  margin-top:0px;
  float:left;
}

/*Estilo del tipo "Identificador" Aplicado para: limpiar todo contenido posterior a una etiqueta lista*/

#menu:after,
#menu ul:after {
  content: '';
  display: block;
  clear: both;
}

/*Estilo del tipo "Identificador" con herencia al tag <a> define la posicion de las opciones de menu*/
#menu a {
  display: block;
  padding: 19px 8px;
  text-decoration: none;

}

/*Estilo del tipo "Identificador" con herencia al tag <ul> elimina las viñetas que vienen por defecto en las listas*/

#menu ul {
  list-style: none;
}

/*Estilo del tipo "Identificador" con herencia al tag <ul> <li>
  Crea un elemento como un contenedor de bloque a nivel de línea empleado para las opciones de menu
  Convierte la lista a nivel Horizontal*/

#menu > ul > li {
  display: inline-block;
  float: left;
  margin: 0;
    top: 0px;
    left: 0px;
}

/*Estilo del tipo "Identificador - Heredado" 
  Aplicado para: Dar el efecto y color al Triangulo que aparece en las opciones de memu principal*/
  
#menu > ul > li:hover:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  bottom: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #A2A0A0;
  margin-left: -10px;
}

/*Estilo del tipo "Identificador - Heredado" 
  Aplicado para: Dar border a los marcos de las opciones de menu*/
  
#menu > ul > li:first-child > a {
  border-radius: 0px 0 0 0;
  -moz-border-radius: 0px 0 0 0;
  -webkit-border-radius: 0px 0 0 0;
}

/*Estilo del tipo "Identificador - Heredado" 
  Aplicado para: Indicar la opcion de menu seleccioada*/
  
#menu > ul .activo a{
  display: block;
  color: #ffffff;
  background: -moz-linear-gradient(top, #2AC3DF 0%, #10B9EC 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2AC3DF), color-stop(80%, #10B9EC));
  background: -webkit-linear-gradient(top, #2AC3DF 0%, #10B9EC 80%);
  background: -o-linear-gradient(top, #2AC3DF 0%, #10B9EC 80%);
  background: -ms-linear-gradient(top, #2AC3DF 0%, #10B9EC 80%);
  background: linear-gradient(to bottom, #2AC3DF 0%, #10B9EC 80%);

}

/*Estilo del tipo "Identificador" 
  Aplicado para: Color de fondo y fuente para el 1er nivel de opc de menu*/
  
#menu > ul > li.active > a{
  color: #523628;
  background: -moz-linear-gradient(top, #2AC3DF 0%, #10B9EC 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2AC3DF), color-stop(80%, #10B9EC));
  background: -webkit-linear-gradient(top, #2AC3DF 0%, #10B9EC 80%);
  background: -o-linear-gradient(top, #2AC3DF 0%, #10B9EC 80%);
  background: -ms-linear-gradient(top, #2AC3DF 0%, #10B9EC 80%);
  background: linear-gradient(to bottom, #2AC3DF 0%, #10B9EC 80%);
}

/*Estilo del tipo "Identificador" 
  Aplicado para: Color de fondo y fuente para el 1er nivel de opc de menu al mover el MOUSE*/
  
#menu > ul > li:hover > a {
  color: #523628;
  background: #E7E8EA;
  background: -moz-linear-gradient(top, #E7E8EA 0%, #E7E8EA 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #E7E8EA), color-stop(100%, #E7E8EA));
  background: -webkit-linear-gradient(top, #E7E8EA 0%, #E7E8EA 100%);
  background: -o-linear-gradient(top, #E7E8EA 0%, #E7E8EA 100%);
  background: -ms-linear-gradient(top, #E7E8EA 0%, #E7E8EA 100%);
  background: linear-gradient(to bottom, #E7E8EA 0%, #E7E8EA 100%);
}

/*Estilo del tipo "Identificador" 
  Aplicado para: Color de fondo y fuente para el 2do nivel de opc de menu*/

#menu .has-sub ul li a {
  background: #E4E4E4;
  border-bottom: 1px dotted #A2A0A0;
  display: block;
  line-height: 120%;
  padding: 10px;
  color: #523628;
}

/*Estilo del tipo "Identificador" 
  Aplicado para: Color de fondo y fuente para el 2do nivel de opc de menu al mover el MOUSE*/

#menu .has-sub ul li:hover a {
  background: #A2A0A0;
  color:  #ffffff;
}

/*Estilo del tipo "Identificador" 
  Aplicado para: Color de fondo y fuente para el 3do nivel de opc de menu*/

#menu .has-sub .has-sub ul li a {
  background: #A2A0A0;
  border-bottom: 1px dotted #E4E4E4;
  color: #ffffff;
}

/*Estilo del tipo "Identificador" 
  Aplicado para: Color de fondo y fuente para el 3do nivel de opc de menu al mover el MOUSE*/
  
#menu .has-sub .has-sub ul li a:hover {
  background: #2AC3DF;
  color: #ffffff;
}

/*Estilo del tipo "Identificador - Heredado" 
  Aplicado para: Definir el tamaño del borde de todos los tag indicados*/

#menu ul ul li.last > a,
#menu ul ul li:last-child > a,
#menu ul ul ul li.last > a,
#menu ul ul ul li:last-child > a,
#menu .has-sub ul li:last-child > a,
#menu .has-sub ul li.last > a {
  border-bottom: 2px;
}


/*Estilo del tipo "Identificador" 
  Permite mostrar en estilo bloque las opciones de submenu generadas*/
  
#menu .has-sub:hover > ul {
  display: block;

}

/*Estilo del tipo "Identificador" 
  Permite sobreponer hacia adelante de toda capa las opciones de submenu generadas*/
  
#menu .has-sub {
  z-index: 1;
}

/*Estilo del tipo "Identificador" 
  Permite OCULTAR todas las subopciones de menu generadas al armar la etiqueta <ul>*/
  
#menu .has-sub ul {
  display: none;
  position: absolute;
  width: 200px;
  top: 100%;
  left: 0;
}

/*Estilo del tipo "Identificador" 
  Permite MOSTRAR la capa de opciones del 3er NIVEL DE MENU*/
  
#menu .has-sub .has-sub:hover > ul {
  display: block;
}

/*Estilo del tipo "Identificador" 
  Permite ALINEAR hacia la derecha la capa de opciones del 3er NIVEL DE MENU*/
 
#menu .has-sub .has-sub ul {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
}