Arreglando errores en script y diseño

1 files changed, 126 insertions, 21 deletions

diff --git a/bairadio.css b/bairadio.css
index 369c386..8b8c26d 100644
--- a/bairadio.css
+++ b/bairadio.css
@@ -3,7 +3,7 @@
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   word-wrap: break-word;
-  cursor: url(data:image/x-win-bitmap;base64,AAACAAEAICAAAAAAAADoAgAAFgAAACgAAAAgAAAAQAAAAAEABAAAAAAAgAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAACAAAAAgIAAgAAAAIAAgACAgAAAgICAAMDAwAAAAP8AAP8AAAD//wD/AAAA/wD/AP//AAD///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB4gAAAAAAAAAAAAAAAAAAAf4AAAAAAAAAAAAAAAAAAB/gAAAAAAAAAAAAAAAAAAAf4AAAAAAAAAAAAAAAAcAB/gAAAAAAAAAAAAAAAAHgAf4AAAAAAAAAAAAAAAAB/gPgAAAAAAAAAAAAAAAAAf/gAAAAAAAAAAAAAAAAAAH//iIiAAAAAAAAAAAAAAAB//4iIAAAAAAAAAAAAAAAAf/iIgAAAAAAAAAAAAAAAAH/4iAAAAAAAAAAAAAAAAAB/iIAAAAAAAAAAAAAAAAAAf4gAAAAAAAAAAAAAAAAAAHiAAAAAAAAAAAAAAAAAAAB4AAAAAAAAAAAAAAAAAAAAcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD//////////////////////////////////////////////////////////////////////j////w////8P///+H///3h///8w////EP///wH///8AH///AD///wB///8A////Af///wP///8H////D////x////8/////f////w==),auto;
+  cursor: url("data:image/x-win-bitmap;base64,AAACAAEAICAAAAAAAADoAgAAFgAAACgAAAAgAAAAQAAAAAEABAAAAAAAgAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAACAAAAAgIAAgAAAAIAAgACAgAAAgICAAMDAwAAAAP8AAP8AAAD//wD/AAAA/wD/AP//AAD///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB4gAAAAAAAAAAAAAAAAAAAf4AAAAAAAAAAAAAAAAAAB/gAAAAAAAAAAAAAAAAAAAf4AAAAAAAAAAAAAAAAcAB/gAAAAAAAAAAAAAAAAHgAf4AAAAAAAAAAAAAAAAB/gPgAAAAAAAAAAAAAAAAAf/gAAAAAAAAAAAAAAAAAAH//iIiAAAAAAAAAAAAAAAB//4iIAAAAAAAAAAAAAAAAf/iIgAAAAAAAAAAAAAAAAH/4iAAAAAAAAAAAAAAAAAB/iIAAAAAAAAAAAAAAAAAAf4gAAAAAAAAAAAAAAAAAAHiAAAAAAAAAAAAAAAAAAAB4AAAAAAAAAAAAAAAAAAAAcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD//////////////////////////////////////////////////////////////////////j////w////8P///+H///3h///8w////EP///wH///8AH///AD///wB///8A////Af///wP///8H////D////x////8/////f////w=="),auto;
 }
 
 html, body {
@@ -17,17 +17,21 @@ html, body {
 }
 
 a, a:visited, a:hover {
-  color: #3833a1;
+  color: #fff;
 }
 
 a:active {
-  color: #f00;
+  color: #3833a1;
 }
 
 h1 {
   margin: 16px 0;
 }
 
+.sep {
+  display: block;
+}
+
 .outer {
   border: 1px solid #0d0d14;
   background: #13141d;
@@ -87,6 +91,10 @@ h1 {
   align-items: center;
 }
 
+.collapse .boxtitle {
+  float: left;
+}
+
 .collapse .content {
   border: 0;
   box-shadow: none;
@@ -98,19 +106,23 @@ h1 {
   padding: 0;
 }
 
-#box-history.collapse .content {
-  width: 400px;
-}
-
 .collapse #history {
   height: 1.4em;
   overflow-y: hidden;
 }
 
+.collapse .pastsong {
+  display: none;
+}
+
 .collapse .pastsong:hover {
   background: none;
 }
 
+.collapse .pastsong:last-child {
+  display: block;
+}
+
 #main {
   display: flex;
   display: -moz-flex;
@@ -140,19 +152,13 @@ h1 {
   width: 482px;
   white-space: nowrap;
   overflow: hidden;
-  padding: 4px 2px;
+  padding: 4px 0 4px 4px;
 }
 
 #nowplaying-txt {
   display: inline-block;
 }
 
