diff --git a/Makefile b/Makefile
index 378fc6872..f5e39ee10 100644
--- a/Makefile
+++ b/Makefile
@@ -1,11 +1,12 @@
 # You can set these variables from the command line.
-BOWER 		?= node_modules/.bin/bower
-BUILDDIR     = ./docs
-PAPER        =
-PHANTOMJS	?= node_modules/.bin/phantomjs
-SPHINXBUILD  = ./bin/sphinx-build
-SPHINXOPTS   =
-POTOJSON	?= node_modules/.bin/po2json
+BOWER           ?= node_modules/.bin/bower
+BUILDDIR     	= ./docs
+PAPER        	=
+PHANTOMJS       ?= node_modules/.bin/phantomjs
+SPHINXBUILD  	?= ./bin/sphinx-build
+SPHINXOPTS   	=
+PO2JSON       	?= node_modules/.bin/po2json
+SASS 			?= sass 
 
 # Internal variables.
 ALLSPHINXOPTS   = -d $(BUILDDIR)/doctrees $(PAPEROPT_$(PAPER)) $(SPHINXOPTS) ./docs/source
@@ -42,7 +43,7 @@ po:
 merge: po
 
 po2json:
-	find ./locale -maxdepth 1 -mindepth 1 -type d -exec $(POTOJSON) -p -f jed -d converse {}/LC_MESSAGES/converse.po {}/LC_MESSAGES/converse.json \;
+	find ./locale -maxdepth 1 -mindepth 1 -type d -exec $(PO2JSON) -p -f jed -d converse {}/LC_MESSAGES/converse.po {}/LC_MESSAGES/converse.json \;
 
 ########################################################################
 ## Release management
@@ -88,8 +89,7 @@ dev: clean
 ## Builds
 
 css::
-	./node_modules/.bin/lessc less/styles.less > css/theme.css
-	./node_modules/.bin/lessc less/converse.less > css/converse.css
+	${SASS} sass/converse.scss > css/converse.css
 
 build::
 	./node_modules/.bin/grunt jst
diff --git a/bower.json b/bower.json
index 275275a8d..2a3482c5a 100644
--- a/bower.json
+++ b/bower.json
@@ -29,7 +29,8 @@
     "bootstrapJS": "https://raw.githubusercontent.com/jcbrand/bootstrap/7d96a5f60d26c67b5348b270a775518b96a702c8/dist/js/bootstrap.js",
     "fontawesome": "~4.1.0",
     "typeahead.js": "https://raw.githubusercontent.com/jcbrand/typeahead.js/eedfb10505dd3a20123d1fafc07c1352d83f0ab3/dist/typeahead.jquery.js",
-    "strophejs-plugins": "https://github.com/strophe/strophejs-plugins.git#conversejs"
+    "strophejs-plugins": "https://github.com/strophe/strophejs-plugins.git#conversejs",
+    "skeleton-sass": "~2.0.3"
   },
   "exportsOverride": {}
 }
diff --git a/css/converse.css b/css/converse.css
index 80b8dad1f..bdb3347a4 100644
--- a/css/converse.css
+++ b/css/converse.css
@@ -7,37 +7,10 @@
  */
 @font-face {
   font-family: 'Converse-js';
-  src: url('../fonticons/fonts/icomoon.eot?-mnoxh0');
-  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');
+  src: url("../fonticons/fonts/icomoon.eot?-mnoxh0");
+  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");
   font-weight: normal;
-  font-style: normal;
-}
-/* Use the following CSS code if you want to use data attributes for inserting your icons */
-#conversejs [data-icon]:before {
-  font-family: 'Converse-js';
-  content: attr(data-icon);
-  speak: none;
-  font-weight: normal;
-  font-variant: normal;
-  text-transform: none;
-  line-height: 1;
-  /* Better Font Rendering =========== */
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-#conversejs [class^="icon-"],
-#conversejs [class*=" icon-"] {
-  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;
-}
+  font-style: normal; }
 .icon-conversejs {
   font-family: 'Converse-js';
   speak: none;
@@ -48,292 +21,62 @@
   line-height: 1;
   /* Better Font Rendering =========== */
   -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
+  -moz-osx-font-smoothing: grayscale; }
+
 .icon-conversejs:before {
-  content: "\e600";
-}
-#conversejs .icon-closed:before {
-  content: "\25ba";
-}
-#conversejs .icon-opened:before {
-  content: "\25bc";
-}
-#conversejs .icon-checkmark:before {
-  content: "\2713";
-}
-#conversejs .icon-home:before {
-  content: "\e000";
-}
-#conversejs .icon-pencil:before {
-  content: "\270e";
-}
-#conversejs .icon-camera:before {
-  content: "\e003";
-}
-#conversejs .icon-camera-2:before {
-  content: "\2616";
-}
-#conversejs .icon-play:before {
-  content: "\25d9";
-}
-#conversejs .icon-music:before {
-  content: "\266b";
-}
-#conversejs .icon-headphones:before {
-  content: "\266c";
-}
-#conversejs .icon-phone:before {
-  content: "\260f";
-}
-#conversejs .icon-phone-hang-up:before {
-  content: "\260e";
-}
-#conversejs .icon-address-book:before {
-  content: "\270f";
-}
-#conversejs .icon-notebook:before {
-  content: "\2710";
-}
-#conversejs .icon-envelop:before {
-  content: "\2709";
-}
-#conversejs .icon-pushpin:before {
-  content: "\e012";
-}
-#conversejs .icon-online:before {
-  content: "\25fc";
-}
-#conversejs .icon-away:before {
-  content: "\25fb";
-}
-#conversejs .icon-bubbles:before {
-  content: "\e015";
-}
-#conversejs .icon-bubbles-2:before {
-  content: "\e016";
-}
-#conversejs .icon-bubbles-3:before {
-  content: "\e017";
-}
-#conversejs .icon-user:before {
-  content: "\e01a";
-}
-#conversejs .icon-hide-users:before {
-  content: "\e01c";
-}
-#conversejs .icon-show-users:before {
-  content: "\e01e";
-}
-#conversejs .icon-users:before {
-  content: "\e01b";
-}
-#conversejs .icon-quotes-left:before {
-  content: "\e01d";
-}
-#conversejs .icon-spinner:before {
-  content: "\231b";
-}
-#conversejs .icon-search:before {
-  content: "\e021";
-}
-#conversejs .icon-cogs:before {
-  content: "\e022";
-}
-#conversejs .icon-wrench:before {
-  content: "\e024";
-}
-#conversejs .icon-unlocked:before {
-  content: "\e025";
-}
-#conversejs .icon-lock:before {
-  content: "\e026";
-}
-#conversejs .icon-lock-2:before {
-  content: "\e027";
-}
-#conversejs .icon-key:before {
-  content: "\e028";
-}
-#conversejs .icon-key-2:before {
-  content: "\e029";
-}
-#conversejs .icon-zoom-out:before {
-  content: "\e02a";
-}
-#conversejs .icon-zoom-in:before {
-  content: "\e02b";
-}
-#conversejs .icon-cog:before {
-  content: "\e02f";
-}
-#conversejs .icon-remove:before {
-  content: "\e02d";
-}
-#conversejs .icon-eye:before {
-  content: "\e030";
-}
-#conversejs .icon-eye-blocked:before {
-  content: "\e031";
-}
-#conversejs .icon-attachment:before {
-  content: "\e032";
-}
-#conversejs .icon-globe:before {
-  content: "\e033";
-}
-#conversejs .icon-heart:before {
-  content: "\2764";
-}
-#conversejs .icon-happy:before {
-  content: "\263b";
-}
-#conversejs .icon-thumbs-up:before {
-  content: "\261d";
-}
-#conversejs .icon-smiley:before {
-  content: "\263a";
-}
-#conversejs .icon-tongue:before {
-  content: "\e038";
-}
-#conversejs .icon-sad:before {
-  content: "\2639";
-}
-#conversejs .icon-wink:before {
-  content: "\e03a";
-}
-#conversejs .icon-wondering:before {
-  content: "\2369";
-}
-#conversejs .icon-confused:before {
-  content: "\2368";
-}
-#conversejs .icon-shocked:before {
-  content: "\2364";
-}
-#conversejs .icon-evil:before {
-  content: "\261f";
-}
-#conversejs .icon-angry:before {
-  content: "\e03f";
-}
-#conversejs .icon-cool:before {
-  content: "\e040";
-}
-#conversejs .icon-grin:before {
-  content: "\e041";
-}
-#conversejs .icon-info:before {
-  content: "\2360";
-}
-#conversejs .icon-notification:before {
-  content: "\e01f";
-}
-#conversejs .icon-warning:before {
-  content: "\26a0";
-}
-#conversejs .icon-spell-check:before {
-  content: "\e045";
-}
-#conversejs .icon-volume-high:before {
-  content: "\e046";
-}
-#conversejs .icon-volume-medium:before {
-  content: "\e047";
-}
-#conversejs .icon-volume-low:before {
-  content: "\e048";
-}
-#conversejs .icon-volume-mute:before {
-  content: "\e049";
-}
-#conversejs .icon-volume-mute-2:before {
-  content: "\e04a";
-}
-#conversejs .icon-volume-decrease:before {
-  content: "\e04b";
-}
-#conversejs .icon-volume-increase:before {
-  content: "\e04c";
-}
-#conversejs .icon-bold:before {
-  content: "\e04d";
-}
-#conversejs .icon-underline:before {
-  content: "\e04e";
-}
-#conversejs .icon-italic:before {
-  content: "\e04f";
-}
-#conversejs .icon-strikethrough:before {
-  content: "\e050";
-}
-#conversejs .icon-new-tab:before {
-  content: "\e053";
-}
-#conversejs .icon-youtube:before {
-  content: "\e055";
-}
-#conversejs .icon-close:before {
-  content: "\2715";
-}
-#conversejs .icon-blocked:before {
-  content: "\2718";
-}
-#conversejs .icon-cancel-circle:before {
-  content: "\e058";
-}
-#conversejs .icon-minus:before {
-  content: "\e05a";
-}
-#conversejs .icon-plus:before {
-  content: "\271a";
-}
-#conversejs .icon-checkbox-checked:before {
-  content: "\2611";
-}
-#conversejs .icon-checkbox-unchecked:before {
-  content: "\2b27";
-}
-#conversejs .icon-checkbox-partial:before {
-  content: "\2b28";
-}
-#conversejs .icon-radio-checked:before {
-  content: "\2b26";
-}
-#conversejs .icon-radio-unchecked:before {
-  content: "\2b25";
-}
-#conversejs .icon-room-info:before {
-  content: "\e059";
-}
-#conversejs .icon-newspaper:before {
-  content: "\e001";
-}
-#conversejs .icon-image:before {
-  content: "\2b14";
-}
-#conversejs .icon-xa:before,
-#conversejs .icon-unavailable:before,
-#conversejs .icon-offline:before {
-  content: "\e002";
-}
-#conversejs .icon-dnd:before {
-  content: "\e004";
-}
-#conversejs .icon-logout:before {
-  content: "\e601";
-}
-#conversejs .no-text-select {
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: -moz-none;
-  -ms-user-select: none;
-  user-select: none;
-}
+  content: "\e600"; }
+
 #conversejs {
+  /**
+   * SASS/SCSS/Compass Transcription of Skeleton Responsive Grid
+   * @author Dennis Thompson <http://www.atomicpages.net>
+   * @copyright Copyright (c) 2014 AtomicPages LLC
+   * @license MIT
+   * @version 2.0.2
+   */
+  /* RESET
+   * ------------------------------------------------ */
+  /* HTML5 display-role reset for older browsers */
+  /* BASIC STYLES
+   * ------------------------------------------------ */
+  /* TYPOGRAPHY
+   * ------------------------------------------------ */
+  /*	Blockquotes  */
+  /* LINKS
+   * ------------------------------------------------ */
+  /* LISTS
+   * ------------------------------------------------ */
+  /* IMAGES
+   * ------------------------------------------------ */
+  /* BUTTONS
+   * ------------------------------------------------ */
+  /* Fix for odd Mozilla border & padding issues */
+  /* FORMS
+   * ------------------------------------------------ */
+  /* MISC
+   * ------------------------------------------------ */
+  /* BASE GRID
+   * ------------------------------------------------ */
+  /* The Grid */
+  /* TABLET (PORTRAIT)
+   * ------------------------------------------------ */
+  /*  MOBILE (PORTRAIT)
+   * ------------------------------------------------ */
+  /* MOBILE (LANDSCAPE)
+   * ------------------------------------------------ */
+  /* CLEARING
+   * ------------------------------------------------ */
+  /* Add custom styles here */
+  /* MEDIA QUERIES
+   * ------------------------------------------------ */
+  /* Large displays */
+  /* Smaller than standard 960 (devices and browsers) */
+  /* Tablet Portrait size to standard 960 (devices and browsers) */
+  /* All Mobile Sizes (devices and browser) */
+  /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
+  /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
+  color: #6C4C44;
+  font-size: 14px;
   bottom: 0;
   direction: ltr;
   height: 25px;
