/*



*** maybe use vw or similar for headings??
1vw = 1% of viewport width
1vh = 1% of viewport height
1vmin = 1vw or 1vh, whichever is smaller
1vmax = 1vw or 1vh, whichever is larger



Mobile rules/assumptions
- below 500 wide we change over to having text full with and photos full width.  search  for "mobile_FM test" here and in scripts!! 
Thoughts: If the phone is on its side then the width will be >500 but we may still prefer to trigger the full-width option
          for the photos.  So we might make our test more complex and include height and width of the window.  TODO


*/

/* variables OK with Edge, not with IE    https://css-tricks.com/difference-between-types-of-css-variables/ */

:root {
    --PAGE_WIDTH: 1024px;
    /* width we want our readable page to appear on wide (desktop) screens */
    /*  --MOB_TRIGGER1:  500px;    width we want to trigger our mobile-friendly features     DOES NOT WORK!!*/
    /* land of clean colours */
    --COL_PAGE_BACK: #f8f8f8;
    /*#fbf6e4;*/
    /* fallback: white */
    /* #FBEEC1;            light beige */
    --COL_PAGE_BACK_DIF: Linen;
    /*#efead9;*/
    /* variation to gently highlight an area of the background */
    --COL_BANNER_1: BlanchedAlmond;
    /*#FBEEC1;*/
    /* light beige*/
    --COL_BANNER_2: #2e1d00;
    --COL_BANNER_2_STICKY: rgba(46, 29, 0, 0.85);
    --COL_HEADER_HOVER: #a00;
    --COL_HEADER_LINE: #bbb;
    /* grey line above sub headers*/
    /* trying Nunito instead of Alegreya Sans 2021-03-04 */
    /* check out Permanent Marker as a casual scribble font */
    /* see https://fonts.google.com/ */
    --FONT_TEXT: "Source Sans Pro", sans-serif;
    --FONT_HEADER: "Nunito", sans-serif;
    --FONT_HEADER_SUB: "Source Sans Pro", sans-serif;
    --FONT_HEADER_LESSER: "Nunito", sans-serif;
    --FONT_HEADER_FEATURE: "Nunito", sans-serif;
    --FONT_TEXT_FEATURE: "Source Sans Pro", sans-serif;
    --FONT_FIXED: "Courier New", Courier, monospace;

    --WEIGHT_TEXT: 400;
    --WEIGHT_TEXT_FEATURE: 400;
    --WEIGHT_TEXT_STRONG: 600;
    --WEIGHT_HEADER_1: 800;
    --WEIGHT_HEADER_SUB: 600;
    /* assumed for source sans as 600 does not exist for Alegraya */
    --WEIGHT_HEADER_2: 700;
    --WEIGHT_HEADER_3: 700;
    --WEIGHT_HEADER_4: 700;

    --WEIGHT_FIXED: 400;

    --WEIGHT_LIGHT: 300;
    --WEIGHT_NORMAL: 400;
    --WEIGHT_BOLD: 700;

    /* fonts needed 2020-03-05 with and without italic 
  
  Header 400 700 800 with and without italic 
  Text 300 400 600 700
  Fixed 400 700
  
  */
    /* size rules.  Specify base text in pixels to get it right.  Headers to be multipliers using em */
    --SIZE_TEXT: 20px;
    /* not full standard  16 was quoted best practice and is used by CBC and BBC*/
    --SIZE_TEXT_SMALLER: 0.9rem;
    --SIZE_HEADER_1: 1.8rem;
    --SIZE_HEADER_SUB: 1.2rem;
    --SIZE_HEADER_2: 1.4rem;
    --SIZE_HEADER_3: 1.1rem;
    --SIZE_HEADER_4: 1rem;
    --SIZE_HEADER_FEATURE: 1.4rem;
    --SIZE_FIXED: 1em;

    --SIZE_BASE: 1.0rem;
    --SIZE_REDUCED_90: 0.90rem;
    --SIZE_REDUCED_85: 0.85rem;
    --SIZE_REDUCED_75: 0.75rem;
    --SIZE_REDUCED_65: 0.65rem;

    --COL_TEXT: rgb(16, 16, 16);
    --COL_HEADER: #255392;
    /*  #2966b9;             #0000ba;*/
    --COL_HEADER_SUB: #666;
    --COL_HEADER_LESSER: rgb(3, 65, 181);
    --COL_HEADER_FEATURE: rgb(3, 65, 181);
    --COL_FIXED: #666;

    /* fallback: black*/
    --COL_TEXT_LINK: #1a59af;
    /*  << similar as header blue #00f; */
    --COL_TEXT_HOVER: #00f;
    /* was this #a00; changed to no colour change 2020-02-29 */
    --COL_TEXT_LIGHT: #707070;
    /* for when we need a greyed text */
    --COL_BACK_SUBTLE: rgb(237, 237, 237);
    --COL_BACK_SUBTLE_TRANS: rgba(237, 237, 237, 0.85);
    --COL_BACK_CAPTION: rgb(227, 227, 232);
    /* slightly transparent version */
    --COL_BACK_VERY_SUBTLE: rgb(247, 242, 239);
    --COL_FEATURE_BORDER: #ccc;
    --COL_INPUT_BORDER: #333;
    --COL_BORDER_SUBTLE: #d0d0d0;
    /* Text - font weights -  these should correspond with the variations of the fonts downloaded from Google */
    /* for reverse text */
    --COL_BACK_REVERSE: rgba(37, 83, 146, 0.58);
    /*  #2966b9;
    --COL_TEXT_REVERSE: #f8f8f8;  /* same as page background */
    /* colour tags to lable the different sections of the site - see here for the standard names https://en.wikipedia.org/wiki/Web_colors*/

    --COL_TOP_BAR_TEXT: white;

    --COL_TAG_INTRO: DarkOrange;
    --COL_TAG_FOSL: Green;
    --COL_TAG_OTHER: Saddlebrown;
    --COL_TAG_GB: Crimson;
    --COL_TAG_CANADA: Darkmagenta;
    --COL_TAG_WORLD: Darkseagreen;
    --COL_TAG_INFO: Gold;
    --COL_TAG_ADMIN: DodgerBlue;

    --COLOR_INVISIBLE: rgba(255, 255, 255, 0);

    --TAG_WIDTH_THIN: 8px;
    --TAG_WIDTH_MEDIUM: 12px;
    --TAG_WIDTH_THICK: 20px;

    --COL_BACKGROUND_FEATURE: seashell;
    /*floralwhite;*/
    /*   was:  #f0eae2; */

    /* menu colours */
    --COL_MEN_BACK: #f0f4fa;
    /*fallback #F0F4F4 */
    --COL_MEN_BACK_HOV: antiquewhite;

    /* fallback: antiquewhite */
    --COL_MEN_TEXT: rgb(16, 16, 16);
    --COL_MEN_TEXT_HEAVY: black;

    /* tabs and accordion headers */
    --COL_TAB_BACK: floralwhite;
    --COL_TAB_BACK_HOVER: #fde8be;
    /* make same as COL_TAB_SET */
    --COL_TAB_SET: #fde8be;
    --COL_TAB_SET_HOVER: #fcd993;
    --COL_TAB_CONTENT_BACK: floralwhite;
    --COL_INPUT_FIELD: floralwhite;
    /* same as above */
    /* fallback black */
    /* TODO define the margin-indents that vary with mobile rules using condition var() stuff up here in the root */
    /* ********************************************************************************************************** */
}

html {
    color: #213b3b;
    /* background: url(../pic/waves_back5.webp) no-repeat center fixed;
    background: url(../pic/waves_sydney_back_04.webp) no-repeat fixed;*/
    background-color: #3b3b43;
    background: url(../pic/peru_waves_fullbw.webp) no-repeat fixed;
    background-size: cover;
    background-position: top;

    color: var(--COL_TEXT);
    font-family: var(--FONT_TEXT);
    font-weight: var(--WEIGHT_TEXT);
    font-size: var(--SIZE_TEXT);

}

body {
    text-rendering: optimizeLegibility;
    line-height: 1.375em;
    /* quoted best practice  - go for 1.5 in mobile??*/
    margin: 0;
}

img {
    max-width: 100%;
    display: block;
}

img .img_inline {
    display: inline;
}

/* FLEX LAYOUT =============================================================*/

.whole_screen {
    /* the flex container representing the whole client part of the browser window */
    display: block;
    /*flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    position: relative; */
}

.whole_page {
    width: 100vw;
    max-width: var(--PAGE_WIDTH);
    margin: 0 auto;
    padding: 0;
    background-color: #f8f8f8;
    /* minimal instance of defaulting, just to make the pages half-way legible if variablesa are not supported */
    background-color: var(--COL_PAGE_BACK);

    position: relative;
    margin-bottom: 20px;
}

.whole_page_inner {
    display: inline-block;
    /* to prevent collapsing margins */
}

