/* Personality Quiz Styles:  */
.quiz-medium-image {
	
	height:auto;
  background-color:#fff;
	margin-top:20px;
	margin-bottom:10px;
}

.quiz-result-image {
	display:block;
	
	height:auto;
	margin-top:20px;
	margin-left:auto;
	margin-right:auto;
}

.quiz-startover-button {
	width:143px;
	height:52px;
	background:url(http://www.cbc.ca/kidscbc2//content/images/quiz_startover_button.png);
	border:none;
	content:none;
	display:block;
	cursor:pointer;
	margin:20px;
}

.personality-quiz {
	
	margin-bottom:60px;
	margin-top:20px;
}

.personality-quiz .quiz_wrapper {
	margin:0;
	padding:0;
	margin-bottom:20px;
}

.question ol {
	margin-bottom:10px;
}

.question ul {
	margin:0;
	padding:0;
}
 
.not-numbered ol{
	list-style:none;
	list-style-type:none;
}

.question-text {
	display:inline-block;
	font-weight:bold;
	font-size:20px;
	margin-top:20px;
	margin-bottom:10px;
}

.response_wrapper {
	display:inline-block;
	border:1px solid #9c9c9c;
	min-height: 135px;
	background-color:#ddd;
	margin:3px;
	padding-left: 	0px;
    padding-right: 	0px;
	width: 100%; 
	cursor: pointer;
}

/* 
the nth calculation was getting weird, 
for some reason it works when I add a set 
but it has to be double the actual class 
count to work properly 
*/
.question:nth-child(12n+1) .response_wrapper .quiz-square-image{
	background-color: #185bc0; /*Blue*/
}

.question:nth-child(12n+3) .response_wrapper .quiz-square-image{
	background-color: #00b1ab; /*Aqua*/
}

.question:nth-child(12n+5) .response_wrapper .quiz-square-image{
	background-color: #03be5f; /*Green*/
}

.question:nth-child(12n+7) .response_wrapper .quiz-square-image{
	background-color: #a74b98; /*Purple*/
}

.question:nth-child(12n+9) .response_wrapper .quiz-square-image{
	background-color: #e10003; /*Red*/
}

.question:nth-child(12n+11) .response_wrapper .quiz-square-image{
	background-color: #ff7800; /*Orange*/
}

.response_wrapper .quiz-square-image {
	border:1px solid #838383;
	background:white;
	text-align:center;
	display: inline-table;
	width:100%;
	position: relative;
}


.response_wrapper.hover {
	background-color:#fff195;
}

.response_wrapper.selected {
	background-color:#bed5ed;
}


@font-face {
    font-family: 'montserratbold';
    src: url('http://www.cbc.ca/kidscbc2//content/fonts/quiz/montserrat-bold-webfont.eot');
    src: url('http://www.cbc.ca/kidscbc2//content/fonts/quiz/montserrat-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://www.cbc.ca/kidscbc2//content/fonts/quiz/montserrat-bold-webfont.woff') format('woff'),
         url('http://www.cbc.ca/kidscbc2//content/fonts/quiz/montserrat-bold-webfont.ttf') format('truetype'),
         url('http://www.cbc.ca/kidscbc2//content/fonts/quiz/montserrat-bold-webfont.svg#montserratbold') format('svg');
    font-weight: normal;
    font-style: normal;
}
.response-text-o {
	display: inline-table;
}
.box_fitter {
/*
	position: relative;
	top: 0px;
	left:0px;
	z-index: 1;
	filter:Alpha(opacity=0);
	display: none;
	*/
	visibility:hidden;
}
.response-text{
	display:inline-block;
	font-family: 'montserratbold';
	font-size:20px;
	margin-top:40px;
	color:#fff;
	color: #000\9;
	z-index: 10;
	position: absolute;
	top: 0px;
	left:0px;
	width: 100%;
	padding: 0 5%;
}

@media (max-width: 600px) {
.response-text{font-size: 16px; line-height: 19px; margin-top:20px;} 
}
@media (max-width: 400px) {
.response-text{font-size: 14px; line-height: 16px; margin-top:10px;}
}
@media (max-width: 350px) {
.response-text{font-size: 12px; line-height: 14px; margin-top:5px;}
}


.response_wrapper input[type="radio"] {
	display:none;
}

.response_wrapper input[type="radio"] + label span {
	display:inline-block;
	width:23px;
	height:23px;
	background:url('http://www.cbc.ca/kidscbc2//content/images/quiz_checkbox.png') left top no-repeat;
	cursor:pointer;	
	margin-left:10px;
}

.response_wrapper input[type="radio"]:checked + label span {
	background:url('http://www.cbc.ca/kidscbc2//content/images/quiz_checkbox.png') -23px top no-repeat;
}

.response_wrapper .quiz-image-caption {
	font-size:10px;
	color:gray;
	text-align:right;
	margin-right:5px;
	padding:0;
}


.result {
	border:1px solid #dddddd;
	padding-top:10px;
	padding-left:10px;
	padding-right:10px;
}

.result-text {
	display:block;
	font-size:14px;
	color:#797979;
}

.result-headline {
	color:#797979;
}

.result-hidden {
	display:none;
}
/* End of Personality Quiz Styles */