/*
    SatGrid
    Dev: Brian Babey
    Started: 02/06/2015
    Updated: 02/09/2015
    ---------------------
    Grid supporting IE8+ and counting on media query support (with respond.js for IE8)

    IMPORTANT: 
      - This grid is intended for use as a clean start point for convenient structure.
      - It is not a solution for all parts of your layout, just the ones that need
        the convenient column-count swapping based on different responsive sizes.
      - If you need to do something tricky in a ton of cases to make this work, ask
        yourself if this is really the right tool.
      - Consider options like an extra internal element for spacing/sizing if you need
        special cases of offset/padding/layout behavioral mods.

    IMPLEMENTATION NOTES:
      - Based loosely on responsive grid cascade similar to bootstrap (sm/md/lg)
      - 12 column setup
      - Mobile-first rules
      - Uses percentage-based columns
      - Three adaptive breakpoints
        - sm: mobile+
        - md: tablet+
        - lg: desktop+

    MASTER CLASS LIST:
      - sg-pagewidth
      - sg-clear
      - sg-hide-(size)
      - sg-row
      - sg-row-pad
      - sg-col-(size)-#

    CUSTOMIZING FOR YOUR PROJECT:
      - Edit padding/margin on "sg-row-pad" sections to match desired pad sizes
      - Edit media query pixel breakpoints to match desired size
      - In site stylesheet (not this one), specify width of ".sg-pagewidth" for any fixed page sizes

    HELPER ELEMENTS:
      - "sg-pagewidth" : add to elements meant to fill page width (only a few, mostly containers)
      - "sg-clear" : clearing element for floats/rows
      - "sg-clearfix" : add to elements to apply clearfix rules
      - "sg-hide-(size)" : hide this element only at (size)

    GRID USAGE DETAILS:
      - "sg-row" should be placed on every row element
      - "sg-row-pad" should be added to row elements that should pad their columns
      - Mark columns with class "col-sz-#" based on colspan for that size *AND ABOVE*
        - "sg-col-sm-6" will take up 6/12 width in small/medium/large
        - "sg-col-md-4" will take up 4/12 width in medium/large
        - "sg-col-lg-2" will take up 2/12 width in large

    GRID CLEARING AT MULTIPLE SIZES:
      - Column behaviors should "cascade up" but you may need to add explicit
        clearing elements to ensure proper wrap points for multiples.
        - ex: "sg-clear"

*/


/* BASELINE RULES (ASSUME MOBILE+) ######################################################### */
.sg-pagewidth {box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;width:auto;min-width:320px;margin:0 auto;position:relative;}

/* clearing */
.sg-clearfix:after {content:" ";display:table;clear:both;}
.sg-clear {clear:both;}
.sg-row:before, .sg-row:after {content:" ";display:table;}
.sg-row:after {clear:both;}

/* grid row */
.sg-row {*zoom:1;margin-left:auto;margin-right:auto;}
.sg-row img {max-width:100%;}

/* grid col basics */
.sg-col-sm-1, .sg-col-sm-2, .sg-col-sm-3, .sg-col-sm-4, .sg-col-sm-5, .sg-col-sm-6, .sg-col-sm-7, .sg-col-sm-8, .sg-col-sm-9, .sg-col-sm-10, .sg-col-sm-11, .sg-col-sm-12,
.sg-col-md-1, .sg-col-md-2, .sg-col-md-3, .sg-col-md-4, .sg-col-md-5, .sg-col-md-6, .sg-col-md-7, .sg-col-md-8, .sg-col-md-9, .sg-col-md-10, .sg-col-md-11, .sg-col-md-12,
.sg-col-lg-1, .sg-col-lg-2, .sg-col-lg-3, .sg-col-lg-4, .sg-col-lg-5, .sg-col-lg-6, .sg-col-lg-7, .sg-col-lg-8, .sg-col-lg-9, .sg-col-lg-10, .sg-col-lg-11, .sg-col-lg-12
{
    width:100%;display:block;float:left;
}

