@charset "utf-8";
/* CSS Document */
@import url('reset.css');
body{     /* mandamos llamar una imagen que se repite a todo lo ancho de la página y el fondo
				de todo el documenttiene un color azul y que cualquier elemnto que este en el cuerpo
                    empieze a 12 px de distancia del borde superior*/
 background: #132a69 url("images/fondo de pgina.jpg") repeat-x;
 margin-top: 12px;
}
#contenedor {
	margin:0 auto 0 auto;
	width:988px;
	height: 120px;
}
#logo{
	float: left; 
}
#banner{
	float: right;
	margin-top: 12.5px;
}
#sombra   { 		 /* aquí le decimos a la espacio "div" que se llama "sombra" que llame un imagen de fondo
					y la repita de forma vertical y que llene toda la división */
 background: url(images/sombra.png) repeat-y;
 margin:0 auto 0 auto;
 width:1009px;
 height:0auto;
}
#fondo_gris {	 /* en este "div" contendra todo lo que lleva la página, el fondo es una imagen en gris
						que se repite de forma vertical */
 background: url(images/fondo_gris.jpg) repeat-y;
 margin:0 auto 0 auto;
 width:988px;
 height:0 auto;
}
#navigation { 	/* nuestra lista desordenada "ul" que se llama "navigation" esta centrada
	y mide lo mismo que mide toda la imagen del menú*/ 
 margin:0 auto 0 auto; width:988px;
}
#navigation li { 	/*le decimo que cada elemento de nuestar lista "li" flote, esto permite que cada elementos
	se coloque al lado detrecho del otro, de lo contrario estarían alineados verticalmente, uno debajo de otro*/ 
float:left;
display:block;
}
#navigation li a {
background-image:url(images/menu.jpg);
display: block;
	outline: none;
	position: relative;
	height: 68px;
	text-decoration: none;
	width: auto;
}
	#navigation .inicio {	/*los elemntos de nuestra lista tiene un tamaño y usa como imagen de fondo
     		la imagen del menu colocada en diferente posición segun le corresponde a su espaciop espacio*/ 
 background-position:0px 0px;
 width:144px;
 height:68px;
	}
	#navigation .nosotros {
 background-position:-144px -0px;
 width:140px;
 height:68px;
	}
	
	#navigation .pijas {
	background-position:-284px 0px;
	width:141px;
	height:68px;
	}
	
	#navigation .abrazaderas {
	background-position:-425px 0px;
	width:141px;
	height:68px;
	}
	
	#navigation .canaletas {
	background-position:-566px 0px;
	width:141px;
	height:68px;
	}
	
	#navigation .escaleras {
	background-position:-707px 0px;
	width:140px;
	height:68px;
	}
     
     #navigation .contacto {
	background-position:-847px 0px;
	width:141px;
	height:68px;
	}
	
     /* aquí empieza la parte que va apareciendo cuando el pasa el mouse encima del botón */ 
     
	#navigation a .hover {
	background: transparent  url(images/menu.jpg) no-repeat;
	display:block ;
	opacity: 0;
	position: relative;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	}
	
	#navigation .inicio .hover {
	background-position: -0px -68px;
	}
	
     #navigation .nosotros .hover{
	background-position: -144px -68px;
	}
	
     #navigation .pijas .hover {
	background-position: -284px -68px;
	}
	
     #navigation .abrazaderas .hover {
	background-position: -425px -68px;
	}
	
     #navigation .canaletas .hover {
	background-position: -566px -68px;
	}
     
     #navigation .escaleras .hover {
	background-position: -707px -68px;
	}
     
     #navigation .contacto .hover {
	background-position: -847px -68px;
	}
     
     
     #bajo_menu {
 margin:0 auto;
 width:988px;
 height:83px
}
	
    #fndo_blanco {
 margin:0 auto 0 auto;
 width:948px;
 height:0auto;
 background-color: #FFFFFF;
 }
   .encabezado{
 margin:0 auto 0 auto;
 width:800px;
 height:25px;
 background-color: #E5E5E5;
 
}
   .titulo{
 font-family: Verdana, Arial, Helvetica, sans-serif;
 color: #4E4E4E;
 font-size: 14px;
 font-weight: bold;
 padding-top: 5px;
 padding-left: 30px;
}
   .QS{
 margin:0 auto 0 auto;
 width:740px;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 color: #5C5C5C;
 font-size: 13px;
 padding-top: 20px;
 padding-left: 30px;
 padding-right: 30px;
 text-align: justify;
 border: #D0D0D0 solid 1px;
 padding-bottom: 25px;
 line-height: 1.3em;
}
   .descripcion{
 margin:0 auto 0 auto;
 width:740px;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 color: #5C5C5C;
 font-size: 13px;
 padding-top: 20px;
 padding-left: 30px;
 padding-right: 30px;
 text-align: justify;
 border: #D0D0D0 solid 1px;
 padding-bottom: 25px;
 line-height: 1.3em;
}
   .descripcion p {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 color: #003399;
 font-size: 13px;
 text-align: justify;
 line-height: 1.3em;
 font-weight: bold;
}
   .caracteristicas {
 float: left;
 width:370px;
}
   .columnas {
	background-image: url(images/caracteristicas.jpg);
	width: 800px;
	height: 30px;
	margin:0 auto 0 auto;
}
   .title_columnas {
	float:left;
	height: 26px;
	padding-top:4px;
	color: #FFF;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 16px;
}
   #prod_abr{
 margin:0 auto 0 auto;
 width:800px;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 color: #5C5C5C;
 font-size: 13px;
 text-align: justify;
 border: #D0D0D0 solid 1px;
 padding-bottom: 25px;
 line-height: 1.5em;
}
   .imag {
 float: left;
 width: 200px;
 border-right: #D0D0D0 solid 1px;
 border-bottom: #D0D0D0 solid 1px;
 padding:15px;
}
   .desc {
 float: left;
 width: 270px;
 height:200px;
 border-right: #D0D0D0 solid 1px;
 border-bottom: #D0D0D0 solid 1px;
 padding-left:30px;
 padding-top:20px;
 padding-bottom:10px;
}
   .uso {
 float: left;
 width: 198px;
 height:200px;
 border-bottom: #D0D0D0 solid 1px;
 padding-left:70px;
 padding-top:20px;
 padding-bottom:10px;
}
     #pie {
	background-image: url(images/pie_fondo.jpg);
	margin:0 auto 0 auto;
	width: 988px;
	height: 154px;
}