/* -------------------------------------------------------------- 
   
   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;
	padding-top: 50px;
	width: 100%;
	height: 100%;
	background-color: #D7DFFD;
	
}

img{border:0px;}


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


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

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


------------------------------------------------------------------------*/	
	/*Lista de las redes*/
	#redes{
		margin-left: 465px; /*era 480*/
		padding-top: 10px;
	
	}

		#redes li{

			display:inline;
			margin-left: 5px;
		}

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

	
	///////          CONTENIDO          ///////////////


------------------------------------------------------------------------*/	
/*Fondo blanco del contenido*/
#contenido{
	background-color: #fff;
	}

	/*Imágen del reporductor*/
	#play{margin-left: 2px;}
	
/*-------------------- CONTENIDO PARTE IZQUIERA ------------------------------*/
	
	/*-------------------- MENU   -----------------------------*/

	#menu{
	  list-style: none;
	  margin: 0;
	  padding: 0;
	}

	#menu li{
	  float: left;
	  padding: 0px;
	  display: block;
	  margin-right: 0px;
	}

	/*podemos determinar el alto y el ancho de cada sección*/
	#menu li div.enlace{
	  display: block;
	  overflow: hidden;
	  height: 500px;
	  width: 25px;
	  padding-top: 5px;
	}

	/*Hace referencia a la imágen de cada sección*/
	#menu li img.imagen{
	  position: absolute;
	  cursor: pointer;  
	}

	
	#menu li h2{	 
		padding-right: 40px;
		text-align: right;
		margin-top: 300px;
		font-family: Chaparral Pro;
		color: #BBC5FC;	 
	}
	
	
	#menu li p{
	  margin: 0;
	  padding: 0;
	  width: 390px;
	  display: block;
	  margin-left: 40px;
	  padding-top: 10px;
	  
	 }
		
		#menu li p.home{		
			text-align: right;
			font-family: Verdana, Geneva, sans-serif;
			font-size: 11px; /*no hi era*/
		}
		
		#menu li p.galeria{		
			padding-top: 20px;		
			margin-left: 30px;	
			text-align: right;
			font-family: Verdana, Geneva, sans-serif;	
			font-size: 11px;
			color: #BBC5FC;
		}
		
		#menu li p.bio{			
			padding-top: 20px;
			margin-left: 30px;	
			text-align: right;
			font-family: Verdana, Geneva, sans-serif;		
			font-size: 11px; /*no hi era*/
		}
		
		#menu p.listadisco{		
			text-align: right;
			padding-left: 0px;	
			font-size: 11px; /*no hi era */	
			font-family: Verdana, Geneva, sans-serif;
		}
		
		#menu p.disco{		
			text-align: left;
			padding-left: 0px;	
			font-size: 11px; /*no hi era */
			font-family: Verdana, Geneva, sans-serif;
		}
		
		#discoflechaanterior{
			cursor: pointer;
		}
		
		#discoflechasiguiente{
			cursor: pointer;
		}
		
			/*Corresponde al READ MORE del texto de galería*/
			#menu li p .read{color: #ccd5fc;cursor:pointer;}
			#menu li p .read:hover{color: #000000;}
			
			#menu #Home{
			  width: 470px;
			}
			
			#contenidoHome{
				margin-left: 25px;
				
			}
			
			#contenidoHome div.new{
				position: relative;
				margin-left: 0px;
				width: 440px;
				height: 55px;
				overflow: hidden;
			}
			
			#contenidoHome div.newnew{
				margin-left: 0px;
				width: 440px;
				height: 210px;
				overflow: auto;
				
			}
			
			#contenidoHome div.newnew p.homenew{
					padding-top: 0px;
					text-align: right;
					margin-left: 30px;
					font-family: Verdana, Geneva, sans-serif; /*no hi era*/
				}
			
			#contenidoHome div.newnew p.homenew strong{
					font-size: 11px;
					
				}
			
			#contenidoHome div span.read{
				color: #ccd5fc;
				position: absolute;
				bottom: 0px;
				right: 20px;
				background: #fff;
				margin: 0px;
				padding: 0px;
				z-index: 10;
			}
			
			#contenidoHome div span.read:hover{	
				color: #000000;
			}
		
			#contenidoGaleria {
				margin-left: 25px;
			}
			
			#contenidoGaleria #capaGaleria{
			  	width: 440px;
				height: 389px;
				overflow: auto;
				text-align: right;
			}
			
			#contenidoGaleria #capaGaleria p.textogaleria{
				text-align: right;
				height: 40px;
				margin-left: 30px;
				overflow: hidden;				
			}
			
			#capaGaleria div.capatextogaleria {
				position: relative;
			}
			
			#capaGaleria div p.textogaleria span.read{
				color: #ccd5fc;
				position: absolute;
				bottom: 0px;
				right: 0px;
				background: #fff;
				margin-left: 30px;
				padding: 0px;
				z-index: 10;
			}
			
			#capaGaleria div p.textogaleria span.read:hover{
				color: #000000;
				}
			
			#contenidoBio{
				margin-left: 25px;
			}
			
			#contenidoBio #capaBio{
				margin-left: 0px;
			  	width: 440px;
				height: 389px;
				overflow: auto;
			}
			
			#contenidoBio #capaBio{
				margin-left: 0px;
			  	width: 440px;
				height: 389px;
				overflow: auto;
			}	
			
			#contenidoDisco{
				margin-left: 25px;
			}
			
			#contenidoDisco #lista{
			  	width: 440px;
				height: 170px;
				overflow: auto;
			}
			
			#contenidoDisco #lista p.titulosdisco{
				padding-top: 5px;
			}
			#contenidoDisco #lista p.pinchadisco{
				cursor: pointer;
			}
			
			#contenidoDisco #discoDetalle{
				padding-top: 40px;
			}
			
			#titulodisco{
				color: #BBC5FC; /*BBC5FC*/
				font-weight: bold;
				
			}
			
			#contenidoContact{
				margin-left: 25px;
			}
			
			#contenidoContact #datoscontact{
				margin-top: 20px;
				width: 440px;
				height: 110px;
				overflow: auto;
				text-align: right;
				font-family: Verdana, Geneva, sans-serif; /*afegit*/
				font-size: 11px;/*afegit*/
				color: #666;/*afegit*/
			}				
			
			
			/*Parte izquierda del contenido Menú de las secciones discografy y contacto*/
			#parte_izq{
			
				margin-left: 50px;
				padding-top: 15px;
				
			}
			
			/*Imagen derecha de las secciones discografia y contacto*/
			#img_der img{
			
				margin-left: 190px;
			
			}
			
			#contenido_info{
				padding-top: 10px;
				width: 430px;		
				font-family: Verdana, Geneva, sans-serif;	
			}
			
			/*Imágenes que hay a la izquierda de la sección discografy*/
			#texto_izq img{
				padding-left: 30px;
				margin-top: 1px;
				
			}
			#texto_izq #titulodisco{ 
				width:170px; /*per no tallar títols*/
				
			}
			
			#descargasContact{
				padding-top: 10px;
				width: 430px;			
			}
			
			#textoContact img{
				text-align: right;
				margin-top: 1px;						
			}
			
			#textoContact a{
				height: 0px;
				width: 0px;
				padding: 0px;
				margin: 0px;
				text-decoration: none;
				color: #9fa2ef;
				text-align: right;
			}
	 
