/*

* 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



* Edited to add Push / Pull support;

* Changed to allow columns margin top / bottom at lower breakpoints; margin:0; => margin-left / right: 0;

* Changed to add visible / hidden classes

* Added img max-width inside columns

* Colin Brimfield



* Modified to be 1080 for Matco Tools

*/





/* Table of Contents

==================================================

    #Base 1080 Grid

    #Tablet (Portrait)

    #Mobile (Portrait)

    #Mobile (Landscape)

    #Clearing */







/* #Base 1080 Grid

================================================== */



    .container                                  { position: relative; width: 100%; max-width: 1080px; margin: 0 auto; padding: 0; }

    .container .column,

    .container .columns                         { float: left; display: inline; margin-left: .925%; margin-right: .925%; }

    .row                                        { margin-bottom: 20px; }

    .columns img, .columns iframe               {max-width: 100%;}



    /* Nested Column Classes */

    .column.alpha, .columns.alpha               { margin-left: 0; }

    .column.omega, .columns.omega               { margin-right: 0; }



    /* Base Grid */

    .container .one.column,

    .container .one.columns                     { width: 3.703%;  }

    .container .two.columns                     { width: 9.259%; }

    .container .three.columns                   { width: 14.814%; }

    .container .four.columns                    { width: 20.37%; }

    .container .five.columns                    { width: 25.925%; }

    .container .six.columns                     { width: 31.481%; }

    .container .seven.columns                   { width: 37.037%; }

    .container .eight.columns                   { width: 42.592%; }

    .container .nine.columns                    { width: 48.148%; }

    .container .ten.columns                     { width: 53.703%; }

    .container .eleven.columns                  { width: 59.259%; }

    .container .twelve.columns                  { width: 64.814%; }

    .container .thirteen.columns                { width: 70.370%; }

    .container .fourteen.columns                { width: 75.925%; }

    .container .fifteen.columns                 { width: 81.481%; }

    .container .sixteen.columns                 { width: 87.037%; }

    .container .seventeen.columns               { width: 92.592%; }

    .container .eighteen.columns                { width: 98.148%; }



    .container .one-third.column                { width: 31.481%; }

    .container .two-thirds.column               { width: 64.814%; }

    

    /* Special columns for within the content area (also includes .prod-item) */

    #content-area .one-third.column, 

    #content-area .one-third.columns            { width: 23.425%; }

    #content-area .one-forth.column, 

    #content-area .one-forth.columns,

    .prod-item.columns                          { width: 17.129%; }





    /* Offsets */

    .container .offset-by-one                   { padding-left: 5.555%;  }

    .container .offset-by-two                   { padding-left: 11.111%; }

    .container .offset-by-three                 { padding-left: 16.666%; }

    .container .offset-by-four                  { padding-left: 22.222%; }

    .container .offset-by-five                  { padding-left: 27.777%; }

    .container .offset-by-six                   { padding-left: 33.333%; }

    .container .offset-by-seven                 { padding-left: 38.888%; }

    .container .offset-by-eight                 { padding-left: 44.444%; }

    .container .offset-by-nine                  { padding-left: 50%; }

    .container .offset-by-ten                   { padding-left: 55.555%; }

    .container .offset-by-eleven                { padding-left: 61.111%; }

    .container .offset-by-twelve                { padding-left: 66.666%; }

    .container .offset-by-thirteen              { padding-left: 72.222%; }

    .container .offset-by-fourteen              { padding-left: 77.777%; }

    .container .offset-by-fifteen               { padding-left: 50%; }

    .container .offset-by-sixteen               { padding-left: 88.888%; }

    .container .offset-by-seventeen             { padding-left: 94.444%; }



    /* Pushes / Pulls - 960GS */ 

    .push-1, .pull-1, .push-2, .pull-2, .push-3, .pull-3, .push-4, .pull-4, .push-5, .pull-5, 

    .push-6, .pull-6, .push-7, .pull-7, .push-8, .pull-8, .push-9, .pull-9, .push-10, .pull-10, 

    .push-11, .pull-11, .push-12, .pull-12, .push-13, .pull-13, .push-14, .pull-14, 

    .push-15, .pull-15, .push-16, .pull-16, .push-17, .pull-17, .push-18, .pull-18{

        position: relative;

    }



    .container .push-1 {left: 5.555%;}

    .container .push-2 {left: 11.111%;}

    .container .push-3 {left: 16.666%;}

    .container .push-4 {left: 22.2222%;}

    .container .push-5 {left: 27.777%;}

    .container .push-6 {left: 33.333%;}

    .container .push-7 {left: 38.888%;}

    .container .push-8 {left: 44.444%;}

    .container .push-9 {left: 50%;}

    .container .push-10 {left: 55.555%;}

    .container .push-11 {left: 61.111%;}

    .container .push-12 {left: 66.666%;}

    .container .push-13 {left: 72.222%;}

    .container .push-14 {left: 77.777%;}

    .container .push-15 {left: 50%;}

    .container .push-16 {left: 88.888%;}

    .container .push-17 {left: 94.444%;}



    .container .pull-1 {left: -5.555%;}

    .container .pull-2 {left: -11.111%;}

    .container .pull-3 {left: -16.666%;}

    .container .pull-4 {left: -22.222%;}

    .container .pull-5 {left: -27.777%;}

    .container .pull-6 {left: -33.333%;}

    .container .pull-7 {left: -38.888%;}

    .container .pull-8 {left: -44.444%;}

    .container .pull-9 {left: -50%;}

    .container .pull-10 {left: -55.555%;}

    .container .pull-11 {left: -61.111%;}

    .container .pull-12 {left: -66.666%;}

    .container .pull-13 {left: -72.222%;}

    .container .pull-14 {left: -77.777%;}

    .container .pull-15 {left: -50%;}

    .container .pull-16 {left: -88.888%;}

    .container .pull-17 {left: -94.444%;}





    /* Visible / Hidden Classes */ 

    .visible-phone, .visible-tablet, .hidden-desktop{display: none !important;}

    .visible-desktop, .hidden-phone, .hidden-tablet {display: inherit !important;}





    /*chart columns*/

    .container .one-fifth.columns{width: 18.52%;}





