@charset "UTF-8";
/* CSS Document */

div#quiz{
	margin:-20px -20px 0px -20px;
	min-height:400px;
}
div#quiz .header{
	display:block;
	background:#02bbba;
	color: #fff;
	font-size: 14px;
	font-family: 'Lucida Sans','Lucida Sans Unicode', 'Lucida Grande', sans-serif;
	font-weight:bold;
	vertical-align:middle;
	height:26px;
}

div#quiz .header .left{
	padding-left:15px;
	padding-top:3px;
}

div#quiz .header .right{
	margin-right:15px;
	padding-top:3px;
	float:right;
}

div#quiz .instructions{
	margin:0 auto;
	margin-top:40px;
	padding: 20px;
	display:block;
	background: #ebebeb;
	width: 650px;
	border-radius:5px;
	border: 1px solid #ccc;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-size: 100%;
	color: #333;
	line-height: #130%;
}

div#quiz .topContainer{
	display:block;
	vertical-align:middle;
	height:35px;
}

div#quiz .topContainer .questionNumber{
	padding-left:15px;
	padding-top:5px;
	font-size: 12px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight:bold;
	color:#999999;
	float:left;
	
}

div#quiz .questionTopic{
	font-size: 14px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight:bold;
	color:#333333;
}

div#quiz .topContainer .questionTimer{
	margin-right:15px;
	padding-top:5px;
	float:right;
	font-size: 12px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight:bold;
	color:#999999;
}

div#quiz .questionText{
	font-size: 14px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight:bold;
	color:#333333;
}

div#quiz .instructionText{
	font-size: 12px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight:normal;
	color: #eb8105;
}

div#quiz .questionResultContainer{
	margin:25px 0px 15px 0px;
	padding:10px 10px 10px 10px;
	display:block;
	border: 1px dashed #db0c0c; /*669900*/
	border-radius:3px;
	width:730px;
	min-height:50px;
	height:auto;

}

div#quiz .quizHistory{
	margin:0 auto;
	padding:20px;
	display:block;
	background:transparent;
	width:800px;	
}

div#quiz .questionContainer{
	margin: 0 auto;
	position:relative;
	display:block;
	
	width:750px;
	height:auto;
	z-index:2000;
}

div#quiz .questionActivityContainer{
	margin:0 auto;
	margin-top:25px;
	margin-bottom:10px;
	display:block;
	width:750px;
	height:auto;
	z-index:2000;
}

div#quiz .startBtnContainer{
	clear:both;
	padding: 20px 0;
	margin: 0 auto;
	text-align: center;
}

div#quiz .conclusionEndContainer{
	clear:both;
	margin-left:355px;
	margin-right:355px;
}

div#quiz .continueBtnContainer{
	margin-left:25px;
	clear:both;
}

div#quiz .continueBtnContainer.puzzle{
	margin-left:385px;
}

div#quiz .continueBtnContainer.twoGroups{
	margin-left:400px;
}

div#quiz .continueBtnContainer.threeGroups{
	margin-left:650px;
}

div#quiz .continueBtnContainer.ordering{
	margin-left:560px;
}

div#quiz .continueBtnContainer.dragAndDropMulti{
	margin-left:650px;
}

div#quiz .continueBtnContainer.dragAndDropSingle{
	margin-left:560px;
}

div#quiz .continueBtnContainer.multipleChoiceSingle{
	margin-left:0px;
}

div#quiz .continueBtnContainer.multipleChoiceMulti{
	margin-left:0px;
}

div#quiz .continueBtnContainer.sliderSingle{
	margin-left:20px;
}

div#quiz .btn-quiz{
	cursor: pointer;
	background:#576b7d;
	color:#fff;
	text-decoration:none; 
	width:90px;
	height:25px;
	border:none;
	border-radius:5px;
	color:#333333;
}

div#quiz .btn-quiz:hover,
div#quiz .btn-quiz:focus{
	cursor: pointer;
	background:#02bbba;
	color:#fff;
	text-decoration:none; 
	width:90px;
	height:25px;
	border:none;
	border-radius:5px;
}

div#quiz .btn-quiz.disabled,
div#quiz .btn-quiz:hover.disabled,
div#quiz .btn-quiz:focus.disabled

{
	cursor: pointer;
	background:#ccc;
	color:#fff;
	text-decoration:none; 
	width:90px;
	height:25px;
	border:none;
	border-radius:5px;
	cursor:default;
}

