/* Farbdesign: RS, 11.12.2024 grau d:#444444 h:#C0C0C0 l:#666666 ; alt blau: d:#336699 h:#99CCFF l:#0066cc   */

html {height: 101%;} /* Damit der Browser permanent die vertikale Scrollbar anzeigt. */

body, th, td, p, ol { font-family: Arial, Verdana, Tahoma, Helvetica,sans-serif; font-size: 14px; color: #333333; }

body { 
	margin:0 auto;
	margin-top:0px;
	background-color: #aaccef;
	color: #000000;
	width: 960px;
}

ul       { list-style-image: url('images/style/ul1_img.png'); xmargin: 10px; margin-bottom: 2px; margin-top: 0px; margin-left: 15px; padding: 5px  }
ul ul	 { list-style-image: url('images/style/ul2_img.png'); }
ul ul ul { list-style-image: url('images/style/ul3_img.png'); }

a{color:#1D5083;text-decoration:none;} /*ohne Einblend-Effekte*/
a.more{text-decoration:none;display:block;margin:.4em 0;}
a:visited{color:#1D5083;text-decoration:none;}
a:hover, a:active, a:focus{color:#68b022;text-decoration:none;outline:none;}
table		{ table-border-color-light: #99ccff; table-border-color-dark: #99ccff }

/*Überschriften h1-h6*/

h1, h2, h3, h4, h5, h6 {  font-family:  Arial, Verdana, Tahoma, Helvetica; color: #444444; font-weight: bold; 
							line-height: 100% ; margin-top: 0px; margin-bottom: 0px; page-break-after:avoid;}

h1	{ font-size:24px; }
h2	{ font-size:22px; }
h3 	{ font-size:19px; }
h4	{ font-size:16px; }
h5	{ font-size:14px; }
h6  { font-size:13px; } 

.H_Line    {border-bottom: 1px solid   #444444; }
.H_DotLine {border-bottom: 1px dotted  #444444; }

hr {
	margin: 36px 0px 1px 0px;
	border-top: 1px solid #ffff;   	
	border-bottom: 1px solid #444444;
	clear: both;
	}


strong { font-size: 13px; font-weight: 600;  position: auto; letter-spacing: -0,8pt }   	  
em		{ font-size: 10px; font-style: italic; font-weight: normal;  
			position: auto; letter-spacing: -0,5pt }   	  

b.ok		{ font-size: 14px; color:green; } /* z.B. phonesuite_tapi_for_asterisk.htm u. tapi_for_snom.htm für ok/no Symbole */
b.no		{ font-size: 14px; color:red; }
p.contact_tel	{ font-family: Courier New, Arial, Helvetica,sans-serif; color: #000000; font-weight: 700; text-align: left;  }

blockquote {
	margin: 0px 0px 0px 20px;
}
	
.margin_T0	{ margin-top: 0px;}
.margin_T1	{ margin-top: 2px;}
.margin_T2	{ margin-top: 5px;}
.margin_T3	{ margin-top: 10px;}
.margin_T4	{ margin-top: 15px;}
.margin_T5	{ margin-top: 20px;}

.margin_B0	{ margin-bottom: 0px;}
.margin_B1	{ margin-bottom: 2px;}
.margin_B2	{ margin-bottom: 5px;}
.margin_B3	{ margin-bottom: 10px;}
.margin_B4	{ margin-bottom: 15px;}
.margin_B5	{ margin-bottom: 20px;}

.tipbox	{
	border: 1px solid  #dddddd; 
	background-color:#eeeeee; 
	padding:10px;
	}

.pageBkGr {
	width: 920px; 
	max-width:920;
	min-width:920;
	min-height: 800px;

	margin: 0px auto;
	padding: 20px; /*t,r,b,l*/

	background-color: white;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	font-family:  Arial, Helvetica;
}


/* The container <div> - needed to position the dropdown content */
.popUpCtrl {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.popUpMenu {
    margin-left: 0px; /*Verschiebt das PopupMenu 14px nach links, damit es mit dem NavTab ausgerichtet ist.*/
    display: none;
    position: absolute;
    background-color: #29527a;
    white-space: nowrap;
    /*min-width: 240px;*/
    box-shadow: 0px 8px 8px 0px rgba(0,0,0,0.3);
    line-height:30px;
    z-index: 10;
}

/* Links inside the dropdown */
.popUpMenu a {
    color: white;
    padding: 10px 15px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.popUpMenu a:hover {
	background-color: #7399bf;
}

/* Show the dropdown menu on hover */
.navTab:hover .popUpMenu { 
	display: block;
}	

.navBarTop						{ font-family: Tahoma, Arial, Verdana, Helvetica; font-size: 14px; text-decoration: none; color: white; margin: 0px auto;}
.navBar1						{ background-color: #336699; width:100%; height:40px; line-height:40px;}
.navBar2						{ background-color: #7399bf; width:100%; height:40px; line-height:22px;}

.navBar1 .navTab				{ color: white; float:left;  height:40px; }
.navBar1 .navTab a				{ color: white; display: block; padding: 0px 14px;}
.navBar1 .navTab:hover			{ background-color: #29527a; }
.navBar1 .selTab				{ background-color: #7399bf;   }
.navBar1 .selTab:hover			{ background-color: #7399bf;   }

.navBar2 .navTab				{ float:left;  padding: 8px 0px 0px 0px;/*t,r,b,l*/ height:32px; }
.navBar2 .navTab a				{ color: white; /*display: block; margin-top:4px; height:22px; */padding: 2px 8px; text-align: center;  border-right: 1px solid #ffffff; }
.navBar2 .navTab:last-child a   { border-right: none; }

.navBar2 .selTab				{ background-image: url('images/nav-hot-marker.png');  background-repeat: no-repeat; background-position: center bottom; }
.navBar2 .navTab:hover a		{ background-color: #336699; }

.productBox						{ font-size:14px; color: white; position:relative;}
.productHeader					{ color: white; background-color: #78828c; width:920px; height:36px;}
.productLabel					{ font-size:20px; float:left; padding-left:20px; height:36px; line-height:36px; color:white; width:220px;}

.productBtn						{ background-color: rgb(115,115,115);/*Fallback */ background-color:rgba(0,0,0,0.15);font-size:12px; color: white;  padding: 5px 10px; /*border: 1px solid RGB(170,170,170);*/}
.productBtn:hover				{ background-color:rgba(0,0,0,0.25);}

.productTab						{ font-size:14px; float:left; padding: 0px 12px; height:36px; line-height:36px; color:white; text-align:center;  }
.productTab:hover				{ background-color: rgb(150,150,150);/*Fallback */ background-color:rgba(255,255,255,0.2); }

.btnOrder						{ background-color: #407eba; font-size:13px; font-weight:bold; float:right; width:100px; height:36px; line-height:36px; color:white; text-align:center; border-left: 3px solid #ffffff; }
.btnOrder:hover					{ background-color: #5b96d3; }

.btnDownload					{ background-color: #489144; font-size:13px; font-weight:bold; float:right; width:100px; height:36px; line-height:36px; color:white; text-align:center; border-left: 3px solid #ffffff;  }
.btnDownload:hover				{ background-color: #5da658; }


.productHeader .navTabSel {
	background-color: rgb( 95, 95, 95);/*Fallback */ 
	background-color: rgba(0,0,0,0.3);
	}

.productHeader .navTabSel:hover { 
	background-color: rgb( 95, 95, 95);/*Fallback */ 
	background-color: rgba(0,0,0,0.3); 
	}

.txtBox {	/*Text-Container auf den jeweiligen Produkt-Seiten*/
	
	/*width:900px;*/ 
	padding: 10px 20px 10px 20px; /*t,r,b,l*/
	clear: both; /*Verhindert das Überdecken der Div-Box bei Verwendung von float:*/
	}

.navBarLogo {
    float:left; width:260px; height:40px;
    background-image: url('images/style/logo_with_CTI.png');
    background-repeat: no-repeat;
    background-position:40px 10px;
    }
    
/* Tooltip container */
.tipCtrl {
    position: relative;
    display: inline-block;
}

.tipIcon {
    width:14px; height:14px;
    background-image: url('images/style/tip1.png');
    background-repeat: no-repeat;
    margin-bottom: -2px; /*Per Offset 2 Pixel nach unten verschieben*/
}

.infoIcon {
    width:14px; height:14px;
    background-image: url('images/info.png');
    background-repeat: no-repeat;
    margin-bottom: -2px; /*Per Offset 2 Pixel nach unten verschieben*/
}

/* Tooltip text */
.tipCtrl .tipPopup {
    visibility: hidden;
	width: 250px;
    background-color: edf0cb;
    color: Black;
    text-align: left;
    padding: 5px;
    box-shadow: 0px 8px 8px 0px rgba(0,0,0,0.3);
    border-radius: 5px;
    
    /* Position the tooltip text */
    position: absolute;
    z-index: 1;
}

.tipCtrl .tipBR { top: 100%;	left: 0; }  /* Bottom-Right */
.tipCtrl .tipBL { top: 100%;	right: 0;}	/* Bottom-Left */
.tipCtrl .tipTR { bottom: 100%;	left: 0; }	/* Top-Right */
.tipCtrl .tipTL { bottom: 100%; right: 0;}	/* Top-Right */
 
.tipCtrl .showTip		 { visibility: visible; }	/* Show tooltip bei MouseClick -> per Script*/
.tipCtrl:hover .tipPopup { visibility: visible; }	/* Show tooltip bei hover*/