/*	------------------------- colors ---------------------------
  dark-brown : #251a06;
  media-blue : #2caae2;
  light-blue : #daf0fa;
  dark-blue : #45626e;
  light-brown : #837d6f;
*/
/*	------------------------- 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: 100%;
  min-width: 960px;
}
#container {
  width: 100%;
  overflow: hidden;
  float: none;
}
#full_screen {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
}
#jax_container {
  position: absolute;
  z-index: 50;
}
#extras {
  clear: both;
}
.content_centered {
  width: 960px;
  left: 50%;
  margin-left: -480px;
}
body {
  background: #fff none scroll no-repeat 0 0;
}
html {
  overflow: scroll;
}
/*	------------------------- 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;
  float: left;
}
#header h1 a {
  opacity: .25;
}
#header h1 a:hover {
  opacity: 1;
}
#header h1 a, #header h1 a img {
  display: block;
  float: left;
}

/*	------------------------- 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..
*/
.navigation, .navigation li, .navigation a {
  position: relative;
  display: block; 
  float: left;
  white-space: nowrap;
}
.navigation li {
}
.navigation a {
}
ul.navigation.account {
  font-size: 1.2em;
  width: 100%;
}
ul.navigation.account li {
  left: -0.6em;
  padding: 0 .6em;
}
ul.navigation.account li a {
  color: #837d6f;
}
ul.navigation.account li a:hover, ul.navigation.account li a.active {
  color: #2baae2;
}
ul.navigation.primary {
  font-size: 1.4em;
  left: -0.8em;
  width: 240px;
  margin-top: 10px;
}
ul.navigation.primary li {
  padding: 0 .8em;
  clear: both;
  width: 218px;
}
ul.navigation.primary.first li:first-child h4 {
  width: 120%;
}
ul.navigation.primary li h4 {
  border-bottom: 1px solid #837d6f;
  font-size: 1.4em;
  font-weight: bold;
  margin-bottom: 10px;
  line-height: 1.2em;
}
ul.navigation.primary li a {
  color: #837d6f;
  line-height: 1.4em;
}
ul.navigation.primary li a:hover, ul.navigation.primary li a.active {
  color: #2baae2;
}
ul.navigation.primary li a.active {
  font-weight: bold;
}
/*	------------------------- header style ------------------------
*/
#header {
  width: 960px;
  padding: 15px 0;
  height: 60px;
}
/*	------------------------- footer style ------------------------
*/
#footer {
  width: 100%;
  background: transparent url(/images/global/large_wave.png) repeat-x scroll 58% 10px;
  height: 35px;
  margin-top: 50px;
  padding-bottom: 15px;
}
/*	------------------------- content style ------------------------
*/
#content {
  width: 960px;
  z-index: 1;
}
div.main {
  width: 698px;
  height: 390px;
  overflow: hidden;
  border: 1px solid #837d6f;
}
div.full {
  width: 938px;
}
div.main img {
  position: absolute;
  display: block;
  float: left;
  top: 0;
  left: 0;
}
div.callout {
  width: 240px;
  margin-top: 10px;
}
div.icon {
  bottom:0;
  position:absolute;
  right:0;
  text-align: center;
}
div.icon a, div.icon a img {
  left: -5px;
  max-width: 100%;
  position: relative;
}
div.right {
  margin-left: 20px;
}
div.left {
  margin-right: 20px;
}
div.header {
  top: -41px;
  left: 100px;
  position: absolute;
}
ol {
  list-style: none;
}
ol li {
  list-style: none;
}
ol li strong {
  padding-right: 20px;
}
.thumbs img {
  opacity: .4;
  margin: 10px 8px 0 8px;
  border: 1px solid #fff;
}
.thumbs img:hover {
  border-color: #837d6f;
}
.thumbs img.active {
  opacity: 1;
  border-color: #cdcbc5;
}
.thumbs img.outed {
  opacity: .4 !important;
  border-color: #fff !important;
}