.rendered_html {

    color: @text-color;
    em {font-style: italic;}
    strong {font-weight: bold;}
    u {text-decoration: underline;}
    :link {text-decoration: underline;}
    :visited {text-decoration: underline;}

    // For a 14px base font size this goes as:
    // font-size = 26, 22, 18, 14, 12, 12
    // margin-top = 14, 14, 14, 14, 8, 8
    h1 {font-size: 185.7%; margin: 1.08em 0 0 0; font-weight: bold; line-height: 1.0;}
    h2 {font-size: 157.1%; margin: 1.27em 0 0 0; font-weight: bold; line-height: 1.0;}
    h3 {font-size: 128.6%; margin: 1.55em 0 0 0; font-weight: bold; line-height: 1.0;}
    h4 {font-size: 100%; margin: 2em 0 0 0; font-weight: bold; line-height: 1.0;}
    h5 {font-size: 100%; margin: 2em 0 0 0; font-weight: bold; line-height: 1.0; font-style: italic;}
    h6 {font-size: 100%; margin: 2em 0 0 0; font-weight: bold; line-height: 1.0; font-style: italic;}

    // Reduce the top margins by 14px compared to above
    h1:first-child {margin-top: 0.538em;}
    h2:first-child {margin-top: 0.636em;}
    h3:first-child {margin-top: 0.777em;}
    h4:first-child {margin-top: 1em;}
    h5:first-child {margin-top: 1em;}
    h6:first-child {margin-top: 1em;}

    ul:not(.list-inline),
    ol:not(.list-inline) {padding-left: 2em;}
    ul {list-style:disc;}
    ul ul {
      list-style:square;
      margin-top: 0;
    }
    ul ul ul {list-style:circle;}
    ol {list-style:decimal;}
    ol ol {
      list-style:upper-alpha; 
      margin-top: 0;
    }
    ol ol ol {list-style:lower-alpha; }
    ol ol ol ol {list-style:lower-roman; }
    /* any extras will just be numbers: */
    ol ol ol ol ol {list-style:decimal;}
    * + ul {margin-top: 1em;}
    * + ol {margin-top: 1em;}

    hr {
        color: @rendered_html_border_color;
        background-color: @rendered_html_border_color;
    }

    pre {
        margin: 1em 2em;
        padding: 0px;
        background-color: @body-bg;
    }

    code {
        background-color: #eff0f1;
    }

    p code {
        padding: 1px 5px;
    }

    pre code {background-color: @body-bg;}

    pre, code {
        border: 0;
        color: @text-color;
        font-size: 100%;
    }

    blockquote {margin: 1em 2em;}

    table {
        margin-left: auto;
        margin-right: auto;
        border: none;
        border-collapse: collapse;
        border-spacing: 0;
        color: @rendered_html_border_color;
        font-size: 12px;
        table-layout: fixed;
    }
    thead {
        border-bottom: 1px solid @rendered_html_border_color;
        vertical-align: bottom;
    }
    tr, th, td {
        text-align: right;
        vertical-align: middle;
        padding: 0.5em 0.5em;
        line-height: normal;
        white-space: normal;
        max-width: none;
        border: none;
    }
    th {
        font-weight: bold;
    }
    tbody tr:nth-child(odd) {
        background: #f5f5f5;
    }
    tbody tr:hover {
        background: rgba(66, 165, 245, 0.2);
    }
    * + table {margin-top: 1em;}

    p {text-align: left;}
    * + p {margin-top: 1em;}

    img {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    * + img {margin-top: 1em;}
    
    img, svg {
        max-width: 100%;
        height: auto;
        &.unconfined {
            max-width: none;
        }
    }

    // Override bootstrap settings, see #1390
    .alert {margin-bottom: initial;}
    * + .alert {margin-top: 1em;}
}

// Right align text iff:
// (a) notebook is rtl and it's not overriden in cell metadata (i.e. rtl or none)
// (b) notebook is whatever but cell metadata specifies rtl
// note that cell metadata is used to set 'dir' attribute of rendered_html element.
[dir="rtl"] .rendered_html:not([dir="ltr"]), .rendered_html[dir="rtl"] {
    p {
        text-align : right;
    }
}

