body {
    font-weight: 300;
}
.example {
    font-size: 1.2em;
}
.sidebar {
    background: #f6f6f6;
    border: solid 1px #eee;
    border-radius: 0.5em;
    padding: 0.2em 0.5em;
    margin-bottom: 1em;
}

.code pre {
    /* Reset/override some styles that the rest of the page might have set -- borrowed from CodeMirror */
    border-radius: 0.3em;
    border-width: 0;
    background: transparent;
    font-family: inherit;
    font-size: inherit;
    margin: 0;
    padding: 0 0.5em;
    white-space: pre;
    word-wrap: normal;
    line-height: inherit;
    color: inherit;
    z-index: 2;
    position: relative;
    overflow: visible;
}

.code pre.highlight {
    background: #fea;
}
.code pre.highlight_false {
    background: #faa;
}
.code pre.highlight_true {
    background: #bfb;
}

code, pre code {
    /* Override bootstrap's ugly style for <code> */
    font-family: inherit;
    font-size: inherit;
    font-weight: 400;
    color: #c60;
    background: none;
    padding: 0;
    margin: 0;
    /* So I don't have to use &nsbsp; all over the place: */
    white-space: nowrap;
}

table.no-vertical-borders td, table.no-vertical-borders th {
    border-left: none !important;
    border-right: none !important;
}

ul.algdata li {
    padding: 0.2em 0.5em;
}
ul.algdata {
    display: none;
}

/* Transitions help us see when/where changes occur */
svg * {
    transition: opacity 0.2s, fill 0.2s, stroke 0.2s;
}

/* In algorithm examples, hide node labels by default (will be shown when hovering by JS) */
.hidelabels .nodetext {
    visibility: hidden;
    pointer-events: none;  /* so mouseleave isn't fired if the mouse goes over the text while still over a circle */
}
/* For easy programmatic control of visibility */
.nodetext.visible {
    visibility: visible !important;
}
/* For nodes whose text will always be visible, independent of apply .visible */
.nodetext.alwaysvisible {
    visibility: visible !important;
}