/* CSS Document */
html,body{
margin:0;
padding:0;
height: 100%; /* WICHTIG!!! STRECKT ANZEIGENBEREICH AUF 100% */
overflow:hidden;}
body{
font:76% Verdana;
text-align:left;
color:#444444;
overflow:hidden;
}
p{  

}
p#rechts{  

}
a:link {  
color:#444444; 
text-decoration:none;
}
a:visited {  
color:#444444; 
text-decoration:none;
}
a:hover {
color: #ff0099;
text-decoration:none;
}
a:active {
	color: #ff0099;
	text-decoration:none;
}


img.bg {
	/* Hintergrund fuellen */
	min-height: 100%;
	min-width: 1024px;
	/* Skalieren */
	width: 100%;
	height: auto;
	/* feste Positionierung */
	position: fixed;
	top: 0;
	left: 0;
	}
img {
    border: 0 none;
}
img#vita-bild {
    display:inline;
}
img#musik-bild {
    display:none;
}
ul.playlist {
list-style:none; margin:0; padding:0;
    }
td#navi1-over{
display:none;
    }
td#navi1{
display:table-cell;
    }
td#navi2-over{
display:table-cell;
    }
td#navi2{
display:none;
    }
td#navi3-over{
display:table-cell;
    }
td#navi3{
display:none;
    }
td#navi4-over{
display:table-cell;
    }
td#navi4{
display:none;
    }
td#navi5-over{
display:table-cell;
    }
td#navi5{
display:none;
    }
div#container {
position: relative;
margin-left:0px;
margin-top:0px;
height:100%;
font-size:11px;
line-height:17px;
overflow:hidden;
z-index:5;
}
div#container2 {
position: absolute;
margin-left:0px;
margin-top:0px;
height:100%;
font-size:11px;
line-height:17px;
overflow:hidden;
z-index:5;
}
div#navigation {
background:url("images/navi-bg.png");
width:415px;
height:147px;
margin-left:0px;
margin-top:0px;
z-index:7;
position:absolute;
}
div#content {
background:url("images/content-bg.png");
width:415px;
min-height: 100%; /* Mindesthöhe für moderne Browser */
height:auto !important; /* Important Regel für moderne Browser */ 
height:100%; /* Mindesthöhe für den IE */ 
margin-left:0px;
margin-top:0px;
z-index:6;
position:absolute;
overflow:hidden;
}
div#vita-navi{
margin-top:190px;
position:absolute;
z-index:7;
}

div#wn1	{ 
	margin-top:250px;
	margin-left:14px;
	position:relative;
	width:400px; 
	height:300px; 
	overflow:hidden;
	}

div#scrollbar	{ 
	margin-top:0px;
	float:right;
	width:25px;
	position:relative;
   	height:300px; 
  	font-size:1px;
	visibility:visible;/* for image vertical alignment issue */
  }
 div.scrollbar	{ 
	margin-top:30px;
	float:right;
	width:25px;
	position:relative;
   	height:300px; 
  	font-size:1px; 
	visibility:hidden;/* for image vertical alignment issue */
  }
div#track { 
  position:absolute; left:0; top:30px;
  width:30px; height:295px;
 
  }
div#dragBar {
  position:absolute; left:11px; top:31px;
  width:9px; 
  height:100px;
  }  
 

div#up1 { position:absolute; left:0; top:0; z-index:2;}  
div#down1 { position:absolute; left:0; bottom:0; z-index:2; }

/* for safari, to prevent selection problem  */
div#scrollbar, div#track, div#dragBar, div#up, div#down {
    -moz-user-select: none;
    -khtml-user-select: none;
}

/* so no gap or misplacement due to image vertical alignment [1]*/
div#scrollbar img {
    display:block; 
    } 
div#profil{
position:absolute;
visibility:visible;
width:370px;
}

div#theater {
position:absolute;
visibility:hidden;
width:370px;
}

div#film{
position:absolute;
visibility:hidden;
width:370px;
}

div#sprechen{
position:absolute;
visibility:hidden;
width:370px;
}
div#musik{
position:absolute;
visibility:hidden;
width:370px;
}
div#pdf{
z-index:7;
}
div#bildergalerie{
position:absolute;
z-index:0;

}

