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

#satCanvas { width: 99%; height: 300px; }

/* width of the datetime text input */
#datetimeinput { width: 15em; }

input[type=button] { background: black; color: white; }
input[type=text]   { background: #421; color: white; }
select { background: #224; color: white; }

/* I can't find any way to style an input button by name --
 * it has to have an id as well as a name.
 */
input[type=button]#prevDay  { background: #733; font-weight: bold; }
input[type=button]#prevHour { background: #522; font-weight: bold; }
input[type=button]#prevMins { background: #311; font-weight: bold; }
input[type=button]#nextDay  { background: #733; font-weight: bold; }
input[type=button]#nextHour { background: #522; font-weight: bold; }
input[type=button]#nextMins { background: #311; font-weight: bold; }

input[type=button]#now { background: darkgreen; font-weight: bold; }

input[type=button]#animate { color: yellow; background: #222; font-weight: bold; width: 6em; }

/* As usual, the only way I could find to make the alignment of the
 * calendar image sane was to do it with a table row. Otherwise,
 * the image is higher than everything else, for no reason since it
 * has no border, margin or padding.
 */
table.valign-row td {
  vertical-align: bottom;
}

input.calendarbtn { border: 2px outset black; cursor: pointer; }

/* The recalculate / change date button */
input.recalcbtn { border: 2px outset black;
                   cursor: pointer; background: #533;
                 }
input.recalcbtn:hover { background: #966; }

/* The calendar */
#cal-container {
  position: relative; /* width: 0; height: 0;*/
  z-index: 100;
}
#calBorder {
  position: absolute; left: 2em; top: 0em;
  background: white;
  /* opacity: .8; */
  z-index: 90;
  border: 2px outset black;
  box-shadow: 10px 10px 5px #888888;
}

/* 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 */
  .chatty { display: None }
  #datetimeinput { width: 13em; font-size: 1.1rem; }
  #cal-container { position: fixed; left: .5em; top: 145px; }
}
@media (max-height: 30em) {   /* landscape */
  .chatty { display: None }
  #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; }
}