/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/


/* Table of Contents
==================================================
 #Base 960 Grid
 #Tablet (Portrait)
 #Mobile (Portrait)
 #Mobile (Landscape)
 #Clearing */



/* #Base 960 Grid
================================================== */

 .gridcont { position: relative; width: 960px; margin: 0 auto; padding: 0; }
 .gridcont .col { float: left; display: inline; margin-left: 20px; margin-right: 20px; }
 .row { margin-bottom: 20px; }

 /* Nested Column Classes */
 .col.alpha, .col.alpha { margin-left: 0; }
 .col.omega, .col.omega { margin-right: 0; }

 /* Base Grid */
 .gridcont .g1.col  { width: 20px; }
 .gridcont .g2.col  { width: 80px; }
 .gridcont .g3.col  { width: 140px; }
 .gridcont .g4.col  { width: 200px; }
 .gridcont .g5.col  { width: 260px; }
 .gridcont .g6.col  { width: 320px; }
 .gridcont .g7.col  { width: 380px; }
 .gridcont .g8.col  { width: 440px; }
 .gridcont .g9.col  { width: 500px; }
 .gridcont .g10.col { width: 560px; }
 .gridcont .g11.col { width: 620px; }
 .gridcont .g12.col { width: 680px; }
 .gridcont .g13.col { width: 740px; }
 .gridcont .g14.col { width: 800px; }
 .gridcont .g15.col { width: 860px; }
 .gridcont .g16.col { width: 920px; }

 .gridcont .third1.col { width: 280px; }
 .gridcont .third2.col { width: 600px; }

 /* Offsets */
 .gridcont .offset1	{ padding-left: 60px; }
 .gridcont .offset2  { padding-left: 120px; }
 .gridcont .offset3  { padding-left: 180px; }
 .gridcont .offset4  { padding-left: 240px; }
 .gridcont .offset5  { padding-left: 300px; }
 .gridcont .offset6  { padding-left: 360px; }
 .gridcont .offset7  { padding-left: 420px; }
 .gridcont .offset8  { padding-left: 480px; }
 .gridcont .offset9  { padding-left: 540px; }
 .gridcont .offset10 { padding-left: 600px; }
 .gridcont .offset11 { padding-left: 660px; }
 .gridcont .offset12 { padding-left: 720px; }
 .gridcont .offset13 { padding-left: 780px; }
 .gridcont .offset14 { padding-left: 840px; }
 .gridcont .offset15 { padding-left: 900px; }



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

 /* Note: Design for a width of 768px */

 @media only screen and (min-width: 768px) and (max-width: 959px) {
 .gridcont { width: 768px; }
 .gridcont .col,
 .gridcont .col { margin-left: 20px; margin-right: 20px; }
 .col.alpha, .col.alpha { margin-left: 0; margin-right: 20px; }
 .col.omega, .col.omega { margin-right: 0; margin-left: 20px; }
 .alpha.omega { margin-left: 0; margin-right: 0; }


 .gridcont .g1.col  { width: 8px; }
 .gridcont .g2.col  { width: 56px; }
 .gridcont .g3.col  { width: 104px; }
 .gridcont .g4.col  { width: 152px; }
 .gridcont .g5.col  { width: 200px; }
 .gridcont .g6.col  { width: 248px; }
 .gridcont .g7.col  { width: 296px; }
 .gridcont .g8.col  { width: 344px; }
 .gridcont .g9.col  { width: 392px; }
 .gridcont .g10.col { width: 440px; }
 .gridcont .g11.col { width: 488px; }
 .gridcont .g12.col { width: 536px; }
 .gridcont .g13.col { width: 584px; }
 .gridcont .g14.col { width: 632px; }
 .gridcont .g15.col { width: 680px; }
 .gridcont .g16.col { width: 728px; }

 .gridcont .third1.col { width: 216px; }
 .gridcont .third2.col { width: 472px; }

 /* Offsets */
 .gridcont .offset1 	{ padding-left: 48px; }
 .gridcont .offset2 	{ padding-left: 96px; }
 .gridcont .offset3 	{ padding-left: 144px; }
 .gridcont .offset4 	{ padding-left: 192px; }
 .gridcont .offset5 	{ padding-left: 240px; }
 .gridcont .offset6 	{ padding-left: 288px; }
 .gridcont .offset7 	{ padding-left: 336px; }
 .gridcont .offset8 	{ padding-left: 384px; }
 .gridcont .offset9 	{ padding-left: 432px; }
 .gridcont .offset10 { padding-left: 480px; }
 .gridcont .offset11 { padding-left: 528px; }
 .gridcont .offset12 { padding-left: 576px; }
 .gridcont .offset13 { padding-left: 624px; }
 .gridcont .offset14 { padding-left: 672px; }
 .gridcont .offset15 { padding-left: 720px; }
 }


/* #Mobile (Portrait)
================================================== */

 /* Note: Design for a width of 320px */

 @media only screen and (max-width: 767px) {
 .gridcont .col { float: left; display: inline; margin-left: 10px; margin-right: 10px; }
 .gridcont { width: 300px; }
 .gridcont .col { margin: 0; }


 .gridcont .g1.col,
 .gridcont .g2.col,
 .gridcont .g3.col,
 .gridcont .g4.col,
 .gridcont .g5.col,
 .gridcont .g6.col,
 .gridcont .g7.col,
 .gridcont .g8.col,
 .gridcont .g9.col,
 .gridcont .g10.col,
 .gridcont .g11.col,
 .gridcont .g12.col,
 .gridcont .g13.col,
 .gridcont .g14.col,
 .gridcont .g15.col,
 .gridcont .g16.col,
 .gridcont .third1.col,
 .gridcont .third2.col { width: 300px; }

 /* Offsets */
 .gridcont .offset1,
 .gridcont .offset2,
 .gridcont .offset3,
 .gridcont .offset4,
 .gridcont .offset5,
 .gridcont .offset6,
 .gridcont .offset7,
 .gridcont .offset8,
 .gridcont .offset9,
 .gridcont .offset10,
 .gridcont .offset11,
 .gridcont .offset12,
 .gridcont .offset13,
 .gridcont .offset14,
 .gridcont .offset15 { padding-left: 0; }

 }


/* #Mobile (Landscape)
================================================== */

 /* Note: Design for a width of 480px */

 @media only screen and (min-width: 480px) and (max-width: 767px) {
 .gridcont { width: 420px; }
 .gridcont .col { margin: 0; }


 .gridcont .g1.col,
 .gridcont .g2.col,
 .gridcont .g3.col,
 .gridcont .g4.col,
 .gridcont .g5.col,
 .gridcont .g6.col,
 .gridcont .g7.col,
 .gridcont .g8.col,
 .gridcont .g9.col,
 .gridcont .g10.col,
 .gridcont .g11.col,
 .gridcont .g12.col,
 .gridcont .g13.col,
 .gridcont .g14.col,
 .gridcont .g15.col,
 .gridcont .g16.col,
 .gridcont .third1.col,
 .gridcont .third2.col { width: 420px; }
 }


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

 /* Self Clearing Goodness */
 .gridcont: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; }

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