/* Notes -----------------------------------------------------------------------
No IE effects:
html>body, !important, child-elements ([])
:hover (up to IE 6 only on a:)

IE only:
* html
* html and \ (escape) in attribute (>= IE6)
underscore hack (<= IE6)
*/



/* CSS reset (start) */

html, body, div, dl, dt, dd, ul, p, blockquote, pre, th, td,
form, fieldset, input, textarea {

  margin:0;

  padding:0;

}

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;

}

/* CSS reset (end) */



/* General layout (start) */
a:link, a:visited {
  color:#9c9c9c;
  text-decoration:none;
}
a:hover {
  text-decoration:underline;
  color:#818181;
}

ul {

  list-style-type:disc;

}



ol {

  list-style-type:decimal;

}

select {
  padding:0.1em;
  font-size:85%;
}

.centered {
  text-align:center;
}

/* General layout (end) */



body {
  background:#000 url(bg.jpg) repeat fixed 0 center;
  color:#f8f9ca;
  font-size:13px;
  font-family:Helvetica, Arial, sans-serif;
  line-height:1.5;
}
#outer-wrapper {
  width:940px;
  background-color:#000;
  margin:0 auto;
  padding:5px 0 20px 0;
}



/* header (start) */
#header-wrapper {
  overflow:hidden;
  margin:0 30px;
  padding:15px 0 17px 0;
}
#header .leftpart {
  width:50%;
  float:left;
  overflow:hidden;
}
#header .rightpart {
  width:50%;
  float:right;
  text-align:right;
}

/* header (end) */


#content-wrapper {
  border-top:1px solid #ccc;
  margin:0 30px;
  padding-top:40px;
}


.contentbox {
  margin:0 0 15px 0;
}

h1.heading {
  margin:2px 0 8px 0;
  font-size:180%;
  text-transform:uppercase;
  line-height:1.4;
  color:#f1930c;
  font-style:italic;
  letter-spacing:-2px;
}





/* GROUPING */
#navigator input,
#registercontinue, #loadbutton, #savebutton,
.submit {
  padding:0.2em 0.5em;
  font-size:85%;
  font-weight:700;
}
/* - */


/* navigation buttons and links */
#navigator {
  position:relative;
  margin:30px 0 0 0; /* see "#tokenform .submit" for top/bottom margins, too */
  text-align:center;
}
#navigator div.unfinished {
  position:absolute;
  top:0; left:0;
}
#navigator div.unfinished .saveall {} /* input[type=submit] for "Load unfinished survey" */
#navigator div.prevnext .submit {} /* input[type=submit] for "Next"/"Prev" button */
#navigator div.clearall {
  position:absolute;
  top:3px; right:0;
}
/* - */


/* surveylist.pstpl */
#surveylist {
  margin:15px 0 20px 25px;
}
#surveylist li.surveytitle a {}
/* - */


/* welcome page */
p.welcomenote {
  margin:10px 0;
}
p.nrquestions {}
p.privacynote {
  border:1px solid #ccc;
  margin:0 0 15px 0;
  padding:12px 15px;
}
p.privacynote span {
  font-style:normal !important; /* inline formattings for style (italic) & weight (bold) */
  font-weight:700 !important;
  font-size:14px;
}
/* - */


/* assessment.pstpl */
#assessment table {
  width:100%;
  border:1px solid #ccc;
}
#assessment table th {
  padding:1px 5px;
  text-align:center;
}
#assessment table td {
  padding:1px 5px;
}
/* - */


/* question parts */
.grpbox {
  margin:0 0 15px 0;
}
h3.grptitle {
  font-weight:700;
  font-size:120%;
  text-transform:uppercase;
  color:#f1930c;
}
.grpdesc {
  margin:0 0 20px 0;
}

