/* ############################################################################
   ##
   ##  FORM STYLES
   ##
   ##  NOTES
   ##  ----------
   ##  * The layout described in this style sheet is a two column form layout,
   ##    with field labels on the left and fields with their other associated
   ##    bits and pieces on the right.
   ##  * Read the document titled "Forms HTML Markup Standards" to understand
   ##    how to use this style sheet.
   ##  * See DefaultPageElements.css for application button styles
   ##  * DO NOT muck around with the structure of this file - you will only
   ##    fall into an abyss of crazy CSS and HTML headaches! If structural
   ##    customisations are really necessary, put them in the section provided
   ##    at the end of the file.
   ##  * RW 20090729 - This style sheet has been extended to cover metadata
   ##    field collections too, which aren't forms, but generally deal with
   ##    the same kind of data that is managed using forms and is often
   ##    presented the same way. Look for new classes "dataContainer" and
   ##    "dataFields".
   ##
   ######################################################################### */

/* ####################################
   General Form HTML Tags
   ################################## */

.formPanel, .dataContainer {
    position: relative;
    float: none;
    margin: 0;
    padding: 0;
    width: 100%;
    margin-bottom: 1.5em;
}

fieldset, .fieldset {
    display: inline-block;
    width: 98.75%;
    min-width: 98.75%; /* IE7 doesn't like the width property but this works and doesn't spoil anything for other browsers. */
    padding: 0 0.62%; /* Width + Horizontal padding + Horizontal margin should equal just under 100% to make room for the border. */
    margin: 0 0 1.5em;
    border: #ebebeb 1px solid;
    border-radius: 6px;
}
* html fieldset, * html .fieldset {
    /* IE6 Only */
    float: none; /* The left float can cause all kinds of headaches at the end of a form. */
}
*:first-child+html fieldset, *:first-child+html .fieldset {
    /* IE7 Only */
    float: none; /* The left float can cause all kinds of headaches at the end of a form. */
}

    fieldset legend, .fieldset .legend {
        padding: 4px;
        margin: 0 0 0.25em;
        color: #000000;
        font-weight: bold;
        font-size: 125%; /* Default is equivalent to h3. */
    }

    .fieldset .legend {
        position: relative;
        float: left;
        margin-top: -1em; /* Works okay for font-size 75% + padding 4px + parent padding 0.062%. Adjust for other settings. */
        margin-bottom: 0.25em;
        background: #ffffff; /* Change this if your page isn't white! */
    }
    * html .fieldset .legend {
        /* IE6 Only */
        margin-top: auto; /* Otherwise IE6 cuts it off as thought the fieldset has overflow:hidden. For improvement... */
    }

    fieldset p, fieldset h1, fieldset h2, fieldset h3, fieldset h4, fieldset h5, fieldset h6,
    .fieldset p, .fieldset h1, .fieldset h2, .fieldset h3, .fieldset h4, .fieldset h5, .fieldset h6 {
        clear: left; /* Fix floating next to div.legend */
        margin-left: 4px;
        margin-right: 4px;
    }

/* ####################################
   Form & Data Fields Lists
   ################################## */

.formFields, .dataFields {
    padding: 0 !important; /* Nothing should fool with this */
    margin: 0 !important;  /* Nothing should fool with this */
    list-style: none !important;  /* Nothing should fool with this */
}

    .formFields li, .dataFields li {
        list-style: none;
    }

    /* Don't inherit list-style for child lists of .formFields by default, as they're probably regular content. */
    .formFields ol, .dataFields ol {
        list-style: decimal;
    }
    .formFields ul, .dataFields ul {
        list-style: disc;
    }

/* ####################################
   Form & Data Field Wrappers (usually inside lists)
   ################################## */

.fieldContainer, .formFields li, .dataFields li {
    position: relative;
    float: left; /* display:inline-block would be a better way to give the object dimension, but IE8 has problems in that case with our implementation of dynamic classes on "other" options for radio/checkbox fields */
    clear: left;
    width: 100%;
    padding: 0;
    margin: 0.25em 0 0.75em;
}
* html .fieldContainer, * html .formFields li, * html .dataFields li {
    /* IE6 Only */
    /* To make IE6 apply margins, etc. properly at the end of a containing element. */
    float: none;
    display: inline-block;
}
*:first-child+html .fieldContainer, *:first-child+html .formFields li, *:first-child+html .dataFields li {
    /* IE7 Only */
    /* To make IE7 apply margins, etc. properly at the end of a containing element. */
    float: none;
    display: inline-block;
}

    /* The following wrappers should be inside a .fieldContainer wrapper if the .fieldContainer class is used. However the CSS below does not specify .fieldContainer so that the following classes can also be used when .fieldContainer is not used (e.g. in simple forms). */

    .fieldTitle, .formFields label, .dataFields label {
        position: relative;
        float: left;
        width: 25%;
        padding: 11px 1%;
        font-weight: bold;
    }

    .fieldText { /* When it appears outside .fieldContent - e.g. on simple forms. */
        /* 20130926 RW - fieldText is deprecated by fieldContentTop and fieldContentBottom but kept temporarily for backward compatibility. */
        position: relative;
        float: left;
        padding: 4px;
    }

    .fieldContent {
        display: block;
        position: relative;
        float: left;
        width: 71%;
        max-width: 71%;
        padding: 1%;
        border-radius: 6px;
        background: #fafafa;
    }

            .fieldContent .fieldText { /* When it appears inside .fieldContent. Might need to override values from above. */
                /* 20130926 RW - fieldText is deprecated by fieldContentTop and fieldContentBottom but kept temporarily for backward compatibility. */
                float: none;
                padding: 4px 0;
            }

            .fieldContent .fieldContentTop {
                display: inline-block;
                margin: 0 0 4px;
                width: 100%;
            }

            .fieldContent .fieldContentBottom {
                display: inline-block;
                clear: left;
                margin: 4px 0 0;
                width: 100%;
            }

            .fieldControls {
                /* It's possible that .fieldControls/.fieldData exists without a .fieldContent wrapper. */
                display: inline-block;
                vertical-align: middle;
                width: 100%; /* Make sure the contents are contained and don't spill outside. Adjust this and .helperControl if you want help notes floating to the right of a field. */
            }
            .fieldContent .fieldControls {
                /* When these fields ARE inside the .fieldContent wrapper. Might need to override settings from .fieldControls/.fieldData above. */
            }

                .fieldControls .helperControl {
                    display: inline-block;
                    margin-left: 4px;
                    vertical-align: top;
                }

            .fieldContent .helperControl {
                display: inline-block;
                min-height: 20px;
                padding: 4px 0 0 20px;
                background: url('../../images/icons/16x16_help.gif') 0px 3px no-repeat;
            }

