/* @start CSS Reset: from meyerweb.com */

/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* @end CSS Reset */

@font-face {
	font-family: "zArista";
	src: url("../fuentes/z-Arista.eot");
	src: local("[z] Arista"), url("../fuentes/z-Arista.ttf") format("truetype");
} 

body{
	background: #DFD194;
	font-family: Arial, Verdana, "sans-serif";
	margin: 0;
	padding: 0;
}

p, ul, ol{
	font-size: 75%;
	letter-spacing: 1px;
}

small{
	font-size: 60%;
}

#index-page{
	background: url('../images/index-background.jpg') no-repeat 0 0 transparent;
}

#index-page h1{
	background: url('../images/site-name.png') no-repeat 0 0 transparent;
	height: 99px;
	left: 489px;
	position: absolute;
	text-indent: -1000em;
	top: 390px;
	width: 155px;
}
#index-page a{
	background: url('../images/enter-button.png') no-repeat 0 0 transparent;
	height: 19px;
	left: 790px;
	overflow: hidden;
	line-height: 200px;
	position:absolute;
	top: 388px;
	width: 87px;
}

#page{
	background: url('../images/main-background.jpg') no-repeat 0 0 transparent;
}

#index-page, #page{
	height: 720px;
	margin: auto;
	position: relative;
	width: 1280px;
}

#page h1{
	background: url('../images/main-site-name.png') no-repeat 0 0 transparent;
	height: 84px;
	left: 113px;
	position: absolute;
	top: 225px;
	width: 130px;
}

#page h1 a{
	display: block;
	height: 100%;
	line-height: 200px;
	overflow: hidden;
}

#sidebar{
	left: 110px;
	position: absolute;
	top: 330px;
	width: 130px;
}

#sidebar ul li{
	display: inline;
}

#sidebar ul li a{
	background: url('../images/menu.png') no-repeat 0 0 transparent;
	display: block;
	height: 26px;
	line-height: 200em;
	overflow: hidden;
	width: 100%;
}

#sidebar ul li a.novedades{ background-position: 0 0; }
#sidebar ul li a.multimedia{ background-position: 0 -26px; }
#sidebar ul li a.fotografias{ background-position: 0 -52px; }
#sidebar ul li a.liricas{ background-position: 0 -78px; }
#sidebar ul li a.biografia{ background-position: 0 -104px; }
#sidebar ul li a.libro-visitas{ background-position: 0 -130px; }
#sidebar ul li a.contactos{ background-position: 0 -156px; }

#content{
	margin-left: 420px;
	padding-top: 56px;
}
#content h2, #content.contactos h3{
	background: url('../images/section-title-background.png') no-repeat 0 0 transparent;
	height: 57px;
	width: 400px;
}
#content h2 a, #content.contactos h3 a{
	background: url('../images/sections-titles.png') no-repeat 0 0 transparent;
	display: block;
	height: 100%;
	line-height: 200em;
	overflow: hidden;
}
#content.biografia h2 a{ background-position: 0 0; }
#content.biografia h2.proximas-fechas a, #content.novedades h2.proximas-fechas a{ background-position: 0 -47px; }
#content.multimedia h2 a{ background-position: 0 -94px; }
#content.fotografias h2 a{ background-position: 0 -141px; }
#content.contactos h2 a{ background-position: 0 -188px; }
#content.contactos h3 a{ background-position: 0 -235px; }
#content.novedades h2 a{ background-position: 0 -282px; }
#content.liricas h2 a{ background-position: 0 -329px; }

h3{
	font-size: 75%;
	letter-spacing: 1px;
}

h4{
	font-size: 70%;
	letter-spacing: 1px;
}

#content.biografia h3{
	margin-bottom: 20px;
}

#content.fotografias textarea{
	display: none;
}

