/*Theme Name: PAO Sistema
Theme URI: www.gpuon.mx
Author: gPuon
Description: Hoja de estilos para la primera versión de la Aplicación MyWallet
*/
 
/* 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, select { -webkit-appearance:none; -moz-appearance:none; }



/* ESTILOS GENERALES
---------------------------------------------------------------------------------------------------------------------------*/
body { 
	background:url(images/bg-web-02.jpg) no-repeat fixed; background-size:cover; 
	font-family: 'Open Sans', sans-serif; color:#666; }
.s50 { width:100%; height:50px; }
.s100 { width:100%; height:110px; }
.s200 { width:100%; height:200px; }
.centrar { text-align:center; }	
.error { border:1px dotted rgba(223,33,36,1.00); color:rgba(223,33,36,1.00); }	


/* ESTILOS HEADER
--------------------------------------------------------------------------------------------------------------------------- 
header {
	width:30%; height:70px; padding:5px 20px 25px 20px; position:fixed; top:0; left:35%; margin-left:-20px; z-index:50;
	background:#FBB03B; text-align:center; color:#FFF; }
header h1 { font-size:14px; line-height:20px; font-weight:lighter; }
header .titulo { 
	width:100%; padding:10px 0 10px 0; position:absolute; top:30px; left:0; background:rgba(0,0,0,0.3); }
header .titulo h2 { font-size:32px; line-height:32px; font-weight:normal; }	
header .titulo p { font-size:12px; line-height:12px; font-weight:normal; color:#FBB03B; }	
header .titulo a { 
	width:40px; height:40px; display:block; position:absolute; top:12px; right:12px; border-radius:5px; 
	background:#FBB03B; font-size:24px; line-height:40px; font-weight:bold; color:#FFF; text-align:center;
	box-shadow:0 0 5px rgba(0,0,0,0.6) inset; }	
header .titulo a:hover { background:#F90; } */


/* ESTILOS HEADER ALTERNATIVO
--------------------------------------------------------------------------------------------------------------------------- */
header {
	width:40%; height:75px; padding:5px 20px 25px 20px; position:fixed; top:0; left:30%; margin-left:-20px; z-index:50;
	background:#FFF; text-align:center; }
header h1 { font-size:14px; line-height:20px; font-weight:bold; color:#FBB03B; }
header .titulo { 
	width:100%; padding:10px 0 10px 0; position:absolute; top:30px; left:0; background:#FBB03B; }
header .titulo h2 { font-size:32px; line-height:42px; font-weight:normal; color:#FFF; }	
header .titulo a { 
	width:35px; height:35px; display:block; position:absolute; top:12px; right:12px; 
	font-size:30px; line-height:35px; font-weight:bold; color:#FFF; text-align:center; }	
header .titulo a:hover { font-size:20px; } 
header .titulo a.editar { background:url(images/btn-editar.png) no-repeat; background-position:top; background-size:100%; }





/* ESTILOS NAV
---------------------------------------------------------------------------------------------------------------------------*/
nav { 
	width:40%; height:60px; padding:10px 20px 0 20px; position:fixed; bottom:0; left:30%; margin-left:-20px; 
	background:#FFF; border-top:1px solid #CCC; text-align:center; z-index:102; }
nav a { 
	width:20%; height:50px; margin:0; text-align:center; display:block; display:inline-block; vertical-align:top; }
nav .nventas { width:20%; }
nav a span { width:50px; height:50px; display:inline-block; }
nav a:hover, nav a.active { background:#FFF; }
nav a:hover span { background-position:bottom; }
nav .nprincipal span { 
	background:url(images/nav-home.png) no-repeat; background-position:top; background-size:cover; }
nav .nclientes span { 
	background:url(images/nav-clientes.png) no-repeat; background-position:top; background-size:cover; }
nav .nproductos span { 
	background:url(images/nav-productos.png) no-repeat; background-position:top; background-size:cover; }
nav .nventas span { 
	background:url(images/nav-ventas-00.png) no-repeat; background-position:top; background-size:cover; }
nav .nestadisticas span { 
	background:url(images/nav-estadisticas-00.png) no-repeat; background-position:top; background-size:cover; }
nav .nopciones span { 
	background:url(images/nav-opciones.png) no-repeat; background-position:top; background-size:cover; }
nav .ncupones span { 
	background:url(images/nav-cupones.png) no-repeat; background-position:top; background-size:cover; }
#activo { background-position:bottom; }	
.fx-sombra { 
	width:30%; height:30px; padding:0 20px 0 20px; display:block; 
	position:fixed; bottom:60px; left:35%; margin-left:-20px; z-index:101;
	background:url(images/fx-sombra.png) no-repeat; background-position:bottom; background-size:cover; }


/* ESTILOS PARA LA INFORMACIÓN PRINCIPAL
---------------------------------------------------------------------------------------------------------------------------*/
section { 
	width:40%; padding:20px 20px 100px 20px; margin:auto; background:rgba(255,255,255,0.8); position:relative; }
section h1 { font-size:34px; font-weight:normal; color:#F60; text-align:center; }
section p { font-size:18px; color:#666; text-align:center; margin-bottom:20px; }
section.inicio { background:rgba(255,153,51,0.8); }
.inicio h1 { color:#FFF; }
.inicio p { color:#FFF; }

/* ESTILOS PARA LOS FORMULARIOS DE REGISTRO
---------------------------------------------------------------------------------------------------------------------------*/
form { width:100%; position:relative; }
label { width:100%; display:block; padding:10px 0 0 0; font-size:18px; line-height:32px; color:#666; }
input, textarea, .slista { 
	width:92%; padding:20px 4% 10px 4%; margin-bottom:2px;
	background:rgba(255,255,255,0.75); border-radius:5px; border:0; 
	font-family: 'Open Sans', sans-serif; font-size:14px; height:32px; color:#999; }
textarea { height:auto; }
input:focus, textarea:focus { font-size:21px; height:50px; }
input[type=submit] { 
	width:100%; padding:0; background:#FBB03B; margin:10px 0 20px 0;
	font-size:14px; font-weight:normal; text-transform:uppercase; height:52px; color:#FFF; text-align:center; }	
input[type=submit]:hover { cursor:pointer; background:#F60; }	

.sltercio { 
	width:22%; padding:10px 4% 10px 4%; margin-bottom:10px; height:32px;
	background:#FFF; border-radius:5px; border:0; display:inline-block; vertical-align:bottom; }
.sltercioc { 
	width:22%; margin:0 5% 0 5%; padding:10px 4% 10px 4%; margin-bottom:10px; height:32px;
	background:#FFF; border-radius:5px; border:0; display:inline-block; vertical-align:bottom; }
select { 
	width:100%; background:transparent; -webkit-appearance:none; border:0;
	font-size:14px; font-weight:normal; line-height:32px; color:#333; }

	
/* ESTILOS PARA INPUTS ESPECIALES
---------------------------------------------------------------------------------------------------------------------------*/
input.tercio { width:22%; display:inline-block; }
input.ctercio { width:22%; margin:0 5% 0 5%; display:inline-block; vertical-align:bottom; }
input.tg, textarea.tg, select.tg { font-size:24px; text-align:center; }

input.azul { background:#09C; } input.azul:hover { background:#FBB03B; }
#buscar { 
	width:30px; height:30px; margin:0; position:absolute; top:10px; right:10px;
	background:url(images/btn-buscar.png) no-repeat; background-position:top; background-size:cover; }	
.iesp { width:100%; position:relative; } 
.iesp .precio { 
	width:10%; display:block; position:absolute; top:15px; left:0;
	font-size:32px; line-height:42px; text-transform:uppercase; text-align:right; color:#09C; font-weight:bold; }	
.iesp .titulo { 
	width:50%; display:block; position:absolute; top:10px; right:15px;
	font-size:10px; line-height:12px; text-transform:uppercase; text-align:right; color:#111; font-weight:bold; }

	
/* ESTILOS PARA EL FORMULARIO DE NUEVOS
---------------------------------------------------------------------------------------------------------------------------*/
.fnuevo { 
	width:100%; min-height:100%; position:absolute; top:1200px; left:0; display:none; opacity:0;
	background:rgba(240,240,240,0.9); z-index:60; }
.fnuevo h1 { 
	width:100%; font-size:24px; font-weight:normal; color:#09C; line-height:40px; text-align:center; text-transform:uppercase;
	background:#FFF; border-bottom:1px dotted #999; padding:20px 0 20px 0; margin-bottom:10px; }		
.datos { padding:20px; }	

#libre { display:none; }
#compralista { display:none; }



/* ESTILOS PARA BOTONES
---------------------------------------------------------------------------------------------------------------------------*/
.ebtn { 
	width:100%; display:block; margin-bottom:2px;
	font-size:14px; text-decoration:underline; color:#999; text-align:center; text-shadow:0 0 2px #FFF; }
.abtn { 
	width:100%; display:block; margin-bottom:2px;
	font-size:14px; text-decoration:underline; color:#333; text-align:center; text-shadow:0 0 2px #FFF; }
.ebtn:hover { color:#666; }
.abtn:hover { color:#FFF; text-shadow:0 0 2px #F60; }
.btnazul { 
	width:94%; display:block; padding:5px 3% 5px 3%; background:#09C; border-radius:5px; margin-bottom:5px; 
	font-size:18px; color:#FFF; line-height:42px; text-align:center; text-transform:uppercase; }
.btnazul:hover { background:#FBB03B; }	


::-webkit-input-placeholder { color:#999; }
::-moz-placeholder { color:#999; } 
:-ms-input-placeholder { color:#999; } 
input:-moz-placeholder { color:#999; }



/* ESTILOS PARA LAS LISTAS DE PRODUCTOS
---------------------------------------------------------------------------------------------------------------------------*/
.list { width:100%; }
.list li { width:100%; margin-bottom:2px; }
.list li a { 
	width:94%; display:block; padding:5px 3% 5px 3%; position:relative; background:#FFF;
	font-size:18px; color:#666; line-height:42px; }
.list li a:hover { color:#222; box-shadow:0 0 5px rgba(0,0,0,0.25); } 
.list li a span { 
	width:10%; display:inline-block; position:absolute; right:0;
	text-align:center; color:#DDD; font-weight:bold; }
.list li a:hover span { color:#333; }
.nuevo { 
	width:30%; height:70px; padding:5px 20px 25px 20px; 
	position:fixed; top:100px; left:35%; margin-left:-20px; }



/* ESTILOS PARA LAS LISTAS DE DESCRIPCIÓN
---------------------------------------------------------------------------------------------------------------------------*/
.desc { width:100%; font-weight:normal; margin-bottom:10px; position:relative; }
.desc li { 
	width:94%; min-height:32px; display:block; padding:20px 3% 5px 3%; position:relative; background:#FFF;
	font-size:18px; color:#666; line-height:22px; margin-bottom:2px; }
.desc li h2 { font-size:22px; color:#333; text-transform:uppercase; }
.desc li.text { padding:25px 3% 15px 3%; }
.desc li:last-child { margin-bottom:20px; }
.desc li .titulo { 
	width:50%; display:block; position:absolute; top:10px; right:15px;
	font-size:10px; line-height:12px; font-weight:bold;
	text-transform:uppercase; text-align:right; color:#111; }
.desc li .precio { 
	width:10%; display:block; position:absolute; top:5px; left:15px;
	font-size:32px; line-height:42px; text-transform:uppercase; text-align:left; color:#09C; font-weight:bold; }
.desc li.btn a { width:100%; display:block; text-align:center; color:#09C; text-transform:uppercase; }	
.desc li.btn a:hover { color:#FBB03B; }	

.desc li .vc { width:10%; text-align:center; display:inline-block; }
.desc li .vn { width:60%; text-align:left; display:inline-block; }
.desc li .vp { width:30%; text-align:center; display:inline-block; }

.pticket { width:100%; display:block; }
.pticket h1 { 
	width:100%; background:rgba(255,255,255,1); text-transform:uppercase; color:#09C; font-size:28px; font-weight:bold; }	
.pticket p { 
	width:100%; background:rgba(255,255,255,1); text-transform:uppercase; color:#09C; font-size:18px; }
	




/* ESTILOS PARA LAS LISTAS DEL TÍTULO DE LAS ESTADISTICAS
---------------------------------------------------------------------------------------------------------------------------*/
.estadisticas { width:100%; margin:0 0 20px 0; }
.estadisticas li { 
	width:15%; height:60px; display:inline-block; vertical-align:top; 
	line-height:60px; font-size:32px; text-align:center; }
.estadisticas .titulo { 
	width:100%; background:rgba(255,255,255,1); text-transform:uppercase; color:#09C; font-size:28px; font-weight:bold; }
.estadisticas .efecha { 
	width:70%; background:rgba(255,255,255,1); text-transform:uppercase; color:#09C; font-size:24px; font-weight:bold; }
.estadisticas li a { width:100%; display:block; background:rgba(255,255,255,0.7); color:#09C; font-weight:bold; }
.estadisticas li a:hover { background:rgba(255,255,255,1); }



/* ESTILOS PARA LAS NOTIFICACIONES Y TIPS
---------------------------------------------------------------------------------------------------------------------------*/
.notificaciones { 
	width:85%; padding:15px 5% 5px 5%; margin:10px auto 30px auto; position:relative; display:none; 
	background:rgba(0,153,204,0.8); border-radius:10px; font-size:16px; color:#FFF; text-align:left; line-height:20px; }
.notificaciones .accion { width:100%; margin-top:20px; padding-top:10px; border-top:1px dotted #FFF; text-align:center; }
.notificaciones .accion a { 
	width:48%; height:15px; display:inline-block; vertical-align:top;
	line-height:15px; text-align:center; font-size:12px; color:#FFF; text-transform:uppercase; }
.notificaciones .accion a:hover { color:#000; }



/* ESTILOS PARA LAS CAJAS CONTEXTUALES
---------------------------------------------------------------------------------------------------------------------------*/
.caja { 
	width:40%; height:100%; padding:0 20px 0 20px; position:fixed; bottom:0; left:30%; margin-left:-20px; 
	background:rgba(51,51,51,0.7); z-index:100; display:none; }
.caja .contexto { width:96%; position:absolute; bottom:-180px; left:2%; z-index:2; }	
.caja .contexto h3 { 
	width:90%; padding:0 5% 0 5%; background:#FFF; position:relative;
	font-size:18px; line-height:42px; font-weight:normal; text-align:center; }
.caja .contexto .opc { width:90%; padding:20px 5% 20px 5%; background:#CCC; }
.caja .cancelar { 
	width:100%; height:50px; display:block; background:#FFF; margin-top:5px;
	line-height:50px; text-align:center; text-transform:uppercase; color:#09C; }	
.caja .cancelar:hover { color:#FBB03B; }

.caja .cohete { 
	width:20%; height:200px; position:fixed; bottom:-300px; left:40%; z-index:1;
	background:url(images/cohete-00.png) no-repeat; background-position:top; background-size:contain;  }




/* ADAPTACIONES PARA DISPOSITIVOS MOVILES
---------------------------------------------------------------------------------------------------------------------------*/
@media only screen and (min-device-width : 320px) and (max-device-width : 750px)  {

header {
	width:100%; height:75px; padding:5px 0 25px 0; position:fixed; top:0; left:0; margin-left:0; z-index:50;
	background:#FFF; text-align:center; }


/* ESTILOS NAV
---------------------------------------------------------------------------------------------------------------------------*/
nav { 
	width:100%; height:60px; padding:10px 0 0 0; position:fixed; bottom:0; left:0; margin-left:0; 
	background:#FFF; border-top:1px solid #CCC; text-align:center; z-index:102; }


/* ESTILOS PARA LA INFORMACIÓN PRINCIPAL
---------------------------------------------------------------------------------------------------------------------------*/
section { 
	width:92%; padding:20px 4% 100px 4%; margin:auto; background:rgba(255,255,255,0.8); position:relative; }

/* ESTILOS PARA LAS CAJAS CONTEXTUALES
---------------------------------------------------------------------------------------------------------------------------*/
.caja { 
	width:100%; height:100%; padding:0 0 0 0; position:fixed; bottom:0; left:0; margin-left:0; 
	background:rgba(51,51,51,0.7); z-index:100; display:none; }

	
}