add icons+CSS to mitigate accessibility issues (red/green)

Changes

@@ -4,6 +4,7 @@ Revision history for {{$dist->name}}
   - POD update to clarify intent of validation
   - fix Javascript to work on older versions of IE
   - add Javascript option to set intial focus
+  - add CSS + icons to improve accessibility
 
 1.000     2011-04-13 12:26:35 Pacific/Auckland
   - Remove redundant reference to Try::Tiny

html/index.html

@@ -45,7 +45,7 @@ <h1>CouponCode Test Page</h1>
     <p>Test Form:</p>
 
     <form id="demo-form">
-      <p>Please enter your registration code:</p>
+      <p>Please enter your coupon code:</p>
       <p><input id="registration-code" name="registration_code" />
       <input type="submit" value="Continue" disabled="disabled" /></p>
     </form>

html/jquery.couponcode.css

@@ -2,15 +2,25 @@
 input.jq-couponcode-part {
   font-family: monospace;
   width: 3em;
-  text-align: center;
+  text-align: right;
+  padding: 2px 4px 0px 16px;
 }
 
 input.jq-couponcode-good {
   background-color: #77ff77;
+  background-image: url(cc_icons.png);
+  background-position: -5px -56px;
+}
+
+input.jq-couponcode-good-nohighlight {
+  text-align: center;
+  padding: 2px 10px 2px 10px;
 }
 
 input.jq-couponcode-bad {
   background-color: #ff7777;
+  background-image: url(cc_icons.png);
+  background-position: -5px -103px;
 }
 
 span.jq-couponcode-sep {

html/style.css

@@ -15,7 +15,7 @@ h1 {
 }
 
 div.container {
-  width: 460px;
+  width: 490px;
   margin: 30px auto 100px auto;
   border: 1px solid #cccccc;
   padding: 1.0em 1.8em;
@@ -29,7 +29,7 @@ form {
 }
 
 form input {
-  font-size: 24px;
+  font-size: 22px;
 }
 
 input#registration-code {