Navigation accessibility

Changing the flow of the navigation for better accessibility.

Currently when using keyboard the "current section" is above main navigation:
![flowbefore](https://cloud.githubusercontent.com/assets/2579465/4772100/2aac5dcc-5b95-11e4-8e14-bff0cc2d7339.png)

After this change the flow will be in the correct order:
![flowafter](https://cloud.githubusercontent.com/assets/2579465/4772109/3557cf04-5b95-11e4-9e3e-9138bf8fdfd3.png)

I also changed the names of the classes as the old ones didn't make sense anymore. I've used more vague names now.


Yep, not super elegant… Pseudo elements would have been a bit prettier (three borders = one real element + before & after).

Unfortunately it's the only way I could find to make this really small and work cross browser.

Also, the CSS transition on the burger wouldn't work properly with pseudo elements in some browsers.

@uplne I'd love to have your take on this if you find a better way