#debug{   position:fixed; background:#fff; right:0px; top:80px; padding:10px 20px; border:0px solid #e1e1e1; z-index:1000; font-size:0.9em; display:none  }



/*panels login page*/
#surveyPanels{ position:relative}

#deviceForm{ width:100%; max-width:500px; border:3px solid #e5e5e5; padding:15px 15px 25px 15px;}
#deviceForm h3{
font-size:1.3em;
color:#006699;
font-weight:100;
background-image:url(../images/padlock.png);
background-repeat:no-repeat;
background-position:2px 50%;
padding-left: 28px;
}
#deviceForm p{ margin:8px auto; clear:both}

#deviceForm input[type=text] , #deviceForm input[type=password]  { width:100%;border:2px solid #e1e1e1;height:45px; padding-left:10px; color:#333333; font-size:1em}
#deviceForm select { width:200px;border:2px solid #e1e1e1;height:45px;}

#registerUser{
height:46px;
width:100%;
max-width:600px;
background-color:#444;
color:#FFFFFF;
text-align:center;
border:0;
cursor: pointer;
}
#registerUser:hover{ background-color:#000000}

#deviceForm  input[type=text].errField, 
#deviceForm input[type=password].errField,  
#deviceForm select.errField{ border-color: #FF0000}

#deviceForm .checkboxRadioList strong em{ font-weight:normal; font-style: italic; font-size:0.9em}/* tick conditions on panel form*/
#deviceForm .checkboxRadioList span.err{ border:2px solid #ff0000}  


#signOutPanel{ display:block; height:0px;}
.screen #signOutPanel a{
display:block;
float:right;
width:150px;
height:40px;
line-height:40px;
text-align:center;
background-color:#fff; border:1px solid #ccc;
color:#006699;
font-size:0.8em;
font-weight:bold;
border-radius:2px;
background-image:url(../images/signOut.png);
background-position:10px 50%; background-repeat:no-repeat;
background-size:18px auto

}

.screen #signOutPanel a:hover{ background-color:#999; color:#fff; border-color:#999;background-image:url(../images/signOutWhite.png);;}

.mobile  #signOutPanel{ display:block; height:0px; clear:both; position:relative;   margin-bottom:30px; width:100%; max-width:600px}

.mobile #signOutPanel a{
float:none;
position:absolute;
right:0px;
top:-32px;
width: 125px;
height:32px;
line-height:32px;border:0px solid #e1e1e1;
text-align: right;
background-color: #006699;
padding: 0 16px 0 0;
color: #fff;
font-size:0.75em;
font-weight:bold;
border-radius:4px; 
background-image:url(../images/signOutWhite.png);
background-position:11px 50%;
background-repeat:no-repeat;
background-size:15px
}



/*panel list */
#panelsList{ display:block; }
#panelsList li { margin:0 auto; clear:both; }
#panelsList h5{
font-size:1.2em;
color: #696969;
font-weight:bold;
margin:10px auto 10px auto
}
#panelsList p{
background-image:url(../images/icons/arrowR.png);
background-repeat:no-repeat;
background-position:2px 13px;
padding:10px 0 10px 18px;
}


#panelsList p.notAllowedYet{
color:#999; 
background-image:url(../images/icons/arrowRGray.png);
} 


#panelsList p.completed{
color: #85B100;
background-image:url(../images/panelDone.png);
background-position:left 14px;
} 


#panelsList p strong{ font-size:1.1em;}
#panelsList p span{
color:#696969;
font-weight:normal;font-size:1.1em;
display:block; padding-top:2px;
} /* num samples*/
#panelsList li a { color:#006699;   }
#panelsList li a:hover, #panelsList li a span:hover  { color: #003366; text-decoration:none}

/*eo panels login page*/


