/**GENERAL**/

* { /* global whitespace reset */
    margin:0;
    padding:0;
  }
  html {
      height: 100%; /* needed for the footer positioning */
    }
    body {
        font: 75%/1.5 Georgia, "Times New Roman", serif; /*set font-size to 12px*/ 
        height: 100%; /* needed for the footer positioning */
      }
      a { /*links*/
          color: #875B40;
          text-decoration: none;
        }
      a:visited {
        }
      a:hover {
          text-decoration: underline;
        }

#wrapper { /* wrapper - needed for the background and footer */
  background: url(../images/grid.png);
  background: #fff;
  margin: 0 auto -1.5em; /*negative margin-bottom on foot to give room for the footer */
  width: 81em;
  min-height: 100%;
  overflow: auto;
}

/**HEADER**/
#head {
    height: 120px;
    border-bottom: .5em #211D1A solid;
    background: url(../images/The_OutsiderBG2.jpg) no-repeat top right;
    position: relative;
    overflow: hidden;
  }
  #branding {
      text-align: center;
      width: 54em;
      overflow: auto;
    }
    #branding dt {
        font: 3em/1.5 "Trebuchet MS", Arial, Helvetica, sans-serif;
        text-align: left;
        width: 11em;
        margin: 0 .5em;
        display: block;
        float: left;  
      }
      #branding dt a,
      #branding dt a:visited,
      #branding dt a:hover {
          color: darkgrey;
        }
    #branding dd {
        font: 1em/4.5 "Trebuchet MS", Arial, Helvetica, sans-serif;
        float: left;
        width: 18em;
      }
  #head h1 {
      color: #875B40;
      font: 5em/.833 Georgia, "Times New Roman", serif;
      text-align: center;
      text-transform: lowercase;
      width: 10.8em;
      display: block; 
      clear: both;
    }

/**MAIN  CONTENT**/
#content { /*container*/
    float: left;
    margin: 0 -31.5em 0 0;
    padding: 0;
    width: 54em;
    position: relative;
    /*overflow: auto; 
    border-right: 31.5em solid #211D1A;  */
  }  
  #content h2 {
      color: #875B40;
      font: 1.5em/1 "Trebuchet MS", Arial, Helvetica, sans-serif;
      text-align: center;
      margin: 2em 1em 1em 7em;
      width: 28em;
    }
  #content p { /*paragraphs*/
      font: 1.25em/1.2 Georgia, "Times New Roman", serif;
      width: 33.6em;
      padding: 0 1.2em 0 0;
      float: right;
      margin-left: -7.8em;
      position: relative;
    }
  #content p+p {
      text-indent: 2.4em;
      margin: 0;
    }
  .newsmeta { /*'read more' links etc*/
      list-style: none;
      text-align: right;
      clear: both;
      margin: 0 .75em 0 0;
    }
    .newsmeta li {
        font: .75em/2 Verdana, Helvetica, Arial, sans-serif;
        display: inline;
      }
    .newsmeta li + li {
        margin: 0 0 0 1em;
      }
  #content .in_gutter { /*author, posted, updated etc*/
      font: .6em/2 Verdana, Helvetica, Arial, sans-serif;
      width: 10em;
      float: left;
      clear: left;
      margin: 0 0 0 1em;
      padding: 1em;
    }
    #content .in_gutter * {        
        width: 10em;
      }
    #content .in_gutter p {
        width: 10em;
        margin: .75em 0 0;
        padding: 0;
        
      }
    #content .in_gutter p + p { 
        text-indent: 0em;
        margin: 2em 0 0 0;     
      }
    #content p span.in_gutter  {
        text-indent: 0em;
        display: block;
        padding: 0  1em;
        position: absolute;
        left: -14em;
      }
  
  #content .posted_by { /*author, posted, updated etc*/
      font: .75em/2 Verdana, Helvetica, Arial, sans-serif;
      width: 36em;
      height: 12em;
      background: #FDCD83;
      position: absolute;
      right: -36em;
      top: 0;
    }
    #content .posted_by * { 
        float: left;
        width: 10em;
        height: 10em;
        margin: 1em;
        text-indent: 0;
        padding:0;
      }
    #content .posted_by p {
        font-size:1.333em;
        line-height: 1.5;
        width: 7.5em;
        height: 7.5em;
        margin: .75em;
      }
/** SIDEBAR **/
#sidebar {
    background: #211D1A; 
    width: 27em;
    margin: 9em 0 0 0;
    float: right;
    overflow: auto;
    height: 100%;
    display: table;
  }
  .crumbs {
      width: 27em;
      list-style: none;
      text-indent: .75em;
      margin: .75em 0;
    }
    .crumbs li {
        color: #FDCD83;
        font: .75em/2 Verdana, Helvetica, Arial, sans-serif;
        display: inline;
      }
  #sidebar h3 {
      color: #FDCD83;
      font: 1.5em/1.5 Georgia, "Times New Roman", serif;
      letter-spacing: -0.01em;
      text-indent: 1em;
      text-transform: lowercase;
      width: 7.5em;
      display: block;
      margin-bottom: .5em;
    }
  .related {
      margin: 0 .75em 1.5em;
      width: 12em;
      overflow: hidden;
      float: left;
    }
    .related dd {
        color: #875B40; 
        font: 1.25em/1.2 Georgia, "Times New Roman", serif;
        text-indent: 1.2em;
      }
  
/** NAVIGATION **/
  .nav { /*containers*/
      width: 7.5em;
      float: left;
      margin: 0 .75em 1.5em .75em;
    }
    .nav dt,
    .related dt { /* sections */  
          font: 1.5em/1.5 Georgia, "Times New Roman", serif;
          letter-spacing: -0.01em;
          text-indent: 0;
          text-transform: lowercase;
          margin: .5em 0 0;
        }
    .nav dd { /*pages*/
        font: .75em/2 Verdana, Helvetica, Arial, sans-serif;
        letter-spacing: .02em;
        text-indent: 2em;
        text-transform: uppercase;
      }

/** RELATED POST LIST **/



/** FOOTER ***/
#foot {
    font: .75em/2 Verdana, Helvetica, Arial, sans-serif;
    text-align: center;
    margin: -2em auto 0;
    width: 98em;
  }
  #foot address {
      display: inline;
    }