body {
color: black; /* de kleur van de letter binnen het body segment WERKT*/
background-color: #CCCCCC; /* de kleur van de achtergrond binnen het body segment WERKT*/
font-family: Verdana, Arial, sans-serif; /* het lettertype binnen het body segment */
font-size: 1.3rem;
}

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; 	
}

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

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

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

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

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

input.button_index {
color: #000000;
margin-top: 0px;
background-color: transparent;
border: 1px solid black;
border-radius: 4px;
width: 55px;
height: 55px;
cursor: pointer;
text-align: centre;
font-size: 1.1rem;
}

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

/*****************************************************************************/
#container_header_tablet
{
	position: fixed; 
	display: block;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 120px;
	background-color: #000000; 
	color: #FFFFFF;	
}



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

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

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

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

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

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

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

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

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

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

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

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

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

/*RIJ TWEE*************************************************************************************************/

#button_200{
position: relative;
display: inline-block;	
float: left;
top: 2px; 
left: 10px;
height: 55px;
width: 55px;
padding: 0px;
margin: 0px;
background-color: #000000; 
color: #FFFFFF;	
border: 1px solid gray; 
border-radius: 4px; 
}

#button_200.selected{
background-color: #ADD9FE; 	
color: #000000;
border: 1px #ADD9FE; 
}
		
#button_350{
position: absolute;
display: inline-block;	
float: left;
top: 2px; 
left: 80px;
height: 55px;
width: 55px;
padding: 0px;
margin: 0px;
background-color: #000000; 	
color: #FFFFFF;
border: 1px solid gray; 
border-radius: 4px; 
}

#button_350.selected{
color: #000000;
background-color: #ADD9FE;
border: 1px #ADD9FE; 
}	

#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: 4px; 
}

#search_box_vernacular {
position: fixed;
display: block;	
top: 66px;
right: 425px;
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: 4px; 
}

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

/**************************************************************************/

#container_resultset_tablet
{
display: block; 
position: fixed;
padding: 1px;
width: 100%;
top: 60px;
bottom: 0px;
overflow: scroll;
border: 0px solid green;
}

#container_resultset_tablet._1
{
top: 61px;
}

#container_resultset_tablet._2
{
top: 122px;	
}

#container_resultset_tablet._3
{
top: 183px;	
}

#container_resultset_tablet._4
{
top: 244px;	
}

#container_resultset_tablet._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;
}

#container_subheader_tablet
{
position:fixed;
display: block;
top: 121px;
left: 0px;
padding: 4px;
border-bottom: 1px solid black;
margin: 0px;
width: 100%;
height: 120px;
color: black;
background-color: #F0B531;
}

#text_subheader_tablet
{
position:absolute;
display: block;
padding-top: 4px;
padding-right: 4px;
padding-bottom: 4px;
padding-left: 4px;
left: 75px;
margin: 0px;
border: 0px;
vertical-align: top;
}

	
/******************************************************************************/

#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 gray;
width: 55px;
height: 55px;
}

#button_info_hd_illustration_tablet
{
position: fixed; 
display: block; 
left: 360px;
top: 1px;
border: 1px solid gray;
width: 55px;
height: 55px;
}

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

#enlarge_to_full_size_mobile
{
position: fixed;
top: 1px;
left: 430px;
border: 1px solid gray;
}

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

#arrow_volume_previous{
position: fixed;
display: block;	
top: 1px; 
left: 790px;
padding: 0px;
margin: 0px;
border: 1px solid gray; 	
width: 55px;
height: 55px;
}

#arrow_volume_next{
position: fixed;
display: block;	
top: 1px; 
left: 846px;
padding: 0px;
margin: 0px;
border: 1px solid gray; 	
width: 55px;
height: 55px;
}

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

#volume{
position: fixed;
display: block;	
top: 1px;
width: 55px;
height: 55px;
left: 710;
padding: 0px;
margin: 0px;
border: 1px solid gray;   		
}


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


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



/**********************************************************************************/

#thumbs_350 {
    position: relative;
    display: inline-block;
	left: 0px;
	border: 0px solid red;
	padding: 2px;
	margin: 0px;
	height: 350px;
}

#thumbs_200 {
    position: relative;
    display: inline-block;
	left: 0px;
	border: 0px solid red;
	padding: 2px;
	margin: 0px;
	height: 200px;
}


#header_tablet_2
{
position: fixed;
display: block;	
top: 62px; 
left: 0px; 
width: 700px;
height: 60px;
background-color: transparent;
}

#header_tablet_2.index
{
width: 300px;

}		
		
#order_author
{
position: relative;
display: inline-block;	
float: left; 
top: 2px;  
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: absolute;
display: inline-block;	
float: left; 
top: 2px;  
left: 80px;
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: absolute;
display: block;	
float: left; 
top: 2px; 
left: 150px;
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;	
}	

