Add styles for examples

Author: Rafael J. Staib

JSteps.v11.suo

@@ -75,49 +75,68 @@
     float: left;
 }
 
-.wizard > .steps a
+.wizard > .steps a,
+.wizard > .steps a:hover,
+.wizard > .steps a:active
 {
     display: block;
     width: auto;
-    height: 2.5em;
-    padding: 0.5em 1em;
-    background: #9ddcff;
-    color: #2268b2;
+    margin: 0 0.5em;
+    padding: 1em 1em;
+    text-decoration: none;
+
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
 }
 
-.wizard > .steps .disabled a
+.wizard > .steps .disabled a,
+.wizard > .steps .disabled a:hover,
+.wizard > .steps .disabled a:active
 {
-    background: #9ddcff;
-    color: #fff;
+    background: #eee;
+    color: #aaa;
     cursor: default;
 }
 
-.wizard > .steps .current a
+.wizard > .steps .current a,
+.wizard > .steps .current a:hover,
+.wizard > .steps .current a:active
 {
-    background: #2879d0;
+    background: #2184be;
     color: #fff;
     cursor: default;
 }
 
-.wizard > .steps .done a
+.wizard > .steps .done a,
+.wizard > .steps .done a:hover,
+.wizard > .steps .done a:active
 {
-    background: #9ddcff;
-    color: #2268b2;
+    background: #9dc8e2;
+    color: #fff;
 }
 
-.wizard > .steps .error a
+.wizard > .steps .error a,
+.wizard > .steps .error a:hover,
+.wizard > .steps .error a:active
 {
-    background: #f00;
-    color: #474747;
+    background: #ff3111;
+    color: #fff;
 }
 
 .wizard > .content
 {
-    position: relative;
+    background: #eee;
     display: block;
-    width: 100%;
-    height: 400px;
+    margin: 0.5em;
+    min-height: 30em;
     overflow: hidden;
+    position: relative;
+    width: auto;
+
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
 }
 
 .wizard > .content > .body
@@ -126,7 +145,7 @@
     position: absolute;
     width: 100%;
     height: 100%;
-    padding: 0.5em;
+    padding: 1em;
 }
 
 .wizard > .content > .body ul
@@ -160,18 +179,18 @@
 
 .wizard > .content > .body label.error
 {
-    font-size: .85em;
-    color: #8a1f11; 
+    color: #8a1f11;
+    display: inline-block;
+    margin: 0 0 1em 1.5em;
+    vertical-align: middle;
 }
 
 .wizard > .actions
 {
     position: relative;
     display: block;
-    width: 100%;
-    height: 2.5em;
     text-align: right;
-    margin-top: 1em;
+    width: 100%;
 }
 
 .wizard > .actions > ul
@@ -185,18 +204,27 @@
     margin: 0 0.5em;
 }
 
-.wizard > .actions a
+.wizard > .actions a,
+.wizard > .actions a:hover,
+.wizard > .actions a:active
 {
-    display: block;
+    background: #2184be;
     color: #fff;
-    background: #2879d0;
-    height: 2em;
-    padding: 0.5em;
+    display: block;
+    padding: 0.5em 1em;
+    text-decoration: none;
+
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
 }
 
-.wizard > .actions .disabled a
+.wizard > .actions .disabled a,
+.wizard > .actions .disabled a:hover,
+.wizard > .actions .disabled a:active
 {
-    background: #9ddcff;
+    background: #eee;
+    color: #aaa;
 }
 
 .wizard > .loading