/* grid col sizes */
.sg-col-sm-1  {width:8.3333333333%;}
.sg-col-sm-2  {width:16.6666666667%;}
.sg-col-sm-3  {width:25%;}
.sg-col-sm-4  {width:33.3333333333%;}
.sg-col-sm-5  {width:41.6666666667%;}
.sg-col-sm-6  {width:50%;}
.sg-col-sm-7  {width:58.3333333333%;}
.sg-col-sm-8  {width:66.6666666667%;}
.sg-col-sm-9  {width:75%;}
.sg-col-sm-10 {width:83.3333333333%;}
.sg-col-sm-11 {width:91.6666666667%;}
.sg-col-sm-12 {width:100%;}

/* grid padding sizes */
.sg-row-pad {margin-left:-12px;margin-right:-12px;}
.sg-row-pad > .sg-col-sm-1, .sg-row-pad > .sg-col-sm-2, .sg-row-pad > .sg-col-sm-3, .sg-row-pad > .sg-col-sm-4, .sg-row-pad > .sg-col-sm-5, .sg-row-pad > .sg-col-sm-6, .sg-row-pad > .sg-col-sm-7, .sg-row-pad > .sg-col-sm-8, .sg-row-pad > .sg-col-sm-9, .sg-row-pad > .sg-col-sm-10, .sg-row-pad > .sg-col-sm-11, .sg-row-pad > .sg-col-sm-12,
.sg-row-pad > .sg-col-md-1, .sg-row-pad > .sg-col-md-2, .sg-row-pad > .sg-col-md-3, .sg-row-pad > .sg-col-md-4, .sg-row-pad > .sg-col-md-5, .sg-row-pad > .sg-col-md-6, .sg-row-pad > .sg-col-md-7, .sg-row-pad > .sg-col-md-8, .sg-row-pad > .sg-col-md-9, .sg-row-pad > .sg-col-md-10, .sg-row-pad > .sg-col-md-11, .sg-row-pad > .sg-col-md-12,
.sg-row-pad > .sg-col-lg-1, .sg-row-pad > .sg-col-lg-2, .sg-row-pad > .sg-col-lg-3, .sg-row-pad > .sg-col-lg-4, .sg-row-pad > .sg-col-lg-5, .sg-row-pad > .sg-col-lg-6, .sg-row-pad > .sg-col-lg-7, .sg-row-pad > .sg-col-lg-8, .sg-row-pad > .sg-col-lg-9, .sg-row-pad > .sg-col-lg-10, .sg-row-pad > .sg-col-lg-11, .sg-row-pad > .sg-col-lg-12
{
    box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;padding-left:12px;padding-right:12px;
}


/* SIZE-BASED ELEMENT HIDING ONLY ######################################################### */
@media only screen                         and (max-width: 767px) { .sg-hide-sm {display:none!important;} }
@media only screen and (min-width:  768px) and (max-width: 1023px) { .sg-hide-md {display:none!important;} }
@media only screen and (min-width: 1024px)                         { .sg-hide-lg {display:none!important;} }



