﻿body{
	top:0px;
	left:0px;
	background-image:url('../img/ma09a-bg.png');
	1background-repeat:no-repeat;
	background-size: cover;
	1background-color:black;
	overflow:hidden;
}

#button {
	position:absolute;
	1left: 50%;
	1top: 50%;
	margin-left: 815px;
	margin-top: 500px;
	1position: absolute;
	width: 100px;
	height: 100px;  
	border-bottom: 2px solid #eee;
	
	background-image: -webkit-linear-gradient(top, #999, #d0d0d0 80% );
	background-image: -moz-linear-gradient(top, #999, #d0d0d0 80% );
	background-image: -ms-linear-gradient(top, #999, #d0d0d0 80% );
	background-image: -o-linear-gradient(top, #999, #d0d0d0 80% );
	background-image: linear-gradient(top, #999, #d0d0d0 80% );
	
	-moz-border-radius: 100px;  
	-webkit-border-radius: 100px;  
	border-radius: 100px;
	
	box-shadow: inset rgba(0,0,0,0.2) 0px 5px 6px ;
}

/* #button {
	position:absolute;
	width: 100px;
	height: 100px;  
	border-bottom: 2px solid #eee;
	
	background-image: -webkit-linear-gradient(top, #999, #d0d0d0 80% );
	background-image: -moz-linear-gradient(top, #999, #d0d0d0 80% );
	background-image: -ms-linear-gradient(top, #999, #d0d0d0 80% );
	background-image: -o-linear-gradient(top, #999, #d0d0d0 80% );
	background-image: linear-gradient(top, #999, #d0d0d0 80% );
	
	-moz-border-radius: 100px;  
	-webkit-border-radius: 100px;  
	border-radius: 100px;
	
	box-shadow: inset rgba(0,0,0,0.2) 0px 5px 6px ;
	
	left: 50%;
	top: 50%;
	margin-left: 166px;
	margin-top: 170px;
	position: absolute;
}
*/

.butt {
  position: absolute;
  width: 80px;
  height: 52px;
  left: 10px;
  top: 10px;
  cursor: pointer;
  font-family: "Lucida Sans";
  font-weight: bold;
  font-size: 23px;
  color: #888;
  text-shadow: 0px 1px 0px #fff;
  text-align: center;
  padding-top: 28px;
  
  -moz-border-radius: 100px;  
  -webkit-border-radius: 100px;  
  border-radius: 100px;  
  
  background-image: -webkit-linear-gradient(top, #eee, #bbb 70%, #9f9f9f 100% );
  background-image: -moz-linear-gradient(top, #eee, #bbb 70%, #9f9f9f 100% );
  background-image: -ms-linear-gradient(top, #eee, #bbb 70%, #9f9f9f 100% );
  background-image: -o-linear-gradient(top, #eee, #bbb 70%, #9f9f9f 100% );
  background-image: linear-gradient(top, #eee, #bbb 70%, #9f9f9f 100% );
  
  background-position: 0 6px;
  background-color: #eee;
  background-repeat: no-repeat;
  
  -webkit-box-shadow: rgba(0,0,0,.4) 0 3px 6px;  
  -moz-box-shadow: rgba(0,0,0,.4) 0 3px 6px;  
  box-shadow: rgba(0,0,0,.4) 0 3px 6px;
  
  -webkit-transition: all .1s ease-in;
  -moz-transition: all .1s ease-in;
  -ms-transition: all .1s ease-in;
  -o-transition: all .1s ease-in;
  transition: all .1s ease-in;
}

.butt:hover {
  background-position: 0 0px;
  
  -webkit-box-shadow: rgba(0,0,0,.4) 0 3px 8px;  
  -moz-box-shadow: rgba(0,0,0,.4) 0 3px 8px;  
  box-shadow: rgba(0,0,0,.4) 0 3px 8px;
}

.butt:active {
  width: 76px;
  height: 48px;
  margin: 2px 0 0 2px;   
  border-bottom: 1px solid #fff;
  font-size: 21px;
  color: #777;

  -webkit-box-shadow: inset rgba(0,0,0,.5) 0px 5px 10px;
  -moz-box-shadow: inset rgba(0,0,0,.5) 0px 5px 10px;
  box-shadow: inset rgba(0,0,0,.5) 0px 5px 10px;
}

1form {
	position:absolute;
	top:20px;
	left:484px;
	width:463px;
	height:307px;
	border: 2px black solid;
}

header {
	margin-left:330px;
	margin-top:310px;
	width:260px;
	height:80px;
	
}

/* Demo Buttons Style - Anfang - */
.nomen-demos{
	position:absolute;
	top:46px;
	left:833px;
    text-align: left;
	display: block;
	line-height: 30px;
	padding: 5px 0px;
}
.nomen-demos a{
    display: inline-block;
	margin: 1px 4px;
	padding: 0px 6px;
	color:black;
	line-height: 30px;	
	font-size: 16px;
	text-shadow: 1px 1px 1px #fff;

    border:solid 1px #000000;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;

    -moz-box-shadow: 2px 2px 4px #000000;
    -webkit-box-shadow: 2px 2px 4px #000000;
    box-shadow: 2px 2px 4px #000000;

}
.nomen-demos a:hover{
	color: #333;
}
.nomen-demos a:active{
	background: #fff;
}
.nomen-demos a.current-demo,
.nomen-demos a.current-demo:hover{
	background: #fff;
	color: red;
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}

/* .rw-sentence-IE{
	display: none;
	padding: 30px;
} */
#de50Titel{
	position:absolute;
	top:10px;
	left:20px;
	width:730px;
	height:32px;
	/* background-color:#CCCCCC; */
	font-family:"Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
	font-size:20px;
	font-weight:bold;
	text-align:center;
	line-height:32px;
	z-index:240;

    border:solid 1px #000000;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;

    -moz-box-shadow: 4px 4px 10px #000000;
    -webkit-box-shadow: 4px 4px 10px #000000;
    box-shadow: 4px 4px 10px #000000;

    background-color: rgba(235, 233, 218, 0.9);
    background: rgba(235, 233, 218, 0.9);
}

#name-input{
	position:absolute;
	top:3px;
	left:762px;
	width:170px;
	height:90px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:30px;
	background-image:url('../img/de36-zettel01.png');
	background-repeat:content;
}

#name-input p{
	padding:5px 0 0 10px;
	color:black;
	font-family:"Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
	font-size:16px;
	line-height:22px;	
}


/* Demo Buttons Style - Ende - */
.buttons{
	position:absolute;
	top:420px;
	left:30px;
	width:413px;
	height:68px;
	background-image:url('../img/de47-buttons01.png');
	z-index:10;
}

.schreiben, .RichtigFalsch, .zeigen, .start, .beenden, .info, .weiter{
	position:absolute;
	top:0px;
	width:93px;
	height:68px;
	z-index:30;
}

.sound00, .sound01, .sound02, .sound03, .sound04, .sound05, .sound06, .sound07, .sound08, .sound09, .sound10, .sound11, .sound12, .sound13, .sound14, .sound15, .sound16{
	position:absolute;
	top:83px;
	left:214px;	
	width:93px;
	height:68px;	
	background-image:url('../bitmaps/de23-drucker01.png');
}
/* .schreiben, .zeigen, .start, .weiter, .beenden, .info, .RichtigFalsch{
	position:absolute;
	top:280px;
	width:93px;
	height:68px; */
}
.schreiben{
	left:30px;
}

.RichtigFalsch{
	left:107px;	
}

.info{
	bottom:20px;
	left:452px;
	width:92px;
	height:92px;
}

.start{
	left:214px;
}

.weiter{
	left:214px;
}

.beenden{
	left:321px;
}
.1zeigen{
	left:137px;
}

.drucken{
	position:absolute;
	top:0px;
	left: 583px;
	1width:85px;
	1height:60px;
	1background-image:url('../img/de52-drucken.png');
	z-index:30;
}

#schreiben{
	position:absolute;
	top:265px;
	left:823px;
	width:93px;
	height:68px;
}

#zeige-zettel{
	position:absolute;
	top:149px;
	left:19px;
	width:600px;
	height:260px;
	background-image:url('../img/ma09-zettel01.png');
	background-size: content;
}

.textzeilen{
	position:absolute;
	top:80px;
	left:20px;
	width:750px;
	height:260px;
	border:0px dotted yellow;
}
#zeigeInfotext1, #zeigeInfotext2{
	position:absolute;
	left: 10px; 
	width: 580px;
	height: 40px; 
	1background-color:#FFFFCC;
	font-family:"Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
	font-size:22px;
	text-align:left;
	line-height:40px;	
	z-index:100;

    /*-moz-box-shadow: 6px 6px 6px #1c1c1c;
    -webkit-box-shadow: 6px 6px 6px #1c1c1c;
    box-shadow: 6px 6px 6px #1c1c1c;

     border:dashed 2px #8c2e2e;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright:5px;
    -moz-border-radius-bottomleft:5px;
    -moz-border-radius-bottomright:5px;
    -webkit-border-top-left-radius:5px;
    -webkit-border-top-right-radius:5px;
    -webkit-border-bottom-left-radius:5px;
    -webkit-border-bottom-right-radius:5px;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
    border-bottom-left-radius:5px;
    border-bottom-right-radius:5px; */

}
#zeigeInfotext1{
	top: 30px; 
	width: 264px;
	1font-family:"Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
	1font-size:16px;
	text-align:right;
	1line-height:24px;
	border:1px dotted red;
}

#zeigeInfotext2{
	top: 80px; 
	width: 264px;
	1font-family:"Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
	1font-size:16px;
	text-align:right;
	1line-height:24px;
	border:1px dotted red;
}

