:root {
    --PAGE_WIDTH: 850px;
    --PAGE_WIDTH_WIDER: 1100px;
    /* for wider screens */
    --PAGE_WIDTH_WIDEST: 1400px;
    /* for widest screens */
    --MAX_TEXT_WIDTH: 800px;
    /* limit on text width as screen expands to ensure readability */
    --SIDE_MENU_WIDTH: 300px;
    --TEXT_COLOUR: rgb(208, 208, 208);
    --SUBTLE_LINE: rgba(208, 208, 208, 0.33);
    --TEXT_LINK_COLOUR: rgb(214, 173, 112);
    --TEXT_HOVER_COLOUR: #ffc400;
    --PAGE_BACK_COLOUR: rgba(29, 19, 10, 0.89);
    --IMAGE_BORDER_COLOUR: #b4b4b4;
    --NAV_WIDTH_0: 300px;
    --NAV_WIDTH_1: 400px;

    --NAV_BACKGROUND_COLOUR: rgba(29, 19, 10, 0.89);
    --NAV_HOVER_COLOUR: rgba(29, 19, 10);
    --TEXT_LATIN_COLOUR: #9a9a9a;
    --TEXT_PAGE_HEADER: rgb(224, 170, 25);
    --PAGE_HEADER_BACKGROUND: #0e2911;
    --MENU_SECTION_COLOUR: rgb(208, 208, 208);
    --MENU_SECTION_HOVER_COLOUR: #ffc400;
    --PAGE_HEADER_COLOUR: #d6ad70;
    --GROUP_PARA_BORDER_COLOUR: rgba(252, 175, 61, 0.36);
    --GROUP_PARA_BORDER_COLOUR_FAINT: rgba(252, 175, 61, 0.16);

    --BUTTON_BACKGROUND: rgba(128, 128, 128, 0.24);

    --MENU_LINES_COLOUR: rgba(163, 161, 161, 0.53);

    /* see https://fonts.google.com/ */
    --FONT_TEXT: 'Roboto', sans-serif;
    /* 100 300 400 500 700 900 */
    /* font family for normal text */
    --FONT_HEADER: 'Rubik', sans-serif;
    /* 300 400 500 700 900 */
    /* font family for H1 H2 etc. */
    --FONT_FEATURE: 'Roboto', sans-serif;
    /* 100 300 400 500 700 900 */
    /* font family for feature boxes   NOT YET USED */
    --FONT_FIXED: 'Courier New', Courier, monospace;
}

/*
currently change-over for menu list always showing or not is 1330 px - search "menu change over" (defaults to mobile, media query change for desktop)


*/

/* overrideing user agent stylesheet values */
picture {
    margin: 0;
    padding: 0;
}



.center {
    margin-left: auto;
    margin-right: auto;
    background-color: #F7F7F7;
    max-width: 960px;
    /* min-width:960px;*/
    text-align: left;
    /* outline: 1px solid gray; */
    background: none;
}



.js_warning {
    color: yellow;
    background: red;
    font-weight: bold;
    padding: 20px;

}


html {
    font-size: 100%;
}

body {
    margin: 0px;
    padding: 0px;
    color: white;
    color: var(--TEXT_COLOUR);
    font-family: Arial, Helvetica, sans-serif;
    font-family: var(--FONT_TEXT);
    font-size: 18px;
    line-height: 1.375;
    /*normal; */
    font-weight: 400;

}





h1,
h2,
h3,
h4,
.ff_semi_head {
    font-family: Arial, Helvetica, sans-serif;
    font-family: var(--FONT_HEADER);
    color: #d6ad70;
    color: var(--PAGE_HEADER_COLOUR);
    max-width: var(--MAX_TEXT_WIDTH);
}

h1 {
    font-size: 1.6em;
    letter-spacing: 1px;
    font-weight: 400;
}

.pseudo_h2,
h2 {
    /* as used in the accordian selections*/
    font-size: 1.3em;
    letter-spacing: normal;
    font-weight: 400;
}

.pseudo_h2 {
    display: block;
    margin-bottom: 15px;
}


h3 {
    font-size: 1.1em;
    font-weight: 400;
}

h4 {
    font-size: 1.1em;
    font-weight: 400;
    margin-bottom: 0px;
    margin-top: 0px;
}

.ff_semi_head {
    font-size: 1.1em;
    display: block;
}



@media all and (min-width:700px) {
    h1 {
        font-size: 2.0em;
        letter-spacing: 2px;
    }

    h2 {
        /* as used in the accordian selections*/
        font-size: 1.4em;
        letter-spacing: 1px;
    }

    h3 {
        font-size: 1.2em;
    }
}



