Fancy buttons woo.

config.rb

@@ -1,3 +1,5 @@
+require 'fancy-buttons'
+
 # Require any additional compass plugins here.
 # Set this to the root of your project when deployed:
 http_path = "/"

lib/public/stylesheets/ie6.css

@@ -0,0 +1 @@
+a.button,form button{background-image:none !important}a.button:hover,a.button:active,a.button:focus,form button:hover,form button:active,form button:focus{background-image:none !important}

lib/sass/ie6.scss

@@ -0,0 +1,4 @@
+a.button, form button {
+  background-image: none !important;
+  &:hover, &:active, &:focus {
+    background-image: none !important; } }

lib/sass/partials/_base.scss

@@ -8,3 +8,5 @@ $blueprint-grid-margin: 10px;
 // Use this to calculate the width based on the total width.
 // Or you can set !blueprint_grid_width to a fixed value and unset !blueprint_container_size -- it will be calculated for you.
 $blueprint-grid-width: ($blueprint-container-size + $blueprint-grid-margin) / $blueprint-grid-columns - $blueprint-grid-margin;
+
+$marmalade: darken(mix(red, yellow), 5%);

lib/sass/partials/_layout.scss

@@ -1,5 +1,6 @@
 @import "compass/css3/border-radius";
 @import "compass/css3/text-shadow";
+@import "fancy-buttons";
 
 body {
   @include container;
@@ -23,17 +24,23 @@ body {
 
     nav {
       @include column($nav-width, true);
-      position: relative;
+      margin-top: 1.5em;
       a {
+        @include fancy-button;
+        @include fancy-button-colors($marmalade);
+
         display: block;
         width: 100%;
         text-align: center;
         font-size: 2em;
-        padding: 6px;
+        padding: 5px;
+        &:active {padding: 4px}
+        line-height: 20px;
       }
       input {
         @include border-radius(5px);
         width: 100% !important;
+        line-height: 20px;
       }
     }
   }