/* Body ==========================================================*/

body,html{  
	background-color:#666666;
	margin: 0;
	padding: 0;
	height:100%;
}
    
/* Pagina ========================================================*/ 
/* Abarca toda la página. Incluye la cabecera herramientas y      */
/* el pie de página. Establece la anchura y altura de la web.     */
/* ---------------------------------------------------------------*/   
.pagina{
    background-color: #FFFFFF;  
    width: 940px;
    height: 100%;
    margin-top: 2px;
    margin-bottom: 2px;   
    border: 1px solid #666666;    
    }
    
/* Contenido ========================================================*/ 
/* Abarca desde la cabecera hasta el pie de página.                 */
/* -----------------------------------------------------------------*/       
.contenido{   
    background-color: #FFFFFF;   
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
    }    

/* Cabecera ======================================================*/
/* Es la cabecera de la página. Incluye el nombre de la empresa,  */
/* el nombre del catálogo y su logotipo                           */
/* ---------------------------------------------------------------*/
.cabecera{    
    height: 103px;
         background-color:#FFFFFF;   
    background-position: left;
    background-repeat: no-repeat;
    border-bottom: 1px solid #666666;    
    }
.cabecera .divLogoEmpresa{    
    float:left;
    display:block;
    padding-left: 12px;     
    }  
.cabecera .divTxtEmpresa{
    padding-left: 4px; 
    display:block;
    float: left;      
    height:80;
    vertical-align:bottom;     
    }
.cabecera .txtEmpresa{
    bottom:0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    color: #4D8A42;
    font-weight: bold;    
    }
.cabecera .txtCliente{
    bottom:0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #4D8A42;
    font-weight: bold;    
    }      
    
/* Barra de Herramientas ========================================= */
/* Contiene el menu que se muestra justo debajo de la cabecera     */
/* ----------------------------------------------------------------*/
.herramientas{
    background-image: url(gradient.php?barcolor=%234D8A42);
    /* padding: top right bottom left */ 
    padding: 1px 0px 0px 0px;
    border-bottom: 1px solid #666666;    
    }
.herramientas ul{    
    margin: 0;   
    padding: 0;
    margin-bottom: 0px;
    float: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    width: 100%;
    height: 20px;    
    }
* html .herramientas ul{ /*IE only rule, reduce menu width*/
    width: 100%;
    }
.herramientas ul li{
    display: inline;
    }
.herramientas ul li a{
    float: left;
    color: #FFFFFF;
    /* padding: top right bottom left */ 
    padding: 2px 12px;
    text-decoration: none;
    background: transparent url('../imagenes/vertical.gif') center right no-repeat;
    }
.herramientas ul li a:visited{
    color: #FFFFFF;
    }
.herramientas ul li a:hover{
    color: black;
    background-color: #ffe84f;
    }
    
/* Pie =========================================================== */
/* Pie de la página                                                */
/* --------------------------------------------------------------- */
.pie{
    border-top: 1px solid #666666;  
    height: 34px;  
    text-align: center;
    background-color: #EAF2E1;    
    margin: 0px;
    }
.pie p{
    color: #333333;
    margin: 0px;
    padding:0px 0px 5px 0px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;   
    }
.pie a:link, a:visited{
    color: #333333;
    }
.pie a:hover, a:active{
    color: #333333;
    }    

/* zona Izquierda ================================================ */
/* Zona izquierda del listado de articulos.                        */
/* Contiene la lista de categorias,la búsqueda y la oferta.        */
/* ----------------------------------------------------------------*/
.zonaIzquierda{
    background-color: #FFFFFF;    
    padding-top: 0px;
    padding-bottom: 2px;
    padding-left: 0px;
    padding-right: 1px;    
    }
.tituloIzqdo{
    display: block;
    background: #EAF2E1;
    /* margin: top right bottom left */
    margin: 0px 0px 0px 0px; 
    /* padding: top right bottom left */ 
    padding: 6px 6px 6px 6px;
    color: #333333;
    font-family: Arial;
    font-size: 13px;
    font-weight: bold;    
    height: 22px;    
    }
    
/* zona Derecha ================================================ */
/* Zona derecha del listado de articulos.                        */
/* Contiene la lista de articulos                                */
/* --------------------------------------------------------------*/
.zonaDerecha{   
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 4px;
    padding-right: 2px;    
    }
/* Categorias ================================================== */
/* Listado de categorias                                         */
/* --------------------------------------------------------------*/
.menuCategoriasContainer{
    background-color: #EAF2E1;
    }
