/* Prevent text magnification on orientation change on Android.
 * Seems like that ought to be something the user chooses in chrome,
 * but chrome doesn't seem to offer that.
 */
body {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: 100%;

  color: white; background: #556;
}

a:link { color: #ffff00; }
a:visited { color: #aaffaa; }
a:hover, a:active { color: #ffffaa; }

div#jupframe {
  background: black;
  color: white;
  position: relative;
  width: 99%;
  height: 100px;
  padding: 0px;
  border-style:ridge;
}

/* All images and labels inside the jupframe are absolutely positioned */
#jupframe img, #jupframe span {
   position: absolute; visibility: hidden; z-index: 50;
}

#jupframe span.moonlabel { color: white; top: .3em; }

#jupframe span.shadowlabel { color: yellow; top: 1.1em; }

#jupframe span.eclipselabel { color: blue; top: .3em; }

#jupframe span#grslabel { color: #aaa; font-size: .9em; bottom: .1em; }

#upcoming {
    background: black;
    color: white;
    border: 1px inset;
    padding: 5px;
    height: 120px;
    overflow-y: auto;
    border-style: ridge;
}

/* Verbose text: want this on the web page but not on small devices or windows.
 * On my Galaxy S5 with default font, portrait mode has a width of about 48em
 * and a height of about 34 em, I think;
 * Landscape mode changes the font size (weird!) and is about 59.
 * Note: I see "handheld" mentioned on the web but android doesn't respect it.
 */
@media (max-width: 40em) {    /* portrait */
  #datetimeinput { width: 13em; font-size: 1.1rem; }
  #cal-container { position: fixed; left: .5em; top: 145px; }
}
@media (max-height: 30em) {   /* landscape */
  #datetimeinput { width: 12em; font-size: 1.1rem; }
  /* Would be nice to position the calendar relative to the viewport right,
   * but right: here doesn't work, probably because it doesn't have a fixed
   * size for the cal-container. So just fudge it from the left.
   */
  #cal-container { position: fixed; left: 20em; top: 0px; }
}