From 545c22a3fc35d194ba280f317f94c2dfd636532e Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Fri, 13 Apr 2018 16:39:43 -0700
Subject: [PATCH] Update CSS prefix

---
 css/equalizer-window.css |  74 +++++++--------
 css/gen-window.css       |  40 ++++----
 css/main-window.css      | 194 +++++++++++++++++++--------------------
 css/mini-time.css        |   8 +-
 css/playlist-window.css  | 110 +++++++++++-----------
 css/winamp.css           |  22 ++---
 docs/architecture.md     |   2 +-
 docs/usage.md            |   2 +-
 js/components/App.js     |   2 +-
 js/components/Skin.js    |  14 +--
 10 files changed, 235 insertions(+), 233 deletions(-)

diff --git a/css/equalizer-window.css b/css/equalizer-window.css
index 91a15246..cf8c8fcb 100644
--- a/css/equalizer-window.css
+++ b/css/equalizer-window.css
@@ -1,14 +1,14 @@
 /* Styles */
-#winamp2-js #equalizer-window {
+#webamp #equalizer-window {
     height: 116px;
     width: 275px;
 }
 
-#winamp2-js #equalizer-window.shade {
+#webamp #equalizer-window.shade {
     height: 14px;
 }
 
-#winamp2-js #equalizer-volume {
+#webamp #equalizer-volume {
     position: absolute;
     left: 60px;
     top: 4px;
@@ -17,25 +17,25 @@
     background-position: 0 0;
 }
 
-#winamp2-js #equalizer-volume::-webkit-slider-thumb {
+#webamp #equalizer-volume::-webkit-slider-thumb {
     height: 7px;
     width: 2px;
 }
 
-#winamp2-js #equalizer-volume::-moz-range-thumb {
+#webamp #equalizer-volume::-moz-range-thumb {
     height: 7px;
     width: 2px;
 }
 
-#winamp2-js #equalizer-volume.center::-webkit-slider-thumb {
+#webamp #equalizer-volume.center::-webkit-slider-thumb {
     width: 5px;
 }
 
-#winamp2-js #equalizer-volume.center::-moz-range-thumb {
+#webamp #equalizer-volume.center::-moz-range-thumb {
     width: 5px;
 }
 
-#winamp2-js #equalizer-balance {
+#webamp #equalizer-balance {
     position: absolute;
     left: 164px;
     top: 4px;
@@ -44,31 +44,31 @@
     background-position: 0 0;
 }
 
-#winamp2-js #equalizer-balance::-webkit-slider-thumb {
+#webamp #equalizer-balance::-webkit-slider-thumb {
     height: 7px;
     width: 2px;
 }
 
-#winamp2-js #equalizer-balance::-moz-range-thumb {
+#webamp #equalizer-balance::-moz-range-thumb {
     height: 7px;
     width: 2px;
 }
 
-#winamp2-js #equalizer-balance.center::-webkit-slider-thumb {
+#webamp #equalizer-balance.center::-webkit-slider-thumb {
     width: 5px;
 }
 
-#winamp2-js #equalizer-balance.center::-moz-range-thumb {
+#webamp #equalizer-balance.center::-moz-range-thumb {
     width: 5px;
 }
 
-#winamp2-js .equalizer-top {
+#webamp .equalizer-top {
     height: 14px;
     width: 275px;
     position: relative;
 }
 
-#winamp2-js #equalizer-close {
+#webamp #equalizer-close {
     position: absolute;
     height: 9px;
     width: 9px;
@@ -76,7 +76,7 @@
     top: 3px;
 }
 
-#winamp2-js #equalizer-shade {
+#webamp #equalizer-shade {
     position: absolute;
     height: 9px;
     width: 9px;
@@ -84,7 +84,7 @@
     top: 3px;
 }
 
-#winamp2-js #on {
+#webamp #on {
     position: absolute;
     width: 26px;
     height: 12px;
@@ -92,7 +92,7 @@
     left: 14px;
 }
 
-#winamp2-js #auto {
+#webamp #auto {
     position: absolute;
     width: 32px;
     height: 12px;
@@ -100,7 +100,7 @@
     left: 40px;
 }
 
-#winamp2-js #presets-context {
+#webamp #presets-context {
     position: absolute;
     width: 44px;
     height: 12px;
@@ -108,12 +108,12 @@
     left: 217px;
 }
 
-#winamp2-js #presets {
+#webamp #presets {
     width: 100%;
     height: 100%;
 }
 
-#winamp2-js #eqGraph {
+#webamp #eqGraph {
     position: absolute;
     width: 113px;
     height: 19px;
@@ -121,13 +121,13 @@
     left: 86px;
 }
 
-#winamp2-js #preamp {
+#webamp #preamp {
     position: absolute;
     left: 21px;
     top: 38px;
 }
 
-#winamp2-js #plus12db {
+#webamp #plus12db {
     position: absolute;
     left: 45px;
     top: 36px;
@@ -135,7 +135,7 @@
     height: 8px;
 }
 
-#winamp2-js #zerodb {
+#webamp #zerodb {
     position: absolute;
     left: 45px;
     top: 64px;
@@ -143,7 +143,7 @@
     height: 8px;
 }
 
-#winamp2-js #minus12db {
+#webamp #minus12db {
     position: absolute;
     left: 45px;
     top: 95px;
@@ -151,78 +151,78 @@
     height: 8px;
 }
 
-#winamp2-js #band-60 {
+#webamp #band-60 {
     position: absolute;
     left: 78px;
     top: 38px;
 }
 
