/* CSS by David Pruñonosa. Copyright 2009 UseHelvetica.net. All rights reserved. */

@import url(reset.css);

/* ++++++++++++++++ TIPOGRAFIA ++++++++++++++++ */

a { text-decoration: none; }
a:link { color: #ff0066;  }
a:visited { color: #fff; }
a:active { color: #fff; }
a:hover { color: #fff; }

abr { text-decoration: underline; cursor: help; }


/* ++++++++++++++++ MENU ++++++++++++++++ */

#menu {
	position: absolute;
	top: 90px;
	margin:0;
	padding:0;
	border-right: 1px solid #888;
	border-left: 1px solid #888;
	}
#menu:hover {
	border-right: 1px solid #FF0066;
	border-left: 1px solid #FF0066;
	}

#menu li {
	background-color: #101010;
	float: left;
	}
	


#menu li a { color: white; text-decoration: none; display: block; font-size: 0.7em; text-align: center; padding:6px 12px 6px 12px;}
#menu li a:hover { color: #dbdbdb; background-color: #ff0066; border: 1px 0 1px 0 solid white;  }




/* ++++++++++++++++ LAYOUT ++++++++++++++++ */

.box { width: 850px; position: relative; margin: 0 auto; padding: 0; text-align: left; }

body {
    line-height: 1;
    background-color: #141414;
    font-size: 100%;
    text-align: left;
	font-family: "Lucida Grande", Tahoma, sans-serif;
	overflow: hidden;
	}

#header { 
	top: 0;
	background-image: url(../img/menu-bg.jpg);
	width: 100%;
	height: 135px;
	border: 1px solid #232323;
	position: fixed;
	z-index: 99;
	}

#logo {
	width: 99px;
	height: 37px;
	position: absolute;
	margin: 35px 0 0 0;
	background-image: url(../img/logo-white.gif);
	float: left;
	}
#logobooking {
	width: 79px;
	height: 11px;
	background-image: url(../img/musiclabel.gif);
	position: absolute;
	left: 115px;
	top: 53px;
	float: left;
	display: none;
}
#logoswitch {
	width: 104px;
	height: 23px;
	position: absolute;
	top: 90px;
	right: 0px;
	background-color: #101010;
	border-right: 1px solid #888;
	border-left: 1px solid #888;
}

#logoswitch:hover {
	border-right: 1px solid #ff0066;
	border-left: 1px solid #ff0066;
}

#content { top: 0px; position: relative; }



#footer { 
	bottom: 0;
	background-image: url(../img/menu-bg.jpg);
	background-color: #141414;
	width: 100%;
	height: 54px;
	border: 1px solid #232323;
	position: fixed;
	z-index: 200;
	}

#icons { left: 0px; top: 0px; position: absolute; display: block; }
#icons li { float: left; margin-right: 10px; position: relative; display: block; }


#footer #subscribe p { color: #888; font-size: 0.7em; position: absolute; margin-top: 3px; margin-left: 170px; }
#footer #subscribe a { color: #ff0066; font-size: 0.75em; position: absolute; display: block; margin-top: 16px; margin-left: 170px; }
#footer #subscribe a:hover { color: #fff; }


/* ++++++++++++++++ SECTIONS ++++++++++++++++ */

.space { height: 200px; width: 100%;  }

#home { height: 800px; position: relative; }

#releases { height: 800px; position: relative;  }
#releases li { position: relative; float: left; margin-right: 10px; height: 110px; width: 160px; line-height: 12px;  }
#releases img { float: left; margin-right: 5px; }
#releases a { color: #ff0066; font-size: 0.75em; position: relative; display: block; }
#releases a:hover { color: #fff; }
#releases p { color: #888; font-size: 0.7em; position: relative; margin-top: 3px; }


#artists { height: 800px; position: relative; line-height: 10px; }
#artists li { position: relative; float: left; margin-right: 10px; height: 110px; width: 160px; }
#artists img { float: left; margin-right: 5px; }
#artists a { color: #ff0066; font-size: 0.75em; position: relative; display: block; }
#artists a:hover { color: #fff; }
#artists p { color: #888; font-size: 0.7em; position: relative; margin-top: 3px; display: none; }

.iconsec { width: 130px; height: 150px; float: left; margin-right: 30px; }
#presskit { height: 800px; position: relative;   }

#presskit p { color: #888; font-size: 0.7em; position: relative; margin-top: 3px }
#presskit .ptop { color: #888; font-size: 0.7em; position: relative; margin-top: 15px; }  


