diff --git a/app/assets/stylesheets/application.css.sass b/app/assets/stylesheets/application.css.sass
index c009f7d1d..d48cdc25a 100644
--- a/app/assets/stylesheets/application.css.sass
+++ b/app/assets/stylesheets/application.css.sass
@@ -12,6 +12,7 @@
 @import 'opengraph'
 @import 'help'
 @import 'profile'
+@import 'publisher'
 
 /* ====== media ====== */
 .media
@@ -527,249 +528,11 @@ form p.checkbox_select
 *:-moz-placeholder
   @include placeholder_styles
 
-#publisher
-  :z-index 1
-  :color $text-grey
-  :position relative
-  :margin
-    :top 0
-    :bottom 0
-  :padding 12px
-    :top 0
-    :bottom 22px
-  :top 0
-
-  :border
-    :bottom 1px #eee solid
-
-  form
-    textarea
-      :resize none
-      :height 50px
-      :margin 0
-
-  &.mention_popup
-    :padding 1px 12px
-    :margin
-      :bottom 0
-    :border
-      :bottom none
-
-  &.closed
-    .options_and_submit
-      :display none !important
-
-    .counter
-      :display none
-
-  &:not(.closed)
-    textarea
-      :margin
-        :bottom 30px
-
-  .options_and_submit
-    :min-height 21px
-    :clear both
-    :position relative
-    :padding
-      :top 6px
-    :margin
-      :bottom -2px
-
-    input
-      :display inline
-
-    .public_toggle
-      :text
-        :align right
-      .dropdown
-        :text
-          :align left
-
-      .icons-monotone_wrench_settings
-        :display inline-block
-        :width 16px
-        :height 16px
-
-      a.question_mark
-        :text-decoration none
-
-    #publisher_service_icons
-      :position relative
-      :top 3px
-      :margin
-        :right 10px
-
-      .social_media_logos-facebook-16x16,
-      .social_media_logos-twitter-16x16,
-      .social_media_logos-tumblr-16x16,
-      .social_media_logos-wordpress-16x16,
-      .social_media_logos-email-16x16,
-      .social_media_logos-feed-16x16,
-      .social_media_logos-website-16x16
-        :display inline-block
-        :height 16px
-        :width 16px
-
-    #fileInfo
-      :display inline
-      :position relative
-      :top -2px
-
-  #status_message_fake_text
-    :min-height 20px
-
-
-  .content_creation
-    :margin
-      :top 1em
-
-  #file-upload
-    :bottom 1px !important
-    :display inline-block
-    :margin 0
-    :padding .3em .3em 3px
-    :position absolute !important
-    :right 6px
-    :cursor pointer
-
-
-    input[type='file']
-      :cursor pointer
-      :right initial !important
-      :height 100%
-      :width 100%
-      &::-webkit-file-upload-button
-        :cursor pointer
-
-    img
-      @include opacity(0.4)
-      :vertical-align bottom
-
-    &:hover
-      :color $text-dark-grey
-      :cursor pointer
-
-      img
-        @include opacity(0.8)
-
-    &:active
-      :color #444
-      :text-shadow 0 1px 0 #fafafa
-
-      img
-        @include opacity(1)
-
-    &.loading
-      @include opacity(0.5)
-
-#publisher_textarea_wrapper
-  #hide_publisher
-    @include opacity(0.3)
-    :z-index 5
-    :padding 3px
-    :position absolute
-    :right 6px
-    :margin-top 9px
-
-    .icons-deletelabel
-      :height 14px
-      :width 14px
-
-    &:hover
-      @include opacity(1)
-
-  @include border-radius(2px)
-
-  :border 1px solid #ccc
-  :background #fff
-
-  &.active
-    :border 1px solid $border-dark-grey
-
-  :position relative
-  :padding
-    :right 10px
-
-  textarea
-    :z-index 2
-    :border none
-
-    &:focus
-      :outline 0
-      :background transparent
-
-  &.with_attachments
-    :padding-bottom 38px
-
-  #photodropzone
-    :z-index 3
-    :position absolute
-    :bottom 0
-    :right 35px
-    :width 430px
-    :left 5px
-    :padding 0
-
-    li
-      :display inline-block
-      :margin-right 4px
-      img
-        :width 50px
-        :max-height 55px
-      .circle
-        @include border-radius(20px)
-
-        :display none
-        :z-index 1
-        :position absolute
-        :right -7px
-        :top -5px
-        :background
-          :color #333
-
-        :width 20px
-        :max-width 20px
-        :height 20px
-        :max-height 20px
-
-        :border 1px solid #fff
-
-      .x
-        :display none
-        :z-index 2
-        :position absolute
-        :top -3px
-        :right -1px
-        :font
-          :size small
-          :weight bold
-
-      &:hover
-        :cursor default
-        .circle
-          :display block
-        .x
-          :display block
-
-  .counter
-    :position absolute
-    :font-size 13px
-    :padding 12px 0 0 5px
-  .warning
-    :color orange
-  .exceeded
-    :color red
 .field_with_submit
   input[type='text']
     :width 82%
     :display inline
 
