/* -------------------------------------------------------------- 
   
   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.

   
-------------------------------------------------------------- */
/*
p,span,li span {
	text-align:left;
}
*/
/*
li span{
	float:left;
}
*/
a img{border:0px;}

a{
text-decoration:none;
  color: #fff; 
  font-family: Trebuchet MS, Helvetica, sans-serif;
}

ul{list-style:none;}


body{
	background-image: url('../../images/bg.jpg');
	background-repeat:repeat;
  	
}
#vacio{
	clear:both;
}

#wrapper_home{
	margin: 0px auto;
	  color: #fff; 
  font-family: Trebuchet MS, Helvetica, sans-serif;
  font-size: 14px;
}

#banner_home{
	background-image: url('../../images/banner.jpg');
	background-repeat:no-repeat;
	width:960px;
	height:892px;
}

.imagen_central {
	/*text-align: center; */
	margin: -720px 0 115px 260px;
}



#lista_logo{
	background-image:url('../../images/logo.png');
}

ul.lista_logo li{display:inline;float:left; margin-left:20px;}


#home_social{
	background-image: url('../../images/barra_redsocial.jpg');
	background-repeat:no-repeat;
	width:960px;
	height:33px;
	margin-top:-80px;
}

#home_social ul li{display:inline;float:left;}

#home_social ul li.esocial{margin-right:40px;}

#home_social ul li.esocial img{margin-top:-5px;}

#home_social ul li a img {margin-top:-15px;}

#menu_empos{margin-top:-45px;}

#menu_empos ul{margin-top:-7px;}

#menu_empos ul li{margin-top:5px;}

#menu_empos ul li.primero{padding-top:20px;}

#empo_tv ul{
	background-image: url('../../images/bloque_tv.jpg');
	background-repeat:no-repeat;
	width:232px;
	height:200px;
	
}

	

#empo_radio ul{
	background-image: url('../../images/bloque_radio.jpg');
	background-repeat:no-repeat;
	width:232px;
	height:200px;
}

#empo_news ul{
	background-image: url('../../images/bloque_news.jpg');
	background-repeat:no-repeat;
	width:232px;
	height:200px;
}

#empo_descargas ul{
	background-image: url('../../images/bloque_descargas.jpg');
	background-repeat:no-repeat;
	width:232px;
	height:200px;
}



#pie_home ul li{display:inline;float:left;}

/* 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-1A {width:18px;}
.ancho-1   { width: 30px; }
.ancho-2B   { width: 50px; }
.ancho-2   { width: 70px; }
.ancho-2C   { width: 79px; }
.ancho-3   { width: 100px; }
.ancho-4B  { width: 120px; }
.ancho-4   { width: 150px; }
.ancho-5   { width: 170px; }
.ancho-5B   { width: 190px;}
.ancho-6   { width: 240px; }
.ancho-7   { width: 270px; }
.ancho-8   { width: 310px; }
.ancho-9   { width: 360px; }
.ancho-10  { width: 390px; }
.ancho-11  { width: 455px; }
.ancho-12  { width: 470px; }
.ancho-13  { width: 510px; }
.ancho-14  { width: 530px; }
.ancho-15  { width: 590px; }
.ancho-16  { width: 630px; }
.ancho-17  { width: 668px; }
.ancho-18  { width: 710px; }
.ancho-19  { width: 750px; }
.ancho-20  { width: 790px; }
.ancho-21  { width: 839px; }
.ancho-22  { width: 870px; }
.ancho-23  { width: 960px; }
.ancho-24  { width: 950px; }

/* 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;
}
span.izq{
	float:left;
	margin-left:9px;
}

span.der{
	float:right;
margin-right:19px;
position:relative;
top:9px;
}

.center{
	text-align: center;
}

.vacio{
	clear:both;
}


#dic{
	position:relative;
	bottom:5px;
}