Merge pull request #5342 from AugierLe42e/sass-to-scss

Refactor application.css and bootstrap-headerfix.css

4 files changed, 1868 insertions, 1517 deletions

diff --git a/app/assets/stylesheets/application.css.sass b/app/assets/stylesheets/application.css.sass
deleted file mode 100644
index 5e52dbd1a..000000000
--- a/app/assets/stylesheets/application.css.sass
+++ /dev/null
@@ -1,1477 +0,0 @@
-@import 'compass'
-@import 'colors'
-@import 'ui'
-@import '_mixins'
-@import '_flash_messages'
-@import 'new_styles/_spinner'
-
-@import 'sidebar'
-@import 'leftnavbar'
-@import 'sprites'
-@import 'header'
-@import 'footer'
-@import 'opengraph'
-@import 'poll'
-@import 'help'
-@import 'publisher_blueprint'
-@import 'facebox'
-@import 'aspects'
-@import 'stream-faces'
-@import 'popover'
-@import 'stream_element_blueprint'
-@import 'report'
-@import 'new_styles/_forms'
-@import 'tag'
-@import 'photo'
-
-@import 'perfect-scrollbar'
-
-/* ====== media ====== */
-.media
-  :margin 10px
-
-.media, .bd
-  :overflow hidden
-  :_overflow visible
-  :zoom 1
-
-.media .img
-  :float left
-  :margin-right 10px
-
-.media .img img
-  :display block
-
-.media .imgEt
-  :float right
-  :margin-left 10px
-/* ====== ----- ====== */
-
-body
-  :padding 2em
-  :margin 0
-    :top 33px
-  :background-color $background-white
-
-  :font
-    :family "Helvetica Neue",Helvetica,Arial,sans-serif
-    :size 13px
-
-a
-  :color $blue
-  :text
-    :decoration none
-  &:hover
-    :color $blue
-    :text
-      :decoration underline
-  &.disabled
-    :color $link-disabled-grey
-    :cursor default
-  &.disabled.button:hover
-    :color $link-disabled-grey
-    :cursor default
-    :background #f7f7f7
-
-p
-  :word-wrap break-word
-
-h1, h2, h3, h4
-  :margin
-    :bottom 5px
-
-  small
-    :font-size small
-    :color $text-grey
-
-ul > li
-  :list-style none
-
-.content ul li
-  :list-style disc
-
-.rtl
-  :direction rtl
-  :text-align right
-
-.hidden
-  :display none
-
-.avatar
-  :-webkit-box-shadow rgba(0,0,0,0.12) 0px 0px 5px inset
-  :-moz-box-shadow rgba(0,0,0,0.12) 0px 0px 5px inset
-
-  :background
-    :color $background-grey
-
-  :width 50px
-  :height 50px
-
-  :overflow hidden
-
-#content
-  :background
-    :color #fff
-  :border 1px solid #ccc
-  :height 100%
-
-.login_error,
-.login_alert
-  :color rgb(208,49,43)
-  :text-shadow 1px 1px 20px rgb(208,49,43)
-
-.login_notice
-  :color rgb(10,150,10)
-  :text-shadow 1px 1px 20px rgb(126,240,77)
-
-.fieldWithErrors
-  :display inline
-
-.error_messages
-  :width 400px
-  :border 2px solid #CF0000
-  :padding 0
-  :padding-bottom 12px
-  :margin-bottom 20px
-  :background-color #f0f0f0
-  :font
-    :size 12px
-  h2
-    :text-align left
-    :padding 5px 5px 5px 15px
-    :margin 0
-    :font
-      :weight bold
-      :size 12px
-    :background-color #c00
-  p
-    :margin 8px 10px
-  ul
-    :margin 0
-
-//////////////////////////////////
-
-//////////////////////////////////
-//hacks for tagging plugin...
-ul.as-selections
-  :width 100% !important
-//////////////////////////////////
-
-.unread
-  :background-color #E6E6E6
-  :color #333 !important
-  time
-    :color #333 !important
-
-#author_info
-  :position relative
-
-  .avatar img
-    :position relative
-    :top 0px
-    :display inline-block
-    :height 30px
-    :width 30px
-
-  .from
-    :display inline-block
-
-  &.profile
-    .from
-      :padding 0
-
-  h2,
-  h3,
-  h4,
-  h5
-    :display inline-block
-    :margin
-      :bottom 10px
-      :right 10px
-  h2
-    :margin
-      :bottom 0
-
-  &.show
-    a
-      :margin
-        :right 1em
-      :font
-        :weight normal
-    h4,
-    h5
-      :margin 0
-      :padding 0
-
-  .right
-    :top 10px
-
-  .description
-    :margin
-      :bottom 10px
-
-.info
-  :font-size smaller
-
-.controls
-  :z-index 6
-  :float right
-
-  .post_report, .comment_report
-    :display inline-block
-
-    .icons-report
-      :height 14px
-      :width 14px
-
-  .block_user
-    :display inline-block
-
-    .icons-ignoreuser
-      :height 14px
-      :width 14px
-
-  .delete
-    :display inline-block
-
-    .icons-deletelabel
-      :height 14px
-      :width 14px
-
-  a:hover
-    :text-decoration none
-
-.grey,
-.grey *
-  :color $text-grey
-
-.pull-left
-  :float left
-
-.pull-right
-  :float right
-
-.details,
-.details *
-  :font
-    :weight normal
-
-.time,
-.via
-  :color #aaa
-  a
-    :color $text-grey
-  :text
-    :decoration none
-  :border none
-
-#user_name
-  :margin
-    :bottom 20px
-
-  img
-    :margin
-      :right 10px
-    :display inline-block
-    :float left
-    :height 40px
-
-  h1
-    :margin
-      :bottom 7px
-    :line-height 18px
-    a
-      :color #000
-
-  span
-    :size small
-    :font
-      :weight normal
-    :color $text-grey
-  #latest_message_time
-    :font-style italic
-  ul
-    :display inline
-    :margin 0
-    :padding 0
-
-    > li
-      :display inline
-      :margin
-        :right 1em
-
-.stream.show
-  &:hover
-    > li
-      :background none
-      :border none
-
-.submit_button
-  input
-    :float right
-
-#photo_container
-  :text
-    :align center
-
-#show_photo
-  :z-index 11
-  :position relative
-  :display inline-block
-  :max-width 100%
-
-  img
-    :max-width 100%
-
-  #photo_spinner
-    :z-index 1
-    :position absolute
-    :height 100px
-    :width 100px
-
-  #caption
-    :min-height 20px
-    :padding 0 10px
-    :font
-      :size 16px
-    :color #333
-
-input:not([type='submit']):not([type='reset']):not([type='hidden']):not(.as-input),
-textarea
-  @include border-radius(2px)
-  :background-color #fff
-  :color #000
-  :margin-top 1px
-  :font
-    :family "Arial", "Helvetica", sans-serif
-    :size 14px
-
-  :padding 0.3em
-
-  :display block
-  :border 1px solid #ccc
-  :height auto
-
-input[type='checkbox']
-  :width auto !important
-
-form p
-  :position relative
-  :padding 0
-  :margin 0
-
-form#update_profile_form p.checkbox_select
-  label
-    :top 0
-
-form p.checkbox_select
-  label
-    :left 25px
-    :top 3px
-    :position absolute
-    :font-size 1em
-  img
-    :position relative
-    :top 6px
-
-@mixin placeholder_styles
-  :color $text-grey
-  :text-shadow 0 1px 1px #eee
-  :font-weight normal
-
-.placeholder
-  @include placeholder_styles
-
-/* those can't be combined, see: http://stackoverflow.com/questions/2610497 */
-*::-webkit-input-placeholder
-  @include placeholder_styles
-
-*::-moz-placeholder
-  @include placeholder_styles
-
-.field_with_submit
-  input[type='text']
-    :width 82%
-    :display inline
-
-.dim
-  @include opacity(0.3)
-
-img.thumb_small
-  :max-height 50px
-  :max-width 50px
-img.thumb_medium
-  :max-height 100px
-  :max-width 100px
-img.thumb_large
-  :max-height 300px
-  :max-width 300px
-img.scaled_full
-  :max-height 700px
-  :max-width 700px
-
-#thumbnails
-  a
-    :display inline-block
-    :height 140px
-    :min-height 100px
-    :margin
-      :bottom 5px
-      :right 2px
-
-    img
-      :height 140px
-
-ul#settings_nav
-  :display inline
-  :padding 0
-  :font
-    :size large
-  :position absolute
-  :left 198px
-  :top 5px
-
-  > li
-    :display inline
-    :margin
-      :right 1em
-    :font
-      :weight 700
-
-    a
-      :padding 2px
-      :font
-        :weight normal
-
-.settings_pane
-  :display none
-
-#account_data
-  a
-    :line-height 30px
-
-.contact_pictures.horizontal
-  img
-    :margin-right -5px
-
-#thumbnails
-  :line-height 14px
-
-.dull
-  :color #aaa
-  :text-align center
-  :font
-    :style italic
-
-  a
-    :color #69AEDD
-
-h1,h2,h3,h4
-  .description
-    :font
-      :size 70%
-      :weight 100
-    :color #aaa
-    :margin
-      :top 0.5em
-
-h2,h3,h4
-  .description
-    :font
-      :size 80%
-      :weight 200
-
-input[type="search"]
-  :-webkit-appearance textfield
-  :-moz-appearance textfield
-
-#photo_edit_options
-  :display none
-
-#photodropzone
-  :padding 0px
-  :margin 0px
-
-#section_header
-  :width 100%
-  :border
-    :bottom 2px solid #777
-  :position relative
-
-  :margin
-    :bottom 2em
-  :padding
-    :bottom 0.4em
-
-  h2
-    :display inline
-
-  .right
-    :margin
-      :top 10px
-
-  h4
-    :display inline
-    :margin
-      :left 1em
-
-.photo_options
-  :color $text-grey
-  :text
-    :align center
-
-.inline
-  :display inline
-
-.floating
-  @include box-shadow(0,1px,3px,#333)
-
-  :position relative
-  :padding 12px
-  :margin
-    :bottom 2em
-  :background
-    :color rgb(255,255,255)
-
-  :border
-    :bottom 1px solid #ccc
-    :top 1px solid #fff
-
-  .submit_block
-    :position absolute
-    :bottom 13px
-    :right 12px
-
-  form
-    :display relative
-
-#user_photo_uploader
-  .avatar
-    @include border-radius(5px)
-
-    :height 100px
-    :width 100px
-
-h3 span.current_gs_step
-  :color #22C910
-
-ul#request_result
-  :padding 0
-  :margin 0
-  li
-    :margin
-      :bottom 25px
-    input.add
-      :color green
-  .stream_element
-    .content
-      :display inline
-      :position relative
-      :bottom 2.5em
-      :padding 0
-
-#signup_field
-  :margin
-    :top -200px
-  :height 46px
-  :padding 0
-  :width 400px
-  :display inline
-
-  div
-    :display inline
-
-  #mce-responses
-    :margin
-      :top 12px
-    :font
-      :size 12px
-    :display block
-    :color $text-grey
-    :text-shadow 0 1px 0 #fff
-
-    #mce-error-response
-      :color red
-
-    #mce-success-response
-      :color green
-
-  input[type='text']
-    :top -1px
-    :margin 0
-      :right -3px
-    :width 300px
-
-
-    :border-radius 5px 0 0 5px
-    :-webkit-border-radius 5px 0 0 5px
-    :-moz-border-radius 5px 0 0 5px
-
-    :position relative
-    :display inline
-    :padding 12px
-    :font
-      :size 18px
-
-  #big_action_button, input[type='submit']
-    @include linear-gradient(rgb(65,182,250),rgb(0,123,194))
-
-    :height 47px
-    :margin 0
-    :background
-      :color $blue
-
-    :-webkit-border-radius 0 5px 5px 0
-    :-moz-border-radius 0 5px 5px 0
-    :border-radius 0 5px 5px 0
-    :border 1px solid #CCC
-
-    :padding 12px
-    :font
-      :size 18px
-      :weight bold
-    :color #eee
-    :text-shadow 0 1px 0 #333
-
-    :text
-      :align center
-
-    &:hover
-      @include linear-gradient(rgb(0,136,209),rgb(113,204,255))
-
-#diaspora_description
-  :background
-    :image image-url('branding/ball.png')
-    :repeat no-repeat
-    :position top center
-
-  :padding
-    :top 250px
-  :margin
-    :top -200px
-
-
-  :font
-    :size 3.3em
-    :weight bold
-  :text-shadow 0 1px 3px #999
-
-  p
-    @include box-shadow(0,1px,3px,#ccc)
-    :padding 12px
-    :background
-      :color #fff
-
-#login_field
-  :text
-    :align left
-  :font
-    :style italic
-  :margin
-    :top 14px
-    :left 540px
-  :color $text-grey
-
-
-ul#press_logos
-  :margin 0
-    :top 100px
-  :padding 0
-  > li
-    :display inline
-    :margin
-      :right 30px
-
-    img
-      :height 40px
-
-    &:last-child
-      :margin
-        :right 0
-
-#landing_content
-  :margin
-    :top 100px
-  :text
-    :align center
-
-#why
-  :margin
-    :bottom 48px
-
-  h2
-    :text-shadow 0 1px #fff
-    :border
-      :bottom 3px solid #eee
-
-#signup
-  :margin
-    :bottom 48px
-
-#already_invited_pane
-  h4
-    :color $text-dark-grey
-  :color $text-dark-grey
-
-#search_title
-  :font
-    :weight 200
-
-  .term
-    :font
-      :weight bold
-
-.aspects
-  :position relative
-  :margin
-    :top 1em
-
-  .right
-    :right 12px
-
-  .contact_list
-    :height auto
-    :max-height auto
-    :width 500px
-
-.aspects .aspect_badge
-  :font
-    :size 1em
-
-.share_with
-  :min-width 430px
-
-  .avatar
-    :width 50px
-    :height 50px
-    :float left
-
-  h4,p
-    :padding
-      :left 64px
-
-  p
-    :color #eee
-
-#aspects_list
-  :height auto
-
-.show_comments
-  :border
-    :top 1px solid $border-grey
-  :margin
-    :top 5px
-
-.show_comments,
-.likes_container
-  a
-    :color $text-grey
-
-.likes
-  .entypo.heart
-    :font-size 16px
-    :line-height 16px
-    :vertical-align top
-    :margin-right 5px
-
-  .bd
-    :display inline-block
-
-    .expand_likes
-      :vertical-align text-bottom
-
-.mark_all_read
-  :position relative
-  :top 10px
-
-#inner_account_delete
-  :width 810px
-
-.icons-monotone_email_letter_round
-  :height 128px
-  :width 128px
-
-#email_invitation
-  input
-    :width 100%
-  textarea
-    :width 100%
-
-.share_with
-  .add_aspect
-    @include border-radius(5px)
-
-    :margin
-      :top 0.5em
-    :background
-      :color #ddd
-    p
-      :padding
-        :left 1em
-      input[type='text']
-        :width 95%
-
-      &.checkbox_select
-        label
-          :padding
-            :left 15px
-          :top 0
-        :height 2em
-    .right
-      :z-index 5
-      :top 34px
-      :right 1em
-
-  .done
-    :padding 1em
-      :bottom 2em
-    .right
-      :right 1em
-
-.invite_friends
-  :padding 1em
-  :background
-    :color $background-grey
-  :border 1px solid #ccc
-
-#remember_me
-  input[type='checkbox']
-    :display inline
-    :height auto !important
-    :top 2px !important
-  label
-    :font-size inherit !important
-    :position static
-
-.public_icon, .service_icon
-  :cursor pointer
-
-#contact_visibility_padlock:hover
-  @include opacity(0.7)
-
-.side_stream
-  .stream_element
-    :padding 10px 0
-  .avatar
-    :float left
-
-.diaspora_handle
-  :font
-    :size 12px
-    :weight normal
-  :color #555
-
-.add_tags
-  :font
-    :weight normal
-    :size 11px
-
-.hover_edit
-  :display none
-  :font
-    :weight normal
-    :size 11px
-  :margin
-    :left 5px
-
-.description:hover
-  .hover_edit
-    :display inline
-
-.date
-  :background
-    :color #e6e6e6
-  :border-radius 8px
-  :padding 5px
-  :color $text-grey
-
-  :text-align center
-  .day
-    :font-size 50px
-    :font-weight 200
-    :margin-bottom -15px
-    :margin-top -10px
-
-  .month
-    :font-size 14px
-
-.subtle
-  :color $text-grey
-  :font
-    :style italic
-
-.button.sign_up
-  @include linear-gradient(#D9FFA9,#B9E68A)
-  :text-shadow none
-  :color #333
-
-  &:hover
-    @include linear-gradient(darken(#D9FFA9,10%),darken(#B9E68A,10%))
-
-  &:active
-    @include linear-gradient(darken(#D9FFA9,20%),darken(#B9E68A,20%))
-
-#client-application-image
-  :max-width 100%
-
-#service_stream
-  :margin 0
-  :padding 0
-
-#authorize
-  :text-align center
-
-#application-description
-  :display inline-block
-  :width 300px
-  :padding-bottom 20px
-
-ul#requested-scopes
-  :vertical-align middle
-  li
-    :display inline-block
-    :padding 5px
-
-    img
-      :height 30px
-      :width 30px
-
-    .scope-description
-      :display none
-
-.item_count
-  :min-width 16px
-  :line-height 16px
-  :text-align center
-  :float right
-  @include border-radius(4px)
-  :margin-top 1px
-  :color $text-grey
-  :background
-    :color $background-grey
-  :display inline-block
-  :font
-    :size 11px
-    :weight 700
-
-ul.left_nav
-  :margin 0
-    :bottom 15px
-  :padding 0
-
-  &.sub
-    :padding-left 6px
-
-  a.community_aspect_selector
-    :width 152px
-    :vertical-align middle
-    :display inline-block
-    :line-height 25px
-    :text
-      :decoration none
-  a
-    :font-weight bold
-    :color $link-grey
-    :text
-      :decoration none
-
-  li
-    :position relative
-    :width 100%
-
-  li.active
-    > a.home_selector:not(.sub_selected)
-      :font
-        :weight 700
-
-    > a:not(.sub_selected)
-      :color #333
-      .item_count
-        :color $text-dark-grey
-
-  a.aspect_selector,
-  a.home_selector,
-  a.tag_selector,
-  a.element_selector
-    &:active
-      :cursor -webkit-grabbing
-      :cursor -moz-grabbing
-      :cursor grabbing
-
-  a.home_selector,
-  a.tag_selector,
-  a.element_selector,
-  .root_element
-    :display block
-    :width 100%
-    :padding 3px 7px
-
-  a.home_selector,
-  li.aspect_element,
-  a.element_selector
-    &:hover
-      @include border-radius(2px)
-      :background
-        :color lighten($blue,45%)
-      :text
-        :decoration none
-
-  .unfollow_icon
-    :margin-right 10px
-    :margin-top 4px
-    @include transition(opacity)
-    @include opacity(0.3)
-    :position absolute
-    :display none
-    :padding 0 5px
-    &:hover
-      @include opacity(1)
-
-  .edit
-    :margin-right 10px
-    :margin-top 4px
-    :width 12px
-    :height 12px
-    :margin-top 6px
-    @include transition(opacity)
-    @include opacity(0.3)
-    :float right
-    :display none
-    &:hover
-      @include opacity(1)
-
-  ul.sub_nav
-    :padding
-      :left 25px
-    :margin 0
-    li
-      :width 204px
-
-.section
-  .left_nav
-    a.aspect_selector,
-    a.home_selector
-      :width 150px
-    ul.sub_nav
-      :width 140px
-      &:hover
-        :width auto
-
-      a.aspect_selector
-        :width 112px
-        :vertical-align middle
-        :display inline-block
-        :line-height 25px
-        :text
-          :decoration none
-
-      a.tag_selector
-        :width 117px
-        :overflow hidden
-        :position relative
-        :display inline-block
-        &:after
-          :display inline-block
-          :content ""
-          :width 80px
-          :height 25px
-          :position absolute
-          :top 0px
-          :left 100px
-        &:hover:after
-          :background none
-
-      li
-        :height 25px
-        .icons-check_yes_ok
-          :height 18px
-          :width 18px
-          :display inline-block
-          :margin-left 3px
-          :vertical-align middle
-
-        .icons-deletelabel
-          :height 14px
-          :width 14px
-          :margin-top 4px
-
-      li.unfollow,
-      li.sub_nav_item
-        :width 172px
-
-      li.unfollow:hover,
-      li.sub_nav_item:hover,
-      li.hover
-        @include border-radius(2px)
-        :background
-          :color lighten($blue,45%)
-        .edit,
-        .unfollow_icon
-          :z-index 1
-          :display inline-block
-          .icons-monotone_close_exit_delete
-            :height 16px
-            :width 16px
-
-  .user_card
-    :margin-left 8px
-
-.unread-setter
-  :display none
-
-.stream_container
-  :min-height 500px
-
-  h3
-    :margin
-      :bottom 0
-  :border
-    :left 1px solid $border-grey
-  :padding
-    :left 10px
-    :top 20px
-  :margin
-    :left -10px
-    :top -20px
-
-#aspect_stream_header
-  :padding 0 12px
-
-.new_aspect,
-a.toggle_selector
-  :outline none
-  :color $text-grey
-  :font
-    :style italic
-
-  &:hover
-    :color $link-grey
-
-#community_spotlight
-  .avatar
-    :height 140px
-    :width 140px
-
-.user_card
-  @include border-radius(3px)
-  @include box-shadow(0,1px,5px,#ccc)
-  :padding 10px
-    :bottom 30px
-  :margin
-    :bottom 15px
-    :right 10px
-
-  :position relative
-
-  :min-height 220px
-
-  :vertical-align top
-
-  :border 1px solid #ccc
-  :display inline-block
-
-  :width 140px
-
-  .tags
-    :color $text-grey
-
-  h4
-    :margin
-      :bottom 0
-    :padding
-      :bottom 2px
-
-  .dropdown
-    :width 100%
-
-.add_user_to_aspect
-  :bottom 12px
-  :right 5px
-  :position absolute
-
-#right_service_icons
-  :text-align center
-  :padding 10px
-    :bottom 0
-
-  .social_media_logos-facebook-24x24,
-  .social_media_logos-twitter-24x24,
-  .social_media_logos-tumblr-24x24,
-  .social_media_logos-wordpress-24x24,
-  .social_media_logos-email-24x24,
-  .social_media_logos-feed-24x24,
-  .social_media_logos-website-24x24
-    :height 24px
-    :width 24px
-
-  a
-    :display inline-block
-
-.action_item
-  :padding-right 5px
-
-.accept_invitation_form,
-.sign_up_form
-  :min-height 350px
-  :font-size 16px
-  input[type='text'],
-  input[type='password'],
-  input[type='email']
-    :font-size 16px !important
-    :width 378px !important
-
-  .diaspora_id_text
-    :font-size 12px
-    :text-align right
-    :color $text-grey
-    :margin
-      :top -8px
-    :padding 0
-
-  .submit_field
-    :text-align right
-
-.accept_invitation_text
-  :font
-    :weight lighter
-
-.red
-  :color $red
-
-.green
-  :color green
-.resend
-  :color black
-  &:hover
-    :text-decoration none
-    :color black
-    &:hover
-      :text-decoration none
-
-#grey_header
-  @include box-shadow(0,1px,1px,#eee)
-  :background
-    :color #fafafa
-  :width 100%
-  :position absolute
-  :left 0
-  :top 0
-  :padding
-    :top 80px
-    :bottom 20px
-  :text
-    :align center
-  :border
-    :bottom 1px solid $border-grey
-
-.mobile_row
-  :margin
-    :bottom 50px
-
-.field_with_errors
-  :position relative
-
-  input
-    @include box-shadow(0,0,8px,lighten(#D00,30%))
-    :border 1px solid #D00 !important
-
-.field_with_errors .message
-  :color #D00
-  :font-size 12px
-  :position absolute
-  :top 4px
-  :right 10px
-  :left auto
-
-.new_user_form fieldset, .accept_invitation_form fieldset
-  @include border-radius(3px)
-
-  :background
-    :color #fff
-    :color rgba(255,255,255,0.95)
-
-  .submit_field
-    :margin
-      :top 15px
-  span.host_uri
-    :float right
-    :margin-top -28px
-    :color $text-grey
-    :padding-right 9px
-
-.center
-  :text-align center
-
-.nostrap,
-.nostrap:focus
-  :-webkit-box-shadow none
-  :-moz-box-shadow none
-  :box-shadow none
-
-#hello-there
-  p
-    :font-size medium
-  h1
-    :margin 0px
-  h2
-    :margin
-      :top 80px
-      :bottom 12px
-  h3
-    :font
-      :size large
-      :weight 200
-    :margin 0px
-  form, p
-    :margin-left 30px
-  input
-    :margin-bottom 15px
-  .hero-unit
-    :margin 20px 42px
-    :padding 40px 80px
-  .awesome
-    :text-align center
-    :margin-top 60px
-    .creation
-      :font-size 16px
-
-#profile_photo_upload
-  #fileInfo
-    :margin-top 12px
-    :text-align left
-
-#welcome-to-diaspora
-  :-webkit-box-shadow inset 0 -2px 10px rgba(0,0,0,0.35)
-  :-moz-box-shadow inset 0 -2px 10px rgba(0,0,0,0.35)
-
-  :position absolute
-  :width 100%
-  :left 0
-  :top 0
-  :padding
-    :top 50px
-    :bottom 10px
-  h1,h3
-    :color #fff
-    :text-overflow ellipsis
-    :white-space nowrap
-  :background orange
-  &:hover
-    #gs-skip-x
-      @include opacity(0.4)
-      @include transition(opacity, 0.25s)
-
-      &:hover
-        @include opacity(1)
-
-#gs-shim
-  :position absolute
-  :top 380px
-
-#gs-skip-x
-  @include opacity(0)
-  @include transition(opacity, 0.25s)
-
-  img
-    :position relative
-    :right 4px
-    :height 20px
-
-
-.avatar.micro
-  :height 20px
-  :width 20px
-
-#gs-name-form-spinner
-  :position absolute
-  :top 24px
-  :right -33px
-
-.left_nav
-  #new_tag_following
-    :width 137px
-    :margin
-      :left 24px
-
-    input[type='text']
-      :width 137px
-      :font
-        :size 13px
-
-  #tag_following_submit
-    &.hidden
-      :display none
-
-.nsfw-shield
-  @include border-radius(3px)
-  :background-color $background-grey
-  :width 90%
-  :padding 5px 10px
-  :border 1px solid $border-grey
-  :color $text-grey
-
-#back-to-top
-  :display block
-  :color white
-  :position fixed
-  :z-index 49
-  :right 20px
-  :bottom 20px
-  :opacity 0
-  :font-size 3em
-  :padding 0 11px 0 12px
-  :border-radius 10px
-  :background-color #aaa
-  &:hover
-    :opacity 0.85 !important
-  &.visible
-    :opacity 0.5
-
-.float-right
-  :float right
-  :margin-top 5px
-
-.nsfw_off
-  :font-size smaller
-  :color $text-grey
-  a
-    :color $text-dark-grey
-
-#fileInfo
-  :font-size small
-  :text-align right
-  :margin 5px 2px
-
-.post_preview_button
-  :padding 3px 9px 4px
-
-.post_preview
-  :padding
-    :top 5px
-  :border
-    :bottom 3px solid #3f8fba !important
-  :background
-    :color #e8f7ff
-
-#location
-  :border 1px solid $border-dark-grey
-  :height 20px
-  #location_address
-    :border none
-    :color #aaa
-    :height 10px
-    :width 430px
-    :float left
-  a#hide_location
-    :position absolute
-    :right 22px
-    :filter alpha(opacity=30)
-    :-moz-opacity 0.3
-    :-khtml-opacity 0.3
-    :opacity 0.3
-    :z-index 5
-  a#hide_location:hover
-    @include opacity(0)
-    :-khtml-opacity 1
-    :opacity 1
-    :cursor pointer
diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss
new file mode 100644
index 000000000..e0ab35fa4
--- /dev/null
+++ b/app/assets/stylesheets/application.css.scss
@@ -0,0 +1,1816 @@
+@import "compass";
+@import "colors";
+@import "ui";
+@import "_mixins";
+@import "_flash_messages";
+@import "new_styles/_spinner";
+
+@import "sidebar";
+@import "leftnavbar";
+@import "sprites";
+@import "header";
+@import "footer";
+@import "opengraph";
+@import "poll";
+@import "help";
+@import "publisher_blueprint";
+@import "facebox";
+@import "aspects";
+@import "stream-faces";
+@import "popover";
+@import "stream_element_blueprint";
+@import "report";
+@import "new_styles/_forms";
+@import "tag";
+@import "photo";
+
+@import "perfect-scrollbar";
+
+/* ====== media ====== */
+.media {
+  margin: 10px;
+}
+
+.media, .bd {
+  overflow: hidden;
+  _overflow: visible;
+  zoom: 1;
+}
+
+.media .img {
+  float: left;
+  margin-right: 10px;
+}
+
+.media .img img {
+  display: block;
+}
+
+.media .imgEt {
+  float: right;
+  margin-left: 10px;
+}
+
+/* ====== ----- ====== */
+
+body {
+  padding: 2em;
+  margin: 0 {
+    top: 33px;
+  };
+  background-color: $background-white;
+  font: {
+    family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    size: 13px;
+  };
+}
+
+a {
+  color: $blue;
+  text: {
+    decoration: none;
+  };
+  &:hover {
+    color: $blue;
+    text: {
+      decoration: underline;
+    };
+  }
+  &.disabled {
+    color: $link-disabled-grey;
+    cursor: default;
+  }
+  &.disabled.button:hover {
+    color: $link-disabled-grey;
+    cursor: default;
+    background: #f7f7f7;
+  }
+}
+
+p {
+  word-wrap: break-word;
+}
+
+h1, h2, h3, h4 {
+  margin: {
+    bottom: 5px;
+  };
+  small {
+    font-size: small;
+    color: $text-grey;
+  }
+}
+
+ul > li {
+  list-style: none;
+}
+
+.content ul li {
+  list-style: disc;
+}
+
+.rtl {
+  direction: rtl;
+  text-align: right;
+}
+
+.hidden {
+  display: none;
+}
+
+.avatar {
+  -webkit-box-shadow: rgba(0, 0, 0, 0.12) 0px 0px 5px inset;
+  -moz-box-shadow: rgba(0, 0, 0, 0.12) 0px 0px 5px inset;
+  background: {
+    color: $background-grey;
+  };
+  width: 50px;
+  height: 50px;
+  overflow: hidden;
+}
+
+#content {
+  background: {
+    color: white;
+  };
+  border: 1px solid #cccccc;
+  height: 100%;
+}
+
+.login_error,
+.login_alert {
+  color: rgb(208, 49, 43);
+  text-shadow: 1px 1px 20px rgb(208, 49, 43);
+}
+
+.login_notice {
+  color: rgb(10, 150, 10);
+  text-shadow: 1px 1px 20px rgb(126, 240, 77);
+}
+
+.fieldWithErrors {
+  display: inline;
+}
+
+.error_messages {
+  width: 400px;
+  border: 2px solid #cf0000;
+  padding: 0;
+  padding-bottom: 12px;
+  margin-bottom: 20px;
+  background-color: #f0f0f0;
+  font: {
+    size: 12px;
+  };
+  h2 {
+    text-align: left;
+    padding: 5px 5px 5px 15px;
+    margin: 0;
+    font: {
+      weight: bold;
+      size: 12px;
+    };
+    background-color: #cc0000;
+  }
+  p {
+    margin: 8px 10px;
+  }
+  ul {
+    margin: 0;
+  }
+}
+
+//////////////////////////////////
+
+//////////////////////////////////
+//hacks for tagging plugin...
+ul.as-selections {
+  width: 100% !important;
+}
+
+//////////////////////////////////
+
+.unread {
+  background-color: #e6e6e6;
+  color: #333333 !important;
+  time {
+    color: #333333 !important;
+  }
+}
+
+#author_info {
+  position: relative;
+  .avatar img {
+    position: relative;
+    top: 0px;
+    display: inline-block;
+    height: 30px;
+    width: 30px;
+  }
+  .from {
+    display: inline-block;
+  }
+  &.profile {
+    .from {
+      padding: 0;
+    }
+  }
+  h2,
+  h3,
+  h4,
+  h5 {
+    display: inline-block;
+    margin: {
+      bottom: 10px;
+      right: 10px;
+    };
+  }
+  h2 {
+    margin: {
+      bottom: 0;
+    };
+  }
+  &.show {
+    a {
+      margin: {
+        right: 1em;
+      };
+      font: {
+        weight: normal;
+      };
+    }
+    h4,
+    h5 {
+      margin: 0;
+      padding: 0;
+    }
+  }
+  .right {
+    top: 10px;
+  }
+  .description {
+    margin: {
+      bottom: 10px;
+    };
+  }
+}
+
+.info {
+  font-size: smaller;
+}
+
+.controls {
+  z-index: 6;
+  float: right;
+  .post_report, .comment_report {
+    display: inline-block;
+    .icons-report {
+      height: 14px;
+      width: 14px;
+    }
+  }
+  .block_user {
+    display: inline-block;
+    .icons-ignoreuser {
+      height: 14px;
+      width: 14px;
+    }
+  }
+  .delete {
+    display: inline-block;
+    .icons-deletelabel {
+      height: 14px;
+      width: 14px;
+    }
+  }
+  a:hover {
+    text-decoration: none;
+  }
+}
+
+.grey,
+.grey * {
+  color: $text-grey;
+}
+
+.pull-left {
+  float: left;
+}
+
+.pull-right {
+  float: right;
+}
+
+.details,
+.details * {
+  font: {
+    weight: normal;
+  };
+}
+
+.time,
+.via {
+  color: #aaaaaa;
+  a {
+    color: $text-grey;
+  }
+  text: {
+    decoration: none;
+  };
+  border: none;
+}
+
+#user_name {
+  margin: {
+    bottom: 20px;
+  };
+  img {
+    margin: {
+      right: 10px;
+    };
+    display: inline-block;
+    float: left;
+    height: 40px;
+  }
+  h1 {
+    margin: {
+      bottom: 7px;
+    };
+    line-height: 18px;
+    a {
+      color: black;
+    }
+  }
+  span {
+    size: small;
+    font: {
+      weight: normal;
+    };
+    color: $text-grey;
+  }
+  #latest_message_time {
+    font-style: italic;
+  }
+  ul {
+    display: inline;
+    margin: 0;
+    padding: 0;
+    > li {
+      display: inline;
+      margin: {
+        right: 1em;
+      };
+    }
+  }
+}
+
+.stream.show {
+  &:hover {
+    > li {
+      background: none;
+      border: none;
+    }
+  }
+}
+
+.submit_button {
+  input {
+    float: right;
+  }
+}
+
+#photo_container {
+  text: {
+    align: center;
+  };
+}
+
+#show_photo {
+  z-index: 11;
+  position: relative;
+  display: inline-block;
+  max-width: 100%;
+  img {
+    max-width: 100%;
+  }
+  #photo_spinner {
+    z-index: 1;
+    position: absolute;
+    height: 100px;
+    width: 100px;
+  }
+  #caption {
+    min-height: 20px;
+    padding: 0 10px;
+    font: {
+      size: 16px;
+    };
+    color: #333333;
+  }
+}
+
+input:not([type='submit']):not([type='reset']):not([type='hidden']):not(.as-input),
+textarea {
+  @include border-radius(2px);
+  background-color: white;
+  color: black;
+  margin-top: 1px;
+  font: {
+    family: "Arial", "Helvetica", sans-serif;
+    size: 14px;
+  };
+  padding: 0.3em;
+  display: block;
+  border: 1px solid #cccccc;
+  height: auto;
+}
+
+input[type='checkbox'] {
+  width: auto !important;
+}
+
+form p {
+  position: relative;
+  padding: 0;
+  margin: 0;
+}
+
+form#update_profile_form p.checkbox_select {
+  label {
+    top: 0;
+  }
+}
+
+form p.checkbox_select {
+  label {
+    left: 25px;
+    top: 3px;
+    position: absolute;
+    font-size: 1em;
+  }
+  img {
+    position: relative;
+    top: 6px;
+  }
+}
+
+@mixin placeholder_styles {
+  color: $text-grey;
+  text-shadow: 0 1px 1px #eeeeee;
+  font-weight: normal;
+}
+
+.placeholder {
+  @include placeholder_styles;
+}
+
+/* those can't be combined, see: http://stackoverflow.com/questions/2610497 */
+*::-webkit-input-placeholder {
+  @include placeholder_styles;
+}
+
+*::-moz-placeholder {
+  @include placeholder_styles;
+}
+
+.field_with_submit {
+  input[type='text'] {
+    width: 82%;
+    display: inline;
+  }
+}
+
+.dim {
+  @include opacity(0.3);
+}
+
+img.thumb_small {
+  max-height: 50px;
+  max-width: 50px;
+}
+
+img.thumb_medium {
+  max-height: 100px;
+  max-width: 100px;
+}
+
+img.thumb_large {
+  max-height: 300px;
+  max-width: 300px;
+}
+
+img.scaled_full {
+  max-height: 700px;
+  max-width: 700px;
+}
+
+#thumbnails {
+  a {
+    display: inline-block;
+    height: 140px;
+    min-height: 100px;
+    margin: {
+      bottom: 5px;
+      right: 2px;
+    };
+    img {
+      height: 140px;
+    }
+  }
+}
+
+ul#settings_nav {
+  display: inline;
+  padding: 0;
+  font: {
+    size: large;
+  };
+  position: absolute;
+  left: 198px;
+  top: 5px;
+  > li {
+    display: inline;
+    margin: {
+      right: 1em;
+    };
+    font: {
+      weight: 700;
+    };
+    a {
+      padding: 2px;
+      font: {
+        weight: normal;
+      };
+    }
+  }
+}
+
+.settings_pane {
+  display: none;
+}
+
+#account_data {
+  a {
+    line-height: 30px;
+  }
+}
+
+.contact_pictures.horizontal {
+  img {
+    margin-right: -5px;
+  }
+}
+
+#thumbnails {
+  line-height: 14px;
+}
+
+.dull {
+  color: #aaaaaa;
+  text-align: center;
+  font: {
+    style: italic;
+  };
+  a {
+    color: #69aedd;
+  }
+}
+
+h1,h2,h3,h4 {
+  .description {
+    font: {
+      size: 70%;
+      weight: 100;
+    };
+    color: #aaaaaa;
+    margin: {
+      top: 0.5em;
+    };
+  }
+}
+
+h2,h3,h4 {
+  .description {
+    font: {
+      size: 80%;
+      weight: 200;
+    };
+  }
+}
+
+input[type="search"] {
+  -webkit-appearance: textfield;
+  -moz-appearance: textfield;
+}
+
+#photo_edit_options {
+  display: none;
+}
+
+#photodropzone {
+  padding: 0px;
+  margin: 0px;
+}
+
+#section_header {
+  width: 100%;
+  border: {
+    bottom: 2px solid #777777;
+  };
+  position: relative;
+  margin: {
+    bottom: 2em;
+  };
+  padding: {
+    bottom: 0.4em;
+  };
+  h2 {
+    display: inline;
+  }
+  .right {
+    margin: {
+      top: 10px;
+    };
+  }
+  h4 {
+    display: inline;
+    margin: {
+      left: 1em;
+    };
+  }
+}
+
+.photo_options {
+  color: $text-grey;
+  text: {
+    align: center;
+  };
+}
+
+.inline {
+  display: inline;
+}
+
+.floating {
+  @include box-shadow(0, 1px, 3px, #333333);
+  position: relative;
+  padding: 12px;
+  margin: {
+    bottom: 2em;
+  };
+  background: {
+    color: rgb(255, 255, 255);
+  };
+  border: {
+    bottom: 1px solid #cccccc;
+    top: 1px solid white;
+  };
+  .submit_block {
+    position: absolute;
+    bottom: 13px;
+    right: 12px;
+  }
+  form {
+    display: relative;
+  }
+}
+
+#user_photo_uploader {
+  .avatar {
+    @include border-radius(5px);
+    height: 100px;
+    width: 100px;
+  }
+}
+
+h3 span.current_gs_step {
+  color: #22c910;
+}
+
+ul#request_result {
+  padding: 0;
+  margin: 0;
+  li {
+    margin: {
+      bottom: 25px;
+    };
+    input.add {
+      color: green;
+    }
+  }
+  .stream_element {
+    .content {
+      display: inline;
+      position: relative;
+      bottom: 2.5em;
+      padding: 0;
+    }
+  }
+}
+
+#signup_field {
+  margin: {
+    top: -200px;
+  };
+  height: 46px;
+  padding: 0;
+  width: 400px;
+  display: inline;
+  div {
+    display: inline;
+  }
+  #mce-responses {
+    margin: {
+      top: 12px;
+    };
+    font: {
+      size: 12px;
+    };
+    display: block;
+    color: $text-grey;
+    text-shadow: 0 1px 0 white;
+    #mce-error-response {
+      color: red;
+    }
+    #mce-success-response {
+      color: green;
+    }
+  }
+  input[type='text'] {
+    top: -1px;
+    margin: 0 {
+      right: -3px;
+    };
+    width: 300px;
+    border-radius: 5px 0 0 5px;
+    -webkit-border-radius: 5px 0 0 5px;
+    -moz-border-radius: 5px 0 0 5px;
+    position: relative;
+    display: inline;
+    padding: 12px;
+    font: {
+      size: 18px;
+    };
+  }
+  #big_action_button, input[type='submit'] {
+    @include linear-gradient(rgb(65, 182, 250), rgb(0, 123, 194));
+    height: 47px;
+    margin: 0;
+    background: {
+      color: $blue;
+    };
+    -webkit-border-radius: 0 5px 5px 0;
+    -moz-border-radius: 0 5px 5px 0;
+    border-radius: 0 5px 5px 0;
+    border: 1px solid #cccccc;
+    padding: 12px;
+    font: {
+      size: 18px;
+      weight: bold;
+    };
+    color: #eeeeee;
+    text-shadow: 0 1px 0 #333333;
+    text: {
+      align: center;
+    };
+    &:hover {
+      @include linear-gradient(rgb(0, 136, 209), rgb(113, 204, 255));
+    }
+  }
+}
+
+#diaspora_description {
+  background: {
+    image: image-url("branding/ball.png");
+    repeat: no-repeat;
+    position: top center;
+  };
+  padding: {
+    top: 250px;
+  };
+  margin: {
+    top: -200px;
+  };
+  font: {
+    size: 3.3em;
+    weight: bold;
+  };
+  text-shadow: 0 1px 3px #999999;
+  p {
+    @include box-shadow(0, 1px, 3px, #cccccc);
+    padding: 12px;
+    background: {
+      color: white;
+    };
+  }
+}
+
+#login_field {
+  text: {
+    align: left;
+  };
+  font: {
+    style: italic;
+  };
+  margin: {
+    top: 14px;
+    left: 540px;
+  };
+  color: $text-grey;
+}
+
+ul#press_logos {
+  margin: 0 {
+    top: 100px;
+  };
+  padding: 0;
+  > li {
+    display: inline;
+    margin: {
+      right: 30px;
+    };
+    img {
+      height: 40px;
+    }
+    &:last-child {
+      margin: {
+        right: 0;
+      };
+    }
+  }
+}
+
+#landing_content {
+  margin: {
+    top: 100px;
+  };
+  text: {
+    align: center;
+  };
+}
+
+#why {
+  margin: {
+    bottom: 48px;
+  };
+  h2 {
+    text-shadow: 0 1px white;
+    border: {
+      bottom: 3px solid #eeeeee;
+    };
+  }
+}
+
+#signup {
+  margin: {
+    bottom: 48px;
+  };
+}
+
+#already_invited_pane {
+  h4 {
+    color: $text-dark-grey;
+  }
+  color: $text-dark-grey;
+}
+
+#search_title {
+  font: {
+    weight: 200;
+  };
+  .term {
+    font: {
+      weight: bold;
+    };
+  }
+}
+
+.aspects {
+  position: relative;
+  margin: {
+    top: 1em;
+  };
+  .right {
+    right: 12px;
+  }
+  .contact_list {
+    height: auto;
+    max-height: auto;
+    width: 500px;
+  }
+}
+
+.aspects .aspect_badge {
+  font: {
+    size: 1em;
+  };
+}
+
+.share_with {
+  min-width: 430px;
+  .avatar {
+    width: 50px;
+    height: 50px;
+    float: left;
+  }
+  h4,p {
+    padding: {
+      left: 64px;
+    };
+  }
+  p {
+    color: #eeeeee;
+  }
+}
+
+#aspects_list {
+  height: auto;
+}
+
+.show_comments {
+  border: {
+    top: 1px solid $border-grey;
+  };
+  margin: {
+    top: 5px;
+  };
+}
+
+.show_comments,
+.likes_container {
+  a {
+    color: $text-grey;
+  }
+}
+
+.likes {
+  .entypo.heart {
+    font-size: 16px;
+    line-height: 16px;
+    vertical-align: top;
+    margin-right: 5px;
+  }
+  .bd {
+    display: inline-block;
+    .expand_likes {
+      vertical-align: text-bottom;
+    }
+  }
+}
+
+.mark_all_read {
+  position: relative;
+  top: 10px;
+}
+
+#inner_account_delete {
+  width: 810px;
+}
+
+.icons-monotone_email_letter_round {
+  height: 128px;
+  width: 128px;
+}
+
+#email_invitation {
+  input {
+    width: 100%;
+  }
+  textarea {
+    width: 100%;
+  }
+}
+
+.share_with {
+  .add_aspect {
+    @include border-radius(5px);
+    margin: {
+      top: 0.5em;
+    };
+    background: {
+      color: #dddddd;
+    };
+    p {
+      padding: {
+        left: 1em;
+      };
+      input[type='text'] {
+        width: 95%;
+      }
+      &.checkbox_select {
+        label {
+          padding: {
+            left: 15px;
+          };
+          top: 0;
+        }
+        height: 2em;
+      }
+    }
+    .right {
+      z-index: 5;
+      top: 34px;
+      right: 1em;
+    }
+  }
+  .done {
+    padding: 1em {
+      bottom: 2em;
+    };
+    .right {
+      right: 1em;
+    }
+  }
+}
+
+.invite_friends {
+  padding: 1em;
+  background: {
+    color: $background-grey;
+  };
+  border: 1px solid #cccccc;
+}
+
+#remember_me {
+  input[type='checkbox'] {
+    display: inline;
+    height: auto !important;
+    top: 2px !important;
+  }
+  label {
+    font-size: inherit !important;
+    position: static;
+  }
+}
+
+.public_icon, .service_icon {
+  cursor: pointer;
+}
+
+#contact_visibility_padlock:hover {
+  @include opacity(0.7);
+}
+
+.side_stream {
+  .stream_element {
+    padding: 10px 0;
+  }
+  .avatar {
+    float: left;
+  }
+}
+
+.diaspora_handle {
+  font: {
+    size: 12px;
+    weight: normal;
+  };
+  color: #555555;
+}
+
+.add_tags {
+  font: {
+    weight: normal;
+    size: 11px;
+  };
+}
+
+.hover_edit {
+  display: none;
+  font: {
+    weight: normal;
+    size: 11px;
+  };
+  margin: {
+    left: 5px;
+  };
+}
+
+.description:hover {
+  .hover_edit {
+    display: inline;
+  }
+}
+
+.date {
+  background: {
+    color: #e6e6e6;
+  };
+  border-radius: 8px;
+  padding: 5px;
+  color: $text-grey;
+  text-align: center;
+  .day {
+    font-size: 50px;
+    font-weight: 200;
+    margin-bottom: -15px;
+    margin-top: -10px;
+  }
+  .month {
+    font-size: 14px;
+  }
+}
+
+.subtle {
+  color: $text-grey;
+  font: {
+    style: italic;
+  };
+}
+
+.button.sign_up {
+  @include linear-gradient(#d9ffa9, #b9e68a);
+  text-shadow: none;
+  color: #333333;
+  &:hover {
+    @include linear-gradient(darken(#d9ffa9, 10%), darken(#b9e68a, 10%));
+  }
+  &:active {
+    @include linear-gradient(darken(#d9ffa9, 20%), darken(#b9e68a, 20%));
+  }
+}
+
+#client-application-image {
+  max-width: 100%;
+}
+
+#service_stream {
+  margin: 0;
+  padding: 0;
+}
+
+#authorize {
+  text-align: center;
+}
+
+#application-description {
+  display: inline-block;
+  width: 300px;
+  padding-bottom: 20px;
+}
+
+ul#requested-scopes {
+  vertical-align: middle;
+  li {
+    display: inline-block;
+    padding: 5px;
+    img {
+      height: 30px;
+      width: 30px;
+    }
+    .scope-description {
+      display: none;
+    }
+  }
+}
+
+.item_count {
+  min-width: 16px;
+  line-height: 16px;
+  text-align: center;
+  float: right;
+  @include border-radius(4px);
+  margin-top: 1px;
+  color: $text-grey;
+  background: {
+    color: $background-grey;
+  };
+  display: inline-block;
+  font: {
+    size: 11px;
+    weight: 700;
+  };
+}
+
+ul.left_nav {
+  margin: 0 {
+    bottom: 15px;
+  };
+  padding: 0;
+  &.sub {
+    padding-left: 6px;
+  }
+  a.community_aspect_selector {
+    width: 152px;
+    vertical-align: middle;
+    display: inline-block;
+    line-height: 25px;
+    text: {
+      decoration: none;
+    };
+  }
+  a {
+    font-weight: bold;
+    color: $link-grey;
+    text: {
+      decoration: none;
+    };
+  }
+  li {
+    position: relative;
+    width: 100%;
+  }
+  li.active {
+    > a.home_selector:not(.sub_selected) {
+      font: {
+        weight: 700;
+      };
+    }
+    > a:not(.sub_selected) {
+      color: #333333;
+      .item_count {
+        color: $text-dark-grey;
+      }
+    }
+  }
+  a.aspect_selector,
+  a.home_selector,
+  a.tag_selector,
+  a.element_selector {
+    &:active {
+      cursor: -webkit-grabbing;
+      cursor: -moz-grabbing;
+      cursor: grabbing;
+    }
+  }
+  a.home_selector,
+  a.tag_selector,
+  a.element_selector,
+  .root_element {
+    display: block;
+    width: 100%;
+    padding: 3px 7px;
+  }
+  a.home_selector,
+  li.aspect_element,
+  a.element_selector {
+    &:hover {
+      @include border-radius(2px);
+      background: {
+        color: lighten($blue, 45%);
+      };
+      text: {
+        decoration: none;
+      };
+    }
+  }
+  .unfollow_icon {
+    margin-right: 10px;
+    margin-top: 4px;
+    @include transition(opacity);
+    @include opacity(0.3);
+    position: absolute;
+    display: none;
+    padding: 0 5px;
+    &:hover {
+      @include opacity(1);
+    }
+  }
+  .edit {
+    margin-right: 10px;
+    margin-top: 4px;
+    width: 12px;
+    height: 12px;
+    margin-top: 6px;
+    @include transition(opacity);
+    @include opacity(0.3);
+    float: right;
+    display: none;
+    &:hover {
+      @include opacity(1);
+    }
+  }
+  ul.sub_nav {
+    padding: {
+      left: 25px;
+    };
+    margin: 0;
+    li {
+      width: 204px;
+    }
+  }
+}
+
+.section {
+  .left_nav {
+    a.aspect_selector,
+    a.home_selector {
+      width: 150px;
+    }
+    ul.sub_nav {
+      width: 140px;
+      &:hover {
+        width: auto;
+      }
+      a.aspect_selector {
+        width: 112px;
+        vertical-align: middle;
+        display: inline-block;
+        line-height: 25px;
+        text: {
+          decoration: none;
+        };
+      }
+      a.tag_selector {
+        width: 117px;
+        overflow: hidden;
+        position: relative;
+        display: inline-block;
+        &:after {
+          display: inline-block;
+          content: "";
+          width: 80px;
+          height: 25px;
+          position: absolute;
+          top: 0px;
+          left: 100px;
+        }
+        &:hover:after {
+          background: none;
+        }
+      }
+      li {
+        height: 25px;
+        .icons-check_yes_ok {
+          height: 18px;
+          width: 18px;
+          display: inline-block;
+          margin-left: 3px;
+          vertical-align: middle;
+        }
+        .icons-deletelabel {
+          height: 14px;
+          width: 14px;
+          margin-top: 4px;
+        }
+      }
+      li.unfollow,
+      li.sub_nav_item {
+        width: 172px;
+      }
+      li.unfollow:hover,
+      li.sub_nav_item:hover,
+      li.hover {
+        @include border-radius(2px);
+        background: {
+          color: lighten($blue, 45%);
+        };
+        .edit,
+        .unfollow_icon {
+          z-index: 1;
+          display: inline-block;
+          .icons-monotone_close_exit_delete {
+            height: 16px;
+            width: 16px;
+          }
+        }
+      }
+    }
+  }
+  .user_card {
+    margin-left: 8px;
+  }
+}
+
+.unread-setter {
+  display: none;
+}
+
+.stream_container {
+  min-height: 500px;
+  h3 {
+    margin: {
+      bottom: 0;
+    };
+  }
+  border: {
+    left: 1px solid $border-grey;
+  };
+  padding: {
+    left: 10px;
+    top: 20px;
+  };
+  margin: {
+    left: -10px;
+    top: -20px;
+  };
+}
+
+#aspect_stream_header {
+  padding: 0 12px;
+}
+
+.new_aspect,
+a.toggle_selector {
+  outline: none;
+  color: $text-grey;
+  font: {
+    style: italic;
+  };
+  &:hover {
+    color: $link-grey;
+  }
+}
+
+#community_spotlight {
+  .avatar {
+    height: 140px;
+    width: 140px;
+  }
+}
+
+.user_card {
+  @include border-radius(3px);
+  @include box-shadow(0, 1px, 5px, #cccccc);
+  padding: 10px {
+    bottom: 30px;
+  };
+  margin: {
+    bottom: 15px;
+    right: 10px;
+  };
+  position: relative;
+  min-height: 220px;
+  vertical-align: top;
+  border: 1px solid #cccccc;
+  display: inline-block;
+  width: 140px;
+  .tags {
+    color: $text-grey;
+  }
+  h4 {
+    margin: {
+      bottom: 0;
+    };
+    padding: {
+      bottom: 2px;
+    };
+  }
+  .dropdown {
+    width: 100%;
+  }
+}
+
+.add_user_to_aspect {
+  bottom: 12px;
+  right: 5px;
+  position: absolute;
+}
+
+#right_service_icons {
+  text-align: center;
+  padding: 10px {
+    bottom: 0;
+  };
+  .social_media_logos-facebook-24x24,
+  .social_media_logos-twitter-24x24,
+  .social_media_logos-tumblr-24x24,
+  .social_media_logos-wordpress-24x24,
+  .social_media_logos-email-24x24,
+  .social_media_logos-feed-24x24,
+  .social_media_logos-website-24x24 {
+    height: 24px;
+    width: 24px;
+  }
+  a {
+    display: inline-block;
+  }
+}
+
+.action_item {
+  padding-right: 5px;
+}
+
+.accept_invitation_form,
+.sign_up_form {
+  min-height: 350px;
+  font-size: 16px;
+  input[type='text'],
+  input[type='password'],
+  input[type='email'] {
+    font-size: 16px !important;
+    width: 378px !important;
+  }
+  .diaspora_id_text {
+    font-size: 12px;
+    text-align: right;
+    color: $text-grey;
+    margin: {
+      top: -8px;
+    };
+    padding: 0;
+  }
+  .submit_field {
+    text-align: right;
+  }
+}
+
+.accept_invitation_text {
+  font: {
+    weight: lighter;
+  };
+}
+
+.red {
+  color: $red;
+}
+
+.green {
+  color: green;
+}
+
+.resend {
+  color: black;
+  &:hover {
+    text-decoration: none;
+    color: black;
+    &:hover {
+      text-decoration: none;
+    }
+  }
+}
+
+#grey_header {
+  @include box-shadow(0, 1px, 1px, #eeeeee);
+  background: {
+    color: #fafafa;
+  };
+  width: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  padding: {
+    top: 80px;
+    bottom: 20px;
+  };
+  text: {
+    align: center;
+  };
+  border: {
+    bottom: 1px solid $border-grey;
+  };
+}
+
+.mobile_row {
+  margin: {
+    bottom: 50px;
+  };
+}
+
+.field_with_errors {
+  position: relative;
+  input {
+    @include box-shadow(0, 0, 8px, lighten(#dd0000, 30%));
+    border: 1px solid #dd0000 !important;
+  }
+}
+
+.field_with_errors .message {
+  color: #dd0000;
+  font-size: 12px;
+  position: absolute;
+  top: 4px;
+  right: 10px;
+  left: auto;
+}
+
+.new_user_form fieldset, .accept_invitation_form fieldset {
+  @include border-radius(3px);
+  background: {
+    color: white;
+    color: rgba(255, 255, 255, 0.95);
+  };
+  .submit_field {
+    margin: {
+      top: 15px;
+    };
+  }
+  span.host_uri {
+    float: right;
+    margin-top: -28px;
+    color: $text-grey;
+    padding-right: 9px;
+  }
+}
+
+.center {
+  text-align: center;
+}
+
+.nostrap,
+.nostrap:focus {
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+}
+
+#hello-there {
+  p {
+    font-size: medium;
+  }
+  h1 {
+    margin: 0px;
+  }
+  h2 {
+    margin: {
+      top: 80px;
+      bottom: 12px;
+    };
+  }
+  h3 {
+    font: {
+      size: large;
+      weight: 200;
+    };
+    margin: 0px;
+  }
+  form, p {
+    margin-left: 30px;
+  }
+  input {
+    margin-bottom: 15px;
+  }
+  .hero-unit {
+    margin: 20px 42px;
+    padding: 40px 80px;
+  }
+  .awesome {
+    text-align: center;
+    margin-top: 60px;
+    .creation {
+      font-size: 16px;
+    }
+  }
+}
+
+#profile_photo_upload {
+  #fileInfo {
+    margin-top: 12px;
+    text-align: left;
+  }
+}
+
+#welcome-to-diaspora {
+  -webkit-box-shadow: inset 0 -2px 10px rgba(0, 0, 0, 0.35);
+  -moz-box-shadow: inset 0 -2px 10px rgba(0, 0, 0, 0.35);
+  position: absolute;
+  width: 100%;
+  left: 0;
+  top: 0;
+  padding: {
+    top: 50px;
+    bottom: 10px;
+  };
+  h1,h3 {
+    color: white;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  background: orange;
+  &:hover {
+    #gs-skip-x {
+      @include opacity(0.4);
+      @include transition(opacity, 0.25s);
+      &:hover {
+        @include opacity(1);
+      }
+    }
+  }
+}
+
+#gs-shim {
+  position: absolute;
+  top: 380px;
+}
+
+#gs-skip-x {
+  @include opacity(0);
+  @include transition(opacity, 0.25s);
+  img {
+    position: relative;
+    right: 4px;
+    height: 20px;
+  }
+}
+
+.avatar.micro {
+  height: 20px;
+  width: 20px;
+}
+
+#gs-name-form-spinner {
+  position: absolute;
+  top: 24px;
+  right: -33px;
+}
+
+.left_nav {
+  #new_tag_following {
+    width: 137px;
+    margin: {
+      left: 24px;
+    };
+    input[type='text'] {
+      width: 137px;
+      font: {
+        size: 13px;
+      };
+    }
+  }
+  #tag_following_submit {
+    &.hidden {
+      display: none;
+    }
+  }
+}
+
+.nsfw-shield {
+  @include border-radius(3px);
+  background-color: $background-grey;
+  width: 90%;
+  padding: 5px 10px;
+  border: 1px solid $border-grey;
+  color: $text-grey;
+}
+
+#back-to-top {
+  display: block;
+  color: white;
+  position: fixed;
+  z-index: 49;
+  right: 20px;
+  bottom: 20px;
+  opacity: 0;
+  font-size: 3em;
+  padding: 0 11px 0 12px;
+  border-radius: 10px;
+  background-color: #aaaaaa;
+  &:hover {
+    opacity: 0.85 !important;
+  }
+  &.visible {
+    opacity: 0.5;
+  }
+}
+
+.float-right {
+  float: right;
+  margin-top: 5px;
+}
+
+.nsfw_off {
+  font-size: smaller;
+  color: $text-grey;
+  a {
+    color: $text-dark-grey;
+  }
+}
+
+#fileInfo {
+  font-size: small;
+  text-align: right;
+  margin: 5px 2px;
+}
+
+.post_preview_button {
+  padding: 3px 9px 4px;
+}
+
+.post_preview {
+  padding: {
+    top: 5px;
+  };
+  border: {
+    bottom: 3px solid #3f8fba !important;
+  };
+  background: {
+    color: #e8f7ff;
+  };
+}
+
+#location {
+  border: 1px solid $border-dark-grey;
+  height: 20px;
+  #location_address {
+    border: none;
+    color: #aaaaaa;
+    height: 10px;
+    width: 430px;
+    float: left;
+  }
+  a#hide_location {
+    position: absolute;
+    right: 22px;
+    filter: alpha(opacity = 30);
+    -moz-opacity: 0.3;
+    -khtml-opacity: 0.3;
+    opacity: 0.3;
+    z-index: 5;
+  }
+  a#hide_location:hover {
+    @include opacity(0);
+    -khtml-opacity: 1;
+    opacity: 1;
+    cursor: pointer;
+  }
+}
diff --git a/app/assets/stylesheets/bootstrap-headerfix.sass b/app/assets/stylesheets/bootstrap-headerfix.sass
deleted file mode 100644
index d89c51a99..000000000
--- a/app/assets/stylesheets/bootstrap-headerfix.sass
+++ /dev/null
@@ -1,40 +0,0 @@
-// A temporary fix for displaying the header in the single post view.
-// Should be removed once everything uses Bootstrap.
-
-header
-  .container
-    width: 950px
-    .header-nav
-      span
-        a
-          font-weight: bold
-          font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif
-          font-size: 13px
-    li
-      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif
-      font-size: 13px
-
-  #conversations_badge, #notification_badge
-    background: none
-  
-
-  #notification_badge.active
-    @include border-radius(0)
-
-  #global_search
-    form
-      input
-        height: 15px
-        color: black
-
-  #notification_dropdown
-    h4
-      margin: 0
-    .right
-      a
-        font-weight: bold
-    .notification_element
-      font-size: 13px
-      .timeago
-        border: medium none
-        cursor: text
diff --git a/app/assets/stylesheets/bootstrap-headerfix.scss b/app/assets/stylesheets/bootstrap-headerfix.scss
new file mode 100644
index 000000000..125c671d0
--- /dev/null
+++ b/app/assets/stylesheets/bootstrap-headerfix.scss
@@ -0,0 +1,52 @@
+// A temporary fix for displaying the header in the single post view.
+// Should be removed once everything uses Bootstrap.
+
+header {
+  .container {
+    width: 950px;
+    .header-nav {
+      span {
+        a {
+          font-weight: bold;
+          font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+          font-size: 13px;
+        }
+      }
+    }
+    li {
+      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+      font-size: 13px;
+    }
+  }
+  #conversations_badge, #notification_badge {
+    background: none;
+  }
+  #notification_badge.active {
+    @include border-radius(0);
+  }
+  #global_search {
+    form {
+      input {
+        height: 15px;
+        color: black;
+      }
+    }
+  }
+  #notification_dropdown {
+    h4 {
+      margin: 0;
+    }
+    .right {
+      a {
+        font-weight: bold;
+      }
+    }
+    .notification_element {
+      font-size: 13px;
+      .timeago {
+        border: medium none;
+        cursor: text;
+      }
+    }
+  }
+}