p {}





ul h3 {
    margin-left: -20px;
}

.head_colour {
    color: var(--PAGE_HEADER_COLOUR);
}

a:link,
a:visited {
    text-decoration: none;
    color: yellow;
    color: var(--TEXT_LINK_COLOUR);
    padding-left: 3px;
}

a:hover,
a:active {
    text-decoration: underline;
    color: yellow;
    color: var(--TEXT_HOVER_COLOUR);
}

/*
#flx_holder_topline {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    z-index: 100;
}*/

.flx_holder_content {
    /* no longer flex */
    padding: 0px;
    width: 100%;
    display: table;
    border: none;
}


#critter_pane_holder {
    padding-top: 0px;
    display: table-cell;
    vertical-align: top;
}



#critter_pane {
    max-width: 850px;
    max-width: var(--PAGE_WIDTH);
    background-color: darkslategray;
    background-color: var(--PAGE_BACK_COLOUR);
    padding: 6px 2vw 1vw 2vw;
    margin: 0 auto;
    margin-top: 42px;
    display: block;

}

/* added for the free-foramt extra pages */
.critter_pane_extras,
.critter_pane_regular {
    width: var(--PAGE_WIDTH);
}


/* MOBILE */
@media all and (max-width:500px) {
    #critter_pane {
        margin-top: 60px;
        padding: 0 0px 1vw 0px;
    }
    #critter_pane p {
        padding-left: 5px;
        padding-right: 2px;
    }
    .critter_pane_regular,
    .critter_pane_extras {
        width: 100vw;
    }
}


@media all and (min-width:1800px) {
    #critter_pane {
        max-width: var(--PAGE_WIDTH_WIDER);
    }

    /* added for the free-foramt extra pages */
    .critter_pane_extras {        
        width: var(--PAGE_WIDTH_WIDER);
    }

    #critter_pane p {
        max-width: var(--MAX_TEXT_WIDTH);
        margin: 0 auto;
        text-align: left;
        padding-top: 16px;
    }

    #critter_pane #welcome_page p {
        margin-left: 0;
    }
}


@media all and (min-width:2200px) {
    #critter_pane {
        max-width: var(--PAGE_WIDTH_WIDEST);
    }
/* added for the free-foramt extra pages */
    .critter_pane_extras {        
        width: var(--PAGE_WIDTH_WIDEST);
    }
}



.page_surface {
    /*background-image:url("../pic/otter_back_grey.jpg");
	background-repeat: repeat; */
    z-index: -2;
    margin-top: 0px;
    background-color: rgba(255, 255, 255, 0.9);

}


.page_content {
    margin-left: 50px;
    margin-right: 50px;
    margin-top: 30px;
    /* was 30px */
    padding-bottom: 25px;
    padding-top: 30px;
    margin-bottom: 10px;
    position: relative;
    min-height: 3000px;
}


/* flora and fauna and fungi stuff */

#banner {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-start;
    z-index: 100;
    /*   */
    font-family: Arial, Helvetica, sans-serif;
    font-family: var(--FONT_HEADER);
    color: #d6ad70;
    color: var(--PAGE_HEADER_COLOUR);
    font-weight: normal;
    background-color: #030;
    background-color: var(--PAGE_HEADER_BACKGROUND);
    font-size: 2.0em;
    border-bottom: 1px solid var(--PAGE_HEADER_COLOUR);
    width: 100%;
    line-height: normal;
}

#banner .region_otter,
#banner .region_all {
    font-size: 0.65em;
}

.banner_search_button {
    width: 32px;
    height: 32px;
    margin: 6px 12px 6px 6px;
    background: url(../pic/icon_search_32h.png) no-repeat;
    background-size: contain;
}

.banner_search_button:hover {
    background: url(../pic/icon_search_32h_hov.png) no-repeat;
}

@media all and (max-width:500px) {
    #banner {
        font-size: 1.6em;
        line-height: normal;
        height: 60px;
    }

    .banner_search_button {
        width: 24px;
        height: 24px;
        margin: 4px 4px 4px 4px;
        background: url(../pic/icon_search_24h.png) no-repeat;
    }

    #banner .region_otter,
    #banner .region_all {
        position: relative;
        top: -10px;
    }


}

@media all and (max-width:400px) {
    #banner {
        font-size: 1.4em;
        line-height: normal;
    }

}



.latin_name {
    font-size: 0.8em;
    color: #666;
    color: var(--TEXT_LATIN_COLOUR);
    padding-bottom: 3px;
    display: block;
    padding-left: 24px;
}

@media all and (min-width:1330px) {
    .latin_name {
        padding-left: 20px;
        display: inline;
    }
}


