styles.css

.xdebug-error {
    font-size: large;
}

/* Begin of: to correct display problems of firefox for mac */
#page-mod-surveypro-view_form .mform .fitem .felement,
#page-mod-surveypro-view_search .mform .fitem .felement {
    /* min-height: 2em; */ /* too much horintal room */
    padding-top: 8px;
}
/* End of: to eliminate display problems of firefox for mac */

/* Begin of: colours alternation for #layout_preview, #view_form, #view_search forms and read-only table*/
#page-mod-surveypro-layout_preview fieldset div.fitem:nth-of-type(even),
#page-mod-surveypro-view_form fieldset div.fitem:nth-of-type(even),
#page-mod-surveypro-view_search fieldset div.fitem:nth-of-type(even) {
    background-color: #ededed;
}
/* End of: colours alternation for #userentry, #usersearch forms and read-only table*/

/* Begin of: hacky coluorunifier html element */
#page-mod-surveypro-layout_preview fieldset div.colorunifier,
#page-mod-surveypro-view_form .mform fieldset div.colorunifier,
#page-mod-surveypro-view_search .mform fieldset div.colorunifier {
    line-height: 0;
    margin-bottom: 0;
    padding: 0;
}
/* End of: hacky coluorunifier html element */

/* Begin of: connect fullwidth question and graphic user items */
#page-mod-surveypro-view_form .mform fieldset.hidden,
#page-mod-surveypro-view_form .mform fieldset.hidden div,
#page-mod-surveypro-view_search .mform fieldset.hidden,
#page-mod-surveypro-view_search .mform fieldset.hidden div {
    margin-bottom: 0;
}
/* End of: connect fullwidth question and graphic user items */

/* Begin of: connect note to question */
#page-mod-surveypro-layout_preview .mform .fitem,
#page-mod-surveypro-view_form .mform .fitem,
#page-mod-surveypro-view_search .mform .fitem {
    margin: 0;
}
/* End of: connect note to question */

/* Begin of: no margin bottom to p inside question in SURVEYPRO_POSITIONTOP and SURVEYPRO_POSITIONFULLWIDTH */
#page-mod-surveypro-view_form .mform .fitem .felement div p,
#page-mod-surveypro-view_form .mform .fitem .fullwidth p,
#page-mod-surveypro-view_search .mform .fitem .felement div p,
#page-mod-surveypro-view_search .mform .fitem .fullwidth p {
    margin: 0;
}
/* End of: no margin bottom to p inside .fullwidth */

/* Begin of: drop out pictures longer than the available width in #userentry and #usersearch */
#page-mod-surveypro-view_form .mform .itemlabel .fullwidth,
#page-mod-surveypro-view_search .mform .itemlabel .fullwidth {
    overflow: hidden;
}
/* End of: drop out pictures longer than the available width */

/* Begin of: move horizontal checkbox and radio label closer to corresponding checkboes */
/* useful in case of radio button and checkboxes horizontally aligned */
/* NOTE: I have to add #userentry and #usersearch because I want to leave read-only layout untouched */
#page-mod-surveypro-view_form #userentry .fitem .felement input[type="checkbox"],
#page-mod-surveypro-view_form #userentry .fitem .felement input[type="radio"],
#page-mod-surveypro-view_form #usersearch .fitem .felement input[type="checkbox"],
#page-mod-surveypro-view_form #usersearch .fitem .felement input[type="radio"] {
    margin-right: 0;
}

#page-mod-surveypro-view_form .mform .fitem .felement label {
    margin-right: 1em;
}
/* End of: move horizontal checkbox and radio label closer to corresponding checkboes */

/* Begin of: #manageitems, #sortitems, #managetemplates and #validaterelations tables*/
#page-mod-surveypro-layout_itemlist table#manageitems,
#page-mod-surveypro-layout_itemlist table#sortitems,
#page-mod-surveypro-utemplate_manage table#managetemplates,
#page-mod-surveypro-layout_validation table#validaterelations {
    width: 100%;
}