.page_content {
    /* where the actual content goes - text and photos.  Used on all pages.  
  There could be several of these sections on a page. Like strips of paper taped together */

    margin-left: 9%;
    margin-right: 8%;
    padding-bottom: 20px;
    margin-bottom: 0;
    display: block;
    box-sizing: border-box;
    clear: both;
    position: relative;
}

@media all and ((max-width: 900px) or (max-height:900px)) {
    .whole_page {
        margin-bottom: 0;
    }
}

@media all and (max-width: 500px) {
    .page_content {
        margin-bottom: 0;
        margin-left: 6px;
        margin-right: 6px;
    }
}

/* default <div class="para"> so we can apply it to a <div> to behave just like a para */

.para {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0;
    margin-inline-end: 0;

}

main,
footer,
header {
    width: 100%;
    display: block;
}

.headline_scrolling_panel {
    /* where the actual header section goes */
    margin: 0;
    width: 100%;
    background: url(../pic/tree_sky_03.webp);
    background-size: contain;
    background-repeat: repeat-x;
    position: relative;
    display: block;
}

.headline_scrolling_panel_logos {
    max-width: var(--PAGE_WIDTH);
    margin: 0 auto;
    padding: 0;
    height: 8vh;
    min-height: 50px;
}

@media all and (max-width: 800px) {
    .headline_scrolling_panel {
        background: url(../pic/tree_sky_03.webp) round;
        /* round: The background-image is repeated and squished or stretched to fill the space (no gaps) */
    }
}

.headline_the_ferryman_img {
    background: url(../pic/header_img_fm_03.png) no-repeat;
    background-position: top left;
    background-size: contain;
    background-repeat: no-repeat;
    width: 60%;
    height: 100%;
    float: left;
    margin-left: 12%;
}

.headline_logo_img {
    background: url(../pic/fm_logo_100w.png) no-repeat;
    background-position: top right;
    background-size: contain;
    background-repeat: no-repeat;
    width: 7%;
    height: 100%;
    float: right;
    margin-right: 12%;
}

.disappearing_the_ferryman_img {
    background: url(../pic/header_img_fm_03.png) no-repeat;
    background-position: top left;
    background-size: contain;
    background-repeat: no-repeat;
    width: 400px;
    height: 100%;
    display: inline-block;
}

.disappearing_logo_img {
    background: url(../pic/fm_logo_100w.png) no-repeat;
    background-position: top right;
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
}

@media all and (max-width: 700px) {
    .headline_the_ferryman_img {
        width: 82%;
        margin: 0;
    }

    .headline_logo_img {
        width: 12%;
        margin-right: 1%;
    }
}

#disappearing_the_ferryman,
#disappearing_logo,
#disappearing_ferryman_ca {
    position: absolute;
    display: none;
}

#disappearing_logo {
    /*	left: 40px;*/
    /*   left: calc((((100vw - 1024 / 2) - 65px) * 0.85);   fallback */
    left: calc((((100vw - var(--PAGE_WIDTH)) / 2) - 65px) * 0.85);
    width: 60px;
    height: 84px;
    top: 0;
}

#disappearing_the_ferryman {
    left: 10px;
    height: 40px;
    top: 2px;
}

#disappearing_ferryman_ca {
    right: 20px;
    height: 40px;
    font-size: 1.2rem
        /* 24px;*/
        font-family: var(--FONT_TEXT);
    top: 10px;
    color: #d28f00;
    letter-spacing: 2px;
    font-weight: var(--WEIGHT_LIGHT);
}

/* prevent these disappearing items as teh screen width gets less */

@media all and (max-width: 1250px) {
    .disappearing_inner {
        display: none;
    }
}

@media all and (max-width: 1650px) {
    .disappearing_outer {
        display: none;
    }
}

.space_after_footer {
    background: none;
    height: 20px;
}

/* for whenever we need to overlay something the same colour as the page background */

.background_colour {
    background-color: var(--COL_PAGE_BACK);
}

.small {
    font-size: var(--SIZE_REDUCED_75);
    line-height: normal;
}

.large {
    font-size: 1.25rem;
}

a:link,
a:visited {
    text-decoration: none;
    color: var(--COL_TEXT_LINK);
}

a:hover,
a:active {
    color: var(--COL_TEXT_HOVER);
    text-decoration: underline;
    /* z-index: 100; */
}

.clear_both {
    clear: both;
}

/* fix to prevent irregular line spacing when there are superscripts */

sup {
    font-size: 0.85em;
    vertical-align: super;
    line-height: 0;
}

.fixed_pitch_font {
    font-family: var(--FONT_FIXED);
}

/* handle all the header fallbacks here for browsers not supporting var()  */

/* must be all actual CSS values here, not var(--   ) */

h1,
h2,
h3,
h4,
h5,
h6,
.ferry_name_header,
.fm_all_name,
.ferry_name_termini,
.h1_sub,
.h2_sub,
.acc_sub {
    font-weight: bold;
    font-family: var(--FONT_HEADER);
    color: #666;
    font-size: 2rem;
}

h2 {
    font-size: 1.5rem;
}

h3,
h4,
h5,
h6,
.ferry_name_termini {
    font-size: 1.5rem;
}

.h1_sub,
.h2_sub,
.acc_sub {
    font-size: 0.6em;
}

/* ------------ end of fallback section - should all be overridden below */

.ferry_name_header,
.fm_all_name,
h1 {
    /* the top header on any page */
    font-family: var(--FONT_HEADER);
    font-size: var(--SIZE_HEADER_1);
    font-weight: var(--WEIGHT_HEADER_1);

    font-variant: normal;
    font-style: italic;
    /* letter-spacing: 1px; */
    color: var(--COL_HEADER);
    line-height: 1em;
    margin-top: 1.3em;
}

.fm_all_name {
    font-size: 1.4em;

    text-decoration: underline;
}

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

    .fm_all_name,
    .ferry_name_header,
    h1 {
        margin-top: 0.8em;
    }
}
@media all and (max-width: 500px) {

    .ferry_name_header,
    h1 {
        font-size: var(--SIZE_HEADER_2);
    }
}

.ferry_name_termini,
.h1_sub,
.h2_sub {
    font-size: var(--SIZE_HEADER_SUB);
    font-style: normal;
    color: var(--COL_HEADER_SUB);
    font-weight: var(--WEIGHT_HEADER_SUB);
    font-family: var(--FONT_HEADER_SUB);
    border-top: 2px solid var(--COL_HEADER_LINE);
    padding-top: 4px;
    letter-spacing: normal;
    display: block;
    line-height: 1.1em;
    /* so it can be used in a <span> inside an <h1> */
}

.fm_all_type {
    font-size: 1rem;
    font-style: normal;
    color: var(--COL_HEADER_SUB);
    font-weight: var(--WEIGHT_HEADER_SUB);
    font-family: var(--FONT_HEADER_SUB);
    padding-top: 4px;
    letter-spacing: normal;
    display: block;
    line-height: 1.1em;
}

h2 {
    font-family: var(--FONT_HEADER);
    font-size: var(--SIZE_HEADER_2);
    font-weight: var(--WEIGHT_HEADER_2);
    font-variant: normal;
    font-style: italic;
    letter-spacing: normal;
    color: var(--COL_HEADER);
    line-height: normal;
}

h3 {
    font-family: var(--FONT_HEADER_LESSER);
    font-weight: var(--WEIGHT_HEADER_3);
    font-size: var(--SIZE_HEADER_3);
    font-variant: normal;
    font-style: normal;
    margin-top: 30px;
    margin-bottom: 10px;
    letter-spacing: normal;
    color: var(--COL_HEADER);
    line-height: normal;
}

h4 {
    /* unlikely we need this */
    font-family: var(--FONT_HEADER_LESSER);
    font-weight: var(--WEIGHT_HEADER_4);
    font-size: var(--SIZE_HEADER_4);
    font-variant: normal;
    font-style: normal;
    margin-top: 22px;
    margin-bottom: 5px;
    color: var(--COL_HEADER);
    line-height: normal;
}

.h_emph {
    background-color: var(--COL_BACK_SUBTLE);
}

.arrow_leader::before {
    display: inline-block;
    content: "\25b6\A0";
    font-style: normal;
}

.tag_left_thin {
    border-left-width: var(--TAG_WIDTH_THIN);
    border-left-style: solid;
    padding-left: 6px;
}

.tag_left_medium {
    border-left-width: var(--TAG_WIDTH_MEDIUM);
    border-left-style: solid;
    padding-left: 8px;
}

.tag_left_thick {
    border-left-width: var(--TAG_WIDTH_THICK);
    border-left-style: solid;
    padding-left: 10px;
}

.native_name {
    padding-left: 20px;
    color: var(--COL_HEADER_SUB);
    font-size: var(--SIZE_BASE);
}

.nada {
    background-color: #ffffff;
}

.dropshadow {
    box-shadow: 3px 3px 14px -4px #111;
    /* h-off v-off blur spread colour */
}

.nowrap {
    white-space: nowrap;
}

