.introduction{ margin:10px 0 10px 0; font-size:15px; border:0px solid #e1e1e1; padding:10px  5px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;}

.introduction p{padding:5px 0;}
.introduction p a{ color:#069; text-decoration:underline}

.introduction ul li { list-style-type:disc; list-style-position:inside}

.questionsArea{}
.questionsArea h3.questionNo{ /*font-size:1.1em; font-weight:bold; color:#339999*/}

 #nameWrapper{  margin:0px auto 20px auto; clear:both; width:100%; }
	 #nameWrapper input[type=text]{ width:100%; display:block; margin:8px 0 5px 0}
 .questionWrap{  margin:0px auto 20px auto; }
.questionNo{ font-size:14px; font-weight:bold; background:#1E639D; padding:15px 0px 15px 15px	; display:block;font-style:normal; margin:0 auto;  border-radius:5px 5px 0 0; color:#FFF  ; } 
 .questionWrapInner{  clear:both; width:100%;border-radius: 0 0 5px 5px ;border:1pt solid #F0F0F0; border-top-width:1px; box-shadow: 0pt 4pt 6pt 1pt #F0F0F0; padding:  0 15px 5px 15px;}	
	
	.questionWrap hr{ background:none; border:none; height:1px; margin:0;}
	
#evaluationForm{ margin:20px auto}
p.evalFormLabel{
padding:10px 0  0px 0;
font-size:16px;
font-weight:bold;
color:#F60
}

.questions em.questionNo, 
*.questionNo, * .questionNo{  
/*font-style:normal; display:block;  
color:#444;
padding:0;
font-size:12.8px;
margin: 0px 0px 3px 0;
font-weight:bold;
padding: 4px 0 2px 6px; background-color:#f1f1f1;
border-radius:0px;
text-align:left;
border-bottom:4px solid #aaa; */
}
/*
 
.questions  {
padding: 0px 0 0 0;
color:#555;
display:block;
font-size:0.95em;
margin:15px auto 2px auto;
clear:both;
width:100%; line-height:19px;

}
.questions .questionText{ font-weight: bold; clear:both; display:block;     }
.questions em.questionNo{
font-style:normal; display:block;  
color:#444;
padding:0;
font-size:15px;
margin: 0px 0px 3px 0;
font-weight:bold;
padding: 2px 0 1px 6px; background-color:#f1f1f1;
border-radius:0px;
text-align:left;
border-bottom:3px solid #aaa; 
}  
 */

#resourcesOpener{ width:100%; height:40px; margin:0 auto; text-align:left  }
#resourcesOpener p{
color:#006699;
font-size:11px; font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
cursor:pointer;
border:1px solid #ccc;
height:36px; line-height:34px;
padding:0px 16px 0px 0px  ;
display:inline-block;
width:320px; max-width:100%;
border-radius:3px; 
 margin:0 0 6px 0
} 

#resourcesOpener p span {
display:block;
width:34px;
height:100%;
float: left;
margin-right:0px;
background-image:url(../images/icons/arrowRGray.png);
background-repeat:no-repeat;
background-position:50% 50%;

}
.screen #resourcesOpener:hover{border-color:#777; /*background-color:#999; color:#FFFFFF*/}

#resourcesOpener.rscsOpen p,
.mobile #resourcesOpener.rscsOpen p {
background-color:#888;
border-color:#888;
color:#FFFFFF;
}
#resourcesOpener.rscsOpen p span{
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
.questionsArea #resourcesOutput{border-radius:3px; width:100%; clear:both; border:3px solid #e1e1e1; padding:10px 15px; margin: 0 auto 15px auto;/* max-height:300px; overflow:hidden; overflow-y:auto*/}


.mobile #resourcesOpener { text-align: left;height:44px; }
.mobile #resourcesOpener p { width:100%; max-width:500px; 	height:40px; line-height:38px; font-size:13.6px;}
 
 


#imageWrapper{ width:100%; margin:5px auto 0px auto}
p#enlargeInstruction{ margin:10px 0 5px 0; font-size:12px; font-style:italic; font-weight:bold; color:#FF3300}
#imageWrapper a {  width:200px; display: block; float:left; margin: 0  10px 0 0 ; }
.mobile #imageWrapper a { display:block; clear:both; float:none; margin:  6px 0;}
#imageWrapper span { display: block; height:200px; width:200px;  position:relative; text-align:center;  border:2px solid #ccc; }
#imageWrapper img {
max-height:100%;
max-width:100%;
display:block;
text-align:center;
margin:0 auto;
position:absolute;
padding:3px;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
}
#imageWrapper strong {  font-size: 0.75em; padding:4px ;  display:block}
#imageWrapClear{ clear:both; display:block; background:none; border:none; height:15px;}

