/************* Herder Mexico - CSS OsCommerce - somosene.com ************/



/* paleta de colores



blanco: #fff

negro: #000 

rojo: #cc0033 

gris claro: #bbb 

gris medio: #888 

gris oscuro: #444 



*/



/************* CSS GENERAL ************/

body {

	margin: 0px;

	padding: 0px;

	background: #fff /* url(images/back.png) repeat-y center top */;

	text-align: center;

	font-family: Verdana, Arial, Helvetica, sans-serif;

	font-size: 12px;

	line-height: 1.5;

	color: #333333;

}



h1, h2, h3, h4, h5, h6 { 

	color: #000;

	font-weight: normal;

}



a {

	text-decoration: none;

	color: #cc0033;

}



a:hover {

	text-decoration: underline;

	color: #cc0033;

}



img{ 

	border: 0px;

}





div.clear  { clear: both; } 



/************* ESTRUCTURA ************/



/*

#Body

____________________________________

¡									¡

¡	#header							¡

____________________________________

¡	#menu							¡

____________________________________

¡	#content						¡

¡									¡

¡									¡

¡									¡

¡									¡

¡									¡

¡									¡

¡									¡

¡									¡

____________________________________

¡	#footer							¡

____________________________________

*/

#header {

	width: 900px;

	height: 260px;

}



#menu { width: 900px;}



#content { width: 900px;}



#footer { width: 900px;}



/*

content

____________________________________

¡ #left					¡ ¡#right	¡

¡						¡ ¡			¡

¡						¡ ¡			¡

¡						¡ ¡			¡

¡						¡ ¡			¡

¡						¡ ¡			¡

¡						¡ ¡			¡

¡						¡ ¡			¡

¡						¡ ¡			¡

____________________________________

*/



#left { width: 584px;}



#right { width: 300px;}



/*

#left en index

________________________

¡ .banner				¡	

¡						¡

________________________

¡#fondo 	¡#noticia	¡

¡			¡			¡

¡			¡			¡

_________________________

*/



#left .banner {

	width: 580px;

	height: 250px;

}



#fondo, #noticia { width: 280px;}



/*

#left en categorias

________________________

¡.libro 	¡.libro		¡

¡			¡			¡

_________________________

¡.libro 	¡.libro		¡

¡			¡			¡

_________________________

¡.libro 	¡.libro		¡

¡			¡			¡

_________________________

*/



.libro, .autor{ 

	width: 270px;

	height: 220px;

}



/*

right

___________________

¡ #carrito		  ¡

___________________

¡ .boton ¡ .boton ¡

___________________

¡ .boton ¡ .boton ¡

___________________

¡ .boton ¡ .boton ¡

___________________

¡ .banner	      ¡

___________________

¡ .banner	      ¡

___________________

*/



#carrito { width: 285px;}



#cuenta { width: 285px;}



.boton { 

	width: 135px;

	height: 50px;

}



#right .banner{

	width: 285px;

	height: 200px;

}



/*

#left en producto

________________________

¡.producto  			¡

¡.izquierda ¡.derecha   ¡

¡			¡			¡

¡			¡			¡

_________________________

¡.producto  			¡

¡.izquierda ¡.derecha   ¡

¡			¡			¡

¡			¡			¡

_________________________

_________________________

¡       	¡.librorel  ¡

¡			¡			¡

_________________________

¡       	¡.librorel ¡

¡			¡			¡

_________________________

*/





/************* HEADER ************/



#header {

	margin: 0px auto;

	padding: 0px;

	background-color: #fff;	

}



#header h1 {

	margin: 0px;

	padding: 0px 0px 0px 10px;

	text-align: left;

	color: #3399FF;

	font-size: 2em;

	/*text-transform: uppercase;*/

}



#header h2 {

	margin: 0px;

	padding: 0px 0px 0px 20px;

	text-align: left;

	font-size: 1.5em;

	text-transform: uppercase;

}



/************* MENU ************/



#menu {

	margin: 0px auto 20px auto;

	padding: 5px 0px 5px 0px;

	background-color: #000000;

}



#menu ul {

	float: left;

	margin: 0px;

	padding: 0px;

	list-style: none;

	text-align: left;

	color: red;

}



#menu li {

	display: inline;

	padding: 5px 5px;

	color: #FFFFFF;

}



#idioma {

	float: right;

	color: red;

	vertical-align: middle;

	margin: 5px 20px 0 0;

}