div#quiz .progressAnswered{
	margin-top:2px;
	margin-left:5px;
	background: transparent url(img/htmlQuiz/progressAnswered.png) no-repeat;
	width:16px;
	height:16px;
	float:left;
}

div#quiz .progressUnanswered{
	margin-top:2px;
	margin-left:5px;
	display:block;
	background: transparent url(img/htmlQuiz/progressUnanswered.png) no-repeat;
	width:16px;
	height:16px;
	float:left;
}

div#quiz .processingContainer{
	position:relative;
	margin: 0 auto;
	display:block;
	width:800px;
	height:462px;
}

div#quiz .processingContainer div#processingResults{
	margin: 0 auto;
	position:relative;
	display:block;
	width:750px;
	height:auto;
	z-index:2000;
}

div#quiz .processingContainer div#processingResults div#content{
	padding-top: 150px;
	text-align:center;
}

div#quiz .processingContainer div#processingResults div#loader{
	margin: 0 auto;
	display:block;
	background: transparent url(img/htmlQuiz/ajax-loader.gif) no-repeat;
	width:128px;
	height:15px;
} 

div#quiz ul.inlineResponse{
	margin: 0;
	padding: 0;
	list-style-type: none;
	text-align:left;
	display:block;
	height:auto;
}

div#quiz ul.inlineResponse li{
	display: inline;
	float:left;
}


noResult{  background: none; padding-left: 25px; height:20px; width:20px; cursor: pointer; text-decoration: none; line-height:21px; display: block;}



.responseCorrect{  
	display: block;
	background: url(img/htmlQuiz/correctResponse.png) 0 0 no-repeat; 
	width:17px; 
	height:16px; 
}


.responseIncorrect{ 
	display: block;
	background: url(img/htmlQuiz/incorrectResponse.png) 0 0 no-repeat; 
	width:17px; 
	height:16px; 
}

div#quiz .responseTextCorrect{
	margin-left:5px;
	font-size: 14px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	color:#69ad27;
	text-transform:uppercase;
	font-weight:bold;
}

div#quiz .responseTextIncorrect{
	margin-left:5px;
	font-size: 14px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	color:#db0c0c;
	text-transform:uppercase;
	font-weight:bold;
}

div#quiz .responseTextInstructions{
	display:block;
	color:#eb8105;
	font-size: 12px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}

div#quiz .questionResultCorrect{  background: url(img/htmlQuiz/correctResponse.png) 0 0 no-repeat; height:16px; width:17px; cursor: pointer; text-decoration: none; line-height:17px; display: block;}
div#quiz .questionResultIncorrect{  background: url(img/htmlQuiz/incorrectResponse.png) 0 0 no-repeat; height:16px; width:17px; cursor: pointer; text-decoration: none; line-height:17px; display: block;}

div#quiz .timeOutHeading{
	font-size: 14px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	color:#69ad27;
	text-transform:uppercase;
	font-weight:bold;
}

div#quiz .timeOutText{
	color:#69ad27;
	font-size: 12px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}


.greyIndicator{
	margin: 0px 5px 0px 0px;
	display:block;
	background: transparent url(img/icons/20/greyIndicator_20.png) no-repeat;
	color: #fff;
	width:20px;
	height:20px;
	
}

.redIndicator{
	display:block;
	background: transparent url(img/htmlQuiz/redIndicator.png) no-repeat;
	color: #fff;
	width:17px;
	height:16px;
	text-align:center;
}

.greyIndicator .text,
.redIndicator .text{
	margin-top:-1px;
	display:block;
	text-align:center;
	font-size: 13px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight:bold;
	color:#fff;
	
	
}

.puzzlePieceConnector{
	margin: 0px 0px 10px 0px;
	display:block;
	background:#eeeeee;
	border: 1px dashed #dcdcdc;
	border-right:none;
	border-bottom-left-radius:5px;
	border-top-left-radius:5px;
	width:220px;
	height:auto;
	min-height:32px;
}

.puzzlePieceConnector .responseText{
	padding:7px 10px 7px 10px;
	font-size: 12px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight:normal;
	color:#333333;
}

.puzzlePieceJoin{
	margin: 0px 0px 10px 0px;
	display:block;
	background:#dddddd;
	border: 1px solid #b7b7b7;
	border-left:none;
	border-bottom-right-radius:5px;
	border-top-right-radius:5px;
	width:220px;
	height:auto;
	min-height:32px;
	color:#333333;
}