/* ####################################
   Form Table
   These table settings must be defined after the core styles. (FF is fussy with the tables.)
   ################################## */

table.formFields, table.dataFields {
    /* If putting settings here, remember that IE6 doesn't like element.class syntax */
    border-collapse: separate;
    border: 1px;
}

    .formFields tr, .dataFields tr {
    }

        .formFields tr th, .dataFields tr th {
        }

        .formFields tr td, .dataFields tr td {
        }

/* ####################################
   Standard Controls
   (Controls for individual field types can be tweaked below.)
   (Note that .submitButton styles are defined further down. So no need to define input[type=submit] here.)
   ################################## */

.formFields input[type=text], .formFields input[type=password] {
    width: 98%; /* Can be overridden on individual controls. 100% - (padding). */
    max-width: 98%;
    padding: 3px 1%;
    margin: auto -1px; /* Adjust negative margins for borders */
    border: #c0c0c0 1px solid;
    border-radius: 4px;
}

.formFields select {
    width: auto; /* Can be overridden on individual controls. Select fields are usually better with dynamic widths. */
    max-width: 100%; /* Padding works differently for select fields, it's inside the box. */
    padding: 3px 1%;
    margin: auto -1px; /* Adjust negative margins for borders */
    border: #c0c0c0 1px solid;
    border-radius: 4px;
}

.formFields textarea {
    width: 98%; /* Can be overridden on individual controls. 100% - (padding). */
    max-width: 98%;
    padding: 3px 1%;
    margin: auto -1px; /* Adjust negative margins for borders */
    border: #c0c0c0 1px solid;
    border-radius: 4px;
}

/* ####################################
   Field Types
   ################################## */

.textField {
}

.textareaField {
}

.numberField {
    /* Note: Number fields are also text fields. */
}

.emailField {
    /* Note: Email fields are also text fields. */
}

.usernameField {
    /* Note: Username fields are also text fields. */
}

.passwordField {
    /* Note: Password fields are also text fields. */
}

    /* The helper control on password fields always has a simple text message or a linked message as an alternative. Choose your favorite for this site. */

    .passwordField .helperControl .textMessage {
    }

    .passwordField .helperControl .linkedMessage {
        display: none;
    }

.dateField, .dateSelectField {
    /* Note: Date fields are also text fields. */
}

    .dateField input[type=text], .dateSelectField input[type=text],
    .dateField input[type=date], .dateSelectField input[type=date] {
        max-width: 75px;
    }

    .dateField .dateSelector, .dateSelectField .dateSelector {
        display: inline-block;
        height: 16px;
        padding-left: 20px;
        padding-top: 2px;
        margin-top: 2px;
        margin-left: 0.5em;
        background: url('../../images/icons/16x16_calendar.gif') no-repeat;
    }

.dateDropdownField {
    /* A date selected by using three dropdowns - Day/Month/Year */
}

    .dateDropdownField fieldset {
        clear: none;
        width: auto;
        min-width: 0px;
        padding: 0;
        margin: 0;
        border: 0;
        background: transparent;
    }

        .dateDropdownField fieldset legend {
            display: none; /* Current accessible browsers ignore this. */
        }

    .dateDropdownField .fieldControls {
    }

        .dateDropdownField .fieldControls label {
            display: none;
        }

        .dateDropdownField .fieldControls select {
        }

        @media aural {
            .dateDropdownField .fieldControls label {
                float: left;
            }

            .dateDropdownField .fieldControls select {
                float: left;
            }
        }

