Split sass files up into includes and update some Ruby dependencies.

Also fixed a CSS bug. Chat box's width wasn't responsive.

Gemfile.lock

@@ -1,10 +1,10 @@
 GEM
   remote: https://rubygems.org/
   specs:
-    bourbon (4.2.1)
+    bourbon (4.2.3)
       sass (~> 3.4)
       thor
-    sass (3.4.13)
+    sass (3.4.14)
     thor (0.19.1)
 
 PLATFORMS
@@ -13,3 +13,6 @@ PLATFORMS
 DEPENDENCIES
   bourbon
   sass (~> 3.3)
+
+BUNDLED WITH
+   1.10.3

css/converse.css

@@ -1,3 +1,10 @@
+/*!
+ * Converse.js (Web-based XMPP instant messaging client)
+ * http://conversejs.org
+ *
+ * Copyright (c) 2012-2014, JC Brand <jc@opkode.com>
+ * Licensed under the Mozilla Public License
+ */
 /*!
  * Converse.js (Web-based XMPP instant messaging client)
  * http://conversejs.org
@@ -53,7 +60,10 @@
     box-sizing: border-box; }
   @media screen and (max-width: 480px) {
     #conversejs {
-      margin: 5px 10px; } }
+      margin: 0;
+      right: 10px;
+      left: 10px;
+      bottom: 5px; } }
   #conversejs a, #conversejs a:visited {
     text-decoration: none;
     color: #436F64;

sass/_core.scss

@@ -0,0 +1,1539 @@
+/*!
+ * Converse.js (Web-based XMPP instant messaging client)
+ * http://conversejs.org
+ *
+ * Copyright (c) 2012-2014, JC Brand <jc@opkode.com>
+ * Licensed under the Mozilla Public License
+ */
+
+@font-face {
+  font-family: 'Converse-js';
+  src: url($font-path + 'icomoon.eot?-mnoxh0');
+  src: url($font-path + 'icomoon.eot?#iefix-mnoxh0') format("embedded-opentype"), url($font-path + 'icomoon.woff?-mnoxh0') format("woff"), url($font-path + 'icomoon.ttf?-mnoxh0') format("truetype"), url($font-path + 'icomoon.svg?-mnoxh0#icomoon') format("svg");
+  font-weight: normal;
+  font-style: normal;
+}
+
+.icon-conversejs {
+  font-family: 'Converse-js';
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.icon-conversejs:before {
+  content: "\e600";
+}
+
+#conversejs {
+  @import "variables";
+  ::selection {
+    background-color: $highlight-color;
+  }
+  ::-moz-selection {
+    background-color: $highlight-color;
+  }
+
+  color: $text-color;
+  font-size: $font-size;
+  bottom: 0;
+  direction: ltr;
+  height: $bottom-gutter-height;
+  left: auto;
+  position: fixed;
+  right: 15px;
+  z-index: 30;
+  display: block;
+  width: auto;
+
+  @include box-sizing(border-box);
+  *, *:before, *:after {
+    @include box-sizing(border-box);
+  }
+
+  @media screen and (max-width: $mobile-landscape-length) {
+      margin: 0;
+      right: 10px;
+      left: 10px;
+      bottom: 5px;
+  }
+
+  a, a:visited {
+    text-decoration: none;
+    color: $link-color;
+    text-shadow: none;
+  }
+
+  ul li { height: auto; }
+  div, span, h1, h2, h3, h4, h5, h6, p, blockquote,
+  pre, a, em, img, strong, dl, dt, dd, ol, ul, li,
+  fieldset, form, label, legend, table, caption, tbody,
+  tfoot, thead, tr, th, td, article, aside, canvas, details,
+  embed, figure, figcaption, footer, header, hgroup, menu,
+  nav, output, ruby, section, summary, time, mark, audio, video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font: inherit;
+    vertical-align: baseline;
+  }
+
+  textarea,
+  input[type=submit], input[type=button],
+  input[type=text], input[type=password],
+  button {
+    font-size: $font-size;
+    padding: 0.25em;
+    min-height: 0;
+  }
+
+  input[type=text] {
+    height: 26px;
+  }
+
+  strong {
+    font-weight: 700;
+  }
+
+  ol, ul {
+    list-style: none;
+  }
+
+  li {
+    height: 10px;
+  }
+
+  ul, ol, dl {
+    font: inherit;
+    margin: 0;
+  }
+
+  [data-icon]:before {
+    content: attr(data-icon);
+    font-family: 'Converse-js';
+    font-variant: normal;
+    font-weight: normal;
+    line-height: 1;
+    speak: none;
+    text-transform: none;
+    /* Better Font Rendering =========== */
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  [class^="icon-"], [class*=" icon-"] {
+    background-position: 14px 14px;
+    background-image: none;
+    font-family: 'Converse-js';
+    font-style: normal;
+    font-variant: normal;
+    font-weight: normal;
+    width: auto;
+    height: auto;
+    line-height: 1;
+    speak: none;
+    text-transform: none;
+    /* Better Font Rendering =========== */
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  .icon-address-book:before       { content: "\270f"; }
+  .icon-angry:before              { content: "\e03f"; }
+  .icon-attachment:before         { content: "\e032"; }
+  .icon-away:before               { content: "\25fb"; }
+  .icon-blocked:before            { content: "\2718"; }
+  .icon-bold:before               { content: "\e04d"; }
+  .icon-bubbles-2:before          { content: "\e016"; }
+  .icon-bubbles-3:before          { content: "\e017"; }
+  .icon-bubbles:before            { content: "\e015"; }
+  .icon-camera-2:before           { content: "\2616"; }
+  .icon-camera:before             { content: "\e003"; }
+  .icon-cancel-circle:before      { content: "\e058"; }
+  .icon-checkbox-checked:before   { content: "\2611"; }
+  .icon-checkbox-partial:before   { content: "\2b28"; }
+  .icon-checkbox-unchecked:before { content: "\2b27"; }
+  .icon-checkmark:before          { content: "\2713"; }
+  .icon-close:before              { content: "\2715"; }
+  .icon-closed:before             { content: "\25ba"; }
+  .icon-cog:before                { content: "\e02f"; }
+  .icon-cogs:before               { content: "\e022"; }
+  .icon-confused:before           { content: "\2368"; }
+  .icon-cool:before               { content: "\e040"; }
+  .icon-dnd:before                { content: "\e004"; }
+  .icon-envelop:before            { content: "\2709"; }
+  .icon-evil:before               { content: "\261f"; }
+  .icon-eye-blocked:before        { content: "\e031"; }
+  .icon-eye:before                { content: "\e030"; }
+  .icon-globe:before              { content: "\e033"; }
+  .icon-grin:before               { content: "\e041"; }
+  .icon-happy:before              { content: "\263b"; }
+  .icon-headphones:before         { content: "\266c"; }
+  .icon-heart:before              { content: "\2764"; }
+  .icon-hide-users:before         { content: "\e01c"; }
+  .icon-home:before               { content: "\e000"; }
+  .icon-image:before              { content: "\2b14"; }
+  .icon-info:before               { content: "\2360"; }
+  .icon-italic:before             { content: "\e04f"; }
+  .icon-key-2:before              { content: "\e029"; }
+  .icon-key:before                { content: "\e028"; }
+  .icon-lock-2:before             { content: "\e027"; }
+  .icon-lock:before               { content: "\e026"; }
+  .icon-logout:before             { content: "\e601"; }
+  .icon-minus:before              { content: "\e05a"; }
+  .icon-music:before              { content: "\266b"; }
+  .icon-new-tab:before            { content: "\e053"; }
+  .icon-newspaper:before          { content: "\e001"; }
+  .icon-notebook:before           { content: "\2710"; }
+  .icon-notification:before       { content: "\e01f"; }
+  .icon-online:before             { content: "\25fc"; }
+  .icon-opened:before             { content: "\25bc"; }
+  .icon-pencil:before             { content: "\270e"; }
+  .icon-phone-hang-up:before      { content: "\260e"; }
+  .icon-phone:before              { content: "\260f"; }
+  .icon-play:before               { content: "\25d9"; }
+  .icon-plus:before               { content: "\271a"; }
+  .icon-pushpin:before            { content: "\e012"; }
+  .icon-quotes-left:before        { content: "\e01d"; }
+  .icon-radio-checked:before      { content: "\2b26"; }
+  .icon-radio-unchecked:before    { content: "\2b25"; }
+  .icon-remove:before             { content: "\e02d"; }
+  .icon-room-info:before          { content: "\e059"; }
+  .icon-sad:before                { content: "\2639"; }
+  .icon-search:before             { content: "\e021"; }
+  .icon-shocked:before            { content: "\2364"; }
+  .icon-show-users:before         { content: "\e01e"; }
+  .icon-smiley:before             { content: "\263a"; }
+  .icon-spell-check:before        { content: "\e045"; }
+  .icon-spinner:before            { content: "\231b"; }
+  .icon-strikethrough:before      { content: "\e050"; }
+  .icon-thumbs-up:before          { content: "\261d"; }
+  .icon-tongue:before             { content: "\e038"; }
+  .icon-underline:before          { content: "\e04e"; }
+  .icon-unlocked:before           { content: "\e025"; }
+  .icon-user:before               { content: "\e01a"; }
+  .icon-users:before              { content: "\e01b"; }
+  .icon-volume-decrease:before    { content: "\e04b"; }
+  .icon-volume-high:before        { content: "\e046"; }
+  .icon-volume-increase:before    { content: "\e04c"; }
+  .icon-volume-low:before         { content: "\e048"; }
+  .icon-volume-medium:before      { content: "\e047"; }
+  .icon-volume-mute-2:before      { content: "\e04a"; }
+  .icon-volume-mute:before        { content: "\e049"; }
+  .icon-warning:before            { content: "\26a0"; }
+  .icon-wink:before               { content: "\e03a"; }
+  .icon-wondering:before          { content: "\2369"; }
+  .icon-wrench:before             { content: "\e024"; }
+  .icon-xa:before                 { content: "\e602"; }
+  .icon-unavailable:before,
+  .icon-offline:before            { content: "\e002"; }
+  .icon-youtube:before            { content: "\e055"; }
+  .icon-zoom-in:before            { content: "\e02b"; }
+  .icon-zoom-out:before           { content: "\e02a"; }
+
+  .no-text-select {
+      -webkit-touch-callout: none;
+      @include user-select(none);
+  }
+
+  .emoticon {
+    font-size: $font-size;
+  }
+
+  .left {
+      float: left;
+   } 
+   .right {
+       float: right;
+   }
+  .hidden {
+    display: none;
+  }
+
+  .locked {
+    padding-right: 22px;
+  }
+
+  @include keyframes(spin) {
+    from {
+      @include transform(rotate(0deg));
+    }
+    to {
+      @include transform(rotate(359deg));
+    }
+  }
+
+  .spinner:before {
+    font-size: 24px;
+    font-family: 'Converse-js' !important;
+    content: "\231b";
+  }
+
+  .spinner {
+    @include animation(spin 2s infinite, linear);
+    display: block;
+    text-align: center;
+    margin: 5px;
+  }
+
+  .centered {
+    text-align: center;
+    display: block;
+    margin: 5em auto;
+  }
+
+  .hor_centered {
+    text-align: center;
+    display: block;
+    margin: 0 auto;
+    clear: both;
+  }
+
+  .toggle-controlbox,
+  #minimized-chats {
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+    float: right;
+    margin: 0 $chat-gutter;
+    font-weight: bold;
+  }
+
+  .toggle-controlbox {
+    background-color: $link-color;
+    color: #0a0a0a;
+    height: 100%;
+    padding: 10px 8px 0 8px;
+    span {
+      color: $inverse-link-color;
+    }
+  }
+
+  .button-group,
+  .input-button-group {
+    display: table;
+  }
+  .button-group {
+    width: 100%;
+  }
+  .input-button-group button,
+  .input-button-group input {
+    display: table-cell;
+  }
+
+  #minimized-chats {
+    color: $inverse-link-color;
+    display: none;
+    height: 100%;
+    padding: 0;
+    width: 130px;
+
+    #toggle-minimized-chats {
+      border-top-left-radius: 4px;
+      border-top-right-radius: 4px;
+      background-color: ivory;
+      position: relative;
+      padding: 10px 0 0 0;
+      display: block;
+      width: 100%;
+      height: 100%;
+      text-align: center;
+    }
+    
+    .unread-message-count,
+    .chat-head-message-count {
+      font-weight: bold;
+      @include linear-gradient(#f6f6f6 5%, #808080 100%);
+      border: 1px solid;
+      text-shadow: 1px 1px 0 $text-shadow-color;
+      color: $warning-color;
+      border-radius: 5px;
+      padding: 2px 4px;
+      font-size: 16px;
+      text-align: center;
+      position: absolute;
+      right: 116px;
+      bottom: 10px;
+    }
+
+    .box-flyout {
+      position: absolute;
+      display: block;
+      height: auto;
+      bottom: $bottom-gutter-height;
+      margin-left: 0;
+
+      .chat-head {
+        font-size: 100%;
+        border-radius: 4px;
+        padding: 3px 0 0 5px;
+        margin: 0 0 1px 0;
+        box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
+        height: 24px;
+        width: 130px;
+      }
+    }
+  }
+
+  .chat-body {
+    background-color: white;
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
+    height: 289px;
+    @include calc(height, '100% - #{$chat-head-height}');
+    border-top: 0;
+    p {
+      font-size: $font-size;
+      color: $text-color;
+      padding: 5px;
+      margin: 0;
+    }
+  }
+
+  .tt-highlight {
+    background-color: #00230F;
+  }
+
+  .tt-suggestion {
+    p {
+      color: white;
+      text-shadow: rgba(0, 0, 0, 0.51) 0 -1px 0;
+      cursor: pointer;
+      font-size: 11px;
+    }
+    p:hover {
+      background-color: #00230F;
+      .tt-highlight {
+        background-color: #00230F;
+        background: #27774A;
+      }
+    }
+  }
+
+  .tt-dropdown-menu {
+    margin: 0 1px 0 1px;
+    width: 96px;
+    max-height: 250px;
+    overflow-x: hidden;
+    overflow-y: auto;
+    text-overflow: ellipsis;
+    background: #27774A;
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
+  }
+
+  .chat-blink {
+    background-color: #176679;
+    border-right: 1px solid #176679;
+    border-left: 1px solid #176679;
+  }
+
+  .chat-content {
+    position: relative;
+    padding: 8px;
+    font-size: 13px;
+    color: $text-color;
+    overflow-y: auto;
+    border: 0;
+    background-color: #ffffff;
+    line-height: 1.3em;
+    height: 206px;
+    height: calc(100% - #{$toolbar-height + $chat-textarea-height + 2});
+  }
+
+  .chat-info {
+    color: $text-color;
+  }
+
+  .chat-error {
+    color: $warning-color;
+    font-weight: bold;
+  }
+
+  .chat-error,
+  .chat-info,
+  .chat-message {
+    padding: 2px 0;
+  }
+
+  .chat-message-room,
+  .chat-message-them,
+  .chat-message-me {
+    font-weight: bold;
+    white-space: nowrap;
+    max-width: 100px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    display: inline-block;
+    float: left;
+    padding-right: 3px;
+  }
+
+  .chat-message-content {
+    word-wrap: break-word;
+  }
+
+  .chat-message-room,
+  .chat-message-them {
+    color: $message-them-color;
+  }
+
+  .chat-message-me {
+    color: $link-color;
+  }
+
+  .chat-event,
+  .chat-date,
+  .chat-info {
+    color: #808080;
+  }
+
+  li.chat-info {
+    padding-left: 10px;
+  }
+
+  .chat-date {
+    display: inline-block;
+    padding-top: 10px;
+  }
+
+  .not-implemented {
+    margin-top: 3em;
+    margin-left: 0.3em;
+    color: #808080;
+  }
+
+  .mentioned {
+    font-weight: bold;
+  }
+
+  .delayed {
+    .chat-message-them {
+      color: #FB5D50;
+    }
+    .chat-message-me {
+      color: #7EABBB;
+    }
+  }
+
+  .error {
+    color: red;
+  }
+  input.error {
+    border: 1px solid red;
+  }
+
+  .reg-feedback {
+    font-size: 85%;
+  }
+
+  .reg-feedback,
+  #converse-login .conn-feedback {
+    display: block;
+    text-align: center;
+    width: 100%;
+  }
+
+  .chat-message-error {
+    color: #76797C;
+    font-size: 90%;
+    font-weight: normal;
+  }
+
+  a.restore-chat,
+  .chat-title {
+    padding: 1px 0 1px 5px;
+    color: $chat-head-text-color;
+    font-weight: bold;
+    line-height: 15px;
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    text-shadow: rgba(0, 0, 0, 0.51) 0 -1px 0;
+  }
+
+  a.restore-chat:visited {
+    color: $chat-head-text-color;
+  }
+
+  .chat-title a {
+    color: $chat-head-text-color;
+    width: 100%;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .chat-head-chatbox,
+  .chat-head-chatroom {
+    height: $chat-head-height;
+    position: relative;
+    padding: 5px;
+  }
+  .chat-head-chatroom {
+    background-color: $chatroom-head-color;
+  }
+  .chat-head-chatbox {
+    background-color: $chat-head-color;
+  }
+
+  .user-custom-message,
+  .chatroom-topic {
+    color: white;
+    font-size: 80%;
+    font-style: italic;
+    height: 1.3em;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    margin: 0;
+    padding: 1px 0 1px 5px;
+  }
+
+  .activated {
+    display: block !important;
+  }
+
+  a.subscribe-to-user {
+    padding-left: 2em;
+    font-weight: bold;
+  }
+
+  dl.add-converse-contact {
+    margin: 0 0.5em 0.75em 0.5em;
+  }
+
+  .fancy-dropdown {
+    border: 1px solid $light-background-border-color;
+    height: $controlbox-dropdown-height;
+    text-align: left;
+    .choose-xmpp-status {
+      width: 155px;
+      span {
+        padding-right: 5px;
+        padding-left: 5px;
+        float: left;
+      }
+    }
+    .choose-xmpp-status,
+    .toggle-xmpp-contact-form {
+      text-shadow: 0 1px 0 #ffffff;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      display: inline;
+    }
+    .toggle-xmpp-contact-form span {
+      float: left;
+    }
+  }
+
+
+  #fancy-xmpp-status-select a.change-xmpp-status-message {
+    float: right;
+    clear: right;
+    height: 22px;
+    width: 12px;
+    margin: 0px 5px 0 0;
+    color: $link-color;
+  }
+
+  ul#found-users {
+    padding: 10px 0 5px 5px;
+    border: 0;
+  }
+
+  form.search-xmpp-contact {
+    margin: 0;
+    padding-left: 5px;
+    padding: 0 0 5px 5px;
+    input {
+      width: 8em;
+    }
+  }
+
+  a.configure-chatroom-button,
+  a.toggle-chatbox-button,
+  a.close-chatbox-button {
+    border-radius: 6px;
+    border: 1px solid #888;
+    color: white;
+    cursor: pointer;
+    display: inline-block;
+    float: right;
+    font-size: 10px;
+    margin: 0 0 0 3px;
+    padding: 3px 3px 2px 3px;
+    text-decoration: none;
+  }
+
+  a.configure-chatroom-button:active,
+  a.toggle-chatbox-button:active,
+  a.close-chatbox-button:active {
+    position: relative;
+    top: 1px;
+  }
+
+  .chatroom-form-container {
+    height: 100%;
+    color: $text-color;
+    overflow-y: auto;
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
+  }
+
+  .chatroom-form {
+    padding: 1em;
+    .instructions {
+      color: gray;
+      font-size: 95%;
+    }
+    input {
+      width: 100%;
+      padding: 5px;
+      text-align: center;
+    }
+    legend {
+      font-size: $legend-font-size;
+      font-weight: bold;
+      margin: 10px 0 15px 0;
+    }
+    label {
+      height: 30px;
+      font-weight: bold;
+      display: block;
+      clear: both;
+
+      label input, label select {
+        float: right;
+      }
+    }
+  }
+
+  .requesting-xmpp-contact .request-actions {
+    margin-left: 0.5em;
+    float: right;
+  }
+
+  #converse-roster {
+    text-align: left;
+    width: 100%;
+    position: relative;
+    margin: 0.5em 0 0 0;
+    height: $roster-height;
+    height: calc(100% - #{$controlbox-dropdown-height*2} - 20px);
+    overflow: hidden;
+
+    &.no-contact-requests {
+        height: calc(100% - #{$controlbox-dropdown-height} - 20px);
+    }
+
+    .filter-type {
+      display: table-cell;
+      float: right;
+      font-size: $font-size;
+      height: $controlbox-dropdown-height;
+      margin: 0 0 0.5em -1px;
+      padding: 0;
+      width: 84px;
+    }
+    .roster-filter {
+      float: left;
+      background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAABNSURBVHjaXI7BDcAwCAMvyQjMyQ6dAbZiKfqoUK34g2zJh1dENIC7M8pMAPYdzAVY3d0ajNz9aypS/b5R6o+ZPdqoKgCq6h80KH3xDgBqNR97p8oAGQAAAABJRU5ErkJggg== ) no-repeat right -20px center;
+      border: 1px solid #999;
+      font-size: $font-size;
+      height: $controlbox-dropdown-height;
+      margin: 0 0 0.5em 7px;
+      padding: 0;
+      padding: 2px;
+      width: 103px;
+    }
+    /* (jQ addClass:) if input has value: */
+    .roster-filter.x {
+      background-position: right 3px center;
+    }
+    /* (jQ addClass:) if mouse is over the 'x' input area*/
+    .roster-filter.onX {
+      cursor: pointer;
+    }
+    .roster-contacts {
+      margin: 0;
+      max-height: 195px;
+      max-height: calc(100% - 26px);
+      overflow-x: hidden;
+      overflow-y: auto;
+      padding-bottom: 15px;
+    }
+    .group-toggle {
+      color: $text-color;
+      display: block;
+      width: 100%;
+    }
+    dt {
+      display: none;
+    }
+    dd {
+      line-height: 16px;
+      padding: 4px 2px 0 4px;
+      height: 24px;
+      a, span {
+        text-shadow: 0 1px 0 $link-shadow-color;
+        display: inline-block;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        margin-left: 3px;
+      }
+      span {
+        padding: 0 5px 0 0;
+      }
+      a {
+         &.decline-xmpp-request {
+            margin-left: 5px;
+        }
+        &.remove-xmpp-contact {
+            float: right;
+            width: 22px;
+            margin: 0;
+            display: none;
+            color: $text-color;
+        }
+      }
+    }
+    dd:hover a.remove-xmpp-contact {
+      display: inline-block;
+    }
+    dd {
+      &.odd {
+        background-color: #DCEAC5;
+        /* Make this difference */
+      }
+      &.current-xmpp-contact span {
+        font-size: 16px;
+        float: left;
+        color: $link-color;
+      }
+      a.open-chat {
+        width: 80%;
+      }
+    }
+    span {
+      &.pending-contact-name {
+        width: 80%;
+      }
+      &.req-contact-name {
+        width: 69%;
+        padding: 0;
+      }
+    }
+  }
+
+  #available-chatrooms {
+    text-align: left;
+  }
+
+  #available-chatrooms dt,
+  #converse-roster dt {
+    font-weight: normal;
+    color: $text-color;
+    border: none;
+    padding: 0.5em;
+    text-shadow: 0 1px 0 $text-shadow-color;
+  }
+
+  .room-info {
+    font-size: 11px;
+    font-style: normal;
+    font-weight: normal;
+  }
+
+  li.room-info {
+    display: block;
+    margin-left: 5px;
+  }
+
+  div.room-info {
+    clear: left;
+	width: 100%;
+  }
+
+  p.room-info {
+    margin: 0;
+    padding: 0;
+    display: block;
+    white-space: normal;
+  }
+
+  a {
+    &.room-info {
+      width: 15px;
+      display: none;
+      clear: right;
+    }
+    &.open-room {
+      float: left;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow-x: hidden;
+    }
+  }
+
+  dd.available-chatroom {
+    border: none;
+    clear: both;
+    color: $text-color;
+    display: block;
+    font-weight: bold;
+    overflow: hidden;
+    padding: 0.25em 0.5em;
+    text-overflow: ellipsis;
+    text-shadow: 0 1px 0 $text-shadow-color;
+    white-space: nowrap;
+    a.open-room {
+      width: 150px;
+    }
+    &:hover {
+      background-color: $highlight-color;
+      .room-info {
+        display: block;
+        font-size: 14px;
+      }
+    }
+  }
+
+  #converse-roster dd {
+    border: none;
+    clear: both;
+    color: $text-color;
+    display: block;
+    font-weight: bold;
+    overflow-y: hidden;
+    text-shadow: 0 1px 0 $text-shadow-color;
+  }
+
+  .roster-group:hover,
+  #converse-roster dd:hover {
+    background-color: $highlight-color;
+  }
+
+  .chatbox,
+  .chatroom {
+    height: $bottom-gutter-height;
+    float: right;
+    margin: 0 $chat-gutter;
+    @media screen and (max-width: $mobile-landscape-length) {
+        margin: 0;
+    }
+    display: block;
+  }
+
+  .chatbox {
+    width: $chat-width;
+    @media screen and (max-width: $mobile-landscape-length) {
+        width: $mobile-chat-width;
+    }
+    .box-flyout {
+      z-index: 1;
+      width: $chat-width;
+        @media screen and (max-width: $mobile-landscape-length) {
+            width: $mobile-chat-width;
+        }
+    }
+    .dropdown {
+      a {
+        width: 148px;
+        display: inline-block;
+        line-height: $controlbox-dropdown-height;
+      }
+      li {
+        list-style: none;
+        padding-left: 0;
+      }
+      dd {
+        ul {
+          padding: 0;
+          list-style: none;
+          position: absolute;
+          left: 0;
+          top: 0;
+          border: 1px solid $light-background-border-color;
+          width: 100%;
+          z-index: 21;
+          background-color: $light-background-color;
+          li:hover {
+            background-color: $highlight-color;
+          }
+        }
+      }
+      dd.search-xmpp ul {
+        box-shadow: 1px 4px 10px 1px rgba(0, 0, 0, 0.4);
+
+        li:hover {
+            background-color: $light-background-color;
+        }
+      }
+      dt a span {
+        cursor: pointer;
+        display: block;
+        padding: 4px 7px 0 5px;
+      }
+    }
+  }
+
+  .chatroom {
+    width: $chatroom-width;
+    .box-flyout {
+      width: $chatroom-width;
+    }
+    @media screen and (max-width: $mobile-landscape-length) {
+      width: $mobile-chat-width;
+      .box-flyout {
+        width: $mobile-chat-width;
+      }
+    }
+
+    label {
+      margin-left: 2px;
+      font-size: 12px;
+    }
+    .participant-list {
+      list-style: none;
+      li {
+        cursor: default;
+        display: block;
+        font-size: 12px;
+        font-weight: bold;
+        overflow: hidden;
+        padding: 2px 5px;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        &.moderator {
+          color: #8f2831;
+        }
+      }
+    }
+    .chat-textarea {
+      border-bottom-right-radius: 0;
+    }
+    .chat-area {
+      float: left;
+      height: 100%;
+      width: $chat-width;
+    }
+    .invited-contact {
+      margin: -1px 0 0 -1px;
+      width: 100px;
+      border: 1px solid #999;
+    }
+    .invited-contact.tt-input {
+      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;
+    }
+    .participants {
+      float: right;
+      background-color: white;
+      overflow-y: auto;
+      overflow-x: hidden;
+      border-left: 1px solid #AAA;
+      border-bottom-right-radius: 4px;
+      width: 100px;
+      height: 100%;
+      label {
+        font-size: 12px;
+        font-style: italic;
+        margin: 5px;
+        display: block;
+      }
+    }
+  }
+
+  .chatroom-form,
+  .controlbox-pane {
+    background-color: white;
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+    border: 0;
+    font-size: $font-size;
+    overflow-y: auto;
+    position: absolute;
+    text-align: center;
+    width: 100%;
+    height: 289px;
+    @include calc(height, '100% - #{$chat-head-height}');
+  }
+
+  .controlbox-pane {
+    overflow-y: hidden;
+    overflow-x: hidden;
+    dd {
+      margin-left: 0;
+      margin-bottom: 0;
+      &.odd {
+        background-color: #DCEAC5;
+      }
+    }
+  }
+
+  #converse-register {
+    background: white;
+    .title {
+      font-weight: bold;
+    }
+    .info {
+      font-style: italic;
+      color: green;
+      font-size: 85%;
+      margin: 5px 0;
+    }
+    .form-errors {
+      color: red;
+      display: none;
+    }
+    .provider-title {
+      font-size: 22px;
+    }
+    .provider-score {
+      width: 178px;
+      margin-bottom: 8px;
+    }
+    .form-help .url {
+      font-weight: bold;
+      color: $link-color;
+    }
+    .input-group {
+      display: table;
+      margin: auto;
+      width: 100%;
+      span {
+          overflow-x: hidden;
+          text-overflow: ellipsis;
+          max-width: 110px;
+      }
+      span, input[name=username] {
+          display: table-cell;
+          text-align: left;
+      }
+    }
+    .instructions {
+      color: gray;
+      font-size: 85%;
+      &:hover {
+        color: $text-color;
+      }
+    }
+  }
+
+  #converse-register, #converse-login {
+    margin: 2em 1em 1em 1em;
+    background: white;
+
+    .login-submit, .submit {
+      height: 30px;
+      padding: 0px;
+      font-size: $font-size;
+    }
+    .submit {
+      margin: 1em 0;
+    }
+    .login-anon {
+      height: auto;
+      white-space: normal;
+    }
+    .cancel-submit, .save-submit {
+      width: 45%;
+      margin: 5px 3px 5px 3px;
+    }
+    .cancel, .cancel-submit {
+      color: $warning-color;
+    }
+    .save-submit {
+      color: $save-button-color;
+    }
+    input {
+      width: 100%;
+      height: 30px;
+      margin: 5px 0 10px 0;
+      padding-left: 0.5em;
+    }
+  }
+
+  .form-help {
+    color: gray;
+    font-size: 85%;
+    padding-top: 5px;
+    &:hover {
+      color: $text-color;
+    }
+  }
+
+  .chatroom-form label,
+  .controlbox-pane label,
+  #converse-register label,
+  #converse-login label {
+    font-size: $font-size;
+    font-weight: bold;
+    height: auto;
+    margin: 4px;
+  }
+  
+  form.add-chatroom {
+    background: none;
+    padding: 0.5em;
+
+    input[type=button],
+    input[type=submit],
+    input[type=text] {
+      margin: 0;
+      width: 100%;
+      padding: 0.25em;
+    }
+    span.spinner,
+    input[type=button],
+    input[type=submit] {
+      margin-top: 0.5em;
+      display: table-cell;
+      width: auto;
+    }
+    input[type=submit] {
+      color: $save-button-color;
+    }
+  }
+
+  select#select-xmpp-status {
+    float: right;
+    margin-right: 0.5em;
+  }
+
+  /* @group Tabs */
+  .chat-head {
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+    color: #ffffff;
+    font-size: 100%;
+    margin: 0;
+    padding: 6px;
+    &.controlbox-head {
+      background-color: $chat-head-color;
+      border-top-left-radius: 4px;
+      border-top-right-radius: 4px;
+      color: $chat-head-inverse-text-color;
+      height: $chat-head-height;
+      margin: 0;
+      padding: 6px 6px 6px 0;
+    }
+    .avatar {
+      float: left;
+    }
+    #controlbox-tabs {
+      text-align: center;
+      display: inline;
+      overflow: hidden;
+      font-size: 12px;
+      list-style-type: none;
+
+      a.current,
+      a.current:hover {
+        box-shadow: none;
+        border-bottom: 0;
+        height: $chat-head-height;
+        cursor: default;
+        color: $text-color;
+      }
+
+      /* single tab */
+      li {
+        float: left;
+        list-style: none;
+        padding-left: 0;
+        text-shadow: white 0 1px 0;
+        width: 38%;
+
+        a {
+          background-color: white;
+          border-bottom: 1px solid $border-color;
+          border-top-left-radius: 4px;
+          border-top-right-radius: 4px;
+          box-shadow: inset 2px -2px 20px rgba(0, 0, 0, 0.3);
+          color: #888;
+          display: block;
+          font-size: 12px;
+          height: $chat-head-height - 1px;
+          line-height: $chat-head-height - 1px;
+          margin: 0;
+          text-align: center;
+          text-decoration: none;
+        }
+        a:hover {
+          color: $text-color;
+        }
+      }
+    }
+  }
+
+  div#chatrooms {
+    overflow-y: auto;
+  }
+
+  form.sendXMPPMessage {
+    -moz-background-clip: padding;
+    -moz-border-radius: 4px;
+    -webkit-background-clip: padding-box;
+    -webkit-border-radius: 4px;
+    background-clip: padding-box;
+    background: white;
+    border-radius: 4px;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    border-top: 1px solid #BBB;
+    border: 0;
+    margin: 0;
+    padding: 0;
+    position: relative;
+    height: #{$chat-textarea-height + $toolbar-height};
+    width: $chat-width;
+    @media screen and (max-width: $mobile-landscape-length) {
+        width: 100%;
+    }
+    .chat-textarea {
+      @include border-bottom-radius(4px);
+      border: 0;
+      height: $chat-textarea-height;
+      padding: 0.5em;
+      width: 100%;
+      resize: none;
+    }
+  }
+
+  .chat-toolbar {
+    font-size: $font-size;
+    margin: 0;
+    padding: 0 4px;
+    height: $toolbar-height;
+    display: block;
+
+    a {
+      color: $link-color;
+    }
+
+    .unencrypted a,
+    .unencrypted {
+      color: #8f2831;
+    }
+
+    .unverified a,
+    .unverified {
+      color: #cf5300;
+    }
+
+    .private a,
+    .private {
+      color: #4b7003;
+    }
+
+    .toggle-participants,
+    .toggle-clear,
+    .toggle-otr {
+      float: right;
+    }
+
+    li {
+      display: inline-block;
+      list-style: none;
+      padding: 0 3px 0 3px;
+      cursor: pointer;
+      margin-top: 1px;
+    }
+    li:hover {
+      cursor: pointer;
+    }
+
+    ul {
+      background: #fff;
+      bottom: 100%;
+      box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.4);
+      display: none;
+      font-size: 12px;
+      margin: 0 0 1px 0;
+      position: absolute;
+      right: 0;
+      li {
+        cursor: pointer;
+        list-style: none;
+        position: relative;
+        a:hover {
+          color: #8f2831;
+        }
+      }
+    }
+
+    .toggle-smiley {
+      padding-left: 5px;
+      ul {
+        li {
+          font-size: $font-size;
+          padding: 5px;
+          z-index: 98;
+        }
+        li:hover {
+          background-color: $highlight-color;
+        }
+      }
+    }
+
+    .toggle-otr {
+      ul { 
+        li {
+          background-color: white;
+          display: block;
+          z-index: 99;
+          a {
+            -moz-transition: background-color 0.2s ease-in-out;
+            -webkit-transition: background-color 0.2s ease-in-out;
+            transition: background-color 0.2s ease-in-out;
+            display: block;
+            padding: 1px;
+            text-decoration: none;
+          }
+        }
+      }
+    }
+  }
+
+  .chat-toolbar-text {
+    font-size: 12px;
+    padding-right: 3px;
+  }
+
+  #set-custom-xmpp-status {
+    float: left;
+    padding: 0;
+    input {
+      height: $controlbox-dropdown-height + 1px;
+      @include calc(width, '100% - 40px');
+      padding: 0 0 0 0.5em;
+    }
+    button {
+      height: $controlbox-dropdown-height + 1px;
+      width: 40px;
+      padding: 1px;
+    }
+  }
+
+  .chat-textarea-chatbox-selected {
+    border: 1px solid #578308;
+    margin: 0;
+  }
+
+  .chat-textarea-chatroom-selected {
+    border: 2px solid $link-color;
+    margin: 0;
+  }
+
+  #controlbox {
+    display: none;
+    div.xmpp-status {
+      display: inline;
+    }
+  }
+
+  /* status dropdown styles */
+  .chatbox {
+    .dropdown {
+      background-color: $light-background-color;
+      dd {
+        position: relative;
+      }
+    }
+  }
+
+  .chatbox .dropdown dd,
+  .dropdown dt,
+  .dropdown ul {
+    margin: 0;
+    padding: 0;
+  }
+
+  .add-xmpp-contact {
+    background: none;
+    padding: 5px;
+    input {
+      margin: 0 0 1rem;
+      width: 100%;
+    }
+    button {
+      width: 100%;
+    }
+  }
+
+  .xmpp-status-menu {
+    text-align: left;
+    box-shadow: 1px 4px 10px 1px rgba(0, 0, 0, 0.4);
+    li {
+      padding: 2px;
+      a {
+        width: 100%;
+        padding: 0 8px;
+      }
+    }
+  }
+  .xmpp-status-menu li a.logout,
+  .xmpp-status-menu li a.logout span {
+    color: $warning-color;
+  }
+
+  .set-xmpp-status {
+    background: none;
+    padding: 0.75em 0.5em 0.5em 0.5em;
+    .dropdown dd ul {
+      z-index: 22;
+    }
+  }
+
+  .minimized-chats-flyout,
+  .box-flyout {
+    border-radius: 4px;
+    bottom: 6px;
+    box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
+    display: block;
+    height: $chat-height;
+    @media screen and (max-width: $mobile-landscape-length) {
+      height: $mobile-chat-height;
+    }
+    position: absolute;
+  }
+
+  .minimized-chats-flyout {
+    border-radius: 4px;
+    bottom: $bottom-gutter-height;
+    box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
+    display: block;
+    position: absolute;
+    height: auto;
+    width: 130px;
+    .chat-head-chatroom,
+    .chat-head {
+      border-radius: 4px;
+      width: 130px;
+      height: 35px;
+      margin-bottom: 1px;
+    }
+  }
+  .minimized-chats-flyout.minimized {
+    height: auto;
+  }
+
+  .dragresize {
+    position: absolute;
+    width: $chat-width;
+    height: 5px;
+    background: transparent;
+    border: 0;
+    top: 0;
+    margin-left: 0;
+    cursor: n-resize;
+    z-index: 20;
+  }
+}

