@import url(/stylesheets/content.css);

/* Jello layout */
body {
  padding: 0 385.5px 0 385.5px;
  text-align: center;
  background: white url(http://assets.garbersurveying.com/images/background.jpg) repeat-x;
}
    
#sizer {
  margin: 0 auto 0 auto;
  width: 25%;
  max-width: 129px;  /* version for IE is at the bottom of this style block */
}
  
#expander {
  margin: 0 -385.5px 0 -385.5px;
  min-width: 771px; /* Critical Safari fix! */
  position: relative;
}
  
/* Holly hack for IE \*/
* html #expander { height: 0; }
/* */
  
/* helps IE get the child percentages right. */
#wrapper { width: 100%; } 
  
  
/* End of jello layout
   Be sure to grab IE's max-width, just above the body-tag */
  
  
/* http://positioniseverything.net/easyclearing */
.clearfix:after {
  content: "."; 
  display: block; 
  height: 0;
  clear: both; 
  visibility: hidden;
}
.clearfix {display: inline-block;}
/* Hide from IE Mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE Mac */
  
/* * * Decorative Styles * * */
  
body { font: 0.8125em Verdana, sans-serif; }
  
.nav {
  font: 123% Georgia, serif;
  text-align: right;
}
.nav a {
  text-decoration: none;
}
.nav li {
  list-style-type: none;
}
  
#hd {
  height: 86px;
  color: white;
  background: transparent;
  position: relative;
}
#hd img#logo {
  position: absolute;
  top: 6px;
  left: 13px;
  border: 0;
  margin: 0;
}
#hd #company-name {
  position: absolute;
  left: 176px;
  font: italic bold 154% "Times New Roman", serif;
  bottom: 48px;
}

#hd ul.nav {
  position: absolute;
  right: 0;
  bottom: 38px;
  padding: 12px 0;
}
#hd ul.nav li { 
  display: inline;
}
#hd ul.nav li a {
  padding: 12px .5em;
  color: #FFF;
}
#hd ul.nav li a:hover {
/* TODO: This image needs to be preloaded */
  background: transparent url(http://assets.garbersurveying.com/images/content_bg/nav_horizontal_hover.jpg) repeat-x 50% 50%;
}

/* Content area frame */
#bd .hd .c,
#bd .ft .c {
  font-size:1px; /* ensure minimum height */
  height:11px;
}
  
#bd .ft .c {
  height:14px;
}
  
#bd .hd {
  background:transparent url(http://assets.garbersurveying.com/images/content_bg/tl.jpg) no-repeat 0px 0px;
  margin-right:6px; /* space for right corner */
}
  
#bd .hd .c {
  background:transparent url(http://assets.garbersurveying.com/images/content_bg/tr.jpg) no-repeat right 0px;
  margin-right:-6px; /* pull right corner back over "empty" space (from above margin) */
}
  
#bd .bd {
  background:white url(http://assets.garbersurveying.com/images/content_bg/ml.jpg) repeat-y 0px 0px;
  margin-right:6px;
}
#bd .bd .grad {
  float: left;
  width: 6px;
  height: 205px;
  background:transparent url(http://assets.garbersurveying.com/images/content_bg/tl.jpg) repeat-y 0px -11px;
}
  
#bd .bd .c {
  background:transparent url(http://assets.garbersurveying.com/images/content_bg/mr.jpg) repeat-y right 0px;
  margin-right:-6px;
}
#bd .bd .c .grad {
  float: right;
  width: 6px;
  background:transparent url(http://assets.garbersurveying.com/images/content_bg/tr.jpg) repeat-y 0px -11px;
}
  
#bd .ft {
  background:transparent url(http://assets.garbersurveying.com/images/content_bg/bl.jpg) no-repeat 0px 0px;
  margin-right:6px;
}
  
#bd .ft .c {
  background:transparent url(http://assets.garbersurveying.com/images/content_bg/br.jpg) no-repeat right 0px;
  margin-right:-6px;
}
  
/* Content area nav */
#bd ul.nav {
  text-align: right;
  margin-top: 1em;
  background: transparent url(http://assets.garbersurveying.com/images/nav_divider.jpg) no-repeat top right;
  padding-top: 1px; /* leave space so hover bg doesn't cover divider */
}
#bd ul.nav li { 
  background: transparent url(http://assets.garbersurveying.com/images/nav_divider.jpg) no-repeat bottom right;
  padding-bottom: 1px; /* leave space so hover bg doesn't cover divider */
}
#bd ul.nav li a {
  color: #06C;
  padding: .5em 1em;
  display: block;
}
#bd ul.nav li a:hover {
/* TODO: This image needs to be preloaded */
  background: transparent url(http://assets.garbersurveying.com/images/nav_vertical_hover.jpg) repeat-y right;
}
  
/* Content area */
  /* -see content.css */

/* --- forms -- */
input, select {
  font-size: .95em;
}
  
.input, select {
  border: 1px solid #ababab;
  padding: 2px;
}

/* Footer */
#ft {
  text-align: center;
  color: #777;
  margin-bottom: 2em;
}

#map {
  text-align: center;
}
#map img {
  margin: 1em;
  border: 2px solid #CC6;
}