/*
    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 {

    margin: 0;
    padding: 0;
    }

.survey-page {

    /* CUSTOMIZABLE: background */
    background-color: #E6E6E6;
    }

.survey-page * {

    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent;
    }

/* br that tinymce might add */
br[_mce_bogus] { display: none; }

p, h4, h3, h2 { margin: 0 0 15px 0; }

a, a:hover { color: #333; }

sub { vertical-align: sub; font-size: .83em; }
sup { vertical-align: super; font-size: .83em; }

ul,
ol { padding: 0 0 0 2.3em; margin-bottom: 15px; }

ul li,
ol li { padding-bottom: 7px; }

ul li { list-style-type: disc; }
ol li { list-style-type: decimal; }

ul.list li:last-child,
ol.list li:last-child { padding-bottom: 0; }

dl { padding: 0 0 18px 1.0em }
dl dd { padding-bottom: 7px; padding-left: 2.3em }

.hidden { display: none; }


/* ================================================== (Survey Container) ===================================================*/


#survey {

    margin: 0 auto;

    display: table;

    /* 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: 15px;
    }

#survey a {

    /* CUSTOMIZABLE: link color */
    /* color: #333; */
    }

#survey a:hover {

    /* CUSTOMIZABLE: link color on mouseover */
    /* color: #333; */
    }


/* ============================================== (Primary Container Defaults) ============================================*/


.survey-header,
.survey-page-content,
.survey-footer { clear: both; padding: 15px; }

.survey-info,
.survey-extra-approval,
.survey-logo,
.survey-error,
.survey-progress,
.survey-complete,
.survey-comment,
.survey-q-question,
.survey-q-instructions,
.survey-buttons {

    /* CUSTOMIZABLE: default widths for elements within ".survey-page-content" */
    /* DOES NOT APPLY TO ".answers" and it's children */
    width: 880px;
    }

    /* Auto Width */
    .customWidth .survey-q-error,
    .customWidth .survey-q-question,
    .customWidth .survey-q-instructions { width: auto; }

.survey-q-answers {

    /* CUSTOMIZABLE: min width of the answers container */
/*    min-width: 899px;*/

    /* CUSTOMIZABLE: max width of the answers container */
/*    max-width: 1100px;*/
    }

    /* Auto Width */
    .customWidth .survey-q-answers,
    .flexGrid .survey-q-answers { min-width: 1px; }

.survey-q-grid {

    /* CUSTOMIZABLE: answer grid table width */
    width: 100%;
    }

    /* Auto Width */
    .customWidth .survey-q-grid,
    .flexGrid .survey-q-grid { width: auto; }

/* Set table width class -- ".setWidth" is added to table.grid dynamically via JS for questions with less that ten cols */
.survey-q-grid.setWidth {

    /* CUSTOMIZABLE: set width for questions with less than ten cols */
    width: 879px;
    }

    /* Auto Width */
    .customWidth .survey-q-grid.setWidth,
    .flexGrid .survey-q-grid.setWidth { width: auto; }


/* no explicit cols or rows*/
.noRows.noCols .survey-q-grid,
.noRows.noCols .survey-q-grid.setWidth { width: auto; }


/* ==================================================== (Survey Header) =================================================== */


/*
    FUTURE USE:
    This container will allow client branding outside of actual survey content area (.survey-page-content)
*/

