body {
	margin-top:5px;
	margin-bottom:5px;
	margin-left:5px;
	margin-right:5px;
	font-family: Verdana,Helveica,Arial,sans-serif; 
	font-size:100%; 
	background-color:#ffffff;
}
P {
  font-size : 100%;
  font-family : Verdana,Helvetica,Arial,sans-serif;
  img { border: none; }
}

 .nobrk{
	break-inside: avoid;
}
 
.link_button {
    background-color: #4CAF50; /* Green */
    border: none;
	width: 22px;
    color: white;
    padding: 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    margin: 4px;
    cursor: pointer;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);	
	border-radius: 50%; 
}
.button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    margin: 4px;
    cursor: pointer;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);	
}
.button:hover {
    background-color: #AF4C50; /* Orange */
    color: white;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);	
}
.button1 {border-radius: 12px;}
.button2 {border-radius: 50%; }


.desctext{
	max-height: 150px;	
}
.desctext:hover{
	max-height: 100%;
}

.taxonomy {
	margin-bottom:3px;
	font-size: 60%;
	a:link { color: #070; }
	a:visited { color: #070; }
	a:hover { color: #70DB93; }
	a:active { color: #70DB93; }
}

.taxonomy a{
	text-decoration:none;
}

.colcontent {
	column-gap: 15px;
	padding-top:6px;
	padding-right:6px;
	width:auto; 
	min-width: 100px;
}
	
.colcontent100 {
	columns: 640px 2; 
	/*480 px*/
	column-gap: 15px;
	padding-top:6px;
	padding-right:6px;
	/*column-rule: 1px solid lightgrey;*/
	width:auto; 
	min-width: 100px;
	}

.col3content {
	columns: 400px 3;
	/*columns: 480px 3;*/
	column-gap: 15px;
	padding-top:6px;
	padding-right:6px;
	/*column-rule: 1px solid lightgrey;*/
	}
.col4content {
	columns: 320px 4;
	column-gap: 15px;
	padding-top:6px;
	padding-right:6px;
	/*column-rule: 1px solid lightgrey;*/
	}

.tab {
	border-radius: 10px 10px 0px 0px;
	font-size: 10px;
	/*display: none;*/
	display:inline-block;
	transition: 0.3s;
	border: none;
	padding: 10px;
    vertical-align: middle;
    overflow: hidden;
    text-decoration: none;
	text-align: center;
    cursor: pointer;
    white-space: nowrap;
	margin-right: 1px;
}
.tabb {
	border-radius: 50%;
	font-size: 8px;
	transition: 0.3s;
	border: none;
	padding: 10px;
    vertical-align: middle;
    overflow: hidden;
    text-decoration: none;
	text-align: center;
    cursor: pointer;
    white-space: nowrap;
	color: #fff;
	margin-right: 1px;
}
.tabb::after{content: ">";}
	
#prnt {float:right; cursor:pointer; background-color:#577; color:#fff; border-radius:3px;}
#prnt:hover {background-color: #fff; color: #aaa;}

#tith {padding: 5px; margin: 1px; text-align: center; border-radius: 4px;}
#divh {padding: 5px; margin: 1px; text-align: center; border-radius: 4px;}
#clah {padding: 5px; margin: 1px; text-align: center; border-radius: 4px;}
#ordh {padding: 5px; margin: 1px; text-align: center; border-radius: 4px;}
#famh {padding: 5px; margin: 1px; text-align: center; border-radius: 4px;}
#sfah {padding: 5px; margin: 1px; text-align: center; border-radius: 4px;}
#genh {padding: 5px; margin: 1px; text-align: center; border-radius: 4px;}

#titletext {
	text-shadow: 2px 2px 5px #000000; 
	font-size: 150%; 
}

	
#bgmap {
	padding:3px; 
	width: 260px;
	break-inside: avoid;
	float:left;
	text-align: center;
    background-color: #f5f5f5;
	margin-right: 16px;
	border-radius: 4px;
	border: 1px solid #ccc;
	border-color: #9e9e9e;
	font-size: 60%;
	border-top: 6px solid #ccc;
	box-sizing: inherit;
}

#eco{
	break-inside: avoid;
    margin-top: 6px;
	padding:3px; 
    font-size: x-small;
	background-color: #dfd;
	border-color: #4CAF50;
	border-left: 6px solid #4CAF50;
	float:right;
	/*width:30%;*/
	/*min-width:120px;*/
	max-width:420px;
	border-radius: 4px;	
	padding-left: 5px;
}

#pagenav {
	float:right;
	min-height:30px
}

