General cross browser styles for forms and buttons. This is a base and does not provide much in the terms of branding. This is meant to be a starting point for all forms and buttons to allow for consisitant structural styling accross all browsers.

Styles tested in: IE7+, Firefox 8, Safari 5, and Chrome 15.

###Basic HTML Basic HTML structure borrowed from Twitter Bootstrap

<form>
    <div class="spot">
        <label for="input">Label</label>
        <div class="input">
            <input type="text" id="input"/>
        </div>
    </div>
</form>

###Buttons .button can be applied to either button or anchor elements.

<button class="button">Button</button>
<a href="#" class="button">Anchor Button</a>

A few basic button styles are provided.

• .button: this is the basis for all buttons, and can be used for general button styling
• .primary: primary call to action
• .negative: negative call to action (e.g. delete)
• .link: hyperlink type button with no background or border
• .full-width: 100% width button, good for mobile

###Validation/Error states

• .error-spot: Containing div class, allows styling of label and form input
• .error: Error message class

<div class="spot error-spot">
    <label for="input">Label</label>
    <div class="input">
        <input type="text" id="input"/>
    </div>
    <div class="error">Error Message!</div>
</div>