Merge pull request #137 from jcass77/enhance/cleanup_and_tweaks

General cleanup and small tweaks to volume slider & icon positions
2016-01-24 16:53:02 +00:00 · 2016-01-24 16:53:02 +00:00 · c9cec74f35
commit c9cec74f35
parent 2976e102d7 d1fbeef5ea
42 changed files with 160 additions and 16048 deletions
--- a/README.rst
+++ b/README.rst
@ -60,6 +60,9 @@ v2.0.1 (UNRELEASED)
 - Added link to `Alarm Clock <https://pypi.python.org/pypi/Mopidy-AlarmClock/>`_ (if present).
 - Added ability to save Queue as local Playlist.
 - Added ability to manually initiate refresh of Playlists.
+- Increase volume slider handle by 30% to make it easier to grab on mobile devices
+- Add application cache manifest file for quicker loads and to allow client devices to detect when local caches should be invalidated.
+- Fix vertical alignment of playback control buttons in footer.

 v2.0.0 (26-3-2015)
 ------------------
@ -74,13 +77,13 @@ v2.0.0 (26-3-2015)
 - Fixed wrong jQuery version on some pages.

 v1.0.4
-------------------
+------

 - Added AudioAddict icon
 - Bugfixes of course

 v1.0.2 
-------------------
+------

 - A friendlier welcome with a home page with buttons to the most used functions
 - Converted Radio Stations to Streams, so user can add streams for youtube, spotify, soundcloud, podcasts
@ -92,12 +95,12 @@ v1.0.2
 - Bugfixes (search, popups, etc)

 v1.0.1 (20-9-2014)
-------------------
+------------------

 - Small fixes for Pypi distro

 v1.0.0 (20-9-2014)
-------------------
+------------------

 - Compatible with Mopidy v0.19
 - Made pip installable
