@charset "utf-8";

@font-face{
    font-family: 'Blinker';
    font-style: normal;
    src: local('Blinker'),
         url('Blinker.woff');
}

@font-face{
    font-family: 'Sintony-Bold';
    font-style: normal;
    src: local('Sintony-Bold'),
         url('Sintony-Bold.woff');
}


/* CSS variables for colours. */
:root{
	--strFontFace:       Blinker,Geneva,Arial,sans-serif;
	--strFontOther:      Sintony-Bold;
	--strFontSize:       16pt;
	--strFontSizeInstruction: 14pt;
	--strTextColor:      #000000;
	--strTitleColor:     #000000;

	--strFuncLightColor: #ffffff;
	--strFuncShadeColor: #7f7f7f;
	--strRightA:      #00ff00;
	--strWrongA:     #ff0000;
	--strWhite: #ffffff;
	
	
	--strNavBarColor:    #000000;
	--strNavLightColor:  #7f7f7f;
	--strNavShadeColor:  #000000;
	--strNavTextColor:   #ffffff;
	
	--strPageBGColor:    aliceblue;
	--strExBGColor:      #FFFFFF;
}

.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; 
}

body{
	font-family: var(--strFontFace);
	background-color: var(--strPageBGColor);
 	margin-right: 3%; /* original : 5% */
	margin-left: 3%; /* original : 5% */
	font-size: var(--strFontSize);
	padding-top: 0.5em;
	padding-bottom: 0.5em;
}

p{
	text-align: left;
	margin: 0px;
	font-size: 1em;
}

table,div,span,td{
	font-size: 1em;
	color: var(--strTextColor);
}

div.Titles{
	padding: 0.5em;
	text-align: center;
	color: var(--strTitleColor);
	font-family: var(--strFontOther);
}

button{
	font-family: var(--strFontOther);
	font-size: 15pt;
	display: inline;
}

.ExerciseTitle{
	font-size: 160%;
	color: var(--strTitleColor);
}

.ExerciseSubtitle{
	font-size: 135%;
	color: var(--strTitleColor);
}

div.StdDiv, div.ReadingContainer{
	background-color: var(--strExBGColor);
	text-align: center;
	font-size: var(--strFontSize);
	padding: 0.5em;
	margin-bottom: 10px;
}
#InstructionsDiv {
	background-color: #E4E4E4;
	text-align: center;
	font-size: var(--strFontSizeInstruction);
	font-family: var(--strFontOther);
	color: black;
	padding: 0.5em;
	margin-bottom: 15px;
	border-left:5px #5C5C5C solid;
	border-right:5px #5C5C5C solid;
}
div.ExerciseContainer {
	background-color: var(--strPageBGColor);
	text-align: center;
	padding:0px 1em;
	font-size: 1em;
	color: var(--strTextColor);
	min-width: 5em;
	flex-grow: 1;
	flex-basis: 0;
	margin: 1px;
}

div#ContainerDiv{
	margin: -1px;
	padding: 0;
	border: none;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
}

/* EndCorePageCSS */



.Guess{
	font-weight: bold;
}

.CorrectAnswer{
	font-weight: bold;
}

div#Timer{
	padding: 0.25em;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	color: var(--strTitleColor);
}

span#TimerText{
	padding: 0.25em;
	border-width: 1px;
	border-style: solid;
	font-weight: bold;
	display: none;
	color: var(--strTitleColor);
}

.FeedbackText, .FeedbackText span.CorrectAnswer, .FeedbackText span.Guess, .FeedbackText span.Answer{
	color: brown;
}



input, textarea{
	font-family: var(--strFontFace);
	font-size: 100%;
	border-radius: 5px;
	padding: 3px;
	border:1px solid gray;
	margin:0px 3px;
	text-align:center;
}
input:focus, textarea:focus {
	outline: none; 
	border-radius: 5px;
	padding: 5px;
	border:1px solid gray;
	box-shadow: -1px -1px 5px #888;
	text-align:center;
}


select{
	font-size: 100%;
	/* Stan - Rounded menu */
	border-radius: 5px;
	padding: 3px 2px 3px 5px;
	border: 1px solid silver;
/* Stan - Rounded menu END */
}

select:focus {
outline:none;
}

div.Feedback {
	position: absolute; display: none;
	width: 70%; margin: 50px auto auto;
	top: 50%; left: 50%;
	-webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
	z-index: 10;
	border-radius:8px; border: solid 3px brown;
	padding: 25px;
	text-align: center;
	font-family: var(--strFontOther); font-size:17pt; line-height: 1.5;
	background-color: CORNSILK;
}

div.ExerciseDiv{
	color: var(--strTextColor);
}


/* Keypad styles */

div.Keypad{
	text-align: center;
	display: none; /* initially hidden, shown if needed */
	margin-top:-10px;
	margin-bottom: 0.5em;
}

div.Keypad button{
	font-family: var(--strFontFace);
	font-size: 120%;
	background-color: #ffffff;
	color: #000000;
	margin:0px 3px;
	width: 1.8em;
	border-style: solid;
	border-width: 1px;
	border-radius: 8px;
	color: var(--strTextColor);
	box-shadow: 0.2em 0.25em 0.2em var(--strTextColor);
}




/* JQuiz styles */
#ShowMethodButton {
	position:relative; display:block;
	margin:0px 0px 20px auto;
}

#OneByOneReadout {
	margin:0 auto 15px;
}
#OneByOneReadout button {
	font-size:16pt; font-weight:bold;
}
div.QuestionNavigation{
	text-align: center;
}
.QNum{
	margin: 0em 1em 0 1em;
	font-weight: bold; font-size:22pt;
	vertical-align: middle;
	background-color:yellow; color:black;
	border-radius:8px; border:solid 3px darkorange;
	padding:5px 15px;
}


