/*----------------------------------------------------------
Layout

author:     Andrew Le
email:      hello@alchemistcreative.com
website:    http://alchemistcreative.com/
client:     http://onetwentyonesb.com/
----------------------------------------------------------*/

/* Basics
----------------------------------------------------------*/
body { 
  text-align: center; /* IE Fix */
  margin:36px 0;
  background: url(../images/bg-texture.jpg) repeat-x top left;
  background-color: #f2ebdd;
}

.container {
  text-align: left;
  position: relative;
  padding: 0;
  margin: 0 auto;   /* Centers layout */
  width: 700px;     /* Total width */
}

/* Primary sections
----------------------------------------------------------*/
#header, #main, #footer {
    width: 700px;
    padding: 5px 0;
}

#header {
    background-color: #00453e;
    padding-bottom: 0;
}

#main {
    position: relative;
    background-color: #fff;
    padding: 0;
}

#footer {
    background-color: #00453e;
    padding: 1em 0;
}

/* Secondary sections
----------------------------------------------------------*/
.column {
  float: left;
  margin: 0 10px;
  padding: 5px;
}
* html .column { overflow-x: hidden; } /* IE6 fix */

#main #content {
    display: inline; /* Fixes IE double floated margin bug */
    width: 450px;
    min-height: 250px;
    margin: 265px 10px 0 10px;
    padding-bottom: 2em;
}

#main #sidebar {
    display: inline;
    background-color: #eee;
    float: right;
    width: 200px;
    margin: 265px 0 0 0;
    padding: 5px 0 5px 10px;
}

#main #photo {
    position: absolute;
    width: 770px;
    background: url(../images/drop-shadow.png) no-repeat left top;
    padding-left: 5px;
    top: 0px;
    left: -34px;
}
* html #main #photo { background: none; } /* :HACK: Star html hack targets IE6 and below only */

#photo a p {
    display: block;
    position: absolute;
    background-color: #e8ded2;
    bottom: -17px;
    right: 10px;
    width: 175px;
    line-height: 1.3em;
    z-index: 3;
}

#photo a p:hover {
    background-color: #f1ebdd;
}

.navigation {
    margin-top: 1em;
    list-style: none;
}

/* Navigation
----------------------------------------------------------*/
.navigation li {
    float: right;
    margin-bottom: 0;
}

.navigation li a {
    display: block;
    line-height: 3em;
    padding: 0 7px;
}

/* Clearing floats without extra markup
   Based on How To Clear Floats Without Structural Markup by PiE
   [http://www.positioniseverything.net/easyclearing.html]
----------------------------------------------------------*/

.clear { display: inline-block; }   
.clear:after, .container:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
* html .clear { height: 1%; }
.clear { display: block; }