/* misc, prep */
:root {
	--purple: #7751ad;
	--purple-darker: #57318d;
	--purple-darker-still: #47217d;
	--blue: #4b89cc;
	--orange: #fe9738;
}
* { box-sizing: border-box; }
body, html { height: 100%; padding: 0; margin: 0; font-family: arial; overflow: hidden; }
a { text-decoration: none; color: #3a80cb; cursor: pointer; }
a:hover { text-decoration: underline; }
.cf::after { display: block; content: ''; clear: both; }
.pgBtn { border: none; border-radius: 3px; background: var(--blue); color: white; padding: .65rem 1rem; font-size: 1rem; font-weight: bold; cursor: pointer; transition: .35s; }
.pgBtn:hover { background: #5aa0eb; }
#lblib-modal input, #lblib-modal select, #lblib-modal textarea { padding: .5rem; border: solid 1px #aaa; width: 100%; }
#help { position: absolute; right: 1rem; bottom: 1rem; border-radius: 50%; width: 80px; height: 80px; font-weight: bold; text-align: center; border-bottom-right-radius: 0; padding: 1.4rem .65rem .65rem .65rem; color: white; background: var(--blue); }

/* top */
body > header { background: white; height: 121px; position: relative; padding: 1.65rem .8rem 0 .8rem; }
body > header img { height: 40px; vertical-align: middle; margin-right: .6rem; position: relative; top: -.4rem; }
body > header img + strong { color: #999; position: relative; top: -.1rem; }
body > header button { position: absolute; width: 100px; left: calc(50% - (100px / 2)); top: 1.33rem; font-family: inherit; }
#pageNav, .pwz-id-pageNav { float: right; font-size: 1rem; margin-top: .4rem; font-weight: bold; background: white; }
#pageNav a, #pageNav span, .pwz-id-pageNav a, .pwz-id-pageNav span { margin-right: 1rem; }
#pageNav a, .pwz-id-pageNav a { color: #666; }
#pageNav span, .pwz-id-pageNav span { color: #ccc; }
#sessInfo { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; height: 38px; background: #555; position: relative; left: -.8rem; width: calc(100% + (.8rem * 2)); margin-bottom: 0; line-height: 38px; padding: 0 .8rem; }
#sessInfo * { color: white; }
#sessInfo span:not(:empty)::before { content: ' - '; }
#sessInfo a { text-decoration: underline; }

/* left & right... */
#left, .pwz-id-left, #right, .pwz-id-right { width: 55%; float: left; height: calc(100% - 128px); }

/* ...panel headers */
#left header, .pwz-id-left header, #right > header, .pwz-id-right > header { background: var(--purple); margin: 0; padding: 0 .8rem; line-height: 2rem; height: 2rem; position: relative; height: 38px; line-height: 38px; }
#left h4, .pwz-id-left h4, #right > header h4, .pwz-id-right > header h4 { color: white; text-transform: uppercase; margin-top: 0; }
.cpgTabs { position: absolute; right: 2rem; bottom: 0; background: var(--purple); }
.cpgTabs span, .cpgTab.pwz-highlighted { display: inline-block; background: var(--purple-darker); padding: 0 .65rem; color: white; font-size: .9rem; height: 100%; line-height: 38px; }
.cpgTabs span:not(.on) { cursor: pointer; }
.cpgTabs .on, .cpgTab.on.pwz-highlighted { background: #eee; color: inherit; }
.cpgTabs span:not(.on):hover { background: var(--purple-darker-still); }
.cpgTabs a, .cpgTab.pwz-highlighted a { letter-spacing: 1.3px; margin-left: .25rem; }
.cpgTabs span:not(.on) a, .cpgTab.pwz-highlighted:not(.on) a { color: #a2c9f3; }

/* left */
#left [data-editor]:not(:first-of-type) { display: none; }

/* right */
#right { width: 45%; }
#cpgOutput { height: calc(100% - 2rem); background: #eee; padding: 2rem; }
[data-editor=result] { display: none; }

/* editors */
[data-editor] { height: 100%; }
pre { height: calc(100% - 2rem); margin: 0; border-right: solid 1px #999; }
.ace-tm .ace_print-margin { display: none; }

/* third-party style harmonisation (page wizard, lblib) */
#pwz-ia h3 { color: var(--orange) !important; }
#pwz-ia .but, .lbd-button { background: var(--blue) !important; }
#pwz-ia a { color: #5d9adb; }