/*
    Copyright (C) 2015 A. Sinan Unur
    You may use this stylesheet under the terms of the MIT license
    http://opensource.org/licenses/MIT
    12 columns, breakpoint at 640px, 0.5% between columns

    Also provides the following names for spans:

        span-x-small        : 1/12
        span-small          : 2/12
        span-q1             : 3/12
        span-third          : 4/12
        span-infra          : 5/12, just under half
        span-half           : 6/12
        span-supra          : 7/12, just over half
        span-two-thirds     : 8/12
        span-q3             : 9/12
        span-large          : 10/12
        span-x-large        : 11/12
        span-full           : 12/12

 */

.grid,
.row {
    clear:both;
    padding:0;
    margin:0;
    width:100%;
}

.col {
    padding:0;
    margin:0;
}

.grid .span1,
.grid .span2,
.grid .span3,
.grid .span4,
.grid .span5,
.grid .span6,
.grid .span7,
.grid .span8,
.grid .span9,
.grid .span10,
.grid .span11,
.grid .span12 {
    display:block;
    width:100%;
}

@media only screen and (min-width:640px) {

    .grid .col {
        display:block;
        float:left;
        margin:0 0.25% 0 0.25%;
        padding:0;
    }

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

    .grid .col:last-child {
        margin-right:0;
    }

    .grid .span-x-small,
    .grid .span1 {
        width:7.875%;
    }

    .grid .span-small,
    .grid .span2 {
        width:16.25%;
    }

    .grid .span-q1,
    .grid .span3 {
        width:24.625%;
    }

    .grid .span-third,
    .grid .span4 {
        width:33%;
    }

    .grid .span-infra,
    .grid .span5 {
        width:41.375%;
    }

    .grid .span-half,
    .grid .span6 {
        width:49.75%;
    }

    .grid .span-supra,
    .grid .span7 {
        width:58.125%;
    }

    .grid .span-two-thirds,
    .grid .span8 {
        width:66.5%;
    }

    .grid .span-q3,
    .grid .span9 {
        width:74.875%;
    }

    .grid .span-large,
    .grid .span10 {
        width:83.25%;
    }

    .grid .span-x-large,
    .grid .span11 {
        width:91.625%;
    }

    .grid .span-full,
    .grid .span12 {
        width:100%;
    }
}