/* 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, .subPage {
  background-color: #ccc;
  font-family: Arial, Helvetica, Verdana, sans-serif;
}

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

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

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

.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
}

.img-stretchy {
  display: block;
  height: auto;
  width: 100%;
}

/* Body (Main Content) -------------------------------------------------------- */
#bd {
  background: #fff url(/vimages/L13/bodyBG.jpg);
}

#bd1 {
}

#bd2 {
}

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


/* Footer --------------------------------------------------------------------- */
.ft-heading {
  background-color: #101352;
  min-width: 960px;
  margin: 0 auto;
}

.ft-heading .ft-heading-img {
  min-width: 960px;
  position: absolute;
  z-index: 1;
}

.ft-heading .ft-heading-container {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
}

.ft-heading .ft-heading-inner {
  background-color: #fff;
  height: 100%;
  margin: 0 auto;
  position: relative;
  width: 960px;
}

.masthead-style-2 .ft-heading .ft-heading-inner {
  background-color: rgba(255, 255, 255, .8);
}

#ft {
}

#ft1 {
}

#ft2 {
  background-color: #101352;
  padding-bottom: 10px;
}

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

#ft3 a {
  color: #fff;
}

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

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

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

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

#topBanner.noBanner {
  display: none;
}

#bottomBanner {
  clear: both;
}

/* Navigation Menu (Masthead Style #1-2) -------------------------------------- */
.nav-container {
  position: absolute;
  left: 23%;
  width: 77%;
  z-index: 4;
}

/* Masthead Style #2 ------------------ */
.masthead-style-2 .nav-container {
  background-color: #101352;
  border-top: 5px solid #666;
  position: static;
  width: 100%;
}

.masthead-style-2 .nav-container > div {
  margin: 0 auto;
  width: 960px;
}

/* 1st-level - Masthead Style #1 */
#nav {
  float: left;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

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

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

#nav a span {
  display: block;
  padding: 7px 9px;
}

#nav > .dropdown.open > a > span.top,
#nav li:hover span.top {
  background-color: rgba(1, 82, 135, .2);
  color: #013354;
  cursor: pointer;
}

#nav .active > a > span.top {
  background-color: transparent;
  border-bottom: 3px solid rgba(1, 82, 135, .3);
  color: #013354;
  padding-bottom: 4px; /* 4px + 3px (border-bottom) = 7px */
}

/* Masthead Style #2 ------------------ */
.masthead-style-2 #nav {
  border-right: 1px solid #fff;
}

.masthead-style-2 #nav span.top {
  border-left: 1px solid #fff;
  color: #fff;
  padding: 10px;
}

/* Adjust the padding for the sign in/out icon */
.masthead-style-2 #nav .last span.top {
  padding: 12px 10px 11px;
}

.masthead-style-2 #nav > .dropdown.open > a > span.top,
.masthead-style-2 #nav li:hover span.top {
  background-color: #1a1f90;
  color: #fff;
}

.masthead-style-2 #nav .active > a > span.top {
  background-color: #1a1f90;
  border-bottom: none;
  color: #fff;
  padding-bottom: 10px;
}

/* 2nd-level */
#nav li ul {
  background-color: #101352;
  border: 1px solid #fff;
  display: none;
  line-height: normal;
  margin: 0;
  padding: 0;
  position: absolute;
  width: 225px;
  z-index: 7; /* 1 higher than links in the masthead - to keep drop-down menus from disappearing when mouse enters hyperlinked masthead images */
}

#nav .dropdown.open > ul,
#nav .dropdown:hover > ul {
  display: block;
}

#nav ul li {
  display: block;
  float: none;
  margin: 0;
  padding: 0;
  position: relative;
}

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

#nav ul a span {
  border-top: 1px solid transparent;
  border-bottom: 1px solid #fff;
  display: block;
  padding: 5px 10px;
  position: relative;
  color: #fff;
}

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

#nav li span.navArrow {
  padding: 5px 20px 5px 10px;
}

/* Flyout arrow - done with CSS only */
#nav li span.navArrow:after {
  content: "";
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  width: 0;
  height: 0;
  position: absolute;
  top: 7px;
}

/* Flyout arrow (pointing right) */
#nav li span.navArrow:after {
  border-left: 7px solid #fff;
  right: 5px;
}

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

#nav ul .active > a > span {
  background-color: #1a1f90;
  border-top: 1px solid transparent;
  color: #fff;
}

