Avoiding clash with bootstrap

Using #chatpanel in front of every css class to avoid css name clashing
with bootstrap and other css frameworks

converse.css

@@ -8,20 +8,20 @@
 
 @import url("fonticons/style.css");
 
-#collective-xmpp-chat-data,
-#collective-xmpp-chat-data input {
+#chatpanel #collective-xmpp-chat-data,
+#chatpanel #collective-xmpp-chat-data input {
   color: rgb(79, 79, 79);
 }
 
-.hidden {
+#chatpanel .hidden {
     display: none
 }
 
-.locked {
+#chatpanel .locked {
     padding-right: 22px;
 }
 
-span.spinner {
+#chatpanel span.spinner {
     background: url(images/spinner.gif) no-repeat center;
     width: 22px;
     height: 22px;
@@ -29,14 +29,14 @@ span.spinner {
     display: block;
 }
 
-span.spinner.centered {
+#chatpanel span.spinner.centered {
     position: absolute;
     top: 30%;
     left: 50%;
     margin: 0 0 0 -25%;
 }
 
-span.spinner.hor_centered {
+#chatpanel span.spinner.hor_centered {
     left: 40%;
     position: absolute;
 }
@@ -49,7 +49,7 @@ span.spinner.hor_centered {
     width: auto;
 }
 
-#toggle-controlbox {
+#chatpanel #toggle-controlbox {
     position: fixed;
     font-size: 70%;
     bottom: 0;
@@ -64,12 +64,12 @@ span.spinner.hor_centered {
     height: 16px;
 }
 
-#connecting-to-chat {
+#chatpanel #connecting-to-chat {
     background: url(images/spinner.gif) no-repeat left;
     padding-left: 1.4em;
 }
 