#content.multimedia h3{
	font-size: 100%;
	margin-bottom: 2px;
}
#content.multimedia h3 a{
	color: #ff9626;
	text-decoration: none;
}
#content.multimedia h4{
	font-size: 90%;
	margin-top: 30px;
}
#content.multimedia small{
	font-size: 70%;
	font-style: italic;
}
#content.multimedia ul.discs-list {
	margin-bottom: 10px;
}
#content.multimedia ol{
	clear: left;
	list-style-position: inside;
	list-style-type: decimal-leading-zero;
	list-style-image: none;
	margin-top: 10px;
}
#content.multimedia ol li{
	color: #c3813a;
}
#content.multimedia ol li span{
	color: #000000;

}
#content.multimedia ol li a,
#content.multimedia a.stop-music{
	font-size: 90%;
	font-weight: bold;
	text-decoration: none;
	text-transform: uppercase;
}
#content.multimedia ol li a.play-song, #content.multimedia a.stop-music{
	color: #000000;
}
#content.multimedia ol li a.download{
	color: #a84300;
}
#content.multimedia a.stop-music{
	display: block;
	font-size: 80%;
	margin-top: 10px;
	text-transform: none;
}
#content.multimedia ul.discs-list{
	bottom: 0;
	right: 220px;
	position: absolute;
	width: 220px;
}
#content.multimedia ul.discs-list li{
	float: left;
	margin: 2px;
}
#content.multimedia ul.discs-list li a img{
	border: 2px solid #666666;
}
#content.multimedia .video-container{
	left: 788px;
	position: absolute;
	top: 134px;
}
#content.multimedia .video-container ul li{
	float: left;
	margin: 2px;
}
#content p{
	font-size: 72%;
	letter-spacing: 1px;
	line-height: 140%;
	margin: 4px 0;
	text-align: justify;
}

#content dl{
	font-size: 72%;
}


#content.biografia dt, #content.biografia dd, #content.novedades dt, #content.novedades dd{
	float: left;
	margin-bottom: 20px;
}
#content.biografia dt, #content.novedades dt{
	clear: left;
	width: 86px;
}
#content.biografia dd.location, #content.novedades dd.location{
	margin-bottom: 20px;
	width: 300px;
}

#content.liricas ul{
	font-family: zArista, Arial, sans-serif;	
	font-size: 100%;
}
#content.liricas ul li{
	margin: 4px 0;
}
#content.liricas ul li a{
	color: #000000;
	text-decoration: none;
}
#content.liricas ul li textarea{
	display: none;
}

#content.contactos p, #content.contactos ul#friends-list, #content.contactos h3{
	font-family:"zArista", Arial, sans-serif;
	font-weight: normal;
	width: 340px;
}
#content.contactos form{
	background: url('../images/contact-form-background.jpg') no-repeat 0 0 transparent;
	float: right;
	height: 597px;
	right: 120px;
	top: 68px;
	position: absolute;
	width: 346px;
}
#content.contactos form fieldset{
	margin: auto;
	padding-top: 40px;
	width: 273px;
}
#content.contactos form p{
	font-family: Arial, Verdana, sans-serif;
	margin: 0 0 20px;
	width: 274px;
}
#content.contactos form label{
	display: block;
	font-size: 140%;
	font-weight: bold;
	letter-spacing: 2px;
	text-align: right;
}
#content.contactos form input, #content.contactos form textarea{
	border: none;
	background: transparent;
}
#content.contactos form input[type=text], #content.contactos form textarea{
	margin-top: 4px;
	overflow: auto;
	padding: 5px;
	width: 260px;
}
#content.contactos form input[type=text]{
	height: 17px;
}
#content.contactos form textarea{
	height: 264px;
	padding-right: 2px;
	margin-bottom: 5px;
	/*outline: 1px solid #ff0000;*/
}
#content.contactos form input.error, #content.contactos form textarea.error{
	color: #cc0000;
	font-weight: bold;
}
#content.contactos form input[type=submit]{
	display: block;
	font-size: 70%;
	font-weight: bold;
	letter-spacing: 4px;
	margin: -22px auto;
}
#content.contactos ul li{
	clear: left;
	display: block;
	margin-bottom: 4px;
}
#content.contactos ul li img{
	float: left;
	margin-bottom: 8px;
}
#content.contactos ul#friends-list li a{
	color: #000000;
	font-size: 80%;
	display: block;
	padding-top: 50px;
	margin-left: 102px;
	text-decoration: none;
}

#content.contactos ul.logos {
	color: #AF610E;
	font-weight: 700;
	overflow: hidden;
}
#content.contactos ul.logos li{
	float: none;
}
#content.contactos ul.logos li img { margin-right: 10px; }
#content.contactos ul.logos li span {
	display: inline-block;
	padding-top: 14px;
}