-#winamp2-js #band-170 {
+#webamp #band-170 {
     position: absolute;
     left: 96px;
     top: 38px;
 }
 
-#winamp2-js #band-310 {
+#webamp #band-310 {
     position: absolute;
     left: 114px;
     top: 38px;
 }
 
-#winamp2-js #band-600 {
+#webamp #band-600 {
     position: absolute;
     left: 132px;
     top: 38px;
 }
 
-#winamp2-js #band-1000 {
+#webamp #band-1000 {
     position: absolute;
     left: 150px;
     top: 38px;
 }
 
-#winamp2-js #band-3000 {
+#webamp #band-3000 {
     position: absolute;
     left: 168px;
     top: 38px;
 }
 
-#winamp2-js #band-6000 {
+#webamp #band-6000 {
     position: absolute;
     left: 186px;
     top: 38px;
 }
 
-#winamp2-js #band-12000 {
+#webamp #band-12000 {
     position: absolute;
     left: 204px;
     top: 38px;
 }
 
-#winamp2-js #band-14000 {
+#webamp #band-14000 {
     position: absolute;
     left: 222px;
     top: 38px;
 }
 
-#winamp2-js #band-16000 {
+#webamp #band-16000 {
     position: absolute;
     left: 240px;
     top: 38px;
 }
 
-#winamp2-js .band {
+#webamp .band {
     width: 14px;
     height: 63px;
 }
 
-#winamp2-js .band .rc-slider {
+#webamp .band .rc-slider {
     height: 51px;
     width: 14px;
     margin-top: 6px;
 }
 
-#winamp2-js .band .rc-slider .rc-slider-handle {
+#webamp .band .rc-slider .rc-slider-handle {
     width: 11px;
     height: 11px;
     margin: -6px 0 0 1px;
diff --git a/css/gen-window.css b/css/gen-window.css
index c782baef..3994fab6 100644
--- a/css/gen-window.css
+++ b/css/gen-window.css
@@ -1,13 +1,13 @@
-#winamp2-js .gen-text-space {
+#webamp .gen-text-space {
     width: 5px;
 }
 
-#winamp2-js .gen-text-letter {
+#webamp .gen-text-letter {
     height: 7px;
     display: inline-block;
 }
 
-#winamp2-js .gen-window {
+#webamp .gen-window {
     /* Default size */
     width: 275px;
     height: 116px;
@@ -15,45 +15,45 @@
     flex-direction: column;
 }
 
-#winamp2-js .gen-top {
+#webamp .gen-top {
     height: 20px;
     display: flex;
     flex-direction: row;
 }
 
-#winamp2-js .gen-top-left {
+#webamp .gen-top-left {
     width: 25px;
     height: 20px;
 }
 
-#winamp2-js .gen-top-title {
+#webamp .gen-top-title {
     line-height: 7px;
     margin-top: 2px;
     /* TODO: This should be a conciquence of the repeating tiles, not hard coded */
     padding: 0 3px 0 4px;
 }
 
-#winamp2-js .gen-top-left-right-fill {
+#webamp .gen-top-left-right-fill {
     flex-grow: 1;
     height: 20px;
 }
 
-#winamp2-js .gen-top-left-end {
+#webamp .gen-top-left-end {
     width: 25px;
     height: 20px;
 }
 
-#winamp2-js .gen-top-right {
+#webamp .gen-top-right {
     width: 25px;
     height: 20px;
 }
 
-#winamp2-js .gen-top-right-end {
+#webamp .gen-top-right-end {
     width: 25px;
     height: 20px;
 }
 
-#winamp2-js .gen-close {
+#webamp .gen-close {
     width: 9px;
     height: 9px;
     position: absolute;
@@ -61,53 +61,53 @@
     top: 3px;
 }
 
-#winamp2-js .gen-middle {
+#webamp .gen-middle {
     flex-grow: 1;
     display: flex;
     flex-direction: row;
     position: relative;
 }
 
-#winamp2-js .gen-middle-left {
+#webamp .gen-middle-left {
     width: 11px;
 }
 
-#winamp2-js .gen-middle-left-bottom {
+#webamp .gen-middle-left-bottom {
     width: 11px;
     height: 24px;
     bottom: 0;
     position: absolute;
 }
 
-#winamp2-js .gen-middle-center {
+#webamp .gen-middle-center {
     flex-grow: 1;
     position: relative;
 }
 
-#winamp2-js .gen-middle-right {
+#webamp .gen-middle-right {
     width: 8px;
 }
 
-#winamp2-js .gen-middle-right-bottom {
+#webamp .gen-middle-right-bottom {
     width: 8px;
     height: 24px;
     bottom: 0;
     position: absolute;
 }
 
-#winamp2-js .gen-bottom {
+#webamp .gen-bottom {
     height: 14px;
     background-repeat: repeat-x;
 }
 
-#winamp2-js .gen-bottom-left {
+#webamp .gen-bottom-left {
     position: absolute;
     left: 0;
     width: 125px;
     height: 14px;
 }
 
-#winamp2-js .gen-bottom-right {
+#webamp .gen-bottom-right {
     position: absolute;
     right: 0;
     width: 125px;
diff --git a/css/main-window.css b/css/main-window.css
index 3cb39fbd..7a780891 100755
--- a/css/main-window.css
+++ b/css/main-window.css
@@ -1,5 +1,5 @@
 /* Styles */
-#winamp2-js #main-window {
+#webamp #main-window {
     position: absolute;
     height: 116px;
     width: 275px;
@@ -11,7 +11,7 @@
     -ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
 }
 
-#winamp2-js #title-bar {
+#webamp #title-bar {
     position: absolute;
     top: 0;
     left: 0;
