:root
{
    --toc_bg: #ffffff;
    --toc_border: #aaaaaa;

    --h2_bg: #4b137e;
    --h2_fg: #ffffff;

    --h3_bg: #8f5ac0;
    --h3_fg: #fff;

    --h4_bg: #e3d3f3;
    --h4_fg: #000;

    --a_hover_fg: #000;
    --a_hover_bg: #ffff00;

    --outline_border: #aaaaaa;

    --caption: #555;

    --see_also_bg: #ceebed;
}

/* PHONE -------------------------------------------------------------------- */

@media only screen and (max-width:1280px) {
    #table-of-contents {
        width: 100% !important;
        position: static !important;
        display: block;
        margin: 10px !important;
    }
    #table-of-contents:before,
    #table-of-contents:after { content: " "; display: table; }
    #table-of-contents:after { clear: both; }

    #content {
        width: 100%;
        position: static !important;
        display: block;
        margin: 10px !important;
    }

    .outline-2, .outline-3, .outline-4 {
        width: 100%;
        margin: 10px !important;
    }

    .outline-2:before,
    .outline-2:after { content: " "; display: table; }
    .outline-2:after { clear: both; }
}

/* PRINTER  ----------------------------------------------------------------- */
@media print {

    #table-of-contents {
        position: relative !important;
        width: 100% !important;
        display: block !important;
    }
    #content
    {
        width: 100% !important;
        display: block !important;
        padding: 10px !important;
    }

    img {
        max-width: 100%;
    }

    .SLIDE {
        font-size: 12pt !important;
    }

    .outline-2 {
        width: 100% !important;
        padding: 10px;
    }

}

/* CLEARFIX ----------------------------------------------------------------- */
.cf:before,
.cf:after { content: " "; display: table; }
.cf:after { clear: both; }
.cf { *zoom: 1; }

/* LAYOUT ------------------------------------------------------------------- */

#content
{
    max-width: 76%;
    width: 76%;
    padding-right: 26%;
    font-family: sans-serif;
}

#table-of-contents
{
    width: 22%;
    position: fixed;
    top:0;
    right:0;
    padding: 10px;
    background: var(--toc_bg);
    font-size: 0.8em;
    font-family: sans-serif;
}

#table-of-contents a:hover
{
    background: var(--a_hover_bg);
    color: var(--a_hover_fg);
    font-weight: bold;
}

.SLIDE {
    width: 90%;
    background: #fff;
    border: outset 3px #aaa;
    padding: 10px;
    margin: 1%;
    font-size: 18pt;
}

.SLIDE li {
    margin-bottom: 15px;
}

.SLIDE img {
    margin: 10px;
}

.underline {
    font-size: 0.8em;
}

.underline,
.underline a {
    color: #7b0bb4;
}

.SLIDE .floatright
{
    float: right;
}

blockquote
{
    background-image: url( "../special-ai/quote.png" );
    background-repeat: no-repeat;
    /*background-position: -20px 0px;*/
    text-indent: 40px;
}

.figure
{
    font-size: 0.8em;
    color: var(--caption);
}

h2
{
    background: var(--h2_bg);
    color: var(--h2_fg);
    padding: 5px;
    margin: 0;
}

h3
{
    background: var(--h3_bg);
    color: var(--h3_fg);
    padding: 5px;
    margin: 0;
}

h4
{
    background: var(--h4_bg);
    color: var(--h4_fg);
    padding: 5px;
    margin: 0;
}

h2, h3, h4
{
    margin-left: -10px;
    margin-top: -10px;
}

.outline-2,
.outline-3,
.outline-4
{
    padding-left: 10px;
    padding-right: 5px;
    margin-top: 20px;
    border-left: solid 2px var(--outline_border);
    background-color: rgba( 63, 0, 100, 0.05 );
    padding-top: 10px;
    padding-bottom: 10px;
}

#postamble
{
    font-size: 0.8em;
    text-align: right;
    margin-top: 20px;
}

p.see-also,
.SEEALSO
{
    width: 75%;
    margin: 0 auto;
    background: var(--see_also_bg);
    padding: 10px;
}