.correctSelection{
	cursor: default;
	border: 1px solid #bccb9e !important;
	background-color: #9fb48c !important;
}

.showCorrect{
	border: 1px dashed #69ad27 !important;;
}

.incorrectSelection{
	cursor: default;
	border: 1px solid #c28383  !important;;
	background: #dc9e9e !important;; 
}


.puzzlePieceJoin:hover,
.puzzlePieceJoin:focus{
	background:#909090;
}

.puzzlePieceJoin .responseText{
	padding:7px 10px 7px 10px;
	font-size: 12px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight:normal;
	color:#333333;
	
}

hr.puzzleDivider{
	margin-bottom:10px;
	background-color:transparent;
	border:1px dashed #dcdcdc;
	border-style: none none dashed;
	color:#fff;
}

hr.puzzleDividerInvisible{
	margin-bottom:10px;
	background-color:transparent;
	border:none;
	border-style: none none dashed;
	color:#fff;
}

hr.continueBtnContainer{
	margin-bottom:10px;
	background-color:transparent;
	border:1px dashed #fff;
	border-style: none none dashed;
	color:#fff;
}

.puzzlePieceNumber{
	position: absolute;
	top:8px;
	left:0px;
	font-size: 30px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight:bold;
	color:#dddddd;
}

#systemNavigationContainer{
	position: absolute;
	clear: both;
	overflow: hidden;
	top: 100px;
	width: 100%;
	max-width: inherit;
	z-index: 150;
	height: 70px;
}



#systemNavigationContainer ul#systemNav{
	display: block;
	position: relative;
	width: 100%;
	padding:0;
	margin: 0;
}

#systemNavigationContainer ul#systemNav li{
	display: block;
	position: absolute;
	background: #94b831;
	color: #fff;
	text-transform: uppercase;
	font-size: 110%;
	overflow: hidden;
}



#systemNavigationContainer ul#systemNav li#back{
	left:0;
	font-family: Arial, Helvetica, sans-serif;
	border: 2px solid #fff;
	border-left: none;
	border-top-right-radius: 8px;
	border-bottom-right-radius: 8px;
	z-index: 1000;
	overflow: hidden;
}

#systemNavigationContainer ul#systemNav li#back .backBtn{
	display: block;
	margin: 0;
	padding: 42px 6px 6px 6px ;
	background: transparent url(img/htmlQuiz/navIcon_back.png) 50% 10px no-repeat;
	color: #fff;
	text-decoration: none;
	z-index: 1000;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	width:50px;
	height:auto;
	overflow: hidden;
}
#systemNavigationContainer ul#systemNav li#back:hover,
#systemNavigationContainer ul#systemNav li#back .backBtn:hover{
	background: #df4f3f url(img/htmlQuiz/navIcon_back.png) 50% 10px no-repeat;
}

#systemNavigationContainer ul#systemNav li#back .backBtn.disabled{
	display: block;
	padding: 42px 6px 6px 6px ;
	background: #dddddd url(img/htmlQuiz/navIcon_back.png) 50% 10px no-repeat;
	border-color:#dddddd;
	font-family: Arial, Helvetica, sans-serif;
	color: #fff;
}
#systemNavigationContainer ul#systemNav li#back .backBtn:hover.disabled{
	
}

#systemNavigationContainer ul#systemNav li#next{
	right:0;
	font-family: Arial, Helvetica, sans-serif;
	border: 2px solid #fff;
	border-right: none;
	border-top-left-radius: 8px;
	border-bottom-left-radius: 8px;
	z-index: 1000;
	overflow: hidden;
}

#systemNavigationContainer ul#systemNav li#next .nextBtn{
	display: block;
	margin: 0;
	padding: 42px 6px 6px 6px ;
	background: transparent url(img/htmlQuiz/navIcon_next.png) 50% 10px no-repeat;
	color: #fff;
	text-decoration: none;
	z-index: 1000;
	border-top-left-radius:5px;
	border-bottom-left-radius:5px;
	overflow: hidden;
	width:50px;
	height:auto;
}

#systemNavigationContainer ul#systemNav li#next:hover,
#systemNavigationContainer ul#systemNav li#next .nextBtn:hover{
	background: #df4f3f url(img/htmlQuiz/navIcon_next.png) 50% 10px no-repeat;
}


