diff --git a/app/assets/stylesheets/common/admin/admin_base.scss b/app/assets/stylesheets/common/admin/admin_base.scss
index ad48b0c52d7..f8f3eb15c65 100644
--- a/app/assets/stylesheets/common/admin/admin_base.scss
+++ b/app/assets/stylesheets/common/admin/admin_base.scss
@@ -1135,7 +1135,7 @@ button.ru {
   visibility: hidden;
 }
 
-@media only screen
+@media all
 and (max-width : 850px) {
   .nav-stacked {
     .glyph {width: auto; position: relative;}
@@ -1144,7 +1144,7 @@ and (max-width : 850px) {
   }
 }
 
-@media only screen
+@media all
 and (min-width : 320px)
 and (max-width : 500px) {
 
diff --git a/app/assets/stylesheets/common/base/header.scss b/app/assets/stylesheets/common/base/header.scss
index 89ea5451258..3bafc2a8d75 100644
--- a/app/assets/stylesheets/common/base/header.scss
+++ b/app/assets/stylesheets/common/base/header.scss
@@ -128,14 +128,16 @@
       }
       .unread-notifications {
         right: -4px;
-        background-color: scale-color($tertiary, $lightness: 50%);
+        background-color: $secondary;
       }
       .unread-private-messages {
         left: -4px;
       }
     }
     .flagged-posts {
-      background-color: $danger;
+      border-color: $danger;
+      color: $danger;
+      background: $secondary;
     }
 
 }
@@ -231,6 +233,7 @@
       padding: 3px;
       margin-top: -22px;
       margin-left: 60px;
