/*************************** <A FEW RESET STYLES> **************************/
* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  outline: none;
}

html, body,
header, footer,
article, section,
aside, nav, a, ol,
ul, li, h1, h2, 
h3, h4, h5, h6,
code, pre, th, 
td, table, figure, 
caption, legend {
  padding: 0;
  margin: 0;
}

header, footer,
article, section,
aside, nav {
  display: block;
}

abbr { border-bottom: none; }

/*************************** </A FEW RESET STYLES> **************************/

body {
  font-family: Verdana, sans-serif;
  background: #CECECE url(/images/background.png) repeat scroll 0 0;
}


  body a {
    color: #3B5B81;
  }

  body a:visited,
  body a:hover {
    color: #5c2a0d;
  }

/******************************* <PAGE HEADER> ******************************/
body > header {
  position: relative;
  height: 150px;
  border:1px solid transparent; /* weird webkit bug hack */
  background: transparent url(/images/header.png) repeat-x scroll 0 0;
  margin-bottom: 10px;
}
  body > header > * {
    position: absolute;
  }

  body > header > h1 {
    background: transparent url(/images/title.png) no-repeat;
    text-indent: -9001px;
    display: block;
    width: 189px;
    height: 52px;
    left: 100px;
    top: 20px;
  }


    body > header > h1 a {
      display:block;
      width:189px;
      height:52px;
      z-index: 100;
    }


  body > header > a {
    right: -1px;
    top: -1px;
  }


    body > header > a > img {
      border: 0;
    }


  body > header aside {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 1.1em;
    z-index: 1;
    top: 60px;
    left: 3em;
    padding-left: 135px;
    color: #606060;
  }


    body > header aside b {
      font-weight: normal;
      color: #262626;
    }


  body > header nav {
    font-family: "Lucida Grande";
    font-size: 0.8em;
    left: 100px;
    top: 106px;
  }
  
  body > header > form {
    right: 30px;
    bottom: 16px;
  }
  
    body > header > form input {
      width: 180px;
      opacity: 0.6;
    }
    
    body > header > form input:hover,
    body > header > form input:active,
    body > header > form input:focus {
      opacity: 0.8;
    }

  body > header nav li {
    list-style: none;
    display: inline-block;
    float:left;
  }

  body > header nav li a,
  body > header nav li a:visited {
    z-index: 10;
    margin-top: 1px;
    position:relative;
    display:block;  
    text-decoration: none;
    color:#292929;
    height: 25px;
    line-height: 25px;
    padding: 0 1.5em 0 1.5em;
    text-shadow: 0 1px 1px #D2D2D2;
    border: 1px solid #585858;
    border-top: none;
    margin-right:-1px;
    -webkit-border-bottom-right-radius: 6px;
    -webkit-border-bottom-left-radius: 6px;
    -moz-border-radius-bottomright: 6px;
    -moz-border-radius-bottomleft: 6px;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
  }

  body > header nav li a:hover {
    background-color: #999;
    z-index: 50;
  }


  body > header nav li a[rel~=current] {
    z-index: 100;
    margin-top: 0;
    background-color:#b8b8b8;
    border: 1px solid black;
    border-top: none;
    height: 26px;
    line-height: 26px;
    color: #000;
    text-shadow: none;
  }


/******************************* </PAGE HEADER> *******************************/

/******************************* <PAGE SIDEBAR> *******************************/

body > details {
  font-family: Helvetica, sans-serif;
  display:block;
  position: absolute;
  width: 280px;
  left: 720px;
  font-size: 90%;
}

  body > details > img,
  body > details > p {
    color: #eee;
    text-shadow: 0 1px 0 #4f4f4f;
    float: left;
    clear: right;
    margin: 0;

    max-width: 70%;
  }
  
  body > details > p > a {
    text-shadow: 0 1px 0 #fff;
    text-decoration: none;
  }

  body > details > img {
    background-color: #cecece;
    padding: 5px;
    float: left;
    margin-right: 10px;
  }

  body > details > p {
    padding: 2px;
    margin-top: 10px;
  }
  
  body > details > p:first-of-type {
    margin-top: 0;
  }
  
  body > details > p:last-of-type {
    max-width: 100%;
  }


  body > details > ul {
    clear:both;
  }


    body > details ul li {
      margin-top: 0;
      list-style: none;
      clear:both;
      display:block;
      margin-bottom: 2px;
    }


      body > details li a,
      body > details li a:visited {
        color: #5c2a0d;
        text-decoration: none;
        border-bottom: 1px dotted black;
      }


/******************************* </PAGE SIDEBAR> *******************************/