--- a/mopidy_musicbox_webclient/static/css/add2home.css
+++ b/mopidy_musicbox_webclient/static/css/add2home.css
@ -1,160 +0,0 @@
-/**
- *
- * Main container
- *
- */
-#addToHomeScreen {
-	z-index:9999;
-	-webkit-user-select:none;
-	user-select:none;
-	-webkit-box-sizing:border-box;
-	box-sizing:border-box;
-	-webkit-touch-callout:none;
-	touch-callout:none;
-	width:240px;
-	font-size:15px;
-	padding:12px 14px;
-	text-align:left;
-	font-family:helvetica;
-	background-image:-webkit-gradient(linear,0 0,0 100%,color-stop(0,#fff),color-stop(0.02,#eee),color-stop(0.98,#ccc),color-stop(1,#a3a3a3));
-	border:1px solid #505050;
-	-webkit-border-radius:8px;
-	-webkit-background-clip:padding-box;
-	color:#333;
-	text-shadow:0 1px 0 rgba(255,255,255,0.75);
-	line-height:130%;
-	-webkit-box-shadow:0 0 4px rgba(0,0,0,0.5);
-}
-
-#addToHomeScreen.addToHomeIpad {
-	width:268px;
-	font-size:18px;
-	padding:14px;
-}
-
-/**
- *
- * The 'wide' class is added when the popup contains the touch icon
- *
- */
-#addToHomeScreen.addToHomeWide {
-	width:296px;
-}
-
-#addToHomeScreen.addToHomeIpad.addToHomeWide {
-	width:320px;
-	font-size:18px;
-	padding:14px;
-}
-
-/**
- *
- * The balloon arrow
- *
- */
-#addToHomeScreen .addToHomeArrow {
-	position:absolute;
-	background-image:-webkit-gradient(linear,0 0,100% 100%,color-stop(0,rgba(204,204,204,0)),color-stop(0.4,rgba(204,204,204,0)),color-stop(0.4,#ccc));
-	border-width:0 1px 1px 0;
-	border-style:solid;
-	border-color:#505050;
-	width:16px; height:16px;
-	-webkit-transform:rotateZ(45deg);
-	bottom:-9px; left:50%;
-	margin-left:-8px;
-	-webkit-box-shadow:inset -1px -1px 0 #a9a9a9;
-	-webkit-border-bottom-right-radius:2px;
-}
-
-
-/**
- *
- * The balloon arrow for iPad
- *
- */
-#addToHomeScreen.addToHomeIpad .addToHomeArrow {
-	-webkit-transform:rotateZ(-135deg);
-	background-image:-webkit-gradient(linear,0 0,100% 100%,color-stop(0,rgba(238,238,238,0)),color-stop(0.4,rgba(238,238,238,0)),color-stop(0.4,#eee));
-	-webkit-box-shadow:inset -1px -1px 0 #fff;
-	top:-9px; bottom:auto; left:50%;
-}
-
-
-/**
- *
- * Close button
- *
- */
-#addToHomeScreen .addToHomeClose {
-	-webkit-box-sizing:border-box;
-	position:absolute;
-	right:4px;
-	top:4px;
-	width:18px;
-	height:18px; line-height:14px;
-	text-align:center;
-	text-indent:1px;
-	-webkit-border-radius:9px;
-	background:rgba(0,0,0,0.12);
-	color:#707070;
-	-webkit-box-shadow:0 1px 0 #fff;
-	font-size:16px;
-}
-
-
-/**
- *
- * The '+' icon, displayed only on iOS < 4.2
- *
- */
-#addToHomeScreen .addToHomePlus {
-	font-weight:bold;
-	font-size:1.3em;
-}
-
-
-/**
- *
- * The 'share' icon, displayed only on iOS >= 4.2
- *
- */
-#addToHomeScreen .addToHomeShare {
-	display:inline-block;
-	width:18px;
-	height:15px;
-	background-repeat:no-repeat;
-	background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAeCAQAAADu6HTYAAADPElEQVR4Xq3TX2gcRRzA8e/M7mVv2+TSNpc/TZtrY6jUGqgaSAmEChKLrYK0YH0RFC2CSCkEfCghiKU04J8qNigq6os+iQV98MHWFwVBrQQRWs21lBw5cw3NNb1/udu72RGG5Y77IzXW77D7sAwf5scyYoL6BGXSDKFZwaGpLvIUaeoCkvX1MmsM0Ny6oRSQYOLuIS+YZOpfQdqslpUxcZrzTVAz4qPwW2O3CeIwC/RSzeY6Ow1QhUrkr+YOWfEKDkEP8Rij7CHKJmrFSDHBdwGEE5wiGChPN+PnT8VdRtEIl1d4gRj/1EVe5ZSBKGh8iqQpo/Fo5+3C/gz0MYg4zgwbqday1/Q4B8BGQ45d/Hi54lakCrU5obOcidJpu1+Lg9whjabyaOYLnrIBFFaRD+xe2ybMDWY66GmP/WA9cGfGp0CWhy0wkMN8inepFiH2rV1j0NQSNQbFLRQnS8/8YSDBBpadfv4CYDub2fmeHDNAsL1MBWUel0iA+Xik6eHcyvD3vAMSU1TGuA/YRS+dD7ovCQN43GKRFCU20Kd3V/avDVVyAZ5niTEuLA5/zBGWg9EEEhfJKN200Tat8CmRAQb9+wv7soPlHt2tQorsz1uPbr0HTY4sJwrH47zJZwABBAKLMBoQXepwgTwdHCo+fXMkQ4lrxEmQ5AaXipPqDY9V2vn09tgvTPI71EEGYxM+/uMJLJ4svpgaWGKOi/xKgmqLSUGSUd5f2vIVJ/CgBaTIUsZ7ZBsn0+NzfMOXLFCXQyTcybN6ep5ZZgUOHn7jpfUpsZshdugPGf+E5zjbyHTSRyQ8xfRPPM/s63RHeuknSoT22mjmmnAOIMkUZ6D1xSfPPAfd1WFKM3sO2CMaHx8M1NjnXKHaAGGkOW0C02WeYHUz4qMtx+w5gUDS8NckYe5lHsMYwCZEPyEEmjLDZFmAS7CDviMdxyTkMNVBKEmYLvbiQQBIBBbCQG04bGQvFWz6CfsCQLWCigILFwcfkGYBiOpbYuOizTAyYyDdCtrGaRG1LCkIgMYEFhI0WqQZoSlbGRyHKe4qOx7iv2bVQW9dp4dlM/x6kmwnWQcd/Q3FCqwTEiT5s+6D5v/pb0SSHyg7uhMWAAAAAElFTkSuQmCC);
-	background-size:18px 15px;
-	text-indent:-9999em;
-	overflow:hidden;
-}
-
-#addToHomeScreen .addToHomeShare.addToHomeShareOS7 {
-	width:11px;
-	background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAA8CAYAAAAQTCjdAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAASCQAAEgkB80sG3AAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAKjSURBVGiB7dpPiFVVHMDxz7m9NCtMyI2bEJEC25WrEkzHUXCRraIwdNE8ZxfYIlcis1ZEbGEzT1QCF4XgH1CyWhUoJKIWNRGEiCNKmkSiYTzfcfGuOokx77x3ZlS8382959zfn+/invvn3RdijHIRBrwkOINCYXEcdjpb7VyiYdBsLScwt5y6IloYdzqXo36Ro0gY9IKWo+5JwmzBt2HQnBw9ehYNazyn5TBee8Dh+Vq+CWu92GufnkTDR6ab7gDeBNHouMM/l9tXTXM0fGBmL726Fg1Dam74EsvKqR8VNowL2Yzj5f7rnnE4DHq2235diYYhhTGfC94up35T0y+6di/ITU0rKVd+sEi0P7xr2pSJOu8zvF+OzqEv7vDH/WFxt7/cshy/ticsN8sXYUht0kXDOlsF9XJ4UaEvNoz9X3zc5bKaZThbyr5jzJ4wlNY7KTgM+ES0vhz+KeiPw36fKC/ucAF9uFBOrTZm26SJCtaV27+xIo7cXdkTEhvOoh+XyxprU1qnim7CQdGK2HAyKRexYVShT3RItDElN+mkjiP2Ym+S3f01hv2EVal5WW6hU0ElmptaqJuBpXg6MbeFH2LDpU6CQ93zWIKnEvs0cayGU3glMfkOo1jQYewZzOuyz7FC95Jwo5OgUFfgeg993hh/eTqCTxOSm/iuk8DY0Ap1b2GhtHXxsfZN4j/X0fOx4auEIknEhqv4OiUn1L13Z/+xWfWVaG4q0dxUormpRHNTieamEs1NJZqbJ1Q0jHvdiJo5S2cVjSNOCHZhn3/SnuYnIvl3yomIIz7MXZMn9hydRCrR3FSiualEc1OJ5qYSzU0lmptKNDePjWgwcPePT7/g+4cp8wCW4GXaryK3tL+mLdD5x62ppllgu7bso8q/2HIbzGWdNmWnSJwAAAAASUVORK5CYII=);
-	background-size:11px 15px;
-}
-
-/**
- *
- * The touch icon (if available)
- *
- */
-#addToHomeScreen .addToHomeTouchIcon {
-	display:block;
-	float:left;
-	-webkit-border-radius:6px;
-	border-radius:6px;
-	-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.5),
-		inset 0 0 2px rgba(255,255,255,0.9);
-	box-shadow:0 1px 3px rgba(0,0,0,0.5),
-		inset 0 0 2px rgba(255,255,255,0.9);
-	background-repeat:no-repeat;
-	width:57px; height:57px;
-	-webkit-background-size:57px 57px;
-	background-size:57px 57px;
-	margin:0 12px 0 0;
-	border:1px solid #333;
-	-webkit-background-clip:padding-box;
-	background-clip:padding-box;
-}
--- a/mopidy_musicbox_webclient/static/css/jquery.mobile-1.3.1.css
+++ b/mopidy_musicbox_webclient/static/css/jquery.mobile-1.3.1.css
--- a/mopidy_musicbox_webclient/static/css/jquery.mobile-1.3.1.min.css
+++ b/mopidy_musicbox_webclient/static/css/jquery.mobile-1.3.1.min.css
--- a/mopidy_musicbox_webclient/static/css/jquery.mobile-1.4.0-alpha.2.css
+++ b/mopidy_musicbox_webclient/static/css/jquery.mobile-1.4.0-alpha.2.css
--- a/mopidy_musicbox_webclient/static/css/jquery.mobile-1.4.0-alpha.2.min.css
+++ b/mopidy_musicbox_webclient/static/css/jquery.mobile-1.4.0-alpha.2.min.css
--- a/mopidy_musicbox_webclient/static/css/jquery.mobile.flatui.css
+++ b/mopidy_musicbox_webclient/static/css/jquery.mobile.flatui.css
@ -2451,9 +2451,9 @@ input.ui-input-text.ui-slider-input {
 	outline: 0;
 }
 .ui-slider-track.ui-mini .ui-slider-handle {
-	height: 14px;
-	width: 14px;
-	margin: -8px 0 0 -7px;
+	height: 22px;
+	width: 22px;
+	margin: -12px 0 0 -12px;
 }
 .ui-slider-handle .ui-btn-inner {
 	padding: 0;
--- a/mopidy_musicbox_webclient/static/css/jquery.mobile.flatui.min.css
+++ b/mopidy_musicbox_webclient/static/css/jquery.mobile.flatui.min.css
--- a/mopidy_musicbox_webclient/static/css/jquery.mobile.structure-1.3.1.css
+++ b/mopidy_musicbox_webclient/static/css/jquery.mobile.structure-1.3.1.css
--- a/mopidy_musicbox_webclient/static/css/jquery.mobile.structure-1.3.1.min.css
+++ b/mopidy_musicbox_webclient/static/css/jquery.mobile.structure-1.3.1.min.css
--- a/mopidy_musicbox_webclient/static/css/jquery.mobile.structure-1.4.0-alpha.2.css
+++ b/mopidy_musicbox_webclient/static/css/jquery.mobile.structure-1.4.0-alpha.2.css
--- a/mopidy_musicbox_webclient/static/css/jquery.mobile.structure-1.4.0-alpha.2.min.css
+++ b/mopidy_musicbox_webclient/static/css/jquery.mobile.structure-1.4.0-alpha.2.min.css
--- a/mopidy_musicbox_webclient/static/css/jquery.mobile.theme-1.3.1.css
+++ b/mopidy_musicbox_webclient/static/css/jquery.mobile.theme-1.3.1.css
--- a/mopidy_musicbox_webclient/static/css/jquery.mobile.theme-1.3.1.min.css
+++ b/mopidy_musicbox_webclient/static/css/jquery.mobile.theme-1.3.1.min.css
--- a/mopidy_musicbox_webclient/static/css/jquery.mobile.theme-1.4.0-alpha.2.css
+++ b/mopidy_musicbox_webclient/static/css/jquery.mobile.theme-1.4.0-alpha.2.css
@ -1,589 +0,0 @@
-/*!
-* jQuery Mobile 1.4.0-alpha.2
-* Git HEAD hash: 1e27844a1c0b9103a0948480637e6a67f5212dfd <> Date: Thu Aug 15 2013 13:53:49 UTC
-* http://jquerymobile.com
-*
-* Copyright 2010, 2013 jQuery Foundation, Inc. and other contributors
-* Released under the MIT license.
-* http://jquery.org/license
-*
-*/
-
-
-/* Globals */
-/* Font
-----------------------------------------------------------------------------------------------------------*/
-html {
-	font-size: 100%;
-}
-body,
-input,
-select,
-textarea,
-button,
-.ui-btn {
-	font-size: 1em;
-	line-height: 1.3;
-	font-family: sans-serif /*{global-font-family}*/;
-}
-legend,
-.ui-input-text input,
-.ui-input-search input {
-	color: inherit;
-	text-shadow: inherit;
-}
-/* Form labels (overrides font-weight bold in bars, and mini font-size) */
-.ui-mobile label,
-div.ui-controlgroup-label {
-	font-weight: normal;
-	font-size: 16px;
-}
-/* Field contain separator (< 28em)
-----------------------------------------------------------------------------------------------------------*/
-.ui-field-contain {
-	border-bottom-color: #828282;
-	border-bottom-color: rgba(0,0,0,.15);
-	border-bottom-width: 1px;
-	border-bottom-style: solid;
-}
-/* Buttons
-----------------------------------------------------------------------------------------------------------*/
-.ui-btn,
-label.ui-btn {
-	font-weight: bold;
-	border-width: 1px;
-	border-style: solid;
-}
-.ui-btn:link {
-	text-decoration: none !important;
-}
-.ui-btn-active {
-	cursor: pointer;
-}
-/* Corner rounding
-----------------------------------------------------------------------------------------------------------*/
-/* Class ui-btn-corner-all deprecated in 1.4 */
-.ui-corner-all {
-	-webkit-border-radius: 				.6em /*{global-radii-blocks}*/;
-	border-radius: 						.6em /*{global-radii-blocks}*/;
-}
-/* Buttons */
-.ui-btn-corner-all,
-.ui-btn.ui-corner-all,
-/* Slider track */
-.ui-slider-track.ui-corner-all,
-/* Flipswitch */
-.ui-flipswitch.ui-corner-all,
-/* Count bubble */
-.ui-li-count {
-	-webkit-border-radius: 				.3125em /*{global-radii-buttons}*/;
-	border-radius: 						.3125em /*{global-radii-buttons}*/;
-}
-/* Icon-only buttons */
-.ui-btn-icon-notext.ui-btn-corner-all,
-.ui-btn-icon-notext.ui-corner-all {
-	-webkit-border-radius: 1em;
-	border-radius: 1em;
-}
-/* Radius clip workaround for cleaning up corner trapping */
-.ui-btn-corner-all,
-.ui-corner-all {
-	-webkit-background-clip: padding;
-	background-clip: padding-box;
-}
-/* Popup arrow */
-.ui-popup.ui-corner-all > .ui-popup-arrow-guide {
-	left: .6em /*{global-radii-blocks}*/;
-	right: .6em /*{global-radii-blocks}*/;
-	top: .6em /*{global-radii-blocks}*/;
-	bottom: .6em /*{global-radii-blocks}*/;
-}
-/* Shadow
-----------------------------------------------------------------------------------------------------------*/
-.ui-shadow {
-	-webkit-box-shadow: 0 1px 3px /*{global-box-shadow-size}*/ 		rgba(0,0,0,.15) /*{global-box-shadow-color}*/;
-	-moz-box-shadow: 0 1px 3px /*{global-box-shadow-size}*/ 		rgba(0,0,0,.15) /*{global-box-shadow-color}*/;
-	box-shadow: 0 1px 3px /*{global-box-shadow-size}*/ 				rgba(0,0,0,.15) /*{global-box-shadow-color}*/
-}
-.ui-shadow-inset {
-	-webkit-box-shadow: inset 0 1px 3px /*{global-box-shadow-size}*/ 	rgba(0,0,0,.2) /*{global-box-shadow-color}*/;
-	-moz-box-shadow: inset 0 1px 3px /*{global-box-shadow-size}*/ 		rgba(0,0,0,.2) /*{global-box-shadow-color}*/;
-	box-shadow: inset 0 1px 3px 0 1px 3px /*{global-box-shadow-size}*/ 	rgba(0,0,0,.2) /*{global-box-shadow-color}*/;
-}
-.ui-overlay-shadow {
-	-webkit-box-shadow: 0 0 12px 		rgba(0,0,0,.6);
-	-moz-box-shadow: 0 0 12px 			rgba(0,0,0,.6);
-	box-shadow: 0 0 12px 				rgba(0,0,0,.6);
-}
-/* Icons
-----------------------------------------------------------------------------------------------------------*/
-.ui-btn-icon-left:after,
-.ui-btn-icon-right:after,
-.ui-btn-icon-top:after,
-.ui-btn-icon-bottom:after,
-.ui-btn-icon-notext:after,
-html .ui-btn.ui-icon-checkbox-off:after,
-html .ui-btn.ui-icon-radio-off:after {
-	background-color: 					#999 /*{global-icon-color}*/;
-	background-color: 					rgba(0,0,0,.3) /*{global-icon-disc}*/;
-	background-position: center center;
-	background-repeat: no-repeat;
-	-webkit-border-radius: 1em;
-	border-radius: 1em;
-}
-/* Alt icons */
-.ui-icon-alt.ui-btn:after,
-.ui-icon-alt .ui-btn:after,
-html .ui-icon-alt.ui-icon-checkbox-off:after,
-html .ui-icon-alt.ui-icon-radio-off:after,
-html .ui-icon-alt .ui-icon-checkbox-off:after,
-html .ui-icon-alt .ui-icon-radio-off:after {
-	background-color: 					#999 /*{global-icon-color}*/;
-	background-color: 					rgba(255,255,255,.3) /*{global-icon-disc-alt}*/;
-}
-/* No disc */
-.ui-icon-nodisc.ui-btn:after,
-.ui-icon-nodisc .ui-btn:after {
-	background-color: transparent;
-}
-/* Icon shadow */
-.ui-shadow-icon.ui-btn:after,
-.ui-shadow-icon .ui-btn:after {
-	-webkit-box-shadow: 0 1px 0 			rgba(255,255,255,.3) /*{global-icon-shadow}*/;
-	-moz-box-shadow: 0 1px 0 				rgba(255,255,255,.3) /*{global-icon-shadow}*/;
-	box-shadow: 0 1px 0 					rgba(255,255,255,.3) /*{global-icon-shadow}*/;
-}
-/* Checkbox and radio */
-html .ui-btn.ui-icon-checkbox-off:after,
-html .ui-btn.ui-icon-checkbox-on:after,
-html .ui-btn.ui-icon-radio-off:after,
-html .ui-btn.ui-icon-radio-on:after {
-	display: block;
-	width: 18px;
-	height: 18px;
-	margin: -9px 2px 0 2px;
-}
-.ui-btn.ui-icon-checkbox-off:after,
-.ui-btn.ui-icon-radio-off:after {
-	background-image: none;
-	filter: Alpha(Opacity=30);
-	opacity: .3;
-}
-html .ui-btn.ui-icon-checkbox-off:after,
-html .ui-btn.ui-icon-checkbox-on:after {
-	-webkit-border-radius: .1875em;
-	border-radius: .1875em;
-}
-.ui-radio .ui-btn.ui-icon-radio-on:after {
-	background-image: none;
-	background-color: #fff;
-	width: 8px;
-	height: 8px;
-	border-width: 5px;
-	border-style: solid; 
-}
-.ui-icon-alt.ui-btn.ui-icon-radio-on:after,
-.ui-icon-alt .ui-btn.ui-icon-radio-on:after {
-	background-color: #000;
-}
-/* Loader */
-.ui-icon-loading {
-	background: url(images/ajax-loader.gif);
-	background-size: 2.875em 2.875em;
-}
-/* Swatches */
-/* A
-----------------------------------------------------------------------------------------------------------*/
-/* Bar: Toolbars, dividers, slider track */
-.ui-bar-a,
-.ui-overlay-a .ui-bar-inherit,
-.ui-page-theme-a .ui-bar-inherit,
-html .ui-bar-a .ui-bar-inherit,
-html .ui-body-a .ui-bar-inherit,
-html body .ui-group-theme-a .ui-bar-inherit {
-	background: 			#f1f1f1 /*{a-bar-background-color}*/;
-	border-color:	 		#ddd /*{a-bar-border}*/;
-	color: 					#111 /*{a-bar-color}*/;
-	text-shadow: 0 /*{a-bar-shadow-x}*/ 1px /*{a-bar-shadow-y}*/ 0 /*{a-bar-shadow-radius}*/ 	#eee /*{a-bar-shadow-color}*/;
-	font-weight: bold;
-}
-.ui-bar-a {
-	border-width: 1px;
-	border-style: solid;
-}
-/* Page and overlay */
-.ui-overlay-a,
-.ui-page-theme-a,
-.ui-page-theme-a .ui-panel-wrapper {
-	background: 			#f9f9f9 /*{a-page-background-color}*/;
-	border-color:	 		#bbb /*{a-page-border}*/;
-	color: 					#111 /*{a-page-color}*/;
-	text-shadow: 0 /*{a-body-shadow-x}*/ 1px /*{a-body-shadow-y}*/ 0 /*{a-body-shadow-radius}*/ 	#eee /*{a-body-shadow-color}*/;
-}
-/* Body: Read-only lists, text inputs, collapsible content */
-.ui-body-a,
-.ui-overlay-a .ui-body-inherit,
-.ui-page-theme-a .ui-body-inherit,
-html .ui-bar-a .ui-body-inherit,
-html .ui-body-a .ui-body-inherit,
-html body .ui-group-theme-a .ui-body-inherit,
-html .ui-panel-page-container-a {
-	background: 			#fff /*{a-body-background-color}*/;
-	border-color:	 		#ddd /*{a-body-border}*/;
-	color: 					#111 /*{a-body-color}*/;
-	text-shadow: 0 /*{a-body-shadow-x}*/ 1px /*{a-body-shadow-y}*/ 0 /*{a-body-shadow-radius}*/ 	#eee /*{a-body-shadow-color}*/;
-}
-.ui-body-a {
-	border-width: 1px;
-	border-style: solid;
-}
-/* Links */
-.ui-overlay-a a,
-.ui-page-theme-a a,
-html .ui-bar-a a,
-html .ui-body-a a,
-html body .ui-group-theme-a a {
-	color: #0066ff /*{a-link-color}*/;
-	font-weight: bold;
-}
-.ui-overlay-a a:visited,
-.ui-page-theme-a a:visited,
-html .ui-bar-a a:visited,
-html .ui-body-a a:visited,
-html body .ui-group-theme-a a:visited {
-    color: #0066ff /*{a-link-visited}*/;
-}
-.ui-overlay-a a:hover,
-.ui-page-theme-a a:hover,
-html .ui-bar-a a:hover,
-html .ui-body-a a:hover,
-html body .ui-group-theme-a a:hover {
-	color: #0033ff /*{a-link-hover}*/;
-}
-.ui-overlay-a a:active,
-.ui-page-theme-a a:active,
-html .ui-bar-a a:active,
-html .ui-body-a a:active,
-html body .ui-group-theme-a a:active {
-	color: #0033ff /*{a-link-active}*/;
-}
-/* Button up */
-.ui-overlay-a .ui-btn,
-.ui-page-theme-a .ui-btn,
-html .ui-bar-a .ui-btn,
-html .ui-body-a .ui-btn,
-html body .ui-group-theme-a .ui-btn,
-html head + body .ui-btn.ui-btn-a,
-/* Button visited */
-.ui-overlay-a .ui-btn:visited,
-.ui-page-theme-a .ui-btn:visited,
-html .ui-bar-a .ui-btn:visited,
-html .ui-body-a .ui-btn:visited,
-html body .ui-group-theme-a .ui-btn:visited,
-html head + body .ui-btn.ui-btn-a:visited {
-	background: 			#f6f6f6 /*{a-bup-background-color}*/;
-	border-color:	 		#ddd /*{a-bup-border}*/;
-	color: 					#111 /*{a-bup-color}*/;
-	text-shadow: 0 /*{a-bup-shadow-x}*/ 1px /*{a-bup-shadow-y}*/ 0 /*{a-bup-shadow-radius}*/ #eee /*{a-bup-shadow-color}*/;
-}
-/* Button hover */
-.ui-overlay-a .ui-btn:hover,
-.ui-page-theme-a .ui-btn:hover,
-html .ui-bar-a .ui-btn:hover,
-html .ui-body-a .ui-btn:hover,
-html body .ui-group-theme-a .ui-btn:hover,
-html head + body .ui-btn.ui-btn-a:hover {
-	background: 			#ededed /*{a-bhover-background-color}*/;
-	border-color:	 		#ddd /*{a-bhover-border}*/;
-	color: 					#111 /*{a-bhover-color}*/;
-	text-shadow: 0 /*{a-bhover-shadow-x}*/ 1px /*{a-bhover-shadow-y}*/ 0 /*{a-bhover-shadow-radius}*/ #eee /*{a-bhover-shadow-color}*/;
-}
-/* Button down */
-.ui-overlay-a .ui-btn:active,
-.ui-page-theme-a .ui-btn:active,
-html .ui-bar-a .ui-btn:active,
-html .ui-body-a .ui-btn:active,
-html body .ui-group-theme-a .ui-btn:active,
-html head + body .ui-btn.ui-btn-a:active {
-	background: 			#e8e8e8 /*{a-bdown-background-color}*/;
-	border-color:	 		#ddd /*{a-bdown-border}*/;
-	color: 					#111 /*{a-bdown-color}*/;
-	text-shadow: 0 /*{a-bdown-shadow-x}*/ 1px /*{a-bdown-shadow-y}*/ 0 /*{a-bdown-shadow-radius}*/ #eee /*{a-bdown-shadow-color}*/;
-}
-/* Active button */
-.ui-overlay-a .ui-btn.ui-btn-active,
-.ui-page-theme-a .ui-btn.ui-btn-active,
-html .ui-bar-a .ui-btn.ui-btn-active,
-html .ui-body-a .ui-btn.ui-btn-active,
-html body .ui-group-theme-a .ui-btn.ui-btn-active,
-html head + body .ui-btn.ui-btn-a.ui-btn-active,
-/* Active checkbox icon */
-.ui-overlay-a .ui-icon-checkbox-on:after,
-.ui-page-theme-a .ui-icon-checkbox-on:after,
-html .ui-bar-a .ui-icon-checkbox-on:after,
-html .ui-body-a .ui-icon-checkbox-on:after,
-html body .ui-group-theme-a .ui-icon-checkbox-on:after,
-.ui-btn.ui-icon-checkbox-on.ui-btn-a:after,
-/* Active flipswitch background */
-.ui-overlay-a .ui-flipswitch-active,
-.ui-page-theme-a .ui-flipswitch-active,
-html .ui-bar-a .ui-flipswitch-active,
-html .ui-body-a .ui-flipswitch-active,
-html body .ui-group-theme-a .ui-flipswitch-active,
-html body .ui-flipswitch.ui-bar-a.ui-flipswitch-active,
-/* Active slider track */
-.ui-overlay-a .ui-slider-track .ui-btn-active,
-.ui-page-theme-a .ui-slider-track .ui-btn-active,
-html .ui-bar-a .ui-slider-track .ui-btn-active,
-html .ui-body-a .ui-slider-track .ui-btn-active,
-html body .ui-group-theme-a .ui-slider-track .ui-btn-active,
-html body div.ui-slider-track.ui-body-a .ui-btn-active {
-	background-color: 		#0066ff /*{a-active-background-color}*/;
-	border-color:	 		#0033ff /*{a-active-border}*/;
-	color: 					#fff /*{a-active-color}*/;
-	text-shadow: 0 /*{a-active-shadow-x}*/ 1px /*{a-active-shadow-y}*/ 0 /*{a-active-shadow-radius}*/ #0033ff /*{a-active-shadow-color}*/;
-}
-/* Active radio button icon */
-.ui-overlay-a .ui-icon-radio-on:after,
-.ui-page-theme-a .ui-icon-radio-on:after,
-html .ui-bar-a .ui-icon-radio-on:after,
-html .ui-body-a .ui-icon-radio-on:after,
-html body .ui-group-theme-a .ui-icon-radio-on:after,
-.ui-btn.ui-icon-radio-on.ui-btn-a:after {
-	border-color:			#0066ff /*{a-active-background-color}*/;
-}
-/* Focus */
-.ui-overlay-a .ui-btn:focus,
-.ui-page-theme-a .ui-btn:focus,
-html .ui-bar-a .ui-btn:focus,
-html .ui-body-a .ui-btn:focus,
-html body .ui-group-theme-a .ui-btn:focus,
-html head + body .ui-btn.ui-btn-a:focus,
-/* Focus buttons and text inputs with div wrap */
-.ui-overlay-a .ui-focus,
-.ui-page-theme-a .ui-focus,
-html .ui-bar-a .ui-focus,
-html .ui-body-a .ui-focus,
-html body .ui-group-theme-a .ui-focus,
-html head + body .ui-btn-a.ui-focus,
-html head + body .ui-body-a.ui-focus {
-	-webkit-box-shadow: 0 0 12px 	#0066ff /*{a-active-background-color}*/;
-	-moz-box-shadow: 0 0 12px 		#0066ff /*{a-active-background-color}*/;
-	box-shadow: 0 0 12px 			#0066ff /*{a-active-background-color}*/;
-}
-/* B
-----------------------------------------------------------------------------------------------------------*/
-/* Bar: Toolbars, dividers, slider track */
-.ui-bar-b,
-.ui-overlay-b .ui-bar-inherit,
-.ui-page-theme-b .ui-bar-inherit,
-html .ui-bar-b .ui-bar-inherit,
-html .ui-body-b .ui-bar-inherit,
-html body .ui-group-theme-b .ui-bar-inherit {
-	background: 			#1d1d1d /*{b-bar-background-color}*/;
-	border-color:	 		#1b1b1b /*{b-bar-border}*/;
-	color: 					#fff /*{b-bar-color}*/;
-	text-shadow: 0 /*{b-bar-shadow-x}*/ 1px /*{b-bar-shadow-y}*/ 0 /*{b-bar-shadow-radius}*/ 	#111 /*{b-bar-shadow-color}*/;
-	font-weight: bold;
-}
-.ui-bar-b {
-	border-width: 1px;
-	border-style: solid;
-}
-/* Page and overlay */
-.ui-overlay-b,
-.ui-page-theme-b,
-.ui-page-theme-b .ui-panel-wrapper {
-	background: 			#252525 /*{b-page-background-color}*/;
-	border-color:	 		#454545 /*{b-page-border}*/;
-	color: 					#fff /*{b-page-color}*/;
-	text-shadow: 0 /*{b-body-shadow-x}*/ 1px /*{b-body-shadow-y}*/ 0 /*{b-body-shadow-radius}*/ 	#111 /*{b-body-shadow-color}*/;
-}
-/* Body: Read-only lists, text inputs, collapsible content */
-.ui-body-b,
-.ui-overlay-b .ui-body-inherit,
-.ui-page-theme-b .ui-body-inherit,
-html .ui-bar-b .ui-body-inherit,
-html .ui-body-b .ui-body-inherit,
-html body .ui-group-theme-b .ui-body-inherit,
-html .ui-panel-page-container-b {
-	background: 			#2a2a2a /*{b-body-background-color}*/;
-	border-color:	 		#1d1d1d /*{b-body-border}*/;
-	color: 					#fff /*{b-body-color}*/;
-	text-shadow: 0 /*{b-body-shadow-x}*/ 1px /*{b-body-shadow-y}*/ 0 /*{b-body-shadow-radius}*/ 	#111 /*{b-body-shadow-color}*/;
-}
-.ui-body-b {
-	border-width: 1px;
-	border-style: solid;
-}
-/* Links */
-.ui-overlay-b a,
-.ui-page-theme-b a,
-html .ui-bar-b a,
-html .ui-body-b a,
-html body .ui-group-theme-b a {
-	color: #33ccff /*{b-link-color}*/;
-	font-weight: bold;
-}
-.ui-overlay-b a:visited,
-.ui-page-theme-b a:visited,
-html .ui-bar-b a:visited,
-html .ui-body-b a:visited,
-html body .ui-group-theme-b a:visited {
-    color: #33ccff /*{b-link-visited}*/;
-}
-.ui-overlay-b a:hover,
-.ui-page-theme-b a:hover,
-html .ui-bar-b a:hover,
-html .ui-body-b a:hover,
-html body .ui-group-theme-b a:hover {
-	color: #3399ff /*{b-link-hover}*/;
-}
-.ui-overlay-b a:active,
-.ui-page-theme-b a:active,
-html .ui-bar-b a:active,
-html .ui-body-b a:active,
-html body .ui-group-theme-b a:active {
-	color: #3399ff /*{b-link-active}*/;
-}
-/* Button up */
-.ui-overlay-b .ui-btn,
-.ui-page-theme-b .ui-btn,
-html .ui-bar-b .ui-btn,
-html .ui-body-b .ui-btn,
-html body .ui-group-theme-b .ui-btn,
-html head + body .ui-btn.ui-btn-b,
-/* Button visited */
-.ui-overlay-b .ui-btn:visited,
-.ui-page-theme-b .ui-btn:visited,
-html .ui-bar-b .ui-btn:visited,
-html .ui-body-b .ui-btn:visited,
-html body .ui-group-theme-b .ui-btn:visited,
-html head + body .ui-btn.ui-btn-b:visited {
-	background: 			#333 /*{b-bup-background-color}*/;
-	border-color:	 		#1f1f1f /*{b-bup-border}*/;
-	color: 					#fff /*{b-bup-color}*/;
-	text-shadow: 0 /*{b-bup-shadow-x}*/ 1px /*{b-bup-shadow-y}*/ 0 /*{b-bup-shadow-radius}*/ #111 /*{b-bup-shadow-color}*/;
-}
-/* Button hover */
-.ui-overlay-b .ui-btn:hover,
-.ui-page-theme-b .ui-btn:hover,
-html .ui-bar-b .ui-btn:hover,
-html .ui-body-b .ui-btn:hover,
-html body .ui-group-theme-b .ui-btn:hover,
-html head + body .ui-btn.ui-btn-b:hover {
-	background: 			#373737 /*{b-bhover-background-color}*/;
-	border-color:	 		#1f1f1f /*{b-bhover-border}*/;
-	color: 					#fff /*{b-bhover-color}*/;
-	text-shadow: 0 /*{b-bhover-shadow-x}*/ 1px /*{b-bhover-shadow-y}*/ 0 /*{b-bhover-shadow-radius}*/ #111 /*{b-bhover-shadow-color}*/;
-}
-/* Button down */
-.ui-overlay-b .ui-btn:active,
-.ui-page-theme-b .ui-btn:active,
-html .ui-bar-b .ui-btn:active,
-html .ui-body-b .ui-btn:active,
-html body .ui-group-theme-b .ui-btn:active,
-html head + body .ui-btn.ui-btn-b:active {
-	background: 			#404040 /*{b-bdown-background-color}*/;
-	border-color:	 		#1f1f1f /*{b-bdown-border}*/;
-	color: 					#fff /*{b-bdown-color}*/;
-	text-shadow: 0 /*{b-bdown-shadow-x}*/ 1px /*{b-bdown-shadow-y}*/ 0 /*{b-bdown-shadow-radius}*/ #111 /*{b-bdown-shadow-color}*/;
-}
-/* Active button */
-.ui-overlay-b .ui-btn.ui-btn-active,
-.ui-page-theme-b .ui-btn.ui-btn-active,
-html .ui-bar-b .ui-btn.ui-btn-active,
-html .ui-body-b .ui-btn.ui-btn-active,
-html body .ui-group-theme-b .ui-btn.ui-btn-active,
-html head + body .ui-btn.ui-btn-b.ui-btn-active,
-/* Active checkbox icon */
-.ui-overlay-b .ui-icon-checkbox-on:after,
-.ui-page-theme-b .ui-icon-checkbox-on:after,
-html .ui-bar-b .ui-icon-checkbox-on:after,
-html .ui-body-b .ui-icon-checkbox-on:after,
-html body .ui-group-theme-b .ui-icon-checkbox-on:after,
-.ui-btn.ui-icon-checkbox-on.ui-btn-b:after,
-/* Active flipswitch background */
-.ui-overlay-b .ui-flipswitch-active,
-.ui-page-theme-b .ui-flipswitch-active,
-html .ui-bar-b .ui-flipswitch-active,
-html .ui-body-b .ui-flipswitch-active,
-html body .ui-group-theme-b .ui-flipswitch-active,
-html body .ui-flipswitch.ui-bar-b.ui-flipswitch-active,
-/* Active slider track */
-.ui-overlay-b .ui-slider-track .ui-btn-active,
-.ui-page-theme-b .ui-slider-track .ui-btn-active,
-html .ui-bar-b .ui-slider-track .ui-btn-active,
-html .ui-body-b .ui-slider-track .ui-btn-active,
-html body .ui-group-theme-b .ui-slider-track .ui-btn-active,
-html body div.ui-slider-track.ui-body-b .ui-btn-active {
-	background-color: 		#33ccff /*{b-active-background-color}*/;
-	border-color:	 		#3399ff /*{b-active-border}*/;
-	color: 					#fff /*{b-active-color}*/;
-	text-shadow: 0 /*{b-active-shadow-x}*/ 1px /*{b-active-shadow-y}*/ 0 /*{b-active-shadow-radius}*/ #3399ff /*{b-active-shadow-color}*/;
-}
-/* Active radio button icon */
-.ui-overlay-b .ui-icon-radio-on:after,
-.ui-page-theme-b .ui-icon-radio-on:after,
-html .ui-bar-b .ui-icon-radio-on:after,
-html .ui-body-b .ui-icon-radio-on:after,
-html body .ui-group-theme-b .ui-icon-radio-on:after,
-.ui-btn.ui-icon-radio-on.ui-btn-b:after {
-	border-color:			#33ccff /*{b-active-background-color}*/;
-}
-/* Focus */
-.ui-overlay-b .ui-btn:focus,
-.ui-page-theme-b .ui-btn:focus,
-html .ui-bar-b .ui-btn:focus,
-html .ui-body-b .ui-btn:focus,
-html body .ui-group-theme-b .ui-btn:focus,
-html head + body .ui-btn.ui-btn-b:focus,
-/* Focus buttons and text inputs with div wrap */
-.ui-overlay-b .ui-focus,
-.ui-page-theme-b .ui-focus,
-html .ui-bar-b .ui-focus,
-html .ui-body-b .ui-focus,
-html body .ui-group-theme-b .ui-focus,
-html head + body .ui-btn-b.ui-focus,
-html head + body .ui-body-b.ui-focus {
-	-webkit-box-shadow: 0 0 12px 	#33ccff /*{b-active-background-color}*/;
-	-moz-box-shadow: 0 0 12px 		#33ccff /*{b-active-background-color}*/;
-	box-shadow: 0 0 12px 			#33ccff /*{b-active-background-color}*/;
-}
-/* Disabled
-----------------------------------------------------------------------------------------------------------*/
-/* Class ui-disabled deprecated in 1.4. :disabled not supported by IE8 so we use [disabled] */
-.ui-disabled,
-.ui-state-disabled,
-button[disabled],
-.ui-select .ui-btn.ui-state-disabled {
-	filter: Alpha(Opacity=30);
-	opacity: .3;
-	cursor: default !important;
-	pointer-events: none;
-}
-/* Focus state outline
-----------------------------------------------------------------------------------------------------------*/
-.ui-btn:focus,
-.ui-btn.ui-focus {
-	outline: 0;
-}
-/* Unset box-shadow in browsers that don't do it right */
-.ui-noboxshadow .ui-shadow,
-.ui-noboxshadow .ui-shadow-inset,
-.ui-noboxshadow .ui-overlay-shadow,
-.ui-noboxshadow .ui-shadow-icon.ui-btn:after,
-.ui-noboxshadow .ui-shadow-icon .ui-btn:after,
-.ui-noboxshadow .ui-focus,
-.ui-noboxshadow .ui-btn:focus,
-.ui-noboxshadow  input:focus,
-.ui-noboxshadow .ui-panel {
-	-webkit-box-shadow: none !important;
-	-moz-box-shadow: none !important;
-	box-shadow: none !important;
-}
-.ui-noboxshadow .ui-btn:focus,
-.ui-noboxshadow .ui-focus {
-	outline-width: 1px;
-	outline-style: auto;
-}
--- a/mopidy_musicbox_webclient/static/css/jquery.mobile.theme-1.4.0-alpha.2.min.css
+++ b/mopidy_musicbox_webclient/static/css/jquery.mobile.theme-1.4.0-alpha.2.min.css
--- a/mopidy_musicbox_webclient/static/css/webclient.css
+++ b/mopidy_musicbox_webclient/static/css/webclient.css
@ -121,12 +121,6 @@
 }

 /**headers and controls**/
