
/****
    Settings
*/

$height-footer: 40px;
$height-header: 150px + $padding-medium*2;

$width-divider: $padding-medium;
$width-nav: 250px;


/****
    Styles
*/

body {
    background: linear-gradient(270deg, $color-neutral $width-divider, transparent $width-divider), #fff;
    background-repeat: repeat-y;
    background-size: $width-nav + $width-divider 100%;
    position: relative;
    padding: 0 0 $height-footer 0;
    font: $font-normal;
    height: 100%;
    min-width: $width-big + $width-nav;
}

body>form {
    height: 100%;
}

#mainContent {
    display: block;
    position: relative;

    article {
        margin-left: $width-divider + $width-nav;
        //max-width: $width-divider + $width-nav + $width-big;
        padding: $padding-big;
        padding-bottom: 39px + $padding-big;
    }

    .side-nav {
        float: left;
        margin-right: $width-divider;
        margin-bottom: $height-footer;
        height: 100%;
        width: $width-nav;
    }

    /* scrolling with full height */
    /*nav {
        bottom: $height-footer;
        height: auto;
        left: 0;
        overflow-y: auto;
        position: absolute;
        top: $height-header;
    }*/
}

#mainFooter {

    display: none; /* Doesn't currently work correctly, so we're removing it. */

    background: $color-neutral;
    font: $font-small;
    height: $height-footer;
    padding: $padding-medium;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;

    a {
    }

    p {
        line-height: inherit;
        margin: 0;
        max-width: none;
    }
}

#mainHeader {
    background: $color-primary;
    color: $color-text-light;
    border-bottom: $padding-medium solid $color-neutral;
    box-sizing: content-box;
    height: $height-header;
    position: relative;
}

#mainLogo {
    padding: $padding-medium;
    width: $width-nav + $width-divider;

    img {
        max-height: $height-header - $padding-medium*2;
        max-width: 100%;
    }
}

#mainNav {

    $link-color: tint($color-text-light, $color-primary);

    bottom: $padding-big;
    color: $link-color;

    position: absolute;
    left: $width-nav + $width-divider;

    input {
        background: none;
        border: none;
        border-bottom: 1px solid $link-color;
        border-radius: 0;
        color: inherit;
        cursor: pointer;
        display: inline-block;
        font: $font-header-3;
        margin: 0;
        min-width: 0;
        padding: $padding-small;

        &:hover {
            border-color: lightened($link-color);
            color: lightened($link-color);
        }
    }
    li {
        display: inline-block;
        margin: 0 $padding-big 0 0;
    }

}

#breadcrumbs {

    $breadback: tint($color-neutral, #fff);

    background: $breadback;
    border-bottom: 1px solid $color-neutral;
    display: block;
    overflow: hidden; /* clearfix */
    text-align: center;

    h3 {
        border: none;
        color: tint($color-text-dark, $breadback);
        font: $font-normal;
        margin: $padding-medium+$padding-small+1px auto;
        padding: 0;
    }
    input {
        float: left;
        &:last-of-type {
            float: right;
        }
    }
}

#breadcrumbs2 {

    $breadback: tint($color-neutral, #fff);

    background: $breadback;
    border-top: 1px solid $color-neutral;
    display: block;
    overflow: hidden;
    text-align: right;

    position: absolute;
    bottom: 0;
    left: $width-nav + $width-divider;
    right: 0;

}