Further simplify masthead styling

* Use tab and menu item specific classes for clearer selector intent
* Make ‘All users’ and ‘Import’ links a standard link_to, on preview
there’s a display bug when these links are active
* Be clearer about when a link is for a menu or a tab
Use appropriate IDs for javascript links

* Each drop down menu link should point to the ID of the element it
displays (see
https://github.com/alphagov/whitehall/commit/422d2602916c8303b3c243cde71
820474e62d77d)
* Ideally there should be some non-js support but that can come later.
* Add ARIA roles to menus as recommended by Bootstrap 3 drop down patterns.
Rename 'more-nav' to 'masthead-menu'

* ‘more-nav’ is a class that should really only apply to the “More” tab
* Use a more descriptive and re-usable classname, ‘masthead-menu’, also
conforms to the ‘masthead-menu-item’ class and its aria role.
Don't hide certain tabs at small widths

* Previously we’d hide the “Corporate information” tab at tablet width
and below. This is bad form.
* The CSS has already been removed, but the class should be removed too.
Render tabs correctly in IE7, IE8

* IE7 is ~9% of current users, currently (on the live version) the tabs
aren’t displaying at all
Collapse tabs when the screen isn't wide enough

* Collapse tabs into a stacked view using media queries
* Breakpoint determined by the point at which wrapped text within tabs
causes problems (slightly above the usual tablet breakpoint)