-
-
-#playimg {
-    margin-top: 2px;
-}
-
 #nextimg, #previmg, #backimg, #controlsimg {
    margin-top: 6px;
 }
@ -339,18 +333,30 @@
 /*******************
 * Now Playing area
 *******************/
-.nowPlayingControls {
-    font-size: 20px;
-    line-height: 45px;
-    padding-left: 10px;
+
+#nowPlayingFooter{
+    height: 50px;
+    line-height: 48px;
+    text-align: center;
 }
-.nowPlayingControls .fa{
-    vertical-align: -webkit-baseline-middle;
+
+.footerControls {
+    height: 100%;
+    font-size: 25px;
+    padding-right: 10px;
 }
-.nowPlayingControls #btplayNowPlaying{
-    font-size: 190%;
-    margin-left: 15px;
-    margin-right: 15px;
+
+.footerControls div span {
+    padding-left: 3px;
+    padding-right: 3px;
+	height=100%;
+	vertical-align: middle;
+}
+
+.footerControls #btplayNowPlaying {
+    font-size: 42px;
+    margin-left: 10px;
+    margin-right: 10px;
 }


@ -392,10 +398,6 @@
    margin-bottom: 15px;
 }

-#btplayNowPlaying {
-    padding-top: 15px;
-}
-
 #popupTracksLv li, #popupQueueLv li {
    border-bottom: 1px solid #aaa;
 }
