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

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

/* Links & type --------------------------------------------------------------- */
body {
  background: #fff url(/vimages/L10/mainBodyBG.jpg) repeat-x;
  font-family: Arial, Helvetica, Verdana, sans-serif;
}

/* Force the font size to be 100% (13px - see comments above). If OS font settings are increased in size,
   the font for the site in IE6-7 also increased. */
body.ie6, body.ie7 {
  font-size: 13px;
}

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

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

/* Header (includes navigation and masthead) ---------------------------------- */
#hdnav {
}

#hdnav1 {
}

#hdnav2 {
  background: transparent url(/vimages/L10/dropShadowHeader.png) no-repeat center top;
  padding-top: 20px;
}

#hdnav3 {
  background-color: #122995;
  margin: 0 auto;
  width: 960px;
}

#hdmast {
}

#hdmast1 {
}

#hdmast2 {
  background: transparent url(/vimages/L10/dropShadowBody.png) repeat-y center top;
}

#hdmast3 {
  background-color: #122995;
  margin: 0 auto;
  width: 960px;
}

/* Body ----------------------------------------------------------------------- */
#bd {
}

#bd1 {
}

#bd2 {
  background: transparent url(/vimages/L10/dropShadowBody.png) repeat-y center top;
}

#bd3 {
  background-color: #fff;
  margin: 0 auto;
  width: 960px;
}

/* Footer --------------------------------------------------------------------- */
#ft {
}

#ft1 {
}

#ft2 {
  background: transparent url(/vimages/L10/dropShadowFooter.png) no-repeat center bottom;
  padding-bottom: 20px;
}

#ft3 {
  background-color: #122995;
  color: #fff;
  margin: 0 auto;
  width: 960px;
}

#ft3 a:link, #ft3 a:visited, #ft3 a:hover {
  color: #fff;
}

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

#leaderBoard2 {
  margin: 0 auto;
  width: 960px;
}

#leaderBoard p, #topBanner p, #bottomBanner p {
  margin-bottom: 0;
}

#topBanner {
  border-bottom: 1px solid #999;
  padding: 8px 0;
  text-align: left;
}

#topBanner.noBanner {
  display: none;
}

/* Top Banner News Ticker ----------------------------------------------------- */
#topBanner.ticker {
  border-top: 1px solid #fff;
  padding: 0;
}
  
#tbTicker {
  /* IE needs a background color - otherwise font anti-aliasing gets messed up during the fades */
  background-color: #fff;
  font-weight: bold;
  height: 34px;
  line-height: 34px;
  overflow: hidden;
  position: relative;
  width: 100%;
}

#tbTicker.tickerWarning {
  background-color: #900;
  color: #fff;
}

#tbTicker a:link, #tbTicker a:visited {
  color: #122995;
}

#tbTicker a:hover, #tbTicker a:active {
  color: #000;
  text-decoration: underline;
}

#tbTicker.tickerWarning a:link, #tbTicker.tickerWarning a:visited, #tbTicker.tickerWarning a:hover, #tbTicker.tickerWarning a:active {
  color: #fff;
  text-decoration: underline;
}

#tbTicker .tickerTitle {
  color: #900;
  padding: 0 5px;
  text-transform: uppercase;
}

#tbTicker.tickerWarning .tickerTitle {
  color: #fff;
}

#tbTicker .tickerBar {
  background-color: #fff;
  border-left: 1px solid #fff;
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
}

#tbTicker.tickerWarning .tickerBar {
  background-color: #900;
  border-left: 1px solid #900;
}

#bottomBanner {
  clear: both;
}

/* Sub-navigation Menu -------------------------------------------------------- */

/* 1st-level */
#subnav {
  background: #fc0 url(/vimages/L10/subnavBG.jpg) repeat;
  float: left;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

#subnav li {
  display: inline;
  float: left;
  margin: 0;
  padding: 0;
}

#subnav a {
  color: #000;
  margin: 0;
  padding: 0;
  text-decoration: none;
  white-space: nowrap;
}

