body { font-family: Verdana, Arial, Helvetica, sans-serif;
	 text-align: center; 
}

div#info { 
	position:relative;
	width:1000px;
	height:800px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}

/* top navigation container */
#topnavigation  {
	display: block;
	height: 110px;
	width: 1000px;
	position: absolute;
	background-image: url(../images/header_bg.jpg);
	background-repeat: repeat-x;
}

#topnavigation p.baseline { 
	position:relative;
	margin-top: 10px;
	left: 12px;
	font-size: 24px;
	color: #fff;	
	
}
/* top menu */
#topnavigation ul {
	position:absolute;
	top: 5px;
	left: 370px;
	font-size: 16px;
	text-align: left;
	list-style-type: none;
}

#topnavigation li {
	display: inline;		/* Changes list items from block to inline elements so that links flow side by side. */
}

#topnavigation li a:link, #topnavigation li a:visited {
	color: #000;	
	text-decoration: none;
	margin-right: 14px;		/* Adds space to the right of each list item. */
	margin-left: 14px;		/* Adds space to the left of each list item. */
}

#topnavigation li a:hover, #topnavigation li a:active, #topnavigation li a:focus {
	color: #00F;
	text-decoration:underline/* Changes text color of links to blue on hover, activation, and focus. */
}

.bildlegende {
	position: absolute;
	left: -3000px;
}



/* Image allsamples visible in home page when hovering not active, i.e. at p0 */
#index-wallpaper  { 
	position: absolute;
	top:-17px; right:0px;
	width: 700px;
	height: 687px; 
	background-image: url(../images/allsamples.jpg);
	background-repeat: no-repeat;
}

/* Image openair visible when hovering in Diabelichtung not active, i.e. at p0 */
#dias-wallpaper  {
	position: absolute;;
	top: -17px;
	width: 1000px;
	height: 680px; 
	background-image: url(../images/openair.png);
	background-repeat: no-repeat;
}

/* Image Jelmoli visible when hovering in foto & EBV is not active, i.e. at p0 */
#foto-wallpaper  { 
	position: absolute;
	top: -17px;
	width: 1000px;
	height: 680px;
	background-image: url(../images/Jelmoli-7676x.png);
	background-repeat: no-repeat;
}

/* Claim text visible when hovering in team is not active, i.e. at p0 */
#team-wallpaper {
	position:absolute;
	top:-17px;
	width:667px;
	height:500px;
	font-size: 20px;
}

/* Image Kontakt visible when hovering in Kontakt not active, i.e. at p0 CHANGE */
#kontakt-wallpaper {
	position:absolute;
	top:-17px;
	width:1000px;
	height:650px;
	background-image:url(../images/kontaktSplash.png);
	background-repeat: no-repeat;
}

/* Container with viewport (overflow: hidden) for the contents stacked below */
#synopsis { 
	position: relative;
	z-index:500;
	width:1000px;
	height:690px;
	top: 110px;
	overflow:hidden;
	text-align:left;
}

/* next style: not active, commented case IE6 */
#synopsis table {border-collapse:collapse; margin:-1px;}

/* default setting for list of menu items */
#synopsis ul#outer {
	background:transparent;
	list-style:none;
}

#synopsis ul#outer li.page {display:inline;} /* needed for IE to function correctly */

/* menu item texts: links without underline */
#synopsis ul#outer li.page a.menuitem {text-decoration:none;}

/* vertical menu item texts defaults */
#synopsis ul#outer li.page i {
	position:absolute;
	display:block;
	height:25px;
	right:740px;
	background:transparent;
	z-index:100;
	text-align:right;
	text-decoration:none;
	color:white;
	font-style:normal;
	cursor:pointer;
	font-size: 16px;
	line-height: 20px;
}

/* vertical positions of those menu items */
#synopsis ul#outer li.p1 i {top:53px;}
#synopsis ul#outer li.p2 i {top:188px;}
#synopsis ul#outer li.p3 i {top:323px;}
#synopsis ul#outer li.p4 i {top:458px;}
#synopsis ul#outer li.p5 i {top:593px;}

/* common style for details division, size is 1000 x 800 px. so the following pages are stacked below the viewframe */
#synopsis ul#outer li.page .details {
	display:block;
	width:1000px;
	height:690px;
	font-weight:normal;
	background-color:#666;
	padding:25px;
	background-image: url(../images/sepline.gif);
	background-position: 273px -5px;
	background-repeat: no-repeat;
	z-index:30;
}

/* forces list provoked offset of details back to 0/0 when no hovering is active */
#synopsis ul#outer li.p0 .details { 
	position:absolute; 
	left:0px;
	top:0px;
}

/* page title   */   /*improve! */
#synopsis ul#outer li .details h2 {
	line-height:19px;
	color:white;
	font-size:16px;
	font-weight:normal;
	margin-left:10px;
	position:absolute;
	top:150px;
	width: 600px;
}

/* same as above but without left float */  /*improve! */
#synopsis ul#outer li .details h3.clear {
	clear:left;
}

/* default for linked texts inside details */
#synopsis ul#outer li .details a {
	color:#00f;
	text-decoration:underline;
}

