/*
 * Hoja de estilos de Cosmetica natural
 */
/*<--Inicio estilos comunes */
BODY {
  text-align: center;	/* Esto es necesario en Internet Explorer para centrar la página*/
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	background-color: #FBFBE5;
	color: black;
	font-size: 11pt;
}
body A, body A:visited{
	color: #19185E;
	text-decoration: none;
	font-weight: bold;
}
/* Define el estilo de la capa mientras recibe los datos: se realiza un XHTMLRequest */
.ajaxLoading {
	padding: 120px;
	background: url(images/spinner.gif) no-repeat center;
}
h3 {
  color: #35892a;
    background: transparent url(images/h1.gif) left center no-repeat;
    padding-left: 30px;
	font-size: 15pt;
	margin-bottom: 0.5em;
    border-bottom: 1px solid #7D8965;
	padding-bottom: 0.2em;
}
h2 {
color:#a97c2c;
}
p.flower {
    background: url(images/lselect_a_bg.gif) no-repeat left top;
    padding-left: 20px;
}
/* Se usa para poner un texto dentro de un cuadro. */
DIV.resaltado {
  margin-bottom: 1em;
  padding: 0.5em 1em;
  border: 3px solid #EAB7AA;
  background: #FBFBE5;
}

div#alert {
position:fixed;
visibility: hidden;
   top: 20%;
    left: 30%;
	width: 300px;
/* patch para de internet explorer*/
  _position:absolute;
  _top:expression(eval(document.body.scrollTop)+200);
/* patch para de internet explorer*/

  border: 3px solid #EAB7AA;
  background: #FBFBE5;
  padding: 1em;
}
/* formularios */
div.formMarco
{
position: relative;
background-color: #f5579b;
padding:10px;
width:100%;
margin-bottom:20px;
}
/*inicio pa mi que esto no vale esta #order .form que lo sobreescribe*/
.form
{
    width:100%;
	font-size: 11pt;
	background-color: #ff8cc9;
	color: #362130;
}
.form th
{
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #dd1882;
padding: 4px;
color: #785a6f;
background-color: #ffcce7;
}
.form td
{
  padding: 3px;
  vertical-align: top;
}
.form td.number
{
	text-align: right;
}
.form a, .form a:visited
{
	text-decoration: none;
	color: #362130;
	font-weight: normal;
}
.form a:hover {
	color: #150545;
}
.form tr.total {
	font-weight: bold;
	text-align: right;
}
.form td.hr{
background-color:#dd1882;
height:6px;
padding: 0px;
}

#discountPc {
margin: 0px;
margin-left: 0.5em;
}
.form tr.alert{
background-color:white;
}
.form tr.alert td{
	font-weight: bold;
}
/*fin pa mi que esto no vale esta #order .form que lo sobreescribe*/
input.invalid {
background-color: #FF9;
border: 2px red inset;
}
/*Formularios sin tabla*/
#form_box {
	clear: both;
	width: 95%;
	background: #f8f8f8;
	border: 1px solid #d6d6d6;
	border-left-color: #e4e4e4;
	border-top-color: #e4e4e4;
	font-size: 11px;
	font-weight: bold;
	padding: 0.5em;
	margin-top: 10px;
	margin-bottom: 2px;
}
 
#form_box div {
	padding: 0.2em 0.5em;
}
 
#form_box div.hr {
	border-bottom: 2px solid #e2e2e1;
	height: 0px;
	margin-top: 0pt;
	margin-bottom: 7px;
}
 
#form_box p.up {
	float: left;
	margin-top: 6px;
	margin-bottom: 2px;
	width: 100%;
}
#form_box p.left {
	float: left;
	margin: 4px 0pt;
	width: 20%;
}

