Generate separate stylesheet for older IE browsers.

As described in http://jakearchibald.github.io/sass-ie/
Set the width of various layout elements for older IE versions.
Add padding between columns in ems not rems for IE8

21 files changed, 343 insertions, 115 deletions

diff --git a/app/assets/stylesheets/responsive/_attachments_layout.scss b/app/assets/stylesheets/responsive/_attachments_layout.scss
index b71453b06..cda00213d 100644
--- a/app/assets/stylesheets/responsive/_attachments_layout.scss
+++ b/app/assets/stylesheets/responsive/_attachments_layout.scss
@@ -3,7 +3,10 @@
 /* Generated HTML should be full row width */
 #view-html-content {
    @include grid-column(12);
-
+   @include ie8{
+     padding-left: 0.9375em;
+     padding-right: 0.9375em;
+   }
    table {
      border-collapse:collapse;
      margin-bottom:1em;
@@ -20,25 +23,39 @@
 .view_html_prefix {
 
   @include grid-column(12);
+  @include ie8{
+    padding-left: 0.9375em;
+    padding-right: 0.9375em;
+  }
 
   .view_html_logo {
     @include grid-column(12);
-      @media( min-width: $main_menu-mobile_menu_cutoff ){
+      @include respond-min( $main_menu-mobile_menu_cutoff ){
           @include grid-column($columns:3);
+          @include ie8{
+            padding-right: 0.9375em;
+          }
       }
   }
 
   .view_html_description {
     @include grid-column(12);
-      @media( min-width: $main_menu-mobile_menu_cutoff ){
+      @include respond-min($main_menu-mobile_menu_cutoff ){
           @include grid-column($columns:7, $pull: 2);
+          @include ie8{
+            padding-left: 0.9375em;
+            padding-right: 0.9375em;
+          }
       }
   }
 
   .view_html_download_link {
     @include grid-column(12);
-      @media( min-width: $main_menu-mobile_menu_cutoff ){
+      @include respond-min( $main_menu-mobile_menu_cutoff ){
           @include grid-column($columns:2, $push: 7);
+          @include ie8{
+            padding-left: 0.9375em;
+          }
       }
   }
 }
diff --git a/app/assets/stylesheets/responsive/_attachments_style.scss b/app/assets/stylesheets/responsive/_attachments_style.scss
index ba75ad06d..79d52b7f6 100644
--- a/app/assets/stylesheets/responsive/_attachments_style.scss
+++ b/app/assets/stylesheets/responsive/_attachments_style.scss
@@ -17,7 +17,7 @@
 
 .view_html_prefix {
   text-align:center;
-  @media( min-width: $main_menu-mobile_menu_cutoff ){
+  @include respond-min( $main_menu-mobile_menu_cutoff ){
     text-align:left;
     min-height:3em;
     padding:0.5em 1em;
diff --git a/app/assets/stylesheets/responsive/_categorization_game_layout.scss b/app/assets/stylesheets/responsive/_categorization_game_layout.scss
index 9364444cd..c0d612ce1 100644
--- a/app/assets/stylesheets/responsive/_categorization_game_layout.scss
+++ b/app/assets/stylesheets/responsive/_categorization_game_layout.scss
@@ -6,8 +6,21 @@
 
 #game_sidebar {
   @include grid-column(12);
-  @media( min-width: $main_menu-mobile_menu_cutoff ){
+  @include respond-min( $main_menu-mobile_menu_cutoff ){
     @include grid-column($columns:4, $float:right);
+    @include ie8{
+      padding-left: 0.9375em;
+    }
+  }
+}
+
+#game {
+  @include grid-column(12);
+  @include respond-min( $main_menu-mobile_menu_cutoff ){
+    @include grid-column($columns:8);
+    @include ie8{
+      padding-right: 0.9375em;
+    }
   }
 }
 
diff --git a/app/assets/stylesheets/responsive/_footer_layout.scss b/app/assets/stylesheets/responsive/_footer_layout.scss
index 7e5f56461..2b0c956fa 100644
--- a/app/assets/stylesheets/responsive/_footer_layout.scss
+++ b/app/assets/stylesheets/responsive/_footer_layout.scss
@@ -4,3 +4,47 @@
   margin:5em 0 0;
   padding:0.5em 0;
 }
+
+#footer-nav{
+
+  @include grid-row();
+  @include ie8{
+    width: $main_menu-mobile_menu_cutoff;
+  }
+  img {
+    display: none;
+  }
+
+  ul{
+    padding: 0;
+    list-style: none outside none;
+  }
+
+  @include respond-min( $main_menu-mobile_menu_cutoff ){
+    ul {
+      @include block-grid(4);
+    }
+    @include ie8{
+      #footer-nav ul > li:nth-child(4n+1) {
+        padding-left: 0em;
+        padding-right: 1.40625em;
+      }
+      #footer-nav ul > li:nth-child(4n+2) {
+        padding-left: 0.46875rem;
+        padding-right: 0.9375rem;
+      }
+      #footer-nav ul > li:nth-child(4n+3) {
+        padding-left: 0.9375em;
+        padding-right: 0.46875em;
+      }
+      #footer-nav ul > li:nth-child(4n) {
+        padding-left: 1.40625em;
+        padding-right: 0em;
+      }
+    }
+
+    img {
+      display: inherit;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/responsive/_frontpage_layout.scss b/app/assets/stylesheets/responsive/_frontpage_layout.scss
index f1382e0bd..24a2b21b9 100644
--- a/app/assets/stylesheets/responsive/_frontpage_layout.scss
+++ b/app/assets/stylesheets/responsive/_frontpage_layout.scss
@@ -2,23 +2,29 @@
 
 #frontpage_splash {
   @include grid-row($behavior: nest);
-  @media( min-width: $main_menu-mobile_menu_cutoff ){
+  @include respond-min( $main_menu-mobile_menu_cutoff ){
     min-height: 375px;
   }
 
   #left_column {
     @include grid-column(12);
-    @media( min-width: $main_menu-mobile_menu_cutoff ){
+    @include respond-min( $main_menu-mobile_menu_cutoff ){
       @include grid-column(8);
       margin-top:66px;
+      @include ie8{
+        padding-right: 0.9375em;
+      }
     }
   }
 
   #right_column {
     @include grid-column(12);
-    @media( min-width: $main_menu-mobile_menu_cutoff ){
+    @include respond-min( $main_menu-mobile_menu_cutoff ){
       @include grid-column(4);
       margin-top: 30px;
+      @include ie8{
+        padding-left: 0.9375em;
+      }
     }
 
     input[type=text] {
@@ -40,21 +46,27 @@
 #frontpage_examples {
   @include grid-row($behavior: nest);
   margin-top: 2em;
-  @media( min-width: $main_menu-mobile_menu_cutoff ){
+  @include respond-min( $main_menu-mobile_menu_cutoff ){
     margin-top: 0;
   }
 
   #examples_0 {
     @include grid-column(12);
-    @media( min-width: $main_menu-mobile_menu_cutoff ){
+    @include respond-min( $main_menu-mobile_menu_cutoff ){
       @include grid-column($columns:6);
+      @include ie8{
+        padding-right: 0.9375em;
+      }
     }
   }
 
   #examples_1 {
     @include grid-column(12);
-    @media( min-width: $main_menu-mobile_menu_cutoff ){
+    @include respond-min( $main_menu-mobile_menu_cutoff ){
       @include grid-column($columns:6);
+      @include ie8{
+        padding-left: 0.9375em;
+      }
     }
   }
 
diff --git a/app/assets/stylesheets/responsive/_global_layout.scss b/app/assets/stylesheets/responsive/_global_layout.scss
index 9e44c1cb2..4a04b15fc 100644
--- a/app/assets/stylesheets/responsive/_global_layout.scss
+++ b/app/assets/stylesheets/responsive/_global_layout.scss
@@ -1,15 +1,23 @@
 /* Layout across the site */
 #wrapper{
   @include grid-row();
+  @include ie8{
+    width: $main_menu-mobile_menu_cutoff;
+  }
 }
 
+/* A global 12 column element provides padding for all pages */
 #content{
   @include grid-column(12);
+  @include ie8{
+    padding-left: 0.9375em;
+    padding-right: 0.9375em;
+  }
 }
 
 
 textarea{
-  @media( min-width: $main_menu-mobile_menu_cutoff ){
+  @include respond-min( $main_menu-mobile_menu_cutoff ){
     width: inherit;
   }
 }
@@ -27,31 +35,51 @@ textarea{
 /* Column headers */
 #header_right {
   @include grid-column(12);
-  @media( min-width: $main_menu-mobile_menu_cutoff ){
+
+
+  @include respond-min( $main_menu-mobile_menu_cutoff ){
     @include grid-column($columns:4, $float:right);
     padding-top:27px;
+    @include ie8{
+      padding-left: 0.9375em;
+    }
   }
 }
 
 #header_left {
   @include grid-column(12);
-  @media( min-width: $main_menu-mobile_menu_cutoff ){
+  @include respond-min( $main_menu-mobile_menu_cutoff ){
     @include grid-column(8);
+    @include ie8{
+      padding-right: 0.9375em;
+    }
   }
 }
 
 /* Columns */
 #left_column_flip, #left_column{
   @include grid-column(12);
-  @media( min-width: $main_menu-mobile_menu_cutoff ){
+  @include respond-min( $main_menu-mobile_menu_cutoff ){
     @include grid-column(9);
   }
 }
 
 #right_column_flip, #right_column {
   @include grid-column(12);
-  @media( min-width: $main_menu-mobile_menu_cutoff ){
+  @include respond-min( $main_menu-mobile_menu_cutoff ){
     @include grid-column($columns:3);
     margin-top:20px;
   }
 }
+
+#left_column_flip, #right_column {
+  @include ie8{
+    padding-left: 0.9375em;
+  }
+}
+
+#right_column_flip, #left_column {
+  @include ie8{
+    padding-right: 0.9375em;
+  }
+}
diff --git a/app/assets/stylesheets/responsive/_header_layout.scss b/app/assets/stylesheets/responsive/_header_layout.scss
index 404b31a9b..d35107bf2 100644
--- a/app/assets/stylesheets/responsive/_header_layout.scss
+++ b/app/assets/stylesheets/responsive/_header_layout.scss
@@ -3,6 +3,9 @@
 #banner_content{
     @include grid-row;
     position: relative;
+    @include ie8{
+      width: $main_menu-mobile_menu_cutoff;
+    }
 }
 
 #banner{
@@ -33,7 +36,7 @@
     #logo_wrapper{
         @include grid-column(4);
         padding: 1em 1em 0 1em;
-        @media( min-width: $main_menu-mobile_menu_cutoff ){
+        @include respond-min( $main_menu-mobile_menu_cutoff ){
           padding: 1em;
           margin-bottom: 1em;
         }
@@ -62,7 +65,7 @@
 
     }
 
-    @media( min-width: $main_menu-mobile_menu_cutoff ){
+    @include respond-min( $main_menu-mobile_menu_cutoff ){
         // On larger screens show the menu
         #banner_nav,
         #logged_in_bar,
@@ -82,7 +85,7 @@
 
 #topnav{
   padding: 0  0 1em 0;
-  @media( min-width: $main_menu-mobile_menu_cutoff ){
+  @include respond-min( $main_menu-mobile_menu_cutoff ){
       padding: 0;
   }
 }
@@ -92,24 +95,27 @@
     @include grid-row;
     padding: 0;
     position: relative;
+    @include ie8{
+      width: $main_menu-mobile_menu_cutoff;
+    }
     /* Spread the nav elements horizontally on larger screens */
     li{
         display: block;
-        @media( min-width: $main_menu-mobile_menu_cutoff ){
+        @include respond-min( $main_menu-mobile_menu_cutoff ){
           display: inline-block;
         }
     }
     a{
       padding: 0.5em 1em;
       display: block;
-      @media( min-width: $main_menu-mobile_menu_cutoff ){
+      @include respond-min( $main_menu-mobile_menu_cutoff ){
         display: inline-block;
       }
     }
 }
 
 #navigation_search {
-   @media( min-width: $main_menu-mobile_menu_cutoff ){
+   @include respond-min( $main_menu-mobile_menu_cutoff ){
         position: absolute;
         top: 0;
         right: 0;
@@ -133,8 +139,12 @@
 }
 
 #logged_in_bar{
-    @media( min-width: $main_menu-mobile_menu_cutoff ){
+    @include respond-min( $main_menu-mobile_menu_cutoff ){
         @include grid-column(8);
+        @include ie8{
+          padding-left: 0.9375em;
+          padding-right: 0.9375em;
+        }
     }
 
     a, .greeting {
@@ -142,7 +152,7 @@
         padding: 0.5em 1em;
     }
 
-    @media( min-width: $main_menu-mobile_menu_cutoff ){
+    @include respond-min( $main_menu-mobile_menu_cutoff ){
       #logged_in_links {
         float: right;
         top: 3em;
@@ -158,7 +168,7 @@
 }
 
 #user_locale_switcher {
-    @media( min-width: $main_menu-mobile_menu_cutoff ){
+    @include respond-min( $main_menu-mobile_menu_cutoff ){
       position: absolute;
       right: 0;
       top: 0;
@@ -166,7 +176,7 @@
     a{
         display: block;
         padding: 0.5em 1em;
-        @media( min-width: $main_menu-mobile_menu_cutoff ){
+        @include respond-min( $main_menu-mobile_menu_cutoff ){
           display: inline-block;
         }
     }
diff --git a/app/assets/stylesheets/responsive/_lists_layout.scss b/app/assets/stylesheets/responsive/_lists_layout.scss
index 7d6102bdf..5a8072601 100644
--- a/app/assets/stylesheets/responsive/_lists_layout.scss
+++ b/app/assets/stylesheets/responsive/_lists_layout.scss
@@ -12,7 +12,7 @@
   .bottomline {
     display:block;
     margin-bottom: 0.5em;
-    @media( min-width: $main_menu-mobile_menu_cutoff ){
+    @include respond-min( $main_menu-mobile_menu_cutoff ){
       margin-bottom: 1.5em;
     }
   }
@@ -45,21 +45,27 @@
   @include grid-row($behavior:nest);
   .request_right {
     @include grid-column(12);
-    @media( min-width: $main_menu-mobile_menu_cutoff ){
-      @include grid-column($columns:4, $float:right, $collapse: true);
+    @include respond-min( $main_menu-mobile_menu_cutoff ){
+      @include grid-column($columns:4, $float:right);
+      @include ie8{
+        padding-left: 0.9375em;
+      }
     }
   }
 
   .request_left {
     @include grid-column(12);
-    @media( min-width: $main_menu-mobile_menu_cutoff ){
+    @include respond-min( $main_menu-mobile_menu_cutoff ){
       @include grid-column($columns:8);
+      @include ie8{
+        padding-right: 0.9375em;
+      }
     }
   }
 
    .desc {
     width:100%;
-    @media( min-width: $main_menu-mobile_menu_cutoff ){
+    @include respond-min( $main_menu-mobile_menu_cutoff ){
       padding:0 0 0 2em;
     }
   }
diff --git a/app/assets/stylesheets/responsive/_new_request_layout.scss b/app/assets/stylesheets/responsive/_new_request_layout.scss
index c62094686..8ace3b269 100644
--- a/app/assets/stylesheets/responsive/_new_request_layout.scss
+++ b/app/assets/stylesheets/responsive/_new_request_layout.scss
@@ -2,9 +2,12 @@
 
 /* /select_authority page */
 #authority_selection {
-  @include grid-column(12, $collapse: true);
-  @media( min-width: $main_menu-mobile_menu_cutoff ){
-    @include grid-column(6, $collapse: true);
+  @include grid-column($columns: 12, $collapse: true);
+  @include respond-min( $main_menu-mobile_menu_cutoff ){
+    @include grid-column($columns: 6, $collapse: true);
+    @include ie8{
+      padding-right: 0.9375em;
+    }
   }
 }
 
@@ -14,9 +17,12 @@
 
 #authority_preview {
   @include grid-column(12);
-  @media( min-width: $main_menu-mobile_menu_cutoff ){
+  @include respond-min( $main_menu-mobile_menu_cutoff ){
     @include grid-column(6);
     margin-top:-67px;
+    @include ie8{
+      padding-right: 0.9375em;
+    }
   }
 
   /* Hide some elements of the public body that aren't appropriate in this
@@ -48,8 +54,11 @@
   /* Restrict width of form elements on wide screens */
     #request_header_body, #request_header_subject, #typeahead_response  {
     @include grid-column(12);
-    @media( min-width: $main_menu-mobile_menu_cutoff ){
-      @include grid-column($columns:8, $last-column:true)
+    @include respond-min( $main_menu-mobile_menu_cutoff ){
+      @include grid-column($columns:8, $last-column:true);
+      @include ie8{
+        padding-right: 0.9375em;
+      }
     }
   }
 
@@ -63,16 +72,22 @@
 #request_advice {
 
   @include grid-column(12);
-  @media( min-width: $main_menu-mobile_menu_cutoff ){
+  @include respond-min( $main_menu-mobile_menu_cutoff ){
     @include grid-column($columns:4, $push: 8);
+    @include ie8{
+      padding-left: 0.9375em;
+    }
   }
 }
 
 #request_form {
 
   @include grid-column(12);
-  @media( min-width: $main_menu-mobile_menu_cutoff ){
+  @include respond-min( $main_menu-mobile_menu_cutoff ){
     @include grid-column($columns:8, $pull: 4);
+    @include ie8{
+      padding-right: 0.9375em;
+    }
   }
 
 }
@@ -93,7 +108,7 @@ div.batch_public_body_toggle {
   /* Equal columns */
   .body_list {
     @include grid-column(12);
-    @media( min-width: $main_menu-mobile_menu_cutoff ){
+    @include respond-min( $main_menu-mobile_menu_cutoff ){
        @include grid-column(5);
      }
   }
@@ -104,10 +119,16 @@ div.batch_public_body_toggle {
 
   #body_candidates {
     float: left;
+    @include ie8{
+      padding-right: 0.9375em;
+    }
   }
 
   #body_selections {
     float: right;
+    @include ie8{
+      padding-left: 0.9375em;
+    }
   }
 
   input[type='submit'] {
diff --git a/app/assets/stylesheets/responsive/_popups_layout.scss b/app/assets/stylesheets/responsive/_popups_layout.scss
index 5682f42a4..700361609 100644
--- a/app/assets/stylesheets/responsive/_popups_layout.scss
+++ b/app/assets/stylesheets/responsive/_popups_layout.scss
@@ -1,5 +1,10 @@
 /* Layout for popup messages */
 
+.popup {
+  @include ie8{
+    width: 100%;
+  }
+}
 .popup .popup-content{
   margin:0.5em;
   width: 95%;
diff --git a/app/assets/stylesheets/responsive/_request_layout.scss b/app/assets/stylesheets/responsive/_request_layout.scss
index 007cfb154..cb0a256f7 100644
--- a/app/assets/stylesheets/responsive/_request_layout.scss
+++ b/app/assets/stylesheets/responsive/_request_layout.scss
@@ -15,15 +15,18 @@
 
   .correspondence {
     @include grid-column(12);
-    @media( min-width: $main_menu-mobile_menu_cutoff ){
+    @include respond-min( $main_menu-mobile_menu_cutoff ){
       @include grid-column(9);
+      @include ie8{
+        padding-right: 0.9375em;
+      }
     }
   }
 
 
   #followup {
     @include grid-column(12, $collapse: true);
-    @media( min-width: $main_menu-mobile_menu_cutoff ){
+    @include respond-min( $main_menu-mobile_menu_cutoff ){
       @include grid-column(8, $collapse: true);
     }
   }
diff --git a/app/assets/stylesheets/responsive/_search_layout.scss b/app/assets/stylesheets/responsive/_search_layout.scss
index 84f8d0e91..5959eaecc 100644
--- a/app/assets/stylesheets/responsive/_search_layout.scss
+++ b/app/assets/stylesheets/responsive/_search_layout.scss
@@ -17,7 +17,7 @@
   }
 
   label.title {
-    @media( min-width: $main_menu-mobile_menu_cutoff ){
+    @include respond-min( $main_menu-mobile_menu_cutoff ){
       display:inline-block;
       float:none;
       width:110px;
@@ -34,13 +34,13 @@
   }
 
   #requests-subfilters #latest_status_0,#requests-subfilters #request_variety_0 {
-    @media( min-width: $main_menu-mobile_menu_cutoff ){
+    @include respond-min( $main_menu-mobile_menu_cutoff ){
       margin-left:0;
     }
   }
 
   #requests-subfilters input[type=checkbox] {
-    @media( min-width: $main_menu-mobile_menu_cutoff ){
+    @include respond-min( $main_menu-mobile_menu_cutoff ){
        margin-left:119px;
     }
   }
diff --git a/app/assets/stylesheets/responsive/_signin_layout.scss b/app/assets/stylesheets/responsive/_signin_layout.scss
index ea6ae704e..f9826d0dd 100644
--- a/app/assets/stylesheets/responsive/_signin_layout.scss
+++ b/app/assets/stylesheets/responsive/_signin_layout.scss
@@ -5,22 +5,32 @@
 }
 #left_half {
   @include grid-column(12);
-  @media( min-width: $main_menu-mobile_menu_cutoff ){
+  @include respond-min( $main_menu-mobile_menu_cutoff ){
     @include grid-column($columns:5,$float:left);
+    @include ie8{
+      padding-right: 0.9375em;
+    }
   }
 }
 
 #right_half {
   @include grid-column(12);
-  @media( min-width: $main_menu-mobile_menu_cutoff ){
+  @include respond-min( $main_menu-mobile_menu_cutoff ){
     @include grid-column($columns:5,$float:right);
+    @include ie8{
+      padding-left: 0.9375em;
+    }
   }
 }
 
 #middle_strip {
   @include grid-column(12);
-  @media( min-width: $main_menu-mobile_menu_cutoff ){
+  @include respond-min( $main_menu-mobile_menu_cutoff ){
     @include grid-column($columns:2,$float:left);
+    @include ie8{
+      padding-left: 0.9375em;
+      padding-right: 0.9375em;
+    }
   }
 }
 
@@ -34,6 +44,10 @@
     @include grid-column(12);
     @include respond-min( $main_menu-mobile_menu_cutoff ){
       @include grid-column($columns:6,$push:3);
+      @include ie8{
+        padding-left: 0.9375em;
+        padding-right: 0.9375em;
+      }
     }
   }
 
diff --git a/app/assets/stylesheets/responsive/_signin_style.scss b/app/assets/stylesheets/responsive/_signin_style.scss
index d5884a724..2bd2802b4 100644
--- a/app/assets/stylesheets/responsive/_signin_style.scss
+++ b/app/assets/stylesheets/responsive/_signin_style.scss
@@ -9,7 +9,7 @@
 #middle_strip {
   text-align:center;
   position: relative;
-  @media( min-width: $main_menu-mobile_menu_cutoff ){
+  @include respond-min( $main_menu-mobile_menu_cutoff ){
     top: 3em;
   }
   font-size:1.2em;
diff --git a/app/assets/stylesheets/responsive/_utils.css b/app/assets/stylesheets/responsive/_utils.css
new file mode 100644
index 000000000..debc19ab1
--- /dev/null
+++ b/app/assets/stylesheets/responsive/_utils.css
@@ -0,0 +1,27 @@
+$fix-mqs: false !default;
+
+@mixin respond-min($width) {
+    // If we're outputting for a fixed media query set...
+    @if $fix-mqs {
+        // ...and if we should apply these rules...
+        @if $fix-mqs >= $width {
+            // ...output the content the user gave us.
+            @content;
+        }
+    }
+    @else {
+        // Otherwise, output it using a regular media query
+        @media(min-width: $width) {
+            @content;
+        }
+    }
+}
+
+$ie8: false !default;
+
+@mixin ie8 {
+    // Only use this content if we're dealing with old IE
+    @if $ie8 {
+        @content;
+    }
+}
diff --git a/app/assets/stylesheets/responsive/all.css b/app/assets/stylesheets/responsive/all.css
new file mode 100644
index 000000000..b43dd4071
--- /dev/null
+++ b/app/assets/stylesheets/responsive/all.css
@@ -0,0 +1,66 @@
+@import "foundation/functions";
+@import "_settings";
+
+@import "foundation/components/grid";
+@import "foundation/components/block-grid";
+@import "foundation/components/forms";
+
+
+// Our own style components
+@import "_utils";
+
+// Global styles
+@import "_global_layout";
+@import "_global_style";
+
+@import "_header_layout";
+@import "_header_style";
+
+@import "_popups_layout";
+@import "_popups_style";
+
+@import "_footer_layout";
+@import "_footer_style";
+
+@import "_lists_layout";
+@import "_lists_style";
+
+// Styles that are only used on particular pages
+@import "_attachments_layout";
+@import "_attachments_style";
+
+@import "_blog_layout";
+@import "_blog_style";
+
+@import "_categorization_game_style";
+@import "_categorization_game_layout";
+
+@import "_contact_style";
+@import "_contact_layout";
+
+@import "_frontpage_layout";
+@import "_frontpage_style";
+
+@import "_help_style";
+@import "_help_layout";
+
+@import "_new_request_layout";
+@import "_new_request_style";
+
+@import "_search_layout";
+@import "_search_style";
+
+@import "_request_layout";
+@import "_request_style";
+
+@import "_signin_layout";
+@import "_signin_style";
+
+@import "_public_body_layout";
+@import "_public_body_style";
+
+@import "_public_body_stats_layout";
+@import "_public_body_stats_style";
+
+@import "_user_style";
+@import "_user_layout";
diff --git a/app/assets/stylesheets/responsive/application-ie8.css b/app/assets/stylesheets/responsive/application-ie8.css
new file mode 100644
index 000000000..6fdc504ba
--- /dev/null
+++ b/app/assets/stylesheets/responsive/application-ie8.css
@@ -0,0 +1,8 @@
+/* ...
+*= require_self
+*= require normalize
+*= require responsive/ie8
+*= require responsive/custom
+*= require jquery.ui.datepicker
+*= require jquery.ui.tabs
+*/
diff --git a/app/assets/stylesheets/responsive/application.css b/app/assets/stylesheets/responsive/application.css
new file mode 100644
index 000000000..72fb256e6
--- /dev/null
+++ b/app/assets/stylesheets/responsive/application.css
@@ -0,0 +1,8 @@
+/* ...
+*= require_self
+*= require normalize
+*= require responsive/main
+*= require responsive/custom
+*= require jquery.ui.datepicker
+*= require jquery.ui.tabs
+*/
diff --git a/app/assets/stylesheets/responsive/ie8.scss b/app/assets/stylesheets/responsive/ie8.scss
new file mode 100644
index 000000000..32d545c47
--- /dev/null
+++ b/app/assets/stylesheets/responsive/ie8.scss
@@ -0,0 +1,3 @@
+$ie8: true;
+$fix-mqs: 58em;
+@import 'all';
diff --git a/app/assets/stylesheets/responsive/main.scss b/app/assets/stylesheets/responsive/main.scss
index 159c3c29e..ff4314781 100644
--- a/app/assets/stylesheets/responsive/main.scss
+++ b/app/assets/stylesheets/responsive/main.scss
@@ -1,64 +1 @@
-@import "foundation/functions";
-@import "_settings";
-
-@import "foundation/components/grid";
-@import "foundation/components/block-grid";
-@import "foundation/components/forms";
-
-
-// Our own style components
-// Global styles
-@import "_global_layout";
-@import "_global_style";
-
-@import "_header_layout";
-@import "_header_style";
-
-@import "_popups_layout";
-@import "_popups_style";
-
-@import "_footer_layout";
-@import "_footer_style";
-
-@import "_lists_layout";
-@import "_lists_style";
-
-// Styles that are only used on particular pages
-@import "_attachments_layout";
-@import "_attachments_style";
-
-@import "_blog_layout";
-@import "_blog_style";
-
-@import "_categorization_game_style";
-@import "_categorization_game_layout";
-
-@import "_contact_style";
-@import "_contact_layout";
-
-@import "_frontpage_layout";
-@import "_frontpage_style";
-
-@import "_help_style";
-@import "_help_layout";
-
-@import "_new_request_layout";
-@import "_new_request_style";
-
-@import "_search_layout";
-@import "_search_style";
-
-@import "_request_layout";
-@import "_request_style";
-
-@import "_signin_layout";
-@import "_signin_style";
-
-@import "_public_body_layout";
-@import "_public_body_style";
-
-@import "_public_body_stats_layout";
-@import "_public_body_stats_style";
-
-@import "_user_style";
-@import "_user_layout";
+@import 'all';
diff --git a/app/views/general/_responsive_stylesheets.html.erb b/app/views/general/_responsive_stylesheets.html.erb
index e7d145438..89625ec6c 100644
--- a/app/views/general/_responsive_stylesheets.html.erb
+++ b/app/views/general/_responsive_stylesheets.html.erb
@@ -1 +1,7 @@
-<%= stylesheet_link_tag 'responsive/main', :title => "Main", :rel => "stylesheet", :media => "all" %>
+<!--[if IE 8]>
+<%= stylesheet_link_tag 'responsive/application-ie8', :title => "Main", :rel => "stylesheet", :media => "all" %>
+<![endif]-->
+
+<!--[if GT IE 8]><!-->
+<%= stylesheet_link_tag 'responsive/application', :title => "Main", :rel => "stylesheet", :media => "all" %>
+<!--<![endif]-->