/* ref:    http://www.hunlock.com/blogs/Attach_icons_to_anything_with_CSS 
Useful, but too powerful over the whole site
a[href $='.pdf'] {   
   padding-right: 18px;
   background: transparent url(icon_pdf.gif) no-repeat center right;
}
*/

.file_icon_link {
    padding-left: 20px;
    background: url(../pic/arr_grey_18.png) no-repeat;
    text-align: left;
}

.file_icon_pdf {
    padding-left: 20px;
    background: url(../pic/icon_pdf.png) no-repeat;
    text-align: left;
}

.file_icon_doc {
    padding-left: 20px;
    background: url(../pic/icon_doc.png) no-repeat;
    text-align: left;
}

.file_icon_xls {
    padding-left: 20px;
    background: url(../pic/icon_xls.png) no-repeat;
    text-align: left;
}

.file_icon_jpg {
    padding-left: 20px;
    background: url(../pic/icon_jpg.png) no-repeat;
    text-align: left;
}

.footer_content {
    padding: 0 0 0.2em 0;
    margin: 0;
    background-color: var(--COL_BANNER_2);
    font-size: 0.8rem;
    line-height: 0.8em;
    color: white;
    display: block;

    min-height: 1.6em;
    overflow-x: auto;
}

.foot_left,
.foot_right {
    padding: 3px;
    margin-top: 6px;
    margin-bottom: 0;
}

.foot_left {
    margin-left: 10px;
    margin-right: 6px;
    float: left;
}

.foot_right {
    margin-left: 6px;
    margin-right: 10px;
    float: right;
}

.footer_content a:link,
.footer_content a:visited {
    color: white;
}

.info_box_coord {
    font-size: 1rem;
}

.info_box_maplinks {
    font-size: 1rem;
    white-space: normal;
    /* due to trying to fix something */
}

.simple_coord {
    /* simple one-line coordinates/maps links */
    font-size: var(--SIZE_REDUCED_85);
}

.simple_coord_maplinks {}

/*  ovrrides as needed for the LBX classes defined in lbx_photo.css */
/* do NOT delete thinking they are all in kbx_photo.css 2024-06-25 */
/* ---------------------------------------------------------------- */

@media all and (max-width: 700px) {
    .lbx_photo_boxXX {
        margin-left: 0;
        margin-right: 0;
    }

    .lbx_photo_box img {
        box-shadow: none;
    }

    .lbx_photo_caption {
        background-color: var(--COL_BACK_CAPTION);
    }
}

.lbx_photo_border {
    border: solid 1px #333;
}

.lbx_photo_caption {
    padding-bottom: 2px;
    border-bottom: solid 1px var(--COL_TEXT);
}

.fosl_index_map .lbx_photo_box {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    max-width: 100%;
}

/* ----------------------------------------- */

/* icon image classes */

.icon_exlink,
.icon_pdf_link,
.icon_jpg_link {
    width: 16px;
    height: 16px;
    margin: 0 0.35em 0 0.25em;
    display: inline-block;
}

.icon_exlink {
    width: 14px;
    height: 14px;
    background: url(../pic/icon_exlink_14.png) no-repeat;
}

.icon_pdf_link {
    background: url(../pic/icon_pdf.png) no-repeat;
}

.icon_jpg_link {
    background: url(../pic/icon_jpg.png) no-repeat;
}

.fosl_index_map {
    margin: 0;
    box-sizing: border-box;
    width: 100%;
}

/* ============= these relate to "standard" LBX photos in pages ============= */
.box_left_margin,
.photo_left_margin,
.box_right_margin,
.photo_right_margin {
    box-sizing: border-box;
    max-width: 50%;
    margin-bottom: 0.8rem;
}

.box_left_margin,
.photo_left_margin {
    float: left;
    margin-left: -5%;
    margin-right: 0.8rem;
}

.box_right_margin,
.photo_right_margin {
    float: right;
    margin-right: -5%;
    margin-left: 0.8rem;
}

.photo_centre {
    /* to do properly  */
    margin: 0 auto;
}

.photo_centre_full {
    width: calc(100% + 10% - 2em);
    /* kludgy - twice the negative margins, less 2em (the default <figure> margin */
    margin-left: -5%;
    margin-right: -5%;
}

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

    .box_left_margin,
    .box_right_margin {
        margin-left: 0;
        margin-right: 0;
        max-width: none;
    }

    .photo_centre_full {
        width: calc(100% - 2em);
        /* kludgy - less 2em (the default <figure> margin */
        margin-left: 0;
        margin-right: 0;
    }
}

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

    .photo_left_margin,
    .photo_right_margin,
    .photo_centre,
    .photo_centre_full {
        margin-left: 0;
        margin-right: 0;
        max-width: 100%;
        float: none;
    }
}


.feature_box .photo_left_margin {
    margin-left: 0;
}

.feature_box .photo_right_margin {
    margin-right: 0;
}




/* ============ these are the next-previous buttons at the bottolm of he FOSL pages  ========= */

.nav_bot_prev_next {
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    flex-direction: row;
    margin: 10px;
}

.nav_item {
    white-space: nowrap;
    background-color: var(--COL_BACK_SUBTLE);
    color: #090;
    text-align: center;
    padding: 3px 15px 3px 15px;
    border-radius: 6px;
    border: thin solid var(--COL_FEATURE_BORDER);
    line-height: 110%;
    vertical-align: middle;
    margin: 3px;
    min-height: 30px;
}

.nav_item a:link,
.nav_item a:visited {
    color: #090;
    text-decoration: none;
}

.nav_item a:hover,
.nav_item a:active {
    color: #f26c4f;
    text-decoration: none;
}

.nav_next_up_down {
    width: 100%;
    font-weight: var(--WEIGHT_NORMAL);
    font-size: 0.9rem;
    display: block;
}

.nav_next_ferry {
    width: 100%;
    font-weight: var(--WEIGHT_BOLD);
    font-size: 1.1rem;
    display: block;
}

.nav_arrow {
    font-size: 4rem;
    font-weight: var(--WEIGHT_NORMAL);
    float: left;
    padding-left: 0;
    padding-right: 0;
    display: block;
}

.nav_next {
    float: left;
    display: block;
}

.nav_next_all {
    width: 100%;
    text-align: center;
    display: block;
}

.ferry_list_container,
.fosl_list_container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    margin-left: 12%;
    margin-right: 4%;
    position: relative;
}

.ferry_list_container {
    padding: 30px 0 20px 0;
    margin-left: 0;
    margin-right: 0;
}

.ferry_list_section,
.fosl_list_left_panel,
.fosl_list_right_panel {
    flex: 0 1 auto;
    justify-content: flex-start;
    line-height: normal;
    position: relative;
}

.ferry_list_section {
    width: 100%;
}

.fosl_list_left_panel {
    width: 48%;
}

.fosl_list_right_panel {
    width: 52%;
    max-width: 450px;
    font-size: var(--SIZE_TEXT_SMALLER);
}

.fosl_list_regions .fosl_list_left_panel {
    width: 38%;
}

.fosl_list_regions .fosl_list_right_panel {
    width: 62%;
    max-width: none;
}

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

    .ferry_list_container,
    .fosl_list_container {
        margin-left: 2%;
        margin-right: 2%;
    }

    .fosl_list_regions .fosl_list_left_panel,
    .fosl_list_left_panel {
        width: 100%;
    }

    .fosl_list_regions .fosl_list_right_panel,
    .fosl_list_right_panel {
        width: 100%;
    }
}

.ferry_list_container h2,
.fosl_list_container h2 {
    width: 100%;
    margin: 0 0 10px -6px;
}

.ferry_list_container h2 {
    border-bottom: 3px var(--COL_FEATURE_BORDER) solid;
}

.ferry_link {
    display: block;
    padding: 5px 10px 5px 10px;
    margin: 3px 0 3px 0;
    border-left-width: var(--TAG_WIDTH_THIN);
    border-left-style: solid;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
}

.PAGE_other_list .ferry_link,
.PAGE_welcome .ferry_list_section {
    margin-left: 6%;
    width: 90%;
}

@media all and (max-width: 700px) {
    .ferry_link {
        margin-left: 0;
    }

    .PAGE_other_list .ferry_link,
    .PAGE_welcome .ferry_list_section {
        margin-left: 2%;
        width: 97%;
    }
}

.fosl_list_left_panel a:link,
.fosl_list_left_panel a:visited,
.ferry_list_section a:link,
.ferry_list_section a:visited {
    text-decoration: none;
    color: var(--COL_TEXT);
}

.fosl_list_left_panel a:hover,
.fosl_list_left_panel a:active,
.ferry_list_section a:hover,
.ferry_list_section a:active {
    text-decoration: none;
    color: var(--COL_TEXT_HOVER);
    background-color: #e0e0e0;
}

/* seems I need all 4 of these below to handle things properly!  */

a:link .ferry_link,
a:visited .ferry_link {
    text-decoration: none;
    color: var(--COL_MEN_TEXT);
    background: linear-gradient(-175deg,
            rgba(122, 153, 198, 0) 75%,
            rgba(122, 153, 198, 0.35) 99%,
            rgba(122, 153, 198, 0.5));
}

