/**
 * Gridpak Beta SCSS 
 *
 * 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 {
   @include 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 {
            @include span(1, $gutter_pc, $gutter_px, $padding, $max_columns);
        }
        /* Using .col to target ALL columns and make them 100% */
        .span_2,
        .col {
            @include 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 {
            @include span_first;
        }
        
        
        /*
        Add your semantic classnames in alongside their corresponding spans here. e.g.
        
        .span_3,
        .my_semantic_class_name {
            ...
        }
        
        */
        .span_1 {
            @include 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 {
            @include span(2, $gutter_pc, $gutter_px, $padding, $max_columns);
        }
        .navigation {
            height:400px;
        }
        .span_3 {
            @include span(3, $gutter_pc, $gutter_px, $padding, $max_columns);
        }
        .span_4,
        .main_content {
            @include span(4, $gutter_pc, $gutter_px, $padding, $max_columns);
            height:400px;
        }
        .span_5 {
            @include span(5, $gutter_pc, $gutter_px, $padding, $max_columns);
        }
        .span_6,
        .header,
        .footer,
        .related_content {
            @include 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 {
            @include span(1, $gutter_pc, $gutter_px, $padding, $max_columns);
        }
        .span_2 {
            @include span(2, $gutter_pc, $gutter_px, $padding, $max_columns);
        }
        .span_3,
        .navigation,
        .related_content {
            @include span(3, $gutter_pc, $gutter_px, $padding, $max_columns);
            height:400px;
        }
        .span_4,
        .media_block {
            @include span(4, $gutter_pc, $gutter_px, $padding, $max_columns);
            height:200px;
        }
        .span_5 {
            @include span(5, $gutter_pc, $gutter_px, $padding, $max_columns);
        }
        .span_6,
        .main_content {
            @include span(6, $gutter_pc, $gutter_px, $padding, $max_columns);
            height:400px;
        }
        .span_7 {
            @include span(7, $gutter_pc, $gutter_px, $padding, $max_columns);
        }
        .span_8 {
            @include span(8, $gutter_pc, $gutter_px, $padding, $max_columns);
        }
        .span_9 {
            @include span(9, $gutter_pc, $gutter_px, $padding, $max_columns);
        }
        .span_10 {
            @include span(10, $gutter_pc, $gutter_px, $padding, $max_columns);
        }
        .span_11 {
            @include span(11, $gutter_pc, $gutter_px, $padding, $max_columns);
        }
        .span_12,
        .header,
        .footer {
            @include span_first;
            width:100%;
            margin-left:0;
            height:100px;
        }
    }
 
