/*https://polypane.app/blog/understanding-the-fundamentals-of-css-layout/*/
/* verwijdert de character codes */


#scrollposition
{
	display: block; 
	position: fixed; 
	top: 1rem; 
	right: 1rem; 
}

#subheader_genus_in_higher_taxa
{
width: 45rem;
display: block; 
position: relative;  	
}

p
{
display: inline;
display: none;
}

p.selected
{
display: inline;
background-color: #00FF00; 
margin-right: 0.5rem; 
border: 1px solid black; 
}

label{
	margin: 0.2rem; 
}
input[type='checkbox'] 
    {
   display: none;
    }
	
/* Hide the radio inputs */
.tabs input[type="radio"] {
    display: none;
}

/* Style the labels (tabs) */
.tabs label {
    cursor: pointer;
    display: inline-block;
    margin-right: 0.2rem;
    padding: 0.2rem;
}

/* Style the content sections */
.tab-content {
    display: none;
    padding: 1rem;	
}

/* Display content when a tab is selected */
.tabs input[type="radio"]:checked + label + .tab-content {
display: block;
position: fixed; 
border: 1px solid black;
width: 70%;
display: block; 
left: 10px;
right: 0px;
top: 11rem;
bottom: 0px;
overflow: auto;
font-family: Verdana, Arial, sans-serif;
font-size: 15px;
background-color: #F0F0F0; 
margin: 0px;
padding: 0.5rem;
}

/* maakt labels van de geselecteerde tabbladen baobab blue */
.tabs input[type="radio"]:checked + label {
background-color: #ADD9FE;
border: 1px solid black;
padding-left:0.2rem;
padding-right:0.2rem;
border-radius:0.5rem 0.5rem 0 0 ; 
font-size: 1rem; 
}

/* maakt labels van de niet geselecteerde tabbladen grijs */
.tabs input[type="radio"]:not(:checked) + label {
background-color: #EEEEEE;
border: 1px solid black;
padding-left:0.2rem;
padding-right:0.2rem;
border-radius:0.5rem 0.5rem 0 0 ; 
font-size: 1rem; 
}

/* maakt labels van geselecteerde characters groen */
input[type="checkbox"]:checked + label {
background-color: #00FF00;
border: 1px solid black;
padding-left:0.2rem;
padding-right:0.2rem;
font-size: 1rem; 
}

/* maakt labels van de NIET geselecteerde characters grijs */
input[type="checkbox"]:not(:checked) + label {
background-color: #DDDDDD;
border: 1px solid black;
padding-left:0.2rem;
padding-right:0.2rem;	
font-size: 1rem; 
}

#selected_characters_javascript
{
display: block;
position: fixed;
font-size: 1.0rem; 
padding: 1.0rem;
right: 10px;
border: 1px solid black;
margin: 0px;
width: 25%;
height: auto;
color: black;
top: 11rem;
background-color: #ADD9FE; 
overflow: auto;
bottom: 0px;
}

.genus_determination
{
width: 4rem; 	
}

.description_determination
{
width: 40rem; 
text-align: justify;
text-justify: inter-word;
padding: 1rem; 	
}

#cbResults
{
border: 0px solid black;
}

#textResults
{
border: 0px solid red;
}

#radioResults
{
border: 0px solid green;	
}

#characters
{
display: block; 
position: relative;
left: 10px;
right: 0px;
top: 0px;
bottom: 0px;
overflow: auto;
overflow-wrap: normal;
background-color: #F0F0F0; 
border: 0px solid black;
margin: 0px;
padding: 0px;
}

#button_select_genera
{
position: relative;
display: block;
left:1px;
top: 1px;
width: 55px;
height: 55px;
border: 0px solid white;
}

body{
background-color: white; 
font-family: Verdana, Arial, sans-serif; 
font-size: 1.3rem;	
}

.about
{
background-color: #ADD9FE; 	
}

#baobab
{
display: block;
position: fixed;
top: 0rem;
left: 0rem;  
border: 0px solid grey; 
height: 7rem; 
width: 7rem; 
display: block; 
margin: 0rem;
padding: 0rem;  		
}

.container_header
{
	position: fixed; 
	display: block;
	top: 0px;
	left: 6rem;
	width: 100%;
	height: 3.2rem;
	background-color: #ADD9FE; 
	border-bottom: 0.4rem solid #ADD9FE;	
}

.top_1
{
left: 0rem;
}

.top_2
{
top: 3.4rem;	
}

#bottom_line
{
display: block; 
position: fixed; 
border-top: 1px solid black; 
top: 6.3rem; 
width: 100%; 
left: 0rem; 	
}


.top_3
{
top: 7rem;	
width: 100%;
left: 0rem;
background-color: grey;	
border-bottom: 3px solid grey;
}

