html {
font-size: 100%;
}

strong{
font-weight: bold;
}

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


#baobab_blue {
position: fixed;
display: block;	
top: 2px;
left: 10px;
height: 55px;
width: 55px;
padding: 0px;
margin: 0px;
border: 0px solid red;   	
}

#pijl_links {
position: fixed;
display: block;	
top: 2px; /*reageert*/
left: 80px;
padding: 0px;
margin: 0px;
border: 0px solid red;    
}

#pijl_rechts {
position: fixed;
display: block;	
top: 2px; /*reageert*/
left: 150px;
padding: 0px;
margin: 0px;
border: 0px solid red;    
}

#button_200{
position: fixed;
display: block;	
top: 60px; 
left: 10px;
padding: 0px;
margin: 0px;
border: 0px solid red; 		
}
		
#button_350{
position: fixed;
display: block;	
top: 60px; 
left: 80px;
padding: 0px;
margin: 0px;
border: 0px solid red; 	
}
				
#button_home{
position: fixed;
display: block;	
top: 60px; /*reageert*/
left: 150px;
padding: 0px;
margin: 0px;
border: 0px solid red;    
}				

/********** deze staat op de bovenste rij!! **********************************/
#button_home_hd_tablet{
position: fixed;
display: block;	
top: 0px; /*reageert*/
left: 220px;
padding: 0px;
margin: 0px;
border: 0px solid red;    
}		
/*******************************************************************/
#smartphone_header_short
{
position: fixed; 
display: block; 
left: 290px;
top: 0px;
border: 0px solid red;
}

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

#laptop_header_short
{
position: fixed; 
display: block; 
left: 430px;
top: 0px;
border: 0px solid red;
}

input.button_hd {
white-space: normal;
color: #fff;
margin-top: 0px;
background-color: #000000;
width: 55px;
height: 55px;
cursor: pointer;
}

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



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





#volume{
position: fixed;
				display: block;	
				top: 0px; 
				left: 710px;
				padding: 0px;
				margin: 0px;
				border: 0px solid red; 		
}

#show_illustrations_species{
position: fixed;
				display: block;	
				top: 0px; 
				left: 640px;
				padding: 0px;
				margin: 0px;
				border: 0px solid red; 		
}

#genus{
position: fixed;
				display: block;	
				top: 0px; 
				left: 570px;
				padding: 0px;
				margin: 0px;
				border: 0px solid red; 		
}

#artist{
position: fixed;
				display: block;	
				top: 0px; 
				left: 500px;
				padding: 0px;
				margin: 0px;
				border: 0px solid red; 		
}

#info_hd_illustration_mobile_black
{
position: fixed; 
display: none; 
left: 360px;
top: 0px;
border: 0px solid green;
}

#info_hd_illustration_mobile_blue
{
position: fixed; 
display: block; 
left: 360px;
top: 0px;
border: 0px solid red;
}

#enlarge_to_full_size_mobile
{
position: fixed;
top: 0px;
left: 430px;
border: 0px solid red;
}


body {
color: black; /* de kleur van de letter binnen het body segment WERKT*/
background-color: #F0F0F0; /* 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.0rem;/*grote van de letters WERKT*/
overflow: none;
padding: 0px;
width: 980px;
border: 0px solid white;
margin: 0px;
}

body.about {
background-color: #ADD9FE; /* de kleur van de achtergrond binnen het body segment WERKT*/
}


input.button{
font-style: bold; 
}

td.publications
{
padding: 4px;	
border: 1px solid black;
vertical-align: top;
text-align: left;
}


				#button_info{
				position: fixed;
				display: block;	
				top: 1px; 
				left: 220px;
				padding: 0px;
				margin: 0px;
				border: 0px solid red; 			
				}
				
				
	
				
				#info_black_button_tl2
				{
				position: fixed;
				display: block;	
				top: 1px; 
				left: 300px;
				padding: 0px;
				margin: 0px;
				border: 0px solid red;
				cursor: pointer;				
				}

				#info_blue_button_tl2
				{
				position: fixed;
				display: block;	
				top: 1px; 
				left: 300px;
				padding: 0px;
				margin: 0px;
				border: 0px solid red;
				cursor: pointer;				
				}



#enlarge_to_full_size_mobile_hd
{
position: relative;
display: block;
top: 0px;
left: 150px;
border: 5px solid black;
 
}




#logo {
position: absolute;
display: block;	
top: 1px;
right: 10px;
padding: 0px;
margin: 0px;
border: 0px solid white;   	
}

#version {
position: absolute;
display: block;	
top: 27px;
right: 15px;
font-style: italic;
padding: 0px;
margin: 0px;
border: 0px solid white;   
color: black;
font-size: 0.75rem;
}

#viewport {
position: absolute;
display: block;	
top: 43px;
right: 15px;
font-style: italic;
padding: 0px;
margin: 0px;
border: 0px solid white;   
color: black;	
font-size: 0.75rem;
}
/*---menu_1-------------------------------------------------------------------------------------------*/












#loupe_artists {
position: fixed;
display: block;	
top: 61px; 
right: 10px;
padding: 0px;
margin: 0px;
border: 0px solid white;   	
}

#loupe_epithets {
position: fixed;
display: block;	
top: 61px; 
right: 10px;
padding: 0px;
margin: 0px;
border: 0px solid white;   	
}

#loupe_publications {
position: fixed;
display: block;	
top: 61px; 
right: 10px;
padding: 0px;
margin: 0px;
border: 0px solid white;   	
}



#loupe_determination {
position: fixed;
display: block;	
top: 61px; 
right: 10px;
padding: 0px;
margin: 0px;
border: 0px solid white;   	
}



/*--------------------------------------------------------------------------------------*/




/*button in header_mobile_index*/



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

/* bovenste header*/
#header_mobile {
position: fixed;
display: block;	
top: 0px;
left: 0px;
width: 100%;
height: 118px;
padding: 0px;
margin: 0px;
background-color: #000000;
border-bottom: 0px solid white;   	
}

