@import "./vcalendar/calendarShared.css";

/* Override easyCS.css */
body #ezCS-MobileBar { min-width: 260px; }
body #ezCS-MobileBar .social { padding: 6px 9px 4px; }
body #ezCS-BarToggle { top: 81px; }

/* `Main Styles and Grid Overrides 
------------------------------------------------------------------------------- */

/* Set some colors that will be used in the layout */
body {
  background: #595959 url(/vimages/m2/carbonFiber_gray.jpg);
}

.color-one { /* Header color */
  background-color: /*Main Color*/ #d01f21;
}
.color-two { /* Body color */
  background: #858585; /* Old browsers */
  background: -moz-linear-gradient(top,  #b2b2b2 0%, #4d4d4d 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b2b2b2), color-stop(100%,#4d4d4d)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #b2b2b2 0%,#4d4d4d 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #b2b2b2 0%,#4d4d4d 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #b2b2b2 0%,#4d4d4d 100%); /* IE10+ */
  background: linear-gradient(to bottom, #b2b2b2 0%,#4d4d4d 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b2b2b2', endColorstr='#4d4d4d',GradientType=0 ); /* IE6-9 */
}
.color-three { /* Footer color */
  background-color: #808080;
}

img {
  border: none;
}

.container {
  margin: 0;
  overflow-x: hidden; /* Prevents horizontal scrolling for off-canvas elements */
  padding: 0;
}

/* Make sure that the bands stretch to 100% width */
.full-width {
  min-width: 100%;
  position: relative;
  z-index: 1; /* Critical for the faux column colors (:before :after) */
}

a:link, a:visited {
  color: /*Link Color*/ #be0d0f;
  text-decoration: none;
}

a:hover, a:active, a:focus {
  color: /*Link Hover Color*/ #9c0000;
  text-decoration: underline;
}

/* `TYPOGRAPHY
------------------------------------------------------------------------------- */

@font-face {
  font-family: 'icons';
  src: url('/vimages/m2/fonts/icomoon.eot?#') format('eot'), 
       url('/vimages/m2/fonts/icomoon.woff') format('woff'), 
       url('/vimages/m2/fonts/icomoon.ttf') format('truetype'); 
}

[data-icon]:before {
  content: attr(data-icon);
  font-family: icons;
  speak: none; /* Not to be trusted, but hey. */
}

.icon-alone {
  display: inline-block; /* Fix for clickability issue in WebKit */
}

.screen-reader-text {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

/* `LAYOUT
------------------------------------------------------------------------------- */
.show-anim nav[role='navigation'],
.show-anim section[role='main'],
.show-anim section[role='complementary'],
.show-anim #bd > .row:before,
.show-anim #bd > .row:after {
  -webkit-transition: .2s all ease;
     -moz-transition: .2s all ease;
      -ms-transition: .2s all ease;
       -o-transition: .2s all ease;
          transition: .2s all ease;
}

nav[role='navigation'],
section[role='main'],
section[role='complementary'] {
  display: block;
  padding: 15px 15px 0;
  position: relative;
  width: 100% !important; /* Foundation override */
}

nav[role='navigation'] {
  float: left;
  margin-left: -100%;
  z-index: 2;
}

section[role='main'] {
  float: left;
  margin-left: 0;
  position: relative;
  z-index: 1;
}

section[role='complementary'] {
  float: right !important; /* Foundation override */
  margin-right: -101%;
  z-index: 2;
}

.show-sidebar nav[role='navigation'] {
  margin-left: -200%;
}

.show-sidebar section[role='main'] {
  margin-left: -81%;
}

.show-sidebar section[role='complementary'] {
  margin-right: 0;
  width: 80% !important; /* Foundation override */
}

.show-menu nav[role='navigation'] {
  margin-left: 0;
  width: 80% !important; /* Foundation "column" override */
}

.show-menu section[role='main'] {
  margin-right: -100%;
}

#bd > .row {
  background-color: #fff;
  overflow: hidden;
  position: relative;
  z-index: -2;
}

/* Faux left/right columns */
#bd > .row:before, #bd > .row:after {
  background-color: #b2b2b2;
  content: '';
  display: block;
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0; 
  width: 0;
}

