.mediaPlayer { display: inline-block; position: relative; font-family: 'Segoe UI', Verdana, sans-serif; clear: both; margin-bottom: 10px; line-height: 1.4; font-size: 13px; border: 1px solid #e6e6e6; text-align: center; overflow: hidden; /* Chrome FIX for full screen */ }
.mediaPlayer .right { float: right; }
.mediaPlayer .left { float: left; }
.mediaPlayer a.smooth { transition: all 0.1s linear; -webkit-transition: all 0.1s linear; -moz-transition: all 0.1s linear; -o-transition: all 0.1s linear; }
.mediaPlayer:hover > .controls { bottom: 0; }
.mediaPlayer:hover > .controls .seekBar a { display: block; }
.mediaPlayer.jp-video-full > .controls { position: absolute; left: 0; right: 0; bottom: 0; opacity: 0.8; z-index: 1000; }
.mediaPlayer.jp-video-full, .mediaPlayer.jp-video-full object, .mediaPlayer.jp-video-full video { position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: block; border-width: 0px; z-index: 999; }
.mediaPlayer.jp-video-full > .playerScreen, .mediaPlayer.jp-video-full > .playerScreen > .video-play { z-index: 1000; }
.mediaPlayer .playerScreen { cursor: pointer; }
.mediaPlayer .playerScreen .video-play { display: block; position: absolute; z-index: 990; width: 100%; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.4); }
.mediaPlayer .playerScreen .video-play .play-icon { position: absolute; top: 50%; left: 50%; margin: -70px 0 0 -70px; display: block; width: 140px; height: 140px; background: url("sprite.png") 2px -284px; opacity: 0.5; }
.mediaPlayer .controls { display: block; position: absolute; height: 40px; background: #F5F5F5; color: #646464; padding: 0; z-index: 996; left: 0; bottom: -44px; right: 0; z-index: 1001; transition: all 0.2s ease-in; -webkit-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; -moz-transition: all 0.2s ease-in; }
.mediaPlayer .controls .seperator { display: inline-block; width: 2px; height: 40px; background: url("sprite.png") no-repeat 0 0; }
.mediaPlayer .controls .progress { position: absolute; display: block; width: 100%; top: -6px; left: 0; }
.mediaPlayer .controls .progress .seekBar { position: relative; display: block; cursor: pointer; padding: 0; margin: 0; height: 6px; background: #646464; }
.mediaPlayer .controls .progress .seekBar .playBar { display: block; height: 6px; padding: 0; background: red; }
.mediaPlayer .controls .progress .seekBar a { display: none; position: absolute; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: #4b4b4b; border: 1px solid #323232; margin-left: -3px; }
.mediaPlayer .controls .progress .seekBar a div { width: 8px; height: 8px; }
.mediaPlayer .controls .play { display: block; width: 40px; height: 40px; background: url("sprite.png") no-repeat 10px -60px; opacity: 0.8; }
.mediaPlayer .controls .play:hover { opacity: 1; }
.mediaPlayer .controls .volumecontrol { display: block; width: 40px; height: 40px; background: url("sprite.png") no-repeat 8px -105px; opacity: 0.8; overflow: hidden; word-wrap: none; transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; }
.mediaPlayer .controls .volumecontrol:hover { opacity: 1; width: 115px; transition: all 0.1s ease-in; -webkit-transition: all 0.1s ease-in; }
.mediaPlayer .controls .hd-video { display: block; width: 60px; height: 40px; background: url("sprite.png") no-repeat 10px -147px; opacity: 0.8; }
.mediaPlayer .controls .hd-video.disabled { opacity: 0.2; }
.mediaPlayer .controls .hd-video.enabled:hover { opacity: 1; }
.mediaPlayer .controls .pause { display: block; width: 40px; height: 40px; background: url("sprite.png") no-repeat -40px -60px; opacity: 0.8; }
.mediaPlayer .controls .pause:hover { opacity: 1; }
.mediaPlayer .controls .timer { display: block; float: left; line-height: 40px; margin: 0 10px; }
.mediaPlayer .controls .timer .current { display: inline; text-align: left; color: #282828; }
.mediaPlayer .controls .timer .duration { display: inline; right: 0px; text-align: right; }
.mediaPlayer .controls .timer .seperate { display: inline; }
.mediaPlayer .controls .volumebar { display: block; margin: 19px 0 0 45px; background-color: #EBEBEB; background: rgba(0, 0, 0, 0.1); width: 60px; cursor: pointer; }
.mediaPlayer .controls .volumebar .currentVolume { position: relative; height: 5px; padding: 0; }
.mediaPlayer .controls .volumebar .currentVolume .curvol { display: block; height: 5px; padding: 0; background: red; }
.mediaPlayer .controls .volumebar .currentVolume a { display: block; position: absolute; top: -5px; margin-left: -2px; width: 3px; height: 16px; background: #7d7d7d; }
.mediaPlayer .controls .volumebar .currentVolume a div { display: block; width: 3px; height: 16px; }
.mediaPlayer .controls .fullscreen { display: block; float: right; width: 40px; height: 40px; background: transparent url("sprite.png") no-repeat 8px -191px; opacity: 0.4; }
.mediaPlayer .controls .fullscreen:hover { opacity: 0.8; }
.mediaPlayer .controls .smallscreen { display: block; float: right; width: 40px; height: 40px; background: transparent url("sprite.png") no-repeat 8px -229px; opacity: 0.4; }
.mediaPlayer .controls .smallscreen:hover { opacity: 0.8; }
.mediaPlayer.audioPlayer .hd-video { display: none; }
.mediaPlayer.audioPlayer .seperator.right { display: none; }
.mediaPlayer.audioPlayer .fullScreen { display: none; }
.mediaPlayer.audioPlayer .fullScreenOFF { display: none; }

.mediaPlayer.darkskin { border-color: #373737; }
.mediaPlayer.darkskin .controls { background: #191919; }
.mediaPlayer.darkskin .controls .volumebar { background: rgba(255, 255, 255, 0.1); }
.mediaPlayer.darkskin .controls .volumebar .currentVolume a { background: gainsboro; }
.mediaPlayer.darkskin .controls .progress .seekBar { background: #646464; }
.mediaPlayer.darkskin .controls .timer .current { color: #e6e6e6; }
.mediaPlayer.darkskin .controls .timer .duration { color: #787878; }
.mediaPlayer.darkskin .controls .timer .seperate { color: #787878; }
.mediaPlayer.darkskin .playerScreen .video-play .play-icon { background-image: url("sprite-dark.png"); }
.mediaPlayer.darkskin .controls .seperator { background-image: url("sprite-dark.png"); }
.mediaPlayer.darkskin .controls .fullscreen { background-image: url("sprite-dark.png"); }
.mediaPlayer.darkskin .controls .smallscreen { background-image: url("sprite-dark.png"); }
.mediaPlayer.darkskin .controls .play { background-image: url("sprite-dark.png"); }
.mediaPlayer.darkskin .controls .pause { background-image: url("sprite-dark.png"); }
.mediaPlayer.darkskin .controls .hd-video { background-image: url("sprite-dark.png"); }
.mediaPlayer.darkskin .controls .volumecontrol { background-image: url("sprite-dark.png"); }