@@ -19,34 +19,34 @@
     width: 275px;
 }
 
-#option-context,
-#winamp2-js #minimize,
-#winamp2-js #shade,
-#winamp2-js #close {
+#webamp #option-context,
+#webamp #minimize,
+#webamp #shade,
+#webamp #close {
     position: absolute;
     height: 9px;
     width: 9px;
     top: 3px;
 }
 
-#winamp2-js #title-bar #option {
+#webamp #title-bar #option {
     width: 100%;
     height: 100%;
 }
 
-#winamp2-js #title-bar #option-context {
+#webamp #title-bar #option-context {
     left: 6px;
 }
-#winamp2-js #title-bar #minimize {
+#webamp #title-bar #minimize {
     left: 244px;
 }
-#winamp2-js #title-bar #shade {
+#webamp #title-bar #shade {
     left: 254px;
 }
-#winamp2-js #title-bar #close {
+#webamp #title-bar #close {
     left: 264px;
 }
-#winamp2-js #clutter-bar {
+#webamp #clutter-bar {
     position: absolute;
     top: 22px;
     left: 10px;
@@ -54,32 +54,32 @@
     width: 8px;
 }
 
-#winamp2-js #clutter-bar div {
+#webamp #clutter-bar div {
     position: absolute;
     height: 7px;
     width: 8px;
     left: 0px;
 }
 
-#winamp2-js #clutter-bar #button-o {
+#webamp #clutter-bar #button-o {
     top: 3px;
     height: 8px;
 }
-#winamp2-js #clutter-bar #button-a {
+#webamp #clutter-bar #button-a {
     top: 11px;
 }
-#winamp2-js #clutter-bar #button-i {
+#webamp #clutter-bar #button-i {
     top: 18px;
 }
-#winamp2-js #clutter-bar #button-d {
+#webamp #clutter-bar #button-d {
     top: 25px;
     height: 8px;
 }
-#winamp2-js #clutter-bar #button-v {
+#webamp #clutter-bar #button-v {
     top: 33px;
 }
 
-#winamp2-js #play-pause {
+#webamp #play-pause {
     position: absolute;
     top: 28px;
     left: 26px;
@@ -88,15 +88,15 @@
     background-repeat: no-repeat;
 }
 
-#winamp2-js .play #work-indicator,
-#winamp2-js #work-indicator.selected {
+#webamp .play #work-indicator,
+#webamp #work-indicator.selected {
     position: absolute;
     top: 28px;
     left: 24px;
     height: 9px;
     width: 3px;
 }
-#winamp2-js .status #time {
+#webamp .status #time {
     position: absolute;
     left: 39px;
     top: 26px;
@@ -105,15 +105,15 @@
     width: 59px;
 }
 
-#winamp2-js .stop .status #time {
+#webamp .stop .status #time {
     display: none;
 }
-#winamp2-js .pause .status #time {
+#webamp .pause .status #time {
     animation: blink 2s step-start 1s infinite;
     -webkit-animation: blink 2s step-start 1s infinite;
 }
 
-#winamp2-js .status #time #minus-sign {
+#webamp .status #time #minus-sign {
     /* Note that this get's augmented by the skin CSS if NUM_EX.BMP is present */
     position: absolute;
     top: 6px;
@@ -122,28 +122,28 @@
     height: 1px;
 }
 
-#winamp2-js .status #time #minute-first-digit {
+#webamp .status #time #minute-first-digit {
     position: absolute;
     pointer-events: none;
     left: 9px;
     height: 13px;
     width: 9px;
 }
-#winamp2-js .status #time #minute-second-digit {
+#webamp .status #time #minute-second-digit {
     position: absolute;
     pointer-events: none;
     left: 21px;
     height: 13px;
     width: 9px;
 }
-#winamp2-js .status #time #second-first-digit {
+#webamp .status #time #second-first-digit {
     position: absolute;
     pointer-events: none;
     left: 39px;
     height: 13px;
     width: 9px;
 }
-#winamp2-js .status #time #second-second-digit {
+#webamp .status #time #second-second-digit {
     position: absolute;
     pointer-events: none;
     left: 51px;
@@ -151,26 +151,26 @@
     width: 9px;
 }
 
-#winamp2-js #visualizer {
+#webamp #visualizer {
     position: absolute;
     top: 43px;
     left: 24px;
 }
 
-#winamp2-js .shade #visualizer {
+#webamp .shade #visualizer {
     top: 5px;
     left: 79px;
 }
 
-#winamp2-js .stop #visualizer {
+#webamp .stop #visualizer {
     display: none;
 }
 
-#winamp2-js .text {
+#webamp .text {
     display: none;
 }
 
-#winamp2-js #marquee {
+#webamp #marquee {
     position: absolute;
     left: 111px;
     top: 24px;
@@ -181,7 +181,7 @@
     padding: 3px 1px; /* Ensure the target is correct for the cursor */
 }
 
-#winamp2-js .media-info #kbps {
+#webamp .media-info #kbps {
     position: absolute;
     left: 111px;
     top: 43px;
@@ -190,11 +190,11 @@
     overflow: hidden;
 }
 
-#winamp2-js .stop .media-info #kbps {
+#webamp .stop .media-info #kbps {
     display: none;
 }
 
-#winamp2-js .media-info #khz {
+#webamp .media-info #khz {
     position: absolute;
     left: 156px;
     top: 43px;
@@ -203,11 +203,11 @@
     overflow: hidden;
 }
 
-#winamp2-js .stop .media-info #khz {
+#webamp .stop .media-info #khz {
     display: none;
 }
 
