More robust layout for MP page header

The MP header now handles long names much better than before, and also scales much more sensibly to small screens, as required by issue #444.

This branch also fixes the vertical positioning of images inside buttons (like the "Get email updates" button, and the person and search icons in the nav bar), and makes the background image gradient on MP pages less contrasty.

Some examples, before and after the changes:

![mp-before](https://cloud.githubusercontent.com/assets/739624/3411073/263a3738-fdf2-11e3-9cfa-eb063939f0c7.png)
![mp-after](https://cloud.githubusercontent.com/assets/739624/3411074/2b033cba-fdf2-11e3-973b-527a4e4228b6.png)

![baroness-before](https://cloud.githubusercontent.com/assets/739624/3411070/1edfe352-fdf2-11e3-91f0-ca1206c5ddad.png)
![baroness-after](https://cloud.githubusercontent.com/assets/739624/3411071/228ed486-fdf2-11e3-9dbc-8127a563e5c8.png)

![queen-before](https://cloud.githubusercontent.com/assets/739624/3411076/2f2cf1dc-fdf2-11e3-898e-706fb0976613.png)
![queen-after](https://cloud.githubusercontent.com/assets/739624/3411078/3239f7da-fdf2-11e3-8837-aee10d0fc644.png)

And here's how it looks on mobile, before and after:

![mobile-before](https://cloud.githubusercontent.com/assets/739624/3411123/3c2009fa-fdf3-11e3-9c6e-58db19d23f08.png)
![mobile-after](https://cloud.githubusercontent.com/assets/739624/3411124/3e8a27fc-fdf3-11e3-8f85-424a668c1a79.png)

<img src="https://cloud.githubusercontent.com/assets/739624/3411137/7c254420-fdf3-11e3-86b1-95ef700060dc.jpg" align="right" width="120">The Queen still has a special case, but it's not as drastic as before. I was chatting with @wrightmartin, and the idea of doing something radically different (and fun) with the Queen's page is quite attractive (obvs needs a big picture of <del>a Corgi</del> I mean, Buckingham Palace, in the background). But we'll keep that for a rainy day.

<!---
@huboard:{"order":6.050686351954937e-08}
-->