/* --------------------------------------------------------------------------------------------------------------
  DEFINICIONES DE ESTILOS GENERALES PARA TODO EL SITIO                                                          
  Las modificaciones realizadas sobre esta sección afectan a todas las páginas del sitio                        
  Desarrollado por www.pabloimpallari.com.ar                                                                 
  --------------------------------------------------------------------------------------------------------------- */

/* Tags */
body { text-align: center; margin: 0px; padding: 0px; background: #f1f1f1 url(imagenes/fondo-body.gif) repeat-x left top; }
p, div { font: 11px/16px Verdana, Arial, Helvetica, sans-serif; color: #88929a; margin: 0; padding: 0; }
h1 { font: normal 23px/28px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; color: #626B73; margin: 0; padding: 0; }
h2 { font: normal 17px/22px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; color: #626B73; margin: 0; padding: 0; }
h3 { font: bold 10px/15px Verdana, Arial, Helvetica, sans-serif; color: #88929a; margin: 0; padding: 0; }
h4 { font: bold 11px/20px Verdana, Arial, Helvetica, sans-serif; color: #626B73; margin: 0px 0px 8px; padding: 0; }
/* El h4 se utiliza para el texto "Agregar al carrito */
br { clear: both; line-height: 1px; height: 1px; font-size: 1px; }
ul { margin: 12px; padding: 0; }
li { margin: 0; padding: 4px; }
form { margin: 0; padding: 0;}

/* Colores para los links, segun la sección a la que correpsondan (Cosmetica; Profesional y Escuela) */
a { color: #003366 }
h2 a { color: #003366; text-decoration: none; } h2 a:hover { color: #003366; text-decoration: underline; }
#cosmetica h2 a, #cosmetica h3 a { color: #4278D3; text-decoration: none; }
#cosmetica h2 a:hover, #cosmetica h3 a:hover { color: #4278D3; text-decoration: underline; }
#cosmetica a { color: #4278D3; }
#profesional h2 a, #profesional h3 a { color: #F08B14; text-decoration: none; }
#profesional h2 a:hover, #profesional h3 a:hover { color: #F08B14; text-decoration: underline; }
#profesional a { color: #F08B14; }
#escuela h2 a, #escuela h3 a { color: #70AF00; text-decoration: none; }
#escuela h2 a:hover, #escuela h3 a:hover{ color: #70AF00; text-decoration: underline; }
#escuela a { color: #70AF00; }

/* Layout */
#contenedor { width: 780px; margin: 0 auto; text-align: left; border: 1px solid #b0b5ba; background: #FFFFFF; } /* Todo */
#contenido { padding: 0; margin: 10px 0px; } /* Todo lo que esta entre el encabezado y el pie */

#contenidoPrincipal { float: left; width: 546px; padding: 0; margin: 0px 12px 10px 0px; } /* El contenido principal, sin la barra lateral */

#contenidoFull { float: left; width: 740px; padding: 0; margin: 10px 20px 20px; } /* Çontenido Full */

#carrito #contenidoPrincipal, #registro #contenidoPrincipal {
	float: left;
	width: 780px;
	padding: 0;
	margin: 0px 0px 10px;
} /* El contenido principal completo para las paginas del carrito */
#contenidoPrincipal .pad { margin: 0; padding: 10px 20px; } /* Padding sobre el contneido principal */

/* Encabezado */
#encabezado { width: 100%; float: left; margin: 0; padding: 0; background: url(imagenes/adornoTop.gif) no-repeat left top; }
#encabezado h1 a { display: block; float: left; margin: 0; padding: 20px; text-decoration: none; }
#encabezado #usuarios { float: right; padding: 20px; }
#encabezado #usuarios p { font: 10px/15px Verdana, Arial, Helvetica, sans-serif; text-align: right; color: #656C72; }
#encabezado #usuarios a { text-decoration: none; color: #333333; }
#encabezado #usuarios a:hover { text-decoration: underline; color: #000000; }

/* Menu Horizontal */
#menuHorizontal { clear: both; width: 100%; height: 24px; margin: 0px; padding: 0px; list-style: none; background: #6C747A url(imagenes/fondo-MenuHorizontal.gif) repeat-x left center; }
#menuHorizontal li{ margin: 0; padding: 0; display: inline; }
#menuHorizontal li a { float: left; font: bold 11px/11px Verdana, Arial, Helvetica, sans-serif; margin: 2px 16px 0px; padding: 4px; text-decoration: none; color: #FFFFFF; }
#menuHorizontal li a:hover{ color: #FFFFFF; text-decoration: underline; }

/* Pie de Pagina */
#pie { clear: both; margin: 0px; padding: 10px 20px; background: #6c747a; border-top: 1px solid #848484; }
#pie p { font: 11px/16px Verdana, Arial, Helvetica, sans-serif; color: #FFFFFF; margin: 0; padding: 0; }
#pie a { color: #C7CACD; text-decoration: none; }
#pie a:hover { color: #FFFFFF; text-decoration: none; }
#pie .creditos { float: right; font: 10px/17px Verdana, Arial, Helvetica, sans-serif; color: #C7CACD; }

/* Grillas de Productos */
#grillaProductos { margin: 10px 0px; padding: 0px; }
#grillaProductos .producto { width: 150px; height: 190px; float: left; text-align: center; margin: 10px 10px 0px 0px; padding: 0px; overflow: hidden; }
#grillaProductos .copete { font-size: 10px; line-height: 15px; }
#grillaProductos img { margin: 0px 0px 6px; padding: 0px; }
#cosmetica #grillaProductos img { border: 1px solid #4278D3; background: #BACEEF; }
#profesional #grillaProductos img { border: 1px solid #F08B14; background: #FAD9AF; }
#escuela #grillaProductos img { border: 1px solid #70AF00; background: #E1FFAA; }

/* Breadcrumbs */
.breadcrumbs { font: 10px/10px Verdana, Arial, Helvetica, sans-serif; margin: 0px 0px 16px; padding: 0px; color: #88929a; }
.breadcrumbs a{ color: #88929a; }

/* Paginador */
#paginador { clear:both; margin: 0px; padding: 10px 0px 0px; list-style: none; }
#paginador li { display: inline; font: bold 10px/28px Verdana, Arial, Helvetica, sans-serif; margin: 0px 2px 0px 0px; }
#paginador li.actual { font: bold 12px/28px Verdana, Arial, Helvetica, sans-serif; padding: 4px 6px; color: #000000; }
#paginador li a { font: bold 10px/28px Verdana, Arial, Helvetica, sans-serif; padding: 4px 6px; text-decoration: none; background: #ffffff; border: 1px solid #CCCCCC; }
#paginador li a:hover{ color:#FFFFFF; text-decoration: none; background: #999999; border: 1px solid #999999; }

#cosmetica #paginador li a:hover{ background: #4278D3; border: 1px solid #4278D3; }
#profesional #paginador li a:hover{ background: #F08B14; border: 1px solid #F08B14; }
#escuela #paginador li a:hover{ background: #70AF00; border: 1px solid #70AF00; }

/* Lateral General */
.lateral { float: right; width: 222px; padding: 0; margin: 10px 0px; border-bottom: 5px solid #88929a; background: url(imagenes/bordeLaterales.gif) repeat-y left top; clear: right; }
.lateral .pad { margin: 0; padding: 20px; background: url(imagenes/bordeTopLateral.gif) no-repeat left top; }
.lateral .pad h3 { font: bold 11px/16px Verdana, Arial, Helvetica, sans-serif; color: #88929a; margin: 0; padding: 0; }

/* Lateral General con Color, segun ID del Body */
#cosmetica .lateral { background: #f4f7fc url(imagenes/bordeLaterales.gif) repeat-y left top; border-bottom: 5px solid #4278D3 }  #cosmetica .lateral .pad { background: url(imagenes/bordeTopLatCosmetica.gif) no-repeat left top; }
#profesional .lateral { background: #fffbf6 url(imagenes/bordeLaterales.gif) repeat-y left top; border-bottom: 5px solid #F08B14 }  #profesional .lateral .pad { background: url(imagenes/bordeTopLatProfesional.gif) no-repeat left top; }
#escuela .lateral { background: #f9fcf5 url(imagenes/bordeLaterales.gif) repeat-y left top; border-bottom: 5px solid #70AF00 }  #escuela .lateral .pad { background: url(imagenes/bordeTopLatEscuelas.gif) no-repeat left top; }

/* Lateral Cosmetica */
.lateralCosmetica { float: right; clear: right; width: 222px; padding: 0; margin: 10px 0px; border-bottom: 5px solid #F08B14; background: #f4f7fc url(imagenes/bordeLaterales.gif) repeat-y left top; }
.lateralCosmetica .pad { margin: 0; padding: 20px; background: url(imagenes/bordeTopLatCosmetica.gif) no-repeat left top; }
.lateralCosmetica a, #profesional .lateralCosmetica a, #escuela .lateralCosmetica a, .lateralCosmetica a:hover, #profesional .lateralCosmetica a:hover, #escuela .lateralCosmetica a:hover { color: #4278D3; }

/* Lateral Profesionales */
.lateralProfesional { float: right; clear: right; width: 222px; padding: 0; margin: 10px 0px; border-bottom: 5px solid #F08B14; background: #fffbf6 url(imagenes/bordeLaterales.gif) repeat-y left top; }
.lateralProfesional .pad { margin: 0; padding: 20px; background: url(imagenes/bordeTopLatProfesional.gif) no-repeat left top; }
.lateralProfesional a, #cosmetica .lateralProfesional a, #escuela .lateralProfesional a, .lateralProfesional a:hover, #cosmetica .lateralProfesional a:hover, #escuela .lateralProfesional a:hover { color: #F08B14; }

/* Lateral Escuelas */
.lateralEscuelas { float: right; clear: right; width: 222px; padding: 0; margin: 0px 0px 10px; background: #f9fcf5 url(imagenes/bordeLaterales.gif) repeat-y left top; border-bottom: 5px solid #70AF00; }
.lateralEscuelas .pad { margin: 0; padding: 20px; background: url(imagenes/bordeTopLatEscuelas.gif) no-repeat left top; }
.lateralEscuelas a, #cosmetica .lateralEscuelas a, #profesional .lateralEscuelas a, .lateralEscuelas a:hover, #cosmetica .lateralEscuelas a:hover, #profesional .lateralEscuelas a:hover { color: #70AF00; }

/* --------------------------------------------------------------------------------------------------------------
  DEFINICIONES DE ESTILOS EXCLUSIVOS DE LA HOME                                                                 
  Las modificaciones realizadas sobre esta sección afectan unicamente a la home                                 
  --------------------------------------------------------------------------------------------------------------*/

/* Tratamientos en la Home */
#boxTratamientos { margin: 0px 0px 20px; padding: 0px; background: url(imagenes/separadorVertical.gif) repeat-y center top; }
#tratamiento1 { width: 248px; float: left; margin: 0px; padding: 0px; }
#tratamiento2 { width: 240px; float: left; margin: 0px 0px 0px 18px; padding: 0px; }

/* Utilidades */
.tituloSeparador { font: normal 11px/11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; background: #f2f2f2; margin: 10px 0px 10px -20px; text-align: right; padding: 6px 10px 6px 4px; color: #6c747a; }

/* Fechines */
.lateralEscuelas dl { margin: 18px 0px 0px; padding: 0px; }
.lateralEscuelas dt { width: 30px; float: left; background: #70AF00; text-align: center; font: bold 10px/15px Verdana, Arial, Helvetica, sans-serif; color: #FFFFFF; margin: 3px 0px 0px; padding: 0; border: 1px solid #999999; }
.lateralEscuelas dt span { clear: both; display: block; text-align: center; background: #ffffff url(imagenes/fondo-fechas.gif) no-repeat right bottom; font: normal 19px/19px Tahoma, Verdana, Arial, Helvetica, sans-serif; color: #7c858c; margin: 0; padding: 2px; border-top: 1px solid #999999; }
.lateralEscuelas dd { font: 11px/14px Verdana, Arial, Helvetica, sans-serif; color: #88929a; margin: 0; padding: 0 0 0 38px; }
.lateralEscuelas dd a { color: #70AF00; font-weight: bold; }

/* --------------------------------------------------------------------------------------------------------------
  DEFINICIONES DE ESTILOS EXCLUSIVOS DE PAGINAS INTERNAS                                                        
  --------------------------------------------------------------------------------------------------------------*/

#categorias { margin: 10px 0px 0px; padding: 0px; list-style: none; }
#categorias li { margin: 0; padding: 0; }
#categorias li a { display: block; font: 11px/16px Verdana, Arial, Helvetica, sans-serif; margin: 0; padding: 4px 4px 4px 22px; text-decoration: none; }
#categorias li a:hover { text-decoration: underline; }
#cosmetica #categorias li a, #cosmetica #categorias li a:hover { background: url(imagenes/tip-cosmetica.gif) no-repeat 0px 7px; }
#profesional #categorias li a, #profesional #categorias li a:hover { background: url(imagenes/tip-profesional.gif) no-repeat 0px 7px; }
#escuela #categorias li a, #escuela #categorias li a:hover { background: url(imagenes/tip-escuela.gif) no-repeat 0px 7px; }

.fotoChica { margin: 0px 10px 10px 0px; padding: 2px; float: left; border: 1px solid #CCCCCC; }
.fotoGrande { margin: 0px 0px 10px 10px; padding: 0px; float: right; border: 1px solid #CCCCCC; clear: right; }
.ampliarFoto { font: 10px/16px Verdana, Arial, Helvetica, sans-serif; float: right; clear: right; margin: -6px 0px 10px 10px; padding:0 0 0 20px; background: url(imagenes/ico-lupita.gif) no-repeat left top; }

/* Errores de Registración */
.sombra1 { width: 100%; background: #ccc; position: relative; }
.sombra2 { background-color: #F5F5F5; border: 1px solid #CCCCCC; background-image: url(imagenes/fondoCaja.gif); background-repeat: no-repeat; background-position: left top; position: relative; top: -2px; left: -2px; margin: 0px; padding: 10px; }

/* Precio y Carrito */
.precio { font: normal 20px/22px "Trebuchet MS", Arial, Helvetica, sans-serif; margin: 8px 2px 0px; padding: 0; }
.aclaraciones { font: 10px/11px Verdana, Arial, Helvetica, sans-serif; }
#cajita1 { background: #FFF8E8 url(imagenes/cajitaBordeTop.gif) no-repeat left top; margin: 0px; padding: 0px; width: 236px; }
#cajita2 { background: url(imagenes/cajitaBordeBottom.gif) no-repeat right bottom; margin: 0px; padding: 10px; }
.accesosCosmetica a { color: #4278D3; text-decoration: none; }
.accesosProfesionales a { color: #F08B14; text-decoration: none; }

.carritoTitulo { border-bottom: 3px solid #f4cfa5; }
.carritoArticulo { border-bottom: 1px solid #CCCCCC; }
.carritoTotal { color: #fa7b0f; font-size: 14px; line-height: 14px; font-weight: bold; margin-top: 4px; margin-bottom: 14px; }
.obligatorio { color: #990000; font: 10px/10px Verdana, Arial, Helvetica, sans-serif; }