body{
	top:0px;
	left:0px;
	background-color:black;
	1background-image:url('../img/de49-bg-tiled.jpg');
	1background-repeat:repeat;
	overflow:hidden;
}

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:11px;
	left:273px;
	width:700px;
	height:17px;
	/* background-color:#CCCCCC; */
	font-family:"Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
	font-size:16px;
	font-weight:bold;
	text-align:center;
	line-height:16px;
	z-index:240;

    border:solid 0px #000000;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;

    -moz-box-shadow: 0px 0px 0px #000000;
    -webkit-box-shadow: 0px 0px 0px #000000;
    box-shadow: 0px 0px 0px #000000;

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

#name-input{
	position:absolute;
	top:10px;
	right:20px;
	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 0px;
	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:240px;
	left:30px;
	width:413px;
	height:68px;
	background-image:url('../img/de47-buttons01.png');
	z-index:10;
}

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


/* .schreiben, .zeigen, .start, .weiter, .beenden, .info, .RichtigFalsch{
	position:absolute;
	top:280px;
	width:93px;
	height:68px; */
}

.info{
	left:594px;
	width:92px;
	height:92px;
}

.schreiben{
	left:30px;
}

.zeigen{
	left:137px;
}

.RichtigFalsch{
	left:137px;	
}

.start{
	left:243px;
}

.weiter{
	left:243px;
}

.beenden{
	left:350px;
}

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

#zeigeText, #zeigeTextMaske, #zeigeTextRichtig, #zeigeTextRichtigMaske, #myField, #myArea, #textEingabe{
	position:absolute;
	left: 30px; 
	width: 640px;
	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; */

}

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

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

#schreiblinie1{
	top:90px;
}

#schreiblinie2{
	top:135px;
}

#schreiblinie3{
	top:180px;
}

#zeigeTextMaske{
	top: 90px; 
	border:1px crimson dotted; 
}

#zeigeTextRichtig{
	position:absolute;
	top: 135px; 
	border:1px dotted red;
}

#zeigeTextRichtigMaske{
	position:absolute;
	top: 135px; 
	border:1px dotted red;
}

#textEingabe{
	top: 180px; 
	border:1px crimson dotted; 
}

#myField, #myArea{
}

#myField{
	top:0px;
	left:0px;
	1font-size:16px;
	1line-height:24px;
}

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

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

#fehlerliste{
	position:absolute;
	top:370px;
	left:662px;
	width:320px;
	height:210px;
	padding-left:2px;
	font-family:"Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
	font-size:12px;
	text-align:left;
	border:1px black solid;
	background-color:aliceblue;
	overflow:scroll;
}

#fehlerliste ol{
	list-style:square;
}

.drucken{
	margin-left: 581px;
	margin-top: 242px;
	width:93px;
}


#gesamtliste{
	position:absolute;
	top:138px;
	left:671px;
	width:287px;
	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;
}

#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:375px;
	left:30px;
	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:309px;
	left:631px;
	width:190px;
	height:200px;
	background-image:url('../img/zettel03b.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:120px;	
	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:68px;	
	left:77px;
	width:35px;
	height:35px;
	background-image:url('../img/button-green.png');
}

#richtig-prozent{
	top:120px;	
	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:120px;	
	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:68px;	
	left:70px;
	width:32px;
	height:32px;
	background-image:url('../img/button-red.png');
}

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

#NrAlle{
	position:absolute;
	top:50px;
	left:60px;
	width:72px;
	height:30px;
	line-height:30px;
}

.count {
	position:absolute;
	top:50px;
	left:150px;
	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:250;
}

#Zeichen{
	position:absolute;
	top:50px;
	left:263px;
	width:72px;
	height:30px;
	line-height:30px;
	text-align:right;
}

#anzahl-buchstaben{
	position:absolute;
	top:50px;
	left:360px;
	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:0px;
	left:0px;
	width:1000px;
	height:625px;
	background-image:url('../img/de50-bg.png');
	background-size:contain;
}

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

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

#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('../img/de23-bg-o-s.png');
	background-repeat:no-repeat;
}

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

#container-obst{
	width:960px;
	height:600px;
	background-image:url('../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-de24.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/de50-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;
}