@charset "utf-8";
/* CSS Document */
html, body, p, div, h1, h2, h3, h4, ul, li, table {
	margin: 0;
	padding: 0;
}
html, body {
	width: 100%;
	height: 100%; /*für vertikalen Scrollbalken*/
}
body {
	border-bottom: 1px solid #b1b2bb; /* für vertikalen Scrollbalken*/
	background-color: #b1b2bb;
	background-image: url(../images/framework/bg-color.jpg);
}
body, p, div, li, td, label {
	font-family: Calibri, Arial, Helvetica, sans-serif;
	font-size: 15px;
	line-height: 20px;
	color: #333333;
}
p {
	padding: 0.5em 0;
}
h1, h2, h3, h4 {
	font-family: Verdana, Helvetica, sans-serif;
	padding: 1.3em 0 0.7em 0;
	font-weight: normal;
}
h1 { /* Kapitel-Ueberschrift */
	font-size: 24px;
	color: #878e9b;
/*	text-transform: uppercase; */
}
h2 {
	font-size: 18px;
	color: #526678;
}
h3, h4 {
	font-size: 15px;
	color: #000000;
	font-weight: bold;
}
h3.after-h1, h4.after-h1 {
	padding: 0.4em 0;
}
h4 {
	font-family: Calibri, Arial, Helvetica, sans-serif;
}
ul {
	margin: 0 0 0.5em 20px;
}
	li {
		padding: 0 0 2px 18px;
		list-style-type: none;
		background-image: url(../images/framework/li-informio.gif);
		background-position: top left;
		background-repeat: no-repeat;
	}
img {
	border: 0px;
}
a {
	color: #da9a01;
	font-weight: bold;
	text-decoration: none;
	margin: 0;
	padding: 0;
}
	a:hover {
		text-decoration: underline;	
	}
	a.block {
		display: block;
		margin: 0;
		padding: 0;
		width: 100%;
		height: 100%;
	}
	a.button {
		text-decoration: none;
	}
	a.link-extern {
	}
		a.link-extern:hover {
		}

/* TABELLE für Impressum */
table.table-impressum {
	margin: 0 0 14px 0;
	padding: 0;
	border-collapse: collapse;
}
	.rowA { background-color:#F8F8F8; }
	.rowB { background-color:#E5E5E5; }

	table.table-impressum td {
		padding: 4px 6px;
	}
	table.table-impressum .td-label, .td-txt { border: 1px solid #979797; }
	table.table-impressum .td-label { font-weight: bold; }
/* --------------------- */

#aspnetForm {
	/* ASP macht autom. ein Form-Tag, Opera zeigt den Hintergrundverlauf nicht an, deshalb dieses Style */
	display: inline;
}
.error {
	color: #990000 !important;
	font-weight: bold;
}
.p-half {
height: 0.2em !important;
}
.top {
	margin-top: 0 !important;
	padding-top: 0 !important;
}
.note {
	font-size: 13px;
	line-height: 16px;
}
.hidden {
	display: none;
	position: absolute;
	top: -1000em;
	left: -1000em;
	height: 0px;
	width: 0px;
	overflow: hidden;
}
.left {
	float: left;
}
.right {
	float: right;
}
.clear {
	clear: both;
}
.nowrap {
	white-space: nowrap;
}

/* ----  R O L L O V E R  (ohne JavaScript)  ---- */
a img.no, a:hover img.ro, a.aktiv img.ro {
	display: inline;
}
a img.ro, a:hover img.no, a.aktiv img.no {
	display: none;
}
a:hover {
	width: auto;
}
/* ---------------------------------------------- */

/* ---- Hintergrund-Verlauf (oben) ---- */
#bg-flow {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 373px;
	background-color: transparent;
	background-image: url(../images/framework/bg-flow.jpg);
	background-repeat: repeat-x;
}
/* ---- Hintergrund-Illustrationen ---- */
#illubox {
	position: relative;
	margin: 0 auto;
	width: 100%;
	min-width: 960px;
	max-width: 1600px;
}
	#illu1 {
		position: absolute;
		top: 0;
		left: 0;
		width: 635px;
		height: 515px;
		background-image: url(../images/framework/bg-illu1.jpg);
	}
	#illu2 {
		position: absolute;
		top: 0;
		right: 0;
		width: 576px;
		height: 588px;
		background-image: url(../images/framework/bg-illu2.jpg)
	}
