/* 03 ##################   ueben ##########################*/

#input_area {
	position: absolute;
	width: 1px;
	font-size: 1px;
	color: transparent;
	background-color: transparent;
	border: none;
	margin: 0;
	overflow: hidden;
	z-index: 5;
}

#tast_top {
	height: 101px;

	/* float               : left;               */
	/* padding-right       : 10px;               */
	/* border-right        : 1px solid #1B5A83;  */
}

#tast_skala {
	height: 90px;
	width: 895px;
	/* float               : left;               */
}

#tast { /* float               : left; */
	/* background          : #ffDCF2;  */
	/* border-right        : 1px solid #1B5A83; */
	font-size: 12px;
	font-family: arial, sans-serif;
	letter-spacing: 0.5px;
	margin-top: 8px;
}

/* Tasten fuer Tastatur */
/* Tasten Platzhalter */
.def {
	margin: 2px;
	-moz-border-radius-topright: 10px;
	-moz-border-radius-bottomright: 10px;
	-moz-border-radius-bottomleft: 10px;
	-moz-border-radius-topleft: 10px;
	-webkit-border-top-left-radius: 10px;
	-webkit-border-top-right-radius: 10px;
	-webkit-border-bottom-left-radius: 10px;
	-webkit-border-bottom-right-radius: 10px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.25);
	-webkit-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.25);
}

.xx {
	height: 65px;
	width: 60px;
	float: left;
}

.capsLockActive {
	background-color: rgb(224, 63, 13) !important;
	color: #ffffff !important;
}


/* Taste BLAU */
.t1 {
	height: 65px;
	width: 65px;
	float: left;
	font-size: 18px;
	font-family: arial, sans-serif;
	letter-spacing: 0.5px;
	font-weight: bold;
	color: #3D3D3D;
}

.t1>.def {
	background-color: rgb(117, 197, 240);
	height: 55px;
	width: 55px;
	border: 2px solid #FFFFFF;
}

/* Taste BLAU GRUNDSTELLUNG*/
.t1GR {
	height: 65px;
	width: 65px;
	float: left;
	font-size: 18px;
	font-family: arial, sans-serif;
	letter-spacing: 0.5px;
	font-weight: bold;
	color: #ffffff;

}

.t1GR>.def {
	background-color: rgb(77, 157, 240);
	height: 55px;
	width: 55px;
	border: 2px solid rgb(0, 119, 255);
	text-shadow: 1px 1px rgb(0, 87, 185);
}

/*.t1:hover         {
                  background          : url(../images/th.gif) no-repeat left top;
                  color               : #ffffff;
                  }    */

/* Taste Blau - kleine Schrift */
.t10 {
	height: 65px;
	width: 65px;
	float: left;
	font-size: 12px;
	font-family: arial, sans-serif;
	letter-spacing: 0.5px;
	font-weight: bold;
	color: #3D3D3D;
}

.t10>.def {
	background-color: #E8E8E8;
	height: 55px;
	width: 55px;;
	border: 2px solid #ffffff;
}

.t10>.def > .kb {
    height:24px;
}

.tPause {
	height: 65px;
	width: 65px;
	float: left;
	font-size: 12px;
	font-family: arial, sans-serif;
	letter-spacing: 0.5px;
	font-weight: bold;
	color: #3D3D3D;
	cursor: pointer;
}

.tPause>.def {
	background-color: #E8E8E8;
	background-image: url(../images/tPause.png);
	background-position: -2px 0px;
	height: 55px;
	width: 55px;
	border: 2px solid #ffffff;
}

.tPlay {
	height: 65px;
	width: 65px;
	float: left;
	font-size: 12px;
	font-family: arial, sans-serif;
	letter-spacing: 0.5px;
	font-weight: bold;
	color: #3D3D3D;
	cursor: pointer;
}

.tPlay>.def {
	background-color: #E8E8E8;
	background-image: url(../images/tPlay.png);
height: 55px;
	width: 55px;
	border: 2px solid #2C3C7B;
}

/*.t10:hover         {
                  background          : url(../images/th.gif) no-repeat left top;
                  color               : #ffffff;
                  }   */

