ul.sf-menu li {
  font-weight: 400;
}

.sf-menu li.active > .menu-item {
    font-weight: bold;
}

.sf-menu .menu-item {
    text-decoration: none;
}

.sf-menu {
    width: 100%;
    margin-bottom: 0;
    line-height: 1;
}

.sf-menu ul {
    background-image: none;
    padding: 0;
    min-width: auto;
}

.sf-menu.sf-shadow ul {
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    -moz-box-shadow: 2px 2px 8px -2px #999;
    -webkit-box-shadow: 2px 2px 8px -2px #999;
    box-shadow: 2px 2px 8px -2px #999;
}

.sf-menu li:hover,
#main-navigation .sf-menu li:hover,
#page-navigation .sf-menu li:hover {
    background-color: #CFDEFF;
}

.sf-menu li,
.sf-menu li li,
.sf-menu li li li {
    background-color: #fff
}

.sf-sub-indicator {
    display: none;
}

.sf-menu a.sf-with-ul {
    padding-right: 1rem;
}

.sf-menu ul a.sf-with-ul {
    padding-right: 2rem;
}

.sf-menu a.sf-with-ul:after {
    content: '';
    width: 10px;
    height: 10px;
    border: 0;
    vertical-align: middle;
    display: inline-block;
}

.sf-menu a:visited,
.sf-menu a {
    border: none;
    color: #000;
}

#app-nav.sf-menu > li:first-child > a {
    border-left: none
}

#main-navigation {
    position: absolute;
    top: 1px;
    left: 0;
    z-index: 1000;
    text-color: #000;
}

.page-menu.sf-menu a,
#main-navigation .sf-menu a,
#main-navigation .sf-menu a:hover {
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    border-radius: 0;
    text-align: left;
}

#main-navigation a {
    border-top: none
}

#main-navigation #app-nav > li,
#main-navigation #app-nav > li > a {
    background-color: transparent
}

#page-navigation {
    position: absolute;
    top: 3.3em;
    right: 2em;
}

.page-nav-shadow {
    border: none;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(23, 69, 102, 0.26);
}

.page-nav-shadow .btn {
    border-top: none;
    border-bottom: none;
}

#page-navigation .page-menu {
    float: right;
    width: auto;
}

#page-navigation .sf-menu li {
    background-color: transparent
}

#page-navigation .sf-menu li li,
#page-navigation .sf-menu li li li {
    background-color: #fff
}

/* Pin page menu to top left corner once you scroll past it */

.page-menu.pinned {
    position: fixed;
    top: 0;
    right: 0;
    left: auto;
    width: auto;
    margin-top: 0;
    background: white;
    border-left: 1px #aaa solid;
    border-bottom: 1px #aaa solid;
    border-radius: 0 0 0 5px;
    box-shadow: 0 0 10px rgba(0,0,0,0.4);
    /* stupid vendor prefixes */
    -moz-border-radius: 0 0 0 5px;
    -webkit-border-radius: 0 0 0 5px;
    -moz-box-shadow: 0 0 10px rgba(0,0,0,0.4);
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.4);
}

.search-results-page-menu-container .page-menu.pinned {
    float: right;
    width: auto;
    top: 2em;
    z-index: 94;
}

.page-menu.pinned li:hover ul,
.page-menu.pinned li.sfHover ul {
    border-left: 1px #aaa solid;
    border-right: 1px #aaa solid;
    z-index: -1 !important; /* relative to current stacking context */
    box-shadow: 0 0 10px rgba(0,0,0,0.4);
    -moz-box-shadow: 0 0 10px rgba(0,0,0,0.4);
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.4);
}

/* round off the corner of the first menu item so it matches the container */

.page-menu.pinned > li:first-of-type,
.page-menu.pinned > li:first-of-type > a {
    border-radius: 0 0 0 5px;
    -moz-border-radius: 0 0 0 5px;
    -webkit-border-radius: 0 0 0 5px;
}

#topactions input[type="submit"], #topactions input.button {
    width: auto;
    padding-left: 0.5em;
    padding-right: 0.5em;
}

#topactions form {
    display: inline;
    float: left;
    margin-left: 1em;
    text-align: right;
    margin-top: 0.33rem;
}

#topactions form input.btn {
    border-color: #4868b3;
}

#topactions .bootstrap-select.form-control {
    height: auto;
}

#li-page-bookmark .toggle-bookmark a svg,
#li-page-timer a svg {
    height: 1.3em;
}

#topactions {
    position: absolute;
    background: transparent;
    top: 0;
    /* 194px is the logo's width,
     * 2px is logo's "right" position,
     * 1em is to add some space between logo and topactions */
    right: calc(194px + 2px + 1em);
    width: auto;
    font-size: 0.9em;
    z-index: 1000;
}

#topactions input[type="search"] {
    /* turn off webkit input[type=search] styling */
    -webkit-appearance: textfield;
}

/* topactions search box sizes and easing definitions */
#topactions input {
    width: 10em;
}

#topactions input[type="search"].expand {
    -webkit-transition: width 0.25s ease-in-out;
    -moz-transition: width 0.25s ease-in-out;
    -ms-transition: width 0.25s ease-in-out;
    transition: width 0.25s ease-in-out;
}

