/* Start reset CSS */ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin: 0; padding: 0; } table { border-collapse: collapse; border-spacing: 0; } fieldset,img { border: 0; } address,caption,cite,code,dfn,em,strong,th,var { font-style: normal; font-weight: normal; } ol,ul { list-style: none; } caption,th { text-align: left; } h1,h2,h3,h4,h5,h6 { font-size: 12px; font-weight: normal; } q:before,q:after { content: ''; } abbr,acronym { border: 0; } /* End reset CSS */ body.default { background-color: #FFF; font-size: 13px; line-height: 120%; font-family: Verdana, Arial, Helvetica, sans-serif; color: #1d2d45; } ul { list-style: disc inside; } ol { list-style: decimal inside; } h1 { font-size: 16px; font-weight: bold; color: #328639; padding-top: 15px; } h2 { font-size: 12px; font-weight: bold; color: #328639; padding-top: 5px; } h3 { font-size: 13px; font-weight: bold; color: #1D2D45; padding-bottom: 10px; } a:link,a:visited { color: #819d26; text-decoration: none; } .success { color: #00dd00; font-weight: bold; } .answertext,.answer { text-align: left; } .array1 { font-family: verdana; font-size: 11px; text-align: center; background-color: #fff; } .array2 { font-family: verdana; font-size: 11px; text-align: center; background-color: #eee; } .arraycaptionleft { text-align: right; } /* Save All button */ .saveall { font-weight: 400; font-size: 10px; color: #000; } /* Clear All button */ .clearall { font-weight: 400; font-size: 10px; color: #000; padding: 0 5px; margin: 5px; } .asterisk {display:none} .mandatory .asterisk {display:inline;} .asterisk { color: red; font-size: 9px; font-family: verdana; padding-right:1em; } .hide { font-weight: normal; position: absolute; top: -9999px; left: -9999px; } .printouttable { margin:1em auto; } .printouttable th { text-align: center; } .printouttable td { border-color: #ddf #ddf #ddf #ddf; border-style: solid; border-width: 1px; padding:0.1em 1em 0.1em 0.5em; } .printouttable td:first-child { font-weight: 700; text-align: right; padding-right: 5px; padding-left: 5px; } .printouttable .printanswersquestion td{ background-color:#F7F8FF; } .printouttable .printanswersquestionhead td{ text-align: left; background-color:#ddf; } .printouttable .printanswersgroup td{ text-align: center; font-weight:bold; padding-top:1em; } .printouttitle { padding: 10px 10px 0 10px; font-size: 18px; } .surveytitle { font-size: 12px; height: 18px; } .surveytitle:hover { text-decoration: underline; color: #819d26; } /* Format the language changer combobox on the public homepage */ .languagechanger { } /* Basic formatting for the four keyparts of an question */ span.questionhelp { } .showqnumcode-X .qnumcode { display:none; } span.qnumcode { font-style:italic; } td.questiontext { font-family: verdana; font-size: 12px; font-weight: bold; background-color: #EEF6FF; text-align: left; padding: 0.5em 1em; } .page-odd td.questiontext { background-color: #EFFFEE; } .navigator-table { background-color: #EEF6FF; text-align: center; width: 100%; } .page-odd .navigator-table { background-color: #EFFFEE; } td.page-title { text-align: center; background-color: #EEF6FF; } .page-odd td.page-title { background-color: #EFFFEE; } table.question-group { width: 100%; text-align: center; background-color: #d2e0f2; border: 0; border-collapse:collapse; border-color: #111111; } .page-odd table.question-group { background-color: #D2F2D3; } td.answer { padding: 0.5em 1.5em; } td.survey-question-help { font-size: 10px; background-color: #EEF6FF; padding-left: 1em; } .page-odd td.survey-question-help { background-color: #EFFFEE; } td.survey-question-help img { margin: 4px 4px 4px 0; padding-right: 5px; vertical-align: middle; } /* End formatting for the four keyparts of an question */ .warning { display:block; } .error,.errormandatory,.warningjs { color: red; } .errormandatory,.warningjs { font-size: 12px; font-weight: 700; } table.question { margin: 0 auto; } table.question tr.array1:hover,table.question tr.array2:hover { background-color: #A7A9D1; } .welcome-table { margin: 0 auto; width: 100%; border: 0 none; border-collapse: collapse; } .welcome-table td { } td.survey-description { text-align: center; background-color: #EEF6FF; padding-bottom: 20px; } .page-odd td.survey-description { background-color: #EFFFEE; } span.surveydescription { } td.survey-welcome { text-align: center; padding: 10px; } span.surveywelcome { } .x-questions { font-style: italic; } .navigator-table { width: 100%; margin: 0; background-color: #EEF6FF; border: 0 none; border-collapse: collapse; } .clear-all { text-align: right; width: 30%; } .save-all { text-align: left; width: 30%; } .submit-buttons { text-align: center; width: 40%; } .survey-header-table { width: 100%; margin: 0; border: 0 none; border-collapse: collapse; margin-bottom: 2px; } .survey-header-table td.survey-description p { font-size: 10px; } .graph { background-color: #D2E0F2; } .language-changer { text-align: center; } select.languagechanger { margin-top: 3px; } table.group { width: 100%; margin: 0 0 2px 0; border: 0 none; border-collapse: collapse; background-color: #D2E0F2; } .page-odd table.group { background-color: #D2F2D3; } .group-name { font-size: small; font-family:Verdana, Arial, Helvetica, sans-serif; font-weight: bold; } .group-description { font-size: small; font-family:Verdana, Arial, Helvetica, sans-serif; } .question-wrapper { width: 75%; margin: 0 auto 10px auto; border: 0 none; border-collapse: collapse; background-color: #FFFFFF; } .assessment-table { margin: 0 auto; width: 90%; border-collapse: collapse; border: 1px solid #EEEEEE; } .assessment-table td { padding: 3px; } .assessment-heading { background-color: #EEF6FF; text-align: center; font-size:small; font-weight: bold; border-bottom: 1px solid #EEEEEE; } .assessments-container { } .completed-table { margin: 0 auto; width: 90%; border-collapse: collapse; border: 1px solid #EEEEEE; background-color: #EEF6FF; } .completed-table td { } .completed-text { text-align: center; font-size:small; } table.clearall-result { margin: 0 auto; width: 60%; } table.clearall-result td { text-align: center; font-size:small; font-family:Arial, Helvetica, sans-serif; } .warning-text { color:#FF0000; font-weight: bold; } .register-table { margin: 0 auto; width: 100%; border-collapse: collapse; } .register-table td { text-align: center; } .register-message-1, strong { font-weight: bold; } .register-message-2 { } .register-form { margin: 10px 0 10px 0; } .register-form table.register { margin: 0 auto 0 auto; } #loadtable, #savetable { margin: 0 auto; width: 100%; border-collapse: collapse; } #loadtable td,#savetable td { padding-top: 5px; padding-left: 3px; } #loadbutton,#savebutton { padding: 0 10px; } .load-error, .save-error { color:#FF0000; } .load-heading, .save-heading { background-color: #EEF6FF; text-align: center; } .load-message { } .load-form { } .return-to-survey { } .save-message{ } .save-form{ } .survey-list-table { width: 100%; margin: 0 auto; border-collapse: collapse; background-color: #FFFFFF; } .survey-list-table td { text-align: center; } .survey-list-table .site-name { } .survey-list-table .survey-list-heading { font-weight: bold; padding-top: 20px; } .survey-list-table .survey-list { padding:20px 0; } .survey-list-table .survey-list ul { padding: 0; } .survey-list-table .survey-list li { list-style: none; padding-bottom: 5px; } .survey-list-table .survey-contact { } .survey-list-table .language-changer { padding-bottom: 10px; height: 100px; } .survey-list-table .language-changer p { padding:20px 0; } .survey-list-table .language-changer a { color: #000000; } /* ------------------------------------------------- START: Question styles ------------------------- */ /* ===================================== == Full list of question classes ======= .boilerplate ,.numeric ,.choice-5-pt-radio ,.yes-no ,.gender ,.date ,.numeric-multi ,.numeric ,.list-radio ,.list-radio-flexible ,.list-with-comment ,.list-dropdown ,.list-dropdown-flexible ,.ranking ,.numeric-multi ,.language ,.multiple-opt-comments ,.multiple-short-txt ,.text-short ,.text-long ,.text-huge ,.numeric-multi ,.array-5-pt ,.array-10-pt ,.array-yes-uncertain-no ,.array-increase-same-decrease ,.array-flexible-row ,.array-flexible-column ,.slider ,.array-multi-flexi ,.array-multi-flexi-text ,.array-flexible-duel-scale */ /* - - - - - - - - - - - - - - - - - - - - - - START: General list styles - - - - - - - - - - */ .choice-5-pt-radio .answer ul,.list-radio-flexible .answer ul,.list-radio .answer ul,.list-with-comment .answer ul,.multiple-opt .answer ul,.multiple-opt-comments .answer ul,.multiple-short-txt .answer ul,.numeric-multi .answer ul,.yes-no .answer ul,.gender .answer ul { margin-left: 0%; padding-left: 0%; } .choice-5-pt-radio .answer li,.list-radio-flexible .answer li,.list-radio .answer li,.list-with-comment .answer li,.multiple-opt .answer li,.multiple-opt-comments .answer li,.multiple-short-txt .answer li,.numeric-multi .answer li,.yes-no .answer li,.gender .answer li { list-style-type: none; text-align: left; margin: 0% 0% 0.5em 0.5em; } .outerframe.withindex div.missing td.questiontext { background: red; } /* END: General list styles - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ /* STYLES NOT YET DEFINED - - - - - .boilerplate {} */ .choice-5-pt-radio .answer ul,.yes-no .answer ul,.gender .answer ul { text-align: left; margin-top: 0.5em; margin-left: 0%; padding-left: 0%; } .choice-5-pt-radio .answer ul li,.yes-no .answer ul li,.gender .answer ul li { display: inline; padding: 0% 2em 0% 0%; margin-left: 0%; } /* STYLES NOT YET DEFINED - - - - - .date {} */ .date p.question { margin-left: 1em; } .date p.question select.day { } .date p.question select.month { } .date p.question select.year { } .date p.tip,.numeric-multi p.tip,.numeric p.tip { margin-left: 1.5em; font-size: 80%; font-style: italic; line-height: 150%; } .numeric p.question { margin-left: 1em; } .numeric-multi p.tip.problem { color: #f30; font-weight: bold; } .numeric-multi input.tip.problem { background-color: #f30; border: 2px solid #7F9DB9; font-weight: bold; color: #fff; } .numeric-multi p.tip.good { color: #090; font-weight: bold; } .numeric-multi input.tip.good { background-color: #090; border: 2px solid #7F9DB9; font-weight: bold; color: #fff; } /* DEFINED ABOVE UNDER "General list styles" - - - - - .list-radio-flexible .list-radio */ .list-radio .answer li label, .list-with-comment .answer li label { display: inline-block; width: 85%; } .list-radio .answer li.other label, .list-with-comment .answer li.other label { display: inline; width: auto; } .list-radio .answer li input, .list-with-comment .answer li input { vertical-align: top !important; margin-top: 2px; *margin-top: -2px; /* IE7 and below */ } ul.cols-2,table.cols-2,ul.cols-3,table.cols-3,ul.cols-4,table.cols-4,ul.cols-5,table.cols-5,ul.cols-6,table.cols-6,ul.cols-7,table.cols-7,ul.cols-8,table.cols-8 { width: 98%; margin: 0% auto 0% auto; } ul.cols-2 li,ul.cols-2-ul,ul.cols-3 li,ul.cols-3-ul,ul.cols-4 li,ul.cols-4-ul,ul.cols-5 li,ul.cols-5-ul,ul.cols-6 li,ul.cols-6-ul,ul.cols-7 li,ul.cols-7-ul,ul.cols-8 li,ul.cols-8-ul { float: left; padding: 0; white-space: normal } ul.cols-2 li,ul.cols-2-ul,table.cols-2 td { width: 48%; } ul.cols-3 li,ul.cols-3-ul,table.cols-3 td { width: 30.5%; } ul.cols-4 li,ul.cols-4-ul,table.cols-4 td { width: 23%; } ul.cols-5 li,ul.cols-5-ul,table.cols-5 td { width: 19%; } ul.cols-6 li,ul.cols-6-ul,table.cols-6 td { width: 15%; } ul.cols-7 li,ul.cols-7-ul,table.cols-7 td { width: 13%; } ul.cols-8 li,ul.cols-8-ul,table.cols-8 td { width: 11.5%; } .list-dropdown-flexible p.question { margin-left: 1em; } /* STYLES NOT YET DEFINED - - - - - .list-dropdown {} */ .list-with-comment div.list { width: 47%; float: left; padding: 0.5em 0.5em 0.5em 0%; } .list-with-comment p.select { width: 47%; float: left; padding: 0.5em; margin: 0%; } .list-with-comment div.list p { margin: 0% 0% 0% 1.1em; text-align: left; } .list-with-comment p.comment { margin: 0%; padding: 0.5em; text-align: left; float: left; width: 47%; } .list-with-comment p.comment textarea { width: 100%; } /* DEFINED ABOVE UNDER "General list styles" - - - - - .multiple-opt */ .multiple-opt .answer li input, .multiple-opt-comments .answer li .option input { vertical-align: top !important; margin-top: 2px; *margin-top: -2px; /* IE7 and below */ } .multiple-opt .answer li label, .multiple-opt-comments .answer li .option label { display: inline-block; width: 85%; } .multiple-opt .answer li.other label, .multiple-opt-comments .answer li.other .option label { display: inline; width: auto; } /* The following styles only apply to modern (relatively) complete CSS2 compliant browsers. (Not less than IE 8) */ .multiple-opt-comments ul,.multiple-short-txt ul,.numeric-multi ul { display: table; padding: 0%; margin: 1em; } .numeric-multi .answer ul { margin: 0% 1em 1.5em 1em; } .numeric-multi .answer ul input { width: 5em; padding: 0px; } .numeric-multi ul.computed { float: left; padding-right: 2em; } .numeric-multi ul.slider.computed { width: 22em; } .multiple-opt-comments ul li,.multiple-short-txt ul li,.numeric-multi ul li { display: table-row; } .multiple-opt-comments ul li span.option { display: table-cell; vertical-align: baseline; } .multiple-short-txt ul li label,.numeric-multi ul li label { padding: 0.3em 1em 0% 0%; display: table-cell; vertical-align: baseline; } .numeric-multi ul.computed li label,.numeric-multi ul.slider.computed li label { padding-right: 0%; } .multiple-opt-comments ul li span.comment,.multiple-short-txt ul li span,.numeric-multi ul li span { padding: 0.3em 0% 0% 1em; display: table-cell; vertical-align: baseline; white-space: nowrap; } .multiple-opt-comments ul li span { padding: 0.3em 1em 0% 0%; } .numeric-multi div.multinum-slider { width: auto; float: left; margin-top: 1.5em; margin-bottom: 0.2em; } .numeric-multi li.multiplenumerichelp span { text-align: center; background: transparent none; } .numeric-multi li.multiplenumerichelp span span { display: inline; padding: 0; } .text-short input,.text-short textarea,.text-long textarea,.text-huge textarea { margin-left: 1em; } #limesurvey table.question thead th, #limesurvey table.question .repeat th { text-align: center; vertical-align: bottom; font-weight: 600 !important; } #limesurvey table.question thead th, #limesurvey table.question thead td { background-color: #FFFFFF; } #limesurvey .array-flexible-duel-scale table.question tr.repeat { background-color: #F9F9F9; } #limesurvey .array-flexible-duel-scale table.question .header_answer_text, #limesurvey .array-flexible-duel-scale table.question tr.repeat th.header_answer_text, #limesurvey .array-flexible-duel-scale table.question .header_separator, #limesurvey .array-flexible-duel-scale table.question .repeat .header_separator, #limesurvey .array-flexible-duel-scale table.question .header_answer_text_right { background-color: #FFFFFF; } #limesurvey .answer table.question tbody td { text-align: center; } #limesurvey table.question tbody th.answertext,#limesurvey table.question tbody th.arraycaptionleft { text-align: right; font-weight: normal; } #limesurvey table.question tbody th.answertextright { text-align: left; font-weight: normal; } .array-flexible-column col.odd { background-color: #eee; } .boilerplate td td,.numeric td td,.choice-5-pt-radio td td,.yes-no td td,.gender td td,.date td td,.numeric-multi td td,.numeric td td,.list-with-comment td td,.list-dropdown-flexible td td,.ranking td td,.numeric-multi td td,.language td td,.multiple-opt-comments td td,.multiple-short-txt td td,.text-short td td,.text-long td td,.text-huge td td,.numeric-multi td td,.array-5-pt td,.array-10-pt td,.array-yes-uncertain-no td,.array-increase-same-decrease td,.array-flexible-row td,.array-flexible-column td,.array-multi-flexi td,.array-multi-flexi-text td,.array-flexible-duel-scale td { text-align: left; } .ranking select { min-width: 140px; min-height: 60px; } .ranking option { padding-top: 1px; padding-bottom: 1px; } table.rank td.helptext { font-size: 10px; padding: 5px; } .choice-5-pt-radio .answer li { display: inline; margin-left: 0.5em; } /* Jquery CSS */ /** UI Base **/ .ui-wrapper { border: 1px solid #50A029; } .ui-wrapper input,.ui-wrapper textarea { border: 0; } /** Progress bar **/ #progress-wrapper .ui-widget-content { border: 1px solid #999999; } #progress-wrapper .ui-widget-header { background-color: #CCCCCC; border: 1px solid #999999; } .page-odd td.graph { background-color: #D2F2D3; } /** UI Slider **/ .numeric-multi label.slider-label { display: table-cell; width: auto !important; padding: 0 1em 0.2em 0; margin-top: 1.3em; vertical-align: middle; } .ui-slider-handle { position: absolute; height: 23px; width: 12px; top: 0px; left: 0px; background-image: url(slider-handle.gif); } .ui-slider-1 { width: 200px; height: 9px; margin-bottom: 20px; } .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; } .slider_callout { height: 20px; width: 100px; overflow: hidden; position: absolute; top: -20px; margin-left: -3px; color: #284a6e; font-size: 90%; font-weight: bold; text-align: left; } .slider_showmin { float: left; width: 50px; margin: 15px 0 0 0; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 0.7em; font-weight: normal; text-align: left; } .slider_showmax { float: right; width: 50px; margin: 15px 0 0 0; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 0.7em; font-weight: normal; text-align: right; } .slider_lefttext { display: table-cell; padding-top: 1.5em; padding-right: 11px; padding-bottom: 3px; vertical-align: top; text-align: right; font-size: 0.9em; } .slider_righttext { display: table-cell; padding-top: 1.5em; padding-left: 11px; padding-bottom: 3px; vertical-align: top; font-size: 0.9em; } table.innerframe { width: 75%; text-align: center; border-collapse: separate; border-spacing: 1px; margin: 20px auto 40px auto; border: 1px solid #BBC6CC; width: 75%; } table.privacy { margin-top: 20px; } td.privacynote { text-align: center; background-color: #EEF6FF; font-size: 10px; padding: 5px; } input.submit { padding: 0 15px; margin: 5px; } input.saveall { padding: 0 5px; margin: 5px; } table.question { border-collapse: separate; border-spacing: 2px; margin-bottom: 20px; } table.question th { padding: 4px 6px; border-collapse: separate; border-spacing: 2px; font-size: 11px; } table.question td { padding: 4px 4px; border-collapse: separate; border-spacing: 2px; } table.question input { vertical-align: middle; } p.question { margin-top: 10px; margin-bottom: 10px; } p.tip { margin-top: 10px; margin-bottom: 10px; } td.answer li label,td.answer li input { vertical-align: middle; } .rank input { margin: 1px 1px; } .ranking td.answer { padding-left: 10px; } td.rank label,td.rank td strong { font-size: 10px; font-weight: bold; } .list-dropdown select { margin-left: 10px; } .choice-5-pt-radio .answer ul { margin-bottom: 10px; } .text-long textarea,.text-huge textarea,.text-short textarea { margin-top: 10px; margin-bottom: 10px; margin-right: 10px; } #tokenform { margin-top: 1em; } #tokenform input { } #tokenform label { float: left; width: 20em; margin-right: 0.5em; text-align: right; } #tokenform li { padding-bottom: 5px; list-style: none; } #tokenform img { margin-bottom: -5px; margin-right: 5px; } p#tokenmessage { margin: 20px; } p#tokenmessage { margin: 20px; text-align: center; } div#wrapper { width: 600px; margin: 0 auto; } #tokenform input.submit { margin-left: 18em; margin-top: 1em; margin-bottom: 1em; } .yes-no td.answer { padding-bottom: 10px; } /* Public statistics */ #statsContainer { width: 75%; margin: 20px auto; border: 1px solid #BBC6CC; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 120%; } #statsHeader { padding: 10px 0px; background-color: #EEF6FF; } .statsSurveyTitle { padding: 0; text-align: center; color: #328639; font-size: 16px; font-weight: bold; } .statsNumRecords { padding: 10px 0px 0px 0px; text-align: center; color: #328639; } table.statisticstable { width: 100%; margin: 0; border-top: 1px solid #BBC6CC; } table.statisticstable td { line-height: 190%; border-bottom: 1px solid #BBC6CC; } table.statisticstable img { margin: 10px auto; } div.fieldSummary { padding: 0; text-align: center; background-color: #D2E0F2; } div.questionTitle { padding: 0; font-weight: bold; background-color: #D2E0F2; } /* Question Index */ .outerframe.withindex,.withindex .outerframe{ margin-left: 1em; margin-right: 26em; } .allinone .withindex{margin:0} #index { position: absolute; right: 0; width: 25em; top: 0; overflow-y: scroll; overflow-x: hidden; height: 100%; background: #fff; border-left: 1px solid #ccc; } #index h2 { padding: 1em; background: #eef6ff; text-align: center; } #index h3 { margin: 0.5em 0 0 0.5em; } #index .container { width: 24em; } #index .container .row { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; border-top: 1px solid #fff; } #index .container .row:hover { text-decoration: underline; cursor: pointer; color: blue; } #index .container .row .hdr { width: 3em; text-align: right; display: inline-block; padding: 0 0.5em 0 0; } #index .container .row.odd { background: #EEF6FF; } #index .container .row.current { background: #1D2D45; color: #fff; } #index .container .row.missing { background: #CC0000; color: #fff; } #index .container input { margin: 1em; } /* 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: #FF00FF; display: block; } div.em_value_range.good { color: green; } div.em_value_range.error { color: #FF00FF; display: block; } div.em_sum_range.good { color: green; } div.em_sum_range.error { color: #FF00FF; display: block; } div.em_regex_validation { display: none; } div.em_regex_validation.good { color: green; } div.em_regex_validation.error { color: #FF00FF; } div.em_q_fn_validation.good { color: green; } div.em_q_fn_validation.error { color: #FF00FF; } div.em_sq_fn_validation.good { color: green; } div.em_sq_fn_validation.error { color: #FF00FF; } div.em_other_comment_mandatory.good { display: none; } div.em_other_comment_mandatory.error { color: #FF00FF; 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; background-color: #d3d3d3; } span.dynamic_sum.good { color: green; } span.dynamic_sum.error { color: red; } span.dynamic_remaining { font-weight: bold; background-color: #d3d3d3; } 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: #FF00FF; } .input-error span.hide-tip div.error { color: red; display: block; }