p.questions.questionsErr ,
.questionsErr{ color:#FF0000}

.multiAnswerInstruction,
p.multiAnswerInstruction{ text-align:left; color:#99CC00; font-size:1.1em; font-weight:bold; margin:15px auto}

#questionError{ display:block; color:#FF0000; font-size:0.9em; font-weight:bold}
/* for questions & results  page*/

.questionText{ margin:5px auto;}
.questionText p{ 
padding: 0px 0 0 0;
color:#555;
display:block;
font-size:0.95em;
margin:10px auto 15px auto;
clear:both;
width:100%;
line-height:1.6em;
font-weight: normal;
}
.questionText p *{ font-size:inherit; font-weight:inherit }
.questionText p strong{ font-size:inherit; font-weight:bold }
.questionText p a{ color:#069; text-decoration:underline} 

.questionsNewImages{ width:100%; border:0px solid #ccc; margin:0 auto 15px auto;  }
.questionsNewImages li { position:relative; width:24%; height:250px; display:block; float:left; border:1px solid #ccc; text-align:center; margin:10px 1% 0 0;   }
.questionsNewImages li:hover{ border-color:#999} 
.questionsNewImages li.singleImage{width:40%; height:250px; }
.questionsNewImages li img{ cursor:pointer; max-height:95%; max-width:95%; padding:5%;}
.questionsNewImages li p{  padding:5px ; font-size:0.8em; text-align:center ; width:90%;   position: absolute; bottom:5px; left:5%; border:0px solid #ccc;  }

p.questionsNewImagesInstruction{ display:block; clear:both; width:100%; padding:12px 0 20px 0; font-size:12px; font-style:normal ; font-weight:bold; color:#777}

.mobile .questionsNewImages li { width:100%; height:auto; margin:0 0 5px 0}
.mobile .questionsNewImages	 li p{ position: relative; height:auto;  }

 

.resourceWrapper{ margin:10px auto;border:3px solid #e1e1e1; padding:10px 15px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px; }
.resourcesHeader{font-size:12px; font-weight:bold; color:#333}
.questionsNewResources{ margin:5px auto; padding:0}
.questionsNewResources li{ display:block; clear:both;  margin:0; padding:0;  }


.questionsNewResources li a{
display:inline-block;
text-decoration:none;
font-size:14px;
margin:0px 0;
background-color:#FFFFFF;
padding: 5px 0 5px 24px;
color: #005885;
font-weight: bold;  
}
.questionsNewResources li a span{ color:#696969;font-size:12px; font-weight:bold } /* fsize*/
.questionsNewResources li a:hover{ text-decoration:underline; color:#333333}
.questionsNewResources li a.tickLink{background-size:auto; background-image:url(../images/tick.png) ;background-position:2px 4px;}
.questionsNewResources li a.urlLink{   background-size:auto;background-image:url(../images/fileTypes/url.png);background-position:2px 6px;}
.questionsNewResources li a.docLink{    background-size:18px;  background-image:url(../images/fileTypes/word.png) ;background-position:0px 6px;}
.questionsNewResources li a.pdfLink{   background-size:16px; background-image:url(../images/fileTypes/pdf.png);background-position:0px 5px;}
.questionsNewResources li a.xlLink{   background-size:18px; background-image:url(../images/fileTypes/xl.png) ;background-position:0px 4px;}
.questionsNewResources li a.pptLink{   background-size:18px; background-image:url(../images/fileTypes/ppt.png) ;background-position:0px 4px;} 

/*// FULL SLIDERS*/ 
.sliders  { width:92%; margin:30px auto 70px auto; clear:both;} 


.itemLabel{ font-size:0.8em; color:#333; font-weight: bold; clear:both } /*  labels for product names */
.sliders .itemLabel{margin-left: 0px; font-size:12px; } /* sliders inset to match init for slider 	 */


.sliders div.tracks{ /*track*/
margin:20px  0px 0px  0px ;
width:100%; height:16px; display:block; position:relative;
background: linear-gradient( to bottom, #f1f1f1, #e8e8e8 ); 
border:1px solid #ccc;
border-radius:4px;
cursor:pointer;
}

.sliders div.tracks div.ui-slider-range-min{
position:absolute;
top:0px;
background-color: #c1c1c1; 
height:14px;
border-radius:3px 0 0 3px;

} /* left selected area */


.sliders  .ui-slider-handle  {  /*handle*/
width:26px; 
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
 outline: none; border:1px solid #fff;

cursor:pointer;
text-align:center; 
height:26px;
position: absolute;
z-index: 2;
padding: 0;
top: -5px;
margin-left: -13px;
background-color:#ccc;
background: linear-gradient( to bottom, #d1d1d1, #c1c1c1 );
 
} 

.sliders .beenClicked  .ui-slider-handle {
background-color:#CDDA00;
background: linear-gradient( to bottom, #CDDA00, #CDDA00 );
}



.sliders span em{ /* number inside 
 border:1px solid #ccc;
border-radius:16px;
position:absolute;
left: -9px;
top:9px;
width:22px;
height:22px; line-height:20px;
font-size:0.75em;
font-weight:bold;
font-family: Arial, Helvetica, sans-serif;
color:#333;
font-style: normal;
text-align: center; z-index:100; background-color:#fff; 
 */
display: none;
} 


ul.markers {text-align: justify; margin:6px auto ;  clear:both; padding:0; position:relative;height:24px; border:0px solid;}
ul.markers::after {
width: 100%; display: inline-block; content: "."; visibility: hidden
}
ul.markers li {
display: inline-block; 
margin:0;
width:1px;
height:1px;
height:auto;
padding:10px 0px  0 0px;
font-weight:bold;
border-left:1px solid #e1e1e1;
text-align:left ;
cursor:pointer; position:relative;   
font-family: Arial, Helvetica, sans-serif;   } 
  
ul.markers li span {
padding:4px 0;
position:absolute;
clear:both;
color:#727272;
text-align: center;
border:0px solid #ccc;
margin:0;
text-shadow:2px 2px #fff;
min-height:30px;
white-space: normal;
word-wrap: break-word;
padding:0 5px 0 5px; /* for spacing against next */
font-size:14px; /*fixed font size */
width:100px;
margin-left:-50px;
}
ul.markers li:hover span{color:#444; text-decoration:none}
ul.markers li.activeMarker {border-left:1px solid #333;}
ul.markers li.activeMarker span{ color: #6D9300; font-weight:bold; }

ul.markers li input[type=radio]{ position:absolute; left:-20000px;}
/* eo sliders */ 


.sliderSeparator { height:40px; width:100%; display:block; clear:both;}
.mobile .sliderSeparator { height:10px; width:100%; display:block; clear:both;} /*clear in case of expanded options */



.dropDown{ font-size:1.1em}

.dropDownList{ border:0px solid #e1e1e1;}
.dropDownList p{ clear:both; margin:6px auto; text-align:left;  border-bottom:1px dotted #e1e1e1; padding:6px 0 ;}
.dropDownList p strong{ display: block; float:left; width:45%; margin-right:10%; font-size:0.9em; } /*label name */
.dropDownList p span { display:block; float:left; width:45%;} /* dd container*/
.dropDownList  br { clear:both; margin:0}
.dropDownList  select { max-width:90%}



.sortingList{ display:block; list-style:none; margin:10px auto; overflow:hidden; position:relative; }
.sortingList li { display:block; clear:both; margin:10px 0; padding: 0 0; min-height:30px;  cursor:pointer ;width:100%;   }
.mobile .sortingList li { margin:20px auto; padding-left: 5px;}

.sortingList  .drag{
cursor:pointer;
display:block; float:left;
width:30px;
height:30px;
line-height:26px;
text-align:center;
border:2px solid;
border-color:#bbb;
float:left;
border-radius:2px;
cursor:pointer;
background-color:#fff;
font-size:1.0em;
font-weight:bold;
color:#7EAB00;
/*-webkit-transition:border-color 0.2s ease-in-out;
-moz-transition:border-color  0.2s ease-in-out;
-o-transition:border-color  0.2s ease-in-out;
transition:border-color  0.2s ease-in-out;*/
margin:0  8px 0 0 ;
}

.screen .sortingList li .drag:hover {
background-color:#777;
background-image:url(../images/icons/barsWhite.png);
background-position:50% 50%;
background-repeat:no-repeat;
text-indent:-2000px;
border-color:#777;
}

.sortingList  strong{ margin-left:36px; padding-top:5px; display:block;}

/* highlight in custom fns*/
.sortingList li.highlight .drag , 
.sortingList li.highlight:hover .drag{
border-color:#333;
background-color:#fff;
color:#333333
}

.sortingList li.highlight strong{ color:#81AC00 }
/* eo highlight in custom fns*/


#errMessage { min-height:40px;}
#errMessage p { color:#F00; font-weight:bold;}

.questions hr{ height:2px; clear:both; margin:0 auto; padding:0; background:none; border:none}

#progressBar{
margin: 35px auto 10px auto;
clear:both;
background-color: #1E639D;
border:0px solid #999;
border-radius:2px;
}
#progressBar span{
display:block;
background-color: #CDDA00;
min-width:50px; /*  to allow text*/
color:#FFFFFF;
-webkit-transition:width 0.8s ease-in-out 200ms;
-moz-transition:width 0.8s ease-in-out 200ms;
-o-transition:width 0.8s ease-in-out 200ms;
transition:width 0.8s ease-in-out 200ms;
text-align:center;
border-radius: 2px 0 0 2px ;
border-right:1px solid #fff;
}

#progressBarText{
display:inline-block;
height:24px;
line-height: 24px;
text-shadow:1px 1px #888;
margin:0 auto;
text-align:center;
font-size:0.72em;
font-weight:bold;
letter-spacing:0.2em;
font-family: Arial, Helvetica, sans-serif;
border-radius: 4px;
}

 
.questionsNavigation{
display:block;  
margin:10px auto;
position: relative;
list-style: none;
padding:0;
}


.mobile .questionsNavigation{
display:block;  clear:both;
}

.previousQuestionNew, 
.nextQuestionNew   {
display:block;
width:100px;
height:40px;
line-height:40px; 
text-align:center;
cursor:pointer;
border-radius:25px;
letter-spacing:1px; 
margin:0;
padding:0;
}

.nextQuestionNew{
background-color:#1E639D; 
} 

.previousQuestionNew{ 
background-color:white;
color: #1E639D;
border: 2pt solid #23649B;
}
.screen .nextQuestionNew{
float:right;
width:340px; 
} 

.screen .previousQuestionNew{ float:left; width:220px}



.mobile .nextQuestionNew, .mobile .previousQuestionNew{ 
	float:none; 
	width:100%; 
	margin: 10px auto 20px auto; 
	height:46px; 
	line-height:46px;}



.previousQuestionNew:hover,
.nextQuestionNew:hover { 
background-image: linear-gradient( to bottom, #393939, #313131 );
}

.previousQuestionNew strong {
position:relative;
width:100%; padding:0 ;
margin:0 auto; display:block;
text-align:center;
color:#1E639D;
font-size:0.80em;
font-weight:normal;
-webkit-transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
transition:all 0.2s ease-in-out;
} 

.nextQuestionNew strong {
position:relative;
width:100%; padding:0 ;
margin:0 auto; display:block;
text-align:center;
color:white;
font-size:0.80em;
font-weight:normal;
-webkit-transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
transition:all 0.2s ease-in-out;
}


.previousQuestionNew strong{
background-image: url(../images/icons/arrowLgray.png);
background-position:14px 50%;
}
.nextQuestionNew strong { 
background-image: url(../images/icons/arrowRwhite.png);
background-position:calc(100% - 14px)  50%;
} 


.screen .nextQuestionNew:hover strong { background-position:calc(100% - 10px)  50%;  } /*animates arrow - not mb */
.screen .previousQuestionNew:hover strong { background-position:10px 50%;  }

.nextQuestionNew.nextQuestionNewErr,
.nextQuestionNew.nextQuestionNewErr:hover,
.nextQuestionNewErr:hover {
background-color:#E70000;
background-image: linear-gradient( to bottom, #E70000, #CF0000 );
text-shadow: none
}
 
/* answers .. your-results*/	
#resultsLeft{ width:225px; float: left; border-radius:4px; border:1px solid #F0F0F0; box-shadow: 0 2px 6px 1px rgba(0, 0, 0, 0.07);}

#resultsLeft .resultsTitle {
	color: white;
	background-color: #1E639D;
	padding: 15px 0px 15px 15px;
	border-radius: 4px 4px 0 0;
	font-weight: bold;
}

#resultsLeft .resultsBody {
	padding: 15px 0px 15px 15px;
}
#resultsLeft .resultsBody p{
	padding-bottom: 15px;
}
.screen #testResults{ float:right; width:750px;padding-top:0px;}
.mobile #testResults, .mobile #resultsLeft{  width:100%; margin:10px auto;  }
 
#testResults  .eachQuestionBox{  clear:both; width:100%;border-radius:5px;border:3px solid #e1e1e1; padding:0 0 15px   0px; margin:5px auto 10px auto;}	

#testResults h2 {
	font-size: 16px;
}
.eachQuestionBox h5{ 
	font-size: 16px;
	font-weight: bold;
	background: #1E639D;
	padding: 15px 15px 15px 15px;
	color: white;
	margin-left: -3px;
	margin-right: -3px;
	margin-top: -3px;
	border-radius: 4px 4px 0 0;
}
}
.eachQuestionBox p { display:block ; clear:both; padding:0px 15px; margin:0; font-size:13.5px; }
.eachQuestionBox p.eachQuestion{ margin:10px auto;	}
.eachQuestionBox p.correctOrNot{ clear:both;font-weight:bold; margin-bottom:6px;} 
.eachQuestionBox p:not(.correctOrNot) {
	padding-bottom: 5px;
	padding-top: 5px;
}
.answerLines{ border:2px solid #ff0000}

span.answerOption {
display:block;
float:left;
font-size: 13.6px;
padding:0 0 0  5px;
color:#333;
width:90%;
width:calc(100% - 60px);
}

 strong.answerSortingNumber{ 
}

span.isCorrectAnswer, span.isNotCorrectAnswer, span.sortingNumber {
	border-radius: 15px;
	border: 2pt solid;
	border-color: #23649B;
	display: block;
	float: left;
	width: 22px;
	height: 22px;
	margin-right: 8px;
}

span.sortingNumber{
	text-align:center; 
width:22px; font-weight:bold; color:#696969;
height:22px; line-height:17px; font-size:12.2px;
}

span.isCorrectAnswer{background-image:url(../images/checked.png); background-position:50% 50%;border-color: #7DA900;}
 span.isNotCorrectAnswer{	  }

p.correctSortingOrder{ border-bottom:0px dotted #ccc ;   }
p.correctSortingOrder.noBorder{ border-bottom:0px;}

  
#testResults hr{ height:5px; background:none; border:none; clear:both; width:100% }

/* for test results page*/

	
	
	
/*questions new and topic splash page in comps*/
.ytWrapper{ margin:10px auto 0  auto; border:2px solid #e1e1e1; border-radius:3px; padding:4px; width:auto; height:auto; display:inline-block; text-align:center;}
.ytPlaceholder{width:350px;  height:220px; text-align:center; position:relative;  background-position:50% 50%; background-size:contain; background-repeat:no-repeat; }
.ytPlaceholder img { height:80px; width:80px;position:absolute; left:135px; top:70px; cursor:pointer}
.ytWrapper iframe{  width:350px; height:auto; min-height:220px; margin:0 auto; border-radius:3px;display:block; float:left }
p.ytTitle{ text-align:left;  font-size:12px; padding:5px 0 0 5px; font-style:italic}
img.question_videoBtn{ opacity:0.8;
-webkit-transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;}
.ytWrapper:hover{ border:2px solid #ccc;}
.ytWrapper:hover img.question_videoBtn{ opacity:1}
.screen p.ytTitle{ }
 
	/* comps / topics needs to copy changes to admin version */
	#topicSplashWrapper{ margin:10px auto 0 auto; border:2px solid #e1e1e1; border-radius:3px; padding:3px; width:450px;  height:250px;  text-align:center; max-width:100%;}
#topicSplashPlaceholder{width:100%;  height:100%; text-align:center; position:relative;  background-position:50% 50%; background-size:contain; background-repeat:no-repeat; }
#topicSplashPlaceholder img { height:80px; width:80px;position:absolute;cursor:pointer; left:135px; top:70px;  left:calc(50% - 40px); top: calc(50% - 40px) }
#topicSplashIframe{  width:100%; height:auto; height:100%; margin:0 auto; border-radius:2px;display:block; float:left }
p#videoTitle{ text-align:center; margin:5px auto; font-size:12px; max-width:600px}