Making the ready/set/go look more like the mockup

app/views/home/index.html.erb

@@ -9,11 +9,14 @@
   </div>
 <% end %>
 
-<ol class="instructions">
-  <li><strong>Ready</strong><span>gem install gemcutter</span></li>
-  <li><strong>Set</strong><span>gem tumble</span></li>
-  <li><strong>Go</strong><span>gem push yourgem-0.0.1.gem</span></li>
-</ol>
+<div class="border">
+  <ol class="instructions">
+    <li id="ready"><strong>Ready</strong><span>gem install gemcutter</span></li>
+    <li id="set"><strong>Set</strong><span>gem tumble</span></li>
+    <li id="go"><strong>Go</strong><span>gem push yourgem-0.0.1.gem</span></li>
+  </ol>
+</div>
+
 <p class="pitch">
   Gemcutter is <strong>next generation</strong> of gem hosting for the Ruby community.
   <strong>Instantly publish</strong> your gems and install them.

app/views/rubygems/show.html.erb

@@ -62,11 +62,11 @@
 
       <% if @current_dependencies.present? %>
         <div class="dependencies">
-          <h5>Dependencies</h5>
+          <h5>Runtime Dependencies</h5>
           <ol>
           <% @current_dependencies.each do |dependency| %>
             <li>
-              <%= link_to "<strong>#{dependency.rubygem.name}</strong> #{dependency.name}", dependency.rubygem %>
+              <%= link_to "<strong>#{dependency.rubygem.name}</strong> #{dependency.requirements}", dependency.rubygem %>
             </li>
           <% end %>
           </ol>

public/stylesheets/screen.css

@@ -134,7 +134,7 @@ body {
   padding: 0.0em 0.4em;
   -moz-border-radius: 8px;
   -webkit-border-radius: 10px;
-  background: #e9e4d1 url(/images/instructions.png) repeat-x scroll 0 -2px;
+  background: #e9e4d1 url(/images/shadow.png) repeat-x scroll 0 -2px;
   margin-top: 7px;
 }
 
@@ -153,15 +153,14 @@ body {
 .main {
   padding: 2.4em;
   color: #EEE;
-  margin-top: 20px;
+  margin-top: 10px;
 }
 
 .main h2 {
   display: inline-block;
   color: #340505;
   font-size: 4em;
   margin-left: 36px;
-  margin-top: 20px;
 }
 
 .main h3 {
@@ -212,40 +211,45 @@ body {
 }
 
 .main .info {
+  padding-top: 20px;
   background: #ebe3d1;
   border: 5px solid #cbc2ae;
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
 }
 
 .main .info ol.instructions {
-  border: 1px solid #b4ac99;
-  margin-top: 36px;
-  margin-left: 36px;
-  margin-right: 36px;
+  margin: 0;
   font-size: 2.4em;
   text-shadow: 1px 1px 1px rgba(255,255,255,0.2);
-  background: #FFF;
+  background: url('/images/instructions.png');
+  padding-top: 12px;
+  height: 310px;
 }
 
 .main .info ol.instructions li {
-  background: #FD6;
-  background-image: url(/images/instructions.png);
   background-repeat: repeat-x;
   line-height: 4em;
   color: rgba(0,0,0,.8);
-  margin: .75em;
   border: 1px solid rgba(0,0,0,.2);
   border-top: none;
-  height: 4em;
+  border-bottom: none;
+  height: 89px;
+  margin-bottom: 16px;
+  margin-left: 12px;
+  margin-right: 12px;
 }
 
-.main .info ol.instructions li:first-child {
-  background-color: #D44;
+.main .info ol.instructions li#ready {
+  background-image: url(/images/ready.png);
 }
 
-.main .info ol.instructions li:last-child {
-  background-color: #AD4;
+.main .info ol.instructions li#set {
+  background-image: url(/images/set.png);
+}
+
+.main .info ol.instructions li#go {
+  background-image: url(/images/go.png);
 }
 
 .main .info ol.instructions li strong {