/* START: CSS reset */
#group-wrapper h3.groupname {display: none;}
.groupdescription {display: none;}

html,body,div,dl,dt,dd,ul,p,blockquote,pre,th,td,
  form,fieldset,input,textarea {
  margin:0;
  padding:0;
}
html { -webkit-text-size-adjust: none; }
table {
  border-collapse:collapse;
  border-spacing:0;
}
fieldset,img,abbr,acronym { 
  border:0;
}
ol,ul {
  list-style:none;
  margin:0;
  padding:0;
}
caption,th {
  text-align:left;
}
h1,h2,h3,h4,h5,h6 {
  margin:0;
  padding:0;
  font-size:100%;
  font-weight:400;
  font-family: 'Roboto', 'sans-serif', 'Arial';
}

select {
  font-family: 'Roboto', 'sans-serif', 'Arial';
  color: #6f6f6f;
}

textarea {
  font-family: 'Roboto', 'sans-serif', 'Arial';
  font-style: normal;
  font-weight: 400;
  color: #6f6f6f;
  line-height: 29px;
  background: white;
  border: 1px solid #c9c9c9;
  border-radius: 3px;
  text-align: left;
  font-size: 15px;
  width: 94%;
  padding: 10px;
}

/* END: CSS reset */
/*----------------------------------------------------------------------------*/





/*----------------------------------------------------------------------------*/
/* START: General layout */
body {
  background: #cdcdcd;
  color:#515151;
  font-size:15px;
  font-style: normal;
  font-weight: 400;
  font-family: 'Roboto', 'sans-serif', 'Arial';
}

/* adjust list styles for survey texts */

.welcomenote ul, .questiontext ul, #surveyinfo ul, #privacynote ul, #assessment ul,  #surveydata ul, #completed ul, .success ul {
  list-style: disc inside;
  margin: 1%;
}
.welcomenote ol, .questiontext ol, #surveyinfo ol, #privacynote ol, #assessment ol,  #surveydata ol, #completed ol, .success ol {
    list-style: decimal inside;
    margin: 1%;
}

/* margin top/bottom for paragraphs */
#content-wrapper p {
  margin: 1% auto;
}

h1, .printouttitle {
  margin:5px 0 20px;
  font-size:120%;
  font-weight:700;
}
h2 {
  margin:5px 0 15px;
  font-size:120%;
  font-weight:700;
}
h3 {
  margin:0;
  font-size:110%;
  font-weight:700;
}

a:link, a:visited {
color: #686666;
text-decoration: none;
}
a:hover, a:focus {
text-decoration: none;
}

/*----------------------------------------------------------------------------*/
/* Upload files button */
a.upload, a.upload:link, a.upload:visited {
    padding: 10px;
    font-size: 80%;
    text-decoration: none;
    text-transform: uppercase;
    border-radius: 4px;
    color: #484444 !important;
    border: 1px solid #b5b5b5;
    background: #f5f5f5;
    background: -moz-linear-gradient(top, #f5f5f5 0%, #e1e1e1 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f5f5), color-stop(100%,#e1e1e1));
	background: -webkit-linear-gradient(top, #f5f5f5 0%,#e1e1e1 100%);
	background: -o-linear-gradient(top, #f5f5f5 0%,#e1e1e1 100%);
	background: -ms-linear-gradient(top, #f5f5f5 0%,#e1e1e1 100%);
	background: linear-gradient(to bottom, #f5f5f5 0%,#e1e1e1 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#e1e1e1',GradientType=0 );
}

a.upload:hover, a.upload:focus {
	text-decoration: none;
	background: #c7c7c7;
	background: -moz-linear-gradient(top, #c7c7c7 0%, #b7b7b7 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c7c7c7), color-stop(100%,#b7b7b7));
	background: -webkit-linear-gradient(top, #c7c7c7 0%,#b7b7b7 100%);
	background: -o-linear-gradient(top, #c7c7c7 0%,#b7b7b7 100%);
	background: -ms-linear-gradient(top, #c7c7c7 0%,#b7b7b7 100%);
	background: linear-gradient(to bottom, #c7c7c7 0%,#b7b7b7 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c7c7c7', endColorstr='#b7b7b7',GradientType=0 );
}


.hide {
  display:none;
}
.ecnulogo {
    width: 50%;
    float: left;
    height: auto;
    position: relative;
}
.suplogo {
    margin-left: 0px;
    width: 50%;
    text-align: right;
    float: right;
    height: auto;
    position: relative;
}






/* END: General layout */
/*----------------------------------------------------------------------------*/





/*----------------------------------------------------------------------------*/
/* START: Centered vertical alignment */
#surveylist,
  #surveyinfo, #privacynote,
  #surveydata,
  #register,
  #load, #save,
  .printouttitle, .printouttable th,
  .groupname, 
  p.captcha,
  #tokenform ul li {
  text-align:center;
  margin-bottom: 10px;
}
table.register,
  #load table, #save table {
  margin:0 auto;
}


/* Answertext alignment (important when questions only are aligned left) */
.numeric-multi .answer ul li label,
  .multiple-short-txt .answer ul li label {
  text-align:left;
}
/* END: Centered vertical alignment */
/*----------------------------------------------------------------------------*/





#outer-wrapper {
  width: 100%;
  height: 100%;
  max-width: 800px;
  margin: 0 auto;
  background: #FFF;
	border-top: 2px solid #2d6b9e;
}


#nav-wrapper {
  margin:0;
  padding: 0;
}
.nav_left {
  float:left;
  width: 200px;
  margin:0;
  padding:0;
  padding-left: 15px;
}
.nav_right {
  float:right;
  min-width: 100px;
  margin:0;
  padding:0;
  text-align:right;
  padding: 15px 15px 0 0;
}

.nav_middle {
  min-width: 100px;
  margin:0;
  padding:0;
  text-align:center;
  padding: 15px 0 0 0;	
}

#header-wrapper {
    margin: 5px 0 10px 0;
    height: auto;
    text-align: center;
}

.header_left {
  float:left;
  width: 200px;
  margin:0;
  padding:0;
  padding-left: 15px;
  text-align: left;
}
.header_right {
  float:right;
  min-width: 100px;
  margin:0;
  padding:0;
  text-align:right;
  padding: 15px 15px 0 0;
}



#content-wrapper {
  margin: 0;
  padding: 0;
  min-height: 480px;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: #FFF;
}





#footer-wrapper {
  clear: both;
  text-align:center;
	margin: 0;
	background: #ffffff;
	border-top: 1px solid #cfcfcf;
	padding: 20px 15px;
}
#footer {
    color: grey;
}

#footer a:link, a:visited {
    color: grey !important;  
}

#footer-wrapper a {
    color: grey;
}

a.footer-link {
    color: grey !important; 
}





/*----------------------------------------------------------------------------*/
/* Headings */
#surveylist h1, #surveyinfo h1, #surveydata h1, .printouttitle,
  #load h1, #save h1 {}
/*----------------------------------------------------------------------------*/

/* Headings results */
.statsNumRecords {display: none; }


/*----------------------------------------------------------------------------*/
/* Buttons */
#loadbutton, #savebutton,
  input.submit,
  .clearall, .saveall,
  .date p.question button.ui-datepicker-triggert {
}

#registercontinue,
  #loadbutton, #savebutton,
  #tokenform input.submit {
  /* To use, when button bg-color is same as navigator container bg-color,
  but not page bg-color */
}
.clearall, .saveall {
  font-size:95%;
}
/*----------------------------------------------------------------------------*/





#surveylist {}
#surveylist h1 {
  font-family: 'Roboto', 'sans-serif', 'Arial';
  color:#328639;
}
.surveylistheading {
  font-weight:700;
}
#surveylist ul {
  margin:20px 0;
}
#surveylist li.surveytitle {
  font-size:120%;
  padding:0 0 5px;
}
#surveylist li.surveytitle a {}
#surveylist li.surveytitle a:hover {}
.surveycontact {
  margin:20px 0 0;
}
#surveylist .poweredby a {
  color:#000000;
}
#surveylist .lang-wrapper {
  margin:10px 0;
}