/******************************* <MAIN CONTENT> ********************************/
body > article {
  border: 1px solid #5F5F5F;
  position: relative;
  text-align:justify;
  background-color: rgba(246, 244, 243, 0.6);

}

  body > article > header ul li {
    list-style:none;
    display: inline;
  }

  body > article > aside {
    position: absolute;
    width: 70px;
    height: 70px;
    left: -71px;
    top: -1px;
    color: white;
    background-color: #5c2a0d;
  }

    body > article > aside time a {
      position: relative;
      text-decoration: none;
      color: white !important;
      display:block;
      width: 70px;
      height: 70px;
      font-size: 30px;
      text-align: center;
      line-height:75px;
    }


    body > article > aside time a * {
      line-height:1.2em;
    }

    body > article > aside time abbr,
    body > article > aside time sup,
    body > article > aside time sub{
      position: absolute;
    } 


    body > article > aside time abbr{
      top: 3px;
      font-size: 15px;
    }


    body > article > aside time abbr:first-child {
      left: 8px;
    }


    body > article > aside time sup+abbr {
      right: 8px;
    }


    body > article > aside time sup {
      font-size: 12px;
      top: 20px;
    }


    body > article > aside time sub {
      font-size: 11px;
      left:0;
      bottom: 3px;
      width:100%;
    }

  body > article h1,
  body > article h2,
  body > article h3,
  body > article h4,
  body > article h5,
  body > article h6,
  body > article h1 a,
  body > article h2 a,
  body > article h3 a,
  body > article h4 a,
  body > article h5 a,
  body > article h6 a {
    color: #5c2a0d;
    text-decoration: none;
    line-height: 1.2em;
    text-align: left;
    margin-bottom: 10px;
  }

  body > article > section > p:first-of-type {
    padding-top: 0;
    margin-top: 0;
  }

  body > article > section > p:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
  }

  body > article blockquote {
    border-left: 2px dotted #541B07;
    padding-left: 1em;
  }


  body > article img {
    box-sizing: content-box;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    -ms-box-sizing: content-box;
    max-width: 100%;
  }


  body > article ol, 
  body > article ul {
    padding-left: 20px;
    margin-bottom: 20px;
  }


    body > article ol figure, 
    body > article ul figure{
      margin-left: -70px;
    }


  /**************************** <CODE FORMATTING> ****************************/
  body > article p > code {
    padding: 4px;
  }
  
  body > article > section pre {
    font-size: 12px;
    line-height: 16px;
    counter-reset: line;
    background: #333 !important;
    color: white;
    margin-left: -20px;
    margin-right: -20px;
    padding: 1em 0 1em 20px;
    white-space: pre;
    word-wrap: normal;
    overflow-x: auto;
  }
  
    body > article > section pre > code:before
    {
      background: #555;
      border-right: 1px solid black;
      color: #ccc;
      content: counters(line, "");
      counter-increment: line;
      display: inline-block;
      margin: 0 20px 0 -55px;
      padding-right: 7px;
      position: absolute;
      text-align: right;
      width: 27px;

    }
    
    body > article > section pre > code:first-child:before {
      -webkit-border-top-left-radius: 10px;
      -moz-border-radius-topleft: 10px;
      padding-top: 1em;
      margin-top: -1em;
    }
    body > article > section pre > code:last-child:before {
      -webkit-border-bottom-left-radius: 10px;
      -moz-border-radius-bottomleft: 10px;
      padding-bottom: 1em;
    }

    /*************************** </CODE FORMATTING> ****************************/

  /******************************** <COMMENTS> ********************************/
  body > article:only-of-type > aside ~ section:last-of-type {
    margin-top:40px;
  }


    body > article:only-of-type > aside ~ section:last-of-type ol:first-of-type {
      border-top: 1px dotted #4B4B4B;
      margin-top:20px;
      list-style: none;
      width: 598px;
      margin-left: -20px;
      padding-left: 0;
      margin-bottom: 20px;
    }


      body > article:only-of-type > aside ~ section:last-of-type ol:first-of-type li {
        border-bottom: 1px dotted #4B4B4B;
        padding: 20px;
      }


      body > article:only-of-type > aside ~ section:last-of-type ol:first-of-type li p {
        margin-bottom: 0;
      }


        body > article:only-of-type > aside ~ section:last-of-type ol:first-of-type li h3,
        body > article:only-of-type > aside ~ section:last-of-type ol:first-of-type li h3 a {
          color: inherit;
          font-size: 14px;
        }


        body > article:only-of-type > aside ~ section:last-of-type ol:first-of-type li h3 a {
          display: inline-block;
          padding-left: 15px;
          background: transparent url(/images/openid_icon.png) no-repeat 0 3px;
        }


        body > article:only-of-type > aside ~ section:last-of-type ol:first-of-type li time {
          font-size: 11px;
        }


      body > article:only-of-type > aside ~ section:last-of-type ol:first-of-type li:nth-of-type(2n+1) {
        background-color:#C5C5C5;
      }


        body > article:only-of-type > aside ~ section:last-of-type ol:first-of-type li figure {
          margin-left: -50px;
          opacity:0.8;
        }


          body > article:only-of-type > aside ~ section:last-of-type ol:first-of-type li figure caption {
            color: #000;
          }


    body > article:only-of-type > aside ~ section:last-of-type textarea {
      width: 100%;
    }

  /******************************** </COMMENTS> ********************************/


  body > article.archives ol {
    margin-bottom:15px;
  }


  body > article.archives ul {
    -moz-column-count: 2;
    -moz-column-gap: 20px;
    -webkit-column-count: 2;
    -webkit-column-gap: 20px;
    column-count: 2;
    column-gap: 20px;
  }


  body > article.archives ol li,
  body > article.archives ul li {
    list-style: none;
    margin-bottom:10px;
  }


/******************************* </MAIN CONTENT> *******************************/


body > article,
body > footer {
  font-family: "Lucida Grande";
  margin-left:100px;
  width: 600px;
  margin-bottom: 2em;
  padding: 20px;
  line-height:1.6em;
  font-size: 85%;
  color:#1C1C1C;
}


body > footer {
  text-align:center;
  font-size: 70%;
  line-height:1.2em;
}