html {
    font-family: $primary-font;
}

body {
    width: 100%;
    margin: 0 auto;
    background: $grey-4;
}


#global-header {
     display: block;
     position: fixed;
     left: 0;
     top: 0;
     width: 100%;
     z-index: 10;
     background: white;

     #global-header-bar {
        width: 944px;
        max-width: calc(100% - 32px);
        height: 8px;
        margin: 0 auto;
        background: $primary-lighter;
    }

    #global-header-tabs{
        display: block;
        width: 100%;
        background-color: $grey-4;
        line-height: 48px;
        margin: 0 auto;
        border: 1px solid $grey-2;
        
        li{
            display: inline-block;
            padding: 0 32px;
            list-style: none;
            font-weight: bold;

            &:hover{
                cursor: pointer;
            }

            &:active, &.active{
                color: $primary;
                border-bottom: 2px solid $primary;
            }
        }
    }
}

#header-wrapper {
    padding: 0.5em 0 0.5em 0;
    display: block;
    width: 100%;
    background: $primary;
    color: white;
    height: 2em;
    box-sizing: content-box;

    #header-contents {
        clear: both;
        margin: 0 auto;
        width: 944px;
        max-width: calc(100% - 32px);

        // @media screen and (max-width: 1023px) {
        //     width: 960px;
        //     // max-width: calc(100% - 32px);
        // }

        @media screen and (min-width: 1024px) {
            width: 100%;
            padding: 0 40px;
        }
    }
}

#header-float-left {
    // position: absolute;
    // left: 2.5em;
    float: left;
}

#header-float-right {
    // position: absolute;
    // right: 2.5em;
    float: right;
}

#header-logo {

    #coat-of-arms {
        float: left;
        margin-right: 1.5em;
        background-image: url('/images/coat-of-arms-logo.svg');
        background-repeat: no-repeat; 
        width: 36px;
        height: 32px;
        float: left;
    }

    a {
        text-decoration: none;
        
        .name {
            float: left;
            font-size: 28px;
            line-height: 32px;
            letter-spacing: 0.8;
            color: white;
            font-weight: bold;

            &:hover {
                text-decoration: underline;
            }

            &:visited {
                color: white;
            }
        }
    }
}

#user-account {
    #user-account-email {
        line-height: 32px;
        font-size: 16px;
        float: right;

        &:after {
            content: ':';
        }
    }

    #logout {
        margin-left: 24px;
        line-height: 32px;
        font-size: 16px;
        float: right;
        
        a {
            color: white;

            &:hover {
                text-decoration: none;
            }

            &:visited {
                color: white;
            }
        }
    }
}

*, *::before, *::after {
    box-sizing: inherit;
}

div {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

#content {
    margin: 0 auto;
    padding-bottom: 2em;
    margin-top: 3em; 
    background: white;

    &.has-bar{
        margin-top: 3.5em;
    }
}

@mixin container() {
    box-sizing: border-box;
    max-width: calc(100% - 16px);
    margin: 0 auto;
    // padding: 0 8px;
    width: 960px;
    min-height: 1px;
}

.container {
    @include container();
}

.container-fluid {
    @include container();

    @media screen and (min-width: 1024px) {
        width: 100%;
        padding: 0 32px;
    }
}

.container-dialog{
    box-sizing: border-box;
    background: $grey-4;
    min-height: calc(100% - 3.5em);
    width: 100%;
    padding-top: 3.5em;

    @media screen and (max-width: 672px) {
        padding-top: 0.5em;
    }

    .dialog{
        padding: 32px;
        width: calc(100% - 32px);
        max-width: 640px;
        margin: 0 auto;
        background: white;
        border-radius: 4px;
        box-shadow: 0px 1px 3px 2px $grey-3;
        margin-bottom: -2em;
    }
}

.row {
    // margin: 0 -8px;
    //clear: both;
    box-sizing: border-box;
    font-size: 0;
}

@mixin col($ratio) {
    width: percentage($ratio);
    position: relative;
    min-height: 1px;
    padding: 0 8px;
    display: inline-block;
    vertical-align: top;
    font-size: $normal-font-size;
}

@for $i from 1 through 12 {
    .col-#{$i} {
        @include col($i / 12);
    }
}