diff --git a/app/assets/stylesheets/common.css.erb b/app/assets/stylesheets/common.css.erb
index 555a23c89..9703a778b 100644
--- a/app/assets/stylesheets/common.css.erb
+++ b/app/assets/stylesheets/common.css.erb
@@ -1,7 +1,7 @@
 //  Manifest
 //
+
 //= require ./vendor/normalize
-//= require ./vendor/bootstrap
 //= require ./common/foundation/base
 //= require ./vendor/font_awesome/font-awesome
 //= require ./vendor/chosen
@@ -14,4 +14,4 @@
   DiscoursePluginRegistry.stylesheets.each do |css|
     require_asset(css)
   end
-%>
+%>
\ No newline at end of file
diff --git a/app/assets/stylesheets/common/components/buttons.css.scss b/app/assets/stylesheets/common/components/buttons.css.scss
index 0ac864dd7..34f64b6c1 100644
--- a/app/assets/stylesheets/common/components/buttons.css.scss
+++ b/app/assets/stylesheets/common/components/buttons.css.scss
@@ -43,9 +43,7 @@
 .btn {
   border: 1px solid rgba($black, 0.3);
   color: $btn-default-color;
-  text-shadow: 0 1px 0 $white;
   @include linear-gradient($white, $btn-default-background-color);
-  @include box-shadow(inset 0 -1px 2px rgba($black, 0.2));
   &[href] {
     color: $btn-default-color;
   }
@@ -59,7 +57,6 @@
     @include box-shadow(inset 0 1px 3px rgba($black, 0.2));
   }
   &[disabled] {
-    text-shadow: 0 1px 0 $white;
     @include linear-gradient($white, $btn-default-background-color);
     @include box-shadow(inset 0 -1px 2px rgba($black, 0.2));
   }
diff --git a/app/assets/stylesheets/desktop.css.erb b/app/assets/stylesheets/desktop.css.erb
index 0cd21a762..e1b7740f2 100644
--- a/app/assets/stylesheets/desktop.css.erb
+++ b/app/assets/stylesheets/desktop.css.erb
@@ -1,4 +1,6 @@
 //  Manifest
 //
 //= require common
+//= require ./vendor/bootstrap
+
 //= require_tree ./desktop
diff --git a/app/assets/stylesheets/common/activation.css.scss b/app/assets/stylesheets/desktop/activation.css.scss
similarity index 100%
rename from app/assets/stylesheets/common/activation.css.scss
rename to app/assets/stylesheets/desktop/activation.css.scss
diff --git a/app/assets/stylesheets/common/bbcode.css.scss b/app/assets/stylesheets/desktop/bbcode.css.scss
similarity index 100%
rename from app/assets/stylesheets/common/bbcode.css.scss
rename to app/assets/stylesheets/desktop/bbcode.css.scss
diff --git a/app/assets/stylesheets/common/code_highlighting.css.scss b/app/assets/stylesheets/desktop/code_highlighting.css.scss
similarity index 100%
rename from app/assets/stylesheets/common/code_highlighting.css.scss
rename to app/assets/stylesheets/desktop/code_highlighting.css.scss
diff --git a/app/assets/stylesheets/common/colorpicker.css.scss b/app/assets/stylesheets/desktop/colorpicker.css.scss
similarity index 87%
rename from app/assets/stylesheets/common/colorpicker.css.scss
rename to app/assets/stylesheets/desktop/colorpicker.css.scss
index a74794fbc..a793ba626 100644
--- a/app/assets/stylesheets/common/colorpicker.css.scss
+++ b/app/assets/stylesheets/desktop/colorpicker.css.scss
@@ -1,7 +1,7 @@
 // styles for the category badge color picker
 