#header_mobile.hd_illustration {
height: 58px;
border-bottom: 1px solid white;   	
}
	
	
/* hier kan worden ingevoegd de button 200, 300 en HD;  */	




			


				
				#button_hd{
				position: absolute;
				display: block;	
				top: 0px; 
				left: 140px;
				padding: 0px;
				margin: 0px;
				border: 0px solid white; 	
				}
				
				/*bij tablet layout is er ook de mogelijkheid om HD illustraties inverticale layout te bekijken*/
				
		/*
		#button_desktop_4k {
		position: absolute;
		display: block;	
		top: 2px; 
		left: 290px;
		padding: 0px;
		margin: 0px;
		border: 0px solid white;    
		}


		#button_desktop {
		position: absolute;
		display: block;	
		top: 2px; 
		left: 290px;
		padding: 0px;
		margin: 0px;
		border: 0px solid white;    
		}
		
		*/
		#button_laptop {
		position: fixed;
		display: block;	
		top: 2px; 
		left: 500px;
		padding: 0px;
		margin: 0px;
		border: 0px solid red;    
		}

		#button_laptop_touchscreen {
		position: fixed;
		display: block;	
		top: 2px; 
		left: 430px;
		padding: 0px;
		margin: 0px;
		border: 0px solid red;    
		}
		
		#button_tablet {
		position: fixed;
		display: block;	
		top: 2px; /*reageert*/
		left: 360px; 
		padding: 0px;
		margin: 0px;
		border: 0px solid red;    
		}

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

		#search_box_vernacular {
		position: fixed;
		display: block;	
		top: 7px; /*reageert*/
		right: 170px;
		width: 240px;
		height: 45px;
		padding: 3px;
		margin: 0px;
		border: 0px solid white; 
		font-style: italic; 
		background-color: #E0E0E0; 
		font-size: 1.3rem;/*grote van de letters WERKT*/ 
		color: red;  
		}

		#select_box {
		position: fixed;
		display: block;	
		top: 7px; 
		right: 10px;
		width: 150px;
		height: 45px;
		padding: 0px;
		margin: 0px;
		font-size: 1.3rem;/*grote van de letters WERKT*/
		border: 0px solid white;  
		color: white;
		background-color: #000000; 
		}
/* 2de header*/
#menu_1 {
position: fixed;
display: block;	
top: 60px;
left: 0px;
width: 100%;
height: 58px;
padding: 0px;
margin: 0px;
background-color: black; /* de kleur van de achtergrond binnen het body segment WERKT*/
border-bottom: 1px solid white;   	
}

		/*bevindt zich in 2de header = menu_1*/


				#button_determination
				{
				position: fixed;
				display: block;	
				top: 60px; /*reageert*/
				left: 220px;
				padding: 0px;
				margin: 0px;
				border: 0px solid red; 	
				}



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

				
				
				#button_artists
				{
				position: fixed;
				display: block;	
				top: 60px; /*reageert*/
				left: 360px;
				padding: 0px;
				margin: 0px;
				border: 0px solid red; 	
				}

				

				#button_publications
				{
				position: fixed;
				display: block;	
				top: 60px; /*reageert*/
				left: 430px;
				padding: 0px;
				margin: 0px;
				border: 0px solid red; 	
				}

				

				#button_epithets
				{
				position: fixed;
				display: block;	
				top: 60px;
				left: 500px;
				padding: 0px;
				margin: 0px;
				border: 0px solid red; 	
				}

				

				#button_links
				{
				position: fixed;
				display: block;	
				top: 60px; 
				left: 570px;
				padding: 0px;
				margin: 0px;
				border: 0px solid red; 	
				}

				

				#button_about{
				position: fixed;
				display: block;	
				top: 60px; /*reageert*/
				left: 640px;
				padding: 0px;
				margin: 0px;
				border: 0px solid red;    
				}

				
				


		
				
		#search_box_scientific {
		position: fixed;
		display: block;	
		top: 66px; /*reageert*/
		right: 80px;
		width: 330px;
		height: 45px;
		padding: 3px;
		margin: 0px;
		border: 0px solid white; 
		font-size: 1.3rem;/*grote van de letters WERKT*/
		color: black;   
		}		
				
		#loupe_index {
		position: fixed;
		display: block;	
		top: 61px; 
		right: 10px;
		padding: 0px;
		margin: 0px;
		border: 0px solid red;   	
		}
/***************************************************************************************************************/

		#header_mobile_taxa {
		position: fixed;
		display: block;	
		top: 60px;
		left: 10px;
		width: 477px;
		height: 57px;
		padding: 0px;
		margin: 0px;
		background-color: black; /* de kleur van de achtergrond binnen het body segment WERKT*/
		border: 0px solid white;   	
		}
	
				#button_distribution_atlantic_centered{
				position: fixed;
				display: block;	
				top: 60px; 
				left: 220px;
				padding: 0px;
				margin: 0px;
				border: 0px solid red; 		
				}



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


				#button_taxonomy{
				position: fixed;
				display: block;	
				top: 60px; 
				left: 360px;
				padding: 0px;
				margin: 0px;
				border: 0px solid red; 	
				}
							
	


				

				#previous_page_TL2	
				{
				width: 980px;
				height: 60px;
				cursor: pointer;
				color: black;
				
				background-color: #F0F0F0; 
				font-size: 2.0rem;				
				}	

				#next_page_TL2	
				{
				width: 980px;	
				height: 60px;
				cursor: pointer;
				color: black;
				background-color: #F0F0F0; 	
				font-size: 2.0rem;				
				}	

				#button_genus{
				position: fixed;
				display: block;	
				top: 60px; 
				left: 430px;
				padding: 0px;
				margin: 0px;
				border: 0px solid red; 
				color: white;
				}	
				
				#button_genus_in_species{
						position: fixed;
				display: block;	
				top: 60px; 
				left: 430px;
				padding: 0px;
				margin: 0px;
				border: 0px solid red; 
				color: white;
			
				}	

				#button_species{
				position: fixed;
				display: block;	
				top: 60px; 
				left: 500px;
				padding: 0px;
				margin: 0px;
				border: 0px solid red; 
				color: white; 		
				}	
					
				#button_basionym{
				position: fixed;
				display: block;	
				top: 1px; 
				left: 420px;
				padding: 0px;
				margin: 0px;
				border: 0px solid red; 
				color: white;
				}	












/*--------------------------------------------------------------------------------------*/
#bottom_line {
position: fixed;
display: block;	
top: 57px;
left: 0px;
width: 100%;
height: 1px;
padding: 0px;
margin: 0px;
border-bottom: 1px solid white;
}

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

#menu_level_3_mobile.publications
{
	top: 121px;
}


#header_mobile_volume {
position: fixed;
display: block;	
top: 119px;
left: 153px;
width: 477px;
height: 57px;
padding: 0px;
margin: 0px;
background-color: grey; /* de kleur van de achtergrond binnen het body segment WERKT*/
border: 0px solid white;   	
}




#thumbnails_horizontal
{
position: absolute;
left: 20px;
}

#thumbnails_vertical
{
position: relative;
left: 20px;
}


#button_thumbnails_horizontal
{
position: absolute;
display: block;	
left: 20px;
}

#button_thumbnails_vertical
{
position: absolute;
display: block;	
left: 90px;
}


#button_compare
{
position: absolute;
display: block;	
top: 0px; 
left: 160px;
padding: 0px;
margin: 0px;
border: 0px solid white;
}	


#button_single_illustrations_blue
{
position: absolute;
display: block;	
top: 0px; 
left: 70px;
padding: 0px;
margin: 0px;
border: 0px solid white; 	
}


