/*
 * Form layout
 *
 * Inspiration taken from http://articles.sitepoint.com/article/fancy-form-design-css
 */

/* 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 0em;

    /* 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 ol
{
    list-style-type: none;

    margin: 0px;
    
    /* Recreate padding removed from fieldset */
    padding: 0em 1em;

    width: 100%;
}

/* Fields inside a fieldset will be vertically separated */
fieldset ol > li
{
    padding: 0.5em 1em;

    border-top: 1px solid #c5c5c5;
}

fieldset ol > 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;
}