/* -------------------------------------------------------------- 
   
   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{
	margin:0px auto;
	background-color: #600048;
	background-image:url('../../img/fondo_color_home.jpg');
	background-position:top center;
	background-repeat:no-repeat;
}

* {
	
}


.wrapper{
	max-width: 1067px;
	/*width:auto !important;*/
	width: 1067px;
	margin: 0px auto;
}

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

#banner{
	background-color: #F8A71A;
	padding: 3px;
	width: 730px;
	height: 92px;
	margin: 0px auto;
	margin-bottom: 0px;
}
#cabecera{
	width: 825px;
	margin: 0 auto;
	margin-top: 15px;
}
#slide_bar{
	background-image: url('../../img/fondo_slide.jpg');
	background-repeat: repeat-x;
	height: 67px;
	margin-top: -5px;
}
#banner_principal{
	position:relative;
	height:323px;
	padding-left:60px;
	
	margin:0px auto;
	margin-bottom:31px;
	_padding-left:0px;
}

#menu{
	background-image:url('../../img/menu.png');
	background-repeat: no-repeat;
	width:1067px;	
	height:96px;
	margin-bottom:-40px;
	margin-top:-70px;
	position:relative;
	top:0px;
	z-index:10;
}

 ul.menu{
		height:25px;
		clear: both;
		float: left;
		width: 100%;
		list-style: none;
		margin: 0;
		margin: 20px 0px 0px 45px;
		padding:12px 0px 0px 95px;
	}
	
	ul.menu li{
		display:inline;
		height:42px;
		float: left;
		text-align:center;
		padding:0px 1px;
	}

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

			ul.menu li a:link, ul.menu li a:visited {
				padding: 0px;
				display: block;
				text-decoration: none;

			}
			
			ul.menu li a span{
				text-indent: -3000px;
				display: block;
				
			}
			
			ul.menu li a.home {
				background-image:url('../../img/menu_home.png');
				background-repeat: no-repeat;
				height:31px;
				width:76px;
			}
			
			ul.menu li a.home:hover{
				background-image:url('../../img/menu_home.png');
				background-repeat: no-repeat;
				height:31px;
				width:76px;
				background-position:0 -30px;
			}
			
			ul.menu li a.videos {
				background-image:url('../../img/menu_videos.png');
				background-repeat: no-repeat;
				height:31px;
				width:76px;
			}
			
			ul.menu li a.videos:hover{
				background-image:url('../../img/menu_videos.png');
				background-repeat: no-repeat;
				height:31px;
				width:76px;
				background-position:0 -30px;
			}
			
			ul.menu li a.blogs {
				background-image:url('../../img/menu_blogs.png');
				background-repeat: no-repeat;
				height:31px;
				width:76px;
			}
			
			ul.menu li a.blogs:hover{
				background-image:url('../../img/menu_blogs.png');
				background-repeat: no-repeat;
				height:31px;
				width:76px;
				background-position:0 -30px;
			}
			
			ul.menu li a.show {
				background-image:url('../../img/menu_show.png');
				background-repeat: no-repeat;
				height:31px;
				width:155px;
			}
			
			ul.menu li a.show:hover{
				background-image:url('../../img/menu_show.png');
				background-repeat: no-repeat;
				height:31px;
				width:155px;
				background-position:0 -30px;
			}
			
			ul.menu li a.consejos {
				background-image:url('../../img/menu_consejos.png');
				background-repeat: no-repeat;
				height:31px;
				width:126px;
			}
			
			ul.menu li a.consejos:hover{
				background-image:url('../../img/menu_consejos.png');
				background-repeat: no-repeat;
				height:31px;
				width:126px;
				background-position:0 -30px;
			}
			
			ul.menu li a.juegos {
				background-image:url('../../img/menu_juegos.png');
				background-repeat: no-repeat;
				height:31px;
				width:92px;
				margin:0px 2px;
			}
			
			ul.menu li a.juegos:hover{
				background-image:url('../../img/menu_juegos.png');
				background-repeat: no-repeat;
				height:31px;
				width:92px;
				background-position:0 -30px;
				
			}	
			
			ul.menu li a.fotos {
				background-image:url('../../img/menu_fotos.png');
				background-repeat: no-repeat;
				height:31px;
				width:76px;
				margin:0px 2px;
			}
			
			ul.menu li a.fotos:hover{
				background-image:url('../../img/menu_fotos.png');
				background-repeat: no-repeat;
				height:31px;
				width:76px;
				background-position:0 -30px;
			}				
#contenido{
	/*background-image:url('../../img/fondo_contenido.png');*/
	height:277px;
	width: 825px;
	margin: 0 auto;
	padding-top:10px;
}
	#cd{margin-right:0px;}
	#fondo_contenido{
	margin-top: -10px;
	padding-top: 10px;
	background-image:url('../../img/fondo_home_destacados.png');
	background-repeat: no-repeat;
	height:277px;
	width:826px;
	
	}
	#secciones ul li{display:inline;margin:0px -2px;}	

#pie{
	width: 825px;
	margin: 0 auto;
	clear:both;
	
}


.norma{
	background-image:url('../../img/norma_back.png');
	background-repeat: no-repeat;
	height:42px;
	width:825px;
	clear:both;
	margin-top:0px;
	margin-bottom:-20px;
}


.historial_test{margin-top:60px; margin-left:15px;font-size:12px;}
	.historial_test li{padding:5px;margin-left:5px;border-bottom:1px dashed #333; width: 140px}
		.historial_test li a{color:#333;}
		.historial_test li a:hover{color:#bc2fa7;}

/* 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-4   { width: 150px; }
.ancho-5   { width: 172px; }
.ancho-6   { width: 220px; }
.ancho-7   { width: 270px; }
.ancho-8   { width: 310px; }
.ancho-9   { width: 350px; }
.ancho-10  { width: 390px; }
.ancho-11  { width: 445px; }
.ancho-12  { width: 470px; }
.ancho-13  { width: 515px; }
.ancho-14  { width: 550px; }
.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: 830px; }
.ancho-22  { width: 870px; }
.ancho-23  { width: 900px; }
.ancho-24  { width: 950px; }
.ancho-minifoto { width: 84px; }


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