Use class instead of id for controlbox-panes element

converse.css

@@ -216,7 +216,6 @@ li.chat-info {
     padding-top: 10px;
 }
 
-div#settings,
 div#chatrooms,
 div#login-dialog {
     height: 274px;
@@ -609,7 +608,7 @@ dd.available-chatroom:hover a.room-info {
     background-color: #DCEAC5;
 }
 
-div#controlbox-panes {
+.controlbox-panes {
     background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(240,240,240,1) 100%); /* FF3.6+ */
     background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(240,240,240,1) 100%); /* IE10+ */
     background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(240,240,240,1) 100%); /* Opera 11.10+ */

converse.js

@@ -1318,7 +1318,7 @@
                     '<ul id="controlbox-tabs"></ul>'+
                     '<a class="close-chatbox-button icon-close"></a>'+
                 '</div>'+
-                '<div id="controlbox-panes"></div>'
+                '<div class="controlbox-panes"></div>'
             ),
 
             switchTab: function (ev) {
@@ -1345,15 +1345,15 @@
                 if ((!converse.prebind) && (!converse.connection)) {
                     // Add login panel if the user still has to authenticate
                     this.$el.html(this.template(this.model.toJSON()));
-                    this.loginpanel = new converse.LoginPanel({'$parent': this.$el.find('#controlbox-panes'), 'model': this});
+                    this.loginpanel = new converse.LoginPanel({'$parent': this.$el.find('.controlbox-panes'), 'model': this});
                     this.loginpanel.render();
                 } else if (!this.contactspanel) {
                     this.$el.html(this.template(this.model.toJSON()));
-                    this.contactspanel = new converse.ContactsPanel({'$parent': this.$el.find('#controlbox-panes')});
+                    this.contactspanel = new converse.ContactsPanel({'$parent': this.$el.find('.controlbox-panes')});
                     this.contactspanel.render();
                     converse.xmppstatusview = new converse.XMPPStatusView({'model': converse.xmppstatus});
                     converse.xmppstatusview.render();
-                    this.roomspanel = new converse.RoomsPanel({'$parent': this.$el.find('#controlbox-panes')});
+                    this.roomspanel = new converse.RoomsPanel({'$parent': this.$el.find('.controlbox-panes')});
                     this.roomspanel.render();
                 }
                 return this;

mockup.html

@@ -27,7 +27,7 @@
                     <li><a class="current" href="#login">Sign in</a></li>
                 </ul>
                 <a class="close-chatbox-button icon-close"></a></div>
-                <div id="controlbox-panes">
+                <div class="controlbox-panes">
                     <div id="login-dialog">
                     <form id="converse-login">
                         <label>XMPP/Jabber Username:</label><input type="text" id="jid">
@@ -46,7 +46,7 @@
                 </ul>
                 <a class="close-chatbox-button icon-close"></a>
             </div>
-        <div id="controlbox-panes">
+        <div class="controlbox-panes">
             <div id="users" class="oc-chat-content" style="display: block;">
                 <form class="set-xmpp-status" action="" method="post">
                     <span id="xmpp-status-holder">