* { 
	/* exclude browser incompatibilities */
	padding: 0; 
	margin: 0; 
	font-size: 1em; 
	font-weight: normal;
	outline: none;
}
body, html {
	width: 100%; 
}
html {
	/* always show a scrollbar in Firefox to prevent snapping of the viewport if related items are loaded afterwards */
	overflow: -moz-scrollbars-vertical; 
	overflow-x: auto;
	/* always show the vertical scrollbar in all browsers by default, if not, 
	it creates some problems in IE8 with recalculaiton of the websites elements (like scrollbar buttons in the collection rack) */
	height: 101%;
}
@media screen and (min-width: 0px){ /* for opera9, safari3 */
	html {
		/* create 1px additional space at the bottom to always show a scrollbar as for Firefox (see above) */
		margin-bottom: 1px;
	}
}
body {
	font-family: Georgia, Times, Times New Roman, serif;
	font-size: 70%; /* Resets 1em to 11px (62,5% = 10px / 70% = 11px / 75% = 12px) */ 
	/* background: #fff url(../images/doubleclick.gif) right 70px no-repeat; */
	background-color: #fff;
}
h1 {
	font-size: 120%;
	background-color: #000;
	color: #fff;
}
h2 {
	padding: 0;
	font-size: 120%;
	font-weight: bold;
}
/* head */
div#links {
	margin: 100px auto 0;
	width: 580px;
}

/* car */
#car {
	position: relative;
	margin: 50px auto 0;
	width: 600px;
	height: 450px;
}
body.touch #car {
	display: none; /* not needed */
	margin: 30px auto 0;
	height: 330px;
}
/* portrait */
#car #portrait {
	position: absolute;
	top: 0px;
	left: 200px;
	z-index: 3;
	overflow: hidden;
	width: 150px;
	height: 50px;
	background-color: #000;
	/* background: #000 url(../images/portrait_black.png) 17px 17px no-repeat; */
	/* cursor: move; */
}
body.touch #car #portrait {
	display: none;
}
#car #portrait .cover {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 4;
	width: 150px;
	height: 50px;
	background: transparent url(../images/portrait_cover.gif) 0 2px no-repeat;
}
#logo {
	position: absolute;
	top: 470px;
	left: 304px;
	width: 297px;
	height: 41px;
	/* cursor: move; */
}
body.touch #logo {
	top: 350px;
}

/* cubes */
.cube {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: 50px;
	height: 50px;
	background-color: #000;
	cursor: move;
}
/* additional cubes */
.cube.one {
	width: 50px;
	top: 400px;
}
.cube.two {
	width: 100px;
}
.cube.three {
	width: 150px;
}

/* positions and width */
.a1 {						left: 150px;				width: 250px;	}
.a2 {						left: 550px;									}
.b1 {	top: 50px;		left: 150px;									}
.b2 {	top: 50px;		left: 350px;									}
.b3 {	top: 50px;		left: 500px;									}
.c1 {	top: 100px;										width: 200px;	}
.c2 {	top: 100px;		left: 350px;				width: 200px;	}
.d1 {	top: 150px;															}
.d2 {	top: 150px;		left: 500px;									}
.e1 {	top: 200px;										width: 100px;	}
.e2 {	top: 200px;		left: 200px;				width: 150px;	}
.e3 {	top: 200px;		left: 450px;				width: 100px;	}
.f1 {	top: 250px;															}
.f2 {	top: 250px;		left: 100px;				width: 100px;	}
.f3 {	top: 250px;		left: 350px;				width: 100px;	}

/* layout 1 */
.cube.ly1 {
	background-color: #fff;
	border: 1px solid #000;
	height: 48px;
}
.a1.ly1 {												width: 248px;	}
.a2.ly1 {												width: 48px;	}
.b1.ly1 {												width: 48px;	}
.b2.ly1 {												width: 48px;	}
.b3.ly1 {												width: 48px;	}
.c1.ly1 {												width: 198px;	}
.c2.ly1 {												width: 198px;	}
.d1.ly1 {												width: 48px;	}
.d2.ly1 {												width: 48px;	}
.e1.ly1 {												width: 98px;	}
.e2.ly1 {												width: 148px;	}
.e3.ly1 {												width: 98px;	}
.f1.ly1 {												width: 48px;	}
.f2.ly1 {												width: 98px;	}
.f3.ly1 {												width: 98px;	}


/* reset */
p.setLayout {
	position: absolute;
	bottom: 0;
	left: 0;
}
body.touch p.setLayout {
	display: none; /* not shown because nothin can be done on touch devices here */
}
p.setLayout span.description {
	display: block;
	float: none;
	white-space: nowrap;
}
p.setLayout span.resetLayout {
	clear: both;
	display: block;
	float: left;
	text-decoration: underline; /* set layout "links" */
	cursor: pointer;
}
/* add cubes */
p.setLayout span.addCubeOne,
p.setLayout span.addCubeTwo,
p.setLayout span.addCubeThree {
	position: absolute;
	clear: both;
	display: block;
	float: none;
	padding-left: 5px;
	border: 2px dashed #ccc;
	height: 30px;
	color: #ccc;
	font-size: 200%;
	cursor: pointer;
	text-align: center;
}
p.setLayout span.addCubeOne {
	bottom: 50px;
	left: 0;
	width: 46px;
	padding: 8px 0;
}
p.setLayout span.addCubeTwo {
	bottom: 50px;
	left: 100px;
	width: 96px;
	padding: 8px 0;
}
p.setLayout span.addCubeThree {
	bottom: 50px;
	left: 250px;
	width: 146px;
	padding: 8px 0;
}
/* added cubes */
.cube.additional.one {
	top: 350px;
}
.cube.additional.two {
	top: 350px;
	left: 100px;
}
.cube.additional.three {
	top: 350px;
	left: 250px;
}
p.setLayout span.finished {
	display: none;
	padding: 0 0 0 5px;
	text-decoration: none;
	color: #4F4F4F;
}

/* profile */
div#profile {
	margin: 20px auto;
	width: 600px;
}
div#profile p {
	padding: 12px 6px 4px 12px;
	width: 120px;
	height: 34px;
	background-color: #000000;
	color: #fff;
	font-weight: bold;
	font-size: 170%;
	cursor: pointer;
	text-align: center;
}
div#profile h1 {
	height: 70px;
	padding: 54px 10px 3px 25px;
	background:	#000 url("../images/portrait_black.png") 460px 10px no-repeat;
}
div#profile div#projects {
	background-color: #000;
	height: 235px;
}

/* projects as tag cloud */ 
#projects a, #projects a:link, #projects a:visited {
	display: block;
	float: left;
	margin: 0;
	height: 50px;
	border: 5px solid #fff;
	padding: 0 10px;
	background-color: #000;
	color: #FFF;
	text-decoration: none;
	line-height: 50px;
}
#projects a:hover, #projects a:active, #projects a:focus {
	background-color: #fff;
	color: #000;
}
/* tag cloud like sizes */
#projects a.s {
	font-size: 8pt;
}
#projects a.m {
	font-size: 10.5pt;
}
#projects a.l {
	font-size: 13pt;
}
#projects a.xl {
	font-size: 15.5pt;
}
#projects a.xxl {
	font-size: 30pt;
}

/* instagram */
div#instagramWrapper {
	display: none;
	overflow: hidden;
	margin: 20px auto;
	width: 600px;
	height: auto;
}
div#instagram {
	width: 620px;
}
div#instagramWrapper p {
	padding-bottom: 10px;
}
div#instagram img {
	display: block;
	float: left;
	margin: 0 15px 15px 0;
	width: 190px;
	height: 190px;
}

/* content pages */
div#content {
	position: relative;
	margin: 50px auto 50px;
	width: 680px;
	
}
div#content h1 {
	padding: 3px 10px;
	margin: 0 0 10px;
}
div#content h2 {
	padding: 10px 10px 10px 0;
}
div#content p, ul, ol, code {
	font-size: 120%;
}
div#content p, ul, ol, code {
	display: block;
	padding: 3px 15px;
	margin: 0 0 10px;
}
div#content em {
	font-weight: bold;
}
div#content textarea {
	width: 680px;
	min-height: 50px;
	margin-bottom: 10px;
	padding: 5px;
	font-size: 110%;
	font-family: Georgia, Times, Times New Roman, serif;
}
div#content li code {
	margin-bottom: 0;
	display: inline;
}
div#content li p {
	padding: 0;
}
div#content div.intro {
	margin-bottom: 10px;
}
div#content div.intro img.teaser, 
div#content div.intro p.teaserText {
	display: block;
	float: left;
}
div#content div.intro img.teaser {
	margin-right: 10px;
}
div#content div.intro p.teaserText {
	padding: 0;
	width: 350px;
}

/* imprint */
p.imprint {
	float: right;
	margin: 100px 50px 50px;
}

/******* clearing problems - use .area *******/
/* 
- stretch the surrounding area (div) over all included floating elements
- "How To Clear Floats Without Structural Markup", source and explanation: http://www.positioniseverything.net/easyclearing.html
*/
/* ignored by win ie */
.area:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}
.area {display: inline-table;} 
/* hide from mac ie5 \*/
* html .area {height: 1%;} 
*+html .area {height: 1%;}
.area {display: block;}
/* end hide from mac ie5 */