@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!important; width:100%!important;
	margin:20px auto!important; padding: 20px 0px;
	background-color: lavender;
}
.text_div {
	display: flex; min-height: 3em; align-items: center;
	margin: 0 0 20px 0; padding: 0px;
	border-top:solid 4px darkslategray; border-bottom:solid 2px darkslategray;
}
.text_div .cloze_text {
	display: block;
	font-size: 16pt; line-height: 1.75;
	font-family: 'Blinker'; text-align: left; font-weight:normal;
	margin: auto 0px; padding: 10px;
	background-color: LAVENDER;
}


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.5; text-align:center;
	padding: 1px 6px; margin:0px 3px;
	border:1px solid gray; border-radius: 5px;
	color:black; background-color:floralwhite;
}
input[type="text"]:focus {
	outline: none; border-radius: 5px;
	padding: 1px 6px; margin:0px 3px;
	box-shadow: -1px -1px 5px #888;
	font-size: 16pt; line-height: 1.5;
	font-family: 'Blinker'; text-align:center;
	background-color: yellow;
}



.GapSpanCorrection { /* show solution */
	font-weight: bold;
	color: white; background-color:darkorange;
	padding: 1px 6px; margin:0px 3px;
	letter-spacing: 0.5px;
	border-radius: 6px;
	text-decoration:none;
}

.GapSpanMissed { /* right answer */
	color: white; background-color: green;
	letter-spacing: 0.5px;
	padding: 1px 6px; margin:0px 3px;
	border-radius: 6px;
}

.incorrectAnswer { /* wrong answer */
	color:white!important; background-color:red!important;
	padding: 1px 3px; margin:0px 3px;
	font-family: 'Blinker'; font-size: 16pt;
}




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 0px;
	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 {
	font-size: 15pt; line-height: 1.75;
	text-align: justify;
}