#bd > .row:before { left: 0;   }
#bd > .row:after  { left: 100%; }

.show-sidebar #bd > .row:before { width: 0; }
.show-sidebar #bd > .row:after  { left: 20%; width: 80%; }

.show-menu #bd > .row:before { width: 80%; }
.show-menu #bd > .row:after  { width: 0; }

/* Nav bar at top */
.no-js .sma-navbar .sma-btn-menu, .no-js .sma-navbar .sma-btn-sidebar {
  display: none;
}

.sma-navbar-spacer {
  height: 42px;
}

.sma-navbar {
  background: #333;
  background: -moz-linear-gradient(top,  rgba(76,76,76,1) 1%, rgba(76,76,76,1) 40%, rgba(51,51,51,1) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgba(76,76,76,1)), color-stop(40%,rgba(76,76,76,1)), color-stop(100%,rgba(51,51,51,1))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  rgba(76,76,76,1) 1%,rgba(76,76,76,1) 40%,rgba(51,51,51,1) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  rgba(76,76,76,1) 1%,rgba(76,76,76,1) 40%,rgba(51,51,51,1) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  rgba(76,76,76,1) 1%,rgba(76,76,76,1) 40%,rgba(51,51,51,1) 100%); /* IE10+ */
  background: linear-gradient(to bottom,  rgba(76,76,76,1) 1%,rgba(76,76,76,1) 40%,rgba(51,51,51,1) 100%); /* W3C */
  border-bottom: 1px solid #111;
  -webkit-box-shadow: 0 0 8px rgba(0,0,0,.8);
          box-shadow: 0 0 8px rgba(0,0,0,.8);
  left: 0;
  padding: 6px 0 4px;
  position: fixed;
  right: 0;
  top: 0;
  text-align: left;
  width: 100%;
  z-index: 1030;
}

.sma-navbar .sma-btn {
  color: #ddd;
  display: inline-block;
  margin-right: 5px;
  padding: 8px 6px;
}

.sma-navbar > .sma-navbar-side {
  float: right;
}

.sma-navbar > .sma-navbar-side > .sma-btn {
  margin-left: 5px;
  margin-right: 0;
}

@media only screen and (min-width: 768px) {
  .sma-navbar .sma-btn-search {
    display: none;
  }
}

@media only screen and (min-width : 81.25em) { /* 1300px */
  .sma-navbar .sma-btn-menu, .sma-navbar .sma-btn-sidebar {
    display: none;
  }
}
/* `HEADER
------------------------------------------------------------------------------- */
#hd {
/*Header Gradient1*/  background: #d01f21; /* Old browsers */
/*Header Gradient2*/  background: -moz-linear-gradient(top, #ff5254 0%, #d01f21 50%, #d01f21 100%); /* FF3.6+ */
/*Header Gradient3*/  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff5254), color-stop(50%,#d01f21), color-stop(100%,#d01f21)); /* Chrome,Safari4+ */
/*Header Gradient4*/  background: -webkit-linear-gradient(top, #ff5254 0%,#d01f21 50%,#d01f21 100%); /* Chrome10+,Safari5.1+ */
/*Header Gradient5*/  background: -o-linear-gradient(top, #ff5254 0%,#d01f21 50%,#d01f21 100%); /* Opera 11.10+ */
/*Header Gradient6*/  background: -ms-linear-gradient(top, #ff5254 0%,#d01f21 50%,#d01f21 100%); /* IE10+ */
/*Header Gradient7*/  background: linear-gradient(to bottom, #ff5254 0%,#d01f21 50%,#d01f21 100%); /* W3C */
/*Header Gradient8*/  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=#ff5254, endColorstr=#d01f21,GradientType=0 ); /* IE6-9 */

  border-bottom: 5px solid /*Header Bottom Border*/ #a50000;
}

#hd .row {
  position: relative;
}

#hd a {
  color: #fff;
}

#logo a {
  font-style: italic;
  text-shadow: 2px 2px 4px rgba(0,0,0,.5);
}

#logo a:hover {
  text-decoration: none;
}

/* Leaderboard Ad */
#leaderBoard2 > div {
  margin-top: 1em;
}