-#nowplaying-txt:hover {
-  animation-play-state: paused;
-  -moz-animation-play-state: paused;
-  -webkit-animation-play-state: paused;
-}
-
 #artist {
   font-weight: bold;
 }
@@ -166,12 +172,16 @@ h1 {
   padding: 1px 2px;
 }
 
+#server_name-cont .box {
+  margin: 0;
+}
+
 #server_name {
-  max-width: 450px;
+  max-width: 400px;
 }
 
 #volume {
-  cursor: url(data:image/x-win-bitmap;base64,AAACAAEAICAAAAAAAADoAgAAFgAAACgAAAAgAAAAQAAAAAEABAAAAAAAgAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAACAAAAAgIAAgAAAAIAAgACAgAAAwMDAAICAgAAAAP8AAP8AAAD//wD/AAAA/wD/AP//AAD///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACHcAAAAAAAAAAAAAAAAAAAj3AAAAAAAAAAAAAAAAAACPcAAHAAAAAHAAAAAAAAAAj3AAdwAHcAB3AAAAAAgACPcAAP8AD/AA/wAAAAAIcAj3AAAPAAAAAPAAAAAACPcPcAAAAAAAAAAAAAAAAAj/cAAAAAAAAAAAAAAAAAAI//d3dwAAAAAAAAAAAAAACP/3d3AAAAAAAAAAAAAAAAj/d3cAAAAAAAAAAAAAAAAI/3dwAAAAAAAAAAAAAAAACPd3AAAAAAAAAAAAAAAAAAj3cAAAAAAAAAAAAAAAAAAIdwAAAAAAAAAAAAAAAAAACHAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD//////////////////////////////////////////////////////////////////////j////w////8M/P/+GMx/3hCEP8wwhD/EOMx/wHz8/8AH///AD///wB///8A////Af///wP///8H////D////x////8/////f////w==),auto;
+  cursor: url("data:image/x-win-bitmap;base64,AAACAAEAICAAAAAAAADoAgAAFgAAACgAAAAgAAAAQAAAAAEABAAAAAAAgAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAACAAAAAgIAAgAAAAIAAgACAgAAAwMDAAICAgAAAAP8AAP8AAAD//wD/AAAA/wD/AP//AAD///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACHcAAAAAAAAAAAAAAAAAAAj3AAAAAAAAAAAAAAAAAACPcAAHAAAAAHAAAAAAAAAAj3AAdwAHcAB3AAAAAAgACPcAAP8AD/AA/wAAAAAIcAj3AAAPAAAAAPAAAAAACPcPcAAAAAAAAAAAAAAAAAj/cAAAAAAAAAAAAAAAAAAI//d3dwAAAAAAAAAAAAAACP/3d3AAAAAAAAAAAAAAAAj/d3cAAAAAAAAAAAAAAAAI/3dwAAAAAAAAAAAAAAAACPd3AAAAAAAAAAAAAAAAAAj3cAAAAAAAAAAAAAAAAAAIdwAAAAAAAAAAAAAAAAAACHAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD//////////////////////////////////////////////////////////////////////j////w////8M/P/+GMx/3hCEP8wwhD/EOMx/wHz8/8AH///AD///wB///8A////Af///wP///8H////D////x////8/////f////w=="),auto;
 }
 
 #history {
