.odn-navbar-top-right { right: .5rem;}
.odn-navbar-fixed { position: fixed; top: 0; width: 100%; z-index: 10; }
.odn-body--with-header { padding-top: 57px; }

main table  {
    margin-bottom: 38px;
}

footer {
    font-size: 12px;
}

#faq details {
    border: 1px solid rgba(0,0,0,0.2);
    padding: 8px;
}
#faq summary {
    font-weight: bold;
}

table.preview img { width: 45vw; }
table.preview tr:not(:last-child) {
    border-bottom: 1px solid rgba(0,0,0,0.1);
}
table.preview td + td {
    font-size: 0.9em;
    padding-left: 1em;
}

.annotated-image {
    position: relative;
    width: auto;
    display: inline-block;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 38px;

    background-color: rgba(255,255,255,0.4);
    border: 1px solid rgba(255,255,255,0.8);
}
.annotated-image > img {
    z-index: -1;
    margin-top: var(--top-max);
    margin-bottom: var(--bot-max);
    margin-left: 10px;
    margin-right: 10px;
}

.annotation {
    --wide: calc( 100% - var(--left) * 2 );
    width: var(--wide);
    display: inline-block;
    font-size: 0.8em;
    position: absolute;
}
.annotation.over-image .text {
    background-color: rgba(255,255,255,0.8);
    padding: 5px;
}
.annotation.over {
    top: calc( var(--top-max) - var(--ydist) );
    left: var( --left );
    border-bottom: 1px solid black;
}
.annotation.over .arrow,
.annotation.over .bracket {
    height: calc( var(--arrin) + var(--ydist) );
    position: absolute;
    border-right: 1px solid black;
    left: var( --arrleft );
}
.annotation.over .arrow.right,
.annotation.over .bracket.right {
    height: calc( var(--arrin) + var(--ydist) );
    position: absolute;
    border-left: 1px solid black;
    border-right: none;
    left: var( --arrleft );
}
.annotation.over .arrow + .arrow {
    height: calc( var(--arrin2) + var(--ydist) );
    left: var( --arrleft2 );
}
.annotation.over .arrow::after {
    content: ' ';
    height: 19px;
    position: absolute;
    bottom: -10px;
    left: -5px;
    border: 5px solid transparent;
    border-top: 10px solid black;
}
.annotation.over .text {
    position: absolute;
    z-index: 1;
    bottom: 0;
}
.annotation.under {            
    bottom: calc( var(--bot-max) - var(--ydist) );
    left: var( --left );
    border-top: 1px solid black;
}
.annotation.under .arrow,
.annotation.under .bracket {
    height: calc( var(--arrin) + var(--ydist) );
    position: absolute;
    border-right: 1px solid black;
    left:  var( --arrleft );;
    bottom: 0;
}
.annotation.under .arrow + .arrow {
    height: calc( var(--arrin2) + var(--ydist) );
    left:  var( --arrleft2 );;
}
.annotation.under .arrow::after {
    content: ' ';
    position: absolute;
    border: 5px solid transparent;
}
.annotation.under .text {
    position: absolute;
    z-index: 1;
    top: 0;
}
.annotated-image + p {
    margin-top: 1em;
}

.annotation.under .arrow.left {
    width: var(--turn-len);
    left: calc( var( --arrleft ) - var( --turn-len ) );
    border-top: 1px solid black;
}
.annotation.over .arrow.left {
    width: var(--turn-len);
    left: calc( var( --arrleft ) - var( --turn-len ) );
    border-bottom: 1px solid black;
}
.annotation.under .bracket.left {
    width: var(--turn-len);
    left: calc( var( --arrleft ) - var( --turn-len ) );
    border-top: 1px solid black;
}
.annotation.over .bracket.left {
    width: var(--turn-len);
    left: calc( var( --arrleft ) - var( --turn-len ) );
    border-bottom: 1px solid black;
}
.annotation.over .arrow.right {
    width: var(--turn-len);
    left: var( --arrleft );
    border-bottom: 1px solid black;
}


.annotation.under .arrow.top::after {
    height: 19px;
    top: -10px;
    left: -4px;
    border-bottom: 10px solid black;
}
.annotation.under .arrow.left::after {
    width: 19px;
    top: -5px;
    left: -10px;
    border-right: 10px solid black;
}
.annotation.over .arrow.left::after {
    height: 10px;
    bottom: -6px;
    left: -5px;
    border-right: 10px solid black;
    border-top: 5px transparent solid;
}
.annotation.over .arrow.right::after {
    height: 10px;
    bottom: -5px;
    right: -5px;
    width: auto;
    left: auto;
    border-left: 10px solid black;
    border-top: 5px transparent solid;
}
.annotation .bracket::after {
    content: ' ';
    position: absolute;
}
.annotation.under .bracket.top::after {
    width: var(--bra-wide);
    height: 8px;
    border: 1px solid black;
    border-top: none;
    bottom: calc( var(--ydist) + var(--arrin) );
    left: var(--bra-left);
}
.annotation.under .bracket.left::after {
    height: var(--bra-wide);
    width: 8px;
    border: 1px solid black;
    border-left: none;
    right: calc( var(--turn-len) - 1px );
    bottom: calc( var(--bra-left) );
}
.annotation.over .bracket.left::after {
    height: var(--bra-wide);
    width: 8px;
    border: 1px solid black;
    border-left: none;
    right: calc( var(--turn-len) - 1px );
    bottom: calc( var(--bra-left) - 1px );
}