body

  {

    margin-left: 0px;

    margin-right: 0px;

    margin-top: 0px;

    margin-bottom: 0px;



    min-height: 100%;



    background-color: #000000;

  }



  .mainContainer

  {

    position: absolute;



    width: 100%;

    height: 100%;

  }



  /*<div id="videoPlayerContainer">*/

  .videoPlayerContainer

  {

    width: 100%;

    height: 92.5%;

  }



  /*<video>*/

  .videoPlayer

  {

    width:100%;

    height:100%;



    background-color: #000000;

  }



  /* <div id="controlRack"> */

  .controlRack

  {

    position: absolute;

    width: 100%;

    height: 50px;



    bottom: 0px;

  }



  .playButton

  {

    margin: 0px 0px 0px 0px;

    width: 5%;

    height: 50px;



    display: inline-block;



    background-color: #FF0000;

  }



  .playButtonIcon

  {

    position: relative;

    left: 50%;

    top: 50%;

  }



  .pauseButton

  {

    margin: 0px 0px 0px 0px;

    width: 5%;

    height: 50px;



    display: inline-block;



    background-color: #FF0000;

  }



  .pauseButtonIcon

  {

    position: relative;

    left: 50%;

    top: 50%;

  }



  .timerText

  {

    width: 5%;

    height: 50px;

    float: left;

    color: #FFFFFF;



    text-align: center;

    vertical-align: middle;

    line-height: 50px; /* same height as div height */

  }



  .progressBar

  {

    width: 80%;

    height: 50px;

    background-color: #00FF00;



    display: block;

    float: left;

  }



  .playhead

  {



  }



  .fullscreenButton

  {

    margin: 0px 0px 0px 0px;

    width: 5%;

    height: 50px;



    /*float: right;*/

    display: inline-block;

    background-color: #FF0000;

  }



  .fullscreenButtonIcon

  {

    position: relative;

    left: 50%;

    top: 50%;

  }



  .controlButton

  {

    padding: 0;

    margin: 0;

    width: 5%;

    height: 50px;

    text-align: center;

    float: left;

    display: inline-block;

    background-color: #FF0000;

  }





  #fullscreenButton

  {

      float: right;

  }



  .scrubberIcon

  {

    position: absolute;

  }



  .buttonIcon

  {

    position: relative;

    top: 40%;

    width: 90%;

    height: auto;

  }

  /*<div>*/

  .bufferAnimation

  {

    position:absolute;



    left: 40%;

    top: 40%;



    width: 250px;

    height: 75px;

    z-index: 999;

  }



  /*<canvas>*/

  .bufferingCanvas

  {

    width: 100%;

    height: 100%

  }



  .hoverTime

  {

    color: #FFFFFF;

    background-color: #FF0000;



    position: absolute;

    left: 0px;

    bottom: 50px;



    width: 100px;

    height: 25px;



    display: none;



    text-align: center;

    vertical-align: middle;

    line-height: 25px; /* same height as div height */

  }



  .progressBarColour

  {

    background-color: #0000FF;



    position: absolute;

    width: 0px;

    height: 50px;



    left: 0px;

    bottom: 0px;

  }





@media (min-width: 640px) {

  .buttonIcon {

    width: 17px;

    height: 17px;

  }

}