.radioField, .checkboxField {
}

    .radioField fieldset, .checkboxField fieldset {
        clear: none;
        width: auto;
        min-width: 0px;
        padding: 0;
        margin: 0;
        border: 0;
        background: transparent;
    }

        .radioField fieldset legend, .checkboxField fieldset legend {
            display: none; /* Current accessible browsers ignore this. */
        }

    .radioField label, .checkboxField label {
        /* Assume controls are implicitly associated with labels, i.e. inside the label tag. */
        display: inline-block;
        float: none;
        width: auto;
        vertical-align: top;
        margin-bottom: 0.25em;
        padding: 0;
        padding-bottom: 1px !important; /* Make room for the hover border (see below) so that elements don't jump around. */
        font-weight: normal;
        background: transparent !important;
    }

        .radioField label:hover, .checkboxField label:hover {
            padding-bottom: 0 !important;
            border-bottom: 1px dotted;
        }

    .radioField input, .checkboxField input {
    }

    .radioField .horizontalOptions, .checkboxField .horizontalOptions {
        padding: 0 !important;
    }

        .radioField .horizontalOptions label, .checkboxField .horizontalOptions label {
            width: auto !important; /* We don't want anything messing with this. */
            margin-right: 1em;
        }

    .radioField .verticalOptions, .checkboxField .verticalOptions {
        padding: 0 !important;
    }

        .radioField .verticalOptions label, .checkboxField .verticalOptions label {
            /* Must override settings from higher up. */
            position: relative;
            float: left;
            clear: left;
            width: 100% !important; /* We don't want anything messing with this. */
        }

    /***
     * Radio/Checkbox Fields in tables
     * - ASP.Net uses tables for radio and checkbox lists and explicitly (rather than implicitly) associates inputs/labels - i.e. the input tag is not wrapped by the label tag.
     */

    .radioField table, .radioField .verticalOptions table, .radioField .horizontalOptions table,
    .checkboxField table, .checkboxField .verticalOptions table, .checkboxField .horizontalOptions table {
    }

        .radioField tr, .radioField .verticalOptions tr, .radioField .horizontalOptions tr,
        .checkboxField tr, .checkboxField .verticalOptions tr, .checkboxField .horizontalOptions tr {
        }

            .radioField td, .radioField .verticalOptions td, .radioField .horizontalOptions td,
            .checkboxField td, .checkboxField .verticalOptions td, .checkboxField .horizontalOptions td {
                padding-right: 1em;
            }

                .radioField td label, .radioField .verticalOptions td label, .radioField .horizontalOptions td label,
                .checkboxField td label, .checkboxField .verticalOptions td label, .checkboxField .horizontalOptions td label {
                    float: none;
                    width: auto !important;
                }

    /***
     * "Other" option
     * - Styles for (implied) horizontalOptions are defined first in case the horizontal/vertical class doesn't exist, as the natural layout is closest to this.
     * - .radioField, .checkboxField selectors not specified as layout is the same and therefore the CSS is simplified.
     */

    /* "Other" field, hidden with select control. */

    .otherOptionSelectTextHidden {
        display: inline-block;
    }

        .otherOptionSelectTextHidden .otherOptionEnable {
            /* This is a <label> tag */
        }

        .otherOptionSelectTextHidden .otherOptionText {
            display: inline;
        }

            .otherOptionSelectTextHidden .otherOptionText label {
                display: none; /* Ignored by all current accessible browsers, so this is the easiest way to hide the label. Otherwise we'd have to use the code below. */
                position: absolute; /* Takes up no space in the page. */
                text-indent: -10000em; /* Makes the text invisible without hiding it (so accessible browsers can see it). */
            }

            .otherOptionSelectTextHidden .otherOptionText input {
                display: block;
                clear: left;
                width: auto;
                margin-left: 1.75em;
            }

    .verticalOptions .otherOptionSelectTextHidden {
        display: block;
        clear: left; /* For IE6 & IE7. FF and IE8 do it right with just display: block; */
    }

        .verticalOptions .otherOptionSelectTextHidden .otherOptionEnable {
            /* This is a <label> tag */
        }

        .verticalOptions .otherOptionSelectTextHidden .otherOptionText {
            display: block;
            clear: left;
        }

            .verticalOptions .otherOptionSelectTextHidden .otherOptionText label {
                display: none; /* Ignored by all current accessible browsers, so this is the easiest way to hide the label. Otherwise we'd have to use the code below. */
                position: absolute; /* Takes up no space in the page. */
                text-indent: -10000em; /* Makes the text invisible without hiding it (so accessible browsers can see it). */
            }

            .verticalOptions .otherOptionSelectTextHidden .otherOptionText input {
                display: block;
                width: auto;
            }

    /* "Other" field, visible with select control. */

    .otherOptionSelectTextVisible {
        display: inline-block;
    }

        .otherOptionSelectTextVisible .otherOptionEnable {
            /* This is a <label> tag */
        }

        .otherOptionSelectTextVisible .otherOptionText {
            display: inline;
        }

            .otherOptionSelectTextVisible .otherOptionText label {
                display: none; /* Ignored by all current accessible browsers, so this is the easiest way to hide the label. Otherwise we'd have to use the code below. */
                position: absolute; /* Takes up no space in the page. */
                text-indent: -10000em; /* Makes the text invisible without hiding it (so accessible browsers can see it). */
            }

            .otherOptionSelectTextVisible .otherOptionText input {
                display: block;
                clear: left;
                margin-left: 1.75em;
                width: auto;
            }

    .verticalOptions .otherOptionSelectTextVisible {
        display: block;
        clear: left; /* For IE6 & IE7. FF and IE8 do it right with just display: block; */
    }

        .verticalOptions .otherOptionSelectTextVisible .otherOptionEnable {
            /* This is a <label> tag */
        }

        .verticalOptions .otherOptionSelectTextVisible .otherOptionText {
        }

            .verticalOptions .otherOptionSelectTextVisible .otherOptionText label {
            }

            .verticalOptions .otherOptionSelectTextVisible .otherOptionText input {
                width: auto;
            }

    /* "Other" field, text only (always visible). */

    .otherOptionTextOnly {
        /* Always on a new line, even for horizontal options. */
        display: block;
        clear: left;
        padding: 0.35em;
    }

        .otherOptionTextOnly .otherOptionText {
        }

            .otherOptionTextOnly .otherOptionText label {
            }

            .otherOptionTextOnly .otherOptionText input {
                display: block;
                clear: left;
                width: auto;
            }

    .verticalOptions .otherOptionTextOnly {
    }

        .verticalOptions .otherOptionTextOnly .otherOptionText {
        }

            .verticalOptions .otherOptionTextOnly .otherOptionText label {
            }

            .verticalOptions .otherOptionTextOnly .otherOptionText input {
            }

    /* Other option - Class used to dynamically hide the option */

    .otherOptionSelectTextHidden .otherOptionHideText {
        display: none !important;
    }

/* The hacks for singleCheckboxField below aren't pretty... Fix later! */

.singleCheckboxField {
    position: relative;
}

    .singleCheckboxField .required {
        vertical-align: middle; /* Affects IE6 & IE7 and it doesn't hurt to explicitly state it for the other browsers. */
    }

    .singleCheckboxField .fieldControls label {
        position: relative;
        width: auto;
        padding: 0;
        font-weight: normal;
        background: transparent;
    }

        .singleCheckboxField .fieldControls label input {
            display: inline-block;
            vertical-align: middle;
        }

        .singleCheckboxField .fieldControls label .controlText {
            display: inline-block;
            vertical-align: middle;
        }

.dropdownField {
}

    .dropdownField select {
    }

    /* "Other" fields. Note that certain styles are already set from the radio/checkbox field above. */

    .dropdownField .otherOptionSelectTextHidden {
        display: inline;
    }

        .dropdownField .otherOptionSelectTextHidden .otherOptionText {
            display: inline;
        }

            .dropdownField .otherOptionSelectTextHidden .otherOptionText label {
                width: auto;
                background: transparent;
            }

            .dropdownField .otherOptionSelectTextHidden .otherOptionText input {
                display: inline;
                margin-left: auto;
            }

    .dropdownField .otherOptionSelectTextVisible {
        display: block;
        padding: 0.35em 0.35em 0.35em 0;
    }

        .dropdownField .otherOptionSelectTextVisible .otherOptionText {
        }

            .dropdownField .otherOptionSelectTextVisible .otherOptionText label {
                width: auto;
                background: transparent;
            }

            .dropdownField .otherOptionSelectTextVisible .otherOptionText input {
                display: inline-block;
                margin-left: auto;
            }


    .dropdownField .otherOptionTextOnly {
        display: block;
        padding: 0.35em 0.35em 0.35em 0;
    }

        .dropdownField .otherOptionTextOnly .otherOptionText {
        }

            .dropdownField .otherOptionTextOnly .otherOptionText label {
                width: auto;
                background: transparent;
            }

            .dropdownField .otherOptionTextOnly .otherOptionText input {
            }

