Fix invalid HTML

According to the HTML5 spec a `legend` must be a **direct** descendent of a `fieldset`. We were wrapping the `legend` hints and `input`s with a `div` when there was a validation error.

Because of this, both Firefox and the Cucumber tests were unable to properly parse the HTML. Although this had no repercussions visually or for screenreader users it did cause the tests to fail unexpectedly.

This commit puts the `validation-wrapper` class directly on the fieldset so that the HTML is valid.

![screen shot 2014-11-05 at 15 05 09](https://cloud.githubusercontent.com/assets/355079/4919794/35efd1de-64fd-11e4-8065-dcd81a5b345c.png)

This has the side effect of positioning the `legend` half way out of the `fieldset`'s top edge. This is the default appearance for legends, e.g.
![x91vl](https://cloud.githubusercontent.com/assets/355079/4919772/0068c1f6-64fd-11e4-9937-0b32eabe8071.png)

Fixing this requires a small tweak to the CSS. I've poked around in various browsers and it doesn't seem to have had any knock-on effects visually.