/* Mexteca Mariachi CSS Document */

/* Layout rules */
body {background:#000; font: 76%/1.4 Georgia, "Times New Roman", Times, serif ; color:#000; text-align:center;}
* {margin:0; padding:0;}
#wrapper {margin: 50px auto; text-align: left; width: 702px;}
html>#wrapper {width: 702px;}
html {height:100.01%;}

#container {border:1px solid #fff;}
#container h1 {display:none;}

#pagebody {clear:both; width:700px;	text-align:left;}
.prop {width:1px; height:400px; float:right;}
br.clean {clear:both; height:1px;}

/* General typography */
p {font-size:1em; margin: 0 0 1.2em 0;}
h2 {font-size: 2.8em; font-weight: normal; margin: 0 0 15px 0; }
h3 {font-size: 2.4em; font-weight: normal; margin:-.5em 0 0 0;}
h4 {font-size: 1.2em; margin: 0 0 .2em 0;}
a {color:#000; text-decoration: underline; outline:none;}
a:hover {text-decoration: none;}
acronym {border-bottom: 1px dashed #999; cursor: help;}
ul {padding: 0 0 1em 1em;}
ul li {padding: 2px 0;}
ul.nobullets {list-style-type:none; padding:0 0 20px 0;}
dl{margin:0 0 1em 0;}
dt {font-size:1.2em; font-weight:bold; margin: 0 0 10px 0 ;}
dd {font-size:1.2em; margin: 0 16px 0 0;line-height:2.4;}
dd a {text-decoration:none; background:url(../assets/sample.gif) left center no-repeat; padding: 0 0 0 40px; display:block;}
dd a:hover {text-decoration:none; color:#999; background:url(../assets/sample_over.gif) left center no-repeat; }
strong {}
ul.nobullets li {list-style-type:none;}
img {border:none;}

/* background images and rules */
.home {background:url(../images/home_bg.jpg) no-repeat #D48C32;}
.biography { background:url(../images/biog_bg.png) no-repeat #FFB640;}
.music { background:url(../images/music_bg.png) no-repeat #FFDB65;}
.performances { background:url(../images/performances_bg.png) no-repeat #FFC;}
.about { background:url(../images/about_bg.png) no-repeat #E9B772;}
.contact { background:url(../images/contact.png) no-repeat #FF893D;}

/* text layouts */
div#home {width:420px; padding: 10px 20px 0 0; float:right;}
div#biography {width:440px; padding: 10px 20px 0 0; float:right;}
div#music {width:300px; padding: 10px 0 0 20px; float:left;}
div#performances {width:440px; padding: 10px 20px 0 0; float:right;}
div#about {width:440px; padding: 10px 20px 0 0; float:right;}
div#contact {width:300px; padding: 10px 0 0 20px; float:left;}

div#links {width:200px; float:left; margin:380px 0 0 15px; display:inline;}
div.link {width:200px; float:left; clear:left; margin:0 0 10px 0;}
div.link img {float:left; margin:-5px 5px 0 0;}
div.link a {float:left; display:block; background:#EFEFBD; border:1px solid #ccc; text-decoration:none; padding:5px 5px 0 0; width:200px; w\idth:195px;}
div.link a:hover {display:block; background:#fff; border:1px solid #000;}

div#sample {width:300px; padding: 20px 0 0 60px; float:left;}

/* layout specific typography */
div#home h2 {margin: 0 0 0 0; }
div#home h3 {font-size:1em; margin: 0 0 0 140px;}
div#home h4 {font-size:1.8em; font-weight:normal; margin: 0 0 50px 100px; }
div#home p {margin: 40px 100px 0 60px; }
div#home ul {margin: 5px 20px 5px 80px; }
div#home li {padding: 2px 0 2px 0; }

p.short {margin:0 140px 1.2em 0;} 

/* Main navigation */
#nav {font-size: 1.1em; width: 700px; padding:20px 0 10px 0; vertical-align:bottom;}
#nav ul {position:relative; height:35px; list-style-type: none; padding:0;}
#nav ul li {float:left; line-height:normal; padding:0;}
#nav ul li a, #nav ul li a:visited {height:45px; padding: 30px 0 0 45px;color: #ccc; text-decoration:none;}
#nav ul li a:hover {text-decoration: none; color:#fff; }

#nav ul li#navhome a {position:absolute; left:0px; top:0px; background:url(../assets/home.gif) no-repeat;}
#nav ul li#navhome a:hover {background:url(../assets/home_over.gif) no-repeat;}

#nav ul li#navabout a {position:absolute; left:90px; top:0px; width:110px; background:url(../assets/about.gif) no-repeat 7px 2px;}
#nav ul li#navabout a:hover {background:url(../assets/about_over.gif) no-repeat 7px 2px;}

#nav ul li#navbiog a {position:absolute; left:190px; top:0px; background:url(../assets/biog.gif) no-repeat;}
#nav ul li#navbiog a:hover {background:url(../assets/biog_over.gif) no-repeat;}

#nav ul li#navmusic a {position:absolute; left:310px; top:0px; width:140px; background:url(../assets/music.gif) no-repeat;}
#nav ul li#navmusic a:hover {background:url(../assets/music_over.gif) no-repeat;}

#nav ul li#navperformances a {position:absolute; left:450px; top:0px; background:url(../assets/performances.gif) no-repeat;}
#nav ul li#navperformances a:hover {background:url(../assets/performances_over.gif) no-repeat;}


#nav ul li#navcontact a {position:absolute; left:590px; top:0px; background:url(../assets/contact.gif) no-repeat; padding-left:50px;}
#nav ul li#navcontact a:hover {background:url(../assets/contact_over.gif) no-repeat;}

/* Footer */
#footer {margin: 0 auto; width: 700px; font-size: .75em; font-weight:normal; text-align:center;}
#footer p {float:right; padding: 2px 30px 0 0;}
#footer a {text-decoration:none;}
#footer a:hover {text-decoration: underline;}

/* lightbox gallery */
div#performances div#thumbs { float:left; margin-bottom:16px;}
div#performances div#thumbs img {margin:0;}
div#performances div#thumbs a {margin:0 5px 5px 0; width:100px; float:left; padding:0; height:67px;}