Arreglando errores en script y diseño

3 files changed, 203 insertions, 103 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);
+}
+
+}
diff --git a/bairadio.js b/bairadio.js
index 2e1eafe..4ee1541 100644
--- a/bairadio.js
+++ b/bairadio.js
@@ -1,17 +1,24 @@
 var radionum = 0;
 
-function updateSelect() {
+function update(first) {
+  var first = first || false;
+  
   var req = new XMLHttpRequest();
   var url = "https://bienvenidoainternet.org:8443";
   req.open("GET", url+"/status-json.xsl", true);
   req.send();
   req.onreadystatechange = function() {
     if (this.readyState === 4 && this.status === 200) {
+      if (first) { document.getElementById("status").textContent = ""; }
+
       var resp = JSON.parse(req.response);
       resp = resp.icestats.source;
       
+      if (radionum > resp.length) { radionum = 0; }
+
       var sel = document.getElementById("server_name");
-      sel.innerHTML = "";
+      sel.textContent = "";
+
       if (resp.length > 1) {
         for (var i = -1; ++i < resp.length;) {
           var o = document.createElement("option");
@@ -31,28 +38,9 @@ function updateSelect() {
         if (resp.server_description) {
           o.textContent += ": " + resp.server_description;
         }
+        o.defaultSelected = true;
         sel.appendChild(o);
       }
-    }
-  }
-}
-
-function update(first) {
-  var first = first || false;
-  
-  var req = new XMLHttpRequest();
-  var url = "https://bienvenidoainternet.org:8443";
-  req.open("GET", url+"/status-json.xsl", true);
-  req.send();
-  req.onreadystatechange = function() {
-    if (this.readyState === 4 && this.status === 200) {
-      if (first) { document.getElementById("status").textContent = ""; }
-
-      var resp = JSON.parse(req.response);
-      resp = resp.icestats.source;
-      if (resp.length > 1) {
-        resp = resp[radionum];
-      }
       
       var audio = document.getElementById("stream");
       resp.listenurl = resp.listenurl.replace("http://bienvenidoainternet.org:8000", "https://bienvenidoainternet.org:8443");
@@ -63,53 +51,53 @@ function update(first) {
       
       var current = document.getElementById("artist").textContent + document.getElementById("title").textContent;
       
+      var artist = document.getElementById("artist");
       if (resp.artist) {
         resp.artist = resp.artist.trim();
-        var artist = document.getElementById("artist");
-        if (!artist.textContent.startsWith(resp.artist)) {
+        if (artist.textContent.slice(0,-3) != resp.artist) {
           artist.textContent = resp.artist + " - ";
         }
       } else {
-        document.getElementById("artist").textContent = "";
+        artist.textContent = "";
       }
 
+      var title = document.getElementById("title");
       if (resp.title) {
-        resp.title = resp.title.trim();
-        var title = document.getElementById("title");
-        if (title.textContent != resp.title) {
-          if (title.textContent != "" && title.textContent != resp.title) {
-            var history = document.getElementById("history");
-            history.innerHTML += '<div class="pastsong">' + current + '</div>';
-            history.scrollTop = history.scrollHeight;
-          }
-          
-          title.textContent = resp.title;
-          document.title = resp.title + ((resp.artist) ? (" - "+resp.artist) : "") + " @ Radio B.a.I.";
-          
-          checkLong();
-        }
+        resp.title = String(resp.title).trim();
       } else {
-        document.getElementById("title").textContent = "(Sin título)";
-        document.title = "(Sin título) @ Radio B.a.I.";
+        resp.title = "(Sin título)";
       }
-      
+      if (title.textContent != resp.title) {
+        var history = document.getElementById("history");
+        history.innerHTML += '<div class="pastsong">' + current + '</div>';
+        history.scrollTop = history.scrollHeight;
+        
+        title.textContent = resp.title;
+        document.title = resp.title + " @ Radio B.a.I.";
+        
+        checkLong();
+      }
+
       if (resp.listeners) {
         var listeners = document.getElementById("listeners");
         if (listeners.textContent != resp.listeners) {
           listeners.textContent = resp.listeners;
         }
       }
-      
+
       if (resp["ice-bitrate"]) {
         var bitrate = document.getElementById("bitrate");
         if (bitrate.textContent != resp["ice-bitrate"]) {
           bitrate.textContent = resp["ice-bitrate"];
         }
       }
-      
+
       if (resp.audio_samplerate) {
         var audio_samplerate = document.getElementById("audio_samplerate");
-        audio_samplerate.textContent = Math.round(resp.audio_samplerate / 1000);
+        var khz = Math.round(resp.audio_samplerate / 1000);
+        if (audio_samplerate.textContent != khz) {
+          audio_samplerate.textContent = khz;
+        }
       }
     }
   }
@@ -129,51 +117,55 @@ function startVisualization() {
     anal.getByteFrequencyData(freq);
     
     var vis = document.getElementById("vis");
-    vis.innerHTML = "";
+    vis.textContent = "";
     var div = 3;
     
+    var svgns = "http://www.w3.org/2000/svg";
     for (var i = 0; i < 900; i += 20) {
       var h = (freq[i] / div);
-      vis.innerHTML += '<rect class="bar"' +
-        'height="' + h + '" ' +
-        'width="1"' +
-        'x="' + (i / 10) + '" ' +
-        'y="' + ((255 / div) - h) + '" />';
+      var rect = document.createElementNS(svgns, "rect");
+      rect.setAttributeNS(null, "x", (i / 10));
+      rect.setAttributeNS(null, "y", ((255 / div) - h));
+      rect.setAttributeNS(null, "height", h);
+      rect.setAttributeNS(null, "width", "1");
+      rect.setAttributeNS(null, "class", "bar");
+      vis.appendChild(rect);
     }
   }
-  
+
   renderVis();
 }
 
 function checkLong() {
+  var cont = document.getElementById("nowplaying");
   var strip = document.getElementById("nowplaying-txt");
   
   var marquee = document.getElementById("marqueeStyle");
   if (marquee) marquee.parentElement.removeChild(marquee);
   
-  if (strip.clientWidth > 480) { // #nowplaying width = 480px
-    var travel = strip.clientWidth - 475;
+  var ws = strip.clientWidth;
+  var wc = cont.clientWidth
+  if (ws > wc) {
+    var travel = ws - (wc-5);
     var style = document.createElement("style");
     style.id = "marqueeStyle";
-    style.textContent = "#nowplaying-txt {animation: marquee " + Math.round(travel/10) + "s linear infinite;}";
-    style.textContent += "@keyframes marquee {";
-    style.textContent += "10% { transform: translateX(0); }";
-    style.textContent += "45% { transform: translateX(-" + travel + "px); }";
-    style.textContent += "55% { transform: translateX(-" + travel + "px); }";
-    style.textContent += "90% { transform: translateX(0); }";
-    style.textContent += "}";
+    var dur = Math.round(travel/10);
+    if (dur < 3) { dur++; }
+    style.textContent = "#nowplaying-txt {\n -webkit-animation: marquee " + dur + "s linear infinite;\n animation: marquee " + dur + "s linear infinite;\n}\n";
+    style.textContent += "@-webkit-keyframes marquee {\n 10% { transform: translateX(0); }\n 45% { transform: translateX(-" + travel + "px); }\n 55% { transform: translateX(-" + travel + "px); }\n 90% { transform: translateX(0); }\n}\n";
+    style.textContent += "@keyframes marquee {\n 10% { transform: translateX(0); }\n 45% { transform: translateX(-" + travel + "px); }\n 55% { transform: translateX(-" + travel + "px); }\n 90% { transform: translateX(0); }\n}";
     document.getElementsByTagName("head")[0].appendChild(style);
   }
 }
 
 function playPause() {
   var radio = document.getElementById("stream");
-  var vis = document.getElementById("vis");
+  var stat = document.getElementById("control");
   if (radio.paused) {
     radio.play();
-    vis.removeAttribute("class")
+    stat.setAttribute("class", "playing");
   } else {
-    vis.setAttribute("class", "show-play-btn");
+    stat.setAttribute("class", "paused");
     radio.pause();
   }
 }
@@ -204,13 +196,15 @@ function changeVolume(e) {
 
 function collapseHistory() {
   var box = document.getElementById("box-history");
-  
+  var cont = document.getElementById("history").parentElement;
   if (box.className == "outer") {
     box.classList.add("collapse");
+    cont.style.width = (box.clientWidth - document.getElementById("box-history-title").clientWidth - 14) + "px";
   } else {
+    cont.removeAttribute("style");
     box.classList.remove("collapse");
   }
-  
+  box.scrollTop = box.scrollHeight;
   removeSel();
 }
 
@@ -238,11 +232,10 @@ function removeSel() {
 
 var chatConnected = false;
 var antiFlood = false;
-const chatMaxChar = 80;
 const chatFloodTime = 1100;
 
 function connect() {
-  sock = new WebSocket("wss://tv.bienvenidoainternet.org/daemon/");
+  sock = new WebSocket("wss://radio.bienvenidoainternet.org/daemon/");
   sock.addEventListener("open", function(e) {
     addMsg("Conectado al chat.");
     chatConnected = true;
@@ -283,7 +276,7 @@ function checkSend(e) {
   if (antiFlood) return;
   
   var msgField = document.getElementById("msg_type");
-  var msg = msgField.value.trim().substr(0, chatMaxChar);
+  var msg = msgField.value.trim();
   if (!msg) return;
   
   if (chatConnected) {
@@ -327,16 +320,14 @@ function addMsg(msg) {
 }
 
 document.addEventListener("DOMContentLoaded", function() {
-  document.getElementById("vis").addEventListener("click", playPause);
+  document.getElementById("control").addEventListener("click", playPause);
   document.getElementById("volume").addEventListener("mousedown", changeVolume);
   document.getElementById("server_name").addEventListener("change", function(e) { radionum = this.value; });
   document.getElementById("box-history-title").addEventListener("dblclick", collapseHistory);
   document.getElementById("resize").addEventListener("mousedown", resizeChat);
 
   update(true);
-  updateSelect();
   startVisualization();
-  setInterval(update, 1000);
-  setInterval(updateSelect, 10000);
+  setInterval(update, 1500);
   connect();
 });
diff --git a/radio.html b/index.html
index f24bfbc..c7b955d 100644
--- a/radio.html
+++ b/index.html
@@ -2,7 +2,8 @@
 <html lang="es-ES">
 <head>
   <meta charset="utf-8">
-  <title>Radio @ Bienvenido a Internet</title>
+  <title>Radio B.a.I.</title>
+  <meta name="description" content="La radio de Bienvenido a Internet." />
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="shortcut icon" href="favicon.ico" />
   <link rel="stylesheet" href="bairadio.css" title="Radio B.a.I." />
@@ -14,10 +15,13 @@
   <div id="box-main" class="outer">
     <div class="inner">
       <div id="main" class="content">
-        <div id="vis-cont" class="box"><svg id="vis" class="show-play-btn"></svg></div>
+        <div id="vis-cont" class="box">
+          <div id="control" class="stopped"></div>
+          <svg id="vis"></svg>
+        </div>
         <div class="main-sep"></div>
         <div id="main-cont">
-          <audio id="stream" src="https://bienvenidoainternet.org:8443/bai.ogg"></audio>
+          <audio id="stream" src="https://bienvenidoainternet.org:8443/bai.ogg" crossorigin="anonymous"></audio>
           <div class="line">
             <div id="nowplaying" class="box">
               <div id="nowplaying-txt"><span id="artist"></span><span id="title"></span><span id="status">*** La radio está OFFLINE ***</span></div>
@@ -25,7 +29,7 @@
           </div>
           <div id="details">
             <div class="line">
-              <div class="block">Show:<select id="server_name" class="box"></select></div>
+              <div id="server_name-cont" class="block"><span>Show:</span><select id="server_name" class="box"></select></div>
             </div>
             <div class="line">
               <div class="block">Volumen:<span id="volume" class="box">100</span></div>
@@ -39,7 +43,7 @@
     </div>
   </div>
   
-  <br>
+  <div class="sep"></div>
 
   <div id="box-history" class="outer">
     <div class="inner">
@@ -50,7 +54,7 @@
     </div>
   </div>
   
-  <br>
+  <div class="sep"></div>
 
   <div id="box-chat" class="outer chat">
     <div class="inner">
@@ -58,7 +62,7 @@
       <div class="content">
         <div id="chat-all" class="box"></div>
           <form autocomplete="off" id="msg_cont">
-            <input id="msg_type" type="text" placeholder="Escribe un mensaje aquí" autofocus="autofocus" />
+            <input id="msg_type" type="text" placeholder="Escribe un mensaje aquí" maxlength="256" autofocus="autofocus" />
             <input id="msg_send" value="Enviar" type="submit" disabled="disabled" />
           </form>
         <span id="resize"></span>
@@ -66,11 +70,11 @@
     </div>
   </div>
   
-  <br>
+  <div class="sep"></div>
 
   <div id="footer">
     <a href="/bai.ogg.m3u" target="_blank">Archivo M3U</a> ★
     <a href="/bai.ogg.xspf" target="_blank">Archivo XSPF</a> ★
-    Bienvenido a Internet ★ 2010-2020
+    <a href="https://bienvenidoainternet.org/" target="_blank">Bienvenido a Internet</a> ★ 2010-2020
   </div>
 </body>