_lt-ie9-foundation-grid.scss

@charset "UTF-8";
/*---------------------------------------------------------------
	IE78 - Zurb Foundation 4 Grid
ˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍ

	https://gist.github.com/replete/7082477

	(an enhanced fork of https://gist.github.com/zurbchris/5068210 )
	
	1) Make sure $row-width-px = your max large breakpoint row width (e.g. 960px)
	2) Make sure $small-screen-px = your minimum large breakpoint row width (e.g. 768px)
	3) IE7 will need box-sizing polyfill, see my fix here: https://gist.github.com/replete/7082518
	
	-@replete

˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭˭*/


/* The Grid ---------------------- */
$half-gutter-px: $column-gutter-px / 2;
.row { width: $row-width-px; max-width: 100%; min-width: $small-screen-px; margin: 0 auto; }
.row .row { width: auto; max-width: none; min-width: 0; margin: 0 -$half-gutter-px; }
.row.large-collapse .column, 
.row.large-collapse .columns { padding: 0; }
.row .row { width: auto; max-width: none; min-width: 0; margin: 0 -$half-gutter-px; }
.row .row.large-collapse { margin: 0; }

.column, 
.columns { float: left; min-height: 1px; padding: 0 $half-gutter-px; position: relative; }
.column.large-centered, 
.columns.large-centered { float: none; margin: 0 auto; }

[class*="column"] + [class*="column"]:last-child { float: right; }
[class*="column"] + [class*="column"].end { float: left; }



$i: 1;
@while $i < $total-columns + 1 {

    .large-#{$i},
    .row .large-#{$i} {
    width: ($i/$total-columns)*100%;
    }

    .row .large-offset-#{$i} {
    margin-left: ($i/$total-columns)*100%;
    }

    $i: $i + 1;
}


$j: 2;
@while $j < $total-columns + 1 {

    .pull-#{$j} {
    right: ($j/$total-columns)*100%;
    }

    .push-#{$j} {
    left: ($j/$total-columns)*100%;
    }

    $j: $j + 1;
}
/* Nicolas Gallagher's micro clearfix */
.row { *zoom: 1; }
.row:before, 
.row:after { content: " "; display: table; }
.row:after { clear: both; }



[class*=large-block-grid-] {
margin-left:-$half-gutter-px;
margin-right:-$half-gutter-px;
}

/* LARGE Block Grids */
.large-block-grid-2 {
list-style: none
}

.large-block-grid-2 > li {
float: left;
width: 50%;
padding: 0 $half-gutter-px $half-gutter-px;
}

.large-block-grid-2 > li:first-child+li {
float: right
}

.large-block-grid-2 > li:first-child+li+li {
clear: both
}

.large-block-grid-3 {
list-style: none
}

.large-block-grid-3 > li {
float: left;
width: 33.3333%;
padding: 0 $half-gutter-px $half-gutter-px;
}

.large-block-grid-3 > li:first-child+li+li {
float: right
}

.large-block-grid-3 > li:first-child+li+li+li {
clear: both
}

.large-block-grid-4 {
list-style: none
}

.large-block-grid-4 > li {
float: left;
width: 25%;
padding: 0 $half-gutter-px $half-gutter-px;
}

.large-block-grid-4 > li:first-child+li+li+li {
float: right
}

.large-block-grid-4 > li:first-child+li+li+li+li {
clear: both
}

.large-block-grid-5 {
list-style: none
}

.large-block-grid-5 > li {
float: left;
width: 20%;
padding: 0 $half-gutter-px $half-gutter-px;
}

.large-block-grid-5 > li:first-child+li+li+li+li {
float: right
}

.large-block-grid-5 > li:first-child+li+li+li+li+li {
clear: both
}

.large-block-grid-6 {
list-style: none
}

.large-block-grid-6 > li {
float: left;
width: 16.6667%;
padding: 0 $half-gutter-px $half-gutter-px;
}

.large-block-grid-6 > li:first-child+li+li+li+li+li {
float: right
}

.large-block-grid-6 > li:first-child+li+li+li+li+li+li {
clear: both
}

.large-block-grid-7 {
list-style: none
}

.large-block-grid-7 > li {
float: left;
width: 14.2857142%;
padding: 0 $half-gutter-px $half-gutter-px;
}

.large-block-grid-7 > li:first-child+li+li+li+li+li+li {
float: right
}

.large-block-grid-7 > li:first-child+li+li+li+li+li+li+li {
clear: both
}

.large-block-grid-8 {
list-style: none
}

.large-block-grid-8 > li {
float: left;
width: 12.5%;
padding: 0 $half-gutter-px $half-gutter-px;
}

.large-block-grid-8 > li:first-child+li+li+li+li+li+li+li {
float: right
}

.large-block-grid-8 > li:first-child+li+li+li+li+li+li+li+li {
clear: both
}

.large-block-grid-9 {
list-style: none
}

.large-block-grid-9 > li {
float: left;
width: 11.111111%;
padding: 0 $half-gutter-px $half-gutter-px;
}

.large-block-grid-9 > li:first-child+li+li+li+li+li+li+li+li {
float: right
}

.large-block-grid-9 > li:first-child+li+li+li+li+li+li+li+li+li {
clear: both
}

.large-block-grid-10 {
list-style: none
}

.large-block-grid-10 > li {
float: left;
width: 10%;
padding: 0 $half-gutter-px $half-gutter-px;
}

.large-block-grid-10 > li:first-child+li+li+li+li+li+li+li+li+li {
float: right
}

.large-block-grid-10 > li:first-child+li+li+li+li+li+li+li+li+li+li {
clear: both
}

.large-block-grid-11 {
list-style: none
}

.large-block-grid-11 > li {
float: left;
width: 9.0909%;
padding: 0 $half-gutter-px $half-gutter-px;
}

.large-block-grid-11 > li:first-child+li+li+li+li+li+li+li+li+li+li {
float: right
}

.large-block-grid-11 > li:first-child+li+li+li+li+li+li+li+li+li+li+li {
clear: both
}

.large-block-grid-12 {
list-style: none
}

.large-block-grid-12 > li {
float: left;
width: 8.333333%;
padding: 0 $half-gutter-px $half-gutter-px;
}

.large-block-grid-12 > li:first-child+li+li+li+li+li+li+li+li+li+li+li {
float: right
}

.large-block-grid-12 > li:first-child+li+li+li+li+li+li+li+li+li+li+li+li {
clear: both
}

//TODO: Implement above static CSS into sass function, in order to spit out total-columns

// $k: 2;
// @while $k < $total-columns + 1 {

//     .large-block-grid-#{$k} {
//     list-style:none;
//     }

//     .large-block-grid-#{$k} {
//     list-style:none;
//     }

//     .push-#{$k} {
//     left: ($k/$total-columns)*100%;
//     }

//     $k: $k + 1;
// }