#page-mod-surveypro-layout_itemlist table#manageitems .plugin,
#page-mod-surveypro-layout_itemlist table#sortitems .plugin,
#page-mod-surveypro-layout_validation table#validaterelations .plugin {
    padding: 0.5em;
    text-align: center;
}

#page-mod-surveypro-layout_itemlist table#manageitems .hide {
    display: none;
}

#page-mod-surveypro-layout_itemlist table#manageitems td.plugin,
#page-mod-surveypro-layout_itemlist table#sortitems td.plugin {
    width: 90px;
    white-space: nowrap;
    vertical-align: middle;
}

#page-mod-surveypro-layout_itemlist table#manageitems td.plugin span.pluginicon,
#page-mod-surveypro-layout_itemlist table#sortitems td.plugin span.pluginicon {
    padding: .2em;
}

#page-mod-surveypro-layout_itemlist table#manageitems td.sortindex,
#page-mod-surveypro-layout_itemlist table#sortitems td.sortindex,
#page-mod-surveypro-layout_validation table#validaterelations td.sortindex {
    min-width: 2.5em;
    padding: 0.5em;
    text-align: right;
    white-space: nowrap;
    vertical-align: middle;
}

#page-mod-surveypro-layout_itemlist table#manageitems td.parentitem,
#page-mod-surveypro-layout_itemlist table#sortitems td.parentitem,
#page-mod-surveypro-layout_validation table#validaterelations td.parentitem {
    margin: 0;
    padding: 0.5em;
    text-align: left;
    white-space: nowrap;
    vertical-align: middle;
}

#page-mod-surveypro-layout_itemlist table#manageitems td.parentitem span.branch .icon,
#page-mod-surveypro-layout_itemlist table#sortitems td.parentitem span.branch .icon {
    padding-left: .2em;
    padding-right: .2em;
}

#page-mod-surveypro-layout_itemlist table#manageitems td.customnumber,
#page-mod-surveypro-layout_itemlist table#sortitems td.customnumber {
    padding: 0.5em;
    white-space: nowrap;
    vertical-align: middle;
}

#page-mod-surveypro-layout_itemlist table#manageitems td.content,
#page-mod-surveypro-layout_itemlist table#sortitems td.content,
#page-mod-surveypro-layout_validation table#validaterelations td.content {
    padding: 0.5em;
    vertical-align: middle;
}

#page-mod-surveypro-layout_itemlist table#manageitems td.formpage,
#page-mod-surveypro-layout_itemlist table#sortitems td.formpage {
    padding: 0.5em;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
}

#page-mod-surveypro-layout_itemlist table#manageitems td.availability,
#page-mod-surveypro-layout_itemlist table#sortitems td.availability {
    padding: 0.5em;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
}

#page-mod-surveypro-layout_itemlist table#manageitems td.availability img.icon,
#page-mod-surveypro-layout_itemlist table#manageitems td.availability i.icon,
#page-mod-surveypro-layout_itemlist table#sortitems td.availability img.icon,
#page-mod-surveypro-layout_itemlist table#sortitems td.availability i.icon {
    width: 16px;
    height: 16px;
    /*margin: 0 0 0 0.45em;*/
    padding: 0;
    vertical-align: middle;
}

#page-mod-surveypro-layout_itemlist table#manageitems td.actions,
#page-mod-surveypro-layout_itemlist table#sortitems td.actions,
#page-mod-surveypro-layout_validation table#validaterelations td.actions,
#page-mod-surveypro-view table#submissions td.actions,
#page-mod-surveypro-utemplate_manage table#managetemplates td.actions {
    padding: 0.5em;
    white-space: nowrap;
    vertical-align: middle;
}

#page-mod-surveypro-layout_itemlist table#manageitems td.actions img.icon,
#page-mod-surveypro-layout_itemlist table#manageitems td.actions i.icon,
#page-mod-surveypro-layout_itemlist table#sortitems td.actions img.icon,
#page-mod-surveypro-layout_itemlist table#sortitems td.actions i.icon {
    width: 16px;
    height: 16px;
    padding: 0;
}

