merge gh-pages

sass/_700.scss

@@ -17,4 +17,11 @@
 
 .swatches {
 	padding-left: 20em + $padding * 2;
+
+  .lt-ie9 & {
+    padding-left: 26em + $padding * 2;
+  }
+  .lt-ie8 & {
+    width: 64%;
+  }
 }

sass/_smallest.scss

@@ -8,13 +8,21 @@ body {
 	font: 100%/1.5 $helvetica;
 
 	background: #e4e4e4;
+
+  .lt-ie9 & {
+    min-width: $page-width-fallback;
+  }
 }
 
 .wrapper {
   display: block;
 	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 {
@@ -151,7 +164,6 @@ button {
 	width: 100%;
 
 	ul {
-
 		padding: 0;
 		margin: 0;
 	}
@@ -163,6 +175,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 +274,8 @@ button {
         /* dimensions: 638 x 405 */
         max-width: 638px;
         width: 90%;
+        .lt-ie9 & {
+        }
       }
     }
 	}

sass/_variables.scss

@@ -10,6 +10,7 @@ $georgia: Georgia, Times, serif;
 
 // LENGTHS
 $page-width: 100%;
+$page-width-fallback: 960px;
 $padding: 2em;
 $swatch-margin: 2%;
 

sass/base.scss

@@ -17,7 +17,7 @@
 
 
 @media (min-width: 940px){
-	@import "940";
+  @import "940";
 }
 
 

sass/fallback.scss

@@ -8,4 +8,3 @@
 @import "400";
 @import "450";
 @import "700";
-@import "940";