.header_results_determination
{
top: 7rem;	
width: 100%;
height: 9rem; 
padding: 0.5rem; 
left: 0rem;
background-color: #DDDDDD;	
border-bottom: 3px #DDDDDD;
}

.header_filter_determination
{
top: 7rem;	
width: 100%;
height: 9rem; 
padding: 0.5rem; 
left: 0rem;
background-color: #DDDDDD;	
border-bottom: 3px #DDDDDD;
}

.top_4
{
top: 14rem;
width: 100%;
left: 0rem;  
background-color: grey;	
border-bottom: 3px solid grey;
}

#version
{
display: block; 
position: fixed; 
right: 5rem; 
top: 1rem; 
}

#container_subheader
{
position:fixed;
display: block;
top: 7.0rem;
left: 0px;
font-size: 1.5rem; 
padding: 4px;
border: 0px solid black;
margin: 0px;
width: 100%;
/*height: 120px;*/
height: 7rem;
color: black;
background-color: #F0B531;
}

#text_subheader
{
position:absolute;
display: block;
font-size: 1.25rem; 
padding : 0.1rem;
left: 0rem;
margin-left: 0.8rem;
border: 0px;
vertical-align: top;
}

#text_subheader.volumes
{
left: 4.5rem;
}

#buttons_subheader
{
position:fixed;
display: block;
top: 7rem;
left: 0rem;
font-size: 1.3rem; 
padding: 0.1rem;
border: 0px solid black;
margin: 0px;
width: 4rem;
height: 7rem;
color: black;
background-color: #F0B531;
}

.button{
float: left; 
margin-right: 0.5rem; 
margin-left: 0.5rem;
margin-top: 0.2rem; 
margin-bottom: 0.2rem;
border: 0px solid grey; 
border-radius: 0.5rem; 
height: 3rem; 
width: 3rem; 
cursor: pointer;
text-align: centre;
padding: 0.1rem; 
font-size: 0.8rem;
color: black; 	
}

.border{
border: 1px solid grey; 	
}

.resultset
{
font-size: 1.1rem;
background-color: white; 
margin-top: 0.5rem; 
}

hr.header_determination
{
	padding: 0.2rem;
	margin:  0rem; 
	width: 100%; 
}

.header_1
{
width: auto; 
height: 3rem; 
font-size: 1.0rem; 	
background-color: #ADD9FE;
margin-right: 0.2rem; 
margin-left: 0.2rem; 
}

.header_1:hover
{
	
background-color: #666666;	
color: white; 
height: 3rem; 
}

.header
{
width: 7rem; 
height: 3rem; 
font-size: 1.0rem; 	
background-color: #CCCCCC;
}

.auto
{
width: auto; 
}

.home
{
border: 0px solid red;
display: block; 
position: relative; 
top: 0.4rem;  
}

.page_TL2
{
float: none; 
width: 6rem; 
font-size: 1rem;
}

figure
{
margin-left: 0.4rem; 
margin-top: 0.8rem; 
padding: 0rem;
}

._1-500
{
	border: 1px solid black;
	background-color: #DDDDDD; 	
	font-size: 1.0rem; 
}

.grey
{
background-color: #DDDDDD;
border-bottom: 0.4rem solid #DDDDDD; 
}

.blue
{
background-color: #ADD9FE;
}

.right
{
float: right; 	
}

span
{
	font-size: 1.3rem; 
}

form
{
display: inline;
}

.selected
{
background-color: white;		
}

.search_box {
float: left; 
border: 1px solid black; 
width: 18rem;
height: 3rem;
color: black;  
font-size: 1.4rem; 
border-radius: 0.5rem; 
margin-right: 0.7rem;
margin-left: 0.7rem; 
margin-top: 0.2rem; 
padding-left: 0.5rem;  
display: block; 
position: relative;  
}

.long
{
width: 37.4rem;	
}

.italic
{
font-style: italic;	
background-color: #DDDDDD;
}

#container_resultset
{
display: block; 
position: fixed;
width: 99%;
left: 0px; 
height: auto; 
bottom: 2rem; 
overflow: scroll;
border: 1px solid green;
margin-left: 0.8rem; 
}

.info
{
	width: 40rem;
	padding: 1rem; 
}

#container_genera_taxa{
left: 540px;
display: block; 
position: fixed; 
top: 250px;
height: auto;
bottom: 0px;
border: 1px solid blue; 
color: black;
width: 500px;   
overflow: auto;
padding-right: 10px;
padding-left: 5px;
padding-bottom: 5px;
padding-top: 5px;
bottom: 2rem; 
}


