/* If you ever get too fed up maintaining this file, then here is a simpler approach: */
/*
header.great-header {
    filter: invert(100%) grayscale(100%) brightness(115%);
}
header.great-header {
    border-bottom: 1px solid #333;
}
*/

header.great-header,
.Header.great-header,
.Header-old.great-header {
    color: #333;
    background-color: #f5f5f5;
    border-bottom: 1px solid #e5e5e5
}

.great-header .scoped-search .form-control.focus .header-search-scope {
    color: #4078c0;
    background-color: #edf2f9;
    border-color: #c6d7ec;
}

.great-header .read-only-mode-banner {
    background-color: #f8e45f;
    border-bottom-color: #f6dc2e
}

.great-header .header-logo-invertocat, .great-header .header-logo-wordmark {
    color: #555
}

.great-header .notification-indicator .mail-status {
    color: #fff;
    background-image: -webkit-linear-gradient(#7aa1d3, #4078c0);
    background-image: linear-gradient(#7aa1d3, #4078c0);
    border: 2px solid #f3f3f3
}

.great-header .notification-indicator:hover .mail-status {
    background-color: #4078c0;
    /* background-image: linear-gradient(#4078c0, #4078c0); */
}

header.great-header .header-search-scope,
.Header.great-header .header-search-scope,
.Header-old.great-header .header-search-scope {
    font-size: inherit;
    color: #767676;
    border-right: 1px solid #eee;
}

.great-header .scoped-search .form-control.focus .header-search-scope {
    color: #4078c0;
    background-color: #edf2f9;
    border-color: #c6d7ec
}

/* The link text, notification indicator, and logo used to be darker */
.great-header .HeaderNavlink,
/* The .HeaderMenu--bright class is set on the header when you are not logged in */
/* This handles the main header links */
.great-header .HeaderMenu--bright .HeaderNavlink,
.great-header .notification-indicator,
.great-header .Header-link,
.great-header .HeaderMenu-link,
.page-responsive .great-header .HeaderMenu-link,
.great-header .header-logo-invertocat, .great-header .header-logo-wordmark {
    color: #333;
}

/* This handles the "Sign in" or "Sign up" links + text */
.great-header .HeaderMenu--bright .HeaderNavlink .text-white,
.great-header .text-white {
    color: #333 !important;
}
.great-header .HeaderMenu--bright .HeaderNavlink .text-gray {
    color: #bbb !important;
}
.great-header .border-gray-dark {
    border-color: #333 !important;
}

/* Links are blue when hovered */
.great-header .HeaderNavlink:hover,
.great-header .HeaderNavlink:focus,
.great-header .Header-link:focus,
.great-header .Header-link:hover,
.great-header .notification-indicator:hover,
.great-header .notification-indicator:focus,
.great-header .header-logo-invertocat:hover,
.great-header .header-logo-wordmark:hover {
    color: #4078c0;
}

/* The new white-on-black header links fade a little bit when hovered */
/* So we could do the same for black-on-white */
.great-header .HeaderMenu-link:hover,
.great-header .HeaderMenu-link:focus,
.page-responsive .great-header .HeaderMenu-link:hover,
.page-responsive .great-header .HeaderMenu-link:focus,
.great-header .HeaderMenu-details[open] .HeaderMenu-link:hover,
.great-header .HeaderMenu-details[open] .HeaderMenu-link:focus,
.page-responsive .great-header .HeaderMenu-details[open] .HeaderMenu-link:hover,
.page-responsive .great-header .HeaderMenu-details[open] .HeaderMenu-link:focus {
    color: #888;
    /* Actually to be more consistent with their black-on-white UI, they should darken imperceptibly when hovered. */
    /* But that's daft so no */
    /*color: #24292e !important;*/
}


/* The original Github CSS made the logo blue on hover.  The new Github CSS leaves the logo unchanged on hover. */
/* We will do our own thing, and soften the dark grey logo on hover. */
/* This is more consistent with the light grey logo in the footer (which darkens on hover). */
.great-header .octicon {
    /* We need !important to override the new rule .text-white { color: #fff!important } */
    color: #333 !important;
    transition: .4s all;
}
.great-header .octicon:hover {
    color: #888 !important;
    /*color: #24292e !important;*/
}

.great-header .HeaderNavlink:hover .dropdown-caret, .great-header .HeaderNavlink:focus .dropdown-caret {
    border-top-color: #4078c0
}

/* The new dropdown arrows / carets / chevrons / chevons (sic) */
.great-header .HeaderMenu-link .icon-chevon-down-mktg,
.page-responsive .great-header .HeaderMenu-link .icon-chevon-down-mktg {
    stroke: #333;
}
.great-header .HeaderMenu-details[open] .icon-chevon-down-mktg,
.page-responsive .great-header .HeaderMenu-details[open] .icon-chevon-down-mktg {
    stroke: #24292e;
}

/*
.great-header .header-search {
    font-size: 14px
}
*/

.great-header .header-search-wrapper {
    background: #fff;
    /*
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.075);
    */
    /* The search box had a gentle border */
    border: 1px solid #ddd;
    /*
    font-size: 14px;
    min-height: 0;
    */
    /* Custom improvement: Make the search box appear good at all scales */
    border: none;
    box-shadow: 0 0 0px 1px #ddd;
}


.great-header .header-search-wrapper.focus {
    background: #fff;
    border-color: #51a7e8;
    outline: none;
    color: inherit;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .075), 0 0 5px rgba(81, 167, 232, .5);
}

/*
.great-header .header-search-scope {
    font-size: 12px;
    line-height: inherit;
    min-height: 0;
}

header.great-header .header-search-input,
.Header.great-header .header-search-input,
.Header-old.great-header .header-search-input {
    min-height: 26px;
}
*/

.great-header .header-search-input::-webkit-input-placeholder,
.great-header .header-search-input::placeholder {
    color: rgba(0,0,0,.5)
}

.great-header .form-control {
    color: #333 !important;
    background-color: #fff !important;
}

.great-header *::-webkit-input-placeholder {
    color: #767676 !important;
}
.great-header *:-moz-placeholder {
    /* FF 4-18 */
    color: #767676 !important;
}
.great-header *::-moz-placeholder {
    /* FF 19+ */
    color: #767676 !important;
}
.great-header *:-ms-input-placeholder {
    /* IE 10+ */
    color: #767676 !important;
}

/* The selector next to the search box was just plain white (now fixed above) */
/*
.great-header .header-search-scope {
    background-color: white;
}
*/

/* According to my Firefox, the header did not used to be so tall */
/* Some people might not want to go back to a short header, so I have made this a separate class.  Add it for a more faithful classic look. */
header.short-header,
.Header.short-header,
.Header-old.short-header {
    padding-top: 10px;
    padding-bottom: 10px;
}
/* The logo was smaller */
.short-header .header-logo-invertocat .octicon-mark-github {
    padding: 2px;
}

/* The search box was also less tall */
header.short-search-box .header-search,
.Header.short-search-box .header-search,
.Header-old.short-search-box .header-search {
    margin-top: 1px;
}
header.short-search-box .header-search-scope,
.Header.short-search-box .header-search-scope,
.Header-old.short-search-box .header-search-scope {
    line-height: 26px;
}
header.short-search-box .header-search-wrapper,
.Header.short-search-box .header-search-wrapper,
.Header-old.short-search-box .header-search-wrapper,
header.short-search-box .header-search-input,
.Header.short-search-box .header-search-input,
.Header-old.short-search-box .header-search-input {
    min-height: 26px;
}
/* The text to the right of the search box*/
.short-search-box .HeaderNavlink {
    font-size: 13px;
}
