diff --git a/bottom_toolbar.js b/bottom_toolbar.js
index 7aaa4476e..0a7478d92 100644
--- a/bottom_toolbar.js
+++ b/bottom_toolbar.js
@@ -2,7 +2,11 @@ var BottomToolbar = (function (my) {
     my.toggleChat = function() {
         if (ContactList.isVisible()) {
             buttonClick("#contactListButton", "active");
-            ContactList.toggleContactList();
+            $('#contactlist').css('z-index', 4);
+            setTimeout(function() {
+                $('#contactlist').css('display', 'none');
+                $('#contactlist').css('z-index', 5);
+            }, 500);
         }
 
         buttonClick("#chatBottomButton", "active");
@@ -13,7 +17,9 @@ var BottomToolbar = (function (my) {
     my.toggleContactList = function() {
         if (Chat.isVisible()) {
             buttonClick("#chatBottomButton", "active");
-            Chat.toggleChat();
+            setTimeout(function() {
+                $('#chatspace').css('display', 'none');
+            }, 500);
         }
 
         buttonClick("#contactListButton", "active");
diff --git a/chat.js b/chat.js
index 8b6e7abd0..c308f276f 100644
--- a/chat.js
+++ b/chat.js
@@ -143,7 +143,7 @@ var Chat = (function (my) {
         var chatspace = $('#chatspace');
         var videospace = $('#videospace');
 
-        var chatSize = (chatspace.is(":visible")) ? [0, 0] : Chat.getChatSize();
+        var chatSize = (Chat.isVisible()) ? [0, 0] : Chat.getChatSize();
         var videospaceWidth = window.innerWidth - chatSize[0];
         var videospaceHeight = window.innerHeight;
         var videoSize
@@ -160,97 +160,64 @@ var Chat = (function (my) {
         var thumbnailSize = VideoLayout.calculateThumbnailSize(videospaceWidth);
         var thumbnailsWidth = thumbnailSize[0];
         var thumbnailsHeight = thumbnailSize[1];
+        var completeFunction = Chat.isVisible() ?
+            function() {} : function () {
+                                scrollChatToBottom();
+                                chatspace.trigger('shown');
+                            };
 
-        if (chatspace.is(":visible")) {
-            videospace.animate({right: chatSize[0],
-                                width: videospaceWidth,
-                                height: videospaceHeight},
-                                {queue: false,
-                                duration: 500});
+        videospace.animate({right: chatSize[0],
+                            width: videospaceWidth,
+                            height: videospaceHeight},
+                            {queue: false,
+                            duration: 500,
+                            complete: completeFunction});
 
-            $('#remoteVideos').animate({height: thumbnailsHeight},
+        $('#remoteVideos').animate({height: thumbnailsHeight},
+                                    {queue: false,
+                                    duration: 500});
+
+        $('#remoteVideos>span').animate({height: thumbnailsHeight,
+                                        width: thumbnailsWidth},
                                         {queue: false,
-                                        duration: 500});
+                                        duration: 500,
+                                        complete: function() {
+                                            $(document).trigger(
+                                                    "remotevideo.resized",
+                                                    [thumbnailsWidth,
+                                                     thumbnailsHeight]);
+                                        }});
 
-            $('#remoteVideos>span').animate({height: thumbnailsHeight,
-                                            width: thumbnailsWidth},
+        $('#largeVideoContainer').animate({ width: videospaceWidth,
+                                            height: videospaceHeight},
                                             {queue: false,
-                                            duration: 500,
-                                            complete: function() {
-                                                $(document).trigger(
-                                                        "remotevideo.resized",
-                                                        [thumbnailsWidth,
-                                                         thumbnailsHeight]);
-                                            }});
+                                             duration: 500
+                                            });
 
-            $('#largeVideoContainer').animate({ width: videospaceWidth,
-                                                height: videospaceHeight},
-                                                {queue: false,
-                                                 duration: 500
-                                                });
+        $('#largeVideo').animate({  width: videoWidth,
+                                    height: videoHeight,
+                                    top: verticalIndent,
+                                    bottom: verticalIndent,
+                                    left: horizontalIndent,
+                                    right: horizontalIndent},
+                                    {   queue: false,
+                                        duration: 500
+                                    }
+        );
 
-            $('#largeVideo').animate({  width: videoWidth,
-                                        height: videoHeight,
-                                        top: verticalIndent,
-                                        bottom: verticalIndent,
-                                        left: horizontalIndent,
-                                        right: horizontalIndent},
-                                        {   queue: false,
-                                            duration: 500
-                                        });
-
-            $('#chatspace').hide("slide", { direction: "right",
+        if (Chat.isVisible()) {
+            chatspace.hide("slide", { direction: "right",
                                             queue: false,
                                             duration: 500});
         }
         else {
             // Undock the toolbar when the chat is shown and if we're in a 
             // video mode.
-            if (VideoLayout.isLargeVideoVisible())
+            if (VideoLayout.isLargeVideoVisible()) {
                 ToolbarToggler.dockToolbar(false);
+            }
 
-            videospace.animate({right: chatSize[0],
-                                width: videospaceWidth,
-                                height: videospaceHeight},
-                               {queue: false,
-                                duration: 500,
-                                complete: function () {
-                                    scrollChatToBottom();
-                                    chatspace.trigger('shown');
-                                }
-                               });
-
-            $('#remoteVideos').animate({height: thumbnailsHeight},
-                    {queue: false,
-                    duration: 500});
-
-            $('#remoteVideos>span').animate({height: thumbnailsHeight,
-                        width: thumbnailsWidth},
-                        {queue: false,
-                        duration: 500,
-                        complete: function() {
-                            $(document).trigger(
-                                    "remotevideo.resized",
-                                    [thumbnailsWidth, thumbnailsHeight]);
-                        }});
-
-            $('#largeVideoContainer').animate({ width: videospaceWidth,
-                                                height: videospaceHeight},
-                                                {queue: false,
-                                                 duration: 500
-                                                });
-
-            $('#largeVideo').animate({  width: videoWidth,
-                                        height: videoHeight,
-                                        top: verticalIndent,
-                                        bottom: verticalIndent,
-                                        left: horizontalIndent,
-                                        right: horizontalIndent},
-                                        {queue: false,
-                                         duration: 500
-                                        });
-
-            $('#chatspace').show("slide", { direction: "right",
+            chatspace.show("slide", { direction: "right",
                                             queue: false,
                                             duration: 500,
                                             complete: function () {
diff --git a/contact_list.js b/contact_list.js
index 9bb330110..3ad8d79af 100644
--- a/contact_list.js
+++ b/contact_list.js
@@ -96,95 +96,58 @@ var ContactList = (function (my) {
         var thumbnailSize = VideoLayout.calculateThumbnailSize(videospaceWidth);
         var thumbnailsWidth = thumbnailSize[0];
         var thumbnailsHeight = thumbnailSize[1];
+        var completeFunction = ContactList.isVisible() ?
+            function() {} : function () { contactlist.trigger('shown');};
+
+        videospace.animate({right: chatSize[0],
+                            width: videospaceWidth,
+                            height: videospaceHeight},
+                            {queue: false,
+                            duration: 500,
+                            complete: completeFunction
+                            });
+
+        $('#remoteVideos').animate({height: thumbnailsHeight},
+                                    {queue: false,
+                                    duration: 500});
+
+        $('#remoteVideos>span').animate({height: thumbnailsHeight,
+                                        width: thumbnailsWidth},
+                                        {queue: false,
+                                        duration: 500,
+                                        complete: function() {
+                                            $(document).trigger(
+                                                    "remotevideo.resized",
+                                                    [thumbnailsWidth,
+                                                     thumbnailsHeight]);
+                                        }});
+
+        $('#largeVideoContainer').animate({ width: videospaceWidth,
+                                            height: videospaceHeight},
+                                            {queue: false,
+                                             duration: 500
+                                            });
+
+        $('#largeVideo').animate({  width: videoWidth,
+                                    height: videoHeight,
+                                    top: verticalIndent,
+                                    bottom: verticalIndent,
+                                    left: horizontalIndent,
+                                    right: horizontalIndent},
+                                    {   queue: false,
+                                        duration: 500
+                                    });
 
         if (ContactList.isVisible()) {
-            videospace.animate({right: chatSize[0],
-                                width: videospaceWidth,
-                                height: videospaceHeight},
-                                {queue: false,
-                                duration: 500});
-
-            $('#remoteVideos').animate({height: thumbnailsHeight},
-                                        {queue: false,
-                                        duration: 500});
-
-            $('#remoteVideos>span').animate({height: thumbnailsHeight,
-                                            width: thumbnailsWidth},
-                                            {queue: false,
-                                            duration: 500,
-                                            complete: function() {
-                                                $(document).trigger(
-                                                        "remotevideo.resized",
-                                                        [thumbnailsWidth,
-                                                         thumbnailsHeight]);
-                                            }});
-
-            $('#largeVideoContainer').animate({ width: videospaceWidth,
-                                                height: videospaceHeight},
-                                                {queue: false,
-                                                 duration: 500
-                                                });
-
-            $('#largeVideo').animate({  width: videoWidth,
-                                        height: videoHeight,
-                                        top: verticalIndent,
-                                        bottom: verticalIndent,
-                                        left: horizontalIndent,
-                                        right: horizontalIndent},
-                                        {   queue: false,
-                                            duration: 500
-                                        });
-
             $('#contactlist').hide("slide", { direction: "right",
                                             queue: false,
                                             duration: 500});
-        }
-        else {
+        } else {
             // Undock the toolbar when the chat is shown and if we're in a 
             // video mode.
             if (VideoLayout.isLargeVideoVisible())
                 ToolbarToggler.dockToolbar(false);
 
-            videospace.animate({right: chatSize[0],
-                                width: videospaceWidth,
-                                height: videospaceHeight},
-                               {queue: false,
-                                duration: 500,
-                                complete: function () {
-                                    contactlist.trigger('shown');
-                                }
-                               });
-
-            $('#remoteVideos').animate({height: thumbnailsHeight},
-                    {queue: false,
-                    duration: 500});
-
-            $('#remoteVideos>span').animate({height: thumbnailsHeight,
-                        width: thumbnailsWidth},
-                        {queue: false,
-                        duration: 500,
-                        complete: function() {
-                            $(document).trigger(
-                                    "remotevideo.resized",
-                                    [thumbnailsWidth, thumbnailsHeight]);
-                        }});
-
-            $('#largeVideoContainer').animate({ width: videospaceWidth,
-                                                height: videospaceHeight},
-                                                {queue: false,
-                                                 duration: 500
-                                                });
-
-            $('#largeVideo').animate({  width: videoWidth,
-                                        height: videoHeight,
-                                        top: verticalIndent,
-                                        bottom: verticalIndent,
-                                        left: horizontalIndent,
-                                        right: horizontalIndent},
-                                        {queue: false,
-                                         duration: 500
-                                        });
-
             $('#contactlist').show("slide", { direction: "right",
                                             queue: false,
                                             duration: 500});
diff --git a/css/contact_list.css b/css/contact_list.css
index bb7823ee1..289d266a6 100644
--- a/css/contact_list.css
+++ b/css/contact_list.css
@@ -1,5 +1,5 @@
 #contactlist {
-    background-color:rgba(0,0,0,.65);
+    background-color: black;
 }
 
 #contactlist>ul {