/* Mobile CSS
 
 These styles will kick in below 768 pixel width screens.
 They basically remove the full width wrapper and make
 everything stack freely vertically instead.
 
 This is essentially a set of corrections added onto a fixed-width
 grid-based site to modify it's behaviour on small devices. From 768 px
 width upwards, scaling the full size site down is useable.
 
 */
@media only screen and (max-width: 930px) {

   html {
      --main-side-gutter: 25px;
   }
   
   body {
      font-size: 17px;
      background-size: 1024px;
   }
   
 
   .mobileonly {
      display: block !important;
   }

   .mobileonly.offscreen,
   .mobileonly.accessibility {
      left: 0;
      position: static;
   }

   .hideonmobile {
      display: none !important;
   }

   #mobiletest {
      float: none !important;
   }

   .container_12 .grid_12 {
      display: block; /* stack blocks instead of side by side now*/
   }
   .container_12 .grid_6 {
      width: auto;
   }


   /* MAIN SITE 
   *
   * Front page */

   #search_results .thumb {
      display: none;
   }

   .white-section,
   .blue-section {
      min-width: 300px;
      clear: both
   }

   .coda-slider .panel {
      background-image: none;
   }

   .coda-slider .panel_3 {
      height: auto;
   }

   .coda-slider-wrapper {
      padding: 0;
   }

   #loading_spinner {
      padding-left: 0;
      text-align: center;
      margin: auto;
   }


   h1#main_h1 {
      background-color: var(--alt-dark-color);
      color: #fff;
   }


   #campaign_area {
      display: none;
   }

   .container_12 {
      width: auto;
   }

   #leftcol {
      display: none;
   }

   #maincol {
      width: auto;
   }

   .panel-container {
      width: 100% !important;
      margin-left: 0 !important;
   }

   .panel-container>.panel {
      width: auto;
      margin-bottom: 20px;
   }

   #coda-slider-1 {
      height: auto;
   }

   .coda-slider .topiclink {
      margin-right: 15px !important
   }

   .topicsection {
      padding-right: 0;
   }
   
   /*
   #topnavigation {
      width: auto;
   }

   #topnavigation ul li {
      padding-left: 0;
      padding-right: 10px;
   }

   #logoholder {
      float: none;
      text-align: left;
      margin-left: 0;
   }


   #topnavigation .navitem h2 {
      font-size: 17px !important;
   }

   #topnavigation .navitem p {
      font-size: 15px;
   }

   #navcontainer {
      margin-left: 0;
      position: static;
   }
*/
   #featuredpanel {
      width: auto !important;
   }

   #aboutcitybox {
      width: auto;
   }

   #learnmorebox,
 {
      display: none;
   }


   /* Topic page */

   #loadingspinnerholder {
      position: fixed;
      top: 50% !important;
      left: 50% !important;
      margin-top: -40px;
      margin-left: -40px;
      z-index: 1002;
      padding: 15px;
      border-radius: 8px;
      background-color: #25C1D2;
   }

   #topicbanner,
   #speechbubble,
   #desc-toggle,
   #topicinstructions,
   p#preview {
      display: none !important;
   }


   .topicinnerbox {
      margin-left: 10px;
      padding: 1em;
   }

   #subtopics,
   .articledescription,
   .siteThumb {
      width: auto !important;
      float: unset; /* This allows us to keep the grid_6 class for ease of transition of layout and just fix the issues we have on mobile by unsetting the problematic bits now */
   }

   #siteinfo {
      position: absolute;
      left: 0;
      top: 20px;
      z-index: 1002;
      width: auto;
      border-radius: 5px;
      background-color: #d9e0e3; /* no-alpha colour for better clarity */
   }

   div.articleitem,
   .topicsection h3 {
      margin-bottom: 20px;
   }


   .showoverlayonmobile {
      display: block !important;
   }

   .siteThumb {
      float: none;
      padding:0;
      margin: 0;
   }

   #preview {
      right: 0;
      left: 160px;
   }

   .closebutton {
      width: 40px;
      height: 40px;
      top: -20px;
      right: 10px;
   }

   #siteinfo .closebutton {
      position: absolute;
      /* the directory uses an image for this not CSS. Needs switching.*/

   }

   /*
   .articledescription {}
*/
   .articleitem a.highlightedItem {
      color: #388ab1;
      background-color: #fff;
   }

   #carousel-container {
      /* width: 100% !important;
      margin-left:0; */
      clear: both;
   }


   /* CITY HUB  
   
   Front city hub page*/

   #elibrarycontents td {
      padding-right: 10px;
      padding-bottom: 10px;
      vertical-align: top;
      line-height: 3;
   }

   /* extra spacing for fat fingers
   .newsblock ul.bulletblock li {
      padding-top: 4px;
      padding-bottom: 10px;
   }*/

   .newsblock .bulletblock li {
      min-width: 300px
   }



   #blognext {
      display: none;
   }

   .hubbox {
      margin-bottom: 30px !important;
      border-bottom: 0;
   }

   div.newstitle {
      padding-top: 10px;
      padding-bottom: 10px; 
      margin-bottom: 10px;
   }

   .newsbody2 {
      background-color: #f6ffd5;
      padding-top: 20px;
   }

   .newsitem.featuredStory {
      height: auto;
   }

   .newsitem.featuredStory>a {
      display: inline;
   }

   .widehrule {
      border-bottom: 0;
   }

   .calpage-end {
      border-bottom: 1px dotted #dddddd;
   }

   #cal-firstcol-container {
      margin-bottom: 0 !important;
   }

   #calendarnav {
      width: 95% !important;
   }

   .zrssfeed .rssBody ul {
      height: auto;
   }

   #etexts-container {
      margin-top: 150px;
   }

   #bookcarousel {
      width: 100% !important;
   }

   #bookcarousel iframe {
      width: 100% !important;
      height: 200px !important;
   }

   /*
   .database-blurb {}
*/
   #usefullinks_wrapper {
      min-height: 0px;
   }

   #etexts-container {
      margin-top: 300px;
   }

   .clear_on_mobile {
      clear: both;
   }
   
   .opportunities_sorter .controlblock h3 {
      display: block;
   }

   /* Ejournals etc */

   /*
   #Filters {
      padding: 0;
      background-color: var(--alt-dark-color);
   }*/

   .journal_box {
      width: 95% !important;
      height: auto !important;
      margin-bottom: 20px;
   }

   #journals_content_wrapper {
      margin-left: 10px;
      margin-right: 10px;
   }
   /*
   .controls {
      background-color: #222C3B;
   }*/

   .controls table td {
      display: block;
   }

   .newsitem.featuredStory a.storylink:hover .newsinner:before,
   .featuredEvent a.storylink:hover .eventPromoText:before {
      display: none;
   }


   .databases_page .database_modal_grid {
      display: block;
      margin-right: 0;
   }

   .database_modal_grid .right_cell {
      text-align: center;
      padding-top: 0.3em;
      height: 100px;
      margin-bottom: 1em;
   }

   .database_modal_grid .left_cell {
      text-align: left;

   }

   .database_modal_grid .right_cell img {
      height: 100px;
      width: 100px;
   }

   .remodal {
      max-width: 90%;
   }

   
   .simple-animated-modal__wrapper {
     background-size: cover;
     padding: 0.5rem;
   } 
   
   .simple-animated-modal-close {
     margin-right: 0.7rem;
   }
  
  .simple-animated-modal #modal-title {
    margin-top: 0.7rem;
  }
   
   

   /* Events calendar */

   .featuredList .featuredItem {
      width: 100%;
      height: 250px;
      background-size: cover;
      color: #fff;
      float: none;
   }
   
   .eventsGrid {
      gap: 0;
   }
