@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400italic,700,700italic&subset=latin,latin-ext);
@import url(https://use.fontawesome.com/releases/v6.1.2/css/all.css);

:root {
	--sym-font: "Font Awesome 6 Free";
	--def-font: 'Source Sans Pro',Arial,Helveltica,sans-serif;
	--mono-font: 'Courier New',Courier,monospace;
	--box-bg: #F4F4F4;
	--hover-bg: #F8F8F8;
	--btn-bc: #777;
	--thinborder: solid thin lightgray;
	--genborder: solid thin gray;
	--formborder: 2px solid white;
	--light-bg: #FFFFFF;
}

/* pre-HTML5 */
FOOTER, HEADER, SECTION, ARTICLE, NAV, ASIDE, HGROUP {display: block;}

/* general */
BODY {font-family: var(--def-font); color: black; margin-top: 0; padding-top: 3em; position: relative;}
@media screen and (max-width: 7in) {
	BODY { padding-top: 0; }
}
@media screen and (max-width: 7in) {
	H1 { font-size: 1.7em; }
}

.species { font-style: italic; hyphens: none; -ms-hyphens: none; -webkit-hyphens: none;}
.author { font-variant: small-caps;  hyphens: none; -ms-hyphens: none; -webkit-hyphens: none;}
.doi { hyphens: none; -ms-hyphens: none; -webkit-hyphens: none; }
.issue { white-space: nowrap; }
FOOTER { border-top: thin solid gray; margin-top: 1em;}
HR { border-top: thin solid gray; border-bottom: 0;}
IMG.logo { float: left; border: none; margin-right: 0.5em; }
@media screen and (max-width: 7in) {
	IMG.logo { max-width: 40%;}
}
.vert {vertical-align: middle;}
.zoomable { cursor: -moz-zoom-in !important;
            cursor: -webkit-zoom-in !important;
            cursor: zoom-in !important;}
A:link,
 A:visited { color: #4D87C7; text-decoration: none;}
A[rel="external"]::after { font-family: var(--sym-font); font-weight: 900; content: "\20\f360"; color: gray; font-style: normal; }
A.feedlink { color: white;
             background-color: orange;
             padding: 0 0.2em 0 0.2em;
             border-radius: 0.2em;
             border: 1px solid #ff7000;
             font-family: var(--def-font);
             font-style: italic;
             font-weight: bold;
             font-size: 0.8em;
             background-image: linear-gradient(to bottom, #ffbb00, #ff7000); }
A.feedlink:before { content: "\f09e\20";
                    font-family: var(--sym-font);
                    font-style: normal;
                    font-weight: 900;
                    width: 1em;}
A[href]:focus {
  outline: dashed thin;
}                     
BLOCKQUOTE { margin: 1.5em;
						font-size: 1.5em;
						font-weight: bold;}
SPAN.mag { font-style: italic; }						
SECTION.notes,
 SECTION.announcement,
 NAV.pagination,
 NAV.genuslinks { 
						    border: var(--thinborder);
   					    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);
						    color: #444;
						    color: rgba(0, 0, 0, 0.8);
						    background-color: var(--box-bg);
						    padding: 1em;
						    margin: 0 0 1.5em 0; 
						    hyphens: auto; -ms-hyphens: auto; -webkit-hyphens: auto;}
SECTION.notes > *:last-child {
						    margin-bottom: 0; }
SECTION.announcement > DIV:first-child > SPAN:first-child { font-weight: bold; display: inline-block; margin-bottom: 0.3em; }
NAV.pagination { 
                padding: 0.3em;
                margin: 1em 0 1em 0; }
NAV.genuslinks {hyphens: none; -ms-hyphens: none; -webkit-hyphens: none;}
@media screen and (max-width: 12in) {
  NAV.pagination,
    NAV.genuslinks { max-height: 5em; overflow: auto; }
  NAV.genuslinks {font-size: 1.2em;}
} 

.anchor { padding-top: 3em; margin-top: -3em; }
.anchor-h { padding-top: 3em; margin-top: -2em; }
.nonpublic { opacity: 0.5; outline: 1px dashed; }
DIV.warning, ASIDE.warning { background: red; color: white; padding: 0.3em; text-align: center; }
LI DIV.warning { text-align: left; }

/* Tooltip container */
*[class|="tooltip"] {
  position: relative;
  display: inline-block;
}

/* Tooltip text */
*[class|="tooltip"] .tooltiptext {
  display: block;
  visibility: hidden;
  width: 20em;
  background-color: #FBFBB4;
  color: black;
  padding: 0.5em;
  border: var(--genborder);
  box-shadow: 0.2em 0.2em 0.5em gray;
  white-space: normal;
  text-align: left;
  font-weight: normal; 

  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  top: 135%;
  left: 0;

  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.3s 0.7s;
}

@media screen and (max-width: 7in) {
  *[class|="tooltip"] .tooltiptext { width: 16em; }
}

.tooltiptext ASIDE {
	/*margin-bottom: 0.5em;*/
	hyphens: auto; -ms-hyphens: none; -webkit-hyphens: none;
}

/* Tooltip arrow */
*[class|="tooltip"] .tooltiptext::after {
  content: "";
  position: absolute;
  bottom: 100%;
  margin-left: -0.5em;
  border-width: 0.5em;
  border-style: solid;
  border-color: transparent transparent gray transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
*[class|="tooltip"]:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

.sticky { position: -webkit-sticky; position: sticky; top: 3em; background-color: white; z-index: 1; }
@media screen and (max-width: 7in) {
  .sticky { top: 0; }
}
              
DIV.panelcontainer { clear: both; text-align: center; }               
DIV[class|="panel"] { display: inline-block; border: var(--thinborder); box-shadow: 0.5em 0.5em 0.5em lightgray; padding: 0.3em;
            background: #f8f8f8; width: 20em; margin: 1em; text-align: center; vertical-align: middle;}
@media screen and (max-width: 7in) {
	DIV[class|="panel"] { width: 16em; }
}
DIV.panel-wide {width: auto;}
DIV[class|="panel"] > DIV:first-child { text-align: center; font-size: 1.3em; font-weight: bold; margin-bottom: 0.2em;}
DIV.speciescountrychart { font-size: 11px !important; }
SPAN.bignumber { font-size: 3em; font-weight: bold; font-family: var(--mono-font);}
@media screen and (max-width: 7in) {
  SPAN.bignumber { font-size: 2.5em; }
}
ABBR { cursor: help; border-bottom: dotted thin; text-decoration: none;}
I[onclick], NAV.pagination I.fa, NAV.pagination I.fas, NAV.pagination I.far,
  SPAN[onclick] { color: gray; }
I[onclick]:hover, NAV.pagination I.fa:hover, NAV.pagination I.fas:hover, NAV.pagination I.far:hover,
  SPAN[onclick]:hover { color: inherit; }
TABLE.formatspec { margin-top: 1em; }
TD TABLE.formatspec { margin-top: 0; }
TABLE.formatspec TH {font-family: var(--mono-font); text-align: left; vertical-align: top; 
                      padding-left: 0; padding-right: 0.3em;
                      min-width: 3em;}
TABLE.formatspec TD {vertical-align: top;}
TABLE.formatspec CAPTION { font-weight: bold; }
SPAN.literal {font-family: var(--mono-font); font-weight: bold;}
PRE {font-family: var(--mono-font);}
NAV.importformat {font-style: italic;}

*[contentEditable="true"] { outline: solid thin orange; min-height: 1em; }
I.fa-button { color: gray; cursor: pointer; 
    background-image: linear-gradient(to bottom, #eeeeee,#cccccc);
    background-color: #eeeeee;
    font-size: 0.8em;
    border: 1px solid var(--btn-bc);
    border-radius: 0.2em;
    /* box-shadow: 0 0 1px 1px rgba(255, 255, 255, 0.8) inset, 0 1px 0 rgba(0, 0, 0, 0.15);*/
    margin: 0.3em 0.3em 0 0;
    padding: 0.2em;
    /* removes extra side spacing in IE */
    text-decoration: none !important;
}
I.fa-button:hover { color: inherit !important; }

/* Bookmarks */
H1.bookmarkable { position: relative; padding-right: 2em; }
H1.hyphens { hyphens: auto; -ms-hyphens: auto; -webkit-hyphens: auto; }
.bmspace { position: absolute; top: 0; right: 0; }
.bookmarked,
 .bookmarked:hover,
 .tempbookmarked,
 .tempbookmarked { color: gold !important; }
 
NAV.links { float: right; max-width: 60%; border-left: var(--thinborder); padding-left: 0.3em;}
NAV.links A { margin-left: 0.2em; } 
@media screen and (max-width: 7in) {
  NAV.links {
    float: none;
    display: inline-block;
    max-width: 3em;
    max-height: 2em;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 3em;
    text-align: center;
    padding: 0.2em;
    border: none;
    }
  NAV.links B:first-child {
    display: none;
  }
  NAV.links::before {
    content: "\f0c1";
    font-family: var(--sym-font); 
    font-style: normal;
    font-weight: 900;
    font-size: 2em;
    color: gray;
    }
  NAV.links:hover {
    max-width: 130px;
    max-height: initial;
    z-index: 1;
    border: var(--genborder);
    background: var(--light-bg);
    box-shadow: 0 0.2em 0.6em gray;
    display: inline-block; 
  }
  NAV.links:hover B:first-child {
    display: initial;
  }
  NAV.links:hover::before {
    display: none;
  }
}
DIV.taxonids { margin-bottom: 1em; }
               
/* lists */
DIV.searchresult { border-bottom: var(--thinborder); padding-bottom: 0.3em; white-space: nowrap;
                   font-size: 0.9em;}
@media screen and (max-width: 12in) {
	DIV.searchresult {font-size: initial;}
}                   
@media screen and (max-width: 7in) {
	DIV.searchresult {white-space: normal;}
}
DIV#sourcelist DIV.searchresult,
  DIV#sourcelist_current DIV.searchresult,
  DIV#sourcelist_recent DIV.searchresult,
  DIV#sourcelist_new DIV.searchresult {white-space: normal;}                  
DIV.searchresult *[class|="fw"] { border-right: var(--thinborder);}                   
DIV.specieslist { margin-top: 1em;}
.multicol2 { column-count: 2;
             column-gap: 1em;}
@media screen and (max-width: 12in) {
	.multicol2 { column-count: initial; }
}
.multicol3 { column-count: 3;
             column-gap: 1em;}

DIV.fourcol { display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-areas: "recent new current announce";
  grid-gap: 0.5em;
  width: 100%;
}
DIV#sourcelist_current { grid-area: current; }
DIV#sourcelist_recent { grid-area: recent; }
DIV#sourcelist_new { grid-area: new; }
DIV#announcements { grid-area: announce; }

DIV.fourcol > DIV:not(:first-child) { border-left: var(--thinborder); padding-left: 0.5em;}

@media screen and (max-width: 12in) {
  DIV.fourcol { 
	 grid-template-columns: repeat(2, 1fr);
    grid-template-areas: "recent new" "current announce";
  }
  DIV.fourcol > DIV:nth-child(odd) { border-left: none; padding-left: 0; }
}

@media screen and (max-width: 7in) {
  DIV.fourcol { 
    display: block;
  }
  DIV.fourcol > DIV:not(:first-child) { border-left: none; padding-left: 0; }
}
.unapproved TD:not(:first-child), DIV.unapproved {opacity: 0.4;}
.implausible { text-decoration-style: wavy;
               -webkit-text-decoration-style: wavy;
               text-decoration-color: red;
               -webkit-text-decoration-color: red;
               text-decoration-line: underline;
               -webkit-text-decoration-line: underline;
               }
.foreign { background-color: #e7e7e7; }
.deleted {text-decoration: line-through;}
/*TR.unapproved TD.recaction {opacity: 1 !important;}*/
.highlight { background-color: #9cff9673; }
.future { }
.past { opacity: 0.5; }
DIV.searchresult:hover { background-color: var(--hover-bg);}
.wrapping {white-space: normal !important; }
SPAN[class|="label"],
  SPAN[class|="tag"] { padding: 1px 6px 2px;
                       display: inline-block;
                       vertical-align: middle;
                       white-space: nowrap;
                       border-radius: 0.2em;
                       background-color: #06C;
                       color: white;
                       font-size: 0.8em;}
SPAN[class|="tag"] { -moz-user-select: none;
                     -webkit-user-select: none;
                     -ms-user-select: none;
                     user-select: none; 
                     cursor: pointer;}
SPAN.label-valid { background-color: #8c8; }
SPAN.label-invalid { background-color: #c88; }
SPAN.tag-deselected { background-color: var(--light-bg); cursor: pointer; outline: var(--thinborder); color: black; }
SPAN.tag-selected { }
SPAN.tag-disabled { }
DIV.tagcontainer { display: inline-block; }
*[class|="fw"] { display: inline-block; vertical-align: top; overflow: hidden; 
                 white-space: initial; margin-right: 0.3em;}
.fw-4 { width: 4em;}
.fw-3 { width: 3em;}
.fw-5 { width: 5em;}
.fw-6 { width: 6em;}
.fw-10 { width: 10em;}
.fw-12 { width: 12em;}
.fw-16 { width: 16em;}
.fw-20 { width: 20em;}
SPAN.coltitle { font-weight: bold;}
.log-error { background: rgba(255, 0, 0, 0.2);}
.log-warning { background: rgba(255, 255, 0, 0.2); }
.log-note, .log-extended {}
.log-debug { opacity: 0.5;}
DIV#sourcelist_end,
 DIV#loglist_end,
 DIV#locationlist_end { text-align: center; padding-bottom: 25px; }

TABLE.recordlist,
 TABLE.blacklist,
 TABLE.loglist,
 TABLE.users,
 TABLE.alerts { font-size: 0.8em; white-space: nowrap; border-collapse: collapse; }
TABLE.recordlist-infobox { width: 100%; } 
TABLE.blacklist {margin: 1em;}
TABLE.recordlist TBODY,
 TABLE.users TBODY,
 TABLE.blacklist TBODY,
 TABLE.watchlist TBODY { background-color: var(--light-bg);}
TABLE.alerts TR.sepa,
 TABLE.watchlist TR.sepa { border-top: solid medium lightgray;}
TABLE.recordlist TR:hover,
 TABLE.blacklist TR:hover,
 TABLE.loglist TR:hover,
 TABLE.users TR:hover,
 TABLE.alerts TR:hover { background-color: var(--hover-bg);}
TABLE.recordlist TH,
 TABLE.blacklist TH,
 TABLE.loglist TH,
 TABLE.users TH,
 TABLE.watchlist TH,
 TABLE.alerts TH { text-align: left; 
                  border-left: var(--thinborder); 
                  border-right: var(--thinborder); 
                  border-bottom: solid medium lightgray;
                  padding: 2px;}
TABLE.recordlist TD,
 TABLE.blacklist TD,
 TABLE.loglist TD,
 TABLE.users TD,
 TABLE.alerts TD { border: var(--thinborder); padding: 2px;}
TABLE.users TR.inactive { opacity: 0.4;}
TABLE.users TR.confirmed { background-color: #d3ffd3;}
TH.hiddencell,
  TD.hiddencell { display: none; }
TABLE.loglist {caption-side: bottom;}
SELECT.filterselect {width: 100%;}
TD[data-col-type="bio"],
  SELECT[data-for-col="bio"] OPTION { max-width: 15em;
                                      overflow: hidden;
                                      text-overflow: ellipsis; }
TD[data-col-type="source"] { max-width: 30em;
                             overflow: hidden;
                             text-overflow: ellipsis; }
TABLE.recordlist TD.buttoncell {
  text-align: right;
}
DIV.widesection { max-width: 100%; overflow-x: hidden; }
DIV.widesection:hover { overflow-x: auto; }

DIV.history { font-size: 0.8em; 
              margin-top: 1em; margin-bottom: 1em; 
              border-top: var(--thinborder); border-bottom: var(--thinborder);}
.expandable { overflow: hidden; height: 0; transition: height 0.7s ease;}
PRE.expandable { margin: 0; }
.listexpanded { height: inherit;}
PRE.listexpanded { margin-bottom: 1em;}
.listhead-collapsed,
  .listhead-expanded { cursor: pointer; margin-top: 0.5em;}
.listhead-collapsed::before,
  .listhead-expanded::before { font-family: var(--sym-font); font-weight: 900; width: 1.2em; 
                              display: inline-block; text-align: left;
                              color: gray; }
.listhead-collapsed::before { content: "\f0a9"; }  
.listhead-expanded::before { content: "\f0ab"; }
.listhead-expanded { }              
.listhead-collapsed:hover::before,
  .listhead-expanded:hover::before { color: black; }
  
DIV.errorlist { background-color: #c88; color: white; padding: 0.3em; margin-bottom: 1em;}

/* message boxes */
DIV[class|="message"],
  DIV.popupcontent { margin-left: auto; margin-right: auto; 
									 	 text-shadow: 0px 0px 4px black;
										 color: white;}
DIV[class|="message"] { max-width: 50%;
                        background-color: #8c8;
												padding: 0.5em;
												box-shadow: 0.5em 0.5em 1em lightgray;
												margin-top: 1em;
  											margin-bottom: 2em;
  											clear: both; }												
DIV.message-error {background-color: #c88;}
DIV.message-note {background-color: #aab9aa;}
DIV[class|="message"] DIV.messagetitle {text-align: center; font-weight: bold; margin-bottom: 0.5em;}
DIV[class|="message"] P { margin-top: 1em; margin-bottom: 0; }
DIV.message-note A:link,
  DIV.message-note A:visited {  color: yellow; }
DIV[class|="messagebox"] { position: fixed; top: 0; left: 0; height: 0em; 
                           animation-name: messagebox-autoclose;
                           animation-duration: 4s;
                           animation-timing-function: ease;
                           animation-delay: 0.03s;  
                           width: 100%;
					                 z-Index: 5; text-align: center;
					                 background-color: #8c8;
					                 overflow: hidden; 
                           box-shadow: 0 0.5em 1em lightgray;}
DIV.messagebox-error {background-color: #c88;
                      animation-name: messagebox-opening;
                      animation-duration: 0.5s;
                      animation-timing-function: ease;  
                      animation-delay: 0s;  
                      height: 5em; }                 
DIV[class|="messagebox"] I.closer { float: left; color: white; margin: 0.2em;
                     text-shadow: 1px 1px 4px gray;}
DIV.modalbg,
  DIV.modalbgbusy,
  DIV.modalmsgbg { position: fixed; background: var(--light-bg); opacity: 0.7; width: 100%; height: 100%; 
              z-Index: 3; top: 0; left: 0;}
DIV.modalbgbusy { cursor: wait; }
DIV.modalmsgbg { z-Index: 5; }
DIV.popupcontent { margin-left: 2em;
                   position: relative;
                   top: 50%;
                   transform: translateY(-50%); }
@keyframes messagebox-autoclose {
  from {
    height: 0em;
  }
  
  12.5% {
    height: 5em;
  }
  
  87.5% {
    height: 5em;
  }
  
  to {
    height: 0em;
  }
}

@keyframes messagebox-opening {
  from {
    height: 0em;
  }
  
  to {
    height: 5em;
  }
}

@keyframes messagebox-closing {
  from {
    height: 5em;
  }
  
  to {
    height: 0em;
  }
}

/* menu */
SPAN.popupcontainer { position: relative; }
NAV[class|="menu"] {position: fixed; top: 0; left:0; background: var(--light-bg); box-shadow: 0 0.2em 0.6em gray; 
          width: 100%; padding: 0.2em; z-index: 2;
                        -moz-user-select: none;
                        -webkit-user-select: none;
                        -ms-user-select: none;
                        user-select: none; }
/*NAV.menuline {width: 100%; white-space: nowrap;}*/
NAV.menuline:first-child { border-bottom: var(--thinborder);}                        
NAV[class|="submenu"],
  NAV[class|="popupmenu"]
   { background: var(--light-bg); padding: 0.3em; border: var(--genborder);
                  box-shadow: 0 0.2em 0.6em gray; }
NAV[class|="popupmenu"] { display: none; z-index: 1; position: absolute; max-height: 40em; overflow-y: auto; font-size: 0.9em; }                  
NAV.popupmenu { bottom: 0;}                  
NAV.popupmenu-abs { /*padding-top: 15px;*/}
H2 NAV[class|="popupmenu"] { font-size: initial; font-weight: initial;}                  

NAV[class|="submenu"] {position: fixed; max-width: 100%; z-Index: 2;}
NAV.menualigner { position: absolute; right: 0; display: inline; }
@media screen and (max-width: 7in) {
  NAV[class|="submenu"] { top: 1.3em; right: 0; height: 85%; overflow: auto; }
}
NAV.submenu-closed {display: none;}
NAV.submenu-open {display: inline-block;}
*[class|="menuitem"] { padding-left: 0.5em; padding-right: 0.5em; color: #4D87C7; background: var(--light-bg);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline;}
*[class|="menuitem"]:hover { background-color: var(--box-bg); }
*[class|="menuitem"] I.fa, *[class|="menuitem"] I.fas, *[class|="menuitem"] I.far { color: #aaa;}
*[class|="menuitem"]:hover I.fa, *[class|="menuitem"]:hover I.fas, *[class|="menuitem"]:hover I.far { color: black;}
DIV[class|="menuitem"] { display: block; }
NAV.submenu-open DIV[class|="menuitem"] A { display: inline-block; width: 100%;}
.menuitem-current { font-weight: bold;}
.menuitem-closed::after,
 .menuitem-open::after { content: "\f0d7"; font-family: var(--sym-font); font-weight: 900; display: inline-block; width: 1em;
  text-align: center; color: gray;}
@media screen and (max-width: 7in) {
  .menuitem-closed::after,
   .menuitem-open::after { position: absolute; right: 0; }
  .menuitem-closed::after { content: "\f0da";}
  .menuitem-open::after { content: "\f0dd";}
}  
.menuitem-closed .fa-bell,
 .menuitem-open .fa-bell {color: #e90000 !important;}
NAV.menubutton { text-align: right; display: none; font-size: 1.3em;}
@media screen and (max-width: 7in) {
  NAV[class|="menu"] { width: auto; max-width: 80%; right: 0; display: inline-block; left: auto; }
  NAV.menu NAV.menubutton { display: block; font-size: 2em;}
  NAV.menu-open NAV.menubutton { display: block; }
	NAV.menu-open *[class|="menuitem"] { display: block; padding-top: 0.3em; padding-bottom: 0.3em; border-bottom: var(--thinborder);}
	NAV.menu-open NAV.menualigner { position: inherit; right: auto;}
  NAV.menu NAV.menuline { display: none;}
  NAV.menu-open NAV.menuline:first-child { border-bottom: none;}
  NAV.menuline { font-size: 1.5em; }
  NAV.menu-open { overflow-y: auto; max-height: 100%; }
  NAV.submenu-open { display: block; border: 0; position: inherit; box-shadow: none; padding-left: 5%; z-Index: inherit; font-size: 0.8em;}
	NAV.submenu-open *[class|="menuitem"] A { overflow: hidden; text-overflow: ellipsis; }
	NAV.submenu-open *[class|="menuitem"] { padding-right: 0; }
	*[class|="menuitem"] { padding-left: 0.2em; padding-right: 0.6em; }
}

*[onclick] { cursor: pointer;}
BODY[onclick] { cursor: inherit;}
NAV.popupmenu *[class|="menuitem"]:hover { background-color: var(--box-bg);
  color: HighlightText; background-color: Highlight;}
NAV.popupmenu *[class|="menuitem"] { color: inherit; }

/* forms */
DIV.inputblock { margin-top: 0.1em; margin-bottom: 0.3em; white-space: nowrap;}
SPAN.inputspan { display: inline-block; width: 16em; }
SELECT[name="order"] { width: 15em;}
SELECT[name="selector"] { min-width: 100%; }
LABEL { hyphens: auto; -ms-hyphens: auto; -webkit-hyphens: auto; }  
LABEL[for] { display: inline-block; width: 10em; white-space: normal; text-align: right; }
LABEL.narrow[for] { width: 5em; }
FIELDSET.widelabel LABEL[for],
 LABEL.widelabel[for] { width: 15em; }
LABEL.trailinglabel { width: auto; }
@media screen and (max-width: 7in) {
	LABEL[for] { display: block; text-align: left; width: auto; }
}
FIELDSET { background-color: var(--box-bg);
           border: var(--formborder);
           margin-top: 1.5em; margin-bottom: 0.5em;
           box-shadow: 0px 0px 4px #DDD; 
           overflow: visible; }
FIELDSET.expandable { /*padding-top: 0px;*/ padding-bottom: 0px; margin-top: 0;}
FIELDSET.listexpanded { max-height: inherit; padding-bottom: 0.5em; overflow: visible;}
FIELDSET.centered { width: -moz-fit-content; width: -webkit-fit-content; width: fit-content; margin-left: auto; margin-right: auto;}
FORM.bigbutton { display: inline-block; vertical-align: top;}
FORM.mediumbutton { text-align: center; }
FORM.bigbutton FIELDSET { background-color: inherit; border: 0; box-shadow: none;}
FORM.bigbutton FIELDSET BUTTON { width: 150px; height: 120px; font-size: 1.2em;}
@media screen and (max-width: 7in) {
	FORM.bigbutton FIELDSET BUTTON { width: 120px; height: 100px; font-size: 1.1em;}
}
FORM.mediumbutton BUTTON { min-width: 150px; height: 50px; font-size: 1.5em;}
FORM.inline { display: inline; }
FORM {clear: both; }

LEGEND {/*display: inline-block;*/
				left: 0px;
				bottom: 11px;
				position: relative;
				background-color: var(--box-bg);
				border-radius: 0.2em 0.2em 0 0;
				padding-left: 0.5em;
				padding-right: 0.5em;
				border-top: white 2px;}
NAV.legend, 
  SPAN.tablabel { margin-top: 0.5em; 
	           margin-left: 1em; background-color: var(--box-bg); 
             -moz-user-select: none;
             -webkit-user-select: none;
             -ms-user-select: none;
             user-select: none;
             display: inline-block;
	   	        position: relative;
  		        top: 0.2em;
			        border-radius: 0.2em 0.2em 0 0;
			        padding-left: 0.5em;
			        padding-right: 0.5em;
			        border-top: white 2px;}
SPAN.tablabel { border: solid thin var(--box-bg); color: #a7a7a7; top: 0;}			        				
@media screen and (max-width: 7in) {
	SPAN.tablabel { display: block; margin-left: 0.5em; margin-top: 0.2em;}
}
INPUT,
  TEXTAREA,
  SELECT {
    border: 1px solid #ddd;
    line-height: 1.2em;
    font-family: var(--def-font);
    box-shadow: inset 0 0 4px #eeeeee; 
    background-color: var(--light-bg); }
INPUT,
  TEXTAREA { padding: 4px 0.3em;   }
SELECT { vertical-align: middle; padding: 3px 2px 3px 1px;  }
DIV.inputblock TEXTAREA { vertical-align: top; width: 30em; height: 10em;}
DIV.inputblock TEXTAREA[name="speclist"] { width: 25em; height: 20em;}
DIV.inputblock TEXTAREA#message { width: 50em; height: 20em;}
DIV.inputblock INPUT#location,
  DIV.inputblock INPUT#date { width: 50em; }
DIV.inputblock TEXTAREA#atext { width: -webkit-calc(100% - 6em); 
																width: -moz-calc(100% - 6em);
																width: calc(100% - 6em);}
DIV.inputblock SELECT[multiple] { vertical-align: top; }																
DIV.inputblock SPAN.textblock {
	display: inline-block;
  white-space: normal;
  vertical-align: top;
  max-width: -webkit-calc(100% - 10em);
  max-width: -moz-calc(100% - 10em);
  max-width: calc(100% - 10em);
}
@media screen and (max-width: 7in) {
  DIV.inputblock TEXTAREA#message { width: 25em; height: 20em;}
  DIV.inputblock INPUT#location,
    DIV.inputblock INPUT#date { width: 25em; }
}

INPUT:focus,
  SELECT:focus,
  TEXTAREA:focus,
  INPUT:hover,
  SELECT:hover,
  TEXTAREA:hover,
  INPUT:active,
  SELECT:active,
  TEXTAREA:active {
    border: 1px #888 solid;
    background: var(--light-bg);  
    outline: none; }
BUTTON:focus {
  outline-style: solid;
  outline-width: thin;
}    
INPUT:invalid,
  SELECT:invalid,
  TEXTAREA:invalid { border-color: red;}    
OPTGROUP {
    font-family: var(--def-font);
    font-style: normal;
    font-weight: bold; }
INPUT[type="image"],
  INPUT[type="radio"],
  INPUT[type="checkbox"] {
    padding: initial;
    border: 0 none !important;
    background: transparent !important;  }
INPUT[readonly],
  SELECT[readonly]
  TEXTAREA[readonly] { background-color: var(--box-bg);}    
BUTTON,
  INPUT[type="button"],
  INPUT[type="reset"],
  INPUT[type="submit"],
  ::file-selector-button {
    background-image: linear-gradient(to bottom, #eeeeee,#cccccc);
    background-color: #eeeeee;
    border: 1px solid var(--btn-bc);
    border-radius: 0.2em;
    box-shadow: 0 0 1px 1px rgba(255, 255, 255, 0.8) inset, 0 1px 0 rgba(0, 0, 0, 0.15);
    color: #333 !important;
    cursor: pointer;
    font-family: var(--def-font);
    margin: 0 0.3em 0 0.3em;
    /* removes extra side spacing in IE */
    text-decoration: none !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);}
BUTTON.danger,
  INPUT.danger[type="button"],
  INPUT.danger[type="reset"],
  INPUT.danger[type="submit"] {
    background-image: linear-gradient(to bottom, #C9302C,#9c2320);
    background-color: #C9302C;
    border-color: #840808;
    box-shadow: 0 0 1px 1px rgba(255, 255, 255, 0.8) inset, 0 1px 0 rgba(0, 0, 0, 0.15);
    color: white !important; 
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8);}
BUTTON.highlight:hover {
    background-image: none;
    background-color: khaki;
    box-shadow: 0 0 1px 1px rgba(255, 255, 255, 0.8) inset, 0 1px 0 rgba(0, 0, 0, 0.15);
    color: #333 !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);}

BUTTON:hover,
  INPUT[type="button"]:hover,
  INPUT[type="reset"]:hover,
  INPUT[type="submit"]:hover,
  ::file-selector-button:hover {
    background-image: linear-gradient(to bottom, #fafafa,#dddddd);
    background-color: #fafafa; }    
BUTTON.danger:hover,
  INPUT.danger[type="button"]:hover,
  INPUT.danger[type="reset"]:hover,
  INPUT.danger[type="submit"]:hover {
    background-image: linear-gradient(to bottom, #f5524e,#9c2320);
    background-color: #f5524e; }
BUTTON:disabled,
  INPUT[type=file]:disabled::file-selector-button,
  INPUT:disabled,
  SELECT:disabled,
  .mapsbutton[disabled],
  SPAN.tag-disabled,
  I.disabled { color: gray !important; background-color: var(--box-bg) !important; 
                    background-image: none !important; cursor: not-allowed;}
I.disabled { color: lightgray !important; }
BUTTON.textfunc { margin: 0; padding:0; height: 1.5em; width: 1.5em; }
.coord { width: 3em; }
.coord_l { width: 3.6em; }
.coord_ll { width: 5.5em; }

BUTTON.warning { border-color: orange; border-width: 2px; }
BUTTON.invalid { border-color: red; border-width: thin; }
INPUT[name="parttob"] { display: none; }
.formanno { font-size: 0.8em; }
LABEL.blocklabel { display: inline-block; text-align: center; vertical-align: middle;}
INPUT[type="number"][max="30"],
 INPUT[type="number"][max="1"],
 INPUT[type="number"][max="100"],
 INPUT[type="number"][max="999"],
 INPUT[type="number"][max="2050"],
 INPUT[type="number"][max="2100"],
 INPUT[type="number"][max="5000"],
 INPUT[type="number"][max="9000"],
 INPUT[type="number"][max="9999"] {max-width: 4em;}
INPUT[type="number"][max="6000000"], 
  INPUT[type="number"][max="6200000"] {max-width: 7em;}
INPUT[type="number"][max="832500"], 
  INPUT[type="number"][max="297500"] {max-width: 6em;}
INPUT[type="search"] { width: 30em; }
@media screen and (max-width: 7in) {
  INPUT[type="search"] { width: 15em; }
}
INPUT.mmnum {max-width: 7em;}
SPAN.sourceelement { overflow: hidden; text-overflow: ellipsis; max-width: 40em; display: inline-block;}
DIV.sourcecomment { margin-left: 4em; margin-right: 4em; margin-bottom: 1em; }
DIV.sourcecomment SPAN.species { }
SPAN.sourcecomment { font-weight: bold; }

/* maps */
DIV#speciesmap,
  DIV#geoselectionmap  { width: 100%; height: 800px;}
DIV#recordingstatusmap  { width: 100%; height: 800px;}
DIV#locationmap { width: 100%; height: 600px;}
DIV#multilocationmap { height: 600px;}
DIV.legend,
  TH.legend { background-color: #eee; padding: 0.2em; /*white-space: nowrap;*/ clear: both;}
TH.legend { text-align: left; font-weight: normal; vertical-align: bottom; }
DIV#colorlegend { display: none;}
DIV.mapsbuttonarea { margin: 10px; } 
.mapsbutton, 
  .mapsbutton-icon { font-family: Roboto,Arial,sans-serif;
                  font-size: 18px;
                  color: rgb(51, 51, 51);
                  background-color: var(--light-bg);
                  border-bottom-right-radius: 2px;
                  border-top-right-radius: 2px;
                  box-shadow: 0px 1px 4px -1px rgba(0, 0, 0, 0.3);
                  cursor: pointer;
                  text-align: center;
                  -moz-user-select: none;
                  -webkit-user-select: none;
                  -ms-user-select: none;
                  user-select: none;
                  display: inline-block;
                  position: relative;
                  padding: 11px 23px !important;
                  white-space: nowrap;}
.mapsbutton-icon { width: 40px; height: 40px; padding: 0 !important; display: table-cell; vertical-align: middle;}                  
.mapsbutton:hover,
  .mapsbutton-icon:hover {background-color: #eaeaea; color: black;}
.mapsbutton INPUT[type="range"]{ padding: 0; border: 0; width: 80%; }
DIV.mapsbuttonarea .mapsbutton:first-child,
  DIV.mapsbuttonarea .mapsbutton-icon:first-child {
                  border-bottom-left-radius: 2px;
                  border-top-left-radius: 2px; }
@media screen and (max-width: 7in) {
  DIV#multilocationmap { width: 100%;}

  TH.legend:nth-child(0n+2) { display: none; }
}
DIV[class|="multimap"] { display: grid;
  width: 100%; height: 600px;
  background-color: #eee; 
  grid-template-columns: 1fr min(50%, 500px);
  grid-template-rows: auto auto 2fr;
  grid-template-areas: "legend legend" 
                        "legendedit legendnearby"
                       "loc nearby";
  column-gap: 0.2em;
}
DIV.multimap-nonearby {
  grid-template-areas: "legend legend" 
                        "legendedit legendedit"
                       "loc loc";
}
@media screen and (max-width: 7in) {
  DIV[class|="multimap"] {
    grid-template-columns: auto;
    grid-template-rows: auto auto 2fr auto 2fr;
    grid-template-areas: "legend" 
                         "legendedit"
                         "loc" 
                         "legendnearby"
                         "nearby";
    height: 1200px;
  }
  DIV.multimap-nonearby {
    grid-template-rows: auto auto 1fr;
    grid-template-areas: "legend" 
                         "legendedit"
                         "loc";
    height: 600px;
  }
}
DIV.legendarea { grid-area: legend;}
DIV.legendnearbyarea { grid-area: legendnearby;}
DIV.legendeditarea { grid-area: legendedit;}
DIV.locarea { grid-area: loc; }
DIV.nearbyarea { grid-area: nearby; }

DIV.polygonlabel {
	border: solid thin rgba(0, 0, 255, 0.8);
	color: blue;
	background-color: rgba(0, 0, 255, 0.7);
	padding: 0.2em;
	position: absolute;
	display: inline-block;
	transform-origin: top left;
}                
/* custom slider styles */
.google-visualization-controls-rangefilter-thumblabel { color: initial !important; }
.google-visualization-controls-slider-thumb { background-color: lightgray !important;
                                              border-color: gray !important;}
.google-visualization-controls-slider-horizontal { width: 25em !important;}
@media screen and (max-width: 7in) {
	.google-visualization-controls-slider-horizontal { width: 10em !important;}
}
.google-visualization-controls-slider-thumb { width: 7px !important;}
DIV#slider { text-align: center; }

/* stats */
DIV.chart {width: 1000px; min-height: 500px; position: relative;}
DIV.chart-high {width: 1000px; min-height: 800px;}
DIV.chartsmall {width: 500px; height: 250px; position: relative;}
@media screen and (max-width: 7in) {
	DIV.chart {width: 500px; min-height: 250px;}
	DIV.chart-high {width: 500px; min-height: 500px;}
	DIV.chartsmall {width: 400px; height: 200px; position: relative;}
}
@media screen and (max-width: 4in) {
	DIV.chart {width: 300px; min-height: 150px;}
	DIV.chart-high {width: 300px; min-height: 300px;}
	DIV.chartsmall {width: 300px; height: 150px; position: relative;}
}

#record_calendar { width: auto; }

/* messages */
DIV.sitemessage { border: var(--thinborder); padding: 0.5em; margin-bottom: 1em; background-color: var(--box-bg);}
DIV.sitemessage DIV.header { border-bottom: medium solid lightgray; padding-bottom: 0.2em;}
DIV.sitemessage DIV.response { border-top: var(--thinborder); padding-top: 0.2em; font-size: 0.8em;}
DIV.sitemessage DIV.messagecomment,
 DIV.sitemessage DIV.messagerecords { border-top: var(--thinborder); padding-top: 0.2em; }
DIV.messagerecords I.fa-map-marker-alt {color: gray;}
DIV.sitemessage DIV.messagecommentheader,
 DIV.sitemessage DIV.messagerecordsheader { border-bottom: thin dashed lightgray; padding-bottom: 0.2em; margin-bottom: 0.5em;}
DIV.messagecommentheader > I.fa-comment {color: gray;}
DIV.messagebody {padding: 0.3em 0 0.3em 0.5em;}
DIV.flagged { opacity: 0.3;}
SELECT[name="phrases"] { max-width: 70%;}
DIV.sitemessage DIV.response TEXTAREA {
  max-width: 95%;
  min-width: -moz-available;
}

/* FontAwesome extensions */
.fa-stack-15x {
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center; }
.fa-stack-15x {
  font-size: 1.5em; }
NAV[class|="menu"] .fa-overlap, BUTTON .fa-overlap { left: 0.3em; }
NAV[class|="menu"] .fa-overlap::before, BUTTON .fa-overlap::before  { color: lightgreen; text-shadow: 0 0 2px black; font-size: 0.7em; }
NAV[class|="menu"] .fa-stack, BUTTON .fa-stack { width: 1.28571em; height: 1.28571em; line-height: 1.28571em;}
.fa-question-circle,
  .fa-info-circle {color: blue; cursor: help;}

/* location images */

TABLE.locinfo { width: 100%;  }
TABLE.locinfo TD {vertical-align: top;}
TABLE.locinfo TD:nth-child(2) { text-align: right; }

DIV.picframe, DIV.picframebig { 
	border: var(--genborder); box-shadow: 2px 2px 5px lightgray; 
  display: inline-block; margin: 1em; padding: 0.5em;
  vertical-align: top;
  max-width: -moz-min-content;
  max-width: min-content;
  text-align: right;
  background-color: var(--light-bg); }
DIV.picframe I.fa,
DIV.picframe I.far,
DIV.picframe I.fas,
  DIV.statpopup H3 I.fa,
  DIV.statpopup H3 I.far,
  DIV.statpopup H3 I.fas { float: right; margin-left: 0.3em;}
P.picdescr { 
	margin-top: 0.3em; margin-bottom: 0.2em; 
  text-align: left;
  font-size: 0.8em;}
P.piccopyright {
	margin: 0; 
  text-align: left;
  background: var(--light-bg);
  padding: 0.3em;
  font-size: 0.8em;
  position: absolute;
  border-top-right-radius: 0.5em;
  bottom: 0;
  left: 0; }
DIV.picframebig {
	z-Index: 4;
  position: fixed;
  margin: 0 auto;
  opacity: 0;
  transition: opacity 0.3s ease; }
DIV.picframebig DIV.inputblock { text-align: left; }  
DIV[class|="formframe"] {
	z-Index: 4;
  position: fixed;
  top: 0;
  padding-top: 4em;
  display: inline-block; }
DIV.helpframe {
  border: var(--genborder); 
  box-shadow: 2px 2px 5px lightgray; 
  margin: 0 auto;
  padding: 0.5em;
  max-width: -moz-min-content;
  max-width: min-content;
}
.grip { width: 100%; background: url(/images/grip.png);
        background-repeat: repeat; 
        cursor: -moz-grab;
        cursor: -webkit-grab;
        cursor: grab;
        text-align: left;
        touch-action: none; 
        position: relative; }
.grip I.fa-window-close {background: var(--light-bg); right: 0; position: absolute; padding-left: 0.2em; }
.grip SPAN { padding-left: 1em; padding-right: 1em; margin-left: 1em; background: var(--light-bg); }     
DIV.vgrip { width: 100%; 
            background: url(/images/vgrip.png);
            background-color: #eee;
            background-repeat: no-repeat;
            background-position: center;
            height: 12px; 
            cursor: row-resize;
            border-bottom: var(--thinborder); 
            touch-action: none;}           
.gripped {
	      cursor: -moz-grabbing !important;
        cursor: -webkit-grabbing !important;
        cursor: grabbing !important; }
DIV.formframe-freepos { position: absolute; text-align: left; width: auto;} 
DIV[class|="formframe"] FORM { 
  border: var(--genborder); box-shadow: 2px 2px 5px lightgray;
  background-color: var(--light-bg); 
  padding: 0.5em;
	display: inline-block; text-align: left;}
DIV.formframe-freepos FORM { margin: 2px;}
DIV[class|="formframe"] FIELDSET {
  margin-top: 0.5em;
  margin-bottom: 0; }
DIV.whoisframe, DIV.sourceframe, DIV.activityframe {
  z-Index: 4;
  position: fixed;
  width: 80%; 
  height: 80%;
  margin: 1.5em 10% 1em;
  overflow: auto;
  font-size: 0.8em;
  background-color: var(--box-bg);
  border: var(--formborder);
  padding: 0.5em;
  box-shadow: 0px 0px 4px #DDD; }
P.whois,
 P.whoiscomment {/*white-space: nowrap;*/ font-family: var(--mono-font);
                 margin-top: 0.1em; margin-bottom: 0;}
P.whoiscomment {opacity: 0.6;}
DIV.sourceframe, DIV.activityframe { font-size: 1em;}

DIV.imgframe { white-space: nowrap;}
DIV.imgframe IMG.zoomed { outline: solid red 2px; object-fit: none; cursor: zoom-out; touch-action: none;}
DIV.exifinfo {display: inline-block; /*max-height: 30em;*/ text-align: left; font-size: 0.8em; padding: 0.3em; vertical-align: top;
              max-width: 25em; overflow-y: auto; overflow-x: hidden;
              box-sizing: border-box;
              background: var(--light-bg);
              transition: max-width ease-out 0.5s, padding ease-out 0.5s;
}
DIV.exifsection {}
DIV.exifitem { white-space: nowrap;}
SPAN.exifcat {/*margin-left: 1em;*/}
SPAN.exifvalue {}
DIV.imgcontrols {text-align: center; }
DIV.imgexif { text-align: center; position: relative;}
.exifgrip {margin-top: 25%; padding: 10px 4px; border: var(--thinborder); border-radius: 0.5em 0 0 0.5em;
           background: var(--light-bg);}
.exifcontainer { position: absolute; right: 0; top: 0; z-index: 1; }
	
DIV.picker {display: inline-block;
            position: absolute;
            visibility: hidden;
            left: 30px;
            bottom: 0;
            min-width: 10em;
            min-height: 1em;
            background: var(--light-bg); padding: 0.3em; border: var(--genborder);
            box-shadow: 0 0.2em 0.6em gray;
            font-size: 0.9em;
            text-align: left;
            z-index: 1;
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            }
DIV.picker TABLE {width: 100%; }            
DIV.picker TABLE TD { border: 0;}            
DIV.picker TABLE TR:hover { background-color: initial;}            
.picker-up { border-right: var(--genborder) !important; cursor: pointer;
               text-align: center; width: 1em;}
.picker-up:hover {}               
.picker-list { overflow-y: scroll; 
              scrollbar-width: thin;
              display: inline-block; 
              min-height: 15em; max-height: 15em; 
              min-width: 30em; /*max-width: 40em;*/}
.picker-item,
  .picker-item-initial,
  .picker-item-noselect { max-width: 40em; overflow: hidden; text-overflow: ellipsis;}
.picker-item,
	.picker-item-initial { cursor: pointer; }
.picker-item-noselect { cursor: default; opacity: 0.6; }
.picker-item:hover,
  .picker-item-initial:hover { color: HighlightText; background-color: Highlight;}
.picker-item-down,
  .picker-item-info { cursor: pointer; text-align: center; width: 1em;}
.picker-item-down:hover {}
.picker-item-initial { background-color: var(--box-bg); }
.picker-button { text-align: left; width: 40em; overflow: hidden; text-overflow: ellipsis; margin-left: 0; position: relative;}
@media screen and (max-width: 7in) {
  .picker-button {width: 25em;}
}
.picker-button-sample {text-align: left; width: 3em; position: relative;}
.picker-up I.fa,
  .picker-item-down I.fa { color: #aaa;}
.picker-up:hover I.fa,
  .picker-item-down:hover I.fa { color: black;}
.picker-bmhead {font-weight: bold;}
.picker-bmicon {position: absolute; right: 0; margin: 0.2em; padding-left: 0.2em; border-left: thin solid var(--btn-bc);}
@media screen and (max-width: 7in) {
  DIV.picker {font-size: 1.2em;}
  .picker-list { min-width: 18em; }
  .picker-item,
  .picker-item-initial,
  .picker-item-noselect { max-width: 23em;}
}

DL.board DT { font-weight: bold; margin-top: 1em;}

/* tabs */
DIV.tabcontainer { width: max-content; }
DIV.tabheader { white-space: nowrap; }
@media screen and (max-width: 7in) {
	DIV.tabcontainer { width: auto; }
	DIV.tabheader { white-space: normal; }
}

SPAN.curtab { background: var(--box-bg); color: inherit; top: 3px;}
@media screen and (max-width: 7in) {
	SPAN.curtab { top: 0;} 
}
DIV.tabbody { border-top: solid thin #ddd;}
DIV.tab { display: none; }
DIV.tabbody DIV.tab:first-child { display: block;}
DIV.tab FIELDSET { margin-top: 0; margin-bottom: 0;}
DIV.tab FIELDSET LEGEND { margin-top: 1em;}
DIV.tab NAV.popupmenu FIELDSET { margin-top: 1em; margin-bottom: 0;}
INPUT[type="text"][onclick], 
  INPUT[type="url"][onclick], 
  INPUT[type="number"][onclick], 
  TEXTAREA[onclick] { cursor: initial; }

TABLE#rectable,
  TABLE#rectablem { white-space: nowrap; }
TABLE#rectablem BUTTON.picker-button { width: 10em; }
TABLE#rectable,   
  TABLE#rectablem { border-collapse: collapse; }
TABLE#rectablem .tablenumber {border-left: dotted thin gray; text-align: center; padding: 3px;}

THEAD.fixedhead {
  position: sticky;
  top: 3em;
  background-color: var(--box-bg);
  z-index: 1;
}

TABLE#rectable TBODY TR:focus-within,
  TABLE#rectablem TBODY TR:focus-within { background-color: rgba(0, 0, 0, 7%); }

/* species list */
UL.speciesbar { z-index: 1;
                 position: absolute;
                 margin-top: 0;
                 padding: 0.5em;
                 font-size: 0.9em;
                 background: var(--light-bg);
                 border: var(--genborder);
                 overflow: hidden;
                 max-height: calc(100vh - 13em);
                 display: none; 
                 box-shadow: 0 0.2em 0.6em gray;
                 transition: max-height 0.3s ease-out
                 }
UL.speciesbar:empty {cursor: progress; width: 21em; height: 11em;}                 
UL.speciesbar UL { padding-left: 1em;}                 
UL.speciesbar LI { display: block; }
UL.speciesbar > LI { font-weight: bold;}                 
UL.speciesbar LI.current { background-color: #f0f0f0; }                 
UL.speciesbar LI:hover { background-color: var(--hover-bg); }

/* flexible import */
TABLE.columnconf {border-collapse: collapse;}
TABLE.columnconf TR {border-bottom: dashed thin gray; }
TABLE.columnconf TD { /*vertical-align: top;*/ 
                      padding-left: 0.5em;
                      padding-right: 0.5em;
                      border-right: dashed thin gray; }
.steplist { text-align: center; }
SPAN.past, 
  SPAN.current, 
  SPAN.future { padding: 0.2em; border-radius: 0.2em; }
SPAN.past { background: #8c8; color: white; }
SPAN.current { background: khaki; }
SPAN.future, I.future { color: lightgray; }

DIV.statpopup { position: absolute; 
                z-index: 1; 
                padding: 0.5em;
                box-shadow: 0 0.2em 0.6em gray;
                background: var(--light-bg);
                border: var(--genborder); 
                text-align: left;}
DIV.statpopup TABLE.recordlist-infobox {display: block; max-height: 500px; overflow: auto; }
DIV.statpopup H3 { margin-top: 0; }
/* corner arrow */
DIV.statpopup::after {
  content: "";
  position: absolute;
  bottom: calc(100% - 1em);
  margin-left: -0.5em;
  border-width: 0.5em;
  border-style: solid;
  border-color: gray transparent transparent gray;
}

VIDEO { display: block; margin: 0 auto; border: solid thin black;}

/* Cropping */
CANVAS.cropper { display: block; background-repeat: no-repeat; 
   border: solid thin black; cursor: crosshair; touch-action: none; }
CANVAS.panning { cursor: all-scroll;}
CANVAS.cropping { }

DIV.topofpage { display: inline-block; position: fixed; right: 1em; bottom: 1em; visibility: hidden; 
  background: gray; color: white; border-radius: 0.3em; padding: 0.5em; opacity: 0.7; z-index: 1;}

.locationdescr TH, 
  .taxonids TH { text-align: left; vertical-align: top; }

.locationdescr, 
  .taxonids { margin-bottom: 1em; }