header[role="banner"] {
    margin: 0 auto;
    @include smcaps;
    a {
        text-decoration: none;
    }
    h1 {
        margin: -10px 0 0 0;
        padding: 0;
    }
    h1 a {
        display: block;
        margin: 0.25em auto 0 auto;
        font-size: 0.875em;
        font-weight: 300;
        font-family: 'carrois_gothicregular', Helvetica, sans-serif;
        line-height: 0.75em;
        color: $brown;
    }
    h1 a:before {
        content: "home-icon";
        text-indent: -9999em;
        width: 95px;
        height: 75px;
        background: url("logo-new-@2x-treeonly.png") center top no-repeat;
        background-size: 95px;
        background-size: 85px;
        display: block;
        margin: 0.75em auto 0;
    }
    h2 {
        margin-top: 0.25em;
        font-size: 0.675em;
        font-style: italic;
        font-weight: 300;
    }
    @include breakpoint(beta) {
        float: left;
        position: relative;
        bottom: 0;
        h1, h2 {
            text-align: left;
        }
        h1 {
            width: 360px;
        }
        h1 a { line-height: 2.5em;}
        h1 a:before {
            display: inline-block;
            background-size: 102px;
            height: 85px;
            width: 105px;
            margin-right: 10px;
        }
        h2 { margin-left: 116px;
             margin-top: -30px;
        }
    }
}
.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;
        }
    }
}


nav[role="navigation"] {
    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: #505050;
    }
    ul {
        @include smcaps;
        max-width: 100%;
        font-weight: 300;
        margin-top: 0.5em;
        margin-bottom: 0.5em;
        padding: 0;
        @include constrain(85%);
    }
    li {
        display: inline;
        margin: 0 0.25em;
        &:after {
            content: "\00b7";
            color: #999999;
            padding-left: 0.75em;
        }
    }
    li.last {
        margin-right: 0;
        &:after {
            content: " ";
        }
    }
    @include breakpoint(beta) {
        float: right;
        border: none;
        margin: 52px 0 0 0;
        padding: 0;
        ul {
            max-width: 50em;
        }
    }
}
.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 $brown solid;
        position: relative;
    }
    @include breakpoint(gamma) {
        max-width: $breakpoint-gamma;
        margin-left: auto;
        margin-right: auto;
    }
    @include breakpoint(delta) {
        margin-top: 1.5em; 
        max-width: $breakpoint-delta;
    }
    @include breakpoint(epsilon) {
        margin-top: 1.5em; 
        max-width: $max_width;
    }
}

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