/*
  =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
  ----------------------------------------------------------------------------------------------------------------------- */

/*
  website header */
#site_context .title,
#site_context .rationale {
  text-align : left; }

/*
  navigation */
  .container.nav {
    position : absolute; top : 33px; left : 0;
    width : 100%; }
  .container.nav ul {
    max-width : auto;
    text-align : left; }
  .container.nav ul li:last-child {
    position : absolute; right : 0;
    border : 0; margin-left : 0; padding : 0 10px; border-radius : 9px;
    background : #99BB99; color : #fff; }
  .container.nav ul li:last-child a {
    color : #fff; }

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

/* homepage
  ----------------------------------------------------------------------------------------------------------------------- */
  body.home div.video {
    margin-bottom : 2em; }
  body.home #features {
    float : left;
    width : 47%; margin-right : 6%; margin-bottom : 45px; }
  body.home #basic-instructions {
    float : left;
    width : 47%; margin-bottom : 45px; }
  
  body.home #requirements {
    clear : both; }

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

  body.home .details ul li i {
    font-size : 32px; line-height : 19px; }

/* download
  ----------------------------------------------------------------------------------------------------------------------- */
  html.download p.download {
    text-align : left; }