a:hover .ferry_link,
a:active .ferry_link {
    text-decoration: none;
    color: var(--COL_MEN_TEXT);
    background-color: var(--COL_MEN_BACK_HOV);
    background-image: none;
}

.ind_name,
a:hover .ind_name {
    text-decoration: none;
}

/* we show the arrow in the link ALWAYS for mobile, ON HOVER for desktop */

a:hover .ind_name::after {
    display: inline-block;
    content: url("../pic/rt_arr_blackish_16h.png");
    padding-left: 0.5em;
    opacity: 0.5;

    /*  content: '\25b6';
    padding-left: 0.5em;
    font-size: 0.85em;
    transform: scale(1.4, 1); 
     font-family: "Segoe UI Symbol"; */
    /* workaround to prevent this showing in MS Edge as a triangle in a blue box */
}

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

    a .ferry_link_region::after,
    a .ind_name::after {
        display: inline-block;
        content: url("../pic/rt_arr_blackish_16h.png");
        padding-left: 0.5em;
        opacity: 0.5;
    }
}

.fosl_list_regions a:hover .ind_name::after {
    transform: rotate(0.25turn) translateX(-4px);
}

/* seems I need all 4 of these ABOVE to handle things properly!  */

.fosl_ferry_word {
    font-size: 0.8rem;
    font-style: italic;
    padding-bottom: 0;
    width: 100%;

    color: var(--COL_TEXT_LIGHT);
}

/* the list of ferries */

.ind_name_no_arrow,
.ind_name {
    font-size: var(--SIZE_HEADER_3);
    font-weight: var(--WEIGHT_HEADER_3);
    padding-left: 3px;
}

.ind_ends {
    font-weight: var(--WEIGHT_NORMAL);
    font-size: var(--SIZE_TEXT);
    padding-left: 3px;
}

.ind_note {
    font-weight: var(--WEIGHT_BOLD);
    font-size: var(--SIZE_REDUCED_85);
    padding-left: 3px;
}

/* disables the link and dims it */

.not_active {
    pointer-events: none;
    /*  cursor: not-allowed; can't get it to work quite how I want */
    opacity: 0.6;
}

.is__active {
    /* placebo opposite - place holder */
}

.isX_active {
    /* link is active, but leads to an undeveloped page */
    opacity: 0.6;
}

.nav_main ul ul li a:link,
.nav_main ul ul li a:visited {
    display: block;
    color: #ffffff;
    text-decoration: none;
    background: #6b0000;
    padding: 6px 4px 4px 6px;
    opacity: 0.95;
    filter: alpha(opacity=95);
}

.side_by_side_pic {
    margin-left: 0;
    margin-right: 0;
}

.side_by_side_pic h3 {
    border-bottom: medium #999 solid;
    color: #069;
    letter-spacing: 5px;
}

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

/* accordion as ported from flora_fauna 
   ==================================================== */

/* the accordion feature  */

.accordionWrapper {
    margin: 0;
    padding: 0;
    width: 100%;
    float: left;
}

.accordionItem {
    float: left;
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
}

.accordionItemHeading {
    /* default text is pretty much h2 */
    font-family: var(--FONT_HEADER);
    font-size: var(--SIZE_HEADER_3);
    font-weight: var(--WEIGHT_HEADER_3);
    font-style: italic;
    color: var(--COL_HEADER);

    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
    /* letter-spacing: 2px; */
    line-height: normal;
    margin-top: 12px;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 2px;
    padding: 4px 10px 4px 10px;
}

.close .accordionItemHeading {
    border-bottom: 1px solid var(--COL_BORDER_SUBTLE);
    background-color: var(--COL_TAB_BACK);
}

.open .accordionItemHeading {
    /*  background: var(--COL_BACK_SUBTLE);*/
    background-color: var(--COL_TAB_SET);
    /* color:var(--COL_TEXT_REVERSE);*/
}

.close .accordionItemHeading::after,
.open .accordionItemHeading::after {
    font-weight: bold;
    font-style: normal;
    float: right;
    font-size: 1.2rem;
    margin-top: -2px;
    vertical-align: top;
}

.close .accordionItemHeading::after {
    content: "+";
}

.open .accordionItemHeading::after {
    content: "\2013";
    /* en dash */
}

.acc_sub {
    font-style: normal;
    font-weight: normal;
    color: var(--COL_HEADER_SUB);
    font-size: 0.8r5em;
    font-family: var(--FONT_TEXT);
    line-height: 10px;
    /*border-top: 2px solid var(--COL_BORDER_SUBTLE);*/
}

.open .accordionItemHeading .acc_sub {
    /*  color: var(--COL_BORDER_SUBTLE);*/
}

/*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 */

.close .accordionItemHeading:hover {
    color: #8f3f3a;
    background-color: var(--COL_TAB_BACK_HOVER);
    text-decoration: none;
}

.open .accordionItemHeading:hover {
    background-color: var(--COL_TAB_SET_HOVER);
}

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

.open .accordionItemContent {
    padding: 18px 15px 0 10px;
    margin-top: -5px;
    display: block;
    transform: scaleY(1);
    transform-origin: top;
    transition: transform 0.3s ease;
    border: solid grey 1px;
    border-top: none;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    background-color: var(--COL_TAB_CONTENT_BACK);
}

.accordionItemContent .photo_right_margin,
.accordionItemContent .photo_left_margin {
    background-color: #f8f8f8;
    background: none;
}

.accordionItemContent .lbx_photo_caption {
    background: var(--COL_PAGE_BACK);
}

/*  ========================  end of accordion  ============ */

.working_on_it {
    text-align: center;
    border: none;
}

/* comments, notes to self that can easily be turned on and off */

.self_note {
    /* color: red; */
    display: none;
}

/* =============  the top edge nav bar =============  */

.nav_top {
    height: 40px;
    z-index: 100;
    width: 100%;
    margin: 0 auto;
    max-width: var(--PAGE_WIDTH);
    padding: 4px 0 0 0;
    display: flex;
    /* establish flex container */
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
}

@media all and (max-width: 800px) {
    .nav_top {
        font-size: 1rem;
    }
}

.nav_bottom_button,
.nav_top_button {
    font-size: 0.9rem;
    letter-spacing: 1px;
    display: inline-block;
    color: var(--COL_TOP_BAR_TEXT);
    padding: 0 5px 0 5px;
    position: relative;
    height: 28px;
    box-sizing: border-box;
    /* neg margins may be needed to cope with automatic inter-char spacing with inline-block */
    background-color: rgba(255, 255, 255, 0);
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 6px;
}

.nav_bottom_button {
    float: left;
    margin: 2px 0 -4px 4px;
}

@media (pointer: coarse) {

    .nav_bottom_button,
    .nav_top_button {
        /* the intrinsic spacing of inline elements is 4px?  We need a spacing of >= 8px between these buttons to satisfy tappable rules so use a margin of >= 4px  */
        margin-right: 5px;
    }
}

.nav_bottom_button a,
.nav_top_button a {
    color: var(--COL_TOP_BAR_TEXT);
    text-decoration: none;
}

.nav_bottom_button:link,
.nav_bottom_button:visited,
.nav_top_button:link,
.nav_top_button:visited {
    color: var(--COL_TOP_BAR_TEXT);
    text-decoration: none;
    background-color: rgba(255, 255, 255, 0);
    border-color: rgba(0, 0, 0, 0);
}

.nav_bottom_button:hover,
.nav_bottom_button:active,
.nav_top_button:hover,
.nav_top_button:active {
    color: var(--COL_TOP_BAR_TEXT);
    text-decoration: none;
    background-color: #101d81;
    border-color: #fff;
}

.nav_top_button #fm_menu_button,
.nav_top_button #fm_menu_button {
    border-color: #fff;
    margin-left: 4px;
}

.button_top_img {
    width: 27px;
    height: 24px;
    background: url(../pic/icon_to_top_24h.png) no-repeat center;
    vertical-align: text-bottom;
    display: inline-block;
}

.show_all_ferries .button_top_img {
    background-color: #d4d4d4;
    float: right;
    position: relative;
    right: 2px;
    bottom: 20px;
    z-index: 100;
}

.show_all_ferries .button_top_img:hover {
    background-color: #101d81;
}

.button_home_img {
    width: 30px;
    height: 24px;
    background: url(../pic/home_icon_24h.png) no-repeat center;
    vertical-align: text-bottom;
    display: inline-block;
}

.button_contact_img {
    width: 30px;
    height: 24px;
    background: url(../pic/icon_comments_24h.png) no-repeat center;
    vertical-align: text-bottom;
    display: inline-block;
}

.button_share_img {
    width: 28px;
    height: 24px;
    background: url(../pic/share_circle_24.png) no-repeat center;
    vertical-align: text-bottom;
    display: inline-block;
}

.nav_bottom_button {
    float: left;
    margin: 2px 0 -4px 4px;
}

