/* Audio Player CSS */


/* Viewer controls */

#show-audio, #close-audio {
	display: none;
}

/* Soundcloud logo */
.sc-large {
	width: 192px;
	height: 24px;
	display: block;
	position: absolute;
	right: 0;
	top: 1em;
	opacity: 0.6;
	filter: alpha(opacity=60);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
	-o-transition: opacity 0.2s ease-in-out;
	-ms-transition: opacity 0.2s ease-in-out;
	-moz-transition: opacity 0.2s ease-in-out;
	-webkit-transition: opacity 0.2s ease-in-out;
	transition: opacity 0.2s ease-in-out;
}
.sc-large img {
	max-width: 100%;
	max-height: 100%;
}
.sc-large:hover {
	opacity: 0.7;
	filter: alpha(opacity=70);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
}
.sc-large:active {
	opacity: 0.75;
	filter: alpha(opacity=75);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
}

/* Hide small Soundcloud logo for minimized player / mobile */
.sc-small {
	display: none;
	position: absolute;
	right: 1em;
	top: 0.75em;
	width: 3.5em;
	height: auto;
	opacity: 0.35;
	filter: alpha(opacity=35);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=35)";
	-o-transition: opacity 0.2s ease-in-out;
	-ms-transition: opacity 0.2s ease-in-out;
	-moz-transition: opacity 0.2s ease-in-out;
	-webkit-transition: opacity 0.2s ease-in-out;
	transition: opacity 0.2s ease-in-out;
}
.sc-small img {
	max-width: 100%;
	max-height: 100%;
}
.sc-small:hover {
	opacity: 0.425;
	filter: alpha(opacity=42);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=42)";
}
.sc-small:active {
	opacity: 0.5;
	filter: alpha(opacity=50);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
}


/* Controls */
#controls {
	width: 90%;
	margin: 0 auto;
	margin-top: -1em;
	position: relative;
}

#audio-controls {
	list-style-type: none;
	text-align: center;
}
.audio-controls {
	position: absolute;
	top: -3.5em;
	left: -0.5em;
}
.transport-button {
	display: inline-block;
	cursor: pointer;
	color: rgba(255,255,255,0.25);
	width: 3.5em;
	height: 2.5em;
	text-align: center;
	-webkit-transition: color 0.1s ease-in;
	-moz-transition: color 0.1s ease-in;
	transition: color 0.1s ease-in;
}
.transport-button.selected {
	color: rgba(255,255,255,0.7);
}
.transport-button:active {
	color: rgba(255,255,255,0.9);
}
.transport-button:hover {
	color: rgba(255,255,255,0.45)
}
.transport-button.selected:hover {
	color: rgba(255,255,255,0.8);
}
.transport-button span {
	font-size: 2.75em;
	line-height: 1.25em;
}
#pause.hidden, #play.hidden, .pause.hidden, .play.hidden {
	display: none;
}


/* Playlist */
#playlist {
	display: block;
	font-weight: normal;
	margin-top: -1em;
}
#playlist.hidden {
	display: none;
}
#close-playlist {
	display: none;
	transition: opacity 0.3s ease-in-out;
	-webkit-transition: opacity 0.3s ease-in-out;
	-moz-transition: opacity 0.3s ease-in-out;
	-ms-transition: opacity 0.3s ease-in-out;
	-o-transition: opacity 0.3s ease-in-out;
}
#playlist-header {
	display: none;
	font-family: 'EvelethClean';
	font-size: 1.5em;
}
#playlist-header > * {
	margin: 0.35em;
}
#playlist.whileplaying {
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 5%;
	padding: 1.5em;
	background: url('../images/metalnoise.jpg');
	box-shadow: 0 0 3em black;
	z-index: 2000;
}
.selected #close-playlist {
	font-size: 2em;
	display: block;
	position: absolute;
	top: 0.35em;
	left: 0.35em;
	text-shadow: 0 0 0.75em black;
	cursor: pointer;
	opacity: 0.4;
	filter: alpha(opacity=40);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
	z-index: 10;
}
#playlist, #playlist ul {
	list-style-type: none;
}
.selected #close-playlist:hover {
	opacity: 0.75;
	filter: alpha(opacity=75);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
}
.selected #close-playlist:active {
	top: 0.4em;
	text-shadow: 0 0 0.25em black;
	opacity: 0.85;
	filter: alpha(opacity=85);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";
}

