video:-webkit-full-screen
{
  max-height: 100%;
}

video:-moz-full-screen
{
  max-height: 100%;
}


#videoCloseIcon
{
  position:absolute;
  display:none;

  width:2em;

  top:-.6em;
  left:-.6em;
  z-index:99999;
  cursor: pointer;


}

#listingPreviewVideoPlayer
{
  width:100%;
  height:100%;
}

#videoContainer
{
  position: relative;
  width:100%;
  height:100%;
}


.AiMedLibVideoPlayer
{
  position: relative;
  background: black;
  width: 100%;
  height: 100%;
}

.AiMedLibVideoPlayer:focus
{
  outline:0;
}

#shareView
{
  display:none;
  position:absolute;
  width:100%;
  height:100%;
  background-color:black;
  opacity:.85;
  top:0;
  left:0;
  z-index:9999;
}



#seekBarLogo
{
  width: 2.5em;
}

#seekBarLogoWrap
{
  width: 7%;
  vertical-align: middle;
  display: table-cell;
  text-align: center;
}

#embeddedPreview
{
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: .85;
  top: 0;
  left: 0;
  z-index: 9999;
}

#closeShare
{
  width:1.5em;
  margin:.5em;
}

#shareContent
{
  width:100%;
  margin-top:10%;

}

#videoShare
{
  display:none;
}


.AiMovieHeader
{
  width:100%;
  height:1.5em;
  line-height:1.1em;
  background-color:black;
}

.AiMedLibVideo
{
  width:100%;
  height:100%;
  background-color:black;

}

.AiSmallControlIcon
{
  width:1.4em;
  height: 1.5em;
  cursor:pointer;
  margin-top: 2px;
}

.AiSmallControlIcon.Left
{
  margin-right:4px;
}

.AiSmallControlIcon.Right
{
  margin-left:2px;
}

.AiNavPlayerCursor
{
  width:2px;
  height:1.2em;
  background-color:red;
}

#aiMovieTitle
{
  color:white;
  display:block;
  font-size:110%;
  padding: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 97%;
}

.AiVideoAction
{
  z-index:9999;
  position:absolute;
  top:40%;
  left:45%;

  cursor:pointer;
  width:4em;
  height:4em;

}
/* TODO further development
  leave this in for further development on the video full screen mode.
  this shadow DOM pseudoclass disables native full screen controls

video::-webkit-media-controls
{
  display:none !important;
}
*/

.AiVideoControls
{
  position:absolute;
  height:5.2em;
  width:94%;
  bottom: 2%;
  left:3%;
  background-color:black;
  display:none;

/* TODO further development
  leave this in for further development on the video full screen mode.
  z-index: 2147483646 is the highest integer possible in a 32bit environment so going one value higher
  places the full screen controls above the video

  z-index: 2147483647;

*/
}

#aiVideoControlBox
{
  border:1px solid #5c9ec8;
  position:relative;
  display: table;
  width: 98%;
  left: 1%;
  box-sizing: border-box;
}

.AiVideoControlSection
{
  height:3.2em;
  border-right:1px solid #5c9ec8;
  display:table-cell;
  vertical-align:middle;
  text-align: center;
}

.Last
{
  border-right:none;
  white-space: nowrap;

}

.Left
{
  left:13.5em;

}

#aiFullScreenWrap
{
  position:absolute;
  top:1%;
  right: 1%;
  display:none;
  background-color:black;
  padding:.3em;
}

#aiFullScreen
{
  display:table;
  border-collapse: collapse;
}

#aiFullScreen div
{
  border: 1px solid #5c9ec8;
}


#fullScreen
{
  display: table-cell;
}


#aiFullScreen img
{
  width: 2em;
  height: 2em;
  padding: 0.3em;
  cursor: pointer;
  display: block;
}


#controlsAction
{
  width:8%;
  position: relative;
}

#controlsVolume
{
  width:5%;
  position: relative;
}

#videoAction
{
  width:26px;
  height:26px;
}

#controlsLeft, #controlsRight
{
  width: 4.5%;
}

#volIcon
{
  width:16px;
  height:16px;
  position: relative;
}

.VideoBox
{

}

#seekSection
{
  width:78%;
  vertical-align: top;
}

#seekBar /* see end of file for media queries*/
{
  display:inline-block;
  width:37em;
}


.SeekBar
{
  height:.7em;
  background-color:gray;
  margin-top:3px;
  position:relative;
}


.SeekThumb
{
  border-radius:2em;
  background-color:#5c9ec8;
  width:1.1em;
  height:1.1em;
  cursor:pointer;
}

.AiVideoTimeText
{
  font-size:80%;
  color:white;
}

#volumeSlider
{
  display:none;
  width:1.5em;
  height:5em;
  bottom: 3.2em;
  left: 8.5%;
}

#timeTextBar
{
  margin-top:3px;

}


#timeLeft
{
  margin-left:82%;
}

#aiLogo
{
  width:1.5em;
  height:1.5em;
  margin-top:8px;
}

#aiLogoMedium
{
  width:1.5em;
  height:1.5em;
  margin-top:8px;
}

#logoSection
{
  border:0;
}



@media (max-width: 1700px)
{
  #seekBar
  {
    width:36em;
  }
}

@media (max-width: 1600px)
{
  #seekBar
  {
    width:36em;
  }
}

@media (max-width: 1500px)
{
  #seekBar
  {
    width:35em;
  }
}

@media (max-width: 1400px)
{
  #seekBar
  {
    width:34em;
  }
}

@media (max-width: 1300px)
{
  #seekBar
  {
    width:33.5em;
  }
}

@media (max-width: 1200px)
{
  #seekBar
  {
    width:32em;
  }
}

@media (max-width: 1100px)
{
  #seekBar
  {
    width:30em;
  }
}