-.chat-head {
+#chatpanel .chat-head {
     color: #ffffff;
     margin: 0;
     font-size: 100%;
@@ -78,16 +78,16 @@ span.spinner.hor_centered {
     padding: 3px 0 0 3px;
 }
 
-.chat-head-chatbox {
+#chatpanel .chat-head-chatbox {
     background-color: rgb(79, 106, 114);
     background-color: rgba(79, 106, 114, 1);
 }
 
-.chat-head-chatroom {
+#chatpanel .chat-head-chatroom {
     background-color: #2D617A;
 }
 
-.chatroom .chat-body {
+#chatpanel .chatroom .chat-body {
     height: 274px;
     background-color: white;
     border-bottom-right-radius: 4px;
@@ -95,17 +95,17 @@ span.spinner.hor_centered {
     border-top: 0;
 }
 
-.chatroom .chat-area {
+#chatpanel .chatroom .chat-area {
     float: left;
     width: 200px;
 }
 
-.chatroom .chat {
+#chatpanel .chatroom .chat {
     overflow: auto;
     height: 400px;
 }
 
-.chatroom .participants {
+#chatpanel .chatroom .participants {
     float: left;
     overflow: auto;
     border-left: 1px solid #AAA;
@@ -117,7 +117,7 @@ span.spinner.hor_centered {
     border-bottom-right-radius: 4px;
 }
 
-.participants ul.participant-list li {
+#chatpanel .participants ul.participant-list li {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -127,21 +127,21 @@ span.spinner.hor_centered {
     cursor: default;
 }
 
-ul.participant-list li.moderator {
+#chatpanel ul.participant-list li.moderator {
     color: #FE0007;
 }
 
-.chatroom .participant-list {
+#chatpanel .chatroom .participant-list {
     list-style: none;
 }
 
-.chat-blink {
+#chatpanel .chat-blink {
     background-color: #176679;
     border-right:1px solid #176679;
     border-left:1px solid #176679;
 }
 
-.chat-content {
+#chatpanel .chat-content {
     padding: 0.3em;
     font-size: 13px;
     color: rgb(79, 79, 79);
@@ -153,32 +153,32 @@ ul.participant-list li.moderator {
     line-height: 1.3em;
 }
 
-.chat-textarea {
+#chatpanel .chat-textarea {
     border: 0;
     height: 50px;
 }
 
-.chat-textarea-chatbox-selected {
+#chatpanel .chat-textarea-chatbox-selected {
     border: 1px solid #578308;
     margin:0;
 }
 
-.chat-textarea-chatroom-selected {
+#chatpanel .chat-textarea-chatroom-selected {
     border: 2px solid #2D617A;
     margin:0;
 }
 
-.chatroom .chat-content {
+#chatpanel .chatroom .chat-content {
     height:200px;
 }
 
-.chat-info {
+#chatpanel .chat-info {
     color:#666666;
 }
 
-.chat-message-room,
-.chat-message-them,
-.chat-message-me {
+#chatpanel .chat-message-room,
+#chatpanel .chat-message-them,
+#chatpanel .chat-message-me {
     font-weight: bold;
     white-space: nowrap;
     max-width: 100px;
@@ -189,75 +189,77 @@ ul.participant-list li.moderator {
     padding-right: 3px;
 }
 
-.chat-message-content {
+#chatpanel .chat-message-content {
     word-wrap: break-word;
 }
 
-.chat-message-them {
+#chatpanel .chat-message-them {
     color: #F62817;
 }
 
-.chat-message-me {
+#chatpanel .chat-message-me {
     color: #436976;
 }
 
-.chat-message-room {
+#chatpanel .chat-message-room {
     color: #4B7003;
 }
 
-.chat-event, .chat-date, .chat-info {
+#chatpanel .chat-event,
+#chatpanel .chat-date,
+#chatpanel .chat-info {
     color: #808080;
 }
 
-li.chat-info {
+#chatpanel li.chat-info {
     padding-left: 10px;
 }
 
-.chat-date {
+#chatpanel .chat-date {
     display: inline-block;
     padding-top: 10px;
 }
 
-div#settings,
-div#chatrooms,
-div#login-dialog {
+#chatpanel div#settings,
+#chatpanel div#chatrooms,
+#chatpanel div#login-dialog {
     height: 274px;
 }
 
-p.not-implemented {
+#chatpanel p.not-implemented {
     margin-top: 3em;
     margin-left: 0.3em;
     color: #808080;
 }
 
-div.delayed .chat-message-them {
+#chatpanel div.delayed .chat-message-them {
     color: #FB5D50;
 }
 
-div.delayed .chat-message-me {
+#chatpanel div.delayed .chat-message-me {
     color: #7EABBB;
 }
 
-input.error {
+#chatpanel input.error {
     border: 1px solid red;
 }
 
-.conn-feedback.error {
+#chatpanel .conn-feedback.error {
     color: red;
 }
 
-.chat-message-error {
+#chatpanel .chat-message-error {
     color:#76797C;
     font-size:90%;
     font-weight:normal;
 }
 
-.chat-head .avatar {
+#chatpanel .chat-head .avatar {
     float: left;
     margin-right: 6px;
 }
 
-div.chat-title {
+#chatpanel div.chat-title {
     color: white;
     font-weight: bold;
     line-height: 15px;
@@ -271,15 +273,15 @@ div.chat-title {
     height: 1em;
 }
 
-.chat-head-chatbox,
-.chat-head-chatroom {
+#chatpanel .chat-head-chatbox,
+#chatpanel .chat-head-chatroom {
     background: linear-gradient(top, rgba(206,220,231,1) 0%,rgba(79,106,114,1) 100%);
     height: 35px;
     position: relative;
 }
 
-p.user-custom-message,
-p.chatroom-topic {
+#chatpanel p.user-custom-message,
+#chatpanel p.chatroom-topic {
     font-size: 80%;
     font-style: italic;
     height: 1.3em;
@@ -289,30 +291,30 @@ p.chatroom-topic {
     margin: 0;
 }
 
-.activated{
+#chatpanel .activated{
     display: block !important;
 }
 
-a.subscribe-to-user {
+#chatpanel a.subscribe-to-user {
     padding-left: 2em;
     font-weight: bold;
 }
 
-dl.add-converse-contact {
+#chatpanel dl.add-converse-contact {
     margin: 0 0 0 0.5em;
 }
 
-.fancy-dropdown {
+#chatpanel .fancy-dropdown {
     border:1px solid #ddd;
     height: 22px;
 }
 
-.fancy-dropdown a.choose-xmpp-status {
+#chatpanel .fancy-dropdown a.choose-xmpp-status {
     width: 155px;
 }
 
-.fancy-dropdown a.choose-xmpp-status,
-.fancy-dropdown a.toggle-xmpp-contact-form {
+#chatpanel .fancy-dropdown a.choose-xmpp-status,
+#chatpanel .fancy-dropdown a.toggle-xmpp-contact-form {
     text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
     overflow: hidden;
     text-overflow: ellipsis;
@@ -320,17 +322,17 @@ dl.add-converse-contact {
     display: inline;
 }
 
-.fancy-dropdown a.toggle-xmpp-contact-form span {
-   float: left; 
+#chatpanel .fancy-dropdown a.toggle-xmpp-contact-form span {
+   float: left;
 }
 
-.choose-xmpp-status span {
-    padding-right: 5px; 
-    padding-left: 5px; 
+#chatpanel .choose-xmpp-status span {
+    padding-right: 5px;
+    padding-left: 5px;
     float: left;
 }
 
-#fancy-xmpp-status-select a.change-xmpp-status-message {
+#chatpanel #fancy-xmpp-status-select a.change-xmpp-status-message {
     float: right;
     clear: right;
     height: 22px;
@@ -338,22 +340,22 @@ dl.add-converse-contact {
     color: rgb(79, 79, 79);
 }
 
-ul#found-users {
+#chatpanel ul#found-users {
     padding: 10px 0 5px 5px;
     border: 0;
 }
 
-form.search-xmpp-contact {
+#chatpanel form.search-xmpp-contact {
     margin: 0;
     padding-left: 5px;
     padding: 0 0 5px 5px;
 }
 
-form.search-xmpp-contact input {
+#chatpanel form.search-xmpp-contact input {
     width: 8em;
 }
 
-.oc-chat-head {
+#chatpanel .oc-chat-head {
     margin: 0;
     color: #FFF;
     border-top-right-radius: 4px;
@@ -364,8 +366,8 @@ form.search-xmpp-contact input {
     padding: 3px 0 0 0;
 }
 
-a.configure-chatroom-button,
-a.close-chatbox-button {
+#chatpanel a.configure-chatroom-button,
+#chatpanel a.close-chatbox-button {
     font-size: 10px;
     padding: 3px 3px 2px 3px;
     margin-right: 3px;
@@ -387,18 +389,18 @@ a.close-chatbox-button {
     text-shadow:1px 1px 0 #ffffff;
 }
 
-a.configure-chatroom-button:active,
-a.close-chatbox-button:active {
+#chatpanel a.configure-chatroom-button:active,
+#chatpanel a.close-chatbox-button:active {
     position:relative;
     top:1px;
 }
 
-.oc-chat-content dt {
+#chatpanel .oc-chat-content dt {
     margin: 0;
     padding-top: 0.5em;
 }
 
-.chatroom-form-container {
+#chatpanel .chatroom-form-container {
     color: #666;
     padding: 5px;
     height: 262px;
@@ -407,56 +409,56 @@ a.close-chatbox-button:active {
     border-bottom-left-radius: 4px;
 }
 
-.chatroom-form {
+#chatpanel .chatroom-form {
     background: white;
     font-size: 12px;
     padding: 10px 5px;
 }
 
-.chat-body p {
+#chatpanel .chat-body p {
     font-size: 14px;
     color: #666;
     padding: 5px;
     margin: 0;
 }
 
-.chatroom-form legend {
+#chatpanel .chatroom-form legend {
     font-size: 14px;
     font-weight: bold;
     margin-bottom: 5px;
 }
 
-.chatroom-form label {
+#chatpanel .chatroom-form label {
     font-weight: bold;
     display: block;
     clear: both;
 }
 
-.chatroom-form label input,
-.chatroom-form label select {
+#chatpanel .chatroom-form label input,
+#chatpanel .chatroom-form label select {
     float: right;
 }
 
-#converse-roster dd.odd {
+#chatpanel #converse-roster dd.odd {
     background-color: #DCEAC5; /* Make this difference */
 }
 
-#converse-roster dd.current-xmpp-contact {
+#chatpanel #converse-roster dd.current-xmpp-contact {
     clear: both;
 }
 
-#converse-roster dd.current-xmpp-contact span {
+#chatpanel #converse-roster dd.current-xmpp-contact span {
     font-size: 16px;
     float: left;
     color: rgb(79, 79, 79);
 }
 
-#converse-roster dd.requesting-xmpp-contact button{
+#chatpanel #converse-roster dd.requesting-xmpp-contact button{
     margin-left: 0.5em;
 }
 
-#converse-roster dd a,
-#converse-roster dd span {
+#chatpanel #converse-roster dd a,
+#chatpanel #converse-roster dd span {
     text-shadow: 0 1px 0 rgba(250, 250, 250, 1);
     display: inline-block;
     overflow: hidden;
@@ -464,11 +466,11 @@ a.close-chatbox-button:active {
     text-overflow: ellipsis;
 }
 
-#converse-roster dd span {
+#chatpanel #converse-roster dd span {
     padding: 2px 5px 0 0;
 }
 
-#converse-roster {
+#chatpanel #converse-roster {
     height: 200px;
     overflow-y: auto;
     overflow-x: hidden;
@@ -480,7 +482,7 @@ a.close-chatbox-button:active {
     margin-top: 0.5em;
 }
 
-#available-chatrooms dd {
+#chatpanel #available-chatrooms dd {
     overflow-x: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -488,8 +490,8 @@ a.close-chatbox-button:active {
     width: 165px;
 }
 
-#available-chatrooms dt,
-#converse-roster dt {
+#chatpanel #available-chatrooms dt,
+#chatpanel #converse-roster dt {
     font-weight: normal;
     font-size: 13px;
     color: #666;
@@ -498,12 +500,12 @@ a.close-chatbox-button:active {
     text-shadow: 0 1px 0 rgba(250, 250, 250, 1);
 }
 
-#converse-roster dt {
+#chatpanel #converse-roster dt {
     display: none;
 }
 
-dd.available-chatroom,
-#converse-roster dd {
+#chatpanel dd.available-chatroom,
+#chatpanel #converse-roster dd {
     font-weight: bold;
     border: none;
     display: block;
@@ -512,29 +514,29 @@ dd.available-chatroom,
     text-shadow: 0 1px 0 rgba(250, 250, 250, 1);
 }
 
-.room-info {
+#chatpanel .room-info {
     font-size: 11px;
     font-style: normal;
     font-weight: normal;
 }
 
-li.room-info {
+#chatpanel li.room-info {
     display: block;
     margin-left: 5px;
 }
 
-div.room-info {
+#chatpanel div.room-info {
     clear: left;
 }
 
-p.room-info {
+#chatpanel p.room-info {
     margin: 0;
     padding: 0;
     display: block;
     white-space: normal;
 }
 
-a.room-info {
+#chatpanel a.room-info {
     width: 22px;
     height: 22px;
     float: right;
@@ -542,20 +544,20 @@ a.room-info {
     clear: right;
 }
 
-a.open-room {
+#chatpanel a.open-room {
     float: left;
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow-x: hidden;
 }
 
-dd.available-chatroom:hover a.room-info {
+#chatpanel dd.available-chatroom:hover a.room-info {
     display: inline-block;
     margin-top: 3px;
     font-size: 15px;
 }
 
-#converse-roster dd a.remove-xmpp-contact {
+#chatpanel #converse-roster dd a.remove-xmpp-contact {
     line-height: 21px;
     float: right;
     width: 22px;
@@ -564,20 +566,20 @@ dd.available-chatroom:hover a.room-info {
     color: rgb(79, 79, 79);
 }
 
-#converse-roster  dd:hover a.remove-xmpp-contact {
+#chatpanel #converse-roster  dd:hover a.remove-xmpp-contact {
     display: inline-block;
 }
 
-#converse-roster a.open-chat {
+#chatpanel #converse-roster a.open-chat {
     line-height: 21px;
     width: 85%;
 }
-#converse-roster  dd:hover a.open-chat {
+#chatpanel #converse-roster  dd:hover a.open-chat {
     width: 70%;
 }
 
