.just_hidden {
   display: none;
}

.subfolderinfo {
   font: bold 0.7em "Calibri";
}

.header {
   margin: 0px;
   padding: 1px;
}

.folderinfo {
}

.folderitem {
   margin: 2px 1px 2px 1px;
   font: 1.5em sans-serif,Arial;
   color: #EfEfEf;
   text-align: center; 
   background: #000080;
}

.copy_button {
  padding-top: 2px;
  padding-bottom: 0px;
  padding-left: 4px;
  padding-right: 4px;
}

.copy_button_group {
   display: inline-block;
   padding-right: 5px;
}

.copy_button_img {
   height: 14px;
}

.lores_image_div {
   display: none;
}

.toc_cgi_comment_wrapper {
   display: none;
}

.slideshow_options {
   display: block;
   border: 1px black solid;
   padding: 2px;
}

.slideshow_options_sub {
   padding: 2px;
}

.subfolderlist {
   margin: 0px;
   padding: 0px;
}

.header_control {
   padding-right: 5px;   
}

.thumbnails {
   clear:both;
   background-color: #FFFFC0;
   padding: 2px;
   display: inline-block; 
}

.thumbnail_td {
   line-height:50%;
}

.imagelist {
   clear:both;
}

.subfolder {
   float:left; 
   max-width: 250px;
   min-width: 100px;
   min-height: 115px;
   border: 1px LightGray solid;
   background-color: #FFFFD0;
   margin: 0px;
   padding:1px;
   overflow: hidden;
}

.image_buttons {
   margin-bottom:5px;
}

.user_comment {
   background-color: #FFFFA0;
   border: 1px LightGray solid;
   padding: 2px;
   margin-bottom:5px;
}

.searchform {
   display:block;
   margin:0px;
}

.searchform span:before {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  content: "";
  opacity: 1 !important;
  margin-top: -25px;
  padding-left: 10px;
  appearance: none;
  background: #fff;
}

/* make a sticky header */
.controls {
   /* needs a background colour - need this to make sticky look good - so that the rest of the web page can disappear behind it*/
   background-color: #FFFFC0;
   border:1px solid;   
   padding: 1px 1px 1px 1px;
   /* makes it sticky when it is at the top - mobile media query changes this to unsticky */
   position: sticky;
   top: 0;
}

/* when jumping to a image anchor, make allowances for the height of the sticky header */
a.image_anchor {
  display: block;
  position: relative;
  top: -60px; /* Adjust this value to match the height of your sticky header - this hardcoded value is about right but javascript retrieves the actual value and modifies the CSS dynamically */
  visibility: hidden; /* Optional: Hide the anchor visually */
}


/* I can't seem to get this to stay relative to the viewport which affects mobile viewing !! Only seems to be a problem in Firefox */
#scroll_top_button {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  top: 20px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: red; /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 8px; /* Some padding */
  border-radius: 8px; /* Rounded corners */
  font-size: 14px; /* Increase font size */
}

#scroll_top_button:hover {
  background-color: #555; /* Add a dark-grey background on hover */
}

/* I can't seem to get this to stay relative to the viewport which affects mobile viewing !! Only seems to be a problem in Firefox */
#scroll_bottom_button {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: red; /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 8px; /* Some padding */
  border-radius: 8px; /* Rounded corners */
  font-size: 14px; /* Increase font size */
}

#scroll_bottom_button:hover {
  background-color: #555; /* Add a dark-grey background on hover */
}


