/* Center any element horizontally, e.g. <img class="center-x" ...>*/
.center-x {
    display: inline-block; /* causes element width to shrink to fit content */
    left: 50%; /* moves left side of image/element to center of parent element */
    position: relative; /* where the next element will be automatically positioned */
    transform: translate(-50%); /* centers image/element on "left: 50%" position */
}

/* Center element horizontally and set margin=bottom/top: 20px */
.img-block {
    display: inline-block; /* causes element width to shrink to fit content */
    left: 50%; /* moves left side of image/element to center of parent element */
    position: relative; /* where the next element will be automatically positioned */
    transform: translate(-50%); /* centers image/element on "left: 50%" position */

    margin-bottom: 20px;
    margin-top: 20px;
}

/* Override default <pre> vertical margins */
pre {
    margin-bottom: 20px; /* Default 0 */
    margin-top: 20px; /* Default 10px */
}

/* Notes etc. Consider inheriting basic setting like padding. */
.NOTE {
    padding: 1em;
    margin-top: 0.6em;
    margin-bottom: 1.2em;
    border-width: 1px;
    border-style: solid;
    border-radius: 2px;
    font-size: 0.9em;
    line-height: 1.6em;
    background: #fcfcfc;
    border-color: #83aecb;
    color: #003876;
}

    .NOTE h5 {
        font-size: 1.5em;
        color: #0e7db4;
    }

    .NOTE > :first-child {
        margin-top: 0;
        padding-top: 0;
    }

    .NOTE > :last-child {
        padding-bottom: 0;
        margin-bottom: 0;
    }

.IMPORTANT {
    padding: 1em;
    margin-top: 0.6em;
    margin-bottom: 1.2em;
    border-width: 1px;
    border-style: solid;
    border-radius: 2px;
    font-size: 0.9em;
    line-height: 1.6em;
    background: #fffcf3;
    border-color: #b09971;
    color: #534120;
}

    .IMPORTANT h5 {
        font-size: 1.5em;
        color: #795c2f;
    }

    .IMPORTANT > :first-child {
        margin-top: 0;
        padding-top: 0;
    }

    .IMPORTANT > :last-child {
        padding-bottom: 0;
        margin-bottom: 0;
    }


/* Global table style. If possible, replace with adding css classes to specific tables. Hard to do in markdown though, currently requires writing the table in HTML. */
table {
    /*font-size: 14px;*/
    border-collapse: collapse;
    margin-top: 0.6em;
    margin-bottom: 1.2em;
    padding: 0;
}

    table caption {
        display: table-caption;
        text-align: center;
    }

    table tr {
        border-top: 1px solid #f2f2f2;
        background-color: #fff;
        margin: 0;
        padding: 0;
    }

        table tr:nth-child(2n) {
            background-color: #fafafa;
        }

        table tr th[align="center"], table tr td[align="center"] {
            text-align: center;
        }

        table tr th, table tr td {
            border: 1px solid #f2f2f2;
            text-align: left;
            margin: 0;
            padding: 0.35em 0.9em;
        }