@charset "utf-8";

/* This contains the entire quiz. */
.quizContainer{
	margin: 0px auto;
	padding: 12px;
	background-color: #eeeeee;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	color: #000000;
	width: 75%;
}
@media screen and (max-width: 1200px){
    .quizContainer{
		width: 60%;
    }
}
@media screen and (max-width: 620px){
    .quizContainer{
		width: 90%;
    }
}

/* This contains an entire question, including its answers, branches, and explanations. */
.questionContainer{
	text-align: left;
	padding: 12px;
	margin: 20px auto;
	border: 2px solid #808080;
	border-radius: 10px;
	background-color: #ffffff;
}

/* This is the actual question part of each question. */
.question{
	font-weight: bold;
	margin-bottom: 15px;
}

/* This is each individual answer. */
.answer{
	margin-left: 10px;
}

/* These are the radio buttons and checkboxes. */
.answer input[type="radio"], .answer input[type="checkbox"]{
	margin-right: 5px;
}

/* This is the submit button. It is hidden onclick, and replaced with the quizResults div. */
.submitQuizButton{
	display: block;
	margin: 15px auto;
	padding: 4px;
	font-weight: bold;
	text-align: center;
	font-size: 20px;
	cursor: pointer;
}

/* These are optional answer explanations revealed on submit. Place them within their questionContainers. */
.answerExplanation{
	display: none;
	margin-top: 20px;
	font-style: italic;
	color: #43ab43;
	width: 75%;
}

/* If an individual answer has sub-options, place them in a div with this class. */
.answerBranch{
	display: none;
	margin: 5px 0px 10px 15px;
}

/* These contain the message revealed on submit if a user passes or fails. */
#scoreContainer, #quizPassedContent, #quizFailedContent{
	display: none;
	margin: 10px auto;
	font-weight: bold;
	font-size: 24px;
}