#subnav a span {
  display: block;
  padding: 8px 9px;
  position: relative;  /* must have position set to anything other than static to use z-index */
  z-index: 3;          /* raises the z-index of the line item 3 levels all other elements */
}

#subnav li:hover span.top, #subnav a.selected span.top {
  background: #111; /* Old browsers */
  background: -moz-linear-gradient(top, #2a2a2a 0%, #000 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2a2a2a), color-stop(100%,#000)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #2a2a2a 0%,#000 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #2a2a2a 0%,#000 100%); /* Opera11.10+ */
  background: -ms-linear-gradient(top, #2a2a2a 0%,#000 100%); /* IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2a2a2a', endColorstr='#000',GradientType=0 ); /* IE6-9 */
  background: linear-gradient(top, #2a2a2a 0%,#000 100%); /* W3C */

  color: #fff;
  cursor: pointer;
}


/* 2nd-level */
#subnav li ul {
  background-color: #fc0;
  border: 1px solid #967100;  /* Use border for "beveled" appearance */
  display: none;
  line-height: normal;
  margin: 0;
  padding: 0;
  position: absolute;
  width: 185px;
  z-index: 4;
}

#subnav .dropdown.open > ul,
#subnav .dropdown:hover > ul {
  display: block;
}
body.ie6 #subnav, body.ie7 #subnav { behavior: url(/javascripts/ie/cssHoverFix.htc); }

#subnav ul li {
  display: block;
  float: none;
  margin: 0;
  padding: 0;
  position: relative;
}
body.ie6 #subnav ul li { float: left; width: 185px; } /* IE6 whitespace bug */

#subnav ul a {
  white-space: normal;
}

#subnav ul a span {
  border-top: 1px solid #ffe691; /* Use top & bottom border for "beveled" appearance */
  border-bottom: 1px solid #967100;
  display: block;
  padding: 4px 4px 4px 8px;
}

#subnav ul li.last a span {
  border-bottom: none;
}

#subnav > .dropdown.open > a > span,
#subnav ul li:hover span, #subnav ul li a.selected span {
  background-color: #000;
  border-top: 1px solid #000;
  color: #fff;
}


/* Navigation Menu ------------------------------------------------------------ */
#navIndicator {
  background: transparent url(/vimages/L10/navIndicator.png) no-repeat center top;
  height: 35px; /* Image height */
  position: absolute;
  z-index: 2;
}

/* 1st-level */
#nav {
  background: #122995 url(/vimages/L10/navBG.jpg) repeat;
  float: left;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

#nav li {
  display: inline;
  float: left;
  margin: 0;
  padding: 0;
}

#nav a {
  color: #fff;
  margin: 0;
  padding: 0;
  text-decoration: none;
  white-space: nowrap;
}

#nav a span {
  display: block;
  padding: 7px 9px 12px;
  position: relative;  /* must have position set to anything other than static to use z-index */
  z-index: 3;          /* raises the z-index of the line item 3 levels all other elements */
}

#nav > .dropdown.open > a > span,
#nav li:hover span.top, #nav a.selected span.top {
  background: transparent url(/vimages/L10/navIndicator.png) no-repeat center top;
  color: #fff;
  cursor: pointer;
}

/* 2nd-level */
#nav li ul {
  background-color: #444;
  border: 1px solid #fff;  /* Use border for "beveled" appearance */
  display: none;
  line-height: normal;
  margin: 0;
  padding: 0;
  position: absolute;
  width: 185px;
  z-index: 4;
}

#nav .dropdown.open > ul,
#nav .dropdown:hover > ul {
  display: block;
}
body.ie6 #nav, body.ie7 #nav { behavior: url(/javascripts/ie/cssHoverFix.htc); }

#nav ul li {
  display: block;
  float: none;
  margin: 0;
  padding: 0;
  position: relative;
}
body.ie6 #nav ul li { float: left; width: 185px; } /* IE6 whitespace bug */

#nav ul a {
  white-space: normal;
}

#nav ul a span {
  border-top: 1px solid transparent; /* Use top & bottom border for "beveled" appearance */
  border-bottom: 1px solid #fff;
  display: block;
  padding: 4px 4px 4px 8px;
  color: #fff;
}