.questionbox {
  margin:0 0 25px 0;
  border:1px solid #ccc;
  padding:10px 15px;
}
.questionbox div.questiontext {
  padding:0 0 5px 0;
  font-weight:700;
  color:#f4d2a1;
}
.questionbox span.asterisk {
  padding-right:0.3em;
  font-weight:700;
  color:#c00;
}
.questionbox div.answer {
  margin:0 0 10px 0;
}
.questionbox span.questionhelp { /* appears after question on mandatory questions */
  display:none;
}
.questionbox div.questionhelp {
  clear:both;
  position:relative;
  font-style:italic;
  font-size:95%;
  line-height:1;
  color:#9d9ea0;
}
.questionbox .questionhelp img {
  display:none;

}

.error, .errormandatory, .warningjs {

  font-weight:700;

  color:#ff1a00;

}
/* - */


/* completed.pstpl, clearall.pstpl */
.contentbox .success {
  color:#cdeB8b;
  font-size:16px;
  font-weight:700;
}
/* - */


/* progress bar */

#progress-graph {
  float:right;
  margin-top:5px;

  text-align:right;
  font-size:12px;

}

#progress-graph span.hide {
  font-weight:400;

  position:absolute;

  top:-9999px; left:-9999px;
  display:none;

}

#progress-graph div.zero {
  float:left;
  display:inline;

}

#progress-graph div.graph {
  float:left;

  width:100px;

  height:10px;

  border:1px solid #36393d;
  margin:3px 5px 0 5px;
  text-align:left;

}

#progress-graph div.cent {
  display:inline;
}
/* - */


/* language changer */
select.languagechanger {
  font-weight:700;
}
/* - */


/* register.pstpl, load.pstpl, save.pstpl */
div.messages {
  margin:0 0 15px 0;
}
.messages span.errmessage {
  display:block;
  color:#ff1a00;
}


.register, #loadform table, #saveform table {
  margin-bottom:15px;
}
.register td, #loadform table td, #saveform table td {
  padding:1px 10px 1px 0;
}
.register td:first-child, #loadform table td:first-child, #saveform table td:first-child {
  text-align:left !important; /* inline formattings:right alignment */
}
.register input.text,
#loadform table input[type=text], #loadform table input[type=password],
#saveform table input[type=text], #saveform table input[type=password] {} /* text fields */
.register table img, #loadform table img, #saveform table img {} /* captcha image */
.register table, #loadform table table, #saveform table table {
  margin-bottom:0;
}
.register table td, #loadform table table td, #saveform table table td {
  padding-right:5px;
}
.register table .text,
#loadform table table input[type=text],
#saveform table table input[type=text] {} /* text field next to captcha image */
.register #registercontinue,
#loadform table #loadbutton,
#loadform table #savebutton {} /* submit button (alt:.submit) */
/* - */


/* tokenform */

div#wrapper {}
p#tokenmessage {}

#tokenform ul li {
  list-style-type:none;
}

#tokenform ul li label {

  float:left;

/*  width:400px; when aligned centered this should be half of #wrapper li inner-width */

  text-align:left;
}
#tokenform ul li input {
  vertical-align:middle;
}

#tokenform ul li input.text {} /* alt:#token */

#tokenform li label input {}
#tokenform li img#captchaimage {}
#tokenform li input[type=text] {}
#tokenform li input.submit {}
/* - */


/* printanswers.pstpl */
span.printouttitle {
  display:block;
  margin:2px 0 0 0;
  font-size:180%;
  text-transform:uppercase;
  line-height:1.4;
  color:#646464;
  font-style:italic;
  letter-spacing:-2px;
}
span.printouttitle strong {
  font-weight:400;
}
table.printouttable {}
.printouttable td, .printouttable th {
  border:1px solid #ccc;
  vertical-align:top;
  padding:3px 5px;

}
.printouttable th {
  font-weight:700;

}
.printouttable td:first-child {}

/* - */


/* captcha form */
p.captcha {}
form.captcha table {
  width:100%;
}
form.captcha table td {
  text-align:left !important; /* inline formattings:centered alignment */
}
form.captcha table td label {}
form.captcha table td input.submit {}
form.captcha table table img {}
form.captcha table table input#captcha {}
/* - */