#button_single_illustrations_black
{
position: absolute;
display: block;	
top: 0px; 
left: 70px;
padding: 0px;
margin: 0px;
border: 0px solid white; 	
}


/*--------------------------------------------------------------------------------------*/


/*************************************************************************************************/
/*The overflow property only works for block elements with a specified height.
= bottom: 0px;
Note: In OS X Lion (on Mac), scrollbars are hidden by default and only shown when being used (even though "overflow:scroll" is set)*/




#container_taxonomy_subfamily
{
position: fixed;
display: block;	
width: 245px;	
top: 285px;
left: 0px;
height: 330px;
border: 1px solid red;
overflow: scroll;
}

#container_taxonomy_tribe
{
position: fixed;
display: block;	
width: 245px;	
top: 285px;
left: 245px;
height: 330px;
border: 1px solid green;
overflow: scroll;
}

#container_taxonomy_subtribe
{
position: fixed;
display: block;	
width: 245px;	
top: 285px;
left: 490px;
height: 330px;
border: 1px solid blue;
overflow: scroll;
}

#container_taxonomy_genera
{
position: fixed;
display: block;	
width: 245px;	
top: 285px;
left: 735px;
height: 330px;
border: 1px solid blue;
overflow: scroll;
}

#container_thumbnails_taxonomy
{
position: fixed;
display: block;	
width: 980px;	
top: 620px;
left: 0px;
bottom: 0px;
border: 0px solid blue;
overflow: scroll;
}

#TL2_mobile
{
border: 1px solid black;	
}

#genus_in_upper_taxon
{
display: block; 
border: 1px solid red;
margin: 2px;
}






#container_resultset_1_mobile
{
display: block; 
position: fixed;
left: 0px;
width: 980px;
top: 118px;
bottom: 0px;
background-color: #F0F0F0; 
border: 0px solid green;
bottom: 0px;
overflow: auto;
}


#container_resultset_1_mobile.publications
{
top: 178px;
}


#container_resultset_1_mobile.about
{
background-color: #F0F0F0; 
}


#container_TL2_mobile
{
display: block; 
position: fixed;
left: 0px;
width: 980px;
top: 59px;
bottom: 0px;
overflow: scroll;
background-color: #F0F0F0; 
border: 0px solid green;
bottom: 0px;
}


#TL2_mobile
{
left: 0px;
display: block; 
position: relative; 
border: 0px solid red;
margin: 0px;
padding-left: 10px;
padding-right: 20px;/*maakt tabel los van scroll bar*/
font-size: 1.0rem;
background-color: #F0F0F0; 
padding-left: 20px;
padding-right: 20px;
background-color: #F0F0F0; 
color: black;
top: 2px;
}


#resultset_1_mobile
{
left: 0px;
display: block; 
position: relative; 
border: 0px solid red;
margin: 0px;
padding-left: 4px;
padding-right: 4px;/*maakt tabel los van scroll bar*/
font-size: 1.0rem;
background-color: #F0F0F0; 
color: black;
top: 10px;
}

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

#resultset_1_mobile.about
{
background-color: #ADD9FE; 
top: 0px;
margin: 0px;
padding: 0px;
}

#resultset_1_mobile.TL2_mobile
{
background-color: #F0F0F0;
border: 2px solid red; 
top: 2px;
padding-left: 0px;
padding-right: 0px;
}


#container_taxa_info_mobile
{
display: block; 
position: fixed;
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 30px;/*maakt tabel los van scroll bar*/
left: 0px;
right: 0px;
top: 370px;
height: 1000px; 
background-color: #F0B531; 
color: black; 
border: 4px solid blue;
width: 960px;
}



#container_resultset_2_mobile
{
display: block; 
position: fixed;
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;/*maakt tabel los van scroll bar*/
left: 0px;
right: 20px;
top: 222px;
bottom: 0px;
background-color: #F0F0F0; 
border: 0px solid green;
width: 980px;
bottom: 0px;
overflow: auto;
}

#container_resultset_2_mobile.andmore500
{
	top: 274px;
}


#container_distribution_mobile
{
display: block; 
position: fixed;
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;/*maakt tabel los van scroll bar*/
left: 5px;
right: 5px;
top: 285px;
bottom: 0px;
overflow: hidden;	
background-color: #F0F0F0; 
border: 0px solid green;
width: 970px;
}


#resultset_2_mobile
{
left: 4px;
right: 4px;
display: block; 
position: relative; 
border: 0px solid red;
margin: 0px;
padding-left: 20px;
padding-right: 20px;/*maakt tabel los van scroll bar*/
background-color: #F0F0F0; 
padding-left: 20px;
padding-right: 20px;
background-color: #F0F0F0; 
color: black;
top: 4px;
}





#resultset_2_text
{
position: relative; 
width: 600px;
background-color: green; 
padding: 10px;
margin: 10px;
}



.rTable {
  width: 100%;
  display: table;
  margin: 0px;
  border: 1px solid black;

}

.rTableRow {
  display: table-row;
  margin: 0px;

}

.rTableCell {
  display: table-cell;
  border:  1px solid black;
  padding-left: 10px;
  padding-right: 10px; 
  padding-top: 10px; 
}

.rTableRow .rTableCell {
  color: black;
  line-height: 1.2;
  font-size: 1.3rem;
  padding-top: 0px;
  padding-bottom: 0px;
}

.rTableRow .rTableCell:nth-child(1) {
  
  padding-left: 10px;
  padding-top: 5px;
  padding-bottom: 0px;
  width: auto;
    font-size: 1.3rem;
}
 
}

/* lettergrote reageert hier!; padding reageert hier! */
.rTableRow .rTableCell:nth-child(2) {
  padding-left: 10px;
  padding-top: 10px;
  padding-bottom: 0px;
  width: auto;
  font-size: 1.3rem;
}

.rTableRow .rTableCell:nth-child(3) {
  padding-left: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  width: auto;
  font-size: 1.3rem;
  
}
.rTableRow .rTableCell:nth-child(4) {
  padding-left: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  width: auto;
  font-size: 1.3rem;
  
}
.rTableRow .rTableCell:nth-child(5) {
  padding-left: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  width: auto;
  
}
.rTableRow .rTableCell:nth-child(6) {
  padding-left: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  width: 6em;
  
}
.rTableRow .rTableCell:nth-child(7) {
  padding-left: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  width: auto;
  
}
.rTableRow .rTableCell:nth-child(8) {
  padding-left: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  width: auto;
  
}
.rTableRow .rTableCell:nth-child(9) {
  padding-left: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  width: auto;
  
}

.rTableRow .rTableCell:nth-child(10) {
  padding-left: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  width: auto; 
}

.rTableRow .rTableCell:nth-child(11) {
  padding-left: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  width: auto;
  
}

.rTableRow .rTableCell:nth-child(12) {
  padding-left: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  width: auto;
  
}

