body {
    font-family: "Fira Sans", sans-serif;
    background-color: black;
    color: white;
}

button {
    font-family: "Fira Sans", sans-serif;
    font-size: 12pt;
}

div.skyviewport {
    position: fixed;
    top: 0vh;
    height: 100vh;
    left: 0vw;
    width: 100vw;
    background-color: black;
    overflow: clip;
}

div.celestialobject {
    position: absolute;
    border-radius: 100%;
    transform: translate(-50%, -50%);
    cursor: pointer;
}

.celestialobjectselected {
    z-index: 5;
    border: 5px solid blue;
}

div.star {
    background-color: white;
}

div.messierobject {
    background-color: transparent;
    border: 1px solid royalblue;
}

div.sun {
    border-radius: 100%;
    background: radial-gradient(lightyellow, yellow);
}

div.moon {
    font-size: 0;
}

div.moon canvas {
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

div.objectlabel {
    position: absolute;
    top: 100%;
    left: 100%;
    font-size: 10pt;
    white-space: nowrap;
    overflow: visible;
    cursor: pointer;
}

div.starlabel {
    color: #c00000; /* somewhere between darkred and red */
}

div.messierlabel {
    color: royalblue;
}

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

div.sunlabel {
    color: yellow;
    font-size: 12pt !important;
}

div.moonlabel {
    color: #aaaaaa;
    font-size: 12pt !important;
}

div.starlabelname {
}

/* When this appears, it is placed as a child of the object it refers to */
.celestialobjectinfobox {
    position: absolute;
    padding: 5px;
    transform: translate(50%, 0);
    top: 100%;
    margin-top: 5px;
    right: 0;
    background: rgba(0, 0, 64, 70%);
    z-index: 5;
    color: silver;
    font-size: 10pt;
    min-width: 300px;
    cursor: auto;
}

.celestialobjectinfobox .celestialobjectinfoboxtitle {
    text-align: center;
    font-size: 12pt;
    font-weight: bold;
}

.celestialobjectinfobox table.celestialobjectinfoboxtable {
    margin-top: 5px;
    margin-bottom: 5px;
}

.celestialobjectinfobox table.celestialobjectinfoboxtable td {
    padding: 0.1em 0.5em 0.1em 0.5em;
}

.celestialobjectinfobox table.celestialobjectinfoboxtable td.fieldname {
    text-align: right;
}

.celestialobjectinfobox table.celestialobjectinfoboxtable td.fieldvalue {
    text-align: left;
    font-weight: bold;
}

.celestialobjectinfoboxfooter {
    text-align: center;
    margin-top: 10px;
}

.celestialobjectinfoboxfooter button {
    width: 50%;
}

/* Menus and dialog boxes */
div.menubar {
    position: absolute;
    font-size: 12pt;
    background: rgba(0, 0, 128, 50%);
}

#mainmenubar {
    left: 10px;
    bottom: 10px;
}

#timemenubar {
    right: 10px;
    bottom: 10px;
}

#shortcutmenubar {
    right: 10px;
    top: 10px;
}

button.menuexpandbutton {
    position: relative;
    background-color: hsl(240deg, 100%, 25%);
    color: white;
    cursor: pointer;
    min-width: 40px;
}

div.menubarexpanded button.menuexpandbutton {
    bottom: 0;
    left: 0;
    width: 100%;
}

div.menubarcollapsed button.menuexpandbutton {
    height: max(4vh, 40px);
}

/* "menuoption" boxes should only be displayed if the menu bar is expanded */
div.menubarcollapsed .menuoption {
    display: none;
}

div.menubarbutton {
    display: inline-block;
}

dialog input {
    font-size: 12pt;
}

dialog select {
    font-size: 12pt;
}

/* Give this a fixed height and width, so it doesn't jump around the screen
 * as the table of results grows and shrinks. */
#textsearchdialog {
    min-width: max(350px, 75vw);
}

div.textsearchresultscontainer {
    overflow-y: auto;
    height: max(350px, 50vh);
}

#textsearchdialog table {
    position: relative;
    border-collapse: collapse;
    width: 100%;
}

table.textsearchresults tr td {
    padding-left: 2px;
    padding-right: 2px;
    font-variant-numeric: tabular-nums;
    border-bottom: 1px solid silver;
}

table.textsearchresults tr th {
    border-bottom: 1px solid silver;
}

table.textsearchresults tr:hover {
    background-color: #eeeeee;
}

table.textsearchresults th {
    text-align: left;
}

div.menudialogheading {
    font-weight: bold;
}

div.menudialogcontrol {
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 10pt;
}

.menudialogsection {
    margin-top: 5px;
    margin-bottom: 5px;
}

div.menudialogcheckboxcontrol {
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: 12pt;
}

.menudialogfooter {
    margin-top: 15px;
}

button.menubutton {
    position: relative;
    background-color: hsl(240deg, 100%, 15%);
    color: white;
    cursor: pointer;
    vertical-align: top;
    margin: 0;
}

button.menubuttonfailed {
    background-color: #7a0000;
}

div.menuoption button.menubutton {
    text-align: left;
    line-height: max(4vmin, 32px);
    width: 100%;
    padding-right: 1em;
}