/* Search (Simple) */
#siteSearchForm form {
  margin: 10px 0;
  position: relative;
}

#siteSearchForm label {
  color: #fff;
}

#siteSearchForm .textInput {
  padding-right: 25px;
}

#siteSearchForm .searchButton {
  bottom: 4px;
  position: absolute;
  right: 3px;
}

/* Search Button (show-for-small) */
#hd .small-search {
  -webkit-border-radius: 3px;
          border-radius: 3px;
  -webkit-box-shadow: inset 0 20px 20px rgba(255,255,255,.1);
  box-shadow: inset 0 20px 20px rgba(255,255,255,.1);
  border: 1px solid #333;
  background: #666;
  background: rgba(0,0,0,.25);
  bottom: 5px;
  color: #fff;
  display: block;
  font-size: 14px;
  padding: 15px 0;
  position: absolute;
  right: 10px;
  text-align: center;
  width: 20%;
}

#hd .small-search:hover {
  background: #333;
  background: rgba(0,0,0,.35);
  border: 1px solid #222;
  color: #ddd;
  text-decoration: none;
}

/* `1ST COLUMN - NAVIGATION
------------------------------------------------------------------------------- */

/* Nav menu */
.nav {
  background-color: #666;
  border: 1px solid #333;
  border-top: none;
  padding: 0;
}

.nav .sub-menu {
  background-color: #666;
  border-left: 1px solid #333;
  border-bottom: 1px solid #333;
  margin-left: 10px;
}
 
.nav li {
  border-top: 1px solid #333;
  display: block;
  margin: 0;
  padding: 0;
  position: relative;
}

.nav li:hover, .nav li:focus {
  background-color: /*Active Nav*/ #421bdf;
}

.nav .open.has-sub-menu {
  padding-bottom: 10px;
}

.nav a {
  color: #fff;
  display: block;
  font-size: 16px;
  font-size: 1.6rem;
  padding: 7px 45px 7px 7px;
}

.nav a:hover, .nav a:focus {
  color: #fff;
  text-decoration: none;
}

.nav .active > a {
  color: #fff;
  cursor: default;
}

.nav span { /* Plus/minus block */
  background-color: #777;
  color: #fff;
  cursor: pointer;
  padding: 9px;
  position: absolute;
  right: 0;
  top: 0;
}

/* 1st-level */
.nav > .active, .nav > .active:hover, .nav > .active:focus {
  background-color: #555;
}

/* 2nd-level */
.nav ul > .active {
  background-color: #444;
}

/* 3rd-level */
.nav ul ul > .active {
  background-color: #333;
}

/* `2ND COLUMN - MAIN
------------------------------------------------------------------------------- */

/* Breadcrumbs */
#crumbs {
  list-style: none;
  padding-right: 25px;
  overflow: hidden;
}

#crumbs li {
  border-bottom: 1px solid #fff;
  font-size: 16px;
  font-size: 1.6rem;
  float: left;
}

#crumbs li a {
  background-color: #333;
  color: #fff;
  display: block;
  float: left;
  padding: 5px 3px 5px 25px;
  position: relative;
  text-decoration: none;
}

#crumbs li:first-child a {
  padding-left: 10px;
}

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

#crumbs li a span {
  position: absolute;
  font-size: 35px;
  color: #333;
  right: -28px;
  top: -10px;
  z-index: 1;
}

#crumbs li.crumb-2 a { background-color: #555; }
#crumbs li.crumb-2 span { color: #555; }
#crumbs li.crumb-3 a { background-color: #777; }
#crumbs li.crumb-3 span { color: #777; }

#crumbs li.last a, #crumbs li.last a:hover {
  background-color: transparent;
  color: #222;
  padding-right: 10px;
}

#crumbs li.last span {
  display: none;
}

#crumbs li a:hover { background-color: #111; }
#crumbs li a:hover span { color: #111; }

#crumbs li.last.article a {
  background-color: #ebebeb;
}

#crumbs li.last.article a:hover {
  background-color: #111;
  color: #fff;
}

#crumbs li.last.article span {
  color: #ebebeb;
  display: inline;
}

#crumbs li.last.article a:hover span {
  color: #111;
}