/* 3rd-level */
#nav .dropdown-submenu {
  position: absolute;
  left: 100%;
  top: 0;
}

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

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

/* Uncomment these rules to hide the down arrows - except from keyboard access *
#nav .fa-caret-down {
  display: none;
}
#nav > .open > a > span > .fa-caret-down,
#nav > 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;
}

#subNav .nav-keyboard-goto + li {
  border-top: none;
}
#subNav .dropdown.open .nav-keyboard-goto + li {
  border-top: 1px solid #fff;
}

#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-color: transparent;
  border-bottom: 3px solid rgba(1, 82, 135, .3);
  color: #013354;
  outline: 2px solid rgba(1, 82, 135, .3); /* make it noticeable */
  padding-bottom: 4px; /* 4px + 3px (border-bottom) = 7px */
}

.masthead-style-2 #nav > li > a:focus > span {
  background-color: #57585c;
  border-bottom: none;
  color: #fff;
  outline: 2px solid #fff; /* make it noticeable */
  padding-bottom: 10px;
}

#nav .dropdown-menu > li > a:focus > span,
#nav .dropdown-submenu > li > a:focus > span {
  background-color: #57585c;
  border-bottom: 1px solid transparent;
  color: #fff;
  outline: 2px solid #fff;
}

#subNav li > a:focus {
  background-color: #101352;
  color: #fff;
  margin-bottom: 2px;      /* make room for the outline */
  outline: 2px solid #fff; /* make it noticeable */
}

#subNav .dropdown > a:focus:before,
#subNav .active > a:focus:before {
  border-right-color: #fff;
}
/* END Keyboard accessibility for navbar -------------------------------------- */

/* Masthead (Style #1-2) ------------------------------------------------------ */
.masthead {
  min-width: 960px;
  max-width: 1980px;  /* Stop stretching width at HD width */
  margin-left: auto;  /* Center block */
  margin-right: auto;
  position: relative;
}

/* logo ----------------------------------------------------------------------- */
#logo {
  display: block;
  height: 103px;
  left: 26px;
  margin: 0;
  overflow: hidden;
  position: absolute;
  text-indent: -999em;
  top: 15px;
  width: 620px;
  z-index: 1; /* Want it on top of the motto/address text */
}

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

/* Image Rotator (Masthead Style #1-2) ---------------------------------------- */
#img-rotator-mask {
  min-width: 960px;
  position: absolute;
  z-index: 3;
}

#img-rotator img {
  left: 0;
  position: absolute;
  top: 0;
}

.masthead .img-fader {
  background: #fff url(/vimages/L13/bodyBG.jpg);
  height: 100%;
  position: absolute;
  width: 100%;
  z-index: 3;
}

/* Logo that "moves" with the stretchy header */
.masthead .masthead-logo {
  position: absolute;
  left: 2%;
  top: 3%;
  width: 20%;
  z-index: 4;
}

/* Logo that is "fixed" along the left-side of the content */
.masthead-logo-fixed {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 4;
}

.masthead-logo-fixed-inner {
  margin: 0 auto;
  padding: 10px 0 0 10px;
  width: 960px;
}

.masthead-logo-fixed-inner img{
  width: 185px;
}

/* Bump up the size of the logo by increasing its width at different breakpoints */
@media (min-width: 1100px) {
  .masthead-logo-fixed-inner img{ width: 215px; }
}
@media (min-width: 1200px) {
  .masthead-logo-fixed-inner img{ width: 245px; }
}
@media (min-width: 1400px) {
  .masthead-logo-fixed-inner img{ width: 290px; }
}
@media (min-width: 1650px) {
  .masthead-logo-fixed-inner img{ width: 340px; }
}
@media (min-width: 1920px) {
  .masthead-logo-fixed-inner img{ width: 380px; }
}

/* Content -------------------------------------------------------------------- */
#content {
  padding-bottom: 10px;
}

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

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

.masthead-style-2 #contentMain {
  background-color: transparent;
  padding-top: 10px;
  width: 669px;
}

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

.masthead-style-2 #contentSide {
  float: none;
  width: 251px; /* vbutton image width */
}

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

/* Search (Masthead Style #1) ------------------------------------------------- */
#siteSearchForm {
  background: transparent url(/vimages/L13/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;
  outline: none;
  width: 171px;
}

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

/* Search (Masthead Style #2) ------------------------------------------------- */
.masthead-style-2 #siteSearchForm {
  background: transparent url(/vimages/L13/searchbox-ms2.png) no-repeat;
  height: 27px; /* Image height */
  left: auto;
  padding: 0;
  position: absolute;
  right: 10px;
  top: 6px;
  width: 120px; /* Image width */
}