#topactions input[type="search"].expand:focus {
    width: 16em;
}

@media (max-width: 900px) {
    #topactions input {
        width: 4.7em;
    }

    #topactions input[type="search"].expand:focus {
        width: 10em;
    }
}

#topactions input[type="search"]::-webkit-search-cancel-button {
    /* hide webkit x button for searches */
    -webkit-appearance: none;
}

#topactions input,
#topactions select,
#topactions button {
    height: 2em;
    padding-top: 0;
    padding-bottom: 0;
}

#topactions input,
#topactions button {
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 0.5em;
    padding-right: 0.5em;
    vertical-align: middle;
}

@-moz-document url-prefix() {
    #topactions select.select-queue {
        padding-top: 0.25em;
        padding-bottom: 0.25em;
        height: auto;
    }

    /* Fix Queue name position in Queue select for Firefox */
    #topactions .bootstrap-select .dropdown-toggle .filter-option {
        margin-top: 5px;
    }
}

#page-navigation {
    z-index: 95;
}

.create-wide   { display: inline; }
.create-medium { display: none; }
.create-narrow { display: none; }

#app-nav {
    padding: 0.25rem 0.5rem;
}

/* to stop a "flash" of an unstyled menu on an older browser,  hide the menu until superfish has initialized it */

#app-nav.toplevel {
    display: none
}

#app-nav.toplevel.sf-menu {
    display: block
}

.page-menu.toplevel {
    display: none
}

.page-menu.toplevel.sf-menu {
    display: block
}

/* be overly specific to defeat specificity */
#app-nav.sf-menu > li#li-overflow,
.page-menu.sf-menu > li#li-page-overflow {
    display: none;
}
#app-nav.sf-menu > li#li-overflow.has-overflow,
.page-menu.sf-menu > li#li-page-overflow.has-overflow {
    display: inline-block;
}

/* these two rules prevent the menus from wrapping, so that our overflow
   calculations can work */
#app-nav.sf-menu > li,
.page-menu.sf-menu > li {
    float: none;
    display: inline-block;
}
#app-nav.sf-menu,
.page-menu.sf-menu {
    white-space: nowrap;
    margin-bottom: 0;
}

.page-menu.sf-menu > li > span > a,
.page-menu.sf-menu > li > a {
    padding-top: .3em;
    padding-bottom: .25em;
    border-radius: 0;
}

.page-menu.sf-menu > li {
    float: left;
    border-color: #E0E6EC;
    border-right-style: solid;
    border-right-width: 1px;
    border-left-style: solid;
    border-left-width: 1px;
}

/* restore wrapping for submenus */
#app-nav.sf-menu ul {
    white-space: normal;
}

#li-overflow > a,
#li-page-overflow > a {
    cursor: default;
}
#li-overflow > a:hover,
#li-page-overflow > a:hover {
    text-decoration: none;
}

ul.toplevel.sf-menu > li > a.sf-with-ul:after {
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' id='i-chevron-down' viewBox='0 0 12 8' height='100%' width='100%' fill='none' stroke='%2331363E' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'><path d='M1 1 l5 5 5 -5' /></svg>") no-repeat center center;
    margin-left: 6px;
    margin-top: 0;
    right: 0;
    position: relative;
}

ul.toplevel.sf-menu > li > ul > li a.sf-with-ul:after {
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' id='i-chevron-right' viewBox='0 0 7 12' height='100%' width='100%' fill='none' stroke='%2331363E' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'><path d='M1 1 l5 5 -5 5' /></svg>") no-repeat center center;
    position: absolute;
    right: 5px;
}

/* IE11 only, top and child nav down and right arrows.
   IE11 is a lot more specific about what it allows for svg url background definitions.
   We know png works for IE11, so rather than change what works for every other browser, just use png where it's needed.
   Both the pngs and specific definitions for the chevrons can be removed once IE11 is EOL.
*/
body.IE11 ul.toplevel.sf-menu > li > a.sf-with-ul:after {
    background: url("../../../static/images/chevron-down.png") no-repeat center center;
}

body.IE11 ul.toplevel.sf-menu > li > ul > li a.sf-with-ul:after {
    background: url("../../../static/images/chevron-right.png") no-repeat center center;
}

@media (max-width: 900px) {
    #topactions .create-wide   { display: none; }
    #topactions .create-medium { display: inline; }
    #topactions .create-narrow { display: none; }

    #topactions form {
        margin-left: 0.5em;
    }
}

@media (max-width: 600px) {
    #topactions .create-wide   { display: none; }
    #topactions .create-medium { display: none; }
    #topactions .create-narrow { display: inline; }

    #topactions input[type="submit"], #topactions input.button {
        min-width: 2em;
    }
}

.search-results-page-menu-container {
    padding-right: 5px;
}

/* to override rules of ".titlebox .titlebox-title a:hover" in boxes.css */
.search-results-page-menu-container .sf-menu .menu-item:hover {
    text-decoration: none;
}

/* scrollable actions */
#li-page-actions > ul {
    overflow-y: auto;
}
