@import url(http://fonts.googleapis.com/css?family=Anton);

a{text-decoration:none; color:#333CF0}
a:hover{text-decoration:none; color:#333CF0}

/* HTML5 HACK -------------------------------------- */  
header, section, footer, aside, nav, article, footer {  
  display: block;  
}

.clear{clear:both;height:1px;line-height:0;display:block;margin:0}

/* LAYOUT ------------------------------------------ */
body {

  font-family: Trebuchet MS, Verdana, Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-attachment: fixed;  
  background: #f1f1f1;
}

img {
  border: none;
}
#wrapper {
  width: auto;
  margin: auto;
  padding: 10px;
  /*border: 1px dashed #cdcdcd;
  -webkit-box-shadow:0 0 20px #999;
  -moz-box-shadow:0 0 20px #999;
  box-shadow:0 0 20px #999;
  background: #fff;*/
  text-align: center;
}

/* HEADER & NAVIGATION ------------------------------ */
.title {
  margin-top: 1em;
  font: normal 273px/285px 'Anton', sans-serif;
  padding: 0;
  color:#666666;
  text-shadow: 0px 0px 1px #333;
  text-align: center;
}
header h1 {
  font-size: 24px;
  margin: 0;
  color:#666;
  text-transform: uppercase;
  font-weight: normal;
}
#smbar {
  float: right;
  margin: 15px -3px 0 0;
}

nav  ul , nav { 
  position: fixed; 
  bottom: -47px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  width: 430px;
  z-index: 20000;
  background-color: #666; 
  -moz-border-radius: 7px;
  border-radius: 7px;  
  opacity: .95;
  filter: alpha(opacity=95);
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=91)";
  list-style-type: none;
  font-weight: bold;  
  padding: 8px 0 8px 22px; 
  margin-bottom: 0;
  background-image: -moz-linear-gradient(top, #b4b4b4, #707070);
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#b4b4b4), to(#707070));
  -webkit-box-shadow:0 0 12px #4b4b4b !important;
  -moz-box-shadow:0 0 12px #4b4b4b !important;
  box-shadow:0 0 12px #4b4b4b !important;
}
#nav_handler  { 
  position: relative; 
  display: block;
  bottom: 31px;
  left: 145px;
  padding-top: 2px;
  margin-left: auto;
  margin-right: auto; 
  width: 122px;
  height: 25px;
  text-align: center;
  z-index: 99;
  color: #fff;
  text-decoration: none;
  background-color: #666;
  background-color: #333;
  font-size:11px;
  -moz-border-radius: 7px;
  border-radius: 7px;  
  opacity: .97;
  filter: alpha(opacity=96);
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=96)";
  -webkit-box-shadow:0 0 12px #4b4b4b !important;
  -moz-box-shadow:0 0 12px #4b4b4b !important;
  box-shadow:0 0 12px #4b4b4b !important;
}
#nav_handler:hover  { /* this will ba used as a wrapper for the nav_menu so we can center it (nav_menu). especially for IE */
  color: #333;
  text-decoration: none;
  background-color: #ededed;
  border-color: #333;
}
nav ul li {
  display: inline;
  margin: 0;
  padding: 0;
}

nav ul li a {
  display: inline-block;
  padding: 4px 9px 5px 10px;
  color: #fff;
  text-decoration: none;
  font-size: 18px;
  font-weight: normal;
  -moz-border-radius: 7px;
  border-radius: 7px; 
  z-index: 30002;
}

nav ul li.active a,
nav ul li a:hover {
  background-color: #fff;
  color: #fff;
}

