static/explorer.css

@import url("ext/bootstrap/dist/css/bootstrap.min.css");
@import url("ext/codemirror/lib/codemirror.css");
@import url("ext/golden-layout/src/css/goldenlayout-base.css");
@import url("ext/golden-layout/src/css/goldenlayout-light-theme.css");
@import url("ext/selectize/dist/css/selectize.bootstrap2.css");

.navbar {
    border-radius: 0;
    margin-bottom: 5px;
}

.float-link {
    z-index: 100;
    position: absolute;
    bottom: 0.5em;
    right: 0.5em;
    display: inline-block;
    padding: 0.25em;
    font-size: x-small;
    font-weight: bold;
    text-align: center;
    background-color: rgba(128, 128, 128, 0.5);
    border-radius: 5px;
}

.float-link:hover {
    background-color: rgba(128, 128, 160, 0.5);
}

.template {
    display: none;
}

.compiler-picker {
    width: 14em;
}

.CodeMirror {
    font-size: 10pt;
}

input.options {
    width: 98%;
    margin-left: 0.25em;
    margin-right: 0.25em;
}

#root {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.btn.active {
    color: #fff !important;
    border-color: #46b8da !important;
    background-color: #5bc0de !important;
}

.inline-msg {
    font-family: arial;
    font-size: 70%;
    padding: 2px 5px 3px;
}

.inline-msg .compiler {
    font-style: italic;
    float: right;
}

span.icon {
    border-radius: 50%;
    padding: 0 3px;
    margin-right: 7px;
}

.error {
    background: #faa !important;
    color: #a00;
}

.error span.icon {
    color: white;
    background-color: red;
    font-weight: bold;
}

.warning {
    background: #ffa !important;
    color: #440;
}

.warning span.icon {
    color: black;
    background-color: yellow;
}

.note {
    background: #aaf !important;
    color: #00a;
}

.note span.icon {
    color: white;
    background-color: blue;
}

/* These colours from Cynthia Brewer's excellent page at
 * http://colorbrewer2.org/
 */
.rainbow-0 {
    background: rgba(141, 211, 199, 0.35) !important;
}

.rainbow-1 {
    background: rgba(255, 255, 179, 0.35) !important;
}

.rainbow-2 {
    background: rgba(190, 186, 218, 0.35) !important;
}

.rainbow-3 {
    background: rgba(251, 128, 114, 0.35) !important;
}

.rainbow-4 {
    background: rgba(128, 177, 211, 0.35) !important;
}

.rainbow-5 {
    background: rgba(253, 180, 98, 0.35) !important;
}

.rainbow-6 {
    background: rgba(179, 222, 105, 0.35) !important;
}

.rainbow-7 {
    background: rgba(252, 205, 229, 0.35) !important;
}

.rainbow-8 {
    background: rgba(217, 217, 217, 0.35) !important;
}

.rainbow-9 {
    background: rgba(188, 128, 189, 0.35) !important;
}

.rainbow-10 {
    background: rgba(204, 234, 197, 0.35) !important;
}

.rainbow-11 {
    background: rgba(255, 237, 111, 0.35) !important;
}

.address {
    width: 5em;
    font-size: smaller;
}

.opcodes {
    width: 7em;
    overflow: hidden;
    font-size: smaller;
}

.opcode {
    color: #066;
    margin-right: 0.2em;
}

.opcode:nth-child(odd) {
    color: #060;
}

.highlighted {
    background-color: rgba(255, 0, 0, 0.2);
    color: #0000b0;
    font-weight: bold;
}

.decrease-font-size span.glyphicon {
    font-size: 70%;
}

.reset-font-size span.glyphicon {
    font-size: 90%;
}

.increase-font-size span.glyphicon {
    font-size: 110%;
}

.lm_splitter.lm_vertical .lm_drag_handle {
    height: 10px;
    top: -2.5px;
}

.lm_splitter.lm_horizontal .lm_drag_handle {
    width: 10px;
    left: -2.5px;
}

pre.content {
    width: 100%;
    height: 100%;
}

.compile-time {
    font-size: x-small;
    font-style: italic;
}