/*
* Quantum Framework
*
* 1200px - 12 Columns - 20px Gutter
*
* Copyright 2013 Quantum Outsourcing, Inc
* Licensed under the Apache License v2.0
* http://www.apache.org/licenses/LICENSE-2.0
*
* Designed and built by Quantum Outsourcing
* http://QuantumOutsourcing.com
*
*/


/* ==========================================================================
   960px - 12 columns - 20px gutter 
   ========================================================================== */

   /* Container */ 
   .container-12 { width: 960px; margin: 0 auto; } 

   /* Global */ 
   [class*="grid-"] { float: left; display: inline; margin-left: 10px; margin-right: 10px; } 
   .group:before, .group:after { content: ""; display: table; line-height: 0; } 
   .group:after { clear: both; } 

   /* Nested elements */ 
   .alpha { margin-left: 0px; } 
   .omega { margin-right: 0px; } 

   /* Grids */ 
   .container-12 .grid-1 {  width: 60px; }
   .container-12 .grid-2 {  width: 140px; }
   .container-12 .grid-3 {  width: 220px; }
   .container-12 .grid-4 {  width: 300px; }
   .container-12 .grid-5 {  width: 380px; }
   .container-12 .grid-6 {  width: 460px; }
   .container-12 .grid-7 {  width: 540px; }
   .container-12 .grid-8 {  width: 620px; }
   .container-12 .grid-9 {  width: 700px; }
   .container-12 .grid-10 {  width: 780px; }
   .container-12 .grid-11 {  width: 860px; }
   .container-12 .grid-12 {  width: 940px; }

   /* Offset Extra Space */ 
   .container-12 .offset-1 { padding-left: 80px; }
   .container-12 .offset-2 { padding-left: 160px; }
   .container-12 .offset-3 { padding-left: 240px; }
   .container-12 .offset-4 { padding-left: 320px; }
   .container-12 .offset-5 { padding-left: 400px; }
   .container-12 .offset-6 { padding-left: 480px; }
   .container-12 .offset-7 { padding-left: 560px; }
   .container-12 .offset-8 { padding-left: 640px; }
   .container-12 .offset-9 { padding-left: 720px; }
   .container-12 .offset-10 { padding-left: 800px; }
   .container-12 .offset-11 { padding-left: 880px; }

/* ==========================================================================
   1200px - 12 columns - 20px gutter 
   ========================================================================== */

   @media (min-width: 1200px) { 

   /* Container */ 
   .container-12 { width: 1200px; margin: 0 auto; } 

   /* Global */ 
   [class*="grid-"] { float: left; display: inline; margin-left: 10px; margin-right: 10px; } 
   .group:before, .group:after { content: ""; display: table; line-height: 0; } 
   .group:after { clear: both; } 

   /* Nested elements */ 
   .alpha { margin-left: 0px; } 
   .omega { margin-right: 0px; } 

   /* Grids */ 
   .container-12 .grid-1 {  width: 80px; }
   .container-12 .grid-2 {  width: 180px; }
   .container-12 .grid-3 {  width: 280px; }
   .container-12 .grid-4 {  width: 380px; }
   .container-12 .grid-5 {  width: 480px; }
   .container-12 .grid-6 {  width: 580px; }
   .container-12 .grid-7 {  width: 680px; }
   .container-12 .grid-8 {  width: 780px; }
   .container-12 .grid-9 {  width: 880px; }
   .container-12 .grid-10 {  width: 980px; }
   .container-12 .grid-11 {  width: 1080px; }
   .container-12 .grid-12 {  width: 1180px; }

   /* Offset Extra Space */ 
   .container-12 .offset-1 { padding-left: 100px; }
   .container-12 .offset-2 { padding-left: 200px; }
   .container-12 .offset-3 { padding-left: 300px; }
   .container-12 .offset-4 { padding-left: 400px; }
   .container-12 .offset-5 { padding-left: 500px; }
   .container-12 .offset-6 { padding-left: 600px; }
   .container-12 .offset-7 { padding-left: 700px; }
   .container-12 .offset-8 { padding-left: 800px; }
   .container-12 .offset-9 { padding-left: 900px; }
   .container-12 .offset-10 { padding-left: 1000px; }
   .container-12 .offset-11 { padding-left: 1100px; }

   }

/* ==========================================================================
   1008px - 12 columns - 20px gutter 
   ========================================================================== */

   @media (min-width: 1008px) and (max-width: 1199px) { 

   /* Container */ 
   .container-12 { width: 1008px; margin: 0 auto; } 

   /* Global */ 
   [class*="grid-"] { float: left; display: inline; margin-left: 10px; margin-right: 10px; } 
   .group:before, .group:after { content: ""; display: table; line-height: 0; } 
   .group:after { clear: both; } 

   /* Nested elements */ 
   .alpha { margin-left: 0px; } 
   .omega { margin-right: 0px; } 

   /* Grids */ 
   .container-12 .grid-1 {  width: 64px; }
   .container-12 .grid-2 {  width: 148px; }
   .container-12 .grid-3 {  width: 232px; }
   .container-12 .grid-4 {  width: 316px; }
   .container-12 .grid-5 {  width: 400px; }
   .container-12 .grid-6 {  width: 484px; }
   .container-12 .grid-7 {  width: 568px; }
   .container-12 .grid-8 {  width: 652px; }
   .container-12 .grid-9 {  width: 736px; }
   .container-12 .grid-10 {  width: 820px; }
   .container-12 .grid-11 {  width: 904px; }
   .container-12 .grid-12 {  width: 988px; }

   /* Offset Extra Space */ 
   .container-12 .offset-1 { padding-left: 84px; }
   .container-12 .offset-2 { padding-left: 168px; }
   .container-12 .offset-3 { padding-left: 252px; }
   .container-12 .offset-4 { padding-left: 336px; }
   .container-12 .offset-5 { padding-left: 420px; }
   .container-12 .offset-6 { padding-left: 504px; }
   .container-12 .offset-7 { padding-left: 588px; }
   .container-12 .offset-8 { padding-left: 672px; }
   .container-12 .offset-9 { padding-left: 756px; }
   .container-12 .offset-10 { padding-left: 840px; }
   .container-12 .offset-11 { padding-left: 924px; }

   }