Form styling by @krasimir

app/assets/stylesheets/forms.css.scss

@@ -0,0 +1,74 @@
+#main {
+    font-size: 16px;
+}
+h1 {
+    margin: 0 0 1em 0;
+    font-size: 2em;
+}
+.input {
+    position: relative;
+    margin: 0 0 1em 0;
+    border-top: 0.1em dotted #999;
+    padding: 1em 0;
+}
+.input label {
+    font-size: 1em;
+    display: block;
+    width: 12em;
+    float: left;
+}
+.input input, .input textarea, .input select {
+    font-size: 1em;
+    width: 20em;
+    float: left;
+}
+.input textarea {
+    height: 8em;
+}
+.input .hint, .input .error {
+    display: block;
+    clear: both;
+    font-size: 0.75em;
+    font-style: italic;
+    width: 20em;
+    margin: 0 0 0 16em;
+    padding: 1em 0 0 0;
+}
+.input .error {
+    font-style: normal;
+    padding: 1em 0 0 0;
+    color: #F00;
+}
+.input .error::before {
+    content: "⇧";
+    display: inline-block;
+    font-size: 2em;
+    margin: 0 0.2em 0 0;
+    transform: translate(0, 0.1em);
+}
+.btn {
+    display: block;
+    margin: 2em 0 0 13em;
+}
+
+/* styling of the button */
+.btn {
+    background: #233e83;
+    padding: 0.4em 0.8em;
+    border-radius: 0.2em;
+    color: #FFF;
+    border: none;
+    border-bottom: 0.2em solid #7A95DC;
+    cursor: pointer;
+    transition: background 200ms, border 200ms, transform 200ms;
+    -webkit-transition: background 200ms, border 200ms, transform 200ms;
+}
+.btn:hover {
+    background: #152551;
+}
+.btn:active {
+    background: #597AD2;
+    border-bottom: 0.2em solid #000;
+    transform: translate(0, 0.1em);
+    -webkit-transform: translate(0, 0.1em);
+}