@charset "utf-8";
/* CSS Document */

body {
	/* IE10 Consumer Preview */ 
background-image: -ms-linear-gradient(top left, #7EE9ED 0%, #FFFCF5 100%);

/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top left, #7EE9ED 0%, #FFFCF5 100%);

/* Opera */ 
background-image: -o-linear-gradient(top left, #7EE9ED 0%, #FFFCF5 100%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #7EE9ED), color-stop(1, #FFFCF5));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top left, #7EE9ED 0%, #FFFCF5 100%);

/* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to bottom right, #7EE9ED 0%, #FFFCF5 100%);
}

.ueberschrift {	background-color:rgba(0,150,255,.5); padding:7px; margin:0 auto; color:rgba(250,250,0,.8); text-shadow: 0 1px 0 #999, 0 2px 0 #888, 0 3px 0 #777, 0 4px 0 #666, 0 5px 0 #555, 0 6px 0 #444, 0 7px 0 #333, 0 8px 7px #000b21;
	text-align:center; border-radius: 1em; box-shadow: 0 0 6px 3px rgba(0,0,0,.9) inset; max-width:800px;}
	
.ueberschrift2 {padding:10px; margin:0 auto; color:#000; text-align:center; font-size: 1.3em; border-radius: 1em; box-shadow: 0 0 6px 3px rgba(0,0,0,.9) inset; max-width:800px;}	
	
.content {	animation:fadein 1s;-moz-animation:fadein 1.5s;-webkit-animation:fadein 1s;}

@keyframes fadein{from{opacity:0;}to{opacity:1;}}@-moz-keyframes fadein{from{opacity:0;}to{opacity:1;}}@-webkit-keyframes fadein{from{opacity:0;}to{opacity:1;}}@-o-keyframes fadein{from{opacity:0;}to{opacity:1;}}

.kommentare {color:#000; background-color:#FFF; padding:5px}

.farbelink {color:#6FF;}

.line {background: #0CF;
  clear: both;
  float: none;
  width: 99%;
  height: 2px;
  margin: 5px auto;
  margin-bottom:15px;
  border: none;
  max-width:800px;
}

.line2 {background: rgba(0,170,255,0.3);
  clear: both;
  float: none;
  width: 99%;
  height: 4px;
  margin: 5px auto;
  margin-bottom:15px;
  margin-top:20px;
  border: 1px solid rgba(255,255,255,0.5);
  border-radius:20%;
  max-width:800px;
}

.einzug30 {margin-left:30px;}

/*sprite animation*/
.achtballaufbau {
	width: 200px;
	height: 200px;
	background-image: url(8ball_aufbau.png);
    -webkit-animation: play .8s steps(20) infinite;
       -moz-animation: play .8s steps(20) infinite;
        -ms-animation: play .8s steps(20) infinite;
         -o-animation: play .8s steps(20) infinite;
	animation: play 30s steps(16) infinite;
	-webkit-transition: .5s;
       -moz-transition: .5s;
        -ms-transition: .5s;
         -o-transition: .5s;
            transition: .5s;
	}

@-webkit-keyframes play {
   from { background-position:    0px; }
     to { background-position: -3200px; }
}

@-moz-keyframes play {
   from { background-position:    0px; }
     to { background-position: -3200px; }
}

@-ms-keyframes play {
   from { background-position:    0px; }
     to { background-position: -3200px; }
}

@-o-keyframes play {
   from { background-position:    0px; }
     to { background-position: -3200px; }
}

@keyframes play {
   from { background-position:    0px; }
     to { background-position: -3200px; }
}
/*sprite animation ende*/

/*legt einen Rahmen um die Sprite Bilder*/
.bsp   {
	border-radius: 20px;
	border:2px solid rgba(255,0,0,0.7);
	box-shadow: 0px 0px 5px 3px rgba(255,0,0,0.7) inset;
}

.box1 {
  width: 80%;
  max-width:780px;
  margin: 0 auto;
  background: rgba(255,255,255,0.5);
  padding: 15px;
  border: 1px solid #fff;
  border-radius: 10px;
  background-clip: padding-box;
  text-align: center;
  margin-bottom: 2px;
  box-shadow: 0 0 2px 4px rgba(0,0,0,.07) inset;
}

.reiter {
	font-size: 1.2em;
	color: #000;
	padding: 8px;
	line-height:30px;
	border-radius: 10px;
	text-decoration: none;
	cursor: pointer;
	transition: all 0.3s ease-out;
}

.reiter2 {
	font-size: 1.2em;
	padding: 5px;
	color: #F00;
	text-decoration: none;
	text-align: center;
}

.reiter:hover {
  background: #6CF;
}


/*macht den Hintergrund dunkel wenn die Popup Box öffnet*/
.overlay {
  position: absolute;
  top: 0;
  bottom: -900px;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
  border-radius:15px;
}


.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  margin: 70px auto;
  padding: 20px;
  background: #333;
  border-radius: 5px;
  width: 80%;
  max-width:800px;
  position: relative;
  transition: all 0.5s ease-in-out;
  font-size:1.2em;
  color:#FFF;
  box-shadow:0 0 6px 3px rgb(255,255,255);
}


/*Zum experimentieren - zum Beispiel: Ändert Schriftgrösse oder Farbe der Popups*/
/*.popup:link {color: #F00; text-decoration: none;}

.popup:visited{text-decoration: none;color: #FF0;}

.popup:hover {text-decoration: none;color: #FF0; font-size:24px;}

.popup:active {text-decoration: none; color: #FFF;}*/

.popup h2 {
  margin-top: 20px;
  color: #F30;
  font-size:1.3em;
  font-family: Tahoma, Arial, sans-serif;
}

/*einfügen und styling des Close Buttons im Popup - Beginn*/
.popup .close {
  width:40px;
  height:40px;
  position: absolute;
  top: 5px;
  right: 5px;
  transition: all 200ms;
  font-size: 35px;
  font-weight: bold;
  text-decoration: none;
  text-align:center;
  color: #0F0;
  box-shadow: 0px 0px 6px 3px rgba(0, 0, 0, 0.7);
  border-radius: 100%; 
}

.close_bottom {
  width:50px;
  height:50px;
  position: absolute;
  bottom: 10px;
  right: 10px;
  background-color:rgba(100,100,100,.7);
  transition: all 200ms;
  font-size: 44px;
  font-weight: bold;
  text-decoration: none;
  text-align:center;
  color: #F00;
  box-shadow: 0px 0px 6px 3px rgba(255, 0, 0, 0.7);
  border-radius: 100%;
}

.close_bottom:hover {
  background-color:rgba(100,100,100,.2);
  color: #3F0;
  box-shadow: 0px 0px 6px 3px rgba(0,255,255,0.8);
  border-radius: 90%; 
}


.popup .close:hover {
  color: #F00;
  box-shadow: 0px 0px 6px 3px rgba(255, 26, 0, 0.7);
}
/*einfügen und styling des Close Buttons im Popup - Ende*/

.popup .content {
  max-height: 30%;
  overflow: auto;
}


/*Navigation Beginn*/
.site_navi {
	background-color:rgba(0,150,255,.3);
	margin: 0 auto;
	padding:10px;
	color:#FF0;
	text-shadow: 0 -1px #999999, 2px 0 #999999, 0 2px #999999, -1px 0 #999999;
	font-size:1.2em;
	font-weight: 700;
	border-radius:30px;
	box-shadow:0px 0px 10px 3px #000 inset;
	max-width:800px;
}

.oben {
	background-color:rgba(0, 0, 0, 0.1);
	margin:0 auto;
	text-align:center;
	padding: 20px 0;
	border-radius: 30px 30px 0px 0px;
	height:100px;
}

.links {background-color:rgba(0, 0, 0, 0.1); float:left; width: 50%; text-align:center;padding: 20px 0; height:100px;}

.rechts {background-color:rgba(0, 0, 0, 0.1); float:right; width: 50%; text-align:center;padding: 20px 0; height:100px;}

.unten {background-color:rgba(0, 0, 0, 0.1); clear: both; text-align:center; padding: 5px 0;border-radius: 0px 0px 30px 30px;padding: 20px 0; height:120px;}

.clearfloat { /* Diese Klasse kann in einem <br>-Tag oder leeren div-Tag als letztes Element nach dem letzten fließenden div-Tag (im #container) platziert werden, wenn #footer entfernt oder aus dem #container herausgenommen wird. */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}

.design {
	width:50px;
	height:50px;
	box-shadow: -1px -1px 5px 1px #FC0, 1px 1px 5px 1px #FF0;
	border-radius:100%;
	transition:0.3s;
	}

.design:hover {box-shadow: -1px -1px 5px 1px #6FF, 1px 1px 10px 5px #0FF;border-radius:100%;opacity:0.6;}
/*Navigation Ende*/


@media only screen and (max-width: 800px){

	
  .box1{
    width: 90%;
  }
  .popup{
	font-size:1.3em;
  }
}

@media only screen and (max-width: 480px){

	
  .box1{
    width: 90%;
  }
  
  .popup{
	font-size:1.3em;
  }
}