#nav ul li.last a span {
  border-bottom: none;
}

#nav li span.navArrow {
  background: transparent url(/vimages/L10/navArrow.gif) no-repeat 177px 50%;
  padding: 4px 12px 4px 8px;
}

#nav ul > .dropdown.open > a > span,
#nav ul li:hover span {
  background-color: #122995;
  border-top: 1px solid #122995;
  color: #fff;
}

#nav ul li a.selected span {
  background-color: #122995;
  border-top: 1px solid #122995;
  color: #fff;
}

/* 3rd-level */
#nav li ul ul {
  position: absolute;
  left: 100%;
  top: 0;
}

#nav ul li:hover li span {
  background-color: #444;
  border-top: 1px solid transparent;
  color: #fff;
}

#nav ul ul li:hover span {
  background-color: #122995;
  border-top: 1px solid #122995;
  color: #fff;
}

#nav ul ul li a.selected span {
  background-color: #122995;
  border-top: 1px solid #122995;
  color: #fff;
}

#nav ul.level3 li a span {
  border-bottom: 1px solid #fff;
}

#nav ul.level3 li.last a span {
  border-bottom: none;
}

/* Masthead ------------------------------------------------------------------- */
#masthead {
  background: transparent url(/vimages/L10/masthead.png) no-repeat;
  height: 250px;
  position: relative;
  width: 960px;
}

/* logo ----------------------------------------------------------------------- */
#logo {
  display: block;
  height: 217px;
  left: 35px;
  margin: 0;
  overflow: hidden;
  position: absolute;
  text-indent: -999em;
  top: 19px;
  width: 545px;

/*   outline: 1px solid #fff; /* For debugging - aligning clickable area with logo */ */
}

#logoImage {
  display: block;
  height: 100%;
  width: 100%;
}
#logoImage:focus {
  border: 2px solid #fff;
  outline: none;
  height: calc(100% - 4px);
  width: calc(100% - 4px);
}

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

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

#imgRotatorMask {
  background: transparent url(/vimages/L10/mastheadMask.png) no-repeat;
  float: right;
  height: 250px;
  position: absolute;
  right: 0;
  top: 0;
  width: 370px;
  z-index: 2;
}
body.ie6 #imgRotatorMask { behavior: url(/javascripts/ie/iepngfix.htc); }

/* Content -------------------------------------------------------------------- */
#content {
  /* Faux column color - 2nd column */
  background: transparent url(/vimages/L10/contentBG.jpg) repeat-y right top;
  position: relative; /* Need an anchor for the "social media" bar which will be at the bottom of the 2nd column */
}

/* Main Content --------------------------------------------------------------- */
#contentMain {
  background-color: #fff;
  float: left;
  padding: 0 20px;
  width: 550px; /* 590 - (20 * 2) = 550 */
}

/* Accomodate Calendar and Archive page - no 2nd column */
#contentMain.wideload {
  width: 920px;
}

/* Sidebar Content ------------------------------------------------------------ */
#contentSide {
  float: right;
  width: 370px;
}

#sideHd {
  background-color: #000;
  border-bottom: 1px solid #ccc;
  height: 40px;
  position: relative;
}

/* Search --------------------------------------------------------------------- */
#siteSearchForm {
  background: transparent url(/vimages/L10/searchbox.png) no-repeat;
  height: 27px; /* Image height */
  left: 160px;
  padding: 4px 0 0 6px;
  position: absolute;
  top: 6px;
  width: 198px; /* Image width */
}


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

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

/* Sidebar Tabs --------------------------------------------------------------- */
#sideTabs {
  /* Need room at bottom of 2nd column for the social media bar */
  padding: 10px 25px 40px;
}

#sideTabs ul.tabsNav {
  background-color: #bbb;
  border-bottom: 1px solid #fff;
  display: block;
  font-size: 123.1%; /* 16px */
  font-weight: bold;
  height: 30px;
  line-height: 30px;
  list-style: none;
  margin: 0;
  padding: 0 0 3px;
}