.tree_background {
    background: url(../pic/IMG_1770.webp) no-repeat center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}


/* the accordion feature  */

.extra_menu_item {
    float: left;
    display: block;
    margin-top: 2px;
    margin-left: 20px;
    margin-right: 10px;
    margin-bottom: 2px;
    font-size: 1.1em;
    width: 100%;
}

.other_pages,
.accordionItemHeading {
    cursor: pointer;
    width: 280px;
    box-sizing: border-box;

    font-size: 1.2rem;
    font-weight: normal;
    color: #666;
    color: var(--MENU_SECTION_COLOUR);

   text-transform: uppercase;
    letter-spacing: 2px;
    line-height: normal;
    /* border-bottom: 2px solid #666;
  border-color: var(--MENU_LINES_COLOUR);*/
    margin-top: 12px;
    margin-left: 12px;
    margin-right: 10px;
    margin-bottom: 2px;
}

@media all and (min-width:1330px) {

    /* menu change over */
    .accordionItemHeading {
        width: 370px;
    }
}

.close .accordionItemHeading {
    border: none;
}

.open .accordionItemHeading {
    background: rgba(200, 200, 200, 0.16);
}

.accordionItemHeading::before {
    font-size: 0.85em;
    margin-top: -2px; 
}

.close .accordionItemHeading::before {
   content: "\25B6\A0\A0 "; 
  opacity: 0.75;
  color: var(--TEXT_LINK_COLOUR);

}
.open .accordionItemHeading::before {
  content: "\25BC\A0\A0 ";
}






/*


.close .accordionItemHeading::after {
    content: '\A0\A0\02795';
    Unicode character for "heavy plus" sign (+)
    color: var(--MENU_SECTION_COLOUR);
    float: right;
    font-size: 0.85em;
    margin-top: -2px;
}

.open .accordionItemHeading::after {
    content:"\A0\A0\2796";
    Unicode character for "heavy minus" sign (-) 
    color: var(--MENU_SECTION_COLOUR);
    float: right;
    font-size: 0.85em;
    margin-top: -2px;
}
*/

/*content: "\02C3";*/

/* content: '\02795';  Unicode character for "heavy plus" sign (+) */

/* content: "\25B6\A0\A0";    black right-pointing triangle */

/*content: "\02C5";*/

/*content: "\2796";  Unicode character for "heavy minus" sign (-) */

/* content: "\25BC\A0\A0";    black down-pointing triangle */

.accordionItemHeading:hover {
    color: #8f3f3a;
    /* fallback */
    color: var(--MENU_SECTION_HOVER_COLOUR);
    background: rgba(200, 200, 200, 0.33);
    text-decoration: none;
}

.close .accordionItemContent {
    height: 0px;
    transition: height 2s ease-out;
    transform: scaleY(0);
    float: left;
    display: block;


}

.open .accordionItemContent {
    margin-left: 12px;
    padding: 4px 15px 4px 10px;
    width: 100%;
    display: block;
    transform: scaleY(1);
    transform-origin: top;
    transition: transform 0.3s ease;
    box-sizing: border-box;
    /* border-bottom: 2px solid #666;
  border-color: var(--MENU_LINES_COLOUR);*/
}


/* ****************************************** */

#open_all_button {
    float: right;
}

@media all and (min-width:1330px) {
    #open_all_button {
        float: right;
    }
}



.ff_button {
    border-radius: 8px;
    color: white;
    color: var(--TEXT_LINK_COLOUR);
    font-size: 0.9em;
    font-weight: normal;
    padding: 2px 4px 2px 4px;
    margin: 4px 4px 4px 4px;
    border: 1px solid grey;
    background-color: var(--BUTTON_BACKGROUND);
    cursor: pointer;
    display: inline-block;
}

.ff_search .ff_button {
    font-size: 1.2em;
    margin-left: 0px;
    padding: 2px 8px 2px 8px;
}

.ff_search form {
    display: inline-block;
    margin-right: 24px;
}

.ff_button a:hover {
    text-decoration: none;
}

.ff_button:hover {
    color: var(--TEXT_HOVER_COLOUR);
    border-color: var(--TEXT_HOVER_COLOUR);
}

.welcome_button {
    border: none;
    background: none;
    margin: 0;
    font-size: 1.0em;
    padding: 0;
    float: none;
}

.panel_icon {
    margin-left: 30px;
    margin-bottom: -8px;
}

.critter_name_header {
    /* pretty much an h1 */
    max-width: inherit;
    line-height: normal;
    margin-bottom: 0px;
}

