@font-face {
	font-family:"OratorStd";
	src: url("fonts/OratorStd.eot"), url("fonts/OratorStd.otf"), url("fonts/OratorStd.ttf") format("truetype"), url("fonts/OratorStd.svg") format("svg");
	font-weight: normal;
	font-style: normal;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote,
a, img, strong, var,
b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

b {
	font-weight: bold;
}

html {
	height:100%;
	color: #333;
}

body {
	height:100%;
	margin: 0px;
	font: 80% Helvetica, Tahoma, Verdana, Arial;
	background: url(img/bg.png) repeat-x #e3e3e3;
}

p, ul { margin: 2px 0 4px 0; line-height: 20px; }
p.no-margin {
	margin: 0;
	line-height: 100%;
}

a, a:hover { color: #8fc744; }

ul { margin-left: 25px; }

li { margin-bottom: 4px; }
li.no-margin {
	margin:0;
}

h1, h2, h3 {
	font: 24px "OratorStd", Helvetica, Arial, Tahoma;
	text-transform: uppercase;
	color: #8fc744;
	margin: 15px 0 10px 0;
	line-height: 24px;
}

h2  {
	font: 20px "OratorStd", Helvetica, Arial, Tahoma;
	color: #333;
	line-height: 20px;
}

h3  {
	font: 18px "OratorStd", Helvetica, Arial, Tahoma;
	color: #333;
	line-height: 18px;
}

h4 {
	font: 14px Helvetica, Arial, Tahoma;
	margin: 20px 0 10px 0;
}

div.transparent h1 {
	color: #333;
	text-shadow: 0 1px 0 white;
	margin: 20px 0 5px 0;
	padding: 0 5px;
}
	
h1.side-header { font-size: 30px; line-height: 30px; text-shadow: 0 1px 0 white; color: #333; margin:0;}

div.content-300 p {
	margin:0;
	font-size:11px;
	line-height:17px;
	color: #6C5F5F;
}

div.content-300 a {
	color: #392C2C;
	text-decoration: none;
	font-size: 11px;
}

div.content-300 a:hover {
	color: #9AC116;
	text-decoration: none;
	font-size: 11px;
}

div.content-300 h1 { /* H1 Überschrift im rechten Content-Bereich */
	font-size: 18px;
	line-height: 18px;
	margin: 4px 0 0 0;
}

div.content-300 h2 { /* H2 Überschrift im rechten Content-Bereich */
	font-size: 14px;
	line-height: 14px;
	margin: 4px 0 0 0;
}

div.content-300 h3 { /* H3 Überschrift im rechten Content-Bereich */
	font-size: 12px;
	line-height: 12px;
	margin: 4px 0 0 0;
}

div.content-300 h4 { /* H24 Überschrift im rechten Content-Bereich */
	font-size: 12px;
	line-height: 12px;
	margin: 4px 0 0 0;
}


/*********** Page wrap **************/
div.wrap {
	position: relative;
	min-height:100%;
	height:auto;
	width:900px;
	margin:0 auto;
	text-align:left;
}

/*********** HEADER **************/
div.header-box {
	height: 90px;
	margin: 0 5px;
	width:890px;
}

div.header-box div.logo {
	position: absolute;
	width:890px;
	height: 90px;
}

div.header-box div.logo img.logo {
	position:absolute;
	bottom:20px;
}

/*********** NAVIGATION **************/
/* HEADER-NAVIGATION */

div.header-box div.footnavi-box {
	position: relative;
	height:90px;
	width:890px;
	padding:0;
}

div.header-box div.footnavi-box ul.footnavi {
	position:absolute;
	top:5px;
	right:0;
	height:25px;
	background-color: none;
	padding:0;
	margin:0;
}

div.header-box div.footnavi-box li.footnavi-point,
div.header-box div.footnavi-box li.footnavi-point-active {
	float:left;
	height:25px;
	list-style-type:none;
	padding:0;
	margin: 0;
	text-align:center;
	line-height:25px;
	font-size:11px;
	color:#ddd;
}

div.header-box div.footnavi-box li.footnavi-point a,
div.header-box div.footnavi-box li.footnavi-point-active a {
	text-decoration:none;
	font-size:11px;
	display:block;
	margin:0 4px;
	padding: 0 4px;
	color:#ddd;
	outline:0; 
}

div.header-box div.footnavi-box li.footnavi-point-active a,
div.header-box div.footnavi-box li.footnavi-point-active a:hover,
div.header-box div.footnavi-box li.footnavi-point a:hover {
	background:none;
	border-bottom:2px solid #cfcfcf;
}


/* MAIN-NAVIGATION */
div.navi-box { height:50px; }

ul.navi {
	position: absolute;
	left:0;
	height:50px;
	padding:0 5px;
	margin:0;
}

li.navi-point, li.navi-point-active {
	float:left;
	height:50px;
	list-style-type:none;
	padding:0;
	margin:0;
	background: #cfcfcf;
	text-align:center;
	line-height:50px;
	font-size:16px;
	color:#777;
	font-weight:bold;
}

li.navi-point a, li.navi-point-active a {
	font-family: "OratorStd", Helvetica, Arial, Tahoma;
	font-size:16px;
	line-height: 46px;
	padding:4px 15px 0 15px;
	text-transform: uppercase;
	display:block;
	color:#333;
	font-weight:normal;
	margin:0;
	text-decoration: none;
	outline:0; 
}

li.navi-point-active, 
li.navi-point-active a,
li.navi-point-active a:hover {
	background: #e3e3e3;
	color: #548116;
}

li.navi-point a:hover {
	background: #e3e3e3;
	color: #548116;
}

/* SUB-NAVIGATION */
ul.subnavi{
	padding:0;
	margin:0;
}

li.subnavi-point{
	list-style-type:none;
	padding:0;
	margin:2px 0;
}

li.subnavi-point a {
	display:block;
	padding:3px 5px;
	font-size:14px;
	font-weight:bold;
	outline:0; 
}

li.subnavi-point a:hover {
	background:#e3e3e3;
	font-size:14px;
	color: #333;
}



/*********** STAGE **************/
div.stage {
	padding: 30px 5px 10px 5px;
}


/*********** CONTENT **************/
div.content-box,
div.content-box-transparent {
	margin-top:0;
	min-height: 300px;
	padding-top: 0;
	padding-bottom:200px; /* Höhe des Footers (optional mehr) */
}

/* Main Content */
div.content-600 {
	float: left;
	width:590px;
	margin: 0 5px;
	padding:10px 0 30px 0;
}

.csc-default {
	background:#fff;
	padding:10px 15px;
	margin: 0 0 10px 0;
}

div.transparent .csc-default {
	background: none;
}

/* Rechte Box / Sub Informationen */
div.content-300 {
	float: left;
	width:290px;
	height:100%;
	margin: 0 5px 30px 5px;
	padding:10px 0 10px 0;
}

div.content-300 div.subinformation,
div.content-300 div.contact,
div.content-300 div.facebook,
div.content-300 div.subnavi {
	margin: 0 0 10px 0;
	padding:15px;
	background: #fff;
	color: #6C5F5F;
}

div.content-300 div.contact img.social-bookmark { margin: 5px 5px 0 0; }

div.content-300 div.subinformation div.project {
	margin: 5px 0;
	clear:both;
	color: #6C5F5F;
}

div.content-300 div.subinformation div.project img {
	float:left;
	width:50px;
	height:50px;
	margin: 0px 5px 5px 0px;
}


/*********** CLEAR ***************/
div.clear {
	clear:both;
	border:0;
}

div.clear-0 {
	clear:both;
	border: 0;
	height: 0;
}

/*********** FOOTER **************/
div.footer-box {
	height: 50px;
	border-top:4px solid #9BC116;
	padding:10px 10px 60px 10px;
	text-align: left;
	font-size:11px;
	color:#777777;
}

div.footer-box a {
	color: #777777;
	text-decoration: none;
	border-bottom: 1px dotted #777777;
}

div.footer-box a:hover {
	color: #9AC116;
	text-decoration: none;
	border-bottom: 1px dotted #9AC116;
}

/*********** FOOTER NEU **************/
div#footer-wrap {
	position: relative;
	clear:both;
	margin:-160px auto;
	min-height: 160px;
	padding:0;
	overflow:hidden;
	width:100%;
	background: #393939;
	z-index:100;
}
	div#page-footer {
		position: relative;
		min-height:100%;
		width:900px;
		margin:0 auto;
		text-align:left;
		font-size: 12px;
	}
		div#footer-left { float: left; width:486px; }
		div#footer-right { float: left; width: 414px; }
		div#page-footer div#copyright { 
			width: 400px; 
			height: auto; 
			margin: 10px 0 0 0; 
			padding: 3px 10px 3px 0;
			color:#989898;
		}
		div#page-footer div.footmenu {
			float: left; 
			height: auto; 
			width: 185px; 
			padding: 3px 10px;
			margin: 10px 0 0 0; 
			border-right: 2px solid #c3c3c3;
			text-align: right;
			color:#989898;
		}

