/* Resets & overrides ------------------------------------------------------ */
html { background: none; }

/* Firefox has an unfortunate habit of showing the right scrollbar when a page is long and hiding
   it when the page doesn't reach below the fold, thus creating an undesireable "jump".
   This "fixes" the jump by keeping the scroll bar displayed at all times. */
html { overflow-y: scroll; }

/* Links & type ------------------------------------------------------------ */
body {
  background-color: #474c5c; /* DELETE THIS ENTIRE LINE IF USING A BACKGROUND IMAGE */
  background: #474c5c url(/vimages/L9/mainBodyBG.jpg) repeat-x; /* DELETE THIS ENTIRE LINE IF NOT USING A BACKGROUND IMAGE */

  font-family: Arial, Helvetica, Verdana, sans-serif;

  /* Override base-min.css */
  margin: 10px 0;
}

.touch body { min-width: 980px; }

a:link, a:visited {
  color: #217108;
  text-decoration: none;
}

a:hover, a:active, a:focus {
  color: #474c5c;
  text-decoration: underline;
}

/* Main layout ------------------------------------------------------------- */
#wrapper {
  margin: 0 auto;
  width: 992px; /* Background image width */
}

#wrapper3 {
  -webkit-box-shadow: 0 0 15px rgba(0,0,0,.5);
          box-shadow: 0 0 15px rgba(0,0,0,.5);
  margin: 0 auto;
  position: relative;
  width: 960px;
}

/* header --------------------------------------------------------------------- */
#header {
  background: transparent url(/vimages/L9/header.jpg) no-repeat;
  height: 350px; /* header.jpg (100) + masthead.jpg (250) = 350px */
}

#header.mastheadStyle2 {
  height: 100px; /* Subtract the height of the masthead */
}

#header.mastheadStyle3 {
  background: transparent url(/vimages/L9/header_small.jpg) no-repeat;
  height: 287px; /* masthead.jpg (250) + vbutton height (37) = 287px */
}

/* logo ----------------------------------------------------------------------- */
#logo {
  display: block;
  height: 100%;
  left: 0;
  margin: 0;
  overflow: hidden;
  position: absolute;
  text-indent: -9999px;
  top: 0;
  width: 590px;
}

#logoImage {
  display: block;
  height: 100%;
  width: 100%;
}

#logoImage:focus {
  outline: 2px solid #fff;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  margin-top: 2px;
  margin-left: 2px;
}

/* siteSearchForm ------------------------------------------------------------- */
#siteSearchForm {
  left: 738px;
  position: absolute;
  top: 22px;
}

#header.mastheadStyle3 #siteSearchForm {
  left: 755px;
  top: 5px;
}

#siteSearchForm2 {
  background: transparent url(/vimages/L9/searchbox.png) no-repeat;
  height: 27px;
  padding: 5px 0 0 6px;
  width: 198px;
}


#siteSearchForm .textInput {
  border: 0;
  float: left;
  outline: none;
  width: 171px;
}

#siteSearchForm #searchButton {
  padding: 3px 0 0;
}

/* vbuttons ------------------------------------------------------------------- */
#vButtons {
  background: #000 url(/vimages/L9/vbuttonBar.png) scroll right top;
  font-weight: bold;
  height: 31px;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 69px;
  width: 800px;
}

#header.mastheadStyle3 #vButtons {
  background: transparent;
  left: 0;
  right: auto; /* undo initial rule above */
  top: 0;
  width: 595px;
}

#vButtons ul {
  float: right;
  height: 31px;
  margin: 0;
  padding: 0;
}

#header.mastheadStyle3 #vButtons ul {
  float: left;
  height: 37px;
}

#vButtons li {
  display: inline;
  float: left;
  height: 31px;
  line-height: 31px;
  margin: 0;
  padding: 0;
}

#header.mastheadStyle3 #vButtons li {
  float: left;
  height: 37px;
  line-height: 37px;
}

#vButtons a {
  display: block;
  margin: 0 8px;
  padding: 0 5px;
  text-decoration: none;
  white-space: nowrap;
}

#vButtons a:link, #vButtons a:visited {
  color: #fff;
}

#vButtons a:hover, #vButtons a:focus {
  background-color: #217108;
  color: #fff;
}

#vButtons a:focus {
  outline: 2px solid #fff;
}

#vButtons:hover {
  height: auto;
  overflow: visible;
  z-index: 3; /* "Popup" menu needs to be on top of the masthead below */
}

#header.mastheadStyle3 #vButtons:hover {
  background: #7D3413 url(/vimages/L9/header_small.jpg) scroll left top;
}

#vButtons:hover ul, #header.mastheadStyle3 #vButtons:hover ul {
  height: auto;
}

