/* xmasSlider */

.xmasSlider-wrapper {           /* overall wrapper <div> for an xmasSlider */
  margin: 5px 1.8em 0.5em 1.8em;/* top right bottom left */
  /* bottom: load slider gap; room for ticks */
  /* left/right: room for overflowing tick labels on first/last frames, */
  /* esp. w/TZ.  Update xmasSlider.addEventTick() min/maxPct on change. */
}
.xmasSlider-lights {            /* red/green lights containter <div> */
  border: solid 1px #c0c0c0;    /* so we can see it fill; */
                                /*   color from .ui-widget-header */
  border-radius: 3px;           /* same as jQueryUI */
  position: absolute;
  color: white;
  width: 100%;                  /* not resized; would alter <td> pixel sizes*/
  height: 100%;
  table-layout: fixed;
}
.xmasSlider-timeTickLabel span {/* <span> child of a time tick label */
  /* `display: flex; justify-content: center' centers text */
  /* even when overflowing the <span> (e.g. many frames): */
  display: flex;
  justify-content: center;
  margin-left: 1px;             /* fix centering */
}
.xmasSlider-timeTickLabels {    /* container for time tick labels */
  height: 3.2em;                /* or it collapses; two lines of text */
  position: relative;           /* so inner <span>s' `left' aligns to us */
  margin: 0px 1px 0px;          /* to align with slider's 1px border */
}
.xmasSlider-slider {            /* actual jQueryUI slider <div> */
}
.xmasSlider-tickMarks {         /* container <div> for tick marks */
  position: relative;           /* tick mark <span>s offset to us */
  font-family: Helvetica;       /* for consist tick mark length */
  font-size: 1rem;              /* "" */
}
.xmasSlider-tickMark {          /* tick mark (major) in Xmas lights slider */
  display: inline-block;
  height: 1.8em;
  width: 1px;
  position: absolute;           /* so `left'/`top' obeyed */
  background: black;
}
/* Added span so more specific than .xmasSlider-tickMark; overrides: */
span.xmasSlider-tickMarkMinor { /* minor (smaller label rate) tick mark */
  background: #A0A0A0;          /* lighter than major ticks */
  /* leave same height as major: may or may not be labelled */
}
.xmasSlider-timeTickMark {      /* time tick mark in Xmas lights slider */
  top: -0.68em;                 /* top above slider, bottom at center */
  /* `left' set at creation */
}
.xmasSlider-eventTickLabels {   /* container for event tick labels and marks */
  height: 1.6em;                /* or it collapses; one line of icon(s) */
  position: relative;           /* so inner <span>s' `left' aligns to us */
  margin: 0px 1px 0px;          /* to align with slider's 1px border */
}
.xmasSlider-eventTickMark {     /* event (lower) tick marks, for now/event */
  top: -0.08em;                 /* extend from center of slider */
  /* `left' set at creation */
}