div#page-footer p, 
div#page-footer ul, 
div#page-footer a  { margin: 1px 0 3px 0; line-height: 16px; font-size: 12px; color:#989898; text-decoration:none; }
	div.footmenu ul { list-style-type: none; }
		div.footmenu ul li { margin: 2px 0; }


/*********** TYPO3 - KONTAKTFORMULAR **************/
input#mailformformtype_mail {
	cursor: pointer;
	height:26px;
	line-height: 26px;
	font: 12px Arial,Verdana,Tahoma;
	color: #f6f6f6;
	background-color: #392C2C;
	border:1px solid #392C2C;
	padding: 0 7px;
	margin:10px 0 0 0;
	
}

input#mailformemail,input#mailformName,input#mailformTelefon {
	padding:0 4px;
	width: 300px;
	line-height: 26px;
	height: 26px;
	font: 14px Arial,Verdana,Tahoma;
	color : #392C2C;
	background-color: #f6f6f6;
	border: 1px solid #9AC116;
}

textarea#mailformNachricht {
	padding:4px;
	width: 420px;
	font: 14px Arial,Verdana,Tahoma;
	color : #392C2C;
	background-color: #f6f6f6;
	border: 1px solid #9AC116;
}

input#mailformformtype_mail,
input#mailformemail,
input#mailformName,
input#mailformTelefon,
textarea#mailformNachricht {
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-khtml-border-radius: 5px;
	border-radius: 5px;
}

