* {
	margin: 0;
	padding: 0;
}
html, body {
/*	height: 250px;*/
	overflow: hidden;
}




@font-face {
  font-family: "DINBoldRegular";
  src: url("/fonts/DINWeb-Medium.eot");
}

@font-face {
  font-family: "DINBoldRegular";
  src: url("/fonts/DINWeb-Medium.woff") format("woff");
}

@font-face{font-family:"machine_bitsregular";src:url('/fonts/machinebits-regular-webfont.eot');src:url('/fonts/machinebits-regular-webfont.eot') format('embedded-opentype'),url('/fonts/machinebits-regular-webfont.woff') format('woff'),url('/fonts/machinebits-regular-webfont.ttf') format('truetype');font-weight:normal;font-style:normal;}[class^="icon-"],[class*=" icon-"]{font-family:"machine_bitsregular";font-weight:normal;font-style:normal;text-decoration:inherit;font-size:24px;-webkit-font-smoothing:antialiased;}[class^="icon-"]:hover,[class*=" icon-"]:hover{cursor:pointer;text-decoration:none;}
a [class^="icon-"],a [class*=" icon-"]{display:inline-block;text-decoration:inherit;}
.icon-twitter:before{content:"t";}
.icon-facebook:before{content:"f";}
.icon-tumblr:before{content:"b";}
.icon-lastfm:before{content:"!";}
.icon-sc:before{content:"@";}
.icon-play:before{content:"x";}
.icon-pause:before{content:"z";}
.icon-next:before{content:"k";}
.icon-previous:before{content:"j";}
.icon-favorite:before{content:"l";}
.icon-volume:before{content:"s";}
.icon-plus:before{content:"+";}
.icon-minus:before{content:"-";}
.icon-up:before{content:"u";}
.icon-right:before{content:"r";}
.icon-down:before{content:"d";}
.icon-left:before{content:"l";}
.icon-apple:before{content:"a";}
.icon-spotify:before{content:"S";}
.icon-android:before{content:"7";}
.icon-windows:before{content:"8";}

.icon-heart-bubble:before{content:"0";}
.icon-heart-bubble-only:before{content:"2";}

.icon-logo:before{content:"1";}
.icon-logo { font-size: 36px; line-height: 16px;}

.icons{ font-size:20px; line-height: 30px; padding-left: 3px; }





body {
	font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	margin: 0px;
	padding: 0px;
	width: 100%;
}
a img { border: none; }

a {text-decoration: none;}
a:hover {text-decoration:underline;}

.hype-player .artwork-wrap {
    position: relative;
    display: block;
}

.hype-player > a { text-decoration: none; }

#album-header-artist { font-weight: bold;}
#album-header-title {
	font-style:italic;
}






.hype-player {
	background-color: #EFEFEF;
	color: #333;
	font: 12px Helvetica, Arial, sans-serif;
/*	height: 250px;*/
	width: 100%;
	position: relative;
}
.hype-player .index { float: left; margin-right: 5px; 	}
.hype-player .title {
	color: #333;
	font-weight: bold;
	text-decoration: none;
	display: inline-block;
	width: 85%;
	line-height:125%;
}
.hype-player .artwork, .hype-player .artwork img {
	display: block;
    width: 100%;
}
.hype-player .right, .hype-player .left {
/*	height: 250px;*/
	left: 0px;
	top: 0px;
}
.hype-player .left {
	position: absolute;
	width: 250px;
	z-index: 2;
}
.hype-player .right {
	position: relative;
	margin-left: 250px;
	right: 0px;
	z-index: 1;
}
.top {
	position: relative;
	width: 100%;
	height:50px;
}

.bottom {
	height: 27px;
/*	bottom: 0px;*/
/*	right: 0px;*/
	width: 100%;
/*	position: absolute;*/
}
.bottom.unavailable #embed-button, .bottom.unavailable .social { display:none; }
#buy-button, #subscribe-button, #embed-button {
	font-weight: bold;
	text-transform: uppercase;
}
#embed-button {
	cursor: pointer;
}


#embed-select {
    border: 1px solid #CCC;
    width: 100px;
    padding-top: 3px;
    font-size: 12px;
    padding-right: 10px;
    float:right;
    margin-top:4px;
    margin-right:5px;
}

#embed-select:focus {
    outline: none;
}

.bottom-button { font-size: 14px; padding: 6px 11px 0 0; float:right; }


.hype-player .controls {
	height: 49px;
	left: 0px;
	width: 58px;
	position: absolute;
	top: 0px;
}


.hype-player .controls a {
	left: 6px;
	top: 6px;
	position: absolute;
	}



.hype-player .controls a.play {
	background-position: left top;
	display: block;
	padding: 7px 5px 0px 7px;
	line-height:30px;
	}

.hype-player .controls a.play:before{ content:"x"; } /* equivalent to icon-play */

.hype-player.playing .controls a.play {	padding: 7px 7px 0px 5px; }
.hype-player.playing .controls a.play:before{ content:"z"; } /* equivalent to icon-pause */

.hype-player .indicator {
	font-size: 8px;
	height: 16px;
	left: 224px;
	line-height: 16px;
	text-align: center;
	top: 35px;
	width: 70px;
	display: none;
	}
