/* always define video css */

video {
	display: block;
	position: relative; /* fallback will be also set to relative */
	width: 800px;
	height: 450px;
	
	background: #000; /* you can use background-properties yeah */
}
.handle-label {
	display: none;
}
.timeline-slider,
.volume-slider,
.progressbar {
	position: relative;
	zoom: 1;
}
.ui-slider-horizontal .ui-slider-handle,
.progressbar .ui-progressbar-value,
.ui-slider-horizontal .ui-slider-range {
	position: absolute;
	display: block;
	min-width: 1px;
	min-height: 1px;
	height: 100%;
	top: 0;
	left: 0;
}


.media-player {
	position: relative;
	width: 800px;
	height: 450px;
}
/* you can style the .fallback if you want */
.totalerror .media-controls,
.totalerror .media-state {
	display: none !important;
}
.flashblocker .media-element-box {
	min-width: 40px;
	min-height: 40px;
}
.media-label {
	position: absolute;
	z-index: 9;
	top: 10px;
	left: 10px;
	padding: 3px;
	
	-moz-border-radius: 5px;
	border-radius: 5px;
	font-size: 12px;
	font-weight: bold;
	color: #fff;
	background: #333 url(../img/player-sprites.png) repeat-x 0 0;
}
html > body .media-label {
	background-color: transparent;
}
.playing .media-label {
	display: none;
}

.media-controls {
	position: absolute;
	overflow: hidden;
	width: 100%;
	height: 22px;
	bottom: 10px;
}
.media-controls-box {
	position: relative;
	bottom: 0;
	zoom: 1;
	padding: 0 10px 0 60px;
	height: 100%;
}
.media-bar {
	position: relative;
	zoom: 1;
	padding: 0 145px 0 5px;
	height: 100%;
	color: #fff;
	font-size: 11px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	background: #333 url(../img/player-sprites.png) repeat-x 0 0;
}
html > body .media-bar {
	background-color: transparent;
}
/* button styles */
.media-controls a.btn {
	position: absolute;
	display: inline-block;
	overflow: hidden;
	text-align: center;
	
	cursor: pointer;
	background: url(../img/player-sprites.png) no-repeat 0 -200px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
.media-role,
.media-controls a.btn .button-text {
	position: absolute;
	left: -9999px;
	display: block;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.media-controls a.btn:hover,
.media-controls a.btn:focus,
.media-controls a.btn.jme-over {
	background-position: 0 -300px;
}
.media-controls a.btn:focus {
	outline: 1px dotted #666;
}
.media-controls a.btn:active {
	background-position: 0 -400px;
}
.media-controls a.btn .ui-icon {
	display: inline-block;
	width: 12px;
	height: 12px;
	vertical-align: top;
	background: url(../img/player-sprites.png) no-repeat -9999px -9999px;
}

/* play - pause button */
.media-controls a.play-pause {
	top: 0;
	left: 10px;
	width: 42px;
	height: 22px;
}
.media-controls a.play-pause .ui-icon {
	margin: 5px 0 0 2px;
	background-position: 0 -700px;
}
.media-controls a.play-pause .ui-icon-pause {
	background-position: 0 -799px;
}
/* fullscreen button */
.media-controls a.fullscreen {
	right: 5px;
	top: 3px;
	width: 16px;
	height: 16px;
}
.media-controls a.fullscreen .ui-icon {
	margin: 3px 0 0 2px;
	background-position: 0 -900px;
}
.media-controls a.fullscreen .ui-icon-circle-zoomout {
	background-position: 0 -1000px;
}

.timeline-slider {
	top: 8px;
	height: 4px;
	padding: 1px;
	
	font-size: 0;
	line-height: 0;
	-moz-border-radius: 3px;
	border-radius: 3px;
	background: #999 url(../img/player-sprites.png) repeat-x 0 -104px;
}
html > body .timeline-slider {
	background-color: transparent;
}
.timeline-slider .ui-slider-range {
	top: 1px;
	left: 1px;
	height: 4px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	background: #369;
	cursor: pointer;
}

.timeline-slider .ui-slider-handle {
	top: -4px;
	z-index: 9;
	margin: 0 0 0 -2px;
	height: 4px;
	width: 5px;
	height: 15px;
	background: url(../img/player-sprites.png) no-repeat 0 -1099px;
	outline: none;
	cursor: pointer;
}
.timeline-slider.ui-state-disabled .ui-slider-handle {
	cursor: default;
}
.timeline-slider .ui-slider-handle.ui-state-active {
	background-position: 0 -1199px;
	outline: 1px dotted #999;
}
.progressbar {
	height: 100%;
}
.ui-progressbar-value {
	-moz-border-radius: 3px;
	border-radius: 3px;
	background: #e3e3e3;
	cursor: pointer;
}
.time-display {
	position: absolute;
	right: 65px;
	top: 4px;
	display: inline-block;
	overflow: hidden;
	width: 70px;
	font-size: 10px;
	text-align: center;
}
.volume-slider {
	position: absolute;
	top: 4px;
	right: 28px;
	height: 14px;
	width: 30px;
	cursor: pointer;
	background: url(../img/player-sprites.png) no-repeat 1px -599px;
}
.volume-slider .ui-slider-handle {
	outline: none;
}
.volume-slider .ui-slider-handle.ui-state-active {
	outline: 1px dotted #999;
}
.volume-slider .ui-slider-range {
	background: url(../img/player-sprites.png) no-repeat 1px -499px;
}
.media-state {
	position: absolute;
	/* let the right click on video-element */
	display: none;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/* preload loading-image */
	background: url(../img/loader.gif) no-repeat -9999px -9999px;
	cursor: pointer;
}
/* in modern browser, don't let media-state being under fullscreen-button (enabling flash-fullscreen technique) */
html > body .media-state {
	height: auto;
	top: 10px;
	bottom: 32px;
}
.idle .media-state,
.waiting .media-state {
	display: block;
}
.idle .media-state {
	background: url(../img/play-overlay.png) no-repeat center;
}
.waiting .media-state {
	background: url(../img/loader.gif) no-repeat center;
}
/* IE6 does not support fullscreen */
.fullscreen-unsupported .fullscreen {
	display: none !important;
}

/* flash-fullscreen button feature for CSS3 pointer-events supporting browsers */
.jme-flashbutton-wrapper .media-controls {
	pointer-events: none;
}
.jme-flashbutton-wrapper .play-pause,
.jme-flashbutton-wrapper .media-bar > *:not(.jme-flashbutton) {
	pointer-events: auto;
} 
/* fullscreen */
.wraps-fullscreen .media-controls,
.wraps-fullscreen .media-label {
	z-index: 999999;
}
.wraps-fullscreen .media-state {
	bottom: 42px;
	z-index: 999996;
}
.wraps-fullscreen .media-label {
	font-size: 16px;
}
.wraps-fullscreen .media-controls {
	width: auto;
	bottom: 20px;
	left: 160px;
	right: 160px;
}