@import "tools";

$header_bg: #191919;


#header-wrapper {
    position: relative;

    /* Upper-half both sides dark background */
    &:before {
        content: " ";
        display: block;
        z-index: -1;
        position: absolute;
        top: 0;
        @include size-px(bottom, 45);
        left: 0;
        width: 100%;
        background-color: $header_bg;
    }

    /* Left-side dark background */
    &:after {
        content: " ";
        display: block;
        z-index: -1;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 50%;
        background-color: $header_bg;
    }
}


header#main {
    @include size-px(line-height, 20); /* Make links easier to click when wrapped. */
    background-color: $header_bg;
    color: #bbb;

    @media screen and (min-width: 62.5em) {
        position: relative;
        @include size-px(height, 94);
        @include size-px(width, 975);
        margin: auto;
    }

    a {
        color: #17CFDB;
    }

    #logo {
        display: block;
        @include size-px(height, 94);
        @include size-px(width, 94);

        @media screen and (min-width: 24em) {
            float: left;
        }

        img {
            display: block;
        }
    }

    #tagline {
        margin-top: 0;
        @include size-px(margin-left, 5);
        @include size-px(margin-right, 5);
        padding-top: 0;
        @include size-px(font-size, 11);

        @media screen and (min-width: 24em) {
            @include size-px(padding-top, 6);
            @include size-px(font-size, 13);
            text-align: right;
        }

        @media screen and (min-width: 62.5em) {
            position: absolute;
            @include size-px(top, 10);
            @include size-px(left, 255);
            @include size-px(margin-left, 0);
        }
    }

    #user-info {
        margin-top: 0;
        @include size-px(margin-left, 5);
        @include size-px(margin-right, 5);
        padding-top: 0;
        @include mono;
        @include size-px(font-size, 10);
        position: relative;

        @media screen and (min-width: 24em) {
            @include size-px(padding-top, 15);
            text-align: right;
        }
        @media screen and (min-width: 62.5em) {
            position: absolute;
            top: 0;
            right: 0;
            @include size-px(margin-left, 0);
            @include size-px(margin-right, 0);
        }

        /* We want submenu on far left on small screens. */
        .hidden-box-wrapper {
            position: static;
            @media screen and (min-width: 24em) {
                position: relative;
            }
        }

        #user-menu {
            display: none;

            text-align: left;
            line-height:1.6em;
            left: 0;
            right: 0;
            top: 2em;

            @media screen and (min-width: 15em) {
                right: auto;
                width: 15em;
            }

            a {
                color: #0D7E85;
            }
        }
    }

    form#search-area {
        position: relative;
        clear: both;
        @include size-px(height, 45);
        background: #444444;
        color: white;

        @media screen and (min-width: 62.5em) {
            position: absolute;
            @include size-px(top, 49);
            @include size-px(left, 240);
            @include size-px(right, 0);
        }

        #search-field {
            position: absolute;
            @include size-px(top, 5);
            @include size-px(left, 5);
            @include size-px(right, 113);

            label {
                @include hidden-label;
            }
            input#search {
                z-index: 200;
                position: relative;
                @include size-px(height, 33);
                width: 100%;
                padding: 0;
                @include size-px(padding-left, 13);
                @include size-px(line-height, 32.5);

                border: none;
                @include size-px(border-radius, 5);
                box-shadow: 0 0 0.5em #444444 inset;

                font-family: Georgia;
                @include size-px(font-size, 13);
                background-color: white;
                color: black;

                /* styling search placeholder */
                &::placeholder
                {
                    font-family: Georgia;
                    font-style: italic;
                    color: #767676;
                }
                &::-webkit-input-placeholder
                {
                    font-family: Georgia;
                    font-style: italic;
                    color: #767676;
                }
                &::-moz-placeholder
                {
                    font-family: Georgia;
                    font-style: italic;
                    color: #767676;
                }
            }
        }
        button {
            display: inline-block;
            position: absolute;
            top: 0;
            right: 0;
            @include size-px(height, 45);
            @include size-px(width, 94);
            margin: 0;
            padding: 0;

            border: none;

            @include mono;
            @include size-px(font-size, 11);
            background: #018189;
            color: white;
        }
    }
}