.critter_latin_name_header {
    color: #888;
    color: var(--TEXT_LATIN_COLOUR);
    font-weight: normal;
    max-width: inherit;
    margin: 0;
    letter-spacing: normal;
    font-family: Arial, Helvetica, sans-serif;
    font-family: var(--FONT_TEXT);
}

.critter_alt_name_header {
    font-style: italic;
    color: #888;
    color: var(--TEXT_LATIN_COLOUR);
    font-weight: normal;
    max-width: inherit;
    margin: 0;
    letter-spacing: normal;
    font-family: Arial, Helvetica, sans-serif;
    font-family: var(--FONT_TEXT);
}

.critter_name_header_group {
   padding-left: 5px;
}


.info_box {
    background: white;
    border-bottom: thin solid #999;
    margin: 12px;
    clear: both;
}

.info_box_header {
    font-size: 1.2em;
    font-weight: bold;
    color: #999;
    border-top: thin solid #999;
    border-bottom: thin solid #999;
    text-align: center;

}

.info_box_info {
    font-size: 0.9em;
    line-height: normal;
    padding: 8px;
    margin-bottom: 12px;
}

/*
.ps_photo_box {
  float: left;
  margin-left: 8px;
  margin-right: 8px;
  margin-top: 8px;
  margin-bottom: 8px;

  box-sizing: border-box;
  display: table;
  position: relative;
  z-index: 3;
}
*/



.ff_photo_box {
    float: left;
    display: table;
    position: relative;
    margin: 10px 18px 10px 18px;
    z-index: 2;
    /*   width: 100%;  experimental */
}

@media all and (max-width:700px) {
    .ff_photo_box {
        margin-left: 4px;
        margin-right: 4px;
        margin-top: 28px;
    }
}

@media all and (max-width:500px) {
    .ff_photo_box {
        margin-left: 2px;
        margin-right: 2px;
    }
}

.ff_video_caption,
.ff_photo_caption {
    text-align: left;
    margin-top: 1px;
    font-size: .75em;
    line-height: 15px;
    padding-bottom: 3px;
    word-break: normal;
    /* Chrome only ?? */
    /* to handle the equivalent of width:min-content to constrain the width of the <figcaption> to the width of the image */
    display: table-caption;
    caption-side: bottom;

}

.ff_video_caption {
    display: block;
}

/* a mobile kludge */

@media all and (max-width:800px) {
    .ff_photo_caption {
        display: block;
        /*   position: relative;
    top: -12px;
    left: 5px;  */
        border: none;
    }
}

.ff_photo_credit {
    font-size: .85em;
    /* mob is that .75 em is the .small def */
}

/* These fm_photo... are the new versions after going over to using <figure> */

.ff_photo_box_img {
    position: relative;
    width: auto;
    /*background-color:#333;  because in some cases rounding on image pixel sizes leaves a 1 pixel strip unfilled by the image 
	width: min-content;   this one useful for height defined?? but breaks the width defined*/
}


.ff_photo_lbx {
    width: 100%;
    box-sizing: border-box;
}

.ff_photo_lbx_border {
    border: solid 2px #bababa;
    border-color: var(--IMAGE_BORDER_COLOUR);

}

/* the z-index work here is to allow the magnifier to only appear when hovering over the image */

a:link .ff_photo_lbx,
a:visited .ff_photo_lbx {
    z-index: 3;
    position: relative;
}

a:hover .ff_photo_lbx,
a:active .ff_photo_lbx {
    z-index: 1;
    position: relative;
}



.ff_photo_box_caption {
    text-align: left;
    margin-top: 8px;
    font-size: .85em;
    line-height: 12px;
    padding-bottom: 3px;
    border-bottom: solid 1px #333;
}

.ff_photo_box_credit {
    font-size: .85em;
    /* mob is that .75 em is the .small def */
}

.photo_centre {
    /* not sure if it works??  */
    /*margin: 0 auto; */
    text-align: center;
}

.mag_40 {
    position: absolute;
    opacity: 0.65;
    z-index: 2;
}

.mag_40:hover,
.mag_40:active {
    opacity: 1.0;
}

.mag_40 {
    bottom: 4px;
    right: 4px;
    width: 40px;
    height: 40px;
}

@media all and (max-width:600px) {
    .mag_40 {
        z-index: -1;
    }
}

.dropshadow {
    box-shadow: 8px 8px 9px #aaa;
}


#fixed_to_top {
    position: fixed;
    top: 0px;
    width: 100%;
    height: 0;
    text-align: center;
    z-index: 100;
}


