@import url("/css/reset.css");

body {   
  margin: 0; 
  text-align: center;
  font: 62.5%/1.5 Arial, Helvetica, sans-serif; 
  }


#page {
  width: 98em;
  background: url(/images/interface/page-bg-drop-shadow.jpg) top center repeat-y;
  margin: auto;
  }
#masthead, #mainnav,#content {
  width: 95.9em;

  margin: 0 0 0 11px;

  text-align: left;
  }
#masthead {
  height: 210px;
  }
#mainnav {
  height: 57px;
  }
#subnav {
  height: 36px;
  width: 95.8em;
  margin: 0 0 1em 11px;

  }
#content {
  padding: 0 1.9em;
  position: relative;
  margin-bottom: 2em;
  }
#homePage #subnav {
  display: none;
  }
#homePage #content {
  background: url(/images/home-page-bg2.jpg) left top no-repeat;
  height: 490px;
  margin-top: 7px;
  }
#homePage #mainContent {
  left:290px;
  margin-top:3.5em;
  position:absolute;
  width:31.5em;
  }
#mainContent {
  width: 70em;
  float: left;
  margin-right: 2em;
  }
#sidebar {
  width: 20em;
  float: left;
  }
#homePage #sidebar {
  top: 4em;
  position: absolute;
  right: 5.8em;
  }
p, li, dd, dt {
  font-size: 1.2em;
  }
p,#content ul, dd {
  margin-bottom: 1em;
  }
h1 {
  font-size: 2.5em;
  margin-bottom: .5em;
  }
h2 {
  font-size: 1.8em;
  margin-bottom: 1em;
  }
h1, h2, h4 {
  color: #00547f;
  }
h4 {
  font-size: 1.4em;
  }
dl {
  margin-left: 1.5em;
  }
dt {
  font-weight: bold;
  }
div.clear {
  clear: both;
  }
#content li {
  padding-left: 12px;
  background: url(/images/interface/bullet-blue-square.gif) left 5px no-repeat;
  }
#content a {
  color: #317FA6;
  border-bottom: 1px solid #79B8D7;
  text-decoration: none;
  }
#content a:hover {
  border-bottom: 1px solid #00547F;
  }
#content a:visited {
  color: #00334D;
  }
/*************************
=Masthead
*************************/
#masthead h1, #masthead h2 {
  text-indent: -9000em;
  }
#masthead {
  background: url(/images/interface/header.jpg) top left no-repeat;
  }
#logo {
  width:265px;
  display: block;
  padding: 5em 0 0 1.5em;
  }
/*************************
=Main Nav
*************************/
#mainnav ul {
  list-style-type: none;
  }
.nav {
  margin: 0;
  padding: 0;
  height: 57px;
  background: url(/images/interface/nav-sprite.jpg) left top no-repeat;
  position: relative;
  }
.nav li a:link, .nav li a:visited {
  height: 56px;
  text-indent: -9000px;
  overflow: hidden;
  display: block;
  position:	absolute;
  }
.nav li {
  float: left;
  display: block;
  margin: 0;
  padding: 0;
  background: none;
  }
.nav li.home a {
  width: 74px;
  }
.nav li.home a:hover, .nav li.home a:focus {
  background: url(/images/interface/nav-sprite.jpg) left -399px  no-repeat;
  }
.nav-home {
  background: url(/images/interface/nav-sprite.jpg) left -399px no-repeat;
  position: absolute;
  width: 68px;
  height: 56px;
  left: 0;
  }
#homePage .nav-home {
  background: url(/images/interface/nav-sprite.jpg) left top no-repeat;
  }
.nav li.about a {
  width: 105px;
  left: 74px;
  }
.nav li.about a:hover, .nav li.about a:focus {
  background: url(/images/interface/nav-sprite.jpg) -80px -399px  no-repeat;
  }
