@font-face {
  font-family: 'Roboto300';
  font-weight: 300;
  font-style: normal;
  src: url('../fonts/Roboto-300.eot');
  src: url('../fonts/Roboto-300.eot?#iefix') format('embedded-opentype'),
       local('Roboto Light'),
       local('Roboto-300'),
       url('../fonts/Roboto-300.woff2') format('woff2'),
       url('../fonts/Roboto-300.woff') format('woff'),
       url('../fonts/Roboto-300.ttf') format('truetype'),
       url('../fonts/Roboto-300.svg#Roboto') format('svg');
}

@font-face {
  font-family: 'Roboto400';
  font-weight: 400;
  font-style: normal;
  src: url('../fonts/Roboto-regular.eot');
  src: url('../fonts/Roboto-regular.eot?#iefix') format('embedded-opentype'),
       local('Roboto'),
       local('Roboto-regular'),
       url('../fonts/Roboto-regular.woff2') format('woff2'),
       url('../fonts/Roboto-regular.woff') format('woff'),
       url('../fonts/Roboto-regular.ttf') format('truetype'),
       url('../fonts/Roboto-regular.svg#Roboto') format('svg');
}

@font-face {
  font-family: 'Source Sans Pro';
  font-weight: 700;
  font-style: normal;
  src: url('../fonts/Source-Sans-Pro-700.eot');
  src: url('../fonts/Source-Sans-Pro-700.eot?#iefix') format('embedded-opentype'),
       local('Source Sans Pro Bold'),
       local('Source-Sans-Pro-700'),
       url('../fonts/Source-Sans-Pro-700.woff2') format('woff2'),
       url('../fonts/Source-Sans-Pro-700.woff') format('woff'),
       url('../fonts/Source-Sans-Pro-700.ttf') format('truetype'),
       url('../fonts/Source-Sans-Pro-700.svg#SourceSansPro') format('svg');
}



/* Cuerpo de página */

body { 
  background-color: #FFFFFF; 
  color: #4D4D4D; 
  font-family: 'Roboto300';
}


/* Títulos */

h1 { 
  font-family: 'Roboto300';
  font-size: 1.5em;
}

h2 { 
  font-family: 'Roboto300';
  font-size: 1.2em;
  background-color:#FFF9DF; width:100%; padding:10px;
}


/* Subtitulos del sweetalert */
.texto_modal {
  font-size: 1.4em;
}


     
/* Enlaces */    
    
a:link {
	color: #0000FF;
  text-decoration: none;
}
  
a:visited {
	color: #0000FF;
  text-decoration: none;
}
  
a:active {
  color: #0000FF;
  text-decoration: none;
}  
 
a:hover {
  color: #0000FF;
  text-decoration: underline;
}


/* Area de trabajo (div principal) */

.area_trabajo {
  max-width: 1100px;
  min-width: 980px;
  /* border:1px solid #000; */
  margin-left: auto;
  margin-right: auto;
}

/* Línea HR estilizada */

hr.linea {
	border-top: 1px solid #B6B6B6;
}

/* Título (en caso de usar texto y no un logo en imágen) */

.titulo_principal {
  font-family: 'Source Sans Pro'; 
  font-size: 2em;
  color: #ff7474;
}

/* Formularios */

.td_formulario {
  padding-top:8px;
}

.subtitulo {
  padding-left:10px;
  color:#ff7474;
}


/* Caja de alerta */
.alerta {
    padding: 20px;
    background-color: #FFE169; /* Amarillo */
    color: #4D4D4D;
    margin-bottom: 15px;
    opacity: 1;
    transition: opacity 0.6s; /* 600ms para el fade out */    
}

/* Caja de alerta: botón de cerrar */
.btncerrar {
    margin-left: 15px;
    color: #C8AE45;
    font-weight: bold;
    float: right;
    font-size: 22px;
    line-height: 20px;
    cursor: pointer;
    transition: 0.3s;
}

/* Caja de alerta: Cuando el mouse pasa sobre el botón de cerrar */
.btncerrar:hover {
    color: #4D4D4D;
}



/* Tabla para listado */

.tabla_listado {
	width:100%; 
	border-collapse:collapse; 
}
.tabla_listado td { 
	padding:8px; border:#B5B5B5 1px solid;
}
/* provide some minimal visual accomodation for IE8 and below */
.tabla_listado tr {
	background: #E5E5E5;
}
/*  Define the background color for all the ODD background rows  */
.tabla_listado tr:nth-child(odd) { 
	background: #F7F7F7;
}
/*  Define the background color for all the EVEN background rows  */
.tabla_listado tr:nth-child(even) {
	background: #FFFFFF;
}



/* Tabla para datos */

.tabla_datos {
  width:100%; 
	border-collapse:collapse; 
}

.tabla_datos td {
  padding:8px; border:#B5B5B5 1px solid;
}

td.item {
  background-color: #F3F3F3; width: 20%;
}

td.data {
  background-color: #FFFFFF; width: 80%;
}

/* ************** */
/* Menú principal */
/* ************** */

/* Fondo del menú y posición (muy arriba en el pool) */
nav { 
	background-color: #E6E6E6;
	z-index: 50;
}

/* Color y decoración de los enlaces del menú */
nav a, nav a:visited, nav a:active, nav a:hover {
  color:#000000; 
  text-decoration: none;
}

nav a.normal, nav a.normal:visited, nav a.normal:active, nav a.normal:hover {
  color:#000000; 
  text-decoration: none;
}

/* Ya que el "ul li" tiene el atributo "float:left", hay que agregar un clear después del contenedor*/
nav:after {
	content: "";
	display: table;
	clear: both;
}

/* Remover el padding, márgen y "list-style" de "ul" y agregar "position:reltive" */
nav ul {
	padding: 0;
	margin: 0;
	list-style-type: none;
	position: relative;
	z-index: 50;
}
	
/* Posicionar los ítems de navegación inline */
nav ul li {
	margin: 0px;
	display:inline-block;
	float: left;
	background-color: #E6E6E6;
	z-index: 50;
}

/* Estilos de los enlaces */
nav a {
	display:block;
	padding: 0 16px;	
	color:#0C0C0C;
	line-height: 50px;
	text-decoration:none;
}

/* Cambio de color en el hover */
nav a:hover { 
	background-color: #CFCFCF; 
}

/* Menú visitado */
nav a:visited { 
	color: #0C0C0C; 
}

/* Menú activo */
nav a:active {
    color: #0C0C0C;
}

/* Enlace de menú */
nav a:link {
    color: #0C0C0C;
}

/* Esconder los dropdowns por definición y darles una posición absoluta */
nav ul ul {
	display: none;
	position: absolute; 
	top: 50px; /* tiene que ser el mismo número que "line-height" del "nav a" */ 
}
	
/* Mantener resaltado el nivel superior del menú */
nav ul li:hover {
  background-color: #F2F2F2;
}	
	
/* Hover para el dropdown */
nav ul li:hover > ul {
	display:inherit;
}
	
/* Primer dropdown */
nav ul ul li {
	width:200px;
	float:none;
	display:list-item;	
	position: relative;
}

/* Segundo, tercero y más dropdowns. Movemos el segundo, tercero y demás 
   dropdowns a la izquierda por el ancho del primer dropdown */
nav ul ul ul li {
	position: relative;
	top:-50px;
	left:200px; /* tiene que ser del mismo ancho que el "width" del "nav ul ul li" */ 
}