/** 
	  * -----=== websimplex ===-----
	  * JS Panorama - dreht und zoomt ein Panoramafoto
	  * 
	  * @author: Wido Widlewski <wido@websimplex.de>
	  * 
	  * 
	  * Dateien: jspan.js, jspan.css, jspan.html
	  */

	body {
		background-color: #333333;
		text-align: center;
		padding: 0px 0px 0px 0px;
		margin: 0px;
		overflow: hidden;
		font-family: verdana, arial, helvetica, sans-serif;
		color: #FFFFFF;
		font-size: 10px;
	}
	
	a.bewegung_rechts {
		cursor: e-resize
	}
	
	a.bewegung_links{
		cursor: w-resize
	}
	
	#buehne {
		background: #333333;
		margin: 0 auto;
		z-index: 0;
		overflow: hidden;
	}
	
	#foto {
		background: #333333;
		z-index: 1;
		position: absolute;
		/*left: 100px;*/
		left: 50px;
	}
	
	#foto h1 {
		color: #FFFFFF;
		font-weight: bold;
		padding: 50px 0px 0px 200px;
	}
		
	
	#logo {
		position: absolute;
		top: 60px;
		/*right: 110px;*/
		right: 60px;
		z-index: 5;
	}
		
		
	#ecke_ol, #ecke_or, #ecke_ur, #ecke_ul {
		position: absolute;
		z-index: 60;
		width: 20px;
		height: 20px;
	}	
	
	#ecke_ol {
		top: 50px;
		left: 100px;
		left: 50px;
		/*background: url(design/ecke_ol.png) no-repeat top left;*/
	}
	
	#ecke_or {
		top: 50px;
		right: 100px;
		right: 50px;
		/*background: url(design/ecke_or.png) no-repeat top left;*/
	}
		
	#ecke_ur {
		top: 330px;
		right: 100px;
		right: 50px;
		/*background: url(design/ecke_ur.png) no-repeat top left;*/
	}
	
	#ecke_ul {
		top: 330px;
		left: 100px;
		left: 50px;
		/*background: url(design/ecke_ul.png) no-repeat top left;*/
	}
	
	#panorama_titel	{
		position: absolute;
		z-index: 75;
		text-align: center;
		top: 0px;
		right: 100px;
		right: 50px;
	}
	
	#panorama_titel h1 {
		padding: 15px 0px 10px 0px;
		margin: 0px;
		color: #f8c039;
		line-height: 125%;
		font-size: 19px;
		font-family: georgia, verdana, arial, helvetica, sans-serif;
		font-style: italic;
		font-weight: normal;
	}
	
	#linker_rand {
		background: #333333;
		float: left;
		width: 100px;
		width: 50px;
		height: 1200px;
		position: absolute;
		top: 0px;
		left: 0px;
		z-index: 20;
	}
	
	
	#rechter_rand {
		background: #333333;
		float: right;
		width: 100px;
		width: 50px;
		height: 1200px;
		position: absolute;
		top: 0px;
		right: 0px;
		z-index: 20;
		
	}
	
	#oberer_rand {
		position: absolute;
		width: 100%;
		top: 0px;
		height: 50px;
		left: 0px;
		right: 0px;
		background: #333333;
		z-index: 11;
	}
	
	
	#unterer_rand {
		position: absolute;
		width: 100%;
		left: 0px;
		right: 0px;
		/*margin: 0px 100px 0px 100px;*/
		margin: 0px 50px 0px 50px;
		background: #333333;
		height: 1000px;
		z-index: 12;
		top: 350px;
	}
	
	/* linke drehflaechen */
	
	#linke_flaeche_1, #linke_flaeche_2, #linke_flaeche_3, #linke_flaeche_4, #linke_flaeche_5 {
		position: absolute;
		float: left;
		background: #FFFFFF;
		z-index: 30;
		cursor: w-resize;
		top: 50px;
		height: 300px;
	}
	
		
	#linke_flaeche_1 {
		opacity: 0.2;
		filter:alpha(opacity=20);
		opacity: 0;
		filter:alpha(opacity=0);
		width: 50px;
		left: 350px;
		left: 300px;
	}
	
	#linke_flaeche_2 {
		opacity: 0.3;
		filter:alpha(opacity=30);
		opacity: 0;
		filter:alpha(opacity=0);
		width: 50px;
		left: 300px;
		left: 250px;
	}
	
	#linke_flaeche_3 {
		opacity: 0.4;
		filter:alpha(opacity=40);
		opacity: 0;
		filter:alpha(opacity=0);
		width: 50px;
		left: 250px;
		left: 200px;
	}
	
	#linke_flaeche_4 {
		opacity: 0.5;
		filter:alpha(opacity=50);
		opacity: 0;
		filter:alpha(opacity=0);
		width: 50px;
		left: 200px;
		left: 150px;
	}
	
	#linke_flaeche_5 {
		opacity: 0.6;
		filter:alpha(opacity=60);
		opacity: 0;
		filter:alpha(opacity=0);
		width: 110px;
		left: 90px;
		left: 40px;
	}
	
	
	/* rechte drehflaechen */
	
	#rechte_flaeche_1, #rechte_flaeche_2, #rechte_flaeche_3, #rechte_flaeche_4, #rechte_flaeche_5 {
		position: absolute;
		background: #FFFFFF;
		float: right;
		height: 300px;
		z-index: 30;
		cursor: e-resize;
		top: 50px;
	}
		
	#rechte_flaeche_1 {
		opacity: 0.2;
		filter:alpha(opacity=20);
		opacity: 0;
		filter:alpha(opacity=0);
		width: 50px;
		right: 350px;
		right: 300px;
	}
	
	#rechte_flaeche_2 {
		opacity: 0.3;
		filter:alpha(opacity=30);
		opacity: 0;
		filter:alpha(opacity=0);
		width: 50px;
		right: 300px;
		right: 250px;
	}
	
	#rechte_flaeche_3 {
		opacity: 0.4;
		filter:alpha(opacity=40);
		opacity: 0;
		filter:alpha(opacity=0);
		width: 50px;
		right: 250px;
		right: 200px;
	}
	
	#rechte_flaeche_4 {
		opacity: 0.5;
		filter:alpha(opacity=50);
		opacity: 0;
		filter:alpha(opacity=0);
		width: 50px;
		right: 200px;
		right: 150px;
	}
	
	#rechte_flaeche_5 {
		opacity: 0.6;
		filter:alpha(opacity=60);
		opacity: 0;
		filter:alpha(opacity=0);
		width: 110px;
		right: 90px;
		right: 40px;
	}
	
	
	/* Bewegung nach oben */
	
	
	#obere_flaeche_1 {
		position: absolute;
		width: auto;
		opacity: 0.3;
		filter:alpha(opacity=30);
		opacity: 0;
		filter:alpha(opacity=0);
		top: 40px;
		margin: 0 auto;
		text-align: center;
		background: #FFFFFF;
		z-index: 40;
		/*left: 250px;*/
		left: 200px;
		/*right: 250px;*/
		right: 200px;
		height: 60px;
		cursor: n-resize;
	}
	
	#obere_flaeche_2 {
		position: absolute;
		width: auto;
		opacity: 0.2;
		filter:alpha(opacity=20);
		opacity: 0;
		filter:alpha(opacity=0);
		top: 100px;
		margin: 0 auto;
		text-align: center;
		background: #FFFFFF;
		z-index: 40;
		/*left:300px;*/
		left: 250px;
		/*right: 300px;*/
		right: 250px;
		height: 25px;
		cursor: n-resize;
	}
	
	/* Bewegung nach unten */
	
	#untere_flaeche_1 {
		position: absolute;
		width: auto;
		opacity: 0.3;
		filter:alpha(opacity=30);
		opacity: 0;
		filter:alpha(opacity=0);
		top: 300px;
		margin: 0 auto;
		text-align: center;
		background: #FFFFFF;
		z-index: 40;
		/*left: 250px;*/
		left: 200px;
		/*right: 250px;*/
		right: 200px;
		height: 60px;
		cursor: s-resize;
	}
	
	#untere_flaeche_2 {
		position: absolute;
		width: auto;
		opacity: 0.2;
		filter:alpha(opacity=20);
		opacity: 0;
		filter:alpha(opacity=0);
		top: 275px;
		margin: 0 auto;
		text-align: center;
		background: #FFFFFF;
		z-index: 40;
		/*left: 300px;*/
		left: 250px;
		/*right: 300px;*/
		right: 250px;
		height: 25px;
		cursor: s-resize;
	}
	
	
	#zoom_in {
		position: absolute;
		top: 375px;
		/*left: 100px;*/
		left: 50px;
		width: 49px;
		height: 49px;
		z-index: 50;
		/*background: url(plus_knopf.png) no-repeat top left;*/
		cursor: pointer;
		/*filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=plus_knopf.png, sizingMethod=scale);*/
		
	}
	
	
	#zoom_out {
		position: absolute;
		top: 375px;
		/*left: 175px;*/
		left: 125px;
		width: 49px;
		height: 49px;
		z-index: 50;
		/*background: url(minus_knopf.png) no-repeat top left;*/
		cursor: pointer;
	}
	
	#play {
		position: absolute;
		top: 375px;
		/*left: 250px;*/
		left: 200px;
		width: 49px;
		height: 49px;
		z-index: 50;
		/*background: url(play_knopf.png) no-repeat top left;*/
		cursor: pointer;
	}
	
	#reset {
		position: absolute;
		top: 375px;
		/*left: 325px;*/
		left: 275px;
		width: 49px;
		height: 49px;
		z-index: 50;
		/*background: url(reset_knopf.png) no-repeat top left;*/
		cursor: pointer;
	}
	
	#beschreibung {
		position: absolute;
		width: 300px;
		/*left: 100px;*/
		left: 50px;
		top: 435px;
		z-index: 50;
		
	}
	
	#beschreibung p {
		font-size: 12px;
		color: #f8c039;
		line-height: 150%;
		text-align: left;
		padding: 0px 0px 10px 0px;
		margin: 0px;
	}
	
	#daten, #status {
		position: absolute;
		z-index: 60;
		background: #FFFF00;
		top: 400px;
		left: 600px;
		width: 200px;	
	}
	
	#status {
		left: 800px;
		top: 500px;
		width: 100px;
	}
	
	#auflistung {
		position: absolute;
		top: 375px;
		/*right: 100px;*/
		right: 50px;
		height: 250px;
		z-index: 60;
	}
	
	#auflistung ul {
		padding: 0px;
		margin: 0px;
		list-style: none;
	}
	
	#auflistung li {
		width: 200px;
		padding: 0px;
		border: 1px solid #000000;
		margin: 0px 0px 2px 0px;
	}
	
	#auflistung li a:link,
	#auflistung li a:visited {
		display: block;
		font-size: 12px;
		background: #d59604 url(design/auflistung_hintergrund.gif) repeat-x top;
		color: #FFFFFF;
		text-decoration: none;
		padding: 5px 10px 5px 10px;
	}
	
	#auflistung li a:hover {
		background: #f8ce68;
		color: #1b1a18;
		padding: 5px 10px 5px 10px;
	}