/* Updated 11-12-2024 6:00pm: -D. Freeman
Latest updates added tooltips */
html {
   height: 100%;
}
div#announcement { 
   position: relative; 
   top: 0; 
   left: 5px; 
   background-color: #ffffff; 
   margin-left: 160px; /* Same as the width of the sidenav */
   padding: 3px;
   width:fit-content;
   height:fit-content;
   color: #990000;
   text-align: center;
   z-index: 2;
}
body {
   margin: 0;
   padding: 0;
}
.sidebar {
   height: 100%;
   min-height: 600px;
   width: 160px;
   position: fixed; /* Stay in place */
   z-index: 1; /* Stay on top */
   top: 0;
   left: 0;
   background-color: #111;
   overflow-x: hidden; /* Disable horizontal scroll */
   padding-top: 60px; /* Place content 60px from the top */
   margin: 0;
   text-align: center;
}
.sidebar a {
   padding: 6px 8px 6px 16px;
   font-family: Arial;
   text-decoration: none;
   font-size: 14px;
   color: #aaaaaa;
   display: block;
}
.sidebar div{
  position: absolute;
  bottom: 0;
  color:#888888;
  padding: 10px;
  font-size: 10px;
  margin-bottom: 55px;
  text-align: center;
}
.sidebar div a{
  font-size: 10px;
}
/*show current page link in brighter color*/
#sidebarmain #homelink{
  color:#eeeeee;
}
#sidebarabout #aboutlink{
  color:#eeeeee;
}
#sidebarfootprint #footprintlink{
  color:#eeeeee;
}
#sidebarmemberinfo #membershplink{
  color:#eeeeee;
}
#sidebarroy #roylink{
  color:#eeeeee;
}
#sidebarpublicmedia #publicmedialink{
  color:#eeeeee;
}
#siderbarmembers #memberslink{
  color:#eeeeee;
}
#sidebarlinks #linkslink{
  color:#eeeeee;
}
#sidebartrailratings #trailratingslink{
  color:#eeeeee;
}
#sidebartodayshikes #todayhikelink{
  color:#eeeeee;
}

.sidebar a:hover {
  color: #f1f1f1;
}
.entrymain {
  margin: 0;
  margin-left: 160px; /* Same as the width of the sidenav */
  padding: 0;
  font-family: Arial;
  background-image: url(../images/hikingpath2.jpeg);
  background-size: cover;
  background-clip: border-box;
  background-attachment: fixed;
  text-align: center;
  color: #ffffff;
  min-height: 100vh;
}
.entrymain h1{
  font-size: 45px;
  width: 100%;
  margin: 0;
  padding-top: 15%;
}
.entrymain h3{
  padding-bottom: 15%;
}
.entrymain span{
  padding-left: 2%;
  padding-right: 2%;
  padding-bottom: 20%;
}
.main {
  margin: 0;
  margin-left: 160px; /* Same as the width of the sidenav */
  padding: 0;
  min-height: 100%;
  font-family: Arial;
  background-image: url(../images/hikingpath2.jpeg);
  background-size: cover;
  text-align: center;
  color: #0000;
  width: auto;
  height:fit-content;
}
.maindetail {
  margin-top: 0;
  margin-left: auto;
  margin-right: auto;
  padding: 10px 10px;
  background-size: auto 100%;
  background-color: #ffffff;
  color:#000000;
  width: auto;
  height:fit-content;
  text-align: left;
}
.maindetail img{
  max-width: 100%;
  height: auto;
}
.maindetail h2{
  padding-top: 20px;
  padding-left: 20px;
}
.maindetail p{
  padding-left: 40px;
  padding-right: 40px;
}
.subtitle{
  padding: 10px 25px;
}
.linksmain {
  margin: 0;
  margin-left: 160px; /* Same as the width of the sidenav */
  padding: 0;
  min-height: 100%;
  font-family: Arial;
  background-image: url(../images/hikingpath2.jpeg);
  background-size: cover;
  text-align: center;
  color: #0000;
  width: 80%;
  height: 100%;
 }
 .linksdetail {
  margin-top: 0;
  margin-left: auto;
  margin-right: auto;
  padding: 15px 45px;
  background-size: auto 100%;
  background-color: #ffffff;
  color:#000000;
  width: fit-content;
  height:100%;
  text-align: left;
}
#about_image_container{
  width: auto;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  padding: 5px;
}
#about_image_container img{
  width: 20%;
  object-fit: contain;	
}
/* clears float so that elements below will be below */
.clearfix {
  overflow: auto;
  zoom: 1;
}
.clearfix:before, .clearfix:after {
   content: " "; display: table; 
}
.clearfix:after {
   clear: both; 
}
.media_container {
  display: grid;
  width: 90%;
  margin: auto;
  /*border: solid black 1px;*/
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 10px;
  padding: 10px;
}
.media_item .caption{
  font-size: 12px;
  font-weight: bold;
}
 
 .media_item video{
  display: flex;
  height: auto;
}

.media_item img {
  position: relative;
  top: 0;
  left: 0;
  width: 80%;
  height: auto;
  object-fit: cover;
  object-position: center;
  min-width: 300px;
}
  /*pagination for pictures*/
