/* 
	Author: colo.mateu@gmail.com
	Fecha: 30/07/2008.
	Modificado: 17/09/2008.
*/

/* Basicos */
*{
margin: 0;
padding: 0;
}
body, html{
width: 100%;
height: 100%;
cursor: default;
font-family: "Arial", sans-serif;
/*font-family: "Times", serif;*/
background: #fff;
}
hr{display: none;}
a{cursor: pointer;}
a:active{outline: 0;}
a img{border: none;}
label{cursor: pointer;}
abbr, acronym{cursor: help; border: none;}

/* Genericas */
.deco{
clear: both;
height: 60px;
background: url('../images/decoration.png') no-repeat center center;
}
#header p,
#skip{
position: absolute;
top: -999px;
}
/* Estructura */
#container{
width: 892px;
min-height: 100%;
margin: 0 auto 0 auto;
background: url('../images/bg_container.jpg') repeat-x left top #d8e0b8;
}
#header{
height: 171px;
background: url('../images/header.jpg') no-repeat left bottom;
}
	#header h1{
	position: absolute;
	top: -999px;
	}
	#header ul{
	list-style: none;
	padding: 10px 0 0 155px;
	}
		#header ul li{
		float: left;
		}
			#header ul li a{
			display: block;
			height: 25px;
			color: #fff;
			font-size: 0.5em;
			text-indent: -999px;
			}
			#header ul #b1 a{width: 88px; background: url('../images/b1.png') no-repeat left bottom;}
			#header ul #b2 a{width: 96px; background: url('../images/b2.png') no-repeat left bottom;}
			#header ul #b3 a{width: 94px; background: url('../images/b3.png') no-repeat left bottom;}
			
			#header ul li a:hover,
			#header ul li a:focus{
			background-position: left top !important;
			}
			
#content{
padding: 20px 40px 0 40px;
}
	#s1 #content h2,
	#s2 #lateral h2,
	#s3 #content h2{
	height: 50px;
	color: #fff;
	font-size: 0.5em;
	text-indent: -999px;
	}
	#s1 #content h2{background: url('../images/t_nosotros.png') no-repeat left top;}
	#s3 #content h2{background: url('../images/t_contacto.png') no-repeat left top;}
	
	#content p{
	color: #3e4c12;
	font-size: 0.85em;
	padding: 0 0 5px 0;
	}
	
	#content .intro{
	list-style: none;
	height: 144px;
	padding: 0 0 0 50px;
	}
		#content .intro li{
		float: left;
		padding: 0 0 0 25px;
		}
			#content .intro li a{
			display: block;
			height: 144px;
			width: 201px;
			color: #fff;
			font-size: 0.5em;
			text-indent: -9999px;
			}
			#content .intro .productos a{background: url('../images/b_productos.png') no-repeat left top;}				
			#content .intro .trabajos a{background: url('../images/b_trabajos.png') no-repeat left top;}
			#content .intro .contacto a{background: url('../images/b_contacto.png') no-repeat left top;}
			
				#content .intro li a:hover,
				#content .intro li a:focus{background-position: left bottom;}
			
			#s1 #b1 a{background: url('../images/b1.png') no-repeat left top !important;}
			#s2 #b2 a{background: url('../images/b2.png') no-repeat left top !important;}
			#s3 #b3 a{background: url('../images/b3.png') no-repeat left top !important;}
			