-#winamp2-js .media-info .mono-stereo {
+#webamp .media-info .mono-stereo {
     position: absolute;
     left: 212px;
     top: 41px;
@@ -215,21 +215,21 @@
     height: 12px;
 }
 
-#winamp2-js .media-info .mono-stereo div {
+#webamp .media-info .mono-stereo div {
     position: absolute;
     height: 12px;
 }
 
-#winamp2-js .media-info .mono-stereo #mono {
+#webamp .media-info .mono-stereo #mono {
     width: 27px;
 }
 
-#winamp2-js .media-info .mono-stereo #stereo {
+#webamp .media-info .mono-stereo #stereo {
     left: 27px;
     width: 29px;
 }
 
-#winamp2-js #volume {
+#webamp #volume {
     position: absolute;
     left: 107px;
     top: 57px;
@@ -238,7 +238,7 @@
     background-position: 0 0;
 }
 
-#winamp2-js #volume input {
+#webamp #volume input {
     height: 13px;
     /* The input itself, is actually 3px shorter than the background
      * https://twitter.com/LuigiHann/status/959275940688867328
@@ -246,18 +246,18 @@
     width: 65px;
     display: block;
 }
-#winamp2-js #volume input::-webkit-slider-thumb {
+#webamp #volume input::-webkit-slider-thumb {
     top: 1px;
     height: 11px;
     width: 14px;
 }
-#winamp2-js #volume input::-moz-range-thumb {
+#webamp #volume input::-moz-range-thumb {
     top: 1px;
     height: 11px;
     width: 14px;
 }
 
-#winamp2-js #balance {
+#webamp #balance {
     position: absolute;
     left: 177px;
     top: 57px;
@@ -266,18 +266,18 @@
     background-position: 0 0;
 }
 
-#winamp2-js #balance::-webkit-slider-thumb {
+#webamp #balance::-webkit-slider-thumb {
     top: 1px;
     height: 11px;
     width: 14px;
 }
-#winamp2-js #balance::-moz-range-thumb {
+#webamp #balance::-moz-range-thumb {
     top: 1px;
     height: 11px;
     width: 14px;
 }
 
-#winamp2-js .windows {
+#webamp .windows {
     position: absolute;
     left: 219px;
     top: 58px;
@@ -285,21 +285,21 @@
     height: 12px;
 }
 
-#winamp2-js .windows div {
+#webamp .windows div {
     position: absolute;
     width: 23px;
     height: 12px;
 }
 
-#winamp2-js .windows #equalizer-button {
+#webamp .windows #equalizer-button {
     left: 0;
 }
 
-#winamp2-js .windows #playlist-button {
+#webamp .windows #playlist-button {
     left: 23px;
 }
 
-#winamp2-js #position {
+#webamp #position {
     position: absolute;
     left: 16px;
     top: 72px;
@@ -307,7 +307,7 @@
     height: 10px;
 }
 
-#winamp2-js #position::-webkit-slider-thumb {
+#webamp #position::-webkit-slider-thumb {
     height: 10px;
     width: 29px;
     /*
@@ -318,55 +318,55 @@
     position: relative;
 }
 
-#winamp2-js #position::-moz-range-thumb {
+#webamp #position::-moz-range-thumb {
     height: 10px;
     width: 29px;
 }
 
 /* For some reason, we can't use display: none here */
-#winamp2-js .stop #position::-webkit-slider-thumb {
+#webamp .stop #position::-webkit-slider-thumb {
     visibility: hidden;
 }
-#winamp2-js .stop #position::-moz-range-thumb {
+#webamp .stop #position::-moz-range-thumb {
     visibility: hidden;
 }
 
 /* For some reason this is needed for the position slider to show up now that
  * we are using React.
  */
-#winamp2-js .play #position::-webkit-slider-thumb {
+#webamp .play #position::-webkit-slider-thumb {
     visibility: visible;
 }
 
-#winamp2-js .actions div {
+#webamp .actions div {
     height: 18px;
     width: 23px;
     position: absolute;
 }
 
-#winamp2-js .actions #previous {
+#webamp .actions #previous {
     top: 88px;
     left: 16px;
 }
-#winamp2-js .actions #play {
+#webamp .actions #play {
     top: 88px;
     left: 39px;
 }
-#winamp2-js .actions #pause {
+#webamp .actions #pause {
     top: 88px;
     left: 62px;
 }
-#winamp2-js .actions #stop {
+#webamp .actions #stop {
     top: 88px;
     left: 85px;
 }
-#winamp2-js .actions #next {
+#webamp .actions #next {
     top: 88px;
     left: 108px;
     width: 22px;
 }
 
-#winamp2-js #eject {
+#webamp #eject {
     position: absolute;
     top: 89px;
     left: 136px;
@@ -374,28 +374,28 @@
     width: 22px;
 }
 
-#winamp2-js .shuffle-repeat {
+#webamp .shuffle-repeat {
     position: absolute;
     top: 89px;
     left: 164px;
     width: 74px;
 }
 
-#winamp2-js .shuffle-repeat div {
+#webamp .shuffle-repeat div {
     position: absolute;
     height: 15px;
 }
 
-#winamp2-js .shuffle-repeat #shuffle {
+#webamp .shuffle-repeat #shuffle {
     width: 47px;
 }
 
-#winamp2-js .shuffle-repeat #repeat {
+#webamp .shuffle-repeat #repeat {
     left: 46px;
     width: 28px;
 }
 
-#winamp2-js #about {
+#webamp #about {
     position: absolute;
     top: 91px;
     left: 253px;
