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

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

Gemfile.lock

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

css/converse.css

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

sass/_variables.scss

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

sass/variables.scss

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