+      background: transparent;
     }
     .heading {
       padding: 5px 5px 5px 0;
diff --git a/app/assets/stylesheets/common/base/magnific-popup.scss b/app/assets/stylesheets/common/base/magnific-popup.scss
index 7427e863f86..57b1ee9c1a5 100644
--- a/app/assets/stylesheets/common/base/magnific-popup.scss
+++ b/app/assets/stylesheets/common/base/magnific-popup.scss
@@ -535,7 +535,7 @@ button {
 
 
   @if $include-mobile-layout-for-image {
-    @media screen and (max-width: 800px) and (orientation:landscape), screen and (max-height: 300px) {
+    @media all and (max-width: 800px) and (orientation:landscape), screen and (max-height: 300px) {
       /**
        * Remove all paddings around the image on small screen
        */
diff --git a/app/assets/stylesheets/common/base/mobile.scss b/app/assets/stylesheets/common/base/mobile.scss
index 617990659df..65de181766b 100644
--- a/app/assets/stylesheets/common/base/mobile.scss
+++ b/app/assets/stylesheets/common/base/mobile.scss
@@ -1,4 +1,4 @@
-@media only screen
+@media all
 and (min-device-width : 320px)
 and (max-device-width : 540px) {
   #reply-control {
diff --git a/app/assets/stylesheets/common/components/badges.css.scss b/app/assets/stylesheets/common/components/badges.css.scss
index 24e712ea528..2fb4ab8e0ee 100644
--- a/app/assets/stylesheets/common/components/badges.css.scss
+++ b/app/assets/stylesheets/common/components/badges.css.scss
@@ -61,22 +61,23 @@ h1 a.badge-category div {vertical-align: top;}
 
 .badge-notification {
   @extend %badge;
-  padding: 4px;
-  color: $secondary;
+  padding: 3px;
+  color: $tertiary;
+  border: 1px solid $tertiary;
   font-size: 11px;
   line-height: 1;
   min-width: 11px;
   text-align: center;
-  background-color: scale-color($primary, $lightness: 70%);
+  background-color: transparent;
   &[href] {
-  color: $secondary;
+  color: $tertiary;
   }
 
   // New posts
 
   &.new-posts, &.unread-posts {
-    background-color: scale-color($tertiary, $lightness: 50%);
-    color: $secondary;
+    background-color: transparent;
+    color: $tertiary;
     font-weight: normal;
   }
 
diff --git a/app/assets/stylesheets/common/foundation/mixins.scss b/app/assets/stylesheets/common/foundation/mixins.scss
index 8fa2a8c6cb7..f4fbe9b3009 100644
--- a/app/assets/stylesheets/common/foundation/mixins.scss
+++ b/app/assets/stylesheets/common/foundation/mixins.scss
@@ -7,28 +7,28 @@
 
 
 @mixin small-width {
-  @media screen and (max-width: 850px) {
+  @media all and (max-width: 850px) {
     @content;
   }
 }
 
 @mixin medium-width {
-  @media screen and (min-width: 1000px) and (max-width: 1139px) {
+  @media all and (min-width: 1000px) and (max-width: 1139px) {
     @content;
   }
 }
 
 @mixin large-width {
-  @media screen and (min-width: 1140px) {
+  @media all and (min-width: 1140px) {
     @content;
   }
 }
 
-@mixin mobile-portrait      { @media only screen and (max-width : 320px) { @content; } }
-@mixin not-mobile-portrait  { @media only screen and (min-width : 321px) { @content; } }
-@mixin mobile-landscape     { @media only screen and (min-width : 321px) and (max-width : 959px) { @content; } }
-@mixin not-tablet-landscape { @media only screen and (max-width : 959px) { @content; } }
-@mixin tablet-landscape     { @media only screen and (min-width : 960px) { @content; } }
+@mixin mobile-portrait      { @media all and (max-width : 320px) { @content; } }
+@mixin not-mobile-portrait  { @media all and (min-width : 321px) { @content; } }
+@mixin mobile-landscape     { @media all and (min-width : 321px) and (max-width : 959px) { @content; } }
+@mixin not-tablet-landscape { @media all and (max-width : 959px) { @content; } }
+@mixin tablet-landscape     { @media all and (min-width : 960px) { @content; } }
 
 // CSS3 properties
 // --------------------------------------------------
diff --git a/app/assets/stylesheets/desktop/compose.scss b/app/assets/stylesheets/desktop/compose.scss
index 9e96e2f39d2..b14da55c6a1 100644
--- a/app/assets/stylesheets/desktop/compose.scss
+++ b/app/assets/stylesheets/desktop/compose.scss
@@ -445,7 +445,7 @@
   padding-right: 20px;
 }
 
-@media screen and (min-width: 1550px) {
+@media all and (min-width: 1550px) {
   #reply-control {
     .wmd-controls {
       width: 1450px;
diff --git a/app/assets/stylesheets/desktop/header.scss b/app/assets/stylesheets/desktop/header.scss
index b8300e459c4..c9be7237d94 100644
--- a/app/assets/stylesheets/desktop/header.scss
+++ b/app/assets/stylesheets/desktop/header.scss
@@ -21,7 +21,10 @@
 
 /* needs to be global, used in user-drop down and user page too */
 .unread-private-messages {
-  background-color: $success;
+  border-color: $success;
+  color: $success;
+  background: $secondary;
+  &.badge-notification[href] {color: $success;}
 }
 
 #main {
diff --git a/app/assets/stylesheets/desktop/poster_expansion.scss b/app/assets/stylesheets/desktop/poster_expansion.scss
index 80709e161e5..3fef1cb4603 100644
--- a/app/assets/stylesheets/desktop/poster_expansion.scss
+++ b/app/assets/stylesheets/desktop/poster_expansion.scss
@@ -9,6 +9,7 @@
   margin-top: -2px;
   background-color: $secondary;
   padding: 12px 12px 5px 12px;
+  border: 1px solid scale-color-diff(); 
 
   .avatar-placeholder {
     width: 120px;
diff --git a/app/assets/stylesheets/desktop/topic-list.scss b/app/assets/stylesheets/desktop/topic-list.scss
index ef359bf7bbd..f225cff2058 100644
--- a/app/assets/stylesheets/desktop/topic-list.scss
+++ b/app/assets/stylesheets/desktop/topic-list.scss
@@ -290,7 +290,7 @@ button.dismiss-read {
 
 /* Tablet (portrait) ----------- */
 
-@media only screen
+@media all
 and (max-width : 850px) {
 
   .nav-pills {
diff --git a/app/assets/stylesheets/desktop/topic-post.scss b/app/assets/stylesheets/desktop/topic-post.scss
index 4c7a68fe804..99de6d0b641 100644
--- a/app/assets/stylesheets/desktop/topic-post.scss
+++ b/app/assets/stylesheets/desktop/topic-post.scss
@@ -1048,7 +1048,7 @@ span.highlighted {
 
 /* Tablet (portrait) ----------- */
 
-@media only screen
+@media all
 and (max-width : 1140px) {
   .extra-info {
     h1 {
@@ -1061,7 +1061,7 @@ and (max-width : 1140px) {
 }
 
 
-@media only screen
+@media all
 and (max-width : 975px) {
   .extra-info {
     h1 {
@@ -1073,14 +1073,14 @@ and (max-width : 975px) {
   }
 }
 
-@media only screen
+@media all
 and (max-width : 940px) {
   .post-cloak .reply-to-tab {
     right: 250px;
   }
 }
 
-@media only screen
+@media all
 and (max-width : 870px) {
   .extra-info {
     h1 {
diff --git a/app/assets/stylesheets/desktop/topic.scss b/app/assets/stylesheets/desktop/topic.scss
index a4c12f40ca5..4171c439047 100644
--- a/app/assets/stylesheets/desktop/topic.scss
+++ b/app/assets/stylesheets/desktop/topic.scss
@@ -292,7 +292,7 @@ kbd
     padding: .1em .6em;
 }
 
-@media only screen
+@media all
 and (max-width : 940px) {
 
   #topic-progress, #topic-progress-expanded {
@@ -301,7 +301,7 @@ and (max-width : 940px) {
 }
 
 
-@media only screen
+@media all
 and (max-width : 870px) {
 
   #topic-progress, #topic-progress-expanded {
diff --git a/app/models/site_customization.rb b/app/models/site_customization.rb
index 7217f0b6dcc..1a7c453b421 100644
--- a/app/models/site_customization.rb
+++ b/app/models/site_customization.rb
@@ -179,14 +179,14 @@ class SiteCustomization < ActiveRecord::Base
     return "" unless stylesheet.present?
     return @stylesheet_link_tag if @stylesheet_link_tag
     ensure_stylesheets_on_disk!
-    @stylesheet_link_tag = "<link class=\"custom-css\" rel=\"stylesheet\" href=\"/#{CACHE_PATH}#{stylesheet_filename}?#{stylesheet_hash}\" type=\"text/css\" media=\"screen\">"
+    @stylesheet_link_tag = "<link class=\"custom-css\" rel=\"stylesheet\" href=\"/#{CACHE_PATH}#{stylesheet_filename}?#{stylesheet_hash}\" type=\"text/css\" media=\"all\">"
   end
 
   def mobile_stylesheet_link_tag
     return "" unless mobile_stylesheet.present?
     return @mobile_stylesheet_link_tag if @mobile_stylesheet_link_tag
     ensure_stylesheets_on_disk!
-    @mobile_stylesheet_link_tag = "<link class=\"custom-css\" rel=\"stylesheet\" href=\"/#{CACHE_PATH}#{stylesheet_filename(:mobile)}?#{stylesheet_hash(:mobile)}\" type=\"text/css\" media=\"screen\">"
+    @mobile_stylesheet_link_tag = "<link class=\"custom-css\" rel=\"stylesheet\" href=\"/#{CACHE_PATH}#{stylesheet_filename(:mobile)}?#{stylesheet_hash(:mobile)}\" type=\"text/css\" media=\"all\">"
   end
 end
 
diff --git a/lib/sass/discourse_stylesheets.rb b/lib/sass/discourse_stylesheets.rb
index 0c994ee7973..29bf3baa9c9 100644
--- a/lib/sass/discourse_stylesheets.rb
+++ b/lib/sass/discourse_stylesheets.rb
@@ -13,7 +13,7 @@ class DiscourseStylesheets
     @lock.synchronize do
       builder.compile unless File.exists?(builder.stylesheet_fullpath)
       builder.ensure_digestless_file
-      %[<link href="#{Rails.env.production? ? builder.stylesheet_relpath : builder.stylesheet_relpath_no_digest + '?body=1'}" media="screen" rel="stylesheet" />].html_safe
+      %[<link href="#{Rails.env.production? ? builder.stylesheet_relpath : builder.stylesheet_relpath_no_digest + '?body=1'}" media="all" rel="stylesheet" />].html_safe
     end
   end
 
diff --git a/spec/models/site_customization_spec.rb b/spec/models/site_customization_spec.rb
index 657462c3225..cce7e562766 100644
--- a/spec/models/site_customization_spec.rb
+++ b/spec/models/site_customization_spec.rb
@@ -68,7 +68,7 @@ describe SiteCustomization do
     context '#custom_stylesheet' do
       it 'should allow me to lookup a filename containing my preview stylesheet' do
         SiteCustomization.custom_stylesheet(customization.key).should ==
-          "<link class=\"custom-css\" rel=\"stylesheet\" href=\"/uploads/stylesheet-cache/#{customization.key}.css?#{customization.stylesheet_hash}\" type=\"text/css\" media=\"screen\">"
+          "<link class=\"custom-css\" rel=\"stylesheet\" href=\"/uploads/stylesheet-cache/#{customization.key}.css?#{customization.stylesheet_hash}\" type=\"text/css\" media=\"all\">"
       end
 
       it "should return blank link tag for mobile if mobile_stylesheet is blank" do
@@ -77,7 +77,7 @@ describe SiteCustomization do
 
       it "should return link tag for mobile custom stylesheet" do
         SiteCustomization.custom_stylesheet(customization_with_mobile.key, :mobile).should ==
-          "<link class=\"custom-css\" rel=\"stylesheet\" href=\"/uploads/stylesheet-cache/mobile_#{customization_with_mobile.key}.css?#{customization_with_mobile.stylesheet_hash(:mobile)}\" type=\"text/css\" media=\"screen\">"
+          "<link class=\"custom-css\" rel=\"stylesheet\" href=\"/uploads/stylesheet-cache/mobile_#{customization_with_mobile.key}.css?#{customization_with_mobile.stylesheet_hash(:mobile)}\" type=\"text/css\" media=\"all\">"
       end
     end