@@ -345,1215 +88,1811 @@
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
-}
-#conversejs div {
-  box-sizing: border-box;
-}
-#conversejs ul li {
-  height: auto;
-}
-#conversejs div,
-#conversejs span,
-#conversejs h1,
-#conversejs h2,
-#conversejs h3,
-#conversejs h4,
-#conversejs h5,
-#conversejs h6,
-#conversejs p,
-#conversejs blockquote,
-#conversejs pre,
-#conversejs a,
-#conversejs em,
-#conversejs img,
-#conversejs strong,
-#conversejs dl,
-#conversejs dt,
-#conversejs dd,
-#conversejs ol,
-#conversejs ul,
-#conversejs li,
-#conversejs fieldset,
-#conversejs form,
-#conversejs label,
-#conversejs legend,
-#conversejs table,
-#conversejs caption,
-#conversejs tbody,
-#conversejs tfoot,
-#conversejs thead,
-#conversejs tr,
-#conversejs th,
-#conversejs td,
-#conversejs article,
-#conversejs aside,
-#conversejs canvas,
-#conversejs details,
-#conversejs embed,
-#conversejs figure,
-#conversejs figcaption,
-#conversejs footer,
-#conversejs header,
-#conversejs hgroup,
-#conversejs menu,
-#conversejs nav,
-#conversejs output,
-#conversejs ruby,
-#conversejs section,
-#conversejs summary,
-#conversejs time,
-#conversejs mark,
-#conversejs audio,
-#conversejs video {
-  margin: 0;
-  padding: 0;
-  border: 0;
-  font: inherit;
-  vertical-align: baseline;
-}
-#conversejs strong {
-  font-weight: 700;
-}
-#conversejs,
-#conversejs input,
-#conversejs textarea {
-  font-size: 14px;
-  color: #4f4f4f;
-}
-#conversejs ol,
-#conversejs ul {
-  list-style: none;
-}
-#conversejs li {
-  height: 10px;
-}
-#conversejs a {
-  text-decoration: none;
-  color: #2D617A;
-  text-shadow: none;
-}
-#conversejs ul,
-#conversejs ol,
-#conversejs dl {
-  font: inherit;
-  margin: 0 0 15px 0;
-}
-#conversejs .emoticon {
-  font-size: 14px;
-}
-#conversejs .hidden {
-  display: none;
-}
-#conversejs .locked {
-  padding-right: 22px;
-}
-@-moz-keyframes spin {
-  0% {
-    -moz-transform: rotate(0deg);
-  }
-  100% {
-    -moz-transform: rotate(359deg);
-  }
-}
+  /* (jQ addClass:) if input has value: */
+  /* (jQ addClass:) if mouse is over the 'x' input area*/
+  /* @group Tabs */
+  /* single tab */
+  /* status dropdown styles */ }
+  #conversejs html, #conversejs body, #conversejs div, #conversejs span, #conversejs applet, #conversejs object, #conversejs iframe,
+  #conversejs h1, #conversejs h2, #conversejs h3, #conversejs h4, #conversejs h5, #conversejs h6, #conversejs p, #conversejs blockquote, #conversejs pre,
+  #conversejs a, #conversejs abbr, #conversejs acronym, #conversejs address, #conversejs big, #conversejs cite, #conversejs code,
+  #conversejs del, #conversejs dfn, #conversejs em, #conversejs img, #conversejs ins, #conversejs kbd, #conversejs q, #conversejs s, #conversejs samp,
+  #conversejs small, #conversejs strike, #conversejs strong, #conversejs sub, #conversejs sup, #conversejs tt, #conversejs var,
+  #conversejs b, #conversejs u, #conversejs i, #conversejs center,
+  #conversejs dl, #conversejs dt, #conversejs dd, #conversejs ol, #conversejs ul, #conversejs li,
+  #conversejs fieldset, #conversejs form, #conversejs label, #conversejs legend,
+  #conversejs table, #conversejs caption, #conversejs tbody, #conversejs tfoot, #conversejs thead, #conversejs tr, #conversejs th, #conversejs td,
+  #conversejs article, #conversejs aside, #conversejs canvas, #conversejs details, #conversejs embed,
+  #conversejs figure, #conversejs figcaption, #conversejs footer, #conversejs header, #conversejs hgroup,
+  #conversejs menu, #conversejs nav, #conversejs output, #conversejs ruby, #conversejs section, #conversejs summary,
+  #conversejs time, #conversejs mark, #conversejs audio, #conversejs video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    font: inherit;
+    vertical-align: baseline; }
+  #conversejs article, #conversejs aside, #conversejs details, #conversejs figcaption, #conversejs figure,
+  #conversejs footer, #conversejs header, #conversejs hgroup, #conversejs menu, #conversejs nav, #conversejs section {
+    display: block; }
+  #conversejs body {
+    line-height: 1; }
+  #conversejs ol, #conversejs ul {
+    list-style: none; }
+  #conversejs blockquote, #conversejs q {
+    quotes: none; }
+    #conversejs blockquote:before, #conversejs blockquote:after, #conversejs q:before, #conversejs q:after {
+      content: "";
+      content: none; }
+  #conversejs table {
+    border-collapse: collapse;
+    border-spacing: 0; }
+  #conversejs html {
+    font-size: 62.5%;
+    overflow-y: scroll;
+    -webkit-text-size-adjust: 100%;
+    -ms-text-size-adjust: 100%;
+    line-height: 1.2; }
+  #conversejs *,
+  #conversejs *:before,
+  #conversejs *:after {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box; }
+  #conversejs body {
+    background: #fff;
+    font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-weight: normal;
+    font-style: normal;
+    font-size: 14px;
+    font-size: 1.4rem;
+    line-height: 2.6rem;
+    color: #444;
+    -webkit-font-smoothing: antialiased;
+    /* Fix for webkit rendering */
+    -webkit-text-size-adjust: 100%; }
+  #conversejs h1, #conversejs h2, #conversejs h3, #conversejs h4, #conversejs h5, #conversejs h6 {
+    color: #181818;
+    font-family: "Georgia", "Times New Roman", serif;
+    font-weight: normal; }
+  #conversejs h1 a, #conversejs h2 a, #conversejs h3 a,
+  #conversejs h4 a, #conversejs h5 a, #conversejs h6 a {
+    font-weight: inherit; }
+  #conversejs h1 {
+    font-size: 53.6662px;
+    font-size: 5.36662rem;
+    line-height: 5.83324rem;
+    margin-bottom: 1.63324rem; }
+  #conversejs h2 {
+    font-size: 40.8324px;
+    font-size: 4.08324rem;
+    line-height: 4.6662rem;
+    margin-bottom: 1.1662rem; }
+  #conversejs h3 {
+    font-size: 32.662px;
+    font-size: 3.2662rem;
+    line-height: 3.9662rem;
+    margin-bottom: 0.9324rem; }
+  #conversejs h4 {
+    font-size: 24.5px;
+    font-size: 2.45rem;
+    line-height: 3.5rem;
+    margin-bottom: 0.4662rem; }
+  #conversejs h5 {
+    font-size: 19.8324px;
+    font-size: 1.98324rem;
+    line-height: 2.8rem; }
+  #conversejs h6 {
+    font-size: 16.3324px;
+    font-size: 1.63324rem;
+    line-height: 2.45rem; }
+  #conversejs .subheader {
+    color: #777; }
+  #conversejs p {
+    margin: 0 0 2rem 0; }
+    #conversejs p img {
+      margin: 0; }
+    #conversejs p.lead {
+      font-size: 24.5px;
+      font-size: 2.45rem;
+      line-height: 3.15rem;
+      color: #777; }
+  #conversejs em, #conversejs i {
+    font-style: italic; }
+  #conversejs strong, #conversejs b {
+    font-weight: bold; }
+  #conversejs u {
+    text-decoration: underline; }
+  #conversejs small {
+    font-size: 80%; }
+  #conversejs blockquote, #conversejs blockquote p {
+    font-size: 19.8324px;
+    font-size: 1.98324rem;
+    line-height: 2.8rem;
+    color: #777;
+    font-style: italic; }
+  #conversejs blockquote {
+    margin: 0 0 2rem;
+    padding: 0.9rem 2rem 0 1.9rem;
+    border-left: 1px solid #ddd; }
+  #conversejs blockquote cite {
+    display: block;
+    font-size: 14px;
+    font-size: 1.4rem;
+    color: #555; }
+    #conversejs blockquote cite:before {
+      content: "\2014 \0020"; }
+    #conversejs blockquote cite a, #conversejs blockquote cite a:visited {
+      color: #555; }
+  #conversejs hr {
+    border-style: solid;
+    border-color: #ddd;
+    border-width: 1px 0 0;
+    clear: both;
+    margin: 1rem 0 3rem;
+    height: 0; }
+  #conversejs a, #conversejs a:visited {
+    color: #333;
+    text-decoration: underline;
+    outline: 0; }
+  #conversejs a:hover, #conversejs a:focus, #conversejs a:active {
+    color: #000; }
+  #conversejs p a, #conversejs p a:visited {
+    line-height: inherit; }
+  #conversejs ul,
+  #conversejs ol {
+    margin-bottom: 2rem; }
+  #conversejs ul {
+    list-style: none outside; }
+  #conversejs ol {
+    list-style: decimal; }
+  #conversejs ol, #conversejs ul.square,
+  #conversejs ul.circle, #conversejs ul.disc {
+    margin-left: 3rem; }
+  #conversejs ul.square {
+    list-style: square outside; }
+  #conversejs ul.circle {
+    list-style: circle outside; }
+  #conversejs ul.disc {
+    list-style: disc outside; }
+  #conversejs ul ul, #conversejs ul ol,
+  #conversejs ol ol, #conversejs ol ul {
+    margin-top: 0.4rem;
+    margin-right: 0;
+    margin-bottom: 0.5rem;
+    margin-left: 3rem;
+    font-size: 90%; }
+  #conversejs ul ul li, #conversejs ul ol li,
+  #conversejs ol ol li, #conversejs ol ul li {
+    margin-bottom: 0.6rem; }
+  #conversejs li {
+    line-height: 1.8rem;
+    margin-bottom: 1.2rem; }
+  #conversejs ul.large li {
+    line-height: 2.1rem; }
+  #conversejs li p {
+    line-height: 2.1rem; }
+  #conversejs img.scale-with-grid {
+    max-width: 100%;
+    height: auto; }
+  #conversejs .button,
+  #conversejs button,
+  #conversejs input[type="submit"],
+  #conversejs input[type="reset"],
+  #conversejs input[type="button"] {
+    border: 1px solid #aaa;
+    border-top: 1px solid #ccc;
+    border-left: 1px solid #ccc;
+    -webkit-border-radius: 3px;
+    -moz-border-radius: 3px;
+    -ms-border-radius: 3px;
+    -o-border-radius: 3px;
+    border-radius: 3px;
+    color: #444;
+    display: inline-block;
+    font-weight: bold;
+    font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-size: 13px;
+    font-size: 1.3rem;
+    text-decoration: none;
+    cursor: pointer;
+    line-height: normal;
+    padding: 0.8rem 1rem;
+    background: #eeeeee -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255, 255, 255, 0.2)), color-stop(100%, rgba(0, 0, 0, 0.2)));
+    background: #eeeeee -webkit-linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
+    background: #eeeeee -moz-linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
+    background: #eeeeee -o-linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
+    background: #eeeeee linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
+    text-shadow: 0 1px rgba(255, 255, 255, 0.75); }
+    #conversejs .button:hover,
+    #conversejs button:hover,
+    #conversejs input[type="submit"]:hover,
+    #conversejs input[type="reset"]:hover,
+    #conversejs input[type="button"]:hover {
+      color: #222;
+      border: 1px solid #888;
+      border-top: 1px solid #aaa;
+      border-left: 1px solid #aaa;
+      background: #dddddd -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255, 255, 255, 0.3)), color-stop(100%, rgba(0, 0, 0, 0.3)));
+      background: #dddddd -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%);
+      background: #dddddd -moz-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%);
+      background: #dddddd -o-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%);
+      background: #dddddd linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%); }
+    #conversejs .button:active,
+    #conversejs button:active,
+    #conversejs input[type="submit"]:active,
+    #conversejs input[type="reset"]:active,
+    #conversejs input[type="button"]:active {
+      border: 1px solid #666;
+      background: #cccccc -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255, 255, 255, 0.35)), color-stop(100%, rgba(10, 10, 10, 0.4)));
+      background: #cccccc -webkit-linear-gradient(top, rgba(255, 255, 255, 0.35) 0%, rgba(10, 10, 10, 0.4) 100%);
+      background: #cccccc -moz-linear-gradient(top, rgba(255, 255, 255, 0.35) 0%, rgba(10, 10, 10, 0.4) 100%);
+      background: #cccccc -o-linear-gradient(top, rgba(255, 255, 255, 0.35) 0%, rgba(10, 10, 10, 0.4) 100%);
+      background: #cccccc linear-gradient(top, rgba(255, 255, 255, 0.35) 0%, rgba(10, 10, 10, 0.4) 100%); }
+    #conversejs .button.full-width,
+    #conversejs button.full-width,
+    #conversejs input[type="submit"].full-width,
+    #conversejs input[type="reset"].full-width,
+    #conversejs input[type="button"].full-width {
+      width: 100%;
+      padding-left: 0 !important;
+      padding-right: 0 !important;
+      text-align: center; }
+    #conversejs .button.smaller,
+    #conversejs button.smaller,
+    #conversejs input[type="submit"].smaller,
+    #conversejs input[type="reset"].smaller,
+    #conversejs input[type="button"].smaller {
+      font-size: 12px;
+      font-size: 1.2rem;
+      padding: 0.4rem 0.5rem; }
+    #conversejs .button.larger,
+    #conversejs button.larger,
+    #conversejs input[type="submit"].larger,
+    #conversejs input[type="reset"].larger,
+    #conversejs input[type="button"].larger {
+      font-size: 16px;
+      font-size: 1.6rem;
+      padding: 1rem 1.8rem; }
+  #conversejs button::-moz-focus-inner,
+  #conversejs input::-moz-focus-inner {
+    border: 0;
+    padding: 0; }
+  #conversejs form {
+    margin-bottom: 2rem; }
+  #conversejs fieldset {
+    margin-bottom: 2rem; }
+  #conversejs input[type="text"],
+  #conversejs input[type="password"],
+  #conversejs input[type="email"],
+  #conversejs input[type="search"],
+  #conversejs input[type="url"],
+  #conversejs input[type="tel"],
+  #conversejs input[type="date"],
+  #conversejs input[type="datetime"],
+  #conversejs input[type="datetime-local"],
+  #conversejs input[type="month"],
+  #conversejs input[type="week"],
+  #conversejs input[type="time"],
+  #conversejs input[type="number"],
+  #conversejs textarea,
+  #conversejs select {
+    background: #fff;
+    border: 1px solid #ccc;
+    padding: 0.6rem 0.4rem;
+    outline: none;
+    -webkit-border-radius: 2px;
+    -moz-border-radius: 2px;
+    -ms-border-radius: 2px;
+    -o-border-radius: 2px;
+    border-radius: 2px;
+    font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-size: 15px;
+    font-size: 1.5rem;
+    color: #777;
+    margin: 0 0 2rem;
+    width: 21rem;
+    max-width: 100%;
+    display: block; }
+    #conversejs input[type="text"]:hover, #conversejs input[type="text"]:focus,
+    #conversejs input[type="password"]:hover,
+    #conversejs input[type="password"]:focus,
+    #conversejs input[type="email"]:hover,
+    #conversejs input[type="email"]:focus,
+    #conversejs input[type="search"]:hover,
+    #conversejs input[type="search"]:focus,
+    #conversejs input[type="url"]:hover,
+    #conversejs input[type="url"]:focus,
+    #conversejs input[type="tel"]:hover,
+    #conversejs input[type="tel"]:focus,
+    #conversejs input[type="date"]:hover,
+    #conversejs input[type="date"]:focus,
+    #conversejs input[type="datetime"]:hover,
+    #conversejs input[type="datetime"]:focus,
+    #conversejs input[type="datetime-local"]:hover,
+    #conversejs input[type="datetime-local"]:focus,
+    #conversejs input[type="month"]:hover,
+    #conversejs input[type="month"]:focus,
+    #conversejs input[type="week"]:hover,
+    #conversejs input[type="week"]:focus,
+    #conversejs input[type="time"]:hover,
+    #conversejs input[type="time"]:focus,
+    #conversejs input[type="number"]:hover,
+    #conversejs input[type="number"]:focus,
+    #conversejs textarea:hover,
+    #conversejs textarea:focus,
+    #conversejs select:hover,
+    #conversejs select:focus {
+      border: 1px solid #aaa;
+      color: #444;
+      -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
+      -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
+      -ms-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
+      -o-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
+      box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); }
+    #conversejs input[type="text"]:active,
+    #conversejs input[type="password"]:active,
+    #conversejs input[type="email"]:active,
+    #conversejs input[type="search"]:active,
+    #conversejs input[type="url"]:active,
+    #conversejs input[type="tel"]:active,
+    #conversejs input[type="date"]:active,
+    #conversejs input[type="datetime"]:active,
+    #conversejs input[type="datetime-local"]:active,
+    #conversejs input[type="month"]:active,
+    #conversejs input[type="week"]:active,
+    #conversejs input[type="time"]:active,
+    #conversejs input[type="number"]:active,
+    #conversejs textarea:active,
+    #conversejs select:active {
+      border: 1px solid #909090;
+      -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
+      -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
+      -ms-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
+      -o-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
+      box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); }
+  #conversejs select {
+    padding: 0; }
+  #conversejs textarea {
+    min-height: 6rem; }
+  #conversejs label,
+  #conversejs legend {
+    display: block;
+    font-weight: bold;
+    font-size: 15px;
+    font-size: 1.5rem; }
+    #conversejs label span,
+    #conversejs legend span {
+      font-weight: normal;
+      font-size: 15px;
+      font-size: 1.5rem;
+      color: #444; }
+  #conversejs select {
+    width: 22rem; }
+  #conversejs input[type="checkbox"] {
+    display: inline; }
+  #conversejs .subtract-bottom {
+    margin-bottom: -2rem !important; }
+  #conversejs .remove-bottom {
+    margin-bottom: 0 !important; }
+  #conversejs .half-bottom {
+    margin-bottom: 1rem !important; }
+  #conversejs .add-bottom {
+    margin-bottom: 2rem !important; }
+  #conversejs .container {
+    position: relative;
+    width: 960px;
+    margin: 0 auto;
+    padding: 0; }
+    #conversejs .container .column,
+    #conversejs .container .columns {
+      float: left;
+      display: inline;
+      position: relative; }
+      #conversejs .container .column.alpha,
+      #conversejs .container .columns.alpha {
+        margin-left: 0; }
+      #conversejs .container .column.omega,
+      #conversejs .container .columns.omega {
+        margin-right: 0; }
+  #conversejs .row {
+    margin-bottom: 2rem; }
+  #conversejs .container .column,
+  #conversejs .container .columns {
+    margin-left: 10px;
+    margin-right: 10px; }
+  #conversejs .container .one.column,
+  #conversejs .container .one.columns {
+    width: 40px; }
+  #conversejs .container .two.columns {
+    width: 100px; }
+  #conversejs .container .three.columns {
+    width: 160px; }
+  #conversejs .container .four.columns {
+    width: 220px; }
+  #conversejs .container .five.columns {
+    width: 280px; }
+  #conversejs .container .six.columns {
+    width: 340px; }
+  #conversejs .container .seven.columns {
+    width: 400px; }
+  #conversejs .container .eight.columns {
+    width: 460px; }
+  #conversejs .container .nine.columns {
+    width: 520px; }
+  #conversejs .container .ten.columns {
+    width: 580px; }
+  #conversejs .container .eleven.columns {
+    width: 640px; }
+  #conversejs .container .twelve.columns {
+    width: 700px; }
+  #conversejs .container .thirteen.columns {
+    width: 760px; }
+  #conversejs .container .fourteen.columns {
+    width: 820px; }
+  #conversejs .container .fifteen.columns {
+    width: 880px; }
+  #conversejs .container .sixteen.columns {
+    width: 940px; }
+  #conversejs .container .one-third.column {
+    width: 300px; }
+  #conversejs .container .two-thirds.column {
+    width: 620px; }
+  #conversejs .container .full-width.columns {
+    width: 960px;
+    margin-left: 0;
+    margin-right: 0; }
+  #conversejs .container .offset-by-one {
+    padding-left: 60px; }
+  #conversejs .container .offset-by-two {
+    padding-left: 120px; }
+  #conversejs .container .offset-by-three {
+    padding-left: 180px; }
+  #conversejs .container .offset-by-four {
+    padding-left: 240px; }
+  #conversejs .container .offset-by-five {
+    padding-left: 300px; }
+  #conversejs .container .offset-by-six {
+    padding-left: 360px; }
+  #conversejs .container .offset-by-seven {
+    padding-left: 420px; }
+  #conversejs .container .offset-by-eight {
+    padding-left: 480px; }
+  #conversejs .container .offset-by-nine {
+    padding-left: 540px; }
+  #conversejs .container .offset-by-ten {
+    padding-left: 600px; }
+  #conversejs .container .offset-by-eleven {
+    padding-left: 660px; }
+  #conversejs .container .offset-by-twelve {
+    padding-left: 720px; }
+  #conversejs .container .offset-by-thirteen {
+    padding-left: 780px; }
+  #conversejs .container .offset-by-fourteen {
+    padding-left: 840px; }
+  #conversejs .container .offset-by-fifteen {
+    padding-left: 900px; }
+  @media only screen and (min-width: 768px) and (max-width: 959px) {
+    #conversejs {
+      /* The Grid */ }
+      #conversejs .container {
+        width: 768px; }
+        #conversejs .container .column.alpha,
+        #conversejs .container .columns.alpha {
+          margin-left: 0;
+          margin-right: 10px; }
+        #conversejs .container .column.omega,
+        #conversejs .container .columns.omega {
+          margin-right: 0;
+          margin-left: 10px; }
+      #conversejs .alpha.omega {
+        margin-left: 0;
+        margin-right: 0; }
+      #conversejs .container .column,
+      #conversejs .container .columns {
+        margin-left: 10px;
+        margin-right: 10px; }
+      #conversejs .container .one.column,
+      #conversejs .container .one.columns {
+        width: 28px; }
+      #conversejs .container .two.columns {
+        width: 76px; }
+      #conversejs .container .three.columns {
+        width: 124px; }
+      #conversejs .container .four.columns {
+        width: 172px; }
+      #conversejs .container .five.columns {
+        width: 220px; }
+      #conversejs .container .six.columns {
+        width: 268px; }
+      #conversejs .container .seven.columns {
+        width: 316px; }
+      #conversejs .container .eight.columns {
+        width: 364px; }
+      #conversejs .container .nine.columns {
+        width: 412px; }
+      #conversejs .container .ten.columns {
+        width: 460px; }
+      #conversejs .container .eleven.columns {
+        width: 508px; }
+      #conversejs .container .twelve.columns {
+        width: 556px; }
+      #conversejs .container .thirteen.columns {
+        width: 604px; }
+      #conversejs .container .fourteen.columns {
+        width: 652px; }
+      #conversejs .container .fifteen.columns {
+        width: 700px; }
+      #conversejs .container .sixteen.columns {
+        width: 748px; }
+      #conversejs .container .one-third.column {
+        width: 236px; }
+      #conversejs .container .two-thirds.column {
+        width: 492px; }
+      #conversejs .container .full-width.columns {
+        width: 768px;
+        margin-left: 0;
+        margin-right: 0; }
+      #conversejs .container .offset-by-one {
+        padding-left: 48px; }
+      #conversejs .container .offset-by-two {
+        padding-left: 96px; }
+      #conversejs .container .offset-by-three {
+        padding-left: 144px; }
+      #conversejs .container .offset-by-four {
+        padding-left: 192px; }
+      #conversejs .container .offset-by-five {
+        padding-left: 240px; }
+      #conversejs .container .offset-by-six {
+        padding-left: 288px; }
+      #conversejs .container .offset-by-seven {
+        padding-left: 336px; }
+      #conversejs .container .offset-by-eight {
+        padding-left: 384px; }
+      #conversejs .container .offset-by-nine {
+        padding-left: 432px; }
+      #conversejs .container .offset-by-ten {
+        padding-left: 480px; }
+      #conversejs .container .offset-by-eleven {
+        padding-left: 528px; }
+      #conversejs .container .offset-by-twelve {
+        padding-left: 576px; }
+      #conversejs .container .offset-by-thirteen {
+        padding-left: 624px; }
+      #conversejs .container .offset-by-fourteen {
+        padding-left: 672px; }
+      #conversejs .container .offset-by-fifteen {
+        padding-left: 720px; } }
+  @media only screen and (max-width: 767px) {
+    #conversejs .container {
+      width: 300px; }
+      #conversejs .container .column,
+      #conversejs .container .columns {
+        margin-left: 0;
+        margin-right: 0; }
+      #conversejs .container .one.column {
+        width: 300px; }
+      #conversejs .container .one.columns, #conversejs .container .two.columns, #conversejs .container .three.columns, #conversejs .container .four.columns, #conversejs .container .five.columns, #conversejs .container .six.columns, #conversejs .container .seven.columns, #conversejs .container .eight.columns, #conversejs .container .nine.columns, #conversejs .container .ten.columns, #conversejs .container .eleven.columns, #conversejs .container .twelve.columns, #conversejs .container .thirteen.columns, #conversejs .container .fourteen.columns, #conversejs .container .fifteen.columns, #conversejs .container .sixteen.columns {
+        width: 296px; }
+      #conversejs .container .one-third.column {
+        width: 296px; }
+      #conversejs .container .two-thirds.column {
+        width: 296px; }
+      #conversejs .container .full-width.columns {
+        width: 300px;
+        margin-left: 0;
+        margin-right: 0; }
+      #conversejs .container .offset-by-one, #conversejs .container .offset-by-two, #conversejs .container .offset-by-three, #conversejs .container .offset-by-four, #conversejs .container .offset-by-five, #conversejs .container .offset-by-six, #conversejs .container .offset-by-seven, #conversejs .container .offset-by-eight, #conversejs .container .offset-by-nine, #conversejs .container .offset-by-ten, #conversejs .container .offset-by-eleven, #conversejs .container .offset-by-twelve, #conversejs .container .offset-by-thirteen, #conversejs .container .offset-by-fourteen, #conversejs .container .offset-by-fifteen {
+        padding-left: 0; } }
+  @media only screen and (min-width: 480px) and (max-width: 767px) {
+    #conversejs .container {
+      width: 420px; }
+      #conversejs .container .column,
+      #conversejs .container .columns {
+        margin-left: 0;
+        margin-right: 0; }
+      #conversejs .container .one.column {
+        width: 420px; }
+      #conversejs .container .one.columns, #conversejs .container .two.columns, #conversejs .container .three.columns, #conversejs .container .four.columns, #conversejs .container .five.columns, #conversejs .container .six.columns, #conversejs .container .seven.columns, #conversejs .container .eight.columns, #conversejs .container .nine.columns, #conversejs .container .ten.columns, #conversejs .container .eleven.columns, #conversejs .container .twelve.columns, #conversejs .container .thirteen.columns, #conversejs .container .fourteen.columns, #conversejs .container .fifteen.columns, #conversejs .container .sixteen.columns {
+        width: 416px; }
+      #conversejs .container .one-third.column {
+        width: 416px; }
+      #conversejs .container .two-thirds.column {
+        width: 416px; }
+      #conversejs .container .full-width.columns {
+        width: 420px;
+        margin-left: 0;
+        margin-right: 0; }
+      #conversejs .container .offset-by-one, #conversejs .container .offset-by-two, #conversejs .container .offset-by-three, #conversejs .container .offset-by-four, #conversejs .container .offset-by-five, #conversejs .container .offset-by-six, #conversejs .container .offset-by-seven, #conversejs .container .offset-by-eight, #conversejs .container .offset-by-nine, #conversejs .container .offset-by-ten, #conversejs .container .offset-by-eleven, #conversejs .container .offset-by-twelve, #conversejs .container .offset-by-thirteen, #conversejs .container .offset-by-fourteen, #conversejs .container .offset-by-fifteen {
+        padding-left: 0; } }
+  #conversejs .container:after {
+    content: "\0020";
+    display: block;
+    height: 0;
+    clear: both;
+    visibility: hidden; }
+  #conversejs .clearfix, #conversejs .row {
+    zoom: 1; }
+    #conversejs .clearfix:before, #conversejs .clearfix:after, #conversejs .row:before, #conversejs .row:after {
+      content: "\0020";
+      display: block;
+      overflow: hidden;
+      visibility: hidden;
+      width: 0;
+      height: 0; }
+    #conversejs .clearfix:after, #conversejs .row:after {
+      clear: both; }
+  #conversejs .clear {
+    clear: both;
+    display: block;
+    overflow: hidden;
+    visibility: hidden;
+    width: 0;
+    height: 0; }
+  @media only screen and (min-width: 960px) and (max-width: 1280px) {
+    #conversejs {
+      /* add code here */ } }
+  @media only screen and (max-width: 959px) {
+    #conversejs {
+      /* add code here */ } }
+  @media only screen and (min-width: 768px) and (max-width: 959px) {
+    #conversejs {
+      /* add code here */ } }
+  @media only screen and (max-width: 767px) {
+    #conversejs {
+      /* add code here */ } }
+  @media only screen and (min-width: 480px) and (max-width: 767px) {
+    #conversejs {
+      /* add code here */ } }
+  @media only screen and (max-width: 479px) {
+    #conversejs {
+      /* add code here */ } }
+  #conversejs a, #conversejs a:visited {
+    text-decoration: none;
+    color: #436F64;
+    text-shadow: none; }
+  #conversejs div {
+    box-sizing: border-box; }
+  #conversejs ul li {
+    height: auto; }
+  #conversejs div, #conversejs span, #conversejs h1, #conversejs h2, #conversejs h3, #conversejs h4, #conversejs h5, #conversejs h6, #conversejs p, #conversejs blockquote,
+  #conversejs pre, #conversejs a, #conversejs em, #conversejs img, #conversejs strong, #conversejs dl, #conversejs dt, #conversejs dd, #conversejs ol, #conversejs ul, #conversejs li,
+  #conversejs fieldset, #conversejs form, #conversejs label, #conversejs legend, #conversejs table, #conversejs caption, #conversejs tbody,
+  #conversejs tfoot, #conversejs thead, #conversejs tr, #conversejs th, #conversejs td, #conversejs article, #conversejs aside, #conversejs canvas, #conversejs details,
+  #conversejs embed, #conversejs figure, #conversejs figcaption, #conversejs footer, #conversejs header, #conversejs hgroup, #conversejs menu,
+  #conversejs nav, #conversejs output, #conversejs ruby, #conversejs section, #conversejs summary, #conversejs time, #conversejs mark, #conversejs audio, #conversejs video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font: inherit;
+    vertical-align: baseline; }
+  #conversejs strong {
+    font-weight: 700; }
+  #conversejs ol, #conversejs ul {
+    list-style: none; }
+  #conversejs li {
+    height: 10px; }
+  #conversejs ul, #conversejs ol, #conversejs dl {
+    font: inherit;
+    margin: 0 0 15px 0; }
+  #conversejs [data-icon]:before {
+    font-family: 'Converse-js';
+    content: attr(data-icon);
+    speak: none;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
+    line-height: 1;
+    /* Better Font Rendering =========== */
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale; }
+  #conversejs [class^="icon-"], #conversejs [class*=" icon-"] {
+    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; }
+  #conversejs .icon-address-book:before {
+    content: "\270f"; }
+  #conversejs .icon-angry:before {
+    content: "\e03f"; }
+  #conversejs .icon-attachment:before {
+    content: "\e032"; }
+  #conversejs .icon-away:before {
+    content: "\25fb"; }
+  #conversejs .icon-blocked:before {
+    content: "\2718"; }
+  #conversejs .icon-bold:before {
+    content: "\e04d"; }
+  #conversejs .icon-bubbles-2:before {
+    content: "\e016"; }
+  #conversejs .icon-bubbles-3:before {
+    content: "\e017"; }
+  #conversejs .icon-bubbles:before {
+    content: "\e015"; }
+  #conversejs .icon-camera-2:before {
+    content: "\2616"; }
+  #conversejs .icon-camera:before {
+    content: "\e003"; }
+  #conversejs .icon-cancel-circle:before {
+    content: "\e058"; }
+  #conversejs .icon-checkbox-checked:before {
+    content: "\2611"; }
+  #conversejs .icon-checkbox-partial:before {
+    content: "\2b28"; }
+  #conversejs .icon-checkbox-unchecked:before {
+    content: "\2b27"; }
+  #conversejs .icon-checkmark:before {
+    content: "\2713"; }
+  #conversejs .icon-close:before {
+    content: "\2715"; }
+  #conversejs .icon-closed:before {
+    content: "\25ba"; }
+  #conversejs .icon-cog:before {
+    content: "\e02f"; }
+  #conversejs .icon-cogs:before {
+    content: "\e022"; }
+  #conversejs .icon-confused:before {
+    content: "\2368"; }
+  #conversejs .icon-cool:before {
+    content: "\e040"; }
+  #conversejs .icon-dnd:before {
+    content: "\e004"; }
+  #conversejs .icon-envelop:before {
+    content: "\2709"; }
+  #conversejs .icon-evil:before {
+    content: "\261f"; }
+  #conversejs .icon-eye-blocked:before {
+    content: "\e031"; }
+  #conversejs .icon-eye:before {
+    content: "\e030"; }
+  #conversejs .icon-globe:before {
+    content: "\e033"; }
+  #conversejs .icon-grin:before {
+    content: "\e041"; }
+  #conversejs .icon-happy:before {
+    content: "\263b"; }
+  #conversejs .icon-headphones:before {
+    content: "\266c"; }
+  #conversejs .icon-heart:before {
+    content: "\2764"; }
+  #conversejs .icon-hide-users:before {
+    content: "\e01c"; }
+  #conversejs .icon-home:before {
+    content: "\e000"; }
+  #conversejs .icon-image:before {
+    content: "\2b14"; }
+  #conversejs .icon-info:before {
+    content: "\2360"; }
+  #conversejs .icon-italic:before {
+    content: "\e04f"; }
+  #conversejs .icon-key-2:before {
+    content: "\e029"; }
+  #conversejs .icon-key:before {
+    content: "\e028"; }
+  #conversejs .icon-lock-2:before {
+    content: "\e027"; }
+  #conversejs .icon-lock:before {
+    content: "\e026"; }
+  #conversejs .icon-logout:before {
+    content: "\e601"; }
+  #conversejs .icon-minus:before {
+    content: "\e05a"; }
+  #conversejs .icon-music:before {
+    content: "\266b"; }
+  #conversejs .icon-new-tab:before {
+    content: "\e053"; }
+  #conversejs .icon-newspaper:before {
+    content: "\e001"; }
+  #conversejs .icon-notebook:before {
+    content: "\2710"; }
+  #conversejs .icon-notification:before {
+    content: "\e01f"; }
+  #conversejs .icon-online:before {
+    content: "\25fc"; }
+  #conversejs .icon-opened:before {
+    content: "\25bc"; }
+  #conversejs .icon-pencil:before {
+    content: "\270e"; }
+  #conversejs .icon-phone-hang-up:before {
+    content: "\260e"; }
+  #conversejs .icon-phone:before {
+    content: "\260f"; }
+  #conversejs .icon-play:before {
+    content: "\25d9"; }
+  #conversejs .icon-plus:before {
+    content: "\271a"; }
+  #conversejs .icon-pushpin:before {
+    content: "\e012"; }
+  #conversejs .icon-quotes-left:before {
+    content: "\e01d"; }
+  #conversejs .icon-radio-checked:before {
+    content: "\2b26"; }
+  #conversejs .icon-radio-unchecked:before {
+    content: "\2b25"; }
+  #conversejs .icon-remove:before {
+    content: "\e02d"; }
+  #conversejs .icon-room-info:before {
+    content: "\e059"; }
+  #conversejs .icon-sad:before {
+    content: "\2639"; }
+  #conversejs .icon-search:before {
+    content: "\e021"; }
+  #conversejs .icon-shocked:before {
+    content: "\2364"; }
+  #conversejs .icon-show-users:before {
+    content: "\e01e"; }
+  #conversejs .icon-smiley:before {
+    content: "\263a"; }
+  #conversejs .icon-spell-check:before {
+    content: "\e045"; }
+  #conversejs .icon-spinner:before {
+    content: "\231b"; }
+  #conversejs .icon-strikethrough:before {
+    content: "\e050"; }
+  #conversejs .icon-thumbs-up:before {
+    content: "\261d"; }
+  #conversejs .icon-tongue:before {
+    content: "\e038"; }
+  #conversejs .icon-underline:before {
+    content: "\e04e"; }
+  #conversejs .icon-unlocked:before {
+    content: "\e025"; }
+  #conversejs .icon-user:before {
+    content: "\e01a"; }
+  #conversejs .icon-users:before {
+    content: "\e01b"; }
+  #conversejs .icon-volume-decrease:before {
+    content: "\e04b"; }
+  #conversejs .icon-volume-high:before {
+    content: "\e046"; }
+  #conversejs .icon-volume-increase:before {
+    content: "\e04c"; }
+  #conversejs .icon-volume-low:before {
+    content: "\e048"; }
+  #conversejs .icon-volume-medium:before {
+    content: "\e047"; }
+  #conversejs .icon-volume-mute-2:before {
+    content: "\e04a"; }
+  #conversejs .icon-volume-mute:before {
+    content: "\e049"; }
+  #conversejs .icon-warning:before {
+    content: "\26a0"; }
+  #conversejs .icon-wink:before {
+    content: "\e03a"; }
+  #conversejs .icon-wondering:before {
+    content: "\2369"; }
+  #conversejs .icon-wrench:before {
+    content: "\e024"; }
+  #conversejs .icon-xa:before,
+  #conversejs .icon-unavailable:before,
+  #conversejs .icon-offline:before {
+    content: "\e002"; }
+  #conversejs .icon-youtube:before {
+    content: "\e055"; }
+  #conversejs .icon-zoom-in:before {
+    content: "\e02b"; }
+  #conversejs .icon-zoom-out:before {
+    content: "\e02a"; }
+  #conversejs .no-text-select {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: -moz-none;
+    -ms-user-select: none;
+    user-select: none; }
+  #conversejs .emoticon {
+    font-size: 14px; }
+  #conversejs .hidden {
+    display: none; }
+  #conversejs .locked {
+    padding-right: 22px; }
 @-webkit-keyframes spin {
-  0% {
-    -webkit-transform: rotate(0deg);
-  }
-  100% {
-    -webkit-transform: rotate(359deg);
-  }
-}
-@-o-keyframes spin {
-  0% {
-    -o-transform: rotate(0deg);
-  }
-  100% {
-    -o-transform: rotate(359deg);
-  }
-}
+  from {
+    -webkit-transform: rotate(0deg); }
+  to {
+    -webkit-transform: rotate(359deg); } }
+@-moz-keyframes spin {
+  from {
+    -moz-transform: rotate(0deg); }
+  to {
+    -moz-transform: rotate(359deg); } }
 @keyframes spin {
-  0% {
+  from {
     -webkit-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
-  100% {
+    -moz-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg); }
+  to {
     -webkit-transform: rotate(359deg);
-    transform: rotate(359deg);
-  }
-}
-#conversejs .spinner:before {
-  font-size: 24px;
-  font-family: 'Converse-js' !important;
-  content: "\231b";
-}
-#conversejs .spinner {
-  -webkit-animation: spin 2s infinite linear;
-  -moz-animation: spin 2s infinite linear;
-  -o-animation: spin 2s infinite linear;
-  animation: spin 2s infinite linear;
-  display: block;
-  text-align: center;
-  margin: 5px;
-}
-#conversejs .centered {
-  text-align: center;
-  display: block;
-  margin: 5em auto;
-}
-#conversejs .hor_centered {
-  text-align: center;
-  display: block;
-  margin: 0 auto;
-}
-#conversejs #minimized-chats .box-flyout {
-  position: absolute;
-  display: block;
-  height: auto;
-  bottom: 25px;
-  margin-left: 0;
-}
-#conversejs #minimized-chats .box-flyout .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;
-}
-#conversejs #minimized-chats,
-#conversejs .toggle-controlbox {
-  float: right;
-  font-size: 90%;
-  border-top-right-radius: 2px;
-  border-top-left-radius: 2px;
-  background-color: #F4F4F4;
-  padding: 4px 8px;
-  margin-right: 5px;
-  color: #0a0a0a;
-  font-weight: bold;
-  height: 100%;
-}
-#conversejs #minimized-chats {
-  width: 130px;
-  padding: 0;
-  display: none;
-}
-#conversejs #toggle-minimized-chats {
-  position: relative;
-  padding: 4px 0 0 4px;
-  display: block;
-  width: 100%;
-  height: 100%;
-  color: #0f0f0f;
-}
-#conversejs #toggle-minimized-chats .unread-message-count {
-  right: 5px;
-  bottom: 5px;
-}
-#conversejs .toggle-controlbox,
-#conversejs .toggle-minimized-chats {
-  float: right;
-  font-size: 85%;
-  border-top-right-radius: 4px;
-  border-top-left-radius: 4px;
-  background-color: #5390c8;
-  padding: 4px 8px;
-  margin-right: 5px;
-  color: white;
-}
-#conversejs .chat-head {
-  color: #ffffff;
-  font-size: 100%;
-  border-top-right-radius: 4px;
-  border-top-left-radius: 4px;
-  padding: 2px 2px 2px 4px;
-  margin: 0;
-}
-#conversejs .chat-head-chatbox {
-  background-color: #2D617A;
-}
-#conversejs .chat-head-chatroom {
-  background-color: #0F592F;
-}
-#conversejs .chat-body {
-  background-color: white;
-  border-bottom-right-radius: 4px;
-  border-bottom-left-radius: 4px;
-  height: 289px;
-  height: calc(100% - 35px);
-  border-top: 0;
-}
-#conversejs .chatroom .chat-area {
-  float: left;
-  height: 100%;
-  width: 200px;
-}
-#conversejs .chatroom .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%;
-}
-#conversejs .tt-highlight {
-  background-color: #00230F;
-}
-#conversejs div.tt-suggestion p:hover .tt-highlight {
-  background-color: #00230F;
-  background: #27774A;
-}
-#conversejs div.tt-suggestion p:hover {
-  background-color: #00230F;
-}
-#conversejs div.tt-suggestion p {
-  color: white;
-  text-shadow: rgba(0, 0, 0, 0.51) 0 -1px 0;
-  cursor: pointer;
-  font-size: 11px;
-}
-#conversejs .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;
-}
-#conversejs .chatroom div.participants label {
-  font-style: italic;
-}
-#conversejs .chatroom label {
-  margin-left: 2px;
-  font-size: 12px;
-}
-#conversejs .chatroom .invited-contact {
-  margin: 0;
-  width: 99px;
-  border: 1px solid #999;
-}
-#conversejs .chatroom .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;
-}
-#conversejs .participants label {
-  margin-top: 5px;
-  display: block;
-}
-#conversejs .participants ul.participant-list li {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  display: block;
-  font-size: 12px;
-  font-weight: bold;
-  padding: 0.5em 0 0 0.5em;
-  cursor: default;
-}
-#conversejs ul.participant-list li.moderator {
-  color: #8f2831;
-}
-#conversejs .chatroom .participant-list {
-  list-style: none;
-}
-#conversejs .chat-blink {
-  background-color: #176679;
-  border-right: 1px solid #176679;
-  border-left: 1px solid #176679;
-}
-#conversejs .chat-message span::selection,
-#conversejs .chat-message::selection {
-  background-color: darkgrey;
-}
-#conversejs .chat-content {
-  position: relative;
-  padding: 4px;
-  font-size: 13px;
-  color: #4f4f4f;
-  overflow-y: auto;
-  border: 0;
-  background-color: #ffffff;
-  line-height: 1.3em;
-  box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  height: 206px;
-  height: calc(100% - 84px);
-}
-#conversejs .chat-info {
-  color: #666666;
-}
-#conversejs .chat-error {
-  color: #8f2831;
-}
-#conversejs .chat-message-room,
-#conversejs .chat-message-them,
-#conversejs .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;
-}
-#conversejs .chat-message-content {
-  word-wrap: break-word;
-}
-#conversejs .chat-message-them {
-  color: #8f2831;
-}
-#conversejs .chat-message-me {
-  color: #2D617A;
-}
-#conversejs .chat-message-room {
-  color: #4B7003;
-}
-#conversejs .chat-event,
-#conversejs .chat-date,
-#conversejs .chat-info {
-  color: #808080;
-}
-#conversejs li.chat-info {
-  padding-left: 10px;
-}
-#conversejs .chat-date {
-  display: inline-block;
-  padding-top: 10px;
-}
-#conversejs p.not-implemented {
-  margin-top: 3em;
-  margin-left: 0.3em;
-  color: #808080;
-}
-#conversejs div.mentioned {
-  font-weight: bold;
-}
-#conversejs div.delayed .chat-message-them {
-  color: #FB5D50;
-}
-#conversejs div.delayed .chat-message-me {
-  color: #7EABBB;
-}
-#conversejs input.error {
-  border: 1px solid red;
-}
-#conversejs .error {
-  color: red;
-}
-#converse-register .provider-title {
-  font-size: 115%;
-}
-#converse-register .provider-score {
-  width: 178px;
-  margin-bottom: 8px;
-}
-#converse-register .form-help .url {
-  font-weight: bold;
-  color: #2D617A;
-}
-#conversejs .reg-feedback {
-  font-size: 85%;
-}
-#conversejs .reg-feedback,
-#converse-login .conn-feedback {
-  width: 100%;
-  text-align: center;
-  display: block;
-}
-#conversejs .chat-message-error {
-  color: #76797C;
-  font-size: 90%;
-  font-weight: normal;
-}
-#conversejs .chat-head .avatar {
-  float: left;
-}
-#conversejs .restore-chat,
-#conversejs .chat-title {
-  padding: 1px 0 1px 5px;
-  color: white;
-  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;
-}
-#conversejs .chat-title a {
-  color: white;
-  width: 100%;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-#conversejs .chat-head-chatbox,
-#conversejs .chat-head-chatroom {
-  height: 35px;
-  position: relative;
-}
-#conversejs p.user-custom-message,
-#conversejs p.chatroom-topic {
-  font-size: 80%;
-  font-style: italic;
-  height: 1.3em;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  margin: 0;
-  padding: 1px 0;
-}
-#conversejs div.chat-head-chatbox a.user-custom-message {
-  color: white;
-}
-#conversejs .activated {
-  display: block !important;
-}
-#conversejs a.subscribe-to-user {
-  padding-left: 2em;
-  font-weight: bold;
-}
-dl.add-converse-contact {
-  margin: 0 0 0 0.5em;
-}
-#conversejs .fancy-dropdown {
-  border: 1px solid #ddd;
-  height: 22px;
-  text-align: left;
-}
-#conversejs .fancy-dropdown a.choose-xmpp-status {
-  width: 155px;
-}
-#conversejs .fancy-dropdown a.choose-xmpp-status,
-#conversejs .fancy-dropdown a.toggle-xmpp-contact-form {
-  text-shadow: 0 1px 0 #ffffff;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  display: inline;
-}
-#conversejs .fancy-dropdown a.toggle-xmpp-contact-form span {
-  float: left;
-}
-#conversejs .choose-xmpp-status span {
-  padding-right: 5px;
-  padding-left: 5px;
-  float: left;
-}
-#conversejs #fancy-xmpp-status-select a.change-xmpp-status-message {
-  float: right;
-  clear: right;
-  height: 22px;
-  width: 12px;
-  margin: 0px 5px 0 0;
-  color: #4f4f4f;
-}
-#conversejs ul#found-users {
-  padding: 10px 0 5px 5px;
-  border: 0;
-}
-#conversejs form.search-xmpp-contact {
-  margin: 0;
-  padding-left: 5px;
-  padding: 0 0 5px 5px;
-}
-#conversejs form.search-xmpp-contact input {
-  width: 8em;
-}
-#conversejs .controlbox-head {
-  margin: 0;
-  color: #FFF;
-  border-top-right-radius: 4px;
-  border-top-left-radius: 4px;
-  height: 35px;
-  clear: right;
-  background-color: #2D617A;
-  padding: 3px 0 0 0;
-}
-#conversejs .unread-message-count,
-#conversejs .chat-head-message-count {
-  font-weight: bold;
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.35, #f6f6f6), color-stop(1, #808080));
-  background: -moz-linear-gradient(center top, #ffff00 5%, #f6f6f6 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='yellow', endColorstr='#f6f6f6');
-  border: 1px solid;
-  text-shadow: 1px 1px 0 #ccc;
-  color: darkred;
-  border-radius: 5px;
-  padding: 2px 4px;
-  font-size: 15px;
-  text-align: center;
-  position: absolute;
-  right: 22px;
-  bottom: 1px;
-}
-#conversejs a.configure-chatroom-button,
-#conversejs a.toggle-chatbox-button,
-#conversejs a.close-chatbox-button {
-  font-size: 10px;
-  padding: 3px 3px 2px 3px;
-  margin-right: 3px;
-  cursor: pointer;
-  border-radius: 6px;
-  border: 1px solid #888;
-  display: inline-block;
-  color: white;
-  text-decoration: none;
-  float: right;
-}
-#conversejs a.configure-chatroom-button:active,
-#conversejs a.toggle-chatbox-button:active,
-#conversejs a.close-chatbox-button:active {
-  position: relative;
-  top: 1px;
-}
-#conversejs .controlbox-pane dt {
-  padding-bottom: 3px;
-}
-#conversejs .chatroom-form-container {
-  height: 100%;
-  color: #666;
-  overflow-y: auto;
-  border-bottom-right-radius: 4px;
-  border-bottom-left-radius: 4px;
-}
-#conversejs .chat-body p {
-  font-size: 14px;
-  color: #666;
-  padding: 5px;
-  margin: 0;
-}
-#conversejs .chatroom-form legend {
-  font-size: 14px;
-  font-weight: bold;
-  margin: 5px 0;
-}
-#conversejs .chatroom-form label {
-  height: 30px;
-  font-weight: bold;
-  display: block;
-  clear: both;
-}
-#conversejs .chatroom-form label input,
-#conversejs .chatroom-form label select {
-  float: right;
-}
-#converse-roster dd.odd {
-  background-color: #DCEAC5;
-  /* Make this difference */
-}
-#converse-roster dd.current-xmpp-contact span {
-  font-size: 16px;
-  float: left;
-  color: #4f4f4f;
-}
-#conversejs .requesting-xmpp-contact .request-actions {
-  margin-left: 0.5em;
-  float: right;
-}
-#converse-roster dd a,
-#converse-roster dd span {
-  text-shadow: 0 1px 0 #fafafa;
-  display: inline-block;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-#converse-roster span.req-contact-name {
-  width: 65%;
-}
-#converse-roster span.pending-contact-name,
-#converse-roster a.open-chat {
-  width: 80%;
-}
-#converse-roster dd span {
-  padding: 0 5px 0 0;
-}
-#converse-roster {
-  text-align: left;
-  width: 100%;
-  position: relative;
-  margin: 0.5em 0 0 0;
-  height: 194px;
-  height: calc(100% - 68px);
-  overflow: hidden;
-}
-#converse-roster .roster-filter {
-  padding: 0;
-  margin: 0 0 5px 0.5em;
-  width: 105px;
-  height: 20px;
-  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAABNSURBVHjaXI7BDcAwCAMvyQjMyQ6dAbZiKfqoUK34g2zJh1dENIC7M8pMAPYdzAVY3d0ajNz9aypS/b5R6o+ZPdqoKgCq6h80KH3xDgBqNR97p8oAGQAAAABJRU5ErkJggg== ) no-repeat right -20px center;
-  border: 1px solid #999;
-  display: inline-block;
-}
-#converse-roster .filter-type {
-  height: 20px;
-  padding: 0;
-  margin: 0 0 0 -5px;
-}
-/* (jQ addClass:) if input has value: */
-#converse-roster .roster-filter.x {
-  background-position: right 3px center;
-}
-/* (jQ addClass:) if mouse is over the 'x' input area*/
-#converse-roster .roster-filter.onX {
-  cursor: pointer;
-}
-#converse-roster .roster-contacts {
-  margin: 0;
-  overflow-y: auto;
-  overflow-x: hidden;
-  max-height: 195px;
-  max-height: calc(100% - 26px);
-}
-#converse-roster .group-toggle {
-  color: #666;
-}
-#conversejs dd.available-chatroom {
-  overflow-x: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  display: inline-block;
-}
-#conversejs dd.available-chatroom a.open-room {
-  width: 148px;
-}
-#available-chatrooms {
-  text-align: left;
-}
-#available-chatrooms dt,
-#converse-roster dt {
-  font-weight: normal;
-  font-size: 13px;
-  color: #666;
-  border: none;
-  padding: 0.3em 0 0 0.5em;
-  text-shadow: 0 1px 0 #fafafa;
-}
-#converse-roster dt {
-  display: none;
-}
-#conversejs .room-info {
-  font-size: 11px;
-  font-style: normal;
-  font-weight: normal;
-}
-#conversejs li.room-info {
-  display: block;
-  margin-left: 5px;
-}
-#conversejs div.room-info {
-  clear: left;
-}
-#conversejs p.room-info {
-  margin: 0;
-  padding: 0;
-  display: block;
-  white-space: normal;
-}
-#conversejs a.room-info {
-  width: 22px;
-  height: 22px;
-  float: right;
-  display: none;
-  clear: right;
-}
-#conversejs a.open-room {
-  float: left;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow-x: hidden;
-}
-#conversejs dd.available-chatroom:hover a.room-info {
-  display: inline-block;
-  margin-top: 3px;
-  font-size: 15px;
-}
-#conversejs dd.available-chatroom,
-#conversejs #converse-roster dd {
-  font-weight: bold;
-  border: none;
-  display: block;
-  padding: 1px 0 0 0.5em;
-  color: #666;
-  text-shadow: 0 1px 0 #fafafa;
-  clear: both;
-}
-#converse-roster dd {
-  line-height: 16px;
-}
-#conversejs .group-toggle {
-  display: block;
-  width: 100%;
-}
-#conversejs .roster-group:hover,
-#conversejs dd.available-chatroom:hover,
-#converse-roster dd:hover {
-  background-color: #eee;
-}
-#converse-roster dd a.decline-xmpp-request {
-  margin-left: 5px;
-}
-#converse-roster dd a.remove-xmpp-contact {
-  float: right;
-  width: 22px;
-  margin: 0;
-  display: none;
-  color: #4f4f4f;
-}
-#converse-roster dd:hover a.remove-xmpp-contact {
-  display: inline-block;
-}
-#conversejs .chatbox,
-#conversejs .chatroom {
-  height: 25px;
-  float: right;
-  margin-right: 15px;
-  display: block;
-}
-#conversejs .chatbox {
-  width: 200px;
-}
-#conversejs .chatroom {
-  width: 300px;
-}
-#conversejs .chatroom-form,
-#conversejs .controlbox-pane {
-  text-align: center;
-  background-color: white;
-  border-bottom-left-radius: 4px;
-  border-bottom-right-radius: 4px;
-  border: 0;
-  font-size: 14px;
-  height: 289px;
-  height: calc(100% - 35px);
-  overflow-y: auto;
-  padding: 0;
-  position: absolute;
-  width: 100%;
-}
-#conversejs .controlbox-pane dd {
-  margin-left: 0;
-  margin-bottom: 0;
-}
-#conversejs .controlbox-pane dd.odd {
-  background-color: #DCEAC5;
-}
-#conversejs #converse-register .title {
-  font-weight: bold;
-}
-#conversejs #converse-register .info {
-  font-style: italic;
-  color: green;
-  font-size: 85%;
-  margin: 5px 0;
-}
-#conversejs .form-help,
-#conversejs #converse-register .instructions {
-  color: gray;
-  font-size: 85%;
-}
-#conversejs .chatroom-form .instructions {
-  color: gray;
-  font-size: 95%;
-}
-#conversejs .form-help:hover,
-#conversejs #converse-register .instructions:hover {
-  color: #4f4f4f;
-}
-#conversejs .form-help {
-  padding-top: 5px;
-}
-#conversejs #converse-register .form-errors {
-  color: red;
-  display: none;
-}
-#conversejs #converse-register,
-#conversejs #converse-login {
-  background: white;
-  padding: 1em 0.5em;
-}
-#conversejs #converse-register input,
-#conversejs #converse-login input {
-  width: 178px;
-  height: 30px;
-}
-#converse-register .input-group {
-  display: table;
-  margin: auto;
-  width: 178px;
-}
-#conversejs #converse-register .input-group span,
-#conversejs #converse-register .input-group input[name=username] {
-  display: table-cell;
-}
-#conversejs #converse-register .input-group input[name=username] {
-  width: 100%;
-}
-#conversejs #converse-register .cancel,
-#conversejs .chatroom-form .cancel-submit,
-#conversejs #converse-register .cancel-submit {
-  color: darkred;
-}
-#conversejs .chatroom-form .save-submit,
-#conversejs #converse-register .save-submit {
-  color: darkgreen;
-}
-#conversejs .chatroom-form .save-submit,
-#conversejs .chatroom-form .cancel-submit,
-#conversejs #converse-register .cancel-submit,
-#conversejs #converse-register .save-submit {
-  width: 45%;
-  margin: 5px 3px 5px 3px;
-}
-#conversejs .chatroom-form input {
-  width: 80%;
-  padding: 5px;
-  text-align: center;
-}
-#conversejs .chatroom-form label,
-#conversejs #converse-register label,
-#conversejs #converse-login label {
-  height: auto;
-  font-size: 14px;
-  margin-top: 0.5em;
-  font-weight: bold;
-}
-#conversejs #converse-register .login-submit,
-#conversejs #converse-login .login-submit,
-#conversejs #converse-register .submit,
-#conversejs #converse-login .submit {
-  margin-top: 1em;
-  height: 30px;
-}
-#conversejs form.set-xmpp-status {
-  background: none;
-  margin: none;
-  padding: none;
-}
-#conversejs form.add-chatroom {
-  background: none;
-  padding: 3px;
-}
-#conversejs form.add-chatroom input[type=text] {
-  width: 95%;
-  margin: 3px;
-}
-#conversejs form.add-chatroom input[type=button],
-#conversejs form.add-chatroom input[type=submit] {
-  width: 48%;
-}
-select#select-xmpp-status {
-  float: right;
-  margin-right: 0.5em;
-}
-/* @group Tabs */
-#conversejs .chat-head #controlbox-tabs {
-  text-align: center;
-  display: inline;
-  overflow: hidden;
-  font-size: 12px;
-  list-style-type: none;
-}
-/* single tab */
-#conversejs .chat-head #controlbox-tabs li {
-  float: left;
-  list-style: none;
-  padding-left: 0;
-  text-shadow: white 0 1px 0;
-  width: 38%;
-}
-#conversejs ul#controlbox-tabs li a {
-  display: block;
-  font-size: 12px;
-  height: 34px;
-  line-height: 34px;
-  margin: 0;
-  text-align: center;
-  text-decoration: none;
-  border-top-right-radius: 4px;
-  border-top-left-radius: 4px;
-  color: #888;
-  text-shadow: 0 1px 0 #fafafa;
-}
-#conversejs .chat-head #controlbox-tabs li a:hover {
-  color: #4f4f4f;
-}
-#conversejs .chat-head #controlbox-tabs li a {
-  background-color: white;
-  box-shadow: inset 0 4px 12px rgba(0, 0, 0, 0.3);
-  border-bottom: 1px solid #CCC;
-}
-#conversejs ul#controlbox-tabs a.current,
-#conversejs ul#controlbox-tabs a.current:hover {
-  box-shadow: none;
-  border-bottom: 0;
-  height: 35px;
-  cursor: default;
-  color: #666666;
-}
-#conversejs div#chatrooms {
-  overflow-y: auto;
-}
-#conversejs form.sendXMPPMessage {
-  background: white;
-  border: 0;
-  border-top: 1px solid #BBB;
-  padding: 0;
-  margin: 0;
-  position: relative;
-  -webkit-border-radius: 4px;
-  -moz-border-radius: 4px;
-  border-radius: 4px;
-  -moz-background-clip: padding;
-  -webkit-background-clip: padding-box;
-  background-clip: padding-box;
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-  width: 200px;
-  height: 83px;
-}
-#conversejs .chat-textarea {
-  box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  border: 0;
-  width: 100%;
-  padding: 3px;
-  border-bottom-left-radius: 4px;
-  border-bottom-right-radius: 4px;
-  resize: none;
-  height: 59px;
-}
-#conversejs .chatroom .chat-textarea {
-  border-bottom-right-radius: 0;
-}
-#conversejs ul.chat-toolbar {
-  font-size: 14px;
-  margin: 0;
-  padding: 0 5px 0 0;
-  height: 20px;
-  display: block;
-}
-#conversejs .chat-toolbar .toggle-participants,
-#conversejs .chat-toolbar .toggle-clear,
-#conversejs .chat-toolbar .toggle-otr {
-  float: right;
-}
-#conversejs .chat-toolbar a {
-  color: #4f4f4f;
-}
-#conversejs .chat-toolbar ul li a:hover {
-  color: #8f2831;
-}
-#conversejs .chat-toolbar ul {
-  display: none;
-  font-size: 12px;
-  position: absolute;
-  bottom: 100%;
-  margin-bottom: 1px;
-  right: 0;
-  background: #fff;
-  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.4);
-}
-#conversejs .chat-toolbar ul li {
-  position: relative;
-  list-style: none;
-  cursor: pointer;
-}
-#conversejs .chat-toolbar .toggle-smiley {
-  padding-left: 5px;
-}
-#conversejs .chat-toolbar .toggle-smiley ul li {
-  font-size: 14px;
-  padding: 5px;
-  z-index: 98;
-}
-#conversejs .chat-toolbar .toggle-otr ul li {
-  background-color: white;
-  display: block;
-  z-index: 99;
-}
-#conversejs .chat-toolbar ul li:hover {
-  background-color: #eee;
-}
-#conversejs .chat-toolbar .toggle-otr ul li a {
-  transition: background-color 0.2s ease-in-out;
-  -webkit-transition: background-color 0.2s ease-in-out;
-  -moz-transition: background-color 0.2s ease-in-out;
-  display: block;
-  padding: 1px;
-  text-decoration: none;
-}
-#conversejs .chat-toolbar-text {
-  font-size: 12px;
-  padding-right: 3px;
-}
-#conversejs .unencrypted a,
-#conversejs .unencrypted {
-  color: #8f2831;
-}
-#conversejs .unverified a,
-#conversejs .unverified {
-  color: #cf5300;
-}
-#conversejs .private a,
-#conversejs .private {
-  color: #4b7003;
-}
-#conversejs ul.chat-toolbar li {
-  display: inline-block;
-  list-style: none;
-  padding: 0 3px 0 3px;
-  cursor: pointer;
-  margin-top: 1px;
-}
-#conversejs ul.chat-toolbar li:hover {
-  cursor: pointer;
-}
-#conversejs form#set-custom-xmpp-status {
-  float: left;
-  padding: 0;
-}
-#conversejs .chat-textarea-chatbox-selected {
-  border: 1px solid #578308;
-  margin: 0;
-}
-#conversejs .chat-textarea-chatroom-selected {
-  border: 2px solid #2D617A;
-  margin: 0;
-}
-#conversejs #set-custom-xmpp-status button {
-  padding: 1px 2px 1px 1px;
-}
-#conversejs #controlbox {
-  display: none;
-}
-#conversejs #controlbox div.xmpp-status {
-  display: inline;
-}
-/* status dropdown styles */
-#conversejs .chatbox dl.dropdown {
-  margin: 0.5em;
-  background-color: #f0f0f0;
-}
-#conversejs .chatbox .dropdown dd,
-#conversejs .dropdown dt,
-#conversejs .dropdown ul {
-  margin: 0;
-  padding: 0;
-}
-#conversejs .chatbox .dropdown dd {
-  position: relative;
-}
-input.custom-xmpp-status {
-  width: 124px;
-}
-#conversejs form.add-xmpp-contact {
-  background: none;
-  padding: 5px;
-}
-#conversejs form.add-xmpp-contact input {
-  width: 108px;
-}
-#conversejs .chatbox .dropdown dt a span {
-  cursor: pointer;
-  display: block;
-  padding: 4px 7px 0 5px;
-  color: #4f4f4f;
-}
-#conversejs .chatbox .dropdown dd ul {
-  padding: 5px 0 5px 0;
-  list-style: none;
-  position: absolute;
-  left: 0;
-  top: 0;
-  border: 1px solid #ddd;
-  border-top: 0;
-  width: 99%;
-  z-index: 21;
-  background-color: #f0f0f0;
-}
-#conversejs .chatbox .dropdown li {
-  list-style: none;
-  padding-left: 0;
-}
-#conversejs .chatbox .dropdown a {
-  height: 22px;
-  width: 148px;
-  display: inline-block;
-  line-height: 24px;
-}
-#conversejs .chatbox .dropdown dd ul li:hover {
-  background-color: #bed6e5;
-}
-#conversejs .chatbox .dropdown dd.search-xmpp ul li:hover {
-  background-color: #bed6e5;
-}
-#conversejs .xmpp-status-menu {
-  text-align: left;
-}
-#conversejs .xmpp-status-menu li a {
-  width: 100%;
-}
-#conversejs .xmpp-status-menu li a.logout,
-#conversejs .xmpp-status-menu li a.logout span {
-  color: darkred;
-}
-#conversejs .xmpp-status-menu li a span {
-  padding: 0 5px 0 5px;
-  color: #4f4f4f;
-}
-#conversejs .set-xmpp-status .dropdown dd ul {
-  z-index: 22;
-}
-#conversejs .minimized-chats-flyout,
-#conversejs .box-flyout {
-  border-radius: 4px;
-  bottom: 6px;
-  box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
-  display: block;
-  height: 400px;
-  position: absolute;
-}
-#conversejs .minimized-chats-flyout {
-  border-radius: 4px;
-  bottom: 25px;
-  box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
-  display: block;
-  position: absolute;
-  height: auto;
-  width: 130px;
-}
-#conversejs .minimized-chats-flyout.minimized {
-  height: auto;
-}
-#conversejs .minimized-chats-flyout .chat-head-chatroom,
-#conversejs .minimized-chats-flyout .chat-head {
-  border-radius: 4px;
-  width: 130px;
-  height: 25px;
-  margin-bottom: 1px;
-}
-#conversejs .chatbox .box-flyout {
-  width: 200px;
-}
-#conversejs .chatroom .box-flyout {
-  width: 300px;
-}
-#conversejs .dragresize {
-  position: absolute;
-  width: 200px;
-  height: 5px;
-  background: transparent;
-  border: 0;
-  top: 0;
-  margin-left: 0;
-  cursor: n-resize;
-  z-index: 20;
-}
+    -moz-transform: rotate(359deg);
+    -ms-transform: rotate(359deg);
+    -o-transform: rotate(359deg);
+    transform: rotate(359deg); } }
+  #conversejs .spinner:before {
+    font-size: 24px;
+    font-family: 'Converse-js' !important;
+    content: "\231b"; }
+  #conversejs .spinner {
+    -webkit-animation: spin 2s infinite linear;
+    -moz-animation: spin 2s infinite linear;
+    -o-animation: spin 2s infinite linear;
+    animation: spin 2s infinite linear;
+    display: block;
+    text-align: center;
+    margin: 5px; }
+  #conversejs .centered {
+    text-align: center;
+    display: block;
+    margin: 5em auto; }
+  #conversejs .hor_centered {
+    text-align: center;
+    display: block;
+    margin: 0 auto; }
+  #conversejs #minimized-chats .box-flyout {
+    position: absolute;
+    display: block;
+    height: auto;
+    bottom: 25px;
+    margin-left: 0; }
+  #conversejs #minimized-chats .box-flyout .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; }
+  #conversejs #minimized-chats,
+  #conversejs .toggle-controlbox {
+    float: right;
+    font-size: 90%;
+    border-top-right-radius: 2px;
+    border-top-left-radius: 2px;
+    background-color: #F4F4F4;
+    padding: 4px 8px;
+    margin-right: 5px;
+    color: #0a0a0a;
+    font-weight: bold;
+    height: 100%; }
+  #conversejs #minimized-chats {
+    width: 130px;
+    padding: 0;
+    display: none; }
+  #conversejs #toggle-minimized-chats {
+    position: relative;
+    padding: 4px 0 0 4px;
+    display: block;
+    width: 100%;
+    height: 100%;
+    color: #0f0f0f; }
+  #conversejs #toggle-minimized-chats .unread-message-count {
+    right: 5px;
+    bottom: 5px; }
+  #conversejs .toggle-controlbox,
+  #conversejs .toggle-minimized-chats {
+    float: right;
+    font-size: 85%;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+    background-color: #5390c8;
+    padding: 4px 8px;
+    margin-right: 5px;
+    color: white; }
+  #conversejs .chat-body {
+    background-color: white;
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
+    height: 289px;
+    height: -webkit-calc(100% - 40px);
+    height: calc(100% - 40px);
+    border-top: 0; }
+  #conversejs .chatroom .chat-area {
+    float: left;
+    height: 100%;
+    width: 200px; }
+  #conversejs .chatroom .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%; }
+  #conversejs .tt-highlight {
+    background-color: #00230F; }
+  #conversejs div.tt-suggestion p:hover .tt-highlight {
+    background-color: #00230F;
+    background: #27774A; }
+  #conversejs div.tt-suggestion p:hover {
+    background-color: #00230F; }
+  #conversejs div.tt-suggestion p {
+    color: white;
+    text-shadow: rgba(0, 0, 0, 0.51) 0 -1px 0;
+    cursor: pointer;
+    font-size: 11px; }
+  #conversejs .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; }
+  #conversejs .chatroom div.participants label {
+    font-style: italic; }
+  #conversejs .chatroom label {
+    margin-left: 2px;
+    font-size: 12px; }
+  #conversejs .chatroom .invited-contact {
+    margin: 0;
+    width: 99px;
+    border: 1px solid #999; }
+  #conversejs .chatroom .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; }
+  #conversejs .participants label {
+    margin-top: 5px;
+    display: block; }
+  #conversejs .participants ul.participant-list li {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: block;
+    font-size: 12px;
+    font-weight: bold;
+    padding: 0.5em 0 0 0.5em;
+    cursor: default; }
+  #conversejs ul.participant-list li.moderator {
+    color: #8f2831; }
+  #conversejs .chatroom .participant-list {
+    list-style: none; }
+  #conversejs .chat-blink {
+    background-color: #176679;
+    border-right: 1px solid #176679;
+    border-left: 1px solid #176679; }
+  #conversejs .chat-message span::selection,
+  #conversejs .chat-message::selection {
+    background-color: darkgrey; }
+  #conversejs .chat-content {
+    position: relative;
+    padding: 8px;
+    font-size: 13px;
+    color: #6C4C44;
+    overflow-y: auto;
+    border: 0;
+    background-color: #ffffff;
+    line-height: 1.3em;
+    box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    height: 206px;
+    height: calc(100% - 84px); }
+  #conversejs .chat-info {
+    color: #6C4C44; }
+  #conversejs .chat-error {
+    color: #8f2831; }
+  #conversejs .chat-message-room,
+  #conversejs .chat-message-them,
+  #conversejs .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; }
+  #conversejs .chat-message-content {
+    word-wrap: break-word; }
+  #conversejs .chat-message-them {
+    color: #8f2831; }
+  #conversejs .chat-message-me {
+    color: #436F64; }
+  #conversejs .chat-message-room {
+    color: #4B7003; }
+  #conversejs .chat-event,
+  #conversejs .chat-date,
+  #conversejs .chat-info {
+    color: #808080; }
+  #conversejs li.chat-info {
+    padding-left: 10px; }
+  #conversejs .chat-date {
+    display: inline-block;
+    padding-top: 10px; }
+  #conversejs p.not-implemented {
+    margin-top: 3em;
+    margin-left: 0.3em;
+    color: #808080; }
+  #conversejs div.mentioned {
+    font-weight: bold; }
+  #conversejs div.delayed .chat-message-them {
+    color: #FB5D50; }
+  #conversejs div.delayed .chat-message-me {
+    color: #7EABBB; }
+  #conversejs input.error {
+    border: 1px solid red; }
+  #conversejs .error {
+    color: red; }
+  #conversejs #converse-register .provider-title {
+    font-size: 115%; }
+  #conversejs #converse-register .provider-score {
+    width: 178px;
+    margin-bottom: 8px; }
+  #conversejs #converse-register .form-help .url {
+    font-weight: bold;
+    color: #436F64; }
+  #conversejs .reg-feedback {
+    font-size: 85%; }
+  #conversejs .reg-feedback,
+  #conversejs #converse-login .conn-feedback {
+    width: 100%;
+    text-align: center;
+    display: block; }
+  #conversejs .chat-message-error {
+    color: #76797C;
+    font-size: 90%;
+    font-weight: normal; }
+  #conversejs a.restore-chat,
+  #conversejs .chat-title {
+    padding: 1px 0 1px 5px;
+    color: white;
+    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; }
+  #conversejs a.restore-chat:visited {
+    color: white; }
+  #conversejs .chat-title a {
+    color: white;
+    width: 100%;
+    text-overflow: ellipsis;
+    white-space: nowrap; }
+  #conversejs .chat-head {
+    color: #ffffff;
+    font-size: 100%;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+    padding: 2px 2px 2px 4px;
+    margin: 0; }
+  #conversejs .chat-head .avatar {
+    float: left; }
+  #conversejs .chat-head-chatbox,
+  #conversejs .chat-head-chatroom {
+    height: 40px;
+    position: relative;
+    padding: 3px; }
+  #conversejs .chat-head-chatroom {
+    background-color: #0F592F; }
+  #conversejs .chat-head-chatbox {
+    background-color: #436F64; }
+  #conversejs p.user-custom-message,
+  #conversejs p.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; }
+  #conversejs .activated {
+    display: block !important; }
+  #conversejs a.subscribe-to-user {
+    padding-left: 2em;
+    font-weight: bold; }
+  #conversejs dl.add-converse-contact {
+    margin: 0 0 0 0.5em; }
+  #conversejs .fancy-dropdown {
+    border: 1px solid #F1DCD6;
+    height: 22px;
+    text-align: left; }
+  #conversejs .fancy-dropdown a.choose-xmpp-status {
+    width: 155px; }
+  #conversejs .fancy-dropdown a.choose-xmpp-status,
+  #conversejs .fancy-dropdown a.toggle-xmpp-contact-form {
+    text-shadow: 0 1px 0 #ffffff;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: inline; }
+  #conversejs .fancy-dropdown a.toggle-xmpp-contact-form span {
+    float: left; }
+  #conversejs .choose-xmpp-status span {
+    padding-right: 5px;
+    padding-left: 5px;
+    float: left; }
+  #conversejs #fancy-xmpp-status-select a.change-xmpp-status-message {
+    float: right;
+    clear: right;
+    height: 22px;
+    width: 12px;
+    margin: 0px 5px 0 0;
+    color: #436F64; }
+  #conversejs ul#found-users {
+    padding: 10px 0 5px 5px;
+    border: 0; }
+  #conversejs form.search-xmpp-contact {
+    margin: 0;
+    padding-left: 5px;
+    padding: 0 0 5px 5px; }
+  #conversejs form.search-xmpp-contact input {
+    width: 8em; }
+  #conversejs .controlbox-head {
+    margin: 0;
+    color: #FFF;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+    height: 40px;
+    clear: right;
+    background-color: #436F64;
+    padding: 3px 0 0 0; }
+  #conversejs .unread-message-count,
+  #conversejs .chat-head-message-count {
+    font-weight: bold;
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.35, #f6f6f6), color-stop(1, #808080));
+    background: -moz-linear-gradient(center top, #ffff00 5%, #f6f6f6 100%);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='yellow', endColorstr='#f6f6f6');
+    border: 1px solid;
+    text-shadow: 1px 1px 0 #FAFAFA;
+    color: #681F2C;
+    border-radius: 5px;
+    padding: 2px 4px;
+    font-size: 15px;
+    text-align: center;
+    position: absolute;
+    right: 22px;
+    bottom: 1px; }
+  #conversejs a.configure-chatroom-button,
+  #conversejs a.toggle-chatbox-button,
+  #conversejs a.close-chatbox-button {
+    font-size: 10px;
+    padding: 3px 3px 2px 3px;
+    margin-right: 3px;
+    cursor: pointer;
+    border-radius: 6px;
+    border: 1px solid #888;
+    display: inline-block;
+    color: white;
+    text-decoration: none;
+    float: right; }
+  #conversejs a.configure-chatroom-button:active,
+  #conversejs a.toggle-chatbox-button:active,
+  #conversejs a.close-chatbox-button:active {
+    position: relative;
+    top: 1px; }
+  #conversejs .chatroom-form-container {
+    height: 100%;
+    color: #6C4C44;
+    overflow-y: auto;
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px; }
+  #conversejs .chat-body p {
+    font-size: 14px;
+    color: #6C4C44;
+    padding: 5px;
+    margin: 0; }
+  #conversejs .chatroom-form legend {
+    font-size: 14px;
+    font-weight: bold;
+    margin: 5px 0; }
+  #conversejs .chatroom-form label {
+    height: 30px;
+    font-weight: bold;
+    display: block;
+    clear: both; }
+  #conversejs .chatroom-form label input,
+  #conversejs .chatroom-form label select {
+    float: right; }
+  #conversejs #converse-roster dd.odd {
+    background-color: #DCEAC5;
+    /* Make this difference */ }
+  #conversejs #converse-roster dd.current-xmpp-contact span {
+    font-size: 16px;
+    float: left;
+    color: #436F64; }
+  #conversejs .requesting-xmpp-contact .request-actions {
+    margin-left: 0.5em;
+    float: right; }
+  #conversejs #converse-roster span.req-contact-name {
+    width: 65%; }
+  #conversejs #converse-roster span.pending-contact-name,
+  #conversejs #converse-roster a.open-chat {
+    width: 80%; }
+  #conversejs #converse-roster {
+    text-align: left;
+    width: 100%;
+    position: relative;
+    margin: 0.5em 0 0 0;
+    height: 194px;
+    height: calc(100% - 68px);
+    overflow: hidden; }
+  #conversejs #converse-roster .roster-filter-group {
+    display: table; }
+  #conversejs #converse-roster .filter-type {
+    display: table-cell;
+    height: 24px;
+    padding: 0;
+    margin: 0 0 0.5em -2px;
+    display: inline-block;
+    width: 85px; }
+  #conversejs #converse-roster .roster-filter {
+    display: table-cell;
+    padding: 2px;
+    margin: 0 0 0.5em 6px;
+    width: 104px;
+    height: 24px;
+    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAABNSURBVHjaXI7BDcAwCAMvyQjMyQ6dAbZiKfqoUK34g2zJh1dENIC7M8pMAPYdzAVY3d0ajNz9aypS/b5R6o+ZPdqoKgCq6h80KH3xDgBqNR97p8oAGQAAAABJRU5ErkJggg==) no-repeat right -20px center;
+    border: 1px solid #999;
+    display: inline-block; }
+  #conversejs #converse-roster .roster-filter.x {
+    background-position: right 3px center; }
+  #conversejs #converse-roster .roster-filter.onX {
+    cursor: pointer; }
+  #conversejs #converse-roster .roster-contacts {
+    margin: 0;
+    overflow-y: auto;
+    overflow-x: hidden;
+    max-height: 195px;
+    max-height: calc(100% - 26px);
+    padding-bottom: 15px; }
+  #conversejs #converse-roster .group-toggle {
+    color: #6C4C44;
+    display: block;
+    width: 100%; }
+  #conversejs dd.available-chatroom {
+    overflow-x: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: inline-block; }
+  #conversejs dd.available-chatroom a.open-room {
+    width: 148px; }
+  #conversejs #available-chatrooms {
+    text-align: left; }
+  #conversejs #available-chatrooms dt,
+  #conversejs #converse-roster dt {
+    font-weight: normal;
+    color: #6C4C44;
+    border: none;
+    padding: 5px;
+    text-shadow: 0 1px 0 #FAFAFA; }
+  #conversejs #converse-roster dt {
+    display: none; }
+  #conversejs .room-info {
+    font-size: 11px;
+    font-style: normal;
+    font-weight: normal; }
+  #conversejs li.room-info {
+    display: block;
+    margin-left: 5px; }
+  #conversejs div.room-info {
+    clear: left; }
+  #conversejs p.room-info {
+    margin: 0;
+    padding: 0;
+    display: block;
+    white-space: normal; }
+  #conversejs a.room-info {
+    width: 22px;
+    height: 22px;
+    float: right;
+    display: none;
+    clear: right; }
+  #conversejs a.open-room {
+    float: left;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow-x: hidden; }
+  #conversejs dd.available-chatroom:hover a.room-info {
+    display: inline-block;
+    margin-top: 3px;
+    font-size: 15px; }
+  #conversejs dd.available-chatroom,
+  #conversejs #converse-roster dd {
+    font-weight: bold;
+    border: none;
+    display: block;
+    padding: 4px 2px 0 4px;
+    color: #6C4C44;
+    text-shadow: 0 1px 0 #FAFAFA;
+    clear: both;
+    height: 24px;
+    overflow-y: hidden; }
+  #conversejs #converse-roster dd {
+    line-height: 16px; }
+  #conversejs .roster-group:hover,
+  #conversejs dd.available-chatroom:hover,
+  #conversejs #converse-roster dd:hover {
+    background-color: #E3C9C1; }
+  #conversejs #converse-roster dd a,
+  #conversejs #converse-roster dd span {
+    text-shadow: 0 1px 0 #FAFAFA;
+    display: inline-block;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    margin-left: 3px; }
+  #conversejs #converse-roster dd span {
+    padding: 0 5px 0 0;
+    margin-left: 3px; }
+  #conversejs #converse-roster dd a.decline-xmpp-request {
+    margin-left: 5px; }
+  #conversejs #converse-roster dd a.remove-xmpp-contact {
+    float: right;
+    width: 22px;
+    margin: 0;
+    display: none;
+    color: #6C4C44; }
+  #conversejs #converse-roster dd:hover a.remove-xmpp-contact {
+    display: inline-block; }
+  #conversejs .chatbox,
+  #conversejs .chatroom {
+    height: 25px;
+    float: right;
+    margin-right: 15px;
+    display: block; }
+  #conversejs .chatbox {
+    width: 200px; }
+  #conversejs .chatroom {
+    width: 300px; }
+  #conversejs .chatroom-form,
+  #conversejs .controlbox-pane {
+    text-align: center;
+    background-color: white;
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+    border: 0;
+    font-size: 14px;
+    height: 289px;
+    height: -webkit-calc(100% - 40px);
+    height: calc(100% - 40px);
+    overflow-y: auto;
+    padding: 5px 0;
+    position: absolute;
+    width: 100%; }
+  #conversejs .controlbox-pane dd {
+    margin-left: 0;
+    margin-bottom: 0; }
+  #conversejs .controlbox-pane dd.odd {
+    background-color: #DCEAC5; }
+  #conversejs #converse-register .title {
+    font-weight: bold; }
+  #conversejs #converse-register .info {
+    font-style: italic;
+    color: green;
+    font-size: 85%;
+    margin: 5px 0; }
+  #conversejs .form-help,
+  #conversejs #converse-register .instructions {
+    color: gray;
+    font-size: 85%; }
+  #conversejs .chatroom-form .instructions {
+    color: gray;
+    font-size: 95%; }
+  #conversejs .form-help:hover,
+  #conversejs #converse-register .instructions:hover {
+    color: #6C4C44; }
+  #conversejs .form-help {
+    padding-top: 5px; }
+  #conversejs #converse-register .form-errors {
+    color: red;
+    display: none; }
+  #conversejs #converse-register,
+  #conversejs #converse-login {
+    background: white;
+    padding: 1em 0.5em; }
+  #conversejs #converse-register input,
+  #conversejs #converse-login input {
+    width: 178px;
+    height: 30px; }
+  #conversejs #converse-register .input-group {
+    display: table;
+    margin: auto;
+    width: 178px; }
+  #conversejs #converse-register .input-group span,
+  #conversejs #converse-register .input-group input[name=username] {
+    display: table-cell; }
+  #conversejs #converse-register .input-group input[name=username] {
+    width: 100%; }
+  #conversejs #converse-register .cancel,
+  #conversejs .chatroom-form .cancel-submit,
+  #conversejs #converse-register .cancel-submit {
+    color: #681F2C; }
+  #conversejs .chatroom-form .save-submit,
+  #conversejs #converse-register .save-submit {
+    color: #436F64; }
+  #conversejs .chatroom-form .save-submit,
+  #conversejs .chatroom-form .cancel-submit,
+  #conversejs #converse-register .cancel-submit,
+  #conversejs #converse-register .save-submit {
+    width: 45%;
+    margin: 5px 3px 5px 3px; }
+  #conversejs .chatroom-form input {
+    width: 80%;
+    padding: 5px;
+    text-align: center; }
+  #conversejs .chatroom-form label,
+  #conversejs .controlbox-pane label,
+  #conversejs #converse-register label,
+  #conversejs #converse-login label {
+    height: auto;
+    font-size: 14px;
+    margin-top: 2px;
+    font-weight: bold; }
+  #conversejs #converse-register .login-submit,
+  #conversejs #converse-login .login-submit,
+  #conversejs #converse-register .submit,
+  #conversejs #converse-login .submit {
+    margin-top: 1em;
+    height: 30px; }
+  #conversejs form.set-xmpp-status {
+    background: none;
+    margin: none;
+    padding: none; }
+  #conversejs form.add-chatroom {
+    background: none;
+    padding: 8px; }
+  #conversejs form.add-chatroom input[type=button],
+  #conversejs form.add-chatroom input[type=submit],
+  #conversejs form.add-chatroom input[type=text] {
+    margin: 3px 0;
+    width: 100%; }
+  #conversejs form.add-chatroom input[type=submit] {
+    color: #436F64; }
+  #conversejs select#select-xmpp-status {
+    float: right;
+    margin-right: 0.5em; }
+  #conversejs .chat-head #controlbox-tabs {
+    text-align: center;
+    display: inline;
+    overflow: hidden;
+    font-size: 12px;
+    list-style-type: none; }
+  #conversejs .chat-head #controlbox-tabs li {
+    float: left;
+    list-style: none;
+    padding-left: 0;
+    text-shadow: white 0 1px 0;
+    width: 38%; }
+  #conversejs ul#controlbox-tabs li a {
+    display: block;
+    font-size: 12px;
+    height: 39px;
+    line-height: 39px;
+    margin: 0;
+    text-align: center;
+    text-decoration: none;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+    color: #888; }
+  #conversejs .chat-head #controlbox-tabs li a:hover {
+    color: #6C4C44; }
+  #conversejs .chat-head #controlbox-tabs li a {
+    background-color: white;
+    box-shadow: inset 0 4px 12px rgba(0, 0, 0, 0.3);
+    border-bottom: 1px solid #CCC; }
+  #conversejs ul#controlbox-tabs a.current,
+  #conversejs ul#controlbox-tabs a.current:hover {
+    box-shadow: none;
+    border-bottom: 0;
+    height: 40px;
+    cursor: default;
+    color: #6C4C44; }
+  #conversejs div#chatrooms {
+    overflow-y: auto; }
+  #conversejs form.sendXMPPMessage {
+    background: white;
+    border: 0;
+    border-top: 1px solid #BBB;
+    padding: 0;
+    margin: 0;
+    position: relative;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+    -moz-background-clip: padding;
+    -webkit-background-clip: padding-box;
+    background-clip: padding-box;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    width: 200px;
+    height: 83px; }
+  #conversejs .chat-textarea {
+    box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    border: 0;
+    width: 100%;
+    padding: 3px;
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+    resize: none;
+    height: 59px; }
+  #conversejs .chatroom .chat-textarea {
+    border-bottom-right-radius: 0; }
+  #conversejs ul.chat-toolbar {
+    font-size: 14px;
+    margin: 0;
+    padding: 0 5px 0 0;
+    height: 20px;
+    display: block; }
+  #conversejs .chat-toolbar .toggle-participants,
+  #conversejs .chat-toolbar .toggle-clear,
+  #conversejs .chat-toolbar .toggle-otr {
+    float: right; }
+  #conversejs .chat-toolbar a {
+    color: #6C4C44; }
+  #conversejs .chat-toolbar ul {
+    display: none;
+    font-size: 12px;
+    position: absolute;
+    bottom: 100%;
+    margin: 0 0 1px 0;
+    right: 0;
+    background: #fff;
+    box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.4); }
+  #conversejs .chat-toolbar ul li {
+    position: relative;
+    list-style: none;
+    cursor: pointer; }
+  #conversejs .chat-toolbar ul li a:hover {
+    color: #8f2831; }
+  #conversejs .chat-toolbar .toggle-smiley {
+    padding-left: 5px; }
+  #conversejs .chat-toolbar .toggle-smiley ul li {
+    font-size: 14px;
+    padding: 5px;
+    z-index: 98; }
+  #conversejs .chat-toolbar .toggle-otr ul li {
+    background-color: white;
+    display: block;
+    z-index: 99; }
+  #conversejs .chat-toolbar ul li:hover {
+    background-color: #E3C9C1; }
+  #conversejs .chat-toolbar .toggle-otr ul li a {
+    transition: background-color 0.2s ease-in-out;
+    -webkit-transition: background-color 0.2s ease-in-out;
+    -moz-transition: background-color 0.2s ease-in-out;
+    display: block;
+    padding: 1px;
+    text-decoration: none; }
+  #conversejs .chat-toolbar-text {
+    font-size: 12px;
+    padding-right: 3px; }
+  #conversejs .unencrypted a,
+  #conversejs .unencrypted {
+    color: #8f2831; }
+  #conversejs .unverified a,
+  #conversejs .unverified {
+    color: #cf5300; }
+  #conversejs .private a,
+  #conversejs .private {
+    color: #4b7003; }
+  #conversejs ul.chat-toolbar li {
+    display: inline-block;
+    list-style: none;
+    padding: 0 3px 0 3px;
+    cursor: pointer;
+    margin-top: 1px; }
+  #conversejs ul.chat-toolbar li:hover {
+    cursor: pointer; }
+  #conversejs form#set-custom-xmpp-status {
+    float: left;
+    padding: 0; }
+  #conversejs .chat-textarea-chatbox-selected {
+    border: 1px solid #578308;
+    margin: 0; }
+  #conversejs .chat-textarea-chatroom-selected {
+    border: 2px solid #436F64;
+    margin: 0; }
+  #conversejs #set-custom-xmpp-status button {
+    padding: 1px 2px 1px 1px; }
+  #conversejs #controlbox {
+    display: none; }
+  #conversejs #controlbox div.xmpp-status {
+    display: inline; }
+  #conversejs .chatbox dl.dropdown {
+    margin: 0.5em;
+    background-color: #F1E2DD; }
+  #conversejs .chatbox .dropdown dd,
+  #conversejs .dropdown dt,
+  #conversejs .dropdown ul {
+    margin: 0;
+    padding: 0; }
+  #conversejs .chatbox .dropdown dd {
+    position: relative; }
+  #conversejs input.custom-xmpp-status {
+    width: 124px; }
+  #conversejs form.add-xmpp-contact {
+    background: none;
+    padding: 5px; }
+  #conversejs form.add-xmpp-contact input {
+    margin: 0 0 1rem; }
+  #conversejs form.add-xmpp-contact button {
+    width: 100%; }
+  #conversejs .chatbox .dropdown dt a span {
+    cursor: pointer;
+    display: block;
+    padding: 4px 7px 0 5px; }
+  #conversejs .chatbox .dropdown dd ul {
+    padding: 5px 0 5px 0;
+    list-style: none;
+    position: absolute;
+    left: 0;
+    top: 0;
+    border: 1px solid #F1DCD6;
+    border-top: 0;
+    width: 99%;
+    z-index: 21;
+    background-color: #F1E2DD; }
+  #conversejs .chatbox .dropdown li {
+    list-style: none;
+    padding-left: 0; }
+  #conversejs .chatbox .dropdown a {
+    height: 22px;
+    width: 148px;
+    display: inline-block;
+    line-height: 24px; }
+  #conversejs .chatbox .dropdown dd ul li:hover {
+    background-color: #E3C9C1; }
+  #conversejs .chatbox .dropdown dd.search-xmpp ul li:hover {
+    background-color: #F1E2DD; }
+  #conversejs .xmpp-status-menu {
+    text-align: left; }
+  #conversejs .xmpp-status-menu li a {
+    width: 100%; }
+  #conversejs .xmpp-status-menu li a.logout,
+  #conversejs .xmpp-status-menu li a.logout span {
+    color: #681F2C; }
+  #conversejs .xmpp-status-menu li a span {
+    padding: 0 5px 0 5px; }
+  #conversejs .set-xmpp-status .dropdown dd ul {
+    z-index: 22; }
+  #conversejs .minimized-chats-flyout,
+  #conversejs .box-flyout {
+    border-radius: 4px;
+    bottom: 6px;
+    box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
+    display: block;
+    height: 400px;
+    position: absolute; }
+  #conversejs .minimized-chats-flyout {
+    border-radius: 4px;
+    bottom: 25px;
+    box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
+    display: block;
+    position: absolute;
+    height: auto;
+    width: 130px; }
+  #conversejs .minimized-chats-flyout.minimized {
+    height: auto; }
+  #conversejs .minimized-chats-flyout .chat-head-chatroom,
+  #conversejs .minimized-chats-flyout .chat-head {
+    border-radius: 4px;
+    width: 130px;
+    height: 25px;
+    margin-bottom: 1px; }
+  #conversejs .chatbox .box-flyout {
+    width: 200px; }
+  #conversejs .chatroom .box-flyout {
+    width: 300px; }
+  #conversejs .dragresize {
+    position: absolute;
+    width: 200px;
+    height: 5px;
+    background: transparent;
+    border: 0;
+    top: 0;
+    margin-left: 0;
+    cursor: n-resize;
+    z-index: 20; }
diff --git a/css/theme.css b/css/theme.css
index af8c60a4a..474058c87 100644
--- a/css/theme.css
+++ b/css/theme.css
@@ -3,7 +3,7 @@ body {
   height: 100%;
   font-family: "Lora", "Helvetica Neue", Helvetica, Arial, sans-serif;
   color: #ffffff;
-  background-color: #000000;
+  background-color: #211018;
 }
 html {
   width: 100%;
@@ -34,7 +34,7 @@ p {
   }
 }
 a {
-  color: #66ccff;
+  color: #82B397;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
@@ -52,7 +52,7 @@ a:focus {
   border-bottom: 1px solid rgba(255, 255, 255, 0.3);
   text-transform: uppercase;
   font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
-  background-color: #000000;
+  background-color: #211018;
 }
 .navbar-brand {
   font-weight: 700;
@@ -95,7 +95,7 @@ a:focus {
   }
   .top-nav-collapse {
     padding: 0;
-    background-color: #000000;
+    background-color: #211018;
   }
   .navbar-custom.top-nav-collapse {
     border-bottom: 1px solid rgba(255, 255, 255, 0.3);
@@ -113,17 +113,17 @@ a:focus {
 }
 .intro {
   background: url(images/header.jpg) no-repeat bottom center scroll;
-  background-color: #000;
+  background-color: #211018;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   background-size: cover;
   -o-background-size: cover;
 }
 .features-section {
-  background: url('images/bgtr.svg') top right no-repeat, url('images/bgbl.svg') bottom left no-repeat, url('images/bgbl.svg') bottom left no-repeat, url('images/overlay.png'), linear-gradient(45deg, #b39c68, #a56365, #412e4c);
+  background: url('images/bgtr.svg') top right no-repeat, url('images/bgbl.svg') bottom left no-repeat, url('images/bgbl.svg') bottom left no-repeat, url('images/overlay.png'), linear-gradient(45deg, #85505f, #384955, #655361);
 }
 .features-section a {
-  color: #66ccff;
+  color: #82B397;
 }
 .outro {
   background: url('images/bgtr.svg') top right no-repeat, url('images/bgbl.svg') bottom left no-repeat, url('images/overlay.png'), linear-gradient(45deg, #384955, #655361, #85505f);
@@ -186,6 +186,7 @@ a:focus {
   -webkit-animation-timing-function: linear;
   -moz-animation-timing-function: linear;
 }
+/*
 @-webkit-keyframes pulse {
   0 {
     -webkit-transform: scale(1);
@@ -214,6 +215,7 @@ a:focus {
     transform: scale(1);
   }
 }
+*/
 .content-section {
   padding-top: 100px;
 }
@@ -221,7 +223,7 @@ a:focus {
   width: 100%;
   padding: 50px 0;
   color: #ffffff;
-  background-color: #000000;
+  background-color: #211018;
 }
 .donate-section p.bitcoin-header {
   margin: 0 0 5px;
@@ -244,16 +246,16 @@ a:focus {
   transition: all 0.3s ease-in-out;
 }
 .btn-default {
-  border: 1px solid #66ccff;
-  color: #66ccff;
+  border: 1px solid #82B397;
+  color: #82B397;
   background-color: transparent;
 }
 .btn-default:hover,
 .btn-default:focus {
-  border: 1px solid #66ccff;
+  border: 1px solid #82B397;
   outline: none;
-  color: #000000;
-  background-color: #66ccff;
+  color: #211018;
+  background-color: #82B397;
 }
 .btn-huge {
   padding: 25px;
diff --git a/sass/converse.scss b/sass/converse.scss
index 75d348e89..4a4c8adab 100644
--- a/sass/converse.scss
+++ b/sass/converse.scss
@@ -8,7 +8,6 @@
 
 @import "bourbon/bourbon";
 
-
 @font-face {
   font-family: 'Converse-js';
   src: url('../fonticons/fonts/icomoon.eot?-mnoxh0');
@@ -34,7 +33,64 @@
 }
 
 #conversejs {
-  color: #4f4f4f;
+  @import "components/skeleton-sass/skeleton";
+
+    $link-color: #436F64;
+    $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-height: 40px;
+    $save-button-color: #436F64;
+
+  a, a:visited {
+    text-decoration: none;
+    color: $link-color;
+    text-shadow: none;
+  }
+
+  div   { box-sizing: border-box; }
+  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;
+  }
+
+  strong {
+    font-weight: 700;
+  }
+
+  ol, ul {
+    list-style: none;
+  }
+
+  li {
+    height: 10px;
+  }
+
+  ul, ol, dl {
+    font: inherit;
+    margin: 0 0 15px 0;
+  }
+
+
+  color: $text-color;
   font-size: 14px;
   bottom: 0;
   direction: ltr;
@@ -74,68 +130,67 @@
     -moz-osx-font-smoothing: grayscale;
   }
 
-  .icon-address-book:before 			{ content: "\270f"; }
-  .icon-angry:before 			        { content: "\e03f"; }
+  .icon-address-book:before 		  { content: "\270f"; }
+  .icon-angry:before 			      { content: "\e03f"; }
   .icon-attachment:before 			  { content: "\e032"; }
-  .icon-away:before 			        { content: "\25fb"; }
+  .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-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-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-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-cogs:before 			      { content: "\e022"; }
   .icon-confused:before 		      { content: "\2368"; }
-  .icon-cool:before 			        { content: "\e040"; }
+  .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-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-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-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-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-offline:before 			      { content: "\e002"; }
+  .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-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-radio-unchecked:before 	      { content: "\2b25"; }
   .icon-remove:before 			      { content: "\e02d"; }
-  .icon-room-info:before 			    { content: "\e059"; }
+  .icon-room-info:before 			  { content: "\e059"; }
   .icon-sad:before 			          { content: "\2639"; }
   .icon-search:before 			      { content: "\e021"; }
   .icon-shocked:before 			      { content: "\2364"; }
@@ -143,29 +198,30 @@
   .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-strikethrough:before 		  { content: "\e050"; }
+  .icon-thumbs-up:before 			  { content: "\261d"; }
   .icon-tongue:before 			      { content: "\e038"; }
-  .icon-unavailable:before,
-  .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-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-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-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-wink:before 			      { content: "\e03a"; }
+  .icon-wondering:before 			  { content: "\2369"; }
   .icon-wrench:before 			      { content: "\e024"; }
   .icon-xa:before,
+  .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"; }
+  .icon-zoom-out:before 			  { content: "\e02a"; }
 
   .no-text-select {
       -webkit-touch-callout: none;
@@ -176,45 +232,6 @@
       user-select: none;
   }
 
-
-  div   { box-sizing: border-box; }
-  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;
-  }
-
-  strong {
-    font-weight: 700;
-  }
-
-  ol, ul {
-    list-style: none;
-  }
-
-  li {
-    height: 10px;
-  }
-
-  a {
-    text-decoration: none;
-    color: #2D617A;
-    text-shadow: none;
-  }
-
-  ul, ol, dl {
-    font: inherit;
-    margin: 0 0 15px 0;
-  }
-
   .emoticon {
     font-size: 14px;
   }
@@ -330,29 +347,12 @@
     color: white;
   }
 
-  .chat-head {
-    color: #ffffff;
-    font-size: 100%;
-    border-top-right-radius: 4px;
-    border-top-left-radius: 4px;
-    padding: 2px 2px 2px 4px;
-    margin: 0;
-  }
-
-  .chat-head-chatbox {
-    background-color: #2D617A;
-  }
-
-  .chat-head-chatroom {
-    background-color: #0F592F;
-  }
-
   .chat-body {
     background-color: white;
     border-bottom-right-radius: 4px;
     border-bottom-left-radius: 4px;
     height: 289px;
-    height: calc(100% - 35px);
+    @include calc(height, '100% - #{$chat-head-height}');
     border-top: 0;
   }
 
@@ -461,9 +461,9 @@
 
   .chat-content {
     position: relative;
-    padding: 4px;
+    padding: 8px;
     font-size: 13px;
-    color: #4f4f4f;
+    color: $text-color;
     overflow-y: auto;
     border: 0;
     background-color: #ffffff;
@@ -475,7 +475,7 @@
   }
 
   .chat-info {
-    color: #666666;
+    color: $text-color;
   }
 
   .chat-error {
@@ -504,7 +504,7 @@
   }
 
   .chat-message-me {
-    color: #2D617A;
+    color: $link-color;
   }
 
   .chat-message-room {
@@ -563,7 +563,7 @@
 
   #converse-register .form-help .url {
     font-weight: bold;
-    color: #2D617A;
+    color: $link-color;
   }
 
   .reg-feedback {
@@ -583,14 +583,10 @@
     font-weight: normal;
   }
 
-  .chat-head .avatar {
-    float: left;
-  }
-
-  .restore-chat,
+  a.restore-chat,
   .chat-title {
     padding: 1px 0 1px 5px;
-    color: white;
+    color: $chat-head-text-color;
     font-weight: bold;
     line-height: 15px;
     display: block;
@@ -600,21 +596,48 @@
     text-shadow: rgba(0, 0, 0, 0.51) 0 -1px 0;
   }
 
+  a.restore-chat:visited {
+    color: $chat-head-text-color;
+  }
+
   .chat-title a {
-    color: white;
+    color: $chat-head-text-color;
     width: 100%;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
 
+  .chat-head {
+    color: #ffffff;
+    font-size: 100%;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+    padding: 2px 2px 2px 4px;
+    margin: 0;
+  }
+
+  .chat-head .avatar {
+    float: left;
+  }
+
   .chat-head-chatbox,
   .chat-head-chatroom {
-    height: 35px;
+    height: $chat-head-height;
     position: relative;
+    padding: 3px;
+  }
+
+  .chat-head-chatroom {
+    background-color: $chatroom-head-color;
+  }
+
+  .chat-head-chatbox {
+    background-color: $chat-head-color;
   }
 
   p.user-custom-message,
   p.chatroom-topic {
+    color: white;
     font-size: 80%;
     font-style: italic;
     height: 1.3em;
@@ -622,11 +645,7 @@
     text-overflow: ellipsis;
     white-space: nowrap;
     margin: 0;
-    padding: 1px 0;
-  }
-
-  div.chat-head-chatbox a.user-custom-message {
-    color: white;
+    padding: 1px 0 1px 5px;
   }
 
   .activated {
@@ -643,7 +662,7 @@
   }
 
   .fancy-dropdown {
-    border: 1px solid #ddd;
+    border: 1px solid $light-background-border-color;
     height: 22px;
     text-align: left;
   }
@@ -677,7 +696,7 @@
     height: 22px;
     width: 12px;
     margin: 0px 5px 0 0;
-    color: #4f4f4f;
+    color: $link-color;
   }
 
   ul#found-users {
@@ -700,9 +719,9 @@
     color: #FFF;
     border-top-right-radius: 4px;
     border-top-left-radius: 4px;
-    height: 35px;
+    height: $chat-head-height;
     clear: right;
-    background-color: #2D617A;
+    background-color: $link-color;
     padding: 3px 0 0 0;
   }
 
@@ -713,8 +732,8 @@
     background: -moz-linear-gradient(center top, #ffff00 5%, #f6f6f6 100%);
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='yellow', endColorstr='#f6f6f6');
     border: 1px solid;
-    text-shadow: 1px 1px 0 #ccc;
-    color: darkred;
+    text-shadow: 1px 1px 0 $text-shadow-color;
+    color: $warning-color;
     border-radius: 5px;
     padding: 2px 4px;
     font-size: 15px;
@@ -746,13 +765,9 @@
     top: 1px;
   }
 
-  .controlbox-pane dt {
-    padding-bottom: 3px;
-  }
-
   .chatroom-form-container {
     height: 100%;
-    color: #666;
+    color: $text-color;
     overflow-y: auto;
     border-bottom-right-radius: 4px;
     border-bottom-left-radius: 4px;
@@ -760,7 +775,7 @@
 
   .chat-body p {
     font-size: 14px;
-    color: #666;
+    color: $text-color;
     padding: 5px;
     margin: 0;
   }
@@ -791,7 +806,7 @@
   #converse-roster dd.current-xmpp-contact span {
     font-size: 16px;
     float: left;
-    color: #4f4f4f;
+    color: $link-color;
   }
 
   .requesting-xmpp-contact .request-actions {
@@ -799,15 +814,6 @@
     float: right;
   }
 
-  #converse-roster dd a,
-  #converse-roster dd span {
-    text-shadow: 0 1px 0 #fafafa;
-    display: inline-block;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-
   #converse-roster span.req-contact-name {
     width: 65%;
   }
@@ -817,10 +823,6 @@
     width: 80%;
   }
 
-  #converse-roster dd span {
-    padding: 0 5px 0 0;
-  }
-
   #converse-roster {
     text-align: left;
     width: 100%;