/* masthead ------------------------------------------------------------------- */
#masthead, #mastheads {
  height: 250px;
  left: 0;
  position: absolute;
  top: 100px;
  width: 960px;
}

#masthead {
  background: transparent url(/vimages/L9/masthead.jpg) no-repeat;
}

#header.mastheadStyle3 #masthead {
  background: transparent url(/vimages/L9/masthead.png) no-repeat;
  top: 37px; /* vbutton height */
}

#mastheads {
  background-color: #002750;
  overflow: hidden;
}

#mastheads ul {
  margin: 0;
  padding: 0;
}

#mastheads ul li {
  float: left;
  list-style-type: none;
}

#mastheads img {
  height: 250px;
  width: 960px;
}

#mastheads .nivo-slice, #mastheads .nivo-box {
  display: block;
  position: absolute;
  height: 100%;
}

.nivo-imageLink {
  border: 0;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 2;
}

/* Screen reader accessible previous/next links */
.nivo-prevNav,
.nivo-nextNav {
  display: inline-block;
  margin: 5px !important;
  padding: 5px 10px !important;
  position: absolute !important;
  z-index: 1;
}
.nivo-nextNav {
  margin-left: 60px !important;
}

/* Image Rotator -------------------------------------------------------------- */
#imgRotator {
  float: right;
  height: 250px;
  position: relative;
  width: 370px;
}

#imgRotator img {
  height: 250px;
  left: 0;
  position: absolute;
  top: 0;
}

#imgRotatorMask {
  background: transparent url(/vimages/L9/mastheadMask.png) no-repeat;
  float: right;
  height: 250px;
  position: absolute;
  right: 0;
  top: 0;
  width: 370px;
  z-index: 2;
}

/* body ----------------------------------------------------------------------- */
#body {
  background-color: #fff;
  position: relative;
}

/* Main Horizontal Navigation ------------------------------------------------- */
#mainNav {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 1;
}

.subPage #mainNav {
  margin: 0 0 15px;
}

#mainNav > li {
  background-color: #000; /* Accessibility fix */
  display: inline;
  float: left;
  height: 36px;
  margin: 0 5px 0 0;
  padding: 0;
  text-align: center;
  width: 186px;
}
#mainNav > li:first-child { margin-left: 5px; }

#mainNav > li > a { /* Gradient Tool - http://www.colorzilla.com/gradient-editor */
background: #217108;
background: -moz-linear-gradient(top, #2fa10b 0%, #2fa10b 25%, #217108 100%);
background: -webkit-linear-gradient(top, #2fa10b 0%, #2fa10b 25%, #217108 100%);
background: linear-gradient(to bottom, #2fa10b 0%, #2fa10b 25%, #217108 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2fa10b', endColorstr='#217108',GradientType=0 );
  border: 2px solid #fff;
  border-top-width: 1px;
  border-bottom-width: 1px;
  color: #fff;
  padding: 7px 0;
}
#mainNav > li:nth-child(even) > a {
background: #474c5c;
background: -moz-linear-gradient(top, #6c748c 0%, #6c748c 25%, #474c5c 100%);
background: -webkit-linear-gradient(top, #6c748c 0%, #6c748c 25%, #474c5c 100%);
background: linear-gradient(to bottom, #6c748c 0%, #6c748c 25%, #474c5c 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6c748c', endColorstr='#474c5c',GradientType=0 );
  color: #fff;
}

#mainNav a {
  color: #fff;
  display: block;
  font-size: 15px;
  font-weight: bold;
  text-decoration: none;
}
#mainNav > li:nth-child(even) a {
  color: #fff;
}

/* "Bucket" menu */
#mainNav .main-nav-body {
  background-color: #217108;
  border-left: 2px solid #fff;
  border-right: 2px solid #fff;
  margin: 0;
  overflow: hidden;

  /* DROP-DOWN: Control the height of the drop-down menu (height & min-height) */
  height: 110px;
  min-height: 110px;
}
#mainNav > li:nth-child(even) .main-nav-body {
  background-color: #474c5c;
}

.subPage #mainNav div {
  height: 0;
  min-height: 0;
}

#mainNav > .open > .main-nav-body,
#mainNav li:hover > .main-nav-body {
  display: block !important; /* Override the hidden class */
  height: auto;
  overflow: visible;
}

#mainNav a:focus,
#mainNav .main-nav-body li.open,
#mainNav .main-nav-body li.open > a,
#mainNav .main-nav-body li:hover,
#mainNav .main-nav-body li.active {
  background: #474c5c;
  color: #fff;
}
#mainNav .main-nav-body li:hover > a,
#mainNav .main-nav-body li.active > a {
  color: #fff;
}

