html, body {
	overflow-y : visible
}

.loading-indicator .spinner {
	/*top: 50px;
	right: 50px;*/
}

.mobile-menu .help {
	position    : absolute;
	right       : 0px;
	top         : 0px;
	width       : 75px;
	text-align  : center;
	height      : 48px;
	line-height : 40px;
	color       : #FFFFFF;
}

.station-logo-wrap .help {
	display : none;
}

.mobile-menu .help:hover {
	background : #666666;
}

.controls-and-info {
	position   : fixed;
	right      : 0px;
	left       : 0px;
	top        : 0px;
	z-index    : 5;
	text-align : left;
	height     : 68px;
	padding    : 8px 8px 0px 8px;
}

.dark .controls-and-info {
	background-color : rgba(0, 0, 0, 0.9);
	border-bottom    : 1px solid rgba(255, 255, 255, 0.3)
}

.light .controls-and-info {
	background-color : rgba(255, 255, 255, 0.9);
	border-bottom    : 1px solid rgba(0, 0, 0, 0.3)
}

.buy-link-controls {
	display : none !important
}

.rating-label {
	display : none !important
}

.controls {
	float          : left;
	width          : 38px;
	padding-top    : 0px;
	margin-top     : 2px;
	margin-right   : 12px;
	padding-bottom : 0px
}

.controls .play-button {
	margin-top : 0px
}

.podcast-mode .controls .play-button {
	margin-top : 11px;
}

.mobile-menu .mobile-controls button.icon-volume-high,
.mobile-menu .mobile-controls button.icon-volume-medium,
.mobile-menu .mobile-controls button.icon-volume-low {
	display : none;
}

.left-bar .fb-like {
	display : none;
}

.controls .button-flower {
	display : none;
}

.back-to-live {
	padding     : 0px 5px;
	height      : 25px;
	line-height : 27px;
}

.play-button {
	height      : 38px;
	width       : 38px;
	font-size   : 18px;
	line-height : 40px
}

.podcast-mode .play-button {
	line-height : 40px
}

.podcast-mode .play-button:before {
	font-size : 18px
}

.album-art, .podcast-art {
	top           : 68px;
	height        : 90%;
	height        : 100vw;
	border-bottom : none !important;
}

.artwork-under-controls .album-art, .artwork-under-controls .podcast-art {
	top : 0px;
}

.album-art .alpha-fade-mobile, .podcast-art .alpha-fade-mobile {
	pointer-events : none;
	position       : absolute;

	display        : block;
	height         : 100px;
	left           : 0px;
	right          : 0px;
	bottom         : 0px;
	top            : auto;
}

.left-bar {
	background-color : transparent !important;
	border           : none !important;
	position         : static;
	width            : auto
}

.left-bar .station-logo {
	display : none
}

.song-info, .podcast-info {
	padding : 0px 110px 0px 40px;
}

.song-info .now-playing-track, .song-info .now-playing-line-2, .podcast-info .now-playing-track, .podcast-info .now-playing-line-2 {
	text-overflow : ellipsis;
	white-space   : nowrap;
	overflow      : hidden
}

.song-info .now-playing-track h2, .podcast-info .now-playing-track h2 {
	line-height : 24px
}

.song-info .now-playing-line-2, .podcast-info .now-playing-line-2 {
	line-height : 20px
}

.song-info .now-playing-line-2 h3, .podcast-info .now-playing-line-2 h3 {
	line-height : 20px
}

.song-info .now-playing-artist, .song-info .now-playing-album, .podcast-info .now-playing-artist, .podcast-info .now-playing-album {
	display : inline
}

.song-info .now-playing-artist h3, .song-info .now-playing-album h3, .podcast-info .now-playing-artist h3, .podcast-info .now-playing-album h3 {
	display : inline
}

.song-info .now-playing-artist:after, .podcast-info .now-playing-artist:after {
	content : "\2014"
}

.song-info .now-playing-track h2.current-track {
	white-space : nowrap;
	overflow    : hidden;
}

.song-info h2, .podcast-info h2 {
	font-size   : 18px;
	line-height : 20px
}

.song-info h3, .podcast-info h3 {
	font-size   : 14px;
	line-height : 20px
}

