/* -------------------------------------------------------------- 
   
   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:#000000;
	background-image: url('../../../img/fondo.jpg') ;
  
}


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

.container {
  width: 928px;
  margin: 0 auto;
}

#cabacera{
	height:150px;	
}
	#logo h1{
		margin-top:0px;
		
	}
	
	#registro{
		width:197px;
		height:50px;
		float:right;
		background-image: url('../../../img/registrarse.png');
		background-repeat:no-repeat;
		padding-top:5px;
	}

		#registro span{padding:12px;font-size:1.2em;color:#fff;}
		#registro span a{color:#000;text-decoration:none;font-weight: bold;}
		#registro span a:hover{color:#fff;text-decoration:underline;font-weight: bold;}
	
		#registro_on{
		width:928px;
		height:50px;
		float:right;
		background-image: url('../../../img/registrarse1.png');
		background-repeat:no-repeat;
		padding-top:5px;
	}
	
	#registro_on p{padding:5px 0px 0px 10px;font-size:1.2em;color:#fff;}
		#registro_on p a{color:#000;text-decoration:none;font-weight: bold;}
		#registro_on p a:hover{color:#fff;text-decoration:underline;font-weight: bold;}
	
	#cabecera ul{margin-top:-5px;width:928px;margin-left:0px;}
	#cabecera ul li{display:inline;vertical-align:middle;padding-top:0px;}
	.hello{padding:15px 0px 0px 10px;}
	.logout{margin-top:-15px;}
		.logout img{vertical-align:top;}
	
#menu{
	margin-top:10px;
	background-image: url('../../../img/buscador.png');
	background-repeat:no-repeat;
	height:48px;
	font-weight:bold;
}

	.menu{margin:15px 0px 0px 30px;}
	#menu ul li {display:inline;padding:5px;}
	#buscador{padding-top:0px;}
		.buscador input{margin-left: 5px;border:1px solid #fff;font-size:12px;width: 150px;}
		.buscador img{vertical-align: top;margin-bottom:6px;}
		.buscador ul li{display:inline;}
		#imagen{width:20px;height:21px;display:inline-block;border:none;padding-top:8px;}
	.search{
		color:#fff;
		margin:20px 10px;
		font-size:14px;
	}	
		
#cuerpo{
	background-color:#333;
	margin-right:0px;
}

	#banner{
		/*background-image: url('../../../img/banner_publi.png');
		background-repeat:no-repeat;
		height:250px;*/
		margin-right:0px;
	}
	
	#banner{
		background-image: url('../../../img/banner_publi.png');
		background-repeat:no-repeat;
		height:195px;
		background-color:#333;
	}
	
	
	
	#banner_publi{
		/*background-image: url('../../../img/tiesto.png');*/
		background-repeat:no-repeat;
		height:195px;
		margin-left:15px;
		margin-right:0px;
	}

	#mp3{
		background-image: url('../../../img/mp3.png');
		background-repeat:no-repeat;
		height:120px;
		margin-right: -3px;
		background-color:#333;
		margin-top:-3px;
	}
	
	#estrellas{
		height: 17px;
        width:105px;
        background:transparent url('../../../img/estrellas.png');
        background-position:0px 0px;
        background-repeat: no-repeat;
	}
        .estrellas0 { background-position: 0px 0px !important; }
        .estrellas1 { background-position: 0px -17px !important; }
        .estrellas2 { background-position: 0px -34px !important; }
        .estrellas3 { background-position: 0px -51px !important; }
        .estrellas4 { background-position: 0px -68px !important; }
        .estrellas5 { background-position: 0px -85px !important; }

        .estrellas0-s { background:transparent url('../../../img/estrellas_blue.png') !important; background-position: 0px 0px !important; background-repeat: no-repeat !important; }
        .estrellas1-s { background:transparent url('../../../img/estrellas_blue.png') !important; background-position: 0px -17px !important; background-repeat: no-repeat !important; }
        .estrellas2-s { background:transparent url('../../../img/estrellas_blue.png') !important; background-position: 0px -34px !important; background-repeat: no-repeat !important; }
        .estrellas3-s { background:transparent url('../../../img/estrellas_blue.png') !important; background-position: 0px -51px !important; background-repeat: no-repeat !important; }
        .estrellas4-s { background:transparent url('../../../img/estrellas_blue.png') !important; background-position: 0px -68px !important; background-repeat: no-repeat !important; }
        .estrellas5-s { background:transparent url('../../../img/estrellas_blue.png') !important; background-position: 0px -85px !important; background-repeat: no-repeat !important; }
	
		#estrellas a{
            display:block;
			height: 17px;
			width: 21px;
			float: left;
			text-decoration: none;
			text-indent: -9999px;
		}
	
	#star{
		height:80px;
		background-image: url('../../../img/mp3_abajo.jpg');
		background-repeat:no-repeat;
		margin-top: -3px;
        padding-top:5px;
		padding-left:20px;
		width:384px;
	}
		#star h2{color: #fff;font-size: 14px;}
	
	#mensaje_carro{
		position: absolute;
		background-image: url('../../../img/popup.png');
		background-repeat:no-repeat;
		top: 33%; 
		left: 33%; 
		width: 400px; 
		height:100px;
		color: #000; 
		padding: 20px; 
		font-size: 16px; 
		text-align: center;
		font-weight: bold;
		padding-top:20px;
	}
	
	#mensaje_carro p{
		margin-top:15px;
	}
	
	#mensaje{
		background:url('../../../img/mensaje.jpg') no-repeat;
		height:54px;
		padding:5px 10px 5px 20px;
		color:#333;
		font-weight:bold;
	}

	#carrito{
		margin-top:10px;
	}
		#carrito h2{font-size:12px; color:#fff;}
		#carrito div{
			width:49px;
			height:88px;
			background-image: url('../../../img/carrito_compra.png');
			background-repeat:no-repeat;
			}
			#carrito img{padding:8px 0px 0px 4px;}
			#carrito p{color:#fff;font-weight: bold;font-size:14px;padding:10px 0px 0px 0px;text-align:center;}
	
	.regalos{
		height:50px;
		clear:both;
	}		
	
	#contenido{
		margin-bottom:15px;
	}
	

	/*Estilos PLaylist*/
		#post{
			padding:20px;
			width:520px;
			/*height:760px;**/
			overflow:hidden;
		}
			
			.post{
				background-image: url('../../../img/panel.jpg');
				background-repeat:no-repeat;
				width:508px;
				height:740px;
			}
			
				.post ul{
					margin:5px 0px 0px 6px;
					padding:2px 2px 0px 0px;
				}
				
			
				.genero, .genero1{
					background-image: url('../../../img/genero.jpg');
					background-repeat:no-repeat;
					width:496px;
					height:41px;	
				}


					#titulo{font-size:11px;padding-top:14px;font-weight:bold;}
					#titulo a{color:#fff;text-decoration: none;}
					#titulo li{display:inline;margin:0px 5px;}
					#titulo li span{color:#fff;font-size:11px;font-weight:bold;}	
					#dic a{padding: 0px 1px;}
					#dic a:hover{color:#283D8C ;}
					
					#paginar{font-size:16px;padding-top:8px;font-weight:bold;color:#fff;}
					#paginar a{color:#fff;text-decoration: none;}
					#paginar li{display:inline;margin:0px 5px;}
					
					#paginar a.actual{padding:2px;background-color:#007BCB;}
			
				.slice{
					background-image: url('../../../img/slice.jpg');
					background-repeat:no-repeat;
					width:496px;
					height:60px;
					margin:4px 0px;	
					
				}
				
					.slice_artistas{
						background-image: url('../../../img/slice_artistas.jpg');
						background-repeat:no-repeat;
						width:496px;
						height:120px;
						margin:4px 0px;
					}
					.tema_artistas{color:#fff;text-align:justify;}
					.tema_artistas a{color: #999;}
					
				.padding{padding:5px 0px 0px 5px;}
				.padding3{padding:5px 5px 0px 5px;}
				.padding4{padding:0px 5px 0px 5px;}
				.padding1{padding:15px 0px 0px 25px;}
				.padding2{padding:17px 0px 0px 15px;}
				.autor{color:#a1a1a1;padding-top:3px;}
				.tema{color:#fff;line-height:20px;}
				.album{color:#000;}

#semana1{
	margin:30px 0px 5px 10px; 
	min-height:600px;
}	
	
#esta_semana ul{
	margin-left: -2px;
}

	
	
	#banner_noticias{
		background-image: url('../../../img/fondo_banner_inf.jpg');
		background-repeat:no-repeat;
		height:550px;
		padding-top:5px;
		margin-bottom:-14px;

	}	

		#banner_noticias{
			padding-left:60px;
		}

	
#noticias{
	background-image: url('../../../img/pie.png');
	background-repeat:no-repeat;
	height:349px;
	
	padding:15px 0 0 30px;
}

