If secondary nav

This was originally a design change, which became a refactor, which was then aborted due to the complexity of the `.responsive &` selectors. It didn't make sense to continue as we will have to do this again once we remove those flags and then we could create a much cleaner solution anyway.

I started by refactoring the haml so that the primary and secondary nav use the same components for navigation items and flyouts. This work will still stand (although improved) but the css is debatably no better. There is a trello card here where I have listed the steps to be taken after we move to purely responsive layouts: https://trello.com/c/PMMsJya3/212-clean-up-lp-navigation-post-responsive

Design before:

![image](https://cloud.githubusercontent.com/assets/814861/3825726/96b5e26c-1d57-11e4-85bb-205afec288ab.png)

Design after:

![image](https://cloud.githubusercontent.com/assets/814861/3825715/85116b8a-1d57-11e4-9730-778645dcc512.png)

![image](https://cloud.githubusercontent.com/assets/814861/3825704/62f0264a-1d57-11e4-8b76-be9312ebe9b8.png)
... having said that, is the only reason we're using this so that we can call both `+font-size(12)` and `+font-size(12px)`... if that's the case, wouldn't it be better to keep things consistent?