diff --git a/css/app.css b/css/app.css
index f552b3c..dff483a 100644
--- a/css/app.css
+++ b/css/app.css
@@ -1,4 +1,4 @@
-/* line 17, ../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
+/* line 17, ../../../../.rvm/gems/ruby-1.9.2-p320/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
@@ -20,412 +20,220 @@ time, mark, audio, video {
   vertical-align: baseline;
 }
 
-/* line 22, ../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
+/* line 22, ../../../../.rvm/gems/ruby-1.9.2-p320/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
 html {
   line-height: 1;
 }
 
-/* line 24, ../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
+/* line 24, ../../../../.rvm/gems/ruby-1.9.2-p320/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
 ol, ul {
   list-style: none;
 }
 
-/* line 26, ../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
+/* line 26, ../../../../.rvm/gems/ruby-1.9.2-p320/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
 table {
   border-collapse: collapse;
   border-spacing: 0;
 }
 
-/* line 28, ../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
+/* line 28, ../../../../.rvm/gems/ruby-1.9.2-p320/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
 caption, th, td {
   text-align: left;
   font-weight: normal;
   vertical-align: middle;
 }
 
-/* line 30, ../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
+/* line 30, ../../../../.rvm/gems/ruby-1.9.2-p320/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
 q, blockquote {
   quotes: none;
 }
-/* line 103, ../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
+/* line 103, ../../../../.rvm/gems/ruby-1.9.2-p320/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
 q:before, q:after, blockquote:before, blockquote:after {
   content: "";
   content: none;
 }
 
-/* line 32, ../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
+/* line 32, ../../../../.rvm/gems/ruby-1.9.2-p320/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
 a img {
   border: none;
 }
 
-/* line 116, ../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
+/* line 116, ../../../../.rvm/gems/ruby-1.9.2-p320/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
 article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
   display: block;
 }
 
-/* line 5, ../sass/app.sass */
+/* line 29, ../sass/app.sass */
 body, input, textarea {
   margin: 40px;
-  color: #888888;
-  background: #222222;
-  font: 16px/1.625em "Varela Round", "lucida grande", tahoma, sans-serif;
-  -wbkite-font-smoothing: antialiased;
+  color: #aaaaaa;
+  background: #444444;
+  font-size: 18px;
+  font-family: "Karla", "lucida grande", sans-serif;
 }
 
-/* line 12, ../sass/app.sass */
+/* line 36, ../sass/app.sass */
 h1, h2, h3, h4, h5, h6 {
   color: white;
-  font-family: "Terminal Dosis", "lucida grande", tahoma, sans-serif;
-  line-height: 1em;
-  font-weight: 600;
+  line-height: 1.2em;
+  font-weight: 500;
   margin-bottom: 0.5em;
 }
 
-/* line 19, ../sass/app.sass */
-h1 {
-  font-size: 72px;
-  line-height: 0.5em;
-  margin-bottom: 0.3em;
-}
-/* line 23, ../sass/app.sass */
-h1 small {
-  font-size: 20px;
-}
-/* line 25, ../sass/app.sass */
-h1 span {
-  -webkit-transition: color 1s;
-  -moz-transition: color 1s;
-  -o-transition: color 1s;
-  transition: color 1s;
-}
-/* line 28, ../sass/app.sass */
-h1:hover .char1 {
-  -webkit-transition: color 0.2s;
-  -moz-transition: color 0.2s;
-  -o-transition: color 0.2s;
-  transition: color 0.2s;
-  color: red;
-}
-/* line 31, ../sass/app.sass */
-h1:hover .char2 {
-  -webkit-transition: color 0.2s;
-  -webkit-transition-delay: 0.1s;
-  -moz-transition: color 0.2s 0.1s;
-  -o-transition: color 0.2s 0.1s;
-  transition: color 0.2s 0.1s;
-  color: orange;
-}
-/* line 34, ../sass/app.sass */
-h1:hover .char3 {
-  -webkit-transition: color 0.2s;
-  -webkit-transition-delay: 0.2s;
-  -moz-transition: color 0.2s 0.2s;
-  -o-transition: color 0.2s 0.2s;
-  transition: color 0.2s 0.2s;
-  color: yellow;
-}
-/* line 37, ../sass/app.sass */
-h1:hover .char4 {
-  -webkit-transition: color 0.2s;
-  -webkit-transition-delay: 0.3s;
-  -moz-transition: color 0.2s 0.3s;
-  -o-transition: color 0.2s 0.3s;
-  transition: color 0.2s 0.3s;
-  color: green;
-}
-/* line 40, ../sass/app.sass */
-h1:hover .char5 {
-  -webkit-transition: color 0.2s;
-  -webkit-transition-delay: 0.4s;
-  -moz-transition: color 0.2s 0.4s;
-  -o-transition: color 0.2s 0.4s;
-  transition: color 0.2s 0.4s;
-  color: blue;
-}
-/* line 43, ../sass/app.sass */
-h1:hover .char6 {
-  -webkit-transition: color 0.2s;
-  -webkit-transition-delay: 0.5s;
-  -moz-transition: color 0.2s 0.5s;
-  -o-transition: color 0.2s 0.5s;
-  transition: color 0.2s 0.5s;
-  color: indigo;
-}
-/* line 46, ../sass/app.sass */
-h1:hover .char7 {
-  -webkit-transition: color 0.2s;
-  -webkit-transition-delay: 0.6s;
-  -moz-transition: color 0.2s 0.6s;
-  -o-transition: color 0.2s 0.6s;
-  transition: color 0.2s 0.6s;
-  color: violet;
-}
-/* line 49, ../sass/app.sass */
-h1:hover .char8 {
-  -webkit-transition: color 0.2s;
-  -webkit-transition-delay: 0.7s;
-  -moz-transition: color 0.2s 0.7s;
-  -o-transition: color 0.2s 0.7s;
-  transition: color 0.2s 0.7s;
-  color: red;
-}
-/* line 52, ../sass/app.sass */
-h1:hover .char9 {
-  -webkit-transition: color 0.2s;
-  -webkit-transition-delay: 0.8s;
-  -moz-transition: color 0.2s 0.8s;
-  -o-transition: color 0.2s 0.8s;
-  transition: color 0.2s 0.8s;
-  color: orange;
-}
-/* line 55, ../sass/app.sass */
-h1:hover .char10 {
-  -webkit-transition: color 0.2s;
-  -webkit-transition-delay: 0.9s;
-  -moz-transition: color 0.2s 0.9s;
-  -o-transition: color 0.2s 0.9s;
-  transition: color 0.2s 0.9s;
-  color: yellow;
-}
-/* line 58, ../sass/app.sass */
-h1:hover .char11 {
-  -webkit-transition: color 0.2s;
-  -webkit-transition-delay: 1s;
-  -moz-transition: color 0.2s 1s;
-  -o-transition: color 0.2s 1s;
-  transition: color 0.2s 1s;
-  color: green;
-}
-
-/* line 62, ../sass/app.sass */
+/* line 42, ../sass/app.sass */
 h2 {
-  font-size: 40px;
+  font-size: 36px;
   line-height: 1.2em;
-  text-align: center;
 }
 
