/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
---------------------------------------------------------------------------------------------------*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, 
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
a { text-decoration:none; }


/* ESTILOS GENERALES
---------------------------------------------------------------------------------------------------*/
body { background:#001429; font-family:"Helvetica Neue"; color:#FFF; }
.fondo { 
	width:100%; height:100%; position:fixed; top:0; left:0; z-index:-2; 
	background:url(imagenes/bg-01.png) no-repeat; background-size:cover; opacity:0.1; }
.fx-triangulo { 
	width:100%; height:100%; position:fixed; top:0; left:0; z-index:-1;
	background:url(imagenes/fx-luz.png) no-repeat; background-size:cover; } 	
.btn-cerrar { 
 	width:50px; height:50px; display:block; position:absolute; top:20px; right:10%;
	background:url(imagenes/btn-cerrar.png) no-repeat; background-size:cover; }


/* ESTILOS HEADER
---------------------------------------------------------------------------------------------------*/
header { 
	width:100%; position:fixed; top:0; left:0; padding:10px 0 10px 0; z-index:100; 
	background:url(imagenes/fx-sombra-01.png) no-repeat; background-size:cover;
	border-bottom:1px solid #FFF; }
header .centrar { width:80%; margin:auto; position:relative; }		
.numero { 
	height:100px; line-height:100px; padding:0 10px 0 0; 
	font-size:90px; font-weight:bold; text-align:center; float:left; }
.dia { 
	width:50%; padding:40px 0 20px 0; display:inline-block; 
	font-size:16px; line-height:20px; }	
.btn-agregar { 
	width:60px; height:60px; position:absolute; top:30px; right:0;
	background:url(imagenes/btn-agregar.png) center no-repeat; background-size:contain; opacity:0.75; }	
.btn-agregar:hover { opacity:1; }



/* ESTILOS PARA LOS FORMULARIOS 
---------------------------------------------------------------------------------------------------*/
legend {
	width:94%; padding:5px 3% 5px 3%; margin:15px 0 15px 0; display:block; text-align:left;
	font-family:Helvetica; font-size:18px; line-height:24px; text-transform:uppercase;
	border-bottom:1px dotted rgba(255,255,255,0.5); }
label {
	width:94%; padding:5px 3% 5px 3%; display:block; text-align:center;
	font-family:Helvetica; font-size:14px; line-height:24px; text-transform:uppercase; }
input, textarea, .lista {
	width:94%; padding:10px 3% 10px 3%; background:rgba(255,255,255,0.9); position:relative; 
	font-family:Helvetica; font-size:16px; line-height:30px; border:0; margin-bottom:10px; }
.lista span { 
	width:35px; height:35px; display:block; position:absolute; top:10px; right:10px;
	background:url(imagenes/btn-lista.png) no-repeat; background-size:cover; z-index:0; } 
select { 
	width:100%; background:transparent; border:0; position:relative; 
	font-family:Helvetica; font-size:16px; line-height:30px;
	-webkit-appearance:none; -moz-appearance:none; appearance:none; z-index:2; }
input[type="password"] { text-align:center; }
input[type="submit"] { 
	width:100%; background:#00FFFF; color:#001429; text-align:center;
	font-weight:bold; text-transform:uppercase; 
	-webkit-appearance:none; -moz-appearance:none; appearance:none; }
input[type="submit"]:hover { cursor:pointer; } 

.inicio { width:60%; margin:100px auto 50px auto; }
.inicio h1 { 
	width:100%; padding:0 0 15px 0; line-height:38px; display:block; border-bottom:1px solid #FFF;  
	text-align:center; font-size:28px; font-weight:bold; text-transform:uppercase; }
.inicio article { width:80%; margin:50px 10% 50px 10%; }
.inicio input { text-align:center; }


/* ESTILOS PRINCIPAL
---------------------------------------------------------------------------------------------------*/
.principal { width:80%; margin:150px auto 300px auto; }
.principal nav { width:100%; }
.principal nav .btn-menu { 
	width:30px; height:30px; line-height:30px; display:inline-block; vertical-align:top;
	background:url(imagenes/btn-menu.png) no-repeat; background-size:contain; }
.principal nav h1 { 
	font-size:21px; line-height:30px; font-weight:bold; text-transform:uppercase;
	display:inline-block; vertical-align:top; margin:0 0 0 10px; } 
.principal nav h1:hover { cursor:pointer; }
.principal nav ul { margin:0 0 0 40px; display:none; }
.principal nav li { font-size:21px; line-height:30px; font-weight:bold; text-transform:uppercase; }
.principal nav li.t { display:block; }
.principal nav li a { color:#FFF; text-decoration:none; }
.principal nav li a:hover { cursor:pointer; color:#00FFFF; text-decoration:underline; }

.principal article { width:100%; margin:50px 0 100px 0; }
.principal article h1 { 
	width:96%; padding:10px 2% 10px 2%; background:#001429; 
	font-size:18px; line-height:24px; text-transform:uppercase; }
.principal article li { width:96%; padding:10px 2% 10px 2%; border-bottom:1px solid #FFF; }
.principal article li .fecha { 
	width:15%; font-size:14px; line-height:20px; 
	font-style:italic; text-align:left; text-transform:uppercase; display:inline-block; }
.principal article li .incidencia { 
	width:70%; font-size:16px; line-height:20px; text-align:left; display:inline-block; }
.principal article li .secundario { 
	width:15%; font-size:12px; line-height:30px; text-align:center; display:inline-block; 
	background:#00FFFF; border-radius:15px; color:#001429; text-transform:uppercase; }
.principal article li .hentrada { 
	width:12%; margin:0 1% 0 1%; font-size:12px; line-height:30px; text-align:center; display:inline-block; 
	background:#00FFFF; border-radius:15px; color:#001429; text-transform:uppercase; }
.principal article li .hsalida { 
	width:12%; margin:0 1% 0 1%; font-size:12px; line-height:30px; text-align:center; display:inline-block; 
	background:#ED8415; border-radius:15px; color:#001429; text-transform:uppercase; }



/* ESTILOS LIGHTBOX
---------------------------------------------------------------------------------------------------*/
.lightbox { 
	width:120%; height:100%; position:fixed; top:0; left:-10%; overflow-x:scroll;
	background:rgba(0,20,41,0.9); z-index:101; display:none; }
.lightbox .caja { width:40%; padding:50px 30% 200px 30%; margin:auto; }
.lightbox h1 { 
	width:100%; padding:0 0 15px 0; line-height:38px; display:block; border-bottom:1px solid #FFF;  
	text-align:center; font-size:28px; font-weight:bold; text-transform:uppercase; }
.lightbox article { width:80%; margin:50px 10% 50px 10%; }
.lightbox .reloj { 
	width:100px; height:100px; padding:10px 0 10px 0; margin:100px auto 0 auto;
	background:url(imagenes/btn-checador.png) center no-repeat; background-size:contain; }
#completar { display:block; }
	

/* ESTILOS PARA LOS INFORMES 
---------------------------------------------------------------------------------------------------*/
.lightbox article.informe { 
	margin:25px 10% 25px 10%; padding:0 0 25px 0; border-bottom:1px solid #FFF; 
	font-size:16px; line-height:20px; text-transform:uppercase; }
.lightbox .informe .fechai, .lightbox .informe .fechaf { 
	width:43%; margin:0 1% 10px 0; padding:15px 3% 15px 3%; 
	background:rgba(255,255,255,0.3); display:inline-block; font-style:italic; }
.lightbox .informe .fechaf { margin:0 0 10px 1%; text-align:right; }
.lightbox .informe .fechai strong, .lightbox .informe .fechaf strong { font-size:21px; font-weight:bold; } 
.lightbox .informe .total { 
	width:94%; padding:25px 3% 25px 3%; text-align:center; background:rgba(255,255,255,0.15); }
.lightbox .informe .total h2 { font-size:36px; line-height:50px; font-weight:bold; color:#00FFFF; }

.lightbox .informe h3 { text-align:center; font-weight:bold; font-size:18px; }
.lightbox .informe .progreso { 
	width:100%; height:20px; margin:10px 0 10px 0; background:rgba(202,11,14,1.00); }
.lightbox .informe .cien { width:100%; height:20px; background:#00FFFF; }
.lightbox .informe .setentaycinco { width:75%; height:20px; background:#00FFFF; }
.lightbox .informe .cincuenta { width:50%; height:20px; background:#00FFFF; }
.lightbox .informe .veinticinco { width:25%; height:20px; background:#00FFFF; }
.lightbox .informe .valor { width:50%; display:inline-block; }
.lightbox .informe .mostrar { width:50%; display:inline-block; text-align:right; color:#FFF; }

.lightbox .informe ul { width:100%; margin:10px 0 0 0; display:none; }
.lightbox .informe li:first-child { margin-top:10px; border-top:1px solid rgba(255,255,255,0.4); }
.lightbox .informe li { 
	width:100%; margin:5px 0 5px 0; padding:5px 0 5px 0; 
	border-bottom:1px solid rgba(255,255,255,0.4); display:block; }
.lightbox .informe li:hover { background:rgba(255,255,255,0.1); }

.lightbox .informe .sumas { display:block; }
.lightbox .sumas li p { width:75%; display:inline-block; }
.lightbox .sumas li span { width:25%; display:inline-block; text-align:right; }

.lightbox .asistencia li p { width:50%; display:inline-block; }
.lightbox .asistencia li span { 
	width:20%; margin:0 2% 0 2%; border-radius:5px; display:inline-block;
	font-size:12px; font-weight:bold; line-height:20px; text-align:center; color:#001429; }
.lightbox .asistencia li span.entrada { background:#00FFFF; } 
.lightbox .asistencia li span.salida { background:#E9730F; } 

.lightbox .incidencias { color:rgba(255,255,255,0.5); }
.lightbox .incidencias li:hover { color:rgba(255,255,255,1); } 
.lightbox .incidencias li span { 
	width:50%; padding-bottom:5px; margin-bottom:5px; display:inline-block; 
	font-style:italic; border-bottom:1px dotted rgba(255,255,255,0.25); }
.lightbox .incidencias li span.tipo { text-align:right; }
.lightbox .incidencias li p { width:100%; text-transform:none; }


/* ESTILOS FOOTER
---------------------------------------------------------------------------------------------------*/
footer { 
	width:100%; position:fixed; bottom:0; left:0; padding:10px 0 10px 0; z-index:100; 
	background:url(imagenes/fx-sombra-02.png) no-repeat; background-size:cover; }
footer ul { width:80%; margin:70px auto 5px auto; text-align:center; }
footer ul li { margin:0 5px 0 5px; display:inline-block; }	
footer ul li a { width:50px; height:50px; display:block; }
footer .btn-incidencias { background:url(imagenes/btn-empleados.png) no-repeat; background-size:cover; }
footer .btn-checador { background:url(imagenes/btn-checador.png) no-repeat; background-size:cover; }
footer .btn-nominas { background:url(imagenes/btn-nomina.png) no-repeat; background-size:cover; }
footer .btn-ajustes { background:url(imagenes/btn-ajustes.png) no-repeat; background-size:cover; }


/* ESTILOS NOTIFICACIONES
---------------------------------------------------------------------------------------------------*/
.notificaciones { 
	width:74%; padding:25px 3% 60px 3%; position:fixed; left:10%; bottom:0;
	background:rgba(0,0,0,0.8); text-transform:uppercase; z-index:101; display:none; }
.notificaciones h1 { width:75%; font-size:32px; font-weight:bold; color:#00FFFF; }
.notificaciones p { width:75%; font-size:21px; color:#FFF; }
.notificaciones a { 
	width:20%; padding:10px; display:block; position:absolute; top:25px; right:3%; 
	font-size:18px; line-height:30px; color:#001429; text-align:center; font-weight:bold; 
	border-radius:10px; background:#FFF; }
.notificaciones a:hover { background:#ED8415; }


@media (max-width: 900px), handheld and (orientation: landscape) {


.inicio { width:90%; margin:100px auto 50px auto; }
header .centrar { width:90%; margin:auto; position:relative; }		
.principal { width:90%; margin:150px auto 300px auto; }
.lightbox .caja { width:90%; padding:50px 0 200px 0; margin:auto; }
.notificaciones { 
	width:90%; padding:25px 5% 60px 5%; position:fixed; left:0; bottom:0;
	background:rgba(0,0,0,0.8); text-transform:uppercase; z-index:101; display:none; }


}