/* Base */
.g1-row {
    clear: both;
    @include box-sizing( border-box );

    position: relative;
    width: 100%;
    //min-height: 1px;
    margin: 0 auto;

    // clearfix
    &:after {
        display: table;
        clear: both;
        content: "";
    }

    .g1-row {
        width: auto;
        margin-#{$left}: -10px;
        margin-#{$right}: -10px;
    }
}

.g1-row-layout-page {
    > .g1-row-background {
        background-color: $skin_background_color;
    }
}

.g1-row-inner {
    // The inner container should be above the row background
    position: relative;
    z-index: 1;

    max-width: $mobile_grid_width;
    margin: 0 auto;

    font-size: 0;
}

@media only screen and ( min-width: $mobile_breakpoint + 1px ) {
    .g1-row-inner {
        max-width: $grid_width;
    }
}

.g1-row-wide {
    > .g1-row-inner {
        max-width: none;
    }
}


.g1-row-background {
    overflow: hidden;
    margin: 0 auto;

    position: absolute;
    z-index: -2;
    #{$left}: 0;
    #{$right}: 0;
    top: 0;
    bottom: 0;
}


.g1-column {
    display: block;
    @include box-sizing( border-box );

    width: 100%;
    padding: 0 10px;
    margin: 0 auto;

    position: relative;

    vertical-align: top;

    font-size: 1rem;
}


@media only screen and ( max-width: $mobile_breakpoint ) {
    #secondary {
        margin-top: 30px;
    }
}


@media only screen and ( min-width: $mobile_breakpoint + 1px ) {
    .g1-column {
        display: inline-block;
    }

    /* Columns sizes */
    .g1-column-1of2     { width: percentage( 1/2 ); }
    .g1-column-1of3     { width: percentage( 1/3 ); }
    .g1-column-2of3		{ width: percentage( 2/3 ); }
    .g1-column-1of6		{ width: percentage( 1/6 ); }

    #secondary {
        padding-#{$left}: 20px;
    }
}


@if ( $has_mq_1025 ) {
    @media only screen and ( min-width: 1025px ) {
        .g1-row .g1-row {
            margin-#{$left}: -15px;
            margin-#{$right}: -15px;
        }

        .g1-column {
            padding-#{$left}: 15px;
            padding-#{$right}: 15px;
        }

        #secondary {
            padding-#{$left}: 45px;
        }
    }
}

.g1-primary-max {
    width: 100%;
}

.g1-row-padding-m {
    padding-top: 30px;
    padding-bottom: 30px;
}

.g1-row-padding-xs {
    padding-top: 10px;

    > .g1-row-inner {
        > .g1-column-1of3 {
            padding-top: 35px;
        }
    }
}

.g1-current-background {
    background-color: $skin_background_color;
}