/* 
Title:		Reset default browser styles
Author: 	dan@simplebits.com, based on Eric Meyer's Reset CSS: http://meyerweb.com/eric/tools/css/reset
*/
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, font, 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 {
	margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; border: 0; outline: 0; background: transparent; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
:focus { outline: 0; }
table { border-collapse: collapse; border-spacing: 0; }
a { text-decoration: none; }
input[type="submit"], select, button{ -webkit-appearance:none; -moz-appearance:none; -webkit-border-radius:0; border-radius:0; }



/* ESTILOS GENERALES 
--------------------------------------------------------------------------------------------------------------------------- */
body { background:url(../imagenes/bg-rrhh.jpg) fixed center 100%; font-family:Helvetica, sans-serif; color:#FFF; }
.bgcafe { width:100%; height:100%; position:fixed; top:0; z-index:-3; background:rgba(83,71,65,0.8); }
.bgblanco { width:100%; height:100%; position:fixed; top:0; z-index:-2; background:rgba(255,255,255,0.5); }
.v10 { width:100%; height:10px; }
.v50 { width:100%; height:50px; }

.octavox1 { width:12.5%; display:inline-block; } 
.octavox2 { width:25%; } 
.octavox3 { width:37.5%; } 
.octavox4 { width:50%; } 
.octavox5 { width:62.5%; } 
.octavox6 { width:75%; } 
.octavox7 { width:87.5%; } 
.octavox8 { width:100%; } 

.left { text-align:left; }
.right { text-align:right; }
.center { text-align:center; }
#aviso { width:100%; text-align:center; color:darkred; }

.verde { background:rgba(94,161,160,0.5); }
.rosa { background:rgba(207,121,146,0.5); }
.azul { background:rgba(0,155,219,0.5); }
.naranja { background:rgba(247,122,82,0.5); }
.rojo { background:rgba(193,39,45,0.65); }





/* ESTILOS HEADER 
--------------------------------------------------------------------------------------------------------------------------- */
header { 
	width:100%; height:70px; background:rgba(83,71,65,0.9); position:fixed; top:0; left:0; z-index:100; }
header #btnmenu { 
	width:70px; height:70px; display:inline-block; 
	background:url(../imagenes/btn-menu.png); background-size:cover; background-position:center; vertical-align:top; }
header h1 { 
	height:50px; padding:12px 10px 8px 10px; display:inline-block; vertical-align:top; 
	font-size:28px; line-height:50px; font-weight:100; text-transform:uppercase; } 



/* ESTILOS NAV 
--------------------------------------------------------------------------------------------------------------------------- */
#menu { width:100%; height:100%; position:fixed; top:0; left:0; background:rgba(83,71,65,0.9); display:none; z-index:101; }
#menu #btncerrar { 
	width:50px; height:50px; line-height:50px; text-align:center; display:block; position:absolute; top:50px; right:50px;
	font-size:42px; font-weight:100; color:#FFF; }
#menu #btncerrar:hover { font-weight:normal; }
#menu ul { width:700px; margin:125px auto 100px auto; }
#menu ul a { 
	width:100%; height:60px; display:block; line-height:60px; 
	font-size:21px; font-weight:100; color:#FFF; text-align:center; text-transform:uppercase;
	background:rgba(83,71,65,0.9); margin-bottom:2px; }
#menu ul a:hover { font-weight:normal; }

#submenu { width:100%; height:100%; position:fixed; top:0; left:0; background:rgba(20,20,20,0.95); display:none; z-index:95; }
#submenu ul { width:580px; position:fixed; bottom:75px; left:50%; margin-left:-290px; }
#submenu ul a { 
	width:100%; height:60px; display:block; line-height:60px; 
	font-size:21px; font-weight:100; color:rgba(255,255,255,0.8); text-align:center; text-transform:uppercase;
	background:rgba(25,25,25,0.9); margin-bottom:2px; }
#submenu ul a:hover { font-weight:normal; }



/* ESTILOS ASIDE 
--------------------------------------------------------------------------------------------------------------------------- */
aside { width:100%; padding:0; margin:0; position:fixed; top:70px; left:0; z-index:90; }
aside .blanco { width:100%; background:rgba(255,255,255,0.85); color:rgba(83,71,65,1); position:relative; }
aside .verde { background:rgba(94,161,160,1); color:rgba(255,255,255,1); position:relative; }
aside .rosa { background:rgba(207,121,146,1); color:rgba(255,255,255,1); position:relative; }
aside .buscar { 
	width:600px; margin:5px auto 0 auto; background:rgba(255,255,255,0.5); color:rgba(83,71,65,0.5); position:relative; }

