/* Notes: - A high level of rule specificity is (unfortunatly) necessary to eliminate conflicts in QA mode - Containers exist for most elements to make customization easier - Shorthand rules are not used as much as they could to keep customization docs easier */ body { /* CUSTOMIZABLE: background */ background-color: #E6E6E6; margin: 0; padding: 0; } p, h4, h3 { margin: 0 0 15px 0; } a, a:hover { color: #333; } sub { vertical-align: sub; font-size: .83em; } sup { vertical-align: super; font-size: .83em; } /* ================================================== (Survey Container) ===================================================*/ #survey { margin: 0 auto; /* CUSTOMIZABLE: font size */ font-size: 12px; /* CUSTOMIZABLE: font */ font-family: Arial, "MS Trebuchet", sans-serif; /* CUSTOMIZABLE: text color */ color: #454545; /* CUSTOMIZABLE: reduce or increase space above */ margin-top: 25px; } #survey ul, #survey ol { padding: 0 0 18px 2.3em } #survey dl { padding: 0 0 18px 1.0em } #survey li, #survey dd { padding-bottom: 7px } #survey dd { padding-left: 15px } #survey ul li { list-style-type: disc; } #survey ol li { list-style-type: decimal; } #survey a { /* CUSTOMIZABLE: link color */ /* color: #333; */ } #survey a:hover { /* CUSTOMIZABLE: link color on mouseover */ /* color: #333; */ } /* ============================================== (Primary Container Defaults) ============================================*/ #surveyHeader, #surveyContent, #surveyFooter { clear: both; padding: 10px;} #surveyContent .surveyError, #surveyContent .surveyInfo, #surveyContent .extra-approval, #surveyContent .surveyLogo, #surveyContent .surveyProgressBar, #surveyContent .comment, #surveyContent .surveyQuestion .question, #surveyContent .surveyQuestion .instructions, #surveyContent #surveyButtons { /* CUSTOMIZABLE: default widths for elements within "#surveyContent" */ /* DOES NOT APPLY TO ".answers" and it's children */ width: 760px; } /* Auto Width */ #surveyContent .surveyQuestion.customWidth .surveyError, #surveyContent .surveyQuestion.customWidth .question, #surveyContent .surveyQuestion.customWidth .instructions { width: auto; } #surveyContent .surveyQuestion .answers { /* CUSTOMIZABLE: min width of the answers container */ min-width: 759px; /* CUSTOMIZABLE: max width of the answers container */ max-width: 1100px; } /* Auto Width */ #surveyContent .surveyQuestion.customWidth .answers, #surveyContent .surveyQuestion.flexGrid .answers { min-width: 1px; } #surveyContent .surveyQuestion .answers table.grid { /* CUSTOMIZABLE: answer grid table width */ width: 100%; /* CUSTOMIZABLE: minimum answer grid table width */ min-width: 759px; } /* Auto Width */ #surveyContent .surveyQuestion.customWidth .answers table.grid, #surveyContent .surveyQuestion.flexGrid .answers table.grid { width: auto; min-width: 1px; } /* Set table width class -- ".setWidth" is added to table.grid dynamically via JS for questions with less that ten cols */ #surveyContent .surveyQuestion .answers table.grid.setWidth { /* CUSTOMIZABLE: set width for questions with less than ten cols */ width: 759px; } /* Auto Width */ #surveyContent .surveyQuestion.customWidth .answers table.grid.setWidth, #surveyContent .surveyQuestion.flexGrid .answers table.grid.setWidth { width: auto; } /* ==================================================== (Survey Header) =================================================== */ /* FUTURE USE: This container will allow client branding outside of actual survey content area (#surveyContent) */ #surveyHeader { /* CUSTOMIZABLE: background color */ background-color: transparent; /* CUSTOMIZABLE: reduce or increase space below */ margin-bottom: 10px; height: 0; padding: 0; /* temp overwrite until this container is used */ overflow: hidden; } /* =================================================== (Survey Content) =================================================== */ #surveyContent { /* CUSTOMIZABLE: background color */ background-color: white; /* CUSTOMIZABLE: shadow */ box-shadow: 0 0 15px #999; -moz-box-shadow: 0 0 15px #999; -webkit-box-shadow: 0 0 15px #999; /* CUSTOMIZABLE: border */ border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; /* CUSTOMIZABLE: reduce or increase space below (effects the space above surveyFooter) */ margin-bottom: 15px; /* CUSTOMIZABLE: top padding */ /* padding-top: 20px; */ /* CUSTOMIZABLE: bottom padding */ /* padding-bottom: 20px; */ /* Debug: uncomment the line below to highlight element */ /* background-color: yellow; */ } #surveyContent form { margin: 0; padding: 0; } /* =========================================== */ /* = Survey Completed Text and System Errors = */ /* =========================================== */ #surveyContent .surveyCompletedText, #surveyContent .surveyErrorText { width: 740px; padding: 10px; /* Min-height Hack for IE6 */ min-height: 300px; height: auto !important; height: 300px; } #surveyContent .surveyCompletedText h2, #surveyContent .surveyErrorText h2 { font-size: 16px; margin-bottom: 20px; } /* =============================================== (Survey Content > Error) ================================================*/ /* ** MULTI USE ** Error container for messages displayed at the top of the page AND within the question element See "#surveyContent .surveyQuestion .surveyError" to modify the style of messages displayed WITHIN a question */ /* Error Container */ #surveyContent .surveyError { /* CUSTOMIZABLE: reduce or increase space below */ margin-bottom: 35px; } #surveyContent .surveyError .error { /* CUSTOMIZABLE: background color */ background-color: #EDEDED; /* CUSTOMIZABLE: border */ border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; /* CUSTOMIZABLE: padding */ padding: 10px; } #surveyContent .surveyError .error p, #surveyContent .surveyError .error h3, #surveyContent .surveyError .error ul { /* CUSTOMIZABLE: text color */ color: #BA0000; /* CUSTOMIZABLE: text, (bold/normal) */ font-weight: bold; /* CUSTOMIZABLE: font size */ font-size: 14px; } #surveyContent .surveyError .error h3, #surveyContent .surveyError .error p.last { margin-bottom: 0; } /* ================================================ (Survey Content > Notice) ==============================================*/ /* The respondent has already taken the survey message This is also used in QA mode for: - page breaks - "show question attributes" - "show source code" - and other messages */ /* Notice Container */ #surveyContent .surveyInfo { /* CUSTOMIZABLE: reduce or increase space below */ margin-bottom: 35px; } #surveyContent .surveyInfo .info { /* CUSTOMIZABLE: background color */ background-color: #CF6; /* CUSTOMIZABLE: border */ border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; /* CUSTOMIZABLE: padding */ padding: 10px; } #surveyContent .surveyInfo .info blockquote, #surveyContent .surveyInfo .info p { /* CUSTOMIZABLE: text, (bold/normal) */ font-weight: bold; } #surveyContent .surveyInfo .info p { margin-bottom: 0; } /* Warning container */ #surveyContent .surveyWarning .info { background-color: pink; padding: 10px; font-weight: bold; } /* ================================================= (Survey Content > Logo) ===============================================*/ /* This element will not get written to the page if a logo is not selected in builder */ /* Logo Container */ #surveyContent .surveyLogo { /* CUSTOMIZABLE: background color to show behind logo */ /*background-color: black;*/ /* CUSTOMIZABLE: padding ABOVE the logo */ /*padding-top: 10px;*/ /* CUSTOMIZABLE: padding BELOW the logo */ /*padding-bottom: 10px;*/ /* CUSTOMIZABLE: reduce or increase space below the logo */ margin-bottom: 25px; text-align: center; width: 100%; /* Debug: uncomment the line below to highlight element */ /* background-color: yellow; */ } #surveyContent .surveyLogo img {} /* ============================================ (Survey Content > Progress Bar =============================================*/ /* Progress Bar Container */ #surveyContent .surveyProgressBar { /* CUSTOMIZABLE: reduce or increase space ABOVE the progress bar */ /* margin-top: 0;*/ /* CUSTOMIZABLE: reduce or increase space BELOW the progress bar */ margin-bottom: 25px; /* Debug: uncomment the line below to highlight element */ /* background-color: yellow; */ overflow: hidden; /*FF hack - involves forms and the first element having a child float */ } /* Progress Bar and Text Container (align left or right)*/ #surveyContent .surveyProgressBar .wrap { /* CUSTOMIZABLE: align the progress bar to the left or right of the page */ float: right; } /* Progress Bar and Text */ #surveyContent .surveyProgressBar .bar, #surveyContent .surveyProgressBar .text { float: left; } #surveyContent .surveyProgressBar .bar { width: 122px; /*FF hack - allows progressBar zooming */ width: -moz-fit-content; /* CUSTOMIZABLE: border */ border: 1px solid #FFF; border-radius: 1px; -moz-border-radius: 1px; -webkit-border-radius: 1px; /* CUSTOMIZABLE: drop shadow */ box-shadow: 0 0 5px #B3B3B3; -moz-box-shadow: 0 0 5px #B3B3B3; -webkit-box-shadow: 0 0 5px #B3B3B3; overflow: hidden; } #surveyContent .surveyProgressBar .text { /* CUSTOMIZABLE: Percent remaining text, font size */ font-size: 11px; /* CUSTOMIZABLE: Percent remaining text, text style */ font-style: italic; padding: 1px 5px; } #surveyContent .surveyProgressBar .bar .complete, #surveyContent .surveyProgressBar .bar .remaining { /* CUSTOMIZABLE: height of the progress bar */ height: 10px; float: left; overflow: hidden; padding-right: 10px; } #surveyContent .surveyProgressBar .bar .complete { /* CUSTOMIZABLE: color of the progress bar completed portion */ background-color: #999; /* CUSTOMIZABLE: border color of the progress bar completed portion */ border: 1px solid #808080; border-right: 0; } #surveyContent .surveyProgressBar .bar .remaining { /* CUSTOMIZABLE: color of the progress bar remaining portion */ background-color: white; /* CUSTOMIZABLE: border color of the progress bar remaining portion */ border: 1px solid #CCC; border-left: 0; } /* ============================================== (Survey Content > Comment) ===============================================*/ /* Comment Container */ #surveyContent .comment { /* CUSTOMIZABLE: font size */ font-size: 14px; /* CUSTOMIZABLE: reduce or increase space below */ margin-bottom: 35px; } #surveyContent .comment p, #surveyContent .comment h3 { /* CUSTOMIZABLE: font size */ font-size: 16px; /* CUSTOMIZABLE: font weight */ font-weight: bold; /* CUSTOMIZABLE: text letter spacing */ letter-spacing: -0.01em; /* CUSTOMIZABLE: text, space between lines */ line-height: 1.2em; } #surveyContent .comment h3, #surveyContent .comment p.last { margin-bottom: 0; } /* ======================================== (Survey Content > Dev Question Wrapper) ========================================*/ /* Dev Container Wrap - Used for questions with style="dev" */ #surveyContent .devContainer { padding: 10px; margin-bottom: 55px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; /* CUSTOMIZABLE: drop shadow */ box-shadow: 0 0 2px #B3B3B3; -moz-box-shadow: 0 0 2px #B3B3B3; -webkit-box-shadow: 0 0 2px #B3B3B3; position: relative; background-image: url('/s/survey/images/bkg_paper.png'); } #surveyContent .devContainer h3 { margin-bottom: 20px; font-size: 14px; } #surveyContent .devContainer .corner { position: absolute; width: 50px; height: 50px; right: -1px; bottom: -1px; background: white url('/s/survey/images/bkg_paper_corner.png') no-repeat; } /* ========================================== (Survey Content > Survey Question) ===========================================*/ /* Question Container */ #surveyContent .surveyQuestion { /* CUSTOMIZABLE: reduce or increase space between questions */ margin-bottom: 55px; clear: both; /* Debug: uncomment the line below to highlight element */ /* background-color: yellow; */ } /* Follow-Up Questions - Questions that should appear closer to the question above. */ #surveyContent .surveyQuestion.followUpQuestion { /* CUSTOMIZABLE: reduce or increase space between questions */ margin-top: -35px; } /* ====================================== (Survey Content > Survey Question > Error) =======================================*/ /* Survey Error Container */ #surveyContent .surveyQuestion .surveyError { /* CUSTOMIZABLE: font size */ font-size: 13px; /* CUSTOMIZABLE: reduce or increase space below the error message */ margin-bottom: 20px; } #surveyContent .surveyQuestion .surveyError .error { /* remove stying inherited from "#surveyContent .surveyError .error" */ border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; background-color: transparent; padding: 0; } /* =================================== (Survey Content > Survey Question > Question Text) ==================================*/ /* Survey Question Text Container */ #surveyContent .surveyQuestion .question { /* CUSTOMIZABLE: reduce or increase space below the question text */ margin-bottom: 20px; /* Debug: uncomment the line below to highlight element */ /* background-color: yellow; */ } /* Programmers have the option to hide the question text*/ #surveyContent .surveyQuestion.hideQuestionText .question { display: none; } /* Survey Question Text */ #surveyContent .surveyQuestion .question h2 { /* CUSTOMIZABLE: font size */ font-size: 16px; /* CUSTOMIZABLE: text letter spacing */ letter-spacing: -0.01em; /* CUSTOMIZABLE: text, space between lines */ line-height: 1.1em; /* CUSTOMIZABLE: text color */ /* color: red; */ margin-bottom: 0; } /* =================================== (Survey Content > Survey Question > Instructions) ===================================*/ /* Survey Question Instructions Container */ #surveyContent .surveyQuestion .instructions { /* CUSTOMIZABLE: reduce or increase space below the instruction text */ margin-bottom: 20px; /* Debug: uncomment the line below to highlight element */ /* background-color: yellow; */ } /* Programmers have the option to hide the respondent instruction text*/ #surveyContent .surveyQuestion.hideInstructionText .instructions { display: none; } #surveyContent .surveyQuestion .instructions p, #surveyContent .surveyQuestion .instructions h3 { /* CUSTOMIZABLE: font size */ font-size: 12px; /* CUSTOMIZABLE: text letter spacing */ letter-spacing: -0.01em; /* CUSTOMIZABLE: text, space between lines */ line-height: 1.4em; /* CUSTOMIZABLE: text color */ color: #4C4C4C; /* CUSTOMIZABLE: font weight */ font-weight: normal; } #surveyContent .surveyQuestion .instructions h3, #surveyContent .surveyQuestion .instructions p.last { margin-bottom: 0; } /* ===================================== (Survey Content > Survey Question > Answers) ======================================*/ /* Survey Question Answers Container */ #surveyContent .surveyQuestion .answers { /* Debug: uncomment the line below to highlight element */ /* background-color: yellow; */ } #surveyContent .surveyQuestion .answers table.grid {} #surveyContent .devContainer .surveyQuestion .answers table.grid { background-color: white; } #surveyContent .surveyQuestion .answers table.grid.styled th, #surveyContent .surveyQuestion .answers table.grid.styled td { /* CUSTOMIZABLE: table border cell border color */ border: 1px solid #CCC; padding: 3px; min-height: 18px; } /* Column legend (top and bottom) */ #surveyContent .surveyQuestion .answers table.grid.styled tr.legend th, #surveyContent .surveyQuestion .answers table.grid.styled tr.legend td { text-align: center; /* CUSTOMIZABLE: text alignment (top/bottom/middle) */ vertical-align: bottom; /* CUSTOMIZABLE: Column legend background color (top and bottom) */ background-color: #EFEFEF; /* CUSTOMIZABLE: Font Weight of table header cells */ font-weight: normal; } /* Column legend row (Duplicate Col Legends the appear between rows [colLegendRows]) */ #surveyContent .surveyQuestion .answers table.grid.styled tr.legend.colLegendRow th, #surveyContent .surveyQuestion .answers table.grid.styled tr.legend.colLegendRow td { /* CUSTOMIZABLE: text alignment (top/bottom/middle) */ vertical-align: middle; } /* Column legend (bottom legend only) */ #surveyContent .surveyQuestion .answers table.grid.styled tr.legend.bottom-legend th, #surveyContent .surveyQuestion .answers table.grid.styled tr.legend.bottom-legend td { /* CUSTOMIZABLE: text alignment (top/bottom/middle) */ vertical-align: top; } /* Column Groups */ #surveyContent .surveyQuestion .answers table.grid.styled tr.legend th.group-column-cell { /* CUSTOMIZABLE: Column legend background color (top and bottom) */ font-weight: bold; } /* Row Groups */ #surveyContent .surveyQuestion .answers table.grid.styled tr.rowGroup th { /* CUSTOMIZABLE: text alignment (left/right) */ text-align: left; } /* Column Legends (top and bottom) - EMPTY CELLS */ #surveyContent .surveyQuestion .answers table.grid.styled tr.legend th.empty, #surveyContent .surveyQuestion .answers table.grid.styled tr.legend td.empty { /* CUSTOMIZABLE: Show borders of empty cells */ border: none; /* CUSTOMIZABLE: Hide background color of empty cells */ background-color: transparent; } /* Row legends (left and right) */ #surveyContent .surveyQuestion .answers table.grid.styled td.legend-left, #surveyContent .surveyQuestion .answers table.grid.styled td.legend-right { /* CUSTOMIZABLE: Row legend background color (left and right) */ background-color: #EFEFEF; } /* Alternating row colors - odd rows */ #surveyContent .surveyQuestion .answers table.grid.styled tr.odd td, #surveyContent .surveyQuestion .answers table.grid.styled tr.odd td.legend-left, #surveyContent .surveyQuestion .answers table.grid.styled tr.odd td.legend-right { /* CUSTOMIZABLE: row background color */ /* background-color: green; */ } /* Alternating row colors - even rows */ #surveyContent .surveyQuestion .answers table.grid.styled tr.even td, #surveyContent .surveyQuestion .answers table.grid.styled tr.even td.legend-left, #surveyContent .surveyQuestion .answers table.grid.styled tr.even td.legend-right { /* CUSTOMIZABLE: row background color */ /* background-color: yellow; */ } /* Row Legend Left (text alignment when there are legends on both sides)*/ #surveyContent .surveyQuestion .answers table.grid.styled td.legend-left.legend-both { text-align: right; } #surveyContent .surveyQuestion .answers table.grid td.element { vertical-align: middle; text-align: center; } #surveyContent .surveyQuestion .answers table.grid.styled td.clickableCell:hover { /* CUSTOMIZABLE: background color of element on mouseover */ background-color: #DAE3EA; cursor: pointer; } #surveyContent .surveyQuestion .answers table.grid.styled td.hasfocus { /* CUSTOMIZABLE: background color on focus - class added by javascript */ background-color: #DAE3EA; } /* Error styling is ouput inline by questionElement.py */ #surveyContent .surveyQuestion .answers table.grid tr td.hasError { background-color: #FFF767 !important; } #surveyContent .surveyQuestion .answers table.grid tr.rowLegendErr td input { background-color: #FFF767; } #surveyContent .surveyQuestion .answers table.grid td input.text, #surveyContent .surveyQuestion .answers table.grid td select, #surveyContent .surveyQuestion .answers table.grid td textarea { font-size: 11px; margin: 0; padding: 0; } #surveyContent .surveyQuestion .answers table.grid td.legend-left input.text, #surveyContent .surveyQuestion .answers table.grid td.legend-right input.text { font-size: 10px; margin: 0 3px; padding: 0;} /* ===================== One Column ===================== */ /* Question column legends - questions WITH row legends */ #surveyContent .surveyQuestion .answers table.grid tr.legend.colCount-1 th.legend, #surveyContent .surveyQuestion .answers table.grid tr.colCount-1 td.element { width: 234px; } /* Auto Width */ #surveyContent .surveyQuestion.customWidth .answers table.grid tr.legend.colCount-1 th.legend, #surveyContent .surveyQuestion.flexGrid .answers table.grid tr.legend.colCount-1 th.legend, #surveyContent .surveyQuestion.customWidth .answers table.grid tr.colCount-1 td.element, #surveyContent .surveyQuestion.flexGrid .answers table.grid tr.colCount-1 td.element { width: auto; } /* Multicol AND clearColWidths (for when col widths are specified with inline CSS) - Set Auto Width */ #surveyContent .surveyQuestion .answers table.grid .multicol tr.colCount-1 td.element, #surveyContent .surveyQuestion.clearColWidths .answers table.grid tr.colCount-1 td.element { width: auto; } /* Question column legends - questions WITHOUT row legends */ #surveyContent .surveyQuestion.noRows .answers table.grid tr.colCount-1 td.element, #surveyContent .surveyQuestion.noRows .answers table.grid tr.legend.colCount-1 th.legend { width: 99%; text-align: left; } /* Auto Width */ #surveyContent .surveyQuestion.noRows.customWidth .answers table.grid tr.colCount-1 td.element, #surveyContent .surveyQuestion.noRows.flexGrid .answers table.grid tr.colCount-1 td.element, #surveyContent .surveyQuestion.noRows.customWidth .answers table.grid tr.legend.colCount-1 th.legend, #surveyContent .surveyQuestion.noRows.flexGrid .answers table.grid tr.legend.colCount-1 th.legend { width: auto; } /* ===================== Two to Four Columns ===================== */ /* Question column legends - questions WITH row legends */ #surveyContent .surveyQuestion .answers table.grid tr.legend.colCount-2 th.legend, #surveyContent .surveyQuestion .answers table.grid tr.legend.colCount-3 th.legend, #surveyContent .surveyQuestion .answers table.grid tr.legend.colCount-4 th.legend { width: 134px; } /* Auto Width */ #surveyContent .surveyQuestion.customWidth .answers table.grid tr.legend.colCount-2 th.legend, #surveyContent .surveyQuestion.flexGrid .answers table.grid tr.legend.colCount-2 th.legend, #surveyContent .surveyQuestion.customWidth .answers table.grid tr.legend.colCount-3 th.legend, #surveyContent .surveyQuestion.flexGrid .answers table.grid tr.legend.colCount-3 th.legend, #surveyContent .surveyQuestion.customWidth .answers table.grid tr.legend.colCount-4 th.legend, #surveyContent .surveyQuestion.flexGrid .answers table.grid tr.legend.colCount-4 th.legend { width: auto; } /* Question column legends - questions WITHOUT row legends */ #surveyContent .surveyQuestion.noRows .answers table.grid tr.legend.colCount-2 th.legend { width: 49%; } #surveyContent .surveyQuestion.noRows .answers table.grid tr.legend.colCount-3 th.legend { width: 33%; } #surveyContent .surveyQuestion.noRows .answers table.grid tr.legend.colCount-4 th.legend { width: 24%; } /* Auto Width */ #surveyContent .surveyQuestion.noRows.customWidth .answers table.grid tr.legend.colCount-2 th.legend, #surveyContent .surveyQuestion.noRows.flexGrid .answers table.grid tr.legend.colCount-2 th.legend, #surveyContent .surveyQuestion.noRows.customWidth .answers table.grid tr.legend.colCount-3 th.legend, #surveyContent .surveyQuestion.noRows.flexGrid .answers table.grid tr.legend.colCount-3 th.legend, #surveyContent .surveyQuestion.noRows.customWidth .answers table.grid tr.legend.colCount-4 th.legend, #surveyContent .surveyQuestion.noRows.flexGrid .answers table.grid tr.legend.colCount-4 th.legend { width: auto; } /* ===================== Five to Seven Columns ===================== */ /* Question column legends - questions WITH row legends */ #surveyContent .surveyQuestion .answers table.grid tr.legend.colCount-5 th.legend, #surveyContent .surveyQuestion .answers table.grid tr.legend.colCount-6 th.legend, #surveyContent .surveyQuestion .answers table.grid tr.legend.colCount-7 th.legend { width: 74px; } /* Auto Width */ #surveyContent .surveyQuestion.customWidth .answers table.grid tr.legend.colCount-5 th.legend, #surveyContent .surveyQuestion.flexGrid .answers table.grid tr.legend.colCount-5 th.legend, #surveyContent .surveyQuestion.customWidth .answers table.grid tr.legend.colCount-6 th.legend, #surveyContent .surveyQuestion.flexGrid .answers table.grid tr.legend.colCount-6 th.legend, #surveyContent .surveyQuestion.customWidth .answers table.grid tr.legend.colCount-7 th.legend, #surveyContent .surveyQuestion.flexGrid .answers table.grid tr.legend.colCount-7 th.legend { width: auto; } /* Question column legends - questions WITHOUT row legends */ #surveyContent .surveyQuestion.noRows .answers table.grid tr.legend.colCount-5 th.legend { width: 20%; } #surveyContent .surveyQuestion.noRows .answers table.grid tr.legend.colCount-6 th.legend { width: 16%; } #surveyContent .surveyQuestion.noRows .answers table.grid tr.legend.colCount-7 th.legend { width: 14%; } /* Auto Width */ #surveyContent .surveyQuestion.noRows.customWidth .answers table.grid tr.legend.colCount-5 th.legend, #surveyContent .surveyQuestion.noRows.flexGrid .answers table.grid tr.legend.colCount-5 th.legend, #surveyContent .surveyQuestion.noRows.customWidth .answers table.grid tr.legend.colCount-6 th.legend, #surveyContent .surveyQuestion.noRows.flexGrid .answers table.grid tr.legend.colCount-6 th.legend, #surveyContent .surveyQuestion.noRows.customWidth .answers table.grid tr.legend.colCount-7 th.legend, #surveyContent .surveyQuestion.noRows.flexGrid .answers table.grid tr.legend.colCount-7 th.legend { width: auto; } /* ===================== Eight to Ten Columns ===================== */ /* Question column legends - questions WITH row legends */ #surveyContent .surveyQuestion .answers table.grid tr.legend.colCount-8 th.legend, #surveyContent .surveyQuestion .answers table.grid tr.legend.colCount-9 th.legend { width: 64px; } #surveyContent .surveyQuestion .answers table.grid tr.legend.colCount-10 th.legend { width: 56px; } /* Auto Width */ #surveyContent .surveyQuestion.customWidth .answers table.grid tr.legend.colCount-8 th.legend, #surveyContent .surveyQuestion.flexGrid .answers table.grid tr.legend.colCount-8 th.legend, #surveyContent .surveyQuestion.customWidth .answers table.grid tr.legend.colCount-9 th.legend, #surveyContent .surveyQuestion.flexGrid .answers table.grid tr.legend.colCount-9 th.legend, #surveyContent .surveyQuestion.customWidth .answers table.grid tr.legend.colCount-10 th.legend, #surveyContent .surveyQuestion.flexGrid .answers table.grid tr.legend.colCount-10 th.legend { width: auto; } /* Question column legends - questions WITHOUT row legends */ #surveyContent .surveyQuestion.noRows .answers table.grid tr.legend.colCount-8 th.legend { width: 12%; } #surveyContent .surveyQuestion.noRows .answers table.grid tr.legend.colCount-9 th.legend { width: 11%; } #surveyContent .surveyQuestion.noRows .answers table.grid tr.legend.colCount-10 th.legend { width: 10%; } /* Auto Width */ #surveyContent .surveyQuestion.noRows.customWidth .answers table.grid tr.legend.colCount-8 th.legend, #surveyContent .surveyQuestion.noRows.flexGrid .answers table.grid tr.legend.colCount-8 th.legend, #surveyContent .surveyQuestion.noRows.customWidth .answers table.grid tr.legend.colCount-9 th.legend, #surveyContent .surveyQuestion.noRows.flexGrid .answers table.grid tr.legend.colCount-9 th.legend, #surveyContent .surveyQuestion.noRows.customWidth .answers table.grid tr.legend.colCount-10 th.legend, #surveyContent .surveyQuestion.noRows.flexGrid .answers table.grid tr.legend.colCount-10 th.legend { width: auto; } /* ===================== 11 Plus Columns ===================== */ /* add GT 10 column rules to element tr's */ #surveyContent .surveyQuestion .answers table.grid tr.legend.colCount-11 th.legend, #surveyContent .surveyQuestion .answers table.grid tr.legend.colCount-12 th.legend, #surveyContent .surveyQuestion .answers table.grid tr.legend.colCount-13 th.legend { width: 5%; } /* Auto Width */ #surveyContent .surveyQuestion.customWidth .answers table.grid tr.legend.colCount-11 th.legend, #surveyContent .surveyQuestion.flexGrid .answers table.grid tr.legend.colCount-11 th.legend, #surveyContent .surveyQuestion.customWidth .answers table.grid tr.legend.colCount-12 th.legend, #surveyContent .surveyQuestion.flexGrid .answers table.grid tr.legend.colCount-12 th.legend, #surveyContent .surveyQuestion.customWidth .answers table.grid tr.legend.colCount-13 th.legend, #surveyContent .surveyQuestion.flexGrid .answers table.grid tr.legend.colCount-13 th.legend { width: auto; } #surveyContent .surveyQuestion .answers table.grid tr.legend.colCount-14 th.legend, #surveyContent .surveyQuestion .answers table.grid tr.legend.colCount-15 th.legend { width: 4%; } /* Auto Width */ #surveyContent .surveyQuestion.customWidth .answers table.grid tr.legend.colCount-14 th.legend, #surveyContent .surveyQuestion.flexGrid .answers table.grid tr.legend.colCount-14 th.legend, #surveyContent .surveyQuestion.customWidth .answers table.grid tr.legend.colCount-15 th.legend, #surveyContent .surveyQuestion.flexGrid .answers table.grid tr.legend.colCount-15 th.legend { width: auto; } #surveyContent .surveyQuestion .answers table.grid tr.legend.colCount-16 th.legend, #surveyContent .surveyQuestion .answers table.grid tr.legend.colCount-17 th.legend, #surveyContent .surveyQuestion .answers table.grid tr.legend.colCount-18 th.legend { width: 3%; } /* Auto Width */ #surveyContent .surveyQuestion.customWidth .answers table.grid tr.legend.colCount-16 th.legend, #surveyContent .surveyQuestion.flexGrid .answers table.grid tr.legend.colCount-16 th.legend, #surveyContent .surveyQuestion.customWidth .answers table.grid tr.legend.colCount-17 th.legend, #surveyContent .surveyQuestion.flexGrid .answers table.grid tr.legend.colCount-17 th.legend, #surveyContent .surveyQuestion.customWidth .answers table.grid tr.legend.colCount-18 th.legend, #surveyContent .surveyQuestion.flexGrid .answers table.grid tr.legend.colCount-18 th.legend { width: auto; } #surveyContent .surveyQuestion .answers table.grid tr.legend.colCount-19 th.legend, #surveyContent .surveyQuestion .answers table.grid tr.legend.colCount-20 th.legend { width: 2%; } /* Auto Width */ #surveyContent .surveyQuestion.customWidth .answers table.grid tr.legend.colCount-19 th.legend, #surveyContent .surveyQuestion.flexGrid .answers table.grid tr.legend.colCount-19 th.legend, #surveyContent .surveyQuestion.customWidth .answers table.grid tr.legend.colCount-20 th.legend, #surveyContent .surveyQuestion.flexGrid .answers table.grid tr.legend.colCount-20 th.legend { width: auto; } #surveyContent .surveyQuestion .answers table.grid tr.colCount-11 td.row-legend, #surveyContent .surveyQuestion .answers table.grid tr.colCount-12 td.row-legend, #surveyContent .surveyQuestion .answers table.grid tr.colCount-13 td.row-legend { width: 12%; } /* Auto Width */ #surveyContent .surveyQuestion.customWidth .answers table.grid tr.colCount-11 td.row-legend, #surveyContent .surveyQuestion.flexGrid .answers table.grid tr.colCount-11 td.row-legend, #surveyContent .surveyQuestion.customWidth .answers table.grid tr.colCount-12 td.row-legend, #surveyContent .surveyQuestion.flexGrid .answers table.grid tr.colCount-12 td.row-legend, #surveyContent .surveyQuestion.customWidth .answers table.grid tr.colCount-13 td.row-legend, #surveyContent .surveyQuestion.flexGrid .answers table.grid tr.colCount-13 td.row-legend { width: auto; } #surveyContent .surveyQuestion .answers table.grid tr.colCount-14 td.row-legend, #surveyContent .surveyQuestion .answers table.grid tr.colCount-15 td.row-legend { width: 10%; } /* Auto Width */ #surveyContent .surveyQuestion.customWidth .answers table.grid tr.colCount-14 td.row-legend, #surveyContent .surveyQuestion.flexGrid .answers table.grid tr.colCount-14 td.row-legend, #surveyContent .surveyQuestion.customWidth .answers table.grid tr.colCount-15 td.row-legend, #surveyContent .surveyQuestion.flexGrid .answers table.grid tr.colCount-15 td.row-legend { width: auto; } #surveyContent .surveyQuestion .answers table.grid tr.colCount-16 td.row-legend, #surveyContent .surveyQuestion .answers table.grid tr.colCount-17 td.row-legend, #surveyContent .surveyQuestion .answers table.grid tr.colCount-18 td.row-legend { width: 8%; } /* Auto Width */ #surveyContent .surveyQuestion.customWidth .answers table.grid tr.colCount-16 td.row-legend, #surveyContent .surveyQuestion.flexGrid .answers table.grid tr.colCount-16 td.row-legend, #surveyContent .surveyQuestion.customWidth .answers table.grid tr.colCount-17 td.row-legend, #surveyContent .surveyQuestion.flexGrid .answers table.grid tr.colCount-17 td.row-legend, #surveyContent .surveyQuestion.customWidth .answers table.grid tr.colCount-18 td.row-legend, #surveyContent .surveyQuestion.flexGrid .answers table.grid tr.colCount-18 td.row-legend { width: auto; } #surveyContent .surveyQuestion .answers table.grid tr.colCount-19 td.row-legend, #surveyContent .surveyQuestion .answers table.grid tr.colCount-20 td.row-legend { width: 6%; } /* Auto Width */ #surveyContent .surveyQuestion.customWidth .answers table.grid tr.colCount-19 td.row-legend, #surveyContent .surveyQuestion.flexGrid .answers table.grid tr.colCount-19 td.row-legend, #surveyContent .surveyQuestion.customWidth .answers table.grid tr.colCount-20 td.row-legend, #surveyContent .surveyQuestion.flexGrid .answers table.grid tr.colCount-20 td.row-legend { width: auto ; } /* =============================================== (Survey Content > Buttons) ==============================================*/ /* Survey Buttons Container */ #surveyContent #surveyButtons { /* CUSTOMIZABLE: reduce/increase space above the buttons */ margin-top: -10px; /* CUSTOMIZABLE: reduce/increase space below the buttons */ padding-bottom: 20px; } /* Default Buttons WITHOUT styling (do not add styling to this rule -- use the "styled class below")*/ #surveyContent #surveyButtons input.btn { /* CUSTOMIZABLE: button alignment (left or right) */ float: right; /* CUSTOMIZABLE: button text size */ font-size: 14px; margin: 0 5px; cursor: pointer; } /* Styled Buttons */ #surveyContent #surveyButtons.styled input.btn { /* CUSTOMIZABLE: background color of the button */ background-color: #696A69; /* CUSTOMIZABLE: border color of the button */ border: 1px solid #666; /* CUSTOMIZABLE: button text color */ color: white; /* CUSTOMIZABLE: button text size */ font-size: 14px; /* CUSTOMIZABLE: button text style */ font-style: italic; /* CUSTOMIZABLE: button drop shadow */ box-shadow: 1px 1px 2px #7F7F7F; -moz-box-shadow: 1px 1px 2px #7F7F7F; -webkit-box-shadow: 1px 1px 2px #7F7F7F; padding: 2px 8px; } /* Styled Buttons - hover */ #surveyContent #surveyButtons.styled input.btn:hover { /* CUSTOMIZABLE: background color of the button on mouseover */ background-color: #555655; } /* Styled Buttons - Disabled */ #surveyContent #surveyButtons.styled input.btn[disabled], #surveyContent #surveyButtons.styled input.btn.disabled, #surveyContent #surveyButtons.styled input.btn[disabled], #surveyContent #surveyButtons.styled input.btn.disabled:hover { /* CUSTOMIZABLE: background color of the disabled button */ background-color: #B3B3B3; cursor: default; border-color: transparent; } /* ==================================================== (Survey Footer) =================================================== */ #surveyFooter { /* CUSTOMIZABLE: background color */ /*background-color: red;*/ /* CUSTOMIZABLE: reduce/increase space below the footer */ margin-bottom: 15px; /* CUSTOMIZABLE: padding */ /*padding: 10px;*/ /* CUSTOMIZABLE: text alignment */ text-align: center; /* CUSTOMIZABLE: font */ /*font-family: Arial, "MS Trebuchet", sans-serif;*/ /* CUSTOMIZABLE: text size */ font-size: 11px; /* CUSTOMIZABLE: font color */ /* color: blue; */ /* Debug: uncomment the line below to highlight element */ /* background-color: yellow; */ } #surveyFooter .footer {} #surveyFooter a { /* CUSTOMIZABLE: font color*/ /* color: blue; */ } #surveyFooter a:hover { /* CUSTOMIZABLE: font color*/ /* color: blue; */ } /* ==================================================== (special styles) ================================================== */ /* Show inline content on mouseover (formerly referred to as "dfn") */ #surveyContent a.show_inlineContent { position: relative; } #surveyContent a.show_inlineContent span.content { position: absolute; background-color: #EFEFEF; border: 1px solid; cursor: default; display: none; left: 1.5em; padding: 0.5em; text-align: left; top: 1.5em; } #surveyContent a.show_inlineContent:hover span.content { display: block; z-index: 1; } .ui-effects-transfer { border: 2px dotted gray; } /* ========================================================= (hacks) ====================================================== */ .clearfix:after, .group:after { content: ""; display: block; height: 0; clear: both; visibility: hidden } *:first-child+html .clearfix, *:first-child+html .group { zoom: 1; } /* IE7 */ /* ================================================ (CMSXXX qa mode transplant) =========================================== */ table.grid span.qaCode, table.grid sup.qaCode span { display: inline-block; background-color: #3581C8; border: 0px solid blue; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; padding: 1px 4px; color: white; font-size: 11px; font-weight: bold; margin: 2px 0; } #survey .qaInfo { background: transparent url('/i/bg_qa_info.png') bottom left no-repeat; float: left; margin: 0; padding: 0 0 7px 0; } #survey .qaInfo dl { background: #A4DDF4 url('/i/bg_qa_info_list.png') bottom left repeat-x; border: 1px solid #D5D4D4; border-bottom: none; -moz-border-radius-topright: 10px; -webkit-border-top-right-radius: 10px; -moz-box-shadow: 2px 2px 5px rgba(0,0,0,.1); -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,.1); display: inline; float: left; margin: 0; padding: 0; } #survey .qaInfo dt, #survey .qaInfo dd { color: #333; float: left; margin: 0; min-height: 17px; padding: 2px 4px; text-shadow: 0 1px 0 #fff; vertical-align: text-bottom; font-size: 12px; } #survey .qaInfo dt { border-right: 1px solid #C0C0C1; font-weight: bold; } #survey .qaInfo dd { border-left: 1px solid #fff; border-right: 1px solid #BABBBB; } #survey .qaInfo dd sup.qaCode { padding: 1px 5px 0 0; float: left; } #survey .qaInfo dd:last-child { border-right: none; } /* per 7240 */ div.label_extra div.instructions { display: none; } /* =================================================== (quotas) ============================================================ */ .cms-quota-header {} .quota-cell-list, .quota-table-list { margin-bottom: 15px; padding-top: 8px; padding-bottom: 8px; background-color: #FFFFAC; } .quota-cell-list ul { margin-bottom: 0 !important; } /* overide custom jQuery UI rules */ .quota-cell-list li.nobullet { margin-left: -1.5em; list-style-type: none !important; } /* overide custom jQuery UI rules */ .text-red { color: #F00; }