@@ -831,20 +833,28 @@
     overflow: hidden;
   }
 
-  #converse-roster .roster-filter {
-    padding: 0;
-    margin: 0 0 5px 0.5em;
-    width: 105px;
-    height: 20px;
-    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAABNSURBVHjaXI7BDcAwCAMvyQjMyQ6dAbZiKfqoUK34g2zJh1dENIC7M8pMAPYdzAVY3d0ajNz9aypS/b5R6o+ZPdqoKgCq6h80KH3xDgBqNR97p8oAGQAAAABJRU5ErkJggg== ) no-repeat right -20px center;
-    border: 1px solid #999;
-    display: inline-block;
+  #converse-roster .roster-filter-group {
+      display: table;
   }
 
   #converse-roster .filter-type {
-    height: 20px;
+    display: table-cell;
+    height: 24px;
     padding: 0;
-    margin: 0 0 0 -5px;
+    margin: 0 0 0.5em -2px;
+    display: inline-block;
+    width: 85px;
+  }
+
+  #converse-roster .roster-filter {
+    display: table-cell;
+    padding: 2px;
+    margin: 0 0 0.5em 6px;
+    width: 104px;
+    height: 24px;
+    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAABNSURBVHjaXI7BDcAwCAMvyQjMyQ6dAbZiKfqoUK34g2zJh1dENIC7M8pMAPYdzAVY3d0ajNz9aypS/b5R6o+ZPdqoKgCq6h80KH3xDgBqNR97p8oAGQAAAABJRU5ErkJggg== ) no-repeat right -20px center;
+    border: 1px solid #999;
+    display: inline-block;
   }
 
   /* (jQ addClass:) if input has value: */