-.chatbox,
-.chatroom {
+#chatpanel .chatbox,
+#chatpanel .chatroom {
     box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.4);
     display:none;
     float: right;
@@ -586,32 +588,32 @@ dd.available-chatroom:hover a.room-info {
     border-radius: 4px;
 }
 
-.chatbox {
+#chatpanel .chatbox {
     width: 200px;
 }
 
-.chatroom {
+#chatpanel .chatroom {
     width: 300px;
 }
 
-.oc-chat-content {
+#chatpanel .oc-chat-content {
     height:274px;
     padding: 0;
     border-bottom-right-radius: 4px;
     border-bottom-left-radius: 4px;
 }
 
-.oc-chat-content dd {
+#chatpanel .oc-chat-content dd {
     margin-left: 0;
     margin-bottom: 0;
     padding: 1em;
 }
 
-.oc-chat-content dd.odd {
+#chatpanel .oc-chat-content dd.odd {
     background-color: #DCEAC5;
 }
 
-div#controlbox-panes {
+#chatpanel div#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+ */
@@ -625,49 +627,49 @@ div#controlbox-panes {
 }
 
 
-form#converse-login {
+#chatpanel form#converse-login {
     background: white;
     padding: 2em 0 0.3em 0.5em;
 }
 
-form#converse-login input {
+#chatpanel form#converse-login input {
     display: block;
     width: 90%;
 }
 
