@charset "UTF-8";
/* CSS Document */

body{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #333333;
	margin: 0px;
	background-color: #595959;
	background-image:  url(../images/hg-body.jpg);
	background-repeat: repeat-x;
	clear:both;
}
/************* Layout Divs *********************/

/************ Content *********************/

#totalmain {
	margin:auto;
	width: 848px;
	height: 800px;
	text-align: right;
	background-color:#fff;
	border-radius:10px;
	padding: 40px 80px 0 0;
	-webkit-box-shadow: 0px 0px 31px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 0px 31px 0px rgba(0,0,0,0.75);
	box-shadow: 0px 0px 31px 0px rgba(0,0,0,0.75);
	}

#main {
	margin: auto;
	width: 1024px;
	}

#mainFrame {
	
	width: 1024px;
	min-height: 245px;
	background-repeat: no-repeat;
	float: left;	
	height: auto;
}
#under-mainFrame {
	margin: auto;
	width: 1024px;
	background-image:url(../images/bg-mainFrame.jpg);
	background-repeat: repeat-y;
	float: left;
}

#topFrame {
	margin: auto;
	margin-top:20px;
	width: 1024px;
	height: 110px;
	text-align: right;
	background-color:#fff;
	border-top-left-radius:10px;
	border-top-right-radius:10px;
	padding: 15px 50px 50px 0;
}

#naviFrame {
	margin: auto;
	width: 1024px;
	height: 250px;
	background-image:url(../images/bg-navibox-blau.jpg)
	}

#bottomFrame{
	margin: auto;
	width: 1024px;
	background-image:url(../images/bg-main-bottom.jpg);
	height: 80px;
	position: relative;
	float: left;
	}	

#pictureFrame {
    position: absolute;
    border-bottom-left-radius: 10px;
    width: 240px;
    height: 198px;
    left: 73px;
    vertical-align: bottom;
    bottom: 14px;
    background-image: url(../images/logo-left.jpg);
    font-size: 0.7em;
    padding: 18px 10px 12px 50px;
    background-repeat: no-repeat;
	}

#pictureFrame a:link {
	color: #124089;
	}

#pictureFrame a:hover {
	color: #A11D1F;
	}
	
#content {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	float: right;
	margin-right: 100px;
	margin-top: 33px;
	width: 570px;
	clear:both;
	margin-bottom: 0px;	
	
}

#contentLeft {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	float: left;
	margin-left: 100px;
	margin-top: 50px;
	width: 250px;
	margin-bottom: 20px;
	z-index: 200;
	padding-top: 20px;
}

.contentbox {
	width: 350px;
	float: left; 
	line-height: 20px;
}

#nav-bottom {
	height:20px;
	font-size:0.7em;
	color: #CCC;
	text-align: right;
	padding-right: 90px;
	margin-right:425px;
	margin-top:10px;
	}	
#nav-bottom a:link {
	color: #CCC;
	}	
#nav-bottom a:hover {
	color: #952E2C;
	}
#nav-bottom a:visited {
	color: #CCC;
	}


/************* banner *************************/

#banner {
	margin: 0 50px;
	height: 250px;
	background-color:#FFFFFF;
}

.karte {
	border-radius:12px;
	display:none;
	margin-bottom:200px;
	width:105% !important;
}

.anfahrt {
	display:block;
	width:100px;
	color:#fff;
	background-color:#1F3B6C;
	height:30px;
	padding-top:4px;
	padding-left:18px;
	border-radius:40px;
	transition:all 0.2s;
}

.anfahrt:hover {
	background-color:#A11D1F;
	transition:all 0.2s;
	box-shadow: 0px 5px 20px #ccc;
}
.kontakt_left {
	margin-top:10px;
	padding-top: 15px;
	font-size: 0.85em;
}

@media (max-width:670px) {
	
	.karte {
		display:block;
	}
	
	.anfahrt {
		display:none;
	}
}

/************ Menue ************/



