/*CORE CSS by Gabriel Clavero ;) */
body {
	margin: 0;
	background: url('../imagenes/bordes.jpg') repeat-y center;
	font: 100% Georgia, Verdana, Arial, serif;
	color: #29303b;
	text-decoration: none;
}
h1 {
	font: 100% Georgia, Verdana, Arial, serif;
	font-weight: 700;
	text-decoration: underline;
}

/*BOXS DIVS*/
#cabecera {
	width: 751px;
	margin: 0 auto 3px;
}
#cabecera img {
	display: block;
	margin: 0 auto;
}
#contenedor {
	width: 745px;
	margin: 0 auto;
	border: 1px solid #e2d6c6;
	background: url('../imagenes/fondo_total.gif');
}
#menus {
	width: 194px;
	float: left;
}
#central {
	width: 537px;
	margin: 3px 3px 0 auto;/*alineado a la derecha, (con 0 0 0 auto es suficiente para alinear a la derecha, pero aca quería un pequeño margen superior y derecho) y además como el div que tiene a los menus tienen un float:left, este div queda al lado de los menus*/
	background: url('../imagenes/central_bg.gif');
}
#central p {
	margin-top: 3px;
	padding: 0 20px;
	font-size: 80%;
}
#central img {
	margin: 0 auto;
	display: block;/*el de las imagenes es inline por defecto, pero aquí lo quiero centrar, ademas prueba a sacar esta linea y ver en IE como queda la imagen 'central_bot.gif', lo que hace es que el div sea mas alto y como tiene una imagen de fondo me descuadra todo, checalo*/
}
#central div {
	font-size: 90%;/*si metemos al div en un <p> este tamaño es relativo a #central p, que a su vez es relativo a #central y luego a body, entiendes cómo va?*/
}
#central a {
	text-decoration: none;
	color: #996633;
}
#central a:hover {
	text-decoration: underline;
	color: #990000;
}
#pie {
	width: 720px;
	border-top: 1px solid #bbc4a3;
	margin: 0 auto;
	text-align: center;
	font-size: 70%;
	clear: both;/*que vivo que soy, con esto nos aseguramos que el pie de la pagina va a quedar al fondo sin nada alrededor (no dejamos que nada flote a sus costados)*/
}

/*ESTILOS DE CLASES*/
/*1- MENUS LATERALES*/
.menu {
	width: 194px;
	background: url('../imagenes/menu_bg.gif');
	margin: 3px;
}
.menu ul {
	margin: 5px 0 5px 30px;
	padding: 0;
}
.menu li {
	margin-bottom: 2px;
}
.menu a {
	font-size: 70%;
	color: #333;
	text-decoration: none;
}
.menu a:hover {
	font-size: 70%;
	color: #990000;
	text-decoration: underline;
}
.menu p {
	font-size: 70%;
	width: 80%;
	padding: 0 10px;
	margin: 8px auto;
}
.menu img {
	margin: 0 auto;
	display: block;/*leer comment de #central img*/
	border: 0;/*con esto además nos evitamos los horribles bordes azules que aparecen cuando usamos una imagen como vínculo*/
}
.imgotros {
	padding: 5px 0;
}

/*2- CAJA NOVEDADES y CATÁLOGO*/
.disco {
	width: 507px;
	min-height: 120px;
	margin-left: 18px;
	margin-bottom: 10px;
	border: 1px solid #ccc;
	border-left: 2px solid #ccc;
	border-bottom: 3px solid #ccc;
}
.disco img {
	padding: 12px 5px;
	float: left;
}
.disco p {
	width: 370px;
	margin: 0 20px 8px auto;
	padding: 0!important;/*checa readme sobre css.txt, pero lo que hago aquí es poner que el padding sea 0, sin el !important chafearía ya que estamos heredando la propiedad desde #central p, ya que .disco siempre lo uso dentro de #central*/
}
.disco h1 {
	width: 370px;
	margin: 0 20px 8px auto;
}
.disco h2 {
	font-size: 95%;
	font-weight: 700;
	text-decoration: underline;
}
.bitmargen {
	padding-top: 1px;
	margin-left: 20px;
}

.centrar_boton {
	text-align: center;
}

/*3- CONTACTO*/
#contacto {
	width: 500px;
	margin: 0 auto;
}
#contacto div {
  	display: block;
  	width: 500px;
  	margin: 5px 0 0 0;
  	padding: 1px 3px;
}
#contacto label {
  	display: block;
  	float: left;
  	width: 130px;
  	padding: 3px 5px;
  	margin: 0 0 5px 0;
  	text-align: right;
}
#contacto p {
	margin-left: 5px;
}
.campos {
	font: 100% Georgia, Verdana, Arial, serif;
	color: #29303b;
	background: url(../imagenes/fondo_total.gif) repeat center top;
	border: 1px solid #739ea4;
	padding: 2px;
}

/*NEWSLETTER*/
#newsletter div {
	width: 90%;
	margin: 5px auto 0 auto;
	padding: 1px 3px;
}
#newsletter label {
	display: block;
	float: left;
	width: 50px;
	padding: 3px 5px;
  	margin: 0 0 5px 0;
  	text-align: right;
}