-form#converse-login .login-submit {
+#chatpanel form#converse-login .login-submit {
     margin-top: 1em;
     width: auto;
 }
 
-form.set-xmpp-status {
+#chatpanel form.set-xmpp-status {
     background: none;
     padding: 0.5em 0 0.5em 0.5em;
 }
 
-form.add-chatroom {
+#chatpanel form.add-chatroom {
     background: none;
     padding: 3px;
 }
 
-form.add-chatroom input[type=text] {
+#chatpanel form.add-chatroom input[type=text] {
     width: 95%;
     margin: 3px;
 }
 
-form.add-chatroom input[type=button],
-form.add-chatroom input[type=submit] {
+#chatpanel form.add-chatroom input[type=button],
+#chatpanel form.add-chatroom input[type=submit] {
     width: 48%;
 }
 
-select#select-xmpp-status {
+#chatpanel select#select-xmpp-status {
     float: right;
     margin-right: 0.5em;
 }
 
 /* @group Tabs */
 
-.chat-head #controlbox-tabs {
+#chatpanel .chat-head #controlbox-tabs {
     text-align: center;
     display: inline;
     overflow: hidden;
@@ -676,7 +678,7 @@ select#select-xmpp-status {
 }
 
 /* single tab */
-.chat-head #controlbox-tabs li {
+#chatpanel .chat-head #controlbox-tabs li {
     float:left;
     list-style: none;
     padding-left: 0;
