From c56124fdecaefdd7dc6fc08b0fc970658ca3133b Mon Sep 17 00:00:00 2001
From: Ethan Muller <ethanbmuller@gmail.com>
Date: Tue, 31 Jul 2012 12:56:00 -0400
Subject: [PATCH 1/2] fix ie8

---
 css/base.css        |  8 +++++++-
 css/fallback.css    | 19 ++++++-------------
 sass/_700.scss      |  4 ++++
 sass/_smallest.scss |  9 ++++++++-
 sass/base.scss      |  2 +-
 sass/fallback.scss  |  1 -
 6 files changed, 26 insertions(+), 17 deletions(-)

diff --git a/css/base.css b/css/base.css
index 3481801..956fdc5 100644
--- a/css/base.css
+++ b/css/base.css
@@ -509,6 +509,8 @@ button {
     padding-bottom: 18%;
     margin: 0 2% 0 0;
     background-color: #222; }
+    .lt-ie9 .colors li {
+      width: 31%; }
     .colors li:last-child {
       margin-right: 0; }
   .colors .primary {
@@ -569,6 +571,8 @@ button {
         /* dimensions: 638 x 405 */
         max-width: 638px;
         width: 90%; }
+        .lt-ie9 .details li.c img {
+          width: auto; }
 
 @media (min-width: 400px) {
   .swatches {
@@ -589,7 +593,9 @@ button {
     max-width: 20em; }
 
   .swatches {
-    padding-left: 24em; } }
+    padding-left: 24em; }
+    .lt-ie9 .swatches {
+      padding-left: 30em; } }
 @media (min-width: 940px) {
   .colors {
     padding: 0 4% 0 2em;
diff --git a/css/fallback.css b/css/fallback.css
index 56b2d53..d24e54b 100644
--- a/css/fallback.css
+++ b/css/fallback.css
@@ -509,6 +509,8 @@ button {
     padding-bottom: 18%;
     margin: 0 2% 0 0;
     background-color: #222; }
+    .lt-ie9 .colors li {
+      width: 31%; }
     .colors li:last-child {
       margin-right: 0; }
   .colors .primary {
@@ -569,6 +571,8 @@ button {
         /* dimensions: 638 x 405 */
         max-width: 638px;
         width: 90%; }
+        .lt-ie9 .details li.c img {
+          width: auto; }
 
 .swatches {
   padding: 2em; }
@@ -589,16 +593,5 @@ button {
 
 .swatches {
   padding-left: 24em; }
-
-.colors {
-  padding: 0 4% 0 2em;
-  width: 20%; }
-  .colors ul {
-    margin: 0; }
-    .colors ul li {
-      width: 100%;
-      padding-bottom: 100%;
-      margin-bottom: 12%; }
-
-.details {
-  width: 80%; }
+  .lt-ie9 .swatches {
+    padding-left: 30em; }
diff --git a/sass/_700.scss b/sass/_700.scss
index 205dfef..f9f8983 100644
--- a/sass/_700.scss
+++ b/sass/_700.scss
@@ -17,4 +17,8 @@
 
 .swatches {
 	padding-left: 20em + $padding * 2;
+
+  .lt-ie9 & {
+    padding-left: 26em + $padding * 2;
+  }
 }
diff --git a/sass/_smallest.scss b/sass/_smallest.scss
index d85ab1b..76f8656 100644
--- a/sass/_smallest.scss
+++ b/sass/_smallest.scss
@@ -151,7 +151,6 @@ button {
 	width: 100%;
 
 	ul {
-
 		padding: 0;
 		margin: 0;
 	}
@@ -163,6 +162,11 @@ button {
 
 		float: left;
 		width: ( 100% - ( $swatch-margin * ($num-colors - 1) ) ) / $num-colors;
+
+		.lt-ie9 & {
+      width: (( 100% - ( $swatch-margin * ($num-colors - 1) ) ) / $num-colors) - 1;
+		}
+
 		padding-bottom: 18%;
 		margin: 0 $swatch-margin 0 0;
 
@@ -257,6 +261,9 @@ button {
         /* dimensions: 638 x 405 */
         max-width: 638px;
         width: 90%;
+        .lt-ie9 & {
+          width: auto;
+        }
       }
     }
 	}
diff --git a/sass/base.scss b/sass/base.scss
index 122fb23..188fc4a 100644
--- a/sass/base.scss
+++ b/sass/base.scss
@@ -17,7 +17,7 @@
 
 
 @media (min-width: 940px){
-	@import "940";
+  @import "940";
 }
 
 
diff --git a/sass/fallback.scss b/sass/fallback.scss
index 33dd73a..19a1b16 100644
--- a/sass/fallback.scss
+++ b/sass/fallback.scss
@@ -8,4 +8,3 @@
 @import "400";
 @import "450";
 @import "700";
-@import "940";

From dd35f92012833d6ad743b03bd6674269eb6bb7ef Mon Sep 17 00:00:00 2001
From: Ethan Muller <ethanbmuller@gmail.com>
Date: Tue, 31 Jul 2012 13:33:05 -0400
Subject: [PATCH 2/2] fix IEs

---
 css/base.css         | 13 ++++++++++---
 css/fallback.css     | 11 +++++++++--
 sass/_700.scss       |  3 +++
 sass/_smallest.scss  | 14 +++++++++++++-
 sass/_variables.scss |  1 +
 5 files changed, 36 insertions(+), 6 deletions(-)

diff --git a/css/base.css b/css/base.css
index 956fdc5..8b9ca22 100644
--- a/css/base.css
+++ b/css/base.css
@@ -402,11 +402,15 @@ td {
 body {
   font: 100%/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
   background: #e4e4e4; }
+  .lt-ie9 body {
+    min-width: 960px; }
 
 .wrapper {
   display: block;
   margin: 0 auto;
   max-width: 100%; }
+  .lt-ie9 .wrapper {
+    width: 960px; }
 
 /* HEADER & LOGO */
 header {
@@ -481,6 +485,9 @@ button {
     text-align: center;
     width: 80px;
     opacity: 0.5; }
+    .lt-ie8 .icons li {
+      display: block;
+      float: left; }
     .icons li:hover {
       opacity: 1; }
 
@@ -571,8 +578,6 @@ button {
         /* dimensions: 638 x 405 */
         max-width: 638px;
         width: 90%; }
-        .lt-ie9 .details li.c img {
-          width: auto; }
 
 @media (min-width: 400px) {
   .swatches {
@@ -595,7 +600,9 @@ button {
   .swatches {
     padding-left: 24em; }
     .lt-ie9 .swatches {
-      padding-left: 30em; } }
+      padding-left: 30em; }
+    .lt-ie8 .swatches {
+      width: 64%; } }
 @media (min-width: 940px) {
   .colors {
     padding: 0 4% 0 2em;
diff --git a/css/fallback.css b/css/fallback.css
index d24e54b..95d0f4b 100644
--- a/css/fallback.css
+++ b/css/fallback.css
@@ -402,11 +402,15 @@ td {
 body {
   font: 100%/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
   background: #e4e4e4; }
+  .lt-ie9 body {
+    min-width: 960px; }
 
 .wrapper {
   display: block;
   margin: 0 auto;
   max-width: 100%; }
+  .lt-ie9 .wrapper {
+    width: 960px; }
 
 /* HEADER & LOGO */
 header {
@@ -481,6 +485,9 @@ button {
     text-align: center;
     width: 80px;
     opacity: 0.5; }
+    .lt-ie8 .icons li {
+      display: block;
+      float: left; }
     .icons li:hover {
       opacity: 1; }
 
@@ -571,8 +578,6 @@ button {
         /* dimensions: 638 x 405 */
         max-width: 638px;
         width: 90%; }
-        .lt-ie9 .details li.c img {
-          width: auto; }
 
 .swatches {
   padding: 2em; }
@@ -595,3 +600,5 @@ button {
   padding-left: 24em; }
   .lt-ie9 .swatches {
     padding-left: 30em; }
+  .lt-ie8 .swatches {
+    width: 64%; }
diff --git a/sass/_700.scss b/sass/_700.scss
index f9f8983..046d289 100644
--- a/sass/_700.scss
+++ b/sass/_700.scss
@@ -21,4 +21,7 @@
   .lt-ie9 & {
     padding-left: 26em + $padding * 2;
   }
+  .lt-ie8 & {
+    width: 64%;
+  }
 }
diff --git a/sass/_smallest.scss b/sass/_smallest.scss
index 76f8656..97cddda 100644
--- a/sass/_smallest.scss
+++ b/sass/_smallest.scss
@@ -8,6 +8,10 @@ body {
 	font: 100%/1.5 $helvetica;
 
 	background: #e4e4e4;
+
+  .lt-ie9 & {
+    min-width: $page-width-fallback;
+  }
 }
 
 .wrapper {
@@ -15,6 +19,10 @@ body {
 	margin: 0 auto;
 	max-width: $page-width;
 
+	.lt-ie9 & {
+    width: $page-width-fallback;
+   }
+
 	.main & {
 	}
 }
@@ -126,6 +134,11 @@ button {
 		text-align: center;
 		width: 80px;
 
+    .lt-ie8 & {
+      display: block;
+      float: left;
+    }
+
     opacity: 0.5;
 
     &:hover {
@@ -262,7 +275,6 @@ button {
         max-width: 638px;
         width: 90%;
         .lt-ie9 & {
-          width: auto;
         }
       }
     }
diff --git a/sass/_variables.scss b/sass/_variables.scss
index 6ed701d..47cbdb1 100644
--- a/sass/_variables.scss
+++ b/sass/_variables.scss
@@ -10,6 +10,7 @@ $georgia: Georgia, Times, serif;
 
 // LENGTHS
 $page-width: 100%;
+$page-width-fallback: 960px;
 $padding: 2em;
 $swatch-margin: 2%;