#zeigeText{
	position:absolute;
	top: 30px; 
	left: 303px; 
	width: 74px;
	height: 40px; 
	font-family:"Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
	font-size:36px;
    color:blue;
	text-align:center;
	line-height:40px;	
	border:1px dotted red;
}

#zeigeTextRichtig{
	position:absolute;
	top: 40px; 
	left: 10px; 
	width: 730px;
	height: 40px; 
	1background-color:#FFFFCC;
	font-family:"Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
	font-size:20px;
	text-align:left;
	line-height:40px;	
	border:1px dotted red;
	z-index:100;
}

#schreiblinie1, #schreiblinie2, #schreiblinie3{
	position:absolute;
	left: 30px; 
	width: 640px;
	height: 40px; 
	background-image:url('../../Deutsch-Online/img/schreiblinie01.png');
	background-size:contain;
}

#schreiblinie1{
	top:90px;
}

#schreiblinie2{
	top:135px;
}

#schreiblinie3{
	top:180px;
}

#zeigeTextMaske{
	position:absolute;
	top: 94px; 
	left: 666px; 
	width: 74px;
	height:40px;
	border:1px crimson dotted; 
}

#zeigeTextklein{
	position:absolute;
	top: 122px; 
	left: 246px; 
	width: 30px;
	height:20px;
    color:blue;
	font-family:"Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
	font-size:16px;
	border:0px crimson dotted; 
}

