/* 
 *  _litestrap 
 *
 * Utility Classes to control site width, columns, floats, clears, and fixes
 *
 */

/* ok this isn't a class, but it's good */

img { max-width: 100%; }

/* here are the classes... */
.site-wrapper { width: 100%; overflow: hidden; }
.content-wrap, .cw { max-width: 50em; margin: 0 auto; position: relative; }

.text-center, .text-mid { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* .r- rules */
.r-block { display: block; }
.r-inline { display: inline; }
.r-inline-block, .r-iblock { display: inline-block; }

/* vertical alignment for inline-block and table elements */
.r-valign--top { vertical-align: top; }
.r-valign--mid { vertical-align: middle; }
.r-valign--bottom { vertical-align: bottom; }

/* border-box sizing */
.r-border-box { 
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}
.r-content-box, .r-grid-pad {
    /* for when you *intentionally* want to break the grid with padding */
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    -ms-box-sizing: content-box;
    -o-box-sizing: content-box;
    box-sizing: content-box;
}

/* grid sizes */
.whole, .half, .third, .twothird, .twothirds, .quarter, .threequarter, .threequarters, .sixth, .eighth, .ninety, .eighty, .seventy, .sixty, .fifty, .forty, .thirty, .twenty, .ten {    
    float: left;    
    display: block;
    position: relative; 
    /* Just in case someone tries to get cute and add padding to grid elements... */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}
.whole         { width: 100%; }
.half, .fifty 
                     { width: 50%; }
.third         { width: 33.3%; }
.twothird, .twothirds     
                     { width: 66.6%; }
.quarter     { width: 25%; }
.threequarter, .threequarters 
                     { width: 75%; }
.sixth         { width: 16.6%; }
.eighth       { width: 12.5%; }

.ninety       { width: 90%; }
.eighty       { width: 80%; }
.seventy     { width: 70%; }
.sixty         { width: 60%; }
.forty         { width: 40%; }
.thirty       { width: 30%; }
.twenty       { width: 20%; }
.ten             { width: 10%; }

/* grid spacing */
.gw { 
    margin-left: -1em; 
    /* letter-spacing fix for inline-block grid elements borrowed from @csswizardry grids */
    letter-spacing: -0.31em; /* webkit */
    *letter-spacing: normal; /* reset IE < 8 */
    word-spacing: -0.43em; /* IE < 8 && gecko */
}
    .g { 
        padding-left: 1em;         
        display: inline-block;
        vertical-align: top;
        letter-spacing:normal;
		word-spacing: normal;
        /* reset the default floating behaviour on grid widths */
        float: none;
        /* border-box sizing in case you don't use a standard grid width */
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        -o-box-sizing: border-box;
        box-sizing: border-box;
    }
    
    /* half-spacing grid */
    .gw--h { margin-left: -0.5em; }
        .gw--h .g { padding-left: 0.5em; }

/* after grids so that you can apply it and it should kill/apply the float */
.block-mid { margin-left: auto; margin-right: auto; display: block; float: none; }

.pull-left, .fl, .float--left { float: left; }
.pull-right, .fr, .float--right { float: right; }
.pull-none, .killfloat { float: none; }

.clear, .r-clear { clear: both; }
.hide, .r-hide { display: none; }
    .hide--important { display: none !important; } /* now I'm f'ing serious!! */
.allcaps { text-transform: uppercase; }

/* basic clearfix - comes in many flavours! */
.clearfix:after, .fix:after, .group:after, .row:after, .gw:after, .media:after {
    content: "";
    display: table;
    clear: both;
}

/* responsive stuff.  snip here if you don't want to go down this rabbit hole */
@media only screen and (min-width: 80em) {  
    /* (l) trigger classes */
    .block-mid--l { margin-left: auto; margin-right: auto; display: block; float: none; }
    .pull-left--l, .fl--l { float: left; }
    .pull-right--l, .fr--l { float: right; }
    .pull-none--l, .killfloat--l { float: none; }
    
    .whole--l         { width: 100%; }
    .ninety--l       { width: 90%; }
    .eighty--l       { width: 80%; }
    .seventy--l     { width: 70%; }
    .sixty--l         { width: 60%; }
    .half--l, .fifty--l
                                   { width: 50%; }
    .forty--l         { width: 40%; }
    .thirty--l       { width: 30%; }
    .quarter--l     { width: 25%; }
    .twenty--l       { width: 20%; }
    .ten--l             { width: 10%; }
}
@media only screen and (min-width: 100em) { 
    /* (xl) trigger classes */
    .block-mid--xl { margin-left: auto; margin-right: auto; display: block; float: none; }
    .pull-left--xl, .fl--xl { float: left; }
    .pull-right--xl, .fr--xl { float: right; }
    .pull-none--xl, .killfloat--xl { float: none; }

    .whole--xl         { width: 100%; }
    .ninety--xl       { width: 90%; }
    .eighty--xl       { width: 80%; }
    .seventy--xl     { width: 70%; }
    .sixty--xl         { width: 60%; }
    .half--xl, .fifty--xl
                                     { width: 50%; }
    .forty--xl         { width: 40%; }
    .thirty--xl       { width: 30%; }
    .quarter--xl     { width: 25%; }
    .twenty--xl       { width: 20%; }
    .ten--xl             { width: 10%; }
}

@media only screen and (max-width: 60em) {    
    /* 'portrait mode' (m) trigger classes */
    .port-half, .half--m { width: 50%; float: left; clear: none; }    
    
    .block-mid--m { margin-left: auto; margin-right: auto; display: block; float: none; }
    .port-hide, .hide--m { display: none; }
    .port-block, .r-block--m { display: block; }
    .port-clear, .clear--m, .r-clear--m { clear: both; }
    .port-killfloat, .port-pull-none, .port-float--none,
    .pull-none--m, .killfloat--m { float: none; }    
    
    .whole--m         { width: 100%; }
    .ninety--m       { width: 90%; }
    .eighty--m       { width: 80%; }
    .seventy--m     { width: 70%; }
    .sixty--m         { width: 60%; }
    .half--m, .fifty--m
                                   { width: 50%; }
    .forty--m         { width: 40%; }
    .thirty--m       { width: 30%; }
    .quarter--m     { width: 25%; }
    .twenty--m       { width: 20%; }
    .ten--m             { width: 10%; }
}
@media only screen and (max-width: 40em) {    
    html { min-width: auto; }    
    
    /* death to floating columns on mobile! */
    .whole, .half, .third, .twothird, .twothirds, .quarter, .threequarter, .threequarters, .sixth, .eighth, .ninety, .eighty, .seventy, .sixty, .fifty, .forty, .thirty, .twenty, .ten  { width: 100%; margin: 0 auto; }    
        /* just in-case silly people apply the grids to images and it breaks things... */
        img.half, img.third, img.twothird, img.quarter, img.threequarter, img.sixth { width: auto; }
        .palm-half, .half--s { width: 50%; float: left; clear: none; }

    /* mobile-only (s) trigger classes */
    .block-mid--s { margin-left: auto; margin-right: auto; display: block; float: none; }    
    .palm-hide, .hide--s { display: none; }
    .palm-block, .r-block--s { display: block; }
    .palm-clear, .clear--s, .r-clear--s { clear: both; }
    .palm-killfloat, .palm-pull-none, .palm-float--none,
    .killfloat-s, .pull-none--s { float: none; }    
    
    .whole--s         { width: 100%; }
    .ninety--s       { width: 90%; }
    .eighty--s       { width: 80%; }
    .seventy--s     { width: 70%; }
    .sixty--s         { width: 60%; }
    .half--s, .fifty--s
                                   { width: 50%; }
    .forty--s         { width: 40%; }
    .thirty--s       { width: 30%; }
    .quarter--s     { width: 25%; }
    .twenty--s       { width: 20%; }
    .ten--s             { width: 10%; }
}
@media only screen and (max-width: 20em) { 
    /* (xs) trigger classes */
    .half--xs { width: 50%; float: left; clear: none; }
    
    .hide--xs{ display: none; }
    .r-block--xs { display: block; }
    .clear--xs, .r-clear--xs { clear: both; }
    .killfloat-xs, .pull-none--xs { float: none; }    
    
    .whole--xs         { width: 100%; }
    .ninety--xs       { width: 90%; }
    .eighty--xs       { width: 80%; }
    .seventy--xs     { width: 70%; }
    .sixty--xs         { width: 60%; }
    .half--xs, .fifty--xs
                                     { width: 50%; }
    .forty--xs         { width: 40%; }
    .thirty--xs       { width: 30%; }
    .quarter--xs     { width: 25%; }
    .twenty--xs       { width: 20%; }
    .ten--xs             { width: 10%; }
}