/*

HOW IT WORKS

.section
Splits up the page horizontally. You'll need a few of these to break up the content, and you can use them in your main wrapper, or within other divs.

.col
Divides the section into columns. Each column has a left margin except the first one. Using .col:first-child { margin-left: 0; } means you don't need to use class="last" anywhere.
It works in all browsers since IE6.

.group
Solves floating problems, by forcing the section to self clear its children (aka the clearfix hack). This is good in Firefox 3.5+, Safari 4+, Chrome, Opera 9+ and IE 6+.

.span_1_of_3
Specifies the width of the column. Using percentages means it's 100% fluid.

@media queries
As soon as the screen size gets less than 480 pixels the columns stack and the margins disappear.

EXAMPLE HTML

<div class="section group">
	<div class="grid-col span_6_of_12">
	6 of 12
	</div>
	<div class="grid-col span_6_of_12">
	6 of 12
	</div>
</div>

*/

/* Sections */
#grid-container {
    position: relative;
    width: 100%;
}

.grid-section-wrapper {
    position: relative;
    width: 100%;
}
/* Note: Section wrapper is used just to provide section specific background image/colour around the sides of the section */

.grid-section,
.grid-section-full-width {
    position: relative;
    clear: both;
    overflow: hidden;
    padding: 0;
    margin: 0 auto;
}

/* Column setup */
.grid-col,
.grid-col-xs {
    display: block;
    float: left;
    margin: 1% 0 1% 1%;
}

    .grid-col:first-child,
    .grid-col-xs:first-child {
        margin-left: 0;
    }

.single-centered-grid-col {
    float: none;
    margin: 1% auto;
    overflow: hidden;
}

.grid-col.no-margin-tb,
.grid-col-xs.no-margin-tb,
.single-centered-grid-col.no-margin-tb {
    margin-top: 0;
    margin-bottom: 0;
}

.grid-col.no-margin-t,
.grid-col-xs.no-margin-t,
.single-centered-grid-col.no-margin-t {
    margin-top: 0;
}

.grid-col.no-margin-b,
.grid-col-xs.no-margin-b,
.single-centered-grid-col.no-margin-b {
    margin-bottom: 0;
}

/* Grouping */
.group:before,
.group:after {
    content: "";
    display: table;
}

.group:after {
    clear: both;
}

.group {
    zoom: 1; /* For IE 6/7 */
}

/* Grid of twelve */
.span_12_of_12 {
	width: 100%;
}

.span_11_of_12 {
  	width: 91.58%;
}
.span_10_of_12 {
  	width: 83.16%;
}

.span_9_of_12 {
  	width: 74.75%;
}

.span_8_of_12 {
  	width: 66.33%;
}

.span_7_of_12 {
  	width: 57.91%;
}

.span_6_of_12 {
  	width: 49.5%;
}

.span_5_of_12 {
  	width: 41.08%;
}

.span_4_of_12 {
  	width: 32.66%;
}

.span_3_of_12 {
  	width: 24.25%;
}

.span_2_of_12 {
  	width: 15.83%;
}

.span_1_of_12 {
  	width: 7.416%;
}

/* Base 960 Grid */
/* Width now set using the Boostrap container class */
/*
.grid-section {
    width: 960px;
}
*/

.grid-col.always-wrapped-float,
.grid-col-xs.always-wrapped-float {
    margin-left: 0;
    clear: left;
}

/* Tablet (Portrait) */
/* Note: Design for a width of 768px */
@media only screen and (max-width: 995px) {
    /* Width now set using the Boostrap container class */
    /*
    .grid-section {
        width: 768px;
    }
    */

    /*
    .grid-col.odd {
        margin-left: 0;
        clear: left;
    }

    .span_1_of_12, .span_2_of_12, .span_3_of_12, .span_4_of_12, .span_5_of_12, .span_6_of_12, .span_7_of_12, .span_8_of_12, .span_9_of_12, .span_10_of_12, .span_11_of_12 {
        width: 49.5%;
    }
    */
}

/* Mobile (Landscape) */
/* Note: Design for a width of 480px */
@media only screen and (max-width: 767px) {
    /* Width now set using the Boostrap container class */
    /*
    .grid-section {
        width: 420px;
    }
    */

    .grid-col {
        margin-left: 0;
    }

    .grid-col.span_1_of_12, .grid-col.span_2_of_12, .grid-col.span_3_of_12, .grid-col.span_4_of_12, .grid-col.span_5_of_12, .grid-col.span_6_of_12, .grid-col.span_7_of_12, .grid-col.span_8_of_12, .grid-col.span_9_of_12, .grid-col.span_10_of_12, .grid-col.span_11_of_12, .grid-col.span_12_of_12 {
        width: 100%;
    }

    .single-centered-grid-col.span_1_of_12, .single-centered-grid-col.span_2_of_12, .single-centered-grid-col.span_3_of_12, .single-centered-grid-col.span_4_of_12, .single-centered-grid-col.span_5_of_12, .single-centered-grid-col.span_6_of_12, .single-centered-grid-col.span_7_of_12, .single-centered-grid-col.span_8_of_12, .single-centered-grid-col.span_9_of_12, .single-centered-grid-col.span_10_of_12, .single-centered-grid-col.span_11_of_12, .single-centered-grid-col.span_12_of_12 {
        width: 100%;
    }
}

/* Mobile (Portrait) */
/* Note: Design for a width of 320px */
@media only screen and (max-width: 480px) {
    /* Width now set using the Boostrap container class */
    /*
    .grid-section {
        width: 300px;
    }
    */

    /*.grid-col {
        margin: 1% 0;
    }

    .span_1_of_12, .span_2_of_12, .span_3_of_12, .span_4_of_12, .span_5_of_12, .span_6_of_12, .span_7_of_12, .span_8_of_12, .span_9_of_12, .span_10_of_12, .span_11_of_12, .span_12_of_12 {
        width: 100%;
    }*/

    .grid-col-xs {
        margin-left: 0;
    }

    .grid-col-xs.span_1_of_12, .grid-col-xs.span_2_of_12, .grid-col-xs.span_3_of_12, .grid-col-xs.span_4_of_12, h100-.col-xs.span_5_of_12, .grid-col-xs.span_6_of_12, .grid-col-xs.span_7_of_12, .grid-col-xs.span_8_of_12, .col-xs.span_9_of_12, .grid-col-xs.span_10_of_12, .grid-col-xs.span_11_of_12, .grid-col-xs.span_12_of_12 {
        width: 100%;
    }
}