CSS Classes & IDs

.fsForm

the class of the <form>. Each form also has an unique ID

.fsTable

the table used to hold the form elements

.fsSectionHeading

the <h1> element that holds the heading for a section

.fsSectionText

the descriptive text in a section header

.fsSupporting

the text used to help describe the field

.fsCallout

supporting text used as a callout box

.fsRow

a row in the table

.fsFieldRow

a row that contains form fields

.fsCell

the individual <td> in the form table

.fsRowBody

the <td>s that actually hold form content. Used to set the background color of the form

.fsSectonCell

the cell that holds the section header content

.fsSection

a class to denote a section field

.fsLabel

the label for a form field

.fsRequiredLabel

the label for a required form field

#fsFooterImage

the image at the bottom of the form

#fsHeaderImage

the image at the top of the form

.fsFieldFocused

a class applied to the containing <td> when a form field is focused on

.fsReadOnly

a field that is read-only

.fsValidationError

a class applied to the containing <td> when a form field has invalid input

How-to...

...change the label color

.fsLabel { color: #aabbcc; }

...change the text color on the text fields

.fsRowBody input[type=text] { color: #aabbcc; }

...change the text color on the text areas

.fsRowBody textarea { color: #aabbcc; }

...change the text color of the supporting text

.fsSupporting { color: #aabbcc; }

...change the background color of the form

.fsRowBody { background-color: #aabbcc; }

...change the spacing between form rows

.fsFieldRow td { padding-bottom:18px; }

...remove the section header highlight

.fsSectionRow td.fsRowBody { background-image:none; }

...reduce the space between sections

.fsForm .fsTable { margin: 0 auto; padding: 0 }

...remove section borders

.fsRowTop, .fsRowBottom, .fsRowOpen, .fsRowClose { display: none; }