#menu {
	
    height: 65px;
	width: 927px;
	margin: 0 50px;
	
 }

	#nav {
		margin: 0;
		padding: 0;
		position: relative;
		top: 15px;
		height: 28px;
		background-image: url(../images/bg-submenue.gif);
		background-repeat: repeat-x;
	}
	
	#nav li ul, #nav li ul {
		margin: 0;
		padding: 0; 
	
		
	}

	#nav a {
		text-decoration: none;
	}

	#nav li { 
		margin: 0;
		float: left;
		display: block;
		padding-right: 20px;
		padding-top: 7px;
		padding-left: 20px; 
		padding-bottom: 9px;
		background-image: url(../images/menue-kartenreiter-weiss.gif);
		background-repeat:no-repeat;
		background-position: top right;
		
	}
	
	#nav li.letztes { 
	background-image: url(../images/menue-kartenreiter-weiss-last.gif);
		
		
	}

	#nav li ul {
	display: none;

	position: absolute;
	top: 27px;
	left: 0;
	padding-right: 0px;
	background-color: #a4aab6;
	height: 24px;
	width: 867px;
	padding-left: 60px;
	padding-bottom: 6px;
	font-size: 0.85em;
	background-image: none;
	padding-top: 2px;
	}
	
	
	#nav li#Home {
	padding-left: 60px;

	}
	
	#nav li#Home ul {
	padding-left: 0px; 
	width: 927px;
	}
	
	#nav li#Home a {
	color: #333;
	background-color: none;
	}
	
	#nav li#Unternehmen ul {
	padding-left: 140px; 
	width: 787px;
	}
	
	#nav li#Leistungsspektrum ul {
	padding-left: 270px; 
	width: 657px;
	}
	
	#nav li#Referenzen ul {
	padding-left: 435px; 
	width: 492px;
	}
	
	#nav li#Kontakt ul {
	width: 377px;
	padding-left: 550px;
	}



	#nav li ul li{ 
		background-color: none;
		background-image: none;
		padding-left: 0px;
		
		
	}
	#nav li.off ul, #nav li.on ul  { 
	}

	#nav li.on ul {
	
	}
	

	#nav li.on:hover ul, #nav li.over ul { 
	}

	#nav li a {
	font-size: 0.8em;
	color: #333;
	display: block;
	padding: 0;
	}
	
	#nav li.active a {
	color: #C30;
	background-color: none;
	}
	#nav li a:hover {
	color: #C30;
	}
	#nav li.active ul a {
	color: #333;
	background-color: none;
	
	
	}
	#nav li ul a:hover {
	color: #fff;
	background-image: none;
	background-repeat:no-repeat;
	background-position: top right;
	}

	#nav li ul li.sub-active a{
	color: #fff;
	}
	

	#nav li ul a, #nav li ul a {
	float: left; 
	width: auto;
	
	/**** statt Pipe  ****/
	

	}
	
	#nav .last {
		border: none;
	}
	#nav .first {
		padding-left:60px;
	}

	

	#nav li.active ul {
		display: block;
	}

	#nav li:hover ul {
		display: block;
		z-index: 6000;
	}

	#nav li.off a:hover {
	color: #C30;
	}
	
	
 #liModern.on a {
 } 


#nav li.off ul a, #nav li.on ul a {
	display: block;
	color: #333;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.8em;
}
#nav li.off ul a:hover, #nav li.on ul a:hover {
	color: #fff;
}
#nav li.on ul a {
	background-color:none;
}

.first {
	padding-left: 60px;}
	
.last {
	border: none;}


/*************** Ende neues Menue   ************************/

/************ Styles Content ***************************/


.contentbox-left {
	width: 130px; 
	float:left;
	}
	
.contentbox-right {
	width: 420px; 
	float:left;
	padding-top:8px;
	padding-bottom: 10px;
	}

.pipe {
	 color: #C03;
	 font-size:0.8em;
	 padding-bottom: 2px;
	}
 

h1 {
	color:  #123B8B;
	font-size: 1.3em;
	font-weight:normal;
	margin-bottom: 20px;
}

h1 small {
	font-size: 0.9em;
	
}

h2 {
	color: #124089;
	font-size: 1.1em;
	font-weight:normal;
	margin-top: 10px;
	margin-bottom: 20px;
}
h3 {
	color: #124089;
	font-size: 1.0em;
	font-weight:normal;
	margin-top: 8px;
	margin-bottom: 5px;
}
small {
	font-size: 0.9em;
	}