/* News Update Signup Form */
#sectionName {
  border-bottom: 1px solid #333;
  color: #333;
  font-size: 20px;
  font-size: 2rem;
  margin: 0 0 1em;
  padding: 0 0 5px;
  text-shadow: 1px 1px 2px rgba(0,0,0,.5);
}

form[action*="vnotifier"] h1, form[action*="vnotifier"] h2 {
  font-size: 16px;
  font-size: 1.6rem;
}

form[action*="vnotifier"] label {
  color: #222;
}

form[action*="vnotifier"] label[for^="action"] {
  display: inline;
}

/* `3RD COLUMN - COMPLEMENTARY
------------------------------------------------------------------------------- */

/* Weather */
#weather {
  margin: 0 0 15px;
}

#weather a {
  -webkit-border-radius: 3px;
          border-radius: 3px;
  -webkit-box-shadow: inset 0 20px 20px rgba(255,255,255,.3);
  box-shadow: inset 0 20px 20px rgba(255,255,255,.3);
  border: 1px solid #333;
  background-color: #979797;
  color: #000;
  display: block;
  font-size: 16px;
  font-size: 1.6rem;
  padding: 15px 7px;
  text-align: center;
}

#weather a:hover {
  background-color: #858585;
  border: 1px solid #222;
  text-decoration: none;
}

/* sideAccordion (changing Foundation default styling) */
ul.accordion {
  margin: 0 0 15px 0;
  border-bottom: 1px solid #222;
}

ul.accordion > li {
  border-top: 1px solid #222;
}

ul.accordion > li div.title {
  background: #666;
  border-left: 1px solid #222;
  border-right: 1px solid #222;
  color: #fff;
  padding: 15px 12px 15px 8px;
  text-shadow: 1px 1px 3px rgba(0,0,0,.5);
  -webkit-transition: 0.15s background linear;
  -moz-transition: 0.15s background linear;
  -o-transition: 0.15s background linear;
  transition: 0.15s background linear;
}

ul.accordion > li div.title:after {
  border-color: transparent #fff transparent transparent;
  right: 5px;
  top: 19px;
}

ul.accordion > li div.title > h5 {
  color: #fff;
}

ul.accordion > li .content {
  padding: 15px 8px;
}

ul.accordion > li.active {
  border-top: 3px solid #222;
}

ul.accordion > li.active div.title {
  background: #666;
  padding-top: 13px;
  padding-right: 18px;
}

ul.accordion > li.active div.title:after {
  border-color: #fff transparent transparent transparent;
}

ul.accordion > li.active .content, .no-js ul.accordion > li .content {
  background: transparent;
  border-top: 1px solid #777;
  border-left: 1px solid #222;
  border-right: 1px solid #222;
  -webkit-box-shadow: inset 0 2px 8px rgba(0,0,0,.3);
  box-shadow: inset 0 2px 8px rgba(0,0,0,.3);
  display: block;
}

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

#vButtons li {
  border: none;
  border-bottom: 1px solid #333;
}

#vButtons li.first {
  border-top: 1px solid #333;
}

#vButtons li a  {
  display: block;
  color: #333;
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: bold;
  padding: 7px 5px;
}

#vButtons li a:hover {
  background-color: #858585;
  color: #fff;
  text-decoration: none;
  text-shadow: 1px 1px 3px rgba(0,0,0,.5);
}

/* Calendar Highlights - List */
#calendarList .eventList {
  margin: 0;
  padding: 0;
}

#calendarList .eventList li {
  background-color: #fff;
  -webkit-border-radius: 3px;
          border-radius: 3px;
  list-style: none;
  margin: 0 0 1em;
  padding: .5em;
}

#calendarList .listWrapper {
  height: 100%;
  overflow: hidden;
}

#calendarList p {
  font-size: 13px;
  font-size: 1.3rem;
  line-height: 1.3;
  margin: 0 0 .25em;
}

#calendarList .eventDate {
  border-bottom: 1px solid #5e5e5e;
  font-size: 14px;
  font-size: 1.4rem;
  font-weight: bold;
  line-height: 1.6;
  margin: 0 0 .5em;
  text-shadow: 1px 1px 2px rgba(0,0,0,.3);
}

