body, html {
       margin:0;
       padding:0;
}

body {
	font-family:  verdana, arial, sans-serif;
	font-size: 9pt;   /* 12px;  */
	color: #3B3B3B;
	margin: 0px;
	padding: 2% 2.9%;  
	background-color: #D0D8E6;  
	background-image: url(_bilder/backgraduate_blue.gif);
	background-repeat: repeat-x;
	background-position: left top;
	background-attachment: fixed;
}

#header {
	margin-left: 10px;  
	margin-right: 20px;
}
#language_selection {
	height: 14px; 
	margin: 1px 10px 6px 10px; 
}
#container {
	background-color: #999999; 
	margin-left: 10px;  
	margin-right: 20px;
}
#sidebar {
       width: 180px;
       float: left;  
	   padding-top: 8px;
	   color: #3B3B3B;
}
#mainbox {   
	margin-left: 180px;	
	min-width: 756px;
	padding: 18px 18px 18px 18px;
	background-color: #FFFFFF; 
	min-height: 611px;	
}
#infobox {
	min-height: 80px;	
}
/* Star-Plus-HTML Hack:   wird nur vom Internet Explorer 7 interpretiert. */
 *:first-child+html #mainbox {
    min-width: 300px;
}

#footer {
	clear: left;
	margin: auto;
	text-align: center;
}

h1 {
	font-family: "trebuchet MS", verdana, arial, sans-serif;
	font-size: 170%;
	font-weight: normal;
	letter-spacing: 0.05em;
	line-height: 120%;
	border: 0px none;
	color: #636363;
	padding: 10px 40px 25px 10px;
}
a {
	color: #FD8D37;
	text-decoration: underline;
}
a.nocolor {
	color: #FFFFFF;      
	text-decoration: none;
}
a:hover {
	color: #810021;
	text-decoration: underline;
}
.button {
    display: inline-block;
    padding: 5px 8px;
    font-size: 11px;
    color: #007bff;      /*  white; */
/*    background-color: #007bff;  */
    background-image: url(_bilder/back_verlauf.gif);
	background-repeat: no-repeat;
	background-position: center top;
    text-decoration: none;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    transition: background 0.3s;
}
.button:hover {
    background-color: #0056b3;
}

/*  Navigation  */
.navigation {
	width: 170px;
	margin: 0 0 0 5px; 
	background-color: #F1F1F1;
	background-image: url(_bilder/back.gif);
	background-repeat: no-repeat;
	background-position: left bottom;
}
.navigationh3 {
	color: #FFF;
	text-align: left;
	padding: 2px 5px 1px 8px;
	width: 157px;	
	margin: 0 0 0 5px; 
	background-image: url(_bilder/back_verlauf.gif);
	background-repeat: no-repeat;
	background-position: left top;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #D55B02;
	line-height: 16px;
}

.navigationh3black {
	color: #000;
	text-align: left;
	padding: 2px 5px 1px 8px;
	margin: 15px 0 0 0;
	background-image: url(_bilder/back_verlauf.gif);
	background-repeat: no-repeat;
	background-position: left top;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #D55B02;
	line-height: 16px;
}
.navigationh4 {
	color: #FFF;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #D55B02;
	line-height: 16px;
}