/* Taste ROT */
.tr1 {
	height: 65px;
	width: 65px;
	float: left;
	font-size: 18px;
	font-family: arial, sans-serif;
	letter-spacing: 0.5px;
	font-weight: bold;
	color: #3D3D3D;
}

.tr1>.def {
	background-color: rgb(247, 175, 033);
	height: 55px;
	width: 55px;
	border: 2px solid #ffffff;
}

/* Taste ROT GRUNDSTELLUNG */
.tr1GR {
	height: 65px;
	width: 65px;
	float: left;
	font-size: 18px;
	font-family: arial, sans-serif;
	letter-spacing: 0.5px;
	font-weight: bold;
	color: #ffffff;
}

.tr1GR>.def {
	background-color: rgb(237, 135, 003);
	height: 55px;
	width: 55px;
	border: 2px solid rgb(255, 208, 0);
	text-shadow: 1px 1px rgb(190, 108, 0);;
}

/*.tr1:hover         {
                  background          : url(../images/trh.gif) no-repeat left top;
                  color               : #ffffff;
                  } */

/* Taste GRUEN */
.tg1 {
	height: 65px;
	width: 65px;
	float: left;
	font-size: 18px;
	font-family: arial, sans-serif;
	letter-spacing: 0.5px;
	font-weight: bold;
	color: #3D3D3D;
}

.tg1>.def {
	background-color: rgb(132, 194, 037);
height: 55px;
	width: 55px;
	border: 2px solid #ffffff;
}

/* Taste GRUEN GRUNDSTELLUNG*/
.tg1GR {
	height: 65px;
	width: 65px;
	float: left;
	font-size: 18px;
	font-family: arial, sans-serif;
	letter-spacing: 0.5px;
	font-weight: bold;
	color: #ffffff;
}

.tg1GR>.def {
	background-color: rgb(72, 174, 007);
	height: 55px;
	width: 55px;
	border: 2px solid rgb(97, 253, 0);
	text-shadow: 1px 1px rgb(50, 131, 0);
}

/*.tg1:hover         {
                  background          : url(../images/tgh.gif) no-repeat left top;
                  color               : #ffffff;
                  }    */

/* Taste Gelb */
.ty1 {
	height: 65px;
	width: 65px;
	float: left;
	font-size: 18px;
	font-family: arial, sans-serif;
	letter-spacing: 0.5px;
	font-weight: bold;
	color: #3D3D3D;
}

.ty1>.def {
	background-color: rgb(255, 245, 000);
	height: 55px;
	width: 55px;
	border: 2px solid #ffffff;
}

/* Taste Gelb GRUNDSTELLUNG */
.ty1GR {
	height: 65px;
	width: 65px;
	float: left;
	font-size: 18px;
	font-family: arial, sans-serif;
	letter-spacing: 0.5px;
	font-weight: bold;
	color: #ffffff;
	
}

.ty1GR>.def {
	background-color: rgb(240, 210, 000);
height: 55px;
	width: 55px;
	border: 2px solid rgb(255, 251, 0);
	text-shadow: 1px 1px rgb(209, 185, 2);
}

/*.ty1:hover        {
                  background          : url(../images/tyh.gif) no-repeat left top;
                  color               : #ffffff;
                  } 
                  */
.t15 {
	height: 65px;
	width: 100px;
	float: left;
}

.t15>.def {
	background-color: #E8E8E8;
	height: 55px;
	border: 2px solid #ffffff;
    font-size: 12px;
    font-weight: bold;
    color: rgb(61, 61, 61);
    text-align: left;

}

.t15 >.def > .kb {
    padding-top: 14px;
    padding-left: 5px;
    font-size: 25px;
}

.t20 {
	height: 65px;
	width: 135px;
	float: left;
	/* padding-right       : 10px;               */
	/* border-right        : 1px solid #1B5A83;  */
}

.t20>.def {
	background-color: #E8E8E8;
	height: 55px;
	border: 2px solid #ffffff;
}

.t20 > .def > .kb {
    padding-right: 8px;
    width: 30px;
    float:right;
    padding-top: 18px;
    font-size: 30px;
}

.t25 {
	height: 65px;
	width: 165px;
	float: left;
	/* padding-right       : 10px;               */
	/* border-right        : 1px solid #1B5A83;  */
}