.ff_menu_item {
    font-size: 1.1em;
    max-width: 280px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ff_menu_current,
.ff_menu_current a:link,
.ff_menu_current a:visited,
.ff_menu_current .latin_name {
    color: black;
    font-weight: bold;

}

.ff_menu_current {

    /*border-top: 1px solid var(--TEXT_HOVER_COLOUR);  
  border-bottom: 1px solid var(--TEXT_HOVER_COLOUR); 
  border-left: 6px solid var(--TEXT_HOVER_COLOUR); */
    background-color: var(--TEXT_LINK_COLOUR);
}

@media all and (min-width:1330px) {

    /* menu change over */
    .ff_menu_item {
        max-width: 380px;
    }
}


.ff_youtube_container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
}

.ff_youtube_container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.extra_photos_link {
    clear: both;
    padding-top: 40px;
    font-size: 1.3em;
    text-align: right;
    /*border-top: 1px grey solid;
    border-bottom: 1px grey solid;*/
}






/* menu box stuff 
-----------------------------------------------
*/

#menu_pane {
    float: left;
    vertical-align: top;
    width: 300px;
    width: var(--NAV_WIDTH_0);
    background-color: #E6FFE6;
    background-color: var(--NAV_BACKGROUND_COLOUR);
    padding: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    overflow-y: auto;
    overflow-x: hidden;
    display: none;
    margin-bottom: 0px;
    margin-top: 0;
    position: -webkit-sticky;
    /* Safari */
    position: sticky;
    top: 5px;
    left: 10px;
    /*  z-index: 600;*/
    text-align: left;
    border: var(--TEXT_COLOUR) 1px solid;
    max-height: 90vh;
    box-shadow: 5px 10px 18px rgba(0, 0, 0, 0.75);

}

@media all and (min-width:1330px) {

    /* menu change over */
    #menu_pane {
        display: block;
        width: var(--NAV_WIDTH_1);
    }
}


/* for left scrollbar 
#menu_pane {direction: rtl; }
#menu_pane_inside {direction: ltr; }
*/

/* Designing for scroll-bar */

#menu_pane::-webkit-scrollbar {
    width: 10px;
}

/* Track */

#menu_pane::-webkit-scrollbar-track {
    background: gainsboro;
    border-radius: 5px;
}

/* Handle */

#menu_pane::-webkit-scrollbar-thumb {
    background: var(--TEXT_LINK_COLOUR);
    border-radius: 5px;
}

/* Handle on hover */

#menu_pane::-webkit-scrollbar-thumb:hover {
    background: var(--TEXT_HOVER_COLOUR);
}

#menu_pane:hover {
    background-color: var(--NAV_HOVER_COLOUR);

}



#dummy_menu_pane {
    width: 0px;
    background: none;
    display: table-cell;

}

 /* menu change over */
@media all and (min-width:1330px) {
    #dummy_menu_pane {
        width: var(--NAV_WIDTH_1);
        margin-left: 20px;
    }
}


#critter_pane_footer {
    border-top: 1px solid var(--SUBTLE_LINE);
    font-size: 0.85em;
   
    margin-top: 30px;
  margin-bottom: 20px;
    padding: 2px;
     clear: both;
}

@media all and (max-width:500px) {
    #critter_pane_footer {
         display:inline-block;
    }
}

.banner_edge {
    width: auto;
    float: left;

}

#hamburger {
    display: inline-block;
    width: auto;
    float: left;
    margin-left: 6px;
    cursor: pointer;
}

@media all and (min-width:1330px) {

    /* menu change over */
    #hamburger {
        width: 1px;
        line-height: 1px;
        opacity: 0.0;
    }
}


/* the highlights section on the welcome page */
.ff_highlights {
    width: 100%;
}

.ff_highrow {
    clear: both;
    margin-bottom: 15px;
    width: 100%;
    display: inline-block;
}

.ff_highimg {
    width: 25%;
    max-width: 220px;
    padding: 0;
    float: left;
}

.ff_search .ff_highimg img {
    border: 1px solid black;
}

.ff_search .ff_highimg img:hover {
    border: 1px solid var(--TEXT_HOVER_COLOUR);
}

.ff_highimg img {
    width: 100%;
    height: auto;
}

.ff_highpara {
    padding: 3px 0 0 0;
    border-top: 2px var(--SUBTLE_LINE) solid;
    width: 70%;
    max-width: var(--MAX_TEXT_WIDTH);
    float: left;
    margin: 0 12px 0 12px;
}

.ff_search .ff_highpara {
    border: none;
}

@media all and (max-width:700px) {

    /* .ff_highimg {
    width: 20%;
  }
  .ff_highpara {
    width: 70%;
  } */
    .ff_highpara {
        margin: 0 0px 0 9px;
    }


    .ff_search .ff_highimg {
        width: 30%;
    }

    .ff_search .ff_highpara {
        width: 60%;
    }
}



