#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%}

#fsPlayer .error	{box-sizing:border-box; margin:25px; padding-bottom:20px; text-align:left; border-bottom:1px solid #888; font-size:19px; text-shadow:0 2px 2px #000; color:#fff}
#fsPlayer .solution {line-height:2; margin:25px; text-align:left; font-size:13px; color:#fff}


/* 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%; /* for mobile */ outline:0}
	.fs-player video	{z-index:20; margin:0 auto; position:absolute !important}

	.fs-player .fs-canvas	{visibility:hidden; position:absolute; z-index:15}
	.fs-playBtn				{opacity:.9; position:absolute; top:0; left:0; width:100%; height:100%; z-index:50; cursor:pointer; background:url(./player/play.png) no-repeat center center; transition:all .5s; background-size:100px 100px}
	.fs-playBtn:hover		{opacity:1; background-size:120px 120px}

.fs-player .fs-video-controls	{position:absolute; bottom:5px; width:100%; height:30px; z-index:100; 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; margin-left:-5px; 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; box-sizing:border-box; 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:0; right:0; bottom:0; left:0; margin:auto}

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

/* play btn end */

/* paragraph */

.fs-index-wrap {position:relative; float:left; width:45px; height:30px; background-color:rgba(25, 25, 25, .8); cursor:pointer; text-overflow:ellipsis; white-space:nowrap}
	.fs-index-wrap .paragraph {position:absolute; top:0; bottom:0; height:18px; margin:auto; width:100%; color:#fff; font-size:12px}

	.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.indent	{padding-left:20px}

		.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; box-sizing:border-box; background-color:rgba(25, 25, 25, .8)}
	.fs-progress-wrapper 	{position:relative; position: absolute; top:0; right:0; bottom:0; left:0; height:10px; margin:auto 10px; padding:1px; border:1px solid #999; cursor:pointer; overflow:hidden}
	.fs-progress-wrapper .fs-progress-play		{position:relative; max-width:100%; width:0; height:10px; box-sizing:border-box; border-right:2px solid #fff; z-index:2; background:#00adee}
	.fs-progress-wrapper .fs-progress-buffer	{position:relative; top:-10px; z-index:1; width:0; height:10px; background:#999}

/* progress bar end */


/* time & indexTime start */

.fs-time-display,
.fs-indexTime-display {float:left; box-sizing:border-box; height:30px; padding: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.active, .fs-indexTime-display.active	{display:table}
.fs-time-display, .fs-indexTime-display					{display:none}

	.fs-time-display .separator, .fs-indexTime-display .separator	{width:auto; padding:0 4px}
	.fs-time-display span, .fs-indexTime-display span				{display:table-cell; vertical-align:middle}

/* time & indexTime end */


/* volume start */

.fs-volume {float:left; background-color:rgba(25, 25, 25, .8); position:relative; height:30px; box-sizing:border-box; padding:7px 5px}

	.fs-volume .fs-volume-button		{background-image:url(./player/volume.png); background-repeat:no-repeat; text-indent:-9999px; height:16px; width:16px; cursor:pointer}

	.fs-volume .fs-volume-button		{background-position:0 0}
	.fs-volume .fs-volume-button.half	{background-position:0 -16px}
	.fs-volume .fs-volume-button.muted	{background-position:0 -32px}

	.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(./player/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}

	.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}


/* volume end */

/* thumbnail start */

.fs-storyboard-wrapper {position:absolute; bottom:45px; visibility:hidden; z-index:60; padding:1px; background-color:rgba(25, 25, 25, .8); color:#fff; overflow:visible}
	.fs-storyboard-wrapper.active {visibility: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; box-sizing:border-box; height:30px; padding:7px 5px; cursor:pointer; background-color:rgba(25, 25, 25, .8)}
	.fs-fullscreen .tog {width:16px; height:16px; background-image:url(./player/fullscreen.png); background-position:no-repeat}

	.fs-fullscreen .tog			{background-position:0     0}
	.fs-fullscreen .tog:hover	{background-position:-16px 0}

	.fullscreen .fs-fullscreen .tog			{background-position:0    -16px}
	.fullscreen .fs-fullscreen .tog:hover	{background-position:-16px -16px}

	.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:60; 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(./player/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; display:block; margin:0 auto}
.fs-player.stretch .fs-poster {object-fit:contain}


/* loading */

.fs-loading {position:absolute; top:50%; left:50%; z-index:60; width:37px; height:37px; margin-left:-18px; margin-top:-18px; background:url(./player/loading.gif) no-repeat top center; display: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(./player/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; font-size:12px; 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; background:url(./player/bg_volw.png); border:1px solid #888}
		.fs-playback .fs-playback-position			{width:6px; background:url(./player/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}


/* seekerHelper */

.fs-seekerHelper {position:absolute; bottom:60px; left:0; right:0; margin:auto; z-index:9999; color:#999}
	.fs-seekerHelper .storyboard		{display:inline-block; margin-right:15px; opacity:.8; border:1px solid #999; box-shadow:0 0 4px #333}

	.fs-seekerHelper .currentTimeBox	{display:inline-block; opacity:.5; position:relative; top:5px; text-shadow:2px 2px #000; text-align:center}
		.fs-seekerHelper .currentTime	{font-size:50px; font-weight:bold}
		.fs-seekerHelper .offset		{position:relative; top:-10px; font-size:25px}


/* pager */
.fs-prev, .fs-next {visibility:hidden; position:absolute; top:0; bottom:60px; width:15%; z-index:55; background-repeat:no-repeat; opacity:0; cursor:pointer}

.fs-prev.active, .fs-next.active {visibility:visible}

	.fs-prev {left:0;  background-position:15%  50%; background-image:url(./player/prev.png)}
	.fs-next {right:0; background-position:85% 50%; background-image:url(./player/next.png)}

	.fs-player.hover .fs-prev, .fs-player.hover .fs-next {opacity:1}


/* cog */
.fs-cog-wrap {position:relative; float:left; box-sizing:border-box; height:30px; padding:7px 5px; background-color:rgba(25, 25, 25, .8);}
	.fs-cog-button {width:16px; height:16px; background-image:url(./player/cog.png); background-repeat:no-repeat; cursor:pointer}

	.fs-cog-button		{background-position:0 0}
	.fs-cog-button:hover{background-position:0 -16px}

	.fs-cog-wrap ul {width:215px; position:absolute; padding:0 5px; margin:0; border-radius:2px; line-height:1.8; background-color:rgba(25, 25, 25, .8); list-style:none; text-align:left; z-index:999; cursor:normal}
	.fs-cog-wrap .list li {padding:0; margin:5px 0; color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px}
		.fs-cog-wrap .list .title	{float:left; margin-right:10px; width:80px; text-align:right}
		.fs-cog-wrap .list .content {overflow:hidden}

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

		.fs-cog-wrap .cog-playback	 select,
		.fs-cog-wrap .cog-resolution select {position:relative; z-index:10; width:105px !important; height:auto !important; padding:0 !important; line-height:1 !important}


	.fs-cog-wrap ul .spanLink		{color:#ccc}
	.fs-cog-wrap ul .spanLink:hover {color:#fff; text-decoration:underline}