/* ---------------------------------------------------------------------------------  
1. CONFIGURACION GENERAL
--------------------------------------------------------------------------------- */

	/* ---------------------------------------------------------------------------------  
	1.1 Configuracion HTML
	--------------------------------------------------------------------------------- */
	body { 
		margin: 0; 
		padding: 0; 
		font-family: Arial, Helvetica, sans-serif; 
		background-color:#343434; 
		
	}
	body, html {
		height: 100%; /* Hace que el contenido se pueda ajustar al ancho total del navegador */
	}
	h1 { /* Configuracion general de las h1 */
		font-size: 1.6em; 
		color: #746956; 
		font-weight: bold; 
		margin: 0; 
	}
	h1 a { /* Configuracion general de las h1 */
		color: #746956; 
		font-weight: bold; 
		margin: 0; 
	}
	h1 a:hover { /* Configuracion general de las h1 */
		color: #000; 
		font-weight: bold; 
		margin: 0; 
	}
	h2 { /* Configuracion general de las h2 */
		font-size: 0.8em; 
		margin: 0 0 0.3em 0; /* Tamaņo del margen superior e izquierdo, para que se pegue al parrafo superior */
		color: #312d25; 
		font-weight: normal; 
	}
	h3 { /* Configuracion general de las h3 */
		font-size: 0.85em; 
		font-weight: bold; 
		color: #3873b6; 
		margin: 0 0 0.4em 0;  /* Tamaņo del margen superior e izquierdo, para que se pegue al parrafo superior */
	}
	h4 { /* Configuracion general de las h4 */
		font-size: 0.85em; 
		font-weight: normal; 
		color: #312d25; 
	}
	p {  /*Configuracion general de los parrafos */
		font-size: 0.7em; 
		color: #716654; 
		line-height: 1.4em; 
		margin: 0 0 1.2em 0;  /* Tamaņo del margen superior e izquierdo, para que se pegue al parrafo superior */
	}
	p a {  /*Configuracion general de los parrafos */
		text-decoration:none;
		color: #716654; 
	}
	a img { 
		border: none; /* Hace que las imagenes con links, no tengan borde */
	}
	a { 
		text-decoration: none; /* Hace que los links no se subrayen */
	}

	/* ---------------------------------------------------------------------------------  
	1.2 Estilos
	--------------------------------------------------------------------------------- */
	.puntos { /* Para las lineas horizontales de puntos */
		height:5px; 
		top: 0px; 
		background:url(images/punto.gif) repeat-x; 
		float:none  
	}
	div.clear { /* Para los divs que limpian los float de los otros divs, y arrastran los contenidos */
		clear: both;
	}

	/* ---------------------------------------------------------------------------------  
	1.3 Contenedor contenidos
	--------------------------------------------------------------------------------- */
	#layout { /* Capa general, al 100% que contiene todo */
		width: 100%; 
		height:100%; 
		top: 0px;
	}
	
#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

/* ---------------------------------------------------------------------------------  
2. CABECERA
--------------------------------------------------------------------------------- */
#cabecera-wrap { /* Estructura cabecera general */
	min-width: 950px; /* Tamaņo minimo de la cabecera */ 
	width: 100%; /* Ancho al 100% */
	position: relative; /* Se desplaza con los scroll horizontales */
	background:url(images/cabecera_bg.jpg) repeat-x; /* Fondo gris sombreado */
}
#cabecera { /* Contenidos cabecera */
	width:950px; /* Ancho cabecera, igual que la imagen */
	height:133px; /* Alto de la cabecera, como la imagen */
	/* Estas tres lineas para alinear al centro de la pagina los contenidos de la cabecera */
	position: relative;
	left: 50%;
	margin-left: -475px; 
	/* ---------- */
	background:url(images/cabecera.jpg) center top no-repeat; /* imagen cabecera */
}
#cabecera_links {  
     list-style: none;  
     padding: 0; 
	 margin: 5px 0 0 0;
	 width:60px; 
	 margin-left: 580px; 
	position: absolute;

 }  
#cabecera_links li{     
    overflow: hidden;  
    padding: 0;  
    cursor: pointer;  
	float: left;
	width: 30px;
	
}
#cabecera_links a{
	display:block;
	height:30px;
	text-indent:-9999px;
	outline:none;
}