#booking { height: 800px; position: relative; }
#booking p { color: #888; font-size: 0.7em; position: relative; margin-top: 3px; }
#booking p label { width: 100px; height: 20px; position: relative; display: block; float: left; margin-top: 25px; }
#booking p input { border: 1px solid #222; background-color: black; float: left; display: block; margin-top: 25px; width: 200px; height: 20px; margin-right: 25px; color: white; }
#booking p input:hover { border-color: #fff; }
#booking p select { width: 200px; height: 20px; position: relative; display: block; float: left; margin-top: 25px; margin-right: 25px; }
#booking .enviar { background-color: #ff0066; border: none; color: black; width: 150px;  height: 23px; font-weight: bold; }
#booking .enviar:hover { background-color: #888; border: none; color: #fff; width: 150px;  height: 23px; cursor: pointer; font-weight: bold; }

#form-booking { width: auto; }
#form-booking { height: 300px; position: relative; }
#form-booking p { color: #888; font-size: 0.7em; position: relative; margin-top: 3px; }
#form-booking p label { width: 100px; height: 20px; position: relative; display: block; float: left; margin-top: 25px; }
#form-booking p input { border: 1px solid #222; background-color: black; float: left; display: block; margin-top: 25px; width: 200px; height: 20px; margin-right: 25px; color: white; }
#form-booking p input:hover { border-color: #fff; }
#form-booking p select { width: 200px; height: 20px; position: relative; display: block; float: left; margin-top: 25px; margin-right: 25px; }
#form-booking .enviar { background-color: #ff0066; border: none; color: black; width: 150px;  height: 23px; font-weight: bold; text-align: center; }
#form-booking .enviar:hover { background-color: #888; border: none; color: #fff; width: 150px;  height: 23px; cursor: pointer; font-weight: bold; }


#contact { height: 800px; position: relative; }
#contact p { color: #888; font-size: 0.7em; position: relative; margin-top: 3px; }
#contact p label { width: 90px; height: 20px; position: relative; display: block; float: left; margin-bottom: 13px; }
#contact p input { border: 1px solid #222; background-color: black; display: block; margin-bottom: 13px; width: 230px; height: 20px; margin-right: 25px; color: white; }
#contact p input:hover { border-color: #fff; }
#contact p textarea { width: 270px; height: 100px; position: relative; display: block; margin-bottom: 13px; margin-right: 25px; background-color: black; border: solid 1px #222; color: white; }
#contact p textarea:hover { border-color: #fff; }
#contact .enviar { background-color: #ff0066; border: none; color: black; width: 150px;  height: 23px; font-weight: bold; }
#contact .enviar:hover { background-color: #888; border: none; color: #fff; width: 150px;  height: 23px; cursor: pointer; font-weight: bold; }


#form-contact p { color: #888; font-size: 0.7em; position: relative; margin-top: 3px; }
#form-contact p label { width: 110px; height: 20px; position: relative; display: block; float: left; margin-bottom: 13px; }
#form-contact p input { border: 1px solid #222; background-color: black; display: block; margin-bottom: 13px; width: 250px; height: 20px; margin-right: 25px; color: white; }
#form-contact p input:hover { border-color: #fff; }
#form-contact p textarea { width: 250px; height: 100px; position: relative; display: block; margin-bottom: 13px; margin-right: 25px; background-color: black; border: solid 1px #222; color: white; }
#form-contact p textarea:hover { border-color: #fff; }
#form-contact .enviar { background-color: #ff0066; border: none; color: black; width: 150px;  height: 23px; font-weight: bold; }
#form-contact .enviar:hover { background-color: #888; border: none; color: #fff; width: 150px;  height: 23px; cursor: pointer; font-weight: bold; }




#iframe-contact { width: 410px; border: none; overflow: hidden; height: 600px; }
#iframe-booking { width: 670px; border: none; overflow: hidden; height: 400px; }


#vcard { width: 250px; float: left; margin-right: 25px; position: relative; } 
#vcard p { margin-bottom: 10px; position: relative; }
#vcard p span { display: block; float: left; width: 60px; height: auto; position: relative; }
#vcard #icons { margin-top: 15px; position: relative; display: block; }
#vcard #icons li { float: left; margin-right: 10px; position: relative; display: block; }
#mc_embed_signup { width: 250px; height: 100px; margin-top: 30px; }

#mc_embed_signup label { font-size: 0.7em; color: #fff; width: 200px; height: 20px; border-bottom: 20px; }
#mc_embed_signup input { border: 1px solid #222; background-color: black; display: block; margin-bottom: 13px; margin-top: 10px; width: 230px; height: 20px; color: white; }
#mc_embed_signup input:hover { border: 1px solid #fff; }

#mc_embed_signup .enviar { background-color: #ff0066; border: none; color: black; width: 150px;  height: 23px; font-weight: bold; }
#mc_embed_signup .enviar:hover { background-color: #888; border: none; color: #fff; width: 150px;  height: 23px; cursor: pointer; font-weight: bold; }




#digitalshop { height: 800px; position: relative; }
#digitalshop p { color: #888; font-size: 0.7em; position: relative; margin-top: 3px; }