.banner-container {
	left           : 0px;
	padding-bottom : 0px;
	padding-top    : 0px;
	width          : auto;
	right          : 0px;
}

.banner {
	width  : 640px;
	height : 100px;
	margin : 0px auto
}

.ad-container {
	display : none;
}

.main-ad-container-mobile.show {
	display  : block;
	position : absolute;
	top      : 69px;
	left     : 0px;
}

.dark .main-ad-container-mobile.show {
	background : #000000;
}

.light .main-ad-container-mobile.show {
	background : #FFFFFF;
}

/*----------------------------------------------------
 MOBILE INIT OVERLAY (aka the mobile "Play Button")
 ----------------------------------------------------*/
.mobile-radio-init {
	display           : block;
	width             : 100%;
	height            : 90%;
	height            : 100vw;
	position          : absolute;
	top               : 69px;
	left              : 0px;
	background        : rgba(0, 0, 0, .9);
	z-index           : 101;
	visibility        : visible;
	opacity           : 1;
	pointer-events    : auto;
	-webkit-animation : fadein 0.5s;
	-moz-animation    : fadein 0.5s;
	-ms-animation     : fadein 0.5s;
	-o-animation      : fadein 0.5s;
	animation         : fadein 0.5s;
}

.mobile-radio-init:hover {
	background: rgba(255, 255, 255, .3);
}

.mobile-radio-init img {
	display : block;
	width   : 45%;
	width   : 45vw;
	cursor  : pointer;
	margin  : 25% auto 0 auto;
	margin  : 25vw auto 0 auto;
}

.mobile-radio-init .play,
.mobile-radio-init .loading {
	display           : block;
	-webkit-animation : fadein 1s;
	-moz-animation    : fadein 1s;
	-ms-animation     : fadein 1s;
	-o-animation      : fadein 1s;
	animation         : fadein 1s;
}

.mobile-radio-init .loading {
	display: none;
}
	.mobile-radio-init .loading p {
		color      : whitesmoke;
		width      : 100%;
		text-align : center;
		margin-top : 10px;
		clear      : both;
	}

.is-loading-audio .mobile-radio-init {}
	.is-loading-audio .mobile-radio-init .play {
		display: none;
	}
	.is-loading-audio .mobile-radio-init .loading {
		display: block;
	}

.is-playing .mobile-radio-init {
	-webkit-animation : fadeout-hidden 0.5s;
	-moz-animation    : fadeout-hidden 0.5s;
	-ms-animation     : fadeout-hidden 0.5s;
	-o-animation      : fadeout-hidden 0.5s;
	animation         : fadeout-hidden 0.5s;
	opacity           : 0;
	visibility        : hidden;
	pointer-events    : none;
}
	.is-playing .mobile-radio-init .play {
		display: none;
	}
	.is-playing .mobile-radio-init .loading {
		display: block;
	}


.mobile-menu-trigger {
	display : block
}

.mobile-menu {
	display : block;
	height  : 0px
}

.mobile-menu-active .mobile-menu {
	opacity        : 1;
	pointer-events : all;
	bottom         : 0px;
	height         : auto;
}

.left-bar .ratings {
	display : none;
}

body.artist-info-active {
	overflow : hidden;
	height   : 100%;
}

div.loading-overlay.is-loading {
	position       : fixed;

	left           : 50%;
	left           : 50vw;
	top            : 68px;
	bottom         : 0px;
	right          : 0px;
	width          : auto !important;
	z-index        : 1;
	pointer-events : none;
	display        : block;
	height         : calc(100% - 75px);
	height         : calc(100vw - 75px);
}

.artist-detail-container {
	top : 68px;
}

.artist-info-active .artist-detail-container.is-active {
	position : fixed;
	left     : 15%;
	left     : 15vw;
	width    : auto;
	right    : 0px;
	top      : 68px;
	bottom   : 0px;
	z-index  : 100;
	display  : block;
}

.artist-detail-container.is-active {
	opacity        : 1;
	pointer-events : all
}

.artist-detail-container.is-away {
	opacity        : 0;
	pointer-events : none
}

.artist-detail-container .artist-detail {
	overflow-y                 : scroll;
	-webkit-overflow-scrolling : touch
}

