/********************************/
/******* =global reset ********/
/********************************/

* {
	margin:0;
	padding:0;
}

html {
	background: #000;
}

body {
	background: url(../images/body.jpg) top center fixed;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 18px;
	color: #575157;
}

p.margin { margin: 0 0 18px 0; }
p strong { color: #605b60;}
p.not-available { text-decoration: line-through; }

a { outline:none; }
a, a:active, a:visited { text-decoration: none; color: #777377;}
a:hover { color:#ba68e6; }

ul, ol {
	list-style: none;
}

hr {
	display: none;
}

.clear {
	clear: both;
	float: none;
}

/********************************/
/******** =separators ********/
/********************************/

.separator {
	clear: both;
	width: 980px;
	height: 7px;
	margin: 0 auto;
	margin-top: 47px;
	margin-bottom: 46px;
	background: url(../images/sprite.png) no-repeat;
}

.separator.right { background-position: 0 -115px }
.separator.left { background-position: 0 -122px; }
.separator.no-margin-top { margin-top: 20px;}

/********************************/
/*********** =layout ***********/
/********************************/

#container-outer {
	width: 100%;
	padding-top: 120px;
	padding-bottom: 120px;
}

.container {
	width: 940px;
	margin: 0 auto;
	padding: 0 20px 0 20px;
}

.column-3,
.column-6 {
	float: left;
	width: 220px;
	margin-right: 20px;
}

.column-6 {
	width: 440px;
}

.last {
	margin-right: 0;
}

.top-stripe {
	width:100%;
	height: 3px;
	position: fixed;
	top:0;
	left:0;
	z-index: 99;
	background:url(../images/sprite.png) 0 0 fixed;
}

/********************************/
/********* =headlines *********/
/********************************/

h1 {
	float: left;
	width: 200px;
	height: 47px;
	background: url(../images/sprite.png) 0 -3px no-repeat;
	text-indent: -9999px;
}

h2 { height: 45px; width: 540px; font-size: 45px; line-height: 50px; text-indent: -9999px;  background: url(../images/sprite.png) 0 -50px no-repeat; margin-bottom: 5px;}
h3 { height: 20px; width: 890px; font-size: 20px; line-height: 20px; text-indent: -9999px; background: url(../images/sprite.png) 0 -95px no-repeat; }

h4 { height: 20px; font-size: 20px; line-height: 20px; text-indent: -9999px; background: url(../images/sprite.png) 0 -130px no-repeat; margin-bottom: 20px;}
	h4.design-with-passion { background-position: 0 -130px;}
	h4.good-typography {background-position: -220px -130px; }
	h4.usability {background-position: -440px -130px;}
	h4.perfect-code {background-position: -660px -130px;}
	h4.about-me {background-position: 0 -150px;}
	h4.what-i-can {background-position: -440px -150px;}
	h4.current-status {background-position: -660px -150px;}
	
h4 strong { color: #ba68e6; text-transform:uppercase; }

/********************************/
/********* =navigation ********/
/********************************/

#navigation {
	float: right;
}
	#navigation li {
		float: left;	
	}
		#navigation li a {
			display: block;
			height: 45px;
			text-indent: -9999px;
			line-height: 45px;
			font-size: 12px;
			text-transform: uppercase;
			background: url(../images/sprite.png) no-repeat;
		}
		#navigation li a span { display: block; height: 45px;}
		#navigation li a.work { width: 65px; background-position: -220px -5px; }
		#navigation li a.work:hover { background-position: -510px -5px;}
		#navigation li a.about-me { width: 75px; background-position: -285px -5px;}
		#navigation li a.about-me:hover { background-position: -575px -5px; }
		#navigation li a.contact { width: 75px; background-position: -360px -5px; }
		#navigation li a.contact:hover { background-position: -650px -5px; }
		#navigation li a.imprint { width: 55px; background-position: -435px -5px;}
		#navigation li a.imprint:hover { background-position: -725px -5px; }

/********************************/
/************ =work ***********/
/********************************/
#work-outer-container {
	width: 100%;
}
#work-container {
	width:940px;
	height: 290px;
	overflow:hidden;
}
#work {
	overflow:hidden;
	}
	#work li {
		float: left;
		margin-bottom: 20px;
	}
	#work li a, #work li a span {
		display: block;
		width: 219px;
		height: 135px;
		text-indent: -9999px;
		background: url(../images/sprite.png) 0 -195px no-repeat;
	}
	
	#work li a#coffee {background-position: 0 -195px;}
	#work li a#coffee span {background-position: 0 -330px;}
	#work li a#barbarossa {background-position: -220px -195px;}
	#work li a#barbarossa span {background-position: -220px -330px;}
	#work li a#enomicon {background-position: -440px -195px;}
	#work li a#enomicon span {background-position: -440px -330px;}
	#work li a#ljw {background-position: -660px -195px;}
	#work li a#ljw span {background-position: -660px -330px;}
	
	/* new added */
	#work li a#bioheizung {background-position: -880px -195px;}
	#work li a#bioheizung span {background-position: -880px -330px;}

	#work li a#evolved {background-position: 0 -465px; }
	#work li a#evolved span {background-position: 0 -600px;}
	#work li a#ucentric {background-position: -220px -465px;}
	#work li a#ucentric span {background-position: -220px -600px;}
	#work li a#toton {background-position: -440px -465px;}
	#work li a#toton span {background-position: -440px -600px;}
	#work li a#squarepress {background-position: -660px -465px;}
	#work li a#squarepress span {background-position: -660px -600px;}
	