/* Settings toggle */
.option-toggle-wrap {
	margin-left: 0.5em;
}
.option-toggle {
	display: inline-block;
	padding: 0.25em;
	transition: all 0.3s ease-in-out;
	cursor: pointer;
	position: relative;
}
.on-light {
	display: block;
	position: absolute;
	font-size: 1.5em;
	left:	-0.65em;
	top: 0;
	color: rgba(255,0,0,0);
	text-shadow: none;
	transition: all 0.75s ease-in-out;
}
.option-toggle .on-state, .option-toggle.selected .off-state {
	display: none;
}
.option-toggle .off-state, .option-toggle.selected .on-state {
	display: none;
}
.option-toggle.selected .on-light {
	color: rgba(255,0,0,1);
	text-shadow: 0 0 0.5em red, 0 0 1em red;
}
.option-toggle h6 {
	font-family: 'EvelethThin';
	display: inline-block;
	vertical-align: middle;
	height: 0.75em;
	color: rgba(255,255,255,0.65);
	margin-left: 0.25em;
}
.option-toggle:hover .option-toggle h6 {
	color: rgba(255,255,255,0.7);
}
.option-toggle:active .option-toggle h6 {
	color: rgba(255,255,255,0.75);
}
.option-toggle-wrap p {
	font-size: 0.8em;
	line-height: 1.25em;
	margin-top: 0.5em;
	margin-left: 2.4em;
}
.rotary-button {
	position: relative;
	top: 0;
	display: inline-block;
	vertical-align: middle;
	width: 1.5em;
	height: 1.5em;
	border-radius: 0.75em;
	background: url('../images/knob200.png');
	background-size: cover;
	box-shadow: 0 0 0.75em black;
	transition: all 0.2s;
}
.option-toggle:active .rotary-button {
	top: 0.1em;
	box-shadow: 0 0 0.6em black;
}
.selected .rotary-button {
	top: 0.05em;
	box-shadow: 0 0 0.45em black;
}
.option-toggle.selected:active .rotary-button {
	top: 0.1em;
}