.multiselectField {
}

.listField {
}

    .listField .fieldControls {
        margin-bottom: 10px;
    }

        .listField .fieldControls input {
            width: 87.5%; /* Make room for +/- buttons, this works well on most screen sizes */
            margin-right: 0.5%;
        }

        .listField .fieldControls .add {
            display: inline-block;
            text-indent: -10000em;
            text-transform: uppercase; /* Make text-indent work in IE7. */
            width: 16px;
            height: 16px;
            background: url('/images/cms/icons/general/add.png') no-repeat;
            cursor: pointer;
        }

        .listField .fieldControls .remove {
            display: inline-block;
            text-indent: -10000em;
            text-transform: uppercase; /* Make text-indent work in IE7. */
            width: 16px;
            height: 16px;
            margin-right: 0.5%;
            background: url('/images/cms/icons/general/remove.png') no-repeat;
            cursor: pointer;
        }

.matrixField {
}

    .matrixField .fieldContent table.subFields {
        width: 100%;
        margin-top: 0.5em;
        border: 1px #e0e0e0 solid;
        border-top: 0;
    }

        .matrixField table.subFields caption {
            display: none;
        }

        .matrixField table.subFields tr.subFieldsTableHeader {
        }

            .matrixField table.subFields tr.subFieldsTableHeader th {
                font-weight: normal;
                background: #f0f0f0;
            }

        .matrixField table.subFields tr.subFieldContainer {
        }

            .matrixField table.subFields tr.subFieldContainer th {
                font-weight: normal;
                background: #f8f8f8;
                border: 1px #e0e0e0 solid;
            }

            .matrixField table.subFields tr.subFieldContainer th.subFieldTitle {
                width: 25%; /* Tables are fluid but this does a pretty good job */
            }

            .matrixField table.subFields tr.subFieldContainer td {
                display: table-cell; /* This might have been set to something else due to class names for "other" options. */
                /* padding: auto; */ /* "Auto" isn't valid but we don't want this cascading do we? */
                background: #ffffff;
                border: 1px #e0e0e0 solid;
            }

    .matrixField .fieldContent table.horizontalOptions {
    }
    * html .matrixField .fieldContent table.horizontalOptions {
        /* IE6 Only */
        margin-top: -2.5em; /* Why is IE bumping the table down? Fix this nasty hack later. */
    }
    *:first-child+html .matrixField .fieldContent table.horizontalOptions {
        /* IE7 Only */
        margin-top: -2.5em; /* Why is IE bumping the table down? Fix this nasty hack later. */
    }

            .matrixField .fieldContent table.horizontalOptions tr {
            }

                .matrixField .fieldContent table.horizontalOptions tr.checkboxField td ,
                .matrixField .fieldContent table.horizontalOptions tr.radioField td {
                }

                    .matrixField .fieldContent table.horizontalOptions tr.checkboxField td input,
                    .matrixField .fieldContent table.horizontalOptions tr.radioField td input {
                        float: left;
                        margin: 0 2px 0 0;
                    }

                    .matrixField .fieldContent table.horizontalOptions tr.checkboxField td label,
                    .matrixField .fieldContent table.horizontalOptions tr.radioField td label {
                        float: left;
                    }

    .matrixField table.matrixLabelsInHeader {
    }

        .matrixField table.matrixLabelsInHeader tr.subFieldsTableHeader {
        }

            .matrixField table.matrixLabelsInHeader tr.subFieldsTableHeader th {
                border: #e0e0e0 1px solid;
            }

        .matrixField table.matrixLabelsInHeader tr.subFieldContainer {
        }

                .matrixField table.matrixLabelsInHeader tr.subFieldContainer td {
                }

                    .matrixField table.matrixLabelsInHeader tr.subFieldContainer td label {
                        display: none;
                    }

                        .matrixField table.matrixLabelsInHeader tr.subFieldContainer td.otherOptionSelectTextVisible input {
                            display: inline-block;
                            float: none;
                            clear: none;
                            margin-left: 5px;
                        }

    .matrixField table.matrixLabelsInCells {
    }

        .matrixField table.matrixLabelsInCells tr.subFieldsTableHeader {
            display: none;
        }

/* ####################################
   Special elements on a form
   ################################## */

.requiredFieldMarker {
    display: inline-block;
    margin: 0 0.25em;
    width: 9px;
    height: 9px;
    font-weight: bold;
    font-size: 125%;
    text-indent: -1000em;
    overflow: hidden;
    background: url('../../images/icons/required_marker.gif') no-repeat;
}

.readOnly, input[readonly=true], select[readonly=true], textarea[readonly=true] {
    /* Use !important rules to make sure they don't get overridden by designer's styles */
    color: #909090 !important;
    background: #f0f0f0 !important;
}

/* ####################################
   Specific form fields
   ################################## */

.address2 {
}

    .address2 label {
        background: transparent;
    }

/* ####################################
   Buttons
   ################################## */

/*
    Submit Button Toolbar - Expected to be at the bottom of a form.
    fieldset.submitButtons is on all CMS forms except for Forms Manager forms.
    fieldset.sectionContainer#section_submit gives authors a ("hacky") way to to the same thing with Forms Manager forms.
*/

fieldset.submitButtons,
fieldset.sectionContainer#section_submit-form {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 0 1.5em !important;
    border: 0 !important;
    background: 0 !important;
    border-radius: 0 !important;
}

    fieldset.submitButtons legend,
    fieldset.sectionContainer#section_submit-form legend {
        display: none;
    }

    fieldset.sectionContainer#section_submit-form ol.formFields {
    }

        fieldset.sectionContainer#section_submit-form ol.formFields li.fieldContainer {
            display: inline-block;
            clear: none;
            width: auto;
            margin-right: 10px !important;
        }

            fieldset.sectionContainer#section_submit-form ol.formFields li.fieldContainer input {
            }