.rTableRow .rTableCell:nth-child(13) {
  padding-left: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  width: 600px;
  
}

.rTableRow:hover {
  background-color: #ADD9FE;
  
}


	
label.text_index{
position: relative;
top: -0.5em;		
color: black;		
		
}

input.button_index {
white-space: normal;
color: #fff;
margin-top: 0px;
background-color: #e96000;
border: none;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ff6900), to(#e96000));
background:  -moz-linear-gradient(25% 75% 90deg, #e96000, #ff6900);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
width: 50px;
height: 50px;
cursor: pointer;
    }
	
label.text_index{
position: relative;
top: -0.5em;		
color: black;		
		
}


input.button_species {
white-space: normal;
color: #fff;
margin-top: 0px;
background-color: #222222;
border: none;
font-size: 1.0rem;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#111111), to(#222222));
background:  -moz-linear-gradient(25% 75% 90deg, #222222, #111111);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
width: 90px;
height: 90px;
cursor: pointer;
    }
	
	
div.wrapper {
	padding: 0px;
	display: block;
	overflow: auto;
}
table.scroll {
	width: 100%;
	background-color: #fff;
	
}
table.scroll thead {
	width: 100%;
	background: #F0B531;
}

/*dit heeft te maken met de dikte van de scroll bar in the header */
table.scroll thead tr:after {
	content: '';
	overflow-y: scroll;
	visibility: hidden;
}
table.scroll thead th {
	flex: 1 auto;
	display: block;
	color: #fff;
}
table.scroll tbody {
	display: block;
	width: 100%;
	overflow-y: auto;
	height: auto;
	max-height: 1600px;
}
table.scroll thead tr,
table.scroll tbody tr {
	display: flex;
}
table.scroll tbody tr td {
	flex: 1 auto;
	word-wrap: break;
}
table.scroll thead tr th,
table.scroll tbody tr td {
	width: 25%;
	padding: 5px;
	text-align-left;
	border: 1px solid #eee;
}
/*
table.fixed_header{
-ms-word-break: break-all;
word-break: break-all;
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
*/










#test_before_query
{
border: 1px solid red; 
font-size: 1.0rem;
height: 94px;
overflow: scroll;
}


* {
	font-family: Arial, sans;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
}


#container {
    
    
}


#9012{
	width=80px;
	display: block;
	
}


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

.tooltip {
    position: relative;
    display: inline-block;
    border: 1px 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: 250px;
	top: 0%;
	left: 0%;
	margin: 0px; /* use half of the width to center the tooltip*/
    background-color: black;
    color: #fff;
    text-align: left;
    border-radius: 6px;
    padding: 5px;

    /* Position the tooltip */
    position: absolute;
    z-index: 1;
}

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

#figcaption.hd_mobile
{
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}


font
{

}


font.small
{

font-size: 1rem;
}




input.baobab_blue
{
position: fixed; 
display: block; 
left: 20px;
top: 10px;
}

input.maximize
{
position: fixed; 
display: block; 
left: 60px;
top: 10px;
}


input.return_home_info_panel_mobile
{
position: fixed; 
display: block; 
left: 60px;
top: 10px;
}

#full_size_illustration_mobile
{
position: fixed;
display: none;
width: 100%;
}


#button_TL2_next
{
height: auto;
display: block;	
}


/*element komt in beeld nadat er op de knop info is gedrukt!*/
#info_hd_illustration_mobile
{
position: fixed;
left: 0px;
top: 60px;
background-color: #999999;
color: black;
padding: 4px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
display: none;
border: 1px solid black;
width: 980px;
overflow: scroll;
bottom: 0px;
}



#thumbnail_info_illustration
{
padding: 10px; 	
}

#container_resultset_hd_illustration
{
display: block; 
position: fixed;
left: 0px;
width: 980px;
top: 61px;
overflow: scroll;
font-size: 1.5rem;
background-color: #F0F0F0; 
border: 0px solid green;
}

#container_resultset_page_TL2
{
display: block; 
position: fixed;
left: 0px;
width: 980px;
top: 75px;
overflow: scroll;
font-size: 1.5rem;
background-color: #F0F0F0; 
border: 2px solid green;
}

/*****************************************************************************************/
/*dit element bevat de hd afbeelding inclusief de figcaption*/
#figure_hd_illustration_mobile
{
position: relative;
display: block;
border: 0px solid red;
padding: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
top: 0px;
bottom: 2px;
left: 0px;

}

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


#under_construction
{
display: block; 
position: fixed;
left: 200px;
top: 680px;
color: red;
font-size: 2rem;	
}

/* pas menuknoppen aan*/
form.menu_level_1
{
position: relative;
float: right;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
border: 1px solid white;

}








#button_index_species
{
width: auto;
height: auto;
cursor: pointer;
font-size: 1.0rem;
}









#resultset_2.volume
{
top: 270px;
}


#container_resultset_2.artist
{
top: 552px;
}


#hd_mobile
{
margin-top: 0.25rem;
border: 1px solid black;
font-size: 1.5rem;
padding: 4px;
font-size: 1.25rem;
width: 980px;
}




#resultset_2.artist
{
top: 252px;
}

#resultset_2.epithet
{
top: 252px;
}






#close_button
{
display: block;
position:fixed;
left:395px;
top:64px;
height: 30px;
}





#header_short
{
font-size: 1rem;
padding: 0px;
margin: 0px;
border-bottom: 1px solid black;
border-top: 0px;
border-left: 0px;
border-right: 0px;
position: fixed;
height: 95px;
width: 430px;
top: 0px;
left: 0px; 
display: block;
background-color: #ADD9FE; /* ADD9FE baobab blue */
}



#info_illustration_left.local
{
width: 350px;	
font-size: 1.5rempx;
}

a {
	text-decoration: none;
}



#desktop_selected
{
display: block;
position:fixed;
left:300px;
top:4px;
color: brown;
width: 30px;
border: 1px solid red;
}

#mobile_device_selected
{
display: block;
position:fixed;
left:345px;
top:4px;
color: brown;
width: 30px;
border: 1px solid red;
}

#container_menu_level_2
{
position: fixed;
display: block;

top: 199px;
left: 0px;
font-size: 1.3rem;
padding: 0px;
border-bottom: 0px solid red;
border-top:  0px solid black; 
margin: 0px;
width: 100%;
height: 18px;

background-color: #E0E0E0;

}

/*query broad or restricted etc */

#menu_level_2_determination
{
position: fixed;
top: 380px;	
left: 0px;
width: 980px;
background-color: #123456;
}

#menu_level_2_determination ul
{
right: 20px;
}

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

#container_menu_level_3
{
position: fixed;
display: block;

top: 220px;
left: 0px;
font-size: 1.3rem;
padding: 0px;
border-bottom: 1px solid black;
border-top:  0px solid black; 
margin: 0px;
width: 100%;
height: 100px;

background-color: #F0F0F0;
}