#mainNav > li:nth-child(even) a:focus,
#mainNav > li:nth-child(even) .main-nav-body li.open,
#mainNav > li:nth-child(even) .main-nav-body li.open > a,
#mainNav > li:nth-child(even) .main-nav-body li:hover,
#mainNav > li:nth-child(even) .main-nav-body li.active {
  background: #217108;
  color: #fff;
}
#mainNav > li:nth-child(even) .main-nav-body li:hover > a,
#mainNav > li:nth-child(even) .main-nav-body li.active > a {
  color: #fff;
}

#mainNav .main-nav-footer {
  background-color: #217108;
  border: 2px solid #fff;
  border-top: none;
  border-radius: 0 0 5px 5px;

  /* DROP-DOWN: If the '#mainNav div' height is set to zero, do the same here (height & min-height) */
  height: 15px;
  min-height: 15px;

  overflow: visible;
}
#mainNav > li:nth-child(even) .main-nav-footer {
  background-color: #474c5c;
}

#mainNav .main-nav-footer .downArrow {
  color: #fff;
  font-size: 20px;
  position: relative;
}
#mainNav > li:nth-child(even) .main-nav-footer .downArrow {
  color: #fff;
}

#mainNav .main-nav-footer .downArrow:after {
  content: "\f0d7"; /* fa-caret-down */
  font-family: "Font Awesome 5 Pro";
  font-weight: 600;
  left: 48%;
  position: absolute;
  top: -5px;
}

#mainNav > li:hover .main-nav-footer {
  height: 15px;
}

#mainNav > .open .main-nav-footer .downArrow,
#mainNav > li:hover .main-nav-footer .downArrow,
.subPage #mainNav .main-nav-footer .downArrow {
  display: none;
}

#mainNav ul {
  margin: 0;
  padding: 5px 0 0;
}

#mainNav ul li {
  display: block;
  float: none;
  height: auto;
  line-height: normal;
  margin: 0;
  padding: 0;
  text-align: left;
  width: 100%;
}

.subPage #mainNav ul li, #mainNav.noSectionImages ul li {
  height: auto;
  line-height: normal;
}

#mainNav ul a {
  font-size: inherit;
  font-weight: normal;
  padding: 5px 10px;
}

/* Main Nav Flyout menus ------------------------------------------------------ */
#mainNav .dropdown-submenu {
  position: relative;
}

#mainNav .dropdown-submenu > a {
  padding-right: 14px;
}

#mainNav .dropdown-menu-left .dropdown-submenu > a {
  padding-left: 14px;
  padding-right: 10px;
}

#mainNav .dropdown-submenu > a:after {
  content: "";
  float: right;
  margin: 1px -10px 0 0;
  border-left: 6px solid;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}
#mainNav .dropdown-menu-left .dropdown-submenu > a:after {
  float: left;
  margin: 1px 0 0 -16px;
  border-left: 6px solid transparent;
  border-right: 6px solid;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

#mainNav .dropdown-submenu > .dropdown-menu {
  background-color: #217108;
  border: 2px solid #fff;
  border-radius: 0 5px 5px 5px;
  display: none;
  margin: 0;
  padding: 0;
  position: absolute;
  left: 100%;
  top: 0;
  width: 180px;
  z-index: 2;
}
#mainNav > li:nth-child(even) .dropdown-submenu > .dropdown-menu {
  background-color: #474c5c;
}

#mainNav .dropdown-menu-left .dropdown-submenu > .dropdown-menu {
  border-radius: 5px 0 5px 5px;
  left: auto;
  right: 100%;
}

#mainNav .dropdown-submenu.open > .dropdown-menu,
#mainNav .dropdown-submenu:hover > .dropdown-menu {
  display: block;
}

/* vbanner -------------------------------------------------------------------- */
#leaderBoard, #topBanner, #bottomBanner {
  text-align: center;
}

#leaderBoard table, #topBanner table, #bottomBanner table {
  /* This will cause the table to be centered in Mozilla and Opera */
  margin-left: auto;
  margin-right: auto;
  padding-bottom: .5em;
}

#leaderBoard object, #leaderBoard iframe,
#topBanner object, #topBanner iframe,
#bottomBanner object, #bottomBanner iframe {
  display: block;
  margin: 0 auto;
}

#leaderBoard {
  margin: 0 auto 10px;
  width: 960px;
}

#topBanner, #bottomBanner {
  clear: left;
  margin-bottom: 1em;
}

/* footer --------------------------------------------------------------------- */
#footer {
  background-color: #fff;
  clear: left;
  overflow: hidden; /* float containment */
}

/* Translation (in footer) ---------------------------------------------------- */
#google_translate_element {
  background-color: #217108;
  float: left;
  padding: 17px 0 16px;
  text-align: center;
  width: 184px;
}
#google_translate_element a {
  color: #000 !important;
}

