From cf7a05f80f68b5b1c8bcc0089679dd497cec2506 Mon Sep 17 00:00:00 2001
From: =Corey Hulen <corey@hulen.com>
Date: Sun, 14 Jun 2015 23:53:32 -0800
Subject: first commit

---
 web/sass-files/sass/partials/_base.scss            |  154 ++
 web/sass-files/sass/partials/_content.scss         |   63 +
 web/sass-files/sass/partials/_error.scss           |   29 +
 web/sass-files/sass/partials/_files.scss           |  144 ++
 web/sass-files/sass/partials/_font-awesome.scss    | 1801 ++++++++++++++++++++
 web/sass-files/sass/partials/_footer.scss          |   23 +
 web/sass-files/sass/partials/_headers.scss         |  215 +++
 web/sass-files/sass/partials/_mentions.scss        |   55 +
 web/sass-files/sass/partials/_modal.scss           |  248 +++
 web/sass-files/sass/partials/_navbar.scss          |  101 ++
 .../sass/partials/_perfect-scrollbar.scss          |  120 ++
 web/sass-files/sass/partials/_post.scss            |  380 +++++
 web/sass-files/sass/partials/_post_right.scss      |   77 +
 web/sass-files/sass/partials/_responsive.scss      |  637 +++++++
 web/sass-files/sass/partials/_search.scss          |   95 ++
 web/sass-files/sass/partials/_settings.scss        |  222 +++
 web/sass-files/sass/partials/_sidebar--left.scss   |   95 ++
 web/sass-files/sass/partials/_sidebar--menu.scss   |   66 +
 web/sass-files/sass/partials/_sidebar--right.scss  |   83 +
 web/sass-files/sass/partials/_signup.scss          |  115 ++
 web/sass-files/sass/partials/_variables.scss       |   16 +
 web/sass-files/sass/partials/_videos.scss          |   59 +
 web/sass-files/sass/partials/_welcome.scss         |   13 +
 web/sass-files/sass/styles.scss                    |   34 +
 24 files changed, 4845 insertions(+)
 create mode 100644 web/sass-files/sass/partials/_base.scss
 create mode 100644 web/sass-files/sass/partials/_content.scss
 create mode 100644 web/sass-files/sass/partials/_error.scss
 create mode 100644 web/sass-files/sass/partials/_files.scss
 create mode 100644 web/sass-files/sass/partials/_font-awesome.scss
 create mode 100644 web/sass-files/sass/partials/_footer.scss
 create mode 100644 web/sass-files/sass/partials/_headers.scss
 create mode 100644 web/sass-files/sass/partials/_mentions.scss
 create mode 100644 web/sass-files/sass/partials/_modal.scss
 create mode 100644 web/sass-files/sass/partials/_navbar.scss
 create mode 100755 web/sass-files/sass/partials/_perfect-scrollbar.scss
 create mode 100644 web/sass-files/sass/partials/_post.scss
 create mode 100644 web/sass-files/sass/partials/_post_right.scss
 create mode 100644 web/sass-files/sass/partials/_responsive.scss
 create mode 100644 web/sass-files/sass/partials/_search.scss
 create mode 100644 web/sass-files/sass/partials/_settings.scss
 create mode 100644 web/sass-files/sass/partials/_sidebar--left.scss
 create mode 100644 web/sass-files/sass/partials/_sidebar--menu.scss
 create mode 100644 web/sass-files/sass/partials/_sidebar--right.scss
 create mode 100644 web/sass-files/sass/partials/_signup.scss
 create mode 100644 web/sass-files/sass/partials/_variables.scss
 create mode 100644 web/sass-files/sass/partials/_videos.scss
 create mode 100644 web/sass-files/sass/partials/_welcome.scss
 create mode 100644 web/sass-files/sass/styles.scss

(limited to 'web/sass-files/sass')

