/* -------------------------------------------------------------- 
   
   grilla.css
   * Es muy fácil de usar, dividimos la página en 24 columnas

   * Por defecto el tamaño de inicio es 950 px, con 24 columnas 
 	 con spans de 30px y 10 px de margen

   * Para utilizarlo debes hacer la siguiente ecuación: tengo
	 de tamaño 950 px, que es lo mismo que decir (columnas * 40) -10
	 así que si tengo 950 serían 24 columnas.

   
-------------------------------------------------------------- */
body{

	background: url("../../img/background.jpg") repeat-y;
	background-position: center;
	/*background-color:#C5C5C5;*/
	background-color: rgb(185, 185, 185);
	margin: 0 auto;
	
	
}

img{border:0px;}

#cuerpo{

	/*min-height: 1024px;*/


}

/* Contenedor de todas las columnas. */


/*----------------------------------------------------------------------

	
	///////          CABECERA          ///////////////


------------------------------------------------------------------------*/	
	
#cabecera{

	margin: 0 auto;
	margin-top: 20px;
	
		
}

	
		/*---------- LOGO -------------*/
		
		/* Imágen del logo*/
		#logo{
	
		background: url("../../img/logo.png") no-repeat;
		width: 220px; 
		height: 58px;
		
	
		}
			
			#logo span{
				display: block;
				margin-left:-3000px;
				height: 220px; 
				width: 58px;
			}
	
			#logo h1 {height: 58px;}
			#logo h1 a{height: 58px;}
	
		/*---------- MENÚ -------------*/
		ul.menu_principal{
			        
			height:21px;
			list-style: none;
			padding:0px;			
			margin-top: 20px;
			float:right;
			
			
			
		}
		
		
		ul.menu_principal li{
		
			display:inline;
			float: left;
			margin-left: 30px;
			
			
		}

		
			ul.menu_principal li a{
			color:#fff;
			text-decoration:none;
			display: block;
			}

			ul.menu_principal li a:link, ul.menu_principal li a:visited {
				padding: 0px;
				display: block;
				text-decoration: none;
			}
			
			ul.menu_principal li a span{
				display: block;
				text-indent:-3000px;
			}
		
			/*---------- nosotros -------------*/
			ul.menu_principal li a.nosotros{
				background-image:url("../../img/nosotros.png");
				background-repeat: no-repeat;
				width:56px;
				height: 21px;
				
				
			}

			
			ul.menu_principal li a.nosotros:hover{
				background-image:url("../../img/nosotros.png");
				background-repeat: no-repeat;
				width:56px;
				height: 21px;
				background-position:0 -24px;
				
				
				
			}
			
			/*---------- trabajos -------------*/
			ul.menu_principal li a.trabajos{
				background-image:url("../../img/trabajos.png");
				background-repeat: no-repeat;
				width:51px;
				height: 21px;
				
			}

			
			ul.menu_principal li a.trabajos:hover{
				background-image:url("../../img/trabajos.png");
				background-repeat: no-repeat;
				width:51px;
				height: 21px;
				background-position:0 -24px;
				
			}
			
			/*---------- servicios -------------*/
			ul.menu_principal li a.servicios{
				background-image:url("../../img/servicios.png");
				background-repeat: no-repeat;
				width:54px;
				height: 21px;
			}

			
			ul.menu_principal li a.servicios:hover{
				background-image:url("../../img/servicios.png");
				background-repeat: no-repeat;
				width:54px;
				height: 21px;
				background-position:0 -24px;
				
			}
			
					
			/*---------- blog -------------*/
			ul.menu_principal li a.blog{
				background-image:url("../../img/blog.png");
				background-repeat: no-repeat;
				width:28px;
				height: 21px;
				
			}

			
			ul.menu_principal li a.blog:hover{
				background-image:url("../../img/blog.png");
				background-repeat: no-repeat;
				width:28px;
				height: 21px;
				background-position:0 -24px;
				
			}
			
			/*---------- contacto-------------*/
			ul.menu_principal li a.contacto{
				background-image:url("../../img/contacto.png");
				background-repeat: no-repeat;
				width:56px;
				height: 21px;
				
			}

			
			ul.menu_principal li a.contacto:hover{
				background-image:url("../../img/contacto.png");
				background-repeat: no-repeat;
				width:56px;
				height: 21px;
				background-position:0 -24px;
				
			}

			
	#banner img{
	
		margin-left: 55px;
		margin-top: 50px;
		margin-bottom: 50px;
	
	}