/*
   .newstitle {
      display: flex;
   } */
   
   .featuredItem button.caldate {
      flex: 0 0 4.5rem;
   }
   
   button.caldate {
      height: min-content;
   }

   .featuredItem button.caldate, .opportunity_non_featured button.caldate {

	}

   
}


/* Special case for bad link page */
@media only screen and (max-width: 780px) {
   #reportbox {
      display: block;
   }
}



/* Extra events calendar stuff for narrow browsers */



@media only screen and (max-width: 500px) {
   
   html {
      --main-side-gutter: 15px;
   }
   
	 .featuredItem .caltitleindent {
	font-size: 130%; /* take this down from 150 for smaller screens */
	}
	
	 .featuredItem button.caldate, .opportunity_non_featured button.caldate {

  /*    flex: 1 0 3.5rem;*/
	}
	
	 button.caldate {
	/*&	margin: 0 15px 0 0 ;*/
	}
	
	h2 { 
      font-size: 130%;
   }
   
   h2#slogan br {
      display: none; /* turn off our preferred line breaks */
   }
   
   .container_12 {   
      padding-left: 5px;
      padding-right: 5px;
   }
   
   .hubbox {
      padding: 20px 10px 20px 10px ;
   }
   
   .ejournal_details {
      padding: 0;
   }
   
   .ejournal_details td, .ejournal_details th {
      padding: 0 1em 1em 0;
   }
   
    #mixitup .mix {
      width: 100%;
      margin: 0 0 15px 0;
      height: auto;
      min-height: 150px;
   }
   
   /* #intro_area #sitelogo {
      width: 100%;
      max-width: 400px;
   }*/
   

}




/* Large desktop = bigger font */
@media (min-width: 1400px) {
   
   body {
      font-size: 21px !important;
   }
}