#form_box p.dwon {
	float: left;
	margin-top: 2px;
	margin-bottom: 6px;
	width: 100%;
}
/*Inicio Formulario de pedido*/
form.minimal input, form.minimal textarea, form.minimal select {
	background:#FFFFFF url(images/field-bg-top.gif) repeat-x scroll left top;
	color:#666666;
	font-family:Trebuchet MS,sans-serif;
	font-size:0.9em;
	padding:3px;
	vertical-align:top;
	border:1px solid #AAAAAA;
}
form.minimal input:focus, form.minimal textarea:focus, form.minimal select:focus {
	color:#444444;
	background:#FFFFFF url(images/field-bg-bottom.gif) repeat-x scroll left bottom;
}
form.minimal input:hover, form.minimal textarea:hover, form.minimal select:hover {
	border:1px solid #FFCC00;
	background:#FFFFFF url(images/field-bg-bottom.gif) repeat-x scroll left bottom;
}
form.minimal div.reqtxt {
	color:#785A6F;
	font-size:0.7em;
	line-height:1.2em;
	vertical-align:top;
}
form.minimal input.button {
	background: transparent url(images/button-bg.gif) repeat-x scroll 0 0;
	border-color:#ECECEC #ADADAD #ADADAD #ECECEC !important;
	border-style:solid !important;
	border-width:1px !important;
	font-size:0.8em;
	padding:2px 1em;
}
/*Fin Fromulario de pedido*/
/*<-- Fin estilos comunes */
/*
 * Bloque principal que sirve para centrar el contenido de la página.
 * Todos los demás bloques están dentro de este
 */
#containerMarco {
	position: relative;
	width: 900px;
	margin-left: auto; /* Esto es para centrarlo */
	margin-right: auto;
	height: auto;
	text-align: left;
}

/*<-- Inicio Cabecera */
#head {
	position: relative;
	width: 100%;
	height: 235px;
	background-image: url(images/head.jpg);
}
#head A {
	color: #ffffff !important;
}
#head A:hover {
	color: #fdfd85 !important;
}
#head A.selected {
	color: #ffd800 !important;
}
/* Situado arriba a la izquieda, ponemos el menú para cambiar de contenido */
#topmenu {
	position: absolute;
	left: 3%;
	top: 6%;
	width: 80%;
}
#topmenu A{
	font-size: 17pt;
	margin: 1em;
}
/* Situado abajo a la derecha, ponemos mas botones */
#subtopmenu {
	position: absolute;
	left: 27%;
	top: 82%;
	width: 68%;
}
#subtopmenu A{
	margin: 0.6em;
	font-size: 14pt;
}
#connectStatusNameBox {
	background-color:#DD1882;
	color:#FFD800;
	font-weight:bold;
	height:55px;
	left:27%;
	position:absolute;
	top:58%;
	width:148px;
	z-index:0;
}
#connectStatusNameBox.connected {
	display:block;
}
#connectStatusNameBox.disconnected {
	display:block;
}
#connectStatusNameBox p {
	margin: 0.5em;
}
#connectStatusIcon.connected {
	padding-left: 10px;
	background: transparent url(images/on.gif) no-repeat left center;
}
#connectStatusIcon.disconnected {
	padding-left: 10px;
	background: transparent url(images/off.gif) no-repeat left center;
}
/*<-- Fin Cabecera */
  
/*<-- Inicio Bloque central. */
#containerBody
{
	position: relative;
	width: 100%;
	background: url(images/container_bg.png) repeat-y;
}
/* 
 * El contenido del medio se divide en dos partes. En la izquierda se situan los menus,
 * a la derecha se muestra el contenido.
 */
 
/*<-- Inicio bloque de la izquierda. */
/* bloque contenedor de toda la parte izquierda  */
#containerLeft {
	float: left; /* para que el contenido de la derecha quede al lado y no debajo  */
	width: 216px;
	overflow: hidden; /* Evita el desbordamiento */
}
/*
 * El siguiente bloque se utiliza para dar un margen izquierdo al contenido de containerLeft
 * Podríamos ahorrarnos este bloque con un padding en el lado izquierdo de su contenedor pero esto
 * ocasionaría que el ancho de los bloques contenidos fuera el total del bloque contenedor (Firefox)
 * excepto si especificáramos el ancho de los bloques contenidos como auto 
 */
.leftContentBox {
	position: relative;
	margin-left: 34px;
}
/* --> Inicio unidad lista menú
 * Se utilizan una bullet list para cada uno de los menús
 */