diff --git a/web/sass-files/sass/partials/_base.scss b/web/sass-files/sass/partials/_base.scss
new file mode 100644
index 000000000..5808aeb44
--- /dev/null
+++ b/web/sass-files/sass/partials/_base.scss
@@ -0,0 +1,154 @@
+html, body {
+  height: 100%;
+}
+
+body {
+  font-family: 'Lato', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  background: #e9e9e9;
+  position: relative;
+  height: 100%;
+  &.white {
+    background: #fff;
+    .inner__wrap {
+      height: 100%;
+    }
+    .row.content {
+      min-height: 100%;
+      height: auto !important;
+      height: 100%;
+      margin-bottom: -89px;
+    }
+  }
+  > .container-fluid {
+    @include clearfix;
+    position: relative;
+  }
+}
+
+a {
+  word-break: break-word;
+}
+
+a.theme {
+  color: $primary-color;
+}
+
+div.theme {
+  background-color: $primary-color;
+}
+
+.nopadding {
+ padding: 0;
+ margin: 0;
+}
+
+.form-control {
+  @include border-radius(2px);
+}
+
+.form-group {
+  &.form-group--small {
+    margin-bottom: 10px;
+  }
+}
+
+.error-panel {
+  max-width: 275px;
+  position: absolute;
+  right: 10px;
+  top: 40px;
+  z-index: 100;
+}
+
+.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;
+}
+
+.command-box {
+  position:absolute;
+  background-color:#fff;
+  width:100%;
+  border:1px solid #ddd;
+  bottom: 38;
+}
+
+.command-name {
+  position: relative;
+  width: 100%;
+  background-color: #fff;
+  height: 37px;
+  line-height: 37px;
+  padding: 2px 10px 2px 5px;
+  z-index: 101;
+}
+
+.command-name:hover {
+  background-color:#e8eaed;
+}
+
+.command-desc {
+  color: #a7a8ab;
+}
+
+@-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);}
+}
+
+.black-bg {
+  background-color: black !important;
+}
+
+#error_bar {
+  background-color: #0099FF;
+  text-align:center;
+  position: relative;
+  color: #fff;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 9999;
+
+  .error-bar {
+    padding: 5px 30px;
+  }
+
+  .error-close {
+    position: absolute;
+    right: 0;
+    top: 0;
+    color: #FFF;
+    font-size: 20px;
+    font-weight: bold;
+    text-decoration: none;
+    padding: 0 10px;
+  }
+}
+
+.invite {
+  width: 90%;
+}
+
diff --git a/web/sass-files/sass/partials/_content.scss b/web/sass-files/sass/partials/_content.scss
new file mode 100644
index 000000000..c8c205047
--- /dev/null
+++ b/web/sass-files/sass/partials/_content.scss
@@ -0,0 +1,63 @@
+.inner__wrap {
+	@include single-transition(transform, 0.5s, ease);
+	&.move--left {
+		margin-right: 400px;
+		.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;
+	.channel__wrap & {
+		padding-top: 0;
+	}
+}
+#post-create {
+	background: #fff;
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	width: 100%;
+}
+.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;
+}
\ No newline at end of file
diff --git a/web/sass-files/sass/partials/_error.scss b/web/sass-files/sass/partials/_error.scss
new file mode 100644
index 000000000..ecdcc62d9
--- /dev/null
+++ b/web/sass-files/sass/partials/_error.scss
@@ -0,0 +1,29 @@
+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
new file mode 100644
index 000000000..b01d2e157
--- /dev/null
+++ b/web/sass-files/sass/partials/_files.scss
@@ -0,0 +1,144 @@
+.preview-container {
+  position: relative;
+  width: 100%;
+  max-height: 110px;
+  height: 110px;
+  white-space: nowrap;
+  overflow: auto;
+  .preview-div {
+    display: inline-block;
+    width: 120px;
+    height: 100px;
+    margin: 7px 10px 0 0;
+    vertical-align: top;
+    position: relative;
+    border: 1px solid #DDD;
+    &.custom-file {
+      width: 85px;
+      height: 100px;
+    }
+    &:hover .remove-preview:after {
+      @include opacity(1);
+    }
+    .spinner {
+      position:absolute;
+      top:50%;
+      left:50%;
+      margin-left: -16px;
+      margin-top: -16px;
+      width:32px;
+      height:32px;
+    }
+  }
+  .preview-img {
+    width:100%;
+    height: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;
+    }
+  }
+}
+
+.image-comment {
+  background-position:left top;
+  background-repeat:no-repeat;
+  width:300px;
+  height:300px;
+}
+.file-icon {
+  width: 100%;
+  height: 100%;
+  &.audio {
+    background: url("../images/icons/audio.png");
+    @include background-size(100% 100%);
+  }
+  &.video {
+    background: url("../images/icons/video.png");
+    @include background-size(100% 100%);
+  }
+  &.ppt {
+    background: url("../images/icons/ppt.png");
+    @include background-size(100% 100%);
+  }
+  &.generic {
+    background: url("../images/icons/generic.png");
+    @include background-size(100% 100%);
+  }
+  &.code {
+    background: url("../images/icons/code.png");
+    @include background-size(100% 100%);
+  }
+  &.excel {
+    background: url("../images/icons/excel.png");
+    @include background-size(100% 100%);
+  }
+  &.word {
+    background: url("../images/icons/word.png");
+    @include background-size(100% 100%);
+  }
+  &.pdf {
+    background: url("../images/icons/pdf.png");
+    @include background-size(100% 100%);
+  }
+  &.patch {
+    background: url("../images/icons/patch.png");
+    @include background-size(100% 100%);
+  }
+  &.image {
+    background: url("../images/icons/image.png");
+    @include background-size(100% 100%);
+  }
+}
+.post-image__column {
+  position: relative;
+  width: 120px;
+  height: 100px;
+  float: left;
+  margin: 0 1em 1em 0;
+  &.custom-file {
+    width: 85px;
+    height: 100px;
+  }
+  .post__load {
+    height: 100%;
+    width: 100%;
+    background-size: 20px 20px;
+    background-repeat: no-repeat;
+    background-position: center;
+  }
+  .post__image {
+    height: 100%;
+    width: 100%;
+    border: 1px solid #E2E2E2;
+    background-color: #FFF;
+    background-repeat: no-repeat;
+  }
+  a {
+    text-decoration: none;
+    color: grey;
+  }
+}
diff --git a/web/sass-files/sass/partials/_font-awesome.scss b/web/sass-files/sass/partials/_font-awesome.scss
new file mode 100644
index 000000000..2dcdc2207
--- /dev/null
+++ b/web/sass-files/sass/partials/_font-awesome.scss
@@ -0,0 +1,1801 @@
+/*!
+ *  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
new file mode 100644
index 000000000..239dd92c1
--- /dev/null
+++ b/web/sass-files/sass/partials/_footer.scss
@@ -0,0 +1,23 @@
+.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/_headers.scss b/web/sass-files/sass/partials/_headers.scss
new file mode 100644
index 000000000..89bbaef2b
--- /dev/null
+++ b/web/sass-files/sass/partials/_headers.scss
@@ -0,0 +1,215 @@
+.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;
+			color: #888;
+			margin-top: 2px;
+		}
+		&.popover {
+			white-space: normal;
+		}
+	}
+}
+
+.channel-intro {
+	padding-bottom:5px;
+	margin: 0 1em 35px;
+	border-bottom: 1px solid lightgrey;
+	.intro-links {
+		margin: 0.5em 1.5em 0 0;
+		display: inline-block;
+		.fa {
+			margin-right: 5px;
+		}
+	}
+	.channel-intro-profile {
+		margin-top:5px;
+		margin-left: 63px;
+	}
+	.channel-intro-img {
+		float:left;
+	}
+	.channel-intro-title {
+		font-weight:bold;
+	}
+	.channel-intro-text {
+		margin-top:35px;
+	}
+}
+
+// Team Header in Sidebar
+.sidebar--left, .sidebar--menu {
+	.team__header {
+		padding: 0 15px 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 {
+					float: right;
+					background: none !important;
+					padding: 2px;
+					&.dropdown-toggle {
+						line-height: 1.8;
+						font-size: 1em;
+						color: #fff;
+					}
+				}
+			}
+		}
+	}
+}
+
+#navbar {
+	.navbar-default {
+		.navbar-toggle {
+			&.menu-toggle {
+				padding: 0 1em;
+			}
+		}
+	}
+}
+
+.channel-header {
+	width:100%;
+	border-left: none;
+	font-size: 14px;
+	line-height: 50px;
+	#member_popover {
+		width: 45px;
+		color: #999;
+
+	}
+	&.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;
+	}
+}
diff --git a/web/sass-files/sass/partials/_mentions.scss b/web/sass-files/sass/partials/_mentions.scss
new file mode 100644
index 000000000..11cd4e9e4
--- /dev/null
+++ b/web/sass-files/sass/partials/_mentions.scss
@@ -0,0 +1,55 @@
+.mention {
+	color: #fff;
+	background: $primary-color;
+	position: relative;
+	z-index: 10;
+	padding-bottom: 1px;
+	@include border-radius(3px);
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.mentions--top {
+	position: absolute;
+    z-index:99999;
+	.mentions-box {
+		position:absolute;
+		background-color:#fff;
+		border:1px solid #ddd;
+        overflow:scroll;
+        bottom:0;
+	}
+}
+
+.mentions-name {
+	position:relative;
+	width:100%;
+	background-color:#fff;
+	height:37px;
+	padding:2px;
+	z-index:101;
+}
+
+.mentions-name:hover {
+	background-color:#e8eaed;
+}
+
+.mentions-text {
+	font-color:black;
+}
+
+.mention-img {
+	margin-right:10px;
+	height:32px;
+	width:32px;
+	border-radius: 10%;
+}
+
+.mention-highlight {
+	background-color:#fff2bb;
+}
+
+.mention-link {
+	color:$primary-color;
+}
diff --git a/web/sass-files/sass/partials/_modal.scss b/web/sass-files/sass/partials/_modal.scss
new file mode 100644
index 000000000..43dbdc077
--- /dev/null
+++ b/web/sass-files/sass/partials/_modal.scss
@@ -0,0 +1,248 @@
+.modal {
+	&.image_modal {
+		.modal-backdrop.in {
+			@include opacity(0.7);
+		}
+	}
+	.remove__member {
+		float: right;
+	}
+	.modal-dialog {
+		max-width: 95%;
+		margin-left: auto;
+		margin-right: auto;
+	}
+	.modal-body {
+		max-height: 75%;
+		overflow: 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: none;
+		min-height: 56px;
+		@include clearfix;
+		.modal-title {
+			float: left;
+		}
+		.modal-action {
+			padding: 0;
+			margin: 0;
+		}
+		button.close {
+			margin-top: 0;
+			color: #fff;
+			@include opacity(1);
+			z-index: 5;
+			position: relative;
+		}
+		.btn {
+			margin-right: 10px;
+			&.btn-primary {
+				float: right;
+				margin-top: -4px;
+				position: relative;
+				i {
+					margin-right: 5px;
+				}
+			}
+		}
+	}
+	.no-channel-message {
+		text-align: center;
+		padding: 2em 1em;
+		.primary-message {
+			font-size: 1.2em;
+		}
+		.secondary-message {
+			font-size: 1.25em;
+			color: #888;
+			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: 5px 10px;
+		}
+	}
+	.more-channel-table {
+		margin: 0;
+		table-layout: fixed;
+		p {
+			font-size: 0.9em;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			color: #999;
+			margin: 5px 0;
+		}
+		.more-channel-name {
+			color: #444;
+			font-weight: bold;
+			font-size: 0.95em;
+		}
+		tbody {
+			> tr {
+				&:first-child {
+					td {
+						border: none;
+					}
+				}
+				td {
+					white-space: nowrap;
+					overflow: hidden;
+					text-overflow: ellipsis;
+					&.td--action {
+						width: 70px;
+						vertical-align: middle;
+					}
+				}
+			}
+		}
+	}
+	.modal-image {
+		position:relative;
+		width:100%;
+		margin: 0 auto;
+		.image-wrapper {
+			padding: 4px;
+			background: #FFF;
+			position: relative;
+			max-width: 80%;
+			min-height: 280px;
+			min-width: 280px;
+			@include border-radius(4px);
+			display: table;
+			margin: 0 auto;
+			&:hover .modal-close {
+				@include opacity(1);
+			}
+			&.default {
+				width: 100%;
+				height: 80%;
+			}
+			.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);
+				cursor: pointer;
+				z-index: 9999;
+			}
+			> a {
+				display: table-cell;
+				vertical-align: middle;
+			}
+			img {
+				max-width: 100%;
+				max-height: 100%;
+			}
+		}
+		.image-content {
+			box-shadow: none;
+			background: rgba(0, 0, 0, 0);
+			width: 100%;
+			height: 100%;
+			padding: 0;
+			border: none;
+			display: table;
+		}
+		.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:0px;
+			left:0px;
+			right:0px;
+			background-color:rgba(0, 0, 0, 0.8);
+			@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;
+			margin: 4px;
+			&.footer--show {
+				@include opacity(1);
+			}
+			.image-links {
+				a, span {
+					float: right;
+				}
+			}
+			.text {
+				vertical-align:middle;
+				bottom:0;
+				color:white;
+				margin-left:5px;
+			}
+		}
+	}
+}
diff --git a/web/sass-files/sass/partials/_navbar.scss b/web/sass-files/sass/partials/_navbar.scss
new file mode 100644
index 000000000..62864afb7
--- /dev/null
+++ b/web/sass-files/sass/partials/_navbar.scss
@@ -0,0 +1,101 @@
+#navbar{
+	input {
+		margin: 0px 5px 0px 2px;
+	}
+	.navbar-default {
+		position: absolute;
+		border: none;
+		min-height: 50px;
+		background: $primary-color;
+		.navbar-nav {
+			> li {
+				> a {
+					height: 50px;
+					padding: 0 1.3em;
+					i {
+						line-height: 50px;
+					}
+				}
+			}
+		}
+		.navbar-toggle {
+			float: left;
+			border-color: transparent;
+			border-radius: 0;
+			margin: 0;
+			padding: 0 10px;
+			line-height: 50px;
+			height: 50px;
+			z-index: 5;
+			.icon-bar {
+				background: #fff;
+				width: 21px;
+			}
+			&:hover, &:active, &:focus {
+				background: inherit;
+			}
+		}
+		.navbar-brand {
+			padding: 0 0.5em;
+			height: 50px;
+			line-height: 50px;
+			float: none;
+			font-size: 16px;
+			.heading {
+				margin-right: 3px;
+				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;
+	right: -5px;
+	top: -5px;
+	z-index: 100;
+}
diff --git a/web/sass-files/sass/partials/_perfect-scrollbar.scss b/web/sass-files/sass/partials/_perfect-scrollbar.scss
new file mode 100755
index 000000000..f253d0792
--- /dev/null
+++ b/web/sass-files/sass/partials/_perfect-scrollbar.scss
@@ -0,0 +1,120 @@
+.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 {
+    pointer-events: none; }
+    .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 {
+    pointer-events: none; }
+    .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/_post.scss b/web/sass-files/sass/partials/_post.scss
new file mode 100644
index 000000000..6da516cf9
--- /dev/null
+++ b/web/sass-files/sass/partials/_post.scss
@@ -0,0 +1,380 @@
+.custom-textarea {
+	white-space:pre-wrap;
+	word-wrap:break-word;
+	background:transparent;
+	border:1px solid #ccc !important;
+	position:absolute;
+	top:0px;
+	height:auto;
+	resize: none;
+	line-height:20px;
+	min-height:36px;
+}
+
+.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;
+	min-height:37px;
+}
+
+#post-list {
+	.new-seperator {
+		text-align: center;
+		padding: 1em 0;
+		.new-seperator__hr {
+			border-color: #FFAF53;
+			margin: 0;
+		}
+		.new-seperator__text {
+			margin-top: -11px;
+			color: #FF8800;
+			background: #FFF;
+			display: inline-block;
+			padding: 0 1em;
+			font-weight: normal;
+		}
+	}
+	.date-seperator {
+		text-align: center;
+		margin: 1em 0;
+		height: 0;
+		&.hovered--after {
+			margin-bottom: 0;
+			padding-bottom: 1em;
+			background: #f6f6f6;
+		}
+		&.hovered--before {
+			margin-top: 0;
+			padding-top: 1em;
+			background: #f6f6f6;
+		}
+		.date-seperator__hr {
+			border-color: #ccc;
+			margin: 0;
+		}
+		.date-seperator__text {
+			margin-top: -13px;
+		  	line-height: 24px;
+			color: #555;
+			background: #FFF;
+			display: inline-block;
+			padding: 0 1em;
+			font-weight: 900;
+			@include border-radius(50px);
+		}
+	}
+	.post-list-holder-by-time {
+		background: #fff;
+		overflow-y: scroll;
+		width: 100%;
+		padding: 1em 0 0;
+		position: relative;
+	}
+	.post-list__table {
+		display: table;
+		table-layout: fixed;
+		width: 100%;
+		min-height: 100%;
+		.post-list__content {
+			display: table-cell;
+			vertical-align: bottom;
+		}
+	}
+	.more-messages-text {
+		margin-top: 2px;
+		margin-bottom: 5px;
+		display: block;
+		text-align: center;
+		outline: none;
+		border: none;
+	}
+	.beginning-messages-text {
+		margin-top: 2px;
+		margin-bottom: 5px;
+		display: block;
+		text-align: center;
+		color: grey;
+	}
+}
+.post-create__container {
+	form {
+		width: 100%;
+		padding: 0 1em;
+		margin: 0;
+	}
+	.post-create-body {
+		max-width: 850px;
+		padding: 0 0 2px;
+		position: relative;
+		.custom-textarea {
+			padding-top: 8px;
+			padding-right: 28px;
+			max-height: 160px;
+			overflow: auto;
+			line-height: 1.5;
+		}
+		.textarea-div {
+			padding-top: 8px;
+			padding-right: 30px;
+			max-height: 160px;
+			overflow: auto;
+			line-height: 1.5;
+		}
+		.btn-file {
+			right: 0;
+			position: absolute;
+			top: 1px;
+			color: #999;
+			@include single-transition(all, 0.15s);
+			font-size: 16px;
+			padding: 9px;
+			&:hover, &:active {
+				color: #444;
+				box-shadow: none;
+			}
+		}
+		textarea {
+			border: none;
+			box-shadow: none;
+		}
+	}
+	.post-create-footer {
+		@include clearfix;
+		padding: 0;
+		.msg-typing {
+			min-height: 20px;
+			line-height: 18px;
+			display: inline-block;
+			font-size: 13px;
+			color: #777;
+		}
+	}
+}
+
+.post {
+	word-wrap: break-word;
+	padding: 0.4em 1em;
+	position: relative;
+	max-width: 100%;
+	@include legacy-pie-clearfix;
+	&:hover {
+		.post-header .post-header-col.post-header__reply {
+			.dropdown, .comment-icon__container {
+				@include opacity(1);
+			}
+		}
+		background: #f6f6f6;
+	}
+	&.post--comment {
+		&.other--root {
+			.post-comment {
+				border-left: 4px solid #EEE;
+				margin-left: 30px;
+				padding: 2px 0 2px 10px;
+			}
+		}
+	}
+	&.same--root {
+		.comment-icon__container {
+			@include opacity(0);
+		}
+		div.post-profile-img__container {
+			.post-profile-img {
+				visibility: hidden;
+			}
+		}
+		.post__content {
+			padding: 0;
+		}
+		.post-body {
+			border-left: 4px solid #EEE;
+			width: 570px;
+			margin-left: 30px;
+			padding-left: 10px;
+			.post-link {
+				display: none;
+			}
+		}
+	}
+	&.post--last {
+		.post-header {
+			.post-header-col.post-header__reply {
+				.dropdown-menu {
+					top: auto;
+					bottom: 25px;
+				}
+			}
+		}
+	}
+	.post-create-footer {
+		padding: 0;
+	}
+	p {
+		margin: 0 0 5px;
+		white-space: pre-wrap;
+	}
+	.comment-icon__container {
+		fill: $primary-color;
+		.comment-icon {
+			display: inline-block;
+			top: 3px;
+			position: relative;
+			margin-right: 3px;
+			fill: inherit;
+		}
+		path {
+			fill: inherit;
+		}
+	}
+	> div {
+		&.post-profile-img__container {
+			float: left;
+			.post-profile-img {
+				margin-right: 10px;
+				@include border-radius(3px);
+			}
+		}
+		&.post__content {
+			padding-left: 46px;
+			max-width: 100%;
+			@include legacy-pie-clearfix;
+		}
+	}
+	.post-image__columns {
+		@include legacy-pie-clearfix;
+		margin-top: 1em;
+	}
+	.post-info--hidden {
+		display: none;
+	}
+	.post-body {
+		max-width: 100%;
+		width: 600px;
+		float: left;
+		word-wrap: break-word;
+		.post-link {
+			@include clearfix;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+			cursor: pointer;
+		}
+	}
+	.create-reply-form-wrap {
+		width: 100%;
+		margin-top: 5px;
+		form {
+			padding: 0;
+		}
+		.comment-btn {
+			display: none;
+		}
+	}
+	.post-header {
+		list-style-type: none;
+		margin: 0 0 1px;
+		padding-left: 0px;
+		&.post-header-post {
+			width: 200px;
+			text-align: right;
+			float: left;
+			padding-right: 15px;
+		}
+		&.post-info {
+			.post-profile-time {
+				width: 100px;
+				display: inline-block;
+				margin-left: 50px;
+			}
+		}
+		.post-header-col {
+			vertical-align: top;
+			display: inline-block;
+			margin-right: 10px;
+			&.post-header__reply {
+				min-width: 70px;
+				.dropdown-menu {
+					right: 0;
+					left: auto;
+				}
+				.dropdown {
+					min-width: 18px;
+					margin-right: 7px;
+					display: inline-block;
+					@include opacity(0);
+				}
+			}
+		}
+		.post-profile-time {
+			color: #a8adb7;
+		}
+	}
+	.post-comment {
+	}
+	.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: bold;
+			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;
+		}
+	}
+	.msg-typing {
+		margin-top: 2px;
+		margin-left: 5px;
+		color: #a8adb7;
+	}
+	.post-grey {
+		color:lightgrey;
+	}
+	.post-reply {
+		clear: both;
+		width: 100%;
+		word-break: break-word;
+		.btn-file {
+			width: 40px;
+		}
+	}
+}
diff --git a/web/sass-files/sass/partials/_post_right.scss b/web/sass-files/sass/partials/_post_right.scss
new file mode 100644
index 000000000..972aef29b
--- /dev/null
+++ b/web/sass-files/sass/partials/_post_right.scss
@@ -0,0 +1,77 @@
+.post-right__container {
+
+	.post-right-root-message {
+		padding: 1em 1em 0;
+	}
+
+	.post-right-comments-container {
+		position: relative;
+		padding: 0;
+	}
+
+	.post {
+		&.post--root {
+			padding: 1em;
+			hr {
+				border-color: #DDD;
+				margin: 1em 0 0 0;
+			}
+		}
+	}
+
+	.post-create__container {
+		.custom-textarea {
+			min-height: 100px;
+		}
+	}
+
+}
+.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-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;
+}
+
+.post-right-comment-time {
+	color: #a8adb7;
+}
diff --git a/web/sass-files/sass/partials/_responsive.scss b/web/sass-files/sass/partials/_responsive.scss
new file mode 100644
index 000000000..bed2f6324
--- /dev/null
+++ b/web/sass-files/sass/partials/_responsive.scss
@@ -0,0 +1,637 @@
+@media screen and (max-width: 1800px) {
+    .inner__wrap {
+        &.move--left {
+            .post {
+                &.post--comment {
+                    &.other--root {
+                        .post-comment {
+                            margin-left: 0;
+                        }
+                    }
+                }
+                &.same--root {
+                    margin-left: 60px;
+                    padding-left: 10px;
+                    border-left: 4px solid #EEE;
+                    div.post-profile-img__container {
+                        .post-profile-img {
+                            display: none;
+                        }
+                    }
+                    .post__content {
+                        width: 825px;
+                    }
+                    .post-body {
+                        padding-left: 0;
+                        border: none;
+                        margin: 0;
+                    }
+                }
+                .post__content {
+                    width: 920px;
+                }
+                .post-header {
+                    &.post-header-post {
+                        width: auto;
+                        float: none;
+                        text-align: left;
+                        padding-right: 0;
+                    }
+                    &.post-info {
+                        display: none;
+                        float: none;
+                    }
+                    .post-header-col {
+                        &.post-header__reply {
+                            float: right;
+                            text-align: right;
+                            .reply-link {
+                                margin-right: 0;
+                            }
+                            .dropdown {
+                                margin-left: 10px;
+                            }
+                        }
+                    }
+                    .post-info--hidden {
+                        display: inline;
+                        .post-info {
+                            display: inline;
+                            .post-profile-time {
+                                margin: 0;
+                            }
+                        }
+                    }
+                }
+                .post-body {
+                    float: none;
+                    width: 750px;
+                }
+            }
+        }
+    }
+}
+@media screen and (max-width: 1440px) {
+    .post-create__container {
+        .post-create-body {
+            max-width: 810px;
+        }
+    }
+    .post {
+        &.post--comment {
+            &.other--root {
+                .post-comment {
+                    margin-left: 0;
+                }
+            }
+        }
+        &.same--root {
+            margin-left: 60px;
+            padding-left: 10px;
+            border-left: 4px solid #EEE;
+            div.post-profile-img__container {
+                .post-profile-img {
+                    display: none;
+                }
+            }
+            .post__content {
+                width: 825px;
+            }
+            .post-body {
+                padding-left: 0;
+                border: none;
+                margin: 0;
+            }
+        }
+        .post__content {
+            width: 880px;
+        }
+        .post-header {
+            &.post-header-post {
+                width: auto;
+                float: none;
+                text-align: left;
+                padding-right: 0;
+            }
+            &.post-info {
+                display: none;
+                float: none;
+            }
+            .post-header-col {
+                &.post-header__reply {
+                    float: right;
+                    margin: 0;
+                }
+            }
+            .post-info--hidden {
+                display: inline;
+                .post-info {
+                    display: inline;
+                    .post-profile-time {
+                        width: auto;
+                        margin: 0;
+                    }
+                }
+            }
+        }
+        .post-body {
+            float: none;
+            width: 750px;
+        }
+    }
+}
+
+@media screen and (max-width: 1140px) {
+    .post {
+        .post__content {
+            width: 100%;
+        }
+        .post-header {
+            .post-header-col {
+                &.post-header__reply {
+                    .reply-link {
+                        margin-right: 0;
+                    }
+                    .dropdown {
+                        margin-left: 10px;
+                    }
+                }
+            }
+        }
+    }
+}
+
+@media screen and (max-width: 960px) {
+    .post {
+        &:hover {
+            .post-header .post-header-col.post-header__reply {
+                .comment-icon__container__hide {
+                    @include opacity(0);
+                }
+            }
+        }
+        .post-header .post-header-col.post-header__reply {
+            .comment-icon__container__hide {
+                @include opacity(0);
+            }
+            .dropdown {
+                @include opacity(1);
+            }
+            .comment-icon__container__show {
+                @include opacity(1);
+            }
+        }
+    }
+    .signup-team__container {
+        font-size: 1em;
+    }
+    .post {
+        .post-header {
+            .post-header-col {
+                &.post-header__reply {
+                    text-align: right;
+                    display: inline-block;
+                }
+            }
+        }
+    }
+}
+
+@media screen and (min-width: 768px) {
+    .second-bar {
+        display: none;
+    }
+}
+
+@media screen and (max-width: 768px) {
+    #post-list {
+        .date-seperator {
+            &.hovered--after {
+                background: none;
+            }
+            &.hovered--before {
+                background: none;
+            }
+        }
+    }
+    .post {
+        &.same--root {
+            margin-left: 25px;
+        }
+        &:hover {
+            background: none;
+        }
+    }
+    .signup-team__container {
+        padding: 30px 0;
+        margin-bottom: 30px;
+        font-size: 0.9em;
+        .signup-team__name {
+            font-size: 2em;
+        }
+    }
+    .modal {
+        .modal-header {
+            padding-left: 20px;
+            padding-right: 20px;
+            .modal-action {
+                margin-top: 10px;
+            }
+            button.close {
+                width: 35px;
+                height: 32px;
+                margin: -5px -10px 0;
+            }
+            .modal-title {
+                float: none;
+            }
+            .btn {
+                &.btn-primary {
+                    margin: 8px 0 0 -10px;
+                    float: none;
+                }
+            }
+        }
+    }
+    .settings-modal {
+        &.display--content {
+            .modal-header {
+                display: none;
+            }
+            .settings-table {
+                display: block;
+                .settings-content {
+                    display: block;
+                    .section-edit {
+                        text-align: left;
+                    }
+                }
+                .settings-links {
+                    display: none;
+                }
+                .modal-header {
+                    display: block;
+                    position: fixed;
+                    width: 100%;
+                    z-index: 5;
+                }
+                .user-settings {
+                    .tab-header {
+                        display: none;
+                    }
+                    .divider-dark.first {
+                        display: none;
+                    }
+                }
+            }
+        }
+        .settings-table {
+            .settings-content {
+                padding: 0;
+                display: none;
+                .user-settings {
+                    padding: 70px 20px 30px;
+                }
+            }
+            .settings-links {
+                background: #fff;
+            }
+            .nav {
+                > li {
+                    > a {
+                        border-top: 1px solid #ddd;
+                        font-size: 1.1em;
+                        line-height: 2.7;
+                        color: #555;
+                        .glyphicon {
+                            margin-left: 7px;
+                        }
+                    }
+                    &.active, &:hover {
+                        a {
+                            color: #555;
+                            background: #fff;
+                        }
+                    }
+                }
+            }
+        }
+    }
+    #post-create {
+        .post-create-body {
+            padding-bottom: 10px;
+        }
+        .post-create-footer .msg-typing {
+            display: none;
+        }
+    }
+    .preview-container {
+        .preview-div {
+            margin-top: 0;
+        }
+        .remove-preview {
+            width: 50px;
+            height: 50px;
+            left: 50%;
+            top: 50%;
+            background: #444;
+            margin: -25px 0 0 -25px;
+            @include border-radius(50px);
+            text-align: center;
+            &:after {
+                display: none;
+            }
+            i {
+                line-height: 50px;
+                top: auto;
+                right: auto;
+                position: relative;
+                font-size: 28px;
+            }
+        }
+    }
+    #navbar {
+        .navbar-default {
+            .navbar-header {
+                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;
+            }
+        }
+    }
+    #user_settings {
+        border-right: none;
+    }
+    body {
+        &.white {
+            .row.content {
+                margin-bottom: -185px;
+            }
+        }
+    }
+    .footer, .footer-pane, .footer-push {
+        height: 185px;
+    }
+    .footer-pane {
+        .footer-link {
+            padding: 0;
+            width: 100%;
+            text-align: right;
+            line-height: 1.7;
+            &.copyright {
+                width: 100%;
+            }
+        }
+    }
+    .search-bar__container {
+        padding: 10px 8px 13px;
+        background: $primary-color;
+        color: #fff;
+        .search__form {
+            border: none;
+            padding: 0 10px 0 30px;
+            .form-control {
+                background: none;
+                color: #fff;
+                border-bottom: 1px solid #fff;
+                border-bottom: 1px solid rgba(#fff, 0.7);
+                border-radius: 0;
+                padding: 0 0 0 23px;
+            }
+            ::-webkit-input-placeholder {
+                color: #fff;
+            }
+
+            :-moz-placeholder { /* Firefox 18- */
+                color: #fff;
+            }
+
+            ::-moz-placeholder {  /* Firefox 19+ */
+                color: #fff;
+            }
+
+            :-ms-input-placeholder {
+                color: #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: 105px;
+        }
+        .team__header {
+            display: none;
+            @include clearfix;
+        }
+        .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;
+                    }
+                }
+            }
+        }
+    }
+    .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;
+        }
+    }
+    .inner__wrap {
+        &.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 {
+                padding-bottom: 40px;
+                .modal-close {
+                    @include opacity(1);
+                }
+            }
+            .modal-button-bar {
+                @include opacity(1);
+            }
+        }
+    }
+    .app__content {
+        padding-top: 50px;
+        margin: 0;
+        .channel__wrap & {
+            padding-top: 50px;
+        }
+        .channel-header {
+            display: none;
+        }
+    }
+
+
+    .channel__wrap {
+        .row {
+            &.header {
+                display: block;
+            }
+        }
+    }
+
+    .post {
+        .post-profile-img__container {
+            display: none;
+        }
+        &.post--comment {
+            &.other--root {
+                .post-comment {
+                    margin-left: 11px;
+                }
+            }
+        }
+        > div {
+            &.post__content {
+                padding: 0;
+            }
+        }
+    }
+
+    .post-comments {
+        padding: 9px 21px 10px 10px !important;
+    }
+}
+@media screen and (max-width: 480px) {
+    .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;
+            }
+        }
+    }
+}
diff --git a/web/sass-files/sass/partials/_search.scss b/web/sass-files/sass/partials/_search.scss
new file mode 100644
index 000000000..ca5d25720
--- /dev/null
+++ b/web/sass-files/sass/partials/_search.scss
@@ -0,0 +1,95 @@
+.search-bar__container {
+	padding: 8px 8px 8px 0;
+}
+.sidebar__collapse {
+	width: 20px;
+	height: 30px;
+	position: absolute;
+	top: 10px;
+	left: 6px;
+	cursor: pointer;
+	background: url("../images/arrow-left.png") center no-repeat;
+	@include background-size(10px 15px);
+	z-index: 5;
+	display: none;
+}
+.sidebar__search-icon {
+	position: absolute;
+	left: 40px;
+	top: 18px;
+	@include opacity(0.8);
+	display: none;
+}
+.search__form {
+	.search-bar__container & {
+		margin: 0;
+		border: 1px solid #DDD;
+		@include border-radius(2px);
+		width: 300px;
+	}
+	.sidebar--right & {
+		width: 100%;
+	}
+	.search-bar-box {
+		height: 40px;
+		border: 1px solid #ddd;
+		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;
+}
+
+.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 {
+	border-top: $border-gray;
+	padding: 10px 1em;
+	margin: 0;
+	cursor: pointer;
+	&:first-child {
+		border: none;
+	}
+	.search-channel__name {
+		font-weight: bold;
+		margin: 0 0 10px 0;
+	}
+}
+
+.search-item-time {
+	color: #a8adb7;
+}
+
+.search-results-none {
+	padding: 10px;
+}
+
+.search-highlight.theme, .search-highlight {
+	background-color: #FFF2BB;
+}
diff --git a/web/sass-files/sass/partials/_settings.scss b/web/sass-files/sass/partials/_settings.scss
new file mode 100644
index 000000000..dbaab8b58
--- /dev/null
+++ b/web/sass-files/sass/partials/_settings.scss
@@ -0,0 +1,222 @@
+.user-settings {
+    background: #fff;
+    min-height:300px;
+}
+
+.settings-modal {
+    width:800px;
+    max-width: 100%;
+    .modal-back {
+        width: 8px;
+        height: 13px;
+        background: url("../images/arrow-left.png");
+        @include background-size(100% 100%);
+        margin-right: 10px;
+        display: inline-block;
+        cursor: pointer;
+    }
+    .modal-body {
+        padding: 0;
+    }
+    li {
+        list-style: none;
+    }
+    .settings-table {
+        display: table;
+        width: 100%;
+        > div {
+            display: table-cell;
+            vertical-align: top;
+        }
+        .settings-links {
+            width: 180px;
+            background: #FAFAFA;
+            border-right: 1px solid #DDD;
+        }
+        .settings-content {
+            padding: 0px 20px 30px;
+            .modal-header {
+                display: none;
+            }
+            .section-min {
+                padding: 1em 0;
+                margin-bottom: 0;
+                @include clearfix;
+            }
+
+            .section-max {
+                background: #f2f2f2;
+                padding: 1em 0;
+                margin-bottom: 0;
+                @include clearfix;
+                .section-title {
+                    margin-bottom: 10px;
+                }
+            }
+
+            .section-title {
+                margin-bottom: 5px;
+                font-weight: bold;
+            }
+
+            .section-edit {
+                text-align: right;
+                margin-bottom: 5px;
+            }
+
+            .section-describe {
+                color:grey;
+            }
+
+            .divider-dark {
+                border-bottom:1px solid #aaaaaa;
+            }
+
+            .divider-light {
+                border-bottom:1px solid lightgrey;
+            }
+
+            .setting-list {
+                padding: 0;
+                list-style-type:none;
+            }
+
+            .mentions-input {
+                margin-top: 10px;
+            }
+
+            .setting-list-item {
+                margin-top:7px;
+                .has-error {
+                    color: #a94442;
+                }
+                .control-label {
+                    color: #555;
+                }
+                hr {
+                    border-color: #ccc;
+                }
+            }
+
+
+        }
+    }
+    .nav-pills {
+        > li {
+            margin: 0;
+            a {
+                border-radius: 0;
+                color: #777;
+            }
+            .glyphicon {
+                width: 25px;
+                top: 2px;
+            }
+            &:hover {
+                a {
+                    background: #E6F2FA;
+                }
+            }
+            &.active {
+                a {
+                    color: #111;
+                    background-color: #E1E1E1;
+                }
+            }
+        }
+    }
+    h3 {
+        font-size: em(20px);
+    }
+}
+
+#user_settings {
+    padding: 0 0.5em;
+    border-right: 1px solid #ddd;
+    max-width: 800px;
+}
+
+.channel-settings {
+    padding: 0 10px;
+}
+
+.tab-header {
+    margin-bottom:1em;
+}
+
+.setting-name {
+    color:grey;
+    font-weight:500;
+}
+
+.profile-img {
+    width:158px;
+    max-height:128px;
+}
+
+.sel-btn {
+    margin-right:5px;
+}
+
+.member-list-holder {
+    background-color:#fff;
+}
+
+.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(3px);
+        margin-right: 8px;
+    }
+    .member-name {
+        font-weight:500;
+        display: block;
+    }
+
+    .member-email {
+        color:darkgrey;
+        display: block;
+    }
+
+    .member-role, .member-drop {
+        position:absolute;
+        right:15px;
+        top:13px;
+        color:#414142;
+    }
+}
+
+.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;
+}
diff --git a/web/sass-files/sass/partials/_sidebar--left.scss b/web/sass-files/sass/partials/_sidebar--left.scss
new file mode 100644
index 000000000..b1dd470d2
--- /dev/null
+++ b/web/sass-files/sass/partials/_sidebar--left.scss
@@ -0,0 +1,95 @@
+.sidebar--left {
+    position: absolute;
+    width: 220px;
+    left: 0;
+    height: 100%;
+    border-right: $border-gray;
+    padding: 0 0 2em 0;
+    background: #fafafa;
+    &.sidebar--padded {
+        padding-top: 44px;
+    }
+    .search__form {
+        margin: 0;
+        padding: 1em 1em 0;
+        display: none;
+    }
+    > div {
+        height: 100%;
+        position: absolute;
+        padding-bottom: 70px;
+        width: 100%;
+    }
+    .badge {
+        background-color: $primary-color;
+    }
+    .status {
+        position:relative;
+        top:1px;
+        margin-right: 3px;
+        .online--icon {
+            fill: #7DBE00;
+        }
+    }
+    .nav-pills__container {
+        height: 100%;
+        position: relative;
+        overflow: auto;
+    }
+    .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;
+                color: #999;
+                &.unread-title {
+                    color: #333;
+                    font-weight: bold;
+                }
+                &:hover, &:focus {
+                    background: #e6f2fa;
+                }
+            }
+            &.active {
+                a, a:hover, a:focus {
+                    color: #111;
+                    background-color: #e1e1e1;
+                    border-radius: 0;
+                }
+            }
+        }
+    }
+    .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;
+        }
+    }
+}
diff --git a/web/sass-files/sass/partials/_sidebar--menu.scss b/web/sass-files/sass/partials/_sidebar--menu.scss
new file mode 100644
index 000000000..4366b1a6c
--- /dev/null
+++ b/web/sass-files/sass/partials/_sidebar--menu.scss
@@ -0,0 +1,66 @@
+.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: #444;
+                line-height: 40px;
+                padding: 0 15px;
+                .glyphicon {
+                    width: 25px;
+                }
+            }
+        }
+    }
+}
diff --git a/web/sass-files/sass/partials/_sidebar--right.scss b/web/sass-files/sass/partials/_sidebar--right.scss
new file mode 100644
index 000000000..d6000a515
--- /dev/null
+++ b/web/sass-files/sass/partials/_sidebar--right.scss
@@ -0,0 +1,83 @@
+.sidebar--right {
+    position: absolute;
+    width: 400px;
+    height: 100%;
+    right: 0px;
+    padding: 0 0 2em 0;
+    background: #fff;
+    @include single-transition(transform, 0.5s, ease);
+    right: -320px;
+    &.move--left {
+        right: 0;
+    }
+    .sidebar-right__body {
+        border-left: $border-gray;
+        border-top: $border-gray;
+    }
+    .post {
+        .post-header {
+            .post-header-col {
+                &.post-header__reply {
+                    text-align: right;
+                    float: right;
+                }
+            }
+        }
+    }
+    .post-create__container {
+        .post-create-footer {
+            padding-top: 10px;
+        }
+    }
+    .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;
+        background: url("../images/closeSidebar.png");
+        @include background-size(100% 100%);
+        opacity: 0.5;
+        float: right;
+        outline: none;
+        border: none;
+        @include single-transition(all, 0.2s, ease-in);
+        &:hover, &:active {
+            opacity: 0.8;
+        }
+    }
+    .sidebar--right__header {
+        font-size: 1em;
+        text-transform: uppercase;
+        color: #444;
+        height: 44px;
+        padding: 0 1em;
+        line-height: 44px;
+        background: #F5F5F5;
+        border-bottom: $border-gray;
+    }
+    .sidebar--right__subheader {
+        font-size: 1em;
+        text-transform: uppercase;
+        color: #999;
+        font-weight: 400;
+        color: #888;
+        height: 44px;
+        line-height: 44px;
+        padding: 0 1em;
+    }
+}
+
+.sidebar-right-container {
+    height: 100%;
+}
diff --git a/web/sass-files/sass/partials/_signup.scss b/web/sass-files/sass/partials/_signup.scss
new file mode 100644
index 000000000..11ccc0fc9
--- /dev/null
+++ b/web/sass-files/sass/partials/_signup.scss
@@ -0,0 +1,115 @@
+.signup-header {
+    width:100%;
+    line-height: 33px;
+    padding: 0 1em 0.2em;
+    background: #EEE;
+}
+.signup-team__container {
+    padding: 100px 0px 50px 0px;
+    max-width: 340px;
+    margin: 0 auto;
+    font-size: 1.1em;
+    position: relative;
+    h1, h2, h3, h4, h5, h6, p {
+        line-height: 1.3;
+    }
+    h2 {
+        font-weight: 600;
+        margin-bottom: 0.5em;
+        letter-spacing: -0.5px;
+        font-size: em(30px);
+    }
+    h3 {
+    	font-weight: 600;
+        margin: 0 0 1.3em 0;
+        font-size: 1.4em;
+    }
+    h4 {
+        font-size: em(18px);
+        font-weight: 600;
+        margin-bottom: 1em;
+    }
+    p {
+        color: #555;
+        line-height: 1.5;
+        margin-bottom: 1em;
+        .black, &.black {
+            color: #000;
+        }
+    }
+    form {
+        margin-bottom: 0.8em;
+    }
+    .external-link {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+    }
+    .signup-team__name {
+        font-size: 2.2em;
+        font-weight: 600;
+        text-transform: uppercase;
+    }
+    .signup-team__subdomain {
+        font-size: 1.5em;
+        padding-left: 1em;
+    }
+    .form-control {
+        height: em(38px);
+    }
+    .btn {
+        padding: em(7px) em(15px);
+        font-weight: 600;
+        font-size: em(13px);
+        &.btn-default {
+            color: #444;
+        }
+        .glyphicon {
+            &.glyphicon-ok, &.glyphicon-refresh {
+                margin-right: 0.3em;
+                left: -5px;
+                font-size: 0.9em;
+            }
+            &.glyphicon-chevron-right {
+                margin-left: 0.3em;
+                font-size: 0.8em;
+                right: -2px;
+                top: 0px;
+            }
+            &.glyphicon-chevron-left {
+                margin-right: 0.3em;
+                font-size: 0.8em;
+                left: -2px;
+                top: 0px;
+            }
+        }
+    }
+    .has-error {
+        .control-label {
+            margin-top: 5px;
+        }
+    }
+    .reset-form {
+        @include border-radius(3px);
+        position: relative;
+        font-size: 0.95em;
+        p {
+            color: inherit;
+        }
+    }
+}
+
+.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: 700;
+}
\ No newline at end of file
diff --git a/web/sass-files/sass/partials/_variables.scss b/web/sass-files/sass/partials/_variables.scss
new file mode 100644
index 000000000..eb1f3eef3
--- /dev/null
+++ b/web/sass-files/sass/partials/_variables.scss
@@ -0,0 +1,16 @@
+@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;
+
+// Animation
+.glyphicon-refresh-animate {
+	-animation: spin .7s infinite linear;
+	-webkit-animation: spin2 .7s infinite linear;
+}
\ No newline at end of file
diff --git a/web/sass-files/sass/partials/_videos.scss b/web/sass-files/sass/partials/_videos.scss
new file mode 100644
index 000000000..de18aa08a
--- /dev/null
+++ b/web/sass-files/sass/partials/_videos.scss
@@ -0,0 +1,59 @@
+.video-div {
+	position:relative;
+	max-width: 480px;
+	.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 {
+	color:grey;
+	font-size:15px;
+	font-weight:200;
+	margin:0px;
+	padding:0px;
+}
+
+.video-uploader {
+	font-size:15px;
+	margin-top:3px;
+	margin-bottom: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);
+}
\ No newline at end of file
diff --git a/web/sass-files/sass/partials/_welcome.scss b/web/sass-files/sass/partials/_welcome.scss
new file mode 100644
index 000000000..7f2354a36
--- /dev/null
+++ b/web/sass-files/sass/partials/_welcome.scss
@@ -0,0 +1,13 @@
+.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/styles.scss b/web/sass-files/sass/styles.scss
new file mode 100644
index 000000000..8446f1c01
--- /dev/null
+++ b/web/sass-files/sass/styles.scss
@@ -0,0 +1,34 @@
+/* Welcome to Compass.
+ * In this file you should write your main styles. (or centralize your imports)
+ * 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";
+
+// Channel Css
+@import "partials/headers";
+@import "partials/footer";
+@import "partials/content";
+@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/signup";
+@import "partials/files";
+@import "partials/videos";
+@import "partials/settings";
+@import "partials/modal";
+@import "partials/mentions";
+@import "partials/error";
+
+// Responsive Css
+@import "partials/responsive";
-- 
cgit v1.2.3-1-g7c22