/* footer (start) */
#footer-wrapper {
  margin:60px 30px;
  border-top:1px solid #ccc;
  padding:5px 0 0 0;
  font-size:85%;
}
#footer-wrapper a:link, a:visited, a:hover {
  text-decoration:none;
  color:#646464;
}
#footer-wrapper .leftpart {
  width:50%;
  float:left;
  overflow:hidden;
}
#footer-wrapper .rightpart {
  width:50%;
  float:right;
  text-align:right;
}
#footer-wrapper p.copyright {}
#footer-wrapper p.designedby {}
/* footer (end) */










/* =============================================================================

== Question styles == */

/* GROUPING */
.mandatory {}


.date p.tip,
.numeric-multi p.tip,
.numeric p.tip {
  margin-bottom:5px;
  font-size:95%;
  font-style:italic;
}


.gender .answer ul,
.numeric-multi .answer ul,
.yes-no ul,
.multiple-opt ul, .multiple-opt-comments ul,
.choice-5-pt-radio ul,
.list-with-comment ul,
.list-radio ul,
.list-radio-flexible ul,
.multiple-short-txt ul {
  margin:0;
  padding:0;
  text-align:left;
}
.gender .answer li,
.numeric-multi .answer li,
.yes-no li,
.multiple-opt li, .multiple-opt-comments li,
.choice-5-pt-radio li,
.list-with-comment li,
.list-radio li,
.list-radio-flexible li,
.multiple-short-txt li {
  list-style-type:none;
  vertical-align:middle;
}
.gender ul li,
.yes-no ul li,
.choice-5-pt-radio ul li {
  display:inline;
  padding:0 10px 0 0;
}


.numeric-multi .answer ul,
.multiple-opt-comments div.answer ul,
.multiple-short-txt div.answer ul {
  display:table;
  border-collapse:collapse;
}
.numeric-multi .answer ul li,
.multiple-opt-comments div.answer ul li,
.multiple-short-txt div.answer ul li {

  display:table-row;
}
.numeric-multi .answer li label, .numeric-multi .answer li span, .numeric-multi .answer li div.multinum-slider,
.multiple-opt-comments div.answer ul li span.option, .multiple-opt-comments div.answer ul li span.comment,
.multiple-short-txt div.answer ul li label, .multiple-short-txt div.answer ul li span {

  display:table-cell;
  padding:2px 10px 2px 0;
}




/* =============================================================================
== Array questions == */
/*
colgroup.col-responses col.col-answers {}
colgroup.col-responses col.odd {}
colgroup.col-responses col.even {}
colgroup.col-responses col.col-no-answer {}
*/
table.question {
  width:100%;
  border-collapse:separate;
  border-spacing:2px;
  text-align:center;
  border:1px solid #ccc;
}
table.question th, table.question td { /* necessary? */
  border-collapse:separate;
  border-spacing:2px;
  vertical-align:middle;
}

table.question thead th,
table.question tr.array1,
.array-increase-same-decrease table.question thead td,
.array-multi-flexi table.question thead td,
.array-multi-flexi-text table.question thead td,
.array-flexible-row table.question thead td,
.array-flexible-column table.question thead td,
.array-flexible-column table.question tbody th.arraycaptionleft,
.array-flexible-column div.answer .even {

  background-color:#48445a;
}
table.question tr.array2,
.array-flexible-column div.answer .odd {

  background-color:#1e0c16;
}

table.question thead th {
  text-align:center;

}
table.question tbody th.answertext {
  padding:1px 5px;
  text-align:left;
}