aside h2 { 
	width:100%; height:30px; padding:13px 0 7px 0; 
	font-size:21px; font-weight:normal; line-height:30px; text-align:center; text-transform:uppercase; } 

#nuevo { 
	width:50px; height:50px; position:absolute; top:0; right:0; 
	background:url(../imagenes/btn-nuevo-verde.png); background-size:cover; background-position:center; }
#editar { 
	width:50px; height:50px; position:absolute; top:0; right:0; 
	background:url(../imagenes/btn-editar-verde.png); background-size:cover; background-position:center; }
aside .atrascafe { 
	width:50px; height:50px; position:absolute; top:0; left:0; 
	background:url(../imagenes/btn-atras-cafe.png) #FFF; background-size:cover; background-position:center; }
aside .abajocafe { 
	width:50px; height:50px; position:absolute; top:0; left:0; 
	background:url(../imagenes/btn-abajo-cafe.png) #FFF; background-size:cover; background-position:center; }
aside .adelantecafe { 
	width:50px; height:50px; position:absolute; top:0; right:0; 
	background:url(../imagenes/btn-adelante-cafe.png) #FFF; background-size:cover; background-position:center; }
aside .atrasblanco { 
	width:50px; height:50px; position:absolute; top:0; left:0; 
	background:url(../imagenes/btn-atras-blanco.png); background-size:cover; background-position:center; }
aside .adelanteblanco { 
	width:50px; height:50px; position:absolute; top:0; right:0; 
	background:url(../imagenes/btn-adelante-blanco.png); background-size:cover; background-position:center; }
aside .cerrarblanco { 
	width:50px; height:50px; position:absolute; top:0; left:0; 
	text-align:center; line-height:50px; font-size:28px; color:#FFF; }

aside .btn:hover { margin-left:2px; }

aside input { 
	width:100%; height:50px; padding:10px 0 10px 0; color:rgba(83,71,65,0.9);
	font-size:21px; line-height:50px; text-align:center; background:transparent; border:0; }

aside ul { width:100%; position:absolute; top:50px; left:0; z-index:91; display:none; }
aside ul a { 
	width:100%; height:30px; display:block; padding:10px 0 10px 0; 
	background:rgba(255,255,255,0.75); border-top:1px dotted rgba(83,71,65,1);
	font-size:21px; line-height:30px; font-weight:100; text-align:center; color:rgba(83,71,65,1); text-transform:uppercase; }
aside ul a:hover { background:rgba(255,255,255,0.95); }



/* ESTILOS SECTION 
--------------------------------------------------------------------------------------------------------------------------- */
section { 
	width:100%; min-height:1000px; 
	border-bottom:1px dotted rgba(94,161,160,0.05); border-top:1px dotted rgba(94,161,160,0.05); }
.centrar { width:600px; height:auto; margin:0 auto 120px auto; display:block; }


section .lista { width:100%; position:relative; }
section .lista a { 
	width:94%; height:50px; line-height:50px; padding:0 3% 0 3%; display:block; margin-bottom:1px;
	background:rgba(255,255,255,0.7); color:rgba(83,71,65,0.7); position:relative; }
section .lista a span { 
	width:50px; height:50px; display:block; position:absolute; top:0; right:0;
	background:url(../imagenes/btn-adelante-verde.png); background-size:cover; background-position:center; }
section .lista a:hover { background:rgba(255,255,255,0.9); color:rgba(83,71,65,0.9); }
section .lista a:hover span { right:5px; }

section form { width:100%; margin:50px 0 50px 0; text-align:center; }
section .icono { width:200px; height:200px; margin:0 auto 50px auto; }
section .icono img { width:100%; height:auto; }
section .campo { 
	width:100%; height:auto;  
	background:rgba(255,255,255,0.3); margin-bottom:2px; position:relative; z-index:1; }
section .campo2 { 
	width:49.5%; margin:0 0.25% 0 0.25%; height:auto; display:inline-block;
	background:rgba(255,255,255,0.3); margin-bottom:2px; position:relative; z-index:1; }
section label { 
	width:100%; height:25px; padding:5px 0 0 0; display:block; text-align:center; text-transform:uppercase;
	font-family:Helvetica, sans-serif; font-size:12px; line-height:30px; color:rgba(83,71,65,1); font-weight:bold; } 
section input, section textarea { 
	width:90%; padding:5px 5% 15px 5%; color:rgba(83,71,65,0.8); background:transparent; border:0;
	font-family:Helvetica, sans-serif; font-size:21px; line-height:25px; text-align:center; }
section select { 
	width:100%; padding:5px 5% 15px 5%; color:rgba(83,71,65,0.8); background:transparent; border:0;
	font-family:Helvetica, sans-serif; font-size:21px; line-height:25px; text-align:center; }
section input[type="submit"] { 
	width:100%; padding:0; background:rgba(83,71,65,0.9); 
	color:#FFF; font-weight:100; font-size:14px; line-height:70px; text-transform:uppercase; }
section input[type="submit"]:hover { font-weight:normal; cursor:pointer; } 
section .campo .selectverde { 
	width:60px; height:60px; position:absolute; bottom:0; right:10px; z-index:-1; 
	background:url(../imagenes/btn-abajo-verde.png); background-size:cover; background-position:center; }
section .campo .pesos { 
	width:60px; height:60px; position:absolute; bottom:0; left:10px; z-index:-1; 
	background:url(../imagenes/btn-pesos-cafe.png); background-size:cover; background-position:center; }


section .detalles { width:100%; position:relative; color:rgba(83,71,65,0.8); }
section .detalles li { background:rgba(255,255,255,0.6); margin-bottom:5px; position:relative; }
section .detalles h3 { 
	width:94%; padding:15px 3% 10px 3%; background:rgba(255,255,255,0.4);
	font-size:18px; line-height:26px; color:rgba(83,71,65,1); text-transform:uppercase; }
section .detalles h4 { 
	width:94%; padding:15px 3% 10px 3%; background:rgba(255,255,255,0.2);
	font-size:12px; line-height:16px; color:rgba(83,71,65,1); text-transform:uppercase; }
section .detalles p { width:94%; padding:10px 3% 5px 3%; font-size:14px; line-height:20px; }
section .detalles strong { font-weight:bold; }
section .detalles li a { color:rgba(83,71,65,0.8); }
section .detalles li a:hover { font-weight:bold; }
section .detalles li ul { background:rgba(255,25,5,0); border-bottom:1px dotted rgba(83,71,65,0.5); }
section .detalles li ul li { background:transparent; margin:0; display:inline-block; vertical-align:top; }
section .detalles li .btnrosa { 
	width:94%; padding:12px 3% 10px 3%; background:rgba(207,121,146,0.7); display:block;
	font-size:12px; color:rgba(255,255,255,1); text-transform:uppercase; text-align:center; }
section .detalles li .btnrosa:hover { background:rgba(207,121,146,1); cursor:pointer; } 

section .detalles .btnver { 
	padding:0 8px 0 8px; display:inline-block; background:rgba(83,71,65,0.8); font-size:8px; color:#FFF; }
section .detalles .btneditar { 
	padding:0 8px 0 8px; display:inline-block; background:rgba(94,161,160,0.8); font-size:8px; color:#FFF; }
section .detalles .btneliminar { 
	padding:0 8px 0 8px; display:inline-block; background:rgba(193,39,45,0.8); font-size:8px; color:#FFF; }



section .estadisticas { width:100%; position:relative; color:rgba(83,71,65,0.8); }
section .estadisticas li { background:rgba(255,255,255,0.6); margin-bottom:2px; position:relative; }
section .estadisticas h2 { 
	width:94%; padding:20px 3% 20px 3%; text-align:center;
	font-size:28px; line-height:36px; color:rgba(255,255,255,1); text-transform:uppercase; }
section .estadisticas h3 { 
	width:94%; padding:15px 3% 10px 3%; background:rgba(255,255,255,0.4);
	font-size:18px; line-height:26px; color:rgba(83,71,65,1); text-transform:uppercase; }
section .estadisticas h4 { 
	width:94%; padding:15px 3% 10px 3%; background:rgba(255,255,255,0.2);
	font-size:12px; line-height:16px; color:rgba(83,71,65,1); text-transform:uppercase; }
section .estadisticas a { 
	width:94%; line-height:20px; padding:12.5px 3% 12.5px 3%; display:block; margin-bottom:1px;
	background:rgba(255,255,255,0.7); color:rgba(83,71,65,0.7); position:relative; }
section .estadisticas p { width:94%; padding:15px 3% 10px 3%; font-size:14px; line-height:20px; }
section .estadisticas a span { 
	width:20%; display:block; padding:12.5px 3% 12.5px 3%; position:absolute; top:0; right:0; 
	font-size:18px; font-weight:bold; line-height:20px; color:rgba(255,255,255,1); text-align:center; }
section .estadisticas a:hover span { width:30%; }

section .estadisticas li a.btnrosa { 
	width:94%; padding:12px 3% 10px 3%; background:rgba(207,121,146,0.7); display:block;
	font-size:12px; color:rgba(255,255,255,1); text-transform:uppercase; text-align:center; }
section .estadisticas li a.btnrosa:hover { background:rgba(207,121,146,1); cursor:pointer; } 

section .estadisticas li ul { background:rgba(255,25,5,0); border-bottom:1px dotted rgba(83,71,65,0.5); }
section .estadisticas li ul li { background:transparent; margin:0; display:inline-block; vertical-align:top; }
section .estadisticas li .btnrosa { 
	width:94%; padding:12px 3% 10px 3%; background:rgba(207,121,146,0.7); display:block;
	font-size:12px; color:rgba(255,255,255,1); text-transform:uppercase; text-align:center; }
section .estadisticas li .btnrosa:hover { background:rgba(207,121,146,1); cursor:pointer; } 




/* ESTILOS PARA LAS NOTIFICACIONES 
--------------------------------------------------------------------------------------------------------------------------- */
.notificaciones {
	width:60%; min-height:40px; position:fixed; bottom:100px; left:20%; background:rgba(0,0,0,0.7); z-index:110; }
.notificaciones h2 { 
	width:auto; height:20px; position:absolute; top:10px; left:10px; 
	text-transform:uppercase; font-weight:normal; font-size:18px; line-height:20px; color:#FFF; }
.notificaciones p { 
	padding:10px; margin-top:40px; font-size:16px; color:rgba(255,255,255,0.7); border-top:1px dotted #000; display:none; }
.notificaciones .cerrar { 
	width:20px; height:20px; display:block; position:absolute; top:10px; right:10px;
	text-align:right; font-size:20px; color:#FFF; }
.notificaciones:hover p { display:block; }
.notificaciones .cerrar:hover { color:aqua; }



/* FORMULARIO PARA FIRMAR
--------------------------------------------------------------------------------------------------------------------------- */
#firmar { width:100%; height:100%; position:fixed; top:0; left:0; background:rgba(120,120,120,0.90); display:none; z-index:95; }
#firmar .completar { width:580px; position:fixed; bottom:75px; left:50%; margin-left:-290px; }



/* FOTO DEL CHECADOR
--------------------------------------------------------------------------------------------------------------------------- */
ul a.lafoto { 
	width:80%; height:70px; overflow:hidden; position:relative;
	background:#FFF; text-align:center; margin:0 5% 10px 5%; padding:5px 5% 5px 5%; display:block; }
ul a.lafoto img { width:100%; height:auto; }
ul a.lafoto .n { 
	width:100%; height:100%; position:absolute; top:0; left:0; 
	background:rgba(0,0,0,0.6); font-size:10px; color:#FFF; display:none; }
ul a.lafoto .falso { background:rgba(118,11,13,0.6); } 
ul a.lafoto:hover .n { display:block; }

#verfoto { 
	width:100%; height:100%; position:fixed; top:0; left:0;
	text-align:center; background:rgba(120,120,120,0.90); z-index:300; display:none; }
#verfoto img { width:500px; height:auto; margin:50px auto 120px auto; }
#verfoto a { width:100%; height:50px; line-height:50px; padding:5px 0 0 0; font-size:26px; position:absolute; bottom:0; } 

.mifoto { width:100%; height:auto; margin:0px auto 20px auto; text-align:center; }
.mifoto img { width:80%; height:auto; }


/* ESTILOS FOOTER 
--------------------------------------------------------------------------------------------------------------------------- */
footer { 
	width:100%; height:70px; line-height:70px; background:rgba(83,71,65,0.9); position:fixed; bottom:0; left:0; z-index:100; }
footer #btnsubmenu { 
	width:70px; height:70px; display:inline-block; position:absolute; top:0; right:0;
	background:url(../imagenes/btn-submenu.png); background-size:cover; background-position:center; vertical-align:top; }


table { width:100%; display:table; text-align:center; }
th { font-weight:bold; text-transform:uppercase; background:rgba(255,255,255,.4); padding:15px 0 10px 0; }





/* ADAPTACIONES PARA DISPOSITIVOS MOVILES
---------------------------------------------------------------------------------------------------------------------------*/

@media only screen and (min-device-width : 320px) and (max-device-width : 1000px)  {

	header h1 { padding:10px; } 
	
	#menu ul { width:90%; margin:125px 5% 100px 5%; }
	
	#submenu ul { width:90%; position:fixed; bottom:75px; left:5%; margin-left:0; }
	
	#firmar .completar { width:90%; position:fixed; bottom:75px; left:5%; margin-left:0; }

	
	aside .buscar { width:95%; }
	
	.centrar { width:95%; height:auto; margin:0 auto 120px auto; display:block; }
	
	.notificaciones { width:90%; left:5%; }	
	
	
	ul a.lafoto { 
		width:80%; height:40px; overflow:hidden; position:relative;
		background:#FFF; text-align:center; margin:0 5% 10px 5%; padding:5px 5% 5px 5%; display:block; }
	#verfoto img { width:90%; height:auto; margin:50px auto 120px auto; }
	.mifoto { width:100%; height:auto; margin:85px auto 20px auto; }
	
	
}