#zeigeTextAnzahl{
	position:absolute;
	top: 10px; 
	left: 310px; 
	width: 60px;
	height:40px;
	border:1px crimson dotted; 
}


#zeigeTextRichtigMaske{
	position:absolute;
	top: 41px; 
	left: 10px; 
	width: 730px;
	height: 40px; 
	1background-color:#FFFFCC;
	font-family:"Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
	font-size:20px;
	text-align:left;
	line-height:40px;	
	border:1px dotted red;
	z-index:100;
}

#textEingabe{
	position:absolute;
	top:-10px;
	left: 10px; 
	width: 730px;
	height: 40px; 
	1background-color:#FFFFCC;
	font-family:"Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
	font-size:20px;
	text-align:left;
	line-height:40px;	
	z-index:100;
	border:1px crimson dotted; 
}

#myField{
	position:absolute;
	top:-1px;
	left:-1px;
	width:730px;
	height:38px;
	font-family:"Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
	font-size:20px;
	line-height:38px;
	border:1px dotted green;
}

#myArea{
	top:10px;
	left:10px;
	1font-family:"Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
	1font-size:18px;
}

#zeige-text{
	position:absolute;
	top: 55px; 
	left: 867px; 
	width: 622px;
	height: 40px; 
}

#fehlerliste{
	position:absolute;
	top:212px;
	left:29px;
	1right:20px;
	width:360px;
	height:200px;
	padding-left:2px;
	font-family:"Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
	font-size:14px;
	text-align:left;
	border:1px black solid;
	background-color:#FF99FF;
	overflow:auto;
	z-index:50;

    border:solid 1px #000000;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;

    -moz-box-shadow: 5px 5px 8px #1f1f1f;
    -webkit-box-shadow: 5px 5px 8px #1f1f1f;
    box-shadow: 5px 5px 8px #1f1f1f;
}

