/* Global
----------------------------------------------------------------------------------------------------*/

body {
	background:url(img/body_bg.png) top repeat-x;
}

.line {
	border-bottom:1px solid #ccc;
	height:1px !important;
}


/* Typo
----------------------------------------------------------------------------------------------------*/

body { 
	font-family: "Cantarell", arial, serif;
	font-size:12px;
 }
 
h2 {
	font-weight:bold;
	font-size:14px;
	color:#1cb7cb;
}

a {
	color:#98989b;
	text-decoration:none;
}

a:hover {
	color:#1cb7cb;
}

li {
	color:#98989b;
}

p {
	line-height:18px;
	color:#363d42;
}

em {
	font-style:italic;
	line-height:10px;
	font-size:10px;
	}
	
/* Header
----------------------------------------------------------------------------------------------------*/

#header {
	position:relative;
	border-bottom:1px solid #ccc;
	height:132px;
}

h1#logo a {
	position:absolute;
	left:10px;
	top:55px;
	height:24px;
	width:288px;
	background:url(img/h1_logo.png) no-repeat;
	text-indent:-9999px;
}

ul#hauptnavigation {
	position:absolute;
	bottom:13px;
	left:10px;
}

ul#hauptnavigation li {
	display:block;
	float:left;
	margin-right:7px;
	color:#98989b;
}

ul#hauptnavigation li a {
	padding:2px 4px 3px 4px;
}

ul#hauptnavigation li a:hover {
	background-color:#1cb7cb;
	color:#fff;
	
	border-radius:4px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
}

#line_header_top {
	border-bottom:1px solid #ccc;
	height:1px !important;
	margin-top:19px;
	margin-bottom:4px;
}

ul#kontaktnavigation {
	position:absolute;
	right:10px;
	bottom:13px;
}

ul#kontaktnavigation li {
	display:block;
	float:right;
	margin-left:18px;
}

ul#kontaktnavigation li strong {
	font-weight:bold;
	color:#1cb7cb;
}

ul#kontaktnavigation li a {
	padding:2px 4px 3px 4px;
}

ul#kontaktnavigation li a:hover {
	background-color:#1cb7cb;
	color:#fff;
	
	border-radius:4px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
}

.noscript {
	width:906px;
	margin:0 auto;
	text-align:center;
	margin-top:25px;
	border:4px solid #1cb7cb;
	padding:15px 0 15px 0;
	background:#f1f1f1;
	}

.noscript a {
	font-weight:bold;
	}
	
li.tel {
	width:130px;
	margin-right:-10px;
}
	
	
/* Teaser
----------------------------------------------------------------------------------------------------*/

#teaser {
	height:307px;
	background:url(img/teaser.jpg) no-repeat;
	position:relative;
}

h1#teaserhead {
	text-indent:-9999px;
	left:646px;
	top:36px;
	width:199px;
	height:45px;
	position:absolute;
	background:url(img/h1_teaser.png) no-repeat;
}

#teaser p {
	position:absolute;
	left:646px;
	bottom:22px;
	width:220px;
	color:#fff;
}

#teaser p.project {
	position:absolute;
	left:20px;
	color:#ccc;
	bottom:10px;
	font-size:11px;
}

#slide {
	width:341px;
	height:93px;
}

#slide img {
	display:none;
}

#holder {
	position:absolute;
	bottom:45px;
	left:18px;
	height:93px;
	width:341px;
}

/* Columns
----------------------------------------------------------------------------------------------------*/

#columns {
	border-top:1px solid #ccc;
	margin-top:4px;
	margin-bottom:4px;
	background:url(img/columns_bg.png) repeat-x;
	height:135px;
	padding-top:25px;
	position:relative;
}

#columns .grid_4 {
	height:110px;
	margin:0;
	width:268px;
}

#columns .links {
	border-right:1px solid #cbcbcb;
	padding-right:15px;
	padding-left:15px;
}

#columns .rechts {
	border-left:1px solid #cbcbcb;
	padding-left:15px;
	padding-right:15px;
}

#columns .mitte {
	width:278px;
	padding:0 15px 0 15px;
}

#columns img {
	float:left;
	margin-right:15px;
}
.content_block {
	top:8px;
	position:absolute;
	left:110px;
	padding-right:15px;
}

.content_block h2 {
	margin-bottom:5px;
}

.content_block p {
	line-height:14px;
}

.content_block a.featured {
	text-decoration:underline;
	color:#1cb7cb;
	background:url(img/arrow.png) left no-repeat;
	padding-left:10px;
	margin-top:4px;
	display:block;
}

.clearboth {
	clear:both;
	height:100px;
}

a.mail {
	display:inline;
	padding:0;
	margin:0;
	background:none;
	color:#363d42;
	text-decoration:none;
}

a.mail:hover {
color:#1cb7cb;
}

/* Toggle
----------------------------------------------------------------------------------------------------*/

h2.trigger {
	height: 46px;
	background:url(img/h2_toggle.png) repeat-x;
	line-height: 46px;
	float: left;
	width:100%;
	text-indent:-9999px;
	margin-top:-1px;
}

h2.trigger a {
	text-decoration: none;
	display: block;
}
h2.trigger a:hover {  }
h2.active {background-position: left bottom;} 
.toggle_container {
	margin: 0 0 5px;
	margin-bottom:20px;
	padding: 0;
	overflow: hidden;
	clear: both;
	position:relative;
	display:none;
}

.toggle_container_e, .toggle_container_i {
	margin: 0 0 5px;
	margin-bottom:20px;
	padding: 0;
	overflow: hidden;
	clear: both;
	position:relative;
	display:none;
}
.toggle_container .block, .toggle_container_e .block, .toggle_container_i .block {
	padding: 30px 0 20px 20px; 
}