/* reused header button in footer */

.nav_top_button:hover,
.nav_top_button:active {
    width: auto;
}

.full_width_sticky_bar {
    position: -webkit-sticky;
    /* Safari */
    position: sticky;
    top: 0;
    z-index: 100;

    /*  margin-left: calc(50% - calc(50vw - 10px));  https://css-tricks.com/full-width-containers-limited-width-parents/
  margin-right: calc(50% - calc(50vw - 10px)); */

    background-color: var(--COL_BANNER_2_STICKY);
    width: 100%;
}

.test_stick {
    position: sticky;
    top: 0;
    background-color: var(--COL_BANNER_2);
    width: 100%;
    color: yellow;
}

/* links page */

.titbits_link_item {
    margin: 0 0 4px 0;
    padding-bottom: 0;
    padding-top: 30px;
    border-top: #999 thin solid;
}

.titbits_link_link {
    font-family: var(--FONT_HEADER_LESSER);
    font-weight: var(--WEIGHT_HEADER_4);
    font-size: var(--SIZE_HEADER_4);
    color: var(--COL_TEXT_LINK);
    margin: 0;
}

.titbits_link_text {
    margin: -8px 0 -10px 0;
}

.titbits_link_item a:link,
.titbits_link_item a:visited {
    text-decoration: none;
    color: var(--COL_TEXT_LINK);
}

.titbits_link_item a:hover,
.titbits_link_item a:active {
    text-decoration: underline;
    color: var(--COL_TEXT_HOVER);
}

.boat_info_block {}

.boat_info_name {
    font-weight: var(--WEIGHT_BOLD);
}

.see_website {
    font-size: var(--SIZE_REDUCED_85);
    font-style: italic;
}

.see_website::after {
    content: "See website for full and up-to-date details";
}

.inline_header {
    font-weight: var(--WEIGHT_BOLD);
}

.road_sign_l {
    float: left;
    margin: 0 12px 4px -80px;
    padding: 6px;
    border: 2px solid #666;
    background: #fff;
}

@media all and (max-width: 500px) {
    .road_sign_l {
        float: none;
        margin-left: 0;
        border: none;
    }
}

.road_sign_r {
    float: right;
    margin: 12px;
}

/* flex layout of a selection of different shaped photos */

.bulk_photo_container {
    /*  background-color: #6d6d6d; some potential to have a ark background for these but needs more work 2022-03-19 */
}

.info_container {
    align-items: flex-start;
    justify-content: space-evenly;
}

.feature_box {
    border: var(--COL_FEATURE_BORDER) thin solid;

}

.feature_box,
.feature {
    font-family: var(--FONT_TEXT_FEATURE);
    font-size: var(--SIZE_REDUCED_85);
    line-height: normal;
    padding: 20px;
    background-color: var(--COL_BACKGROUND_FEATURE);
}

.feature_box_full_width {
    border-top: var(--COL_FEATURE_BORDER) thin solid;
    border-bottom: var(--COL_FEATURE_BORDER) thin solid;
    background-color: var(--COL_BACKGROUND_FEATURE);
}

.feature_box h3 {
    font-size: var(--SIZE_HEADER_FEATURE);
    margin-top: 0;
}

.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip .tooltiptext {
    visibility: hidden;
    max-width: 300px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    background-color: #666;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 150%;
    left: 50%;
    margin-left: -60px;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}

/* mobile/desktop and tap/click  - default to desktop/mouse because I want to be sure there is a default */

.can_tap {
    display: none;
}

.can_click {
    display: inline;
}

@media (pointer: coarse) {
    .can_tap {
        display: inline;
    }

    .can_click {
        display: none;
    }
}

@media screen and ((max-width: 700px) or (max-height:700px)) {
    .kill_for_mob {
        display: none;
    }
}

@media screen and (max-width: 700px) {
    .kill_for_mob_width {
        display: none;
    }
}

/* ********   the dropdwon menu   ********** */

#fm_menu_button {
    font-size: 1rem;
    cursor: pointer;
    visibility: visible;
}

.fm_menu {
    visibility: hidden;
    color: var(--COL_MEN_TEXT);
    box-sizing: border-box;
    font-weight: var(--WEIGHT_TEXT_STRONG);
    text-decoration: none;
    font-size: 1.1rem;
    font-family: var(--FONT_TEXT);
    border-color: var(--COL_MEN_TEXT);
    border: 2px solid;
    border-left: none;
}

.fm_menu ul {
    padding: 0;
    margin: 0 0 0 22px;
    width: 350px;
    overflow-y: auto;
    max-height: 80vh;
    /* reasonabable compromise based on viewport height */
    background-color: var(--COL_MEN_BACK);
    position: absolute;
    list-style-type: none;
    z-index: 200;
}

.fm_menu li {
    padding-left: 6px;
    line-height: 35px;
    margin: 0;
    border-bottom-color: var(--COL_MEN_TEXT_HEAVY);
    border-bottom: 1px black dotted;
    /* these to to prevent wrapping - in the event menu text gets marginally long and the hover causes a wrap */
    white-space: nowrap;
    overflow: hidden;
    border-left-width: var(--TAG_WIDTH_THIN);
    border-left-style: solid;
}

.fm_menu li.fm_men_heavy_border {
    border-bottom: 3px grey solid;
}

.fm_menu li.fm_men_no_border {
    border-bottom: none;
    padding-bottom: 1px;
}

.fm_menu li a:active,
.fm_menu li a:hover,
.fm_menu li a:link,
.fm_menu li a:visited {
    color: var(--COL_MEN_TEXT);
    text-decoration: none;
    width: 100%;
    display: inline-block;
}

.fm_menu li:hover a::after {
    display: inline-block;
    content: url("../pic/rt_arr_blackish_16h.png");
    padding-left: 0.5em;
    opacity: 0.5;
}

/* needs to position here to override some of those above */

.fm_menu li:hover,
.fm_menu li:hover a {
    background-color: var(--COL_MEN_BACK_HOV);
    color: black;
    font-weight: var(--WEIGHT_TEXT_STRONG);
}

@media screen and (max-width: 500px) {
    .fm_menu ul {
        margin-left: 3px;
    }
}

/* this to cope with exteme narrow screen down to 320 px */

@media screen and (max-width: 375px) {
    .fm_menu ul {
        margin-left: 0;
        width: 300px;
    }

    .fm_menu li {
        font-size: 0.9rem;
        line-height: 30px;
    }
}

a:hover .tag_intro .ind_name::after,
.fm_menu li.tag_intro:hover a::after {
    color: var(--COL_TAG_INTRO);
}

a:hover .tag_fosl .ind_name::after,
.fm_menu li.tag_fosl:hover a::after {
    color: var(--COL_TAG_FOSL);
}

a:hover .tag_other .ind_name::after,
.fm_menu li.tag_other:hover a::after {
    color: var(--COL_TAG_OTHER);
}

a:hover .tag_gb .ind_name::after,
.fm_menu li.tag_gb:hover a::after {
    color: var(--COL_TAG_GB);
}

a:hover .tag_canada_fosl .ind_name::after,
a:hover .tag_canada .ind_name::after,
.fm_menu li.tag_canada:hover a::after {
    color: var(--COL_TAG_CANADA);
}

a:hover .tag_world .ind_name::after,
.fm_menu li.tag_world:hover a::after {
    color: var(--COL_TAG_WORLD);
}

a:hover .tag_info .ind_name::after,
.fm_menu li.tag_info:hover a::after {
    color: #c9ab0c;
    /* color: var(--COL_TAG_INFO); Gold - local fix to make sure the arrow shows*/
}

a:hover .tag_admin .ind_name::after,
.fm_menu li.tag_admin:hover a::after {
    color: var(--COL_TAG_ADMIN);
}

/* end of dropdown menu */

.semi_silent {
    color: var(--COL_TEXT_LIGHT);
    display: inline-block;
    font-size: 0.9rem;
}

.fm_index {
    width: 80%;
    max-width: 700px;
    margin: 0 auto;
    margin-bottom: 1px;
    margin-top: 10px;
    padding-bottom: 4px;
    display: block;
}

@media all and (max-width: 700px) {
    .fm_index {
        width: 100%;
    }
}

.ind_let_list {
    font-weight: var(--WEIGHT_NORMAL);
    font-size: 1.2rem;
    color: var(--COL_HEADER_SUB);
    position: -webkit-sticky;
    position: sticky;
    top: 40px;
    z-index: 2;
    background-color: var(--COL_BACK_SUBTLE_TRANS);
    padding: 6px 0 6px 0;
    width: 100%;
    text-align: center;
    border-top: var(--COL_FEATURE_BORDER) thin solid;
    border-bottom: var(--COL_FEATURE_BORDER) thin solid;
    word-break: break-all;
}

.ind_let_list a {
    padding-left: 7px;
    padding-right: 7px;
}

@media (pointer: coarse) {
    .ind_let_list {
        font-size: 1.1rem;
    }
}