.hype-player .time-wrapper {
    height: 25px;
    overflow: hidden;
}
.hype-player .time {
	background-color: #959595;
	background-image: -moz-linear-gradient(center bottom, #959595 0%, #959595 100%, #afafaf 45%, #afafaf 55%);
	background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #959595), color-stop(1, #959595), color-stop(0.45, #afafaf), color-stop(0.55, #afafaf));
	border-left: 1px solid #CCC;
	border-right: 1px solid #CCC;
	width: 100%;
}
.hype-player .time, .hype-player .time div, .hype-player .time img {
	height: 50px;
	position: absolute;
	}
.hype-player .time .waveform {
	width: 100%;
	}
.hype-player .time .buffer, .hype-player .time .played {
	width: 0%;
	}
.hype-player .time .buffer {
	background-color: #535353;
	background-image: -moz-linear-gradient(center bottom, #535353 0%, #535353 100%, #6d6d6d 45%, #6d6d6d 55%);
	background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #535353), color-stop(1, #535353), color-stop(0.45, #6d6d6d), color-stop(0.55, #6d6d6d));
	}
.hype-player .time .played {
	background-color: #0063dc;
	background-image: -moz-linear-gradient(center bottom, #0063dc 0%, #0063dc 100%, #107cff 45%, #107cff 55%);
	background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #0063dc), color-stop(1, #0063dc), color-stop(0.45, #107cff), color-stop(0.55, #107cff));
	}

.hype-player .branding {
	right: 10px;
	top: 0px;
	position: absolute;
	}
.branding a {
	font-size: 28px;
	line-height: 42px;
}

.branding .exclusive-text {
	font-family: DINBoldRegular, Helvetica;
	font-size: 15px;
	padding-left: 10px;
	line-height: 13px;
	width: 135px;
	display: inline-block;
	float: left;
	padding-top: 15px;
}

.branding .exclusive-text:hover { 
	text-decoration: none;
}

.top.unavailable .premiere-name {
	left: 10px;	
}

.premiere-name {
	position: absolute;
	left: 55px;
	top: 8px;
	font-size: 15px;
}

.premiere-name a { text-decoration: none; color:inherit; }
.premiere-name a:hover { text-decoration:underline; }

.hype-player .tracks {
	height: 173px;
	left: 0px;
	list-style: none;
	overflow: auto;
	top: 50px;
	/*width: 100%;*/
	display: block;
}
.hype-player .tracks li {
	cursor: pointer;
	display: block;
	padding: 8px 8px 8px 8px;
	position: relative;
}
.hype-player .tracks li .duration {
/*	float:right; */
	right: 5px;
	position: absolute;
}
.hype-player .tracks li .current_pos {
	/*padding-right: 10px;
	float: right;*/
	position: absolute;
}


#unavailable {
	font-weight: bold;
	font-size: 14px;
	text-align: center;
	top: 38%;
	color: #777;
	display: none;
	position: relative;
	top: 50px;
}
#search-hypem {
	display: block;
	text-align: center;
	padding: 10px;
	margin: 10px 20px;
	text-decoration: none;
}
#search-hypem:hover {
	text-decoration: underline;
}





@media all and (min-height: 300px) {

	.hype-player { font-size: 14px; }
    /*.bottom { height: 34px;}*/

}

@media all and (min-width: 600px) {

	.hype-player { font-size: 14px; }

}

@media all and (max-width: 650px) {

	.branding .exclusive-text { display:none; }

}

@media all and (max-width: 560px) and (max-height: 251px) {
    .bottom-button { padding: 7px 10px 0 0; font-size: 13px;}
}

/* 
	Twitter, these embeds are all over the place: 509x294 and 560x326, and now 558x324 570x331
 	WTFFFFF
*/
/*@media all and (min-width: 508px) and (max-width:561), all and (min-height:293px) and (max-height:327px) {*/
@media all and (min-width: 475px) and (max-width: 508px) and (min-height:290px), 
		all and (min-width: 500px) and (max-width:561px) and (min-height:325px),
		all and (min-width: 500px) and (max-width:569px) and (min-height:323px),
		all and (min-width: 500px) and (max-width:572px) and (min-height:330px)
		 {

	.hype-player { font-size: 14px; }
	.branding .exclusive-text { display:block; }
	.hype-player .left { margin-top: 50px; }
	.hype-player .right { margin-left: 0px; }

}

@media all and (max-width: 475px) {

	.hype-player { font-size: 14px; }

    .hype-player .left { width: 50px; height:50px; }
    .hype-player .right { margin-left: 0px }
	.hype-player .controls { left: 50px; }

	.premiere-name { left:100px; }
	.top.unavailable .premiere-name { left: 60px; }

    .preorder { display: none; }

    .bottom-button { padding: 7px 10px 0 0;  }
	
}


@media all and (max-width: 475px) and (min-height: 400px) {

    .hype-player .left { width: 115px; height:115px; }
    .top { height: 115px; }
    .premiere-name, .top.unavailable .premiere-name { left: 125px; }

    .hype-player .controls { left: 118px; top: 50px; }
    .hype-player .controls a.play, 	.hype-player.playing .controls a.play { padding: 14px 75px 14px 75px; font-size: 19px; }

    .bottom { height: 40px;}
    .icons { font-size: 30px; line-height: 44px; }
    .bottom-button { padding: 13px 13px 0 0; }

}

@media all and (max-width: 310px) {

	.branding .exclusive-text { display:none; }

}

@media all and (max-width: 300px) {

	.branding { display:none; }
	.hype-player .tracks li { padding: 12px 8px 12px 8px; }

}

@media all and (max-width: 230px) {

	.hype-player { font-size: 12px; }
	.hype-player .controls { display:none; }
	.premiere-name {left: 65px;}

}

@media all and (max-width: 180px) {

    .hype-player .left { display:none; }
	.hype-player .controls { display:none; }

	.premiere-name {left: 10px;}
	.top.unavailable .premiere-name { left: 10px; }

	#embed-button { display:none; }
	.hype-player { font-size: 11px; }

}