/* #Tablet (Portrait)

================================================== */



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



    @media only screen and (min-width: 768px) and (max-width: 1079px) {

        .container                                  { width: 100%; max-width: 1079px; }

        /*.container .column,

        .container .columns                         { margin-left: 10px; margin-right: 10px;  }

        .column.alpha, .columns.alpha               { margin-left: 0; margin-right: 10px; }

        .column.omega, .columns.omega               { margin-right: 0; margin-left: 10px; }

        .alpha.omega                                { margin-left: 0; margin-right: 0; }



        .container .one.column,

        .container .one.columns                     { width: 22px; }

        .container .two.columns                     { width: 64px; }

        .container .three.columns                   { width: 106px; }

        .container .four.columns                    { width: 148px; }

        .container .five.columns                    { width: 190px; }

        .container .six.columns                     { width: 232px; }

        .container .seven.columns                   { width: 274px; }

        .container .eight.columns                   { width: 316px; }

        .container .nine.columns                    { width: 358px; }

        .container .ten.columns                     { width: 400px; }

        .container .eleven.columns                  { width: 442px; }

        .container .twelve.columns                  { width: 484px; }

        .container .thirteen.columns                { width: 526px; }

        .container .fourteen.columns                { width: 568px; }

        .container .fifteen.columns                 { width: 610px; }

        .container .sixteen.columns                 { width: 652px; }

        .container .seventeen.columns               { width: 694px; }

        .container .eighteen.columns                { width: 736px; }



        .container .one-third.column                { width: 232px; }

        .container .two-thirds.column               { width: 484px; }*/

    

        /* Special columns for within the content area (also includes .prod-item) */

     /*   #content-area .one-third.column, 

        #content-area .one-third.columns            { width: 169px; }

        #content-area .one-forth.column,

        #content-area .one-forth.column,

        .prod-item.columns                          { width: 122px; }*/



        /* Offsets */

/*        .container .offset-by-one                   { padding-left: 42px; }

        .container .offset-by-two                   { padding-left: 84px; }

        .container .offset-by-three                 { padding-left: 126px; }

        .container .offset-by-four                  { padding-left: 168px; }

        .container .offset-by-five                  { padding-left: 210px; }

        .container .offset-by-six                   { padding-left: 252px; }

        .container .offset-by-seven                 { padding-left: 294px; }

        .container .offset-by-eight                 { padding-left: 336px; }

        .container .offset-by-nine                  { padding-left: 378px; }

        .container .offset-by-ten                   { padding-left: 420px; }

        .container .offset-by-eleven                { padding-left: 462px; }

        .container .offset-by-twelve                { padding-left: 504px; }

        .container .offset-by-thirteen              { padding-left: 546px; }

        .container .offset-by-fourteen              { padding-left: 588px; }

        .container .offset-by-fifteen               { padding-left: 630px; }

        .container .offset-by-sixteen               { padding-left: 672px; }

        .container .offset-by-seventeen             { padding-left: 704px; }*/

    

        /* Pushes / Pulls */ 

  /*      .container .push-1                          { left: 42px; }

        .container .push-2                          { left: 84px; }

        .container .push-3                          { left: 126px; }

        .container .push-4                          { left: 168px; }

        .container .push-5                          { left: 210px; }

        .container .push-6                          { left: 252px; }

        .container .push-7                          { left: 294px; }

        .container .push-8                          { left: 336px; }

        .container .push-9                          { left: 378px; }

        .container .push-10                         { left: 420px; }

        .container .push-11                         { left: 462px; }

        .container .push-12                         { left: 504px; }

        .container .push-13                         { left: 546px; }

        .container .push-14                         { left: 588px; }

        .container .push-15                         { left: 630px; }

        .container .push-16                         { left: 672px; }

        .container .push-17                         { left: 704px; }



        .container .pull-1                          { left: -42px; }

        .container .pull-2                          { left: -84px; }

        .container .pull-3                          { left: -126px; }

        .container .pull-4                          { left: -168px; }

        .container .pull-5                          { left: -210px; }

        .container .pull-6                          { left: -252px; }

        .container .pull-7                          { left: -294px; }

        .container .pull-8                          { left: -336px; }

        .container .pull-9                          { left: -378px; }

        .container .pull-10                         { left: -420px; }

        .container .pull-11                         { left: -462px; }

        .container .pull-12                         { left: -504px; }

        .container .pull-13                         { left: -546px; }

        .container .pull-14                         { left: -588px; }

        .container .pull-15                         { left: -630px; }

        .container .pull-16                         { left: -672px; }

        .container .pull-17                         { left: -704px; }*/



        /* Visible / Hidden Classes */ 

       /* .visible-phone, .hidden-tablet, .visible-desktop{display: none !important;}

        .visible-tablet, .hidden-desktop, .hidden-phone{display: inherit !important;}

        */

    }



    

