.container{
    position : relative;
    & when not(@grid-container-width = 100%){
        margin-left  : auto;
        margin-right : auto;

        & when not(@responsive) and not(@adaptive){
            width : @grid-container-width;
        }
        & when (@responsive){
            width     : 95%;
            max-width : @grid-container-width;
        }
        & when (@adaptive) and not(@responsive){
            width     : 95%;
            max-width : @grid-container-width;

            @media only screen and (max-width : @grid-container-width){
                &{
                    max-width : @responsive-size-tablet;
                }
            }
            @media only screen and (max-width : @responsive-size-tablet){
                &{
                    max-width : @responsive-size-mobile;
                }
            }
        }
    }
    .clearfix-mixin();
}

// GRID CSS
//==================================================
[class*=" grid_"], [class^="grid_"], [class*="-grid_"], [class*="_grid_"]{
    & when (@grid-system){
        float        : left;
        position     : relative;
        width        : 100% - @grid-margin-width;
        margin-left  : (@grid-margin-width / 2) !important;
        margin-right : (@grid-margin-width / 2) !important;
    }
}
.grid();

// COLUMN LIST CSS
//==================================================
[class*=" column_"], [class^="column_"], [class*="-column_"], [class*="_column_"]{
    & when (@column-system){
        font-size : 0 !important;

        & > *{
            font-size    : @font-size-base;
            float        : none !important;
            .inline-block(top);
            width        : 100% - @column-margin-width !important;
            margin-left  : (@column-margin-width / 2) !important;
            margin-right : (@column-margin-width / 2) !important;
        }

        &.mb{
            & > *{
                margin-bottom : @column-margin-width;
            }
        }

        &.bottom{
            & > *{
                vertical-align : bottom;
            }
        }

        &.middle{
            & > *{
                vertical-align : middle;
            }
        }

        &.full-width when (@column-system-fullWidth){
            & > *{
                width        : 100% !important;
                margin-right : @column-margin-width !important;
                margin-left  : 0 !important;
            }
        }

        &.margin-none when (@column-system-marginNone){
            & > *{
                width        : 100% !important;
                margin-left  : 0 !important;
                margin-right : 0 !important;
            }
        }

        &.one-line{
            & > *{
                margin-bottom : 0;
            }
        }

        & > .generator-links{ display : block; }

        &.larger > *, & > .larger{
            font-size : unit(@font-size-base * @font-size-larger, px) !important;
        }

        &.large > *, & > .large{
            font-size : unit(@font-size-base * @font-size-large, px) !important;
        }

        &.small > *, & > .small{
            font-size : unit(@font-size-base * @font-size-small, px) !important;
        }
    }
}
.column();