#player {
	background-image: linear-gradient( rgb(23,23,23), rgb(7,7,7));
	border: 0;
	height: 32px;
	width: 90%;
	padding: 0;
	margin: 0.1em 5% 2em 5%;
	text-align: center;
	box-shadow: 0.25em 0.25em 1em rgba(0,0,0,0.5);
	position: relative;
}
#player * {
	display: inline-block;
}
#timecode {
	background-image: linear-gradient( rgb(14,14,14), black );
	box-shadow: 1px 2px 6px rgba(0,0,0,0.5);
	color: rgba(247,152,0,0.85);
	display: none;
	width: auto;
	margin: 0;
	padding: 0.15em 0.4em;
	position: absolute;
	transform: translateX( calc( -50% + 0.15em )) translateY( -1.15em );
	z-index: 1;
}
#button_play, #button_pause {
	cursor: pointer;
	height: 32px;
	width: 32px;
	border-right: 1px solid rgb(7,7,7);
	margin: 0;
	position: absolute;
	left: 0;
}
#button_volume, #button_volume_2, #button_volume_3, #button_mute {
	cursor: pointer;
	height: 32px;
	width: 32px;
	border-left: 1px solid rgb(7,7,7);
	margin: 0;
	position: absolute;
	right: 0;
}
#timeNow, #timeTotal {
	width: 32px;
	text-align: center;
	text-indent: 0;
	margin: 0;
	position: absolute;
}
#timeNow {
	color: rgba(247,152,0,0.85);
	top: 4px;
	left: 32px;
	text-align: right;
}
#timeTotal {
	color: rgba(247,152,0,0.85);
	top: 4px;
	right: 32px;
	text-align: left;
}
#playerBar {
	background-image: linear-gradient( rgb(27,27,27), rgb(52,52,52));
	border-radius: 2px;
	height: 25%;
	width: calc( 100% - 140px );
	margin: 0;
	margin-top: 12px;
	position: relative;
	cursor: pointer;
}
#barBuffer {
	background-image: linear-gradient( rgba(127,47,0,0.25), rgba(255,159,0,0.25));
	border-radius: 2px;
	height: 100%;
	width: 0%;
	margin: 0;
	left: 0;
	position: absolute;
}
#barTop {
	background-image: linear-gradient( rgb(255,159,0), rgb(127,47,0));
	border-radius: 2px;
	height: 100%;
	width: 100%;
	margin: 0;
	left: 0;
	position: absolute;
}
#playerTitle {
	font-size: 1.2em;
	margin: 1em 0 0 6%;
}
#button_pause, #button_volume_2, #button_volume_3, #button_mute {
	display: none;
}