/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

/* ======================================================================================= */

* {
	box-sizing: border-box;
	word-wrap: break-word;
}


div.Hinweis {
	/*background: #80ff00;*/
	border-radius: 45px;
	box-shadow:  34px 34px 68px #53a600, 
							 -34px -34px 68px #adff00;
}

div.HeadMiddlePuffer {
	min-height: 10%;
	height:10%;
}

body {
	margin: 0;
	font-family:"Source Sans Pro";
	/* Caro 
	background-color: rgb(127,196,36);
	*/
	/* Fabs
	background-color: rgb(80,160,0);
	*/
	background-color: rgb(111,179,13);
}

div.Main {
	display: inline-block;
	width: 100%;
	min-height: 80%;

	clear: both;

	/*
	font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
	background-color: white;
	color: black;
	*/
	color: white;
}

a {
	color: white;
	/*text-decoration: none;*/
}

h2 {
	color: white;
	text-decoration: none;
}

h3 {
	color: white;
	text-decoration: none;
}


/*
div.Wechseltext {
	height: 6em;
	// Die folgenden drei zentrieren den Inhalt des div
  display: flex;
  align-items: center;
  justify-content: center;
}
*/




div.Storage {
	visibility: hidden;
	display: none;
}



/*
 * Tooltips
 * Idee aus https://pixelbar.be/blog/css-profi-tip-tooltip-attributen/
 */
a.tooltip {
  position: relative;
  text-decoration: none;
}
a.tooltip:after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 130%;
  left: 20%;
  background: #ffcb66;
  padding: 5px 15px;
  color: black;
  -webkit-border-radius: 10px;
  -moz-border-radius : 10px;
  border-radius : 10px;
  white-space: nowrap;
  opacity: 0;
  -webkit-transition: all 0.4s ease;
  -moz-transition : all 0.4s ease;
  transition : all 0.4s ease;
}
a.tooltip:before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-top: 20px solid #ffcb66;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  -webkit-transition: all 0.4s ease;
  -moz-transition : all 0.4s ease;
  transition : all 0.4s ease;
  opacity: 0;
  left: 30%;
  bottom: 90%;
}
a.tooltip:hover:after {
  bottom: 100%;
}
a.tooltip:hover:before {
  bottom: 70%;
}
a.tooltip:hover:after, a:hover:before {
  opacity: 1;
}


/*
 * Menues (function MenueAusgabe)
 * Idee aus http://designyourweb.info/so-gehts-ein-schlankes-css3-dropdown-menu-erstellen/346
 *
 Noch ein Gutes: http://www.drweb.de/plus/designideen/menu-05/ausklappmenu-h.php5
 */

div.menutag {		
	/*background-color: #D4D0C8; *//* Standard-Farbe input button */
  /* width: 760px; */
	/* top/right/bottom/left */
	/*margin: 1px 0px 1px 0px;*/
	font-size: 70%;
	color: black;
	position: -webkit-sticky; /* Safari */
	/*position:fixed;*/
  position: sticky;
  top: 0;
	background-color: inherit;
}
.menutag ul {
	padding: 0px;
	margin: 0px 0px 2px;

	/*
	box-shadow: 2px 2px 2px #dfdfdf;
	-moz-box-shadow: 2px 2px 2px #dfdfdf;
	-webkit-box-shadow: 2px 2px 2px #dfdfdf;
	*/

	/*
  opacity:0;
  transition:opacity 0.5s linear;
	hover:
  opacity:1;
	*/
}

.menutag ul:after {
	content: " ";
	display: block;
	font-size: 0;
	height: 0;
	visibility: hidden;
	margin-bottom: 1px;

	clear: both;
}

/*
.menutag ul,.menutag ul li{
	background-color: rgba(207, 207, 207, 1);
}
*/

.menutag ul li {
  list-style: none;
	display: inline-block;

  border-top: 1px solid #dfdfdf;
  border-right: 1px solid #dfdfdf;
  border-bottom: 1px solid #dfdfdf;

  transition:opacity 0.5s linear;

	margin-right: -2px;
}