/* Custom CSS for small screens */
@media screen and (max-width: 700px) {

   /* element that gets set to display none when on a small device */ 
   #mobile-detection { display: none; }
   
   /* same as normal .controls but without sticky */
   .controls {
      /* needs a background colour - need this to make sticky look good - so that the rest of the web page can disappear behind it*/
      background-color: #FFFFC0;
      border:1px solid;   
      padding: 1px 1px 1px 1px;
      /* undoes the sticky by setting attribute default value*/
      position: static;
      top: auto;
   }
   
   a.image_anchor {
     display: block;
     position: relative;
     top: 0px; /* Adjust this value to match the height of your sticky header */
     visibility: hidden; /* Optional: Hide the anchor visually */
   }
   

   .slideshowlink a {
      font-size:18px;
   }

   .searchform {
      display: block;
      margin: 0px;
      padding: 0px;
   }
   
   /* Add this rule if your checkbox text labels need to stay perfectly aligned vertically */
   .searchform label, 
   .searchform span {
      display: inline-block;
      vertical-align: middle;
      margin-bottom: 5px; 
   }
   
   /* TARGET THE SPACE RIGHT UNDER THE TEXT BOX / SEARCH BUTTON */
   .searchform input.form-textbox,
   .searchform .fsSubmitButton,
   .searchform button {
      margin-bottom: 10px !important; /* Forces a 25px gap directly after the search controls */
   }
      
   .searchform span:before {
     display: inline-block;
     font: normal normal normal 14px/1 FontAwesome;
     font-size: inherit;
     text-rendering: auto;
     -webkit-font-smoothing: antialiased;
     content: "";
     opacity: 1 !important;
     margin-top: -25px;
     padding-left: 10px;
     appearance: auto;
     -moz-appearance: auto;
     -webkit-appearance: auto;
     background: #fff;
   }

   /* 1. Reset and style the base checkbox container */
   .searchform input[type="checkbox"] {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      
      display: inline-block;
      vertical-align: middle;
      position: relative;
      height: 22px;
      width: 22px;
      background-color: #ffffff;
      border: 2px solid #888888;
      border-radius: 4px;
      cursor: pointer;
      margin: 0 0px 8px 0; /* Vertical spacing between wrapped lines */
      padding: 0;
      box-sizing: border-box;
      transition: background-color 0.1s, border-color 0.1s;
   }
   
   /* 2. Style change when checked (clean modern background) */
   .searchform input[type="checkbox"]:checked {
     background-color: #0075ff; /* System standard choice blue */
     border-color: #0075ff;
   }
   
   /* 3. Pure CSS checkmark: Perfectly centered vector lines on ALL mobile screens */
   .searchform input[type="checkbox"]:checked::after {
     content: '';
     position: absolute;
     
     /* Perfect geometric positioning independent of font engines */
     left: 6px;
     top: 2px;
     width: 5px;
     height: 10px;
     
     /* Draw an L-shape border */
     border: solid white;
     border-width: 0 2.5px 2.5px 0;
     
     /* Rotate it 45 degrees to form a crisp checkmark */
     transform: rotate(45deg);
     box-sizing: border-box;
   }


   .fsSubmitButton {
   	box-shadow:inset 0px 1px 0px 0px #ffffff;
   	background:linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
   	background-color:#ffffff;
   	border-radius:6px;
   	border:1px solid #dcdcdc;
   	display:inline-block;
   	cursor:pointer;
   	color:#666666;
   	font-family:Arial;
   	font-size:15px;
   	font-weight:bold;
   	padding:6px 24px;
   	text-decoration:none;
   	text-shadow:0px 1px 0px #ffffff;
   }
   
   .form-textbox {
      height: 25px !important;
      width: 220px !important;
      font-size: 16px !important;
   }   

}




.cgi_comment {
   margin: 2px;
}

.resultcount {
	margin: 10px 0px 2px 0px;
	font-size: 1.1em;
	font-weight: bold;
}

.primaryvideo {
   /* for fluid video widths - width=100% */
   width: 100%;
   height: auto;
}

.linknavigation {
   clear:both;
}

.image_wrapper {
   display:table;
   margin-top: 5px;
   padding: 0px;
   border: 1px Black solid;
}

.image_wrapper_row {
   display:flex;
   margin: 0px;
   padding: 0px;
}

.image_lores_cell_no_size {
   flex: 0 0 auto;
   vertical-align: top;
   padding: 1px;
}

.image_text_cell {
   flex: 1 1 auto;
   padding-left: 2px;
   min-width:300px;
   vertical-align:top;
}

.image_text_content {
   display:flex;
   flex-flow: column;
   justify-content: space-between;
   height:100%;
   overflow: hidden;
}

.image_text_header {
   flex: 0 0 auto;
}

.image_text_footer {
   flex: 0 0 auto;
   /* border: 1px LightGray solid; */
   background: #FFFFAC;
   padding: 2px;
   /*  width: 95%; */
}

.footer {
   clear:both;
}

.wide_back_image {
   margin-left:20px;
   margin-right: 20px;
   height: 20px;
}

