diff --git a/app/assets/stylesheets/common/base/compose.scss b/app/assets/stylesheets/common/base/compose.scss
new file mode 100644
index 00000000000..b55dadffd87
--- /dev/null
+++ b/app/assets/stylesheets/common/base/compose.scss
@@ -0,0 +1,123 @@
+.autocomplete {
+  z-index: 999999;
+  position: absolute;
+  width: 240px;
+  background-color: $primary_background_color;
+  border: 1px solid $primary_border_color;
+  ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    li {
+      border-bottom: 1px solid $primary_border_color;
+      a[href] {
+        padding: 5px;
+        display: block;
+        span.username {
+          color: $primary_text_color;
+        }
+        span.name {
+          font-size: 11px;
+        }
+        &.selected {
+          background-color: lighten($secondary_background_color, 60%);
+        }
+        @include hover {
+          background-color: lighten($secondary_background_color, 60%);
+          text-decoration: none;
+        }
+      }
+    }
+  }
+}
+
+div.ac-wrap.disabled {
+  input {
+    display:none;
+  }
+  .item a {
+    display:none;
+  }
+}
+
+
+div.ac-wrap {
+  background-color: $primary_background_color;
+  border: 1px solid $primary_border_color;
+  padding: 5px 10px;
+  div.item {
+    float: left;
+    margin-right: 10px;
+    margin-bottom: 5px;
+    span {
+      padding-left: 5px;
+      height: 22px;
+      display: inline-block;
+      line-height: 22px;
+      vertical-align: bottom;
+    }
+    a.remove {
+      margin-left: 4px;
+      font-size: 10px;
+      line-height: 10px;
+      padding: 2px 1px 1px 3px;
+      border-radius: 10px;
+      width: 10px;
+      display: inline-block;
+      border: 1px solid $primary_border_color;
+      &:hover {
+        background-color: $warning_background_color;
+        border: 1px solid $warning_border_color;
+        text-decoration: none;
+        color: $warning_text_color;
+      }
+    }
+  }
+  input[type="text"] {
+    float: left;
+    margin-top: 5px;
+    border: 0;
+    padding: 0;
+    margin: 4px 0 0;
+    box-shadow: none;
+  }
+}
+
+#reply-control.topic #wmd-quote-post {
+  display: none;
+}
+
+@media screen and (min-width: 1550px) {
+  #reply-control {
+    .wmd-controls {
+      width: 1450px;
+      left: auto;
+      right: auto;
+    }
+  }
+}
+
+.auto-close-fields {
+  input {
+    width: 150px;
+  }
+  .examples {
+    margin: 10px 0 0 0;
+    color: $secondary_text_color;
+  }
+}
+
+.edit-auto-close-modal {
+  form {
+    margin: 0;
+  }
+  .auto-close-fields {
+    i.fa-clock-o {
+      font-size: 16px;
+      line-height: 8px;
+    }
+    input {
+      margin: 0;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/common/base/discourse.scss b/app/assets/stylesheets/common/base/discourse.scss
new file mode 100644
index 00000000000..eb2aa21267a
--- /dev/null
+++ b/app/assets/stylesheets/common/base/discourse.scss
@@ -0,0 +1,161 @@
+a.no-href {
+  cursor: pointer;
+}
+
+body {
+    button.ok {
+    background: $btn-success-background;
+    color: $tertiary_text_color;
+    @include hover {
+      background: lighten($btn-success-background, 10%);
+      color: $tertiary_text_color;
+    }
+  }
+  button.cancel {
+    background: $btn-danger-background-color;
+    color: $tertiary_text_color;
+    @include hover {
+      background: lighten($btn-danger-background-color, 10%);
+      color: $tertiary_text_color;
+    }
+  }
+    .coldmap-high {
+    color: $coldmap-high !important;
+  }
+  .coldmap-med {
+    color: $coldmap-med !important;
+  }
+  .coldmap-low {
+    color: $coldmap-low !important;
+  }
+  .heatmap-high {
+    color: $heatmap-high !important;
+  }
+  .heatmap-med {
+    color: $heatmap-med !important;
+  }
+  .heatmap-low {
+    color: $heatmap-low !important;
+  }
+  #loading-message {
+    position: absolute;
+    font-size: 30px;
+    text-align: center;
+    top: 120px;
+    left: 500px;
+    color: lighten($primary_text_color, 35%);
+  }
+    .top-space {
+    margin-top: 10px;
+  }
+  ul.breadcrumb {
+    margin: 0 10px 0 10px;
+  }
+.message {
+    @include border-radius-all(8px);
+    background-color: $primary_background_color;
+    padding: 14px;
+    h2 {
+      margin-bottom: 20px;
+    }
+    p {
+      font-size: 20px;
+    }
+  }
+    #footer {
+    .container {
+      height: 50px;
+      .contents {
+        padding-top: 10px;
+        a[href] {
+          color: $tertiary_text_color;
+        }
+      }
+    }
+  }
+    .clear-transitions {
+    @include transition(none !important);
+  }
+  form {
+  .tip {
+    display: inline-block;
+    &.good {
+      color: $success_text_color;
+    }
+    &.bad {
+      color: $warning_text_color;
+    }
+  }
+}
+
+#wmd-input {
+  resize: none;
+}
+
+#pagedown-editor {
+  width: 540px;
+  background-color: $primary_background_color;
+  padding: 0 10px 13px 10px;
+  border: 1px solid $primary_border_color;
+  .preview {
+    margin-top: 8px;
+    border: 1px dashed $primary_border_color;
+    padding: 8px 8px 0 8px;
+    p {
+      margin: 0 0 10px 0;
+    }
+  }
+  .preview.hidden {
+    display: none;
+  }
+}
+
+.spinner {
+  width: 100px;
+  margin: 10px auto 30px auto;
+  background-color: #000;
+  @include border-radius-all(10px);
+  padding: 10px 10px 10px 30px;
+  font-size: 15px;
+  line-height: 23px;
+  text-align: center;
+  color: $primary_background_color;
+  background: {
+    image: image-url("spinner_96_w.gif");
+    repeat: no-repeat;
+    position: 10px 8px;
+    size: 25px;
+  };
+  -webkit-animation: spinner .25s;
+  animation: spinner .25s;
+}
+
+//loading spinner fade-in
+@-webkit-keyframes spinner {
+    from {opacity: 0}
+    to {opacity: 1}
+}@keyframes fade {
+    from {opacity: 0}
+    to {opacity: 1}
+}
+
+.avatar {
+  @include border-radius-all(2px);
+}
+
+.avatar-wrapper {
+  background-color: $primary_background_color;
+  display: inline-block;
+  border: 1px solid $primary_border_color;
+  @include border-radius-all(5px);
+  img {
+    @include border-radius-all(4px);
+  }
+}
+
+.profiler-results.profiler-left {
+  top: 60px !important;
+}
+  
+
+}
diff --git a/app/assets/stylesheets/common/base/magnific-popup.scss b/app/assets/stylesheets/common/base/magnific-popup.scss
new file mode 100644
index 00000000000..8c0a5861c18
--- /dev/null
+++ b/app/assets/stylesheets/common/base/magnific-popup.scss
@@ -0,0 +1,651 @@
+/* Magnific Popup CSS */
+
+////////////////////////
+//
+// Contents:
+//
+// 1. Default Settings
+// 2. General styles
+//    - Transluscent overlay
+//    - Containers, wrappers
+//    - Cursors
+//    - Helper classes
+// 3. Appearance
+//    - Preloader & text that displays error messages
+//    - CSS reset for buttons
+//    - Close icon
+//    - "1 of X" counter
+//    - Navigation (left/right) arrows
+//    - Iframe content type styles
+//    - Image content type styles
+//    - Media query where size of arrows is reduced
+//    - IE7 support
+//
+////////////////////////
+
+
+
+////////////////////////
+// 1. Default Settings
+////////////////////////
+
+$overlay-color:                   #0b0b0b !default;
+$overlay-opacity:                 0.8 !default;
+$shadow:                          0 0 8px rgba(0, 0, 0, 0.6) !default; // shadow on image or iframe
+$popup-padding-left:              8px !default; // Padding from left and from right side
+$popup-padding-left-mobile:       6px !default; // Same as above, but is applied when width of window is less than 800px
+
+$z-index-base:                    1040 !default; // Base z-index of popup
+$include-arrows:                  true !default; // include styles for nav arrows
+$controls-opacity:                0.65 !default;
+$controls-color:                  #FFF !default;
+$inner-close-icon-color:          #333 !default;
+$controls-text-color:             #CCC !default; // Color of preloader and "1 of X" indicator
+$controls-text-color-hover:       #FFF !default;
+$IE7support:                      true !default; // Very basic IE7 support
+
+// Iframe-type options
+$include-iframe-type:             true !default;
+$iframe-padding-top:              40px !default;
+$iframe-background:               #000 !default;
+$iframe-max-width:                900px !default;
+$iframe-ratio:                    9/16 !default;
+
+// Image-type options
+$include-image-type:              true !default;
+$image-background:                #444 !default;
+$image-padding-top:               40px !default;
+$image-padding-bottom:            40px !default;
+$include-mobile-layout-for-image: true !default; // Removes paddings from top and bottom
+
+// Image caption options
+$caption-title-color:             #F3F3F3 !default;
+$caption-subtitle-color:          #BDBDBD !default;
+
+// A11y
+$use-visuallyhidden:              false !default; // Hide content from browsers, but make it available for screen readers
+
+
+
+////////////////////////
+// 2. General styles
+////////////////////////
+
+// Transluscent overlay
+.mfp-bg {
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: $z-index-base + 2;
+  overflow: hidden;
+  position: fixed;
+
+  background: $overlay-color;
+  opacity: $overlay-opacity;
+  @if $IE7support {
+    filter: unquote("alpha(opacity=#{$overlay-opacity*100})");
+  }
+}
+
+// Wrapper for popup
+.mfp-wrap {
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: $z-index-base + 3;
+  position: fixed;
+  outline: none !important;
+  -webkit-backface-visibility: hidden; // fixes webkit bug that can cause "false" scrollbar
+}
+
+// Root container
+.mfp-container {
+  text-align: center;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  padding: 0 $popup-padding-left;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+// Vertical centerer helper
+.mfp-container {
+  &:before {
+    content: '';
+    display: inline-block;
+    height: 100%;
+    vertical-align: middle;
+  }
+}
+
+// Remove vertical centering when popup has class `mfp-align-top`
+.mfp-align-top {
+  .mfp-container {
+    &:before {
+      display: none;
+    }
+  }
+}
+
+// Popup content holder
+.mfp-content {
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+  margin: 0 auto;
+  text-align: left;
+  z-index: $z-index-base + 5;
+}
+.mfp-inline-holder,
+.mfp-ajax-holder {
+  .mfp-content {
+    width: 100%;
+    cursor: auto;
+  }
+}
+
+// Cursors
+.mfp-ajax-cur {
+  cursor: progress;
+}
+.mfp-zoom-out-cur {
+  &, .mfp-image-holder .mfp-close {
+    cursor: -moz-zoom-out;
+    cursor: -webkit-zoom-out;
+    cursor: zoom-out;
+  }
+}
+.mfp-zoom {
+  cursor: pointer;
+  cursor: -webkit-zoom-in;
+  cursor: -moz-zoom-in;
+  cursor: zoom-in;
+}
+.mfp-auto-cursor {
+  .mfp-content {
+    cursor: auto;
+  }
+}
+
+.mfp-close,
+.mfp-arrow,
+.mfp-preloader,
+.mfp-counter {
+  -webkit-user-select:none;
+  -moz-user-select: none;
+  user-select: none;
+}
+
+// Hide the image during the loading
+.mfp-loading {
+  &.mfp-figure {
+    display: none;
+  }
+}
+
+// Helper class that hides stuff
+@if $use-visuallyhidden {
+  // From HTML5 Boilerplate https://github.com/h5bp/html5-boilerplate/blob/v4.2.0/doc/css.md#visuallyhidden
+  .mfp-hide {
+    border: 0 !important;
+    clip: rect(0 0 0 0) !important;
+    height: 1px !important;
+    margin: -1px !important;
+    overflow: hidden !important;
+    padding: 0 !important;
+    position: absolute !important;
+    width: 1px !important;
+  }
+} @else {
+  .mfp-hide {
+    display: none !important;
+  }
+}
+
+
+////////////////////////
+// 3. Appearance
+////////////////////////
+
+// Preloader and text that displays error messages
+.mfp-preloader {
+  color: $controls-text-color;
+  position: absolute;
+  top: 50%;
+  width: auto;
+  text-align: center;
+  margin-top: -0.8em;
+  left: 8px;
+  right: 8px;
+  z-index: $z-index-base + 4;
+  a {
+    color: $controls-text-color;
+    &:hover {
+      color: $controls-text-color-hover;
+    }
+  }
+}
+
+// Hide preloader when content successfully loaded
+.mfp-s-ready {
+  .mfp-preloader {
+    display: none;
+  }
+}
+
+// Hide content when it was not loaded
+.mfp-s-error {
+  .mfp-content {
+    display: none;
+  }
+}
+
+// CSS-reset for buttons
+button {
+  &.mfp-close,
+  &.mfp-arrow {
+    overflow: visible;
+    cursor: pointer;
+    background: transparent;
+    border: 0;
+    -webkit-appearance: none;
+    display: block;
+    padding: 0;
+    z-index: $z-index-base + 6;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+  }
+  &::-moz-focus-inner {
+      padding: 0;
+      border: 0
+  }
+}
+
+
+// Close icon
+.mfp-close {
+  width: 44px;
+  height: 44px;
+  line-height: 44px;
+
+  position: absolute;
+  right: 0;
+  top: 0;
+  text-decoration: none;
+  text-align: center;
+  opacity: $controls-opacity;
+  @if $IE7support {
+    filter: unquote("alpha(opacity=#{$controls-opacity*100})");
+  }
+  padding: 0 0 18px 10px;
+  color: $controls-color;
+
+  font-style: normal;
+  font-size: 28px;
+  font-family: Arial, Baskerville, monospace;
+
+  &:hover,
+  &:focus {
+    opacity: 1;
+    @if $IE7support {
+      filter: unquote("alpha(opacity=#{1*100})");
+    }
+  }
+
+  &:active {
+    top: 1px;
+  }
+}
+.mfp-close-btn-in {
+  .mfp-close {
+    color: $inner-close-icon-color;
+  }
+}
+.mfp-image-holder,
+.mfp-iframe-holder {
+  .mfp-close {
+    color: $controls-color;
+    right: -6px;
+    text-align: right;
+    padding-right: 6px;
+    width: 100%;
+  }
+}
+
+// "1 of X" counter
+.mfp-counter {
+  position: absolute;
+  top: 0;
+  right: 0;
+  color: $controls-text-color;
+  font-size: 12px;
+  line-height: 18px;
+}
+
+// Navigation arrows
+@if $include-arrows {
+  .mfp-arrow {
+    position: absolute;
+    opacity: $controls-opacity;
+    @if $IE7support {
+      filter: unquote("alpha(opacity=#{$controls-opacity*100})");
+    }
+    margin: 0;
+    top: 50%;
+    margin-top: -55px;
+    padding: 0;
+    width: 90px;
+    height: 110px;
+    -webkit-tap-highlight-color: rgba(0,0,0,0);
+    &:active {
+      margin-top: -54px;
+    }
+    &:hover,
+    &:focus {
+      opacity: 1;
+      @if $IE7support {
+        filter: unquote("alpha(opacity=#{1*100})");
+      }
+    }
+    &:before,
+    &:after,
+    .mfp-b,
+    .mfp-a {
+      content: '';
+      display: block;
+      width: 0;
+      height: 0;
+      position: absolute;
+      left: 0;
+      top: 0;
+      margin-top: 35px;
+      margin-left: 35px;
+      border: medium inset transparent;
+    }
+
+    &:after,
+    .mfp-a {
+
+      border-top-width: 13px;
+      border-bottom-width: 13px;
+      top:8px;
+    }
+
+    &:before,
+    .mfp-b {
+      border-top-width: 21px;
+      border-bottom-width: 21px;
+    }
+
+  }
+
+  .mfp-arrow-left {
+    left: 0;
+
+    &:after,
+    .mfp-a {
+      border-right: 17px solid #FFF;
+      margin-left: 31px;
+    }
+    &:before,
+    .mfp-b {
+      margin-left: 25px;
+      border-right: 27px solid #3f3f3f;
+    }
+  }
+
+  .mfp-arrow-right {
+    right: 0;
+    &:after,
+    .mfp-a {
+      border-left: 17px solid #FFF;
+      margin-left: 39px
+    }
+    &:before,
+    .mfp-b {
+      border-left: 27px solid #3f3f3f;
+    }
+  }
+}
+
+
+
+// Iframe content type
+@if $include-iframe-type {
+  .mfp-iframe-holder {
+    padding-top: $iframe-padding-top;
+    padding-bottom: $iframe-padding-top;
+    .mfp-content {
+      line-height: 0;
+      width: 100%;
+      max-width: $iframe-max-width;
+    }
+    .mfp-close {
+      top: -40px;
+    }
+  }
+  .mfp-iframe-scaler {
+    width: 100%;
+    height: 0;
+    overflow: hidden;
+    padding-top: $iframe-ratio * 100%;
+    iframe {
+      position: absolute;
+      display: block;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      box-shadow: $shadow;
+      background: $iframe-background;
+    }
+  }
+}
+
+
+
+// Image content type
+@if $include-image-type {
+
+  /* Main image in popup */
+  img {
+    &.mfp-img {
+      width: auto;
+      max-width: 100%;
+      height: auto;
+      display: block;
+      line-height: 0;
+      -webkit-box-sizing: border-box;
+      -moz-box-sizing: border-box;
+      box-sizing: border-box;
+      padding: $image-padding-top 0 $image-padding-bottom;
+      margin: 0 auto;
+    }
+  }
+
+  /* The shadow behind the image */
+  .mfp-figure {
+    line-height: 0;
+    &:after {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: $image-padding-top;
+      bottom: $image-padding-bottom;
+      display: block;
+      right: 0;
+      width: auto;
+      height: auto;
+      z-index: -1;
+      box-shadow: $shadow;
+      background: $image-background;
+    }
+    small {
+      color: $caption-subtitle-color;
+      display: block;
+      font-size: 12px;
+      line-height: 14px;
+    }
+    figure {
+      margin: 0;
+    }
+  }
+  .mfp-bottom-bar {
+    margin-top: -$image-padding-bottom + 4;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    width: 100%;
+    cursor: auto;
+  }
+  .mfp-title {
+    text-align: left;
+    line-height: 18px;
+    color: $caption-title-color;
+    word-wrap: break-word;
+    padding-right: 36px; // leave some space for counter at right side
+  }
+
+  .mfp-image-holder {
+    .mfp-content {
+      max-width: 100%;
+    }
+  }
+
+  .mfp-gallery {
+    .mfp-image-holder {
+      .mfp-figure {
+        cursor: pointer;
+      }
+    }
+  }
+
+
+  @if $include-mobile-layout-for-image {
+    @media screen and (max-width: 800px) and (orientation:landscape), screen and (max-height: 300px) {
+      /**
+       * Remove all paddings around the image on small screen
+       */
+      .mfp-img-mobile {
+        .mfp-image-holder {
+          padding-left: 0;
+          padding-right: 0;
+        }
+        img {
+          &.mfp-img {
+            padding: 0;
+          }
+        }
+        .mfp-figure {
+          /* The shadow behind the image */
+          &:after {
+            top: 0;
+            bottom: 0;
+          }
+          small {
+            display: inline;
+            margin-left: 5px;
+          }
+        }
+        .mfp-bottom-bar {
+          background: rgba(0,0,0,0.6);
+          bottom: 0;
+          margin: 0;
+          top: auto;
+          padding: 3px 5px;
+          position: fixed;
+          -webkit-box-sizing: border-box;
+          -moz-box-sizing: border-box;
+          box-sizing: border-box;
+          &:empty {
+            padding: 0;
+          }
+        }
+        .mfp-counter {
+          right: 5px;
+          top: 3px;
+        }
+        .mfp-close {
+          top: 0;
+          right: 0;
+          width: 35px;
+          height: 35px;
+          line-height: 35px;
+          background: rgba(0, 0, 0, 0.6);
+          position: fixed;
+          text-align: center;
+          padding: 0;
+        }
+      }
+    }
+  }
+}
+
+
+
+// Scale navigation arrows and reduce padding from sides
+@media all and (max-width: 900px) {
+  .mfp-arrow {
+    -webkit-transform: scale(0.75);
+    transform: scale(0.75);
+  }
+  .mfp-arrow-left {
+    -webkit-transform-origin: 0;
+    transform-origin: 0;
+  }
+  .mfp-arrow-right {
+    -webkit-transform-origin: 100%;
+    transform-origin: 100%;
+  }
+  .mfp-container {
+    padding-left: $popup-padding-left-mobile;
+    padding-right: $popup-padding-left-mobile;
+  }
+}
+
+
+
+// IE7 support
+// Styles that make popup look nicier in old IE
+@if $IE7support {
+  .mfp-ie7 {
+    .mfp-img {
+      padding: 0;
+    }
+    .mfp-bottom-bar {
+      width: 600px;
+      left: 50%;
+      margin-left: -300px;
+      margin-top: 5px;
+      padding-bottom: 5px;
+    }
+    .mfp-container {
+      padding: 0;
+    }
+    .mfp-content {
+      padding-top: 44px;
+    }
+    .mfp-close {
+      top: 0;
+      right: 0;
+      padding-top: 0;
+    }
+  }
+}
+
+
+.mfp-force-scrollbars {
+  &.mfp-wrap {
+    overflow-y: auto !important;
+    overflow-x: auto !important;
+  }
+  .mfp-img {
+    max-width: none;
+  }
+}
diff --git a/app/assets/stylesheets/common/base/modal.scss b/app/assets/stylesheets/common/base/modal.scss
new file mode 100644
index 00000000000..68e37dfad30
--- /dev/null
+++ b/app/assets/stylesheets/common/base/modal.scss
@@ -0,0 +1,210 @@
+.modal-open {
+  .dropdown-menu {
+     z-index: 2050;
+  }
+  .popover {
+    z-index: 2060;
+  }
+  .tooltip {
+    z-index: 2070;
+  }
+
+}
+
+.modal-backdrop {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1040;
+  background-color: $secondary_background_color;
+  &.fade {
+    opacity: 0;
+  }
+}
+
+.modal-backdrop,
+.modal-backdrop.fade.in {
+  -webkit-animation: fade .25s;
+  animation: fade .25s;
+  opacity: 0.8;
+  filter: alpha(opacity=80);
+}
+
+//fade in
+
+@-webkit-keyframes fade {
+    from {opacity: 0}
+    to {opacity: .8}
+}@keyframes fade {
+    from {opacity: 0}
+    to {opacity: .8}
+}
+.modal-outer-container {
+  display:table;
+  width:100%;
+  height:100%;
+}
+
+.modal-inner-container {
+  max-width: 710px;
+  margin: 0 auto;
+  background-color: $primary_background_color;
+  border: 1px solid $primary_border_color;
+  border: 1px solid lighten($primary_border_color, 10%);
+
+  box-shadow: 0 3px 7px rgba($primary_shadow_color, .8);
+  background-clip: padding-box;
+}
+
+
+.modal {
+  position: fixed;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1050;
+  overflow: auto;
+}
+.modal-form {
+  margin-bottom: 0;
+}
+.modal-footer {
+  margin: 0 15px;
+  padding: 14px 0 15px;
+  border-top: 1px solid $primary_border_color;
+}
+.modal-footer:before,
+.modal-footer:after {
+  display: table;
+  content: "";
+}
+.modal-footer:after {
+  clear: both;
+}
+
+.modal {
+    .nav {
+    padding: 10px 30px;
+    background-color: lighten($primary_background_color, 76%);
+    li > a {
+      font-size: 14px;
+    }
+    border-bottom: 1px solid $primary_border_color;
+
+  }
+
+    &.hidden {
+    display: none;
+  }
+
+  .modal-body {
+    textarea {
+      width: 99%;
+      height: 80px;
+    }
+    label {
+      color: lighten($primary_text_color, 35%);
+    }
+    p {
+      color: $primary_text_color;
+      font-size: 13px;
+    }
+    .archetype-option {
+      margin-bottom: 20px;
+    }
+    .warning {
+      color: $warning_text_color !important;
+    }
+  }
+  .password-confirmation {
+    display: none;
+  }
+
+  section.field {
+    margin-bottom: 20px;
+  }
+}
+
+.reply-where-modal {
+  width: 370px;
+  margin-left: -185px;
+  .modal-footer {
+    .btn {
+      text-align: left;
+      font-size: 18px;
+      line-height: 20px;
+      width: 310px;
+      margin-bottom: 10px;
+      display: block;
+      margin-left: 0;
+      .topic-title {
+        font-size: 13px;
+        font-weight: normal;
+      }
+      &.btn-reply-here {
+        background: lighten($secondary_background_color, 60%);
+        text-shadow: none;
+        color: lighten($primary_text_color, 35%);
+      }
+    }
+    .cancel {
+      text-decoration: underline;
+      float: right;
+      margin-right: 5px;
+    }
+  }
+}
+
+
+.delete-user-modal {
+  .modal-footer {
+    .btn {
+      font-weight: normal;
+      text-align: left;
+      font-size: 14px;
+      line-height: 20px;
+      margin-bottom: 10px;
+      display: inline-block;
+      margin-left: 0;
+    }
+    .cancel {
+      text-decoration: underline;
+      display: block;
+      margin-right: 5px;
+    }
+  }
+}
+
+.modal-footer .cancel-inline {
+  text-decoration: underline;
+  margin-left: 10px;
+}
+
+.invite-modal {
+  overflow: visible;
+  .ember-text-field {
+    width: 550px;
+  }
+}
+
+.permission-list{
+  list-style:none;
+  margin: 0 0 30px;
+  padding: 0;
+  .name {
+    margin-right: 20px;
+    display: inline-block;
+    min-width: 100px;
+  }
+  .permission {
+    margin-left: 20px;
+  }
+  .fa-times-circle {
+    margin-left: 5px;
+  }
+  li {
+    margin-bottom: 10px;
+  }
+}
diff --git a/app/assets/stylesheets/common/base/upload.scss b/app/assets/stylesheets/common/base/upload.scss
new file mode 100644
index 00000000000..425599d6cf2
--- /dev/null
+++ b/app/assets/stylesheets/common/base/upload.scss
@@ -0,0 +1,11 @@
+.add-upload .fa-plus {
+  font-size: 10px;
+  position: relative;
+  left: -5px;
+  bottom: -5px;
+  text-shadow:
+   -1px -1px 0 $btn-primary-background-color,
+    1px 1px 0 $btn-primary-background-color,
+    1px -1px 0 $btn-primary-background-color,
+    -1px 1px 0 $btn-primary-background-color;
+}
diff --git a/app/assets/stylesheets/common/base/user.scss b/app/assets/stylesheets/common/base/user.scss
new file mode 100644
index 00000000000..4b981a72348
--- /dev/null
+++ b/app/assets/stylesheets/common/base/user.scss
@@ -0,0 +1,64 @@
+
+// styling of bottom section
+.user-stream .child-actions {
+  margin-top: 8px;
+  .avatar-link {
+    float: none;
+  }
+  .fa {
+    width: 15px;
+    display: inline-block;
+    color: $secondary_text_color;
+  }
+  .avatar-wrapper {
+    border: none;
+  }
+  .avatar-link {
+    margin-right: 3px;
+
+  }
+}
+
+.user-navigation {
+
+    .map {
+    height: 50px;
+  }
+  .avatar {
+    float: left;
+    width: 45px;
+  }
+  nav.buttons {
+    width: 180px;
+    padding: 0;
+    .btn {
+      width: 100%;
+      margin-bottom: 5px;
+      @include box-sizing(border-box);
+    }
+  }
+  h2 {
+    a {
+      font-size: 14px;
+      color: $link_color;
+      cursor: pointer;
+    }
+  }
+
+
+}
+
+.avatar-selector {
+  label {
+    display: inline-block;
+    margin-right: 10px;
+  }
+  #avatar-input {
+    width: 0;
+    height: 0;
+    overflow: hidden;
+  }
+  .avatar {
+    margin: 5px 10px 5px 0;
+  }
+}