body{
	top:0px;
	left:0px;
}

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;
}

#de24Titel{
	position:absolute;
	top:34px;
	left:151px;
	width:380px;
	height:16px;
	/* 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);
}

/* Demo Buttons Style - Ende - */

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

.schreiben{
	left:25px;
}

#schreiben{
	position:absolute;
	top:222px;
	left:25px;
	width:93px;
	height:68px;
}

.zeigen{
	top:322px;
	left:125px;
}

.RichtigFalsch{
	top:222px;
	left:125px;	
}

.start{
	left:225px;
}

.weiter{
	left:225px;
}

.beenden{
	left:458px;
	width:93px;
}

.info{
	left:558px;
	width:93px;
}

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

#zeigeText{
	position:absolute;
	top: 57px; 
	left: 25px; 
	width: 627px;
	height: 40px; 
	font-family:"Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
	font-size:36px;
	text-align:left;
	line-height:41px;
}

#zeigeTextMaske{
	position:absolute;
	top: 55px; 
	left: 23px; 
	width: 629px;
	height: 42px;
	border:0px crimson dotted; 
}

#textEingabe{
	position:absolute;
	top:80px;
	left:25px;
	width:622px;
	height:40px;
}

#myField{
	position:absolute;
	top:33px;
	left:0px;
	width:623px;
	height:41px;
	font-family:"Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
	font-size:36px;
	line-height:41px;
}

#myArea{
	position:absolute;
	top:234px;
	left:-6px;
	width:460px;
	height:254px;
	font-family:"Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
	font-size:16px;

}

#fehlerliste{
	position:absolute;
	top:325px;
	left:671px;
	width:287px;
	height:245px;
	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;
}

#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;
}

#total-richtig{
	position:absolute;
	top:60px;
	left:710px;
	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{
	position:absolute;
	top:60px;
	left:673px;
	width:32px;
	height:32px;
	background-image:url('../img/button-green.png');
}

#richtig-prozent{
	position:absolute;
	top:60px;
	left:760px;
	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{
	position:absolute;
	top:100px;
	left:710px;
	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;
}

.red-button{
	position:absolute;
	top:100px;
	left:673px;
	width:32px;
	height:32px;
	background-image:url('../img/button-red.png');
}

#falsch-prozent{
	position:absolute;
	top:100px;
	left:760px;
	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;
}
.count {
	position:absolute;
	top:60px;
	left:900px;
	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;
}

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

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

#container-a-h{
	width:960px;
	height:600px;
	background-image:url('../img/de24-bg4.jpg');
	background-repeat:no-repeat;
}

#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;
}

#NrAlle{
	position:absolute;
	top:65px;
	left:823px;
	width:72px;
	height:20px;
}

#Zeichen{
	position:absolute;
	top:103px;
	left:823px;
	width:72px;
	height:20px;
	text-align:right;
}

/* "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/de24-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;
}