#container_menu_level_4
{
position: fixed;
	display: block;
	top: 245px;
	height: 90px;
	width: 100%;

	border-top: 1px solid black;
	border-bottom: 1px solid black;
	background-color: #E0E0E0;
}

#reference
{
	position: relative; 
	top: 0px;
	left: 10px;
	margin: 0px;
	padding: 0px;
	font-size: 1.3rem;
}

#container_menu_level_1
{
position:relative;
display: block;
top: 0px;
left:0px;
padding: 0px;
border-left: 0px;
border-right: 0px;
border-bottom: 0px solid black;
border-top: 0px solid black;
margin: 0px;
width: 100%;
height: 21px;
color: black;

}

#container_menu_level_1.taxa
{
border-bottom: 0px solid black;
}
	
	
#progress{
	width:300px;
	border:1px solid #000;
	display: block;
	position: fixed;
	top: 95px;
	left: 300px;
	}
#information
{
	display: block;
	position: fixed;
	top: 95px;
	left: 400px;
}

#container_taxonomy_tree
{
display: block; 
position: fixed;
left: 0px;
width: 550px;
top: 222px;
bottom: 0px;
overflow: auto;
font-size: 1.5rem;
background-color: #F0F0F0; 
border-right: 2px solid black;
float: left;
}

#taxonomy_tree
{
display: block; 
position: absolute;
left: 0px;
top: 0px;
font-size: 1.5rem;
background-color: #F0F0F0; 
border: 0px solid blue;
}

#container_thumbs_taxonomy
{
left: 552px;
display: block; 
position: fixed; 
overflow: auto;
top: 222px;
border: 0px solid red;
margin: 0px;
padding: 0px;
width: 425px;
font-size: 1.5rem;
background-color: #F0F0F0; 
color: black;
bottom: 0px;
}
/* bottom: 0px is noodzakelijk om een scrollbar te krijgen!*/

#thumbs_taxonomy
{
left: 0px;
display: block; 
overflow: auto;
position: relative; 
top: 0px;
border: 0px solid red;
margin: 0px;
padding: 0px;
font-size: 1.5rem;
background-color: #F0F0F0; 
color: black;
}


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

#container_resultset_scan_illustrations
{
display: block; 
position: fixed;
left: 0px;
right: 0px;
width: 100%;
top: 125px;
bottom: 0px;
overflow: auto;
font-size: 1.5rem;
background-color: #F0F0F0; 
}


#resultset_scan_illustrations
{
display: block; 
position: relative; 
border: 0px solid red;
margin: 0px;
padding: 20px;
font-size: 1.5rem;
background-color: #F0F0F0; 
}

ul
{
list-style-type: none;
}


#container_resultset_determination
{
display: block; 
position: fixed;
left: 0px;
right: 0px;
top: 430px;
bottom: 0px;
overflow: auto;
font-size: 1.5rem;
background-color: #F0F0F0; 
border: 0px solid black;
margin: 0px;
padding: 0px;
width: 980px;
}

#resultset_determination
{
display: block; 
position: relative;
left: 10px;
right: 0px;
top: 0px;
bottom: 0px;
overflow: auto;
font-size: 1.5rem;
background-color: #F0F0F0; 
border: 0px solid black;
margin: 0px;
padding: 0px;
}

#button_select_genera
{
position: fixed;
top: 125px;
left: 750px;
padding: 0px;
margin: 0px;
background-color: green; 
cursor: pointer;
}

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





#mededelingen
{
display: block;
position:fixed;
left:340px;
top:0px;
color: brown;
width: 620px;
padding: 0px;
border: 0px;
margin: 0px;
color: red;
font-size: 1.2rem;
}




#GetGenusInfoDistribution
{
position:fixed;
display: block;
left:350px;
top:30px;
border: none;
padding: none;
margin: none;
font-size: 1.5rem;
}








#placeholder_select_box
{
color: #123456; 
font-size: 1.5rem;
}











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

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

/*er bestaat slechts 1 subheader mobile*/

#container_subheader_volume_buttons
{
position:fixed;
display: block;
top: 118px;
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: 75px;
height: 104px;
color: black;
background-color: #F0B531;

}

#container_subheader_volume_text
{
position:fixed;
display: block;
top: 118px;
left: 75px;
font-size: 1.5rem; /* hier wordt de grote van de in te voeren letters bepaald */
padding: 4px;
border: 0px solid black;
margin: 0px;
width: 905px;
height: 104px;
color: black;
background-color: #F0B531;

}

#container_subheader_mobile
{
position:fixed;
display: block;
top: 118px;
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: 980px;
height: 104px;
color: black;
background-color: #F0B531;

}							
#text_subheader_mobile
{
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;
margin: 0px;
border: 0px;
vertical-align: top;
}


#container_subheader_determination
{
position:fixed;
display: block;
top: 174px;
left: 0px;
font-size: 1.5rem; /* hier wordt de grote van de in te voeren letters bepaald */
padding: 0px;
border-left: 	3px solid red;
border-right: 	3px solid red;
border-bottom: 	3px solid red;
border-top: 	3px solid red;
margin: 0px;
width: 980px;
height: 204px;
color: black;
background-color: #F0B531;
}










#container_header_statistics
{
position:fixed;
display: block;
top: 198px;
left:0px;
padding: 0px;
border-left: 0px;
border-right: 0px;
border-bottom: 1px solid black;
border-top: 1px solid black;
margin: 0px;
width: 100%;
height: 42px;
color: black;
background-color: #E0E0E0;
}

#header_statistics
{
position:relative;

left:40px;
right: 40px;
padding: 3px;
border: 0px;
margin: 3px;
}

/*voor niet mobile!*/


#link_1
{
position: relative;
display: block;
top: 0px;
left: 20px;
font-size: 1.3rem;
padding: 0px;
border: 0px;
margin: 0px;
width: 100%;
height: 0px;
color: black;

}

#link_2
{
position:relative;
display: block;
top: 0px;
left:155px;
font-size: 1.3rem;
padding: 0px;
border: 0px;
margin: 0px;
height: 0px;
color: black;

}



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

#menu_level_3_desktop 
{
position: fixed;
display: block; 
padding: 0px;
margin: 0px;
border-top: 1px solid black; /*reageert*/
border-bottom: 1px solid black; /*reageert*/
width: 100%;
height: 2.5rem;
left: 0px;
top: 218px;
background-color: #D0D0D0;
font-family: Arial, sans-serif;
font-size: 12px;
}

#menu_level_3_desktop.determination 
{
	top: 405px; 
	width: 980px;
}



#menu_level_3_desktop ul
{
margin: 0px; /*reageert*/
border: 0px;
padding: 0px;
left: 20px;
list-style-type: none;
display: block;
position: relative; /*belangrijk*/
}