#menu a {

	 color: #FFFFFF; 

}



#menu a:hover {

	 color: #cc0033;



}



/************* CONTENIDO ************/



#content {

	margin: 0px auto;

	padding: 0px 0px 0px 0px;

	text-align: left;

	

}



#content h2, #content h3, #content h4, #content h5, #content h6 {

	font-weight: normal;



}



#content h2{

		font-size: 1.6em;

}



#content h3{

		font-size: 1.2em;

}



#content p, #content ul, #content ol {

	line-height: 150%;

}

#left {

	float: left;

	background-color: #fff;

}



#right {

	float: right;

	background-color: #fff;

}



/************* SIDEBAR ************/





#carrito { 

	background-image:url(images/fondo_carrito.jpg);

	margin: 0px 0px 10px 15px;

	padding: 2px 0 2px 0;



}



#carrito img{ 

	margin: 20px 15px 0 15px;

	padding: 5px 0 5px 0;

	border: 0px;

}



#carrito p {

	text-align: left;

	font-size: 14px;

	color: #fff;

	margin: 5px 0 5px 0;

}



#carrito * a {

	font-weight: normal;

	color: #fff;

	

}



#right h2, #right h3, #right p { 	

	margin-left: 10px;

}



/************* BOTONES CATEGORIAS ************/	 



/* fondo y area */

.boton { 

	float: right;

	padding: 0px;

	margin-top: 10px;

	margin-bottom: 5px;

	margin-left:15px;/* izquierda */

	margin-right:0px;/* derecha */

	background-image:url(images/fondo_banner_sidebar.jpg);

}



/* texto */

.boton p { 	

	padding: 0px;

	margin:  10px 0 0 0;

	text-align: center;

	font-size: 14px;

	color: #000;

	 }

	 

.boton a { color: #000;}

.boton a:hover { color: #cc0033;}	

	 



/************* LISTADOS ************/

/* en index */

#fondo {float: left;}



#noticia {float: right;}



/* en categorias */

.libro{

	float: left;

	border-top: 1px solid #bbb;

	margin: 10px 20px 0 0;

	padding-top: 20px;



}

.izquierda img 	{border: 1px solid #bbb;}

	

.libro img{

	float: left;

	margin: 0 20px 120px 0;

	border: 1px solid #bbb;	

	

}



.libro a:hover h3, .libro a:hover h4, .libro a:hover h5{

	text-decoration: underline;

}



#content .libro h4{

	font-size: 11px;

	line-height: 1.1;

	margin: 0;

	padding: 0;

}



#content .libro h3{

	font-size: 14px;

	line-height: 1.1;

	margin: 12px 0 12px 0;

}



#content .libro h5{

	font-size: 11px;

	line-height: 1.1;

	margin: 0 0 20px 0;

}



a.mas{

	line-height: .8;

	color: red;

	padding: 0 5px 0 0;

	margin-right: 6px;

	font-weight: bold;

}



em.comprar {

	color:#444; 

	border: 1px solid #cc0033; 

	padding:4px 6px ; 

	font-weight: bold;

}

	

a.mas{font-size: 12px; color:#444}

p.novedad {font-size: 12px; color:#cc0033; font-weight: bold; margin: 0 0 6px 0;}



	

/************* FOOTER ************/



#footer {

	margin: 10px auto;

	border-top: 1px solid #bbb;

	background: #fff /*url(images/back-footer.png) repeat-y center top*/;

	text-align: center;

	padding: 2px;

	color: #444;

}



/************* BANNERS ************/



/* banner cabecera */

#header .banner{

	margin: 0px;

	padding: 0px;

	background-color: #fff;	

}



/* banner derecha */	

#right .banner {

		float: right;

		border: 1px solid #ddd;

		margin-top: 10px;

		margin-bottom: 5px;

}



	

/* banner izquierda */	

#left .banner {

	border: 1px solid #bbb;

	background-color: #fff;	

	margin-bottom: 10px;

}



#left .banner p{

	font-size: 24px;

	line-height: 30px;

	margin:0;

	padding:0;

	background-color:#fff;	

}

	

.banner p #novedad {color: #cc0033}

.banner p #autor {color: #000;}

.banner p #libro {color: #666; font-size: 22px;}



#left .banner img{

	margin: 20px 40px 0px 20px;

	border: 1px solid #ddd;

	background-color:#fff;

    }



