diff --git a/README b/README.textile
similarity index 78%
rename from README
rename to README.textile
index 1a46700..05866a5 100644
--- a/README
+++ b/README.textile
@@ -1,9 +1,12 @@
 
-Welcome to Aristo!
-======================
+h1. Welcome to "CSS3 Aristo":http://github.com/dtrejo/aristo/!
+
+h2. CSS3 Aristo Demo
+
+See the "demo":http://dtrejo.github.com/aristo/!
+
+h2. Introduction
 
-Introduction
-------------
 Aristo is an open source UI distributed as part of the Cappuccino Open Source Framework (http://cappuccino.org)
 and specifically designed for the cross platform challenges applications face today. It is a collaborative 
 effort by 280 North, Inc. and Sofa and released under the Creative Commons Attribution Share-Alike License.
diff --git a/css/aristo.css b/css/aristo.css
index 84f3fe8..e316f91 100644
--- a/css/aristo.css
+++ b/css/aristo.css
@@ -4,21 +4,6 @@ http://qooxdoo.org/documentation/general/webkit_css_styles
 http://trac.webkit.org/browser/trunk/LayoutTests//fast/css
 */
 
-html, body {
-  height: 100%;
-  overflow: hidden;
-  padding: 0;
-  margin: 0;
-  -webkit-user-select: none;
-}
-
-body {
-  font-family: Apex,"Helvetica Neue","HelveticaNeue",helvetica,sans-serif;
-  font-size: 14px;
-  font-weight: bold;
-  -webkit-font-smoothing: antialiased;
-}
-
 a {
   color: #71829E;
   cursor: pointer;
@@ -52,15 +37,14 @@ input[type="radio"]:checked {
 }
 
 input[type="range"] {
-  -khtml-appearance: none; 
+  -khtml-appearance: none;
   -webkit-border-image: url(../images/slider-horizontal-track.png) 2 4 2 4 / 2px 4px 2px 4px repeat repeat;
   height: 5px;
   padding: 0;
 }
 
 input, textarea {
-  font-size: 12px;
-  color: #000;
+  font-size: 1em;
   font-weight: normal;
   padding: 4px;
 }
@@ -70,7 +54,7 @@ textarea {
   -webkit-appearance: textfield;
   resize: none;
   padding: 4px;
-  /* 
+  /*
     Hack to make the same size as text inputs,
     since their native border isn't taken into
     account when calculating width.
@@ -78,9 +62,16 @@ textarea {
   padding-right: 6px;
 }
 
+/* FIXME: this grey is not showing in FF. */
+::-webkit-input-placeholder,
+:-moz-placeholder {
+  color: #8F8F8F;
+}
+
 select {
   -khtml-appearance: none;
-  background: url(../images/select-updown.png) center right no-repeat, 
+  -webkit-user-select: none;
+  background: url(../images/select-updown.png) center right no-repeat,
               -webkit-gradient(linear, left top, left bottom, from(#F5F5F5), to(#CCCCCC));
   min-height: 24px;
   border: 1px solid #BDBDBD;
@@ -93,25 +84,25 @@ select:active {
   outline: none;
 }
 
-::-webkit-input-placeholder {
-  color: #8F8F8F;
-}
+a.awesome { text-decoration: none; }
 
+a.awesome,
 button {
   margin: 5px;
   -khtml-appearance: none;
   -moz-appearance: none;
   background: none;
   padding: 4px 9px;
+  font-family: Apex, "Helvetica Neue", "HelveticaNeue", "Lucida Grande", Helvetica, Arial, sans-serif;
   font-weight: bold;
-  font-size: 12px;
+  font-size: 1em;
   color: #4F4F4F;
   text-shadow: 0px 1px 1px #fff;
 
   border-width: 1px;
   border-style: solid;
   border-color: #AFAFAF #9A9A9A #828282 #9A9A9A;
-  
+
   background: #E9E9E9;
   background: -webkit-gradient(linear, left top, left bottom, from(#E9E9E9), to(#B8B8B7));
   background: -moz-linear-gradient(top, #E9E9E9, #B8B8B7);
@@ -119,8 +110,22 @@ button {
   -moz-box-shadow: inset 0 1px 1px #F5F5F5;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
+
+  transition: all .2s ease-in-out;
+  -webkit-transition: all .2s ease-in-out;
+  -moz-transition: all .2s ease-in-out;
+  -o-transition: all .2s ease-in-out;
+  cursor: pointer;
+  -webkit-user-select: none;
+}
+button:hover,
+button:focus {
+  box-shadow: 0 0 7px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.5);
+  -webkit-box-shadow: 0 0 7px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.5);
+  -moz-box-shadow: 0 0 7px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.5);
 }
 
+a.awesome.default, a.awesome.blue,
 button.default, button.blue {
   border-color: #7EA1B7 #5D7C8F #4C6B7E #5D7C8F;
   color: #1C4257;
@@ -130,28 +135,53 @@ button.default, button.blue {
   -webkit-box-shadow: inset 0 1px 1px #D9EDF9;
   -moz-box-shadow: inset 0 1px 1px #D9EDF9;
 }
-
-button.green {
-  color: #374C29;
-  -webkit-box-shadow: inset 1px 1px #CDE2B2;
-  -moz-box-shadow: inset 1px 1px #CDE2B2;
-  background: #A9CD7E;
-  background: -webkit-gradient(linear, left top, left bottom, from(#A9CD7E), to(#81A558));
-  background: -moz-linear-gradient(top, #A9CD7E, #81A558);
-  border-color: #92BA63 #8AB05E #81A558 #8AB05E;
+a.awesome.default:hover, a.awesome.blue:hover,
+button.default:hover, button.blue:hover,
+button.default:focus, button.blue:focus {
+  box-shadow: 0 0 7px #53a6d5, inset 0 1px 0 rgba(255,255,255,0.5);
+  -webkit-box-shadow: 0 0 7px #53a6d5, inset 0 1px 0 rgba(255,255,255,0.5);
+  -moz-box-shadow: 0 0 7px #53a6d5, inset 0 1px 0 rgba(255,255,255,0.5);
+  -o-box-shadow: 0 0 7px #53a6d5, inset 0 1px 0 rgba(255,255,255,0.5);
 }
 
+a.awesome.red,
 button.red {
   color: #4F0F0E;
   background: #E56856;
   background: -webkit-gradient(linear, left top, left bottom, from(#EE8679), to(#B94543));
   background: -moz-linear-gradient(top, #EE8679, #B94543);
-  -webkit-box-shadow: inset 0 1px 1px #E9978D;
-  -moz-box-shadow: inset 0 1px 1px #E9978D;
+  -webkit-box-shadow: inset 0 1px 1px #F4C3BD;
+  -moz-box-shadow: inset 0 1px 1px #F4C3BD;
   text-shadow: 0 1px 1px #FA9287;
   border-color: #A2403E;
 }
+a.awesome.red:hover, a.awesome.red:focus,
+button.red:hover, button.red:focus {
+  box-shadow: 0 0 7px #B94543, inset 0 1px 0 rgba(255,255,255,0.5);
+  -webkit-box-shadow: 0 0 7px #B94543, inset 0 1px 0 rgba(255,255,255,0.5);
+  -moz-box-shadow: 0 0 7px #B94543, inset 0 1px 0 rgba(255,255,255,0.5);
+  -o-box-shadow: 0 0 7px #B94543, inset 0 1px 0 rgba(255,255,255,0.5);
+}
 
+a.awesome.green,
+button.green {
+  color: #374C29;
+  background: #A9CD7E;
+  background: -webkit-gradient(linear, left top, left bottom, from(#A9CD7E), to(#81A558));
+  background: -moz-linear-gradient(top, #A9CD7E, #81A558);
+  border-color: #92BA63 #8AB05E #81A558 #8AB05E;
+  -webkit-box-shadow: inset 0 1px 1px #CDE2B2;
+  -moz-box-shadow: inset 0 1px 1px #CDE2B2;
+  text-shadow: 0 1px 1px #C9DBB4;
+}
+a.awesome.green:hover, a.awesome.green:focus,
+button.green:hover, button.green:focus {
+  box-shadow: 0 0 7px #81A558, inset 0 1px 0 rgba(255,255,255,0.5);
+  -webkit-box-shadow: 0 0 7px #81A558, inset 0 1px 0 rgba(255,255,255,0.5);
+  -moz-box-shadow: 0 0 7px #81A558, inset 0 1px 0 rgba(255,255,255,0.5);
+  -o-box-shadow: 0 0 7px #81A558, inset 0 1px 0 rgba(255,255,255,0.5);
+}
+a.awesome:active:not(:disabled),
 button:active:not(:disabled) {
   border-color: #B6B6B6 #989898 #AEAEAE #989898;
   background: #B6B6B6;
@@ -161,7 +191,8 @@ button:active:not(:disabled) {
   -moz-box-shadow: inset 0 -1px 1px #F4F4F4;
 }
 
-button.default:active, button.blue:active {
+a.awesome:active:not(:disabled), a.awesome.blue:active:not(:disabled),
+button.default:active:not(:disabled), button.blue:active:not(:disabled) {
   border-color: #4A697C #618296 #7B9FB5 #618296;
   background: #76A0B9;
   background: -webkit-gradient(linear, left top, left bottom, from(#76A0B9), to(#B0D7EF));
@@ -170,19 +201,37 @@ button.default:active, button.blue:active {
   -moz-box-shadow: inset 0 -1px 1px #D8EDF8;
 }
 
-button.red:active {
+a.awesome.red:active:not(:disabled),
+button.red:active:not(:disabled) {
   border-color: #A2403E;
   background: #B94543;
   background: -webkit-gradient(linear, left top, left bottom, from(#B94543), to(#EE8679));
   background: -moz-linear-gradient(top, #B94543, #EE8679);
-  -webkit-box-shadow: inset 0 -1px 1px #E9978D;
-  -moz-box-shadow: inset 0 -1px 1px #E9978D;
+  -webkit-box-shadow: inset 0 -1px 1px #F4C3BD;
+  -moz-box-shadow: inset 0 -1px 1px #F4C3BD;
 }
 
-button:disabled {
-  opacity: 0.5;
+a.awesome.green:active:not(:disabled),
+button.green:active:not(:disabled) {
+  color: #374C29;
+  background: #81A558;
+  background: -webkit-gradient(linear, left top, left bottom, from(#81A558), to(#A9CD7E));
+  background: -moz-linear-gradient(top, #81A558, #A9CD7E);
+  border-color: #92BA63 #8AB05E #81A558 #8AB05E;
+  -webkit-box-shadow: inset 0px -1px 1px #CDE2B2;
+  -moz-box-shadow: inset 0px -1px 1px #CDE2B2;
 }
 
+a.awesome:disabled, a.awesome:hover:disabled,
+button:disabled, button:hover:disabled {
+  opacity: 0.5;
+  box-shadow: none;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  -o-box-shadow: none;
+  cursor: default;
+}
+/*
 ::-webkit-scrollbar {
   width: 17px;
   height: 17px;
@@ -248,29 +297,47 @@ button:disabled {
 ::-webkit-scrollbar-button:end:increment {
     display: block;
 }
- 
+
 /* Turn off the down area up on top, and up area on bottom */
 ::-webkit-scrollbar-button:start:increment,
 ::-webkit-scrollbar-button:end:decrement {
     display: none;
 }
-
-::-webkit-slider-thumb { 
-  -khtml-appearance: none; 
-  background: url(../images/slider-knob.png) no-repeat; 
-  width: 23px; 
+SCROLLBAR = UGLY
+*/
+::-webkit-slider-thumb {
+  -khtml-appearance: none;
+  background: url(../images/slider-knob.png) no-repeat;
+  width: 23px;
   height: 24px;
 }
 
 /*This doesn't seem to be implemented yet*/
-::-webkit-slider-thumb:active { 
+::-webkit-slider-thumb:active {
   background: url(../images/slider-knob-highlighted.png) no-repeat;
 }
 
+.search {
+  margin: 6px 0;
+  height: 19px;
+  width: 180px;
+  padding: 0 10px;
+  background: white;
+  border: 1px solid #e1e1e1;
+  border-top: none;
+  border-radius: 10px;
+  -moz-border-radius: 10px;
+  -webkit-border-radius: 10px;
+  box-shadow: inset 0 1px 1px #5F5F5F;
+  -moz-box-shadow: inset 0 1px 1px #5F5F5F;
+  -webkit-box-shadow: inset 0 1px 1px #5F5F5F;
+  -moz-user-select: text;
+}
+
 .copy {
   cursor: copy;
 }
 
 .progress {
   cursor: progress;
-}
\ No newline at end of file
+}
diff --git a/index.html b/index.html
index 5a765bd..f33193b 100644
--- a/index.html
+++ b/index.html
@@ -1,24 +1,50 @@
 <!DOCTYPE HTML>
 <html>
 <head>
-	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-	<title>Aristo</title>
-	<meta name="generator" content="TextMate http://macromates.com/">
-	<meta name="author" content="Alex MacCaw">
-	<link rel="stylesheet" href="css/aristo.css" type="text/css">
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+  <title>CSS3 Aristo</title>
+  <meta name="generator" content="TextMate http://macromates.com/">
+  <meta name="author" content="Alex MacCaw, David Trejo">
+  <link rel="stylesheet" href="css/aristo.css" type="text/css">
+  <style type="text/css" media="screen">
+    html, body {
+      height: 100%;
+      overflow: hidden;
+      padding: 0;
+      margin: 0;
+    }
+
+    body {
+      font-family: Apex,"Helvetica Neue","HelveticaNeue","Lucida Grande", Helvetica, Arial, sans-serif;
+      font-size: 100%;
+      font-weight: bold;
+      -webkit-font-smoothing: antialiased;
+    }
+  </style>
 </head>
 <body>
-
-<div style="overflow: scroll; width: 300px; height: 300px">
-      
+<div style="overflow: scroll; width: 300px; height: 750px; margin: 0em auto;">
+  <h1><a href="http://github.com/DTrejo/aristo/">CSS3 Aristo</a></h1>
+  
   <input type="checkbox" />
-
+  
   <button>Test Button</button>
-
-  <button class="default">Test Default Button</button>
-
   <button disabled="disabled">Test Disabled Button</button>
+  
+  <button class="default">Test Default Button</button>
+  <button class="default" disabled="disabled">Test Default Disabled Button</button>
+  
+  <button class="blue">Test Blue Button</button>
+  <button class="blue" disabled="disabled">Test Blue Disabled Button</button>
 
+  <button class="red">Test Red Button</button>
+  <button class="red" disabled="disabled" >Test Red Disabled Button</button>
+  
+  <button class="green">Test Green Button</button>
+  <button class="green" disabled="disabled">Test Green Disabled Button</button>
+  
+  <button class="green" style="font-size:1.4em;">Super Big Green Button!</button>
+  
   <input type="range" />
 
   <input type="radio" name="use" value="rails" checked="checked" />
@@ -26,19 +52,18 @@
 
   <input type="text" placeholder="placeholder" />
   
-  <textarea></textarea>
+  <textarea>Textarea</textarea>
 
-  <input type="search" placeholder="search" />
+  <input type="search" class="search" placeholder="Search" /><br>
   
-  <span class="copy">Copy</span>
-  <span class="progress">Progress</span>
+  <span class="copy">Copy</span><br>
+  <span class="progress">Progress</span><br>
   
   <select size="1">
     <option value="option1">option1</option>
-    <option value="option2">option2</option>
-    
+    <option value="option2">option2</option>    
   </select>
-
+  
   <div style="width:500px;height:500px"></div>
 </div>