.facebook {
	font-size: 11px;
	margin: 10px 9px;
	overflow: hidden;
	padding-top: 10px;
}
.facebook a {
	float: right;
	margin-top: -9px;
}

.album-cover{
	border: 2px solid #000000;
	display: block;
}
.link-microsite{
	color: #000000;
	display: block;
	font-weight: bold;
	font-size: 80%;
	margin-bottom: 10px;
	text-align: center;
	text-decoration: none;
	width: 150px;
}

.contact-info{
	display: block;
	color: #af610e;
	font-weight: bold;
}
.guestbook-link{
	clear: left;
	color: #000000;
	text-decoration: none;
	text-transform:uppercase;
}

.scroll-wrapper{
	overflow: hidden;
	position: relative;
}
.scroll-content{
	margin-left: 30px;
	position: absolute;
}
.scroll-actions{
	display: none;
	float: left;
	position: absolute;
	top: 0;
}
.scroll-actions li a{
	display: block;
	height: 16px;
	line-height: 200em;
	overflow: hidden;
	width: 16px;
}
.scroll-actions li.up a{ background-position: -16px -44px; }
.scroll-actions li.down a{ background-position: 0 -44px; }

#content.biografia .scroll-wrapper, #content.novedades .scroll-wrapper{
	height: 245px;
	margin-bottom: 20px;
	width: 525px;
}

#lyrics-list{
	height: 540px;
	margin-top: 10px;
	width: 400px;
	float: left;
}

#lyric-selected{
	float: right;
	margin-right: 40px;
	margin-top: 10px;
	height: 540px;
	width: 400px;
}

#lyric-selected h3{
	font-family: zArista, Arial, sans-serif;
	margin: 10px 0;
	font-weight: normal;
	font-size: 100%;
}

#lyric-selected h3 a{
	background-position: -32px -44px;
	float: right;
	height: 16px;
	line-height: 200em;
	overflow: hidden;
	width: 16px;
}

/** Gallery **/
#gallery{
	overflow: hidden;
	position: relative;
	height: 252px;
	margin-top: 120px;
}
#gallery-items{
	position: absolute;
	width: 260px;
}
#gallery-items li{
	float: left;
	height: 84px;
	margin-right: 8px;
}
#gallery-items li img{
	border: 1px solid #ffffff;
	-moz-box-shadow: 2px 2px 2px #000000;
	opacity: 0.8;
	filter:
		progid:DXImageTransform.Microsoft.Alpha(opacity=80)
		progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=125,strength=4);
	cursor: pointer;
}
#gallery-items li img.hover{
	opacity: 1;
	filter:
		progid:DXImageTransform.Microsoft.Alpha(opacity=100)
		progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=125,strength=4);
}
#gallery-items li img.selected{
	opacity: 1;
	filter:
		progid:DXImageTransform.Microsoft.Alpha(opacity=100)
		progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=125,strength=4);
}
#gallery-selected{
	float: right;
	margin-right: 84px;
	margin-top: 70px;
	text-align: center;
	width: 509px;
}
#gallery-selected img{
	border: 20px solid #ffffff;
}
#content #gallery-selected-text{
	float: right;
	font-weight: bold;
	font-size: 70%;
	letter-spacing: 0;
	margin: 44px 84px 0 0;
	text-align: center;
	width: 509px;
}
#gallery-buttons{
	position: relative;	
}
#gallery-buttons li{
	float: left;
	margin: 0 46px;
}
#gallery-buttons li a{
	display: block;
	height: 22px;
	line-height: 200em;
	overflow: hidden;
	width: 22px;
}

#gallery-buttons li a, .scroll-actions li a, #lyric-selected h3 a{
	background-color: transparent;
	background-image: url('../images/icons-sprite.png');
	background-repeat: no-repeat;
}

#gallery-buttons li.prev a{ background-position: 0 0; }
#gallery-buttons li.prev.disabled a{ background-position: 0 -22px; }
#gallery-buttons li.next a{ background-position: -22px 0; }
#gallery-buttons li.next.disabled a{ background-position: -22px -22px; }

#footer{
	position: absolute;
	bottom: 10px;
	left: 150px;
}
#footer a{
	background: url('../images/designed-by.png') no-repeat 0 0 transparent;
	display: block;
	height: 29px;
	line-height: 200em;
	overflow: hidden;;
	width: 55px;
}