Front-end polish work

Fixes https://github.com/mysociety/writetothem/issues/127

## General
   * Add accessibility features
      * [x] ARIA roles [[spec]](http://www.w3.org/TR/wai-aria/roles) [[list of roles]](http://www.webteacher.ws/2010/10/14/aria-roles-101/)  [[context]](http://alistapart.com/article/aria-and-progressive-enhancement/)
      * [x] Check hover styles/interactions work on touchscreens (use :active / :focus instead)
   * [x] MS header hover is weird
   * [x] MS header a bit small on tablet layout
   * [x] Better differentiation between "help text" (use source sans?) and "action text" (use serif?) – especially on "choose your representative" page
   * [x] Make the favicon background transparent
   * [x] Too much padding around the tablet layout
   * [x] #134 Remove outer box on layout
   * [x] Double check background image sizes on retina displays

## Homepage
   * [x] Position of text in image is not quite right
   * [x] Width of postcode form is too narrow on tablet
   * [x] Position of logo and MS tab on mobile version is a bit muddled

## Select representative page
   * [x] Indentation is weird on mobile
   * [x] Have you spotted a mistake? Could be worded - ‘Correct a mistake in this list’
   * <del>Add hover styles from design to MP names</del>
   * [x] On tablet sized the typography drops too much in size
   * [x] Should member of parliament just be 'MP'? 

## Write a message page
   * [x] Padding around the message input box
   * [x] Vertical spacing between ‘Ready?’ and the blurb
   * [x] Links in the ‘instructions’ pane need hover styles
   * <del>Tablet layout is broken - LH column is too narrow, writing area should go full width</del>

## Nice to have: Performance improvements
* Sprite up css images
* Move retina image declarations to a separate stylesheet
* Base64 anything that seems sensible
* [x] Recompress photographs etc


<!---
@huboard:{"order":166.8125,"custom_state":""}
-->