From e214aae719c10953c4c3a7949c9bd02d6983b045 Mon Sep 17 00:00:00 2001
From: Asaad Mahmood <asaad@spinpunch.com>
Date: Mon, 14 Mar 2016 22:35:57 +0500
Subject: PLT-963 - Improving scss structure

---
 config/config.json                                 |   33 +-
 model/version.go                                   |    2 +-
 templates/error.html                               |    2 +-
 .../components/admin_console/admin_controller.jsx  |    7 +-
 web/react/components/admin_console/team_users.jsx  |    2 +-
 web/react/components/admin_console/user_item.jsx   |    8 +-
 web/react/components/authorize.jsx                 |    2 +-
 web/react/components/center_panel.jsx              |    2 +-
 web/react/components/file_attachment.jsx           |    6 +-
 web/react/components/file_preview.jsx              |   16 +-
 web/react/components/filtered_user_list.jsx        |    6 +-
 web/react/components/get_link_modal.jsx            |    2 +-
 web/react/components/more_channels.jsx             |   31 +-
 web/react/components/navbar.jsx                    |    8 +-
 web/react/components/not_logged_in.jsx             |    4 +-
 web/react/components/popover_list_members.jsx      |   12 +-
 web/react/components/search_bar.jsx                |    2 +-
 web/react/components/search_results_item.jsx       |    2 +-
 web/react/components/sidebar_right.jsx             |   14 +-
 .../components/suggestion/at_mention_provider.jsx  |   12 +-
 .../components/suggestion/command_provider.jsx     |    2 +-
 .../components/suggestion/suggestion_list.jsx      |    2 +-
 web/react/components/user_list.jsx                 |   22 +-
 web/react/components/user_list_row.jsx             |   46 +-
 web/react/utils/emoticons.jsx                      |    2 +-
 web/react/utils/text_formatting.jsx                |    4 +-
 web/react/utils/utils.jsx                          |   30 +-
 web/sass-files/sass/base/_module.scss              |    3 +
 web/sass-files/sass/base/_structure.scss           |   57 +
 web/sass-files/sass/base/_typography.scss          |   27 +
 web/sass-files/sass/components/_alerts.scss        |   13 +
 web/sass-files/sass/components/_buttons.scss       |   23 +
 web/sass-files/sass/components/_dropdown.scss      |   16 +
 web/sass-files/sass/components/_emoticons.scss     |   27 +
 web/sass-files/sass/components/_error-bar.scss     |   30 +
 web/sass-files/sass/components/_files.scss         |  293 ++++
 web/sass-files/sass/components/_inputs.scss        |   26 +
 web/sass-files/sass/components/_links.scss         |   23 +
 web/sass-files/sass/components/_mentions.scss      |   56 +
 web/sass-files/sass/components/_modal.scss         |  508 ++++++
 web/sass-files/sass/components/_module.scss        |   19 +
 web/sass-files/sass/components/_oauth.scss         |   38 +
 web/sass-files/sass/components/_popover.scss       |  184 ++
 web/sass-files/sass/components/_scrollbar.scss     |   28 +
 web/sass-files/sass/components/_search.scss        |  175 ++
 .../sass/components/_suggestion-list.scss          |   41 +
 web/sass-files/sass/components/_tooltip.scss       |   10 +
 web/sass-files/sass/components/_tutorial.scss      |  208 +++
 web/sass-files/sass/components/_videos.scss        |   66 +
 web/sass-files/sass/layout/_content.scss           |   85 +
 web/sass-files/sass/layout/_footer.scss            |   30 +
 web/sass-files/sass/layout/_forms.scss             |   66 +
 web/sass-files/sass/layout/_headers.scss           |  370 ++++
 web/sass-files/sass/layout/_markdown.scss          |  116 ++
 web/sass-files/sass/layout/_module.scss            |   13 +
 web/sass-files/sass/layout/_navigation.scss        |  137 ++
 web/sass-files/sass/layout/_post-right.scss        |  155 ++
 web/sass-files/sass/layout/_post.scss              |  997 +++++++++++
 web/sass-files/sass/layout/_sidebar-left.scss      |  197 +++
 web/sass-files/sass/layout/_sidebar-menu.scss      |   72 +
 web/sass-files/sass/layout/_sidebar-right.scss     |  129 ++
 web/sass-files/sass/layout/_webhooks.scss          |   37 +
 web/sass-files/sass/pages/_access-history.scss     |   32 +
 web/sass-files/sass/pages/_activity-log.scss       |   64 +
 web/sass-files/sass/pages/_admin-console.scss      |  343 ++++
 web/sass-files/sass/pages/_docs.scss               |   19 +
 web/sass-files/sass/pages/_error-page.scss         |   35 +
 web/sass-files/sass/pages/_loading.scss            |   48 +
 web/sass-files/sass/pages/_module.scss             |   11 +
 web/sass-files/sass/pages/_print.scss              |  Bin 0 -> 4392 bytes
 web/sass-files/sass/pages/_settings.scss           |  451 +++++
 web/sass-files/sass/pages/_signup.scss             |  440 +++++
 web/sass-files/sass/pages/_statistics.scss         |   85 +
 web/sass-files/sass/partials/_access-history.scss  |   27 -
 web/sass-files/sass/partials/_activity-log.scss    |   53 -
 web/sass-files/sass/partials/_admin-console.scss   |  261 ---
 web/sass-files/sass/partials/_base.scss            |  256 ---
 web/sass-files/sass/partials/_colorpicker.scss     |  253 ---
 web/sass-files/sass/partials/_content.scss         |   82 -
 web/sass-files/sass/partials/_docs.scss            |   19 -
 web/sass-files/sass/partials/_error-bar.scss       |   28 -
 web/sass-files/sass/partials/_error.scss           |   31 -
 web/sass-files/sass/partials/_files.scss           |  264 ---
 web/sass-files/sass/partials/_font-awesome.scss    | 1803 --------------------
 web/sass-files/sass/partials/_footer.scss          |   25 -
 web/sass-files/sass/partials/_forms.scss           |   51 -
 web/sass-files/sass/partials/_get-link.scss        |    8 -
 web/sass-files/sass/partials/_headers.scss         |  320 ----
 web/sass-files/sass/partials/_loading.scss         |   42 -
 web/sass-files/sass/partials/_markdown.scss        |  106 --
 web/sass-files/sass/partials/_mentions.scss        |   61 -
 web/sass-files/sass/partials/_modal.scss           |  489 ------
 web/sass-files/sass/partials/_navbar.scss          |  112 --
 web/sass-files/sass/partials/_oauth.scss           |   33 -
 .../sass/partials/_perfect-scrollbar.scss          |  122 --
 web/sass-files/sass/partials/_popover.scss         |  158 --
 web/sass-files/sass/partials/_post.scss            | 1013 -----------
 web/sass-files/sass/partials/_post_right.scss      |  159 --
 web/sass-files/sass/partials/_print.scss           |  Bin 3604 -> 0 bytes
 web/sass-files/sass/partials/_responsive.scss      |  894 ----------
 web/sass-files/sass/partials/_search.scss          |  160 --
 web/sass-files/sass/partials/_settings.scss        |  455 -----
 web/sass-files/sass/partials/_sidebar--left.scss   |  193 ---
 web/sass-files/sass/partials/_sidebar--menu.scss   |   71 -
 web/sass-files/sass/partials/_sidebar--right.scss  |  124 --
 web/sass-files/sass/partials/_signup.scss          |  390 -----
 web/sass-files/sass/partials/_statistics.scss      |   87 -
 web/sass-files/sass/partials/_suggestion_list.scss |   67 -
 web/sass-files/sass/partials/_tooltips.scss        |    7 -
 web/sass-files/sass/partials/_tutorial.scss        |  212 ---
 web/sass-files/sass/partials/_variables.scss       |   16 -
 web/sass-files/sass/partials/_videos.scss          |   66 -
 web/sass-files/sass/partials/_webhooks.scss        |   33 -
 web/sass-files/sass/partials/_welcome.scss         |   15 -
 web/sass-files/sass/responsive/_desktop.scss       |   65 +
 web/sass-files/sass/responsive/_mobile.scss        |  901 ++++++++++
 web/sass-files/sass/responsive/_module.scss        |    4 +
 web/sass-files/sass/responsive/_tablet.scss        |   35 +
 web/sass-files/sass/styles.scss                    |   57 +-
 web/sass-files/sass/utils/_animations.scss         |   19 +
 web/sass-files/sass/utils/_functions.scss          |    9 +
 web/sass-files/sass/utils/_mixins.scss             |    8 +
 web/sass-files/sass/utils/_module.scss             |    5 +
 web/sass-files/sass/utils/_variables.scss          |   13 +
 web/sass-files/sass/vendors/_colorpicker.scss      |  253 +++
 web/sass-files/sass/vendors/_font-awesome.scss     | 1803 ++++++++++++++++++++
 web/sass-files/sass/vendors/_module.scss           |    4 +
 .../sass/vendors/_perfect-scrollbar.scss           |  141 ++
 128 files changed, 9221 insertions(+), 8746 deletions(-)
 create mode 100644 web/sass-files/sass/base/_module.scss
 create mode 100644 web/sass-files/sass/base/_structure.scss
 create mode 100644 web/sass-files/sass/base/_typography.scss
 create mode 100644 web/sass-files/sass/components/_alerts.scss
 create mode 100644 web/sass-files/sass/components/_buttons.scss
 create mode 100644 web/sass-files/sass/components/_dropdown.scss
 create mode 100644 web/sass-files/sass/components/_emoticons.scss
 create mode 100644 web/sass-files/sass/components/_error-bar.scss
 create mode 100644 web/sass-files/sass/components/_files.scss
 create mode 100644 web/sass-files/sass/components/_inputs.scss
 create mode 100644 web/sass-files/sass/components/_links.scss
 create mode 100644 web/sass-files/sass/components/_mentions.scss
 create mode 100644 web/sass-files/sass/components/_modal.scss
 create mode 100644 web/sass-files/sass/components/_module.scss
 create mode 100644 web/sass-files/sass/components/_oauth.scss
 create mode 100644 web/sass-files/sass/components/_popover.scss
 create mode 100644 web/sass-files/sass/components/_scrollbar.scss
 create mode 100644 web/sass-files/sass/components/_search.scss
 create mode 100644 web/sass-files/sass/components/_suggestion-list.scss
 create mode 100644 web/sass-files/sass/components/_tooltip.scss
 create mode 100644 web/sass-files/sass/components/_tutorial.scss
 create mode 100644 web/sass-files/sass/components/_videos.scss
 create mode 100644 web/sass-files/sass/layout/_content.scss
 create mode 100644 web/sass-files/sass/layout/_footer.scss
 create mode 100644 web/sass-files/sass/layout/_forms.scss
 create mode 100644 web/sass-files/sass/layout/_headers.scss
 create mode 100644 web/sass-files/sass/layout/_markdown.scss
 create mode 100644 web/sass-files/sass/layout/_module.scss
 create mode 100644 web/sass-files/sass/layout/_navigation.scss
 create mode 100644 web/sass-files/sass/layout/_post-right.scss
 create mode 100644 web/sass-files/sass/layout/_post.scss
 create mode 100644 web/sass-files/sass/layout/_sidebar-left.scss
 create mode 100644 web/sass-files/sass/layout/_sidebar-menu.scss
 create mode 100644 web/sass-files/sass/layout/_sidebar-right.scss
 create mode 100644 web/sass-files/sass/layout/_webhooks.scss
 create mode 100644 web/sass-files/sass/pages/_access-history.scss
 create mode 100644 web/sass-files/sass/pages/_activity-log.scss
 create mode 100644 web/sass-files/sass/pages/_admin-console.scss
 create mode 100644 web/sass-files/sass/pages/_docs.scss
 create mode 100644 web/sass-files/sass/pages/_error-page.scss
 create mode 100644 web/sass-files/sass/pages/_loading.scss
 create mode 100644 web/sass-files/sass/pages/_module.scss
 create mode 100644 web/sass-files/sass/pages/_print.scss
 create mode 100644 web/sass-files/sass/pages/_settings.scss
 create mode 100644 web/sass-files/sass/pages/_signup.scss
 create mode 100644 web/sass-files/sass/pages/_statistics.scss
 delete mode 100644 web/sass-files/sass/partials/_access-history.scss
 delete mode 100644 web/sass-files/sass/partials/_activity-log.scss
 delete mode 100644 web/sass-files/sass/partials/_admin-console.scss
 delete mode 100644 web/sass-files/sass/partials/_base.scss
 delete mode 100644 web/sass-files/sass/partials/_colorpicker.scss
 delete mode 100644 web/sass-files/sass/partials/_content.scss
 delete mode 100644 web/sass-files/sass/partials/_docs.scss
 delete mode 100644 web/sass-files/sass/partials/_error-bar.scss
 delete mode 100644 web/sass-files/sass/partials/_error.scss
 delete mode 100644 web/sass-files/sass/partials/_files.scss
 delete mode 100644 web/sass-files/sass/partials/_font-awesome.scss
 delete mode 100644 web/sass-files/sass/partials/_footer.scss
 delete mode 100644 web/sass-files/sass/partials/_forms.scss
 delete mode 100644 web/sass-files/sass/partials/_get-link.scss
 delete mode 100644 web/sass-files/sass/partials/_headers.scss
 delete mode 100644 web/sass-files/sass/partials/_loading.scss
 delete mode 100644 web/sass-files/sass/partials/_markdown.scss
 delete mode 100644 web/sass-files/sass/partials/_mentions.scss
 delete mode 100644 web/sass-files/sass/partials/_modal.scss
 delete mode 100644 web/sass-files/sass/partials/_navbar.scss
 delete mode 100644 web/sass-files/sass/partials/_oauth.scss
 delete mode 100755 web/sass-files/sass/partials/_perfect-scrollbar.scss
 delete mode 100644 web/sass-files/sass/partials/_popover.scss
 delete mode 100644 web/sass-files/sass/partials/_post.scss
 delete mode 100644 web/sass-files/sass/partials/_post_right.scss
 delete mode 100644 web/sass-files/sass/partials/_print.scss
 delete mode 100644 web/sass-files/sass/partials/_responsive.scss
 delete mode 100644 web/sass-files/sass/partials/_search.scss
 delete mode 100644 web/sass-files/sass/partials/_settings.scss
 delete mode 100644 web/sass-files/sass/partials/_sidebar--left.scss
 delete mode 100644 web/sass-files/sass/partials/_sidebar--menu.scss
 delete mode 100644 web/sass-files/sass/partials/_sidebar--right.scss
 delete mode 100644 web/sass-files/sass/partials/_signup.scss
 delete mode 100644 web/sass-files/sass/partials/_statistics.scss
 delete mode 100644 web/sass-files/sass/partials/_suggestion_list.scss
 delete mode 100644 web/sass-files/sass/partials/_tooltips.scss
 delete mode 100644 web/sass-files/sass/partials/_tutorial.scss
 delete mode 100644 web/sass-files/sass/partials/_variables.scss
 delete mode 100644 web/sass-files/sass/partials/_videos.scss
 delete mode 100644 web/sass-files/sass/partials/_webhooks.scss
 delete mode 100644 web/sass-files/sass/partials/_welcome.scss
 create mode 100644 web/sass-files/sass/responsive/_desktop.scss
 create mode 100644 web/sass-files/sass/responsive/_mobile.scss
 create mode 100644 web/sass-files/sass/responsive/_module.scss
 create mode 100644 web/sass-files/sass/responsive/_tablet.scss
 create mode 100644 web/sass-files/sass/utils/_animations.scss
 create mode 100644 web/sass-files/sass/utils/_functions.scss
 create mode 100644 web/sass-files/sass/utils/_mixins.scss
 create mode 100644 web/sass-files/sass/utils/_module.scss
 create mode 100644 web/sass-files/sass/utils/_variables.scss
 create mode 100644 web/sass-files/sass/vendors/_colorpicker.scss
 create mode 100644 web/sass-files/sass/vendors/_font-awesome.scss
 create mode 100644 web/sass-files/sass/vendors/_module.scss
 create mode 100755 web/sass-files/sass/vendors/_perfect-scrollbar.scss

diff --git a/config/config.json b/config/config.json
index b211b16d3..7e8b42708 100644
--- a/config/config.json
+++ b/config/config.json
@@ -11,7 +11,7 @@
         "EnableOnlyAdminIntegrations": true,
         "EnablePostUsernameOverride": false,
         "EnablePostIconOverride": false,
-        "EnableTesting": false,
+        "EnableTesting": true,
         "EnableDeveloper": false,
         "EnableSecurityFixAlert": true,
         "EnableInsecureOutgoingConnections": false,
@@ -19,7 +19,9 @@
         "SessionLengthWebInDays": 30,
         "SessionLengthMobileInDays": 30,
         "SessionLengthSSOInDays": 30,
-        "SessionCacheInMinutes": 10
+        "SessionCacheInMinutes": 10,
+        "WebsocketSecurePort": 443,
+        "WebsocketPort": 80
     },
     "TeamSettings": {
         "SiteName": "Mattermost",
@@ -72,7 +74,7 @@
         "EnableSignUpWithEmail": true,
         "EnableSignInWithEmail": true,
         "EnableSignInWithUsername": false,
-        "SendEmailNotifications": false,
+        "SendEmailNotifications": true,
         "RequireEmailVerification": false,
         "FeedbackName": "",
         "FeedbackEmail": "",
@@ -113,5 +115,28 @@
         "AuthEndpoint": "",
         "TokenEndpoint": "",
         "UserApiEndpoint": ""
+    },
+    "GoogleSettings": {
+        "Enable": false,
+        "Secret": "",
+        "Id": "",
+        "Scope": "",
+        "AuthEndpoint": "",
+        "TokenEndpoint": "",
+        "UserApiEndpoint": ""
+    },
+    "LdapSettings": {
+        "Enable": false,
+        "LdapServer": null,
+        "LdapPort": 389,
+        "BaseDN": null,
+        "BindUsername": null,
+        "BindPassword": null,
+        "FirstNameAttribute": null,
+        "LastNameAttribute": null,
+        "EmailAttribute": null,
+        "UsernameAttribute": null,
+        "IdAttribute": null,
+        "QueryTimeout": 60
     }
-}
+}
\ No newline at end of file
diff --git a/model/version.go b/model/version.go
index 6011a9245..46f34b81e 100644
--- a/model/version.go
+++ b/model/version.go
@@ -31,7 +31,7 @@ var CurrentVersion string = versions[0]
 var BuildNumber = "_BUILD_NUMBER_"
 var BuildDate = "_BUILD_DATE_"
 var BuildHash = "_BUILD_HASH_"
-var BuildEnterpriseReady = "_BUILD_ENTERPRISE_READY_"
+var BuildEnterpriseReady = "false"
 var versionsWithoutHotFixes []string
 
 func init() {
diff --git a/templates/error.html b/templates/error.html
index b86039ca3..5aa48098f 100644
--- a/templates/error.html
+++ b/templates/error.html
@@ -2,7 +2,7 @@
 <!DOCTYPE html>
 <html>
 {{template "head" . }}
-<body class="white error">
+<body class="sticky error">
     <div class="container-fluid">
         <div class="error__container">
             <div class="error__icon">
diff --git a/web/react/components/admin_console/admin_controller.jsx b/web/react/components/admin_console/admin_controller.jsx
index 4c4f21f08..6dca391d0 100644
--- a/web/react/components/admin_console/admin_controller.jsx
+++ b/web/react/components/admin_console/admin_controller.jsx
@@ -172,7 +172,10 @@ export default class AdminController extends React.Component {
         }
 
         return (
-            <div id='admin_controller'>
+            <div
+                id='admin_controller'
+                className='admin-controller'
+            >
                 <div
                     className='sidebar--menu'
                     id='sidebar-menu'
@@ -186,7 +189,7 @@ export default class AdminController extends React.Component {
                     removeSelectedTeam={this.removeSelectedTeam}
                     addSelectedTeam={this.addSelectedTeam}
                 />
-                <div className='inner__wrap channel__wrap'>
+                <div className='inner-wrap channel__wrap'>
                     <div className='row header'>
                     </div>
                     <div className='row main'>
diff --git a/web/react/components/admin_console/team_users.jsx b/web/react/components/admin_console/team_users.jsx
index 256576f9b..708907ddb 100644
--- a/web/react/components/admin_console/team_users.jsx
+++ b/web/react/components/admin_console/team_users.jsx
@@ -163,7 +163,7 @@ export default class UserList extends React.Component {
                     className='form-horizontal'
                     role='form'
                 >
-                    <table className='table more-table member-list-holder'>
+                    <table className='more-modal__list member-list-holder'>
                         <tbody>
                             {memberList}
                         </tbody>
diff --git a/web/react/components/admin_console/user_item.jsx b/web/react/components/admin_console/user_item.jsx
index 7d6cfb5c3..722da922a 100644
--- a/web/react/components/admin_console/user_item.jsx
+++ b/web/react/components/admin_console/user_item.jsx
@@ -363,15 +363,15 @@ export default class UserItem extends React.Component {
 
         return (
             <tr>
-                <td className='row member-div padding--equal'>
+                <td className='more-modal__row'>
                     <img
-                        className='post-profile-img pull-left'
+                        className='more-modal__image pull-left'
                         src={`/api/v1/users/${user.id}/image?time=${user.update_at}`}
                         height='36'
                         width='36'
                     />
-                    <span className='more-name'>{Utils.getDisplayName(user)}</span>
-                    <span className='more-description'>{email}</span>
+                    <span className='more-modal__name'>{Utils.getDisplayName(user)}</span>
+                    <span className='more-modal__description'>{email}</span>
                     <div className='dropdown member-drop'>
                         <a
                             href='#'
diff --git a/web/react/components/authorize.jsx b/web/react/components/authorize.jsx
index 35ad7ac10..4b1cebcf4 100644
--- a/web/react/components/authorize.jsx
+++ b/web/react/components/authorize.jsx
@@ -38,7 +38,7 @@ export default class Authorize extends React.Component {
     render() {
         return (
             <div className='container-fluid'>
-                <div className='oauth-prompt'>
+                <div className='prompt'>
                     <div className='prompt__heading'>
                         <div className='prompt__app-icon'>
                             <img
diff --git a/web/react/components/center_panel.jsx b/web/react/components/center_panel.jsx
index 2ea840c1e..9a5f7a5d1 100644
--- a/web/react/components/center_panel.jsx
+++ b/web/react/components/center_panel.jsx
@@ -103,7 +103,7 @@ export default class CenterPanel extends React.Component {
         }
 
         return (
-            <div className='inner__wrap channel__wrap'>
+            <div className='inner-wrap channel__wrap'>
                 <div className='row header'>
                     <div id='navbar'>
                         <Navbar/>
diff --git a/web/react/components/file_attachment.jsx b/web/react/components/file_attachment.jsx
index 8abcac8c3..383529212 100644
--- a/web/react/components/file_attachment.jsx
+++ b/web/react/components/file_attachment.jsx
@@ -49,8 +49,8 @@ class FileAttachment extends React.Component {
                         if (name in self.refs) {
                             var imgDiv = ReactDOM.findDOMNode(self.refs[name]);
 
-                            $(imgDiv).removeClass('post__load');
-                            $(imgDiv).addClass('post__image');
+                            $(imgDiv).removeClass('post-image__load');
+                            $(imgDiv).addClass('post-image');
 
                             var width = this.width || $(this).width();
                             var height = this.height || $(this).height();
@@ -134,7 +134,7 @@ class FileAttachment extends React.Component {
             thumbnail = (
                 <div
                     ref={filename}
-                    className='post__load'
+                    className='post-image__load'
                     style={{backgroundImage: 'url(/static/images/load.gif)'}}
                 />
             );
diff --git a/web/react/components/file_preview.jsx b/web/react/components/file_preview.jsx
index 265d3f367..97949ca3d 100644
--- a/web/react/components/file_preview.jsx
+++ b/web/react/components/file_preview.jsx
@@ -41,15 +41,15 @@ export default class FilePreview extends React.Component {
                 previews.push(
                     <div
                         key={filename}
-                        className='preview-div'
+                        className='file-preview'
                         data-filename={originalFilename}
                     >
                         <img
-                            className='preview-img'
+                            className='file-preview__image'
                             src={filename}
                         />
                         <a
-                            className='remove-preview'
+                            className='file-preview__remove'
                             onClick={this.handleRemove}
                         >
                             <i className='glyphicon glyphicon-remove'/>
@@ -60,12 +60,12 @@ export default class FilePreview extends React.Component {
                 previews.push(
                     <div
                         key={filename}
-                        className='preview-div custom-file'
+                        className='file-preview custom-file'
                         data-filename={originalFilename}
                     >
                         <div className={'file-icon ' + Utils.getIconClassName(type)}/>
                         <a
-                            className='remove-preview'
+                            className='file-preview__remove'
                             onClick={this.handleRemove}
                         >
                             <i className='glyphicon glyphicon-remove'/>
@@ -80,7 +80,7 @@ export default class FilePreview extends React.Component {
                 <div
                     ref={clientId}
                     key={clientId}
-                    className='preview-div'
+                    className='file-preview'
                     data-client-id={clientId}
                 >
                     <img
@@ -88,7 +88,7 @@ export default class FilePreview extends React.Component {
                         src='/static/images/load.gif'
                     />
                     <a
-                        className='remove-preview'
+                        className='file-preview__remove'
                         onClick={this.handleRemove}
                     >
                         <i className='glyphicon glyphicon-remove'/>
@@ -98,7 +98,7 @@ export default class FilePreview extends React.Component {
         });
 
         return (
-            <div className='preview-container'>
+            <div className='file-preview__container'>
                 {previews}
             </div>
         );
diff --git a/web/react/components/filtered_user_list.jsx b/web/react/components/filtered_user_list.jsx
index ffd6ebf53..77a8c8810 100644
--- a/web/react/components/filtered_user_list.jsx
+++ b/web/react/components/filtered_user_list.jsx
@@ -27,10 +27,6 @@ class FilteredUserList extends React.Component {
         };
     }
 
-    componentDidMount() {
-        $(ReactDOM.findDOMNode(this.refs.userList)).perfectScrollbar();
-    }
-
     componentDidUpdate(prevProps, prevState) {
         if (prevState.filter !== this.state.filter) {
             $(ReactDOM.findDOMNode(this.refs.userList)).scrollTop(0);
@@ -109,7 +105,7 @@ class FilteredUserList extends React.Component {
                 </div>
                 <div
                     ref='userList'
-                    className='user-list'
+                    className='more-modal__list'
                 >
                     <UserList
                         users={users}
diff --git a/web/react/components/get_link_modal.jsx b/web/react/components/get_link_modal.jsx
index 3309d690c..dd21f21e0 100644
--- a/web/react/components/get_link_modal.jsx
+++ b/web/react/components/get_link_modal.jsx
@@ -81,7 +81,7 @@ export default class GetLinkModal extends React.Component {
         var copyLinkConfirm = null;
         if (this.state.copiedLink) {
             copyLinkConfirm = (
-                <p className='alert alert-success copy-link-confirm'>
+                <p className='alert alert-success alert--confirm'>
                     <i className='fa fa-check'></i>
                     <FormattedMessage
                         id='get_link.clipboard'
diff --git a/web/react/components/more_channels.jsx b/web/react/components/more_channels.jsx
index 3309ef52e..2ba435449 100644
--- a/web/react/components/more_channels.jsx
+++ b/web/react/components/more_channels.jsx
@@ -95,17 +95,18 @@ export default class MoreChannels extends React.Component {
         }
 
         return (
-            <tr key={channel.id}>
-                <td className='more-row'>
-                    <div className='more-details'>
-                        <p className='more-name'>{channel.display_name}</p>
-                        <p className='more-description'>{channel.purpose}</p>
-                    </div>
-                    <div className='more-actions'>
-                        {joinButton}
-                    </div>
-                </td>
-            </tr>
+            <div
+                className='more-modal__row'
+                key={channel.id}
+            >
+                <div className='more-modal__details'>
+                    <p className='more-modal__name'>{channel.display_name}</p>
+                    <p className='more-modal__description'>{channel.purpose}</p>
+                </div>
+                <div className='more-modal__actions'>
+                    {joinButton}
+                </div>
+            </div>
         );
     }
     render() {
@@ -127,11 +128,9 @@ export default class MoreChannels extends React.Component {
                 moreChannels = <LoadingScreen/>;
             } else if (channels.length) {
                 moreChannels = (
-                    <table className='more-table table'>
-                        <tbody>
-                            {channels.map(this.createChannelRow)}
-                        </tbody>
-                    </table>
+                    <div className='more-modal__list'>
+                        {channels.map(this.createChannelRow)}
+                    </div>
                 );
             } else {
                 moreChannels = (
diff --git a/web/react/components/navbar.jsx b/web/react/components/navbar.jsx
index 974f026d0..8382cb47a 100644
--- a/web/react/components/navbar.jsx
+++ b/web/react/components/navbar.jsx
@@ -66,7 +66,7 @@ export default class Navbar extends React.Component {
     componentDidMount() {
         ChannelStore.addChangeListener(this.onChange);
         ChannelStore.addExtraInfoChangeListener(this.onChange);
-        $('.inner__wrap').click(this.hideSidebars);
+        $('.inner-wrap').click(this.hideSidebars);
         attachFastClick(document.body);
     }
     componentWillUnmount() {
@@ -101,7 +101,7 @@ export default class Navbar extends React.Component {
             });
 
             if (e.target.className !== 'navbar-toggle' && e.target.className !== 'icon-bar') {
-                $('.inner__wrap').removeClass('move--right move--left move--left-small');
+                $('.inner-wrap').removeClass('move--right move--left move--left-small');
                 $('.sidebar--left').removeClass('move--right');
                 $('.sidebar--right').removeClass('move--left');
                 $('.sidebar--menu').removeClass('move--left');
@@ -109,11 +109,11 @@ export default class Navbar extends React.Component {
         }
     }
     toggleLeftSidebar() {
-        $('.inner__wrap').toggleClass('move--right');
+        $('.inner-wrap').toggleClass('move--right');
         $('.sidebar--left').toggleClass('move--right');
     }
     toggleRightSidebar() {
-        $('.inner__wrap').toggleClass('move--left-small');
+        $('.inner-wrap').toggleClass('move--left-small');
         $('.sidebar--menu').toggleClass('move--left');
     }
     showSearch() {
diff --git a/web/react/components/not_logged_in.jsx b/web/react/components/not_logged_in.jsx
index 7af293e77..cf3effcd5 100644
--- a/web/react/components/not_logged_in.jsx
+++ b/web/react/components/not_logged_in.jsx
@@ -5,7 +5,7 @@ import {FormattedMessage} from 'mm-intl';
 
 export default class NotLoggedIn extends React.Component {
     componentDidMount() {
-        $('body').attr('class', 'white');
+        $('body').attr('class', 'sticky');
         $('#root').attr('class', 'container-fluid');
     }
     componentWillUnmount() {
@@ -14,7 +14,7 @@ export default class NotLoggedIn extends React.Component {
     }
     render() {
         return (
-            <div className='inner__wrap'>
+            <div className='inner-wrap'>
                 <div className='row content'>
                     {this.props.children}
                     <div className='footer-push'></div>
diff --git a/web/react/components/popover_list_members.jsx b/web/react/components/popover_list_members.jsx
index 1943fb409..8f6948ee4 100644
--- a/web/react/components/popover_list_members.jsx
+++ b/web/react/components/popover_list_members.jsx
@@ -110,25 +110,25 @@ export default class PopoverListMembers extends React.Component {
                 if (name) {
                     popoverHtml.push(
                         <div
-                            className='text-nowrap'
+                            className='more-modal__row'
                             key={'popover-member-' + i}
                         >
 
                             <img
-                                className='profile-img rounded pull-left'
+                                className='more-modal__image'
                                 width='26px'
                                 height='26px'
                                 src={`/api/v1/users/${m.id}/image?time=${m.update_at}`}
                             />
-                            <div className='pull-left'>
+                            <div className='more-modal__details'>
                                 <div
-                                    className='more-name'
+                                    className='more-modal__name'
                                 >
                                     {name}
                                 </div>
                             </div>
                             <div
-                                className='pull-right'
+                                className='more-modal__actions'
                             >
                                 {button}
                             </div>
@@ -185,7 +185,7 @@ export default class PopoverListMembers extends React.Component {
                         title={title}
                         id='member-list-popover'
                     >
-                        {popoverHtml}
+                        <div className='more-modal__list'>{popoverHtml}</div>
                     </Popover>
                 </Overlay>
             </div>
diff --git a/web/react/components/search_bar.jsx b/web/react/components/search_bar.jsx
index eaf8b5069..3afd0e840 100644
--- a/web/react/components/search_bar.jsx
+++ b/web/react/components/search_bar.jsx
@@ -164,7 +164,7 @@ class SearchBar extends React.Component {
                 </span>
                 <form
                     role='form'
-                    className='search__form relative-div'
+                    className='search__form'
                     onSubmit={this.handleSubmit}
                     style={{overflow: 'visible'}}
                     autoComplete='off'
diff --git a/web/react/components/search_results_item.jsx b/web/react/components/search_results_item.jsx
index 3a091bdd1..9c3b0336b 100644
--- a/web/react/components/search_results_item.jsx
+++ b/web/react/components/search_results_item.jsx
@@ -25,7 +25,7 @@ export default class SearchResultsItem extends React.Component {
 
         if ($(window).width() < 768) {
             $('.sidebar--right').removeClass('move--left');
-            $('.inner__wrap').removeClass('move--left');
+            $('.inner-wrap').removeClass('move--left');
         }
     }
 
diff --git a/web/react/components/sidebar_right.jsx b/web/react/components/sidebar_right.jsx
index 14853d3a3..fc9888626 100644
--- a/web/react/components/sidebar_right.jsx
+++ b/web/react/components/sidebar_right.jsx
@@ -55,27 +55,27 @@ export default class SidebarRight extends React.Component {
         var windowWidth = $(window).outerWidth();
         var sidebarRightWidth = $('.sidebar--right').outerWidth();
 
-        $('.inner__wrap').removeClass('.move--right');
-        $('.inner__wrap').addClass('move--left');
+        $('.inner-wrap').removeClass('.move--right');
+        $('.inner-wrap').addClass('move--left');
         $('.sidebar--left').removeClass('move--right');
         $('.sidebar--right').addClass('move--left');
 
         //$('.sidebar--right').prepend('<div class="sidebar__overlay"></div>');
         if (this.state.search_visible || this.state.post_right_visible) {
             if (windowWidth > 960) {
-                $('.inner__wrap').velocity({marginRight: sidebarRightWidth}, {duration: 500, easing: 'easeOutSine'});
+                $('.inner-wrap').velocity({marginRight: sidebarRightWidth}, {duration: 500, easing: 'easeOutSine'});
                 $('.sidebar--right').velocity({translateX: 0}, {duration: 500, easing: 'easeOutSine'});
             } else {
-                $('.inner__wrap, .sidebar--right').attr('style', '');
+                $('.inner-wrap, .sidebar--right').attr('style', '');
             }
         } else {
             if (windowWidth > 960) {
-                $('.inner__wrap').velocity({marginRight: 0}, {duration: 500, easing: 'easeOutSine'});
+                $('.inner-wrap').velocity({marginRight: 0}, {duration: 500, easing: 'easeOutSine'});
                 $('.sidebar--right').velocity({translateX: sidebarRightWidth}, {duration: 500, easing: 'easeOutSine'});
             } else {
-                $('.inner__wrap, .sidebar--right').attr('style', '');
+                $('.inner-wrap, .sidebar--right').attr('style', '');
             }
-            $('.inner__wrap').removeClass('move--left').removeClass('move--right');
+            $('.inner-wrap').removeClass('move--left').removeClass('move--right');
             $('.sidebar--right').removeClass('move--left');
             return (
                 <div></div>
diff --git a/web/react/components/suggestion/at_mention_provider.jsx b/web/react/components/suggestion/at_mention_provider.jsx
index c5bd13c26..b53b351d9 100644
--- a/web/react/components/suggestion/at_mention_provider.jsx
+++ b/web/react/components/suggestion/at_mention_provider.jsx
@@ -24,7 +24,7 @@ class AtMentionSuggestion extends React.Component {
                     defaultMessage='Notifies everyone in the team'
                 />
             );
-            icon = <i className='mention-img fa fa-users fa-2x'/>;
+            icon = <i className='mention__image fa fa-users fa-2x'/>;
         } else if (item.username === 'channel') {
             username = 'channel';
             description = (
@@ -33,19 +33,19 @@ class AtMentionSuggestion extends React.Component {
                     defaultMessage='Notifies everyone in the channel'
                 />
             );
-            icon = <i className='mention-img fa fa-users fa-2x'/>;
+            icon = <i className='mention__image fa fa-users fa-2x'/>;
         } else {
             username = item.username;
             description = Utils.getFullName(item);
             icon = (
                 <img
-                    className='mention-img'
+                    className='mention__image'
                     src={'/api/v1/users/' + item.id + '/image?time=' + item.update_at}
                 />
             );
         }
 
-        let className = 'mentions-name';
+        let className = 'mentions__name';
         if (isSelection) {
             className += ' suggestion--selected';
         }
@@ -58,11 +58,11 @@ class AtMentionSuggestion extends React.Component {
                 <div className='pull-left'>
                     {icon}
                 </div>
-                <div className='pull-left mention-align'>
+                <div className='pull-left mention--align'>
                     <span>
                         {'@' + username}
                     </span>
-                    <span className='mention-fullname'>
+                    <span className='mention__fullname'>
                         {description}
                     </span>
                 </div>
diff --git a/web/react/components/suggestion/command_provider.jsx b/web/react/components/suggestion/command_provider.jsx
index 21d6d0e0e..fffb2df07 100644
--- a/web/react/components/suggestion/command_provider.jsx
+++ b/web/react/components/suggestion/command_provider.jsx
@@ -7,7 +7,7 @@ class CommandSuggestion extends React.Component {
     render() {
         const {item, isSelection, onClick} = this.props;
 
-        let className = 'command-name';
+        let className = 'command';
         if (isSelection) {
             className += ' suggestion--selected';
         }
diff --git a/web/react/components/suggestion/suggestion_list.jsx b/web/react/components/suggestion/suggestion_list.jsx
index ccebeb990..0f5907179 100644
--- a/web/react/components/suggestion/suggestion_list.jsx
+++ b/web/react/components/suggestion/suggestion_list.jsx
@@ -111,7 +111,7 @@ export default class SuggestionList extends React.Component {
             <div className='suggestion-list suggestion-list--top'>
                 <div
                     ref='content'
-                    className='suggestion-content suggestion-content--top'
+                    className='suggestion-list__content suggestion-list__content--top'
                 >
                     {items}
                 </div>
diff --git a/web/react/components/user_list.jsx b/web/react/components/user_list.jsx
index 39453a827..783d552dc 100644
--- a/web/react/components/user_list.jsx
+++ b/web/react/components/user_list.jsx
@@ -21,23 +21,19 @@ export default class UserList extends React.Component {
             });
         } else {
             content = (
-                <tr key='no-users-found'>
-                    <td>
-                        <FormattedMessage
-                            id='user_list.notFound'
-                            defaultMessage='No users found :('
-                        />
-                    </td>
-                </tr>
+                <div key='no-users-found'>
+                    <FormattedMessage
+                        id='user_list.notFound'
+                        defaultMessage='No users found :('
+                    />
+                </div>
             );
         }
 
         return (
-            <table className='more-table table'>
-                <tbody>
-                    {content}
-                </tbody>
-            </table>
+            <div>
+                {content}
+            </div>
         );
     }
 }
diff --git a/web/react/components/user_list_row.jsx b/web/react/components/user_list_row.jsx
index 1ca40687f..8c664ba82 100644
--- a/web/react/components/user_list_row.jsx
+++ b/web/react/components/user_list_row.jsx
@@ -25,32 +25,32 @@ export default function UserListRow({user, actions}) {
     });
 
     return (
-        <tr>
-            <td
-                key={user.id}
-                style={{display: 'flex'}}
+        <div
+            key={user.id}
+            className='more-modal__row'
+        >
+            <img
+                className='more-modal__image'
+                width='38'
+                height='38'
+                src={`/api/v1/users/${user.id}/image?time=${user.update_at}`}
+            />
+            <div
+                className='more-modal__details'
             >
-                <img
-                    className='profile-img'
-                    src={`/api/v1/users/${user.id}/image?time=${user.update_at}`}
-                />
-                <div
-                    className='user-list-item__details'
-                >
-                    <div className='more-name'>
-                        {name}
-                    </div>
-                    <div className='more-description'>
-                        {user.email}
-                    </div>
+                <div className='more-modal__name'>
+                    {name}
                 </div>
-                <div
-                    className='user-list-item__actions'
-                >
-                    {buttons}
+                <div className='more-modal__description'>
+                    {user.email}
                 </div>
-            </td>
-        </tr>
+            </div>
+            <div
+                className='more-modal__actions'
+            >
+                {buttons}
+            </div>
+        </div>
     );
 }
 
diff --git a/web/react/utils/emoticons.jsx b/web/react/utils/emoticons.jsx
index 18cce3bde..bed798b3e 100644
--- a/web/react/utils/emoticons.jsx
+++ b/web/react/utils/emoticons.jsx
@@ -132,7 +132,7 @@ export function handleEmoticons(text, tokens) {
             const alias = `MM_EMOTICON${index}`;
 
             tokens.set(alias, {
-                value: `<img align="absmiddle" alt="${matchText}" class="emoji" src="${getImagePathForEmoticon(name)}" title="${matchText}" />`,
+                value: `<img align="absmiddle" alt="${matchText}" class="emoticon" src="${getImagePathForEmoticon(name)}" title="${matchText}" />`,
                 originalText: fullMatch
             });
 
diff --git a/web/react/utils/text_formatting.jsx b/web/react/utils/text_formatting.jsx
index a930e9ece..552d93fac 100644
--- a/web/react/utils/text_formatting.jsx
+++ b/web/react/utils/text_formatting.jsx
@@ -187,7 +187,7 @@ function highlightCurrentMentions(text, tokens) {
             const newAlias = `MM_SELFMENTION${index}`;
 
             newTokens.set(newAlias, {
-                value: `<span class='mention-highlight'>${alias}</span>`,
+                value: `<span class='mention--highlight'>${alias}</span>`,
                 originalText: token.originalText
             });
             output = output.replace(alias, newAlias);
@@ -205,7 +205,7 @@ function highlightCurrentMentions(text, tokens) {
         const alias = `MM_SELFMENTION${index}`;
 
         tokens.set(alias, {
-            value: `<span class='mention-highlight'>${mention}</span>`,
+            value: `<span class='mention--highlight'>${mention}</span>`,
             originalText: mention
         });
 
diff --git a/web/react/utils/utils.jsx b/web/react/utils/utils.jsx
index 88777164b..360d1f4a5 100644
--- a/web/react/utils/utils.jsx
+++ b/web/react/utils/utils.jsx
@@ -676,11 +676,11 @@ export function applyTheme(theme) {
     }
 
     if (theme.centerChannelBg) {
-        changeCss('.app__content, .markdown__table, .markdown__table tbody tr, .suggestion-content, .modal .modal-content', 'background:' + theme.centerChannelBg, 1);
+        changeCss('.app__content, .markdown__table, .markdown__table tbody tr, .suggestion-list__content, .modal .modal-content', 'background:' + theme.centerChannelBg, 1);
         changeCss('#post-list .post-list-holder-by-time', 'background:' + theme.centerChannelBg, 1);
         changeCss('#post-create', 'background:' + theme.centerChannelBg, 1);
         changeCss('.date-separator .separator__text, .new-separator .separator__text', 'background:' + theme.centerChannelBg, 1);
-        changeCss('.post-image__column .post-image__details, .search-help-popover .search-autocomplete__divider span', 'background:' + theme.centerChannelBg, 1);
+        changeCss('.post-image__details, .search-help-popover .search-autocomplete__divider span', 'background:' + theme.centerChannelBg, 1);
         changeCss('.sidebar--right, .dropdown-menu, .popover, .tip-overlay', 'background:' + theme.centerChannelBg, 1);
         changeCss('.popover.bottom>.arrow:after', 'border-bottom-color:' + theme.centerChannelBg, 1);
         changeCss('.popover.right>.arrow:after, .tip-overlay.tip-overlay--sidebar .arrow, .tip-overlay.tip-overlay--header .arrow', 'border-right-color:' + theme.centerChannelBg, 1);
@@ -694,8 +694,8 @@ export function applyTheme(theme) {
 
     if (theme.centerChannelColor) {
         changeCss('.post-list__arrows', 'fill:' + changeOpacity(theme.centerChannelColor, 0.3), 1);
-        changeCss('.sidebar--left, .sidebar--right .sidebar--right__header', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1);
-        changeCss('.app__content, .post-create__container .post-create-body .btn-file, .post-create__container .post-create-footer .msg-typing, .command-name, .modal .modal-content, .dropdown-menu, .popover, .mentions-name, .tip-overlay', 'color:' + theme.centerChannelColor, 1);
+        changeCss('.sidebar--left, .sidebar--right .sidebar--right__header, .suggestion-list__content .command', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1);
+        changeCss('.app__content, .post-create__container .post-create-body .btn-file, .post-create__container .post-create-footer .msg-typing, .suggestion-list__content .command, .modal .modal-content, .dropdown-menu, .popover, .mentions__name, .tip-overlay', 'color:' + theme.centerChannelColor, 1);
         changeCss('#archive-link-home', 'background:' + changeOpacity(theme.centerChannelColor, 0.15), 1);
         changeCss('#post-create', 'color:' + theme.centerChannelColor, 2);
         changeCss('.mentions--top, .suggestion-list', 'box-shadow:' + changeOpacity(theme.centerChannelColor, 0.2) + ' 1px -3px 12px', 3);
@@ -709,17 +709,17 @@ export function applyTheme(theme) {
         changeCss('.markdown__table tbody tr:nth-child(2n)', 'background:' + changeOpacity(theme.centerChannelColor, 0.07), 1);
         changeCss('.channel-header__info>div.dropdown .header-dropdown__icon', 'color:' + changeOpacity(theme.centerChannelColor, 0.8), 1);
         changeCss('.channel-header #member_popover', 'color:' + changeOpacity(theme.centerChannelColor, 0.8), 1);
-        changeCss('.custom-textarea, .custom-textarea:focus, .preview-container .preview-div, .post-image__column .post-image__details, .sidebar--right .sidebar-right__body, .markdown__table th, .markdown__table td, .suggestion-content, .modal .modal-content, .modal .settings-modal .settings-table .settings-content .divider-light, .webhooks__container, .dropdown-menu, .modal .modal-header, .popover', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1);
+        changeCss('.custom-textarea, .custom-textarea:focus, .file-preview, .post-image__details, .sidebar--right .sidebar-right__body, .markdown__table th, .markdown__table td, .suggestion-list__content, .modal .modal-content, .modal .settings-modal .settings-table .settings-content .divider-light, .webhooks__container, .dropdown-menu, .modal .modal-header, .popover', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1);
         changeCss('.popover.bottom>.arrow', 'border-bottom-color:' + changeOpacity(theme.centerChannelColor, 0.25), 1);
         changeCss('.search-help-popover .search-autocomplete__divider span', 'color:' + changeOpacity(theme.centerChannelColor, 0.7), 1);
         changeCss('.popover.right>.arrow', 'border-right-color:' + changeOpacity(theme.centerChannelColor, 0.25), 1);
         changeCss('.popover.left>.arrow', 'border-left-color:' + changeOpacity(theme.centerChannelColor, 0.25), 1);
         changeCss('.popover.top>.arrow', 'border-top-color:' + changeOpacity(theme.centerChannelColor, 0.25), 1);
-        changeCss('.command-name, .popover .popover-title', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1);
+        changeCss('.suggestion-list__content .command, .popover .popover-title', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1);
         changeCss('.dropdown-menu .divider, .search-help-popover .search-autocomplete__divider:before', 'background:' + theme.centerChannelColor, 1);
         changeCss('.custom-textarea', 'color:' + theme.centerChannelColor, 1);
         changeCss('.post-image__column', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 2);
-        changeCss('.post-image__column .post-image__details', 'color:' + theme.centerChannelColor, 2);
+        changeCss('.post-image__details', 'color:' + theme.centerChannelColor, 2);
         changeCss('.post-image__column a, .post-image__column a:hover, .post-image__column a:focus', 'color:' + theme.centerChannelColor, 1);
         changeCss('@media(min-width: 768px){.search-bar__container .search__form .search-bar, .form-control', 'color:' + theme.centerChannelColor, 2);
         changeCss('.input-group-addon, .search-bar__container .search__form, .form-control', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1);
@@ -732,11 +732,11 @@ export function applyTheme(theme) {
         changeCss('.modal .custom-textarea:focus', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.3), 1);
         changeCss('.channel-intro, .modal .settings-modal .settings-table .settings-content .divider-dark, hr, .modal .settings-modal .settings-table .settings-links, .modal .settings-modal .settings-table .settings-content .appearance-section .theme-elements__header', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1);
         changeCss('.post.current--user .post__body, .post.post--comment.other--root.current--user .post-comment, pre, .post-right__container .post.post--root', 'background:' + changeOpacity(theme.centerChannelColor, 0.07), 1);
-        changeCss('.post.current--user .post__body, .post.post--comment.other--root.current--user .post-comment, .post.same--root.post--comment .post__body, .modal .more-table tbody>tr td, .member-div:first-child, .member-div, .access-history__table .access__report, .activity-log__table', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.1), 2);
-        changeCss('@media(max-width: 1800px){.inner__wrap.move--left .post.post--comment.same--root', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.07), 2);
-        changeCss('.post:hover, .modal .more-table tbody>tr:hover td, .modal .settings-modal .settings-table .settings-content .section-min:hover', 'background:' + changeOpacity(theme.centerChannelColor, 0.07), 1);
+        changeCss('.post.current--user .post__body, .post.post--comment.other--root.current--user .post-comment, .post.same--root.post--comment .post__body, .more-modal__list .more-modal__row, .member-div:first-child, .member-div, .access-history__table .access__report, .activity-log__table', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.1), 2);
+        changeCss('@media(max-width: 1800px){.inner-wrap.move--left .post.post--comment.same--root', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.07), 2);
+        changeCss('.post:hover, .more-modal__list .more-modal__row:hover, .modal .settings-modal .settings-table .settings-content .section-min:hover', 'background:' + changeOpacity(theme.centerChannelColor, 0.07), 1);
         changeCss('.date-separator.hovered--before:after, .date-separator.hovered--after:before, .new-separator.hovered--after:before, .new-separator.hovered--before:after', 'background:' + changeOpacity(theme.centerChannelColor, 0.07), 1);
-        changeCss('.command-name:hover, .mentions-name:hover, .suggestion--selected, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover, .bot-indicator', 'background:' + changeOpacity(theme.centerChannelColor, 0.15), 1);
+        changeCss('.suggestion-list__content .command:hover, .mentions__name:hover, .suggestion--selected, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover, .bot-indicator', 'background:' + changeOpacity(theme.centerChannelColor, 0.15), 1);
         changeCss('code, .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control', 'background:' + changeOpacity(theme.centerChannelColor, 0.1), 1);
         changeCss('@media(min-width: 960px){.post.current--user:hover .post__body ', 'background: none;', 1);
         changeCss('.sidebar--right', 'color:' + theme.centerChannelColor, 2);
@@ -759,7 +759,7 @@ export function applyTheme(theme) {
     if (theme.buttonBg) {
         changeCss('.btn.btn-primary, .tutorial__circles .circle.active', 'background:' + theme.buttonBg, 1);
         changeCss('.btn.btn-primary:hover, .btn.btn-primary:active, .btn.btn-primary:focus', 'background:' + changeColor(theme.buttonBg, -0.25), 1);
-        changeCss('.file-playback-controls', 'color:' + changeColor(theme.buttonBg, -0.25), 1);
+        changeCss('.file-playback__controls', 'color:' + changeColor(theme.buttonBg, -0.25), 1);
     }
 
     if (theme.buttonColor) {
@@ -767,7 +767,7 @@ export function applyTheme(theme) {
     }
 
     if (theme.mentionHighlightBg) {
-        changeCss('.mention-highlight, .search-highlight', 'background:' + theme.mentionHighlightBg, 1);
+        changeCss('.mention--highlight, .search-highlight', 'background:' + theme.mentionHighlightBg, 1);
     }
 
     if (theme.mentionHighlightBg) {
@@ -775,7 +775,7 @@ export function applyTheme(theme) {
     }
 
     if (theme.mentionHighlightLink) {
-        changeCss('.mention-highlight .mention-link', 'color:' + theme.mentionHighlightLink, 1);
+        changeCss('.mention--highlight .mention-link', 'color:' + theme.mentionHighlightLink, 1);
     }
 
     if (!theme.codeTheme) {
@@ -946,7 +946,7 @@ export function switchChannel(channel) {
 
     updateAddressBar(channel.name);
 
-    $('.inner__wrap').removeClass('move--right');
+    $('.inner-wrap').removeClass('move--right');
     $('.sidebar--left').removeClass('move--right');
 
     client.trackPage();
diff --git a/web/sass-files/sass/base/_module.scss b/web/sass-files/sass/base/_module.scss
new file mode 100644
index 000000000..987b9200b
--- /dev/null
+++ b/web/sass-files/sass/base/_module.scss
@@ -0,0 +1,3 @@
+// Only for combining all the files in this folder
+@import 'typography';
+@import 'structure';
diff --git a/web/sass-files/sass/base/_structure.scss b/web/sass-files/sass/base/_structure.scss
new file mode 100644
index 000000000..56888f8dc
--- /dev/null
+++ b/web/sass-files/sass/base/_structure.scss
@@ -0,0 +1,57 @@
+@charset 'UTF-8';
+
+html,
+body {
+    height: 100%;
+}
+
+body {
+    width: 100%;
+    height: 100%;
+    background: $bg--gray;
+    position: relative;
+
+    &.sticky {
+        background: $bg--white;
+
+        > .container-fluid {
+            overflow: auto;
+        }
+
+        .inner-wrap {
+            > .row.content {
+                min-height: 100%;
+                margin-bottom: -89px;
+            }
+        }
+    }
+}
+
+.inner-wrap {
+    height: 100%;
+
+    > .row.main {
+        height: 100%;
+        position: relative;
+    }
+}
+
+.container-fluid {
+    @include legacy-pie-clearfix;
+    height: 100%;
+    position: relative;
+}
+
+.channel-view {
+    @include clearfix;
+    height: 100%;
+    position: relative;
+}
+
+img {
+    max-width: 100%;
+
+    &.rounded {
+        @include border-radius(100%);
+    }
+}
diff --git a/web/sass-files/sass/base/_typography.scss b/web/sass-files/sass/base/_typography.scss
new file mode 100644
index 000000000..676a2c405
--- /dev/null
+++ b/web/sass-files/sass/base/_typography.scss
@@ -0,0 +1,27 @@
+@charset 'UTF-8';
+
+b,
+strong {
+    font-weight: 600;
+}
+
+a {
+    cursor: pointer;
+    text-decoration: none;
+    word-break: break-word;
+    color: $color--primary;
+}
+
+a:focus,
+a:hover {
+    color: $color--primary--hover;
+}
+
+body {
+    font-family: 'Open Sans', sans-serif;
+    -webkit-font-smoothing: antialiased;
+}
+
+.word-break--all {
+    word-break: break-all;
+}
diff --git a/web/sass-files/sass/components/_alerts.scss b/web/sass-files/sass/components/_alerts.scss
new file mode 100644
index 000000000..49ca3e8af
--- /dev/null
+++ b/web/sass-files/sass/components/_alerts.scss
@@ -0,0 +1,13 @@
+@charset 'UTF-8';
+
+.alert {
+    padding: 8px 12px;
+    @include border-radius($border-rad);
+}
+
+.alert--confirm {
+    display: inline-block;
+    float: left;
+    padding: 4px 10px;
+    margin: 1px 0 0 10px;
+}
\ No newline at end of file
diff --git a/web/sass-files/sass/components/_buttons.scss b/web/sass-files/sass/components/_buttons.scss
new file mode 100644
index 000000000..bb8efbb14
--- /dev/null
+++ b/web/sass-files/sass/components/_buttons.scss
@@ -0,0 +1,23 @@
+@charset 'UTF-8';
+
+.btn {
+    @include single-transition(all, .25s, ease-in);
+    @include border-radius($border-rad);
+
+    &.btn-primary {
+        border-color: transparent;
+        background: $color--primary;
+
+        &:hover,
+        &:focus,
+        &:active {
+            background: $color--primary--hover;
+        }
+    }
+
+    &.btn-inactive {
+        border-color: transparent;
+        background: #707070;
+        color: #fff;
+    }
+}
diff --git a/web/sass-files/sass/components/_dropdown.scss b/web/sass-files/sass/components/_dropdown.scss
new file mode 100644
index 000000000..f48e12c87
--- /dev/null
+++ b/web/sass-files/sass/components/_dropdown.scss
@@ -0,0 +1,16 @@
+@charset 'UTF-8';
+
+.dropdown-menu {
+    .divider {
+        @include opacity(.15);
+    }
+
+    > li > a {
+        color: inherit;
+
+        &:focus,
+        &:hover {
+            color: inherit;
+        }
+    }
+}
diff --git a/web/sass-files/sass/components/_emoticons.scss b/web/sass-files/sass/components/_emoticons.scss
new file mode 100644
index 000000000..661b25d94
--- /dev/null
+++ b/web/sass-files/sass/components/_emoticons.scss
@@ -0,0 +1,27 @@
+@charset 'UTF-8';
+
+.emoticon {
+    width: 1.5em;
+    height: 1.5em;
+    display: inline-block;
+    margin-bottom: .25em;
+    background-size: contain;
+}
+
+.emoticon-suggestion {
+    @include clearfix;
+    width: 100%;
+    height: 30px;
+    cursor: pointer;
+    font-size: 13px;
+    line-height: 30px;
+}
+
+.emoticon-suggestion__image {
+    width: 20px;
+    height: 20px;
+    margin: 6px 6px 0 5px;
+    padding: 0;
+    text-align: center;
+    vertical-align: top;
+}
diff --git a/web/sass-files/sass/components/_error-bar.scss b/web/sass-files/sass/components/_error-bar.scss
new file mode 100644
index 000000000..2b74a33ae
--- /dev/null
+++ b/web/sass-files/sass/components/_error-bar.scss
@@ -0,0 +1,30 @@
+@charset 'UTF-8';
+
+.error-bar {
+    background-color: #09f;
+    text-align: center;
+    position: relative;
+    color: #fff;
+    position: absolute;
+    top: 0;
+    width: 100%;
+    z-index: 9999;
+    padding: 5px 30px;
+
+    &__close {
+        position: absolute;
+        right: 0;
+        top: 0;
+        color: #fff;
+        font-size: 20px;
+        font-weight: 600;
+        text-decoration: none;
+        padding: 0 10px;
+        font-family: 'Open Sans', sans-serif;
+
+        &:hover {
+            color: #fff;
+            text-decoration: none;
+        }
+    }
+}
diff --git a/web/sass-files/sass/components/_files.scss b/web/sass-files/sass/components/_files.scss
new file mode 100644
index 000000000..17ffb206f
--- /dev/null
+++ b/web/sass-files/sass/components/_files.scss
@@ -0,0 +1,293 @@
+@charset 'UTF-8';
+
+.file-preview__container {
+    position: relative;
+    margin: 1px 0 10px;
+    width: 100%;
+    max-height: 100px;
+    height: 100px;
+    white-space: nowrap;
+    overflow-x: auto;
+    overflow-y: hidden;
+}
+
+.file-preview {
+    display: inline-block;
+    width: 120px;
+    height: 100px;
+    margin: 0 0 0 10px;
+    position: relative;
+    border: 1px solid #ddd;
+    @include clearfix;
+
+    &:hover .file-preview__remove:after {
+        @include opacity(1);
+    }
+
+    &:first-child {
+        margin-left: 0;
+    }
+
+    .spinner {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        margin-left: -16px;
+        margin-top: -16px;
+        width: 32px;
+        height: 32px;
+    }
+}
+
+.file-preview__image {
+    display: block;
+    height: auto;
+    max-width: 100%;
+}
+
+.file-preview__remove {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+
+    &:after {
+        background: rgba(0, 0, 0, .4);
+        content: '';
+        height: 100%;
+        left: 0;
+        opacity: 0;
+        position: absolute;
+        top: 0;
+        width: 100%;
+        @include opacity(0);
+    }
+
+    i {
+        top: 5px;
+        right: 5px;
+        position: absolute;
+        color: #fff;
+        cursor: pointer;
+        z-index: 5;
+        opacity: inherit;
+        text-shadow: 0 0px 3px #444;
+        text-shadow: 0 0px 3px rgba(0, 0, 0, .7);
+    }
+}
+
+.image-comment {
+    background-position: left top;
+    background-repeat: no-repeat;
+    width: 300px;
+    height: 300px;
+}
+
+
+.file-icon {
+    width: 100%;
+    height: 100%;
+
+    &.audio {
+        @include file-icon('../images/icons/audio.png');
+    }
+
+    &.video {
+        @include file-icon('../images/icons/video.png');
+    }
+
+    &.ppt {
+        @include file-icon('../images/icons/ppt.png');
+    }
+
+    &.generic {
+        @include file-icon('../images/icons/generic.png');
+    }
+
+    &.code {
+        @include file-icon('../images/icons/code.png');
+    }
+
+    &.excel {
+        @include file-icon('../images/icons/excel.png');
+    }
+
+    &.word {
+        @include file-icon('../images/icons/word.png');
+    }
+
+    &.pdf {
+        @include file-icon('../images/icons/pdf.png');
+    }
+
+    &.patch {
+        @include file-icon('../images/icons/patch.png');
+    }
+
+    &.image {
+        @include file-icon('../images/icons/image.png');
+    }
+}
+
+.post-image__column {
+    position: relative;
+    width: 240px;
+    height: 100px;
+    float: left;
+    margin: 5px 10px 5px 0;
+    border: 1px solid lightgrey;
+
+    a {
+        text-decoration: none;
+        color: grey;
+    }
+}
+
+.post-image__load {
+    height: 100%;
+    width: 100%;
+    background-size: 20px 20px;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+.post-image {
+    width: 100%;
+    height: 100%;
+    background-color: #fff;
+    background-repeat: no-repeat;
+    overflow: hidden;
+    position: relative;
+    text-align: center;
+
+    &.small {
+        background-position: center;
+    }
+
+    &.normal {
+        background-position: top left;
+    }
+
+    .spinner.file__loading {
+        position: absolute;
+        left: 50%;
+        margin-left: -16px;
+        top: 50%;
+        margin-top: -16px;
+    }
+
+    .file__loaded {
+        max-width: initial;
+        &.landscape,
+        &.quadrat {
+            height: 100px;
+        }
+        &.portrait {
+            width: 120px;
+        }
+    }
+
+    &:hover .file-playback__controls.stop {
+        @include opacity(1);
+    }
+}
+
+.post-image__thumbnail {
+    float: left;
+    width: 50%;
+    height: 100%;
+    cursor: zoom-in;
+    cursor: -webkit-zoom-in;
+}
+
+.post-image__details {
+    float: left;
+    @include clearfix;
+    word-break: break-word;
+    width: 50%;
+    height: 100%;
+    background: white;
+    border-left: 1px solid #ddd;
+    font-size: 13px;
+    padding: 7px;
+    color: #333;
+
+    .post-image__name {
+        margin-bottom: 3px;
+        display: block;
+    }
+
+    .post-image__download {
+        display: inline-block;
+        padding-right: 7px;
+        cursor: pointer;
+        @include opacity(.7);
+    }
+
+    .post-image__type {
+        @include opacity(.6);
+    }
+
+    .post-image__size {
+        margin-left: 4px;
+        @include opacity(.6);
+    }
+}
+
+.file-details__container {
+    @include display-flex;
+    display: -ms-flexbox;
+
+    .file-details {
+        width: 320px;
+        height: 270px;
+        padding: 14px;
+        text-align: left;
+        vertical-align: top;
+
+        .file-details__name {
+            color: #333;
+            font-size: 16px;
+        }
+
+        .file-details__info {
+            color: grey;
+        }
+    }
+    .file-details__preview {
+        width: 320px;
+        height: 270px;
+        border-right: 1px solid #ddd;
+        vertical-align: center;
+
+        // helper to center the image icon in the preview window
+        .file-details__preview-helper {
+            height: 100%;
+            display: inline-block;
+            vertical-align: middle;
+        }
+    }
+}
+
+.file-playback__controls {
+    position: absolute;
+    right: 5px;
+    bottom: 0;
+    font-size: 22px;
+    cursor: pointer;
+    z-index: 2;
+    -webkit-transition: opacity .6s;
+    -moz-transition: opacity .6s;
+    -o-transition: opacity .6s;
+    transition: opacity .6s;
+
+    &.stop {
+        @include opacity(0);
+    }
+}
+
+.view-image__loading {
+    background: black;
+    min-height: 100px;
+}
diff --git a/web/sass-files/sass/components/_inputs.scss b/web/sass-files/sass/components/_inputs.scss
new file mode 100644
index 000000000..5e3311182
--- /dev/null
+++ b/web/sass-files/sass/components/_inputs.scss
@@ -0,0 +1,26 @@
+@charset 'UTF-8';
+
+.form-control {
+    @include border-radius($border-rad);
+
+    &:focus {
+        @include box-shadow(none);
+    }
+
+    &.no-padding {
+        line-height: 32px;
+        padding: 0;
+    }
+
+    &.no-resize {
+        resize: none;
+    }
+}
+
+.form-control[disabled],
+.form-control[readonly],
+fieldset[disabled] .form-control {
+    cursor: auto;
+    background: rgba(#fff, .1);
+    color: inherit;
+}
diff --git a/web/sass-files/sass/components/_links.scss b/web/sass-files/sass/components/_links.scss
new file mode 100644
index 000000000..f31008b4f
--- /dev/null
+++ b/web/sass-files/sass/components/_links.scss
@@ -0,0 +1,23 @@
+@charset 'UTF-8';
+
+a {
+    cursor: pointer;
+    text-decoration: none;
+    word-break: break-word;
+    color: $color--primary;
+}
+
+a:focus,
+a:hover {
+    color: $color--primary--hover;
+}
+
+.text-danger,
+a.text-danger {
+    color: #e05f5d;
+
+    &:hover,
+    &:focus {
+        color: #e05f5d;
+    }
+}
diff --git a/web/sass-files/sass/components/_mentions.scss b/web/sass-files/sass/components/_mentions.scss
new file mode 100644
index 000000000..98efc599d
--- /dev/null
+++ b/web/sass-files/sass/components/_mentions.scss
@@ -0,0 +1,56 @@
+@charset 'UTF-8';
+
+.mention {
+    color: #fff;
+    background: $color--primary;
+    position: relative;
+    z-index: 10;
+    padding-bottom: 2px;
+    @include border-radius(3px);
+}
+
+.mentions__name {
+    position: relative;
+    width: 100%;
+    height: 36px;
+    padding: 2px;
+    z-index: 101;
+    line-height: 36px;
+    font-size: 13px;
+    cursor: pointer;
+    white-space: nowrap;
+
+    .mention-align {
+        @include clearfix;
+        text-overflow: ellipsis;
+        width: calc(100% - 50px);
+    }
+}
+
+.mention__image {
+    margin-right: 6px;
+    height: 32px;
+    width: 32px;
+    line-height: 36px;
+    display: block;
+    font-size: 20px;
+    text-align: center;
+    @include border-radius(32px);
+
+    .mention--align {
+        max-width: 80%;
+        overflow: hidden;
+        display: inline-block;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+}
+
+.mention__fullname {
+    color: grey;
+    padding-left: 10px;
+}
+
+.mention--highlight {
+    background-color: #fff2bb;
+}
diff --git a/web/sass-files/sass/components/_modal.scss b/web/sass-files/sass/components/_modal.scss
new file mode 100644
index 000000000..a8e8a99f7
--- /dev/null
+++ b/web/sass-files/sass/components/_modal.scss
@@ -0,0 +1,508 @@
+@charset 'UTF-8';
+
+#channel_members_modal .modal-body {
+    min-height: 110px;
+}
+
+.modal-body {
+    padding: 20px 15px;
+    overflow: auto;
+}
+
+.more-table {
+    margin: 0;
+    table-layout: fixed;
+}
+
+.modal {
+    width: 100%;
+    color: #333;
+
+    body.browser--IE & {
+        .modal-dialog {
+            @include translateY(0);
+        }
+    }
+
+    &.image_modal {
+        .modal-backdrop.in {
+            @include opacity(.7);
+        }
+    }
+
+    .custom-textarea {
+        color: inherit;
+        border-color: #ccc;
+
+        &:focus {
+            border-color: #ccc;
+            box-shadow: none;
+        }
+    }
+
+    .btn {
+        font-size: 13px;
+
+        &.btn-default {
+            border: none;
+            background: transparent;
+        }
+    }
+
+    .info__label {
+        font-weight: 600;
+        text-align: right;
+        padding-right: 0;
+    }
+
+    .team-member-list {
+        width: 100%;
+    }
+
+    .remove__member {
+        float: right;
+        color: #999;
+        font-size: 20px;
+        line-height: 0;
+        padding: 6px;
+
+        &:hover {
+            color: #e56565;
+        }
+    }
+
+    .modal-dialog {
+        max-width: 95%;
+        margin-left: auto;
+        margin-right: auto;
+    }
+
+    .modal-push-down {
+        margin-top: 5%;
+    }
+
+    .modal-next-bar {
+        position: absolute;
+        top: 0px;
+        right: 0;
+        height: 100%;
+    }
+
+    .modal-header {
+        border-radius: 0;
+        background: $color--primary;
+        color: #fff;
+        padding: 15px 15px 11px;
+        border: 1px solid #ddd;
+        min-height: 56px;
+        @include clearfix;
+
+        .modal-title {
+            float: left;
+            font-size: 17px;
+            line-height: 27px;
+            color: #f4f4f4;
+
+            .name {
+                font-weight: 600;
+                color: #fff;
+            }
+        }
+
+        .modal-action {
+            padding: 0;
+            margin: 0;
+        }
+
+        button.close {
+            color: #fff;
+            @include opacity(1);
+            z-index: 5;
+            width: 30px;
+            height: 30px;
+            line-height: 30px;
+            @include single-transition(all, .25s, ease-in);
+            position: absolute;
+            right: 10px;
+
+            &:hover {
+                background: rgba(0, 0, 0, .1);
+            }
+
+            span {
+                font-family: 'Open Sans', sans-serif;
+                line-height: 10px;
+            }
+        }
+
+        .btn {
+            &.btn-primary {
+                float: right;
+                margin: -4px 25px 0 0;
+                position: relative;
+
+                i {
+                    margin-right: 5px;
+                }
+            }
+        }
+    }
+
+    .no-channel-message {
+        text-align: center;
+        padding: 2em 1em;
+
+        .primary-message {
+            font-size: 1.25em;
+        }
+
+        .secondary-message {
+            @include opacity(.8);
+            margin: 1em 0 0;
+        }
+    }
+
+    .modal-content {
+        border-radius: 0;
+        box-shadow: none;
+    }
+
+    .modal-chevron-icon {
+        top: 50%;
+        font-size: 120%;
+    }
+
+    .modal-prev-bar {
+        position: absolute;
+        top: 0px;
+        left: 0;
+        height: 100%;
+    }
+
+    &#more_channels {
+        .modal-body {
+            padding: 0;
+        }
+    }
+
+    .modal-image {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        margin: 0 auto;
+        max-width: 100%;
+
+        .modal-body {
+            @include clearfix;
+            height: 100%;
+            display: table;
+            table-layout: fixed;
+            width: 100%;
+            max-height: 100%;
+        }
+
+        .image-wrapper {
+            position: relative;
+            max-width: 90%;
+            @include border-radius(3px);
+            display: table-cell;
+            vertical-align: middle;
+            text-align: center;
+            width: 100%;
+
+            &:hover {
+                @include border-radius(3px 3px 0 0);
+            }
+
+            &.default {
+                width: 100%;
+                height: 80%;
+            }
+
+            audio,
+            canvas,
+            progress,
+            video {
+                max-width: 100%;
+                height: auto;
+                display: block;
+            }
+
+            .modal-close {
+                background: url('../images/close.png') no-repeat;
+                @include background-size(100% 100%);
+                width: 37px;
+                height: 37px;
+                position: absolute;
+                right: -13px;
+                top: -13px;
+                @include opacity(0);
+                -webkit-transition: opacity .6s;
+                -moz-transition: opacity .6s;
+                -o-transition: opacity .6s;
+                transition: opacity .6s;
+                cursor: pointer;
+                z-index: 9999;
+
+                &.modal-close--show {
+                    @include opacity(1);
+                }
+            }
+
+            > div {
+                min-height: 100px;
+                min-width: 320px;
+                background: #fff;
+                display: inline-block;
+                position: relative;
+
+                &:hover .file-playback__controls.stop {
+                    @include opacity(1);
+                }
+            }
+
+            img {
+                max-width: 100%;
+                max-height: 100%;
+            }
+
+            .spinner.file__loading {
+                z-index: 2;
+                position: absolute;
+                left: 50%;
+                margin-left: -16px;
+                top: 50%;
+                margin-top: -16px;
+            }
+        }
+
+        .modal-content {
+            box-shadow: none;
+            background: rgba(0, 0, 0, 0);
+            width: 100%;
+            height: 100%;
+            padding: 0;
+            border: none;
+        }
+
+        .image-body {
+            vertical-align: middle;
+            display: table-cell;
+            text-align: center;
+            height: 100%;
+            padding: 0;
+            position: relative;
+            overflow: visible;
+        }
+
+        .image-control {
+            width: 50px;
+            height: 45px;
+            float: left;
+            background: url(../images/prev.png) left no-repeat;
+            top: 50%;
+            position: relative;
+            margin-top: -23px;
+            &.image-next {
+                float: right;
+                background: url(../images/next.png) left no-repeat;
+            }
+        }
+
+        .loader-image {
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            margin: auto;
+        }
+
+        .loader-percent {
+            position: absolute;
+            top: 55px;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            margin: auto;
+            color: grey;
+            height: 20px;
+        }
+
+        .modal-button-bar {
+            position: absolute;
+            bottom: -40px;
+            left: 0px;
+            right: 0px;
+            background-color: #222;
+            @include border-radius(0 0 3px 3px);
+            @include opacity(0);
+            -webkit-transition: opacity .6s;
+            -moz-transition: opacity .6s;
+            -o-transition: opacity .6s;
+            transition: opacity .6s;
+            line-height: 40px;
+            padding: 0 10px;
+
+            &.footer--show {
+                @include opacity(1);
+            }
+
+            .image-links {
+                a,
+                span {
+                    float: right;
+                }
+            }
+
+            .text {
+                vertical-align: middle;
+                bottom: 0;
+                color: white;
+                margin-left: 5px;
+            }
+
+            .public-link {
+                margin-right: 5px;
+            }
+        }
+    }
+}
+
+
+// Invite New Member
+.invite {
+    margin-right: 40px;
+}
+
+.row--invite {
+    margin-right: 40px;
+    @include clearfix;
+
+    .col-sm-6 {
+        padding: 0 0 0 15px;
+        &:first-child {
+            padding-left: 0;
+        }
+    }
+}
+
+.more-modal {
+    .user-list {
+        overflow-y: auto;
+        overflow-x: hidden;
+        margin-top: 10px;
+        position: relative;
+    }
+
+    .modal-body {
+        padding: 10px 0 20px;
+        overflow-x: hidden;
+    }
+
+    .filter-row {
+        margin: 10px 0;
+        @include clearfix;
+    }
+
+    .member-count {
+        margin-top: 5px;
+        float: right;
+        @include opacity(.8);
+    }
+
+    .more-purpose {
+        @include opacity(.7);
+    }
+}
+
+.modal-body.edit-modal-body {
+    overflow: visible;
+
+    .suggestion-list__content {
+        max-height: 150px;
+    }
+}
+
+.more-modal__list {
+    overflow: auto;
+    display: flex;
+    flex-direction: column;
+
+    .popover & {
+        font-size: 0.95em;
+
+        .more-modal__row {
+            padding: 5px 10px;
+        }
+
+        .more-modal__name {
+            font-weight: normal;
+        }
+    }
+
+    .more-modal__image {
+        flex-grow: 0;
+        flex-shrink: 0;
+        @include border-radius(60px);
+        margin-right: 8px;
+    }
+
+    .more-modal__details {
+        flex-grow: 1;
+        flex-shrink: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .more-modal__actions {
+        flex-grow: 0;
+        flex-shrink: 0;
+        padding-left: 20px;
+    }
+
+    .more-modal__name {
+        font-weight: 600;
+        font-size: .95em;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .more-modal__description {
+        @include opacity(.7);
+        display: block;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .more-modal__row {
+        display: flex;
+        padding: 8px 15px;
+        border-bottom: 1px solid;
+    }
+
+    p {
+        font-size: .9em;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        @include opacity(.8);
+        margin: 5px 0;
+    }
+}
+
+.filtered-user-list {
+    display: flex;
+    flex-direction: column;
+
+    .filter-row {
+        flex-grow: 0;
+        flex-shrink: 0;
+    }
+
+    .user-list {
+        flex-grow: 1;
+        flex-shrink: 1;
+    }
+}
diff --git a/web/sass-files/sass/components/_module.scss b/web/sass-files/sass/components/_module.scss
new file mode 100644
index 000000000..24488df96
--- /dev/null
+++ b/web/sass-files/sass/components/_module.scss
@@ -0,0 +1,19 @@
+// Only for combining all the files in this folder
+@import 'alerts';
+@import 'buttons';
+@import 'dropdown';
+@import 'emoticons';
+@import 'error-bar';
+@import 'files';
+@import 'inputs';
+@import 'links';
+@import 'mentions';
+@import 'modal';
+@import 'oauth';
+@import 'popover';
+@import 'scrollbar';
+@import 'search';
+@import 'suggestion-list';
+@import 'tooltip';
+@import 'tutorial';
+@import 'videos';
diff --git a/web/sass-files/sass/components/_oauth.scss b/web/sass-files/sass/components/_oauth.scss
new file mode 100644
index 000000000..cd8382a5c
--- /dev/null
+++ b/web/sass-files/sass/components/_oauth.scss
@@ -0,0 +1,38 @@
+@charset 'UTF-8';
+
+.prompt {
+    background: #fff;
+    border: 1px solid #ddd;
+    padding: 1em 2em 0;
+    margin: 50px auto;
+    max-width: 90%;
+    width: 600px;
+
+    .prompt__heading {
+        font-size: em(20px);
+        line-height: normal;
+        margin: 1em 0;
+        display: table;
+        width: 100%;
+
+        > div {
+            display: table-cell;
+            vertical-align: top;
+        }
+
+        img {
+            margin-right: 15px;
+        }
+    }
+
+    .prompt__allow {
+        margin: 1em 0;
+        font-size: em(24px);
+    }
+
+    .prompt__buttons {
+        text-align: right;
+        border-top: 1px solid #ddd;
+        padding: 1.5em 0;
+    }
+}
diff --git a/web/sass-files/sass/components/_popover.scss b/web/sass-files/sass/components/_popover.scss
new file mode 100644
index 000000000..588a71946
--- /dev/null
+++ b/web/sass-files/sass/components/_popover.scss
@@ -0,0 +1,184 @@
+@charset 'UTF-8';
+
+.popover {
+    @include border-radius($border-rad);
+    color: #333;
+
+    &.bottom,
+    &.right,
+    &.top,
+    &.left {
+        > .arrow:after {
+            border-color: transparent;
+        }
+    }
+
+    .popover-title {
+        background: rgba(black, .05);
+        padding: 8px 10px;
+    }
+
+    .popover-content {
+        p:last-child {
+            margin-bottom: 5px;
+        }
+    }
+}
+
+.channel-header__info .popover-content {
+    max-height: 250px;
+    overflow: auto;
+}
+
+.user-popover {
+    cursor: pointer;
+    display: inline-block;
+}
+
+.code-popover .popover-content {
+    padding: 5px;
+}
+
+.user-popover__image {
+    margin: 0 0 10px;
+    @include border-radius(128px);
+}
+
+.user-popover__email {
+    max-width: 200px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: block;
+}
+
+.search-help-popover {
+    visibility: hidden;
+    max-width: none;
+    width: 100%;
+    top: 36px;
+    @include single-transition(opacity, .3s, ease-in);
+    font-size: em(13px);
+
+    &.autocomplete {
+        display: block;
+        .popover-content {
+            padding: 10px;
+            position: relative;
+        }
+    }
+
+    .search-autocomplete__divider {
+        margin: 10px 0 5px;
+        line-height: 21px;
+        position: relative;
+        &:first-child {
+            margin-top: 5px;
+        }
+        span {
+            display: inline-block;
+            padding-right: 10px;
+            background: #fff;
+            z-index: 5;
+            position: relative;
+        }
+        &:before {
+            content: '';
+            position: absolute;
+            width: 100%;
+            height: 1px;
+            background: #ddd;
+            top: 10px;
+            left: 0;
+            @include opacity(.2);
+        }
+    }
+
+    .search-autocomplete__item {
+        cursor: pointer;
+        padding: 6px 8px;
+        margin: 3px 0 0 5px;
+        @include border-radius(2px);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+
+        &:hover {
+            background: rgba(black, .1);
+        }
+
+        &.selected {
+            background: rgba(black, .2);
+        }
+
+        .fa {
+            margin-right: 5px;
+            @include opacity(.5);
+        }
+
+        .profile-img {
+            margin-top: -1px;
+            height: 16px;
+            margin-right: 6px;
+            width: 16px;
+        }
+    }
+
+    &.bottom > .arrow {
+        top: -18px;
+        border-width: 9px;
+        left: 30px;
+    }
+
+    .popover-content {
+        max-height: 500px;
+        overflow: auto;
+        padding: 3px 13px;
+    }
+
+    h4 {
+        font-size: 1em;
+    }
+
+    ul {
+        padding-left: 17px;
+        span {
+            @include opacity(.8);
+        }
+        strong,
+        b {
+            @include opacity(1);
+        }
+    }
+
+    .tooltip-inner {
+        max-width: 100%;
+    }
+
+    &.visible {
+        visibility: visible;
+        @include opacity(1);
+    }
+}
+
+#member-list-popover {
+    max-width: initial;
+    .popover-content {
+        position: relative;
+        padding: 0;
+        width: 260px;
+        max-height: 350px;
+        .text-nowrap {
+            padding: 6px 10px;
+            width: 100%;
+            overflow: hidden;
+            line-height: 26px;
+            font-size: 13px;
+        }
+        .more__name {
+            margin-left: 6px;
+            max-width: 140px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+    }
+}
diff --git a/web/sass-files/sass/components/_scrollbar.scss b/web/sass-files/sass/components/_scrollbar.scss
new file mode 100644
index 000000000..4ecb38b1f
--- /dev/null
+++ b/web/sass-files/sass/components/_scrollbar.scss
@@ -0,0 +1,28 @@
+@charset 'UTF-8';
+
+::-webkit-scrollbar
+{
+  width: 8px;  /* for vertical scrollbars */
+  height: 8px; /* for horizontal scrollbars */
+}
+
+::-webkit-scrollbar-track
+{
+  background: rgba(0, 0, 0, 0.1);
+}
+
+::-webkit-scrollbar-thumb
+{
+    @include border-radius($border-rad * 2);
+    background: rgba(0, 0, 0, 0.4);
+}
+
+body{
+    scrollbar-face-color: rgba(0, 0, 0, 0.1);
+    scrollbar-shadow-color: #2D2C4D;
+    scrollbar-highlight-color:#7D7E94;
+    scrollbar-3dlight-color: #7D7E94;
+    scrollbar-darkshadow-color: #2D2C4D;
+    scrollbar-track-color: rgba(0, 0, 0, 0.1);
+    scrollbar-arrow-color: #C1C1D1;
+}
\ No newline at end of file
diff --git a/web/sass-files/sass/components/_search.scss b/web/sass-files/sass/components/_search.scss
new file mode 100644
index 000000000..faf0b8177
--- /dev/null
+++ b/web/sass-files/sass/components/_search.scss
@@ -0,0 +1,175 @@
+@charset 'UTF-8';
+
+#channel-header .search-bar__container {
+    padding: 0 9px 0 3px;
+}
+
+.search-bar__container {
+    padding: 12px 8px 0 0;
+    @include flex(0 0 56px);
+
+    .sidebar--right.move--left & {
+        padding-right: 42px;
+    }
+}
+
+.glyphicon-refresh-animate {
+    @include animation(spin .7s infinite linear);
+}
+
+.search__clear {
+    display: none;
+    position: absolute;
+    right: 0;
+    line-height: 45px;
+    margin-right: 13px;
+    @include single-transition(all, .2s, linear);
+    @include translateX(60px);
+    z-index: 5;
+    cursor: pointer;
+}
+
+.search-item-snippet {
+    @include clearfix;
+    text-overflow: ellipsis;
+}
+
+.sidebar__collapse {
+    cursor: pointer;
+    z-index: 5;
+    fill: #fff;
+    position: absolute;
+    left: 0;
+    font-size: 35px;
+    width: 49px;
+    @include single-transition(all, .2s, linear);
+    @include translateX(0px);
+    text-align: center;
+    padding-left: 1px;
+    line-height: 40px;
+    display: none;
+}
+
+.search-item-snippet {
+    ul,
+    ol {
+        padding-left: 20px;
+    }
+}
+
+.sidebar__search-icon {
+    position: absolute;
+    top: 15px;
+    margin-left: 10px;
+    font-size: 14px;
+    @include opacity(.5);
+    display: none;
+    color: #777;
+}
+
+.search__form {
+    position: relative;
+
+    .search-bar__container & {
+        margin: 0;
+        border: 1px solid #ddd;
+        @include border-radius(2px);
+        width: 300px;
+    }
+
+    .sidebar--right & {
+        width: 100%;
+    }
+
+    .search-bar {
+        height: 40px;
+        padding-right: 30px;
+        box-shadow: none;
+
+        .search-bar__container & {
+            height: 30px;
+            border: none;
+        }
+    }
+
+    .glyphicon-refresh-animate {
+        top: 27px;
+        position: absolute;
+        right: 27px;
+        color: #999;
+
+        .search-bar__container & {
+            right: 7px;
+            top: 8px;
+        }
+    }
+}
+
+.search-items-container {
+    position: relative;
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+    @include flex(1 1 auto);
+    height: calc(100% - 56px);
+    padding-top: 10px;
+}
+
+.search-results-header {
+    font-size: 1em;
+    text-transform: uppercase;
+    color: #999;
+    font-weight: 400;
+    color: #888;
+    height: 44px;
+    line-height: 44px;
+    padding: 0 10px 0 10px;
+    border-bottom: $border-gray;
+}
+
+.search-item__container {
+    .post {
+        padding: 0 1em 1em;
+        margin: 0;
+
+        &:first-child {
+            border: none;
+        }
+
+        .search-channel__name {
+            font-weight: 600;
+            margin: 0 0 10px 0;
+        }
+    }
+}
+
+.search-item__jump {
+    position: absolute;
+    right: 0;
+    top: 0px;
+    font-size: 13px;
+    @include opacity(.8);
+
+    &:hover {
+        @include opacity(1);
+    }
+}
+
+.search-item__comment {
+    position: absolute;
+    right: 0;
+    margin-right: 35px;
+    top: 0;
+}
+
+.search-item-time {
+    @include opacity(.7);
+    font-size: .9em;
+}
+
+.search-results-none {
+    padding: 10px;
+}
+
+.search-highlight {
+    background-color: #fff2bb;
+}
diff --git a/web/sass-files/sass/components/_suggestion-list.scss b/web/sass-files/sass/components/_suggestion-list.scss
new file mode 100644
index 000000000..125a3cf32
--- /dev/null
+++ b/web/sass-files/sass/components/_suggestion-list.scss
@@ -0,0 +1,41 @@
+@charset 'UTF-8';
+
+.suggestion-list {
+    width: 100%;
+    z-index: 100;
+    @extend %popover-box-shadow;
+}
+
+.suggestion-list--top {
+    position: absolute;
+}
+
+.suggestion-list__content {
+    width: 100%;
+    max-height: 292px;
+    background-color: #fff;
+    border: $border-gray;
+    overflow-x: hidden;
+    overflow-y: scroll;
+
+    .command {
+        position: relative;
+        width: 100%;
+        line-height: 24px;
+        padding: 5px 10px 8px;
+        z-index: 101;
+        font-size: .95em;
+        border-bottom: 1px solid #ddd;
+
+        .command__desc {
+            margin-left: 5px;
+            @include opacity(.5);
+            line-height: normal;
+        }
+    }
+}
+
+.suggestion-list__content--top {
+    position: absolute;
+    bottom: 0;
+}
diff --git a/web/sass-files/sass/components/_tooltip.scss b/web/sass-files/sass/components/_tooltip.scss
new file mode 100644
index 000000000..44c10edb9
--- /dev/null
+++ b/web/sass-files/sass/components/_tooltip.scss
@@ -0,0 +1,10 @@
+@charset 'UTF-8';
+
+.tooltip {
+    .tooltip-inner {
+        word-break: break-word;
+        font-size: 13px;
+        padding: 3px 10px 4px;
+        font-weight: 500;
+    }
+}
diff --git a/web/sass-files/sass/components/_tutorial.scss b/web/sass-files/sass/components/_tutorial.scss
new file mode 100644
index 000000000..f15919009
--- /dev/null
+++ b/web/sass-files/sass/components/_tutorial.scss
@@ -0,0 +1,208 @@
+@charset 'UTF-8';
+
+.tip-backdrop {
+    background: rgba(black, .5);
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 999;
+}
+
+.tip-overlay {
+    width: 350px;
+    max-width: 90%;
+    position: absolute;
+    background-color: #fff;
+    @include border-radius(3px);
+    padding: 20px;
+    z-index: 1000;
+
+    .arrow {
+        border-width: 10px;
+        position: absolute;
+        display: block;
+        width: 0;
+        height: 0;
+        border-color: transparent;
+        border-style: solid;
+    }
+
+    &.tip-overlay--sidebar {
+        max-width: 75%;
+        margin: 50px 0 0 10px;
+        min-height: 330px;
+        .tutorial__footer {
+            position: absolute;
+            width: 100%;
+            bottom: 20px;
+            left: 0;
+            padding: 0 20px;
+        }
+        .arrow {
+            top: 80px;
+            left: -10px;
+            margin-top: -10px;
+            border-left-width: 0;
+            border-right-color: #fff;
+        }
+    }
+
+    &.tip-overlay--header {
+        margin: 10px 0 0 10px;
+        .arrow {
+            top: 15px;
+            left: -10px;
+            border-left-width: 0;
+            border-right-color: #fff;
+        }
+    }
+
+    &.tip-overlay--chat {
+        margin-top: -10px;
+        .arrow {
+            left: 50%;
+            margin-left: -10px;
+            border-bottom-width: 0;
+            border-top-color: #fff;
+            bottom: -10px;
+        }
+    }
+
+    h4 {
+        font-size: em(16px);
+        font-weight: 600;
+        margin: 5px 0 15px;
+    }
+
+    p {
+        font-size: 13px;
+        line-height: 1.6;
+
+        strong {
+            font-weight: 600;
+        }
+    }
+
+    .btn {
+        background: #ccc;
+        color: #fff;
+        @include border-radius(3px);
+        border: none;
+        margin: 10px 0;
+
+        &:hover,
+        &:active,
+        &:focus {
+            color: #fff;
+            border: none;
+            background: #bbb;
+        }
+    }
+
+    .tip-opt {
+        font-size: 12px;
+
+        span {
+            @include opacity(.9);
+        }
+    }
+
+    .tutorial__circles {
+        margin: 1.5em 0px -1.7em -4px;
+
+        .circle {
+            width: 7px;
+            height: 7px;
+            margin: 0 4px;
+        }
+    }
+}
+
+.tip-button {
+    z-index: 998;
+    right: -10px;
+    top: -10px;
+    position: relative;
+    cursor: pointer;
+}
+
+.tip-div {
+    position: absolute;
+    top: 0px;
+    right: 0px;
+
+    &.tip-overlay--header {
+        top: 21px;
+        right: 2px;
+        .tip-button {
+            @include opacity(.8);
+        }
+    }
+
+    &.tip-overlay--sidebar {
+        left: 0;
+        @include opacity(.8);
+        top: -9px;
+    }
+}
+
+.tutorial-steps__container {
+    text-align: center;
+    width: 100%;
+    display: table;
+    height: 100%;
+    .tutorial__content {
+        display: table-cell;
+        vertical-align: middle;
+        padding-bottom: 100px;
+        padding: 20px 40px 40px;
+        .tutorial__steps {
+            position: relative;
+            max-width: 310px;
+            min-height: 370px;
+            margin-bottom: 50px;
+            text-align: left;
+            display: inline-block;
+        }
+    }
+    .tutorial__footer {
+        position: absolute;
+        bottom: 0;
+    }
+    h1 {
+        font-size: em(40px);
+        margin: -20px 0 30px;
+        font-weight: 600;
+    }
+    h3 {
+        font-size: em(24px);
+        margin-bottom: 30px;
+        font-weight: 600;
+    }
+    .tutorial__circles {
+        position: absolute;
+        bottom: 40px;
+    }
+    .tutorial-skip {
+        margin-left: 13px;
+    }
+}
+
+.tutorial__circles {
+    margin: 2em 0;
+    .circle {
+        width: 9px;
+        height: 9px;
+        @include border-radius(9px);
+        @include opacity(.2);
+        background: #000;
+        display: inline-block;
+        margin: 0 5px;
+        &.active {
+            background: $color--primary;
+            @include opacity(1);
+        }
+    }
+}
diff --git a/web/sass-files/sass/components/_videos.scss b/web/sass-files/sass/components/_videos.scss
new file mode 100644
index 000000000..91db750bd
--- /dev/null
+++ b/web/sass-files/sass/components/_videos.scss
@@ -0,0 +1,66 @@
+@charset 'UTF-8';
+
+.video-div {
+    position: relative;
+    max-width: 480px;
+    margin-bottom: 8px;
+    .video-thumbnail {
+        max-width: 100%;
+        height: auto;
+    }
+    .block {
+        background-color: rgba(0,0,0,.5);
+        border-radius: 10px;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        margin-top: -100px;
+        width: 200px;
+        margin: -75px 0 0 -100px;
+        height: 150px;
+    }
+}
+
+.video-type {
+    @include opacity(.8);
+    font-size: 15px;
+    margin: 0px;
+    padding: 0px;
+}
+
+.video-title {
+    font-size: 15px;
+    margin-top: 3px;
+}
+.play-button {
+    width: 100px;
+    height: 100px;
+    position: absolute;
+    top: 26px;
+    right: 51px;
+    border: 4px solid;
+    border-color: rgba(255,255,255,.4);
+    border-radius: 14px;
+}
+.play-button span {
+    position: absolute;
+    top: 10px;
+    left: 20px;
+    width: 0;
+    height: 0;
+    border-top: 36px solid transparent;
+    border-bottom: 36px solid transparent;
+    border-left: 60px solid rgba(255,255,255,.4);
+}
+
+.img-div {
+    -moz-force-broken-image-icon: 1;
+    position: relative;
+    max-width: 450px;
+    max-height: 500px;
+    margin-bottom: 8px;
+    border-radius: 5px;
+    &.placeholder {
+        height: 500px;
+    }
+}
diff --git a/web/sass-files/sass/layout/_content.scss b/web/sass-files/sass/layout/_content.scss
new file mode 100644
index 000000000..71bef0d7f
--- /dev/null
+++ b/web/sass-files/sass/layout/_content.scss
@@ -0,0 +1,85 @@
+@charset 'UTF-8';
+
+.inner-wrap {
+    &.move--left {
+        .search-bar__container {
+            display: none;
+        }
+    }
+
+    &.move--right {
+        .search-bar__container {
+            display: none;
+        }
+    }
+}
+
+.app__content {
+    height: 100%;
+    padding-top: 50px;
+    margin-left: 220px;
+    position: relative;
+    background: #fff;
+    @include display-flex;
+    @include flex-direction(column);
+
+    .channel__wrap & {
+        padding-top: 0;
+    }
+}
+#post-create {
+    @include flex(0 0 auto);
+    background: #fff;
+    width: 100%;
+    z-index: 3;
+}
+
+#archive-link-home {
+    @include flex(0 0 auto);
+    cursor: pointer;
+    padding: 10px 20px;
+    font-size: 13px;
+
+    .fa {
+        font-size: 11px;
+        @include opacity(.7);
+    }
+
+    a {
+        color: inherit;
+    }
+}
+
+.post-list {
+    .new-messages-hr {
+        margin-top: 5px;
+        margin-bottom: 0px;
+        border: 0;
+        border-top: 1px solid #f80;
+    }
+
+    .new-messages-text {
+        margin-top: 2px;
+        margin-bottom: 5px;
+        color: #f80;
+        text-align: center;
+    }
+}
+
+.new-messages-hr {
+    margin-top: 5px;
+    margin-bottom: 0px;
+    border: 0;
+    border-top: 1px solid #f80;
+}
+
+.new-messages-text {
+    margin-top: 2px;
+    margin-bottom: 5px;
+    color: #f80;
+    text-align: center;
+}
+
+.delete-message-text {
+    margin-top: 10px;
+}
diff --git a/web/sass-files/sass/layout/_footer.scss b/web/sass-files/sass/layout/_footer.scss
new file mode 100644
index 000000000..5624e6376
--- /dev/null
+++ b/web/sass-files/sass/layout/_footer.scss
@@ -0,0 +1,30 @@
+@charset 'UTF-8';
+
+.footer-pane {
+    background: #eee;
+    padding-bottom: 1em;
+
+    .footer-link {
+        padding: 0 1.5em;
+
+        &.copyright {
+            color: #999;
+            padding-right: 0;
+        }
+    }
+
+    .footer-site-name {
+        padding: 1.5em 0 1em;
+        font-size: 14px;
+        font-weight: bold;
+        text-transform: uppercase;
+    }
+}
+
+.footer,
+.footer-pane,
+.footer-push {
+    height: 89px;
+}
+
+
diff --git a/web/sass-files/sass/layout/_forms.scss b/web/sass-files/sass/layout/_forms.scss
new file mode 100644
index 000000000..1f51603cc
--- /dev/null
+++ b/web/sass-files/sass/layout/_forms.scss
@@ -0,0 +1,66 @@
+@charset 'UTF-8';
+
+.form-horizontal {
+    .modal-intro {
+        margin: -10px 0 30px;
+    }
+
+    .form__label {
+        text-align: left;
+        padding-right: 3px;
+        font-weight: 600;
+        font-size: 1.1em;
+
+        &.light {
+            font-weight: normal;
+            color: #999;
+            font-size: 1.05em;
+            font-style: italic;
+            padding-top: 2px;
+        }
+    }
+
+    .input__help {
+        color: inherit;
+        margin: 10px 0 0 10px;
+        word-break: break-word;
+        @include opacity(.8);
+
+        &.dark {
+            @include opacity(1);
+        }
+
+        &.error {
+            color: #a94442;
+        }
+    }
+
+    .form-control {
+        font-weight: normal;
+    }
+
+    .form-group {
+        margin-bottom: 25px;
+
+        &.less {
+            margin-bottom: 10px;
+        }
+    }
+}
+
+.help-block {
+    font-size: .95em;
+    margin: 10px 0 0;
+    color: #999;
+}
+
+.disabled-input {
+    background-color: #ddd !important;
+}
+
+.form-group {
+    &.form-group--small {
+        margin-bottom: 10px;
+    }
+}
+
diff --git a/web/sass-files/sass/layout/_headers.scss b/web/sass-files/sass/layout/_headers.scss
new file mode 100644
index 000000000..0a6b9f920
--- /dev/null
+++ b/web/sass-files/sass/layout/_headers.scss
@@ -0,0 +1,370 @@
+@charset 'UTF-8';
+
+#channel-header {
+    @include flex(0 0 56px);
+}
+
+.row {
+    &.header {
+        position: relative;
+
+        .channel__wrap & {
+            display: none;
+        }
+    }
+}
+
+.header-dropdown__icon {
+    font-size: 11px;
+    color: inherit;
+    top: 3px;
+}
+
+.channel-header__info {
+    display: table;
+    table-layout: fixed;
+    width: 100%;
+
+    > div {
+        display: block;
+        white-space: nowrap;
+        word-break: break-word;
+
+        &.dropdown {
+            max-width: 100%;
+            padding-right: 1em;
+            float: left;
+
+            .header-dropdown__icon {
+                color: #777;
+            }
+
+            a {
+                text-decoration: none;
+            }
+
+            .modal {
+                white-space: normal;
+            }
+        }
+
+        &.description {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            margin-top: 2px;
+            max-height: 45px;
+            .markdown-inline-img {
+                max-height: 45px;
+            }
+        }
+
+        &.popover {
+            white-space: normal;
+        }
+    }
+}
+
+.channel-intro {
+    margin: 0 auto 35px;
+    padding: 0 1em 5px;
+    max-width: 1000px;
+    border-bottom: 1px solid lightgrey;
+
+    .intro-links {
+        margin: 0 1.5em 10px 0;
+        display: inline-block;
+
+        .fa {
+            margin-right: 5px;
+        }
+    }
+
+    .channel-intro-profile {
+        margin-top: 5px;
+        margin-left: 63px;
+    }
+
+    .channel-intro-img {
+        float: left;
+        img {
+            @include border-radius(100px);
+        }
+    }
+
+    .channel-intro__title {
+        font-weight: 600;
+        font-size: 20px;
+        margin-bottom: 15px;
+    }
+
+    .channel-intro__content {
+        background: #f7f7f7;
+        padding: 10px 15px;
+        @include border-radius(3px);
+    }
+    .channel-intro-text {
+        margin-top: 35px;
+    }
+}
+
+// Team Header in Sidebar
+.sidebar--left,
+.sidebar--menu {
+    .team__header {
+        position: relative;
+        padding: 9px 10px;
+        @include legacy-pie-clearfix;
+
+        &:before {
+            @include single-transition(all, .05s, linear);
+            content: '';
+            background: none;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            position: absolute;
+        }
+
+        &:hover {
+            &:before {
+                background: rgba(black, .1);
+            }
+
+            .user__name {
+                color: #fff;
+            }
+
+            .navbar-right {
+                .dropdown-toggle {
+                    @include opacity(1);
+                }
+            }
+        }
+
+        .navbar-right {
+            font-size: .85em;
+            position: absolute;
+            top: 10px;
+            right: 22px;
+            z-index: 5;
+
+            .dropdown-toggle {
+                @include single-transition(all, .1s, linear);
+                padding: 10px;
+                @include opacity(.8);
+            }
+
+            .dropdown-menu {
+                li a {
+                    padding: 3px 20px;
+                    text-overflow: ellipsis;
+                    overflow: hidden;
+                }
+            }
+
+            .dropdown__icon {
+                fill: #fff;
+            }
+        }
+
+        .settings__link a:hover,
+        a:visited,
+        a:link,
+        a:active {
+            text-decoration: none;
+        }
+
+        .user__picture {
+            width: 36px;
+            height: 36px;
+            float: left;
+            @include border-radius(36px);
+            margin-right: 6px;
+        }
+
+        .header__info {
+            color: #fff;
+            @include clearfix;
+            padding-left: 2px;
+            z-index: 1;
+            position: relative;
+        }
+
+        .team__name,
+        .user__name {
+            display: block;
+            font-weight: 600;
+            font-size: 16px;
+            max-width: 85%;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            text-decoration: none;
+        }
+
+        .team__name {
+            line-height: 22px;
+            margin-top: -2px;
+            float: left;
+        }
+
+        .user__name {
+            @include single-transition(all, .1s, linear);
+            font-size: 14px;
+            line-height: 18px;
+            font-weight: 400;
+            color: #eee;
+            color: rgba(#fff, .8);
+        }
+
+        > .nav {
+            > li {
+                > a {
+                    float: right;
+                    background: none !important;
+                    padding: 2px;
+
+                    &.dropdown-toggle {
+                        line-height: 1.8;
+                        font-size: 1em;
+                        color: #fff;
+                    }
+                }
+            }
+        }
+    }
+    .search__clear {
+        display: none;
+    }
+}
+
+#navbar {
+    .navbar-default {
+        .navbar-toggle {
+            &.menu-toggle {
+                padding: 0 1em;
+            }
+        }
+    }
+}
+
+.channel-header {
+    width: 100%;
+    border-left: none;
+    font-size: 14px;
+    line-height: 56px;
+
+    #member_popover {
+        width: 50px;
+        color: #999;
+        cursor: pointer;
+
+        .fa {
+            margin-left: 4px;
+            font-size: 16px;
+        }
+    }
+
+    &.alt {
+        margin: 0;
+        th {
+            font-weight: normal !important;
+        }
+        td {
+            border: none;
+        }
+    }
+
+    th {
+        text-align: center;
+        &:first-child {
+            text-align: left !important;
+            border-left: none;
+            width: 100%;
+            padding-left: 1em;
+        }
+        &:last-child {
+            width: 8.9%;
+        }
+    }
+
+    td {
+        padding: 5px 25px 5px !important;
+        font-size: 13px;
+        text-align: center !important;
+        &:first-child {
+            text-align: left !important;
+        }
+    }
+
+    .heading {
+        margin: 0;
+        color: #555;
+        font-size: 1.3em;
+        font-weight: 600;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        max-width: 100%;
+        display: inline-block;
+        vertical-align: middle;
+        margin-right: 4px;
+    }
+
+    .caret {
+        margin-top: 3px;
+    }
+
+    .more {
+        color: #81848b;
+        display: inline-block;
+        vertical-align: top;
+        text-transform: capitalize;
+        font-size: 13px;
+    }
+
+    .disabled {
+        color: #999;
+    }
+}
+
+.channel-header__navbar {
+    font-size: 16px;
+
+    .heading {
+        margin-right: 3px;
+    }
+
+    .header-dropdown__icon {
+        top: 1px;
+    }
+}
+
+.channel-header__links {
+    font-family: 'Open Sans', sans-serif;
+    height: 30px;
+    width: 24px;
+    line-height: 26px;
+    margin-right: 9px;
+    font-size: 22px;
+
+    .channel__wrap.move--left & {
+        position: absolute;
+        right: -400px;
+        top: 14px;
+    }
+
+    > a {
+        color: inherit;
+        text-decoration: none;
+        @include opacity(.6);
+        @include single-transition(all, .1s, ease-in);
+
+        &:hover {
+            @include opacity(1);
+        }
+        &:focus {
+            color: inherit;
+        }
+    }
+}
diff --git a/web/sass-files/sass/layout/_markdown.scss b/web/sass-files/sass/layout/_markdown.scss
new file mode 100644
index 000000000..307060ac3
--- /dev/null
+++ b/web/sass-files/sass/layout/_markdown.scss
@@ -0,0 +1,116 @@
+@charset 'UTF-8';
+
+.markdown__heading {
+    font-weight: 700;
+    line-height: 1.5;
+}
+
+.markdown__paragraph-inline {
+    display: inline;
+
+    + .markdown__paragraph-inline {
+        margin-left: 4px;
+    }
+}
+
+#post-list {
+    .markdown-inline-img {
+        -moz-force-broken-image-icon: 1;
+        max-height: 500px;
+        height: 500px;
+    }
+}
+
+.post-body--code {
+    position: relative;
+
+    pre {
+        margin-bottom: 0;
+        word-break: normal;
+        overflow: auto;
+        word-wrap: normal;
+    }
+}
+
+.post-body--code__language {
+    -webkit-transform: translate3d(0,0,0);
+    position: absolute;
+    top: 0;
+    right: 0;
+    color: #fff;
+    background: #21586d;
+    padding: 4px 10px 5px 10px;
+    font-size: 13px;
+    opacity: .7;
+    z-index: 5;
+}
+
+.post__body {
+    hr {
+        height: 4px;
+        padding: 0;
+        margin: 15px 0 16px;
+        background-color: #e7e7e7;
+        border: 0 none;
+        @include opacity(.2);
+    }
+
+    code {
+        white-space: pre;
+    }
+
+    .codespan__pre-wrap {
+        code {
+            white-space: pre-wrap;
+        }
+    }
+}
+
+.markdown__table {
+    background: #fff;
+    margin: 5px 0 10px;
+
+    th,
+    td {
+        padding: 6px 13px;
+        border: 1px solid #ddd;
+    }
+
+    tbody tr {
+        background: #fff;
+
+        &:nth-child(2n) {
+            background-color: #f8f8f8;
+        }
+    }
+}
+blockquote {
+    border: none;
+    position: relative;
+    font-size: 16px;
+    padding: 10px 10px 10px 38px;
+    margin-bottom: 0;
+
+    &:before {
+        font-family: FontAwesome;
+        font-weight: normal;
+        font-style: normal;
+        display: inline-block;
+        text-decoration: inherit;
+        content: '\f10d';
+        left: 8px;
+        top: 5px;
+        position: absolute;
+        font-size: 20px;
+        @include opacity(.6);
+    }
+}
+pre {
+    border: none;
+    margin: 5px 0;
+    color: inherit;
+}
+code {
+    background: #fff;
+    color: inherit;
+}
diff --git a/web/sass-files/sass/layout/_module.scss b/web/sass-files/sass/layout/_module.scss
new file mode 100644
index 000000000..39ab2c6f8
--- /dev/null
+++ b/web/sass-files/sass/layout/_module.scss
@@ -0,0 +1,13 @@
+// Only for combining all the files in this folder
+@import 'content';
+@import 'footer';
+@import 'forms';
+@import 'headers';
+@import 'markdown';
+@import 'navigation';
+@import 'post';
+@import 'post-right';
+@import 'sidebar-left';
+@import 'sidebar-menu';
+@import 'sidebar-right';
+@import 'webhooks';
diff --git a/web/sass-files/sass/layout/_navigation.scss b/web/sass-files/sass/layout/_navigation.scss
new file mode 100644
index 000000000..65c62cb17
--- /dev/null
+++ b/web/sass-files/sass/layout/_navigation.scss
@@ -0,0 +1,137 @@
+@charset 'UTF-8';
+
+.nav > li > a:focus,
+.nav > li > a:hover {
+    background: transparent;
+}
+
+#navbar {
+    input {
+        margin: 0px 5px 0px 2px;
+    }
+
+    .navbar-default {
+        position: absolute;
+        border: none;
+        min-height: 45px;
+        background: $color--primary;
+
+        .navbar-nav {
+            > li {
+                > a {
+                    height: 45px;
+                    padding: 0 1.3em;
+
+                    i {
+                        line-height: 45px;
+                    }
+                }
+            }
+        }
+
+        .navbar-toggle {
+            width: 43px;
+            float: left;
+            border-color: transparent;
+            border-radius: 0;
+            margin: 0;
+            padding: 0 10px;
+            line-height: 48px;
+            height: 44px;
+            z-index: 5;
+            fill: #fff;
+
+            .icon-bar {
+                background: #fff;
+                width: 21px;
+            }
+
+            .glyphicon-search {
+                top: -1px;
+            }
+
+            .icon--white {
+                color: #fff;
+            }
+
+            &:hover,
+            &:active,
+            &:focus {
+                background: inherit;
+            }
+        }
+
+        .navbar-brand {
+            padding: 0 .5em;
+            height: 45px;
+            line-height: 45px;
+            float: none;
+            font-size: 16px;
+
+            .heading {
+                margin-right: 3px;
+                font-weight: 600;
+                color: #fff;
+            }
+
+            .header-dropdown__icon {
+                top: 1px;
+            }
+
+            .dropdown-toggle {
+                color: #fff;
+            }
+
+            .description {
+                display: inline-block;
+                margin-right: .5em;
+                color: #fff;
+
+                &.info-popover {
+                    width: 19px;
+                    height: 19px;
+                    background: url('../images/info__icon.png');
+                    @include background-size(100% 100%);
+                    vertical-align: middle;
+                    top: -1px;
+                    position: relative;
+                    cursor: pointer;
+                }
+            }
+        }
+    }
+
+    .sidebar-channel {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+
+        span {
+            white-space: nowrap;
+            margin-left: 2px;
+        }
+    }
+
+    .channel-create-btn {
+        margin-right: 15px;
+    }
+
+    .more-channel-table {
+        width: 100%;
+        border: 1px solid #dbdbdc;
+        td {
+            padding: 7px;
+        }
+        button {
+            width: 110px;
+        }
+    }
+}
+
+.badge-notify {
+    background: red;
+    position: absolute;
+    left: 4px;
+    top: 3px;
+    z-index: 100;
+}
diff --git a/web/sass-files/sass/layout/_post-right.scss b/web/sass-files/sass/layout/_post-right.scss
new file mode 100644
index 000000000..595577564
--- /dev/null
+++ b/web/sass-files/sass/layout/_post-right.scss
@@ -0,0 +1,155 @@
+@charset 'UTF-8';
+
+.post-right__container {
+    @include display-flex;
+    @include flex-direction(column);
+    height: 100%;
+
+    .post-right-root-message {
+        padding: 1em 1em 0;
+    }
+
+    .post-right-comments-container {
+        position: relative;
+
+        .post {
+            &:first-child {
+                padding-top: 15px;
+            }
+        }
+    }
+
+
+    .help_format_text {
+        bottom: -63px;
+        right: auto;
+    }
+
+    .post {
+        &.post--root {
+            padding-bottom: 1.2em;
+            border-bottom: 1px solid #ddd;
+
+            .post__body {
+                background: transparent !important;
+            }
+        }
+
+        .post__header {
+            .col__reply {
+                top: 0;
+                text-align: right;
+            }
+        }
+
+        .post__body {
+            width: 100%;
+        }
+    }
+
+    hr {
+        margin-bottom: 0;
+        border: none;
+    }
+
+    .post-create__container {
+        width: 100%;
+        margin-top: 10px;
+
+        .textarea-wrapper {
+            min-height: 100px;
+        }
+
+        .btn {
+            margin-bottom: 10px;
+        }
+
+        .custom-textarea {
+            min-height: 100px;
+        }
+
+        .msg-typing {
+            @include opacity(.7);
+            float: left;
+            margin-top: 3px;
+            font-size: 13px;
+            line-height: 20px;
+            min-width: 1px;
+            display: block;
+            height: 20px;
+            max-width: 230px;
+        }
+
+        .post-create-footer {
+            width: 100%;
+            padding: 5px 0 10px;
+        }
+
+        .post-right-comments-upload-in-progress {
+            padding: 6px 0;
+            color: #a8adb7;
+            margin-right: 10px;
+        }
+    }
+}
+.post-right-header {
+    font-size: 1em;
+    text-transform: uppercase;
+    color: #999;
+    font-weight: 400;
+    color: #888;
+    height: 39px;
+    padding: 10px 10px 0 15px;
+    border-bottom: $border-gray;
+}
+
+.post-right-root-container {
+    padding: 5px 10px;
+    border-bottom: $border-gray;
+}
+
+.post-right-root-container {
+    ul {
+        padding-left: 0;
+        margin-bottom: 2px;
+    }
+}
+
+.post-right-channel__name {
+    font-weight: 600;
+    margin: 0 0 10px 0;
+}
+
+.post-right-root-container li {
+    display: inline;
+    list-style-type: none;
+    padding-right: 3px;
+}
+
+.post-right-root-time {
+    color: #a8adb7;
+}
+
+.post-right-create-comment-container {
+    padding: 5px;
+    margin-bottom: 18px;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+}
+
+.post-right__scroll {
+    position: relative;
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+    @include flex(1 1 auto);
+
+    .file-preview__container {
+        margin-top: 5px;
+    }
+}
+
+.post-right-comment-time {
+    color: #a8adb7;
+}
diff --git a/web/sass-files/sass/layout/_post.scss b/web/sass-files/sass/layout/_post.scss
new file mode 100644
index 000000000..22c905aa6
--- /dev/null
+++ b/web/sass-files/sass/layout/_post.scss
@@ -0,0 +1,997 @@
+@charset 'UTF-8';
+
+.custom-textarea {
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    background: transparent;
+    border: 1px solid #ccc;
+    position: absolute;
+    top: 0px;
+    height: auto;
+    resize: none;
+    line-height: 20px;
+    min-height: 36px;
+    overflow-x: hidden;
+    &:focus {
+        border-color: #ccc;
+        box-shadow: none;
+    }
+}
+
+.bad-connection {
+    background: #ffffac !important;
+    color: #d04444 !important;
+}
+
+.textarea-div {
+    white-space: pre-wrap;
+    word-wrap: normal;
+    color: rgba(0,0,0,0);
+    position: absolute;
+    top: 0px;
+    word-break: break-word;
+    left: 1px;
+    line-height: 20px;
+    min-height: 36px;
+    height: auto;
+    border: 0;
+}
+
+body.ios {
+    .textarea-div {
+        padding: 7px 17px 7px 15px;
+        -webkit-overflow-scrolling: auto;
+    }
+}
+
+.textarea-div::-webkit-scrollbar {
+    display: none;
+}
+
+.textarea-wrapper {
+    position: relative;
+    .textbox-preview-area {
+        position: absolute;
+        z-index: 2;
+        top: 0;
+        left: 0;
+        box-shadow: none;
+        white-space: normal;
+    }
+    .help__text {
+        right: 0;
+        position: absolute;
+        z-index: 3;
+        bottom: -23px;
+        font-size: 13px;
+        cursor: pointer;
+    }
+    .textbox-preview-link {
+        margin-right: 8px;
+    }
+    min-height: 36px;
+}
+
+.help_format_text {
+    display: none !important;
+    position: absolute;
+    bottom: -23px;
+    left: 0px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: .85em;
+    @include opacity(0);
+    @include single-transition(all .2s ease);
+
+    b,
+    i,
+    code {
+        margin-right: 3px;
+    }
+    .textbox-preview-link {
+        font-size: 13px;
+        cursor: pointer;
+        margin-left: 15px;
+    }
+}
+
+.date-separator,
+.new-separator {
+    text-align: center;
+    height: 2em;
+    margin: 0;
+    position: relative;
+    z-index: 0;
+    &:before,
+    &:after {
+        content: '';
+        height: 1em;
+        position: absolute;
+        left: 0;
+        width: 100%;
+        display: none;
+    }
+    &:before {
+        bottom: 0;
+    }
+    &:after {
+        top: 0;
+    }
+    &.hovered--after {
+        &:before {
+            background: #f5f5f5;
+            display: block;
+        }
+    }
+    &.hovered--before {
+        &:after {
+            background: #f5f5f5;
+            display: block;
+        }
+    }
+    .separator__hr {
+        border-color: #ccc;
+        margin: 0;
+        position: relative;
+        z-index: 5;
+        top: 1em;
+    }
+    .separator__text {
+        line-height: 2em;
+        color: #555;
+        background: #fff;
+        display: inline-block;
+        padding: 0 1em;
+        font-weight: 700;
+        @include border-radius(50px);
+        position: relative;
+        z-index: 5;
+        font-size: 13px;
+    }
+}
+.new-separator {
+    .separator__hr {
+        border-color: #ffaf53;
+    }
+    .separator__text {
+        color: #f80;
+        font-weight: normal;
+    }
+}
+
+.file-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    color: #fff;
+    font-size: em(20px);
+    font-weight: 600;
+    z-index: 6;
+
+    .overlay__indent {
+        background-color: rgba(0, 0, 0, .6);
+        position: relative;
+        height: 100%;
+        @include clearfix;
+    }
+
+    &.center-file-overlay {
+        .overlay__indent {
+            margin-left: 220px;
+        }
+    }
+
+    &.right-file-overlay {
+        font-size: em(18px);
+        .overlay__circle {
+            width: 300px;
+            height: 300px;
+            margin: -150px 0 0 -150px;
+        }
+        .overlay__files {
+            margin: 60px auto 15px;
+            width: 150px;
+        }
+    }
+
+    .overlay__circle {
+        background: #111;
+        background: rgba(black, .7);
+        width: 370px;
+        height: 370px;
+        margin: -185px 0 0 -185px;
+        @include border-radius(500px);
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        pointer-events: none;
+    }
+
+    .overlay__files {
+        display: block;
+        margin: 75px auto 20px;
+    }
+
+    .overlay__logo {
+        position: absolute;
+        left: 50%;
+        bottom: 30px;
+        margin-left: -50px;
+        @include opacity(.3);
+    }
+
+    .fa {
+        display: inline-block;
+        font-size: 1.1em;
+        margin-right: 8px;
+    }
+}
+
+#post-list {
+    @include flex(1 1 auto);
+    position: relative;
+    overflow-y: hidden;
+    height: 100%;
+
+    .inactive {
+        display: none;
+    }
+
+    .post-list-holder-by-time {
+        background: #fff;
+        overflow-y: scroll;
+        width: 100%;
+        padding: 1em 0 0;
+        position: absolute;
+        height: 100%;
+        -webkit-overflow-scrolling: touch;
+        &.active {
+            display: inline;
+        }
+    }
+
+    .more-messages-text {
+        margin: 5px 0 10px;
+        display: block;
+        text-align: center;
+        outline: none;
+        border: none;
+        font-size: 13px;
+    }
+    .beginning-messages-text {
+        margin-top: 2px;
+        margin-bottom: 5px;
+        display: block;
+        text-align: center;
+        color: grey;
+    }
+}
+
+.post-list__timestamp {
+    position: absolute;
+    top: 8px;
+    left: 50%;
+    z-index: 50;
+    width: 120px;
+    text-align: center;
+    background: $color--primary;
+    color: #fff;
+    @include border-radius(3px);
+    font-size: 12px;
+    line-height: 25px;
+    margin-left: -60px;
+    -webkit-font-smoothing: initial;
+    @include single-transition(all, .6s, ease);
+    @include translateY(-45px);
+    @include opacity(0);
+    display: none;
+
+    &.scrolling {
+        @include translateY(0);
+        @include opacity(.8);
+    }
+}
+
+.post-list__arrows {
+    background-repeat: no-repeat;
+    width: 40px;
+    height: 40px;
+    text-align: center;
+    fill: #444;
+    position: absolute;
+    bottom: 0;
+    left: 9px;
+    z-index: 50;
+    @include opacity(0);
+    @include single-transition(all, .6s);
+    display: none;
+
+    svg {
+        color: inherit;
+        width: 28px;
+        height: 28px;
+    }
+
+    &.scrolling {
+        display: block;
+        @include opacity(1);
+    }
+}
+
+.post-create__container {
+    form {
+        width: 100%;
+        padding: .5em 14px 0;
+        margin: 0 auto;
+        max-width: 1028px;
+    }
+    .post-create-body {
+        position: relative;
+        padding: 0 0 2px;
+        .post-body__cell {
+            vertical-align: top;
+            position: relative;
+            &.scroll {
+                .btn-file {
+                    right: 15px;
+                }
+                .custom-textarea {
+                    padding-right: 43px;
+                }
+            }
+        }
+        .send-button {
+            display: none;
+            cursor: pointer;
+            padding-right: 4px;
+            width: 45px;
+            height: 37px;
+            font-size: 18px;
+            line-height: 37px;
+            vertical-align: bottom;
+            text-align: center;
+            @include single-transition(all, .15s);
+            &:active {
+                @include opacity(.75);
+            }
+        }
+        .custom-textarea {
+            padding-top: 8px;
+            padding-right: 28px;
+            max-height: 162px !important;
+            line-height: 1.5;
+        }
+        .textarea-div {
+            padding-top: 8px;
+            padding-right: 30px;
+            max-height: 163px !important;
+            overflow: auto;
+            line-height: 1.5;
+        }
+        .btn-file {
+            right: 0;
+            position: absolute;
+            top: 1px;
+            color: #444;
+            @include opacity(.5);
+            @include single-transition(all, .15s);
+            font-size: 16px;
+            padding: 7px 9px 6px;
+            &:hover,
+            &:active {
+                @include opacity(.9);
+                box-shadow: none;
+            }
+        }
+        textarea {
+            box-shadow: none;
+        }
+    }
+    .post-create-footer {
+        @include clearfix;
+        padding: 3px 0 0 0;
+        font-size: 13px;
+        .control-label {
+            font-weight: normal;
+            margin-bottom: 0;
+            top: -5px;
+            position: relative;
+        }
+    }
+    .msg-typing {
+        display: block;
+        @include opacity(.7);
+        white-space: nowrap;
+        margin-bottom: 5px;
+        overflow: hidden;
+        font-size: .95em;
+        text-overflow: ellipsis;
+        height: 20px;
+    }
+}
+
+.post-list__table {
+    display: table;
+    table-layout: fixed;
+    width: 100%;
+    min-height: 100%;
+    height: 100%;
+    .post-list__content {
+        display: table-cell;
+        vertical-align: bottom;
+        .dropdown-menu {
+            &.bottom {
+                top: auto;
+                bottom: 25px;
+            }
+        }
+    }
+}
+
+.post {
+    word-wrap: break-word;
+    padding: 8px .5em 0 1em;
+    position: relative;
+    max-width: 100%;
+    @include legacy-pie-clearfix;
+
+    &:hover {
+        .dropdown,
+        .comment-icon__container,
+        .post__reply,
+        .post__remove {
+            visibility: visible;
+        }
+        .permalink-icon {
+            visibility: visible;
+        }
+    }
+
+    &.post--highlight {
+        background-color: beige;
+    }
+
+    p {
+        margin: 0;
+        line-height: 1.6em;
+        font-size: .97em;
+        white-space: pre-wrap;
+
+        &:last-child {
+            margin-bottom: .5em;
+        }
+    }
+
+    span {
+        p:last-child {
+            margin-bottom: .5em;
+        }
+    }
+
+    &.post--root {
+        .comment-icon__container {
+            visibility: visible;
+        }
+    }
+
+    &.same--root {
+        &.same--user {
+            padding: 0 .5em 0 1em;
+
+            &:hover {
+                .post__time {
+                    @include opacity(.5);
+                }
+            }
+
+            .post__header {
+                margin: 0;
+                height: 0;
+
+                .col__name {
+                    display: none;
+                }
+
+                .col__reply {
+                    top: 6px;
+                }
+            }
+
+            .post__time {
+                top: 24px;
+            }
+
+            .post__time {
+                font: normal normal normal FontAwesome;
+                text-rendering: auto;
+                -webkit-font-smoothing: antialiased;
+                -moz-osx-font-smoothing: grayscale;
+                position: absolute;
+                top: -2px;
+                left: -7px;
+                font-size: 11px;
+                line-height: 37px;
+                @include opacity(0);
+            }
+        }
+
+        &.post--comment {
+            .post__link {
+                display: none;
+            }
+
+            .post__img {
+                img {
+                    display: none;
+                }
+            }
+        }
+
+        &.post--comment {
+            .post__body {
+                border-left: 4px solid #ddd;
+            }
+        }
+    }
+
+    &.other--root {
+        .comment-icon__container {
+            &.icon--show {
+                visibility: visible;
+            }
+        }
+
+        &.post--comment {
+            .popover {
+                margin-top: 84px;
+
+                > .arrow {
+                    top: 21px !important;
+                }
+            }
+
+            .post__header {
+                .col__reply {
+                    top: 53px;
+                }
+            }
+        }
+    }
+
+    .post__content {
+        margin: 0 auto;
+        position: relative;
+        max-width: 1000px;
+        display: table;
+        width: 100%;
+        table-layout: fixed;
+
+        > div {
+            display: table-cell;
+            vertical-align: top;
+        }
+    }
+
+    .post__header {
+        padding: 0;
+        list-style: none;
+        margin-bottom: 2px;
+
+        li {
+            display: inline-block;
+            vertical-align: top;
+        }
+
+        .col__name {
+            margin-right: 7px;
+            font-weight: 600;
+
+            .user-popover {
+                max-width: 200px;
+                @include clearfix;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+        }
+
+        .col__reply {
+            position: absolute;
+            right: 0;
+            top: 30px;
+            width: 65px;
+            white-space: nowrap;
+        }
+
+        .permalink-popover {
+            min-width: 0;
+
+            .popover-content {
+                padding: 5px;
+            }
+
+            .form-control,
+            .btn {
+                font-size: 13px;
+                height: 30px;
+                padding: 0 8px;
+                line-height: 30px;
+            }
+        }
+    }
+
+    .post__img {
+        width: 46px;
+        img {
+            width: 36px;
+            height: 36px;
+            vertical-align: inherit;
+            @include border-radius(50px);
+        }
+    }
+
+    .post__embed-container {
+        display: block;
+        max-height: 1000px;
+        transition: max-height .5s ease;
+        overflow: hidden;
+        &[hidden] {
+            max-height: 0;
+        }
+    }
+
+    .dropdown {
+        display: inline-block;
+        visibility: hidden;
+        margin-right: 5px;
+        top: -1px;
+
+        .dropdown-menu {
+            right: 0;
+            left: auto;
+            min-width: 130px;
+            padding: 2px 0;
+
+            li {
+                display: block;
+            }
+
+            a {
+                padding: 5px 15px;
+            }
+        }
+    }
+
+    .post__dropdown {
+        &:after {
+            content: '[...]';
+            top: -1px;
+            position: relative;
+        }
+    }
+
+    .post__remove {
+        font-family: 'Open Sans', sans-serif;
+        position: relative;
+        display: inline-block;
+        vertical-align: top;
+        right: 15px;
+        top: -5px;
+        font-size: 20px;
+        width: 20px;
+        height: 20px;
+        line-height: 20px;
+        font-weight: 600;
+        visibility: hidden;
+        color: inherit;
+        @include opacity(.5);
+        text-decoration: none;
+
+        &:hover {
+            @include opacity(.8);
+        }
+    }
+
+    .post__body {
+        word-wrap: break-word;
+        padding: .2em .5em;
+        @include legacy-pie-clearfix;
+        width: calc(100% - 75px);
+
+        p {
+            margin: 0 0 .4em;
+        }
+
+        p + p {
+            margin-top: 1.4em;
+        }
+
+        li {
+            > p {
+                margin-top: 10px;
+            }
+        }
+
+        img {
+            max-height: 400px;
+        }
+
+        ul,
+        ol {
+            margin-bottom: .4em;
+
+            p {
+                margin-bottom: 0;
+            }
+            li ul,
+            li ol {
+                padding: 0 0 0 20px;
+            }
+
+            li.list-item--task-list ul,
+            li.list-item--task-list ol {
+                margin-left: 20px;
+            }
+
+            li.list-item--task-list ul {
+                padding-left: 0;
+            }
+
+            li:not(.list-item--task-list) li.list-item--task-list,
+            li:not(.list-item--task-list) li.list-item--task-list ~ li {
+                margin-left: -20px;
+            }
+
+            li input[type='checkbox']:disabled {
+                vertical-align: top;
+                cursor: default;
+            }
+        }
+
+        ul li.list-item--task-list,
+        ul li.list-item--task-list ~ li {
+            list-style-type: none;
+        }
+
+        ul li.list-item--task-list ~ li:not(.list-item--task-list) {
+            text-indent: 3px;
+
+            &:before {
+                content: '⦁';
+                margin-right: 8px;
+            }
+        }
+    }
+
+    .post__link {
+        margin: 2px 0 5px;
+        font-size: 13px;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+    }
+
+    .post__embed-visibility {
+        cursor: pointer;
+        font: normal normal normal 14px/1 FontAwesome;
+        text-rendering: auto;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        margin: 5px 0 10px;
+        display: inline-block;
+
+        &:hover {
+            text-decoration: none;
+        }
+
+        &:before {
+            content: '\f065';
+            font-size: 14px;
+        }
+
+        &[data-expanded='true']:before {
+            content: '\f066';
+        }
+    }
+
+    .post__time {
+        font-size: .9em;
+    }
+
+    .post__time,
+    &.post--system .post__body {
+        @include opacity(.6);
+    }
+
+    .post-loading-gif {
+        height: 10px;
+        width: 10px;
+        margin-top: 6px;
+    }
+
+    .post-fail {
+        color: #d58a8a;
+    }
+
+    .post-waiting {
+        color: #999;
+    }
+
+    .permalink-icon {
+        display: inline-block;
+        color: $color--primary;
+        visibility: hidden;
+    }
+
+    .post__reply {
+        display: inline-block;
+        margin-right: 6px;
+        visibility: hidden;
+        svg {
+            width: 18px;
+            top: 3px;
+            fill: inherit;
+            position: relative;
+        }
+    }
+
+    .comment-icon__container {
+        fill: $color--primary;
+        display: inline-block;
+        visibility: hidden;
+
+        &:focus {
+            outline: none;
+        }
+
+        &.icon--visible {
+            visibility: visible;
+        }
+
+        svg {
+            height: 17px;
+            width: 17px;
+        }
+
+        .comment-icon {
+            display: inline-block;
+            top: 2px;
+            position: relative;
+            margin-right: 3px;
+            fill: inherit;
+        }
+
+        path {
+            fill: inherit;
+        }
+    }
+
+    .web-embed-data {
+        padding: 2px 0 0 10px;
+        background: #f9f9f9;
+        background: rgba(0, 0, 0, .05);
+        @include border-radius(2px);
+        height: 50px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        .embed-title {
+            margin: 3px 0 1px;
+            color: #555;
+            font-weight: 600;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
+        }
+        .embed-description {
+            margin: 0;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            color: #888;
+        }
+        .embed-link {
+            display: none;
+        }
+    }
+}
+
+.bot-indicator {
+    font-family: inherit;
+    font-size: 11px;
+    padding: 2px 4px;
+    border-radius: 2px;
+    font-weight: 600;
+    margin: 0 0 0 -4px;
+}
+
+.attachment {
+    .attachment__content {
+        border-width: 1px;
+        border-style: solid;
+        border-radius: 4px;
+        padding: 2px 5px;
+        margin: 0 0 5px 0;
+    }
+    .attachment__thumb-pretext {
+        border: 0 none;
+        background: transparent;
+    }
+    .attachment__container {
+        border-left-width: 4px;
+        border-left-style: solid;
+        padding: 2px 0 2px 10px;
+        &.attachment__container--good {
+            border-left-color: #00c100;
+        }
+        &.attachment__container--warning {
+            border-left-color: #dede01;
+        }
+        &.attachment__container--danger {
+            border-left-color: #e40303;
+        }
+    }
+    .attachment__body {
+        float: left;
+        width: 80%;
+        padding-right: 5px;
+        overflow-x: auto;
+        overflow-y: hidden;
+        &.attachment__body--no_thumb {
+            width: 100%;
+        }
+    }
+    .attachment__text p:last-of-type {
+        display: inline-block;
+    }
+    .attachment__thumb-pretext {
+        margin-left: 5px;
+    }
+    .attachment__title {
+        margin: 5px 0;
+        padding: 0;
+        line-height: 16px;
+        height: 22px;
+        font-size: 16px;
+        a {
+            font-size: 16px;
+        }
+    }
+    .attachment__author-icon {
+        @include border-radius(50px);
+        margin-right: 5px;
+        width: 14px;
+        height: 14px;
+    }
+    .attachment__image {
+        max-width: 100%;
+        margin-bottom: 1em;
+    }
+    .attachment__thumb-container {
+        width: 20%;
+        float: right;
+        img {
+            max-height: 75px;
+            max-width: 100%;
+        }
+    }
+    .attachment___fields {
+        width: 100%;
+        .attachment___field-caption {
+            font-weight: 700;
+        }
+        .attachment___field p {
+            margin: 0;
+        }
+    }
+}
+
+.permalink-text {
+    overflow: hidden;
+}
+
+.permalink-popover {
+    min-width: 320px;
+    margin-left: 50px !important;
+}
diff --git a/web/sass-files/sass/layout/_sidebar-left.scss b/web/sass-files/sass/layout/_sidebar-left.scss
new file mode 100644
index 000000000..ece054a15
--- /dev/null
+++ b/web/sass-files/sass/layout/_sidebar-left.scss
@@ -0,0 +1,197 @@
+@charset 'UTF-8';
+
+.sidebar--left {
+    position: absolute;
+    width: 220px;
+    left: 0;
+    height: 100%;
+    border-right: $border-gray;
+    background: #fafafa;
+    z-index: 5;
+
+    &.sidebar--padded {
+        padding-top: 44px;
+    }
+    .dropdown-menu {
+        max-height: 400px;
+        overflow-x: hidden;
+        overflow-y: auto;
+        max-width: 200px;
+        width: 200px;
+    }
+    .search__form {
+        margin: 0;
+        padding: 1em 1em 0;
+        display: none;
+    }
+    .badge {
+        background-color: $color--primary;
+        position: absolute;
+        right: 10px;
+        top: 5px;
+    }
+    .status {
+        position: relative;
+        top: 1px;
+        margin-right: 6px;
+        width: 12px;
+        display: inline-block;
+        svg {
+            max-height: 14px;
+        }
+        i,
+        path,
+        ellipse {
+            @include opacity(.5);
+            &.online--icon,
+            &.away--icon {
+                @include opacity(1);
+            }
+        }
+        .fa-lock {
+            margin-left: 1px;
+        }
+        .fa-globe {
+            top: -1px;
+            position: relative;
+        }
+    }
+    .nav-pills__container {
+        height: calc(100% - 80px);
+        position: relative;
+        overflow: auto;
+        -webkit-overflow-scrolling: touch;
+    }
+
+    .nav-pills__unread-indicator {
+        position: absolute;
+        left: 0;
+        right: 0;
+        width: 72%;
+        color: #fff;
+        background: #2389d7;
+        @include border-radius(50px);
+        margin: 0 auto;
+        padding: 3px 0 4px;
+        font-size: 13.5px;
+        text-align: center;
+        z-index: 1;
+    }
+
+    .nav-pills__unread-indicator-top {
+        top: 66px;
+    }
+    .nav-pills__unread-indicator-bottom {
+        bottom: 20px;
+    }
+
+    .nav {
+        &.nav-stacked {
+            > li + li {
+                margin: 0;
+            }
+        }
+        li {
+            > h4 {
+                font-size: 1em;
+                text-transform: uppercase;
+                margin: 1.1em 0 .5em;
+                font-weight: 400;
+                color: #aaa;
+                letter-spacing: -.3px;
+                padding: 0 10px 0 15px;
+            }
+            > a {
+                padding: 3px 10px 3px 25px;
+                line-height: 1.5;
+                border-radius: 0;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                &.has-badge {
+                    padding-right: 30px;
+                }
+                &.has-close {
+                    padding-right: 30px;
+                    &:hover {
+                        .btn-close {
+                            display: block;
+                            @include opacity(.8);
+                        }
+                    }
+                    .btn-close {
+                        font-family: 'Open Sans', sans-serif;
+                        position: absolute;
+                        right: 15px;
+                        top: -1px;
+                        font-size: 20px;
+                        font-weight: 600;
+                        @include opacity(0);
+                        display: none;
+                        &:hover {
+                            @include opacity(1);
+                        }
+                    }
+                }
+                &.nav-more {
+                    text-decoration: underline;
+                }
+                &.unread-title {
+                    font-weight: 600;
+                }
+            }
+            &.active {
+                a {
+                    &:before {
+                        content: '';
+                        position: absolute;
+                        top: 0;
+                        left: 0;
+                        width: 5px;
+                        height: 100%;
+                        background: #000;
+                    }
+                }
+                a,
+                a:hover,
+                a:focus {
+                    background-color: rgba(black, .1);
+                    border-radius: 0;
+                    font-weight: 400;
+                    position: relative;
+                }
+            }
+        }
+    }
+    .modal-title {
+        line-height: 2em;
+    }
+
+    .add-channel-btn {
+        float: right;
+        outline: none;
+        margin: -2px 0 0 0;
+        color: #aaa;
+        padding: 0 5px;
+        text-decoration: none;
+        font-size: 22px;
+        line-height: 18px;
+        font-weight: 700;
+        &:hover {
+            color: #666;
+        }
+    }
+}
+
+.channel-loading-gif {
+    height: 15px;
+    width: 15px;
+    margin-top: 2px;
+}
+
+.join-channel-loading-gif {
+    margin-top: 5px;
+    margin-left: 10px;
+    height: 25px;
+    width: 25px;
+}
diff --git a/web/sass-files/sass/layout/_sidebar-menu.scss b/web/sass-files/sass/layout/_sidebar-menu.scss
new file mode 100644
index 000000000..167b24ba0
--- /dev/null
+++ b/web/sass-files/sass/layout/_sidebar-menu.scss
@@ -0,0 +1,72 @@
+@charset 'UTF-8';
+
+.sidebar--menu {
+    position: absolute;
+    width: 220px;
+    right: 0;
+    height: 100%;
+    border-right: $border-gray;
+    padding: 0 0 2em 0;
+    background: #fafafa;
+    display: none;
+    .nav-pills__container {
+        padding-top: 5px;
+    }
+    .team__header {
+        display: none;
+        padding: 0 15px;
+        @include legacy-pie-clearfix;
+        a {
+            color: #fff;
+        }
+        .navbar-right {
+            font-size: .85em;
+            margin: 16px -5px 0;
+            .dropdown-toggle {
+                padding: 0 10px;
+            }
+            .dropdown-menu {
+                li a {
+                    padding: 3 20px;
+                    color: #555;
+                }
+            }
+            .dropdown__icon {
+                background: url('../images/dropdown-icon.png');
+                width: 4px;
+                height: 16px;
+                @include background-size(100% 100%);
+                display: inline-block;
+            }
+        }
+        .team__name {
+            float: left;
+            line-height: 50px;
+            font-weight: 600;
+            font-size: 1.2em;
+            max-width: 80%;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            text-decoration: none;
+        }
+    }
+    .nav {
+        > li {
+            > a {
+                font-size: 15px;
+                background: none !important;
+                color: inherit;
+                line-height: 40px;
+                padding: 0 15px;
+                .fa,
+                .glyphicon {
+                    width: 25px;
+                    text-align: center;
+                    left: -5px;
+                    position: relative;
+                }
+            }
+        }
+    }
+}
diff --git a/web/sass-files/sass/layout/_sidebar-right.scss b/web/sass-files/sass/layout/_sidebar-right.scss
new file mode 100644
index 000000000..e1a7d7641
--- /dev/null
+++ b/web/sass-files/sass/layout/_sidebar-right.scss
@@ -0,0 +1,129 @@
+@charset 'UTF-8';
+
+.sidebar--right {
+    position: fixed;
+    width: 400px;
+    height: 100%;
+    right: 0px;
+    padding: 0;
+    background: #fff;
+    @include translateX(400px);
+
+    .post-body {
+        img {
+            max-height: 200px;
+        }
+    }
+
+    .post {
+        .post__header {
+            .col__name {
+                .user-popover {
+                    max-width: 130px;
+                }
+            }
+        }
+    }
+
+    .sidebar--right__content {
+        height: 100%;
+        @include display-flex;
+        @include flex-direction(column);
+    }
+
+    .sidebar--right__back {
+        color: inherit;
+        @include opacity(.8);
+        width: 30px;
+        text-align: center;
+        margin: 0 0 0 -14px;
+        font-size: 13px;
+        display: inline-block;
+    }
+
+    .sidebar-right__body {
+        @include flex(1 1 auto);
+        border-left: $border-gray;
+        border-top: $border-gray;
+        @include display-flex;
+        @include flex-direction(column);
+        height: calc(100% - 56px);
+        @include border-radius(2px 0 0 0);
+    }
+
+    .sidebar__overlay {
+        width: 100%;
+        height: 100%;
+        background-color: yellow;
+        @include opacity(.1);
+        position: absolute;
+        z-index: 5;
+        pointer-events: none;
+    }
+
+    .input-group {
+        word-break: break-word;
+    }
+
+    .sidebar--right__close {
+        margin: 11px 0 0 0;
+        width: 22px;
+        height: 22px;
+        opacity: .5;
+        font-size: 22px;
+        line-height: 0;
+        background: none;
+        float: right;
+        outline: none;
+        border: none;
+        @include single-transition(all, .2s, ease-in);
+
+        &:hover,
+        &:active {
+            opacity: .8;
+        }
+
+        i {
+            position: relative;
+            top: -2px;
+        }
+    }
+
+    .sidebar--right__header {
+        font-size: 1em;
+        text-transform: uppercase;
+        color: inherit;
+        height: 44px;
+        padding: 0 1em;
+        line-height: 44px;
+        @include flex(0 0 44px);
+        border-bottom: $border-gray;
+    }
+
+    .sidebar--right__subheader {
+        font-size: 1em;
+        padding: 1em 1em 0;
+
+        h4 {
+            font-size: 1em;
+        }
+
+        ul {
+            @include opacity(.7);
+            padding: 10px 0 0 30px;
+        }
+
+        li {
+            font-size: .95em;
+            padding-bottom: 10px;
+        }
+    }
+
+    .suggestion-list__content {
+        max-height: 120px;
+    }
+}
+
+.sidebar-right-container {
+    height: 100%;
+}
diff --git a/web/sass-files/sass/layout/_webhooks.scss b/web/sass-files/sass/layout/_webhooks.scss
new file mode 100644
index 000000000..d6e367218
--- /dev/null
+++ b/web/sass-files/sass/layout/_webhooks.scss
@@ -0,0 +1,37 @@
+@charset 'UTF-8';
+
+.webhooks__container {
+    background: rgba(black, .1);
+    border: 1px solid;
+    @include border-radius(3px);
+    padding: 0 13px 15px;
+    margin-top: 10px;
+}
+
+.webhook__item {
+    font-size: 13px;
+    position: relative;
+
+    &:last-child {
+        .divider-light:last-child {
+            display: none;
+        }
+    }
+
+    .webhook__remove {
+        position: absolute;
+        right: -7px;
+        top: 8px;
+        width: 30px;
+        height: 30px;
+        font-size: 22px;
+        font-weight: bold;
+        text-align: center;
+        text-decoration: none;
+        color: #e05f5d;
+    }
+
+    .webhook__url {
+        padding-right: 20px;
+    }
+}
diff --git a/web/sass-files/sass/pages/_access-history.scss b/web/sass-files/sass/pages/_access-history.scss
new file mode 100644
index 000000000..7ede7b085
--- /dev/null
+++ b/web/sass-files/sass/pages/_access-history.scss
@@ -0,0 +1,32 @@
+@charset 'UTF-8';
+
+.access-history__table {
+    display: table;
+    width: 100%;
+    padding-top: 15px;
+    line-height: 1.6;
+
+    &:first-child {
+        padding: 0;
+    }
+
+    > div {
+        display: table-cell;
+        vertical-align: top;
+    }
+
+    .access__date {
+        font-weight: 600;
+        font-size: 15px;
+        width: 190px;
+    }
+
+    .access__report {
+        border-bottom: 1px solid #ddd;
+        padding-bottom: 15px;
+    }
+
+    .report__info {
+        @include opacity(.8);
+    }
+}
diff --git a/web/sass-files/sass/pages/_activity-log.scss b/web/sass-files/sass/pages/_activity-log.scss
new file mode 100644
index 000000000..6e8d0a925
--- /dev/null
+++ b/web/sass-files/sass/pages/_activity-log.scss
@@ -0,0 +1,64 @@
+@charset 'UTF-8';
+
+@keyframes highlight {
+    from {
+        background: rgba(yellow, .5);
+    }
+    to {
+        background: none;
+    }
+}
+
+.animation--highlight {
+    &:before {
+        content: '';
+        animation: highlight 1.5s ease;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+    }
+}
+
+.activity-log__table {
+    display: table;
+    width: 100%;
+    line-height: 1.8;
+    border-top: 1px solid #ddd;
+    padding: 15px 0;
+
+    &:first-child {
+        padding-top: 0;
+        border: none;
+    }
+
+    > div {
+        display: table-cell;
+        vertical-align: top;
+    }
+
+    .activity-log__report {
+        width: 80%;
+    }
+
+    .activity-log__action {
+        text-align: right;
+    }
+
+    .report__platform {
+        font-size: 15px;
+        font-weight: 600;
+        .fa {
+            margin-right: 6px;
+        }
+    }
+
+    .report__info {
+        @include opacity(.8);
+    }
+}
+
+.session-help-text {
+    padding: 0 0 20px;
+}
diff --git a/web/sass-files/sass/pages/_admin-console.scss b/web/sass-files/sass/pages/_admin-console.scss
new file mode 100644
index 000000000..f83ce487e
--- /dev/null
+++ b/web/sass-files/sass/pages/_admin-console.scss
@@ -0,0 +1,343 @@
+@charset 'UTF-8';
+
+.admin-controller {
+    > div {
+        height: 100%;
+    }
+
+    .inner-wrap {
+        position: absolute;
+        width: 100%;
+    }
+
+    .row {
+        margin: 0;
+    }
+
+    h3 {
+        font-weight: 600;
+        border-bottom: 1px solid #ddd;
+        padding-bottom: .5em;
+        margin: 1em 0;
+    }
+
+    .table {
+        background: #fff;
+    }
+
+    .form-control {
+        background-color: #fff;
+        border: 1px solid #ccc;
+        color: #555;
+
+        &:focus {
+            border-color: #66afe9;
+            outline: 0;
+            -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
+            box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
+        }
+    }
+
+    .btn {
+        color: #333;
+
+        &.btn-primary {
+            background: #2389d7;
+
+            &:hover,
+            &:focus,
+            &:active {
+                background: #1c6dab;
+            }
+        }
+    }
+
+    .dropdown-menu {
+        background: #fff;
+        border: 1px solid rgba(0,0,0,.15);
+        color: inherit;
+    }
+
+    .sidebar--left {
+        &.sidebar--collapsable {
+            background: #333;
+
+            .team__header {
+                background: transparent;
+                margin-bottom: 5px;
+            }
+
+            .nav {
+                li {
+                    padding: 0;
+                    @include opacity(1);
+
+                    .icon {
+                        width: 17px;
+                    }
+
+                    > a {
+                        &:hover,
+                        &.active,
+                        &:focus {
+                            background-color: #eaeaea;
+                        }
+                    }
+
+                    > h4 {
+                        background: #333;
+                        padding: 10px 10px;
+                        margin: 1px 0 0;
+
+                        .menu-icon--right {
+                            top: 6px;
+                            right: 12px;
+                        }
+                    }
+                }
+
+                .menu-icon--right {
+                    position: absolute;
+                    right: 10px;
+                    top: 3px;
+                    font-size: 18px;
+                    font-weight: 600;
+                    width: 20px;
+                    height: 20px;
+                    line-height: 20px;
+                    text-align: center;
+
+                    .fa {
+                        font-size: 13px;
+                        right: -2px;
+                        position: relative;
+                        color: #fff;
+                    }
+                }
+
+                &.nav__sub-menu {
+                    background: #111;
+                    -webkit-font-smoothing: auto;
+
+                    &.padded {
+                        padding: 5px 0;
+                    }
+
+                    li {
+                        > a {
+                            font-size: 13px;
+                            padding: 5px 35px 5px 15px;
+                            background: transparent;
+                            color: #bbb;
+
+                            &:hover {
+                                color: lighten($color--primary, 10);
+                            }
+
+                            &.active {
+                                color: #fff;
+                                font-weight: 600;
+                            }
+                        }
+
+                        .nav-more {
+                            font-size: 13px;
+                            padding: 5px 15px;
+                            background: transparent;
+                            color: #bbb;
+                            display: block;
+                            cursor: pointer;
+                            &:hover {
+                                color: lighten($color--primary, 10);
+                            }
+                        }
+                    }
+                }
+
+                &.nav__inner-menu {
+                    li {
+                        > a {
+                            padding-left: 20px;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    .log__panel {
+        overflow: scroll;
+        width: 100%;
+        height: 800px;
+        border: 1px solid #ddd;
+        margin-top: 10px;
+        padding: 5px;
+        background-color: white;
+    }
+
+    .app__content {
+        color: #333;
+
+        &.admin {
+            overflow: auto;
+            background-color: #f1f1f1;
+            padding: 0 20px 20px;
+            min-height: 600px;
+        }
+
+        .wrapper--fixed {
+            max-width: 800px;
+        }
+
+        .form-horizontal {
+            margin-top: 40px;
+
+            .control-label {
+                text-align: left;
+                padding-right: 0;
+                font-weight: 600;
+            }
+
+            .form-group {
+                margin-bottom: 25px;
+            }
+
+            .file__upload {
+                position: relative;
+                margin: 0 10px 10px 0;
+                display: inline-block;
+
+                input {
+                    position: absolute;
+                    @include opacity(0);
+                    width: 100%;
+                    height: 100%;
+                    z-index: 5;
+                    top: 0;
+                    left: 0;
+                }
+            }
+
+            .help-text {
+                &.no-margin {
+                    margin: 0;
+                }
+
+                ul,
+                ol {
+                    padding-left: 23px;
+                }
+
+                margin: 10px 0 0 15px;
+                color: #777;
+
+                .help-link {
+                    margin-right: 5px;
+                }
+
+                .btn {
+                    font-size: 13px;
+                }
+            }
+
+            .alert {
+                display: inline-block;
+                padding: 5px 7px;
+                margin: 1em 0 0;
+                top: 1px;
+                position: relative;
+
+                .fa {
+                    margin-right: 5px;
+                }
+            }
+        }
+
+        .banner {
+            background: #fff;
+            border: 1px solid #ddd;
+            padding: .7em 1.5em;
+            font-size: .95em;
+            margin: 2em 0;
+
+            .banner__heading {
+                font-size: 1.5em;
+            }
+
+            .banner__content {
+                width: 80%;
+            }
+
+            &.warning {
+                background: #e60000;
+            }
+        }
+
+        .popover {
+            border-radius: 3px;
+            width: 100%;
+            font-size: .95em;
+        }
+
+        .panel {
+            border: none;
+            background-color: transparent;
+        }
+
+        .panel-default {
+            > .panel-heading {
+                padding: 10px 0;
+                background-color: transparent;
+            }
+
+            .panel-body {
+                padding: 30px 0 10px;
+            }
+        }
+
+        .panel-group {
+            margin-bottom: 50px;
+        }
+
+        .panel-title {
+            font-size: 24px;
+            line-height: 1.5;
+
+            a {
+                text-decoration: none;
+                display: block;
+                @include clearfix;
+
+                &.collapsed {
+                    .fa-minus {
+                        display: none;
+                    }
+
+                    .fa-plus {
+                        display: inline-block;
+                    }
+                }
+
+                .fa {
+                    font-size: 18px;
+                    float: right;
+                    margin-top: 8px;
+                    color: #aaa;
+                }
+
+                .fa-plus {
+                    display: none;
+                }
+            }
+        }
+    }
+
+    .member-list-holder {
+        .member-role,
+        .member-drop {
+            position: absolute;
+            right: 15px;
+            top: 8px;
+        }
+    }
+}
diff --git a/web/sass-files/sass/pages/_docs.scss b/web/sass-files/sass/pages/_docs.scss
new file mode 100644
index 000000000..24e96772b
--- /dev/null
+++ b/web/sass-files/sass/pages/_docs.scss
@@ -0,0 +1,19 @@
+@charset 'UTF-8';
+
+.docs__page {
+    line-height: 1.7;
+    padding-bottom: 20px;
+
+    > div {
+        width: 1170px;
+        margin: 0 auto;
+        padding: 0 15px;
+        max-width: 100%;
+    }
+
+    h1.markdown__heading {
+        border-bottom: 1px solid #ddd;
+        padding-bottom: 1rem;
+        margin: 1em 0 1em;
+    }
+}
diff --git a/web/sass-files/sass/pages/_error-page.scss b/web/sass-files/sass/pages/_error-page.scss
new file mode 100644
index 000000000..8cd0716ca
--- /dev/null
+++ b/web/sass-files/sass/pages/_error-page.scss
@@ -0,0 +1,35 @@
+@charset 'UTF-8';
+
+body {
+    &.error {
+        .container-fluid {
+            display: table;
+            height: 90%;
+        }
+
+        .error__container {
+            max-width: 800px;
+            margin: 0 auto;
+            display: table-cell;
+            vertical-align: top;
+            padding: 5em 0;
+            text-align: left;
+            color: #555;
+        }
+
+        .error__icon {
+            font-size: 4em;
+            color: #ccc;
+        }
+
+        h2 {
+            font-weight: 600;
+            font-size: 1.5em;
+            margin: .8em 0 .5em;
+        }
+
+        p {
+            font-size: 1.2em;
+        }
+    }
+}
diff --git a/web/sass-files/sass/pages/_loading.scss b/web/sass-files/sass/pages/_loading.scss
new file mode 100644
index 000000000..5e4e7359a
--- /dev/null
+++ b/web/sass-files/sass/pages/_loading.scss
@@ -0,0 +1,48 @@
+@charset 'UTF-8';
+
+.loading-screen {
+    display: table;
+    width: 100%;
+    height: 100%;
+    padding: 60px;
+    text-align: center;
+
+    .loading__content {
+        display: table-cell;
+        vertical-align: middle;
+        font-size: 0;
+
+        h3 {
+            font-size: 16px;
+            font-weight: 400;
+            margin: 0 .2em 0;
+            display: inline-block;
+        }
+
+        .round {
+            background-color: #444;
+            width: 4px;
+            height: 4px;
+            display: inline-block;
+            margin: 0 2px;
+            opacity: .1;
+            @include border-radius(10px);
+            @include animation(move .75s infinite linear);
+        }
+
+        @for $i from 1 through 3 {
+            .round-#{$i} {
+                @include animation-delay(.2s*$i);
+            }
+        }
+
+        @include keyframes(move) {
+            from {
+                opacity: 1;
+            }
+            to {
+                opacity: .1;
+            }
+        }
+    }
+}
diff --git a/web/sass-files/sass/pages/_module.scss b/web/sass-files/sass/pages/_module.scss
new file mode 100644
index 000000000..48c1af1d9
--- /dev/null
+++ b/web/sass-files/sass/pages/_module.scss
@@ -0,0 +1,11 @@
+// Only for combining all the files in this folder
+@import 'access-history';
+@import 'activity-log';
+@import 'admin-console';
+@import 'docs';
+@import 'error-page';
+@import 'loading';
+@import 'print';
+@import 'settings';
+@import 'signup';
+@import 'statistics';
diff --git a/web/sass-files/sass/pages/_print.scss b/web/sass-files/sass/pages/_print.scss
new file mode 100644
index 000000000..1c2ef9c0f
Binary files /dev/null and b/web/sass-files/sass/pages/_print.scss differ
diff --git a/web/sass-files/sass/pages/_settings.scss b/web/sass-files/sass/pages/_settings.scss
new file mode 100644
index 000000000..3c735be3c
--- /dev/null
+++ b/web/sass-files/sass/pages/_settings.scss
@@ -0,0 +1,451 @@
+@charset 'UTF-8';
+
+.user-settings {
+    min-height: 300px;
+    .table-responsive {
+        max-width: 560px;
+        max-height: 300px;
+    }
+}
+
+.modal {
+    .settings-modal {
+        width: 800px;
+        .modal-back {
+            width: 50px;
+            height: 40px;
+            top: 12px;
+            font-size: 27px;
+            font-weight: normal;
+            line-height: 32px;
+            position: absolute;
+            left: 0;
+            text-align: center;
+            .fa {
+                line-height: inherit;
+                position: absolute;
+                width: 100%;
+                height: 100%;
+                left: 0;
+            }
+        }
+        .modal-body {
+            padding: 0;
+            margin: 0 auto;
+            min-height: calc(100% - 62px);
+        }
+        li {
+            list-style: none;
+        }
+        label {
+            font-weight: 600;
+        }
+
+        .no-padding--left {
+            padding-left: 0;
+        }
+        .padding-top {
+            padding-top: 7px;
+            &.x2 {
+                padding-top: 14px;
+            }
+            &.x3 {
+                padding-top: 21px;
+            }
+        }
+        .padding-bottom {
+            padding-bottom: 7px;
+            &.x2 {
+                padding-bottom: 14px;
+            }
+            &.x3 {
+                padding-bottom: 21px;
+            }
+            .control-label {
+                font-weight: 600;
+                &.text-left {
+                    text-align: left;
+                }
+            }
+        }
+        .profile-img {
+            width: 128px;
+            height: 128px;
+        }
+        .settings-table {
+            max-width: 1000px;
+            margin: 0 auto;
+            display: table;
+            table-layout: fixed;
+            width: 100%;
+            > div {
+                display: table-cell;
+                vertical-align: top;
+            }
+            .nav {
+                position: fixed;
+                width: 179px;
+                &.position--top {
+                    top: 57px;
+                }
+            }
+            .security-links {
+                margin-right: 20px;
+                .fa {
+                    margin-right: 6px;
+                }
+            }
+            .settings-links {
+                width: 180px;
+            }
+            .settings-content {
+                padding: 0px 20px 30px;
+                .modal-header {
+                    display: none;
+                }
+                .section-min {
+                    padding: 1em 0;
+                    margin-bottom: 0;
+                    cursor: pointer;
+                    position: relative;
+                    @include clearfix;
+                    &:hover {
+                        background: #f9f9f9;
+                    }
+                    &:hover .fa {
+                        display: inline-block;
+                    }
+                    &:hover .section-edit {
+                        text-decoration: underline;
+                    }
+                }
+
+                .section-max {
+                    background: rgba(black, .05);
+                    padding: 1em 0 1.3em;
+                    margin-bottom: 0;
+                    @include clearfix;
+                    .section-title {
+                        margin-bottom: 10px;
+                    }
+                }
+
+                .appearance-section {
+                    .theme-group {
+                        .input-group-addon {
+                            padding: 4px 5px;
+                            width: 40px;
+                        }
+                        img {
+                            border: 1px solid rgba(black, .15);
+                            width: 29px;
+                        }
+                    }
+                    .group--code {
+                        select {
+                            padding-right: 25px;
+                        }
+                        select::-ms-expand {
+                            display: none;
+                        }
+                        &:before {
+                            pointer-events: none;
+                            position: absolute;
+                            top: 11px;
+                            right: 50px;
+                            z-index: 5;
+                            content: '\f0d7';
+                            display: inline-block;
+                            font: normal normal normal 14px/1 FontAwesome;
+                            font-size: inherit;
+                            text-rendering: auto;
+                            -webkit-font-smoothing: antialiased;
+                            -moz-osx-font-smoothing: grayscale;
+                        }
+                        select {
+                            -moz-appearance: none;
+                            -webkit-appearance: none;
+                            appearance: none;
+                        }
+                    }
+                    .premade-themes {
+                        margin-bottom: 10px;
+                        .theme-label {
+                            font-weight: 400;
+                            margin-top: 5px;
+                        }
+                        img {
+                            border: 3px solid transparent;
+                        }
+                        .active {
+                            img {
+                                border-color: $color--primary;
+                            }
+                        }
+                    }
+
+                    .theme-elements {
+                        padding-left: 15px;
+
+                        .element {
+                            margin-right: 10px;
+
+                            &:nth-child(2n) {
+                                margin-right: 0;
+                            }
+                        }
+                    }
+
+                    .theme-elements__header {
+                        margin: 10px 20px 0px 0;
+                        border-bottom: 1px solid #ccc;
+                        padding: 5px 0 10px;
+                        font-size: em(13.5px);
+                        font-weight: 600;
+                        cursor: pointer;
+
+                        .fa-minus {
+                            display: none;
+                        }
+
+                        &.open {
+                            .fa-minus {
+                                display: inline-block;
+                            }
+                            .fa-plus {
+                                display: none;
+                            }
+                        }
+
+                        .header__icon {
+                            float: right;
+                            @include opacity(.5);
+                        }
+                    }
+
+                    .theme-elements__body {
+                        padding-top: 5px;
+                        display: none;
+                        @include legacy-pie-clearfix;
+                        background: rgba(255, 255, 255, .05);
+                        padding: 20px 0 0 20px;
+                        margin: 0 20px 0 0;
+                        @include border-radius(0 0 3px 3px);
+                    }
+
+                    .custom-label {
+                        white-space: nowrap;
+                        font-weight: normal;
+                        font-size: 12px;
+                        width: 100%;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        margin-bottom: 0;
+                    }
+                    .input-group-addon {
+                        background: transparent;
+                    }
+                    .radio {
+                        label {
+                            font-weight: 600;
+                        }
+                    }
+                }
+
+                .section-title {
+                    margin-bottom: 5px;
+                    font-weight: 600;
+                    padding-right: 50px;
+                }
+
+                .section-edit {
+                    text-align: right;
+                    margin-bottom: 5px;
+                    .fa {
+                        margin-right: 5px;
+                        font-size: 12px;
+                        @include opacity(.5);
+                        display: none;
+                        &.fa-chevron-down {
+                            top: -1px;
+                            margin-right: 0;
+                            position: relative;
+                        }
+                    }
+                }
+
+                .section-describe {
+                    @include opacity(.7);
+                    white-space: pre;
+                    @include clearfix;
+                    text-overflow: ellipsis;
+                }
+
+                .divider-dark {
+                    border-bottom: 1px solid #aaa;
+                }
+
+                .divider-light {
+                    border-bottom: 1px solid lightgrey;
+                }
+
+                .setting-list {
+                    padding: 0;
+                    list-style-type: none;
+                }
+
+                .setting-list__hint {
+                    margin-top: 20px;
+                }
+
+                .mentions-input {
+                    margin-top: 10px;
+                }
+
+                .setting-list-item {
+                    margin-top: 7px;
+                }
+                .has-error {
+                    color: #a94442;
+                }
+
+                .file-status {
+                    font-size: 13px;
+                    margin-top: 8px;
+                    color: #555;
+                }
+
+                .confirm-import {
+                    padding: 4px 10px;
+                    margin: 10px 0;
+                }
+            }
+        }
+    }
+    .nav-pills {
+        > li {
+            margin: 0;
+            a {
+                padding: 8px 5px 8px 15px;
+                border-radius: 0;
+                color: #777;
+            }
+            .glyphicon {
+                width: 25px;
+                top: 2px;
+            }
+            &:hover {
+                a {
+                    background-color: rgba(black, .1);
+                }
+            }
+            &.active {
+                a {
+                    color: #111;
+                    background-color: #e1e1e1;
+                    &:before {
+                        content: '';
+                        position: absolute;
+                        top: 0;
+                        left: 0;
+                        width: 5px;
+                        height: 100%;
+                        background: #000;
+                    }
+                }
+                a,
+                a:hover,
+                a:focus {
+                    background-color: rgba(black, .1);
+                    border-radius: 0;
+                    font-weight: 400;
+                    position: relative;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                }
+            }
+        }
+    }
+    h3 {
+        font-size: em(20px);
+    }
+}
+
+.channel-settings {
+    padding: 0 10px;
+}
+
+.tab-header {
+    margin-bottom: 1em;
+}
+
+.setting-name {
+    color: grey;
+    font-weight: 500;
+}
+
+.sel-btn {
+    margin-right: 5px;
+}
+
+.member-div {
+    border-bottom: 1px solid lightgrey;
+    position: relative;
+    padding: 2px;
+    margin: 0;
+    width: 100%;
+    &:first-child {
+        border-top: 1px solid lightgrey;
+    }
+    .post-profile-img {
+        @include border-radius(50px);
+        margin-right: 8px;
+    }
+}
+
+.member-role,
+.member-drop {
+    .fa {
+        margin-right: 5px;
+        @include opacity(.5);
+        font-size: 12px;
+    }
+
+    .member-menu {
+        top: -50%;
+        right: 110%;
+    }
+}
+
+.member-invite {
+    position: absolute;
+    right: 10px;
+    top: 7px;
+}
+
+.member-menu {
+    right: 0px;
+    left: auto;
+}
+
+.member-list {
+    width: 100%;
+    overflow-x: visible;
+}
+
+.member-page {
+    padding-top: 50px;
+}
+
+.active-border {
+    border: 1px solid red;
+}
+
+.color-btn {
+    margin: 4px;
+}
+
+.no-resize {
+    resize: none;
+}
diff --git a/web/sass-files/sass/pages/_signup.scss b/web/sass-files/sass/pages/_signup.scss
new file mode 100644
index 000000000..53c59c222
--- /dev/null
+++ b/web/sass-files/sass/pages/_signup.scss
@@ -0,0 +1,440 @@
+@charset 'UTF-8';
+
+.signup-header {
+    width: 100%;
+    line-height: 33px;
+    padding: 0 1em .2em;
+    background: $bg--gray;
+
+    .fa {
+        margin-right: 5px;
+    }
+}
+.signup-team__container {
+    padding: 100px 0px 50px 0px;
+    max-width: 380px;
+    margin: 0 auto;
+    position: relative;
+
+    &.padding--less {
+        padding-top: 50px;
+    }
+
+    .form-control:focus {
+        @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6));
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    p {
+        line-height: 1.3;
+    }
+
+    h1 {
+        font-weight: 600;
+    }
+
+    h2 {
+        font-weight: 600;
+        margin-bottom: .8em;
+        letter-spacing: -.5px;
+        font-size: em(30px);
+    }
+
+    h3 {
+        font-weight: 600;
+        margin: 0 0 1.3em 0;
+        font-size: 1.5em;
+    }
+
+    h4 {
+        font-size: em(20px);
+        font-weight: 600;
+        margin-bottom: 1em;
+    }
+
+    h5 {
+        font-size: em(16px);
+    }
+
+    hr {
+        margin: 2em 0;
+    }
+
+    p {
+        color: #555;
+        line-height: 1.5;
+        margin-bottom: 1em;
+    }
+
+    .input-group {
+        &.input-group--limit {
+            table-layout: fixed;
+            width: 100%;
+
+            .tooltip-inner {
+                word-wrap: break-word;
+            }
+
+            .form-control {
+                text-align: left;
+                display: table-cell;
+                width: 100%;
+            }
+
+            .input-group-addon {
+                text-align: left;
+                width: 50%;
+                display: table-cell;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+        }
+    }
+
+    .inner__content {
+        padding: 0 1rem;
+        margin: 30px 0 20px;
+    }
+
+    .block--gray {
+        background: #f2f2f2;
+        display: inline-block;
+        padding: .85em 1.2em;
+        font-weight: 600;
+        @include border-radius(3px);
+    }
+
+    form {
+        margin-bottom: .8em;
+    }
+
+    .signup-team-confirm__container {
+        padding: 100px 0px 100px 0px;
+    }
+
+    .signup-team-logo {
+        display: none;
+        width: 210px;
+        margin: 0 0 2em 0;
+    }
+
+    .signup-team-login {
+        padding-bottom: 10px;
+        font-weight: 600;
+    }
+
+    .signup-team__name {
+        margin: .5em 0 0;
+        font-size: 2.2em;
+        font-weight: 600;
+        padding-left: 1rem;
+    }
+
+    .signup-team__subdomain {
+        margin: .2em 0 1.2em;
+        font-size: 1.5em;
+        padding-left: 1rem;
+        font-weight: 300;
+        text-transform: uppercase;
+    }
+
+    .form-control {
+        height: em(38px);
+    }
+
+    .or__container {
+        height: 1px;
+        background: #ddd;
+        text-align: left;
+        margin: 2em 0;
+
+        span {
+            width: 40px;
+            top: -10px;
+            position: relative;
+            font-size: 1.14286em;
+            line-height: 20px;
+            font-weight: 600;
+            background: #fff;
+            display: inline-block;
+            text-align: center;
+        }
+    }
+
+    ul {
+        margin-bottom: 0;
+        padding-left: 18px;
+    }
+
+    .signup__email-container {
+        margin-left: 1rem;
+    }
+
+    .btn {
+        font-size: 1em;
+        padding: em(7px) em(15px);
+        font-weight: 600;
+        margin-right: 5px;
+
+        .fa {
+            font-size: 17px;
+            margin-right: 8px;
+        }
+
+        .icon {
+            width: 18px;
+            height: 18px;
+            margin-right: 8px;
+            @include background-size(100% 100%);
+            display: inline-block;
+        }
+
+        &.btn-custom-login {
+            display: block;
+            min-width: 200px;
+            width: 200px;
+            padding: 0 1em;
+            margin: 1em 1rem;
+            height: 40px;
+            line-height: 34px;
+            color: #fff;
+            @include border-radius(2px);
+
+            &.gitlab {
+                background: #548;
+
+                &:hover {
+                    background: darken(#548, 10%);
+                }
+
+                span {
+                    vertical-align: middle;
+                }
+
+                .icon {
+                    background-image: url('../images/gitlabLogo.png');
+                }
+            }
+
+            &.google {
+                background: #dd4b39;
+
+                &:hover {
+                    background: darken(#dd4b39, 10%);
+                }
+
+                span {
+                    vertical-align: middle;
+                }
+
+                .icon {
+                    background-image: url('../images/googleLogo.png');
+                }
+            }
+
+            &.ldap {
+                background: #dd4b39;
+
+                &:hover {
+                    background: darken(#dd4b39, 10%);
+                }
+
+                span {
+                    vertical-align: middle;
+                }
+            }
+
+            &.email {
+                background: #2389d7;
+
+                &:hover {
+                    background: darken(#2389d7, 10%);
+                }
+
+                span {
+                    vertical-align: middle;
+                }
+            }
+
+            &.btn-full {
+                width: 100%;
+                text-align: left;
+                padding-left: 35px;
+            }
+        }
+
+        &.btn-default {
+            color: #444;
+        }
+
+        .glyphicon {
+            &.glyphicon-ok,
+            &.glyphicon-refresh {
+                margin-right: .5em;
+                left: -2px;
+                font-size: .9em;
+            }
+
+            &.glyphicon-chevron-right {
+                font-size: .8em;
+                right: -2px;
+                top: 0px;
+            }
+
+            &.glyphicon-chevron-left {
+                font-size: .8em;
+                left: -2px;
+                top: 0px;
+            }
+        }
+    }
+
+    .has-error {
+        .control-label {
+            background: #f2f2f2;
+            padding: .7em 1em;
+            @include border-radius(3px);
+            margin: 1em 0 0;
+            font-size: 14px;
+            font-weight: normal;
+            color: #999;
+            width: 100%;
+
+            &:before {
+                @extend .fa;
+                content: '\f071';
+                margin-right: 4px;
+                color: #aaa;
+            }
+        }
+    }
+
+    .reset-form {
+        @include border-radius(3px);
+        position: relative;
+        font-size: .95em;
+        p {
+            color: inherit;
+        }
+    }
+
+    // Modifier Styles
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+        &.margin--top-none {
+            margin-top: 0;
+        }
+
+        &.margin--bottom-none {
+            margin-bottom: 0;
+        }
+
+        &.margin--less {
+            margin-bottom: .3em;
+        }
+
+        &.sub-heading {
+            font-weight: 400;
+            margin-bottom: 0;
+        }
+
+        &.color--light {
+            font-weight: 300;
+        }
+    }
+
+    p {
+        &.margin--extra {
+            margin-bottom: 1.5em;
+        }
+
+        &.margin--less {
+            margin-bottom: .3em;
+        }
+
+        .black,
+        &.black {
+            color: #000;
+        }
+    }
+
+    .color--light {
+        color: #777;
+    }
+
+    .margin--extra {
+        margin-top: 3em;
+    }
+
+    .margin--extra-2x {
+        margin-top: 6em;
+    }
+}
+
+.signup-team-all {
+    margin: 0 0 20px;
+    border: 1px solid #ddd;
+    @include border-radius(2px);
+    .signup-team-dir {
+        background: #fafafa;
+        border-top: 1px solid #d5d5d5;
+
+        &:first-child {
+            border: none;
+        }
+
+        a {
+            color: inherit;
+            display: block;
+            padding: 0 15px;
+            line-height: 3.5em;
+            height: 3.5em;
+            font-size: 1.1em;
+        }
+    }
+
+    .signup-team-dir__name {
+        white-space: nowrap;
+        float: left;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        width: 90%;
+    }
+
+    .signup-team-dir__arrow {
+        float: right;
+        font-size: .9em;
+        color: #999;
+        line-height: 3.5em;
+    }
+}
+
+
+.authorize-box {
+    margin: 100px auto;
+    width: 500px;
+    height: 280px;
+    border: 1px solid black;
+}
+
+.authorize-inner {
+    padding: 20px;
+}
+
+.authorize-btn {
+    margin-right: 6px;
+}
+
+.verify_panel {
+    margin: 60px auto auto auto;
+    max-width: 380px;
+}
diff --git a/web/sass-files/sass/pages/_statistics.scss b/web/sass-files/sass/pages/_statistics.scss
new file mode 100644
index 000000000..b48c137c3
--- /dev/null
+++ b/web/sass-files/sass/pages/_statistics.scss
@@ -0,0 +1,85 @@
+@charset 'UTF-8';
+
+.team_statistics {
+    .total-count {
+        margin: 1em 0;
+        text-align: center;
+        background: #fff;
+        border: 1px solid #ddd;
+        width: 100%;
+        @include border-radius(3px);
+
+        .title {
+            font-weight: 400;
+            padding: 7px 10px;
+            border-bottom: 1px solid #ddd;
+            text-align: left;
+            font-size: 13px;
+
+            .fa {
+                float: right;
+                margin: 0px 0 0;
+                color: #555;
+                font-size: 16px;
+            }
+        }
+
+        .content {
+            font-size: 30px;
+            font-weight: 600;
+            color: #555;
+            padding: .3em 0 .35em;
+            overflow: auto;
+        }
+    }
+
+    .total-count--day {
+        width: 760px;
+        height: 275px;
+        border: 1px solid #ddd;
+        padding: 5px 10px 10px 10px;
+        margin: 10px 10px 10px 10px;
+        background: #fff;
+        clear: both;
+
+        > div {
+            font-size: 18px;
+            font-weight: 300;
+        }
+    }
+
+    .recent-active-users {
+        table {
+            width: 100%;
+            table-layout: fixed;
+        }
+
+        .content {
+            max-height: 400px;
+            overflow: auto;
+            padding: 0;
+        }
+
+        tr {
+            &:first-child {
+                td {
+                    border-top: none;
+                }
+            }
+
+            td {
+                font-weight: 400;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                font-size: 13px;
+                border-left: 1px solid #ddd;
+                border-top: 1px solid #ddd;
+                padding: 5px 5px 6px;
+                @include clearfix;
+                &:first-child {
+                    border-left: none;
+                }
+            }
+        }
+    }
+}
diff --git a/web/sass-files/sass/partials/_access-history.scss b/web/sass-files/sass/partials/_access-history.scss
deleted file mode 100644
index dcb5f3c5f..000000000
--- a/web/sass-files/sass/partials/_access-history.scss
+++ /dev/null
@@ -1,27 +0,0 @@
-@charset "UTF-8";
-
-.access-history__table {
-    display: table;
-    width: 100%;
-    padding-top: 15px;
-    line-height: 1.6;
-    &:first-child {
-        padding: 0;
-    }
-    > div {
-        display: table-cell;
-        vertical-align: top;
-    }
-    .access__date {
-        font-weight: 600;
-        font-size: 15px;
-        width: 190px;
-    }
-    .access__report {
-        border-bottom: 1px solid #ddd;
-        padding-bottom: 15px;
-    }
-    .report__info {
-        @include opacity(0.8);
-    }
-}
\ No newline at end of file
diff --git a/web/sass-files/sass/partials/_activity-log.scss b/web/sass-files/sass/partials/_activity-log.scss
deleted file mode 100644
index df5869b4c..000000000
--- a/web/sass-files/sass/partials/_activity-log.scss
+++ /dev/null
@@ -1,53 +0,0 @@
-@charset "UTF-8";
-
-@keyframes highlight {
-  from { background: rgba(yellow, 0.5);}
-  to { background: none;}
-}
-
-.animation--highlight {
-    &:before {
-        content: '';
-        animation: highlight 1.5s ease;
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-    }
-}
-
-.activity-log__table {
-    display: table;
-    width: 100%;
-    line-height: 1.8;
-    border-top: 1px solid #DDD;
-    padding: 15px 0;
-    &:first-child {
-        padding-top: 0;
-        border: none;
-    }
-    > div {
-        display: table-cell;
-        vertical-align: top;
-    }
-    .activity-log__report {
-        width: 80%;
-    }
-    .activity-log__action {
-        text-align: right;
-    }
-    .report__platform {
-        font-size: 15px;
-        font-weight: 600;
-        .fa {
-            margin-right: 6px;
-        }
-    }
-    .report__info {
-        @include opacity(0.8);
-    }
-}
-.session-help-text {
-    padding: 0 0 20px;
-}
\ No newline at end of file
diff --git a/web/sass-files/sass/partials/_admin-console.scss b/web/sass-files/sass/partials/_admin-console.scss
deleted file mode 100644
index 76081710f..000000000
--- a/web/sass-files/sass/partials/_admin-console.scss
+++ /dev/null
@@ -1,261 +0,0 @@
-@charset "UTF-8";
-
-#admin_controller {
-    > div {
-        height: 100%;
-    }
-
-    .inner__wrap {
-        position: absolute;
-        width: 100%;
-    }
-
-    .row {
-        margin: 0;
-    }
-
-    h3 {
-        font-weight: 600;
-        border-bottom: 1px solid #ddd;
-        padding-bottom: 0.5em;
-        margin: 1em 0;
-    }
-
-    .table {
-        background: #fff;
-    }
-
-    .sidebar--left {
-        &.sidebar--collapsable {
-            background: #333;
-            .team__header {
-                background: transparent;
-                margin-bottom: 5px;
-            }
-            .nav {
-                li {
-                    padding: 0;
-                    @include opacity(1);
-                    .icon {
-                        width: 17px;
-                    }
-                    > a {
-                        &:hover, &.active, &:focus  {
-                            background-color: #EAEAEA;
-                        }
-                    }
-                    > h4 {
-                        background: #333;
-                        padding: 10px 10px;
-                        margin: 1px 0 0;
-                        .menu-icon--right {
-                            top: 6px;
-                            right: 12px;
-                        }
-                    }
-                }
-                .menu-icon--right {
-                    position: absolute;
-                    right: 10px;
-                    top: 3px;
-                    font-size: 18px;
-                    font-weight: 600;
-                    width: 20px;
-                    height: 20px;
-                    line-height: 20px;
-                    text-align: center;
-                    .fa {
-                        font-size: 13px;
-                        right: -2px;
-                        position: relative;
-                        color: #fff;
-                    }
-                }
-                &.nav__sub-menu {
-                    background: #111;
-                    -webkit-font-smoothing: auto;
-                    &.padded {
-                        padding: 5px 0;
-                    }
-                    li {
-                        > a {
-                            font-size: 13px;
-                            padding: 5px 35px 5px 15px;
-                            background: transparent;
-                            color: #bbb;
-                            &:hover {
-                                color: lighten($primary-color, 10);
-                            }
-                            &.active {
-                                color: #fff;
-                                font-weight: 600;
-                            }
-                        }
-                        .nav-more {
-                            font-size: 13px;
-                            padding: 5px 15px;
-                            background: transparent;
-                            color: #bbb;
-                            display: block;
-                            cursor: pointer;
-                            &:hover {
-                                color: lighten($primary-color, 10);
-                            }
-                        }
-                    }
-                }
-                &.nav__inner-menu {
-                    li {
-                        > a {
-                            padding-left: 20px;
-                        }
-                    }
-                }
-            }
-        }
-    }
-
-    .log__panel {
-        overflow: scroll;
-        width: 100%;
-        height: 800px;
-        border: 1px solid #ddd;
-        margin-top: 10px;
-        padding: 5px;
-        background-color: white;
-    }
-
-    .app__content {
-        &.admin {
-            overflow: auto;
-            background-color: #f1f1f1;
-            padding: 0 20px 20px;
-            min-height: 600px;
-        }
-        .wrapper--fixed {
-            max-width: 800px;
-        }
-        .form-horizontal {
-            margin-top: 40px;
-            .control-label {
-                text-align: left;
-                padding-right: 0;
-                font-weight: 600;
-            }
-            .form-group {
-                margin-bottom: 25px;
-            }
-            .file__upload {
-                position: relative;
-                margin: 0 10px 10px 0;
-                display: inline-block;
-                input {
-                    position: absolute;
-                    @include opacity(0);
-                    width: 100%;
-                    height: 100%;
-                    z-index: 5;
-                    top: 0;
-                    left: 0;
-                }
-            }
-            .help-text {
-                &.no-margin {
-                    margin: 0;
-                }
-                ul, ol {
-                    padding-left: 23px;
-                }
-                margin: 10px 0 0 15px;
-                color: #777;
-                .help-link {
-                    margin-right: 5px;
-                }
-                .btn {
-                    font-size: 13px;
-                }
-            }
-            .alert {
-                display: inline-block;
-                padding: 5px 7px;
-                margin: 1em 0 0;
-                top: 1px;
-                position: relative;
-                .fa {
-                    margin-right: 5px;
-                }
-            }
-        }
-        .banner {
-            background: #fff;
-            border: 1px solid #ddd;
-            padding: 0.7em 1.5em;
-            font-size: 0.95em;
-            margin: 2em 0;
-            .banner__heading {
-                font-size: 1.5em;
-            }
-            .banner__content {
-                width: 80%;
-            }
-            &.warning {
-                background: #e60000;
-            }
-        }
-        .popover {
-            border-radius: 3px;
-            width: 100%;
-            font-size: 0.95em;
-        }
-        .panel {
-            border: none;
-            background-color: transparent;
-        }
-        .panel-default {
-            > .panel-heading {
-                padding: 10px 0;
-                background-color: transparent;
-            }
-            .panel-body {
-                padding: 30px 0 10px;
-            }
-        }
-        .panel-group {
-            margin-bottom: 50px;
-        }
-        .panel-title {
-            font-size: 24px;
-            line-height: 1.5;
-            a {
-                text-decoration: none;
-                display: block;
-                @include clearfix;
-                &.collapsed {
-                    .fa-minus {
-                        display: none;
-                    }
-                    .fa-plus {
-                        display: inline-block;
-                    }
-                }
-                .fa {
-                    font-size: 18px;
-                    float: right;
-                    margin-top: 8px;
-                    color: #aaa;
-                }
-                .fa-plus {
-                    display: none;
-                }
-            }
-        }
-    }
-
-    .member-list-holder {
-        .member-role, .member-drop {
-            position: absolute;
-            right: 15px;
-            top: 8px;
-        }
-    }
-}
diff --git a/web/sass-files/sass/partials/_base.scss b/web/sass-files/sass/partials/_base.scss
deleted file mode 100644
index 4dcf0ff85..000000000
--- a/web/sass-files/sass/partials/_base.scss
+++ /dev/null
@@ -1,256 +0,0 @@
-@charset "UTF-8";
-
-html, body {
-    height: 100%;
-}
-
-body {
-    font-family: 'Open Sans', sans-serif;
-    -webkit-font-smoothing: antialiased;
-    background: $body-bg;
-    position: relative;
-    width: 100%;
-    height: 100%;
-    &.white {
-        background: #fff;
-        > .container-fluid {
-            overflow: auto;
-        }
-        .inner__wrap {
-            > .row.content {
-                min-height: 100%;
-                margin-bottom: -89px;
-            }
-        }
-    }
-}
-
-b, strong {
-    font-weight: 600;
-}
-
-.inner__wrap {
-    height: 100%;
-    > .row.main {
-        height: 100%;
-        position: relative;
-    }
-}
-
-.container-fluid {
-    @include legacy-pie-clearfix;
-    height: 100%;
-    position: relative;
-}
-
-.channel-view {
-    @include clearfix;
-    height: 100%;
-    position: relative;
-}
-
-img {
-    max-width: 100%;
-    height: auto;
-    &.rounded {
-        @include border-radius(100%);
-    }
-}
-
-.popover {
-    @include border-radius(3px);
-    color: #333;
-    &.bottom, &.right, &.top, &.left {
-        >.arrow:after {
-            border-color: transparent;
-        }
-    }
-    .popover-title {
-        background: rgba(black, 0.05);
-    }
-    .popover-content {
-        p:last-child {
-            margin-bottom: 5px;
-        }
-    }
-}
-
-.dropdown-menu {
-    .divider {
-        @include opacity(0.15);
-    }
-    > li > a {
-        color: inherit;
-        &:focus, &:hover {
-            color: inherit;
-        }
-    }
-}
-
-.word-break--all {
-    word-break: break-all;
-}
-
-a {
-    word-break: break-word;
-    color: $primary-color;
-    cursor: pointer;
-}
-
-a:focus, a:hover {
-    color: $primary-color;
-}
-
-.tooltip {
-    .tooltip-inner {
-        word-break: break-word;
-        font-size: 13px;
-        padding: 3px 10px 4px;
-        font-weight: 500;
-    }
-}
-
-.nopadding {
-    padding: 0;
-    margin: 0;
-}
-
-.text-danger, a.text-danger {
-    color: #E05F5D;
-    &:hover, &:focus {
-        color: #E05F5D;
-    }
-}
-
-.btn {
-    &.btn-danger {
-        color: #fff;
-        &:hover, &:active, &:focus {
-            color: #fff;
-        }
-    }
-}
-
-.form-control {
-    @include border-radius(2px);
-    &:focus {
-        @include box-shadow(none);
-    }
-    &.no-padding {
-        line-height: 32px;
-        padding: 0;
-    }
-    &.no-resize {
-        resize: none;
-    }
-}
-
-.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
-    cursor: auto;
-    background: rgba(#fff, 0.1);
-    color: inherit;
-}
-
-.form-group {
-    &.form-group--small {
-        margin-bottom: 10px;
-    }
-}
-
-.error-panel {
-    max-width: 275px;
-    position: absolute;
-    right: 10px;
-    top: 40px;
-    z-index: 100;
-}
-
-.nav>li>a:focus, .nav>li>a:hover {
-    background: transparent;
-}
-
-.btn {
-    @include single-transition(all, 0.25s, ease-in);
-    @include border-radius(1px);
-    &.btn-primary {
-        border-color: transparent;
-        background: $primary-color;
-        &:hover, &:focus, &:active {
-            background: $primary-color--hover;
-        }
-    }
-    &.btn-inactive {
-        border-color: transparent;
-        background: #707070;
-        color: #fff;
-    }
-}
-
-.relative-div {
-    position:relative;
-}
-
-@-webkit-keyframes spin2 {
-    from { -webkit-transform: rotate(0deg);}
-    to { -webkit-transform: rotate(360deg);}
-}
-
-@keyframes spin {
-    from { transform: scale(1) rotate(0deg);}
-    to { transform: scale(1) rotate(360deg);}
-}
-
-.glyphicon-refresh-animate {
-    @include animation(spin .7s infinite linear);
-}
-
-.black-bg {
-    background-color: black !important;
-}
-
-.white-bg {
-    background-color: white !important;
-}
-
-.alert {
-    padding: 8px 12px;
-    @include border-radius(2px);
-}
-
-.emoji {
-    width: 1.5em;
-    height: 1.5em;
-    display: inline-block;
-    margin-bottom: 0.25em;
-    background-size: contain;
-}
-
-
-// Scrollbar Css
-
-::-webkit-scrollbar
-{
-  width: 8px;  /* for vertical scrollbars */
-  height: 8px; /* for horizontal scrollbars */
-}
-
-::-webkit-scrollbar-track
-{
-  background: rgba(0, 0, 0, 0.1);
-}
-
-::-webkit-scrollbar-thumb
-{
-    @include border-radius(5px);
-    background: rgba(0, 0, 0, 0.4);
-}
-
-body{
-    scrollbar-face-color: rgba(0, 0, 0, 0.1);
-    scrollbar-shadow-color: #2D2C4D;
-    scrollbar-highlight-color:#7D7E94;
-    scrollbar-3dlight-color: #7D7E94;
-    scrollbar-darkshadow-color: #2D2C4D;
-    scrollbar-track-color: rgba(0, 0, 0, 0.1);
-    scrollbar-arrow-color: #C1C1D1;
-}
\ No newline at end of file
diff --git a/web/sass-files/sass/partials/_colorpicker.scss b/web/sass-files/sass/partials/_colorpicker.scss
deleted file mode 100644
index 7c79844ae..000000000
--- a/web/sass-files/sass/partials/_colorpicker.scss
+++ /dev/null
@@ -1,253 +0,0 @@
-@charset "UTF-8";
-
-/*!
- * Bootstrap Colorpicker
- * http://mjolnic.github.io/bootstrap-colorpicker/
- *
- * Originally written by (c) 2012 Stefan Petre
- * Licensed under the Apache License v2.0
- * http://www.apache.org/licenses/LICENSE-2.0.txt
- *
- */
-
-.colorpicker-saturation {
-  float: left;
-  width: 100px;
-  height: 100px;
-  cursor: crosshair;
-  background-image: url("../images/bootstrap-colorpicker/saturation.png");
-}
-
-.colorpicker-saturation i {
-  position: absolute;
-  top: 0;
-  left: 0;
-  display: block;
-  width: 5px;
-  height: 5px;
-  margin: -4px 0 0 -4px;
-  border: 1px solid #000;
-  -webkit-border-radius: 5px;
-     -moz-border-radius: 5px;
-          border-radius: 5px;
-}
-
-.colorpicker-saturation i b {
-  display: block;
-  width: 5px;
-  height: 5px;
-  border: 1px solid #fff;
-  -webkit-border-radius: 5px;
-     -moz-border-radius: 5px;
-          border-radius: 5px;
-}
-
-.colorpicker-hue,
-.colorpicker-alpha {
-  float: left;
-  width: 15px;
-  height: 100px;
-  margin-bottom: 4px;
-  margin-left: 4px;
-  cursor: row-resize;
-}
-
-.colorpicker-hue i,
-.colorpicker-alpha i {
-  position: absolute;
-  top: 0;
-  left: 0;
-  display: block;
-  width: 100%;
-  height: 1px;
-  margin-top: -1px;
-  background: #000;
-  border-top: 1px solid #fff;
-}
-
-.colorpicker-hue {
-  background-image: url("../images/bootstrap-colorpicker/hue.png");
-}
-
-.colorpicker-alpha {
-  display: none;
-  background-image: url("../images/bootstrap-colorpicker/alpha.png");
-}
-
-.colorpicker-saturation,
-.colorpicker-hue,
-.colorpicker-alpha {
-  background-size: contain;
-}
-
-.colorpicker {
-  top: 0;
-  left: 0;
-  z-index: 2500;
-  min-width: 130px;
-  padding: 4px;
-  margin-top: 1px;
-  -webkit-border-radius: 4px;
-     -moz-border-radius: 4px;
-          border-radius: 4px;
-  *zoom: 1;
-}
-
-.colorpicker:before,
-.colorpicker:after {
-  display: table;
-  line-height: 0;
-  content: "";
-}
-
-.colorpicker:after {
-  clear: both;
-}
-
-.colorpicker:before {
-  position: absolute;
-  top: -7px;
-  left: 6px;
-  display: inline-block;
-  border-right: 7px solid transparent;
-  border-bottom: 7px solid #ccc;
-  border-left: 7px solid transparent;
-  border-bottom-color: rgba(0, 0, 0, 0.2);
-  content: '';
-}
-
-.colorpicker:after {
-  position: absolute;
-  top: -6px;
-  left: 7px;
-  display: inline-block;
-  border-right: 6px solid transparent;
-  border-bottom: 6px solid #ffffff;
-  border-left: 6px solid transparent;
-  content: '';
-}
-
-.colorpicker div {
-  position: relative;
-}
-
-.colorpicker.colorpicker-with-alpha {
-  min-width: 140px;
-}
-
-.colorpicker.colorpicker-with-alpha .colorpicker-alpha {
-  display: block;
-}
-
-.colorpicker-color {
-  height: 10px;
-  margin-top: 5px;
-  clear: both;
-  background-image: url("../images/bootstrap-colorpicker/alpha.png");
-  background-position: 0 100%;
-}
-
-.colorpicker-color div {
-  height: 10px;
-}
-
-.colorpicker-selectors {
-  display: none;
-  height: 10px;
-  margin-top: 5px;
-  clear: both;
-}
-
-.colorpicker-selectors i {
-  float: left;
-  width: 10px;
-  height: 10px;
-  cursor: pointer;
-}
-
-.colorpicker-selectors i + i {
-  margin-left: 3px;
-}
-
-.colorpicker-element .input-group-addon i,
-.colorpicker-element .add-on i {
-  display: inline-block;
-  width: 16px;
-  height: 16px;
-  vertical-align: text-top;
-  cursor: pointer;
-}
-
-.colorpicker.colorpicker-inline {
-  position: relative;
-  z-index: auto;
-  display: inline-block;
-  float: none;
-}
-
-.colorpicker.colorpicker-horizontal {
-  width: 110px;
-  height: auto;
-  min-width: 110px;
-}
-
-.colorpicker.colorpicker-horizontal .colorpicker-saturation {
-  margin-bottom: 4px;
-}
-
-.colorpicker.colorpicker-horizontal .colorpicker-color {
-  width: 100px;
-}
-
-.colorpicker.colorpicker-horizontal .colorpicker-hue,
-.colorpicker.colorpicker-horizontal .colorpicker-alpha {
-  float: left;
-  width: 100px;
-  height: 15px;
-  margin-bottom: 4px;
-  margin-left: 0;
-  cursor: col-resize;
-}
-
-.colorpicker.colorpicker-horizontal .colorpicker-hue i,
-.colorpicker.colorpicker-horizontal .colorpicker-alpha i {
-  position: absolute;
-  top: 0;
-  left: 0;
-  display: block;
-  width: 1px;
-  height: 15px;
-  margin-top: 0;
-  background: #ffffff;
-  border: none;
-}
-
-.colorpicker.colorpicker-horizontal .colorpicker-hue {
-  background-image: url("../images/bootstrap-colorpicker/hue-horizontal.png");
-}
-
-.colorpicker.colorpicker-horizontal .colorpicker-alpha {
-  background-image: url("../images/bootstrap-colorpicker/alpha-horizontal.png");
-}
-
-.colorpicker.colorpicker-hidden {
-  display: none;
-}
-
-.colorpicker.colorpicker-visible {
-  display: block;
-}
-
-.colorpicker-inline.colorpicker-visible {
-  display: inline-block;
-}
-
-.colorpicker-right:before {
-  right: 6px;
-  left: auto;
-}
-
-.colorpicker-right:after {
-  right: 7px;
-  left: auto;
-}
\ No newline at end of file
diff --git a/web/sass-files/sass/partials/_content.scss b/web/sass-files/sass/partials/_content.scss
deleted file mode 100644
index fb2355da7..000000000
--- a/web/sass-files/sass/partials/_content.scss
+++ /dev/null
@@ -1,82 +0,0 @@
-@charset "UTF-8";
-
-.inner__wrap {
-	&.move--left {
-		.search-bar__container {
-			display: none;
-		}
-	}
-	&.move--right {
-		.search-bar__container {
-			display: none;
-		}
-	}
-}
-.app__content {
-	height: 100%;
-	padding-top: 50px;
-	margin-left: 220px;
-	position: relative;
-	background: #fff;
-	@include display-flex;
-	@include flex-direction(column);
-	.channel__wrap & {
-		padding-top: 0;
-	}
-}
-#post-create {
-	@include flex(0 0 auto);
-	background: #fff;
-	width: 100%;
-	z-index: 3;
-}
-
-#archive-link-home {
-	@include flex(0 0 auto);
-	cursor: pointer;
-	padding: 10px 20px;
-	font-size: 13px;
-
-	.fa {
-		font-size: 11px;
-		@include opacity(0.7);
-	}
-
-	a {
-		color: inherit;
-	}
-
-}
-
-.post-list {
-	.new-messages-hr {
-		margin-top: 5px;
-		margin-bottom: 0px;
-		border: 0;
-		border-top: 1px solid #FF8800;
-	}
-
-	.new-messages-text {
-		margin-top: 2px;
-		margin-bottom: 5px;
-		color: #FF8800;
-		text-align: center;
-	}
-}
-.new-messages-hr {
-	margin-top: 5px;
-	margin-bottom: 0px;
-	border: 0;
-	border-top: 1px solid #FF8800;
-}
-
-.new-messages-text {
-	margin-top: 2px;
-	margin-bottom: 5px;
-	color: #FF8800;
-	text-align: center;
-}
-
-.delete-message-text {
-	margin-top: 10px;
-}
diff --git a/web/sass-files/sass/partials/_docs.scss b/web/sass-files/sass/partials/_docs.scss
deleted file mode 100644
index f4e7cc314..000000000
--- a/web/sass-files/sass/partials/_docs.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-@charset "UTF-8";
-
-.docs__page {
-	line-height: 1.7;
-	padding-bottom: 20px;
-
-	> div {
-		width: 1170px;
-		margin: 0 auto;
-		padding: 0 15px;
-		max-width: 100%;
-	}
-
-	h1.markdown__heading {
-		border-bottom: 1px solid #ddd;
-		padding-bottom: 1rem;
-		margin: 1em 0 1em;
-	}
-}
\ No newline at end of file
diff --git a/web/sass-files/sass/partials/_error-bar.scss b/web/sass-files/sass/partials/_error-bar.scss
deleted file mode 100644
index 0bfcbe0be..000000000
--- a/web/sass-files/sass/partials/_error-bar.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-@charset "UTF-8";
-
-.error-bar {
-    background-color: #0099FF;
-    text-align:center;
-    position: relative;
-    color: #fff;
-    position: absolute;
-    top: 0;
-    width: 100%;
-    z-index: 9999;
-    padding: 5px 30px;
-    &__close {
-        position: absolute;
-        right: 0;
-        top: 0;
-        color: #FFF;
-        font-size: 20px;
-        font-weight: 600;
-        text-decoration: none;
-        padding: 0 10px;
-        font-family: 'Open Sans', sans-serif;
-        &:hover {
-            color: #FFF;
-            text-decoration: none;
-        }
-    }
-}
diff --git a/web/sass-files/sass/partials/_error.scss b/web/sass-files/sass/partials/_error.scss
deleted file mode 100644
index e09a751d2..000000000
--- a/web/sass-files/sass/partials/_error.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-@charset "UTF-8";
-
-body {
-	&.error {
-		.container-fluid {
-			display: table;
-			height: 90%;
-		}
-		.error__container {
-			max-width: 800px;
-			margin: 0 auto;
-			display: table-cell;
-			vertical-align: top;
-			padding: 5em 0;
-			text-align: left;
-			color: #555;
-		}
-		.error__icon {
-			font-size: 4em;
-		  	color: #CCC;
-		}
-		h2 {
-			font-weight: 600;
-			font-size: 1.5em;
-			margin: 0.8em 0 0.5em;
-		}
-		p {
-			font-size: 1.2em;
-		}
-	}
-}
\ No newline at end of file
diff --git a/web/sass-files/sass/partials/_files.scss b/web/sass-files/sass/partials/_files.scss
deleted file mode 100644
index 62e067437..000000000
--- a/web/sass-files/sass/partials/_files.scss
+++ /dev/null
@@ -1,264 +0,0 @@
-@charset "UTF-8";
-
-.preview-container {
-  position: relative;
-  margin: 1px 0 10px;
-  width: 100%;
-  max-height: 100px;
-  height: 100px;
-  white-space: nowrap;
-  overflow-x: auto;
-  overflow-y: hidden;
-  .preview-div {
-    display: inline-block;
-    width: 120px;
-    height: 100px;
-    margin: 0 0 0 5px;
-    vertical-align: top;
-    position: relative;
-    border: 1px solid #DDD;
-    @include clearfix;
-    &:hover .remove-preview:after {
-      @include opacity(1);
-    }
-    &:first-child {
-      margin-left: 0;
-    }
-    .spinner {
-      position:absolute;
-      top:50%;
-      left:50%;
-      margin-left: -16px;
-      margin-top: -16px;
-      width:32px;
-      height:32px;
-    }
-  }
-  .preview-img {
-    display: block;
-    height: auto;
-    max-width: 100%;
-  }
-  .remove-preview {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    left: 0;
-    top: 0;
-    &:after {
-      background: rgba(0, 0, 0, 0.4);
-      content: '';
-      height: 100%;
-      left: 0;
-      opacity: 0;
-      position: absolute;
-      top: 0;
-      width: 100%;
-      @include opacity(0);
-    }
-    i {
-      top: 5px;
-      right: 5px;
-      position: absolute;
-      color: #fff;
-      cursor: pointer;
-      z-index: 5;
-      opacity: inherit;
-      text-shadow: 0 0px 3px #444;
-      text-shadow: 0 0px 3px rgba(0, 0, 0, 0.7);
-    }
-  }
-}
-
-.image-comment {
-  background-position:left top;
-  background-repeat:no-repeat;
-  width:300px;
-  height:300px;
-}
-
-@mixin file-icon($path) {
-  background: #fff url($path);
-  background-position: center;
-  background-repeat: no-repeat;
-  @include background-size(60px auto);
-}
-.file-icon {
-  width: 100%;
-  height: 100%;
-  &.audio {
-    @include file-icon("../images/icons/audio.png");
-  }
-  &.video {
-    @include file-icon("../images/icons/video.png");
-  }
-  &.ppt {
-    @include file-icon("../images/icons/ppt.png");
-  }
-  &.generic {
-    @include file-icon("../images/icons/generic.png");
-  }
-  &.code {
-    @include file-icon("../images/icons/code.png");
-  }
-  &.excel {
-    @include file-icon("../images/icons/excel.png");
-  }
-  &.word {
-    @include file-icon("../images/icons/word.png");
-  }
-  &.pdf {
-    @include file-icon("../images/icons/pdf.png");
-  }
-  &.patch {
-    @include file-icon("../images/icons/patch.png");
-  }
-  &.image {
-    @include file-icon("../images/icons/image.png");
-  }
-}
-.post-image__column {
-  position: relative;
-  width: 240px;
-  height: 100px;
-  float: left;
-  margin: 5px 10px 5px 0;
-  border: 1px solid lightgrey;
-  .post__load {
-    height: 100%;
-    width: 100%;
-    background-size: 20px 20px;
-    background-repeat: no-repeat;
-    background-position: center;
-  }
-  .post__image {
-    width: 100%;
-    height: 100%;
-    background-color: #FFF;
-    background-repeat: no-repeat;
-    overflow: hidden;
-    position: relative;
-    text-align: center;
-    &.small {
-      background-position: center;
-    }
-    &.normal {
-      background-position: top left;
-    }
-    .spinner.file__loading {
-        position: absolute;
-        left: 50%;
-        margin-left: -16px;
-        top: 50%;
-        margin-top: -16px;
-    }
-    .file__loaded {
-        max-width: initial;
-        &.landscape, &.quadrat {
-            height: 100px;
-        }
-        &.portrait {
-            width: 120px;
-        }
-    }
-    &:hover .file-playback-controls.stop {
-        @include opacity(1);
-    }
-  }
-  .post-image__thumbnail {
-    float: left;
-    width: 50%;
-    height: 100%;
-    cursor: zoom-in;
-    cursor: -webkit-zoom-in;
-  }
-  .post-image__details {
-    float: left;
-    @include clearfix;
-    word-break: break-word;
-    width: 50%;
-    height: 100%;
-    background: white;
-    border-left: 1px solid #ddd;
-    font-size: 13px;
-    padding: 7px;
-    color: #333;
-    .post-image__name {
-      margin-bottom: 3px;
-      display: block;
-    }
-    .post-image__download {
-      display: inline-block;
-      padding-right: 7px;
-      cursor: pointer;
-      @include opacity(0.7);
-    }
-    .post-image__type {
-      @include opacity(0.6);
-    }
-    .post-image__size {
-      margin-left: 4px;
-      @include opacity(0.6);
-    }
-  }
-  a {
-    text-decoration: none;
-    color: grey;
-  }
-}
-
-.file-details__container {
-  @include display-flex;
-  display: -ms-flexbox;
-
-  .file-details {
-    width: 320px;
-    height: 270px;
-    padding: 14px;
-    text-align: left;
-    vertical-align: top;
-
-    .file-details__name {
-      color: #333;
-      font-size: 16px;
-    }
-    .file-details__info {
-      color: grey;
-    }
-  }
-  .file-details__preview {
-    width: 320px;
-    height: 270px;
-    border-right: 1px solid #ddd;
-    vertical-align: center;
-
-    // helper to center the image icon in the preview window
-    .file-details__preview-helper {
-      height: 100%;
-      display: inline-block;
-      vertical-align: middle;
-    }
-  }
-}
-
-.file-playback-controls {
-    position: absolute;
-    right: 5px;
-    bottom: 0;
-    font-size: 22px;
-    cursor: pointer;
-    z-index: 2;
-    -webkit-transition: opacity 0.6s;
-    -moz-transition: opacity 0.6s;
-    -o-transition: opacity 0.6s;
-    transition: opacity 0.6s;
-
-    &.stop {
-        @include opacity(0);
-    }
-}
-
-.view-image__loading {
-    background: black;
-    min-height: 100px;
-}
diff --git a/web/sass-files/sass/partials/_font-awesome.scss b/web/sass-files/sass/partials/_font-awesome.scss
deleted file mode 100644
index 74580a7e8..000000000
--- a/web/sass-files/sass/partials/_font-awesome.scss
+++ /dev/null
@@ -1,1803 +0,0 @@
-@charset "UTF-8";
-
-/*!
- *  Font Awesome 4.3.0 by @davegandy - http://fontawesome.io - @fontawesome
- *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
- */
-/* FONT PATH
- * -------------------------- */
-@font-face {
-  font-family: 'FontAwesome';
-  src: url('../fonts/fontawesome-webfont.eot?v=4.3.0');
-  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');
-  font-weight: normal;
-  font-style: normal;
-}
-.fa {
-  display: inline-block;
-  font: normal normal normal 14px/1 FontAwesome;
-  font-size: inherit;
-  text-rendering: auto;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  transform: translate(0, 0);
-}
-/* makes the font 33% larger relative to the icon container */
-.fa-lg {
-  font-size: 1.33333333em;
-  line-height: 0.75em;
-  vertical-align: -15%;
-}
-.fa-2x {
-  font-size: 2em;
-}
-.fa-3x {
-  font-size: 3em;
-}
-.fa-4x {
-  font-size: 4em;
-}
-.fa-5x {
-  font-size: 5em;
-}
-.fa-fw {
-  width: 1.28571429em;
-  text-align: center;
-}
-.fa-ul {
-  padding-left: 0;
-  margin-left: 2.14285714em;
-  list-style-type: none;
-}
-.fa-ul > li {
-  position: relative;
-}
-.fa-li {
-  position: absolute;
-  left: -2.14285714em;
-  width: 2.14285714em;
-  top: 0.14285714em;
-  text-align: center;
-}
-.fa-li.fa-lg {
-  left: -1.85714286em;
-}
-.fa-border {
-  padding: .2em .25em .15em;
-  border: solid 0.08em #eeeeee;
-  border-radius: .1em;
-}
-.pull-right {
-  float: right;
-}
-.pull-left {
-  float: left;
-}
-.fa.pull-left {
-  margin-right: .3em;
-}
-.fa.pull-right {
-  margin-left: .3em;
-}
-.fa-spin {
-  -webkit-animation: fa-spin 2s infinite linear;
-  animation: fa-spin 2s infinite linear;
-}
-.fa-pulse {
-  -webkit-animation: fa-spin 1s infinite steps(8);
-  animation: fa-spin 1s infinite steps(8);
-}
-@-webkit-keyframes fa-spin {
-  0% {
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
-  100% {
-    -webkit-transform: rotate(359deg);
-    transform: rotate(359deg);
-  }
-}
-@keyframes fa-spin {
-  0% {
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
-  100% {
-    -webkit-transform: rotate(359deg);
-    transform: rotate(359deg);
-  }
-}
-.fa-rotate-90 {
-  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
-  -webkit-transform: rotate(90deg);
-  -ms-transform: rotate(90deg);
-  transform: rotate(90deg);
-}
-.fa-rotate-180 {
-  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
-  -webkit-transform: rotate(180deg);
-  -ms-transform: rotate(180deg);
-  transform: rotate(180deg);
-}
-.fa-rotate-270 {
-  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
-  -webkit-transform: rotate(270deg);
-  -ms-transform: rotate(270deg);
-  transform: rotate(270deg);
-}
-.fa-flip-horizontal {
-  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1);
-  -webkit-transform: scale(-1, 1);
-  -ms-transform: scale(-1, 1);
-  transform: scale(-1, 1);
-}
-.fa-flip-vertical {
-  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);
-  -webkit-transform: scale(1, -1);
-  -ms-transform: scale(1, -1);
-  transform: scale(1, -1);
-}
-:root .fa-rotate-90,
-:root .fa-rotate-180,
-:root .fa-rotate-270,
-:root .fa-flip-horizontal,
-:root .fa-flip-vertical {
-  filter: none;
-}
-.fa-stack {
-  position: relative;
-  display: inline-block;
-  width: 2em;
-  height: 2em;
-  line-height: 2em;
-  vertical-align: middle;
-}
-.fa-stack-1x,
-.fa-stack-2x {
-  position: absolute;
-  left: 0;
-  width: 100%;
-  text-align: center;
-}
-.fa-stack-1x {
-  line-height: inherit;
-}
-.fa-stack-2x {
-  font-size: 2em;
-}
-.fa-inverse {
-  color: #ffffff;
-}
-/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
-   readers do not read off random characters that represent icons */
-.fa-glass:before {
-  content: "\f000";
-}
-.fa-music:before {
-  content: "\f001";
-}
-.fa-search:before {
-  content: "\f002";
-}
-.fa-envelope-o:before {
-  content: "\f003";
-}
-.fa-heart:before {
-  content: "\f004";
-}
-.fa-star:before {
-  content: "\f005";
-}
-.fa-star-o:before {
-  content: "\f006";
-}
-.fa-user:before {
-  content: "\f007";
-}
-.fa-film:before {
-  content: "\f008";
-}
-.fa-th-large:before {
-  content: "\f009";
-}
-.fa-th:before {
-  content: "\f00a";
-}
-.fa-th-list:before {
-  content: "\f00b";
-}
-.fa-check:before {
-  content: "\f00c";
-}
-.fa-remove:before,
-.fa-close:before,
-.fa-times:before {
-  content: "\f00d";
-}
-.fa-search-plus:before {
-  content: "\f00e";
-}
-.fa-search-minus:before {
-  content: "\f010";
-}
-.fa-power-off:before {
-  content: "\f011";
-}
-.fa-signal:before {
-  content: "\f012";
-}
-.fa-gear:before,
-.fa-cog:before {
-  content: "\f013";
-}
-.fa-trash-o:before {
-  content: "\f014";
-}
-.fa-home:before {
-  content: "\f015";
-}
-.fa-file-o:before {
-  content: "\f016";
-}
-.fa-clock-o:before {
-  content: "\f017";
-}
-.fa-road:before {
-  content: "\f018";
-}
-.fa-download:before {
-  content: "\f019";
-}
-.fa-arrow-circle-o-down:before {
-  content: "\f01a";
-}
-.fa-arrow-circle-o-up:before {
-  content: "\f01b";
-}
-.fa-inbox:before {
-  content: "\f01c";
-}
-.fa-play-circle-o:before {
-  content: "\f01d";
-}
-.fa-rotate-right:before,
-.fa-repeat:before {
-  content: "\f01e";
-}
-.fa-refresh:before {
-  content: "\f021";
-}
-.fa-list-alt:before {
-  content: "\f022";
-}
-.fa-lock:before {
-  content: "\f023";
-}
-.fa-flag:before {
-  content: "\f024";
-}
-.fa-headphones:before {
-  content: "\f025";
-}
-.fa-volume-off:before {
-  content: "\f026";
-}
-.fa-volume-down:before {
-  content: "\f027";
-}
-.fa-volume-up:before {
-  content: "\f028";
-}
-.fa-qrcode:before {
-  content: "\f029";
-}
-.fa-barcode:before {
-  content: "\f02a";
-}
-.fa-tag:before {
-  content: "\f02b";
-}
-.fa-tags:before {
-  content: "\f02c";
-}
-.fa-book:before {
-  content: "\f02d";
-}
-.fa-bookmark:before {
-  content: "\f02e";
-}
-.fa-print:before {
-  content: "\f02f";
-}
-.fa-camera:before {
-  content: "\f030";
-}
-.fa-font:before {
-  content: "\f031";
-}
-.fa-bold:before {
-  content: "\f032";
-}
-.fa-italic:before {
-  content: "\f033";
-}
-.fa-text-height:before {
-  content: "\f034";
-}
-.fa-text-width:before {
-  content: "\f035";
-}
-.fa-align-left:before {
-  content: "\f036";
-}
-.fa-align-center:before {
-  content: "\f037";
-}
-.fa-align-right:before {
-  content: "\f038";
-}
-.fa-align-justify:before {
-  content: "\f039";
-}
-.fa-list:before {
-  content: "\f03a";
-}
-.fa-dedent:before,
-.fa-outdent:before {
-  content: "\f03b";
-}
-.fa-indent:before {
-  content: "\f03c";
-}
-.fa-video-camera:before {
-  content: "\f03d";
-}
-.fa-photo:before,
-.fa-image:before,
-.fa-picture-o:before {
-  content: "\f03e";
-}
-.fa-pencil:before {
-  content: "\f040";
-}
-.fa-map-marker:before {
-  content: "\f041";
-}
-.fa-adjust:before {
-  content: "\f042";
-}
-.fa-tint:before {
-  content: "\f043";
-}
-.fa-edit:before,
-.fa-pencil-square-o:before {
-  content: "\f044";
-}
-.fa-share-square-o:before {
-  content: "\f045";
-}
-.fa-check-square-o:before {
-  content: "\f046";
-}
-.fa-arrows:before {
-  content: "\f047";
-}
-.fa-step-backward:before {
-  content: "\f048";
-}
-.fa-fast-backward:before {
-  content: "\f049";
-}
-.fa-backward:before {
-  content: "\f04a";
-}
-.fa-play:before {
-  content: "\f04b";
-}
-.fa-pause:before {
-  content: "\f04c";
-}
-.fa-stop:before {
-  content: "\f04d";
-}
-.fa-forward:before {
-  content: "\f04e";
-}
-.fa-fast-forward:before {
-  content: "\f050";
-}
-.fa-step-forward:before {
-  content: "\f051";
-}
-.fa-eject:before {
-  content: "\f052";
-}
-.fa-chevron-left:before {
-  content: "\f053";
-}
-.fa-chevron-right:before {
-  content: "\f054";
-}
-.fa-plus-circle:before {
-  content: "\f055";
-}
-.fa-minus-circle:before {
-  content: "\f056";
-}
-.fa-times-circle:before {
-  content: "\f057";
-}
-.fa-check-circle:before {
-  content: "\f058";
-}
-.fa-question-circle:before {
-  content: "\f059";
-}
-.fa-info-circle:before {
-  content: "\f05a";
-}
-.fa-crosshairs:before {
-  content: "\f05b";
-}
-.fa-times-circle-o:before {
-  content: "\f05c";
-}
-.fa-check-circle-o:before {
-  content: "\f05d";
-}
-.fa-ban:before {
-  content: "\f05e";
-}
-.fa-arrow-left:before {
-  content: "\f060";
-}
-.fa-arrow-right:before {
-  content: "\f061";
-}
-.fa-arrow-up:before {
-  content: "\f062";
-}
-.fa-arrow-down:before {
-  content: "\f063";
-}
-.fa-mail-forward:before,
-.fa-share:before {
-  content: "\f064";
-}
-.fa-expand:before {
-  content: "\f065";
-}
-.fa-compress:before {
-  content: "\f066";
-}
-.fa-plus:before {
-  content: "\f067";
-}
-.fa-minus:before {
-  content: "\f068";
-}
-.fa-asterisk:before {
-  content: "\f069";
-}
-.fa-exclamation-circle:before {
-  content: "\f06a";
-}
-.fa-gift:before {
-  content: "\f06b";
-}
-.fa-leaf:before {
-  content: "\f06c";
-}
-.fa-fire:before {
-  content: "\f06d";
-}
-.fa-eye:before {
-  content: "\f06e";
-}
-.fa-eye-slash:before {
-  content: "\f070";
-}
-.fa-warning:before,
-.fa-exclamation-triangle:before {
-  content: "\f071";
-}
-.fa-plane:before {
-  content: "\f072";
-}
-.fa-calendar:before {
-  content: "\f073";
-}
-.fa-random:before {
-  content: "\f074";
-}
-.fa-comment:before {
-  content: "\f075";
-}
-.fa-magnet:before {
-  content: "\f076";
-}
-.fa-chevron-up:before {
-  content: "\f077";
-}
-.fa-chevron-down:before {
-  content: "\f078";
-}
-.fa-retweet:before {
-  content: "\f079";
-}
-.fa-shopping-cart:before {
-  content: "\f07a";
-}
-.fa-folder:before {
-  content: "\f07b";
-}
-.fa-folder-open:before {
-  content: "\f07c";
-}
-.fa-arrows-v:before {
-  content: "\f07d";
-}
-.fa-arrows-h:before {
-  content: "\f07e";
-}
-.fa-bar-chart-o:before,
-.fa-bar-chart:before {
-  content: "\f080";
-}
-.fa-twitter-square:before {
-  content: "\f081";
-}
-.fa-facebook-square:before {
-  content: "\f082";
-}
-.fa-camera-retro:before {
-  content: "\f083";
-}
-.fa-key:before {
-  content: "\f084";
-}
-.fa-gears:before,
-.fa-cogs:before {
-  content: "\f085";
-}
-.fa-comments:before {
-  content: "\f086";
-}
-.fa-thumbs-o-up:before {
-  content: "\f087";
-}
-.fa-thumbs-o-down:before {
-  content: "\f088";
-}
-.fa-star-half:before {
-  content: "\f089";
-}
-.fa-heart-o:before {
-  content: "\f08a";
-}
-.fa-sign-out:before {
-  content: "\f08b";
-}
-.fa-linkedin-square:before {
-  content: "\f08c";
-}
-.fa-thumb-tack:before {
-  content: "\f08d";
-}
-.fa-external-link:before {
-  content: "\f08e";
-}
-.fa-sign-in:before {
-  content: "\f090";
-}
-.fa-trophy:before {
-  content: "\f091";
-}
-.fa-github-square:before {
-  content: "\f092";
-}
-.fa-upload:before {
-  content: "\f093";
-}
-.fa-lemon-o:before {
-  content: "\f094";
-}
-.fa-phone:before {
-  content: "\f095";
-}
-.fa-square-o:before {
-  content: "\f096";
-}
-.fa-bookmark-o:before {
-  content: "\f097";
-}
-.fa-phone-square:before {
-  content: "\f098";
-}
-.fa-twitter:before {
-  content: "\f099";
-}
-.fa-facebook-f:before,
-.fa-facebook:before {
-  content: "\f09a";
-}
-.fa-github:before {
-  content: "\f09b";
-}
-.fa-unlock:before {
-  content: "\f09c";
-}
-.fa-credit-card:before {
-  content: "\f09d";
-}
-.fa-rss:before {
-  content: "\f09e";
-}
-.fa-hdd-o:before {
-  content: "\f0a0";
-}
-.fa-bullhorn:before {
-  content: "\f0a1";
-}
-.fa-bell:before {
-  content: "\f0f3";
-}
-.fa-certificate:before {
-  content: "\f0a3";
-}
-.fa-hand-o-right:before {
-  content: "\f0a4";
-}
-.fa-hand-o-left:before {
-  content: "\f0a5";
-}
-.fa-hand-o-up:before {
-  content: "\f0a6";
-}
-.fa-hand-o-down:before {
-  content: "\f0a7";
-}
-.fa-arrow-circle-left:before {
-  content: "\f0a8";
-}
-.fa-arrow-circle-right:before {
-  content: "\f0a9";
-}
-.fa-arrow-circle-up:before {
-  content: "\f0aa";
-}
-.fa-arrow-circle-down:before {
-  content: "\f0ab";
-}
-.fa-globe:before {
-  content: "\f0ac";
-}
-.fa-wrench:before {
-  content: "\f0ad";
-}
-.fa-tasks:before {
-  content: "\f0ae";
-}
-.fa-filter:before {
-  content: "\f0b0";
-}
-.fa-briefcase:before {
-  content: "\f0b1";
-}
-.fa-arrows-alt:before {
-  content: "\f0b2";
-}
-.fa-group:before,
-.fa-users:before {
-  content: "\f0c0";
-}
-.fa-chain:before,
-.fa-link:before {
-  content: "\f0c1";
-}
-.fa-cloud:before {
-  content: "\f0c2";
-}
-.fa-flask:before {
-  content: "\f0c3";
-}
-.fa-cut:before,
-.fa-scissors:before {
-  content: "\f0c4";
-}
-.fa-copy:before,
-.fa-files-o:before {
-  content: "\f0c5";
-}
-.fa-paperclip:before {
-  content: "\f0c6";
-}
-.fa-save:before,
-.fa-floppy-o:before {
-  content: "\f0c7";
-}
-.fa-square:before {
-  content: "\f0c8";
-}
-.fa-navicon:before,
-.fa-reorder:before,
-.fa-bars:before {
-  content: "\f0c9";
-}
-.fa-list-ul:before {
-  content: "\f0ca";
-}
-.fa-list-ol:before {
-  content: "\f0cb";
-}
-.fa-strikethrough:before {
-  content: "\f0cc";
-}
-.fa-underline:before {
-  content: "\f0cd";
-}
-.fa-table:before {
-  content: "\f0ce";
-}
-.fa-magic:before {
-  content: "\f0d0";
-}
-.fa-truck:before {
-  content: "\f0d1";
-}
-.fa-pinterest:before {
-  content: "\f0d2";
-}
-.fa-pinterest-square:before {
-  content: "\f0d3";
-}
-.fa-google-plus-square:before {
-  content: "\f0d4";
-}
-.fa-google-plus:before {
-  content: "\f0d5";
-}
-.fa-money:before {
-  content: "\f0d6";
-}
-.fa-caret-down:before {
-  content: "\f0d7";
-}
-.fa-caret-up:before {
-  content: "\f0d8";
-}
-.fa-caret-left:before {
-  content: "\f0d9";
-}
-.fa-caret-right:before {
-  content: "\f0da";
-}
-.fa-columns:before {
-  content: "\f0db";
-}
-.fa-unsorted:before,
-.fa-sort:before {
-  content: "\f0dc";
-}
-.fa-sort-down:before,
-.fa-sort-desc:before {
-  content: "\f0dd";
-}
-.fa-sort-up:before,
-.fa-sort-asc:before {
-  content: "\f0de";
-}
-.fa-envelope:before {
-  content: "\f0e0";
-}
-.fa-linkedin:before {
-  content: "\f0e1";
-}
-.fa-rotate-left:before,
-.fa-undo:before {
-  content: "\f0e2";
-}
-.fa-legal:before,
-.fa-gavel:before {
-  content: "\f0e3";
-}
-.fa-dashboard:before,
-.fa-tachometer:before {
-  content: "\f0e4";
-}
-.fa-comment-o:before {
-  content: "\f0e5";
-}
-.fa-comments-o:before {
-  content: "\f0e6";
-}
-.fa-flash:before,
-.fa-bolt:before {
-  content: "\f0e7";
-}
-.fa-sitemap:before {
-  content: "\f0e8";
-}
-.fa-umbrella:before {
-  content: "\f0e9";
-}
-.fa-paste:before,
-.fa-clipboard:before {
-  content: "\f0ea";
-}
-.fa-lightbulb-o:before {
-  content: "\f0eb";
-}
-.fa-exchange:before {
-  content: "\f0ec";
-}
-.fa-cloud-download:before {
-  content: "\f0ed";
-}
-.fa-cloud-upload:before {
-  content: "\f0ee";
-}
-.fa-user-md:before {
-  content: "\f0f0";
-}
-.fa-stethoscope:before {
-  content: "\f0f1";
-}
-.fa-suitcase:before {
-  content: "\f0f2";
-}
-.fa-bell-o:before {
-  content: "\f0a2";
-}
-.fa-coffee:before {
-  content: "\f0f4";
-}
-.fa-cutlery:before {
-  content: "\f0f5";
-}
-.fa-file-text-o:before {
-  content: "\f0f6";
-}
-.fa-building-o:before {
-  content: "\f0f7";
-}
-.fa-hospital-o:before {
-  content: "\f0f8";
-}
-.fa-ambulance:before {
-  content: "\f0f9";
-}
-.fa-medkit:before {
-  content: "\f0fa";
-}
-.fa-fighter-jet:before {
-  content: "\f0fb";
-}
-.fa-beer:before {
-  content: "\f0fc";
-}
-.fa-h-square:before {
-  content: "\f0fd";
-}
-.fa-plus-square:before {
-  content: "\f0fe";
-}
-.fa-angle-double-left:before {
-  content: "\f100";
-}
-.fa-angle-double-right:before {
-  content: "\f101";
-}
-.fa-angle-double-up:before {
-  content: "\f102";
-}
-.fa-angle-double-down:before {
-  content: "\f103";
-}
-.fa-angle-left:before {
-  content: "\f104";
-}
-.fa-angle-right:before {
-  content: "\f105";
-}
-.fa-angle-up:before {
-  content: "\f106";
-}
-.fa-angle-down:before {
-  content: "\f107";
-}
-.fa-desktop:before {
-  content: "\f108";
-}
-.fa-laptop:before {
-  content: "\f109";
-}
-.fa-tablet:before {
-  content: "\f10a";
-}
-.fa-mobile-phone:before,
-.fa-mobile:before {
-  content: "\f10b";
-}
-.fa-circle-o:before {
-  content: "\f10c";
-}
-.fa-quote-left:before {
-  content: "\f10d";
-}
-.fa-quote-right:before {
-  content: "\f10e";
-}
-.fa-spinner:before {
-  content: "\f110";
-}
-.fa-circle:before {
-  content: "\f111";
-}
-.fa-mail-reply:before,
-.fa-reply:before {
-  content: "\f112";
-}
-.fa-github-alt:before {
-  content: "\f113";
-}
-.fa-folder-o:before {
-  content: "\f114";
-}
-.fa-folder-open-o:before {
-  content: "\f115";
-}
-.fa-smile-o:before {
-  content: "\f118";
-}
-.fa-frown-o:before {
-  content: "\f119";
-}
-.fa-meh-o:before {
-  content: "\f11a";
-}
-.fa-gamepad:before {
-  content: "\f11b";
-}
-.fa-keyboard-o:before {
-  content: "\f11c";
-}
-.fa-flag-o:before {
-  content: "\f11d";
-}
-.fa-flag-checkered:before {
-  content: "\f11e";
-}
-.fa-terminal:before {
-  content: "\f120";
-}
-.fa-code:before {
-  content: "\f121";
-}
-.fa-mail-reply-all:before,
-.fa-reply-all:before {
-  content: "\f122";
-}
-.fa-star-half-empty:before,
-.fa-star-half-full:before,
-.fa-star-half-o:before {
-  content: "\f123";
-}
-.fa-location-arrow:before {
-  content: "\f124";
-}
-.fa-crop:before {
-  content: "\f125";
-}
-.fa-code-fork:before {
-  content: "\f126";
-}
-.fa-unlink:before,
-.fa-chain-broken:before {
-  content: "\f127";
-}
-.fa-question:before {
-  content: "\f128";
-}
-.fa-info:before {
-  content: "\f129";
-}
-.fa-exclamation:before {
-  content: "\f12a";
-}
-.fa-superscript:before {
-  content: "\f12b";
-}
-.fa-subscript:before {
-  content: "\f12c";
-}
-.fa-eraser:before {
-  content: "\f12d";
-}
-.fa-puzzle-piece:before {
-  content: "\f12e";
-}
-.fa-microphone:before {
-  content: "\f130";
-}
-.fa-microphone-slash:before {
-  content: "\f131";
-}
-.fa-shield:before {
-  content: "\f132";
-}
-.fa-calendar-o:before {
-  content: "\f133";
-}
-.fa-fire-extinguisher:before {
-  content: "\f134";
-}
-.fa-rocket:before {
-  content: "\f135";
-}
-.fa-maxcdn:before {
-  content: "\f136";
-}
-.fa-chevron-circle-left:before {
-  content: "\f137";
-}
-.fa-chevron-circle-right:before {
-  content: "\f138";
-}
-.fa-chevron-circle-up:before {
-  content: "\f139";
-}
-.fa-chevron-circle-down:before {
-  content: "\f13a";
-}
-.fa-html5:before {
-  content: "\f13b";
-}
-.fa-css3:before {
-  content: "\f13c";
-}
-.fa-anchor:before {
-  content: "\f13d";
-}
-.fa-unlock-alt:before {
-  content: "\f13e";
-}
-.fa-bullseye:before {
-  content: "\f140";
-}
-.fa-ellipsis-h:before {
-  content: "\f141";
-}
-.fa-ellipsis-v:before {
-  content: "\f142";
-}
-.fa-rss-square:before {
-  content: "\f143";
-}
-.fa-play-circle:before {
-  content: "\f144";
-}
-.fa-ticket:before {
-  content: "\f145";
-}
-.fa-minus-square:before {
-  content: "\f146";
-}
-.fa-minus-square-o:before {
-  content: "\f147";
-}
-.fa-level-up:before {
-  content: "\f148";
-}
-.fa-level-down:before {
-  content: "\f149";
-}
-.fa-check-square:before {
-  content: "\f14a";
-}
-.fa-pencil-square:before {
-  content: "\f14b";
-}
-.fa-external-link-square:before {
-  content: "\f14c";
-}
-.fa-share-square:before {
-  content: "\f14d";
-}
-.fa-compass:before {
-  content: "\f14e";
-}
-.fa-toggle-down:before,
-.fa-caret-square-o-down:before {
-  content: "\f150";
-}
-.fa-toggle-up:before,
-.fa-caret-square-o-up:before {
-  content: "\f151";
-}
-.fa-toggle-right:before,
-.fa-caret-square-o-right:before {
-  content: "\f152";
-}
-.fa-euro:before,
-.fa-eur:before {
-  content: "\f153";
-}
-.fa-gbp:before {
-  content: "\f154";
-}
-.fa-dollar:before,
-.fa-usd:before {
-  content: "\f155";
-}
-.fa-rupee:before,
-.fa-inr:before {
-  content: "\f156";
-}
-.fa-cny:before,
-.fa-rmb:before,
-.fa-yen:before,
-.fa-jpy:before {
-  content: "\f157";
-}
-.fa-ruble:before,
-.fa-rouble:before,
-.fa-rub:before {
-  content: "\f158";
-}
-.fa-won:before,
-.fa-krw:before {
-  content: "\f159";
-}
-.fa-bitcoin:before,
-.fa-btc:before {
-  content: "\f15a";
-}
-.fa-file:before {
-  content: "\f15b";
-}
-.fa-file-text:before {
-  content: "\f15c";
-}
-.fa-sort-alpha-asc:before {
-  content: "\f15d";
-}
-.fa-sort-alpha-desc:before {
-  content: "\f15e";
-}
-.fa-sort-amount-asc:before {
-  content: "\f160";
-}
-.fa-sort-amount-desc:before {
-  content: "\f161";
-}
-.fa-sort-numeric-asc:before {
-  content: "\f162";
-}
-.fa-sort-numeric-desc:before {
-  content: "\f163";
-}
-.fa-thumbs-up:before {
-  content: "\f164";
-}
-.fa-thumbs-down:before {
-  content: "\f165";
-}
-.fa-youtube-square:before {
-  content: "\f166";
-}
-.fa-youtube:before {
-  content: "\f167";
-}
-.fa-xing:before {
-  content: "\f168";
-}
-.fa-xing-square:before {
-  content: "\f169";
-}
-.fa-youtube-play:before {
-  content: "\f16a";
-}
-.fa-dropbox:before {
-  content: "\f16b";
-}
-.fa-stack-overflow:before {
-  content: "\f16c";
-}
-.fa-instagram:before {
-  content: "\f16d";
-}
-.fa-flickr:before {
-  content: "\f16e";
-}
-.fa-adn:before {
-  content: "\f170";
-}
-.fa-bitbucket:before {
-  content: "\f171";
-}
-.fa-bitbucket-square:before {
-  content: "\f172";
-}
-.fa-tumblr:before {
-  content: "\f173";
-}
-.fa-tumblr-square:before {
-  content: "\f174";
-}
-.fa-long-arrow-down:before {
-  content: "\f175";
-}
-.fa-long-arrow-up:before {
-  content: "\f176";
-}
-.fa-long-arrow-left:before {
-  content: "\f177";
-}
-.fa-long-arrow-right:before {
-  content: "\f178";
-}
-.fa-apple:before {
-  content: "\f179";
-}
-.fa-windows:before {
-  content: "\f17a";
-}
-.fa-android:before {
-  content: "\f17b";
-}
-.fa-linux:before {
-  content: "\f17c";
-}
-.fa-dribbble:before {
-  content: "\f17d";
-}
-.fa-skype:before {
-  content: "\f17e";
-}
-.fa-foursquare:before {
-  content: "\f180";
-}
-.fa-trello:before {
-  content: "\f181";
-}
-.fa-female:before {
-  content: "\f182";
-}
-.fa-male:before {
-  content: "\f183";
-}
-.fa-gittip:before,
-.fa-gratipay:before {
-  content: "\f184";
-}
-.fa-sun-o:before {
-  content: "\f185";
-}
-.fa-moon-o:before {
-  content: "\f186";
-}
-.fa-archive:before {
-  content: "\f187";
-}
-.fa-bug:before {
-  content: "\f188";
-}
-.fa-vk:before {
-  content: "\f189";
-}
-.fa-weibo:before {
-  content: "\f18a";
-}
-.fa-renren:before {
-  content: "\f18b";
-}
-.fa-pagelines:before {
-  content: "\f18c";
-}
-.fa-stack-exchange:before {
-  content: "\f18d";
-}
-.fa-arrow-circle-o-right:before {
-  content: "\f18e";
-}
-.fa-arrow-circle-o-left:before {
-  content: "\f190";
-}
-.fa-toggle-left:before,
-.fa-caret-square-o-left:before {
-  content: "\f191";
-}
-.fa-dot-circle-o:before {
-  content: "\f192";
-}
-.fa-wheelchair:before {
-  content: "\f193";
-}
-.fa-vimeo-square:before {
-  content: "\f194";
-}
-.fa-turkish-lira:before,
-.fa-try:before {
-  content: "\f195";
-}
-.fa-plus-square-o:before {
-  content: "\f196";
-}
-.fa-space-shuttle:before {
-  content: "\f197";
-}
-.fa-slack:before {
-  content: "\f198";
-}
-.fa-envelope-square:before {
-  content: "\f199";
-}
-.fa-wordpress:before {
-  content: "\f19a";
-}
-.fa-openid:before {
-  content: "\f19b";
-}
-.fa-institution:before,
-.fa-bank:before,
-.fa-university:before {
-  content: "\f19c";
-}
-.fa-mortar-board:before,
-.fa-graduation-cap:before {
-  content: "\f19d";
-}
-.fa-yahoo:before {
-  content: "\f19e";
-}
-.fa-google:before {
-  content: "\f1a0";
-}
-.fa-reddit:before {
-  content: "\f1a1";
-}
-.fa-reddit-square:before {
-  content: "\f1a2";
-}
-.fa-stumbleupon-circle:before {
-  content: "\f1a3";
-}
-.fa-stumbleupon:before {
-  content: "\f1a4";
-}
-.fa-delicious:before {
-  content: "\f1a5";
-}
-.fa-digg:before {
-  content: "\f1a6";
-}
-.fa-pied-piper:before {
-  content: "\f1a7";
-}
-.fa-pied-piper-alt:before {
-  content: "\f1a8";
-}
-.fa-drupal:before {
-  content: "\f1a9";
-}
-.fa-joomla:before {
-  content: "\f1aa";
-}
-.fa-language:before {
-  content: "\f1ab";
-}
-.fa-fax:before {
-  content: "\f1ac";
-}
-.fa-building:before {
-  content: "\f1ad";
-}
-.fa-child:before {
-  content: "\f1ae";
-}
-.fa-paw:before {
-  content: "\f1b0";
-}
-.fa-spoon:before {
-  content: "\f1b1";
-}
-.fa-cube:before {
-  content: "\f1b2";
-}
-.fa-cubes:before {
-  content: "\f1b3";
-}
-.fa-behance:before {
-  content: "\f1b4";
-}
-.fa-behance-square:before {
-  content: "\f1b5";
-}
-.fa-steam:before {
-  content: "\f1b6";
-}
-.fa-steam-square:before {
-  content: "\f1b7";
-}
-.fa-recycle:before {
-  content: "\f1b8";
-}
-.fa-automobile:before,
-.fa-car:before {
-  content: "\f1b9";
-}
-.fa-cab:before,
-.fa-taxi:before {
-  content: "\f1ba";
-}
-.fa-tree:before {
-  content: "\f1bb";
-}
-.fa-spotify:before {
-  content: "\f1bc";
-}
-.fa-deviantart:before {
-  content: "\f1bd";
-}
-.fa-soundcloud:before {
-  content: "\f1be";
-}
-.fa-database:before {
-  content: "\f1c0";
-}
-.fa-file-pdf-o:before {
-  content: "\f1c1";
-}
-.fa-file-word-o:before {
-  content: "\f1c2";
-}
-.fa-file-excel-o:before {
-  content: "\f1c3";
-}
-.fa-file-powerpoint-o:before {
-  content: "\f1c4";
-}
-.fa-file-photo-o:before,
-.fa-file-picture-o:before,
-.fa-file-image-o:before {
-  content: "\f1c5";
-}
-.fa-file-zip-o:before,
-.fa-file-archive-o:before {
-  content: "\f1c6";
-}
-.fa-file-sound-o:before,
-.fa-file-audio-o:before {
-  content: "\f1c7";
-}
-.fa-file-movie-o:before,
-.fa-file-video-o:before {
-  content: "\f1c8";
-}
-.fa-file-code-o:before {
-  content: "\f1c9";
-}
-.fa-vine:before {
-  content: "\f1ca";
-}
-.fa-codepen:before {
-  content: "\f1cb";
-}
-.fa-jsfiddle:before {
-  content: "\f1cc";
-}
-.fa-life-bouy:before,
-.fa-life-buoy:before,
-.fa-life-saver:before,
-.fa-support:before,
-.fa-life-ring:before {
-  content: "\f1cd";
-}
-.fa-circle-o-notch:before {
-  content: "\f1ce";
-}
-.fa-ra:before,
-.fa-rebel:before {
-  content: "\f1d0";
-}
-.fa-ge:before,
-.fa-empire:before {
-  content: "\f1d1";
-}
-.fa-git-square:before {
-  content: "\f1d2";
-}
-.fa-git:before {
-  content: "\f1d3";
-}
-.fa-hacker-news:before {
-  content: "\f1d4";
-}
-.fa-tencent-weibo:before {
-  content: "\f1d5";
-}
-.fa-qq:before {
-  content: "\f1d6";
-}
-.fa-wechat:before,
-.fa-weixin:before {
-  content: "\f1d7";
-}
-.fa-send:before,
-.fa-paper-plane:before {
-  content: "\f1d8";
-}
-.fa-send-o:before,
-.fa-paper-plane-o:before {
-  content: "\f1d9";
-}
-.fa-history:before {
-  content: "\f1da";
-}
-.fa-genderless:before,
-.fa-circle-thin:before {
-  content: "\f1db";
-}
-.fa-header:before {
-  content: "\f1dc";
-}
-.fa-paragraph:before {
-  content: "\f1dd";
-}
-.fa-sliders:before {
-  content: "\f1de";
-}
-.fa-share-alt:before {
-  content: "\f1e0";
-}
-.fa-share-alt-square:before {
-  content: "\f1e1";
-}
-.fa-bomb:before {
-  content: "\f1e2";
-}
-.fa-soccer-ball-o:before,
-.fa-futbol-o:before {
-  content: "\f1e3";
-}
-.fa-tty:before {
-  content: "\f1e4";
-}
-.fa-binoculars:before {
-  content: "\f1e5";
-}
-.fa-plug:before {
-  content: "\f1e6";
-}
-.fa-slideshare:before {
-  content: "\f1e7";
-}
-.fa-twitch:before {
-  content: "\f1e8";
-}
-.fa-yelp:before {
-  content: "\f1e9";
-}
-.fa-newspaper-o:before {
-  content: "\f1ea";
-}
-.fa-wifi:before {
-  content: "\f1eb";
-}
-.fa-calculator:before {
-  content: "\f1ec";
-}
-.fa-paypal:before {
-  content: "\f1ed";
-}
-.fa-google-wallet:before {
-  content: "\f1ee";
-}
-.fa-cc-visa:before {
-  content: "\f1f0";
-}
-.fa-cc-mastercard:before {
-  content: "\f1f1";
-}
-.fa-cc-discover:before {
-  content: "\f1f2";
-}
-.fa-cc-amex:before {
-  content: "\f1f3";
-}
-.fa-cc-paypal:before {
-  content: "\f1f4";
-}
-.fa-cc-stripe:before {
-  content: "\f1f5";
-}
-.fa-bell-slash:before {
-  content: "\f1f6";
-}
-.fa-bell-slash-o:before {
-  content: "\f1f7";
-}
-.fa-trash:before {
-  content: "\f1f8";
-}
-.fa-copyright:before {
-  content: "\f1f9";
-}
-.fa-at:before {
-  content: "\f1fa";
-}
-.fa-eyedropper:before {
-  content: "\f1fb";
-}
-.fa-paint-brush:before {
-  content: "\f1fc";
-}
-.fa-birthday-cake:before {
-  content: "\f1fd";
-}
-.fa-area-chart:before {
-  content: "\f1fe";
-}
-.fa-pie-chart:before {
-  content: "\f200";
-}
-.fa-line-chart:before {
-  content: "\f201";
-}
-.fa-lastfm:before {
-  content: "\f202";
-}
-.fa-lastfm-square:before {
-  content: "\f203";
-}
-.fa-toggle-off:before {
-  content: "\f204";
-}
-.fa-toggle-on:before {
-  content: "\f205";
-}
-.fa-bicycle:before {
-  content: "\f206";
-}
-.fa-bus:before {
-  content: "\f207";
-}
-.fa-ioxhost:before {
-  content: "\f208";
-}
-.fa-angellist:before {
-  content: "\f209";
-}
-.fa-cc:before {
-  content: "\f20a";
-}
-.fa-shekel:before,
-.fa-sheqel:before,
-.fa-ils:before {
-  content: "\f20b";
-}
-.fa-meanpath:before {
-  content: "\f20c";
-}
-.fa-buysellads:before {
-  content: "\f20d";
-}
-.fa-connectdevelop:before {
-  content: "\f20e";
-}
-.fa-dashcube:before {
-  content: "\f210";
-}
-.fa-forumbee:before {
-  content: "\f211";
-}
-.fa-leanpub:before {
-  content: "\f212";
-}
-.fa-sellsy:before {
-  content: "\f213";
-}
-.fa-shirtsinbulk:before {
-  content: "\f214";
-}
-.fa-simplybuilt:before {
-  content: "\f215";
-}
-.fa-skyatlas:before {
-  content: "\f216";
-}
-.fa-cart-plus:before {
-  content: "\f217";
-}
-.fa-cart-arrow-down:before {
-  content: "\f218";
-}
-.fa-diamond:before {
-  content: "\f219";
-}
-.fa-ship:before {
-  content: "\f21a";
-}
-.fa-user-secret:before {
-  content: "\f21b";
-}
-.fa-motorcycle:before {
-  content: "\f21c";
-}
-.fa-street-view:before {
-  content: "\f21d";
-}
-.fa-heartbeat:before {
-  content: "\f21e";
-}
-.fa-venus:before {
-  content: "\f221";
-}
-.fa-mars:before {
-  content: "\f222";
-}
-.fa-mercury:before {
-  content: "\f223";
-}
-.fa-transgender:before {
-  content: "\f224";
-}
-.fa-transgender-alt:before {
-  content: "\f225";
-}
-.fa-venus-double:before {
-  content: "\f226";
-}
-.fa-mars-double:before {
-  content: "\f227";
-}
-.fa-venus-mars:before {
-  content: "\f228";
-}
-.fa-mars-stroke:before {
-  content: "\f229";
-}
-.fa-mars-stroke-v:before {
-  content: "\f22a";
-}
-.fa-mars-stroke-h:before {
-  content: "\f22b";
-}
-.fa-neuter:before {
-  content: "\f22c";
-}
-.fa-facebook-official:before {
-  content: "\f230";
-}
-.fa-pinterest-p:before {
-  content: "\f231";
-}
-.fa-whatsapp:before {
-  content: "\f232";
-}
-.fa-server:before {
-  content: "\f233";
-}
-.fa-user-plus:before {
-  content: "\f234";
-}
-.fa-user-times:before {
-  content: "\f235";
-}
-.fa-hotel:before,
-.fa-bed:before {
-  content: "\f236";
-}
-.fa-viacoin:before {
-  content: "\f237";
-}
-.fa-train:before {
-  content: "\f238";
-}
-.fa-subway:before {
-  content: "\f239";
-}
-.fa-medium:before {
-  content: "\f23a";
-}
diff --git a/web/sass-files/sass/partials/_footer.scss b/web/sass-files/sass/partials/_footer.scss
deleted file mode 100644
index deed14d67..000000000
--- a/web/sass-files/sass/partials/_footer.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-@charset "UTF-8";
-
-.footer-pane {
-	background: #eee;
-    padding-bottom: 1em;
-    .footer-link {
-        padding: 0 1.5em;
-        &.copyright {
-            color: #999;
-            padding-right: 0;
-        }
-    }
-    .footer-site-name {
-        padding: 1.5em 0 1em;
-        font-size:14px;
-        font-weight:bold;
-        text-transform:uppercase;
-    }
-}
-
-.footer, .footer-pane, .footer-push {
-  height: 89px;
-}
-
-
diff --git a/web/sass-files/sass/partials/_forms.scss b/web/sass-files/sass/partials/_forms.scss
deleted file mode 100644
index a2d6eaf99..000000000
--- a/web/sass-files/sass/partials/_forms.scss
+++ /dev/null
@@ -1,51 +0,0 @@
-@charset "UTF-8";
-
-.form-horizontal {
-	.modal-intro {
-		margin: -10px 0 30px;
-	}
-	.form__label {
-		text-align: left;
-		padding-right: 3px;
-		font-weight: 600;
-		font-size: 1.1em;
-		&.light {
-			font-weight: normal;
-			color: #999;
-			font-size: 1.05em;
-			font-style: italic;
-			padding-top: 2px;
-		}
-	}
-	.input__help {
-		color: inherit;
-		margin: 10px 0 0 10px;
-	    word-break: break-word;
-	    @include opacity(0.8);
-		&.dark {
-			@include opacity(1);
-		}
-		&.error {
-			color: #a94442;
-		}
-	}
-	.form-control {
-		font-weight: normal;
-	}
-	.form-group {
-		margin-bottom: 25px;
-		&.less {
-			margin-bottom: 10px;
-		}
-	}
-}
-
-.help-block {
-	font-size: 0.95em;
-	margin: 10px 0 0;
-	color: #999;
-}
-
-.disabled-input {
-	background-color: #dddddd !important;
-}
diff --git a/web/sass-files/sass/partials/_get-link.scss b/web/sass-files/sass/partials/_get-link.scss
deleted file mode 100644
index d4365d1e6..000000000
--- a/web/sass-files/sass/partials/_get-link.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-@charset "UTF-8";
-
-.copy-link-confirm {
-	display: inline-block;
-	float: left;
-	padding: 4px 10px;
-	margin: 1px 0 0 10px;
-}
\ No newline at end of file
diff --git a/web/sass-files/sass/partials/_headers.scss b/web/sass-files/sass/partials/_headers.scss
deleted file mode 100644
index 93cb04198..000000000
--- a/web/sass-files/sass/partials/_headers.scss
+++ /dev/null
@@ -1,320 +0,0 @@
-@charset "UTF-8";
-
-#channel-header {
-	@include flex(0 0 56px);
-}
-.row {
-	&.header {
-		position: relative;
-		.channel__wrap & {
-			display: none;
-		}
-	}
-}
-
-.header-dropdown__icon {
-	font-size: 11px;
-	color: inherit;
-	top: 3px;
-}
-.channel-header__info {
-	display: table;
-	table-layout: fixed;
-	width: 100%;
-	> div {
-		display: block;
-		white-space: nowrap;
-		word-break: break-word;
-		&.dropdown {
-			max-width: 100%;
-			padding-right: 1em;
-			float: left;
-			.header-dropdown__icon {
-				color: #777;
-			}
-			a {
-				text-decoration: none;
-			}
-			.modal {
-				white-space: normal;
-			}
-		}
-		&.description {
-			overflow: hidden;
-			text-overflow: ellipsis;
-			margin-top: 2px;
-			max-height: 45px;
-			.markdown-inline-img {
-				max-height: 45px
-			}
-		}
-		&.popover {
-			white-space: normal;
-		}
-	}
-
-}
-
-.channel-intro {
-	margin: 0 auto 35px;
-	padding: 0 1em 5px;
-	max-width: 1000px;
-	border-bottom: 1px solid lightgrey;
-	.intro-links {
-		margin: 0 1.5em 10px 0;
-		display: inline-block;
-		.fa {
-			margin-right: 5px;
-		}
-	}
-	.channel-intro-profile {
-		margin-top:5px;
-		margin-left: 63px;
-	}
-	.channel-intro-img {
-		float:left;
-		img {
-			@include border-radius(100px);
-		}
-	}
-	.channel-intro__title {
-		font-weight:600;
-		font-size: 20px;
-		margin-bottom: 15px;
-	}
-	.channel-intro__content {
-		background: #f7f7f7;
-		padding: 10px 15px;
-		@include border-radius(3px);
-	}
-	.channel-intro-text {
-		margin-top:35px;
-	}
-}
-
-// Team Header in Sidebar
-.sidebar--left, .sidebar--menu {
-	.team__header {
-		position: relative;
-		padding: 9px 10px;
-		@include legacy-pie-clearfix;
-		&:before {
-			@include single-transition(all, 0.05s, linear);
-			content: "";
-			background: none;
-			top: 0;
-			left: 0;
-			width: 100%;
-			height: 100%;
-			position: absolute;
-		}
-		&:hover {
-			&:before {
-				background: rgba(black, 0.1);
-			}
-			.user__name {
-				color: #fff;
-			}
-			.navbar-right {
-				.dropdown-toggle {
-					@include opacity(1);
-				}
-			}
-		}
-		.navbar-right {
-			font-size: 0.85em;
-			position: absolute;
-			top: 10px;
-			right: 22px;
-			z-index: 5;
-			.dropdown-toggle {
-				@include single-transition(all, 0.1s, linear);
-				padding: 10px;
-				@include opacity(0.8);
-			}
-			.dropdown-menu {
-				li a {
-					padding: 3px 20px;
-					text-overflow: ellipsis;
-					overflow: hidden;
-				}
-			}
-			.dropdown__icon {
-				fill: #fff;
-			}
-		}
-		.settings__link a:hover, a:visited, a:link, a:active {
-			text-decoration: none;
-		}
-		.user__picture {
-			width: 36px;
-			height: 36px;
-			float: left;
-			@include border-radius(36px);
-			margin-right: 6px;
-		}
-		.header__info {
-			color: #fff;
-			@include clearfix;
-			padding-left: 2px;
-			z-index: 1;
-			position: relative;
-		}
-		.team__name, .user__name {
-			display: block;
-			font-weight: 600;
-			font-size: 16px;
-			max-width: 85%;
-			overflow: hidden;
-			white-space: nowrap;
-			text-overflow: ellipsis;
-			text-decoration: none;
-		}
-		.team__name {
-			line-height: 22px;
-			margin-top: -2px;
-			float: left;
-		}
-		.user__name {
-			@include single-transition(all, 0.1s, linear);
-			font-size: 14px;
-			line-height: 18px;
-			font-weight: 400;
-			color: #eee;
-			color: rgba(#fff, 0.8);
-		}
-		> .nav {
-			> li {
-				> a {
-					float: right;
-					background: none !important;
-					padding: 2px;
-					&.dropdown-toggle {
-						line-height: 1.8;
-						font-size: 1em;
-						color: #fff;
-					}
-				}
-			}
-		}
-	}
-	.search__clear {
-		display: none;
-	}
-}
-
-#navbar {
-	.navbar-default {
-		.navbar-toggle {
-			&.menu-toggle {
-				padding: 0 1em;
-			}
-		}
-	}
-}
-
-.channel-header {
-	width:100%;
-	border-left: none;
-	font-size: 14px;
-	line-height: 56px;
-	#member_popover {
-		width: 50px;
-		color: #999;
-		cursor: pointer;
-		.fa {
-			margin-left: 4px;
-			font-size: 16px;
-		}
-	}
-	&.alt {
-		margin: 0;
-		th {
-			font-weight: normal !important;
-		}
-		td {
-			border: none;
-		}
-	}
-	th {
-		text-align: center;
-		&:first-child {
-			text-align: left !important;
-			border-left: none;
-			width: 100%;
-			padding-left: 1em;
-		}
-		&:last-child {
-			width: 8.9%;
-		}
-	}
-	td {
-		padding: 5px 25px 5px !important;
-		font-size: 13px;
-		text-align: center !important;
-		&:first-child {
-			text-align: left !important;
-		}
-	}
-	.heading {
-		margin: 0;
-		color: #555;
-		font-size: 1.3em;
-		font-weight: 600;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		max-width: 100%;
-		display: inline-block;
-		vertical-align: middle;
-		margin-right: 4px;
-	}
-	.caret {
-		margin-top: 3px;
-	}
-	.more {
-		color: #81848b;
-		display: inline-block;
-		vertical-align: top;
-		text-transform: capitalize;
-		font-size: 13px;
-	}
-	.disabled {
-		color: #999;
-	}
-}
-
-.channel-header__navbar {
-	font-size: 16px;
-	.heading {
-		margin-right: 3px;
-	}
-	.header-dropdown__icon {
-		top: 1px;
-	}
-}
-
-.channel-header__links {
-	font-family: 'Open Sans', sans-serif;
-	height: 30px;
-	width: 24px;
-	line-height: 26px;
-	margin-right: 9px;
-	font-size: 22px;
-	.channel__wrap.move--left & {
-		position: absolute;
-		right: -400px;
-		top: 14px;
-	}
-	> a {
-		color: inherit;
-		text-decoration: none;
-		@include opacity(0.6);
-		@include single-transition(all, 0.1s, ease-in);
-		&:hover {
-			@include opacity(1);
-		}
-		&:focus {
-			color: inherit;
-		}
-	}
-}
diff --git a/web/sass-files/sass/partials/_loading.scss b/web/sass-files/sass/partials/_loading.scss
deleted file mode 100644
index e9863ddbd..000000000
--- a/web/sass-files/sass/partials/_loading.scss
+++ /dev/null
@@ -1,42 +0,0 @@
-@charset "UTF-8";
-
-.loading-screen {
-	display: table;
-	width: 100%;
-	height: 100%;
-	padding: 60px;
-	text-align: center;
-	.loading__content {
-		display: table-cell;
-		vertical-align: middle;
-		font-size: 0;
-		h3 {
-			font-size: 16px;
-			font-weight: 400;
-			margin: 0 0.2em 0;
-			display: inline-block;
-		}
-
-		.round {
-			background-color: #444;
-			width: 4px;
-			height: 4px;
-			display: inline-block;
-			margin: 0 2px;
-			opacity: 0.1;
-			@include border-radius(10px);
-			@include animation(move 0.75s infinite linear);
-		}
-
-		@for $i from 1 through 3 {
-			.round-#{$i} {
-				@include animation-delay(.2s*$i);
-			}
-		}
-
-		@include keyframes(move) {
-			from { opacity: 1; }
-			to { opacity: 0.1; }
-		}
-	}
-}
\ No newline at end of file
diff --git a/web/sass-files/sass/partials/_markdown.scss b/web/sass-files/sass/partials/_markdown.scss
deleted file mode 100644
index f34b5ec19..000000000
--- a/web/sass-files/sass/partials/_markdown.scss
+++ /dev/null
@@ -1,106 +0,0 @@
-@charset "UTF-8";
-
-.markdown__heading {
-	font-weight: 700;
-	line-height: 1.5;
-}
-.markdown__paragraph-inline {
-	display: inline;
-	+ .markdown__paragraph-inline {
-		margin-left: 4px;
-	}
-}
-#post-list {
-	.markdown-inline-img {
-		-moz-force-broken-image-icon: 1;
-		max-height: 500px;
-		height: 500px;
-	}
-}
-
-.post-body--code {
-	position: relative;
-
-	pre {
-		margin-bottom: 0;
-		word-break: normal;
-		overflow: auto;
-		word-wrap: normal;
-	}
-
-}
-
-.post-body--code__language {
-	-webkit-transform: translate3d(0,0,0);
-	position: absolute;
-	top: 0;
-	right: 0;
-	color: #fff;
-	background: #21586D;
-	padding: 4px 10px 5px 10px;
-	font-size: 13px;
-	opacity: 0.7;
-	z-index: 5;
-}
-
-.post__body {
-	hr {
-		height: 4px;
-		padding: 0;
-		margin: 15px 0 16px;
-		background-color: #e7e7e7;
-		border: 0 none;
-		@include opacity(0.2);
-	}
-	code {
-		white-space: pre;
-	}
-	.codespan__pre-wrap {
-		code {
-			white-space: pre-wrap;
-		}
-	}
-}
-.markdown__table {
-	background: #fff;
-	margin: 5px 0 10px;
-	th, td {
-		padding: 6px 13px;
-		border: 1px solid #ddd;
-	}
-	tbody tr {
-		background: #fff;
-		&:nth-child(2n) {
-			background-color: #f8f8f8;
-		}
-	}
-}
-blockquote {
-	border: none;
-	position: relative;
-	font-size: 16px;
-	padding: 10px 10px 10px 38px;
-	margin-bottom: 0;
-	&:before {
-		font-family: FontAwesome;
-		font-weight: normal;
-		font-style: normal;
-		display: inline-block;
-		text-decoration: inherit;
-		content: "\f10d";
-		left: 8px;
-		top: 5px;
-		position: absolute;
-		font-size: 20px;
-		@include opacity(0.6);
-	}
-}
-pre {
-	border: none;
-	margin: 5px 0;
-	color: inherit;
-}
-code {
-	background: #fff;
-	color: inherit;
-}
diff --git a/web/sass-files/sass/partials/_mentions.scss b/web/sass-files/sass/partials/_mentions.scss
deleted file mode 100644
index aa654e9e8..000000000
--- a/web/sass-files/sass/partials/_mentions.scss
+++ /dev/null
@@ -1,61 +0,0 @@
-@charset "UTF-8";
-
-.mention {
-	color: #fff;
-	background: $primary-color;
-	position: relative;
-	z-index: 10;
-	padding-bottom: 2px;
-	@include border-radius(3px);
-}
-
-.mentions-name {
-	position:relative;
-	width:100%;
-	height:36px;
-	padding:2px;
-	z-index:101;
-	line-height: 36px;
-	font-size: 13px;
-	cursor: pointer;
-	white-space: nowrap;
-
-	.mention-align {
-		@include clearfix;
-		text-overflow: ellipsis;
-		width: calc(100% - 50px);
-	}
-}
-
-.mentions-text {
-	font-color:black;
-}
-
-.mention-img {
-	margin-right: 6px;
-	height: 32px;
-	width: 32px;
-	line-height: 36px;
-	display: block;
-	font-size: 20px;
-	text-align: center;
-	@include border-radius(32px);
-
-	.mention-align {
-		max-width: 80%;
-		overflow: hidden;
-		display: inline-block;
-		white-space: nowrap;
-		text-overflow: ellipsis;
-	}
-
-}
-
-.mention-fullname {
-	color: grey;
-	padding-left: 10px;
-}
-
-.mention-highlight {
-	background-color:#fff2bb;
-}
diff --git a/web/sass-files/sass/partials/_modal.scss b/web/sass-files/sass/partials/_modal.scss
deleted file mode 100644
index 5b02652af..000000000
--- a/web/sass-files/sass/partials/_modal.scss
+++ /dev/null
@@ -1,489 +0,0 @@
-@charset "UTF-8";
-
-#channel_members_modal .modal-body {
-	min-height: 110px;
-}
-.modal-body {
-	padding: 20px 15px;
-	overflow: auto;
-}
-.more-table {
-	margin: 0;
-	table-layout: fixed;
-	p {
-		font-size: 0.9em;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		@include opacity(0.8);
-		margin: 5px 0;
-	}
-	.profile-img {
-		-moz-border-radius: 50px;
-		-webkit-border-radius: 50px;
-		border-radius: 50px;
-		margin-right: 8px;
-	}
-	.more-row {
-		display: flex;
-
-		.more-details {
-			flex-grow: 1;
-			flex-shrink: 1;
-			overflow: hidden;
-			text-overflow: ellipsis;
-		}
-		.more-actions {
-			flex-grow: 0;
-			flex-shrink: 0;
-		}
-	}
-	.more-name {
-		font-weight: 600;
-		font-size: 0.95em;
-		white-space: nowrap;
-	}
-	.more-description {
-		@include opacity(0.7);
-		display: block;
-		white-space: nowrap;
-	}
-	tbody {
-		> tr {
-			&:hover td {
-				background: #f7f7f7;
-			}
-			&:first-child {
-				td {
-					border: none;
-				}
-			}
-			td {
-				width: 100%;
-				@include legacy-pie-clearfix;
-				text-overflow: ellipsis;
-				padding: 8px 15px;
-				&.padding--equal {
-					padding: 8px;
-				}
-			}
-		}
-	}
-}
-.modal {
-	width: 100%;
-	color: #333;
-	body.browser--IE & {
-		.modal-dialog {
-			@include translateY(0);
-		}
-	}
-	&.image_modal {
-		.modal-backdrop.in {
-			@include opacity(0.7);
-		}
-	}
-	.custom-textarea {
-		color: inherit;
-		border-color: #ccc;
-		&:focus {
-			border-color: #ccc;
-			box-shadow: none;
-		}
-	}
-	.btn {
-		font-size: 13px;
-		&.btn-default {
-			border: none;
-			background: transparent;
-		}
-	}
-	.info__label {
-		font-weight: 600;
-		text-align: right;
-		padding-right: 0;
-	}
-	.team-member-list {
-		width: 100%;
-	}
-	.remove__member {
-		float: right;
-		color: #999;
-		font-size: 20px;
-		line-height: 0;
-		padding: 6px;
-		&:hover {
-			color: #E56565;
-		}
-	}
-	.modal-dialog {
-		max-width: 95%;
-		margin-left: auto;
-		margin-right: auto;
-	}
-	.modal-push-down {
-		margin-top: 5%;
-	}
-	.modal-next-bar {
-		position:absolute;
-		top:0px;
-		right:0;
-		height:100%;
-	}
-	.modal-header {
-		border-radius: 0;
-		background: $primary-color;
-		color: #FFF;
-		padding: 15px 15px 11px;
-		border: 1px solid #ddd;
-		min-height: 56px;
-		@include clearfix;
-		.modal-title {
-			float: left;
-			font-size: 17px;
-			line-height: 27px;
-			color: #f4f4f4;
-			.name {
-				font-weight: 600;
-				color: #fff;
-			}
-		}
-		.modal-action {
-			padding: 0;
-			margin: 0;
-		}
-		button.close {
-			color: #fff;
-			@include opacity(1);
-			z-index: 5;
-			width: 30px;
-			height: 30px;
-			line-height: 30px;
-			@include single-transition(all, 0.25s, ease-in);
-			position: absolute;
-			right: 10px;
-			&:hover {
-				background: rgba(0, 0, 0, 0.1);
-			}
-			span {
-				font-family: 'Open Sans', sans-serif;
-				line-height: 10px;
-			}
-		}
-		.btn {
-			&.btn-primary {
-				float: right;
-				margin: -4px 25px 0 0;
-				position: relative;
-				i {
-					margin-right: 5px;
-				}
-			}
-		}
-	}
-	.no-channel-message {
-		text-align: center;
-		padding: 2em 1em;
-		.primary-message {
-			font-size: 1.25em;
-		}
-		.secondary-message {
-			@include opacity(0.8);
-			margin: 1em 0 0;
-		}
-	}
-	.modal-content {
-		border-radius: 0;
-		box-shadow: none;
-	}
-	.modal-chevron-icon {
-		top:50%;
-		font-size:120%;
-	}
-	.modal-prev-bar {
-		position:absolute;
-		top:0px;
-		left:0;
-		height:100%;
-	}
-	&#more_channels {
-		.modal-body {
-			padding: 0;
-		}
-	}
-	.modal-image {
-		position:relative;
-		width:100%;
-		height: 100%;
-		margin: 0 auto;
-		max-width: 100%;
-
-		.modal-body {
-			@include clearfix;
-			height: 100%;
-			display: table;
-			table-layout: fixed;
-			width: 100%;
-			max-height: 100%;
-		}
-
-		.image-wrapper {
-			position: relative;
-			max-width: 90%;
-			@include border-radius(3px);
-			display: table-cell;
-			vertical-align: middle;
-			text-align: center;
-			width: 100%;
-
-			&:hover {
-				@include border-radius(3px 3px 0 0);
-			}
-
-			&.default {
-				width: 100%;
-				height: 80%;
-			}
-
-			audio, canvas, progress, video {
-				max-width: 100%;
-				height: auto;
-				display: block;
-			}
-
-			.modal-close {
-				background: url("../images/close.png") no-repeat;
-				@include background-size(100% 100%);
-				width: 37px;
-				height: 37px;
-				position: absolute;
-				right: -13px;
-				top: -13px;
-				@include opacity(0);
-				-webkit-transition: opacity 0.6s;
-				-moz-transition: opacity 0.6s;
-				-o-transition: opacity 0.6s;
-				transition: opacity 0.6s;
-				cursor: pointer;
-				z-index: 9999;
-
-				&.modal-close--show {
-					@include opacity(1);
-				}
-
-			}
-
-			> div {
-				min-height: 100px;
-				min-width: 320px;
-				background: #FFF;
-				display: inline-block;
-				position: relative;
-
-				&:hover .file-playback-controls.stop {
-					@include opacity(1);
-				}
-
-			}
-
-			img {
-				max-width: 100%;
-				max-height: 100%;
-			}
-
-			.spinner.file__loading {
-				z-index: 2;
-				position: absolute;
-				left: 50%;
-				margin-left: -16px;
-				top: 50%;
-				margin-top: -16px;
-			}
-		}
-		.modal-content{
-			box-shadow: none;
-			background: rgba(0, 0, 0, 0);
-			width: 100%;
-			height: 100%;
-			padding: 0;
-			border: none;
-		}
-		.image-body {
-			vertical-align: middle;
-			display: table-cell;
-			text-align: center;
-			height: 100%;
-			padding: 0;
-			position: relative;
-			overflow: visible;
-		}
-		.image-control {
-			width: 50px;
-			height: 45px;
-			float: left;
-			background: url(../images/prev.png) left no-repeat;
-			top: 50%;
-			position: relative;
-			margin-top: -23px;
-			&.image-next {
-				float: right;
-				background: url(../images/next.png) left no-repeat;
-			}
-		}
-		.loader-image {
-			position: absolute;
-			top: 0;
-			bottom: 0;
-			left: 0;
-			right: 0;
-			margin: auto;
-		}
-		.loader-percent {
-			position: absolute;
-			top: 55px;
-			bottom: 0;
-			left: 0;
-			right: 0;
-			margin: auto;
-			color:grey;
-			height:20px;
-		}
-		.modal-button-bar {
-			position:absolute;
-			bottom:-40px;
-			left:0px;
-			right:0px;
-			background-color: #222;
-			@include border-radius(0 0 3px 3px);
-			@include opacity(0);
-			-webkit-transition: opacity 0.6s;
-			-moz-transition: opacity 0.6s;
-			-o-transition: opacity 0.6s;
-			transition: opacity 0.6s;
-			line-height: 40px;
-			padding: 0 10px;
-			&.footer--show {
-				@include opacity(1);
-			}
-			.image-links {
-				a, span {
-					float: right;
-				}
-			}
-			.text {
-				vertical-align:middle;
-				bottom:0;
-				color:white;
-				margin-left:5px;
-			}
-			.public-link {
-				margin-right: 5px;
-			}
-		}
-	}
-}
-
-
-// Invite New Member
-.invite {
-	margin-right: 40px;
-}
-
-.row--invite {
-	margin-right: 40px;
-	@include clearfix;
-	.col-sm-6 {
-		padding: 0 0 0 15px;
-		&:first-child {
-			padding-left: 0;
-		}
-	}
-}
-
-.more-modal {
-
-	.user-list {
-		overflow-y: auto;
-		overflow-x: hidden;
-		margin-top: 10px;
-		position: relative;
-	}
-
-	.table {
-		margin-top: 10px;
-	}
-
-	.modal-body {
-		padding: 10px 0 20px;
-		overflow-x: hidden;
-	}
-
-	.filter-row {
-		margin-top: 10px;
-		@include clearfix;
-	}
-
-	.member-count {
-		margin-top: 5px;
-		float: right;
-		@include opacity(0.8);
-	}
-
-	.more-purpose {
-		@include opacity(0.7);
-	}
-}
-
-.modal-body.edit-modal-body {
-	overflow: visible;
-
-	.suggestion-content {
-		max-height: 150px;
-	}
-}
-
-.user-list {
-    display: flex;
-    flex-direction: column;
-
-    .profile-img {
-        width: 38px;
-        height: 38px;
-        flex-grow: 0;
-        flex-shrink: 0;
-    }
-
-    .user-list-item__details {
-        flex-grow: 1;
-        flex-shrink: 1;
-        overflow:hidden;
-        text-overflow: ellipsis;
-
-        .more-name {
-            white-space: nowrap;
-        }
-
-        .more-description {
-            white-space: nowrap;
-        }
-    }
-
-    .user-list-item__actions {
-        flex-grow: 0;
-        flex-shrink: 0;
-    }
-}
-
-.filtered-user-list {
-    display: flex;
-    flex-direction: column;
-
-    .filter-row {
-        flex-grow: 0;
-        flex-shrink: 0;
-    }
-
-    .user-list {
-        flex-grow: 1;
-        flex-shrink: 1;
-    }
-}
diff --git a/web/sass-files/sass/partials/_navbar.scss b/web/sass-files/sass/partials/_navbar.scss
deleted file mode 100644
index 28ab61ec1..000000000
--- a/web/sass-files/sass/partials/_navbar.scss
+++ /dev/null
@@ -1,112 +0,0 @@
-@charset "UTF-8";
-
-#navbar{
-	input {
-		margin: 0px 5px 0px 2px;
-	}
-	.navbar-default {
-		position: absolute;
-		border: none;
-		min-height: 45px;
-		background: $primary-color;
-		.navbar-nav {
-			> li {
-				> a {
-					height: 45px;
-					padding: 0 1.3em;
-					i {
-						line-height: 45px;
-					}
-				}
-			}
-		}
-		.navbar-toggle {
-			width: 43px;
-			float: left;
-			border-color: transparent;
-			border-radius: 0;
-			margin: 0;
-			padding: 0 10px;
-			line-height: 48px;
-			height: 44px;
-			z-index: 5;
-			fill: #fff;
-			.icon-bar {
-				background: #fff;
-				width: 21px;
-			}
-			.glyphicon-search {
-				top: -1px;
-			}
-			.icon--white {
-				color: #fff;
-			}
-			&:hover, &:active, &:focus {
-				background: inherit;
-			}
-		}
-		.navbar-brand {
-			padding: 0 0.5em;
-			height: 45px;
-			line-height: 45px;
-			float: none;
-			font-size: 16px;
-			.heading {
-				margin-right: 3px;
-				font-weight: 600;
-				color: #fff;
-			}
-			.header-dropdown__icon {
-				top: 1px;
-			}
-			.dropdown-toggle {
-				color: #fff;
-			}
-			.description {
-				display: inline-block;
-				margin-right: 0.5em;
-				color: #fff;
-				&.info-popover {
-					width: 19px;
-					height: 19px;
-					background: url("../images/info__icon.png");
-					@include background-size(100% 100%);
-					vertical-align: middle;
-					top: -1px;
-					position: relative;
-					cursor: pointer;
-				}
-			}
-		}
-	}
-	.sidebar-channel {
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		span {
-			white-space: nowrap;
-			margin-left: 2px;
-		}
-	}
-	.channel-create-btn {
-		margin-right: 15px;
-	}
-	.more-channel-table {
-		width: 100%;
-		border: 1px solid #dbdbdc;
-		td {
-			padding: 7px;
-		}
-		button {
-			width: 110px;
-		}
-	}
-}
-
-.badge-notify {
-	background: red;
-	position: absolute;
-	left: 4px;
-	top: 3px;
-	z-index: 100;
-}
diff --git a/web/sass-files/sass/partials/_oauth.scss b/web/sass-files/sass/partials/_oauth.scss
deleted file mode 100644
index 2bd9a0de5..000000000
--- a/web/sass-files/sass/partials/_oauth.scss
+++ /dev/null
@@ -1,33 +0,0 @@
-@charset "UTF-8";
-
-.oauth-prompt {
-	background: #fff;
-	border: 1px solid #ddd;
-	padding: 1em 2em 0;
-	margin: 50px auto;
-	max-width: 90%;
-	width: 600px;
-	.prompt__heading {
-		font-size: em(20px);
-		line-height: normal;
-		margin: 1em 0;
-		display: table;
-		width: 100%;
-		> div {
-			display: table-cell;
-			vertical-align: top;
-		}
-		img {
-			margin-right: 15px;
-		}
-	}
-	.prompt__allow {
-		margin: 1em 0;
-		font-size: em(24px);
-	}
-	.prompt__buttons {
-		text-align: right;
-		border-top: 1px solid #ddd;
-		padding: 1.5em 0;
-	}
-}
\ No newline at end of file
diff --git a/web/sass-files/sass/partials/_perfect-scrollbar.scss b/web/sass-files/sass/partials/_perfect-scrollbar.scss
deleted file mode 100755
index 0e0967d81..000000000
--- a/web/sass-files/sass/partials/_perfect-scrollbar.scss
+++ /dev/null
@@ -1,122 +0,0 @@
-@charset "UTF-8";
-
-.ps-container {
-  overflow: hidden !important; }
-  .ps-container.ps-active-x > .ps-scrollbar-x-rail, .ps-container.ps-active-y > .ps-scrollbar-y-rail {
-    display: block; }
-  .ps-container.ps-in-scrolling {
-     }
-    .ps-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail {
-      background-color: #eee;
-      opacity: 0.9;
-      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
-      filter: alpha(opacity=90); }
-      .ps-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x {
-        background-color: #999; }
-    .ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail {
-      background-color: #eee;
-      opacity: 0.9;
-      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
-      filter: alpha(opacity=90); }
-      .ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y {
-        background-color: #999; }
-  .ps-container > .ps-scrollbar-x-rail {
-    display: none;
-    position: absolute;
-    /* please don't change 'position' */
-    -webkit-border-radius: 4px;
-    -moz-border-radius: 4px;
-    -ms-border-radius: 4px;
-    border-radius: 4px;
-    opacity: 0;
-    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-    filter: alpha(opacity=0);
-    -webkit-transition: background-color .2s linear, opacity .2s linear;
-    -moz-transition: background-color .2s linear, opacity .2s linear;
-    -o-transition: background-color .2s linear, opacity .2s linear;
-    transition: background-color .2s linear, opacity .2s linear;
-    bottom: 3px;
-    /* there must be 'bottom' for ps-scrollbar-x-rail */
-    height: 8px; }
-    .ps-container > .ps-scrollbar-x-rail > .ps-scrollbar-x {
-      position: absolute;
-      /* please don't change 'position' */
-      background-color: #aaa;
-      -webkit-border-radius: 4px;
-      -moz-border-radius: 4px;
-      -ms-border-radius: 4px;
-      border-radius: 4px;
-      -webkit-transition: background-color .2s linear;
-      -moz-transition: background-color .2s linear;
-      -o-transition: background-color .2s linear;
-      transition: background-color .2s linear;
-      bottom: 0;
-      /* there must be 'bottom' for ps-scrollbar-x */
-      height: 8px; }
-  .ps-container > .ps-scrollbar-y-rail {
-    display: none;
-    position: absolute;
-    /* please don't change 'position' */
-    -webkit-border-radius: 4px;
-    -moz-border-radius: 4px;
-    -ms-border-radius: 4px;
-    border-radius: 4px;
-    opacity: 0;
-    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-    filter: alpha(opacity=0);
-    -webkit-transition: background-color .2s linear, opacity .2s linear;
-    -moz-transition: background-color .2s linear, opacity .2s linear;
-    -o-transition: background-color .2s linear, opacity .2s linear;
-    transition: background-color .2s linear, opacity .2s linear;
-    right: 3px;
-    /* there must be 'right' for ps-scrollbar-y-rail */
-    width: 8px; }
-    .ps-container > .ps-scrollbar-y-rail > .ps-scrollbar-y {
-      position: absolute;
-      /* please don't change 'position' */
-      background-color: #aaa;
-      -webkit-border-radius: 4px;
-      -moz-border-radius: 4px;
-      -ms-border-radius: 4px;
-      border-radius: 4px;
-      -webkit-transition: background-color .2s linear;
-      -moz-transition: background-color .2s linear;
-      -o-transition: background-color .2s linear;
-      transition: background-color .2s linear;
-      right: 0;
-      /* there must be 'right' for ps-scrollbar-y */
-      width: 8px; }
-  .ps-container:hover.ps-in-scrolling {
-     }
-    .ps-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail {
-      background-color: #eee;
-      opacity: 0.9;
-      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
-      filter: alpha(opacity=90); }
-      .ps-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x {
-        background-color: #999; }
-    .ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail {
-      background-color: #eee;
-      opacity: 0.9;
-      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
-      filter: alpha(opacity=90); }
-      .ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y {
-        background-color: #999; }
-  .ps-container:hover > .ps-scrollbar-x-rail, .ps-container:hover > .ps-scrollbar-y-rail {
-    opacity: 0.6;
-    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
-    filter: alpha(opacity=60); }
-  .ps-container:hover > .ps-scrollbar-x-rail:hover {
-    background-color: #eee;
-    opacity: 0.9;
-    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
-    filter: alpha(opacity=90); }
-    .ps-container:hover > .ps-scrollbar-x-rail:hover > .ps-scrollbar-x {
-      background-color: #999; }
-  .ps-container:hover > .ps-scrollbar-y-rail:hover {
-    background-color: #eee;
-    opacity: 0.9;
-    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
-    filter: alpha(opacity=90); }
-    .ps-container:hover > .ps-scrollbar-y-rail:hover > .ps-scrollbar-y {
-      background-color: #999; }
diff --git a/web/sass-files/sass/partials/_popover.scss b/web/sass-files/sass/partials/_popover.scss
deleted file mode 100644
index bf762d2c9..000000000
--- a/web/sass-files/sass/partials/_popover.scss
+++ /dev/null
@@ -1,158 +0,0 @@
-@charset "UTF-8";
-
-.channel-header__info .popover-content {
-	max-height: 250px;
-	overflow: auto;
-}
-
-.user-popover {
-	cursor: pointer;
-	display: inline-block;
-}
-
-.code-popover .popover-content {
-    padding: 5px;
-}
-
-.user-popover__image {
-	margin: 0 0 10px;
-	@include border-radius(128px);
-}
-
-.user-popover__email {
-	max-width: 200px;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	display: block;
-}
-
-.search-help-popover {
-    visibility: hidden;
-    max-width: none;
-    width: 100%;
-    top: 36px;
-    @include single-transition(opacity, 0.3s, ease-in);
-    font-size: em(13px);
-
-    &.autocomplete {
-        display: block;
-        .popover-content {
-            padding: 10px;
-            position: relative;
-        }
-    }
-
-    .search-autocomplete__divider {
-        margin: 10px 0 5px;
-        line-height: 21px;
-        position: relative;
-        &:first-child {
-            margin-top: 5px;
-        }
-        span {
-            display: inline-block;
-            padding-right: 10px;
-            background: #fff;
-            z-index: 5;
-            position: relative;
-        }
-        &:before {
-            content: "";
-            position: absolute;
-            width: 100%;
-            height: 1px;
-            background: #ddd;
-            top: 10px;
-            left: 0;
-            @include opacity(0.2);
-        }
-    }
-
-    .search-autocomplete__item {
-        cursor: pointer;
-        padding: 6px 8px;
-        margin: 3px 0 0 5px;
-        @include border-radius(2px);
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-
-        &:hover {
-            background: rgba(black, 0.1);
-        }
-
-        &.selected {
-            background: rgba(black, 0.2);
-        }
-
-        .fa {
-            margin-right: 5px;
-            @include opacity(0.5);
-        }
-
-        .profile-img {
-            margin-top: -1px;
-            height: 16px;
-            margin-right: 6px;
-            width: 16px;
-        }
-    }
-
-    &.bottom > .arrow {
-        top: -18px;
-        border-width: 9px;
-        left: 30px;
-    }
-
-    .popover-content {
-        max-height: 500px;
-        overflow: auto;
-        padding: 3px 13px;
-    }
-
-    h4 {
-        font-size: 1em;
-    }
-
-    ul {
-        padding-left: 17px;
-        span {
-            @include opacity(0.8);
-        }
-        strong, b {
-            @include opacity(1);
-        }
-    }
-
-    .tooltip-inner {
-        max-width: 100%;
-    }
-
-    &.visible {
-        visibility: visible;
-        @include opacity(1);
-    }
-}
-
-#member-list-popover {
-    max-width: initial;
-    .popover-content {
-        position: relative;
-        padding: 0;
-        width: 260px;
-        max-height: 350px;
-        .text-nowrap {
-            padding: 6px 10px;
-            width: 100%;
-            overflow: hidden;
-            line-height: 26px;
-            font-size: 13px;
-        }
-        .more-name {
-            margin-left: 6px;
-            max-width: 140px;
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
-    }
-}
diff --git a/web/sass-files/sass/partials/_post.scss b/web/sass-files/sass/partials/_post.scss
deleted file mode 100644
index 209f8e27f..000000000
--- a/web/sass-files/sass/partials/_post.scss
+++ /dev/null
@@ -1,1013 +0,0 @@
-@charset "UTF-8";
-
-.custom-textarea {
-	white-space:pre-wrap;
-	word-wrap:break-word;
-	background:transparent;
-	border:1px solid #ccc;
-	position:absolute;
-	top:0px;
-	height:auto;
-	resize: none;
-	line-height:20px;
-	min-height:36px;
-	overflow-x: hidden;
-	&:focus {
-		border-color: #ccc;
-		box-shadow: none;
-	}
-}
-
-.bad-connection {
-	background: #ffffac !important;
-	color: #D04444 !important;
-}
-
-.textarea-div {
-	white-space:pre-wrap;
-	word-wrap:normal;
-	color:rgba(0,0,0,0);
-	position:absolute;
-	top:0px;
-	word-break: break-word;
-	left:1px;
-	line-height:20px;
-	min-height:36px;
-	height:auto;
-	border:0;
-}
-
-body.ios {
-	.textarea-div {
-		padding: 7px 17px 7px 15px;
-		-webkit-overflow-scrolling: auto;
-	}
-}
-
-.textarea-div::-webkit-scrollbar {
-	display:none;
-}
-
-.textarea-wrapper {
-	position:relative;
-	.textbox-preview-area {
-		position: absolute;
-		z-index: 2;
-		top: 0;
-		left: 0;
-		box-shadow: none;
-		white-space: normal;
-	}
-	.help__text {
-		right: 0;
-		position: absolute;
-		z-index: 3;
-		bottom: -23px;
-		font-size: 13px;
-		cursor: pointer;
-	}
-	.textbox-preview-link {
-		margin-right: 8px;
-	}
-	min-height:36px;
-}
-
-.help_format_text {
-	display: none !important;
-	position: absolute;
-	bottom: -23px;
-	left: 0px;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	font-size: 0.85em;
-	@include opacity(0);
-	@include single-transition(all 0.2s ease);
-
-	b, i, code {
-		margin-right: 3px;
-	}
-	.textbox-preview-link{
-		font-size: 13px;
-		cursor: pointer;
-		margin-left: 15px;
-	}
-}
-
-.date-separator, .new-separator {
-	text-align: center;
-	height: 2em;
-	margin: 0;
-	position: relative;
-	z-index: 0;
-	&:before, &:after {
-		content: "";
-		height: 1em;
-		position: absolute;
-		left: 0;
-		width: 100%;
-		display: none;
-	}
-	&:before {
-		bottom: 0;
-	}
-	&:after {
-		top: 0;
-	}
-	&.hovered--after {
-		&:before {
-			background: #f5f5f5;
-			display: block;
-		}
-	}
-	&.hovered--before {
-		&:after {
-			background: #f5f5f5;
-			display: block;
-		}
-	}
-	.separator__hr {
-		border-color: #ccc;
-		margin: 0;
-		position: relative;
-		z-index: 5;
-		top: 1em;
-	}
-	.separator__text {
-		line-height: 2em;
-		color: #555;
-		background: #FFF;
-		display: inline-block;
-		padding: 0 1em;
-		font-weight: 700;
-		@include border-radius(50px);
-		position: relative;
-		z-index: 5;
-		font-size: 13px;
-	}
-}
-.new-separator {
-	.separator__hr {
-		border-color: #FFAF53;
-	}
-	.separator__text {
-		color: #F80;
-		font-weight: normal;
-	}
-}
-
-.file-overlay {
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	text-align: center;
-	color: #FFF;
-	font-size: em(20px);
-	font-weight: 600;
-	z-index: 6;
-
-	.overlay__indent {
-		background-color: rgba(0, 0, 0, 0.6);
-		position: relative;
-		height: 100%;
-		@include clearfix;
-	}
-
-	&.center-file-overlay {
-		.overlay__indent {
-			margin-left: 220px;
-		}
-	}
-
-	&.right-file-overlay {
-		font-size: em(18px);
-		.overlay__circle {
-			width: 300px;
-			height: 300px;
-			margin: -150px 0 0 -150px;
-		}
-		.overlay__files {
-			margin: 60px auto 15px;
-			width: 150px;
-		}
-	}
-
-	.overlay__circle {
-		background: #111;
-		background: rgba(black, 0.7);
-		width: 370px;
-		height: 370px;
-		margin: -185px 0 0 -185px;
-		@include border-radius(500px);
-		position: absolute;
-		top: 50%;
-		left: 50%;
-		pointer-events: none;
-	}
-
-	.overlay__files {
-		display: block;
-		margin: 75px auto 20px;
-	}
-
-	.overlay__logo {
-		position: absolute;
-		left: 50%;
-		bottom: 30px;
-		margin-left: -50px;
-		@include opacity(0.3);
-	}
-
-	.fa {
-		display: inline-block;
-		font-size: 1.1em;
-		margin-right: 8px;
-	}
-}
-
-#post-list {
-	@include flex(1 1 auto);
-	position: relative;
-	overflow-y: hidden;
-	height: 100%;
-
-	.inactive {
-		display: none;
-	}
-
-	.post-list-holder-by-time {
-		background: #fff;
-		overflow-y: scroll;
-		width: 100%;
-		padding: 1em 0 0;
-		position: absolute;
-		height: 100%;
-		-webkit-overflow-scrolling: touch;
-		&.active {
-			display: inline;
-		}
-	}
-
-	.more-messages-text {
-		margin: 5px 0 10px;
-		display: block;
-		text-align: center;
-		outline: none;
-		border: none;
-		font-size: 13px;
-	}
-	.beginning-messages-text {
-		margin-top: 2px;
-		margin-bottom: 5px;
-		display: block;
-		text-align: center;
-		color: grey;
-	}
-}
-
-.post-list__timestamp {
-	position: absolute;
-	top: 8px;
-	left: 50%;
-	z-index: 50;
-	width: 120px;
-	text-align: center;
-	background: $primary-color;
-	color: #fff;
-	@include border-radius(3px);
-	font-size: 12px;
-	line-height: 25px;
-	margin-left: -60px;
-	-webkit-font-smoothing: initial;
-	@include single-transition(all, 0.6s, ease);
-	@include translateY(-45px);
-	@include opacity(0);
-	display: none;
-
-	&.scrolling {
-		@include translateY(0);
-		@include opacity(0.8);
-	}
-}
-
-.post-list__arrows {
-	background-repeat: no-repeat;
-	width: 40px;
-	height: 40px;
-	text-align: center;
-	fill: #444;
-	position: absolute;
-	bottom: 0;
-	left: 9px;
-	z-index: 50;
-	@include opacity(0);
-	@include single-transition(all, 0.6s);
-	display: none;
-
-	svg {
-		color: inherit;
-		width: 28px;
-		height: 28px;
-	}
-
-	&.scrolling {
-		display: block;
-		@include opacity(1);
-	}
-}
-
-.post-create__container {
-	form {
-		width: 100%;
-		padding: 0.5em 14px 0;
-		margin: 0 auto;
-		max-width: 1028px;
-	}
-	.post-create-body {
-		position: relative;
-		padding: 0 0 2px;
-		.post-body__cell {
-			vertical-align: top;
-			position: relative;
-			&.scroll {
-				.btn-file {
-					right: 15px;
-				}
-				.custom-textarea {
-					padding-right: 43px;
-				}
-			}
-		}
-		.send-button {
-			display: none;
-			cursor: pointer;
-			padding-right: 4px;
-			width: 45px;
-			height: 37px;
-			font-size: 18px;
-			line-height: 37px;
-			vertical-align: bottom;
-			text-align: center;
-			@include single-transition(all, 0.15s);
-			&:active {
-				@include opacity(0.75);
-			}
-		}
-		.custom-textarea {
-			padding-top: 8px;
-			padding-right: 28px;
-			max-height: 162px !important;
-			line-height: 1.5;
-		}
-		.textarea-div {
-			padding-top: 8px;
-			padding-right: 30px;
-			max-height: 163px !important;
-			overflow: auto;
-			line-height: 1.5;
-		}
-		.btn-file {
-			right: 0;
-			position: absolute;
-			top: 1px;
-			color: #444;
-			@include opacity(0.5);
-			@include single-transition(all, 0.15s);
-			font-size: 16px;
-			padding: 7px 9px 6px;
-			&:hover, &:active {
-				@include opacity(0.9);
-				box-shadow: none;
-			}
-		}
-		textarea {
-			box-shadow: none;
-		}
-	}
-	.post-create-footer {
-		@include clearfix;
-		padding: 3px 0 0 0;
-		font-size: 13px;
-		.control-label {
-			font-weight: normal;
-			margin-bottom: 0;
-			top: -5px;
-			position: relative;
-		}
-	}
-	.msg-typing {
-		display: block;
-		@include opacity(0.7);
-		white-space: nowrap;
-		margin-bottom: 5px;
-		overflow: hidden;
-		font-size: 0.95em;
-		text-overflow: ellipsis;
-		height: 20px;
-	}
-}
-
-.post-list__table {
-	display: table;
-	table-layout: fixed;
-	width: 100%;
-	min-height: 100%;
-	height: 100%;
-	.post-list__content {
-		display: table-cell;
-		vertical-align: bottom;
-		.dropdown-menu {
-			&.bottom {
-				top: auto;
-				bottom: 25px;
-			}
-		}
-	}
-}
-
-.post {
-	word-wrap: break-word;
-	padding: 8px .5em 0 1em;
-	position: relative;
-	max-width: 100%;
-	@include legacy-pie-clearfix;
-
-	&:hover {
-		.dropdown, .comment-icon__container, .post__reply, .post__remove {
-			visibility: visible;
-		}
-		.permalink-icon {
-			visibility: visible;
-		}
-	}
-
-	&.post--highlight {
-		background-color: beige;
-	}
-
-	p {
-		margin: 0;
-		line-height: 1.6em;
-		font-size: 0.97em;
-		white-space: pre-wrap;
-
-		&:last-child {
-			margin-bottom: 0.5em;
-		}
-
-	}
-
-	span {
-
-		p:last-child {
-			margin-bottom: 0.5em;
-		}
-
-	}
-
-	&.post--root {
-
-		.comment-icon__container {
-			visibility: visible;
-		}
-
-	}
-
-	&.same--root {
-
-		&.same--user {
-			padding: 0 .5em 0 1em;
-
-			&:hover {
-
-				.post__time {
-					@include opacity(0.5);
-				}
-
-			}
-
-			.post__header {
-				margin: 0;
-				height: 0;
-
-				.col__name {
-					display: none;
-				}
-
-				.col__reply {
-					top: 6px;
-				}
-
-			}
-
-			.post__time {
-				top: 24px;
-			}
-
-			.post__time {
-				font: normal normal normal FontAwesome;
-				text-rendering: auto;
-				-webkit-font-smoothing: antialiased;
-				-moz-osx-font-smoothing: grayscale;
-				position: absolute;
-				top: -2px;
-				left: -7px;
-				font-size: 11px;
-				line-height: 37px;
-				@include opacity(0);
-			}
-
-		}
-
-		&.post--comment {
-
-			.post__link {
-				display: none;
-			}
-
-			.post__img {
-				img {
-					display: none;
-				}
-			}
-
-		}
-
-		&.post--comment {
-			.post__body {
-				border-left: 4px solid #ddd;
-			}
-		}
-
-	}
-
-	&.other--root {
-
-		.comment-icon__container {
-
-			&.icon--show {
-				visibility: visible;
-			}
-
-		}
-
-		&.post--comment {
-
-			.popover {
-
-				margin-top: 84px;
-
-				> .arrow {
-					top: 21px !important;
-				}
-			}
-
-			.post__header {
-
-				.col__reply {
-					top: 53px;
-				}
-
-			}
-
-		}
-
-	}
-
-	.post__content {
-		margin: 0 auto;
-		position: relative;
-		max-width: 1000px;
-		display: table;
-		width: 100%;
-		table-layout: fixed;
-
-		> div {
-			display: table-cell;
-			vertical-align: top;
-		}
-
-	}
-
-	.post__header {
-		padding: 0;
-		list-style: none;
-		margin-bottom: 2px;
-
-		li {
-			display: inline-block;
-			vertical-align: top;
-		}
-
-		.col__name {
-			margin-right: 7px;
-			font-weight: 600;
-
-			.user-popover {
-				max-width: 200px;
-				@include clearfix;
-				text-overflow: ellipsis;
-				white-space: nowrap;
-			}
-
-		}
-
-		.col__reply {
-			position: absolute;
-			right: 0;
-			top: 30px;
-			width: 65px;
-			white-space: nowrap;
-		}
-
-		.permalink-popover {
-			min-width: 0;
-
-			.popover-content {
-				padding: 5px;
-			}
-
-			.form-control, .btn {
-				font-size: 13px;
-				height: 30px;
-				padding: 0 8px;
-				line-height: 30px;
-			}
-
-		}
-
-	}
-
-	.post__img {
-		width: 46px;
-		img {
-			width: 36px;
-			height: 36px;
-			vertical-align: inherit;
-			@include border-radius(50px);
-		}
-	}
-
-	.post__embed-container{
-		display: block;
-		max-height: 1000px;
-		transition: max-height .5s ease;
-		overflow: hidden;
-		&[hidden]{
-			max-height: 0;
-		}
-	}
-
-	.dropdown {
-		display: inline-block;
-		visibility: hidden;
-		margin-right: 5px;
-		top: -1px;
-
-		.dropdown-menu {
-			right: 0;
-			left: auto;
-			min-width: 130px;
-			padding: 2px 0;
-
-			li {
-				display: block;
-
-			}
-
-			a {
-				padding: 5px 15px;
-			}
-
-		}
-
-	}
-
-	.post__dropdown {
-		&:after {
-			content: '[...]';
-			top: -1px;
-			position: relative;
-		}
-	}
-
-	.post__remove {
-		font-family: 'Open Sans', sans-serif;
-		position: relative;
-		display: inline-block;
-		vertical-align: top;
-		right: 15px;
-		top: -5px;
-		font-size: 20px;
-		width: 20px;
-		height: 20px;
-		line-height: 20px;
-		font-weight: 600;
-		visibility: hidden;
-		color: inherit;
-		@include opacity(0.5);
-		text-decoration: none;
-
-		&:hover {
-			@include opacity(0.8);
-		}
-
-	}
-
-	.post__body {
-		word-wrap: break-word;
-		padding: 0.2em 0.5em;
-		@include legacy-pie-clearfix;
-		width: calc(100% - 75px);
-
-		p {
-			margin: 0 0 0.4em;
-		}
-
-		p + p {
-			margin-top: 1.4em;
-		}
-
-		li {
-			> p {
-				margin-top: 10px;
-			}
-		}
-
-		img {
-			max-height: 400px;
-		}
-
-		ul, ol {
-			margin-bottom: 0.4em;
-
-			p {
-				margin-bottom: 0;
-			}
-			li ul, li ol {
-				padding: 0 0 0 20px
-			}
-
-			li.list-item--task-list ul, li.list-item--task-list ol {
-				margin-left: 20px;
-			}
-
-			li.list-item--task-list ul {
-				padding-left: 0;
-			}
-
-			li:not(.list-item--task-list) li.list-item--task-list, li:not(.list-item--task-list) li.list-item--task-list ~ li {
-				margin-left: -20px;
-			}
-
-			li input[type="checkbox"]:disabled {
-				vertical-align: top;
-				cursor: default;
-			}
-		}
-
-		ul li.list-item--task-list, ul li.list-item--task-list ~ li {
-			list-style-type: none;
-		}
-
-		ul li.list-item--task-list ~ li:not(.list-item--task-list) {
-			text-indent: 3px;
-
-			&:before {
-				content: "⦁";
-				margin-right: 8px;
-			}
-		}
-	}
-
-	.post__link {
-		margin: 2px 0 5px;
-		font-size: 13px;
-		text-overflow: ellipsis;
-		overflow: hidden;
-		white-space: nowrap;
-	}
-
-	.post__embed-visibility {
-		cursor: pointer;
-		font: normal normal normal 14px/1 FontAwesome;
-		text-rendering: auto;
-		-webkit-font-smoothing: antialiased;
-		-moz-osx-font-smoothing: grayscale;
-		margin: 5px 0 10px;
-		display: inline-block;
-
-		&:hover{
-			text-decoration: none;
-		}
-
-		&:before {
-			content: "\f065";
-			font-size: 14px;
-		}
-
-		&[data-expanded="true"]:before{
-			content: "\f066";
-		}
-	}
-
-	.post__time{
-		font-size: 0.9em;
-	}
-
-	.post__time, &.post--system .post__body {
-		@include opacity(0.6);
-	}
-
-	.post-loading-gif {
-		height:10px;
-		width:10px;
-		margin-top:6px;
-	}
-
-	.post-fail {
-		color: #D58A8A;
-	}
-
-	.post-waiting {
-		color: #999;
-	}
-
-	.permalink-icon {
-		display: inline-block;
-		color: $primary-color;
-		visibility: hidden;
-	}
-
-	.post__reply {
-		display: inline-block;
-		margin-right: 6px;
-		visibility: hidden;
-		svg {
-			width: 18px;
-			top: 3px;
-			fill: inherit;
-			position: relative;
-		}
-	}
-
-	.comment-icon__container {
-		fill: $primary-color;
-		display: inline-block;
-		visibility: hidden;
-
-		&:focus {
-			outline: none;
-		}
-
-		&.icon--visible {
-			visibility: visible;
-		}
-
-		svg {
-			height: 17px;
-			width: 17px;
-		}
-
-		.comment-icon {
-			display: inline-block;
-			top: 2px;
-			position: relative;
-			margin-right: 3px;
-			fill: inherit;
-		}
-
-		path {
-			fill: inherit;
-		}
-
-	}
-
-	.web-embed-data {
-		padding: 2px 0 0 10px;
-		background: #f9f9f9;
-		background: rgba(0, 0, 0, 0.05);
-		@include border-radius(2px);
-		height: 50px;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		.embed-title {
-			margin: 3px 0 1px;
-			color: #555;
-			font-weight: 600;
-			white-space: nowrap;
-			text-overflow: ellipsis;
-			overflow: hidden;
-		}
-		.embed-description {
-			margin: 0;
-			white-space: nowrap;
-			text-overflow: ellipsis;
-			overflow: hidden;
-			color: #888;
-		}
-		.embed-link {
-			display: none;
-		}
-	}
-}
-
-.bot-indicator {
-	font-family: inherit;
-	font-size: 11px;
-	padding: 2px 4px;
-	border-radius: 2px;
-	font-weight: 600;
-	margin: 0 0 0 -4px;
-}
-
-.attachment {
-	.attachment__content {
-		border-width: 1px;
-		border-style: solid;
-		border-radius: 4px;
-		padding: 2px 5px;
-		margin: 0 0 5px 0;
-	}
-	.attachment__thumb-pretext {
-		border: 0 none;
-		background: transparent;
-	}
-	.attachment__container {
-		border-left-width: 4px;
-		border-left-style: solid;
-		padding: 2px 0 2px 10px;
-		&.attachment__container--good {
-			border-left-color: #00C100;
-		}
-		&.attachment__container--warning {
-			border-left-color: #DEDE01;
-		}
-		&.attachment__container--danger {
-			border-left-color: #E40303;
-		}
-	}
-	.attachment__body {
-		float: left;
-		width: 80%;
-		padding-right: 5px;
-		overflow-x: auto;
-		overflow-y: hidden;
-		&.attachment__body--no_thumb {
-			width: 100%;
-		}
-	}
-	.attachment__text p:last-of-type {
-		display: inline-block;
-	}
-	.attachment__thumb-pretext {
-		margin-left: 5px;
-	}
-	.attachment__title {
-		margin: 5px 0;
-		padding: 0;
-		line-height: 16px;
-		height: 22px;
-		font-size: 16px;
-		a {
-			font-size: 16px;
-		}
-	}
-	.attachment__author-icon {
-		@include border-radius(50px);
-		margin-right: 5px;
-		width: 14px;
-		height: 14px;
-	}
-	.attachment__image {
-		max-width: 100%;
-		margin-bottom: 1em;
-	}
-	.attachment__thumb-container {
-		width: 20%;
-		float: right;
-		img {
-			max-height: 75px;
-			max-width: 100%;
-		}
-	}
-	.attachment___fields {
-		width: 100%;
-		.attachment___field-caption {
-			font-weight: 700;
-		}
-		.attachment___field p {
-			margin: 0;
-		}
-	}
-}
-
-.permalink-text {
-	overflow: hidden;
-}
-
-.permalink-popover {
-	min-width: 320px;
-	margin-left: 50px !important;
-}
diff --git a/web/sass-files/sass/partials/_post_right.scss b/web/sass-files/sass/partials/_post_right.scss
deleted file mode 100644
index 5df6fdc01..000000000
--- a/web/sass-files/sass/partials/_post_right.scss
+++ /dev/null
@@ -1,159 +0,0 @@
-@charset "UTF-8";
-
-.post-right__container {
-	@include display-flex;
-	@include flex-direction(column);
-	height: 100%;
-
-	.post-right-root-message {
-		padding: 1em 1em 0;
-	}
-
-	.post-right-comments-container {
-		position: relative;
-
-		.post {
-
-			&:first-child {
-				padding-top: 15px;
-			}
-
-		}
-
-	}
-
-
-	.help_format_text {
-		bottom: -63px;
-		right: auto;
-	}
-
-	.post {
-
-		&.post--root {
-			padding-bottom: 1.2em;
-			border-bottom: 1px solid #ddd;
-
-			.post__body {
-				background: transparent !important;
-			}
-
-		}
-
-		.post__header {
-
-			.col__reply  {
-				top: 0;
-				text-align: right;
-			}
-
-		}
-
-		.post__body {
-			width: 100%;
-		}
-
-	}
-
-	hr {
-		margin-bottom: 0;
-		border: none;
-	}
-
-	.post-create__container {
-		width: 100%;
-		margin-top: 10px;
-		.textarea-wrapper {
-			min-height: 100px;
-		}
-		.btn {
-			margin-bottom: 10px;
-		}
-		.custom-textarea {
-			min-height: 100px;
-		}
-		.msg-typing {
-			@include opacity(0.7);
-			float: left;
-			margin-top: 3px;
-			font-size: 13px;
-			line-height: 20px;
-			min-width: 1px;
-			display: block;
-			height: 20px;
-			max-width: 230px;
-		}
-		.post-create-footer {
-			width: 100%;
-			padding: 5px 0 10px;
-		}
-		.post-right-comments-upload-in-progress {
-			padding: 6px 0;
-			color: #a8adb7;
-			margin-right: 10px;
-		}
-	}
-
-}
-.post-right-header {
-	font-size: 1em;
-	text-transform: uppercase;
-	color: #999;
-	font-weight: 400;
-	color: #888;
-	height: 39px;
-	padding: 10px 10px 0 15px;
-	border-bottom: $border-gray;
-}
-
-.post-right-root-container {
-	padding: 5px 10px;
-	border-bottom: $border-gray;
-}
-
-.post-right-root-container {
-	ul {
-		padding-left: 0;
-		margin-bottom: 2px;
-	}
-}
-
-.post-right-channel__name {
-	font-weight: 600;
-	margin: 0 0 10px 0;
-}
-
-.post-right-root-container li {
-	display: inline;
-	list-style-type: none;
-	padding-right: 3px;
-}
-
-.post-right-root-time {
-	color: #a8adb7;
-}
-
-.post-right-create-comment-container {
-	padding: 5px;
-	margin-bottom: 18px;
-	position: absolute;
-	bottom: 0;
-	left: 0;
-	width: 100%;
-}
-
-.post-right__scroll {
-	position: relative;
-	overflow: auto;
-	-webkit-overflow-scrolling: touch;
-	@include flex(1 1 auto);
-
-	.preview-container {
-		margin-top: 5px;
-	}
-
-}
-
-.post-right-comment-time {
-	color: #a8adb7;
-}
diff --git a/web/sass-files/sass/partials/_print.scss b/web/sass-files/sass/partials/_print.scss
deleted file mode 100644
index 143ec2915..000000000
Binary files a/web/sass-files/sass/partials/_print.scss and /dev/null differ
diff --git a/web/sass-files/sass/partials/_responsive.scss b/web/sass-files/sass/partials/_responsive.scss
deleted file mode 100644
index 06ce17041..000000000
--- a/web/sass-files/sass/partials/_responsive.scss
+++ /dev/null
@@ -1,894 +0,0 @@
-@charset "UTF-8";
-
-@media screen and (max-width: 1800px) {
-    .inner__wrap {
-        &.move--left {
-            .date-separator, .new-separator {
-                &.hovered--comment {
-                    &:before, &:after {
-                        background: none;
-                    }
-                }
-            }
-        }
-    }
-}
-@media screen and (max-width: 1440px) {
-    .date-separator, .new-separator {
-        &.hovered--comment {
-            &:before, &:after {
-                background: none !important;
-            }
-        }
-    }
-}
-
-@media screen and (max-width: 1140px) {
-    .tip-overlay {
-        &.tip-overlay--chat {
-            margin: -10px 0 0 -10px;
-            .arrow {
-                right: 15px;
-                left: auto;
-            }
-        }
-    }
-    .inner__wrap {
-        &.move--left {
-            .file-overlay {
-                font-size: em(18px);
-                .overlay__circle {
-                    width: 300px;
-                    height: 300px;
-                    margin: -150px 0 0 -150px;
-                }
-                .overlay__files {
-                    margin: 60px auto 15px;
-                    width: 150px;
-                }
-            }
-        }
-    }
-}
-
-@media screen and (max-width: 960px) {
-
-    .sidebar--right {
-        z-index: 5;
-        @include translateX(100%);
-        @include single-transition(all, 0.5s, ease);
-
-        &.move--left {
-            @include translateX(0);
-
-            .search-bar__container {
-                padding-right: 8px;
-            }
-
-        }
-
-    }
-
-    .inner__wrap {
-
-        &.move--left {
-            margin-right: 0;
-
-            .channel-header__links {
-                position: relative;
-                right: auto;
-                top: auto;
-            }
-
-        }
-
-    }
-
-}
-
-@media screen and (max-width: 768px) {
-
-    .signup-team__container {
-        font-size: 1em;
-    }
-
-    .date-separator.hovered--before:after, .date-separator.hovered--after:before, .new-separator.hovered--after:before, .new-separator.hovered--before:after {
-        background: none !important;
-    }
-
-    .post {
-
-        .post__dropdown {
-            line-height: 9px;
-            text-decoration: none;
-            width: 20px;
-            display: inline-block;
-            text-align: center;
-            height: 20px;
-
-            &:after {
-                font-size: 20px;
-                content: '...';
-                top: -3px;
-            }
-
-        }
-
-        .comment-icon__container {
-            visibility: visible;
-            display: none;
-
-            &.icon--show {
-                display: inline-block;
-            }
-
-        }
-
-        .post-list__content & {
-
-            &:hover {
-                background: transparent;
-            }
-
-            .comment-icon__container {
-                visibility: visible;
-            }
-
-        }
-
-        .dropdown, .post__reply {
-            visibility: visible;
-        }
-
-        .post__body {
-            width: calc(100% - 75px);
-        }
-
-        .post__reply {
-            margin-right: 20px;
-            float: right;
-
-            svg {
-                top: 1px;
-            }
-
-        }
-
-        &.other--root .post__reply {
-
-            &.post__reply--hide {
-                visibility: hidden;
-            }
-
-        }
-
-        .post__header {
-
-            .col__reply {
-                width: 65px;
-            }
-
-            .col__name {
-                pointer-events: none;
-
-                .user-popover {
-                    max-width: 130px;
-                }
-
-            }
-
-        }
-
-        &.same--root {
-
-            &.same--user {
-
-                .post__time {
-                    display: none;
-                }
-
-            }
-
-        }
-
-        .post__img {
-            width: 40px;
-
-            img {
-                width: 32px;
-                height: 32px;
-            }
-        }
-
-    }
-
-    .post-image__column {
-        width: 200px;
-        height: 95px;
-    }
-
-    .textarea-wrapper {
-        .textbox-preview-link, .textbox-help-link {
-            display: none;
-        }
-    }
-    .form-control {
-        &.min-height {
-            min-height: 100px;
-        }
-    }
-    .img-div {
-        max-width: 100%;
-    }
-    .tip-div {
-        left: 15px;
-        right: auto;
-    }
-    .tip-overlay {
-        &.tip-overlay--chat {
-            margin-left: 10px;
-            .arrow {
-                left: 32px;
-            }
-        }
-    }
-    .file-details__container {
-        display: block;
-        .file-details__preview {
-            display: block;
-            width: 100%;
-            height: 150px;
-            border-right: none;
-            border-bottom: 1px solid #ddd;
-            img {
-                width: 64px;
-                height: 64px;
-            }
-        }
-        .file-details {
-            width: 100%;
-            height: auto;
-        }
-    }
-    .search-help-popover.visible {
-        visibility: hidden;
-    }
-    .modal-direct-channels {
-        .member-count {
-            float: none;
-            margin-top: 10px;
-            display: block;
-        }
-    }
-    .file-overlay {
-        font-size: em(18px);
-        &.center-file-overlay {
-            .overlay__indent {
-                margin-left: 0;
-            }
-        }
-        .overlay__circle {
-            width: 300px;
-            height: 300px;
-            margin: -150px 0 0 -150px;
-        }
-        .overlay__files {
-            margin: 60px auto 15px;
-            width: 150px;
-        }
-    }
-    .date-separator, .new-separator {
-        &.hovered--after {
-            &:before {
-                background: none;
-            }
-        }
-        &.hovered--before {
-            &:after {
-                background: none;
-            }
-        }
-    }
-    .post-list__timestamp {
-        display: block;
-    }
-    .signup-team__container {
-        padding: 30px 0;
-        margin-bottom: 30px;
-        font-size: 0.9em;
-        .signup-team__name {
-            font-size: 2em;
-        }
-        .btn.btn-full {
-            padding-left: 10px;
-        }
-        .btn {
-            .icon, .fa {
-                margin-right: 6px;
-            }
-        }
-    }
-    .row--invite {
-        .col-sm-6 {
-            padding: 0;
-        }
-    }
-    .modal {
-        .info__label {
-            text-align: left;
-            padding-bottom: 5px;
-        }
-        .modal-header {
-            .modal-action {
-                margin-top: 10px;
-            }
-            button.close {
-                font-weight: normal;
-                font-size: 27px;
-            }
-            .modal-title {
-                float: none;
-                max-width: 90%;
-            }
-            .btn {
-                &.btn-primary {
-                    display: block;
-                    margin: 10px 0 6px;
-                    width: 100%;
-                    float: none;
-                }
-            }
-        }
-        .settings-modal {
-            &.display--content {
-                .modal-header {
-                    display: none;
-                }
-                .settings-table {
-                    display: block;
-                    .settings-content {
-                        &.minimize-settings {
-                            display: block;
-                        }
-                        .section-min:hover {
-                            background: none;
-                        }
-                        .no-padding--left {
-                            padding-left: 15px;
-                        }
-                    }
-                    .settings-links {
-                        display: none;
-                    }
-                    .modal-header {
-                        display: block;
-                        position: absolute;
-                        top: 0;
-                        width: 100%;
-                        z-index: 5;
-                        .modal-title {
-                            width: 100%;
-                            text-align: center;
-                        }
-                    }
-                    .user-settings {
-                        .tab-header {
-                            display: none;
-                        }
-                        .divider-dark.first {
-                            display: none;
-                        }
-                    }
-                }
-            }
-            .settings-table {
-                padding: 0;
-                .nav {
-                    &.position--top {
-                        top: auto;
-                    }
-                    position: relative;
-                    top: auto;
-                    width: 100%;
-                }
-                .settings-content {
-                    .section-edit {
-                        position: absolute;
-                        top: 14px;
-                        right: 0;
-                        padding-right: 0;
-                        .fa {
-                            display: inline-block;
-                        }
-                    }
-                    &.minimize-settings {
-                        padding: 0;
-                        display: none;
-                        .user-settings {
-                            padding: 70px 20px 30px;
-                        }
-                    }
-                    .section-min:hover {
-                        background: none !important;
-                    }
-                }
-                .nav {
-                    > li {
-                        > a {
-                            border-top: 1px solid #ddd;
-                            font-size: 1.1em;
-                            line-height: 2.7;
-                            color: #555;
-                            .glyphicon {
-                                margin-left: 7px;
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    }
-    .post-create__container {
-        .post-right__container & {
-            padding: 0 1em;
-            .msg-typing {
-                display: none;
-            }
-        }
-        form {
-            padding: 0.5em 0;
-        }
-        .post-create-footer {
-            padding: 0 1em;
-            .msg-typing {
-                display: none;
-            }
-            .control-label {
-                top: 0;
-            }
-        }
-        .post-create-body {
-            display: table;
-            width: 100%;
-            .post-body__cell {
-                display: table-cell;
-                padding-left: 45px;
-                .sidebar--right & {
-                    padding-left: 0;
-                }
-            }
-            .app__content & {
-                .btn-file {
-                    width: 45px;
-                    padding: 0;
-                    line-height: 36px;
-                    bottom: -2px;
-                    left: 0;
-                    top: auto;
-                }
-            }
-            .send-button {
-                display: table-cell;
-            }
-        }
-    }
-    .preview-container {
-        margin: 5px 0 0;
-        .preview-div {
-            margin-top: 0;
-        }
-        .remove-preview {
-            width: 28px;
-            height: 28px;
-            left: auto;
-            right: 0;
-            top: 0;
-            background: #444;
-            background: rgba(#000, 0.5);
-            text-align: center;
-            &:after {
-                display: none;
-            }
-            i {
-                line-height: 29px;
-                top: auto;
-                right: auto;
-                position: relative;
-                font-size: 16px;
-            }
-        }
-    }
-    #navbar {
-        .navbar-default {
-            .navbar-header {
-                float: none;
-                margin: 0 -15px;
-                .dropdown__icon {
-                    background: url("../images/dropdown-icon.png");
-                    width: 4px;
-                    height: 16px;
-                    @include background-size(100% 100%);
-                    display: inline-block;
-                }
-            }
-            .navbar-toggle {
-                display: block;
-            }
-            .navbar-brand {
-                white-space: nowrap;
-            }
-        }
-    }
-    body {
-        &.white {
-            .inner__wrap {
-                >.row.content {
-                    margin-bottom: -185px;
-                }
-            }
-        }
-    }
-    .footer, .footer-pane, .footer-push {
-        height: 187px;
-    }
-    .footer-pane {
-        .footer-link {
-            padding: 0;
-            width: 100%;
-            text-align: right;
-            line-height: 1.7;
-            &.copyright {
-                width: 100%;
-            }
-        }
-    }
-    .search__clear {
-        display: block;
-    }
-    .search-bar__container {
-        padding: 0;
-        @include flex(0 0 44px);
-        background: $primary-color;
-        color: #fff;
-        &.focused {
-            .sidebar__collapse {
-                @include translateX(-45px);
-            }
-            .search__form {
-                @include translateX(-45px);
-                padding-left: 55px;
-                padding-right: 24px;
-            }
-            .search__clear {
-                @include translateX(0px);
-            }
-        }
-        .search__form {
-            border: none;
-            @include translateX(0px);
-            padding: 7px 20px 0 49px;
-            height: 45px;
-            position: relative;
-            @include single-transition(all, 0.2s, linear);
-            .glyphicon-refresh-animate {
-                right: 33px;
-                top: 15px;
-                color: #aaa;
-            }
-            .form-control {
-                border: none;
-                padding: 0 10px 0 31px;
-                background: rgba(black, 0.2);
-                @include border-radius(3px);
-                color: #444;
-                background: #fff;
-            }
-        }
-    }
-    .sidebar--menu {
-        @include single-transition(transform, 0.5s, ease);
-        @include translate3d(290px, 0, 0);
-        width: 290px;
-        border: none;
-        display: block;
-        &.move--left {
-            @include translate3d(0, 0, 0);
-        }
-    }
-    .sidebar--left {
-        @include single-transition(transform, 0.5s, ease);
-        @include translate3d(-290px, 0, 0);
-        width: 290px;
-        border: none;
-        &.sidebar--padded {
-            padding-top: 0;
-        }
-        &.move--right {
-            @include translate3d(0, 0, 0);
-        }
-        > div {
-            padding-bottom: 70px;
-        }
-        .nav-pills__unread-indicator-bottom {
-            bottom: 10px;
-        }
-        .badge {
-            top: 13px;
-        }
-        .team__header {
-            @include clearfix;
-            pointer-events: none;
-
-            .user__name {
-                display: none;
-            }
-
-            .team__name {
-                margin: 10px 0;
-            }
-
-            .navbar-right {
-                display: none;
-            }
-
-        }
-        .search__form {
-            display: block;
-        }
-        .nav {
-            li {
-                &.dropdown.open {
-                    padding-bottom: 25px;
-                    ul {
-                        clear: both;
-                        background: #FFF;
-                        border-radius: 3px;
-                        top: 5px;
-                        position: relative;
-                        li {
-                            a {
-                                line-height: 30px;
-                            }
-                        }
-                    }
-                }
-                h4 {
-                    margin: 16px 0 8px;
-                }
-                > a {
-                    font-size: 15px;
-                    margin: 0;
-                    line-height: 2.5;
-                    &:hover, &:focus {
-                        background: transparent;
-                    }
-                    &.has-close {
-                        .btn-close {
-                            width: 40px;
-                            text-align: center;
-                            right: 0;
-                            display: block;
-                            @include opacity(0.5);
-                        }
-                    }
-                }
-            }
-        }
-    }
-    .sidebar--right {
-        width: 100%;
-        right: 0;
-        @include translate3d(100%, 0, 0);
-        z-index: 5;
-        &.move--left {
-            @include translate3d(0, 0, 0);
-        }
-        .sidebar__collapse, .sidebar__search-icon {
-            display: block;
-        }
-        .sidebar--right__close {
-            display: none;
-        }
-        .sidebar-right__body {
-            height: calc(100% - 44px);
-        }
-    }
-    .search-items-container {
-        height: calc(100% - 44px);
-    }
-    .inner__wrap {
-        @include single-transition(all, 0.5s, ease);
-        &.move--right {
-            @include translate3d(290px, 0, 0);
-            &:before {
-                z-index: 9999;
-                content: "";
-                width: 100%;
-                height: 100%;
-                left: -15px;
-                top: 0;
-                position: absolute;
-                background: rgba(0, 0, 0, 0.4);
-            }
-        }
-        &.move--left-small {
-            @include translate3d(-290px, 0, 0);
-            &:before {
-                z-index: 9999;
-                content: "";
-                width: 100%;
-                height: 100%;
-                right: -15px;
-                top: 0;
-                position: absolute;
-                background: rgba(0, 0, 0, 0.4);
-            }
-        }
-        &.move--left {
-            margin: 0;
-            @include translate3d(-100%, 0, 0);
-        }
-    }
-    .modal {
-        .modal-image {
-            .image-wrapper {
-                > div {
-                    font-size: 12px;
-                    min-width: 250px;
-                }
-                .modal-close {
-                    @include opacity(1);
-                }
-            }
-            .modal-button-bar {
-                @include opacity(1);
-            }
-        }
-    }
-    .app__content {
-        padding-top: 45px;
-        margin: 0;
-        .channel__wrap & {
-            padding-top: 45px;
-        }
-        #channel-header {
-            display: none;
-        }
-    }
-
-
-    .channel__wrap {
-        .row {
-            &.header {
-                display: block;
-            }
-        }
-    }
-
-    .post-comments {
-        padding: 9px 21px 10px 10px !important;
-    }
-
-    .post-image__column .post__image .file-playback-controls.stop, .image-wrapper > a .file-playback-controls.stop {
-        @include opacity(1);
-    }
-}
-@media screen and (max-width: 640px) {
-    .access-history__table {
-        > div {
-            display: block;
-        }
-        .access__report {
-            margin: 0 0 15px 15px;
-        }
-        .access__date {
-            div {
-                margin-bottom: 15px;
-            }
-        }
-    }
-    .activity-log__table {
-        > div {
-            display: block;
-        }
-        .activity-log__report {
-            width: 100%;
-        }
-        .activity-log__action {
-            text-align: left;
-            margin-top: 10px;
-        }
-    }
-}
-@media screen and (max-width: 480px) {
-    .modal {
-        .settings-modal {
-
-            .settings-table {
-
-                .security-links {
-                    margin-bottom: 10px;
-                    display: block;
-
-                    &:last-child {
-                        margin-bottom: 0;
-                    }
-
-                }
-
-            }
-
-        }
-    }
-
-    .tip-overlay.tip-overlay--sidebar {
-        min-height: 350px;
-    }
-    .modal {
-        .modal-body {
-            max-height: 70%;
-        }
-        .settings-modal {
-            &.display--content {
-                .modal-body {
-                    max-height: 90%;
-                }
-            }
-        }
-    }
-    .member-div {
-        padding: 8px 0;
-        .member-drop, .member-role {
-            position: relative;
-            margin: 0px 0 0 44px;
-            padding: 5px 0;
-            top: 0;
-            right: 0;
-        }
-        .open>.dropdown-menu {
-            left: 0;
-            right: auto;
-        }
-    }
-    .sidebar--left {
-        @include translate3d(-260px, 0, 0);
-        width: 260px;
-    }
-    .inner__wrap {
-        &.move--right {
-            @include translate3d(260px, 0, 0);
-        }
-    }
-    .modal {
-        .modal-image {
-            .modal-button-bar {
-                line-height: 30px;
-                padding: 5px;
-            }
-        }
-    }
-}
-
-
-@media (min-width: 992px){
-    .modal-lg {
-        width: 700px;
-    }
-}
-
-@media screen and (min-width: 768px) {
-    .second-bar {
-        display: none;
-    }
-}
-
-@media screen and (max-height: 640px) {
-    .signup-team__container {
-        padding: 30px 0;
-        margin-bottom: 30px;
-        font-size: 0.9em;
-        .signup-team__name {
-            font-size: 2em;
-        }
-    }
-}
diff --git a/web/sass-files/sass/partials/_search.scss b/web/sass-files/sass/partials/_search.scss
deleted file mode 100644
index aa398e916..000000000
--- a/web/sass-files/sass/partials/_search.scss
+++ /dev/null
@@ -1,160 +0,0 @@
-@charset "UTF-8";
-
-#channel-header .search-bar__container {
-	padding: 0 9px 0 3px;
-}
-.search-bar__container {
-	padding: 12px 8px 0 0;
-	@include flex(0 0 56px);
-	.sidebar--right.move--left & {
-		padding-right: 42px;
-	}
-}
-.search__clear {
-	display: none;
-	position: absolute;
-	right: 0;
-	line-height: 45px;
-	margin-right: 13px;
-	@include single-transition(all, 0.2s, linear);
-	@include translateX(60px);
-	z-index: 5;
-	cursor: pointer;
-}
-
-.search-item-snippet {
-	@include clearfix;
-	text-overflow: ellipsis;
-}
-
-.sidebar__collapse {
-	cursor: pointer;
-	z-index: 5;
-	fill: #FFF;
-	position: absolute;
-	left: 0;
-	font-size: 35px;
-	width: 49px;
-	@include single-transition(all, 0.2s, linear);
-	@include translateX(0px);
-	text-align: center;
-	padding-left: 1px;
-	line-height: 40px;
-	display: none;
-}
-.search-item-snippet {
-	ul, ol {
-		padding-left: 20px;
-	}
-}
-.sidebar__search-icon {
-	position: absolute;
-	top: 15px;
-	margin-left: 10px;
-	font-size: 14px;
-	@include opacity(0.5);
-	display: none;
-	color: #777;
-}
-.search__form {
-	.search-bar__container & {
-		margin: 0;
-		border: 1px solid #DDD;
-		@include border-radius(2px);
-		width: 300px;
-	}
-	.sidebar--right & {
-		width: 100%;
-	}
-	.search-bar {
-		height: 40px;
-		padding-right: 30px;
-		box-shadow: none;
-		.search-bar__container & {
-			height: 30px;
-			border: none;
-		}
-	}
-	.glyphicon-refresh-animate {
-		top: 27px;
-		position: absolute;
-		right: 27px;
-		color: #999;
-		.search-bar__container & {
-			right: 7px;
-			top: 8px;
-		}
-	}
-}
-
-.search-items-container {
-	position: relative;
-	overflow: auto;
-	-webkit-overflow-scrolling: touch;
-	@include flex(1 1 auto);
-	height: calc(100% - 56px);
-	padding-top: 10px;
-}
-
-.search-results-header {
-	font-size: 1em;
-	text-transform: uppercase;
-	color: #999;
-	font-weight: 400;
-	color: #888;
-	height: 44px;
-	line-height: 44px;
-	padding: 0 10px 0 10px;
-	border-bottom: $border-gray;
-}
-
-.search-item__container {
-
-	.post {
-		padding: 0 1em 1em;
-		margin: 0;
-
-		&:first-child {
-			border: none;
-		}
-
-		.search-channel__name {
-			font-weight: 600;
-			margin: 0 0 10px 0;
-		}
-	}
-
-}
-
-.search-item__jump {
-	position: absolute;
-	right: 0;
-	top: 0px;
-	font-size: 13px;
-	@include opacity(0.8);
-
-	&:hover {
-		@include opacity(1);
-	}
-
-}
-
-.search-item__comment {
-	position: absolute;
-	right: 0;
-	margin-right: 35px;
-	top: 0;
-}
-
-.search-item-time {
-	@include opacity(0.7);
-    font-size: 0.9em;
-}
-
-.search-results-none {
-	padding: 10px;
-}
-
-.search-highlight {
-	background-color: #FFF2BB;
-}
\ No newline at end of file
diff --git a/web/sass-files/sass/partials/_settings.scss b/web/sass-files/sass/partials/_settings.scss
deleted file mode 100644
index 6574dd927..000000000
--- a/web/sass-files/sass/partials/_settings.scss
+++ /dev/null
@@ -1,455 +0,0 @@
-@charset "UTF-8";
-
-@import "access-history";
-@import "activity-log";
-@import "webhooks";
-
-.user-settings {
-    min-height:300px;
-    .table-responsive {
-        max-width: 560px;
-        max-height: 300px;
-    }
-}
-
-.modal {
-    .settings-modal {
-        width: 800px;
-        .modal-back {
-            width: 50px;
-            height: 40px;
-            top: 12px;
-            font-size: 27px;
-            font-weight: normal;
-            line-height: 32px;
-            position: absolute;
-            left: 0;
-            text-align: center;
-            .fa {
-                line-height: inherit;
-                position: absolute;
-                width: 100%;
-                height: 100%;
-                left: 0;
-            }
-        }
-        .modal-body {
-            padding: 0;
-            margin: 0 auto;
-            min-height: calc(100% - 62px);
-        }
-        li {
-            list-style: none;
-        }
-        label {
-            font-weight: 600;
-        }
-
-        .no-padding--left {
-            padding-left: 0;
-        }
-        .padding-top {
-            padding-top: 7px;
-            &.x2 {
-                padding-top: 14px;
-            }
-            &.x3 {
-                padding-top: 21px;
-            }
-        }
-        .padding-bottom {
-            padding-bottom: 7px;
-            &.x2 {
-                padding-bottom: 14px;
-            }
-            &.x3 {
-                padding-bottom: 21px;
-            }
-            .control-label {
-                font-weight: 600;
-                &.text-left {
-                    text-align: left;
-                }
-            }
-        }
-        .profile-img {
-            width: 128px;
-            height: 128px;
-        }
-        .settings-table {
-            max-width: 1000px;
-            margin: 0 auto;
-            display: table;
-            table-layout: fixed;
-            width: 100%;
-            > div {
-                display: table-cell;
-                vertical-align: top;
-            }
-            .nav {
-                position: fixed;
-                width: 179px;
-                &.position--top {
-                    top: 57px;
-                }
-            }
-            .security-links {
-                margin-right: 20px;
-                .fa {
-                    margin-right: 6px;
-                }
-            }
-            .settings-links {
-                width: 180px;
-            }
-            .settings-content {
-                padding: 0px 20px 30px;
-                .modal-header {
-                    display: none;
-                }
-                .section-min {
-                    padding: 1em 0;
-                    margin-bottom: 0;
-                    cursor: pointer;
-                    position: relative;
-                    @include clearfix;
-                    &:hover {
-                        background: #f9f9f9;
-                    }
-                    &:hover .fa {
-                        display: inline-block;
-                    }
-                    &:hover .section-edit {
-                        text-decoration: underline;
-                    }
-                }
-
-                .section-max {
-                    background: rgba(black, 0.05);
-                    padding: 1em 0 1.3em;
-                    margin-bottom: 0;
-                    @include clearfix;
-                    .section-title {
-                        margin-bottom: 10px;
-                    }
-                }
-
-                .appearance-section {
-                    .theme-group {
-                        .input-group-addon {
-                            padding: 4px 5px;
-                            width: 40px;
-                        }
-                        img {
-                            border: 1px solid rgba(black, 0.15);
-                            width: 29px;
-                        }
-                    }
-                    .group--code {
-                        select {
-                            padding-right: 25px;
-                        }
-                        select::-ms-expand {
-                            display: none;
-                        }
-                        &:before {
-                            pointer-events: none;
-                            position: absolute;
-                            top: 11px;
-                            right: 50px;
-                            z-index: 5;
-                            content: "\f0d7";
-                            display: inline-block;
-                            font: normal normal normal 14px/1 FontAwesome;
-                            font-size: inherit;
-                            text-rendering: auto;
-                            -webkit-font-smoothing: antialiased;
-                            -moz-osx-font-smoothing: grayscale;
-                        }
-                        select {
-                            -moz-appearance:none;
-                            -webkit-appearance:none;
-                            appearance:none;
-                        }
-                    }
-                    .premade-themes {
-                        margin-bottom: 10px;
-                        .theme-label {
-                            font-weight: 400;
-                            margin-top: 5px;
-                        }
-                        img {
-                            border: 3px solid transparent;
-                        }
-                        .active {
-                            img {
-                                border-color: $primary-color;
-                            }
-                        }
-                    }
-
-                    .theme-elements {
-                        padding-left:15px;
-
-                        .element {
-                            margin-right:10px;
-
-                            &:nth-child(2n) {
-                                margin-right: 0;
-                            }
-
-                        }
-                    }
-
-                    .theme-elements__header {
-                        margin: 10px 20px 0px 0;
-                        border-bottom: 1px solid #ccc;
-                        padding: 5px 0 10px;
-                        font-size: em(13.5px);
-                        font-weight: 600;
-                        cursor: pointer;
-
-                        .fa-minus {
-                            display: none;
-                        }
-
-                        &.open {
-                            .fa-minus {
-                                display: inline-block;
-                            }
-                            .fa-plus {
-                                display: none;
-                            }
-                        }
-
-                        .header__icon {
-                            float: right;
-                            @include opacity(0.5);
-                        }
-
-                    }
-
-                    .theme-elements__body {
-                        padding-top: 5px;
-                        display: none;
-                        @include legacy-pie-clearfix;
-                        background: rgba(255, 255, 255, 0.05);
-                        padding: 20px 0 0 20px;
-                        margin: 0 20px 0 0;
-                        @include border-radius(0 0 3px 3px);
-                    }
-
-                    .custom-label {
-                        white-space: nowrap;
-                        font-weight: normal;
-                        font-size: 12px;
-                        width: 100%;
-                        overflow: hidden;
-                        text-overflow: ellipsis;
-                        margin-bottom: 0;
-                    }
-                    .input-group-addon {
-                        background: transparent;
-                    }
-                    .radio {
-                        label {
-                            font-weight: 600;
-                        }
-                    }
-                }
-
-                .section-title {
-                    margin-bottom: 5px;
-                    font-weight: 600;
-                    padding-right: 50px;
-                }
-
-                .section-edit {
-                    text-align: right;
-                    margin-bottom: 5px;
-                    .fa {
-                        margin-right: 5px;
-                        font-size: 12px;
-                        @include opacity(0.5);
-                        display: none;
-                        &.fa-chevron-down {
-                            top: -1px;
-                            margin-right: 0;
-                            position: relative;
-                        }
-                    }
-                }
-
-                .section-describe {
-                    @include opacity(0.7);
-                    white-space:pre;
-                    @include clearfix;
-                    text-overflow: ellipsis;
-                }
-
-                .divider-dark {
-                    border-bottom:1px solid #aaaaaa;
-                }
-
-                .divider-light {
-                    border-bottom:1px solid lightgrey;
-                }
-
-                .setting-list {
-                    padding: 0;
-                    list-style-type:none;
-                }
-
-                .setting-list__hint {
-                    margin-top: 20px;
-                }
-
-                .mentions-input {
-                    margin-top: 10px;
-                }
-
-                .setting-list-item {
-                    margin-top:7px;
-                }
-                .has-error {
-                    color: #a94442;
-                }
-
-                .file-status {
-                    font-size: 13px;
-                    margin-top: 8px;
-                    color: #555;
-                }
-
-                .confirm-import {
-                    padding: 4px 10px;
-                    margin: 10px 0;
-                }
-
-            }
-        }
-    }
-    .nav-pills {
-        > li {
-            margin: 0;
-            a {
-                padding: 8px 5px 8px 15px;
-                border-radius: 0;
-                color: #777;
-            }
-            .glyphicon {
-                width: 25px;
-                top: 2px;
-            }
-            &:hover {
-                a {
-                    background-color: rgba(black, 0.1);
-                }
-            }
-            &.active {
-                a {
-                    color: #111;
-                    background-color: #E1E1E1;
-                    &:before {
-                        content: '';
-                        position: absolute;
-                        top: 0;
-                        left: 0;
-                        width: 5px;
-                        height: 100%;
-                        background: #000;
-                    }
-                }
-                a, a:hover, a:focus {
-                    background-color: rgba(black, 0.1);
-                    border-radius: 0;
-                    font-weight: 400;
-                    position: relative;
-                    white-space: nowrap;
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                }
-            }
-        }
-    }
-    h3 {
-        font-size: em(20px);
-    }
-}
-
-.channel-settings {
-    padding: 0 10px;
-}
-
-.tab-header {
-    margin-bottom:1em;
-}
-
-.setting-name {
-    color:grey;
-    font-weight:500;
-}
-
-.sel-btn {
-    margin-right:5px;
-}
-
-.member-div {
-    border-bottom:1px solid lightgrey;
-    position:relative;
-    padding:2px;
-    margin: 0;
-    width:100%;
-    &:first-child {
-        border-top:1px solid lightgrey;
-    }
-    .post-profile-img {
-        @include border-radius(50px);
-        margin-right: 8px;
-    }
-}
-
-.member-role, .member-drop {
-    .fa {
-        margin-right: 5px;
-        @include opacity(0.5);
-        font-size: 12px;
-    }
-
-    .member-menu {
-        top: -50%;
-        right: 110%;
-    }
-}
-
-.member-invite {
-    position:absolute;
-    right:10px;
-    top:7px;
-}
-
-.member-menu {
-    right:0px;
-    left:auto;
-}
-
-.member-list {
-    width:100%;
-    overflow-x:visible;
-}
-
-.member-page {
-    padding-top:50px;
-}
-
-.active-border {
-    border:1px solid red;
-}
-
-.color-btn {
-    margin:4px;
-}
-
-.no-resize {
-    resize:none;
-}
diff --git a/web/sass-files/sass/partials/_sidebar--left.scss b/web/sass-files/sass/partials/_sidebar--left.scss
deleted file mode 100644
index 44681291c..000000000
--- a/web/sass-files/sass/partials/_sidebar--left.scss
+++ /dev/null
@@ -1,193 +0,0 @@
-@charset "UTF-8";
-
-.sidebar--left {
-    position: absolute;
-    width: 220px;
-    left: 0;
-    height: 100%;
-    border-right: $border-gray;
-    padding: 0 0 2em 0;
-    background: #fafafa;
-    z-index: 5;
-    &.sidebar--padded {
-        padding-top: 44px;
-    }
-    .dropdown-menu {
-        max-height: 400px;
-        overflow-x: hidden;
-        overflow-y: auto;
-        max-width: 200px;
-        width: 200px;
-    }
-    .search__form {
-        margin: 0;
-        padding: 1em 1em 0;
-        display: none;
-    }
-    .badge {
-        background-color: $primary-color;
-        position: absolute;
-        right: 10px;
-        top: 5px;
-    }
-    .status {
-        position:relative;
-        top:1px;
-        margin-right: 6px;
-        width: 12px;
-        display: inline-block;
-        svg {
-            max-height: 14px;
-        }
-        i, path, ellipse {
-            @include opacity(0.5);
-            &.online--icon, &.away--icon {
-                @include opacity(1);
-            }
-        }
-        .fa-lock {
-            margin-left: 1px;
-        }
-        .fa-globe {
-            top: -1px;
-            position: relative;
-        }
-    }
-    .nav-pills__container {
-        height: 100%;
-        position: relative;
-        overflow: auto;
-        -webkit-overflow-scrolling: touch;
-    }
-
-    .nav-pills__unread-indicator {
-        position: absolute;
-        left: 0;
-        right: 0;
-        width: 72%;
-        color: #fff;
-        background: #2389D7;
-        @include border-radius(50px);
-        margin: 0 auto;
-        padding: 3px 0 4px;
-        font-size: 13.5px;
-        text-align: center;
-        z-index: 1;
-    }
-
-    .nav-pills__unread-indicator-top {
-        top: 66px;
-    }
-    .nav-pills__unread-indicator-bottom {
-        bottom: 20px;
-    }
-
-    .nav {
-        &.nav-stacked {
-            > li+li {
-                margin: 0;
-            }
-        }
-        li {
-            > h4 {
-                font-size: 1em;
-                text-transform: uppercase;
-                margin: 1.1em 0 0.5em;
-                font-weight: 400;
-                color: #AAA;
-                letter-spacing: -0.3px;
-                padding: 0 10px 0 15px;
-            }
-            > a {
-                padding: 3px 10px 3px 25px;
-                line-height: 1.5;
-                border-radius: 0;
-                white-space: nowrap;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                &.has-badge {
-                    padding-right: 30px;
-                }
-                &.has-close {
-                    padding-right: 30px;
-                    &:hover {
-                        .btn-close {
-                            display: block;
-                            @include opacity(0.8);
-                        }
-                    }
-                    .btn-close {
-                        font-family: 'Open Sans', sans-serif;
-                        position: absolute;
-                        right: 15px;
-                        top: -1px;
-                        font-size: 20px;
-                        font-weight: 600;
-                        @include opacity(0);
-                        display: none;
-                        &:hover {
-                            @include opacity(1);
-                        }
-                    }
-                }
-                &.nav-more {
-                    text-decoration: underline;
-                }
-                &.unread-title {
-                    font-weight: 600;
-                }
-            }
-            &.active {
-                a {
-                    &:before {
-                        content: '';
-                        position: absolute;
-                        top: 0;
-                        left: 0;
-                        width: 5px;
-                        height: 100%;
-                        background: #000;
-                    }
-                }
-                a, a:hover, a:focus {
-                    background-color: rgba(black, 0.1);
-                    border-radius: 0;
-                    font-weight: 400;
-                    position: relative;
-                }
-            }
-        }
-    }
-    .modal-title {
-        line-height: 2em;
-    }
-
-    .add-channel-btn {
-        float: right;
-        outline: none;
-        margin: -2px 0 0 0;
-        color: #AAA;
-        padding: 0 5px;
-        text-decoration: none;
-        font-size: 22px;
-        line-height: 18px;
-        font-weight: 700;
-        &:hover {
-            color: #666;
-        }
-    }
-}
-
-.channel-loading-gif {
-    height: 15px;
-    width: 15px;
-    margin-top: 2px;
-}
-
-.join-channel-loading-gif {
-    margin-top: 5px;
-    margin-left: 10px;
-    height: 25px;
-    width: 25px;
-
-}
diff --git a/web/sass-files/sass/partials/_sidebar--menu.scss b/web/sass-files/sass/partials/_sidebar--menu.scss
deleted file mode 100644
index 443b7dbb0..000000000
--- a/web/sass-files/sass/partials/_sidebar--menu.scss
+++ /dev/null
@@ -1,71 +0,0 @@
-@charset "UTF-8";
-
-.sidebar--menu {
-    position: absolute;
-    width: 220px;
-    right: 0;
-    height: 100%;
-    border-right: $border-gray;
-    padding: 0 0 2em 0;
-    background: #fafafa;
-    display: none;
-    .nav-pills__container {
-        padding-top: 5px;
-    }
-    .team__header {
-        display: none;
-        padding: 0 15px;
-        @include legacy-pie-clearfix;
-        a {
-            color: #fff;
-        }
-        .navbar-right {
-            font-size: 0.85em;
-            margin: 16px -5px 0;
-            .dropdown-toggle {
-                padding: 0 10px;
-            }
-            .dropdown-menu {
-                li a {
-                    padding: 3 20px;
-                    color: #555;
-                }
-            }
-            .dropdown__icon {
-                background: url("../images/dropdown-icon.png");
-                width: 4px;
-                height: 16px;
-                @include background-size(100% 100%);
-                display: inline-block;
-            }
-        }
-        .team__name {
-            float: left;
-            line-height: 50px;
-            font-weight: 600;
-            font-size: 1.2em;
-            max-width: 80%;
-            overflow: hidden;
-            white-space: nowrap;
-            text-overflow: ellipsis;
-            text-decoration: none;
-        }
-    }
-    .nav {
-        > li {
-            > a {
-                font-size: 15px;
-                background: none !important;
-                color: inherit;
-                line-height: 40px;
-                padding: 0 15px;
-                .fa ,.glyphicon {
-                    width: 25px;
-                    text-align: center;
-                    left: -5px;
-                    position: relative;
-                }
-            }
-        }
-    }
-}
diff --git a/web/sass-files/sass/partials/_sidebar--right.scss b/web/sass-files/sass/partials/_sidebar--right.scss
deleted file mode 100644
index aaa6f4c92..000000000
--- a/web/sass-files/sass/partials/_sidebar--right.scss
+++ /dev/null
@@ -1,124 +0,0 @@
-@charset "UTF-8";
-
-.sidebar--right {
-    position: fixed;
-    width: 400px;
-    height: 100%;
-    right: 0px;
-    padding: 0;
-    background: #fff;
-    @include translateX(400px);
-    .post-body {
-
-        img {
-            max-height: 200px;
-        }
-
-    }
-
-    .post {
-
-        .post__header {
-
-            .col__name {
-
-                .user-popover {
-                    max-width: 130px;
-                }
-
-            }
-
-        }
-
-    }
-
-    .sidebar--right__content {
-        height: 100%;
-        @include display-flex;
-        @include flex-direction(column);
-    }
-
-    .sidebar--right__back {
-        color: inherit;
-        @include opacity(0.8);
-        width: 30px;
-        text-align: center;
-        margin: 0 0 0 -14px;
-        font-size: 13px;
-        display: inline-block;
-    }
-    .sidebar-right__body {
-        @include flex(1 1 auto);
-        border-left: $border-gray;
-        border-top: $border-gray;
-        @include display-flex;
-        @include flex-direction(column);
-        height: calc(100% - 56px);
-        @include border-radius(2px 0 0 0);
-    }
-    .sidebar__overlay {
-        width: 100%;
-        height: 100%;
-        background-color: yellow;
-        @include opacity(0.1);
-        position: absolute;
-        z-index: 5;
-        pointer-events: none;
-    }
-    .input-group {
-        word-break: break-word;
-    }
-    .sidebar--right__close {
-        margin: 11px 0 0 0;
-        width: 22px;
-        height: 22px;
-        opacity: 0.5;
-        font-size: 22px;
-        line-height: 0;
-        background: none;
-        float: right;
-        outline: none;
-        border: none;
-        @include single-transition(all, 0.2s, ease-in);
-        &:hover, &:active {
-            opacity: 0.8;
-        }
-        i {
-            position: relative;
-            top: -2px;
-        }
-    }
-    .sidebar--right__header {
-        font-size: 1em;
-        text-transform: uppercase;
-        color: inherit;
-        height: 44px;
-        padding: 0 1em;
-        line-height: 44px;
-        @include flex(0 0 44px);
-        border-bottom: $border-gray;
-    }
-    .sidebar--right__subheader {
-        font-size: 1em;
-        padding: 1em 1em 0;
-        h4 {
-            font-size: 1em;
-        }
-        ul {
-            @include opacity(0.7);
-            padding: 10px 0 0 30px;
-        }
-        li {
-            font-size: 0.95em;
-            padding-bottom: 10px;
-        }
-    }
-
-    .suggestion-content {
-        max-height: 120px;
-    }
-}
-
-.sidebar-right-container {
-    height: 100%;
-}
diff --git a/web/sass-files/sass/partials/_signup.scss b/web/sass-files/sass/partials/_signup.scss
deleted file mode 100644
index 6d396d21c..000000000
--- a/web/sass-files/sass/partials/_signup.scss
+++ /dev/null
@@ -1,390 +0,0 @@
-@charset "UTF-8";
-
-.signup-header {
-    width:100%;
-    line-height: 33px;
-    padding: 0 1em 0.2em;
-    background: #EEE;
-
-    .fa {
-        margin-right: 5px;
-    }
-
-}
-.signup-team__container {
-    padding: 100px 0px 50px 0px;
-    max-width: 380px;
-    margin: 0 auto;
-    position: relative;
-    &.padding--less {
-        padding-top: 50px;
-    }
-    .form-control:focus {
-        @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6));
-    }
-
-    h1, h2, h3, h4, h5, h6, p {
-        line-height: 1.3;
-    }
-
-    h1 {
-        font-weight: 600;
-    }
-
-    h2 {
-        font-weight: 600;
-        margin-bottom: 0.8em;
-        letter-spacing: -0.5px;
-        font-size: em(30px);
-    }
-
-    h3 {
-        font-weight: 600;
-        margin: 0 0 1.3em 0;
-        font-size: 1.5em;
-    }
-
-    h4 {
-        font-size: em(20px);
-        font-weight: 600;
-        margin-bottom: 1em;
-    }
-
-    h5 {
-        font-size: em(16px);
-    }
-
-    hr {
-        margin: 2em 0;
-    }
-
-    p {
-        color: #555;
-        line-height: 1.5;
-        margin-bottom: 1em;
-    }
-
-    .input-group {
-        &.input-group--limit {
-            table-layout: fixed;
-            width: 100%;
-            .tooltip-inner {
-                word-wrap: break-word;
-            }
-            .form-control {
-                text-align: left;
-                display: table-cell;
-                width: 100%;
-            }
-            .input-group-addon {
-                text-align: left;
-                width: 50%;
-                display: table-cell;
-                overflow: hidden;
-                text-overflow: ellipsis;
-            }
-        }
-    }
-
-    .inner__content {
-        padding: 0 1rem;
-        margin: 30px 0 20px;
-    }
-
-    .block--gray {
-        background: #f2f2f2;
-        display: inline-block;
-        padding: 0.85em 1.2em;
-        font-weight: 600;
-        @include border-radius(3px);
-    }
-
-    form {
-        margin-bottom: 0.8em;
-    }
-
-    .signup-team-confirm__container {
-        padding: 100px 0px 100px 0px;
-    }
-
-    .signup-team-logo {
-        display: none;
-        width: 210px;
-        margin: 0 0 2em 0;
-    }
-
-    .signup-team-login {
-        padding-bottom: 10px;
-        font-weight: 600;
-    }
-
-    .signup-team__name {
-        margin: 0.5em 0 0;
-        font-size: 2.2em;
-        font-weight: 600;
-        padding-left: 1rem;
-    }
-
-    .signup-team__subdomain {
-        margin: 0.2em 0 1.2em;
-        font-size: 1.5em;
-        padding-left: 1rem;
-        font-weight: 300;
-        text-transform: uppercase;
-    }
-
-    .form-control {
-        height: em(38px);
-    }
-
-    .or__container {
-        height: 1px;
-        background: #dddddd;
-        text-align: left;
-        margin: 2em 0;
-        span {
-            width: 40px;
-            top: -10px;
-            position: relative;
-            font-size: 1.14286em;
-            line-height: 20px;
-            font-weight: 600;
-            background: #fff;
-            display: inline-block;
-            text-align: center;
-        }
-    }
-
-    ul {
-        margin-bottom: 0;
-        padding-left: 18px;
-    }
-
-    .signup__email-container {
-        margin-left: 1rem;
-    }
-
-    .btn {
-        font-size: 1em;
-        padding: em(7px) em(15px);
-        font-weight: 600;
-        margin-right: 5px;
-        .fa {
-            font-size: 17px;
-            margin-right: 8px;
-        }
-        .icon {
-            width: 18px;
-            height: 18px;
-            margin-right: 8px;
-            @include background-size(100% 100%);
-            display: inline-block;
-        }
-        &.btn-custom-login {
-            display: block;
-            min-width: 200px;
-            width: 200px;
-            padding: 0 1em;
-            margin: 1em 1rem;
-            height: 40px;
-            line-height: 34px;
-            color: #fff;
-            @include border-radius(2px);
-            &.gitlab {
-                background: #554488;
-                &:hover {
-                    background: darken(#554488, 10%);
-                }
-                span {
-                    vertical-align: middle;
-                }
-                .icon {
-                    background-image: url("../images/gitlabLogo.png");
-                }
-            }
-            &.google {
-                background: #dd4b39;
-                &:hover {
-                    background: darken(#dd4b39, 10%);
-                }
-                span {
-                    vertical-align: middle;
-                }
-                .icon {
-                    background-image: url("../images/googleLogo.png");
-                }
-            }
-            &.ldap {
-                background: #dd4b39;
-                &:hover {
-                    background: darken(#dd4b39, 10%);
-                }
-                span {
-                    vertical-align: middle;
-                }
-            }
-            &.email {
-                background: #2389D7;
-                &:hover {
-                    background: darken(#2389D7, 10%);
-                }
-                span {
-                    vertical-align: middle;
-                }
-            }
-            &.btn-full {
-                width: 100%;
-                text-align: left;
-                padding-left: 35px;
-            }
-        }
-        &.btn-default {
-            color: #444;
-        }
-        .glyphicon {
-            &.glyphicon-ok, &.glyphicon-refresh {
-                margin-right: 0.5em;
-                left: -2px;
-                font-size: 0.9em;
-            }
-            &.glyphicon-chevron-right {
-                font-size: 0.8em;
-                right: -2px;
-                top: 0px;
-            }
-            &.glyphicon-chevron-left {
-                font-size: 0.8em;
-                left: -2px;
-                top: 0px;
-            }
-        }
-    }
-
-    .has-error {
-        .control-label {
-            background: #f2f2f2;
-            padding: 0.7em 1em;
-            @include border-radius(3px);
-            margin: 1em 0 0;
-            font-size: 14px;
-            font-weight: normal;
-            color: #999;
-            width: 100%;
-            &:before {
-                @extend .fa;
-                content: "\f071";
-                margin-right: 4px;
-                color: #aaa;
-            }
-        }
-    }
-
-    .reset-form {
-        @include border-radius(3px);
-        position: relative;
-        font-size: 0.95em;
-        p {
-            color: inherit;
-        }
-    }
-
-    // Modifier Styles
-    h1, h2, h3, h4, h5, h6 {
-        &.margin--top-none {
-            margin-top: 0;
-        }
-        &.margin--bottom-none {
-            margin-bottom: 0;
-        }
-        &.margin--less {
-            margin-bottom: 0.3em;
-        }
-        &.sub-heading {
-            font-weight: 400;
-            margin-bottom: 0;
-        }
-        &.color--light {
-            font-weight: 300;
-        }
-    }
-
-    p {
-        &.margin--extra {
-            margin-bottom: 1.5em;
-        }
-        &.margin--less {
-            margin-bottom: 0.3em;
-        }
-        .black, &.black {
-            color: #000;
-        }
-    }
-
-    .color--light {
-        color: #777;
-    }
-
-    .margin--extra {
-        margin-top: 3em;
-    }
-
-    .margin--extra-2x {
-        margin-top: 6em;
-    }
-
-}
-
-.signup-team-all {
-    margin: 0 0 20px;
-    border: 1px solid #ddd;
-    @include border-radius(2px);
-    .signup-team-dir {
-        background: #fafafa;
-        border-top: 1px solid #d5d5d5;
-        &:first-child {
-            border: none;
-        }
-        a {
-            color: inherit;
-            display: block;
-            padding: 0 15px;
-            line-height: 3.5em;
-            height: 3.5em;
-            font-size: 1.1em;
-        }
-    }
-    .signup-team-dir__name {
-        white-space: nowrap;
-        float: left;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        width: 90%;
-    }
-    .signup-team-dir__arrow {
-        float: right;
-        font-size: 0.9em;
-        color: #999;
-        line-height: 3.5em;
-    }
-}
-
-
-.authorize-box {
-    margin: 100px auto;
-    width:500px;
-    height:280px;
-    border: 1px solid black;
-}
-
-.authorize-inner {
-    padding: 20px;
-}
-
-.authorize-btn {
-    margin-right: 6px;
-}
-
-.verify_panel {
-    margin: 60px auto auto auto;
-    max-width: 380px;
-}
diff --git a/web/sass-files/sass/partials/_statistics.scss b/web/sass-files/sass/partials/_statistics.scss
deleted file mode 100644
index f86740270..000000000
--- a/web/sass-files/sass/partials/_statistics.scss
+++ /dev/null
@@ -1,87 +0,0 @@
-@charset "UTF-8";
-
-.team_statistics {
-	.total-count {
-		margin: 1em 0;
-		text-align: center;
-		background: #fff;
-		border: 1px solid #ddd;
-		width: 100%;
-		@include border-radius(3px);
-
-		.title {
-			font-weight: 400;
-			padding: 7px 10px;
-			border-bottom: 1px solid #ddd;
-			text-align: left;
-            font-size: 13px;
-
-			.fa {
-				float: right;
-				margin: 0px 0 0;
-				color: #555;
-				font-size: 16px;
-			}
-
-		}
-
-		.content {
-			font-size: 30px;
-			font-weight: 600;
-			color: #555;
-			padding: 0.3em 0 0.35em;
-			overflow: auto;
-		}
-
-	}
-
-	.total-count--day {
-		width: 760px;
-		height: 275px;
-		border: 1px solid #ddd;
-		padding: 5px 10px 10px 10px;
-		margin: 10px 10px 10px 10px;
-		background: #fff;
-		clear: both;
-
-		> div {
-			font-size: 18px;
-			font-weight: 300;
-		}
-	}
-
-	.recent-active-users {
-
-		table {
-			width: 100%;
-			table-layout: fixed;
-		}
-
-		.content {
-			max-height: 400px;
-			overflow: auto;
-			padding: 0;
-		}
-
-		tr {
-			&:first-child {
-				td {
-					border-top: none;
-				}
-			}
-			td {
-				font-weight: 400;
-				white-space: nowrap;
-				text-overflow: ellipsis;
-				font-size: 13px;
-				border-left: 1px solid #ddd;
-				border-top: 1px solid #ddd;
-				padding: 5px 5px 6px;
-				@include clearfix;
-				&:first-child {
-					border-left: none;
-				}
-			}
-		}
-	}
-}
diff --git a/web/sass-files/sass/partials/_suggestion_list.scss b/web/sass-files/sass/partials/_suggestion_list.scss
deleted file mode 100644
index 28c113c6d..000000000
--- a/web/sass-files/sass/partials/_suggestion_list.scss
+++ /dev/null
@@ -1,67 +0,0 @@
-@charset "UTF-8";
-
-.suggestion-list {
-	width: 100%;
-	z-index: 100;
-	@extend %popover-box-shadow;
-}
-
-.suggestion-list--top {
-    position: absolute;
-}
-
-.suggestion-content {
-    width: 100%;
-    max-height: 292px;
-    background-color: #fff;
-    border: $border-gray;
-    overflow-x: hidden;
-    overflow-y: scroll;
-}
-
-.suggestion-content--top {
-    position: absolute;
-    bottom: 0;
-}
-
-.suggestion--selected {
-    // set by theme code
-}
-
-.command-name {
-    position: relative;
-    width: 100%;
-    line-height: 24px;
-    padding: 5px 10px 8px;
-    z-index: 101;
-    font-size: 0.95em;
-    border-bottom: 1px solid #ddd;
-
-    .command__desc {
-        margin-left: 5px;
-        @include opacity(0.5);
-        line-height: normal;
-    }
-}
-
-.command-desc {
-    color: #a7a8ab;
-}
-
-.emoticon-suggestion {
-    @include clearfix;
-    width: 100%;
-    height: 30px;
-    cursor: pointer;
-    font-size: 13px;
-    line-height: 30px;
-}
-
-.emoticon-suggestion__image {
-    width: 20px;
-    height: 20px;
-    margin: 6px 6px 0 5px;
-    padding: 0;
-    text-align: center;
-    vertical-align: top;
-}
diff --git a/web/sass-files/sass/partials/_tooltips.scss b/web/sass-files/sass/partials/_tooltips.scss
deleted file mode 100644
index c2de3c590..000000000
--- a/web/sass-files/sass/partials/_tooltips.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-@charset "UTF-8";
-
-#recentMentionsTooltip {
-	.tooltip-arrow {
-		margin-left: 10px;
-	}
-}
\ No newline at end of file
diff --git a/web/sass-files/sass/partials/_tutorial.scss b/web/sass-files/sass/partials/_tutorial.scss
deleted file mode 100644
index b21a2b7c3..000000000
--- a/web/sass-files/sass/partials/_tutorial.scss
+++ /dev/null
@@ -1,212 +0,0 @@
-@charset "UTF-8";
-
-.tip-backdrop {
-    background: rgba(black, 0.5);
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 999;
-}
-
-.tip-overlay {
-    width: 350px;
-    max-width: 90%;
-    position:absolute;
-    background-color: #fff;
-    @include border-radius(3px);
-    padding: 20px;
-    z-index: 1000;
-
-    .arrow {
-        border-width: 10px;
-        position: absolute;
-        display: block;
-        width: 0;
-        height: 0;
-        border-color: transparent;
-        border-style: solid;
-    }
-
-    &.tip-overlay--sidebar {
-        max-width: 75%;
-        margin: 50px 0 0 10px;
-        min-height: 330px;
-        .tutorial__footer {
-            position: absolute;
-            width: 100%;
-            bottom: 20px;
-            left: 0;
-            padding: 0 20px;
-        }
-        .arrow {
-            top: 80px;
-            left: -10px;
-            margin-top: -10px;
-            border-left-width: 0;
-            border-right-color: #fff;
-        }
-    }
-
-    &.tip-overlay--header {
-        margin: 10px 0 0 10px;
-        .arrow {
-            top: 15px;
-            left: -10px;
-            border-left-width: 0;
-            border-right-color: #fff;
-        }
-    }
-
-    &.tip-overlay--chat {
-        margin-top: -10px;
-        .arrow {
-            left: 50%;
-            margin-left: -10px;
-            border-bottom-width: 0;
-            border-top-color: #fff;
-            bottom: -10px;
-        }
-    }
-
-    h4 {
-        font-size: em(16px);
-        font-weight: 600;
-        margin: 5px 0 15px;
-    }
-
-    p {
-        font-size: 13px;
-        line-height: 1.6;
-
-        strong {
-            font-weight: 600;
-        }
-
-    }
-
-    .btn {
-        background: #cccccc;
-        color: #fff;
-        @include border-radius(3px);
-        border: none;
-        margin: 10px 0;
-
-        &:hover, &:active, &:focus {
-            color: #fff;
-            border: none;
-            background: #bbb;
-        }
-
-    }
-
-    .tip-opt {
-        font-size: 12px;
-
-        span {
-            @include opacity(0.9);
-        }
-
-    }
-
-    .tutorial__circles {
-        margin: 1.5em 0px -1.7em -4px;
-
-        .circle {
-            width: 7px;
-            height: 7px;
-            margin: 0 4px;
-        }
-
-    }
-
-}
-
-.tip-button {
-    z-index: 998;
-    right: -10px;
-    top: -10px;
-    position: relative;
-    cursor: pointer;
-}
-
-.tip-div {
-    position:absolute;
-    top:0px;
-    right:0px;
-
-    &.tip-overlay--header {
-        top: 21px;
-        right: 2px;
-        .tip-button {
-            @include opacity(0.8);
-        }
-    }
-
-    &.tip-overlay--sidebar {
-        left: 0;
-        @include opacity(0.8);
-        top: -9px;
-    }
-
-}
-
-.tutorial-steps__container {
-    text-align: center;
-    width: 100%;
-    display: table;
-    height: 100%;
-    .tutorial__content {
-        display: table-cell;
-        vertical-align: middle;
-        padding-bottom: 100px;
-        padding: 20px 40px 40px;
-        .tutorial__steps {
-            position: relative;
-            max-width: 310px;
-            min-height: 370px;
-            margin-bottom: 50px;
-            text-align: left;
-            display: inline-block;
-        }
-    }
-    .tutorial__footer {
-        position: absolute;
-        bottom: 0;
-    }
-    h1 {
-        font-size: em(40px);
-        margin: -20px 0 30px;
-        font-weight: 600;
-    }
-    h3 {
-        font-size: em(24px);
-        margin-bottom: 30px;
-        font-weight: 600;
-    }
-    .tutorial__circles {
-        position: absolute;
-        bottom: 40px;
-    }
-    .tutorial-skip {
-        margin-left: 13px;
-    }
-}
-
-.tutorial__circles {
-    margin: 2em 0;
-    .circle {
-        width: 9px;
-        height: 9px;
-        @include border-radius(9px);
-        @include opacity(0.2);
-        background: #000;
-        display: inline-block;
-        margin: 0 5px;
-        &.active {
-            background: $primary-color;
-            @include opacity(1);
-        }
-    }
-}
diff --git a/web/sass-files/sass/partials/_variables.scss b/web/sass-files/sass/partials/_variables.scss
deleted file mode 100644
index 514be2e8b..000000000
--- a/web/sass-files/sass/partials/_variables.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-@charset "UTF-8";
-
-@function em($pixels, $context: 14px) {
-	@return #{$pixels/$context}em
-}
-
-// Color Variables
-$primary-color: #2389D7;
-$primary-color--hover: darken(#2389D7, 5%);
-$body-bg: #e9e9e9;
-$header-bg: #f9f9f9;
-$border-gray: 1px solid #ddd;
-
-%popover-box-shadow {
-	@include box-shadow(rgba(black, 0.175) 1px -3px 12px);
-}
diff --git a/web/sass-files/sass/partials/_videos.scss b/web/sass-files/sass/partials/_videos.scss
deleted file mode 100644
index 43f30ce84..000000000
--- a/web/sass-files/sass/partials/_videos.scss
+++ /dev/null
@@ -1,66 +0,0 @@
-@charset "UTF-8";
-
-.video-div {
-	position:relative;
-	max-width: 480px;
-    margin-bottom: 8px;
-	.video-thumbnail {
-		max-width: 100%;
-		height: auto;
-	}
-	.block {
-		background-color:rgba(0,0,0,0.5);
-		border-radius:10px;
-		position:absolute;
-		top: 50%;
-		left: 50%;
-		margin-top: -100px;
-		width: 200px;
-		margin: -75px 0 0 -100px;
-		height: 150px;
-	}
-}
-
-.video-type {
-	@include opacity(0.8);
-	font-size:15px;
-	margin:0px;
-	padding:0px;
-}
-
-.video-title {
-	font-size:15px;
-	margin-top:3px;
-}
-.play-button {
-	width:100px;
-	height:100px;
-	position:absolute;
-	top:26px;
-	right:51px;
-	border:4px solid;
-	border-color:rgba(255,255,255,0.4);
-	border-radius:14px;
-}
-.play-button span {
-	position:absolute;
-	top:10px;
-	left:20px;
-	width:0;
-	height:0;
-	border-top:36px solid transparent;
-	border-bottom:36px solid transparent;
-	border-left:60px solid rgba(255,255,255,0.4);
-}
-
-.img-div {
-    -moz-force-broken-image-icon: 1;
-    position:relative;
-    max-width: 450px;
-    max-height: 500px;
-    margin-bottom: 8px;
-    border-radius:5px;
-    &.placeholder {
-        height: 500px;
-    }
-}
diff --git a/web/sass-files/sass/partials/_webhooks.scss b/web/sass-files/sass/partials/_webhooks.scss
deleted file mode 100644
index 4b0215a9e..000000000
--- a/web/sass-files/sass/partials/_webhooks.scss
+++ /dev/null
@@ -1,33 +0,0 @@
-@charset "UTF-8";
-
-.webhooks__container {
-    background: rgba(black, 0.1);
-    border: 1px solid;
-    @include border-radius(3px);
-    padding: 0 13px 15px;
-    margin-top: 10px;
-}
-.webhook__item {
-    font-size: 13px;
-    position: relative;
-    &:last-child {
-        .divider-light:last-child {
-            display: none;
-        }
-    }
-    .webhook__remove {
-        position: absolute;
-        right: -7px;
-        top: 8px;
-        width: 30px;
-        height: 30px;
-        font-size: 22px;
-        font-weight: bold;
-        text-align: center;
-        text-decoration: none;
-        color: #E05F5D;
-    }
-    .webhook__url {
-        padding-right: 20px;
-    }
-}
\ No newline at end of file
diff --git a/web/sass-files/sass/partials/_welcome.scss b/web/sass-files/sass/partials/_welcome.scss
deleted file mode 100644
index 0be43d29c..000000000
--- a/web/sass-files/sass/partials/_welcome.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-@charset "UTF-8";
-
-.welcome-info {
-  max-width: 550px;
-  margin-top: 50px;
-  margin-left: 25px;
-  h1 {
-      font-size: 200%;
-      margin-bottom: 20px;
-  }
-  p {
-      font-size: 125%;
-      margin-top: 12px;
-  }
-}
\ No newline at end of file
diff --git a/web/sass-files/sass/responsive/_desktop.scss b/web/sass-files/sass/responsive/_desktop.scss
new file mode 100644
index 000000000..dcabb807f
--- /dev/null
+++ b/web/sass-files/sass/responsive/_desktop.scss
@@ -0,0 +1,65 @@
+@charset 'UTF-8';
+
+@media screen and (max-width: 1800px) {
+    .inner-wrap {
+        &.move--left {
+            .date-separator,
+            .new-separator {
+                &.hovered--comment {
+                    &:before,
+                    &:after {
+                        background: none;
+                    }
+                }
+            }
+        }
+    }
+}
+
+@media screen and (max-width: 1440px) {
+    .date-separator,
+    .new-separator {
+        &.hovered--comment {
+            &:before,
+            &:after {
+                background: none !important;
+            }
+        }
+    }
+}
+
+@media screen and (max-width: 1140px) {
+    .tip-overlay {
+        &.tip-overlay--chat {
+            margin: -10px 0 0 -10px;
+            .arrow {
+                right: 15px;
+                left: auto;
+            }
+        }
+    }
+    .inner-wrap {
+        &.move--left {
+            .file-overlay {
+                font-size: em(18px);
+
+                .overlay__circle {
+                    width: 300px;
+                    height: 300px;
+                    margin: -150px 0 0 -150px;
+                }
+
+                .overlay__files {
+                    margin: 60px auto 15px;
+                    width: 150px;
+                }
+            }
+        }
+    }
+}
+
+@media (min-width: 992px) {
+    .modal-lg {
+        width: 700px;
+    }
+}
\ No newline at end of file
diff --git a/web/sass-files/sass/responsive/_mobile.scss b/web/sass-files/sass/responsive/_mobile.scss
new file mode 100644
index 000000000..a452cb420
--- /dev/null
+++ b/web/sass-files/sass/responsive/_mobile.scss
@@ -0,0 +1,901 @@
+@charset 'UTF-8';
+
+@media screen and (max-width: 768px) {
+    .signup-team__container {
+        font-size: 1em;
+    }
+
+    .date-separator.hovered--before:after,
+    .date-separator.hovered--after:before,
+    .new-separator.hovered--after:before,
+    .new-separator.hovered--before:after {
+        background: none !important;
+    }
+
+    .post {
+        .post__dropdown {
+            line-height: 9px;
+            text-decoration: none;
+            width: 20px;
+            display: inline-block;
+            text-align: center;
+            height: 20px;
+
+            &:after {
+                font-size: 20px;
+                content: '...';
+                top: -3px;
+            }
+        }
+
+        .comment-icon__container {
+            visibility: visible;
+            display: none;
+
+            &.icon--show {
+                display: inline-block;
+            }
+        }
+
+        .post-list__content & {
+            &:hover {
+                background: transparent;
+            }
+
+            .comment-icon__container {
+                visibility: visible;
+            }
+        }
+
+        .dropdown,
+        .post__reply {
+            visibility: visible;
+        }
+
+        .post__body {
+            width: calc(100% - 75px);
+        }
+
+        .post__reply {
+            margin-right: 20px;
+            float: right;
+
+            svg {
+                top: 1px;
+            }
+        }
+
+        &.other--root .post__reply {
+            &.post__reply--hide {
+                visibility: hidden;
+            }
+        }
+
+        .post__header {
+            .col__reply {
+                width: 65px;
+            }
+
+            .col__name {
+                pointer-events: none;
+
+                .user-popover {
+                    max-width: 130px;
+                }
+            }
+        }
+
+        &.same--root {
+            &.same--user {
+                .post__time {
+                    display: none;
+                }
+            }
+        }
+
+        .post__img {
+            width: 40px;
+
+            img {
+                width: 32px;
+                height: 32px;
+            }
+        }
+    }
+
+    .post-image__column {
+        width: 200px;
+        height: 95px;
+    }
+
+    .textarea-wrapper {
+        .textbox-preview-link,
+        .textbox-help-link {
+            display: none;
+        }
+    }
+    .form-control {
+        &.min-height {
+            min-height: 100px;
+        }
+    }
+
+    .img-div {
+        max-width: 100%;
+    }
+
+    .tip-div {
+        left: 15px;
+        right: auto;
+    }
+
+    .tip-overlay {
+        &.tip-overlay--chat {
+            margin-left: 10px;
+            .arrow {
+                left: 32px;
+            }
+        }
+    }
+
+    .file-details__container {
+        display: block;
+
+        .file-details__preview {
+            display: block;
+            width: 100%;
+            height: 150px;
+            border-right: none;
+            border-bottom: 1px solid #ddd;
+            img {
+                width: 64px;
+                height: 64px;
+            }
+        }
+
+        .file-details {
+            width: 100%;
+            height: auto;
+        }
+    }
+
+    .search-help-popover.visible {
+        visibility: hidden;
+    }
+
+    .modal-direct-channels {
+        .member-count {
+            float: none;
+            margin-top: 10px;
+            display: block;
+        }
+    }
+
+    .file-overlay {
+        font-size: em(18px);
+
+        &.center-file-overlay {
+            .overlay__indent {
+                margin-left: 0;
+            }
+        }
+
+        .overlay__circle {
+            width: 300px;
+            height: 300px;
+            margin: -150px 0 0 -150px;
+        }
+
+        .overlay__files {
+            margin: 60px auto 15px;
+            width: 150px;
+        }
+    }
+
+    .date-separator,
+    .new-separator {
+        &.hovered--after {
+            &:before {
+                background: none;
+            }
+        }
+
+        &.hovered--before {
+            &:after {
+                background: none;
+            }
+        }
+    }
+
+    .post-list__timestamp {
+        display: block;
+    }
+
+    .signup-team__container {
+        padding: 30px 0;
+        margin-bottom: 30px;
+        font-size: .9em;
+
+        .signup-team__name {
+            font-size: 2em;
+        }
+
+        .btn.btn-full {
+            padding-left: 10px;
+        }
+
+        .btn {
+            .icon,
+            .fa {
+                margin-right: 6px;
+            }
+        }
+    }
+
+    .row--invite {
+        .col-sm-6 {
+            padding: 0;
+        }
+    }
+
+    .modal {
+        .info__label {
+            text-align: left;
+            padding-bottom: 5px;
+        }
+
+        .modal-header {
+            .modal-action {
+                margin-top: 10px;
+            }
+
+            button.close {
+                font-weight: normal;
+                font-size: 27px;
+            }
+
+            .modal-title {
+                float: none;
+                max-width: 90%;
+            }
+
+            .btn {
+                &.btn-primary {
+                    display: block;
+                    margin: 10px 0 6px;
+                    width: 100%;
+                    float: none;
+                }
+            }
+        }
+
+        .settings-modal {
+            &.display--content {
+                .modal-header {
+                    display: none;
+                }
+
+                .settings-table {
+                    display: block;
+
+                    .settings-content {
+                        &.minimize-settings {
+                            display: block;
+                        }
+
+                        .section-min:hover {
+                            background: none;
+                        }
+
+                        .no-padding--left {
+                            padding-left: 15px;
+                        }
+                    }
+
+                    .settings-links {
+                        display: none;
+                    }
+
+                    .modal-header {
+                        display: block;
+                        position: absolute;
+                        top: 0;
+                        width: 100%;
+                        z-index: 5;
+
+                        .modal-title {
+                            width: 100%;
+                            text-align: center;
+                        }
+                    }
+
+                    .user-settings {
+                        .tab-header {
+                            display: none;
+                        }
+
+                        .divider-dark.first {
+                            display: none;
+                        }
+                    }
+                }
+            }
+
+            .settings-table {
+                padding: 0;
+                .nav {
+                    position: relative;
+                    top: auto;
+                    width: 100%;
+
+                    &.position--top {
+                        top: auto;
+                    }
+                }
+
+                .settings-content {
+                    .section-edit {
+                        position: absolute;
+                        top: 14px;
+                        right: 0;
+                        padding-right: 0;
+                        .fa {
+                            display: inline-block;
+                        }
+                    }
+
+                    &.minimize-settings {
+                        padding: 0;
+                        display: none;
+                        .user-settings {
+                            padding: 70px 20px 30px;
+                        }
+                    }
+
+                    .section-min:hover {
+                        background: none !important;
+                    }
+                }
+
+                .nav {
+                    > li {
+                        > a {
+                            border-top: 1px solid #ddd;
+                            font-size: 1.1em;
+                            line-height: 2.7;
+                            color: #555;
+
+                            .glyphicon {
+                                margin-left: 7px;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    .post-create__container {
+        .post-right__container & {
+            padding: 0 1em;
+
+            .msg-typing {
+                display: none;
+            }
+        }
+
+        form {
+            padding: .5em 0;
+        }
+
+        .post-create-footer {
+            padding: 0 1em;
+
+            .msg-typing {
+                display: none;
+            }
+
+            .control-label {
+                top: 0;
+            }
+        }
+
+        .post-create-body {
+            display: table;
+            width: 100%;
+
+            .post-body__cell {
+                display: table-cell;
+                padding-left: 45px;
+                .sidebar--right & {
+                    padding-left: 0;
+                }
+            }
+
+            .app__content & {
+                .btn-file {
+                    width: 45px;
+                    padding: 0;
+                    line-height: 36px;
+                    bottom: -2px;
+                    left: 0;
+                    top: auto;
+                }
+            }
+
+            .send-button {
+                display: table-cell;
+            }
+        }
+    }
+
+    .file-preview__container {
+        margin: 5px 0 0;
+    }
+
+    .file-preview {
+        margin-top: 0;
+    }
+
+    .file-preview__remove {
+        width: 28px;
+        height: 28px;
+        left: auto;
+        right: 0;
+        top: 0;
+        background: #444;
+        background: rgba(#000, .5);
+        text-align: center;
+
+        &:after {
+            display: none;
+        }
+
+        i {
+            line-height: 29px;
+            top: auto;
+            right: auto;
+            position: relative;
+            font-size: 16px;
+        }
+    }
+
+    #navbar {
+        .navbar-default {
+            .navbar-header {
+                float: none;
+                margin: 0 -15px;
+
+                .dropdown__icon {
+                    background: url('../images/dropdown-icon.png');
+                    width: 4px;
+                    height: 16px;
+                    @include background-size(100% 100%);
+                    display: inline-block;
+                }
+            }
+
+            .navbar-toggle {
+                display: block;
+            }
+
+            .navbar-brand {
+                white-space: nowrap;
+            }
+        }
+    }
+
+    body {
+        &.white {
+            .inner-wrap {
+                > .row.content {
+                    margin-bottom: -185px;
+                }
+            }
+        }
+    }
+
+    .footer,
+    .footer-pane,
+    .footer-push {
+        height: 187px;
+    }
+
+    .footer-pane {
+        .footer-link {
+            padding: 0;
+            width: 100%;
+            text-align: right;
+            line-height: 1.7;
+            &.copyright {
+                width: 100%;
+            }
+        }
+    }
+
+    .search__clear {
+        display: block;
+    }
+
+    .search-bar__container {
+        padding: 0;
+        @include flex(0 0 44px);
+        background: $color--primary;
+        color: #fff;
+
+        &.focused {
+            .sidebar__collapse {
+                @include translateX(-45px);
+            }
+
+            .search__form {
+                @include translateX(-45px);
+                padding-left: 55px;
+                padding-right: 24px;
+            }
+
+            .search__clear {
+                @include translateX(0px);
+            }
+        }
+        .search__form {
+            border: none;
+            @include translateX(0px);
+            padding: 7px 20px 0 49px;
+            height: 45px;
+            position: relative;
+            @include single-transition(all, .2s, linear);
+
+            .glyphicon-refresh-animate {
+                right: 33px;
+                top: 15px;
+                color: #fff;
+                color: rgba(255,255,255,.5);
+            }
+
+            .form-control {
+                border: none;
+                padding: 0 10px 0 31px;
+                background: rgba(black, .2);
+                @include border-radius(3px);
+                color: #444;
+                background: #fff;
+            }
+        }
+    }
+    .sidebar--menu {
+        @include single-transition(transform, .5s, ease);
+        @include translate3d(290px, 0, 0);
+        width: 290px;
+        border: none;
+        display: block;
+
+        &.move--left {
+            @include translate3d(0, 0, 0);
+        }
+    }
+
+    .sidebar--left {
+        @include single-transition(transform, .5s, ease);
+        @include translate3d(-290px, 0, 0);
+        width: 290px;
+        border: none;
+        &.sidebar--padded {
+            padding-top: 0;
+        }
+
+        &.move--right {
+            @include translate3d(0, 0, 0);
+        }
+
+        > div {
+            padding-bottom: 70px;
+        }
+
+        .nav-pills__unread-indicator-bottom {
+            bottom: 10px;
+        }
+
+        .badge {
+            top: 13px;
+        }
+
+        .team__header {
+            @include clearfix;
+            pointer-events: none;
+
+            .user__name {
+                display: none;
+            }
+
+            .team__name {
+                margin: 10px 0;
+            }
+
+            .navbar-right {
+                display: none;
+            }
+        }
+
+        .search__form {
+            display: block;
+        }
+
+        .nav {
+            li {
+                &.dropdown.open {
+                    padding-bottom: 25px;
+
+                    ul {
+                        clear: both;
+                        background: #fff;
+                        border-radius: 3px;
+                        top: 5px;
+                        position: relative;
+
+                        li {
+                            a {
+                                line-height: 30px;
+                            }
+                        }
+                    }
+                }
+
+                h4 {
+                    margin: 16px 0 8px;
+                }
+
+                > a {
+                    font-size: 15px;
+                    margin: 0;
+                    line-height: 2.5;
+
+                    &:hover,
+                    &:focus {
+                        background: transparent;
+                    }
+
+                    &.has-close {
+                        .btn-close {
+                            width: 40px;
+                            text-align: center;
+                            right: 0;
+                            display: block;
+                            @include opacity(.5);
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    .sidebar--right {
+        width: 100%;
+        right: 0;
+        @include translate3d(100%, 0, 0);
+        z-index: 5;
+
+        &.move--left {
+            @include translate3d(0, 0, 0);
+        }
+
+        .sidebar__collapse,
+        .sidebar__search-icon {
+            display: block;
+        }
+
+        .sidebar--right__close {
+            display: none;
+        }
+
+        .sidebar-right__body {
+            height: calc(100% - 44px);
+        }
+    }
+
+    .search-items-container {
+        height: calc(100% - 44px);
+    }
+
+    .inner-wrap {
+        @include single-transition(all, .5s, ease);
+
+        &.move--right {
+            @include translate3d(290px, 0, 0);
+
+            &:before {
+                z-index: 9999;
+                content: '';
+                width: 100%;
+                height: 100%;
+                left: -15px;
+                top: 0;
+                position: absolute;
+                background: rgba(0, 0, 0, .4);
+            }
+        }
+
+        &.move--left-small {
+            @include translate3d(-290px, 0, 0);
+            &:before {
+                z-index: 9999;
+                content: '';
+                width: 100%;
+                height: 100%;
+                right: -15px;
+                top: 0;
+                position: absolute;
+                background: rgba(0, 0, 0, .4);
+            }
+        }
+
+        &.move--left {
+            margin: 0;
+            @include translate3d(-100%, 0, 0);
+        }
+    }
+
+    .modal {
+        .modal-image {
+            .image-wrapper {
+                > div {
+                    font-size: 12px;
+                    min-width: 250px;
+                }
+
+                .modal-close {
+                    @include opacity(1);
+                }
+            }
+
+            .modal-button-bar {
+                @include opacity(1);
+            }
+        }
+    }
+
+    .app__content {
+        padding-top: 45px;
+        margin: 0;
+        .channel__wrap & {
+            padding-top: 45px;
+        }
+        #channel-header {
+            display: none;
+        }
+    }
+
+    .channel__wrap {
+        .row {
+            &.header {
+                display: block;
+            }
+        }
+    }
+
+    .post-comments {
+        padding: 9px 21px 10px 10px !important;
+    }
+
+    .post-image__column .post-image .file-playback__controls.stop,
+    .image-wrapper > a .file-playback__controls.stop {
+        @include opacity(1);
+    }
+}
+
+@media screen and (max-width: 640px) {
+    .access-history__table {
+        > div {
+            display: block;
+        }
+
+        .access__report {
+            margin: 0 0 15px 15px;
+        }
+
+        .access__date {
+            div {
+                margin-bottom: 15px;
+            }
+        }
+    }
+    .activity-log__table {
+        > div {
+            display: block;
+        }
+
+        .activity-log__report {
+            width: 100%;
+        }
+
+        .activity-log__action {
+            text-align: left;
+            margin-top: 10px;
+        }
+    }
+}
+
+@media screen and (max-width: 480px) {
+    .modal {
+        .settings-modal {
+            .settings-table {
+                .security-links {
+                    margin-bottom: 10px;
+                    display: block;
+
+                    &:last-child {
+                        margin-bottom: 0;
+                    }
+                }
+            }
+        }
+    }
+
+    .tip-overlay.tip-overlay--sidebar {
+        min-height: 350px;
+    }
+
+    .modal {
+        .modal-body {
+            max-height: 70%;
+        }
+
+        .settings-modal {
+            &.display--content {
+                .modal-body {
+                    max-height: 90%;
+                }
+            }
+        }
+    }
+
+    .member-div {
+        padding: 8px 0;
+
+        .member-drop,
+        .member-role {
+            position: relative;
+            margin: 0px 0 0 44px;
+            padding: 5px 0;
+            top: 0;
+            right: 0;
+        }
+
+        .open > .dropdown-menu {
+            left: 0;
+            right: auto;
+        }
+    }
+
+    .sidebar--left {
+        @include translate3d(-260px, 0, 0);
+        width: 260px;
+    }
+
+    .inner-wrap {
+        &.move--right {
+            @include translate3d(260px, 0, 0);
+        }
+    }
+
+    .modal {
+        .modal-image {
+            .modal-button-bar {
+                line-height: 30px;
+                padding: 5px;
+            }
+        }
+    }
+}
+
+@media screen and (max-height: 640px) {
+    .signup-team__container {
+        padding: 30px 0;
+        margin-bottom: 30px;
+        font-size: .9em;
+
+        .signup-team__name {
+            font-size: 2em;
+        }
+    }
+}
diff --git a/web/sass-files/sass/responsive/_module.scss b/web/sass-files/sass/responsive/_module.scss
new file mode 100644
index 000000000..a799c145e
--- /dev/null
+++ b/web/sass-files/sass/responsive/_module.scss
@@ -0,0 +1,4 @@
+@charset 'UTF-8';
+@import 'desktop';
+@import 'tablet';
+@import 'mobile';
diff --git a/web/sass-files/sass/responsive/_tablet.scss b/web/sass-files/sass/responsive/_tablet.scss
new file mode 100644
index 000000000..14641cfa5
--- /dev/null
+++ b/web/sass-files/sass/responsive/_tablet.scss
@@ -0,0 +1,35 @@
+@charset 'UTF-8';
+
+@media screen and (max-width: 960px) {
+    .sidebar--right {
+        z-index: 5;
+        @include translateX(100%);
+        @include single-transition(all, .5s, ease);
+
+        &.move--left {
+            @include translateX(0);
+
+            .search-bar__container {
+                padding-right: 8px;
+            }
+        }
+    }
+
+    .inner-wrap {
+        &.move--left {
+            margin-right: 0;
+
+            .channel-header__links {
+                position: relative;
+                right: auto;
+                top: auto;
+            }
+        }
+    }
+}
+
+@media screen and (min-width: 768px) {
+    .second-bar {
+        display: none;
+    }
+}
\ No newline at end of file
diff --git a/web/sass-files/sass/styles.scss b/web/sass-files/sass/styles.scss
index 7bf3574d2..4a49e439e 100644
--- a/web/sass-files/sass/styles.scss
+++ b/web/sass-files/sass/styles.scss
@@ -5,55 +5,14 @@
  * Import this file using the following HTML or equivalent:
  * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
 
-// Base Css
 @import "compass/utilities";
 @import "compass/css3";
-@import "partials/variables";
-@import "partials/perfect-scrollbar";
-@import "partials/font-awesome";
-@import "partials/base";
-@import "partials/colorpicker";
 
-// Channel Css
-@import "partials/headers";
-@import "partials/footer";
-@import "partials/content";
-@import "partials/popover";
-@import "partials/post";
-@import "partials/post_right";
-@import "partials/navbar";
-@import "partials/search";
-@import "partials/sidebar--left";
-@import "partials/sidebar--right";
-@import "partials/sidebar--menu";
-@import "partials/admin-console";
-@import "partials/signup";
-@import "partials/files";
-@import "partials/videos";
-@import "partials/settings";
-@import "partials/modal";
-@import "partials/forms";
-@import "partials/mentions";
-@import "partials/error";
-@import "partials/error-bar";
-@import "partials/loading";
-@import "partials/get-link";
-@import "partials/markdown";
-@import "partials/tutorial";
-@import "partials/statistics";
-@import "partials/suggestion_list";
-
-// Elements
-@import "partials/tooltips";
-
-// Responsive Css
-@import "partials/responsive";
-
-// Docs Css
-@import "partials/docs";
-
-// Standalone Css
-@import "partials/oauth";
-
-// Print
-@import "partials/print";
\ No newline at end of file
+// styles.scss
+@import 'vendors/module';
+@import 'utils/module';
+@import 'base/module';
+@import 'pages/module';
+@import 'components/module';
+@import 'layout/module';
+@import 'responsive/module';
\ No newline at end of file
diff --git a/web/sass-files/sass/utils/_animations.scss b/web/sass-files/sass/utils/_animations.scss
new file mode 100644
index 000000000..767e30847
--- /dev/null
+++ b/web/sass-files/sass/utils/_animations.scss
@@ -0,0 +1,19 @@
+@charset 'UTF-8';
+
+@-webkit-keyframes spin2 {
+    from {
+        -webkit-transform: rotate(0deg);
+    }
+    to {
+        -webkit-transform: rotate(360deg);
+    }
+}
+
+@keyframes spin {
+    from {
+        transform: scale(1) rotate(0deg);
+    }
+    to {
+        transform: scale(1) rotate(360deg);
+    }
+}
diff --git a/web/sass-files/sass/utils/_functions.scss b/web/sass-files/sass/utils/_functions.scss
new file mode 100644
index 000000000..9013920fa
--- /dev/null
+++ b/web/sass-files/sass/utils/_functions.scss
@@ -0,0 +1,9 @@
+@charset "UTF-8";
+
+@function em($pixels, $context: 14px) {
+	@return #{$pixels/$context}em
+}
+
+%popover-box-shadow {
+    @include box-shadow(rgba(black, .175) 1px -3px 12px);
+}
\ No newline at end of file
diff --git a/web/sass-files/sass/utils/_mixins.scss b/web/sass-files/sass/utils/_mixins.scss
new file mode 100644
index 000000000..28723e1a5
--- /dev/null
+++ b/web/sass-files/sass/utils/_mixins.scss
@@ -0,0 +1,8 @@
+@charset 'UTF-8';
+
+@mixin file-icon($path) {
+    background: #fff url($path);
+    background-position: center;
+    background-repeat: no-repeat;
+    @include background-size(60px auto);
+}
diff --git a/web/sass-files/sass/utils/_module.scss b/web/sass-files/sass/utils/_module.scss
new file mode 100644
index 000000000..e7f0c0c46
--- /dev/null
+++ b/web/sass-files/sass/utils/_module.scss
@@ -0,0 +1,5 @@
+// Only for combining all the files in this folder
+@import 'variables';
+@import 'animations';
+@import 'functions';
+@import 'mixins';
diff --git a/web/sass-files/sass/utils/_variables.scss b/web/sass-files/sass/utils/_variables.scss
new file mode 100644
index 000000000..065c37a17
--- /dev/null
+++ b/web/sass-files/sass/utils/_variables.scss
@@ -0,0 +1,13 @@
+@charset 'UTF-8';
+
+// Color Variables
+$color--primary: rgb(35, 137, 215);
+$color--primary--hover: darken($color--primary, 10%);
+$bg--gray: rgb(245, 245, 245);
+$bg--white: rgb(255, 255, 255);
+
+// Page Variables
+$border-gray: 1px solid #ddd;
+
+// Random variables
+$border-rad: 1px;
diff --git a/web/sass-files/sass/vendors/_colorpicker.scss b/web/sass-files/sass/vendors/_colorpicker.scss
new file mode 100644
index 000000000..291145e80
--- /dev/null
+++ b/web/sass-files/sass/vendors/_colorpicker.scss
@@ -0,0 +1,253 @@
+@charset 'UTF-8';
+
+/*!
+ * Bootstrap Colorpicker
+ * http://mjolnic.github.io/bootstrap-colorpicker/
+ *
+ * Originally written by (c) 2012 Stefan Petre
+ * Licensed under the Apache License v2.0
+ * http://www.apache.org/licenses/LICENSE-2.0.txt
+ *
+ */
+
+.colorpicker-saturation {
+    float: left;
+    width: 100px;
+    height: 100px;
+    cursor: crosshair;
+    background-image: url('../images/bootstrap-colorpicker/saturation.png');
+}
+
+.colorpicker-saturation i {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: block;
+    width: 5px;
+    height: 5px;
+    margin: -4px 0 0 -4px;
+    border: 1px solid #000;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+}
+
+.colorpicker-saturation i b {
+    display: block;
+    width: 5px;
+    height: 5px;
+    border: 1px solid #fff;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+}
+
+.colorpicker-hue,
+.colorpicker-alpha {
+    float: left;
+    width: 15px;
+    height: 100px;
+    margin-bottom: 4px;
+    margin-left: 4px;
+    cursor: row-resize;
+}
+
+.colorpicker-hue i,
+.colorpicker-alpha i {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: block;
+    width: 100%;
+    height: 1px;
+    margin-top: -1px;
+    background: #000;
+    border-top: 1px solid #fff;
+}
+
+.colorpicker-hue {
+    background-image: url('../images/bootstrap-colorpicker/hue.png');
+}
+
+.colorpicker-alpha {
+    display: none;
+    background-image: url('../images/bootstrap-colorpicker/alpha.png');
+}
+
+.colorpicker-saturation,
+.colorpicker-hue,
+.colorpicker-alpha {
+    background-size: contain;
+}
+
+.colorpicker {
+    top: 0;
+    left: 0;
+    z-index: 2500;
+    min-width: 130px;
+    padding: 4px;
+    margin-top: 1px;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+    *zoom: 1;
+}
+
+.colorpicker:before,
+.colorpicker:after {
+    display: table;
+    line-height: 0;
+    content: '';
+}
+
+.colorpicker:after {
+    clear: both;
+}
+
+.colorpicker:before {
+    position: absolute;
+    top: -7px;
+    left: 6px;
+    display: inline-block;
+    border-right: 7px solid transparent;
+    border-bottom: 7px solid #ccc;
+    border-left: 7px solid transparent;
+    border-bottom-color: rgba(0, 0, 0, .2);
+    content: '';
+}
+
+.colorpicker:after {
+    position: absolute;
+    top: -6px;
+    left: 7px;
+    display: inline-block;
+    border-right: 6px solid transparent;
+    border-bottom: 6px solid #fff;
+    border-left: 6px solid transparent;
+    content: '';
+}
+
+.colorpicker div {
+    position: relative;
+}
+
+.colorpicker.colorpicker-with-alpha {
+    min-width: 140px;
+}
+
+.colorpicker.colorpicker-with-alpha .colorpicker-alpha {
+    display: block;
+}
+
+.colorpicker-color {
+    height: 10px;
+    margin-top: 5px;
+    clear: both;
+    background-image: url('../images/bootstrap-colorpicker/alpha.png');
+    background-position: 0 100%;
+}
+
+.colorpicker-color div {
+    height: 10px;
+}
+
+.colorpicker-selectors {
+    display: none;
+    height: 10px;
+    margin-top: 5px;
+    clear: both;
+}
+
+.colorpicker-selectors i {
+    float: left;
+    width: 10px;
+    height: 10px;
+    cursor: pointer;
+}
+
+.colorpicker-selectors i + i {
+    margin-left: 3px;
+}
+
+.colorpicker-element .input-group-addon i,
+.colorpicker-element .add-on i {
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    vertical-align: text-top;
+    cursor: pointer;
+}
+
+.colorpicker.colorpicker-inline {
+    position: relative;
+    z-index: auto;
+    display: inline-block;
+    float: none;
+}
+
+.colorpicker.colorpicker-horizontal {
+    width: 110px;
+    height: auto;
+    min-width: 110px;
+}
+
+.colorpicker.colorpicker-horizontal .colorpicker-saturation {
+    margin-bottom: 4px;
+}
+
+.colorpicker.colorpicker-horizontal .colorpicker-color {
+    width: 100px;
+}
+
+.colorpicker.colorpicker-horizontal .colorpicker-hue,
+.colorpicker.colorpicker-horizontal .colorpicker-alpha {
+    float: left;
+    width: 100px;
+    height: 15px;
+    margin-bottom: 4px;
+    margin-left: 0;
+    cursor: col-resize;
+}
+
+.colorpicker.colorpicker-horizontal .colorpicker-hue i,
+.colorpicker.colorpicker-horizontal .colorpicker-alpha i {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: block;
+    width: 1px;
+    height: 15px;
+    margin-top: 0;
+    background: #fff;
+    border: none;
+}
+
+.colorpicker.colorpicker-horizontal .colorpicker-hue {
+    background-image: url('../images/bootstrap-colorpicker/hue-horizontal.png');
+}
+
+.colorpicker.colorpicker-horizontal .colorpicker-alpha {
+    background-image: url('../images/bootstrap-colorpicker/alpha-horizontal.png');
+}
+
+.colorpicker.colorpicker-hidden {
+    display: none;
+}
+
+.colorpicker.colorpicker-visible {
+    display: block;
+}
+
+.colorpicker-inline.colorpicker-visible {
+    display: inline-block;
+}
+
+.colorpicker-right:before {
+    right: 6px;
+    left: auto;
+}
+
+.colorpicker-right:after {
+    right: 7px;
+    left: auto;
+}
diff --git a/web/sass-files/sass/vendors/_font-awesome.scss b/web/sass-files/sass/vendors/_font-awesome.scss
new file mode 100644
index 000000000..49ab318cd
--- /dev/null
+++ b/web/sass-files/sass/vendors/_font-awesome.scss
@@ -0,0 +1,1803 @@
+@charset 'UTF-8';
+
+/*!
+ *  Font Awesome 4.3.0 by @davegandy - http://fontawesome.io - @fontawesome
+ *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
+ */
+/* FONT PATH
+ * -------------------------- */
+@font-face {
+    font-family: 'FontAwesome';
+    src: url('../fonts/fontawesome-webfont.eot?v=4.3.0');
+    src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');
+    font-weight: normal;
+    font-style: normal;
+}
+.fa {
+    display: inline-block;
+    font: normal normal normal 14px/1 FontAwesome;
+    font-size: inherit;
+    text-rendering: auto;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    transform: translate(0, 0);
+}
+/* makes the font 33% larger relative to the icon container */
+.fa-lg {
+    font-size: 1.33333333em;
+    line-height: .75em;
+    vertical-align: -15%;
+}
+.fa-2x {
+    font-size: 2em;
+}
+.fa-3x {
+    font-size: 3em;
+}
+.fa-4x {
+    font-size: 4em;
+}
+.fa-5x {
+    font-size: 5em;
+}
+.fa-fw {
+    width: 1.28571429em;
+    text-align: center;
+}
+.fa-ul {
+    padding-left: 0;
+    margin-left: 2.14285714em;
+    list-style-type: none;
+}
+.fa-ul > li {
+    position: relative;
+}
+.fa-li {
+    position: absolute;
+    left: -2.14285714em;
+    width: 2.14285714em;
+    top: .14285714em;
+    text-align: center;
+}
+.fa-li.fa-lg {
+    left: -1.85714286em;
+}
+.fa-border {
+    padding: .2em .25em .15em;
+    border: solid .08em #eee;
+    border-radius: .1em;
+}
+.pull-right {
+    float: right;
+}
+.pull-left {
+    float: left;
+}
+.fa.pull-left {
+    margin-right: .3em;
+}
+.fa.pull-right {
+    margin-left: .3em;
+}
+.fa-spin {
+    -webkit-animation: fa-spin 2s infinite linear;
+    animation: fa-spin 2s infinite linear;
+}
+.fa-pulse {
+    -webkit-animation: fa-spin 1s infinite steps(8);
+    animation: fa-spin 1s infinite steps(8);
+}
+@-webkit-keyframes fa-spin {
+    0% {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+    100% {
+        -webkit-transform: rotate(359deg);
+        transform: rotate(359deg);
+    }
+}
+@keyframes fa-spin {
+    0% {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+    100% {
+        -webkit-transform: rotate(359deg);
+        transform: rotate(359deg);
+    }
+}
+.fa-rotate-90 {
+    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
+    -webkit-transform: rotate(90deg);
+    -ms-transform: rotate(90deg);
+    transform: rotate(90deg);
+}
+.fa-rotate-180 {
+    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
+    -webkit-transform: rotate(180deg);
+    -ms-transform: rotate(180deg);
+    transform: rotate(180deg);
+}
+.fa-rotate-270 {
+    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
+    -webkit-transform: rotate(270deg);
+    -ms-transform: rotate(270deg);
+    transform: rotate(270deg);
+}
+.fa-flip-horizontal {
+    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1);
+    -webkit-transform: scale(-1, 1);
+    -ms-transform: scale(-1, 1);
+    transform: scale(-1, 1);
+}
+.fa-flip-vertical {
+    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);
+    -webkit-transform: scale(1, -1);
+    -ms-transform: scale(1, -1);
+    transform: scale(1, -1);
+}
+:root .fa-rotate-90,
+:root .fa-rotate-180,
+:root .fa-rotate-270,
+:root .fa-flip-horizontal,
+:root .fa-flip-vertical {
+    filter: none;
+}
+.fa-stack {
+    position: relative;
+    display: inline-block;
+    width: 2em;
+    height: 2em;
+    line-height: 2em;
+    vertical-align: middle;
+}
+.fa-stack-1x,
+.fa-stack-2x {
+    position: absolute;
+    left: 0;
+    width: 100%;
+    text-align: center;
+}
+.fa-stack-1x {
+    line-height: inherit;
+}
+.fa-stack-2x {
+    font-size: 2em;
+}
+.fa-inverse {
+    color: #fff;
+}
+/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
+   readers do not read off random characters that represent icons */
+.fa-glass:before {
+    content: '\f000';
+}
+.fa-music:before {
+    content: '\f001';
+}
+.fa-search:before {
+    content: '\f002';
+}
+.fa-envelope-o:before {
+    content: '\f003';
+}
+.fa-heart:before {
+    content: '\f004';
+}
+.fa-star:before {
+    content: '\f005';
+}
+.fa-star-o:before {
+    content: '\f006';
+}
+.fa-user:before {
+    content: '\f007';
+}
+.fa-film:before {
+    content: '\f008';
+}
+.fa-th-large:before {
+    content: '\f009';
+}
+.fa-th:before {
+    content: '\f00a';
+}
+.fa-th-list:before {
+    content: '\f00b';
+}
+.fa-check:before {
+    content: '\f00c';
+}
+.fa-remove:before,
+.fa-close:before,
+.fa-times:before {
+    content: '\f00d';
+}
+.fa-search-plus:before {
+    content: '\f00e';
+}
+.fa-search-minus:before {
+    content: '\f010';
+}
+.fa-power-off:before {
+    content: '\f011';
+}
+.fa-signal:before {
+    content: '\f012';
+}
+.fa-gear:before,
+.fa-cog:before {
+    content: '\f013';
+}
+.fa-trash-o:before {
+    content: '\f014';
+}
+.fa-home:before {
+    content: '\f015';
+}
+.fa-file-o:before {
+    content: '\f016';
+}
+.fa-clock-o:before {
+    content: '\f017';
+}
+.fa-road:before {
+    content: '\f018';
+}
+.fa-download:before {
+    content: '\f019';
+}
+.fa-arrow-circle-o-down:before {
+    content: '\f01a';
+}
+.fa-arrow-circle-o-up:before {
+    content: '\f01b';
+}
+.fa-inbox:before {
+    content: '\f01c';
+}
+.fa-play-circle-o:before {
+    content: '\f01d';
+}
+.fa-rotate-right:before,
+.fa-repeat:before {
+    content: '\f01e';
+}
+.fa-refresh:before {
+    content: '\f021';
+}
+.fa-list-alt:before {
+    content: '\f022';
+}
+.fa-lock:before {
+    content: '\f023';
+}
+.fa-flag:before {
+    content: '\f024';
+}
+.fa-headphones:before {
+    content: '\f025';
+}
+.fa-volume-off:before {
+    content: '\f026';
+}
+.fa-volume-down:before {
+    content: '\f027';
+}
+.fa-volume-up:before {
+    content: '\f028';
+}
+.fa-qrcode:before {
+    content: '\f029';
+}
+.fa-barcode:before {
+    content: '\f02a';
+}
+.fa-tag:before {
+    content: '\f02b';
+}
+.fa-tags:before {
+    content: '\f02c';
+}
+.fa-book:before {
+    content: '\f02d';
+}
+.fa-bookmark:before {
+    content: '\f02e';
+}
+.fa-print:before {
+    content: '\f02f';
+}
+.fa-camera:before {
+    content: '\f030';
+}
+.fa-font:before {
+    content: '\f031';
+}
+.fa-bold:before {
+    content: '\f032';
+}
+.fa-italic:before {
+    content: '\f033';
+}
+.fa-text-height:before {
+    content: '\f034';
+}
+.fa-text-width:before {
+    content: '\f035';
+}
+.fa-align-left:before {
+    content: '\f036';
+}
+.fa-align-center:before {
+    content: '\f037';
+}
+.fa-align-right:before {
+    content: '\f038';
+}
+.fa-align-justify:before {
+    content: '\f039';
+}
+.fa-list:before {
+    content: '\f03a';
+}
+.fa-dedent:before,
+.fa-outdent:before {
+    content: '\f03b';
+}
+.fa-indent:before {
+    content: '\f03c';
+}
+.fa-video-camera:before {
+    content: '\f03d';
+}
+.fa-photo:before,
+.fa-image:before,
+.fa-picture-o:before {
+    content: '\f03e';
+}
+.fa-pencil:before {
+    content: '\f040';
+}
+.fa-map-marker:before {
+    content: '\f041';
+}
+.fa-adjust:before {
+    content: '\f042';
+}
+.fa-tint:before {
+    content: '\f043';
+}
+.fa-edit:before,
+.fa-pencil-square-o:before {
+    content: '\f044';
+}
+.fa-share-square-o:before {
+    content: '\f045';
+}
+.fa-check-square-o:before {
+    content: '\f046';
+}
+.fa-arrows:before {
+    content: '\f047';
+}
+.fa-step-backward:before {
+    content: '\f048';
+}
+.fa-fast-backward:before {
+    content: '\f049';
+}
+.fa-backward:before {
+    content: '\f04a';
+}
+.fa-play:before {
+    content: '\f04b';
+}
+.fa-pause:before {
+    content: '\f04c';
+}
+.fa-stop:before {
+    content: '\f04d';
+}
+.fa-forward:before {
+    content: '\f04e';
+}
+.fa-fast-forward:before {
+    content: '\f050';
+}
+.fa-step-forward:before {
+    content: '\f051';
+}
+.fa-eject:before {
+    content: '\f052';
+}
+.fa-chevron-left:before {
+    content: '\f053';
+}
+.fa-chevron-right:before {
+    content: '\f054';
+}
+.fa-plus-circle:before {
+    content: '\f055';
+}
+.fa-minus-circle:before {
+    content: '\f056';
+}
+.fa-times-circle:before {
+    content: '\f057';
+}
+.fa-check-circle:before {
+    content: '\f058';
+}
+.fa-question-circle:before {
+    content: '\f059';
+}
+.fa-info-circle:before {
+    content: '\f05a';
+}
+.fa-crosshairs:before {
+    content: '\f05b';
+}
+.fa-times-circle-o:before {
+    content: '\f05c';
+}
+.fa-check-circle-o:before {
+    content: '\f05d';
+}
+.fa-ban:before {
+    content: '\f05e';
+}
+.fa-arrow-left:before {
+    content: '\f060';
+}
+.fa-arrow-right:before {
+    content: '\f061';
+}
+.fa-arrow-up:before {
+    content: '\f062';
+}
+.fa-arrow-down:before {
+    content: '\f063';
+}
+.fa-mail-forward:before,
+.fa-share:before {
+    content: '\f064';
+}
+.fa-expand:before {
+    content: '\f065';
+}
+.fa-compress:before {
+    content: '\f066';
+}
+.fa-plus:before {
+    content: '\f067';
+}
+.fa-minus:before {
+    content: '\f068';
+}
+.fa-asterisk:before {
+    content: '\f069';
+}
+.fa-exclamation-circle:before {
+    content: '\f06a';
+}
+.fa-gift:before {
+    content: '\f06b';
+}
+.fa-leaf:before {
+    content: '\f06c';
+}
+.fa-fire:before {
+    content: '\f06d';
+}
+.fa-eye:before {
+    content: '\f06e';
+}
+.fa-eye-slash:before {
+    content: '\f070';
+}
+.fa-warning:before,
+.fa-exclamation-triangle:before {
+    content: '\f071';
+}
+.fa-plane:before {
+    content: '\f072';
+}
+.fa-calendar:before {
+    content: '\f073';
+}
+.fa-random:before {
+    content: '\f074';
+}
+.fa-comment:before {
+    content: '\f075';
+}
+.fa-magnet:before {
+    content: '\f076';
+}
+.fa-chevron-up:before {
+    content: '\f077';
+}
+.fa-chevron-down:before {
+    content: '\f078';
+}
+.fa-retweet:before {
+    content: '\f079';
+}
+.fa-shopping-cart:before {
+    content: '\f07a';
+}
+.fa-folder:before {
+    content: '\f07b';
+}
+.fa-folder-open:before {
+    content: '\f07c';
+}
+.fa-arrows-v:before {
+    content: '\f07d';
+}
+.fa-arrows-h:before {
+    content: '\f07e';
+}
+.fa-bar-chart-o:before,
+.fa-bar-chart:before {
+    content: '\f080';
+}
+.fa-twitter-square:before {
+    content: '\f081';
+}
+.fa-facebook-square:before {
+    content: '\f082';
+}
+.fa-camera-retro:before {
+    content: '\f083';
+}
+.fa-key:before {
+    content: '\f084';
+}
+.fa-gears:before,
+.fa-cogs:before {
+    content: '\f085';
+}
+.fa-comments:before {
+    content: '\f086';
+}
+.fa-thumbs-o-up:before {
+    content: '\f087';
+}
+.fa-thumbs-o-down:before {
+    content: '\f088';
+}
+.fa-star-half:before {
+    content: '\f089';
+}
+.fa-heart-o:before {
+    content: '\f08a';
+}
+.fa-sign-out:before {
+    content: '\f08b';
+}
+.fa-linkedin-square:before {
+    content: '\f08c';
+}
+.fa-thumb-tack:before {
+    content: '\f08d';
+}
+.fa-external-link:before {
+    content: '\f08e';
+}
+.fa-sign-in:before {
+    content: '\f090';
+}
+.fa-trophy:before {
+    content: '\f091';
+}
+.fa-github-square:before {
+    content: '\f092';
+}
+.fa-upload:before {
+    content: '\f093';
+}
+.fa-lemon-o:before {
+    content: '\f094';
+}
+.fa-phone:before {
+    content: '\f095';
+}
+.fa-square-o:before {
+    content: '\f096';
+}
+.fa-bookmark-o:before {
+    content: '\f097';
+}
+.fa-phone-square:before {
+    content: '\f098';
+}
+.fa-twitter:before {
+    content: '\f099';
+}
+.fa-facebook-f:before,
+.fa-facebook:before {
+    content: '\f09a';
+}
+.fa-github:before {
+    content: '\f09b';
+}
+.fa-unlock:before {
+    content: '\f09c';
+}
+.fa-credit-card:before {
+    content: '\f09d';
+}
+.fa-rss:before {
+    content: '\f09e';
+}
+.fa-hdd-o:before {
+    content: '\f0a0';
+}
+.fa-bullhorn:before {
+    content: '\f0a1';
+}
+.fa-bell:before {
+    content: '\f0f3';
+}
+.fa-certificate:before {
+    content: '\f0a3';
+}
+.fa-hand-o-right:before {
+    content: '\f0a4';
+}
+.fa-hand-o-left:before {
+    content: '\f0a5';
+}
+.fa-hand-o-up:before {
+    content: '\f0a6';
+}
+.fa-hand-o-down:before {
+    content: '\f0a7';
+}
+.fa-arrow-circle-left:before {
+    content: '\f0a8';
+}
+.fa-arrow-circle-right:before {
+    content: '\f0a9';
+}
+.fa-arrow-circle-up:before {
+    content: '\f0aa';
+}
+.fa-arrow-circle-down:before {
+    content: '\f0ab';
+}
+.fa-globe:before {
+    content: '\f0ac';
+}
+.fa-wrench:before {
+    content: '\f0ad';
+}
+.fa-tasks:before {
+    content: '\f0ae';
+}
+.fa-filter:before {
+    content: '\f0b0';
+}
+.fa-briefcase:before {
+    content: '\f0b1';
+}
+.fa-arrows-alt:before {
+    content: '\f0b2';
+}
+.fa-group:before,
+.fa-users:before {
+    content: '\f0c0';
+}
+.fa-chain:before,
+.fa-link:before {
+    content: '\f0c1';
+}
+.fa-cloud:before {
+    content: '\f0c2';
+}
+.fa-flask:before {
+    content: '\f0c3';
+}
+.fa-cut:before,
+.fa-scissors:before {
+    content: '\f0c4';
+}
+.fa-copy:before,
+.fa-files-o:before {
+    content: '\f0c5';
+}
+.fa-paperclip:before {
+    content: '\f0c6';
+}
+.fa-save:before,
+.fa-floppy-o:before {
+    content: '\f0c7';
+}
+.fa-square:before {
+    content: '\f0c8';
+}
+.fa-navicon:before,
+.fa-reorder:before,
+.fa-bars:before {
+    content: '\f0c9';
+}
+.fa-list-ul:before {
+    content: '\f0ca';
+}
+.fa-list-ol:before {
+    content: '\f0cb';
+}
+.fa-strikethrough:before {
+    content: '\f0cc';
+}
+.fa-underline:before {
+    content: '\f0cd';
+}
+.fa-table:before {
+    content: '\f0ce';
+}
+.fa-magic:before {
+    content: '\f0d0';
+}
+.fa-truck:before {
+    content: '\f0d1';
+}
+.fa-pinterest:before {
+    content: '\f0d2';
+}
+.fa-pinterest-square:before {
+    content: '\f0d3';
+}
+.fa-google-plus-square:before {
+    content: '\f0d4';
+}
+.fa-google-plus:before {
+    content: '\f0d5';
+}
+.fa-money:before {
+    content: '\f0d6';
+}
+.fa-caret-down:before {
+    content: '\f0d7';
+}
+.fa-caret-up:before {
+    content: '\f0d8';
+}
+.fa-caret-left:before {
+    content: '\f0d9';
+}
+.fa-caret-right:before {
+    content: '\f0da';
+}
+.fa-columns:before {
+    content: '\f0db';
+}
+.fa-unsorted:before,
+.fa-sort:before {
+    content: '\f0dc';
+}
+.fa-sort-down:before,
+.fa-sort-desc:before {
+    content: '\f0dd';
+}
+.fa-sort-up:before,
+.fa-sort-asc:before {
+    content: '\f0de';
+}
+.fa-envelope:before {
+    content: '\f0e0';
+}
+.fa-linkedin:before {
+    content: '\f0e1';
+}
+.fa-rotate-left:before,
+.fa-undo:before {
+    content: '\f0e2';
+}
+.fa-legal:before,
+.fa-gavel:before {
+    content: '\f0e3';
+}
+.fa-dashboard:before,
+.fa-tachometer:before {
+    content: '\f0e4';
+}
+.fa-comment-o:before {
+    content: '\f0e5';
+}
+.fa-comments-o:before {
+    content: '\f0e6';
+}
+.fa-flash:before,
+.fa-bolt:before {
+    content: '\f0e7';
+}
+.fa-sitemap:before {
+    content: '\f0e8';
+}
+.fa-umbrella:before {
+    content: '\f0e9';
+}
+.fa-paste:before,
+.fa-clipboard:before {
+    content: '\f0ea';
+}
+.fa-lightbulb-o:before {
+    content: '\f0eb';
+}
+.fa-exchange:before {
+    content: '\f0ec';
+}
+.fa-cloud-download:before {
+    content: '\f0ed';
+}
+.fa-cloud-upload:before {
+    content: '\f0ee';
+}
+.fa-user-md:before {
+    content: '\f0f0';
+}
+.fa-stethoscope:before {
+    content: '\f0f1';
+}
+.fa-suitcase:before {
+    content: '\f0f2';
+}
+.fa-bell-o:before {
+    content: '\f0a2';
+}
+.fa-coffee:before {
+    content: '\f0f4';
+}
+.fa-cutlery:before {
+    content: '\f0f5';
+}
+.fa-file-text-o:before {
+    content: '\f0f6';
+}
+.fa-building-o:before {
+    content: '\f0f7';
+}
+.fa-hospital-o:before {
+    content: '\f0f8';
+}
+.fa-ambulance:before {
+    content: '\f0f9';
+}
+.fa-medkit:before {
+    content: '\f0fa';
+}
+.fa-fighter-jet:before {
+    content: '\f0fb';
+}
+.fa-beer:before {
+    content: '\f0fc';
+}
+.fa-h-square:before {
+    content: '\f0fd';
+}
+.fa-plus-square:before {
+    content: '\f0fe';
+}
+.fa-angle-double-left:before {
+    content: '\f100';
+}
+.fa-angle-double-right:before {
+    content: '\f101';
+}
+.fa-angle-double-up:before {
+    content: '\f102';
+}
+.fa-angle-double-down:before {
+    content: '\f103';
+}
+.fa-angle-left:before {
+    content: '\f104';
+}
+.fa-angle-right:before {
+    content: '\f105';
+}
+.fa-angle-up:before {
+    content: '\f106';
+}
+.fa-angle-down:before {
+    content: '\f107';
+}
+.fa-desktop:before {
+    content: '\f108';
+}
+.fa-laptop:before {
+    content: '\f109';
+}
+.fa-tablet:before {
+    content: '\f10a';
+}
+.fa-mobile-phone:before,
+.fa-mobile:before {
+    content: '\f10b';
+}
+.fa-circle-o:before {
+    content: '\f10c';
+}
+.fa-quote-left:before {
+    content: '\f10d';
+}
+.fa-quote-right:before {
+    content: '\f10e';
+}
+.fa-spinner:before {
+    content: '\f110';
+}
+.fa-circle:before {
+    content: '\f111';
+}
+.fa-mail-reply:before,
+.fa-reply:before {
+    content: '\f112';
+}
+.fa-github-alt:before {
+    content: '\f113';
+}
+.fa-folder-o:before {
+    content: '\f114';
+}
+.fa-folder-open-o:before {
+    content: '\f115';
+}
+.fa-smile-o:before {
+    content: '\f118';
+}
+.fa-frown-o:before {
+    content: '\f119';
+}
+.fa-meh-o:before {
+    content: '\f11a';
+}
+.fa-gamepad:before {
+    content: '\f11b';
+}
+.fa-keyboard-o:before {
+    content: '\f11c';
+}
+.fa-flag-o:before {
+    content: '\f11d';
+}
+.fa-flag-checkered:before {
+    content: '\f11e';
+}
+.fa-terminal:before {
+    content: '\f120';
+}
+.fa-code:before {
+    content: '\f121';
+}
+.fa-mail-reply-all:before,
+.fa-reply-all:before {
+    content: '\f122';
+}
+.fa-star-half-empty:before,
+.fa-star-half-full:before,
+.fa-star-half-o:before {
+    content: '\f123';
+}
+.fa-location-arrow:before {
+    content: '\f124';
+}
+.fa-crop:before {
+    content: '\f125';
+}
+.fa-code-fork:before {
+    content: '\f126';
+}
+.fa-unlink:before,
+.fa-chain-broken:before {
+    content: '\f127';
+}
+.fa-question:before {
+    content: '\f128';
+}
+.fa-info:before {
+    content: '\f129';
+}
+.fa-exclamation:before {
+    content: '\f12a';
+}
+.fa-superscript:before {
+    content: '\f12b';
+}
+.fa-subscript:before {
+    content: '\f12c';
+}
+.fa-eraser:before {
+    content: '\f12d';
+}
+.fa-puzzle-piece:before {
+    content: '\f12e';
+}
+.fa-microphone:before {
+    content: '\f130';
+}
+.fa-microphone-slash:before {
+    content: '\f131';
+}
+.fa-shield:before {
+    content: '\f132';
+}
+.fa-calendar-o:before {
+    content: '\f133';
+}
+.fa-fire-extinguisher:before {
+    content: '\f134';
+}
+.fa-rocket:before {
+    content: '\f135';
+}
+.fa-maxcdn:before {
+    content: '\f136';
+}
+.fa-chevron-circle-left:before {
+    content: '\f137';
+}
+.fa-chevron-circle-right:before {
+    content: '\f138';
+}
+.fa-chevron-circle-up:before {
+    content: '\f139';
+}
+.fa-chevron-circle-down:before {
+    content: '\f13a';
+}
+.fa-html5:before {
+    content: '\f13b';
+}
+.fa-css3:before {
+    content: '\f13c';
+}
+.fa-anchor:before {
+    content: '\f13d';
+}
+.fa-unlock-alt:before {
+    content: '\f13e';
+}
+.fa-bullseye:before {
+    content: '\f140';
+}
+.fa-ellipsis-h:before {
+    content: '\f141';
+}
+.fa-ellipsis-v:before {
+    content: '\f142';
+}
+.fa-rss-square:before {
+    content: '\f143';
+}
+.fa-play-circle:before {
+    content: '\f144';
+}
+.fa-ticket:before {
+    content: '\f145';
+}
+.fa-minus-square:before {
+    content: '\f146';
+}
+.fa-minus-square-o:before {
+    content: '\f147';
+}
+.fa-level-up:before {
+    content: '\f148';
+}
+.fa-level-down:before {
+    content: '\f149';
+}
+.fa-check-square:before {
+    content: '\f14a';
+}
+.fa-pencil-square:before {
+    content: '\f14b';
+}
+.fa-external-link-square:before {
+    content: '\f14c';
+}
+.fa-share-square:before {
+    content: '\f14d';
+}
+.fa-compass:before {
+    content: '\f14e';
+}
+.fa-toggle-down:before,
+.fa-caret-square-o-down:before {
+    content: '\f150';
+}
+.fa-toggle-up:before,
+.fa-caret-square-o-up:before {
+    content: '\f151';
+}
+.fa-toggle-right:before,
+.fa-caret-square-o-right:before {
+    content: '\f152';
+}
+.fa-euro:before,
+.fa-eur:before {
+    content: '\f153';
+}
+.fa-gbp:before {
+    content: '\f154';
+}
+.fa-dollar:before,
+.fa-usd:before {
+    content: '\f155';
+}
+.fa-rupee:before,
+.fa-inr:before {
+    content: '\f156';
+}
+.fa-cny:before,
+.fa-rmb:before,
+.fa-yen:before,
+.fa-jpy:before {
+    content: '\f157';
+}
+.fa-ruble:before,
+.fa-rouble:before,
+.fa-rub:before {
+    content: '\f158';
+}
+.fa-won:before,
+.fa-krw:before {
+    content: '\f159';
+}
+.fa-bitcoin:before,
+.fa-btc:before {
+    content: '\f15a';
+}
+.fa-file:before {
+    content: '\f15b';
+}
+.fa-file-text:before {
+    content: '\f15c';
+}
+.fa-sort-alpha-asc:before {
+    content: '\f15d';
+}
+.fa-sort-alpha-desc:before {
+    content: '\f15e';
+}
+.fa-sort-amount-asc:before {
+    content: '\f160';
+}
+.fa-sort-amount-desc:before {
+    content: '\f161';
+}
+.fa-sort-numeric-asc:before {
+    content: '\f162';
+}
+.fa-sort-numeric-desc:before {
+    content: '\f163';
+}
+.fa-thumbs-up:before {
+    content: '\f164';
+}
+.fa-thumbs-down:before {
+    content: '\f165';
+}
+.fa-youtube-square:before {
+    content: '\f166';
+}
+.fa-youtube:before {
+    content: '\f167';
+}
+.fa-xing:before {
+    content: '\f168';
+}
+.fa-xing-square:before {
+    content: '\f169';
+}
+.fa-youtube-play:before {
+    content: '\f16a';
+}
+.fa-dropbox:before {
+    content: '\f16b';
+}
+.fa-stack-overflow:before {
+    content: '\f16c';
+}
+.fa-instagram:before {
+    content: '\f16d';
+}
+.fa-flickr:before {
+    content: '\f16e';
+}
+.fa-adn:before {
+    content: '\f170';
+}
+.fa-bitbucket:before {
+    content: '\f171';
+}
+.fa-bitbucket-square:before {
+    content: '\f172';
+}
+.fa-tumblr:before {
+    content: '\f173';
+}
+.fa-tumblr-square:before {
+    content: '\f174';
+}
+.fa-long-arrow-down:before {
+    content: '\f175';
+}
+.fa-long-arrow-up:before {
+    content: '\f176';
+}
+.fa-long-arrow-left:before {
+    content: '\f177';
+}
+.fa-long-arrow-right:before {
+    content: '\f178';
+}
+.fa-apple:before {
+    content: '\f179';
+}
+.fa-windows:before {
+    content: '\f17a';
+}
+.fa-android:before {
+    content: '\f17b';
+}
+.fa-linux:before {
+    content: '\f17c';
+}
+.fa-dribbble:before {
+    content: '\f17d';
+}
+.fa-skype:before {
+    content: '\f17e';
+}
+.fa-foursquare:before {
+    content: '\f180';
+}
+.fa-trello:before {
+    content: '\f181';
+}
+.fa-female:before {
+    content: '\f182';
+}
+.fa-male:before {
+    content: '\f183';
+}
+.fa-gittip:before,
+.fa-gratipay:before {
+    content: '\f184';
+}
+.fa-sun-o:before {
+    content: '\f185';
+}
+.fa-moon-o:before {
+    content: '\f186';
+}
+.fa-archive:before {
+    content: '\f187';
+}
+.fa-bug:before {
+    content: '\f188';
+}
+.fa-vk:before {
+    content: '\f189';
+}
+.fa-weibo:before {
+    content: '\f18a';
+}
+.fa-renren:before {
+    content: '\f18b';
+}
+.fa-pagelines:before {
+    content: '\f18c';
+}
+.fa-stack-exchange:before {
+    content: '\f18d';
+}
+.fa-arrow-circle-o-right:before {
+    content: '\f18e';
+}
+.fa-arrow-circle-o-left:before {
+    content: '\f190';
+}
+.fa-toggle-left:before,
+.fa-caret-square-o-left:before {
+    content: '\f191';
+}
+.fa-dot-circle-o:before {
+    content: '\f192';
+}
+.fa-wheelchair:before {
+    content: '\f193';
+}
+.fa-vimeo-square:before {
+    content: '\f194';
+}
+.fa-turkish-lira:before,
+.fa-try:before {
+    content: '\f195';
+}
+.fa-plus-square-o:before {
+    content: '\f196';
+}
+.fa-space-shuttle:before {
+    content: '\f197';
+}
+.fa-slack:before {
+    content: '\f198';
+}
+.fa-envelope-square:before {
+    content: '\f199';
+}
+.fa-wordpress:before {
+    content: '\f19a';
+}
+.fa-openid:before {
+    content: '\f19b';
+}
+.fa-institution:before,
+.fa-bank:before,
+.fa-university:before {
+    content: '\f19c';
+}
+.fa-mortar-board:before,
+.fa-graduation-cap:before {
+    content: '\f19d';
+}
+.fa-yahoo:before {
+    content: '\f19e';
+}
+.fa-google:before {
+    content: '\f1a0';
+}
+.fa-reddit:before {
+    content: '\f1a1';
+}
+.fa-reddit-square:before {
+    content: '\f1a2';
+}
+.fa-stumbleupon-circle:before {
+    content: '\f1a3';
+}
+.fa-stumbleupon:before {
+    content: '\f1a4';
+}
+.fa-delicious:before {
+    content: '\f1a5';
+}
+.fa-digg:before {
+    content: '\f1a6';
+}
+.fa-pied-piper:before {
+    content: '\f1a7';
+}
+.fa-pied-piper-alt:before {
+    content: '\f1a8';
+}
+.fa-drupal:before {
+    content: '\f1a9';
+}
+.fa-joomla:before {
+    content: '\f1aa';
+}
+.fa-language:before {
+    content: '\f1ab';
+}
+.fa-fax:before {
+    content: '\f1ac';
+}
+.fa-building:before {
+    content: '\f1ad';
+}
+.fa-child:before {
+    content: '\f1ae';
+}
+.fa-paw:before {
+    content: '\f1b0';
+}
+.fa-spoon:before {
+    content: '\f1b1';
+}
+.fa-cube:before {
+    content: '\f1b2';
+}
+.fa-cubes:before {
+    content: '\f1b3';
+}
+.fa-behance:before {
+    content: '\f1b4';
+}
+.fa-behance-square:before {
+    content: '\f1b5';
+}
+.fa-steam:before {
+    content: '\f1b6';
+}
+.fa-steam-square:before {
+    content: '\f1b7';
+}
+.fa-recycle:before {
+    content: '\f1b8';
+}
+.fa-automobile:before,
+.fa-car:before {
+    content: '\f1b9';
+}
+.fa-cab:before,
+.fa-taxi:before {
+    content: '\f1ba';
+}
+.fa-tree:before {
+    content: '\f1bb';
+}
+.fa-spotify:before {
+    content: '\f1bc';
+}
+.fa-deviantart:before {
+    content: '\f1bd';
+}
+.fa-soundcloud:before {
+    content: '\f1be';
+}
+.fa-database:before {
+    content: '\f1c0';
+}
+.fa-file-pdf-o:before {
+    content: '\f1c1';
+}
+.fa-file-word-o:before {
+    content: '\f1c2';
+}
+.fa-file-excel-o:before {
+    content: '\f1c3';
+}
+.fa-file-powerpoint-o:before {
+    content: '\f1c4';
+}
+.fa-file-photo-o:before,
+.fa-file-picture-o:before,
+.fa-file-image-o:before {
+    content: '\f1c5';
+}
+.fa-file-zip-o:before,
+.fa-file-archive-o:before {
+    content: '\f1c6';
+}
+.fa-file-sound-o:before,
+.fa-file-audio-o:before {
+    content: '\f1c7';
+}
+.fa-file-movie-o:before,
+.fa-file-video-o:before {
+    content: '\f1c8';
+}
+.fa-file-code-o:before {
+    content: '\f1c9';
+}
+.fa-vine:before {
+    content: '\f1ca';
+}
+.fa-codepen:before {
+    content: '\f1cb';
+}
+.fa-jsfiddle:before {
+    content: '\f1cc';
+}
+.fa-life-bouy:before,
+.fa-life-buoy:before,
+.fa-life-saver:before,
+.fa-support:before,
+.fa-life-ring:before {
+    content: '\f1cd';
+}
+.fa-circle-o-notch:before {
+    content: '\f1ce';
+}
+.fa-ra:before,
+.fa-rebel:before {
+    content: '\f1d0';
+}
+.fa-ge:before,
+.fa-empire:before {
+    content: '\f1d1';
+}
+.fa-git-square:before {
+    content: '\f1d2';
+}
+.fa-git:before {
+    content: '\f1d3';
+}
+.fa-hacker-news:before {
+    content: '\f1d4';
+}
+.fa-tencent-weibo:before {
+    content: '\f1d5';
+}
+.fa-qq:before {
+    content: '\f1d6';
+}
+.fa-wechat:before,
+.fa-weixin:before {
+    content: '\f1d7';
+}
+.fa-send:before,
+.fa-paper-plane:before {
+    content: '\f1d8';
+}
+.fa-send-o:before,
+.fa-paper-plane-o:before {
+    content: '\f1d9';
+}
+.fa-history:before {
+    content: '\f1da';
+}
+.fa-genderless:before,
+.fa-circle-thin:before {
+    content: '\f1db';
+}
+.fa-header:before {
+    content: '\f1dc';
+}
+.fa-paragraph:before {
+    content: '\f1dd';
+}
+.fa-sliders:before {
+    content: '\f1de';
+}
+.fa-share-alt:before {
+    content: '\f1e0';
+}
+.fa-share-alt-square:before {
+    content: '\f1e1';
+}
+.fa-bomb:before {
+    content: '\f1e2';
+}
+.fa-soccer-ball-o:before,
+.fa-futbol-o:before {
+    content: '\f1e3';
+}
+.fa-tty:before {
+    content: '\f1e4';
+}
+.fa-binoculars:before {
+    content: '\f1e5';
+}
+.fa-plug:before {
+    content: '\f1e6';
+}
+.fa-slideshare:before {
+    content: '\f1e7';
+}
+.fa-twitch:before {
+    content: '\f1e8';
+}
+.fa-yelp:before {
+    content: '\f1e9';
+}
+.fa-newspaper-o:before {
+    content: '\f1ea';
+}
+.fa-wifi:before {
+    content: '\f1eb';
+}
+.fa-calculator:before {
+    content: '\f1ec';
+}
+.fa-paypal:before {
+    content: '\f1ed';
+}
+.fa-google-wallet:before {
+    content: '\f1ee';
+}
+.fa-cc-visa:before {
+    content: '\f1f0';
+}
+.fa-cc-mastercard:before {
+    content: '\f1f1';
+}
+.fa-cc-discover:before {
+    content: '\f1f2';
+}
+.fa-cc-amex:before {
+    content: '\f1f3';
+}
+.fa-cc-paypal:before {
+    content: '\f1f4';
+}
+.fa-cc-stripe:before {
+    content: '\f1f5';
+}
+.fa-bell-slash:before {
+    content: '\f1f6';
+}
+.fa-bell-slash-o:before {
+    content: '\f1f7';
+}
+.fa-trash:before {
+    content: '\f1f8';
+}
+.fa-copyright:before {
+    content: '\f1f9';
+}
+.fa-at:before {
+    content: '\f1fa';
+}
+.fa-eyedropper:before {
+    content: '\f1fb';
+}
+.fa-paint-brush:before {
+    content: '\f1fc';
+}
+.fa-birthday-cake:before {
+    content: '\f1fd';
+}
+.fa-area-chart:before {
+    content: '\f1fe';
+}
+.fa-pie-chart:before {
+    content: '\f200';
+}
+.fa-line-chart:before {
+    content: '\f201';
+}
+.fa-lastfm:before {
+    content: '\f202';
+}
+.fa-lastfm-square:before {
+    content: '\f203';
+}
+.fa-toggle-off:before {
+    content: '\f204';
+}
+.fa-toggle-on:before {
+    content: '\f205';
+}
+.fa-bicycle:before {
+    content: '\f206';
+}
+.fa-bus:before {
+    content: '\f207';
+}
+.fa-ioxhost:before {
+    content: '\f208';
+}
+.fa-angellist:before {
+    content: '\f209';
+}
+.fa-cc:before {
+    content: '\f20a';
+}
+.fa-shekel:before,
+.fa-sheqel:before,
+.fa-ils:before {
+    content: '\f20b';
+}
+.fa-meanpath:before {
+    content: '\f20c';
+}
+.fa-buysellads:before {
+    content: '\f20d';
+}
+.fa-connectdevelop:before {
+    content: '\f20e';
+}
+.fa-dashcube:before {
+    content: '\f210';
+}
+.fa-forumbee:before {
+    content: '\f211';
+}
+.fa-leanpub:before {
+    content: '\f212';
+}
+.fa-sellsy:before {
+    content: '\f213';
+}
+.fa-shirtsinbulk:before {
+    content: '\f214';
+}
+.fa-simplybuilt:before {
+    content: '\f215';
+}
+.fa-skyatlas:before {
+    content: '\f216';
+}
+.fa-cart-plus:before {
+    content: '\f217';
+}
+.fa-cart-arrow-down:before {
+    content: '\f218';
+}
+.fa-diamond:before {
+    content: '\f219';
+}
+.fa-ship:before {
+    content: '\f21a';
+}
+.fa-user-secret:before {
+    content: '\f21b';
+}
+.fa-motorcycle:before {
+    content: '\f21c';
+}
+.fa-street-view:before {
+    content: '\f21d';
+}
+.fa-heartbeat:before {
+    content: '\f21e';
+}
+.fa-venus:before {
+    content: '\f221';
+}
+.fa-mars:before {
+    content: '\f222';
+}
+.fa-mercury:before {
+    content: '\f223';
+}
+.fa-transgender:before {
+    content: '\f224';
+}
+.fa-transgender-alt:before {
+    content: '\f225';
+}
+.fa-venus-double:before {
+    content: '\f226';
+}
+.fa-mars-double:before {
+    content: '\f227';
+}
+.fa-venus-mars:before {
+    content: '\f228';
+}
+.fa-mars-stroke:before {
+    content: '\f229';
+}
+.fa-mars-stroke-v:before {
+    content: '\f22a';
+}
+.fa-mars-stroke-h:before {
+    content: '\f22b';
+}
+.fa-neuter:before {
+    content: '\f22c';
+}
+.fa-facebook-official:before {
+    content: '\f230';
+}
+.fa-pinterest-p:before {
+    content: '\f231';
+}
+.fa-whatsapp:before {
+    content: '\f232';
+}
+.fa-server:before {
+    content: '\f233';
+}
+.fa-user-plus:before {
+    content: '\f234';
+}
+.fa-user-times:before {
+    content: '\f235';
+}
+.fa-hotel:before,
+.fa-bed:before {
+    content: '\f236';
+}
+.fa-viacoin:before {
+    content: '\f237';
+}
+.fa-train:before {
+    content: '\f238';
+}
+.fa-subway:before {
+    content: '\f239';
+}
+.fa-medium:before {
+    content: '\f23a';
+}
diff --git a/web/sass-files/sass/vendors/_module.scss b/web/sass-files/sass/vendors/_module.scss
new file mode 100644
index 000000000..ed8a124a2
--- /dev/null
+++ b/web/sass-files/sass/vendors/_module.scss
@@ -0,0 +1,4 @@
+// Only for combining all the files in this folder
+@import 'perfect-scrollbar';
+@import 'font-awesome';
+@import 'colorpicker';
diff --git a/web/sass-files/sass/vendors/_perfect-scrollbar.scss b/web/sass-files/sass/vendors/_perfect-scrollbar.scss
new file mode 100755
index 000000000..212a22687
--- /dev/null
+++ b/web/sass-files/sass/vendors/_perfect-scrollbar.scss
@@ -0,0 +1,141 @@
+@charset 'UTF-8';
+
+.ps-container {
+    overflow: hidden !important;
+}
+.ps-container.ps-active-x > .ps-scrollbar-x-rail,
+.ps-container.ps-active-y > .ps-scrollbar-y-rail {
+    display: block;
+}
+
+.ps-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail {
+    background-color: #eee;
+    opacity: .9;
+    -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=90)';
+    filter: alpha(opacity=90);
+}
+.ps-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x {
+    background-color: #999;
+}
+.ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail {
+    background-color: #eee;
+    opacity: .9;
+    -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=90)';
+    filter: alpha(opacity=90);
+}
+.ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y {
+    background-color: #999;
+}
+.ps-container > .ps-scrollbar-x-rail {
+    display: none;
+    position: absolute;
+    /* please don't change 'position' */
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    -ms-border-radius: 4px;
+    border-radius: 4px;
+    opacity: 0;
+    -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';
+    filter: alpha(opacity=0);
+    -webkit-transition: background-color .2s linear, opacity .2s linear;
+    -moz-transition: background-color .2s linear, opacity .2s linear;
+    -o-transition: background-color .2s linear, opacity .2s linear;
+    transition: background-color .2s linear, opacity .2s linear;
+    bottom: 3px;
+    /* there must be 'bottom' for ps-scrollbar-x-rail */
+    height: 8px;
+}
+.ps-container > .ps-scrollbar-x-rail > .ps-scrollbar-x {
+    position: absolute;
+    /* please don't change 'position' */
+    background-color: #aaa;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    -ms-border-radius: 4px;
+    border-radius: 4px;
+    -webkit-transition: background-color .2s linear;
+    -moz-transition: background-color .2s linear;
+    -o-transition: background-color .2s linear;
+    transition: background-color .2s linear;
+    bottom: 0;
+    /* there must be 'bottom' for ps-scrollbar-x */
+    height: 8px;
+}
+.ps-container > .ps-scrollbar-y-rail {
+    display: none;
+    position: absolute;
+    /* please don't change 'position' */
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    -ms-border-radius: 4px;
+    border-radius: 4px;
+    opacity: 0;
+    -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';
+    filter: alpha(opacity=0);
+    -webkit-transition: background-color .2s linear, opacity .2s linear;
+    -moz-transition: background-color .2s linear, opacity .2s linear;
+    -o-transition: background-color .2s linear, opacity .2s linear;
+    transition: background-color .2s linear, opacity .2s linear;
+    right: 3px;
+    /* there must be 'right' for ps-scrollbar-y-rail */
+    width: 8px;
+}
+.ps-container > .ps-scrollbar-y-rail > .ps-scrollbar-y {
+    position: absolute;
+    /* please don't change 'position' */
+    background-color: #aaa;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    -ms-border-radius: 4px;
+    border-radius: 4px;
+    -webkit-transition: background-color .2s linear;
+    -moz-transition: background-color .2s linear;
+    -o-transition: background-color .2s linear;
+    transition: background-color .2s linear;
+    right: 0;
+    /* there must be 'right' for ps-scrollbar-y */
+    width: 8px;
+}
+
+.ps-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail {
+    background-color: #eee;
+    opacity: .9;
+    -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=90)';
+    filter: alpha(opacity=90);
+}
+.ps-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x {
+    background-color: #999;
+}
+.ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail {
+    background-color: #eee;
+    opacity: .9;
+    -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=90)';
+    filter: alpha(opacity=90);
+}
+.ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y {
+    background-color: #999;
+}
+.ps-container:hover > .ps-scrollbar-x-rail,
+.ps-container:hover > .ps-scrollbar-y-rail {
+    opacity: .6;
+    -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=60)';
+    filter: alpha(opacity=60);
+}
+.ps-container:hover > .ps-scrollbar-x-rail:hover {
+    background-color: #eee;
+    opacity: .9;
+    -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=90)';
+    filter: alpha(opacity=90);
+}
+.ps-container:hover > .ps-scrollbar-x-rail:hover > .ps-scrollbar-x {
+    background-color: #999;
+}
+.ps-container:hover > .ps-scrollbar-y-rail:hover {
+    background-color: #eee;
+    opacity: .9;
+    -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=90)';
+    filter: alpha(opacity=90);
+}
+.ps-container:hover > .ps-scrollbar-y-rail:hover > .ps-scrollbar-y {
+    background-color: #999;
+}
-- 
cgit v1.2.3-1-g7c22