#systemNavigationContainer ul#systemNav li#next .nextBtn.disabled{
	display: block;
	padding: 42px 6px 6px 6px ;
	background: #dddddd url(img/htmlQuiz/navIcon_next.png) 50% 10px no-repeat;
	border-color:#dddddd;
	font-family: Arial, Helvetica, sans-serif;
	color: #fff;
}

#systemNavigationContainer ul#systemNav li#next .nextBtn:hover.disabled{
	
}

#systemNavigationContainer ul#systemNav li#enabled{
	display: none;
}

#systemNavigationContainer ul#systemNav li.navSeperator{
	display:none;
}

div#quiz .ui-slider-vertical{
	width:3px !important;
}

div#quiz .ui-corner-all, div#quiz .ui-corner-bottom, div#quiz .ui-corner-right, div#quiz .ui-corner-br {
    border-bottom-right-radius: 2px !important;
}
div#quiz .ui-corner-all, div#quiz .ui-corner-bottom, div#quiz .ui-corner-left, div#quiz .ui-corner-bl {
    border-bottom-left-radius: 2px !important;
}
div#quiz .ui-corner-all, div#quiz .ui-corner-top, div#quiz .ui-corner-right, div#quiz .ui-corner-tr {
    border-top-right-radius: 2px !important;
}
div#quiz.ui-corner-all, div#quiz .ui-corner-top, div#quiz .ui-corner-left, div#quiz .ui-corner-tl {
    border-top-left-radius: 2px !important;
}

div#quiz .ui-widget-content {
    background:#e1e1e1 !important;
	border: 1px dashed #c2c2c2 !important;
    color: #e1e1e1;
}


div#quiz .ui-slider .ui-slider-handle {
    left:-6px !important;
}

div#quiz .ui-state-default, div#quiz .ui-widget-content div#quiz .ui-state-default, div#quiz .ui-widget-header div#quiz .ui-state-default {
    background:#6e6e6e !important;
    border: 1px solid #636363 !important;
	width:13px !important;
	height:13px !important;
	border-radius:2px !important;
}
/*DRAG AND DROP*/

.dropContainer{
	margin: 0px 10px 5px 0px;
	display:block;
	cursor:default;
	width:auto;
	height:auto;
}

.dropContainer .heading{
	position:relative;
	padding: 5px 5px 0px 25px;
	border: 1px dashed #cccccc;
	border-bottom:none;
	border-top-left-radius:5px;
	border-top-right-radius:5px;
	text-align:left;
	width:auto;
	height:20px;
	font-size: 12px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	color:#333;
	font-weight:bold;
}

.dropContainer .heading .number{
	position:absolute;
	font-size: 20px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	color:#dddddd;
	left:5px;
	top:4px;
}

.droppable{
	display:block;
	cursor:default;
	border: 1px dashed #e2e2e2;
	border-bottom-left-radius:5px;
	border-bottom-right-radius:5px;
	background-color: #f1f1f1; 
	text-decoration:none;
	text-align:center;
	width:auto;
	height:auto;
}

.draggable{
	position:relative;
	display:block;
	margin: 5px 5px 5px 5px;
	padding: 3px 3px 3px 3px;
	cursor: move;
	border: 1px solid #b7b7b7;
	border-radius: 5px;
	text-decoration:none;
	text-align:center;
	width:auto;
	min-height:25px;
	height:auto;
	background: #dddddd;
	
}

.draggable .content{
	font-size: 12px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight:bold;
	color:#333333;
}

.draggable:hover,
.draggable:focus{
	background:#909090;
}

.droppable.singleAnswer{
	padding-top:2px;
	padding-bottom:5px;
	border-top-left-radius:5px;
	border-top-right-radius:5px;
	text-decoration:none;
	width:620px;
	height:25px;
}

.draggable.singleAnswer,
.draggable:hover.singleAnswer,
.draggable:focus.singleAnswer,
.correctSelection.singleAnswer,
.incorrectSelection.singleAnswer
{
	margin-left:0px;
	padding-top:2px;
	padding-bottom:5px;
	width:620px;
	height:25px;
}

hr.singleAnswerDivider{
	margin:20px 0px 20px 0px;
	background-color:transparent;
	border:1px dashed #dcdcdc;
	border-style: none none dashed;
	color:#fff;
	width:665px;
}

.droppable.multipleAnswer{
	width:245px;
	height:335px;
}

.dropBack.multipleAnswer{
	width:245px;
	height:335px;
}

.draggable.multipleAnswer,
.draggable:hover.multipleAnswer,
.draggable:focus.multipleAnswer,
.correctSelection.multipleAnswer,
.incorrectSelection.multipleAnswer
{
	width:225px;
}