.artist-detail-container .artist-detail-image {
	position : static;
	padding  : 0px;
	width    : auto
}

.dark .artist-detail-container .artist-detail-image {
	background-color : #000000
}

.light .artist-detail-container .artist-detail-image {
	background-color : #FFFFFF
}

.artist-detail-container .artist-detail-image img {
	margin     : 0px auto;
	display    : block;
	width      : auto;
	max-width  : 100%;
	max-height : 300px
}

.artist-detail-container .artist-detail-description {
	position : static;
	width    : auto;
	overflow : auto;
	height   : auto;
	padding  : 12px 24px
}

.dark .artist-detail-container h2 {
	background-color : rgba(0, 0, 0, 0.3)
}

.light .artist-detail-container h2 {
	background-color : rgba(255, 255, 255, 0.3)
}

.dialog-container .dialog {
	width    : 60%;
	width    : 60vw;
	padding  : 12px;
	margin   : 0px auto;
	top      : 10%;
	top      : 20vw;
	left     : 20%;
	left     : 20vw;
	position : fixed;
	right    : auto;
}

.dialog-container h2 {
	font-weight : 200;
	font-size   : 22px;
	line-height : 26px
}

.dialog-container p {
	font-weight : 400;
	font-size   : 14px;
	line-height : 18px
}

#track {
	position : absolute;
	width    : 100%;
	left     : 0px !important;
	top      : 0px;
	right    : 0px;
	z-index  : 2;
}

#track .hero-table {
	padding-left : 0px !important;
	right        : 0px;
	left         : 0px;
}

#track .hero-table .row .back-to-live-nav {
	width      : 44px;
	margin-top : 0px;
	cursor     : pointer;
	display    : block;
	position   : absolute;
	right      : 0px;
	top        : 0px;
	padding    : 12px 10px;
}

.dark #track .hero-table .row .back-to-live-nav:hover {
	background : rgba(255, 255, 255, .1);
}

.light #track .hero-table .row .back-to-live-nav:hover {
	background : rgba(0, 0, 0, .1);
}

#track .hero-table .row .back-to-live-nav img {
	width      : 100%;
	max-height : 100%;
}

.banner-ad-active #track {
	/*padding-bottom: 100px;*/
}

.mobile-menu-active #track {
	-webkit-filter : blur(5px);
	-moz-filter    : blur(5px);
	filter         : blur(5px)
}

.artist-info-active #track {
	-webkit-filter : blur(5px);
	-moz-filter    : blur(5px);
	filter         : blur(5px);
}

#track {
	padding-top : 0px !important
}

.cell {
	margin-right  : 0px;
	height        : auto;
	margin-bottom : 64px;
	display       : block;
	min-width     : 0 !important
}

.cell:after {

	position : absolute;
	bottom   : -64px;
	height   : 64px;
	left     : 0px;
	right    : 0px;
	content  : ""
}

.dark .cell:after {
	background : -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0.75)), color-stop(100%, rgba(0, 0, 0, 0.6)));
	background : -webkit-linear-gradient(top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.6));
	background : -moz-linear-gradient(top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.6));
	background : -o-linear-gradient(top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.6));
	background : linear-gradient(top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.6))
}

.light .cell:after {
	background : -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255, 255, 255, 0.85)), color-stop(100%, rgba(255, 255, 255, 0.6)));
	background : -webkit-linear-gradient(top, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.6));
	background : -moz-linear-gradient(top, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.6));
	background : -o-linear-gradient(top, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.6));
	background : linear-gradient(top, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.6))
}

.dark .cell h2 {
	background-color : rgba(0, 0, 0, 0.3)
}

.light .cell h2 {
	background-color : rgba(255, 255, 255, 0.3);
}

.cell .cell-inner {
	position   : static;
	overflow-y : auto
}

.podcast-mode .mobile-podcast-controls {
	display       : block;
	border-bottom : none !important;
	top           : 0px;
	left          : 85px;
	z-index       : 5;
	right         : 25px;
	padding-left  : 0px;
}

.podcast-mode .mobile-podcast-controls .seek-bar {
	margin-left  : 0px;
	padding-left : 38px;
}

