/*
	<SPAN class=TN>		Genus or higher taxon name (page heading)

	<ul class=SP>		Species information
	  ...
	  <li> data for one species, including SSP list, if any
		<ul class=SSP>	Subspecies infomation
		  ...
		  <li> data for one subspecies
		  ...
		</ul>
	  ...
	</ul>

	<DIV class=GROUP>	Grouping divider (green background)
	<DIV class=TN>		Taxon/grouping name (heading in the abov DIV blocks)
	<DIV class=LIST>	Generic container for various informaton.
	<DIV class=SENSU>	Used inside TN block after name entries.

	<SPAN class=SN>		Scientific Name

	<div class=CN>		Common Name section, each as SPAN
	  <span lang=xx ..>  ... </span>

	<ul class=LR>		References from literature
	  ...
	  <li><i>taxon</i>; reference
	  ...

	<ul class=WR>		Web references (link)
	  ...
	  <li>...
	  ...

	<SPAN class=ALERT>	Warnings about possible incorrect content
	<TABLE class=PHOTO>	Photograph thumbnail table
	<TABLE class=MAP>	Distribution maps and info
	<A class=SP NAME=x>	Species NAME entry point
	<A class=SSP NAME=x>	Subspecific NAME entry point (used for forms sometimes)
	<DIV class=GROUP>	Grouping divider of some kind (species, subgenus etc. divider)

	<SPAN class=CTR>	Species counts after names

	<ul class=RL>		Reference list
	  ...
	  <li>authors<br>title<i>publication</i>pagelist
	  ...
	</ul>
*/

body {
    /* background-color: #66cc99; */
    /*background-color: #e0ffe0; */
    background-color: #f0ffe0;
    /* background-image: url(icons/construct.gif);
       background-attachment: fixed; */
    color: black;
    font-family: sans-serif;
}

div.GROUP {
    background-color: #aaeeaa;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    padding-left: 3em;
    clear: both;
}
div.GROUP.SUB {
    background-color: #dfc;
}
span.ALERT {
    color: red;
    font-weight: bold;
}
span.TYPE {
    color: green;
    font-weight: bold;
}
abbr {
    font-style: normal;
    font-weight: normal;
}

span.MAP {
    position: relative;
    top: 0em;
    float: right;
    clear: right;
    width: 154px;
    font-size: 75%;
    text-align: center;
    text-indent: 0;
}

span.MAP img {
    /* These MUST match the real map images to avoid scaling */
    width: 150px;
    height: 78px;
}

div.PH {
    padding-left: 3em;
    padding-bottom: 1.5em;
}

span.CTR {
    font-size: 70%;
}

.CN > span[lang="en-US"]:before {
    content: url(icons/us.gif) "\2009";
}

.CN > span[lang="fi"]:before {
    content: url(icons/fi.gif) "\2009";
}

.CN > span[lang="en"]:before {
    content: url(icons/gb.gif) "\2009";
}

.CN > span[lang="sv"]:before {
    content: url(icons/se.gif) "\2009";
}

.CN > span[lang="de"]:before {
    content: url(icons/de.gif) "\2009";
}

.CN > span[lang="de-CH"]:before {
    content: url(icons/de.gif) "\2009";
}


.CN > span[lang="fr"]:before {
    content: url(icons/fr.gif) "\2009";
}

.CN > span[lang="fr-CA"]:before {
    content: url(icons/fr.gif) "\2009";
}


.CN > span[lang="es"]:before {
    content: url(icons/es.gif) "\2009";
}

.CN > span[lang="da"]:before {
    content: url(icons/dk.gif) "\2009";
}

.CN > span[lang="pl"]:before {
    content: url(icons/pl.gif) "\2009";
}

.CN > span[lang="et"]:before {
    content: url(icons/ee.gif) "\2009";
}

.CN > span[lang="hu"]:before {
}

.CN > span[lang="it"]:before {
}

.ficheck:before {
    content: url(icons/fi-check.gif) "\2009";
}
.fiflag:before {
    content: url(icons/fi.gif) "\2009";
}
.gbflag:before {
    content: url(icons/gb.gif) "\2009";
}

ul {
    margin: 0px;
}

ul.LR, ul.WR {
    font-size: 80%;
}

table.NAVIGATION {
    font-size: 85%;
    border: 0;
    width: 99%;
}

table.NAVIGATION td {
    width: 19%;
    margin-top: 1px;
    margin-left: 1px;
    background-color: #aaeeaa;
}

.prev { text-align: right; }
.prev span:after { content: "\2000" url(icons/left.gif) "\2009"; }
.next {	text-align: left; }
.next span:before { content: "\2009" url(icons/right.gif) "\2000"; }
.up:before { content: "\2009" url(icons/left.gif) "\2009"; }

