/* 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: #666 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: #000;
  text-decoration: none;
}

a:hover, a:active, a:focus {
  color: #000;
  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: 201px;
  left: 2px;
  margin: 0;
  overflow: hidden;
  position: absolute;
  text-indent: -9999px;
  top: 2px;
  width: 562px;
}

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

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

#header.mastheadStyle3 #siteSearchForm {
  left: 750px;
  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 {
  font-weight: bold;
  height: 31px;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 69px;
  width: 800px;
}

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

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

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

#vButtons li {
  display: inline;
  float: right;
  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 {
  color: #ff4500;
}

#vButtons:hover {
  background: transparent url(/vimages/L9/vbuttonBar.png) scroll right top;
  height: auto;
  overflow: visible;
  z-index: 3; /* "Popup" menu needs to be on top of the masthead below */
}

#header.mastheadStyle3 #vButtons:hover {
  background: #ccc 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: #ccc;
  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: 6;
}

/* 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;
}

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

.subPage #mainNav, .subPage #mainNav.noSectionImages {
  background: transparent url(/vimages/L9/subPageMainNavBG.png) no-repeat;
  margin: 0 0 10px;
}

#mainNav.noSectionImages {
  background: transparent url(/vimages/L9/subPageMainNavBG.png) no-repeat;
  margin: 0;
}

#mainNav li {
  display: inline;
  float: left;
  height: 30px;
  line-height: 30px;
  margin: 0 8px;
  padding: 0;
  text-align: center;
  width: 176px;
}

.subPage #mainNav li, #mainNav.noSectionImages li {
  height: 32px;
  line-height: 32px;
}

#mainNav a {
  color: #fff;
  display: block;
  font-size: 17px;
  font-weight: bold;
  text-decoration: none;
}

/* This will color the section headings on buckets 1,3,5 */
#mainNav li.hOne a, #mainNav li.hThree a, #mainNav li.hFive a {
  color: #000;
}

/* This will color the section headings on buckets 2,4 */
#mainNav li.hTwo a, #mainNav li.hFour a {
  background-color: #000;
  color: #FFF;
}

#mainNav li.hTwo > a, #mainNav li.hFour > a {
background: -moz-linear-gradient(top,  #444444 0%, #000000 100%);
background: -webkit-linear-gradient(top,  #444444 0%,#000000 100%);
background: linear-gradient(to bottom,  #444444 0%,#000000 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#444444', endColorstr='#000000',GradientType=0 );
}

/* "Bucket" menu */
#mainNav div {
  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: 65px;
  min-height: 65px;
}

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

#mainNav li:hover div {
  height: auto;
  overflow: visible;
}

#mainNav div.cOne,#mainNav div.cThree,#mainNav div.cFive {
  background-color: #ff4500;
}

#mainNav div.cTwo,#mainNav div.cFour {
  background-color: #000;
  border-top: 1px solid #fff;
  border-left: 0;
  border-right: 0;
}

#mainNav div.bOne,#mainNav div.bThree,#mainNav div.bFive,
#mainNav div.bTwo,#mainNav div.bFour,
#mainNav div.downArrow {
  border: none;
  
  /* DROP-DOWN: If the '#mainNav div' height is set to zero, do the same here (height & min-height) */
  height: 15px;     /* Image height */
  min-height: 15px; /* Image height */

  overflow: visible;
}

#mainNav div.downArrow {
  background: transparent url(/vimages/L9/downArrow.gif) no-repeat center 2px;
}
#mainNav li:hover div.downArrow {
  background-image: none;
}

.subPage #mainNav div.bOne,.subPage #mainNav div.bThree,.subPage #mainNav div.bFive,
.subPage #mainNav div.bTwo,.subPage #mainNav div.bFour,
.subPage #mainNav div.downArrow {
  border-top: none;
  height: 0;
  min-height: 0;
}

#mainNav div.bOne,#mainNav div.bThree,#mainNav div.bFive {
  background: transparent url(/vimages/L9/roundedBottom01.png) no-repeat;
}

#mainNav div.bTwo,#mainNav div.bFour {
/*  background: transparent url(/vimages/L9/roundedBottom02.png) no-repeat;*/
  background-color: #000;
  border-radius: 0 0 8px 8px;
  height: 14px;
  min-height: 14px;
}

#mainNav li:hover div.bOne,#mainNav li:hover div.bTwo,#mainNav li:hover div.bThree,#mainNav li:hover div.bFour,#mainNav li:hover div.bFive {
  height: 15px;
}

#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: 3px 7px;
}

#mainNav div.cOne a:hover,#mainNav div.cThree a:hover,#mainNav div.cFive a:hover {
  background-color: #000;
  color: #fff;
}

#mainNav div.cOne a#currentMainNav,#mainNav div.cThree a#currentMainNav,#mainNav div.cFive a#currentMainNav {
  background-color: #000; /*#004c9c;*/
  color: #fff;
  cursor: default;
}

#mainNav div.cTwo a:hover,#mainNav div.cFour a:hover {
  background-color: #ff4500;
  color: #000;
}

#mainNav div.cTwo a#currentMainNav,#mainNav div.cFour a#currentMainNav {
  background-color: #ff4500; /*#3d3326;*/
  color: #000;
  cursor: default;
}

/* 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: #111;
  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; }


/* 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 */

/* 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;
}

/* 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;
}