sass/_variables.scss

@@ -0,0 +1,40 @@
+  $link-color: #436F64 !default;
+  $inverse-link-color: white !default;
+  $link-shadow-color: #FAFAFA !default;
+  $text-shadow-color: #FAFAFA !default;
+  $text-color: #6C4C44 !default;
+  $border-color: #CCC !default;
+  $warning-color: #681F2C !default;
+  $light-background-border-color: #F1DCD6 !default;
+  $light-background-color: #F1E2DD !default;
+  $icon-color: #114327 !default;
+  $highlight-color: #E3C9C1 !default;
+  $chat-head-color: #436F64 !default;
+  $chatroom-head-color: #0F592F !default;
+  $chat-head-text-color: white !default;
+  $chat-head-inverse-text-color: white !default;
+  $chat-head-height: 44px !default;
+  $save-button-color: #436F64 !default;
+  $chat-textarea-height: 62px !default;
+  $toolbar-height: 20px !default;
+  $message-them-color: #4B7003 !default;
+  $roster-height: 194px !default;
+  $controlbox-dropdown-height: 25px !default;
+
+  $bottom-gutter-height: 35px !default;
+
+  $mobile_landscape_length: 480px !default;
+
+  $font-size: 14px !default;
+  $legend-font-size: 16px !default;
+
+  $chatroom-width: 300px !default;
+  $chat-width: 200px !default;
+  $chat-height: 400px !default;
+  $chat-gutter: 7px !default;
+
+  $mobile-chat-width: 100% !default;
+  $mobile-chat-height: 400px !default;
+  $small-mobile-chat-height: 300px !default;
+
+  $font-path: "../fonticons/fonts/" !default;