#thumbs_right_higher_taxa
{
left: 48rem;
display: block; 
position: fixed; 
top: 19rem;
height: auto;
bottom: 0px;
border: 1px solid green; 
color: black;
width: auto;  
overflow: auto;
padding: 0.4rem;
bottom: 2rem; 
}

#container_resultset._1
{
top: 4rem;
}

#container_resultset._2 
{
top: 7rem;	
}

#container_resultset._3
{
top: 11rem;	
}

#container_resultset._4
{
top: 15rem;
}

#container_resultset._5
{
top: 18rem;	
}

#container_resultset._6
{
top: 21rem;	
}

#container_resultset._7
{
top: 24rem;	
}

#container_resultset._8
{
top: 27rem;	
}

#container_resultset._9
{
top: 30rem;	
}

#container_resultset._10
{
top: 33rem;	
}

#container_resultset._11
{
top: 36rem;	
}

#container_resultset._12
{
top: 39rem;	
}

#container_resultset._13
{
top: 42rem;	
}

#container_resultset._14
{
top: 45rem;	
}

._30procent
{
width: 30%; 	
}

table { 
	margin: 0rem;
	border: 0rem;
	width: 100%;
	font-size: 1.3rem;
	border-collapse: collapse; 
}

tr {
  margin: 0rem;
  padding: 0rem;
  border: 0rem;
  width: 100%;
}

td {
  display: table-cell;
  border:  1px solid black;
  padding: 0.5rem;
  vertical-align: top;
  text-align: left;
  margin: 0rem;
}

.volgnummer
{
width: 4rem; 	
}

.volgnummer:hover
{
width: 4rem; 
background-color: #666666;	
color: white; 
}

.doorverwijzing
{
width: 4rem; 
	
}

.doorverwijzing:hover
{
width: 4rem; 
background-color: #666666;	
color: white; 	
}

.uneven {
  background-color: #EEEEEE;
  color: black;
}

.even {
  background-color: #DDDDDD;
  color: black;
}

.table {
  width: 100%;
  display: table;
  margin: 0px;
  border: 1px solid black;
}
.tableRow {
  display: table-row;
  margin: 0px;
  border: 1px solid black;
}

.tableCell {
  display: table-cell;
  border:  0px solid black;
  vertical-align: top;
  padding-left: 4px;
  padding-right: 4px;
  border: 1px solid black;
}

.thumbnail_and_text
{
padding: 10px;
margin-left: 10px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
background-color: #F0F0F0;
border: 1px solid black;
margin: 10px; 
position: relative; 
}

.contrasting
{
background-color: #D0D0D0;
}

a {
  text-decoration: none; 
}

a:link {
  color: black;
}

a:visited {
  color: brown;
}

a:hover {
  background-color: yellow;
}

a:active {
  color: yellow;
}


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

.tooltip .tooltiptext {
    visibility: hidden;
    width: 14rem;
	background-color: black;
	color: white;
	z-index: 1;
	top: 85%;
	left: 2%;
	margin: 0rem; 
	text-align: left;
    border-radius: 0.5rem;
    padding: 0.4rem;
	position: absolute;
	border: 0px solid black;
	font-size: 0.8rem;
}

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

img {
position: relative;
padding: 0.3rem;
border: 0rem;
margin: 0rem; 
}



.thumbnail_compare {
padding-left: 2px;
padding-right: 2px;
padding-bottom: 2px;
padding-top: 2px;
border: 10px solid yellow;
margin-left: 0px;
margin-right: 20px;
margin-bottom: 0px;
margin-top: 0px;
}

.thumbnail_selected {
padding-left: 2px;
padding-right: 2px;
padding-bottom: 2px;
padding-top: 2px;
border: 4px solid red;
margin-left: 1px;
margin-right: 1px;
margin-bottom: 0px;
margin-top: 0px;
}

.thumbnail_unselectable_dotted_red {
padding-left: 2px;
padding-right: 2px;
padding-bottom: 2px;
padding-top: 2px;
border: 4px dotted red;
margin-left: 1px;
margin-right: 1px;
margin-bottom: 0px;
margin-top: 0px;
}

.thumbnail_unselectable_gray {
padding-left: 2px;
padding-right: 2px;
padding-bottom: 2px;
padding-top: 2px;
border: 4px solid gray;
margin-left: 1px;
margin-right: 1px;
margin-bottom: 0px;
margin-top: 0px;
float: left; 
}

.thumbnail_not_selected {
padding-left: 2px;
padding-right: 2px;
padding-bottom: 2px;
padding-top: 2px;
border: 4px solid yellow;
margin-left: 1px;
margin-right: 1px;
margin-bottom: 0px;
margin-top: 0px;
}