.menuCategorias {
    background-color: #EAF2E1;
    list-style-type: none;
    margin: 5px 0;    
    padding-left: 6px;
    width:230px;
    }
.menuCategorias li a{
    background:  url(../imagenes/arrow-list.gif) no-repeat 2px center;
    font: bold 12px Arial, Helvetica, sans-serif;
    color: #333333;    
    display: block;
    width: 210px;
    padding: 3px 0;
    padding-left: 20px;
    text-decoration: none;    
    }
.menuCategorias .seleccionada{
    background: white url(../imagenes/arrow-list.gif) no-repeat 2px center;
    font: bold 12px Arial, Helvetica, sans-serif;
    color: #FFFFFF;
    background-color: #000000;
    display: block;
    width: 210px;
    padding: 3px 0;
    padding-left: 20px;
    text-decoration: none; 
}       

* html .menuCategorias li a{
    /*IE only. Actual menu width minus left padding of LINK (20px) */
    width: 224px;
    }
.menuCategorias li a:visited,
.menuCategorias li a:active{
     color: #333333;
    }
.menuCategorias li a:hover{
    color: black;
    background-color: #cccccc;
    /*onMouseover image change. Remove if none*/
    background-image:url(../imagenes/arrow-list-red.gif); 
    }
/* Holly Hack for IE \*/
* html .menuCategorias ul li { height: 1%; }
* html .menuCategorias ul li a { height: 1%; }

/* Buscador   ================================================== */
/* Campo para busqueda y boton de busqueda.                      */
/* --------------------------------------------------------------*/
.buscar{
    background-color: #EAF2E1;
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 8px;
    padding-right: 8px;
    }
.buscar .campoBuscar{
    width: 110px;
    }
    
/* navCategorias =================================================*/
/* Barrita de navegación por las categorias.                      */
/* Ojo con la altura porque podemos tener infinitas subcategorias */
/* y no queremos que el div se corte.                             */
/* -------------------------------------------------------------- */
.navCategorias{   
    display: block; 
    background-color: #EAF2E1; 
    /* margin: top right bottom left */
    margin: 0px 0px 0px 0px; 
    /* padding: top right bottom left */ 
    padding: 1px 1px 1px 6px; 
    color: #333333;
    font-family: Arial;
    font-size: 12px;
    font-weight: bold;    
    vertical-align: middle; 
    }
.navCategorias a:visited, .navCategorias a:link, .navCategorias a:active {
    color: #333333;
    font-family: Arial;
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
    }
.navCategorias a:hover{
    text-decoration: underline;
    }
    
/* navSubCategorias ===============================================*/
/* Menu de subcategorias.                                          */
/* --------------------------------------------------------------- */

.subCategoriasTitulo{ 
    background: #EAF2E1;
    /* padding: top right bottom left */ 
    padding: 4px 2px 4px 6px;  
    color: #333333;
    font-family: Arial;
    font-size: 13px; 
    font-weight: bold;
    border-bottom: 1px dashed #EAF2E1;   
    }
.subCategorias{
    background: #EAF2E1;
    /* margin: top right bottom left */
    margin: 0px 0px 0px 0px; 
    /* padding: top right bottom left */ 
    padding: 6px 2px 6px 6px;   
    color: #333333;
    font-family: Arial;
    font-size: 12px; 
    font-weight: bold; 
   
    }
.subCategorias a{   
    font-size: 11px;
    text-decoration: none;
    padding-right: 18px; /*adjust bullet image padding*/
    color: #333333;
    }

.subCategorias a:visited, .subCategorias a:active{
    color: #333333;
    }

.subCategorias a:hover{
    text-decoration: underline;
    }

/* boton ============================================================== */
/* Boton con imagenes                                                   */ 
/* -------------------------------------------------------------------- */
.botonContenedor{   
    overflow: hidden; 
    /*width: 100%;*/
    }
a.boton{
    /* margin: top right bottom left */
    margin: 0px 2px 2px 2px; 
    background: transparent url('../imagenes/boton_gris_left.png') no-repeat top left;
    display: block;
    float: left;
    font: normal 11px Arial; /* Change 12px as desired */
    line-height: 15px; /* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 23px) */
    height: 23px; /* Height of button background height */
    padding-left: 9px; /* Width of left menu image */
    text-decoration: none;
    }
a:link.boton, a:visited.boton, a:active.boton{
    color: #494949; /*button text color*/
    }
a.boton span{
    background: transparent url('../imagenes/boton_gris_right.png') no-repeat top right;
    display: block;
    padding: 4px 9px 4px 0; /*Set 9px below to match value of 'padding-left' value above*/
    }
a.boton:hover{ 
    background-position: bottom left;
    }
