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.


Possibly I'm missing something, but do you need all these empty `<i>` elements?