/* $Id$ */

/*/////////////////////////////////////////////////////////////////////////////
//	Stile für Administration ...
/////////////////////////////////////////////////////////////////////////////*/
.szene #highlight
{
	display: block;
	position: absolute;
	border: 2px dotted yellow;
	width: 20px;
	height: 20px;
	visibility: visible;
	float: none;
}

/*///////////////////////////////////////////////////////////////////////////*/
.szene
{
	position: relative;
	background-color: white;
	margin: 0;
	padding: 0;
}
.szene div.ebene
{
	display: block;
	margin: 0;
	padding: 0;
	height: 100%;
}

.szene div.ebene.aktiv
{
	background: url('../gfx/misc/dither.gif');
	background: url('../gfx/misc/opaque50.png') !important;
}

.szene div.ebene.inaktiv .hotspot
{
	display: none;
}

/*/////////////////////////////////////////////////////////////////////////////
//	Szene, Navigations-Schaltflächen
/////////////////////////////////////////////////////////////////////////////*/

.szene .buttons {
	position: absolute;
	bottom: 10px;
	left: 10px;
	font-size: 12px;
	font-weight: bold;
}

.szene .buttons button {
	width: 32px;
	height: 16px;
	text-align: center;
	background: #333;
	color: white;
	border: none;
}

.szene .buttons button:hover
{
	background-color: #666;
}

.szene .buttons .info {
	float: left;
	padding: 3px 20px 3px 20px;
	border: 1px solid #333;
	background-color: #333;
	color: #ccc;
	margin-right: 8px;
}

.szene .layer.aktiv .buttons {
	display: block;
}
.szene .layer.inaktiv .buttons {
	display: none;
}

/*/////////////////////////////////////////////////////////////////////////////
//	Folien
/////////////////////////////////////////////////////////////////////////////*/
.folie
{
	position: absolute;
	visibility: hidden;
}

/*/////////////////////////////////////////////////////////////////////////////
//	Hotspot, generelle Initalisierung
/////////////////////////////////////////////////////////////////////////////*/
.szene .layer {
	padding: 0px;
	margin: 0px;
}


.szene .hotspot
{
	width: 20px;
	height: 20px;
	display: block;
	text-decoration: none;
	position: absolute;
	z-index: 1;
}

.szene .hotspot:hover
{
	direction: ltr;
	z-index: 100;
}

.szene .hotspot .label
{
	position: absolute;
	font-size: 12px;
	font-weight: normal;
	text-decoration: none;
	visibility: hidden;
}

.szene .hotspot:hover .label
{
	visibility: visible;
	z-index: 500;
}

.szene .hotspot .label div
{
	padding: 4px;
	text-align: left;
	background: none;
	text-decoration: none;
	display: block;
}

.szene .hotspot img
{
	width: 100%;
	margin-bottom: -4px;
}

.szene .hotspot .label .title
{
	color: white;
	background: black;
	vertical-align: center;
	font-size: 12px;
	font-weight: bold;
	padding: 4px 4px 2px 4px;
}

.szene .hotspot .label .text
{
	color: black;
	font-weight: normal;
}


/*/////////////////////////////////////////////////////////////////////////////
//	Hotspot, Typ: "Info" -> Informationspopup
/////////////////////////////////////////////////////////////////////////////*/
.szene .hotspot.info:hover .label
{
	left: 20px;
	width: 200px;
	background: white;
}


/*/////////////////////////////////////////////////////////////////////////////
//	Hotspot, Typ: "Jump" -> Springen in die nächste Szene
/////////////////////////////////////////////////////////////////////////////*/
.szene .hotspot.jump
{
	border: 2px ridge white;
}

.szene .hotspot.jump .preview
{
	display: none;
}

.szene .hotspot.jump:hover .preview
{
	display: block;
	width: 100%;
	height: 100%;
}

.szene .hotspot.jump .label
{
	display: block;
	position: relative;
	left: 0px;
	top: 102%;
	width: 100%;
}

.szene .hotspot.jump .label
{
	/* immer zeigen! */
	display: block;
}

.szene .hotspot.jump:hover .label
{
	/* Abstände gleichsetzen */
	width: auto;
	left: 0px;
	display: none;
}

/*/////////////////////////////////////////////////////////////////////////////
//	Hotspot, Typ: "Image" -> Springt zu einer bestimmten Szene, ohne Vorschau
/////////////////////////////////////////////////////////////////////////////*/
.szene .hotspot.image:hover .label
{
	display: block;
	width: 200px;
	position: relative;
	left: 20px;
}

/*/////////////////////////////////////////////////////////////////////////////
//	Symbole für Hotspot-Typen "Info" & "Image"
/////////////////////////////////////////////////////////////////////////////*/
.szene .hotspot.default
{ background: transparent url('../gfx/tour/info.png') center center no-repeat; }
.szene .hotspot.default:hover
{ background-color: black; }

.szene .hotspot.arrow,
.szene .hotspot.arrow:hover
{ background: transparent url('../gfx/tour/arrow.png') center bottom no-repeat; }
.szene .hotspot.image
{ background: transparent url('../gfx/tour/auge.png') center center no-repeat; }
.szene .hotspot.image:hover
{ background: url('../gfx/tour/auge.png') center center no-repeat; }
.szene .hotspot.nordicwalking,
.szene .hotspot.nordicwalking:hover
{ background: transparent url('../gfx/tour/nordicwalking.png') center center no-repeat; }
.szene .hotspot.mountainbike,
.szene .hotspot.mountainbike:hover
{ background: transparent url('../gfx/tour/mountainbike.png') center center no-repeat; }
.szene .hotspot.seilbahn,
.szene .hotspot.seilbahn:hover
{ background: transparent url('../gfx/tour/seilbahn.png') center center no-repeat; }
.szene .hotspot.huette,
.szene .hotspot.huette:hover
{ background: transparent url('../gfx/tour/huette.png') center center no-repeat; }
.szene .hotspot.wandern,
.szene .hotspot.wandern:hover
{ background: transparent url('../gfx/tour/wandern.png') center center no-repeat; }

.szene .hotspot.tagung,
.szene .hotspot.tagung:hover
{ background: transparent url('../gfx/tour/tagung.png') center center no-repeat; }


.szene .hotspot.open
{ background-color: #0b1; }
.szene .hotspot.closed
{ background-color: #b01; }

.szene .hotspot.open:hover
{ background-color: #000; }
.szene .hotspot.closed:hover
{ background-color: #000; }


/*/////////////////////////////////////////////////////////////////////////////
//	Label: Tabellen für Metadaten...
/////////////////////////////////////////////////////////////////////////////*/
.szene .hotspot:hover .label .text table {
	border-collapse: collapse;
	border: 0;
	margin: 0;
	padding: 0;
	color: black;
}

.szene .hotspot:hover .label .text table td {
	font-size: 11px;
	vertical-align: top;
	padding: 2px 4px 2px 4px;
}

.szene .hotspot:hover .label .text table td.name {
	color: #888;
	width: 50px;
	font-weight: bold;
}