#container_resultset_taxonomy_left
{
display: block; 
position: fixed;
left: 0px;
width: 49%;
top: 25rem;
bottom: 0px;
overflow: auto;
font-family: Verdana, Arial, sans-serif;
font-size: 15px;
background-color: #F0F0F0; 
border: 1px solid green;
}

#container_resultset_taxonomy_right
{
display: block; 
position: fixed;
right: 0px;
width: 49%;
top: 25rem;
bottom: 0px;
overflow: auto;
font-family: Verdana, Arial, sans-serif;
font-size: 15px;
color: black;
border: 1px solid blue;
}

#yellow
{
font-weight: bold;
background-color: yellow;
display: inline;
}

#info_illustration_left
{
position: fixed;
display: block; 
left: 1rem;
top: 7.5rem; 
width: 40rem;
height: auto;
padding: 2px;
font-family: Verdana, Arial, sans-serif;
font-size: 1.0em;
background-color: #FFFFFF; 
border: 0px solid yellow;
}

#recognized
{
	position: static;
	display: block;
	width: 100%; 
	border: 1px solid #F0F0F0;
	background-color: #F0F0F0; 
}

h1 {
font-size: 1.0rem;
}

#container_illustration_desktop
{
position: fixed;
top: 7.5rem;
left: 42rem;
right: 0px;
bottom: 0px;
padding: 0px;
margin: 0px;
border: 0px solid black;
overflow: auto;
bottom: 0.5rem; 
}

.hd_illustration
{
font-size: 0.6em;	
}

.illustration_full_size
{
position: relative;
padding: 0px;
margin: 0px;
border: 0px solid blue;
height: 100%;
}

