index.css

html, body {
    height: 100%;
    width: 100%;
    margin:0;
    font-family: 'Tahoma', sans-serif;
}

.fillScreen {
    height:100%;
    width: 100%;
    display: table;
}

.fillScreen > header {
    display: table-row;
}

.fillScreen > .splitContainer {
    display: table-row;
}

.split {
    float: left;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.split, .gutter.gutter-horizontal {
    height: 100%;
    float: left;
}

.gutter {
    background: #eee no-repeat 50%;
}

.gutter.gutter-horizontal {
    cursor: ew-resize;
    background-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
    display: inline-table;
}

#code-editor {
    position: relative;
    width: 100%;
    height: 100%;
}

header {
    width: 100%;
    height: 51px;
    background-color: #5DC9E2;
    border-color: hsl(209, 51%, 88%);
    -webkit-box-shadow: 0 3px 5px rgba(57, 63, 72, 0.3);
    -moz-box-shadow: 0 3px 5px rgba(57, 63, 72, 0.3);
    box-shadow: 0 3px 5px rgba(57, 63, 72, 0.3);
}

header .logo {
    float: left;
    color: #222;
    text-align: center;
    padding: 12px 12px 12px 24px;
    text-decoration: none;
    font-size: 18px;
    line-height: 25px;
    border-radius: 4px;
}

.header-right {
    float: right;
}

.ghbtns {
    padding: 10px;
}

.ghbtns span {
    padding-left: 10px;
}

.loader {
    background:#fff url("loader.svg") no-repeat 50% center !important;
}