.csc-mailform {
	margin: 10px 0;
	width: 420px;
	border:0px;
	padding:0px;
}

.csc-mailform-field label {
	display: block;
	margin-top: 10px;
	color: #000000;
	font: 12px Arial,Verdana,Tahoma;
	padding: 6px 0 4px 2px;
}


/*********** tt_news - REFERENZEN **************/
div.news-item-300 {
	float: left;
	width: 300px;
	height: auto;
	margin: 0;
	padding:0;
}


/***** Boxgrid *****/
.boxgrid-wrap {
	height:190px;
	margin:5px;
	border: 5px solid #fff;
}

.boxgrid{ 
	width: 100%; 
	height: 100%; 
	border:0;
	margin:0; 
	overflow: hidden; 
	padding:0;
	position: relative; 
}
	.boxgrid img{ 
		position: absolute; 
		width: 280px;
		height: 190px;
		top: 0; 
		left: 0; 
		border: 0; 
	}
	.boxgrid p{ 
		padding: 0; 
		color:#afafaf; 
		font-weight:bold; 
		font:10pt "Lucida Grande", Arial, sans-serif; 
	}
	h3.ref-news {
		font: 18px "OratorStd", Helvetica, Arial, Tahoma;
		margin:0;
		padding: 10px 0 0 0;
		color:#fff;
	}

	
.boxcaption{ 
	float: left; 
	position: absolute; 
	background: #000; 
	height: 80px; 
	width: 100%; 
	opacity: .8; 
	/* For IE 5-7 */
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
	/* For IE 8 */
	-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
 }
 	.captionfull .boxcaption {
 		top: 190px;
 		left: 0;
 	}
 	.caption .boxcaption {
 		top: 190;
 		left: 0;
 	}
 	
 	.padding-10 {
 		padding: 0 10px;
 	}
 	
/***** tt_news Referenzen-Details *****/
#slide-container {width: inherit; max-width:590px; margin: 0 auto 40px auto; }

h1.hidden,
p.hidden {
	display:none;
}

div.news-details-wrap {
	margin: -10px -15px;
}

div.news-details-wrap img {
	margin:0;
	border: 0;
	height: auto;
}