.t25>.def {
	background-color: #E8E8E8;
	height: 55px;
	border: 2px solid #ffffff;
}


.t25 >.def > .kb {
    padding-top: 14px;
    padding-left: 5px;
    font-size: 25px;
}

.t7 {
	height: 65px;
	width: 455px;
	float: left;
}

.t7>.def {
	background-color: #E8E8E8;
	height: 55px;
	border: 2px solid #ffffff;
}

/*.t7:hover         {             
                  background          : url(../images/t7h.gif) no-repeat left top;
                  }     */

/* Returntaste   */
.tE1 {
	height: 65px;
	width: 100px;
	float: left;
	font-weight: bold;
	color: #3D3D3D;
}

.innerShadow {
	-moz-box-shadow:    inset 0 0 12px #4b4a4a;
	-webkit-box-shadow: inset 0 0 12px #4b4a4a;
	box-shadow:         inset 0 0 12px #4b4a4a;
 }

.hover {
	color: white;
}

.tE1>.color {
	background-color: #E8E8E8;
	height: 55px;
	border: 2px solid #ffffff;
	border-bottom: #E8E8E8;
}

.tE1>.def {
	-moz-border-radius-bottomright: 0px;
	-webkit-border-bottom-right-radius: 0px;
}

.tE2 {
	position: relative;
	top: -3px;
	height: 65px;
	width: 61px;
	float: left;
	color: #3D3D3D;
	margin-left: 2px;
}

.tE2>.def {
	background-color: #E8E8E8;
	height: 66px;
	
	border-bottom: 2px solid #FFFFFF;
	border-left: 2px solid #FFFFFF;
	border-right: 2px solid #FFFFFF;
	margin: 0px;
	margin-top: -3px;
	-moz-border-radius-topright: 0px;
	-moz-border-radius-topleft: 0px;
	-webkit-border-top-left-radius: 0px;
	-webkit-border-top-right-radius: 0px;

	box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.25) !important;
	-webkit-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.25) !important;
}

/* Falscher Tastendruck */
.rot {
	height: 56px;
	border: 3px solid red;
	margin: 1px;
	color: red;
	text-shadow: 1px 1px rgb(183 0 0);
	-moz-border-radius-topright: 10px;
	-moz-border-radius-bottomright: 10px;
	-moz-border-radius-bottomleft: 10px;
	-moz-border-radius-topleft: 10px;
	-webkit-border-top-left-radius: 10px;
	-webkit-border-top-right-radius: 10px;
	-webkit-border-bottom-left-radius: 10px;
	-webkit-border-bottom-right-radius: 10px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	/* border-right        : 1px solid #1B5A83;  */

	box-shadow: 0px 2px 4px 0px rgb(219 7 7);
	-webkit-box-shadow: 0px 2px 4px 0px rgb(219 7 7);
}

.rot > .kb {
	color: red;
}

.rot_leer {
	height: 56px;
	border: 3px solid red;
	margin: 1px;
	color: red;
	-moz-border-radius-topright: 10px;
	-moz-border-radius-bottomright: 10px;
	-moz-border-radius-bottomleft: 10px;
	-moz-border-radius-topleft: 10px;
	-webkit-border-top-left-radius: 10px;
	-webkit-border-top-right-radius: 10px;
	-webkit-border-bottom-left-radius: 10px;
	-webkit-border-bottom-right-radius: 10px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	/* border-right        : 1px solid #1B5A83;  */
}

/* richtige Alternative zum falschen Klick */
.gruen {
	height: 56px;
	border: 3px solid green;
	margin: 1px;
	color: green;
	text-shadow: 1px 1px rgb(12 68 1);
	-moz-border-radius-topright: 10px;
	-moz-border-radius-bottomright: 10px;
	-moz-border-radius-bottomleft: 10px;
	-moz-border-radius-topleft: 10px;
	-webkit-border-top-left-radius: 10px;
	-webkit-border-top-right-radius: 10px;
	-webkit-border-bottom-left-radius: 10px;
	-webkit-border-bottom-right-radius: 10px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;

	box-shadow: 0px 2px 4px 0px rgb(35 175 0);
	-webkit-box-shadow: 0px 2px 4px 0px rgb(35 175 0);
}