/* Track container */
li.track-wrap {
	position: relative;
	width: 100%;
	padding: 1em 0 0.2em;
	margin: 0.5em 0;
	background: rgba(255,255,255,0.1);
	cursor: pointer;
	transition: padding 0.3s ease-in-out;
	-webkit-transition: padding 0.3s ease-in-out;
	-moz-transition: padding 0.3s ease-in-out;
	-ms-transition: padding 0.3s ease-in-out;
	-o-transition: padding 0.3s ease-in-out;
	opacity: 0.4;
	filter: alpha(opacity=40);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
	/* background: rgba(0,0,0,0.15); */
}
div.track {
	position: relative;
	font-size: 1.2em;
	line-height: 1.2em;
	padding: 0;
	margin: 1em;
}
li.track-wrap .play-indicator, .sc-small, .sc-large {
	display: none;
}
.playing .sc-large {
	display: block;
}
li.track-wrap .title-preview {
	font-family: 'EvelethClean';
	font-size: 1.75em;
	margin: 0.5em;
	color: rgba(255, 255, 255, 0.85);
	text-shadow: 0 0 0.2em black;
}
li.track-wrap.playing .title-preview {
	margin: 0;
	margin-left: 3em;
	margin-right: 0.5em;
}
h5.artist {
	text-align: right;
	margin-bottom: 0.75em;
}
h6.album {
	float: left;
	width: 6em;
	height: 6em;
	padding: 0.3em;
	background: rgba(0,0,0,0.25);
}
li.track-wrap.playing {
	padding: 2em 0 2em;
	color: rgba(255,255,255,0.8);
	opacity: 1;
	filter: alpha(opacity=100);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	cursor: initial;
}
li.track-wrap:first-of-type.playing {
	margin-top: 1em;
}
li.track-wrap.playing .play-indicator {
	font-size: 1.2em;
	display: block;
	position: absolute;
	top: 1em;
	color: rgba(255,255,255,0.8);
}
li.track-wrap .wave-preview {
	display: none;
}
li.track-wrap.playing .wave-preview {
	display: block;
}
.more-track-info {
	display: none;
	font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
	font-weight: 600;
	transition: opacity 0.2s ease-in-out;
	-webkit-transition: opacity 0.2s ease-in-out;
	-moz-transition: opacity 0.2s ease-in-out;
	-ms-transition: opacity 0.2s ease-in-out;
	-o-transition: opacity 0.2s ease-in-out;
	-moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
}
.playing .more-track-info {
	display: inline-block;
	font-size: 1.2em;
	line-height: 1.2em;
	margin-left: 1em;
	padding: 0.15em;
	color: rgba(255,255,255,0.85);
	background: rgba(255,255,255,0.15);
	opacity: 0.6;
	filter: alpha(opacity=60);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
	position: relative;
	top: 1em;
}
.selected .playing .more-track-info {
}
.more-track-info:hover {
	opacity: 0.9;
	filter: alpha(opacity=90);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
}
.playing .more-track-info:active {
	top: 1.05em;
	opacity: 1;
	filter: alpha(opacity=100);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
.selected .playing .more-track-info:active {
}
.more-track-info .data-icon {
	float: left;
}
.more-track-info .utility-text {
	font-size: 0.9em;
	margin: -0.05em 0.2em;
	float: left;
}
.track-info {
	margin: 2em 1em -1em;
	padding-top: 1em;
	border-top: 1px solid rgba(255,255,255,0.2);
	max-width: 100%;
	font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}
.track-info.hidden {
	display: none;
}
.track-description {
	display: inline-block;
	padding: 0 1em;
	line-height: 1.3em;
	vertical-align: top;
}
.user-info {
	display: inline-block;
	background: rgba(255,255,255,0.1);
	padding: 0.2em;
}
.sc-user-link {
	display: inline;
	padding: 0.2em;
	margin: 0 0.5em;
	width: 100px;
	font-size: 15px;
}
.user-info-wrap, .track-description-wrap {
	display: table-cell;
}
.user-info:hover {
	background: rgba(255,255,255,0.15);
}
.user-info:active {
	background: rgba(255,255,255,0.2);
}
.sc-user-avatar {
	max-height: 3em;
	max-width: 3em;
	float: left;
}
.sc-user-name {
	float: left;
	margin: 1em 0.5em;
}
li.track-wrap .list-wave-slider,
li.track-wrap .list-wave-played-wrap,
li.track-wrap .list-wave-loaded-wrap,
li.track-wrap .sc-metrics,
li.track-wrap .audio-controls,
li.track-wrap .wave-timer, 
li.track-wrap .wave-total,
li.track-wrap canvas,
li.track-wrap .sc-user-link {
	display: none;
}
li.track-wrap.playing .list-wave-slider,
li.track-wrap.playing .list-wave-played-wrap,
li.track-wrap.playing .list-wave-loaded-wrap,
li.track-wrap.playing .sc-metrics,
li.track-wrap.playing .audio-controls,
li.track-wrap.playing .wave-timer,
li.track-wrap.playing .wave-total,
li.track-wrap.playing canvas {
	display: block;
}
li.track-wrap.playing .sc-user-link {
	display: inline;
}
li.track-wrap:hover {
	opacity: 0.45;
	filter: alpha(opacity=45);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=45)";
}
li.track-wrap.playing:hover {
	opacity: 1;
	filter: alpha(opacity=100);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
li.track-wrap:active {
	color: rgba(255,255,255,0.85);
	opacity: 1;
	filter: alpha(opacity=100);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
.wave-preview {
	width: 100%;
	height: 6em;
	padding: 0;
}
.sc-metrics {
	font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
	font-weight: 600;
	position: absolute;
	text-align: right;
	right: 0;
	bottom: -1.5em;
}
.sc-sep {
	margin: 0.75em;
}
/* Soundcloud data icons - fixed fontsize to blend with provided Soundcloud logo */
.sc-data-wrap, sc-repost-wrap {
	display: inline-block;
	line-height: 1em;
}
.sc-data-wrap.hidden, .sc-repost-wrap.hidden {
	display: none;
}
.sc-icon {
	font-size: 0.8em;
}
.sc-data {
	font-size: 1em;
	margin-left: 0.2em;
	font-weight: 600;
}

/* Wave Seek */
.list-wave-bg-canvas {
	z-index: 1;
	width: 100%;
}
.list-wave-bg-canvas, .list-wave-loaded-wrap, .list-wave-played-wrap, .list-wave-slider {
	position: absolute;
	width: 100%;
	height: 100%;
}
.list-wave-loaded-wrap, .list-wave-played-wrap {
	width: 0;
	overflow: hidden;
}
.list-wave-loaded-wrap {
	z-index: 2;
}
.list-wave-played-wrap {
	z-index: 3;
}
.list-wave-slider {
	z-index: 10;
	width: 0.2em;
	height: 100%;
	top: 0;
	background: rgba(124,0,0,1);
	box-shadow: 0 0 0.15em rgba(124,0,0,0.75);
}
.wave-total, .wave-timer {
	font-size: 1.25em;
	font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
	font-weight: 600;
	position: absolute;
	bottom: -1.2em;
	color: white;
	text-shadow: 0 0 0.15em black;
	z-index: 5;
	-moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.wave-total {
	left: 3.4em;
}
.wave-timer {
	left: 0;
}
.list-wave-duration {
	position: absolute;
	top: -1.5em;
	right: 0;
	font-size: 1.5em;
	font-weight: 600;
	color: rgba(255,255,255,0.3);
	text-align: right;
}


/* Volume slider */
.volume-control-wrap {
	display: none;
}
.playing .volume-control-wrap {
	display: block;
}
.volume-control-wrap {
	position: absolute;
	right: 0;
	bottom: -4.5em;
	font-size: 0.8em;
}

.volume-control {
	width: 12.5em;
	display: inline-block;
	vertical-align: top;
}
.volume-control h4 {
	font-family: 'EvelethThin';
	font-weight: 600;
	position: absolute;
	top: -1.5em;
	left: 0.2em;
}
.volume-slider {
	position: relative;
	display: inline-block;
	width: 10em;
	height: 1.25em;
}
.volume-icon {
	display: none;
}
.volume-icon.selected {
	display: inline-block;
	font-size: 1.5em;
	margin-left: 0.4em;
}
.volume-marker {
	position: absolute;
	left: 85%;
	top: -0.2em;
	z-index: 3;
	width: 1.5em;
	height: 1.5em;
	border-radius: 0.75em;
	box-shadow: 0 0 0.5em rgba(0,0,0,0.75);
}
.volume-marker img {
	max-width: 100%;
	max-height: 100%;
}
.volume-groove {
	z-index: 1;
	position: absolute;
	height: 0.75em;
	top: 0.2em;
	width: 100%;
	border-radius: 0.375em;
	box-shadow: 0 0 0.2em rgba(0,0,0,0.3);
	background: rgb(0,0,0);
	background: -moz-linear-gradient(top,  rgb(25,25,25) 0%, rgb(50,50,50) 75%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(25,25,25)), color-stop(75%,rgb(50,50,50)));
	background: -webkit-linear-gradient(top,  rgb(25,25,25) 0%, rgb(50,50,50) 75%);
	background: -o-linear-gradient(top,  rgb(25,25,25) 0%, rgb(50,50,50) 75%);
	background: -ms-linear-gradient(top,  rgb(25,25,25) 0%, rgb(50,50,50) 75%);
	background: linear-gradient(to bottom,  rgb(25,25,25) 0%, rgb(50,50,50) 75%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#252525', endColorstr='#505050',GradientType=0 );
}
.volume-groove-played {
	z-index: 3;
	position: absolute;
	height: 0.75em;
	top: 0.2em;
	width: 100%;
	border-radius: 0.375em;
	background: rgba(255,255,255,0.4);
	background: -moz-linear-gradient(top,  rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.5) 85%, rgba(255,255,255,0) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.2)), color-stop(85%,rgba(255,255,255,0.5)), color-stop(100%,rgba(255,255,255,0)));
	background: -webkit-linear-gradient(top,  rgba(255,255,255,0.2) 0%,rgba(255,255,255,0.5) 85%,rgba(255,255,255,0) 100%);
	background: -o-linear-gradient(top,  rgba(255,255,255,0.2) 0%,rgba(255,255,255,0.5) 85%,rgba(255,255,255,0) 100%);
	background: -ms-linear-gradient(top,  rgba(255,255,255,0.2) 0%,rgba(255,255,255,0.5) 85%,rgba(255,255,255,0) 100%);
	background: linear-gradient(to bottom,  rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.5) 85%, rgba(255,255,255,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5B5B5B', endColorstr='#6E6E6E',GradientType=0 );
}


/* View Controllers */


.audio-button {
	padding: 0.5em;
	color: rgba(255,255,255,0.75);
	background: rgba(255,255,255,0.1);
	font-size: 1.2em;
	transition: background 0.2s ease-in-out;
	-webkit-transition: background 0.2s ease-in-out;
	-moz-transition: background 0.2s ease-in-out;
	-ms-transition: background 0.2s ease-in-out;
	-o-transition: background 0.2s ease-in-out;
	cursor: pointer;
}
.audio-btn-label {
	padding-left: 0.2em;
}
.audio-btn-icon, .audio-btn-label {
}
.audio-button:hover {
	color: rgba(255,255,255,0.8);
	background: rgba(255,255,255,0.15);
}
.audio-button:active {
	color: rgba(255,255,255,0.85);
	background: rgba(255,255,255,0.2);
}



/* Minimized audio player overrides */

.with-audio #show-audio {
	font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
	display: block;
	position: fixed;
	width: 8em;
	height: 1em;
	top: 2em;
	right: -7em;
	font-size: 2em;
	padding: 0.5em;
	background: url('../images/metalnoise.jpg');
	box-shadow: 0 0 1em rgba(0,0,0,0.65);
	z-index: 100;
	transition: all 0.5s ease-in-out;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	opacity: 0.75;
	filter: alpha(opacity=75);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
}
.with-audio #show-audio.expanded {
	right: 0.5em;
	opacity: 1;
	filter: alpha(opacity=100);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	height: auto;
}
.with-audio #show-audio:hover {
	opacity: 0.85;
	filter: alpha(opacity=85);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";
}
.with-audio #show-audio.expanded:hover {
	opacity: 1;
	filter: alpha(opacity=100);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
