/***************************/
/* CSS GENERAL DEL SISTEMA */
/***************************/

/****/
/* Bloques estructurales de la Página */
/****/

body {
  margin : 0;
  padding : 0;
  background : #6C6CFF;
  text-align : center;
  font-family : Trebuchet MS, sans-serif;
  font-size : 0.8em;
  color : #000;
}

#wrapper {
  padding : 0;
  margin : 0px auto;
  border : none;
  width : 760px;
  text-align : left;
}

/****/
/* Bloques de encabezado */
/****/

#headder {
  float : left;
  width : 760px;
  height : 100%;
  margin-top : 30px;

}

#headder #recursivo {
  display : block;
  float : right;
}

#headder img {
  width : 30px;
  height : 18px;
  border : 1px solid #000;
  margin : 0 10px 5px 0;
}

#footer {
  float : left;
  width : 760px;
  height : 45px;
  margin-top : 5px;
  margin-bottom : 20px;
  font-size : 12px;   
}


/****/
/* Bloques de contenido */
/****/

#content, #content-index {
  float : left; /* Gecko */
  width : 760px;
  height : 100%;
  margin : 0;
  padding : 0 0 10px 0;
  background : #FFF;
  border : 1px #000 solid;
  text-align : justify;
}

#content-index {
  margin-top : 50px;
  height : 100%;
  /* background : #FFF url(../imagenes/bg_ci01.gif) top left repeat-y; */
  background : #000;
  text-align : center;
  border : 1px #FFF solid;
}

#content-index #logo {
  display : block;
  width : 100%;
  height  : 82px;
  margin : 20px 0 20px 0;
  background : transparent url(../imagenes/bg_ci_logo.gif) top center no-repeat;
}

#content-index a.info {
  display : block;
  width : 100%;
  height : 30px;
  margin : 0 0 20px 0;
  text-align : center;
  background : transparent url(../imagenes/info.gif) center center no-repeat;
}

#content-index a.info:hover {
  background : transparent url(../imagenes/info_on.gif) center center no-repeat;
}

#content-index #proveedores {
  width : 50%;
  margin : 30px 0 0 0;
}

#content-popup {
  width : 80%;
  background : #FFF;
  border : 1px solid #000;
  margin : 15px 0 0 0;
  padding-top : 10px;
  padding-bottom : 15px;
  text-align : justify;
}

body[id="cuerpo"] #content-popup {
  margin-left : 10%;
}

#content-popup p {
  padding : 0 10px 0 10px;
}

#content-popup h1 {
  color : #000;
  font-size : 1.2em;
  text-align : left;
  width : 90%;
  margin-left : 10%;
}

#content-popup #punto-venta {
  width : 70%; /* 80% = 70% + 10% padding*/
  height : 100%;
  border : 1px solid #000;
  margin : 15px 0 5px 10%;
  padding : 5px 5% 5px 5%;
  background : #FFFFBB;
  text-align : left;
}

#punto-venta strong {
  color : #000;
}

#punto-venta strong.atention {
  color : #AC0000;
}

#content-popup table {
  padding : 0;
  margin : 0;
  width : 100%;
  height : 100%;
  border-collapse : collapse;
  margin-bottom : 10px;
  border-top : 1px solid #000;
  border-bottom : 1px solid #000;
}

#content-popup table th {
  text-align : center;
  background : #E2E2FF;
}

#content-popup table td {
  text-align : center;
}

#content-popup table td.par {
  text-align : center;
  background : #FFFFBB;
}

body[id="cuerpo"] #content-index #proveedores {
  float : left;
  margin-left : 25%;
}

#proveedores .proveedorl, #proveedores .proveedorr {
  display : block;
  float : left;
  width : 150px;
  height : 100%;
  text-align : center;
  font-weight : bold;
  color : #6C6CFF;
  font-size : 15px;
}

#proveedores .proveedorr {
  float : right;
}

#proveedores .proveedorc {
  display : block;
  width : 150px;
  height : 100%;
  text-align : center;
  font-weight : bold;
  color : #6C6CFF;
  font-size : 15px;
}

body[id="cuerpo"] #content-index #proveedores .proveedorc {
  margin-left : 30%;
}

#proveedores .proveedorl img, #proveedores .proveedorr img, #proveedores .proveedorc img {
  width : 120px;
  height : 70px;
  border : 1px solid #6C6CFF;
  margin : 2px 0 2px 0;
}

#content #headder-content {
  float : left;
  width : 760px;
  height : 100px;
}

#headder-content #logo {
  display : block;
  float : left;
  width : 200px;
  height : 100px;
  background : #000 url(../imagenes/bg_hc_logo01.gif) center center no-repeat;
  cursor : pointer;
}