/* CONTENT ------------------------------------------ */
article {
  clear: both;
}
article  h2, #impressum  h2 {
font: normal 38px/42px 'Anton', sans-serif;
color:#fff;
/*text-shadow: -1px -1px 0px #333, 1px 1px 0px #fff;*/
font-weight: normal;
margin: 20px 0 0 0;
display: block;
padding: 3px 7px 4px 7px;
text-transform: uppercase;
clear: both;
font: normal 23px/28px 'Anton', sans-serif;
letter-spacing: 1px;
}
#about h2,
nav ul li.active a.nav_about,
nav ul li a.nav_about:hover {
background-color: #C02937;
}
#portfolio h2,
nav ul li.active a.nav_portfolio,
nav ul li a.nav_portfolio:hover{
background-color: #DDAF0E;
}
#work h2,
nav ul li.active a.nav_work,
nav ul li a.nav_work:hover {
background-color: #189168;
}
#contact h2,
nav ul li.active a.nav_contact,
nav ul li a.nav_contact:hover {
background-color: #2D46A7;
}
#impressum h2 {
background-color: #999;
}
nav ul li.active a.nav_header,
nav ul li a.nav_header:hover ,
nav ul li.active a.nav_blog,
nav ul li a.nav_blog:hover{
background-color: #333;
}

section {
  width: 920px;
  margin: 5px 0 40px 0;  
  clear: both;
  color: #fff;
  color:#333;
  font-size: 14px;
  line-height: 19px;
}
section .left,
section .right{
  width: 445px;
  float:left;
  text-align: justify;
}
section .right{
  margin-left: 30px;
}

section .info_box {
  width: 207px;
  float: left;
  margin-right: 30px;
}
section .info_box ul li{
  margin: 0 0 5px -23px;
  font-size:12px;
  line-height:16px;
}
section .last {
  float: right;
  margin-right: 0;
  width: 209px;
}
#portfolio .info_box  h3 {
  font: normal 20px/28px 'Anton', sans-serif;
  padding: 3px 7px 4px 7px;
  height: 28px;
  margin: 20px 0 0;
  text-transform: uppercase;
  color: #fff;
  background-color: #DDAF0E;
}

