@charset "utf-8";

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


#WordsDiv {
	display:block; width:85%;
	margin: 25px auto 0px; padding: 1em;
	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;
}


.list_div {
	display: flex; min-height: 3em; align-items: center;
	margin: 0 0 10px 0; padding: 0px;
	border:solid 2px darkslategray;
	background-color: LAVENDER;
}

.list_div .cloze_text::before {
	display: inline-block; width:25px;
	font-size:14pt; font-weight: bold; text-align: center;
	margin: 0 5px 0 -20px;
	padding:0 0px 0 0px;
	background-color: darkslategray; color: white;
	border-radius:0 15px 15px 0;
	content: "●"; 
}
.list_div .cloze_text {
	display: block;
	font-size: 16pt; line-height: 1.5;
	font-family: 'Blinker'; text-align: left;
	margin: 0px 0px ; padding: 10px;
	/*background-color: aquamarine;*/
}

.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.55;
	font-family: 'Blinker'; text-align: left;
	margin: auto 0px; padding: 10px 40px;
	background-color: LAVENDER;
}


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


span.GapSpan{
	display:inline-flex; position: relative;
	font-size:16pt; line-height: 1.25; font-family: 'Blinker';
	/*color:green; background-color: darkslategray;*/
	padding:0; margin:0px 3px!important;
	border-radius: 5px;
}
input[type="text"] {
	font-size: 16pt; font-family: 'Blinker'; 
	line-height: 1.25; text-align:center;
	padding: 0px 3px; 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: 0px 3px; margin:0px 3px;
	box-shadow: -1px -1px 5px #888;
	font-size: 16pt; font-family: 'Blinker'; text-align:center;
	background-color: yellow;
}
.correctAnswer {
	background-color: green!important; color: white!important;
	font-family: 'Blinker'; font-size: 16pt; letter-spacing: 1px; font-weight: bold;
	border-radius: 0px; padding: 1px 5px!important; margin:0px 3px!important;
}
.incorrectAnswer {
	color:white!important; background-color:red!important;
	padding: 1px 3px; margin:0px 3px;
	font-family: 'Blinker'; font-size: 16pt; letter-spacing: 1px; font-weight: bold;
}
.incorrectAnswer:focus {
	color:darkorange!important; background-color:white!important;
	padding: 1px 3px; margin:0px 3px;
}
.hintedAnswer {
	color:white!important; background-color:orangered!important;
	padding: 1px 3px; margin:0px 3px;
	font-family: 'Blinker'; font-size: 16pt; letter-spacing: 1px; font-weight: bold;
}

.Guess{
	font-weight: bold;
}



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

}



@media screen and (max-width: 690px) {
#WordsDiv {
	width:100%;
}
#ShuffledWords li {
	font-size: 14pt; line-height: 1.25;
	margin:4px;
}

.list_div .cloze_text {
	font-size: 15pt; line-height: 1.5;
	text-align: justify;
	margin: auto 0px!important; padding: 10px 15px;
}

.text_div .cloze_text {
	font-size: 16pt; line-height: 1.5;
	text-align: justify;
	margin: auto 0px!important; padding: 10px;
}

span.GapSpan{
	font-size:15pt;	line-height: 1.25;
	padding:0; margin:0px 3px!important;
}
input[type="text"] {
	font-size: 15pt; line-height: 1.25;
	padding: 1px 3px; margin:0px 3px;
}
input[type="text"]:focus {
	padding: 1px 3px; margin:0px 3px; font-size: 15pt;
}
.correctAnswer {
	font-size: 15pt;
	padding: 1px 5px!important; margin:0px 3px!important;
}
.incorrectAnswer {
	font-size: 15pt;
	padding: 1px 3px; margin:0px 3px;
}

}