body { font-family: sans-serif; .main { position: absolute; left: 0px; top: 0px; bottom: 0px; right: 260px; .notice { padding: 8px; margin: 16px; border: 1px solid red; background-color: #ffdada; } .renderer { background-color: lightgoldenrodyellow; width: 800px; height: 600px; .rendererObject { position: absolute; cursor: default; &.activated { outline: 1px dashed #720000; cursor: move; } } } } .sidebar { position: absolute; top: 0px; bottom: 0px; right: 0px; width: 260px; background-color: antiquewhite; border-left: 1px solid gray; section { h1 { font-size: 17px; font-weight: bold; padding: 5px 7px; margin: 0px; background-color: #45674d; color: white; } .action { margin-left: 8px; margin-top: 8px; font-size: 13px; border: 1px solid black; background-color: white; font-weight: bold; padding: 3px 7px; &:hover { background-color: #dddddd; } } .toolbar { border-bottom: 1px solid black; background-color: white; .action { border: 0px; margin: 0px; border-right: 1px solid black; } } .layers, .scenes, .objects { ul { padding-left: 0px; margin: 0px 0px 8px 0px; border-bottom: 1px solid black; background-color: azure; li { list-style-type: none; padding: 3px 5px; font-size: 14px; &.selected { background-color: #caf5f5; color: red; font-weight: bold; } &.faded { color: gray; } } } } .layers, .scenes, .objects, .properties { ul { height: 100px; overflow: auto; } } .properties { .property { margin-bottom: 2px; &:before, &:after { content: " "; display: table; } &:after { clear: both; } label { display: block; float: left; width: 90px; padding: 3px 5px; font-size: 14px; background-color: #e2d2bd; } input { max-width: 150px; } } } } } }