Data Collection Page and CSS Overview

The standard (Research Studio) HTML data collection page is setup as following:

The standard CSS style for this:

Available CSS classes

Default values for the CSS classes

/** - Data Collection specific classes - **/

/* Main page containers */

/* Main content container, element: div */

.mainContainer

{

    background-color: white;

}

/* Page banner container, element: div */

.bannerContainer

{

    width: 100%;

    padding-left: 12px;

    padding-right: 12px;

}

/* Content (top right logo, progress bar and question) container, element: div */

.contentContainer {

    width: 100%;

    background: transparent none repeat scroll 0%;

}

/* Button containter, element: div */

.buttonContainer {

    margin: auto;

    left: 0;

    right: 0;

    text-align: center;

    padding-bottom: 2px;

    padding-top: 6px;

}

.logo1Container

{

    width: 100%;

    text-align:right;

}

.logo2Container

{

    text-align: right;

    margin-right: 4px;

    padding-bottom: 4px;

    padding-top: 4px;

}

/* Page elemtents */

/* Main question table, element: table */

.cTable

{

    border: 2px solid black;

    margin-top: 8px;

    background-color:white;

    padding:0;

    border-collapse:collapse;

    border-spacing:2;

}

/* Question table row, element: tr */

.cRow

{

    border:0px;

    border-bottom: #cacaca 1px solid;

    background-color: white;

}

/* Question table row - alternate, element: tr */

.cRowAlt

{

    border:0px;

    border-bottom: #cacaca 1px solid;

    background-color: white;

}

/* Question table row - selected/focused, element: tr */

.cRowSelected

{

    background-color: white

}

/* Question table row - selected/focused, alternate, element: tr */

.cRowAltSelected

{

    background-color: white

}

/* Sub question row, element: tr */

.cRowSubQuestion

{

    border-top: 1px solid gray;

    border-left: 1px solid gray;

    width: 1%;

    border-bottom: 2px solid black;

}

/* Default question table cell, element: td */

.cCell

{

    border: 0px;

    border-bottom: 1px solid #cacaca;

    padding-left: 0px;

    white-space: nowrap;

    text-align: center;

}

/* Default question table cell (last cell in a row), element: td */

.cCell:last-child

{

    border-right: 2px solid black;

}

/* Cell containing question text, element: td */

.cCellQuestion

{

}

/* Cell in a sub question row, element: td */

.cCellSubQuestion

{

    padding: 4px;

    border-bottom: 2px solid black;

    border-right: 2px solid black;

}

/* Column header cell, element: td */

.cCellHeader

{

    padding: 4px;

    font-size: 12px;

    font-weight: normal;

    border-left: 2px solid black;

    color: black;

    background-color: white;

    padding-bottom: 2px;

    /* Allow words to break if needed */

    white-space: normal;

    /* Gives equal column widths */

    width: 5%;

}

/* The first column header cell (i.e. the row text column), element: td */

.cCellHeader:first-child

{

    padding: 4px;

    width:40%;

    min-width: 100px;

    border-right: 0px;

    border-left: 0px;

    font-weight: normal;

}

.cCellFirstHeader

{

    padding: 4px;

    width:40%;

    min-width: 100px;

    border-right: 0px;

    border-left: 0px;

    font-weight:normal;

}

/* The last column header cell, element: td */

.cCellHeader:last-child

{

    border-right: 2px solid black;

}

/* Cell for grid codes, element: td */

.cCellHeaderCode

{

    text-align: center;

    font-size: 10px;

    font-weight: normal;

    color: black;   

    border-left: black 2px solid;

    border-bottom: black 2px solid;

    background-color: white;

    padding-top:0px;

    padding-bottom:2px;

}

/* Cell for grid codes, first column, element: td */

.cCellHeaderCode:first-child

{

    border-left: 0px;

}

/* Cell for grid codes, last column, element: td */

.cCellHeaderCode:last-child

{

    border-right: 2px solid black;

}

/* Cell for numeric and time input (f/h), element: td */