#show-audio .icon-bullet {
	display: none;
}
#show-audio.whileplaying .icon-bullet {
	display: block;
	font-size: 0.5em;
	position: absolute;
	color: rgba(255,255,255,0.85);
	text-shadow: 0 0 0.5em rgb(255,255,255);
	left: 1.8em;
	bottom: 0.1em;
}
#show-audio.whileplaying.expanded .icon-bullet {
	display: none;
}
.with-audio #close-audio {
	display: block;
	position: absolute;
	font-size: 1.5em;
	top: 0.25em;
	left: 0.25em;
	z-index: 3000;
}
#close-audio:hover {
	color: rgba(255,255,255,0.8);
}
#close-audio:active {
	color: rgba(255,255,255,0.85);
	top: 0.3em;
}
#close-audio-small,
#show-audio-small {
	display: none;
}
.expanded #close-audio-small,
.expanded #show-audio-small  {
	display: block;
	position: absolute;
	font-size: 0.9em;
	top: 0.475em;
	cursor: pointer;
	opacity: 0.5;
	filter: alpha(opacity=50);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	padding: 0.2em;
	transition: opacity 0.3s ease-in-out;
	-webkit-transition: opacity 0.3s ease-in-out;
	-moz-transition: opacity 0.3s ease-in-out;
	-ms-transition: opacity 0.3s ease-in-out;
	-o-transition: opacity 0.3s ease-in-out;
	cursor: pointer;
}
.expanded #close-audio-small {
	right: 0.25em;
}
.expanded #show-audio-small {
	left: 0.25em;
}
#close-audio-small:hover,
#show-audio-small:hover {
	opacity: 0.75;
	filter: alpha(opacity=75);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
}
#close-audio-small:active,
#show-audio-small:active {
	opacity: 0.85;
	filter: alpha(opacity=85);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";
}
#widget-view {
	display: block;
	cursor: pointer;
}
.expanded #widget-view {
	display: none;
}
#audio-controls {
	display: none;
}
.expanded #audio-controls {
	display: block;
}
.expanded .transport-button {
	width: 1.5em;
	height: 1em;
}
#now-playing {
	font-size: 0.55em;
	opacity: 0;
	filter: alpha(opacity=0);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	font-weight: 600;
	text-align: center;
	margin-top: 0.5em;
}
.expanded #now-playing {
	opacity: 1;
	filter: alpha(opacity=100);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