div.news-content {
	background: #fff;
	padding: 10px 15px;
}



/* -----------------------------------
	< 1000px Wide
----------------------------------- */

@media (max-width: 1000px) {

	div.wrap { width: 600px; }
	
	div.header-box,
	div.header-box div.logo,
	div.header-box div.footnavi-box {
		width: 590px;
	}
	
	h1.side-header { font-size: 24px; line-height: 24px; text-shadow: 0 1px 0 white; color: #333; margin:0;}
	
	h1.side-header img {
		display:none;
	}
	
	li.navi-point a, li.navi-point-active a {
		font-size:14px;
		padding:4px 10px 0 10px;
	}
	
	div.content-600 {
		padding:20px 0 0 0;
	}
		
	div#page-footer { width:590px; padding-bottom: 15px; }
		div#footer-left { float: left; width:100%; }
		div#footer-right { float: right; width: 100%; }

		div#page-footer div.footmenu {
			border-left: 2px solid #c3c3c3;
			border-right: 0;
			text-align: left;
		}
	
}

/* -----------------------------------
	Smartphones (< 600px)
----------------------------------- */

@media (max-width: 600px) {

	div.wrap { width: inherit; }

	/***** Header start *****/
	div.header-box,
	div.header-box div.logo,
	div.header-box div.footnavi-box {
		width: inherit;
	}

	div.header-box {
		background: #333;
		overflow:hidden;
	}
			
	div.header-box div.logo img.logo {
		width:170px;
		bottom: auto;
		top: 10px;
	}

	div.header-box div.footnavi-box ul.footnavi {
		top: auto;
		bottom: 8px;
		right: 0;
	}

	div.header-box div.footnavi-box li.footnavi-point a {
		border:1px solid #333; /* Background color */
	}
		
	div.header-box div.footnavi-box li.footnavi-point-active a,
	div.header-box div.footnavi-box li.footnavi-point-active a:hover,
	div.header-box div.footnavi-box li.footnavi-point a:hover {
		background:#8fc744;
		color: #333;
		border:1px solid #8fc744;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		-khtml-border-radius: 5px;
		border-radius: 5px;
	}


	/***** Navigation start *****/
	div.navi-box { float:none; width: inherit; height:auto; background:#d1d1d1; padding: 0; margin:0;}
	
	ul.navi {
		position:relative;
		height:auto;
		background: none; //#d1d1d1;
		padding: 0;
		margin:5px;
	}

	li.navi-point, li.navi-point-active {
		height:40px;
		margin:0 5px 7px 0;
		background: none;
		line-height:40px;
	}
	
	li.navi-point a, li.navi-point-active a {
		line-height: 36px;
		margin:0;
		padding:4px 15px 0 15px;
		background:#e3e3e3;
		border: 1px solid #e3e3e3;
		-moz-border-radius: 7px;
		-webkit-border-radius: 7px;
		-khtml-border-radius: 7px;
		border-radius: 7px;
	}
	
	div.stage { display:none; }
	div.stage-permanent { display:block; margin:0; padding:30px 5px 0 5px;}
	

	div.content-box,
	div.content-box-transparent { padding:0 0 200px 0; }

	div.content-600 { float: none; width: inherit; }

	div#page-footer { width:inherit; padding: 15px 5px; }
	
	div#footer-left,
	div#footer-right { width: inherit; padding: 0; }
		
		div#page-footer div#copyright { margin:0 0 20px 0; }
		
		div#page-footer div.footmenu { width: 100%; border:0; padding:0; margin:0 0 20px 0; }
		div#page-footer div.footmenu ul { margin:0; padding:0 5px 0 0; }
			
		div#page-footer div.footmenu ul li { float: left; margin:0 0 4px 0; padding: 2px 4px 2px 0; }
		div#page-footer div.footmenu ul li a { padding: 3px 5px; background: #8fc744; margin: 0; color: #393939; }



	/***** TYPO3 - KONTAKTFORMULAR *****/
	input#mailformemail,input#mailformName,input#mailformTelefon { width: 60%; }
	textarea#mailformNachricht { width: 85%; }
	.csc-mailform { width: inherit; }

	/*********** tt_news - REFERENZEN **************/
	div.news-item-300 { width: 50%; }
	.boxgrid-wrap { height: 144px; }
}