/*	
#button_info_in_species
{
position: fixed;
display: block;
left: 10px;
top: 250px;
font-size: 1.0rem;
padding-top: 1px;
padding-right: 4px;
padding-bottom: 4px;
padding-left: 4px;
margin: 0px;
border: 0px;
width: 55px;
height: 55px;
vertical-align: top;
background-color: transparent;
border: 2px solid black;
border-radius: 4px; 
cursor: pointer; 	
}

#button_info_in_species.selected
{
background-color: #ADD9FE;	
}


#button_genus_in_species
{
position: fixed;
display: block;
left: 80px;
top: 250px;
font-size: 0.8rem;
padding-top: 1px;
padding-right: 4px;
padding-bottom: 4px;
padding-left: 4px;
margin: 0px;
border: 0px;
width: 55px;
height: 55px;
vertical-align: top;
background-color: transparent;
border: 2px solid black;
border-radius: 4px; 
cursor: pointer; 	
}

#button_genus_in_species.selected
{
background-color: #ADD9FE;	
}

/*



html {
  font-size: 16px; 
}

img.HD{
pointer-events: none; 	
}

.text_button
{
font-size: 0.7rem;
}

figure
{
	margin: 0.5rem; 
}



#container_header_tl2_tablet
{
	position: fixed; 
	display: block;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 65px;
	background-color: #000000; 
	color: #FFFFFF;	
}
	
#info_black_button_tl2
{
position: fixed;
display: block;	
top: 2px; 
left: 290px;
height: 55px;
width: 55px;
padding: 0px;
margin: 0px;
border: 1px solid gray;   
border-radius: 4px;  
}

#info_blue_button_tl2
{
position: fixed;
display: block;	
top: 2px; 
left: 290px;
height: 55px;
width: 55px;
padding: 0px;
margin: 0px;
border: 1px solid gray;   
border-radius: 4px;  
}	

#container_menu_level_3_tablet 
{
position: fixed;
display: block;
top: 120px;
left: 0px;
font-family: Verdana, Arial, sans-serif;
font-size: 13px;
padding: 0px;
border: 1px solid red;
margin: 0px;
width: 100%;
height: 70px;
background-color: #F0F0F0;
}

#menu_level_3_tablet 
{
position: relative;
display: block; 
padding: 0px;
margin: 0px;
width: 100%;
height: 55px;
left: 0px;
top: 2px;
font-family: Arial, sans-serif;
font-size: 12px;
}

#menu_level_3_tablet.determination 
{
	top: 299px; 
}

#menu_level_3_tablet ul
{
margin: 0px; 
border: 0px;
padding: 0px;
left: 20px;
list-style-type: none;
display: block;
position: relative; 
}

#menu_level_3_tablet ul li 
{
	display: inline;
	padding: 0px;
	border: 0px;
	margin: 0px;
	float: left;
	font-family: Verdana, Arial, sans-serif;
	text-decoration: none;
	font-style: bold;
	list-style-type: none;
	padding: 0px;
	margin: 5px; 
	background-color: #F0F0F0;
	border:2px solid #000000;
	border-radius: 5px; 
	color: #000000;
	height: 55px; 
}

#menu_level_3_tablet ul li input
{
	font-family: Verdana, Arial, sans-serif;
	text-decoration: none;
	font-style: default; 
	list-style-type: none; 
	padding: 0.1rem 0.1rem; 
	border: 0px solid black; 
	color: #000;
	float: left;
	cursor: pointer; 
}


#menu_level_3_tablet ul li input.selected
{
	background-color: yellow;
	color: #000;
}

#menu_level_3_tablet ul li input:hover
{
	background-color: #005d1F;
	color: #FFFFFF;
}



#header_2
{
position: fixed;
display: block;	
top: 60px; 
left: 0px; 
width: 100%;
height: 60px;
background-color: black;
}

#header_2.index
{
width: 300px;

}

#order_id_publication
{
position: relative;
display: inline-block;	
float: left; 
top: 2px;  
margin-left:  10px; 
color: #FFFFFF;
background-color: #444444;
border: 1px solid white;
border-radius: 4px;
width: 55px;
height: 55px;
cursor: pointer;  	
}

#order_id_publication.selected
{
color: #000000;
background-color: #ADD9FE; 	
}		
		
#order_author
{
position: relative;
display: inline-block;	
float: left; 
top: 2px;  
margin-left:  10px; 
color: #FFFFFF;
background-color: #444444;
border: 1px solid white;
border-radius: 4px;
width: 55px;
height: 55px;
cursor: pointer;  	
}

#order_author.selected
{
color: #000000;
background-color: #ADD9FE; 	
}

#order_title
{
position: relative;
display: inline-block;	
float: left; 
top: 2px;  
margin-left: 10px;
color: #FFFFFF;
background-color: #444444;
border: 1px solid white;
border-radius: 4px;
width: 55px;
height: 55px;
cursor: pointer;	
}
	
#order_title.selected
{
color: #000000;
background-color: #ADD9FE;	
}

#order_year
{
position: relative;
display: inline-block;	
float: left; 
top: 2px; 
margin-left:  10px; 
color: #FFFFFF;
background-color: #444444;
border: 1px solid white;
border-radius: 4px;
width: 55px;
height: 55px;
cursor: pointer; 	
}

#order_year.selected
{
color: #000000;
background-color: #ADD9FE;	
}

#order_id_tl2
{
position: relative;
display: inline-block;	
float: left; 
top: 2px; 
margin-left:  10px; 
color: #FFFFFF;
background-color: #444444;
border: 1px solid white;
border-radius: 4px;
width: 55px;
height: 55px;
cursor: pointer; 	
}

#order_id_tl2.selected
{
color: #000000;
background-color: #ADD9FE;	
}

#order_id_nissen
{
position: relative;
display: inline-block;	
float: left; 
top: 2px; 
margin-left: 10px; 
color: #FFFFFF;
background-color: #444444;
border: 1px solid white;
border-radius: 4px;
width: 55px;
height: 55px;
cursor: pointer; 	
}

#order_id_nissen.selected
{
color: #000000;
background-color: #ADD9FE;	
}

.button_tablet
{position: relative;
display: block;	
top: 2px; 
float: left; 
height: 55px;
width: 55px;
padding: 0px;
margin-right: 10px;
border: 1px solid gray; 
border-radius: 4px;}


#transparant
{
position: fixed;
display: block; 
padding: 0px;
margin: 0px;
border: 1px solid black;	
background-color: transparant; 		
width: auto; 
left: 0px; 
top: 62px; 
height: auto; 
}



p {
display: none;
}

p.selected {
display: block;
background-color: #00FF00; 
}

p.nobreak {
white-space:nowrap;
display: inline;
}

p.vissible {
display: none;
}

#even
{
background-color: #DDDDDD; 
}

#uneven
{
background-color: white; 	
}



.button_index {
color: #000000;
margin-top: 0px;
background-color: white;
border-radius: 8px;
width: 55px;
height: 55px;
cursor: pointer;
text-align: centre;
font-size: 0.9rem;
}

.button_header_tablet {
color: #FFFFFF;
margin-top: 0px;
background-color: black;
border: 1px solid white; 
border-radius: 8px;
width: 55px;
height: 55px;
cursor: pointer;
text-align: centre;
font-size: 0.8rem;
}

.button_header_tablet_unabled {
color: #AAAAAA;
margin-top: 0px;
background-color: black;
border: 1px #AAAAAA;
border-radius: 8px;
width: 55px;
height: 55px;
cursor: pointer;
text-align: centre;
font-size: 0.8rem;
}


#yellow
{
background-color: yellow;
display: inline;
}

.yellow
{
background-color: yellow;
display: inline;
}



#container_header_1
{
	position: fixed; 
	display: block;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 60px;
	background-color: #000000; 
	color: #FFFFFF;	
}











#thumbnail_and_text
{
padding: 10px;
margin-left: 10px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
background-color: #F0F0F0;
border: 1px solid black;
margin: 10px; 
position: relative; 
}

#thumbnail_and_text_contrasting
{
padding: 10px;
margin-left: 10px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
background-color: #D0D0D0;
border: 1px solid black;
margin: 10px; 
position: relative; 
}

.button_group_by_species_volgnummer
{

color: #000000;
margin-bottom: 5px;
background-color: white;
border-radius: 8px;
width: 55px;
height: 55px;
cursor: pointer;
text-align: centre;
font-size: 0.9rem;
background-color: white; 
border: 2px solid black;
border-radius: 0.5rem  	
}




#button_200.selected{
background-color: #ADD9FE; 	
color: #000000;
border: 1px #ADD9FE; 
border: 1px solid white;
border-radius: 0.5rem;
}
		


#button_350.selected{
color: #000000;
background-color: #ADD9FE;
border: 1px #ADD9FE; 
border: 1px solid white;
border-radius: 0.5rem; 
float: right; 
}	

#select_box {
position: fixed;
display: block;	
top: 66px; 
right: 680px;
width: 150px;
height: 45px;
padding: 0px;
margin: 0px;
border: 0px solid white;  
color: white;
background-color: #000000; 
font-size: 1.4rem;
border-radius: 0.5rem;  
}

#search_box_vernacular {
position: fixed;
display: block;	
top: 66px;
left: 10px;
width: 240px;
height: 45px;
padding: 3px;
margin: 0px;
border: 0px solid white; 
font-style: italic; 
background-color: #E0E0E0; 
color: red;  
font-size: 1.4rem;
border-radius: 0.5rem;  
}

#search_box_scientific {
position: fixed;
display: block;	
top: 66px; 
left: 260px;
width: 330px;
height: 45px;
padding: 3px;
margin: 0px;
border: 0px solid white; 
color: black;  
font-size: 1.4rem; 
border-radius: 0.5rem;  
}		
				
#loupe {
position: fixed;
display: block;	
top: 61px; 
left: 600px;
padding: 0px;
margin: 0px;
border: 1px solid red;  
border-radius: 0.5rem;  	
}		

#container_resultset
{
display: block; 
position: fixed;
width: 100%;
top: 60px;
left: 0px; 
height: 1200px; 
overflow: scroll;
border: 0px solid green;
}

#container_resultset._1
{
top: 61px;
}

#container_resultset._2 
{
top: 122px;	
}

#container_resultset._3
{
top: 198px;	
}

#container_resultset._4
{
top: 255px;	
}

#container_resultset._5
{
top: 305px;	
}

#resultset_tablet
{
left: 0px;
display: block; 
position: relative; 
border: 0px solid red;
margin: 0px;
padding-left: 4px;
padding-right: 4px;
top: 2px;
}


#header_tablet_hd_illustration
{
position: fixed; 
display: block; 
left: 0px;
top: 0px;
border: 1px solid gray;
width: 100%;
height: 60px;
background-color: #000000;
}

#button_home_hd_tablet
{
position: fixed; 
display: block; 
left: 220px;
top: 1px;
border: 1px solid white;
border-radius: 0.5rem;
width: 55px;
height: 55px;
}


#button_tablet_hd_illustration_tablet
{
position: fixed; 
display: block; 
left: 290px;
top: 1px;
border: 1px solid white;
width: 55px;
height: 55px;
color: white; 
background-color: black; 
border-radius: 0.5rem
}


#button_hd_desktop_hd_illustration_tablet
{
position: fixed; 
display: block; 
left: 360px;
top: 1px;
border: 1px solid white;
width: 55px;
height: 55px;
color: white; 
background-color: black; 
border-radius: 0.5rem
}

#button_info_hd_illustration_tablet
{
position: fixed; 
display: block; 
left: 430px;
top: 1px;
border: 1px solid white;
width: 55px;
height: 55px;
color: white; 
background-color: black; 
border-radius: 0.5rem
}

#button_info_hd_illustration_tablet.selected
{
color: #FFFFFF;
background-color: #ADD9FE;
}

#enlarge_to_full_size_mobile
{
position: fixed;
top: 1px;
left: 500px;
border: 1px solid white;
border-radius: 0.5rem
}

#tablet_header_short{
position: fixed;
display: block;	
top: 1px; 
left: 290px;
padding: 0px;
margin: 0px;
border: 1px solid red;    
}	

#show_illustrations_species{
position: fixed;
display: block;	
top: 1px;
width: 55px;
height: 55px;
left: 570px;
padding: 0px;
margin: 0px;
border: 1px solid white; 	
border-radius: 0.5rem
}

#genus{
position: fixed;
display: block;	
top: 1px; 
left: 640px;
width: 55px;
height: 55px;
padding: 0px;
margin: 0px;
border: 1px solid white; 			
}

#volume{
position: fixed;
display: block;	
top: 1px;
width: 55px;
height: 55px;
left: 710;
padding: 0px;
margin: 0px;
border: 1px solid white; 
border-radius: 0.5rem	  		
}

#artist{
position: fixed;
display: block;	
top: 1px; 
left: 780px;
width: 55px;
height: 55px;
padding: 0px;
margin: 0px;
border: 1px solid white; 			
}

#arrow_volume_previous{
position: fixed;
display: block;	
top: 1px; 
left: 850px;
padding: 0px;
margin: 0px;
border: 1px solid white;
width: 55px;
height: 55px;
border-radius: 0.5rem
}

#open_boek
{
position: fixed;
display: block;	
top: 1px; 
left: 910px;
padding: 0px;
margin: 0px;
border: 0px solid white;
width: 55px;
height: 55px;
border-radius: 0.5rem
}

#arrow_volume_next{
position: fixed;
display: block;	
top: 1px; 
left: 965px;
padding: 0px;
margin: 0px;
border: 1px solid white;
width: 55px;
height: 55px;
border-radius: 0.5rem
}



	



#header_tablet_3
{
position: fixed;
display: block;	
top: 240px;
left: 0px;
width: 100%;
height: 65px;
padding: 0px;
margin: 0px;
background-color: grey; 
border: 1px solid white;  
font-size: 1.2rem;
color: black;    	
}

#container_buttons_references_species
{
position: fixed;
display: block;	
top: 250px;
right: 0px; 
background-color: blue; 
width: 70%; 


}
#buttons_references_species
{
position: relative;
display: block;	
font-size: 0.3rem;
text-align: left; 
float: right; 
margin-right: 1rem; 
}









#hd_illustration
{
position: relative;
display: block;
max-width: 100%;
}




input[type=checkbox]:checked + label {color: #ff0000;}

#checkbox-container
{
position: fixed;
display: block;	
top: 120px;	
width: 700px;
left: 10px;
}
	



#selected_characters_javascript
{
display: block;
position: fixed;
font-size: 1.5rem; 
padding: 3px;
border: 5px;
margin: 5px solid black;
width: 200px;

color: black;
top: 180px;
left: 720px;
background-color: #ADD9FE; 
overflow: auto;
bottom: 0px;
}



#container input {
	height: 1.5rem;
	
}

#character_list {
border: 3px solid green;	

}

#container label {
	background: #f9f9f9;  
	border: 0px;
	color: #555555;  
	cursor: pointer;
	display: block;
	float: left;
	font-size: 1rem;  
	height: 1.5rem;
	padding: 0.25rem;
	text-align: left;
}

#container input:hover + label {
	background: #ddd;  
	color: #666;  
}

#container input:checked + label {
	background: #00ff00; 
	color: #000000; 
	position: relative;
	
}

#content {
	background: #f1f1f1;  
	border-radius: 0 .25rem .25rem .25rem;
	min-height: 20rem;  
	position: relative;
	width: 100%;
	z-index: 5;
}

#content div {
	opacity: 0;
	padding: 1.5rem;
	position: absolute;
	z-index: -100;
	border: 5px solid green;
	columns: 1;
	
}

#container input#tab-1:checked ~ #content #content-1,
#container input#tab-2:checked ~ #content #content-2,
#container input#tab-3:checked ~ #content #content-3, 
#container input#tab-4:checked ~ #content #content-4, 
#container input#tab-5:checked ~ #content #content-5 
{
    opacity: 1;
    z-index: 100;
}

input.visible {
  visibility: visible !important;
}

select.determination
{
	width: 200px;
}

input.determination
{
	width: 50px;
	float: right;
	height: 20px;
	display: block;
}



	
#filter
{

left: 0px;
display: block; 
top: 560px;
height: 1300px;
position: fixed; 
border: 1px solid red;
margin: 0px;
padding: 10px;
font-size: 1.3rem;
background-color: #F0F0F0; 
color: black;
width: 980px;
overflow: auto;
}

#character_filter
{
	display: block;
	position: fixed;
	top: 105px;
	left: 800px;
	border: 1px solid red;
}


#columns_distribution_habitat_habit
{
position: absolute;
display: block;
top: 5px;
border: 5px solid green;
}	

}
#fingerprint
{  width: 100px;
}

#menu_determination_mobile
{
position: fixed;
font-size: 15px;
margin: 0;
padding: 0;
border: 1px solid red;
list-style-type: none;
font-weight: none;
right: 120px;
top: 60px;
}

#menu_determination_mobile ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-weight: none;
right: 150px;
top: 65px;
}

#menu_determination_mobile ul li 
{
display: inline;
list-style-type: none;
text-decoration: none;
font-weight: none;
}

#menu_determination_mobile ul li a{
	list-style-type: none;
	text-decoration: none;
	font-weight: none;
	padding: 0.2rem 0.2rem 0.2rem 0.2rem;
	background-color:  #ADD9FE; 
	border-left:1px solid #ADD9FE; 
	border-right:1px solid #ADD9FE; 
	border-bottom:1px solid #ADD9FE; 
	border-top:1px solid #ADD9FE; 
	color: #123456; 
	float: left; 
}

#menu_determination_mobile ul li a.selected
{
	list-style-type: none;
	text-decoration: none;
	padding: 0.2rem 0.2 rem 0.2rem 0.2rem;
	background-color: #F0B531; /
	border-left:1px solid #ADD9FE; 
	border-right:1px solid #ADD9FE; 
	border-bottom:1px solid #ADD9FE; 
	border-top:1px solid #ADD9FE; 
	color: #000;
	float: left;
}

#menu_determination_mobile li a:hover
{
	background-color: #005d1F;
	color: #ABCDEF;	
}




#text_subheader 
{
position: relative;
display: block;
left: 4px;
top: 4px;
padding-top: 3px;
padding-right: 3px;
padding-bottom: 3px;
padding-left: 3px;
margin: 0px;
border: 0px solid black;
overflow: scroll;
}

table.selected_characters
{
position: relative;
float: left;
padding: 0px;
margin: 0px;
border: 1px solid black;
width: auto; 
}

#menu_level_2_determination
{
position: fixed;
top: 274px;	
right: 0px;
width: 100%;
background-color: #ADD9FE;
}

#menu_level_2_determination ul
{
right: 20px;
}

#menu_level_2_determination ul li
{
display: inline;
float: right;
}

#container_selected_characters
{
display: block; 
position: fixed;
right: 0px;
top: 121px;
bottom: 0px;
overflow: auto;
width: 30%;
font-family: Verdana, Arial, sans-serif;
font-size: 15px;
background-color: #F0F0F0; 
border: 1px solid black;
margin: 0px;
padding: 0px;
}

#container_resultset_determination
{
display: block; 
position: fixed;
left: 0px;
top: 121px;
bottom: 0px;
overflow: auto;
width: 70%;
font-family: Verdana, Arial, sans-serif;
font-size: 15px;
background-color: #F0F0F0; 
border: 1px solid black;
margin: 0px;
padding: 0px;
}


#resultset_determination
{
display: block; 
position: relative;
left: 10px;
right: 0px;
top: 0px;
bottom: 0px;
overflow: auto;
font-family: Verdana, Arial, sans-serif;
font-size: 15px;
background-color: #F0F0F0; 
border: 0px solid black;
margin: 0px;
padding: 0px;
}



#button_clear_characters
{
position: fixed;
top: 93px;
right: 370px;
padding: 0px;
margin: 0px;
font-size: 15px;
background-color: red; 
cursor: pointer;
}



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

.tooltip .tooltiptext {

-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;

    visibility: hidden;
    width: 300px;
	background-color: yellow;
	color: black;
	z-index: 1;
	
	top: 85%;
	left: 10%;
	margin: 0px; 
	text-align: left;
    border-radius: 6px;

    padding: 0px;
	position: absolute;
	border: 1px solid black;
	 
	font-size: 1.0rem;
  
   
    
}

.tooltip .tooltiptext .thumbnail{

-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;

    visibility: hidden;
    width: 850px;
	background-color: yellow;
	color: black;
	z-index: 1;
	
	top: 0%;
	left: 0%;
	margin: 0px; 
	text-align: left;
    border-radius: 6px;

    padding: 0px;
	position: absolute;
	border: 1px solid black;
	 
	font-size: 1.0rem;
  
   
    
}

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

#container { 
display: block;
position: relative;    
border: 1px solid blue; 
top: 10px;
height: 30px;
}

#container input {
	height: 2.5rem;
border: 1px solid red;	
}


#container label { 
	background: #f9f9f9;  
	border: 1px solid black;
	color: #000000;  
	cursor: pointer;
	display: block;
	font-size: 1.0rem;  
	margin-top:0.25rem;
	margin-bottom:0.25rem;
	text-align: left;
}


#container input:hover + label {
	background: #111111;  
	color: #ffffff;  
}

#container input:checked + label {
	background: #00ff00;  
	color: #000000; 
	position: relative;

}


*/