@ -454,13 +456,14 @@ a {
 .ui-footer{
    border: 0px;
 }
+
 #normalFooter{
-    height: 48px;
-}
-#nowPlayingFooter{
+    height: 50px;
+    line-height: 48px;
    text-align: center;
    color: white;
 }
+
 #infoname {
    overflow: hidden;
    white-space: nowrap;
@ -475,52 +478,35 @@ a {
 }

 #infocover {
-    height: 48px;
-    width: 48px;
+    height: 50px;
+    width: 50px;
    position: absolute;
 }

+#btplay {
+    color: white;
+}

-.songinfo-text{
+.songinfo {
+    height: 100%;
+}
+
+.songinfo-text {
+    text-align: left;
+    line-height: 22px;
    display:inline-block;
    padding: 6px;
    color: white;
    position: absolute;
-    padding-left: 50px;
-    padding-right: 50px;
+    padding-left: 55px;
+    padding-right: 55px;
 }
-.playPausebtn{
-    padding-right: 10px;
-    position: absolute;
-    right: 0px;
-}
-
-#controldiv{
-    background: none repeat scroll 0% 0% rgb(44, 62, 80);
-    height: 48px;
-    padding: 8px 8px 8px 8px;
-
-}
-
-#controldiv img {
-    margin-left: auto;
-    margin-right: auto;
-    display: block;
-}
-

 #nowPlayingpane{
    text-align: center;
 }


