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

# 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)
huh, what do you mean?

it used to be

```css
.hovercats.active, .hovercats.active .cat-overlay {
    display: block;
    width: 500px;
}
```
now it's

```css
.hovercats,
.hovercats .cat-overlay {
    width: 500px;
}
```
and we toggle visibility on `:hover` now.