@@ -863,10 +873,13 @@
     overflow-x: hidden;
     max-height: 195px;
     max-height: calc(100% - 26px);
+    padding-bottom: 15px;
   }
 
   #converse-roster .group-toggle {
-    color: #666;
+    color: $text-color;
+    display: block;
+    width: 100%;
   }
 
   dd.available-chatroom {
@@ -887,11 +900,10 @@
   #available-chatrooms dt,
   #converse-roster dt {
     font-weight: normal;
-    font-size: 13px;
-    color: #666;
+    color: $text-color;
     border: none;
-    padding: 0.3em 0 0 0.5em;
-    text-shadow: 0 1px 0 #fafafa;
+    padding: 5px;
+    text-shadow: 0 1px 0 $text-shadow-color;
   }
 
   #converse-roster dt {
@@ -946,25 +958,37 @@
     font-weight: bold;
     border: none;
     display: block;
-    padding: 1px 0 0 0.5em;
-    color: #666;
-    text-shadow: 0 1px 0 #fafafa;
+    padding: 4px 2px 0 4px;
+    color: $text-color;
+    text-shadow: 0 1px 0 $text-shadow-color;
     clear: both;
+    height: 24px;
+    overflow-y: hidden;
   }
 
   #converse-roster dd {
     line-height: 16px;
   }
 
