/* IE10 specific styles - prepend with .ie10   accompanying script in mainlayout */
.ie10 .aaformsRadioButtonsHorizontalSurvey label { border: none; width: 15px; font-size: 1.2em; font-weight: normal; color: #5c6776; display: inline-block; float: left; padding: 8px 15px 0px 0px; vertical-align: middle; }

/* ##############################################################################*/
/* changes to screen.css as it applies to forms*/
ul.actionList { width: auto; border: none; height: auto; min-height: 0px !important; }
    ul.actionList li { list-style-type: none; }

/* ##############################################################################*/
.requiredMsg, .requiredMsg p { color: #ce0101; font-size: x-small; display: block; padding-top: 0px; }
.requiredMsgNote { color: #ce0101; font-size: x-small; }
.requiredFieldIndicator { color: #ce0101; font-size: small; width: 20px; vertical-align: top; text-align: center; display: inline-block; float: left; padding-top: 5px; }
.notRequiredFieldIndicator { color: #5c6776; font-size: small; width: 20px; vertical-align: top; text-align: center; display: inline-block; float: left; padding-top: 5px; }

/* ##############################################################################*/

.footNote { font-size: 10px !important; font-weight: normal; }
.terms { width: 620px; clear:both }
.privacy { margin-top: 10px; margin-bottom: 10px; }
.privacyLock { float: right; margin: 0px 5px 5px 10px; }
    .privacyLock img { border: 0; width: 32px; height: 32px; }
hr.privacyHR { margin-top: 10px; margin-bottom: 10px; width: 100%; height: 1px; color: silver; border: 0; }

/* ##############################################################################*/
.highlightBox, .explainText { border: 1px solid #CCCCCC; color: #5c6776; background-color: white; padding: 10px 10px 0px 10px; margin-bottom: 20px; margin-left: 0px; margin-right: 13px; width: 96%; line-height: normal; font-size: 1.0em; }
.explainText { width: auto; border-color: #005dab; padding: 10px 10px 10px 10px; margin-top: 5px; margin-bottom: 10px; }
    .highlightBox p, .highlightBox li, .explainText p, .explainText li { font-size: 0.8em !important; line-height: normal !important; }
    .highlightBox ul, .explainText ul { margin-left: 20px; list-style-type: disc; margin-bottom: 8px; }
    .highlightBox ol, .explainText ol { margin-left: 0px; margin-bottom: 8px; }
    .highlightBox ul li, .explainText ul li { padding-left: 10px; }
    .highlightBox ol li, .explainText ol li { padding-left: 0px; margin-left: 10px; }
    .highlightBox .footNote, .explainText .footNote { font-size: x-small; }
    .highlightBox h3, .explainText h3 { color: #005dab; padding-bottom: 0px; margin-bottom: 10px; font-size: 1em; }
.highlightBox h4 { margin-bottom: 10px; }
.highlightBox pop { margin-top: 20px; padding: 10px; background-color: LightYellow; font-size: 1.2em; line-height: 1.2em; font-weight: bold; }
.highlightBox .highlightBox { font-size: 1.0em; }

/* ################################################################## */
/*  calendar styles */

.calendarColumn { float: left; margin-left: 20px; }
.calendarIcon { float: left; padding-top: 3px; margin-left: 5px; margin-right: 10px; width: 16px; height: 16px; }
.calendar { width: 160px; border: 1px solid gray; padding: 0; margin: 0; }
.calendarTitle { color: white; background-color: #005dab; padding: 0; margin: 0; border: 0; }
.calendarNextPrevious, .calendarNextPrevious a { color: white !important; text-decoration: none; }
.calendarDayHeader { font-size: smaller; background-color: white; color: #5c6776; border-bottom: 1px solid #5c6776; }
.calendarOtherMonth, calendarOtherMonth a { color: black; background-color: LightSteelBlue; text-decoration: underline; }
.calendarDays, .calendarDays a { background-color: AliceBlue; color: black !important; text-decoration: underline; }
.calendarSelectedDay { font-weight: bold; background-color: #005dab !important; color: white; border-style: solid; border-width: 1px; border-color: cornflowerblue; }
.calendarToday { border: solid 1px goldenrod; color: mediumblue !important; font-weight: bold; }
    .calendarToday a { color: mediumblue !important; }
.calendarDaysDisabled, .calendarDaysDisabled a { background-color: lightgray; color: gray; text-decoration: none; }

/* ##############################################################################*/
/* used for sub headings within radion button lists */
p.listSubHeading { margin-top: 5px; margin-bottom: 2px; font-weight: bold; }

/*adds units next to form fields */
.units { font-size: 10px; font-weight: normal; float: left; padding-top: 5px; color: #5c6776; margin-left: 10px; }
.subFieldsSection { width: 90%; margin-left: 20px; }

/* ##############################################################################*/
/* form layout */

/* name of the form sits within this section */
.formHeadersSection { width: 100%; margin-top: 10px; float: left; }

/* outer container for form - creates a white border around the next layer down*/
.contactForm { width: 680px; background-color: White; margin-top: 0px; margin-bottom: 20px; border: 1px solid #E2E2E2; padding: 7px 7px 7px 7px; background-image: none; }
    .contactForm ul { font-size: 1.1em; }
        .contactForm ul li { font-size: 1.1em; margin-bottom: 0.3em; }
    .contactForm label { width: 200px; font-size: 1.0em; font-weight: bold; color: #5c6776; display: inline-block; float: left; padding-top: 5px; }
    .contactForm fieldset { padding: 5px; margin: 0px; border: 1px solid #cccccc; -moz-border-radius: 5px; border-radius: 5px; -webkit-border-radius: 5px; }

/* used in the Wizards for multi-step forms */
.contactFormContent { height: auto !important; min-height: 500px; width: 620px; }

/* creates a grey background */
.contactFormMiddle { background-color: #ecf0f4; background-image: none; padding: 20px 20px 15px; }

/* container within the fieldset */
.contactFormContainer { padding: 5px 5px 5px 5px; vertical-align: top; font-size: 1.1em; font-weight: normal; color: #5c6776; vertical-align: top; }
.formSidebar { width: 200px; vertical-align: top; border-right: solid 1px silver; }

/* sections that contain the form fields and buttons, bounded by horizontal line */
.formFields, .formButtons { /*background: url(/images/framework/bg_ruleTile.png) 0 0 repeat-x;*/ border-top: 1px solid #cccccc; padding-top: 10px; position: relative; overflow: hidden; clear: both; }
.formButtons { padding: 20px 0px 20px 0px; }
.formFields { width: 620px; vertical-align: top; }
.formRow { width: 100%; padding-bottom: 8px; clear: left; }
    .formRow p { font-size: 1.0em !important; }

/* fieldsets within the form fields - eg for sub-groups of fields*/
.formFields fieldset { margin: 0px 5px 8px 5px; padding: 10px 10px 0px 10px; width: 590px; clear: both; }
    .formFields fieldset legend { font-weight: bold; font-size: 1.2em; margin-bottom: 10px; padding-left: 2px; padding-right: 10px; color: #55606F; }
legend .requiredFieldIndicator { color: #ce0101; font-size: small; width: auto; display: inherit; float: none; padding-top: 0px; width: 30px; text-align: right; }
.formFieldsShort { width: 320px; vertical-align: top; margin-left: 10px; }
.formButtonsHidden { visibility: hidden; }
.btnInput { width: 76px !important; height: 32px !important; border: none !important; }

/* ######################################################################*/
/* testing CSS button stuff - not in use*/
/*input[type="submit"], input[type="reset"] { 
  border: solid 1px #ccc; padding: 0.4em 0.7em; color: white; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; */
/*To make the state change a little real*/
/* -webkit-transition: background-color 200ms linear;  /*Safari and Chrome*/
/* -moz-transition: background-color 200ms linear;  /*Firefox*/
/* -o-transition: background-color 200ms linear; /*opera*/
/* -ms-transition: background-color 200ms linear; transition: all 200ms linear; background-color: #16a6b6; cursor: pointer; text-align: center; }
  input[type="submit"]:hover, input[type="reset"]:hover, .button:hover { background: #ee6557; }
  input[type="submit"]:active, input[type="reset"]:active, .button:active { background: rgba(255,51,0,1); }*/

/* ######################################################################*/

.visible { display: inline-block; }
.hidden { display: none; }
.contactForm ul li { font-size: 1.1em; margin-bottom: 0.3em; }



/* ##############################################################################*/
/* validation summary section */
.aaformsErrorSummary { display: inline-block; font-size: 1.2em; color: #ce0101; margin: 5px 0 10px 0px; font-weight: normal; }
    .aaformsErrorSummary ul { margin-top: 10px; }
        .aaformsErrorSummary ul li { font-size: 1.0em; color: #ce0101; margin-bottom: 0.3em; line-height: 1.0em; }

/* ##############################################################################*/
/* Sections for error handling and further information on a form input */
.formRow .errorHandling, .formFieldsShort .errorHandling { clear: both; padding-top: 5px; margin-left: 220px; }
.formFieldsShort .errorHandling { margin-left: 120px; }
.furtherInfo, .furtherInfoLeft { clear: both; margin-left: 220px; font-size: 10px; padding-top: 5px; color: #5c6776; }
.furtherInfoLeft { margin-left: 0px; }

/* ##############################################################################*/

.formHeaderRow { position: relative; overflow: hidden; clear: both; font-weight: bold; padding: 5px 2px 3px 2px; margin-bottom: 10px; }
    .formFields h3, .formHeaderRow h3 { color: #005dab; padding-bottom: 0px; margin-bottom: 0px; font-size: 1.5em; }
.formFields h3 { padding-bottom: 10px; }
.formFields textarea { width: 356px; height: 30px; border: 1px solid #d0d0d0; padding: 5px 0 5px 5px; font-size: 1.1em; }
    .formFields textarea.formComments { width: 356px; height: 90px; border: 1px solid #d0d0d0; padding: 5px 0 5px 5px; font-size: 1.1em; }

.error { display: inline-block; font-size: 1.1em; color: #ce0101; margin: 5px 0 10px 0px; font-weight: normal; }
h3.servicesWizard { color: #717f92; }

/* ################################################################## */
/* input fields */
.formRow input { width: 360px; /**/ height: 16px; border: 1px solid #d0d0d0; float: left; padding: 5px 0 5px 5px; font-size: 1.1em; }

/* input fields */
.formRow select { height: 26px; border: 1px solid #d0d0d0; float: left; padding: 2px 0 2px 5px; font-size: 1.1em; outline: none; box-shadow: none; }
/* ################################################################## */
/* create columns within fieldset*/

fieldset .columnContainer { clear: left; margin-bottom: 10px; }
    fieldset .columnContainer.last { padding-bottom: 10px; }
fieldset .columns3across, fieldset .columns3acrossMainFirst, fieldset .columns3acrossMainSecond, fieldset .columns3acrossMainChild { float: left; margin-right: 10px; }
    fieldset .columns3across:last-child, fieldset .columns3acrossMainFirst:last-child, fieldset .columns3acrossMainSecond:last-child, fieldset .columns3acrossMainChild:last-child { margin-right: 0px; }
fieldset .columns3across { width: 187px; }
fieldset .columns3acrossMainFirst, fieldset .columns3acrossMainSecond { width: 118px; }
    fieldset .columns3acrossMainFirst:first-child { width: 245px; }
fieldset .columns3acrossMainChild { width: 245px; }
fieldset .columns2across { width: 287px; float: left; margin-right: 10px; }
    fieldset .columns2across:last-child { margin-right: 0px; }
    fieldset .columns2across input, fieldset .columns3acrossMainFirst:first-child input, fieldset .columns3acrossMainChild input { width: 220px; }
fieldset .columns1across { width: 585px; float: left; }
.columnContainer label { width: auto; font-size: 1.0em; font-weight: bold; color: #5c6776; float: left; }
    .columnContainer label:after { clear: both; }
.columnContainer .errorHandling { clear: left; }
.columnContainer input { clear: left; float: left; margin-top: 5px; border: 1px solid #d0d0d0; height: 16px; padding: 5px 0 5px 5px; font-size: 1.1em; }
.columnContainer select { clear: left; float: left; margin-top: 5px; border: 1px solid #d0d0d0; height: 26px; padding: 2px 0 2px 5px; font-size: 1.0em; outline: none; box-shadow: none; }

/* ################################################################## */


.aaformsDateField { width: 90px !important; }
.aaformsPhoneField { width: 120px !important; }
.aaformsPostcodeField { width: 50px !important; }
.aaformsTitleField, .aaformsShortNumberField { width: 70px !important; }
.aaformsVeryShortNumberField { width: 30px !important; }
.aaformsMediumLengthField { width: 160px !important; }
.aaformsMediumLongLengthField { width: 260px !important; }
.aaformsFileUploadControl { width: 270px !important; height: 16px; background-color: White; font-size: 1.2em; border: 1px solid #d0d0d0; float: left; padding: 5px 0 5px 5px; }

/* ################################################################## */
/* radio buttons - vertical list */
.aaformsRadioButtonsVertical { float: left; display: inline; padding-top: 5px; }
    .aaformsRadioButtonsVertical input[type=radio], .aaformsRadioButtonsVertical input[type=checkbox] { width: auto !important; height: 16px; border: none; margin-top: 5px; padding: 5px 0px 5px 0px; font-size: 1.1em; vertical-align: top; float: left; }
    .aaformsRadioButtonsVertical label { border: none; width: auto !important; font-size: 1.0em; font-weight: normal; color: #5c6776; padding-top: 3px; vertical-align: top; float: left; margin-left: 20px; display: block; }

.formFields fieldset .aaformsRadioButtonsVertical label { width: 300px !important; }

.aaformsRadioButtonsVerticalR2 input { width: auto !important; height: 16px; border: none; margin-top: 0px; padding: 0px 0px 5px 0px; font-size: 1.1em; vertical-align: top; float: none; }

ul.aaformsRadioButtonsVerticalR3 { background-image: none; list-style-image: none; list-style-type: none; padding-left: 0px; font-size: 1.0em; margin-left: 0px; margin-top: 0px; }
.aaformsRadioButtonsVerticalR3 input[type=radio], .aaformsRadioButtonsVerticalR3 input[type=checkbox] { width: auto !important; height: 16px; border: none; margin-top: 3px; padding: 5px 0px 5px 0px; font-size: 1.1em; vertical-align: top; float: left; }
ul.aaformsRadioButtonsVerticalR3 li { background-image: none; list-style-image: none; list-style-type: none; font-size: 1.0em; margin-left: 0px; clear: left; }
    ul.aaformsRadioButtonsVerticalR3 li:after { content: ""; clear: both; display: table; }
    ul.aaformsRadioButtonsVerticalR3 li input { margin-top: 3px; float: left; width: auto !important; height: 16px; border: none; padding: 5px 0px 5px 0px; font-size: 1.1em; vertical-align: top; }
    ul.aaformsRadioButtonsVerticalR3 li label { border: none; width: 550px; font-size: 1.0em; font-weight: normal; color: #5c6776; padding-top: 0px; padding-bottom: 5px; vertical-align: top; float: left; margin-left: 10px; display: block; }

/* ################################################################## */
/* radio buttons - vertical matrix list */
.aaformsRadioButtonsVerticalMatrix { float: left; display: block; padding-top: 0px; background-image: none; list-style-image: none; list-style-type: none !important; padding-left: 0px; }

    .aaformsRadioButtonsVerticalMatrix li { background-image: none; list-style-image: none; list-style-type: none !important; margin-left: 0px; padding-bottom: 10px; margin-bottom: 0px; }
    .aaformsRadioButtonsVerticalMatrix input { width: auto !important; height: 16px; border: none; margin-bottom: 13px; padding: 13px 0px 0px 0px; font-size: 1.1em; vertical-align: top; float: none; }

    .aaformsRadioButtonsVerticalMatrix li input { width: auto !important; border: none; margin-bottom: 0px; padding: 15px 0px 0px 0px; font-size: 1.1em; vertical-align: top; float: none; }
    .aaformsRadioButtonsVerticalMatrix li label { padding-top: 0px; width: 1px; }

ul.aaformsRadioButtonsVertical { background-image: none; list-style-image: none; list-style-type: none; padding-left: 0px; font-size: 1.0em; margin-left: 0px; margin-top: 0px; }
    ul.aaformsRadioButtonsVertical li { background-image: none; list-style-image: none; list-style-type: none; font-size: 1.0em; margin-left: 0px; clear: left; }
        ul.aaformsRadioButtonsVertical li:after { content: ""; clear: both; display: table; }
        ul.aaformsRadioButtonsVertical li input[type=radio], ul.aaformsRadioButtonsVertical li input[type=checkbox] { margin-top: 3px; padding-left: 0px; float: left; }
        ul.aaformsRadioButtonsVertical li label { padding-top: 0px; float: left; margin-left: 10px; display: block; width: 340px !important; }

/* ################################################################## */
/* radio buttons - horizonal list */

.aaformsRadioButtonsHorizontal input, .aaformsRadioButtonsHorizontal4 input, .aaformsRadioButtonsHorizontal2across input, .aaformsRadioButtonsHorizontal3across input, .aaformsRadioButtonsHorizontalSurvey input { border: none; width: auto !important; border: none; float: left; vertical-align: top; display: inline-block; margin-top: 5px; margin-left: 5px; padding-left: 0px; }
.aaformsRadioButtonsHorizontalSurvey label { border: none; width: 15px; font-size: 1.2em; font-weight: normal; color: #5c6776; display: inline-block; float: left; padding: 4px 15px 0px 0px; vertical-align: middle; }
.aaformsRadioButtonsHorizontal label, .aaformsRadioButtonsHorizontal2across label, .aaformsRadioButtonsHorizontal3across label { border: none; width: 100px; font-size: 1.0em; font-weight: normal; color: #5c6776; display: inline-block; float: left; padding: 3px 10px 10px 0px; vertical-align: middle; }

.aaformsRadioButtonsHorizontal2across label { width: 155px; }
.aaformsRadioButtonsHorizontal3across label { padding-right: 2px; }
.aaformsRadioButtonsHorizontal4 label { border: medium none; color: #5c6776; display: inline-block; float: left; font-size: 1.2em; font-weight: bold; padding: 5px 10px 10px 0; vertical-align: middle; width: 100px; }
ul.aaformsRadioButtonsHorizontal, ul.aaformsRadioButtonsHorizontal2across, ul.aaformsRadioButtonsHorizontal3across, ul.aaformsRadioButtonsHorizontalSurvey { background-image: none; list-style-image: none; list-style-type: none; padding-left: 0px; font-size: 1.0em; }
    ul.aaformsRadioButtonsHorizontal li, ul.aaformsRadioButtonsHorizontal2across li, ul.aaformsRadioButtonsHorizontal3across li, ul.aaformsRadioButtonsHorizontalSurvey li { background-image: none; list-style-image: none; list-style-type: none; font-size: 1.0em; margin-left: 0px; float: left; }
        ul.aaformsRadioButtonsHorizontal li input, ul.aaformsRadioButtonsHorizontal2across li input, ul.aaformsRadioButtonsHorizontal3across li input, ul.aaformsRadioButtonsHorizontalSurvey li input { margin-top: 5px; padding-left: 0px; padding-top: 5px; }
        ul.aaformsRadioButtonsHorizontal li label, ul.aaformsRadioButtonsHorizontal2across li label, ul.aaformsRadioButtonsHorizontal3across li label, ul.aaformsRadioButtonsHorizontalSurvey li label { padding-top: 5px; padding-bottom: 10px; width: 100px; }
        ul.aaformsRadioButtonsHorizontalSurvey li label { width: 15px; }
        ul.aaformsRadioButtonsHorizontal2across li label { width: 110px; }
        ul.aaformsRadioButtonsHorizontal3across li label { padding-right: 2px; }
        ul.aaformsRadioButtonsHorizontal li:last-child label, ul.aaformsRadioButtonsHorizontal2across li:last-child label, ul.aaformsRadioButtonsHorizontal3across li:last-child label, ul.aaformsRadioButtonsHorizontalSurvey li:last-child label { padding-right: 0px; }

/* ################################################################## */
/* displays 2 across */

div.aaformsRadioButtonsHorizontalContainer { float: left; max-width: 370px; }
.aaformsRadioButtonsHorizontal2across label, ul.aaformsRadioButtonsHorizontal2across li label { width: 155px; }
.aaformsRadioButtonsHorizontal2across:last-child label, .aaformsRadioButtonsHorizontal3across:last-child label, ul.aaformsRadioButtonsHorizontal3across li:last-child, ul.aaformsRadioButtonsHorizontal2across li:last-child label { padding-right: 0px; }
.aaformsRadioButtonsHorizontal3across label, ul.aaformsRadioButtonsHorizontal3across li label { width: 100px; vertical-align: top; }

/* ################################################################## */
/* check boxes */
.aaformsCheckBox { float: left; }
span.aaformsCheckBox input { width: 30px !important; height: 16px; border: none; float: left; padding: 5px 0 5px 5px; font-size: 1.1em; vertical-align: top; clear: both; }
span.aaformsCheckBox label { width: auto; font-size: 1.2em; font-weight: bold; color: #5c6776; display: inline-block; float: left; padding-top: 0px; vertical-align: top; }
.formFields .aaformsCheckBoxFullWidth { float: left; width: 95%; padding-top: 5px; }
    .formFields span.aaformsCheckBoxFullWidth input, .formFields .aaformsCheckBoxFullWidth input { width: 30px !important; height: 16px; border: none; float: left; padding: 5px 0 5px 5px; font-size: 1.1em; vertical-align: top; list-style-type: none; }
    .formFields span.aaformsCheckBoxFullWidth label, .formFields .aaformsCheckBoxFullWidth label { width: 90%; font-size: 1.0em; font-weight: bold; color: #5c6776; display: inline-block; padding-top: 0px; float: left; vertical-align: top; list-style-type: none; }
.formFields ul.aaformsCheckBoxFullWidth { background-image: none; list-style-image: none; list-style-type: none; padding-left: 0px; padding-top: 5px; font-size: 1.0em; float: left; margin-left: 0px; margin-top: 0px; }
    .formFields ul.aaformsCheckBoxFullWidth li { background-image: none; list-style-image: none; list-style-type: none; font-size: 1.0em; margin-left: 0px; clear: left; }
        .formFields ul.aaformsCheckBoxFullWidth li input { margin-top: 0px; padding-left: 0px; padding-top: 5px; float: left; }
        .formFields ul.aaformsCheckBoxFullWidth li label { padding: 0px 0px 0px 5px; width: 500px; float: left; font-weight: bold; }
.formFields .aaformsCheckBoxFullWidthNormal { float: left; width: 95%; padding-top: 5px; }
    .formFields span.aaformsCheckBoxFullWidthNormal input, .formFields .aaformsCheckBoxFullWidthNormal input { width: 30px !important; height: 16px; border: none; float: left; padding: 5px 0 5px 5px; font-size: 1.1em; vertical-align: top; list-style-type: none; }
    .formFields span.aaformsCheckBoxFullWidthNormal label, .formFields .aaformsCheckBoxFullWidthNormal label { width: 90%; font-size: 1.0em; font-weight: normal; color: #5c6776; display: inline-block; padding-top: 0px; float: left; vertical-align: top; list-style-type: none; }
.formFields ul.aaformsCheckBoxFullWidthNormal { background-image: none; list-style-image: none; list-style-type: none; padding-left: 0px; padding-top: 5px; font-size: 1.0em; float: left; margin-left: 0px; margin-top: 0px; }
    .formFields ul.aaformsCheckBoxFullWidthNormal li { background-image: none; list-style-image: none; list-style-type: none; font-size: 1.0em; margin-left: 0px; clear: left; }
        .formFields ul.aaformsCheckBoxFullWidthNormal li input { margin-top: 0px; padding-left: 0px; padding-top: 5px; float: left; }
        .formFields ul.aaformsCheckBoxFullWidthNormal li label { padding: 0px 0px 0px 5px; width: 500px; float: left; font-weight: normal; }

.aaformsCheckBox2 { float: left; }
span.aaformsCheckBox2 { margin-left: 195px; }
    span.aaformsCheckBox2 input { width: 30px !important; height: 16px; border: none; float: left; padding: 5px 0 5px 5px; vertical-align: top; clear: both; }
    span.aaformsCheckBox2 label { width: auto; font-weight: normal; color: #5c6776; display: inline-block; float: left; padding-top: 0px; vertical-align: top; font-size: 1.2em; }

.aaformsCheckBox3 { float: left; }
span.aaformsCheckBox3 input { width: 30px !important; height: 16px; border: none; float: left; padding: 5px 0 5px 5px; vertical-align: top; clear: both; }
span.aaformsCheckBox3 label { width: auto; font-weight: bold; color: #5c6776; display: inline-block; float: left; padding-top: 3px; vertical-align: top; font-size: 1.0em; }


/* ################################################################## */
/* this is used on the solar form (electricity special request) to place rows around the picture */
.formFieldsShort .formRow { padding-bottom: 0px; }
.formFieldsShort label { width: 120px; font-size: 1.1em; font-weight: bold; color: #5c6776; display: inline-block; float: left; padding-top: 5px; }
.formFieldsShort input { padding-bottom: 3px !important; }
.formFieldsShort p { margin-bottom: 10px; }
.formFieldsShort fieldset { margin: 2px !important; padding: 5px 5px 0px 5px !important; width: 310px !important; }
    .formFieldsShort fieldset legend { font-weight: bold; font-size: 1.1em; margin-top: 0px; margin-bottom: 8px; padding-left: 2px; padding-right: 10px; color: #5c6776; }
    .formFieldsShort fieldset label { width: 110px !important; font-size: 1.1em !important; }
        .formFieldsShort fieldset label.shortLabel { width: 80px !important; font-size: 1.1em !important; }
    .formFieldsShort fieldset .formRow { padding-bottom: 3px !important; }
        .formFieldsShort fieldset .formRow input { padding-bottom: 3px !important; }
    .formFieldsShort fieldset .requiredFieldIndicator { width: 10px !important; padding: 0px !important; font-size: 1.1em !important; }
.formFieldsShort .twoUpColumnHeader { width: 70px !important; margin-right: 5px !important; font-size: 0.9em !important; font-weight: bold !important; color: #5c6776 !important; display: inline-block !important; float: left !important; }
.formFieldsShort .aaformsMediumLengthField { width: 160px !important; }
.formFieldsShort .aaformsShortNumberField { width: 60px !important; margin-right: 5px !important; }

/* ################################################################## */
/* "add item" section */
.addItemHeaderTable, .addItemTable, .addItemFooterTable { margin: 0px; width: 590px; }
.addItemTableDescription, .addItemTableAmount, .addItemTableButtons, .addItemTableColumn { padding: 5px; color: #5c6776; font-size: 1.0em; vertical-align: top; border-bottom: 1px solid #aaaaaa; }
.addItemTableColumn { border-bottom: none; }
.addItemTableAmount { text-align: right; width: 60px; }
.addItemTableButtons { text-align: right !important; width: 150px; }
    .addItemTableButtons input { padding: 0px !important; float: none !important; }
.addItemTableColumn { width: 285px; }
    .addItemTableColumn label { width: 100px; }
    .addItemTableColumn input { width: 150px; }
    .addItemTableColumn .formRow .errorHandling { margin-left: 120px; }
.headerAddItems { padding: 5px 5px 10px 5px; color: #5c6776; font-weight: bold; font-size: 1.0em; }
.footerAddItems, .footerAddItemsTotal { border-top: 1px solid #aaaaaa; border-bottom: 1px solid #aaaaaa; padding-top: 10px; padding-bottom: 10px; color: #5c6776; font-weight: bold; font-size: 1.0em; }
.footerAddItemsTotal { text-align: right; width: 60px; }
.btnLineItem { width: 50px !important; height: 28px !important; padding: 5px; margin-left: 10px; background-color: lightsteelblue; border: 1px solid #005dab !important; }
.btnAddNewItem { width: auto !important; height: 30px !important; padding: 5px; font-size: 1.0em; margin-left: 5px; }
    .btnLineItem:hover, .btnAddNewItem:hover { color: white; background-color: #005dab; cursor: pointer; }

/* ################################################################## */
/* Class on actual buttons */
.buttons { border: none; width: auto; }

/* ################################################################## */
/* Progress bar for multi-part forms */
.progressIndicator { width: 97%; text-align: right; border-bottom: 1px solid #cccccc; margin-bottom: 15px; }
.progressIndicatorOff { background-color: #ecf0f4; }
.progressBar { float: right; margin-bottom: 0px; margin-top: 10px; text-align: left; border-collapse: collapse; border-style: none; }
.progressHeader { color: #666666; font-weight: bold; margin-bottom: 5px; margin-top: 0px; }
.progressBarHeader { float: left; }
.progressItem { border-style: none; vertical-align: middle; text-align: center; border-collapse: collapse; width: 50px; height: 40px; font-size: xx-small; }
.progressStatusOff { color: white; background-image: url(/images/framework/forms/progressBar_Tab_off.gif); background-repeat: no-repeat; background-color: #ecf0f4; border-style: none; border-collapse: collapse; }
    .progressStatusOff a { color: white; text-decoration: none; }
.progressStatusOn { background-image: url(/images/framework/forms/progressBar_Tab_on.gif); background-repeat: no-repeat; background-color: #ecf0f4; color: #555555 !important; border-style: none; border-collapse: collapse; }
    .progressStatusOn a { color: #167FBF; text-decoration: none; }

/* ################################################################## */
/* ------------- receipt summary -----------------------*/
.formReceipt { font-family: Tahoma, Verdana, sans-serif; font-size: 12px; border-collapse: collapse; width: 600px; margin-bottom: 20px; border: 1px solid #aaaaaa; }
.formReceiptText { text-align: left; width: 300px; border: 1px solid #aaaaaa; border-collapse: collapse; }
tr.formReceiptSectionHead { background-color: #005dab !important; color: #FFFFFF; border-collapse: collapse; padding: 5px; border: 1px solid #aaaaaa; }
.formReceiptSectionHead td, td.formReceiptSectionHead { color: #FFFFFF !important; background-color: #005dab !important; }
td.formReceiptFieldHeader { font-weight: bold; vertical-align: top; width: 200px; padding: 5px; border: 1px solid #aaaaaa; color: #5c6776; border-collapse: collapse; }
.formReceiptText td, td.formReceiptText { padding: 5px; border: 1px solid #aaaaaa; color: #5c6776; border-collapse: collapse; }
.formReceiptText { border: 1px solid #aaaaaa; border-collapse: collapse; }
.formReceipt td { padding: 5px; border: 1px solid #aaaaaa; border-collapse: collapse; }
.formReceipt tr { border: 1px solid #aaaaaa; border-collapse: collapse; }
.tableBackground { width: 600px; }

/* ######################################## */
/* "Processing" message */
.overlay { position: fixed; z-index: 99; top: 0px; left: 0px; background-color: #FFFFFF; width: 100%; height: 100%; filter: Alpha(Opacity=70); opacity: 0.70; -moz-opacity: 0.70; }
* html .overlay { position: absolute; height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px'); width: expression(document.body.scrollWidth > document.body.offsetWidth ? document.body.scrollWidth : document.body.offsetWidth + 'px'); }
.loader { z-index: 100; width: 200px; height: 200px; margin-left: -60px; position: relative; top: 280px; /*320px*/ left: 48%; text-align: center; background: url(_lib/images/bg_white.jpg) repeat-x center center; color: black; font-weight: bold; font-size: 14px; filter: Alpha(Opacity=100); opacity: 1.0; -moz-opacity: 1.0; /*position: fixed;  -- position:fixed stops the animated gif from rotating*/ }
* html .loader { position: absolute; margin-top: expression((document.body.scrollHeight / 4) + (0 - parseInt(this.offsetParent.clientHeight / 2) + (document.documentElement && document.documentElement.scrollTop || document.body.scrollTop)) + 'px'); }
.ccframe { width: 300px; height: 80px; border: none; outline: none; }