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

form {
	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 - */
.codrops-demos{
	position:absolute;
	top:338px;
	left:396px;
    text-align: left;
	display: block;
	line-height: 30px;
	padding: 5px 0px;
}
.codrops-demos a{
    display: inline-block;
	margin: 0px 4px;
	padding: 0px 6px;
	color:black;
	line-height: 20px;	
	font-size: 13px;
	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;

}
.codrops-demos a:hover{
	color: #333;
}
.codrops-demos a:active{
	background: #fff;
}
.codrops-demos a.current-demo,
.codrops-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;
}

/* Demo Buttons Style - Ende - */

.fertig{
	position:absolute;
	top:249px;
	left:29px;
	width:145px;
	height:86px;
}

.start{
	position:absolute;
	top:249px;
	left:173px;
	width:145px;
	height:86px;
}

.weiter{
	position:absolute;
	top:249px;
	left:173px;
	width:145px;
	height:86px;
}

.beenden{
	position:absolute;
	top:249px;
	left:329px;
	width:145px;
	height:86px;
}

#fehlerliste{
	position:absolute;
	top:443px;
	left:770px;
	width:172px;
	height:157px;
	padding-left:5px;
	font-family:"Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
	font-size:18px;
	border:1px gray dotted;
	overflow:scroll;
}

#fehlerliste ol{
	list-style:square;
}

#total-richtig{
	position:absolute;
	top:342px;
	left:840px;
	width:85px;
	height:37px;
	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:32px;
}

#total-falsch{
	position:absolute;
	top:385px;
	left:840px;
	width:85px;
	height:37px;
	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:32px;
}


.count {
	position:fixed;
	top:306px;
	left:910px;
	width:20px;
	height:18px;
	color: #0099cc;
	border-top:1px darkgray dashed;
	z-index:250;
}

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

#moritz-start {
	position:fixed;
	top:21px;
	left:31px;
	width:443px;
	height:217px;
	background-image:url('../bitmaps/moritz-start.png');
	z-index:150;
}

#moritz-frage {
	position:fixed;
	top:21px;
	left:31px;
	width:443px;
	height:217px;
	background-image:url('../bitmaps/moritz-frage.png');
	z-index:150;
}

#moritz-richtig {
	position:fixed;
	top:21px;
	left:31px;
	width:443px;
	height:217px;
	background-image:url('../bitmaps/moritz-richtig.png');
	z-index:150;
}

#moritz-falsch {
	position:fixed;
	top:21px;
	left:31px;
	width:443px;
	height:217px;
	background-image:url('../bitmaps/moritz-falsch.png');
	z-index:150;
}

#moritz-tschuess {
	position:fixed;
	top:21px;
	left:31px;
	width:443px;
	height:217px;
	background-image:url('../bitmaps/moritz-tschuess.png');
	z-index:150;
}

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

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

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

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

#container-obst{
	width:960px;
	height:600px;
	background-image:url('../img/de23-bg-obst.jpg');
	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:764px;
	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:764px;
	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:764px;
	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:764px;
	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:764px;
	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;
}

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

#anzahl-buchstaben{
	position:absolute;
	top:300px;
	left:24px;
	width:50px;
	height:20px;
}


#list01{
	margin-top:335px;
	margin-left:24px;
}

footer {
  position: fixed;
  left:0;
  bottom:0;
  width: 100%;
  height: 40px;
  background: rgba(0,0,0,0.8);
  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:16px;
  line-height:40px;
}

footer img {
  margin: 0px;
}


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