table.question tbody tr.array1:hover, table.question tbody tr.array2:hover {}
table.question tbody td label input.radio,
table.question tbody td label select.multiflexiselect, table.question tbody td select,
table.question tbody td label input.text,
table.question tbody td label input.checkbox {
  vertical-align:middle;
}
/* -----------------------------------------------------------------------------
== Array (10 point choice) == */
.array-10-pt div.answer table.question {}
/* -----------------------------------------------------------------------------
== Array (5 point choice) == */
.array-5-pt div.answer table.question {}
/* -----------------------------------------------------------------------------
== Array (Flexible Labels) dual scale == */
/*
colgroup.col-responses.group-X {}
colgroup.col-responses col.separator {}
col.answertext {}
col.dsheader {}
col.ddarrayseparator {}
*/
.array-flexible-duel-scale div.answer table.question {}
.array-flexible-duel-scale table.question thead tr.groups th.dsheader {}
.array-flexible-duel-scale table.question tbody td.ddarrayseparator {}
/* -----------------------------------------------------------------------------
== Array (Increase, Same, Decrease) == */
.array-increase-same-decrease div.answer table.question {}
/* -----------------------------------------------------------------------------
== Array (Multi Flexible) (Numbers) == */
.array-multi-flexi div.answer table.question {}
/* -----------------------------------------------------------------------------
== Array (Multi Flexible) (Text) == */
.array-multi-flexi-text div.answer table.question {}
/* -----------------------------------------------------------------------------
== Array (Yes/No/Uncertain) == */
.array-yes-uncertain-no div.answer table.question {}
/* -----------------------------------------------------------------------------
== Array (flexible labels) == */
/* colgroup.col-responses col.answertextright {} */
.array-flexible-row div.answer table.question {}
.array-flexible-row table.question tbody th.answertextright {
  padding:1px 5px; /* compare with "table.question tbody th.answertext" */
  text-align:left;
}
/* -----------------------------------------------------------------------------
== Array (flexible labels) by column == */
.array-flexible-column div.answer table.question {}
.array-flexible-column table.question tbody th.arraycaptionleft {
  padding:0 5px;

  text-align:right;

}
.array-flexible-column div.answer .odd {}
.array-flexible-column div.answer .even {}


/* =============================================================================
== Date == */

.date div.answer p.tip {}
.date div.answer p.question input.popupdate {} /* datepicker input field */
.date div.answer p.question select.day {}

.date div.answer p.question select.month {}

.date div.answer p.question select.year {}


/* =============================================================================
== Gender == */
.gender ul li {}
.gender li input.radio {}


/* =============================================================================
== Numerical input == */
.numeric div.answer p.question input.text {}
.numeric div.answer p.tip {}


/* =============================================================================
== Multiple numerical input == */
.numeric-multi .answer ul {}

.numeric-multi .answer ul li {}
.numeric-multi .answer li label, .numeric-multi .answer li span {}
.numeric-multi .answer p.tip.problem { /* Tip under the question text (and general tip) */
  color:#c00;

}

.numeric-multi .answer p.tip.good {
  display:none;

}
.numeric-multi .answer li span.input input.text {}
.numeric-multi .answer li div.multinum-slider { /* main box for the slider */
  padding-bottom:15px; /* due to handle size */
}
/* Jquery CSS */

/** UI Slider (start) **/

.numeric-multi .multinum-slider .ui-slider-1 { /* slider line AND wrapper for slider + callout */

  width:200px; 

  height:9px;
  margin:20px 0 0 6px; /* margin-left according to 1/2 of handle image width */

}

.numeric-multi .multinum-slider div.ui-slider-2 {

  width:200px;

  height:23px;

  position:relative;

  background-image:url(../../images/slider-bg-2.png);

  background-repeat:no-repeat;

  background-position:center center;

}

.numeric-multi .multinum-slider div.ui-slider-handle { 

  position:absolute;

  top:-10px;

  left:0;
  border:0;
  background-color:#fff;

  background-image:url(slider-handle.gif);

  height:23px; /* according to slider image size */

  width:12px;

}

.numeric-multi .multinum-slider .slider_callout {

  position:absolute;

  top:-30px;
  width:80px;
  margin-left:-42px;

  overflow:hidden;

  text-align:center;
  color:#ccc;

}

/** UI Slider (end) **/

