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

/* #Base 978 Grid
================================================== */

	.container                                  { position: relative; width: 1008px; margin: 0 auto; padding: 0; }
	.column, .columns                           { float: left; display: inline; }
	.column                                     { padding:0 15px }

	/* Nested Column Classes */
	.column.alpha								{ padding-left: 0; }
	.column.omega								{ padding-right: 0; }

	/* Base Grid */
	.col1                       { width: 54px;  }
	.col2 							        { width: 138px; }
	.col3 							        { width: 222px; }
	.col4 							        { width: 306px; }
	.col5 							        { width: 390px; }
	.col6 							        { width: 474px; }
	.col7 							        { width: 558px; }
	.col8 							        { width: 642px; }
	.col9 							        { width: 726px; }
	.col10 							        { width: 810px; }
	.col11 							        { width: 894px; }
	.col12 							        { width: 978px; }

  /* Nested Grid */
  .columns.col1               { width:84px }
  .columns.col2               { width:166px }
  .columns.col3               { width:252px }
  .columns.col4               { width:336px }
  .columns.col5               { width:420px }
  .columns.col6               { width:504px }
  .columns.col7               { width:588px }
  .columns.col8               { width:672px }
  .columns.col9               { width:756px }
  .columns.col10              { width:840px }
  .columns.col11              { width:924px }
  .columns.col12              { width:1008px }


/* #Tablet (Portrait)
================================================== */

  @media only screen and (min-width: 768px) and (max-width: 959px) {
    .container                  { width:768px }

    /* Base Grid */
    .col1                       { width: 34px; }
    .col2                       { width: 98px; }
    .col3                       { width: 162px; }
    .col4                       { width: 226px; }
    .col5                       { width: 290px; }
    .col6                       { width: 354px; }
    .col7                       { width: 418px; }
    .col8                       { width: 482px; }
    .col9                       { width: 546px; }
    .col10                      { width: 610px; }
    .col11                      { width: 674px; }
    .col12                      { width: 738px; }

    /* Parent Grid */
    .columns.col1               { width:64px }
    .columns.col2               { width:127px }
    .columns.col3               { width:192px }
    .columns.col4               { width:256px }
    .columns.col5               { width:320px }
    .columns.col6               { width:384px }
    .columns.col7               { width:448px }
    .columns.col8               { width:512px }
    .columns.col9               { width:576px }
    .columns.col10              { width:640px }
    .columns.col11              { width:704px }
    .columns.col12              { width:768px }
  }

/*  #Mobile (Portrait)
================================================== */
  
  @media only screen and (max-width: 767px) {
    .container        { width:320px }
    .column						{ border:none } 

    .col1, .col2, .col3, .col4, .col5, .col6,
    .col7, .col8, .col9, .col9, .col10, .col11, .col12 { width: 290px; }

    .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:320px }
    
  }

/*  #Mobile (Landscape)
================================================== */
  
  @media only screen and (min-width: 480px) and (max-width: 767px) {
    .container        { width:420px }
    .column						{ border:none } 

    .col1, .col2, .col3, .col4, .col5, .col6,
    .col7, .col8, .col9, .col9, .col10, .col11, .col12 { width: 390px; }

    .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 {
      content: '\0020';
      display: block;
      overflow: hidden;
      visibility: hidden;
      width: 0;
      height: 0; }
    .row:after,
    .clearfix:after {
      clear: both; }
    .row,
    .clearfix {
      zoom: 1; }
    .row { clear:both }

    /* 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%;
  font: inherit;
  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; }