#prev-track,
#next-track {
	display: none;
}
.expanded #prev-track,
.expanded #next-track {
	display: inline-block;
}

#audio-minimized {
	display: none;
}
#audio-minimized.selected {
	display: block;
	position: fixed;
	max-width: 45em;
	margin: 0 auto;
	right: 0;
	left: 0;
	top: 4em;
	z-index: 3000;
}

#audio-minimized #view-playlist {
	top: 0;
	left: -1.5em;
	font-size: 1.5em;
	background: url('../images/metalnoise.jpg');
}
#audio-minimized .audio-btn-label {
	display: none;
}


#playlist.minimized {
	padding: 1em;
	margin-top: 0;
	background: url('../images/metalnoise.jpg');
	box-shadow: 0 0 5em #000, 0 0 0.1em #000, 0 0 2.5em rgba(0,0,0,0.35) inset, 0 0 0.5em rgba(0,0,0,0.35) inset;
}
.minimized #playlist-header {
	display: block;
	position: absolute;
	left: 2em;
	top: 0.35em;
	padding: 0.25em;
}
.minimized #settings {
	position: absolute;
	width: 100%;
	top: 0.75em;
	right: 1em;
	text-align: right;
}
.minimized .option-toggle-wrap {
	margin: 0;
	font-size: 0.9em;
}