.numeric-multi .answer li.multiplenumerichelp label {}
.numeric-multi .answer li.multiplenumerichelp span input {}

.numeric-multi .answer li.multiplenumerichelp input.tip.problem {
  background-color:#ff4242;

  font-weight:700;

  color:#fff;

}

.numeric-multi .answer li.multiplenumerichelp input.tip.good {

  background-color:#cdeB8b;

  font-weight:700;

  color:#fff;

}


/* =============================================================================
== Ranking == */
.ranking .answer table.rank td {}
.ranking .answer table.rank td.rank.label strong label {}
.ranking .answer table.rank td.rank.label select.select {
  padding:0.1em;
}
.ranking .answer table.rank td.rank.label select.select option {}
.ranking .answer table.rank td.rank.output table td strong {} /* comparable to th */
.ranking .answer table.rank td.rank.output table td {
  padding:1px 5px;
}
.ranking .answer table.rank td.rank.output table td.position label {}
.ranking .answer table.rank td.rank.output table td.item input.text {}
.ranking .answer table.rank td.rank.output table td.item img {}
.ranking .answer table.rank td.rank font {}


/* =============================================================================
== Boilerplate question == */
.boilerplate {}


/* =============================================================================
== Yes/No == */
.yes-no div.answer ul li {}
.yes-no div.answer ul li input.radio {}
.yes-no div.answer ul li label.answertext {}


/* =============================================================================
== Multiple options == */
.multiple-opt div.answer ul li input.checkbox {}
.multiple-opt div.answer ul li label.answertext {}


/* =============================================================================
== Multiple options with comments == */
.multiple-opt-comments div.answer ul li {}

.multiple-opt-comments div.answer ul li span.option {}
.multiple-opt-comments div.answer ul li span.option label.answertext input.checkbox {}
.multiple-opt-comments div.answer ul li span.comment {}
.multiple-opt-comments div.answer ul li span.comment label.answer-comment input.text {}
.multiple-opt-comments div.answer ul li.other {}


/* =============================================================================
== List (dropdown) == */
.list-dropdown div.answer p.question select option {}


/* =============================================================================
== List (flexible labels) (dropdown) == */
.list-dropdown-flexible div.answer p.question select option {}


/* =============================================================================
== Language switch == */
.language {} div.answer p.question select option {}


/* =============================================================================
== 5 point choice == */
.choice-5-pt-radio div.answer ul li input.radio {}
.choice-5-pt-radio div.answer ul li label.answertext {}


/* =============================================================================
== List (radio) == */
.list-radio div.answer ul li input.radio {}
.list-radio div.answer li {}
.list-radio div.answer li.other {}
.list-radio div.answer li label.answertext {}


/* =============================================================================
== List (flexible labels) (radio) == */
.list-radio-flexible div.answer ul li input.radio {}
.list-radio-flexible div.answer li {}
.list-radio-flexible div.answer li label.answertext {}


/* =============================================================================
== List with comment == */
.list-with-comment div.answer div.list p.tip {}
.list-with-comment div.answer div.list ul li input.radio {}
.list-with-comment div.answer div.list li label.answertext {}
.list-with-comment div.answer p.comment {
  margin:10px 0 0 0;
}
.list-with-comment div.answer p.comment label {
  display:block;
}
.list-with-comment div.answer p.comment textarea.textarea {}



/* =============================================================================
== Multiple short text == */
.multiple-short-txt div.answer ul li {}
.multiple-short-txt div.answer ul li label {}
.multiple-short-txt div.answer ul li span {}
.multiple-short-txt div.answer ul li span.text {}

.multiple-short-txt div.answer ul li span.comment {}


/* =============================================================================
== Short free text == */
.text-short div.answer p.answertext input.text {}


/* =============================================================================
== Long free text == */
.text-long div.answer textarea.textarea {}


/* =============================================================================
== Huge free text == */
.text-huge div.answer textarea.display {}





/* 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 */
/* Clearfix (end) */