/*  #Mobile (Portrait)

================================================== */



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



    @media only screen and (max-width: 767px){

        .container { width: 95%; max-width: 767px; min-width: 310px; }

        .container .columns,

        .container .column { margin-left: 0; margin-right: 0; }



        .container .one.column,

        .container .one.columns,

        .container .two.columns,

        .container .three.columns,

        .container .four.columns,

        .container .five.columns,

        .container .six.columns,

        .container .seven.columns,

        .container .eight.columns,

        .container .nine.columns,

        .container .ten.columns,

        .container .eleven.columns,

        .container .twelve.columns,

        .container .thirteen.columns,

        .container .fourteen.columns,

        .container .fifteen.columns,

        .container .sixteen.columns,

        .container .seventeen.columns,

        .container .eighteen.columns,

        .container .one-third.column,

        .container .two-thirds.column,

        #content-area .one-third.column,

        #content-area .one-third.columns,

        #content-area .one-forth.column,

        #content-area .one-forth.columns,

        .prod-item.columns, .quarter.column { width: 100%; }



        /* Offsets */

        .container .offset-by-one,

        .container .offset-by-two,

        .container .offset-by-three,

        .container .offset-by-four,

        .container .offset-by-five,

        .container .offset-by-six,

        .container .offset-by-seven,

        .container .offset-by-eight,

        .container .offset-by-nine,

        .container .offset-by-ten,

        .container .offset-by-eleven,

        .container .offset-by-twelve,

        .container .offset-by-thirteen,

        .container .offset-by-fourteen,

        .container .offset-by-fifteen,

        .container .offset-by-sixteen,

        .container .offset-by-seventeen { padding-left: 0; }



    

        /* Pushes / Pulls */ 

        .container .push-1,

        .container .push-2,

        .container .push-3,

        .container .push-4,

        .container .push-5,

        .container .push-6,

        .container .push-7,

        .container .push-8,

        .container .push-9,

        .container .push-10,

        .container .push-11,

        .container .push-12,

        .container .push-13,

        .container .push-14,

        .container .push-15,

        .container .push-16,

        .container .push-17,

        .container .pull-1,

        .container .pull-2,

        .container .pull-3,

        .container .pull-4,

        .container .pull-5,

        .container .pull-6,

        .container .pull-7,

        .container .pull-8,

        .container .pull-9,

        .container .pull-10,

        .container .pull-11,

        .container .pull-12,

        .container .pull-13,

        .container .pull-14,

        .container .pull-15,

        .container .pull-16,

        .container .pull-17 {left:0;}



        /* Visible / Hidden Classes */ 

        .visible-tablet, .visible-desktop, .hidden-phone{display: none !important;}

        .visible-phone, .hidden-tablet, .hidden-desktop{display: inherit !important;}



    }



/* #Mobile (Landscape)

================================================== */



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



    /*

    @media only screen and (min-width: 480px) and (max-width: 767px) {

        .container { width: 420px; }

        .container .columns,

        .container .column { margin-left: 0; margin-right: 0; }



        .container .one.column,

        .container .one.columns,

        .container .two.columns,

        .container .three.columns,

        .container .four.columns,

        .container .five.columns,

        .container .six.columns,

        .container .seven.columns,

        .container .eight.columns,

        .container .nine.columns,

        .container .ten.columns,

        .container .eleven.columns,

        .container .twelve.columns,

        .container .thirteen.columns,

        .container .fourteen.columns,

        .container .fifteen.columns,

        .container .sixteen.columns,

        .container .one-third.column,

        .container .two-thirds.column { width: 420px; }

    }

    */





/* #Clearing

================================================== */



    /* Self Clearing Goodness */

    .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; }



    /* You can also use a <br class="clear" /> to clear columns */

    .clear {

      clear: both;

      display: block;

      overflow: hidden;

      visibility: hidden;

      width: 0;

      height: 0;

    }