.ff_highpara,
.ff_highpara a {
    color: var(--TEXT_COLOUR);
}

.ff_highpara strong {
    color: var(--TEXT_LINK_COLOUR);
}

.ff_highrow:hover,
.ff_highrow a:hover,
.ff_highpara:hover,
.ff_highpara:hover strong {
    color: var(--TEXT_HOVER_COLOUR);
    text-decoration: none;
}

.welcome_img {
    width: 40%;
    max-width: 300px;
    height: auto;
    float: right;
    margin-left: 12px;
}


#outer_content {}

/* this is a kludge probably due to the way the menu is attached to the top bar */

#critter_pane_top_pad {
    height: 40px;
}

@media all and (min-width:700px) {
    #critter_pane_top_pad {
        height: 0px;
    }
}



/* alternative layout for extra photos, several per line */
.ff_photos_section_extras {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    /*space-evenly;*/
    align-items: flex-start;
}

.ff_photos_section_extras .ff_photo_box {
    display: table;
    margin: 8px 8px 0px 8px;
}

@media all and (max-width:700px) {
    .ff_photos_section_extras .ff_photo_box {
        margin: 28px 4px 0px 4px;
    }
}

@media all and (max-width:500px) {
    .ff_photos_section_extras .ff_photo_box {
        margin: 28px 2px 0px 2px;
    }
}

.ff_photos_section_extras .ff_photo_box_img {
    display: table;
}



.ff_photos_section_extras .photo_centre {
    display: table;
}

#critter_pane .ff_photos_section_extras {
    margin-left: -1.5vw;
    margin-right: -1.1vw;
}

.extras_byline {
    width: 100%;
    text-align: center;
    margin: 20px 8px -12px 12px;
    /*font-size: 0.85em;*/
    opacity: 0.8;

}


/* grouping of text around photos */
.ff_photo_group {
    clear: both;
    margin: 40px 0 30px 0;
    padding: 0;
    margin-bottom: 30px;
    border-top: 3px solid var(--GROUP_PARA_BORDER_COLOUR);
    border-right: 3px solid var(--GROUP_PARA_BORDER_COLOUR);
    border-bottom: 3px solid var(--GROUP_PARA_BORDER_COLOUR);
    /* border-bottom: 3px solid var(--GROUP_PARA_BORDER_COLOUR_FAINT); */
}

#critter_pane .ff_photo_group p {
    border-left: 12px solid var(--GROUP_PARA_BORDER_COLOUR);
    padding: 20px 10px 2px 20px;
    margin-left: 0px;
}

/* use with div with no content to close groups that are NOT immediately followed by another group */
.ff_photo_group_close {
    /*
  border-bottom: 1px solid var(--GROUP_PARA_BORDER_COLOUR);
  border-right: 2px solid var(--GROUP_PARA_BORDER_COLOUR);
  height:20px;
  width:200px;
  margin-top: -40px;
  padding:0;
  float:right;
  background-image: linear-gradient(173.5deg, rgba(214, 173, 112, 0.0)  50%, rgba(214, 173, 112, 0.3));
    */
}

.ff_extras_page {
    text-align: center;
    margin-top: 20px;
    clear: both;
}

.ff_extras_return {
    margin: 25px 5px 0px 5px;
    width: 100%;
    text-align: left;
}

.ff_extras_return a:visited,
.ff_extras_return a:link {
    color: var(--TEXT_COLOUR);
    opacity: 0.6;
}

.ff_extras_return a:hover,
.ff_extras_return a:active {
    color: var(--TEXT_HOVER_COLOUR);
    opacity: 1.0;
}


.footer_copyright {
    float: right;
    opacity: 0.6;
}


.ff_ident h2 {
    clear: both;
    width: 100%;
    border-bottom: 2px solid var(--PAGE_HEADER_COLOUR);
    margin-top: 30px;
}

.lesser_text {
    font-size: 0.85em;
}


.ff_ident_block {
    clear: both;
    /*    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-start;*/
    display: grid;
    grid-template-columns: minmax(180px, 30%) 1fr;
    /* grid-auto-flow: column;
  grid-auto-columns: 1fr;*/

    margin-bottom: 15px;
    width: 100%;

}

.ff_ident_link {
    word-wrap: break-word;
    background-color: black;
    /*rgba(255, 255, 255, 0.1);*/
}

.ff_ident_about {
    padding: 4px;
    margin-left: 10px;
}

.ff_ident_link,
.ff_ident_about {
    padding: 4px;

}

.ff_ident_caption {
    font-weight: bold;
    display: inline-block;
}