#pagewrap {
	padding: 5px;
	width: 960px;
	margin: 20px auto;
}
/*header {
	height: 100px;
	//padding: 0 15px;
}*/
#content {
	width: 78%;
	float: left;
	/*padding: 2px 2px;*/
}
/*structure :: */

#middle {
	width: 18%; /* Account for margins + border values */
	float: left;
	/*padding: 2px 2px;*/
	/*margin: 0px 1px 1px 1px;*/
}

#sidebar {
	width: auto;
	/*padding: 5px 15px;*/
	float: center;
	width: 500px;
	height: 100%;
}
#ftr {
	clear: both;
	padding: 0;
	width: 100%;
	margin-top: 20px;
	padding-top: 10px;
	border-top: 1px dashed #ddd;
}

#t{
	width: calc(100% - 280px);
	max-width:800px;
	float:left;
	/* break-inside: avoid;*/
	box-sizing: inherit;
}

#sel{
	float:left;
	/* break-inside: avoid;*/
	box-sizing: inherit;
	width: calc(100% - 280px);
}

#ssel{width:60%;min-width:240px;max-width:800px;float:left}

#filter-query{
	break-inside: avoid;
}

#fltrr{ 
/*filteresult*/
/*	columns: 200px 3;*/
  -webkit-column-count: 3;
     -moz-column-count: 3;
          column-count: 3;
  -webkit-column-width: 200px;
     -moz-column-width: 200px;
          column-width: 200px;
	column-gap: 20px;
	column-rule: 1px dashed lightgrey;
	padding-top:3px;
	padding-bottom:6px;
}
/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* for 1280px or less */
@media screen and (max-width: 1280px) {
	.colcontent {
		columns: 1px 1;
		
	}
	#t{
		max-width:600px;
		/* break-inside: avoid;*/
		box-sizing: inherit;
	}

/* for 980px or less */
/*@media screen and (max-width: 980px) {*/
	.colcontent {
		columns: 1px 1;
		
	}
	
	.col4content {
		columns: 320px 3;
		column-gap: 15px;
		padding-top:6px;
		padding-right:6px;
		/*column-rule: 1px solid lightgrey;*/
	}

	.col3content {
		/*columns: 480px 2;*/
		columns: 49% 2;
		column-gap: 15px;
		padding-top:6px;
		padding-right:6px;
		/*column-rule: 1px solid lightgrey;*/
	}
	
	#t{
		width:50%;
		max-width:420px;
		/* break-inside: avoid;*/
		box-sizing: inherit;
	}
	#sel{
		width:100%
	}
	#pagewrap {
		width: 94%;
	}
	#content {
		width: 68%;
		//padding: 1% 4%;
		float: left;
	}
	#middle {
		width: 28%;
		/*padding: 1% 4%;*/
		/*margin: 0px 0px 5px 5px;*/
		float: left;
	}
	
	#sidebar {
		/*clear: both;*/
		/*padding: 1% 4%;*/
		/*width: auto;*/
		min-width: 200px;
		max-width: 500px;
		height: 100%;
		float: center;
	}

	header, footer {
		/*padding: 1% 4%;*/
	}
	#bgmap{
		width:50%;
		min-width:150px;
		max-width:240px;
	}
	#filteresult{
	/*	columns: 200px 2;*/
  -webkit-column-count: 2;
     -moz-column-count: 2;
          column-count: 2;
  -webkit-column-width: 200px;
     -moz-column-width: 200px;
          column-width: 200px;		column-gap: 20px;
		column-rule: 1px dashed lightgrey;
		padding-top:3px;
		padding-bottom:6px;
	}
}

/* for 600px or less */
@media screen and (max-width: 600px) {
	.colcontent {
		columns: 0px 1;
	}

	.col3content {
		columns: 0px 1;
	}

	#content {
		width: 60%;
		float: left;
	}
	
	#middle {
		width: 36%;