a.boton:hover span{ 
    background-position: bottom right;
    color: #494949;
    }   
    
/* tablaArticulos =================================================== */
/* Todos los estilos aplicables a la tabla contenedora de los         */
/* articulos y la clase articulos                                     */
/* ------------------------------------------------------------------ */

.tablaArticulos{   
    /* margin: top right bottom left */
    margin: 1px 0px 12px 0px;     
    }
.tablaArticulos .tdArticulo{
    border: 1px solid #4D8A42;
    background: #EEEEEE    }
.sinArticulos{
    font-family: Arial;
    font-size: 12px;
    color: #333333;    
    }    
.articulo{  
    }
.articulo .nombre{    
    display: block;    
    background: #EEEEEE url(../imagenes/bullet.png) no-repeat scroll 12px 17px;
    min-height: 26px; 
    /* padding: top right bottom left */ 
    padding: 13px 10px 14px 27px;
    color: #4D8A42;
    font-family: tahoma;
    font-size: 11px;
    font-weight: bold;
    text-decoration: none;
    } 
.articulo .imagen{
    display: block;
    width: 100px;
    /* margin: top right bottom left */
    margin: 4px 12px 4px 4px;    
    vertical-align: middle;
    }  
.articulo .descripcion{  
    display: block;
    padding-right: 12px;
    }
.articulo .descripcion p {
    color: #333333;
    font-family: Arial;
    font-size: 12px;
    text-align:left;
    }
.articulo .botones{     
    width: 100px;   
    display: block;
    /* margin: top right bottom left */
    margin: 0px 10px 0px 0px;   
    }
.articulo .precio{
    display: block;
    float: left;
    padding-left: 9px; 
    color: #4D8A42;
    font-family: Arial;
    font-size: 15px;
    font-weight: bold;
    }    
.articulo .oferta{
    background: #F1920B;
    font-family: Arial;
    font-size: 15px;
    font-weight: bold;
    color: white;
    padding: 2px 2px 2px 2px;
    }
    
/* detalleProducto ================================================== */
/* Cuando se muestra el detalle de un artículo o producto.            */
/* ------------------------------------------------------------------ */
.detalleTabCategoria{
    background-color: #EAF2E1; 
    border: 1px solid #4D8A42;
    }
.detalleProducto {
    /* padding: top right bottom left */ 
    padding: 4px 2px 10px 10px;
    background-color: #EEEEEE; 
    /* margin: top right bottom left */
    margin: 4px 0px 100px 30px;      
    color: #333333;
    font-family: Arial;
    font-size: 10px;   
    }
.detalleProducto .titulo {
    /* padding: top right bottom left */ 
    padding: 0px 0px 14px 0px;
    color:#333333;
    font-family: Arial;
    font-size: 18px;
    font-weight: bold;
    }
.detalleProducto .descripcion {
    color: #333333;
    font-family: Arial;
    font-size: 12px;
    }
.detalleProducto .precio {
    /* padding: top right bottom left */ 
    padding: 14px 0px 14px 0px;
    color: #333333;
    font-family: tahoma;
    font-size: 18px;
    font-weight: bold;
    }
.detalleProducto .referencia {
    color: #333333;
    font-family: Arial;
    font-size: 12px;
    font-weight: bold;
    }
.detalleProducto .bloque{
    background: #EBECDE;
    /* padding: top right bottom left */ 
    padding: 6px 0px 6px 0px;
    color: #333333;
    font-family: Arial;
    font-size: 12px;
    font-weight: bold;
    }
.detalleProducto .nombreCtrs {
    color: #333333;
    font-family: Arial;
    font-size: 12px;
    font-weight: bold;
    }
.detalleProducto .txtCtrs {
    color: #333333;
    font-family: Arial;
    font-size: 12px;   
    }
.detalleProducto .imagenes{
    /*display: block; */
    /* padding: top right bottom left */ 
    padding: 6px 0px 6px 0px;
    background: #EBECDE;
    color: #333333;
    font-family: Arial;
    font-size: 14px;
    font-weight: bold;
    }
.detalleProducto .imagenExtra{
    /*float: left; */   
    border: 1px solid #979797;    
    /* margin: top right bottom left */
    margin: 4px 4px 4px 4px;   
    width: 102px; 
    height: 102px;
    }
.detalleProducto ul {
    margin-top: 5px;
    }
.detalleProducto ul li {
    color: #333333;
    font-family: Arial;
    font-size: 12px;
}
.detalleProducto ul li a:vidited, .detalleProducto a:link, .detalleProducto a:active {
    color: #333333;
    font-family: Arial;
    font-size: 12px;
    text-decoration: none;
}
.detalleProducto ul li a:hover {
    font-weight: bold;
    text-decoration: underline;
}    
    
/* CARRITO =============================================================== */
/* Carrito y proceso de compra.                                            */
/* ------------------------------------------------------------------------*/
.carritoContenedor{
    /* margin: top right bottom left */
    margin: 20px 40px 0px 40px; 
    /* padding: top right bottom left */ 
    padding: 0px 0px 0px 0px;   
    }
.carrito{
    font-family:Arial, Helvetica, sans-serif;
    }
.carrito h2 {
    font-family:Arial, Helvetica, sans-serif;
    color: ;
    font-size: 14px;
    }
.carrito .head {
    height: 30px;
    color: white;
    font-weight: bold;
    font-size: 12px;
    background-color: black;
    padding: 5px;
    }
.carrito .celdaPar {
    /* padding: top right bottom left */ 
    padding: 3px 2px 3px 4px;
    background-color: #EAF2E1; 
    color:#333333;    
    font-size: 12px;
    font-weight: none;
    }
.carrito .celdaImpar {
    /* padding: top right bottom left */ 
    padding: 3px 2px 3px 4px;
    background-color: #EAF2E1; 
    color:#333333;     
    font-size: 12px;
    font-weight: none;
    }
.carrito .celdaTotal {
   /* padding: top right bottom left */ 
    padding: 6px 2px 6px 0px;
    font-size: 12px;
    }
.carrito .impuestos {
    padding-left: 5px;
    font-size: 12px;
    color: black;
    }
.carrito .caja {
    border: 1px solid ;
    font-size: 12px;
    padding: 5px;
    margin-right: 10px;
    margin-bottom: 10px;
    float: left;
    display: inline;
    width: 280px;
    }
.carrito .texto {
    font-family:Arial, Helvetica, sans-serif;
    color: ;
    font-size: 12px;
    }

  
/* FORMULARIO ============================================================= */
/* Estilo de todos los formularios.                                         */
/* ------------------------------------------------------------------------ */
.tablaForm{
    /* margin: top right bottom left */
    margin: 6px 0px 0px 0px; 
    } 
.tablaForm .titulo{
    /* margin: top right bottom left */
    margin: 0px 0px 4px 0px; 
    color: black; 
    font-family: Arial;
    font-size: 14px; 
    font-weight: bold;
    } 
    
.tablaForm .bloque{
    border-top: 1px solid #656565; 
    border-bottom: 1px solid #656565; 
    /* margin: top right bottom left */
    margin: 0px 0px 10px 0px; 
    /* padding: top right bottom left */ 
    padding: 12px 8px 20px 8px;   
    background: #EEEFED;   
    }
    
 .tablaForm .bloqueObs{
    border-top: 1px solid #656565; 
    border-bottom: 1px solid #656565; 
    /* margin: top right bottom left */
    margin: 12px 0px 10px 0px; 
    /* padding: top right bottom left */ 
    padding: 4px 8px 4px 8px;   
    background: #EEEFED;
    }
    
 .tablaForm .label {
    font-family:Arial, Helvetica, sans-serif;
    color: #656565; 
    font-weight: bold;    
    font-size: 12px;
    }
    
.tablaForm .field {
    /* margin: top right bottom left */
    margin: 0px 0px 6px 0px; 
    border: 1px solid #656565;
    font-family:Arial, Helvetica, sans-serif;
    color: #000000;    
    font-size: 12px;
    }
    
.tablaForm .required {    
    background-image: url('../imagenes/asterisco.png');
    background-position:right;
    background-repeat:no-repeat;
    padding-right:10px;    
    /* margin: top right bottom left */
    margin: 0px 0px 6px 0px; 
    border: 1px solid #656565;
    font-family:Arial, Helvetica, sans-serif;
    color: #000000;    
    font-size: 12px;    
    }
    
.tablaForm .celdaCampo {
    font-family:Arial, Helvetica, sans-serif;
    color: #656565; 
    font-weight: bold;    
    font-size: 12px;
    }
    
.tablaForm .celdaValor {
    font-family:Arial, Helvetica, sans-serif;
    color: #000000;    
    font-size: 12px;
    }
.tablaForm a:active, .tablaForm a:visited, .tablaForm a:link {
    font-family:Arial, Helvetica, sans-serif;
    color: ;
    font-size: 12px;
    text-decoration: none;
    font-weight: bold;
    }
    
     
/* BARRA COMPRA ============================================================ */
/* Barra de estado de la compra.                                             */
/* ------------------------------------------------------------------------  */   
.barraCompra{
    /* margin: top right bottom left */
    margin: 16px 0px 0px 0px; 
    border-top: 1px solid #ADACAC; 
    border-bottom: 1px solid #ADACAC; 
    }  
.barraCompra .celdaActiva{
    border-right: 1px solid white; 
    /* padding: top right bottom left */ 
    padding: 4px 0px 4px 0px; 
    background: #FD6407;
    font-family: Verdana,Arial, Helvetica;
    color: white; 
    font-weight: bold;    
    font-size: 12px;
    }
.barraCompra .celdaInactiva{
    border-right: 1px solid white; 
    /* padding: top right bottom left */ 
    padding: 4px 0px 4px 0px; 
    background: #D0D0D0;
    font-family: Verdana,Arial, Helvetica;
    color: white; 
    font-weight: bold;    
    font-size: 12px;
    }

/* ERRORES ================================================================== */
/* Texto de los errores                                                       */
/* ---------------------------------------------------------------------------*/
.tablaForm .error{
    font-family:Arial, Helvetica, sans-serif;
    color: Red;
    font-size: 12px;   
    padding-top: 10px;
    padding-bottom: 10px;   
    font-weight: bold;
    }
.error{
    font-family:Arial, Helvetica, sans-serif;
    color: Red;
    font-size: 12px;   
    padding-top: 10px;
    padding-bottom: 10px;   
    font-weight: bold;
    } 

/* ACCEDER ================================================================== */
/* Estilos de la página de acceso                                             */
/* ---------------------------------------------------------------------------*/
.acceder .celdaTitulo{
    /* padding: top right bottom left */ 
    padding: 2px 2px 2px 2px;      
    font-family: Arial, Helvetica, sans-serif;
    font-size: 17px; 
    font-weight: bold;    
    background: #454545;
    color: white;
    }
.acceder .cajaPuntos{
    /* margin: top right bottom left */
    margin: 4px 0px 0px 0px;  
    border: 1px dashed #4C4C4C;
    font-family:Arial, Helvetica, sans-serif;
    color: ;
    font-size: 13px;
    padding: 8px;
    }
.acceder .descripcion{
    /* padding: top right bottom left */ 
    padding: 8px 8px 8px 8px;  
    background: #F4F4F5;
    font-family:Arial, Helvetica, sans-serif;
    color: ;
    font-size: 12px;   
    }
.acceder a:active, .acceder a:visited, .acceder a:link {
    font-family:Arial, Helvetica, sans-serif;
    color: black;
    font-size: 12px;
    text-decoration: underline;
    font-weight: bold;
    }
    
/* PAGINACION ============================================================= */
/* Paginacion                                                               */
/* ------------------------------------------------------------------------ */
div.pagination {
    font-family:Arial, Helvetica, sans-serif;
    font-size: 10px;
    padding: 3px;
    margin: 3px;
    text-align:center;
    color:#a0a0a0;
    font-size:80%;
    }
div.pagination a {
    font-family:Arial, Helvetica, sans-serif;
    font-size: 10px;
    border: 1px solid #909090;
    margin-right:3px;
    padding:2px 5px;
    background-image:url('../imagenes/bar.gif');
    background-position:bottom;
    text-decoration: none;
    color: #c0c0c0;
    }
div.pagination a:hover, div.meneame a:active {
    font-family:Arial, Helvetica, sans-serif;
    font-size: 10px;
    border: 1px solid #f0f0f0;
    background-image:url('../imagenes/invbar.gif');
    background-color:#404040;
    color: #ffffff;
    }
div.pagination span.current {
    font-family:Arial, Helvetica, sans-serif;
    font-size: 10px;
    margin-right:3px;
    padding:2px 5px;
    border: 1px solid #ffffff;   
    background-color: #606060;
    color: #ffffff;
    }
div.pagination span.disabled {
    font-family:Arial, Helvetica, sans-serif;
    font-size: 10px;
    margin-right:3px;
    padding:2px 5px;
    border: 1px solid #606060;
    color: #808080;
    }

/* OFERTA ================================================================= */
/* Ofertas que aparecen en la zona izquierda.                               */
/* ------------------------------------------------------------------------ */
.oferta{    
    background: #EAF2E1;
    /* padding: top right bottom left */ 
    padding: 8px 8px 8px 8px; 
    /* margin: top right bottom left */
    margin: 0px 0px 0px 0px;     
    }
.oferta a:active, .oferta a:visited, .oferta a:link{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #333333;   
    }
.oferta .precio{
    color: #333333;   
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: bold;
    }