html { height: 100%; font: 14px Tahoma, Geneva, sans-serif; }
body { margin: 0; height: 100%; }
header { background: #DC6900; color: #FFF; width: 100%; height: 40px; padding: 10px; box-sizing: border-box; position: fixed; top: 0; z-index: 3; font-weight: bold; line-height: 20px; }
body > section { display: flex; height: 100%; padding-top: 40px; box-sizing: border-box; }
section > nav { background: #FFF; border-right: 2px solid #DC6900; width: 20%; height: 100%; left: 0; top: 0; box-sizing: border-box; overflow: auto; }
section > main { background: #FFF; width: 80%; height: 100%; left: 20%; top: 0; box-sizing: border-box; overflow: auto; }
div.curtain, div.backdrop { position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: rgba(0, 0, 0, .7); z-index: 100; }
div.curtain { z-index: 102; }
aside { position: absolute; width: 50%; height: 50%; left: 25%; top: 20%; background: #FFF; padding: 20px; box-sizing: border-box; z-index: 101; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .2), 0 6px 20px 0 rgba(0, 0, 0, .19); }

input, button { font: 12px Tahoma, Geneva, sans-serif; }
button { padding: 3px 5px; background: #DC6900; color: #FFF; border: none; border-radius: 3px; cursor: pointer; }
button:hover { background: #EB8C00; }

nav .toolbar { border-bottom: 2px solid #DC6900; box-sizing: border-box; padding: 5px; display: none; }
nav .tree { padding: 5px 0; font-size: 12px; float: left; min-width: 100%; }
nav .tree div { white-space: nowrap; }
nav .tree div > span { display: block; padding: 0px 10px; cursor: pointer; line-height: 20px; }
nav .tree div > span:hover { background: rgba(255, 182, 0, .5); }
nav .tree div.active > span { background: #EB8C00; cursor: default; color: #FFF; }
nav .tree div > span > span { line-height: 20px; display: block; }

nav .tree div.branch { width: 20px; height: 20px; float: left; }
nav .tree div.branch:last-of-type { margin-right: 5px; }
nav .tree div.branch.plus { background: url(../imgs/tree-plus.png); cursor: pointer; }
nav .tree div:last-child > span > div.branch.plus { background: url(../imgs/tree-plus-last.png); }
nav .tree div.branch.minus { background: url(../imgs/tree-minus.png); cursor: pointer; }
nav .tree div:last-child > span > div.branch.minus { background: url(../imgs/tree-minus-last.png); }
nav .tree div.branch.default { background: url(../imgs/tree-branch.png); }
nav .tree div:last-child > span > div.branch.default { background: url(../imgs/tree-branch-last.png); }
nav .tree div.branch.skip { background: url(../imgs/tree-skip.png); }
nav .tree div.branch.skip.last { background: none; }

main .toolbar { border-bottom: 2px solid #DC6900; box-sizing: border-box; padding: 5px; }
main section.pages > div.columnTitles { padding: 0 5px; box-sizing: border-box; cursor: default; font-size: 12px; font-weight: bold; background: #EB8C00; color: #FFF; border-bottom: 1px solid #DC6900; }
main section.pages > div.columnTitles > div { display: inline-block; width: 25%; line-height: 20px; padding: 3px; border-right: 1px solid #DC6900; vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
main section.pages > div.item { padding: 0 5px; box-sizing: border-box; cursor: pointer; font-size: 12px; }
main section.pages > div.item:nth-child(odd) { background: #EEE; }
main section.pages > div.item:hover { background: rgba(255, 182, 0, .5); }
main section.pages > div.item > div { display: inline-block; width: 25%; line-height: 20px; padding: 3px; vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

aside > h3 { margin-top: 0; }
aside > div { margin-top: 5px; }
aside input[type="text"] { display: inline-block; width: 70%; box-sizing: border-box; }
aside label { display: inline-block; width: 30%; box-sizing: border-box; padding-right: 10px; }
aside div.modalButtons { text-align: right; margin-top: 10px; }

div.modal { display: none; }