/*
*
* !DO NOT EDIT THE CSS FILES, THEY ARE BUILT WITH THE LESS CSS!
* less/content/grid.less
*
* ---------------------------
* Styles associated with the grid system
* ---------------------------
*/
@import "../_mixins/all.less";

// LESS function to combine column and gutter widths for determining individual column widths
.theWidth (@theColumn: 1, @columnWidth: 8%, @gutterWidth: 2.22222222%) {
    width: (@columnWidth * @theColumn) + (@gutterWidth * (@theColumn - 1));
}

#maincontent {
    .grid1, .grid2, .grid3, .grid4, .grid5, .grid6, .grid7, .grid8, .grid9, .grid10, .grid11, .grid12 {
        width: auto;
    }
    
    // support for deprecated grid, to be removed July 1, 2012
    .col, .two_col, .three_col, .four_col {
        width: auto;
    }
}

@media (min-width: 320px) {
    
}
@media (min-width: 480px) {
    #maincontent {
        .grid1, .grid2, .grid3, .grid4, .grid5, .grid6, .grid7, .grid8, .grid9, .grid10, .grid11, .grid12 {
            width: 49%;
            margin-left: 2%;
            float: left;
            display: inline;
        }
        .grid12 {
            width: 100% !important;
            clear: left !important;
            margin-left: 0 !important;
        }
        
        *[class^="grid"]:nth-of-type(odd) {
            margin-left: 0;
            clear: left;
        }
        
        *[class^="grid"] > *[class^="grid"] {
            width: 100%;
            margin-left: 0;
        }
        
        .first:first-of-type {
            margin-left: 0 !important;
            clear: left;
        }
        
        // support for deprecated grid, to be removed July 1, 2012
        .col, .two_col, .three_col, .four_col {
            width: 48%;
            padding-left: 1%;
            padding-right: 1%;
            display: inline;
            float: left;
            
            &.right {
                float: right;
            }
        }
    }
}
@media (min-width: 600px) {
    #maincontent {
        .grid1, .grid2, .grid3, .grid4, .grid5, .grid6, .grid7, .grid8, .grid9, .grid10, .grid11, .grid12 {
            width: 32%;
        }
        
        //clear out rule from 480
        *[class^="grid"]:nth-of-type(odd) {
            margin-left: 2%;
            clear: none;
        }
        
        *[class^="grid"]:nth-of-type(3n+1) {
            margin-left: 0;
            clear: left;
        }
        
        //duplicated in order to take priority
        *[class^="grid"] > *[class^="grid"] {
            width: 100%;
            margin-left: 0;
        }
        
        // support for deprecated grid, to be removed July 1, 2012
        .col {
            width: 23%;
        } 
        
        .two_col {
            width: 48%;
        } 
        
        .three_col {
            width: 73%;
        }
        
        .four_col {
            width: 100%;
        }
        
        //nested columns
        .two_col .col {
            width: 48%;
        }
        
        .three_col .col {
            width: 31%;
        }
        
        .three_col .two_col {
            width: 64%;
        }
    }
}
@media (min-width: 768px) {

    // LESS function to combine column and gutter widths for determining individual column widths
    @gutterWidth: 2.54%;
    @columnWidth: 6%;
    .theWidth (@theColumn: 1) {
        width: (@columnWidth * @theColumn) + (@gutterWidth * (@theColumn - 1));
    }
    #maincontent {
        .grid1, .grid2, .grid3, .grid4, .grid5, .grid6, .grid7, .grid8, .grid9, .grid10, .grid11 {
            margin-left: @gutterWidth;
        }
        .grid1 { .theWidth(1); }
        .grid2 { .theWidth(2); }
        .grid3 { .theWidth(3); }
        .grid4 { .theWidth(4); }
        .grid5 { .theWidth(5); }
        .grid6 { .theWidth(6); }
        .grid7 { .theWidth(7); }
        .grid8 { .theWidth(8); }
        .grid9 { .theWidth(9); }
        .grid10 { .theWidth(10); }
        .grid11 { .theWidth(11); }
        .grid12 { width:100%; }
        
        //clear out rule from 480
        *[class^="grid"]:nth-of-type(odd) {
            margin-left: @gutterWidth;
            clear: none;
            
            &.first {
                clear: left;
            }
        }
        
        //clear out rule for 600
        *[class^="grid"]:nth-of-type(3n+1) {
            margin-left: @gutterWidth;
            clear: none;
            
            &.first {
                clear: left;
            }
        }
        
        .first {
            margin-left: 0 !important;
            clear: left;
        }
        
        *[class^="grid"] > .grid1 {
            .theWidth(1);
            margin-left: @gutterWidth;
        }
        
        *[class^="grid"] > .grid2 {
            .theWidth(2);
            margin-left: @gutterWidth;
        }
        
        *[class^="grid"] > .grid3 {
            .theWidth(3);
            margin-left: @gutterWidth;
        }
        
        *[class^="grid"] > .grid4 {
            .theWidth(4);
            margin-left: @gutterWidth;
        }
        
        *[class^="grid"] > .grid5 {
            .theWidth(5);
            margin-left: @gutterWidth;
        }
        
        *[class^="grid"] > .grid6 {
            .theWidth(6);
            margin-left: @gutterWidth;
        }
        
        *[class^="grid"] > .grid7 {
            .theWidth(7);
            margin-left: @gutterWidth;
        }
        
        *[class^="grid"] > .grid8 {
            .theWidth(8);
            margin-left: @gutterWidth;
        }
        
        *[class^="grid"] > .grid9 {
            .theWidth(9);
            margin-left: @gutterWidth;
        }
        
        *[class^="grid"] > .grid10 {
            .theWidth(10);
            margin-left: @gutterWidth;
        }
        
        *[class^="grid"] > .grid11 {
            .theWidth(11);
            margin-left: @gutterWidth;
        }
    }
}
@media (min-width: 960px) {
    
    @gutterWidth: 2.54%;
    @columnWidth: 6%;
    #maincontent {
        //clear out rule from 480
        *[class^="grid"]:nth-of-type(odd) {
            margin-left: @gutterWidth;
            clear: none;
        }
        
        //clear out rule for 600
        *[class^="grid"]:nth-of-type(3n+1) {
            margin-left: @gutterWidth;
            clear: none;
        }
        
    }
}
@media (min-width: 1040px) {
    @gutterWidth: 24px;
    @columnWidth: 58px;
    .theWidth (@theColumn: 1) {
        width: (@columnWidth * @theColumn) + (@gutterWidth * (@theColumn - 1));
    }
    #maincontent {
        .grid1, .grid2, .grid3, .grid4, .grid5, .grid6, .grid7, .grid8, .grid9, .grid10, .grid11 {
            margin-left: @gutterWidth;
        }
        .grid1 { .theWidth(1); }
        .grid2 { .theWidth(2); }
        .grid3 { .theWidth(3); }
        .grid4 { .theWidth(4); }
        .grid5 { .theWidth(5); }
        .grid6 { .theWidth(6); }
        .grid7 { .theWidth(7); }
        .grid8 { .theWidth(8); }
        .grid9 { .theWidth(9); }
        .grid10 { .theWidth(10); }
        .grid11 { .theWidth(11); }
        .grid12 { width:960px;}
        
        //clear out rule from 480
        *[class^="grid"]:nth-of-type(odd) {
            margin-left: @gutterWidth;
            clear: none;
        }
        
        //clear out rule for 600
        *[class^="grid"]:nth-of-type(3n+1) {
            margin-left: @gutterWidth;
            clear: none;
        }
        
        //duplicated for priority
        *[class^="grid"] > .grid1 {
            .theWidth(1);
            margin-left: @gutterWidth;
        }
        
        *[class^="grid"] > .grid2 {
            .theWidth(2);
            margin-left: @gutterWidth;
        }
        
        *[class^="grid"] > .grid3 {
            .theWidth(3);
            margin-left: @gutterWidth;
        }
        
        *[class^="grid"] > .grid4 {
            .theWidth(4);
            margin-left: @gutterWidth;
        }
        
        *[class^="grid"] > .grid5 {
            .theWidth(5);
            margin-left: @gutterWidth;
        }
        
        *[class^="grid"] > .grid6 {
            .theWidth(6);
            margin-left: @gutterWidth;
        }
        
        *[class^="grid"] > .grid7 {
            .theWidth(7);
            margin-left: @gutterWidth;
        }
        
        *[class^="grid"] > .grid8 {
            .theWidth(8);
            margin-left: @gutterWidth;
        }
        
        *[class^="grid"] > .grid9 {
            .theWidth(9);
            margin-left: @gutterWidth;
        }
        
        *[class^="grid"] > .grid10 {
            .theWidth(10);
            margin-left: @gutterWidth;
        }
        
        *[class^="grid"] > .grid11 {
            .theWidth(11);
            margin-left: @gutterWidth;
        }
    }
}