#fehlerliste ol{
	list-style:square;
}

#gesamtliste{
	position:absolute;
	top:212px;
	left:399px;
	1right:20px;
	width:360px;
	height:200px;
	padding-left:2px;
	font-family:"Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
	font-size:14px;
	text-align:left;
	border:1px black solid;
	background-color:#CCFF99;
	overflow:auto;
	z-index:50;

    border:solid 1px #000000;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;

    -moz-box-shadow: 5px 5px 8px #1f1f1f;
    -webkit-box-shadow: 5px 5px 8px #1f1f1f;
    box-shadow: 5px 5px 8px #1f1f1f;
}


#gesamtliste ol{
	list-style:square;
}

#gesamtprozent{
	position:absolute;
	top:138px;
	left:696px;
	width:123px;
	height:150px;
	padding-left:2px;
	font-family:"Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
	font-size:10px;
	text-align:left;
	border:1px black solid;
	background-color:aliceblue;
	overflow:scroll;
}

.zettel-richtig{
	position:absolute;
	top:117px;
	left:759px;
	1left:640px;
	width:190px;
	height:200px;
	background-image:url('../img/zettel03a.png');
	background-repeat:no-repeat;
	1border:1px dotted red;
	z-index:100;
}

.zettel-falsch{
	position:absolute;
	top:300px;
	left:780px;
	1right:20px;
	width:190px;
	height:200px;
	background-image:url('../img/zettel03b.png');
	background-repeat:no-repeat;
	1border:1px dotted red;
	z-index:100;
}

#richtigPfeil{
	position:absolute;
	top:273px;
	left:60px;
	width:60px;
	height:43px;
	background-image:url('../img/arrow_green.png');
	background-repeat:no-repeat;
	1border:1px dotted red;
	z-index:100;	
}

.green-button, #richtig-prozent, #total-richtig, .red-button, #falsch-prozent, #total-falsch{
	position:absolute;
}

#total-richtig{
	top:80px;	
	left:39px;
	width:40px;
	height:30px;
	background-color:black;
	color:lime;
	text-align:center;
	font-family:"Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
	font-size:20px;
	line-height:30px;
	background-color:black;
}

.green-button{
 	top:28px;	
	left:77px;
	width:35px;
	height:35px;
	background-image:url('../img/button-green.png');
}

#richtig-prozent{
	top:80px;	
	left:95px;
	width:60px;
	height:30px;
	background-color:black;
	color:lime;
	text-align:right;
	font-family:"Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
	font-size:20px;
	line-height:30px;
	background-color:black;
}