.ff_ident_url {
    font-size: 0.85em;
    border-top: 1px grey solid;
}

.subtle_rule {
    border-top: 1px solid rgba(128, 128, 128, 0.46);
    clear: both;
    height: 1px;
    margin: 0px 6px 12px 6px;
}

.fil_file a,
.fil_file {
    color: blue;
    margin-left: 40px;
}

.fil_folder a,
.fil_folder {
    color: red;

}

.fil_html {
    background-color: white;
}


#popup_box {
    z-index: -1;
    display: none;

    position: absolute;
    top: 7vh;
    left: 10px;
    border: 4px solid black;
    /* var(--PAGE_HEADER_COLOUR);*/
    border-radius: 8px;
    background-color: white;
    width: 300px;
    height: auto;
    box-shadow: 8px 8px 9px #000;
}

@media all and (min-width:700px) {
    #popup_box {
        left: 45vw;
        width: 380px;
    }
}

#popup_msg {
    padding: 8px;
    text-align: left;
    color: black;
}

#popup_button {
    margin: 12px;
    float: right;
    background-color: rgb(56, 56, 56);
    color: var(--PAGE_HEADER_COLOUR);
    border: none;
    font-weight: 700;
    padding: 6px;
}

.popup_header {
    font-size: 1.0em;
    font-weight: 700;
    /*margin-bottom: 30px;*/
}

#popup_box a:link,
#popup_box a:visited {
    color: #7c2525;
}

#popup_box a:hover,
#popup_box a:active {
    color: #a71717;
}

/* not used here yet - left over from copy from KMaps
.context_box {
  border: 1px solid #000000;
  border-radius: 4px;
  background-color: var(--COL_CONTEXT_BACK);
  padding: 6px 6px 6px 10px;
  box-shadow: 0 1px 7px rgba(0, 0, 0, 0.4);
  cursor: context-menu;
  width: auto;
  height: auto;
}
*/
#quick_slideshow_button,
#share_button {
    font-size: 1.0em;
    margin-bottom: 3px;
    text-align: left;
    cursor: pointer;
}

.top_right_actions {
    text-align: right;
    position: relative;
    top: 15px;
    float: right;
    padding-right: 2px;
    font-style: italic;
    font-size: 1.0rem;
    color:var(--TEXT_LINK_COLOUR);
}


.share_img {
    vertical-align: middle;
    height: 24px;
   /* width: 24px;*/
}


input {
    font-size: 1.2em;
    color: navy;

}

input[type="text"] {
    width: 50%;
    margin-right: 24px;
}


/*
#show_map_button {
  font-size: 1.0em;
  font-family: var(--FONT_TEXT);
  font-weight: bold;
  margin: 2px 5px 2px 0;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  color: var(--COL_TEXT_HOVER);
  background-color: var(--COL_GO_BACK);
  border-radius: 5px;
  border: 1px solid var(--COL_GO_BORDER);
  outline: none;
  padding: 2px 1px 2px 4px;
  float: right;
} */

.high_search {
    /*text-decoration:underline;*/
    border-bottom: 2px dotted rgba(255, 196, 0, 0.6);
}

#ff_enter_something {
    display: none;
}

.ff_bao {
    font-size: 1.2em;
    font-weight: bold;
    font-style: italic;
    color: var(--TEXT_HOVER_COLOUR);
}

.ff_showall {
    font-weight: bold;
    font-size: 1.4em;
}

.ff_caption_show_all {
    font-size: 1.4em;
}

.region_button {
    margin-left: 10px;
}

#banner .region_button {
    border: none;
}


.ff_subtle_line {
    border: 1px solid var(--SUBTLE_LINE);
}


.ff_menu_sep {
  border: none;
  border-top: 2px dashed var(--MENU_LINES_COLOUR);
  padding-top: 3px;
  margin-top: 6px;
}


.reindex_icon {
    margin-right: 20px;
    opacity: 0.6;
}

.reindex_icon_faint {
    text-align: right;
    opacity: 0.1;
    margin-bottom: -20px;
}

.reindex_icon:hover,
reindex_icon:active {
    opacity: 1.0;
}

.reindex_icon_faint:hover,
reindex_icon_faint:active {
    opacity: 0.4;
}

.footer_inc,
.header_inc {
    text-align: left;
    width: 100%;
    margin: 0 auto;
}

.footer_inc {
    text-align: center;
    margin: 40px 10px 10px 10px;
}


#welcome_page {
    max-width: var(--PAGE_WIDTH_WIDER);
}

.clear_both {
    clear: both;
    height: 1px;
    width: 100%;
}

.page_width_limited {
    max-width: var(--PAGE_WIDTH);
    padding:0 2px 0 2px;
}