/* Submit Button(s) */
input[type=text],input[type=submit]{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	opactiy: 1;
	border-radius:0;
}
.submitButton, .applicationButton, a.applicationButton {
    display: inline-block;
    padding: 10px 36px 10px 20px;
    color: #ffffff;
    font-size: 116.7%;
    font-weight: bold;
    text-transform: uppercase;
    background-color: #aa1100;
    background-image: url('/images/cms/icons/white/arrow_right_white_16.png');
    background-repeat: no-repeat;
    background-position: 95% center;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
}

    .submitButton:hover, .applicationButton:hover, a.applicationButton:hover {
        /* cursor: pointer; */ /* Change the cursor for better visual cues if the button is graphical */
    }

    .submitButton:active, .applicationButton:active, a.applicationButton:active {
        margin: 1px 0 -1px 1px; /* Nudge it */
    }

    .submitButton.saveButton, .applicationButton.saveButton, a.applicationButton.saveButton {
    }

    .submitButton.selectButton, .applicationButton.selectButton, a.applicationButton.selectButton {
    }

    .submitButton.okButton, .applicationButton.okButton, a.applicationButton.okButton {
    }

    .submitButton.cancelButton, .applicationButton.cancelButton, a.applicationButton.cancelButton {
    }

    .submitButton.yesButton, .applicationButton.yesButton, a.applicationButton.yesButton {
    }

    .submitButton.noButton, .applicationButton.noButton, a.applicationButton.noButton {
    }

    .submitButton.backButton, .applicationButton.backButton, a.applicationButton.backButton {
    }

    .submitButton.forwardButton, .applicationButton.forwardButton, a.applicationButton.forwardButton {
    }

    .submitButton.previousButton, .applicationButton.previousButton, a.applicationButton.previousButton {
    }

    .submitButton.nextButton, .applicationButton.nextButton, a.applicationButton.nextButton {
    }

    .submitButton.continueButton, .applicationButton.continueButton, a.applicationButton.continueButton {
    }

    .submitButton.resetButton, .applicationButton.resetButton, a.applicationButton.resetButton {
    }

    /* Some buttons are different sizes. If background images are used, these classes can be useful. */

    .shortButton {
    }

    .longButton {
    }

/* ####################################
   Re-Captcha defaults
   ################################## */

#recaptcha_widget_div {
    /* Captcha normally follows fieldsets which are floated by default */
    clear: both;
}

/* ####################################
   Structural Customisations
   - Put your own structural customisations here (if necessary) rather than changing the design of this file.
   ################################## */

.noField {
    display: none;
}

/* ####################################
   Forms Manager
   ################################## */

/***
 * Forms Manager - Form
 */

#FormPage {
}

    #FormPage #FormFields {
        /* The main fieldset. */
        border: 0;
        padding: 0;
        margin-bottom: 0.5em;
    }

        #FormPage #FormFields #FormFieldsLegend {
            /* The legend for the main fieldset. */
            display: none;
        }

        #FormPage #FormFields fieldset {
            /* Fieldsets inside the form */
        }

        #FormPage #FormFields .fieldTitle, #FormPage #FormFields .formFields label {
        }

    #FormPage #FormFields fieldset.sectionContainer {
        margin-top: 1em;
    }

        #FormPage #FormFields fieldset.sectionContainer .sectionLegend {
        }

        #FormPage #FormFields fieldset.sectionContainer .sectionSummary {
            clear: both;
            margin: 0 0 1em;
        }

            #FormPage #FormFields fieldset.sectionContainer .sectionSummary ul {
            }

                #FormPage #FormFields fieldset.sectionContainer .sectionSummary ul li {
                    list-style: disc;
                }

        #FormPage #FormFields fieldset.fieldGroupFieldset {
        }

            #FormPage #FormFields fieldset.fieldGroupFieldset .fieldGroupFieldsetLegend {
            }

            #FormPage #FormFields fieldset.fieldGroupFieldset .fieldGroupSummary {
            }

    #FormPage .validationError {
        border: 1px solid #C89797;
        background-color: #FFDFDF;
        padding: 3px;
    }

/***
 * Form Fields - Two Columns Layout
 * - The default forms style sheet is two columns so this section requires minimal updates
 * - There are some inconsistencies between hand coded and auto generated form containers at the moment, so multiple references are needed.
 */

#FormPage .twoCols1, .formPanel.twoCols1 {
}

    #FormPage .twoCols1 .fieldContainer, .formPanel.twoCols1 .fieldContainer {
    }

        #FormPage .twoCols1 .fieldContainer .fieldTitle, .formPanel.twoCols1 .fieldContainer .fieldTitle {
        }

            #FormPage .twoCols1 .fieldContainer .fieldTitle .questionNumber, .formPanel.twoCols1 .fieldContainer .fieldTitle .questionNumber {
            }

            #FormPage .twoCols1 .fieldContainer .fieldTitle .questionNumber:after, .formPanel.twoCols1 .fieldContainer .fieldTitle .questionNumber:after {
                content: ".";
            }

        #FormPage .twoCols1 .fieldContainer .fieldContent, .formPanel.twoCols1 .fieldContainer .fieldContent {
        }

            #FormPage .twoCols1 .fieldContainer .fieldContent .fieldText, .formPanel.twoCols1 .fieldContainer .fieldContent .fieldText {
            }

        #FormPage .twoCols1 .matrixField td, .formPanel.twoCols1 .matrixField td {
        }

/***
 * Form Fields - One Column Layout
 * - There are some inconsistencies between hand coded and auto generated form containers at the moment, so multiple references are needed.
 */

#FormPage .oneCol1, .formPanel.oneCol1 {
}

    #FormPage .oneCol1 .fieldContainer, .formPanel.oneCol1  .fieldContainer {
    }

        #FormPage .oneCol1 .fieldContainer .fieldTitle, .formPanel.oneCol1 .fieldContainer .fieldTitle {
            width: 98% !important; /* Nothing should mess with this. */
            margin: 0;
            padding: 4px 1%;
        }

            #FormPage .oneCol1 .fieldContainer .fieldTitle .questionNumber, .formPanel.oneCol1 .fieldContainer .fieldTitle .questionNumber {
            }

            #FormPage .oneCol1 .fieldContainer .fieldTitle .questionNumber:after, .formPanel.oneCol1 .fieldContainer .fieldTitle .questionNumber:after {
                content: ".";
            }

        #FormPage .oneCol1 .fieldContainer .fieldContent, .formPanel.oneCol1 .fieldContainer .fieldContent {
            width: 98% !important; /* Nothing should mess with this. */
            max-width: 98% !important; /* Nothing should mess with this. */
            padding: 1%;
        }

            #FormPage .oneCol1 .fieldContainer .fieldContent .fieldText, .formPanel.oneCol1  .fieldContainer .fieldContent .fieldText{
            }

        #FormPage .oneCol1 .matrixField td, .formPanel.oneCol1 .matrixField td {
        }

/* ####################################
   Remote Surveys
   ################################## */

