/*  
Theme Name: ESPARK
Theme URI: http://espark.com.gt
Description: Tema para el sitio web de espark
Version: 1.0
Author: Javier Castillo
Author URI: http://royalestudios.com/
*/

/*importacion de estilos 960 grid*/
@import url("css/reset.css");
@import url("css/960.css");
@import url("css/text.css");

/* ---------- @ HTML Elements Comunes -----------*/

body {	
	color:#333;
	background: #F2F2F2;
	overflow-x: hidden;
}

p {
	text-shadow: -1px 0px 0px rgba(0, 0, 0, 0.2);
}

#header{
	position:fixed;	
	width:100%;
	top: 0;
	z-index:1000;
}

.underline{
	padding-bottom:10px;
	border-bottom: 1px solid #9CBD3B;
}

#gallery {
	position:absolute;
}
	.bg_line{
		position:fixed;
		width:100%;
		height:100%;
		background: url(images/bg_line.png) repeat;
	}
	gallery-scroller{
	}
	a.scrollable-link{
		cursor: pointer;
		color: #9CBD3B;
		position:relative;
		z-index:1000;
	}
		a.disabled{opacity:0.4}
		
	.scrollable{
		position:relative;
		overflow:hidden;
		width:112px;
		height:246px;
	}
		.scrollable .items{
			position:absolute;
			height:20000px;
		}
	.items img{
		cursor: pointer;
		background:#000;
		padding:5px;
		width:100px;
		height:67px;
		margin-bottom:4px;
		border:1px solid #000;
	}
	/* when mouse enters the tab move the background image */
	.items img:hover {
		background:#333;
		border: 1px solid #9CBD3B;	
	}
	
	.scrollable .active{
		background: #333;
		cursor:default !important; 
		color:#000 !important;
		border: 1px solid #9CBD3B;
	}

		#gallery-pane {
			position:fixed;
			top:-50%;
			left:-50%;
			width:200%;
			height:200%;
		}
		
		#gallery-pane img {
			position:absolute;
			top:0;
			left:0;
			right:0;
			bottom:0;
			margin:auto;
			min-width:50%;
			min-height:50%;
			z-index:-1000;
		}	
	#image_wrap {
    /* dimensions */
		width:700px;
		padding:15px 0;
	
		/* centered */
		text-align:center;
	}
