/****
THE PLAYER
CSS GUI icons by Nicolas Gallagher
****/
.player	{position:relative; width:240px; margin:10px auto; line-height:1;}
	.player *	{position:relative; z-index:1; margin:0 auto;}
	.player .albuminfo, .player .transport, .player .time	{}
	.player ul, .player ol	{list-style:none; padding:0; margin:0 auto;}
	.player .albuminfo	{border-radius:5px;}
		.player .albuminfo .albumart	{min-width:240px; min-height:240px; height:100%; background:#6ca center top no-repeat; border-radius:5px; background-size:cover;}
		.player .albuminfo .albumtitle	{text-align:center; line-height:1; font-size:100%; font-weight:normal; margin:0 auto 0; padding:0.5em 0; background:rgba(0,0,0,0.25); color:#fff; border-radius:5px 5px 0 0;}
		.player .albuminfo .songtitle	{text-align:center; line-height:1; font-size:150%; font-weight:bold; margin:0 auto; padding:0.5em 0; background:rgba(0,0,0,0.25); color:#fff;}
	.player .playlist	{position:relative;}
		.player .playlist li	{display:block; text-align:center;}
		.player .playlist li+.empty	{display:none;}
		.player .playlist .more	{display:none;}
		.player .playlist .hidden	{display:none;}
		.player .playlist .more.hidden	{display:block;}
		.player .playlist a	{display:block; text-decoration:none;}
		.player .playlist .artistlist	{display:none;}
		.player .playlist .albumlist	{width:100%; background:#eee; padding:10px 0; border-radius:10px;}
			.player .playlist .albumlist:before	{content:attr(title); position:relative; display:block; font-size:120%; font-weight:bold; padding:0 4px 4px; margin:0 0 4px; border-bottom:1px solid rgba(0,0,0,0.15);}
			.player .playlist .albumlist a	{padding:4px 10px; color:#555;}
			.player .playlist .albumlist a:hover	{background:rgba(0,0,0,0.15); color:#fff;}
			.player .playlist .albumlist .selected	{background:rgba(0,0,128,0.1);}
		.player .playlist .tracklist	{width:100%; background:#eee; padding:10px 0; margin:10px auto; border-radius:10px;}
			.player .playlist .tracklist:before	{content:attr(title); position:relative; display:block; font-size:115%; font-weight:bold; padding:0 4px 4px; margin:0 0 4px; border-bottom:1px solid rgba(0,0,0,0.15);}
			.player .playlist .tracklist a	{padding:4px 10px; color:#555;}
			.player .playlist .tracklist a:hover	{background:rgba(0,0,0,0.15); color:#fff;}
			.player .playlist .tracklist .selected	{background:rgba(0,0,128,0.1);}
	.player .transport	{}
		.player .transport .transport-controls	{background:#ccc; padding:8px 0; margin:0 4px; text-align:center; border-radius:0 0 10px 10px; /*box-shadow:inset 0 -2px 4px rgba(0,0,0,0.15);*/}
		.player .transport li	{display:inline-block; line-height:28px; width:28px; height:28px; border-radius:100%; background:#eee; box-shadow:0 0 4px rgba(0,0,0,0.25);}
			.player .transport li:hover	{background:#fff;}
		.player .transport a	{display:block; text-indent:-999em;}
		.player .transport .transport-bar	{border-radius:2px; height:4px; background:#aaa; box-shadow:inset 0 0 1px #000; position:absolute; top:-4px; left:0; right:0;}
		/*.player .transport .transport-bar:after	{display:block; border-radius:2px; height:4px; background:#66c; position:absolute; top:0; left:0; right:40px; content:attr(data-elapsed); content: ' '; overflow: hidden;}*/
		.player .transport .transport-bar .transport-position	{display:block; border-radius:2px; height:4px; background:#66c; position:absolute; top:0; left:0; /*right:40px; content:attr(data-elapsed);*/ content: ' '; overflow: hidden;}

.player .transport li:before,
.player .transport li:after,
.player .transport li a:before,
.player .transport li a:after {
	content:""; position:absolute;
	top:50%; left:0;
}

.player .transport li a:before, .player .transport li a:after	{margin:-8px 0 0; background:#777;}

.player .transport li a:hover:before,
.player .transport li a:focus:before,
.player .transport li a:active:before	{background:#080073;}

.player .transport .prev a:before {
	width:2px; height:10px;
	left:8px; margin-top:-4px;
}
.player .transport .prev a:after {
	border:5px solid transparent; border-width:5px 7px; border-right-color:#777;
	left:3px; margin-top:-4px;
	background:transparent;
}
.player .transport .prev a:hover:after,
.player .transport .prev a:focus:after,
.player .transport .prev a:active:after {
    border-right-color:#080073;
}

.player .transport .next a:before {
	width:2px; height:10px;
	left:16px; margin-top:-4px;
}
.player .transport .next a:after {
	border:5px solid transparent; border-width:5px 7px; border-left-color:#777;
	left:9px; margin-top:-4px;
	background:transparent;
}
.player .transport .next a:hover:after,
.player .transport .next a:focus:after,
.player .transport .next a:active:after	{border-left-color:#080073;}

.player .transport .play a:before {
	border:8px solid transparent; border-width:8px 12px; border-left-color:#777;
	left:9px; margin-top:-8px;
	background:transparent;
}
.player .transport .play a:hover:before,
.player .transport .play a:focus:before,
.player .transport .play a:active:before	{border-left-color:#080073; background:transparent;}

.player .transport .pause a:before {
	width:4px; height:14px;
	border:4px solid #777; border-width:0 4px;
	left:8px; margin-top:-7px;
	background:transparent;
}
.player .transport .pause a:hover:before,
.player .transport .pause a:focus:before,
.player .transport .pause a:active:before	{border-color:#080073; background:transparent;}

@media screen and (min-width:320px) {
	.player	{width:320px;}
	.player .albuminfo	{min-height:320px;}
		.player .albuminfo .albumart	{min-height:320px;}
		.player .transport .transport-controls	{background:#ccc;}
}
@media screen and (min-width:400px) {
	.player	{width:400px;}
	.player .albuminfo	{min-height:400px;}
		.player .albuminfo .albumart	{min-height:400px;}
		.player .albuminfo .albumtitle	{}
		.player .albuminfo .songtitle	{}
}
@media screen and (min-width:640px) {
	.player	{margin-left:240px;}
		.player .albuminfo .albumart	{/*position:absolute; top:0; left:0; right:0; bottom:0; min-height:none;*/}
		.player .albuminfo .albumtitle	{/*margin-top:0;*/}
		.player .albuminfo .songtitle	{}
	.player .playlist	{position:absolute; top:4px; left:0; right:0; bottom:4px;}
		.player .playlist li	{text-align:left;}
		.player .playlist .hidden	{display:block;}
		.player .playlist .more.hidden	{display:none;}
		.player .playlist .albumlist	{
			position:absolute; right:100%;
			width:240px; max-height:240px; overflow-y:auto;
			background:#eee; padding:10px 0;
			border-radius:10px 0 0 10px; box-shadow:inset 2px 0 1px 1px rgba(0,0,0,0.25);
			font-size:80%;
		}
			.player .playlist .albumlist:before	{padding:0 4px 4px 0; margin:0 0 4px 4px;}
		.player .playlist .tracklist	{
			position:absolute; right:100%; top:240px;
			width:240px; max-height:240px; overflow-y:auto; margin:0 auto;
			border-radius:10px 0 0 10px; box-shadow:inset 2px 0 1px 1px rgba(0,0,0,0.25);
			font-size:80%;
		}
			.player .playlist .tracklist:before	{padding:0 4px 4px 0; margin:0 0 4px 4px;}
}
@media screen and (min-width:880px) {
	.player	{margin-left:auto;}
		.player .albuminfo .albumtitle	{}
		.player .albuminfo .songtitle	{}
		.player .playlist .tracklist	{right:auto; left:100%; top:0; border-radius:0 10px 10px 0; box-shadow:inset -2px 0 1px 1px rgba(0,0,0,0.25);}
			.player .playlist .tracklist:before	{padding:0 0 4px 4px; margin:0 4px 4px 0;}
}