-  .group-toggle {
-    display: block;
-    width: 100%;
-  }
-
   .roster-group:hover,
   dd.available-chatroom:hover,
   #converse-roster dd:hover {
-    background-color: #eee;
+    background-color: $highlight-color;
+  }
+
+  #converse-roster dd a,
+  #converse-roster dd span {
+    text-shadow: 0 1px 0 $link-shadow-color;
+    display: inline-block;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    margin-left: 3px;
+  }
+
+  #converse-roster dd span {
+    padding: 0 5px 0 0;
+    margin-left: 3px;
   }
 
   #converse-roster dd a.decline-xmpp-request {
@@ -976,7 +1000,7 @@
     width: 22px;
     margin: 0;
     display: none;
-    color: #4f4f4f;
+    color: $text-color;
   }
 
   #converse-roster dd:hover a.remove-xmpp-contact {
@@ -1008,9 +1032,9 @@
     border: 0;
     font-size: 14px;
     height: 289px;
-    height: calc(100% - 35px);
+    @include calc(height, '100% - #{$chat-head-height}');
     overflow-y: auto;
-    padding: 0;
+    padding: 5px 0;
     position: absolute;
     width: 100%;
   }
@@ -1048,7 +1072,7 @@
 
   .form-help:hover,
   #converse-register .instructions:hover {