.menutag ul li a {
	text-decoration: none;
	display: block;
	/*
  color: #333;
          	Top, Right, Bottom, Left
  padding: 14px 34px 14px 34px;
	*/
	padding: 8px 10px 8px 10px;

	transition: background 0.3s ease-out; /* explorer 10 */
	-webkit-transition: background 0.3s ease-out; /* chrome & safari */
	-moz-transition: background 0.3 ease-out; /* firefox */
	-o-transition: background 0.3 ease-out; /* opera */
}
.menutag ul li a img {
	height:12px;
	/*text-decoration:none;*/
}
img.menuimg {
	height:12px;
}
.menutag ul li.cat:hover a, .menutag ul li.cat:hover > ul li a  {
  /* background-color: rgb(0,0,125); */
}
/*
 * Wenn die menues unterschiedliche Farben haben sollen
.menutag ul li.cat1:hover a, .menutag ul li.cat1:hover > ul li a  {
    background-color: rgb(0,0,125);
}
 
.menutag ul li.cat2:hover a, .menutag ul li.cat2:hover > ul li a  {
    background-color: rgb(0,0,125);
}
.menutag ul li.cat3:hover a, .menutag ul li.cat3:hover > ul li a {
    background-color: rgb(0,0,125);
}
.menutag ul li.cat4:hover a, .menutag ul li.cat4:hover > ul li a {
    background-color: rgb(0,0,125);
}
.menutag ul li.cat5:hover a, .menutag ul li.cat5:hover > ul li a {
    background-color: rgb(0,0,125);
}
*/

.menutag ul li:hover > a {
	/* Aktivierter Hauptpunkt */
  /*background-color: #8FB5E4;*/
	background-color: white;
	color: black;
	font-weight: bold;
  /* color: rgba(207, 207, 207, 1); */
  /* color: #FAFAFA; */
}
.menutag ul li:hover > ul {
	visibility: visible;
	opacity:1;
	background-color: white;
	color: black;
}

.menutag ul li ul{
	display: inline;
	visibility: hidden;
	position: absolute;
	padding:0px;
	opacity:0;
	transition:opacity 0.5s linear;
}
.menutag ul li ul li{
	display: block;
	float: none;
}
.menutag ul li ul li a {
  /* color: black; */
  /* color: #FAFAFA; */
	background-color: white;
	color: black;
}
.menutag ul li ul li a:hover{
	/* color: #333; */
  /*background-color: #8FB5E4;*/
	background-color: white;
	color: black;
}

/* Menues Ende */




/*
table.Liste {
  border: 1px solid black;
  text-align: left;
  font-size: 80%;
}
*/
table.Liste {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-size: 80%;
  border-collapse: collapse;
  /*width: 100%;*/
}

table.Liste td, table.Liste th {
  border: 1px solid black;
  padding: 8px;
}

table.Liste tr:nth-child(even){
	background-color: rgb(111,195,13);
}

table.Liste tr:hover {
  background-color: #4CAF50;
  /* background-color: #555; */
  /* color: white; */
	/* background-color: #ddd; */
}

table.Liste th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #4CAF50;
  color: white;
}


/*
 * Aus https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_responsive_navbar_dropdown
 */

.topnav {
  overflow: hidden;
  /* background-color: #333; */
  background-color: inherit;
	color: white;
	font-size: 70%;
}

.topnav a {
  float: left;
  display: block;
	background-color: rgb(111,179,13);
	color: white;
  /* color: #f2f2f2; */
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;

  border-top: 1px solid #dfdfdf;
  border-right: 1px solid #dfdfdf;
  border-bottom: 1px solid #dfdfdf;
}

.active {
	background-color: rgb(111,179,13);
  /* background-color: #4CAF50; */
  color: black;
}

.topnav .icon {
  display: none;
}

.dropdown {
  float: left;
  overflow: hidden;

  border-top: 1px solid #dfdfdf;
  border-right: 1px solid #dfdfdf;
  border-bottom: 1px solid #dfdfdf;
}

