/*#MPanel_km_ok{background-image: url(/images/smilie_fragezeichen.png); background-repeat:no-repeat;}
#MPanel_m_ok{background-image: url(/images/smilie_fragezeichen.png); background-repeat:no-repeat;}
#MPanel_cm_ok{background-image: url(/images/smilie_fragezeichen.png); background-repeat:no-repeat;}
#MPanel_mm_ok{background-image: url(/images/smilie_fragezeichen.png); background-repeat:no-repeat;}

#MPanel_einstellungen{position:relative;}
#MCheckBoxGroup_einstellungen_von_outer{width:155px;}
#MCheckBoxGroup_einstellungen_nach_outer{position:absolute;width:155px; top:10px; left:200px;}
#MPanel_einstellungen_sonstige_outer{position:absolute;}*/
/*@-ms-viewport {width: device-with; min-zoom: 0.5}
@-webkit-viewport{width: device-with;min-zoom: 0.5}
@-moz-viewport{width: device-with;min-zoom: 0.5}
@-o-viewport{width: device-with; min-zoom: 0.5}
@viewport{width: device-with;min-zoom: 0.5}*/

#MPanel_einstellungen_titlebar {  /* Specifies position, size, and style of the titlebar */
    position: absolute;        /* It's a positioned element */
    top: 0px	!important; 	
	height: 30px	!important;    /* titlebar is 18px + padding and borders */
    width: 290px;              /* 290 + 5px padding on left and right = 300 */
    /*background-color: ActiveCaption;   Use system titlebar color */
	background: purple;
    border-bottom: groove black 2px;  /* Titlebar has border on bottom only */
    padding: 3px 5px 2px 5px;  /* Values clockwise: top, right, bottom, left */
    font: caption;             /* Use system font for titlebar */
}
.close-btn {
    border: 2px solid #c2c2c2;
    position: relative;
    padding: 1px 5px;
    top: 2px;
    background-color: #605F61;
    /*left: 198px;*/
    border-radius: 20px;
}

.close-btn a {
    font-size: 15px;
    font-weight: bold;
    color: white;
    text-decoration: none;
}
.ui-button{width:150px;}