#page-mod-surveypro-layout_itemlist table#manageitems td.actions span.reorder,
#page-mod-surveypro-layout_itemlist table#sortitems td.actions span.reorder {
    padding: .2em;
}

#page-mod-surveypro-layout_itemlist table#manageitems span.noactionicon,
#page-mod-surveypro-layout_itemlist table#sortitems span.noactionicon {
    padding: .2em;
}

#page-mod-surveypro-layout_itemlist table#sortitems td.plugin img.placeholder {
    height: 16px;
    width: 80px;
}

#page-mod-surveypro-layout_itemlist table#manageitems .header,
#page-mod-surveypro-layout_itemlist table#sortitems .header {
    text-align: center;
}

#page-mod-surveypro-layout_itemlist table#manageitems .dimmed,
#page-mod-surveypro-layout_itemlist table#sortitems .dimmed,
#page-mod-surveypro-layout_validation table#validaterelations .dimmed {
    color: #cdcdcd;
}

#page-mod-surveypro-layout_validation table#validaterelations td.parentconstraints {
    padding: 0.5em;
    text-align: left;
    white-space: nowrap;
}

#page-mod-surveypro-layout_validation table#validaterelations td.status {
    padding: 0.5em;
    white-space: nowrap;
}

#page-mod-surveypro-layout_validation table#validaterelations td.status .warningmessage {
    color: yellow;
}

#page-mod-surveypro-layout_validation table#validaterelations td.status .errormessage {
    color: red;
}

#page-mod-surveypro-layout_validation table#validaterelations .header {
    text-align: center;
}
/* End of: #manageitems, #sortitems, #managetemplates and #validaterelations tables*/

/* Begin of: submissions table */
#page-mod-surveypro-view table#submissions {
    width: 100%;
}

#page-mod-surveypro-view table#submissions .cell {
    vertical-align: middle;
}

#page-mod-surveypro-view table#submissions .picture {
    padding: 0.5em;
    width: 1.2em;
}

#page-mod-surveypro-view table#submissions .actions img.icon,
#page-mod-surveypro-view table#submissions .actions i.icon {
    width: 16px;
    height: 16px;
    margin: 0 0 0 0.45em;
    padding-right: 0;
    vertical-align: middle;
}
/* End of: submissions table */

/* Begin of: Page break and fieldset presentation in the items table and during deletion confirmation */
/* taken from: http://www.techrepublic.com/blog/web-designer/customize-horizontal-rules-to-add-some-flair/ */
#page-mod-surveypro-layout_itemlist hr.pagebreakcontent,
#page-mod-surveypro-layout_validation hr.pagebreakcontent {
    border-radius: 45px;
    border-style: ridge;
    border-width: 3px 0 0 0;
    height: 18px;
    margin: 10px 10px -10px 10px;
}

#page-mod-surveypro-layout_itemlist .dimmed hr.pagebreakcontent,
#page-mod-surveypro-layout_validation .dimmed hr.pagebreakcontent {
    border-width: 2px 0 0 0;
    color: white;
}

#page-mod-surveypro-layout_itemlist hr.pagebreakcontent:before,
#page-mod-surveypro-layout_validation hr.pagebreakcontent:before {
    border-radius: 45px;
    border-style: ridge;
    border-width: 0 0 2px 0;
    content: "";
    display: block;
    height: 20px;
    margin-top: -25px;
}

#page-mod-surveypro-layout_itemlist hr.fieldsetendcontent,
#page-mod-surveypro-layout_validation hr.fieldsetendcontent {
    border: 2px dotted #000;
    border-style: none none dotted;
    width: 90%;
}
/* End of: Page break and fieldset presentation in the items table and during deletion confirmation */

/* Begin of: selectors for the static field explaining the format needed by each plugin in parentcontent field */
#page-mod-surveypro-layout_itemsetup table.exampletable {
    padding: 0;
    margin: 0 0 0 20px;
    width: auto;
}

#page-mod-surveypro-layout_itemsetup td.pluginname {
    padding: 0 20px 0 0;
    vertical-align: top;
    /* width: 60%; */
}

