/*
    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 width on "sg-pagewidth" and media query breakpoints to match desired size
      - Edit padding/margin on "sg-row-pad" sections to match desired pad 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-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; width: auto; min-width: 320px; margin: 0 auto; position: relative; }

/* clearing */
.sg-clear { clear: both; }
.sg-row:before, .sg-row:after, .emu-sg-row:before, .emu-sg-row:after { content: " "; display: table; }
.sg-row:after, .emu-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: -22px; margin-right: -22px; }
.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; padding-left: 22px; padding-right: 22px; }


/* SIZE-BASED ELEMENT HIDING ONLY ######################################################### */
@media only screen and (max-width: 580px) {
    .sg-hide-sm { display: none !important; }
    .sg-visible-xs { display: none; }
}

@media only screen and (min-width: 581px) and (max-width: 1023px) {
    .sg-hide-md { display: none !important; }
    .sg-visible-xs { display: none; }
}

@media only screen and (min-width: 1024px) {
    .sg-hide-lg { display: none !important; }
    .sg-visible-xs { display: none; }
}



/* MEDIUM RULES (TABLET+) ######################################################### */
@media only screen and (min-width: 581px) {
    .sg-pagewidth { width: 980px; }

    /* 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: -22px; margin-right: -22px; }
    .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; padding-left: 22px; padding-right: 22px; }
}

/* LARGE RULES (DESKTOP+) ######################################################### */
@media only screen and (min-width: 1024px) {
    .sg-pagewidth { width: 980px; }

    /* grid col overrides */
    .sg-col-lg-1 { width: 8.3333333333%; }
    .sg-col-lg-2 { width: 16.6666666667%; }
    .sg-col-lg-2_5 { width: 20%; }
    .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: -14px; margin-right: -14px; }
    .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; padding-left: 14px; padding-right: 14px; }

    .sg-col-lg-offset-1 { margin-left: 8.3333333333%; }
    .sg-col-lg-offset-2 { margin-left: 16.6666666667%; }
    .sg-col-lg-offset-3 { margin-left: 25%; }
    .sg-col-lg-offset-6 { margin-left: 50%; }
}


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

@media only print {
    .sg-row-print:before, .sg-row-print:after { content: " "; display: table; }
    .sg-row-print:after { clear: both; }

    /* grid row */
    .sg-row-print { *zoom: 1; margin-left: auto; margin-right: auto; }

    .sg-col-print-3, .sg-col-print-4, .sg-col-print-8, .sg-col-print-9 { width: 100%; display: block; float: left; }

    .sg-col-print-3 { width: 25%; }
    .sg-col-print-4 { width: 33.3333333333%; }
    .sg-col-print-8 { width: 66.6666666667%; }
    .sg-col-print-9 { width: 75%; }
}