/******************************************************/
/*
/* 	WHAT THE MOVIE
/*	Stylesheet Document
/* 	Copyright (c) 2008 NTDEV.de
/*
/*	Unauthorized copying is not allowed and will be
/*	punished by an appropriate agent. In this case
/*	by an honorable fellow... me
/*
/******************************************************/


/* Normalizing and basic stuff
------------------------------------------------------*/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td {
	margin: 0;
	padding: 0;
	}

h1, h2, h3, h4, h5, h6 {
	font-size: 100%;
	}

ol, ul {
	list-style: none;
	}

table {
	border-spacing: 0;
	}

fieldset, img {
	border: 0;
	}
	
caption, th {
	text-align: left;
	}	
	
a {
	outline: none;
	color: black;
	text-decoration: underline;
	}
	a:hover {
		color: black;
		}	
	
.left {
	float: left;
	}
.right {
	float: right;
	}	
	
.clearer {
	clear: both;
	height: 0%;
	_height: auto;
	}
	
.no_style {
	display: none;
}

.last {
	background: none !IMPORTANT;
	margin-right: 0 !IMPORTANT;
}

hr {
	height:1px;
	border: none;
	border-bottom: 1px solid #000;
	margin: 20px 0px;
	}



* {
	margin: 0;
	padding: 0;
}

* html .clearfix {
	height: 1%;
}

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}




/* base
------------------------------------------------------*/


html {
	height:100%; 
}

body {
	font: 70%/1.6em Georgia, serif;
	height: 100%;
	color: #000;
	background: url(../img/body_bg.gif) no-repeat top center;	
}

/* main
------------------------------------------------------*/

#container {
	position: relative;
	min-height: 100%;
	width: 100%;
}

#footer {
	position: absolute;
	bottom: 5px;	
	height: 20px;
	left: 50%;
	margin-left: -455px;
	width: 910px;
}
	#footer a {
		text-decoration: none;
	}
	#footer a:hover {
		text-decoration: underline;
	}
	#footer .linklist_horizontal {
		padding-bottom: 0;
	}
	

