1 files changed, 89 insertions, 20 deletions

diff --git a/css/style.css b/css/style.css
index a59af50..7a517d1 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,7 +1,7 @@
 body {
   font-family: 'Source Sans Pro';
-  background: #222;
-  color: #f5f5f5;
+  background: #f5f5f5;
+  color: #5a5a5a;
   overflow-wrap: break-word;
   word-wrap: break-word;
   word-break: break-word;
@@ -49,12 +49,23 @@ hr {
 .right { float: right;}
 
 .message {
-  background: #333;
+  border: 1px solid #ddd;
+  background: white;
   margin-top: .5em;
   padding: .3em .5em;
   border-radius: 5px;
 }
 
+.message, .message > *, .navbar, .navbar > * {
+  animation: fadein .5s;
+}
+
+@keyframes fadein {
+    from { opacity: 0; }
+    to   { opacity: 1; }
+}
+
+
 .submessage {
   margin-left: 2em;
 }
@@ -73,7 +84,7 @@ img.small {
 }
 
 a {
-  color: cyan;
+  color: #0088cc;
   text-decoration: none;
 }
 
@@ -82,7 +93,7 @@ a:hover {
 }
 
 pre {
-  color: violet;
+  color: #dd1144;
   width: 100%;
   display: block;
 }
@@ -105,13 +116,17 @@ code, pre {
 textarea, input {
   font-family: 'Source Sans Pro';
   font-size: 1em;
-  background: #222;
+  background: #f5f5f5;
   padding: .5em;
-  color: #f5f5f5;
+  color: #5a5a5a;
   border: none;
   border-radius: 5px;
 }
 
+textarea:active, textarea:focus {
+  background: white;
+}
+
 textarea {
   width: 100%;
 }
@@ -170,28 +185,82 @@ textarea {
 
 button {
   display: inline-block;
-  padding: .25em .5em;
-  margin: .15em;
-  font-size: 1em;
-  line-height: 1.2em;
-  color: #d5d5d5;
+  *display: inline;
+  padding: 4px 12px;
+  margin-top: .5em;
+  margin-bottom: 0;
+  *margin-left: .3em;
+  font-size: 14px;
+  line-height: 20px;
+  color: #333333;
   text-align: center;
-  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.75);
+  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
   vertical-align: middle;
   cursor: pointer;
-  background-color: #222;
-  border: 1px solid #222;
-  border-radius: 4px;
+  background-color: #f5f5f5;
+  *background-color: #e6e6e6;
+  background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
+  background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
+  background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
+  background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
+  background-repeat: repeat-x;
+  border: 1px solid #cccccc;
+  *border: 0;
+  border-color: #e6e6e6 #e6e6e6 #bfbfbf;
+  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+  border-bottom-color: #b3b3b3;
+  -webkit-border-radius: 4px;
+     -moz-border-radius: 4px;
+          border-radius: 4px;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
+  *zoom: 1;
+  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+     -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
 }
 
 button:hover,
 button:focus,
+button:active,
+button[disabled] {
+  color: #333333;
+  background-color: #e6e6e6;
+  *background-color: #d9d9d9;
+}
+
 button:active {
-  color: white;
-  background-color: black;
+  background-color: #cccccc \9;
+}
+
+button:first-child {
+  *margin-left: 0;
 }
 
-button.active {
-  background-color: #111;
+button:hover,
+button:focus {
+  color: #333333;
+  text-decoration: none;
+  background-position: 0 -15px;
+  -webkit-transition: background-position 0.1s linear;
+     -moz-transition: background-position 0.1s linear;
+       -o-transition: background-position 0.1s linear;
+          transition: background-position 0.1s linear;
 }
 
+button:focus {
+  outline: thin dotted #333;
+  outline: 5px auto -webkit-focus-ring-color;
+  outline-offset: -2px;
+}
+
+button:active {
+  background-image: none;
+  outline: 0;
+  -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
+     -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
+          box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+