#total-falsch{
	top:80px;	
	left:35px;
	width:40px;
	height:30px;
	background-color:black;
	color:lime;
	text-align:center;
	font-size:20px;
	line-height:30px;
	background-color:black;
}

.red-button{
	top:28px;	
	left:70px;
	width:32px;
	height:32px;
	background-image:url('../img/button-red.png');
}

.magnet01{
	position:absolute;
	top:-5px;	
	left:15px;
	width:30px;
	height:30px;
	background-image:url('../img/tn-magnet-blau.png');
}

.magnet02{
	position:absolute;
	top:-3px;	
	left:149px;
	width:30px;
	height:30px;
	background-image:url('../img/tn-magnet-rot.png');
}

.magnet03{
	position:absolute;
	top:-5px;	
	left:15px;
	width:30px;
	height:30px;
	background-image:url('../img/tn-magnet-schwarz.png');
}

.magnet04{
	position:absolute;
	top:-3px;	
	left:149px;
	width:30px;
	height:30px;
	background-image:url('../img/tn-magnet-gelb.png');
}

#falsch-prozent{
	top:80px;	
	left:85px;
	width:60px;
	height:30px;
	background-color:black;
	color:lime;
	text-align:right;
	font-size:20px;
	line-height:30px;
	background-color:black;
}

.statistik{
	position:absolute;
	top:77px;
	left:20px;
	width:362px;
	height:30px;
	line-height:30px;	
	border:0px dotted red;
}

#NrAlle{
	position:absolute;
	top:5px;
	1left:206px;
	left:5px;
	width:72px;
}

.count {
	position:absolute;
	top:0px;
	1left:290px;
	left:86px;
	width:60px;
	height:30px;
	color:aqua;
	font-family:"Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
	font-size:20px;
	line-height:30px;
	background-color:black;
	z-index:10;
    border:solid 1px #000000;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}

#Zeichen{
	position:absolute;
	top:5px;
	left:206px;
	width:93px;
	text-align:right;
}

#anzahl-buchstaben{
	position:absolute;
	top: 0px;
	left:294px;
	width:60px;
	height:30px;
	color:aqua;
	font-family:Arial, Helvetica, sans-serif;
	font-size:20px;
	line-height:30px;
	background-color:black;
    border:solid 1px #000000;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}

/* #Zeichen{
	position:absolute;
	top:0px;
	1left:186px;
	width:72px;
	text-align:right;
}

#anzahl-buchstaben{
	position:absolute;
	top: 0px;
	1left:274px;
	width:60px;
	height:30px;
	color:aqua;
	font-family:Arial, Helvetica, sans-serif;
	font-size:20px;
	line-height:30px;
	background-color:black;
} */

.count01 {
	position:absolute;
	top:306px;
	left:935px;
	width:20px;
	height:18px;
	color: #0099cc;
	border-top:0px darkgray dashed;
	z-index:250;
}

#container-a-h{
	position:absolute;
	top:10px;
	left:0px;
	width:535px;
	height:600px;
	1background-image:url('../img/de52-bg.png');
	1background-size:contain;
}

#dose{
	position:absolute;
	top:338px;
	left:261px;
	width:313px;
	height:209px;
	background-image:url('../../Deutsch-Online/img/de50-bg-dose.png');
	background-size:contain;
}

#geo-dreieck{
	position:absolute;
	top:21px;
	left:325px;
	width:142px;
	height:154px;
	background-image:url('../../Deutsch-Online/img/de50-bg-geodreieck.png');
	background-repeat:cover;
}

#nadel01{
	position:absolute;
	top:533px;
	left:612px;
	width:100px;
	height:37px;
	background-image:url('../img/nadel01.png');
	background-repeat:cover;
	z-index:100;	
}

