diff --git a/www/assets/css/ytsync.css b/www/assets/css/ytsync.css
index ccca3137..466e37c3 100644
--- a/www/assets/css/ytsync.css
+++ b/www/assets/css/ytsync.css
@@ -95,8 +95,8 @@ html, body {
   cursor: pointer;
 }
 
-#leftpane-inner *, #rightpane-inner * {
-  margin-left: 0;
+#leftpane-inner div.span12, #rightpane-inner div.span12 {
+    margin-left: 0;
 }
 
 #plmeta {
diff --git a/www/assets/js/ui.js b/www/assets/js/ui.js
index b6720f98..abd7f926 100644
--- a/www/assets/js/ui.js
+++ b/www/assets/js/ui.js
@@ -1,58 +1,21 @@
-/* Usercount show/hide */
-$("#userlisttoggle").click(function() {
-    if($("#userlist").css("display") == "none") {
-        $("#userlist").show();
-        $("#userlisttoggle").removeClass("icon-chevron-down")
-            .addClass("icon-chevron-up");
-    }
-    else {
-        $("#userlist").hide();
-        $("#userlisttoggle").removeClass("icon-chevron-up")
-            .addClass("icon-chevron-down");
-    }
-});
+/* Generalized show/hide function */
+function generateToggle(chevron, div) {
+    $(chevron).click(function() {
+        if($(div).css("display") == "none") {
+            $(div).show();
+            $(chevron+" i").removeClass("icon-chevron-down")
+                .addClass("icon-chevron-up");
+        }
+        else {
+            $(div).hide();
+            $(chevron+" i").removeClass("icon-chevron-up")
+                .addClass("icon-chevron-down");
+        }
+    });
+}
 
-/* Library search show/hide */
 
-$("#librarytoggle").click(function() {
-    if($("#librarywrap").css("display") == "none") {
-        $("#librarywrap").show();
-        $("#librarytoggle i").removeClass("icon-chevron-down")
-            .addClass("icon-chevron-up");
-    }
-    else {
-        $("#librarywrap").hide();
-        $("#librarytoggle i").removeClass("icon-chevron-up")
-            .addClass("icon-chevron-down");
-    }
-});
-
-/* User playlist show/hide */
-
-$("#userpltoggle").click(function() {
-    if($("#userplaylistwrap").css("display") == "none") {
-        $("#userplaylistwrap").show();
-        $("#userpltoggle i").removeClass("icon-chevron-down")
-            .addClass("icon-chevron-up");
-    }
-    else {
-        $("#userplaylistwrap").hide();
-        $("#userpltoggle i").removeClass("icon-chevron-up")
-            .addClass("icon-chevron-down");
-    }
-});
-
-/* Playlist controls show/hide */
-
-$("#playlisttoggle").click(function() {
-    if($("#playlist_controls").css("display") == "none") {
-        $("#playlist_controls").show();
-        $("#playlisttoggle i").removeClass("icon-chevron-down")
-            .addClass("icon-chevron-up");
-    }
-    else {
-        $("#playlist_controls").hide();
-        $("#playlisttoggle i").removeClass("icon-chevron-up")
-            .addClass("icon-chevron-down");
-    }
-});
+generateToggle("#usercountwrap", "#userlist");
+generateToggle("#librarytoggle", "#librarywrap");
+generateToggle("#userpltoggle", "#userplaylistwrap");
+generateToggle("#playlisttoggle", "#playlist_controls");
diff --git a/www/channel-new.html b/www/channel-new.html
index bd7bc251..d21a0dff 100644
--- a/www/channel-new.html
+++ b/www/channel-new.html
@@ -60,8 +60,8 @@
           <!-- chat container -->
           <div class="span5" id="chatwrap">
             <!-- user count -->
-            <div id="usercountwrap">
-              <i class="icon-chevron-up pull-left pointer" id="userlisttoggle" title="Show/Hide Userlist"></i>
+            <div id="usercountwrap" class="pointer">
+              <i class="icon-chevron-up pull-left" id="userlisttoggle" title="Show/Hide Userlist"></i>
               <p id="usercount">Not connected</p>
             </div>
             <!-- userlist -->