div.menubarbutton button.menubutton {
    text-align: center;
    height: max(4vh, 40px);
    min-width: max(4vh, 40px);
}

div.menuexpandcontrol button.menubutton {
    text-align: center;
    height: 60px;
}

.menudialogstatus {
    margin-top: 10px;
    font-size: 10pt;
}

div.menubuttonicon {
    position: relative;
    display: inline-block;
    text-align: center;
}

div.menuoption .menubuttonicon {
    vertical-align: top;
    font-size: max(2vmin, 18px);
    min-width: max(3vmin, 24px);
}

div.menubarbutton .menubuttonicon {
    font-size: max(2vmin, 18px);
    /*min-width: max(3vmin, 24px);*/
}

div.menubuttonlabel {
    display: inline-block;
    vertical-align: top;
    font-family: "Fira Sans Condensed", sans-serif;
    font-size: max(1.5vmin, 15px);
    overflow: visible;
    white-space: nowrap;
}

dialog.menudialog {
    position: absolute;
    top: 30%;
    transform: translate(0, -30%);
    min-width: max(20vw, 350px);
    max-width: min(99vw, 800px);
    z-index: 10;
    color: black;
    background-color: white;
    box-shadow: 0 0 1.5vh 0.5vh rgb(0, 0, 0);
}

div.menubarhorizontalreadout {
    width: 100%;
    text-align: left;
    font-size: 10pt;
    color: silver;
    height: 16pt;
    line-height: 16pt;
}

#timemenureadout {
    font-variant-numeric: tabular-nums;
}

div.infoline {
    position: absolute;
    top: 10px;
    left: 10px;
    color: silver;
    font-size: 10pt;
    z-index: 1;
}

div.crosshair {
    position: absolute;
    transform: translate(-50%, -50%);
}

div.crosshairline {
    position: absolute;
    background-color: blue;
}

div.compasspointlabel {
    position: absolute;
    transform: translate(-50%, -100%);
    font-size: 11pt;
    color: green;
}

canvas.skycanvas {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

div.azimuthhudcontainer {
    position: absolute;
    border: 2px groove brown;
    top: 10px;
    left: 50vw;
    width: min(400px, 50vw);
    height: min(40px, 4vh);
    transform: translate(-50%, 0%);
    overflow: clip;
}

div.altitudehudcontainer {
    position: absolute;
    border: 2px groove blue;
    right: min(0.5vw, 10px);
    top: 50vh;
    width: min(60px, 6vw);
    height: min(400px, 50vh);
    transform: translate(0%, -50%);
    background-color: black;
    font-family: "Fira Sans Condensed", sans-serif;
    overflow: clip;
}

/* Vertical line in the exact centre of the azimuth indicator, which intersects
 * with the appropriate number on the scale. */
div.azimuthhudcentremarker {
    position: absolute;
    top: 0;
    left: 50%;
    height: 100%;
    width: 1px;
    transform: translate(-50%, 0%);
    background-color: red;
}

/* Horizontal line marking the exact centre of the altitude indicator. */
div.altitudehudcentremarker {
    position: absolute;
    top: 50%;
    left: 0;
    height: 1px;
    width: 100%;
    transform: translate(0%, -50%);
    background-color: cyan;
}

div.azimuthhudscale {
    position: absolute;
    top: 0;
    height: 100%;
    /* Scale contains 0-360 then 0-180 again, and we want the azimuthhud to
     * display 30 degrees of the scale, so this must be (540/30) * the width
     * of the azimuthhud container. */
    width: min(7200px, 900vw);
    background-color: black;
}

div.altitudehudscale {
    position: absolute;
    left: 0;
    width: 100%;
    /* Scale contains +90 to -90, and we want 30 degrees displayed within the
     * window of the box, so this must be six times the height of the box. */
    height: min(2400px, 300vh);
    background-color: black;
}

div.azimuthhudlabel {
    position: absolute;
    display: inline-block;
    font-size: min(25px, 2.5vh);
    bottom: 0;
    color: silver;
    transform: translate(-50%, 0%);
}

/* N, E, S, W, as opposed to a number of degrees */
div.azimuthhudcompasspointlabel {
    color: green !important;
    font-weight: bold;
}

div.altitudehudlabel {
    position: absolute;
    display: inline-block;
    font-size: min(25px, 2.5vw);
    left: 15%;
    color: silver;
    transform: translate(0%, -50%);
}

div.azimuthhudmark {
    position: absolute;
    display: inline-block;
    background-color: silver;
    transform: translate(-50%, 0%);
    top: 0px;
}

div.altitudehudmark {
    position: absolute;
    display: inline-block;
    background-color: silver;
    transform: translate(0%, -50%);
    left: 0px;
}

div.azimuthhudmark10 {
    width: 2px;
    height: 28%;
}

div.altitudehudmark10 {
    width: 8%;
    height: 4px;
}

div.azimuthhudmark5 {
    width: 2px;
    height: 22%;
}

div.altitudehudmark5 {
    width: 20%;
    height: 2px;
}

div.azimuthhudmark1 {
    width: 2px;
    height: 12%;
}

div.altitudehudmark1 {
    width: 12%;
    height: 2px;
}