/* Hacks para navegadores  en banner izquierda*/

.banner > .flotante { /*display:tabla para Mozilla & Opera*/

	display:table;

	position:static;

}

.flotante { /*para IE*/

	width:380px;

	height:96%;

	background:#fff;

	position:relative;

		

}

.flotante div { /*para IE*/

	position:absolute;

	top:50%;

}

.flotante>div { /*para Mozilla and Opera*/

	display:table-cell;

	vertical-align:middle;

	position:static;

}

.flotante div div {

	position:relative;

	top:-50%;

}

/* Fin de Hacks para navegadores */

	 

/************* PRODUCTO ************/





.ficha {

	margin: 0;

	padding: 0px;

	background: #fff;

}



.izquierda { 

	float: left;

	width: 150px;

	background: #fff;

	font-size: 11px;

}

.derecha { 

	float: right;

	width: 420px;

	padding: 20px 0;

	background: #fff;

	border-top: 1px solid #bbb;

}





.ficha ul{

margin: 0px;

padding: 0px;

}





.ficha ul li, .ficha ul{

color: grey;

list-style-type: none;

list-style-image: none;

margin-bottom: 6px;

}



.ficha ul li em {color: #000;} 



.ficha p{margin: 20px 0;} 



.ficha h3{padding: 0px; margin: 0px;}

.ficha h2{padding: 0px;  margin: 0px; }

.ficha h4{padding: 0px;  margin: 5px 0 30px 0;}





.librorel img{

	float: left;

	margin: 0 20px 100px 0;

	border: 1px solid #bbb;

}



.librorel a:hover h3, .librorel a:hover h4, .librorel a:hover h5{

	text-decoration: underline;

}



.librorel h3{

	font-size: 14px;

	line-height: 1.1;

	margin: 20px 0 10px 0;



}



.librorel h4{

	font-size: 11px;

	line-height: 1.1;

	margin-bottom: 2px;

}



.librorel h5{

	font-size: 11px;

	line-height: 1.1;

	margin-bottom: 14px;

}



.librorel{

	margin: 0px 20px 0 0;

	padding-top: 20px;



}

.librorel p.novedad {font-size: 12px; color:#cc0033; font-weight: bold; margin: 0;}



.productListing-heading {

  font-family: Verdana, Arial, sans-serif;

  font-size: 10px;

  background: #b6b7cb;

  color: #FFFFFF;

  font-weight: bold;

}



.line_gray {

  border-top: 1px solid #bbb;

}



.pad {

	padding-left: 150px;

}



.pad_cat {

	padding-left: 100px;

}



.curr {

  width: 170px;

  text-align: center;

  float:right;

  padding-right: 60px;

}



#cuenta {

  font-family: Verdana, Arial, sans-serif;

  color: #FFFFFF;

  font-weight: bold;

  float: right;

  padding-right: 10px;

  background-image:url(images/fondo_carrito.jpg);

}



a.a_black{font-size: 12px; color:#ffffff}



/********  TABLES ********/







TR.productListing-even {

  background: #f8f8f9;

}



TR.productListing-odd {

  background: #f8f8f9;

}



#mtbla {

/* border: 1px solid black; */

border-collapse: collapse; 

}

#mtda {

  font-family: Verdana, Arial, sans-serif;

  font-size: 10px;

  width: 100px;

  border-width: 0px 0px 1px 0px; 

  border-style: inset inset inset inset;

  border-color: white white gray white;

}

#mtdb {

  font-family: Verdana, Arial, sans-serif;

  font-size: 12px;

  width: 200px; /* era 150 */

  border-width: 0px 0px 1px 0px; 

  border-style: inset inset inset inset;

  border-color: white white gray white;

/*  border: 0 0 0 1px solid black; */

}

#mtdc {

  font-family: Verdana, Arial, sans-serif;

  font-size: 12px;

  width: 290px; /*era 240 */

  border-width: 0px 0px 1px 0px; 

  border-style: inset inset inset inset;

  border-color: white white gray white;

/*  border: 0 0 0 1px solid black; */

}

#mtdd {

  font-family: Verdana, Arial, sans-serif;

  font-size: 11px;

  width: 100px;

  border-width: 0px 0px 1px 0px; 

  border-style: inset inset inset inset;

  border-color: white white gray white;

/*  border: 2px solid black; */

}

#mtha {

