body            { font-family: Arial, Helvetica, sans-serif; color: white; background-color: #3399CC }
.code           { font-family: Courier, sans-serif; font-size: 10pt; color: black}
.text           { font-size: 12pt; color: black}
.headl          { font-size: 14pt; font-weight: bold; color: white; clip: auto; }
.head2          { font-size: 12pt; font-weight: bold; color: white; clip: auto; }
.subhead        { font-size: 10pt; font-weight: bold; color: white; margin: 0px; padding: none;}
h1              { font-size: 14pt; font-weight: bold; color: white; }
h2              { font-size: 12pt; font-weight: bold; color: white; }
h3              { font-size: 10pt; font-weight: bold; color: white; }
h4              { font-size: 9pt; font-weight: bold; color: white; }

a:visited       { color: #333333; text-decoration: underline}
a:link          { color: #333333; text-decoration: underline}
a:hover         { color: #CCCCCC; text-decoration: underline}

img             { border: 0; }

ul              { font-size: 8pt; font-style: italic;}
ul.liste        { font-size: 14pt;}
ul.referenz     { font-size: 8pt; font-style: italic;}

li              { font-size: 8pt; font-style: italic;}
li.liste        { font-size: 12pt; }
li.text         { font-size: 12pt; }
li.referenz     { font-size: 8pt; font-style: italic ; font-weight: normal;}

p               { font-size: 10pt; font-style: normal; font-weight: normal; color: white  ; margin-left: 2px; text-align: left; text-indent: 2pt}
p.error         { font-size: 10pt; font-style: normal; font-weight: bold;   color: #f72d2d; margin-left: 2px; text-align: left; text-indent: 2pt}
p.warning       { font-size: 10pt; font-style: normal; font-weight: bold;   color: orange ; margin-left: 2px; text-align: left; text-indent: 2pt}
p.ok            { font-size: 10pt; font-style: normal; font-weight: bold;   color: green  ; margin-left: 2px; text-align: left; text-indent: 2pt}
p.text          { font-size: 12pt; color: black; margin-left: 2px; }
p.littleheader  { font-size:  8pt; font-style: italic; font-weight: bold;   color: white  ; margin-left: 2px; text-align: left; text-indent: 2pt}
p.little        { font-size:  8pt; font-style: italic; font-weight: normal; color: black  ; margin-left: 2px; text-align: left; text-indent: 2pt}

blockquote      { padding: 8px; border:thin solid blue; overflow: auto;}

tr.tableheader  { font-size: 11pt; font-style: normal; font-weight: bold;   color: white; background-color: navy;    text-align: center; border: none }
tr.tablecontent { font-size: 10pt; font-style: normal; font-weight: normal; color: black; background-color: #3399FF; margin-left: 0px; text-align: left; text-indent: 2pt }
tr.tablegrey1   { font-size: 10pt; font-style: normal; font-weight: normal; color: black; background-color: #c4c4c4; margin-left: 0px; text-align: left; text-indent: 2pt }
tr.tablegrey2   { font-size: 10pt; font-style: normal; font-weight: normal; color: black; background-color: #e4e4e4; margin-left: 0px; text-align: left; text-indent: 2pt }
tr.tablefooter  { font-size: 11pt; font-style: normal; font-weight: bold;   color: black; background-color: #3399FF; margin-left: 0px; text-align: left; text-indent: 2pt }

tr.overviewheader      { font-size: 10pt; font-style: normal; font-weight: bold;   color: #ffffff; background-color: #003366;   margin-left: 0px; text-align: center; border: none;}
tr.overviewcontent     { font-size: 9pt;  font-style: normal; font-weight: normal; color: #000000; background-color: #ffffff;   margin-left: 0px; text-align: left; text-indent: 2pt; }
tr.overviewfooter      { font-size: 10pt; font-style: normal; font-weight: bold;   color: #ffffff; background-color: #003366;   margin-left: 0px; text-align: left; text-indent: 2pt;}

tr.darkgray            { font-size: 9pt;  font-style: normal; font-weight: normal; color: #000000; background-color: #c4c4c4;   margin-left: 2px; text-align: left; text-indent: 2pt; }
tr:hover.darkgray      { background-color: rgb(27, 228, 228); }
tr.darkgray_nohover    { font-size: 9pt;  font-style: normal; font-weight: normal; color: #000000; background-color: #c4c4c4;   margin-left: 2px; text-align: left; text-indent: 2pt; }
tr.lightgray           { font-size: 9pt;  font-style: normal; font-weight: normal; color: #000000; background-color: #e4e4e4;   margin-left: 2px; text-align: left; text-indent: 2pt; }
tr:hover.lightgray     { background-color: rgb(27, 228, 228); }
tr.lightgray_nohover   { font-size: 9pt;  font-style: normal; font-weight: normal; color: #000000; background-color: #e4e4e4;   margin-left: 2px; text-align: left; text-indent: 2pt; }

.button {
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}

.buttonlittle {
  border: none;
  color: white;
  padding: 8px 16px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 10px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}

.buttonverylittle {
  border: none;
  color: white;
  padding: 4px 8px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 10px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}

.buttongreen {
  background-color: white;
  color: black;
  border: 2px solid #4CAF50;
}

.buttongreen:hover {
  background-color: #4CAF50;
  color: white;
}

.buttonblue {
  background-color: white;
  color: black;
  border: 2px solid #008CBA;
}

.buttonblue:hover {
  background-color: #008CBA;
  color: white;
}

.buttonred {
  background-color: white;
  color: black;
  border: 2px solid red;
}

.buttonred:hover {
  background-color: red;
  color: white;
}

.buttonnoaction {
  background-color: white;
  color: gray;
  border: 1px solid gray;
}

.buttonnoaction:hover {
  background-color: white;
  color: gray;
}


.toggle label {
	position: relative;
	display: inline-block;
	width: 10em;
	height: 3.5em;
}

.toggle input {
	display: none;
}

.toggle .slider {
	/* Grundfl�che */
	position: absolute;
	cursor: pointer;
	top: 1.5em;
	left: 2em;
	width: 4em;
	height: 2em;
	background-color: #c32e04;	/* red */
	transition: all .3s ease-in-out;
	border-radius: 1em;
}

.toggle .slider:before {
	/* verschiebbarer Button */
	position: absolute;
	content: "";
	height: 1.6em;
	width: 1.6em;
	left: 0.2em;
	bottom: 0.2em;
	background-color: white;
	border-radius: 50%;
	transition: all .3s ease-in-out;
}

.toggle input:checked + .slider {
	background-color: #5a9900;
	/* green */
}

.toggle input:focus + .slider {
	background-color: pink;
	box-shadow: 0 0 1px #5a9900;
}

.toggle input:checked + .slider:before {
	-webkit-transform: translateX(1.9em);	/* Android 4 */
	-ms-transform: translateX(1.9em);	/* IE9 */
	transform: translateX(1.9em);
}

.text .slider:after {
	/* Text vor dem FlipFlop-Schalter */
	position: absolute;
	content: "OFF";
	color: #c32e04;
	font-weight: bold;
	height: 1.6em;
	left: -2.5em;
	bottom: 0.2em;
}

.text input:checked + .slider:after {
	/* Text hinter dem FlipFlop-Schalter */
	position: absolute;
	content: "ON";
	color: #5a9900;
	left: 4.5em;
}