a#trigger_arbeit {
	height:46px;
	background:url(img/h2_toggle_work.png) no-repeat;
}

a#trigger_arbeit:hover {
	background:url(img/h2_toggle_work_h.png) no-repeat;
}

a#trigger_kontakt {
	height:46px;
	background:url(img/h2_toggle_kontakt.png) no-repeat;
}

a#trigger_kontakt:hover {
	background:url(img/h2_toggle_kontakt_h.png) no-repeat;
}

a#trigger_impressum {
	height:46px;
	background:url(img/h2_toggle_impressum.png) no-repeat;
}

a#trigger_impressum:hover {
	background:url(img/h2_toggle_impressum_h.png) no-repeat;
}

.block.impressum {
	border-bottom:1px solid #ccc;
	overflow:hidden;
}

.toggle_container h3, .toggle_container_e h3, .toggle_container_i h3  {
	text-transform:uppercase;
	color:#1cb7cb;
	display:block;
	margin-bottom:18px;
	margin-top:5px;
}

.toggle_container ul {
	line-height:20px;
}

.toggle_container ul li a {
	padding:2px 4px 3px 4px;
	}

.toggle_container ul li a:hover {
	background-color:#1cb7cb;
	color:#fff;
	
	border-radius:4px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	}

.toggle_container ul li a.navigationActive {
	color:#363d42;
}

.toggle_container ul li a.navigationActive:hover {
	background:none;
}

.projektnavi {
	float:left;
	width:250px;
	padding-right:29px;

}

.projektnavi p {
	color:#98989b;
}

div.nav {
	margin-left:-5px;
}

.pro_head {
	padding-bottom:5px;
}


/* Projektcontent
----------------------------------------------------------------------------------------------------*/

.projektcontent, .projektcontent_e, .projektcontent_i {
	float:left;
}

.pc {
	min-height:500px;
	border-left:1px solid #e0e0e0;
	overflow:hidden;
	padding-left:20px;
	padding-top:5x;
	width:586px;
}

.projektcontent h2, .projektcontent_e h2, .projektcontent_i h2 {
	font-size:22px;
	font-weight:normal;
}

.projektcontent h3, .projektcontent_e h3, .projektcontent_i h2 {
	text-transform:none;
	font-size:12px;
	margin-bottom:15px;
	
}

.projektcontent img {
	margin-top:15px;
}

h4.projekt_sub {
	display:block;
	margin:20px 0 8px 0;
	padding:0 4px 0 4px;
	text-transform:uppercase;
	font-size:10px;
	color:#363d42;
}

#wrapper {
	position:absolute;
	right:20px;
	top:20px;
}

#load {
	background:url(img/loader.gif);
	height:24px;
	width:24px;
}

/* Kontakt
----------------------------------------------------------------------------------------------------*/

form {
	float:left;
	border-left:1px solid #e0e0e0;
	padding-left:20px;
	width:586px;
	color:#98989b;
}

label {
	float:left;
	display:block;
	width:155px;
	line-height:28px;
}

.tel_label {
	line-height:14px;
	padding-top:2px;
}

input {
	margin-left:10px; 
	margin-bottom:15px;
	border:1px solid #cbcbcb;
	height:28px;
	width:413px;
	color:#1cb7cb;
	font-weight:bold;
	padding:0 3px 0 3px;
	background:url(img/input.png) repeat-x top;
}

input:focus {
	background:url(img/input_focus.png) repeat-x top;
	border:1px solid #1cb7cb;
}

textarea {
	width:411px;
	min-width:411px;
	max-width:411px;
	margin-left:10px;
	border:1px solid #cbcbcb;
	height:155px;
	min-height:155px;
	color:#1cb7cb;
	padding:6px 4px 4px 4px;
	background:url(img/textarea.png) repeat-x top;
}

textarea:focus {
	background:url(img/textarea_focus.png) repeat-x top;
	border:1px solid #1cb7cb;
}

.button {
	background:url(img/btn_back.png) repeat-x;
	height:31px;
	width:163px;
	margin-left:165px;
	margin-top:20px;
	margin-bottom:0;
	color:#98989b;
	
	border-radius:4px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
}

.button:hover {
	color:#1cb7cb;
	border:1px solid #1cb7cb;
}

.button:active {
	color:#1cb7cb;
	border:2px solid #1cb7cb;
}
div.errors {
	border:1px solid #1cb7cb;
	padding:10px;
	margin-top:25px;
	line-height:18px;
	background:#f1f1f1;
	color:#98989b;
}

div.errors strong {
	font-weight:bold;
	color:#1cb7cb;
	display:block;
	padding-bottom:10px;
	border-bottom:1px solid #e0e0e0;
	text-transform:uppercase;
}

.danke {
	padding-left:20px;
	border-left:1px solid #e0e0e0;
	min-height:100px;
	padding-top:20px;
}

.danke h3 {
	font-size:22px;
	font-weight:normal;
}

.danke p {
	color:#98989b;
	margin-top:-5px;
}


/* Kontakt
----------------------------------------------------------------------------------------------------*/

.projektcontent_i {
	border-left:1px solid #e0e0e0;
	padding-left:20px;
	width:586px;
}

.projektcontent_i p {
	color:#cbcbcb;
	font-size:11px;
	margin-bottom:15px;
}

.imp strong {
	font-weight:bold;
	display:inline-block;
	width:150px;
}

.imp {
	margin-bottom:15px;
}

.imp_sub {
	margin-bottom:15px;
	width:220px;
}

.imp_sub strong {
	font-weight:bold;
	display:inline-block;
	width:30px;
	color:#1cb7cb;
}