.nav-about {
  background: url(/images/interface/nav-sprite.jpg) -80px -399px no-repeat;
  position: absolute;
  width: 94px;
  height: 56px;
  left: 80px;
  }
.current-about {
  background: url(/images/interface/nav-sprite.jpg) left -57px no-repeat;
  }
.current-about .nav-about {
  background: url(/images/interface/nav-sprite.jpg) -80px -57px no-repeat;
  }
.nav li.donations a {
  width: 114px;
  left: 179px;
  }
.nav li.donations a:hover, .nav li.donations a:focus {
  background: url(/images/interface/nav-sprite.jpg) -185px -399px  no-repeat;
  }
.nav-donations {
  background: url(/images/interface/nav-sprite.jpg) -185px -399px no-repeat;
  position: absolute;
  width: 102px;
  height: 56px;
  left: 185px;
  }
.current-donations {
  background: url(/images/interface/nav-sprite.jpg) left -114px no-repeat;
  }
.current-donations .nav-donations {
  background: url(/images/interface/nav-sprite.jpg) -185px -114px no-repeat;
  }
.nav li.membership a {
  width: 130px;
  left: 309px;
  }
.nav li.membership a:hover, .nav li.membership a:focus {
  background: url(/images/interface/nav-sprite.jpg) -303px -399px  no-repeat;
  }
.nav-membership {
  background: url(/images/interface/nav-sprite.jpg) -303px -399px no-repeat;
  position: absolute;
  width: 112px;
  height: 56px;
  left: 303px;
  }
.current-membership {
  background: url(/images/interface/nav-sprite.jpg) left -171px no-repeat;
  }
.current-membership .nav-membership {
  background: url(/images/interface/nav-sprite.jpg) -303px -171px no-repeat;
  }
.nav li.news a {
  width: 133px;
  left: 423px;
  }
.nav li.news a:hover, .nav li.news a:focus {
  background: url(/images/interface/nav-sprite.jpg) -430px -399px  no-repeat;
  }
.nav-news {
  background: url(/images/interface/nav-sprite.jpg) -430px -399px no-repeat;
  position: absolute;
  width: 120px;
  height: 56px;
  left: 430px;
  }
.current-news {
  background: url(/images/interface/nav-sprite.jpg) left -228px no-repeat;
  }
.current-news .nav-news {
  background: url(/images/interface/nav-sprite.jpg) -430px -228px no-repeat;
  }
.nav li.seminars a {
  width: 108px;
  left: 556px;
  }
.nav li.seminars a:hover, .nav li.seminars a:focus {
  background: url(/images/interface/nav-sprite.jpg) -563px -399px  no-repeat;
  }
.nav-seminars {
  background: url(/images/interface/nav-sprite.jpg) -563px -399px no-repeat;
  position: absolute;
  width: 96px;
  height: 56px;
  left: 563px;
  }
.current-seminars {
  background: url(/images/interface/nav-sprite.jpg) left -285px no-repeat;
  }
.current-seminars .nav-seminars {
  background: url(/images/interface/nav-sprite.jpg) -563px -285px no-repeat;
  }
.nav li.green a {
  width: 129px;
  left: 664px;
  }
.nav li.green a:hover, .nav li.shop a:focus {
  background: url(/images/interface/nav-sprite.jpg) -671px -399px  no-repeat;
  }
.nav-green {
  background: url(/images/interface/nav-sprite.jpg) -671px -399px no-repeat;
  position: absolute;
  width: 123px;
  height: 56px;
  left: 671px;
  }
.current-green {
  background: url(/images/interface/nav-sprite.jpg) left -342px no-repeat;
  }
.current-green .nav-green {
  background: url(/images/interface/nav-sprite.jpg) -671px -342px no-repeat;
  }
#search .nav {
  background: url(/images/interface/nav-sprite.jpg) left -456px; no-repeat;
  }
  
/*************************
=Sub Nav
*************************/
#subnav {
  background: url(/images/interface/subnav-bg-grad.jpg) top left repeat-x;
  }