@@ -246,6 +256,9 @@ h1 {
   border-bottom: 1px solid #adb5c6;
   color: #2f374d;
   flex-shrink: 0;
+  -ms-flex-shrink: 0;
+  -moz-flex-shrink: 0;
+  -webkit-flex-shrink: 0;
   font-size: 10px;
   margin: 1px;
   padding: 0 4px;
@@ -277,18 +290,50 @@ h1 {
   width: 91px;
 }
 
-#vis {
+#vis, #control {
   display: block;
   height: 85px;
   width: 85px;
 }
 
-#vis.show-play-btn {
-  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAZCAYAAADqrKTxAAABhGlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV9bS0VaBO0g4pChOrUgKuKoVShChVArtOpgcukXNGlIUlwcBdeCgx+LVQcXZ10dXAVB8APEydFJ0UVK/F9SaBHjwXE/3t173L0D/M0qU82ecUDVLCOTSgq5/KoQekUAQQwggrjETH1OFNPwHF/38PH1LsGzvM/9OSJKwWSATyCeZbphEW8QT29aOud94igrSwrxOXHcoAsSP3JddvmNc8lhP8+MGtnMPHGUWCh1sdzFrGyoxFPEMUXVKN+fc1nhvMVZrdZZ+578heGCtrLMdZojSGERSxAhQEYdFVRhIUGrRoqJDO0nPfzDjl8kl0yuChg5FlCDCsnxg//B727N4uSEmxROAsEX2/4YBUK7QKth29/Htt06AQLPwJXW8deawMwn6Y2OFjsC+reBi+uOJu8BlzvA0JMuGZIjBWj6i0Xg/Yy+KQ8M3gJ9a25v7X2cPgBZ6ip9AxwcAmMlyl73eHdvd2//nmn39wM5PnKQmgaw4AAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAuIwAALiMBeKU/dgAAAHFJREFUOMud1EsOwCAIBNBx7n9nu7GNH5CZslLMi6hEoKPDDAKAC/mNDMhlJkIeGQEyzBaQ6coF8lpHAlmeOoCU7niDlF90grT6Z8D2v/ecaGh0gbfTADqagIY2UKMA3FECcnQBMSrAiQSwIhHYv9AbD4kSHCjuBbjMAAAAAElFTkSuQmCC) no-repeat center;
+#control {
+  position: absolute;
+  z-index: 9;
+}
+
+.stopped {
+  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAABhGlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV9bpSIVBzOIOGSoulgQFemoVShChVArtOpgcukXNGlIUlwcBdeCgx+LVQcXZ10dXAVB8APEydFJ0UVK/F9SaBHjwXE/3t173L0Dgo0K06yuCUDTbTOdTIjZ3KoYfkUIYQgYQ1xmljEnSSn4jq97BPh6F+NZ/uf+HH1q3mJAQCSeZYZpE28Qz2zaBud9YoGVZJX4nHjcpAsSP3Jd8fiNc9HlIM8UzEx6nlggFosdrHQwK5ka8TRxVNV0yg9mPVY5b3HWKjXWuid/YSSvryxzneYwkljEEiSIUFBDGRXYiNGqk2IhTfsJH/+Q65fIpZCrDEaOBVShQXb94H/wu1urMDXpJUUSQPeL43yMAOFdoFl3nO9jx2meAKFn4Epv+6sNIP5Jer2tRY+A/m3g4rqtKXvA5Q4w+GTIpuxKIZrBQgF4P6NvygEDt0Dvmtdbax+nD0CGukrdAAeHwGiRstd93t3T2du/Z1r9/QCiCHK6f7dKfwAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAuIwAALiMBeKU/dgAAACZJREFUSMftzUEBACAMAKHT/p23FPqCApym6bHbBxKJRCKRSCSSFqHqAjAKrwD1AAAAAElFTkSuQmCC") no-repeat center;
+}
+
+.playing {
+  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAZCAYAAADqrKTxAAABhGlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV9bS0VaBO0g4pChOrUgKuKoVShChVArtOpgcukXNGlIUlwcBdeCgx+LVQcXZ10dXAVB8APEydFJ0UVK/F9SaBHjwXE/3t173L0D/M0qU82ecUDVLCOTSgq5/KoQekUAQQwggrjETH1OFNPwHF/38PH1LsGzvM/9OSJKwWSATyCeZbphEW8QT29aOud94igrSwrxOXHcoAsSP3JddvmNc8lhP8+MGtnMPHGUWCh1sdzFrGyoxFPEMUXVKN+fc1nhvMVZrdZZ+578heGCtrLMdZojSGERSxAhQEYdFVRhIUGrRoqJDO0nPfzDjl8kl0yuChg5FlCDCsnxg//B727N4uSEmxROAsEX2/4YBUK7QKth29/Htt06AQLPwJXW8deawMwn6Y2OFjsC+reBi+uOJu8BlzvA0JMuGZIjBWj6i0Xg/Yy+KQ8M3gJ9a25v7X2cPgBZ6ip9AxwcAmMlyl73eHdvd2//nmn39wM5PnKQmgaw4AAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAuIwAALiMBeKU/dgAAAHFJREFUOMud1EsOwCAIBNBx7n9nu7GNH5CZslLMi6hEoKPDDAKAC/mNDMhlJkIeGQEyzBaQ6coF8lpHAlmeOoCU7niDlF90grT6Z8D2v/ecaGh0gbfTADqagIY2UKMA3FECcnQBMSrAiQSwIhHYv9AbD4kSHCjuBbjMAAAAAElFTkSuQmCC") no-repeat center;
+  animation: fade 1s ease-in 1;
+  -webkit-animation: fade 1s ease-in 1;
+  -moz-animation: fade 1s ease-in 1;
+  animation-fill-mode: forwards;
+  -webkit-animation-fill-mode: forwards;
+  -moz-animation-fill-mode: forwards;
+}
+
+@-webkit-keyframes fade {
+    0% { opacity: 1; }	
+  100% { opacity: 0; }	
+}
+@-moz-keyframes fade {
+    0% { opacity: 1; }	
+  100% { opacity: 0; }	
+}
+@keyframes fade {
+    0% { opacity: 1; }	
+  100% { opacity: 0; }	
+}
+
+.paused {
+  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAABhGlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV9bpSIVBzOIOGSoulgQFemoVShChVArtOpgcukXNGlIUlwcBdeCgx+LVQcXZ10dXAVB8APEydFJ0UVK/F9SaBHjwXE/3t173L0Dgo0K06yuCUDTbTOdTIjZ3KoYfkUIYQgYQ1xmljEnSSn4jq97BPh6F+NZ/uf+HH1q3mJAQCSeZYZpE28Qz2zaBud9YoGVZJX4nHjcpAsSP3Jd8fiNc9HlIM8UzEx6nlggFosdrHQwK5ka8TRxVNV0yg9mPVY5b3HWKjXWuid/YSSvryxzneYwkljEEiSIUFBDGRXYiNGqk2IhTfsJH/+Q65fIpZCrDEaOBVShQXb94H/wu1urMDXpJUUSQPeL43yMAOFdoFl3nO9jx2meAKFn4Epv+6sNIP5Jer2tRY+A/m3g4rqtKXvA5Q4w+GTIpuxKIZrBQgF4P6NvygEDt0Dvmtdbax+nD0CGukrdAAeHwGiRstd93t3T2du/Z1r9/QCiCHK6f7dKfwAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAACtJREFUSMftzTEBAAAIhEC0f+e3gW5OEIArQtgr7tZH85CIiIiIiIiIiAgDN6QDMKZ8V40AAAAASUVORK5CYII=") no-repeat center;
 }
 
 #resize {
