/**
 * Gridpak Beta LESS
 *
 * Generator - http://gridpak.com/
 * Created by @erskinedesign
 */

/* Reusable column setup */

.mixin-col {
     border:0px solid rgba(0,0,0,0);
        float:left;
        -webkit-box-sizing:border-box;
        -moz-box-sizing:border-box;
        box-sizing:border-box;
        -moz-background-clip:padding-box !important;
        -webkit-background-clip:padding-box !important;
        background-clip:padding-box !important;
}

.col {
   .mixin-col;
   background:#777;
   margin-bottom:12px;
}

.mixin-span(@num, @gutter_pc, @gutter_px, @padding, @max_columns) {
    @one_col: (100% - (@gutter_pc * (@max_columns - 1))) / @max_columns;
    width:(@one_col * @num) + (@gutter_pc * (@num - 1));
    border-left-width:@gutter_px;
    padding:@padding;
    margin-left:@gutter_pc;
}

.mixin-span_first {
    margin-left:0;
}
 
body,
html,
div {
     margin: 0;
     padding:0;
 }
 
/*
Page is our center aligned 95% width container. We have set it's 'position' as relative
so that the Gridpak overlay will appear in the correct position. We have also updated
the gridpak.js file to use '.page' as it's container.
*/
.page {
     margin: 0 auto;
     max-width: 95%;
     overflow:hidden;
     position:relative;
}



    /* 1. 2 Column Grid 0px - 319px 

    Span 1:   50%
    Span 2:   100%
    
    ----------------------------------------------------------------------------- */	
    
	@media screen and (min-width: 0px) and (max-width: 319px) {
        
        .row {
            margin-left:-12px;
        }
        
        .col {
            border-left-width:12px;
            padding:0 12px;
            height:100px;
        }
        
        /* --- Gridpak variables ---*/ 
        @max_columns: 2;
        @padding: 0 12px;
        @gutter_px: 12px;
        @gutter_pc: 0;
        

        
        
        /*
        Add your semantic classnames in alongside their corresponding spans here. e.g.
        
        .span_3,
        .my_semantic_class_name {
            ...
        }
        
        */
        .span_1 {
            .mixin-span(1, @gutter_pc, @gutter_px, @padding, @max_columns);
        }
        /* Using .col to target ALL columns and make them 100% */
        .span_2,
        .col {
            .mixin-span_first;
            width:100%;
            margin-left:0;
        }
    }

    /* 2. 6 Column Grid 320px - 919px 

    Span 1:   15.0%
    Span 2:   32.0%
    Span 3:   49.0%
    Span 4:   66.0%
    Span 5:   83.0%
    Span 6:   100%
    
    ----------------------------------------------------------------------------- */	
    
	@media screen and (min-width: 320px) and (max-width: 919px) {
        
        .col {
            margin-left:2%;
            padding:0 2%;
        }
        
        /* --- Gridpak variables ---*/ 
        @max_columns: 6;
        @padding: 0 2%;
        @gutter_px: 0;
        @gutter_pc: 2%;
        

        
        .row .col:first-child {
            .mixin-span_first;
        }
        
        
        /*
        Add your semantic classnames in alongside their corresponding spans here. e.g.
        
        .span_3,
        .my_semantic_class_name {
            ...
        }
        
        */
        .span_1 {
            .mixin-span(1, @gutter_pc, @gutter_px, @padding, @max_columns);
        }
        /*
        Here we have used our semantic names 'navigation' and 'media_block' and appended
        them next to their corresponding widths
        */
        .span_2,
        .navigation,
        .media_block {
            .mixin-span(2, @gutter_pc, @gutter_px, @padding, @max_columns);
        }
        .navigation {
            height:400px;
        }
        .span_3 {
            .mixin-span(3, @gutter_pc, @gutter_px, @padding, @max_columns);
        }
        .span_4,
        .main_content {
            .mixin-span(4, @gutter_pc, @gutter_px, @padding, @max_columns);
            height:400px;
        }
        .span_5 {
            .mixin-span(5, @gutter_pc, @gutter_px, @padding, @max_columns);
        }
        .span_6,
        .header,
        .footer,
        .related_content {
            .mixin-span_first;
            width:100%;
            height:100px;
            margin-left:0;
        }
    }

    /* 3. 12 Column Grid 920px - Infinity 

    Span 1:   8.33333333333%
    Span 2:   16.6666666667%
    Span 3:   25.0%
    Span 4:   33.3333333333%
    Span 5:   41.6666666667%
    Span 6:   50.0%
    Span 7:   58.3333333333%
    Span 8:   66.6666666667%
    Span 9:   75.0%
    Span 10:   83.3333333333%
    Span 11:   91.6666666667%
    Span 12:   100%
    
    ----------------------------------------------------------------------------- */	
    
	@media screen and (min-width: 920px) {
        
        .row {
            margin-left:-12px;
        }
        
        .col {
            border-left-width:12px;
            padding:0 12px;
        }
        
        /* --- Gridpak variables ---*/ 
        @max_columns: 12;
        @padding: 0 12px;
        @gutter_px: 12px;
        @gutter_pc: 0;
        

        
        
        /*
        Add your semantic classnames in alongside their corresponding spans here. e.g.
        
        .span_3,
        .my_semantic_class_name {
            ...
        }
        
        */
        .span_1 {
            .mixin-span(1, @gutter_pc, @gutter_px, @padding, @max_columns);
        }
        .span_2 {
            .mixin-span(2, @gutter_pc, @gutter_px, @padding, @max_columns);
        }
        .span_3,
        .navigation,
        .related_content {
            .mixin-span(3, @gutter_pc, @gutter_px, @padding, @max_columns);
            height:400px;
        }
        .span_4,
        .media_block {
            .mixin-span(4, @gutter_pc, @gutter_px, @padding, @max_columns);
            height:200px;
        }
        .span_5 {
            .mixin-span(5, @gutter_pc, @gutter_px, @padding, @max_columns);
        }
        .span_6,
        .main_content {
            .mixin-span(6, @gutter_pc, @gutter_px, @padding, @max_columns);
            height:400px;
        }
        .span_7 {
            .mixin-span(7, @gutter_pc, @gutter_px, @padding, @max_columns);
        }
        .span_8 {
            .mixin-span(8, @gutter_pc, @gutter_px, @padding, @max_columns);
        }
        .span_9 {
            .mixin-span(9, @gutter_pc, @gutter_px, @padding, @max_columns);
        }
        .span_10 {
            .mixin-span(10, @gutter_pc, @gutter_px, @padding, @max_columns);
        }
        .span_11 {
            .mixin-span(11, @gutter_pc, @gutter_px, @padding, @max_columns);
        }
        .span_12,
        .header,
        .footer {
            .mixin-span_first;
            width:100%;
            margin-left:0;
            height:100px;
        }
    }
 
