improve CSS for site navigation bar (bug 1082161, bug 1083613, bug 1083614)

# tasks completed
* remove unused rules, optimise selectors, and make things more OOCSS-y
* improve navigation hover states ([bug 1082161](https://bugzilla.mozilla.org/show_bug.cgi?id=1082161))
* use CSS instead of JS to toggle category drop-down on desktop ([bug 1083613](https://bugzilla.mozilla.org/show_bug.cgi?id=1083613))
* add borders to desktop navigation items ([bug 1083614](https://bugzilla.mozilla.org/show_bug.cgi?id=1083614))
* fixed CSS to actually hide the link outlines on focus
* remove `cur-cat` class and use more descriptive classes
* remove specificity all over the space to reduce complex cascading
* considerable cleanup to `sprite-background-position` for category icons

# before
## normal nav link hovered
![screenshot 2014-10-15 21 32 53](https://cloud.githubusercontent.com/assets/203725/4657634/89759476-54ed-11e4-8c9c-9957a8d1a618.png)
## "categories" link hovered
![screenshot 2014-10-15 21 29 47](https://cloud.githubusercontent.com/assets/203725/4657624/58acb928-54ed-11e4-8198-ef6397770799.png)

# after
## normal nav link hovered
![screenshot 2014-10-15 21 32 38](https://cloud.githubusercontent.com/assets/203725/4657631/7ba52c12-54ed-11e4-8a01-51671bff2894.png)
## "categories" link hovered
![screenshot 2014-10-15 21 32 29](https://cloud.githubusercontent.com/assets/203725/4657632/7bac2a80-54ed-11e4-9f24-575f364db989.png)
What's the idea behind ``` {{ 'class' }}``` vs ``` {{ ' class' }}```? The former is more readable IMO, and once it's compiled, they're both the same.