/*-------------- FORMULARIO-----------------*/

#form1 {
	width: 230px;
	height: 330px;
	margin-left: 50px;
	padding-left: 10px;
	padding-top: 9px;
	padding-bottom: 9px;
	border: 1px solid #d0d0d0;
	color: #9fa2ef;
	text-align: right;
}
#form1 p{
	width: 220px;
	margin: 0px;
	padding: 0px;
}
#form1 label{
	font-weight: normal;
	margin: 0px;
	padding: 0px;
}

#nombre, #email, #asunto{
	height: 18px;	
	width: 220px;
	margin-top: 2px;
	margin-right: 10px;
	background: #ffffff;
	border: 1px solid #d0d0d0;
}
#mensaje{		
	width: 220px;
	height: 110px;
	margin-right: 10px;
	background: #ffffff;
	border: 1px solid #d0d0d0;
	padding-left: 0px;
	padding-right: 0px;
}
	
#botonsubmit, #botonreset{
	background: #ffffff;
	border: 0px;
	color: #9fa2ef;
}
	
.azultitulo{
	color: #BBC5FC;
}


#downloadimagenpretty{color: #7B7B7B;}
#downloadimagenpretty:hover{color: #000000;}

/* 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: 170px; }
.ancho-5b   { width: 207px; }
.ancho-6   { width: 220px; }
.ancho-6b   { width: 240px; }
.ancho-7   { width: 270px; }
.ancho-8   { width: 310px; }
.ancho-9   { width: 350px; }
.ancho-9a   { width: 367px; }
.ancho-9b  { width: 371px; }
.ancho-10  { width: 390px; }
.ancho-11  { width: 445px; }
.ancho-12  { width: 470px; }
.ancho-13  { width: 510px; }
.ancho-14  { width: 550px; }
.ancho-14b  { width: 589px; }
.ancho-15  { width: 590px; }
.ancho-15c { width: 593px; }
.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: 960px; }


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