1

/*

     2

 * Form layout

     3

 *

     4

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

     5

 */

     6

     7

/* General form errors, and field-specific error lists will display in red */

     8

form ul.errors,

     9

form ul.errors a

    10

{

    11

    list-style-type: disc;

    12

    color: #C00;

    13

    14

    margin: 0em 1em 1em;

    15

}

    16

    17

fieldset

    18

{

    19

    /* A fieldset will not be completely full-width, and will be vertically separated from adjacent fieldsets*/

    20

    margin: 1em 20% 1em 0em;

    21

    22

    /* A fieldset shall not have any padding of its own, as we position the elements iniside it */

    23

    padding: 0em;

    24

    25

    border: thin solid #aaa;

    26

}

    27

    28

/* A fieldset's legend will look similar to a h2 element, except included as part of the frame */

    29

fieldset legend

    30

{

    31

    width: 100%;

    32

    33

    font-size: large;

    34

    font-weight: bold;

    35

    36

    margin: 0em 1em;

    37

    padding: 0.5em;

    38

    39

    background-color: #e5e5e5;

    40

    41

    border: 1px dashed #c5c5c5;

    42

}

    43

    44

/* A fieldset will be internally structured using a list, that is not itself visible */

    45

fieldset ol

    46

{

    47

    list-style-type: none;

    48

    49

    margin: 0px;

    50

    51

    /* Recreate padding removed from fieldset */

    52

    padding: 0em 1em;

    53

    54

    width: 100%;

    55

}

    56

    57

/* Fields inside a fieldset will be vertically separated */

    58

fieldset ol li

    59

{

    60

    padding: 1em 1em 0em;

    61

    62

    border-top: 1px solid #c5c5c5;

    63

}

    64

    65

fieldset ol li:first-child

    66

{

    67

    border-top: none;

    68

}

    69

    70

/* The field identifier displays above the field itself, and is visually weighted, but smaller than the fieldset legend */

    71

fieldset label

    72

{

    73

    display: block;

    74

    75

    font-weight: bold;

    76

    font-size: small;

    77

}

    78

    79

/* A <strong> inside the label is an error message */

    80

fieldset label strong

    81

{

    82

    color: #C00;

    83

    84

    text-transform: upppercase;

    85

}

    86

    87

/* The field element are consistently aligned */

    88

form input,

    89

form textarea

    90

{

    91

    width: 40%;

    92

    93

    border: thin solid #444;

    94

    padding: 4px;

    95

}

    96

    97

/* A field that failed validation is highlighted */

    98

form .failed input,

    99

form .failed textarea

   100

{

   101

    border: thin solid red;

   102

}

   103

   104

form select,

   105

form input[type=submit]

   106

{

   107

    width: 30%;

   108

   109

    border: auto;

   113

}

   114

   115

/* Field's descriptive text */

   116

fieldset p

   117

{

   118

    margin: 0.5em;

   119

   120

    font-style: italic;

   121

    font-size: x-small;

   122

}

   123

   124