body { font-size: 8pt; font-family: verdana; background-color: #c0c0c0; } .answertextright { text-align: left; } .questionhelp { font-size: 10px; font-style: italic; } .questiontext { font-family: verdana; font-size: 12px; font-weight: bold; } td.survey-question-help { text-align: center; background-color: #e5e5e5 } .warning { display:block; } .error,.errormandatory,.warningjs { color: red; } .errormandatory,.warningjs { font-size: 12px; font-weight: 700; } .asterisk {display:none} .mandatory .asterisk {display:inline;} .asterisk { color: red; font-size: 9pt; font-family: verdana; padding-right:1em; } span.qnumcode { font-style:italic; } .showqnumcode-X .qnumcode { display:none; } #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 #042455; } .hide { font-weight: normal; position: absolute; top: -9999px; left: -9999px; } #progress-graph div.zero { width: 2.6em; margin-right: 0%; } #progress-graph div.graph { width: 10em; height: 1.5em; border: 1px solid #042455; margin-top: -1.7em; margin-left: 2.6em; margin-right: 0%; } #progress-graph div.cent { width: 3em; margin-top: -1.5em; margin-left: 13.3em; 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; } .surveytitle:hover { background-color: #F0F0F0; } .welcome-table td.welcome-language-changer { text-align: center; padding: 0; } .welcome-table td.welcome-language-changer select { margin: 3px 0; } .languagechanger { font-size: 1em; } .submit,.text,.textarea,.clearall,.saveall { background-color: #EDEDED; color: #042455; font-size: 10pt; font-family: verdana; } table.question { width: 100%; } .innergraph { } .innergraph,.question { font-family: verdana; font-size: 10pt; } table.question tr.array1:hover,table.question tr.array2:hover { background-color: #A7A9D1; } .outer-frame { width: 75%; margin: 0 auto; border-collapse: collapse; border: 1px solid #333333; background-color: #EDEDED; } .welcome-table { margin: 0 auto; width: 100%; border: 1px solid #111111; border-collapse: collapse; } .welcome-table td { padding: 25px; } .welcome-header { text-align: center; background-color: #042455; } h2.survey-name { font-size: 110%; color: #E5E5E5; font-weight: bold; margin: 0; } .survey-description-text { font-size: 90%; color: #CCCCCC; } .welcome-content { font-size: 90%; text-align: center; background-color: #E5E5E5; } td.welcome-content { text-align: center; } .survey-welcome { } .x-questions { font-style: italic; } .privacy { margin: 0 auto; width: 75%; background-color: #EEEEEE; } .privacy td { text-align: center; font-size: 100%; padding: 20px 0; } .navigator-table { width:100%; background-color: #042455; border-collapse: collapse; } .navigator-table td { text-align: center; padding-top: 3px; } .navigator-table input { margin-bottom: 3px; } .survey-header-table { width: 100%; margin: 0 auto; border: 1px solid #042455; border-collapse: collapse; } .survey-header-table td { border: 1px solid #042455; border-collapse: collapse; margin: 0; } .survey-description { text-align: center; background-color: #042455; padding: 25px; } td.graph { background-color: #999999; padding: 0.2em 0; } .language-changer-table { width: 100%; margin: 3px auto 3px auto; border: 0 none; border-collapse: collapse; } table.group { width: 98%; margin: 0 auto 6px auto; border: 0 none; border-collapse: collapse; } .group-name { font-family: verdana, arial, helvetica, sans-serif; font-size: 120%; font-weight: bold; color: #000080; } .group-description { font-family: verdana, arial, helvetica, sans-serif; } .question-wrapper { width: 75%; margin: 0 auto 15px auto; border: 1px solid #111111; border-collapse: collapse; background-color: #FFFFFF; } .question-text { font-size: 120%; font-weight: bold; text-align: center; background-color: #CCCCCC; } .assessment-table { margin: 0 auto; width: 75%; border-collapse: collapse; border: 1px solid #111111; } .assessment-heading { background-color:#CCCCCC; text-align: center; font-size: 90%; font-weight: bold; border-bottom: 1px solid #111111; } .assessments-container { } .completed-table { margin: 0 auto; width: 75%; border-collapse: collapse; border: 1px solid #111111; background-color: #FFFFFF; } .completed-text { text-align: center; font-size: 90%; padding-top: 5px; } table.clearall-result { margin: 0 auto; } table.clearall-result td { background-color: #FFFFFF; font-family: arial, helvetica, sans-serif; text-align: center; padding: 10px 20px; border-collapse: collapse; border: 1px solid #111111; } .warning-text { color:#FF0000; font-weight: bold; } .register-table { text-align: center; } .register-message-1 { font-weight: bold; } .register-message-2 { } .register-form { margin-bottom: 10px; } .register-form table.register { margin: 0 auto 0 auto; } .load-survey, .save-survey { text-align: center; padding: 10px 0; } .load-heading, .save-heading { font-size: 120%; font-weight: bold; } .load-message { } .load-form table, .save-form table { margin: 0 auto 0 auto; } .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 { text-align: center; } .survey-list-table .site-name h1 { font-family: verdana, arial helvetica, sans-serif; font-size: 160%; color: #328639; font-weight: bold; } .survey-list-table .survey-list-heading { font-weight: bold; } .survey-list-table .survey-list { } .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: 10px 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 .question-answer ul,.list-radio-flexible .question-answer ul,.list-radio .question-answer ul,.list-with-comment .question-answer ul { margin-left: 0.75em; padding-left: 0%; } .multiple-opt .question-answer ul,.multiple-opt-comments .question-answer ul,.multiple-short-txt .question-answer ul,.numeric-multi .question-answer ul,.yes-no .question-answer ul,.gender .question-answer ul { margin-left: 0%; padding-left: 0%; } .choice-5-pt-radio .question-answer li,.list-radio-flexible .question-answer li,.list-radio .question-answer li,.list-with-comment .question-answer li,.multiple-opt .question-answer li,.multiple-opt-comments .question-answer li,.multiple-short-txt .question-answer li,.numeric-multi .question-answer li,.yes-no .question-answer li,.gender .question-answer li { list-style-type: none; text-align: left; margin: 0% 0% 0.5em 0.5em; } .choice-5-pt-radio .question-answer li,.list-radio-flexible .question-answer li,.yes-no .question-answer li,.gender .question-answer li { margin-left: 2em; text-indent: -2.2em; } /* END: General list styles - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ /* STYLES NOT YET DEFINED - - - - - .boilerplate {} */ .choice-5-pt-radio .question-answer ul,.yes-no .question-answer ul,.gender .question-answer ul { text-align: left; margin: 0 auto; padding: 0 0.5em; } .choice-5-pt-radio .question-answer ul li,.yes-no .question-answer ul li,.gender .question-answer ul li { display: inline; margin-left: 0; padding: 0 2em 0 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: 0.5em 0.5em 0% 1em; font-size: 80%; } .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; } .numeric-multi ul li span,#limesurvey .multiple-short-txt ul li span { font-size: 80%; /* font-style: italic;*/ } /* DEFINED ABOVE UNDER "General list styles" - - - - - .list-radio-flexible .list-radio */ .list-radio .question-answer li label, .list-with-comment .question-answer li label { display: inline-block; width: 85%; } .list-radio .question-answer li.other label, .list-with-comment .question-answer li.other label { display: inline; width: auto; } .list-radio .question-answer li input, .list-with-comment .question-answer li input { vertical-align: top !important; margin-top: 1px; 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 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%; } #limesurvey .list-dropdown p.question,#limesurvey .list-dropdown-flexible p.question { margin-left: 1em; text-align: left; } /* 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 { margin: 0% 1em; } table.rank td.helptext { font-size: 10px; font-style: italic; padding: 5px; } /* DEFINED ABOVE UNDER "General list styles" - - - - - .multiple-opt */ .multiple-opt .question-answer li input, .multiple-opt-comments .question-answer li .option input { vertical-align: top !important; margin-top: 1px; margin-top: -3px\9; /* IE9 and below */ } .multiple-opt .question-answer li label, .multiple-opt-comments .question-answer li .option label { display: inline-block; width: 90%; } .multiple-opt .question-answer li.other label, .multiple-opt-comments .question-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 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: 0.5em 0.5em 0.5em 0.7em; } .numeric-multi ul { margin: 0 1em 1.5em 1em; } .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 { padding: 0 0 0.5em 0.5em; 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: middle; } .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; 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; } .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; } /* 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 { background-color: #EDEDED; background-image: none; } #progress-wrapper .ui-widget-header { background-color: #CCCCCC; } /** UI Slider **/ .numeric-multi label.slider-label { display: table-cell; width: auto !important; padding: 0 1em 0.7em 0; margin-top: 1.4em; vertical-align: middle; } .multinum-slider .ui-state-default { background: none #042455; 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: -17px; 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; font-size: 0.7em; font-weight: normal; text-align: left; } .slider_showmax { float: right; width: 50px; margin: 15px 0 0 0; font-family: Verdana; 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; 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; } #statsContainer { width: 80%; margin: 8px auto; background-color: #eeeeee; padding: 0px; min-width: 690px; border: 1px solid #000000; } #statsHeader { color: #FFF; background-color: #042455; text-align: center; padding: 10px 0px; height: 96px; } .statsSurveyTitle { font-size: 1.5em; font-weight: bold; padding: 24px 0px 0px 0px; width: 100%; text-align: center; font-family: Verdana, Arial, Helvetica, sans-serif; } .statsNumRecords { font-size: 1.2em; clear: right; float: right; width: 100%; text-align: center; font-family: Verdana, Arial, Helvetica, sans-serif; color: #CCCCCC; padding-top: 10px; } table.statisticstable { width: 90%; text-align: left; margin: 0px auto; padding-bottom: 8px; font-family: Verdana, Arial, Helvetica, sans-serif; border: 1px solid #999; background-color: #EFEFEF; } table.statisticstable td { padding-top: 4px; padding-bottom: 4px; border-bottom: 1px solid #CCCCCC; font-size: 12px; } table.statisticstable img { margin: 12px auto; } table.statisticstable strong { font-weight: bold; } div.fieldSummary { font-size: .9em; padding: 0px 0px 0px 6px; text-align: left; } div.questionTitle { font-size: 1.0em; padding: 20px 20px 20px 20px; font-weight: bold; background-color: #CCCCCC; line-height: 1.5em; } td.statsImageholder { background-color: #FFF; } #statsContainer { width: 80%; margin: 8px auto; background-color: #eeeeee; padding: 0px; min-width: 690px; border: 1px solid #000000; } #statsHeader { color: #FFF; background-color: #042455; text-align: center; padding: 10px 0px; height: 96px; } .statsSurveyTitle { font-size: 1.5em; font-weight: bold; padding: 24px 0px 0px 0px; width: 100%; text-align: center; font-family: Verdana, Arial, Helvetica, sans-serif; } .statsNumRecords { font-size: 1.2em; clear: right; float: right; width: 100%; text-align: center; font-family: Verdana, Arial, Helvetica, sans-serif; color: #CCCCCC; padding-top: 10px; } table.statisticstable { width: 90%; text-align: left; margin: 0px auto; padding-bottom: 8px; font-family: Verdana, Arial, Helvetica, sans-serif; border: 1px solid #999; background-color: #EFEFEF; } table.statisticstable td { padding-top: 4px; padding-bottom: 4px; border-bottom: 1px solid #CCCCCC; font-size: 12px; } table.statisticstable img { margin: 12px auto; } table.statisticstable strong { font-weight: bold; } div.fieldSummary { font-size: .9em; padding: 0px 0px 0px 6px; text-align: left; } div.questionTitle { font-size: 1.0em; padding: 20px 20px 20px 20px; font-weight: bold; background-color: #CCCCCC; line-height: 1.5em; } td.statsImageholder { background-color: #FFF; } /* 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: #E5E5E5; border-left: 1px solid #000; } #index h2 { margin-top: 0; text-align: center; font-weight: bold; color: #FFF; background: #042455; font-family: verdana; font-size: 8pt; } #index h3 { margin: 0.5em 0 0 0.5em; color: #000080; font-family: Verdana; font-size: 120%; } #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: #000; 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; }