#nadel02{
	position:absolute;
	top:533px;
	left:612px;
	width:100px;
	height:37px;
	background-image:url('../img/nadel01.png');
	background-repeat:cover;
	z-index:100;	
}

#mouseoverInfo{
	position:absolute;
	top:499px;
	left:41px;
	width:200px;
	height:132px;
	background-image:url('../img/de52-mouseover.png');
	background-size:contain;
	z-index:100;	
}

#tintenfleck01{
	position:absolute;
	top:164px;
	left:612px;
	width:100px;
	height:118px;
	background-image:url('../img/tintenfleck01.png');
	background-repeat:cover;
	z-index:10;	
}

#scater01{
	position:absolute;
	top:430px;
	left:100px;
	width:73px;
	height:166px;
	background-image:url('../img/scater01.png');
	background-repeat:cover;
	z-index:1;	
}

#scater02{
	position:absolute;
	top:470px;
	left:360px;
	width:95px;
	height:115px;
	background-image:url('../img/spider02.png');
	background-repeat:cover;
	z-index:1;	
}

#container-h-n{
	width:960px;
	height:600px;
	background-image:url('../img/de23-bg-h-n.png');
	background-repeat:no-repeat;
}

/* 
#container-n-o{
	width:960px;
	height:600px;
	background-image:url('../../Deutsch-Online/img/de23-bg-o-s.png');
	background-repeat:no-repeat;
}

#container-s-z{
	width:960px;
	height:600px;
	background-image:url('../../Deutsch-Online/img/de23-bg-t-z.png');
	background-repeat:no-repeat;
}

#container-obst{
	width:960px;
	height:600px;
	background-image:url('../../Deutsch-Online/img/de23-bg-obst.png');
	background-repeat:no-repeat;
}


#wort-oben{
	position:absolute;
	width:352px;
	height:68px;
	float:left;
	margin-top:338px;
	margin-left:25px;
}

#wort-oben li{
	list-style:none;
}

.wort{
	width:20px;
	height:23px;
	float:left;
	margin-left:28px;
	font-family:"Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
	font-size:37px;
	list-style:none;
}


#buchstaben-gross-oben{
	position:absolute;
	width:760px;
	height:68px;
	float:left;
	margin-top:395px;
	margin-left:-17px;
	font-family:"Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
	font-size:37px;
}

#buchstaben-gross-oben li{
	list-style:none;
}

#buchstaben-klein{
	position:absolute;
	width:760px;
	height:68px;
	float:left;
	margin-top:395px;
	margin-left:-17px;
	font-family:"Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
	font-size:37px;
}

#buchstaben-klein li{
	list-style:none;
}

#buchstaben-gross-unten{
	position:absolute;
	width:760px;
	height:68px;
	float:left;
	margin-top:477px;
	margin-left:-17px;
	font-family:"Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
	font-size:37px;
}

#buchstaben-gross-unten li{
	list-style:none;
}

#buchstaben-klein-oben{
	position:absolute;
	width:760px;
	height:68px;
	float:left;
	margin-top:395px;
	margin-left:-17px;
	font-family:"Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
	font-size:37px;
}

#buchstaben-klein-oben li{
	list-style:none;
}

#buchstaben-klein-unten{
	position:absolute;
	width:760px;
	height:68px;
	float:left;
	margin-top:477px;
	margin-left:-17px;
	font-family:"Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
	font-size:37px;
}

#buchstaben-klein-unten li{
	list-style:none;
}

.square {
    width: 46px;
    height: 67px;
    line-height: 67px;
    border: 1px solid black;
    margin-bottom: 5px;
    margin-left: 0px;
    text-align: center;
    float: left;
    background-color: lightblue;
    cursor: pointer;
    font-weight: bold;
    z-index:150;
}

.squaredotted {
    width: 46px;
    height: 7px;
    line-height: 67px;
    border: 1px dotted gray;
    margin-bottom: 5px;
    margin-left: 0px;
    text-align: center;
    float: left;
    color: gray;
    background-color: lightgray;
}

#list01a, #list02, #list03, #list04, #list05, #list06, #list07{
	position:absolute;
    width: 347px;
    height: 67px;
	padding:7px 5px 0 0;
	font-family:"Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
	font-size:45px;
	line-height:58px;
	text-align:center;
	color:black;
	background-color: white;
	border: 1px solid #000;	
    -moz-border-radius-topleft: 12px;
    -moz-border-radius-topright:12px;
    -moz-border-radius-bottomleft:12px;
    -moz-border-radius-bottomright:12px;
    -webkit-border-top-left-radius:12px;
    -webkit-border-top-right-radius:12px;
    -webkit-border-bottom-left-radius:12px;
    -webkit-border-bottom-right-radius:12px;
    border-top-left-radius:12px;
    border-top-right-radius:12px;
    border-bottom-left-radius:12px;
    border-bottom-right-radius:12px;

	z-index:100;		
}

#list01{
	position:absolute;
	top:116px;
	left:27px;
	width:623px;
	height:41px;
}

 */