#cabecera_links1 {
	background:url(images/home_icon.jpg) center top no-repeat; /* imagen cabecera */
}
#cabecera_links2 {
	background:url(images/contact_icon.jpg) center top no-repeat; /* imagen cabecera */
}



/* ---------------------------------------------------------------------------------  
3. CONTENIDOS
--------------------------------------------------------------------------------- */
#content-wrap { /* Estrucutra contenidos general */
min-width: 950px; /* Tamaņo minimo de los contenidos */
top:133; /* Distancia superior, igual que el alto de la cabecera */
width: 100%; /* Ancho al 100% */
background: url(images/central_bg.jpg) center; /* Fondo contenidos */
}

#content { /* Contenidos */
width: 950px; /* Ancho */
margin: 0 auto;  /* Margen al 0 */
}

	/* ---------------------------------------------------------------------------------  
	3.1 Menu izquierda
	--------------------------------------------------------------------------------- */
	#left { 
		width: 250px; /* Ancho del menu */
		height:540px;
		float: left; /* Alineado a la izquierda */
		background: url(images/left_bg.jpg) center top no-repeat; /* Fondo */
		min-height:540px;
	}
	#left ul { /* Estilo del menu */
		margin: 0; 
		padding: 0; 
		float: left; /* Alinear elementos a la izquierda */
		padding-left: 30px; /* Margen izquierdo */
		font-size: 1em;  
		color: #000; 
		text-decoration: none; 
		font-weight:bold; 
		margin-bottom:10px; /* Margen inferior, para la siguiente familia de productos */
	}
	#left ul li { /* Estilo de los elementos del menu */
		list-style-type: none; /* Listtado sin numerar */
		font-size: 0.75em;  
		float: left; /* Elementos alineados a la izquierda */
		padding-left: 10px; /* Margen izquierdo de los elementos del listado */
		text-decoration: none; 
		display: block; /* Elementos mostrados como bloques */
		width: 180px; /* Ancho del bloque */
		background: url(images/punto.gif) repeat-x bottom; /* Fondo del bloque (linea de puntos) */
	}
	#left ul li a { 
		color: #837054; 
		text-decoration: none; 
	}
	#left ul li a:hover { 
		color: #000; 
		text-decoration: none; 
	}
	form#busqueda {
		width:160px; 
		margin:0;
		font-family:Arial, Helvetica, sans-serif;
		font-size: 0.75em; 
		float:left;
		display:block;
		text-align:left;
		font-weight: bold; 
		color:#990000
	}
	form#busqueda label {
		clear:left; 
		float:left; 
		width:30px; 
		text-align:left; 
		color:#888; 
		padding-right:5px;
	}
	form#busqueda input {
		float:left; 
		border:1px solid #cfcfcf; 
		font-family:Arial, Helvetica, sans-serif;
		font-size: 0.75em;
		width:120px;
	}
	form#busqueda #button1 {
		margin:10px 0px;
		float:right;
		cursor:pointer; 
		width:65px;
		font-family:Arial, Helvetica, sans-serif;
		font-size: 1.1em;
	}



	/* ---------------------------------------------------------------------------------  
	3.2 Contenidos
	--------------------------------------------------------------------------------- */
		/* ---------------------------------------------------------------------------------  
		3.2.1 Decoracion superior
		--------------------------------------------------------------------------------- */
		#decoracion_tabla { /* Decoracion superior de los contenidos */
			width: 700px; /* Ancho de la tabla */
			float: left; /* Alineado a la izquierda */
			background: url(images/doblecolumna_bg.jpg) no-repeat; /* Fondo */
			height: 32px; /* Alto de la tabla, como la imagen de fondo */
			
		}
		/* ---------------------------------------------------------------------------------  
		3.2.2 Contenidos
		--------------------------------------------------------------------------------- */
		#right { 
			width: 700px; /* Ancho de los contenidos */
			float: left; /* Alineado a la izquierda */
		}
			/* ---------------------------------------------------------------------------------  
			3.2.2.1 Central
			--------------------------------------------------------------------------------- */
			#contenidos {
				padding: 0 0 0 15px;/* Margenes verticales y horizontales */
				float: left; /* Alineado a la izquierda */
				width: 490px; /* Ancho de la central */
			}
			#contenidos_displays {
				padding: 0 0 0 5px;/* Margenes verticales y horizontales */
				margin:-3px 0 0 10px;
				float: left; /* Alineado a la izquierda */
				background-color:#FFF;
			}
			#contenidos_displays img {
				margin-bottom:20px;
			}
			#cat_descripcion {
				width: 100%; /* Ancho de la central */	
				float: left; /* Alineado a la izquierda */
				padding: 0 0 0 5px;/* Margenes verticales y horizontales */
			}
			#portaprecios2  { /* Estilo del menu */
				height:281px;
				
			}
			#displays  { /* Estilo del menu */
				height:250px;
				
			}
			#displays,
			#portaprecios  { /* Estilo del menu */
				margin: 0; 
				margin:5px 5px;
				float: left; /* Alinear elementos a la izquierda */
				width:230px;
				text-align:center;
				
			}
			#descripcion_portaprecios  {
				height:81px
			}
			#descripcion_displays  {
				height:110px
			}
			#descripcion_portaprecios,
			#descripcion_displays  { /* Estilo del menu */
				padding: 10px; 
				font-size: 1em;  
				color: #ff9900; 
				text-decoration: none; 
				font-weight:bold;
				text-align:center;;
				overflow:auto;
				overflow-x: hidden;
				background-color:#ECECEC;
				scrollbar-face-color: #ECECEC;
				scrollbar-shadow-color: #ECECEC;
				scrollbar-highlight-color: #ECECEC;
				scrollbar-3dlight-color: #ECECEC;
				scrollbar-darkshadow-color: #ECECEC;
				border:dotted;
				border-width:1px;
				border-color:#333333;
				 
			}
			
			#descripcion_portaprecios,
			#descripcion_displays h1 { /* Estilo del menu */
				font-size: 1em; 
				color: #000; 
				font-weight: bold; 
				margin: 0;
			}
			#descripcion_portaprecios, 
			#descripcion_displays h2 { /* Estilo del menu */
				font-size: 0.7em; 
				color: #666666; 
				margin: 0;
			}
			#descripcion_portaprecios h3 { /* Estilo del menu */
				font-size: 1.2em; 
				font-weight: bold; 
				color: #3873b6; 
				margin: 0 0 0.4em 0;  /* Tamaņo del margen superior e izquierdo, para que se pegue al parrafo superior */
			}
			#hacer_pedido {
				float: left; /* Alinearlo izquierda */
				position: absolute; 
				margin-top: -10px;
				margin-left: -10px;
			}

			#listado_imagenes {
				width:492px;
				padding:4px;
				text-align:left;
				margin-top: 20px;
				float: left; 
			}
			#listado_imagenes img {
				margin: 5px;
				height: 73px;
				border:solid;
				border-width:1px;
				border-color:#999999;
				padding:5px;
			}
			.fotos1 {
				background-color:#FCBAA0;
				padding: 4px;
			}
			.fotos_listado1 {
				background-color:#FCBAA0;
				padding: 2px; 
			}
			.fotos2 {
				background-color:#B8E1B5;
				padding: 4px;
			}
			.fotos_listado2 {
				background-color:#B8E1B5;
				padding: 2px; 
			}
			.fotos3 {
				background-color:#D9AA7E;
				padding: 4px;
			}
			.fotos_listado3 {
				background-color:#D9AA7E;
				padding: 2px; 
			}
			.fotos4 {
				background-color:#C3D4E4;
				padding: 4px;
			}
			.fotos_listado4 {
				background-color:#C3D4E4;
				padding: 2px; 
			}
			
			#pedidos {
				width:280px; 
			}
			#pedidos p {
				font-family:Arial, Helvetica, sans-serif;
				font-size: 0.7em;
				font-weight: bold;  
				color: #333; 
				text-align:left;
			}
			#pedidos h1 {
				font-size: 1em;
				color:#0099FF;
				font-weight: bold; 
				margin: 0
			}
			#pedidos label {
				font-size: 0.7em;
				clear:left; 
				float:left; 
				width:70px; 
				text-align:right; 
				color:#000; 
				padding-right:5px;
				margin: 2px;
			}
			#pedidos input,
			#pedidos select {
				float:left; 
				border:1px solid #cfcfcf; 
				font-family:Arial, Helvetica, sans-serif;
				font-size: 0.75em;
				width:180px;
				margin: 2px;
			}
			#pedidos textarea {
				float:left; 
				border:1px solid #cfcfcf; 
				font-family:Arial, Helvetica, sans-serif;
				font-size: 0.75em;
				width:265px;
				height:100px;
				border:1px solid #cfcfcf; 
			}
			#pedidos #button1 {
				float:right;
				cursor:pointer; 
				width:65px;
				font-family:Arial, Helvetica, sans-serif;
				font-size: 1.1em;
			}
			#pedidos img {
				margin-right: 5px;	
			}
	
			#la_empresa {
				float:left;
				width: 490px; 
				background: url(images/empresa_bg.jpg) no-repeat left top; /* Fondo */	
			}
			#la_empresa h1 {
				width:290px;
				float:right;
				font-size: 0.7em; 
				color: #716654; 
				line-height: 1.4em; 
				margin: 0 0 1.2em 0;
			}
			form#contactar {
				width:300px; 
				margin:10px 0px;
				font-family:Arial, Helvetica, sans-serif;
				font-size: 0.75em; 
				float:left;
				display:block;
				text-align:center;
				font-weight: bold; 
				color:#990000
			}
			form#contactar label {
				clear:left; 
				float:left; 
				width:80px; 
				text-align:right; 
				color:#888; 
				padding-right:5px;
			}
			form#contactar input  {
				float:left; 
				border:1px solid #cfcfcf; 
				font-family:Arial, Helvetica, sans-serif;
				font-size: 0.75em;
				width:180px;
				margin: 2px;
			}
			form#contactar textarea {
				float:left; 
				border:1px solid #cfcfcf; 
				font-family:Arial, Helvetica, sans-serif;
				font-size: 0.75em;
				width:180px;
				height:100px;
				border:1px solid #cfcfcf; 
			}
			form#contactar #button1 {
				margin:10px 85px;
				float:left;
				cursor:pointer; 
				width:65px;
				font-family:Arial, Helvetica, sans-serif;
				font-size: 1.1em;
		}
			
			/* ---------------------------------------------------------------------------------  
			3.2.2.2 Columna derecha
			--------------------------------------------------------------------------------- */
			#columna { /* Columna derecha */
 				width: 165px; /* Ancho de la columna */
 				float: right; /* Alineado derecha */
				text-align:center; /* Contenidos al centro */
			}
			#columna img { 
				margin-bottom:10px; /* Margenes inferiores de las imagenes */
			}
	/* ---------------------------------------------------------------------------------  
	3.3 PIE
	--------------------------------------------------------------------------------- */
	#footer-wrap { /* Estrucutra del pie */
		height: 105px; /* Alto imagen */
		background: url(images/pie_bg.jpg) repeat-x 0 0 #343434; /* Fondo */
		float: left; 
		width: 100%; 
		position: absolute; /* Permite su desplazamiento */
	}

	#footer { /* Contenidos */
		width: 950px; /* Ancho del contenido */
		margin: 0 auto; 
	}

		/* ---------------------------------------------------------------------------------  
		3.3.1 Decoracion botes
		--------------------------------------------------------------------------------- */
		#shells {
			background: url(images/pie_deco.jpg) no-repeat 0 0; /* imagen */
			width: 248px;
			height: 190px;
			float: left; /* Alinearlo izquierda */
			margin-top: -81px; /* Para que coincida con el fondo */
			position: absolute; 
		}
		/* ---------------------------------------------------------------------------------  
		3.3.2 Iberpixel
		--------------------------------------------------------------------------------- */
		#iberpixel { /* logo iberpixel */
			margin-top: 10px; /* Margen superior */
			position: relative; 
			float: right; /* Para alinearlo a la derecha */
		}
		#iberpixel a { /* Estilo del texto */
			color: #fff; 
			text-decoration: none;
			font-size: 0.7em;
		}
		/* ---------------------------------------------------------------------------------  
		3.3.3 Telefonos
		--------------------------------------------------------------------------------- */
		#contact {
			width:250px;
			margin: -75px 0 0 700px; /* margen superior */
			position: absolute;
			text-align:right;
		}
		#contact h3 { /* Estilo del h1 */
			float:right;
			color: #999999; 
 			font-family: Impact, Arial, Verdana; 
 			text-transform: uppercase; /* Lo pasa a mayusculas todo */
 			font-size: 1.8em; 
 			line-height: 0.9; /* interlineado */
			width:175px;
			cursor:pointer;
		}
		#contact a {
			text-decoration: none;
			color:#000000;
		}