Convert Layout Shell to Flexbox

[jsmecham]

Changes the shell (i.e. <main-nav>, <account-switcher>, <pane>, ...) layout to use Flexbox. This started out as an attempt to use Flexbox without requiring any markup changes, but unfortunately, it is not backwards compatible as a new wrapper element is required for correct responsive/mobile support.

Changes

• Favored using position: sticky on <main-nav> and <pane> contents in place of scroll observers.
• Overflow scrolling in the <main-nav> is now handled natively with overflow in place of buttons to scroll up and down with JavaScript.
• Extracted the height of the account switcher into a variable for easier reference/calculation.
• The body is now a flex container.
• Added a new "main" wrapper (.main-wapper) that allows us to properly layout panes in mobile or responsive modes.
• The pane template now has an additional wrapper for pane content to allow position: sticky to work correctly.

Notes

• We might want to require an outer wrapper as to not make the body itself a flex container.
• The addition of the main wrapper is a change that requires consumers of Cyclops to implement.

[pascualin]

@jsmecham is this still relevant?