-#publisher.closed
-  #publisher_textarea_wrapper
-    #hide_publisher
-      :display none
-
 .dim
   @include opacity(0.3)
 
@@ -926,36 +689,6 @@ input[type="search"]
     :height 100px
     :width 100px
 
-#publisher_photo_upload
-  :position absolute
-  :display inline
-  :left 600px
-  :top 0
-  :z-index 10
-
-#profile_photo_upload
-  :margin
-    :top 5px
-  :min-height 100px
-  :position relative
-
-  img
-    @include border-radius(5px)
-    @include box-shadow(0,1px,2px,#666)
-
-    :position absolute
-    :left 0
-    :height 100px
-    :width 100px
-
-    &.avatar
-      @include transition(opacity, 0.5s)
-      &.loading
-        @include opacity(0.3)
-
-  :padding
-    :left 120px
-
 h3 span.current_gs_step
   :color #22C910
 
@@ -2678,26 +2411,6 @@ body
   :background
     :color #e8f7ff
 
-#publisher-images
-  #locator
-    :bottom 1px !important
-    :display inline-block
-    :margin 0
-    :position absolute !important
-    :right 30px
-    :cursor pointer
-    img
-      :padding-top 2px
-      @include opacity(0.4)
-    &:hover
-      :color $text-dark-grey
-      :cursor pointer
-      img
-        @include opacity(0.8)
-  .btn
-    :height 19px
-    :width 19px
-
 #location
   :border 1px solid $border-dark-grey
   :height 20px
diff --git a/app/assets/stylesheets/publisher.css.scss b/app/assets/stylesheets/publisher.css.scss
new file mode 100644
index 000000000..43f5f60d4
--- /dev/null
+++ b/app/assets/stylesheets/publisher.css.scss
@@ -0,0 +1,303 @@
+#publisher {
+  z-index: 1;
+  color: $text-grey;
+  position: relative;
+  margin-top: 0;
+  margin-bottom: 0;
+  padding: 0 12px 22px 12px;
+  top: 0;
+  border-bottom: 1px #eee solid;
+
+  form {
+    textarea {
+      resize: none;
+      height: 50px;
+      margin: 0;
+    }
+  }
+
+  &.mention_popup {
+    padding: 1px 12px;
+    margin-bottom: 0;
+    border-bottom: none;
+  }
+
+  &.closed {
+    .options_and_submit {
+      display: none !important;
+    }
+
+    .counter {
+      display: none;
+    }
+  }
+
+  &:not(.closed) {
+    textarea {
+      margin-bottom: 30px;
+    }
+  }
+
+  .options_and_submit {
+    min-height: 21px;
+    clear: both;
+    position: relative;
+    padding-top: 6px;
+    margin-bottom: -2px;
+
+    input {
+      display: inline;
+    }
+
+    .public_toggle {
+      text-align: right;
+      .dropdown {
+        text-align: left;
+      }
+
+      .icons-monotone_wrench_settings {
+        display: inline-block;
+        width: 16px;
+        height: 16px;
+      }
+
+      a.question_mark {
+        text-decoration: none;
+      }
+    }
+
+    #publisher_service_icons {
+      position: relative;
+      top: 3px;
+      margin-right: 10px;
+
+      .social_media_logos-facebook-16x16,
+      .social_media_logos-twitter-16x16,
+      .social_media_logos-tumblr-16x16,
+      .social_media_logos-wordpress-16x16,
+      .social_media_logos-email-16x16,
+      .social_media_logos-feed-16x16,
+      .social_media_logos-website-16x16 {
+        display: inline-block;
+        height: 16px;
+        width: 16px;
+      }
+    }
+
+    #fileInfo {
+      display: inline;
+      position: relative;
+      top: -2px;
+    }
+  }
+
+  #status_message_fake_text {
+    min-height: 20px;
+  }
+
+  .content_creation {
+    margin-top: 1em;
+  }
+
+  #file-upload {
+    bottom: 1px !important;
+    display: inline-block;
+    margin: 0;
+    padding: .3em .3em 3px;
+    position: absolute !important;
+    right: 6px;
+    cursor: pointer;
+
+    input[type='file'] {
+      cursor: pointer;
+      right: initial !important;
+      height: 100%;
+      width: 100%;
+      &::-webkit-file-upload-button {
+        cursor: pointer;
+      }
+    }
+
+    img {
+      @include opacity(0.4);
+      vertical-align: bottom;
+    }
+
+    &:hover {
+      color: $text-dark-grey;
+      cursor: pointer;
+
+      img {
+        @include opacity(0.8);
+      }
+    }
+
+    &:active {
+      color: #444;
+      text-shadow: 0 1px 0 #fafafa;
+
+      img {
+        @include opacity(1);
+      }
+    }
+
+    &.loading {
+      @include opacity(0.5);
+    }
+  }
+}
+
+#publisher_textarea_wrapper {
+  #hide_publisher {
+    @include opacity(0.3);
+    z-index: 5;
+    padding: 3px;
+    position: absolute;
+    right: 6px;
+    margin-top: 9px;
+
+    .icons-deletelabel {
+      height: 14px;
+      width: 14px;
+    }
+
+    &:hover {
+      @include opacity(1);
+    }
+  }
+
+  @include border-radius(2px);
+
+  border: 1px solid #ccc;
+  background: #fff;
+
+  &.active {
+    border: 1px solid $border-dark-grey;
+  }
+
+  position: relative;
+  padding-right: 10px;
+
+  textarea {
+    z-index: 2;
+    border: none;
+
+    &:focus {
+      outline: 0;
+      background: transparent;
+    }
+  }
+
+  &.with_attachments {
+    padding-bottom: 38px;
+  }
+
+  #photodropzone {
+    z-index: 3;
+    position: absolute;
+    bottom: 0;
+    right: 35px;
+    width: 430px;
+    left: 5px;
+    padding: 0;
+
+    li {
+      display: inline-block;
+      margin-right: 4px;
+      img {
+        width: 50px;
+        max-height: 55px;
+      }
+      .circle {
+        @include border-radius(20px);
+
+        display: none;
+        z-index: 1;
+        position: absolute;
+        right: -7px;
+        top: -5px;
+        background-color: #333;
+
+        width: 20px;
+        max-width: 20px;
+        height: 20px;
+        max-height: 20px;
+        border: 1px solid #fff;
+      }
+
+      .x {
+        display: none;
+        z-index: 2;
+        position: absolute;
+        top: -3px;
+        right: -1px;
+        font-size: small;
+        font-weight: bold;
+      }
+
+      &:hover {
+        cursor: default;
+        .circle {
+          display: block;
+        }
+        .x {
+          display: block;
+        }
+      }
+    }
+  }
+
+  .counter {
+    position: absolute;
+    font-size: 13px;
+    padding: 12px 0 0 5px;
+  }
+  .warning {
+    color: orange;
+  }
+  .exceeded {
+    color: red;
+  }
+}
+
+#publisher.closed {
+  #publisher_textarea_wrapper {
+    #hide_publisher {
+      display: none;
+    }
+  }
+}
+
+#publisher_photo_upload {
+  position: absolute;
+  display: inline;
+  left: 600px;
+  top: 0;
+  z-index: 10;
+}
+
+#publisher-images {
+  #locator {
+    bottom: 1px !important;
+    display: inline-block;
+    margin: 0;
+    position: absolute !important;
+    right: 30px;
+    cursor: pointer;
+    img {
+      padding-top: 2px;
+      @include opacity(0.4);
+    }
+    &:hover {
+      color: $text-dark-grey;
+      cursor: pointer;
+      img {
+        @include opacity(0.8);
+      }
+    }
+  }
+  .btn {
+    height: 19px;
+    width: 19px;
+  }
+}