Style tweaks to fix size inconsistencies

[almarklein]

Fixes the problem reported in vispy/jupyter_rfb#148

The size of the viewElement and wrapperElement are not equal, because of the border. I considered several approaches for drawing the border in an elegant way and settled on the following:

• The wrapperElement has the border, together with the topElement (menubar).
• The border-radius at the bottom is removed; there's no way to get the radius of the viewElement to match the radius of the inner-corner of the border.
• Using css variables (never used them before!) to avoid setting the same measurement in multiple places. Now users can also tweak the appearance easier by setting a single value.
• Also better vertical alignment of the title text.