/*  border: 1px solid black; */

  border-width: 0px 0px 1px 0px; 

  border-style: inset inset inset inset;

  border-color: white white black white;

}

TD.productListing-data {

  font-family: Verdana, Arial, sans-serif;

  font-size: 10px;

}



TD.main {

  font-family: Verdana, Arial, sans-serif;

  font-size: 11px;

  line-height: 1.5;

}



.stockWarning { font-family : Verdana, Arial, sans-serif; font-size : 10px; color: #cc0033; }



.infoBox {

  background: #b6b7cb;

}



TD.infoBox {

  font-family: Verdana, Arial, sans-serif;

  font-size: 10px;

}



.infoBoxContents {

  background: #f8f8f9;

  font-family: Verdana, Arial, sans-serif;

  font-size: 10px;

}



TD.pageHeading {

	

	 font-size: 20px;

  /*font-family: Verdana, Arial, sans-serif;

 

  font-weight: bold;

  color: #9a9a9a;*/

}



TD.smallText, SPAN.smallText, P.smallText {

  font-family: Verdana, Arial, sans-serif;

  font-size: 10px;

}



TD.fieldKey {

  font-family: Verdana, Arial, sans-serif;

  font-size: 12px;

  font-weight: bold;

}



TD.fieldValue {

  font-family: Verdana, Arial, sans-serif;

  font-size: 12px;

}



TD.infoBoxHeading {

  font-family: Verdana, Arial, sans-serif;

  font-size: 10px;

  font-weight: bold;

  background: #bbc3d3;

  color: #ffffff;

}



.inputRequirement { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #ff0000; }



.moduleRowSelected { background-color: #E9F4FC; }



.moduleRow { }



.checkoutBarCurrent { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #000000; }



.checkoutBarTo { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #8c8c8c; }



.infoBoxNotice {

  background: #FF8E90;

}



.infoBoxNoticeContents {

  background: #FFE6E6;

  font-family: Verdana, Arial, sans-serif;

  font-size: 10px;

}



/* message box */



.messageBox { font-family: Verdana, Arial, sans-serif; font-size: 10px; }

.messageStackError, .messageStackWarning { font-family: Verdana, Arial, sans-serif; font-size: 10px; background-color: #ffb3b5; }

.messageStackSuccess { font-family: Verdana, Arial, sans-serif; font-size: 10px; background-color: #99ff00; }



li.nav { vertical-align: bottom; }





/*    Lightbox       */

#lightbox{

	position: absolute;

	top: 40px;

	left: 0;

	width: 100%;

	z-index: 100;

	text-align: center;

	line-height: 0;

	}



#lightbox a img{ border: none; }



#outerImageContainer{

	position: relative;

	background-color: #fff;

	width: 250px;

	height: 250px;

	margin: 0 auto;

	}



#imageContainer{

	padding: 10px;

	}



#loading{

	position: absolute;

	top: 40%;

	left: 0%;

	height: 25%;

	width: 100%;

	text-align: center;

	line-height: 0;

	}

#hoverNav{

	position: absolute;

	top: 0;

	left: 0;

	height: 100%;

	width: 100%;

	z-index: 10;

	}

#imageContainer>#hoverNav{ left: 0;}

#hoverNav a{ outline: none;}



#prevLink, #nextLink{

	width: 49%;

	height: 100%;

	background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */

	display: block;

	}

#prevLink { left: 0; float: left;}

#nextLink { right: 0; float: right;}

#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }

#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }





#imageDataContainer{

	font: 10px Verdana, Helvetica, sans-serif;

	background-color: #fff;

	margin: 0 auto;

	line-height: 1.4em;

	}



#imageData{

	padding:0 10px;

	}

#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	

#imageData #caption{ font-weight: bold;	}

#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			

#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em;	}	

		

#overlay{

	position: absolute;

	top: 0;

	left: 0;

	z-index: 90;

	width: 100%;

	height: 500px;

	background-color: #000;

	filter:alpha(opacity=60);

	-moz-opacity: 0.6;

	opacity: 0.6;

	}

	



.clearfix:after {

	content: "."; 

	display: block; 

	height: 0; 

	clear: both; 

	visibility: hidden;

	}



* html>body .clearfix {

	display: inline-block; 

	width: 100%;

	}



* html .clearfix {

	/* Hides from IE-mac \*/

	height: 1%;

	/* End hide from IE-mac */

	}