/*----------------------------------------------------------------------

	
	///////          CUERPO          ///////////////


------------------------------------------------------------------------*/		
	
#cuerpo{

	margin: 0 auto;

}



#idexizq1{
	
		background:url("../../img/indexizq_1.png") no-repeat;
		height:14px;
		width:622px;
		
	
	
}

#idexizq2{

	background:url("../../img/indexizq_2.png") repeat-y;
	min-height:14px;
}

	ul.idexizq2{
	
		margin: 20px 30px;
	
	}	
	
		ul.idexizq2 li{
		
			margin-top: 30px;
		
		
		}
		
		ul.idexizq2 li p{
		
			padding-left:10px;
			font-size:11px;
			color:#6c6c6c;
			font-family:Trebuchet MS;
		
		
		}
		
			ul.idexizq2 li p.titulo{
		
				font-weight:bold;	
		
			}
		
			
			
			
#idexizq3{

	background:url("../../img/indexizq_3.png") no-repeat;
	height:22px;
	width:622px;
	

}

#idexder1{

	background:url("../../img/indexder_1.png") no-repeat;
	height:14px;
	width:311px;

}

#indexizq2_der2{

	overflow:hidden;

}
	#idexder2{

		background:url("../../img/indexder_2_.png") repeat-y;
		height:100%;
		padding-bottom:30000px;
		margin-bottom: -30000px;
		

	}

#idexder3{

	background:url("../../img/indexder_3.png") no-repeat;
	height:22px;
	width:311px;
	

}

/*----------------------------------------------------------------------

 
 ///////         PIE         ///////////////


------------------------------------------------------------------------*/ 

#wraperpie{
	 min-height:147px;
	 width: 100%;
	 text-align: center;
	 margin: 20px auto 0px auto;
	 padding: 0px;

}
	#wraperpie div.piegris{
		 position: relative;
		 background:url("../../img/fondo_pie.jpg") repeat-x;
		 width: 100%;
		 height:127px;
		 text-align: center;
		 margin: auto;
		 padding: 0px;
	}
		#wraperpie div.piegris div.localizacion{
			 position: relative;
			 width: 960px;
			 margin: auto;
			 padding: 28px 0px;
		}
			#wraperpie div.piegris div.localizacion div{
				 width: 263px;
				 height:26px;
				 text-align: left;
				 margin: 0px;
				 padding: 0px;
				 color: #c6c6c4;
				 font-size: 11px;
			}
				#wraperpie div.piegris div.localizacion div span{
					 display: block;
					 margin: -20px 0px 0px 30px;
				}
			
			#wraperpie div.piegris div.localizacion #facebookpie{
				 position: absolute;
				 top: 45px;
				 left: 800px;
				 background:url("../../img/icon_fb.jpg") no-repeat top;
				 width: 37px;
				 height: 37px;
			}
				#wraperpie div.piegris div.localizacion #facebookpie span{
					 display: block;
					 text-indent: -3000px;
				}
				#wraperpie div.piegris div.localizacion #facebookpie:hover{
					background:url("../../img/icon_fb.jpg") no-repeat bottom;
				}
				#wraperpie div.piegris div.localizacion #twitterpie{
					 position: absolute;
					 top: 45px;
					 left: 750px;
					 background:url("../../img/icon_tw.jpg") no-repeat top;
					 width: 37px;
					 height: 37px;
				}
				#wraperpie div.piegris div.localizacion #twitterpie span{
					 display: block;
					 text-indent: -3000px;
				}
				#wraperpie div.piegris div.localizacion #twitterpie:hover{
					background:url("../../img/icon_tw.jpg") no-repeat bottom;
				}
				
				#wraperpie div.piegris div.localizacion #youtube{
					position: absolute;
					top: 45px;
					left: 850px;
					background:url("../../img/icon_youtube.png") no-repeat top;
					width: 37px;
					height: 37px;
				}
				#wraperpie div.piegris div.localizacion #youtube span{
					display: block;
					text-indent: -3000px;
				}
				#wraperpie div.piegris div.localizacion #youtube:hover{
					background:url("../../img/icon_youtube.png") no-repeat bottom;
				}
				
 
	#wraperpie div.pienegro{
		 background:url("../../img/bg_subpie.jpg") repeat-x;
		 width: 100%;
		 height:20px;
		 text-align: center;
		 margin: 0px;
		 padding: 0px;
	}
	#wraperpie div.pienegro div{
		 width: 960px;
		 text-align: center;
		 margin: auto;
		 padding: 4px 0px;
		 color: #949494;
		 font-size: 9px;
	}
	#wraperpie div.pienegro div a{
		 color: #949494;
		 font-size: 9px;
}
/* Columnas
-------------------------------------------------------------- */

