Fix invalid HTML

According to the HTML5 spec a `legend` must be a *direct*
descendent of a `legend`. 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
in an unexpected way.

This commit puts the `validation-wrapper` class directly on the
fieldset so that the HTML is valid.

This has the side effect of positioning the `legend` half way out
of the `fieldset`. This is the default appearance for legends, see
http://i.stack.imgur.com/X91VL.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.
Merge pull request #211 from alphagov/fix-html-nesting

Fix invalid HTML