body { font-size: 8pt; font-family: verdana; background-color: #C0C0C0; } table.outerframe { border-collapse: collapse; border-spacing: 1px; margin: 0 auto 40px auto; border: 1px solid #333333; width: 75%; background-color: #EDEDED; } .welcome-table { margin: 0 auto; width: 100%; border: 1px solid #111111; border-collapse: collapse; } .welcome-table td { padding: 25px; } td.survey-description { text-align: left; background-color: #17479E; padding-bottom: 20px; font-size: small; color: #CCCCCC; } td.survey-description h1 { font-size: large; color: #E5E5E5; margin: 0; } td.survey-welcome { text-align: left; background-color: #E5E5E5; font-size: small; } .x-questions { } table.privacy { margin: 0 auto; text-align: center; background-color: #EEEEEE; width: 75%; } td.privacynote { text-align: center; background-color: #EEF6FF; font-size: 10px; padding: 5px; } .navigator-table { width: 100%; margin: 0; background-color: #17479E; border: 0 none; border-collapse: collapse; } .save-all { text-align: left; width: 33%; padding: 5px 0 5px 25px; } .progress-cell { text-align: left; width: 33%; } .submit-buttons { text-align: right; width: 33%; padding: 5px 25px 5px 0; } .submit,.text,.textarea,.saveall,.clearall { background-color: #EDEDED; color: #17479E; font-size: 10pt; font-family: verdana; } .survey-header-table { width: 100%; margin: 0; border: 0 none; border-collapse: collapse; } .survey-header-table td.survey-name { background-color:#FFFFFF; color: #17479E; font-weight: bold; } .language-changer { text-align: center; } table.group-name { width: 100%; text-align: left; background-color: #17479E; font-size: small; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; color: #FFFFFF; } table.group { width: 98%; margin: 0 auto; border: 0 none; } .group-description { font-size: small; font-family: Verdana, Arial, Helvetica, sans-serif; } .question-wrapper { width: 75%; margin: 0 auto 6px auto; border: 1px solid #111111; border-collapse: collapse; background-color: #FFFFFF; } .question-text { font-size: small; color: #17479E; font-weight: bold; background-color: #CCCCCC; } table.assessment-table { margin: 0 auto; width: 75%; border-collapse: collapse; } .assessment-table td { border: 1px solid #111111; } .assessment-heading { background-color: #CCCCCC; text-align: center; font-size:small; font-weight: bold; } .assessments-container { } .assessments td { border: 0 none; } .completed-table { margin: 0 auto; width: 75%; border-collapse: collapse; border: 1px solid #111111; background-color: #FFFFFF; } .completed-table td { } .completed-text { text-align: center; font-size:small; } table.clearall-result { margin: 0 auto; width: 75%; padding: 30px; text-align: center; } table.clearall-result td { text-align: center; font-size:small; font-family:Arial, Helvetica, sans-serif; background-color: #FFFFFF; border: 1px solid #111111; padding: 5px; } .warning-text { color:#FF0000; font-weight: bold; } .register-table { margin: 0 auto; width: 100%; border-collapse: collapse; } .register-table td p, .register-table td span { text-align: center; } .register-message-1 { font-weight: bold; } .register-message-2 { } .register-form { margin: 10px 0 10px 0; } .register-form table.register { margin: 0 auto; } .survey-load { text-align: center; } .load-survey, .save-survey { text-align: center; padding: 10px 0; } .load-heading, .save-heading { font-size: large; font-weight: bold; } .load-message { } .load-form table, .save-form table { margin: 0 auto; width: auto; } .load-form, .save-form { text-align: left; } .return-to-survey { padding-bottom: 5px; } .save-message{ } .survey-list-wrapper { margin:0; padding:20px 10px; text-align:center; font-family: Verdana, Arial, Helvetica, sans-serif; } .survey-list-wrapper a { color: #000000; } .survey-list-heading { font-weight: bold; } .survey-list-heading h1 { font-size: large; color: #328639; margin-top: 0; } .survey-list { } .survey-list ul { padding: 0; margin-left: 0;margin-right: 0; } .survey-list li { list-style: none; padding-bottom: 5px; } .survey-contact { padding-bottom: 10px; } .answertextright { text-align: left; } .graph { border: solid; background-color: #DDD; border-color: #17479E; border-width: 1px; } .questionhelp { font-size: 10px; font-style: italic; } .questiontext { font-family: verdana; font-size: 12px; font-weight: bold; } .survey-question-help { font-size: 10px; font-style: italic; text-align: left; background-color: #E5E5E5; } .survey-question-help img { margin: 2px 4px 2px 0; vertical-align: middle; } .warning{ display:block; } .error,.errormandatory,.warningjs { color: red; } .errormandatory,.warningjs { font-size: 12px; font-weight: 700; color: red; } .asterisk {display:none} .mandatory .asterisk {display:inline;} .asterisk { color: red; font-size: 9pt; font-family: verdana; padding-right:1em; } .showqnumcode-X .qnumcode { display:none; } td.graph { padding: 0.2em 0; } #progress-graph { line-height: 1.5em; width: 17em; margin-left: auto; margin-right: auto; margin-top: 0.2em; padding: 0.5em 0.5em 0.4em 1em; text-align: left; background-color: #DDD; border: 1px solid #17479E; } .hide { font-weight: normal; position: absolute; top: -9999px; left: -9999px; } #progress-graph div.zero { width: 2.6em; margin-right: 0; margin-left: 0; } #progress-graph div.graph { width: 10em; height: 1.5em; border: 1px solid #17479E; margin-top: -1.6em; margin-left: 2.6em; margin-right: 0; } #progress-graph div.cent { width: 3em; margin-top: -1.6em; margin-left: 13.5em; margin-right: 0; } /* .innergraph img { height:12px; vertical-align:top; } .innergraph table { height:12px; border:1px solid #000; table-layout:fixed !important; } .innergraph td { height:12px; } */ .printouttable { width: 100%; } .printouttable td { border-color: #fff #fff #ddf; border-style: solid; border-width: 1px; } .printouttable td:first-child { background-color: #ddf; font-weight: 700; text-align: right; padding-right: 5px; padding-left: 5px; } .printouttitle { padding-right: 5px; padding-left: 5px; font-size: 18px; } .surveytitle { font-size: 1.2em; height: 1.5em; } .languagechanger { font-size: 1em; margin-top: 5px; } .welcome-table td.language-changer { padding: 0; } .welcome-table td.language-changer select { margin: 5px 0; } table.question { width: 100%; } .innergraph { /*direction: ltr;*/ } .innergraph,.question { font-family: verdana; font-size: 10pt; } table.question tr.array1:hover,table.question tr.array2:hover { background-color: #A7A9D1; } /* ------------------------------------------------- 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 .survey-question-answer ul,.list-radio-flexible .survey-question-answer ul,.list-radio .survey-question-answer ul,.list-with-comment .survey-question-answer ul,.multiple-opt .survey-question-answer ul,.multiple-opt-comments .survey-question-answer ul,.multiple-short-txt .survey-question-answer ul,.numeric-multi .survey-question-answer ul,.yes-no .survey-question-answer ul,.gender .survey-question-answer ul { margin-left: 0;margin-right: 0; padding-left: 0;padding-right: 0; } .choice-5-pt-radio .survey-question-answer li,.list-radio-flexible .survey-question-answer li,.list-radio .survey-question-answer li,.list-with-comment .survey-question-answer li,.multiple-opt .survey-question-answer li,.multiple-opt-comments .survey-question-answer li,.multiple-short-txt .survey-question-answer li,.numeric-multi .survey-question-answer li,.yes-no li,.gender .survey-question-answer li { list-style-type: none; text-align: left; margin: 0 0 0.5em 0.5em; } .choice-5-pt-radio .survey-question-answer li,.list-radio-flexible .survey-question-answer li { margin-left: 2.5em;margin-right: 0; text-indent: -1.8em; } /* END: General list styles - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ /* STYLES NOT YET DEFINED - - - - - .boilerplate {} */ .choice-5-pt-radio .survey-question-answer ul,.yes-no .survey-question-answer ul,.gender .survey-question-answer ul { text-align: left; margin-left: 0.7em;margin-right:0; padding-left: 0;padding-right:0; } .choice-5-pt-radio .survey-question-answer ul li,.yes-no .survey-question-answer ul li,.gender .survey-question-answer ul li { display: inline; padding: 0 2em 0 0; margin-left: 0;margin-right: 0; } /* STYLES NOT YET DEFINED - - - - - .date {} */ .date p.question { margin-left: 1em;margin-right: 0; } .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;margin-right: 0; font-size: 80%; font-style: italic; line-height: 150%; } .numeric p.question { font-size: 80%; margin-left: 1em;margin-right: 0; } .numeric-multi p.tip.error,.numeric-multi input.tip.error { color: #f70; font-weight: bold; } .numeric-multi p.tip.good,.numeric-multi input.tip.good { color: #090; font-weight: bold; } /* DEFINED ABOVE UNDER "General list styles" - - - - - .list-radio-flexible .list-radio */ .list-radio .survey-question-answer li label, .list-with-comment .survey-question-answer li label { display: inline-block; width: 85%; } .list-radio .survey-question-answer li input, .list-with-comment .survey-question-answer li input { vertical-align: top !important; margin-top: 0; margin-top: -3px\9; /* IE9 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; } 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 0.5em; 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; } .list-with-comment p.select { width: 47%; float: left; padding: 0.5em; margin: 0; } .list-with-comment div.list p { margin: 0; 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%; } .ranking { } table.rank td.helptext { font-size: 10px; font-style: italic; text-align: left; } /* DEFINED ABOVE UNDER "General list styles" - - - - - .multiple-opt */ .multiple-opt .survey-question-answer li input, .multiple-opt-comments .survey-question-answer li .option input { vertical-align: top !important; margin-top: 0; margin-top: -3px\9; /* IE9 and below */ } .multiple-opt .survey-question-answer li label, .multiple-opt-comments .survey-question-answer li .option label { display: inline-block; width: 90%; } /* The following styles only apply to modern (relatively) complete CSS2 compliant browsers. (Not less than IE 8) */ .multiple-opt-comments td.answer,.multiple-short-txt td.answer,.numeric-multi td.answer { } .multiple-opt-comments ul,.multiple-short-txt ul,.numeric-multi ul { display: table; padding: 0; margin: 1em; } .numeric-multi ul { margin: 0 1em 1.5em 1em; } .numeric-multi ul.computed { float: left; padding-right: 2em;padding-left: 0; } .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 { padding: 0.5em 0 0.5em 0; display: table-cell; vertical-align: baseline; } .numeric-multi ul li label { padding: 0.3em 1em 0 0; display: table-cell; vertical-align: baseline; } .multiple-short-txt ul li label { padding: 0.3em 1em 0 0; display: table-cell; vertical-align: middle; } .numeric-multi ul.computed li label .numeric-multi ul.slider.computed li label { padding-right: 0;padding-left: 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; font-size: 80%; white-space: nowrap; } .multiple-opt-comments ul li span.comment { vertical-align: top; } .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; font-size: 125%; } .text-short input,.text-short textarea,.text-long textarea,.text-huge textarea { margin-left: 1em; } /* STYLES NOT YET DEFINED - - - - - .yes-no {} .gender {} */ #limesurvey table.question thead th,#limesurvey table.question .repeat th { text-align: center; vertical-align: bottom; font-weight: normal; } #limesurvey 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; } /* Jquery CSS */ /** UI Base **/ .ui-wrapper { border: 1px solid #50A029; } .ui-wrapper input,.ui-wrapper textarea { border: 0; } /** Progress bar **/ #progress-pre,#progress-post { color: #FFFFFF; } #progress-wrapper .ui-widget-content { background-color: #EDEDED; background-image: none; border: 1px solid #999999; } #progress-wrapper .ui-widget-header { background-color: #CCCCCC; border: 1px solid #999999; } /** UI Slider **/ .numeric-multi label.slider-label { display: table-cell; width: auto !important; padding: 0 1em 0.8em 0; margin-top: 1.3em; vertical-align: middle; } .multinum-slider .ui-state-default { background: none #17479E; border:1px solid #666666; } .multinum-slider .ui-widget-content { background: none #EDEDED; border:1px solid #666666; } .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: -18px; margin-left: -3px; font-family: 'Arial'; font-size: 9pt; color: #284a6e; font-weight: bold; text-align: left; } .slider_showmin { float: left; width: 50px; margin: 15px 0 0 0; font-family: Verdana, Geneva, 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, Geneva, 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; } #tokenform { margin-top: 1em; } #tokenform input { } #tokenform label { float: left; width: 20em; margin-right: 0.5em;margin-left: 0; text-align: right; } #tokenform li { padding-bottom: 5px; list-style: none; } #tokenform img { margin-bottom: -5px; margin-right: 5px;margin-left: 0; } p#tokenmessage { margin: 20px; } p#tokenmessage { margin: 20px; text-align: center; } div#wrapper { width: 600px; margin: 0 auto; } #tokenform input.submit { margin:1em 0 1em 18em; } #statsContainer { width: 80%; margin: 0 auto; background-color: #EDEDED; padding: 0px; min-width: 690px; border: 1px solid #ccc; } #statsHeader { color: #FFFFFF; text-align: left; padding: 10px 0px; height: 96px; background-color: #17479e; font-family: Verdana, Geneva, sans-serif; } .statsSurveyTitle { font-size: 1.3em; font-weight: bold; padding: 35px 0px 0px 0px; width: 100%; text-align: center; } .statsNumRecords { font-size: 1.1em; width: 100%; text-align: center; } table.statisticstable { width: 90%; border: 1px solid #ccc; text-align: left; background-color: #fff; margin: 0px auto; padding-bottom: 8px; } table.statisticstable td { padding-top: 4px; padding-bottom: 4px; border-bottom: 1px solid #CCC; } table.statisticstable img { margin: 10px auto; } div.fieldSummary { font-size: .9em; padding: 10px 10px 6px 0px; display: block; text-align: left; } div.questionTitle { font-size: 1.2em; padding: 20px 20px 20px 20px; font-weight: bold; background-color: #CCCCCC; } td.statsImageholder { background-color: #fff; } table.statisticstable strong { font-weight: bold; } /* Question Index */ .outerframe.withindex, .withindex .outerframe{ margin-left: 1em; margin-right: 26em; } .allinone .outerframe{ margin:0; } #index { position: absolute; right: 0; width: 25em; top: 0; overflow-y: scroll; overflow-x: hidden; height: 100%; background: #EDEDED; border-left: 1px solid #000; } #index h2 { color: #17479e; background: #FFF; margin: 0; } #index h3 { margin: 0.5em 0 0 0.5em; color: #17479e; } #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: #CCC; } #index .container .row.current { background: #17479e; 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; }