/***
 * Buttons that appear on the form lightbox popup and the final submission page
 */

#FormCancelOptions, #FormFinalLinks, .formButtons {
}

    #FormCancelOptions ul, #FormFinalLinks ul, .formButtons ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

        #FormCancelOptions ul li, #FormFinalLinks ul li, .formButtons ul li {
            display: inline;
            padding: 0;
        }

            #FormCancelOptions ul li a, #FormFinalLinks ul li a, .formButtons ul li a {
                display: inline-block;
                margin: 0 0.5em 0 0;
                padding: 4px;
                background: #f8f8f8;
                border: #e0e0e0 1px solid;
            }

            #FormCancelOptions ul li a:link, #FormFinalLinks ul li a:link, .formButtons ul li a:link {
            }

            #FormCancelOptions ul li a:visited, #FormFinalLinks ul li a:visited, .formButtons ul li a:visited {
            }

            #FormCancelOptions ul li a:hover, #FormFinalLinks ul li a:hover, .formButtons ul li a:hover {
                background: #f0f0f0;
            }

            #FormCancelOptions ul li a:active, #FormFinalLinks ul li a:active, .formButtons ul li a:active {
            }

        #FormCancelOptions .notnow, #FormFinalLinks .notnow {
        }

        #FormCancelOptions .never, #FormFinalLinks .never {
            margin-right: 0;
        }

/* ####################################
   Custom Elements
   ################################## */

/*ASP.NET Form System - CCV*/
.dynamicForm{
	box-sizing:border-box;
	width:100%;
	padding:2%;
	margin:1% 0;
	display:inline-block;
	color: #666666;
    font-size: 110%;    
	background: #f1f5f8;
    border-radius: 20px;
}
	.fieldRow{
		width:96%;
		padding:0.25% 0;
		margin:1% 0;
		display:inline-block;
	}
		.fieldLabel{
			width:45%;
			padding:0;
			margin:0 5% 0 0;
			float:left;
			font-weight:normal;
			font-size:98%;
		}
			.labelHelp{
				width:20px;
				display:inline-block;
			}
			.inputRequired {
				width: 9px;
				height: 9px;
				display: inline-block;
				margin: 0 0.25em;
				background: url(/App_Sites/ccv/Templates/Default/images/icons/required_marker.gif) no-repeat;
				overflow: hidden;
				text-indent: -1000em;
			}
		.fieldInput{
			width:50%;
			float:left;
			text-align:left;
		}
			.fieldInput input[type=text],.fieldInput input[type=password],.fieldInput input[type=file],.fieldInput select,.fieldInput textarea{
				box-sizing: border-box;
				width:100%;
				padding:1.5%;
				border:1px solid #d6d6d6;
				border-radius:3px;
				background:#fff;
				border-collapse:collapse;
				outline:0;
				font-size:100%;
				color:#333333;
				font-family:"FocoCC", "Foco",Arial,Helvetica,Sans-Serif;
			}
			.fieldInput input[type="text"]:focus, .fieldInput input[type="password"]:focus,.fieldInput input[type=file]:focus, .fieldInput select:focus, .fieldInput textarea:focus{
				border:1px solid #0096D7;
			}	
			.fieldInput input[type="text"].correct, .fieldInput input[type="password"].correct,.fieldInput input[type=file].correct, .fieldInput select.correct, .fieldInput textarea.correct{
				border:1px solid #00C732;
				background:#F5F8F9 url(/App_Sites/ccv/Templates/Default/images/icons/right.png) center right no-repeat;
			}	
				.fieldInput select.correct{background-position: 95% center;}
			.fieldInput input[type="text"].wrong, .fieldInput input[type="password"].wrong,.fieldInput input[type=file].wrong, .fieldInput select.wrong, .fieldInput textarea.wrong{
				border:1px solid #D7002D;
				background:#F5F8F9 url(/App_Sites/ccv/Templates/Default/images/icons/cross.png) center right no-repeat;
			}	
				.fieldInput select.wrong{background-position: 95% center;}
			.fieldInput .fieldInputOption{
				box-sizing: border-box;
				width:100%;
				padding:0 3%;
				margin:1% 0;
				background: url(/App_Sites/ccv/Templates/Default/images/icons/right.png) top left no-repeat;
			}
			.fieldInput table{
				width:100%;
			}
			.fieldInput ul{
				width:100%;
				margin: 10px 0 0;
				padding:0;
				list-style:none;
			}
				.fieldInput ul li{
					margin:0 10px 0 0;
					display: block;
					clear: both;
				}
				.Container_ccv_nurse-cervical-screening-provider-certification-form .fieldInput ul li{
					display: block;
				}
		.fieldSubmitButton input[type="submit"],.fieldSubmitButtonStatus{
			box-sizing:border-box;
			width:100%;
			padding:2%;
			border-radius:3px;
			text-transform:uppercase;
			display:inline-block;
			background: #0095D6;
			border:none;
			color: #fff;
			float: right;
			/*font-family: Arial;*/
			font-size: 140%;
			font-family: "FocoCCBold","FocoCC","FocoBold","Foco",Arial,Helvetica,Sans-Serif;
			text-align:center;
			border-radius:50px;
			cursor:pointer;
		}
			#proceedToPayment {
				font-size: 120%;
				width: 50%;
				margin: 0 25%;
			}
			.fieldSubmitButton input[type="submit"]:hover{
				background:#F08B33;
			}
			.fieldSubmitButtonStatus{
				display:none;
			}
		.checkBoxField {
		}
			.checkBoxField .fieldLabel{
				width:90%;
				font-weight:normal;
				float: right;
			}
			.checkBoxField .fieldInput{
				width:5%;
			}
			.checkBoxField .fieldInput ul li label {
			    display: none;
			}
		.checkBoxesField {
		}
			.checkBoxesField .fieldInput label{
				width:90%;
				margin:0 0 2% 0;
				padding:0;
				float:left;
				line-height: 1em;
			}
			.checkBoxesField .fieldInput input[type="checkbox"]{
				width:auto;
				margin:0.5% 2% 2% 0;
				padding:0;
				float:left;
			}
		.fieldUpload{
			margin:1% 0;
		}
		.inputError{
			width:auto;
			height:20px;
			padding:0;
			margin:0;
			display:inline-block;
			color:#d7002d;
			font-size:80%;
		}
		.warnings{
		}
			.warnings .requiredFieldMarker {display:none;}

