/****************************************************

	Ginkgo Music stylesheet	
        created by Benjamin Rous (2006)
	updated by BR and Andy Cook (2009 onwards)

*****************************************************/


/*this is a screen stylesheet only - print styles to be developed*/


/*
-------site-wide styles-------------
*/

/* zero out margins and padding on problematic elements - need to reset on some of them... */
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input
{margin: 0; padding: 0;}

body {margin: 0; padding: 15px 0 15px 0; color: #000; background: #898A8A; font-family: garamond, arial, sans-serif;}

#container {width: 820px; margin: 0 auto; padding: 68px 0 0 0; text-align: left; position: relative; background: white url(images/ginkgoleaves.jpg) 100% 0 no-repeat;}

p {padding: 0 0 10px 0;}
h1 {margin: 0; padding: 0 0 10px 0; font-size: 1.2em;}
h2 {margin: 0; padding: 0; font-size: 1em;}


#logo {margin: 0; padding: 0; position: absolute; top: 12px; left: 30px;}
#logo img {border: none;}
#logo a {text-decoration: none;}
#logo a:link {;}
#logo a:visited {;}
#logo a:hover {background: white;}


#nav, #nav2 {margin: 0; padding: 0; width: 350px; height: 22px; background: #DDE49C; position: absolute;}
#nav ul, #nav2 ul {margin: 0; padding: 0 0 0 14px;}
#nav li, #nav2 li {display: inline; list-style: none; font: 17px arial, sans-serif; padding: 0 3px;}
#nav a, #nav2 a {color: white; text-decoration: none;}
#nav a:link, #nav2 a:link {color: white;}
#nav a:visited, #nav2 a:visited {color: white;}
#nav a:hover, #nav2 a:hover {color: #6C7539;}
#nav li.currentpage, #nav2 li.currentpage {color: #6C7539;}
#nav {top: 70px; left: 30px;}
#nav2 {position: relative; margin: 0 0 5px 0;}



/* newsbar width: 126px; */
#newsbar {margin: 0; padding: 34px 0 0 0; position: absolute; top: 100px; left: 30px; background: #EAEEC4 url(images/news.gif) 0 0 no-repeat; border-bottom: 8px solid #DDE49C;}
#newsbar div.odd {background: #F2F5DA;}
#newsbar div.even {background: #EAEEC4;}
#newsbar div.odd, #newsbar div.even {font-weight: bold; font-size: 0.75em; color: #424920; padding: 10px; border-left: 6px solid #DDE49C; border-right: 6px solid #DDE49C;}
#newsbar p {margin: 0; width: 94px;}

a {color: #6C7539; text-decoration: underline;}
a:link {color: #6C7539;}
a:visited {color: #6C7539;}
a:hover {background: #DDE49C; color: #6C7539;}

#footer {margin: 0 0 0 30px; padding: 15px 0 0 0; height: 66px; background: white url(images/footer.jpg) 100% 100% no-repeat; color: #6C7539; font: 0.8em/1em arial, sans-serif;}
#footer p {margin: 0; padding: 3px 0;}
#footer p.copyright {font-size: 0.8em; line-height: 1.2em;}


/*
-------landing page style------------          added by Andy Cook (11/01/10 UPDATED: 8/02/10)
*/

#landingvideo {
margin: 40px 0 0 30px; 
position: relative;
}

#missionLanding {
margin: -200px 0 0 450px;
position: absolute;
width: 150px;
}

#missionLanding p {color:#6C7539; font: 0.8em/1em arial,sans-serif}

/*
-------home page styles-------------
*/

#pictures {margin: 0; padding: 0 10px 10px 10px; width: 192px; position: absolute; top: 100px; left: 168px; background: #AFB3BC; color: white; font-size: 14px;}
#pictures img {margin: 0 -10px; padding: 0 0 10px 0;}
#pictures span.latin {font-style: italic; font-size: 1em; line-height: 1.2em;}
#pictures p.photographer {font-size: 0.8em; line-height: 1.2em;}

#mission {margin: 0 0 6px 400px; padding: 0; width: 260px; height: 50px; font-weight: bold; font-size: 14px; color: #88905F;}
#welcome {margin: 0 0 0 400px; width: 390px; padding: 10px 0 0 0; color: #6C7539; font-size: 0.75em; line-height: 1.3em;}

#emails {margin: 0 0 0 400px; padding: 15px 0 0; width: 390px; background: url(images/circles.gif) 97% 0 no-repeat; color: #6C7539; font-size: 14px;}
/* height was 75px} */
#emails div, #emails input, #emails form {margin: 0; padding: 0;}
#emails form {padding: 15px 0 0 0;}
#emails p {padding: 15px 0;}
#emails img {border: none;}

/* All this really needs to change as was set up for news from the blog... which is now in the newsbar. */
#blog h1 {padding: 5px 15px 0; font-size: 1.8em;}
#blogcontainer {background: white url(images/wallpaper.gif) 30px 450px repeat-y; min-height: 747px;}
#blog, #newsarticle {margin: 0 0 0 400px; padding: 0; width: 378px; background: #EAEEC4; color: #6C7539; font-size: 11px; border: 6px solid #DDE49C;}
#blog span.date {font-style: italic; padding: 0 0 5px 0;}
#blog div.entry, #newsarticle div.entry {margin: 0; padding: 15px;}
#blog div.odd, #newsarticle div.odd {background: #EAEEC4;}
#blog div.even, #newsarticle div.even {background: #F2F5DA;}
#blogarticle, #newsarticle {margin: 15px 0 0 170px; width: 600px; font-size: 11px; line-height: 16px;}

#blog p {padding: 5px; font-size: 1.1em;}
#blog h3 {padding: 5px; font-size: 1.5em;}
#blog h4 {padding: 5px; font-size: 1.2em;}

/* centre the form. Only adding margin at top... I think this is due to spacer gif at bottom... is that needed for some https reason? */
#blog form {width: 160px; margin: 15px auto 0;}

#albumcovers {margin: 0 0 0 400px; padding: 0; width: 390px;}
#albumcovers p {font-size: 0.8em; text-align: center; color:#6C7539;}
#albumImage {cursor: pointer;}

/*added to position mp3 player (experimenting) [02/07/10 - Andy] */
#player {margin: 10px 0 0 395px;}


/*
-------news page styles-------------
*/



#newsarticle h1 {margin: 0; padding: 15px 15px 5px 15px; font-size: 1.8em;}
#newsarticle h2 {margin: 0; padding: 0 15px 5px 0; font-size: 1em;}
#newsarticle h2 a {text-decoration: none;}
#newsarticle h2 a:hover {background: transparent;}
#newsarticle h3 {margin: 0; padding: 0; font-size: 1em;}


/*
-------error page styles-------------
*/


#errorcontainer {background: white url(images/wallpaper.gif) 30px 450px repeat-y; min-height: 156px;}
#errorcontent {margin: 0; padding: 15px; background: #EAEEC4; margin: 0 0 0 170px; width: 440px; color: #6C7539; font-size: 11px; border: 6px solid #DDE49C;}



/*
------------------------ projects page ------------------------
*/

#ecuadorcontainer {background: white url(images/wallpaper.gif) 30px 380px repeat-y; height: 1630px;}
/* #ecuadorcontainer p {margin: 0; padding: 0;} */


/* --- all text --- */
#ecuadorproject, #birdspecies, #plantspecies, #mindo, #habitat, #jocotoco {margin: 0; padding: 15px; background: #EAEEC4; color: #6C7539; font-size: 11px; line-height: 16px;}


/* --- left aligned elements --- */
#ecuadorproject, #alertbird, #plantspecies, #hummer, #habitat, #map {position: absolute; left: 168px;}

#ecuadorproject {width: 193px; top: 145px; background: #EAEEC4 url(images/right-arrow.gif) 175px 5px no-repeat;}
#alertbird {top: 503px;}
#plantspecies {top: 799px; width: 233px; padding-right: 60px; height: 56px; background: #EAEEC4 url(images/right-arrow.gif) 250px 20px no-repeat;}
#hummer {top: 900px;}
#habitat {top: 1170px; width: 180px; height: 140px; background: #EAEEC4 url(images/right-arrow.gif) 160px 115px no-repeat;}
#map {top: 1355px;}


/* --- right aligned elements --- */
#cdcover, #birdspecies, #flower, #mindo, #frog, #jocotoco {position: absolute; right: 30px;}

#cdcover {top: 145px;}
#birdspecies {top: 503px; width: 238px; height: auto; padding-left: 80px; background: #EAEEC4 url(images/left-arrow.gif) 30px 13px no-repeat;}
#flower {top: 585px;} 
#mindo {top: 945px; width: 326px; height: 40px; padding-left: 90px; background: #EAEEC4 url(images/left-arrow.gif) 30px 13px no-repeat;}
#frog {top: 1030px;}
#jocotoco {top: 1355px; width: 260px; height: 225px; padding-left: 34px; background: #EAEEC4 url(images/left-arrow.gif) 44px 205px no-repeat;}






/*
-------about us page-------------
*/

#quote {margin: 0 0 0 400px; padding: 0; width: 265px; height: 50px; font: 0.8em/1.2em bembo, garamond, "Times New Roman", serif; color: #88905F;}
#quote q:before, q:after {content: "";}
p.author {font: bolder 0.9em bembo, garamond, "Times New Roman", serif; color: #88905F;}


#aboutuscontainer {margin: 0; padding: 30px 0 0 0; background: transparent url(images/blurred-leaves.jpg) 0 0 no-repeat;}

#aboutuslinks {position: absolute; left: -370px; top: 0; list-style: none; font-weight: bold;}

#aboutus {position: relative; left: 400px; margin: 0; padding: 10px 20px 10px 20px; width: 260px; background: #EAEEC4; color: #6C7539; font-size: 11px; line-height: 16px;}
#aboutus div {position: relative; height: 0; margin: 0 0 0 -126px; padding: 30px 0 10px 126px;}
#aboutuscontainer>#aboutus div {height: auto;}

#ourmission {background: transparent url(images/orchid.jpg) 0 33px no-repeat; min-height: 118px; padding-top: 0;}
#ecosystemsunderthreat {background: transparent url(images/ancient-forest.jpg) 0 33px no-repeat; min-height: 104px;}
#whoarewe {background: transparent url("images/singer.jpg") 0 33px no-repeat; min-height: 93px;}
#whyginkgo {background: transparent url("images/ginkgo-leaf.jpg") 0 33px no-repeat; min-height: 110px;}
#whymusic {background: transparent url("images/shelley.jpg") 0 33px no-repeat; min-height: 172px;}
#whyprotectforests {background: transparent url("images/bird-face.jpg") 0 33px no-repeat; min-height: 125px;}
#ourfocusisbiodiversity {background: transparent url("images/dom.jpg") 0 33px no-repeat; min-height: 179px;}
#blake {background: transparent url("images/treesky.jpg") 0 33px no-repeat; min-height: 136px;}




/*
-------contact page-------------
*/


#contact h1 {padding: 10px 0 0 0;}

#contact {margin: 0 0 0 30px; padding: 32px 0 0 0; width: 530px; background: white; color: #6C7539; font-size: 0.9em;}

#contactform {font-size: 1em; background: #EAEEC4; width: auto; padding: 0 30px 5px 20px; margin: 0;}
#contactform fieldset {width: 480px; display: block; padding: 0 0 0 10px; font-style: italic; font-size: 0.9em; line-height: 1.5em; border: 1px solid #DDE49C; margin: 15px 0 0 0; min-height: 1px;}

#contactform legend {border: 1px solid #DDE49C; font-size: 1.2em; color: #6C7539; margin: 0 0 5px 0; padding: 4px; background: #EAEEC4;}

#contactform label {clear: left; display: block; float: left; width: 250px; text-align: right; padding: 0 10px 0 0; background: #EAEEC4; color: #6C7539; font-size: 0.9em; margin: 0 0 0.5em 0;}
#contactform fieldset#personalform label {width: 100px;}

#contactform input {padding: 0; margin: 0 0 10px 0;}
#contactform #tellfriends input {clear: left; display: block; float: left; width: 200px; padding: 0 10px 0 0; color: #6C7539; font-size: 0.9em; margin: 0 0 0.5em 0;}

#contactform textarea {border: 1px solid #E1E1E1; padding: 5px; margin: -8px 0 5px 0; overflow: auto;}
#contactform #tellfriends textarea {border: 1px solid #E1E1E1; padding: 5px; margin: -8px 0 5px 10px; overflow: auto;}

#tellfriends {min-height: 210px;}

/* rewrite these in same format as other rules */

#contact form #submit, #contact form #reset {background: #666; border-bottom: 1px solid #333; border-left: 1px solid #999; border-top: 1px solid #999; border-right:1px solid #333; color: #fff; padding: 0 0 0 0; cursor: pointer; width: 182px; margin: 15px 15px 0 15px;}

#contact form #submit:hover, #contact form #reset:hover {background: #990033; border-bottom: 1px solid #4A0018; border-right: 1px solid #4A0018; color:#fff; border-top:1px solid #cc0033; border-left: 1px solid #cc0033;}

.feedback {margin: 0; padding: 0; position: absolute; top: 150px; right: 30px; width: 195px;}
.bad {margin: 0 0 5px 0; padding: 5px; border: 2px solid red; color: red;}
.good {margin: 0 0 5px 0; padding: 5px; border: 2px solid #6C7539; color: #6C7539;}