Red, yellow, and blue “attention boxes”

Fixes #10.

Also includes a fix for double padding/margin inside attention boxes, and a DRY refactoring of the _variables.scss file, while I was in there adding a new variable.

![screen shot 2014-12-15 at 10 56 38](https://cloud.githubusercontent.com/assets/739624/5434399/705933cc-8449-11e4-9153-5d2ec486276b.png)

(The classes are, from top to bottom, `attention-box info`, `attention-box helpful-hint`, and `attention-box warning`)

I decided against @davewhiteland’s suggestion of adding icons, since the pages are already quite busy, and I’m not convinced icons will make the boxes any more prominent or easier to parse. But speak up if you feel strongly otherwise.