#hg {
	display: block; position: absolute;
	left: 0px; top: 0px;
	width: 1024px; height: 768px;
	background: url('../img/hintergrund.jpg');
}

#headline {
	display: block; position: absolute;
	left: 25px; top: 28px;
}

#einleitung {
	display: block; position: absolute;
	left: 25px; top: 117px;
}

#verweis {
	display: block; position: absolute;
	left: 610px; top: 28px;
}

.start {
	display: block; position: relative;
	width: 100px; height: 45px;
	padding-top: 15px !important;
	background-color: #006ab3;
	
	-webkit-transition: all 1500ms;
	-moz-transition: all 1500ms;
	-o-transition: all 1500ms;
	-ms-transition: all 1500ms;
	transition: all 1500ms;
}

#button {
	display: block; position: absolute;
	left: 25px; bottom: 20px;
	width: 300px;
}

.button-rund {
	float: left;
	margin: 0 10px 0 0;
}

.button-label {
	padding-top: 10px;
}

#spielfeld {
	display: block; position: absolute;
	left: 0px; top: 0px;
	width: 1024px; height: 768px;
}

#leichtschwer {
	display: block; position: absolute;
	left: 0px; top: 325px;
	width: 1124px;
	padding: 20px 0;
	background-color: white;
	text-align: center;
	box-shadow: 0px 0px 10px rgba(0,0,0,.4);
}

#leichtschwer .button {
	margin: 0 10px;
}

#fertig {
	display: block; position: absolute;
	left: 25px; top: 380px;
	padding: 20px 20px;
	background-color: white;
	border: 3px solid #006ab3;
	border-radius: 15px;
	box-shadow: 4px 4px 8px rgba(0,0,0,.3);
}

/***************************************************/

.reimtext-dragtext {
	background-color: white;
	border: 2px solid #e10000;
	border-radius: 10px;
	padding: 7px 10px 5px 10px;
	box-shadow: 2px 2px 7px rgba(0,0,0,0.5);
	cursor: pointer;
}

.reimtext-dragbild { cursor: pointer; }

.reimtext-text { font-size: 21px; }

/* Text Gedicht */
#reimtext-text-1 { position: absolute; left: 30px;  top: 180px; }
#reimtext-text-2 { position: absolute; left: 30px;  top: 330px; }
#reimtext-text-3 { position: absolute; left: 30px;  top: 480px; }
#reimtext-text-4 { position: absolute; left: 500px; top: 180px; width: 450px; }
#reimtext-text-5 { position: absolute; left: 500px; top: 330px; width: 450px; }


/* Die Drags für Leicht */
#reimtext-dragtext-1,
#reimtext-dragtext-2,
#reimtext-dragtext-3,
#reimtext-dragtext-4,
#reimtext-dragtext-5 { position: absolute; }

.rd1 { left: 420px; top: 570px; }
.rd2 { left: 540px; top: 520px; }
.rd3 { left: 650px; top: 570px; }
.rd4 { left: 760px; top: 520px; }
.rd5 { left: 870px; top: 570px; }

/* Die Bilder im Text für Leicht */
#reimtext-bildimtext-1  { position: absolute; left: 280px; top: 253px; width: 66px;  height: 76px; } /* Mond */
#reimtext-bildimtext-2  { position: absolute; left: 300px; top: 404px; width: 89px;  height: 75px; } /* Wurm */
#reimtext-bildimtext-3  { position: absolute; left: 282px; top: 557px; width: 85px;  height: 75px; } /* Spinne */
#reimtext-bildimtext-4  { position: absolute; left: 804px; top: 256px; width: 113px; height: 65px; } /* Welle */
#reimtext-bildimtext-5  { position: absolute; left: 746px; top: 400px; width: 105px; height: 78px; } /* Fluss */

#reimtext-droptext-1 {                        } /* Mond */
#reimtext-droptext-2 {                        } /* Wurm */
#reimtext-droptext-3 {                        } /* Spinne */
#reimtext-droptext-4 { margin: 0 40px 0 30px; } /* Welle */
#reimtext-droptext-5 { margin: 0 30px 0 30px; } /* Fluss */

#reimtext-droptext-4, #reimtext-droptext-5 {
	-webkit-transition-duration: 1000ms;
	-moz-transition-duration: 1000ms;
	-ms-transition-duration: 1000ms;
	-o-transition-duration: 1000ms;
}


/* Die Drags für Schwer (Positionen, werden zufällig gefüllt) */
#reimtext-dragbild-1 { position: absolute; width: 66px;  height: 76px; } /* Mond */
#reimtext-dragbild-2 { position: absolute; width: 89px;  height: 75px; } /* Wurm */
#reimtext-dragbild-3 { position: absolute; width: 85px;  height: 75px; } /* Spinne */
#reimtext-dragbild-4 { position: absolute; width: 113px; height: 65px; } /* Welle */
#reimtext-dragbild-5 { position: absolute; width: 105px; height: 78px; } /* Fluss */

.rt1 { left: 420px; top: 570px; }
.rt2 { left: 540px; top: 520px; }
.rt3 { left: 650px; top: 570px; }
.rt4 { left: 760px; top: 520px; }
.rt5 { left: 870px; top: 570px; }

/* Die Drops für Schwer */
#reimtext-dropbild-1 { padding: 20px 0 20px 0;                 } /* Mond */
#reimtext-dropbild-2 { padding: 20px; margin: 0 -20px 0 -20px; } /* Wurm */
#reimtext-dropbild-3 {                                         } /* Spinne */
#reimtext-dropbild-4 { padding: 20px; margin: 0 -20px 0 -20px; } /* Welle */
#reimtext-dropbild-5 { padding: 20px; margin: 0 -20px 0 -20px; } /* Fluss */

#reimtext-dropbild-4, #reimtext-dropbild-5 {
	-webkit-transition-duration: 300ms;
	-moz-transition-duration: 300ms;
	-ms-transition-duration: 300ms;
	-o-transition-duration: 300ms;
}

.reimtext-fertig {
	position: absolute;
	left: 600px;
	top: 560px;
	width: 323px;
	height: 170px;
	z-index: 1;
	display: none;
}