/*	------------------------- colors ---------------------------
  black : #000;
  white : #fff;
  grey : #e6e5e5;
  blue: #00456a;
  light-turqoise: #53829a;
  turqoise: #336a88;
  yellow-green: #9fa374;
  yellow: #f2edb1;
  light-yellow: #f9f6d4;
*/
/*	------------------------- 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: 820px;
  left: 50%;
  margin-left: -410px;
}
body {
  background: transparent none scroll no-repeat 0 0;
  margin-bottom: 40px;
}
html {
  overflow: scroll;
  background: transparent url(/media/global/background-repeater.png) scroll repeat 0 0;
}
/*	------------------------- 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;
  margin-top: -44px;
}
#header h1.cafe {
	float: right;
	margin-right: -16px;
}
#header h1 strong {
  position: absolute;
  left: -100000px
}
#header h1 a, #header h1 a img {
  display: inline-block;
}

/*	------------------------- 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.primary {
  font-size: 1.6em;
  float: right;
  width: 303px;
  overflow: hidden;
	left: 13px;
}
ul.navigation.primary li {
  left: -1px;
}
ul.navigation.primary li a {
  width: 100px;
  border-left: 1px solid #e6e5e5;
  text-align: center;
  color: #aaa;
}
ul.navigation.primary li a:hover, ul.navigation.primary li a.active {
  color: #336a88;
}
ul.navigation.menu {
  font-size: 1.8em;
  margin-top: -10px;
  margin-bottom: 10px;
  margin-left: -10px;
}
ul.navigation.menu li {
}
ul.navigation.menu li a {
  padding: 0 10px;
}
ul.navigation.menu li a:hover, ul.navigation.menu li a.active {
  color: #9fa374;
}

/*	------------------------- header style ------------------------
*/
#header {
  padding: 20px 40px 0 40px;
  width: 740px;
  background-color: #fff;
  margin-top: 50px;
}
#header h2 {
  float: right;
  margin-top: -60px;
  font-size: 1.2em;
  line-height: 1.4em;
  color: #53829a;
  text-align: right;
  position: relative;
}
#header h2 strong {
  font-weight: bold;
  font-size: 1.2em;
  color: #336a88;
}
#takemehome {
	border-right: 1px solid #E6E5E5;
  color: #AAAAAA;
  display: block;
  float: right;
  font-size: 1.6em;
  left: 10px;
  padding-bottom: 28px;
  padding-right: 13px;
  padding-top: 3px;
  position: relative;
}
#takemehome:visited {
	color: #aaa;
}
/*	------------------------- footer style ------------------------
*/
#footer {
  padding: 20px 40px;
  width: 740px;
  margin-top: 20px;
  background: transparent url(/media/global/background-footer.png) scroll repeat-y 50% 0;
  color: #f9f6d4;
  font-size: 1.2em;
}
#footer .right {
  text-align: right;
}
#footer strong {
  font-weight: bold;
  font-size: 1.2em;
  color: #f2edb1;
}
#footer a {
  color: #f9f6d4;
}
#footer a.credit_link {
  float:left;
  clear:both;
  display: block;
  margin-top:10px;
}
/*	------------------------- content style ------------------------
*/
#content {
  padding: 20px 40px;
  width: 740px;
  background-color: #fff;
}
.full {
  width: 100%;
}
.half {
  width: 350px;
}
.content {
  width: 400px;
}
.callout {
  width: 250px;
  margin-right: 20px
}
.right {
  margin-left: 10px;
  float: right;
}
.left {
  margin-right: 10px;
  float: left;
}
/*	------------------------- shop style ------------------------
*/

div.shadow {
  width: 100%;
  height: 7px;
  background: transparent url(/media/global/bottom-shadow.png) scroll no-repeat 50% 0;
}
div.gallery {
  width: 100%;
  border: 4px double #eee;
  margin: 0 -4px;
  overflow: hidden;
  height: 345px;
}
div.gallery div.basins {
  width: 100%;
}
div.gallery div.basins img {
  position: absolute;
  top: 0;
}
div.gallery div.basins div.left img {
  left: 0;
}
div.gallery div.basins div.right img {
  right: 0;
}
div.gallery div.thumbs {
  display: none;
}
#gmap {
  height: 400px;
  border: 4px double #eee;
  margin: 0 -4px;
}
#gmap span.latt, #gmap span.long{
  display: none;
}
#gmap div {
  float: none;
}
#gdirections {
  font-size: 1.3em;
}
.adp-legal {
  margin-bottom: 10px;
}
.adp-directions {
  width:100%;
}
#gdirections div {
  float: none;
}
#content.menu .full {
  padding: 0 20%;
  width: 60%;
  text-align: center;
}

.callout img {
  border: 4px double #eee;
  margin-left: -4px;
}
.landing .half {
  text-align: center;
	font-size: .8em;
}
.landing #landing-left img {
  margin-left: -4px;
}
.landing #landing-right img {
  margin-right: -4px;
}