/*	------------------------- colors ---------------------------
  light-grey : #ebebeb;
  dark-grey : #3c3b3b;
  yellow-green : #a6c239;
  cyan : #087ac9;
  rust-red : #8b3420;
*/

/*	------------------------- container ------------------------
  i absolutly position the container in the center rather then having it be centered
  using a margin: auto beacuse the div is floated to the left already, to fit with my
  framework for easy float clearing and broweser compatibitliy, and when i absolutly 
  position anything else, they will all nicely be centerd in the content as well... the only negitive 
  caviaut is that if the browser window is shrunk to a width smaller then the width
  of this containing element, the left side will be unviewable.. even upon scrolling..
  but this has an easy fix with javascript..
*/
#container, #jax_container {
  width: 849px;
  left:50%;
  margin-left: -424px;
}
#container {
  margin-bottom: 50px;
}
#full_screen {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
}
#jax_container {
  position: absolute;
  z-index: 50;
}
body {
  background: transparent none no-repeat 0 0;
}
html {
  overflow: scroll;
  background: #fff url(/images/global/randall_background.png) fixed no-repeat 100% 100%;
}

/*	------------------------- logo style ------------------------
  i use an image inside of the h1 tag so that it will show up when it is printed..
  background-images don't show up when printed..
*/
#header h1 {
  float: left;
  position: relative;
  height: 80px;
  width: 849px;
  text-indent: -100000px;
  z-index: 0;
  text-align: center;
  background-color: #000;
}
#header h1 a {
}
#header h1 a img {
}
/*	------------------------- navigation ------------------------
  i started using lists again i think.. it tecnicaly makes more sense as when you have sub navigation due to 
  the navigation elements now have more proper binding, rather then a loose binding
  
  * archive: i quit using lists for navigations.. i guess technicaly they are still a list of pages in which
  you can accsess.. but it's something i'm currently trying..
*/
.navi {
  position: relative;
  display: block;
  float: left;
}
.navi li {
  display: block;
  float: left;
}
.navi a {
  display: block;
  float: left;
  position: relative;
  white-space: nowrap;
}
ul.navi.primary {
  overflow: hidden;
  clear: both;
  background-color: #000;
  padding: 0;
  width: 600px;
  margin-top: 1px;
  margin-bottom: 10px;
  text-align: center;
  width: 849px;
}
ul.navi.primary li {
  display: inline-block;
  float: none;
}
ul.navi.primary li a {
  color: #fff;
  padding: 3px 10px;
  font-size: 1.4em;
  font-variant: small-caps;
  float: none;
}
ul.navi.primary li a:hover {
  background-color: #000;
  color: #adadae;
}
ul.navi.primary li a.active {
  background-color: #087ac9;
  color: #fff;
}


#header {
  width: 100%;
}
#content {
  width: 100%;
}
#footer {
  width: 100%;
}

div.content {
  margin-top: 10px;
  margin-bottom: 10px;
  width: 600px;
}
div.callout {
  width: 239px;
  margin-bottom: 10px;
}
div.callout.light, div.content.light {
  background-color: #ebebeb;
}
div.callout.dark, div.content.dark {
  background-color: #3c3b3b;
}
div.callout.light, div.callout.dark {
  width: 219px;
  padding: 7px 10px;
}

div.callout.left {
  margin-right: 10px;
}
div.callout.right {
  margin-left: 10px;
  float: right;
}
div.callout p {
  font-size: 1.1em;
  line-height: 1.2em;
}
div.gallery {
  width: 600px;
}
div.gallery div.basins {
  height: 350px;
  width: 100%;
  overflow: hidden;
}
div.gallery div.basins img {
  width: 600px;
}
div.gallery div.basins * {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
}
div.gallery.video {
  width: 849px;
}
div.gallery.video div.basins {
  height: 497px;
  width: 849px;
  background-color: #000;
}
div.gallery.video div.basins * {
  height: 497px;
  width: 849px;
}


div.gallery div.thumbs {
  background-color: #ebebeb;
  padding: .2em .3em;
  clear: both;
}
div.gallery div.thumbs a {
  display: block;
  float: left;
  margin: .3em;
  padding: .2em .7em;
  text-decoration: none;
  background-color: #3c3b3b;
  color: #3c3b3b;
  font-size: 1em;
}
div.gallery div.thumbs a:hover {
  background-color: #8b3420;
  color: #8b3420;
}
div.gallery div.thumbs a.active {
  background-color: #087ac9;
  color: #087ac9;
}

div#footer div.sponsors a {
  display:block;
  float:left;
  height:60px;
  line-height:40px;
  margin-top:10px;
}
div#content.sponsors div.callout {
  text-align:center;
}
div#content.sponsors div.callout a {
  display:block;
  height:60px;
  line-height:40px;
  margin-top:10px;
}

#content hr {
  border-top: 1px solid #3c3b3b;
}
a.credit {
  display: block;
  float: left;
  clear: both;
  width: 183px;
  height: 13px;
  background: transparent url(/images/global/media_wave_grey.png) scroll no-repeat 0 0;
}
a.credit:hover {
  background: transparent url(/images/global/media_wave_blue.png) scroll no-repeat 0 0;
}