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