/* "You did it!" message */
#successMessage {
  position: absolute;
  left: 580px;
  top: 250px;
  width: 0;
  height: 0;
  z-index: 100;
  background-image:url('../img/success-bg-de32.jpg');
  background-size: cover;
  background-color:white;
  border: 2px solid #333;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  -moz-box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
  -webkit-box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
  box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
  padding: 20px;
  z-index:350;
}

#clickme {
  position: absolute;
  left: 125px;
  top: 412px;
  width: 250px;
  height:25px;
  font-family:Arial, Helvetica, sans-serif;
  font-size:large;
  text-align:center;
  background-color:lime;
  z-index: 100;
  border: 2px solid #333;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  -moz-box-shadow: 1.3em 1.3em 1.5em rgba(0, 0, 0, .8);
  -webkit-box-shadow: 1.3em 1.3em 1.5em rgba(0, 0, 0, .8);
  box-shadow: 1.3em 1.3em 1.5em rgba(0, 0, 0, .8);
  padding: 0px;
  z-index:360;

}

#arbeitsanweisung {
  position: absolute;
  left: 580px;
  top: 250px;
  width: 0;
  height: 0;
  z-index: 100;
  background-image:url('../img/de52-zeigeInfo.jpg');
  background-size: cover;
  background-color:white;
  border: 2px solid #333;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  -moz-box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
  -webkit-box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
  box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
  padding: 20px;
  z-index:350;
}

#clickme2 {
  position: absolute;
  left: 125px;
  top: 412px;
  width: 250px;
  height:25px;
  font-family:Arial, Helvetica, sans-serif;
  font-size:large;
  text-align:center;
  background-color:lime;
  z-index: 100;
  border: 2px solid #333;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  -moz-box-shadow: 1.3em 1.3em 1.5em rgba(0, 0, 0, .8);
  -webkit-box-shadow: 1.3em 1.3em 1.5em rgba(0, 0, 0, .8);
  box-shadow: 1.3em 1.3em 1.5em rgba(0, 0, 0, .8);
  padding: 0px;
  z-index:360;

}


footer {
  position: fixed;
  left:0;
  bottom:0;
  width: 100%;
  height: 40px;
  background: rgba(0,0,0,1);
  z-index: 1000;
  
  -o-box-shadow: 0px 5px 10px rgba(0,0,0,0.8);
  -moz-box-shadow: 0px 5px 10px rgba(0,0,0,0.8);
  -webkit-box-shadow: 0px 5px 10px rgba(0,0,0,0.8);
  box-shadow: 0px 5px 10px rgba(0,0,0,0.8);
}

footer p {
  margin: 0px 0 0 20px;
  font-family:"Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
  font-size:13px;
  line-height:40px;
}

footer img {
  margin: 0px;
}


footer a{
	color:white;
	text-decoration:none;
}
