/* ----- Begin PHP Generated CSS ----- */
#audioUI input::-moz-range-thumb{
		-moz-appearance:none;
		-webkit-appearance:none;
		transition:background-color 0.25s;
		background-color:#999;
		border:none;
		border-radius:50%;
		cursor:ew-resize;
		width:15px;
		height:15px;
		margin-top:-6px;
	}
#audioUI input::-moz-range-thumb:hover{
		background-color:white;
	}
#audioUI input::-webkit-slider-thumb{
		-moz-appearance:none;
		-webkit-appearance:none;
		transition:background-color 0.25s;
		background-color:#999;
		border:none;
		border-radius:50%;
		cursor:ew-resize;
		width:15px;
		height:15px;
		margin-top:-6px;
	}
#audioUI input::-webkit-slider-thumb:hover{
		background-color:white;
	}
#audioUI input::-moz-range-track{
		background-color:#999;
		border-radius:3px;
		height:3px;
		border:none;
	}
#audioUI input::-webkit-slider-runnable-track{
		background-color:#999;
		border-radius:3px;
		height:3px;
		border:none;
	}
/* ----- End PHP Generated CSS ----- */
@font-face{
	/*
	* Striped down to the 3 characters I am using
	* https://github.com/iconic/open-iconic 
	*/
	font-family: Open Iconic Volume;
	src: url('data:font/truetype;base64,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');
}
*:not(input){
	margin:0;
	padding:0;
}
hr{
	margin-top:8px;
	margin-bottom:8px;
}
body{
	background:#383838;
	color:white;
	font-size:16px;
	font-family:DejaVu Serif, FreeSerif;
	font-variant:normal;
	font-style:normal;
	text-align:center;
	text-rendering:optimizeLegibility;
}
body > div{
	border:1px solid white;
	border-radius:5px;
	width:50%;
	min-width:320px;
	max-width:800px;
	display:inline-flex;
	align-content:stretch;
	align-items:flex-start;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:flex-start;
	box-sizing:border-box;
	margin-top:10px;
}
body > div:not(#tab_container),
#tab_content > div{
	padding:10px;
}
#player > div{
	display:inline-block;
	flex:1;
}
#player #crl{
	width:195px;
}
#player #opts{
	display:flex;
	flex:none;
	width:100%;
}
#player #opts div{
	display:inline-block;
	width:100%;
}
#player #cover{
  background-image:url('icons/sound2.png'); /* Added */
	width:100px;
	height:100px;
	background:white;
	border-radius:5px;
	margin:0 5px 5px 0;
	align-self:auto;
	line-height:100px;
	font-size:100px;
}
#player #title{
	width:100%;
	margin:0;
	display:inline-block;
	text-align:center;
	word-wrap:break-word;
}