#menu_level_3_desktop ul li 
{
display: inline;
padding: 0px;
border: 0px;
margin: 0px;
float: left;
	
	text-decoration: none;
	font-style: bold;
	list-style-type: none;
	margin: 2px; /*reageert*/
	border: 0px;
	padding-left: 0px;
	padding-right: 0px;
	margin-left: 0px;
	background-color: #F0F0F0;
	border:0px solid #000000;

	color: #000000;
	
}

#menu_level_3_desktop ul li input
{
	
	text-decoration: none;
	font-style: default; /*reageert*/
	list-style-type: none; 
	padding: 0.1em 0.1em; /*reageert*/
	border: 1px solid black; /*reageert*/
	color: #000;
	float: left;
	cursor: pointer; /*reageert*/
	
}


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

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

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




#container_species_relative
{
position:static;
top: 0px;
left: 0px;
width: 100%;
height: 130px;

padding: 0px;
border: 0px #E0E0E0;
margin-bottom: 0px;
color: black;
display: block;
padding: 4px;
background-color: #F0F0F0;
font-size: 1.2rem; /* hier wordt de grote van de in te voeren letters bepaald */
}

#container_species_relative_contrasting
{
position:static;
top: 0px;
left: 0px;
width: 100%;
height: 130px;

padding: 0px;
border: 0px #E0E0E0;
margin-bottom: 0px;
color: black;
display: block;
padding: 4px;
background-color: #D0D0D0;
font-size: 1.2rem; /* hier wordt de grote van de in te voeren letters bepaald */
}

#species_button
{
padding: 10px;
margin-left: 10px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
display: block;
position: absolute;
}

#species_text
{
padding: 10px;
margin-left: 10px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
position: absolute;
left: 89px;
}



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

}

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

}


#etymology_species_text
{
padding: 10px;
margin-left: 10px;
margin-right: 0px;
margin-top: 4px;
margin-bottom: 0px;
font-size: 13px;
}

#container_genus_relative
{
position:relative;
top: 0px;
left: 0px;
width: 100%;
height: 114px;

padding: 0px;
border-left: 0px;
border-right: 0px;
border-bottom: 3px solid black;
border-top: 1px solid black;
margin: 0px;
color: black;
display: block;
background-color: #E0E0E0;
font-size: 1.5rem; /* hier wordt de grote van de in te voeren letters bepaald */
}

#text_genus_relative
{
padding: 10px;
margin-left: 10px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
}





#sidebar
{

font-size: 10px;
border: 0px;
padding: 0px;
margin: 1px solid black;
position: fixed;
height: 100%;
width: 430px;
color: black;
top: 0px;
left: 0px; 
display: block;
background-color: #ADD9FE; /* baobab blue */
}

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




.table_left
{
top: 130px; /*reageert goed*/
left: 14px;
position: fixed;
width: 360px;
font-size: 16px;  /*alleen opera reageert hier op; firefox niet!! */
padding: 0px;
margin: 0px;
border: 0px solid black;
background-color: #E0E0E0; /* grey */
}

.table_left_tr
{
padding-left: 10px;
padding-right: 0px;
margin-left: 0px;
margin-right: 0px;
background-color: #E0E0E0; /* baobab blue */
}
	
.table_left_td
{
padding-left: 10px;
padding-right: 0px;
margin-left: 10px;
margin-right: 0px;
background-color: #E0E0E0; /*  */
}
	
	
.table_left_font_small_td
	{
	padding-left: 10px;
	padding-right: 0px;
	margin-left: 10px;
	margin-right: 0px;
	font-size: 12px;  
	background-color: #E0E0E0; /* baobab blue */
	}
	
.illustration_100
{
position: relative;
padding: 0px;
margin: 0px;
border: 0px solid blue;
}

td.genera
{
background-color: #F0F0F0; /* baobab blue */
}

td.higher_taxa
{
background-color: #F0F0F0; /* baobab blue */
}

td.distribution{
		padding: 0.2em;
		background-color: #F0F0F0;
		color: #000000;
		text-align: left;
		vertical-align: top;
		margin-top: 0em;
		margin-bottom: 0em;
	}
	

	
td.even{
background-color: #E0E0E0;	
}

td.uneven{
background-color: #D0D0D0;	
}

td.selected{
background-color: yellow;	
}

input.selected{
	background-color: yellow;	
}


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





	
	





#screen_resolution
{
position: relative;
display: block;
left: 0px;
top: 20px;
padding: 0px;
margin: 0px;
border: 2px solid black;
}






#toon_info_panel /* knop baobab_blue desktop*/
{
position: fixed;
top: 5px;
left: 20px;
width: 30px;
height: 30px;
bottom: 0px;
padding: 0px;
margin: 0px;
border: 1px solid black;
/*venster eerst verbergen*/
display: none;
}

#toon_text /* knop: text */
{
position: fixed;
top: 5px;
left: 115px;
width: 50px;
height: 50px;
bottom: 0px;
padding: 0px;
margin: 0px;
border: 0px solid red;
display: block;
}



#full_size /* knop: maximize desktop*/
{
position: fixed;
top: 5px;
left: 60px;
width: 30px;
height: 30px;
bottom: 0px;
padding: 0px;
margin: 0px;
display: none;
}


#container_illustration
{
position: fixed;
top: 0px;
left: 440px;
right: 0px;
bottom: 0px;
padding: 0px;
margin: 0px;
border: 0px solid black;
overflow: auto;
}

#container_illustration.test
{
left: 2000px;
}

#container_illustration_window_closed
{
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
padding: 0px;
margin: 0px;
border: 2px solid green;
overflow: auto;
/*venster eerst verbergen*/
display: none;
}
/***text.php****************************************************************************************************************************************************************/
#container_text
{
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
padding: 0px;
margin: 0px;
border: 0px solid black;
overflow:  auto;
display: block;
}

#return_to_illustration /* knop baobab_blue*/
{
position: fixed;
top: 5px;
left: 5px;
width: 50px;
height: 50px;
bottom: 0px;
padding: 0px;
margin: 0px;
border: 0px solid red;
/*venster eerst verbergen*/
display: block;
}

#page_arrow_left
{
position: fixed;
top: 1030px;
left: 5px;
}

#page_number
{
position: fixed;
display: block;
top: 1040px;
left: 300px;
}

#page_arrow_right
{
position: fixed;
display: block;
top: 1030px;
left: 600px;

}
/******************************************************************************************************************************************************************************/






#bottom_line_baobab_header_left 
{
position: fixed;
display: block;
top: 94px;
left: 0px; 
padding: 0px;
border-left: 0px;
border-right: 0px solid black;
border-bottom: 1px solid black;
border-top: 0px solid black;
margin: 0px;
height: 0px;
width: 430px;
color: black;
background-color: #000000; 
}


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


#special_groups_left
{
position: fixed;
display: block; 
left: 10px;
top: 150px;
margin: 10 px;
border: 0px solid black;
width: 280px;
height: 90%;

font-size: 18px;
background-color: #E0E0E0; 
overflow: scroll;
}

