xmpp/converse/css/converse.css

   1 /*!
   2  * Converse.js (Web-based XMPP instant messaging client)
   3  * http://conversejs.org
   4  *
   5  * Copyright (c) 2012-2014, JC Brand <jc@opkode.com>
   6  * Licensed under the Mozilla Public License
   7  */
   8 /*!
   9  * Converse.js (Web-based XMPP instant messaging client)
  10  * http://conversejs.org
  11  *
  12  * Copyright (c) 2012-2014, JC Brand <jc@opkode.com>
  13  * Licensed under the Mozilla Public License
  14  */
  15 @font-face {
  16   font-family: 'Converse-js';
  17   src: url("../fonticons/fonts/icomoon.eot?-mnoxh0");
  18   src: url("../fonticons/fonts/icomoon.eot?#iefix-mnoxh0") format("embedded-opentype"), url("../fonticons/fonts/icomoon.woff?-mnoxh0") format("woff"), url("../fonticons/fonts/icomoon.ttf?-mnoxh0") format("truetype"), url("../fonticons/fonts/icomoon.svg?-mnoxh0#icomoon") format("svg");
  19   font-weight: normal;
  20   font-style: normal; }
  21 .icon-conversejs {
  22   font-family: 'Converse-js';
  23   speak: none;
  24   font-style: normal;
  25   font-weight: normal;
  26   font-variant: normal;
  27   text-transform: none;
  28   line-height: 1;
  29   /* Better Font Rendering =========== */
  30   -webkit-font-smoothing: antialiased;
  31   -moz-osx-font-smoothing: grayscale; }
  32
  33 .icon-conversejs:before {
  34   content: "\e600"; }
  35
  36 #conversejs {
  37   color: #6C4C44;
  38   font-size: 14px;
  39   bottom: 0;
  40   direction: ltr;
  41   height: 35px;
  42   left: auto;
  43   position: fixed;
  44   right: 15px;
  45   z-index: 30;
  46   display: block;
  47   width: auto;
  48   -webkit-box-sizing: border-box;
  49   -moz-box-sizing: border-box;
  50   box-sizing: border-box;
  51   /* @group Tabs */
  52   /* status dropdown styles */ }
  53   #conversejs ::selection {
  54     background-color: #E1E6E5; }
  55   #conversejs ::-moz-selection {
  56     background-color: #E1E6E5; }
  57   #conversejs *, #conversejs *:before, #conversejs *:after {
  58     -webkit-box-sizing: border-box;
  59     -moz-box-sizing: border-box;
  60     box-sizing: border-box; }
  61   @media screen and (max-width: 480px) {
  62     #conversejs {
  63       margin: 0;
  64       right: 10px;
  65       left: 10px;
  66       bottom: 5px; } }
  67   #conversejs a, #conversejs a:visited {
  68     text-decoration: none;
  69     color: #444;
  70     text-shadow: none; }
  71   #conversejs ul li {
  72     height: auto; }
  73   #conversejs div, #conversejs span, #conversejs h1, #conversejs h2, #conversejs h3, #conversejs h4, #conversejs h5, #conversejs h6, #conversejs p, #conversejs blockquote,
  74   #conversejs pre, #conversejs a, #conversejs em, #conversejs img, #conversejs strong, #conversejs dl, #conversejs dt, #conversejs dd, #conversejs ol, #conversejs ul, #conversejs li,
  75   #conversejs fieldset, #conversejs form, #conversejs label, #conversejs legend, #conversejs table, #conversejs caption, #conversejs tbody,
  76   #conversejs tfoot, #conversejs thead, #conversejs tr, #conversejs th, #conversejs td, #conversejs article, #conversejs aside, #conversejs canvas, #conversejs details,
  77   #conversejs embed, #conversejs figure, #conversejs figcaption, #conversejs footer, #conversejs header, #conversejs hgroup, #conversejs menu,
  78   #conversejs nav, #conversejs output, #conversejs ruby, #conversejs section, #conversejs summary, #conversejs time, #conversejs mark, #conversejs audio, #conversejs video {
  79     margin: 0;
  80     padding: 0;
  81     border: 0;
  82     font: inherit;
  83     vertical-align: baseline; }
  84   #conversejs textarea,
  85   #conversejs input[type=submit], #conversejs input[type=button],
  86   #conversejs input[type=text], #conversejs input[type=password],
  87   #conversejs button {
  88     font-size: 14px;
  89     padding: 0.25em;
  90     min-height: 0; }
  91   #conversejs input[type=text] {
  92     height: 26px; }
  93   #conversejs strong {
  94     font-weight: 700; }
  95   #conversejs ol, #conversejs ul {
  96     list-style: none; }
  97   #conversejs li {
  98     height: 10px; }
  99   #conversejs ul, #conversejs ol, #conversejs dl {
 100     font: inherit;
 101     margin: 0; }
 102   #conversejs [data-icon]:before {
 103     content: attr(data-icon);
 104     font-family: 'Converse-js';
 105     font-variant: normal;
 106     font-weight: normal;
 107     line-height: 1;
 108     speak: none;
 109     text-transform: none;
 110     /* Better Font Rendering =========== */
 111     -webkit-font-smoothing: antialiased;
 112     -moz-osx-font-smoothing: grayscale; }
 113   #conversejs [class^="icon-"], #conversejs [class*=" icon-"] {
 114     background-position: 14px 14px;
 115     background-image: none;
 116     font-family: 'Converse-js', sans-serif;
 117     font-style: normal;
 118     font-variant: normal;
 119     font-weight: normal;
 120     width: auto;
 121     height: auto;
 122     line-height: 1;
 123     speak: none;
 124     text-transform: none;
 125     /* Better Font Rendering =========== */
 126     -webkit-font-smoothing: antialiased;
 127     -moz-osx-font-smoothing: grayscale; }
 128   #conversejs .icon-address-book:before {
 129     content: "\270f"; }
 130   #conversejs .icon-angry:before {
 131     content: "\e03f"; }
 132   #conversejs .icon-attachment:before {
 133     content: "\e032"; }
 134   #conversejs .icon-away:before {
 135     content: "\25fb"; }
 136   #conversejs .icon-blocked:before {
 137     content: "\2718"; }
 138   #conversejs .icon-bold:before {
 139     content: "\e04d"; }
 140   #conversejs .icon-bubbles-2:before {
 141     content: "\e016"; }
 142   #conversejs .icon-bubbles-3:before {
 143     content: "\e017"; }
 144   #conversejs .icon-bubbles:before {
 145     content: "\e015"; }
 146   #conversejs .icon-camera-2:before {
 147     content: "\2616"; }
 148   #conversejs .icon-camera:before {
 149     content: "\e003"; }
 150   #conversejs .icon-cancel-circle:before {
 151     content: "\e058"; }
 152   #conversejs .icon-checkbox-checked:before {
 153     content: "\2611"; }
 154   #conversejs .icon-checkbox-partial:before {
 155     content: "\2b28"; }
 156   #conversejs .icon-checkbox-unchecked:before {
 157     content: "\2b27"; }
 158   #conversejs .icon-checkmark:before {
 159     content: "\2713"; }
 160   #conversejs .icon-close:before {
 161     content: "\2715"; }
 162   #conversejs .icon-closed:before {
 163     content: "\25ba"; }
 164   #conversejs .icon-cog:before {
 165     content: "\e02f"; }
 166   #conversejs .icon-cogs:before {
 167     content: "\e022"; }
 168   #conversejs .icon-confused:before {
 169     content: "\2368"; }
 170   #conversejs .icon-cool:before {
 171     content: "\e040"; }
 172   #conversejs .icon-dnd:before {
 173     content: "\e004"; }
 174   #conversejs .icon-envelop:before {
 175     content: "\2709"; }
 176   #conversejs .icon-evil:before {
 177     content: "\261f"; }
 178   #conversejs .icon-eye-blocked:before {
 179     content: "\e031"; }
 180   #conversejs .icon-eye:before {
 181     content: "\e030"; }
 182   #conversejs .icon-globe:before {
 183     content: "\e033"; }
 184   #conversejs .icon-grin:before {
 185     content: "\e041"; }
 186   #conversejs .icon-happy:before {
 187     content: "\263b"; }
 188   #conversejs .icon-headphones:before {
 189     content: "\266c"; }
 190   #conversejs .icon-heart:before {
 191     content: "\2764"; }
 192   #conversejs .icon-hide-users:before {
 193     content: "\e01c"; }
 194   #conversejs .icon-home:before {
 195     content: "\e000"; }
 196   #conversejs .icon-image:before {
 197     content: "\2b14"; }
 198   #conversejs .icon-info:before {
 199     content: "\2360"; }
 200   #conversejs .icon-italic:before {
 201     content: "\e04f"; }
 202   #conversejs .icon-key-2:before {
 203     content: "\e029"; }
 204   #conversejs .icon-key:before {
 205     content: "\e028"; }
 206   #conversejs .icon-lock-2:before {
 207     content: "\e027"; }
 208   #conversejs .icon-lock:before {
 209     content: "\e026"; }
 210   #conversejs .icon-logout:before {
 211     content: "\e601"; }
 212   #conversejs .icon-minus:before {
 213     content: "\e05a"; }
 214   #conversejs .icon-music:before {
 215     content: "\266b"; }
 216   #conversejs .icon-new-tab:before {
 217     content: "\e053"; }
 218   #conversejs .icon-newspaper:before {
 219     content: "\e001"; }
 220   #conversejs .icon-notebook:before {
 221     content: "\2710"; }
 222   #conversejs .icon-notification:before {
 223     content: "\e01f"; }
 224   #conversejs .icon-online:before {
 225     content: "\25fc"; }
 226   #conversejs .icon-chat:before {
 227     content: "\25fc"; }
 228   #conversejs .icon-opened:before {
 229     content: "\25bc"; }
 230   #conversejs .icon-pencil:before {
 231     content: "\270e"; }
 232   #conversejs .icon-phone-hang-up:before {
 233     content: "\260e"; }
 234   #conversejs .icon-phone:before {
 235     content: "\260f"; }
 236   #conversejs .icon-play:before {
 237     content: "\25d9"; }
 238   #conversejs .icon-plus:before {
 239     content: "\271a"; }
 240   #conversejs .icon-pushpin:before {
 241     content: "\e012"; }
 242   #conversejs .icon-quotes-left:before {
 243     content: "\e01d"; }
 244   #conversejs .icon-radio-checked:before {
 245     content: "\2b26"; }
 246   #conversejs .icon-radio-unchecked:before {
 247     content: "\2b25"; }
 248   #conversejs .icon-remove:before {
 249     content: "\e02d"; }
 250   #conversejs .icon-room-info:before {
 251     content: "\e059"; }
 252   #conversejs .icon-sad:before {
 253     content: "\2639"; }
 254   #conversejs .icon-search:before {
 255     content: "\e021"; }
 256   #conversejs .icon-shocked:before {
 257     content: "\2364"; }
 258   #conversejs .icon-show-users:before {
 259     content: "\e01e"; }
 260   #conversejs .icon-smiley:before {
 261     content: "\263a"; }
 262   #conversejs .icon-spell-check:before {
 263     content: "\e045"; }
 264   #conversejs .icon-spinner:before {
 265     content: "\231b"; }
 266   #conversejs .icon-strikethrough:before {
 267     content: "\e050"; }
 268   #conversejs .icon-thumbs-up:before {
 269     content: "\261d"; }
 270   #conversejs .icon-tongue:before {
 271     content: "\e038"; }
 272   #conversejs .icon-underline:before {
 273     content: "\e04e"; }
 274   #conversejs .icon-unlocked:before {
 275     content: "\e025"; }
 276   #conversejs .icon-user:before {
 277     content: "\e01a"; }
 278   #conversejs .icon-users:before {
 279     content: "\e01b"; }
 280   #conversejs .icon-volume-decrease:before {
 281     content: "\e04b"; }
 282   #conversejs .icon-volume-high:before {
 283     content: "\e046"; }
 284   #conversejs .icon-volume-increase:before {
 285     content: "\e04c"; }
 286   #conversejs .icon-volume-low:before {
 287     content: "\e048"; }
 288   #conversejs .icon-volume-medium:before {
 289     content: "\e047"; }
 290   #conversejs .icon-volume-mute-2:before {
 291     content: "\e04a"; }
 292   #conversejs .icon-volume-mute:before {
 293     content: "\e049"; }
 294   #conversejs .icon-warning:before {
 295     content: "\26a0"; }
 296   #conversejs .icon-wink:before {
 297     content: "\e03a"; }
 298   #conversejs .icon-wondering:before {
 299     content: "\2369"; }
 300   #conversejs .icon-wrench:before {
 301     content: "\e024"; }
 302   #conversejs .icon-xa:before {
 303     content: "\e602"; }
 304   #conversejs .icon-unavailable:before,
 305   #conversejs .icon-offline:before {
 306     content: "\e002"; }
 307   #conversejs .icon-youtube:before {
 308     content: "\e055"; }
 309   #conversejs .icon-zoom-in:before {
 310     content: "\e02b"; }
 311   #conversejs .icon-zoom-out:before {
 312     content: "\e02a"; }
 313   #conversejs .no-text-select {
 314     -webkit-touch-callout: none;
 315     -webkit-user-select: none;
 316     -moz-user-select: none;
 317     -ms-user-select: none;
 318     user-select: none; }
 319   #conversejs .emoticon {
 320     font-size: 14px; }
 321   #conversejs .left {
 322     float: left; }
 323   #conversejs .right {
 324     float: right; }
 325   #conversejs .hidden {
 326     display: none; }
 327   #conversejs .locked {
 328     padding-right: 22px; }
 329 @-webkit-keyframes spin {
 330   from {
 331     -webkit-transform: rotate(0deg); }
 332   to {
 333     -webkit-transform: rotate(359deg); } }
 334 @-moz-keyframes spin {
 335   from {
 336     -moz-transform: rotate(0deg); }
 337   to {
 338     -moz-transform: rotate(359deg); } }
 339 @keyframes spin {
 340   from {
 341     -webkit-transform: rotate(0deg);
 342     -moz-transform: rotate(0deg);
 343     -ms-transform: rotate(0deg);
 344     -o-transform: rotate(0deg);
 345     transform: rotate(0deg); }
 346   to {
 347     -webkit-transform: rotate(359deg);
 348     -moz-transform: rotate(359deg);
 349     -ms-transform: rotate(359deg);
 350     -o-transform: rotate(359deg);
 351     transform: rotate(359deg); } }
 352   #conversejs .spinner:before {
 353     font-size: 24px;
 354     font-family: 'Converse-js' !important;
 355     content: "\231b"; }
 356   #conversejs .spinner {
 357     -webkit-animation: spin 2s infinite, linear;
 358     -moz-animation: spin 2s infinite, linear;
 359     animation: spin 2s infinite, linear;
 360     display: block;
 361     text-align: center;
 362     margin: 5px; }
 363   #conversejs .centered {
 364     text-align: center;
 365     display: block;
 366     margin: 5em auto; }
 367   #conversejs .hor_centered {
 368     text-align: center;
 369     display: block;
 370     margin: 0 auto;
 371     clear: both; }
 372   #conversejs .toggle-controlbox,
 373   #conversejs #minimized-chats {
 374     border-top-left-radius: 4px;
 375     border-top-right-radius: 4px;
 376     float: right;
 377     margin: 0 7px;
 378     font-weight: bold; }
 379   #conversejs .toggle-controlbox {
 380     background-color: #555;
 381     color: #0a0a0a;
 382     height: 100%;
 383     padding: 10px 8px 0 8px; }
 384     #conversejs .toggle-controlbox span {
 385       color: white; }
 386   #conversejs .button-group,
 387   #conversejs .input-button-group {
 388     display: table; }
 389   #conversejs .button-group {
 390     width: 100%; }
 391   #conversejs .input-button-group button,
 392   #conversejs .input-button-group input {
 393     display: table-cell; }
 394   #conversejs #minimized-chats {
 395     color: white;
 396     display: none;
 397     height: 100%;
 398     padding: 0;
 399     width: 130px; }
 400     #conversejs #minimized-chats #toggle-minimized-chats {
 401       border-top-left-radius: 4px;
 402       border-top-right-radius: 4px;
 403       background-color: #CCC;
 404       position: relative;
 405       padding: 10px 0 0 0;
 406       display: block;
 407       width: 100%;
 408       height: 100%;
 409       text-align: center; }
 410     #conversejs #minimized-chats .unread-message-count,
 411     #conversejs #minimized-chats .chat-head-message-count {
 412       font-weight: bold;
 413       background-color: #f6f6f6;
 414       background-image: -webkit-linear-gradient(#f6f6f6 5%, #808080 100%);
 415       background-image: linear-gradient(#f6f6f6 5%, #808080 100%);
 416       border: 1px solid;
 417       text-shadow: 1px 1px 0 #FAFAFA;
 418       color: #681F2C;
 419       border-radius: 5px;
 420       padding: 2px 4px;
 421       font-size: 16px;
 422       text-align: center;
 423       position: absolute;
 424       right: 116px;
 425       bottom: 10px; }
 426     #conversejs #minimized-chats .box-flyout {
 427       position: absolute;
 428       display: block;
 429       height: auto;
 430       bottom: 35px;
 431       margin-left: 0; }
 432       #conversejs #minimized-chats .box-flyout .chat-head {
 433         font-size: 100%;
 434         border-radius: 4px;
 435         padding: 3px 0 0 5px;
 436         margin: 0 0 1px 0;
 437         box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
 438         height: 24px;
 439         width: 130px; }
 440   #conversejs .chat-body {
 441     background-color: white;
 442     border-bottom-right-radius: 4px;
 443     border-bottom-left-radius: 4px;
 444     height: 289px;
 445     height: -webkit-calc(100% - 44px);
 446     height: calc(100% - 44px);
 447     border-top: 0; }
 448     #conversejs .chat-body p {
 449       font-size: 14px;
 450       color: #6C4C44;
 451       padding: 5px;
 452       margin: 0; }
 453   #conversejs .tt-highlight {
 454     background-color: #00230F; }
 455   #conversejs .tt-suggestion p {
 456     color: white;
 457     text-shadow: rgba(0, 0, 0, 0.51) 0 -1px 0;
 458     cursor: pointer;
 459     font-size: 11px; }
 460   #conversejs .tt-suggestion p:hover {
 461     background-color: #00230F; }
 462     #conversejs .tt-suggestion p:hover .tt-highlight {
 463       background-color: #00230F;
 464       background: #27774A; }
 465   #conversejs .tt-dropdown-menu {
 466     margin: 0 1px 0 1px;
 467     width: 96px;
 468     max-height: 250px;
 469     overflow-x: hidden;
 470     overflow-y: auto;
 471     text-overflow: ellipsis;
 472     background: #27774A;
 473     border-bottom-right-radius: 4px;
 474     border-bottom-left-radius: 4px; }
 475   #conversejs .chat-blink {
 476     background-color: #176679;
 477     border-right: 1px solid #176679;
 478     border-left: 1px solid #176679; }
 479   #conversejs .chat-content {
 480     position: relative;
 481     padding: 8px;
 482     font-size: 13px;
 483     color: #666;
 484     overflow-y: auto;
 485     border: 0;
 486     background-color: #ffffff;
 487     line-height: 1.3em;
 488     height: 206px;
 489     height: calc(100% - 89px); }
 490   #conversejs .chat-info {
 491     color: #6C4C44; }
 492   #conversejs .chat-error {
 493     color: #681F2C;
 494     font-weight: bold; }
 495   #conversejs .chat-error,
 496   #conversejs .chat-info,
 497   #conversejs .chat-message {
 498     padding: 2px 0; }
 499   #conversejs .chat-message-room,
 500   #conversejs .chat-message-them,
 501   #conversejs .chat-message-me {
 502     font-weight: bold;
 503     white-space: nowrap;
 504     max-width: 100px;
 505     text-overflow: ellipsis;
 506     overflow: hidden;
 507     display: inline-block;
 508     float: left;
 509     padding-right: 3px; }
 510   #conversejs .chat-message-content {
 511     word-wrap: break-word; }
 512   #conversejs .chat-message-room,
 513   #conversejs .chat-message-them {
 514     color: #6C4C44; }
 515   #conversejs .chat-message-me {
 516     color: #436F64; }
 517   #conversejs .chat-event,
 518   #conversejs .chat-date,
 519   #conversejs .chat-info {
 520     color: #808080; }
 521   #conversejs li.chat-info {
 522     padding-left: 10px; }
 523   #conversejs .chat-date {
 524     display: inline-block;
 525     padding-top: 10px; }
 526   #conversejs .not-implemented {
 527     margin-top: 3em;
 528     margin-left: 0.3em;
 529     color: #808080; }
 530   #conversejs .mentioned {
 531     font-weight: bold; }
 532   #conversejs .delayed .chat-message-them {
 533     color: #FB5D50; }
 534   #conversejs .delayed .chat-message-me {
 535     color: #7EABBB; }
 536   #conversejs .error {
 537     color: red; }
 538   #conversejs input.error {
 539     border: 1px solid red; }
 540   #conversejs .reg-feedback {
 541     font-size: 85%; }
 542   #conversejs .reg-feedback,
 543   #conversejs #converse-login .conn-feedback {
 544     display: block;
 545     text-align: center;
 546     width: 100%; }
 547   #conversejs .chat-message-error {
 548     color: #76797C;
 549     font-size: 90%;
 550     font-weight: normal; }
 551   #conversejs a.restore-chat,
 552   #conversejs .chat-title {
 553     padding: 1px 0 1px 5px;
 554     color: white;
 555     font-weight: bold;
 556     line-height: 15px;
 557     display: block;
 558     overflow: hidden;
 559     text-overflow: ellipsis;
 560     white-space: nowrap;
 561     text-shadow: rgba(0, 0, 0, 0.51) 0 -1px 0; }
 562   #conversejs a.restore-chat:visited {
 563     color: white; }
 564   #conversejs .chat-title a {
 565     color: white;
 566     width: 100%;
 567     text-overflow: ellipsis;
 568     white-space: nowrap; }
 569   #conversejs .chat-head-chatbox,
 570   #conversejs .chat-head-chatroom {
 571     height: 44px;
 572     position: relative;
 573     padding: 5px; }
 574   #conversejs .chat-head-chatroom {
 575     background-color: #555; }
 576   #conversejs .chat-head-chatbox {
 577     background-color: #555; }
 578   #conversejs .user-custom-message,
 579   #conversejs .chatroom-topic {
 580     color: white;
 581     font-size: 80%;
 582     font-style: italic;
 583     height: 1.3em;
 584     overflow: hidden;
 585     text-overflow: ellipsis;
 586     white-space: nowrap;
 587     margin: 0;
 588     padding: 1px 0 1px 5px; }
 589   #conversejs .activated {
 590     display: block !important; }
 591   #conversejs a.subscribe-to-user {
 592     padding-left: 2em;
 593     font-weight: bold; }
 594   #conversejs dl.add-converse-contact {
 595     margin: 0 0.5em 0.75em 0.5em; }
 596   #conversejs .fancy-dropdown {
 597     border: 1px solid #EEE;
 598     height: 25px;
 599     text-align: left; }
 600     #conversejs .fancy-dropdown .choose-xmpp-status {
 601       width: 155px; }
 602       #conversejs .fancy-dropdown .choose-xmpp-status span {
 603         padding-right: 5px;
 604         padding-left: 5px;
 605         float: left; }
 606     #conversejs .fancy-dropdown .choose-xmpp-status,
 607     #conversejs .fancy-dropdown .toggle-xmpp-contact-form {
 608       text-shadow: 0 1px 0 #ffffff;
 609       overflow: hidden;
 610       text-overflow: ellipsis;
 611       white-space: nowrap;
 612       display: inline; }
 613     #conversejs .fancy-dropdown .toggle-xmpp-contact-form span {
 614       float: left; }
 615   #conversejs #fancy-xmpp-status-select a.change-xmpp-status-message {
 616     float: right;
 617     clear: right;
 618     height: 22px;
 619     width: 12px;
 620     margin: 0px 5px 0 0;
 621     color: #436F64; }
 622   #conversejs ul#found-users {
 623     padding: 10px 0 5px 5px;
 624     border: 0; }
 625   #conversejs form.search-xmpp-contact {
 626     margin: 0;
 627     padding-left: 5px;
 628     padding: 0 0 5px 5px; }
 629     #conversejs form.search-xmpp-contact input {
 630       width: 8em; }
 631   #conversejs a.configure-chatroom-button,
 632   #conversejs a.toggle-chatbox-button,
 633   #conversejs a.close-chatbox-button {
 634     border-radius: 5px;
 635     border: 1px solid #888;
 636     color: white;
 637     cursor: pointer;
 638     display: inline-block;
 639     float: right;
 640     font-size: 10px;
 641     margin: 0 0 0 3px;
 642     padding-top: 3px;
 643     padding-bottom: 3px;
 644     padding-left: 2px;
 645     padding-right: 3px;
 646     text-decoration: none; }
 647   #conversejs a.configure-chatroom-button:active,
 648   #conversejs a.toggle-chatbox-button:active,
 649   #conversejs a.close-chatbox-button:active {
 650     position: relative;
 651     top: 1px; }
 652   #conversejs .chatroom-form-container {
 653     height: 100%;
 654     color: #6C4C44;
 655     overflow-y: auto;
 656     border-bottom-right-radius: 4px;
 657     border-bottom-left-radius: 4px; }
 658   #conversejs .chatroom-form {
 659     padding: 1em; }
 660     #conversejs .chatroom-form .instructions {
 661       color: gray;
 662       font-size: 95%; }
 663     #conversejs .chatroom-form input {
 664       width: 100%;
 665       padding: 5px;
 666       text-align: center; }
 667     #conversejs .chatroom-form legend {
 668       font-size: 16px;
 669       font-weight: bold;
 670       margin: 10px 0 15px 0; }
 671     #conversejs .chatroom-form label {
 672       height: 30px;
 673       font-weight: bold;
 674       display: block;
 675       clear: both; }
 676       #conversejs .chatroom-form label label input, #conversejs .chatroom-form label label select {
 677         float: right; }
 678   #conversejs .requesting-xmpp-contact .request-actions {
 679     margin-left: 0.5em;
 680     float: right; }
 681   #conversejs #converse-roster {
 682     text-align: left;
 683     width: 100%;
 684     position: relative;
 685     margin: 0.5em 0 0 0;
 686     height: 194px;
 687     height: calc(100% - 50px - 20px);
 688     overflow: hidden;
 689     /* (jQ addClass:) if input has value: */
 690     /* (jQ addClass:) if mouse is over the 'x' input area*/ }
 691     #conversejs #converse-roster.no-contact-requests {
 692       height: calc(100% - 25px - 20px); }
 693     #conversejs #converse-roster .filter-type {
 694       display: table-cell;
 695       float: right;
 696       font-size: 14px;
 697       height: 25px;
 698       margin: 0 0 0.5em -1px;
 699       padding: 0;
 700       width: 84px; }
 701     #conversejs #converse-roster .roster-filter {
 702       float: left;
 703       background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAABNSURBVHjaXI7BDcAwCAMvyQjMyQ6dAbZiKfqoUK34g2zJh1dENIC7M8pMAPYdzAVY3d0ajNz9aypS/b5R6o+ZPdqoKgCq6h80KH3xDgBqNR97p8oAGQAAAABJRU5ErkJggg==) no-repeat right -20px center;
 704       border: 1px solid #999;
 705       font-size: 14px;
 706       height: 25px;
 707       margin: 0 0 0.5em 7px;
 708       padding: 0;
 709       padding: 2px;
 710       width: 103px; }
 711     #conversejs #converse-roster .roster-filter.x {
 712       background-position: right 3px center; }
 713     #conversejs #converse-roster .roster-filter.onX {
 714       cursor: pointer; }
 715     #conversejs #converse-roster .roster-contacts {
 716       margin: 0;
 717       max-height: 195px;
 718       max-height: calc(100% - 44px);
 719       overflow-x: hidden;
 720       overflow-y: auto;
 721       padding-bottom: 15px; }
 722     #conversejs #converse-roster .group-toggle {
 723       color: #6C4C44;
 724       display: block;
 725       width: 100%; }
 726     #conversejs #converse-roster dt {
 727       display: none; }
 728     #conversejs #converse-roster dd {
 729       line-height: 16px;
 730       padding: 4px 2px 0 4px;
 731       height: 24px; }
 732       #conversejs #converse-roster dd a, #conversejs #converse-roster dd span {
 733         text-shadow: 0 1px 0 #FAFAFA;
 734         display: inline-block;
 735         overflow: hidden;
 736         white-space: nowrap;
 737         text-overflow: ellipsis;
 738         margin-left: 3px; }
 739       #conversejs #converse-roster dd span {
 740         padding: 0 5px 0 0; }
 741       #conversejs #converse-roster dd a.decline-xmpp-request {
 742         margin-left: 5px; }
 743       #conversejs #converse-roster dd a.remove-xmpp-contact {
 744         float: right;
 745         width: 22px;
 746         margin: 0;
 747         display: none;
 748         color: #6C4C44; }
 749     #conversejs #converse-roster dd:hover a.remove-xmpp-contact {
 750       display: inline-block; }
 751     #conversejs #converse-roster dd.odd {
 752       background-color: #DCEAC5;
 753       /* Make this difference */ }
 754     #conversejs #converse-roster dd.current-xmpp-contact span {
 755       font-size: 16px;
 756       float: left;
 757       color: #444; }
 758     #conversejs #converse-roster dd a.open-chat {
 759       width: 80%; }
 760     #conversejs #converse-roster span.pending-contact-name {
 761       width: 80%; }
 762     #conversejs #converse-roster span.req-contact-name {
 763       width: 69%;
 764       padding: 0; }
 765   #conversejs #available-chatrooms {
 766     text-align: left; }
 767   #conversejs #available-chatrooms dt,
 768   #conversejs #converse-roster dt {
 769     font-weight: normal;
 770     color: #6C4C44;
 771     border: none;
 772     padding: 0.5em;
 773     text-shadow: 0 1px 0 #FAFAFA; }
 774   #conversejs .room-info {
 775     font-size: 11px;
 776     font-style: normal;
 777     font-weight: normal; }
 778   #conversejs li.room-info {
 779     display: block;
 780     margin-left: 5px; }
 781   #conversejs div.room-info {
 782     clear: left;
 783     width: 100%; }
 784   #conversejs p.room-info {
 785     margin: 0;
 786     padding: 0;
 787     display: block;
 788     white-space: normal; }
 789   #conversejs a.room-info {
 790     width: 15px;
 791     display: none;
 792     clear: right; }
 793   #conversejs a.open-room {
 794     float: left;
 795     white-space: nowrap;
 796     text-overflow: ellipsis;
 797     overflow-x: hidden; }
 798   #conversejs dd.available-chatroom {
 799     border: none;
 800     clear: both;
 801     color: #6C4C44;
 802     display: block;
 803     font-weight: bold;
 804     overflow: hidden;
 805     padding: 0.25em 0.5em;
 806     text-overflow: ellipsis;
 807     text-shadow: 0 1px 0 #FAFAFA;
 808     white-space: nowrap; }
 809     #conversejs dd.available-chatroom a.open-room {
 810       width: 150px; }
 811     #conversejs dd.available-chatroom:hover {
 812       background-color: #E1E6E5; }
 813       #conversejs dd.available-chatroom:hover .room-info {
 814         display: block;
 815         font-size: 14px; }
 816   #conversejs #converse-roster dd {
 817     border: none;
 818     clear: both;
 819     color: #6C4C44;
 820     display: block;
 821     font-weight: bold;
 822     overflow-y: hidden;
 823     text-shadow: 0 1px 0 #FAFAFA; }
 824   #conversejs .roster-group:hover,
 825   #conversejs #converse-roster dd:hover {
 826     background-color: #E1E6E5; }
 827   #conversejs .chatbox,
 828   #conversejs .chatroom {
 829     height: 35px;
 830     float: right;
 831     margin: 0 7px;
 832     display: block; }
 833     @media screen and (max-width: 480px) {
 834       #conversejs .chatbox,
 835       #conversejs .chatroom {
 836         margin: 0; } }
 837   #conversejs .chatbox {
 838     width: 200px; }
 839     @media screen and (max-width: 480px) {
 840       #conversejs .chatbox {
 841         width: 100%; } }
 842     #conversejs .chatbox .box-flyout {
 843       z-index: 1;
 844       width: 200px; }
 845       @media screen and (max-width: 480px) {
 846         #conversejs .chatbox .box-flyout {
 847           width: 100%; } }
 848     #conversejs .chatbox .dropdown a {
 849       width: 148px;
 850       display: inline-block;
 851       line-height: 25px; }
 852     #conversejs .chatbox .dropdown li {
 853       list-style: none;
 854       padding-left: 0; }
 855     #conversejs .chatbox .dropdown dd ul {
 856       padding: 0;
 857       list-style: none;
 858       position: absolute;
 859       left: 0;
 860       top: 0;
 861       border: 1px solid #E5E9E8;
 862       width: 100%;
 863       z-index: 21;
 864       background-color: #EEE; }
 865       #conversejs .chatbox .dropdown dd ul li:hover {
 866         background-color: #E1E6E5; }
 867     #conversejs .chatbox .dropdown dd.search-xmpp ul {
 868       box-shadow: 1px 4px 10px 1px rgba(0, 0, 0, 0.4); }
 869       #conversejs .chatbox .dropdown dd.search-xmpp ul li:hover {
 870         background-color: #EEE; }
 871     #conversejs .chatbox .dropdown dt a span {
 872       cursor: pointer;
 873       display: block;
 874       padding: 4px 7px 0 5px; }
 875   #conversejs .chatroom {
 876     width: 300px; }
 877     #conversejs .chatroom .box-flyout {
 878       width: 300px; }
 879     @media screen and (max-width: 480px) {
 880       #conversejs .chatroom {
 881         width: 100%; }
 882         #conversejs .chatroom .box-flyout {
 883           width: 100%; } }
 884     #conversejs .chatroom label {
 885       margin-left: 2px;
 886       font-size: 12px; }
 887     #conversejs .chatroom .participant-list {
 888       list-style: none; }
 889       #conversejs .chatroom .participant-list li {
 890         cursor: default;
 891         display: block;
 892         font-size: 12px;
 893         font-weight: bold;
 894         overflow: hidden;
 895         padding: 2px 5px;
 896         text-overflow: ellipsis;
 897         white-space: nowrap; }
 898         #conversejs .chatroom .participant-list li.moderator {
 899           color: #8f2831; }
 900     #conversejs .chatroom .chat-textarea {
 901       border-bottom-right-radius: 0; }
 902     #conversejs .chatroom .chat-area {
 903       float: left;
 904       height: 100%;
 905       width: 200px; }
 906     #conversejs .chatroom .invited-contact {
 907       margin: -1px 0 0 -1px;
 908       width: 100px;
 909       border: 1px solid #999; }
 910     #conversejs .chatroom .invited-contact.tt-input {
 911       background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gkBCjE0uzKkOgAAAidJREFUKM+N0k+IEnEUB/D3cyscdagkWpHV0WGWREXm0AgOGkSJ07kh2UXYU5cOewm6Bp0KXG/tpSCv6hyEFQIhMEaE3yERYfwTOoqKGLQxDAbqYadLgu7J7/XxeY/3ez8EACDLsgljfMfj8ZxUKhXXYDAAnueBoqgyAMipVOovXAuSZdnUaDQeDofDs16vFyUIAjRNUwmCoG02G1AUdZ5IJN7GYrHfm3AvEAjcnUwmX0ajUdRqtV74fL6sruufKYoa6bp+fzabPUMI7ZfL5eImNHk8npNerxc1m80XHMe98fv9H3K5XDkSibxjWfb1arWaYoyPMMbCFqxUKi6CIODw8LDmdDq7oigaAACiKK5omv7KcdylpmlIkiTHFlRVFTRNUxVFqa/ROqIoGoqi5A3DgFartfU4Jp7ngSAI2uVyPZIk6dZmUZKk2w6H4xghBPF4HK7vWLbZbDCdTp+rqvpUkiS0RvV6/bTf7x8wDHMViURqm/AGAMgURZ232+1X1Wr102KxuEwmk3lZlo/7/f7BcrkkSZKs2e12tHXH/x/gHsY4jTE+0jQNGYYBCCFgGOaKJMkfjUaDZximGQ6HXzSbzZ+ZTMbY6oIxFgqFgqPT6YAgCMBxXM1ut6N0Op0fj8chi8XyjWXZ98Fg8DuCHZLNZh+USqWP8/n8idvt/hUKhV7u7QK9Xu8fmqanAJBQVXUfAGY7TQQAKBaLN8fjsdDtdh/run72Dzhf7XLe2UevAAAAAElFTkSuQmCC) no-repeat right 3px center; }
 912     #conversejs .chatroom .participants {
 913       float: right;
 914       background-color: white;
 915       overflow-y: auto;
 916       overflow-x: hidden;
 917       border-left: 1px solid #AAA;
 918       border-bottom-right-radius: 4px;
 919       width: 100px;
 920       height: 100%; }
 921       #conversejs .chatroom .participants label {
 922         font-size: 12px;
 923         font-style: italic;
 924         margin: 5px;
 925         display: block; }
 926   #conversejs .chatroom-form,
 927   #conversejs .controlbox-pane {
 928     background-color: white;
 929     border-bottom-left-radius: 4px;
 930     border-bottom-right-radius: 4px;
 931     border: 0;
 932     font-size: 14px;
 933     overflow-y: auto;
 934     position: absolute;
 935     text-align: center;
 936     width: 100%;
 937     height: 289px;
 938     height: -webkit-calc(100% - 44px);
 939     height: calc(100% - 44px); }
 940   #conversejs .controlbox-pane {
 941     overflow-y: hidden;
 942     overflow-x: hidden; }
 943     #conversejs .controlbox-pane dd {
 944       margin-left: 0;
 945       margin-bottom: 0; }
 946       #conversejs .controlbox-pane dd.odd {
 947         background-color: #DCEAC5; }
 948   #conversejs #converse-register {
 949     background: white; }
 950     #conversejs #converse-register .title {
 951       font-weight: bold; }
 952     #conversejs #converse-register .info {
 953       font-style: italic;
 954       color: green;
 955       font-size: 85%;
 956       margin: 5px 0; }
 957     #conversejs #converse-register .form-errors {
 958       color: red;
 959       display: none; }
 960     #conversejs #converse-register .provider-title {
 961       font-size: 22px; }
 962     #conversejs #converse-register .provider-score {
 963       width: 178px;
 964       margin-bottom: 8px; }
 965     #conversejs #converse-register .form-help .url {
 966       font-weight: bold;
 967       color: #436F64; }
 968     #conversejs #converse-register .input-group {
 969       display: table;
 970       margin: auto;
 971       width: 100%; }
 972       #conversejs #converse-register .input-group span {
 973         overflow-x: hidden;
 974         text-overflow: ellipsis;
 975         max-width: 110px; }
 976       #conversejs #converse-register .input-group span, #conversejs #converse-register .input-group input[name=username] {
 977         display: table-cell;
 978         text-align: left; }
 979     #conversejs #converse-register .instructions {
 980       color: gray;
 981       font-size: 85%; }
 982       #conversejs #converse-register .instructions:hover {
 983         color: #6C4C44; }
 984   #conversejs #converse-register, #conversejs #converse-login {
 985     margin: 2em 1em 1em 1em;
 986     background: white; }
 987     #conversejs #converse-register .login-submit, #conversejs #converse-register .submit, #conversejs #converse-login .login-submit, #conversejs #converse-login .submit {
 988       height: 30px;
 989       padding: 0px;
 990       font-size: 14px; }
 991     #conversejs #converse-register .submit, #conversejs #converse-login .submit {
 992       margin: 1em 0; }
 993     #conversejs #converse-register .login-anon, #conversejs #converse-login .login-anon {
 994       height: auto;
 995       white-space: normal; }
 996     #conversejs #converse-register .cancel-submit, #conversejs #converse-register .save-submit, #conversejs #converse-login .cancel-submit, #conversejs #converse-login .save-submit {
 997       width: 45%;
 998       margin: 5px 3px 5px 3px; }
 999     #conversejs #converse-register .cancel, #conversejs #converse-register .cancel-submit, #conversejs #converse-login .cancel, #conversejs #converse-login .cancel-submit {