/* sample select page*/
.optionsList input[type="radio"] + label strong { padding-top:3px}
.optionsList input[type="radio"] + label.productSample strong { font-size:1.25em; font-weight:bold; color:#006699}
.optionsList  input[type=radio]:checked  + label.productSample strong{ color:#7AA100; }
.optionsList  input[type=radio]:disabled  + label.productSample strong{ color:#ccc; }

/* link and button*/
a#samplesContinueButton ,
#samplesContinueButton{
background:none;
background-color: #003366;
border-radius:3px;
border:0px solid #999;
padding:12px 0; text-align:center;
width:240px; display:block;
margin:15px 0;
cursor:pointer;
color:#fff;
font-weight:bold;
font-size: 0.8em; text-shadow:1px 1px #000;
background-repeat:no-repeat; background-position:94% 50%;
background-image:url(../images/icons/arrowRGray.png);
}
a#samplesContinueButton:hover ,
#samplesContinueButton:hover{ background:#333; color:#fff; background-image:url(../images/icons/arrowRWhite.png);background-repeat:no-repeat; background-position:94% 50%;  }

#completedSamplesWrap{ margin:10px auto;}
#completedSamplesWrap p{ margin:5px 0; font-size:1.1em; } 
/* sample select page*/


#surveyHeading{
width:100%;
padding:10px 0 10px 15px;
background-color:#7D7D7D;
margin: 0 0 0px 0;
border-radius:2px;
color:#FFFFFF;
font-size:1.0em;
font-weight:bold;
text-shadow:1px 1px #222
}

#surveyInstructions { margin:10px auto 0px auto; }
#surveyInstructions p{ font-size:1em; color:#696969; margin:0; padding:0  5px; }


#survey{ width:100%; margin:10px auto 30px auto; border:4px solid #e5e5e5; padding: 15px 20px;
border-radius:4px;}

.mobile #survey{ width:100%; margin:10px auto 30px auto; border:0px solid #e5e5e5; padding: 15px 0px; }

#pointsTotalMessage{
padding:6px 0;
font-size:1.1em;
color:#FF6600;
font-weight:bold
}

#surveyLogo{ clear:both; text-align:left ; width:400px; max-width:80%;}
#surveyLogo img{  max-height:140px;max-width:100%; display:block; margin:15px 0 25px 0} 

#instructions p{ margin:5px auto }

#survey #errMessage{ position:fixed;  left:0; top:20%; z-index:1000; text-align:center; width:100%; display:none}
#survey #errMessage p{
background:#fff;
border-radius:5px;
border:5px solid #e1e1e1;
margin:0 auto;
padding:20px;
width:300px;
color:#FF0000;
font-weight:bold;
font-size:0.9em;
}

.questionWrap{ 
min-height:250px;
}

#survey .questions , 
.questions {
padding:  0px 0 0 0px;
display:block;
margin:6px  auto;
clear:both;
width:100%; 
position:relative;
}

.questions p { 
font-size:1.1em;
font-weight: bold;
color:#555; padding:4px 0 0 0 ;
}

.questions .questionNo{
font-style:normal;
color:#fff;
padding:0 18px;
font-size:12px;
margin: 0px  6px 10px 0;
font-weight:bold;
border-radius:3px;
text-align:left;
height:34px;
line-height:34px;
text-align:center;
display:inline-block;
/*background-image: linear-gradient( to bottom, #C4C4C4, #888 );*/
background-image:url(../images/gradientBG.png);
background-repeat:repeat-x;
background-position:left 50%;
background-color:#333333;
} /* Q #no*/
.mobile .questionNo{ padding:0 10px; }
 

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

p.surveyImagesInstruction{ display:block; clear:both; width:100%; padding:12px 0; font-size:1em; font-style:normal ; font-weight:bold}

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


.surveyVideo{ 
margin:10px auto; 
 width:500px; max-width:100%; border:2px solid #e1e1e1; padding:5px; 
 position:relative; height:auto
	}
	
	.surveyVideo.numVideos1{ width:500px;max-width:100%;}
	.surveyVideo.numVideos2{ width:300px;max-width:50%; display:block; float:left; margin-right:4px;  }
/*	.surveyVideo.numVideos3{ width:300px;max-width:50%; display:inline-block}*/
	
	.surveyVideo video{
width:100%;
cursor:pointer;
background-position:50% 50%;
background-repeat:no-repeat;
background-size: contain; 
border:0px solid #ccc;
}