-   background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAABhGlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV9bS0VaBO0g4pChOrUgKuKoVShChVArtOpgcukXNGlIUlwcBdeCgx+LVQcXZ10dXAVB8APEydFJ0UVK/F9SaBHjwXE/3t173L0D/M0qU82ecUDVLCOTSgq5/KoQekUAQQwggrjETH1OFNPwHF/38PH1LsGzvM/9OSJKwWSATyCeZbphEW8QT29aOud94igrSwrxOXHcoAsSP3JddvmNc8lhP8+MGtnMPHGUWCh1sdzFrGyoxFPEMUXVKN+fc1nhvMVZrdZZ+578heGCtrLMdZojSGERSxAhQEYdFVRhIUGrRoqJDO0nPfzDjl8kl0yuChg5FlCDCsnxg//B727N4uSEmxROAsEX2/4YBUK7QKth29/Htt06AQLPwJXW8deawMwn6Y2OFjsC+reBi+uOJu8BlzvA0JMuGZIjBWj6i0Xg/Yy+KQ8M3gJ9a25v7X2cPgBZ6ip9AxwcAmMlyl73eHdvd2//nmn39wM5PnKQmgaw4AAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAuIwAALiMBeKU/dgAAAGFJREFUCNdlzMENAjEMRNGflLMXQCJ7xem/CM9UYg6bIAS+vj9uxzGhit8b56M6AK39gZX0VgtWsCElOsAOviFi0j+LcS9bSCZiYiW9KJ7nrWyjFK8IbF1vx9iQC64oYvIGzlo/pBk1ZaEAAAAASUVORK5CYII=) no-repeat center;
+   background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAABhGlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV9bS0VaBO0g4pChOrUgKuKoVShChVArtOpgcukXNGlIUlwcBdeCgx+LVQcXZ10dXAVB8APEydFJ0UVK/F9SaBHjwXE/3t173L0D/M0qU82ecUDVLCOTSgq5/KoQekUAQQwggrjETH1OFNPwHF/38PH1LsGzvM/9OSJKwWSATyCeZbphEW8QT29aOud94igrSwrxOXHcoAsSP3JddvmNc8lhP8+MGtnMPHGUWCh1sdzFrGyoxFPEMUXVKN+fc1nhvMVZrdZZ+578heGCtrLMdZojSGERSxAhQEYdFVRhIUGrRoqJDO0nPfzDjl8kl0yuChg5FlCDCsnxg//B727N4uSEmxROAsEX2/4YBUK7QKth29/Htt06AQLPwJXW8deawMwn6Y2OFjsC+reBi+uOJu8BlzvA0JMuGZIjBWj6i0Xg/Yy+KQ8M3gJ9a25v7X2cPgBZ6ip9AxwcAmMlyl73eHdvd2//nmn39wM5PnKQmgaw4AAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAuIwAALiMBeKU/dgAAAGFJREFUCNdlzMENAjEMRNGflLMXQCJ7xem/CM9UYg6bIAS+vj9uxzGhit8b56M6AK39gZX0VgtWsCElOsAOviFi0j+LcS9bSCZiYiW9KJ7nrWyjFK8IbF1vx9iQC64oYvIGzlo/pBk1ZaEAAAAASUVORK5CYII=") no-repeat center;
    float: right;
    position: relative;
    right: -10px;
