@charset "utf-8";


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


#WordsDiv {
	display:block; width:85%;
	margin: 25px auto 0px; padding: 0.25em 0.35em;
	border-top: solid 4px saddlebrown!important;
	border-radius: 0.5rem 0.5rem 0 0;
	background-color: #FFF8DC;
	border: solid 1px saddlebrown;
}
#ShuffledWords {
	list-style-type: none; text-align: center;
}
#ShuffledWords li {
	display:inline-flex; flex-direction: row; flex-wrap: wrap;
	font-family: 'Blinker'; font-size: 15pt;
	margin:3px; padding:0px 3px;
	font-weight: bold; line-height: 1.25;
}

/*
.Guess{
	font-weight: bold;
}

.CorrectAnswer{
	font-weight: bold;
}
*/

.ClozeBody {
	display: block; width:100%; position:relative;
	margin:5px auto; padding: 5px 0px;
	background-color: THISTLE;
}
.text_div {
	display: flex; position:relative;
	flex-direction: row; flex-wrap: wrap; align-items: center;
	margin: 0px 0;/* add 10px 0 to see borders*/
	padding: 0px;
	background-color: LAVENDER;
	/*border-top:solid 4px darkslategray; border-bottom:solid 2px darkslategray;*/
}
.text_div .cloze_text {
	display: block; position:relative;
	text-align: left; line-height: 1.55;
	font-family: 'Blinker'; font-size: 16pt; font-weight:normal; 
	margin: auto 0px!important; padding: 10px;
}


span.GapSpan { 
	font-weight: normal;
	cursor: pointer;
}
.GapBox {
	font-weight: bold;
	color: DARKSLATEGRAY !important;
}

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



.GapSpanCorrection { /* show solution */
	display:inline;
	font-family: 'Blinker'; font-size: 16pt; font-weight: normal;
	color: white; background-color:darkorange;
	letter-spacing: 0.5px;
	padding: 2px 6px; margin:0px 3px;
	border-radius: 6px;
}

.GapSpanMissed { /* right answer */
	display:inline;
	font-family: 'Blinker'; font-size: 16pt; font-weight: bold;
	color: white; background-color: green;
	letter-spacing: 0.5px;
	padding: 2px 6px; margin:0px 3px;
	border-radius: 6px;
}

.incorrectAnswer { /* wrong answer */
	display:inline;
	font-family: 'Blinker'; font-size: 16pt; font-weight: bold;
	letter-spacing: 0.5px;
	color:white!important; background-color:red!important;
	padding: 2px 6px; margin:0px 3px;
	border-radius: 6px;
}




span.GapSpanCorrect {
	color: white; background-color: green;
	letter-spacing: 0.5px;
	padding: 1px 6px; margin:0px 3px;
	border-radius: 6px;
}


.GapSpanUnDetected {
	font-weight: bold;
	color: white;
	background-color:darkblue;
	padding: 1px 4px;
	border-radius:10px;
	text-decoration:none;
}


.GapSpanFoundError {
	font-weight: normal;
	color: red;
	text-decoration:line-through;
}

.GapSpanNotFoundError {
	font-weight: normal;
	color: orange;
	text-decoration:line-through;
}


.ClueButton {
	display: inline-block; position:relative;
	border: solid 1px MEDIUMPURPLE; border-radius: 0.25em;
	padding: 0.15em 0.25em; margin:auto 3px;
	color: black; background-color: THISTLE;
	cursor: pointer;	
	font-family: 'Blinker'; font-size:17pt; font-weight: bold;
}
.ClueButton:hover {
	color: white; background-color: MEDIUMPURPLE;
}


@media screen and (max-width: 980px) {
#WordsDiv {
	width:92%;
}
}

@media screen and (max-width: 690px) {
#WordsDiv {
	width:100%;
	margin: 15px auto 0px; padding: 0.1em 0 0.25em 0;
}
#ShuffledWords li {
	font-size: 14pt;
}
.text_div .cloze_text {
	text-align: justify;
	margin: auto 0px!important; padding: 10px 20px;
}
}