#surveySampleImages{ width:100%; border:0px solid #ccc; margin:0 auto 0 auto;  }
#surveySampleImages li { position:relative; display:block; text-align:center; margin:0 ;   position:relative;}
#surveySampleImages li img{ cursor:pointer; border:1px solid #ccc;  padding:5px;  display:block;   height:200px;  				}
/*#surveySampleImages li p{  padding:5px ; font-size:0.8em; text-align:center ; width:90%;   position: absolute; bottom:5px; left:5%; border:0px solid #ccc;  }

.mobile #surveySampleImages li { width:100%; height:auto; margin:0 0 5px 0}
.mobile #surveySampleImages li p{ position: relative; height:auto;  }*/


.surveyYT{ width:100%; margin:10px auto ;}
.surveyYTiframe{ width:400px; max-width:100%; height:240px; border: none; padding:0px; }
.surveyYT *{border-radius:10px;}

#progress{
margin:25px auto 20px auto;
clear:both;
background-color: #e1e1e1;
background-image: linear-gradient( to right  , #ccc  ,  #e9e9e9);
border-radius:2px;
}
#progress span{
display:block;
background-color: #6A8F00;
background-image: linear-gradient( to right  , #7AA400  ,  #6A8F00);
min-width:50px; /*  to allow text*/
color:#FFFFFF;
-webkit-transition:all 0.8s ease-in-out 200ms;
-moz-transition:all 0.8s ease-in-out 200ms;
-o-transition:all 0.8s ease-in-out 200ms;
transition:all 0.8s ease-in-out 200ms;
text-align:center;
border-radius: 2px 0 0 2px;
border-right:1px solid #fff;
}

#progressText{
display:inline-block;
height:20px;
line-height: 20px;
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;
}


.questionNav{
display:block;
height:50px;
margin:10px auto;
position: relative;
list-style: none;
}


.nextQuestion   {
display:block;
width:180px;
height:40px;
line-height:40px;
background-color:#666666;
background-image: linear-gradient( to bottom, #717171, #616161 );
text-align:center;
cursor:pointer;
border-radius:4px;
text-shadow:1px 1px #333;
letter-spacing:1px;
background-repeat:no-repeat
}
.mobile .nextQuestion{
height:44px;
line-height:44px;
}

.previousQuestion{ width:220px; height:20px; line-height:20px;  color:#006699; margin-bottom:10px; cursor:pointer; font-size:1em;}

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

.nextQuestion{ } 
 
.nextQuestion strong {
position:relative;
width:70%; 
margin:0 auto; display:block;
text-align:center;
color:#fff;
font-size:0.74em;
font-weight:bold;
-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;
}
 
.screen .nextQuestion:hover strong { width:86%} /*animates arrow not mb */
 
.nextQuestion strong { 
background-image: url(../images/icons/arrowRwhite.png);
background-position:right 50%; background-repeat:no-repeat
} 

.nextQuestion.nextQuestionErr,
.nextQuestion.nextQuestionErr:hover,
.nextQuestionErr:hover {
background-color:#E70000; 
background-image: linear-gradient( to bottom, #E70000, #CF0000 );
text-shadow:0px 0px #333;
}

#doneButton{
/*text-align:center;
float:right;
width:100px;
font-size:0.75em;
font-weight:bold;
height:40px;
line-height:40px;
color:#fff;
background-color: #7BA500;
text-align:center;
cursor:pointer;
border-radius:4px;
text-shadow:1px 1px #696969;
background-image: linear-gradient( to bottom, #7BA500, #658800 );*/
}

#panelNextBtn  {
display:block; font-size:0.9em;
clear:both;
margin-top:16px;
width:220px;
height:44px;
line-height:44px;
background-color:#7BA300;
background-image: linear-gradient( to bottom, #99CC00 , #7BA300);
text-align:center;
cursor:pointer;
border-radius:4px;
text-shadow:1px 1px #777;
letter-spacing:1px;
background-repeat:no-repeat;
color:#FFFFFF; font-weight:bold;
}
#panelNextBtn:hover{
background-color:#7BA300;
background-image: linear-gradient( to bottom, #7BA300, #7BA300 );
}

#survey hr{ clear:both;   border:0px; height:20px; background:none; /* background-image:url(../images/semiTransLine.png); background-position:left 50%*/}