#main {
	width: 910px;
	margin: 0 auto;
	position: relative;
	padding: 50px 20px 60px 20px;
}
	
	#head {
		margin-bottom: 18px;
		position: relative;
		height: 57px;
	}

	#rrrr_logo {
		
	}
	

	
		
	#nav_main {
		position: absolute;
		right: 0;
		bottom: -5px;
		height: 25px;
		cursor: pointer;
	}
		#nav_main li {
			height: 25px;
			float: left;
			text-indent: -10000px;			
		}
		#nav_main li.start a {
			height: 100%;
			display: block;
			width: 41px;
			background: url(../img/nav_start_bg.gif);	
				
		}
			#nav_main li.start a:hover {
				background: url(../img/nav_start_bg.gif) 0 25px;
				
			}
		#nav_main li.labs a {
			height: 100%;
			display: block;
			width: 43px;
			background: url(../img/nav_labs_bg.gif);
		}
			#nav_main li.labs a:hover {
				background: url(../img/nav_labs_bg.gif) 0 25px;
			}
		#nav_main li.portfolio a {
			height: 100%;
			display: block;
			width: 74px;
			background: url(../img/nav_portfolio_bg.gif);
		}
			#nav_main li.portfolio a:hover {
				background: url(../img/nav_portfolio_bg.gif) 0 25px;
			}
		#nav_main li.about a {
			height: 100%;
			display: block;
			width: 47px;
			background: url(../img/nav_about_bg.gif);
		}
			#nav_main li.about a:hover {
				background: url(../img/nav_about_bg.gif) 0 25px;
			}	
			
			
	#content_main {
		
	}
	
	#content_top {
		z-index: 10;
		position: relative;
		margin-bottom: 20px;
	}
	
	#content_top a {
		position: absolute;
		width: 890px;
		height: 230px;
		background: url(../img/trans.gif);
		border: 10px solid transparent;
		_margin: 10px;
		_border: none;
		display: block;
		text-indent: -7777px;
		top: 0;
		left: 0;		
	}
	#content_top a:hover {
		border: 10px solid black;
		opacity: .2;
		filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20, FinishOpacity=20, Style=2)";
		filter:alpha(opacity=20);
		_margin: 0;
	}
	
	.scrollteaser li, .scroller4_li {
		width: 290px;
		overflow: hidden;
		position: relative;
	}
	
	.scrollteaser img, .scroller4_li .linklist_teaser {
		float: left;
	}
	
	.scrollteaser li span {
		display: block;
		width: 290px;
		height: 420px;
		float: left;
	}
	
	.scrollteaser li div, #scroller4 {
		width: 20000px;
		position: relative;
	}
	
	#various_nav {
		margin-top: 20px;
	}
	
	#various_nav li {
		width: 290px;
		float: left;
		position: relative;
		margin-right: 20px;
	}
		#various_nav li a.nav {
			text-indent: -10000px;
			display: block;
			width: 290px;
			height: 86px;
		}
		
		
		
		#various_nav li a.previous {
			background: url(../img/various_arrow_prev.gif) no-repeat top left;
			float: left;
		}
		#various_nav li a.next {
			background: url(../img/various_arrow_next.gif) no-repeat top right;
			float: right;
		}
		#various_nav li a.previous:hover {
			background: url(../img/various_arrow_prev.gif) no-repeat bottom left;
		}
		#various_nav li a.next:hover {
			background: url(../img/various_arrow_next.gif) no-repeat bottom right;
		}	
			
	
	#teaser li {
		width: 290px;
		float: left;
		position: relative;
		min-height: 10px;
	}
		#teaser li {
			margin-right: 20px;
		}
		#teaser h4.noblog {
			background: url(../img/h4_no_said.gif) no-repeat left;
		}
		#teaser h4.yesblog {
			background: url(../img/h4_yes_said.gif) no-repeat left;
		}
		#teaser h4.thingswedid {
			background: url(../img/h4_thingswedid.gif) no-repeat left;
		}
		
		#teaser h3 {
			margin-top: 5px;
		}
		
		#teaser li img {
		
		}
		
		#teaser li a.border {
			position: absolute;
			width: 270px;
			height: 110px;
			background: url(../img/trans.gif);
			border: 10px solid transparent;
			_margin: 10px;
			_border: none;
			display: block;
			text-indent: -7777px;
			top: 0;
			left: 0;
			width: 270px;
			height: 110px;		
		}
		#teaser li a.border:hover {
			border: 10px solid black;
			opacity: .2;
			filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20, FinishOpacity=20, Style=2)";
			filter:alpha(opacity=20);
			_margin: 0;
		}
		#teaser li p {
			margin-bottom: 3px;
		}
		a.link {
			text-decoration: none;
			padding-bottom: 1px;
			border-bottom: 1px solid #CCC;
		}
		 a.link:hover {
			background: none;
			color: #CC0000;
			border-bottom: none;
		}
		
		.teaser_list {
			margin-bottom: 20px;
		}
		
		.teaser_list li {
			width: 290px;
			float: left;
			position: relative;
			min-height: 10px;
			margin-right: 20px;
		}	
		
		.teaser_list .linklist_teaser {
			margin-bottom: 0 !IMPORTANT;
		}
	
	#content_right {
		float: right;
		width: 290px;
	}
	
	#content_right img {
		margin-bottom: 20px;
	}	
		
	
		
	#linklist_teaser {
		margin: 0 0 30px 0;	
		width: 290px;
		float: left;
	}
	
		#linklist_teaser ul {
			border-top: 1px solid #e5e5e5;
			margin-top: 10px;
		}
		#linklist_teaser ul li {
			border-bottom: 1px solid #e5e5e5;
			padding: 3px 0;
			behavior: url('IEFixes.htc');
		}
			#linklist_teaser ul li:hover {
				background: #F7F8F8;
			}
		
			#linklist_teaser ul li a {
				color: #CC0000 !IMPORTANT;		
				text-decoration: none;
			}
		
			.linklist_start a {
				color: black !IMPORTANT;	
				text-decoration: none;
			}
			
			#linklist_teaser ul li a:hover {	
				color: black !IMPORTANT;
				text-decoration: underline;
			}
			#linklist_teaser ul li.over {
				background: #f7f8f8;
			}

	.linklist_teaser {
		margin: 0 0 30px 0;	
		width: 290px;
		float: left;
	}
		.linklist_teaser h2 {
			padding-left: 1px;
		}
		.linklist_teaser ul {
			border-top: 1px solid #e5e5e5;
			margin-top: 10px;
		}
		.linklist_teaser ul li {
			border-bottom: 1px solid #e5e5e5;
			padding: 3px 0;
			behavior: url('IEFixes.htc');
		}
			.linklist_teaser ul li:hover {
				background: #F7F8F8;
			}

			.linklist_teaser ul li a {
				color: black !IMPORTANT;		
				text-decoration: none;
			}
			.linklist_teaser ul li a:hover {	
				color: #CC0000 !IMPORTANT;
			}
			.linklist_teaser ul li.over {
				background: #f7f8f8;
			}
	
	#content_bottom {
		float: left;
		width: 930px;
		position: relative;
	}		
			
	#content_bottom img {
		margin-right: 20px;
		margin-bottom: 20px;
		float: left;
	}
	
	#content_bottom #linklist_teaser {
		margin-right: 20px;
	}
			
	.content_left {
		float: left;

		width: 600px;
	}
		#content_main h2 {
			margin-bottom: 15px;
			width: 290px;
			
			
		}
		#content_main p {
			margin-bottom: 7px;
		}
		.content_left img {
			float: right;
			margin-left: 20px;
			margin-bottom: 20px;
		}
		
	.linklist_horizontal {
		padding-bottom: 20px;
	}	
	
	.linklist_horizontal li {
		display: inline;
		padding-right: 12px;
		background: url(../img/linklist_horizontal_dot.gif) no-repeat bottom right;
	}
	
	.linklist_horizontal a {
		text-decoration: none;
		padding-bottom: 1px;
		border-bottom: 1px solid #CCC;
	}
	 .linklist_horizontal a:hover {
		background: none;
		color: #CC0000;
		text-decoration: none !IMPORTANT;
		border-bottom: none;
	}
	
	
	
	
	#project_view {
		position: relative;
	}
		#project_view li.project {
			position: absolute;
			
			overflow: hidden;
		}		
			
				#project_view li.project a:hover {
					background-position: bottom !IMPORTANT;
				}
				#project_view li.project .tooltip:hover {
					background-position: bottom !IMPORTANT;
				}
				
				li.project:hover img {
					position: absolute;
					bottom: 0;
				}
				
		#project_view li.zwei_eins {
			height: 166px;
			width: 352px;
		}
		
		#project_view li.eins_eins {
			height: 166px;
			width: 166px;
		}
		
		#project_view li.zwei_zwei {
			height: 352px;
			width: 352px;
		}
		
		#project_view li.eins_zwei {
			height: 352px;
			width: 166px;
		}
		
		li.project a {
			position: absolute; 
			z-index: 100; 
			width: 100%; 
			height: 100%;
		}
		
		

		
		#download_center {
				position: absolute;
				width: 100%;
				height: 28px;
				left: 0;
				top: 0;
				background: black;
				overflow: hidden;
				padding: 7px 10px 10px 10px;
				z-index: 10;
			}
				h4 a {
					color: white;
					font-weight: bold;
					display: block;
					width: 100%;
				}

				h4 {
					height: 16px;
				}

				#download_center p {
					text-decoration: none;
					color: white;
				}
				
				.tooltip {
					display: none;
					position: absolute;
					bottom: 0;
					z-index: 50;
					width: 100%;
					color: white;
					background: url(/rrrr/img/project_tooltip_bg.png);
				}
				
				.tooltip p {
					padding: 5px 10px 5px 10px;
				}
				
				
				.read .tooltip {
					display: block;
				}
				
				.projectname {
					background: white;
					padding: 0px 5px 1px 5px;
					position: absolute;
				}
				
				
				#FragmentHtml {
					width: 320px;
					height: 320px;
				}