/* ---- #container = zentrierte Box (beinhaltet alles ausser den Hintergrund) ---- */
#container {
	z-index: 5;
	position: relative;
	margin: 0 auto;
	width: 960px;
	background-color: transparent;
	background-image: none;
}
	#logo-informio {
		position: absolute;
		top: 40px;
		left: 56px;
		width: 282px;
		height: 66px;
		background-image: url(../images/framework/logo-informio.png);
	}
	#logo-dynamics {
		position: absolute;
		top: 42px;
		left: 725px;
		width: 180px;
		height: 62px;
		background-image: url(../images/framework/logo-dynamics.png)
	}
/* ---- #main beinhaltet NAVIGATION und INHALTSBEREICH ---- */
	#main {
		position: absolute;
		top: 144px;
		left: 9px;
		width: 943px;
	}
/* ---- NAVIGATION ---- */
		#nav {
			position: relative;
			width: 100%;
			height: 55px;
		}
			#nav a, #nav a:hover  {
				text-decoration: none !important;
			}

			.nav-right {
				position: absolute;
				top: 0;
				right: 0;
				width: 309px;
				height: 55px;
				background-image: url(../images/framework/nav-right-bg.png);
				background-position: top right;
			}
				.nav-right #language {
					position: absolute;
					top: 7px;
					right: 20px;
				}
					.nav-right #language a {
						margin: 0;
						padding: 0 5px 0 0;
					}
			.nav-right_en {
				position: absolute;
				top: 0;
				right: 0;
				width: 347px;
				height: 55px;
				background-image: url(../images/framework/nav-right-bg.png);
				background-position: top right;
			}
				.nav-right_en #language {
					position: absolute;
					top: 7px;
					right: 20px;
				}
					.nav-right_en #language a {
						margin: 0;
						padding: 0 5px 0 0;
					}
/* ---- INHALTSBEREICH ---- */
		#content-container {
				z-index: 9;
				position: relative;
				width: 100%;
		}
			#content-all {
				z-index: 10;
				position: absolute;
				width: 100%;
				height: 100%;
			}
				/* Hintergrund-Bereich mit Hintergrundfarbe */
				#content-bg-color {
					position: absolute;
					left: 22px;
					width: 899px;
					height: 100%;
					background-color: #ffffff;
					overflow: hidden;
