/*
--------------------------------------------------------------------------------
 [] Base.css
    --------
    The Base.css page stylesheet provides screen styles for the basic
	structural layout and visual format of ErikBurns.com.
    ----------------------
    Author:  Erik Burns
	Version: July 26, 2008
-------------------------------------------------------------------------------- */

/* ------------------------------------------------------------------------------
 :: Globals
    -------
    The globals section defines global layout for the basic page frame and
	structural columns. It also defines visual displays for standardized sitewide
	tags, such as headers, anchors, and img tags.
/* ------------------------------------------------------------------------------ */

/* ------------------------------------------------------------------------------
   ... Layout
-------------------------------------------------------------------------------- */
html {
  height: 100%;
  }

body {
  position: relative;
  height: 100%;
  margin: 0; padding: 0;
  font-family: Verdana, Lucida, Helvetica, sans-serif;
  font-size: 80%;
  background-color: #111;
  }

.body_wrapper {
  display: block;
  position: absolute; top: 0; left: 0;
  min-height: 100%; width: 100%;
  }

* html .body_wrapper { /* Hack to make the height correct in IE */
  height: 100%;
  }

/* ------------------------------------------------------------------------------
   ... Display
-------------------------------------------------------------------------------- */
h1, h2, h3 {
  font-family: Calibri, Lucida, Helvetica, sans-serif;
  padding: 0; margin: 0;
  color: #000; background-color: transparent;
  }

h2 {
  font-size: 210%; font-weight: normal;
  padding-bottom: 6px;
  }

h3 {
  font-size: 165%; font-weight: normal;
  padding-top: 10px; padding-bottom: 4px;
  }

p {
  padding: 0; margin: 0;
  font-size: 100%;
  line-height: 145%;
  color: #1A1A1A;
  }

img {
  border: 0;
  }

form {
  padding: 0; margin: 0;
  }

a {
  color: #9CC03C;
  }

a:hover, a:active {
  color: #29AAE2 !important;
  }

h1 a, h2 a, h3 a {
  text-decoration: none;
  }
  
/* ------------------------------------------------------------------------------
 :: Header
    ------
    Controls the visual display of the header.
/* ------------------------------------------------------------------------------ */
.header_wrapper_outer {
  height: 65px; width: 100%;
  background: #000 url("/images/header_bg.gif") repeat-x 0 0;
  text-align: center;
  }

.header_wrapper {
  position: relative;
  width: 930px;
  margin: 0 auto; padding: 0;
  text-align: left;
  }

.header {
  position: relative;
  padding: 0; margin: 0;
  }

.header h1 {
  position: absolute; left: 0; top: 0;
  width: 562px; height: 158px;
  background: url("/images/header_logo.gif") repeat-x 0 0;
  padding: 0; margin: 0;
  }

/* Dwyer Method Image Replacement
   http://mezzoblue.com/tests/revised-image-replacement/ */
.header h1 span {
  display: block;
  height: 0; width: 0;
  overflow: hidden;
  line-height: 0;
  }

/* ------------------------------------------------------------------------------
 * Navigation - Sitewide Primary Nav Links
/* ------------------------------------------------------------------------------ */
ul.nav {
  display: block;
  float: right;
  height: 64px;
  padding: 0; margin: 0;
  list-style: none;
  }

ul.nav li {
  display: block; float: left; padding-right: 2px; padding-left: 0;
  }

ul.nav li a {
  display: block; float: left;
  height: 64px;
  padding: 0;
  background-repeat: no-repeat; background-position: 0 0;
  }

ul.nav li.on a { background-position: 0 -138px !important; }
ul.nav li a:hover { background-position: 0 -69px; }

ul.nav li a.portfolio { background-image: url("/images/header_nav_portfolio.jpg"); width: 122px; }
ul.nav li a.services { background-image: url("/images/header_nav_services.jpg"); width: 115px; }
ul.nav li a.contact { background-image: url("/images/header_nav_contact.jpg"); width: 109px; }

/* Dwyer Method Image Replacement
   http://mezzoblue.com/tests/revised-image-replacement/ */
ul.nav li a span {
  display: block;
  height: 0; width: 0;
  overflow: hidden;
  line-height: 0;
  }

/*
--------------------------------------------------------------------------------
 :: Body Content
    ------------
    Styles for the main body content (copy, images, and links).
-------------------------------------------------------------------------------- */
.content_wrapper_outer {
  width: 100%;
  text-align: center;
  background: url("/images/content_bg.gif") repeat-x 0 0;
  }

.content_wrapper {
  position: relative;
  width: 930px;
  margin: 0 auto; padding: 0;
  text-align: left;
  }