/* FORM -------------------------------------------- */
#contact {
  height:750px;
}
form {
  width:700px;
  margin-bottom: 45px
}
label {
  display: block;
  width: 85px;
  font-size: 18px;
  float: left;
}
input, textarea {
  font-family: "Courier New","Helvetica Neue", Helvetica, Arial, sans-serif;
  background-color:#fff;
  border:1px solid #2D46A7;
  font-size:16px;
  width:450px;
  min-height:22px;
  display:block;
  margin-bottom:20px;
  padding: 5px;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

textarea {
    min-height:220px;
}

input:focus, textarea:focus, input[type=submit]:hover  {
  -webkit-box-shadow:0 0 15px #666 !important;
  -moz-box-shadow:0 0 15px #666 !important;
  box-shadow:0 0 15px #666 !important;
  background-color:#fff;
}

/* The interesting bit */

input:not(:focus), textarea:not(:focus) {
  opacity:0.8;
}

input:required, textarea:required {
  background:#fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAKKSURBVDjLpZNdSBRRGIbnzOzubSxBRReBYhTRDziQQlKxbmoKItp0YVRUsBB2UVQsWdkfilHaj6GuZqEkhJaSf6knISqUYIgooogWS2uRwjFd25yZ3Xn7NlKS3bzp4jDMzHne73zPfCMAEP5nzbux6gU5UifwsE+AWSMos89DVczz4xpD8ArjkxUsMW4AwZ7InSWwetJh8Vzo1YzPviNYjfTmQL8rY+KSqI1fFJWYAKrsjjSvgPV4F/DsAGbqFyF0nSVOX2Xu0M3lwKMdCHdlgGDtW5kox23BqGFes2UdBeyD2ZYKgn1Tlcynt6YAPB/TDUkg2PNPB9H1s4pxozWZTlIIgjX9XipVL0CoaW0U9sVINGsF2ahm8l/9OkmWZg3shNWXC/TnwnzgwtdSUR27IDpn942cluSPxZIsRGXpt5eCTINg7Y9pNdy1DejbDjzMhNm+BQSrgXMS/1wi+UdOSQiUOeH32rgwc4PxSH8eMFSECC+A2Z0Ns5PAgXygNxPoTqdrFoz2dMy0bKLTuCk0B6HmjXh3hALINCdZCFYyTFaIKn0mTqa50baZNmZQgAvG/TSMlkjqp5MSHz4h+T8ct+HtYRteFdl5jMTxctFJsjSrLw/hDtfvEL01DQSrBDsXnMToIphPN66H0ZGJL2ckf7ApGejJglazCu+P2XwLBpDp8smG1dS/gonalSDTHjLtm7q1AehyIXA5AS8P2r1xAwhWvtcm0Bjn08Rlg0xrBDvJtHukdBnQuRU6SXxzdDGG9jpiJ3HsvKgEzkpasDEZE3VrMFwszVV6fciuTjWmYLQ8CYN7HNrTQocStwUynUiyWkgWJ9Nzf90Lj115vt/BB3c7vE8KHfNE/gKM7aCNx0eNYwAAAABJRU5ErkJggg==) no-repeat 430px 7px;            
}
input:valid, textarea:valid {
  background:#fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAGrSURBVDjLvZPZLkNhFIV75zjvYm7VGFNCqoZUJ+roKUUpjRuqp61Wq0NKDMelGGqOxBSUIBKXWtWGZxAvobr8lWjChRgSF//dv9be+9trCwAI/vIE/26gXmviW5bqnb8yUK028qZjPfoPWEj4Ku5HBspgAz941IXZeze8N1bottSo8BTZviVWrEh546EO03EXpuJOdG63otJbjBKHkEp/Ml6yNYYzpuezWL4s5VMtT8acCMQcb5XL3eJE8VgBlR7BeMGW9Z4yT9y1CeyucuhdTGDxfftaBO7G4L+zg91UocxVmCiy51NpiP3n2treUPujL8xhOjYOzZYsQWANyRYlU4Y9Br6oHd5bDh0bCpSOixJiWx71YY09J5pM/WEbzFcDmHvwwBu2wnikg+lEj4mwBe5bC5h1OUqcwpdC60dxegRmR06TyjCF9G9z+qM2uCJmuMJmaNZaUrCSIi6X+jJIBBYtW5Cge7cd7sgoHDfDaAvKQGAlRZYc6ltJlMxX03UzlaRlBdQrzSCwksLRbOpHUSb7pcsnxCCwngvM2Rm/ugUCi84fycr4l2t8Bb6iqTxSCgNIAAAAAElFTkSuQmCC) no-repeat 430px 5px;     
}   

input:focus:invalid, textarea:focus:invalid {
  background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAHdSURBVDjLpZNraxpBFIb3a0ggISmmNISWXmOboKihxpgUNGWNSpvaS6RpKL3Ry//Mh1wgf6PElaCyzq67O09nVjdVlJbSDy8Lw77PmfecMwZg/I/GDw3DCo8HCkZl/RlgGA0e3Yfv7+DbAfLrW+SXOvLTG+SHV/gPbuMZRnsyIDL/OASziMxkkKkUQTJJsLaGn8/iHz6nd+8mQv87Ahg2H9Th/BxZqxEkEgSrq/iVCvLsDK9awtvfxb2zjD2ARID+lVVlbabTgWYTv1rFL5fBUtHbbeTJCb3EQ3ovCnRC6xAgzJtOE+ztheYIEkqbFaS3vY2zuIj77AmtYYDusPy8/zuvunJkDKXM7tYWTiyGWFjAqeQnAD6+7ueNx/FLpRGAru7mcoj5ebqzszil7DggeF/DX1nBN82rzPqrzbRayIsLhJqMPT2N83Sdy2GApwFqRN7jFPL0tF+10cDd3MTZ2AjNUkGCoyO6y9cRxfQowFUbpufr1ct4ZoHg+Dg067zduTmEbq4yi/UkYidDe+kaTcP4ObJIajksPd/eyx3c+N2rvPbMDPbUFPZSLKzcGjKPrbJaDsu+dQO3msfZzeGY2TCvKGYQhdSYeeJjUt21dIcjXQ7U7Kv599f4j/oF55W4g/2e3b8AAAAASUVORK5CYII=) no-repeat 430px 7px;           
}

input[type=submit] {
  padding:10px;
  width:462px;
  background:#2D46A7;
  color: #fff;
  font-weight: bold;
  opacity:1.0;
  cursor: pointer;
  margin-left: 85px;
  font-family: Trebuchet MS, Verdana, Arial, sans-serif !important;
}
input[type=submit]:hover  {
  color:#333;
}

#contact em  {
  color:#666;
  margin-left: 85px;
  font-size: 14px;
}