#sideTabs ul.tabsNav li {
  border-right: 1px solid #122995;
  float: left;
  list-style: none;
  position: relative;
}

#sideTabs ul.tabsNav li.last {
  border-right: 0;
}

#sideTabs ul.tabsNav li a {
  background-color: #bbb;
  color: #122995;
  display: block;
  font-weight: bold;
 
  padding: 0 10px;
  text-decoration: none;
}
body.ie6 #sideTabs ul.tabsNav li a, body.ie7 #sideTabs ul.tabsNav li a { cursor: pointer; }

#sideTabs ul.tabsNav li a .fader {
  opacity: 0;
  -moz-opacity: 0;
  filter: alpha(opacity=0);
  
  background-color: #666;
  height: 30px;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

#sideTabs ul.tabsNav li a.selected {
  background-color: #bbb;
  color: #000;
}

#sideTabs .sidePanels {
  background-color: #bbb;
}

#sideTabs .sidePanel {
  /* IE needs a background color to prevent font anti-aliasing problems when jQuery fading */
  background-color: #bbb;
}

/* vButtons ------------------------------------------------------------------- */
#vButtons ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#vButtons li {
  border-bottom: 1px solid #fff;
  list-style: none;
  margin: 0;
  padding: 0;
}

#vButtons li a  {
  display: block;
  font-size: 123.1%;
  font-weight: bold;
  padding: 12px 10px;
  text-decoration: none;
}

#vButtons li a:hover {
  background-color: #122995;
  color: #fff;
}

/* Social Media Bar ----------------------------------------------------------- */
#socialMediaBar {
  background-color: #000;
  bottom: 0;
  position: absolute;
  right: 0;
  width: 370px; /* 2nd column width */
}
#socialMediaBar a {
  color: #fff;
}
#socialMediaBar div {
  font-size: 10px;
  text-align: center;
}

#socialMediaBar.wideload {
  background-color: #fff;
}
#socialMediaBar.wideload a {
  color: #000;
}

#socialMediaBar ul {
  list-style: none;
  margin: 0 0 0 25px;
  padding: 0;
}

#socialMediaBar.wideload ul {
  margin-left: 150px; /* This will need to be adjusted based on how many icons are in the bar */
}

#socialMediaBar li {
  float: left;
  list-style: none;
  margin: 0;
  padding: 7px 10px 7px 0;
}

#socialMediaBar img {
  border-radius: 2px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;

  box-shadow: 1px 1px 3px rgba(0,0,0,0.5);
  -moz-box-shadow: 1px 1px 3px rgba(0,0,0,0.5);
  -webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.5);
  
  vertical-align: middle;
}

/* Breadcrumbs ---------------------------------------------------------------- */
#sectionName a { /* siteimprove - "Link identified only by color" (1.4.1 Use of Color) */
  text-decoration: underline;
}

#sectionName {
  border-bottom: 1px solid #999;
  color: #122995;
  font-size: 93%;
  font-weight: normal;
  margin: 0;
  padding: 9px 0;
  text-transform: uppercase;
}

/* Footer Row 1 (School Address & vList Signup -------------------------------- */
#ftRow1 {
  border-bottom: 1px solid #fff;
}

/* Footer Row2 (Copyright & Translation) -------------------------------------- */
#ftRow2 {
  padding: 0 0 1em;
}

/* School Address ------------------------------------------------------------- */
#schoolAddress {
  float: left;
  font-size: 116%; /* 15px */
  font-weight: bold;
  padding: 10px 0 0;
  text-align: center;
  width: 590px;
}

#schoolAddress .addressLine {
  margin: 0 0 8px;
}

#schoolAddress span {
  background: transparent url(/vimages/L10/bullet.png) no-repeat scroll left center;
  padding: 0 15px 0 22px;
}

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

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

/* vList Signup --------------------------------------------------------------- */
#vlist {
  float: right;
  padding: 0 0 10px;
  width: 370px;
}

#vlist form {
  float: left;
  padding: 10px 0 0 20px;
  width: 205px;
}

#vlist p {
  font-weight: bold;
  margin: 0 0 5px;
}

