@charset "utf-8";

@import url("base_00.css");
@import url("btn_02.css");


#InstructionsDiv {
	text-align: center;
	font-family: 'Sintony-Bold'; font-size: 14pt; line-height: 1.25;
	color: black;
}

.Definition {
	display:inline-block;
	font-size:16pt; font-weight:bold;
	padding:0px 9px;
	background-color: #FBFDD2;
	border-left: solid 3px black; border-right: solid 3px black; 
}
.Begriff {
	display:inline-block;
	font-size:16pt; font-weight:bold;
	padding:0px 9px;
	background-color: #FBFDD2;
	border-top: solid 3px black; border-bottom: solid 3px black; 
}


input[type="text"] {
	font-size: 17pt; font-family: 'Blinker';
	text-align:center;
	padding: 3px; margin:0px 3px;
	border:1px solid gray; border-radius: 5px;
	color:black!important; background-color:floralwhite;
}
input[type="text"]:focus {
	outline: none; border-radius: 5px;
	padding: 3px; margin:0px 3px;
	box-shadow: -1px -1px 5px #888;
	text-align:center;
	background-color: yellow;
}

/*
select{
	font-size: 100%;
	border-radius: 5px;
	padding: 3px 2px 3px 5px;
	border: 1px solid silver;
}
select:focus {
outline:none;
}
*/



/* QUESTIONs navigation START */
div.QuestionNavigation{
	display: block;	
	margin:0px auto;
	text-align: center;
}

.QuestionNavigation button {
	border: solid 2px GREENYELLOW;
	-moz-box-shadow: 4px 4px 0px 0px LIMEGREEN;
  -webkit-box-shadow: 4px 4px 0px 0px LIMEGREEN;
  box-shadow: 4px 4px 0px 0px LIMEGREEN;
	color: var(--strTextColor); background-color: var(--strExBGColor);
	cursor: pointer;
	font-size: 13pt; line-height: 1.25; font-family: var(--strFontOther);
}
.QuestionNavigation button:hover {
	color: white; background-color: LIMEGREEN;
	border: solid 2px floralwhite;
}
#ShowMethodButton {
	position:relative; display:block;
	min-width: 400px; min-height:2.5em;
	margin:20px auto; padding:0px 8px;
	font-size: 14pt;
}

#OneByOneReadout {
	display: flex;	flex-direction: row; flex-wrap: nowrap;
	justify-content: center; align-content: center; align-items: center;
	margin:0 auto 15px;
	width:100%;
}
#OneByOneReadout button {
	font-size:18pt; font-weight:bold; font-family: var(--strFontOther);
	min-width: 85px; height:1.75em;
	border-radius: 0.5em;
}

.QNum {
	display: inline-block; width:110px;
	margin: 0em 1em 0 1em; padding:5px 15px;
	font-weight: bold; font-size:22pt;
	vertical-align: middle;
	background-color:yellow; color:black;
	border-radius:8px; border:solid 3px darkorange;
}
/* QUESTIONs navigation END */



ol.QuizQuestions { /* main question body */
	text-align: left;
	list-style-type: none; list-style: none;
	border-left: solid 3px darkorange; border-top: solid 3px darkorange;
	border-radius:24px 0 0 0;
	margin:0 2em; padding:1em 0.5em 1em 3em;
	background-color: white;
}

li.QuizQuestion { /* a particular question*/
	margin: 0 10px 1em 0; padding: 0 0 0.5em 0;
	background-color: white;
	border-radius:8px 0 0 0; list-style: none;
	/*counter-increment: Nlist;*/
	border-radius:0 0 24px 24px;
	box-shadow: 0 7px 15px 0 rgba(0,0,0,0.25);
	-moz-box-shadow: 0 7px 15px 0 rgba(0,0,0,0.25);
	-webkit-box-shadow: 0 7px 15px 0 rgba(0,0,0,0.25);
}

/*li.QuizQuestion::before {
	position:absolute;
	width:1.75em; height:1.75em;
	content: counter(Nlist) ". ";
	font-family: 'Blinker'; line-height: 1.75;
	font-size: 18pt; font-weight: bold; text-align: center;
	background-color: darkorange; color:white;
	border-radius: 0.25em 0 0.25em 0;
	margin: -0.25em 0 0 -1.5em; padding:0 0px 0 0px;
	-moz-box-shadow: 2px 2px 0px 0px darkslategray;
  -webkit-box-shadow: 2px 2px 0px 0px darkslategray;
  box-shadow: 2px 2px 0px 0px darkslategray;
}*/

.qNumber {
	position:absolute!important; display:block!important;
	width:1.75em!important; height:1.75em!important;
	font-family: 'Blinker'; line-height: 1.75;
	font-size: 18pt; font-weight: bold; text-align: center;
	background-color: darkorange!important; color:white!important;
	border-radius: 0.25em 0 0.25em 0;
	margin: -0.25em 0 0 -1.5em; padding:0 0px 0 0px;
	-moz-box-shadow: 2px 2px 0px 0px darkslategray;
  -webkit-box-shadow: 2px 2px 0px 0px darkslategray;
  box-shadow: 2px 2px 0px 0px darkslategray;
}

.QuestionText { /* question body*/
	text-align: left;
	margin: 0px; padding: 0.25em 0.5em 0.25em 1em;
	font-size: 17pt; line-height:1.35;
	background-color:#FFE1BD;
}