-.footer {
-    position: fixed;
-    z-index: 1000;
-    bottom: 0;
-    width: 100%;
-}
-
 /*helper*/

 .hidden{
@ -590,7 +576,8 @@ a {

    .nowPlayingControls{
        font-size: 1.3em;
-        line-height: 50px;
+        height: 50px;
+        line-height: 48px;
    }
 }

--- a/mopidy_musicbox_webclient/static/dialog-success.html
+++ b/mopidy_musicbox_webclient/static/dialog-success.html
@ -4,7 +4,7 @@
    <meta charset="utf-8">

    <script src="js/jquery-1.11.1.min.js"></script>
-    <link rel="stylesheet" type="text/css" href="css/jquery.mobile.flatui.css"/>
+    <link rel="stylesheet" type="text/css" href="css/jquery.mobile.flatui.min.css"/>
    <script src="js/jquery.mobile-1.3.2.min.js"></script>
 </head>

--- a/mopidy_musicbox_webclient/static/images/ajax-loader.gif
+++ b/mopidy_musicbox_webclient/static/images/ajax-loader.gif
--- a/mopidy_musicbox_webclient/static/images/icons-18-black.png
+++ b/mopidy_musicbox_webclient/static/images/icons-18-black.png
--- a/mopidy_musicbox_webclient/static/images/icons-18-white.png
+++ b/mopidy_musicbox_webclient/static/images/icons-18-white.png
--- a/mopidy_musicbox_webclient/static/images/icons-36-black.png
+++ b/mopidy_musicbox_webclient/static/images/icons-36-black.png
--- a/mopidy_musicbox_webclient/static/images/icons-36-white.png
+++ b/mopidy_musicbox_webclient/static/images/icons-36-white.png
--- a/mopidy_musicbox_webclient/static/images/icons/cd_32x32.png
+++ b/mopidy_musicbox_webclient/static/images/icons/cd_32x32.png
--- a/mopidy_musicbox_webclient/static/images/icons/pause_32x32.png
+++ b/mopidy_musicbox_webclient/static/images/icons/pause_32x32.png
--- a/mopidy_musicbox_webclient/static/images/icons/play_alt_12x12.png
+++ b/mopidy_musicbox_webclient/static/images/icons/play_alt_12x12.png
--- a/mopidy_musicbox_webclient/static/images/icons/play_alt_16x16.png
+++ b/mopidy_musicbox_webclient/static/images/icons/play_alt_16x16.png
--- a/mopidy_musicbox_webclient/static/images/icons/play_alt_32x32.png
+++ b/mopidy_musicbox_webclient/static/images/icons/play_alt_32x32.png
--- a/mopidy_musicbox_webclient/static/images/start.jpg
+++ b/mopidy_musicbox_webclient/static/images/start.jpg
--- a/mopidy_musicbox_webclient/static/index.html
+++ b/mopidy_musicbox_webclient/static/index.html
@ -1,10 +1,9 @@
 <!DOCTYPE html>
-<!-- <html manifest="mb.manifest"> -->
-<html>
+<html manifest="mb.manifest">
 <head>
    <meta charset="utf-8">
    <script src="js/jquery-1.11.1.min.js"></script>
-    <link rel="stylesheet" type="text/css" href="css/jquery.mobile.flatui.css"/>
+    <link rel="stylesheet" type="text/css" href="css/jquery.mobile.flatui.min.css"/>
 <!--    <script type='application/javascript' src='js/fastclick.js'></script> -->
    <script>
        //configuration
@ -57,10 +56,9 @@
    <meta name="author" content="Wouter van Wijk" />
    <meta name="copyright" content="(c) 2012-2015 Wouter van Wijk" />
    <link href="css/webclient.css" rel="stylesheet" />
-    <link href="css/jquery.mobile.iscrollview.css" rel="stylesheet" />
+    <link href="css/jquery.mobile.iscrollview.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="css/font-awesome.min.css" />

-    <!--        <link rel="stylesheet" href="css/add2home.css"> -->
 </head>

 <body>
@ -411,9 +409,9 @@
    <h4>Streams</h4>

    <div>
-        <form>
        <div class="ui-grid-a pl-breakpoint">
        <div class="ui-block-a" style="padding: 5px">
+        <form>
            <p>Play a specific stream/track and optionally save it to your favourites.
            <button class="btn" type="button" onclick="return getCurrentlyPlaying();">
                Get currently playing
@ -430,7 +428,7 @@
                Save
            </button>
                <br/>
-            </form>
+        </form>
        </div>
        <div class="ui-block-b" style="padding: 5px">
            <ul id="streamuristable" class="table"></ul>
@ -441,34 +439,35 @@


 <div data-role="footer" data-tap-toggle="false" data-position="fixed" id="normalFooter">
-        <div id="songinfo" class="">
-            <a href="#"><img id="infocover" src="images/default_cover.png" width="36" height="36"/></a>
-
-            <div class="songinfo-text">
-                <div id="infoname"></div>
-                <div id="infoartist"></div>
+        <div class="footerControls">
+            <div id="songinfo" style="float: left">
+                <a href="#"><div><img id="infocover" src="images/default_cover.png"/></div></a>
+                <div class="songinfo-text">
+                    <div id="infoname"></div>
+                    <div id="infoartist"></div>
+                </div>
+            </div>
+            <div style="float: right;">
+                <a href="#" onclick="doPlay(); return false"><span id="btplay" title="Play"><i class="fa fa-play"></i></span></a>
            </div>
-        </div>
-        <div id="controldiv" class="playPausebtn">
-            <a href="#" onclick="doPlay(); return false"><span id="btplay"><img src="images/icons/pause_32x32.png"
-                                                                                alt="Play" id="playimg" title="Play"/></span></a>
        </div>
 </div>
 <div data-role="footer" data-tap-toggle="false" data-position="fixed" id="nowPlayingFooter">
-
-    <p id="buttons" style="float:right; margin-top: 20px; margin-right: 5px;">
-                   <a href="#" onclick="doRandom(); return false" title="Random"><i class="fa fa-random" id="randombt"></i></a>
-            &nbsp; <a href="#" onclick="doRepeat(); return false" title="Repeat"><i class="fa fa-repeat" id="repeatbt"></i></a>
-            &nbsp; <a href="#" onclick="doConsume(); return false" title="Consume"><i class="fa fa-cutlery" id="consumebt"></i></a>
-            &nbsp; <a href="#" onclick="doSingle(); return false" title="Single"><i class="fa fa-dot-circle-o" id="singlebt"></i></a>
-            &nbsp; <a href="#" onclick="doShuffle(); return false" title="Shuffle"><i class="fa fa-arrows-v" id="shufflebt"></i></a>
-    </p>
-
-        <div class="nowPlayingControls" style="float:left; margin-left: 5px;">
-                   <a href="#" onclick="doPrevious(); return false"><span id="btprev" title="Previous"><i class="fa fa-fast-backward"></i></span></a>
-            &nbsp; <a href="#" onclick="doPlay(); return false"><span id="btplayNowPlaying" title="Play"><i class="fa fa-play"></i></span></a>
-            &nbsp; <a href="#" onclick="doNext(); return false"><span id="btnext" title="Next"><i class="fa fa-fast-forward"></i></span></a>
+        <div class="footerControls" style="padding-left: 10px;">
+            <div style="float: left;">
+                <a href="#" onclick="doPrevious(); return false"><span id="btprev" title="Previous"><i class="fa fa-fast-backward"></i></span></a>
+                <a href="#" onclick="doPlay(); return false"><span id="btplayNowPlaying" title="Play"><i class="fa fa-play"></i></span></a>
+                <a href="#" onclick="doNext(); return false"><span id="btnext" title="Next"><i class="fa fa-fast-forward"></i></span></a>
+            </div>
+            <div style="float: right; margin-right: 10px;">
+                <a href="#" onclick="doRandom(); return false"><span id="randombt" title="Random"><i class="fa fa-random"></i></span></a>
+                <a href="#" onclick="doRepeat(); return false"><span id="repeatbt" title="Repeat"><i class="fa fa-repeat"></i></span></a>
+                <a href="#" onclick="doConsume(); return false"><span id="consumebt" title="Consume"><i class="fa fa-cutlery"></i></span></a>
+                <a href="#" onclick="doSingle(); return false"><span id="singlebt" title="Single"><i class="fa fa-dot-circle-o"></i></span></a>
+                <a href="#" onclick="doShuffle(); return false"><span id="shufflebt" title="Shuffle"><i class="fa fa-arrows-v"></i></span></a>
+            </div>
        </div>
+
 </div>
 <!-- /footer -->

--- a/mopidy_musicbox_webclient/static/js/controls.js
+++ b/mopidy_musicbox_webclient/static/js/controls.js
@ -260,15 +260,15 @@ function doShuffle() {
 /* Toggle state of play button */
 function setPlayState(nwplay) {
    if (nwplay) {
-        $("#playimg").attr('src', 'images/icons/pause_32x32.png');
-        $("#playimg").attr('title', 'Pause');
        $("#btplayNowPlaying >i").removeClass('fa-play').addClass('fa-pause');
        $("#btplayNowPlaying").attr('title', 'Pause');
+        $("#btplay >i").removeClass('fa-play').addClass('fa-pause');
+        $("#btplay").attr('title', 'Pause');
    } else {
-        $("#playimg").attr('src', 'images/icons/play_alt_32x32.png');
-        $("#playimg").attr('title', 'Play');
        $("#btplayNowPlaying >i").removeClass('fa-pause').addClass('fa-play');
        $("#btplayNowPlaying").attr('title', 'Play');
+        $("#btplay >i").removeClass('fa-pause').addClass('fa-play');
+        $("#btplay").attr('title', 'Play');
    }
    play = nwplay;
 }
--- a/mopidy_musicbox_webclient/static/js/jquery.ba-hashchange.min.js
+++ b/mopidy_musicbox_webclient/static/js/jquery.ba-hashchange.min.js
@ -1,9 +0,0 @@
-/*
- * jQuery hashchange event - v1.3 - 7/21/2010
- * http://benalman.com/projects/jquery-hashchange-plugin/
- * 
- * Copyright (c) 2010 "Cowboy" Ben Alman
- * Dual licensed under the MIT and GPL licenses.
- * http://benalman.com/about/license/
- */
-(function($,e,b){var c="hashchange",h=document,f,g=$.event.special,i=h.documentMode,d="on"+c in e&&(i===b||i>7);function a(j){j=j||location.href;return"#"+j.replace(/^[^#]*#?(.*)$/,"$1")}$.fn[c]=function(j){return j?this.bind(c,j):this.trigger(c)};$.fn[c].delay=50;g[c]=$.extend(g[c],{setup:function(){if(d){return false}$(f.start)},teardown:function(){if(d){return false}$(f.stop)}});f=(function(){var j={},p,m=a(),k=function(q){return q},l=k,o=k;j.start=function(){p||n()};j.stop=function(){p&&clearTimeout(p);p=b};function n(){var r=a(),q=o(m);if(r!==m){l(m=r,q);$(e).trigger(c)}else{if(q!==m){location.href=location.href.replace(/#.*/,"")+q}}p=setTimeout(n,$.fn[c].delay)}$.browser.msie&&!d&&(function(){var q,r;j.start=function(){if(!q){r=$.fn[c].src;r=r&&r+a();q=$('<iframe tabindex="-1" title="empty"/>').hide().one("load",function(){r||l(a());n()}).attr("src",r||"javascript:0").insertAfter("body")[0].contentWindow;h.onpropertychange=function(){try{if(event.propertyName==="title"){q.document.title=h.title}}catch(s){}}}};j.stop=k;o=function(){return a(q.location.href)};l=function(v,s){var u=q.document,t=$.fn[c].domain;if(v!==s){u.title=h.title;u.open();t&&u.write('<script>document.domain="'+t+'"<\/script>');u.close();q.location.hash=v}}})();return j})()})(jQuery,this);
--- a/mopidy_musicbox_webclient/static/mb.manifest
+++ b/mopidy_musicbox_webclient/static/mb.manifest
@ -1,196 +1,83 @@
 CACHE MANIFEST

+# 2016-01-24:v1
+
 CACHE:
 index.html
-/mopidy/mopidy.js

-/css/add2home.css
-/css/bootstrap-responsive.css
-/css/bootstrap-responsive.min.css
-/css/bootstrap.css
-/css/bootstrap.min.css
-/css/iscroll-pull-icon@2x.png
-/css/jquery.mobile-1.3.0.css
-/css/jquery.mobile-1.3.0.min.css
-/css/jquery.mobile.iscrollview-pull.css
-/css/jquery.mobile.iscrollview.css
-/css/jquery.mobile.structure-1.3.0.css
-/css/jquery.mobile.structure-1.3.0.min.css
-/css/jquery.mobile.theme-1.3.0.css
-/css/jquery.mobile.theme-1.3.0.min.css
-/css/ws.css
+css/fonts/Flat-UI-Icons-24.ttf
+css/fonts/Flat-UI-Icons-24.woff
+css/fonts/FontAwesome.otf
+css/fonts/fontawesome-webfont.eot
+css/fonts/fontawesome-webfont.svg
+css/fonts/fontawesome-webfont.ttf
+css/fonts/fontawesome-webfont.woff
+css/fonts/lato-black.ttf
+css/fonts/lato-black.woff
+css/fonts/lato-bold.ttf
+css/fonts/lato-bold.woff
+css/fonts/lato-italic.ttf
+css/fonts/lato-italic.woff
+css/fonts/lato-regular.ttf
+css/fonts/lato-regular.woff

-/images/ajax-loader.gif
-/images/empty.png
-/images/icons-18-black.png
-/images/icons-18-white.png
-/images/icons-36-black.png
-/images/icons-36-white.png
-/images/loader.gif
-/images/start.jpg
+css/images/ajax-loader.gif
+css/images/icons-18-black.png
+css/images/icons-18-white.png
+css/images/icons-36-black.png
+css/images/icons-36-white.png

-/images/icons/arrow_down_12x12.png
-/images/icons/arrow_down_16x16.png
-/images/icons/arrow_down_24x24.png
-/images/icons/arrow_down_32x32.png
-/images/icons/arrow_down_8x8.png
-/images/icons/arrow_down_alt1_12x12.png
-/images/icons/arrow_down_alt1_16x16.png
-/images/icons/arrow_down_alt1_24x24.png
-/images/icons/arrow_down_alt1_32x32.png
-/images/icons/arrow_down_alt1_8x8.png
-/images/icons/arrow_left_alt1_12x12.png
-/images/icons/arrow_left_alt1_16x16.png
-/images/icons/arrow_left_alt1_24x24.png
-/images/icons/arrow_left_alt1_32x32.png
-/images/icons/cd_12x12.png
-/images/icons/cd_16x16.png
-/images/icons/cd_24x24.png
-/images/icons/cd_32x32.png
-/images/icons/cd_8x8.png
-/images/icons/cog_12x12.png
-/images/icons/cog_16x16.png
-/images/icons/cog_24x24.png
-/images/icons/cog_32x32.png
-/images/icons/cog_8x8.png
-/images/icons/first_12x12.png
-/images/icons/first_16x16.png
-/images/icons/first_24x24.png
-/images/icons/first_32x32.png
-/images/icons/first_8x8.png
-/images/icons/fork_21x24.png
-/images/icons/headphones_12x11.png
-/images/icons/headphones_16x14.png
-/images/icons/headphones_24x21.png
-/images/icons/headphones_32x28.png
-/images/icons/headphones_8x7.png
-/images/icons/heart_fill_12x11.png
-/images/icons/heart_fill_16x14.png
-/images/icons/heart_fill_24x21.png
-/images/icons/heart_fill_32x28.png
-/images/icons/heart_fill_8x7.png
-/images/icons/heart_stroke_12x11.png
-/images/icons/heart_stroke_16x14.png
-/images/icons/heart_stroke_24x21.png
-/images/icons/heart_stroke_32x28.png
-/images/icons/heart_stroke_8x7.png
-/images/icons/info_12x24.png
-/images/icons/info_16x32.png
-/images/icons/info_4x8.png
-/images/icons/info_6x12.png
-/images/icons/info_8x16.png
-/images/icons/last_12x12.png
-/images/icons/last_16x16.png
-/images/icons/last_24x24.png
-/images/icons/last_32x32.png
-/images/icons/last_8x8.png
-/images/icons/layers_24x21.png
-/images/icons/list_12x11.png
-/images/icons/list_16x14.png
-/images/icons/list_24x21.png
-/images/icons/list_32x28.png
-/images/icons/list_8x7.png
-/images/icons/list_nested_12x11.png
-/images/icons/list_nested_16x14.png
-/images/icons/list_nested_24x21.png
-/images/icons/list_nested_32x28.png
-/images/icons/list_nested_8x7.png
-/images/icons/loop_12x12.png
-/images/icons/loop_16x16.png
-/images/icons/loop_24x24.png
-/images/icons/loop_32x32.png
-/images/icons/loop_8x8.png
-/images/icons/loop_alt1_12x9.png
-/images/icons/loop_alt1_16x12.png
-/images/icons/loop_alt1_24x18.png
-/images/icons/loop_alt1_32x24.png
-/images/icons/loop_alt1_8x6.png
-/images/icons/loop_alt2_12x11.png
-/images/icons/loop_alt2_16x14.png
-/images/icons/loop_alt2_24x21.png
-/images/icons/loop_alt2_32x28.png
-/images/icons/loop_alt2_8x7.png
-/images/icons/loop_alt3_12x9.png
-/images/icons/loop_alt3_16x12.png
-/images/icons/loop_alt3_24x18.png
-/images/icons/loop_alt3_32x24.png
-/images/icons/loop_alt3_8x6.png
-/images/icons/loop_alt4_12x9.png
-/images/icons/loop_alt4_16x12.png
-/images/icons/loop_alt4_24x18.png
-/images/icons/loop_alt4_32x24.png
-/images/icons/loop_alt4_8x6.png
-/images/icons/magnifying_glass_12x12.png
-/images/icons/magnifying_glass_16x16.png
-/images/icons/magnifying_glass_24x24.png
-/images/icons/magnifying_glass_32x32.png
-/images/icons/magnifying_glass_8x8.png
-/images/icons/new_window_16x16.png
-/images/icons/new_window_24x24.png
-/images/icons/pause_12x16.png
-/images/icons/pause_18x24.png
-/images/icons/pause_24x32.png
-/images/icons/pause_32x32.png
-/images/icons/pause_6x8.png
-/images/icons/pause_9x12.png
-/images/icons/play_12x16.png
-/images/icons/play_18x24.png
-/images/icons/play_24x32.png
-/images/icons/play_32x32.png
-/images/icons/play_6x8.png
-/images/icons/play_9x12.png
-/images/icons/play_alt_12x12.png
-/images/icons/play_alt_16x16.png
-/images/icons/play_alt_24x24.png
-/images/icons/play_alt_32x32.png
-/images/icons/play_alt_8x8.png
-/images/icons/reload_12x14.png
-/images/icons/reload_18x21.png
-/images/icons/reload_24x28.png
-/images/icons/reload_6x7.png
-/images/icons/reload_9x11.png
-/images/icons/reload_alt_12x14.png
-/images/icons/reload_alt_18x21.png
-/images/icons/reload_alt_24x28.png
-/images/icons/reload_alt_6x7.png
-/images/icons/reload_alt_9x11.png
-/images/icons/user_24x32.png
-/images/icons/volume_12x9.png
-/images/icons/volume_16x12.png
-/images/icons/volume_24x18.png
-/images/icons/volume_32x24.png
-/images/icons/volume_8x6.png
-/images/icons/volume_mute_12x9.png
-/images/icons/volume_mute_16x12.png
-/images/icons/volume_mute_24x18.png
-/images/icons/volume_mute_32x24.png
-/images/icons/volume_mute_8x6.png
+css/font-awesome.css
+css/font-awesome.min.css
+css/iscroll-pull-icon@2x.png
+css/jquery.mobile.flatui.css
+css/jquery.mobile.flatui.min.css
+css/jquery.mobile.iscrollview.css
+css/jquery.mobile.iscrollview-pull.css
+css/webclient.css

-/js/add2home.js
-/js/controls.js
-/js/fastclick.js
-/js/functionsvars.js
-/js/gui.js
-/js/iscroll-lite.js
-/js/iscroll.js
-/js/jquery-1.8.3.js
-/js/jquery-1.8.3.min.js
-/js/jquery.ba-hashchange.min.js
-/js/jquery.mobile-1.3.0-rc.1.js
-/js/jquery.mobile-1.3.0-rc.1.min.js
-/js/jquery.mobile-1.3.0.js
-/js/jquery.mobile-1.3.0.min.js
-/js/jquery.mobile.iscrollview-closure-min.js
-/js/jquery.mobile.iscrollview-yui-min.js
-/js/jquery.mobile.iscrollview.js
-/js/jquery.touchwipe.min.js
-/js/jquery.truncate.min.js
-/js/lastfm.api.cache.js
-/js/lastfm.api.js
-/js/lastfm.api.md5.js
-/js/lastfm.js
-/js/library.js
-/js/process_ws.js
+images/icons/musicbox32.gif
+images/icons/musicbox32.png
+images/icons/musicbox57.png
+images/icons/musicbox72.png
+images/icons/musicbox114.png
+
+images/default_cover.png
+images/empty.png
+images/loader.gif
+images/startup.png
+images/user_24x32.png
+
+js/add2home.js
+js/controls.js
+js/fastclick.js
+js/functionsvars.js
+js/gui.js
+js/images.js
+js/iscroll.js
+js/iscroll-lite.js
+js/jquery.cookie.js
+js/jquery.mobile.iscrollview.js
+js/jquery.mobile.iscrollview-closure-min.js
+js/jquery.mobile.iscrollview-yui-min.js
+js/jquery.mobile-1.3.2.min.js
+js/jquery.mobile-1.3.2.min.map
+js/jquery.touchwipe.min.js
+js/jquery.truncate.min.js
+js/jquery-1.11.1.min.js
+js/jquery-1.11.1.min.map
+js/lastfm.api.cache.js
+js/lastfm.api.js
+js/lastfm.api.md5.js
+js/lastfm.js
+js/library.js
+js/process_ws.js
+js/streamuris.js
+
+dialog-success.html
+index.html
+mb.manifest
+system.html

 NETWORK:
 *
--- a/mopidy_musicbox_webclient/static/system.html
+++ b/mopidy_musicbox_webclient/static/system.html
@ -8,7 +8,7 @@
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <script src="js/jquery-1.11.1.min.js"></script>
-    <link rel="stylesheet" type="text/css" href="css/jquery.mobile.flatui.css"/>
+    <link rel="stylesheet" type="text/css" href="css/jquery.mobile.flatui.min.css"/>
    <script src="js/jquery.mobile-1.3.2.min.js"></script>
    <script src="js/controls.js"></script>
    <script src="js/functionsvars.js"></script>
--- a/screenshots/artist.png
+++ b/screenshots/artist.png
--- a/screenshots/playlists-albums-cut.png
+++ b/screenshots/playlists-albums-cut.png
--- a/screenshots/playlists-albums.png
+++ b/screenshots/playlists-albums.png
--- a/screenshots/playlists.png
+++ b/screenshots/playlists.png
--- a/screenshots/queue-small.png
+++ b/screenshots/queue-small.png
--- a/screenshots/queue.png
+++ b/screenshots/queue.png
--- a/screenshots/search-small.png
+++ b/screenshots/search-small.png
--- a/screenshots/search.png
+++ b/screenshots/search.png