.survey-header {

    /* 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) =================================================== */


.survey-page-content {

    /* CUSTOMIZABLE: background color */
    background-color: white;

    /* CUSTOMIZABLE: shadow */
    -moz-box-shadow: 0 0 15px 0 #999;
    -webkit-box-shadow: 0 0 15px 0 #999;
    box-shadow: 0 0 15px 0 #999;

    /* CUSTOMIZABLE: border */
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;

    margin: 0 10px 15px 10px;

    /* CUSTOMIZABLE: reduce or increase space below (effects the space above .survey-footer) */
    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; */

    height: auto !important;
    min-height: 200px;
    }

.survey-page-content form { margin: 0; padding: 0; }


/* ============================================ (Survey Content > Page Errors) =============================================*/


/*
    Error container for messages displayed at the top of the page
    See ".survey-q-error" to modify the style of messages displayed WITHIN a question
*/


/* Error Container */
.survey-page-error {

    /* CUSTOMIZABLE: reduce or increase space below */
    margin-bottom: 35px;

    }

/* Error Wrapper (fancy box with background color) */
.survey-page-error .error {

    /* CUSTOMIZABLE: background color */
    background-color: #EDEDED;

    /* CUSTOMIZABLE: border */
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;

    /* CUSTOMIZABLE: padding */
    padding: 10px;

    }

/* Error Text */
.survey-page-error-text,
.survey-page-error-text,
.survey-page-error-text {

    /* CUSTOMIZABLE: text color */
    color: #BA0000;

    /* CUSTOMIZABLE: text, (bold/normal) */
    font-weight: bold;

    /* CUSTOMIZABLE: font size */
    font-size: 14px;

    margin-bottom: 0;
    }


/* ============================================ (Survey Content > Extra Info) ==============================================*/


/*
    The respondent has already taken the survey message, and ..

    This is also used in QA mode for:

        - page breaks
        - "show question attributes"
        - "show source code"
        - and other messages
*/


/* Extra Info Container */
.survey-page-content .surveyInfo {

    /* CUSTOMIZABLE: reduce or increase space below */
    margin-bottom: 35px;
    }

.survey-page-content .surveyInfo .info {

    /* CUSTOMIZABLE: background color */
    background-color: #CF6;

    /* CUSTOMIZABLE: border */
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;

    /* CUSTOMIZABLE: padding */
    padding: 10px;
    }

.survey-page-content .surveyInfo .info blockquote,
.survey-page-content .surveyInfo .info p {

    /* CUSTOMIZABLE: text, (bold/normal) */
    font-weight: bold;
    }

.survey-page-content .surveyInfo .info p { margin-bottom: 0; }

/* Warning container */
.survey-page-content .surveyWarning .info {

    background-color: #FFC0CB;
    padding: 10px;
    font-weight: bold;
    }

/* Autosave Restart Message */
.autosave-restart {
    background: #409bbc;
    background: -moz-linear-gradient(top,  #409bbc 0%, #3a87ad 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#409bbc), color-stop(100%,#3a87ad));
    background: -webkit-linear-gradient(top,  #409bbc 0%,#3a87ad 100%);
    background: -o-linear-gradient(top,  #409bbc 0%,#3a87ad 100%);
    background: -ms-linear-gradient(top,  #409bbc 0%,#3a87ad 100%);
    background: linear-gradient(to bottom,  #409bbc 0%,#3a87ad 100%);
    border: 1px solid #3670A0;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    color: #fff;
    display: block;
    margin-bottom: 10px;
    padding: 10px;
    text-align: center;
    text-decoration: none;
    }

.autosave-restart:hover {
    background: #3a87ad;
    color: #fff;
    }

/* ================================================= (Survey Content > Logo) ===============================================*/


/*
    This element will not get written to the page if a logo is not selected in builder
*/

/* Logo Container */
.survey-logo {

    /* 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;

    /* Debug: uncomment the line below to highlight element */
    /* background-color: yellow; */
    }

/* Logo Image */
.survey-logo-image {}


/* ============================================ (Survey Content > Progress Bar =============================================*/


/* Progress Bar Container */
.survey-progress {

    /* 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)*/
.survey-progress-align {

    /* CUSTOMIZABLE: align the progress bar to the left or right of the page */
    float: right;
    }

/* Progress Bar and Text */
.survey-progress .bar,
.survey-progress-text { float: left; }

.survey-progress .bar {

    width: 122px;

    /*FF hack - allows progressBar zooming */
    width: -moz-fit-content;

    overflow: hidden;
    }

.survey-progress-bar-borders {

    /* CUSTOMIZABLE: border */
    border: 1px solid #FFF;

    -moz-border-radius: 1px;
    -webkit-border-radius: 1px;
    border-radius: 1px;

    /* CUSTOMIZABLE: drop shadow */
    -moz-box-shadow: 0 0 5px #B3B3B3;
    -webkit-box-shadow: 0 0 5px #B3B3B3;
    box-shadow: 0 0 5px #B3B3B3;
    }

.survey-progress-text {

    /* CUSTOMIZABLE: Percent remaining text, font size */
    font-size: 11px;

    /* CUSTOMIZABLE: Percent remaining text, text style */
    font-style: italic;

    padding: 1px 5px;
    }

.survey-progress-bar {

    /* CUSTOMIZABLE: height of the progress bar */
    height: 10px;
    }

.survey-progress-bar-completed,
.survey-progress-bar-remaining {

    float: left;
    overflow: hidden;
    padding-right: 10px;
    }

.survey-progress-bar-completed {

    /* 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;
    }

.survey-progress-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 */
.survey-comment {

    /* CUSTOMIZABLE: reduce or increase space below */
    margin-bottom: 25px;
    padding: 15px;
    }

.survey-comment-text {

    /* CUSTOMIZABLE: font size */
    font-size: 16px;

    /* CUSTOMIZABLE: font weight */
    font-weight: bold;

    /* CUSTOMIZABLE: text, space between lines */
    line-height: 1.2em;

    margin-bottom: 0;
    }


/* ========================================== (Survey Content > Survey Question) ===========================================*/


/* Question Container */
.survey-q {

    /* CUSTOMIZABLE: reduce or increase space between questions */
    margin-bottom: 30px;
    padding: 15px 15px 25px 15px;

    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. */
.survey-q.followUpQuestion {

    /* CUSTOMIZABLE: reduce or increase space between questions */
    margin-top: -35px;
    }


/* ====================================== (Survey Content > Survey Question > Error) =======================================*/


/* Survey Error Container */
.survey-q-error {

    /* CUSTOMIZABLE: reduce or increase space below the error message */
    margin-bottom: 20px;
    }

.survey-q-error-text {

    /* CUSTOMIZABLE: font size */
    font-size: 13px;

    /* CUSTOMIZABLE: text color */
    color: #BA0000;

    /* CUSTOMIZABLE: text, (bold/normal) */
    font-weight: bold;

    /* CUSTOMIZABLE: reduce or increase space below the error message */
    margin-bottom: 0;
    }


/* =================================== (Survey Content > Survey Question > Question Text) ==================================*/


/* Survey Question Text Container */
.survey-q-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 */
.hideQuestionText .survey-q-question { display: none; }

/* Survey Question Text */
.survey-q-question-text {

    /* CUSTOMIZABLE: font size */
    font-size: 16px;

    /* 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 */
.survey-q-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 */
.hideInstructionText .survey-q-instructions { display: none; }

.survey-q-instructions-text {

    /* CUSTOMIZABLE: font size */
    font-size: 12px;

    /* CUSTOMIZABLE: text, space between lines */
    line-height: 1.4em;

    /* CUSTOMIZABLE: text color */
    color: #4C4C4C;

    /* CUSTOMIZABLE: font weight */
    font-weight: normal;

    margin-bottom: 0;
    }


/* ==================================== (Survey Content > Survey Question > Answers) =======================================*/


/* Survey Question Answers Container */
.survey-q-answers {

    /* Debug: uncomment the line below to highlight element */
    /* background-color: yellow; */
    }


/* ================================= (Survey Content > Survey Question > Answers > Grid) ===================================*/


/* NOTE: all grid styling rules should be decendents of .survey-q-grid (to make un-styling the grid easier) */

.survey-q-grid {}
.devContainer .survey-q-grid { background-color: white; }

.survey-q-grid th,
.survey-q-grid td {

    /* CUSTOMIZABLE: table border cell border color */
    border: 1px solid #CCC;

    padding: 3px;
    min-height: 18px;
    }

/* no explicit cols or rows*/
.noRows.noCols .survey-q-grid th,
.noRows.noCols .survey-q-grid td { border: none; }


/* Empty col legend cells */
.survey-q-grid th.empty,
.survey-q-grid td.empty {

    /* CUSTOMIZABLE: Show borders of empty cells */
    border: none;

    /* CUSTOMIZABLE: Hide background color of empty cells */
    background-color: transparent;
   }

/* Column legend (top and bottom) */
.survey-q-grid .survey-q-grid-collegend {

    text-align: center;

    /* CUSTOMIZABLE: vertical text alignment (top/bottom/middle) */
    vertical-align: bottom;

    /* CUSTOMIZABLE: Column legend background color (top and bottom) */
    background-color: #EFEFEF;

    /* CUSTOMIZABLE: font weight */
    font-weight: normal;
    }

/* Column legend row (Duplicate Col Legends the appear between rows [colLegendRows]) */
.survey-q-grid .colLegendRow .survey-q-grid-collegend {

    /* CUSTOMIZABLE: vertical text alignment (top/bottom/middle) */
    vertical-align: middle;
    }

/* Column legend (bottom legend only) */
.survey-q-grid .bottom-legend .survey-q-grid-collegend {

    /* CUSTOMIZABLE: vertical text alignment (top/bottom/middle) */
    vertical-align: top;
    }

/* Column Group header */
.survey-q-grid .survey-q-grid-group-collegend {

    /* CUSTOMIZABLE: Column group header/legend background color*/
    /* background-color: yellow; */

    /* CUSTOMIZABLE: vertical text alignment (top/bottom/middle) */
    vertical-align: middle;

    /* CUSTOMIZABLE: font weight */
    font-weight: bold;
    }

/* Row legends (left and right) */
.survey-q-grid .survey-q-grid-rowlegend {

    /* CUSTOMIZABLE: Row legend background color (left and right) */
    background-color: #EFEFEF;

    line-height: 1.3em;
    }

/* Row Legend Left (text alignment when there are legends on both sides)*/
.survey-q-grid .legend-left.legend-both { text-align: right; }

/* Row Group header */
.survey-q-grid .survey-q-grid-group-rowlegend {

    /* CUSTOMIZABLE: Row group header/legend background color*/
    /* background-color: yellow; */

    /* CUSTOMIZABLE: text alignment (left/right) */
    text-align: left;
    }

/* Alternating row colors - odd rows */
.survey-q-grid .odd td {

    /* CUSTOMIZABLE: row background color */
    /* background-color: green; */
    }

/* Alternating row colors - even rows */
.survey-q-grid .even td {

    /* CUSTOMIZABLE: row background color */
    /* background-color: blue; */
    }

/* Cells containing form elements */
.survey-q-grid td.element {

    vertical-align: middle;
    text-align: center;
    }

/* Cell errors */
.survey-q-grid td.hasError { background-color: #fff767;}

/* clickable cells */
.survey-q-grid .survey-q-grid-cell-clickable-hover,
.survey-q-grid .survey-q-grid-cell-clickable:hover {

     /* CUSTOMIZABLE: background color of element on mouseover */
     background-color: #DAE3EA;
     cursor: pointer;
     }

/* no explicit cols or rows*/
.noRows.noCols .survey-q-grid .survey-q-grid-cell-clickable-hover,
.noRows.noCols .survey-q-grid .survey-q-grid-cell-clickable:hover { background-color: transparent; }

/* form elements */
.survey-q-grid input.text,
.survey-q-grid select,
.survey-q-grid textarea { font-size: 13px; margin: 0; padding: 0; }

/* text boxes within row legends - for rows with open=1 in XML */
.survey-q-grid .row-legend input.text { font-size: 12px; margin: 0 3px; display: inline-block; vertical-align: middle; }

/* text boxes within row legends - errors (extra information is needed) - for rows with open=1 in XML */
.survey-q-grid .rowLegendErr .row-legend input.text { background-color: #FFF767; padding: 2px; }


/* ===================== One Column ===================== */


/* Question column legends - questions WITH row legends */
.survey-q-grid .colCount-1 th.legend,
.survey-q-grid .colCount-1 td.element { width: 32%; }

    /* Auto Width */
    .customWidth .survey-q-grid .colCount-1 th.legend,
    .flexGrid .survey-q-grid .colCount-1 th.legend,
    .customWidth .survey-q-grid .colCount-1 td.element,
    .flexGrid .survey-q-grid .colCount-1 td.element { width: auto; }

    /* Multicol AND clearColWidths (for when col widths are specified with inline CSS) - Set Auto Width */
    .survey-q-grid .multicol .colCount-1 td.element,
    .clearColWidths .survey-q-grid .colCount-1 td.element { width: auto; }

/* Question column legends - questions WITHOUT row legends */
.noRows .survey-q-grid .colCount-1 td.element,
.noRows .survey-q-grid .colCount-1 th.legend { width: 99%; text-align: left; }

    /* Auto Width */
    .noRows.customWidth .survey-q-grid .colCount-1 td.element,
    .noRows.flexGrid .survey-q-grid .colCount-1 td.element,
    .noRows.customWidth .survey-q-grid .colCount-1 th.legend,
    .noRows.flexGrid .survey-q-grid .colCount-1 th.legend { width: auto; }


/* ===================== Two to Four Columns ===================== */


/* Question column legends - questions WITH row legends */
.survey-q-grid .colCount-2 th.legend { width: 22%; }
.survey-q-grid .colCount-3 th.legend { width: 16.5%; }
.survey-q-grid .colCount-4 th.legend { width: 14.5%; }

    /* Auto Width */
    .customWidth .survey-q-grid .colCount-2 th.legend,
    .flexGrid .survey-q-grid .colCount-2 th.legend,
    .customWidth .survey-q-grid .colCount-3 th.legend,
    .flexGrid .survey-q-grid .colCount-3 th.legend,
    .customWidth .survey-q-grid .colCount-4 th.legend,
    .flexGrid .survey-q-grid .colCount-4 th.legend { width: auto; }

/* Question column legends - questions WITHOUT row legends */
.noRows .survey-q-grid .colCount-2 th.legend { width: 49%; }
.noRows .survey-q-grid .colCount-3 th.legend { width: 33%; }
.noRows .survey-q-grid .colCount-4 th.legend { width: 24%; }

    /* Auto Width */
    .noRows.customWidth .survey-q-grid .colCount-2 th.legend,
    .noRows.flexGrid .survey-q-grid .colCount-2 th.legend,
    .noRows.customWidth .survey-q-grid .colCount-3 th.legend,
    .noRows.flexGrid .survey-q-grid .colCount-3 th.legend,
    .noRows.customWidth .survey-q-grid .colCount-4 th.legend,
    .noRows.flexGrid .survey-q-grid .colCount-4 th.legend { width: auto; }


/* ===================== Five to Seven Columns ===================== */


/* Question column legends - questions WITH row legends */
.survey-q-grid .colCount-5 th.legend { width: 12%; }
.survey-q-grid .colCount-6 th.legend { width: 10.5%; }
.survey-q-grid .colCount-7 th.legend { width: 9.5%; }

    /* Auto Width */
    .customWidth .survey-q-grid .colCount-5 th.legend,
    .flexGrid .survey-q-grid .colCount-5 th.legend,
    .customWidth .survey-q-grid .colCount-6 th.legend,
    .flexGrid .survey-q-grid .colCount-6 th.legend,
    .customWidth .survey-q-grid .colCount-7 th.legend,
    .flexGrid .survey-q-grid .colCount-7 th.legend { width: auto; }

/* Question column legends - questions WITHOUT row legends */
.noRows .survey-q-grid .colCount-5 th.legend { width: 20%; }
.noRows .survey-q-grid .colCount-6 th.legend { width: 16%; }
.noRows .survey-q-grid .colCount-7 th.legend { width: 14%; }

    /* Auto Width */
    .noRows.customWidth .survey-q-grid .colCount-5 th.legend,
    .noRows.flexGrid .survey-q-grid .colCount-5 th.legend,
    .noRows.customWidth .survey-q-grid .colCount-6 th.legend,
    .noRows.flexGrid .survey-q-grid .colCount-6 th.legend,
    .noRows.customWidth .survey-q-grid .colCount-7 th.legend,
    .noRows.flexGrid .survey-q-grid .colCount-7 th.legend { width: auto; }


/* ===================== Eight to Ten Columns ===================== */


/* Question column legends - questions WITH row legends */
.survey-q-grid .colCount-8 th.legend { width: 8.5%; }
.survey-q-grid .colCount-9 th.legend { width: 7.9%; }
.survey-q-grid .colCount-10 th.legend { width: 7.3%; }

    /* Auto Width */
    .customWidth .survey-q-grid .colCount-8 th.legend,
    .flexGrid .survey-q-grid .colCount-8 th.legend,
    .customWidth .survey-q-grid .colCount-9 th.legend,
    .flexGrid .survey-q-grid .colCount-9 th.legend,
    .customWidth .survey-q-grid .colCount-10 th.legend,
    .flexGrid .survey-q-grid .colCount-10 th.legend { width: auto; }

/* Question column legends - questions WITHOUT row legends */
.noRows .survey-q-grid .colCount-8 th.legend { width: 12%; }
.noRows .survey-q-grid .colCount-9 th.legend { width: 11%; }
.noRows .survey-q-grid .colCount-10 th.legend { width: 10%; }

    /* Auto Width */
    .noRows.customWidth .survey-q-grid .colCount-8 th.legend,
    .noRows.flexGrid .survey-q-grid .colCount-8 th.legend,
    .noRows.customWidth .survey-q-grid .colCount-9 th.legend,
    .noRows.flexGrid .survey-q-grid .colCount-9 th.legend,
    .noRows.customWidth .survey-q-grid .colCount-10 th.legend,
    .noRows.flexGrid .survey-q-grid .colCount-10 th.legend { width: auto; }


/* ===================== Eleven Columns ===================== */


/* Question column legends - questions WITH row legends */
.survey-q-grid .colCount-11 th.legend { width: 7%; }

    /* Auto Width */
    .customWidth .survey-q-grid .colCount-11 th.legend,
    .flexGrid .survey-q-grid .colCount-11 th.legend { width: auto; }

/* Question column legends - questions WITHOUT row legends */
.noRows .survey-q-grid .colCount-11 th.legend { width: 9%; }

    /* Auto Width */
    .noRows.customWidth .survey-q-grid .colCount-11 th.legend,
    .noRows.flexGrid .survey-q-grid .colCount-11 th.legend { width: auto; }


/* ===================== 12-17 Columns ===================== */


.survey-q-grid .colCount-12 th.legend { width: 7%; }
.survey-q-grid .colCount-13 th.legend { width: 6%; }
.survey-q-grid .colCount-14 th.legend { width: 5.5%; }
.survey-q-grid .colCount-15 th.legend { width: 5.3%; }
.survey-q-grid .colCount-16 th.legend { width: 5%; }
.survey-q-grid .colCount-17 th.legend { width: 4.5%; }

    /* Auto Width */
    .customWidth .survey-q-grid th.legend,
    .flexGrid .survey-q-grid th.legend { width: auto; }


/* ========================================= (Survey Content > Survey Complete) ============================================*/


/* Survey Complete Container */
.survey-complete {}

/* Header text */
.survey-complete-text {

    /* CUSTOMIZABLE: font size */
    font-size: 16px;

    /* CUSTOMIZABLE: font weight */
    font-weight: bold;

    margin-bottom: 13px;
    }

/* Additional text/messages */
.survey-complete-message {}


/* =============================================== (Survey Content > Buttons) ==============================================*/


/* Survey Buttons Container */
.survey-buttons {

    /* CUSTOMIZABLE: reduce/increase space below the buttons */
    padding-bottom: 10px;

    text-align: center;
    }

.survey-button,
.btn_override {

    /* CUSTOMIZABLE: button alignment (left or right) */
    float: right;

    /* CUSTOMIZABLE: button text size */
    font-size: 14px;

    margin: 0 5px;
    cursor: pointer;

    /* 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: normal;

    /* CUSTOMIZABLE: button drop shadow */
    -moz-box-shadow: 0px 0px 0px #7F7F7F;
    -webkit-box-shadow: 0px 0px 0px #7F7F7F;
    box-shadow: 0px 0px 0px #7F7F7F;

    padding: 2px 8px;
    }

/* Hover */
.survey-button:hover,
.btn_override:hover {

    /* CUSTOMIZABLE: background color of the button on mouseover */
    background-color: #555655;

    /* CUSTOMIZABLE: border color on mouseover */
    /* border-color: red;*/

    /* CUSTOMIZABLE: text color on mouseover */
    /* color: #F6F;*/

    }

/* Disabled */
.survey-button[disabled],
.survey-button.disabled,
.survey-button[disabled]:hover,
.survey-button.disabled:hover {

    /* CUSTOMIZABLE: background color of the disabled button */
    background-color: #B3B3B3 !important;
    cursor: default;
    border-color: transparent !important;
    }


/* ==================================================== (Survey Footer) =================================================== */


.survey-footer {

    /* 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: text color */
    /* color: blue; */

    /* Debug: uncomment the line below to highlight element */
    /* background-color: yellow; */
    }

.survey-footer-text {}

.survey-footer-text a {

    /* CUSTOMIZABLE: text color*/
    /* color: blue; */
    }

.survey-footer-text a:hover {

    /* CUSTOMIZABLE: link color*/
    /* color: blue; */
    }


/* ==================================================== (special styles) ================================================== */


/* Show inline content on mouseover (formerly referred to as "dfn") */

.survey-page-content a.show_inlineContent { position: relative; }

.survey-page-content 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;
    }

.survey-page-content a.show_inlineContent:hover span.content { display: block; z-index: 1; }

.ui-effects-transfer { border: 2px dotted gray; }


/* AQ Colors */

.survey-theme-colors {
    color: #FFFFFF;
    background-color: #FFCC66;
}

.survey-theme-colors-disabled {
    color: #FFFFFF;
    background-color: rgb(222, 222, 222);
}

.survey-theme-colors-selected {
    color: #FFFFFF;
    background-color: #FF8800;
}


/* ========================================================= (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 */

.cati-comment {
    text-transform: uppercase;
    background-color: #FFFCD2;
    padding: 10px;
}