4 files changed, 66 insertions, 37 deletions
diff --git a/public/404.html b/public/404.html
index 16d8fcbca34..33325890b32 100644
--- a/public/404.html
+++ b/public/404.html
@@ -2,22 +2,12 @@
 <html>
 <head>
   <title>The page you were looking for doesn't exist (404)</title>
-  <style type="text/css">
-    body { background-color: #EAEAEA; color: #666; text-align: center; font-family: arial, sans-serif; }
-    div.dialog {
-      width: 600px;
-      padding: 0 4em;
-      margin: 4em auto 0 auto;
-    }
-    h1 { font-size: 48px; color: #444; line-height: 1.5em; }
-    h2 { font-size: 24px; color: #666; line-height: 1.5em; }
-  </style>
+  <link href="static.css" media="screen" rel="stylesheet" type="text/css" />
 </head>
 
 <body>
-  <!-- This file lives in public/404.html -->
-  <div class="dialog">
-    <h1>404</h1>
+  <h1>404</h1>
+  <div class="alert-message block-message error">
     <h2>The page you were looking for doesn't exist.</h2>
     <p>You may have mistyped the address or the page may have moved.</p>
   </div>
diff --git a/public/422.html b/public/422.html
index 24532664370..8b19ea89ce5 100644
--- a/public/422.html
+++ b/public/422.html
@@ -2,22 +2,13 @@
 <html>
 <head>
   <title>The change you wanted was rejected (422)</title>
-  <style type="text/css">
-    body { background-color: #EAEAEA; color: #666; text-align: center; font-family: arial, sans-serif; }
-    div.dialog {
-      width: 600px;
-      padding: 0 4em;
-      margin: 4em auto 0 auto;
-    }
-    h1 { font-size: 48px; color: #444; line-height: 1.5em; }
-    h2 { font-size: 24px; color: #666; line-height: 1.5em; }
-  </style>
+  <link href="static.css" media="screen" rel="stylesheet" type="text/css" />
 </head>
 
 <body>
   <!-- This file lives in public/422.html -->
-  <div class="dialog">
-    <h1>422</h1>
+  <h1>422</h1>
+  <div class="alert-message block-message error">
     <h2>The change you wanted was rejected.</h2>
     <p>Maybe you tried to change something you didn't have access to.</p>
   </div>
diff --git a/public/500.html b/public/500.html
index b1d544647a1..36e14b802ee 100644
--- a/public/500.html
+++ b/public/500.html
@@ -2,22 +2,13 @@
 <html>
 <head>
   <title>We're sorry, but something went wrong (500)</title>
-  <style type="text/css">
-    body { background-color: #EAEAEA; color: #666; text-align: center; font-family: arial, sans-serif; }
-    div.dialog {
-      width: 600px;
-      padding: 0 4em;
-      margin: 4em auto 0 auto;
-    }
-    h1 { font-size: 48px; color: #444; line-height: 1.5em; }
-    h2 { font-size: 24px; color: #666; line-height: 1.5em; }
-  </style>
+  <link href="static.css" media="screen" rel="stylesheet" type="text/css" />
 </head>
 
 <body>
   <!-- This file lives in public/500.html -->
-  <div class="dialog">
-    <h1>500</h1>
+  <h1>500</h1>
+  <div class="alert-message block-message error">
     <h2>We're sorry, but something went wrong.</h2>
     <p>We've been notified about this issue and we'll take a look at it shortly.</p>
   </div>
diff --git a/public/static.css b/public/static.css
new file mode 100644
index 00000000000..6090d7b2abb
--- /dev/null
+++ b/public/static.css
@@ -0,0 +1,57 @@
+body {  color: #666; text-align: center; font-family: arial, sans-serif; margin:0; padding:0; }
+h1 { font-size: 48px; color: #444; line-height: 1.5em; }
+h2 { font-size: 24px; color: #666; line-height: 1.5em; }
+
+.alert-message {
+  position: relative;
+  padding: 7px 15px;
+  margin-bottom: 18px;
+  color: #404040;
+  background-color: #eedc94;
+  background-repeat: repeat-x;
+  background-image: -khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));
+  background-image: -moz-linear-gradient(top, #fceec1, #eedc94);
+  background-image: -ms-linear-gradient(top, #fceec1, #eedc94);
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94));
+  background-image: -webkit-linear-gradient(top, #fceec1, #eedc94);
+  background-image: -o-linear-gradient(top, #fceec1, #eedc94);
+  background-image: linear-gradient(top, #fceec1, #eedc94);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFCEEC1', endColorstr='#FFEEDC94', GradientType=0);
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+  border-color: #eedc94 #eedc94 #e4c652;
+  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) fadein(rgba(0, 0, 0, 0.1), 15%);
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+  border-width: 1px;
+  border-style: solid;
+  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
+  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
+}
+.alert-message .close {
+  margin-top: 1px;
+  *margin-top: 0;
+}
+.alert-message a {
+  font-weight: bold;
+  color: #404040;
+}
+.alert-message.danger p a, .alert-message.error p a, .alert-message.success p a, .alert-message.info p a {
+  color: #404040;
+}
+.alert-message h5 {
+  line-height: 18px;
+}
+.alert-message p {
+  margin-bottom: 0;
+}
+.alert-message div {
+  margin-top: 5px;
+  margin-bottom: 2px;
+  line-height: 28px;
+}
+
+.alert-message.block-message.error {
+  background: #FDDFDE;
+  border-color: #FBC7C6;
+}
+