sass/converse.scss

@@ -6,1535 +6,6 @@
  * Licensed under the Mozilla Public License
  */
 
-@import "../ruby/1.9.1/gems/bourbon-4.2.1/app/assets/stylesheets/_bourbon";
-
+@import "../ruby/1.9.1/gems/bourbon-4.2.3/app/assets/stylesheets/_bourbon";
 @import "variables";
-
-@font-face {
-  font-family: 'Converse-js';
-  src: url($font-path + 'icomoon.eot?-mnoxh0');
-  src: url($font-path + 'icomoon.eot?#iefix-mnoxh0') format("embedded-opentype"), url($font-path + 'icomoon.woff?-mnoxh0') format("woff"), url($font-path + 'icomoon.ttf?-mnoxh0') format("truetype"), url($font-path + 'icomoon.svg?-mnoxh0#icomoon') format("svg");
-  font-weight: normal;
-  font-style: normal;
-}
-
-.icon-conversejs {
-  font-family: 'Converse-js';
-  speak: none;
-  font-style: normal;
-  font-weight: normal;
-  font-variant: normal;
-  text-transform: none;
-  line-height: 1;
-  /* Better Font Rendering =========== */
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-.icon-conversejs:before {
-  content: "\e600";
-}
-
-#conversejs {
-  @import "variables";
-  ::selection {
-    background-color: $highlight-color;
-  }
-  ::-moz-selection {
-    background-color: $highlight-color;
-  }
-
-  color: $text-color;
-  font-size: $font-size;
-  bottom: 0;
-  direction: ltr;
-  height: $bottom-gutter-height;
-  left: auto;
-  position: fixed;
-  right: 15px;
-  z-index: 30;
-  display: block;
-  width: auto;
-
-  @include box-sizing(border-box);
-  *, *:before, *:after {
-    @include box-sizing(border-box);
-  }
-
-  @media screen and (max-width: $mobile_landscape_length) {
-      margin: 5px 10px;
-  }
-
-  a, a:visited {
-    text-decoration: none;
-    color: $link-color;
-    text-shadow: none;
-  }
-
-  ul li { height: auto; }
-  div, span, h1, h2, h3, h4, h5, h6, p, blockquote,
-  pre, a, em, img, strong, dl, dt, dd, ol, ul, li,
-  fieldset, form, label, legend, table, caption, tbody,
-  tfoot, thead, tr, th, td, article, aside, canvas, details,
-  embed, figure, figcaption, footer, header, hgroup, menu,
-  nav, output, ruby, section, summary, time, mark, audio, video {
-    margin: 0;
-    padding: 0;
-    border: 0;
-    font: inherit;
-    vertical-align: baseline;
-  }
-
-  textarea,
-  input[type=submit], input[type=button],
-  input[type=text], input[type=password],
-  button {
-    font-size: $font-size;
-    padding: 0.25em;
-    min-height: 0;
-  }
-
-  input[type=text] {
-    height: 26px;
-  }
-
-  strong {
-    font-weight: 700;
-  }
-
-  ol, ul {
-    list-style: none;
-  }
-
-  li {
-    height: 10px;
-  }
-
-  ul, ol, dl {
-    font: inherit;
-    margin: 0;
-  }
-
-  [data-icon]:before {
-    content: attr(data-icon);
-    font-family: 'Converse-js';
-    font-variant: normal;
-    font-weight: normal;
-    line-height: 1;
-    speak: none;
-    text-transform: none;
-    /* Better Font Rendering =========== */
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
-
-  [class^="icon-"], [class*=" icon-"] {
-    background-position: 14px 14px;
-    background-image: none;
-    font-family: 'Converse-js';
-    font-style: normal;
-    font-variant: normal;
-    font-weight: normal;
-    width: auto;
-    height: auto;
-    line-height: 1;
-    speak: none;
-    text-transform: none;
-    /* Better Font Rendering =========== */
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
-
-  .icon-address-book:before       { content: "\270f"; }
-  .icon-angry:before              { content: "\e03f"; }
-  .icon-attachment:before         { content: "\e032"; }
-  .icon-away:before               { content: "\25fb"; }
-  .icon-blocked:before            { content: "\2718"; }
-  .icon-bold:before               { content: "\e04d"; }
-  .icon-bubbles-2:before          { content: "\e016"; }
-  .icon-bubbles-3:before          { content: "\e017"; }
-  .icon-bubbles:before            { content: "\e015"; }
-  .icon-camera-2:before           { content: "\2616"; }
-  .icon-camera:before             { content: "\e003"; }
-  .icon-cancel-circle:before      { content: "\e058"; }
-  .icon-checkbox-checked:before   { content: "\2611"; }
-  .icon-checkbox-partial:before   { content: "\2b28"; }
-  .icon-checkbox-unchecked:before { content: "\2b27"; }
-  .icon-checkmark:before          { content: "\2713"; }
-  .icon-close:before              { content: "\2715"; }
-  .icon-closed:before             { content: "\25ba"; }
-  .icon-cog:before                { content: "\e02f"; }
-  .icon-cogs:before               { content: "\e022"; }
-  .icon-confused:before           { content: "\2368"; }
-  .icon-cool:before               { content: "\e040"; }
-  .icon-dnd:before                { content: "\e004"; }
-  .icon-envelop:before            { content: "\2709"; }
-  .icon-evil:before               { content: "\261f"; }
-  .icon-eye-blocked:before        { content: "\e031"; }
-  .icon-eye:before                { content: "\e030"; }
-  .icon-globe:before              { content: "\e033"; }
-  .icon-grin:before               { content: "\e041"; }
-  .icon-happy:before              { content: "\263b"; }
-  .icon-headphones:before         { content: "\266c"; }
-  .icon-heart:before              { content: "\2764"; }
-  .icon-hide-users:before         { content: "\e01c"; }
-  .icon-home:before               { content: "\e000"; }
-  .icon-image:before              { content: "\2b14"; }
-  .icon-info:before               { content: "\2360"; }
-  .icon-italic:before             { content: "\e04f"; }
-  .icon-key-2:before              { content: "\e029"; }
-  .icon-key:before                { content: "\e028"; }
-  .icon-lock-2:before             { content: "\e027"; }
-  .icon-lock:before               { content: "\e026"; }
-  .icon-logout:before             { content: "\e601"; }
-  .icon-minus:before              { content: "\e05a"; }
-  .icon-music:before              { content: "\266b"; }
-  .icon-new-tab:before            { content: "\e053"; }
-  .icon-newspaper:before          { content: "\e001"; }
-  .icon-notebook:before           { content: "\2710"; }
-  .icon-notification:before       { content: "\e01f"; }
-  .icon-online:before             { content: "\25fc"; }
-  .icon-opened:before             { content: "\25bc"; }
-  .icon-pencil:before             { content: "\270e"; }
-  .icon-phone-hang-up:before      { content: "\260e"; }
-  .icon-phone:before              { content: "\260f"; }
-  .icon-play:before               { content: "\25d9"; }
-  .icon-plus:before               { content: "\271a"; }
-  .icon-pushpin:before            { content: "\e012"; }
-  .icon-quotes-left:before        { content: "\e01d"; }
-  .icon-radio-checked:before      { content: "\2b26"; }
-  .icon-radio-unchecked:before    { content: "\2b25"; }
-  .icon-remove:before             { content: "\e02d"; }
-  .icon-room-info:before          { content: "\e059"; }
-  .icon-sad:before                { content: "\2639"; }
-  .icon-search:before             { content: "\e021"; }
-  .icon-shocked:before            { content: "\2364"; }
-  .icon-show-users:before         { content: "\e01e"; }
-  .icon-smiley:before             { content: "\263a"; }
-  .icon-spell-check:before        { content: "\e045"; }
-  .icon-spinner:before            { content: "\231b"; }
-  .icon-strikethrough:before      { content: "\e050"; }
-  .icon-thumbs-up:before          { content: "\261d"; }
-  .icon-tongue:before             { content: "\e038"; }
-  .icon-underline:before          { content: "\e04e"; }
-  .icon-unlocked:before           { content: "\e025"; }
-  .icon-user:before               { content: "\e01a"; }
-  .icon-users:before              { content: "\e01b"; }
-  .icon-volume-decrease:before    { content: "\e04b"; }
-  .icon-volume-high:before        { content: "\e046"; }
-  .icon-volume-increase:before    { content: "\e04c"; }
-  .icon-volume-low:before         { content: "\e048"; }
-  .icon-volume-medium:before      { content: "\e047"; }
-  .icon-volume-mute-2:before      { content: "\e04a"; }
-  .icon-volume-mute:before        { content: "\e049"; }
-  .icon-warning:before            { content: "\26a0"; }
-  .icon-wink:before               { content: "\e03a"; }
-  .icon-wondering:before          { content: "\2369"; }
-  .icon-wrench:before             { content: "\e024"; }
-  .icon-xa:before                 { content: "\e602"; }
-  .icon-unavailable:before,
-  .icon-offline:before            { content: "\e002"; }
-  .icon-youtube:before            { content: "\e055"; }
-  .icon-zoom-in:before            { content: "\e02b"; }
-  .icon-zoom-out:before           { content: "\e02a"; }
-
-  .no-text-select {
-      -webkit-touch-callout: none;
-      @include user-select(none);
-  }
-
-  .emoticon {
-    font-size: $font-size;
-  }
-
-  .left {
-      float: left;
-   } 
-   .right {
-       float: right;
-   }
-  .hidden {
-    display: none;
-  }
-
-  .locked {
-    padding-right: 22px;
-  }
-
-  @include keyframes(spin) {
-    from {
-      @include transform(rotate(0deg));
-    }
-    to {
-      @include transform(rotate(359deg));
-    }
-  }
-
-  .spinner:before {
-    font-size: 24px;
-    font-family: 'Converse-js' !important;
-    content: "\231b";
-  }
-
-  .spinner {
-    @include animation(spin 2s infinite, linear);
-    display: block;
-    text-align: center;
-    margin: 5px;
-  }
-
-  .centered {
-    text-align: center;
-    display: block;
-    margin: 5em auto;
-  }
-
-  .hor_centered {
-    text-align: center;
-    display: block;
-    margin: 0 auto;
-    clear: both;
-  }
-
-  .toggle-controlbox,
-  #minimized-chats {
-    border-top-left-radius: 4px;
-    border-top-right-radius: 4px;
-    float: right;
-    margin: 0 $chat-gutter;
-    font-weight: bold;
-  }
-
-  .toggle-controlbox {
-    background-color: $link-color;
-    color: #0a0a0a;
-    height: 100%;
-    padding: 10px 8px 0 8px;
-    span {
-      color: $inverse-link-color;
-    }
-  }
-
-  .button-group,
-  .input-button-group {
-    display: table;
-  }
-  .button-group {
-    width: 100%;
-  }
-  .input-button-group button,
-  .input-button-group input {
-    display: table-cell;
-  }
-
-  #minimized-chats {
-    color: $inverse-link-color;
-    display: none;
-    height: 100%;
-    padding: 0;
-    width: 130px;
-
-    #toggle-minimized-chats {
-      border-top-left-radius: 4px;
-      border-top-right-radius: 4px;
-      background-color: ivory;
-      position: relative;
-      padding: 10px 0 0 0;
-      display: block;
-      width: 100%;
-      height: 100%;
-      text-align: center;
-    }
-    
-    .unread-message-count,
-    .chat-head-message-count {
-      font-weight: bold;
-      @include linear-gradient(#f6f6f6 5%, #808080 100%);
-      border: 1px solid;
-      text-shadow: 1px 1px 0 $text-shadow-color;
-      color: $warning-color;
-      border-radius: 5px;
-      padding: 2px 4px;
-      font-size: 16px;
-      text-align: center;
-      position: absolute;
-      right: 116px;
-      bottom: 10px;
-    }
-
-    .box-flyout {
-      position: absolute;
-      display: block;
-      height: auto;
-      bottom: $bottom-gutter-height;
-      margin-left: 0;
-
-      .chat-head {
-        font-size: 100%;
-        border-radius: 4px;
-        padding: 3px 0 0 5px;
-        margin: 0 0 1px 0;
-        box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
-        height: 24px;
-        width: 130px;
-      }
-    }
-  }
-
-  .chat-body {
-    background-color: white;
-    border-bottom-right-radius: 4px;
-    border-bottom-left-radius: 4px;
-    height: 289px;
-    @include calc(height, '100% - #{$chat-head-height}');
-    border-top: 0;
-    p {
-      font-size: $font-size;
-      color: $text-color;
-      padding: 5px;
-      margin: 0;
-    }
-  }
-
-  .tt-highlight {
-    background-color: #00230F;
-  }
-
-  .tt-suggestion {
-    p {
-      color: white;
-      text-shadow: rgba(0, 0, 0, 0.51) 0 -1px 0;
-      cursor: pointer;
-      font-size: 11px;
-    }
-    p:hover {
-      background-color: #00230F;
-      .tt-highlight {
-        background-color: #00230F;
-        background: #27774A;
-      }
-    }
-  }
-
-  .tt-dropdown-menu {
-    margin: 0 1px 0 1px;
-    width: 96px;
-    max-height: 250px;
-    overflow-x: hidden;
-    overflow-y: auto;
-    text-overflow: ellipsis;
-    background: #27774A;
-    border-bottom-right-radius: 4px;
-    border-bottom-left-radius: 4px;
-  }
-
-  .chat-blink {
-    background-color: #176679;
-    border-right: 1px solid #176679;
-    border-left: 1px solid #176679;
-  }
-
-  .chat-content {
-    position: relative;
-    padding: 8px;
-    font-size: 13px;
-    color: $text-color;
-    overflow-y: auto;
-    border: 0;
-    background-color: #ffffff;
-    line-height: 1.3em;
-    height: 206px;
-    height: calc(100% - #{$toolbar-height + $chat-textarea-height + 2});
-  }
-
-  .chat-info {
-    color: $text-color;
-  }
-
-  .chat-error {
-    color: $warning-color;
-    font-weight: bold;
-  }
-
-  .chat-error,
-  .chat-info,
-  .chat-message {
-    padding: 2px 0;
-  }
-
-  .chat-message-room,
-  .chat-message-them,
-  .chat-message-me {
-    font-weight: bold;
-    white-space: nowrap;
-    max-width: 100px;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    display: inline-block;
-    float: left;
-    padding-right: 3px;
-  }
-
-  .chat-message-content {
-    word-wrap: break-word;
-  }
-
-  .chat-message-room,
-  .chat-message-them {
-    color: $message-them-color;
-  }
-
-  .chat-message-me {
-    color: $link-color;
-  }
-
-  .chat-event,
-  .chat-date,
-  .chat-info {
-    color: #808080;
-  }
-
-  li.chat-info {
-    padding-left: 10px;
-  }
-
-  .chat-date {
-    display: inline-block;
-    padding-top: 10px;
-  }
-
-  .not-implemented {
-    margin-top: 3em;
-    margin-left: 0.3em;
-    color: #808080;
-  }
-
-  .mentioned {
-    font-weight: bold;
-  }
-
-  .delayed {
-    .chat-message-them {
-      color: #FB5D50;
-    }
-    .chat-message-me {
-      color: #7EABBB;
-    }
-  }
-
-  .error {
-    color: red;
-  }
-  input.error {
-    border: 1px solid red;
-  }
-
-  .reg-feedback {
-    font-size: 85%;
-  }
-
-  .reg-feedback,
-  #converse-login .conn-feedback {
-    display: block;
-    text-align: center;
-    width: 100%;
-  }
-
-  .chat-message-error {
-    color: #76797C;
-    font-size: 90%;
-    font-weight: normal;
-  }
-
-  a.restore-chat,
-  .chat-title {
-    padding: 1px 0 1px 5px;
-    color: $chat-head-text-color;
-    font-weight: bold;
-    line-height: 15px;
-    display: block;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    text-shadow: rgba(0, 0, 0, 0.51) 0 -1px 0;
-  }
-
-  a.restore-chat:visited {
-    color: $chat-head-text-color;
-  }
-
-  .chat-title a {
-    color: $chat-head-text-color;
-    width: 100%;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .chat-head-chatbox,
-  .chat-head-chatroom {
-    height: $chat-head-height;
-    position: relative;
-    padding: 5px;
-  }
-  .chat-head-chatroom {
-    background-color: $chatroom-head-color;
-  }
-  .chat-head-chatbox {
-    background-color: $chat-head-color;
-  }
-
-  .user-custom-message,
-  .chatroom-topic {
-    color: white;
-    font-size: 80%;
-    font-style: italic;
-    height: 1.3em;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    margin: 0;
-    padding: 1px 0 1px 5px;
-  }
-
-  .activated {
-    display: block !important;
-  }
-
-  a.subscribe-to-user {
-    padding-left: 2em;
-    font-weight: bold;
-  }
-
-  dl.add-converse-contact {
-    margin: 0 0.5em 0.75em 0.5em;
-  }
-
-  .fancy-dropdown {
-    border: 1px solid $light-background-border-color;
-    height: $controlbox-dropdown-height;
-    text-align: left;
-    .choose-xmpp-status {
-      width: 155px;
-      span {
-        padding-right: 5px;
-        padding-left: 5px;
-        float: left;
-      }
-    }
-    .choose-xmpp-status,
-    .toggle-xmpp-contact-form {
-      text-shadow: 0 1px 0 #ffffff;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      display: inline;
-    }
-    .toggle-xmpp-contact-form span {
-      float: left;
-    }
-  }
-
-
-  #fancy-xmpp-status-select a.change-xmpp-status-message {
-    float: right;
-    clear: right;
-    height: 22px;
-    width: 12px;
-    margin: 0px 5px 0 0;
-    color: $link-color;
-  }
-
-  ul#found-users {
-    padding: 10px 0 5px 5px;
-    border: 0;
-  }
-
-  form.search-xmpp-contact {
-    margin: 0;
-    padding-left: 5px;
-    padding: 0 0 5px 5px;
-    input {
-      width: 8em;
-    }
-  }
-
-  a.configure-chatroom-button,
-  a.toggle-chatbox-button,
-  a.close-chatbox-button {
-    border-radius: 6px;
-    border: 1px solid #888;
-    color: white;
-    cursor: pointer;
-    display: inline-block;
-    float: right;
-    font-size: 10px;
-    margin: 0 0 0 3px;
-    padding: 3px 3px 2px 3px;
-    text-decoration: none;
-  }
-
-  a.configure-chatroom-button:active,
-  a.toggle-chatbox-button:active,
-  a.close-chatbox-button:active {
-    position: relative;
-    top: 1px;
-  }
-
-  .chatroom-form-container {
-    height: 100%;
-    color: $text-color;
-    overflow-y: auto;
-    border-bottom-right-radius: 4px;
-    border-bottom-left-radius: 4px;
-  }
-
-  .chatroom-form {
-    padding: 1em;
-    .instructions {
-      color: gray;
-      font-size: 95%;
-    }
-    input {
-      width: 100%;
-      padding: 5px;
-      text-align: center;
-    }
-    legend {
-      font-size: $legend-font-size;
-      font-weight: bold;
-      margin: 10px 0 15px 0;
-    }
-    label {
-      height: 30px;
-      font-weight: bold;
-      display: block;
-      clear: both;
-
-      label input, label select {
-        float: right;
-      }
-    }
-  }
-
-  .requesting-xmpp-contact .request-actions {
-    margin-left: 0.5em;
-    float: right;
-  }
-
-  #converse-roster {
-    text-align: left;
-    width: 100%;
-    position: relative;
-    margin: 0.5em 0 0 0;
-    height: $roster-height;
-    height: calc(100% - #{$controlbox-dropdown-height*2} - 20px);
-    overflow: hidden;
-
-    &.no-contact-requests {
-        height: calc(100% - #{$controlbox-dropdown-height} - 20px);
-    }
-
-    .filter-type {
-      display: table-cell;
-      float: right;
-      font-size: $font-size;
-      height: $controlbox-dropdown-height;
-      margin: 0 0 0.5em -1px;
-      padding: 0;
-      width: 84px;
-    }
-    .roster-filter {
-      float: left;
-      background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAABNSURBVHjaXI7BDcAwCAMvyQjMyQ6dAbZiKfqoUK34g2zJh1dENIC7M8pMAPYdzAVY3d0ajNz9aypS/b5R6o+ZPdqoKgCq6h80KH3xDgBqNR97p8oAGQAAAABJRU5ErkJggg== ) no-repeat right -20px center;
-      border: 1px solid #999;
-      font-size: $font-size;
-      height: $controlbox-dropdown-height;
-      margin: 0 0 0.5em 7px;
-      padding: 0;
-      padding: 2px;
-      width: 103px;
-    }
-    /* (jQ addClass:) if input has value: */
-    .roster-filter.x {
-      background-position: right 3px center;
-    }
-    /* (jQ addClass:) if mouse is over the 'x' input area*/
-    .roster-filter.onX {
-      cursor: pointer;
-    }
-    .roster-contacts {
-      margin: 0;
-      max-height: 195px;
-      max-height: calc(100% - 26px);
-      overflow-x: hidden;
-      overflow-y: auto;
-      padding-bottom: 15px;
-    }
-    .group-toggle {
-      color: $text-color;
-      display: block;
-      width: 100%;
-    }
-    dt {
-      display: none;
-    }
-    dd {
-      line-height: 16px;
-      padding: 4px 2px 0 4px;
-      height: 24px;
-      a, span {
-        text-shadow: 0 1px 0 $link-shadow-color;
-        display: inline-block;
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        margin-left: 3px;
-      }
-      span {
-        padding: 0 5px 0 0;
-      }
-      a {
-         &.decline-xmpp-request {
-            margin-left: 5px;
-        }
-        &.remove-xmpp-contact {
-            float: right;
-            width: 22px;
-            margin: 0;
-            display: none;
-            color: $text-color;
-        }
-      }
-    }
-    dd:hover a.remove-xmpp-contact {
-      display: inline-block;
-    }
-    dd {
-      &.odd {
-        background-color: #DCEAC5;
-        /* Make this difference */
-      }
-      &.current-xmpp-contact span {
-        font-size: 16px;
-        float: left;
-        color: $link-color;
-      }
-      a.open-chat {
-        width: 80%;
-      }
-    }
-    span {
-      &.pending-contact-name {
-        width: 80%;
-      }
-      &.req-contact-name {
-        width: 69%;
-        padding: 0;
-      }
-    }
-  }
-
-  #available-chatrooms {
-    text-align: left;
-  }
-
-  #available-chatrooms dt,
-  #converse-roster dt {
-    font-weight: normal;
-    color: $text-color;
-    border: none;
-    padding: 0.5em;
-    text-shadow: 0 1px 0 $text-shadow-color;
-  }
-
-  .room-info {
-    font-size: 11px;
-    font-style: normal;
-    font-weight: normal;
-  }
-
-  li.room-info {
-    display: block;
-    margin-left: 5px;
-  }
-
-  div.room-info {
-    clear: left;
-	width: 100%;
-  }
-
-  p.room-info {
-    margin: 0;
-    padding: 0;
-    display: block;
-    white-space: normal;
-  }
-
-  a {
-    &.room-info {
-      width: 15px;
-      display: none;
-      clear: right;
-    }
-    &.open-room {
-      float: left;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      overflow-x: hidden;
-    }
-  }
-
-  dd.available-chatroom {
-    border: none;
-    clear: both;
-    color: $text-color;
-    display: block;
-    font-weight: bold;
-    overflow: hidden;
-    padding: 0.25em 0.5em;
-    text-overflow: ellipsis;
-    text-shadow: 0 1px 0 $text-shadow-color;
-    white-space: nowrap;
-    a.open-room {
-      width: 150px;
-    }
-    &:hover {
-      background-color: $highlight-color;
-      .room-info {
-        display: block;
-        font-size: 14px;
-      }
-    }
-  }
-
-  #converse-roster dd {
-    border: none;
-    clear: both;
-    color: $text-color;
-    display: block;
-    font-weight: bold;
-    overflow-y: hidden;
-    text-shadow: 0 1px 0 $text-shadow-color;
-  }
-
-  .roster-group:hover,
-  #converse-roster dd:hover {
-    background-color: $highlight-color;
-  }
-
-  .chatbox,
-  .chatroom {
-    height: $bottom-gutter-height;
-    float: right;
-    margin: 0 $chat-gutter;
-    @media screen and (max-width: $mobile_landscape_length) {
-        margin: 0;
-    }
-    display: block;
-  }
-
-  .chatbox {
-    width: $chat-width;
-    @media screen and (max-width: $mobile_landscape_length) {
-        width: $mobile-chat-width;
-    }
-    .box-flyout {
-      z-index: 1;
-      width: $chat-width;
-        @media screen and (max-width: $mobile_landscape_length) {
-            width: $mobile-chat-width;
-        }
-    }
-    .dropdown {
-      a {
-        width: 148px;
-        display: inline-block;
-        line-height: $controlbox-dropdown-height;
-      }
-      li {
-        list-style: none;
-        padding-left: 0;
-      }
-      dd {
-        ul {
-          padding: 0;
-          list-style: none;
-          position: absolute;
-          left: 0;
-          top: 0;
-          border: 1px solid $light-background-border-color;
-          width: 100%;
-          z-index: 21;
-          background-color: $light-background-color;
-          li:hover {
-            background-color: $highlight-color;
-          }
-        }
-      }
-      dd.search-xmpp ul {
-        box-shadow: 1px 4px 10px 1px rgba(0, 0, 0, 0.4);
-
-        li:hover {
-            background-color: $light-background-color;
-        }
-      }
-      dt a span {
-        cursor: pointer;
-        display: block;
-        padding: 4px 7px 0 5px;
-      }
-    }
-  }
-
-  .chatroom {
-    width: $chatroom-width;
-    .box-flyout {
-      width: $chatroom-width;
-    }
-    @media screen and (max-width: $mobile_landscape_length) {
-      width: $mobile-chat-width;
-      .box-flyout {
-        width: $mobile-chat-width;
-      }
-    }
-
-    label {
-      margin-left: 2px;
-      font-size: 12px;
-    }
-    .participant-list {
-      list-style: none;
-      li {
-        cursor: default;
-        display: block;
-        font-size: 12px;
-        font-weight: bold;
-        overflow: hidden;
-        padding: 2px 5px;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        &.moderator {
-          color: #8f2831;
-        }
-      }
-    }
-    .chat-textarea {
-      border-bottom-right-radius: 0;
-    }
-    .chat-area {
-      float: left;
-      height: 100%;
-      width: $chat-width;
-    }
-    .invited-contact {
-      margin: -1px 0 0 -1px;
-      width: 100px;
-      border: 1px solid #999;
-    }
-    .invited-contact.tt-input {
-      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;
-    }
-    .participants {
-      float: right;
-      background-color: white;
-      overflow-y: auto;
-      overflow-x: hidden;
-      border-left: 1px solid #AAA;
-      border-bottom-right-radius: 4px;
-      width: 100px;
-      height: 100%;
-      label {
-        font-size: 12px;
-        font-style: italic;
-        margin: 5px;
-        display: block;
-      }
-    }
-  }
-
-  .chatroom-form,
-  .controlbox-pane {
-    background-color: white;
-    border-bottom-left-radius: 4px;
-    border-bottom-right-radius: 4px;
-    border: 0;
-    font-size: $font-size;
-    overflow-y: auto;
-    position: absolute;
-    text-align: center;
-    width: 100%;
-    height: 289px;
-    @include calc(height, '100% - #{$chat-head-height}');
-  }
-
-  .controlbox-pane {
-    overflow-y: hidden;
-    overflow-x: hidden;
-    dd {
-      margin-left: 0;
-      margin-bottom: 0;
-      &.odd {
-        background-color: #DCEAC5;
-      }
-    }
-  }
-
-  #converse-register {
-    background: white;
-    .title {
-      font-weight: bold;
-    }
-    .info {
-      font-style: italic;
-      color: green;
-      font-size: 85%;
-      margin: 5px 0;
-    }
-    .form-errors {
-      color: red;
-      display: none;
-    }
-    .provider-title {
-      font-size: 22px;
-    }
-    .provider-score {
-      width: 178px;
-      margin-bottom: 8px;
-    }
-    .form-help .url {
-      font-weight: bold;
-      color: $link-color;
-    }
-    .input-group {
-      display: table;
-      margin: auto;
-      width: 100%;
-      span {
-          overflow-x: hidden;
-          text-overflow: ellipsis;
-          max-width: 110px;
-      }
-      span, input[name=username] {
-          display: table-cell;
-          text-align: left;
-      }
-    }
-    .instructions {
-      color: gray;
-      font-size: 85%;
-      &:hover {
-        color: $text-color;
-      }
-    }
-  }
-
-  #converse-register, #converse-login {
-    margin: 2em 1em 1em 1em;
-    background: white;
-
-    .login-submit, .submit {
-      height: 30px;
-      padding: 0px;
-      font-size: $font-size;
-    }
-    .submit {
-      margin: 1em 0;
-    }
-    .login-anon {
-      height: auto;
-      white-space: normal;
-    }
-    .cancel-submit, .save-submit {
-      width: 45%;
-      margin: 5px 3px 5px 3px;
-    }
-    .cancel, .cancel-submit {
-      color: $warning-color;
-    }
-    .save-submit {
-      color: $save-button-color;
-    }
-    input {
-      width: 100%;
-      height: 30px;
-      margin: 5px 0 10px 0;
-      padding-left: 0.5em;
-    }
-  }
-
-  .form-help {
-    color: gray;
-    font-size: 85%;
-    padding-top: 5px;
-    &:hover {
-      color: $text-color;
-    }
-  }
-
-  .chatroom-form label,
-  .controlbox-pane label,
-  #converse-register label,
-  #converse-login label {
-    font-size: $font-size;
-    font-weight: bold;
-    height: auto;
-    margin: 4px;
-  }
-  
-  form.add-chatroom {
-    background: none;
-    padding: 0.5em;
-
-    input[type=button],
-    input[type=submit],
-    input[type=text] {
-      margin: 0;
-      width: 100%;
-      padding: 0.25em;
-    }
-    span.spinner,
-    input[type=button],
-    input[type=submit] {
-      margin-top: 0.5em;
-      display: table-cell;
-      width: auto;
-    }
-    input[type=submit] {
-      color: $save-button-color;
-    }
-  }
-
-  select#select-xmpp-status {
-    float: right;
-    margin-right: 0.5em;
-  }
-
-  /* @group Tabs */
-  .chat-head {
-    border-top-left-radius: 4px;
-    border-top-right-radius: 4px;
-    color: #ffffff;
-    font-size: 100%;
-    margin: 0;
-    padding: 6px;
-    &.controlbox-head {
-      background-color: $chat-head-color;
-      border-top-left-radius: 4px;
-      border-top-right-radius: 4px;
-      color: $chat-head-inverse-text-color;
-      height: $chat-head-height;
-      margin: 0;
-      padding: 6px 6px 6px 0;
-    }
-    .avatar {
-      float: left;
-    }
-    #controlbox-tabs {
-      text-align: center;
-      display: inline;
-      overflow: hidden;
-      font-size: 12px;
-      list-style-type: none;
-
-      a.current,
-      a.current:hover {
-        box-shadow: none;
-        border-bottom: 0;
-        height: $chat-head-height;
-        cursor: default;
-        color: $text-color;
-      }
-
-      /* single tab */
-      li {
-        float: left;
-        list-style: none;
-        padding-left: 0;
-        text-shadow: white 0 1px 0;
-        width: 38%;
-
-        a {
-          background-color: white;
-          border-bottom: 1px solid $border-color;
-          border-top-left-radius: 4px;
-          border-top-right-radius: 4px;
-          box-shadow: inset 2px -2px 20px rgba(0, 0, 0, 0.3);
-          color: #888;
-          display: block;
-          font-size: 12px;
-          height: $chat-head-height - 1px;
-          line-height: $chat-head-height - 1px;
-          margin: 0;
-          text-align: center;
-          text-decoration: none;
-        }
-        a:hover {
-          color: $text-color;
-        }
-      }
-    }
-  }
-
-  div#chatrooms {
-    overflow-y: auto;
-  }
-
-  form.sendXMPPMessage {
-    -moz-background-clip: padding;
-    -moz-border-radius: 4px;
-    -webkit-background-clip: padding-box;
-    -webkit-border-radius: 4px;
-    background-clip: padding-box;
-    background: white;
-    border-radius: 4px;
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-    border-top: 1px solid #BBB;
-    border: 0;
-    margin: 0;
-    padding: 0;
-    position: relative;
-    height: #{$chat-textarea-height + $toolbar-height};
-    width: $chat-width;
-    @media screen and (max-width: $mobile_landscape_length) {
-        width: 100%;
-    }
-    .chat-textarea {
-      @include border-bottom-radius(4px);
-      border: 0;
-      height: $chat-textarea-height;
-      padding: 0.5em;
-      width: 100%;
-      resize: none;
-    }
-  }
-
-  .chat-toolbar {
-    font-size: $font-size;
-    margin: 0;
-    padding: 0 4px;
-    height: $toolbar-height;
-    display: block;
-
-    a {
-      color: $link-color;
-    }
-
-    .unencrypted a,
-    .unencrypted {
-      color: #8f2831;
-    }
-
-    .unverified a,
-    .unverified {
-      color: #cf5300;
-    }
-
-    .private a,
-    .private {
-      color: #4b7003;
-    }
-
-    .toggle-participants,
-    .toggle-clear,
-    .toggle-otr {
-      float: right;
-    }
-
-    li {
-      display: inline-block;
-      list-style: none;
-      padding: 0 3px 0 3px;
-      cursor: pointer;
-      margin-top: 1px;
-    }
-    li:hover {
-      cursor: pointer;
-    }
-
-    ul {
-      background: #fff;
-      bottom: 100%;
-      box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.4);
-      display: none;
-      font-size: 12px;
-      margin: 0 0 1px 0;
-      position: absolute;
-      right: 0;
-      li {
-        cursor: pointer;
-        list-style: none;
-        position: relative;
-        a:hover {
-          color: #8f2831;
-        }
-      }
-    }
-
-    .toggle-smiley {
-      padding-left: 5px;
-      ul {
-        li {
-          font-size: $font-size;
-          padding: 5px;
-          z-index: 98;
-        }
-        li:hover {
-          background-color: $highlight-color;
-        }
-      }
-    }
-
-    .toggle-otr {
-      ul { 
-        li {
-          background-color: white;
-          display: block;
-          z-index: 99;
-          a {
-            -moz-transition: background-color 0.2s ease-in-out;
-            -webkit-transition: background-color 0.2s ease-in-out;
-            transition: background-color 0.2s ease-in-out;
-            display: block;
-            padding: 1px;
-            text-decoration: none;
-          }
-        }
-      }
-    }
-  }
-
-  .chat-toolbar-text {
-    font-size: 12px;
-    padding-right: 3px;
-  }
-
-  #set-custom-xmpp-status {
-    float: left;
-    padding: 0;
-    input {
-      height: $controlbox-dropdown-height + 1px;
-      @include calc(width, '100% - 40px');
-      padding: 0 0 0 0.5em;
-    }
-    button {
-      height: $controlbox-dropdown-height + 1px;
-      width: 40px;
-      padding: 1px;
-    }
-  }
-
-  .chat-textarea-chatbox-selected {
-    border: 1px solid #578308;
-    margin: 0;
-  }
-
-  .chat-textarea-chatroom-selected {
-    border: 2px solid $link-color;
-    margin: 0;
-  }
-
-  #controlbox {
-    display: none;
-    div.xmpp-status {
-      display: inline;
-    }
-  }
-
-  /* status dropdown styles */
-  .chatbox {
-    .dropdown {
-      background-color: $light-background-color;
-      dd {
-        position: relative;
-      }
-    }
-  }
-
-  .chatbox .dropdown dd,
-  .dropdown dt,
-  .dropdown ul {
-    margin: 0;
-    padding: 0;
-  }
-
-  .add-xmpp-contact {
-    background: none;
-    padding: 5px;
-    input {
-      margin: 0 0 1rem;
-      width: 100%;
-    }
-    button {
-      width: 100%;
-    }
-  }
-
-  .xmpp-status-menu {
-    text-align: left;
-    box-shadow: 1px 4px 10px 1px rgba(0, 0, 0, 0.4);
-    li {
-      padding: 2px;
-      a {
-        width: 100%;
-        padding: 0 8px;
-      }
-    }
-  }
-  .xmpp-status-menu li a.logout,
-  .xmpp-status-menu li a.logout span {
-    color: $warning-color;
-  }
-
-  .set-xmpp-status {
-    background: none;
-    padding: 0.75em 0.5em 0.5em 0.5em;
-    .dropdown dd ul {
-      z-index: 22;
-    }
-  }
-
-  .minimized-chats-flyout,
-  .box-flyout {
-    border-radius: 4px;
-    bottom: 6px;
-    box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
-    display: block;
-    height: $chat-height;
-    @media screen and (max-width: $mobile_landscape_length) {
-      height: $mobile-chat-height;
-    }
-    position: absolute;
-  }
-
-  .minimized-chats-flyout {
-    border-radius: 4px;
-    bottom: $bottom-gutter-height;
-    box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
-    display: block;
-    position: absolute;
-    height: auto;
-    width: 130px;
-    .chat-head-chatroom,
-    .chat-head {
-      border-radius: 4px;
-      width: 130px;
-      height: 35px;
-      margin-bottom: 1px;
-    }
-  }
-  .minimized-chats-flyout.minimized {
-    height: auto;
-  }
-
-  .dragresize {
-    position: absolute;
-    width: $chat-width;
-    height: 5px;
-    background: transparent;
-    border: 0;
-    top: 0;
-    margin-left: 0;
-    cursor: n-resize;
-    z-index: 20;
-  }
-}
+@import "core";

