/*
* 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:15px; border-left:1px solid transparent; border-right:1px solid transparent }
	.row                                        { margin-bottom: 20px; }

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

	/* Base Grid */
	.col1                       { width: 52px;  }
	.col2 							        { width: 136px; }
	.col3 							        { width: 220px; }
	.col4 							        { width: 304px; }
	.col5 							        { width: 388px; }
	.col6 							        { width: 472px; }
	.col7 							        { width: 556px; }
	.col8 							        { width: 640px; }
	.col9 							        { width: 724px; }
	.col10 							        { width: 808px; }
	.col11 							        { width: 892px; }
	.col12 							        { width: 976px; }

  /* Parent 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, .wrap-full      { width:768px }

    /* Base Grid */
    .col1                       { width: 32px; }
    .col2                       { width: 96px; }
    .col3                       { width: 160px; }
    .col4                       { width: 224px; }
    .col5                       { width: 288px; }
    .col6                       { width: 352px; }
    .col7                       { width: 416px; }
    .col8                       { width: 480px; }
    .col9                       { width: 544px; }
    .col10                      { width: 608px; }
    .col11                      { width: 672px; }
    .col12                      { width: 736px; }

    /* 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, .wrap-full        { 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, .wrap-full        { 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;
    }