Fixing the design of the left side toolbar to work better with underlying page content

**Justification:**

Depending on the underlying page content, background and header colour the current design of the sidebar does not work so well and appears 'broken' and is visually distracting.

This issue has been highlighted in separate card in relation to the publisher's test site: #459. A quick fix to make the sidebar work better with the underlying page elements is to modify the CSS/HTML and have the header sit 'side-by-side' with the sidebar, as with the Readium implementation. However this solves the problem in 2 cases. I would like to come up with a solution to improve the look and feel of the sidebar to work visually with all sites and page content.

**Solution:**

I would like to take the time to explore visually how the sidebar left side can be altered sit on top of underlying content in a more visually appealing manner and look like it belongs together instead of visually competing with it or appearing awkward. I would like to explore solutions that makes our sidebar appear more seamless across **any** page not just one where we need to tweak the underlying html/css.

**Background from: #459**
"One thing that would be nice is if we could have a small treatment to address the overlap of the chevron/bucketbar w/ the header at upper right to keep it looking like an afterthought."


"One solution might be a little CSS to terminate the black site header just before it goes behind the chevron-- similar to how the readium integration behaves, where the sidebar and the nav of readium look like they actually belong together."


(See above in the justification section: how this solution fixes it in one or two cases and we need to solve this without the need to require page/content providers to modify their own CSS/HTML on a case-by-case basis)