/* Schriftart wird ausgewählt, für alle Dateien*/
@font-face {
font-family: 'Calibri Light';
font-style: normal;
font-weight: normal;
src: local('Calibri Light'), url('calibril.woff') format('woff');
}

body {
font-family: 'Calibri light', sans-serif;
font-weight:50;
font-size: 1.3em;}

/*Startseiten Ummantelung*/
.alles{
position:absolute;
width:1000px;
height:700px;
left:50%;
top:50%;
margin-left:-500px;
margin-top:-350px;

border-color:grey;
border-width:3px;
border-style:solid;
background:url(hintergrund.jpg);

}

.alles2{
position:absolute;
width:1000px;
height:700px;
left:50%;
top:50%;
margin-left:-500px;
margin-top:-350px;

border-color:grey;
border-width:3px;
border-style:solid;
background:url(hintergrund.jpg);

}
/*allgemeiner Button*/

.btn {
  background: #ffffff;
  background-image: -webkit-linear-gradient(top, #ffffff, #ffffff);
  background-image: -moz-linear-gradient(top, #ffffff, #ffffff);
  background-image: -ms-linear-gradient(top, #ffffff, #ffffff);
  background-image: -o-linear-gradient(top, #ffffff, #ffffff);
  background-image: linear-gradient(to bottom, #ffffff, #ffffff);
  -webkit-border-radius: 19;
  -moz-border-radius: 19;
  border-radius: 19px;
font-family: 'Calibri Light', sans-serif;
  color: #5e5d5e;
  font-size: 20px;
  width: 200px;
  height:80px;
  border: solid #5c5c5c 2px;
  text-decoration: none;
}

.btn:hover {
  background: #dbdbdb;
  text-decoration: none;
}

.btnuebung {
  background: #ffffff;
  background-image: -webkit-linear-gradient(top, #ffffff, #ffffff);
  background-image: -moz-linear-gradient(top, #ffffff, #ffffff);
  background-image: -ms-linear-gradient(top, #ffffff, #ffffff);
  background-image: -o-linear-gradient(top, #ffffff, #ffffff);
  background-image: linear-gradient(to bottom, #ffffff, #ffffff);
  -webkit-border-radius: 19;
  -moz-border-radius: 19;
  border-radius: 19px;
font-family: 'Calibri Light', sans-serif;
  color: #5e5d5e;
  font-size: 20px;
  width: 100px;
  height:70px;
  border: solid #5c5c5c 2px;
  text-decoration: none;
  font-size:11px;
}

.btnuebung:hover {
  background: #dbdbdb;
  text-decoration: none;
}

/*Button Impressum*/
.btnimpressum {
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0px;
font-family: 'Calibri Light', sans-serif;
  color: #5e5d5e;
  font-size: 20px;
  background: #A5924E;
  border: solid #5c5c5c 0px;
  text-decoration: none;
  position:absolute;
    width: 160px;
  height: 30px;
	top:670px;
	left:840px;
}

.btnimpressum:hover {
  background: #ffffff;
  text-decoration: none;
}


/*Button Spielregeln*/
.spielregeln {
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0px;
font-family: 'Calibri Light', sans-serif;
  color: #5e5d5e;
  font-size: 20px;
  background: #A5924E;
  border: solid #5c5c5c 0px;
  text-decoration: none;
  position:absolute;
    width: 160px;
  height: 30px;
	top:670px;
	left:680px;
}

.spielregeln:hover {
  background: #ffffff;
  text-decoration: none;
}

/*Klassen für Index*/
.bannerindex{
position:absolute;
top:18%;
}

.neu{
position:absolute;
top:460px;
left:250px;
width:500px;
height:120px;
background-color:rgba(255,255,255,0.8);	
}

.neuinnen{
position:absolute;
top:10px;
left:10px;
}

.button{
position:absolute;
width:800px;
height:200px;
top:45%;
left:295;
}



/*Klassen für Login*/
.bannerlogin{
position:absolute;
top:12%;
}

.loginform{
position:absolute;
width:800px;
height:200px;
top:40%;
left:35%;
}

.btnlog {
  background: #ffffff;
  background-image: -webkit-linear-gradient(top, #ffffff, #ffffff);
  background-image: -moz-linear-gradient(top, #ffffff, #ffffff);
  background-image: -ms-linear-gradient(top, #ffffff, #ffffff);
  background-image: -o-linear-gradient(top, #ffffff, #ffffff);
  background-image: linear-gradient(to bottom, #ffffff, #ffffff);
  -webkit-border-radius: 19;
  -moz-border-radius: 19;
  border-radius: 19px;
font-family: 'Raleway', sans-serif;
  color: #5e5d5e;
  font-size: 20px;
  width: 260px;
  height:40px;
  border: solid #5c5c5c 2px;
  text-decoration: none;
}

.btnlog:hover {
  background: #dbdbdb;
  text-decoration: none;
}

/*Klassen für Hallo*/
.bannerhallo{
position:absolute;
top:64px;
}

.einleitung{
	position:absolute;
	width:550px;
	height:400px;
	top:230px;
	left:100px;
	background-color:#FFFFFF;
}


#hallo
 {

    position:absolute;
	top:380px;
	left:700px;

}

/*Klassen für Impressum*/

.imp1{
	position:absolute;
	width:300;
	height:300;
	top:180px;
	left:110px;
}
.imp2{
	position:absolute;
	width:300;
	height:300;
	top:257px;
	left:430px;
}
.btnimp {
  background: #ffffff;
  background-image: -webkit-linear-gradient(top, #ffffff, #ffffff);
  background-image: -moz-linear-gradient(top, #ffffff, #ffffff);
  background-image: -ms-linear-gradient(top, #ffffff, #ffffff);
  background-image: -o-linear-gradient(top, #ffffff, #ffffff);
  background-image: linear-gradient(to bottom, #ffffff, #ffffff);
  -webkit-border-radius: 19;
  -moz-border-radius: 19;
  border-radius: 19px;
font-family: 'Calibri Light', sans-serif;
  color: #5e5d5e;
  font-size: 20px;
  width: 150px;
  height:100px;
    position:absolute;
	top:430px;
	left:720px;
  border: solid #5c5c5c 2px;
  text-decoration: none;
}

.btnimp:hover {
  background: #dbdbdb;
  text-decoration: none;
}

.datenschutz {
  background: #ffffff;
  background-image: -webkit-linear-gradient(top, #ffffff, #ffffff);
  background-image: -moz-linear-gradient(top, #ffffff, #ffffff);
  background-image: -ms-linear-gradient(top, #ffffff, #ffffff);
  background-image: -o-linear-gradient(top, #ffffff, #ffffff);
  background-image: linear-gradient(to bottom, #ffffff, #ffffff);
  -webkit-border-radius: 19;
  -moz-border-radius: 19;
  border-radius: 19px;
font-family: 'Calibri Light', sans-serif;
  color: #5e5d5e;
  font-size: 20px;
  width: 150px;
  height:100px;
    position:absolute;
	top:320px;
	left:720px;
  border: solid #5c5c5c 2px;
  text-decoration: none;
}

.datenschutz:hover {
  background: #dbdbdb;
  text-decoration: none;
}

.bannerimp{
position:absolute;
top:45px;
}

/*Klassen für Registrieren*/

.tabellereg{
position:absolute;
width:900px;
height:380px;
top:210px;
left:50px;
background-color:rgba(255,255,255,0.7);
}

.fehler{
width:500px;
height:75px;
background-color: rgba(122,139,139,0.6);
opacity:0,5;
align:center;
position:absolute;
top:615px;
left:30px;
 text-align: center

}

.reg1{
	width:800px;
	padding:20px;
	position:absolute;
top:160px;
left:100px;
}

.reg2{
width:800px;
text-align:center;
position:absolute;
top:310px;
left:75px;
}
.regbanner
{
	position:absolute;
	top:30px;
}
.formularreg{
	position:absolute;
	top:-120px;
	left:-55px;
}

.email{
	position:absolute;
	top:464px;
	left:80px;
	width:1000px;
	font-size:15px;
}


#reg {
    position:absolute;
	top:430px;
	left:600px;
}

SELECT{
	font-family: 'Raleway', sans-serif;
	width:165px;
}

/*Klassen für Menue*/

.legendemenue{
	position:absolute;
	top:640px;
	left:10px;
	color:#FFFFFF;
}

.bannermenue{
position:absolute;
top:10px;
left:10px;
}

.statusleistemenue{
width:970px;
height:40px;
position:absolute;
top:150px;
 text-align: right;
}

.tabellemenue{
position:absolute;
top:200px;
width:680px;
height:420px;
left:10px;
background-color:rgba(255, 255, 255, 0.7);
}

.tabelle{
position:absolute;
top:70px;
left:6px;
}

.goldenerrechen{
position:absolute;
top:240px;
left:170px;
}

.blumemenue{
position:absolute;
width:300px;
height:600px;
top:5px;
left:700px;
}

.blumentopf{
position:absolute;
top:400px;

}
.blume{
	position:absolute;
	top:18px;
}
.blumentopfgroesse{
	width:300px;
}

.kategoriebild{
width:80px;
height:80px;
}

/*Button, nicht freigeschaltet*/

.btn1{
  -webkit-border-radius: 8;
  -moz-border-radius: 8;
  border-radius: 8px;
  font-family: Arial;
  color: #615561;
  font-size: 33px;
  background: #dbdbdb;
  padding: 10px 20px 10px 20px;
  border: solid #383838 1px;
  text-decoration: none;
  width: 60px;
  height: 60px;
}

/*Button, freigeschaltet*/

.btn2 {
  -webkit-border-radius: 8;
  -moz-border-radius: 8;
  border-radius: 8px;
  font-family: Arial;
  color: #615561;
  font-size: 33px;
  background: #ffffff;
  padding: 10px 20px 10px 20px;
  border: solid #383838 1px;
  text-decoration: none;
  width: 60px;
  height: 60px;
}

.btn2:hover {
  color: #f5a6c3;
}



/*Button, geloest*/

.btn3 {
  -webkit-border-radius: 8;
  -moz-border-radius: 8;
  border-radius: 8px;
  font-family: Arial;
  color: #615561;
  font-size: 33px;
  background: #c3f7a6;
  padding: 10px 20px 10px 20px;
  border: solid #A9D18E 1px;
  text-decoration: none;
  width: 60px;
  height: 60px;
}

.btn3:hover {
  color: #f5a6c3;
}

/*Sonne*/

.sonne{
	width:60px;
	height:60px;
}
/*Drop Down Menü*/
nav{
position:absolute;
top:60px;
width:1000px;
z-index:5;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 9px;
}
nav > ul > li {
  float: left;
    padding: 10px;
}
nav > ul > li > ul {
  display: none;
}
nav > ul a {
  display: block;
  width:130px;
  padding: 5px;
  background: rgba(255,255,255,0.6);
}
nav > ul {
  float: right;
  overflow: hidden;
  padding: 0px 10px 0 10px;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25);
 
}

nav ul > li > ul > li a {
  background: rgba(255,255,255,0.6);
  color: rgb(0, 0, 0);
}

nav > ul > li:hover > ul {
  display: block;
  position: absolute;

}

a{
	text-decoration:none;
}
/*Reinfliegen*/

#reinfliegen {
	
	animation: reinfliegen1 2s;	
	position:absolute;top:90px;left:790px;
	z-index:1;
	width:1px;height:1px;
}



@keyframes reinfliegen1 {
	0% {
		position:absolute;top:-100px;left:-100px;width:200px;height:200px;
	}
	40% {
		position:absolute;top:300px;left:400px;width:800px;height:800px;
	}
	100% {	
		width:1px;height:1px;
	}
}

/*Klassen zum Profil*/

.profilinfos{
position:absolute;
top:250px;
left:60px;
}

.anzahl{
position:absolute;
top:345px;
left:345px;
width:230px;
font-size:12px;
text-align:center;
background-color:rgba(255,255,255,0.8);
z-index:5;
}
.profildiagramm{
position:absolute;
left:230px;
top:200px;

}

.tropfen{
position:absolute;
top:380px;
left:60;
width:230px;
height:230px;
}

.profilpunkte{
position:absolute;
top:450px;
left:360;
width:230px;
height:230px;
}
.kategorie{
position:absolute;
top:180px;
left:60px;
font-weight: bold;
font-size: 30px;
}

/*Klassen zu den Einstellungen*/

.passwort{
position:absolute;
top:210px;
left:60px;
}

.passwort2{padding:10px;}

.klasse{
position:absolute;
top:420px;
left:60px;
}

/*Klassen zu den Level*/

.blumelevel{
position:absolute;
width:300px;
height:500px;
top:200px;
left:200px;
}

.textlevel{
position:absolute;
width:260px;
height:500px;
top:250px;
left:600px;
}

#btnlevel {
    position:absolute;
	top:400px;
	left:610px;
}

/*Klassen zum Ranking*/

.beschreibung{
	position:absolute;
	left:145px;
	top:10px;
	font-size:16px;
}
#btnranking1 {
    position:absolute;
	top:200px;
	left:100px;
}

#btnranking2 {
    position:absolute;
	top:200px;
	left:350px;
}

.btnranking2:hover {
  background: #dbdbdb;
  text-decoration: none;
}

.diagrammklasse{
position:absolute;
width:580px;
height:300px;
top:300px;
left:50px;
background-color:rgba(255,255,255,0.7);
}

.diagrammklasse2{
position:absolute;
width:940px;
height:320px;
top:300px;
left:30px;
background-color:rgba(255,255,255,0.7);
}

.diagrammklasse2innen{
position:absolute;
top:70px;
left:10px;
}

/*Klassen zu der Übung und der Auswertung*/

.mcfeedbackrichtig{
width:330px;
height:75px;
background-color: rgba(188,245,159,0.6);
opacity:0,5;
position:absolute;
left:10px;
top:305px;
 text-align: center;

}

.mcfeedbackfalsch{
width:330px;
height:75px;
background-color: rgba(245,169,169,0.6);
opacity:0,5;
position:absolute;
left:10px;
top:305px;
 text-align: center;
 font-size:19px;
}

.aufgabe{
position:absolute;
width:660px;
height:400px;
top:250px;
left:10px;
background-color:rgba(255,255,255,0.5);
}

.fragemc{
position: absolute;
width:330px;
height: 380px;
top:10px;
left:10px;
background-color: #FFFFFF;
}

.mc1{
position: absolute;
width:300px;
height: 88px;
top:10px;
left:350px;
background-color: #FFFFFF;
}

.mc1:hover {
  border:1px solid grey;
}

.mc1richtig{
position: absolute;
width:300px;
height: 88px;
top:10px;
left:350px;
background-color: #FFFFFF;
border:2px solid #BCF5A9;
}
.mc1falsch{
position: absolute;
width:300px;
height: 88px;
top:10px;
left:350px;
background-color: #FFFFFF;
border:2px solid #F5A9A9;
}

.mc2{
position: absolute;
width:300px;
height: 88px;
top:108px;
left:350px;
background-color: #FFFFFF;
}

.mc2:hover {
  border:1px solid grey;
}

.mc2falsch{
position: absolute;
width:300px;
height: 88px;
top:108px;
left:350px;
background-color: #FFFFFF;
border:2px solid #F5A9A9;
}
.mc2richtig{
position: absolute;
width:300px;
height: 88px;
top:108px;
left:350px;
background-color: #FFFFFF;
border:2px solid #BCF5A9;
}

.mc3{position: absolute;
width:300px;
height: 88px;
top:206px;
left:350px;
background-color: #FFFFFF;}

.mc3:hover {
  border:1px solid grey;
}

.mc3richtig{position: absolute;
width:300px;
height: 88px;
top:206px;
left:350px;
background-color: #FFFFFF;
border:2px solid #BCF5A9;}

.mc3falsch{
position: absolute;
width:300px;
height: 88px;
top:206px;
left:350px;
background-color: #FFFFFF;
border:2px solid #F5A9A9;
}
.mc4{
	position: absolute;
width:300px;
height: 88px;
top:304px;
left:350px;
background-color: #FFFFFF;
}

.mc4:hover {
  border:1px solid grey;
}

.mc4richtig{
position: absolute;
width:300px;
height: 88px;
top:304px;
left:350px;
background-color: #FFFFFF;
border:2px solid #BCF5A9;
}
.mc4falsch{
position: absolute;
width:300px;
height: 88px;
top:304px;
left:350px;
background-color: #FFFFFF;
border:2px solid #F5A9A9;
}
.fragezuord{
	position: absolute;
width:640px;
height: 150px;
top:10px;
left:10px;
background-color: #FFFFFF;
}

.feedbackzuordrichtig{
position:absolute;	
width:210px;
height:90px;
left: 440px;
top:300px;
font-size:11px;
background-color:#BCF5A9;
display: flex;
  align-items: center;
  justify-content: center;
  text-align:center;
}

.feedbackzuordfalsch{
position:absolute;	
width:210px;
height:90px;
left: 440px;
top:300px;
font-size:11px;
background-color:#F5A9A9;	
display: flex;
  align-items: center;
  justify-content: center;
  text-align:center;
}

.antwortzuord{
	position: absolute;
width:640px;
height: 120px;
top:170px;
left:10px;
background-color: #FFFFFF;
}

.tabellezuord{
	position: absolute;
width:420px;
height:90px;
top:300px;
left:10px;
background-color: #FFFFFF;
}

.tabellezuordinnen{
position: absolute;
top:15px;
left:43px;
}

.auswahl{width:100px;}

#btnuebungzuord {
    position:absolute;
	top:305px;
	left:445px;
}

.fragewahr{
position: absolute;
width:330px;
height: 380px;
top:10px;
left:10px;
background-color: #FFFFFF;
}

.antwortwahr{
position: absolute;
width:300px;
height: 185px;
top:10px;
left:350px;
background-color: #FFFFFF;}

.antwortwahrinnen{
position: absolute;
top:80px;
left:80px;
}

.feedbackwahrrichtig{
position: absolute;
width:300px;
height: 185px;
top:205px;
left:350px;
background-color: #BCF5A9;
display: flex;
  align-items: center;
  justify-content: center;
}

.feedbackwahrfalsch{
position: absolute;
width:300px;
height: 185px;
top:205px;
left:350px;
background-color: #F5A9A9;	
display: flex;
  align-items: center;
  justify-content: center;
}

#btnuebungwahr {
    position:absolute;
	top:250px;
	left:400px;
}

.fragetext{
position: absolute;
width:330px;
height: 380px;
top:10px;
left:10px;
background-color: #FFFFFF;
}

.antworttext{
position: absolute;
width:300px;
height: 185px;
top:10px;
left:350px;
background-color: #FFFFFF;}

.antworttextinnen{
position: absolute;
top:67px;
left:67px;
}

.feedbacktextrichtig{
position: absolute;
width:300px;
height: 185px;
top:205px;
left:350px;
background-color: #BCF5A9;
display: flex;
  align-items: center;
  justify-content: center;
}

.feedbacktextfalsch{
position: absolute;
width:300px;
height: 185px;
top:205px;
left:350px;
background-color: #F5A9A9;		

}

.feedbacktextfalschinnen{
position: absolute;
width:270px;
height: 145px;
left:15px;
top: 40px;
display: flex;
  text-align: center;
  justify-content: center;
}

#btnuebungtext {
    position:absolute;
	top:180px;
	left:400px;
}

.hinweiszahl{
position: absolute;
width:300px;
height: 110px;
top:280px;
left:350px;
background-color: #EEEEEE;
display: flex;
  align-items: center;
  justify-content: center;
  text-align:center;
font-size:12px;
}


.fragezahl{
position: absolute;
width:330px;
height: 380px;
top:10px;
left:10px;
background-color: #FFFFFF;
}

.antwortzahl{
position: absolute;
width:300px;
height: 155px;
top:10px;
left:350px;
background-color: #FFFFFF;}


.antwortzahlinnen{
position: absolute;
top:59px;
left:67px;
}

.feedbackzahlrichtig{
position: absolute;
width:300px;
height: 185px;
top:205px;
left:350px;
background-color: #BCF5A9;	
display: flex;
  align-items: center;
  justify-content: center;
}

.feedbackzahlfalsch{
position: absolute;
width:300px;
height: 185px;
top:205px;
left:350px;
background-color: #F5A9A9;	
display: flex;
  align-items: center;
  justify-content: center;
}

#btnuebungzahl {
    position:absolute;
	top:180px;
	left:400px;
}

.fragennummer{
position:absolute;
top:180px;
left:90px;
width:60px;
height:36px;
background-color:rgba(255,255,255,0.7);
font-size:25px;
text-align:center;
}

.fortschritt2{
position:absolute;
top:185px;
left:155px;

}

.fortschrittsbalken{
position:absolute;
width:230px;
height:30px;
background-color:rgba(200,200,200,0.5);
top:182px;
left:210px;
}

.kategoriebilddiv{
position:absolute;
top:165px;
left:14px;
}

.kategoriebild2{
	width:60px;
	height:60px;
}

#btnuebung1 {
    position:absolute;
	top:-91px;
	left:440px;
}

#btnuebung2 {
    position:absolute;
	top:159px;
	left:560px;
}

/*Klassen zu der Auswertung2*/

#kategoriebilddiv2{
position:absolute;
top:340px;
left:40px;
}
.feedbackauswertung2{
position:absolute;
top:10px;
left:150px;
width:490px;
}

.rahmenauswertung2{
position:absolute;
width:660px;
height:400px;
top:200px;
left:10px;
background-color:rgba(255,255,255,0.5);
}

.btnauswertung2 {
    position:absolute;
	top:150px;
	left:300px;
}


/*Klassen zu der golden*/

.rechen{
	
	position:absolute;
	width:430px;
	height:400px;
	background-color:rgba(255,255,255,0.8);
	left:40px;
	top:200px;
}

/*Klassen zu den Feedback*/

.versendet
{
	position:absolute;
	top:188px;
	left:180px;
}

.feedbackformular{
position:absolute;
top:230px;
left:120px;
}