.gruen > .kb {
	color: green;
}

.gruen_leer {
	height: 56px;
	border: 3px solid green;
	margin: 1px;
	color: green;
	-moz-border-radius-topright: 10px;
	-moz-border-radius-bottomright: 10px;
	-moz-border-radius-bottomleft: 10px;
	-moz-border-radius-topleft: 10px;
	-webkit-border-top-left-radius: 10px;
	-webkit-border-top-right-radius: 10px;
	-webkit-border-bottom-left-radius: 10px;
	-webkit-border-bottom-right-radius: 10px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}



.kb {
	width: 20px;
	height: 20px;
	font-size: 14px;
	font-family: arial, sans-serif;
	letter-spacing: 0.5px;
	font-weight: bold;
	color: #3D3D3D;
	text-align: right;
	padding-top: 10px;
}

/* Textanzeige und Skala */
.hud {
	width: 890px;
	height: 51px;
	font-size: 14px;
	font-family: arial, sans-serif;
	letter-spacing: 0.5px;
	font-weight: bold;
	/* background          : #8888ff; */
	text-align: left;
	padding-left: 8px;
	padding-top: 9px;
}

.zeile {
	border: 1px solid grey;
	height: 30px;
	font-size: 24px;
	font-family: Georgia, Times New Roman, serif;
	letter-spacing: 0.5px;
	/* font-weight         : bold; */
	/* background          : #ff8888;   */
	text-align: right;
	width: 100%;
}

.hud3 {
	width: 50px;
	height: 25px;
	float: left;
}

.hud6 {
	width: 60px;
	height: 25px;
	float: left;
}

.hud9 {
	width: 90px;
	height: 25px;
	float: left;
}

.ledr {
	width: 5px;
	height: 12px;
	background: #ff0000;
	float: left;
	margin-right: 1px;
}

.ledg {
	width: 5px;
	height: 12px;
	background: #00ff00;
	float: left;
	margin-right: 1px;
}

#text_done {
	position: relative;
	float: left;
	/*width: 378px;*/
	width: 375px;
	overflow: hidden;
	color: green;
	height: 70px;
	text-align: right;
	white-space: nowrap;
}

#doneText {
	float: right;
	white-space: nowrap;
}

#text_todo_1 {
	position: relative;
	float: left;
	width: 600px;
	overflow: hidden;
	height: 70px;
	text-align: left;
	white-space: nowrap;
}

.t1hover {
	color: #ffffff;
	height: 65px;
	width: 60px;
	float: left;
	font-size: 18px;
	font-family: arial, sans-serif;
	letter-spacing: 0.5px;
	font-weight: bold;
}

.t10hover {
	color: #ffffff;
	height: 65px;
	width: 60px;
	float: left;
	font-size: 12px;
	font-family: arial, sans-serif;
	letter-spacing: 0.5px;
	font-weight: bold;
}

.tr1hover {
	color: #ffffff;
	height: 65px;
	width: 60px;
	float: left;
	font-size: 18px;
	font-family: arial, sans-serif;
	letter-spacing: 0.5px;
	font-weight: bold;
}

.tg1hover {
	color: #ffffff;
	height: 65px;
	width: 60px;
	float: left;
	font-size: 18px;
	font-family: arial, sans-serif;
	letter-spacing: 0.5px;
	font-weight: bold;
}

.ty1hover {
	color: #ffffff;
	height: 65px;
	width: 60px;
	float: left;
	font-size: 18px;
	font-family: arial, sans-serif;
	letter-spacing: 0.5px;
	font-weight: bold;
}

.t7hover {
	height: 65px;
	width: 420px;
	float: left;
}

.t15hover {
	height: 65px;
	width: 90px;
	float: left;
}

.t25hover {
	height: 65px;
	width: 150px;
	float: left;
	/* padding-right       : 10px;               */
	/* border-right        : 1px solid #1B5A83;  */
}

/* Modal overlay css */
#ModalOverlay {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
	background: #000;
	opacity: .8;
	filter: alpha(opacity =                 80);
	-moz-opacity: 0.8;
	display: none;
	z-index: 10;
}