#response_container {
  display: none;
  position: relative;
  top: 0;
  left: 0;
  text-align: center;
  width: 700px;
  padding-top: 25px;
  height: 400px;
}
#response {
  display: none;
  text-align: left;
}
#form_response p {
  margin:7px 0 7px 85px;
  padding: 5px;
  width: 440px;
  visibilty: hidden;
  border: 1px solid #ccc;
}
#confirmation {
	display:none;
}
    
/* FOOTER ------------------------------------------ */
footer {
  clear: both;
  background: #fff;
  padding: 10px 15px;
  margin: 80px -30px 0 -30px;
  border-top: 1px dashed #cdcdcd;
  color: #666;
}
footer  a {
  display: inline-block;
  float: right;
}
#impressum {
  margin: -27px;
  margin-top: 0;
  padding: 0 15px 15px;
  display: none;
  border-top: 1px dashed #cdcdcd;
}
/* ImageFlow Settings
==================================== */
@media screen, projection {
	.imageflow {
		overflow:hidden;
		position:relative; 
		text-align:left;
		visibility:hidden;
		width:102%;
    height: 405px !important;
    margin-left: -15px;
	}
	.imageflow img {
		border:none;
		position:absolute;
		top:0px;
		visibility:hidden;
		-ms-interpolation-mode:bicubic; /* Enables bicubic image resampling for the IE7 */
    -webkit-box-shadow:0 0 10px #999 !important;
    -moz-box-shadow:0 0 10px #999 !important;
    box-shadow:0 0 10px #999 !important;
	}
	.imageflow p {
		margin:0 auto;
		text-align:center;
	}
	.imageflow .loading {
		border:1px solid white;
		height:15px;
		left:50%;
		margin-left:-106px;
		padding:5px;
		position:relative;
		visibility:visible;
		width:200px;
	}
	.imageflow .loading_bar {
		background:#fff;
		height:15px;
		visibility:visible;
		width:1%;
	}
	.imageflow .navigation{
		z-index:10000;

	}
	.imageflow .caption {
		font-weight:bold;
		position:relative; 
		text-align:center;
		z-index:10001;
    margin-top: 95px;
	}
	.imageflow .scrollbar {
		border-bottom:1px solid #cdcdcd;
		position:relative; 
		visibility:hidden;
		z-index:10002;
		height:1px;
	}
	.imageflow .slider {
		background:url(../images/slider_green.png) no-repeat;
		height:14px;
		margin:-6px 0 0 -7px;
		position:absolute;
		width:14px;
		z-index:10003;
	}
	.imageflow .slideshow {
		cursor:pointer;
		height:14px;
		margin:20px 0 0 20px;
		position:absolute;
		width:14px;
		z-index:10003;
	}
	.imageflow .slideshow.pause {
		background:url(../images/button_pause.png) no-repeat;
	}
	.imageflow .slideshow.play {
		background:url(../images/button_play.png) no-repeat;
	}
	.imageflow .images {
		overflow:hidden;
		white-space:nowrap;
	}
	.imageflow .button {
		cursor:pointer;
		height:17px;
		position:relative;
		width:17px;
	}
	.imageflow .previous {
		background: url(../images/button_left.png) top left no-repeat;
		float:left;
		margin: -7px 0 0 -30px;
	}
	.imageflow .next {
		background: url(../images/button_right.png) top left no-repeat;
		float:right;	
		margin:-7px -30px 0 30px;
	}
}