#surveyinfo {
  margin: 0 0 20px;
  width: 100%;
}

#surveyinfo h1 {
  color: #fafafa;
  font-size: 25px;
  min-height: 50px;
  line-height: 50px;
  background: #2d6b9e;
  margin: 0;
  width: 100%;
  font-weight: 700;
  font-style: normal;
}

#surveyinfo #content {
  color: #9a9a9a;
  font-size: 17px;
	padding: 0 15px;
	margin-bottom: 30px;
	text-align: justify;
}

#surveyinfo #content p {
  margin-bottom: 15px; 
}

.surveydescription {

}
.welcomenote {
  margin:30px 0;

  color: #515151;
  font-size: 17px;
	padding: 0 15px;
	text-align: left;
}
.therearexquestions {
	color: #9a9a9a;
	font-size: 17px;
	padding: 0 15px;
	margin-bottom: 30px;
	text-align: justify;
	font-style: italic;
}


#privacynote {
  font-size:100%;
  color: #9a9a9a;
	padding: 0 15px;
	margin-bottom: 30px;
	text-align: justify;
}
#privacynote span { /* Privacy note title */
}





#surveydata {
  margin: 0;
  padding:0;
}
#surveydata h1 {
  margin-bottom:5px;
  text-align:center;
}
#surveydata .surveydescription { /* also at #surveyinfo */
}
#surveydata .lang-wrapper {
  float:right;
  margin:0;
}





#assessment {
  border:1px solid #111;
  margin:20px 12% 0;
  background-color:#fff;
}
.assessmentheading {  
  font-weight:700;
  background-color:#ccc;
  padding:3px;
  text-align:center;
}
#assessments {}
#assessments table {
  width:100%;
}
#assessments table th { /* Assessments Table Heading */
  text-align:center;
  padding:3px;
}
#assessments table td {;
    padding:3px;
}





#completed {
}

#completed #about {
  color: #FFF;
  font-size: 18px;
  height: 50px;
  line-height: 50px;
  border-bottom: 2px solid #2d6b9e;
  background: #2d6b9e;
  margin: 0px 0px 25px 0px;
  width: 100%;
  font-weight: 700;
  font-style: normal;    
}


#completed #content {
  color: #3a3a3a;
  font-size: 15px;
	padding: 0 30px;
	margin-bottom: 60px;
}

#completed #content p {
  margin-bottom: 15px; 
}

.success {
  color: #4a4a4a;
  font-family: 'Roboto', 'sans-serif', 'Arial';
  font-style: normal;
  font-weight: 700;
  font-size: 28px;
  text-align: center;
  margin-bottom: 20px; 
}





#clearall {
  text-align:center;
}
#clearall span.answerscleared {
  color:#ff0f0f;
  font-weight:700;
  font-size:110%;
}





#register { padding: 0 8%; }
.regmessage1 {
  font-weight:700;
  margin:5px 0;
}
.regmessage2 {}

table.register {
  margin-top:10px;
  margin-bottom:20px;
  text-align:left;
}
table.register td {
  padding:3px;
}
table.register td input.text { /* input form fields */
}

#registercontinue {
    width: 80%;
      padding: 0;
}





#load, #save {}
#load h1, #save h1 {}
#load .loadmessage, #save .savemessage {
  margin:5px 0;
}

#load table, #save table {
  margin-top:10px;
  margin-bottom:20px;
  text-align:left;
}
#load table table, #save table table {
  margin:0;
}
#load td, #save td {
  padding:3px;
}
#load table td input.text, #save table td input.text { /* input form fields */
}
#load table td input.password, #save table td input.password { /* input form field (password) */
}
#loadbutton, #savebutton { /* Button */
  height: 52px;
  font-size: 16px;
  text-transform: uppercase;
  margin: 0px;
  color: #484444 !important;
  border: 1px solid #d3d3d3;
  background: #f5f5f5;
  background: -moz-linear-gradient(top, #f5f5f5 0%, #e1e1e1 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f5f5), color-stop(100%,#e1e1e1));
  background: -webkit-linear-gradient(top, #f5f5f5 0%,#e1e1e1 100%);
  background: -o-linear-gradient(top, #f5f5f5 0%,#e1e1e1 100%);
  background: -ms-linear-gradient(top, #f5f5f5 0%,#e1e1e1 100%);
  background: linear-gradient(to bottom, #f5f5f5 0%,#e1e1e1 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#e1e1e1',GradientType=0 );
  padding-left: 25px;
  padding-right: 25px;
}





.error, .errormandatory, .warningjs {
  font-size: 120%;
  font-weight:700;
  color:#ff0f0f;
}





/*----------------------------------------------------------------------------*/
/* Public Statistics */
#statsContainer { /* Container */
	border-top: 52px solid #b8b8b8;
	overflow: auto;
	width: 100%;
	max-width: 800px;
}
#statsContainer .statsSurveyTitle { /* Main Title */
  font-size:130%;
  font-weight:700;
  text-align:center;
}
#statsContainer .statsNumRecords {/* No of records in survey */
  font-size:110%;
  font-weight:700;


  text-align:center;
}
#statsHeader {
  padding: 30px 0px;
}


#statsContainer .statsSurveyTitle {
  padding: 0;
	color: #4a4a4a;
	font-family: 'Roboto', 'sans-serif', 'Arial';
	font-style: normal;
	font-weight: 700;
	font-size: 28px;
	text-align: center;
	margin-bottom: 10px;
}

.statsNumRecords {
  padding: 10px 0px 0px 0px;
  text-align: center;
	color: #4a4a4a;
	font-family: 'Roboto', 'sans-serif', 'Arial';
	font-style: normal;
	font-weight: 700;
}

div.fieldSummary {
  padding: 0;
  text-align: center;
  background-color: #D2E0F2;
}

div.questionTitle {
  padding: 0;
  font-weight: bold;
  background-color: transparent;
}


table.statisticstable {
  margin:5px auto 20px;
}
table.statisticstable {
  width: 100%;
  margin: 0;
  border-top: 1px solid #BBC6CC;
}


table.statisticstable td {
	width: 100%;
  line-height: 190%;
  border-bottom: 1px solid #BBC6CC;
 	text-align: center;
	padding: 2px 20px;
  max-width: 760px !important;
}

table.statisticstable th {
	text-align: center;
	padding: 10px 0;
	font-family: 'Roboto', 'sans-serif', 'Arial';
	font-style: normal;
	font-weight: 700;
	font-size: 15px;
	padding: 10px 20px;
}


table.statisticstable img {
  margin:10px auto;
  margin-left: -20px;
}

table.statisticssummary {
	margin: 0 0 20px 20px;
}

table.statisticssummary thead tr th {
	font-family: 'Roboto', 'sans-serif', 'Arial';
	color: #bc3d34;
	font-style: normal;
	font-weight: 700;
	font-size: 17px;
	padding-bottom: 10px;
}

table.statisticssummary tbody tr th {
	padding-right: 10px;
}


/*----------------------------------------------------------------------------*/





/*----------------------------------------------------------------------------*/
/* START: Group / Question parts */
#group-wrapper {
	margin: 0;
  width: 100%;
  -webkit-box-sizing: border-box;
}
#group-wrapper h3.groupname {
  color: #686666;
  font-family: 'Roboto', 'sans-serif', 'Arial';
  font-style: normal;
  font-weight: 700;
  font-size: 22px;
  text-align: center;
  margin-bottom: 20px;
}
#group-wrapper .groupdescription {
	color: #4C4A4A;
    font-size: 18px;
    line-height: 120%;
    margin-bottom: 0px;
    padding: 4%;
	margin-left: 0px;
	
}
#group-wrapper .groupdescription li {
	list-style-type: disc;
	margin-left: 4%;
}
#group-wrapper .groupdescription ul {
	margin-top: 10px;
}