.pagination {
   display: block;
   margin-left: 160px; /* Same as the width of the sidenav */
   margin-top: 10px;
   margin-bottom: 50px;
   margin-right: auto;
   width: auto;
   text-align: center;
   cursor: pointer;
 }
 .pagination a {
   color: black;
   padding: 5px 10px;
   font-size: 16px;
   text-decoration: none;
   transition: background-color .3s;
   border: 1px solid #ddd;
 }
 .pagination a.active {
   background-color: #4CAF50;
   color: white;
   border: 1px solid #4CAF50;
 }
 .pagination a:hover:not(.active) {background-color: #ddd;}
 /* for media */

.media-viewer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Adjust minmax as needed */
  gap: 16px; /* Space between items */
}
.media-viewer-item {
  display: flex;
  flex-direction: column; /* Stack image and caption vertically */
  align-items: center; /* Center items */
  text-align: center; /* Center text */
  background-color: transparent; /* Remove or set to match page background */
  padding: 8px; /* Optional: add some padding */
  border-radius: 4px; /* Optional: add rounded corners */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Optional: add a subtle shadow */
}

.media-viewer-content {
  width: 100%;
  height: auto;
  max-height: 200px; /* Set a max height */
  object-fit: cover; /* Ensures the image covers the area */
}

.media-viewer-caption {
  margin-top: 8px; /* Space between image and caption */
  font-size: 14px; /* Adjust font size as needed */
  line-height: 1.2; /* Improve readability */
  max-height: 50px; /* Optional: limit caption height */
  overflow: hidden; /* Hide overflow if caption is too long */
  text-overflow: ellipsis; /* Add ellipsis for overflow text */
  white-space: nowrap; /* Prevent wrapping */
}
/* For formatting output in a table  */
#table {
  display:table;
  margin-left: 40px;
  margin-right: 40px;
}
.row {
  display:table-row; 
  margin: 2px;
}
.rowheader {
  display:table-row; 
  width: 80%;
  padding: 2px;
  
}
.rowheader .cell{
  display:table-cell;
  font-size: small;
  padding: 2px;
  border-style: solid;
  border-width: 1px;
  background-color: hsl(0, 1%, 74%);
  font-weight:bold;
}
.cell{
  display:table-cell;
  font-size: small;
  font-weight: normal;
  padding: 2px;
  padding-left: 4px;
  margin: 1px;
  border-style: solid;
  border-width: 1px;
}
.cell input{
  width:fit-content;
  margin:0;
  padding: 1px;
}
.cell button{
  margin: 0;
  padding: 1px;
  background-color: #04AA6D;
  color: white;
  border: none;
  cursor: pointer;
  width: 100%;
}
/* dropdown menus */
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 3px 4px;
  margin: 0;
  text-align: left;
  z-index: 1;
}

.dropdown:hover .dropdown-content {
  display: block;
}
/* progress bar related */
.spinner {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 50px;
  height: 50px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
  display: none;
}
/*
.spinner{
position: fixed;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
       z-index: 1000;
}
*/
#customModal {
  opacity: 0;
  transition: opacity 0.3s ease;
}

#customModal.show {
  opacity: 1;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/*tooltip related*/
a[title] {
  position: relative;
}

a[title]:after {
  content: attr(title);
  display: inline-block;
  padding: 0.2em 0.6em; 
  white-space: nowrap; 
  background-color: rgb(4, 106, 4) !important;
  color: #fff;
  font-style: normal;
  font-family: sans-serif;
  font-size: 0.8em;
  position: absolute;
  top: -5px;
  left: 105%; /*places tooltip to the right of the link*/

  z-index: 1;
}
.tooltipleft, .tooltipright, .tooltiptop, .tooltipbottom {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltipleft .tooltiptext, .tooltipright .tooltiptext, .tooltiptop .tooltiptext, .tooltipbottom .tooltiptext {
  position: absolute;
  z-index: 1;
  visibility: hidden;
  width: 120px;
  background-color: rgb(4, 106, 4) !important;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 5px;
}
.tooltipleft{
  /* Position the tooltip left*/
  top: -5px;
  right: 105%;
}
.tooltipright{
  /* Position the tooltip right*/
  top: -5px;
  left: 105%;
}
.tooltiptop{
  bottom: 100%;
  left: 50%;
  margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}
.tooltipbottom{
  top: 100%;
  left: 50%;
  margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}

.tooltipleft:hover .tooltiptext, .tooltipright:hover .tooltiptext, .tooltiptop:hover .tooltiptext, .tooltipbottom:hover {
  visibility: visible;
}

  /* On smaller screens, where height is less than 435px, change the style of the sidenav (put nav below main context and center text) */
  @media screen and (max-width: 435px) {
    .sidebar {
      position: relative;
      z-index: 0;
      top: 0;
      left: 0;
      width: 100%;
      padding-top: 45px;
      min-height: 100vh;
    }
   .sidebar a {
     font-size: 14px;
     text-align: center;
   }
   .sidebar div{
    position: relative;
    text-align: center;
   }
   .maindetail {
     width: fit-content;
     /*padding: 12px 45px 12px 10px;*/
   }
   .main, .entrymain {
     width: 100%;
     margin-left: 0;
     min-height: fit-content;
   }
   .mcontent_container iframe{
    position: absolute; 
    top: 0; 
    left: 0;
    width: 100%;
    height: 100%;
   }
   .mcontent_container{
    min-width: 100%;
   }
   .img_container{
    min-width: 100%;
   }
   .pagination{
     width: 100%;
     padding: 0;
     margin-left: 0;
     margin-right: 0;
   }
   .pagination a {
     padding: 4px 8px;
     font-size: 16px;
   }
   div#announcement{
     left:0;
     margin-left: 0;
     padding: 10px;
   } 
  }