/* The div with class="video-container" is a grid container that contains
   all the other elements of the video player, which can be positioned
   using grid co-ordinates. 

   The sizes of all the grid elements are currently specified in pixels.
   This is not ideal, but the behaviour when percentage widths are 
   specified is decidedly weird. The HTML5 specification mandates that
   the width of the video tag is specified in pixels, with the recommendation
   that differently sized videos should be delivered for differently sized
   devices such as 24inch monitors and 3inch phones. 
*/
.video-container  {display: grid; position: relative; 
                   grid-template-columns: 72px 453px 27px 27px;  /* These add up to 579 */
                   grid-template-rows: auto 7px 9px 9px;
                   width: 579px; margin: 1ex auto 1ex auto;}
.video            {grid-column: 1 / 5; grid-row: 1 / 2; margin: 0; max-width: 579px;}
.video-button     {grid-column: 1 / 2; grid-row: 2 / 4;
                   height: 25px; width: 25px; padding: 0; border: 0;
                   margin: 0 0 0 auto;}
.progressBar      {grid-column: 2 / 3; grid-row: 3 / 4;  width: 430px;
                   position: relative; height: 9px;  margin: 0 0 0 10px;
                   background-color: lightgray;  border: 1px solid sienna;}
.progress         {position: absolute; display: inline-block;
                   width: 0px; height: 9px; margin: 0; padding: 0; 
                   background-color: sienna;}
.progressSlider   {position: absolute; width: 430px; 
                   height: 9px; margin: 0; border: 1px solid sienna;}
.step-back-button {grid-column: 3 / 4; grid-row: 2 / 4;
                   height: 25px; width: 25px; padding: 0; border: 0;
                   margin: 0 auto 0 0;}
.step-fwd-button  {grid-column: 4 / 5; grid-row: 2 / 4;
                    height: 25px; width: 25px; padding: 0; border: 0;
                    margin: 0 0 0 auto;}

/* The HTML5/CSS3 standard does not include styling for sliders, so browser-specific
   styling has to be used: prefixed by -moz for firefox, and -webkit for others.
   The slider is given a transparent background sothat the progress bar below it
   is visible.                                                                   */
.slider          {-webkit-appearance: none;  /* Override default CSS styles */
                  -moz-appearance: none;
                  appearance: none;
                  position: absolute; display: inline-block; width: 100%;
                  height: 9px; margin: 0; padding: 0;
                  background: rgba(0,0,0,0); /* Transparent background */
                  outline: none;             /* Remove outline */
                  }
.slider::-webkit-slider-thumb
                 {-webkit-appearance: none; /* Override default look */
                  appearance: none;
                  width: 12px;        /* Set a specific slider handle width */
                  height: 25px;       /* Slider handle height */
                  background: silver; /* Silver background */
                  cursor: ew-resize;  /* Cursor on hover (east-west resize)*/
                 }
.slider::-moz-range-thumb
                 {-moz-appearance: none;
                  appearance: none;
                  width: 12px;        /* Set a specific slider handle width */
                  height: 25px;       /* Slider handle height */
                  background: silver; /* Silver background */
                  cursor: ew-resize;  /* Cursor on hover (east-west resize)*/
                 }
/* Amazingly, it seems that the :focus and ::-moz-range-thumb selectors
   can be combined! This allows us to style the slider button while
   it has focus!                                                     */
.slider:focus::-moz-range-thumb     {background: black;}
.slider:focus::-webkit-slider-thumb {background: black;}