.ind_let_list a:link,
.ind_let_list a:visited {
    text-decoration: none;
    color: var(--COL_HEADER);
    font-weight: var(--WEIGHT_BOLD);
}

.ind_let_list a:hover,
.ind_let_list a:active {
    text-decoration: none;
    color: var(--COL_TEXT_HOVER);
    font-weight: var(--WEIGHT_BOLD);
}

.ind_letter {
    color: var (_COL_TEXT);
    /*var(--COL_HEADER);*/
    font-weight: var(--WEIGHT_BOLD);
    font-size: 1.4rem;
    padding: 2px 0 2px 0;
    background-color: var(--COL_TAG_INFO);
    width: 100%;
    text-align: center;
    margin-bottom: 0.5em;
}

/* indent plus padding to make hanging second line to look OK in mobile */

.ind_item,
.ind_item .semi_silent {
    text-indent: -20px;
    padding-left: 20px;
}

.ind_item {
    line-height: 0.8em;
    margin-bottom: 0.5em;
}

.ind_item a:link,
.ind_item a:visited {
    text-decoration: none;
    color: var(--COL_TEXT);
}

.ind_item a:hover .semi_silent,
.ind_item a:active .semi_silent,
.ind_item a:hover,
.ind_item a:active {
    text-decoration: underline;
    color: var(--COL_TEXT_HOVER);
}

/* these two together needed to draw a transparent background image on bottom right of the page */

.page_back {
    position: relative;
    top: 0;
    left: 0;
}

.page_back_img {
    opacity: 0.1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
    filter: alpha(opacity=10);
    margin-bottom: 0;
    position: absolute;
    right: 0;
    bottom: 0;
    pointer-events: none;
    /* experimental - CSS4 - to allow clicks through the image Chrome, FF, Safari OK - IE does not work*/
}

.share_info {
    float: left;
}

.share_button1 {
    float: right;
}

/* intended to show "the Ferryman" in a distinctive and consistent style */

.the_fm {
    font-style: italic;
    font-weight: var(--WEIGHT_TEXT_STRONG);
}

/* standard buttons in body of page */

.fm_button {
    font-size: 1rem;
    font-family: var(--FONT_TEXT);
    font-weight: normal;
    border-radius: 8px;
    padding: 0 6px 0 6px;
    margin: 0;
    display: inline-block;
    cursor: pointer;
    border: 1px solid var(--COL_TEXT_LIGHT);
    color: var(--COL_TEXT);
    background-color: var(--COL_TAB_BACK);
    transition-duration: 0.25s;
    text-decoration: none;
}

.fm_button:active,
.fm_button:hover {
    border: 1px solid var(--COL_FEATURE_BORDER);
    color: var(--COL_TEXT);
    background-color: var(--COL_TAB_BACK_HOVER);
    box-shadow: 4px 4px 10px -1px #999;
}

.open_all_button {
    font-size: 0.8r5em;
    font-weight: normal;
}

.contact_button {
    font-size: 1.3rem;
    font-weight: bold;
    /*clear:both; */
    float: right;
    /* width:304px;*/
    margin-top: 18px;
    padding: 12px 20px 12px 20px;
}

.show_all_button {
    font-size: 1.2rem;
    font-weight: normal;
    margin-top: 12px;
    padding: 2px 10px 2px 10px;
}

.show_all_button_selected,
.show_all_button_selected:active,
.show_all_button_selected:hover {
    background: none;
    outline: none;
    border: none;
    font-weight: bold;
    cursor: default;
    color: var(--COL_TEXT);
    box-shadow: none;
    border-left: 12px solid;
    border-right: 12px solid;
    border-radius: 0;
    border-bottom: grey 1px solid;
}

/* a simple box arrown a character to make it look like a key */

.nav_top_hamburger_button,
.key_box {
    border: 1px solid var(--COL_FEATURE_BORDER);
    padding: 0 3px 0 3px;
    border-radius: 6px;
    display: inline-block;
    background-color: rgba(255, 255, 255, 0.5);
    font-weight: bold;
}

.nav_top_hamburger_button {
    background-color: rgba(255, 255, 255, 0);
    color: white;
    margin: 1px;
}

.nav_top_hamburger_button:hover {
    border: 1px solid var(--COL_TEXT);
    border-color: white;
    background-color: rgba(255, 255, 255, 0.2);
    margin: 1px;
}

.rotate90 {
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.rotate180 {
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

.in_quotes {
    font-style: italic;
    quotes: "\201C""\201D";
    /* regular 66 and 99 quotes  */
    /* quotes: '\275D' '\275E';   extra heavy 66 and 99 quotes */
}

.in_quotes::before {
    content: open-quote;
    padding-right: 2px;
}

.in_quotes::after {
    content: close-quote;
    padding-left: 2px;
}

.waiting_to_doc {
    width: auto;
    font-size: 0.9rem;
    background-color: var(--COL_BACK_SUBTLE);
    border: solid 1px var(--COL_FEATURE_BORDER);
    padding: 10px 40px 10px 40px;
    margin-top: 50px;
}

/* new em dash approach assumes &ndash; is in the <span... and just expands and spaces it */

.emdash {
    display: inline-block;
    padding: 0 0.25em 0 0.25em;
    transform: scale(0.9, 1);
}

/* because the padding-indent construct in ind_item messes with the display:inline-block */

.ind_item .emdash {
    display: inline;
}

/* a standardised double ended arrow representing to and from  - replaced by image method
.tofrom::after{          
  content: '\25C0  \25b6'; 
  padding: 0 0.35em 0 0.35em;
  color: #AAA;
}*/

.to_from {
    margin: 0 0.35em 0 0.35em;
    width: 50px;
    height: 12px;
    display: inline-block;
    background: url(../pic/to_from_icon_12h.png) no-repeat;
}

/* standardised units - MY standards! */

.unit_am::after {
    content: "am";
    padding-left: 0.2em;
}

.unit_pm::after {
    content: "pm";
    padding-left: 0.2em;
}

.unit_min::after {
    content: "min.";
    padding-left: 0.2em;
}

.unit_ft::after {
    content: "ft";
    padding-left: 0.2em;
}

.unit_m::after {
    content: "m";
    padding-left: 0.2em;
}

.unit_km::after {
    content: "km";
    padding-left: 0.2em;
}

.unit_miles::after {
    content: "mi";
    padding-left: 0.2em;
}

.unit_yds::after {
    content: "yds";
    padding-left: 0.2em;
}

.unit_nm::after {
    content: "nm";
    padding-left: 0.2em;
}

.unit_kts::after {
    content: "kts";
    padding-left: 0.2em;
}

.unit_degC::after {
    content: "\B0\43";
    padding-left: 0.1em;
}

.unit_gm::after {
    content: "gm";
    padding-left: 0.2em;
}

.unit_kg::after {
    content: "kg";
    padding-left: 0.2em;
}

.unit_knot::after {
    content: "knots";
    padding-left: 0.2em;
}

.unit_acre::after {
    content: "acres";
    padding-left: 0.2em;
}

.unit_hr::after {
    content: "hr";
    padding-left: 0.2em;
}

.unit_hrs::after {
    content: "hrs";
    padding-left: 0.2em;
}

.ind_brack {
    font-size: 0.8rem;
    padding-left: 0.1em;
    font-style: italic;
}

.ind_brack::before {
    /* content: "(";*/
    content: " - ";
}

.ind_brack::after {
    //  content: ")";
}

.asterisk::after {
    content: "*";
    font-size: 1.5em;
    color: rgba(175, 114, 94, 0.87);
}

/* used in sitemap */

.map_folder {
    font-family: var(--FONT_FIXED);
    font-size: var(--SIZE_REDUCED_85);
    margin-top: 12px;
}

.map_page {
    color: var(--COL_TEXT);
    font-family: var(--FONT_TEXT);
    font-weight: var(--WEIGHT_NORMAL);
    font-size: 1rem;
}

li.map_folder {
    list-style-image: url("../pic/folder_icon_16.png");
    border-bottom: solid 1px silver;
}

li.map_page {
    list-style-image: url("../pic/file_icon_16.png");
    margin-left: 24px;
}

li.map_folder_blank {
    list-style-type: none;
    margin-left: -24px;
    margin-top: -8px;
}

.word_flag_index {
    font-size: var(--SIZE_REDUCED_65);
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    padding: 5px 4px 2px 4px;
    width: auto;
    height: auto;
    line-height: normal;
    background-color: dimgrey;
}


.flag_code {
    font-weight: bold;
    display: block;
    text-align: center;
    color:white;
}


.word_flag_index a {
    padding: 0;
}
.word_flag_index a:active,
.word_flag_index a:hover {
    background: black;
    }



.word_flag_index img {
    margin: 0;
}

.flag_base {
    background-position: top right;
    background-size: auto 100%;
    background-repeat: no-repeat;
    /* border:1px solid #888;*/
    display: inline-block;
}

.word_flag_index .flag_base {
    background-position: top right;
}

.ferry_list_container h2 .flag_base {
    background-position: top left;
}

.fosl_logo_intext {
    background: url("../pic/fosl_logo_24h.png");
    width: 93px;
    height: 24px;
    display: inline-block;
    margin-left: 12px;
    margin-bottom: -4px;
}

/* these are for the Ferries of the ... sublogo at the top right corner for selected FOSL pages only */

#page_sub_logo_bar {
    position: absolute;
    top: 8px;
    right: 12px;
    display: none;
}

.page_sub_logo_fosl {
    width: 140px;
    height: 48px;
    background: url(../pic/fosl_logo_60h.png) no-repeat;
    background-size: contain;
    padding: 0;
    display: inline-block;
}

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

    #page_sub_logo_bar,
    .page_sub_logo_fosl {
        display: none;
    }

    /* the old was was to change to a single line of text 2024-06-25 */
    #page_sub_logo_barXXXX {
        min-height: 12px;
        width: 100%;
        text-align: center;
        margin: 8px 0 12px 0;
        position: relative;
        top: 8px;
        left: 0;
    }

    .page_sub_logo_foslXXXX {
        background: url(../pic/fosl_logo_mob_48h.png) no-repeat;
        background-size: contain;
        /* seems the background-size has to be repeated after a different background */
        width: 95%;
        height: 30px;
    }
}