1000       color: #681F2C; }
1001     #conversejs #converse-register .save-submit, #conversejs #converse-login .save-submit {
1002       color: #436F64; }
1003     #conversejs #converse-register input, #conversejs #converse-login input {
1004       width: 100%;
1005       height: 30px;
1006       margin: 5px 0 10px 0;
1007       padding-left: 0.5em; }
1008   #conversejs .form-help {
1009     color: gray;
1010     font-size: 85%;
1011     padding-top: 5px; }
1012     #conversejs .form-help:hover {
1013       color: #6C4C44; }
1014   #conversejs .chatroom-form label,
1015   #conversejs .controlbox-pane label,
1016   #conversejs #converse-register label,
1017   #conversejs #converse-login label {
1018     font-size: 14px;
1019     font-weight: bold;
1020     height: auto;
1021     margin: 4px; }
1022   #conversejs form.add-chatroom {
1023     background: none;
1024     padding: 0.5em; }
1025     #conversejs form.add-chatroom input[type=button],
1026     #conversejs form.add-chatroom input[type=submit],
1027     #conversejs form.add-chatroom input[type=text] {
1028       margin: 0;
1029       width: 100%;
1030       padding: 0.25em; }
1031     #conversejs form.add-chatroom span.spinner,
1032     #conversejs form.add-chatroom input[type=button],
1033     #conversejs form.add-chatroom input[type=submit] {
1034       margin-top: 0.5em;
1035       display: table-cell;
1036       width: auto; }
1037     #conversejs form.add-chatroom input[type=submit] {
1038       color: #000; }
1039   #conversejs select#select-xmpp-status {
1040     float: right;
1041     margin-right: 0.5em; }
1042   #conversejs .chat-head {
1043     border-top-left-radius: 4px;
1044     border-top-right-radius: 4px;
1045     color: #ffffff;
1046     font-size: 100%;
1047     margin: 0;
1048     padding: 6px; }
1049     #conversejs .chat-head.controlbox-head {
1050       background-color: #555;
1051       border-top-left-radius: 4px;
1052       border-top-right-radius: 4px;
1053       color: white;
1054       height: 44px;
1055       margin: 0;
1056       padding: 6px 6px 6px 0; }
1057     #conversejs .chat-head .avatar {
1058       float: left; }
1059     #conversejs .chat-head #controlbox-tabs {
1060       text-align: center;
1061       display: inline;
1062       overflow: hidden;
1063       font-size: 12px;
1064       list-style-type: none;
1065       /* single tab */ }
1066       #conversejs .chat-head #controlbox-tabs a.current,
1067       #conversejs .chat-head #controlbox-tabs a.current:hover {
1068         box-shadow: none;
1069         border-bottom: 0;
1070         height: 44px;
1071         cursor: default;
1072         color: #6C4C44; }
1073       #conversejs .chat-head #controlbox-tabs li {
1074         float: left;
1075         list-style: none;
1076         padding-left: 0;
1077         text-shadow: white 0 1px 0;
1078         width: 38%; }
1079         #conversejs .chat-head #controlbox-tabs li a {
1080           background-color: white;
1081           border-bottom: 1px solid #CCC;
1082           border-top-left-radius: 4px;
1083           border-top-right-radius: 4px;
1084           box-shadow: inset 2px -2px 20px rgba(0, 0, 0, 0.3);
1085           color: #888;
1086           display: block;
1087           font-size: 12px;
1088           height: 43px;
1089           line-height: 43px;
1090           margin: 0;
1091           text-align: center;
1092           text-decoration: none; }
1093         #conversejs .chat-head #controlbox-tabs li a:hover {
1094           color: #6C4C44; }
1095   #conversejs div#chatrooms {
1096     overflow-y: auto; }
1097   #conversejs form.sendXMPPMessage {
1098     -moz-background-clip: padding;
1099     -moz-border-radius: 4px;
1100     -webkit-background-clip: padding-box;
1101     -webkit-border-radius: 4px;
1102     background-clip: padding-box;
1103     background: white;
1104     border-radius: 4px;
1105     border-top-left-radius: 0;
1106     border-top-right-radius: 0;
1107     border-top: 1px solid #BBB;
1108     border: 0;
1109     margin: 0;
1110     padding: 0;
1111     position: relative;
1112     height: 87px;
1113     width: 200px; }
1114     @media screen and (max-width: 480px) {
1115       #conversejs form.sendXMPPMessage {
1116         width: 100%; } }
1117     #conversejs form.sendXMPPMessage .chat-textarea {
1118       border-bottom-left-radius: 4px;
1119       border-bottom-right-radius: 4px;
1120       border: 0;
1121       height: 62px;
1122       padding: 0.5em;
1123       width: 100%;
1124       resize: none; }
1125   #conversejs .chat-toolbar {
1126     font-size: 14px;
1127     margin: 0;
1128     padding: 5px;
1129     height: 25px;
1130     display: block;
1131     background-color: #EEE; }
1132     #conversejs .chat-toolbar a {
1133       color: #436F64; }
1134     #conversejs .chat-toolbar .unencrypted a,
1135     #conversejs .chat-toolbar .unencrypted {
1136       color: #8f2831; }
1137     #conversejs .chat-toolbar .unverified a,
1138     #conversejs .chat-toolbar .unverified {
1139       color: #cf5300; }
1140     #conversejs .chat-toolbar .private a,
1141     #conversejs .chat-toolbar .private {
1142       color: #4b7003; }
1143     #conversejs .chat-toolbar .toggle-participants,
1144     #conversejs .chat-toolbar .toggle-clear,
1145     #conversejs .chat-toolbar .toggle-otr {
1146       float: right; }
1147     #conversejs .chat-toolbar li {
1148       display: inline-block;
1149       list-style: none;
1150       padding: 0 3px 0 3px;
1151       cursor: pointer;
1152       margin-top: 1px; }
1153     #conversejs .chat-toolbar li:hover {
1154       cursor: pointer; }
1155     #conversejs .chat-toolbar ul {
1156       background: #fff;
1157       bottom: 100%;
1158       box-shadow: -1px -1px 2px 0 rgba(0, 0, 0, 0.4);
1159       display: none;
1160       font-size: 12px;
1161       margin: 0 0 1px 0;
1162       position: absolute;
1163       right: 0; }
1164       #conversejs .chat-toolbar ul li {
1165         cursor: pointer;
1166         list-style: none;
1167         position: relative; }
1168         #conversejs .chat-toolbar ul li a:hover {
1169           color: #8f2831; }
1170     #conversejs .chat-toolbar .toggle-smiley {
1171       color: #436F64;
1172       padding-left: 5px; }
1173       #conversejs .chat-toolbar .toggle-smiley ul li {
1174         font-size: 14px;
1175         padding: 5px;
1176         z-index: 98; }
1177       #conversejs .chat-toolbar .toggle-smiley ul li:hover {
1178         background-color: #E1E6E5; }
1179     #conversejs .chat-toolbar .toggle-otr ul li {
1180       padding: 7px;
1181       background-color: white;
1182       display: block;
1183       z-index: 99; }
1184       #conversejs .chat-toolbar .toggle-otr ul li a {
1185         -moz-transition: background-color 0.2s ease-in-out;
1186         -webkit-transition: background-color 0.2s ease-in-out;
1187         transition: background-color 0.2s ease-in-out;
1188         display: block;
1189         padding: 1px;
1190         text-decoration: none; }
1191     #conversejs .chat-toolbar .toggle-otr ul li:hover {
1192       background-color: #E1E6E5; }
1193   #conversejs .chat-toolbar-text {
1194     font-size: 12px;
1195     padding-right: 3px;
1196     text-shadow: 0 1px 0 white; }
1197   #conversejs #set-custom-xmpp-status {
1198     float: left;
1199     padding: 0; }
1200     #conversejs #set-custom-xmpp-status input {
1201       height: 26px;
1202       width: -webkit-calc(100% - 40px);
1203       width: calc(100% - 40px);
1204       padding: 0 0 0 0.5em; }
1205     #conversejs #set-custom-xmpp-status button {
1206       height: 26px;
1207       width: 40px;
1208       padding: 1px; }
1209   #conversejs .chat-textarea-chatbox-selected {
1210     border: 1px solid #578308;
1211     margin: 0; }
1212   #conversejs .chat-textarea-chatroom-selected {
1213     border: 2px solid #436F64;
1214     margin: 0; }
1215   #conversejs #controlbox {
1216     display: none; }
1217     #conversejs #controlbox div.xmpp-status {
1218       display: inline; }
1219   #conversejs .chatbox .dropdown {
1220     background-color: #EEE; }
1221     #conversejs .chatbox .dropdown dd {
1222       position: relative; }
1223   #conversejs .chatbox .dropdown dd,
1224   #conversejs .dropdown dt,
1225   #conversejs .dropdown ul {
1226     margin: 0;
1227     padding: 0; }
1228   #conversejs .add-xmpp-contact {
1229     background: none;
1230     padding: 5px; }
1231     #conversejs .add-xmpp-contact input {
1232       margin: 0 0 1rem;
1233       width: 100%; }
1234     #conversejs .add-xmpp-contact button {
1235       width: 100%; }
1236   #conversejs .xmpp-status-menu {
1237     text-align: left;
1238     box-shadow: 1px 4px 10px 1px rgba(0, 0, 0, 0.4); }
1239     #conversejs .xmpp-status-menu li {
1240       padding: 2px; }
1241       #conversejs .xmpp-status-menu li a {
1242         width: 100%;
1243         padding: 0 8px; }
1244   #conversejs .xmpp-status-menu li a.logout,
1245   #conversejs .xmpp-status-menu li a.logout span {
1246     color: #681F2C; }
1247   #conversejs .set-xmpp-status {
1248     background: none;
1249     padding: 0.75em 0.5em 0.5em 0.5em; }
1250     #conversejs .set-xmpp-status .dropdown dd ul {
1251       z-index: 22; }
1252   #conversejs .minimized-chats-flyout,
1253   #conversejs .box-flyout {
1254     border-radius: 4px;
1255     bottom: 6px;
1256     box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
1257     display: block;
1258     height: 400px;
1259     position: absolute; }
1260     @media screen and (max-width: 480px) {
1261       #conversejs .minimized-chats-flyout,
1262       #conversejs .box-flyout {
1263         height: 400px; } }
1264   #conversejs .minimized-chats-flyout {
1265     border-radius: 4px;
1266     bottom: 35px;
1267     box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
1268     display: block;
1269     position: absolute;
1270     height: auto;
1271     width: 130px; }
1272     #conversejs .minimized-chats-flyout .chat-head-chatroom,
1273     #conversejs .minimized-chats-flyout .chat-head {
1274       border-radius: 4px;
1275       width: 130px;
1276       height: 35px;
1277       margin-bottom: 1px; }
1278   #conversejs .minimized-chats-flyout.minimized {
1279     height: auto; }
1280   #conversejs .dragresize {
1281     position: absolute;
1282     width: 200px;
1283     height: 5px;
1284     background: transparent;
1285     border: 0;
1286     top: 0;
1287     margin-left: 0;
1288     cursor: n-resize;
1289     z-index: 20; }
1290
1291 /*# sourceMappingURL=converse.css.map */