#calendarList .evDay {
  margin-right: 1em;
}

#calendarList .eventTitle {
  font-weight: bold;
}

#calendarList .viewLink {
  font-weight: bold;
  margin-top: 1em;
  text-align: center;
}

/* Banners - Right 1 - 5 */
#tileAds > div {
  border-bottom: 1px solid #333;
}

#tileAds a {
  display: block;
  color: #333;
  padding: 7px 5px;
}

#tileAds a:hover {
  color: #000;
  text-decoration: none;
  text-shadow: 1px 1px 3px rgba(0,0,0,.5);
}

/* Polls - Voting */
#pollTopic {
  border-bottom: 1px solid #333;
  padding-bottom: 7px;
  text-shadow: 1px 1px 3px rgba(0,0,0,.5);
}

#vpoll ul {
  list-style: none;
  margin: 0 0 7px;
  padding: 0;
}

#vpoll li {
  list-style: none;
  margin: 0 0 1em;
  padding: 0;
}

#vpoll li input {
  float: left;
}

#vpoll li label {
  color: #222;
  display: block;
  margin: 0 0 0 22px;
}

#vpoll li a, #vpoll .choiceText a {
  color: #000;
  text-decoration: underline;
}

#pollVoteButton {
  border-top: 1px solid #333;
  padding: 15px 0 0;
  text-align: center;
}

#pollVoteButton a:hover {
  text-decoration: none;
}

/* Polls - Results */
#vpoll div {
  margin-bottom: 15px;
}

#vpoll .choiceText, #vpoll .percentText, #vpoll .choiceVotes {
  float: left;
  padding-right: 5px;
}

#vpoll .percentText {
  font-weight: bold;
}

#vpoll div.graph {
  -webkit-border-radius: 3px;
  border-radius: 3px;
  border: 1px solid #333;
  -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.5);
  box-shadow: 1px 1px 2px rgba(0,0,0,.5);
  clear: left;
  height: 25px;
  margin: 3px 0 0;
  overflow: hidden;
}

#vpoll div.graph span {
  background: #808080; /* Old browsers */
  background: -moz-linear-gradient(top,  #999999 0%, #676767 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#999999), color-stop(100%,#676767)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #999999 0%,#676767 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #999999 0%,#676767 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #999999 0%,#676767 100%); /* IE10+ */
  background: linear-gradient(to bottom,  #999999 0%,#676767 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#999999', endColorstr='#676767',GradientType=0 ); /* IE6-8 */
  display: block;
  height: 25px;
  overflow: hidden;
}

#pollTotalVotes {
  margin-bottom: 15px;
}

#pollThanks {
  border-top: 1px solid #333;
  font-weight: bold;
  padding-top: 7px;
}

/* `FOOTER
------------------------------------------------------------------------------- */
#ft {
  background: #595959 url(/vimages/m2/carbonFiber_gray.jpg);
  -webkit-box-shadow: inset 0 5px 8px rgba(0,0,0,.3);
  box-shadow: inset 0 5px 8px rgba(0,0,0,.3);
  border-top: 5px solid #666;
  color: #fff;
}

#ft a:link, #ft a:visited, #ft a:hover {
  color: #fff;
  text-decoration: underline;
}

/* School Address */
#schoolAddress {
  font-weight: bold;
  margin-top: 15px;
  text-align: center;
}

#schoolAddress .addressLine {
  font-size: 17px;
  font-size: 1.7rem;
}

#schoolAddress span {
  border-right: 1px solid #fff;
  padding: 0 15px;
  white-space: nowrap;
}

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

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

/* Copyright & SOCS Links */
#copyRight {
/* With address - uses the two rules below
  border-top: 1px solid #fff;
  padding-top: 7px;
*/
/* Without address - begin */
  margin: 15px 0;
/* Without address - end */
  text-align: center;
}

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

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

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

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

/* vList Signup */
#vlist {
  margin: 15px 0;
}

#vlist form {
  margin: 0;
}

#vlist p {
  margin: 0 0 5px;
}

#vlist label {
  color: #fff;
}

#vlist #email {
  display: inline;
  width: 80%;
}

