table/* note this has been developed for the NMA and the CSMA */
/* by Stormy Weather Software Ltd */
/* Major revision 25 March 2023 for flex usage */

body {
    font-size: 16px;
    font-family: Verdana, Arial, sans-serif;
    background-color: #f6f6f6;
    margin: 0px;
    padding: 0px 1%;
    overflow-x: hidden;
    overflow-y: auto;
}
/* overflow: hidden, overide with : (greater than)style type="text/css">body {overflow-x: scroll;}</style(less than) */

/* ++++ FLEX and RESONSIVE layout ++++ */

/* flex-container used in /inc NEW-STYLE  */

    .flex-con-head, .flex-con-body, .flex-con-foot { display: flex; flex-wrap: wrap; }
    .flex-con-head { background-color: #000080; }

    .flex-con-head > div { background-color: #000080; margin: 0px; text-align: center; }
    .flex-con-foot > div { min-height: 140px; display: flex; justify-content: center; background-color: #f5f5f5; }

    .flex-head-left { padding: 0px; margin: 0px; flex: 50%; height:100px; max-width:500px; }
    .flex-head-mid { padding: 0px; margin: 0px; flex: 50%; height:100px; max-width:500px; text-align:center; vertical-align: bottom; }
    .flex-head-right { margin: 0px; flex: 50%; max-width:800px; text-align:center; align-self: start; }

    .flex-side-menu { background-color: #f5f5f5; padding: 0; flex: 0; min-width: 155px; min-height:100%; position: sticky; font-size: 14px; }
    .flex-main-content { background-color: #ffffff; padding: 1em 0 0 1%; flex: 50%; font-size: 1em;  }   /* width: auto; */
    .flex-right-col { background-color: #ffffff; padding: 3em 2% 0 1%; width: auto; max-width: 350px; font-size: 1em; border-left: thin solid #DFE1E5; }  /* flex: 50%; */

    .flex-foot-left { flex-basis: 330px; }
    .flex-foot-mid { flex: 1; min-width: 300px;}
    .flex-foot-dummy { flex-basis: auto; }
    .flex-foot-right { flex-basis: 330px; }

    .flex-gen-col { background-color: #ffffff; padding: 0%; width: auto; max-width:350px; font-size: 1em; }  /* for inserts 3rd body col  */

@media only screen and (max-width: 640px) {
    body { font-size: 14px; font-family: Verdana, Arial, sans-serif; background-color: #f6f6f6; margin: 0px; padding: 0px; overflow-x: hidden; overflow-y: auto; }
    div.flex-side-menu { width: 0px; display: none; }
    div.flex-head-mid { height: auto;}
    div.flex-right-col { margin: auto; border-style: none; max-width: 350px; padding: 0 0 0 1%!important; }  /*was 450 max */
    div.flex-con-foot { margin: 0; padding: 0; justify-content: center; align-items: center; }
    div.flex-foot-dummy { width: 0px; display: none; }
    .flex-con-foot > div { margin: auto; align-items: center; max-height: 8em; }
    .flex-main-content { font-size: 14px; width: 100%}
    img {max-width: 100%; height:auto; padding: 0px; }
    img.r-col-special { height:auto; padding-left: 36px; }
    img.toprightcol { margin-top: 0em!important; margin-right: 0em!important; }
    a.button_header { font-size: 14px!important; }
    .solrbutton { font-size: 14px!important; }
    div.figureright, figure.figureright { max-width: 100%!important; margin: 0 1% 0 0!important; padding-left: 1vw;}
    div.figure3 { max-width: 100%!important; margin: 0 1% 0 0!important; }
    div.figureleft, figure.figureleft { max-width: 100%!important; margin: 0 1% 0 0!important; }
    div.figurecenter, figure.figurecenter { max-width: 100%!important; margin: 0 1% 0 0!important; }
    div.col3generic { margin: 0!important; }
    li.just4 { padding-right: 0.3em!important; }
    p.justspaced { max-width: 100%; word-wrap: break-word; }
    div.justspaced { max-width: 100%; word-wrap: break-word; margin-bottom: 6px; text-indent: 3em; padding-right: 2%!important; }
    p.specialvisual { display: none; }
    p.copy2 { padding: 0; margin: 0; }
    h2 { margin-top: -2%!important; }
    div.search4, p.search4 { margin: 0 0 .5em 4em!important; }
    /* .bq { margin-left: 10%!important; margin-right: 5%!important; padding: 2%!important; } */
    .bq { margin-left: 4vw!important; margin-right: 4vw!important; }
}

@media only screen and (max-width: 831px) {   /* was 800, but misses Ipad */
    .flex-con-head { flex-direction: column; }
    /* .flex-side-menu { width: 0px; display: none; }  see below 1150 */
    .flex-main-content { width: 100%!important; flex-grow: 1; flex-shrink: 1; flex-basis: 100%;}    /* new 21 jan 2024 for iPad -  font-size: 14px; */
    div.flex-right-col { margin: auto; border-style: none; max-width: 350px; padding: 0 0 0 1%!important; }    /* was 450 max */
    div.flex-foot-dummy { width: 0px; display: none; }
    input.specialwidth { margin: 0 0 .5em 0; width: 12.5em; }
    .middle { width: 100%!important;}  /* otherwise half size */
    .blockquote { margin-left: 7%!important; margin-right: 7%!important; }
    div.clockhead { color: #fff; padding-top: 0!important;}
    .flex-foot-right { flex-basis: 831px; }
    img.stage4img1 { width: 10vw!important; height: auto; margin-top: 2vw;}
    img.stage4img2 { width: 65vw!important; height: 8vw!important; }
    img.stage4img3 { width: 20vw!important; height: auto; margin-top: 2vw;}
    img.gfish { width: 18vw!important; height: auto!important; }
}

@media only screen and (max-width: 1150px) {   /* try and get Ipad resolution 7 Feb 2025 */
    .flex-side-menu { width: 0px; display: none; }
}

@media only screen and (max-width: 1500px) {
  .flex-head-right{ background-color: #000080; padding: 0.5em 0 0 0!important; }
}

/* used for FLEXING TABLES */
/* SMALL DEVICES */
.ttable-wrapper { display: flex; flex-direction: column; width: fit-content; }
.ttable-child { background-color: #CEFEFF; height: auto; width: fit-content; height: inherit; display: table-cell; }
table.ttable th, table.ttable td { border: 1px solid black; border-collapse: collapse; padding: 5px;  margin:0 auto;}
table.ttable td { height: 12em; }

/* MEDIUM DEVICES */
@media only screen and (min-width: 768px) {
.ttable-wrapper { flex-direction: row; }
.ttable-parent-container { flex: 1; }
}
/* LARGE DEVICES */
@media only screen and (min-width: 992px) {
.ttable-parent-container { display: flex; }
.ttable-child-container { flex: 1; display: table; }
.ttable-child-container+.ttable-child-container { margin:0; display:table; }
}

div.flexcenter { display:flex; justify-content:center; }

a.button_header { border: 1px solid white; border-radius: 10px; background-color: #008; color: white!important; padding: 0em .5em; text-align: center; display: inline-block; font-size: 16px; cursor: pointer; margin-bottom: .5em;}
a.button_header:hover { border: 1px solid #6FE3E3!important; background-color: white!important; color: black!important; }

img.r-col-special { height:auto; }

/* Used for search page, boxes horizontal, then vertical for small screens */

* { box-sizing: border-box; }

.searchpcolumn {
  float: left;
  width: 50%;  /* note 33.33% for three boxes, 25% for four... */
  padding: 5px;
}

/* Clearfix (clear floats) */
.searchprow::after {
  content: "";
  clear: both;
  display: table;
}

/* Responsive layout - makes the two/three/four columns stack on top of each other instead of next to each other */
@media screen and (max-width: 500px) {
  .searchpcolumn {
    width: 100%;
  }
}

select.dropd {
    margin: 0px;
    padding: 0px 0px 0px 5px;
    height: 2em;
}

input.specialwidth { margin: 0 0 .5em 0; }

/* used for GOOGLE MAPS */
.iframe-rwd  { margin-top: 1em; position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }
.iframe-rwd iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding-right: 1%; border: 0; }

/* end FLEX section */

/* Top navigation bar - below head in collections, research, etc*/
.topnav a {
    float: left;
    display: block;
    overflow: hidden;
    background-color: #000080;
    color: #f1f1f1!important;
    text-align: center;
    padding: .2em 1em;
    text-decoration: none;
    font-weight: bold;
    border-right: 2px solid white;
    border-bottom: 2px solid white;
    border-radius: 10px;
}
.topnav a:hover {
    background-color: #f1f1f1;
    color: #000080!important;
}
.topnav2 a {
    float: left;
    display: block;
    overflow: hidden;
    background-color: #74F7FF;
    color: #000000!important;
    text-align: center;
    padding: 6px 16px;
    text-decoration: none;
    font-weight: bold;
    border-right: 2px solid white;
    margin-bottom: 1em;
}
.topnav2 a:hover {
    background-color: #f1f1f1;
    color: #000080!important;
}

/*  Killer on cellphones:   float: none; width: 100%; */
@media screen and (max-width: 400px) {
    .topnav a a:hover {
    font-size: 14px;
  }
}

/* Links */

a img { border: none white; }

a:link, a:active  {
    text-decoration: none;
    font-weight: normal;
    font-size: 1em;
    color: #0000ff;
}

a:link, a:visited  {
    text-decoration: none;
    font-weight: normal;
    font-size: 1em;
    color: #0000ff;
    outline: none;
}

a:hover {
    font-weight: normal;
    font-size: 1em;
    color: #00EFF2;
    text-decoration: underline;
    /* text-decoration-color: black; */
}

a.white, a.white:hover, a.white:active, a.white:visited {
    font-weight: normal;
    font-size: 1em;
    color: white;
    text-decoration: none;
    background: transparent;
}

a.discreet, a.discreet:hover, a.discreet:active, a.discreet:visited {
    font-weight: normal;
    font-size: 1em;
    color: Gray;
    text-decoration: none;
    background: transparent;
}

a.lessdiscreet, a.lessdiscreet:hover, a.lessdiscreet:active, a.lessdiscreet:visited {
    font-weight: normal;
    font-size: 1em;
    color: Gray;
    text-decoration: underline;
    background: transparent;
}

a.menu, a.menu:active, a.menu:visited {
    font-weight: normal;
    font-size: 1em;
    margin-bottom: 10px;
}

a.menu:hover {
    font-weight: normal;
    font-size: 1em;
    color: #00EFF2;
    text-decoration: underline;
    /* text-decoration-color: black; */
    background: transparent;
}

a.h1click, a.h1click:active, a.h1click:visited {
    font-size: 200%;
    color: #000000;
    margin-top: 10px;
    margin-bottom: 15px;
    font-weight: bold;
    background: transparent;
}

a.h1click:hover {
    font-size: 200%;
    color: #00FFFF;
    margin-top: 10px;
    margin-bottom: 15px;
    font-weight: bold;
    text-decoration: none;
    background: transparent;
}

a.h2click, a.h2click:active, a.h2click:visited {
    font-size: 150%;
    color: #000000;
    margin-top: 10px;
    margin-bottom: 15px;
    font-weight: bold;
    background: transparent;
}

a.h2click:hover {
    font-size: 150%;
    color: #00FFFF;
    margin-top: 10px;
    margin-bottom: 15px;
    font-weight: bold;
    text-decoration: none;
    background: transparent;
}

a.menubold, a.menubold:active, a.menubold:visited {
    font-weight: bold;
    font-size: 1em;
    margin-bottom: 10px;
}

a.thumbleft:hover span {
    /* CSS for enlarged image on hover */
    visibility: visible;
    top: 20px;
    left: -200px;
    /* position where enlarged image should offset horizontally */
}

a.thumbnail, a.thumbleft {
    position: relative;
    z-index: 0;
}
a.thumbnail:hover, a.thumbleft:hover {
    background-color: transparent;  /* was  white */
    z-index: 50;                    /* was 0 */
}
a.thumbnail span, a.thumbleft span {
    /*CSS for enlarged image*/
    position: absolute;
    background-color: white;        /* border padding colour, wws #C8FCFB; */
    padding: 5px;
    visibility: hidden;
    color: black;                   /* was red */
    text-decoration: none;
}
a.thumbnail span img, a.thumbleft span img {    /*CSS for enlarged image*/
    border-width: 0;
    padding: 2px;
}
a.thumbnail:hover span {            /*CSS for enlarged image on hover*/
    visibility: visible;
    top: 20px;                      /* position where enlarged image should offset horizontally, was -100px */
    left: 100px;                    /* position where enlarged image should offset horizontally, was -200px */
    background-color: white;        /* border padding colour */
}

/* Solr : Search based Google, Bing, Ducks */

.solrinput {
    background-color: white;
    box-sizing: border-box;
    padding: 5px;
    border-radius: 10px;
}
.solrbutton {
    border: 2px solid #fffffd;
    border-radius: 10px;
    background-color: white;
    color: black;
    padding: 0em .5em;
    text-align: center;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    margin-bottom: .5em;
}
.solrbutton2 {
    border: 1px solid #000080;
    border-radius: 10px;
    background-color: white;
    color: black;
    padding: 0em .5em;
    text-align: center;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    margin-bottom: .5em;
}
.solrbutton:hover { border: 2px solid #6FE3E3!important; background-color: white!important; color: black!important; }

div.clockhead {color: #fff; padding-top: 1.5em;}

div.search1, p.search1, a.search1 {
    padding-top: 1px;
    font-size: 14px;
    line-height: 1.3;
    color: #202124;
    font-style: normal;
}
div.search2, p.search2, a.search2 {
    padding-top: 5px;
    font-size: 1.25em;
    font-weight: 400;
    line-height: 1.3;
    margin-bottom: 3px;
    color: #1a0dab;
    /* Bing: color: #006621; */
}
div.search3, p.search3, a.search3 {
    font-size: .9em;
    line-height: 1.58;
    text-align: left;
    color: #70757a;
    margin-bottom: 1.5em;
}
div.search4, p.search4 {
    margin-left: 10em;
    font-size: .9em;
    color: #4285f4;
    font-weight: normal;
}

/* Divs text  */

.blockquote { margin-left: 6em; margin-right: 12em; }
.bq { margin-left: 4em; margin-right: 8em; text-align: justify; }
.bq2 { margin-left: 5%; margin-right: 2%; text-align: justify; line-height: 1.3;}

.vertical-center {
  margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

div.col3generic {
    margin-top: 3em;
    }

div#centerdiv {
    /* uses tag div id="centerdiv" */
    width: 200px;
    border: 1px solid red;
    margin-left: auto;
    margin-right: auto;
}

div.floatRightClear {
    float: right;
    clear: right;
    margin-right: 8px;
    margin-bottom: 4px;
}

div.right50px {
    float: right;
    clear: right;
    margin-left: 50px;
    margin-bottom: 4px;
}

div.floatLeftClear {
    float: left;
    clear: left;
    margin-left: 2px;
    margin-bottom: 3px;
}

div.hr, p.hr {
    width: 6em;
    height: 2px;
    border-width: 0;
    background-color: #BFE8FC;
    color: #BFE8FC;
    margin-top: 25px;
    margin-bottom: 25px;
    margin-left:0
}

.navy_subhead {
    color: navy;
    font-weight: bold;
    margin-top: 10px;
}
.navy_title {
    color: navy;
    font-weight: bold;
    margin-top: 10px;
    font-size: 1.3em;
}

p.center { text-align: center; }

p.review {
  /* background-color: #ddeeff; */
  color: #000080;
  margin-bottom: 10px;
  text-align: justify;
  line-height: 1.5em;
  padding-right: 75px;
    background-image:
    linear-gradient(to bottom,
      #ddeeff 0%,
      #ddeeff 100%),
    linear-gradient(to bottom,
      #fff 0%,
      #fff 100%);
  background-clip: content-box, padding-box;
}

/*  "new" justspaced, for smartphone anamalies */
p.justspacednew {
    padding-right: 2%;
    text-align: justify;
    line-height: 1.5em;
    max-width: 100%;
}

p.justspaced {        /* tested as "newgen", 23 March 2023 */
    padding-right: 2%;
    text-align: justify;
    line-height: 1.5em;
    min-width: 20em;
    }

p.justspacedlong {
    margin-bottom: 10px;
    margin-right: 10px;
    text-align: justify;
    line-height: 1.5em;
}

p.quoted-text {
    margin-bottom: 10px;
    text-align: justify;
    line-height: 1.5em;
    padding-right: 75px;
    padding-left: 150px;
}

p.quote {
    padding: .5em;
    text-align: justify;
    line-height: 1.4em;
    margin-left: 4em;
    margin-right: 5em;
    background-color: #f3f3f3;
}

div.justspaced {
    margin-bottom: 6px;
    text-align: justify;
    text-indent: 3em;
    line-height: 1.2em;
    padding-right: 5em;
}

div.justzero {
    text-align: justify;
    line-height: 1.5em;
    padding: .5em;
}

p.spaced, div.spaced {
    margin-bottom: 10px;
    line-height: 1.5em;
    padding-right: 75px;
}

/* unused */
div.scroll {
    height: 200px;
    width: 500px;
    overflow: auto;
    border: 1px solid #666;
    background-color: #ccc;
    padding: 8px;
}

dt.list {
    padding-bottom: 2px;
    font-size: 100%;
    font-style: normal;
}

/* HEADERS
    h1 { display: block; font-size: 2em; ...
    h2 { display: block; font-size: 1.5em; ...
    h3 { display: block; font-size: 1.17em; ...
    h4 { display: block; font-size: 1em; ...
    h5 { display: block; font-size: .83em; ...
    h6 { display: block; font-size: .67em;
 */

h1,h2,h3,h4,h5,h6 { background-color: transparent; color: #000000; }

h1 { margin: 0.3em 0em; }
h1.head { font-weight: bold; text-align: left; }
h1.notbold { font-size: 2em; margin-top: 0px; font-weight: normal; }

h2 { font-size: 1.6em;  margin: .6em 0em; }

h2.main { font-weight: bold; font-size: 250%; text-align: left; color: #00088b; }
h2.main2 { font-weight: bold; font-size: 190%; text-align: left; color: #00088b; }

h3.menu { margin-top: 2px; margin-bottom: 2px; }
h3.mini { margin-bottom: 2px; }

/* Various */

hr.blue {
    border: 0;
    color: #0000ff;
    background-color: #0000fd;
    height: 2px;
    width: 55%;
    text-align: center;
}

hr.standard {
    border: 0;
    color: #BFE8FC;
    background-color: #BFE8FB;
    height: 2px;
    width: 6em;
    margin: 1.5em 0 1.5em 0;
}

hr.head {
    border: 0;
    color: #ffffff;
    background-color: #fffffd;
    height: 1px;
    width: 95%;
    text-align: center;
}

hr.stub {
    width: 6em;
    height: 2px;
    border-width: 0;
    color: #BFE8FC;
    background-color: #BFE8FC;
    text-align: left;
    margin-left: 0;
    border: 0;
    page-break-after: always;
}

hr.stubleft {
    width: 75px;
    color: #BFE8FC;
    background-color: #BFE8FB;
    text-align: left;
    margin-left: 0px;
    height: 2px;
    border: none;
    margin-bottom: 10px;
    page-break-after: always;
}

iframe { margin: 0px; }

/* Images */

div.figure {
  float: right;
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
  text-align: right !important;
  border: none;
  margin-right: 3em;
}

/* screen 640 figureleft, div.figureright {max-width: 100%!important; margin: 0 1% 0 0!important; } */
div.figureleft, figure.figureleft {
  display: table;
  float: left;
  font-style: italic;
  font-size: smaller;
  text-indent: 0px;
  border: none;
  margin: 0 3% 0 0;
}

figcaption {
  display: table-caption;
  caption-side: bottom;
  margin: .5em 0 1em 0;
}

div.figureright, figure.figureright {
  display: table;
  float: right;
  font-style: italic;
  font-size: smaller;
  text-indent: 0px;
  border: none;
  /* text-align: right !important;  */
  margin: 0 2% 0 4%;
}

div.figurecenter, figure.figurecenter {
  display: table;
  font-style: italic;
  font-size: smaller;
  text-indent: 0px;
  border: none;
  margin: auto;
}

div.figure3 {          /* right col, adapts to screen 640 */
  font-style: italic;
  font-size: smaller;
  text-indent: 0px;
  border: none;
  margin: 4em 2% 0 4%;
}

div.figuregen {
  float: left;
  font-style: italic;
  font-size: smaller;
  text-indent: 0px;
  border: none;
  margin: 0 20px 0 0;
}

div.br { clear: both; }

img { border: 0; }

img.toprightcol { margin-top: 2em; margin-right: 1em; }

img.logo { width: 500px; height: 100px; }

img.aligntext { vertical-align: text-bottom; }

img.alleft { float: left; margin-right: 20px; }

img.alright { float: right; margin-left: 20px;}

img.alrighttop { float: right; margin-left: 20px; margin-top: 20px;}

img.alrightmarg {
    float: right;
    margin-left: 50px;
    margin-right: 10px;
}

img.alrightmargwide {
    float: right;
    margin-left: 50px;
    margin-right: 20px;
    margin-bottom: 15px;
    margin-top: 15px;
}

img.alleftmargwide {
    float: left;
    margin-left: 20px;
    margin-right: 50px;
    margin-bottom: 15px;
    margin-top: 15px;
}

img.alrightmargtight {
    float: right;
    margin-left: 30px;
    margin-bottom: 15px;
    margin-right: 0px;
}

img.floatRightClear {
    float: right;
    clear: right;
    margin-left: 4em;
    margin-top: 1em;
    margin-bottom: 1em;
}

img.topmargin { margin-top: 20px; }

img.hideit {
     z-index: -1;
}

img.infront {
     z-index: 1;
}

/* Forms */

fieldset { border: 1px solid Aqua; display: inline-block; width: 50em;}  /* added width 29 Dec 2024 */

.fieldset-auto-width {
         display: inline-block;
    }

input {
    background: none repeat scroll 0 0 #E7F6F7;
    border: 1px solid #00008B;
    color: #00008B;
    height: 1.5em;
}

input.paypal { background: transparent; border: none; height: 47px; }

label {
    width: 10em;
    float: left;
    text-align: right;
    margin-right: 0.5em;
    display: block;
}

legend {
    color: #00008B;
    background: #CEFEFF;
    border: 1px solid #00008B;
    padding: 2px 110px;
    font-size: 1.3em;
    font-weight: bolder;
    white-space: nowrap;
}

li.just {
    margin-bottom: 5px;
    margin-right: 8%;
    text-align: justify;
    line-height: 1.3em;
}

li.just3 {
    margin-top: .5em;
    text-align: justify;
    line-height: 1.3em;
    padding-right: 2em;
}

li.just4 {
    margin-top: .4em;
    text-align: justify;
    line-height: 1.3em;
    padding-right: 7em;
}

li.justspaced {
    margin-bottom: 10px;
    text-align: justify;
    line-height: 1.5em;
    padding-right: 75px;
}

li.side_menu { margin-bottom: 15px; }

/* spans */

span.first {
    font-family: "Times New Roman", Times, serif;
    font-size: 250%;
    color: #979700;
    font-weight: bold;
    padding-left: 25px;
    line-height: 25px;
}

span.nobreak {
  white-space: nowrap;
}

span.h3 { font-weight: bold; }

span.h3text { font-weight: bold; font-size: larger; }

span.aqua { color: #00d6d9; font-weight: bold; }

span.deepaqua { color: #0080C0; }

span.maroon { color: #800000; }

span.green { color: #00C000; }

span.red { color: #ff0000; }

span.smcaps { font-variant: small-caps; }

span.sup {
  vertical-align: super;
  font-size: smaller;
}

span.spleft {
    font-size: 9px;
    color: Gray;
    font-weight: normal;
    text-decoration: none;
    background: transparent;
}

span.spright {
    text-align: right;
    font-size: 9px;
    color: Gray;
    font-weight: normal;
    text-decoration: none;
    background: transparent;
}

span.underline { text-decoration: underline; }

sup, sub {
    height: 0;
    line-height: 1;
    vertical-align: baseline;
    _vertical-align: bottom;
    position: relative;
}

sup { bottom: 1ex; }
sub { top: .5ex; }

/* Tables */

/* First, general layout, right col not always used */

table.maincontent {
    width: 100%;
    background-color: #ffffff;
}

td.menucolumn {
    background-color: #f5f5f5;
    padding-left: 5px;
    padding-right: 5px;
    vertical-align: top;
    width: 145px;
    font-size: 14px;
}

td.bodycolumn {
    background-color: #ffffff;
    padding-top: 20px;
    padding-left: 1%;    /* was 20px, March 2023 */
    vertical-align: top;
}

/* Note this pad20l20r retained with no top padding; padding-right removed 2022-08-06 */
td.pad20l20r {
    background-color: #ffffff;
    /* padding-right:20px; */
    padding-left:1.2%;      /* was 20px, March 2023 */
    vertical-align: top;
}

td.rightcol {
    background-color: #ffffff;
    padding-top: 20px;
    padding-left: 20px;
    margin-left: 0px;
    vertical-align: top;
    max-width:  350px;
    border-left: thin solid #DFE1E5;
}
/*  in the above: float: right; white-space: nowrap; removed 2 Apr 2020 max-width mod 2022-08-06 */
/* following only used for animation on surplus page */
td.bodycolumnright {
    background-color: #ffffff;
    padding-top: 20px;
    padding-left: 20px;
    margin-left: 0px;
    vertical-align: top;
    max-width: 400px;
    border-left: thin solid #DFE1E5;
    float: right;
}

table,th,td,input,textarea { font-size: 100%; border-collapse: collapse; }

table.header { width: 100%; background-color: #000080; border-collapse: collapse; }
table.footer { width: 100%; background-color: #F5F5F5; border-collapse: collapse; }

td.headleft { width:500px; height:100px; background-color: #000080; }
td.headright {
    /* width:60%; */
    height:100px;
    background-color: #000080;
}

td.footleft { background-color: #f5f5f5; padding-left: 5px; padding-right: 5px; vertical-align: top; width: 15%; }
td.footcenter { background-color: #f5f5f5; padding-left: 5px; padding-right: 5px; vertical-align: top; width: 70%; }
td.footright { background-color: #f5f5f5; padding-left: 5px; padding-right: 5px; vertical-align: top; width: 15%; text-align:right; }

table.fullcenter {
    width: 100%;
    border: 0;
    table-layout: fixed;
}

td.leftcolumn {
    vertical-align: top;
    width: 205px;
}

td.rightcolumn {
    vertical-align: top;
    width: 205px;
    text-align: right;
}

td.centercolumn {
    vertical-align: top;
    /* width: 100%; */
    text-align: center;
}

/* image tables : use a div class figure, figureleft */

table.alright { float: right; margin-left: 45px; }
table.alleft { float: left; margin-right: 45px; }
table.alleft_new { float: left; margin-right: 1%; }

table.alright2 { float: right; margin-left: 45px; white-space: nowrap; }

table.floatRightClear {
    float: right;
    clear: right;
    margin-left: 4em;
    margin-top: 3em;
    margin-bottom: 3em;
    margin-right: 0px;
}

table.ImageRight {
    float: right;
    clear: right;
    margin: 3em 0em 3em 0em;
}

td.ImageRight {
    padding: 5px 0px 5px 4em;
    text-align: right;
    float: right;
    margin-right: 0px;
}

table.maincontent, tr.maincontent, td.maincontent { vertical-align: top; }

table.photo, tr.photo, td.photo {
    vertical-align: top;
    border-bottom: 2px solid;
    border-color: transparent;
}

/* use id="simple" e.g. research/ships/aletha.html */
#simple {
  border-collapse: collapse; }
#simple td {
  padding: .2rem 2rem; }

table.simple {border-collapse: collapse;}
td.simple {padding: 0rem 2rem;}

/* use id="outline" e.g. research/docs/southern_belle.html */
#outline {
    vertical-align: top;
    border: 1px solid;
    border-color: gray;
    padding: 0rem 1rem; }
#outline td {
    vertical-align: top;
    border: 1px solid;
    border-color: gray;
    padding: 0.3rem 1rem; }
#outline tr:nth-child(odd) {
    background-color: #f2f2f2; }

/* use <table id="photo"> e.g. research/stormy/album.html*/
#photo {
  border-collapse: collapse;
  width: 100%;
  overflow-x: scroll;
  /* display: block; */
  max-width: -moz-fit-content;
  max-width: fit-content;
  margin: 0 auto;
  white-space: nowrap; }
#photo td {
  vertical-align: top;
  border-collapse: collapse;
  padding: 2em; }

/* use <table id="biblio">, single table, normally from csv */
#biblio {
  border-collapse: collapse;
  width: 100%;
}
#biblio td {
  border: 1px solid #ddd;
  padding: 6px;
}
#biblio th {
  border: 1px solid #ddd;
  padding: 6px;
  background-color: #CEFEFF;
  font-weight: bold;
}
#biblio tr:nth-child(even){background-color: #f2f2f2;}
#biblio tr:hover {background-color: #ddd;}
#biblio th {
  padding-top: 8px;
  padding-bottom: 8px;
  text-align: left;
  background-color: #D6EFFF;
  color: #000080;
}

/*  Generic stripe table  */

table.stripe, tr.stripe, td.stripe {
  border-collapse: collapse;
  table-layout: auto;
  /* width: 100%; */
}

table.stripe th {
  background-color: #cefeff;
  padding: 6px;
  color: #000080;  /* font-size: 120%; text-align: center; not required in th */
}

table.stripenormal th {
  background-color: #cefeff;
  padding: 6px;
  color: #000080;
  font-weight: normal;
}

table.stripe tr:nth-child(even){background-color: #f2f2f2;}
table.stripe tr:hover {background-color: #ddd;}

table.stripe td {
  border: 1px solid #ddd;
  vertical-align: top;
  padding: 3px;  /* was 6px */
}

table.stripe2, tr.stripe2, td.stripe2 {
  border-collapse: collapse;
  table-layout: auto;
  /* width: 100%; */
}

table.stripe2 th {   /* stripe2 is smaller font */
  font-size: .9em;
  background-color: #cefeff;
  padding: 6px;
  color: #000080;
}

table.stripe2 tr:nth-child(even){background-color: #f2f2f2;}
table.stripe2 tr:hover {background-color: #ddd;}

table.stripe2 td {
  font-size: .9em;
  border: 1px solid #ddd;
  padding: 6px;
}

table.biblio, tr.biblio, td.biblio {
    vertical-align: top;
    border-bottom: 2px solid;
    border-color: transparent;
}

table.paypalleft {
    float: left;
    margin-right: 25px;
    margin-left: 25px;
    margin-top: 15px;
}

table.paypalright {
    float: right;
    margin: 1em 5em;
}

table.popuptable, tr.popuptable, td.popuptable, th.popuptable {
    width: 100%;
    border: 1px solid black;
    background-color: white;
    padding: 1px 3px 1px 3px;
    white-space: nowrap;
}

table.subcontent {
    margin: 0px;
    vertical-align: top;
    white-space: nowrap;
    width: 100%;
}

td.w5pc { width:05% }
td.w40pc { width:40% }
td.w40pcbl { width:40%; background-color: #000080}
td.w60pc { width:60% }
td.w90pc { width:90% }

td.w60pcar { width:60%; text-align:right; background-color: #000080 }

td.bleft, th.bleft {
    border-left: 1px solid black;
    border-collapse: collapse;
    padding-left: 1em;
}

th.stripenormal {
  background-color: #D6EFFF;
  padding: 6px;
  color: #000080;
  font-weight: normal;
  text-align: left;
}

table.neat, th.neat, td.neat {
  border: 1px solid black;
  border-collapse: collapse;
}
td.neat {
    padding-top: 2px;
    padding-bottom: 5px;
    vertical-align: top;
    border: none;
}
th.neat {
    padding-top: 2px;
    padding-bottom: 5px;
    vertical-align: top;
    text-align: left;
    background-color: #e8e8e8;
}

td.bodycolumnbooks {
    /* padding-top: 5px; */
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
    vertical-align: top;
    width: 110px;
}

td.books {
    /*  padding-top: 2px;  */
    padding-top: 0px;
    padding-bottom: 5px;
    vertical-align: top;
}

th.books {
    padding-top: 2px;
    padding-bottom: 5px;
    vertical-align: top;
    text-align: left;
    background-color: #e8e8e8;
}

td.left {
    text-align: left;
    padding-left: 20px;
    padding-right: 20px;
    vertical-align: top;
    padding-top: 12px;
}

td.mainleft {
    text-align: left;
    padding-left: 20px;
    padding-right: 20px;
    vertical-align: top;
    padding-top: 12px;
}

td.left_biblio {
    text-align: left;
    padding-left: 20px;
    vertical-align: top;
    padding-top: 3px;
}

td.leftsub {
    text-align: left;
    padding-left: 0px;
    vertical-align: top;
    padding-top: 10px;
}

td.right {
    text-align: right;
    padding-right: 20px;
    vertical-align: top;
    padding-top: 12px;
}

td.footerright {
    width:145px;
    text-align:right;
}

td.rightbot {
    text-align: right;
    padding-right: 20px;
    vertical-align: bottom;
    padding-top: 12px;
}

td.rightsub {
    text-align: right;
    padding-right: 0px;
    vertical-align: top;
    padding-top: 10px;
}

td.topcontent { vertical-align: top; width: 50%; padding-top: 0px; }

td.old_yellow {
    text-align: center;
    margin: 0px;
    padding: 4px;
    background-color: blue;
    font-weight: bold;
    color: yellow;
}

textarea {
    height: 40px;
    width: 195px;
    background: #E7F6F7;
    color: #00008B;
    border: 1px solid;
}

/* Lists */

ol.list {
list-style-position: outside; padding: 3em;
}

ol.ships li { margin-bottom: 1em; margin-right: 4vw;}

ol.just li { margin-bottom: 1em; line-height: 1.2em; text-align: justify;}  /* padding-right: 3em;  */
ul.just li { margin-bottom: 1em; padding-right: 4%; line-height: 1.2em; text-align: justify;}

ul.left,ul.right {
    line-height: 110%;
    background-position: top;
    text-align: justify;
    list-style-position: outside;
    margin-top: 5px;
}

ul.right { text-align: right; }

.aright { text-align: right; float: right; margin-right: 6px; padding-right: 6em; }

.bottom { vertical-align: bottom; } /* float: bottom; */

/* Image captions */

.CaptionText {
    font-size: .8em;
}

.CaptionItalic {
    font-size: .9em;
    font-style: italic;
    margin: .5em;
    text-align: justify;
}

/* for slide show captions */

.textwhite1 {color: white;}
.textgrey {color: grey;}
.textblack {color: black;}

/* Content Header */

.ch {
    color: #000000;
    font-size: x-large;
    font-family: Verdana, Arial, sans-serif;
    font-weight: bold;
}

/* Content Header Smaller */
.chs {
    color: #000000;
    font-size: large;
    font-family: Verdana, Arial, sans-serif;
    font-weight: bold;
    text-decoration: none;
}

.copy {
    font-size: 10px;
    padding-left: 20px;
    padding-right: 20px;
    color: Gray;
}

.copy2 {
    font-size: 12px;
    color: #2F4F4F;
}

.deadlink {
    font-size: 10px;
    color: Gray;
    font-weight: normal;
    text-decoration: none;
    background: transparent;
}

.doublemenu { width: 100%; vertical-align: top; text-align: left; }

/*Footer */

.footer {
    color: #000000;
    font-size: 9px;
    font-family: Verdana, Arial, sans-serif;
    font-weight: normal;
    text-decoration: none;
}

/* Text */

.head1 {
    background-color: transparent;
    font-size: 2em;
    color: #ffffff;
    margin-bottom: 9px;
    margin-top: 15px;
    text-align: center;
}

.head2 {
    background-color: transparent;
    font-size: 1.8em;
    font-style: italic;
    color: #ffffff;
    margin-bottom: 9px;
    text-align: center;
}

div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 10em;
  padding: 5px;
  background-color: #cefeff;
  border: 1px solid #000080;
  min-width: 150px;
  margin-right: 1%;  /* cell-phones */
}
div.stickyplain {
  position: -webkit-sticky;
  position: sticky;
  top: 10em;
  min-width: 150px;
  margin-right: 1%;  /* cell-phones */
}
.indent { margin-left: 35px; }

.indent2 { 
    margin-left: 35px; 
    margin-right: 1px;   
    background-color: #eaf7fd;
}   

div.aright { text-align: right; float: right; margin-bottom: 10px; padding-right: 5em; }

div.titlebluebox {
    border: 1px solid #5A5A5A;
    background-color: #CEFEFF;
    padding: .1em 3em;
    margin-right: 2%;
    display: inline-block;
}

.middle {
  clear: both;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;}

.just, .indent {
    color: #000000;
    font-size: 1em;
    text-align: justify;
    margin-bottom: 1px;
    line-height: 1.5em;
    padding-right: 5%;
}

.just2 {
    display: block;
    color: #000000;
    font-size: 13px;
    text-align: justify;
    margin-bottom: 0.8em;
    margin-top: 0.8em;
    padding-left: 5em;
}

.just2 span {
    /* used in forms to float check box right */
    display: block;
    float: right;
    margin-left: 0px;
    margin-right: 0px;
}

.justcenter {
    color: #000000;
    font-size: 1em;
    margin-bottom: 1px;
    text-align: center;
}

.language {
    text-align: right;
    margin-top: 15px;
    margin-right: 0px;
    border-bottom: thin solid #00EFF2;
}

.menu { color: #0000ff; font-size: 9pt; font-weight: bold; }

.more { color: #003366; font-size: 12px; text-decoration: none; }

.more.hover { color: #CC0000; }

.online {
    width: 100%;
    vertical-align: top;
    text-align: left;
    padding-right: 20px;
}

.smallcenter { color: #405060; font-size: 85%; text-align: center; }

.footercenter { color: #405060; font-size: 120%; text-align: center; }

.smaller { color: #000000; font-size: 90%; text-align: justify; }

/* tooltips */

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 420px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -210px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

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

/* redirect box */

.smalltext { font-size: 9px; }

.smalltextform { font-size: 9px; color: #999999; }

.submit input {
    color: #00008B;
    background: #CEFEFF;
    border: 2px solid #00008B;
    border-radius: 8px;
    height: 2em;
    margin-left: 4.5em;
    padding: 5px 10px;;
}

.text { color: #000000; font-size: 12px; }

/*  id="indextable" does not appear to be used.  PA 30 Dec 2023. */

#indextable { width: 100%; border-collapse: collapse; }

#indextable td, #indextable th {
    font-size: 1em;
    border: 1px solid #1EFCFF;
    padding: 3px 7px 2px 7px;
}

#indextable th {
    font-size: 1.1em;
    text-align: left;
    padding-top: 5px;
    padding-bottom: 4px;
    background-color: #CEFEFF;
    color: #000000;
    white-space: nowrap;
}

.wrapper {
    position: relative;
    overflow: auto;
}

.longcontent {
    position: relative;
    overflow: auto;
}

/* Victory kids special header wobble */

a.kids, a.kidscurrentpage {
    border-radius: 6px;
    font-weight: bold;
    font-size:120%;
    margin-right:5px;
}
a.kids:hover {
    animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
    animation-iteration-count: infinite;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='squiggle-link' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.w3.org/2001/xml-events' viewBox='0 0 20 4'%3E%3Cstyle type='text/css'%3E.squiggle{animation:shift .3s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-18px);}}%3C/style%3E%3Cpath fill='none' stroke='%23453886' stroke-width='2' class='squiggle' d='M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3'/%3E%3C/svg%3E");
    background-position: bottom;
    background-repeat: repeat-x;
    background-size: 20%;
    border-bottom: 0;
    padding-bottom: .3em;
    text-decoration: none;
}
@keyframes shake {
    10%, 90% {
        transform: translate3d(-1px, 0, 0);
    }
    20%, 80% {
        transform: translate3d(1px, 0, 0);
    }
    30%, 50%, 70% {
        transform: translate3d(-1px, 0, 0);
    }
    40%, 60% {
        transform: translate3d(1px, 0, 0);
    }
}

/* fading transition browser specific vvk */

@-webkit-keyframes fader {
    from { opacity: 1.0; }
    to   { opacity: 0.0; }
    }
@-moz-keyframes fader {
    from { opacity: 1.0; }
    to   { opacity: 0.0; }
    }
@keyframes fader {
    from { opacity: 1.0; }
    to   { opacity: 0.0; }
    }

/* Fish animation, vvk */

img.gfish { width: 8vw; height: auto; }   /* width: 168px; height: 88; */

#gfish {
  /* bottom: 15%; */
  position: absolute;
  -webkit-animation: linear infinite;
  -webkit-animation-name: run;
  -webkit-animation-duration: 5s;
}
@-webkit-keyframes run {
  0% {
    left: 15vw;
  }
  48% {
    -webkit-transform: rotateY(0deg);
  }
  50% {
    left: 70vw;     /* was 50 */
    -webkit-transform: rotateY(180deg);
  }
  98% {
    -webkit-transform: rotateY(180deg);
  }
  100% {
    left: 15vw;
     -webkit-transform: rotateY(0deg);
  }
}

/* get a limited space in middle of page, otherwize runs to sdge of screeN */

.parent {
  display: flex;
  flex-direction:row;
}

.column {
  flex: 1 0 0px;
  /* border: 1px solid black; */
  /* background-color: pink; */
}


/* old */
#stage4 {
    margin: 1em auto;
    width: 968px;
    height: 70px;
    }
#stage4 img {
    position: absolute;
    }
#stage4 a img {
    padding: 0px;
    border: 0px solid #fff;
    background: #fff;
    }

/* --- end new */

div.stage4 { max-width: 50vw; }

img.stage4img1 { width: 5vw; height: auto; }
img.stage4img2 { width: 30vw; height: 5vw; }
img.stage4img3 { width: 10vw; height: auto; }

.container {
  display: flex;
}
.container > div {
  flex: 1; /*grow*/
}

/* Note: following three had a:nth previously; need a href around image */
#stage4 a:nth-of-type(1) {
    -webkit-animation-name: fader;
    -webkit-animation-delay: 1s;
    -webkit-animation-duration: 1s;
    -moz-animation-name: fader;
    -moz-animation-delay: 1s;
    -moz-animation-duration: 1s;
    -ms-animation-name: fader;
    -ms-animation-delay: 1s;
    -ms-animation-duration: 1s;
    z-index: 20;
    }

img.thumbnail5 {   /* vvk sampling */
    width: 950px;
    height: 150px;
    margin-top: 3em;
  }

/* Main index page. See also inc/carousel_main.html */

img.thumbnail1 {
    width: 350px;
    height: 262px;
    margin: 0;
}