.question-wrapper {
  margin: 0px 15px 20px 15px;
  background: #fbf8f8;
  border: 1px solid #dfded5;
  border-radius: 5px;
  padding: 20px;
  overflow-y: hidden !important;
}


.question-wrapper .answer table.question {
  table-layout: fixed;
  word-wrap: break-word;
  width: 100%;
}

.array-flexible-row,
.array-flexible-column,
.array-10-pt,
.array-5-pt,
.array-increase-same-decrease,
.array-multi-flexi,
.array-multi-flexi-text,
.array-yes-uncertain-no,
.array-flexible-duel-scale
{overflow: auto;}


/* Main questiontext box */
div.questiontext {
  font-family: 'Roboto', 'sans-serif', 'Arial';
  color: #bce6f5;
  color: #4a4a4a;
  font-style: normal;
  font-weight: normal;
  font-size: 17px;
  margin-bottom: 20px;
}
span.questionhelp { /* Questionhelp under questiontext*/
  display:block;
  font-size:70%;
  font-style:normal;
  font-weight:400;
}
div.questiontext .errormandatory {
  text-align:left;
}


/* Main answer box*/
div.answer {
  margin: 0;
  padding: 0;
  color: #6f6f6f;
  font-size: 100%;
  width: auto;

}
.date .answer,
  .gender .answer,
  .numeric .answer,
  .numeric-multi .answer,
  .ranking .answer,
  .yes-no .answer,
  .language .answer,
  .multiple-opt .answer,
  .multiple-opt-comments .answer,
  .list-dropdown .answer,
  .choice-5-pt-radio .answer,
  .list-radio .answer,
  .list-with-comment .answer,
  .multiple-short-txt .answer,
  .text-short .answer,
  .text-long .answer,
  .text-huge .answer { /* applies to all question types but array */
}


/* Main questionhelp box */
div.questionhelp {
	font-size: 85%;
	line-height: 18px;
	margin: 15px 10px 0 0;
	font-style: normal;
}
div.questionhelp img {
  margin:0 5px 0 0;
  float:none;
  vertical-align:middle;
  margin-left: -20px;
  display: none;

}
.date div.questionhelp,
  .gender  div.questionhelp,
  .numeric  div.questionhelp,
  .numeric-multi  div.questionhelp,
  .ranking  div.questionhelp,
  .yes-no  div.questionhelp,
  .language  div.questionhelp,
  .multiple-opt  div.questionhelp,
  .multiple-opt-comments  div.questionhelp,
  .list-dropdown  div.questionhelp,
  .choice-5-pt-radio  div.questionhelp,
  .list-radio  div.questionhelp,
  .list-with-comment  div.questionhelp,
  .multiple-short-txt  div.questionhelp,
  .text-short  div.questionhelp,
  .text-long  div.questionhelp,
  .text-huge  div.questionhelp { /* applies to all question types but array */
}
/* END: Question parts */
/*----------------------------------------------------------------------------*/





/* START: Navigator */
#navigator {
clear: both;
margin: 0;
padding: 0;
background: #f8f8f8;
border-top: 1px solid #1f365c;
padding: 30px 15px 0 15px;
margin-top: 30px;
height: auto;
width: auto;
bottom: 0;
    display: none;
}
#navigator #left {
  clear: both;
  width:auto;
  margin:0;
  padding:0;
}
#navigator #right {
  clear: both;
  width:auto;
  margin:0;
  padding:0;
}

#prevnext {
  clear: both;
  width:auto;
  height: 55px;
  margin:0 auto;
  padding:0;
  text-align: center;
	width: auto;
	padding: 0 15px;
	margin-bottom: 30px;
}

/* Submit buttons */