table.NAVIGATION tr > td:first-child {
    width: 6%;
    margin-top: 1px;
    margin-left: 1px;
    background-color: #aaeeaa;
}

table.PHOTO {
    clear: both;
    border: solid;
    border-width: 1px;
    border-style: outset;
    margin-right: 1em;
    font-size: 80%;
    background-color: #f0fff0;
    margin-bottom: 0.5em;
}
table.PHOTO caption {
    text-align: left;
}

table.PHOTO img {
    border: 0;
    float: left;
    margin: 0.1em;
}

table.PHOTO td {
    border: solid;
    border-style: inset;
    border-width: 1px;
    padding: 2px;
    /* text-align: center; */
    vertical-align: top;
    width: 240px;
}

/* Referenced taxon name */
ul.LR > li > i:first-child, ul.WR > li > *:first-child {
    font-weight: bold;
}

hr { clear: both; }

ul.SENSU, ul.MISID {
    clear: none;
    font-size: 80%;
}

ul.SENSU > li, ul.MISID > li {
    padding-left: 2em;
}

ul.SP, ul.SPP {
    padding-left: 0em;
}

ul.SP > li {
    clear: both;
    padding-left: 3em;
    padding-top: 0.5em;
    border-top: 1px solid;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

ul.SP > li > div.TN > span.TN > i {
    font-weight: bold;
}

ul.SSP > li {
    clear: both;
    padding-left: 3em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

div.PH span.TN {
    font-size: 140%;
    text-indent: -2.14em; /* approx. 3em in 100% font-size */
    display: inline-block;
}
div.PH span.TN > i {
    font-weight: bold;
}

ul.LIST, ul.LIST > li {
    padding-left: 3em;
}

.LIST span.TN,.SP span.TN,.GROUP span.TN {
    text-indent: -3em;
    display: inline-block;
}

div.TN ul {
    padding-left: 0em;
}

p.NOTE {
    font-size: 75%;
    text-align: right;
}

p.ENDNOTE {
    font-size: 75%;
    text-align: center;
}

/* Warp page styles */

table.WARP {
    border-collapse: collapse;
    border: solid;
    border-width: 1px;
    width: 95%;
    background-color: #aaeeaa;
}

table.WARP td.HEADING {
}

table.WARP tr {
    border-top: 1px solid;
    vertical-align: top;
}

div.NAVBAR img {
    vertical-align: middle;
}


li { 
    list-style: none;
}
li span input {
    display: none;
}

li span input + label {
    height: 1em;
    width: 1em;
    display: inline-block;
    background: url(icons/left.gif) no-repeat;
    padding: 0 0 0 0px;
}

li span input:checked + label {
    height: 1em;
    width: 1em;
    background: url(icons/right.gif) no-repeat;
    display: inline-block;
    padding: 0 0 0 0px;
}
li span input + label + ol > li { display: none; }
li span input:checked + label + ol > li { display: block; }

/* li input:checked + ol > li:last-child { margin: 0 0 0.063em; } */

table.QUERY {
    border: solid;
    border-width: 1px;
    font-family: monospace;
}
table.QUERY th {
    text-align: left;
}
table.QUERY td {
    border: solid;
    border-width: 1px;
}

:target, :target span.TN i, :target .MAP {
    background: rgb(200,240,200);
}

ul.RL > li {
    padding-left: 3em;
    text-indent: -3em;
}

a[href^="#"]:not(:hover) {
    color: inherit;
    text-decoration: none;
}

div.PH div.MENTIONS {
    /* It would be nice to be able to define:
       - absolute max width for the column
       - minimum height or number of lines in a column, before filling next
       */
    margin-top: 1em;
/*    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
*/
    -webkit-column-width: 20em;
    -moz-column-width: 20em;
    column-width: 20em;

/* ARGH: Only if height fixed, not useful here
    column-fill: auto;
    -moz-column-fill: auto;
*/
}

div.PH div.MENTIONS li {
    /* Try to prevent column break within list -- works for firefox only sometimes */
    break-inside: avoid-column;
    page-break-inside: avoid;
    -webkit-column-break-inside: avoid;
    -moz-break-inside: avoid;
    display: table; /* seems to help firefox not split */
}

.INVALID {
    color: red;
}
.INVALID > span.TN:after {
    content: " [INVALID]";
}

.js {
    /* display: none; */
}

span.ext a:nth-child(2):after {
    content: "";
    display:inline-block;
    height: 1em;
    width: 1em;
    background-size: 1em 1em;
    background-image: url(icons/ext.svg);
    background-repeat: no-repeat;
}