.itemnumber {
	font: 0.9em "Times New Roman";
	margin-right: 2px;
}

.image_preview_tooltip {
	margin-right: 5px;
}

.controlbutton {
	margin-right: 2px;
}

.title1 {
	font: bold 1.1em "Times New Roman";
}

.title2 {
	font: bold 0.9em "Times New Roman";
}

.title3 {
	font: bold 1em "Times New Roman";
	text-decoration: underline;
}

.Image_title3 {
   display: inline-block;
	font: bold 1em "Times New Roman";
	color:black;
	text-decoration: underline;
	padding-right: 10px;
}

.Image_title3:visited {
	color:black;
	text-decoration: underline;
}

.Image_title3:link {
	color:black;
	text-decoration: underline;
}

.Image_title3:hover { 
	color:blue;
	text-decoration: underline;
}

.Video_title3 {
   display: inline-block;
	font: bold 1em "Times New Roman";
	text-decoration: underline;
	color: red;
	padding-right: 10px;
}

.Video_title3:visited {
	color:red;
	text-decoration: underline;
}

.Video_title3:link {
	color:red;
	text-decoration: underline;
}

.Video_title3:hover { 
	color:blue;
	text-decoration: underline;
}

.helptext {
	font: 0.7em "Times New Roman";
}

.helptext_leftmost {
   padding-left: 5px;
}

/* highlighting for the current page number when there are sub pages */
.pagination_current_page {
	font: bold 1.3em "Times New Roman";
	color: red;
}

.Image_imagenumber {
	font: 0.7em "Times New Roman";
}

.Video_imagenumber {
	font: 0.7em "Times New Roman";
	color: red;
}

.exiffield {
	font: bold 0.8em "Times New Roman";
	color: darkblue;
}

.exifvalue {
	font: 0.8em "Times New Roman";
	color: darkblue;
}

.duplicate_info {
	font: bold 0.7em "Times New Roman";
	color: darkblue;
	background: yellow;
}

.pagelinks {
	color: blue;
}

.pageloading {
	font: bold 1em "Times New Roman";
   text-decoration: blink;
	color: red;
}

.one_pic_nav_buttons {
   display: inline-block; 
}

/* ---------------- Specific Elements -------------- */
body {
	background: #FFFFF0 repeat-y fixed bottom center;
	color: #000; 
	margin: 0px;
   padding:2px; 
	text-align: left;
	font: 1em "Times New Roman"; 
	height:100%;
	line-height: 1;
}

h1 {
	margin: 0px 0px 0px 0px;
	font: bold 1.5em sans-serif,Arial;
	color: #444;
	text-align: center; 
	background: #dddddd;
}
h2 {
	margin: 2px 1px 2px 1px;
	font: 1.5em sans-serif,Arial;
	color: #EfEfEf;
	text-align: center; 
	background: #000080;
}

h3 {
	margin: 10px 0px 2px 0px;
	font: bold 0.9em sans-serif,Arial;
	color: #444;
}

h4 {
	margin: 10px 0px 2px 0px;
	font: bold 0.9em sans-serif,Arial;
	text-decoration: underline;
	color: #444;
}

input.button {   
   width: 130px;
   color:#050;   
   background-color:LightGray;   
   border:1px solid;   
   border-color: black; 
   border-radius: 6%;
   margin: 1px 10px 0px 0px;
}

input.nextprev_button {   
   width: 50px;
   color:#050;   
   background-color:LightGray;   
   border:1px solid;   
   border-color: black; 
   border-radius: 10%;
   margin: 1px 6px 0px 0px;
}

input.preview_button {   
   width: 80px;
   color:#050;   
   background-color:LightGray;   
   border:1px solid;   
   border-color: black; 
   border-radius: 6%;
   margin: 1px 5px 0px 0px;
}

input.thumb_button {   
   width: 40px;
   color:#050;   
   background-color:LightGray;   
   border:1px solid;   
   border-color: black; 
   border-radius: 10%;
   margin: 1px 5px 0px 5px;
}

.item_tags_not_loaded, .item_tags_loaded {
   padding-top: 2px;   
}

.individual_tag {
    cursor:pointer;
}

.taglink {
    cursor:pointer;
}

a {
   font: normal 12px sans-serif,Arial;
}