-    color: #4f4f4f;
+    color: $text-color;
   }
 
   .form-help {
@@ -1090,12 +1114,12 @@
   #converse-register .cancel,
   .chatroom-form .cancel-submit,
   #converse-register .cancel-submit {
-    color: darkred;
+    color: $warning-color;
   }
 
   .chatroom-form .save-submit,
   #converse-register .save-submit {
-    color: darkgreen;
+    color: $save-button-color;
   }
 
   .chatroom-form .save-submit,
@@ -1113,11 +1137,12 @@
   }
 
   .chatroom-form label,
+  .controlbox-pane label,
   #converse-register label,
   #converse-login label {
     height: auto;
     font-size: 14px;
-    margin-top: 0.5em;
+    margin-top: 2px;
     font-weight: bold;
   }
 
@@ -1137,17 +1162,18 @@
 
   form.add-chatroom {
     background: none;
-    padding: 3px;
-  }
-
-  form.add-chatroom input[type=text] {
-    width: 95%;
-    margin: 3px;
+    padding: 8px;
   }
 
   form.add-chatroom input[type=button],
+  form.add-chatroom input[type=submit],
+  form.add-chatroom input[type=text] {
+    margin: 3px 0;
+    width: 100%;
+  }
+
   form.add-chatroom input[type=submit] {
-    width: 48%;
+    color: $save-button-color;
   }
 
   select#select-xmpp-status {