.button_multiplechoice_antwort{
  background: #9ecff0;
  background-image: -webkit-linear-gradient(top, #9ecff0, #2980b9);
  background-image: -moz-linear-gradient(top, #9ecff0, #2980b9);
  background-image: -ms-linear-gradient(top, #9ecff0, #2980b9);
  background-image: -o-linear-gradient(top, #9ecff0, #2980b9);
  background-image: linear-gradient(to bottom, #9ecff0, #2980b9);
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  font-family: Arial;
  color: #ffffff;
  height:2.7em;
  width:640px;
  margin-bottom:5px;
  cursor:pointer;
  padding: 5px 10px 5px 10px;
  border: solid #1f628d 2px;
  text-decoration: none;
}
.button_naechste_frage{
  background: #0e4e12;
  background-image: -webkit-linear-gradient(top, #75ac79, #0e4e12);
  background-image: -moz-linear-gradient(top, #75ac79, #0e4e12);
  background-image: -ms-linear-gradient(top, #75ac79, #0e4e12);
  background-image: -o-linear-gradient(top, #75ac79, #0e4e12);
  background-image: linear-gradient(to bottom, #75ac79, #0e4e12);
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  font-family: Arial;
  color: #ffffff;
  width:450px;
  height:5em;
  margin-bottom:5px;
  cursor:pointer;
  padding: 5px 10px 5px 10px;
  border: solid #053308 2px;
  text-decoration: none;
}


#id_naechste_bildauswahl_image{cursor:pointer;}
#id_button_quiz{visibility:hidden; cursor:pointer;background-image: url(../bilder/menu/button_info.png); background-repeat:no-repeat;}
#id_popup_quiz{cursor:pointer;background-image: url(../bilder/menu/button_quiz.png); background-repeat:no-repeat;height:100px;width:100px}
#popup_fenster{width:700px; text-align:center}


.btn:hover {
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
}
	
	
	
	
}


/*tab_navigations bar*/
tab_nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

tab_nav li {
	font-size:1.2em;
    display: inline-block;
    border: solid;
    border-width: 1px 1px 0 1px;
    margin: 0 5px 0 0;
	height:25px;
	background-color:LightGrey ;
}


tab_nav li a {
    padding: 0 10px;
	text-decoration:none;
	color:black;
}

#nav_content {
    border: 1px solid;
	background: white;
}

#selected {
    position: relative;
    top: 2px;
    background: white;
}
#div_tab_nav{position:relative;top:50px;}

/*Einstellungen Vergleich*/
.td_span {text-align: left	!important;}
#MPanel_kopfzeile_outer{text-align :center !important;position:relative !important}
h2{font-size:3em;}
h1{font-size:3em;}
#id_kopfzeile_zurueck{width:100%;height:140px}
*[id^='id_kopfzeile_geldstuecke']{float: right;height:140px;}
*[id^='id_multiplechoice_antwort']{font-size: 1em}

/*media handy
@media (min-device-width: 799px) {*/ 
	/* Breite beträgt mindestens 800px */ 
	h2{font-size:2em;}
	h1{font-size:2em;}
	#id_kopfzeile_zurueck{width:100%;height:140px}
	*[id^='id_kopfzeile_geldstuecke']{float: right;height:140px;}
	*[id^='id_multiplechoice_antwort']{font-size:1em}
/*}*/

#MPanel_einstellungen_title_outer{
	font-size: 14px;
	top:0px;
	height:23px !important;
    color: white;
}
#MPanel_einstellungen_outer{
/* Specifies size and border of the window */
    position: absolute;            /* The position is specified elsewhere */
	background-color:white;
	z-index:99		!important;
    height: auto !important;    /*Window size, not including borders */
    border: outset gray 1px	!important;       /* Note 3D "outset" border effect */
}
/*#MPanel_einstellungen{height:550px !important;}*/
#MPanel_einstellungen_sonstige_outer{top:250px !important; width:300px !important}
#MLabel_frage{text-align:center !important;font-size:20px !important;}
#MLabel_einstellungen{ width:300px !important}

/*Einstellungen open modal*/
.modalDialog {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 99999;
    opacity:0;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events: none;
}
.modalDialog:target {
    opacity:1;
    pointer-events: auto;
}
.modalDialog > div {
    width: 400px;
    position: relative;
    margin: 10% auto;
    padding: 5px 20px 13px 20px;
    border-radius: 10px;
    background: #fff;
    background: -moz-linear-gradient(#fff, #999);
    background: -webkit-linear-gradient(#fff, #999);
    background: -o-linear-gradient(#fff, #999);
}
.close {
    background: #606061;
    color: #FFFFFF;
    line-height: 25px;
    position: absolute;
    right: -12px;
    text-align: center;
    top: -10px;
    width: 24px;
    text-decoration: none;
    font-weight: bold;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    box-shadow: 1px 1px 3px #000;
}
.close:hover {
    background: #00d9ff;
}
/*open Modal ende*/



.input_register{width:400px;font-size:2em;display:inline;height:2em}
#id_login_register{width:400px;margin: 0 auto;}
#id_login_register_outer{text-align:center;position:relative}
#login_btn{width:400px}
#rgstr_btn{width:400px}
#login_klassen_auswahl{width:400px;text-align:center;}
button {text-align:center !important;width:181px;cursor:pointer;height:80px}

/*
.class_richtig{background-image: url(/images/_haken_ok.png); background-repeat:no-repeat;}
.class_falsch{background-image: url(/images/_haken_notok.png); background-repeat:no-repeat;}
.class_leer{background-image: url(); background-repeat:no-repeat;}
*/
.popup   { font-size: 1.2em; background-color: rgb(255,255,225); text-align: justify; display: none; padding: 0.8em; position: absolute; z-index: 1; width: 480px; border: solid 1px black }
.class_hilfe_pfeil{background-image: url(../images/_hilfe_pfeil.png); background-repeat:no-repeat;}
.class_input_richtig{background-image: url(../images/_haken_ok_klein.png)!important; background-repeat:no-repeat !important;}
.class_input_falsch{background-image: url(../images/_haken_notok_klein.png)!important; background-repeat:no-repeat !important;}
.class_input_leer{background-image: url()!important; background-repeat:no-repeat !important;}

#MPanel_hauptteil_outer{text-align:center	!important; height:600px !important; top:450px !important}
#MPanel_hauptteil{height:600px !important}



#MPanel_einheiten{height:440px !important}

/*#div_fusszeile{top:450px;height:50px;background-color:white;visibility:hidden;}*/
#id_div_bewertung{width:100%;height:30px;background-color:#def9e8;border:1px;box-shadow:2px 2px 2px 2px #666;border-radius: 5px; }
*[class^='class_bewertung_kreise_gruen']{background-color:#3b965e;}
*[class^='class_bewertung_kreise_rot']{background-color:#d92626;}
[id^='id_div_bewertung_kreise_']{width:20px;height:20px;box-shadow:1px 1px 1px 1px #666;border-radius: 10px;margin:5px;float:left;display:none;}

*[id^='MPanel_1']{height:60px !important}
*[id^='MLabel_']{font-size:24px !important}
*[id^='MLabel_0']{top:60px !important}
*[id^='MLabel_1']{top:60px !important}
*[id^='MEdit_1']{top:90px !important; cursor:text;}
*[id^='MEdit_0']{top:90px !important;}
*[id^='MLabel_hilfe_zahl_']{top:0px !important}
*[id^='MPanel_pfeil_']{top:30px !important}
#MLabel_istgleich_outer{top:90px !important}
#MPanel_container_hilfestellung_outer{top:0px !important}


#MPanel_label_einheiten{position:relative;left:9px; top:30px}
#MPanel_container_summand_01{position:relative;left:9px; top:40px;}
#MPanel_container_summand_02{position:relative;top:40px;left:9px;}
#MPanel_container_summe{position:relative; top:40px;left:9px;}
.class_unsichtbar{display: none	!important;}
.class_sichtbar{display: block	!important;}

*[id^='MLabel_addition_subtraktion']{font-size: 24px; top:0px;width:120px;text-align:center;display: inline-block;margin-left:5px !important}
*[id^='MPanel_summand_']{top:0px;width:120px;text-align:center;display: inline-block;margin-left:5px !important}
*[id^='MPanel_summe_']{top:0px;width:120px;text-align:center;display: inline-block;margin-left:5px !important}


.bildauswahl{height:200px;width:200px;cursor:pointer;background-color:white;box-shadow:4px 4px 4px 4px #666;border-radius: 20px;margin:8px;}
*[id^='id_bildauswahl_image_']{height:170px;width:170px;}
*[id^='id_bildunterschrift']{font-size: 150%}
.bildauswahl_leer{height:200px;width:200px;}
.bild_rechnungsart{height:210px;width:300px;background-image: url(../bilder/laengen_zollstock.png)}

#bildauswahl_container{display: inline-block}
#puzzle_seitenmenu{width:80px;height:150px;top:220px; left:5px;position:absolute}
/*#id_auswertung_bild_richtig{visibility:hidden; position:relative;height:0px;width:0px;margin-left: auto;margin-right: auto;left: 0;right: 0;}*/
#id_auswertung_bild_richtig{visibility:hidden; position:relative;margin-left: auto;margin-right: auto;left: 0;right: 0;padding:10px}
#id_auswertung_bild_richtig_image{max-height:450px;max-width:450px;border:1px solid black;box-shadow:4px 4px 4px 4px #666;border-radius: 20px;}
#id_div_multipleorsinglechoice{position:absolute; width:100%;height:2em;top:0px;left:0px;z-index:100;font-size:2em;display:none;
	-webkit-transform: rotate(-90deg) translate(8%, -600%);
	-moz-transform: rotate(-90deg) translate(8%, -600%);
	-o-transform: rotate(-90deg) translate(8%, -600%);
	-ms-transform: rotate(-90deg) translate(8%, -600%);
	transform: rotate(-90deg) translate(8%, -600%);
}
*[id^='menu_fragezeichen_']{float:left;margin: 2px;display: table;cursor:pointer;}
/*
#id_auswertung_bild_richtig{
	position:absolute;
	height:0px;
	width:0px;
	margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0;
	top:80px;
	background-color:white;
	border:1px solid black;
	cursor:pointer;
	border-radius: 20px;margin:8px;
}*/


#addition_subtraktion_plus_minus_zeichen{position:relative;top:40px;}

.tasten_nummer             { padding-top:12px;color: #fff; height:58px;font-size: 40px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif ;cursor:pointer}
.id_tastenhintergrund             { background-image: url(../bilder/taste_leer.png); visibility: visible; position: absolute; z-index: -1; top: 0; left: 0; width: 70px; height: 70px ;cursor:pointer}

.id_taste_fertig { background-image: url(../bilder/taste_fertig.png); visibility: visible; position: absolute; z-index: -1; top: 0; left: 0; width: 70px; height: 70px ;cursor:pointer}

.progressbar_nummern  { color: #fff; font-size: 26px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; background-image: url(); background-repeat: no-repeat; text-align: center; padding-top: 5px; width: 40px; height: 40px; vertical-align: middle;cursor:pointer }
.progressbar { background-color: #fff; width: 40px; height: 20px; border-top: 1px solid #000; border-bottom: 1px solid #000; border-left: none }
#idmousetastatur{z-index:0;top:150px;position:relative}
#login_logout_admin{position:absolute; background-image: url(../images/button_login_admin.png); height:80px; width:80px;left:10px;top:10px; cursor: pointer}
#login_logout_user{background-image: url(../images/button_login.png); height:80px; width:80px;left:10px;top:10px; cursor: pointer}


/* popup_box DIV-Styles*/
#popup_box {
    display:none; /* Hide the DIV */
    position:absolute;  
    /*_position:absolute;  hack for internet explorer 6 */  
    height:300px;  
    width:550px;  
    background:#FFFFFF;  
    left: 100px;
    top: 10px;
    z-index:100; /* Layering ( on-top of others), if you have lots of layers: I just maximized, you can change it yourself */
    margin-left: 15px;  
   
    /* additional features, can be omitted */
    border:1px solid #000000;      
    padding:15px;  
    font-size:15px;  
    -moz-box-shadow: 0 0 5px #ff0000;
    -webkit-box-shadow: 0 0 10px #000000;
    box-shadow: 0 0 10px #000000;  
}

a{ 
cursor: pointer; 
/*text-decoration:none; */
}

/* This is for the positioning of the Close Link */
#popupBoxClose {
    font-size:20px;  
    line-height:15px;  
    right:5px;  
    top:5px;  
    position:absolute;  
    color:#6fa5e2;  
    font-weight:500;      
}
/*pleas waite spinner*/
.please_wait_modal {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 ) 
                url('http://i.stack.imgur.com/FhHRx.gif') 
                50% 50% 
                no-repeat;
}

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading .please_wait_modal {
    overflow: hidden;   
}

/* Anytime the body has the loading class, our
   please_wait_modal element will be visible */
body.loading .please_wait_modal {
    display: block;
}
/*multiple antwortauswahl*/
/* The container */
.antwortauswahl_container {
  display: block;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.antwortauswahl_container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 20px;
  width: 20px;
}

.checkmark_gray{
	position: absolute;
	top: 13px;
	left: 10px;
	height: 60px;
	width: 80px;
	border-radius: 20px;
	background: #ccc url("../bilder/check_yes_no_backgroune.png");
	cursor: pointer;
	-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4) inset;
  -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4) inset;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4) inset;
}

.checkmark_unchecked{
	position: absolute;
	top: 13px;
	left: 10px;
	height: 60px;
	width: 80px;
	border-radius: 20px;
	background: #ccc url("../bilder/check_yes_no_backgroune.png");
  font-weight: bold;
  color: #FFF;
  -webkit-transition: background 0.3s, text-indent 0.3s;
  -moz-transition: background 0.3s, text-indent 0.3s;
  -o-transition: background 0.3s, text-indent 0.3s;
  transition: background 0.3s, text-indent 0.3s;
  text-indent: 35px;
  -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4) inset;
  -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4) inset;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4) inset;
	
	
}
.checkmark_checked{
	position: absolute;
	top: 13px;
	left: 10px;
	height: 60px;
	width: 80px;
	border-radius: 20px;
	background: #ccc url("../bilder/check_yes_no_backgroune.png");
  font-weight: bold;
  color: #FFF;
  -webkit-transition: background 0.3s, text-indent 0.3s;
  -moz-transition: background 0.3s, text-indent 0.3s;
  -o-transition: background 0.3s, text-indent 0.3s;
  transition: background 0.3s, text-indent 0.3s;
  text-indent: -35px;
  -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4) inset;
  -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4) inset;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4) inset;
}
.antwortauswahl_container .checkmark_unchecked:after {
	content: "\2716";
	color: #fff;
	font-size:1.45em;
	padding-top: 5px;
	padding-left: 10px;
	padding-right:10px;
	border-radius: 20px;
	font-family: Arial, sans-serif;
	background-color: #b72121;
	
	-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4) inset;
  -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4) inset;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4) inset;
}