#container_subheader_tablet
{
position:fixed;
display: block;
top: 121px;
left: 0px;
font-size: 1.5rem; /* hier wordt de grote van de in te voeren letters bepaald */
padding: 4px;
border: 0px solid black;
margin: 0px;
width: 100%;
height: 120px;
color: black;
background-color: #F0B531;
}	
	

	
#text_subheader_tablet
{
position:absolute;
display: block;
font-size: 1.25rem; /* hier wordt de grote van de in te voeren letters bepaald */
padding-top: 4px;
padding-right: 4px;
padding-bottom: 4px;
padding-left: 4px;
left: 75px;
margin: 0px;
border: 0px;
vertical-align: top;
}

#container_subheader_tablet_buttons
{
position:fixed;
display: block;
top: 121px;
left: 0px;
font-size: 1.3rem; 
padding: 4px;
border: 0px solid black;
margin: 0px;
width: 65px;
height: 120px;
color: black;
background-color: #F0B531;

}



#button_info_in_species
{
position: fixed;
display: block;
left: 10px;
top: 124px;
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: 1px solid black;
border-radius: 4px; 
cursor: pointer; 	
}

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


#button_genus_in_species
{
position: fixed;
display: block;
left: 10px;
top: 184px;
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: 1px solid black;
border-radius: 4px; 
cursor: pointer; 	
}

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

#header_tablet_3
{
position: fixed;
display: block;	
top: 240px;
left: 0px;
width: 100%;
height: 57px;
padding: 0px;
margin: 0px;
background-color: grey; /* de kleur van de achtergrond binnen het body segment WERKT*/
border: 1px solid white;  
font-size: 1.2rem;/*grote van de letters WERKT*/
color: black;    	
}


/*************************************************************************************************/

#ul_level_3
{
	
}

#li_level_3
{
	float: left;
	border: 1px solid black;
	padding: 2px;
	margin: 2px;
	background-color: #AAAAAA; 
}

#li_level_3.selected
{
background-color: yellow; 
}

a
{
text-decoration: none;
}


figure.hd_illustration_tablet
{
position: relative;
display: block;
border: 0px solid red;
padding: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
top: 2px;
bottom: 2px;
left: 2px;
right: 2px;
}

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


/*DETERMINATION****************************************************************/

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.5em; /* hier wordt de grote van de in te voeren letters bepaald */
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.5em;
	/*visibility: hidden;*/
}

#character_list {
border: 3px solid green;	

}

#container label {
	background: #f9f9f9;  /* Fondo de las pestañas */
	border: 0px;
	color: #555555;  /* Color del texto de las pestañas */
	cursor: pointer;
	display: block;
	float: left;
	font-size: 1rem;  /* Tamaño del texto de las pestañas */
	height: 1.5em;
	padding: 0.25em;
	text-align: left;
}

#container input:hover + label {
	background: #ddd;  /* Fondo de las pestañas al pasar el cursor por encima */
	color: #666;  /* Color del texto de las pestañas al pasar el cursor por encima */
}

#container input:checked + label {
	background: #00ff00;  /* groen */
	color: #000000; /* tekst */
	position: relative;
	/*z-index: 6;
	font-weight: 900;// bold
	/*
	-webkit-transition: .1s;
	-moz-transition: .1s;
	-o-transition: .1s;
	-ms-transition: .1s;
	*/
}

#content {
	background: #f1f1f1;  /* Fondo del contenido */
	border-radius: 0 .25em .25em .25em;
	min-height: 20em;  /* Alto del contenido */
	position: relative;
	width: 100%;
	z-index: 5;
}

#content div {
	opacity: 0;
	padding: 1.5em;
	position: absolute;
	z-index: -100;
	border: 5px solid green;
	columns: 1;
	/*
	transition: all linear 0.1s;
	*/
}

#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.2em 0.2em 0.2em 0.2em;
	background-color:  #ADD9FE; /*geeft de kleur van de menu toetsen*/
	border-left:1px solid #ADD9FE; /*geeft de linker zijrand van de toets weer */
	border-right:1px solid #ADD9FE; /*geeft de rechter zijrand van de toets weer */
	border-bottom:1px solid #ADD9FE; /*geeft de onderste rand van de toets weer */
	border-top:1px solid #ADD9FE; /*geeft de bovenste rand van de toets weer */
	color: #123456; /*geeft de kleur van de tekst op de menutoetsen*/
	float: left; /*zorgt er voor dat de menu balk links met home begint8*/
}

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

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




#text_subheader /*row 1,2,3 */
{
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 { /* hierin bevinden zich de tabbladen */
display: block;
position: relative;    
border: 1px solid blue; 
top: 10px;
height: 30px;
}

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


#container label { /*bepaald de omlijning van alle labels; dus niet alleen de tabbladen */
	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;

}