/* School Address (in footer) ------------------------------------------------- */
#schoolAddress {
  border-top: 1px solid #CCC;
  border-bottom: 1px solid #CCC;
  color: #333;
  font-size: 15px;
  font-weight: bold;
  height: 55px;
  line-height: 27px;
  margin: 0 0 0 195px;
  text-align: center;
}

#schoolAddress .addressLine {
  margin: 0;
}

#schoolAddress span {
  padding: 0 0 0 25px;
  position: relative;
}

/* Use CSS to create the circle separator */
#schoolAddress span:before {
  content: "";
  background-color: #333;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  position: absolute;
  left: 10px;
  top: 5px;
}

#schoolAddress span:first-child:before {
  background-color: transparent;
}

#schoolAddress span:first-child {
  background: none;
  padding-left: 0;
}

/* Copyright & SOCS Links (in footer) ----------------------------------------- */
#copyRight {
  line-height: 34px;
  text-align: center;
}

#copyRight span {
  border-left: 1px solid #000;
  padding: 0 10px;
}

#copyRight span.first {
  border-left: none;
  padding-left: 0;
}

#copyRight span.last {
  padding-right: 0;
}

#copyRight img {
  vertical-align: middle;
}

/* Misc ----------------------------------------------------------------------- */
.hidden, .hiddenNav {
  display: none;
}

.clearing {
  clear: both;
  height: 0;
}

#upgradeBrowser {
  background-color: #600;
  border: 2px solid #000;
  font-size: 18px;
  margin: 0 auto 10px;
  padding: 10px 5px 5px;
  text-align: center;
}

#upgradeBrowser p {
  color: #fff;
  margin: 0 0 5px;
}

#upgradeBrowser a:link, #upgradeBrowser a:visited, #upgradeBrowser a:hover {
  color: #f15d5d;
}

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;

  /* Accessibility Contrast Errors Fix */
  background-color: #fff !important;
  color: #333 !important;
}

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

/* Misc ----------------------------------------------------------------------- */
.sr-only {
  /* ACCESSIBILITY NOTE ===========================================================================
     To fix accessibility "contrast" errors related to any "sr-only" elements, force the
     background and foreground colors to black on white.

     The "sr-only" class is for screen readers only and lifted from Bootstrap.
  */
  background-color: #fff !important;
  color: #333 !important;

  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.sr-only-focusable:active,
.sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
}

/* vnotifier  ----------------------------------------------- */
.notifierList {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.notifierList .listWrapper {
    /* min-height: 4em; */
    overflow: hidden;
    height: 0;
    -webkit-transition: height .5s .5s;
    transition: height .5s .5s;
}

.notifierList .listWrapper th {
  vertical-align: top;
}

.notifierList ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.notifierList li {
  padding-bottom: 0.25em;
}

.notifierList table {
  border: none;
  margin: 0;
  table-layout: fixed;
  width: 100%;
}

.notifierList th {
  border-right: 1px solid /*#ddd*/;
  padding: 0 0.5em 0 0;
  text-align: right;
  width: 2em;
}

.notifierList td {
  padding: 0 0 0 0.5em;
  text-align: left;
  word-wrap: break-word;
  vertical-align: middle;
}

.notifierList select {
  height: 2.5em;
  width: 100%;
  margin: .25em 0;
  background: none; /* height doesn't take effect without a background... */
}

.notifierItem table {
  width: 100%;
}

.notifierItem caption {
  background-color: #5e5e5e;
  color: #fff;
  text-align: left;
  padding: 0.5em;
  font-weight: bold;
}

.notifierItem th {
  text-align: right;
}
/* end vnotifier */

/* BEGIN Keyboard accessibility for navbar ------------------------------------ */
#mainNav .nav-keyboard-goto,
#subNav .nav-keyboard-goto {
  display: none;
}

#mainNav .open > .main-nav-body > ul > .nav-keyboard-goto,
#mainNav .open > ul > .nav-keyboard-goto,
#subNav .open > ul > .nav-keyboard-goto {
  display: block;
}

#mainNav a:focus,
#subNav a:focus {
  outline: 2px solid #fff;
}
/* END Keyboard accessibility for navbar -------------------------------------- */

/* App Store Links ------------------------------------------------------------ */
.app-store {
  padding: 1em;
  text-align: center;
}

.app-store .app-store-heading {
  font-size: 16px;
  line-height: 1.2;
  margin: 0 0 0.5em;
}

.app-store .app-store-links a {
  display: inline-block;
  text-decoration: none;
}

.app-store .app-store-links a + a {
  margin-left: 1em;
}

.app-store .app-store-links img {
  max-width: 100%;
  height: auto;
}