.content_frame {
  position: relative;
  width: 871px;
  margin-top: 49px; margin-left: 57px;
  }

.content_frame .bottom {
  margin-top: 10px; margin-bottom: 80px;
  color: #fff; background-color: transparent;
  }

.content_frame .bottom .divider {
  color: #777;
  }

.content_frame .bottom span.services {
  color: #999;
  }

.clear {
  clear: both; height: 0px; line-height: 0;
  }

/* ------------------------------------------------------------------------------
 * Top - the top bar of the frame, including the title "Portfolio" the nav tools, and the project info
/* ------------------------------------------------------------------------------ */
.content_frame .top {
  position: relative; top: 1px;
  height: 44px; width: inherit;
  }

.content_frame .top h2 {
  position: absolute; left: 0; bottom: -.5em;
  margin-bottom: 10px; font-size: 240%;
  color: #fff; background-color: transparent;
  }

.content_frame .top p {
  position: absolute; right: 170px; bottom: -1em;
  margin-bottom: 20px;
  text-align: right; color: #fff; background-color: transparent;
  }

.content_frame .top .frame_nav {
  float: right;
  margin: 0; padding: 0;
  list-style: none;
  }

.content_frame .top .frame_nav li {
  display: block; float: left; padding: 0;
  }

.content_frame .top .frame_nav li a {
  display: block; float: left;
  height: 44px;
  padding: 0; margin: 0;
  background-repeat: no-repeat; background-position: 0 0;
  }

.content_frame .top .frame_nav li a:hover { background-position: 0 -48px; }

.content_frame .top .frame_nav li a.prev { background-image: url("/images/frame_nav_left.gif"); width: 89px; }
.content_frame .top .frame_nav li a.next { background-image: url("/images/frame_nav_right.gif"); width: 68px; }

/* Dwyer Method Image Replacement
   http://mezzoblue.com/tests/revised-image-replacement/ */
.content_frame .top .frame_nav li a span {
  display: block;
  height: 0; width: 0;
  overflow: hidden;
  line-height: 0;
  }

/* ------------------------------------------------------------------------------
 * Content_Body - the body of the frame, including all the content in the white frame area
/* ------------------------------------------------------------------------------ */
.content_body {
  border: 1px solid #434244;
  background-color: #505153;
  padding: 6px;
  }

.content_body img.single {
  display: block;
  padding: 0; margin: 0;
  border: 1px solid #fff;
  }

.content_body .body {
  background-color: #fff;
  width: 781px; min-height: 424px;
  padding: 38px 38px 28px 38px;
  }

* html .content_body .body { /* Hack to fix the fact that IE doesn't respect min-height value */
  height: 424px;
  }

.content_body .body p {
  margin-bottom: 10px;
  }

.content_body .body_copy {
  float: left;
  width: 320px;
  }

.content_body .body_images {
  float: right; position: relative; left: 12px;
  width: 438px;
  }

.content_body .body_images a {
  display: block; float: left;
  margin-bottom: 16px;
  border: 2px solid #777;
  padding: 1px;
  background: #ccc;
  font-size: 0px; line-height: 0;
  }

.content_body .body_images a.odd {
  margin-left: 16px;
  }

.content_body .body_images a:hover, .content_body .body_images a:active {
  border-color: #29AAE2;
  }

.content_body .body_images img {
  }

.content_body .body p {
  font-size: 105%;
  line-height: 160%;
  }

/* ------------------------------------------------------------------------------
 :: Footer
    ------
    Controls the visual display of the footer.
/* ------------------------------------------------------------------------------ */
.footer_wrapper_outer {
  display: block;
  position: absolute; bottom: 0; left: 0;
  height: 45px; width: 100%;
  background: #000 url("/images/footer_bg.gif") repeat-x 0 0;
  text-align: center;
  }

.footer_wrapper {
  display: block;
  position: relative;
  width: 930px;
  margin: 0 auto; padding: 0;
  text-align: left;
  text-decoration: none;
  }

.footer {
  height: 45px;
  padding: 0; margin: 0;
  text-decoration: none;
  }

.footer a {
  display: block;
  position: absolute; left: 0; top: 0;
  height: 44px; width: 139px;
  background: url("/images/footer_logo.gif") no-repeat 0 0;
  }

.footer a:hover, .footer a:active {
  background-position: 0 -49px;
  }

/* Dwyer Method Image Replacement
   http://mezzoblue.com/tests/revised-image-replacement/ */
.footer a span {
  display: block;
  height: 0; width: 0;
  overflow: hidden;
  line-height: 0;
  }

.footer p {
  padding-left: 150px; padding-top: 16px;
  background-color: transparent;
  color: #757779;
  }