/* media queries! */

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

 html {
  -webkit-text-size-adjust: none; /* Prevent font scaling in landscape */
 }

 .grid-col-50 {
  float: none;
 }

 body {
  min-width: 320px;
  background: #f5f5ff;
 }
 #wrapper, body.inside #wrapper { background: none; }
 #header {
  height: 50px;
  width: 100%;
  background: url( '../img/phone/header-bg.png' ) repeat-x !important;
  border-bottom: 1px solid #001362 !important;
  position: relative;
 }
 #logo a {
  width: 135px;
  height: 31px;
  background: url( '../img/phone/logo.png' ) repeat-x;
  top: 10px;
  left: 10px;
 }
 #search, .nav-wrapper, #sm-icons, .nav-text-size {
  display: none;
 }
 .nav-wrapper, #nav {
  background: none;
  width: auto;
  margin: 0px;
  height: auto;
  padding: 0px;
 }
 #inside-header, .home-header {
  width: auto;
 }
 #nav {
  background: url('../img/phone/sub-nav-bg.png') repeat-x #062490;
 }
 #nav li {
  float: none;
  display: block;
  border-bottom: 1px solid #203ca6;
  height: auto;
 }
 #nav li a {
  float: none;
  padding: 0px;
  background: none;
 }
 #nav li.has-sub:hover, #nav li.has-sub:hover > a {
  background: none;
  padding: 0px;
  margin: 0px !important;
  border: 0px;
 }
 #nav li.has-sub:hover {
  border-bottom: 1px solid #203ca6;
 }
 #nav li.has-sub > a span {
  background: url( '../img/phone/sub-menu-item.png' ) no-repeat 100% 73%;
 }
 #nav li.has-sub:hover > a span {
  background: url( '../img/phone/sub-menu-item.png' ) no-repeat 100% 73%;
  margin: 0px;
  color: yellow;
  text-shadow: 2px 2px 2px #030262;
  line-height: 38px;
 }
 #nav li.has-sub.active > a span {
  background: url( '../img/phone/sub-menu-item-up.png' ) no-repeat 100% 73%;
 }
 #nav li.has-sub.active {
  border-bottom: 0px none;
 }
 ul#nav li .sub-nav {
  float: none;
  display: none;
  position: static;
  width: auto;
  background: none;
  border: 0px;
  padding: 0px;
  margin: 0px;
  box-shadow: none;
  border-top: 1px solid #203ca6;
 }
 ul#nav li .sub-nav li {
  border-bottom: 0px;
 }
 ul#nav li .sub-nav li a {
  padding: 0px 16px !important;
  border-left: 4px solid #203ca6;
  border-bottom: 1px solid #203ca6;
  color: #fff;
 }
 ul#nav li .sub-nav li a:hover {
  color: #f4e11b;
 }
 ul#nav li:hover .sub-nav {
  display: none;
 }
 ul#nav li .sub-nav.about,
 ul#nav .sub-nav.about .about-nav,
 ul#nav .sub-nav.about .about-nav li,
 ul#nav .sub-nav .departments-nav,
 ul#nav .sub-nav .departments-nav li {
  width: auto;
 }
 .sub-nav.about .departments-nav h4 {
  color: #7476FC;
  padding: 5px 19px !important;
  border-bottom: 1px solid #5B5BC9;
 }
 ul#nav .sub-nav.about .about-nav, .sub-nav.about .departments-nav {
  float: none;
 }
 #nav-mobile-menu, #nav-mobile-search, #staff-login-button {
  display: block;
  position: absolute;
  top: 0px;
  padding: 0px;
  border: 0px none;
  margin: 0px;
  border-radius: 0px;
  border-left: 1px solid #0931ba;
  height: 50px;
  background: none;
  box-shadow: none;
  cursor: pointer;
  width: 50px;
  height: 50px;
 }
 #nav-mobile-menu:before, #nav-mobile-search:before, #staff-login-button:before {
  content: "";
  display: block;
  position: absolute;
  left: -2px;
  min-height: 100%;
  z-index: 10;
  border-left: 1px solid #001362;
 }
 #nav-mobile-menu span, #nav-mobile-search span, #staff-login-button span {
  display: none;
 }
 #nav-mobile-menu.active {
  background-color: #001362;
  border-left: 1px solid #203ca6;
 }
 #nav-mobile-menu:hover, #nav-mobile-search:hover, #staff-login-button:hover {
  background-color: #001362;
  border-left: 1px solid #203ca6;
 }
 #nav-mobile-menu {
  right: 100px;
  background: url('../img/phone/nav-mobile-menu.png') no-repeat 48% 50%;
  display: inline-block;
  height: 50px;
 }
 #nav-mobile-search {
  right: 0px;
  background: url('../img/phone/nav-mobile-search.png') no-repeat 50% 50%;
  display: inline-block;
  height: 50px;
 }
 #nav-mobile-search.active {
  background-color: #001362;
  border-left: 1px solid #203ca6;
 }
 #staff-login-button {
  right: 50px;
  background: url('../img/phone/nav-mobile-staff.png') no-repeat 50% 50%;
  display: inline-block;
  text-indent: -999px;
 }



 #main, #footbar, #footbar-nav, #home-events, #home-news, #slideshow-rapper, #slideshow, .emergency-post-wrapper {
  width: auto;
 }

 #home-header {
  overflow: hidden;
 }

 #search {
  z-index: 2001;
  position: absolute;
  top: 51px;
  left: 0px;
  width: 100%;
  height: 55px;
  background: url( '../img/phone/thumber-bg.png') repeat-x;
  box-shadow: 0px 2px 4px rgba(0,0,0,0.3);
 }
 #search form {
  background: #fff;
  display: block;
  padding: 0px;
  margin: 10px;
  border-radius: 6px;
 }
 #search .box {
  padding: 7px;
  width: 90%;
 }
 #search .submit-search {
  right: 17px;
  top: 19px;
  background: url('../img/phone/search-button.png') no-repeat;
 }

 /* home */
 .emergency-msg {
  word-wrap: break-word;
  width: auto;
  background: none;
 }
 .emergency-msg h1, .emergency-msg p, .emergency-msg p.emergency-date-posted {
  padding: 0;
 }
 #home-events, #home-news {
  float: none;
  margin: 0px;
  padding: 20px;
  clear: left;
 }
 #home-quick-links {
  display: none;
 }
 .home-header-wrapper, #slideshow-rapper {
  background: none;
  padding-top: 0px;
 }
 #slideshow-rapper {
  margin-left: 0px;
 }
 #slideshow, #slideshow li, #slideshow li a, #slideshow li a img {
  display: block;
  width: 100%;
 }

 #slideshow, #slideshow-rapper, .home-header-wrapper {
  height: auto;
 }
 #slideshow-rapper {
  padding-bottom: 70px;
 }
 #thumber-rapper {
  height: 50px;
  width: 100%;
  top: auto;
  bottom: 0px;
 }
 #slideshow-thumbs-rapper {
  height: 50px;
  width: 100%;
  top: auto;
  bottom: 0px;
  background: url( '../img/phone/thumber-bg.png') repeat-x;
  padding: 10px 0px;
  overflow: auto;
 }
 #slideshow-thumbs li {
  float: left;
  display: block;
  width: 55px;
  height: 45px;
  margin: 0px 10px 3px 10px;
 }

 #events li {
  border-bottom: 1px solid #e6e6f3;
 }

 #events li .date {
  float: right;
  width: auto;
  background: none;
  color: #000;
  margin-bottom: 0px;
 }
 #events li .date .day { font: 15pt/10pt Georgia, serif; }
 #events li .date .day,
 #events li .date .month,
 #events li .date .time {
  float: left;
  padding: 0px;
  margin-left: 5px;
  color: #000;
 }
 #events li h4  {
  margin-left: 0px;
  margin-bottom: 0px;
  width: 70%;
 }
 #events li .desc {
  display: none;
 }

 /* insidwe pages */
 .mobile-menu-toggle {
  display: block;
  background: url('../img/phone/side-nav-icon.png') no-repeat left center #fff; 
  height: 40px;
  font-size: 1.1em;
  color: #231f20;
  font-weight: bold;
  line-height: 40px;
  padding-left: 30px;
  margin-left: 20px;
  cursor: pointer;
  z-index: 1000;
  position: relative;
 }
 .mobile-menu-toggle:hover {
  color: #424242;
 }
 #sub-nav {
  float: none;
  margin: 0px;
  padding: 0px;
  width: auto;
 }
 #sub-nav ul {
  display: none;
  margin: 0px;
  padding: 0px;
  width: auto;
  background: #fff;
  position: relative;

 }
 #sub-nav ul li {
  margin: 0px;
  padding: 0px 10px;
 }
 #sub-nav ul li.active a {
  background: none;
  margin: 0px;
  padding: 0px 10px;
  width: auto;
  color: #fff;
 }
 #sub-nav ul li.active > a > span {
  margin: 0px;
  padding: 0px;
  width: auto;
  height: 30px;
  line-height: 30px;
  color: #02037E;
  text-shadow: none;
  background: none;
  border-bottom: 1px solid #E4E4E5;
 }
 #sub-nav ul li a {
  margin: 0px 10px;
 }
 #sub-nav .sub-sub {
  width: auto;
 }
 #sub-nav .sub-sub li.active > a > span {
  width: auto;
  background: none;
 }
 #content.sub-nav {
  margin: 0px;
 }
 #content {
  background: url('../img/main-bg.jpg') no-repeat 50% -4px white;
 }
 #inside-header .breadcrum {
  padding-left: 20px;
  white-space: nowrap;
  width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
 }
 #inside-header h1 {
  white-space: nowrap;
  padding-left: 20px;
  width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
 }
 #inside-header-wrapper {
  background: url( '../img/phone/inside-wrapper.jpg') no-repeat;
 }
 .main-inside, #main {
  margin: 0px;
  background: none;
 }
 #main {
  background: #fff;
 }
 #footbar-nav {
  display: none;
 }
 #footbar .switch-to-mobile {
  display: none;  
 }
 #footbar .switch-to-desktop {
  display: block;  
 }
 /* page specific */

 /* trustee page */
 #content #trustee-list {
  padding: 0px;
 }
 body.trustees #content-wrapper {
  background: none;
 }
 #trustee-list li {
  width: 148px;
 }

 /* contact */
 body.contact #content-wrapper {
  background: none;
 }
 #contact-form {
  float: none;
  width: auto;
 }
 #contact-form .fields {
  padding-top: 10px;
 }
 #contact-form input.text-field, #contact-form textarea.text-field {
  width: 90%;
 }
 #submit-contact {
  margin-top: 20px;
 }
 #contact-sm-icons {
  padding-top: 0px;
  margin-bottom: 20px;
 }
 #contact-sm-icons .facebook {
  width: auto;
  display: block;
  float: none;
 }
 #contact-sm-icons .twitter {
  width: auto;
  display: block;
  float: none;
 }

 /* calendar */

 .dsbn-calendar-wrapper, .dsbn-calendar {
  background: none;
  width: auto;
 }
 .dsbn-calendar td.day {
  width: auto !important;
 }
 td.day ul a {
  background: none;
  padding: 0px;
  font-size: 0.8em;
 }
 td.day ul a .time {
  padding: 0px;
  display: block;
 }
 #inside-header.events-header h1 {
  width: 63%;
  font-size: 2.4em;
  line-height: 42px;
 }

 input.text-field.large, .text-box {
  width: 90%;
 }


 /* special pages top menu */
 #inside-header-wrapper {
  height: auto;
  min-height: 87px;
 }
 #inside-header .nav .ekflexmenu_submenu_items {
  display: none;
 }
 #inside-header .nav {
  position: static;
  display: block;
  padding-top: 100px;
 }
 #inside-header .nav .ekflexmenu_submenu_items {
  width: auto;
 }
 #inside-header .nav .ekflexmenu_submenu_items li {
  width: auto;
  float: none;
  display: block;
 }
 #inside-header .nav .ekflexmenu_submenu_items li a {
  width: auto;
  float: none;
  display: block;
  padding: 0px 20px;
 }
}

@media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {

 #logo a {
  background-image: url( '../img/phone/logo-x2.png' );
  background-size: contain;
 }
 #nav-mobile-menu {
  background-image: url('../img/phone/nav-mobile-menu-x2.png');
  background-size: 27px 23px;
 }
 #nav-mobile-search {
  background-image: url('../img/phone/nav-mobile-search-x2.png');
  background-size: 22px 23px;
 }
 #staff-login-button {
  background-image: url('../img/phone/nav-mobile-staff-x2.png');
  background-size: 34px 23px;
 }


 .mobile-menu-toggle {
  background-image: url('../img/phone/side-nav-icon-x2.png');
  background-size: 21px 17px;
 }
}