.dropdown .dropbtn {
  font-size: 17px;    
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.dropdown-content {
  display: none;
  position: absolute;
  /* background-color: #f9f9f9; */
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
	float: none;
	color: white;
	/* padding: 12px 16px; */
	text-decoration: none;
	display: block;
	text-align: left;
}

.topnav a:hover, .dropdown:hover .dropbtn {
	background-color: #555;
	color: white;
}

.dropdown-content a:hover {
	/* background-color: #ddd; */
	color: white;
}

.dropdown:hover .dropdown-content {
	display: block;
}

@media screen and (min-width:570px) { /* PC */ 

	textarea.Notiz {
		width: 600px;
		height: 7em;
		border: 1px solid;
	}






	img.imgupdn {
		width: 0.7em;
		height: 0.7em;
	}





	#Inhalt {
		/*
		 * Hauptcontainer fuer unter dem Menu
		 */
		padding: 0% 8%;
		width: 100%;
		min-height: 100%;
		/*font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;*/
		font-size: 100%;
		font-family:"Source Sans Pro";
		background-color= white;
	}



	div.Head {
		width: 100%;
		color: white;
	}

	div.HeadLeft {
		display: inline-block;
		width: 8%;
		color: rgb(255,255,255);
	}

	div.HeadMiddle {
		/* Menu + Middle */
		display: inline-block;
		width: 60%;
		font-size:2.3em; /*50px;*/
	}

	div.HeadRight {
		display: inline-block;
		width: 30%;
		font-size:16px;
	}

	div.Left {
		display: inline-block;
		width: 8%;
		min-height: 60%;
		_height: auto;
		height: 60%;
		color: rgb(255,255,255);
	}

	div.Middle {
		display: inline-block;
		width: 70%;
		min-height: 70%;
		_height: auto;
		height: 70%;

		font-size:20px;
		color: rgb(255,255,255);
		overflow: auto;
	}

	div.Right{
		display: inline-block;
		width: 7%;
		min-height: 60%;
		color: rgb(255,255,255);
	}

	div.Bottom {
		text-align:left;
		font-size:16px;
		line-height:30px;

		clear: both;

		/*float: right;*/
		width: 77%;
	/*
		min-height: 20%;
		_height: auto;
		height: 20%;
	*/
		color: rgb(255,255,255);
	}

	.Text {
		font-size:28px;
		color: white;
		padding: 15% 0 0 15%;
		line-height:30px;
	}


	.SeitenTextHeader {
		font-size:24px;
		color: white;
		padding: 12% 0 0 5%;
	}

	.SeitenText {
		font-size:18px;
		color: white;
		padding: 5% 0 0 25%;
		overflow: auto;
	}


} /* min-width:570px (PC) */









@media screen and (max-width:569px) { 
/* 
 * Smartphones - Querformat 
 * Nexus auch Hochformat
 */

  /* .topnav a:not(:first-child), .dropdown .dropbtn { */
  .topnav a, .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }


  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }


	/*
	 * Ende https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_responsive_navbar_dropdown
	 */






	textarea.Notiz {
		width: 100%;
		height: 5em;
		border: 1px solid #ffffff;
	}






	img.imgupdn {
		width: 0.7em;
		height: 0.7em;
	}



	#Inhalt {
		/*
		 * Hauptcontainer fuer unter dem Menu
		 */
		padding: 0% 3%;
		width: 100%;
		min-height: 100%;
		/*font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;*/
		font-family:"Source Sans Pro";
		font-size: 70%;
		background-color= white;
	}


	div.Head {
		width: 100%;
		min-height: 20%;
		_height: auto;
		color: white;
	}

	div.Left {
		display: inline-block;
		width: 0%;
		visibility: hidden;
		display: none;
	}

	div.HeadLeft {
		display: inline-block;
		width: 0%;
		visibility: hidden;
		display: none;
	}

	div.HeadMiddle {
		/* Menu + Middle */
		padding: 3%;
		display: inline-block;
		width: 54%;
		font-size:1.5em;
	}

	div.HeadRight {
		display: inline-block;
		width: 44%;
		font-size:0.7em;
	}

	div.Middle{
		display: inline-block;
		width: 80%;
		min-height: 80%;
		height: 80%;
		_height: auto;

		font-size:20px;
		color: rgb(255,255,255);
		overflow: auto;
	}

	div.Right {
		display: inline-block;
		width: 0%;
		visibility: hidden;
		display: none;
	}

	div.Bottom {
		text-align:left;
		font-size:16px;
		line-height:30px;

		clear: both;

		/*float: right;*/
		width: 80%;
	/*
		min-height: 20%;
		_height: auto;
		height: 20%;
	*/
		color: rgb(255,255,255);
	}

	.Text {
		font-size:28px;
		color: white;
		padding: 30% 0 0 20%;
		line-height:30px;
	}


	.SeitenTextHeader {
		font-size:24px;
		color: white;
		padding: 12% 0 0 5%;
	}

	.SeitenText {
		font-size:18px;
		color: white;
		padding: 5% 0 0 15%;
		overflow: auto;
	}


} /* max-width:569px (Handy Querformat) */