.standard-background {
	background-position : top !important;
	right               : 0px;
	width               : 100% !important;
	left                : 0px;
	bottom              : auto;
	top                 : 68px;
	height              : 90%;
	height              : 100vw;
}

/* TODO:  Add in the smaller banner size. */
.banner-container {
	display : none;
	z-index : 6;
}

.album-art, .podcast-art {
	background-position : top !important;
	right               : 0px;
	width               : 100% !important;
	left                : 0px;
	bottom              : auto;
	z-index             : 4;
}

.mobile-menu-active .album-art, .mobile-menu-active .podcast-art {
	-webkit-filter : blur(20px);
	-moz-filter    : blur(20px);
	filter         : blur(20px)
}

.album-art .alpha-fade-desktop, .podcast-art .alpha-fade-desktop {
	display : none
}

.navigation {
	margin-top : 24px
}

.left-bar .navigation {
	display : none
}

.left-bar .logo {
	width    : 55px;
	position : absolute;

	top      : 10px;
	right    : 50px;
	display  : block;
}

.left-bar .logo img {
	width      : 100%;
	max-height : 100%;
}

.ui-mobile-viewport .hero-table {
	padding : 51pt 0pt 0px 0pt;
	margin  : 90% 0pt 0pt 0pt;
	margin  : 100vw 0pt 0pt 0pt;
	top     : 51pt;
}

.hero-table > .row {
	height  : auto;
	right   : 0px;
	left    : 0px;
	display : block
}

.light .cell {
	border : none
}

.dark .cell {
	border : none
}

.cell .cell-inner iframe {
	min-height : 250px;
	width      : 100%
}

.height-sizer {
	height   : auto !important;
	position : static
}

.about-the-artist-albums h3 {
	padding-left  : 6px;
	padding-right : 6px
}

.cell .section-header {
	padding     : 12px;
	font-size   : 18px;
	line-height : 24px;
	position    : relative;
}

.cell section[data-type = 'stations'] > .header-content {
	width  : 98%;
	margin : 5px auto;
}

.cell section[data-type = 'stations'] > .header-content .row {
	float     : left;
	width     : 33%;
	font-size : 14px;
}

.cell section[data-type = 'stations'] > .header-content .row .value {
	float         : right;
	width         : 100%;
	height        : 20px;
	border-radius : 6px;
	border-width  : 1px;
}

.cell section[data-type = 'stations'] > .header-content .row input.value {
	padding : 0px 3px;
}

.dark .cell section[data-type = 'stations'] > .header-content .row .value {
	background   : #000000;
	color        : #FFFFFF;
	border-color : rgba(255, 255, 255, 0.3);
}

.light .cell section[data-type = 'stations'] > .header-content .row .value {
	background         : #FFFFFF;
	color              : #000000;
	border-color       : rgba(0, 0, 0, 0.3);
	-moz-appearance    : none;
	-webkit-appearance : none;
	appearance         : none;
}

.dark .cell section[data-type = 'stations'] .section-header {
	border-bottom : 1px solid rgba(255, 255, 255, 0.3)
}

.light .cell section[data-type = 'stations'] .section-header {
	border-bottom : 1px solid rgba(0, 0, 0, 0.3)
}

/* CSS3 Animations */
@keyframes fadein {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@-moz-keyframes fadein {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@-webkit-keyframes fadein {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@-ms-keyframes fadein {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@-o-keyframes fadein {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes fadeout-hidden {
	from { opacity: 1; visibility: visible; }
	to   { opacity: 0; visibility: hidden; }
}
@-moz-keyframes fadeout-hidden {
	from { opacity: 1; visibility: visible; }
	to   { opacity: 0; visibility: hidden; }
}
@-webkit-keyframes fadeout-hidden {
	from { opacity: 1; visibility: visible; }
	to   { opacity: 0; visibility: hidden; }
}
@-ms-keyframes fadeout-hidden {
	from { opacity: 1; visibility: visible; }
	to   { opacity: 0; visibility: hidden; }
}
@-o-keyframes fadeout-hidden {
	from { opacity: 1; visibility: visible; }
	to   { opacity: 0; visibility: hidden; }
}