#homePage #subnav, #seminars #subnav, #green #subnav, #search #subnav, #membership #subnav {
  background: none;
  }
#subnav ul {
  list-style-type: none;
  margin-left: 1.9em;
  display: none;
  }
#subnav ul li {
  float: left;
  margin-right: 1em;
  padding-top: .8em;
  }
#subnav ul li a {
  color: #317fa6;
  text-decoration: none;
  }
#subnav ul li a:hover {
  color: #79b8d7;
  }
#about #subnav ul#about-subnav {
  display: block;
  }
#donations #subnav ul#donations-subnav {
  display: block;
  }
#membership #subnav ul#membership-subnav {
  display: block;
  }
#news #subnav ul#news-subnav {
  display: block;
  }
body.story #subnav ul li.story a {
  color: #000;
  font-weight: bold;
  }
body.people #subnav ul li.people a {
  color: #000;
  font-weight: bold;
  }
body.contact #subnav ul li.contact a {
  color: #000;
  font-weight: bold;
  }
body.individual #subnav ul li.individual a {
  color: #000;
  font-weight: bold;
  }
body.in-kind #subnav ul li.in-kind a {
  color: #000;
  font-weight: bold;
  }
body.contributors #subnav ul li.contributors a {
  color: #000;
  font-weight: bold;
  }
body.events #subnav ul li.events a {
  color: #000;
  font-weight: bold;
  }
body.newsletters #subnav ul li.newsletters a {
  color: #000;
  font-weight: bold;
  }
/************************************
=Content
*************************************/
#inventory {
  height: 60px;
  width: 200px;
  margin-bottom: 1em;
  }
#inventory span {
  display: block;
  }
#inventory span a {
  display: block;
  text-indent: -9000em;
  height: 60px;
  border: none;
  background: url(/images/interface/inventory_btn.jpg) top left no-repeat;
  }
#inventory span a:hover {
  border: none;
  } 
#search iframe {
  width: 700px;
  }
#cse-search-box input {
  width: 120px;
  }
#cse-search-box input#submit {
  width: 55px;
  }
#search-box, .related-links {
  border: 1px solid #ccc;
  width: 200px;
  margin-bottom:1.5em;
  }
#search-box h4, .related-links h4 {
  display: block;
  width: 200px;
  height: 30px;
  text-indent: -9000em;
  }
#search-box h4 {
  background: url(/images/interface/search-header.jpg) top left no-repeat;
  }
.related-links h4 {
  background: url(/images/interface/related-header.jpg) top left no-repeat;
  }
#search-box form div, .related-links ul {
  padding: .8em;
  }
div.quote p {
  padding: 0.2em 2em 0.2em 2.2em;
  }
div.quote span.leftquote {
  display: block;
  background: #fff url(/images/interface/left-quote.gif) left top no-repeat;
  }
div.quote span.rightquote {
  display: block;
  background: url(/images/interface/right-quote.gif) 95% bottom no-repeat;
  }
div.quote p.signature {
  font-style: italic;
  padding: 0 2em;
  }
#donate form {
  text-align: center;
  }
  
#twitter {
  margin-top: 2em;
  text-align: center;
  }
#twitter a {
  height: 35px;
  width: 149px;
  text-decoration: none;
  border: none;
  }
#twitter a:hover {
  border: none;
  }
/************************************
=Footer
************************************/
#footer {
  background: #00547f;
  color: #fff;
  width: 94em;

  padding: 1em;
  text-align: left;
  margin-left: 11px;

  }
#search #footer {
  margin-left: -19px;

  }
#footer .links {
  float: right;
  }
#footer .links ul li {
  float: left;
  margin-right: 1.5em;
  background: none;
  }
#footer .links a {
  color: #79B8D7;
  text-decoration: none;
  border: none;
  }
#footer .links a:hover {
  color: #fff;
  }