@charset "utf-8";

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


.ExerciseContainer {
	display: flex; flex-direction: row; flex-wrap: wrap;
	width:100%; position: relative;
	justify-content: center;
	margin:15px auto 0px; padding: 3px;
	background-color: DODGERBLUE;
}


.subCont1 { /* text side on the left */
	width:75%; display: block; position: relative;
	order:1;
	z-index: 11;
}
div.Story {
	display:flex; height:100%;
	flex-direction: column; flex-wrap: wrap;
	justify-content: center; align-content: center; align-items: center;
	background-color: white;
	border-radius: 12px 0 0 12px;
	padding:20px 0;
}
div.Story p {
	color: black; 
	font-family: 'Blinker'; font-size:17pt; line-height: 1.25; font-weight: normal;
	text-align: justify;
	padding: 0.5em 1em;
}



.subCont2 { /* right side */
	width:25%; display: block; position: relative;
	background-color: GAINSBORO;
	order:2;
	z-index: 1000;
}
.stickyContainer {
	display:block; position: relative;
	/*background-color: yellow;*/
}

/* <form> tags start */
#Rhubarb {
	display: flex; flex-direction: column; flex-wrap: nowrap; 
	width: 100%; position: relative;
	margin: 0px auto; padding: 0 auto;
	background-color: LIMEGREEN;
}
.inForm {
	display: block; flex-direction: column; flex-wrap: nowrap;
	justify-content: center; align-items: center;
	margin: 0; padding: 10px 0px 0px;
	order:1;
}
.inForm label {
	display: block!important; width:100%;
	text-align: center;
	margin:0 auto 5px;
	font-family: 'Blinker'; font-size: 15pt;
	color:white;
}
.inForm input[type="text"] {
	display: block;
	margin:0 auto 10px; padding: 2px 3px;
	text-align: center;
	font-family: 'Blinker'; font-size: 16pt;
	outline: none;
	color:black; background-color:floralwhite;
	border-radius: 5px; border:1px solid transparent;
}
.inForm input[type="text"]:focus {
	border-radius: 5px; border:1px solid gray;
	margin:0 auto 10px; padding: 2px 3px;
	box-shadow: -1px -1px 5px black;
	text-align:center;
}
/* <form> tags start */


.Label {   /* Score label + Incorrect words label */
	display:block;
	color: white; background-color:dodgerblue;
	text-align: center;
	font-family: 'Blinker'; font-size: 16pt;
	padding:2px 0px;
	/*margin: 1em auto 1.5em; padding:10px;*/
}

/* incorrectWordsContainer o */
.IncorWordsContainer {
	display:block; width:100%;
	background-color: POWDERBLUE;
	margin:10px auto 0px;
}
#UsedBoxLabel {
	margin:0px;
}
#UsedBox {
	display:none; position: relative;
	width:100%!important;
	margin:0; padding: 5px;
	flex-direction: row; flex-wrap: wrap;
}
#UsedBox li {
	display:inline-block;
	padding: 3px 6px; margin:5px;
	background-color: orangered; color: white;
	list-style: none;
}
/* incorrectWordsContainer x */


/* scoreContainer o */
.ScoreContainer {
	display:block; position: relative;
	width:100%;
	margin: 10px auto 0px;
	order:4;
}
#ScoreBox {   /* scorebox %%% 100% */
	display:none; min-width: 4em;
	color: white; background-color: CRIMSON;
	text-align: center;
	font-family: 'Blinker'; font-size: 21pt;
	margin: 0px auto; padding:0px;
}
/* scoreContainer x */


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

.ExerciseContainer {
	display: flex; flex-direction: column; flex-wrap: wrap;
}


.subCont1 {
	width:100%; display: block; position: relative;
	order:2;
	z-index: 5;
}
div.Story {
	border-radius: 0 0 12px 12px;
	padding:15px 0;
}
div.Story p {
	font-size:16pt; line-height: 1.35;
	padding: 0.5em 1em;
}


.subCont2 {
	width:100%; position: relative;
	display: flex; flex-direction: column; flex-wrap: nowrap;
	align-content: flex-start; justify-content: flex-start;
	background-color: GAINSBORO;
	order:1;
}

#Rhubarb {
	display: flex; flex-direction: row; flex-wrap: wrap;
	width: 100%; position: relative;
	margin: 0px auto; padding:10px 0px 0px;
	background-color: LIMEGREEN;
	/*z-index: 10;*/
	order:1;
}
.inForm {
	display: block; flex-direction: column; flex-wrap: nowrap;
	justify-content: center; align-items: center;
	margin: 0; padding: 5px 0px 0px;
	width:50%;
}

.Label {   /* scorebox Your score is:.... */
	display:block; width:100%;
	order:3;
}
.ScoreContainer {
	display:block; width:100%;
	margin: 0px auto;
	order:4;
}
.IncorWordsContainer {
	display:block; width:100%;
	margin:0px auto;
	z-index: 1;
	order:0;
}
}


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

div.Story {
	border-radius: 0 0 12px 12px;
	padding:10px 0 25%;
}
div.Story p {
	font-size:17pt; line-height: 1.5;
	padding: 0.5em 1em;
}

#Rhubarb {
	display: flex; flex-direction: column; flex-wrap: nowrap;
	width: 100%; position:relative;
	margin: 0px auto; padding:5px 0px;
	order:1;
}
.inForm {
	display: block; flex-direction: column; flex-wrap: nowrap;
	justify-content: center; align-items: center;
	margin: 0; padding: 5px 0px;
	width:100%;
}
.inForm input {
	margin:0 auto 5px;
}
}