/*

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="col span_6_of_12">
	6 of 12
	</div>
	<div class="col span_6_of_12">
	6 of 12
	</div>
</div>

*/

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

.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 */

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

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

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

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

.multi-centered-col {
    float: none;
    display: inline-block;
    margin: 1% auto;
}

/* 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 */
.section-wrapper {
    padding: 0 35px;
}

.section {
    /*width: 960px;*/
    max-width: 1140px;
}

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

/* Tablet (Portrait) */
/* Note: Design for a width of 768px */
@media only screen and (max-width: 995px) {
    .section {
        /*Maintain as much screen width as possible and allow the section wrapper to provide l+r padding*/
        /*width: 768px;*/
    }

    /*
    .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) {
    .section-wrapper {
        padding: 0;
    }

    .section {
        width: 420px;
    }

    .col {
        margin-left: 0;
    }

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

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

/* Mobile (Portrait) */
/* Note: Design for a width of 320px */
@media only screen and (max-width: 480px) {
    .section-wrapper {
    }

    .section {
        width: 300px;
    }

    /*.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%;
    }*/

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

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