/**
 * This file provides styles for the general layout structure.
 *
 * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
 */


/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
/* Col Grid */
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */

.make-grid(xs);

@media screen {
    .container {
        margin: 0 @margin-big;
    }
}

@media @screen_min-xxs {
    .container {
        //border: 1px solid deeppink;
    }
}

@media @screen_min-xs {
    .container {
        //border: 1px solid orangered;
    }
}

@media @screen_min-sm {
    .container {
        //border: 1px solid green;
    }

    .make-grid(sm);
}

@media @screen_min-md {
    .container {
        //border: 1px solid blue;
    }

    .make-grid(md);
}

@media @screen_min-lg {
    .container {
        //border: 1px solid blue;
    }

    .make-grid(lg);
}

@media @screen_min-xlg {
    html {
        font-size: 120%;
    }

    .container {
        //border: 1px solid red;
    }
}

@media @screen_min-xxlg {
    html {
        //font-size: 135%;
    }

    .container {
        //border: 1px solid red;
    }
}

@media @screen_min-md {

    // z-indeces
    .nav-direct p {
        z-index: 1000;
    }

    .top-header {
        z-index: 900;
    }

    .tools .row > .col-xs-12 {
        z-index: 1;
    }

    .header .row > .col-xs-12 {
        z-index: 2;
    }

    .content .row > .col-xs-12 {
        z-index: 3;
    }

    .top-header {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }

    .header, .tools {
        .row {
            position: relative;
            > .col-xs-12 {
                width: 23%;
                box-sizing: border-box;
            }
        }
    }

    .header {
        .row > .col-xs-12 {
            position: relative;
            height: 150px;
            min-height: 6rem;
        }
    }

    .tools {
        .row > .col-xs-12 {
            position: absolute;
        }
    }

    .content {
        .row > .col-xs-12 {
            width: 100%;
            position: relative;
            background-color: #fff;
        }
    }

    .showSidebar {
        .content {
            .row > .col-xs-12 {
                width: 73%;
                float: right;
            }
        }
    }

    .claim {
        .logo {
            position: absolute;
            bottom: 1em;
            overflow: visible;
        }

        .logo img {
            height: 60px;
            width: auto;
        }
    }

    .showSidebar {
        .claim {
            .logo {
                position: absolute;
                bottom: 0;
                height: 1px;
                width: 100%; // fo IE
                overflow: visible;
            }
            .logo img {
                max-width: 100%;
                height: auto;
            }
        }
    }

    .main-sidebar {
        &.search {
            > img {
                width: 100%;
                height: auto;
            }
        }
    }
}