-/* line 67, ../sass/app.sass */
+/* line 46, ../sass/app.sass */
 h3 {
   font-size: 16px;
   letter-spacing: 0.1em;
   text-transform: uppercase;
 }
 
-/* line 72, ../sass/app.sass */
+/* line 51, ../sass/app.sass */
 h4 {
   font-size: 20px;
   margin-bottom: 1.25em;
 }
 
-/* line 76, ../sass/app.sass */
+/* line 55, ../sass/app.sass */
 p {
+  line-height: 1.5em;
   margin-bottom: 1.25em;
 }
 
-/* line 80, ../sass/app.sass */
+/* line 59, ../sass/app.sass */
 strong {
   font-weight: bold;
 }
 
-/* Drag and Drop area */
-/* line 84, ../sass/app.sass */
-.dropZone {
-  width: 900px;
-  height: 200px;
-  margin-bottom: 60px;
-  background: url("../img/drag_placeholder.png");
-}
-/* line 89, ../sass/app.sass */
-.dropZone.dragging {
-  -webkit-box-shadow: inset 0 1px 10px #09a1ec;
-  -moz-box-shadow: inset 0 1px 10px #09a1ec;
-  box-shadow: inset 0 1px 10px #09a1ec;
-}
-
-/* line 91, ../sass/app.sass */
-.droppedImage {
-  display: none;
-}
-
-/* Forms */
-/* line 99, ../sass/app.sass */
-input[type=text], input[type=password] {
-  background: #fafafa;
-  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
-  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
-  border: 1px solid #dddddd;
-  color: #888888;
-  -webkit-border-radius: 4px;
-  -moz-border-radius: 4px;
-  -ms-border-radius: 4px;
-  -o-border-radius: 4px;
-  border-radius: 4px;
-}
-
-/* line 106, ../sass/app.sass */
-textarea {
-  background: #fafafa;
-  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
-  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
-  border: 1px solid #dddddd;
-  color: #888888;
-  -webkit-border-radius: 4px;
-  -moz-border-radius: 4px;
-  -ms-border-radius: 4px;
-  -o-border-radius: 4px;
-  border-radius: 4px;
-}
-
-/* line 113, ../sass/app.sass */
-input[type=text]:focus {
-  color: #373737;
-}
-
-/* line 116, ../sass/app.sass */
-textarea {
-  padding-left: 3px;
-  width: 98%;
-}
-/* line 117, ../sass/app.sass */
-textarea:focus {
-  color: #373737;
-}
-
-/* line 122, ../sass/app.sass */
-input[type=text] {
-  padding: 3px;
-}
-
 /* Links */
-/* line 127, ../sass/app.sass */
+/* line 63, ../sass/app.sass */
 a {
-  color: #09a1ec;
+  color: #00bfa8;
   text-decoration: none;
 }
-/* line 130, ../sass/app.sass */
+/* line 66, ../sass/app.sass */
 a:hover {
-  color: #7fd2fa;
+  color: #59ffeb;
 }
 
