/* CSS Document */
@media screen {
body {
	font: normal 12px/14px "Trebuchet MS", "Arial Narrow","Frutiger 47 LightCn","Humanst521 Cn BT",sans-serif;
	color: black;
	background: url('../i/fondo_verdoso.gif') repeat;
	vertical-align: baseline;
	/*text-align: center;*/
}
/* el orden es lvha: link, visited, hover, active */
a {
	font-weight: bold;
	color: #ff3b00;
	text-decoration: none;
}
a:visited {
	color: #cc0b00;
}
a:hover {
	color: #990000;
}
/* Elementos de la cabecera */
#fondo {
	position: relative; /* De esta manera se fija como referencia para elementos posicionados en su interior */
	margin: 15px 0;
	padding: 161px 0 0 0;
	background: url('../i/fondo_franja_exterior.gif') repeat-y;
	width: 727px;
	display: block;
	/*text-align:center; Firefox no alinea los elementos div al centro */
}
/* Se posiciona de manera absoluta para poder incluirlo al final del cuerpo */
#fondo_superior {
	position: absolute;
	top: 0;
	left: 0;
	border: 0;
	width: 727px;
	height: 22px;
	margin: 0;
	padding: 0;
}
#fondo_inferior {
	width: 727px;
	height: 22px;
	display: block;
	margin: 0;
	padding: 0;
}
#imagenes_suministros {
	width: 670px;
	height: 152px;
	z-index: 2;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 7px;
	left: 31px;
}
#logo_abucide {
	width: 326px;
	height: 50px;
	position: absolute;
	display: block;
	top: 23px;
	left: 34px;
	background: url('../i/suministros_abucide.gif') no-repeat;
	z-index: 3;
}
#logo_abucide em {
	visibility: hidden;
}

/* Elementos del cuerpo  de la página*/
#cuerpo {
	margin: 0;
	padding: 45px 0 15px;
	background: url('../i/fondo_interior_cuerpo.gif') repeat-y;
	width: 687px;
	text-align: left;
	position: relative;
	clear: both;
}
#cuerpo_superior, #cuerpo_inferior {
	width: 687px;
	height: 25px;
	border: 0;
	display: block;
	margin: 0;
	padding: 0;
}
#cuerpo_superior {
	position: absolute; 
	top: 0;
	left: 0;
}
#cuerpo_inferior {
	position: relative;
	top: 15px; /* lo bajamos en medida igual al padding del cuerpo, para que caiga al final de todo */
	clear: both; /* forzamos a que se sitúe tras el final tanto del párrafo flotante como del otro */
}

