/*
* ColorLabs Responsive Layout Framework for Modernizm
* Copyright 2011, ColorLabs
* www.colorlabsproject.com
* Based on Skeleton and 978.gs
*/

/* #Base 978 Grid
================================================== */
  .container            { position: relative; padding: 0 15px; }
  .row                  { margin:0 auto; max-width:978px; min-width:420px; width:100% }

  /* Columns */
  .column, .columns     { float: left; display: inline; min-height:1px; position:relative }
  .column               { margin-left:3.08% }
  .column.one-third,
  .column:first-child,
  .column.alpha         { margin-left:0 }
  .column.alpha         { clear:left }

  /* Grid */
  .col1                 { width:5.5% }
  .col2                 { width:14.1% }
  .col3                 { width:22.69% }
  .col4                 { width:31.08% }
  .col5                 { width:39.87% }
  .col6                 { width:48.46% }
  .col7                 { width:57% }
  .col8                 { width:65.6% }
  .col9                 { width:74% }
  .col10                { width:82.8% }
  .col11                { width:91.4% }
  .col12                { width:100% }  
  .one-third            { width:33.3% }

  /* Flexible images */
  .column > img         { max-width:100%; height:auto; display:block }

/*  #Mobile (Portrait)
================================================== */
  
  @media only screen and (max-width: 767px) {
    .container        { padding:0 30px }
    .row > .column		{ border:none; margin-left:0 }
    .row              { margin:0 auto; max-width:767px; min-width:0; width:100% }

    .row  > .col1, .row > .col2, .row > .col3, .row > .col4, .row > .col5, .row > .col6,
    .row > .col7, .row > .col8, .row > .col9, .row > .col9, .row > .col10, .row > .col11, .row > .col12 { width: 100%; }    
  }

/*  #Mobile (Landscape)
================================================== */
  
  /*@media only screen and (min-width: 480px) and (max-width: 767px) {
    .row    { max-width:767px; min-width:480px }

    .columns.col1, .columns.col2, .columns.col3, .columns.col4,
    .columns.col5, .columns.col6, .columns.col7, .columns.col8,
    .columns.col9, .columns.col10, .columns.col11, .columns.col12 { width:420px }
    
  }*/

/* #Clearing
================================================== */

    .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }

    /* Use clearfix class on parent to clear nested columns,
    or wrap each row of columns in a <div class="row"> */
    .clearfix:before,
    .clearfix:after,
    .row:before,
    .row:after,
    .widget:before,
    .widget:after {
      content: '\0020';
      display: block;
      overflow: hidden;
      visibility: hidden;
      width: 0;
      height: 0; }
    .row:after,
    .clearfix:after,
    .widget:after {
      clear: both; }
    .row,
    .clearfix,
    .widget {
      zoom: 1; }

    /* You can also use a <br class="clear" /> to clear columns */
    .clear {
      clear: both;
      display: block;
      overflow: hidden;
      visibility: hidden;
      width: 0;
      height: 0;
    }

/* #Class Helper
================================================== */
  
  /* Floating */
  .fl, .fr { display:inline }
  .fl { float:left }
  .fr { float:right }

  /* Aligning */
  .align-center { text-align:center }

/* #Reset (Inspired by E. Meyers)
================================================== */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }