@charset "UTF-8";
/*
-----------------------------------
Michael Thümmrich Design - www.thuemmrichdesign.de
CSS:			Screen, norm (min.1024x768px @ 100%)
Version:		14-10-2011
Author:		Wolf  Landmann - www.landman1.de
-----------------------------------
*/



* { margin:0; padding:0; }
img { margin:0; padding:0; border:0; }
.cleaner { clear: both; }
span.type { display:none; }
img.oldfashion { visibility:hidden; position:relative; float:right; width:1px; height:1px; }


body {
	background-color:rgb(255,255,255);
	color:rgb(128,128,128); /* ~ 50% Black */
	font-family:Univers, Helvetica, Arial, sans-serif;
	font-size:100.1%; /* Why 100.1% ? */
	text-align:center;/*h-mitte WinIE quirks*/
}

#siteContainer {
	display:block;
	position:relative;
	margin:4.545em auto 1.82em auto; /* ~ 50px auto 20px auto */
	padding:0 5.45em 0 5.45em; /* ~ 0 60px 0 60px */
	width:72.727em; /* ~ 800px */
	text-align:left;
	font-size:0.6875em; /* ~ 11px within 16px default (em-values within siteContainer are calculated against font-size 11px) */
	line-height:1.82em; /* ~ 20px */
}



/*  * * *  SITE HEAD  * * *  */

#siteHead {
	display:block;
	position:relative;
	height:5.45em; /* ~ 60px */
	border-bottom:0.091em solid rgb(0,0,0); /* ~ 1px */
}

#siteHead a {
	display:block;
	position:relative;
	width:30.91em; /* ~ 340px */
	height:3.64em; /* ~ 40px */
	color:rgb(128,128,128); /* ~ 50% Black */
	text-align:right;
	text-decoration:none;
}
#siteHead a span { position:relative; right:-43px; /* ~ 2.7em within 15px */ letter-spacing:0.02em; font-size:15px; /* 1.36em within 11px */ vertical-align:baseline; }
#siteHead a img { position:relative; left:-27.27em; /* ~ 300px */ /* width:40px ~ 3.64em */ height:20px; /* ~ 1.82em */ vertical-align:baseline; }




/*  * * *  SITE NAV  * * *  */

#siteNavi {
	display:block;
	position:relative;
	height:10.73em; /* ~ 118px */
}

#siteNavi ul.naviLeft {
	display:block;
	position:relative;
	margin:0;
	padding:0 0.91em 0 0; /* ~ 0 10px 0 0 */
	width:30.91em; /* ~ 340px */
	height:1.73em; /* ~ 19px */
	background-color:rgb(0,0,0);
	text-align:right;
	list-style-type:none;
}
#siteNavi ul.naviLeft li { list-style-type:none; }


/* * naviLeft Categories * */

#siteNavi ul.naviLeft > li {
	display:block;
	position:relative;
	float:right;
	margin:0 0 0 4.17em; /* ~ 0 0 0 50px within 12px */
	padding:0;
	color:rgb(255,255,255);
	font-size:1.09em; /* ~ 12px within 11px */
}


/* * naviLeft Categories List * */

#siteNavi ul.naviLeft li ul {
	display:none;
	position:absolute;
	margin:0;
	padding:2.17em 0 0.83em 0; /* ~ 26px 0 10px 0 within 12px */
	top:0;
	right:-0.83em; /* ~ 10px within 12px (same as ul.naviLeft padding-right) */
	white-space:nowrap;
}
#siteNavi ul.naviLeft > li:hover > ul { display:block; }
#siteNavi ul.naviLeft > li.selected > ul { display:block; }


/* * naviLeft Categories Links * */

#siteNavi ul.naviLeft a {
	display:block;
	position:relative;
	margin:0;
	padding:0 0.91em 0 0.91em; /* ~ 0 10px 0 10px within 11px */
	color:rgb(128,128,128);
	text-decoration:none;
	font-weight:200;
	font-size:0.917em; /* ~ 11px within 12px */
}
#siteNavi ul.naviLeft a:hover { color:rgb(0,0,0); font-weight:bold; }
#siteNavi ul.naviLeft a:active { color:rgb(240,0,0); }
#siteNavi ul.naviLeft a.selected { color:rgb(0,0,0); font-weight:bold; }


/* * naviRight * */

#siteNavi div.naviRight {
	display:block;
	position:relative;
	float:right;
	margin:-1.73em 0 0 0; /* ~ 19px 0 0 0 (same as ul.naviLeft height) */
	padding:0;
	width:38.18em; /* ~ 420px */
	height:10.73em; /* ~ 118px (same as siteNavi height) */
	text-align:right;
}
#siteNavi div.naviRight a {
	position:relative;
	color:rgb(128,128,128);
	text-decoration:none;
	font-weight:normal;
	font-size:1.09em; /* ~ 12px within 11px */
}
#siteNavi div.naviRight a:hover { color:rgb(0,0,0); font-weight:bold; }
#siteNavi div.naviRight a:active { color:rgb(240,0,0); }




/*  * * *  SITE CONTENT  * * *  */

#siteContent {
	display:block;
	position:relative;
	margin:0;
	padding:0;
	min-height:36.364em; /* ~ 400px */
}


/* * Content Columns * */

div.contentColumn {
	display:block;
	position:relative;
	margin:0;
	padding:0.545em 0 1.09em 0; /* ~ 6px 0 12px 0 */
}
div.contentColumn.left { float:left; width:31.82em; /* ~ 350px */ }
div.contentColumn.right { float:right; width:38.18em; /* ~ 420px */ }
div.contentColumn.single { width:72.727em; /* ~ 800px */ }
div.contentColumn.scroll { height:38.182em; /* ~ 420px */ overflow:auto; }


/* * Content Lines * */

div.contentLine {
	display:block;
	position:relative;
	margin:0;
	padding:0;
	clear:both;
}
span.line {
	display:block;
	position:relative;
	height:0.091em; /* ~ 1px */
	background-color:rgb(0,0,0);
}
span.left { float:left; width:31.82em; /* ~ 350px */ }
span.right { float:right; width:38.18em; /* ~ 420px */ }
span.double { height:0.182em; /* ~ 2px */ }


/* * Content Elements * */

div.contentColumn > img { margin:1.18em 0 0 0; /* ~ 13px 0 0 0 */ }
div.contentColumn > iframe { /* - - - - - - - - - - - - - - - - - TO-DO: Replace iFrame with static-map */
	position:relative;
	margin:1.18em 0 0 0; /* ~ 13px 0 0 0 */
	width:38.18em; /* ~ 420px */
	height:32.68em; /* ~ 360px */
	border:0;
	frameborder:0;
	scrolling:no;
}
/* .. for project date within referenz-page */
div.contentColumn > em {
	position:relative;
	float:right;
	color:rgb(0,0,0);
	font-style:normal;
	font-weight:bold;
}

#siteContent h4 {
	margin:0;
	padding:0;
	color:rgb(0,0,0);
	font-weight:bold;
	font-size:1em; /* ~ 11px */
}

#siteContent p { /* for some reason Safari won't scale font-size below readability so content columns stop scaling */
	margin:0;
	padding:0;
	font-weight:normal;
}

#siteContent ul.dsg {
	margin-left:1em;
}

#siteContent a { color:rgb(128,128,128); text-decoration:none; }
#siteContent a:hover { color:rgb(0,0,0); font-weight:bold; }
#siteContent a:active { color:rgb(240,0,0); outline:none; }

#siteContent a.outlink { color:rgb(128,128,128); text-decoration:underline; }
#siteContent a.outlink:hover { color:rgb(0,0,0); font-weight:normal; }
#siteContent a.outlink:active { color:rgb(240,0,0); outline:none; }



/* * Content List * */

#siteContent ul.contentList {
	display:block;
	position:relative;
	padding:0.091em 0 0 0; /* ~ 1px 0 0 0 */
	width:31.82em; /* ~ 350px */
}
#siteContent ul.contentList small { display:none; }
#siteContent ul.contentList ul {
	display:none; /*display:block;*/
	padding:0 0 0 2.73em; /* ~ 0 0 0 30px */
	left:31.82em; /* ~ 350px */
	width:38.18em; /* ~ 420px */
	min-height:35.45em; /* ~ 390px */
	font-weight:normal;
}
#siteContent ul.contentList li { height:1.73em; /* ~ 19px */ list-style-type:none; border-bottom:0.091em solid rgb(228,228,228); /* ~ 1px */ white-space:nowrap; }
#siteContent ul.contentList > li > ul > li { border-bottom:0.091em solid rgb(228,228,228); }

#siteContent ul.contentList:hover ul { position:absolute; top:0.091em; /* ~ 1px */ }
#siteContent ul.contentList > li:hover { color:rgb(0,0,0); border-bottom:0.091em solid rgb(128,128,128); /* ~ 1px */ }
#siteContent ul.contentList > li:hover small { display:inline-block; float:right; padding:0.27em 0 0 0; /* ~ 3px 0 0 0 */ color:rgb(128,128,128); font-size:0.64em; /* ~ 7px */ }
#siteContent ul.contentList > li:hover > ul { display:block; }
#siteContent ul.contentList > li.wait:hover > ul { display:none; }
#siteContent ul.contentList > li.disabled:hover { color:rgb(128,128,128); /* ~ 50% Black */ border-bottom:0.091em solid rgb(228,228,228); /* ~ 1px */ }
#siteContent ul.contentList > li.disabled:hover small { display:none; }
#siteContent ul.contentList > li.disabled:hover > ul { display:none; }