#vlist p.multiple {
  margin-top: 8px;
}

#vlist #email {
  background: transparent url(/vimages/L10/vlistEmailBox.png) no-repeat;
  border: 0;
  font-size: 85%; /* 11px */
  height: 18px;
  line-height: 18px;
 
  padding: 0 5px;
  width: 168px; /* (5 * 2) + 168 = 178 (Image width) */
}

#vlist input {
  vertical-align: middle;
}
body.ie6 #vlist #goButtonEmail { behavior: url(/javascripts/ie/iepngfix.htc); }

#vlist ul {
  display: inline;
  float: right;
  font-size: 93%; /* 12px */
  margin: 18px 35px 0 0;
  padding: 0;
  text-transform: lowercase;
}

#vlist.secureLoginSingle ul {
  margin-top: 8px;
}

#vlist.secureLoginMulti ul {
  margin-top: 12px;
}

#vlist a:link, #vlist a:visited, #vlist a:hover {
  text-decoration: underline;
}

/* Copyright & SOCS Links ----------------------------------------------------- */
#copyRight {
  float: left;
  margin: 0;
  padding: 14px 0;
  text-align: center;
  width: 775px;
}

#copyRight span {
  border-left: 1px solid #fff;
  padding: 0 7px;
}

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

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

#copyRight img {
  padding-top: 0;
  vertical-align: middle;
}

/* Translation ---------------------------------------------------------------- */
#google_translate_element {
  float: right;
  padding: 10px;
  text-shadow: none;
}
#google_translate_element a {
  color: #000 !important;
}

/* Misc ----------------------------------------------------------------------- */
#upgradeBrowser {
  padding: 1em 0;
}

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

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

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

.hidden, .hiddenNav {
  display: none;
}

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


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

/* BEGIN Keyboard accessibility for navbar ------------------------------------ */

/* Uncomment these rules to hide the down arrows - except from keyboard access *
#nav .fa-caret-down,
#subnav .fa-caret-down {
  display: none;
}
#nav > .open > a > span > .fa-caret-down,
#nav > li > a:focus > span > .fa-caret-down,
#subnav > .open > a > span > .fa-caret-down,
#subnav > li > a:focus > span > .fa-caret-down {
  display: inline-block;
}
**/

#nav .nav-keyboard-goto,
#subnav .nav-keyboard-goto {
  display: none;
}

#nav .open > ul > .nav-keyboard-goto,
#subnav .open > ul > .nav-keyboard-goto {
  display: block;
}

#nav a:focus,
#subnav a:focus {
  outline: none; /* Turn off <a> focus outline - outline will be added to the <span> inside the <a> */
}

#nav > li > a:focus > span {
  background: transparent url(/vimages/L10/navIndicator.png) no-repeat center top;
  outline: 2px solid #fff;
}

#subnav > li > a:focus > span {
  background-color: #000;
  color: #fff;
  outline: 2px solid #fff;
}

#nav .level2 > li > a:focus > span,
#nav .level3 > li > a:focus > span {
  background-color: #122995;
  border-color: #122995;
  color: #fff;
  outline: 2px solid #fff;

  /* adjust for the outline width */
  margin-bottom: 2px;
  padding-bottom: 2px;
}
#nav .level2 > .last > a:focus > span {
  margin-bottom: 1px;
}

#subnav .level2 > li > a:focus > span {
  background-color: #000;
  border-color: #000;
  color: #fff;
  outline: 2px solid #fff;

  /* adjust for the outline width */
  margin-bottom: 2px;
  padding-bottom: 2px;
}
#subnav .level2 > .last > a:focus > span {
  margin-bottom: 1px;
}
/* END Keyboard accessibility for navbar -------------------------------------- */

/* App Store Links ------------------------------------------------------------ */
.app-store {
  clear: both;
  color: #fff;
  margin-bottom: 1em;
  padding: 1em 0 0 10px;
}

.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;
}

/* Overriding earlier rules */
#schoolAddress {
  padding: 10px 0 0 10px;
  text-align: left;
  width: 580px;
}