sass/variables.scss

@@ -1,40 +0,0 @@
-
-  $link-color: #436F64;
-  $inverse-link-color: white;
-  $link-shadow-color: #FAFAFA;
-  $text-shadow-color: #FAFAFA;
-  $text-color: #6C4C44;
-  $border-color: #CCC;
-  $warning-color: #681F2C;
-  $light-background-border-color: #F1DCD6;
-  $light-background-color: #F1E2DD;
-  $icon-color: #114327;
-  $highlight-color: #E3C9C1;
-  $chat-head-color: #436F64;
-  $chatroom-head-color: #0F592F;
-  $chat-head-text-color: white;
-  $chat-head-inverse-text-color: white;
-  $chat-head-height: 44px;
-  $save-button-color: #436F64;
-  $chat-textarea-height: 62px;
-  $toolbar-height: 20px;
-  $message-them-color: #4B7003;
-  $roster-height: 194px;
-  $controlbox-dropdown-height: 25px;
-
-  $bottom-gutter-height: 35px;
-
-  $mobile_landscape_length: 480px;
-
-  $font-size: 14px;
-  $legend-font-size: 16px;
-
-  $chatroom-width: 300px;
-  $chat-width: 200px;
-  $chat-height: 400px;
-  $chat-gutter: 7px;
-
-  $mobile-chat-width: 100%;
-  $mobile-chat-height: 400px;
-
-  $font-path: "../fonticons/fonts/";