#headder-content #eslogan {
  display : block;
  float : left;
  width : 559px;
  height : 100px;
  background : #FFF url(../imagenes/bg_hc_eslogan01.jpg) top left no-repeat;
  border-left : 1px dashed #000;
}

#content #menu-content {
  float : left;
  width : 740px; /* 760px = 750px + 20px padding */
  height : 100%;
  margin : 10px 0 10px 0;
  padding-left : 20px;
}

#menu-content a.item, #menu-content a.selecteditem {
  display : block;
  float : left;
  width : 170px;
  height : 20px;
  margin : 0 8px 0 0;
  border-top : 1px solid #9797FF;
  border-left : 1px solid #9797FF;
  border-right : 1px solid #2A2AFF;
  border-bottom : 1px solid #2A2AFF;
  background : #6C6CFF;
  color : #FFF;
  font-weight : bold;
  text-align : center;
  font-size : 0.9em;
  text-decoration : none;
  line-height : 1.7;
}

#menu-content a.selecteditem {
  border-top : 1px solid #ECECFF;
  border-left : 1px solid #ECECFF;
  border-right : 1px solid #BABAFF;
  border-bottom : 1px solid #BABAFF;
  background : #E2E2FF;
  color : #000;
}

#menu-content a.item:hover {
  border-top : 1px solid #ECECFF;
  border-left : 1px solid #ECECFF;
  border-right : 1px solid #BABAFF;
  border-bottom : 1px solid #BABAFF;
  background : #E2E2FF;
  color : #000;
}

#menu-content a.selecteditem:hover {
  border-top : 1px solid #9797FF;
  border-left : 1px solid #9797FF;
  border-right : 1px solid #2A2AFF;
  border-bottom : 1px solid #2A2AFF;
  background : #6C6CFF;
  color : #FFF;
}

#content #container-content {
  float : left;
  width : 720px; /* 760px = 720px + 40px padding */
  height : 100%;
  margin : 0;
  padding : 0 20px 0 20px;
}

#container-content #products-families {
  float : left;
  width : 180px; /* 200px = 180px + 20px padding */
  margin-top : 20px;
  padding : 10px 0 10px 0;
  border-right : 1px solid #000;
}

#products-families p {
 text-align : justify;
 padding : 0 10px 0 0;
}

#products-families img {
  width : 179px; /* 180px = 179px + 1px border */
  height : 180px;
  border-left : 1px solid #000;
  border-top : 1px solid #000;
  border-bottom : 1px solid #000;
  margin : 10px 0 10px 0;
}

#products-families a.item, #products-families a.itemselected {
  display : block;
  height : 20px;
  padding-left : 20px;
  margin-bottom : 10px;
  font-weight : normal;
  text-decoration : none;
  color : #6C6CFF;
  border-bottom : 1px solid #6C6CFF;
  background : #FFF url(../imagenes/bullet01.gif) 10px 6px  no-repeat;
}

#products-families a.item:hover, #products-families a.itemselected {
  color : #AC0000;
  border-bottom : 1px solid #AC0000;
  background : #E2E2FF url(../imagenes/bullet02.gif) 10px 6px no-repeat;
}

#container-content #products-content {
  float : left;
  width : 519px; /* 560px = 540px + 20px padding + 10px padding + 1px border*/
  margin-top : 23px;
  padding : 0 0 0 10px;
  background : transparent;
}

#products-content img#mapa {
  width : 519px;
}

#container-content #products-list {
  float : left;
  width : 519px; /* 560px = 540px + 20px padding + 10px padding + 1px border*/
  margin-top : 23px;
  padding : 0 0 0 10px;
  /* background : transparent url(../imagenes/bg_pc01.gif) top right repeat-y; */
  background : #FFF;
}

#products-list img {
  display : block;
  float : left;
  clear : left;
  width : 100px;
  height : 100px;
  border : 1px solid #000;
}

#products-list p.shortdesc {
  float : left;
  width : 407px; /* 419px = 417px + 2px border + 10px margin */
  margin-left : 10px;
}

#container-content #product-desc {
  float : left;
  width : 519px; /* 560px = 540px + 20px padding + 10px padding + 1px border*/
  margin-top : 23px;
  padding : 0 0 0 10px;
  background : transparent url(../imagenes/bg_pc01.gif) top right repeat-y;
}

#product-desc img {
  display : block;
  float : left;
  clear : left;
  width : 200px;
  height : 200px;
  border : 1px solid #000;
}

#product-desc p.longdesc {
  float : left;
  width : 307px; /* 419px = 417px + 2px border + 10px margin */
  margin-left : 10px;
}

#product-desc #fabricacion {
  display : block;
  clear : both;
}