@@ -297,7 +342,7 @@ h1 {
 }
 
 #resize:hover {
-  cursor: url(data:image/x-win-bitmap;base64,AAACAAEAICAAAAAAAADoAgAAFgAAACgAAAAgAAAAQAAAAAEABAAAAAAAgAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAACAAAAAgIAAgAAAAIAAgACAgAAAwMDAAICAgAAAAP8AAP8AAAD//wD/AAAA/wD/AP//AAD///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPcAAAAAAAAAAAAAAAAAAA/3cAAAAAAAAAAAAACHcAAAAAAAAAAAAAAAAAAAj3AAAAAAAAAAAAAAAAAACPcAAAAAAAAAAAAAAAAAAAj3AAAA9wAAAAAAAAAAgACPcAAAAPcAAAAAAAAAAIcAj3AAAAAAAAAAAAAAAACPcPcAAAAAAAAAAAAAAAAAj/cAAAAAAAAAAAAAAAAAAI//d3dwAA/3cAAAAAAAAACP/3d3AAAA9wAAAAAAAAAAj/d3cAAAAAAAAAAAAAAAAI/3dwAAAAAAAAAAAAAAAACPd3AAAAAAAAAAAAAAAAAAj3cAAAAAAAAAAAAAAAAAAIdwAAAAAAAAAAAAAAAAAACHAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD////////////////////////////////////////////////////////////8////+H///jA///wwP//8P///+Hz//3h4f/8w+H//EPz//wH///8AED//ADA//wB4f/8A/P//Af///wP///8H////D////x////8/////f////w==),auto;
+  cursor: url("data:image/x-win-bitmap;base64,AAACAAEAICAAAAAAAADoAgAAFgAAACgAAAAgAAAAQAAAAAEABAAAAAAAgAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAACAAAAAgIAAgAAAAIAAgACAgAAAwMDAAICAgAAAAP8AAP8AAAD//wD/AAAA/wD/AP//AAD///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPcAAAAAAAAAAAAAAAAAAA/3cAAAAAAAAAAAAACHcAAAAAAAAAAAAAAAAAAAj3AAAAAAAAAAAAAAAAAACPcAAAAAAAAAAAAAAAAAAAj3AAAA9wAAAAAAAAAAgACPcAAAAPcAAAAAAAAAAIcAj3AAAAAAAAAAAAAAAACPcPcAAAAAAAAAAAAAAAAAj/cAAAAAAAAAAAAAAAAAAI//d3dwAA/3cAAAAAAAAACP/3d3AAAA9wAAAAAAAAAAj/d3cAAAAAAAAAAAAAAAAI/3dwAAAAAAAAAAAAAAAACPd3AAAAAAAAAAAAAAAAAAj3cAAAAAAAAAAAAAAAAAAIdwAAAAAAAAAAAAAAAAAACHAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD////////////////////////////////////////////////////////////8////+H///jA///wwP//8P///+Hz//3h4f/8w+H//EPz//wH///8AED//ADA//wB4f/8A/P//Af///wP///8H////D////x////8/////f////w=="),auto;
 }
 
 .outer, #footer {