a:link {
	color: #553d72;
	text-decoration: underline;
}
a:visited {
	color: #003d72;
	text-decoration: underline;
}

a:hover { 
	color: #ec1b2b;
	text-decoration: underline;
}

a.hidden:link {
	color: #553d72;
	text-decoration: none;
}

a.hidden:visited {
	color: #003d72;
	text-decoration: none;
}

a.maplink:link {
	color: red;
}
a.maplink:visited {
	color: darkred;
}

/* ---------------- Specific Elements -------------- */





/* ---------------- Item Type Classes -------------- */
/* generally structured so that everything gets the same class and then types that we want to change eg the colour on are additional classes that are added where needed to those specific types */
.toc_item {
   border: 1px black solid;
   background-color: #FFFFD0;
   padding: 3px 3px 3px 3px;
   margin: 1px 0px 0px 0px;
}

.type_foldercomment, .foldercomment, .type_folder_completed_comment_background {
   border: 1px black solid;
   background-color: #6FFFD0;
   padding: 3px 3px 3px 3px;
   margin: 1px 0px 0px 0px;
}

.type_folder_needs_comment_background {
   /* not used */
}

/* ----- video -----*/
.type_video_completed_exif_comment_background {
   background-color: #BBD9C8 !important;
}

.type_video_completed_exif_comment_highlight {
   background-color: #9AC7AD !important;
   border: 1px LightGray solid;
   padding: 2px;
   margin-bottom:5px;
}

.type_video_needs_exif_comment_background {
   background-color: #DBD6DC !important;
}

.type_video_needs_exif_comment_highlight {
   background-color: #B7ACB9 !important;
   border: 1px LightGray solid;
   padding: 2px;
   margin-bottom:5px;
}

/* ----- images -----*/

.type_image_completed_exif_comment_background {
   background-color: #FFFFD0 !important;
   border: 1px LightGray solid;
   padding: 2px;
   margin-bottom:5px;
}

.type_image_completed_exif_comment_highlight {
   background-color: #FFFFA0 !important;
   border: 1px LightGray solid;
   padding: 2px;
   margin-bottom:5px;
}

.type_image_needs_exif_comment_background {
   background-color: #FFEFE0 !important;
   border: 1px LightGray solid;
   padding: 2px;
   margin-bottom:5px;
}

.type_image_needs_exif_comment_highlight {
   background-color: #FFEBC0 !important;
   border: 1px LightGray solid;
   padding: 2px;
   margin-bottom:5px;
}


/* ---------------- Item Type Classes -------------- */



/* ---------- Search CGI Results ------------ */
.results {
   // display: grid;
   // grid-template-columns: repeat(auto-fit, minmax(max-content, 300px));
}

.single_result {
   display:flex;
   flex-flow: row;
   float:left; 
   border: 1px Black solid;
   background-color: #FFFFD0;
   margin: 1px;
}

.single_result_image {
   /* no width specification allows this to flex even to handle really wide images */
   flex: 1 0 auto;
   margin: 1px;
   padding: 2px;
}

.single_result_text {
   flex: 1 1 auto;
   margin: 1px;
   padding-left: 2px;
   max-width:300px;
   overflow: auto;
}

/* ---------- Search CGI Results ------------ */









/* ----------- INFINITE SCROLL -------------*/
.ias-noneleft {
   clear:both;
}

.ias-spinner {
   clear:both;
}

.ias-trigger {
   clear:both;
}

.ias-trigger-prev {
   clear:both;
}
/* ----------- INFINITE SCROLL -------------*/






/* ------------- ColorBox ----------------- */
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