@@ -684,7 +686,7 @@ select#select-xmpp-status {
     width: 40%;
 }
 
-ul#controlbox-tabs li a {
+#chatpanel ul#controlbox-tabs li a {
     display:block;
     font-size:12px;
     height: 34px;
@@ -698,17 +700,18 @@ ul#controlbox-tabs li a {
     text-shadow: 0 1px 0 rgba(250, 250, 250, 1);
 }
 
-.chat-head #controlbox-tabs li a:hover {
+#chatpanel .chat-head #controlbox-tabs li a:hover {
     color: black;
 }
 
-.chat-head #controlbox-tabs li a {
+#chatpanel .chat-head #controlbox-tabs li a {
     background-color: white;
     box-shadow: inset 0 4px 12px rgba(0,0,0,0.3);
     border-bottom: 1px solid #CCC;
 }
 
-ul#controlbox-tabs a.current, ul#controlbox-tabs a.current:hover {
+#chatpanel ul#controlbox-tabs a.current,
+#chatpanel ul#controlbox-tabs a.current:hover {
     box-shadow: none;
     border-bottom: 0;
     height: 35px;
@@ -716,10 +719,10 @@ ul#controlbox-tabs a.current, ul#controlbox-tabs a.current:hover {
     color: rgb(102,102,102);
 }
 
-div#users,
-div#chatrooms,
-div#login-dialog,
-div#settings {
+#chatpanel div#users,
+#chatpanel div#chatrooms,
+#chatpanel div#login-dialog,
+#chatpanel div#settings {
     border: 0;
     font-size: 14px;
     background-color: white;
@@ -728,11 +731,11 @@ div#settings {
     width: 100%;
 }
 
-div#chatrooms {
+#chatpanel div#chatrooms {
     overflow-y: auto;
 }
 
