/*
  =modules --------------------------------------------------------------------------------------------------------------
  NOTE:       Flirting with a CSS Object Orientated approach; use classes to define the styles rather than page-based 
              cascades. This helps ensure that "widgets" and things can be used on ANY page and still look correct.
              I have a number of reservations with the "full" approach though, hence this watered down version.
  REFERENCE:  http://wiki.github.com/stubbornella/oocss/faq
  ----------------------------------------------------------------------------------------------------------------------- */
  
/*
  =ol */
  html.details #install ol {
    margin-left : 0; list-style-position : outside; margin-top : 19px; 
    counter-reset: item 0; }
   
/*
  =li */
  html.details #install ol > li {
    position : relative;
    display : block; margin-bottom : 19px; padding-top : 58px; border-top : 1px dashed #999; }
  html.details #install ol > li:before {
    position : absolute; left : 50%; top : 9px;
    content: counters(item, "."); counter-increment: item 1; display : block; width : 32px; height : 32px; margin-left : -16px;
    font-size : 32px; color : #ccc; background-color : rgba(255,255,255,.1); border-radius : 50%; text-align : center; line-height : 32px; }

/*
  website header */
  #site_context .title {
    margin-bottom : 42px; border-bottom : 0; padding-top : 17px; }
  #site_context .rationale {
    
    margin-top : -52px; margin-bottom : 26px; }

/*
  website footer */
  .container.footer {
    margin-top : 20px; }
  .footer .content {
    overflow : hidden; }
  .footer .content h2 {
    margin : 27px 0 21px; }
  .footer .content p {
    float : left;
    width : 21%; margin : 0 0 0 4%; font-size : 14px; line-height : 17px; }
  .footer .content h2 + p {
    margin-left : 0; }

/*
  =pages ----------------------------------------------------------------------------------------------------------------
         NOTE: Styling for specific pages of the site
  ----------------------------------------------------------------------------------------------------------------------- */

/* homepage
  ----------------------------------------------------------------------------------------------------------------------- */
  body.home #the-sell {
    padding-bottom : 19px; border-bottom : 1px solid #fff; margin-bottom : 6px;
    -moz-column-count : 2; -moz-column-gap : 3em;
    -webkit-column-count : 2; -webkit-column-gap : 3em;
    -o-column-count : 2; -o-column-gap : 3em;
    -ms-column-count : 2; -ms-column-gap : 3em;
    column-count : 2; column-gap : 3em; }
  body.home #the-sell p + p {
    margin-top : 0; }
  body.home #features,
  body.home #basic-instructions {
    float : left;
    width : 30%; margin-right : 5%; margin-bottom : 0; }
  body.home #requirements {
    float : left; clear : none;
    width : 30%; margin-right : 0; margin-bottom : 0; }

  body.home #features h2,
  body.home #basic-instructions h2,
  body.home #requirements h2 {
    border-top : 0; padding-top : 0; margin-top : 37px; margin-bottom : 15px; }

  body.home .gallery li a {
    width : 21%; margin-left : 5.3333333%; }
  body.home .gallery li:nth-child(2n-1) a {
    margin-left : 5.3333333%; }
  body.home .gallery li:nth-child(3n-2) a {
    margin-left : 5.3333333%; }
  body.home .gallery li:nth-child(4n-3) a {
    margin-left : 0; }

  body.home .image_main {
    position : relative; }
  body.home .image_main .meta {
    position : absolute; bottom : 6px; left : 0; right : 0; display : block;
    padding : 0 1em; margin : 0;
    line-height : 26px; font-size : 14px; opacity : .7; background-color : rgba(0,0,0,.8); }
  body.home .image_main p.credit {
    float : left;
    width : 50%; }
  body.home .image_main p.original {
    float: right;
    width : 50%; margin : 0;
    text-align : right; }

  body.home .details ul li i {
    font-size : 64px; line-height : 52px; }
  body.home .details ul li span.size {
    display : block; }
  body.home .details ul li span.dimensions {
    display : block; }

  body.home .details ul li strong {
    display : block; }
  body.home .details li img {
    display : none; }
  body.home .details ul li i {
    font-size : 64px; line-height : 52px; }
  body.home .details ul li span {
    display : block; }

  body.home #issues {
    overflow : hidden; }
  body.home #notes {
    float : left;
    width : 47%; margin-right : 6%; }
  body.home #limitations {
    float : left;
    width : 47%; }

  body.home #issues h2 {
    border-top : 0; margin-top : 0; }
  body.home #hat-tip {
    overflow : hidden; }
  body.home #how {
    float : left;
    width : 35.5465587%; margin-right : 2.8340081%; }
  body.home #why {
    float : left;
    width : 61.6194332%; }
    
/* details
  ----------------------------------------------------------------------------------------------------------------------- */
  html.details .content.intro > p {
    padding-right : 35.5%;
    font-size : 22px; }
  html.details #how-it-works {
    float : left; width : 64.5%; padding-bottom : 20px; }
  html.details #install {
    float : right; width : 30%; }
  html.details .container.second .content #install h2 {
    border-top : 0; margin-top : 0; }
  
  html.details #customise {
    overflow : hidden; }
  html.details #customise > div {
    float : left;
    width : 30%; margin-left : 5.5%; }
  html.details #customise > div.php {
    width : 64.5%; margin-left : 0; }
  
  html.details #customise h2 {
    margin-top : 0; }
  html.details #customise .js h3 {
    border-top : 1px solid #fff; margin-top : 19px; padding-top : 32px; }
  html.details div.php > ul {
    margin-left : 0; margin-top : 52px; margin-bottom : 19px; overflow : hidden; }
  html.details div.php > ul > li {
    display : inline-block; width : 47.5%; margin-right : 5%;
    vertical-align : top; }
  html.details div.php > ul > li:nth-child(2n) {
    margin-right : 0; }

  html.details div.htaccess {
    padding-bottom : 26px; }
  html.details div.js {
    padding-bottom : 26px; }
  html.details #limitations h2 {
    border-top : 0; padding-top : 0; }

  html.details .container.fourth .content {
    border-top : 1px solid #fff; margin-top : 18px; padding-top : 44px; padding-bottom : 25px; }
  html.details .container.fourth h2 {
    border-top : 0; margin-top : 0; margin-bottom : 15px; }
  html.details .container.fourth #future h2 {
    border-top : 1px solid #fff; margin-top : 44px; }