@@ -311,3 +356,63 @@ h1 {
 .bar {
   fill: #0f0;
 }
+
+@media(max-width:500px){
+body {
+  margin: 8px 0;
+  font-size: 14px;
+}
+
+h1, .sep {
+  display: none;
+}
+
+.outer {
+  display: block;
+  margin-bottom: 8px;
+  width: 100%;
+}
+
+#main {
+  flex-direction: column;
+  -moz-flex-direction: column;
+  -webkit-flex-direction: column;
+  text-align: center;
+}
+
+#vis-cont {
+  align-self: center;
+  -webkit-align-self: center;
+  margin-bottom: 4px;
+}
+
+#nowplaying {
+  width: 100%;
+}
+
+#server_name-cont {
+  display: flex;
+  display: -moz-flex;
+  display: -ms-flex;
+  display: -webkit-flex;
+}
+
+#server_name-cont span {
+  align-self: center;
+  -webkit-align-self: center;
+  padding-right: 2px;
+}
+
+#server_name {
+  max-width: 100%;
+  flex-grow: 1;
+  -ms-flex-grow: 1;
+  -moz-flex-grow: 1;
+  -webkit-flex-grow: 1;
+  width: 100%;
+  width: calc(100% - 50px);
+  width: -moz-calc(100% - 50px);
+  width: -webkit-calc(100% - 50px);
+}
+
+}