layout.css

/* Bootstrap tab styles start */

#ili-container > .row {
    margin-left: 0;
    margin-right: 0;
    height: 100%;
}

#ili-container > .row > * {
    padding: 0;
    height: 100%;
}

.tab-pane:not(.active) {
    display: none; /* otherwise non-active tabs create blank areas */
}

button.btn > .glyphicon.glyphicon-th-list {
    padding-bottom: 3px;
}

.emperor-tab-div input[type=text],
.emperor-tab-div .bootstrap-select,
.emperor-tab-div .bootstrap-select .dropdown-menu,
.emperor-tab-div .slider-horizontal,
.emperor-tab-div .bootstrap-touchspin
{
    max-width: 100%;
    min-width: 100%;
}

.emperor-tab-div input[type=text],
.emperor-tab-div .bootstrap-select .filter-option,
.emperor-tab-div .bootstrap-select .dropdown-menu li .text,
.emperor-tab-div .panel-group .panel-title
{
    text-overflow: ellipsis;
}

.emperor-tab-div .bootstrap-select .filter-option,
.emperor-tab-div input[type=text] {
    padding-left: 0;
    padding-right: 0;
    text-align: center !important;
}

.emperor-tab-div .control-name-column,
.emperor-tab-div .control-value-column
{
    padding: 6px 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.emperor-tab-div .row {
    margin-top: 10px;
    margin-right: 0;
    margin-left: 0;
}

.emperor-tab-div .row .col-xs-12 {
    padding-left: 0;
    padding-right: 0;
}

.emperor-tab-div .bootstrap-touchspin button {
    height: 34px; /* for some reason it's 35.5px by default which breaks the layout */
}

.emperor-tab-div .panel-heading {
    cursor: pointer;
}

.emperor-tab-div .panel-collapse {
    margin-left: 10px;
}

.input-group-btn {
    font-size: inherit; /* for some reason it's set to zero in bootstrap.css */
}

.emperor-tab-div .slider-horizontal {
    margin-top: 6px;
}

.emperor-tab-div .checkbox input {
    margin-left: 0; /* default is 20px */
}

.btn-text { /* For buttons and panel headers */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Sidebar dark theme start */

#tabs-container {
    background-color: #111;
}

#tabs-list > li > a,
.emperor-tab-div .control-name-column,
.emperor-tab-div .control-value-column,
#documentation-container > *
{
    color: #F5F5F5;
}

#tabs-list > li > a:hover,
#tabs-list > li.active > a
{
    color: #555;
}

.emperor-tab-div .btn-default {
    background-color: #F2DC5D;
}

.emperor-tab-div .btn-default:hover,
.emperor-tab-div .btn-default.dropdown-toggle[aria-expanded="true"],
.emperor-tab-div .form-control,
.emperor-tab-div .slider-horizontal .slider-track-high
{
    background-color: #FCF8E3;
}

.emperor-tab-div .form-control[disabled] {
    background-color: #ddd;
}

.emperor-tab-div .slider-horizontal .slider-selection {
	background: #F2A359;
}

.emperor-tab-div .slider-horizontal .slider-handle {
	background-image: linear-gradient(to bottom, #F2DC5D 0, #AD9B35 100%);
}

/* Sidebar dark theme end */

/* Bootstrap tab styles end */

#documentation-container td,
#documentation-container th
{
    padding: 5px;
}

#documentation-container a,
#documentation-container .highlighted-text
{
    color: #F2DC5D;
}

#view-container > * {
    display: none;
    width: 100%;
    height:  100%;
    position: absolute;
}

body[drop-target] > #view-container[layout='welcome'] > .view-welcome {
    /* Special case: trarget drop banner looks bad on the welcome view. */
    display: none;
}

#view-container[layout='welcome'] > .ViewWelcome {
    display: flex;
    position: absolute;
    margin: auto;
}

#view-container[layout|='mode'] > .ViewLegend {
    width: 200px;
    height: 80px;
    position: absolute;
    margin: 20px;
    display: block;
}

#view-container[layout='mode-2d'] > .View2D {
    display: block;
    overflow: hidden;
    position: relative;
}

.View2D > #contentElement {
    position: absolute;
}

#view-container[layout='mode-3d'] > .ViewGroup3D {
    display: flex;
}

.ViewGroup3D[layout="single"] > #view-3d-1 {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.ViewGroup3D[layout="double"] > #view-3d-1,
.ViewGroup3D[layout="triple"] > #view-3d-1 {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 50%;
}

.ViewGroup3D[layout="quadriple"] > #view-3d-1 {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 50%;
    height: 50%;
    overflow: hidden;
}

.ViewGroup3D[layout="double"] > #view-3d-2 {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 50%;
}

.ViewGroup3D[layout="triple"] > #view-3d-2 {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    width: 50%;
    height: 50%;
}

.ViewGroup3D[layout="quadriple"] > #view-3d-2 {
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50%;
    height: 50%;
}

.ViewGroup3D[layout="triple"] > #view-3d-3 {
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 50%;
    height: 50%;
}

.ViewGroup3D[layout="quadriple"] > #view-3d-3 {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    width: 50%;
    height: 50%;
}

.ViewGroup3D[layout="quadriple"] > #view-3d-4 {
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 50%;
    height: 50%;
}