css improvements

_layouts/index.html

@@ -71,19 +71,22 @@
 	<div class="main">
 	  <h2>A <span class="info">new language</span> and <span class="info">live environment</span> made for the web.</h2>
 
-	  <div class="row">
+	  <div class="column">
 	    <p>The Amber language is deeply inspired by Smalltalk. It is designed to make client-side development faster and easier.
 	    Amber includes a live development environment with a class browser, workspace,  unit test runner, transcript, object inspector and debugger.</p>
 	  </div>
 	  
-	  <div class="row">
+	  <div class="column">
 	    <p>Amber is written in itself, including the compiler, and compiles into efficient JavaScript, mapping one-to-one with the JS equivalent.</p>
-	    <p class="try">
-	      <span class="info">Click around. Don't worry about making a mess or breaking anything, just have fun!</span><br>
-	      <button class="huge" onClick="smalltalk.Browser._open()">Try Amber!</button>
-	    </p>
 	  </div>
+
 	  <div class="clear"></div>
+
+	  <p class="try">
+	    <span class="info">Click around. Don't worry about making a mess or breaking anything, just have fun!</span><br>
+	    <button class="huge" onClick="smalltalk.Browser._open()">Try Amber in your browser!</button>
+	  </p>
+
 	</div>
       </div>
       

css/style.css

@@ -56,7 +56,7 @@ body {
 }
 
 a {
-    color: #e22c29;
+    color: #d27324;
     text-decoration: none;
 }
 
@@ -89,6 +89,10 @@ h2 {
     padding-bottom: 10px;
 }
 
+h2 span.info {
+    background: none;
+}
+
 h3 {
     font-size: 22px;
     color: #666;
@@ -168,10 +172,12 @@ h3 {
     list-style: none;
     text-align: center;
     padding: 5px;
-    background: #fff;
+    background: #333;
     font-size: 13px;
-    border-bottom: 2px solid #5a3808;
-    box-shadow: 0 0 2px 2px #999;
+    box-shadow: 0 -20px 50px 20px rgba(0,0,0,0.6);
+    font-family: "Helvetica Neue", Arial, sans;
+    text-transform: uppercase;
+    letter-spacing: .1em;
 }
 
 #tabs li {
@@ -204,8 +210,6 @@ h3 {
 .teaser {
     padding: 20px;
     background: white;
-    border-top: 2px solid #5a3808;
-    border-bottom: 2px solid #5a3808;
 }
 
 .teaser .main {
@@ -228,6 +232,7 @@ h3 {
 
 .teaser p.try {
     text-align: center;
+    margin-top: 20px;
 }
 
 .teaser p.try button {
@@ -247,6 +252,12 @@ h3 {
     background-image: none;
 }
 
+.column {
+    width: 400px;
+    float: left;
+    margin-right: 20px;
+}
+
 span.info {
     font-style: italic;
     background: lightyellow;
@@ -270,6 +281,7 @@ span.info {
 
 .box dt:before {
     content: "★";
+    font-style: normal;
     padding-right: 10px;
     font-size: 12px;
 }
@@ -294,6 +306,7 @@ span.info {
 
 .box li:before {
     content: "★";
+    font-style: normal;
     padding-right: 10px;
     font-size: 12px;
 }