#name_special_group_left
{
position: fixed;
display: block; 
left: 10px;
top: 110px;
margin: 10 px;
border: 0px solid black;
width: 280px;
height: 90%;

font-size: 1.5rem;
background-color: yellow; 



}

#special_groups_right
{
position: fixed;
display: block; 

left: 300px;
top: 120px;
margin: 10 px;
border: 0px solid black;
width: auto;
height: 95%;

font-size: 1.5rem;
background-color: #F0F0F0; 
overflow: scroll;
}



.thumbnail {
position: relative;
padding-left: 2px;
padding-right: 2px;
padding-bottom: 2px;
padding-top: 2px;
border-left: 0px;
border-right: 0px;
border-bottom: 0px;
border-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-top: 0px;
}

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

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


#menu_left
{
display: block; 
padding: 0px;
margin: 0px;
border: 0px;
right: 0px;
}

#menu_left ul
{
padding: 0px;
margin: 0px;
border: 0px;
list-style-type: none;
display: block;
}

#menu_left ul li 
{
display: inline;
padding: 0px;
border: 0px;
margin: 0px;
}

#menu_left ul li a
{
	
	text-decoration: none;
	font-style: bold;
	list-style-type: none;
	margin: 0px;
	border: 0px;
	padding-left: 4px;
	padding-right: 4px;
	margin-left: 4px;
	background-color: #ADD9FE; /* baobab blue */
	border-left:1px solid #000000;
	border-right:1px solid #000000;
	border-bottom:1px solid #000000;
	border-top:1px solid #000000;
	color: #000000;
	float: left;
	width: 45px;
}

#menu_left ul li a.selected
{
	
	text-decoration: none;
	font-style: bold;
	list-style-type: none; 
	padding: 0.1em 0.1 em 0.1em 0.1em;
	background-color: yellow;
	border-left:1px solid #000000;
	border-right:1px solid #000000;
	border-bottom:1px solid #000000;
	border-top:1px solid #000000;
	color: #000;
	float: left;
}

#menu_left ul li a:hover
{
	background-color: #005d1F;
	color: #FFFFFF;
}



#family_tree
{
position: relative;
top: 170px;
}

#family_tree_line
{
background-color: yellow;
}

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

#family_tree_line_selected_taxon
{
font-weight: bold;
background-color: red;
//position: relative;
//
//float: left;
}



	
td.species_number{
		padding: 0.2em;
		background-color: #F0F0F0;
		color: #000000;
		text-align: right;
		vertical-align: top;
		vertical-align: top;
	}
	
	
/*****NIET GEBRUIKT**************************************************************************************/
.description_determination{
		padding: 0.2em;
		background-color: #DDF2F7;
		color: #000000;
		text-align: left;
		/*vertical-align: top;*/
		margin-top: 0em;
		margin-bottom: 0em;
		height: 20px;
		width: 530px;
		border-top: 1px solid black;	
		width: 600px;	
	}

.family_determination{
		padding: 0.2em;
		background-color: #DDF2F7;
		color: #000000;
		text-align: left;
		/*vertical-align: top;*/
		margin-top: 0em;
		margin-bottom: 0em;
		border-top: 1px solid black;		
	}
	
	
/****************************************************************************************************************************************************/		
	
	

.genus_determination{
	font-size: 1.5em;
		padding: 0.2em;
		background-color: #DDF2F7;
		color: #000000;
		text-align: left;
		vertical-align: top;
		margin-top: 0em;
		margin-bottom: 0em;
		border-top: 1px solid black;
		width: 470px;		
	}	
	
.thumbnail_determination{
	
		padding: 0.2em;
		background-color: #DDF2F7;
		color: #000000;
		text-align: left;
		vertical-align: top;
		margin-top: 0em;
		margin-bottom: 0em;
		border-top: 1px solid black;
		top: 0px;
		width: 470px;	
	}
	
/****************************************************************************************************************************************************/	
	
.higher_taxa{
		padding: 0.25em;
		background-color: #EAF2F7;
		color: #000000;
		text-align: left;
		vertical-align: top;
		width: 6em;
		
	}	

.genera{
		padding: 0.25em;
		background-color: #EAF2F7;
		color: #000000;
		text-align: left;
		vertical-align: top;
		width: *;
	}	


.right{
		padding: 0.2em;
		background-color: #ADD9FE;
		color: #000000;
		text-align: right;
		
	}
	
	
	.left{
		padding: 0.2em;
		background-color: #ADD9FE;
		color: #000000;
		text-align: left;
		
	}
	
	

	


#test
{
display: block;
position: fixed;
font-size: 12px; /* hier wordt de grote van de in te voeren letters bepaald */
padding: 3px;
border: 5px;
margin: 1px solid black;
width: 250px;
height: 1070px;
color: black;
top: 330px;
right: 30px;
background-color: #876543; /*  */
overflow: auto;
}

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









 td.statistics{
		padding: 1em;
		background-color: #DDDDDD;
		font-size: 11px; /* hier wordt de grote van de in te voeren letters bepaald */
		text-align: left;
		vertical-align: top;
		border: 0px;
		margin: 1px;
		padding: 3px;
		height: 20px;
		width: 200px;
	}
	
tr.own_input
{
background-color: #DD0000;
}

#container_resultset_photos
{
display: block; 
position: fixed;
left: 0px;
right: 0px;
top: 120px;
bottom: 0px;
overflow: auto;
font-size: 15px;
background-color: #F0F0F0; 
}

#resultset_photos
{
left: 0px;
display: block; 
position: relative; 
border: 0px solid red;
margin: 0px;
padding: 20px;
font-size: 15px;
background-color: #F0F0F0; 
}


#locality
{
position: fixed;
top: 30px; /*aantal pixels vanaf de top */
right: 95px; /*aantal pixels vanaf de rechterkant */
width: 120px;
height: 20px;
color: #000000; /*hier wordt de kleur van de in te voeren letters bepaald */
font-size: 14px; /* hier wordt de grote van de in te voeren letters bepaald */
padding-left: 4px;
padding-right: 4px;
padding-bottom: 1px;
padding-top: 0px;
border: 1px solid black;
background-color: #FFFFFF; 
}

#distribution_unit
{
position: fixed;
top: 30px; /*aantal pixels vanaf de top */
right: 240px; /*aantal pixels vanaf de rechterkant */
width: 120px;
height: 20px;
color: #000000; /*hier wordt de kleur van de in te voeren letters bepaald */
font-size: 14px; /* hier wordt de grote van de in te voeren letters bepaald */
padding-left: 4px;
padding-right: 4px;
padding-bottom: 1px;
padding-top: 0px;
border: 1px solid black;
background-color: #FFFFFF; 
}