-form.sendXMPPMessage {
+#chatpanel form.sendXMPPMessage {
     background: white;
     border: 0;
     border-top: 1px solid #BBB;
@@ -751,13 +754,13 @@ form.sendXMPPMessage {
     width: 200px;
 }
 
-.chatroom form.sendXMPPMessage {
+#chatpanel .chatroom form.sendXMPPMessage {
     -webkit-border-bottom-right-radius: 0;
     border-bottom-right-radius: 0;
     height: 65px;
 }
 
-.chat-textarea {
+#chatpanel .chat-textarea {
     box-sizing: border-box;
     -moz-box-sizing: border-box;
     border: 0;
@@ -768,7 +771,7 @@ form.sendXMPPMessage {
     height: 65px;
 }
 
-ul.chat-toolbar {
+#chatpanel ul.chat-toolbar {
     font-size: 14px;
     margin: 0;
     padding: 0 5px 0 0;
@@ -777,70 +780,74 @@ ul.chat-toolbar {
     height: 20px;
 }
 
-ul.chat-toolbar li {
+#chatpanel ul.chat-toolbar li {
     display: inline-block;
     list-style: none;
     padding: 0 3px 0 3px;
 }
 
-ul.chat-toolbar li:hover {
-    cursor: pointer; 
+#chatpanel ul.chat-toolbar li:hover {
+    cursor: pointer;
     color: rgb(39, 39, 39);
 }
 
-form#set-custom-xmpp-status {
+#chatpanel form#set-custom-xmpp-status {
     float: left;
     padding: 0;
 }
 
-.chat-textarea-chatbox-selected {
+#chatpanel .chat-textarea-chatbox-selected {
     border: 1px solid #578308;
     margin:0;
 }
 
-.chat-textarea-chatroom-selected {
+#chatpanel .chat-textarea-chatroom-selected {
     border: 2px solid #2D617A;
     margin:0;
 }
 
-#set-custom-xmpp-status button {
+#chatpanel #set-custom-xmpp-status button {
     padding: 1px 2px 1px 1px;
 }
 
-#controlbox div.xmpp-status {
+#chatpanel #controlbox div.xmpp-status {
     display: inline;
 }
 
 /* status dropdown styles */
-.chatbox dl.dropdown {
+#chatpanel .chatbox dl.dropdown {
     margin-right: 0.5em;
     margin-bottom: 0;
     background-color: rgb(240, 240, 240);
 }
-.chatbox .dropdown dd, .dropdown dt, .dropdown ul { margin:0px; padding:0px; }
-.chatbox .dropdown dd { position:relative; }
+#chatpanel .chatbox .dropdown dd,
+#chatpanel .dropdown dt,
+#chatpanel .dropdown ul {
+    margin:0px; padding:0px;
+}
+#chatpanel .chatbox .dropdown dd { position:relative; }
 
-input.custom-xmpp-status {
+#chatpanel input.custom-xmpp-status {
     width: 138px;
 }
 
-form.add-xmpp-contact {
+#chatpanel form.add-xmpp-contact {
     background: none;
     padding: 5px;
 }
 
-form.add-xmpp-contact input {
+#chatpanel form.add-xmpp-contact input {
     width: 120px;
 }
 
-.chatbox .dropdown dt a span {
-    cursor:pointer; 
-    display:block; 
+#chatpanel .chatbox .dropdown dt a span {
+    cursor:pointer;
+    display:block;
     padding: 4px 7px 0 5px;
     color: rgb(79, 79, 79);
 }
 
-.chatbox .dropdown dd ul {
+#chatpanel .chatbox .dropdown dd ul {
     padding: 5px 0 5px 0;
     list-style:none;
     position:absolute; left:0; top:0;
@@ -851,30 +858,30 @@ form.add-xmpp-contact input {
     background-color: rgb(240, 240, 240);
 }
 
-.chatbox .dropdown li {
+#chatpanel .chatbox .dropdown li {
     list-style: none;
     padding-left: 0;
 }
 
-.set-xmpp-status .dropdown dd ul {
+#chatpanel .set-xmpp-status .dropdown dd ul {
     z-index: 22;
 }
 
-.chatbox .dropdown a {
+#chatpanel .chatbox .dropdown a {
     height: 22px;
     display: inline-block;
     line-height: 24px;
 }
 
-.chatbox .dropdown dd ul a:hover {
+#chatpanel .chatbox .dropdown dd ul a:hover {
     background-color: #bed6e5;
 }
 
-.xmpp-status-menu li a {
+#chatpanel .xmpp-status-menu li a {
     width: 100%;
 }
 
-.xmpp-status-menu li a span {
+#chatpanel .xmpp-status-menu li a span {
     padding: 0 5px 0 5px;
     color: rgb(79, 79, 79);
 }