body{
	top:0px;
	left:0px;
	background-image:url('../img/de34-bg.jpg');
	background-repeat:no-repeat;
}

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

#de30Titel{
	position:absolute;
	top:44px;
	left:80px;
	width:270px;
	height:16px;
	/* background-color:#CCCCCC; */
	font-family:"Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
	font-size:13px;
	font-weight:bold;
	text-align:center;
	line-height:16px;
	z-index:240;

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

    -moz-box-shadow: 2px 2px 2px #001010;
    -webkit-box-shadow: 2px 2px 2px #001010;
    box-shadow: 2px 2px 2px #001010;

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

/* Demo Buttons Style - Ende - */

.schreiben, .zeigen, .start, .weiter, .beenden, .info, .RichtigFalsch{
	position:absolute;
	width:89px;
	height:65px;
}

.schreiben{
	top:150px;
	left:80px;
	width:89px;
	height:65px;
}

#schreiben{
	position:absolute;
	top:150px;
	left:80px;
	width:89px;
	height:65px;
}

.zeigen{
	top:150px;
	left:175px;
}

.RichtigFalsch{
	top:150px;
	left:175px;	
}

.start{
	top:150px;
	left:270px;
}

.weiter{
	top:150px;
	left:270px;
}

.beenden{
	top:560px;
	left:358px;
	width:89px;
}

.info{
	top:560px;
	left:263px;
	width:89px;
}

#characters34, #characters34a, #characters34b, #characters34c, #characters34d, #characters34e, #characters34f, #characters34g{
	position:absolute;
	top:524px;
	left:60px;
	width:160px;
	height:59px;
	transform:rotate(-5deg);
	-ms-transform:rotate(-5deg); /* IE 9 */
	-webkit-transform:rotate(-5deg);
	-moz-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
	-webkit-transition: all 1s ease-in-out;
}

#characters34:hover, #characters34a:hover, #characters34b:hover, #characters34c:hover, #characters34d:hover, #characters34e:hover, #characters34f:hover, #characters34g:hover {
	-moz-transform: scale(2);
	-o-transform: scale(2);
	transform: scale(2);
	-webkit-transform: scale(2);
}

#characters34{
	background-image:url('../bitmaps/characters_a-b.png');
}

#characters34a{
	background-image:url('../bitmaps/characters_c-f.png');
}

#characters34b{
	background-image:url('../bitmaps/characters_f-h.png');
}

#characters34c{
	background-image:url('../bitmaps/characters_h-l.png');
}

#characters34d{
	background-image:url('../bitmaps/characters_l-m.png');
}

#characters34e{
	background-image:url('../bitmaps/characters_n-s.png');
}

#characters34f{
	background-image:url('../bitmaps/characters_s-s.png');
}

#characters34g{
	background-image:url('../bitmaps/characters_t-z.png');
}

/* Bilder zoomen Anfang */
.muehle01, .tor01{
	position:absolute;
	-ms-transform:scale(0.08); /* IE 9 */
	-webkit-transform:scale(0.08);
	transform:scale(0.08);
	-moz-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
	-webkit-transition: all 1s ease-in-out;
}

.muehle01{
	top:275px;
	left:319px;
	width:400px;
	height:400px;
	background-image:url('../img/de34-muehle01.png');
}

.tor01{
	top:407px;
	left:301px;
	width:400px;
	height:400px;
	background-image:url('../img/de34-tor01.png');
}

.muehle01:hover ,.tor01:hover{
	-webkit-transform: rotate(360deg) scale(1);
    -moz-transform: rotate(360deg) scale(1);
    -ms-transform: rotate(360deg) scale(1);
    -o-transform: rotate(360deg) scale(1);
    transform: rotate(360deg) scale(1);
}

.muehle01:hover{
    -moz-transform-origin: 50% 0%;
	-ms-transform-origin: 50% 0%;
	-o-transform-origin: 50% 0%;
	-webkit-transform-origin: 50% 0%;
	transform-origin: 20% 0%;
}