#page-mod-surveypro-layout_itemsetup td.inputformat {
    padding: 0;
    vertical-align: top;
    /* width: 40%; */
}

#page-mod-surveypro-layout_itemsetup .felement.fstatic ul {
    line-height: 1.2em;
}
/* End of: selectors for the static field explaining the format needed by each plugin in parentcontent field */

/* the first class selector is for the form in R/W mode, the second is for the RO mode */
#page-mod-surveypro-layout_preview #userentry .fitem .felement .indent-0,
#page-mod-surveypro-layout_preview .mform .fitem .felement .indent-0,
#page-mod-surveypro-view_form #userentry .fitem .felement .indent-0,
#page-mod-surveypro-view_form .mform .fitem .felement .indent-0 {
    margin-left: 0;
}

#page-mod-surveypro-layout_preview #userentry .fitem .felement .indent-1,
#page-mod-surveypro-layout_preview .mform .fitem .felement .indent-1,
#page-mod-surveypro-view_form #userentry .fitem .felement .indent-1,
#page-mod-surveypro-view_form .mform .fitem .felement .indent-1 {
    margin-left: 1.5em;
}

#page-mod-surveypro-layout_preview #userentry .fitem .felement .indent-2,
#page-mod-surveypro-layout_preview .mform .fitem .felement .indent-2,
#page-mod-surveypro-view_form #userentry .fitem .felement .indent-2,
#page-mod-surveypro-view_form .mform .fitem .felement .indent-2 {
    margin-left: 3em;
}

#page-mod-surveypro-layout_preview #userentry .fitem .felement .indent-3,
#page-mod-surveypro-layout_preview .mform .fitem .felement .indent-3,
#page-mod-surveypro-view_form #userentry .fitem .felement .indent-3,
#page-mod-surveypro-view_form .mform .fitem .felement .indent-3 {
    margin-left: 4.5em;
}

#page-mod-surveypro-layout_preview #userentry .fitem .felement .indent-4,
#page-mod-surveypro-layout_preview .mform .fitem .felement .indent-4,
#page-mod-surveypro-view_form #userentry .fitem .felement .indent-4,
#page-mod-surveypro-view_form .mform .fitem .felement .indent-4 {
    margin-left: 6em;
}

#page-mod-surveypro-layout_preview #userentry .fitem .felement .indent-5,
#page-mod-surveypro-layout_preview .mform .fitem .felement .indent-5,
#page-mod-surveypro-view_form #userentry .fitem .felement .indent-5,
#page-mod-surveypro-view_form .mform .fitem .felement .indent-5 {
    margin-left: 7.5em;
}

#page-mod-surveypro-layout_preview #userentry .fitem .felement .indent-6,
#page-mod-surveypro-layout_preview .mform .fitem .felement .indent-6,
#page-mod-surveypro-view_form #userentry .fitem .felement .indent-6,
#page-mod-surveypro-view_form .mform .fitem .felement .indent-6 {
    margin-left: 9em;
}

#page-mod-surveypro-layout_preview #userentry .fitem .felement .indent-7,
#page-mod-surveypro-layout_preview .mform .fitem .felement .indent-7,
#page-mod-surveypro-view_form #userentry .fitem .felement .indent-7,
#page-mod-surveypro-view_form .mform .fitem .felement .indent-7 {
    margin-left: 10.5em;
}

#page-mod-surveypro-layout_preview #userentry .fitem .felement .indent-8,
#page-mod-surveypro-layout_preview .mform .fitem .felement .indent-8,
#page-mod-surveypro-view_form #userentry .fitem .felement .indent-8,
#page-mod-surveypro-view_form .mform .fitem .felement .indent-8 {
    margin-left: 12em;
}

#page-mod-surveypro-layout_preview #userentry .fitem .felement .indent-9,
#page-mod-surveypro-layout_preview .mform .fitem .felement .indent-9,
#page-mod-surveypro-view_form #userentry .fitem .felement .indent-9,
#page-mod-surveypro-view_form .mform .fitem .felement .indent-9 {
    margin-left: 13.5em;
}

