/* video container */
.videoContainer{
	width:600px;
	height:350px;
	position:relative;
	overflow:hidden;
	background:#000;
	color:#ccc;
}

/* video caption css */
.caption{
	display:none;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	padding:10px;
	color:#ccc;
	font-size:20px;
	font-weight:bold;
	box-sizing: border-box;
	-ms-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	background: #1F1F1F; /* fallback */
	background:-moz-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%);
	background:-webkit-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%);
	background:-o-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%);
}

/*** VIDEO CONTROLS CSS ***/
/* control holder */
.control{
	background:#333;
	color:#ccc;
	position:absolute;
	bottom:3%;
	left:20%;
	width:60%;
	height:60px;
	z-index:5;
	border:1px solid #404040;
	display:none;
}
.btmControl{
	background:-moz-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%);
	background:-webkit-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%);
	background:-o-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%);
	position:relative;
	height:50px;
}
/* Main button */
.mainControl{
	width:182px;
	text-align:center;
	margin:auto;
	border-radius:7px 7px 0 0;
}
.control a.btnmain{
	margin:5px 2px 2px;
	cursor:pointer;
	float:left;
}
.control a.btnmain:focus{
	outline:none;
}
.control a.lvl1{
	width:40px;
	height:40px;
}
.control a.lvl2{
	width:33px;
	height:33px;
	margin-top:10px;
}
.control a.lvl3{
	width:28px;
	height:28px;
	margin-top:15px;
}
.control a.btnPlay{
	background:url(control.png) no-repeat 0 0;
}
.control a.btnPlay:hover, .control a.btnPlay:focus{
	background:url(control.png) no-repeat 0 -40px;
}
.control a.paused{
	background:url(control.png) no-repeat -40px 0 !important;
}
.control a.paused:hover, .control a.paused:focus{
	background:url(control.png) no-repeat -40px -40px !important;
}
.control a.btnBck{
	background:url(control.png) no-repeat -113px 0;
}
.control a.btnBck:hover, .control a.btnBck:focus{
	background:url(control.png) no-repeat -113px -40px;
}
.control a.btnFwd{
	background:url(control.png) no-repeat -80px 0;
}
.control a.btnFwd:hover, .control a.btnFwd:focus{
	background:url(control.png) no-repeat -80px -40px;
}
.control a.btnStop{
	background:url(control.png) no-repeat -146px 0;
}
.control a.btnStop:hover, .control a.btnStop:focus{
	background:url(control.png) no-repeat -146px -40px;
}
.control a.btnEnd{
	background:url(control.png) no-repeat -174px 0;
}
.control a.btnEnd:hover, .control a.btnEnd:focus{
	background:url(control.png) no-repeat -174px -40px;
}

/*** SOUND + VOLUME CSS ***/
/* sound */
.control div.sound {
	width:17px;
	height:17px;
	margin-top:5px;
	margin-left:-20px;
	cursor:pointer;
	background:url(control.png) no-repeat -202px 0;
}
.control div.muted{
	background:url(control.png) no-repeat -202px -40px;
}

/* volume */
.volume{
	position:absolute;
	bottom:3px;
	right:3px;
	cursor:pointer;
	width:40px;
	height:21px;
	background:#333;
}
.volume .volumeCover{
	position:absolute;
	top:0;
	left:0;
	z-index:10;
	background:url(control.png) no-repeat -219px 0;
	width:100%;
	height:100%;
}
.volume .volumeBar{
	display:block;
	width:75%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	background-color:#ccc;
	z-index:5;
}
.volume .volumeoff{
	background-color:#333;
}

/* PROGRESS BAR CSS */
/* Progress bar */
.progress {
	width:100%;
	height:10px;
	position:relative;
	cursor:pointer;
	background: #444; /* fallback */
	background:-moz-linear-gradient(top,#333,#555);
	background:-webkit-linear-gradient(top,#333,#555);
	background:-o-linear-gradient(top,#333,#555);
	box-shadow:0 -3px 3px #111 inset;
	-moz-box-shadow:0 -3px 3px #111 inset;
	-webkit-box-shadow:0 -3px 3px #111 inset;
}
.progress span {
	height:100%;
	position:absolute;
	top:0;
	left:0;
	display:block;
}
.timeBar{
	z-index:10;
	width:0;
	background: #3FB7FC; /* fallback */
	background:-moz-linear-gradient(top,#A0DCFF 50%,#3FB7FC 50%,#16A9FF 100%);
	background:-webkit-linear-gradient(top,#A0DCFF 50%,#3FB7FC 50%,#16A9FF 100%);
	background:-o-linear-gradient(top,#A0DCFF 50%,#3FB7FC 50%,#16A9FF 100%);
}
.bufferBar{
	z-index:5;
	width:0;
	background: #777; /* fallback */
	background:-moz-linear-gradient(top,#999,#666);
	background:-webkit-linear-gradient(top,#999,#666);
	background:-o-linear-gradient(top,#999,#666);
	box-shadow:0 -3px 3px #555 inset;
	-moz-box-shadow:0 -3px 3px #555 inset;
	-webkit-box-shadow:0 -3px 3px #555 inset;
}

/* OTHERS CSS */
/* video screen cover */
.loading, #init{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:url(loading.gif) no-repeat 50% 50%;
	z-index:2;
	display:none;
}
#init{
	background:url(bigplay.png) no-repeat 50% 50% !important;
	cursor:pointer;
}