/** Separated CSS for the fancy code blocks on this site.

This reformats fenced-code blocks into tables with CSS-generated line numbers on each line.

*/

.blockcode {
    background: #eee;
    border: solid #ccc 1px;
    border-radius: 1ex;
    margin-bottom: 1em;
    overflow: auto;
}

.blockcode figcaption {
    font-size: small;
    color: #77f;
    font-style: italic;
    border-bottom: solid #777 1px;
    padding: 0.5ex 1ex;
    background: #fff7f7;
}

code,
pre {
    font-family: 'Andale Mono', 'Liberation Mono', 'Monaco', 'Lucida Console', monospace;
    margin: 0;
    padding: 0;
    line-height: 1em;
}

.line-content {
    padding: 0 1ex;
    width: 100%;
}

pre.highlight {
    display: table;
    counter-reset: codeline;
    border-collapse: collapse;
    width: 100%;
}

.highlight .line {
    display: table-row;
    counter-increment: codeline;
}

pre .line:first-child .line-content {
    padding-top: 0.5em;
}

pre .line:last-child .line-content {
    padding-bottom: 0.5em;
}

.highlight .line-number:hover {
    background: rgba(255,255,0,0.5);
}
.highlight .line-number::before {
    display: table-cell;
    content: counter(codeline);
    font-size: small;
    font-family: 'Trebuchet MS', 'Verdana', 'Liberation Sans', 'Helvetica', 'Arial', sans-serif;
    min-width: 2em;
    text-align: right;
    padding: 0 0.5ex;
    color: #999;
    vertical-align: baseline;
}

.highlight .line-content {
    display: table-cell;
    border-left: solid #999 1px;
}