Style the controlbox toggle.

converse.css

@@ -352,18 +352,17 @@ span.spinner.hor_centered {
 }
 
 #toggle-controlbox {
-    position: fixed;
-    font-size: 70%;
-    bottom: 0;
-    right: 0;
+    float: right;
+    font-size: 85%;
     border-top-right-radius: 4px;
     border-top-left-radius: 4px;
-    background: #e3e2e2;
-    border: 1px solid #c3c3c3;
-    border-bottom: none;
-    padding: 1px 3px;
-    margin-right: 15px;
-    height: 16px;
+    background-color: rgba(83, 144, 200, 100);
+    padding: 4px 8px;
+    margin-right: 5px;
+}
+
+#toggle-controlbox a {
+    color: white;
 }
 
 #connecting-to-chat {

mockup.html

@@ -63,6 +63,9 @@
 </div>
 
 <div id="conversejs">
+    <div id="toggle-controlbox">
+        <a href="#" class="chat toggle-online-users conn-feedback">Toggle Chat</a>
+    </div>
 
     <div id="controlbox" class="chatbox">
         <div class="box-flyout">
@@ -411,12 +414,6 @@
             </div>
         </div>
     </div>
-
-    <div id="toggle-controlbox">
-        <a href="#" class="chat toggle-online-users">
-            <strong class="conn-feedback">Toggle chat</strong> <strong style="display: none" id="online-count">(0)</strong>
-        </a>
-    </div>
 </div>
 
 <script>