//		width: auto;
		float: left;
	}
	
	#sidebar {
		//width: auto;
		min-width: 200px;
		max-width: 500px;
	}

	#bgmap{
		width:50%;
		max-width:200px;
		font-size: 60%;
	}
	#sel{
		width:100%
	}
	#filteresult{
		/*columns: 290px 2;*/
  -webkit-column-count: 2;
     -moz-column-count: 2;
          column-count: 2;
  -webkit-column-width: 200px;
     -moz-column-width: 200px;
          column-width: 200px;		
		column-gap: 20px;
		column-rule: 1px dashed lightgrey;
		padding-top:3px;
		padding-bottom:6px;
	}
	#t{
		width:50%;
		max-width:300px;
		/* break-inside: avoid;*/
		box-sizing: inherit;
	}
}

/* for 480px or less */
@media screen and (max-width: 480px) {
	.colcontent {
		columns: 1px 1;
	}
	.col3content {
		columns: 1px 1;
	}
	.col4content {
		columns: 220px 2;
		column-gap: 15px;
		padding-top:6px;
		padding-right:6px;
		/*column-rule: 1px solid lightgrey;*/
	}
	#filteresult{
/*		columns: 480px 1;*/
  -webkit-column-count: 1;
     -moz-column-count: 1;
          column-count: 1;
  -webkit-column-width: 200px;
     -moz-column-width: 200px;
          column-width: 200px;		column-gap: 20px;
		column-rule: 1px dashed lightgrey;
		padding-top:3px;
		padding-bottom:6px;
	}
	header {
		height: auto;
	}
	h1 {
		//font-size: 2em;
	}
		
	#content {
		width: 50%;
		float: left;
	}
	#middle {
		width: 50%;
		float: left;
	}
	#sidebar {
		width: auto;
		float: none
	}
	#bgmap{
		width:60%;
		min-width: 240px;
		font-size: 50%;
	}
	#t{
		width:100%;
		max-width:100%;
	}
	#sel{
		width:100%
	}
	#eco{
		float:right;
		/*min-width:480px;*/
	}
	#ssel{width:60%;min-width:100%;max-width:800px;float:left}
}

@media screen and (max-width: 320px) {
	.colcontent {
		columns: 1px 1;
	}
	.col4content {
		columns: 1px 1;
		/*column-rule: 1px solid lightgrey;*/
	}
	header {
		height: auto;
	}
	h1 {
		//font-size: 2em;
	}
	#content {
		width: 50%;
		float: left;
	}
	#middle {
		width: 50%;
		float: left;
	}
	#sidebar {
		width: auto;
		float: none
	}
	#bgmap{
		width:100%;
		min-width:100%;
		max-width:100%;
		font-size: 80%;
	}
	#t{
		width:100%;
		min-width:100%;
		max-width:100%;
	}
	#sel{
		width:100%
	}
	#eco{
		float:right;
		/*min-width:100%;
		max-width:100%;*/
	}
	#ssel{width:60%;min-width:100%;max-width:800px;float:left}
}


#content {
	background: #ffffff;
}
#sidebar {
	background: #ffffff;
}
header, #content, #middle, #sidebar {
	margin-bottom: 5px;
}

#grad1 {
    height: 200px;
    background: yellow; /* For browsers that do not support gradients */    
	background: -webkit-linear-gradient(left, green, orange); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(right, green, orange); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(right, green, orange); /* For Firefox 3.6 to 15 */	
    background: linear-gradient(to right, green, orange); /* Standard syntax (must be last) */
}

.pgnbtn {
  /*  background-color: #4CAF50; /* Green */
  /* color: white; */
  border: none;
  padding: 8px 14px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  /*font-size: 16px;*/
  margin: 4px 2px;
  cursor: pointer;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  border-radius: 50%;
}
.pgnbtn:hover{
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);  
}

.pgbtn {
  border: none;
  padding: 8px 12px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  float:right !important;
  margin: 1px 1px;
  cursor: pointer;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  border-radius: 8px;
}
.pgbtn:hover{
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);  
}

.pgbtn::after{
  content:" \25BC"
}

.pgbtnt {
  border: none;
  float: right;
  padding: 8px 12px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  float:right !important;
  margin: 1px 1px;
  cursor: pointer;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  border-radius: 8px;
}
.pgbtnt:hover{
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);  
}

.pgbtnt::after{
  content:" \25BA"
}

.hbutton {
  /*background-color: #4CAF50; /* Green */
  /*color: white;*/
  /*замества w3-button w3-round-xxlarge w3-border */
  padding: 5px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
  border-radius: 12px;
  border: 1px solid #00007f;
}