#fabricacion img {
  display : block;
  width : 517px; /* 519px = 517px + 2px border*/
  height : 200px;
  border : 1px dotted #6C6CFF;
  margin-bottom : 10px;
}

#products-content #paginado {
  display : block;
  float : left;
  width : 100%;
  text-align : center;
  margin : 0 0 20px 0;
  font-size : 0.85em;
  color : #AC0000;
}

#products-content .leyenda {
  display : block;
  float : left;
  width : 100%;
  font-size : 0.85em;
  color : #666666;
  text-align : right;
  margin : 10px 0 0 0;
}

.leyenda .l1, .leyenda .l2 {
  display : block;
  float : right;
  height : 20px;
  background : #FFF url(../imagenes/ico_p.gif) 0px 5px no-repeat;
  padding-left : 16px;
  line-height : 2;
}

.leyenda .l2 {
  background : #FFF url(../imagenes/ico_np.gif) 0px 5px no-repeat;
  margin-right : 10px;
}

.span25 {
  display : block;
  float : left;
  width : 25%;
  height : 100%;
}

.span50 {
  display : block;
  float : left;
  width : 50%;
  height : 100%;
}

.span75 {
  display : block;
  float : left;
  width : 75%;
  height : 100%;
}

.span100 {
  display : block;
  float : left;
  width : 100%;
  height : 100%;
}

.milegend {
  display : block;
  float : left;
  width : 517px; /* 519px = 517px + 2px border */
  height : 25px;
  line-height : 1.7;
  border : 1px solid #000;
  background : #E2E2FF;
  text-align : center;
  font-weight : bold;
  font-size : 1.1em;
}

.mifieldset {
  display : block;
  float : left;       
  width : 517px; /* 519px = 517px + 2px border */
  margin-bottom : 10px;
  border-left : 1px solid #000;
  border-right : 1px solid #000;
  border-bottom : 1px solid #000;
  background : #FFFFBB;
}

form .cajaform {
  display : block;
  float : left;
  width : 507px;
  margin : 5px 0 5px 0;
  padding : 0 5px 0 5px;
  line-height : 1.5;
}

#obligatorio {
  display : block;
  text-indent : 10px;
  background : transparent url(../imagenes/obligatorio.gif) top left no-repeat;
  margin : 0 0 15px 0;
}

.input_optativo, .input_obligatorio {
  display : block;
  float : left;
  width : 75%;
}

.input_obligatorio {
  background : transparent url(../imagenes/obligatorio.gif) top left no-repeat;
}

input {
  font-family : Trebuchet MS, sans-serif;
  font-size : 1em;
  height : 25px;
}

.buttonprinc, .buttonsec {
  height : 22px;
  margin-right : 10px;
  border : 1px solid #000;
  font-size : 0.9em;
  background : #6C6CFF;
  color : #FFF;
  font-weight : bold;
}

.buttonsec {
  background : #E2E2FF;
  color : #000;
  font-weight : normal;
}

.inputtextp, .inputtextn {
  width : 25%;
  height : 15px;
  padding : 1px 2px 1px 2px;
  font-size : 1em;
  line-height : 1.2;
  background : transparent url(../imagenes/bg_input.gif) top left repeat-x;
  border : 1px solid #000;
  margin-left : 10px;
}

.inputtextn {
  width : 50%;
}

.inputcheckbox {
  height : 18px;
  width : 18px;
  margin : 0 5px 0 10px;
  background : transparent;
  border : 1px solid #000;
}

.miselect {
  width : 50%;
  height : 20px;
  font-family : Trebuchet MS, sans-serif;
  font-size : 1em;
  background : #FFF;
  border : 1px solid #000;
  margin-left : 10px;
}

.inputtextareab {
  width : 95%;
  height : 100px;
  padding : 1px 2px 1px 2px;
  margin-left : 10px;
  font-family : Trebuchet MS, sans-serif;
  font-size : 1em;
  line-height : 1.2;
  border : 1px solid #000;
  background : #FFF url(../imagenes/bg_input.gif) bottom left repeat-x;
}

.inputfile {
  width : 95%;
  height : 19px;
  margin-left : 10px;
  font-size : 1em;
  font-family : Trebuchet MS, sans-serif;
  line-height : 1.2;
  background : #FFF url(../imagenes/bg_input.gif) bottom left repeat-x;
  border : 1px solid #000;
}

body[id="cuerpo"] .inputfile {
  background : #FFF;
  height : 20px;
  width : 0;
}

/****/
/* Clases para tablas */
/****/

#products-content table.listado {
  float : left;
  padding : 0;
  margin : 0;
  width : 100%;
  height : 100%;
  background : #FFF;
  border-collapse : collapse;
  text-align : left;
  margin : 10px 0 10px 0;
}