ul.miniBox {
  width: 100%;  /* es necesario en IE porque tiene width=Auto por defecto */
  margin-bottom: 0.2em;
  margin:0;
  padding:0;
  list-style:none;
  text-align:left;
}
ul.miniBox li {
  background:url("images/miniboxmiddleright.png") repeat-y right top;
  width:100%;
  background-color:#fa22ce;
}
ul.miniBox li div{
  padding-left: 30px;
  padding-right: 20px;
  padding-top: 4px;
  padding-bottom: 2px;
  text-decoration:none;
  background:url("images/miniboxmiddleleft.png") repeat-y left top;
  /*position:relative;*/
}
ul.miniBox li div a, ul.miniBox li div a:visited{
  color: white;
}
ul.miniBox li div a:hover { color: yellow;}
ul.miniBox li div a.selected, ul.miniBox li div a:hover.selected, ul.miniBox li div a:visited.selected { color: #ffd800;}
ul.miniBox li.head {
  background:url("images/miniboxheadright.png") no-repeat right top;
}
ul.miniBox li.head div{
  padding-left: 25px;
  padding-top:1em;
  padding-bottom:0.2em;
	font-size: 120%;
	font-weight: bold;
    background:url("images/miniboxheadleft.png") no-repeat left top;
}
ul.miniBox li.bottom {
  background:url("images/miniboxbottomright.png") no-repeat right bottom;
}
ul.miniBox li.bottom div{
  padding-bottom:2em;
  background:url("images/miniboxbottomleft.png") no-repeat left bottom;
}
/* <-- Fin  unidad lista menú */

/* <-- Inicio miniBox especificico para carro de la compra  */
#mini_order li.product span, #mini_order li.total span {
	margin: 0.2em;
	font-size: 9pt;
	color: white;
}
#mini_order li.product label, #mini_order li.total label {
	font-size: 9pt;
	margin: 0.2em;
}
#mini_order li.product:hover{
  background-color:#fa52ee
}
#mini_order li.product div a, #mini_order li.product div a:visited
,#mini_order li.total div a, #mini_order li.total div a:visited
{
	font-size: 9pt;
	margin: 0.3em;
}
#mini_order a.eliminar:hover{
	color: #490505;
	font-weight: bold;
}
#mini_order a.checkout {
	background-color:#fa52ee;
	border: 1px solid #ffffff;
	padding: 1px 5px;
	font-size:12pt;
	margin:0;
}
#mini_order a.selected {
	color:#ffd800;
}
/* <-- Fin  miniBox especificico para carro de la compra */

/*<-- Fin bloque de la izquierda. */

/*<-- Inicio bloque de la derecha. */

/*Bloque que contiene todo el contenido de la derecha*/
#containerRight {
	float: left;
	width: 684px;
	overflow: hidden;	/*Para que no salte a la parte de abjao si se sobrepasa el límite*/
}
/* Al igual que en la parte de los menus, aquí se utiliza este contenedor para situar
 * el contenido que va a la derecha y así establecer unos márgenes
 */
#rightContentBox {
	position: relative;
	margin-left: 25px;
	margin-right: 50px;
}
#rightContentBox.ajaxLoading {
	padding: 100px;
	background: url(images/spinner.gif) no-repeat center;
}

/* <-- inicio Apartado shop */
/* Se usa para los link del menú Catálogo. Líneas de productos.*/
.lineas {
	margin-left: 1em;
	margin-bottom: 0.3em;
	font-size: 11pt;
}
.lineas A, .lineas A:visited{
  color: white;
  text-decoration: none;
}

/*
 * Marco de los productos.
 */
#containerProducts {
  width: 100%;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
	background-color: #FFFFFF;
	border: 1px solid #a5eb93;
}
DIV.product {
  position: relative;
  width: 100%;
  margin-top: 1em;
	border-bottom: 1px solid #7D8965;
	background: transparent url(images/h1.gif) no-repeat right bottom;
  padding-bottom: 0.3em;
	color: #3d3e3d;
}
DIV.product IMG{
  float: left;
  margin-right: 1.2em;
  margin-left: 0.8em;
  margin-top: 0.4em;
  margin-bottom: 0.2em;
  padding-bottom: 0.5em;
}
DIV.product P {
  margin-left: 0.2em;
  margin-top: 0.4em;
}
DIV.product span.price  {
  margin-left: 0em;
  margin-right: 0.5em;
  padding:0.3em;
	color:#333333;
	background-color: #FFFFFF;
	font-size: 12pt;
}
DIV.product span.option  {
  margin-right: 0.5em;
  margin-bottom:0.5em;
}
DIV.product input.buttonAdd  {
	margin-right: 0.5em;
}
DIV.product span.ampliar  {
	margin: 0.5em;
}
DIV.categoria {
  margin-bottom: 1em;
  width: 100%;
}
DIV.categoria h2{
  color: #dd1883;
  margin-bottom:0.2em;
  padding-left: 0.5em;
}
DIV.product h3 {
    background: none;
    padding-left: 0px;
    border-bottom: 0px;
	padding-bottom: 0em;
	margin-bottom: 0em;
	margin-top: 0.2em;
	color: #37af27;
}
/*  <--Inicio Solapas */
#flaps {
	width:100%;
	margin:auto;
	text-align:left;
	padding:0;
}
#flaps ul {
  margin:0;
  padding:0;
  list-style:none;
  text-align:left;
}
#flaps li {
  float:left;
  background:url("images/flapright.png") no-repeat right top;
}
#flaps a, #flaps a:visited {
  float:left;
  display:block;
  white-space: nowrap;
  padding:5px 12px 0px 12px;
  text-decoration:none;
  background:url("images/flapleft.png") no-repeat left top;
  color: white;
}
/* IE5Mac hack \*/
#flaps a{float:none;}
/* end:IE5Mac hack */
#flaps a:hover { color: yellow;}
#flaps .selected {
  background:url("images/flaprightlight.png") no-repeat right top;
  background-color:#F8EBE3;
}
#flaps .selected a, #flaps .selected a:visited{
	font-size: 100%;
	font-weight: bold;
	background:url("images/flapleftlight.png") no-repeat left top;
	color:#18730c;
}
#flaps .selected a:hover { color:yellow;}
/*  <-- Fin solapas */