.droppable.grouping{
	width:238px;
	height:340px;
}

.draggable.grouping,
.draggable:hover.grouping,
.draggable:focus.grouping,
.correctSelection.grouping,
.incorrectSelection.grouping
{
	width:220px;
}

.dragAndDropOrderingActivity{
	
	position:relative;
	width:750px;
}

.dragAndDropOrderingNumbersContainer{
	position:absolute;
	top:0px;
	left:0px;
	width:25px;
	height:100%;
}

.dragAndDropOrderingIndicatorContainer{
	margin: 0px 0px 25px 0px;
	padding: 2px 3px 3px 3px;
	height:28px;
	font-size: 30px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight:bold;
	color:#dddddd;
}

.orderingDivider{
	margin:5px 0px 0px -5px;
	diplay:block;
	height:1px;
	width:650px;
	border-bottom: 1px dashed #cccccc;
}

.dragAndDropOrderingContainer{
	margin:5px 0px 0px 40px;
	width:720px;
}

.draggable.ordering,
.draggable:hover.ordering,
.draggable:focus.ordering,
.correctSelection.ordering,
.incorrectSelection.ordering
{
	margin: 0px 0px 25px 0px;
	padding-top:2px;
	padding-bottom:5px;
	width:600px;
	height:25px;
}

/*multiple choice*/

.multipleChoice{
	margin:5px 0x 5px 0px;
	padding:10px 10px 10px 10px;
	
	display:block;
	height:auto;
	max-width:600px;
	min-width:255px;
	overflow:visible;
	border: 1px solid #b7b7b7;
	border-radius: 5px;
	background: #dddddd;
}

.multipleChoice.select{
	background: #989898;
	border: 1px solid #7e7e7e;
}

.multipleChoice.showCorrect{
	border: 1px dashed #69ad27;
}

.multipleChoice .resultIndicator{
	position:absolute;
	display:block;
	top:-2px;
	left:0px;
	width:25px;
	height:auto;
}

.multipleChoice .option{
	margin-top:-3px;
	float: left;
	width: 18px;
}

.multipleChoice .answerText{
	display:block;
	width:auto;
	height:auto;
	overflow:visible;
}

.sliderContainer{
	margin:5px 0x 5px 0px;
	position:relative;
	display:block;
	width:auto;
	height:auto;
	overflow:visible;
}

.slider{
	position:absolute;
	display:block;
	width:auto;
	height:auto;
	top:8px;
	left:0px;
}

.sliderQuestions{
	margin-left:20px;
}

.multipleChoice.sliderQuestion{
	/*background:#f7f7f7;*/
	border-radius:5px;
	
}

.multipleChoice .answerText.sliderQuestion{
	padding:5px 20px 5px 0px;
}

.multipleChoice .option.sliderQuestion{
	top:3px;
	left:20px;
}

.multipleChoice .resultIndicator.sliderQuestion{
	top:5px;
	left:5px;
}
/*.multipleChoice .answerText{
	margin-left:45px;
}*/

/* 
	Hide the original radios and checkboxes
	(but still accessible)
    
	:not(#foo) > is a rule filter to block browsers
	             that don't support that selector from
	             applying rules they shouldn't
	   
*/
div#quiz div:not(#foo) > input[type='radio'], 
div#quiz div:not(#foo) > input[type='checkbox'] {
	
	/* Hide the input, but have it still be clickable */
	opacity: 0;
	float: left;
	width: 18px;
}


div#quiz div:not(#foo) > input[type='radio'] + div label{
	margin: 0;
	clear: none;
	
	/* Left padding makes room for image */
	padding: 1px 0 4px 24px;

	/* Make look clickable because they are */
	cursor: pointer;
	
	background: url(radioButton.png) left top no-repeat;	
}

div#quiz div:not(#foo) > input[type='checkbox'] + div label {
	margin: 0;
	clear: none;
	
	/* Left padding makes room for image */
	padding: 1px 0 4px 24px;

	/* Make look clickable because they are */
	cursor: pointer;
	
	background: url(checkbox.png) left top no-repeat;	
}

/*
	Change from unchecked to checked graphic
*/
div#quiz div:not(#foo) > input[type='radio']:checked + div label {
	background-image: url(radioButton-checked.png);
}
div#quiz div:not(#foo) > input[type='checkbox']:checked + div label {
	background-image: url(checkbox-checked.png);
}