-/* line 133, ../sass/app.sass */
-#container {
-  width: 900px;
-  margin: 0 auto;
-}
-
-/* line 137, ../sass/app.sass */
-header {
-  padding-bottom: 40px;
+/* -- Layout ------------------------------------------------------------------ */
+/* line 71, ../sass/app.sass */
+.wrapper {
   text-align: center;
-  width: 600px;
+  max-width: 600px;
   margin: 0 auto;
 }
 
-/* line 143, ../sass/app.sass */
-.medianCutPalette h3 {
+/* line 76, ../sass/app.sass */
+.description {
+  max-width: 450px;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+/* line 81, ../sass/app.sass */
+.image-section {
+  margin-bottom: 80px;
+  background: #2b2b2b;
+}
+/* line 84, ../sass/app.sass */
+.image-section .image-wrap {
+  position: relative;
+  background: #444444;
+}
+
+/* line 89, ../sass/app.sass */
+.target-image {
+  width: 100%;
+}
+
+/* line 92, ../sass/app.sass */
+.run-functions-button {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 100px;
+  height: 100px;
+  margin-top: -50px;
+  margin-left: -50px;
+  border: none;
+  -webkit-border-radius: 50%;
+  -moz-border-radius: 50%;
+  -ms-border-radius: 50%;
+  -o-border-radius: 50%;
+  border-radius: 50%;
+  color: #817702;
+  background-color: #fdf485;
+  font-size: 24px;
+  cursor: pointer;
+}
+/* line 106, ../sass/app.sass */
+.run-functions-button:hover {
+  background-color: #fef9b7;
+  color: #9a8f03;
+}
+/* line 109, ../sass/app.sass */
+.run-functions-button:active {
+  -webkit-transform: scale(0.9, 0.9);
+  -moz-transform: scale(0.9, 0.9);
+  -ms-transform: scale(0.9, 0.9);
+  -o-transform: scale(0.9, 0.9);
+  transform: scale(0.9, 0.9);
+}
+
+/* line 112, ../sass/app.sass */
+.color-thief-output {
   margin-top: 20px;
 }
 
-/* line 146, ../sass/app.sass */
-.imageSection {
-  margin-bottom: 80px;
-  background: #111111;
-  -webkit-border-radius: 10px;
-  -moz-border-radius: 10px;
-  -ms-border-radius: 10px;
-  -o-border-radius: 10px;
-  border-radius: 10px;
-  *zoom: 1;
-}
-/* line 38, ../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */
-.imageSection:after {
-  content: "";
-  display: table;
-  clear: both;
-}
-/* line 151, ../sass/app.sass */
-.imageSection .imageWrap {
-  -moz-border-radius-topleft: 10px;
-  -webkit-border-top-left-radius: 10px;
-  border-top-left-radius: 10px;
-  -moz-border-radius-bottomleft: 10px;
-  -webkit-border-bottom-left-radius: 10px;
-  border-bottom-left-radius: 10px;
-  width: 400px;
-  height: 300px;
-  float: left;
-  margin-right: 20px;
-  background: url(../img/dark_checkered_bg.png);
-  overflow: hidden;
-}
-/* line 160, ../sass/app.sass */
-.imageSection .colors {
-  margin-top: 20px;
-  width: 400px;
-  float: left;
-}
-/* line 164, ../sass/app.sass */
-.imageSection .colors .function {
+/* line 115, ../sass/app.sass */
+.function {
   clear: left;
   margin-bottom: 10px;
   *zoom: 1;
 }
-/* line 38, ../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */
-.imageSection .colors .function:after {
+/* line 38, ../../../../.rvm/gems/ruby-1.9.2-p320/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */
+.function:after {
   content: "";
   display: table;
   clear: both;
 }
-/* line 168, ../sass/app.sass */
-.imageSection .colors .function .swatches .swatch {
-  width: 40px;
-  height: 20px;
+
+/* line 120, ../sass/app.sass */
+.swatch {
+  width: 60px;
+  height: 30px;
   margin-right: 2px;
   background: #dddddd;
   float: left;
-  -webkit-transition: all 0.5s;
-  -moz-transition: all 0.5s;
-  -o-transition: all 0.5s;
-  transition: all 0.5s;
+  -webkit-transition: scale 0.5s;
+  -moz-transition: scale 0.5s;
+  -o-transition: scale 0.5s;
+  transition: scale 0.5s;
 }
-/* line 175, ../sass/app.sass */
-.imageSection .colors .function .swatches .swatch:hover {
+/* line 127, ../sass/app.sass */
+.swatch:hover {
   -webkit-transition: none;
   -moz-transition: none;
   -o-transition: none;
   transition: none;
-  -webkit-transform: scale(1.2, 1.2);
-  -moz-transform: scale(1.2, 1.2);
-  -ms-transform: scale(1.2, 1.2);
-  -o-transform: scale(1.2, 1.2);
-  transform: scale(1.2, 1.2);
+  -webkit-transform: scale(1.1, 1.1);
+  -moz-transform: scale(1.1, 1.1);
+  -ms-transform: scale(1.1, 1.1);
+  -o-transform: scale(1.1, 1.1);
+  transform: scale(1.1, 1.1);
   -webkit-box-shadow: 0 1px 10px black;
   -moz-box-shadow: 0 1px 10px black;
   box-shadow: 0 1px 10px black;
 }
-/* line 179, ../sass/app.sass */
-.imageSection .colors .function .swatches .swatch:first-child {
-  -moz-border-radius-topleft: 4px;
-  -webkit-border-top-left-radius: 4px;
-  border-top-left-radius: 4px;
-  -moz-border-radius-bottomleft: 4px;
-  -webkit-border-bottom-left-radius: 4px;
-  border-bottom-left-radius: 4px;
-}
-/* line 181, ../sass/app.sass */
-.imageSection .colors .function .swatches .swatch:last-child {
-  -moz-border-radius-topright: 4px;
-  -webkit-border-top-right-radius: 4px;
-  border-top-right-radius: 4px;
-  -moz-border-radius-bottomright: 4px;
-  -webkit-border-bottom-right-radius: 4px;
-  border-bottom-right-radius: 4px;
-}
 
 /* Hardcoding the offset for the FB icon example */
-/* line 185, ../sass/app.sass */
+/* line 133, ../sass/app.sass */
 .fbIcon .imageWrap .targetImage {
   -webkit-border-radius: 0;
   -moz-border-radius: 0;
@@ -437,7 +245,240 @@ header {
   left: 192px;
 }
 
-/* line 191, ../sass/app.sass */
+/* line 139, ../sass/app.sass */
 canvas {
   display: none;
 }
+
+/* -- Animated logo ------------------------------------------------------------------ */
+/* line 143, ../sass/app.sass */
+h1 {
+  font-size: 72px;
+  line-height: 0.5em;
+  margin-bottom: 0.3em;
+}
+/* line 147, ../sass/app.sass */
+h1 small {
+  font-size: 20px;
+}
+/* line 150, ../sass/app.sass */
+h1 .char1 {
+  -webkit-transition: color 0.1s;
+  -moz-transition: color 0.1s;
+  -o-transition: color 0.1s;
+  transition: color 0.1s;
+}
+/* line 152, ../sass/app.sass */
+h1 .char2 {
+  -webkit-transition: color 0.1s;
+  -webkit-transition-delay: 0.05s;
+  -moz-transition: color 0.1s 0.05s;
+  -o-transition: color 0.1s 0.05s;
+  transition: color 0.1s 0.05s;
+}
+/* line 154, ../sass/app.sass */
+h1 .char3 {
+  -webkit-transition: color 0.1s;
+  -webkit-transition-delay: 0.1s;
+  -moz-transition: color 0.1s 0.1s;
+  -o-transition: color 0.1s 0.1s;
+  transition: color 0.1s 0.1s;
+}
+/* line 156, ../sass/app.sass */
+h1 .char4 {
+  -webkit-transition: color 0.1s;
+  -webkit-transition-delay: 0.15s;
+  -moz-transition: color 0.1s 0.15s;
+  -o-transition: color 0.1s 0.15s;
+  transition: color 0.1s 0.15s;
+}
+/* line 158, ../sass/app.sass */
+h1 .char5 {
+  -webkit-transition: color 0.1s;
+  -webkit-transition-delay: 0.2s;
+  -moz-transition: color 0.1s 0.2s;
+  -o-transition: color 0.1s 0.2s;
+  transition: color 0.1s 0.2s;
+}
+/* line 161, ../sass/app.sass */
+h1 .char7 {
+  -webkit-transition: color 0.1s;
+  -webkit-transition-delay: 0.3s;
+  -moz-transition: color 0.1s 0.3s;
+  -o-transition: color 0.1s 0.3s;
+  transition: color 0.1s 0.3s;
+}
+/* line 163, ../sass/app.sass */
+h1 .char8 {
+  -webkit-transition: color 0.1s;
+  -webkit-transition-delay: 0.35s;
+  -moz-transition: color 0.1s 0.35s;
+  -o-transition: color 0.1s 0.35s;
+  transition: color 0.1s 0.35s;
+}
+/* line 165, ../sass/app.sass */
+h1 .char9 {
+  -webkit-transition: color 0.1s;
+  -webkit-transition-delay: 0.4s;
+  -moz-transition: color 0.1s 0.4s;
+  -o-transition: color 0.1s 0.4s;
+  transition: color 0.1s 0.4s;
+}
+/* line 167, ../sass/app.sass */
+h1 .char10 {
+  -webkit-transition: color 0.1s;
+  -webkit-transition-delay: 0.45s;
+  -moz-transition: color 0.1s 0.45s;
+  -o-transition: color 0.1s 0.45s;
+  transition: color 0.1s 0.45s;
+}
+/* line 169, ../sass/app.sass */
+h1 .char11 {
+  -webkit-transition: color 0.1s;
+  -webkit-transition-delay: 0.5s;
+  -moz-transition: color 0.1s 0.5s;
+  -o-transition: color 0.1s 0.5s;
+  transition: color 0.1s 0.5s;
+}
+/* line 172, ../sass/app.sass */
+h1:hover .char1 {
+  -webkit-transition: color 0.1s;
+  -moz-transition: color 0.1s;
+  -o-transition: color 0.1s;
+  transition: color 0.1s;
+  color: #ff4040;
+}
+/* line 175, ../sass/app.sass */
+h1:hover .char2 {
+  -webkit-transition: color 0.1s;
+  -webkit-transition-delay: 0.05s;
+  -moz-transition: color 0.1s 0.05s;
+  -o-transition: color 0.1s 0.05s;
+  transition: color 0.1s 0.05s;
+  color: #ff8000;
+}
+/* line 178, ../sass/app.sass */
+h1:hover .char3 {
+  -webkit-transition: color 0.1s;
+  -webkit-transition-delay: 0.1s;
+  -moz-transition: color 0.1s 0.1s;
+  -o-transition: color 0.1s 0.1s;
+  transition: color 0.1s 0.1s;
+  color: #fdf485;
+}
+/* line 181, ../sass/app.sass */
+h1:hover .char4 {
+  -webkit-transition: color 0.1s;
+  -webkit-transition-delay: 0.15s;
+  -moz-transition: color 0.1s 0.15s;
+  -o-transition: color 0.1s 0.15s;
+  transition: color 0.1s 0.15s;
+  color: #00bfa8;
+}
+/* line 184, ../sass/app.sass */
+h1:hover .char5 {
+  -webkit-transition: color 0.1s;
+  -webkit-transition-delay: 0.2s;
+  -moz-transition: color 0.1s 0.2s;
+  -o-transition: color 0.1s 0.2s;
+  transition: color 0.1s 0.2s;
+  color: #0096df;
+}
+/* line 188, ../sass/app.sass */
+h1:hover .char7 {
+  -webkit-transition: color 0.1s;
+  -webkit-transition-delay: 0.3s;
+  -moz-transition: color 0.1s 0.3s;
+  -o-transition: color 0.1s 0.3s;
+  transition: color 0.1s 0.3s;
+  color: #ff4040;
+}
+/* line 191, ../sass/app.sass */
+h1:hover .char8 {
+  -webkit-transition: color 0.1s;
+  -webkit-transition-delay: 0.35s;
+  -moz-transition: color 0.1s 0.35s;
+  -o-transition: color 0.1s 0.35s;
+  transition: color 0.1s 0.35s;
+  color: #ff8000;
+}
+/* line 194, ../sass/app.sass */
+h1:hover .char9 {
+  -webkit-transition: color 0.1s;
+  -webkit-transition-delay: 0.4s;
+  -moz-transition: color 0.1s 0.4s;
+  -o-transition: color 0.1s 0.4s;
+  transition: color 0.1s 0.4s;
+  color: #fdf485;
+}
+/* line 197, ../sass/app.sass */
+h1:hover .char10 {
+  -webkit-transition: color 0.1s;
+  -webkit-transition-delay: 0.45s;
+  -moz-transition: color 0.1s 0.45s;
+  -o-transition: color 0.1s 0.45s;
+  transition: color 0.1s 0.45s;
+  color: #00bfa8;
+}
+/* line 200, ../sass/app.sass */
+h1:hover .char11 {
+  -webkit-transition: color 0.1s;
+  -webkit-transition-delay: 0.5s;
+  -moz-transition: color 0.1s 0.5s;
+  -o-transition: color 0.1s 0.5s;
+  transition: color 0.1s 0.5s;
+  color: #0096df;
+}
+
+/* -- Drag and drop ------------------------------------------------------------------ */
+/* line 207, ../sass/app.sass */
+.drag-and-drop {
+  display: none;
+}
+
+/* line 210, ../sass/app.sass */
+.dropZone {
+  height: 200px;
+  margin-bottom: 60px;
+  background: url("../img/drag_placeholder.png");
+}
+/* line 214, ../sass/app.sass */
+.dropZone.dragging {
+  -webkit-box-shadow: inset 0 1px 10px #09a1ec;
+  -moz-box-shadow: inset 0 1px 10px #09a1ec;
+  box-shadow: inset 0 1px 10px #09a1ec;
+}
+
+/* line 216, ../sass/app.sass */
+.droppedImage {
+  display: none;
+}
+
+@media only screen and (max-width: 480px) {
+  /* line 223, ../sass/app.sass */
+  body {
+    margin: 40px 0;
+    font-size: 14px;
+  }
+
+  /* line 226, ../sass/app.sass */
+  .intro {
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+
+  /* line 229, ../sass/app.sass */
+  h1 {
+    font-size: 48px;
+  }
+
+  /* line 231, ../sass/app.sass */
+  h2 {
+    font-size: 24px;
+  }
+
+  /* line 233, ../sass/app.sass */
+  h3 {
+    font-size: 14px;
+  }
+}
diff --git a/index.js b/demo.js
similarity index 65%
rename from index.js
rename to demo.js
index bf6da3f..feea73f 100644
--- a/index.js
+++ b/demo.js
@@ -1,79 +1,76 @@
 $(document).ready(function () {
 
-    // Use mustache.js templating to create layout
-
-    var imageArray = { images: [
-        {"file": "img/3.jpg"},
-        {"file": "img/4.jpg"},
-        {"file": "img/5.jpg"},
-        {"file": "img/logo1.png"},
-        {"file": "img/icon1.png", "colorCount": "4", "class": "fbIcon"}
+    // Uses mustache.js templating to create layout
+    var imageArray = {images: [
+        {"file": "img/photo1.jpg"},
+        {"file": "img/photo2.jpg"},
+        {"file": "img/photo3.jpg"}
     ]};
 
+    var displayColors = function(image) {
+      var $image = $(image);
+      var imageSection = $image.closest('.image-section');
+      var appendColors = function(colors, root) {
+          $.each(colors, function(index, value) {
+              var swatchEl = $('<div>', {'class': 'swatch'})
+                  .css('background-color', 'rgba('+ value +', 1)');
+              root.append(swatchEl);
+          });
+      };
+
+      var colorThief = new ColorThief();
+
+      // Dominant Color
+      var dominantColor = colorThief.getColor(image);
+      var dominantSwatch = imageSection.find('.get-color .swatches');
+      appendColors([dominantColor], dominantSwatch);
+
+      // Palette
+      var colorCount = $image.attr('data-colorcount') ? $image.data('colorcount') : 10;
+      var medianPalette = colorThief.getPalette(image, colorCount);
+      var medianCutPalette = imageSection.find('.get-palette .swatches');
+      appendColors(medianPalette, medianCutPalette);
+    };
+
+
     // Setup the drag and drop behavior if supported
     if (typeof window.FileReader === 'function') {
       $('#dragDrop').show();
 
       var $dropZone = $('#dropZone');
 
-      var dragEnter = function( evt ){
-        evt.stopPropagation();
-        evt.preventDefault();
+      var handleDragEnter = function(event){
         $dropZone.addClass('dragging');
+        return false;
       };
 
-      var dragLeave = function( evt ){
-        evt.stopPropagation();
-        evt.preventDefault();
+      var handleDragLeave = function(event){
         $dropZone.removeClass('dragging');
+        return false;
       };
 
-      var dragOver = function( evt ){
-        evt.stopPropagation();
-        evt.preventDefault();
+      var handleDragOver = function(event){
+        return false;
       };
 
-      var drop = function( evt ){
-        evt.stopPropagation();
-        evt.preventDefault();
+      var handleDrop = function(event){
         $dropZone.removeClass('dragging');
-        
-        var dt = evt.originalEvent.dataTransfer;
+
+        var dt    = event.originalEvent.dataTransfer;
         var files = dt.files;
 
-        handleFiles( files );
+        handleFiles(files);
+
+        return false;
       };
 
       $dropZone
-        .on('dragenter', dragEnter)
-        .on('dragleave', dragLeave)
-        .on('dragover', dragOver)
-        .on('drop', drop);
+        .on('dragenter', handleDragEnter)
+        .on('dragleave', handleDragLeave)
+        .on('dragover', handleDragOver)
+        .on('drop', handleDrop);
     }
 
-    var displayColors = function( image ) {
-      var $image = $(image);
-      var imageSection = $image.closest('.imageSection');
-      var appendColors = function (colors, root) {
-          $.each(colors, function (index, value) {
-              var swatchEl = $('<div>', {'class': 'swatch'})
-                  .css('background-color', 'rgba('+ value +', 1)');
-              root.append(swatchEl);
-          });
-      };
-
-      // Dominant Color
-      var dominantColor = getDominantColor(image);
-      var dominantSwatch = imageSection.find('.dominantColor .swatches');
-      appendColors([dominantColor], dominantSwatch);
-
-      // Palette
-      var colorCount = $image.attr('data-colorcount') ? $image.data('colorcount') : 10;
-      var medianPalette = createPalette(image, colorCount);
-      var medianCutPalette = imageSection.find('.medianCutPalette .swatches');
-      appendColors(medianPalette, medianCutPalette);
-    };
-
     function handleFiles( files ) {
       var imageType = /image.*/;
       var fileCount = files.length;
@@ -108,18 +105,20 @@ $(document).ready(function () {
       }
     }
 
-    var html = Mustache.to_html($('#template').html(), imageArray);
-    $('#main').append(html);
-
     // Use lettering.js to give letter by letter styling control for the h1 title
     $("h1").lettering();
 
+
+    var html = Mustache.to_html($('#image-section-template').html(), imageArray);
+    $('#examples').append(html);
+
+
     // For each image:
     // Once image is loaded, get dominant color and palette and display them.
-    $('img').bind('load', function (event) {
-      var image = event.target;
-      displayColors( image );
-    });
+    // $('img').bind('load', function (event) {
+    //   var image = event.target;
+    //   displayColors(image);
+    // });
 });
 
 var util = {
@@ -136,7 +135,7 @@ var util = {
       if ( imgWidth > containerWidth ) {
         $img.css('width', ( containerWidth + "px" ));
         imgHeight =  imgAspectRatio * containerWidth;
-      }      
+      }
       if ( imgWidth < containerWidth ) {
         var hOffset = ( containerWidth - imgWidth )/2;
         $img.css('margin-left', ( hOffset + "px" ));
diff --git a/img/3.jpg b/img/3.jpg
deleted file mode 100644
index a7b2763..0000000
Binary files a/img/3.jpg and /dev/null differ
diff --git a/img/4.jpg b/img/4.jpg
deleted file mode 100644
index aacb760..0000000
Binary files a/img/4.jpg and /dev/null differ
diff --git a/img/5.jpg b/img/5.jpg
deleted file mode 100644
index a9e0bc3..0000000
Binary files a/img/5.jpg and /dev/null differ
diff --git a/img/icon1.png b/img/icon1.png
deleted file mode 100644
index 3ef7927..0000000
Binary files a/img/icon1.png and /dev/null differ
diff --git a/img/logo1.png b/img/logo1.png
deleted file mode 100644
index 11daa76..0000000
Binary files a/img/logo1.png and /dev/null differ
diff --git a/img/photo1.jpg b/img/photo1.jpg
new file mode 100644
index 0000000..ee92327
Binary files /dev/null and b/img/photo1.jpg differ
diff --git a/img/photo2.jpg b/img/photo2.jpg
new file mode 100644
index 0000000..350e738
Binary files /dev/null and b/img/photo2.jpg differ
diff --git a/img/photo3.jpg b/img/photo3.jpg
new file mode 100644
index 0000000..792469b
Binary files /dev/null and b/img/photo3.jpg differ
diff --git a/index.html b/index.html
index 7fba344..cd46e0f 100755
--- a/index.html
+++ b/index.html
@@ -4,74 +4,87 @@
 	<meta charset="utf-8">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 
-  <link href='http://fonts.googleapis.com/css?family=Varela+Round|Terminal+Dosis:400,700,600' rel='stylesheet' type='text/css'>
- 
 	<title>Color Thief</title>
-	<meta name="description" content="">
-	<meta name="author" content="">
 
-	<meta name="viewport" content="width=device-width,initial-scale=1">
+  <meta name="description" content="">
+  <meta name="author" content="">
+  <meta name="viewport" content="width=device-width,initial-scale=1">
 
-	<link rel="stylesheet" href="css/app.css">
+  <script src="js/libs/modernizr-2.0.6.min.js"></script>
+  <link href='http://fonts.googleapis.com/css?family=Karla:400,700|Cousine' rel='stylesheet' type='text/css'>
+  <link rel="stylesheet" href="css/app.css">
 
-	<script src="js/libs/modernizr-2.0.6.min.js"></script>
 </head>
 <body>
 
-<div id="container">
-	<header>
+<div class="wrapper">
+
+  <section class="intro">
       <h1>Color Thief</h1>
       <h4><a href="http://lokeshdhakar.com">by Lokesh Dhakar</a></small></h4>
-      
-      <p>A script for grabbing the dominant color or color palette from an image. Uses Javascript and the canvas tag to make it happen.</p>
-      <p><a href="http://www.lokeshdhakar.com/color-thief/">Read more on my blog</a> | <a href="https://github.com/lokesh/color-thief">Get the code on Github</a>
+
+      <p class="description">A script for grabbing the color palette from an image. Uses Javascript and the canvas tag to make it happen.</p>
+      <p><a href="http://www.lokeshdhakar.com/color-thief/">Read more about it on my blog</a> or <a href="https://github.com/lokesh/color-thief">get the code on Github</a>
       </p>
-	</header>
-
-	<div id="main" role="main">
-    <div id='dragDrop' style='display: none'>
-      <h2>Test it out</h2>
-      <div id="dropZone" class="dropZone">
-      </div>
-
-      <div id="draggedImages"></div>
-    </div>
+	</section>
 
+	<section class="examples" id="examples">
     <h2>Examples</h2>
+	</section>
+
+  <sectcion class="drag-and-drop" id="dragDrop">
+    <h2>Try it yourself</h2>
+    <div id="dropZone" class="dropZone">
+    </div>
+    <div id="draggedImages"></div>
+  </div>
 
-	</div>
 </div> <!--! end of #container -->
 
 <script>window.jQuery || document.write('<script src="js/libs/jquery-1.8.3.min.js"><\/script>')</script>
 <script src="js/libs/jquery.lettering.js"></script>
 <script src="js/libs/mustache.js"></script>
 
-
 <script src="js/libs/quantize.js"></script>
 <script src="js/color-thief.js"></script>
 
-
-<!-- Using Mustache templating -->
-<script id='template' type='text/x-mustache'>
+<!-- Using Mustache for templating -->
+<script id='image-section-template' type='text/x-mustache'>
   {{#images}}
-  <div class="imageSection {{class}} ">
-    <div class="imageWrap">
-      <img class="targetImage" src="{{file}}" data-colorcount="{{colorCount}}" />
-    </div>
-    <div class="colors">
-      <div class="function dominantColor">
-        <h3>Dominant Color</h3>
-        <div class="swatches"></div>
-      </div>
-      <div class="function medianCutPalette clearfix">
-        <h3>Palette</h3>
-        <div class="swatches"></div>
-      </div>
+  <div class="image-section {{class}} ">
+    <div class="image-wrap">
+      <button class="run-functions-button">Click</button>
+      <img class="target-image" src="{{file}}" data-colorcount="{{colorCount}}" />
     </div>
+    <div class="color-thief-output-template"></div>
   </div>
   {{/images}}
 </script>
 
-<script src="index.js"></script>
+<script id='color-thief-output-template' type='text/x-mustache'>
+  <div class="function get-color">
+    <div class="function-details">
+      <h3 class="function-title">Dominant Color</h3>
+      <div class="function-code">colorThief.getColor()</div>
+      <div class="function-execution-time">20ms</div>
+    </div>
+    <div class="function-output">
+      <div class="swatches"></div>
+    </div>
+  </div>
+  <div class="function get-palette">
+    <div class="function-details">
+      <h3 class="function-title">Palette</h3>
+      <div class="function-code">colorThief.getPalette()</div>
+      <div class="function-execution-time">20ms</div>
+    </div>
+    <div class="function-output">
+      <div class="swatches"></div>
+    </div>
+  </div>
+</script>
+
+<script src="demo.js"></script>
+
 </body>
 </html>
diff --git a/js/color-thief.js b/js/color-thief.js
index a4b647a..f628cf4 100644
--- a/js/color-thief.js
+++ b/js/color-thief.js
@@ -2,19 +2,16 @@
  * Color Thief v1.0
  * by Lokesh Dhakar - http://www.lokeshdhakar.com
  *
- * Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/
+ * License
+ * -------
+ * Creative Commons Attribution 2.5 License:
+ * http://creativecommons.org/licenses/by/2.5/
  *
- * # Thanks
- * Nick Rabinowitz: Created quantize.js which is used by the median cut palette function. This handles all the hard clustering math.
- * John Schulz: All around mad genius who helped clean and optimize the code. @JFSIII
- *
- * ## Classes
- * CanvasImage
- * ## Functions
- * getDominantColor()
- * createPalette()
- * getAverageRGB()
- * createAreaBasedPalette()
+ * Thanks
+ * ------
+ * Nick Rabinowitz - For creating quantize.js.
+ * John Schulz - For clean up and optimization. @JFSIII
+ * Nathan Spady - For adding drag and drop support to the demo page.
  *
  * Requires jquery and quantize.js.
  */
@@ -30,12 +27,12 @@ var CanvasImage = function (image) {
     // If jquery object is passed in, get html element
     imgEl = (image.jquery) ? image[0] : image;
 
-    this.canvas = document.createElement('canvas');
+    this.canvas  = document.createElement('canvas');
     this.context = this.canvas.getContext('2d');
 
     document.body.appendChild(this.canvas);
 
-    this.width = this.canvas.width = imgEl.width;
+    this.width  = this.canvas.width  = imgEl.width;
     this.height = this.canvas.height = imgEl.height;
 
     this.context.drawImage(imgEl, 0, 0, this.width, this.height);
@@ -62,19 +59,19 @@ CanvasImage.prototype.removeCanvas = function () {
 };
 
 
+var ColorThief = function () {};
+
 /*
- * getDominantColor(sourceImage)
+ * getColor(sourceImage)
  * returns {r: num, g: num, b: num}
  *
  * Use the median cut algorithm provided by quantize.js to cluster similar
  * colors and return the base color from the largest cluster. */
-function getDominantColor(sourceImage) {
-
-    var palette = createPalette(sourceImage, 5);
-    var dominant = palette[0];
-
-    return dominant;
-}
+ColorThief.prototype.getColor = function(sourceImage) {
+    var palette       = this.getPalette(sourceImage, 5);
+    var dominantColor = palette[0];
+    return dominantColor;
+};
 
 
 /*
@@ -86,13 +83,13 @@ function getDominantColor(sourceImage) {
  *
  * BUGGY: Function does not always return the requested amount of colors. It can be +/- 2.
  */
-function createPalette(sourceImage, colorCount) {
+ColorThief.prototype.getPalette = function(sourceImage, colorCount) {
 
     // Create custom CanvasImage object
-    var image = new CanvasImage(sourceImage),
-        imageData = image.getImageData(),
-        pixels = imageData.data,
-        pixelCount = image.getPixelCount();
+    var image      = new CanvasImage(sourceImage);
+    var imageData  = image.getImageData();
+    var pixels     = imageData.data;
+    var pixelCount = image.getPixelCount();
 
     // Store the RGB values in an array format suitable for quantize function
     var pixelArray = [];
@@ -112,117 +109,11 @@ function createPalette(sourceImage, colorCount) {
 
     // Send array to quantize function which clusters values
     // using median cut algorithm
-
-    var cmap = MMCQ.quantize(pixelArray, colorCount);
+    var cmap    = MMCQ.quantize(pixelArray, colorCount);
     var palette = cmap.palette();
 
     // Clean up
     image.removeCanvas();
 
     return palette;
-
-}
-
-
-/*
- * getAverageRGB(sourceImage)
- * returns {r: num, g: num, b: num}
- *
- * Add up all pixels RGB values and return average.
- * Tends to return muddy gray/brown color. Most likely, you'll be better
- * off using getDominantColor() instead.
- */
-function getAverageRGB(sourceImage) {
-    // Config
-    var sampleSize = 10;
-
-    // Create custom CanvasImage object
-    var image = new CanvasImage(sourceImage),
-        imageData = image.getImageData(),
-        pixels = imageData.data,
-        pixelCount = image.getPixelCount();
-
-    // Reset vars
-    var i = 0,
-        count = 0,
-        rgb = {r:0, g:0, b:0};
-
-    // Loop through every # pixels. (# is set in Config above via the blockSize var)
-    // Add all the red values together, repeat for blue and green.
-    // Last step, divide by the number of pixels checked to get average.
-    while ( (i += sampleSize * 4) < pixelCount ) {
-        // if pixel is mostly opaque
-        if (pixels[i+3] > 125) {
-            ++count;
-            rgb.r += pixels[i];
-            rgb.g += pixels[i+1];
-            rgb.b += pixels[i+2];
-        }
-    }
-
-    rgb.r = ~~(rgb.r/count);
-    rgb.g = ~~(rgb.g/count);
-    rgb.b = ~~(rgb.b/count);
-
-    return rgb;
-}
-
-
-/*
- * createAreaBasedPalette(sourceImage, colorCount)
- * returns array[ {r: num, g: num, b: num}, {r: num, g: num, b: num}, ...]
- *
- * Break the image into sections. Loops through pixel RGBS in the section and average color.
- * Tends to return muddy gray/brown color. You're most likely better off using createPalette().
- *
- * BUGGY: Function does not always return the requested amount of colors. It can be +/- 2.
- *
- */
-function createAreaBasedPalette(sourceImage, colorCount) {
-
-    var palette = [];
-
-    // Create custom CanvasImage object
-    var image = new CanvasImage(sourceImage),
-        imageData = image.getImageData(),
-        pixels = imageData.data,
-        pixelCount = image.getPixelCount();
-
-
-    // How big a pixel area does each palette color get
-    var rowCount = Math.round(Math.sqrt(colorCount)),
-        colCount = rowCount,
-        colWidth = Math.round(image.width / colCount),
-        rowHeight = Math.round(image.height / rowCount);
-
-    // Loop through pixels section by section.
-    // At the end of each section, push the average rgb color to palette array.
-    for (var i = 0, vertOffset; i<rowCount; i++) {
-        vertOffset = i * rowHeight * image.width * 4;
-
-        for (var j = 0, horizOffset, rgb, count; j<colCount; j++) {
-            horizOffset = j * colWidth * 4;
-            rgb = {r:0, g:0, b:0};
-            count = 0;
-
-            for (var k = 0, rowOffset; k < rowHeight; k++) {
-                rowOffset = k * image.width * 4;
-
-                for (var l = 0, offset; l < colWidth; l++) {
-                    offset = vertOffset + horizOffset + rowOffset + (l * 4);
-                    rgb.r += pixels[offset];
-                    rgb.g += pixels[offset+1];
-                    rgb.b += pixels[offset+2];
-                    count++;
-                }
-
-            }
-            rgb.r = ~~(rgb.r/count);
-            rgb.g = ~~(rgb.g/count);
-            rgb.b = ~~(rgb.b/count);
-            palette.push(rgb);
-        }
-    }
-
-    return palette;
-}
+}
\ No newline at end of file
diff --git a/sass/app.sass b/sass/app.sass
index 8a802bc..0a8d722 100644
--- a/sass/app.sass
+++ b/sass/app.sass
@@ -2,67 +2,46 @@
 @import "compass/css3"
 @import "compass/utilities/general/clearfix"
 
+$lightGray: #eeeeee
+$blue: #0096df
+$green: #00bfa8
+$yellow: #fdf485
+$orange: #ff8000
+$red: #ff4040
+
+$color: #aaa
+$bgColor: #444
+
+$headingColor: #444
+$linkColor: $green
+
+$fontSize: 18px
+$columnWidth: 600px
+
+// $codeColor: #eff
+// $inputColor: #555
+// $selectionColor: $yellow
+
+// $altColor: lighten($color, 30%)
+// $altCommentsColor: lighten($color, 10%)
+
+
 body, input, textarea
   margin: 40px
-  color: #888
-  background: #222
-  font: 16px/1.625em "Varela Round", "lucida grande", tahoma, sans-serif
-  -wbkite-font-smoothing: antialiased
-  
+  color: $color
+  background: $bgColor
+  font-size: $fontSize
+  font-family: "Karla", "lucida grande", sans-serif
+
 h1, h2, h3, h4, h5, h6
   color: white
-  font-family: "Terminal Dosis", "lucida grande", tahoma, sans-serif
-  line-height: 1em
-  font-weight: 600
+  line-height: 1.2em
+  font-weight: 500
   margin-bottom: 0.5em
- 
-h1
-  font-size: 72px
-  line-height: 0.5em
-  margin-bottom: 0.3em
-  small
-    font-size: 20px
-  span
-    +transition( color 1s)
-  &:hover
-    .char1
-      +transition( color .2s)    
-      color: red
-    .char2
-      +transition( color .2s .1s)    
-      color: orange
-    .char3
-      +transition( color .2s .2s)    
-      color: yellow
-    .char4
-      +transition( color .2s .3s)    
-      color: green
-    .char5
-      +transition( color .2s .4s)    
-      color: blue
-    .char6
-      +transition( color .2s .5s)    
-      color: indigo
-    .char7
-      +transition( color .2s .6s)    
-      color: violet
-    .char8
-      +transition( color .2s .7s)    
-      color: red
-    .char9
-      +transition( color .2s .8s)    
-      color: orange
-    .char10
-      +transition( color .2s .9s)    
-      color: yellow
-    .char11
-      +transition( color .2s 1s)    
-      color: green
 
 h2
-  font-size: 40px
+  font-size: 36px
   line-height: 1.2em
-  text-align: center
 
 h3
   font-size: 16px
@@ -74,15 +53,161 @@ h4
   margin-bottom: 1.25em
 
 p
+  line-height: 1.5em
   margin-bottom: 1.25em
 
-
 strong
   font-weight: bold
-  
-/* Drag and Drop area */
+
+/* Links */
+a
+  color: $linkColor
+  text-decoration: none
+  &:hover
+    color: lighten($linkColor, 30%)
+
+/* -- Layout ------------------------------------------------------------------ */
+
+.wrapper
+  text-align: center
+  max-width: $columnWidth
+  margin: 0 auto
+
+.description
+  max-width: 450px
+  margin-right: auto
+  margin-left: auto
+
+.image-section
+  margin-bottom: 80px
+  background: darken($bgColor, 10%)
+  .image-wrap
+    position: relative
+    background: #444
+    // background: url(../img/dark_checkered_bg.png)
+
+.target-image
+  width: 100%
+
+.run-functions-button
+  position: absolute
+  top: 50%
+  left: 50%
+  width: 100px
+  height: 100px
+  margin-top: -50px
+  margin-left: -50px
+  border: none
+  +border-radius(50%)
+  color: darken($yellow, 50%)
+  background-color: $yellow
+  font-size: 24px
+  cursor: pointer
+  &:hover
+    background-color: lighten($yellow, 10%)
+    color: darken($yellow, 45%)
+  &:active
+    +scale(0.9)
+
+.color-thief-output
+  margin-top: 20px
+
+.function
+  clear: left
+  margin-bottom: 10px
+  +pie-clearfix
+
+.swatch
+  width: 60px
+  height: 30px
+  margin-right: 2px
+  background: #dddddd
+  float: left
+  +transition(scale .5s)
+  &:hover
+    +transition(none)
+    +scale(1.1, 1.1)
+    +box-shadow( 0 1px 10px black)
+
+/* Hardcoding the offset for the FB icon example */
+.fbIcon .imageWrap .targetImage
+  +border-radius(0)
+  position: relative
+  top: 142px
+  left: 192px
+
+canvas
+  display: none
+
+/* -- Animated logo ------------------------------------------------------------------ */
+h1
+  font-size: 72px
+  line-height: 0.5em
+  margin-bottom: 0.3em
+  small
+    font-size: 20px
+
+  .char1
+    +transition( color .1s)
+  .char2
+    +transition( color .1s .05s)
+  .char3
+    +transition( color .1s .1s)
+  .char4
+    +transition( color .1s .15s)
+  .char5
+    +transition( color .1s .2s)
+
+  .char7
+    +transition( color .1s .3s)
+  .char8
+    +transition( color .1s .35s)
+  .char9
+    +transition( color .1s .4s)
+  .char10
+    +transition( color .1s .45s)
+  .char11
+    +transition( color .1s .5s)
+  &:hover
+    .char1
+      +transition( color .1s)
+      color: $red
+    .char2
+      +transition( color .1s .05s)
+      color: $orange
+    .char3
+      +transition( color .1s .1s)
+      color: $yellow
+    .char4
+      +transition( color .1s .15s)
+      color: $green
+    .char5
+      +transition( color .1s .2s)
+      color: $blue
+
+    .char7
+      +transition( color .1s .3s)
+      color: $red
+    .char8
+      +transition( color .1s .35s)
+      color: $orange
+    .char9
+      +transition( color .1s .4s)
+      color: $yellow
+    .char10
+      +transition( color .1s .45s)
+      color: $green
+    .char11
+      +transition( color .1s .5s)
+      color: $blue
+
+
+/* -- Drag and drop ------------------------------------------------------------------ */
+
+.drag-and-drop
+  display: none
+
 .dropZone
-  width: 900px
   height: 200px
   margin-bottom: 60px
   background: url("../img/drag_placeholder.png")
@@ -92,100 +217,18 @@ strong
   display: none
   .targetImage
     // width: 100%
-    
-  
-/* Forms */
-input
-  &[type=text], &[type=password]
-    background: #fafafa
-    +box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.1))
-    border: 1px solid #dddddd
-    color: #888888
-    +border-radius(4px)
-
-textarea
-  background: #fafafa
-  +box-shadow( inset 0 1px 1px rgba(0, 0, 0, 0.1))
-  border: 1px solid #dddddd
-  color: #888888
-  +border-radius(4px)
-
-input[type=text]:focus
-  color: #373737
-
-textarea
-  &:focus
-    color: #373737
-  padding-left: 3px
-  width: 98%
-
-input[type=text]
-  padding: 3px
 
 
-/* Links */
-a
-  color: #09a1ec
-  text-decoration: none
-  &:hover
-    color: #7fd2fa
-
-#container
-  width: 900px
-  margin: 0 auto
-
-header
-  padding-bottom: 40px
-  text-align: center
-  width: 600px
-  margin: 0 auto
-
-.medianCutPalette h3
-  margin-top: 20px
-
-.imageSection
-  margin-bottom: 80px
-  background: #111111
-  +border-radius(10px)
-  +pie-clearfix
-  .imageWrap
-    +border-left-radius(10px)
-    width: 400px
-    height: 300px
-    float: left
-    margin-right: 20px
-    background: url(../img/dark_checkered_bg.png)
-    overflow: hidden
-  .colors
-    margin-top: 20px
-    width: 400px
-    float: left
-    .function
-      clear: left
-      margin-bottom: 10px
-      +pie-clearfix
-      .swatches .swatch
-        width: 40px
-        height: 20px
-        margin-right: 2px
-        background: #dddddd
-        float: left
-        +transition( all .5s)
-        &:hover
-          +transition( none)
-          +scale(1.2, 1.2)
-          +box-shadow( 0 1px 10px black)
-        &:first-child
-          +border-left-radius(4px)
-        &:last-child
-          +border-right-radius(4px)
-
-/* Hardcoding the offset for the FB icon example
-.fbIcon .imageWrap .targetImage
-  +border-radius(0)
-  position: relative
-  top: 142px
-  left: 192px
-
-canvas
-  display: none
\ No newline at end of file
+@media only screen and (max-width : 480px)
+  body
+    margin: 40px 0
+    font-size: $fontSize - 4
+  .intro
+    padding-left: 20px
+    padding-right: 20px
+  h1
+    font-size: 48px // from 72px
+  h2
+    font-size: 24px // from 40px
+  h3
+    font-size: 14px // from 16px