.submit, input.submit {
height: 52px;
font-size: 16px;

margin: 0px;
color: #FFFFFF !important;
border: 1px solid #2d6b9e;
background: #2d6b9e;
background: -moz-linear-gradient(top, #2d6b9e 0%, #2d6b9e 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2d6b9e), color-stop(100%,#2d6b9e));
background: -webkit-linear-gradient(top, #2d6b9e 0%,#2d6b9e 100%);
background: -o-linear-gradient(top, #2d6b9e 0%,#2d6b9e 100%);
background: -ms-linear-gradient(top, #2d6b9e 0%,#2d6b9e  100%);
background: linear-gradient(to bottom, #2d6b9e 0%,#2d6b9e  100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2d6b9e', endColorstr='#2d6b9e',GradientType=0 );

display: inline-block;
font-family: 'Roboto', 'sans-serif', 'Arial';
font-style: normal;
font-weight: 700;
text-transform: uppercase;
width: 49%;
float: right;
}

.submit:hover, input.submit:hover {
border: 1px solid #064375;
background: #064375;
background: -moz-linear-gradient(top, #2d6b9e  0%, #064375 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2d6b9e), color-stop(100%,#064375));
background: -webkit-linear-gradient(top, #2d6b9e 0%,#064375 100%);
background: -o-linear-gradient(top, #2d6b9e 0%,#064375 100%);
background: -ms-linear-gradient(top, #2d6b9e 0%,#064375 100%);
background: linear-gradient(to bottom, #2d6b9e 0%,#064375 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2d6b9e', endColorstr='#064375',GradientType=0 );
}

/* Move next & prev buttons */

#movenextbtn {
height: 52px;
font-size: 16px;
line-height: 52px;
margin: 0px;
color: #484444 !important;
border: 1px solid #d3d3d3;
background: #f5f5f5;
background: -moz-linear-gradient(top, #f5f5f5 0%, #e1e1e1 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f5f5), color-stop(100%,#e1e1e1));
background: -webkit-linear-gradient(top, #f5f5f5 0%,#e1e1e1 100%);
background: -o-linear-gradient(top, #f5f5f5 0%,#e1e1e1 100%);
background: -ms-linear-gradient(top, #f5f5f5 0%,#e1e1e1 100%);
background: linear-gradient(to bottom, #f5f5f5 0%,#e1e1e1 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#e1e1e1',GradientType=0 );
padding-left: 25px;
padding-right: 25px;
width: 49%;
float: right;
}

#movenextbtn:hover {
border-color: #b5b5b5;
background: #c7c7c7;
background: -moz-linear-gradient(top, #c7c7c7 0%, #b7b7b7 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c7c7c7), color-stop(100%,#b7b7b7));
background: -webkit-linear-gradient(top, #c7c7c7 0%,#b7b7b7 100%);
background: -o-linear-gradient(top, #c7c7c7 0%,#b7b7b7 100%);
background: -ms-linear-gradient(top, #c7c7c7 0%,#b7b7b7 100%);
background: linear-gradient(to bottom, #c7c7c7 0%,#b7b7b7 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c7c7c7', endColorstr='#b7b7b7',GradientType=0 );
}

.ui-button-text-icon-secondary .ui-button-text, .ui-button-text-icons .ui-button-text {
background: url(icon_next.png) no-repeat  100% 50%;
background-size: 9px 13px;
padding: 0;
padding-right: 25px;
display: inline-block;
font-family: 'Roboto', 'sans-serif', 'Arial';
font-style: normal;
font-weight: 700;
font-size: 16px;
text-transform: uppercase;
}

.ui-state-default .ui-icon {
	background: none;
	display: none;
}

#moveprevbtn {
height: 52px;
font-size: 16px;
line-height: 52px;
margin: 0px;
color: #484444 !important;
border: 1px solid #d3d3d3;
background: #f5f5f5;
background: -moz-linear-gradient(top, #f5f5f5 0%, #e1e1e1 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f5f5), color-stop(100%,#e1e1e1));
background: -webkit-linear-gradient(top, #f5f5f5 0%,#e1e1e1 100%);
background: -o-linear-gradient(top, #f5f5f5 0%,#e1e1e1 100%);
background: -ms-linear-gradient(top, #f5f5f5 0%,#e1e1e1 100%);
background: linear-gradient(to bottom, #f5f5f5 0%,#e1e1e1 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#e1e1e1',GradientType=0 );
padding-left: 25px;
padding-right: 25px;
width: 49%;
float: left;
}

#moveprevbtn:hover {
border-color: #b5b5b5;
background: #c7c7c7;
background: -moz-linear-gradient(top, #c7c7c7 0%, #b7b7b7 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c7c7c7), color-stop(100%,#b7b7b7));
background: -webkit-linear-gradient(top, #c7c7c7 0%,#b7b7b7 100%);
background: -o-linear-gradient(top, #c7c7c7 0%,#b7b7b7 100%);
background: -ms-linear-gradient(top, #c7c7c7 0%,#b7b7b7 100%);
background: linear-gradient(to bottom, #c7c7c7 0%,#b7b7b7 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c7c7c7', endColorstr='#b7b7b7',GradientType=0 );
}

.ui-button-text-icon-primary .ui-button-text, .ui-button-text-icons .ui-button-text {
background: url(icon_back.png) no-repeat  0% 50%;
background-size: 9px 13px;
padding: 0;
padding-left: 25px;
display: inline-block;
font-family: 'Roboto', 'sans-serif', 'Arial';
font-style: normal;
font-weight: 700;
font-size: 16px;
text-transform: uppercase;	
}

/* Save All button */
.saveall {
height: 52px;
font-size: 16px;
margin: 0px;
margin-bottom: 15px;
color: #FFF !important;
border: 1px solid #64adc9;
background: #9ec5d3;
background: -moz-linear-gradient(top, #9ec5d3 0%, #769ead 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9ec5d3), color-stop(100%,#769ead));
background: -webkit-linear-gradient(top, #9ec5d3 0%,#769ead 100%);
background: -o-linear-gradient(top, #9ec5d3 0%,#769ead 100%);
background: -ms-linear-gradient(top, #9ec5d3 0%,#769ead 100%);
background: linear-gradient(to bottom, #9ec5d3 0%,#769ead 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9ec5d3', endColorstr='#769ead',GradientType=0 );

display: inline-block;
font-family: 'Roboto', 'sans-serif', 'Arial';
font-style: normal;
font-weight: 700;
font-size: 15px;
text-transform: uppercase;
width: 100%;
}

.saveall:hover {
border-color: #558ca2;
background: #6e8993;
background: -moz-linear-gradient(top, #6e8993 0%, #526e79 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6e8993), color-stop(100%,#526e79));
background: -webkit-linear-gradient(top, #6e8993 0%,#526e79 100%);
background: -o-linear-gradient(top, #6e8993 0%,#526e79 100%);
background: -ms-linear-gradient(top, #6e8993 0%,#526e79 100%);
background: linear-gradient(to bottom, #6e8993 0%,#526e79 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6e8993', endColorstr='#526e79',GradientType=0 );
}

/* Clear All button */
.clearall {

height: 52px;
font-size: 16px;
margin: 0px;
margin-bottom: 30px;
color: #FFF !important;
border: 1px solid #6e6e6e;
background: #7c7e7d;
background: -moz-linear-gradient(top, #7c7e7d 0%, #5c5d5f 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7c7e7d), color-stop(100%,#5c5d5f));
background: -webkit-linear-gradient(top, #7c7e7d 0%,#5c5d5f 100%);
background: -o-linear-gradient(top, #7c7e7d 0%,#5c5d5f 100%);
background: -ms-linear-gradient(top, #7c7e7d 0%,#5c5d5f 100%);
background: linear-gradient(to bottom, #7c7e7d 0%,#5c5d5f 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7c7e7d', endColorstr='#5c5d5f',GradientType=0 );

display: inline-block;
font-family: 'Roboto', 'sans-serif', 'Arial';
font-style: normal;
font-weight: 700;
font-size: 15px;
text-transform: uppercase;
width: 100%;
}

.clearall:hover {
border-color: #6e6e6e;
background: #5e605f;
background: -moz-linear-gradient(top, #5e605f 0%, #464748 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5e605f), color-stop(100%,#464748));
background: -webkit-linear-gradient(top, #5e605f 0%,#464748 100%);
background: -o-linear-gradient(top, #5e605f 0%,#464748 100%);
background: -ms-linear-gradient(top, #5e605f 0%,#464748 100%);
background: linear-gradient(to bottom, #5e605f 0%,#464748 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5e605f', endColorstr='#464748',GradientType=0 );
}

/* Export-Button */

#exportbutton {
height: 52px;
font-size: 16px;
font-weight: 700;
line-height: 52px;
margin: 0px;
color: #484444 !important;
border: 1px solid #d3d3d3;
background: #f5f5f5;
background: -moz-linear-gradient(top, #f5f5f5 0%, #e1e1e1 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f5f5), color-stop(100%,#e1e1e1));
background: -webkit-linear-gradient(top, #f5f5f5 0%,#e1e1e1 100%);
background: -o-linear-gradient(top, #f5f5f5 0%,#e1e1e1 100%);
background: -ms-linear-gradient(top, #f5f5f5 0%,#e1e1e1 100%);
background: linear-gradient(to bottom, #f5f5f5 0%,#e1e1e1 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#e1e1e1',GradientType=0 );
padding-left: 25px;
padding-right: 25px;
width: 49%;
margin: 20px 0;
border-radius: 4px;
}

#exportbutton:hover {
	cursor: pointer;
	border-color: #b5b5b5;
	background: #c7c7c7;
	background: -moz-linear-gradient(top, #c7c7c7 0%, #b7b7b7 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c7c7c7), color-stop(100%,#b7b7b7));
	background: -webkit-linear-gradient(top, #c7c7c7 0%,#b7b7b7 100%);
	background: -o-linear-gradient(top, #c7c7c7 0%,#b7b7b7 100%);
	background: -ms-linear-gradient(top, #c7c7c7 0%,#b7b7b7 100%);
	background: linear-gradient(to bottom, #c7c7c7 0%,#b7b7b7 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c7c7c7', endColorstr='#b7b7b7',GradientType=0 );
}

/* UI buttons for longer Text */
button.ui-state-default,
input.ui-state-default {
	white-space: pre-wrap; /* css-3 */
	white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
	white-space: -pre-wrap; /* Opera 4-6 */
	white-space: -o-pre-wrap; /* Opera 7 */
	word-wrap: break-word; /* Internet Explorer 5.5+ */
}

a.clearall span.ui-button-text {
  padding-top: 15px;
}

/* END: Navigator */





/* START: Progress bar */
.percentcomplete {
  height: 50px;
  color: #FFF;
  font-size: 13px;
  width: 100%;
}
#progress-wrapper {
	clear: both;
  height: 16px;
  width: 215px;
  margin: 0 auto;
  padding-top: 25px;
  color: #4a4a4a;
  line-height: 11px;
  text-align: center;
}
#progress-wrapper .hide {
  font-weight:400;
  position:absolute;
  top:-9999px;
  left:-9999px;
}

#progress-wrapper #progress-post {
	float: left;

	margin: 0 0 0 5px;
	width: 15px;
	text-align: left;
}

#progress-wrapper #progress-pre {
	float: left;
	margin: 0 5px 0 0;
	width: 15px;
	text-align: right;
}

#progressbar.ui-progressbar.ui-widget.ui-widget-content.ui-corner-all {
  background: #f1f1f1;
  border: 1px solid #aaa;
  border-radius:8px;
  height: 10px;
  -moz-box-shadow:    inset  0 1px 5px #ccc;
  -webkit-box-shadow: inset  0 1px 5px #ccc;
  box-shadow:         inset 0 1px 5px #ccc;filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#4f6a11');
}
#progressbar div.ui-progressbar-value.ui-widget-header.ui-corner-left {
  background-color: #FFF;
  background-image: none;
  border: 1px solid #b8b8b8;
  border-radius: 8px;
  
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#7ab7f5), to(#2d6b9e));
  background: -webkit-linear-gradient(top, #7ab7f5, #2d6b9e); 
  background: -moz-linear-gradient(top, #7ab7f5, #2d6b9e);
  background: -ms-linear-gradient(top, #7ab7f5, #2d6b9e);
  background: -o-linear-gradient(top, #7ab7f5, #2d6b9e);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#7ab7f5, endColorstr=#2d6b9e);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#FFFFFF, endColorstr=#edf3f4)";
}
#progress-post {}

#progress-wrapper .ui-widget-content {}

/* END: Progress bar */





/* START: Language bar */
.lang-wrapper { margin: 25px 0 0 0; }
select.languagechanger {
	font-size: 15px;
	height: 35px;
	min-width: 100px;
	padding: 0 0 0 5px;
	}

/* END: Language bar */





.printouttitle { /* see h1 */
  display:block;
	color: #4a4a4a;
	font-family: 'Roboto', 'sans-serif', 'Arial';
	font-style: normal;
	font-weight: 700;
	font-size: 28px;
	text-align: center;
	margin-bottom: 10px;
	padding: 0 15px;
}

.printouttable {}
.printouttable th {
  border:1px solid #aaa;
  padding:3px;
}
.printouttable td {
  border:1px solid #aaa;
  vertical-align:top;
  padding: 5px 20px;
}
.printouttable td:first-child {

}

tr.printanswersgroup {
	font-family: 'Roboto', 'sans-serif', 'Arial';
	color: #686666;
	font-style: normal;
	font-weight: 700;
	font-size: 17px;
	text-align: center;
}

tr.printanswersgroup td {
		padding: 30px 0 10px 0;
		border: 0;
}

tr.printanswersquestionhead {
	font-family: 'Roboto', 'sans-serif', 'Arial';
	color: #4a4a4a;
	font-style: normal;
	font-weight: 700;
	margin-bottom: 20px;
	text-align: center;
}

tr.printanswersquestionhead td {
	border: 0;
	padding: 15px 0 2px 0;
}

tr.printanswersquestion td {
	border-left: 0;
}

.topbar {
  height: 50px;
  margin-bottom: 17px;
  color: #FFF;
  font-size: 13px;
  width: 100%;
	border-bottom: 2px solid #b8b8b8;
	background: #b8b8b8;	
}



p.captcha {
  margin:0 0 20px;
}
form.captcha {}
.captcha table {}
.captcha table table img {
  margin:0 5px;
}
#captcha { /* input form field */
}
.captcha table .submit {
  margin-top:10px;
}





p#tokenmessage {
    margin-top: 40px;
  margin-right: 30px;
  margin-left: 30px;
  margin-bottom: 20px;
  text-align: center;
}
#tokenform {}
#tokenform ul {
  margin-top:10px;
  margin-bottom:20px;
}
#tokenform ul li {
  vertical-align:middle;
  margin-bottom:20px;
}
#tokenform ul li label {}
#tokenform ul li input#token {}
#tokenform ul li img#captchaimage {}
#token,
  #captchaimage {
  margin:3px 5px;
}
#tokenform ul li input.submit {
	margin-right: 20px;
	margin-bottom: 20px;}





/*----------------------------------------------------------------------------*/
/* START: Question styles */
/*----------------------------------------------------------------------------*/
.mandatory { /* Mandatory questions */
}

span.asterisk { /* Asterisk when question mandatory */
  color:#ff0f0f;
  font-size:80%;
  font-family: 'Roboto', 'sans-serif', 'Arial';
  letter-spacing:2px;

}


/* ul in table style */
.numeric-multi .answer ul,
  .multiple-opt-comments .answer ul,
  .multiple-short-txt .answer ul {
  display:table;
}
.numeric-multi .answer ul li,
  .multiple-opt-comments .answer ul li,
  .multiple-short-txt .answer ul li {
  display:table-row;
}
.numeric-multi .answer ul li label,
  .numeric-multi .answer ul li span.input,
  .numeric-multi .answer ul li.multiplenumerichelp span,
  .numeric-multi .answer ul li div.slider_lefttext,
  .numeric-multi .answer ul li label.slider-label,
  .numeric-multi .answer ul li div.multinum-slider,
  .numeric-multi .answer ul li div.slider_righttext,
  .multiple-opt-comments .answer ul li span.option,
  .multiple-opt-comments .answer ul li span.comment,
  .multiple-short-txt .answer ul li label,
  .multiple-short-txt .answer ul li span {
  display:table-cell;
  vertical-align:middle;
}
/* correction for prefix/suffix display problem (span inside span) */
.numeric-multi .answer ul li.multiplenumerichelp span span {
  display:inline;
  padding:0;
  vertical-align:baseline;
}
/* end correction */

.numeric-multi .answer ul li label,
  .multiple-opt-comments .answer ul li span.option,
  .multiple-short-txt .answer ul li label {
  padding:3px 10px 3px 0;
}
.numeric-multi .answer ul li span.input,
  .numeric-multi .answer ul li.multiplenumerichelp span,
  .multiple-opt-comments .answer ul li span.comment,
  .multiple-short-txt .answer ul li span { /* compare with padding of table answertext */
  padding:3px;
}

/* All input form fields (careful with background-color !) */
input.text,
  .array-multi-flexi-text tbody td label input,
  .array-multi-flexi tbody td input,
  .date p.question input,
  .numeric-multi li.multiplenumerichelp input.good,
  .numeric-multi li.multiplenumerichelp input.problem,
  .numeric-multi .answer ul li span.input input {
height: 29px;
width: auto;
padding: 0 5px;
font-family: 'Roboto', 'sans-serif', 'Arial';
font-style: normal;
font-weight: 400;
color: #6f6f6f;
line-height: 29px;
background: white;
border: 1px solid #c9c9c9;
border-radius: 3px;
text-align: left;
font-size: 15px;
}


p.question.answer-item.text-item.inputwidth-15.withprefix.withsuffix input.text {
	margin: 0 5px;
	width: 100px;
}

p.question.question.answer-item.text-item.numeric-item.withprefix input.text {
	margin: 0 10px;
	width: 100px;
}



/* Highlighted text fields / Hovereffect in text form fields and areas */
input.text:focus,
.array-multi-flexi-text tbody td label input:focus,
.array-multi-flexi tbody td input:focus,
.date p.question input:focus,
.numeric-multi .answer ul li span.input input:focus,
.textarea:focus,
.numeric p.question input.text:focus,
.numeric-multi .answer ul li span.input input.text:focus {
  background-color:#f8f8f8;
}


/* Right align of text in numeric question types*/
.numeric p.question input.text,
  .numeric-multi li.multiplenumerichelp input,
  .numeric-multi .answer ul li span.input input {
  text-align:right;
}


/* Alignment of checkbox/radio and text following it */
.gender .answer ul li,
  .yes-no .answer ul li,
  .multiple-opt .answer ul li,
  .choice-5-pt-radio .answer ul li,
  .list-radio .answer ul li,
  .list-with-comment .answer .list ul li  {
  position:relative;
  margin-bottom:15px;
  text-align:left;
}
.gender .answer ul li input.radio,
  .yes-no .answer ul li input.radio,
  .multiple-opt .answer ul li input.checkbox,
  .choice-5-pt-radio .answer ul li input.radio,
  .list-radio .answer ul li input.radio,
  .list-with-comment .answer .list ul li input.radio {
  position:absolute;
  top:3px;
  left:0;
}
.gender .answer ul li label.answertext,
  .yes-no .answer ul li label.answertext,
  .multiple-opt .answer ul li label.answertext,
  .choice-5-pt-radio .answer ul li label.answertext,
  .list-radio .answer ul li label.answertext,
  .list-with-comment .answer .list ul li label.answertext {
  display:inline-block;
  margin-left:20px;
  line-height: 20px;
}
.multiple-opt-comments .answer ul li span.option {
  padding-left:20px;
}
.multiple-opt-comments .answer ul li.other span.option {
  padding-left:0;
}
.multiple-opt-comments .answer li span.option input.checkbox {
  margin-left:-20px;
  float:left;
  margin-top: 5px;
}


.gender .answer ul li,
  .yes-no .answer ul li,
  .choice-5-pt-radio .answer ul li {
  display:inline;
  padding-right:20px;
  line-height: 40px;
}

/* line-height fix */
.gender .answer ul li input.radio,.yes-no .answer ul li input.radio, .choice-5-pt-radio .answer ul li input.radio {
	top:3px;
}

p.tip {
  font-size:90%;
  font-style:italic;
}
p.problem {
  color:#ff0f0f;
}



/*----------------------------------------------------------------------------*/
/* Array 5 Point Choice Question */
.array-5-pt {}
/* Array 5 Point Choice Question */
.array-10-pt {}
/* Array Yes/No/Uncertain Question */
.array-yes-uncertain-no {}
/* Array Increase/Same/Decrease Question */
.array-increase-same-decrease {}
/* Array using Flexible Labels question */
.array-flexible-row {}
/* Array Flexible Labels by Column question */
.array-flexible-column {}
/* Array (Flexible Labels) dual scale */
.array-flexible-duel-scale {}
/* Array (Multi Flexi) (Numbers / Checkbox) */
.array-multi-flexi {}
/* Array (Multi Flexi) (Text) */
.array-multi-flexi-text {}

table.question {}
table.question thead th,
  table.question tbody tr.repeat th {
  padding:2px 5px;
  text-align:center;
  vertical-align:bottom;
}
table.question tbody th.answertext { /* Predifined answer */
  padding:5px 7px;
  vertical-align:middle;
}
table.question tbody td {
  padding:3px 5px;
  text-align:center;
  vertical-align:middle;
}

table.question tbody th.answertext,
  .array-flexible-column tbody th.arraycaptionleft,
  .array-flexible-row tbody th.answertextright { /* Predifined answer */
  font-weight:400;
}

table.question tbody .array1,
  .array-flexible-column table.question .odd  {
  background-color:#f0f0f0;
}
table.question tbody .array2,
  .array-flexible-column table.question .even {
  background-color:#fff;
}
table.question tbody tr.array1:hover, table.question tbody tr.array2:hover {
  background-color:#b8b8b8;
  color: #FFF;
}

table.question tbody td label input.radio {}
.array-flexible-duel-scale tbody td select {}
.array-multi-flexi tbody td label select.multiflexiselect {}
.array-multi-flexi-text tbody td label input {padding: 0;}
.array-multi-flexi tbody td input {}

.array-flexible-column tbody th.arraycaptionleft,
  .array-flexible-row tbody th.answertextright {
  text-align:left;
  padding:3px;
}


/* dual scale (radio) */
.array-flexible-duel-scale thead .groups{ /* First row */
  background-color:#fff;
}
.array-flexible-duel-scale thead th.dsheader { /* First row sells with group names */

}
.array-flexible-duel-scale thead td.header_seperator { /* First row sells with group names */
  
}
.array-flexible-duel-scale tbody td.dual_scale_separator {
  background-color:#787878;
  margin:0;
  padding:100;
  
}

/* dual scale (dropdown) */
.array-flexible-duel-scale tbody td.ddarrayseparator {
  background-color:#fff;
  margin:0;
  padding:0;    
}

.array-flexible-duel-scale tbody td.ddprefix {
  text-align:right;
}
.array-flexible-duel-scale tbody td.ddsuffix {
  text-align:left;
}
.array-flexible-duel-scale tbody td select {
  margin:2px 1px;
}

.array-flexible-duel-scale tbody td.ddarrayseparator, 
.ddarrayseparator, 
.array-flexible-duel-scale .answer table.question thead tr td:last-child,
.array-flexible-duel-scale .header_separator,
.array-flexible-duel-scale tbody td.dual_scale_separator
 {
    margin: 0;
    padding: 0;
    background-color: #787878; 
    width: 0.3%;
	
}



/*----------------------------------------------------------------------------*/
/* Date question */
.date {}
.date p.question input { width: 50%; }
.date p.question button.ui-datepicker-triggert {}
.date p.tip {
  margin-top:5px;
}

.date p.question select.day {width: 30%;}
.date p.question select.month {width: 30%;}
.date p.question select.year {width: 30%;}





/*----------------------------------------------------------------------------*/
/* Gender question */
.gender {}
.gender .answer ul li input.radio {}





/*----------------------------------------------------------------------------*/
/* Numerical Input question */
.numeric {}
.numeric p.tip {
  margin-top:5px;
}
.numeric p.question input.text {
  height: 29px;
  padding-left: 10px;

  padding-right: 10px;
  width: 94px;
  font-family: 'Roboto', 'sans-serif', 'Arial';
  font-style: normal;
  font-weight: 400;
  color: #6f6f6f;
  line-height: 29px;
  background: white;
  border: 1px solid #c9c9c9;
  border-radius: 3px;
  text-align: left;
  font-size: 15px;
}







/*----------------------------------------------------------------------------*/
/* Multiple Numerical Input question */
.numeric-multi {}
.numeric-multi p.tip {
  margin-bottom:5px;
}
.numeric-multi p.good {}
.numeric-multi p.problem {}


.numeric-multi .answer ul {}
.numeric-multi .answer ul li {}
.numeric-multi .answer ul li.multiplenumerichelp {/* Total resp. Remaining hints */
}
.numeric-multi .answer ul li.multiplenumerichelp span.label {
display: inline-block;
float: left;
padding-left: 0;
}

.numeric-multi .answer ul li.multiplenumerichelp span.dynamic_remaining {
text-align: left;
float: left;
padding-left: 0;
}

.numeric-multi .answer ul li.multiplenumerichelp span.dynamic_sum {
text-align: left;
float: left;
padding-left: 0;
    font-size: 95%;
}


.numeric-multi li.multiplenumerichelp input.good {
  background-color:#77ef87;
}
.numeric-multi li.multiplenumerichelp input.problem {
  background-color:#ff0f0f;
}
.numeric-multi .answer ul li label {}
.numeric-multi .answer ul li span.input {}

.numeric-multi .answer ul li span.input input {
  height: 29px;
  padding-left: 10px;
  padding-right: 10px;
  width: 30px;
  font-family: 'Roboto', 'sans-serif', 'Arial';
  font-style: normal;
  font-weight: 400;
  color: #6f6f6f;
  font-size: 13px;
  line-height: 29px;
  background: white;
  border: 1px solid #c9c9c9;
  border-radius: 3px;
  text-align: left;
  font-size: 15px;
}

.numeric-multi .answer ul li span.input input:focus {background: #FFF;}
    
    .numeric-multi .answer li span.input,
    .numeric-multi .answer li.multiplenumerichelp span {
    text-align:left;
  }
  
  
  .numeric-multi .answer ul li label.slider-label {
      clear: both;
    font-size:100%;
    vertical-align:middle;
    padding:0 15px 0 0;
    display: block;
    width: 100%;
  }
  .numeric-multi .answer ul li div.slider_lefttext { /* text on the left side of slider bar */
    padding: 15px 2% 0 0;
    text-align: right;
    vertical-align: left;
    font-size: 100%;
    float: left;
    width: 30%;
  }
  .numeric-multi .answer ul li div.slider_righttext { /* text on the right side of slider bar */
    padding: 15px 0 0 2%;
    text-align: left;
    font-size: 100%;
    width: 30%;
    float: left;
  }
  .numeric-multi .answer ul li div.multinum-slider { /* slider container */
    vertical-align:middle;
  }
  
  .numeric-multi .answer ul li.withslider {
		display: block;
  	margin-bottom: 25px;
  }

	/* FIX numeric label */
	
	span.label {
		font-weight: bold;
	}

  
  
  
  /*----------------------------------------------------------------------------*/
  /* Ranking question */
  .ranking {}
  .ranking table.rank {}
  .ranking table td.label { /* Choices */
  }
  .ranking table td.label strong label { /* Heading for choices */
  }
  .ranking table td.label select.select {
    margin-top:5px;
  }
  .ranking table td.output { /* Output (ranking) */
  }
  .ranking table td.output table {}
  .ranking table td.output table td {
    padding:2px 3px;
  }
  .ranking table td.output table td strong{ /* Heading for output */
  }
  .ranking table td.output table td.position {}
  .ranking table td.output table td.item input.text {}


.dragDropTable .columns2 {
  clear: both;
  width: 100%;
  margin: 0;
  padding: 0;
}

.dragDropTable .columns2 .dragDropChoices {
  border: 1px solid #6f6f6f;
  background: #FFF;
  margin: 5px 0px 20px 0;
  padding: 5px;
  width: auto;
}

.dragDropTable .columns2 .dragDropChoices ul li.choice {
  width: auto;
  padding: 5px;
  background: #f0f0f0;
  border: 1px solid #b8b8b8;
  margin-bottom: 3px;
  cursor: move; 
}

.dragDropTable .columns2 strong.SortableTitle {
}

.dragDropTable .columns2 .dragDropRanks {
  border: 1px solid #6f6f6f;
  background: #FFF;
  margin-top: 5px;
  padding: 5px;
  width: auto;
}

.dragDropTable .columns2 .dragDropRanks ol li.choice {
  width: auto;
  padding: 5px;
  background: #b8b8b8;
  margin-bottom: 3px;
  cursor: move;
  color: #FFF;
}
  
  
  
  
  /*----------------------------------------------------------------------------*/
  /* Boilerplate question */
  .boilerplate  {}
  
  
  
  
  
  /*----------------------------------------------------------------------------*/
  /* Yes-No question */
  .yes-no {}
  .yes-no .answer ul li input.radio {}
  
  
  
  
  
  /*----------------------------------------------------------------------------*/
  /* Multiple Options question */
  .multiple-opt {}
  .multiple-opt .answer ul li {}
  .multiple-opt .answer ul li input.checkbox {}
  .multiple-opt .answer ul li label.answertext{}
  .multiple-opt .answer ul li input.text { /* Comment field */
  }
  
  
  
  
  
  /*----------------------------------------------------------------------------*/
  /* Multiple Options question with comments */
  .multiple-opt-comments {}
  .multiple-opt-comments .answer ul li {display: list-item;}
  .multiple-opt-comments .answer ul li.other {}
  .multiple-opt-comments .answer ul li span.option label.answertext input.checkbox {}
  .multiple-opt-comments .answer ul li span.option label.answertext input.text.other {}
  .multiple-opt-comments .answer ul li span.option {display: block;}
  .multiple-opt-comments .answer ul li span.comment label.answer-comment input.text {}
  .multiple-opt-comments .answer ul li span.comment {padding: 0; margin: 5px 0 20px 0; display: block;}
  .multiple-opt-comments .answer ul li span.comment input.text  {width: 94%; margin: 0; padding: 10px; display: block;}
  
  
  
  
  
  
  /*----------------------------------------------------------------------------*/
  /* List Dropdown question */
  .list-dropdown {}
  .list-dropdown p.question select {width: 100%;}
  
  
  
  
  
  /*----------------------------------------------------------------------------*/
  /* 5 point choice question */
  .choice-5-pt-radio {}
  .choice-5-pt-radio .answer ul li input.radio {}
  .choice-5-pt-radio .answer ul li label.answertext {} 
  
  
  
  
  
  /*----------------------------------------------------------------------------*/
  /* List Radio qeustion */
  .list-radio .answer ul li {margin-bottom: 15px;}
  .list-radio .answer ul li input.radio {}
  .list-radio .answer ul li label.answertext {}
  .list-radio .answer ul li.other label input.text {
  	width: 94%;
  	margin: 0;
  	padding: 10px;
    display: block;
  	margin-top: 10px;
  }
  
  
  
  
  
  /*----------------------------------------------------------------------------*/
  /* List with Comment question */
  .list-with-comment {}
  .list-with-comment div.list ul li input.radio {}
  .list-with-comment div.list ul li label.answertext {}
  .list-with-comment p.comment {
    margin-top:5px;
  }
  .list-with-comment p.comment label {
    vertical-align:top;
    display:block;
  }
  .list-with-comment p.comment textarea.textarea {
  	width: 94%;
  	margin: 0;
  	padding: 10px;
    display: block;
  }
  
  
  
  
  
  /*----------------------------------------------------------------------------*/
  /* Multiple Short Text question */
  .multiple-short-txt {}
  .multiple-short-txt .answer ul li label {}
  .multiple-short-txt .answer ul li span input.text {

  }
  .multiple-short-txt .answer ul li span textarea.textarea {
  	width: 94%;
  	margin: 0;
  	padding: 10px;
  	display: block;
    /* when entering rows in LimeSurvey settings textarea instead of input field appears */
  }
  .multiple-short-txt .answer li span {
    text-align:left;
  }
 
  ul.subquestions-list, ul.questions-list, ul.text-list {
 width: 100%;
  }
  
  
  
  
  
  /*----------------------------------------------------------------------------*/
  /* Short Free Text question */
  .text-short {}
  .text-short p.question input.text {
  	width: 94%;
  	margin: 0;
  	padding: 10px;
  	}
  .text-short .answer textarea.textarea {
  	width: 94%;
  	margin: 0;
  	padding: 10px;
    display: block;
  	}  
  
  
  
  
  /*----------------------------------------------------------------------------*/
  /* Multiple Long Text question */
  .text-long {}
  .text-long .answer textarea.textarea {	
  	width: 94%;
  	margin: 0;
  	padding: 10px;
    display: block;  	
  }
  
  
  
  
  
  /*----------------------------------------------------------------------------*/
  /* Huge Free Text question */
  .text-huge {}
  .text-huge .answer textarea.textarea {
  	width: 94%;
  	margin: 0;
  	padding: 10px;
    display: block;
  	} 
  
  
  
  
  
  /*----------------------------------------------------------------------------*/
  /* General question style to overwrite the ones above */
  
  
  /* START: Column alignment */
  /* Applies for: .list-radio, .multiple-opt, (.gender????), */
  ul.cols-2-ul, ul.cols-3-ul, ul.cols-4-ul, ul.cols-5-ul, ul.cols-6-ul, ul.cols-7-ul, ul.cols-8-ul {
    display:inline-block;
    vertical-align:top;
    margin-left:0;
    margin-right:0;
    padding-left:0;
    padding-right:0;
  }
  ul.cols-2-ul {
    width:49%;
  }
  ul.cols-3-ul {
    width:32%;
  }
  ul.cols-4-ul {
    width:24%;
  }
  ul.cols-5-ul {
    width:19%;
  }
  ul.cols-6-ul {
    width:16%;
  }
  ul.cols-7-ul {
    width:14%;
  }
  ul.cols-8-ul {
    width:12%;
  }
  ul.cols-2-ul li, ul.cols-3-ul li, ul.cols-4-ul li, ul.cols-5-ul li, ul.cols-6-ul li, ul.cols-7-ul li, ul.cols-8-ul li {
    padding-right:5px;
  }
  
  ul.first {}
  ul.last {}
  /* END: Column alignment */
  
  /*----------------------------------------------------------------------------*/
  /* END: Question styles */
  /*----------------------------------------------------------------------------*/
  
  
  
  
  
  /*----------------------------------------------------------------------------*/
  /* Jquery CSS */
  
  /** UI Base **/
  .ui-wrapper {
    border:1px solid #50A029;
  }
  .ui-wrapper input,.ui-wrapper textarea {
    border:0;
  }
  
  
  /* UI Slider */
  .ui-slider {
    width: 35%; /* slider-bar width */
    height: 9px; /* slider-bar height */
    margin: 20px 0 8px 0; /* required to the the callout */
    text-align: center;
    float: left;
  }
  .ui-slider .ui-slider-handle {
    position:absolute;
    height:23px;
    width:12px;
    top:-8px;
    left:0;
    background-image:url(slider-handle.png);
  }
  .ui-state-default, .ui-widget-content .ui-state-default {
    /* removes background-color and border behind the slider handle */
    border:none;
    background-color:transparent;
  }
  .ui-widget-content {
    /* border-color or background-color of slider bar */
  }
  
  .slider_callout {
    display: none;
    height:20px;
    width:50px;
    overflow:hidden;
    position:absolute;
    top:-18px;
    margin-left:-8px;
	mergin-right:-8px;
    font-size:65%;
    font-weight:400;
    text-align:left;
    color: #4a4a4a;
  }
  .slider_showmin {
    float:left;
    width:50px;
    margin:15px 0 0 0;
    font-family: 'Roboto', 'sans-serif', 'Arial';
    font-size:65%;
    font-weight:400;
    text-align:left;
  }
  .slider_showmax {
    float: right;
    width:80px;
    margin:15px 0 0 0;
    font-family: 'Roboto', 'sans-serif', 'Arial';
    font-size:65%;
    font-weight:400;
    text-align:right;
  }
  /*----------------------------------------------------------------------------*/
  
  
  
  
  
  /*----------------------------------------------------------------------------*/
/* Question Index */
.outerframe.withindex,.withindex .outerframe{
}
.allinone .withindex{margin:0}

#index {
	height: 100%;
	clear: both;
  padding:25px 15px 70px 15px;
  background: #f8f8f8;
  border-top: 1px solid #dfded5;
}

#index h2 {
  margin:0;
  padding:5px;
  text-align:left;
  color: #4a4a4a;
}

#index h3 {
  margin:0.5em 0 0 0.5em;
}

#index .container {
  background: #f8f8f8;
  width: auto;
  height: 100%;
  text-align: left;
}

#index .container .row {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  border-top:1px solid #fff;
  padding:5px;
  margin: 0;
  background: #f0f0f0;
  text-decoration: underline;
}

#index .container .row:hover {
  text-decoration: none;
  color: #ccc;
  cursor: pointer;
}

#index .container .row .hdr {
  width:25px;
  display: inline-block;
  padding: 0 5px 0 0;
}

#index .container .row.odd { background: #b8b8b8; color: #FFF;}
#index .container .row.current {   background: #fff;  color: #686666; font-weight: 700; }
#index .container .row.missing { background: #bc3d34; color: #fff; }
#index .container .row.answer { background: #b8b8b8; color: #FFF; }
#index .container input {
	width: 100%;
	margin: 10px 0;
	cursor:pointer;
	border: none;
	border-radius: 4px;
}
/*----------------------------------------------------------------------------*/
  
  
  
  
  
  /*----------------------------------------------------------------------------*/
  /* taken from default template */
  /* Tips / Validation Messages */
  /* If the question is invalid, but has not been submitted, give it a pleasant warning color */
  div.em_num_answers.good {
    color: green;
  }
  
  div.em_num_answers.error {
    color: red;
    display: block;
  }
  
  div.em_value_range.good {
    color: green;
  }
  div.em_value_range.error {
    color: red;
    display: block;
  }
  
  div.em_sum_range.good {
    color: green;
    font-size: 100%;
    font-weight: 700;
  }
  div.em_sum_range.error {
    color: red;
    font-size: 100%;
    display: block;
  }
  
  div.em_regex_validation {
    display: none;
  }
  div.em_regex_validation.good {
    color: green;
  }
  div.em_regex_validation.error {
    color: red;
  }
  
  div.em_q_fn_validation.good {
    color: green;
  }
  div.em_q_fn_validation.error {
    color: red;
  }
  
  div.em_sq_fn_validation.good {
    color: green;
  }
  div.em_sq_fn_validation.error {
    color: red;
  }
  
  div.em_other_comment_mandatory.good {
    display: none;
  }
  div.em_other_comment_mandatory.error {
    color: red;
    display: block;
  }
  
  input.em_sq_validation.good, textarea.em_sq_validation.good {
  }
  
  input.em_sq_validation.error, textarea.em_sq_validation.error {
    color: black;
    background-color:  pink;
  }
  
  span.dynamic_sum {
    font-weight: bold;
  }
  span.dynamic_sum.good {
    color: green;
  }
  span.dynamic_sum.error {
    color: red;
  }
  
  span.dynamic_remaining {
    font-weight: bold;
  }
  span.dyanamic_remaining.good {
    color: green;
  }
  span.dynamic_remaining.error {
    color: red;
  }
  
  /* If  it is still invalid after submit, flag it in red */
  .input-error div.error {
    color: red;
    display: block;
  }
  
  span.hide-tip div.good {
    display: none;
  }
  
  span.hide-tip div.error {
    color: red;
  }
  
  .input-error span.hide-tip div.error {
    color: red;
    display: block;
  }
  
  /* II / 3b. Limesurvey 1.91 validation styles					*/
  p.good
    {
    color: green;
  }
  
  p.problem
    {
    color: red;
  }
  
  /*----------------------------------------------------------------------------*/
  
  .schwach {
      width: 100%; 
      background-color: #ff6600 !important; 
      padding-top: 15px; 
      padding-bottom: 5px;
  }
  
  .schwach h2 {
      margin-left: 10px;
      padding: 0px;
  }
  
  
  
  /* START: Clearfix */
  .clearfix:after {
    content:"."; 
    display:block; 
    height:0; 
    clear:both; 
    visibility:hidden;
  }
  .clearfix {display:inline-block;}
  /* Hides from IE-mac \*/
  * html .clearfix {height:1%;}
  .clearfix {display:block;}
  /* End hide from IE-mac */
  /* END: Clearfix */  
  
  /* START: Tooltip */
          .tooltip {
			border-bottom: 1px dotted #000000; color: #000000; outline: none;
			cursor: help; text-decoration: none;
			position: relative;
		}
		.tooltip span {
			margin-left: -999em;
			position: absolute;
		}
        .tooltip p {
			display: none;
		}
		.tooltip:hover span {
			border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; 
			box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
			font-family: Calibri, Tahoma, Geneva, sans-serif;
			position: absolute; left: 0em; top: 2em; z-index: 99;
			margin-left: 0; width: 180px;
		}

		.tooltip:hover img {
			border: 0; margin: -10px 0 0 -55px;
			float: left; position: absolute;
		}
		.tooltip:hover em {
			font-family: Candara, Tahoma, Geneva, sans-serif; font-size: 1.2em; font-weight: bold;
			display: block; padding: 0.2em 0 0.6em 0;
		}
		.classic { padding: 0.8em 1em; }
		.custom { padding: 0.5em 0.8em 0.8em 2em; }
		* html a:hover { background: transparent; }
		.classic {background: #f4f4f4; border: 1px solid #e1e1e1; }
		.critical { background: #FFCCAA; border: 1px solid #FF3334;	}
		.help { background: #9FDAEE; border: 1px solid #2BB0D7;	}
		.info { background: #9FDAEE; border: 1px solid #2BB0D7;	}
		.warning { background: #FFFFAA; border: 1px solid #FFAD33; }
        /* End: Tooltip */