/*
--header_bg: main header background colour on mobile and on opaque desktop (default #333)

--menu1_bg: top level menu (left side) background colour on mobile (default #333)
--menu2_bg: bottom level menu (right side) background colour on mobile (default #eee)
--menu1_fg: top level menu (left side) foreground colour on mobile (default #eee)
--menu2_fg is the bottom level menu (right side) foreground colour on mobile (default #333)

--menu1_hover_bg: top level menu (left side) hover background colour on mobile (default #aaa)
--menu2_hover_bg: bottom level menu (right side) hover background colour on mobile (default #aaa)
--menu1_hover_fg: top level menu (left side) hover foreground colour on mobile (default #333)
--menu2_hover_fg: bottom level menu (right side) hover foreground colour on mobile (default #333)

--icon_hover: top level icon hover background colour (default #aaa)
--link_hover: underline hover colour for the main menus (default #aaa)
--opaque_link_hover: as above but for opaque header (default #aaa)

--dropdown_bg: background colour of menu dropdowns (default #333)
--dropdown_fg: foreground colour of menu dropdown items (default #eee)
--opaque_dropdown_bg: as above but for opaque header (default #888)
--opaque_dropdown_fg: as above but for opaque header (default #eee)

--dropdown_hover_bg: background hover colour for menu dropdown items (default #aaa)
--dropdown_hover_fg: foreground hover colour for menu dropdown items (default #eee)
--opaque_dropdown_hover_bg: as above but for opaque header (default #333)
--opaque_dropdown_hover_fg: as above but for opaque header (default #eee)

--mobile_menu_height: Height of the menus on mobile (default 300px)
--menu1_mobile_width: Width of the top level (left side) menu on mobile (default 45%)
--menu1_tablet_width: Width of the top level (left side) menu on tablet (default 30%)
--menu1_mobile_left: Left position of the top level (left side) menu on mobile (default 0)
--menu1_tablet_left: Left position of the top level (left side) menu on tablet (default 40%)

--body_font: Font stack for body text (default = Lato,sans-serif)
--heading_font: Font stack for heading text (default = )
*/

#header {position: fixed; width: 100%; z-index: 1000; top: 0; box-shadow: 0 2px 8px rgba(85,85,85,0.7); border-bottom: 2px solid #C3C3C3;}
.translated-ltr #header,.translated-rtl #header {top: 40px;}

#header_badge {display: none;}
#header_text {margin: 5px 0 0 -10px; max-width: 200px; height: 50px;}

.search-link,.translate-link {cursor: pointer;}
.search-menu,.translate-menu {line-height: initial;}
.translate-menu {padding: 10px; position: fixed; top: 60px;}
.search-menu {padding: 5px; min-width: 300px;}
.translate-menu {background: white !important;}
.translated-ltr .translate-menu,.translated-rtl .translate-menu {top: 100px;}
.goog-logo-link {display: inline !important;}