#player #opts span:not(.true),
#player input:not([disabled]){
	cursor:pointer;
}
#player input[type="button"],
#find input[type="submit"],
#tab_container select,
#find input[type="text"]{/* Coloring credit: http://devgrow.com/dark-button-navigation-using-css3 */
	font-family:Arial, DejaVu Serif, FreeSerif;
	height:32px;
	font-size:17px;
	color:#9FA8B0;
	background-image:linear-gradient(to bottom, #3D4850 3%, #313d45 4%, #232B30 100%);
	box-shadow:1px 1px 1px rgba(0,0,0,0.2);
	border:1px solid #1c252b;
	border-radius:10px;
	outline:none;
}
select option{
	background-color:#383838;
}
#player input[type="button"]:hover,
#player input[type="button"]:focus,
#tab_container select:focus,
#tab_container select:hover,
#find input[type="text"]:focus,
#find input[type="submit"]:hover{
	background-image:linear-gradient(to bottom, #4C5A64 3%, #404F5A 4%, #2E3940 100%);
	color:white;
}
#player input[type="button"]:active,
#tab_container select:active,
#find input[type="submit"]:active{
	background-image:linear-gradient(to bottom, #20282D 3%, #252E34 51%, #222A30 100%);
	box-shadow:1px 1px 1px rgba(255,255,255,0.1)
}
#player #back,
#player #next{
	margin:6px 0 6px;
	width:80px;
}
#player #error{
	width:100%;
	height:30px;
	margin:0;
	color:red;
	font-weight:bold;
	text-align:center;
	display:none;
}
#player #error.open{
	display:block;
}
#player audio{ /* for IE 11 */
	width:100%;
	max-height:30px;
}
#player audio::-webkit-media-controls-play-button,
#player audio::-webkit-media-controls-mute-button{
	cursor:pointer;
}
#player audio::-webkit-media-controls-volume-slider,
#player audio::-webkit-media-controls-timeline{
	cursor:ew-resize;
}
#player audio::-webkit-media-controls-panel{
	background-color:#272525;
	border-radius:5px;
}
#player audio::-webkit-media-controls-time-remaining-display,
#player audio::-webkit-media-controls-current-time-display{
	color:white;
}
#player #audioUI{
	display:flex;
	flex:none;
	padding:8px 2px;
	width:calc(100% - 4px);
	background:#272525;
	border-radius:4px;
	align-items:center;
	height:15px;
	-moz-user-select:none;
	-webkit-user-select:none;
	-ms-user-select:none;
	user-select:none;
}
#player #audioUI > span:not([id]){
	font-size:small;
	white-space:nowrap;
}
#player #audioUI > span[id]{
	font-size:22px;
	cursor:pointer;
	padding:0 3px;
	color:gray;
	transition:color 0.25s;
}
#audioUI > span[id]:hover,
#audioUI > span[id]:active{
	color:white;
}
#audioUI #mute{
	/* font-family:Segoe UI Symbol, Symbola, Quivira, Segoe UI Emoji, EmojiOne Mozilla; */
	font-family:Open Iconic Volume;
	min-width:22px;
	text-align:left;
}
#audioUI input{
	appearance:none;
	-moz-appearance:none;
	-webkit-appearance:none;
	background-color:transparent;
	outline:none;
	margin:0 5px;
	padding:0;
	flex:3;
}
#player #audioUI input::-moz-focus-outer{
	border:0;
}
#player #audioUI input::-ms-track{
	height:3px;
	background:transparent;
}
#player #audioUI input::-ms-fill-upper,
#player #audioUI input::-ms-fill-lower{
	background:#999;
	border-radius:3px;
}
#player #audioUI input::-ms-tooltip{
	display:none;
}
#player #audioUI input::-ms-thumb{
	margin-top:0;
}
#player #audioUI #volume{
	min-width:30px;
	max-width:75px;
	flex:1;
}
#tab_container{
	border:none;
}
#tab_container.playlist #playlist,
#tab_container.find #find,
#tab_container.hst #hst{
	display:block;
}
#tab_container.playlist #tabs .playlist,
#tab_container.find #tabs .find,
#tab_container.hst #tabs .hst{
	border-bottom-color:#383838;
	position:relative;
}
#tab_container.hst > span{
	display:none;
}
#tab_container > span{
	margin-left:auto;
}
#tab_container select{
	border-radius:5px;
	height:23px;
	font-size:15px;
	padding:0 18px 0 5px;
	background-image:url('icons/sound2.png'),linear-gradient(to bottom, #3D4850 3%, #313d45 4%, #232B30 100%); /* was /icons/down.png*/
	background-position:calc(100% - 5px) center,top left;
	background-repeat:no-repeat;
	background-size:13px,auto; 
	appearance:none;
	-moz-appearance:none;
	-webkit-appearance:none;
}
#tab_container #find select{
	margin-top:5px;
}
#tab_container select:focus,
#tab_container select:hover{
	background-image:url('icons/sound2.png'),linear-gradient(to bottom, #4C5A64 3%, #404F5A 4%, #2E3940 100%); /* was /icons/down.png*/
	color:#FFF;
}
#tab_container select:active{
	background-image:url('icons/sound2.png'),linear-gradient(to bottom, #20282D 3%, #252E34 51%, #222A30 100%); /* was /icons/down.png*/
}
#tabs{
	margin-bottom:-1px;
	margin-left:4px;
	text-align:left;
}
#tabs > div{
	display:inline-block;
	margin:0 0 0 3px;
	padding:5px 10px;
	border:1px solid white;
	border-radius:5px 5px 0 0;
	cursor:pointer;
}
#tab_content{
	width:100%;
}
#tab_content > div{
	border:1px solid white;
	display:none;
	min-height:160px;
	border-radius:5px;
	width:100%;
	box-sizing:border-box;
	text-align:left;
	overflow:auto;
}
#playlist{/* It just does not look right to me */
	padding-top:0!important;
	padding-bottom:0!important;
}
#playlist > ul{
	cursor:pointer;
	width:100%;
}
#playlist li{
	background-repeat:no-repeat;
	background-position:left 2px;
	padding-left:25px;
	line-height:25px;
}
#playlist ul{
	list-style:none;
	padding-left:0;
}
#playlist > ul ul{
	display:none;
}
#playlist li:hover > ul, /* This is the line that makes the folder open on mouse over */
#playlist li.open > ul{
	display:block;
}
#playlist .back{
	background-image:url(/icons/small/back.png), url(icons/folder.png);
	background-position:1px 7px,left 2px;
}
#playlist .folder,
#playlist .folder.open,
#playlist .song{
	background-position:left 2px;
}
#playlist .folder{
	background-image:url(icons/folder.png);
}
#playlist .folder.open{
	background-image:url(/icons/folder.open.png);
}
/*
#playlist .song,
#find #search li{
	background-image:url(/icons/sound2.png);
}
*/
li[played]:before{
	content:"\2714  ";
	color:aqua; /* http://i.imgur.com/2pLPx59.jpg */
	font-style:normal;
}
#playlist li{
	font-style:normal;
	color:white;
}
#playlist li.playing{
	font-style:italic;
	color:lime;
}
#find form > span{
	display:inline-block;
}
#find form > span:before{
	content:"(";
}
#find form > span:after{
	content:")";
}
#find input[type="text"]{
	height:25px;
	color:#FFF;
	border-radius:5px;
	width:175px;
}
#find #search li,
#hst li{
	cursor:pointer;
}
#find #search{
	padding:0 0 5px;
	margin:0;
	list-style:none;
}
#find #search li{
	padding-left:25px;
	background-repeat:no-repeat;
	background-position:left center;
}
#find #search span{
	text-decoration:underline;
}
#find input[type="submit"]{
	float:right;
}
#hst ol{
	margin:5px 0 0;
	padding-left:40px;
}
@media (max-width:1150px){
	body > div{
		width:75%;
	}
}
@media (max-width:850px){
	body > div{
		width:80%;
	}
}
@media (max-width:800px){
	body > div{
		width:85%;
	}
}
@media (max-width:750px){
	body > div{
		margin-top:5px;
	}
	body > div:not(#tab_container),
	#tab_content > div{
		padding:5px;
	}
}
@media (max-width:690px){
	body > div{
		 width:90%;
	}
	#player input[type="button"]{
		height:25px;
		font-size:16px;
	}
	#id3 .year{
		display:none;
	}
}
@media (max-width:630px){
	#player #id3{
		display:none;
	}
	#player input[type="button"]{
		height:32px;
		font-size:17px;
	}
}
@media (max-width:550px){
	#tabs,
	#tab_container > span{
		font-size:12px;
	}
}
@media (max-width:475px){
	#player input[type="button"]{
		height:25px;
		font-size:16px;
	}
	#tab_container > span > span:first-child{
		display:none;
	}
}
@media (max-width:450px){
	#find form > span{
		margin-left:45px;
	}
	#find form > span:before,
	#find form > span:after{
		content:"";
	}
}
@media (max-width:400px){
	#tab_container > span > span{
		display:none;
	}
}
@media (max-width:320px){
	body > div{
		margin:0;
	}
	#player{
		margin-bottom:2px;
	}
	body > br{
		display:none;
	}
}