@@ -403,7 +403,7 @@
     width: 13px;
 }
 
-#winamp2-js .digit {
+#webamp .digit {
     position: absolute;
     display: inline-block;
     width: 9px;
@@ -413,66 +413,66 @@
 }
 
 /* Shade View */
-#winamp2-js #main-window.shade {
+#webamp #main-window.shade {
     height: 14px;
 }
 
-#winamp2-js .shade .media-info,
-#winamp2-js .shade .windows,
-#winamp2-js .shade #volume,
-#winamp2-js .shade #balance,
-#winamp2-js .shade .shuffle-repeat,
-#winamp2-js .shade .status {
+#webamp .shade .media-info,
+#webamp .shade .windows,
+#webamp .shade #volume,
+#webamp .shade #balance,
+#webamp .shade .shuffle-repeat,
+#webamp .shade .status {
     display: none;
 }
-#winamp2-js .shade #title-bar {
+#webamp .shade #title-bar {
 }
 
-#winamp2-js .shade .actions div {
+#webamp .shade .actions div {
     position: absolute;
 }
-#winamp2-js .shade .actions #previous,
-#winamp2-js .shade .actions #previous:active {
+#webamp .shade .actions #previous,
+#webamp .shade .actions #previous:active {
     background: none;
     height: 10px;
     width: 7px;
     top: 2px;
     left: 169px;
 }
-#winamp2-js .shade .actions #play,
-#winamp2-js .shade .actions #play:active {
+#webamp .shade .actions #play,
+#webamp .shade .actions #play:active {
     background: none;
     height: 10px;
     width: 10px;
     top: 2px;
     left: 176px;
 }
-#winamp2-js .shade .actions #pause,
-#winamp2-js .shade .actions #pause:active {
+#webamp .shade .actions #pause,
+#webamp .shade .actions #pause:active {
     background: none;
     height: 10px;
     width: 9px;
     top: 2px;
     left: 186px;
 }
-#winamp2-js .shade .actions #stop,
-#winamp2-js .shade .actions #stop:active {
+#webamp .shade .actions #stop,
+#webamp .shade .actions #stop:active {
     background: none;
     height: 10px;
     width: 9px;
     top: 2px;
     left: 195px;
 }
-#winamp2-js .shade .actions #next,
-#winamp2-js .shade .actions #next:active {
+#webamp .shade .actions #next,
+#webamp .shade .actions #next:active {
     background: none;
     height: 10px;
     width: 10px;
     top: 2px;
     left: 204px;
 }
-#winamp2-js .shade #eject,
-#winamp2-js .shade #eject:active {
+#webamp .shade #eject,
+#webamp .shade #eject:active {
     height: 10px;
     width: 10px;
     top: 2px;
@@ -480,7 +480,7 @@
     background: none;
 }
 
-#winamp2-js .shade #position {
+#webamp .shade #position {
     position: absolute;
     left: 226px;
     top: 4px;
@@ -488,21 +488,21 @@
     height: 7px;
 }
 
-#winamp2-js .shade #position::-webkit-slider-thumb {
+#webamp .shade #position::-webkit-slider-thumb {
     height: 7px;
     width: 3px;
     /* This make it appear. Not sure why */
     background: none;
 }
 
-#winamp2-js .shade #position::-moz-range-thumb {
+#webamp .shade #position::-moz-range-thumb {
     height: 7px;
     width: 3px;
     /* This make it appear. Not sure why */
     background: none;
 }
 
-#winamp2-js #main-window .mini-time {
+#webamp #main-window .mini-time {
     position: absolute;
     top: 4px;
     left: 127px;
diff --git a/css/mini-time.css b/css/mini-time.css
index 63fe5e95..e96b2063 100644
--- a/css/mini-time.css
+++ b/css/mini-time.css
@@ -1,19 +1,19 @@
-#winamp2-js .mini-time {
+#webamp .mini-time {
     display: block;
     height: 6px;
     width: 25px;
 }
 
-#winamp2-js .mini-time.blinking .character:not(.background-character) {
+#webamp .mini-time.blinking .character:not(.background-character) {
     animation: blink 2s step-start 1s infinite;
     -webkit-animation: blink 2s step-start 1s infinite;
 }
 
-#winamp2-js .mini-time .background-character {
+#webamp .mini-time .background-character {
     z-index: 1;
 }
 
-#winamp2-js .mini-time .character {
+#webamp .mini-time .character {
     position: absolute;
     top: 0;
     z-index: 2;
diff --git a/css/playlist-window.css b/css/playlist-window.css
index ec05b0e1..9139e9df 100644
--- a/css/playlist-window.css
+++ b/css/playlist-window.css
@@ -1,10 +1,10 @@
 /* Styles */
-#winamp2-js #playlist-window {
+#webamp #playlist-window {
     display: flex;
     flex-direction: column;
 }
 
-#winamp2-js .playlist-top {
+#webamp .playlist-top {
     width: 100%;
     min-height: 20px;
     max-height: 20px;
@@ -12,63 +12,63 @@
     display: flex;
 }
 
-#winamp2-js .playlist-top-left {
+#webamp .playlist-top-left {
     width: 25px;
 }
 
-#winamp2-js .playlist-top-left-spacer {
+#webamp .playlist-top-left-spacer {
     width: 12px;
 }
 
-#winamp2-js .playlist-top-left-fill {
+#webamp .playlist-top-left-fill {
     flex-grow: 1;
     background-position: right;
 }
 
-#winamp2-js .playlist-top-right-spacer {
+#webamp .playlist-top-right-spacer {
     /* This goes to the right of the center */
     width: 13px;
 }
 