@@ -1176,34 +1202,33 @@
   ul#controlbox-tabs li a {
     display: block;
     font-size: 12px;
-    height: 34px;
-    line-height: 34px;
+    height: $chat-head-height - 1px;
+    line-height: $chat-head-height - 1px;
     margin: 0;
     text-align: center;
     text-decoration: none;
     border-top-right-radius: 4px;
     border-top-left-radius: 4px;
     color: #888;
-    text-shadow: 0 1px 0 #fafafa;
   }
 
   .chat-head #controlbox-tabs li a:hover {
-    color: #4f4f4f;
+    color: $text-color;
   }
 
   .chat-head #controlbox-tabs li a {
     background-color: white;
     box-shadow: inset 0 4px 12px rgba(0, 0, 0, 0.3);
-    border-bottom: 1px solid #CCC;
+    border-bottom: 1px solid $border-color;
   }
 
   ul#controlbox-tabs a.current,
   ul#controlbox-tabs a.current:hover {
     box-shadow: none;
     border-bottom: 0;
-    height: 35px;
+    height: $chat-head-height;
     cursor: default;
-    color: #666666;
+    color: $text-color;
   }
 
   div#chatrooms {
@@ -1260,11 +1285,7 @@
   }
 
   .chat-toolbar a {
-    color: #4f4f4f;
-  }
-
-  .chat-toolbar ul li a:hover {
-    color: #8f2831;
+    color: $text-color;
   }
 
   .chat-toolbar ul {
@@ -1272,7 +1293,7 @@
     font-size: 12px;
     position: absolute;
     bottom: 100%;
-    margin-bottom: 1px;
+    margin: 0 0 1px 0;
     right: 0;
     background: #fff;
     box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.4);