.header_bar {background: var(--header_bg,var(--primary,#333)); height: 30px;}
#menu1,#menu2 {height: 0; min-height: 0; opacity: 0; overflow: hidden; transition: 200ms; position: absolute; top: 60px; box-shadow: 2px 2px 4px #555; z-index: 1000;}
#menu1.expanded,#menu2.expanded {height: var(--mobile_menu_height,300px); opacity: 1;}
#menu1 {left: var(--menu1_mobile_left,0); width: var(--menu1_mobile_width,45%); padding: 0; background: var(--menu1_bg,var(--primary,#333)); overflow-y: auto;}
#menu2 {left: calc(var(--menu1_mobile_left,0%) + var(--menu1_mobile_width,45%)); width: calc(100% - var(--menu1_mobile_width,45%)); background: var(--menu2_bg,#eee); overflow-y: auto;}

.header_bar ul {list-style-type: none; margin: 0; padding: 0; line-height: 30px; font-size: 1.6rem;}
.header_bar ul li {display: block; margin-right: 0; position: relative;}
.header_bar ul li a {color: white; display: block; padding: 0 6px; transition: 0.2s; text-decoration: none;}
.header_bar2 ul li a {color: var(--menu1_fg,#eee);}
.header_bar3 ul li a {color: var(--menu2_fg,#333);}

.header_bar ul li.hasMenu>a:before {content: "\e259"; float: right; font-family: 'Glyphicons Halflings';}
.header_bar ul li.hasMenu.menu-opened > a:before {content: "\e260";}
.header_bar ul li.menu-opened .menu {display: block;}

#menu1 > li > a,#menu2 > li:first-child > a {font-weight: 800;}
.header-bar .dropdown-menu {display: block; position: static; float: none; background: var(--menu1_bg,var(--primary,#333)); margin-left: 2rem; box-shadow: none; border: none;}
.header-bar .dropdown-menu li a {padding: 2px 5px; display: block; font-weight: 300;}
.header-bar .dropdown-menu li a:hover {background: #bc955c; font-weight: bold;}

.header_bar2 ul li a:hover, .header_bar2 ul li.active>a {background: var(--menu1_hover_bg,var(--secondary,#aaa)); color: var(--menu1_hover_fg,#333);}
.header_bar3 ul li a:hover {background: var(--menu2_hover_bg,var(--secondary,#aaa)); color: var(--menu2_hover_fg,#333);}
.header_bar3 {height: 0;}

.header_bar .header_icons {float: right; line-height: 60px; margin-right: 0;}
.header_bar .header_icons li {margin-right: 0 !important; position: relative; float: left;}
.header_bar .header_icons li:hover > a, .header_bar .header_icons li.active > a {background: var(--icon_hover,var(--secondary,#aaa));}
.header_bar .header_icons .tooltip-inner {min-width: 100px;}

.menu-link {width: 44px; height: 60px; padding: 18px 12px !important; background: transparent; margin-right: -15px;}
.menu-link span,.menu-link:before,.menu-link:after {content: ''; background: white; border-radius: 2px; height: 3px; display: block; margin: 3px 0; transition: 0.2s ease-in-out;}
.menu-link.active span {transform: scale(0);}
.menu-link.active:before {transform: translateY(6px) rotate(135deg);}
.menu-link.active:after {transform: translateY(-6px) rotate(-135deg);}

.header_bar2 .tooltip-inner {min-width: 150px;}

.header_bar ul li .menu {margin-left: 10px; display: none;}
.header_bar ul li .menu ul {line-height: 26px; width: 100%;}
.header_bar ul li .menu li {display: block; margin-right: 0; float: none; font-size: 1.3rem;}
.header_bar ul li .menu li a i.pull-right {line-height: 26px;}
.header_bar2 ul li .menu li {border-left: 2px solid var(--menu1_fg,#eee);}
.header_bar3 ul li .menu li {border-left: 2px solid var(--menu2_fg,#333);}

.header_bar2 ul li .menu {display: block;}

/* Dropdowns from the top icon menu (incl MV16 text menu) */
.header_bar1 .dropdown-menu {left: auto; right: 0; background: var(--dropdown_bg,var(--primary,#333)); z-index: 10000;}
.header_bar1 .dropdown-menu li {float: none;}
.header_bar1 .dropdown-menu li a {color: var(--dropdown_fg,#eee); padding: 4px 5px;}
.header_bar1 .dropdown-menu li a:hover {background: var(--dropdown_hover_bg,#aaa); color: var(--dropdown_hover_fg,#eee);}

.emergency {background: #d13438; color: white; text-align: center; margin: 10px 0; padding: 10px 10px; position: relative; z-index: 1; border-radius: 10px;}
.emergency p {margin: 0;}
.emergency a {color: white; text-decoration: underline;}


@media (min-width: 768px) {
  #menu1 {left: var(--menu1_tablet_left,40%); width: var(--menu1_tablet_width,30%);}
  #menu2 {left: calc(var(--menu1_tablet_left,40%) + var(--menu1_tablet_width,30%)); width: calc(60% - var(--menu1_tablet_width,30%));}
}

@media (min-width: 1200px) {
  #header {border: none; background: transparent; box-shadow: none; transition: 0.5s;}
  #header.opaque {background: var(--header_bg,var(--primary,#333)); padding-bottom: 10px; box-shadow: 0 5px 5px rgba(0,0,0,0.4);}

  .opaque #header_badge {display: block; float: left; text-decoration: none;}
  .opaque #header_badge img {height: 60px; margin-top: 10px;}

  #header_text {display: none;}

  .header_bar {height: 26px; background: transparent; box-shadow: none; border: none;}
  .header_bar ul li a {color: white; transition: none;}
  .header_bar ul li .menu li a {color: var(--dropdown_fg,#eee);}
  .header_bar1 {margin-top: 10px;}
  .header_bar ul {font-size: 1.4rem; line-height: 22px;}
  .header_bar .header_icons {margin: 0 0 4px 0; line-height: 22px;}

  .header_bar2 ul li .menu {display: none;}
  .header_bar ul li .dropdown-menu, .header_bar ul li .menu {position: absolute; line-height: 26px; margin: 0; z-index: 10; border: 1px solid rgba(0,0,0,0.15); box-shadow: 0 6px 12px rgba(0,0,0,0.175);}
  .header_bar ul li .menu {width: 180px;}
  .header_bar ul li .menu ul {float: left;}
  .header_bar ul li:hover .menu {display: block;}
  #menu1 li .menu li,#menu2 li .menu li {border: none;}
  .header_bar .dropdown-menu li a:hover,.header_bar .menu li a:hover {background: var(--dropdown_hover_bg,var(--secondary,#aaa)); color: var(--dropdown_hover_fg,#eee);}

  .translate-menu,.translated-ltr .translate-menu,.translated-rtl .translate-menu {position: absolute; top: 30px;}
  #menu1,#menu2 {display: block; position: static; width: auto; box-shadow: none; height: auto; opacity: 1; border-top: none; background: transparent; overflow: visible; float: right; clear: right;}
  #menu1 > li,#menu2 > li {float: left;}

  .header_bar ul li.hasMenu>a:before {display: none;}

  #menu1 > li > a,#menu2 > li > a {border-bottom: 4px solid transparent;}
  #menu1 > li.active > a, #menu1 > li:hover > a, #menu2 > li.active > a, #menu2 > li:hover > a {background: none; border-bottom-color: var(--link_hover,var(--secondary,#aaa)); color: white;}
  .opaque #menu1 > li.active > a, .opaque #menu1 > li:hover > a, .opaque #menu2 > li:hover > a {border-bottom-color: var(--opaque_link_hover,var(--secondary,#aaa));}

  .header_bar .dropdown-menu,.header_bar .menu {background: var(--dropdown_bg,var(--primary,#333)); padding: 5px;}
  .header_bar .dropdown-menu li,.header_bar .menu li {float: none; margin: 0;}
  .opaque .header_bar .dropdown-menu,.opaque .header_bar .menu {background: var(--opaque_dropdown_bg,var(--secondary,#888));}
  .opaque .header_bar .dropdown-menu li a,.opaque .header_bar .menu li a {color: var(--opaque_dropdown_fg,#eee);}
  .opaque .header_bar .dropdown-menu li a:hover,.opaque .header_bar .menu li a:hover {background: var(--opaque_dropdown_hover_bg,var(--primary,#333)); color: var(--opaque_dropdown_hover_fg,#eee);}

  #infoMenu,#deptMenu,#subjectsMenu {width: 372px !important;}
  #infoMenu ul,#deptMenu ul,#subjectsMenu ul {width: 180px !important;}
}