/* Use esta clase junto con la clase .span-? para poder armar el esquema, el margin
define el espacio que hay despues de cada columna */
   
.columna {
  float: left;
  margin-right: 10px;
}


/* La última columan necesita que se coloque esta clase, más que todo para que no nos
deforme el diseño*/

.ultimo { margin-right: 0; }

/* Con estas clases definimos el ancho de las columnas */
.ancho-1   { width: 31px; }
.ancho-1a   { width: 39px; }
.ancho-1b   { width: 64px; }
.ancho-2   { width: 70px; }
.ancho-2b   { width: 82px; }
.ancho-3   { width: 110px; }
.ancho-4   { width: 150px; }
.ancho-5   { width: 170px; }
.ancho-6   { width: 220px; }
.ancho-6b   { width: 243px; }
.ancho-6b_2   { width: 267px; }
.ancho-6c   { width: 270px; }
.ancho-6d   { width: 275px; }
.ancho-7   { width: 288px; }
.ancho-8   { width: 310px; }
.ancho-8b   { width: 311px; }
.ancho-9   { width: 350px; }
.ancho-9b  { width: 360px; }
.ancho-10  { width: 390px; }
.ancho-10b  { width: 385px; }
.ancho-11  { width: 445px; }
.ancho-12  { width: 470px; }
.ancho-12b  { width: 483px; }
.ancho-13  { width: 510px; }
.ancho-13b { width: 546px; }
.ancho-14  { width: 550px; }
.ancho-15  { width: 590px; }
.ancho-15a  { width: 605px; }
.ancho-15a_2  { width: 621px; }
.ancho-15b { width: 622px; }
.ancho-15c { width: 600px; }
.ancho-16  { width: 630px; }
.ancho-16b  { width: 660px; }
.ancho-17  { width: 668px; }
.ancho-18  { width: 710px; }
.ancho-19  { width: 740px; }
.ancho-20  { width: 790px; }
.ancho-21  { width: 838px; }
.ancho-22  { width: 870px; }
.ancho-23  { width: 900px; }
.ancho-24  { width: 960px; }
.ancho-24b  { width: 972px; }


/* Lateral derecho de las columnas. */
.border {
  padding-right: 4px;
  margin-right: 5px;
  border-right: 1px solid #eee;
}

/* Borde para agregar más espacio en blanco a los span o columnas */
.colborder {
  padding-right: 24px;
  margin-right: 25px;
  border-right: 1px solid #eee;
}


/* Utilice estas clases para sacar de la misma linea a una columna. */

.pull-1  { margin-left: -40px; }
.pull-2  { margin-left: -80px; }
.pull-3  { margin-left: -120px; }
.pull-4  { margin-left: -160px; }

.push-0  { margin: 0 0 0 18px; }
.push-1  { margin: 0 -40px 0 18px; }
.push-2  { margin: 0 -80px 0 18px; }
.push-3  { margin: 0 -120px 0 18px; }
.push-4  { margin: 0 -160px 0 18px; }
.push-0, .push-1, .push-2, .push-3, .push-4 { float: right; }


/* Más elementos
-------------------------------------------------------------- */

/* Con esta clase podemos crear cajas  */ 
.box { 
  padding: 1.5em; 
  margin-bottom: 1.5em; 
  background: #eee; 
}

/* Con esta clase podemos crear reglas horizontales. */
hr {
  background: #ddd; 
  color: #ddd;
  clear: both; 
  float: none; 
  width: 100%; 
  height: .1em;
  margin: 0 0 1.4em;
  border: none; 
}
hr.space {
  background: #fff;
  color: #fff;
}

/* Limpiar los floats 
   Based on How To Clear Floats Without Structural Markup by PiE
   [http://www.positioniseverything.net/easyclearing.html] */

.clear { display: inline-block; }   
.clear:after, .container:after {
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;
}
* html .clear { height: 1%; }
.clear { display: block; }


/* Derecha o Izquierda*/
.izq{
	float:left;
}

.der{
	float:right;
}


#vacio{clear:both;}