@@ -1284,6 +1305,10 @@
     cursor: pointer;
   }
 
+  .chat-toolbar ul li a:hover {
+    color: #8f2831;
+  }
+
   .chat-toolbar .toggle-smiley {
     padding-left: 5px;
   }
@@ -1301,7 +1326,7 @@
   }
 
   .chat-toolbar ul li:hover {
-    background-color: #eee;
+    background-color: $highlight-color;
   }
 
   .chat-toolbar .toggle-otr ul li a {
@@ -1356,7 +1381,7 @@
   }
 
   .chat-textarea-chatroom-selected {
-    border: 2px solid #2D617A;
+    border: 2px solid $link-color;
     margin: 0;
   }
 
@@ -1375,7 +1400,7 @@
   /* status dropdown styles */
   .chatbox dl.dropdown {
     margin: 0.5em;
-    background-color: #f0f0f0;
+    background-color: $light-background-color;
   }
 
   .chatbox .dropdown dd,
@@ -1399,14 +1424,17 @@
   }
 
   form.add-xmpp-contact input {
-    width: 108px;
+    margin: 0 0 1rem;
+  }
+
+  form.add-xmpp-contact button {
+      width: 100%;
   }
 
   .chatbox .dropdown dt a span {
     cursor: pointer;
     display: block;
     padding: 4px 7px 0 5px;
-    color: #4f4f4f;
   }
 
   .chatbox .dropdown dd ul {
@@ -1415,11 +1443,11 @@
     position: absolute;
     left: 0;
     top: 0;
-    border: 1px solid #ddd;
+    border: 1px solid $light-background-border-color;
     border-top: 0;
     width: 99%;
     z-index: 21;
-    background-color: #f0f0f0;
+    background-color: $light-background-color;
   }
 
   .chatbox .dropdown li {
@@ -1435,11 +1463,11 @@
   }
 
   .chatbox .dropdown dd ul li:hover {
-    background-color: #bed6e5;
+    background-color: $highlight-color;
   }
 
   .chatbox .dropdown dd.search-xmpp ul li:hover {
-    background-color: #bed6e5;
+    background-color: $light-background-color;
   }
 
   .xmpp-status-menu {
@@ -1452,12 +1480,11 @@
 
   .xmpp-status-menu li a.logout,
   .xmpp-status-menu li a.logout span {
-    color: darkred;
+    color: $warning-color;
   }
 
   .xmpp-status-menu li a span {
     padding: 0 5px 0 5px;
-    color: #4f4f4f;
   }
 
   .set-xmpp-status .dropdown dd ul {