.long_page {}

.long_page h2 {
    border-bottom: 2px solid silver;
    border-left: var(--TAG_WIDTH_THICK) solid;
    border-left-color: var(--COL_TAG_WORLD);
    /* should make more generic */
    padding-left: 15px;
}

.long_page_break {
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    background-color: #f4f4f4;
    height: 10px;
    margin-bottom: 60px;
    margin-top: -5px;
    clear: both;
}

.sub_note {
    font-size: var(--SIZE_REDUCED_85);
    line-height: normal;
}

.location_icon_coord,
.location_icon_map {
    height: 20px;
    margin-right: 8px;
    display: inline-block;
}

.location_icon_coord {
    width: 20px;
    background: url(../pic/fm_icon_coord_24h.png) no-repeat center;
    background-size: contain;
}

.location_icon_map {
    width: 35px;
    background: url(../pic/fm_icon_map_24h.png) no-repeat center;
    background-size: contain;
}

.fm_form_input {
    width: 100%;
    padding: 6px;
    font-size: 1rem;
    border: 1px solid var(--COL_INPUT_BORDER);
    background-color: var(--COL_INPUT_FIELD);
    box-sizing: border-box;
    font-family: var(--FONT_TEXT);
}

.error_box {
    border: 2px solid red;
    padding: 5px;
    font-size: var(--SIZE_REDUCED_85);
    line-height: normal;
}

/* Change log tabs and tables sytem */

.k_tabs_block {
    display: none;
}

.k_tabs_block.k_tabs_open {
    display: block;
}

.k_tabs_tab {
    outline: none;
    border: 1px var(--COL_TEXT_LIGHT) solid;
    padding: 1px 8px 1px 8px;
    margin: 0;
    float: left;
    cursor: pointer;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    background-color: var(--COL_TAB_BACK);
    color: var(--COL_TEXT);
}

.k_tabs_tab:active,
.k_tabs_tab:hover {
    background-color: var(--COL_TAB_BACK_HOVER);
    border-top-color: var(--COL_TEXT);
    border-left-color: var(--COL_TEXT);
    border-right-color: var(--COL_TEXT);
}

.k_tabs_tab.k_tabs_open {
    font-weight: bold;
    padding-top: 4px;
    padding-bottom: 4px;
    margin-top: -6px;
    background-color: var(--COL_TAB_SET);
    font-size: 1.1rem;
    border-top-color: var(--COL_TEXT);
    border-left-color: var(--COL_TEXT);
    border-right-color: var(--COL_TEXT);
    color: var(--COL_TEXT);
    border-bottom-color: var(--COL_TAB_SET);
    position: relative;
    top: 1px;
}

.k_tabs_tab.k_tabs_open:active,
.k_tabs_tab.k_tabs_open:hover {
    background-color: var(--COL_TAB_SET_HOVER);
}

@media all and (max-width: 700px) {
    .k_tabs_tab {
        padding: 1px 3px 1px 3px;
        font-size: var(--SIZE_REDUCED_85);
    }

    .k_tabs_tab.k_tabs_open {
        padding-bottom: 4px;
        font-size: 0.95rem;
        margin-top: -10px;
    }
}

.history_tabs_section {
    width: 100%;
}

.history_table table {
    font-size: 0.9rem;
    border-collapse: collapse;
    border: var(--COL_FEATURE_BORDER) solid thin;
    width: 100%;
    margin: 20px 0 20px 0;
    background-color: var(--COL_TAB_CONTENT_BACK);
}

.history_table td {
    padding: 2px 4px 2px 4px;
    border: var(--COL_FEATURE_BORDER) solid thin;
    vertical-align: top;
}

.history_table td.date {
    width: 120px;
}

@media all and (max-width: 700px) {
    .history_table td.date {
        width: 85px;
    }

    .history_table table {
        font-size: var(--SIZE_REDUCED_85);
        line-height: normal;
    }
}

.history_table div::before {
    content: "\2022";
    padding-right: 0.4rem;
}

/* END - Change log tabs and tables sytem */

/* share popup box */

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

#popup_box {
    z-index: 1000;
    display: none;
    left: 55vw;
    position: absolute;
    top: 5vh;
    border: 2px solid black;
    /*var(--COL_FEATURE_BORDER);*/
    border-radius: 8px;
    background-color: #fffff8;
    height: auto;
    box-shadow: 4px 4px 10px -1px #333;
    width: 300px;
    max-width: 85vw;
}

#popup_box h1 {
    font-size: var(--SIZE_HEADER_3);
    font-weight: var(--WEIGHT_BOLD);
    margin: 0 auto;
    color: var(--COL_PAGE_BACK);
    padding: 6px;
    text-align: center;
    background-color: var(--COL_HEADER);

    border: none;
    border-bottom: 2px solid black;
}

@media all and (max-width: 700px) {
    #popup_box {
        left: 5vw;
    }
}

#popup_msg {
    padding: 8px;
    text-align: left;
    color: var(--COL_TEXT);
}

#popup_button {
    margin: -6px 12px 12px 12px;
    float: right;
}

.popup_header {
    font-size: 1rem;
    font-weight: 700;
}

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

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

.show_link {
    /* font-family: var(--FONT_FIXED);*/
    font-size: 0.8rem;
    word-wrap: break-word;
    line-height: 15px;
    border-bottom: 1px solid grey;
    padding-bottom: 6px;
    opacity: 0.7;
}

.share_icon {
    padding-right: 12px;
}

.share_desc {
    padding: 8px 0 8px 0;
    border-bottom: 1px solid grey;
}

/* -------------- end of share popup box            */

/* used to position an anchor just higher on a page than the start position so linking to it looks nice, with variations for different page types */

.scroll_link {
    position: absolute;
    top: -60px;
}

.PAGE_other_list .scroll_link {
    top: -90px;
}

.PAGE_index .scroll_link {
    top: -120px;
}

@media all and (max-width: 700px) {
    .PAGE_other_list .scroll_link {
        top: -110px;
    }

    .PAGE_index .scroll_link {
        top: -150px;
    }
}

.fosl_full {
    clear: both;
    width: 100%;
    margin: 0;

    box-sizing: border-box;
    position: relative;
}

.fosl_full h2 {
    padding: 0 0 0 5%;
}

@media all and (max-width: 700px) {
    .fosl_full h2 {
        padding: 0 0 0 4px;
    }
}

.fosl_full h2 .h2_sub {
    background-color: #efefef;
    padding: 4px;
    font-size: var(--SIZE_BASE);
}

/* turned on in the JS */

#top_but_fosl,
#top_but_canada,
#top_but_brit,
#top_but_world {
    display: none;
}

/* turned off if too narrow */

@media all and (max-width: 1100px) {
    #top_but_fosl {
        max-width: 0;
        overflow-x: hidden;
        visibility: hidden;
        padding: 0;
        margin: 0;
    }
}

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

    #top_but_canada,
    #top_but_brit,
    #top_but_world {
        max-width: 0;
        overflow-x: hidden;
        visibility: hidden;
        padding: 0;
        margin: 0;
    }
}

#fm_menu_group {
    display: inline-block;
    position: relative;
    top: 11px;
}

.img_inline {
    display: inline;
}

/* not visible until content changed in teh OnLoad */

.ferry_head_ex {
    display: none;
}

.alert_header img {
    display: inline;
}

#the_whole_header {
    /* nothing here necessary */
    position: relative;
    display: bock;
    width: 100%;
}

.fm_progress_line {
    font-size: 0.8rem;
    font-family: var(--FONT_FIXED);
}

.fm_progress_panel {
    background-color: darkgreen;
}

.reindex_icon {
    margin-right: 20px;
    opacity: 1;
    height: 20px;
    width: 20px;
    display: inline;
}

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

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

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

