body {
    word-wrap: break-word;
    /* font-family: sans-serif, "Noto Sans (fallback)"; */
    font-size: 12pt;
    margin: 0px;
}

/* sensible defaults. */
/* TODO: remove if not needed */
table {
    display: table;
    border-collapse: separate;
    box-sizing: border-box;
    text-indent: initial;
    unicode-bidi: isolate;
    border-spacing: 2px;
    border-color: gray;
    vertical-align: top;
}


/* customized for this page */
#toc_container {
    background: #f9f9f9 none repeat scroll 0 0;
    border: 1px solid #aaa;
    font-size: 85%;
    margin-bottom: 1em;
    padding: 1em;
    width: 25%;
    vertical-align: top;
}
.toc_title {
    font-weight: 700;
    text-align: center;
}
/*#toc_container li, #toc_container ul, #toc_container ul li{
	list-style: outside none none !important;
}*/
.toc_outertable {
    width: 99%;
    margin: 0.5%;
}

/* my nonsense (specific to this page) */
.visualtoc_container {
    background-color: aliceblue;
    border: 1px solid #aaa;
    font-size: 85%;
    padding: 1em;
    text-align: center;
    vertical-align: top;
    width: 75%;
}
.visualtoc_imgbutton>img {
    width: 100%;
}
/* note: this assumes the images are square */
.visualtoc_imgbutton {
    /* todo: set width in em units, then 24% or whatever as a backup plan */
    /*width: 24%;*/
    float: left;
    margin: 0.5%;
    padding: 0px;
    border: 0px;
    text-align: center;
    background-color: #ff5f4f;
    background: #ff5f4f;
    /* legacy compat */
}
div.visualtoc_imgbutton:hover {
    border: 4pt solid blue;
    /* this is like fine. whatever. */
    box-shadow: 0pt 16pt darkblue;
    -webkit-box-shadow: 0pt 16pt darkblue; /* legacy */
    padding-bottom: 0pt;
    margin-bottom: 24pt;
}




.post_title {
    padding: 6pt;
}
.article_body {
    padding: 6pt;
}
.sectioncolorA {
    padding: 6pt;
    background-color: #ffaf99;
}
.sectioncolorB {
    padding: 6pt;
    background-color: #c1f29a;
}

.sectionimg {
    width: 280pt;
    height: auto;
    float: right;
    /* display: flex; */
}


/** highlight the bookmark/anchor navigated to via link.
	see also: https://www.htmldog.com/articles/suckerfish/target/ */
ol.references_list>li:target {
    background: #fdff6a;
    background-color: #fdff6a;
}


/* for the "Gallery" sections (specific to this page) */


div.gallery {
    width: 100%;
    max-width: 100%;
    width: fit-content;
    overflow: auto; /* necessary to expand to fit contents(?) */
}
div.galleryimg {
    float: left;
    padding: 0px;
    margin: 8pt;
    font-size: 0pt;
    text-align: center;
    overflow: hidden;
    width: 140pt;
    border: 4pt solid #000000;
    border-radius: 16pt;
    -webkit-border-radius: 16pt; /* legacy */
    -moz-border-radius: 16pt; /* legacy */
    background-image: url("button-gradient.gif");
}
/* dropshadow */
div.galleryimg {
    /** looks fine on chrome.
        looks dumb on firefox cuz of decade-old rendering bugs */
    box-shadow: 0pt 16pt black;
    -webkit-box-shadow: 0pt 16pt black; /* legacy */
    padding-bottom: 0pt;
    margin-bottom: 24pt;
}
@-moz-document url-prefix() { /* firefox-specific */
  div.galleryimg {
    /** looks fine on firefox.
        looks dumb on chrome cuz of decade-old rendering bugs */
    box-shadow: inset 0pt -16pt black;
    -moz-box-shadow:inset 0pt -16pt black; /* legacy */
    padding-bottom: 16pt;
    margin-bottom: 8pt; /* set back to what it was */
  }
}
div.galleryimg>a>img {
    width: 100%;
    /* all of the image previews here are square. */
    width: 140pt;
    height: 140pt;
}
div.galleryimg>a {
    font-size: 0pt;
    text-decoration: none;
}
div.galleryimg_url {
    /* make only this scroll */
    overflow-x: scroll;
    white-space: nowrap;
}
div.galleryimg_url>p {
    font-size: 6pt;
    text-decoration: none;
    word-wrap: none;
    margin-bottom: 8pt;
    margin-top: 2pt;
    margin-left: 2pt;
    margin-right: 2pt;
}
div.galleryimg>p,
div.galleryimg>p>a {
    font-size: 12pt;
    white-space: nowrap; /* undecided on this one */
    text-align: center;
    overflow: visible;
    overflow-x: visible;
    margin-top: 4pt;
    margin-bottom: 4pt;
}