a:link { color: #000099; text-decoration: none}
a:hover { color: #000099; text-decoration: underline}
a:visited { color: #000099; text-decoration: none}
a:visited:hover { color: #000099; text-decoration: underline;}
a:active { color: #000099; text-decoration: underline}

body {
	font-family: verdana, helvetica, arial, sans-serif;
	font-size: 10pt;
	list-style-image:  url(../bilder/symbole/punkt_blau.gif);
	line-height: 1.4;
}

ul {
	font-family: verdana, helvetica, arial, sans-serif;
	font-size: 10pt;
	list-style-image:  url(../bilder/symbole/punkt_blau.gif);
	line-height: 1.4;
}
ul li {
		padding-bottom: 12px;
}

p {
	font-family: verdana, helvetica, arial, sans-serif;
	font-size: 10pt;
	list-style-image:  url(../bilder/symbole/punkt_blau.gif);
	line-height: 1.4;
}

table {
	font-family: verdana, helvetica, arial, sans-serif;
	font-size: 10pt;
	list-style-image:  url(../bilder/symbole/punkt_blau.gif);
}

/* 1. Layout-Tabelle PageHead 1 Zeile, 3 Spalten */
.TabPageHead {
	width: 100%;
  border-spacing: 0;
	padding: 0;		
	
	font-size: 12pt;
	font-weight: bold;
	color: #FFFFFF;
	
	background-color: #000099;
	border: 1px solid #000066;
}
.TabPageHead tr:first-child td:first-child {
  vertical-align: top;
	width: 200px;
}
.TabPageHead tr:first-child td:first-child img {
	display: block;
}
^
/* 2. Layout-Tabelle PageContent 1 Zeile 3 Spalten */
.TabPageContent {
}
/* Titelbilder oben rechts, in TapPageContent 3. Zelle */
.TitleImage {
	max-width: 50%;
	height: auto;
}

.ScreenImage {
	max-width: 100%;
  height: auto;
}
.ScreenVideo {
	max-width: 100%;
}
.DisplayOnSmallScreen {
	display: block;
}
.DisplayOnWideScreen {
	display: none;
}

.T {
	font-size: 10pt;
}
.TK { 
	font-size: 8pt;
}
/* Menuetabellen Level1 und 2 */
.M1 {
	font-size: 12pt;
	font-weight:normal;
	width: 200px;
	border-collapse:collapse;
/*	border: 1px solid green; */
}
.M1 tbody tr td{
	padding: 5px 0px 5px 0px;
}
/*Link auf ganze Zelle ausdehnen*/
.M1 tbody tr td a{
  width: 100%;
  display: block;
}

.M1 tbody tr td:nth-child(1){
	padding: 9px 0px 6px 0px;
}

.M2 {
	font-size: 12pt;
	width: 180px;
	border-collapse:collapse;
/*	border: 1px solid green;	*/
}

#Druckbereich {
	clear: both; /* Kein Flow mehr z.B. durch NavTabs (spez. im Dreamweaver Editor) */
	margin-top: 0.5em;
}
.NewsHead {
	font-size: 10pt;
	font-weight: bold;
	color: #000099;
	margin-top: 0px;
}
.NewsHeadLines {
	font-size: 9pt;
	font-weight: bold;
	color: #FFFFFF;
	background-color: #000099;
	border: none;
	list-style-image: url(../bilder/symbole/Punkt_orange_blau.gif);
	margin-top: 0px;
	margin-bottom: 0px;
}
.NewsDate {
	font-size: 8pt;
	text-align: left;
	color: #666666;
	padding: 3px;
	margin-top: 8px;
	margin-bottom: 2px;
}
.NewsBody {
	text-align: left;
	font-size: 9pt;
}
.NewsBottom {
	font-size: 8pt;
	text-align: right;
}

.PrintButton {
	font-family: verdana, helvetica, arial;
	background-color: #000099;
	border-top-width: 2px;
	border-right-width: 2px;
	border-bottom-width: 2px;
	border-left-width: 2px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #0000CC;
	border-right-color: #000066;
	border-bottom-color: #000066;
	border-left-color: #0000CC;
	font-weight: bold;
	color: #FFFFFF;
	font-size: 10px;
}

.UBPreise {
	font-size: 10pt;
	font-weight: bold;
	color: #FFFFFF;
	background-color: #000099;
	padding: 2px;
	border-top: none;
	border-right: none;
	border-bottom: 1px solid #000033;
	border-left: none;
}
.UB2 {
	font-size: 10pt;
	font-weight: bold;
	color: #FFFFFF;
	background-color: #000099;
	border: 1px solid #000066;
	padding: 4px;
}
.FormularButton {
	font-family: verdana, helvetica, arial;
	padding: 1em;
	background-color: #FF9900;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #FF9933;
	border-right-color: #CC6600;
	border-bottom-color: #CC6600;
	border-left-color: #FF9933;
	font-weight: bold;
	color: #FFFFFF;
}
.UB3 {
	font-size: 10pt;
	color: #000099;
	font-weight: bold;
}
.ArtikelHead1 {
	font-size: 10pt;
	font-weight: bold;
	color: #FFFFFF;
	background-color: #000099;
	border: 1px solid #000066;
	padding: 3px;
	margin: 0px;
}
.ArtikelBody {
	border-right-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #000066;
	border-left-color: #000066;
	padding: 3px 3px 6px;
	text-align: left;
	background-color: #DDDDFF;
	font-size: 9pt;
	margin: 0px;
}
.ArtikelHead2 {
	border-right-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #000066;
	border-left-color: #000066;
	padding: 3px 3px 6px;
	background-color: #DDDDFF;
	font-weight: bold;
	color: #000099;
	font-size: 10pt;
	margin: 0px;
}
.ArtikelBottom {
	border-right-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #000066;
	border-left-color: #000066;
	padding: 3px;
	font-size: 8pt;
	text-align: right;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #000066;
	background-color: #DDDDFF;
	margin: 0px 0px 8px;
}

.ArtikelHead1kleiner {
	font-size: 9pt;
	font-weight: bolder;
	color: #FFFFFF;
	background-color: #000099;
	border: 1px solid #000066;
	padding: 3px;
	margin-bottom: 0px;
	margin-top: 0px;
}
.ArtikelHead2kleiner {
	border-right-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #000066;
	border-left-color: #000066;
	margin-top: 0px;
	margin-bottom: 0px;
	padding: 0px;
	text-align: justify;
	background-color: #DDDDFF;
	font-weight: bold;
	color: #000099;
	font-size: 10px;
}
.UB_2Zeilen {
	font-size: 10pt;
	font-weight: bold;
	color: #FFFFFF;
	background-color: #000099;
	border: 1px solid #000066;
}
.TKOrange {
	font-size: 8pt;
	color: #FF9900;
}
.TOrange {
	font-size: 10pt;
	color: #FF9900;
}
.ZieleButton {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	background-color: #FF9900;
	border-top: 1px solid #FFCC00;
	border-right: 1px solid #FF6600;
	border-bottom: 1px solid #FF6600;
	border-left: 1px solid #FFCC00;
}
.ZieleDiv {
	padding: 6px;
	border: 1px solid #FF9900;
	margin: 6px;
	clip: rect(auto,auto,auto,auto);
}
.ZieleAntwort {
	clip: rect(auto,auto,auto,auto);
	font-size: 8pt;
	padding: 0px;
	margin: 0px;
}
.ZieleProduktNr {
	clip: rect(auto,auto,auto,auto);
	font-size: 8pt;
	padding: 0px;
	margin: 0px;
	color: #999999;
	text-align: right;
}
.ZielePopup {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	background-color: #000099;
	border-top: 1px solid #0000CC;
	border-right: 1px solid #000066;
	border-bottom: 1px solid #000066;
	border-left: 1px solid #0000CC;
	font-weight: bold;
	color: #FFFFFF;
	padding: 4px;
}
.Blink {
	text-decoration: blink;
	font-weight: bold;
	color: #FF0000;
}
.menutab_active {
	border-top-width: 0px;
	border-right-width: 2px;
	border-bottom-width: 2px;
	border-left-width: 2px;
	border-top-style: none;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-right-color: #000066;
	border-bottom-color: #000066;
	border-left-color: #000099;
	font-size: 10px;
	font-weight: bold;
	color: #FFFFFF;
	background-color: #000099;
	filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#2222CC', EndColorStr='#000099');
}

.menutab_deactive {
	border-top-width: 2px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-right-color: #000066;
	border-bottom-color: #000066;
	border-left-color: #000099;
	font-size: 10px;
	font-weight: bold;
	color: #999999;
	border-top-color: #999999;
	filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#e0e0e0', EndColorStr='#f5f5f5');
}
.menutab_seperator {
	border-top-width: 2px;
	border-top-style: solid;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	border-top-color: #999999;
}
.TabOrange {
  border-spacing: 0;
	padding: 0;		
	
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #FFCD82;
	border-right-color: #FFB042;
	border-bottom-color: #FFB042;
	border-left-color: #FFCD82;
}

table.TabOrange > tr > td > label
{
	font-weight:bold;
}
.TabOrange td {
	padding: 4px;
	vertical-align:top;								
}
.TabOrange tr:nth-child(even) {background: #FFE8C6}
.TabOrange tr:nth-child(odd) {background: #FFDCA8}
.TabOrange tr:first-child {background: #FF9900}
.TabOrange ul {
	margin-left: 4px;
	padding-left: 1em;
}

.TabBlue {
	border-collapse: collapse;
  border-spacing: 0;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #4A4AFF;
	border-right-color: #000099;
	border-bottom-color: #000099;
	border-left-color: #4A4AFF;
}
.TabBlue td {
	padding: 4px;
	vertical-align:top;
}
.TabBlue tr:nth-child(even) {background-color: #CCCCFF;}
.TabBlue tr:nth-child(odd) {background-color: #EEEEFF;}
.TabBlue tr:first-child {
	background: #000099;
	color: #FFFFFF;
	font-size: 12pt;
	font-weight:200;
}
.TabBlue td ul {
	padding-left: 1em;
}
/* Können diese Back's weg? 14.10.2019 */
.TabBlueBackDark {
	background-color: #B3B3FF;
}
.TabBlueBackBright {
	background-color: #D2D2FF;
}

.TabOrangeHead {
	background-color: #FF9900;
}
/* Link Tabelle im Link und Presse Bereich */
.TabLink {
	font-size: 10pt;
	border-spacing: 8px;
	border-collapse: separate;
}
.TabLink td{
	background-color: #F0F0FF;
	padding: 4px;
	text-align: center;
	vertical-align:central;
	border-top: 1px solid #C1C1FF;
	border-right: 1px solid #C1C1FF;
	border-bottom: 1px solid #8484FF;
	border-left: 1px solid #8484FF;
}
.TabLink td a{
  width: 100%;
  display: block;
}

.Grayed {
	color: #666;
}
.TRWithSubData {
}
.ButtonShowSubData {
	background-color: #fffff;
	font-size: 10pt;
	padding: 0px;
	margin: 0px;
	width: 32px;
	padding: 8px 8px 8px 8px;
	border-top: 1px solid;
	border-right: 1px solid;
	border-bottom: 1px solid;
	border-left: 1px solid;
}
.ButtonShowSubData:hover { cursor: pointer }

.TabPageFoot {
	font-family:Arial, Helvetica, sans-serif;
	font-size: 10pt;
	color: #666666;
}
.TabPageFootAddress {
	font-family:Arial, Helvetica, sans-serif;
	font-size: 10pt;
	color: #666666;
}
.DivPageFootCopyright {
}

/* Tabelle ACTOptimum Module/Funktionen, AddOns Kompatiblität */
.TabModuleList {
	border: 0px;
	width: 100%;
}
.TabModuleList td{
	padding: 4px;
	vertical-align: top;
}
.TabModuleList tr:nth-child(even) td{
	padding: 1px 0px 0px 0px;
	font-size: 0px;
	background-image: linear-gradient(to right, white, white, #000099 , #FF9900);
	text-align: right;
}
.TabModuleList td, th{
	padding: 4px;
	vertical-align: top;
}
.TabModuleList th{
	border-bottom: 1px solid #000099;
	vertical-align: top;
}
.TabModuleList ul{
	margin-top: 0;
	padding-left: 1em;
}
/* Einzelne Tabelle für ein Downloadeintrag auf der Demo-Downloadseite */

.TabDownloadPanel {
	margin: 0 1em 1em 0;
	border: 1px solid #000099;
	width: 100%;
}

/* Elemente unter dem Menü */
div#page_extras{
	padding: 0px 0px 0px 11px;
}
div#page_extras > div {
	padding: 5px 0px;
}

/* Hamburger Menü - Begin */

/* Elemente die am Anfang ausgeblendet sind */
#CheckBoxHamburger,
table.M1,
div#page_extras,
img.DistanceMenuContent,
img.DistanceLogoTitle {
	display:none;
}
/* Elemente die durch Mausklick (checked) auf das Label der Checkbox angezeigt werden */
#CheckBoxHamburger:checked ~ table.M1, 
#CheckBoxHamburger:checked ~ div#page_extras {
	display:block;
}
/* Das MSLogo wird nach rechts verschoben, damit das Hamburger Menue Platz hat. */
img.MSLogo {
		margin-left: 42px;
}
.IconHamburger {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #000099;
  display: block;
  margin: 2px;
  width: 30px;
  height: 30px;
  border: 3px solid white;
  border-radius: 6px;
  cursor: pointer;
}
.IconHamburger > span {
 position: absolute;
 display: block;
 top: 14px;
 height: 3px;
 left: 15%;
 width: 70%;
 background: white;
 border-radius: 1px;
 transform-origin: center;
 transition: 0.3s;
}
.IconHamburger > span:first-child {
  transform: translateY(-8px);
}
.IconHamburger > span:last-child {
  transform: translateY(8px);
}
/* Animation der drei Linien zum X */
#CheckBoxHamburger:checked + .IconHamburger > span {
  opacity: 0;
}
#CheckBoxHamburger:checked + .IconHamburger > span:last-child {
  transform: rotate(135deg);
  opacity: 1;
}
#CheckBoxHamburger:checked + .IconHamburger > span:first-child {
  transform: rotate(-135deg);
  opacity: 1;
}

/* Bei nicht Smartphoneauflösung werden alle Element immer angezeigt und das Hamburger-Menü-Symbol wird ausgeblendet */
@media only screen and (min-width: 600px) {
	.IconHamburger{ 
	   display: none;
	}
	table.M1,
	div#page_extras,
	img.DistanceMenuContent,
	img.DistanceLogoTitle {
		display:block;
	}
	img.MSLogo {
		margin-left: 0;
	}
	.PanelListColumn {
		margin: 0 1em 1em 0;
		width: 30em;
	}
	.PanelListPhoto {
		margin: 0 1em 1em 0;
	}
	.DisplayOnSmallScreen {
		display: none;
	}
	.DisplayOnWideScreen {
		display: block;
	}
}
/* Hamburger Menü - End */

/* NavTabs 3 Menüebene horizontal oben*/
.NavTabs {
  display: block;
  padding: 0px;
  margin: 0px;
  width: 100%;
  /* border: 1px dotted black; */
}
.NavTabs > ul {
  padding: 0px;
  margin: 0px;
  list-style: none;	
}
.NavTabs ul > li {
  float: left;
  border: 1px solid #000099;
	border-top: 0;
	border-radius: 0 0 4px 4px;
  padding: 0px;
  text-align: center;
  margin-right: 10px;
  margin-bottom: 4px;
  font-size: 1em;
}
.NavTabs ul > li:hover {
  background-color: lightgrey;
}
.NavTabs ul > li a{
  display: block;
  padding: 4px;
  text-decoration: none;
}
.NavTabs::after {
    content: ".";
    clear: both;
    display: block;
    visibility: hidden;
    height: 0px;
}
.NavTabSelected {
	 background-color: #000099;
}
.NavTabSelected a{
	color: white;
}
/* .FloatList erzeugt floatende Liste von li-Elementen */

.FloatList {
  display: block;
  width: 90%;
  height: 14em;
}

.FloatList > ul {
  list-style: none;
  padding: 0px;
  margin: 0px;
}
.FloatList > ul > li{
  float: left;
  position: relative;
  height: 14em;
  padding: 4px;
  min-width: 144px;
  width: 30%;
  min-height: 80px;
  height: 100px;
  margin: auto;
}

.FloatList > ul > li > div{
		margin:0;
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}

.FloatList::after {
    content: ".";
    clear: both;
    display: block;
    visibility: hidden;
    height: 0px;
}

/* PanelList 
   Die PanelListColumn Elemente brechen um (float left) 
   Die PanelListItem Elemente sind untereinander (blocks) 
   Sie haben ein H1 Element am Anfang als Titel */

.PanelList {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  /* border: 1px dotted red; */
}
.PanelList::after {
    content: ".";
    clear: both;
    display: block;
    visibility: hidden;
    height: 0px;
}
.PanelListColumn{
  float: left;
  /* border: 1px dotted yellow; */
	width: 100%
  padding: 4px;
}
.PanelListItem{
	display: block;
 /* border: 1px dotted green; */
}
.PanelListItem > h1{
	font-size: 12pt;
}
.PanelListPhoto{
	float: left;
	display: block;
}
/* Toggle 
   Eine Kombination aus Checkbox und Label Element,
   dessen Nachfolgeelemente /Tables) beim Status Checked ein- bzw. ausgeblendet werden. */
input.Toggle {
	display: none;
}
input.Toggle ~ table {
	display: none;
}
input.Toggle + label {
	cursor: pointer;
	display: block;
	font-size: 12pt;
}
input.Toggle + label::before {
	content: "+";
}
input.Toggle:checked + label::before {
	content: "-";
}
input.Toggle:checked + label {
/* eventuell mal nötig */
}
input.Toggle:checked ~ table {
	display: table;
}
	

/* Startpage */
.TabStartPagePanelLarge{
	float: left;
	width: 100%;
  border-spacing: 0;
	padding: 0;		
	margin: 0 0.5em 1em 0;	
}
.TabStartPagePanelLarge tr:last-child td {
	border-bottom: 1px solid lightgrey;
	border-right: 1px solid lightgrey;
	border-radius: 0 0 0.5em 0;
}
.TabStartPagePanelLargeLongText {
	min-height: 9em;
}
.TabStartPagePanelMedium{
	float: left;
	width: 60%;
  border-spacing: 0;
	padding: 0;		
	margin: 0 0.5em 1em 0;
}
.TabStartPagePanelMedium tr:last-child td {
	border-bottom: 1px solid lightgrey;
	border-right: 1px solid lightgrey;
	border-radius: 0 0 0.5em 0;
}
.TabStartPagePanelMediumLongText {
	min-height: 9em;
}
.TabStartPagePanelSmall {
	float: left;
	width: 32%;
  border-spacing: 0;
	padding: 0;	
	margin: 0 0.25em 1em 0;
}
.TabStartPagePanelSmallLongText {
	min-height: 9em;
}
.TabStartPagePanelSmall tr:last-child td {
	border-bottom: 1px solid lightgrey;
	border-right: 1px solid lightgrey;
	border-radius: 0 0 0.5em 0;
}

/* FormularTextfelder */
form input[name="firma"] {
	width: 15em;
}
form input[name="geschlect"] {
	width: 15em;
}
form input[name="ansprechpartner"] {
	width: 15em;
}
form input[name="realname"] {
	width: 15em;
}
form input[name="vorname"] {
	width: 15em;
}
form input[name="strasse"] {
	width: 15em;
}
form input[name="plz"] {
	width: 5em;
}
form input[name="ort"] {
	width: 15em;
}
form select[name="land"] {
	width: 15em;
}
form input[name="email"] {
	width: 15em;
}
form input[name="telefon"] {
	width: 15em;
}
form input[name="fax"] {
	width: 15em;
}
form textarea[name="comment"] {
	width: 20em;
}
form input[name="kontakt_email"] {
	width: 15em;
}
form input[name="kontakt_name"] {
	width: 15em;
}
form input[name="kontakt_firma"] {
	width: 15em;
}
form input[name="kontakt_telefon"] {
	width: 15em;
}
form input[name="kontakt_strasse"] {
	width: 15em;
}
form input[name="kontakt_plz"] {
	width: 5em;
}
form input[name="kontakt_ort"] {
	width: 15em;
}
form select[name="kontakt_land"] {
	width: 15em;
}
form select[name="kontakt_einverstaendnis"] {
	width: 15em;
}
form select[name="kontakt_newsletter"] {
	width: 15em;
}
form input[name="info_addons_namen"] {
	width: 15em;
}

.advent {
	background-image: url(../bilder/advent/advent_4.png);
	background-repeat: no-repeat;
	background-position: 0 0;
	max-width: 420px;
	height: 180px;
	text-align: left;
	padding: 1em 0 0 1em;
	margin: auto;
	
}
.advent p {
	margin: 0;
	padding: 0;
}