.hb-g { /*green*/
  padding: 5px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
  border-radius: 12px;
  border: 1px solid #007f00;
  background-color: #beb;
  color: #000;
}
.hb-g:hover {
  background-color: #080;
  color: #fff;
}

.hb-a { /*amber*/
  padding: 5px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
  border-radius: 12px;
  border: 1px solid #f70;
  background-color: #feb308;
  color: #000;
}
.hb-a:hover {
  background-color: #870;
  color: #fff;
}

.hb-l { /*lime*/
  padding: 5px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
  border-radius: 12px;
  border: 1px solid #590;
  background-color: #aaff32;
  color: #000;
}
.hb-l:hover {
  background-color: #590;
  color: #fff;
}

.hb-c { /*lightblue*/
  padding: 5px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
  border-radius: 12px;
  border: 1px solid #59d;
  background-color: #7bc8f6;
  color: #000;
}
.hb-c:hover {
  background-color: #59d;
  color: #fff;
}

.hb-y { /*yellow*/
  padding: 5px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
  border-radius: 12px;
  border: 1px solid #770;
  background-color: #ffff14;
  color: #000;
}
.hb-y:hover {
  background-color: #770;
  color: #fff;
}

.hb-r { /*red*/
  padding: 5px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
  border-radius: 12px;
  border: 1px solid #730;
  background-color: #ff7700;
  color: #000;
}
.hb-r:hover {
  background-color: #730;
  color: #fff;
}

.no{
	display:none;
}
.btflt{
	font-size:12px;
	border-radius: 4px;
	text-decoration: none;
	
}

#detkey{
	float:left;
	box-sizing: inherit;
	width:100%;
}

.table{
	display:  table;
    background-color:#eee;
	width:100%;
    /*border:1px solid  #666666;*/
    border-spacing:5px;
	border-radius:4px;
}

.tr{
	display: table-row;
	width:100%;
	height:100%;
}
.trn{
	display: table-column;
	float: left;
	width: 45px;
	padding: 3px;
	font-weight: bold;
}
.trd{
	float:left;/*fix for  buggy browsers*/
    display:table-column;
	width: calc(100% - 48px);
	padding: 3px;
	min-height:16px;
}
.ki{
	color:#888;
	font-style: italic;
	font-size: 80%;
}

#refUL{
	list-style: none;	
}
#refUL li{
  border-bottom: 1px dotted #ddd; /* Add a border to all links */
  background-color: #f6f6f6; /* Grey background color */
  padding: 3px;
}
#refUL li:hover:not(.header) {
  background-color: #eee; 
}

#taxonname{
	border-radius: 3px 15px 3px 3px; 
	width:50%;
	min-width:100px;
	float:left;
	border: 1px solid #ccc!important;
	padding: 8px 16px!important;
	font-size: 12px!important;
	color: #000 !important;
    background-color: #f4faf4 !important;
}
#cfilt{	border-radius: 0px 15px 0px 0px;}
#sfilt{	border-radius: 15px 0px 0px 0px;}
#ffilt{	border-radius: 0px 0px 15px 15px;}
#x-lnk{	display: block;}
#copyright{	max-width:800px; font-size:10px;}
#a-mfr{	color: #7f0000;}
#a-mfr::before{	content: "\A ";  white-space: pre;}
#a-mpr{	color: #ff7f00;}
#a-mpr::before{	content: "\A ";  white-space: pre;}
#a-mfl{	color: #00007f;}
#a-mfl::before{	content: "\A ";  white-space: pre;}
#a-msp{	color: #7f0000;}
#a-msp::before{	content: "\A ";  white-space: pre;}
#a-alt{ color: #030;}
#a-alt::before{	content: "\A ";  white-space: pre;}

#used{ float:left; max-width:300px; padding-left:16px;}

#clean{display:none;}

#txtpage{
	width:94%;
	max-width:1600px;
	padding-left:3%;
}
#qr{
	text-align: right;
    text-decoration: none;
	color:#499;
}

@media print{
	#bgmap{width:180px;}
	#t{width:calc(100% - 200px);}
	#filter-query{display:none;}
	#sel{width:100%;}
	#tabs{display:none;}
	#fltrl{column-count: 2;}
	#picture:{max-width:320px;}
	#spimage:{max-width:320px;}
	.pgnbtn{display:none;}
}

@media screen and (max-width: 400px){
	#txtpage{
		width:100%;
		padding-left:0px;
	}
}