#id
{
position: fixed;
display: block; /*belangrijk is dat hier bij display box wordt aangegeven*/
top: 30px; /*aantal pixels vanaf de top */
right: 675px; /*aantal pixels vanaf de rechterkant */
width: 40px;
height: 20px;
color: #000000; /*hier wordt de kleur van de in te voeren letters bepaald */
font-size: 12px; /* hier wordt de grote van de in te voeren letters bepaald */
padding-left: 4px;
padding-right: 4px;
padding-bottom: 1px;
padding-top: 0px;
border: 1px solid black;
background-color: #FFFFFF; 
}


/*TEST*/

#cssmenu,
#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
  margin: 0;
  padding: 0;
  position: relative;
  border: 0;
  line-height: 1;
  box-sizing: content-block;
}
/*#cssmenu {
  height: 90px;
  border-radius: 5px 5px 0 0;
  -moz-border-radius: 5px 5px 0 0;
  -webkit-border-radius: 5px 5px 0 0;
  background: #123456;
  
 /* background: -moz-linear-gradient(top, #fefefe 0%, #ADD9FE 100%);*/
  /*  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #fefefe), color-stop(100%, #eee9f0));*/
  /*background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fefefe), color-stop(100%, #eee9f0));*/
 /* background: -webkit-linear-gradient(top, #fefefe 0%, #ADD9FE 100%);*/
  /* background: -o-linear-gradient(top, #fefefe 0%, #ADD9FE 100%);*/
  
 /* background: -ms-linear-gradient(top, #fefefe 0%, #ADD9FE 100%);
  background: linear-gradient(top, #fefefe 0%, #ADD9FE 100%);*/
  
  /* dit is de rode streep onderaan
  border-bottom: 2px solid #db000b;
 
  width: auto;
}


#cssmenu:after,
#cssmenu ul:after {
  content: '';
  display: block;
  clear: both;
}
 */
 
#cssmenu a {
  /*background: #ADD9FE; baobabblue lengte van het menu*/
  background: #ADD9FE;
 /* background: -moz-linear-gradient(top, #fefefe 0%, #ececec 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fefefe), color-stop(100%, #ececec));
  background: -webkit-linear-gradient(top, #fefefe 0%, #ececec 100%);
  background: -o-linear-gradient(top, #fefefe 0%, #ececec 100%);
  background: -ms-linear-gradient(top, #fefefe 0%, #ececec 100%);
  background: linear-gradient(top, #fefefe 0%, #ececec 100%);*/
  color: #000;
  display: inline-block;
  

  
  line-height: 25px; /*reageert*/
 
  margin: 0 px; /* reageert niet*/
  border: 0px solid black;/*geeft een lijn om de tabs*/
  text-decoration: none;
}

#cssmenu ul {
/*hiermee stel je de positie van de menubalk in */
  list-style: none;
  position: fixed;
  padding: 0px;
  top: 63px;
  right: 110px;
}

}
#cssmenu > ul {
  float: right;
}

#cssmenu > ul > li {
  float: right;
}

#cssmenu ul li input
/*maakt de knoppen van de menu balk*/
{
	background-color: #ADD9FE;
	font-size: 16px; /* reageert */
	font-style: default; /*reageert*/
	border: 0px solid black;/*reageert: geeft een lijn om de tabs*/
	padding: 0 10px; /*reageert: geeft de ruimte aan de zijkant naast de letters/knoppen weer*/
}

#cssmenu ul li input.selected
{
	background-color: #F0B531;
	
}

#cssmenu ul li input.selected:hover
{
	background-color: #F0B531;
	color: black;
	cursor: default; /*reageert: vervangt hand cursor in normale cursor*/
}

#cssmenu ul li input:hover
{
	background-color: green;
	cursor: pointer; /*reageert: geeft hand cursor*/
		color: white;
}


#cssmenu > ul > li > a {
  color: #000;
  font-size: 16px; //*hier kan de grote van de letters mee worden aangepast*/ 
  font-style: default; /*de style reageert niet!!*/
}

#cssmenu > ul > li:hover:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  bottom: 0;
  border-left: 0px solid transparent; /*was 10 px hiermee verdwijnt het rode blokje!*/
  border-right: 0px solid transparent; /*was 10 px hiermee verdwijnt het rode blokje!*/
  border-bottom: 0px solid #db000b; /*was 10 px hiermee verdwijnt het rode blokje!*/
  margin-left: 0px; /*was -10 px */
  background: #444444; /*was 10 px hiermee verdwijnt het rode blokje!*/
}


#cssmenu > ul > li:first-child > a {
 /* border-radius: 5px 0 0 0;
  -moz-border-radius: 5px 0 0 0;
  -webkit-border-radius: 5px 0 0 0;*/
}

#cssmenu > ul > li.active:after {

  background: #444444;
}
#cssmenu > ul > li.active > a {
 /* -moz-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);*/
  background: #444444; /*groen voor hover achtergrond*/
 
  /*background: -moz-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ececec), color-stop(100%, #ffeeff ef));
  background: -webkit-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
  background: -o-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
  background: -ms-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
  background: linear-gradient(top, #ececec 0%, #ffeeff ef 100%);*/
}
#cssmenu > ul > li:hover > a {
 	background-color: #005d1F;
	color: #ABCDEF; /*kleur van de knop*/
 /* background: -moz-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ececec), color-stop(100%, #ffeeff ef));
  background: -webkit-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
  background: -o-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
  background: -ms-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
  background: linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
  -moz-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);*/
}


#cssmenu .has-sub {
 z-index: 1; /*anders geen submenus!!*/
}

#cssmenu .has-sub:hover > ul {
  display: block;
}

#cssmenu .has-sub ul {
  display: none;
  position: absolute;
  width: 250px;
  top: 100%;
  left: 0;
}

#cssmenu .has-sub ul li {
  margin-bottom: -1px;
}

#cssmenu .has-sub ul li a {
  background: #444444; /*kleur van het pulldown menu*/
  border-bottom: 1px dotted #ff0f1b;
  filter: none;
  font-size: 16px; /*hiermee kan de grote van de letters worden aangepast*/
  display: block;
/*line-height: 120%;*/
  padding: 10px;
  color: #ffffff;
}

#cssmenu .has-sub ul li:hover a {
  background: #a80008;
}

#cssmenu .has-sub .has-sub:hover > ul {
  display: block;
}

#cssmenu .has-sub .has-sub ul {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
}

#cssmenu .has-sub .has-sub ul li a {
  background: #999999; /*kleur van het pulldown submenu*/
  border-bottom: 1px dotted #ff0f1b;
}

#cssmenu .has-sub .has-sub ul li a:hover {
  background: #000000; /*hover kleur van het pulldown submenu*/
}

#cssmenu ul li a.selected
{
	
	background-color: #F0B531; /*kleur selected*/
	color: #000;

}



.rTable{
	display: table;
}



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