/* Dialog css */
#ContentDialog {
	display: none;
	position: absolute;
	width: 380px;
	height: 30px;
	top: 0px;
	left: 0px;
	z-index: 100;
	padding: 30px;
	background: #fff;
}

#ContentDialog h2 {
	margin: 0 0 20px 0;
	padding: 0;
}

#ContentDialog #ContentDialogContent {
	margin: 0 0 20px 0;
	padding: 0;
	height: 100%;
	overflow: scroll;
	overflow-x: hidden;
	overflow-y: hidden;
}

/************************************/
#hud {
	height: 140px;
	font-family: verdana, lucida, arial, sans-serif;
}

#hud_top {
	height: 60px;
	margin-bottom: 10px;
}

#hud_info {
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
	background: #f8f8f8;
	position: relative;
	float: left;
	margin-bottom: 10px;
	width: 970px;
	padding: 5px;

	box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.25);
	-webkit-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.25);
}

.hud_tops {
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
	width: 310px;
	height: 50px;
	background: #f8f8f8;
	float: left;
	font-size: 14px;
	padding: 5px;

	box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.25);
	-webkit-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.25);
}

#hud_top1 {
	margin-right: 10px;
}

#hudtxt {
	/*border-top-left-radius: 8px;
	border-top-right-radius: 8px;
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;*/
	height: 62px;
	background: #FFFFFF;
	border-bottom: 1px solid #eeeeee;
	font-size: 34px;
	font-family: times new roman, serif;
	padding-top: 8px;
	overflow: hidden;
	line-height: 65px;
}

.hud_progressbar {
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	-moz-border-radius-topright: 4px;
	-moz-border-radius-bottomright: 4px;
	-moz-border-radius-bottomleft: 4px;
	-moz-border-radius-topleft: 4px;
	-webkit-border-top-left-radius: 4px;
	-webkit-border-top-right-radius: 4px;
	-webkit-border-bottom-left-radius: 4px;
	-webkit-border-bottom-right-radius: 4px;
	position: relative;
	float: left;
	width: 150px;
	margin-left: 5px;
	margin-top: 2px;
	height: 20px;
}

#percenctageGradeGreen {
	width:150px;
	position: absolute;
	height: 20px;
	background-color: rgb(132, 194, 037);
	color: white;
}

#percenctageGradeRed {
	width:0px;
	position: absolute;
	height: 20px;
	background-color: #E03F0D;
	color: white;
	left:75px;
}

#amountRight {
	margin-left: 2px;
	font-weight: bold;
}

#amountWrong {
	margin-right: 2px;
	font-weight: bold;
}

#typewriterStopButton {
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	-moz-border-radius-topright: 10px;
	-moz-border-radius-bottomright: 10px;
	-moz-border-radius-bottomleft: 10px;
	-moz-border-radius-topleft: 10px;
	-webkit-border-top-left-radius: 10px;
	-webkit-border-top-right-radius: 10px;
	-webkit-border-bottom-left-radius: 10px;
	-webkit-border-bottom-right-radius: 10px;
	position: relative;
	margin-left: 10px;
	float: left;
	background-color: #F7AF21;
	border: #2C3C7B 2px solid;
	color: white;
	font-size: 14px;
	padding-right: 8px;
}

#typewriterStopButton:hover {
	background-color: #E03F0D;
}

#typewriterStopButton .image {
	position: relative;
	float: left;
	width: 44px;
	height: 30px;
	top: -7px;
}

#typewriterStopButton .bodyText {
	position: relative;
	float: left;
	margin-top: 5px;
}

#gradeContainer {
    display: none;
}

#ihkContainer {
    display: none;
}

#percenctageGradeGreenAmountWrapper {
	position: absolute;
	color: #ffffff;
	z-index: 999;
}

#percenctageGradeRedAmountWrapper {
	position: relative;
	float: right;
	height: 20px;
	z-index:999;
	color: #FFFFFF;
}

#errorScale {
	position: absolute;
	z-index: 999;
	height: 20px;
	width:150px;
}

.errorScaleEntries {
	border-left: 1px solid #eeeeee;
	height:20px;
	position: relative;
	float: right;
}

#pauseDialog {
	display:none;
}

#startDialog {
	display:none;
}

#endDialog {
	display:none;
}