/*	------------------------- colors ---------------------------
  orange : #df7700;
  red-orange : #b04820;
  light-orange : #ce8452;
  dark-orange : #c56b05;
  brown : #8d715e;
*/

/*	------------------------- 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: 910px;
  left:50%;
  margin-left: -455px;
}
#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 url(/images/global/background_header.png) repeat-x 50% 0;
}
html {
  overflow: scroll;
  background-color: #df7700;
}

/*	------------------------- 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 {
  position: relative;
  height: 170px;
  width: 261px;
  text-indent: -1000px;
  z-index: 0;
  margin-top: 40px;
  left: 330px;
}
#header h1 a {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
#header h1 a img {
  position: absolute;
  top: 0;
  left: 0;
}
/*	------------------------- 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;
  width: 100%;
}
.navi li {
  display: inline;
}
.navi a {
  display: inline-block;
  position: relative;
  white-space: nowrap;
}
ul.navi.primary {
  text-align: center;
  margin-top: 25px;
  clear: both;
}
ul.navi.primary li {
}
ul.navi.primary li a {
  color: #ce8452;
  padding: 0 .8em;
  font-variant: small-caps;
  font-weight: bold;
  font-size: 1.6em;
}
ul.navi.primary li a:hover, ul.navi.primary li a.current_page_item, ul.navi.primary li a.active {
  color: #b04820;
}


#header {
  width: 100%;
  height: 280px;
  margin-top: 50px;
  background: transparent url(/images/global/header_back.png) scroll no-repeat 50% 0;
}
#content {
  width: 86%;
  padding: 30px 7%;
  background: transparent url(/images/global/content_back.png) scroll repeat-y 50% 0;
}
#footer {
  width: 91%;
  padding: 20px 7% 0 2%;
  height: 100px;
  background: transparent url(/images/global/footer_back.png) scroll no-repeat 50% 0;
}

#footer h6 {
  color:#8d715e;
  float:right;
  font-size:1.2em;
}
#footer h6 a {
  color:#b04820;
}
#footer p.copyright {
  color: #fff;
  font-size:1.2em;
  margin-top:70px;
}
#footer p.copyright a {
  margin-left: 10px;
}
div.content {
  margin-bottom: 10px;
}
div.content.main {
  width: 54%;
}
div.content.half {
  width: 48%;
}

div.content.full {
  width: 100%;
}
div.callout {
  width: 42%;
  margin-bottom: 10px;
}
div.right {
  float: right;
  margin-left: 4%;
}
div.callout.left {
}

div#content.home blockquote {
  padding-top: 30px;
  font-size: 2.4em;
}
div#content.home .content.full {
  margin-bottom: 20px;
}

div.gallery {
  width: 328px;
}
div.gallery div.basins {
  overflow: hidden;
  height: 216px;
  width: 328px;
}
div.gallery div.basins img {
  width: 100%;
}
div.gallery div.thumbs {
  width: 100%;
  padding: .2em .3em;
  text-align: center;
  white-space: nowrap;
}
div.gallery div.thumbs a {
  display: inline-block;
  margin: .2em;
  padding: .2em .7em;
  text-decoration: none;
  background-color: #ce8452;
  color: #ce8452;
  font-size: 1em;
}
div.gallery div.thumbs a:hover {
  background-color: #c56b05;
  color: #c56b05;
}
div.gallery div.thumbs a.active {
  background-color: #b04820;
  color: #b04820;
}