.minimized li.track-wrap {
	font-size: 0.8em;
	padding: 1em 0;
}
.minimized li.track-wrap.playing {
	display: block;
	font-size: 1em;
	padding: 2em 0;
}
.selected .minimized li.track-wrap:first-of-type {
	margin-top: 3.25em;
}
.minimized div.track {
	display: none;
}
.minimized .playing div.track {
	display: block;
}
.minimized li.track-wrap .wave-preview {
	height: 3em;
}
.minimized li.track-wrap .title-preview {
	font-size: 1.25em;
}
.minimized li.track-wrap.playing .title-preview {
	margin-left: 3.5em;
}
.minimized li.track-wrap .artist {
	font-size: 0.9em;
	margin: 0.65em;
}
.minimized li.track-wrap.playing .artist {
	margin-left: 5em;
	display: block;
}
.minimized .audio-controls {
	font-size: 1.5em;
	left: -0.25em;
	top: -2.25em;
}
.minimized .sc-small {
	display: none;
}
.minimized .sc-large {
	width: 160px;
}
.minimized .playing .sc-large {
	display: block;
	top: 0.6em;
}
.minimized .wave-total, .minimized .wave-timer {
	font-size: 1.2em;
}
.minimized .transport-button {
	width: 1.75em;
	height: 1.75em;
}
.minimized .transport-button span {
	font-size: 1.75em;
}

.minimized .volume-control-wrap {
	font-size: 0.75em;
	bottom: -4.85em;
}
.minimized #sc-metrics, .minimized li.track.wrap.playing .sc-metrics {
	display: none;
}
.minimized .playing .more-track-info {
	margin-left: 0.85em;
}
.minimized .track-info {
	margin: 2em 1em 0;
}





/* Media Queries */

@media screen and (min-width: 90em) {
	.wave-preview {
		height: 8em;
	}
	.audio-controls {
		/* top: 2em; */
	}
}
@media screen and (min-width: 100em) {
	.wave-preview {
		height: 9em;
	}
	.audio-controls {
		/* top: 2.5em; */
	}
}
@media screen and (min-width: 110em) {
	.wave-preview {
		height: 10em;
	}
	.audio-controls {
		/* top: 3em; */
	}
}

@media screen and (max-width: 65em) {

}