.title1 {
	color: #039;
	line-height: 22px;
}
a { 
	text-decoration: none;
 }

a:link
{
	color: #A11D1F;	
	}
a:hover
{
	color: #C03;	 
}
a:link
{
	color: #A11D1F;	
	}
a:visited
{
	color: #666;	 
}
	
table {
	border:none;
	vertical-align: top;
}
td {
	vertical-align: top;
	}
	
.projekte-bilder {
	width: 200px;
	float: left; 
	
}
.projekte-text {
	width: 350px;
	float: left; 
	padding-left: 10px;
}

.lightbox {
	display:none;
	transition:display 2s;
	position:fixed;
	z-index:999;
	width:100%;
	height:100%;
	text-align:center;
	top:0;
	left:0;
	background:rgba(0,0,0,0.50);
	cursor:default;
}

.col-md-7 a:link {
	text-decoration: none;
}

.col-md-7 a:link,
.col-md-7 a:visited {
	color:#124089;
}

.col-md-7 a:hover,
.col-md-7 a:active {
	color:#A11D1F;
}

.lightbox .box {
	margin:auto;
	background-color:#fff;
	margin-top:100px;
	height:auto;
	width:500px;
	border-radius:10px;
	overflow:auto;
}

.lightbox .closed {
	width:20px;
	height:20px;
	float:right;
	margin-right:10px;
	margin-top:10px;
	background-image:url(../Responsive/images/close-new.png);
	background-size:contain;
	background-repeat:no-repeat;
	cursor:pointer;
	float:right;
}

.lightbox img {
	width:auto;
	max-width:100%;
	height:200px;
	margin-top:40px;
}

.lightbox:target {
	outline:none;
	display:block;
	
}

.lightbox h1 {
	text-align: left;
	margin-left:30px;
	margin-bottom:0px;
}

.lightbox h2 {
	text-align:left;
	margin-left:30px;
	color:#707070;
	font-weight:bold;
	font-size:0.9em;
	margin-top:5px;
	margin-bottom:20px;
}

.lightbox p {
	font-size:1.0em;
	color:#000;
	text-align:left;
	margin-left:30px;
	margin-right:30px;
	padding-bottom:25px;
}

@media (max-width:500px) {
	.lightbox .box {
		width:100%;
		margin-top:0px;
		overflow:scroll;
	}
	
}

.img-acc {
	width:120px;
	height:auto;
	float:left;
	margin-left:20px;
	margin-top:30px;
	margin-bottom:20px;
}

@media (max-width:500px) {
	.img-acc {
		width:auto;
		height:180px;
		margin-top:-200px;
	}
}


.link-arrows {
	font-size: 0.7em; 
	color:#A11D1F;
	padding-left: 10px;
}
.text-blue {
	
	color: #124089;
}
.text-red {
	
	color: #A11D1F;
}



/************** scrollable ************/
	/*root element for the scrollable.
	when scrolling occurs this element stays still.
*/
.scrollable {

	position:relative;
	overflow:hidden;
	width: 660px;
	height:90px;
}


.scrollable .items {

	width:20000em;
	position:absolute;
}


.items div {
	float:left;
}
/************ für Seite Kunden ******************/
.randombox {
	width: 568px;
	height: 50px;
	margin-left: -5px;
}

/************ für Site Historie ******************/

.year { 
	width: 60px; 
	float: left;
	color: #124089;
	}

.history-text {
	width: 490px; 
	float: left;
	padding-bottom: 10px;
	font-size: 0.9em;
	}


:focus {
  -moz-outline-style:none;
}



#flowtabs {
	float: left;
	width:160px;
	margin:0 !important; 
	padding:0;	
	margin-top: -30px;
	_margin-bottom:-2px;

}
#flowtabs ul { 
	margin-top: -20px;
	
}


#flowtabs li { 
	margin:0; 
	padding:0; 
	text-indent:0; 
	list-style-type: none;
	margin-left: -40px;
	
}


