/* HEADER STYLES FOR REFERENCE DOCS

   developer:   suef
   requires:    /common/framework/css/framework.en.css
                /language-assets/css/global.css
   ========================================================================== */

.main #searchlink p, .inner { max-width: 960px; margin: 0 auto; position: relative; padding: 0 2%; outline: 1px solid transparent; }
.topContentWrap { height: 36px; }

/* ==========================================================================
   HEADER
   ========================================================================== */
.header { background: #414141; overflow: hidden; outline: 1px solid transparent; }
.header .inner { padding: 1rem 2% 1.2rem; }
.header .header-link { display: inline-block; vertical-align: middle; }
.header .header-link span { font-size: 1.6rem; font-weight: 300; line-height: 1.26; display: block; }
.header .heading1 { color: #fff; }
.header .heading2 { color: #b7b7b7; }
.header .header-link:hover span { color: #fff; }
.header .right { float: right; top: .7rem; position: relative; text-align: right; width: 40.5%; }
.header a.language-home:before { content: ''; background: url('/National_Library/20160521004321oe_/http://reference.wolfram.com/language-assets/img/wolf-icon2x.png') no-repeat left bottom; background-size: 18px 36px; display: inline-block; width: 18px; height: 18px; vertical-align: top; margin: 1px .3rem 0 0; opacity: .6; }
a.language-home { font-weight: 300; font-size: .82rem; top: .5rem; position: relative; padding: 0; line-height: 21px; color: #222; opacity: .5; }
a.language-home:hover { opacity: 1; }
.header .right a.language-home { color: #ddd; margin: .5rem 0 0 0; }
.header .right a.language-home:hover { color: #fff; }
footer a.language-home { display: none; }
.header .search { display: block; position: relative; height: 26px; margin: auto; }
.header .search #query { color: #888; font-weight: 300; width: 100%; padding: 3px 27px; background: #535353; border: 1px solid #676767; border-radius: 4px; }
input:-webkit-autofill {
    -webkit-box-shadow:0 0 0 50px #535353 inset; /* Change the color to your own background color */
    -webkit-text-fill-color: #fff;
}
input:-webkit-autofill:focus {
    -webkit-box-shadow: /*your box-shadow*/,0 0 0 50px #535353 inset;
    -webkit-text-fill-color: #fff;
} 
.header .search #query:focus, .header .search #query.term-found { color: #fff; }
.header .search #query::-ms-input-placeholder { color: #888; font-weight: 400; }
.header .search .clearfield { display: none; background: url('/National_Library/20160521004321oe_/http://reference.wolfram.com/language-assets/img/close-btn2x.png') no-repeat transparent !important; background-size: 13px 13px !important; border: 0; width: 13px; height: 13px; position: absolute; top: 2px; bottom: 0; margin: auto; right: 10px; opacity: .5; }
.header .search .clearfield:hover { opacity: 1; color: #fff; border-color: #fff; }
.header .search #query::-ms-clear { display: none; width:0; height:0; }
#search-button { background-color: transparent; position: absolute; border: 0; font-size: 0; left: 7px; top: 0; bottom: 0; margin: 7px 0; opacity: .4; }
#search-button:hover { opacity: 1; }

#searchlink, #spelling_container { text-align: left; line-height: 27px; background: #676767; padding: 5px 0; }
#searchlink p, #spelling_container span { font-size: 13px; color: #fff; font-family: Arial, Verdana, sans-serif; }
#searchlink a, #spelling_container a { text-decoration: underline; color: #fff; font-family: Arial, Verdana, sans-serif; }
.spelling_alert { max-width: 960px; margin: 0 auto; padding: 0 1rem; }

/* ==========================================================================
   BADGE
   ========================================================================== */
.badge { display: inline-block; padding: 6px 20px; font-size: .75rem; text-transform: uppercase; color: #fff; vertical-align: top; background: #848484; }
.function .badge { background: #136eb7; }
#guide .badge, .howto .badge, #overviewGuide .badge { background: #d96500; }
#techNote .badge, .tutorial .badge, #tutorialOverview .badge { background: #be5324; }
.message .badge { background: #dd1100; }
.c .badge { background: #3f7f1f; }
.program .badge { background: #42821f; }
.package .badge, #package .badge { background: #608bab; }

/* ==========================================================================
   NAVIGATION
   ========================================================================== */
.dropdown { float: right; outline: 1px solid transparent; }
.dropdown > li { display: inline-block; list-style: none; }
.dropdown .sub_menu { display: none; max-height: 80vh; overflow: auto; }
.dropdown a.menu { color: #d96500; display: inline-block; padding: 6px 15px 6px 10px; line-height: 1; }
.dropdown a.menu:hover { color: #f77700; }
.dropdown a.menu:after { right: -4px; top: -2px; position: relative; background-position: 0 -7px; }
.dropdown a.menu:hover:after { background-position: 0 -14px; border-color: #fff !important; }

.dropdown .menu:before { display: none; }
.dropdown li:hover .menu:after { background-position: 0 -14px; }
.dropdown .hover .menu, .dropdown .hover .menu:hover { color: #fff !important; background-color: #d96500; }
.dropdown .hover:hover .menu:after { background-position: 0 0; border-color: #fff !important;  }
.dropdown .hover .sub_menu { background: #fff; font-size: .94rem; position: absolute; display: block; border: 1px solid #d9d9d9; padding: .35rem 0 .6rem; z-index: 10; min-width: 150px; }
.dropdown .sub_menu a { display: block; padding: .37rem 1.04rem; white-space: nowrap; }
.dropdown .sub_menu a:hover { color: #d96500; }
.dropdown .edge { position: relative; }
.dropdown .edge .sub_menu { right: 0; }
.dropdown .right-edge { position: relative; }
.dropdown .right-edge .sub_menu { left: 0; }
.dropdown .see-also + .sub_menu a, .dropdown .functions + .sub_menu a { font-weight: 600; }

.sticky { position: fixed; top: 42px; left: 0; right: 0; margin: auto; max-width: 925px; }

/* ==========================================================================
   responsive breakpoint styles
   ========================================================================== */

/* styles for large screens (1200px)
   ========================================================================== */

@media all and (max-width: 1200px) {
    .badge { font-size: .8rem; }
    .header a.language-home, a.language-home { font-size: .875rem; }
}
/* styles for medium screens (900px)
   ========================================================================== */

@media all and (max-width: 900px) {
    .header .right { width: 195px; top: .25rem; }
}

/* styles for small screens (600px)
   ========================================================================== */

@media all and (max-width: 600px) {
    .main .header span.heading1, .main .header span.heading2 { font-size: 1rem; }
    .main .header span.heading1 { text-transform: uppercase; }
    .main .header .inner { padding: .5rem 14px .5rem; }
    .main .header .right { display: inline-block; }
    .main .header .search { display: none; }
    .main .header .right a.language-home { font-size: 0; display: inline-block; top: 0; position: relative; margin: 0; }

    .main-heading { margin: 1rem 0; }
    .topContentWrap + .main-title { margin: 1rem 0; }
    .main-title { font-size: 2.3rem; }
}
@media all and (max-width: 500px) {
    .dropdown .sub_menu {
        position: fixed !important;
        left: 2% !important;
        right: 2% !important;
        margin: auto;
        max-width: 100%;
    }
}