/*Login Form*/
#LoginPanel, #LoginStatusLong.loggedIn{
	box-sizing:border-box;
	width:100%;
	padding:2%;
	margin:1% 0;
	display:inline-block;
	color: #666666;
    font-size: 110%;    
	background: #f1f5f8;
    border-radius: 5px;
}

    #LoginPanel fieldset {
        border: none;
    }

	#LoginCredentials{
		width: 100%;
		padding:0;
		margin:0;
		border:none
	}
		#LoginCredentials legend{
			color:#0F1E64;
		}
			#LoginStatusLong.loggedIn .legend{
				margin-top:0;
				color:#0F1E64;
				background:none;
			}
			#LoginStatusLong.loggedIn .loginLinks{
				margin:4px;
			}
		#LoginCredentials .fieldContainer{
		}
			#LoginCredentials .fieldTitle{
				width:45%;
				padding:0;
				margin:0 5% 0 0;
				float:left;
				font-weight:normal;
				font-size:98%;
			}
			.loginCredentials .fieldContent{
				width:75%;
				padding:0;
				float:left;
				background:none;
				text-align:left;
			}
				.loginCredentials .fieldContent input[type=text],.loginCredentials .fieldContent input[type=password]{
					box-sizing: border-box;
					width:100%;
					padding:1.5%;
					border:1px solid #d6d6d6;
					border-radius:3px;
					background:#fff;
					border-collapse:collapse;
					outline:0;
					font-size:100%;
					color:#333333;
				}
			.submitButtons input[type="submit"]{
				box-sizing:border-box;
				width:100%;
				padding:2%;
				border-radius:3px;
				text-transform:uppercase;
				display:inline-block;
				background: #0095D6;
				border:none;
				color: #fff;
				float: right;
				/*font-family: Arial;*/
				font-size: 140%;
				font-weight: bold;
				text-align:center;
				border-radius:5px;
			}
				.submitButtons input[type="submit"]:hover{
					background:#F08B33;
				}

                .submitButtons legend {
                    display: none;
                }

    #LoginPanel .loginForm{
    }

        #LoginPanel .loginForm .loginFormTools{
            text-align: center;
        }