.navigation ul {
	font-size: 90%;
	list-style: none;
	padding: 2px 0 1px 0; 
	margin: 0;
}
.navigation ul li {
	height: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	list-style-image: none;
}
.navigation ul li a {
	height: 100%;
	color: #3B3B3B;
	text-decoration: none;
	margin: 0;
	padding: 4px 3px 5px 22px;
}
.navigation ul li a:hover {
	height: 100%;
	color: #636363;
	text-decoration: underline;
	margin: 0;
	padding: 4px 3px 5px 22px;
}
.Nav1 {
	display: block;
	text-align: left;
	background-image: url(_bilder/icon_folder.gif);
	background-repeat: no-repeat;
	background-position: 1.5% 50%;
}
.Nav1:hover {
	display: block;
	text-align: left;
	background-image: url(_bilder/icon_folder_active.gif);
	background-repeat: no-repeat;
	background-position: 1.5% 50%;	
	background-color: #FFF;
}
.hilite{	background-color: #FFFF50;  }
.lowlite1{	background-color: #33CCFF;  }
.lowlite2{	background-color: #0066FF;  }
.green{     background-color: #55ff33;  }

/* Navigation end */

/* Input Areas   */
.search {
	margin:  0 0 0 6px;
	padding-top:  5px;
	padding-bottom:  5px;
	text-align: left;
	font-size: 85%;
}
.search input {
	margin: 0;
	width: 100px;
	border: 1px solid #FD8D37;
}
.search input.small {
	margin: 0;
    width: 40px;
	border: 1px solid #FD8D37;
}
.search input.go {
	position: relative;
	top: 3px;
	width: auto;
	font-weight: bold;
	font-size: 100%;
	border: none;
}
/* Input Areas end
-----------------------------------------  */

.textklein {
	font-size: 85%;	
}

.Copyright {
	padding: 10px; 
	font-size: 90%;
}

/* language selction row */
#langflags {position: relative; left: 11em; top: -2.1em;
	margin: 10px; 
	padding: 2px; 
	width: 189px; 
	height: 13px; }
#langflags li {width: 21px; height: 13px; position: absolute; top: 2px; 
	background: url(_bilder/langflags.png) 0 0 no-repeat; 
	display: block; 
	list-style: none;}
#langflags a {width: 20px; height: 12px; display: block;}
#langflags a:hover {border: solid 1px #000;}
#langflags #flag1 {left: 0px;}
#langflags #flag2 {left: 24px; background-position: -24px 0;}
#langflags #flag3 {left: 48px; background-position: -48px 0;}
#langflags #flag4 {left: 73px; background-position: -73px 0;}
#langflags #flag5 {left: 97px; background-position: -97px 0;}
#langflags #flag6 {left: 121px; background-position: -121px 0;}
#langflags #flag7 {left: 145px; background-position: -145px 0;}
#langflags #flag8 {left: 169px; background-position: -169px 0;}
/* end language selction row */

.wide li,dd {  margin: 10px;  /* list-style-type: circle; */  }
.wide dt {	font-weight: bold; }

table {   
	border-color: #AAA;
    border-collapse: collapse;    /*  separate;  */
}
td.boxed {	
	border-width: 1px;
	border-style: solid;
	border-color: #AAA;
	vertical-align: top;
}
td.nobox {	
	border-width: 0px;
	border-style: solid;
	border-color: #AAA;
	vertical-align: top;
}
tr td.KategorieHeader {
	border-width: 1px;
	border-style: solid;
	border-color: #AAA;
	font-weight: bold; 
	vertical-align: top;
	background-color: #CCC;
}
td {
	font-size: 12px;
/*	vertical-align: top;  */
}
th {
	border-width: 1px;
	border-style: solid;
	border-color: #8CACBB;
	background-color: #D0D8E6;
	font-weight: bold;     /*300;  */
	text-align: center;
	vertical-align: bottom;  
/*	text-indent: 5px;  */
	font-size: 11px;
	line-height: 17px;
} 

.middle {
    vertical-align: middle;
}
.center-text {
        text-align: center;
    }
.right-text {
        text-align: right;
    }

/*######################################################
 For display of OrigNames (non-latin names) in 
 results of events. Partly done by toggleSpan.js
########################################################*/
/* OrigName in Span-Tag next to normal name, in tbody (id=EvtRslt) of result table   */
#EvtRslt .showSpan {display:table-row}
#EvtRslt .hideSpan {position:static;display:none}
/* Link in Header of result table  */
.OrName {
	display: block;  
	text-align: left;  
	font-size: 90%;
	font-weight: 100;
	text-indent: 20px;
	background-image: url(_bilder/orange_plus.gif);
	background-repeat: no-repeat;
	background-position: 2% 50%;
}
.OrName:hover {
	display: block;  
	text-align: left;  
	background-repeat: no-repeat;
	background-position: 2% 50%;
	background-image: url(_bilder/orange_down.gif);
	background-color: #FFF;
	border-width: 0px;
	border-style: none;
}
.OrName2 {
	display: block;  
	text-align: left;  
	font-size: 90%;
	font-weight: 100;
	text-indent: 20px;
	background-image: url(_bilder/orange_minus.gif);
	background-repeat: no-repeat;
	background-position: 2% 50%;
}
.OrName2:hover {
	display: block; 
	text-align: left;  
	background-repeat: no-repeat;
	background-position: 2% 50%;
	background-image: url(_bilder/orange_up.gif);
	background-color: #FFF;
	border-width: 0px;
	border-style: none;
}

/* Link to toggle Advanced Filter */
.Filter {
	background-color: #F1F1F1;
	position: static;
}
.AFclosed {
/*	position: relative;
	left: 4em;   */
	float: right;  
	font-size: 90%;
	font-weight: 100;
	text-indent: 20px;
	background-image: url(_bilder/orange_plus.gif);
	background-repeat: no-repeat;
	background-position: left;
	cursor: pointer;
	color: #FD8D37;
}
.AFclosed:hover {
/*	background-position: 2% 50%; */
	background-image: url(_bilder/orange_down.gif);
	border-width: 0px;
	border-style: none;
	background-color: #FFF;
}
.AFopen {
	float: right;  
	font-size: 90%;
	font-weight: 100;
	text-indent: 20px;
	background-image: url(_bilder/orange_minus.gif);
	background-repeat: no-repeat;
	background-position: left;
	cursor: pointer;
	color: #FD8D37;
}
.AFopen:hover {
	background-image: url(_bilder/orange_up.gif);
	border-width: 0px;
	border-style: none;
	background-color: #FFF;
}
input.Numeric{
	text-align: right;
}

/*######################################################
 For sorting of tables via javascript sortable.js  
########################################################*/
/* No border around images of sorting arrows  */
th a img {	
	border: 0;
	text-decoration: none;  /* no underline */
}
/* Alternate coloring of table rows. */
tr.odd td {	
	background-color: #eee;      /* #dfdfdf  */
	border-width: 1px;
	border-style: solid;
	border-color: #AAA;  
}
tr.even td {	
	background-color: #fff;
	border-width: 1px;
	border-style: solid;
	border-color: #AAA;  
}
tr.hilite td {	
	background-color: #ffff50;
	border-width: 1px;
	border-style: solid;
	border-color: #AAA;
}
tr td.hilite{	background-color: #FFFF50;  }
tr td.green {	background-color: #55ff33;  }
/* Do not remove above line. It is needed to hilite single cells (in bulksearch) in tables with alternating (even/odd) grey
Due to precedence rules a class is not enough, needs elements as well.  */

/*######################################################
# Pagination
# Code from http://phpsense.com/php/php-pagination-script.html
# Layout (ccs) from http://www.phpeasystep.com/phptu/29.html
########################################################*/
div.pagination {
	padding: 3px;
	margin: 3px;
}
div.pagination a {
	padding: 2px 5px 2px 5px;
	margin: 2px;
	border: 1px solid #AAAADD;	
	text-decoration: none; /* no underline */
	color: #000099;
}
div.pagination a:hover, div.pagination a:active {
	border: 1px solid #000099;
	color: #000;
}
div.pagination span.current {
	padding: 2px 5px 2px 5px;
	margin: 2px;
		border: 1px solid #000099;		
		font-weight: bold;
		background-color: #000099;
		color: #FFF;
	}
div.pagination span.disabled {
	padding: 2px 5px 2px 5px;
	margin: 2px;
	border: 1px solid #EEE;	
	color: #DDD;
}
	

/*######################################################
  Tabbertabs: Registerkarten-Layout 
$Id: example.css,v 1.5 2006/03/27 02:44:36 pat Exp $ 
########################################################*/

/*--------------------------------------------------
  REQUIRED to hide the non-active tab content.
  But do not hide them in the print stylesheet! 
-----------------------------------------------------  */
.tabberlive .tabbertabhide {
	display:none;
}

/*--------------------------------------------------
  .tabber = before the tabber interface is set up
  .tabberlive = after the tabber interface is set up
  --------------------------------------------------*/
.tabber {}
.tabberlive {	margin-top:1em;}

/*--------------------------------------------------
  ul.tabbernav = the tab navigation list
  li.tabberactive = the active tab
  --------------------------------------------------*/
ul.tabbernav{
	 margin:0;
	 padding: 3px 0;
	 border-bottom: 1px solid #778;
	 font: bold 12px Verdana, sans-serif;
}

ul.tabbernav li{
	 list-style: none;
	 margin: 0;
	 display: inline;
}

ul.tabbernav li a{
	 padding: 3px 0.5em;
	 margin-left: 3px;
	 border: 1px solid #778;
	 border-bottom: none;
	 background: #DDE;
	 text-decoration: none;
}

ul.tabbernav li a:link { color: #448; }
ul.tabbernav li a:visited { color: #667; }

ul.tabbernav li a:hover{
	 color: #000;
	 background: #AAE;
	 border-color: #227;
}

ul.tabbernav li.tabberactive a{
	 background-color: #fff;
	 border-bottom: 1px solid #fff;
}

ul.tabbernav li.tabberactive a:hover{
	 color: #000;
	 background: white;
	 border-bottom: 1px solid white;
}

/*--------------------------------------------------
  .tabbertab = the tab content
  Add style only after the tabber interface is set up (.tabberlive)
  --------------------------------------------------*/
.tabberlive .tabbertab {
	 padding:5px;
	 border:1px solid #aaa;
	 border-top:0;
 /* If you don't want the tab size changing whenever a tab is changed you can set a fixed height */
 /* height:200px; */

 /* If you set a fix height set overflow to auto and you will get a
    scrollbar when necessary */
 /* overflow:auto; */
}

/* If desired, hide the heading since a heading is provided by the tab */
.tabberlive .tabbertab h2 {
	display:none;
}
.tabberlive .tabbertab h3 {
	display:none;
}

/* Example of using an ID to set different styles for the tabs on the page */
.tabberlive#tab1 {
}
.tabberlive#tab2 {
}
.tabberlive#tab2 .tabbertab {
	height:200px;
	overflow:auto;
}

/*######################################################
  Display of Google maps for startpos
########################################################*/
#map_canvas {
	width: 500px;
	height: 400px;
    float: left;  
}

#infoPanel {
	width: 350px;
	float: left;
	margin-top: 10px;
	margin-left: 10px;
}
#infoPanel div {
	margin-bottom: 5px;
}
#map {
		width: 895px; 
		height: 700px;
	}
.full_screen_map {
	left: 0px !important; 
	top: 0px !important; 
	width: 100% !important; 
	height: 100% !important; 
	margin-top: 0px !important; 
	margin-bottom: 8px !important; 
	position: absolute !important;
}
#legend {
    font-family: Arial, sans-serif;
    background: #fff;
    padding: 10px;
    margin: 10px;
    border: 3px solid #000;
}
#legend h3 {
    margin-top: 0;
}
#legend img {
    vertical-align: middle;
}

/*######################################################
  Multiselect with checkbox in filter
########################################################*/
:root
{
    --text: "Select values";
    --text_dist: "Select distances";
}
.multi_select
{
    height: 18px;
    width: 30%;
    overflow: hidden;
    
    position: relative;
}
.multi_select::before
{
    content: var(--text_dist);
    display: block;
    margin-left: 5px;
    margin-bottom: 2px;    
}
.multi_select_active
{
    overflow: visible !important;
    border: none;    
}
.multi_select option
{
    display: none;
    height: 18px;
    background-color: white;
}
.multi_select_active option
{
    display: block;
}

.multi_select option::before {
  content: "\2610";
  margin-left: 5px;
}
.multi_select option:checked::before {
  content: "\2611";
}