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)
It was so I could reuse a variable. We had some variable which was stored as 14px but I couldn't use a mixin because then it came out as `14pxpx`. I figured it would be nice to be able to reuse and leaves less chance of outputting dodgy css