/*
  =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
  ----------------------------------------------------------------------------------------------------------------------- */
  .container .content {
    max-width : 1400px; margin-left : auto; margin-right : auto; }
  .container.footer {
    margin-top : 19px; }

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

/* homepage
  ----------------------------------------------------------------------------------------------------------------------- */
body.home #site_context .title,
body.home #site_context .rationale {
  text-align: center;
}
body.home div.video {
  position: relative; right: auto; margin: 0 auto 3em;
  width: 50%; max-height: none; max-width: none; }
body.home #the-sell {
  float : left;
  -moz-column-count : 1; -webkit-column-count : 1; -o-column-count : 1; -ms-column-count : 1; column-count : 1;
  width : 30%; padding-right : 0; padding-bottom : 0; border-bottom : 0; margin-bottom : 1px; }

body.home #features,
body.home #basic-instructions,
body.home #requirements {
  float: left;
  width : 18.3%; margin-right : 0; margin-left : 5%; }

body.home .container.second {
  margin-bottom : 26px;
  background : url(../images/gallery-bg-top.png) top left repeat-x,
               url(../images/gallery-bg-bottom.png) bottom left repeat-x,
               url(../images/gallery-bg.jpg) 50% 50%; }
body.home #example h2 {
  border-top : 0; padding-top : 19px; }
body.home #example {
  border-bottom : 0; padding-bottom : 20px; }

body.home #example .details li img {
  float : left;
  display : block; width : 44%; margin-right : 0; }
body.home #example .details li p {
  float : right; width : 44%; }
body.home #example .details li i {
  font-size : 52px; }
body.home .details ul li span.dimensions {
  font-size : 16px; }

body.home #hat-tip {
  margin-bottom  :45px; }
body.home #hat-tip h2 {
  border-top : 0; margin-top : 0; }
body.home #hat-tip > p {
  padding-right : 64.4534%; margin-bottom : 26px;
  font-size : 22px; color : #fff; }

body.home #why {
  /* weirdly, mozilla no longer seems to support -moz-column-span:all; and therefor I can't give it multi-columns */
  -webkit-column-count : 2; -webkit-column-gap : 30px;
  -ms-column-count : 2; -ms-column-gap : 30px;
  -o-column-count : 2; -o-column-gap : 30px;
  column-count : 2; column-gap : 30px; }
body.home #why h3 {
  -webkit-column-span : all;
  -ms-column-span : all;
  -o-column-span : all;
  column-span : all; }

/* details
  ----------------------------------------------------------------------------------------------------------------------- */
  html.details #how-it-works {
    float : none; width : auto; padding-bottom : 20px;
    overflow : hidden; }
  html.details #install {
    float : none; width : auto; }
  html.details .container.second .content #install h2 {
    border-top : 0; margin-top : 0; }

  html.details .container.second .content #how-it-works h2 {
    margin-top : 26px; }

  html.details #how-it-works .group_1,
  html.details #how-it-works .group_2,
  html.details #how-it-works .group_3 {
    float : left;
    width : 30%;  }
  html.details #how-it-works .group_2 {
    margin-left : 5%; margin-right : 5%; }
  
  html.details #how-it-works .group_3 li {
    margin-bottom : 26px; }

  html.details .container.second .content #install h2 {
    border-top : 1px solid #fff; margin-top : -1px; }

  html.details #install > p {
    padding-right : 52%; margin-bottom : 45px;
    font-size : 22px; }
  html.details #install ol {
    overflow : hidden; }
  html.details #install ol > li {
    position : relative; float : left;
    display : block; width : 22%; margin-left : 4%; margin-bottom : 19px; padding-top : 85px; border-top : 0; }
  html.details #install ol > li:first-child {
    margin-left : 0; }
  html.details #install ol > li:before {
    position : absolute; left : 50%; top : 7px;
    content: counters(item, "."); counter-increment: item 1; display : block; width : 64px; height : 64px; margin-left : -32px;
    font-size : 64px; color : #ccc; background-color : rgba(255,255,255,.1); border-radius : 50%; text-align : center; line-height : 64px; }

  html.details #customise > p {
    border-bottom : 1px dashed #777; padding-bottom : 19px; margin-bottom : 58px;
    font-size : 22px; color : #fff; }
  html.details #customise h3 {
    margin-top : 0; }
  html.details #customise ol li {
    float : left;
    width : 45%; margin-left : 10%;}
  html.details #customise ol li:nth-child(2n -1) {
    margin-left : 0;  }

  html.details .container.fourth {
    overflow : hidden; }
  html.details div.htaccess,
  html.details div#limitations {
    float : left;
    width : 64.5%; }
  html.details div.js,
  html.details #future {
    float : right;
    width : 30%; }
  html.details #future h2,
  html.details .container.fourth #future h2 {
    border-top : 0; padding-top : 0; margin-top : 0; }
  html.details #customise .htaccess h3,
  html.details #customise .js h3 {
    margin-top : 0; }
  html.details div.htaccess {
    padding-bottom : 45px; }