/* Begin of: for long edit fields in itemsetup form */
#page-mod-surveypro-layout_itemsetup .mform .fitem .felement .longfield {
    width: 25em;
}
/* End of: for long edit fields in itemsetup form */

/* Begin of: fix to owful alignment of fielset legends in the cover */
#page-mod-surveypro-view_cover .coverinfolegend {
    margin-bottom: 0;
    margin-top: 20px;
}
/* End of: fix to owful alignment of fielset legends in the cover */

/* table with list of surveypro in index.php */
#page-mod-surveypro-index table.mod_index .col1,
#page-mod-surveypro-index table.mod_index .col2,
#page-mod-surveypro-index table.mod_index .col3,
#page-mod-surveypro-index table.mod_index .col4,
#page-mod-surveypro-index table.mod_index .col5 {
    text-align: left;
}

#page-mod-surveypro-index table.mod_index .col1 {
    white-space: nowrap;
}

#page-mod-surveypro-index table.mod_index td span.dimmed {
    color: #999;
}
/* End of: table with list of surveypro in index.php */

/* to correct vertical alignment in read only mode */
#page-mod-surveypro-view_form .mform .fitem .felement.fgroup,
#page-mod-surveypro-view_form .mform .fitem .felement.feditor,
#page-mod-surveypro-view_form .mform .fitem .felement.fselect,
#page-mod-surveypro-view_form .mform .fitem .felement.fcheckbox,
#page-mod-surveypro-view_form .mform .fitem .felement.fstatic {
    padding-top: 5px;
}
/* End of: to correct vertical alignment in read only mode */

/* vertical distance between top margin of a row and input elements is too small */
#page-mod-surveypro-layout_preview .mform .fitem,
#page-mod-surveypro-view_form .mform .fitem,
#page-mod-surveypro-view_search .mform .fitem {
    padding-top: 0.7em;
}
/* End of: vertical distance between top margin of a row and input elements is too small */

/* makeup to autofill input to make it look like a label */
/* DON'T INCLUDE THE SEARCH FORM because at search time autofill has to look like a regular field */
#page-mod-surveypro-layout_preview .mform input.autofill_text,
#page-mod-surveypro-view_form .mform input.autofill_text {
    background-color: transparent;
    border: 0 transparent none;
    box-shadow: none;
}
/* End: make up to autofill input to let it look like a static text */

/* vertical distance between select in rate is too much */
#page-mod-surveypro-layout_preview .mform select.rate_select,
#page-mod-surveypro-view_form .mform select.rate_select,
#page-mod-surveypro-view_search .mform select.rate_select {
    margin-bottom: 0.2em;
    margin-top: 0.2em;
}
/* End of: vertical distance between select in rate is too much */

/* these are a div selector */
/* padding top for div opening to rate elements */
#page-mod-surveypro-layout_preview .mform div.rate_select,
#page-mod-surveypro-view_form .mform div.rate_select,
#page-mod-surveypro-view_search .mform div.rate_select {
    padding-top: 0;
}
/* End of: padding top for div opening to rate elements */

/* padding bottom for noanswer checkbox in a dedicated row, like, for instence, in rate elements */
#page-mod-surveypro-layout_preview .mform div.rate_check,
#page-mod-surveypro-view_form .mform div.rate_check,
#page-mod-surveypro-view_search .mform div.rate_check {
    padding-bottom: 0.5em;
    padding-top: 0;
}
/* End of: padding bottom for noanswer checkbox in a dedicated row, like, for instence, in rate elements */

/* padding bottom for noanswer checkbox in a dedicated row, like, for instence, in rate elements */
#page-mod-surveypro-layout_preview .mform div.fitem_fstatic,
#page-mod-surveypro-view_form .mform div.fitem_fstatic,
#page-mod-surveypro-view_search .mform div.fitem_fstatic {
    padding-top: 0;
}
/* End of: padding bottom for noanswer checkbox in a dedicated row, like, for instence, in rate elements */
/* End of: these are a div selector */