#vlist input[type="image"] {
  margin-top: -2px;
  vertical-align: middle;
}

#vlist ul {
  margin: 0;
  padding: 0;
  text-transform: lowercase;
}

#vlist li {
  float: left;
  list-style: none;
  margin-bottom: .5em;
}

#vlist li a {
  display: block;
  margin: 0 15px 0 0;
  padding: 0 7px;
}

#vlist li a:hover {
  -webkit-border-radius: 3px;
          border-radius: 3px;
  background-color: #3b3b3b;
  color: #ddd;
  text-decoration: none;
}

/* "Default" template = Bootstrap, overrides */
.vlist h4 {
  color: #fff;
  font-size: 18px;
  margin-bottom: .5em;
}

/* Translation */
#google_translate_element {
  border-top: 1px solid #fff;
  border-color: inherit;
  margin: 1em 0;
  padding-top: 1em;
  text-align: center;
}
#google_translate_element a {
  color: #000 !important;
}

/* Google Translate "Original text" contrast error fix */
#goog-gt-tt .title.gray {
  color: #000; /* Google's value? #999 on white background */
}

/* 2023-03-09 Latest "fix" for Google's accessibility contrast error for the "Original text" element */
body [id^="goog-gt"] h1[class] {
  color: #666;
}

/* Without address - begin */
/* Bottom Banner */
#bottomBanner > div {
  border-top: 1px solid #fff;
  padding-top: 1em;
}
/* Without address - end */

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

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

/* 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;
}
/* Accessibility Contrast Errors Fix */
.visuallyhidden a {
  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;
}

/* Forms - Generic */
fieldset {
  border: 1px solid #333;
  margin: 1.5em 0;
  padding: .75em;
}

fieldset legend {
  background: transparent;
}

.formItems {
  clear: left;
  margin: .75em 0;
}

.formItems label {
  color: #222;
  display: block;
  float: left;
  text-align: right;
  width: 33%;
}

.formItems span, div.formItems div {
  display: block;
  margin-left: 34%;
}

div.formItems div label {
  display: inline;
  float: none;
  text-align: left;
  width: auto;
}

.formButtons {
  clear: left;
  text-align: center;
}

.errors {
  color: #900;
}

/* `PRINT STYLES
------------------------------------------------------------------------------- */
/* Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/ Credit to Paul Irish and HTML5 Boilerplate (html5boilerplate.com) */
@media print {
  /* Foundation reset - don't print hrefs for anchor tags */
  a[href]:after { content: ""; }

  /* Icon fonts won't print, so no need to make room for them */
  body #ch h2 {
    padding-left: 0;
  }

  /* Hide the left and right columns */
  nav[role='navigation'],
  section[role='complementary'] {
    display: none !important;
  }

  /* Force the "main" content column to 100% and reset the left positioning to zero */
  section[role='main'] {
    left: 0;
    width: 100% !important;
  }
}

/* `MEDIA QUERIES
------------------------------------------------------------------------------- */
@media only screen and (min-width: 768px) {

  /* Faux left column */
  .show-menu #bd > .row:before {
    width: 25%;
  }

  /* Faux right column */
  .show-sidebar #bd > .row:after {
    left: 75%;
    width: 25%;
  }

  .show-menu nav[role='navigation'] {
    width: 25% !important;
  }

  .show-menu section[role='main'] {
    width: 75% !important;
  }

  .show-sidebar section[role='complementary'] {
    width: 25% !important;
  }

  .show-sidebar section[role='main'] {
    margin-left: 0;
    width: 75% !important;
  }

  .show-menu.show-sidebar section[role='main'] {
    width: 50% !important;
  }
}

@media only screen and (max-width: 767px) {

/* Header --------------------------------------------------------------------- */
  #hd {
    border-bottom: 2px solid /*Header Bottom Border*/ #a50000;
  }

  #logo {
    font-size: 27px;
    font-size: 2.7rem;
  }