-#winamp2-js .playlist-top-right-fill {
+#webamp .playlist-top-right-fill {
     flex-grow: 1;
     background-position: right;
 }
 
-#winamp2-js .playlist-top-title {
+#webamp .playlist-top-title {
     width: 100px;
 }
 
-#winamp2-js .playlist-top-right {
+#webamp .playlist-top-right {
     width: 25px;
 }
 
-#winamp2-js .playlist-middle {
+#webamp .playlist-middle {
     flex-grow: 1;
     display: flex;
     flex-direction: row;
     overflow: hidden;
 }
 
-#winamp2-js .playlist-middle-left {
+#webamp .playlist-middle-left {
     background-repeat: repeat-y;
     width: 12px;
     min-width: 12px;
 }
 
-#winamp2-js .playlist-middle-center {
+#webamp .playlist-middle-center {
     flex-grow: 1;
     padding: 3px 0;
     min-width: 0; /* Not sure why this is needed */
 }
 
-#winamp2-js .playlist-tracks {
+#webamp .playlist-tracks {
     display: flex;
     flex: 1 0 auto;
     cursor: default;
 }
 
-#winamp2-js .playlist-tracks .track-cell {
+#webamp .playlist-tracks .track-cell {
     height: 13px;
     line-height: 13px;
     font-size: 9px;
@@ -79,28 +79,28 @@
     user-select: none;
 }
 
-#winamp2-js .playlist-track-numbers > div,
-#winamp2-js .playlist-track-durations > div {
+#webamp .playlist-track-numbers > div,
+#webamp .playlist-track-durations > div {
     padding-right: 3px;
     text-align: right;
 }
-#winamp2-js .playlist-track-numbers > div {
+#webamp .playlist-track-numbers > div {
     text-align: center;
     padding-left: 1px;
 }
 
-#winamp2-js .playlist-track-titles {
+#webamp .playlist-track-titles {
     flex: 1 1 auto;
     overflow: hidden;
 }
 
-#winamp2-js .playlist-track-titles > div {
+#webamp .playlist-track-titles > div {
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
 }
 
-#winamp2-js .playlist-middle-right {
+#webamp .playlist-middle-right {
     background-repeat: repeat-y;
     background-position: top right;
     width: 20px;
@@ -109,18 +109,18 @@
     padding-bottom: 18px;
 }
 
-#winamp2-js .playlist-scrollbar {
+#webamp .playlist-scrollbar {
     height: 100%;
     width: 8px;
     margin-left: 5px;
 }
 
-#winamp2-js .playlist-scrollbar-handle {
+#webamp .playlist-scrollbar-handle {
     width: 8x;
     height: 18px;
 }
 
-#winamp2-js .playlist-bottom {
+#webamp .playlist-bottom {
     width: 100%;
     height: 38px;
     min-height: 38px;
@@ -128,13 +128,13 @@
     position: relative;
 }
 
-#winamp2-js .playlist-bottom-left {
+#webamp .playlist-bottom-left {
     width: 125px;
     height: 100%;
     position: absolute;
 }
 
-#winamp2-js .playlist-menu li {
+#webamp .playlist-menu li {
     list-style: none;
     display: none;
     width: 22px;
@@ -143,22 +143,22 @@
     margin: 0;
 }
 
-#winamp2-js .playlist-menu li > div {
+#webamp .playlist-menu li > div {
     height: 100%;
 }
 
-#winamp2-js .playlist-menu ul {
+#webamp .playlist-menu ul {
     padding: 0;
     margin: 0;
     position: absolute;
     bottom: 0;
 }
 
-#winamp2-js .playlist-menu.selected li {
+#webamp .playlist-menu.selected li {
     display: block;
 }
 
-#winamp2-js .playlist-menu .bar {
+#webamp .playlist-menu .bar {
     position: absolute;
     bottom: 0;
     left: -3px;
@@ -166,7 +166,7 @@
     height: 54px;
 }
 
-#winamp2-js #playlist-add-menu {
+#webamp #playlist-add-menu {
     position: absolute;
     bottom: 12px;
     left: 14px;
@@ -174,11 +174,11 @@
     height: 18px;
 }
 
-#winamp2-js #playlist-remove-menu.playlist-menu .bar {
+#webamp #playlist-remove-menu.playlist-menu .bar {
     height: 72px;
 }
 
-#winamp2-js #playlist-remove-menu {
+#webamp #playlist-remove-menu {
     position: absolute;
     bottom: 12px;
     left: 43px;
@@ -186,7 +186,7 @@
     height: 18px;
 }
 
-#winamp2-js #playlist-selection-menu {
+#webamp #playlist-selection-menu {
     position: absolute;
     bottom: 12px;
     left: 72px;
@@ -194,7 +194,7 @@
     height: 18px;
 }
 
-#winamp2-js #playlist-misc-menu {
+#webamp #playlist-misc-menu {
     position: absolute;
     bottom: 12px;
     left: 101px;
@@ -202,7 +202,7 @@
     height: 18px;
 }
 
-#winamp2-js #playlist-list-menu {
+#webamp #playlist-list-menu {
     position: absolute;
     bottom: 12px;
     right: 22px;
@@ -210,33 +210,33 @@
     height: 18px;
 }
 
-#winamp2-js .playlist-bottom-right {
+#webamp .playlist-bottom-right {
     width: 150px;
     height: 100%;
     position: absolute;
     right: 0;
 }
 
-#winamp2-js .playlist-running-time-display {
+#webamp .playlist-running-time-display {
     position: absolute;
     top: 10px;
     left: 7px;
     height: 10px;
 }
 