/*  <-- Inicio Producto ampliado */
div.productoMarco {
  margin: 10px;
  background-color:white;
  padding: 15px;
  clear:both;
}
input.closeImage{
	position:absolute;
	top:0px;
	right:0px;
	width:34px;
	height:34px;
	font-family: Verdana, sans-serif;
	font-size: 22px;
	text-align: center;
	vertical-align: top;
	line-height: 22px;
	letter-spacing: 0px;
	font-weight: bold;
}
#productoAmpliado {
position:absolute;
visibility: hidden;
    top: 20%;
    left: 10%;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  background-color: #F8EBE3;
  color: #362130;
  border: 1px solid #EAB7AA;
}
#productoAmpliado H1{
  color: white;
  width:100%;
  font-size: 14pt;
  text-align: center;
  background-color: #f261ae;
  border-bottom: 2px solid #f279ba;
}
#productoAmpliado IMG{
  float: left;
  margin-right: 25pt;
  margin-left: 15pt;
  margin-top: 5pt;
  margin-bottom: 5pt;
}
#productoAmpliado P {
  margin-left: 0.2em;
}
#productoAmpliado LI {
	list-style-position: inside;
	list-style-type: disc;
}
#productoAmpliado span.price {
	padding:0.2em;
	color:#333333;
	background-color: #FFFFFF;
	margin: 0.3em;
	border: 10px #000000;
	font-size: 12pt;
}
#productoAmpliado a.leftarrow{
	display:block;
	background: transparent url(images/arrowleft.gif) no-repeat scroll 0% 0%;
	width: 17px;
	height: 30px;
	vertical-align: middle;	
}
#productoAmpliado a.rightarrow{
	display:block;
	background: transparent url(images/arrowright.gif) no-repeat scroll 0% 0%;
	width: 17px;
	height: 30px;
	vertical-align: middle;	
}
/*  <-- Fin Producto ampliado */
/* <-- Fin Apartado shop */
/* <-- Inicio Apartado checkout */

/* Cesta */
.basket_overview
{
position: relative;
background-color: #f5579b;
padding:10px;
width:98%;
margin-bottom:20px;
}

#order
{
    width:100%;
	font-size: 11pt;
	background-color: #ff8cc9;
	color: #362130;
}
#order th
{
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #dd1882;
padding: 4px;
color: #785a6f;
background-color: #ffcce7;
}
#order td
{
  padding: 3px;
}
#order td.number
{
	text-align: right;
}
#order a, #order a:visited
{
	text-decoration: none;
	color: #362130;
	font-weight: normal;
}
#order a:hover {
	color: #150545;
}
#order tr.total {
	font-weight: bold;
	text-align: right;
}
#order td.hr{
background-color:#dd1882;
height:6px;
padding-top: 0px;
}

#discountPc {
margin: 0px;
margin-left: 0.5em;
}
#order tr.alert{
background-color:white;
}
#order tr.alert td{
	font-weight: bold;
}
#order tr.info td{
	margin-top: 0.6em;
	padding: 0.3em;
}
#order tr.info:hover td{
  background-color:#FFCCE7 !important;
}
#order tr.info.selected td{
  border: 2px solid #DD1882;