.QuestionText{ /* question body*/
	text-align: justify;
	margin: 0px; padding: 0.25em 0.5em;
	font-size: 17pt; line-height:1.35;
	background-color:#F8FCAB;
	border-radius:8px 0 0 0;
}
ol.QuizQuestions{ /* question body + quiz answers BODY/SPACE*/
	text-align: left;
	list-style-type: none; 
	border-left: solid 3px darkorange; border-top: solid 3px darkorange;
	border-radius:24px 0 0 0;
	margin:0 2.5em; padding:0 2em 1em 2em;
	background-color: white;
}

li.QuizQuestion { /*space between each quiz answers BODY*/
	padding: 0.5em 0;
	margin: 0 10px 0.5em 0;
}
li.QuizQuestion:hover { /*space between each quiz answers BODY*/
	box-shadow: 0 7px 15px 0 rgba(0,0,0,0.25);
	cursor: pointer;
}

ol.MCAnswers { /*space inside of quiz answers BODY*/
	text-align: left;
	list-style-type: upper-alpha;
	
	padding: 1em 0 0.5em 4em;
	/*background-color: crimson;*/
}

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

.AnswerBtn {
	font-family: 'Sintony-Bold'; font-size: 16pt;
	display: inline; margin:0 8px 0 4px;
	border-radius: 8px; border: solid 2px transparent;
	padding: 0.25em; min-width: 2em;
	cursor: pointer;
	background-color: deepskyblue; color:black;
}
.AnswerBtn:hover {
	border: solid 2px black;
	background-color: white; color:black;
}
.AnswerBtn:active {
	box-shadow: 0.1em 0.1em 0.1em #7f7f7f;
	
}


ol.MSelAnswers { /*checkbox style*/
	text-align: left;
	list-style-type: lower-alpha;
	padding: 1em 0 0.5em 5em;
}
ol.MSelAnswers li { /*space between single answers */
	font-size: 17pt; line-height:1.35;
	margin-bottom: 0.2em;
}




/* Create a custom checkbox */
.MSelCheckbox {
	top:0; left:0;
  height: 19px; width: 19px; vertical-align: middle;
	margin: 0 10px 0 0;
}



div.ShortAnswer{
	padding: 1em;
}

.Answer{
	font-size: 18pt;
	color:white; background-color: green;
	padding:0px 4px;

}

.PartialAnswer{
	font-size: 120%; font-weight: bold;
	letter-spacing: 0.1em;
	color:white; background-color: green;
	padding:0px 0px 0px 4px;
}

.Highlight{
	color: #000000;
	background-color: #ffff00;
	font-weight: bold; 	font-size: 120%;
}

.FuncButton {
	display: inline; min-width: 3em;
	border: solid 1pt silver;	border-radius: 0.5em;
	margin:10px; padding: 0.5em;
	color: black; background-color: white;
	font-family: 'Sintony-Bold'; font-size: 13pt;
	cursor: pointer;	
	box-shadow: 0.2em 0.3em 0.2em #7f7f7f;
}

.FuncButton:active {
	box-shadow: none;
}
.FuncButton:hover{
	color: white;
	background-color: black;
}

@media screen and (max-width: 980px) {
	ol.QuizQuestions{ /* question body + quiz answers BODY/SPACE*/
		margin:0 auto; padding:0.25em 0 0 2em;
}

}


@media screen and (max-width: 650px) {
body {
	margin-right: 1%;
	margin-left: 1%;
}
div.ExerciseContainer {
	padding:0px 0.5em;
}

#ShowMethodButton {
	margin:0px auto 20px auto;
}
#ShowOneByOneCaption {
	margin:0px auto 20px auto;
}

ol.QuizQuestions{ /* question body + quiz answers BODY/SPACE*/
	margin:0 auto; padding:0.25em 0 0.5em 1.25em;
}
li.QuizQuestion { /*space between each quiz answers BODY*/
	padding: 0.5em 0;
	margin: 0 0 1em 0;
}
ol.MCAnswers { /*space inside of quiz answers BODY*/
	padding: 1em 0 0.5em 2.5em;
}
ol.MSelAnswers { /*checkbox style*/
	padding: 1em 0 0.5em 2.5em;
}

.FuncButton {
		font-size: 12pt!important;
}
	
#InstructionsDiv {
		font-size: 12pt;
}
}

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

}
.Begriff {
	font-size:15pt;
}
.QuestionText{ /* question body*/
	text-align: justify;
	margin: 0px; padding: 0.25em 0.25em;
	font-size: 15pt;
}
ol.MCAnswers { /*space inside of quiz answers BODY*/
	padding: 1em 0 0.5em 2em;
}
ol.MSelAnswers { /*checkbox style*/
	padding: 1em 0 0.5em 2em;
}
ol.MCAnswers li { /*space between single answers */
	font-size:15pt;
}

ol.MSelAnswers li { /*space between single answers */
	font-size: 15pt;
}

}

@media screen and (max-width: 420px) {
.Definition {
	font-size:13pt;

}
.Begriff {
	font-size:13pt;
}
.QuestionText{ /* question body*/
	text-align: justify;
	margin: 0px; padding: 0.2em 0.2em;
	font-size: 13pt;
}
ol.MCAnswers { /*space inside of quiz answers BODY*/
	padding: 1em 0 0.5em 1.5em;
}
ol.MCAnswers li { /*space between single answers */
	font-size:13pt;
}
ol.MSelAnswers { /*checkbox style*/
	padding: 1em 0 0.5em 1.5em;
}
ol.MSelAnswers li { /*space between single answers */
	font-size: 13pt;
}
}