#content{
	width:100%;
	height: 1800px;
	overflow: hidden;
	position:relative;
}
	#section-container{
		width:16000px;
		position:relative;
	}
	#section-parallax{
		position: relative;
		top: 100px;
		left: 80px;
		display: block;
		z-index: 500;
	}
		.section{
			width: 2000px;
			margin-bottom:0px;
			float:left;
		}
			.section h3{
				font-size: 14px;
				color: #9CBD3B;
				font-style: italic;
				letter-spacing:-1px;
			}
			
			.section .entradilla, .section h4{
				margin-top:5px;
				font-size: 16px;
				font-style: italic;
			}
			
			.bg_dark{
				background:url(images/bg_dark.png) repeat;
			}
			
			.bg_white{
				background:url(images/bg_white.png) top left repeat-y;
			}
			
		#inicio{
			height: 1563px;
		}
			.inicio_introduccion{
				margin-top:170px;
			}
			.bg_inicio{
				height:1200px;
				background: url(images/bg_inicio.png) no-repeat;
			}
			/* trigger button */
			.tooltip_triggers{
				position:absolute;
				display:block;
				height:60px;
				width:60px;
				margin-bottom:30px;
				overflow:hidden;
				text-indent:-999em;
				cursor:pointer;				
			}
				.tooltip_triggers:hover {
					background-position:0 -65px ;		
				}
				.tooltip_triggers:focus {
					background-position:0 -88px;
				}
			.dispensadora-trigger {
				top:400px;
				left:850px;
				background:transparent url(images/icon_1.png) no-repeat scroll 0 0;
				z-index:1000;
			}
			.barrera-trigger {
				top:120px;
				left:680px;
				background:transparent url(images/icon_2.png) no-repeat scroll 0 0;
			}
			.estacion-trigger {
				top:40px;
				left:680px;
				background:transparent url(images/icon_2.png) no-repeat scroll 0 0;
				z-index:1000;
			}
			.validadora-trigger {
				top:200px;
				left:530px;
				background:transparent url(images/icon_3.png) no-repeat scroll 0 0;
			}
			.cobro-trigger {
				top:270px;
				left:650px;
				background:transparent url(images/icon_4.png) no-repeat scroll 0 0;
			}							
							
			.tooltip {
				display:none;
				background:url(images/black_arrow_big.png);
				height:163px;
				padding:30px 30px 10px 30px;
				width:310px;
				font-size:11px;
				color:#fff;
				z-index:2000;
			}
			.tooltip.bottom {
				background: url(images/black_arrow_big_bottom.png) no-repeat;
				padding-top:70px;
			}
			
			.tooltip .label {
				color:yellow;
				width:35px;
			}
			.tooltip a {
				color:#ad4;
				font-size:11px;
				font-weight:bold;
			}
			
			.tooltip_content{
				width: 180px;
				height: auto;
				float: left;
				margin-right:10px;
				color:#CCC;
			}
			.tooltip_content h3{
				margin-bottom:5px;
			}
			.tooltip_image{
				width:100px;
				float:left;
			}
			
		#dispensadora{
			padding-top:100px;
			padding-bottom:400px;
		}
			#dispensadora h2{
				color:#fff;
				margin-top:22px;
			}
			.bg_dispensadora{
				background: url(images/bg_dispensadora.png) no-repeat;
			}
			.dispensadora_frente{
				background:url(images/dispensadora_dimensiones.png) 0 50px no-repeat;
				padding:20px 0;
				color:#CCC;
			}
		#estacion{
			padding-top:100px;
		}
			#estacion h2{
				color:#fff;
			}
			.bg_estacion{
				background: url(images/bg_estacion.png) no-repeat;
			}
		#validadora{
			padding-top:100px;
		}
			#validadora h2{
				margin-top:22px;
				color:#fff;
			}
			.bg_validadora{
				background: url(images/bg_validadora.png) no-repeat;
			}
			.validadora_frente{
				background:url(images/dispensadora_dimensiones.png) 0 20px no-repeat;
				padding:20px 0;
				color:#CCC;
			}	
			.bg_validadora-bottom{
				margin:-30px 0 0 100px;
			}

		#sistema-cobro{
			padding-top:100px;
		}
			#sistema-cobro h2{
				color:#fff;
			}
			.bg_sistema-cobro{
				background: url(images/bg_sistema-cobro.png) no-repeat;
			}
			.validadora_frente{
				background:url(images/dispensadora_dimensiones.png) 0 20px no-repeat;
				padding:20px 0;
				color:#CCC;
			}
			.reportes{
				padding:20px 0;
				color:#CCC;
			}
			.bg_cobro-bottom{
				background: url(images/bg_sistema-cobro-bottom.gif) top right no-repeat;
				padding:0 0 500px 0;
			}
			
		#tabla-comparativa{
			padding-top:100px;
		}
			#tabla-comparativa h2{
				color:#fff;
			}
			.bg_tabla{
				background: url(images/bg_tabla.png) no-repeat;
			}			

			.aspectos{width: 940px; text-align: right; font-weight:bold; margin-bottom:10px;}
				.aspectos img{vertical-align: baseline; padding-left: 10px;}
				
			table,tr,td,th {		
				border-collapse:collapse;
				margin-bottom:60px;
			}
			table{
				border:1px solid #CCCCCC;
				font-size:10px;
			}
			
			td {padding: 5px 10px; border-right: 1px solid #CCCCCC; color:#6D9B26;}
			
			td.red{color: #C00;}
			
			.table_header{border-bottom:2px solid #cccccc; text-transform: uppercase; font-size: 12px; font-weight: bold;}
				.table_espark{font-size:14px; color: #B5D335;}
			.row_even{background-color: #E6E7E8;}

		#contacto{
			padding-top:100px;
		}
			#contacto h2{
				margin-top:22px;
				color:#fff;
			}
			.bg_contacto{
				background: url(images/bg_contactenos.png) no-repeat;
			}
			
			.tabs { 
				list-style:none; 
				margin:0 !important; 
				padding:0;
				height:30px;
				text-align:right;
				border-bottom: 1px solid #9CBD3B;
			}
			
			/* single tab */
			.tabs li { 
				display: inline-block;
				text-indent:0;
				padding:0;
				margin:0 !important;
				list-style-image:none !important; 
			}
			
			/* link inside the tab. uses a background image */
			.tabs a { 
				background: #000;
				font-size:11px;
				display:block;
				height: 30px;  
				line-height:30px;
				width: 111px;
				text-align:center;	
				text-decoration:none;
				color:#fff;
				padding:0px;
				margin:0px;	
				position:relative;
			}
			
			.tabs a:active {
				outline:none;	
			}
			
			/* when mouse enters the tab move the background image */
			.tabs a:hover {
				background:#CCC;
				color:#000;	
			}
			
			/* active tab uses a class name "current". it's highlight is also done by moving the background image. */
			.tabs .current, .tabs .current:hover, .tabs li.current a {
				background: #fff;
				cursor:default !important; 
				color:#000 !important;
				border-top: 1px solid #9CBD3B;
				border-left: 1px solid #9CBD3B;
				border-right: 1px solid #9CBD3B;
			}
			
			/* initially all panes are hidden */ 
			.panes{
				height:400px;
				position:relative;
				margin-bottom:200px;
			}
			
			.panes .pane {
				display:none;
				position: absolute;
				height:auto;
			}
			
	#galeria{
		padding-top:100px;
	}
			#galeria h2{
				margin-top:22px;
				color:#fff;
			}
ul.contact_info{
	list-style: none;
}

ul.contact_info li{
	margin: 0 0 20px 0;
	padding-bottom:20px;
	border-bottom: 1px solid #CCC;
}

/* --- Form--- */
.gform_body {}

ul.gform_fields{
	list-style: none;
}

li.gfield{
	margin-bottom:10px;
}

label.gfield_label{
	float:left;
	width:100px;
	text-align:right;
	margin-right: 10px;
	color: #4D4D4D;
	font-size: 14px;
	font-style:italic;
	font-weight: bold;
}

.medium{
	height: 30px;
	width:280px;
	border: 1px solid #B3B3B3;
}

	.medium:hover{
		border: 1px solid #9CBD3B;
	}
	
	.medium:focus{
		box-shadow: 0 0 5px #B5D335;
	}
	
	.textarea{
		height:100px;
	}
	
	.gfield_select{
		width:280px;
	}
	
.gform_footer{
	text-align:right;
}
	.gform_button{
		margin-right:100px;
		width:112px;
		height:32px;
		background:url(images/button_enviar.png) no-repeat;
		cursor: pointer;
		text-transform: uppercase;
		font-size:14px;
		font-weight:bold;
		font-style: italic;
		letter-spacing:-1px;
	}

/* --- Nav --- */			
#nav{
	background: url(images/bg_navigation.png) center top no-repeat;
	position:fixed;
	width:100%;
	height:240px;
	bottom:0;
	z-index:1000;
}
	.nav-content{
		width:960px;
		margin:20px auto;
	}
		.nav-content h3{
			position: relative;
			margin-bottom:20px;
			left: 100px;
			font-size: 16px;
			font-style:italic;
			color: #9CBD3B;
		}
		.nav-content a{
			font-size: 12px;
			color: #9CBD3B;
			font-style: italic;
			font-weight:bolder;
			letter-spacing:-1px;
			text-transform:uppercase;
		}		
	
	ul.productos{
		width:820px;
		list-style: none;
		float:left;
	}
	ul.productos li{
		float:left;
		margin-left:-79px;
	}
		ul.productos li.first{
			margin-left:15px;
		}
		ul.productos li img{
			margin-bottom:-10px;
		}
		ul.productos li p{
 			font-size:13px;
			font-weight: bold; 
			font-style: italic;
			text-shadow: none;
			margin-top:5px;
			letter-spacing: -1px;
		}
		
	ul.submenu{
		margin:18px 0 0 -50px;
		list-style: none;
		float:left;
	}

#footer{
	background:url(images/bg_footer.png) repeat-x;
	position: fixed;
	width:100%;
	height: 70px;
	background-color: #999;
	bottom:0;
	z-index:2000;
}

	.social{
		width: 600px;
		margin:25px 0 0 20px;
		float:left;
	}
		ul#share{
			list-style: none;
		}
		ul#share li{
			float: left;
			margin-left:0px;
		}
	.producto-eshop{
		margin:10px 20px 0 0;
		float:right;
	}
		.producto-eshop img{vertical-align:middle;}