.header-wrapper { 
    @include breakpoint(beta) {
        border-bottom: 1px #f3efef solid;
    }
}
.site-banner {
    @extend %clearfix;
    margin: 0 auto;
    @include constrain_wide;
    @include smcaps;
    #logo {
        a {
            @include fontsize(32);
            text-decoration: none;
            display: block;
            font-weight: 300;
            font-family: 'carrois_gothicregular', Helvetica, sans-serif;
            color: $brown;
            &:before {
                display: block;
                content: "home-icon";
                text-indent: -9999em;
                background: url("logo-new-@2x-treeonly.png") center top no-repeat;
                width: 95px;
                height: 65px;
                background-size: 95px;
                background-size: 85px;
                //if sox
                #background: url("img/soxlogo.svg") center top no-repeat;
                #background-size: 60px;
                display: block;
                margin: 5px auto 0;
            }
        }
        .sitesubtitle {
            display: block;
            margin-top: -8px;
            font-family: $fancy_serif;
            font-style: italic;
            font-weight: 300;
            @include fontsize(12);
        }
    }
    nav {
        border-top: 1px #444444 dotted;
        border-bottom: 1px #444444 dotted;
        //box-shadow: 0 3px 8px 0 #e6e6e6
        padding-left: 20px;
        padding-right: 20px;
        margin-right: -20px;
        margin-left: -20px;
        margin-top: 1em;
        padding: 0.25em 0.5em;
        a {
            text-decoration: none;
            color: lighten(#505050, 20);
            &:visited {
                color: lighten(#505050, 20);
            }
        }
        ul {
            @include smcaps;
            @include fancy_sans;
            @include fontsize(13);
            max-width: 100%;
            font-weight: 600;
            margin-top: 0.5em;
            margin-bottom: 0.5em !important;
            padding: 0;
            @include constrain(85%);
        }
        li {
            display: inline;
            margin: 0 0.25em;
            &:after {
                content: "\00b7";
                color: #999999;
                padding-left: 0.75em;
            }
            &:last-of-type {
                margin-right: 0;
                &:after {
                    content: " ";
                }
            }
        }
        @include breakpoint(beta) {
        }
    }
    @include breakpoint(beta) {
        height: 90px;
        position: relative;
        #logo {
            float: left;
            position: absolute;
            bottom: 8px;
            text-align: left;
            a {
                width: 360px;
                line-height: 2.5em;
                &:before {
                    display: inline-block;
                    background-size: 102px;
                    //if sox
                    #background: url("img/soxlogo.svg") center bottom no-repeat;
                    #background-size: 70px;
                    height: 85px;
                    width: 105px;
                    //if sox
                    #width: 80px;
                    margin-right: 10px;
                }
            }
            .sitesubtitle { 
                margin-left: 116px;
                //if sox
                #margin-left: 90px;
                margin-top: -30px;
            }
        }
        nav {
            float: right;
            border: none;
            margin: 42px 0 0 0;
            padding: 0;
            ul {
                max-width: 50em;
            }
        }
    }
}

.black header h1 a, .dark header h1 a {
    color: $body_font_light;
    &:before {
        background: url("logo-new-@2x-treeonly.png") center -75px no-repeat;
        background-size: 92px;
    }
    @include breakpoint(gamma) {
        &:before {
            background-position-y: -65px;
        }
    }
}


.black nav[role="navigation"] a, .dark nav[role="navigation"] a {
    color: $body_font_light;
}


.header-wrapper {
    @extend %clearfix;
    margin-bottom: 1em;
    @include breakpoint(beta) {
        border-bottom: 1px #f3efef solid;
        position: relative;
    }
    @include breakpoint(gamma) {
        max-width: $breakpoint-gamma;
        margin-left: auto;
        margin-right: auto;
    }
    @include breakpoint(delta) {
        margin-top: 1.3rem; 
        max-width: $breakpoint-delta;
    }
    @include breakpoint(epsilon) {
        margin-top: 1.3rem; 
        max-width: $max_width;
    }
}
.detail .header-wrapper, .detail #breadcrumbs {
    transition: opacity .5s;
    @include breakpoint(epsilon) {
        opacity: .8;
        &:hover {
            opacity: 1;
        }
    }
}

.black .header-wrapper, .dark .header-wrapper {
    @include breakpoint(beta) {
        border-bottom: 1px $body_font_light solid;
    }
}