@charset "utf-8";
/*
Design: Sebastian Laube
Code: Sebastian Laube
-------------------------------------------------------------- */

/* reset
-------------------------------------------------------------- */
html, body, div, span,
h1, h2, h3, h4, h5, h6, p,
a, em, img, dl, dt, dd, ol, ul, li
 {
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
}

a img { border: none; }

body { 
  font-size: 75%;
  line-height: 1.5; 
  color: #222; 
  background: #fff;
  font-family: 'Lucida Sans Unicode', Helmet, Freesans, sans-serif;
}

h1,h2,h3 { font-weight: normal; color: #111; }
h1 { font-size: 3em; line-height: 1; margin-bottom: .5em; }
h2 { font-size: 2em; margin-bottom: .75em; }
h3 { font-size: 1.5em; line-height: 1; margin-bottom: 1em; }

p           { margin: 0 0 1.5em; }


li ul, 
li ol       { margin:0 1.5em; }
ul, ol      { margin: 0 1.5em 1.5em 1.5em; }

ul          { list-style-type: disc; }
ol          { list-style-type: decimal; }

dl          { margin: 0 0 1.5em 0; }
dl dt       { font-weight: bold; }
dd          { margin-left: 1.5em;}

.first      { margin-left:0; padding-left:0; }
.last       { margin-right:0; padding-right:0; }
.top        { margin-top:0; padding-top:0; }
.bottom     { margin-bottom:0; padding-bottom:0; }

/* Clearfix
-------------------------------------------------------------- */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; visibility: hidden	} 
.clearfix:after { clear: both }
.clearfix { zoom: 1; }

/* Grid
----------------------------------------------------------------------------------------------------*/
.container {
	margin: 0 auto;
	width: 960px;
}

