/*
* 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;
}