@media screen and (max-width: 59em) {
	li.track-wrap .title-preview {
		font-size: 1.5em;
	}
	li.track-wrap.playing .title-preview {
		margin-left: 4em;
	}
	
	#audio-minimized.selected {
		width: 85%;
		margin: 0 auto;
		right: 0;
		left: 0;
	}
	.minimized .transport-button {
		width: 2em;
		height: 2em;
	}
	#audio-minimized.selected .minimized .volume-control {
		font-size: 1.2em;
		margin-left: 3em;
	}
	#audio-minimized.selected .minimized #prev-track, #audio-minimized.selected .minimized #next-track {
		display: inline-block;
	}
	
}

/* Mobile breakpoint */

@media screen and (max-width: 45em) {
	li.track-wrap.playing {
		padding-top: 2em;
	}
	li.track-wrap .title-preview {
		font-size: 1.25em;
	}
	.with-audio #show-audio {
		top: 0.5em;
	}
	.audio-btn-label {
		display: none;
	}
	.volume-control {
		margin-left: 4em;
	}
	#audio-minimized {
		top: 0.5em;
		right: 1em;
		width: 25em;
	}
	#audio-minimized.selected {
		top: 1.5em;
	}
	#playlist {
		margin-top: 0;
	}
	.sc-large {
		width: 156px;
	}
	.playing .sc-large, .selected .playing .sc-small {
		display: none;
	}
	.playing .sc-small, .selected .playing .sc-large {
		display: block;
	}
	
	.minimized .sc-small {
		width: 2.5em;
	}
	.minimized .volume-control {
		margin-top: 0.5em;
	}
}


@media screen and (max-width: 43em) {
	#audio-minimized {
		font-size: 0.9em;
	}
	.minimized #prev-track {
		display: none;
	}
	.minimized #next-track {
		display: none;
	}
	.minimized .expanded #prev-track,
	.minimized .expanded #next-track {
		display: inline-block;
	}
	li.track-wrap.playing {
		padding-top: 1em;
	}
	.artist, .title-preview {
		display: block;
		margin: 0.35em 0.6em;
	}
	.playing .title-preview {
		margin-left: 4em;
	}
	li.track-wrap.playing .artist {
		margin-left: 5em;
	}
	.minimized li.track-wrap {
		padding: 0.5em 0;
	}
	
}


@media screen and (max-width: 36em) {
	.minimized .artist {
		display: none;
	}
	.minimized .playing .artist {
		display: block;
	}
}


@media screen and (max-width: 30em) {
	#playlist {
		margin-top: -1em;
	}
	.minimized .sc-large, .selected .sc-large {
		width: 128px;
	}
	div.track {
		font-size: 1em;
		margin-left: 1em;
	}
	.audio-controls {
		top: -4em;
		left: -0.5em;
	}
	li.track-wrap.playing .title-preview {
		display: block;
		margin: 0;
		margin-left: 3.5em;
		margin-right: 3.75em;
	}
	.minimized li.track-wrap.playing .title-preview {
		display: block;
	}
	li.track-wrap.playing .artist {
		margin-left: 4.35em;
	}
	.audio-button {
		display: block;
		margin-bottom: 1em;
	}
	.playing .more-track-info {
		margin-left: 0.75em;
	}
	.user-info-wrap, .track-description-wrap {
		display: block;
		margin: 0 1em 1em;
	}
	.track-description-wrap {
		margin-bottom: 0;
	}
	.track-description {
		padding: 0;
	}
	.with-audio #close-audio {
		display: block;
		position: absolute;
		font-size: 2em;
		top: 0.25em;
		left: 0.25em;
		cursor: pointer;
	}
	#close-audio:hover {
		color: rgba(255,255,255,0.8);
	}
	#close-audio:active {
		color: rgba(255,255,255,0.85);
		top: 0.2em;
	}
}




@media
screen and (-webkit-min-device-pixel-ratio: 1.25),
screen and (   min--moz-device-pixel-ratio: 1.25),
screen and (     -o-min-device-pixel-ratio: 5/4),
screen and (        min-device-pixel-ratio: 1.25),
screen and (                min-resolution: 120dpi),
screen and (                min-resolution: 1.25dppx) {
	#audio-player.minimized, ul#playlist, #click-play, #settings, #show-audio, #wave-timer, #view-playlist {
		background-size: 50%;
	}
	.sc-large, .minimized .sc-large, .minimized .playing .sc-large {
		width: 96px;
		height: 12px;
	}
}