/* general
-------------------------------------------------------------- */
@font-face {
    font-family: 'FO';
    src: url('../fonts/forganik.eot');
    src: url('../fonts/forganik.eot?#iefix') format('embedded-opentype'),
         url('../fonts/forganik.woff') format('woff'),
         url('../fonts/forganik.ttf') format('truetype'),
         url('../fonts/forganik.svg#formlosOrganikRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'Titi';
    src: url('../fonts/Titillium.eot');
    src: url('../fonts/Titillium.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Titillium.woff') format('woff'),
         url('../fonts/Titillium.ttf') format('truetype'),
         url('../fonts/Titillium.svg#TitilliumText22LRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'Titi';
    src: url('../fonts/TitilliumBold.eot');
    src: url('../fonts/TitilliumBold.eot?#iefix') format('embedded-opentype'),
         url('../fonts/TitilliumBold.woff') format('woff'),
         url('../fonts/TitilliumBold.ttf') format('truetype'),
         url('../fonts/TitilliumBold.svg#TitilliumText22LBold') format('svg');
    font-weight: 700;
    font-style: normal;

}

::selection {
	background: #fff300; /* Safari, Opera, Chrome */
	color: #333;
}
::-moz-selection {
	background: #fff300; /* Firefox */
	color: #333;
}

body {background: #e5e4db url('../gfx/bg.png') repeat-x top left fixed;}

a:focus,
a:hover     { color: #f60; }
a           { color: #666; text-decoration: underline; }

.awesome, .awesome:visited,
.awesme a, .awesme a:visited
{
	position: relative;
	display: inline-block;
	padding: 8px 14px 9px;
	font-size: 1.1em;
	font-weight: 400;
	line-height: 1;
	text-shadow: 0 -1px 1px #be4c00; /*fallback*/
	text-shadow: 0 -1px 1px rgba(0,0,0,.25);
	color: #fff; 
	text-decoration: none;
	border-bottom: 1px solid rgba(0,0,0,.25);
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,.5);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.5);
	box-shadow: 0 1px 3px rgba(0,0,0,.5);
	background: #f60 url('../gfx/overlay.png') repeat-x;
	cursor: pointer;
	outline: 0;
	-moz-transition: background .5s ease-in;
	-webkit-transition: background .5s ease-in;
	-o-transition: background .5s ease-in;
	transition: background .5s ease-in;
}

	.awesome:hover, .awesme a:hover			{ background-color: #333; color: #fff; }
	.awesome:active, .awesome a:active		{ top: 1px; box-shadow: 0 1px 2px rgba(0,0,0,.5); -moz-box-shadow: 0 1px 2px rgba(0,0,0,.5);-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.5);}

/*ie6 box*/
.errorBox {
	padding: .5em 3em .5em 4em;
	background: #aae8ff url('../gfx/achtung.gif') no-repeat 1em center;
	border-bottom: 1px solid #82c6e0;
}
.errorBox a { color: #333;}

/* head
-------------------------------------------------------------- */
.accesslinks {width: 1px; margin: 0 !important;}
.accesslinks a,
.accesslinks a:hover,
.accesslinks a:visited {
	position: absolute;
	overflow: hidden;
	top: -1000px;
	left: -1000px;
}
.accesslinks a:focus,
.accesslinks .skiplink a:active {
	position: absolute;
	top: 0;
	left: 0;
}

h1 {
	margin: .5em 0;
	padding: .34em 0 0 180px;
	font: 6em/1em FO, 'Titi', sans-serif;
	min-height: 100px;
	clear: right;
	background: url('../gfx/logo.png') no-repeat 40px center;
	text-shadow: 0px 2px 3px rgba(220,200,220,.9); color: #222;
	color: #222;
	text-shadow: 0px 2px 3px #efefef;
	text-shadow: 1px 1px 0 #F7F7F7;
}
h1 a, h1 a:hover {color: #333; text-decoration:none; outline: 0;}

h1, .left { position: absolute; z-index: 0 }
.right { position: relative; float: right; width: 640px; margin: 15em 0 20px 10px }

/* left
-------------------------------------------------------------- */
.left { width: 280px; margin: 15em 10px 0 0; text-shadow: 1px 1px 0 #F7F7F7; }
.left h2 {font-family: 'Titi', sans-serif; font-weight: 700; margin: 0 .5em .4em }
.left p {margin: 0 1em 1.2em;}
.left ul {
	margin: 0 1em 1.3em;
	list-style: none;
}
.contact {
	padding: 1.1em 0 1.1em .3em;
	border-bottom: 1px solid #ccc;
	-moz-box-shadow: 0 0, 0 0, 0 0, 0 1px 0 #f7f7f7, 0 0;
	-webkit-box-shadow: 0 0, 0 0, 0 0, 0 1px 0 #f7f7f7, 0 0;
	box-shadow: 0 0, 0 0, 0 0, 0 1px 0 #f7f7f7, 0 0;
}

.social li {display: inline; margin: 0 0 0 .3em;}
.social a {
	display: inline-block;
	height: 32px;
	width: 32px;
	overflow: hidden;
	text-align: left;
	text-indent: -999em;
	direction: ltr;
	background: url(../gfx/socialSprite.png)
}
.social .datum { width: 36px; background-position: 0 0 }
.social .delicious { background-position: 0 -64px }
.social .deviantart { background-position: 0 -32px }
.social .twitter { background-position: 0 -96px }


p.more {
	margin: 0 1em;
	padding: 0 0 1.2em;
	border-bottom: 1px solid #ccc;
	-moz-box-shadow: 0 0, 0 0, 0 0, 0 1px 0 #f7f7f7, 0 0;
	-webkit-box-shadow: 0 0, 0 0, 0 0, 0 1px 0 #f7f7f7, 0 0;
	box-shadow: 0 0, 0 0, 0 0, 0 1px 0 #f7f7f7, 0 0;
}
.blog { margin-left: 1em;}

/* content
-------------------------------------------------------------- */
.right {
	background: #fff;
	border:1px solid #ccc;
	-moz-box-shadow: 0px 2px 5px rgba(110,110,110,.5);
	-webkit-box-shadow: 0px 2px 5px rgba(200,200,200,.8);
	box-shadow: 0px 2px 5px rgba(200,200,200,.8);
}
.wrap { position: relative; margin: 30px 30px 0 }

.dllnk {
	float: right;
	position: relative;
	z-index: 8;
	top: -14px;
	right: 10px;
	height: 81px;
	margin: 0 0 -200px;
	padding: 20px 50px 0 0;
	font-size: 1.2em;
	text-align: right;
	text-decoration:none;
	font: .9em/1em Georgia, Times, serif;
	background: url(../gfx/dl2.png) no-repeat top right;
	cursor: pointer;
	outline: 0;
}
.dllnk span { visibility: hidden; padding:1em;}
.dllnk:hover span {
	visibility: visible;
	text-shadow: -1px -1px 0 #222;
	text-decoration: none;
	color: #fff;
	background: #555;
	background: rgba(0,0,0,.6);
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

/* showcase
-------------------------------------------------------------- */
.show { margin: 0 0 1.5em; font-family: 'Titi', sans-serif; font-weight: 700; border-bottom: 1px dotted #ccc;}
.item { margin-bottom: 2em; padding: 0 0 .5em; border-bottom: 1px dotted #ccc;}
.item .preview {
	display: block;
	width: 580px;
	height: 200px;
	background: url(../gfx/cr.png);
	text-decoration: none;
}
.item h3 {
	margin: 0 0 2em 0;
	position: absolute;
	margin-top: 50px;
	left: -.5em;
	z-index:3;
	display: inline-block;
	padding: .4em .6em;
	font-family: 'Titi', sans-serif;
	font-size: 1.7em;
	text-align: right;
	text-shadow: 0 0 5px rgba(200,200,200,.5);
	color: #fff;
	border: 0;
	background: #333;
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,.6);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.6);
	box-shadow: 0 1px 3px rgba(0,0,0,.6);
	-moz-transition: background .5s ease-in;
	-webkit-transition: background .5s ease-in;
	-o-transition: background .5s ease-in;
	transition: background .5s ease-in;
}
.item .preview:hover h3 {background: #f60;}
.item .preview:hover .shadow {
	display: block;
	width: 580px;
	height: 200px;
	position: absolute;
	z-index: 2;
	background: url(../gfx/bighover.png) no-repeat;
	cursor: pointer;
}
.item .shadow { display: none; text-indent: -9999px; direction: ltr }
.item img {display: block;}
.item p {padding: .3em .6em; margin: 1em 0 .6em;}

.date {
	margin: 0 .1em 0 0;
	padding: .1em 1.1em .1em 0;
	background: url('../gfx/bullet2.png') no-repeat right center;
}

hr {display: none;}

/* profile
-------------------------------------------------------------- */
.profile h2,
.profile h3 { font-family: 'Titi', sans-serif; font-weight: 700 }
.profile h2 { margin: 0 0 .5em }
.profile h3 { margin: 2em 0 1em 0; font-family: 'Titi', sans-serif }
.profile ul {margin: 0;}
.profile ul li { display: block; float: left; width: 21%; margin: 0 .1em 1em; padding: 0 0 0 20px; background: url('../gfx/bullet.png') no-repeat left center;}
.profile dl { clear: both;}
.profile dt {
	float: left;
	width: 15%;
	margin: .3em 0 0;
	padding: .3em .7em .3em .5em;
	font: 500 1em/1.5em Georgia, "Times New Roman", Times, serif;
	color: #fff;
	background: #f60 url('../gfx/spitze.jpg') no-repeat right center;
}
.profile dd {
	float:left;
	width:75%;
	min-height:3em;
	margin: .7em 0 0 1.5em;
}

.me {display: block; float: right; margin: -1.5em 0 1.5em 1.5em;}
.end {margin: 0 0 2em;}

a.cvbox {
	display: block;
	width: 33%;
	margin: 1.5em auto 1.8em;
	padding: .2em .5em;
	font-size: 2em;
	font-family: Titi;
	color: #fff;
	text-decoration: none;
	background: #555;
	background: rgba(0,0,0,.6);
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
}
a.cvbox:hover {background: #222; background: rgba(0,0,0,.8);}
.cvbox img {
	display: block;
	position: absolute;
	float: left;
	margin: -1.4em 0 0 -1.1em;
}
.cvbox span { display: block; margin-left: 100px;}

/* foot
-------------------------------------------------------------- */
.foot { margin: 1em 0 0; padding: .4em 0 0; font-size: .9em; color: #666;}
.foot .thanks {
	float: left;
	width: 280px;
	margin: 0 10px 0 0;
	padding: .8em .2em 3em .2em;
	font: .9em/1em Georgia, Times, serif;
	text-align: center;
	text-shadow: -1px -1px 0 #d95700;
	color: #fff;
	background: #f60;
	border-bottom: 1px solid #d95700;
	-moz-border-radius: 5px 5px 0 0;
	-webkit-border-radius: 5px 5px 0 0;
	border-radius: 5px 5px 0 0;
	-moz-box-shadow: 0px 1px 2px #888;
	-webkit-box-shadow: 0px 1px 2px #888;
	box-shadow:  0px 1px 2px #888;
}
.foot .copy {
	float: left;
	width: 220px;
	margin: 5px 10px 0 0;
}

.up {
	float: left;
	width: 40px;
	margin: 0;
	text-align: right;
}
.up a {
	float: right;
	width: 6em;
	min-height: 26px;
	min-width: 26px;
	padding: 1.8em 3.3em 0em 1em;
	font: .9em/1em Georgia, Times, serif;
	color: #fff;
	background: url(../gfx/up_alt.png) right center no-repeat;
	-moz-transition: all .5s ease-in;
	-webkit-transition: all .5s ease-in;
	-o-transition: all .5s ease-in;
	transition: all .5s ease-in;
}
.up a span { display: block; visibility: hidden }
.up a:hover {
	position: relative;
	z-index: 3;
	width: 6em;
	text-shadow: -1px -1px 0 #222;
	text-decoration: none;
	color: #fff;
	background-color: #555;
	background-color: rgba(0,0,0,.6);
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}
.up a:hover span { visibility: visible}

/* slimbox
-------------------------------------------------------------- */
#lbOverlay {
	position: fixed;
	z-index: 9999;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: #333;
	cursor: pointer;
}

#lbCenter, #lbBottomContainer {
	position: absolute;
	z-index: 9999;
	overflow: hidden;
	background-color: #fff;
}

.lbLoading {
	background: #fff url('../gfx/loading.gif') no-repeat center;
}

#lbImage {
	position: absolute;
	left: 0;
	top: 0;
	border: 10px solid #fff;
	background-repeat: no-repeat;
}

#lbPrevLink, #lbNextLink {
	display: block;
	position: absolute;
	top: 0;
	width: 50%;
	outline: none;
}

#lbPrevLink {
	left: 0;
}

#lbPrevLink:hover {
	background: transparent url('../gfx/prevlabel.gif') no-repeat 0 15%;
}

#lbNextLink {
	right: 0;
}

#lbNextLink:hover {
	background: transparent url('../gfx/nextlabel.gif') no-repeat 100% 15%;
}

#lbBottom {
	font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
	font-size: 10px;
	color: #666;
	line-height: 1.4em;
	text-align: left;
	border: 10px solid #fff;
	border-top-style: none;
}

#lbCloseLink {
	display: block;
	float: right;
	width: 80px;
	height: 22px;
	background: transparent url('../gfx/closelabel.png') no-repeat center;
	margin: 5px 0;
	outline: none;
}

#lbCaption, #lbNumber {
	margin-right: 71px;
}

#lbCaption {
	font-weight: bold;
}


@media screen and (max-height: 2000px) and (min-height: 570px) {
h1, .left { position: fixed }
}

@media screen and (max-width: 990px) and (min-width: 0) {
.container { width: 640px }
h1, .left, .right { position: relative; float: none; margin: 0 auto}
h1 { padding: .2em 0 0 125px; font-size: 5em; background-position: 5px 50% }
.left { width: 100%}
.left ul { margin: 0 0 1.3em }
.about { float: left; width: 58%}
.contact, .social { float: right; width: 40% }
p.more { border: 0; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none }

.right { clear:both; margin: 20px 0 }
}