/* 
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#000;}
#colorbox{outline:0;}
    #cboxContent{margin-top:80px;background:#000;}
        .cboxIframe{background:#fff;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{border:5px solid #000; background:#fff;}
        #cboxTitle{position:absolute; top:-60px; left:0; color:#ccc;}
        #cboxCurrent{position:absolute; top:-20px; right:0px; color:#ccc;}
        #cboxLoadingGraphic{background:url(/images/colorbox_loading.gif) no-repeat center center;}

        /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
        #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }
        
        /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
        #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}
        
        #cboxSlideshow{position:absolute; top:-20px; right:90px; color:#fff;}
        #cboxPrevious{position:absolute; top:50%; left:5px; margin-top:-32px; background:url(/images/colorbox_controls.png) no-repeat top left; width:28px; height:65px; text-indent:-9999px;}
        #cboxPrevious:hover{background-position:bottom left;}
        #cboxNext{position:absolute; top:50%; right:5px; margin-top:-32px; background:url(/images/colorbox_controls.png) no-repeat top right; width:28px; height:65px; text-indent:-9999px;}
        #cboxNext:hover{background-position:bottom right;}
        #cboxClose{position:absolute; top:5px; right:5px; display:block; background:url(/images/colorbox_controls.png) no-repeat top center; width:38px; height:19px; text-indent:-9999px;}
        #cboxClose:hover{background-position:bottom center;}
/* ------------- ColorBox ----------------- */



/* start of CSS for pop up menu */
.dropdown {
   position: relative;
   display: inline-block; /* Allow other items to be inline */
   margin-right: 5px; /* Space between items */
}

.dropdown-content {
   display: none;
   position: absolute;
   background-color: #f9f9f9;
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
   z-index: 1;
   min-width: 300px; /* Set a minimum width for the dropdown */
   max-width: 800px; /* Optional: Set a maximum width */
   width: auto; /* Allow width to auto-adjust based on content */
   word-wrap: break-word; /* Make long URLs wrap to the next line */   
   border-radius: 5px;
   overflow: hidden; /* Prevents child elements from breaking the rounded border */
}

.dropdown-content a {
   color: black;
   padding: 8px 12px;
   text-decoration: none;
   display: block;
   border-bottom: 1px solid #ddd; /* Light separator line */
}

.dropdown-content a:last-child {
   border-bottom: none; /* Remove the last separator */
}

/*
.dropdown-content a:nth-child(odd) {
   background-color: #e8e8e8;
}
*/

.dropdown-content a:hover {
   background-color: #e0e0e0; /* Make the text stand out */
}

.dropdown:hover .dropdown-content {
   display: block; /* Show the dropdown on hover */
}





/* ------------- URL Access Checker ----------------- */
.url-notification {
   position: fixed;
   left: 20px;
   bottom: 20px;
   margin-bottom: env(safe-area-inset-bottom);
   color: white;
   padding: 15px 30px 15px 15px;
   border-radius: 10px;
   box-shadow: 0 2px 6px rgba(0,0,0,0.5);
   font-family: sans-serif;
   z-index: 9999;
   opacity: 0.95;
   background-color: #f44336;

   display: inline-block;
   max-width: calc(100vw - 40px);  /* ✅ Key: prevent overflow */
   width: auto;
   white-space: normal;
   word-wrap: break-word;
   overflow-wrap: anywhere;
   box-sizing: border-box;         /* ✅ Includes padding in width calculation */
}




/* need to add this to html and body to make sure the notification is visible at the bottom of the screen on mobile devices */
html, body {
   overflow-x: auto;   /* or omit entirely if you're not customizing it */
   overflow-y: auto;
}

@media (max-width: 400px) {
   .url-notification {
      padding: 10px 15px 10px 10px;
   }
}


/* ------------- URL Access Checker ----------------- */


/* Target all checkboxes within your search or option panels */
input[type="checkbox"] {
   /* 1. Strip away Safari's buggy native styling */
   -webkit-appearance: none;
   appearance: none;
   
   /* 2. Explicitly define the dimensions and base styles */
   width: 16px;
   height: 16px;
   border: 1px solid #767676;
   border-radius: 3px;
   background-color: #ffffff;
   
   /* Align nicely with adjacent text labels */
   display: inline-block;
   vertical-align: middle;
   margin-top: -2px;
   cursor: pointer;
}

/* 3. Re-introduce a visual indicator for the checked state */
input[type="checkbox"]:checked {
   background-color: #0075ff; /* Standard fallback blue, or match your site theme */
   border-color: #0075ff;
   position: relative;
}

/* Optional: Draw a clean white checkmark inside the checkbox when active */
input[type="checkbox"]:checked::after {
   content: '';
   position: absolute;
   left: 5px;
   top: 1px;
   width: 4px;
   height: 8px;
   border: solid white;
   border-width: 0 2px 2px 0;
   transform: rotate(45deg);
}