/* Updated 8-16-2024 4:15pm: -D. Freeman
   Modified for projects_login.
*/
html {
   height: 100%;
}
body {
   margin: 0;
   padding: 0;
}
.sidebar {
   height: 100%;
   min-height: 365px;
   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;
}
.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;
  padding: 10px;
  color:#888888;
  font-size: 10px;
  margin-left: 0;
  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;
}
#sidebarprojects #projectslink{
  color:#eeeeee;
}
#sidebarpictures #pictlink{
  color:#eeeeee;
}
#sidebarlinks #linkslink{
  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/hurricane_ridge.jpg);
  background-size: cover;
  background-clip: border-box;
  background-attachment: fixed;
  text-align: center;
  color: #111;
  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/hurricane_ridge.jpg);
  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;
}
#loginh2{
  padding-top: 20px;
  padding-left: 0;
}
#imgToggle{
  display: inline; 
  margin-left: 0; 
  vertical-align: middle;
}
.maindetail h2, .maindetail h3{
  padding-top: 20px;
  padding-left: 20px;
}
.maindetail p{
  padding-left: 40px;
  padding-right: 40px;
}
.maindetail form p{
  font-size:smaller;
  margin-bottom: 0;
  padding-bottom: 0;
}
.maindetail form{
  /*padding-left: 40px;
  padding-right: 40px;*/
  margin-left: 40px;
  margin-right: 40px;
}
.maindetail input {
  width: 85%;
  padding: 6px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 10px;
}
.maindetail p.error{
  color: #900;
}
.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;	
}
.versions, .categories{
  margin-left: 40px;
  margin-right: 40px;
}
/* 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; 
}
.img_container{
  float: left; 
  vertical-align: top;
  margin-right: 5px;
  margin-top: 5px;
  width: 30%;
  height: auto;
  min-width: 300px;
}
.img_container img{
  position: relative;
  border-top: 20px;
  width: 100%;
  height: auto;
}
.img_container span, .mmedia_container span, .imedia_container span{
  margin: 0;
  font-family: Arial;
  font-size: small;
  font-weight: bold;
  text-align: left;
  vertical-align: bottom;
}
.mcontent_container{
  position: relative; 
  padding-top: 56%;
}
.mcontent_container iframe{
  position: absolute; 
  top: 0; 
  left: 0;
  width: 100%;
  height: 100%; /* set to 100% not auto for iframe */
}
.mmedia_container video{
  position: absolute; 
  top: 0; 
  left: 0;
  width: 100%;
  height: auto; /* spec says no percent allowed here */
}
.imedia_container, .mmedia_container{
  float: left;
  max-width: 600px; 
  min-width: 300px;
  width: auto;
  height: auto; 
  margin: 5px auto; 
  vertical-align: top;
  margin-right: 5px;
  margin-top: 5px;
}
.imedia_container{
  width: 80%;
}
.mmedia_container{
  width: 40%; 
}
  /*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 forms
 */
 /* Style the submit button */
input[type=submit] {
  background-color: #04AA6D;
  color: white;
}

/* Style the container for inputs */
.container {
  background-color: #f1f1f1;
  padding: 20px;
}

/* The message box is shown when the user clicks on the password field */
#message {
  display:none;
  background: #f1f1f1;
  color: #000;
  position: relative;
  margin-left:4 0px;
  margin-right: 40px;
  padding-left: 8px;
  margin-top: 8px;
  width: 75%;
}

#message2{
  display:none;
  font-size: 14px;
}

#message p, #message2 span {
  padding: 0px 0px;
  font-size: 14px;
}

/* Add a green text color and a checkmark when the requirements are right */
.valid {
  color: green;
}

.valid:before {
  position: relative;
  left: -5px;
  content: "✔";
}

/* Add a red text color and an "x" when the requirements are wrong */
.invalid {
  color: red;
}

.invalid:before {
  position: relative;
  left: -5px;
  content: "✖";
}
  /* 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;
  }
   .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;
   } 
  }