-#winamp2-js .playlist-action-buttons {
+#webamp .playlist-action-buttons {
     position: absolute;
     top: 22px;
     left: 3px;
     display: flex;
 }
 
-#winamp2-js .playlist-action-buttons > div {
+#webamp .playlist-action-buttons > div {
     height: 10px;
     width: 10px;
 }
 
-#winamp2-js #playlist-window .playlist-visualizer {
+#webamp #playlist-window .playlist-visualizer {
     width: 75px;
     height: 100%;
     position: absolute;
@@ -244,17 +244,17 @@
     display: none; /* Only show if the window is wide enough */
 }
 
-#winamp2-js #playlist-window.wide .playlist-visualizer {
+#webamp #playlist-window.wide .playlist-visualizer {
     display: block;
 }
 
-#winamp2-js #playlist-window .mini-time {
+#webamp #playlist-window .mini-time {
     position: absolute;
     top: 23px;
     left: 66px;
 }
 
-#winamp2-js #playlist-window #playlist-resize-target {
+#webamp #playlist-window #playlist-resize-target {
     position: absolute;
     right: 0;
     bottom: 0;
@@ -262,7 +262,7 @@
     width: 20px;
 }
 
-#winamp2-js #playlist-close-button {
+#webamp #playlist-close-button {
     position: absolute;
     right: 2px;
     height: 9px;
@@ -270,7 +270,7 @@
     top: 3px;
 }
 
-#winamp2-js #playlist-shade-button {
+#webamp #playlist-shade-button {
     position: absolute;
     right: 12px;
     height: 9px;
@@ -278,37 +278,37 @@
     top: 3px;
 }
 
-#winamp2-js #playlist-window-shade {
+#webamp #playlist-window-shade {
     height: 14px;
 }
 
-#winamp2-js #playlist-window-shade .left {
+#webamp #playlist-window-shade .left {
     height: 14px;
     background-repeat: no-repeat;
 }
 
-#winamp2-js #playlist-window-shade .right {
+#webamp #playlist-window-shade .right {
     height: 14px;
     background-repeat: no-repeat;
     background-position-x: right;
 }
 
-#winamp2-js #playlist-window #playlist-scroll-up-button,
-#winamp2-js #playlist-window #playlist-scroll-down-button {
+#webamp #playlist-window #playlist-scroll-up-button,
+#webamp #playlist-window #playlist-scroll-down-button {
     position: absolute;
     width: 8px;
     height: 5px;
     right: 7px;
 }
 
-#winamp2-js #playlist-window #playlist-scroll-up-button {
+#webamp #playlist-window #playlist-scroll-up-button {
     top: 2px;
 }
-#winamp2-js #playlist-window #playlist-scroll-down-button {
+#webamp #playlist-window #playlist-scroll-down-button {
     top: 8px;
 }
 
-#winamp2-js #playlist-window-shade #playlist-resize-target {
+#webamp #playlist-window-shade #playlist-resize-target {
     position: absolute;
     right: 20px;
     top: 3px;
@@ -316,13 +316,13 @@
     width: 9px;
 }
 
-#winamp2-js #playlist-shade-track-title {
+#webamp #playlist-shade-track-title {
     position: absolute;
     top: 4px;
     left: 5px;
 }
 
-#winamp2-js #playlist-shade-time {
+#webamp #playlist-shade-time {
     position: absolute;
     top: 4px;
     right: 30px;
diff --git a/css/winamp.css b/css/winamp.css
index 7a318c68..3dc89669 100644
--- a/css/winamp.css
+++ b/css/winamp.css
@@ -8,36 +8,36 @@ canvas {
 }
 
 /* Range input css reset */
-#winamp2-js input[type="range"] {
+#webamp input[type="range"] {
     -webkit-appearance: none;
     margin: 0;
     padding: 0;
     background: none;
     border: none;
 }
-#winamp2-js input[type="range"]::-webkit-slider-thumb {
+#webamp input[type="range"]::-webkit-slider-thumb {
     -webkit-appearance: none;
     border: none;
     border-radius: 0;
     background: none;
 }
-#winamp2-js input[type="range"]::-moz-range-thumb {
+#webamp input[type="range"]::-moz-range-thumb {
     border: none;
     border-radius: 0;
     background: none;
 }
-#winamp2-js input[type="range"]::-moz-range-track {
+#webamp input[type="range"]::-moz-range-track {
     border: none;
     background: none;
 }
-#winamp2-js input[type="range"]:focus {
+#webamp input[type="range"]:focus {
     outline: none;
 }
-#winamp2-js input[type="range"]::-moz-focus-outer {
+#webamp input[type="range"]::-moz-focus-outer {
     border: 0;
 }
 
-#winamp2-js a:focus {
+#webamp a:focus {
     outline: none;
 }
 
@@ -65,7 +65,7 @@ canvas {
     }
 }
 
-#winamp2-js .character {
+#webamp .character {
     display: inline-block;
     vertical-align: top;
     width: 5px;
@@ -74,7 +74,7 @@ canvas {
     text-indent: -9999px;
 }
 
-#winamp2-js .window {
+#webamp .window {
     position: absolute;
     /* Ask the browser to scale showing large pixels if possible */
     image-rendering: -moz-crisp-edges; /* Firefox */
@@ -84,11 +84,11 @@ canvas {
     -ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
 }
 
-#winamp2-js .window {
+#webamp .window {
     /* Work around rendering bug with clip-path */
     -webkit-transform: translateZ(0);
 }