#pie{
	background-image: url('../../../img/pie.png');
	background-repeat:no-repeat;
	background-color:#000;
	height:100px;
	margin-bottom:-15px;
}
	

	.listas{
		color:#ffffff;
		padding-right:25px;
		
	}
	
	.listas h3{color:#fff;font-size:14px;}
	.listas ul{width:235px;}
	.listas li{font-size:13px;margin-left:-15px;}
	.listas a{color:#fff;text-decoration:none;}
	.listas a:hover{color:#fff;text-decoration:underline;}

/*
 * Extras
 * */

.precio{
	font-size: 18px;
	color: #fff;
	font-weight: bold;
	margin: 5px 0px 20px 5px;
	width: 90px;
}

#post_genero{
			padding:20px;
			width:520px;
			
		}
			.post_genero{
				background-image: url('../../../img/middle.jpg');
				background-repeat:repeat-y;
				width:508px;
				
			}
			
				.post_genero ul{
					margin:-2px 0px 0px 6px;
					padding:2px 2px 0px 0px;
				}
				

.genero2{
        margin-top: 5px;
		margin-bottom: 5px;		
        background-image: url('../../../img/genero1.jpg');
		background-repeat:no-repeat;
		width:496px;
		height:41px;
}

.genero3{
        background-image: url('../../../img/genero.jpg');
		background-repeat:no-repeat;
		width:496px;
		height:41px;
        padding-top:5px;
}

.up{
	background-image: url('../../../img/up.jpg');
	background-repeat:no-repeat;
	height:11px;
	margin-bottom: -5px;
}

.down{
	background-image: url('../../../img/down.jpg');
	background-repeat:no-repeat;
	height:9px;
	margin-top: -5px;
}



.texto1 span{
	color: #fff;
	font-size: 12px;
}

.texto1{
	margin-top: 10px;
}

.genero1 img{
	margin-top: 5px;
}


/*
 Entrar.html
 */

#post_blanco{
	padding:20px;
	width:520px;
	margin:0px auto;
	}

#blanco{width:496px;margin:0px auto;}
	.blanco_arriba{
		background-image: url('../../../img/blanco_arriba.png');
		background-repeat:no-repeat;
		height:9px;
	}
	.blanco_medio{
		background-color:#ffffff;
		height:280px;
	}

	 	.isotipo{
	 		background:url('../../../img/logo_descarga.jpg') no-repeat;
			height:50px;
	 	}
		.alert{
			padding:0px 5px;
			margin:10px 20px 0px 60px;
			height:20px;
			background-color:red;
		}
		.alert h4{color:#fff;}
		.logout{font-size:16px; margin-left:220px;}
		.logout a:hover{color:green;}
		.blanco_medio ul{margin-left:15px;}
		.blanco_medio li{font-size:14px;margin-bottom:3px;}
		.blanco_medio h3{font-size:20px;padding:5px 0px 0px 50px;}
		.blanco_medio img{vertical-align:middle;}
		.blanco_medio a{text-decoration:none; color:#999;}
		.blanco_medio a:hover{text-decoration:underline; color:#666;}
	.blanco_abajo{
		background-image: url('../../../img/blanco_abajo.png');
		background-repeat:no-repeat;
		height:15px;
		margin-top:-4px;
		margin-bottom:-4px;
	}		

	.blanco_input{
		background-image: url('../../../img/input.jpg');
		background-repeat:no-repeat;
		width:455px;
		height:56px;
		font-family:Georgia;
	}
	
		.blanco_input input{
			width:430px;
			height:35px;
			border:none;
			padding:5px;
			font-size:20px;
			margin:5px 0px 0px 10px;
		}
		
		.enviar{margin-top:10px;}
		.enviar span{margin-left:120px;}


	.blanco_medio1{
		background-color:#ffffff;
		height:420px;
	}
	.blanco_medio1 ul{margin-left:15px;}
		.blanco_medio1 li{font-size:14px;margin-bottom:3px;}
		.blanco_medio1 h3{font-size:20px;padding:5px 0px 0px 50px;}
		.blanco_medio1 img{vertical-align:middle;}
		.blanco_medio1 a{text-decoration:none; color:#999;}
		.blanco_medio1 a:hover{text-decoration:underline; color:#666;}
		.enviar1{margin-top:10px;}
		.enviar1 span{margin-left:170px;}
		
	.blanco_medio2{
		background-color:#ffffff;
		height:420px;
	}
	.blanco_medio2 ul{margin-left:15px;}
		.blanco_medio2 li{font-size:14px;margin-bottom:3px;}
		.blanco_medio2 h3{font-size:20px;padding:5px 0px 0px 50px;}
		.blanco_medio2 img{vertical-align:middle;}
		.blanco_medio2 a{text-decoration:none; color:#999;}
		.blanco_medio2 a:hover{text-decoration:underline; color:#666;}
		.enviar1{margin-top:10px;}
		.enviar1 span{margin-left:170px;}	
		
	.comprar{
	 		background:url('../../../img/icono_carrito.png') no-repeat;
			height:50px;
	 	}	
		
		.item{
			border-bottom:4px solid #E9E9E9;
			border-top:1px dotted #999;
			height:45px;
			clear:both;
			padding-top:5px;
		}
			.item p{margin-top: 3px;color:#333;}
		
			.unidad{background:url('../../../img/precio.jpg') no-repeat;
			height:50px;padding:10px 0px 0px 4px;}
			.unidad span{font-size:.9em;}
			.cancel{padding-top:10px;}
			
			
			.item2{
			border-bottom:4px solid #E9E9E9;
			border-top:1px dotted #999;
			height:90px;
			clear:both;
			padding-top:5px;
		}
			
		.blanco_medio3{
		background-color:#ffffff;
		height:auto;
		overflow:hidden;
	}
	.total{
		width:105px;
		height:35px;
		background:url('../../../img/total.jpg') no-repeat;
		padding:10px 0px 0px 0px;
		text-align:right;
	}
		.total span{ }
	
		.total1{
			padding-top:10px;
		}
	.blanco_medio3 ul{margin-left:10px;}
		.blanco_medio3 li{font-size:14px;margin-bottom:3px;}
		.blanco_medio3 h3{font-size:20px;padding:5px 0px 0px 50px;}
		.blanco_medio3 img{vertical-align:middle;}
		.blanco_medio3 a{text-decoration:none; color:#999;}
		.blanco_medio3 a:hover{text-decoration:underline; color:#666;}
		.enviar2{margin-top:10px;border-top:2px solid #0094CC;padding-top:15px;}
		.enviar2 span{margin-left:170px;}		
		
		.alert_registro{
			background-color:yellow;
			padding:5px;
			height:180px;
			margin-right:30px;
			margin-bottom:5px;
		}
		
		
	.paypal_back{padding:10px;font-size:14px;color:#333; }	
	.paypal{height: 250px;}
	
		
	#aviso{
		padding-top: 22px;
		vertical-align:middle;
	}
	
	.derecha{
		text-align: right;
	}
	
	.subir_track{
	font-size: 14px;
	padding: 10px;
}

#publi_interna ul{
	margin-left: 15px;
}

#publi_interna ul li{
	display: inline;
	padding-right:5px;
}
	
		
/* 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: 928px; }
.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;
}

.center{
	text-align: center;
}