diff --git a/css/main.css b/css/main.css
new file mode 100755
index 00000000..0ff5aede
--- /dev/null
+++ b/css/main.css
@@ -0,0 +1,793 @@
+/* Styles */
+#main-window {
+ position: absolute;
+ /* background-image: MAIN.BMP via Javascript */
+ height: 116px;
+ width: 275px;
+ margin-top: -58px;
+ margin-left: -137px;
+ top: 40%;
+ left: 50%;
+ cursor:url('../cursors/MAINMENU.PNG?inline'), auto;
+ /* Ask the browser to scale showing large pixels if possible */
+ image-rendering: -moz-crisp-edges; /* Firefox */
+ image-rendering: -o-crisp-edges; /* Opera */
+ image-rendering: -webkit-optimize-contrast; /* Safari */
+ image-rendering: pixelated; /* Only in Chrome > 40 */
+ -ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
+}
+
+#main-window.doubled {
+ -moz-transform: scale(2);
+ -moz-transform-origin: top left;
+ -webkit-transform: scale(2);
+ -webkit-transform-origin: top left;
+}
+
+#main-window.doubled #context-menu {
+ -moz-transform: scale(.5);
+ -moz-transform-origin: top left;
+ -webkit-transform: scale(.5);
+ -webkit-transform-origin: top left;
+}
+
+#main-window.loading {
+ background-image: none;
+ background-color: #FFFFFF;
+ border: 2px solid #dddddd;
+}
+/* Hide everything whil we are loading */
+#main-window.loading * {
+ display: none;
+}
+
+#loading {
+ display: none;
+ text-align: center;
+ font-size: 20px;
+ height: 30px;
+ position: absolute;
+ margin: auto;
+ top: 0; left: 0; bottom: 0; right: 0;
+}
+
+/* Only show loading div while we are loading */
+#main-window.loading #loading {
+ display: block;
+}
+
+#main-window.closed { display: none; }
+
+#title-bar {
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 14px;
+ width: 275px;
+ /* background-image: TITLEBAR.BMP via Javascript */
+ background-position: -27px -14px;
+ cursor:url('../cursors/TITLEBAR.PNG?inline'), auto;
+}
+
+#title-bar.selected {
+ background-position: -27px 0px;
+}
+
+.llama #title-bar {
+ background-position: -27px -61px;
+}
+
+.llama #title-bar.selected {
+ background-position: -27px -57px;
+}
+
+#option,
+#minimize,
+#shade,
+#close {
+ position: absolute;
+ height: 9px;
+ width: 9px;
+ top: 3px;
+ cursor:url('../cursors/MAINMENU.PNG?inline'), auto;
+}
+
+#title-bar #option {
+ left: 6px;
+ /* background-image: TITLEBAR.BMP via Javascript */
+}
+#title-bar #option #context-menu {
+ display: none;
+ top: 12px;
+ left: 0px;
+}
+#title-bar #option:active,
+#title-bar #option.selected
+{
+ background-position: 0 -9px;
+}
+#title-bar #option:active #context-menu,
+#title-bar #option.selected #context-menu
+{
+ display: block;
+}
+
+#title-bar #minimize {
+ left: 244px;
+ /* background-image: TITLEBAR.BMP via Javascript */
+ background-position: -9px 0;
+}
+#title-bar #minimize:active {
+ background-position: -9px -9px;
+}
+
+#title-bar #shade {
+ left: 254px;
+ /* background-image: TITLEBAR.BMP via Javascript */
+ background-position: 0px -18px;
+}
+#title-bar #shade:active {
+ background-position: -9px -18px;
+}
+
+#title-bar #close {
+ left: 264px;
+ /* background-image: TITLEBAR.BMP via Javascript */
+ background-position: -18px 0px;
+ cursor:url('../cursors/CLOSE.PNG?inline'), auto;
+}
+#title-bar #close:active {
+ background-position: -18px -9px;
+}
+
+.status #clutter-bar {
+ position: absolute;
+ top: 22px;
+ left: 10px;
+ height: 43px;
+ width: 8px;
+ /* background-image: TITLEBAR.BMP via Javascript */
+ background-position: -304px 0;
+}
+
+.status #clutter-bar.disabled {
+ background-position: -312px 0;
+}
+
+#clutter-bar div {
+ position: absolute;
+ height: 7px;
+ width: 8px;
+ left: 0px;
+}
+
+#clutter-bar #button-o {
+ top: 3px;
+ height: 8px;
+}
+#clutter-bar #button-o:active {
+ background-position: -304px -47px;
+}
+#clutter-bar #button-a {
+ top: 11px;
+}
+#clutter-bar #button-a:active,
+#clutter-bar #button-a.selected {
+ background-position: -312px -55px;
+}
+#clutter-bar #button-i {
+ top: 18px;
+}
+#clutter-bar #button-i:active {
+ background-position: -320px -62px;
+}
+#clutter-bar #button-d {
+ top: 25px;
+ height: 8px;
+}
+#clutter-bar #button-d:active,
+#clutter-bar #button-d.selected {
+ background-position: -328px -69px;
+}
+#clutter-bar #button-v {
+ top: 33px;
+}
+#clutter-bar #button-v:active {
+ background-position: -336px -77px;
+}
+
+.status #play-pause {
+ position: absolute;
+ top: 28px;
+ left: 26px;
+ height: 9px;
+ width: 9px;
+ /* background-image: PLAYPAUS.BMP via Javascript */
+ background-repeat: no-repeat;
+}
+
+.play .status #work-indicator {
+ position: absolute;
+ top: 28px;
+ left: 24px;
+ height: 9px;
+ width: 3px;
+ /* background-image: PLAYPAUS.BMP via Javascript */
+ background-position: -36px 0;
+}
+.play .status #work-indicator.selected {
+ background-position: -39px 0;
+}
+
+.play .status #play-pause { }
+.pause .status #play-pause { background-position: -9px 0; }
+.stop .status #play-pause { background-position: -18px 0; }
+.status #time {
+ position: absolute;
+ left: 39px;
+ top: 26px;
+ /* Just to make it clickable */
+ height: 13px;
+ width: 59px;
+}
+
+.stop .status #time { display:none; }
+.pause .status #time {
+ animation: blink 2s step-start 1s infinite;
+ -webkit-animation: blink 2s step-start 1s infinite;
+}
+
+.status #time #minus-sign {
+ position: absolute;
+ top: 6px;
+ left: -1px;
+ width: 5px;
+ height: 1px;
+ /* background-image: NUMBERS.BMP via Javascript */
+ background-position: -9px -6px;
+}
+.status #time.countdown #minus-sign {
+ background-position: -20px -6px;
+}
+/* Alternate format for minus sign, when skin supports it */
+.status #time.ex #minus-sign {
+ top: 0px;
+ left: -1px;
+ width: 9px;
+ height: 13px;
+ /* background-image: NUMS_EX.BMP via Javascript */
+ background-position: -90px 0px;
+}
+.status #time.ex.countdown #minus-sign {
+ background-position: -99px 0px;
+}
+
+.status #time #minute-first-digit {
+ position: absolute;
+ pointer-events: none;
+ left: 9px;
+ height: 13px;
+ width: 9px;
+}
+.status #time #minute-second-digit {
+ position: absolute;
+ pointer-events: none;
+ left: 21px;
+ height: 13px;
+ width: 9px;
+}
+.status #time #second-first-digit {
+ position: absolute;
+ pointer-events: none;
+ left: 39px;
+ height: 13px;
+ width: 9px;
+}
+.status #time #second-second-digit {
+ position: absolute;
+ pointer-events: none;
+ left: 51px;
+ height: 13px;
+ width: 9px;
+}
+
+#visualizer {
+ position: absolute;
+ width: 76px;
+ height: 16px;
+ top: 43px;
+ left: 24px;
+}
+
+.stop #visualizer {
+ display: none;
+}
+
+
+.text {
+ position: absolute;
+ left: 112px;
+ top: 27px;
+ width: 152px;
+ height: 6px;
+ overflow: hidden;
+ display: none;
+}
+
+#song-title {
+ display: block;
+}
+
+.media-info #kbps {
+ position: absolute;
+ left: 111px;
+ top: 43px;
+ width: 15px;
+ height: 6px;
+ overflow: hidden;
+}
+
+.stop .media-info #kbps { display: none; }
+
+.media-info #khz {
+ position: absolute;
+ left: 156px;
+ top: 43px;
+ width: 10px;
+ height: 6px;
+ overflow: hidden;
+}
+
+.stop .media-info #khz { display: none; }
+
+.media-info .mono-stereo {
+ position: absolute;
+ left: 212px;
+ top: 41px;
+ width: 57px;
+ height: 12px;
+}
+
+.media-info .mono-stereo div {
+ position: absolute;
+ height: 12px;
+ /* background-image: MONOSTER.BMP via Javascript */
+}
+
+.media-info .mono-stereo #mono {
+ width: 29px;
+ background-position: -29px -12px;
+}
+.media-info .mono-stereo #mono.selected {
+ background-position: -29px 0;
+}
+.stop .media-info .mono-stereo #mono.selected {
+ background-position: -29px -12px;
+}
+
+.media-info .mono-stereo #stereo {
+ left: 27px;
+ width: 29px;
+ background-position: 0 -12px;
+}
+.media-info .mono-stereo #stereo.selected {
+ background-position: 0 0;
+}
+.stop .media-info .mono-stereo #stereo.selected {
+ background-position: 0 -12px;
+}
+
+#volume {
+ position: absolute;
+ left: 107px;
+ top: 57px;
+ height: 13px;
+ width: 68px;
+ /* background-image: VOLUME.BMP via Javascript */
+ background-position: 0 0;
+ cursor:url('../cursors/POSBAR.PNG?inline'), auto;
+}
+#volume::-webkit-slider-thumb {
+ display: block;
+ margin-top: 1px;
+ height: 11px;
+ width: 14px;
+ /* background-image: VOLUME.BMP via Javascript */
+ background-position: -15px -422px;
+ cursor:url('../cursors/POSBAR.PNG?inline'), auto;
+ background-repeat: no-repeat;
+}
+#volume::-moz-range-thumb {
+ margin-top: 1px;
+ height: 11px;
+ width: 14px;
+ /* background-image: VOLUME.BMP via Javascript */
+ background-position: -15px -422px;
+ cursor:url('../cursors/POSBAR.PNG?inline'), auto;
+ background-repeat: no-repeat;
+}
+#volume:active::-webkit-slider-thumb {
+ background-position: 0 -422px;
+}
+#volume:active::-moz-range-thumb {
+ background-position: 0 -422px;
+}
+
+#balance {
+ position: absolute;
+ left: 177px;
+ top: 57px;
+ height: 13px;
+ width: 38px;
+ /* background-image: BALANCE.BMP via Javascript */
+ background-position: -9px 0;
+ cursor:url('../cursors/POSBAR.PNG?inline'), auto;
+}
+
+#balance::-webkit-slider-thumb {
+ top: 1px;
+ height: 11px;
+ width: 14px;
+ /* background-image: VOLUME.BMP via Javascript */
+ background-position: -15px -422px;
+ cursor:url('../cursors/POSBAR.PNG?inline'), auto;
+ background-repeat: no-repeat;
+}
+#balance::-moz-range-thumb {
+ top: 1px;
+ height: 11px;
+ width: 14px;
+ /* background-image: VOLUME.BMP via Javascript */
+ background-position: -15px -422px;
+ cursor:url('../cursors/POSBAR.PNG?inline'), auto;
+ background-repeat: no-repeat;
+}
+
+#balance:active::-webkit-slider-thumb {
+ background-position: 0 -422px;
+}
+#balance:active::-moz-range-thumb {
+ background-position: 0 -422px;
+}
+
+.windows {
+ position: absolute;
+ left: 219px;
+ top: 58px;
+ width: 46px;
+ height: 12px;
+}
+
+.windows div {
+ position: absolute;
+ width: 23px;
+ height: 12px;
+ /* background-image: SHUFREP.BMP via Javascript */
+}
+
+.windows #equalizer-button {
+ left: 0;
+ background-position: 0 -61px;
+}
+.windows #equalizer-button:active {
+ background-position: -46px -61px;
+}
+
+.windows #playlist-button {
+ left: 23px;
+ background-position: -23px -61px;
+}
+.windows #playlist-button:active {
+ background-position: -69px -61px;
+}
+
+#position {
+ position: absolute;
+ left: 16px;
+ top: 72px;
+ width: 248px;
+ height: 10px;
+ /* background-image: POSBAR.BMP via Javascript */
+ background-repeat: no-repeat;
+ cursor:url('../cursors/POSBAR.PNG?inline'), auto;
+}
+
+#position::-webkit-slider-thumb {
+ height: 10px;
+ width: 29px;
+ background-position: -248px 0;
+ /* background-image: POSBAR.BMP via Javascript */
+ background-repeat: no-repeat;
+ cursor:url('../cursors/POSBAR.PNG?inline'), auto;
+ /*
+ * Fix the strange bug in Safair/mobile-chrome
+ * http://stackoverflow.com/questions/26727769/rendering-glitch-when-manipulating-range-input-value-via-javascript-in-webkit
+ */
+ -webkit-box-sizing: border-box;
+ position: relative;
+}
+
+#position::-moz-range-thumb {
+ height: 10px;
+ width: 29px;
+ background-position: -248px 0;
+ /* background-image: POSBAR.BMP via Javascript */
+ background-repeat: no-repeat;
+ cursor:url('../cursors/POSBAR.PNG?inline'), auto;
+}
+
+/* For some reason, we can't use display: none here */
+.stop #position::-webkit-slider-thumb { visibility: hidden; }
+.stop #position::-moz-range-thumb { visibility: hidden; }
+
+#position:active::-webkit-slider-thumb {
+ background-position: -278px 0;
+}
+#position:active::-moz-range-thumb {
+ background-position: -278px 0;
+}
+
+.actions div {
+ /* background-image: CBUTTONS.BMP via Javascript */
+ height: 18px;
+ width: 23px;
+ position: absolute;
+}
+
+.actions #previous {
+ top: 88px;
+ left: 16px;
+ background-position: 0 0;
+}
+.actions #previous:active { background-position: 0 -18px; }
+.actions #play {
+ top: 88px;
+ left: 39px;
+ background-position: -23px 0;
+}
+.actions #play:active { background-position: -23px -18px; }
+.actions #pause {
+ top: 88px;
+ left: 62px;
+ background-position: -46px 0;
+}
+.actions #pause:active { background-position: -46px -18px; }
+.actions #stop {
+ top: 88px;
+ left: 85px;
+ background-position: -69px 0;
+}
+.actions #stop:active { background-position: -69px -18px; }
+.actions #next {
+ top: 88px;
+ left: 108px;
+ background-position: -92px 0;
+ width: 22px;
+}
+.actions #next:active { background-position: -92px -18px; }
+
+#eject {
+ position: absolute;
+ top: 89px;
+ left: 136px;
+ /* background-image: CBUTTONS.BMP via Javascript */
+ height: 16px;
+ width: 22px;
+}
+#eject { background-position: -114px 0; }
+#eject:active { background-position: -114px -16px; }
+
+.shuffle-repeat {
+ position: absolute;
+ top: 89px;
+ left: 163px;
+ width: 74px;
+}
+
+.shuffle-repeat div {
+ position: absolute;
+ height: 15px;
+ /* background-image: SHUFREP.BMP via Javascript */
+}
+
+.shuffle-repeat #shuffle {
+ width: 47px;
+ background-position: -28px 0;
+}
+.shuffle-repeat #shuffle:active {
+ background-position: -28px -15px;
+}
+
+.shuffle-repeat #shuffle.selected {
+ background-position: -28px -30px;
+}
+.shuffle-repeat #shuffle.selected:active {
+ background-position: -28px -45px;
+}
+
+.shuffle-repeat #repeat {
+ left: 46px;
+ width: 28px;
+}
+.shuffle-repeat #repeat:active {
+ background-position: 0 -15px;
+}
+
+.shuffle-repeat #repeat.selected {
+ background-position: 0 -30px;
+}
+.shuffle-repeat #repeat.selected:active {
+ background-position: 0 -45px;
+}
+
+#about {
+ position: absolute;
+ top: 91px;
+ left: 253px;
+ height: 15px;
+ width: 13px;
+}
+
+.digit {
+ position: absolute;
+ display: inline-block;
+ width: 9px;
+ height: 13px;
+ /* background-image: NUMBERS.BMP via Javascript */
+ background-repeat: no-repeat;
+ text-indent: -9999px;
+}
+
+/* Shade View */
+#main-window.shade {
+ height: 14px;
+}
+
+#shade-time {
+ cursor:url('../cursors/MAINMENU.PNG?inline'), auto;
+}
+
+
+.shade .media-info,
+.shade .windows,
+.shade #volume,
+.shade #balance,
+.shade .shuffle-repeat,
+.shade .status
+{
+ display: none;
+}
+.shade #title-bar {
+ background-position: -27px -42px;
+ cursor:url('../cursors/MAINMENU.PNG?inline'), auto;
+}
+
+.shade #title-bar.selected {
+ background-position: -27px -29px;
+}
+
+.shade #title-bar #shade {
+ background-position: 0px -27px;
+}
+.shade #title-bar #shade:active {
+ background-position: -9px -27px;
+}
+.shade .actions div {
+ background: none;
+ position: absolute;
+}
+.shade #previous {
+ height: 10px;
+ width: 7px;
+ top: 2px;
+ left: 169px;
+}
+.shade #play {
+ height: 10px;
+ width: 10px;
+ top: 2px;
+ left: 176px;
+}
+.shade #pause {
+ height: 10px;
+ width: 9px;
+ top: 2px;
+ left: 186px;
+}
+.shade #stop {
+ height: 10px;
+ width: 9px;
+ top: 2px;
+ left: 195px;
+}
+.shade #next {
+ height: 10px;
+ width: 10px;
+ top: 2px;
+ left: 204px;
+}
+.shade #eject {
+ height: 10px;
+ width: 10px;
+ top: 2px;
+ left: 215px;
+ background: none;
+}
+
+.shade #position {
+ position: absolute;
+ left: 226px;
+ top: 4px;
+ width: 17px;
+ height: 7px;
+ /* background-image: TITLEBAR.BMP via Javascript */
+ background-position: -0px -36px;
+}
+
+.shade #position::-webkit-slider-thumb {
+ height: 7px;
+ width: 3px;
+ background-position: -20px -36px;
+ /* background-image: TITLEBAR.BMP via Javascript */
+}
+
+.shade #position::-moz-range-thumb {
+ height: 7px;
+ width: 3px;
+ background-position: -20px -36px;
+ /* background-image: TITLEBAR.BMP via Javascript */
+}
+
+.shade #position.left::-webkit-slider-thumb {
+ background-position: -17px -36px;
+}
+.shade #position.left::-moz-range-thumb {
+ background-position: -17px -36px;
+}
+.shade #position.right::-webkit-slider-thumb {
+ background-position: -23px -36px;
+}
+.shade #position.right::-moz-range-thumb {
+ background-position: -23px -36px;
+}
+
+#shade-time {
+ display: none;
+}
+
+.shade #shade-time {
+ display: block;
+ position: absolute;
+ top: 4px;
+ left: 127px;
+ height:6px;
+ width: 25px;
+}
+
+.stop.shade #shade-time { display:none; }
+.pause.shade #shade-time {
+ animation: blink 2s step-start 1s infinite;
+ -webkit-animation: blink 2s step-start 1s infinite;
+}
+
+.shade #shade-time .character {
+ position: absolute;
+ top: 0;
+}
+.shade #shade-minus-sign {
+ left: 0px;
+}
+.shade #shade-minute-first-digit {
+ left: 6px;
+}
+
+.shade #shade-minute-second-digit {
+ left: 11px;
+}
+.shade #shade-second-first-digit {
+ left: 20px;
+}
+
+.shade #shade-second-second-digit {
+ left: 25px;
+}
diff --git a/css/page.css b/css/page.css
new file mode 100644
index 00000000..5bde1ec1
--- /dev/null
+++ b/css/page.css
@@ -0,0 +1,30 @@
+/* Rules for the page layout */
+body {
+ background-color: #224EB7;
+ font-family: arial;
+ font-size: 15px;
+}
+
+#browser-compatibility {
+ display: none;
+ position: absolute;
+ width: 275px;
+ margin-top: -58px;
+ margin-left: -137px;
+ top: 40%;
+ left: 50%;
+ background: white;
+ text-align: center;
+}
+
+.about {
+ position: absolute;
+ bottom: 0;
+ color: white;
+}
+
+.about a {
+ color: white;
+}
+
+
diff --git a/css/winamp.css b/css/winamp.css
old mode 100755
new mode 100644
index d1ad6d7a..dff5fcfd
--- a/css/winamp.css
+++ b/css/winamp.css
@@ -1,3 +1,5 @@
+/* Rules used by all windows */
+
/* Range input css reset */
input[type=range]{ -webkit-appearance: none; margin: 0; padding: 0; background: none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; border: none; border-radius: 0; background: none; }
@@ -5,18 +7,9 @@ input[type=range]::-moz-range-thumb { border: none; border-radius: 0; background
input[type=range]::-moz-range-track { border: none; background: none; }
input[type=range]:focus { outline: none; }
input[type=range]::-moz-focus-outer { border: 0; }
+
a:focus { outline: none; }
-body {
- background-color: #224EB7;
- font-family: arial;
- font-size: 15px;
-}
-
-#shade-time {
- cursor:url('../cursors/MAINMENU.PNG?inline'), auto;
-}
-
/* Animation */
@keyframes blink {
0% { opacity: 1.0; }
@@ -29,636 +22,6 @@ body {
100% { opacity: 1.0; }
}
-/* Styles */
-#main-window {
- position: absolute;
- /* background-image: MAIN.BMP via Javascript */
- height: 116px;
- width: 275px;
- margin-top: -58px;
- margin-left: -137px;
- top: 40%;
- left: 50%;
- cursor:url('../cursors/MAINMENU.PNG?inline'), auto;
- /* Ask the browser to scale showing large pixels if possible */
- image-rendering: -moz-crisp-edges; /* Firefox */
- image-rendering: -o-crisp-edges; /* Opera */
- image-rendering: -webkit-optimize-contrast; /* Safari */
- image-rendering: pixelated; /* Only in Chrome > 40 */
- -ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
-}
-
-#main-window.doubled {
- -moz-transform: scale(2);
- -moz-transform-origin: top left;
- -webkit-transform: scale(2);
- -webkit-transform-origin: top left;
-}
-
-.doubled #context-menu {
- -moz-transform: scale(.5);
- -moz-transform-origin: top left;
- -webkit-transform: scale(.5);
- -webkit-transform-origin: top left;
-}
-
-#main-window.loading {
- background-image: none;
- background-color: #FFFFFF;
- border: 2px solid #dddddd;
-}
-/* Hide everything whil we are loading */
-#main-window.loading * {
- display: none;
-}
-
-#loading {
- display: none;
- text-align: center;
- font-size: 20px;
- height: 30px;
- position: absolute;
- margin: auto;
- top: 0; left: 0; bottom: 0; right: 0;
-}
-
-/* Only show loading div while we are loading */
-#main-window.loading #loading {
- display: block;
-}
-
-#main-window.closed { display: none; }
-
-#title-bar {
- position: absolute;
- top: 0;
- left: 0;
- height: 14px;
- width: 275px;
- /* background-image: TITLEBAR.BMP via Javascript */
- background-position: -27px -14px;
- cursor:url('../cursors/TITLEBAR.PNG?inline'), auto;
-}
-
-#title-bar.selected {
- background-position: -27px 0px;
-}
-
-.llama #title-bar {
- background-position: -27px -61px;
-}
-
-.llama #title-bar.selected {
- background-position: -27px -57px;
-}
-
-#option,
-#minimize,
-#shade,
-#close {
- position: absolute;
- height: 9px;
- width: 9px;
- top: 3px;
- cursor:url('../cursors/MAINMENU.PNG?inline'), auto;
-}
-
-#title-bar #option {
- left: 6px;
- /* background-image: TITLEBAR.BMP via Javascript */
-}
-#title-bar #option #context-menu {
- display: none;
- top: 12px;
- left: 0px;
-}
-#title-bar #option:active,
-#title-bar #option.selected
-{
- background-position: 0 -9px;
-}
-#title-bar #option:active #context-menu,
-#title-bar #option.selected #context-menu
-{
- display: block;
-}
-
-#title-bar #minimize {
- left: 244px;
- /* background-image: TITLEBAR.BMP via Javascript */
- background-position: -9px 0;
-}
-#title-bar #minimize:active {
- background-position: -9px -9px;
-}
-
-#title-bar #shade {
- left: 254px;
- /* background-image: TITLEBAR.BMP via Javascript */
- background-position: 0px -18px;
-}
-#title-bar #shade:active {
- background-position: -9px -18px;
-}
-
-#title-bar #close {
- left: 264px;
- /* background-image: TITLEBAR.BMP via Javascript */
- background-position: -18px 0px;
- cursor:url('../cursors/CLOSE.PNG?inline'), auto;
-}
-#title-bar #close:active {
- background-position: -18px -9px;
-}
-
-.status #clutter-bar {
- position: absolute;
- top: 22px;
- left: 10px;
- height: 43px;
- width: 8px;
- /* background-image: TITLEBAR.BMP via Javascript */
- background-position: -304px 0;
-}
-
-.status #clutter-bar.disabled {
- background-position: -312px 0;
-}
-
-#clutter-bar div {
- position: absolute;
- height: 7px;
- width: 8px;
- left: 0px;
-}
-
-#clutter-bar #button-o {
- top: 3px;
- height: 8px;
-}
-#clutter-bar #button-o:active {
- background-position: -304px -47px;
-}
-#clutter-bar #button-a {
- top: 11px;
-}
-#clutter-bar #button-a:active,
-#clutter-bar #button-a.selected {
- background-position: -312px -55px;
-}
-#clutter-bar #button-i {
- top: 18px;
-}
-#clutter-bar #button-i:active {
- background-position: -320px -62px;
-}
-#clutter-bar #button-d {
- top: 25px;
- height: 8px;
-}
-#clutter-bar #button-d:active,
-#clutter-bar #button-d.selected {
- background-position: -328px -69px;
-}
-#clutter-bar #button-v {
- top: 33px;
-}
-#clutter-bar #button-v:active {
- background-position: -336px -77px;
-}
-
-.status #play-pause {
- position: absolute;
- top: 28px;
- left: 26px;
- height: 9px;
- width: 9px;
- /* background-image: PLAYPAUS.BMP via Javascript */
- background-repeat: no-repeat;
-}
-
-.play .status #work-indicator {
- position: absolute;
- top: 28px;
- left: 24px;
- height: 9px;
- width: 3px;
- /* background-image: PLAYPAUS.BMP via Javascript */
- background-position: -36px 0;
-}
-.play .status #work-indicator.selected {
- background-position: -39px 0;
-}
-
-.play .status #play-pause { }
-.pause .status #play-pause { background-position: -9px 0; }
-.stop .status #play-pause { background-position: -18px 0; }
-.status #time {
- position: absolute;
- left: 39px;
- top: 26px;
- /* Just to make it clickable */
- height: 13px;
- width: 59px;
-}
-
-.stop .status #time { display:none; }
-.pause .status #time {
- animation: blink 2s step-start 1s infinite;
- -webkit-animation: blink 2s step-start 1s infinite;
-}
-
-.status #time #minus-sign {
- position: absolute;
- top: 6px;
- left: -1px;
- width: 5px;
- height: 1px;
- /* background-image: NUMBERS.BMP via Javascript */
- background-position: -9px -6px;
-}
-.status #time.countdown #minus-sign {
- background-position: -20px -6px;
-}
-/* Alternate format for minus sign, when skin supports it */
-.status #time.ex #minus-sign {
- top: 0px;
- left: -1px;
- width: 9px;
- height: 13px;
- /* background-image: NUMS_EX.BMP via Javascript */
- background-position: -90px 0px;
-}
-.status #time.ex.countdown #minus-sign {
- background-position: -99px 0px;
-}
-
-.status #time #minute-first-digit {
- position: absolute;
- pointer-events: none;
- left: 9px;
- height: 13px;
- width: 9px;
-}
-.status #time #minute-second-digit {
- position: absolute;
- pointer-events: none;
- left: 21px;
- height: 13px;
- width: 9px;
-}
-.status #time #second-first-digit {
- position: absolute;
- pointer-events: none;
- left: 39px;
- height: 13px;
- width: 9px;
-}
-.status #time #second-second-digit {
- position: absolute;
- pointer-events: none;
- left: 51px;
- height: 13px;
- width: 9px;
-}
-
-#visualizer {
- position: absolute;
- width: 76px;
- height: 16px;
- top: 43px;
- left: 24px;
-}
-
-.stop #visualizer {
- display: none;
-}
-
-
-.text {
- position: absolute;
- left: 112px;
- top: 27px;
- width: 152px;
- height: 6px;
- overflow: hidden;
- display: none;
-}
-
-#song-title {
- display: block;
-}
-
-.media-info #kbps {
- position: absolute;
- left: 111px;
- top: 43px;
- width: 15px;
- height: 6px;
- overflow: hidden;
-}
-
-.stop .media-info #kbps { display: none; }
-
-.media-info #khz {
- position: absolute;
- left: 156px;
- top: 43px;
- width: 10px;
- height: 6px;
- overflow: hidden;
-}
-
-.stop .media-info #khz { display: none; }
-
-.media-info .mono-stereo {
- position: absolute;
- left: 212px;
- top: 41px;
- width: 57px;
- height: 12px;
-}
-
-.media-info .mono-stereo div {
- position: absolute;
- height: 12px;
- /* background-image: MONOSTER.BMP via Javascript */
-}
-
-.media-info .mono-stereo #mono {
- width: 29px;
- background-position: -29px -12px;
-}
-.media-info .mono-stereo #mono.selected {
- background-position: -29px 0;
-}
-.stop .media-info .mono-stereo #mono.selected {
- background-position: -29px -12px;
-}
-
-.media-info .mono-stereo #stereo {
- left: 27px;
- width: 29px;
- background-position: 0 -12px;
-}
-.media-info .mono-stereo #stereo.selected {
- background-position: 0 0;
-}
-.stop .media-info .mono-stereo #stereo.selected {
- background-position: 0 -12px;
-}
-
-#volume {
- position: absolute;
- left: 107px;
- top: 57px;
- height: 13px;
- width: 68px;
- /* background-image: VOLUME.BMP via Javascript */
- background-position: 0 0;
- cursor:url('../cursors/POSBAR.PNG?inline'), auto;
-}
-#volume::-webkit-slider-thumb {
- display: block;
- margin-top: 1px;
- height: 11px;
- width: 14px;
- /* background-image: VOLUME.BMP via Javascript */
- background-position: -15px -422px;
- cursor:url('../cursors/POSBAR.PNG?inline'), auto;
- background-repeat: no-repeat;
-}
-#volume::-moz-range-thumb {
- margin-top: 1px;
- height: 11px;
- width: 14px;
- /* background-image: VOLUME.BMP via Javascript */
- background-position: -15px -422px;
- cursor:url('../cursors/POSBAR.PNG?inline'), auto;
- background-repeat: no-repeat;
-}
-#volume:active::-webkit-slider-thumb {
- background-position: 0 -422px;
-}
-#volume:active::-moz-range-thumb {
- background-position: 0 -422px;
-}
-
-#balance {
- position: absolute;
- left: 177px;
- top: 57px;
- height: 13px;
- width: 38px;
- /* background-image: BALANCE.BMP via Javascript */
- background-position: -9px 0;
- cursor:url('../cursors/POSBAR.PNG?inline'), auto;
-}
-
-#balance::-webkit-slider-thumb {
- top: 1px;
- height: 11px;
- width: 14px;
- /* background-image: VOLUME.BMP via Javascript */
- background-position: -15px -422px;
- cursor:url('../cursors/POSBAR.PNG?inline'), auto;
- background-repeat: no-repeat;
-}
-#balance::-moz-range-thumb {
- top: 1px;
- height: 11px;
- width: 14px;
- /* background-image: VOLUME.BMP via Javascript */
- background-position: -15px -422px;
- cursor:url('../cursors/POSBAR.PNG?inline'), auto;
- background-repeat: no-repeat;
-}
-
-#balance:active::-webkit-slider-thumb {
- background-position: 0 -422px;
-}
-#balance:active::-moz-range-thumb {
- background-position: 0 -422px;
-}
-
-.windows {
- position: absolute;
- left: 219px;
- top: 58px;
- width: 46px;
- height: 12px;
-}
-
-.windows div {
- position: absolute;
- width: 23px;
- height: 12px;
- /* background-image: SHUFREP.BMP via Javascript */
-}
-
-.windows #equalizer-button {
- left: 0;
- background-position: 0 -61px;
-}
-.windows #equalizer-button:active {
- background-position: -46px -61px;
-}
-
-.windows #playlist-button {
- left: 23px;
- background-position: -23px -61px;
-}
-.windows #playlist-button:active {
- background-position: -69px -61px;
-}
-
-#position {
- position: absolute;
- left: 16px;
- top: 72px;
- width: 248px;
- height: 10px;
- /* background-image: POSBAR.BMP via Javascript */
- background-repeat: no-repeat;
- cursor:url('../cursors/POSBAR.PNG?inline'), auto;
-}
-
-#position::-webkit-slider-thumb {
- height: 10px;
- width: 29px;
- background-position: -248px 0;
- /* background-image: POSBAR.BMP via Javascript */
- background-repeat: no-repeat;
- cursor:url('../cursors/POSBAR.PNG?inline'), auto;
- /*
- * Fix the strange bug in Safair/mobile-chrome
- * http://stackoverflow.com/questions/26727769/rendering-glitch-when-manipulating-range-input-value-via-javascript-in-webkit
- */
- -webkit-box-sizing: border-box;
- position: relative;
-}
-
-#position::-moz-range-thumb {
- height: 10px;
- width: 29px;
- background-position: -248px 0;
- /* background-image: POSBAR.BMP via Javascript */
- background-repeat: no-repeat;
- cursor:url('../cursors/POSBAR.PNG?inline'), auto;
-}
-
-/* For some reason, we can't use display: none here */
-.stop #position::-webkit-slider-thumb { visibility: hidden; }
-.stop #position::-moz-range-thumb { visibility: hidden; }
-
-#position:active::-webkit-slider-thumb {
- background-position: -278px 0;
-}
-#position:active::-moz-range-thumb {
- background-position: -278px 0;
-}
-
-.actions div {
- /* background-image: CBUTTONS.BMP via Javascript */
- height: 18px;
- width: 23px;
- position: absolute;
-}
-
-.actions #previous {
- top: 88px;
- left: 16px;
- background-position: 0 0;
-}
-.actions #previous:active { background-position: 0 -18px; }
-.actions #play {
- top: 88px;
- left: 39px;
- background-position: -23px 0;
-}
-.actions #play:active { background-position: -23px -18px; }
-.actions #pause {
- top: 88px;
- left: 62px;
- background-position: -46px 0;
-}
-.actions #pause:active { background-position: -46px -18px; }
-.actions #stop {
- top: 88px;
- left: 85px;
- background-position: -69px 0;
-}
-.actions #stop:active { background-position: -69px -18px; }
-.actions #next {
- top: 88px;
- left: 108px;
- background-position: -92px 0;
- width: 22px;
-}
-.actions #next:active { background-position: -92px -18px; }
-
-#eject {
- position: absolute;
- top: 89px;
- left: 136px;
- /* background-image: CBUTTONS.BMP via Javascript */
- height: 16px;
- width: 22px;
-}
-#eject { background-position: -114px 0; }
-#eject:active { background-position: -114px -16px; }
-
-.shuffle-repeat {
- position: absolute;
- top: 89px;
- left: 163px;
- width: 74px;
-}
-
-.shuffle-repeat div {
- position: absolute;
- height: 15px;
- /* background-image: SHUFREP.BMP via Javascript */
-}
-
-.shuffle-repeat #shuffle {
- width: 47px;
- background-position: -28px 0;
-}
-.shuffle-repeat #shuffle:active {
- background-position: -28px -15px;
-}
-
-.shuffle-repeat #shuffle.selected {
- background-position: -28px -30px;
-}
-.shuffle-repeat #shuffle.selected:active {
- background-position: -28px -45px;
-}
-
-.shuffle-repeat #repeat {
- left: 46px;
- width: 28px;
-}
-.shuffle-repeat #repeat:active {
- background-position: 0 -15px;
-}
-
-.shuffle-repeat #repeat.selected {
- background-position: 0 -30px;
-}
-.shuffle-repeat #repeat.selected:active {
- background-position: 0 -45px;
-}
-
-#about {
- position: absolute;
- top: 91px;
- left: 253px;
- height: 15px;
- width: 13px;
-}
-
.character {
display: block;
float: left; /* Safari does not do inline-block well */
@@ -669,183 +32,3 @@ body {
}
-.digit {
- position: absolute;
- display: inline-block;
- width: 9px;
- height: 13px;
- /* background-image: NUMBERS.BMP via Javascript */
- background-repeat: no-repeat;
- text-indent: -9999px;
-}
-
-/* Shade View */
-#main-window.shade {
- height: 14px;
-}
-
-.shade .media-info,
-.shade .windows,
-.shade #volume,
-.shade #balance,
-.shade .shuffle-repeat,
-.shade .status
-{
- display: none;
-}
-.shade #title-bar {
- background-position: -27px -42px;
- cursor:url('../cursors/MAINMENU.PNG?inline'), auto;
-}
-
-.shade #title-bar.selected {
- background-position: -27px -29px;
-}
-
-.shade #title-bar #shade {
- background-position: 0px -27px;
-}
-.shade #title-bar #shade:active {
- background-position: -9px -27px;
-}
-.shade .actions div {
- background: none;
- position: absolute;
-}
-.shade #previous {
- height: 10px;
- width: 7px;
- top: 2px;
- left: 169px;
-}
-.shade #play {
- height: 10px;
- width: 10px;
- top: 2px;
- left: 176px;
-}
-.shade #pause {
- height: 10px;
- width: 9px;
- top: 2px;
- left: 186px;
-}
-.shade #stop {
- height: 10px;
- width: 9px;
- top: 2px;
- left: 195px;
-}
-.shade #next {
- height: 10px;
- width: 10px;
- top: 2px;
- left: 204px;
-}
-.shade #eject {
- height: 10px;
- width: 10px;
- top: 2px;
- left: 215px;
- background: none;
-}
-
-.shade #position {
- position: absolute;
- left: 226px;
- top: 4px;
- width: 17px;
- height: 7px;
- /* background-image: TITLEBAR.BMP via Javascript */
- background-position: -0px -36px;
-}
-
-.shade #position::-webkit-slider-thumb {
- height: 7px;
- width: 3px;
- background-position: -20px -36px;
- /* background-image: TITLEBAR.BMP via Javascript */
-}
-
-.shade #position::-moz-range-thumb {
- height: 7px;
- width: 3px;
- background-position: -20px -36px;
- /* background-image: TITLEBAR.BMP via Javascript */
-}
-
-.shade #position.left::-webkit-slider-thumb {
- background-position: -17px -36px;
-}
-.shade #position.left::-moz-range-thumb {
- background-position: -17px -36px;
-}
-.shade #position.right::-webkit-slider-thumb {
- background-position: -23px -36px;
-}
-.shade #position.right::-moz-range-thumb {
- background-position: -23px -36px;
-}
-
-#shade-time {
- display: none;
-}
-
-.shade #shade-time {
- display: block;
- position: absolute;
- top: 4px;
- left: 127px;
- height:6px;
- width: 25px;
-}
-
-.stop.shade #shade-time { display:none; }
-.pause.shade #shade-time {
- animation: blink 2s step-start 1s infinite;
- -webkit-animation: blink 2s step-start 1s infinite;
-}
-
-.shade #shade-time .character {
- position: absolute;
- top: 0;
-}
-.shade #shade-minus-sign {
- left: 0px;
-}
-.shade #shade-minute-first-digit {
- left: 6px;
-}
-
-.shade #shade-minute-second-digit {
- left: 11px;
-}
-.shade #shade-second-first-digit {
- left: 20px;
-}
-
-.shade #shade-second-second-digit {
- left: 25px;
-}
-
-.about {
- position: absolute;
- bottom: 0;
- color: white;
-}
-
-.about a {
- color: white;
-}
-
-#browser-compatibility {
- display: none;
- position: absolute;
- width: 275px;
- margin-top: -58px;
- margin-left: -137px;
- top: 40%;
- left: 50%;
- background: white;
- text-align: center;
-}
diff --git a/index.html b/index.html
index 5bb3a7f8..ec25004d 100755
--- a/index.html
+++ b/index.html
@@ -11,6 +11,8 @@
+
+