@import "reset.css";

body {
	background-image: url(imgs/site/abubilla_bkgd.png);
	background-repeat: no-repeat;
	background-position: center top;
	margin:0px;
	background-color: #AA5757;
	font-family:Arial, Helvetica, sans-serif;
	color:#666666;
	font-size:12px;
	line-height:18px;
}



#wrapper {width:960px; margin: 0 auto; position:relative; }

#header{width:960px; height:180px; position:relative; z-index:20}

.clear {clear:both;}
.border {border: 1px solid #666666;}

#contentarea {width:880px; margin-left:22px; background: #EAE2CE; padding:20px 0 20px 20px; position:relative;  z-index:2;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#EAE2CE', endColorstr='#D3C29B'); /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#EAE2CE), to(#D3C29B)); /* for webkit browsers */
	background: -moz-linear-gradient(top,  #EAE2CE,  #D3C29B); /* for firefox 3.6+ */

	-moz-box-shadow: 0px 0px 10px #333;
	-webkit-box-shadow: 0px 0px 10px #333;
	box-shadow: 0px 0px 10px #333;}


/* TEXT STYLES */
	
#contentarea a {cursor:pointer; font-weight:bold; text-decoration:none; color:#446672;}
#contentarea a:hover { font-weight:bold; text-decoration:none; color:#FFFFFF; background-color:#AA5757;}
	
p {margin-top:0px; margin-bottom:18px;}
h1 {margin-top:0px; margin-bottom:18px; font-size:24px; font-weight:bold; color:#446672; line-height:24px;}
h2 {margin-top:0px; margin-bottom:0px; font-size:18px; font-weight:bold; color:#446672;}
h3 { margin-top:0px; margin-bottom:0px; font-size:14px; font-weight:bold; color:#446672;}	
p.indent {margin-left:30px; margin-right:30px;}	
p.quote {font-style:italic; padding:10px; margin-bottom:0px;}
p.quote-name {font-style:normal; font-size:10px;}

ol {padding:0 20px;}
li {margin-left:20px; margin-bottom:10px;}


/* NAVIGATION STYLES */

#logo {width:215px; height:180px; float:left;}
#top-bar {width:745px; height:31px; float:left; background-image: url(imgs/nav/nav-web3_02.png);}
#nav {float:left; width:745px; height:85px; }
#nav a:hover {background-color:transparent;}
#nav #note {float:left; width:32px; height:85px; background-image: url(imgs/nav/nav-web3_03.png);}

#nav #col1 {width:111px; height:85px; float:left;}
#nav #col1 #home {float:left;}
#nav #col1 #home a {display:block; width:55px; height:39px; background-image: url(imgs/nav/nav-web3_04.png); }
#nav #col1 #home a:hover {background-position: 0 39px;}
#nav #col1 #home-spacer {float:left; width:56px; height:39px; background-image: url(imgs/nav/nav-web3_05.png);}
#nav #col1 #about-us {float:left;}
#nav #col1 #about-us a {display:block; width:111px; height:46px; background-image: url(imgs/nav/nav-web3_13.png);}
#nav #col1 #about-us a:hover {background-position: 0 46px;}

#nav #col2 {width:77px; height:85px; float:left;}
#nav #col2 #contact-spacer {float:left; width:77px; height:39px; background-image: url(imgs/nav/nav-web3_06.png);}
#nav #col2 #contact {float:left;}
#nav #col2 #contact a {display:block; width:77px; height:46px; background-image: url(imgs/nav/nav-web3_14.png); }
#nav #col2 #contact a:hover {background-position: 0 46px;}

#nav #col3 {float:left; width:232px; height:85px;}

#nav #col3a {width:232px; height:53px; float:left; position:relative;}
#nav #col3a #our-songs a {display:block; width:126px; height:31px; background-image: url(imgs/nav/nav-web3_07.png); }
#nav #col3a #our-songs a:hover {background-position: 0 31px;}
#nav #col3a #our-artists a {display:block; width:126px; height:22px; background-image: url(imgs/nav/nav-web3_12.png); }
#nav #col3a #our-artists a:hover {background-position: 0 22px;}
#nav #col3a #songs-spacer {position:absolute; left:126px; width:106px; height:53px; background-image: url(imgs/nav/nav-web3_08.png);}

#nav #col3b {width:232px; height:32px;}
#nav #col3b #scholars-spacer {float:left; width:94px; height:32px; background-image: url(imgs/nav/nav-web3_17.png);}
#nav #col3b #our-scholars {float:left;}
#nav #col3b #our-scholars a {display:block; width:138px; height:32px; background-image: url(imgs/nav/nav-web3_18.png); }
#nav #col3b #our-scholars a:hover {background-position: 0 32px;}

#nav #col4 {width:145px; height:85px; float:left;}
#nav #col4 #voices a {display:block; width:145px; height:45px; background-image: url(imgs/nav/nav-web3_09.png); }
#nav #col4 #voices a:hover {background-position: 0 45px;}
#nav #col4 #our-partners a {display:block; width:145px; height:40px; background-image: url(imgs/nav/nav-web3_15.png); }
#nav #col4 #our-partners a:hover {background-position: 0 40px;}

#nav #col5 {width:110px; height:85px; float:left;}
#nav #col5 #africa a {display:block; width:110px; height:45px; background-image: url(imgs/nav/nav-web3_10.png); }
#nav #col5 #africa a:hover {background-position: 0 45px;}
#nav #col5 #blog a {display:block; width:110px; height:40px; background-image: url(imgs/nav/nav-web3_16.png); }
#nav #col5 #blog a:hover {background-position: 0 40px;}

#nav #col6 {width:15px height:85px; float:left;}
#nav #col6 .dropshadow {float:left; width:15px; height:85px; background-image: url(imgs/nav/nav-web3_11.png);}

#get-involved-wrap {width:745px; height:64px; float:left;}
#get-involved-wrap #l-spacer {width:341px; height:64px; float:left; background-color:#EAE2CE}
#get-involved-wrap #get-involved {width:146px; height:64px; float:left; background-image: url(imgs/nav/nav-web3_20a.png); }
#get-involved-wrap #get-involved a {display:block; width:146px; height:64px; float:left; background-image: url(imgs/nav/nav-web3_20.png); }
#get-involved-wrap #get-involved a:hover {background-position: 0 64px;}
#get-involved-wrap #r-spacer {width:220px; height:64px; float:left; background-color:#EAE2CE}
#get-involved-wrap .dropshadow {float:left; width:15px; height:64px; background-image: url(imgs/nav/nav-web3_11.png);}

#edge-buttons {width:40px; height:430px; position:absolute; z-index:100; left:922px; top:193px;}
#edge-buttons #our-music a { display:block; width:40px; height:215px; background: url(imgs/site/edge-buttons-music.png) no-repeat -40px 0;}
#edge-buttons #our-music a:hover { background-position:0 0;}
#edge-buttons #our-music-back a { display:block; width:40px; height:215px; background: url(imgs/site/edge-buttons-music.png) no-repeat -80px 0;}
#edge-buttons #our-music-back a:hover { background-position:0 0;}

#edge-buttons #everything-else a { display:block; width:40px; height:215px; background: url(imgs/site/edge-buttons-else.png) no-repeat -40px 0;}
#edge-buttons #everything-else a:hover { background-position:0 0;}
#edge-buttons #everything-else-back a { display:block; width:40px; height:215px; background: url(imgs/site/edge-buttons-else.png) no-repeat -80px 0;}
#edge-buttons #everything-else-back a:hover { background-position:0 0;}

/* HOMEPAGE STYLES */


#ink-mark {width:127px; height:428px; background-image: url(imgs/site/ink-mark.png); position:absolute; z-index:3; left:145px; top:-20px;}

#otm-wrapper {width:165px; position:relative; margin-right:20px; z-index:6; float:left; background-color:#FFF;  -moz-box-shadow: 0px 0px 10px #333; -webkit-box-shadow: 0px 0px 10px #333; box-shadow: 0px 0px 10px #333;}
#otm-tabs {position:absolute; top:-38px; width:165px; height:50px; background-image:url(imgs/site/otm-tabs.png);}
#of-the-moment-top {width:165px; height:100px; background:url(imgs/site/of-the-moment.png) no-repeat 0 20px;  }
#of-the-moment {width:145px; margin:0px 10px; padding-top: 10px; border-top: 1px dotted #000;}
#of-the-moment img {margin-bottom:10px;}
#of-the-moment a {border:none;}

#home-intro {width:655px; padding:10px; float:left; background:#FFF url(imgs/site/what-is-abubilla.png) no-repeat 10px 15px; z-index:4; position:relative; -moz-box-shadow: 0px 0px 10px #333; -webkit-box-shadow: 0px 0px 10px #333; box-shadow: 0px 0px 10px #333;}
#home-intro-tabs {position:absolute; top:-38px; left:0px; width:675px; height:50px; background-image:url(imgs/site/home-intro-tabs.png);}
#home-intro .col1 {width:320px; margin-right:15px; padding-top:45px; float:left;}
#home-intro .col2 {width:320px; float:left; padding-top:8px;}

#notice-board {float:left; width:680px; height:370px; margin-top:10px; background-image:url(imgs/site/home-noticeboard.png); z-index:5; position:relative;}
#notice-board #our-music {position:absolute; width:255px; height:110px; top:145px; left:73px; line-height:14px;}
#notice-board #everything-else {position:absolute; width:200px; height:130px; top:145px; left:410px; line-height:14px;}
#notice-board a#music-link {display:block; width:250px; height:70px; position:absolute; top:75px; left:73px;  }
#notice-board a:hover#music-link {background-color:transparent;}
#notice-board a#else-link {display:block; width:225px; height:70px; position:absolute; top:75px; left:380px; }
#notice-board a:hover#else-link {background-color:transparent;}

#newsletter-signup  a {display:block; width:290px; height:42px; background-image: url(imgs/site/newsletter-signup.png);}
#newsletter-signup  a:hover {background-position:0 42px;}


/* OUR MUSIC STYLES */

#our-music-lft-top {width:165px; height:100px; background:url(imgs/site/our-music.png) no-repeat 20px 20px;  }
#music-intro {width:645px; border: 5px solid #809AA8; padding:10px; margin-bottom:10px; float:left; background: #FFF url(imgs/site/our-music1.png) no-repeat 10px 20px; z-index:6; position:relative; -moz-box-shadow: 0px 0px 10px #333; -webkit-box-shadow: 0px 0px 10px #333; box-shadow: 0px 0px 10px #333;}
#music-intro #col1 {width:370px; float:left; margin-top:60px;}
#music-intro #video {width:250px; float:right; margin-top:20px;}

#om-box-smos {width:225px; height:310px; float:left; background: url(imgs/site/om-box-smos.png) no-repeat; position:relative; z-index:7}
#om-box-spanish {width:225px; height:310px; float:left; background: url(imgs/site/om-box-spanish-jams.png) no-repeat;}
#om-box-birdie {width:225px; height:310px; float:left; background: url(imgs/site/om-box-little-birdie.png) no-repeat;}

.om-box h2 {font-size:22px; font-weight:bold; color:#809AA8; line-height:20px; width:165px; margin-left:30px; margin-top:40px;}
.om-box a.pic-link {display:block; width:168px; height:149px; margin-left:30px; margin-top:10px;}
#contentarea .om-box a:hover.pic-link {background:transparent;}


/* EVERYTHING ELSE STYLES */

#else-lft-top {width:165px; height:100px; background:url(imgs/site/everything-else.png) no-repeat 10px 20px;  }
#else-intro {width:645px; border: 5px solid #9EB734; padding:10px; margin-bottom:10px; float:left; background: #FFF url(imgs/site/everything-else1.png) no-repeat 10px 20px; z-index:6; position:relative; -moz-box-shadow: 0px 0px 10px #333; -webkit-box-shadow: 0px 0px 10px #333; box-shadow: 0px 0px 10px #333;}
#else-intro #col1 {width:430px; float:left; margin-top:60px;}
#else-intro #best-blogs {width:171px; float:right;}

#ee-box-africa {width:225px; height:310px; float:left; background: url(imgs/site/ee-box-africa.png) no-repeat; position:relative; z-index:7}
#ee-box-voices {width:225px; height:310px; float:left; background: url(imgs/site/ee-box-voices.png) no-repeat;}
#ee-box-bird {width:225px; height:310px; float:left; background: url(imgs/site/ee-box-bird.png) no-repeat;}

.ee-box h2 {font-size:22px; font-weight:bold; color:#809AA8; line-height:20px; width:165px; margin-left:30px; margin-top:50px;}
.ee-box a.pic-link {display:block; width:168px; height:149px; margin-left:30px; margin-top:20px; }
#contentarea .ee-box a:hover.pic-link {background:transparent;}

/* STANDARD PAGE STYLES */

#full-width-tabs {position:absolute; top:-34px; left:0px; width:840px; height:50px; background-image:url(imgs/site/full-width-tabs.png);}
#cont-full-width {position:relative; width:820px; padding:30px 20px 20px 20px; min-height:400px; float:left; background-color:#FFF; -moz-box-shadow: 0px 0px 10px #333; -webkit-box-shadow: 0px 0px 10px #333; box-shadow: 0px 0px 10px #333;}
#cont-full-width #leftcol {float:left; width:300px; margin-right:30px;}
#cont-full-width #rightcol {float:left; width:490px;}

/* SONG/PARTNER PAGE STYLES */

#contentarea .row3 {width:880px; padding-top:1px;}
.song-box-wrapper {width:240px; float:left; padding:9px; margin: 0 15px;}
.song-box-top {width:240px; height:37px; background-image: url(imgs/site/songs-box_01.png); background-repeat: no-repeat; background-position: left top;}
.song-box-middle {width:200px; padding-left: 17px; padding-right:23px; background-image: url(imgs/site/songs-box_02.png); background-repeat: repeat-y; background-position: left top;}
.song-box-bottom { width:240px; height:36px; background-image: url(imgs/site/songs-box_03.png); background-repeat: no-repeat; background-position: left top;}

.gallery {margin-top:20px;}
.gallery .img1 {float:left; margin-right:10px; margin-bottom:10px; border: none;}
.gallery .img2 {float:left; margin-bottom:10px; border: none;}
.gallery a:hover {background:transparent;}

table#song-details {margin-bottom:18px; }
table#song-details td {padding: 4px; border-bottom:1px solid #666; }

/* OTHER PAGES */

#album-thumbs a {margin-right:30px;}
#album-thumbs a:hover {background:transparent;}
.jam-thumb {width:130px; margin-right:30px; float:left; }

/* VOICES PAGE STYLES */

#whitebox-header {margin-left: 46px; width:776px; height:42px; background-image: url(imgs/site/white-box_01.png); background-repeat: no-repeat; background-position: left top;}
#whitebox-content {margin-left: 46px;  width:721px; padding-left:25px; padding-right:30px; background-image: url(imgs/site/white-box_02.png); background-repeat:repeat-y;}
#whitebox-footer {margin-left: 46px;  width:776px; height:32px; background-image: url(imgs/site/white-box_03.png); background-repeat: no-repeat; background-position: left top;}

.voices-header { width:721px; height:60px; background-image: url(imgs/site/voices/voices-heading.png); background-repeat: no-repeat;}
.map-pin {width:400px; height:20px; float:right; padding-right:30px; text-align:right; font-size:14px; background-image: url(imgs/site/voices/map-pin.jpg); background-position: right; background-repeat: no-repeat;}
.voices-login { width:400px; height:20px; padding-right:30px; float:right; text-align:right; font-size:14px;}
.voices-map {position:relative;}
.voice_loc { font-weight:bold; font-size: 10px;}
.voice_popup {padding:15px;}
.voice_popup a {cursor:pointer; font-weight:bold; text-decoration:none; color:#446672;}
.voice_popup a:hover { font-weight:bold; text-decoration:none; color:#FFFFFF; background-color:#AA5757;}
a:hover#zoom_close {background:transparent;}


#bottom-player {width:900px; margin-left:22px; margin-top:10px;
	-moz-box-shadow: 0px 0px 10px #333;
	-webkit-box-shadow: 0px 0px 10px #333;
	box-shadow: 0px 0px 10px #333;}

#footerwrapper {height: 250px; background-image: url(imgs/site/abubilla-footer.png); background-repeat: no-repeat; background-position: center 20px;}

#footer {width:960px; margin: 10px auto; font-size:10px; color:#EAE2CE;}

#footer p#player-text {margin-left:22px; width:250px; float:left; font-size:11px; }

#footer #follow-us {margin-left:22px; padding-top:35px; float:left; width:400px; height:250px; background: url(imgs/site/follow-us-on.png) no-repeat;}
#footer #follow-us img {margin-right:8px; }
#footer #follow-us a:hover {background:transparent; }


#footer #smlnav {float:right; margin-right:38px;}

#footer a {color:#EAE2CE; text-decoration:none;}
#footer a:hover {color:#AA5757; background-color:#EAE2CE; text-decoration:none;}