﻿html { background-image: none; border: 0; }
body { margin: 0; padding: 10px; width: auto; overflow: hidden; min-width: 300px; background-image: none; border: 0; }

#infos { position: relative; color: white; padding: 10px; padding-left: 84px; height: 64px; overflow: hidden; -webkit-border-top-left-radius: 6px; -webkit-border-top-right-radius: 6px; -moz-border-radius-topleft: 6px; -moz-border-radius-topright: 6px; border-top-left-radius: 6px; border-top-right-radius: 6px; -webkit-user-select: none; }
#infos a { color: white !important; }
#infos h1 { color: white; font-size: 18px; line-height: 20px; margin: 0; padding: 0; padding-bottom: 5px; white-space: nowrap; -moz-user-select: text; -webkit-user-select: text; }
#infos .artwork { position: absolute; top: 10px; left: 10px; }

#profile-url a, #website-url a { display: block; float: left; clear: both; background: url(/img/icons-info.png) no-repeat 0 0; font-size: 11px; line-height: 13px; padding-bottom: 4px; padding-left: 21px; margin-bottom: 3px; white-space: nowrap; -moz-user-select: text; -webkit-user-select: text; }
#website-url a { background-position: 0 -50px; }
#profile-url a:hover { background-position: 0 -25px; }
#website-url a:hover { background-position: 0 -75px; }
#profile-url a:active { color: rgba(255,255,255,0.6) !important; background-position: 0 0px; }
#website-url a:active { color: rgba(255,255,255,0.8) !important; background-position: 0 -50px; }

#controls { position: relative; color: white; padding: 10px; height: 30px; overflow: hidden; -moz-user-select: none; -webkit-user-select: none; }
#controls a { color: white !important; }

#volume { position: absolute; top: 17px; left: 63px; width: 82px; height: 16px; overflow: hidden; background: url(/img/volume.png) no-repeat 0px 3px; cursor: default; }
#volume:hover { background-position: 0 -7px; }
#volume .fill { position: absolute; width: 50%; height: 10px; overflow: hidden; top: 3px; left: 0; background: url(/img/volume.png) no-repeat 0 -20px; }
#volume:hover .fill { background-position: 0 -30px; }
#volume .handler { position: absolute; width: 10px; height: 10px; overflow: hidden; top: 3px; left: 50%; background: url(/img/volume.png) no-repeat 0 -43px; margin-left: -5px; cursor: pointer; }

.control-button { position: absolute; display: block; height: 30px; background: url(/img/controls.png) no-repeat -10px -10px; text-indent: -3000px; }
.control-button.custom { background-position: -124px -10px; }
a.control-button.custom:hover { background-position: -124px -50px; }
a.control-button.custom:active { background-position: -124px -90px; }

#btn-playpause { left: 10px; top: 10px; width: 47px; }

#btn-playpause.pause { background-position: -10px -10px; }
#btn-playpause.pause:hover { background-position: -10px -50px; }
#btn-playpause.pause:active { background-position: -10px -90px; }

#btn-playpause.play { background-position: -67px -10px; }
#btn-playpause.play:hover { background-position: -67px -50px; }
#btn-playpause.play:active { background-position: -67px -90px; }

.btn-embed { right: 10px; top: 10px; width: 30px; }
.btn-embed { background-position: -324px -10px; }
.btn-embed:hover { background-position: -324px -50px; }
.btn-embed:active { background-position: -324px -90px; }

.btn-facebook { right: 46px; top: 10px; width: 30px; }
.btn-facebook { background-position: -284px -10px; }
.btn-facebook:hover { background-position: -284px -50px; }
.btn-facebook:active { background-position: -284px -90px; }

.btn-twitter { right: 82px; top: 10px; width: 30px; }
.btn-twitter { background-position: -244px -10px; }
.btn-twitter:hover { background-position: -244px -50px; }
.btn-twitter:active { background-position: -244px -90px; }


.btn-favorite-add-anon { right: 118px; top: 10px; width: 30px; }
.btn-favorite-add-anon { background-position: -164px -10px; }
.btn-favorite-add-anon:hover { background-position: -164px -50px; }
.btn-favorite-add-anon:active { background-position: -164px -90px; }

#btn-favorite-add { right: 118px; top: 10px; width: 30px; }
#btn-favorite-add { background-position: -164px -10px; }
#btn-favorite-add:hover { background-position: -164px -50px; }
#btn-favorite-add:active { background-position: -164px -90px; }


#btn-favorite-remove { right: 118px; top: 10px; width: 30px; display: none; }
#btn-favorite-remove { background-position: -204px -10px; }
#btn-favorite-remove:hover { background-position: -204px -50px; }
#btn-favorite-remove:active { background-position: -204px -90px; }
#btn-favorite-wait { right: 118px; top: 10px; width: 30px; display: none; }
#btn-favorite-wait span { text-indent: -3000px; display: block; width: 30px; height: 30px; background: url(/img/icons/wait_16.gif) no-repeat center center; }

#track { position: relative; border-top: 0; padding: 10px; padding-left: 97px; height: 72px; overflow: hidden; -webkit-border-bottom-right-radius: 6px; -webkit-border-bottom-left-radius: 6px; -moz-border-radius-bottomright: 6px; -moz-border-radius-bottomleft: 6px; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; background-color: white; }
#track.empty { padding-left: 10px; }
#track .cover { position: absolute; left: 10px; top: 10px; }
#track.empty .cover, #track.empty p, #track.empty .buy { display: none; }
#track h2 { color: #999; font-size: 9px; line-height: 13px; font-weight: normal; margin: 0; padding: 0; margin-bottom: 3px; white-space: nowrap; }
#track h2 a { color: #999 !important; }
#track p { font-size: 12px; line-height: 15px; white-space: nowrap; -moz-user-select: text; -webkit-user-select: text; }
#track p#artist-name { font-weight: bold; }
#track .buy { margin-top: 5px; }
#track .buy li { float: left; }
#track .buy li a { display: block; width: 50px; height: 20px; text-indent: -3000px; background: url(/img/tracklist-shops-buttons.png) no-repeat 0 0; margin-right: 3px; }
#track .buy li.amazon a { width: 62px; background-position: 0 0; }
#track .buy li.amazon a:hover { background-position: -100px 0; }
#track .buy li.itunes a { width: 56px; background-position: 0 -30px; }
#track .buy li.itunes a:hover { background-position: -100px -30px; }

#poweredby { text-align: center; }
#poweredby a { display: block; width: 170px; height: 28px; margin: 0 auto; text-indent: -3000px; background: url(/img/powered-by-radionomy.png) no-repeat center center; }
#ad { margin: 0; }

.CoverPicture { width: 70px; height: 70px; }

#fb-like { padding: 10px 10px 0; }
#fb-like > * { vertical-align: top; }
