Refactor section/series labelling on article pages

Update design of section and series labelling on article pages (including interactive and tonal variants), examples of which follow. The design becomes more consistent, and fixes situations in which the current implementation has broken down.

Standard article (desktop) before:
![screen shot 2014-09-22 at 15 06 58](https://cloud.githubusercontent.com/assets/813383/4357502/ca3913ea-4262-11e4-8200-7e88638e0581.png)

Standard article (desktop) after:
![screen shot 2014-09-22 at 15 07 22](https://cloud.githubusercontent.com/assets/813383/4357504/cf0a0244-4262-11e4-8887-b108554bff90.png)

Standard article (mobile) before:
![screen shot 2014-09-22 at 15 08 02](https://cloud.githubusercontent.com/assets/813383/4357508/e40a0ffe-4262-11e4-97b2-0a10ba087e1e.png)

Standard article (mobile) after:
![screen shot 2014-09-22 at 15 07 46](https://cloud.githubusercontent.com/assets/813383/4357510/e6dc472e-4262-11e4-98dd-a75d423c6e27.png)

Feature tone before:
![screen shot 2014-09-22 at 15 10 47](https://cloud.githubusercontent.com/assets/813383/4357517/efda2d8c-4262-11e4-9076-d9ff0b39283e.png)

Feature tone after:
![screen shot 2014-09-22 at 15 11 06](https://cloud.githubusercontent.com/assets/813383/4357523/f8d66df6-4262-11e4-8db9-c9c4c2675ba8.png)

Football clock watch before (very broken):
![screen shot 2014-09-22 at 15 08 45](https://cloud.githubusercontent.com/assets/813383/4357527/fe84b92e-4262-11e4-80a4-58301bf2f1b8.png)

Football clock watch after (fixed):
![screen shot 2014-09-22 at 15 08 33](https://cloud.githubusercontent.com/assets/813383/4357531/06d225b2-4263-11e4-934f-a6b71abc0452.png)
it was no new lines anywhere, except between the first properties and the first child selector, but we never documented it. I'm kinda easy, life's too short etc, but we should stay consistent

I'll update https://github.com/guardian/frontend/wiki/CSS-guidelines, and if anyone feels strongly, we can discuss