/*
Green: #d6ef94
Medium Blue: #6da3d8
Dark Blue: #3c6a8f
Dark Gray: #b5b5b6
Light Gray: #dcdcdc
normal text: #404144
*/

:focus {
  border: 1px solid black !important;
}

.clear {
  clear: both;
}

body {
  background: #fff url('/images/samplebground.png') repeat;
  font-size: 11px;
  font-family: Trebuchet MS, sans-serif;
}

#page {
  width: 1024px;
  margin: 35px auto;
  border: 1px solid #dcdcdc;
}


/***** HEADER *****/

header {
  /* height: 118px;  total height = height + top-padding + bottom-padding = 148px */
  padding-right: 35px; padding-left: 15px;
  border-bottom: 4px solid #d6ef94;
  background-color: #fff;
  min-height: 148px;
}

#wiki-login-link {
  text-align: right;
  font-size: 1em;
  padding-top: 10px;
}
#wiki-login-link a {
  color: #b5b5b6;
}

div#logo {
  padding-top: 32px;
  padding-left: 10px;
  width: 360px;
  /* Setting the width seemed necessary to make the border on the anchor inside
     look right when said anchor has focus as a result of tabbing.
  */
  float: left;
}
div#logo a {
  display: block; /* Seemed necessary for its look when the viewer tabs to it. */
  border: 1px solid white;  /* Overridden when has focus. */
}

#button_nav {
  float: right;
  padding-top: 4px;
}

#button_nav .col {
  float: right;
}

#button_nav>.col>.pane {
  margin-bottom: 0px;
  width: 194px;
  height: 43px;
  background-color: transparent;
  overflow: visible;
  position: relative;
  border-top:  solid 8px white;
  border-left: solid 10px white;
}
#button_nav .col>.pane>a,
#button_nav input#search_term {
  /* These can receive focus. */
  /* position: absolute;
  /* left: 1; top: 1; Why did Chrome cross these out when position was absolute? */
  width: 194px;
  height: 41px;
  /* border: 1px solid #b5b5b6; Why did this hose up the rendered sizes? */
}

form#search {
  /* total height and width of form should match buttons */
  padding: 0;
  width: 100%; height: 100%;
  border: 0px none;
}

form#search input#search_term {
  background: url('/images/search.jpg') /* -1px -1px */ no-repeat;
  border: 0px none;
  padding: 0; margin: 0;
  font-size: 1.1666em;
  background-color: transparent;
}

form#search #search_term:focus, form#search #search_term.initialized {
  background-color: #fff;
}


#button_nav a {
  display: block;
}

#button_nav a#map_link {
  background: url('/images/statusmap.png') no-repeat;
}

#button_nav a#map_link:hover {
  background: url('/images/statusmap_over.png') no-repeat;
}

#button_nav a#stayinformed_link {
  background: url('/images/stayinformed.png') no-repeat;
}

#button_nav a#stayinformed_link:hover {
  background: url('/images/stayinformed_over.png') no-repeat;
}

#button_nav a#donate_link {
  background: url('/images/donate.png') no-repeat;
}

#button_nav a#donate_link:hover {
  background: url('/images/donate_over.png') no-repeat;
}


/***** CONTENT *****/

#content {
  padding: 25px 35px;
  background-color: rgba(109,163,216,0.6); /* background color #6da3d8, with 60% opacity */
}

#breadcrumbs {
  color: #b5b5b6;
  margin-bottom: 20px;
}
#breadcrumbs, #breadcrumbs * {
  font-size: 15.1038451554677px; /* exp(15%) * prev. size 13px */
}

#breadcrumbs a {
  color: #6da3d8;
  text-decoration: none;
}

#breadcrumbs a.tail {
  color: #3c6a8f;
}


#nav_wrapper {
  width: 170px;
  float: left;
/*  font-size: 1.3333em;*/
  font-size: 14px;
}

nav ul.primary {
  padding-left: 0;
}

nav ul.primary > li {
  margin-bottom: 26px;
  margin-top: 0;
}

nav ul.primary > li > h2 {
  margin-left: 24px;
  font-size: 15px;
}

nav ul.primary > li a.expander
 {
  display: block;
  float: left;
  margin-top: 2px;
  margin-left: 0;
  height: 14px;
  width: 14px;
  background: url('/images/navarrow.png') no-repeat;
}

nav ul.primary > li.open a.expander {
  background: url('/images/navarrow_down.png') no-repeat;
}

nav ul.primary > li ul {
  display: none;
}

nav ul.primary > li.open ul {
  display: block;
}
  
nav ul {
  padding-left: 24px;
}

nav li {
  line-height: 120%;
  margin-top: 8px;
}

nav a {
  color: #fff;
  text-decoration: none;
}

nav a.current, nav a:hover {
  color: #d6ef94;
}

#main_content {
  background-color: #fff;
  margin-left: 184px;
  padding: 15px;
}

label {
  color: #404144;
  font-size: 13.5px;
}

noscript {
  /* Padding, margin, and border don't seem to work for noscript, at least in Chrome. */
  font-size: 14pt;
  color: #404144;
}
.noscript-wrapper {
}


/***** FOOTER *****/

footer {
  background-color: #d6ef94;
  height: 27px;
  padding: 15px 35px 15px 35px;
  font-size: 1.1666em;
  color: #3c6a8f;
}

.footer-cell {
  height: 27px;
  display: table-cell;
  vertical-align: middle;
}

#footer_nav {
  float: left;
}

#footer_nav a {
  color: #3c6a8f;
  text-decoration: none;
} 

#social_links { 
  float: right;
}

#social_links a {
  height: 19px;
  width: 15px;
  float: right;
  margin-left: 10px;
}

a#twitter_link {
  background: url('/images/twitter.png') no-repeat;
}

a#twitter_link:hover {
  background: url('/images/twitter_over.png') no-repeat;
}

a#facebook_link {
  background: url('/images/facebook.png') no-repeat;
}

a#facebook_link:hover {
  background: url('/images/facebook_over.png') no-repeat;
}


a#linkedin_link {
  background: url('/images/in.png') no-repeat;
  width: 22px;
  background-position: 0px -2px; /* hori vert */
}

a#linkedin_link:hover {
  background: url('/images/in_over.png') no-repeat;
  width: 22px;
  background-position: 0px -2px; /* hori vert */
}

#organization_info {
  text-align: center;
  line-height: 125%;
  margin: 0 160px;
}

#organization_info a {
  color: #3c6a8f;
}