/* Seccion Productos */
#s2 #content{
padding: 10px 15px 0 15px;
}
#s2 #content #info{
float: right;
width: 615px;
padding: 0 15px 0 0;
}
#s2 #content #info .error a{
color: #cc0000;
}
	#s2 #content #info h2{
	color: #68782f;
	font-size: 0.7em;
	padding: 5px 0 0 0;
	text-align: right;
	text-transform: uppercase;
	}
		
	#s2 #productos{
	list-style: none;
	}
		#s2 #productos li{
		float: left;
		width: 185px;
		height: 231px;
		margin: 10px 0 0 15px;
		padding: 20px 0 0 0;
		background: url('../images/bg_box.png') no-repeat left top;
		}
			#s2 #productos li .img{
			width: 149px;
			height: 113px;
			margin: 0 auto 0 auto;
			padding: 10px 0 0 10px;
			background: url('../images/bg_img.png') no-repeat left top;
			}
				#s2 #productos li .img img{
				width: 139px;
				height: 103px;
				}				
			
			#s2 #productos li .precio{
			width: 133px;
			height: 19px;
			color: #1b2c16;
			font-weight: bold;
			margin: 8px auto 0 auto;
			padding: 3px 0 0 8px;
			background: url('../images/bg_precio.png') no-repeat left top;
			}
			#s2 #productos li ul{
			list-style: none;
			padding: 0 0 0 24px;
			}			
				#s2 #productos li ul li{
				float: left;
				width: auto;
				height: auto;
				margin: 0;
				padding: 7px 1px 0 1px;
				background: none;
				}
					#s2 #productos li ul li a{
					display: block;
					width: 66px;
					height: 22px;
					color: #fff;
					font-size: 0.5em;
					text-indent: -9999px;
					}
					#s2 #productos li ul .comprar a{background: url('../images/b_comprar.png') no-repeat left top;}
					#s2 #productos li ul .ampliar a{background: url('../images/b_ampliar.png') no-repeat left top;}
			
			#s2 #productos li .id{
			clear: both;
			font-size: 0.75em;
			padding: 7px 0 0 0;
			text-align: center;
			}
		
#s2 #content #lateral{
float: left;
width: 206px;
padding: 0 0 15px 0;
background: #ecede8;
}
	#s2 #content #lateral h2{
	height: 53px;
	background: url('../images/t_categorias.png') no-repeat left top #fff;;
	}
	#s2 #trabajos{
	padding: 10px 0 0 4px;
	}
		#s2 #trabajos a{
		display: block;
		height: 144px;
		width: 201px;
		color: #fff;
		font-size: 0.5em;
		text-indent: -9999px;
		background: url('../images/b_trabajos.png') no-repeat left top;
		}
			#s2 #trabajos a:hover,
			#s2 #trabajos a:focus{
			background-position: left bottom;
			}
		
	#s2 #content #lateral ul{
	list-style: none;
	}
		#s2 #content #lateral ul li{
		padding: 0 0 2px 0;
		background: url('../images/bg_sombra.png') no-repeat center bottom;
		}
			#s2 #content #lateral ul li h3{
			padding: 0 0 0 20px;
			}
				#s2 #content #lateral ul li h3 a{
				display: block;
				height: 26px;
				color: #fff;
				font-size: 0.5em;
				text-indent: -999px;
				}
				#s2 #content #lateral ul #propuesta h3 a{background: url('../images/c_propuesta.png') no-repeat left top;}
				#s2 #content #lateral ul #espejos h3 a{background: url('../images/c_espejos.png') no-repeat left top;}
				#s2 #content #lateral ul #bandejas h3 a{background: url('../images/c_bandejas.png') no-repeat left top;}
				#s2 #content #lateral ul #muebles h3 a{background: url('../images/c_muebles.png') no-repeat left top;}
				#s2 #content #lateral ul #cajas h3 a{background: url('../images/c_cajas.png') no-repeat left top;}
				#s2 #content #lateral ul #indumentaria h3 a{background: url('../images/c_indumentaria.png') no-repeat left top;}
				#s2 #content #lateral ul #regalos h3 a{background: url('../images/c_regalos.png') no-repeat left top;}
					
					#s2 #content #lateral ul li ul li{
					padding: 0 0 2px 35px;
					}
						#s2 #content #lateral ul li ul li a{
						display: block;
						height: 24px;
						color: #fff;
						font-size: 0.5em;
						text-indent: -999px;
						}
						
						/* Muebles */
						#s2 #content #lateral #muebles .sub1 a{
						background: url('../images/sub_mesas.png') no-repeat left top;
						}
						#s2 #content #lateral #muebles .sub2 a{
						background: url('../images/sub_sillas.png') no-repeat left top;
						}
						#s2 #content #lateral #muebles .sub2{background: #ecede8;}
						
						/* Cajas */
						#s2 #content #lateral #cajas .sub1 a{
						background: url('../images/sub_alajeros.png') no-repeat left top;
						}
						#s2 #content #lateral #cajas .sub2 a{
						background: url('../images/sub_carameleras.png') no-repeat left top;
						}
						#s2 #content #lateral #cajas .sub3 a{
						background: url('../images/sub_portacosmeticos.png') no-repeat left top;
						}
						#s2 #content #lateral #cajas .sub4 a{
						background: url('../images/sub_portacosturero.png') no-repeat left top;
						}
						#s2 #content #lateral #cajas .sub4{background: #ecede8;}
						