/* container for menu item's sweeped backgrounds */
#synopsis ul#outer li .details em  {
	display: block;
	float:left;
	width: 280px;
	height: 690px;
	background: transparent url(../images/hoverback.png) no-repeat;
	margin-right: 20px;
	margin-left: -26px;

}

/* vertical positions of those backgrounds */
#synopsis ul#outer li.p1 .details em {background-position: 0px 7px;}
#synopsis ul#outer li.p2 .details em {background-position: 0px 142px;}
#synopsis ul#outer li.p3 .details em {background-position: 0px 277px;}
#synopsis ul#outer li.p4 .details em {background-position: 0px 412px;}
#synopsis ul#outer li.p5 .details em {background-position: 0px 547px;}

/* Container for page details */
#synopsis ul#outer li .page-intro {
	position:absolute;
	float:left;
	left:280px;
	width:667px;
	height:690px;
	display: block;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 55px;
}

/* Container for foto details */
#synopsis ul#outer li .foto-details {
	position:absolute;
	float:left;
	left:280px;
	width:667px;
	height:690px; 
	margin-top: -15px;
	display: block;
	padding-left: 33px;
	font-size:19px;	
	color:white;
	font-weight: normal;
}

#synopsis ul#outer li .foto-details ul li {	
	margin-top: 20px;
	margin-left:-22px;
	color:white;
	font-size:17px;
	line-height:22px;
}

/* Container for team details */
#synopsis ul#outer li .team-details {
	position:absolute;
	float:left;
	left:280px;
	width:667px;
	height:690px;
	margin-top: -15px;
	display: block;
	padding-left: 33px;
	background:#666;
	font-size:14px;	
	color:white;
	font-weight: normal;
}

#synopsis ul#outer li .team-details ul li {	
	margin-top: 0px;
	margin-left:-20px;
	font-size:14px;	
	color:white;
	font-weight: normal;
}

#synopsis ul#outer li .team-details li { 
	margin-bottom:10px;
}

/* Container for dias details */
#synopsis ul#outer li .dias-details {
	position:absolute;
	float:left;
	left:280px;
	width:650px;
	display: block;
	padding-top: 20px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 55px;
	background: #666;
}

#synopsis ul#outer li .dias-details h3 { 
	color:white; 
	font-weight: normal;
}

#synopsis ul#outer li .dias-details h4 { 
	margin-top:-15px;
	color:white;
	font-weight: normal;
}

#synopsis ul#outer li .dias-details #diatable {
	font-size: 14px;
	color:white;
	font-weight: normal;
	line-height: 16px;
}

#synopsis ul#outer li .dias-details #diatable tr.rowsa {
	background-color: #333;
	padding-top: 4px;
}

#synopsis ul#outer li .dias-details #diatable tr.rowsa:hover  {
	background-color: #096;
	font-size: 15px;
}

#synopsis ul#outer li .dias-details #diatable tr.rowsb {
	background-color: #333;
}

#synopsis ul#outer li .dias-details #diatable tr.rowsb:hover  {
	background-color: #B00;
	font-size: 15px;
}

/* Thumbs & hover at the top */
ul.gallery, ul.gallery li{
			margin:0;
			padding:0;
			list-style:none; margin-left:25px;
			}
ul.gallery{
			margin-left:-10px; margin-top:0px;
			width:670px;
			height:600px;
			position:relative;
			background:none;
			}			
ul.gallery li{
			float:left;
			display:inline;
			margin-top:0;
			}			
ul.gallery img{
			float:left; border:none;
			}
ul.gallery a span{
			display:none;
			}
ul.gallery a:hover{
			background:none;
			}	
ul.gallery a:hover span{
			position:absolute;
			width:650px;
			height:438px;
			float:left;
			top:120px;
			left:10px;
			display:block; 
			z-index:5;
			}	
			
/* Additional thumbs with no hover at the bottom */
ul.gallery1, ul.gallery1 li{
			margin:0;
			padding:0;
			list-style:none; margin-left:25px;
			}
ul.gallery1{
			margin-left:-10px; margin-top:-210px;
			width:650px;
			height:600px;
			position:relative;
			background:none;
			}			
ul.gallery1 li{
			float:left;
			display:inline;
			margin-top:0;
			}			
ul.gallery1 img{
			float:left; border: none;
			}
		
/* removes underline in page text links  */
#synopsis ul#outer li.page .details a:hover {text-decoration:none;}
#synopsis ul#outer li.page a:hover {white-space:normal;} /* for IE6 */

/* hovering over a vertical menu text brings the corresponding details into the viewport 
and since it is now in focus, it will remain visible as long as the cursor remains inside the viewport. */ 
#synopsis ul#outer :hover .details { position:absolute; left:0px; top:0px;}

/* vertical navigation item texts when moused over */
#synopsis ul#outer a:hover i {color:#8dcdfa; font-weight:bold;} /* for IE6 */
#synopsis ul#outer :hover a i {color: #8dcdfa; font-weight:bold;}
#synopsis ul#outer a:hover i img {visibility: hidden;} /* for IE6 */
#synopsis ul#outer :hover a i img {visibility: hidden;}