div#wn3	{ 
	position:relative; 
	overflow:visible;
	margin-left:415px;
	}
div#scroll_links
{ 	position:absolute;
	width:100%;
	height:100%;
	visibility:visible;
  }

div#wn2	{ 
	float:left;
	margin-top:190px;
	margin-left:14px;
	position:relative;
	width:400px; 
	height:355px; 
	overflow:hidden;
	}

div#scrollbar2	{ 
	margin-top:0px;
	float:right;
	width:25px;
	position:relative;
   	height:365px; 
  	font-size:1px;
	visibility:visible;/* for image vertical alignment issue */
  }
  div#kontakt{
	position:absolute;
	visibility:visible;
	width:370px;
}
  div#news{
position:absolute;
visibility:visible;
width:370px;
}
div#track { 
  position:absolute; left:0; top:30px;
  width:30px; height:460px;
 
  }
div#dragBar {
  position:absolute; left:11px; top:31px;
  width:9px; 
  height:100px;
  } 
  div#pfeil1 {
  position:absolute;
  display:inline;
  height:100%;
  width:100%;
  } 
 div#pfeil {
  position:absolute;
  display:none;
  height:100%;
  width:100%;
  } 
  div#background-bild {
  position:absolute;
  height:100%;
  width:100%;
  z-index:0;
  margin-left:-48px;
  }
ul.playlist li a.sm2_link {
    -moz-transition: background-color 0.15s linear 0s;
}
ul.playlist li a, ul.playlist li a.sm2_link {
    background-image: url("images/play.png");
	background-position: 0px 5px;
    background-repeat: no-repeat;
    display: inline-block;
    font-weight: normal;
    min-height: 16px;
    min-width: 19em;
    padding: 3px 3px 3px 25px;
    text-decoration: none;
    vertical-align: middle;
}

ul.playlist li a {
    background-image: url("images/play.png");
    
}
ul.playlist li a.sm2_paused:hover, ul.playlist li a.sm2_link:hover {
    background-image: url("images/play-over.png");
    background-position: 0px 5px;
    background-repeat: no-repeat;
}
ul.playlist li a.sm2_playing  {
    background-image: url("images/stop.png"); 
	background-repeat:no-repeat; 
	background-position:0px 5px; 
    text-decoration: none;
}
ul.playlist li a.sm2_playing:hover
{
    background-image: url("images/stop-over.png"); 
	background-repeat:no-repeat; 
	background-position:0px 5px; 
    text-decoration: none;
}
div#footer {
    position:fixed;
    bottom:0px;
	text-align:right;
	z-index:10;
}
div#schmetterling{
	position:absolute;
	-webkit-perspective: 600px;
	-webkit-perspective-origin: 0% 0%;
	-moz-perspective: 600px;
	-moz-perspective-origin: 0% 0%;
	width: 850px;
	height: 566px;
	left: 60%;
	top: -250px;
	margin: 0px auto;
}

div#schmetterling2{
	position:absolute;
	-webkit-perspective: 600px;
	-webkit-perspective-origin: 0% 0%;
	-moz-perspective: 600px;
	-moz-perspective-origin: 0% 0%;
	width: 850px;
	height: 566px;
	left:-210px;
	top: 400px;
	margin: 0px auto;
}

div#butterfly{
	position: absolute;
	-webkit-transform: rotate3d(0, 1, 0, 0deg) scale3d(0.5, 0.5, 0.5);
	-webkit-transform-origin: 80% 60%;
	-moz-transform: rotate3d(0, 1, 0, 0deg) scale3d(0.5, 0.5, 0.5);
	-moz-transform-origin: 80% 60%;
	left:0px;
	top:0px;
	width: 366px;
	height: 208px;
	-webkit-transform-style: preserve-3d;
	-webkit-animation-name: butterflyani;
	-webkit-animation-duration: 7s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function: linear;
}

