/* CSS por Santiago Flores -> santiagoflores@gmail.com */
* {margin:0;padding:0}
html,
textarea,
input {font-family: Arial, Helvetica, sans-serif}
body { background-color:#FEDC9A;color:#000;text-align:center}
body.portada { background-color:#fff;color:#000}
.clear {height:0; clear:both; overflow:hidden}
a {text-decoration:none; color:#5D8873; background-color:inherit}
img {border: 0 none}

/* ----- PARTE SUPERIOR ----------- */
#arriba {background: url(/img/cabezal_fondo.jpg) repeat-x;padding-bottom:2px}
#cabezal {width:780px; margin: 0 auto; background: url(/img/cabezal.jpg) no-repeat center top; text-align:right}
#arribaportada {width:782px; margin: 0 auto;background: url(/img/cabezal_fondo_index.jpg) repeat-x}
#cabezal.portada {background: url(/img/cabezal_index.jpg) no-repeat left top; text-align:right;padding-top:69px;padding-bottom:1px}

h1 {position:absolute; text-align:left; width:230px; margin: -28px 0 0 5px}
* html h1 {margin: -22px 0 0 -776px}
h1 a {display:block; width:230px;height:46px; text-indent:-9000px}

#menu {list-style-type:none;padding: 1px 0 0 250px; font-size:6px}
* html #menu {margin-top:6px}
*+html #menu {position:relative;top:-4px;margin-top:0}
#menu li { text-align:left}
#menu li.op1 {float:left; overflow:hidden; height:1%;width:130px;}
#menu li.op1 a {display:block;height:20px; overflow:hidden; background: url(/img/m_nuestraempresa.gif) no-repeat bottom left; text-indent:-9000px}
#menu li.op1 a:hover {background: url(/img/m_nuestraempresa.gif) no-repeat top left}
#menu li.op1 a.on {background: url(/img/m_nuestraempresa.gif) no-repeat top left}
#menu li.op2 {float:left; overflow:hidden; height:1%;width:118px}
#menu li.op2 a {display:block; height:20px; background: url(/img/m_distribuidores.gif) no-repeat bottom left; text-indent:-9000px}
#menu li.op2 a:hover {background: url(/img/m_distribuidores.gif) no-repeat top left}
#menu li.op2 a.on {background: url(/img/m_distribuidores.gif) no-repeat top left}
#menu li.op3 {float:left; overflow:hidden; height:1%;width:116px}
#menu li.op3 a {display:block;height:20px; background: url(/img/m_contactenos.gif) no-repeat bottom left; text-indent:-9000px}
#menu li.op3 a:hover {background: url(/img/m_contactenos.gif) no-repeat top left}
#menu li.op3 a.on {background: url(/img/m_contactenos.gif) no-repeat top left}
#menu li.op4 {float:left; overflow:hidden; height:1%; width:132px}
#menu li.op4 a {display:block; width:132px; height:20px; background: url(/img/m_carrito.gif) no-repeat bottom left; text-indent:-9000px}
#menu li.op4 a:hover {background: url(/img/m_carrito.gif) no-repeat top left}
#menu li.op4 a.on {background: url(/img/m_carrito.gif) no-repeat top left}



/* ----- PARTE CENTRAL ----------- */
#general {background-color:#fff}
#central { width:780px; margin: 0 auto; text-align:left}
#columna {float:left; width: 150px}
#colseparacion {float:left; width:76px;height:210px}
#contenido {float:left; width: 554px}
#central.portada {
	width:780px; margin: 0 auto 3em auto; text-align:left;border-left: 1px solid #5d8873;
	border-right: 1px solid #5d8873; padding-top:0
	}
#central.portada #columna {float:left; width: 178px}
#central.portada #colseparacion {float:left; width:24px;height:310px}
#central #flash {float:left; width: 375px; height:437px; background-color:#CCC}
#central #include {float:left; width: 203px; height:437px; background:#fff url(/img/promo-portada.jpg) no-repeat}

/* ----- MENU IZQUIERDO PRODUCTOS ----------- */
.espaciomenu {min-height:266px}
* html .espaciomenu {height:266px}
*+html .espaciomenu {height:auto}
h3.menu_productos {
	background: url(/img/nuestros_productos.gif) no-repeat bottom left; height:54px; text-indent:-9000px; 
	border-bottom: 1px solid #e5725e; margin-left: 5px; padding-bottom:5px
	}
ul.menu_productos {list-style-type:none;font-size: 12px;margin-left:3px}
ul.menu_productos ul {list-style-type:none}
ul.menu_productos li {font-weight:bold;width:152px}
* ul.menu_productos li {width:147px;height:1%;float:left;clear:left;}
ul.menu_productos li li {font-weight:normal; border-bottom: 0 none}
ul.menu_productos li a {display:block;color:#5d8873;padding: 9px 0 2px 7px;border-bottom: 1px solid #aec3b9}
ul.menu_productos li li a {padding-top:2px}
ul.menu_productos li a.on {color:#E5725E}
ul.menu_productos li a:hover {color:#E5725E}
.portada h3.menu_productos {margin: 16px 0 0 24px}
.portada ul.menu_productos {margin-left: 24px}



/* -------- CONTENIDO CENTRAL ----------------- */
#central h2 {
	color: #88a687;font-size:1.3em; text-transform:uppercase; font-weight:normal;
	border-bottom: 1px solid #88a687; margin-bottom:1em; height:59px
	}
#central p {color: #5D8873; font-size:.8em;margin-bottom:1em; text-align:left}

/* titulos ---------- */
h2.op1 {background: url(/img/titulo_nuestra_empresa.gif) no-repeat bottom left; text-indent:-9000px}
h2.op2 {background: url(/img/titulo_distribuidores.gif) no-repeat bottom left; text-indent:-9000px;height:38px}
h2.op3 {background: url(/img/titulo_contactenos.gif) no-repeat bottom left; text-indent:-9000px;height:38px}
h2.op4 {background: url(/img/titulo_miscompras.gif) no-repeat bottom left; text-indent:-9000px}
h2.opclave {background: url(/img/titulo_contrasena.gif) no-repeat bottom left; text-indent:-9000px;height:42px}
h2.opregistro {background: url(/img/titulo_registro.gif) no-repeat bottom left; text-indent:-9000px}

.flash {float:right;width:232px;margin: 0 20px 20px 20px; background-color:#FFFFCC}
* html .flash {margin: 0 10px 20px 20px}
.flash2 {float:right;width:230px;height:356px; margin: 0 0px 20px 20px; background: url(/img/flores.jpg) no-repeat}
.flash3 {float:right;width:230px;height:356px; margin: 0 0px 20px 20px; background: url(/img/mascotas.jpg) no-repeat}

	
/* ----- PIE DE PAGINA ----------- */
#pieportada {background-color:#7e9a7e;color:#fff; text-align:center; font-size:.7em;padding:.3em; border-top:1px solid #4f7f77}
#pieportada a {background-color:#7e9a7e;color:#fff}
#pie {background: #fedc9a url(/img/pie_fondo.gif) repeat-x; width:100%}
#pie p {
	color:#fff; font-size:.7em; font-weight:bold; padding: 62px 0 82px 0;
	background: url(/img/pie.gif) no-repeat center top; width:780px; margin: 0 auto
	}
#pie a {color:#FFF}


/* ------ formularios --------- */

fieldset {border:0 none}
legend {display:none}
label {font-weight:bold; color: #4f7f77}
.form {border: 1px solid #4f7f77;padding-left:1px}

#registro {font-size:.70em; color: #4f7f77;padding-top:.3em}
#registro p {margin-bottom:6px}
#registro a {color: #4f7f77;font-weight:bold;background-color:#fff}
#registro .form {width:100px; font-size:1em}
#registro label {background-color:#fff}
#registro.portada {position:relative;left:6px}
* html #registro.portada {position:relative;left:6px}
#registro.portada p {font-size:.95em; text-align:right; margin-bottom:5px}

* html #cabezal p {margin-bottom:.4em}
#buscador .boton {border: 0 none; width:18px; vertical-align:middle}

#buscador2 {border-top: 1px solid #88a687;padding-top:10px;margin-top:1.2em; font-size: .85em; clear:both}
#buscador2 .boton {border: 0 none; width:18px; vertical-align:middle}
#buscador2 .form {width:100px}
#buscador2 .form:focus {width:180px}

#formularios.contacto {background: url(/img/imagen_contactenos.gif) no-repeat bottom left;margin-top:1.6em}
#formularios.clave {margin-top:1.6em;height:150px}
#formularios label {font-weight:normal; display:block; width:220px;text-align:right; float:left}
#formularios h4 {width:220px;text-align:right; font-size:.8em;color: #4f7f77}
.pedidos h4 {position:relative; top: 16px; left:-88px}

#formularios input,
#formularios textarea {background-color:#ffefd1; color:#46715c;border:1px solid #5d8873; margin-left:1em;padding:1px; width:250px; font-size:.98em}
#formularios input:focus,
#formularios textarea:focus {background-color:#fff; color:#333}
#formularios textarea {height:136px;font-size:1em;}
#formularios .boton {text-align:right; padding-right:66px; padding-top:8px}
#formularios .boton input {border:0 none; width:auto}
#formularios p {margin-bottom:.8em}

form.producto {float:right;width:218px;position:relative;top:-2px;height:20px;overflow:hidden}
form.producto label,
form.producto select {font-weight:normal;font-size:.85em}
form.producto .boton {vertical-align:top;position:relative;top:-3px}
* html form.producto .boton {vertical-align:top;position:relative;top:-1px}

/* ---------- catalogo ----------- */
#central .catalogo h2 {display:none}
#central .catalogo .miga {
	background: url(/img/titulo_productos.gif) no-repeat bottom left; text-align:right;color:#efaa9e; 
	font-weight:bold;padding: 39px 0 5px 0;font-size:.75em; margin-bottom:0
	}
#central .catalogo .miga span {color:#e5725e}
#central .catalogo .paginacion {text-align:right;font-size:.75em;border-top: 1px solid #88a687;padding-top:3px; margin-bottom:2em}
#central .catalogo .paginacion a {text-decoration:underline}
#central .catalogo .paginaciondos {text-align:right;font-size:.75em;border-top: 1px solid #ccc;padding-top:3px; margin-bottom:2em}
#central .catalogo .paginaciondos a {text-decoration:underline}

#catalogo {list-style-type:none; width:554px}
#catalogo li {float:left;width:49.8%; padding-bottom: 1.6em; border-right: 1px solid #ccc; height:1%}

h3 {font-size:.9em; border-bottom: 1px solid #d5d5d5; margin-bottom:.4em;text-transform:uppercase;color:#e5725e}
h3.nombre {margin: 2.3em 0 1.8em 0}

#catalogo h3 a  {color:#e5725e;padding-left:.4em}
#catalogo img {float:right;margin-right:.4em}
img.producto {float:left;margin: 0 1.4em 140px 0}
.catalogo .precio {color:#e5725e; font-style:italic; font-size:.9em;padding-left:6px;margin-bottom:0}
.catalogo .precioproducto {color:#e5725e; font-style:italic; font-size:.9em;padding-left:6px;margin-bottom:1em}

#catalogo p { font-size:.7em; margin-top:.2em;padding-left:6px}
.oferta {
	background-color:#e5725e; color:#fff; width:4em; text-transform:uppercase; font-style:normal;
	font-size:.75em; padding-left:4px;margin: -1px 8px 0 0; float:right
	}
* html #catalogo .oferta { margin: -1px 3px 0 0}
#catalogo .cantidad label {font-weight:normal}
#catalogo .cantidad select {border:1px solid #5d8873; width:3.8em;margin-top:1em;padding:1px}
#catalogo .agregar input {border: 0 none}

/* ------- MIS COMPRAS ----- */

table.miscompras {border-collapse:collapse;font-size: .8em; color:#5d8873}
table.miscompras th.col {border-bottom: 1px solid #8dab9d; padding: 3px 0; text-align:center}
table.miscompras th.col:first-child {text-align:left; width:30%}
table.miscompras th.row {border-bottom: 1px solid #d5d5d5; padding: 8px 0;text-transform:uppercase}
table.miscompras th.row a {color:#e5725e}
table.miscompras td {padding: 8px 0;border-bottom: 1px solid #d5d5d5; text-align:center}
select {width:3.4em; border: 1px solid #5d8873;color:#5d8873;padding:1px; font-size:.9em; background-color:#fff}
option {padding: 0 3px; text-align:right}
option.on {color:#000}
.realizarpedido {text-align:right; padding:1em 1em 5em 0}
table.miscompras .totalcompra th {border-top: 2px solid #8dab9d;border-bottom: 1px solid #d5d5d5;padding-top:1.4em}
table.miscompras .total td {color:#e5725e; font-weight:bold; border: 0 none}





/*
Estilos adicionales
*/

p.logged-in { height:78px; }
#login_errorMessage { color:#FF0000; font-weight:bold; }
p.tip{ text-align:right; width:100%; font-size:9px; margin-left:140px; }
.message {font-size:.8em;padding-bottom:10px}