.ff_progress_line {
    font-size: 0.8em;
    font-family: var(--FONT_FIXED);
}

.ff_progress_panel {
    background-color: darkgreen;

}



/* slide show stuff  */
/* ****************  */


#slideshow_container {
    width: 100%;
    display: block;
    z-index: 10;
    /* to make sure table from the fullscreen version does not show through */
    margin-bottom: -30px;
    margin-top: 50px;
}

#slideshow_container_fullscreen {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    display: none;
    z-index: -999;
    background-color: rgba(0, 0, 0, 0.9);
    overflow: hidden;


}


#the_slide,
#the_slide_fullscreen {

    display: block;
    width: 100%;
    /*  aspect-ratio : 3 / 4;*/
    object-fit: contain;
    object-position: top;
    /* border: 1px solid yellow;*/


}

#the_slide_fullscreen {
    width: 100%;
    height: 100vh;
}

#settings_section {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

#settings_wrapper {
    display: none;
}

.slide_settings_section {
    color: var(--TEXT_COLOUR);


}

.slide_settings_section p {
    font-weight: bold;
    font-size: 1.1em;
    color: #d6ad70;
    color: var(--PAGE_HEADER_COLOUR);
    margin-bottom: 3px;

}

.slide_settings_section form {
    border-left: 3px solid var(--PAGE_HEADER_COLOUR);
    color: var(--TEXT_COLOUR);
    padding-left: 4px;

}


#setup_summary {
    font-size: 0.85em;
    opacity: 0.7;
    /*  line-height: 12px;
    text-align: right;*/
}

#setup_summary hr {
    margin: 3px 0px 3px 0px;
    opacity: 0.5;
}

.image_count {
    font-size: 0.65em;
    margin-left: 20px;
    margin-right: 20px;
}


#the_caption,
#the_caption_fullscreen {
    display: inline-block;
    color: rgba(255, 255, 255, 0.85);
    background-color: rgba(0, 0, 0, 0.4);
    padding: 2px 4px 2px 4px;
    position: relative;
    top: -30px;
}

#run_button {
    font-size: 1.2em;
    float: left;
    margin-right: 40px;
}

#setup_button {
    float: right;
}

.slide_flex_containers {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: flex-end;
}

#slideshow_container_fullscreen table {
    /* border: 2px green dotted;*/
    margin: 0 auto;
}

.caption_row {
    overflow: hidden;
    height: 0px;
}

.two_column {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
    justify-content: space-between;
}

.a_column0 {
    flex: 1 0 auto;
    width: 140px;

}

.a_column1 {
    flex: 1 0 auto;
    width: 180px;

}

input#cat_byname_string,
#cat_byname_dummy {
    width: 140px;
    margin-right: 0px;
    margin-left: 20px;
    margin-top: 4px;
}

#cat_byname_dummy {
    height: 30px;
    background-color: rgba(119, 119, 119, 0.29);
    border: 1px solid rgba(119, 119, 119, 0.5);

}

#nowt_found {
    display: none;
    margin: 40px;
    border: 1px solid var(--PAGE_HEADER_COLOUR);
    padding: 10px;
}

.slide_paused {
    opacity: 1.0;
    margin-right: 20px;
    font-weight: bold;
    color: gold;
}

#ff_slideshow_name {
    font-size: 0.6em;
    display: none;
}

#ff_slideshow_back img {
    padding: 3px 1px 1px 1px;
}

.ff_go_for_it::after {
  content: "\02C3\02C3\02C3";
  letter-spacing: -1px;
  font-size: 1.2rem;
  }

.ff_chequer_square::after {
  content: "\25a6";
  }

.error_box {
  background: yellow;
  color: red;
  border: red 3px solid;
  padding:20px;
  margin: 20px;
}

.ff_video_box {
  display: inline-block;
  padding: 32px 8px 0 8px;
}

.ff_photo_lbx_border {
  border: solid 2px #bababa;
  border-color: var(--PHOTO_BORDER_COLOUR);

}
.page_text_mini_image {
  float: right; 
  margin: 0 10px 10px 10px; 
  height:150px;
  width:auto;
}
@media all and (max-width:500px) {
  .page_text_mini_image {
 
  margin: 0 5px 5px 5px; 
    height:100px;
}
}
#critter_pane .ff_photo_group .sup_caption {
    border: none;
    font-size: 0.9em;
    margin-bottom: -30px;
    padding-bottom: 0px;
    margin-top: 4px;
}

.top_caption {
    font-size: 0.8em;
    margin-left: 20px;
    margin-bottom: -30px;
    margin-top: 30px;
    padding-bottom: 0;
    text-align: left;
}