/* When the checkbox is checked, add a blue background */
.antwortauswahl_container .checkmark_checked:after {
 content: "\2714";
	color: #fff;
	font-size:1.45em;
	padding-top: 5px;
	padding-left: 10px;
	padding-right:10px;
	border-radius: 20px;
	font-family: Arial, sans-serif;
	background-color: #7daf7c;
	
	-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4) inset;
  -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4) inset;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4) inset;
}
input[type=checkbox]
{
  /* Double-sized Checkboxes */
  -ms-transform: scale(2); /* IE */
  -moz-transform: scale(2); /* FF */
  -webkit-transform: scale(2); /* Safari and Chrome */
  -o-transform: scale(2); /* Opera */
  padding: 10px;
}


/*Checkbox on/off
Probe bei quiz*/
.checkbox_quiz_onoff {
  margin-left: -27px;
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  zoom: 1;
  *display: inline;
  position: relative;
  cursor: pointer;
  width: 100px;
  height: 50px;
  line-height: 50px;
  font-size: 1.5em;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.checkbox_quiz_onoff label {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  cursor: pointer;
  background: #cd3c3c;
  border-radius: 5px;
  font-weight: bold;
  color: #FFF;
  -webkit-transition: background 0.3s, text-indent 0.3s;
  -moz-transition: background 0.3s, text-indent 0.3s;
  -o-transition: background 0.3s, text-indent 0.3s;
  transition: background 0.3s, text-indent 0.3s;
  text-indent: 27px;
  -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4) inset;
  -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4) inset;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4) inset;
}
.checkbox_quiz_onoff label:after {
  content: 'X';
  display: block;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  font-size: 1.5em;
  color: #591717;
  text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.35);
  z-index: 1;
}
.checkbox_quiz_onoff label:before {
  content: '';
  width: 15px;
  height: 24px;
  border-radius: 3px;
  background: #FFF;
  position: absolute;
  z-index: 2;
  top: 3px;
  left: 3px;
  display: block;
  -webkit-transition: left 0.3s;
  -moz-transition: left 0.3s;
  -o-transition: left 0.3s;
  transition: left 0.3s;
  -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);
}
.checkbox_quiz_onoff input:checked + label {
  background: #378b2c;
  text-indent: 30px;
}
.checkbox_quiz_onoff input:checked + label:after {
  content: "\2713 ";
  color: #091707;
}
.checkbox_quiz_onoff input:checked + label:before {
  left: 37px;
}