.cCellF

{

    border: 0px;

    border-bottom: #cacaca 1px solid;

    padding-left: 2px;

    white-space: nowrap;

}

/* Row text cell, element: td */

.cCellRowText

{

    border-right: 0px;

    border-left: 0px;

    border-bottom: 1px solid #cacaca;

    width: auto;

}

/* Row text cell, numeric and time (f/h), element: td */

.cCellRowTextF

{

    width: 100% !important;

}

/* Header row text, element: td */

.cRowBlockText

{

    border: 1px solid;

    font-size: 11pt;

    padding-top: 10px;

}

/* Question number, element: span */

.cQuestionNumber

{

    display: none; /* hidden */

    font-family: Arial, Helvetica, Verdana, sans-serif;

}

/* Question text, element: span */

.cQuestionText

{

    font-size: 12pt;

    color: black;

}

/* Row text, element: div and span */

.cRowText

{

    font-size: 10pt;

    font-weight: normal;

    color: black;

}

/* Row codes, element: span */

.cValue

{

    display:none; /* hidden */

    font-size: xx-small;

}

/* 'Say', element: span */

.cSay

{

    display: block;

    padding: 2px;

    margin: 0px;

}

/* Inline 'Say', element: span */

.cSayInline

{

}

/* 'Do', element: span */

.cDo

{

    padding: 2px;

    font-size: smaller;

    float: none;

    margin: 0px;

    color: black;

    font-style: italic;

    background-color: white

}

/* Inline 'Do', element: span */

.cDoInline

{

}

/* Exclusive answers, element: textarea or input[type=text] */

.exclusive

{

}

/* Radio button, element: input[type=radio]*/

.cRadio

{

}   

/* Checkbox, element: input[type=checkbox]*/

.cCheck

{

}   

/* Numeric input, element: input[type=text]*/

.cFInput

{

}   

/* Time button, element: input[type=text]*/

.cHInput

{

}   

/* Open ended input, element: input[type=text]*/

.cOInput

{

}   

/* Container for scrollable tables, element: div */

#container

{

    border: 1px solid black;

    overflow: scroll;

    width: 95%;

    scrollbar-shadow-color: red;

    scrollbar-arrow-color: red;

    scrollbar-darkshadow-color: red

}

/* Error messages, element: span */

.cError

{

    font-weight: bolder;

    font-size: 18px;

    color: red;

    display: inline;

}

/* 'Previous' button, element: input[type=button] */

.buttonPrevious     

{

    border-style: solid;

    border-color: rgb(102, 132, 189) rgb(0, 30, 87) rgb(0, 30, 87) rgb(102, 132, 189);

    border-width: 2px;

    color: rgb(255, 255, 255);

    background-color: rgb(0, 81, 138);

    width: 110px;

}

/* 'Next' button, element: input[type=button] */

.buttonNext     

{

    border-style: solid;

    border-color: rgb(102, 132, 189) rgb(0, 30, 87) rgb(0, 30, 87) rgb(102, 132, 189);

    border-width: 2px;

    color: rgb(255, 255, 255);

    background-color: rgb(0, 81, 138);

    width: 110px;

}

/* Progress bar container, element: div */

.progressBarContainer

{

    background-color: #dddddd;

    border: 0px;

    width: 200px;

    height: 20px;

    padding: 0px;

    text-align: center;

    margin: auto;

}     

/* Progress bar, element: div */

.progressBar

{

    background-color: #0000aa;

}          

/* Progress bar text, element: div */

.progressBarText

{

    color: white;

    font-family: "Lucida Grande", Arial, Helvetica, Verdana, sans-serif;

    font-size: 12px;

    line-height: 20px;

    text-align: center;

    margin-left: auto;

}

/* Top right logo, element: image */

.logo1

{

}

/* Bottom right logo, element: image (span if an image was not specified) */

.logo2

{

}

/* Page banner, element: image */

.banner

{

}

/* Language selector, element: a */

.languageLink

{

    margin-right: 5px;

    font-size: 10pt;

}