#media {position:relative; overflow:hidden; text-align:center; -webkit-user-select:none}
.fullscreen #media {max-width:none}

/* flash */
#fsPlayer {position:relative; width:100%; height:100%}
	#fsPlayer object,
	#fsPlayer embed {position:absolute; top:0; left:0; width:100%; height:100%}

/* html5 player */
.fs-player.fullscreen	{position:fixed !important; top:0; left:0; right:0 !important; bottom:0 !important; padding:0; z-index:9999; background:#000; min-width:none}
	.fs-player.fullscreen video	{position:static !important; display:block; margin:0 auto}

.fs-player				{text-align:center; height:100%}
	.fs-player video	{z-index:15; margin:0 auto; position:absolute !important}

	.fs-player .fs-canvas	{visibility:hidden; position:absolute; z-index:15}
	.fs-playBtn {opacity:.6; position:absolute; top:0; left:0; width:100%; height:100%; z-index:50; cursor:pointer; background:url(img/play.png) no-repeat center center}
	.fs-playBtn:hover {opacity:.8}

.fs-player .fs-video-controls {position:absolute; bottom:5px; width:100%; height:30px; z-index:100; opacity:.8; transition:opacity .2s ease-in}
	.fs-video-controls.inactive {opacity:0}

	.control-hide .fs-video-controls {display:none  !important; opacity:0  !important}
	.control-show .fs-video-controls {display:block !important; opacity:.8 !important}

	.fs-player .fs-video-controls > .separator	{float:left; width:10px}

.boderRadius {float:left; width:5px; height:30px; background-color:rgba(25, 25, 25, .8)}
	.boderRadius.left	{border-top-left-radius:5px;	border-bottom-left-radius:5px}
	.boderRadius.right	{border-top-right-radius:5px;	border-bottom-right-radius:5px}

/* bezel */

.fs-center-overlay {position:absolute; top:50%; left:50%; z-index:40; margin-top:-30px}
	.fs-bezel-fade {-webkit-transform:scale(1.8); -ms-transform:scale(1.8); transform:scale(1.8); opacity:0; -webkit-transition:all .4s ease-in; transition:all .4s ease-in}
		.fs-bezel-fade .play	{width:0; height:0; border-top:20px solid transparent; border-bottom:20px solid transparent; border-left:30px solid #fff}
		.fs-bezel-fade .pause	{width:10px; height:40px; border-right:10px solid #fff; border-left:10px solid #fff}

.control-hide .fs-center-overlay {display:none}

/* poster */
.fullscreen .fs-poster {display:none}
.fs-poster {display:block; max-width:100%; max-height:100%; margin:0 auto; position:relative; z-index:50}

/* play btn start */

.fs-play-wrap		{position:relative; float:left; width:50px; height:30px; cursor:pointer; border-radius:5px; background-color:rgba(25, 25, 25, 0.8)}
.fs-play-wrap:hover	{background-color:#00adee}

	.fs-play-wrap .play			{position:absolute; top:50%; left:50%; margin:-7px 0 0 -8px}

	.fs-play-wrap .play.paused	{border-left:16px solid #fff; border-top:7px solid transparent; border-bottom:7px solid transparent}
	.fs-play-wrap .play.playing {width:5px; height:16px; border-left:5px solid #fff; border-right:5px solid #fff}

/* play btn end */

/* paragraph */

.fs-index-wrap {float:left; width:45px; height:30px; background-color:rgba(25, 25, 25, .8); text-align:center; cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
	.fs-index-wrap .paragraph {margin-top:6px; color:#fff}

	.fs-index-wrap ul {z-index:10; position:absolute; width:160px; max-height:160px; padding:0; margin:0; overflow:auto; border-radius:2px; line-height:1.8; background-color:rgba(25, 25, 25, .8); box-shadow:0 0 4px #999; list-style:none; text-align:left; z-index:999}

		.fs-index-wrap ul	 {display:none;  transition:display .1s}
		.fs-index-wrap ul.in {display:block; transition:display .1s}

		.fs-index-wrap ul li		{padding:0 10px; color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

		.fs-index-wrap ul li.active	{background-color:#00adee}
		.fs-index-wrap ul li:hover	{background-color:#666}


/* progress bar start */

.fs-progress-bar			{position:relative; float:left; width:0; height:30px; background-color:rgba(25, 25, 25, .8)}
	.fs-progress-wrapper 	{position:relative; top:9px; height:10px; margin:0 10px; padding:1px; border:1px solid #999; cursor:pointer}
	.fs-progress-wrapper .fs-progress-play		{position:relative; width:0; height:10px; border-right:2px solid #fff; z-index:2; background:#00adee}
	.fs-progress-wrapper .fs-progress-pointer	{display:none; position:absolute; top:1px; z-index:2; background-color:#fff; width:2px; height:10px}
	.fs-progress-wrapper .fs-progress-buffer	{position:absolute; top:1px; z-index:1; width:0; height:10px; background:#999}

/* progress bar end */


/* time start */

.fs-time-display {float:left; width:80px; height:23px; padding:7px 5px 0 5px; color:#fff; white-space:nowrap; overflow:hidden; text-align:right; background-color:rgba(25, 25, 25, .8); font-size:12px; cursor:default}
	.fs-time-display .separator {float:none; width:auto; padding:0 4px}

/* time  end*/

/* volume start */

.fs-volume {float:left; background-color:rgba(25, 25, 25, .8); position:relative; height:30px; width:30px}
	.fs-volume .fs-volume-bar			{position:absolute; bottom:30px; left:-3px; width:30px; height:80px; background-color:rgba(25, 25, 25, .8); border-top-left-radius:5px; border-top-right-radius:5px}
	.fs-volume.inactive .fs-volume-bar	{display:none}

	.fs-volume .fs-volume-button		{background:url(img/volume.png) no-repeat center; text-indent:-9999px; margin:8px 0 0 5px; height:12px; width:16px; cursor:pointer}

	.fs-volume .fs-volume-button		{background-position:0 0}
	.fs-volume .fs-volume-button.half	{background-position:0 -12px}
	.fs-volume .fs-volume-button.muted	{background-position:0 -24px}

	.fs-volume .fs-volume-wrapper				{position:relative; width:6px; height:64px; padding-top:1px; margin:10px 0 0 10px; cursor:pointer; border:1px solid #888}
		.fs-volume .fs-volume-position			{width:6px; background:url(img/bg_vol.png); position:absolute; bottom:0}
		.fs-volume .fs-volume-position:before	{content:" "; position:relative; top:-2px; left:-5px; display:block; width:16px; height:1px; border-top:4px solid #fff}


/* volume end */

/* thumbnail start */

.fs-storyboard-wrapper {position:absolute; bottom:45px; display:none; z-index:60; padding:1px; background-color:rgba(25, 25, 25, .8); color:#fff; overflow:visible}
	.fs-storyboard-wrapper .fs-thumbnail	{}
	.fs-storyboard-wrapper .fs-timestamp	{font-size:12px}
	.fs-storyboard-wrapper .arrow			{position:absolute; left:50%; bottom:-5px; margin-left:-5px; width:0; height:0; border-top:5px solid rgba(55,55,55, .8); border-left:5px solid transparent; border-right:5px solid transparent}

	.fs-storyboard-wrapper.with-text		{}
		.fs-storyboard-wrapper.with-text .fs-timestamp	{padding:0 5px}

	.fs-storyboard-wrapper.with-text .thumbnail			{display:none}
	.fs-storyboard-wrapper.with-thumbnail .fs-timestamp {margin:-18px auto 0; width:60px; border-radius:4px; background-size:cover; background-color:rgba(25, 25, 25, .8)}

/* thumbnail end */


/* fullscreen start */

.fs-fullscreen {float:left; padding:8px 0 0 8px; width:23px; height:22px; cursor:pointer; background-color:rgba(25, 25, 25, .8)}
	.fs-fullscreen .tog {background:url(img/fullscreen.png) center no-repeat}

	.fs-fullscreen .tog				{width:14px; height:12px; background-position:0 0}
	.fullscreen .fs-fullscreen .tog	{background-position:0 -12px}

	.fullscreen .fs-video-controls		{position:fixed; bottom:10px}
	.fullscreen .fs-storyboard-wrapper	{position:fixed; bottom:45px}
	.fullscreen .fs-center-overlay		{position:fixed; margin:-20px 0 0 -20px}

/* fullscreen end */



/* strech */

.fs-stretch					{position:absolute; z-index:50; padding:5px; top:10px; right:10px; border-radius:5px; background-color:#1c1c1c; opacity:.6; cursor:pointer}
	.fs-stretch-btn			{width:25px; height:25px; background-image:url(img/stretch.png); background-position:0 -25px; background-repeat:no-repeat}
	.fs-stretch-btn.active	{background-position:0 0}
.fs-stretch:hover	{opacity:.8}

.fs-player.stretch video {width:100% !important; max-width:100% !important; position:static !important; display:block; margin:0 auto}
.fs-player.stretch .fs-poster {display:none}

/* loading */
.fs-loading {position:absolute; top:50%; left:50%; z-index:50; width:37px; height:37px; margin-left:-18px; margin-top:-18px; background:url(img/loading.gif) no-repeat top center; display:none}


.fullscreen .fs-subtitle {font-size:28px}
.fs-subtitle							{width:100%; position:absolute; bottom:50px; color:#fff; font:normal 16px Arial,sans-serif; text-shadow:-1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; text-align:center; z-index:2}
	.fs-subtitle .fs-subtitle-content	{margin:0 20px; user-select:none; -webkit-user-select:none; -moz-user-select:none}

/* canvas */

.fs-player .canvas-container  {z-index:90; position:absolute !important; top:0; left:0}

/* resolution */

.fs-resolution-wrap {float:left; position:relative; background-color:rgba(25, 25, 25, 0.8);}

	.fs-resolution-button {width:30px; height:30px; background:url(img/resolution.png) center no-repeat; cursor:pointer}

	.fs-resolution-wrap ul {position:absolute; width:100px; z-index:10; border-radius:2px; line-height:1.8; background-color:rgba(25, 25, 25, .8); box-shadow:0 0 4px #999; text-align:left; list-style:none}
		.fs-resolution-wrap ul li	{padding:0 10px; color:#fff; cursor:pointer}

				.fs-resolution-wrap ul		{display:none;  transition:display .1s}
				.fs-resolution-wrap ul.in	{display:block; transition:display .1s}

				.fs-resolution-wrap ul li.active	{background-color:#00adee}
				.fs-resolution-wrap ul li:hover		{background-color:#666}


/* playback */

.fs-playback {float:left; background-color:rgba(25, 25, 25, .8); position:relative}
	.fs-playback .fs-playback-bar			{position:absolute; bottom:30px; left:-3px; width:30px; height:80px; background-color:rgba(25, 25, 25, .8); border-top-left-radius:5px; border-top-right-radius:5px}
	.fs-playback.inactive .fs-playback-bar	{display:none}

	.fs-playback .fs-playback-button		{width:30px; height:25px; padding-top:5px; cursor:pointer; color:#ccc; text-align:center}

	.fs-playback .fs-playback-wrapper				{position:relative; width:6px; height:64px; padding-top:1px; margin:10px 0 0 10px; cursor:pointer; border:1px solid #888}
		.fs-playback .fs-playback-position			{width:6px; background:url(img/bg_vol.png); position:absolute; bottom:0}
		.fs-playback .fs-playback-position:before	{content:" "; position:relative; top:0; left:-5px; display:block; width:16px; height:0; border-top:4px solid #fff}

/* msg */
.fs-msg	{position:absolute; z-index:90; bottom:40px; right:15px; display:none; font-size:12px; color:#fff; cursor:default; text-shadow:-1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; user-select:none}


/* pager */

.fs-prev, .fs-next {display:none; position:absolute; top:0; width:33%; height:100%; z-index:18; background-repeat:no-repeat; opacity:.5; cursor:pointer}
.fs-prev:hover,
.fs-next:hover	{opacity:1}

.fs-player:hover .fs-prev.active,
.fs-player:hover .fs-next.active {display:block}

	.fs-prev {left:0;  background-position:5%  50%; background-image:url(img/prev.png)}
	.fs-next {right:0; background-position:95% 50%; background-image:url(img/next.png)}

	.control-hide .fs-prev {display:none !important}
	.control-hide .fs-next {display:none !important}

	.control-show .fs-prev {display:block !important}
	.control-show .fs-prev {display:block !important}