@charset "UTF-8";
/* CSS Document */
body{background-color:#8da4c5; padding:2em 4em 0 4em; font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; color:#333333; margin:0; font-size:80%; line-height: 1.4em; height: 100%;}
html {height:100%;}

@viewport { width:device-width; }

h1 { color:#38547B; font-weight: 400;font-size: 140%;}
h2 { color:#38547B; font-weight: 300;font-size: 130%;}
h3 { color:#38547B; font-weight: 300;font-size: 100%;}
h4{ color:#38547B;font-weight: 300;  margin:0.5em 1em; padding:0; font-size:110%;}
p {font-size: 1em; padding:0; margin:0 0 1em 0; }

.paddingRight{padding-right:2em;}
.paddingTop{padding:2em 0 0 0;}
.hidden{visibility:hidden;}
.invisible{display:none;}
.showInMobile, .showInPrinter{display:none;}

img{border:none;}
.fancybox-effects-c img{ float:right; margin: 0 0 1em 1em;}
a {color:#38547B;}
.highlight {background-color:#38547B;padding: 0.5em; color:#FFF;  }
.left {float:left; margin-right:0.5em;}
.right {float:right; margin-left:0.5em;}
.clearBoth{clear:both;} .clearNone{clear:none !important;}
.heightNone{height:0; padding:0; margin:0;}
label {cursor: pointer;}

.interfaceBanner{max-width:80em; margin-left:auto; margin-right:auto;}
.interfaceLogo {float:left; padding-right:0.5em;}
.interfaceHeaderTitle{ font-size:160%; color:#FFF; font-weight:200; float: left; margin-top: -0.5em;}
.interfaceHeaderMenuItem{cursor: pointer; margin: -1em 0.2em 0.3em 0; padding: 0.5em 1em; float: right;}
.interfaceHeaderMenuMobile{display:none;}
.interfaceBanner .on{ color: #666666; background-color:#FFF;} .interfaceBanner .off{ color: #FFF; background-color: #666666;}
.interfaceContentHolder{clear:both;  margin:0.7em 0 0 0; padding:0; height:81%; max-width:80em; margin-left:auto; margin-right:auto;  }
.interfaceNavContentHolder{background-repeat:no-repeat; background-size:100% auto; background-position:right top; height:100%; }
.interfaceNavContentText{display:none;padding:0;  text-align:center; width:100%;}
.interfaceNumberMenu {float:left; min-width:3.14%; cursor:pointer; padding:0.3em 0; background-color:#d9e1ec; margin-right:0.2%; color:#38547B; font-size:80%; }
.iconTaskOn { background-color: #FFF;}
.iconTaskPassed { background-color:#7d9c4c; border-color:#7d9c4c; color:#FFF;}
.iconTaskFailed { background-color:#FB7740; border-color:#FB7740; color:#FFF;}

/*BUTTONS*/
.interfaceButton{ float:right; cursor:pointer; font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; padding: 0.6em 2em; font-size:100%; color:#FFF; border:0; background-color:#38547B;     -webkit-appearance: none;}
.interfaceSubmitButton{ background-color:#7D9C4C; }
.interfaceNextButton, .interfaceNextButtonIntro{ background-color:#7D9C4C; display:none;} .interfaceNextButtonIntro {display:block;}
.interfaceBackButton, .interfaceBackButtonIntro{ background-color:#AEAEAE;}
.interfacePrintButton{ background-image:url(../img/print_icon.png); background-repeat:no-repeat; background-color: #666666; background-size: 20px 20px; background-position: 10px 5px; padding: 0.5em 2em 0.5em 40px;}
.interfaceCloseButton{margin: -1em 0 0 0; }
.interfaceExitButton{ background-color:#7D9C4C; }

.interfaceRightContent{padding:1.5%; background-color: #FFF; display:none; }
.markIcon{vertical-align:middle; display:none;  margin-left: 0.1em;}
.interfaceIcon {border:0; margin-right:0.2em; vertical-align:middle; background-color:#EB1C2E; min-height:25px;}
.savingIcon {position: fixed; display:none; background-color:#FFF; padding:1em; top:5em;}
table{margin-bottom:1em; font-size: 95%;}
table th, table td{border:0.1em solid #38547B;padding:0.5em;}
table th{ text-align:left; background-color:#F2F2F2;}
table td, table td p{padding-top: 0; padding-bottom: 0; margin:0; vertical-align: middle; }

/* MCQ */
.MCQHolder{}
.MCQLeft{float:left; width:58%; margin-right:2%;background-color: #f2f2f2; padding-bottom:1em;}
.MCQRight{float:left; width:40%;background-color:#f2f2f2;padding-bottom: 0.5em;}
.MCQOptionHolder{clear:both;}
.MCQOptionHolderLeft {float:left; margin-right: 0.3em;} .MCQOptionHolderRight {float:left; width:85%;}
.MCQOptionHolder input[type=radio]{}
.MCQOption { text-transform: lowercase; color: #FFF; background-color: #b6c497; padding: 0.2em 0.7em 0.5em 0.7em; border-radius: 1.4em;  font-size: 80%; margin: 0 0.2em 0.1em 0.2em; display:inline; }
.MCQOption2 {padding: 0 0.5em; text-align: center; float: left; width: 3%;clear: both; min-height: 2em;    margin-right: 1.6em;  }
.MCQOptionOn {background-color: #7D9C4C;}	
.MCQRangeInstructions {margin-bottom:0;}
.MCQRangeLabelHolder{width:80%; font-size:80%; margin-left:16%;}
.MCQRange{width:85%; font-size:60%; float:left; min-height: 2em; background: none; padding:0;}
.MCQRangeLabelLeft{float:left;}
.MCQRangeLabelRight{float:right;}
.MCQCertaintyRange{width: 78%;    margin: 0 0 0 10%; cursor:pointer; }

.certaintyHolder{clear:both; display:none; margin:2em 0; background-color:#f2f2f2; padding-bottom:1em;}
.certaintyBox {float:left; width: 16%; font-size:80%; padding: 0.8em 0; cursor:pointer; text-align:center;}
.certaintyBox0 {background-color:#e7ebdc;} .certaintyBox1 {background-color:#cfd7ba;} .certaintyBox2 {background-color: #b6c497; }
.certaintyBox3 {background-color:#9eb075; } .certaintyBox4 {background-color:#869c52; }
.certaintyBoxOn {background-color:#718445;} .certaintyBoxOff {border:0;cursor:default;}

.feedbackBox{background-color: #f2f2f2; padding:0.5em 0.5em 1em 0.5em; margin-top: 1em; }
.feedbackBox p, .feedbackBox ul, .feedbackBox ol{font-style:italic;} 
.feedbackBoxHeader{font-weight:600; color:#38547B;}

/* CS*/
.CS_questionHolder{background-color:#e6e6e6; padding: 1em; margin-bottom: 2em;}
.CS_questionHolder h3{margin-top:0;}
.CS_textfieldHolder{clear:both;background-color: #FFF;    margin-bottom: 0.3em;}
.CS_textfieldNumber{width: 4%;float: left; margin-left:1%;}
.CS_textfieldDiv{float:left; width:94%; margin-bottom: 0.2em;}
.CS_textfield {border:0; padding:0.2em; width:100%; font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; font-size:90%;}
.CS_checkboxHolder {float:left; width:49%;}
.CS_checkboxHolder > div:nth-of-type(odd) {background: #e0e0e0;}
.CS_checkbox {widows: 2em; height:2em; vertical-align: middle;}
.CS_suggestedAnswerHolder { display:none; border: 0.2em solid #6a88b0; margin-top: 1em;   background-color: #d9e1ec;}
.CS_suggestedAnswerHolder p{padding: 0 1em; margin: 0 0 0.5em 0;}
.CS_suggestedAnswerHolder ul, .CS_suggestedAnswerHolder ol {margin: 0 0 0.5em 0;}
.CS_reflectionHolder {display:none;}
.CS_referencesHolder {display:none; }
.CS_reflectionHolder{border: 0.2em solid #869c52; margin: 1em 0;   background-color: #cfd7ba; padding:1em;}
.CS_reflectionHolder h4{margin:0; padding:0 0 1em 0;}
.CS_reflection {border:0; padding:0.2em; width:100%; font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; font-size:90%; height: 5em;}

.tableLeft{float:left; width:45%; margin-right:5%;}


/*Conlusion screen*/
.summaryHead {text-decoration:underline; cursor:pointer;}
.conclusionSummary{background-color: #f2f2f2; padding:0.5em 0.5em 1em 1em; margin: 1em 0;}

.marginBottom{margin-bottom:1em;}
.marginTop{margin-top:3em;}
.marginRight{margin-right:0.5em;}
.marginLeft{margin-left:2em;}
.marginSmallTop{margin-top:1em;}
.marginRightNone{margin-right:0;}
.marginBottomSmall{margin-bottom:0.3em;}

/*Smaller screens*/
@media only screen and (max-width: 60em) {
	.interfaceHeaderMenuItem{ float: none; width: 100%; margin: 0.5em 0; padding: 1em 0; display: block; text-align: center;}
}



/*MOBILE SPECIFIC STYLES*/
@media only screen and (max-width: 50em) {
	
	body{padding: 1em 1em 0 1em;}
	.hideFromMobile{display:none;}
	.interfaceHeaderTitle{ margin: 0.5em 0 0 0; font-size: 120%;}
	.interfaceNumberMenu {min-width: 2em; margin-bottom: 0.2em;}
	
	

	
	.showInMobile{display:block;}
	.interfaceContentHolder{border:none; width:100%; margin:0;}
	.interfaceHeaderMenu{text-align:left; width:80%;}
	
	.interfaceHeaderMenu .on{border-bottom:none;}
	.interfaceHeaderMenuItem{ margin-top:0.5em;}
	.interfaceHeaderSubtitle{display:none;}
	.MCQRight, .MCQLeft{float:none; width:100%;}
	.MCQRight:after, .MCQLeft:after { content: ''; display: block; clear: both; }
	.MCQOptionHolderRight{ padding: 0.2em 0;}
	.MCQRangeInstructions {clear: both;}
	 .MCQRange {width: 80%;}
	.interfaceButton{margin-bottom:2em;}
	
}

/*SMALL MOBILE SPECIFIC STYLES iphone 4, iphone 5 portrait, nexus 4 portrait, all small phones */
@media only screen and (max-width: 30em) {
	.interfaceRightContent {margin:0; border-radius:0;}
	.interfaceRightContent {margin:0; border-radius:0;}
	.tableLeft{float:none; width:100%; margin:0;}
	.interfaceHeaderMenuItem{ float:left;}
	.certaintyBox { min-height: 4em;}
	.MCQOptionHolderRight{ width:auto; }
	.fancybox-effects-c img{ float:none; margin: 0.5em 0;}
	.MCQRight, .MCQLeft{float:none; width:100%;}
}

/*DESKTOP SPECIFIC STYLES LAST*/
@media all and (min-width: 50em) {
  body{font-size:90%;}
}


input[type=range] {
    /*removes default webkit styles*/
    -webkit-appearance: none;
    cursor:pointer;
}
input[type=range]::-webkit-slider-runnable-track {
    height: 2px;
    background: #8da4c5;
    border: none;
    border-radius: 3px;
}
input[type=range].MCQCertaintyRange::-webkit-slider-runnable-track { height:5px;}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 12px;
    width: 12px;
    border-radius: 50%;
    background: #38547B;
    margin-top: -5px;
	margin-left:-1.7em;
}
input[type=range].MCQCertaintyRange::-webkit-slider-thumb { margin-top: -3px; margin-left:0;}
input[type=range].MCQRange:focus::-webkit-slider-thumb { }

input[type=range]:focus {
    outline: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
    background: #8da4c5;
}

input[type=range]::-moz-range-track {
    height: 2px;
    background: #8da4c5;
    border: none;
    border-radius: 3px;
}
input[type=range].MCQCertaintyRange::-moz-range-track{ height:5px;}
input[type=range]::-moz-range-thumb {
    border: none;
    height: 12px;
    width: 12px;
    border-radius: 50%;
    background: #38547B;
	margin-left:-1.7em;
}

/*hide the outline behind the border*/
input[type=range]:-moz-focusring{
    
    outline-offset: -1px;
}

input[type=range]::-ms-track {
    height: 2px;
    
    /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
    background: transparent;
    
    /*leave room for the larger thumb to overflow with a transparent border */
    border-color: transparent;
    border-width: 6px 0;

    /*remove default tick marks*/
    color: transparent;
}
input[type=range].MCQCertaintyRange::-ms-track{ height:5px;}
input[type=range]::-ms-fill-lower {
    background: #777;
    border-radius: 10px;
}
input[type=range]::-ms-fill-upper {
    background: #8da4c5;
    border-radius: 10px;
}
input[type=range]::-ms-thumb {
    border: none;
    height: 12px;
    width: 12px;
    border-radius: 50%;
    background: #38547B;
}
input[type=range]:focus::-ms-fill-lower {
    background: #888;
}
input[type=range]:focus::-ms-fill-upper {
    background: #ccc;
}