-#winamp2-js .window.doubled {
+#webamp .window.doubled {
     -moz-transform: translateZ(0) scale(2);
     -moz-transform-origin: top left;
     -webkit-transform: translateZ(0) scale(2);
diff --git a/docs/architecture.md b/docs/architecture.md
index 72fa9d24..1c576ad7 100644
--- a/docs/architecture.md
+++ b/docs/architecture.md
@@ -43,7 +43,7 @@ The parsing of skin files is handed in [skinParser.js](../js/skinParser.js). Ren
 
 ## CSS
 
-CSS style sheets are imported by the components which use them. Each rule is individually prefixed with the id `#winamp2-js` to prevent our style rules from "leaking" out onto other potential elements. For example, [98.js.org], includes Webamp on a page along with many other elements, and we want to be sure our rules for `.selected` elements do not apply to any elements outside of `#winamp2-js`.
+CSS style sheets are imported by the components which use them. Each rule is individually prefixed with the id `#webamp` to prevent our style rules from "leaking" out onto other potential elements. For example, [98.js.org], includes Webamp on a page along with many other elements, and we want to be sure our rules for `.selected` elements do not apply to any elements outside of `#webamp`.
 
 The nature of Winamp skins is such that most elements are absolutely positioned, and have an explicit size. There are a few down sides to our current approach:
 
diff --git a/docs/usage.md b/docs/usage.md
index cbdc5b1d..e9b01f2f 100644
--- a/docs/usage.md
+++ b/docs/usage.md
@@ -222,7 +222,7 @@ unsubscribe();
 ## Notes
 
 * Internet Explorer is not supported.
-* Webamp injects CSS into the page. The CSS is namespaced (every CSS selector is prefixed with `#winamp2-js`), so it should not interfere with anything on the host page.
+* Webamp injects CSS into the page. The CSS is namespaced (every CSS selector is prefixed with `#webamp`), so it should not interfere with anything on the host page.
 * Webamp HTML contains somewhat generic IDs and class names. If you have CSS on your page that is not namespaced, it may accidently be applied to Webamp. If this happens please reach out. I may be able to resolve it.
 * Skin and audio URLs are subject to [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS). Please ensure they are either served from the same domain, or that the other domain is served with the correct headers.
 * Please reach out to me. I'd love to help you set it up, and understand how it's being used. I plan to expand this API as I learn how people want to use it.
diff --git a/js/components/App.js b/js/components/App.js
index 456dc26b..16926db3 100644
--- a/js/components/App.js
+++ b/js/components/App.js
@@ -41,7 +41,7 @@ const App = ({
     );
   });
   return (
-    <div role="application" id="winamp2-js">
+    <div role="application" id="webamp">
       <Skin />
       <WindowManager windows={windows} container={container} />
     </div>
diff --git a/js/components/Skin.js b/js/components/Skin.js
index 0c05f3ed..5370c43a 100644
--- a/js/components/Skin.js
+++ b/js/components/Skin.js
@@ -6,6 +6,8 @@ import { connect } from "react-redux";
 import { LETTERS } from "../constants";
 import { imageSelectors, cursorSelectors } from "../skinSelectors";
 
+const CSS_PREFIX = "#webamp";
+
 const mapRegionNamesToIds = {
   normal: "mainWindowClipPath",
   windowshade: "shadeMainWindowClipPath",
@@ -85,7 +87,7 @@ const Skin = props => {
     if (imageUrl) {
       imageSelectors[imageName].forEach(selector => {
         cssRules.push(
-          `#winamp2-js ${selector} {background-image: url(${imageUrl})}`
+          `${CSS_PREFIX} ${selector} {background-image: url(${imageUrl})}`
         );
       });
     }
@@ -97,10 +99,10 @@ const Skin = props => {
       const selectedWidth =
         skinGenLetterWidths[`GEN_LETTER_SELECTED_${letter}`];
       cssRules.push(
-        `#winamp2-js .gen-text-${letter.toLowerCase()} {width: ${width}px;}`
+        `${CSS_PREFIX} .gen-text-${letter.toLowerCase()} {width: ${width}px;}`
       );
       cssRules.push(
-        `#winamp2-js .selected .gen-text-${letter.toLowerCase()} {width: ${selectedWidth}px;}`
+        `${CSS_PREFIX} .selected .gen-text-${letter.toLowerCase()} {width: ${selectedWidth}px;}`
       );
     });
   }
@@ -109,7 +111,7 @@ const Skin = props => {
     if (cursorUrl) {
       cursorSelectors[cursorName].forEach(selector => {
         cssRules.push(
-          `#winamp2-js ${selector} {cursor: url(${cursorUrl}), auto}`
+          `${CSS_PREFIX} ${selector} {cursor: url(${cursorUrl}), auto}`
         );
       });
     }
@@ -119,7 +121,7 @@ const Skin = props => {
     // This alternate number file requires that the minus sign be
     // formatted differently.
     cssRules.push(
-      "#winamp2-js .status #time #minus-sign { top: 0px; left: -1px; width: 9px; height: 13px; }"
+      `${CSS_PREFIX} .status #time #minus-sign { top: 0px; left: -1px; width: 9px; height: 13px; }`
     );
   }
 
@@ -129,7 +131,7 @@ const Skin = props => {
       const matcher = mapRegionNamesToMatcher[regionName];
       const id = mapRegionNamesToIds[regionName];
       clipPaths[id] = polygons;
-      cssRules.push(`#winamp2-js ${matcher} { clip-path: url(#${id}); }`);
+      cssRules.push(`${CSS_PREFIX} ${matcher} { clip-path: url(#${id}); }`);
     }
   }
   return (