.tor01:hover{
    -moz-transform-origin: 0% 0%;
	-ms-transform-origin: 0% 0%;
	-o-transform-origin: 0% 0%;
	-webkit-transform-origin: 0% 0%;
	transform-origin: 0% 0%;
}

/* Bilder zoomen Ende */
#zeige-text{
	position:absolute;
	top: 343px; 
	left: 25px; 
	width: 280px;
	height: 40px; 
}

#zeigeText{
	position:absolute;
	top: 69px; 
	left: 75px; 
	width: 280px;
	height: 26px; 
	font-family:"Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
	font-size:24px;
	text-align:left;
	line-height:26px;
	1border:1px red dotted;
	background-color:#FFFF99;
}

#zeigeTextMaske{
	position:absolute;
	top: 69px; 
	left: 75px; 
	width: 280px;
	height: 26px; 
	border:1px red dotted;
}

#textEingabe{
	position:absolute;
	top:84px;
	left:268px;
	width:286px;
	height:26px;
}

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

#myFieldMaske{
	position:absolute;
	top:105px;
	left:75px;
	width:282px;
	height:28px;
	background-image:url('../img/de34-text-eingabe.jpg');
}

#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:261px;
	left:70px;
	width:165px;
	height:181px;
	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:0px black solid;
	1background-color:aliceblue;
	overflow-y:scroll;
}

#fehlerliste ol{
	list-style:square;
}

#gesamtliste{
	position:absolute;
	top:220px;
	left:65px;
	width:130px;
	height:110px;
	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:0px black solid;
	1background-color:aliceblue;
	overflow-y:scroll;
}

#gesamtliste ol{
	list-style:square;
}

#gesamtprozent, #total-richtig, #richtig-prozent, #total-falsch, #falsch-prozent, .count, #anzahl-buchstaben{
    border:solid 0px #000000;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    -moz-box-shadow:inset 3px 3px 3px #080808;
    -webkit-box-shadow:inset 3px 3px 3px #080808;
    box-shadow:inset 3px 3px 3px #080808;

}

#gesamtprozent{
	position:absolute;
	top:38px;
	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:247px;
	left:362px;
	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:18px;
	line-height:30px;
	background-color:grey;
}

.green-button{
	position:absolute;
	top:247px;
	left:325px;
	width:30px;
	height:30px;
	background-image:url('../img/button-green.png');
}

#richtig-prozent{
	position:absolute;
	top:247px;
	left:407px;
	width:50px;
	height:30px;
	background-color:grey;
	color:lime;
	text-align:right;
	font-family:"Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
	font-size:18px;
	line-height:30px;
}

#total-falsch{
	position:absolute;
	top:284px;
	left:362px;
	width:40px;
	height:30px;
	background-color:grey;
	color:lime;
	text-align:center;
	font-family:"Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
	font-size:18px;
	line-height:30px;
}

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

#falsch-prozent{
	position:absolute;
	top:284px;
	left:407px;
	width:50px;
	height:30px;
	background-color:grey;
	color:lime;
	text-align:right;
	font-family:"Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
	font-size:18px;
	line-height:30px;
}
.count {
	position:absolute;
	top:247px;
	left:485px;
	width:60px;
	height:30px;
	color:aqua;
	font-family:"Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
	font-size:18px;
	line-height:30px;
	background-color:grey;
	z-index:250;
}

.count01 {
	position:absolute;
	top:267px;
	left:485px;
	width:20px;
	height:18px;
	color: #0099cc;
	border-top:0px darkgray dashed;
	z-index:250;
    1border:solid 1px #000000;
}

#anzahl-buchstaben{
	position:absolute;
	top:284px;
	left:485px;
	width:60px;
	height:30px;
	color:aqua;
	font-family:"Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
	font-size:18px;
	line-height:30px;
	background-color:grey;
}

#container-a-h{
	width:960px;
	height:600px;
	1background-image:url('../img/de32-bg.jpg');
	1background-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:237px;
	left:533px;
	width:72px;
	height:20px;
}

#Zeichen{
	position:absolute;
	top:271px;
	left:532px;
	width:72px;
	height:20px;
}

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