/* .. for clicked content list elements */
#siteContent ul.contentList > li.hold { font-weight:bold; color:rgb(0,0,0); border-bottom:0.091em solid rgb(128,128,128); /* ~ 1px */ }
#siteContent ul.contentList > li.hold small { display:inline-block; float:right; padding:0.27em 0 0 0; /* ~ 3px 0 0 0 */ color:rgb(0,0,0); font-size:0.64em; /* ~ 7px */ }
#siteContent ul.contentList > li.hold > ul { display:block; position:absolute; top:0.091em; /* ~ 1px */ }

#siteContent ul.contentList a { display:block; color:rgb(128,128,128); text-decoration:none; }
#siteContent ul.contentList a:hover { color:rgb(0,0,0); font-weight:bold; }
#siteContent ul.contentList a:active { color:rgb(240,0,0); }


/* * Content Current * */

#siteContent .contentCurrent {
	display:block;
	position:relative;
	margin:1.18em 0 1.82em 0; /* ~ 13px 0 20px 0 */
	padding:0;
	width:70em; /* ~ 770px */
	overflow:hidden;
}

#siteContent .contentCurrent span {
	display:block;
	position:relative;
	float:right;
	margin:0.182em 0 0.82em 0; /* ~ 2px 0 9px 0 */
}
#siteContent .contentCurrent img { width:70em; /* ~ 770px */ border-bottom:0.091em solid rgb(228,228,228); /* ~ 1px */ }

#siteContent .contentCurrent a { display:block; position:relative; }
#siteContent .contentCurrent a:hover img { border-color:rgb(0,0,0); }




/* * * * PROJECT CONTENT * * * */


/* * Content Navi * */

#contentNavi {
	display:block;
	position:absolute;
	bottom:0;
	margin:0 0 1.18em 0; /* ~ 0 0 13px 0 */
	padding:0;
	color:rgb(128,128,128);
}
#contentNavi a { color:rgb(128,128,128); text-decoration:none; }
#contentNavi a:hover { color:rgb(0,0,0); font-weight:bold; }
#contentNavi a:active { color:rgb(240,0,0); }
#contentNavi a small { font-size:0.64em; /* ~ 7px */ }


/* * Image Selection * */

#contentSelect {
	display:block;
	position:relative;
	margin:0;
	padding:0;
	width:38.18em; /* ~ 420px */
	clear:both;
}
#contentSelect.hide { visibility:hidden; }
#contentSelect a {
	position:relative;
	float:left;
	padding:0.27em 0.45em 0.64em 0; /* ~ 3px 5px 7px 0 */
}
#contentSelect a span {
	display:block;
	position:relative;
	float:left;
	margin:0;
	padding:0;
	width:0.91em; /* ~ 10px */
	height:0.91em; /* ~ 10px */
	background-color:rgb(128,128,128);
}
#contentSelect a.preload span { background:transparent url('vorladeAnimation.gif') center center repeat; }
#contentSelect a.selected span { background-color:rgb(0,0,0); }
#contentSelect a:hover span { background-color:rgb(0,0,0); }
#contentSelect a:active span { background-color:rgb(240,0,0); }


/* * Image Display * */

#contentDisplay {
	display:block;
	position:relative;
	margin:1.18em 0 0.73em 0; /* ~ 13px 0 8px 0 */
	width:38.18em; /* ~ 420px */
	height:32.68em; /* ~ 360px */
}

#contentWarning {
	position:absolute;
	margin-bottom:0.91em; /* ~ 10px */
	padding:0.91em; /* ~ 10px */
	top:0;
	width:36.364em; /* ~ 400px */
	background-color:rgb(245,235,171);
}

#contentHolder {
	display:none; /*display:block;*/
	margin:0;
}
#contentImage {
	width:38.18em; /* ~ 420px */
	height:32.68em; /* ~ 360px */
}

#contentOver {
	display:block; /* for some reason this must be display:block (insted of display:none) otherwise the mouseover won't show */
	position:absolute;
	margin:0;
	top:0;
	left:0;
	width:38.18em; /* ~ 420px */
	height:32.68em; /* ~ 360px */
}

#loadSign {
	display:none; /*display:block;*/
	position:absolute;
	margin:0;
	top:0;
	left:0;
	width:38em; /* ~ 418px */
	height:32.55em; /* ~ 358px */
	background:rgb(255,255,255) url('ladeAnimation.gif') center center no-repeat;
}