html, body 	{ height: 100%; margin: 0; background: black; }

body		{ font-family: Verdana; font-size:10px; line-height:1.4; color:#fff;  }

a:link 	{ text-decoration:none;color:#868383; } 
a:visited 	{ text-decoration:none;color:#868383; } 
a:active 	{ text-decoration:none;color:#868383; } 
a:hover 	{ text-decoration:none;color:#ffffff; } 

a:hover, a:active, a:focus { outline:none; }



/** El contenedor general, relativo y centrado **/
#todo {
position:relative;
max-width:960px;
max-height: 700px;
margin:0px auto 0 auto;
font-family: Verdana;

}

#logo {
position:absolute;
z-index:999;

}

#logojota{
position:absolute;
top: 511px;
z-index:999;
}


#home,
#contacto {
position:relative;
min-height:550px;
min-width:600px;
padding:210px 340px 15px 0px;
background:url('http://jotagreates.com/img/inicio.jpg') no-repeat;
font-family: Verdana;
}

/** El fondo es distinto en contacto **/
#contacto					{ background:url('http://jotagreates.com/img/contacto.jpg') no-repeat; }


/** La navegación de la página **/
nav							 { position:absolute; z-index:999; top:140px; left:10px; font-family: arial; font-weight: bold;  letter-spacing: 0px;}
nav ul						 { list-style:none; margin:0; padding:0px 0px 0px 0px; }
nav ul li					 { display:inline; }
nav ul li a					 { float:left; padding:0 2px; line-height:1; font-family: arial; font-weight: bold; font-size:15px; }
nav ul li a:hover			       { color:#fff; font-weight:bold;  }
nav ul li a.active			 { color:#fff; }


/** En vez de palito, un borde de 2 px :) **/
#mostrardivhome 			 { border-right:2px solid #868383; }
#mostrardivcontacto 			 { border-right:2px solid #868383; }

#controllistas {
position: absolute;
top: 480px;
left: 12px;
font-size: 10pt;
}

#listacanciones1			{ float:left; width:40%; margin-left:10px; margin-top: 0px; font-weight: bold;font-family: Verdana; font-size: 15px; padding:0px 60px 0px 0px; letter-spacing: 0px;}

#listado1  { list-style:none; padding:0; margin:0px; }
#listado1 a {color: #ffffff;} 					
#listado1 .playing a                 { color:red; } 
#listado1 a:link			      { color:#ffffff; }
#listado1 a:hover		      { color:red; }
#listado1 a:active                   { color:red; }
#listado1 a:focus                   { color:red; }

#listacanciones2			{ display: none; float:left; width:40%; margin-left:10px; margin-top: 0%; font-weight: bold;font-family: Verdana; font-size: 14px; padding:0px 60px 0px 0px;}

#listado2  { list-style:none; padding:0; margin:0px; }
#listado2 a {color: #ffffff;} 					
#listado2 .playing a                 { color:red; } 
#listado2 a:link			      { color:#ffffff; }
#listado2 a:hover		      { color:red; }
#listado2 a:active                   { color:red; }
#listado2 a:focus                   { color:red; }
li {margin-bottom: 10px;}

#contenedorfacebook
{position: absolute;
top: 590px;
left: 380px;
}


#face1, #face2, #face3, #face4, #face5, #face6, #face7, #face8, #face9, #face10, #face11
{position: absolute;
height: 20px;
width: 80px;
top: 0px;
left: 0px;
visibility: hidden; }

#contenedorCanciones 		{ float:left;  margin-top:0px; max-height:330px; max-width: 230px; padding: 0px 0px 0px 0px; color:#fff; }

#reproductor 				{ z-index:999; position: absolute; left: 318px; top: 560px;}

#contacto1 					{ float:left;  margin-top: 0px; padding: 0px 50px 0px 0px; }

#contacto2 					{ float:left; margin-top: 0px; padding: 0px 50px 0px 0px; }
#mail 					{ background-color: black; border: solid 1px #868383; font-family: Verdana; font-size: 8pt; color:#868383; height: 10px; margin-top: -5px;}

#mensaje 					{ background-color: black; border: solid 1px #868383; font-family: Verdana; font-size: 8pt; color:#868383; overflow: hidden; margin-top: -5px; height: 150px;}

#enviar 					{ height:20px; width:80px; margin-top: 0px;}

#enviar2 					{ height:20px; width:80px; margin-top: 0px;}


#licencias {position: absolute; height: 20px; width: 600px; bottom:60px; left:210px; font-size: 6.2pt;  text-align: left; }
#logolicencias {position: absolute; margin-top: -2px;}

#contenedorParrafada		{ float:left; width:40%; margin-top: 0px; margin-left: 10px;  max-height:350px; padding:0px 60px 0px 0px; overflow:hidden; font-family: Verdana; font-size: 12px; text-align: left;line-height: 20px; letter-spacing: 0.5px; }

/** Estilos de los inputs y textarea de formulario **/
form input[type="text"],
form textarea				{ padding:5px; width:190px; }

textarea {
background-color: black;
resize: none;
height: 90px;

}
.audiojs { height: 15px; width: 170px; background: black;
        background-image: black;
        border: solid;
        border-width: 1px;
        border-color: #252525;}
      .audiojs .play-pause { width: 10px; height: 20px; padding: 0px 8px 0px 0px; margin-top: -2px; background-color: #252525; }
      .audiojs p { width: 20px; height: 25px; margin: -4px 0px 0px -5px; }
      .audiojs .scrubber { background: #5a5a5a; width: 140px; height: 2px; margin: 5px;margin-top: 0px;  }
      .audiojs .progress { height: 10px; width: 0px;  background: #ccc;
        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ccc), color-stop(0.5, #ddd), color-stop(0.51, #ccc), color-stop(1, #ccc));       background-image: -moz-linear-gradient(center top, #ccc 0%, #ddd 50%, #ccc 51%, #ccc 100%); }
      .audiojs .loaded { height: 10px; background: #000;
        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #222), color-stop(0.5, #333), color-stop(0.51, #222), color-stop(1, #222));
        background-image: -moz-linear-gradient(center top, #222 0%, #333 50%, #222 51%, #222 100%); }
      .audiojs .time { visibility:hidden;}
      .audiojs .error-message { height: 24px;line-height: 24px; }