/* MEDIUM RULES (TABLET+) ######################################################### */
@media only screen and (min-width: 768px) {
    /* grid col overrides */
    .sg-col-md-1  {width:8.3333333333%;}
    .sg-col-md-2  {width:16.6666666667%;}
    .sg-col-md-3  {width:25%;}
    .sg-col-md-4  {width:33.3333333333%;}
    .sg-col-md-5  {width:41.6666666667%;}
    .sg-col-md-6  {width:50%;}
    .sg-col-md-7  {width:58.3333333333%;}
    .sg-col-md-8  {width:66.6666666667%;}
    .sg-col-md-9  {width:75%;}
    .sg-col-md-10 {width:83.3333333333%;}
    .sg-col-md-11 {width:91.6666666667%;}
    .sg-col-md-12 {width:100%;}

    /* grid padding sizes */
    .sg-row-pad {margin-left:-12px;margin-right:-12px;}
    .sg-row-pad > .sg-col-sm-1, .sg-row-pad > .sg-col-sm-2, .sg-row-pad > .sg-col-sm-3, .sg-row-pad > .sg-col-sm-4, .sg-row-pad > .sg-col-sm-5, .sg-row-pad > .sg-col-sm-6, .sg-row-pad > .sg-col-sm-7, .sg-row-pad > .sg-col-sm-8, .sg-row-pad > .sg-col-sm-9, .sg-row-pad > .sg-col-sm-10, .sg-row-pad > .sg-col-sm-11, .sg-row-pad > .sg-col-sm-12,
    .sg-row-pad > .sg-col-md-1, .sg-row-pad > .sg-col-md-2, .sg-row-pad > .sg-col-md-3, .sg-row-pad > .sg-col-md-4, .sg-row-pad > .sg-col-md-5, .sg-row-pad > .sg-col-md-6, .sg-row-pad > .sg-col-md-7, .sg-row-pad > .sg-col-md-8, .sg-row-pad > .sg-col-md-9, .sg-row-pad > .sg-col-md-10, .sg-row-pad > .sg-col-md-11, .sg-row-pad > .sg-col-md-12
    {
        box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;padding-left:12px;padding-right:12px;
    }
}

/* LARGE RULES (DESKTOP+) ######################################################### */
@media only screen and (min-width: 1024px) {
    /* grid col overrides */
    .sg-col-lg-1  {width:8.3333333333%;}
    .sg-col-lg-2  {width:16.6666666667%;}
    .sg-col-lg-3  {width:25%;}
    .sg-col-lg-4  {width:33.3333333333%;}
    .sg-col-lg-5  {width:41.6666666667%;}
    .sg-col-lg-6  {width:50%;}
    .sg-col-lg-7  {width:58.3333333333%;}
    .sg-col-lg-8  {width:66.6666666667%;}
    .sg-col-lg-9  {width:75%;}
    .sg-col-lg-10 {width:83.3333333333%;}
    .sg-col-lg-11 {width:91.6666666667%;}
    .sg-col-lg-12 {width:100%;}

    /* grid padding sizes */
    .sg-row-pad {margin-left:-16px;margin-right:-16px;}
    .sg-row-pad > .sg-col-sm-1, .sg-row-pad > .sg-col-sm-2, .sg-row-pad > .sg-col-sm-3, .sg-row-pad > .sg-col-sm-4, .sg-row-pad > .sg-col-sm-5, .sg-row-pad > .sg-col-sm-6, .sg-row-pad > .sg-col-sm-7, .sg-row-pad > .sg-col-sm-8, .sg-row-pad > .sg-col-sm-9, .sg-row-pad > .sg-col-sm-10, .sg-row-pad > .sg-col-sm-11, .sg-row-pad > .sg-col-sm-12,
    .sg-row-pad > .sg-col-md-1, .sg-row-pad > .sg-col-md-2, .sg-row-pad > .sg-col-md-3, .sg-row-pad > .sg-col-md-4, .sg-row-pad > .sg-col-md-5, .sg-row-pad > .sg-col-md-6, .sg-row-pad > .sg-col-md-7, .sg-row-pad > .sg-col-md-8, .sg-row-pad > .sg-col-md-9, .sg-row-pad > .sg-col-md-10, .sg-row-pad > .sg-col-md-11, .sg-row-pad > .sg-col-md-12,
    .sg-row-pad > .sg-col-lg-1, .sg-row-pad > .sg-col-lg-2, .sg-row-pad > .sg-col-lg-3, .sg-row-pad > .sg-col-lg-4, .sg-row-pad > .sg-col-lg-5, .sg-row-pad > .sg-col-lg-6, .sg-row-pad > .sg-col-lg-7, .sg-row-pad > .sg-col-lg-8, .sg-row-pad > .sg-col-lg-9, .sg-row-pad > .sg-col-lg-10, .sg-row-pad > .sg-col-lg-11, .sg-row-pad > .sg-col-lg-12
    {
        box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;padding-left:16px;padding-right:16px;
    }
}


/* FINAL OVERRIDES (ALL SIZES ) ################################################### */