-@import "common/foundation/variables";
-@import "common/foundation/mixins";
+@import "../common/foundation/variables";
+@import "../common/foundation/mixins";
 
 .category-color-editor {
   input {
diff --git a/app/assets/stylesheets/common/combobox.css.scss b/app/assets/stylesheets/desktop/combobox.css.scss
similarity index 100%
rename from app/assets/stylesheets/common/combobox.css.scss
rename to app/assets/stylesheets/desktop/combobox.css.scss
diff --git a/app/assets/stylesheets/common/compose.css.scss b/app/assets/stylesheets/desktop/compose.css.scss
similarity index 100%
rename from app/assets/stylesheets/common/compose.css.scss
rename to app/assets/stylesheets/desktop/compose.css.scss
diff --git a/app/assets/stylesheets/common/discourse.css.scss b/app/assets/stylesheets/desktop/discourse.css.scss
similarity index 100%
rename from app/assets/stylesheets/common/discourse.css.scss
rename to app/assets/stylesheets/desktop/discourse.css.scss
diff --git a/app/assets/stylesheets/common/faqs.css.scss b/app/assets/stylesheets/desktop/faqs.css.scss
similarity index 100%
rename from app/assets/stylesheets/common/faqs.css.scss
rename to app/assets/stylesheets/desktop/faqs.css.scss
diff --git a/app/assets/stylesheets/common/header.css.scss b/app/assets/stylesheets/desktop/header.css.scss
similarity index 100%
rename from app/assets/stylesheets/common/header.css.scss
rename to app/assets/stylesheets/desktop/header.css.scss
diff --git a/app/assets/stylesheets/common/history.css.scss b/app/assets/stylesheets/desktop/history.css.scss
similarity index 100%
rename from app/assets/stylesheets/common/history.css.scss
rename to app/assets/stylesheets/desktop/history.css.scss
diff --git a/app/assets/stylesheets/common/hotness_control.css.scss b/app/assets/stylesheets/desktop/hotness_control.css.scss
similarity index 100%
rename from app/assets/stylesheets/common/hotness_control.css.scss
rename to app/assets/stylesheets/desktop/hotness_control.css.scss
diff --git a/app/assets/stylesheets/common/input_tip.css.scss b/app/assets/stylesheets/desktop/input_tip.css.scss
similarity index 100%
rename from app/assets/stylesheets/common/input_tip.css.scss
rename to app/assets/stylesheets/desktop/input_tip.css.scss
diff --git a/app/assets/stylesheets/common/lightbox.css.scss b/app/assets/stylesheets/desktop/lightbox.css.scss
similarity index 100%
rename from app/assets/stylesheets/common/lightbox.css.scss
rename to app/assets/stylesheets/desktop/lightbox.css.scss
diff --git a/app/assets/stylesheets/common/login.css.scss b/app/assets/stylesheets/desktop/login.css.scss
similarity index 100%
rename from app/assets/stylesheets/common/login.css.scss
rename to app/assets/stylesheets/desktop/login.css.scss
diff --git a/app/assets/stylesheets/common/magnific-popup.css.scss b/app/assets/stylesheets/desktop/magnific-popup.css.scss
similarity index 100%
rename from app/assets/stylesheets/common/magnific-popup.css.scss
rename to app/assets/stylesheets/desktop/magnific-popup.css.scss
diff --git a/app/assets/stylesheets/common/mobile.scss b/app/assets/stylesheets/desktop/mobile.scss
similarity index 100%
rename from app/assets/stylesheets/common/mobile.scss
rename to app/assets/stylesheets/desktop/mobile.scss
diff --git a/app/assets/stylesheets/common/modal.css.scss b/app/assets/stylesheets/desktop/modal.css.scss
similarity index 100%
rename from app/assets/stylesheets/common/modal.css.scss
rename to app/assets/stylesheets/desktop/modal.css.scss
diff --git a/app/assets/stylesheets/common/onebox.scss b/app/assets/stylesheets/desktop/onebox.scss
similarity index 100%
rename from app/assets/stylesheets/common/onebox.scss
rename to app/assets/stylesheets/desktop/onebox.scss
diff --git a/app/assets/stylesheets/common/pagedown.css.scss b/app/assets/stylesheets/desktop/pagedown.css.scss
similarity index 100%
rename from app/assets/stylesheets/common/pagedown.css.scss
rename to app/assets/stylesheets/desktop/pagedown.css.scss
diff --git a/app/assets/stylesheets/common/request_access.css.scss b/app/assets/stylesheets/desktop/request_access.css.scss
similarity index 100%
rename from app/assets/stylesheets/common/request_access.css.scss
rename to app/assets/stylesheets/desktop/request_access.css.scss
diff --git a/app/assets/stylesheets/common/share_link.css.scss b/app/assets/stylesheets/desktop/share_link.css.scss
similarity index 100%
rename from app/assets/stylesheets/common/share_link.css.scss
rename to app/assets/stylesheets/desktop/share_link.css.scss
diff --git a/app/assets/stylesheets/common/topic-admin-menu.css.scss b/app/assets/stylesheets/desktop/topic-admin-menu.css.scss
similarity index 100%
rename from app/assets/stylesheets/common/topic-admin-menu.css.scss
rename to app/assets/stylesheets/desktop/topic-admin-menu.css.scss
diff --git a/app/assets/stylesheets/common/topic-list.css.scss b/app/assets/stylesheets/desktop/topic-list.css.scss
similarity index 100%
rename from app/assets/stylesheets/common/topic-list.css.scss
rename to app/assets/stylesheets/desktop/topic-list.css.scss
diff --git a/app/assets/stylesheets/common/topic-post.css.scss b/app/assets/stylesheets/desktop/topic-post.css.scss
similarity index 100%
rename from app/assets/stylesheets/common/topic-post.css.scss
rename to app/assets/stylesheets/desktop/topic-post.css.scss
diff --git a/app/assets/stylesheets/common/topic.css.scss b/app/assets/stylesheets/desktop/topic.css.scss
similarity index 100%
rename from app/assets/stylesheets/common/topic.css.scss
rename to app/assets/stylesheets/desktop/topic.css.scss
diff --git a/app/assets/stylesheets/common/upload.css.scss b/app/assets/stylesheets/desktop/upload.css.scss
similarity index 100%
rename from app/assets/stylesheets/common/upload.css.scss
rename to app/assets/stylesheets/desktop/upload.css.scss
diff --git a/app/assets/stylesheets/common/user.css.scss b/app/assets/stylesheets/desktop/user.css.scss
similarity index 100%
rename from app/assets/stylesheets/common/user.css.scss
rename to app/assets/stylesheets/desktop/user.css.scss
diff --git a/app/assets/stylesheets/common/username_tagsinput.css b/app/assets/stylesheets/desktop/username_tagsinput.css
similarity index 100%
rename from app/assets/stylesheets/common/username_tagsinput.css
rename to app/assets/stylesheets/desktop/username_tagsinput.css
diff --git a/app/assets/stylesheets/mobile/activation.css.scss b/app/assets/stylesheets/mobile/activation.css.scss
new file mode 100644
index 000000000..005d18527
--- /dev/null
+++ b/app/assets/stylesheets/mobile/activation.css.scss
@@ -0,0 +1,13 @@
+// Styles used before the user is logged into discourse. For example, activating their
+// account or changing their email.
+
+@import "../common/foundation/variables";
+@import "../common/foundation/mixins";
+
+#simple-container {
+  @include border-radius-all(10px);
+  background-color: white;
+  padding: 20px;
+  width: 550px;
+  margin: 0 auto;
+}
diff --git a/app/assets/stylesheets/mobile/bbcode.css.scss b/app/assets/stylesheets/mobile/bbcode.css.scss
new file mode 100644
index 000000000..2d7de236c
--- /dev/null
+++ b/app/assets/stylesheets/mobile/bbcode.css.scss
@@ -0,0 +1,128 @@
+// Support for BBCode styles like colors and font sizes
+
+span {
+  &.bbcode-b {
+    font-weight: bold;
+  }
+  &.bbcode-i {
+    font-style: italic;
+  }
+  &.bbcode-u {
+    text-decoration: underline;
+  }
+  &.bbcode-s {
+    text-decoration: line-through;
+  }
+  // Font sizes
+  &.bbcode-size-4 {
+    font-size: 4px;
+  }
+  &.bbcode-size-5 {
+    font-size: 5px;
+  }
+  &.bbcode-size-6 {
+    font-size: 6px;
+  }
+  &.bbcode-size-7 {
+    font-size: 7px;
+  }
+  &.bbcode-size-8 {
+    font-size: 8px;
+  }
+  &.bbcode-size-9 {
+    font-size: 9px;
+  }
+  &.bbcode-size-10 {
+    font-size: 10px;
+  }
+  &.bbcode-size-11 {
+    font-size: 11px;
+  }
+  &.bbcode-size-12 {
+    font-size: 12px;
+  }
+  &.bbcode-size-13 {
+    font-size: 13px;
+  }
+  &.bbcode-size-14 {
+    font-size: 14px;
+  }
+  &.bbcode-size-15 {
+    font-size: 15px;
+  }
+  &.bbcode-size-16 {
+    font-size: 16px;
+  }
+  &.bbcode-size-17 {
+    font-size: 17px;
+  }
+  &.bbcode-size-18 {
+    font-size: 18px;
+  }
+  &.bbcode-size-19 {
+    font-size: 19px;
+  }
+  &.bbcode-size-20 {
+    font-size: 20px;
+  }
+  &.bbcode-size-21 {
+    font-size: 21px;
+  }
+  &.bbcode-size-22 {
+    font-size: 22px;
+  }
+  &.bbcode-size-23 {
+    font-size: 23px;
+  }
+  &.bbcode-size-24 {
+    font-size: 24px;
+  }
+  &.bbcode-size-25 {
+    font-size: 25px;
+  }
+  &.bbcode-size-26 {
+    font-size: 26px;
+  }
+  &.bbcode-size-27 {
+    font-size: 27px;
+  }
+  &.bbcode-size-28 {
+    font-size: 28px;
+  }
+  &.bbcode-size-29 {
+    font-size: 29px;
+  }
+  &.bbcode-size-30 {
+    font-size: 30px;
+  }
+  &.bbcode-size-31 {
+    font-size: 31px;
+  }
+  &.bbcode-size-32 {
+    font-size: 32px;
+  }
+  &.bbcode-size-33 {
+    font-size: 33px;
+  }
+  &.bbcode-size-34 {
+    font-size: 34px;
+  }
+  &.bbcode-size-35 {
+    font-size: 35px;
+  }
+  &.bbcode-size-36 {
+    font-size: 36px;
+  }
+  &.bbcode-size-37 {
+    font-size: 37px;
+  }
+  &.bbcode-size-38 {
+    font-size: 38px;
+  }
+  &.bbcode-size-39 {
+    font-size: 39px;
+  }
+  &.bbcode-size-40 {
+    font-size: 40px;
+  }
+}
diff --git a/app/assets/stylesheets/mobile/code_highlighting.css.scss b/app/assets/stylesheets/mobile/code_highlighting.css.scss
new file mode 100644
index 000000000..ed45ef7fc
--- /dev/null
+++ b/app/assets/stylesheets/mobile/code_highlighting.css.scss
@@ -0,0 +1,91 @@
+// github.com style (c) Vasily Polovnyov <vast@whiteants.net>
+
+pre {
+  code {
+    display: block;
+    padding: 5px 10px;
+    color: #333333;
+    background: #f1f1ff;
+    font-size: 14px;
+    font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
+  }
+  .comment, .template_comment, .diff .header, .javadoc {
+    color: #999988;
+    font-style: italic;
+  }
+  .keyword, .css .keyword, .winutils, .javascript .title, .nginx .title, .subst, .request, .status {
+    color: #333333;
+    font-weight: bold;
+  }
+  .number, .hexcolor, .ruby .constant {
+    color: #009999;
+  }
+  .string, .tag .value, .phpdoc, .tex .formula {
+    color: #dd1144;
+  }
+  .title, .id {
+    color: #990000;
+    font-weight: bold;
+  }
+  .javascript .title, .lisp .title, .clojure .title, .subst {
+    font-weight: normal;
+  }
+  .class .title, .haskell .type, .vhdl .literal, .tex .command {
+    color: #445588;
+    font-weight: bold;
+  }
+  .tag {
+    color: navy;
+    font-weight: normal;
+    .title {
+      color: navy;
+      font-weight: normal;
+    }
+  }
+  .rules .property, .django .keyword {
+    color: navy;
+    font-weight: normal;
+  }
+  .attribute, .variable, .lisp .body {
+    color: teal;
+  }
+  .regexp {
+    color: #009926;
+  }
+  .class {
+    color: #445588;
+    font-weight: bold;
+  }
+  .symbol, .ruby .string, .lisp .keyword, .tex .special, .input_number {
+    color: #990073;
+  }
+  .built_in, .lisp .title, .clojure .built_in {
+    color: #0086b3;
+  }
+  .preprocessor, .pi, .doctype, .shebang, .cdata {
+    color: #999999;
+    font-weight: bold;
+  }
+  .deletion {
+    background: #ffdddd;
+  }
+  .addition {
+    background: #ddffdd;
+  }
+  .diff .change {
+    background: #0086b3;
+  }
+  .chunk {
+    color: #aaaaaa;
+  }
+  .tex .formula {
+    opacity: 0.5;
+  }
+}
+
+p > code {
+  margin: 0px 2px;
+  padding: 2px 5px;
+  background-color: #f1f1ff;
+  border-radius: 3px 3px 3px 3px;
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/mobile/colorpicker.css.scss b/app/assets/stylesheets/mobile/colorpicker.css.scss
new file mode 100644
index 000000000..a793ba626
--- /dev/null
+++ b/app/assets/stylesheets/mobile/colorpicker.css.scss
@@ -0,0 +1,34 @@
+// styles for the category badge color picker
+
+@import "../common/foundation/variables";
+@import "../common/foundation/mixins";
+
+.category-color-editor {
+  input {
+    width: 70px;
+  }
+
+  .color-title {
+    display: inline-block;
+    width: 130px;
+  }
+
+  .colors-container {
+    display: inline-block;
+    vertical-align: middle;
+    padding-top: 4px;
+    padding-left: 15px;
+    max-width: 300px;
+
+    .colorpicker {
+      border: 1px solid $darkish_gray;
+      margin-right: 2px;
+      width: 16px;
+      height: 16px;
+      font-size: 4px;
+      &.used-color {
+        background: image-url("chosen-sprite.png") -19px 13px;
+      }
+    }
+  }
+}
diff --git a/app/assets/stylesheets/mobile/combobox.css.scss b/app/assets/stylesheets/mobile/combobox.css.scss
new file mode 100644
index 000000000..6acb3d1df
--- /dev/null
+++ b/app/assets/stylesheets/mobile/combobox.css.scss
@@ -0,0 +1,17 @@
+.category-combobox {
+  .badge-category {
+    display: inline-block;
+  }
+  .topic-count {
+    font-size: 11px;
+    color: #666;
+    display: inline-block;
+  }
+  .highlighted .topic-count {
+    color: white;
+  }
+  .category-desc {
+    margin: 6px 0px 0px 3px;
+    font-size: 12px;
+  }
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/mobile/compose.css.scss b/app/assets/stylesheets/mobile/compose.css.scss
new file mode 100644
index 000000000..b996dde9a
--- /dev/null
+++ b/app/assets/stylesheets/mobile/compose.css.scss
@@ -0,0 +1,496 @@
+// styles that apply to the reply pane that slides up to compose replies
+
+@import "../common/foundation/variables";
+@import "../common/foundation/mixins";
+
+// hack, this needs to be done cleaner
+.private-message input.span8 {
+  width: 47%;
+}
+
+.composer-popup-container {
+display: none;
+}
+
+.composer-popup, #similar-topics {
+display: none;
+}
+
+
+
+
+.autocomplete {
+  z-index: 999999;
+  position: absolute;
+  width: 240px;
+  background-color: $white;
+  border: 1px solid $gray;
+  ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    li {
+      border-bottom: 1px solid $light_gray;
+      a[href] {
+        padding: 5px;
+        display: block;
+        span.username {
+          color: lighten($black, 20);
+        }
+        span.name {
+          font-size: 11px;
+        }
+        &.selected {
+          background-color: $light_gray;
+        }
+        @include hover {
+          background-color: $light_gray;
+          text-decoration: none;
+        }
+      }
+    }
+  }
+}
+
+#reply-control {
+  .toggle-preview, #draft-status, #file-uploading {
+    position: absolute;
+    bottom: -31px;
+    margin-top: 0px;
+  }
+  .toggle-preview {
+    right: 5px;
+    text-decoration: underline;
+  }
+  #file-uploading {
+    left: 51%;
+    font-size: 12px;
+    color: darken($gray, 40);
+  }
+  #draft-status {
+    right: 0;
+    color: lighten($black, 60);
+    &.flash {
+      color: lighten($red, 20);
+    }
+  }
+  @include transition(height 0.4s ease);
+  width: 100%;
+  z-index: 1039;
+  height: 0px;
+  background-color: rgba($composer_background, 0.96);
+  bottom: 0px;
+  font-size: 14px;
+  position: fixed;
+  .toggler {
+    display: block;
+    width: 13px;
+    height: 13px;
+    right: 13px;
+    position: absolute;
+    font-size: 15px;
+    color: $darkish_gray;
+    text-decoration: none;
+    &:before {
+      font-family: "FontAwesome";
+      content: "\f078";
+    }
+  }
+  a.cancel {
+    text-decoration: underline;
+    padding-left: 7px;
+    float: left; 
+    margin-top: 6px;
+  }
+  .control-row {
+    margin: 0 0 0 5px;
+  }
+  .saving-text {
+    display: none;
+  }
+  .draft-text {
+    display: none;
+  }
+  .grippie {
+    display: none;
+  }
+  // The various states
+  &.open {
+    height: 300px;
+    .grippie {
+      display: block;
+    }
+  }
+  &.closed {
+    height: 0px !important;
+  }
+  &.draft {
+    height: 60px !important;
+    cursor: pointer;
+    border-top: 1px solid $gray;
+    .draft-text {
+      display: block;
+          position: absolute;
+          margin-right: 40px;
+    }
+    .toggler {
+      &:before {
+        font-family: "FontAwesome";
+        content: "\f077";
+      }
+    }
+  }
+  &.saving {
+    height: 40px !important;
+    border-top: 1px solid $gray;
+    .saving-text {
+      display: block;
+    }
+    .toggler {
+      &:before {
+        font-family: "FontAwesome";
+        content: "\f00d";
+      }
+    }
+  }
+  .spinner {
+    position: absolute;
+    @include fades-in(0.25s);
+    @include border-radius-all(10px);
+    left: 250px;
+    top: 95px;
+    height: 100px;
+    width: 70px;
+    height: 70px;
+    text-indent: -9999em;
+    background: {
+      color: $black;
+      image: image-url("spinner_96_w.gif");
+      repeat: no-repeat;
+      size: 35px;
+      position: 17px 17px;
+    };
+  }
+  &.loading {
+    .spinner {
+      z-index: 1000;
+      @include visible;
+    }
+  }
+  .reply-area {
+    max-width: 1500px;
+    margin-left: auto;
+    margin-right: auto;
+    float: none;
+  }
+
+  // When the post is new (new topic) the sizings are different
+  &.edit-title {
+    &.open {
+      height: 400px;
+    }
+    .contents {
+      input#reply-title {
+        padding: 7px 10px;
+        margin: 6px 10px 3px 0;
+      }
+      .wmd-controls {
+        @include transition(top 0.3s ease);
+        top: 100px;
+      }
+    }
+  }
+  .contents {
+    padding: 10px;
+    min-width: 1280px;
+    .form-element {
+      .chzn-container {
+        width: 400px;
+        margin-top: 6px;
+        a {
+          padding-top: 4px;
+          height: 28px;
+        }
+        b {
+          margin-top: 4px;
+        }
+      }
+      .category-combobox {
+        width: 430px;
+        @include medium-width { width: 285px; }
+        @include small-width { width: 220px; }
+
+        .chzn-drop {
+          left: -9000px;
+          width: 428px;
+          @include medium-width { width: 283px; }
+          @include small-width { width: 218px; }
+        }
+        .chzn-search input {
+          width: 378px;
+          @include medium-width { width: 233px; }
+          @include small-width { width: 168px; }
+        }
+      }
+    }
+    #reply-title {
+      margin-right: 10px;
+      float: left;
+      &:disabled {
+        background-color: $light_gray;
+      }
+    }
+    #wmd-input:disabled {
+      background-color: $light_gray;
+    }
+    #wmd-input, #wmd-preview {
+      color: $black;
+      img {
+        max-width: 100%;
+      }
+
+      video {
+        max-width: 100%;
+        height: auto;
+      }
+
+      audio {
+        max-width: 100%;
+      }
+    }
+    #wmd-preview {
+      border: 1px dashed $gray;
+      overflow: auto;
+      visibility: visible;
+      p {
+        margin-top: 0;
+      }
+      &.hidden {
+        width: 0;
+        visibility: hidden;
+      }
+    }
+    #wmd-input {
+      bottom: 35px;
+    }
+    .submit-panel {
+      position: absolute;
+      display: block;
+      bottom: 8px;
+    }
+  }
+  .title-input, .category-input {
+    position: relative;
+    display: inline;
+  }
+  .title-input .popup-tip {
+    width: 300px;
+    left: -8px;
+    margin-top: 8px;
+  }
+  .category-input .popup-tip {
+    width: 240px;
+    left: 432px;
+    top: -7px;
+  }
+}
+.reply-to  {
+  margin-bottom: 10px;
+  position: absolute;
+  margin-right: 40px;
+
+}
+
+
+
+div.ac-wrap.disabled {
+  input {
+    display:none;
+  }
+  .item a {
+    display:none;
+  }
+}
+
+div.ac-wrap {
+  background-color: $white;
+  border: 1px solid #cccccc;
+  padding: 5px 10px;
+  @include border-radius-all(3px);
+  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 {
+      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 rgba(255, 255, 255, 0);
+      &:hover {
+        background-color: lighten($red, 45);
+        border: 1px solid lighten($red, 20);
+        text-decoration: none;
+        color: $white;
+      }
+    }
+  }
+  input[type="text"] {
+    float: left;
+    margin-top: 5px;
+    border: 0;
+    padding: 0;
+    margin: 4px 0 0;
+    box-shadow: none;
+    font-size: 16px;
+  }
+}
+#reply-control .wmd-controls #wmd-input {font-size: 16px;}
+
+#reply-control.edit-title.private-message {
+  .wmd-controls {
+    @include transition(top 0.3s ease);
+    top: 140px;
+  }
+}
+
+#reply-control {
+
+
+  &.hide-preview {
+    .wmd-controls {
+      #wmd-input {
+        width: 100%;
+      }
+      .preview-wrapper {
+        display: none;
+      }
+      .textarea-wrapper {
+        width: 100%;
+      }
+    }
+  }
+  .wmd-controls {
+    left: 30px;
+    right: 30px;
+    position: absolute;
+    top: 60px;
+    bottom: 54px;
+    display: block;
+
+    // this removes the topmost margin;
+    // if we don't have this, all posts would have extra space at the top
+    #wmd-preview > *:first-child {
+      margin-top: 0px !important;
+    }
+
+    #wmd-input, #wmd-preview {
+      box-sizing: border-box;
+      -moz-box-sizing: border-box;
+      width: 100%;
+      height: 100%;
+      min-height: 100%;
+      padding: 7px;
+      margin: 0;
+      background-color: $white;
+      word-wrap: break-word;
+
+      // set up proper header margins in post preview
+      h1, h2, h3, h4, h5, h6 {
+        margin: 20px 0 10px;
+      }
+    }
+    #wmd-input {
+      position: absolute;
+      left: 0;
+      top: 0;
+      height: 100%;
+      min-height: 100%;
+      box-sizing: border-box;
+      border: 0;
+      border-top: 36px solid transparent;
+      @include border-radius-all(0);
+      transition: none;
+    }
+    .textarea-wrapper, .preview-wrapper {
+      position: relative;
+      box-sizing: border-box;
+      -moz-box-sizing: border-box;
+      height: 100%;
+      min-height: 100%;
+      margin: 0;
+      padding: 0;
+      width: 50%;
+    }
+    .textarea-wrapper {
+      padding-right: 5px;
+      float: left;
+      .popup-tip {
+        margin-top: 3px;
+        right: 4px;
+      }
+    }
+    .preview-wrapper {
+      padding-left: 5px;
+      float: right;
+    }
+  }
+  #wmd-button-bar {
+    top: 0;
+    position: absolute;
+    border-bottom: 1px solid $inner_line;
+    background-color: $white;
+    z-index: 100;
+  }
+}
+
+.control-row.reply-area {
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
+@media screen and (min-width: 1550px) {
+  #reply-control {
+    .wmd-controls {
+      width: 1450px;
+      left: auto;
+      right: auto;
+    }
+  }
+}
+
+.admin-options-form {
+  margin-top: 8px;
+  display: none;
+}
+
+.auto-close-fields {
+  input {
+    width: 50px;
+  }
+}
+
+.edit-auto-close-modal {
+  form {
+    margin: 0;
+  }
+  .auto-close-fields {
+    i.icon-time {
+      font-size: 16px;
+      line-height: 8px;
+    }
+    input {
+      margin: 0;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/mobile/discourse.css.scss b/app/assets/stylesheets/mobile/discourse.css.scss
new file mode 100644
index 000000000..c1104ef41
--- /dev/null
+++ b/app/assets/stylesheets/mobile/discourse.css.scss
@@ -0,0 +1,279 @@
+// global styles that apply to the Discourse application specifically
+// BEWARE: changing these styles implies they take effect anywhere they are seen
+// throughout the Discourse application
+
+@import "../common/foundation/variables";
+@import "../common/foundation/mixins";
+@import "../common/foundation/helpers";
+
+body {
+  background-color: #fff;
+}
+
+.container {
+  @extend .clearfix;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.full-width {
+  margin-left: 12px;
+}
+
+
+
+a.no-href {
+  cursor: pointer;
+}
+
+header {
+}
+
+body {
+
+  button.ok {
+    @include linear-gradient(lighten($green, 5%), $green);
+    color: $white;
+    @include hover {
+      @include linear-gradient(lighten($green, 10%), $green);
+      color: $white;
+    }
+  }
+  button.cancel {
+    @include linear-gradient(lighten($red, 5%), $red);
+    color: $white;
+    @include hover {
+      @include linear-gradient(lighten($red, 10%), $red);
+      color: $white;
+    }
+  }
+  .coldmap-high {
+    color: lighten($blue, 20%) !important;
+  }
+  .coldmap-med {
+    color: lighten($blue, 10%) !important;
+  }
+  .coldmap-low {
+    color: $blue !important;
+  }
+  .heatmap-high {
+    color: lighten($red, 50%) !important;
+  }
+  .heatmap-med {
+    color: lighten($red, 10%) !important;
+  }
+  .heatmap-low {
+    color: $red !important;
+  }
+  #loading-message {
+    position: absolute;
+    font-size: 30px;
+    text-align: center;
+    top: 120px;
+    left: 500px;
+    color: $darkish_gray;
+  }
+  .top-space {
+    margin-top: 10px;
+  }
+  ul.breadcrumb {
+    margin: 0 10px 0px 10px;
+  }
+  .boxed {
+    height: 100%;
+    @include border-radius-all(5px);
+    .contents {
+      padding: 10px 20px 10px 20px;
+    }
+    &.white {
+      background-color: $white;
+    }
+  }
+  #main {
+    .icon-star.starred {
+      color: #fe1;
+    }
+    a.star {
+      display: inline-block;
+      font-size: 15px;
+      line-height: 1;
+      color: #cacaca;
+      &:before {
+        font-family: "FontAwesome";
+        content: "\f005";
+      }
+      &.starred {
+        color: #fe1;
+        text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);
+        @include hover {
+          opacity: 1;
+          &:before {
+            content: "\f005";
+          }
+        }
+      }
+      @include hover {
+        opacity: 0.6;
+      }
+
+      &:active {
+        opacity: 1;
+      }
+    }
+    img.avatar {
+      &.header {
+        width: 45px;
+        height: 45px;
+      }
+      &.medium {
+        width: 32px;
+        height: 32px;
+      }
+      &.small {
+        width: 25px;
+        height: 25px;
+      }
+      &.tiny {
+        width: 20px;
+        height: 20px;
+      }
+    }
+    .user-list {
+      .user {
+        padding-bottom: 5px;
+      }
+    }
+  }
+  .message {
+    @include border-radius-all(8px);
+    background-color: $white;
+    padding: 14px;
+    h2 {
+      margin-bottom: 20px;
+    }
+    p {
+      font-size: 20px;
+    }
+  }
+  #footer {
+    background-color: $eggplant;
+    .container {
+      height: 50px;
+      .contents {
+        padding-top: 10px;
+        a[href] {
+          color: $white;
+        }
+      }
+    }
+  }
+  .clear-transitions {
+    @include transition(none !important);
+  }
+  .grippie {
+    width: 100%;
+    border: 1px solid #dddddd;
+    border-width: 1px 0px;
+    cursor: row-resize;
+    height: 11px;
+    overflow: hidden;
+    background-color: #eeeeee;
+    display:block {}
+    background: image-url("grippie.png") #eeeeee no-repeat center 3px;
+  }
+}
+
+form {
+  .tip {
+    display: inline-block;
+    &.good {
+      color: $green;
+    }
+    &.bad {
+      color: $red;
+    }
+  }
+}
+
+blockquote {
+  /* 13px left is intentional here to properly align with post quotes */
+  padding: 10px 8px 10px 13px;
+  background-color: $quote-background;
+  border-left: 5px solid darken($quote-background, 20%);
+  p {
+    margin: 0 0 10px 0;
+  }
+}
+
+.topic-statuses {
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  .topic-status {
+    padding: 5px 2px 0 0;
+    margin: 0;
+    display: inline-block;
+    i {
+      font-size: 15px;
+      color: darken($white, 60%);
+    }
+  }
+}
+
+#wmd-input {
+  resize: none;
+}
+
+#pagedown-editor {
+  width: 540px;
+  background-color: $white;
+  padding: 0 10px 13px 10px;
+  border: 1px solid $gray;
+  .preview {
+    margin-top: 8px;
+    border: 1px dashed $gray;
+    padding: 8px 8px 0 8px;
+    p {
+      margin: 0 0 10px 0;
+    }
+  }
+  .preview.hidden {
+    display: none;
+  }
+}
+
+.spinner {
+  width: 100px;
+  margin: 0 auto 30px auto;
+  background-color: $black;
+  @include border-radius-all(10px);
+  padding: 10px 10px 10px 30px;
+  font-size: 15px;
+  line-height: 23px;
+  text-align: center;
+  color: $white;
+  background: {
+    image: image-url("spinner_96_w.gif");
+    repeat: no-repeat;
+    position: 10px 8px;
+    size: 25px;
+  };
+}
+
+.avatar {
+  @include border-radius-all(2px);
+}
+
+.avatar-wrapper {
+  background-color: white;
+  display: inline-block;
+  border: 1px solid #82786b;
+  @include border-radius-all(5px);
+  img {
+    @include border-radius-all(4px);
+  }
+}
+
+.profiler-results.profiler-left {
+  top: 60px !important;
+}
diff --git a/app/assets/stylesheets/mobile/faqs.css.scss b/app/assets/stylesheets/mobile/faqs.css.scss
new file mode 100644
index 000000000..aa6762a99
--- /dev/null
+++ b/app/assets/stylesheets/mobile/faqs.css.scss
@@ -0,0 +1,61 @@
+@import "../common/foundation/variables";
+@import "../common/foundation/mixins";
+@import "../common/foundation/helpers";
+
+// --------------------------------------------------
+// FAQs
+// --------------------------------------------------
+
+// Base
+// --------------------------------------------------
+
+.body-page {
+
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  line-height: 22px;
+
+  // Consistent vertical spacing
+  blockquote,
+  h1,
+  h2,
+  h3,
+  hr,
+  p,
+  pre,
+  ul,
+  ol,
+  li,
+  table {
+    margin: 0 0 20px;
+    font-size: 16px;
+    line-height: 22px;
+  }
+
+  li {
+     margin-bottom: 8px;
+  }
+
+  ul,
+  ol {
+    margin-left: 40px;
+  }
+
+}
+
+.body-page {
+
+  .container {
+    @extend .clearfix;
+    width: 960px;
+    margin: 0 auto;
+    padding: 20px 10px;
+    margin-top: -60px;
+  }
+
+}
+
+.nav-pills {
+  margin-left:0px !important;
+  font: 13px/18px "Helvetica Neue",Helvetica,Arial,sans-serif;
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/mobile/header.css.scss b/app/assets/stylesheets/mobile/header.css.scss
new file mode 100644
index 000000000..ffa996855
--- /dev/null
+++ b/app/assets/stylesheets/mobile/header.css.scss
@@ -0,0 +1,243 @@
+@import "../common/foundation/variables";
+@import "../common/foundation/mixins";
+
+// --------------------------------------------------
+// Discourse header
+// --------------------------------------------------
+
+.d-header {
+  padding-left: 20px !important; 
+  padding-right: 40px;
+  min-width: 100%;
+  position: absolute;
+  top: 0;
+  z-index: 1001;
+  background-color: #fff;
+box-shadow: 0 0 3px #aaa;
+
+  .docked & {
+    position: fixed;
+
+  }
+
+  a.star {float: left;}
+  .contents {
+    margin: 10px 0;
+  }
+  .title {
+    display: table;
+    float: left;
+    height: 40px;
+    > a {
+      display: table-cell;
+      vertical-align: middle;
+    }
+  }
+  #site-logo {
+    width: 110px;
+  }
+  .icon-home {
+    font-size: 20px;
+    line-height: 40px;
+  }
+  .panel {
+    float: right;
+    position: relative;
+    margin-right: 30px;
+  }
+  .current-username {
+    float: left;
+    display: none;
+    a {
+      color: $black;
+      font-size: 14px;
+      line-height: 40px;
+    }
+    button {
+      margin-top: 8px;
+    }
+  }
+  .icons {
+    float: left;
+    text-align: center;
+    margin: 0 0 0 15px;
+    list-style: none;
+    > li {
+      float: left;
+      &:first-child .icon {
+      }
+      &:first-child.active .icon {
+      }
+      &:last-child .icon {
+        border-right: 1px solid #ccc;
+      }
+    }
+    .icon {
+      display: block;
+      border-top: 1px solid #ccc;
+      border-bottom: 1px solid #ccc;
+      border-left: 1px solid #d6d6d6;
+      padding: 3px;
+      color: $nav-button-color;
+      text-decoration: none;
+      cursor: pointer;
+      &:hover {
+        color: $nav-button-color-hover;
+        background-color: $nav-button-background-color-hover;
+      }
+      &:active {
+        color: $nav-button-color-active;
+        background-color: $nav-button-background-color-active;
+      }
+    }
+    .active .icon {
+      position: relative;
+      color: #7b7b7b;
+      background-color: $white;
+      cursor: default;
+      @include box-shadow((6px 0 6px -6px rgba($black, 0.2), -6px 0 6px -6px rgba($black, 0.2), inset 0 13px 13px -13px rgba($black, 0.1)));
+      &:after {
+        display: block;
+        position: absolute;
+        top: 100%;
+        left: 0;
+        z-index: 1101;
+        width: 100%;
+        height: 0;
+        content: "";
+        border-top: 1px solid $white;
+      }
+    }
+    [class^="icon-"] {
+      width: 32px;
+      height: 32px;
+      font-size: 20px;
+      line-height: 32px;
+      display: inline-block;
+    }
+    .notifications {
+      position: relative;
+    }
+    .badge-notification {
+      position: absolute;
+      top: -9px;
+      z-index: 1;
+      margin-left: 0;
+    }
+    .unread-notifications {
+      right: -4px;
+      background-color: #0088CC;
+    }
+    .unread-private-messages {
+      left: -4px;
+      background-color: #00953A;
+    }
+  }
+  .flagged-posts {
+    background-color: #E53B2E;
+  }
+}
+
+#main {
+  position: relative;
+}
+
+#main-outlet {
+  padding-top: 60px;
+}
+
+// Dropdowns
+// --------------------------------------------------
+
+.d-dropdown {
+  display: none;
+  overflow: hidden;
+  width: 290px;
+  position: absolute;
+  top: 100%;
+  right: 0;
+  z-index: 1100;
+  margin-top: -1px;
+  border: 1px solid #ccc;
+  background-color: $white;
+  @include box-shadow(0 1px 1px rgba($black, 0.2));
+
+  // Common
+
+  ul {
+    margin: 0;
+    list-style: none;
+  }
+  li {
+    padding: 5px;
+    font-size: 13px;
+    line-height: 16px;
+    .icon {
+      margin-right: 3px;
+    }
+  }
+  .heading {
+    color: #2d3234;
+    font-weight: bold;
+    font-size: 12px;
+    line-height: 15px;
+
+
+  }
+  .selected {
+    background-color: $header-item-highlight;
+  }
+
+  // Notifications
+
+  &#notifications-dropdown {
+    .icon {
+      color: #777;
+    }
+    li {
+      background-color: $header-item-highlight;
+    }
+    .read {
+      background-color: $white;
+    }
+    .none {
+      padding: 5px;
+    }
+  }
+
+  // Search
+
+  input[type='text'] {
+    width: 267px;
+    height: 22px;
+    margin: 5px;
+    padding: 5px;
+    font-size: 16px;
+    &:focus {
+      @include box-shadow((inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 4px rgba(82, 168, 236, 0.6)));
+    }
+  }
+  .searching {
+    display: block;
+    position: absolute;
+    top: 13px;
+    right: 13px;
+    color: #777;
+    font-size: 18px;
+  }
+  .no-results {
+    padding: 0 5px 5px;
+  }
+  .filter {
+    float: right;
+  }
+
+  // Categories
+
+  .category {
+    float: left;
+    background-color: transparent;
+    line-height: 20px;
+  }
+
+}
diff --git a/app/assets/stylesheets/mobile/history.css.scss b/app/assets/stylesheets/mobile/history.css.scss
new file mode 100644
index 000000000..430d69a69
--- /dev/null
+++ b/app/assets/stylesheets/mobile/history.css.scss
@@ -0,0 +1,38 @@
+// styles that apply to the popup that appears when you show the edit history
+// of a post
+
+@import "../common/foundation/variables";
+@import "../common/foundation/mixins";
+
+.modal.history-modal {
+  .modal-inner-container {
+    min-width: 960px;
+    min-height: 500px;
+  }
+
+  ins {
+    background: #e6ffe6;
+  }
+  del {
+    background: #ffe6e6;
+  }
+  .modal-header {
+    height: 42px;
+  }
+  .history-loading {
+    margin: 25px 0;
+    width: 120px;
+    font-size: 20px;
+    padding: 8px 0 30px 30px;
+    background: {
+      image: image-url("spinner_96.gif");
+      repeat: no-repeat;
+      size: 25px 25px;
+      position: 0 4px;
+    };
+  }
+  select {
+    height: auto;
+	width: auto;
+  }
+}
diff --git a/app/assets/stylesheets/mobile/hotness_control.css.scss b/app/assets/stylesheets/mobile/hotness_control.css.scss
new file mode 100644
index 000000000..5d6baf3aa
--- /dev/null
+++ b/app/assets/stylesheets/mobile/hotness_control.css.scss
@@ -0,0 +1,29 @@
+// styles for the 'hotness control'
+
+@import "../common/foundation/variables";
+@import "../common/foundation/mixins";
+
+.hotness-control {
+  margin-bottom: 5px;
+
+  button {
+    @include border-radius-all(5px);
+    margin-right: 3px;
+    background-color: lighten($gray, 10%);
+    border: 0;
+    width: 25px;
+    text-align: center;
+
+    &:hover {
+      background-color: $gray;
+    }
+  }
+
+  button.selected {
+    background-color: lighten($red, 25%);
+    color: $white;
+    font-weight: bold;
+  }
+
+
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/mobile/input_tip.css.scss b/app/assets/stylesheets/mobile/input_tip.css.scss
new file mode 100644
index 000000000..a1eae29b6
--- /dev/null
+++ b/app/assets/stylesheets/mobile/input_tip.css.scss
@@ -0,0 +1,29 @@
+@import "../common/foundation/variables";
+@import "../common/foundation/mixins";
+
+.popup-tip {
+  position: absolute;
+  display: block;
+  padding: 5px 10px;
+  z-index: 101;
+  @include border-radius-all(2px);
+  border: solid 1px #955;
+  &.bad {
+    background-color: #b66;
+    color: white;
+    box-shadow: 1px 1px 5px #777, inset 0 0 9px #b55;
+  }
+  &.hide, &.good {
+    display: none;
+  }
+  a.close {
+    float: right;
+    color: $black;
+    opacity: 0.5;
+    font-size: 15px;
+    margin-left: 4px;
+  }
+  a.close:hover {
+    opacity: 1.0;
+  }
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/mobile/lightbox.css.scss b/app/assets/stylesheets/mobile/lightbox.css.scss
new file mode 100644
index 000000000..d74722096
--- /dev/null
+++ b/app/assets/stylesheets/mobile/lightbox.css.scss
@@ -0,0 +1,58 @@
+@import "../common/foundation/variables";
+@import "../common/foundation/mixins";
+
+.lightbox {
+  position: relative;
+  display: inline-block;
+
+  &:hover .meta {
+    background: rgba(0, 0, 0, .5);
+    opacity: 1;
+    @include transition(opacity .5s);
+  }
+}
+
+.meta {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  color: white;
+  background: black;
+  opacity: 0;
+  @include transition(opacity .2s);
+
+  span {
+    float: left;
+  }
+
+  .filename {
+    margin: 5px;
+    &:before {
+      font-family: "FontAwesome";
+      content: "\F03E";
+      margin-right: 5px;
+    }
+  }
+
+  .informations {
+    margin: 6px;
+    padding-right: 20px;
+    color: $dark_gray;
+    font-size: 14px;
+  }
+
+  .expand {
+    position: absolute;
+    bottom: 4px;
+    right: 7px;
+    &:before {
+      font-family: "FontAwesome";
+      content: "\F065";
+    }
+  }
+}
+
+// this should be removed once all the posts have been rebaked with the new lightboxes overlays
+.lightbox > span {
+  display: none;
+}
diff --git a/app/assets/stylesheets/mobile/login.css.scss b/app/assets/stylesheets/mobile/login.css.scss
new file mode 100644
index 000000000..dfaee9cfc
--- /dev/null
+++ b/app/assets/stylesheets/mobile/login.css.scss
@@ -0,0 +1,46 @@
+// style that apply to the login popup
+
+@import "../common/foundation/variables";
+@import "../common/foundation/mixins";
+.btn-social {width: 48%; float: left;
+font-size: 13px;
+}
+
+#login-buttons {
+  button {
+    margin: 0 5px 5px 0;
+    
+  }
+  margin-top: 10px;
+  margin-bottom: 20px;
+}
+
+#login-form {
+  a {
+    color: $dark_gray;
+    cursor: pointer;
+  }
+
+
+label {float: left; display: block;}
+
+textarea, input, select {font-size: 16px; clear: left;}
+
+
+
+
+
+}
+
+// Create account
+
+#new-account-link {
+	cursor: pointer;
+}
+
+  a#forgot-password-link {clear: left; float: left; }
+.btn-primary {margin-bottom: 10px; font-size: 15; clear: left; float: left;
+
+}
+
+a#new-account-link {float: left; margin-left: 7px;}
diff --git a/app/assets/stylesheets/mobile/magnific-popup.css.scss b/app/assets/stylesheets/mobile/magnific-popup.css.scss
new file mode 100644
index 000000000..872ae8f2b
--- /dev/null
+++ b/app/assets/stylesheets/mobile/magnific-popup.css.scss
@@ -0,0 +1,618 @@
+/* Magnific Popup CSS */
+
+////////////////////////
+//      Settings      //
+////////////////////////
+
+// overlay
+$overlay-color:                   #0b0b0b;                    // Color of overlay screen
+$overlay-opacity:                 0.8;                        // Opacity of overlay screen
+$shadow:                          0 0 8px rgba(0, 0, 0, 0.6); // Shadow on image or iframe
+
+// spacing
+$popup-padding-left:              8px;                        // Padding from left and from right side
+$popup-padding-left-mobile:       6px;                        // Same as above, but is applied when width of window is less than 800px
+
+$z-index-base:                    1050;                       // Base z-index of popup
+
+// controls
+$include-arrows:                  true;                       // Include styles for nav arrows
+$controls-opacity:                0.65;                       // Opacity of controls
+$controls-color:                  #FFF;                       // Color of controls
+$inner-close-icon-color:          #333;                       // Color of close button when inside
+$controls-text-color:             #CCC;                       // Color of preloader and "1 of X" indicator
+$controls-text-color-hover:       #FFF;                       // Hover color of preloader and "1 of X" indicator
+$IE7support:                      false;                      // Very basic IE7 support
+
+// Iframe-type options
+$include-iframe-type:             false;                      // Enable Iframe-type popups
+$iframe-padding-top:              40px;                       // Iframe padding top
+$iframe-background:               #000;                       // Background color of iframes
+$iframe-max-width:                900px;                      // Maximum width of iframes
+$iframe-ratio:                    9/16;                       // Ratio of iframe (9/16 = widescreen, 3/4 = standard, etc.)
+
+// Image-type options
+$include-image-type:              true;                       // Enable Image-type popups
+$image-padding-top:               40px;                       // Image padding top
+$image-padding-bottom:            40px;                       // Image padding bottom
+$include-mobile-layout-for-image: true;                       // Removes paddings from top and bottom
+
+// Image caption options
+$caption-title-color:             #F3F3F3;                    // Caption title color
+$caption-subtitle-color:          #BDBDBD;                    // Caption subtitle color
+
+////////////////////////
+//
+// 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:                    500 !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-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;
+
+
+
+////////////////////////
+// 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: 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 {
+  height: 100%;
+  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-content,
+.mfp-ajax-holder .mfp-content {
+  width: 100%;
+  cursor: auto;
+}
+
+// Cursors
+.mfp-ajax-cur {
+  cursor: progress;
+}
+.mfp-zoom-out-cur,
+.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
+.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;
+}
+.mfp-preloader a {
+  color: $controls-text-color;
+}
+.mfp-preloader a: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,
+button.mfp-arrow {
+  overflow: visible;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  -webkit-appearance: none;
+  display: block;
+  padding: 0;
+  z-index: $z-index-base + 6;
+}
+button::-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;
+  padding: 0 0 18px 10px;
+  color: $controls-color;
+
+  font-style: normal;
+  font-size: 28px;
+  font-family: Arial, Baskerville, monospace;
+
+  &:hover,
+  &:focus {
+    opacity: 1;
+  }
+
+  &:active {
+    top: 1px;
+  }
+}
+.mfp-close-btn-in .mfp-close {
+  color: $inner-close-icon-color;
+}
+.mfp-image-holder .mfp-close,
+.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;
+    top: 0;
+    opacity: $controls-opacity;
+    margin: 0;
+    top: 50%;
+    margin-top: -55px;
+    padding: 0;
+    width: 90px;
+    height: 110px;
+    -webkit-tap-highlight-color: rgba(0,0,0,0);
+  }
+  .mfp-arrow:active {
+    margin-top: -54px;
+  }
+  .mfp-arrow:hover,
+  .mfp-arrow:focus {
+    opacity: 1;
+  }
+
+  .mfp-arrow {
+
+    &: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: solid transparent;
+    }
+
+    &:after,
+    .mfp-a {
+      opacity: $overlay-opacity;
+      border-top-width: 12px;
+      border-bottom-width: 12px;
+      top:8px;
+    }
+
+    &:before,
+    .mfp-b {
+      border-top-width: 20px;
+      border-bottom-width: 20px;
+    }
+
+  }
+
+  .mfp-arrow-left {
+    left: 0;
+
+    &:after,
+    .mfp-a {
+      border-right: 12px solid #000;
+      left: 5px;
+    }
+    &:before,
+    .mfp-b {
+       border-right: 20px solid #FFF;
+    }
+  }
+
+  .mfp-arrow-right {
+    right: 0;
+    &:after,
+    .mfp-a {
+      border-left: 12px solid #000;
+      left: 3px;
+    }
+    &:before,
+    .mfp-b {
+      border-left: 20px solid #FFF;
+    }
+  }
+}
+
+
+
+// Iframe content type
+@if $include-iframe-type {
+  .mfp-iframe-holder {
+    padding-top: $iframe-padding-top;
+    padding-bottom: $iframe-padding-top;
+  }
+  .mfp-iframe-holder .mfp-content {
+    line-height: 0;
+    width: 100%;
+    max-width: $iframe-max-width;
+  }
+  .mfp-iframe-scaler {
+    width: 100%;
+    height: 0;
+    overflow: hidden;
+    padding-top: $iframe-ratio * 100%;
+  }
+  .mfp-iframe-scaler iframe {
+    position: absolute;
+    display: block;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    box-shadow: $shadow;
+    background: $iframe-background;
+  }
+  .mfp-iframe-holder .mfp-close {
+    top: -40px;
+  }
+}
+
+
+
+// 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: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;
+  }
+  .mfp-figure {
+    line-height: 0;
+  }
+  .mfp-bottom-bar {
+    margin-top:  -36px;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    width: 100%;
+    cursor: auto;
+  }
+  .mfp-title {
+    text-align: left;
+    line-height: 18px;
+    color: $caption-title-color;
+    word-break: break-word;
+    padding-right: 36px; // leave some space for counter at right side
+  }
+
+  .mfp-figure small {
+    color: $caption-subtitle-color;
+    display: block;
+    font-size: 12px;
+    line-height: 14px;
+  }
+  .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;
+        }
+        .mfp-img-mobile img.mfp-img {
+          padding: 0;
+        }
+        /* The shadow behind the image */
+        .mfp-img-mobile .mfp-figure:after {
+          top: 0;
+          bottom: 0;
+        }
+
+        .mfp-img-mobile .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;
+        }
+        .mfp-img-mobile .mfp-bottom-bar:empty {
+          padding: 0;
+        }
+        .mfp-img-mobile .mfp-counter {
+          right: 5px;
+          top: 3px;
+        }
+        .mfp-img-mobile .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;
+        }
+        .mfp-img-mobile .mfp-figure small {
+          display: inline;
+          margin-left: 5px;
+        }
+      }
+  }
+
+}
+
+
+
+// Scale navigation arrows and reduce padding from sides
+@media all and (max-width: 800px) {
+  .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;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/mobile/mobile.scss b/app/assets/stylesheets/mobile/mobile.scss
new file mode 100644
index 000000000..eab0f0e33
--- /dev/null
+++ b/app/assets/stylesheets/mobile/mobile.scss
@@ -0,0 +1,23 @@
+@media only screen
+and (min-device-width : 320px)
+and (max-device-width : 540px) {
+  #reply-control {
+    .toggle-preview { display:none; }
+    #reply-title { width: 250px; }
+    .wmd-controls {
+      #wmd-input {
+        width: 100%;
+        border-top: 0;
+      }
+      .preview-wrapper {
+        display: none;
+      }
+      .textarea-wrapper {
+        width: 100%;
+      }
+      .wmd-button-bar {
+        display: none;
+      }
+    }
+  }
+}
diff --git a/app/assets/stylesheets/mobile/modal.css.scss b/app/assets/stylesheets/mobile/modal.css.scss
new file mode 100644
index 000000000..9c439098b
--- /dev/null
+++ b/app/assets/stylesheets/mobile/modal.css.scss
@@ -0,0 +1,348 @@
+// base styles for every modal popup used in Discourse
+
+@import "../common/foundation/variables";
+@import "../common/foundation/mixins";
+
+.modal-open {
+  .dropdown-menu {
+     z-index: 2050;
+  }
+  .dropdown.open {
+    *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: #000000;
+  &.fade {
+    opacity: 0;
+  }
+}
+
+.modal-backdrop,
+.modal-backdrop.fade.in {
+  opacity: 0.8;
+  filter: alpha(opacity=80);
+}
+
+.modal-outer-container {
+  display:table;
+  width:100%;
+  height:100%;
+}
+.modal-middle-container {
+margin-top: 10%;
+}
+.modal-inner-container {
+  max-width: 710px;
+  margin: 0 auto;
+  background-color: #ffffff;
+  border: 1px solid #999;
+  border: 1px solid rgba(0, 0, 0, 0.3);
+  *border: 1px solid #999;
+  /* IE6-7 */
+
+  @include border-radius-all (6px);
+  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
+  background-clip: padding-box;
+}
+.modal {
+  position: fixed;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1050;
+  overflow: auto;
+}
+
+
+
+
+// Hardcode to be the same as before for now. I would recommend not using bootbox, or finding a way so the html structure can be the same
+.bootbox.modal {
+  position: fixed;
+  top: 10%;
+  z-index: 1050;
+  overflow: auto;
+  width: 100%;
+  height: auto;
+  background-color: #ffffff;
+  border: 1px solid #999;
+  border: 1px solid rgba(0, 0, 0, 0.3);
+  *border: 1px solid #999;
+  /* IE6-7 */
+
+  @include border-radius-all (6px);
+  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
+  background-clip: padding-box;
+}
+
+.modal.fade {
+  -webkit-transition: opacity .3s linear, top .3s ease-out;
+  transition: opacity .3s linear, top .3s ease-out;
+  top: -25%;
+}
+.modal.fade.in {
+  top: 50%;
+}
+.modal-body {
+  overflow-y: auto;
+  max-height: 400px;
+  padding: 10px 15px 10px 15px;
+}
+.modal-form {
+  margin-bottom: 0;
+}
+.modal-footer {
+  margin: 0 15px;
+  padding: 14px 0 15px;
+  border-top: 1px solid #ddd;
+  @include border-radius-all(0 0 6px 6px);
+  @include box-shadow (inset 0 1px 0 #ffffff);
+  *zoom: 1;
+}
+.modal-footer:before,
+.modal-footer:after {
+  display: table;
+  content: "";
+}
+.modal-footer:after {
+  clear: both;
+}
+.modal-footer .btn + .btn {
+  margin-left: 5px;
+  margin-bottom: 0;
+}
+.modal-footer .btn-group .btn + .btn {
+  margin-left: -1px;
+}
+.modal-header {
+  h3 {
+    color: $nav-pills-background-color-active;
+    font-size: 15px;
+    padding: 0 0 0 20px;
+  }
+  .close {
+    float: right;
+    font-size: 20px;
+    margin: 0 15px 0 0;
+    text-decoration: none;
+    color: $modal-close-button-color;
+    cursor: pointer;
+    &:hover {
+      color: darken($modal-close-button-color,20);
+    }
+  }
+}
+
+.modal {
+  .nav {
+    padding: 10px 30px;
+    background-color: #e6e6e6;
+    li > a {
+      font-size: 14px;
+    }
+    border-bottom: 1px solid #bbb;
+
+  }
+  &.hidden {
+    display: none;
+  }
+  .modal-body {
+    textarea {
+      width: 99%;
+      height: 80px;
+    }
+    label {
+      color: $darkish_gray;
+    }
+    p {
+      color: $black;
+      font-size: 13px;
+    }
+    .archetype-option {
+      margin-bottom: 20px;
+    }
+    .warning {
+      color: lighten($red, 10%) !important;
+    }
+  }
+  .password-confirmation {
+    display: none;
+  }
+
+  section.field {
+    margin-bottom: 20px;
+  }
+}
+
+#move-selected {
+  p {
+    margin-top: 0;
+  }
+
+  input[type=radio] {
+    margin-right: 10px;
+  }
+
+  button {
+    margin-top: 10px;
+    display: block;
+    width: 300px;
+  }
+
+  form {
+    margin-top: 20px;
+    input[type=text] {
+      width: 500px;
+    }
+  }
+}
+
+.flag-modal {
+  max-height: 450px;
+}
+
+.custom-message-length {
+  margin-bottom: 10px;
+  margin-left: 20px;
+}
+
+.flag-message {
+  margin-left: 20px;
+  width: 95% !important;
+}
+
+.edit-category-modal {
+  .modal-body {
+    position: relative;
+    height: 350px;
+  }
+  &.small .modal-body {
+    height: 310px;
+  }
+  .secure-category-options {
+    margin: 10px 0 0 16px;
+    .badge-list {
+      margin: 10px 0;
+      li {
+        margin: 0 4px 8px 0;
+        a {
+          color: #888;
+          cursor: pointer;
+        }
+        a:hover {
+          color: $black;
+        }
+      }
+    }
+  }
+}
+
+.tabbed-modal {
+  .modal-body {
+    position: relative;
+    height: 350px;
+  }
+}
+
+
+.modal-tab {
+  position: absolute;
+}
+
+.invite-modal {
+  overflow: visible;
+  .ember-text-field {
+    width: 550px;
+  }
+}
+
+.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 {
+        @include linear-gradient(#ddd, #ddd);
+        text-shadow: none;
+        color: $darkish_gray;
+      }
+    }
+    .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;
+    }
+  }
+}
+
+.flagging-delete-spammer, .delete-all-posts {
+  .modal-footer .cancel {
+    text-decoration: underline;
+    margin-left: 10px;
+  }
+}
+
+.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;
+  }
+  .icon-remove-sign {
+    margin-left: 5px;
+  }
+  li {
+    margin-bottom: 10px;
+  }
+}
diff --git a/app/assets/stylesheets/mobile/onebox.scss b/app/assets/stylesheets/mobile/onebox.scss
new file mode 100644
index 000000000..a0fb25e1e
--- /dev/null
+++ b/app/assets/stylesheets/mobile/onebox.scss
@@ -0,0 +1,85 @@
+@import "../common/foundation/variables";
+@import "../common/foundation/mixins";
+
+a.loading-onebox {
+  background: {
+    image: image-url("spinner_96.gif");
+    position: 0;
+    size: 20px;
+    height: 25px;
+    repeat: no-repeat;
+  };
+  padding-left: 25px;
+}
+
+.onebox-result {
+  font-size: 14px;
+  > .source {
+    margin-bottom: 10px;
+    margin-right: 10px;
+    padding: 10px 0;
+    display: block;
+    color: $black;
+    position: relative;
+    border-bottom: 1px solid $inner_border;
+    .info {
+      a {
+        color: black;
+        text-decoration: none;
+      }
+      background-color: $white;
+      position: absolute;
+      font-size: 14px;
+      img.favicon {
+        margin-right: 3px;
+      }
+    }
+  }
+  .onebox-result-body {
+    padding-top: 5px;
+    font-family: Georgia, Times, "Times New Roman", serif;
+    img {
+      max-width:200px;
+    }
+    h3, h4 {
+      margin: 0px !important;
+    }
+    img.thumbnail {
+      max-width: 25%;
+      height: auto;
+    }
+    code {
+      max-height: 400px;
+    }
+    img {
+      max-width: 30%;
+      max-height: 80%;
+      float: left;
+      margin-right: 10px;
+    }
+    .metrics {
+      clear: both;
+      padding-bottom: 25px;
+      .metric {
+        display: inline-block;
+        padding-left: 33px;
+        float: left;
+      }
+    }
+  }
+}
+
+// RottenTomatoes Onebox
+.onebox-result {
+  .onebox-result-body {
+    img.verdict { 
+      float: none; 
+      margin-right: 7px;
+    }
+    img.popcorn {
+      float: none;
+      margin-left: 20px;
+      margin-right: 5px;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/mobile/pagedown.css.scss b/app/assets/stylesheets/mobile/pagedown.css.scss
new file mode 100644
index 000000000..524defa86
--- /dev/null
+++ b/app/assets/stylesheets/mobile/pagedown.css.scss
@@ -0,0 +1,149 @@
+// styles that apply to the PageDown editor
+// http://code.google.com/p/pagedown/
+
+@import "../common/foundation/mixins";
+
+.wmd-panel {
+  margin-left: 25%;
+  margin-right: 25%;
+  width: 50%;
+  min-width: 500px;
+}
+
+.wmd-button-bar {
+  width: 100%;
+}
+
+.wmd-button-row {
+  margin-left: 5px;
+  margin-right: 5px;
+  margin-bottom: 5px;
+  margin-top: 10px;
+  padding: 0px;
+  height: 20px;
+}
+
+.wmd-spacer {
+  width: 1px;
+  height: 20px;
+  margin-right: 8px;
+  margin-left: 5px;
+  background-color: silver;
+  display: inline-block;
+  float: left;
+}
+
+.wmd-button {
+  width: 20px;
+  height: 20px;
+  padding-left: 2px;
+  padding-right: 3px;
+  margin-right: 5px;
+  background-repeat: no-repeat;
+  background-position: 0px 0px;
+  border: 0px;
+  width: 20px;
+  height: 20px;
+  position: relative;
+  border: 0;
+  float: left;
+
+  font-family: FontAwesome;
+  font-weight: normal;
+  font-style: normal;
+  text-decoration: inherit;
+  display: inline;
+  width: auto;
+  height: auto;
+  line-height: normal;
+  vertical-align: baseline;
+  background-image: none !important;
+  background-position: 0% 0%;
+  background-repeat: repeat;
+  background-color: white;
+  padding: 4px;
+}
+
+.wmd-button:hover {
+  background-color: #99c0fa;
+}
+
+
+#wmd-bold-button:before {
+  content: "\f032";
+}
+
+
+#wmd-italic-button:before {
+  content: "\f033";
+}
+
+#wmd-link-button:before {
+  content: "\f0c1";
+}
+
+#wmd-quote-button:before {
+  content: "\f10e";
+}
+
+#wmd-code-button:before {
+  content: "\f121";
+}
+
+#wmd-image-button:before {
+  content: "\f093";
+}
+
+#wmd-olist-button:before {
+  content: "\f0cb";
+}
+
+#wmd-ulist-button:before {
+  content: "\f0ca";
+}
+
+#wmd-heading-button:before {
+  content:  "\f031";
+}
+
+#wmd-hr-button:before {
+  content:  "\f068";
+}
+
+#wmd-undo-button:before {
+  content:  "\f0e2";
+}
+
+#wmd-redo-button:before {
+  content:  "\f01e";
+}
+
+#wmd-quote-post:before {
+  content:  "\f0e5";
+}
+
+.wmd-prompt-background {
+  background-color: black;
+}
+
+.wmd-prompt-dialog {
+  border: 1px solid #999999;
+  background-color: whitesmoke;
+}
+
+.wmd-prompt-dialog > div {
+  font-size: 0.8em;
+  font-family: arial, helvetica, sans-serif;
+}
+
+.wmd-prompt-dialog > form > input[type="text"] {
+  border: 1px solid #999999;
+  color: black;
+}
+
+.wmd-prompt-dialog > form > input[type="button"] {
+  border: 1px solid #888888;
+  font-family: trebuchet MS, helvetica, sans-serif;
+  font-size: 0.8em;
+  font-weight: bold;
+}
diff --git a/app/assets/stylesheets/mobile/request_access.css.scss b/app/assets/stylesheets/mobile/request_access.css.scss
new file mode 100644
index 000000000..b67de0334
--- /dev/null
+++ b/app/assets/stylesheets/mobile/request_access.css.scss
@@ -0,0 +1,13 @@
+#request-access {
+  width: 325px;
+  margin: 0 auto;
+  input[type=text] {
+    width: 320px;
+    height: 30px;
+    font-size: 22px;
+  }
+  input[type=submit] {
+    font-size: 22px;
+    padding: 10px;
+  }
+}
diff --git a/app/assets/stylesheets/mobile/share_link.css.scss b/app/assets/stylesheets/mobile/share_link.css.scss
new file mode 100644
index 000000000..52025f814
--- /dev/null
+++ b/app/assets/stylesheets/mobile/share_link.css.scss
@@ -0,0 +1,39 @@
+// styles that apply to the "share" popup when sharing a link to a post or topic
+
+@import "../common/foundation/variables";
+@import "../common/foundation/mixins";
+
+#share-link {
+  position: absolute;
+  left: 20px;
+  z-index: 990;
+  @include border-radius-all(3px);
+  @include box-shadow(1px 1px 5px $darkish_gray);
+  background-color: $light_gray;
+  padding: 3px 7px 6px 7px;
+  width: 300px;
+  display: none;
+  &.visible {
+    display: block;
+  }
+  input[type=text] {
+    width: 96%;
+  }
+  h3 {
+    font-size: 13px;
+  }
+  .social-link {
+    margin-left: 2px;
+    margin-right: 8px;
+    float: left;
+    font-size: 22px;
+  }
+  .link {
+    margin-right: 2px;
+    float: right;
+    font-size: 20px;
+    a {
+      color: $black;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/mobile/topic-admin-menu.css.scss b/app/assets/stylesheets/mobile/topic-admin-menu.css.scss
new file mode 100644
index 000000000..b7dc6b0bb
--- /dev/null
+++ b/app/assets/stylesheets/mobile/topic-admin-menu.css.scss
@@ -0,0 +1,32 @@
+// Styles for the topic admin menu
+
+@import "../common/foundation/variables";
+@import "../common/foundation/mixins";
+
+#show-topic-admin {
+  position: fixed;
+  top: 70px;
+  right: 10px;
+  z-index: 1000;
+}
+
+.topic-admin-menu {
+  background-color: $white;
+  width: 205px;
+  padding: 10px;
+  border: 1px solid $gray;
+  position: fixed;
+  top: 70px;
+  right: 10px;
+  z-index: 1000;
+
+  ul {
+    list-style: none;
+    margin: 10px 0 0 0;
+  }
+
+  button {
+    width: 200px;
+    margin-bottom: 5px;
+  }
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/mobile/topic-list.css.scss b/app/assets/stylesheets/mobile/topic-list.css.scss
new file mode 100644
index 000000000..084f6bbc6
--- /dev/null
+++ b/app/assets/stylesheets/mobile/topic-list.css.scss
@@ -0,0 +1,419 @@
+@import "../common/foundation/variables";
+@import "../common/foundation/mixins";
+
+// --------------------------------------------------
+// Topic lists
+// --------------------------------------------------
+
+// List controls
+// --------------------------------------------------
+
+#list-controls {
+  .nav {
+    float: left;
+    margin-bottom: 15px;
+  }
+  .btn {
+    float: right;
+    margin-left: 8px;
+  }
+}
+
+#category-filter {
+  .has-icon span:before {
+    margin-right: 4px;
+    font: 15px/0.9 "FontAwesome";
+  }
+  .has-icon .favorited:before {
+    content: "\f005";
+  }
+  .has-icon .unread:before {
+    content: "\f02e";
+  }
+}
+
+// Base list
+// --------------------------------------------------
+
+#topic-list {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  border: 1px solid #ddd;
+
+  tbody tr {
+    background-color: $white;
+    &:nth-child(even) {
+      background-color: darken($white, 2%);
+    }
+    &.archived a {
+      opacity: 0.6;
+    }
+    &.has-excerpt .star {
+      vertical-align: top;
+      margin-top: 2px;
+    }
+    &.category-description {
+      td {
+        color: $nav-pills-border-color-active;
+      }
+    }
+    &.highlighted {
+      background-color: $highlight;
+    }
+  }
+  th,
+  td {
+    padding: 7px 5px;
+    line-height: 1.25;
+    text-align: left;
+    vertical-align: middle;
+    &:first-of-type {
+      padding-left: 10px;
+    }
+    &:last-of-type {
+      padding-right: 10px;
+    }
+  }
+  th {
+    color: $topic-list-th-color;
+    font-weight: bold;
+    font-size: 13px;
+    &:first-of-type {
+      @include border-radius-all(4px 0 0 0);
+    }
+    &:last-of-type {
+      @include border-radius-all(0 4px 0 0);
+    }
+  }
+  td {
+    //border-top: 1px solid $topic-list-td-border-color;
+    color: $topic-list-td-color;
+    font-size: 14px;
+  }
+  .star {
+    width: 20px;
+    padding-right: 0;
+    .icon-star {
+      position: relative;
+      top: 1px;
+    }
+    + .main-link {
+      padding-left: 0;
+    }
+  }
+  .main-link {
+    width: 495px;
+    font-size: 16px;
+
+    i.score {
+      color: green;
+      cursor: pointer;
+    }
+  }
+
+  .topic-excerpt {
+    font-size: 14px;
+    margin-top: 8px;
+    color: $dark_gray;
+  }
+
+  .rank-details {
+    background-color: #eee;
+    padding: 6px;
+    margin-bottom: 5px;
+
+    p {
+      font-size: 12px;
+      margin: 0;
+      line-height: 14px;
+    }
+  }
+
+  @include medium-width {
+    .main-link {
+      width: 380px;
+    }
+  }
+  @include small-width {
+    .main-link {
+      width: 335px;
+    }
+  }
+  .topic-statuses:empty {
+    display: none;
+  }
+  .topic-status {
+    margin-right: 4px;
+    padding: 0;
+    &:last-of-type {
+      margin-right: 0;
+    }
+  }
+  .badge-notification {
+    position: relative;
+    top: -1px;
+  }
+  .category {
+    width: 140px;
+  }
+  .posters {
+    width: 150px;
+    > a {
+      float: left;
+      margin-right: 4px;
+      &:last-of-type {
+        margin-right: 0;
+      }
+    }
+  }
+  .avatar {
+    &.latest {
+      @include box-shadow(0 0 6px 1px desaturate(lighten($link_color, 18%), 35%));
+    }
+  }
+  .num {
+    text-align: center;
+    a:not(.badge-posts) {
+      color: inherit;
+    }
+  }
+  .likes {
+    width: 50px;
+  }
+  .activity {
+    width: 50px;
+  }
+  .age {
+    width: 60px;
+  }
+}
+
+// Category list
+// --------------------------------------------------
+
+.category-column {
+  float: left;
+  width: 550px;
+  &.first {
+    margin-right: 10px;
+  }
+}
+
+@include medium-width {
+  .category-column {
+    width: 493px;
+    &.first {
+      margin-right: 9px;
+    }
+  }
+}
+
+@include small-width {
+  .category-column {
+    width: 470px;
+  }
+}
+
+.category-list-item {
+  margin-bottom: 10px;
+  #topic-list tbody tr:nth-child(even) {
+    background-color: $white;
+  }
+  .badge-category {
+    float: left;
+    margin: 1px 4px 0 0;
+  }
+  .posters {
+    float: left;
+  }
+  > footer {
+    border: 1px solid $topic-list-border-color;
+    border-top: 0;
+    padding: 7px 10px;
+    background-color: lighten($topic-list-th-background-color, 2%);
+    @include border-radius-all(0 0 4px 4px);
+    @include box-shadow(0 1px 3px rgba($black, 0.22));
+    figure {
+      float: left;
+      margin: 3px 7px 0 0;
+      color: lighten($topic-list-th-color, 5%);
+      font-weight: bold;
+      font-size: 12px;
+      text-shadow: 0 1px 0 $white;
+    }
+    figcaption {
+      display: inline;
+      font-weight: normal;
+    }
+    .btn {
+      float: right;
+      margin-left: 7px;
+    }
+  }
+}
+
+// Loading
+// --------------------------------------------------
+
+// List
+
+.loading #topic-list {
+  border: 0;
+  @include box-shadow(none);
+  tr {
+    background-color: transparent;
+  }
+}
+
+// Topics
+
+#topic-list-bottom {
+  margin: 20px 0;
+}
+
+.topics-loading {
+  width: 200px;
+  margin: 0 auto;
+  padding: 10px 0 10px 43px;
+  color: $white;
+  font-size: 18px;
+  line-height: 25px;
+  background: {
+    color: $black;
+    image: image-url("spinner_96_w.gif");
+    repeat: no-repeat;
+    position: 10px 50%;
+    size: 25px;
+  };
+  @include border-radius-all(12px);
+}
+
+// Misc. stuff
+// --------------------------------------------------
+
+#main {
+  #list-controls {
+    .badge-category {
+      display: inline-block;
+      background-color: yellow;
+      margin: 8px 0 0 8px;
+      float: left;
+    }
+    clear: both;
+  }
+  #list-area {
+    margin-bottom: 300px;
+    .empty-topic-list {
+      padding: 10px;
+    }
+    .unseen {
+      background-color: transparent;
+      padding: 0;
+      border: 0;
+      color: lighten($red, 10%);
+      font-size: 13px;
+      cursor: default;
+    }
+  }
+  #topic-list {
+    .alert {
+      margin-bottom: 0;
+      font-size: 14px;
+    }
+    .spinner {
+      margin-top: 40px;
+    }
+  }
+  span.posted {
+    display: inline-block;
+    text-indent: -9999em;
+    width: 15px;
+    height: 15px;
+    background: {
+      image: image-url("posted.png");
+    };
+  }
+}
+
+
+.btn-group .dropdown-toggle:active,
+.btn-group.open .dropdown-toggle {
+  outline: 0;
+}
+
+.dropdown {
+  position: relative;
+}
+.dropdown-toggle {
+  *margin-bottom: -3px;
+}
+.dropdown-toggle:active,
+.open .dropdown-toggle {
+  outline: 0;
+}
+.caret {
+  display: inline-block;
+  width: 0;
+  height: 0;
+  vertical-align: middle;
+  border-top: 4px solid #000000;
+  border-right: 4px solid transparent;
+  border-left: 4px solid transparent;
+  content: "";
+  margin-left: 5px;
+}
+.dropdown-menu {
+  position: relative;
+  top: 100%;
+  left: 0;
+  z-index: 1000;
+  display: none;
+  float: left;
+  width: 280px;
+  padding: 4px 0;
+  margin: 1px 0 0;
+  list-style: none;
+  background-color: #ffffff;
+  border: 1px solid #ccc;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  *border-right-width: 2px;
+  *border-bottom-width: 2px;
+  border-radius: 5px;
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+  background-clip: padding-box;
+  margin-bottom: 20px;
+.title {font-weight: bold; display: block;}
+
+}
+.dropdown-menu a {
+  display: block;
+  padding: 3px 15px;
+  clear: both;
+  font-weight: normal;
+  line-height: 18px;
+  color: #333333;
+}
+.dropdown-menu li > a:hover,
+.dropdown-menu .active > a,
+.dropdown-menu .active > a:hover {
+  color: #ffffff;
+  text-decoration: none;
+  background-color: #0088cc;
+}
+.open {
+  *z-index: 1000;
+}
+.open > .dropdown-menu {
+  display: block;
+clear: both;
+}
+.fade {
+  opacity: 0;
+  -webkit-transition: opacity 0.15s linear;
+  transition: opacity 0.15s linear;
+}
+.fade.in {
+  opacity: 1;
+}
+
diff --git a/app/assets/stylesheets/mobile/topic-post.css.scss b/app/assets/stylesheets/mobile/topic-post.css.scss
new file mode 100644
index 000000000..ab302c2bb
--- /dev/null
+++ b/app/assets/stylesheets/mobile/topic-post.css.scss
@@ -0,0 +1,411 @@
+
+.topic-post { 
+  border-top: 1px solid #ddd; 
+  padding: 20px 0 10px 0;
+  &:first-of-type {
+    border-top: none; 
+  }
+}
+
+nav.post-controls {
+  background-color: #fff;
+  padding: 0px;
+  border-right: 1px solid #ddd;
+  margin-top: 10px;
+  button {color: #aaa;
+  border-radius: 4px;
+  margin-right: 2px;
+}
+
+span.badge-posts {
+  margin-right: 5px;
+}
+
+.show-replies { 
+  display: none;
+  i {
+    margin-left: 5px;
+  }
+}
+
+button.create {
+  float: right !important; 
+  border: 1px solid #888; 
+  margin-right: 0;
+  color: #888;
+} 
+ 	.like {
+    border-right: 1px solid #ddd;
+}
+
+.create i {
+  margin-right: 5px; 
+}
+
+
+button {
+	border: none;
+  font-size: 16px;
+  padding: 8px 10px;
+  vertical-align: top;
+  background: transparent;
+ 	border: 1px solid #ddd;
+  float: left !important;
+    &:last-of-type {
+      border-right: 1px solid #ddd;
+    }
+       &:hover {
+        }
+        &:active {
+        }
+        &.hidden {
+          display: none;
+        }
+        &.like, &.edit, &.flag, &.delete, &.share, &.bookmark, &.create {
+          float: right;
+        }
+        .read-icon {
+          &:before {
+            font-family: "FontAwesome";
+            content: "\f02e";
+          }
+          &.unseen {
+            &:before {
+              content: "\f097";
+            }
+          }
+          &.last-read {
+          }
+          &.bookmarked {
+            &:before {
+            }
+          }
+        }
+      }
+    }
+
+
+
+.embedded-posts {
+      
+  .topic-meta-data h5 a {
+    margin-left: 10px;
+  }
+}
+
+
+.reply-new {
+  display: none;
+}
+
+.post-actions {
+  margin-left: 20px; 
+  margin-top: 2px;
+}
+
+a.reply-to-tab {
+  display: none;
+}
+
+a.star {
+  display: inline-block; 
+  float: left;
+  font-size: 1.4em !important; 
+  margin-top: 3px;
+}
+
+#main a.star.starred {
+	text-shadow: none !important;
+}
+
+.profiler-results {
+  display: none;
+}
+
+.topic-summary {
+  
+  .btn {
+    border-radius: 0 4px 0 4px;
+  }
+
+  .topic-links li { 
+    word-wrap: break-word; 
+  } 
+
+  border-radius: 5px;
+  margin: 15px 20px 20px 20px;
+  border: 1px solid #ddd;
+   
+  h3 {
+    margin-bottom: 4px;
+    color: #323232;
+    line-height: 23px;
+  }
+  
+  h4 {
+    margin: 0 0 3px 0;
+    color: #6c7376;
+    font-weight: normal;
+    font-size: 12px;
+    line-height: 15px;
+  }
+  
+  p,
+  .participants {
+    margin: 0 0 7px;
+  }
+  
+  ul {
+    margin: 0;
+    list-style: none;
+  }
+  
+  .avatars {
+    > div {
+      float: left;
+      position: relative;
+      margin: 3px 0;
+    }
+    .post-count {
+      position: absolute;
+      top: 2px;
+      right: 6px;
+      padding: 0 4px;
+      font-weight: normal;
+      font-size: 11px;
+      line-height: 14px;
+          }
+  }
+  
+  .avatar {
+    float: left;
+    margin-right: 4px;
+  }
+
+  .summary {
+    &.collapsed {
+    }
+    li {
+      float: left;
+      padding: 7px 11px;
+      &:last-of-type {
+        border-right: 0;
+      }
+    }
+    a,
+
+    .number {
+      font-weight: bold;
+      line-height: 20px;
+    }
+    .number {
+      color: #445a62;
+    }
+    .avatar + a {
+      float: left;
+    }
+  }
+  .avatars,
+  .links,
+  .information {
+    padding: 7px 14px;
+    color: #000;
+  }
+  .information {
+    border-top: 1px solid #d1d1d2;
+  }
+  .topic-links {
+    .badge-notification {
+      margin: 0 0 4px;
+    }
+  }
+  .buttons {
+    float: right;
+    .btn {
+      border: 0;
+      border-bottom: 1px solid #ddd;
+      border-left: 1px solid #e6e6e6;
+      padding: 0 23px;
+      color: #444;
+      background: #ddd;
+      &:hover {
+        background: #ccc;
+        color: #444;      border-bottom: 1px solid #ccc;
+
+      }
+      &.collapsed {
+      }
+      .icon {
+        margin: 0;
+        font-size: 18px;
+        line-height: 52px;
+      }
+    }
+  }
+}
+
+#topic-footer-buttons {
+  border-top: 1px solid #ddd;
+  padding: 20px 20px 0 20px;
+}
+
+#suggested-topics {
+  float: left;
+  clear: left;
+  margin-top: 10px;
+  padding: 0 20px 0 20px;
+
+    th.views, td.views, td.activity, th.activity {
+    display: none;
+    }
+
+   a.badge-category {
+    font-size: 10px;
+    }
+
+   .title {
+    font-size: 14px; line-height: 8px;
+  }
+}
+
+
+
+span.post-count {
+  background: #000; 
+  color: #fff; 
+  opacity: .8;
+}
+
+
+#topic-footer-buttons {
+  .btn {
+    margin-bottom: 5px; 
+    margin-right: 10px;
+    .icon-star {margin-right: 5px;}
+  }
+}
+
+#topic-title {
+  z-index: 1000;
+  background: #eee;
+  margin: 0 0 0 0 !important;
+  padding: 15px 20px 15px 20px;
+}
+
+.topic-post article.boxed img {
+  max-width: 100%;
+}
+
+.quote-button {
+  display: none;
+  position: absolute;
+  background-color: #666; 
+  color: #fff;
+  padding: 10px;
+  width: 90px;
+
+  &:hover {
+    background-color: #999;
+    cursor: pointer; 
+  }
+}
+
+.quote-button.visible {
+  display: block;
+}
+
+iframe {
+  max-width: 100%;
+}
+
+.extra-info {
+  display: none;
+}
+
+.topic-meta-data {
+  margin-bottom: 10px;
+}
+
+.open>.dropdown-menu {
+  display: block;
+}
+
+.dropdown-menu li  {
+  margin: 5px 0; 
+}
+
+.btn-group {
+  margin-top: 50px; 
+  position: relative;
+}
+
+.dropdown-toggle {
+  float: left; 
+  position: relative;
+}
+
+.contents .cooked a {
+  word-wrap: break-word;
+}
+
+.modal-body {
+  input[type=text] {
+    font-size: 16px; 
+    display: block; 
+    margin-top: 10px;
+  } 
+}
+
+
+#share-link {  
+  width: 265px;
+  margin-left: -4px;
+  
+    h3 {
+      margin: 5px 0;
+    }
+  
+    input[type=text] {
+      font-size: 16px;
+      width: 92%;
+      margin-bottom: 10px;
+    }
+}
+
+#selected-posts { 
+  padding-left: 20px; 
+  .btn {
+    margin-bottom: 10px; 
+  }
+}
+
+.post-select {
+  float: right; 
+  margin-right: 20px; 
+  margin-top: -20px;
+}
+
+.post-action .relative-date {
+  margin-left: 5px;
+}
+
+.deleted {
+  background-color: lighten(red, 45%);
+}
+
+#show-topic-admin {
+  color: #7b7b7b; 
+  right: 0px; 
+  border-right: 0;  
+  padding-right: 4px; 
+  padding-left: 5px; 
+  border-radius: 4px 0 0 4px;
+}
+
+.staff a {border-radius: 4px; padding: 4px; margin: -4px 0 0 -4px; background-color: lighten(yellow, 35%);}
+
+.user-title {margin-left: 8px; display: inline-block; color: #aaa;}
+
+span.btn-text {display: none;}
+
+  
\ No newline at end of file
diff --git a/app/assets/stylesheets/mobile/topic.css.scss b/app/assets/stylesheets/mobile/topic.css.scss
new file mode 100644
index 000000000..d9cde948a
--- /dev/null
+++ b/app/assets/stylesheets/mobile/topic.css.scss
@@ -0,0 +1,40 @@
+
+.topic-meta-data {width: 100%;
+
+
+h3 a {margin-left: 10px;}
+
+}
+.topic-meta-data  a {float: left; 
+
+
+
+}
+
+
+
+
+.post-info  {float: right; margin-top: -28px; margin-right: 15px; 
+
+
+}
+.edits {margin-right: 60px;}
+
+
+#topic-progress-wrapper {display: none;}
+
+#topic-title {margin-bottom: 20px; 
+margin: 0 60px 10px 20px;
+line-height: 1.7em;
+
+
+
+h1 {font-size: 1.5em;   margin:0;
+
+a.edit-topic {font-size: 15px;}
+
+}
+
+
+}
+
diff --git a/app/assets/stylesheets/mobile/upload.css.scss b/app/assets/stylesheets/mobile/upload.css.scss
new file mode 100644
index 000000000..3813cf5aa
--- /dev/null
+++ b/app/assets/stylesheets/mobile/upload.css.scss
@@ -0,0 +1,26 @@
+@import "../common/foundation/variables";
+@import "../common/foundation/mixins";
+
+.add-upload .icon-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;
+}
+
+.upload-selector {
+  input[type="text"]{
+    width: 520px;
+  }
+  input[type="file"] {
+    font-size: 14px;
+    line-height: 18px;
+  }
+  .description {
+    color: #9a9ea0;
+  }
+}
diff --git a/app/assets/stylesheets/mobile/user.css.scss b/app/assets/stylesheets/mobile/user.css.scss
new file mode 100644
index 000000000..a6a80ade4
--- /dev/null
+++ b/app/assets/stylesheets/mobile/user.css.scss
@@ -0,0 +1,340 @@
+// styles that apply to the user page
+@import "../common/foundation/variables";
+@import "../common/foundation/mixins";
+
+.user-preferences {
+  textarea {
+    width: 530px;
+    height: 100px;
+  }
+  .static {
+    color: $black;
+    margin-top: 5px;
+    margin-left: 5px;
+    display: inline-block;
+  }
+  .instructions {
+    color: $dark_gray;
+    margin-left: 165px;
+    margin-top: 5px;
+  }
+  .avatar {
+    margin-left: 3px;
+  }
+  .instructions a[href] {
+    color: $darkish_gray;
+  }
+  .warning {
+    @include border-radius-all(6px);
+    background-color: lighten($red, 10%);
+    padding: 5px 8px;
+    color: $white;
+    width: 520px;
+  }
+
+  .other .controls {
+    margin-top: 10px;
+    select {
+      width: 280px;
+    }
+  }
+}
+
+#user-menu {
+  .btn {
+    float: right;
+    margin: 5px 0 0 10px;
+  }
+}
+
+#about-me {
+  padding: 4px;
+  margin: -4px;
+  display: block;
+  width: 220px;
+  min-height: 200px;
+  background-color: #f8f8f8;
+  border-radius: 5px;
+  color: #444;
+  word-wrap: break-word;
+}
+
+#user-info {
+  width: 240px;
+  margin-right: 20px;
+  float: left;
+  .summary {
+    height: 50px;
+  }
+  .avatar {
+    float: left;
+    width: 45px;
+  }
+  nav.buttons {
+    width: 180px;
+    padding: 0;
+    .btn {
+      width: 100%;
+      margin-bottom: 5px;
+      -webkit-box-sizing: border-box;
+         -moz-box-sizing: border-box;
+              box-sizing: border-box;
+    }
+  }
+  h2 {
+    a {
+      font-size: 14px;
+      color: #999999;
+      cursor: pointer;
+    }
+  }
+  .show {
+    dl {
+      width: 100%;
+      overflow: hidden;
+      dt {
+        margin: 0;
+        padding: 0;
+        width: 80px;
+        font-size: 12px;
+        color: #555555;
+        float: left;
+        clear: left;
+      }
+      dd {
+        margin: 0;
+        padding: 0;
+        width: 100px;
+        float: left;
+        color: #444444;
+      }
+    }
+  }
+  .avatar {
+    vertical-align: bottom;
+    a {
+      display: inline-block;
+    }
+  }
+  form {
+    .bio {
+      width: 220px;
+      height: 150px;
+    }
+  }
+  .side-nav {
+    margin-top: 5px;
+  }
+}
+
+#no-invites {
+  padding: 10px;
+}
+
+#invited-users {
+  h2 {
+    color: $darkish_gray;
+    font-size: 20px;
+  }
+  .invites {
+    margin-bottom: 20px;
+    tr {
+      height: 45px;
+    }
+  }
+}
+
+#user-menu h1 {
+  color: #2d3234;
+  float: left;
+  padding-left: 150px;
+  span {
+    font-size: 18px;
+    color: #676b6c;
+    margin-left: 15px;
+    font-weight: lighter;
+    position: relative;
+    top: -4px;
+    .icon {
+      margin-left: 5px;
+      font-size: 14px;
+    }
+  }
+}
+
+#user-menu {
+  margin: 10px 0 0;
+}
+
+.user-heading {
+  border-bottom: 1px solid #bcbcbc;
+  background-color: #e6e6e6;
+  margin-top: -15px;
+  margin-bottom: 10px;
+  position: relative;
+  .nav {
+    float: right;
+    margin: 5px 0 14px 5px;
+  }
+}
+
+.user-info {
+  margin-bottom: 10px;
+  .about-me {
+    position: relative;
+    border: 1px solid #b9b9b9;
+    padding: 6px;
+    @include border-radius-all(4px);
+    float: left;
+    width: 936px;
+    height: 57px;
+    margin-left: 150px;
+    background-color: white;
+    @include box-shadow((0 1px 2px rgba($black, 0.07), inset 0 -4px 4px -4px rgba($black, 0.14)));
+    &:before,
+    &:after {
+      position: absolute;
+      width: 0;
+      height: 0;
+      content: "";
+      border-style: solid;
+      border-color: transparent;
+      pointer-events: none;
+    }
+    &:before {
+      top: 12px;
+      left: -10px;
+      border-width: 10px 10px 10px 0;
+      border-right-color: #b9b9b9;
+    }
+    &:after {
+      top: 13px;
+      left: -9px;
+      border-width: 9px 9px 9px 0;
+      border-right-color: $white;
+    }
+    .missing-profile {
+      color: lighten(#000, 70%);
+    }
+  }
+  @include medium-width {
+    .about-me {
+      width: 821px;
+    }
+  }
+  @include small-width {
+    .about-me {
+      width: 776px;
+    }
+  }
+}
+
+.user-heading {
+  .avatar-wrapper {
+    position: absolute;
+    display: block;
+    width: 120px;
+  }
+}
+
+#user-activity {
+  width: 840px;
+  float: left;
+  margin-bottom: 50px;
+
+  .user-stream {
+    .excerpt {
+      margin: 5px 0px;
+      font-size: 13px;
+      word-wrap: break-word;
+      color: lighten($black, 30%);
+    }
+    .item.moderator-action {
+      background-color: #eef0ff;
+    }
+    .item.deleted {
+      opacity: 0.8;
+      background-color: #ffcece;
+    }
+    .item.hidden {
+      display: block;
+      opacity: 0.4;
+    }
+    .item {
+      padding: 10px 8px;
+      background-color: white;
+      border: 1px solid #b9b9b9;
+      margin-bottom: 10px;
+      @include border-radius-all(4px);
+      @include box-shadow((0 1px 2px rgba($black, 0.07), inset 0 -4px 4px -4px rgba($black, 0.14)));
+    }
+    .type {
+      color: lighten($black, 40%);
+    }
+    span.name {
+      color: lighten($black, 40%);
+    }
+    .time {
+      display: block;
+      float: right;
+      color: silver;
+      margin-right: 8px;
+      font-size: 11px;
+    }
+    .avatar-link {
+      float: left;
+      margin-right: 10px;
+    }
+    .title {
+      display: block;
+      margin-bottom: 4px;
+      font-size: 14px;
+    }
+  }
+}
+
+// styling of bottom section
+.user-stream .child-actions {
+  margin-top: 8px;
+  .avatar-link {
+    float: none;
+  }
+  .icon {
+    width: 15px;
+    display: inline-block;
+    color: #777;
+  }
+  .avatar-wrapper {
+    border: none;
+  }
+  .avatar-link {
+    margin-right: 3px;
+
+  }
+}
+
+@include medium-width {
+  #user-activity {
+    width: 725px;
+  }
+}
+@include small-width {
+  #user-activity {
+    width: 680px;
+  }
+}
+
+.avatar-selector {
+  label {
+    display: inline-block;
+    margin-right: 10px;
+  }
+  #avatar-input {
+    width: 0;
+    height: 0;
+    overflow: hidden;
+  }
+  .avatar {
+    margin: 5px 10px 5px 0;
+  }
+}
diff --git a/app/assets/stylesheets/mobile/username_tagsinput.css b/app/assets/stylesheets/mobile/username_tagsinput.css
new file mode 100644
index 000000000..3682dd523
--- /dev/null
+++ b/app/assets/stylesheets/mobile/username_tagsinput.css
@@ -0,0 +1,31 @@
+div.tagsinput {
+  border:1px solid #CCC;
+  background: #FFF;
+  padding:5px 5px 0px;
+  width:584px;
+  height:100px;
+  overflow-y: auto;
+  border-radius: 4px;
+}
+
+div.tagsinput span.tag {
+  border: 1px solid #a5d24a;
+  border-radius: 2px;
+  display: block;
+  float: left;
+  padding: 1px 5px;
+  text-decoration:none;
+  background: #cde69c;
+  color: #638421;
+  margin-right: 5px;
+  margin-bottom:5px;
+  font-family: helvetica;
+  font-size:13px;
+}
+
+div.tagsinput span.tag a { font-weight: bold; color: #82ad2b; text-decoration:none; font-size: 11px;  }
+div.tagsinput input { width:80px; margin:0px; font-family: helvetica; font-size: 13px; border:1px solid transparent;
+padding:2px 5px; background: transparent; color: #000; outline:0px;  margin-right:5px; margin-bottom:5px; }
+div.tagsinput div { display:block; float: left; }
+.tags_clear { clear: both; width: 100%; height: 0px; }
+.not_valid {background: #FBD8DB !important; color: #90111A !important;}
diff --git a/app/assets/stylesheets/vendor/bootstrap.css.scss b/app/assets/stylesheets/vendor/bootstrap.css
similarity index 99%
rename from app/assets/stylesheets/vendor/bootstrap.css.scss
rename to app/assets/stylesheets/vendor/bootstrap.css
index d39fb6399..17467e4fe 100644
--- a/app/assets/stylesheets/vendor/bootstrap.css.scss
+++ b/app/assets/stylesheets/vendor/bootstrap.css
@@ -12,7 +12,7 @@
  * no longer required.
  */
 
- @import "common/foundation/mixins";
+ @import "foundation/mixins";
 
 a:focus {
   outline: thin dotted #333;
@@ -736,4 +736,4 @@ table [class*=span] {
   &.info:hover td {
     background-color: #c4e3f3;
   }
-}
+}
\ No newline at end of file