html {
  background:#333;
}

body {
  margin:0;
}

h1,h2,h3,h4,h5,h6 {
  color:#FFF;
  margin-top:0;
}

/* ------------ Hat ------------ */

#hat-wrap {
  background:#000;
}

  #hat {
   height:81px;
  }

  #hat h1 {
    margin:0;
    line-height:81px;
    font-size:220%;
  }
  
  #hat #logo {
    margin:17.5px 4em 0 0;
  }
  
  /* ------------ Main-Nav ------------ */
  
  #hat ul#main-nav {
    margin:0;
  }
  
  #hat ul#main-nav li {
    list-style-type:none;
    display:inline;
    line-height:81px;
    margin-right:13px;
  }
  
  #hat ul#main-nav a:link,
  #hat ul#main-nav a:visited {
    font-size:182%;
    color:#FFF;
    font-weight:bold;
    text-decoration:none;
  }
  
  #hat ul#main-nav a:hover,
  #hat ul#main-nav a:active {
    text-decoration:underline;
  }
  
  /*  index page on state */
  
  body.index-page #hat ul#main-nav .nav-item-one a:link,
  body.index-page #hat ul#main-nav .nav-item-one a:visited {
    color:#3399ff;
  }

  body.index-page #hat ul#main-nav .nav-item-one a:hover,
  body.index-page #hat ul#main-nav .nav-item-one a:active {
    color:#3399ff;
    text-decoration:none;
  }
  
  /*  blog page on state */
  
  body.blog-page #hat ul#main-nav .nav-item-two a:link,
  body.blog-page #hat ul#main-nav .nav-item-two a:visited {
    color:#348d3a;
  }

  body.blog-page #hat ul#main-nav .nav-item-two a:hover,
  body.blog-page #hat ul#main-nav .nav-item-two a:active {
    color:#348d3a;
    text-decoration:none;
  }
  
/* ------------ Tag Line ------------ */
  
#header-tag-line {
  padding-top:2.5em;
}
  
  #header-tag-line h2 {
    font-size:270%;
    margin-bottom:.2em;
  }
    
  #header-tag-line h3 {
    font-size:138.5%;
    margin-bottom:0;
    color:#000;
  }

/* ------------ Content ------------ */
  
#content-wrap {
  background:#000;
}

#bd {
  color:#FFF;
  padding:44px 0;
}

  #bd h2 {
    font-size:182%;
  }
  
  #bd p {
    font-size:130.5%;
    line-height:150%;
  }
  
  #bd a:link,
  #bd a:visited {
    color:#3399ff;
  }

  #bd a:hover,
  #bd a:active {
    color:#66ccff;
  }
  
#bd.bd-index .yui-g img {
  margin:0 3.5em 2em 2em;
}

/* ------------ Footer ------------ */

#footer-wrap {
  background:#333;
}

  #footer {
    position:relative;
  }

  #footer p {
    color:#666;
    font-size:85%;
  }

  ul#footer-nav {
    margin:0 0 .5em;
    padding-top:1em;
    clear:right;
  }

  ul#footer-nav li {
   list-style-type:none;
   display:inline;   
  }

  ul#footer-nav li a {
   border-right:1px solid #666;
   padding-right:1em;
   margin-right:.6em;
  }

  ul#footer-nav li.last a {
   border-right:0px;
  }

  ul#footer-nav a:link,
  ul#footer-nav a:visited {
   color:#666;
   font-size:85%;
  }

  ul#footer-nav a:hover,
  ul#footer-nav a:active {
   text-decoration:none;
  }
  
  ul#footer-logos {
    margin:0;
    position:absolute;
    top:5px;
    right:0px;
  }
  
  ul#footer-logos li {
    list-style-type:none;
  }

.document-width {
  width:90%;
  min-width:250px;
  max-width:1365px;
  margin:auto;
  text-align:left;
}

/* ---------- Headers ----------- */

body,
body.background-blue {
  background:#1c61c6 url(/images/layout/backgrounds/bg_blue.jpg) center 81px no-repeat;
}

#header-wrap {
  background:transparent url(/images/layout/headers/header_water_repeat.png) repeat-x;
  position:relative;
}

#header,
body.monster-happy #header {
  background:transparent url(/images/layout/headers/header_monster_happy.png) no-repeat;
  height:354px;
}

body.error-page,
body.background-red {
  background:#c30000 url(/images/layout/backgrounds/bg_red.jpg) center 81px no-repeat;
}

body.blog-page,
body.background-green {
  background:#348d3a url(/images/layout/backgrounds/bg_green.jpg) center 81px no-repeat;
}

body.blog-page #header,
body.error-page #header,
body.monster-uh-oh #header {
  background:transparent url(/images/layout/headers/header_monster_uh_oh.png) no-repeat;
}

/* ----------- non-secret-link --------*/

#secret-link {
   width: 100px;
   height: 100px;
   display: block;
   position: absolute;
   right: 30px;
   bottom: 0px;
   z-index:30;
}
  

/* ----------- wave ------------ */

#header .wave {
  position:absolute;
  right:0px;
  bottom:0px;
}

#header #wave {
  background:url(/images/layout/headers/header_wave.png) no-repeat;
  width:214px;
  height:150px;
  z-index:20;
}

#header #wave-bg {
  background:url(/images/layout/backgrounds/bg_blue.jpg) bottom right no-repeat;
  width:95px;
  height:150px;
  float:right;
  z-index:10;
}

body.error-page #header #wave-bg {
  background:url(/images/layout/backgrounds/bg_red.jpg) bottom right no-repeat;  
}

body.blog-page #header #wave-bg {
  background:url(/images/layout/backgrounds/bg_green.jpg) bottom right no-repeat;  
}

/* ------------ Blog ------------ */

.blog-page #bd #sidebar {
  border-left:1px solid #333;
  padding:0 0 2em 3em;
}

.blog-page #bd #sidebar ul li {
  margin-bottom:1em;
}

#disqus_thread {
  margin-top:3em;
}

/* ------------ Reusable Classes ------------ */

.float-left {
  float:left;
}

.float-right {
  float:right;
}

.strike {
  text-decoration:line-through;
}

.center {
  text-align:center;
}

/* ------------------- facebox ------------- */

#facebox div.content {
  text-align:center;
}