/* -------------------------------------------------------------- 
   
   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-x;
	width: 350;
	height: 1200;
	
}

img{border:0px;}


/* Contenedor de todas las columnas. */
.general {
  
  margin: 0 auto;
  
}


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

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


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


	
#cabecera{ 
		margin: 0 auto;
		background: url("../../img/casa.jpg") no-repeat;
		width: 1005px;
		height: 486px;	
	
		
	}

	#logo span{
			
			    display: block;
				margin-left:-3000px;
				height: 225px; 
				width: 43px;
		}
		
	#logo img{
		
		margin-top: 30px;
		margin-left: 90px;
		
	}

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

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


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

#cuerpo{margin: 0 auto;}

	
	
	ul.modelos li.present_modelo{
		
		display:inline;
		float:left;
		
	}
	
	
	
	#foto_info{
		
		margin-top:10px;
		
	}
	
	#fotos_video{
		
		background: url("../../img/fondo_fotos.png") repeat-x;
		width: 657px;
		height: 165px;
		margin-top:20px; 
		
	}
		
		#fotos{padding-left: 20px;}
		#fotos img{
				margin-top: 8px;
				margin-left: 17px;
				
			}
			
		#video img{
			margin-top: 5px;
				margin-right: 30px;
			}
			
			
			
			
		ul.fotos{margin-top: 0px;}
		
		ul.fotos li{
			
			display:inline;
			float:left;
			margin-left: 4px;
			
		}
		
		


	
	#t_modelo img{
			
			margin-left: 10px;
			
	}
	
		.present_modelo{
		
			background: url("../../img/bloque.png") repeat-x;
			width: 322px;
			height: 245px;	
		
		
		}
		
			#foto{
				
				margin-left: 10px;	
				
			}
			
			
			ul.info_precio{margin-top: 10px; margin-left: 10px;}
			
			ul.info_precio li{
				
				display:inline;
				
				
			}
			
				ul.info_precio li.precio{margin-left: 130px;}
			
				ul.info_precio li span{
					
					font-family:trebuchet MS;
					font-size: 24px;	
					
					
				}
	
	
ul.modelos{margin-top: 15px;}

#t_modelo{margin-top: 20px;}
	
/*-------- SIDEBAR ------------*/

#contacto{
	
	background: url("../../img/fondo_form.png") no-repeat;
	width: 268px;
	height: 510px;	
	padding-top: 30px;
	padding-left: 15px;
	margin-left: 50px;
	margin-top: -60px;
	
	
}

	
	form{
		
		margin-top: 
		
		
	}
		
		#nombre, #apellidos, #email, #telefono{
			background:url("../../img/form.jpg") no-repeat scroll 0 0 transparent;
			border:medium none;
			height:38px;
			width:239px;
			font-family:trebuchet MS;
			font-size: 16px;
			margin-top:10px;
			padding-left: 5px;
		}
		
		#observaciones{
			
			background:url("../../img/form2.jpg") no-repeat scroll 0 0 transparent;
			border:medium none;
			height:100px;
			width:239px;
			margin-top:20px
			
		}
		#modelos{margin-top:17px;
		width:239px;
		
}

		#submit  {
			background:url("../../img/btn_consultar.png") no-repeat scroll 0 0 transparent;
			border:medium none;
			height:41px;
			width:239px;
			margin-top: -10px;
			
		}
#info_cid{
	
	background:url("../../img/fondo_grupo.png") no-repeat scroll 0 0 transparent;
	height:245px;
	width:268px;
	margin-left: 50px;
	margin-top: -5px;

	
	
	
}

	#t_cid img
{
	margin-top: 10px;
	margin-left: 10px;
	
	
	}
	
	#info p{
		
			margin-left: 15px;
			
			
			
		}
		
		#info{margin-top: 15px;}
	
	
/*----------------------------------------------------------------------

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


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


#wrapperpie{
		background-color:#fff;
		height:37px;
		margin-top: 20px;
		
}
	
	#pie{margin: 0 auto;}
	
	ul.redes_sociales li{
		
		display:inline;	
	}
	
		
		ul.redes_sociales li.texto{
			padding-bottom: 20px;
			vertical-align:middle;
			
		}
		ul.redes_sociales li.redes img{margin-top:10px;}
		
		

#logo_dinamic{
	
	margin-top:10px;	
	float:right;
	
	
}
/* 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: 30px; }
.ancho-2   { width: 70px; }
.ancho-3   { width: 110px; }
.ancho-3b  { width: 128px; }/*usado*/
.ancho-4   { width: 139px; }/*usado*/
.ancho-5   { width: 140px; }/*usado*/
.ancho-6   { width: 220px; }
.ancho-7   { width: 268px; }/*usado*/
.ancho-7b   { width: 298px; }/*usado*/
.ancho-8   { width: 310px; }
.ancho-9   { width: 350px; }
.ancho-10  { width: 390px; }
.ancho-11  { width: 445px; }
.ancho-12  { width: 483px; }/*usado*/
.ancho-12b  { width: 460px; }/*usado*/
.ancho-13  { width: 510px; }
.ancho-14  { width: 550px; }
.ancho-15  { width: 590px; }
.ancho-16  { width: 657px; }/*usado*/
.ancho-17  { width: 668px; }
.ancho-18  { width: 710px; }
.ancho-19  { width: 750px; }
.ancho-20  { width: 790px; }
.ancho-21  { width: 830px; }
.ancho-22  { width: 870px; }
.ancho-23  { width: 900px; }
.ancho-24  { width: 965px; }
.ancho-25  { width: 1005px; }


/* 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;}