a#scroll-left,
a#scroll-right {
	display: block;
	height: 25px;
	width: 25px;
	position: absolute;
	text-indent: -9999px;
	background: url(../images/sprite.png) no-repeat;
}
	a#scroll-left {background-position: 0 -170px; top: 775px; left: 30px;}
	a#scroll-left:hover {background-position: -25px -170px;}
	a#scroll-right {background-position: -50px -170px; top: 775px; right: 30px;}
	a#scroll-right:hover {background-position: -75px -170px;}

/********************************/
/*********** =footer ***********/
/********************************/

.contact-links {}
	.contact-links li {
		float: left;
		margin-right: 30px;
	}
	.contact-links li.email {
		float: right;
		margin:0;
	}
	.contact-links li a {
		text-decoration: none;	
	}
	

/********************************/
/********* =fancybox *********/
/********************************/

#fancybox-loading {
	position: fixed;
	top: 50%;
	left: 50%;
	height: 40px;
	width: 40px;
	margin-top: -20px;
	margin-left: -20px;
	cursor: pointer;
	overflow: hidden;
	z-index: 1104;
	display: none;
}

#fancybox-loading div {
	position: absolute;
	top: 0;
	left: 0;
	width: 40px;
	height: 480px;
	background-image: url('../images/fancybox.png');
}

#fancybox-overlay {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background: #000;
	z-index: 1100;
	display: none;
  }

#fancybox-tmp {
	padding: 0;
	margin: 0;
	border: 0;
	overflow: auto;
	display: none;
}

#fancybox-wrap {
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
	padding: 20px;
	z-index: 1101;
	display: none;
}

#fancybox-outer {
	position: relative;
	width: 100%;
	height: 100%;
	background: #141214;
	border: 1px dotted #282628;
}

#fancybox-inner {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: 0;
	outline: none;
	overflow: hidden;
}

#fancybox-hide-sel-frame {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: transparent;
}

#fancybox-close {
	position: absolute;
	top: -15px;
	right: -15px;
	width: 30px;
	height: 30px;
	background-image: url('../images/fancybox.png');
	background-position: -40px 0px;
	cursor: pointer;
	z-index: 1103;
	display: none;
}

#fancybox_error {
	color: #444;
	font: normal 12px/20px Arial;
	padding: 7px;
	margin: 0;
}

#fancybox-content {
	height: auto;
	width: auto;
	padding: 0;
	margin: 0;
}

#fancybox-img {
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	border: none;
	outline: none;
	line-height: 0;
	vertical-align: top;
	-ms-interpolation-mode: bicubic;
}

#fancybox-frame {
	position: relative;
	width: 100%;
	height: 100%;
	border: none;
	display: block;
}



#fancybox-left, #fancybox-right {
	position: absolute;
	bottom: 0px;
	height: 100%;
	width: 50%;
	cursor: pointer;
	outline: none;
	background-image: url('../images/blank.gif');
	z-index: 1102;
	display: none;
}

#fancybox-left {
	left: 0px;
}

#fancybox-right {
	right: 0px;
}

#fancybox-left-ico, #fancybox-right-ico {
	position: absolute;
	top: 50%;
	left: -9999px;
	width: 30px;
	height: 30px;
	margin-top: -15px;
	cursor: pointer;
	z-index: 1102;
	display: block;
}

#fancybox-left-ico {
	background-image: url('../images/fancybox.png');
	background-position: -40px -30px;
}

#fancybox-right-ico {
	background-image: url('../images/fancybox.png');
	background-position: -40px -60px;
}



#fancybox-left:hover, #fancybox-right:hover {
	visibility: visible;    /* IE6 */
}

#fancybox-left:hover span {
	left: 20px;
}

#fancybox-right:hover span {
	left: auto;
	right: 20px;
}

.fancy-bg {
	position: absolute;
	padding: 0;
	margin: 0;
	border: 0;
	width: 20px;
	height: 20px;
	z-index: 1001;
}

#fancy-bg-n {
	top: -20px;
	left: 0;
	width: 100%;
	background-image: url('../images/fancybox-x.png');
}

#fancy-bg-ne {
	top: -20px;
	right: -20px;
	background-image: url('../images/fancybox.png');
	background-position: -40px -162px;
}

#fancy-bg-e {
	top: 0;
	right: -20px;
	height: 100%;
	background-image: url('../images/fancybox-y.png');
	background-position: -20px 0px;
}

#fancy-bg-se {
	bottom: -20px;
	right: -20px;
	background-image: url('../images/fancybox.png');
	background-position: -40px -182px; 
}

#fancy-bg-s {
	bottom: -20px;
	left: 0;
	width: 100%;
	background-image: url('../images/fancybox-x.png');
	background-position: 0px -20px;
}

#fancy-bg-sw {
	bottom: -20px;
	left: -20px;
	background-image: url('../images/fancybox.png');
	background-position: -40px -142px;
}

#fancy-bg-w {
	top: 0;
	left: -20px;
	height: 100%;
	background-image: url('../images/fancybox-y.png');
}

#fancy-bg-nw {
	top: -20px;
	left: -20px;
	background-image: url('../images/fancybox.png');
	background-position: -40px -122px;
}

.fancybox-title-over {
	position: absolute;
	bottom:0;
	left:0;
}

/********************************/
/********** =imprint ***********/
/********************************/

#imprint-container {
	display:none;
}
#imprint {
	width: 600px;
	height: auto;
}
	#imprint h5 {
		clear: both;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 14px;
		color: #9c949c;
		margin: 5px 0 15px 0;
		padding-top: 15px;
		border-top: 1px dotted #282628;
	}
	#imprint p {
		margin:0 0 10px 0;
		color: #7d757d;
	}
	#imprint p small {
		font-size:11px;
	}
	#imprint p span {
		display: block;
		float: left;
		position: relative;
		width: 100px;
	}