/* styles relating to the INFO section   */
/* ****************************************************** */

.info_container,
.bulk_photo_container {
    padding-left: 0;
    padding-right: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    margin: 0 auto;
}

/* new alternative to .info_container  introduced 2024-02-18 */
.info_newspaper {
    column-count: 2;
    padding-left: 0;
    padding-right: 0;
    margin-left: 30px;
    margin-right: 30px;
}

.fine_print,
.extra_links::after,
.info_newspaper::after {
    font-size: var(--SIZE_REDUCED_75);
    line-height: normal;
    display: block;
}

.extra_links::after,
.info_newspaper::after {
    content: "* All information here is liable to change with time and circumstances; it is provided to give a feel for the way the ferry works.  Always check with the ferry operator for up to date information. ";
    padding-left: 20px;
}

.extra_links::after {
    background: none;
    margin-top: 12px;
    border: none;
}

.info_newspaper .extra_links::after {
    content: none;
}

@media all and (max-width: 700px) {
    .info_newspaper {
        column-count: 1;
        margin-left: 0;
        margin-right: 0;
    }
}

.info_box,
.extra_links {
    margin-bottom: 8px;
    width: 50%;
    max-width: 650px;
    padding: 0;
    color: #333;
    font-weight: var(--WEIGHT_NORMAL);
    font-size: 1em;
    background-color: white;
    border: none;
}

.info_box {
    max-width: 360px;
    width: 30%;
    border-bottom: thin solid #999;
    margin-left: 10px;
}

.extra_links {
    width: 50%;
    max-width: 650px;
    margin-right: 10px;
}

.info_newspaper .info_box,
.info_newspaper .extra_links {
    margin-left: 4px;
    margin-right: 4px;
}

.info_newspaper .info_box,
.info_newspaper .extra_links {
    break-inside: avoid;
    width: 100%;
    max-width: 500px;
    margin-bottom: 24px;
    border-left: thin var(--COL_FEATURE_BORDER) solid;
    border-right: thin var(--COL_FEATURE_BORDER) solid;
}

@media all and (max-width: 500px) {
.info_newspaper .info_box,
.info_newspaper .extra_links,
    .extra_links,
    .info_box {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
}

.extra_links_header,
.info_box_sub_head,
.info_box_header {
    /* almost h2, but a tad smaller and not italic */
    font-family: var(--FONT_TEXT);
    font-size: var(--SIZE_HEADER_4);
    font-weight: var(--WEIGHT_HEADER_2);
    font-style: normal;
    color: var(--COL_HEADER);
    background-color: var(--COL_BACK_SUBTLE);
    text-align: center;
    padding: 2px;
    border-top: thin var(--COL_FEATURE_BORDER) solid;
    border-bottom: thin var(--COL_FEATURE_BORDER) solid;
}

.info_newspaper .info_box_header,
.info_newspaper .extra_links_header {
    text-align: left;
    padding-left: 12px;
}

.bulk_photo_container h2,
.info_section_header {
    color: white;
    background-color: var(--COL_HEADER);
    letter-spacing: 10px;
    text-transform: uppercase;
    text-align: center;
    font-family: var(--FONT_TEXT);
    font-size: var(--SIZE_HEADER_4);
    font-weight: normal;
    font-style: normal;
    margin-top: 36px;
    margin-bottom: 36px;
}

/* BEWARE: .lbx_photo_box is defined after here in kbx_photo.css */
.bulk_photo_container .lbx_photo_box {
    margin: 10px 18px 10px 18px; 
}

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

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

.info_box_info {
    font-size: var(--SIZE_TEXT_SMALLER);
    line-height: normal;
    padding: 8px 8px 8px 8px;
    margin-bottom: 0;
}

/* just used on cook.php */
.info_box_sub_head {
    font-family: var(--FONT_HEADER);
    font-size: var(--SIZE_HEADER_3);
    background-color: var(--COL_HEADER);
    color: var(--COL_BACK_SUBTLE);
    border: none;
}

.extra_links_item {
    border-bottom: thin solid #999;
    font-size: var(--SIZE_TEXT_SMALLER);
    line-height: normal;
}

.extra_links_item:hover {
    background-color: var(--COL_MEN_BACK_HOV);
}

.extra_links_desc {
    float: right;
    padding: 10px;
    /*max-width:450px;*/
    width: calc(100% - 60px);
    line-height: normal;
}

a:link .extra_links_desc,
a:visited .extra_links_desc {
    text-decoration: none;
    color: #333;
    margin-left: 4px;
}

a:hover .extra_links_desc,
a:active .extra_links_desc {
    text-decoration: none;
    color: var(--COL_TEXT_LINK);
    background-color: var(--COL_MEN_BACK_HOV);
}

.extra_links_link {
    float: left;
    width: 25px;
    margin-left: 10px;
    margin-top: 15px;
    text-decoration: none;
}

a:link .extra_links_link,
a:visited .extra_links_link {
    background: no-repeat url(../pic/arr_grey_18.png);
    text-decoration: none;
}

a:hover .extra_links_link,
a:active .extra_links_link {
    background: no-repeat url(../pic/arr_grey_18_hov.png);
    text-decoration: none;
}

/* show_all related */
.fm_all_section {
    margin-top: 4px;
    margin-bottom: 6px;
    margin-left: 10px;
    padding-bottom: 10px;
    border-left-width: 4px;
    border-left-style: solid;
    border-bottom-width: 4px;
    border-bottom-style: solid;
    background-color: var(--COL_BACK_VERY_SUBTLE);
}

.fm_all_section:hover {
    background-color: var(--COL_BACKGROUND_FEATURE);
}

.fm_all_section_inner {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

.fm_all_info_box {
    max-width: 49%;
}

@media all and (max-width: 700px) {
    .fm_all_info_box {
        max-width: 100%;
    }
}

.fm_show_all_terminal {
    margin-top: 16px;
    /* border-bottom: 1px grey solid;*/
    padding-bottom: 6px;
    padding-left: 6px;
}

@media all and (max-width: 700px) {
    .fm_show_all_terminal {
        margin-top: 8px;
    }
}

.fm_show_all_terminal .info_box_coord,
.fm_show_all_terminal .info_box_maplinks {
    font-size: var(--SIZE_REDUCED_85);
    padding-left: 30px;
}

.fm_show_all_terminal .info_box_coord {
    line-height: 1em;
    margin-top: 12px;
}

.fm_show_all_photo_box {
    max-width: 49%;
}

@media all and (max-width: 500px) {
    .fm_show_all_photo_box {
        width: 100%;
        max-width: 100%;
    }

    .fm_show_all_photo_box_thinking {
        display: none;
    }
}

.fm_all_nothing {}

.loc_links_box {}

.loc_links_box h3 {
    margin-top: 2px;
    text-align: center;
}

.loc_links_section {
    border-bottom: 1px solid grey;
    margin: 4px 0 8px 0;
}

.map_loc_icon {
    width: 20px;
    height: 20px;
    background: url(../pic/map_loc2_24.png) no-repeat center;
    background-size: contain;
    display: inline-block;
}

.map_loc_text {
    font-size: 0.9rem;
    position: relative;
    bottom: 2px;
}

.slideshow_icon_2 {
    width: 29px;
    height: 24px;
    background: url(../pic/slideshow_icon_24h.png) no-repeat center;
    vertical-align: text-bottom;
    display: inline-block;
}

#nav_top_slideshow {
    display: none;
}

.show_all_canada {
    display: none;
}

.show_all_world {
    display: none;
}

.show_all_gb {
    display: none;
}

.show_all_fosl {
    display: none;
}

.show_all_other {
    /* no such button yet to select this */
    display: none;
}

.show_all_header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
}

.show_all_intro {
    min-width: 300px;
    width: 45%;
}

@media all and (max-width: 700px) {
    .show_all_intro {
        width: 100%;
    }
}

/* keep these tag colourings near teh end of the file as they override colours */
.tag_intro {
    border-color: var(--COL_TAG_INTRO);
}

.tag_fosl {
    border-color: var(--COL_TAG_FOSL);
}

.tag_fosl_X {
    border-color: var(--COL_BORDER_SUBTLE);
    /* greyed out version */
}

.tag_other {
    border-color: var(--COL_TAG_OTHER);
}

.tag_generic {
    border-color: var(--COL_HEADER);
    /* intended to "bullet" a header without any special colour affiliation.  Hence using same colour as header text */
}

.tag_gb {
    border-color: var(--COL_TAG_GB);
}

.tag_canada {
    border-color: var(--COL_TAG_CANADA);
}

.tag_canada_fosl {
    border-color: var(--COL_TAG_FOSL);
    /* border-left-color: var(--COL_TAG_FOSL); allows us easy change between showing FOSL pages with their own colour tags on the Canada US index page */
}

.tag_world {
    border-color: var(--COL_TAG_WORLD);
}

.tag_info {
    border-color: var(--COL_TAG_INFO);
}

.tag_admin {
    border-color: var(--COL_TAG_ADMIN);
}