{% load common %}/*!
 * Gridpak Beta CSS
 *
 * Generator - http://gridpak.com/
 * Created by @erskinedesign
 */
 
 

/* Reusable column setup */
.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;
}


{% for grid in grids %}
    /* {{ forloop.counter }}. {{ grid.col_num }} Column Grid {{ grid.min_width }}px - {% if grid.upper %}{{ grid.upper }}px{% else %}Infinity{% endif %} 
    ----------------------------------------------------------------------------- 
    
    {% for i in grid.col_num|get_range %}Span {{ i }}:    {{ grid|span_width:i }}%
    {% endfor %}Span {{ grid.col_num }}:    100%
    
    ----------------------------------------------------------------------------- */

    @media screen and (min-width: {{ grid.min_width }}px){% if grid.upper %} and (max-width: {{ grid.upper }}px){% endif %} {
        {% if grid.gutter_type == 'px' %}
        .row {
            margin-left:-{{ grid.gutter_width }}{{ grid.gutter_type }};
        }{% endif %}
        .col {
            {% if grid.gutter_type == '%' %}margin-left:{{ grid.gutter_width }}%;{% else %}border-left-width:{{ grid.gutter_width }}px;{% endif %}
        	padding:0 {{ grid.padding_width }}{{ grid.padding_type }};
        }
        {% if grid.gutter_type == '%' %}
        .row .col:first-child {
            margin-left:0;
        }{% endif %}
        
        {% if forloop.counter == 1 %}
        /*
        Add your semantic classnames in alongside their corresponding spans here. e.g.
        
        .span_3,
        .my_semantic_class_name {
            ...
        }
        */{% endif %}
        
        {% for i in grid.col_num|get_range %}.span_{{ i }} {
            width:{{ grid|span_width:i }}%;
        }
        {% endfor %}.span_{{ grid.col_num }} {
            margin-left:0;
            width:100%;
        }
    }
{% endfor %}