/* Detalle Productos */
#volver{
text-align: right;
padding: 0 15px 0 0 !important;
}
	#volver a{
	color: #5a6b26;
	font-size: 0.7em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 10px;
	}
		#volver a:hover,
		#volver a:focus{
		color: #000;
		}
	
#imagen{
padding: 18px 0 0 0;
background: url('../images/bg_detalle_top.png') no-repeat left top;
}
	#imagen img{
	max-width: 391px;
	}
	#imagen div{
	width: 427px;
	margin: 0 auto 0 auto;
	}
	#imagen .top{
	height: 18px;
	background: url('../images/bg_img_top.png') no-repeat left top;
	}
	#imagen .mid{
	text-align: center;
	background: url('../images/bg_img_mid.png') repeat-y left top;
	}
	#imagen .bot{
	height: 14px; /* la puta etiqueta <img /> agrega 4px de "padding??". Núnca supe porque... */
	background: url('../images/bg_img_bot.png') no-repeat left bottom;
	}
	
#desc{
padding: 10px 0 18px 0;
background: url('../images/bg_detalle_bot.png') no-repeat left bottom;
}
	#desc table{
	width: 400px;
	margin: 0 auto 0 auto;
	border-spacing: 0;
	border-collapse: collapse;
	}
		#desc table td{
		vertical-align: top;
		}
		
	#desc p{
	font-size: 0.7em;
	}
		#desc p em{
		color: #131313;
		font-style: normal;
		}
		#desc p strong{
		padding: 0 4px 0 0;
		}
		
		#desc .colores{
		background: url('../images/paletacolores.png') no-repeat 56px top;
		}
			#desc .colores em{
			display: none;
			}
			
		#desc .codigo{
		color: #878787;
		text-align: left;
		padding: 0 0 0 5px;
		}
			#desc .codigo em{
			color: #878787;
			}
			#desc .codigo strong{
			font-weight: normal;
			}
			
		#desc .comprar{
		}
			#desc .comprar a{
			display: block;
			width: 84px;
			height: 40px;
			color: #fff;
			font-size: 0.5em;
			text-indent: -9999px;
			background: url('../images/b_comprar2.png') no-repeat left top;
			}
			
			
/* Sección Contacto */
#s3 #content form{
padding: 20px 0 0 0;
}
	#s3 #content form fieldset{
	width: 250px;
	float: left;
	border: none;
	padding: 0 0 0 70px;
	}
		#s3 #content form fieldset legend{
		display: none;
		}
		#s3 #content form fieldset label input{
		width: 250px;
		}
		#s3 #content form fieldset label textarea{
		width: 345px;
		}
		
	#s3 #content form .enviar{
	text-align: right;
	}
	#s3 #content form .enviar input{
	border: none;
	}
		#s3 #content form .enviar input:hover,
		#s3 #content form .enviar input:focus{
		background-position: right top;
		}

#s3 #content table{
border-spacing: 0;
border-collapse: collapse;
margin: 0 auto 0 auto;
}
	#s3 #content table td{
	color: #6e7f36;
	padding: 0 10px 5px 0;
	}
	#s3 #content table h3{
	text-align: right;
	}
	#s3 #content table em{
	font-style: normal;
	}

	
.end{
clear: both;
height: 60px;
}
#footer{
width: 892px;
height: 30px;
margin: -42px auto 0 auto;
background: #ecede8;
border-top: 2px solid #fff;
border-bottom: 10px solid #fff;
}
	#footer p{
	color: #666;
	font-size: 0.75em;
	text-align: center;
	padding: 6px 0 0 0;
	}
		#footer p a{
		color: #738c27;
		text-decoration: none;
		}
			#footer p a:hover,
			#footer p a:focus{
			text-decoration: underline;
			}