/*
	darkgrey: rgb(30, 30, 30);
	lightgrey: rgb(70, 70, 70);
	lightblue: rgb(50, 170, 220);
*/

#player {
	background-color: rgb(30, 30, 30);
	display: inline-block;

	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}
img {
	background-color: rgb(70, 70, 70);
}
img:hover {
	background-color: rgb(50, 170, 220);
}
img, #pbar-container, #sbar-container {
	cursor: pointer;
}

/* The Containers */

#video-container {
	width: 640px;
	height: 360px;
	position: relative;
}
	video {
		height: 100%;
		width: 100%;
	}
	#screen {
		height: 100%;
		width: 100%;
		line-height: 360px;
		text-align: center;
		position: absolute;
		z-index: 1 !important;

		background: -moz-radial-gradient(center, ellipse cover,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.01) 1%, rgba(0,0,0,0.65) 100%); /* FF3.6+ */
		background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(0,0,0,0)), color-stop(1%,rgba(0,0,0,0.01)), color-stop(100%,rgba(0,0,0,0.65))); /* Chrome,Safari4+ */
		background: -webkit-radial-gradient(center, ellipse cover,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.01) 1%,rgba(0,0,0,0.65) 100%); /* Chrome10+,Safari5.1+ */
		background: -o-radial-gradient(center, ellipse cover,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.01) 1%,rgba(0,0,0,0.65) 100%); /* Opera 12+ */
		background: -ms-radial-gradient(center, ellipse cover,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.01) 1%,rgba(0,0,0,0.65) 100%); /* IE10+ */
		background: radial-gradient(ellipse at center,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.01) 1%,rgba(0,0,0,0.65) 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	}
		#screen img {
			vertical-align: middle;
		}

#pbar-container {
	margin-top: 2px;
	padding-bottom: 2px;
	background-color: rgb(70, 70, 70);
}
	#pbar {
		height: 5px;
		width: 0%;
		background-color: rgb(50, 170, 220);
	}

#buttons-container {
	height: 50px;
}
	#buttons-container > * {
		display: inline-block;
		height: 100%;
		vertical-align: middle;
		margin: 0 10px;
	}
	#time-field {
		color: rgb(50, 170, 220);
		line-height: 50px;
		cursor: default;
	}
	#sound-button {
		margin-right: 0;
	}
	#sbar-container {
		margin-left: 0;
		width: 100px;
		height: 5px;
		background-color: rgb(70, 70, 70);
	}
		#sbar {
			height: 100%;
			width: 100%;
			background-color: rgb(50, 170, 220);
		}
	#fullscreen-button {
		float: right;
	}