#flowtabs li a {
	height: 31px;   
	width: 189px; 	
	padding:0px;
	margin:0px;
	color:#124089;
	line-height:20px;
	text-align:left;
	text-decoration:none;
}
#flowtabs #hidden {
	color:#fff;
}
#flowtabs li a small, #projekte_right li a small{
	font-size: 0.8em;
	color: #C30;
}


#flowpanes {
	float: left;
	padding-left: 20px;
	width:340px;

}



#flowpanes div {
	display:none;
	color:#333;	
	margin:0;
}

#flowpanes p {
	margin:0;
}

#flowpanes h2 {
	margin-top:0px;
	margin-bottom: 10px;
}


#flowpanes a {
	color:#cc9;		
	font-size:14px;
}

#flowpanes p, #flowpanes samp {
	color:#333;		
}

#flowpanes .narrow {
	padding-left: 60px;		
}





#projekte_left, #projekte_right {
	width: 300px;
	float: left;
	margin:0 !important; 
	padding:0;	
	padding-top: 20px; 
	
	z-index:20000;
}
#projekte_left ul, #projekte_right ul{ 
	margin-top: -20px;
	
}


#projekte_left li, #projekte_right li { 
	margin:0; 
	padding:0; 
	text-indent:0; 
	list-style-type: none;
	margin-left: -40px;
	padding-top: 10px;
	
}


#projekte_left li a, #projekte_right li a{
	height: 31px;   
	width: 189px; 	
	padding:0px;
	margin:0px;
	color:#124089;
	text-align:left;
	text-decoration:none;
}
#projekte_left li a small, #projekte_right li a small{
	font-size: 0.8em;
	color: #C30;
}


.simple_overlay {
	display:none;
	z-index:10000;
	background-color: white;
	background-image: url(../images/background-overlay.jpg);
	background-repeat: no-repeat;
	background-position: bottom left;
	width:600px;
	margin:auto;
	height:	270px;
	border:1px solid #fff;
	border-radius:10px;
	-moz-box-shadow:0 0 190px 5px #000;
	-webkit-box-shadow: 0 0 190px #000;	
}




.simple_overlay .close {
	background-image:url(../images/close.png);
	position:absolute;
	right:-15px;
	top:-15px;
	cursor:pointer;
	height:35px;
	width:35px;
	z-index:20000;
	opacity:1.0;
}

.simple_overlay img {
	position:absolute;
	right:0px;
	top:0px;
	border-bottom-right-radius:10px;
	height:268px;
}

	
	
	.details {
		position:absolute;
		top:10px;
		left:15px;
		font-size:11px;
		color:#333;
		width:350px;
	}
	
	.details h3 {
	color:#039;
	font-size:13px;
	margin-bottom:0px;
	}
	.details h4 {
	color:#666;
	font-size:11px;
	font-weight: bold; 
	margin-top:8px ;
	margin-bottom: 8px;
	}
	.details p {
	text-align: justify;		
	}

@media (max-width:650px) {
	.simple_overlay {
		width:300px;
		height:auto;
		overflow-y:scroll;
	}
	
	.simple_overlay img {
		position:static;
		border-bottom-right-radius:0px;
		margin-left:40px;
	}
	
	.details {
		position:static;
		width:280px;
		padding-left:20px;
		padding-top:10px;
		margin-bottom:20px;
		font-size:1.0em;
		overflow:auto;
	}
	
	.bilder {
		position:static;
		float:left;
		width:300px;
	}
	
	.details h3 {
		font-size:1.2em;
	}
	
	
}

/******** apple Overlay  ***********/

.apple_overlay {

	display:none;
	background-image:url(../images/white.png);

	width:640px;

	padding:35px;
	
	font-size:11px;
}


.apple_overlay .close {
	background-image:url(../images/close.png);
	position:absolute;
	right:5px;
	top:5px;
	cursor:pointer;
	height:35px;
	width:35px;
	opacity:1.0;
}





	#overlay {
		background-image:url(http://static.flowplayer.org/img/overlay/transparent.png);
		color:#efefef;
		height:450px;
		background-repeat: no-repeat;
	}
	
	div.contentWrap {
		height:441px;
		overflow-y:auto;
}
	
	
	

a:active {
  outline:none;
}

:focus {
  -moz-outline-style:none;
}