Primary navigation

This still needs a lot of cleanup, but wanted to put what I had up here for your perusal while I'm gone.
I'm not a big fan of having to use margins on logo and header_misc that relate directly to aligning them with the .content stuff. Could we put the margins on a wrapper instead? I think we could update the header markup a little to support this:

```html
<header class="wrapper" role="banner">
    <div class="header">
```

```css
.header {
    position: relative;
    .respond-to-min(801px, {
        .grid_column(12);
        margin-top: @grid_gutter-width;
        margin-bottom: 20px;
    });
}
// Then remove .logo and .header_misc  margins at large screens
```

This way if we have to add anything else to the header it will be lined up already.