body {
    word-wrap: break-word;
    font-family: sans-serif;
    font: sans-serif;
    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 */
.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 */
}

.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; */
}

/* unused */
/* .fig_img {
	width: 25%;
	word-wrap: break-word;
} */




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.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;
}

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;
}




/*
.article_body {
	width:1;
}
*/




/** 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;
}






label input[type=checkbox]:checked {
    background-color: black;
}

/* inspired by: https://christianheilmann.com/2020/07/16/a-css-only-click-to-animate-gif-solution/ */
.splash-click-to-hide img {
    display: block;
}
.splash-click-to-hide input[type=checkbox] {
    display: inline;
}
label.splash-click-to-hide {
    /*background-image: url(splash-A.png);*/
    position: fixed;
    bottom: 0;
    right: 0;
}

.splash-click-to-hide label input[type=checkbox] {
    font-style: italic;
}

/*
.splash-click-to-hide:hover, .splash-click-to-hide:focus-within {
	background-image: url(splash-B.png);
}
*/



.splash-click-to-hide label:has(input:checked) {
    color: yellow;
}

.splash-click-to-hide input[type=checkbox]+img {
    /* "unset" for ease of modification; checked and unchecked
	    style tags can be swapped and it should (hopefully) still work.
        edit: is unset a problem for legacy browsers? lol. */
    height: initial;
    height: unset;
    color: yellow;
} 
.splash-click-to-hide input[type=checkbox]:checked+img {
    height: 0;
}

label.splash-click-to-hide:has(input:checked) img {
    height: 0;
}
/*
.splash-click-to-hide {
	display: flex;
	float: none;
	position: fixed;
	bottom: 0;
	right: 0;
}
*/