.masthead-style-2 #siteSearchForm form {
  margin: 5px 0 0 6px;
}

.masthead-style-2 #siteSearchForm .textInput {
  width: 95px;
}

.masthead-style-2 #siteSearchForm #searchButton {
  padding: 3px 0 0;
}

/* customMastheadLinks (Buckets under masthead)  ------------------------------ */
#customMastheadLinks {
  background: transparent url(/vimages/L13/customMastheadLinksBG.png) no-repeat center top;
  height: 88px;
  margin: 0;
  padding: 0;
  width: 960px;
}

#customMastheadLinks li {
  float: left;
  list-style: none;
  margin: 5px 0 0 6px;
  overflow: hidden;
  padding: 0;
}

#customMastheadLinks li:first-child {
  margin-left: 14px;
}

#customMastheadLinks a {
  display: block;
  height: 74px;
  width: 231px;
}

/* Sidebar Tabs (Masthead Style #1) ------------------------------------------- */
#sideTabs {
  padding: 10px 25px;
}

#sideTabs ul.tabsNav {
  border-bottom: 1px solid #101352;
  display: block;
  font-size: 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 #101352;
  float: left;
  list-style: none;
  padding: 0;
  position: relative;
}

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

#sideTabs ul.tabsNav li a {
  color: #666;
  display: block;
  font-weight: bold;
  outline: 0;
  padding: 0 10px;
  text-decoration: none;
}

#sideTabs ul.tabsNav li a:hover {
  color: #101352;
}

#sideTabs ul.tabsNav li a.selected {
  color: #101352;
}

/* Sidebar Tabs (Masthead Style #2) ------------------------------------------- */
.masthead-style-2 #sideTabs {
  padding: 10px;
}

/* vButtons (Masthead Style #1) ----------------------------------------------- */
#vButtons ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

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

#vButtons li a  {
  color: #101352;
  display: block;
  font-size: 123.1%;
  font-weight: bold;
  padding: 12px 10px;
  text-decoration: none;
  transition: .3s all ease;
}

#vButtons li a:hover, #vButtons li a:active, #vButtons li a:focus {
  background-color: #101352;
  color: #fff;
}

#vButtons li .vbutton-image {
  text-align: center;
}

#vButtons li .vbutton-image img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* vButtons (Masthead Style #2) ----------------------------------------------- */
.vbuttons {
  margin-bottom: 15px;
  padding-top: 15px;
}

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

.vbuttons li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.vbuttons li a  {
  background: #101352 url(/vimages/L13/vbuttonDrkBlue.jpg) no-repeat;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  font-weight: bold;
  height: 77px; /* image height */
  text-decoration: none;
}

.vbuttons li:nth-child(even) a  {
  background-image: url(/vimages/L13/vbuttonGrey.jpg);
}

.vbuttons li a.vbutton-image,
.vbuttons li:nth-child(even) a.vbutton-image {
  background: none;
  padding: 5px 0;
  text-align: center;
  vertical-align: middle;
}

/* Social Media Bar ----------------------------------------------------------- */
#socialMediaBar {
  margin: 0 auto;
  overflow: auto;
  width: 960px;
}

#socialMediaBar ul {
  float: right;
  list-style: none;
  margin: 0;
  padding: 0;
}

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

#socialMediaBar img {
  border-radius: 2px;
  vertical-align: middle;
}

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

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

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

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

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

#schoolAddress span:before {
  content: "";
  background-color: #fff;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  position: absolute;
  left: 11px;
  top: 6px;
}

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

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

#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/L13/vlistEmailBox.png) no-repeat;
  border: 0;
  font-size: 85%; /* 11px */
  height: 18px;
  line-height: 18px;
  outline: 0;
  padding: 0 5px;
  width: 168px; /* (5 * 2) + 168 = 178 (Image width) */
}

#vlist input {
  vertical-align: middle;
}

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

#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 #ccc;
  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;
}
#google_translate_element a {
  color: #000;
}

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

.hidden, .hiddenNav {
  display: none;
}

.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}

.clearfix:after {
  clear: both;
}

/* 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 */
/* App Store Links ------------------------------------------------------------ */
.app-store {
  clear: both;
  color: #fff;
  margin-bottom: 1em;
  padding-top: 1em;
}

.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 {
  text-align: left;
}