--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/static/dhcp/forms.css	Sun Feb 10 12:07:28 2013 +0200
@@ -0,0 +1,144 @@
+/*
+ * Form layout
+ *
+ * Inspiration taken from http://articles.sitepoint.com/article/fancy-form-design-css
+ *      Since turned into a book? :)
+ */
+
+/* General form errors, and field-specific error lists will display in red */
+form ul.errors,
+form ul.errors a
+{
+    list-style-type: disc;
+    color: #C00;
+
+    margin: 0em 1em 1em;
+}
+
+fieldset
+{
+    /* A fieldset will not be completely full-width, and will be vertically separated from adjacent fieldsets*/
+    margin: 1em 20% 1em 1em;
+
+    /* A fieldset shall not have any padding of its own, as we position the elements iniside it */
+    padding: 0em;
+
+    border: thin solid #aaa;
+}
+
+/* A fieldset's legend will look similar to a h2 element, except included as part of the frame */
+fieldset legend
+{
+    width: 100%;
+
+    font-size: large;
+    font-weight: bold;
+
+    margin: 0em 1em;
+    padding: 0.5em;
+
+    background-color: #e5e5e5;
+
+    border: 1px dashed #c5c5c5;
+}
+
+/* A fieldset will be internally structured using a list, that is not itself visible */
+fieldset ul
+{
+    list-style-type: none;
+
+    margin: 0px;
+    
+    /* Recreate padding removed from fieldset */
+    padding: 0em 1em;
+}
+
+/* Fields inside a fieldset will be vertically separated */
+fieldset ul > li
+{
+    padding: 0.5em 1em;
+
+    border-top: 1px solid #c5c5c5;
+}
+
+fieldset ul > li:first-child
+{
+    border-top: none;
+}
+
+/* The field identifier displays above the field itself, and is visually weighted, but smaller than the fieldset legend */
+fieldset label,
+fieldset h3         /* used in place of labels for non-input fields... */
+{
+    display: block;
+
+    margin: 0.2em 0em;
+    
+    font-weight: bold;
+    font-size: small;
+}
+
+/* A <strong> inside the label is an error message */
+fieldset label strong
+{
+    color: #C00;
+
+    text-transform: upppercase;
+}
+
+/* The field element are consistently aligned */
+form input,
+form textarea
+{
+    width: 40%;
+
+    border: thin solid #444;
+    padding: 4px;
+}
+
+/* A multi-line text edit widget is wide enough for lots of text */
+form textarea
+{
+    width: 80%;
+}
+
+/* A field that failed validation is highlighted */
+form .failed input,
+form .failed textarea
+{
+    border: thin solid red;
+}
+
+form select,
+form input[type=submit]
+{
+    width: 30%;
+
+    border: auto;
+}
+
+form input[type=reset]
+{
+    width: auto;
+
+    font-size: x-small;
+
+    float: right;
+}
+
+/* Field's descriptive text */
+fieldset p
+{
+    margin: 0.8em;
+
+    font-style: italic;
+    font-size: x-small;
+}
+
+/* Static fields */
+fieldset div.value
+{
+    /* Value is visually indented */
+    margin-left: 2em;
+}
+