/* This CSS preserves the old look-and-feel of Adventures in Deep Space in light mode, but allows for a night-vision friendly dark mode for field use */

:root {
    --font-color: black; /* Color of general text */
    --head-color: black; /* Color of headings */
    --navbar-color: rgba(160, 134, 120, 0.8); /* Color of the navigation bar */
    --navbar-hilight: #9d8172; /* Color of hovered buttons on navigation bar */
    --navbar-shiny: rgba(220, 150, 80);
    --link-color: #2e2ea6; /* Color of unvisited links */
    --link-visited-color: #772372; /* Color of visited links */
    --link-hover-color: #bf2020; /* Color of links when hovering on them */
    --blockquote-border: #ff7454; /* Border of a blockquote */
    --blockquote-background: #f7c4af; /* Background of a blockquote */
    --bg-color: #d6b3a0; /* Background color (chosen to be close to original ADS flesh-tone, but darker) */
    --button-background: #001122; /* Background of a CTA button */
    --readable-bright-text: #d5d5e5; /* A readable bright text for use on a dark background */
    --equation-color: #2c2997; /* Color to use to hilight equations */
}
[data-theme="dark"] {
        --font-color: var(--readable-bright-text);
	--head-color: white;
	--navbar-color: rgba(50,50,50,0.8); /* Color of the navigation bar */
	--navbar-hilight: #454545; /* Color of hovered buttons on navigation bar */
	--navbar-shiny: rgba(100,40,70,128);
        --link-color: #fa3e3e;
        --link-visited-color: #bb5555;
        --link-hover-color: hotpink;
        --blockquote-border: hotpink;
        --blockquote-background: #221111;
        --bg-color: black;
        --button-background: #4488bb;
	--equation-color: #ebc3e4;
}
body {
    margin: 0;
    color: var(--font-color);
    background-color: var(--bg-color);
    font-size: 18px;
    letter-spacing: 0.0025em;
    font-family: "Source Serif Pro", "Times New Roman", serif;
}
h1, h2, h3, h4 {
    font-family: HelveticaNeue, "Helvetica Neue", Helvetica, Arial, sans-serif;
    letter-spacing: 0.0075em;
    color: var(--head-color);
}
a:link {
    color: var(--link-color);
    text-decoration: none;
    text-underline-offset: 2px;
}
a:visited {
    color: var(--link-visited-color);
}
a:hover {
    cursor: pointer;
    color: var(--link-hover-color);
}
a h1,
a h2,
a h3,
a h4
{
    color: inherit;
}
blockquote {
    border-left: 10px solid var(--blockquote-border);
    background: var(--blockquote-background);
    margin: 1.5em 10px;
    padding: 0.5em 10px;
    display: inline-block;
    font-family: Georgia, Palatino, "Times New Roman", serif;
    letter-spacing: 0.004em;
}
img.medium {
    width: 500px;
}
img.small {
    width: 300px;
}

img.tiny {
    width: 100px;
}

img.invert {
  filter: invert(100%);
  -webkit-filter: invert(100%);
}

button.floating {
    float: right;
    position: sticky;
    bottom: 20px;
    right: 20px;
    padding: 1px 1px;
    background-color: var(--button-background);
    color: white;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    opacity: 0.5;
}

button.floating:hover {
    opacity: 1.0;
}


/* For observing reports as well as the home page, even the old
   styling of ADS uses dark colors, so we have to tweak the theme. The
   only change we make in dark mode is to preserve the reddish link
   colors so they show up fine through a red plexiglas filter */
/*
body.or {
    background-color: black;
    color: var(--readable-bright-text);
}
*/
body img {
    margin: 1rem auto;
    max-width: 100%;
    height: auto;
}

body.or img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 90%;
    height: auto;
}
/*
body.or h1,
body.or h2,
body.or h3,
body.or h4 {
    color: white;
}
body.or a:link {
    color: #20ee20;
}
body.or a:visited {
    color: #40ddaa;
}
body.or a:hover {
    color: hotpink;
}
body.or h1,
body.or h2,
body.or h3,
body.or h4 {
    color: white;
}

[data-theme="dark"] {
body.or a:link {
    color: var(--link-color);
}
body.or a:visited {
    color: var(--link-visited-color);
}
body.or a:hover {
    color: var(--link-hover-color);
}
}
*/

table {
    margin-top: 10px;
    margin-bottom: 10px;
}

body.or table {
    max-width: 70em;
    padding: 1em;
}

div.main_content {
    max-width: 70em;
    margin: auto;
    padding: 1em;
}

div.main_content table,
div.main_content th,
div.main_content td {
    border-collapse: collapse;
    border: 1px solid;
}

div.main_content th,
div.main_content td {
    padding: 0.1em 0.3em 0.1em 0.3em;
}
div.main_content th {
    font-family: sans-serif;
    border-bottom: 2px solid;
}
mjx-container {
    color: var(--equation-color);
}

span.no-mjx-color mjx-container {
    color: inherit;
}
div.headbar {
    padding: 0px;
    margin: 0;
    background-color: var(--navbar-color);
    display: block;
    width: 100%;
    min-height: 25px;
    height: auto;
    position: sticky;
    z-index: 1000;
    top: 0;
    left: 0;
}
div.headbar ul
{
    list-style-type: none;
    display: flex;
    white-space: nowrap;
    height: auto;
    flex-direction: row;
    align-items: center;
    justify-content: left;
    gap: 8px;
    margin: 0;
    padding: 0;
    height: auto;
    /*height: 30px;*/
}
div.headbar li {
    list-style-type: none;
    display: inline-flex;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    height: 100%;
    max-height: 60px;
    text-align: center;
    /*height: 20px;*/
}
div.headbar li.headbar-spacer {
    /* flex-grow: 1; */
    flex: 0 1 auto;
    min-width: 0;
    height: auto;
}
div.headbar li.headbar-button {
    border-radius: 5px;
    cursor: pointer;
    color: var(--head-color);
    font-family: HelveticaNeue, Helvetica, Arial, sans-serif;
    font-size: 16px;
    display: inline-flex;
    text-align: center;
    flex-direction: row;
    align-items: center;
    justify-content: left;
    transition: opacity 0.3s linear;
}
div.headbar li.headbar-button:hover {
    background-color: var(--navbar-hilight);
}
div.headbar li.headbar-shiny {
    background-color: var(--navbar-shiny);
}
.headbar-overflow {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    border: 1px solid;
    background-color: var(--bg-color);
}
div.headbar-overflow.show {
    display: block;
}

li.headbar-button img {
    display: block;
    padding: 0px 5px 0px 2px;
    margin: auto;
    margin-left: 0;
    margin-right: 0;
    /*height: 26px;*/
}
li.headbar-button a:link,
li.headbar-button a:visited,
li.headbar-button a:hover {
    padding: 5px 5px 5px 5px;
    margin: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    text-decoration: none;
    color: var(--head-color) !important;
}

li.headbar-sep {
    background-color: var(--head-color);
    margin-top: auto;
    margin-bottom: auto;
    height: 90%;
    width: 3px;
    display: block;
}
li.headbar-spacer {
    content: "";
    flex-grow: 1;
}
table.favorites tr td:first-child {
    text-align: center;
}
table.favorites {
    font-family: Arial, HelveticaNeue, "Helvetica Neue", sans-serif;
    font-size: 16px;
}
.dso-anchor {
    /* FIXME: Generalize this so that all in-page anchors allow for the head bar */
    scroll-margin-top: 40px;
}
/* Temporary: Until we remove the OR theme */
/*
body.or li.darkmode-button {
    opacity: 0.1;
}
*/