table.listado th {
  color : #AC0000;
  text-align : center;
  font-weight : bold;
  border-bottom : 2px solid #AC0000;
  line-height : 0.9;
  font-size : 0.9em;
  background : #FFF;
  vertical-align : bottom;
  padding : 0 5px 5px 5px;
}

table.listado th.linea {
  background : #FFF url(../imagenes/bg_th_listado.gif) bottom left no-repeat;
}

table.listado th a.orderby {
  display : block;
  color : #AC0000;
  text-decoration : none;
}

table.listado tr.selected {
  background : #FCFBF2;
}

table.listado td {
  color : #666666;
  line-height : 1;
  font-size : 0.85em;
  height : 20px;
  padding : 5px;
  background : url(../imagenes/bg_px01.gif) bottom left repeat-x;
  background-color : none;
}

table.listado td img.muestra {
  width : 100px;
}

table.listado td#foot {
  background : none;
  background-color : none;
  border-bottom : 1px solid #AC0000;
}

table.listado td.center {
  text-align : center;
}

/****/
/* Clases genericas */
/****/

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  clear : both;
}

h1 {
  margin-bottom : 10px;
  width : 100%;
  border-bottom : 2px solid #6C6CFF;
  color : #6C6CFF;
  font-size : 1.6em;
  text-indent : 20px;
  background : #FFF;
}

h2 {
  margin-bottom : 10px;
  width : 100%;
  border-bottom : 1px solid #000;
  color : #000;
  font-size : 1.2em;
}

hr {
  display : block;
  width : 100%;
  height : 2px;
  border : none;
  border-bottom : 2px solid #FFF;
  color : #FFF;
}

#content-index hr {
  width : 75%;
  text-align : center;
}

#products-list hr {
  float : left;
  clear : both;
  height : 1px;
  border-bottom : 1px dotted #000;
  margin : 10px 0 0 0;
}

body[id="cuerpo"] #products-list hr {
  margin-bottom : 10px;
}

form {
  padding : 0;
  margin : 0;
}

p {
  margin : 0 0 15px 0;
  padding : 0;
}

strong {
  color : #AC0000;
}

strong.pvp {
  margin-top : -10px;
}

img {
 border : 0;
}

.left {
  display : block;
  float : left;
}

.right {
  display : block;
  float : right;
}

.inline {
  display : inline;
}

.block {
  display : block;
}

.hidden {
  display : none;
}

/****/
/* Clases de enlaces */
/****/

a {
  font-weight : bold;
}

a:link, a:visited, a:active {
  color : #6C6CFF;
}

a:hover {
  color : #AC0000;
}

#headder a {
  text-align : center;
  color : #E2E2FF;
  font-weight : bold;
  text-decoration : none;
  padding : 0 5px 0 5px;
}

#headder a:hover, #headder a:active, #headder a.active {
  color : #000;
  background : #E2E2FF;
}

a.masinfo, a.masinfo_c, a.masinfo_t, a.masinfo_f, a.masinfo_v {
  display : block;
  padding-left : 10px;
  margin : 5px 20px 0 0;
  font-weight : normal;
  background : transparent url(../imagenes/bullet01.gif) 0px 7px no-repeat;
}

a.masinfo_c {
  padding-left : 20px;
  background : transparent url(../imagenes/comprar.gif) 0px 3px no-repeat;
}

a.masinfo_c:hover {
  background : transparent url(../imagenes/comprar_on.gif) 0px 3px no-repeat;
}

a.masinfo_t {
  padding-left : 20px;
  background : transparent url(../imagenes/tallas.gif) 0px 3px no-repeat;
}

a.masinfo_t:hover {
  background : transparent url(../imagenes/tallas_on.gif) 0px 3px no-repeat;
}

a.masinfo_f {
  padding-left : 20px;
  background : transparent url(../imagenes/ficha.gif) 0px 3px no-repeat;
}

a.masinfo_f:hover {
  background : transparent url(../imagenes/ficha_on.gif) 0px 3px no-repeat;
}

a.masinfo_v {
  padding-left : 20px;
  background : transparent url(../imagenes/volver.gif) 0px 3px no-repeat;
}

a.masinfo_v:hover {
  background : transparent url(../imagenes/volver_on.gif) 0px 3px no-repeat;
}

a.masinfo:hover {
  background : transparent url(../imagenes/bullet02.gif) 0px 7px no-repeat;
}

#footer a.oyw {
  float : right;
  color : #FFF;
  font-weight : normal;
  text-decoration : none;  
}

#footer a.oyw:hover {
  color : #000;
  text-decoration : underline;
}

#paginado a {
  font-weight : normal;
}
#paginado a:hover {
  text-decoration : underline;
}