/* Columna izquierda */
#colizq {
	margin: 0 0 0 15px;
	padding: 0 0 15px 0;
	width: 420px;
	float: left;
}
#cuerpo>#colizq {
	margin: 0 0 0 30px; /*Este selector CSS sólo lo recibe bien Mozilla, por eso nos sirve contra fallos de IExplorer */
}
#colizq p,#colizq h1 {
	margin: 5px 10px;
	padding: 0;
}
#colizq h1 {
	font: bold 20px/20px "Courier New",Courier,sans-serif;
	color: #FF3B00;
}
#colizq h2 {
	font: bold 16px/16px "Courier New",Courier,sans-serif;
	margin: 24px 10px 0 10px;
}
#colizq h3 {
	font: bold 14px/14px "Courier New",Courier,sans-serif;
	margin: 6px 10px 0 10px;
}
#colizq h2,#colizq h3 {
	color: #FF3B00;
}
/* Columna derecha */
#colder {
	width: 160px;
	margin: 0 0 0 505px;
	padding: 0 0 15px;
	height: 100%;
}
#colder, #colder .titulo, #colder h1, #colder h2, #colder h3, #colder h4, #colder li, #colder ul, #colder a, #topica, #topica a {
	font: normal 12px/14px "Univers 47","Arial Narrow","Helvetica Condensed","HelveticaNeue Condensed","Univers 47 CondensedLight",sans-serif;
	color: #FFFFFF;
	letter-spacing: 0.25em;
}
#colder ul {
	margin-left: 0px;
}
#colder li {
	margin-top: 6px;
	text-decoration:none;
	list-style: none;
}
#colder ul ul {
	margin-top: 0px;
	margin-left: 12px;
}
#colder ul ul li {
	margin-top: 0px;
}
#colder .titulo {
	text-transform: uppercase;
	letter-spacing:1em;
}
#colder h1 {
	text-transform: capitalize;
	margin: 0 0 15px 0;
}
#colder div {
	border-bottom: 2px solid white;
	padding: 0;
	margin: 0 0 15px 0;
}
#colder .nuevo {
	margin: 30px 0;
}
/* Listados de artículos */
.listado {
	width: 420px;
	position: relative;
	background:  url("../i/fondo_listado.gif") repeat-y;
	padding: 15px 15px 5px;
	margin: 30px 0;
}
.cabecera_listado, .pie_listado {
	margin: 0;
	padding: 0;
	width: 420px;
}
.cabecera_listado {
	height: 20px;
	position: absolute;
	top: 0;
	left: 0;
}
.pie_listado {
	display: block;
	position: relative;
	top: -45px;
	height: 19px;
}
.listado h1 {
	top: -8px;
	left: 30px;
	background: url('../i/fondo_titulo_listado.gif') repeat-x;
	/*height: 18px;*/
}
.listado h1, .articulo h1, .articulo h2 {
	position: absolute;
	z-index: 2;
	display:block;
	margin: 0!important;
	padding: 0 4px!important;

}
.listado table 
{
	margin-bottom: 15px;
	width: 380px;
}
.listado tr.par {
	background-color:#FAFFDF;
}
.listado h1, .articulo h2 {
	font: bold 18px/18px "Courier New",Courier,sans-serif!important;
}
.articulo {
	position: relative;
	margin: 15px 0;
	padding: 0;
	width: 382px;
	height: 100px;
	background: url('../i/fondo_articulo_ancho.gif') 0 23px no-repeat;
}
.articulo img {
	width: 85px;
	height: 100px;
	position: absolute;
	display: block;
	left: 15px;
	top: 0;
}
.articulo h1 {
	font: bold 14px/11px "Courier New",Courier,sans-serif!important;
	color: #FF3B00;
	top: 15px;
	left: 101px;
	background: url("../i/fondo_titulo_articulo.gif") repeat-x;
}
.articulo h2 {
	text-align: right;
	right: 30px;
	bottom: 16px;
	background:  url("../i/fondo_precio_articulo.gif") repeat-x;
}
.articulo p {
	display: block;
	position: absolute;
	top: 32px;
	left: 95px;
	width: 260px;
	height: 30px;
	margin: 0;
	padding: 0;
	color: white;
	background: none;
	line-height:12px;
}
.articulo .ubicacion {
	font-size: 10px;
	position: absolute;
	bottom: 0px;
	left: 105px;
	margin: 0;
	padding: 0;
	width: 185px;
	max-width: 185px;
	line-height: 12px;
	display: block;
}
/* botonera */
#inicio,#ofertas,#destacados,#abucide,#noticias {
	position: absolute;
	display: block;
	z-index: 4;
	top: 127px;
	height: 38px;
}
#inicio em,#ofertas em,#destacados em,#abucide em,#noticias em {
	visibility: hidden;
}
#inicio {
	width: 70px;
	left: 40px;
}
a#inicio {
	background: url('../i/inicio.gif') no-repeat;
}	
a#inicio:hover {
	background: url('../i/inicio_over.gif') no-repeat;
}
#ofertas {
	width: 73px;
	left: 194px;
}
a#ofertas {
	background: url('../i/ofertas.gif') no-repeat;
}
a#ofertas:hover {
	background: url('../i/ofertas_over.gif') no-repeat;
}
#destacados {
	width: 103px;
	left: 267px;
}
a#destacados {
	background: url('../i/destacados.gif') no-repeat;
}
a#destacados:hover {
	background: url('../i/destacados_over.gif') no-repeat;
}
#abucide {
	width: 127px;
	left: 370px;
}
a#abucide {
	background: url('../i/abucide.gif') no-repeat;
}
a#abucide:hover {
	background: url('../i/abucide_over.gif') no-repeat;
}
#noticias {
	width: 84px;
	left: 110px;/*left: 413px;*/
}
a#noticias {
	background: url('../i/noticias.gif') no-repeat;
}
a#noticias:hover {
	background: url('../i/noticias_over.gif') no-repeat;
}
/* final */
#informacion_contacto {
	position: absolute;
	display: block;
	bottom: 30px;
	left: 45px;
	width: 400px;
	margin: 0;
	padding: 0;
}
#topica {
	position: absolute;
	display: block;
	text-align: right;
	bottom: 30px;
	left: 500px;
	width: 170px;
	word-spacing:-0.25em;
}
#topica a
{
	text-transform: capitalize;
}
#topica a:hover
{
	color: #FFD700; /*gold;*/
}
/* Thumbnails de fotos */
.filaThumbs
{
	position: relative;
	left:10px;
	top: 5px;
	display: block;
	margin: 15px 0 15px;
	padding: 0;
	height: 150px;
}
.thumbFoto1,.thumbFoto2,.thumbFoto3
{
	position: absolute;
	width: 130px;
	padding: 2px;
	top: 0px;

}
.thumbFoto1
{
	left: 0px;
}
.thumbFoto2
{
	left: 130px;
}
.thumbFoto3
{
	left: 260px;
}
.filaThumbs .foto
{
	display: block;
	position: relative;
	top:0;
	left:0;
	width:100px;
	height:100px;
	margin:0;
	padding:0;
	overflow:hidden;
	border: 1px solid #9F811F;
}
.filaThumbs .foto img
{
	position: absolute;
	top: -35px;
	left: -35px;
}
.filaThumbs p
{
	position: absolute;
	top: 105px;
	left: 0;
	width: 105px;
	margin-left: 0!important;
}

}
@media print {
	body {
		font: normal 12px/15px "Univers 47","Univers 47 CondensedLight","Helvetica Condensed","HelveticaNeue Condensed","Arial Narrow",sans-serif;
	}
	h1, h2 {
		margin: 1em 0 0;
		word-spacing:-0.15em;
	}
	h1 {
		font-size: 72px;
		letter-spacing:-0.25em;
	}
	.articulo h1,.listado h1 {
		font-size: 36px;
		letter-spacing:-0.15em;
	}
	.articulo h2,.listado h2 {
		font-size: 24px;
		letter-spacing:-0.05em;
	}
	#colder, img, #topica, #fondo a, #informacion_contacto a {
		display: none;
	}
	#cuerpo {
		text-align: left;
	}
	#cuerpo a {
		display: inline;
		text-decoration: none;
	}
	a, a:hover,a:visited {
		color: black;
	}
}