/* The main calendar widget.  DIV containing a table. */

	.calendar {
	  position: absolute;
	  display: none;
	  border: 1px solid;
	  border-color: #fff #000 #000 #fff;
	  font-size: 11px;
	  cursor: default;
	  background: Window;
	  color: WindowText;
	  font-family: tahoma,verdana,sans-serif;
	  z-index: 20;
	}

		.calendar table {
		  border: 1px solid;
		  border-color: #fff #000 #000 #fff;
		  font-size: 11px;
		  cursor: default;
		  background: Window;
		  color: WindowText;
		  font-family: tahoma,verdana,sans-serif;
		}

		/* Header part -- contains navigation buttons and day names. */

		.calendar .button { /* "<<", "<", ">", ">>" buttons have this class */
		  text-align: center;
		  padding: 1px;
		  border: 1px solid;
		  border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight;
		  background: #d0d0d0 url('/acoracms/images/bg_fade02.gif');
		  font-size: 110%;
		}

		.calendar .nav {
		  background: #d0d0d0  url('/acoracms/images/bg_fade02.gif');
		  height: 22px;
		  font-size: 100%;
		  font-weight: bold;
		  padding-top: 0px;
		}

		.calendar thead .title { /* This holds the current "month, year" */
		  font-weight: bold;
		  padding: 1px;
		  border: 1px solid #000;
		  background: #000;
		  color: CaptionText;
		  text-align: center;
		  font-size: 100%;
		  height: 22px;
		}

		.calendar thead .headrow { /* Row <TR> containing navigation buttons */
		}

		.calendar thead .daynames { /* Row <TR> containing the day names */
		}

		.calendar thead .name { /* Cells <TD> containing the day names */
		  border-bottom: 1px solid ButtonShadow;
		  padding: 2px;
		  text-align: center;
		  background: #d0d0d0;
		  color: ButtonText;
		  font-size: 100%;
		}

		.calendar thead .weekend { /* How a weekend day name shows in header */
		  color: #f00;
		  font-size: 100%;
		}

		.calendar thead .hilite { /* How do the buttons in header appear when hover */
		  border: 2px solid;
		  padding: 0px;
		  border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight;
		}

		.calendar thead .active { /* Active (pressed) buttons in header */
		  border-width: 1px;
		  padding: 2px 0px 0px 2px;
		  border-color: ButtonShadow ButtonHighlight ButtonHighlight ButtonShadow;
		}

		/* The body part -- contains all the days in month. */

		.calendar tbody .day { /* Cells <TD> containing month days dates */
		  width: 2em;
		  text-align: right;
		  padding: 2px 4px 2px 2px;
		  font-size: 100%;
		}
		.calendar tbody .day.othermonth {
		  font-size: 80%;
		  color: #aaa;
		  font-size: 100%;
		}
		.calendar tbody .day.othermonth.oweekend {
		  color: #faa;
		  font-size: 100%;
		}

		.calendar table .wn {
		  padding: 2px 3px 2px 2px;
		  border-right: 1px solid ButtonShadow;
		  background: #d0d0d0;
		  color: ButtonText;
		  font-size: 100%;
		}

		.calendar tbody .rowhilite td {
		  background: Highlight;
		  color: HighlightText;
		}

		.calendar tbody td.hilite { /* Hovered cells <TD> */
		  padding: 1px 3px 1px 1px;
		  border-top: 1px solid #fff;
		  border-right: 1px solid #000;
		  border-bottom: 1px solid #000;
		  border-left: 1px solid #fff;
		}

		.calendar tbody td.active { /* Active (pressed) cells <TD> */
		  padding: 2px 2px 0px 2px;
		  border: 1px solid;
		  border-color: ButtonShadow ButtonHighlight ButtonHighlight ButtonShadow;
		}

		.calendar tbody td.selected { /* Cell showing selected date */
		  font-weight: bold;
		  border: 1px solid;
		  border-color: ButtonShadow ButtonHighlight ButtonHighlight ButtonShadow;
		  padding: 2px 2px 0px 2px;
		  background: #e0e0e0;
		  color: ButtonText;
		}

		.calendar tbody td.weekend { /* Cells showing weekend days */
		  color: #f00;
		  font-size: 100%;
		}

		.calendar tbody td.today { /* Cell showing today date */
		  font-weight: bold;
		  color: #00f;
		}

		.calendar tbody td.disabled { color: GrayText; }

		.calendar tbody .emptycell { /* Empty cells (the best is to hide them) */
		  visibility: hidden;
		}

		.calendar tbody .emptyrow { /* Empty row (some months need less than 6 rows) */
		  display: none;
		}

		/* The footer part -- status bar and "Close" button */

		.calendar tfoot .footrow { /* The <TR> in footer (only one right now) */
		}

		.calendar tfoot .ttip { /* Tooltip (status bar) cell <TD> */
		  background: #e0e0e0;
		  padding: 1px;
		  border: 1px solid;
		  border-color: ButtonShadow ButtonHighlight ButtonHighlight ButtonShadow;
		  color: ButtonText;
		  text-align: center;
		  font-size: 100%;
		}

		.calendar tfoot .hilite { /* Hover style for buttons in footer */
		  border-top: 1px solid #fff;
		  border-right: 1px solid #000;
		  border-bottom: 1px solid #000;
		  border-left: 1px solid #fff;
		  padding: 1px;
		  background: #e4e0d8;
		}

		.calendar tfoot .active { /* Active (pressed) style for buttons in footer */
		  padding: 2px 0px 0px 2px;
		  border-top: 1px solid #000;
		  border-right: 1px solid #fff;
		  border-bottom: 1px solid #fff;
		  border-left: 1px solid #000;
		}

		/* Combo boxes (menus that display months/years for direct selection) */

		.calendar .combo {
		  position: absolute;
		  display: none;
		  width: 4em;
		  top: 0px;
		  left: 0px;
		  cursor: default;
		  border: 1px solid;
		  border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight;
		  background: Menu;
		  color: MenuText;
		  font-size: 90%;
		  padding: 1px;
		  z-index: 100;
		  font-size: 110%;
		}

		.calendar .combo .label,
		.calendar .combo .label-IEfix {
		  text-align: center;
		  padding: 1px;
		}

		.calendar .combo .label-IEfix {
		  width: 4em;
		}

		.calendar .combo .active {
		  padding: 0px;
		  border: 1px solid #000;
		}

		.calendar .combo .hilite {
		  background: Highlight;
		  color: HighlightText;
		}

		.calendar td.time {
		  border-top: 1px solid ButtonShadow;
		  padding: 1px 0px;
		  text-align: center;
		  background-color: #e0e0e0;
		  font-size: 100%;
		}

		.calendar td.time .hour,
		.calendar td.time .minute,
		.calendar td.time .ampm {
		  padding: 0px 3px 0px 4px;
		  border: 1px solid #889;
		  font-weight: bold;
		  background-color: Menu;
		}

		.calendar td.time .ampm {
		  text-align: center;
		}

		.calendar td.time .colon {
		  padding: 0px 2px 0px 3px;
		  font-weight: bold;
		}

		.calendar td.time span.hilite {
		  border-color: #000;
		  background-color: Highlight;
		  color: HighlightText;
		}

		.calendar td.time span.active {
		  border-color: #f00;
		  background-color: #000;
		  color: #0f0;
		}
		
		#FormSystem #Row-google-recaptcha-response{display:none;}
		#FormSystem .fieldRow .fieldInput .datePopup {
			width: 200px;
			padding-right: 40px;
			background: url(/App_Sites/ccv/Javascript/calendar/calendar-icon.png) center right no-repeat !important;
		}
		/*Overrides to Form styles*/
		#Row-FormSystem{text-align:center;}
		#DynamicFormWrapper{width:100%;margin:0;}
		.fieldRow {margin: 0.5% 0;}
		.fieldInput,.fieldLabel {width: 100%;padding:0;margin:0;}
            .fieldDescription {
                width: 100%;
                clear: both;
            } 
		.fieldLabel label{font-weight:bold;}
		.fieldInput input[type=text], .fieldInput input[type=password], .fieldInput input[type=file], .fieldInput select, .fieldInput textarea {
			padding:0.75%;
		}
		#FormSystem .fieldSubmitButton input[type='submit'], #FormSystem .fieldSubmitButtonStatus{
			box-sizing: border-box;
			width: auto;
			padding: 10px 65px;
			margin: 0 auto;
			float:none;
			font-size: 115%;
			background: #ffd200;
			font-size: 100%;
			color: #0f1e64;
			font-family:"FocoCCBlack", "FocoBlack", Arial, Helvetica, Sans-Serif;
			text-transform:unset;
		}
		#FormSystem .fieldSubmitButton input[type='submit']:hover{background: #fff000;}
		#DynamicFormFooterContent{background:#fff;}
		@media screen and (max-width: 600px) {
			#FormSystem .fieldSubmitButton input[type='submit'], #FormSystem .fieldSubmitButtonStatus{width:100%;padding:4%;}
		}

/* ############################################################################
   ##
   ##  Layout for Different Screen Sizes
   ##  Note: Extends DefaultScreenSizes.css
   ##
   ##  Be sure to co-ordinate these layouts with the responsive sizes used in
   ##  DefaultScreenSizes.css or you'll run into trouble.
   ##
   ######################################################################### */
   
@media only screen and (max-width:920px){
/*Form*/
.dynamicForm{
}
	.fieldRow{
	}
		.fieldLabel{
			width:99%;
			margin:0;
			padding:0.5%;
		}
		.fieldInput{
			width:99%;
			padding:0.5%;
		}
}

@media screen and (max-width: 480px) {

    #FormPage .twoCols1 .fieldContainer .fieldTitle, .formPanel.twoCols1 .fieldContainer .fieldTitle {
        float: none;
        width: 100%;
        max-width: 100%;
        padding: 1% 0;
    }

    #FormPage .twoCols1 .fieldContainer .fieldContent, .formPanel.twoCols1 .fieldContainer .fieldContent {
        float: none;
        width: 100%;
        max-width: 100%;
        padding: 1% 0;
    }

    #FormPage .twoCols1 .matrixField td, .formPanel.twoCols1 .matrixField td,
    #FormPage .oneCol1 .matrixField td, .formPanel.oneCol1 .matrixField td {
        float: left;
    }

}

/* ####################################
   The global ASP.Net form
   - DON'T CHANGE
   - Override some values to stop the form styles breaking other parts of the site design.
   ################################## */

#CmsPage {
    position: relative !important;
    float: none !important;
    width: auto !important;
    height: auto !important;
    margin: auto !important;
    padding: 0 !important;
}