#shops-menu { width: 800px; height: 38px; position: relative; margin-top: 20px; }
#shops-menu li { float: left; border-left: 1px #222 solid; border-right: 1px #222 solid; }
#shops-menu .menu-beatport { width: 108px; height: 38px; background-image: url(../img/shop/beatport.jpg); display: block; position: relative; }
#shops-menu .menu-beatport:hover { background-image: url(../img/shop/beatport-hover.jpg); }


#shops-menu .menu-juno { width: 145px; height: 38px; background-image: url(../img/shop/juno.jpg); display: block; position: relative; }
#shops-menu .menu-juno:hover { background-image: url(../img/shop/juno-hover.jpg); }

#shops-menu .menu-stompy { width: 105px; height: 38px; background-image: url(../img/shop/stompy.jpg); display: block; position: relative; }
#shops-menu .menu-stompy:hover { background-image: url(../img/shop/stompy-hover.jpg); }

#shops-menu .menu-trackitdown { width: 156px; height: 38px; background-image: url(../img/shop/trackitdown.jpg); display: block; position: relative; }
#shops-menu .menu-trackitdown:hover { background-image: url(../img/shop/trackitdown-hover.jpg); }

#shops-menu .menu-dj { width: 56px; height: 38px; background-image: url(../img/shop/dj.jpg); display: block; position: relative; }
#shops-menu .menu-dj:hover { background-image: url(../img/shop/dj-hover.jpg); }

#shops-menu .menu-deejaydigital { width: 145px; height: 38px; background-image: url(../img/shop/deejaydigital.jpg); display: block; position: relative; }
#shops-menu .menu-deejaydigital:hover { background-image: url(../img/shop/deejaydigital-hover.jpg); }




#footer #icons { margin-top: 14px; position: relative; }
#footer #icons li { float: left; margin-right: 10px; position: relative; }




/* ++++++++++++++++ MAILCHIMP +++++++++++++++++++++++ */





/* ++++++++++++++++ OVERLAY ARTISTAS ++++++++++++++++ */


#ficha {
	margin: 20px 20px 20px 20px;
	width: 640px;
	height: 430px;
	position: absolute;
	background-color: #141414;
	z-index: 100000;
	}

#foto { 
	width: 205px; 
	height: 120px;
	background-color: #141414;	
	position: relative;
	padding: 4px;
	border: 1px solid #333;
	}

#datos {
	line-height: 20px;
	position: relative;
	margin-top: 20px;
	height: 250px;
	width: 205px;
	}

#datos li {
	position: relative;
	font-size: 0.75em;
	margin-bottom: 10px;
	color: #888;
	}
#datos li p {
	line-height: 10px;
	color: #888;
	}
#datos li a {
	color: #ff0066;
	}

#datos li a:hover {
	color: #888;
	}

#artista {
	position: relative;
	font-family: Helvetica, Arial;
	font-size: 4em;
	color: #fff;
	font-weight: bolder;
	margin-left: -2px;
}

#estilos {
	position: relative;
	font-family: Helvetica, arial;
	font-size: 1.2em;
	color: #888;
	line-height: 3px;
	margin-top: 3px;

}

#bio {
	position: relative;
	font-family: Helvetica, arial;
	font-size: 0.8em;
	color: #888;
	line-height: 3px;
	margin-top: 14px;
}

#biotext { 
	position: relative;

	font-size: 0.7em;
	color: #888;	
	width: 400px;
	line-height: 15px;
	margin-top: 20px;
}


#col01{ float: left; }
#col02{ float: left; margin-left: 20px }


/* ++++++++++++++++ OVERLAY RELEASES ++++++++++++++++ */

#portada { 
	width: 205px; 
	height: 205px;
	background-color: #141414;	
	position: relative;
	padding: 4px;
	border: 1px solid #333;
	}


#shops {
	line-height: 15px;
	position: relative;
	margin-top: 7px;
	height: auto;
	width: 205px;
	}

#shops li {
	position: relative;
	font-size: 0.75em;

	color: #888;
	}
#shops li p {
	line-height: 10px;
	color: #888;
	}
#shops li a {
	color: #ff0066;
	}
	
#shops li a:hover {
	color: #888;
	}	

#available {
	line-height: 15px;
	position: relative;
	margin-top: 20px;
	color: #888;
	font-size: 0.75em;
	}
	
	
#release-titulo {
	position: relative;
	font-family: Helvetica, arial;
	font-size: 2.5em;
	color: #fff;
	font-weight: bolder;
	margin-left: -2px;
	width: 400px;
	letter-spacing: -0.05em;
}

#release-autor {
	position: relative;
	font-family: Helvetica, arial;
	font-size: 2em;
	color: #888;
	font-weight: bolder;
	margin-left: -2px;
}

.release-track {
	font-size: 0.7em;
	color: #888;
	margin-top: 12px;
	position: relative;
	width: 400px;
	height: auto;
	line-height: 15px;
	letter-spacing: -0.05em;
}

.release-track span {
	color: #fff;
}


object { margin-top: 5px; }