background-color:#FECA97 !important;
}

#entry_zone_id.ajaxLoading{
  background-color:#ffaabb;
}
/* <-- Fin Apartado checkout */
/* <-- Inicio Apartado testimonios */
#contentTestimonials{
border: 1px solid gray;
border-top: 1px solid gray;
padding: 1em;
background: #FBFBE5;
font-size:100%;
}
#contentTestimonials a.contacto{
  padding-left:30px;
  height:13px;
  background:url("images/perfil.gif") no-repeat left;
}
#contentTestimonials a.selected{
  border-bottom: 1px solid #f5579b;
}

/* Bloque contenedor del formulari de contacto */
#msTestimonio {
	position:absolute;
	visibility: hidden;
    top: 0;
  	width: 500px;
  	left: 30%;
}
#msTestimonio H1{
  margin:0;
  width:100%;
  font-size: 14pt;
  text-align: center;
  background-color: #E4E4E4;
  border-bottom: 2px solid #f279ba;
}
#msTestimonio p {
    margin: 1em;
}
/* formato para los menus de navegación de los testimonios*/
#nav_pages_info {
	margin: 1em;
	text-align: left;
	font-size: 100%;
	font-weight: bold;
}
#nav_pages {
    margin: 0.2em 1em 0.5em 0.5em;
    font-size: 100%;
}

/*
* Este estilo se usa para mostrar los testimonios con solapas
*/
.navcontainerTestimonio
{
margin-left: auto;
margin-right: auto;
margin-bottom: 40px;
border-top: 1px solid #999;
}

.navcontainerTestimonio ul
{
list-style-type: none;
text-align: center;
margin-top: -8px;
padding: 0;
position: relative;
}

.navcontainerTestimonio li
{
display: inline;
text-align: center;
margin: 0 5px;
}

.navcontainerTestimonio li a
{
padding: 1px 7px;
color: #666;
background-color: #fff;
border: 1px solid #ccc;
text-decoration: none;
}

.navcontainerTestimonio li a:hover
{
color: #000;
border: 1px solid #666;
border-top: 2px solid #666;
border-bottom: 2px solid #666;
}

.navcontainerTestimonio li a.selected
{
color: #000;
border: 1px solid #666;
border-top: 2px solid #666;
border-bottom: 2px solid #666;
}

/* <-- Fin Apartado testimonios */
/*
* Este estilo se usa para mostrar el índice de las opiniones
*/
.navcontainerReview
{
margin-left: auto;
margin-right: auto;
margin-bottom: 5px;
}

.navcontainerReview ul
{
list-style-type: none;
text-align: center;
padding: 0;
position: relative;
}

.navcontainerReview li
{
display: inline;
text-align: center;
margin: 0 0.1em;
}

.navcontainerReview li a
{
font-size:80%;
color: #666;
text-decoration: none;
}

.navcontainerReview li a:hover
{
color: #000;
}

.navcontainerReview li a.selected
{
color: #000;
}

/* <-- Fin Apartado testimonios */
#navlist
{
padding: 3px 0;
margin:0;
margin-top:10px;
border-bottom: 1px solid #778;
}
#navlist li
{
list-style: none;
margin: 0 0 0 2px;
display: inline;
}
#navlist li a
{
padding: 3px 4px;
border: 1px solid #778;
border-bottom: none;
background: #ff8cc9;
text-decoration: none;
}
#navlist li a:link { color: #362130; }
#navlist li a:visited { color: #362130; }

#navlist li a:hover
{
color: yellow;
background: #f5579b;
border-color: #227;
}

#navlist a.selected, #navlist a.selected:hover
{
background: white;
border-bottom: 1px solid white;
color: #000;
}

#ajaxcontentarea {
border: 1px solid #778;
border-top: 0px;
background-color:white;
padding:10px;
margin-bottom:10px;
}
/* <-- Fin Zona de Usuarios */
/*<--Fin Área derecha central */

/*<-- Inicio Pie de página */
#foot {
	position: relative;
	clear: left;
	height: 143px;
	width: 100%;
	background-image: url(images/footer_bg.png);
	font-size: 10pt;
	text-align:center;
}
/* Aquí se situa el texto en dos columnas en el pie de página */
#foot .text {
	float:left;
	width:50%;
	margin-top: 70px;
}