/*#############################################################
Name: Beautiful Day
Date: 2006-11-12
Description: A soft and bright two-column template.
Author: Viktor Persson
URL: http://templates.arcsin.se

Feel free to use and modify but please provide credits.
#############################################################*/

/* standard elements */
html {min-height: 100%;}

* {
	margin: 0;
	padding: 0;
}

a {color: #963;}
a:hover {color: #C60;}

body {
	background:#663399  url(img/piezas.gif) fixed left top;/*#FC0##333*/
	color: #444;
	font: normal 62.5% "Trebuchet MS", Arial, Helvetica, sans-serif;
}

p,code,ul {padding-bottom: 1.2em;}

li {list-style: none;}

h1 {
	font: bold 1.8em  "Trebuchet MS", Arial, Helvetica, sans-serif;
	color:#F63;
	margin-bottom: 4px;
	letter-spacing:0px;
}
h2 {
	font: bold 1.1em "Trebuchet MS", Arial, Helvetica, sans-serif;
	color:#666;
	margin-bottom: 9px;
	letter-spacing:2px;
}
code {
	background: #FFF;
	border: 1px solid #EEE;
	border-left: 6px solid #C1CAD3;
	color: #666;
	display: block;
	font: normal 1em Tahoma,sans-serif;
	line-height: 1.6em;
	margin-bottom: 12px;
	padding: 8px 10px;
	white-space: pre;
}

blockquote {
	background: url(img/quote.gif) no-repeat;
	display: block;
	font-weight: bold;
	padding-left: 28px;
	font-style:italic;
	font-weight:bold; 
	color:#333;
}

h1,h2,h3 {padding-top: 6px;}

/* misc */
.clearer {clear: both;}

.left {float: left;}

.right {float: right;}

/* structure */
.container {
	background:#663399/*#FC0#333*/;
	font-size: 1.2em;
	margin: 0 auto;
	padding: 0 10px 10px;
	width: 955px/*780px*/;
}

/* header */
.top {
	background: url(img/clouds2.gif) repeat-x;
	padding: 0px 10px 0;
}

/* title */
.header {
	background:#663399/*#FC0 #333*/;
	font-size: 1.2em;
	height: 120px;
	margin: 0 auto;
	padding: 10px 10px 1px;
	width:  955px/*780px*/;
}
.header .left, .header .right {
	background: #FFF;
	color: #FFF;
	height: 120px;	
}
img{border:none;}
.header .left {
	/*background: #B3C2C7 url(img/header.jpg) no-repeat;*/
	font: normal 2.8em "Trebuchet MS",sans-serif;
	/*line-height: 150px;*/
	width: 333px /*564px*/;
}
.header .right {
	overflow:hidden;
	width: 622px;
	text-align:right;
}
.header .right p,.header .right h2 {padding: 0 16px;}
.header .right h2 {padding-top: 16px; font: normal 1.6em "Trebuchet MS",sans-serif;}

/* navigation */
.navigation {	
	background: #D9E1E5 url(img/nav.gif);
	border-top:1px solid #FFDF62;
	/*border: 1px solid #F63; #DFEEF7*/
	/*border-color: #333 #333 #DFEEF7 #CFDEE7;*/
	height: 30px;
}
.navigation a {
	background: #D9E1E5 url(img/nav.gif);
	border-right: 1px solid #E2B600 ;/*#AFBEC7*/
	color: #000;
	display: block;
	float: left;
	font: bold 1.1em sans-serif;
	line-height:30px /*41px*/;
	padding: 0 20px;
	text-decoration: none;
}
.navigation a:hover {background-position: left bottom; color: #333;}

/* main */
.main {
	margin-top:1px;
	border-top: 4px solid #FFF;
	background: #FFF /*url(img/bgmain.gif) repeat-y*/;
}

/* sub navigation */
.sidenav {
	float: left;
	width: 210px;
	margin-top:20px;
}
.sidenav h2 {
	color: #FFF;
	background: #999 /*url(img/nav.gif) repeat-x left bottom*/;
	border-bottom: 1px dotted #333;
	font-size: 1em;
	line-height: 25px;
	margin: 0;
	padding-left: 12px;
}
.sidenav ul {
	padding: 0 0 0 10px;
	border-top: 1px solid #EAEADA;
}
.sidenav li {border-bottom: 1px solid #EAEADA; background-image:url(img/liP.gif); background-repeat:no-repeat; background-position:0% 40%}
.sidenav li a {
	font-size: 1.1em;
	color: #554;
	display: block;
	padding: 3px 0 3px 15px;
	text-decoration: none;
	width: 92.5%;
}
.sidenav li a:hover {
	background: #F0F0EB;
	background-image:url(img/liP.gif); background-repeat:no-repeat; background-position:0% 50%;
	color: #F63;
}

/* content */
.content {
	float: right;
	margin: 10px 0;
	padding: 0 20px;
	width: 698px /*531px*/;
}
.content .descr {
	color: #664;
	font-size: 0.9em;
	margin-bottom: 6px;
}
.content li {
	/*list-style: url(img/li.gif);
	margin-left: 18px;*/
}
.content p {
	font-family: "Lucida Sans Unicode",sans-serif;
	/*font-weight: bold;*/
}

/* footer */
.footer {
	background: url(img/bgfooter.gif) repeat-x;
	color: #FFF;
	font: bold 1em sans-serif;
	padding:10px;
	text-align: center;
}
.footer a,.footer a:hover {color: #FFF;}

.cajaIzquierda {float:left; margin: 0 20px 20px 0; width:210px;}
.cajaIzquierdaOpciones {float:left; margin: 0 20px 20px 0; width:208px;}
.comprar{float:right; margin: 0;padding:0 10px 0 0; cursor:pointer}
.clear{clear:both; float:none;}
.pasos{ background-image:url(imagenes/pasos.gif); background-repeat:no-repeat;height:22px; margin-bottom:10px; }
.paso1{background-position:0px 0px;}
.paso2{background-position:0px -22px;}
.paso3{background-position:0px -44px;}
.paso4{background-position:0px -66px;}
.etiquetaPrecio {position:absolute;top:95px;left:155px; z-index:100; background-image:url(imagenes/precio.png); background-repeat:no-repeat; background-position:0 0; height:80px; width:80px}
.etiquetaPrecioOpciones {position:absolute;top:145px;left:135px; z-index:100; background-image:url(imagenes/precio.png); background-repeat:no-repeat; background-position:0 0; height:80px; width:80px}
.etiquetaPrecio p, .etiquetaPrecioOpciones p{margin-top:20px;margin-left:8px; font-weight:bold; color:#FFF;}
.etiquetaPrecio p span, .etiquetaPrecioOpciones p span {margin-left:3px;}
.etiquetaPiezas {position:absolute;top:3px;left:108px; z-index:99; background-image:url(imagenes/piezas.png); background-repeat:no-repeat; background-position:0 0; height:40px; width:105px}
.etiquetaPiezas p{margin-top:5px;margin-left:15px; font-weight:bold; color:#333}
.etiquetaPedidoMinimo {position:absolute;top:80px;left:0px; z-index:101; background-image:url(imagenes/cantidadMinima.png); background-repeat:no-repeat; background-position:0 0; height:80px; width:76px}
.etiquetaPedidoMinimo p{margin-top:37px;margin-left:27px; font-weight:bold; color:#000}
.relativo{ position:relative}
.gamas{padding:5px; margin:10px 0;border:1px solid #CCC; color:#333; display:block; width:95%; background-color:#f3f4f5; text-align:left; background-image:url(imagenes/fondoH3Gamas.gif); background-repeat:repeat-x}
.packagingH2{margin: 5px 0px;padding: .5em;font-size:1em;color:#F63;letter-spacing:0px; text-align:center; height:5em;}
.opcionesH2{margin: 5px 0px;padding: .5em;font-size:1em;color:#F63;letter-spacing:0px; text-align:center; height:7em;}
#formOpciones label {color:#F63;font-size: 1em;margin-right:10px; font-weight:bold}
#formOpciones label:hover {color: #333;}
#formOpciones label, #formOpciones img {cursor:pointer;}
.opcionesPackaging{padding:5px;border:1px solid #9C0; background-color:#f3f4f5; text-align:right ;background-image:url(imagenes/fondoH3Gamas.gif); background-repeat:repeat-x}
#botonesEnvio{padding:3% 0%; text-align:right; width:100%; background-color:#FFF; border-top:5px solid #9C0;background-image:url(imagenes/fondoH3Gamas.gif); background-repeat:repeat-x}
#botonesEnvio img{margin-right:10px;}
#eresCliente, #chatOnline{padding:5px; margin:5px 5px 5px 10px;border:1px solid #F60; background-color:#F3F4F5;background-image:url(imagenes/fondoH3Gamas.gif); background-repeat:repeat-x; text-align:center; }

#eresCliente p{margin:3px 0px;padding:0 }
.pF63{ color:#F63; font-weight:bold; font-size:1.2em;}
.pF63 a{ color:#F63; font-size:1em; text-decoration:none}
.pF63 a:hover{ color:#69F;}
#divCarrito {padding:5px; margin:5px 5px 5px 10px;border:1px solid #9C0; background-color:#F3F4F5;background-image:url(imagenes/fondoH3Gamas.gif); background-repeat:repeat-x; text-align:center; }
.cajaCantidad{width:30px;float:left;}
.btnTick{margin-left:5px;float:left; cursor:pointer}
.fieldsetCarro{padding:5px;border:1px solid  #F60}
.legendCarro{border:1px solid #F60; padding:10px; background-color:#F3F4F5;color:#333; font-weight:bold; font-size:1.2em}
.alerta{ background-image:url(imagenes/fondoDivKo.gif); border:1px solid #cd0a0a;padding:10px; color:#FFF}
.bien{ background-image:url(imagenes/fondoDivOk.gif); border:1px solid #9C0;padding:10px; color:#FFF}
.tablaForm{margin:5px}
.tablaForm th{ text-align:left; background-color:#E6E6E6; border:1px solid #CCC; border-left:none; border-top:none; width:200px;padding:5px;}
.thImportant{ background-color:#D8D8D8 !important;}
.tablaForm td{ padding:5px; border:1px solid #FC9; border-left:none; border-top:none;background-color:#F3F4F5}
.sin{ padding:5px; border:none !important; background-color:#FFF !important}
.formObligatorio{color:#F63}
.textoRojo{color:#F00}
.textoVerde{color:#093}
.textoGris{color:#333}
.cajaAviso{padding:10px; background-color:#F3F4F5; border:1px solid #F63; text-align:center;}
.cajaAvisoFoto{padding:10px; background-color:#FCC; border:1px solid #F33; text-align:center;}
.cajaAviso p{font-size:1.2em; font-weight:bold; line-height:0.75em;}
.verde{color:#9C0}
.reTh{ width:150px !important;}
input,textarea{ font-size:1em; color:#666; font-family:Arial, Helvetica, sans-serif}
.esperaAjax{ background-color:#FFC; border:5px solid #F63;padding:10px; width:250px;}
.esperando{font-size:1.2em; font-weight:bold; line-height:0.75em;}
#panelEspera{background-image:url(imagenes/semitransp.gif);left: 0px; width: 100%; position: absolute; top: 0px; height: 2900px; z-index: 100;}
.mano{cursor:pointer}

.totalCompra{border-top:3px solid #F60 !important; background-color:#F3F4F5;background-image:url(imagenes/fondoH3Gamas.gif); background-repeat:repeat-x; font-size:1.8em; }

.cajaOk{padding:5px; margin:5px 0;border:1px solid #9C0; background-color:#B2F340; text-align:left; color:#000; font-weight:bold }
#divTotalCompra{padding:10px; margin:5px 0;border:1px solid #9C0; background-color:#B2F340; text-align:right; color:#000; font-weight:bold; width:97%; font-size:1.1em }
#spanTotalCompra{color:#030;font-size:1.5em;}
.fondoEnvio{ background-image:url(imagenes/seEnviaraA.gif); background-repeat:no-repeat; background-position:95% 50%}
.pedidoMinimo{ font-style:italic; color:#069}
address{margin:0 0px 20px 0; padding:10px; font-style:normal; background-color:#FaFaFa; border:1px solid #CCCCCC;background-image:url(../imagenes/fotocentro1.jpg);background-repeat:no-repeat;background-position:right center;}
address p{margin:0;padding:3px 0}
address p.telefono{background-image:url(imagenes/phone_16.gif);background-repeat:no-repeat;background-position:left 50%;padding-left:25px;}
address p.fax{background-image:url(imagenes/fax_16.gif);background-repeat:no-repeat;background-position:left 50%;padding-left:25px;}
address p.mail{background-image:url(imagenes/mail_16.gif);background-repeat:no-repeat;background-position:left 50%;padding-left:25px;}

.listaContent li{ background-image:url(imagenes/bola.gif); background-repeat:no-repeat; background-position:0% 30%; padding:5px 0 0 20px; margin-left:20px;}
.sinMano{ cursor:default !important;}

.pieza{color:#333; font-size:1.2em; font-weight:bold; background-image:url(imagenes/pieza.png); background-position:0 0; width:262px; height:40px;margin-right:15px;float:left; background-repeat:no-repeat;padding-left:55px; line-height:40px}
.pieza:hover{background-position:0 -40px;}
.pieza a{ text-decoration:none; color:#333}
.pieza a:hover{ text-decoration:none; color:#F63}

.enlacesInteres {display: block; text-align:center;font-size: 0.8em;color:#6C36A3;}
.enlacesInteres a {
	margin-right:5px;
	color:#6C36A3;
	text-decoration:none;
}
.enlacesInteres a:hover {
	color:#96C;
}
.sni{ display:none}
.message-box  { background:#fffea1 !important; border:2px solid #fc0 !important; padding:4px 8px!important; margin:14px 0 14px 0!important; }  
.content form dl{ width:98%;}
.content form dt{ float:left; width:100px; margin:0px; padding:0px 0px 0px 10px; }
.content form dd{ /*float:right; width:40%;*/ margin:0px; padding:0px 1% 6px 0px; }
.input250{width:250px;}
.input350{width:350px;}
.boton { border-bottom:solid 1px /*#737574*/#666666; border-right:solid 1px #666666; border-left:solid 1px #E8E8E8; border-top:solid 1px #E8E8E8; 
			 background-color:#7DCD0A; color:#000; font-weight:bold; font-size:90%; padding:2px; }