div#butterfly2{
	position: absolute;
	-webkit-transform: rotate3d(0, 1, 0, 0deg) scale3d(0.5, 0.5, 0.5);
	-webkit-transform-origin: 80% 60%;
	-moz-transform: rotate3d(0, 1, 0, 0deg) scale3d(0.5, 0.5, 0.5);
	-moz-transform-origin: 80% 60%;
	left:0px;
	top:0px;
	width: 366px;
	height: 208px;
	-webkit-transform-style: preserve-3d;
	-webkit-animation-name: butterflyani;
	-webkit-animation-duration: 4s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function: linear;
}

@-webkit-keyframes butterflyani {
	from {
		-webkit-transform: rotate3d(0, 1, 0, 0deg) scale3d(0.5, 0.5, 0.5) translate3d(-300px, 350px, 0px);
	}
	25% {
		-webkit-transform: rotate3d(0, 1, 0, -90deg) scale3d(0.5, 0.5, 0.5) translate3d(-300px, 350px, 0px);
	}
	50% {
		-webkit-transform: rotate3d(0, 1, 0, -180deg) scale3d(0.5, 0.5, 0.5) translate3d(-300px, 350px, 0px);
	}
	75% {
		-webkit-transform: rotate3d(0, 1, 0, -270deg) scale3d(0.5, 0.5, 0.5) translate3d(-300px, 350px, 0px);
	}
	to{
		-webkit-transform: rotate3d(0, 1, 0, -360deg) scale3d(0.5, 0.5, 0.5) translate3d(-300px, 350px, 0px);
	}
}

@-moz-keyframes butterflyani {
	from {
		-moz-transform: rotate3d(0, 1, 0, 0deg) scale3d(0.5, 0.5, 0.5) translate3d(-300px, 350px, 0px);
	}
	25% {
		-moz-transform: rotate3d(0, 1, 0, -90deg) scale3d(0.5, 0.5, 0.5) translate3d(-300px, 350px, 0px);
	}
	50% {
		-moz-transform: rotate3d(0, 1, 0, -180deg) scale3d(0.5, 0.5, 0.5) translate3d(-300px, 350px, 0px);
	}
	75% {
		-moz-transform: rotate3d(0, 1, 0, -270deg) scale3d(0.5, 0.5, 0.5) translate3d(-300px, 350px, 0px);
	}
	to{
		-moz-transform: rotate3d(0, 1, 0, -360deg) scale3d(0.5, 0.5, 0.5) translate3d(-300px, 350px, 0px);
	}
}

div#rightwing{
	-webkit-transform: rotateX(90deg) translate3d(-178px, 0px, 0px) rotate3d(0, 1, 0, 180deg) ;
	-webkit-transform-origin: top right;
	position: absolute;
	left:178px;
	top:0px;
	width: 29px;
	height: 40px;
	background-image: url(images/wing.png);
	background-repeat:no-repeat;
	-webkit-animation-name: rightwingani;
	-webkit-animation-duration: 0.2s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
}

@-webkit-keyframes rightwingani {
	from {
		-webkit-transform:rotateX(90deg) translate3d(-178px, 0px, 0px) rotate3d(0, 1, 0, 180deg);
	}
	50% {
		-webkit-transform:rotateX(90deg) translate3d(-178px, 0px, 0px) rotate3d(0, 1, 0, 100deg);
	}
	to{
		-webkit-transform:rotateX(90deg) translate3d(-178px, 0px, 0px) rotate3d(0, 1, 0, 180deg);
	}
}

div#leftwing{
	-webkit-transform: rotateX(90deg) rotate3d(0, 1, 0, 0deg) ;
	position: absolute;
	-webkit-transform-origin: top right;
	left:0px;
	top:0px;
	width: 29px;
	height: 40px;
	background-image: url(images/wing.png);
	background-repeat: no-repeat;
	-webkit-animation-name: leftwingani;
	-webkit-animation-duration: 0.2s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
}

@-webkit-keyframes leftwingani {
	from {
		-webkit-transform:rotateX(90deg) rotate3d(0, 1, 0, 0deg);
	}
	50% {
		-webkit-transform:rotateX(90deg) rotate3d(0, 1, 0, 80deg);
	}
	to{
		-webkit-transform:rotateX(90deg) rotate3d(0, 1, 0, 00deg);
	}
}