@charset "UTF-8";
* {	outline: none; margin: 0; }
:root {
	--header-height: 59px;
	--content-padding: 18px;
	--before-page-title: 15px;
	--footer-height: 40px;
	--nav-bar-line: 12px;
	--nav-bar-offset: 6px;

	--color-background: #FFFFFF;
	--color-footer: #E0E0E0;
	--color-links: #a0a0a0;
	--color-internal-links: #000000;
	--color-text: #303030;
	--color-order: #6e47c9;
	--color-family: #1243d4;
	--color-genus: #258301;
	--color-species: #303030;
	--color-header: #d7d0bd;
	--color-header-much-darked: #48453c;
	--color-header-darked: #817c71;
	--color-header-little-darked: #837e73;
	--color-header-lighter: #ebe8df;
	--color-tooltip: #ECE90B;
}

/* Links */

a:link { color: var(--color-internal-links); text-decoration: none; }
a:visited { color: var(--color-internal-links); text-decoration: none; }
a:hover { color: var(--color-internal-links); text-decoration: underline; }
.internalLink { color: var(--color-internal-links); cursor: pointer; }
.internalLink:hover { text-decoration: underline; }
.header a:hover, .sectionHeader a:hover, .verticalList a:hover {  text-decoration: none; }

/* Taxa */