div.ShortAnswer {
	margin:15px 0 15px 35px; /*padding: 1em;*/
	display:flex; flex-direction: column; flex-wrap: nowrap;
	justify-content: center; align-content: center; align-items: flex-start;
}

.ShortAnswer button {
	display:inline-flex!important;
	justify-content: center; align-content: center; align-items: center;
	height:3em;
	border: solid 2px lightseagreen; border-radius: 0.5em;
	margin:6px; padding: 3px 6px;
	color: var(--strTextColor); background-color: var(--strExBGColor);
	cursor: pointer;
	font-size: 13pt; line-height: 1.25; font-family: var(--strFontOther);
	-moz-box-shadow: 4px 4px 0px 0px teal;
  -webkit-box-shadow: 4px 4px 0px 0px teal;
  box-shadow: 4px 4px 0px 0px teal;
	transition: background 0.4s ease, color 0.4s ease;
}
.ShortAnswer button:active {
	box-shadow: none;
	border: solid 2px #004F4F!important;
	background-color: #00B9B9!important;
}
.ShortAnswer button:hover {
	color: var(--strExBGColor); background-color: teal;
	border: solid 2px floralwhite;
}
.ShortAnswerBox {
	display:inline;
	min-width:12em;
}

.Answer {
	font-size: 18pt;
	color:white; background-color: green;
	padding:2px 8px;
}
.Hint {
	display:inline-block; padding:3px 3px;
	font-size: 18pt; font-weight: bold;
	background-color: crimson!important; color:white!important;
}

.PartialAnswer {
	display:inline-block;
	font-size: 18pt; font-weight: bold;
	background-color: yellow!important; color:black!important;
	padding:3px 6px;
}
.Highlight {
	display:inline-block;
	background-color: crimson!important; color:white!important;
	font-size: 18pt; font-weight: bold;
	padding:3px 3px;
}
.Guess {
	font-weight: bold;
}

/*.QuizQuestion .FuncButton {
	display:inline;
	margin:0px 0px 0px 25px; padding: 3px 6px;
} */



ol.MCAnswers { /* Multiple-Choice Answers main body */
	text-align: left;
	list-style-type: upper-alpha;
	padding: 1em 0.5em 1em 3em;
	/*background-color: fuchsia;*/
}

ol.MCAnswers li { /*  */
	font-size:17pt; line-height:1.35;
	margin-bottom: 0.25em; 
}

.MCAButton {
	display: inline-block!important; min-width: 2em!important; height: 2em!important;
	border-radius: 8px!important; border: solid 2px transparent;
	cursor: pointer;
	margin:0 8px 0 4px!important; padding: 0.25em!important;
	background-color: deepskyblue; color:black;
	box-shadow: none;
	font-family: 'Sintony-Bold'; font-size: 16pt!important;
}
.MCAButton:hover {
	border: solid 2px black;
	background-color: yellow; color:black;
}
.MCAButton:active {
	box-shadow: 0.1em 0.1em 0.1em black;
}



ol.MSelAnswers { /* Multiple-Select Answers main body */
	text-align: left;
	list-style-type: lower-alpha;
	padding: 1em 0.5em 1em 3em;
	/*background-color: chocolate;*/
}
ol.MSelAnswers li { 
	font-size: 17pt; line-height:1.35;
	margin-bottom: 0.25em;
}

.MSelCheckbox { /* Create a custom checkbox */
	top:0; left:0;
  height: 19px; width: 19px; vertical-align: middle;
	margin: 0 10px 0 0;
	background-color: crimson;
}
.MSelCheckbox + label {
	padding:0 5px;
}

.CorrectAnswer{
	font-weight: bold;
}
.correctAnswer + label {
	display:inline; position: relative;
	padding:0 5px; /*font-weight: bold!important;*/
	color:white!important; background-color: darkgreen;
}
.wrongAnswer + label {
	display:inline; position: relative;
	padding:0 5px; /*font-weight: bold!important;*/
	color:white!important; background-color: red;
}



@media screen and (max-width: 980px) {

ol.QuizQuestions { /* main question body */
	margin: 0px; padding: 1em 0.25em 0.5em 2.5em;
}

}


@media screen and (max-width: 690px) {
#ShowMethodButton {
	min-width: 350px;
	font-size: 13pt;
}

ol.QuizQuestions { /* main question body */
	padding:1em 0.25em 0.5em 2em; 
}
li.QuizQuestion { /* a particular question*/
	margin: 0 0px 1em 0;
}
.QuestionText { /* question body*/
	margin: 0px; padding: 0.25em 0.1em 0.25em 1em;
}


ol.MCAnswers {
	padding: 1em 0.5em 1em 3em;
}

ol.MSelAnswers { 
	padding: 1em 0.5em 1em 3em;
}
}



@media screen and (max-width: 550px) {
.Definition {
	font-size:15pt;
}
.Begriff {
	font-size:15pt;
}

.QuestionText{ /* question body*/
	margin: 0px; padding: 0.25em 0.1em 0.25em 1em;
	font-size: 15pt;
}

ol.MCAnswers {
	padding: 1em 0.5em 1em 2em;
}
ol.MCAnswers li {
	font-size:15pt;
}

ol.MSelAnswers { 
	padding: 1em 0.5em 1em 2em;
}
ol.MSelAnswers li { 
	font-size: 15pt;
}
}