Restructure the header's expandable nav

The tab order of the nav needed to flow into subnavs after the nav
housing the subnav. To achieve this the HTML was restructured to
have subnavs as children of their parents (e.g. a tree).

Some logic was pulled from the templates from into the Nav class.
Prototypes are hard. Let's go shopping!
Review follow up

- Remove defunct patterns from avocet.skin.css
- Break up related css styles with newlines
- Add @return JSDoc tags to doc comments
- Remove trailing space
Fix unclosable active nav overlapping page content
Fix nav causing horizontal scroll bar to appear
Fix several site navigation issues

- Fix .viewed being delayed for focus events
- Use .viewed instead of :hover/:focus in skin css
- Remove unused colours from previous implementation in skin css
- Add a border at the bottom of each expanded nav to visually
  differentiate the nav from the page behind
- Fix 1 extra nav level being visible when a nav item with child navs
  was .active
Reduce the nav open delay to 0

Seems to still work ok without feeling sluggish.
Review follow up:

- Reformat comments
- Code formatting tweaks
Fix parent of 1st active link being .active instead of .active-child
Merge pull request #216 from ucamhal/avocet/change-nav-tab-order

Tabbing through main navigation