.family { color: var(--color-family) !important; font-weight: normal; }
.genus { color: var(--color-genus) !important; font-weight: normal; white-space: nowrap; }
.species { color: var(--color-species); font-weight: normal; }
.icon { font-family: Verdana; text-align: center; font-weight: bold; cursor: default; margin-left: 7px; display: inline-block; text-indent: 0; }
.icon:nth-of-type(1) { margin-left: 0.8em; }
.icon.conservation:nth-of-type(1) { margin-left: 1.3em; }
a .icon { cursor: inherit; }
.conservation { vertical-align: text-bottom; border-radius: 50%; width: 1.7em; line-height: 1.7em; text-align: center; border: 1px solid #404040; font-size: 0.65em; color: white; margin-left: 0.8em; }
.cons_NE { background: #FFFFFF; color: black; }
.cons_DD { background: #D1D1C6; color: black; }
.cons_LC { background: #60C659; }
.cons_NT { background: #BFD70E; }
.cons_VU { background: #ECC814; }
.cons_EN { background: #FC7F3F; }
.cons_CR { background: #D81E05; }
.cons_EX { background: #000000; }
.relict, .presence, .endemic { background-color: #d0d0d0; padding: 0 2px; }
.relict { background-color: #a2eff7; color: #009daf; }
.presence { background-color: #c1a1ff; color: #6311ff; }
.endemic { background-color: #ff9c99; color: #d32520; }

/* Search Box */

.searchForm input.searchInput { width: 50px; border: none; text-align: right; background-color: var(--color-header); margin-top: 23px; opacity: 80%; }
/* Why can't group these 3 selectors? */
.searchForm input.searchInput::placeholder { color:black; font-family: Verdana; font-size: 14px; font-variant: small-caps; }
.searchForm input.searchInput:-ms-input-placeholder { color:black; font-family: Verdana; font-size: 14px; }
.searchForm input.searchInput::-webkit-input-placeholder { color:black; font-family: Verdana; font-size: 14px; }
.searchForm.main ul.searchResult { right: var(--content-padding); }
.searchForm ul.searchResult { width: 612px; position: absolute; z-index: 100; display: none; padding: 6px;  background: white; border: 6px solid var(--color-header-darked); list-style: none; cursor: default; margin-top: 6px; margin-right: calc(0px - var(--content-padding)); }
.searchForm ul.searchResult li { cursor: pointer; padding: 0px 4px; white-space: nowrap; overflow: hidden; color: #606060; }
.searchForm ul.searchResult li.partialMarker { cursor: auto; text-align: left; font-weight: bold; }
.searchForm ul.searchResult li.selected { background: #ADEB68; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
.searchForm ul.searchResult li .data { display: none; }
.searchForm ul.searchResult li .text .textProper { float: left; }
.searchForm ul.searchResult li .text .textExtender { display: block; }
.highlight { text-decoration: underline; display:inline; }

html { height: 100%; }
body { background-color: var(--color-background); font-family: sans-serif, Verdana, Geneva, Arial, Helvetica; font-size: 14px; font-weight: normal; color: var(--color-text); margin: 0; height: 100%; }

/* Header */

.bodyUnder { min-height: 100%; position: relative; }
.adminHeader { position: absolute; top: 0; width: 100%; text-align: center; font-size: 11px; }
.header { padding: 0 var(--content-padding); height: var(--header-height); background-color: var(--color-header); display: flex;
	/* logo35.png generated at https://fontmeme.com/handwriting-fonts/ with Across the Road font */
/*	background-image: url('images/logo35.png');
	background-repeat: no-repeat;
    background-position: center center;
    background-size: 145px 48px;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    image-rendering: pixelated;*/
 }
a.menuItem { font-family: Verdana; font-size: 14px; font-weight: normal; white-space: nowrap; margin-right: 18px; display: inline-block; }
a.menuItem.active { color: var(--color-header-little-darked); }
.menuItem { padding: 22px 0 4px 0; font-variant: small-caps; opacity: 80%; }
.headerRight { display: flex; margin-left: auto; }
.headerLeft { display: flex; }
#dialog-about { padding: 17px 17px; }
#dialog-about a { color: var(--color-links); }
#dialog-about div.signature { margin-top: 24px; text-align: right; }

.content { position: relative; margin: var(--content-padding); padding-bottom: var(--footer-height); height: 100%; }

/* Title */

.variableWidth { float: right; background: var(--color-header); padding: 0.8em 1.2em 0.8em 1em; }
.variableWidth a { cursor: default; }
.verticalList { padding: 0; list-style-type: none; margin: 0; }
.verticalList .species { }
.verticalList li { padding-left: 12px; text-indent: -12px; vertical-align: text-top; line-height: 18px; }
h1 { font-size: 18px; font-weight: normal; margin: 0 0 0 0; }
.generaInFamily { font-size: 13.5px; }
.generaInFamily a { margin-right: 2px; }
h2 { font-size: 14px; font-weight: normal; margin: 16px 0 3px 0; }
h2:first-of-type { margin-top: 0; }
.navBar { font-family: Verdana; font-size: 11px; ; margin-bottom: 2px; }
.navBar ul { list-style: none; display: block; margin: 0; padding: 0; }
.navBar ul li { display: inline-block; white-space: nowrap; background-image: url(/images/small_arrow_right.png); background-repeat: no-repeat; background-position: 2px 3px; padding: 0 0 0 14px; }
.navBar ul li a { font-weight: normal !important; }
.navBar.family { top: var(--before-page-title) }
.navBar.genus { top: calc(var(--before-page-title) + var(--nav-bar-line)); margin-bottom: 4px; }
.generaInFamily { margin-top: 2px; }
.generaInFamily, h1.genus { margin-bottom: 40px; }
h1.species { margin-bottom: 60px; }
.summary { font-size: 15px; font-weight: normal; margin: 45px 0 35px 0; line-height: 1.5em; background: var(--color-header-lighter); padding: 10px; color: var(--color-header-much-darked); }

/* Content */

.line .family { font-size: 15px; }
.sectionHeader.taxon { display: table; margin-bottom: 30px; margin-left: calc(0px - var(--content-padding)); padding-left: var(--content-padding); padding-right: 10px; }
.tooltiptext { visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; padding: 5px 0; border-radius: 6px; position: absolute; z-index: 1; }
.sectionHeader:hover .tooltiptext { visibility: visible; }
.sectionHeader { text-align: center; padding: 7px 0 7px 0; font-size: 15px; margin-bottom: 6px; font-variant: small-caps; cursor: default; }
.sectionHeader * { opacity: 80%; }
.sectionHeader#families, .sectionHeader#species { border-right: 6px solid white; }
.sectionHeader#species, .sectionHeader#pictures { padding-left: var(--text-h-padding); }
.sectionHeader#pictures { margin-bottom: 10px; }
.cloud { text-align: center; -moz-text-align-last: center; text-align-last: center; }
.cloud .family, .cloud .genus { line-height: 19px; }
.cloud#families { margin-right: 6px; }
.higher { font-size: 13px; margin: 0 6px 0 10px; font-weight: bold; color: #404040; font-variant: small-caps; }
table { border-spacing: 0px; }
table tr td { padding: 0px; vertical-align: top; }
table.main#clouds { }
table.main#clouds tr td:first-child { width: 22.0%; }
table.main tr td:first-child .line { line-height: 17px; font-size: 13px; }
div.line { width: fit-content; margin-left: var(--content-padding); z-index: 1; position: relative; line-height: 1.3em; }
div.line:hover { background: white; z-index: 3; }
.genusAndFamilyContent { font-weight: bold; color: #404040; font-size: 18px; }
.genusAndFamilyContent .species { margin-bottom: 10px; }
.speciesList { position: absolute; margin-left: calc(0px - var(--content-padding)); border-bottom: var(--footer-height) solid white;}
.speciesList .sectionHeader { width: 400px; }
.mainGallery { text-align: center; }
.fadingBand1 { width: 34px; display: inline-block; position: absolute; background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,255,256,1)); height: 100%; }
.fadingBand2 { width: 6px; display: inline-block; position: absolute; left: 34px; background-color: white; height: 100%; }
.rightOfFadingBand { margin-left: 40px; display: inline-block; background: white; }
.gray { color: #b0b0b0 !important; }

/* Info */

.infobox { font-family: Verdana; font-family: cursive; font-size: 10px; display: flex; }
.infobox:not(:empty) { margin-bottom: 32px; height: 85px; }
.element { display: flex; align-items: center; padding: 10px; background: var(--color-header-lighter); margin-right: 1px; }
.altitude { cursor: default; text-align: center; font-size: 8px; line-height: 8px; font-variant: small-caps; }
.altitude .altitudeZone { background: #FFFFFF; position:relative; margin: 0 auto; border-bottom: 1px solid #404040; }
.altitude .altitudeZone:nth-child(1) { width: 15px; padding-top: 8px; border-top: 0; font-size: 9px; }
.altitude .altitudeZone:nth-child(2) { width: 23px; }
.altitude .altitudeZone:nth-child(3) { width: 31px; }
.altitude .altitudeZone:nth-child(4) { width: 39px; }
.altitude .altitudeZone:nth-child(5) { width: 47px; }
.altitude .altitudeZone:nth-child(6) { width: 55px; }
.altitude .altitudeZone:nth-child(7) { width: 63px; }
.altitude .altitudeZone::before { content: ""; height: 8.9px; width: 4px; background-color: var(--color-header-lighter); position: absolute; top: -1px; left: 0; transform: skewX(-23deg); transform-origin: top; -webkit-transform: skewX(-23deg); -webkit-transform-origin: 0 0; border-right: 1px solid #404040; }
.altitude .altitudeZone::after { content: ""; height: 8.9px; width: 4px; background-color: var(--color-header-lighter); position: absolute; top: -1px; right: 0; left: auto; transform: skewX(23deg); transform-origin: top; -webkit-transform: skewX(23deg); -webkit-transform-origin: 0 0; border-left: 1px solid #404040; }
.altitude .altitudeZone:nth-child(1)::before { height: 18px; width: 7px; }
.altitude .altitudeZone:nth-child(1)::after { height: 18px; width: 7px; }
.altitude .altitudeZone.on { background: #70B0F0; }
.frequency { cursor: default; font-size: 13px; }
.anthesis { cursor: default; }
.anthesis .month { display: inline-block; border: 1px solid #606060; font-size: 9px; width: 9.5px; text-align: center; line-height: 14px; margin-right: -1px; background: #FFFFFF; padding-top: 1px; }
.anthesis .month.on { background: #70B0F0; }
.height { cursor: default; font-size: 13px; }

/* Gallery */

.gallery { background: white; font-size: 0; }
.galleryEntryOver { display: inline-block; padding: 0 12px 3px 0; position: relative; vertical-align: top; }
.gallery:not(.compact) .galleryEntryOver:not(.tighter):not(:last-child)::after { content: "\2022"; position: absolute; right: 0; width: 12px; text-align: center; top: 50%; transform: translateY(-50%); font-size: 22px; color: #000000; }
.galleryEntryOver.tighter { padding-right: 3px }
.gallery.compact .galleryEntryOver { padding: 0 6px 6px 0; }
.gallery.mixed .galleryEntryContainer { padding: 1px 3px 1px 0; }
.gallery.compact .galleryEntryContainer { padding: 0; }
.gallery.leaf .galleryEntry { max-width: 1000px; display: inline-block; }
.galleryEntry .entryDescription { font-size: 11px; margin-left: 12px; text-indent: -12px; height: 22px; margin-top: 1px; }
.speciesAndGallery { display: flow-root; }
.speciesWrapper { margin: 0 0 0.3em 0; margin-top: 1.5em;}
.speciesAndGallery:first-child .speciesWrapper { margin-top: 0; }
/* Don't take up space displaying "?" (can appear under mixed-gallery pictures) */
.gallery.mixed .entryDescription { position: absolute; }
.galleryEntry .entryDescription p { text-align: left; margin: 0; }
.galleryEntry .entryDescription .species { line-height: 11px; }
.galleryA { vertical-align: middle; display: inline-block; position: relative; }
.overlay { position: absolute; right: 0; bottom: 0; margin: 10px 6px; border-radius: 50%; width: 21px; height: 21px; text-align: center; background-color: var(--color-tooltip); color: red; font-weight: bolder; font-size: 19px; font-style: italic; font-family: monospace; line-height: normal; pointer-events: none; }
.fancybox-overlay a { color: inherit; font-size: inherit; }
.groupConnector { position: absolute; width: 6px; height: 6px; background: var(--color-header); top: 4px; }
.imageTitle { }


/* Admin pages */

.subtext { font-size: 12px; font-weight: bold; top: calc(var(--before-page-title) + 20px); left: 0; color: var(--color-text) !important; }
table.pictures { border-spacing: 0; padding: 0; width: 100%; font-size: 12px; }
table.pictures tr td { border: 2px solid white; border-left: 0; border-right: 0; padding: 16px 6px; width: auto; }
table.pictures tr td { vertical-align: top; }
table.pictures tr td:first-child { padding: 16px 16px; text-align: center; width: 10px; }
table.pictures tr td:nth-child(2) { width: 350px; }
table.pictures tr { background: #EBF6E0; }
table.pictures tr.unidentified { background: #F4D0D0; }
table.pictures tr td.hidden { background: #686868; }
.valueName { color: #909090; font-size: 12px; font-family: Arial, Helvetica, sans-serif; }
table.authors tr td:first-child { text-align: right; padding-right: 5px; }

.adminHighlight { color: #FF0000; }
.pageNumbers { margin: 0 0; }
.pageNumbers a { margin: 0 0; color: #b0b0b0; }

 div.statistic { margin: 20px 0; }
.errors { color: red; }
.ok { color: green; }

/* jQuery UI Dialogs */

.deleteDialog .ui-dialog-titlebar { background: #F03830; }
.editDialog .ui-dialog-titlebar { background: #FFA000; }
.infoDialog .ui-dialog-titlebar { background: #4090FF; }
#dialog-show-exif { display: none; }
#exif { font-size: 10px; }
#dialog-change-species { display: none; }
#dialog-change-species textarea { width: 100%; height: 20px; }
#dialog-change-date { display: none; }
#dialog-change-choronym { display: none; }
#dialog-change-choronym textarea { width: 100%; height: 50px; }
#dialog-change-obs { display: none; }
#dialog-change-obs textarea { width: 100%; height: 50px; }
#dialog-change-copyright { display: none; }
#dialog-change-copyright textarea { width: 100%; height: 100px; }
#dialog-delete { display: none; }
#dialog-about { display: none; }
.ui-dialog .ui-dialog-titlebar { padding: .2em 1em !important; }

/* Tooltip */

body .ui-tooltip { border-width: 0; }
.ui-tooltip { padding: 3px 4px 4px 4px; font-size: 11px; background: var(--color-tooltip); max-width: 1000px; border: 1px solid #808080; -webkit-box-shadow: 0 0 0; box-shadow: 0 0 0; border-radius: 0px; }

/* Classification */

.tree { font-family: sans-serif; font-size: 16px; }
.node { display: grid; grid-template-columns: auto 1fr; }
/* Parent-of-leaves nodes (set by JS) */
.node .label {
    display: flex;
    justify-content: flex-start; /* align at top of container */
    align-items: center;         /* horizontal alignment */
    padding: 8px 5px;
    margin: 2px 0;
    writing-mode: vertical-rl;   /* vertical block */
	background: var(--color-header);
	color: var(--color-header-darked);
	font-weight: bold;
	font-variant: small-caps;
}
.node .label span {
    display: inline-block;
    transform: rotate(180deg); /* flips text inside vertical block */
}
.node.order .label, .node.families .label { writing-mode: horizontal-tb; padding: 6px 8px; width: 8.5em; font-size: 14px; font-variant: normal; }
.node.order .label { color: var(--color-order); }
.node.families .label { background: white; color: var(--color-family); font-weight: normal; padding: 6px 2px; }
.node .children { display: flex; flex-direction: column; margin-left: 4px; }

/* List */

table.list { border-spacing: 1px; }
table.list tr th:nth-child(1) { }
table.list tr th:nth-child(2) {  text-align: left; }
table.list tr th:nth-child(3) {  text-align: left; }
table.list tr th:nth-child(4) { }
table.list tr th:nth-child(5) { }
table.list tr th:nth-child(6) { }
table.list tr th:nth-child(7) { }
table.list tr th:nth-child(8) { }
table.list tr th:nth-child(9) { }
table.list tr th:nth-child(10) { }
table.list tr { background: #f0f0f0; }
table.list tr th { background: white; height: 20px; vertical-align: top; }
table.list tr:nth-child(even) { background: #e0e0e0; }
table.list tr td { padding: 3px 3px; }
table.list tr td:nth-child(1) { text-align: right; }
table.list tr td:nth-child(2) { }
table.list tr td:nth-child(3) { }
table.list tr td:nth-child(4) { text-align: center; }
table.list tr td:nth-child(5) { text-align: center; }
table.list tr td:nth-child(6) { text-align: center; }
table.list tr td:nth-child(7) { text-align: center; }
table.list tr td:nth-child(8) { text-align: center; }
table.list tr td:nth-child(9) { text-align: center; }
table.list tr td:nth-child(10) { text-align: center; }

/* Species lists */

ul.speciesListFlex { list-style: none; margin: 0; padding: 0; }
ul.speciesListFlex li { line-height: 1.5em; break-inside: avoid; }
ul.speciesListMulti { list-style: none; margin: 0; padding: 0; column-width: 42em; }
ul.speciesListMulti li { line-height: 1.5em; break-inside: avoid; padding-left: 12px; text-indent: -12px; white-space: nowrap; }
.speciesColumns { display: flex; gap: 20px; }
.speciesColumns ul { flex: 1; margin: 0; padding: 0; }
.species-columns li { }
.speciesListMulti { margin-left: calc(0px - var(--content-padding)); border-bottom: var(--footer-height) solid white;}

/* Info Editors */

.adminMenu { cursor: pointer; }
.adminMenu span { margin-left: 3px; }
.editDialog .ui-dialog-titlebar { background: #FFA000; }
#dialog-edit-height { display: none; }
#dialog-edit-height input { width: 200px; }