/*                 Estilo General para SurMusicStudio                  */
/*   Por Alvaro Fernandez | www.alvaroweb.com | info@alvaroweb.com   */
/*                 Dic 2006 - Codigo completamente libre                 */


/**************** GENERAL  ******************/

* { margin: 0; padding: 0; border: 0;}
li {list-style-type: none;}


/**************** ENLACES  ******************/

/*vinculos estandar*/
a { outline: 0; }

a:link, a:visited, a:active {
 text-decoration: none; color: #BB8884; font-size: 130%; font-weight: bold;
}
a:hover {text-decoration: underline; color: white; font-size: 130%; font-weight: bold;}

/*Estilo para las miniaturas del lightbox*/
a.miniaturas:link img, a.miniaturas:visited img, a.miniaturas:active img {border: 3px solid white;} 
a.miniaturas:hover img {border: 3px solid #BB8884;}


/*******************************************************/
/**************** ESTRUCUTURA PAGINA  ******************/
/*******************************************************/

body {
 background: black url("../imagenes/comunes/fondo-body2.gif") repeat-x; color: white;
 font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
 font-size: 80%;
 text-align: center;
 margin: 0; padding: 0;
}

#index{
 background: none; background-color: black; color: white;
 text-align: left;
}
#contenedor1 {
 width: 900px;
 margin: 0 auto;
 vertical-align: top; text-align: left;
 margin-top: 20px;
 /*background-color: blue;*/
}

/*Index centrado*/

div#introduccion {
 position: absolute; /*Posicionamiento absoluto*/
 top: 50%; /*Desde arriba, colocar al 50% de la pantalla*/
 left: 50%; /*Desde la izquierda, colocar al 50% de la pantalla*/
 margin-top: -160px; /*Restamos la mitad de alto para centrarlo verticalmente*/
 margin-left: -450px; /*Restamos la mitad de ancho para centrarlo horizontalmente*/
 text-align: center;
}
div#info {
border-top: 10px solid #847B40; border-bottom: 10px solid #847B40;
}
.tituloindex {
	width: 900px;
	height: 91px;
	margin: 0 auto;
}

#menu {
 margin: 0 auto;
 color: white; 
 width: 900px;
 height: 312px;
 overflow: hidden;
 background: url("../imagenes/comunes/fondo-menu.jpg") no-repeat;
}


/*Secciones*/
.seccion { width: 900px; height: 91px; }
.seccion h2 { position: absolute; left:-9999px; }

#inicio { background: url("../imagenes/comunes/titulo-inicio.jpg") no-repeat; }
#locales { background: url("../imagenes/comunes/titulo-locales.jpg") no-repeat; }
#nave { background: url("../imagenes/comunes/titulo-nave.jpg") no-repeat; }
#fotos { background: url("../imagenes/comunes/titulo-fotos.jpg") no-repeat; }
#contacta { background: url("../imagenes/comunes/titulo-contacta.jpg") no-repeat; }
#musikclub { background: url("../imagenes/comunes/titulo-musikclub.jpg") no-repeat; }
#los_bonos { background: url("../imagenes/comunes/titulo-los-bonos.jpg") no-repeat; }

.textos {
 float: left;
 width: 310px;
 padding: 0 15px 0 100px;
 text-align: left;
 height: 1%;
 /*background-color: red;*/
}
.textosTotal {
 /*float: left;
 width: 310px;*/
 padding: 0 15px 0 100px;
 text-align: left;
 height: 1%;
 /*background-color: red;*/
}
.textos h3 { color: #BB8884; font-size: 150%; }
.fotos {
 width: 450px; height: 1%;
 margin-left: 430px;
 /*background-color: yellow;*/
}
.fotos img { margin-bottom: 15px; }
.destacado {font-size: 180%;}
.pie {
 clear: both;
 width: 310px;
 margin: 25px 0 25px 425px;
 padding-left: 140px;
 background: url("../imagenes/comunes/fondo-pie.jpg") no-repeat;
}
.pie h4 {color: #BB8884; font-size: 240%; font-weight: normal; padding-top: 4px; line-height: 30px;}

.pie a span { position: absolute; left:-9999px; }

p.enlaces_pie { color: white; margin-bottom: 5px;}
p.enlaces_pie a { color: white; font-size: 11px; border-bottom: 1px solid #BB8884; text-decoration: none;}
p.enlaces_pie a:hover { color: #BB8884; font-size: 11px; border-bottom: 1px solid #BB8884; text-decoration: none;}
#index p.enlaces_pie {
 display: block; text-align: right; margin-right: 50px;
}
 
 
#xhtml { float: left; margin: 6px 0 6px 0;}
#css {
 margin: 6px 0 6px 85px;
}
#xhtml a {
 display: block; width: 80px; height: 15px;
 background: url("../imagenes/comunes/val_xhtml0.gif") no-repeat 0 0;
}
#css a {
 display: block; width: 80px; height: 15px;
 background: url("../imagenes/comunes/val_css.gif") no-repeat 0 0;
}
#xhtml a:hover, #css a:hover { background-position: 0 -15px; }

a#disenador_web {
clear: both;
display: block;
width: 112px;
height: 34px;
overflow: hidden;
text-decoration: none;
background: url("../imagenes/comunes/disenador-web.gif") no-repeat 0 -34px;
/*margin: 0 5px 0 30px;*/
}
a#disenador_web:hover { background-position: 0 0;}