/*
	opacity: .9;
	filter: alpha(opacity=90);
*/
				}
					/* Hintergrund-Bereich Container (zB für Hintergrundbilder) */
					.content-bg-container {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
					}
						/* Hintergrundbild Startseite */
						.home-bg {
							background-image: url(../images/home-bg.jpg);
							background-position: bottom right;
							background-repeat: no-repeat;
						}
						/* Hintergrundbild Profil */
						.profil-bg {
							background-image: url(../images/profil-bg.jpg);
							background-position: bottom right;
							background-repeat: no-repeat;
						}
			/* Oberer Rand (Schatten) des Inhaltsbereichs */
			#content-top {
				z-index: 19;
				position: relative;
				width: 100%;
				height: 6px;
				background-image: url(../images/framework/content-bg-top.png);
			}
			/* Mittlerer Rand (Schatten) des Inhaltsbereichs */
			#content-middle {
				z-index: 20;
				position: relative;
				width: 100%;
				background-image: url(../images/framework/content-bg-middle.png);
				background-repeat: repeat-y;
				min-height: 377px; /* sorgt für gleichbleibende Höhe, so lange Inhalt nicht mehr aufspannt */
			}

				.team-karussell-container { /* Box für Flashfilm */
					position: absolute;
					left: 211px;
					top: -6px;
					width: 710px;
					height: 389px;
					overflow: hidden;
				}
					.team-karussell {
						margin: 0;
						padding: 0;
						border: 0;
						border: none;
						position: absolute;
						top: 0;
						left: 0;
					}

				/* Transparente Teile des Hintergrundbilds - im Vordergrund - für die Startseite */
				.home-bg-tr {
					position: absolute;
					bottom: -33px;
					right: 16px;
					width: 277px;
					height: 140px;
					background-image: url(../images/home-bg-tr.gif); /* gif ist hier (mit etwas Bearbeitung) möglich, bleibt wesentlich kleiner als png */
				}

				/* Klasse für Inhalt (zB Text und Bild-Elemente) */
				.content {
					position: relative;
					margin: 0;
					padding: 16px 47px 6px;
				}
					/* Klassen für spezifische Inhaltsbereiche */
					.home-txt {
						width: 340px;
					}
					.profil-txt {
						width: 360px;
					}
					
					.impressum-txt {
						width: 850px;
					}
					
					.team-txt {
						width: 150px;
					}
						img.team-karussell-img {
							margin: 12px 27px;
						}
					.leistungen-auswahl {
						float: left;
						width: 315px;
					}
						.leistungen-icon {
							display: block;
							float: left;
							width: 136px;
							height: 110px;
							margin: 9px 16px 9px 0;
						}
						.leistungen-note {
							margin: 0 0 7px 0;
						}
					.leistungen-detail {
						float: left;
						width: 506px;
						padding: 40px 0 0 25px;
					}
					.kontakt-auswahl {
						float: left;
						width: 280px;
					}
						.kontakt-icon {
							width: 177px;
							height: 122px;
							margin: 15px 0 0 0;
							padding: 0;
							overflow: hidden;
						}
					.kontakt-detail {
						position: absolute;
						left: 330px;
						top: 62px;
						width: 562px;
						height: 294px;
						background-image: url(../images/kontakt-detail-bg.jpg);
						background-repeat: no-repeat;
					}
						.kontakt-message {
							z-index: 99;
							position: absolute;
							top: -64px;
							width: 589px;
							height: 60px;							
						}
							.kontakt-message-content {
								position: absolute;
								width: 100%;
								bottom: 0;
								font-family: Arial, Helvetica, sans-serif !important;
								font-size: 12px;
								line-height: 16px;
							}
						.kontakt-detail-content {
							position: absolute;
							left: 10px;
							top: 10px;
							width: 542px;
							height: 274px;
							overflow: hidden;
						}
							.kontakt-form {
								display: block;
								position: absolute;
								width: 542px;
								height: 274px;
								margin: 0;
								padding: 20px;
								background: #eff1f4;
								overflow: hidden;
							}
								.kontakt-ok {
									position: absolute;
									top: 60px;
									left: 20px;
									width: 500px;
									text-align: center;
								}
								.kontakt-form input, .kontakt-form textarea {
									font-family: Arial, Helvetica, sans-serif;
									font-size: 12px;
									line-height: 16px;
									color: #000000;
								}
								.kontakt-form input {
									display: block;
									float: left;
									width: 160px;
									margin: 0;
									padding: 2px 4px 3px;
									border: 1px solid #b1b2bb;	
								}
									.kontakt-form input.send {
										display: inline;
										float: none;
										width: auto;
										height: auto;
										margin: 0 0 0 11px;
										padding: 0;
										border: 0;
									}
								.kontakt-form label {
									font-family: Arial, Helvetica, sans-serif;
									font-size: 11px;
									font-weight: bold;
								}
									.kontakt-form label.standard {
										display: block;
										float: left;
										width: 70px;
										border: 0px;
									}
									.kontakt-form label.right {
										margin-left: 30px;
									}
									.kontakt-form label.name, .kontakt-form label.email {
										width: 60px !important;
									}
								.kontakt-form textarea.nachricht {
									width: 380px;
									height: 120px;
									padding: 4px;
									border: 1px solid #b1b2bb;	
								}

						.loadingtxt {
							position: absolute;
							top: 130px;
							left: 20px;
							margin: 0;
							padding: 0;
							width: 522px;
							height: 40px;
							font-size: 24px;
							line-height: 30px;
							color: #bbb;
							overflow: hidden;
							text-align: center;
						}

			/* Unterer Rand (Schatten) des Inhaltsbereichs */
			#content-bottom {
				z-index: 19;
				position: relative;
				width: 100%;
				height: 6px;
				background-image: url(../images/framework/content-bg-bottom.png);
			}
		/* Unterer Rahmen mit Schatten */
		#border-bottom {
			position: relative;
			width: 100%;
			height: 22px;
			background-image: url(../images/framework/border-bottom-all.png);
		}
		/* Fußzeile für Impressum etc. */
		#footer {
			position: relative;
			left: 46px;
			width: 850px;
			height: 20px;
			margin: 0 0 20px 0;
			font-size:11px;
			font-family: Verdana, Arial, Helvetica, sans-serif;
			color:#707070;
		}
			#footer .break { color: #707070 !important; }
			#footer .active { }
			#footer a {
				font-size:11px;
				font-family: Verdana, Arial, Helvetica, sans-serif;
				color: #505050 !important;
				font-weight: normal;
			}