body{
      

}
@font-face {
    font-family: amatic;
    src: url(../fonts/Kirvy-Regular.otf);
}
@font-face {
    font-family: amatic-b;
    src: url(../fonts/Amatic-Bold.ttf);
}

//	a:hover {letter-spacing: 1px;}
      a:active {color: #ee0000;} 
      a:link {color: #0000ee;}
      a:visited {color: #551a8b;}
        a {text-decoration: none;}
     
    

.gohome {
text-align:center;
  position: fixed;
  margin: 20px              
}


div.wrapper{
	background-color: rgba(255,255,255,.55);
	width: 94%;
	margin-top: 3%;
        padding: 6px;
	position: relative;
	top: 3%;
	left: 3%;
//	border-style: double;
	border-radius: 8px;
//	border-color: rgba(255,255,255,0.5);
	z-index: 20;
 //       font-family: amatic;
 //       font-size: 16pt;
        

	}

	
/* overlay section */
div.overlay0, div.overlay1, div.overlay2, div.ball2, div.overlay5, div.overlay-close{
	border-style: ridge;
	border-color: rgba(0,0,0,0.2);
/*	border-color: <?php echo $bgcolor->color;  ?>;*/
        width: 500px; height: 550px;
	position: relative;
	
        overflow-y: hidden;
	overflow-x: hidden;
	padding-left:80px; padding-top: 80px; padding-right: 55px;
	white-space:normal;
        text-align:center;
	background-color: rgba(255,255,255,.10);
	-webkit-border-radius: 360px;
	-moz-border-radius: 360px;
	border-radius: 360px;
}	
div.overlay0{
	background-color: rgba(255,255,255,.15);
	z-index: 10;
        margin-top: -700px; margin-right: -300px;
        float: right
        
}	
div.overlay1{
	background-color: rgba(255,255,255,.07);
	top: 17%;
	right: 10%;
	z-index: 10;
        margin-right: -50px; margin-top: -800px;
        
}
div.overlay2 {
	background-color: rgba(255,255,255,.20);	
        margin-top: -60px;
	z-index: 12;
	overflow-y: hidden;
	overflow-x: hidden;
	padding-left:80px; padding-top: 80px; padding-right: 55px;
	white-space:normal;
        text-align:center;
    animation-name: ball; 
    animation-duration: 5s;
    animation-fill-mode: forwards;
}
@keyframes ball {
    from  { transform: translateX(0)     rotate(0deg) }
    to    { transform: translateX(500px) rotate(720deg) }
}
.overlay3 {
  position: absolute;
	margin-top: -400px;
	width: 500px;
	height: 600px;
}

.ball2 { 
	z-index: 13;
	top: 0px; left: 30%;
	margin-left: -50px; margin-top: -794px;
        background-color: rgba(255,255,255,.15);

	
	-webkit-animation: bounce 2s 1 forwards;
	-moz-animation: bounce 2s 1 forwards;
	-ms-animation: bounce 2s 1 forwards;
	animation: bounce 2.5s 1 forwards;
        animation-delay: 6s;
}

/* ease-in is slow to fast, when the ball drops */
/* ease-out is fast to slow, when the ball rebounds */


@keyframes bounce {
	0% {
		top: 0;
		animation-timing-function: ease-in;
	}
	14% {
		top: 630px;
		animation-timing-function: ease-out;
	}
	28% {
		top: 150px;
		animation-timing-function: ease-in;
	}
	42% {
		top: 625px;
		animation-timing-function: ease-out;
	}
	56% {
		top: 400px;
		animation-timing-function: ease-in;
	}
	68% {
		top: 623px;
		animation-timing-function: ease-out;
	}
	80% {
		top: 500px;
		animation-timing-function: ease-in;
	}
        89% {
		top: 623px;
		animation-timing-function: ease-out;
	}
        96% {
		top: 565px;
		animation-timing-function: ease-in;
        }
        98% {
		top: 623px;
		animation-timing-function: ease-out;
	}
        99% {
		top: 600px;
		animation-timing-function: ease-in;
        }
	100% {
		top: 623px;
		animation-timing-function: ease-out;
	}
}
   
div.overlay5{
        float: right; 	background-color: rgba(255,255,255,.10); margin-right: -150px;

}


div.wrapper a span {
  display:none;
}
div.wrapper a:active, div.wrapper a:focus { /* Neu für IE6 */
  border:none;
  }

div.wrapper a:active span, div.wrapper a:focus span {
  display: block;
  text-decoration: none;
  color: black;
  /*border: none;*/ /* auskommentiert = deaktiviert */
  /*background:none;*/ /* auskommentiert = deaktiviert */
}



div.overlay2 h1{
	font-size: 50px;
}

div.overlay-next{
	background-color: rgba(255,255,255,.0);
	width: 100px;
	height: 70px;
	position: relative;
	top: 50px;
	left: 320px;
	z-index: 13;


}
div.overlay-close{
	background-color: rgba(255,255,255,.60);
	background-image:url(./grafics/close.png) no-repeat center center;
	width: 100px;
	height: 100px;
	position: absolute;
	top: 15%;
	left: 20%;
	z-index: 15;
	border-radius: 50px;
	


}
img.overlay-close{
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
	      

<style>

th, td {
    padding: 5px;
    text-align: left;
}
table#t01 tr:nth-child(even) {
    background-color: rgba(238,238,238, .55)  ;
}
table#t01 tr:nth-child(odd) {
   background-color: rgba(255,255,255,.55);
}
table#t01 th {
    background-color: rgba(0,0,0,.55);
    color: white;
}
</style>