/* Footer --------------------------------------------------------------------- */
  #ft {
    border-top: 2px solid #666;
  }

  /* School Address */
  #schoolAddress .addressLine {
    font-size: 14px;
    font-size: 1.4rem;
  }

  /* vList Signup */
  #vlist {
    border-top: 1px solid #fff;
    margin-top: 0;
    padding-top: 7px;
  }

  #vlist li a {
    -webkit-border-radius: 3px;
            border-radius: 3px;
    -webkit-box-shadow: inset 0 20px 20px rgba(255,255,255,.1);
    box-shadow: inset 0 20px 20px rgba(255,255,255,.1);
    border: 1px solid #111;
    background-color: #373737;
    padding: 10px 15px;
  }

  #vlist li a:link, #vlist li a:visited {
    color: #fff;
    text-decoration: none;
  }

  #vlist li a:hover {
    -webkit-border-radius: 3px;
            border-radius: 3px;
    border: 1px solid #000;
    background-color: #222;
    color: #ddd;
  }

}

/* SOCS Mobile "Home" Page */
.socs-mobile-page a:link, .socs-mobile-page a:visited {
  text-decoration: none;
}

.socs-mobile-page a:hover, .socs-mobile-page a:active, .socs-mobile-page a:focus {
  text-decoration: underline;
}

.socs-mobile-page > ul {
  font-weight: bold;
  list-style: none;
  margin: 0;
  padding: 0;
}

.socs-mobile-page > ul > li {
  font-size: 27px;
  height: 32px;
  line-height: 32px;
  margin-bottom: 14px;
}

.socs-mobile-page > ul > li img {
  height: 32px;
  vertical-align: bottom;
  width: 32px;
}

.socs-mobile-page > ul > li > a > i,
.socs-mobile-page > ul > li > a > img,
.socs-mobile-page > ul > li > img {
  margin-right: .25em;
}

/* Table-based design */
.socs-mobile-page table {
  border: none;
  width: 100%;
}

.socs-mobile-page table tbody tr:nth-child(even) {
  background: #fff;
}

.socs-mobile-page td {
  font-size: 27px;
  font-weight: bold;
  line-height: 32px;
}

.socs-mobile-page .smp-icon {
  padding: 0 0 0 5px;
  text-align: center;
  vertical-align: middle;
}

.socs-mobile-page .smp-icon img {
  height: 32px;
  vertical-align: middle;
  width: 32px;
}

/* SOCS Mobile "Locations" Page ----------------------------------------------- */
.socs-mobile-locations ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.socs-mobile-locations > ul > li {
background: #f7f7f7; /* Old browsers */
background: -moz-linear-gradient(top,  #f7f7f7 0%, #e6e6e6 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7f7f7), color-stop(100%,#e6e6e6)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #f7f7f7 0%,#e6e6e6 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #f7f7f7 0%,#e6e6e6 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #f7f7f7 0%,#e6e6e6 100%); /* IE10+ */
background: linear-gradient(to bottom,  #f7f7f7 0%,#e6e6e6 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#e6e6e6',GradientType=0 ); /* IE6-9 */

  border-bottom: 1px solid #d5d5d5;
}

.socs-mobile-locations ul > li > a {
  display: block;
  padding: 10px;
  text-decoration: none;
  -webkit-transition: .3s all ease;
     -moz-transition: .3s all ease;
       -o-transition: .3s all ease;
      -ms-transition: .3s all ease;
          transition: .3s all ease;
}

.socs-mobile-locations ul > li > a:hover {
  background-color: #e6e6e6;
  padding-left: 15px;
}

.socs-mobile-locations ul h4 {
  cursor: pointer;
  font-size: 16px;
  margin: 0;
  padding: 10px;
}

.socs-mobile-locations ul ul > li {
  border-top: 1px solid #d5d5d5;
}

/* Form in "Edit in Place" content has a bottom margin that is pushing everything down - this should probably be in EVERY template's CSS */
#eipWrap form {
  margin: 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;
}


/* vnotifier m2 tweaks */

.notifierList table {
  background: none;
}

/* end vnotifier */
/* App Store Links ------------------------------------------------------------ */
.app-store {
  margin: 0 auto;
  padding-top: 1em;
  max-width: 450px;
  text-align: center;
}

.app-store .app-store-heading {
  color: #fff;
  margin: 0 0 0.5em;
}

.app-store .app-store-text {
  line-height: 1.4;
  margin-bottom: 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;
}