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

    59

{

    60

    padding: 0.5em 1em;

    61

    62

    border-top: 1px solid #c5c5c5;

    63

}

    64

    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

fieldset h3         /* used in place of labels for non-input fields... */

    73

{

    74

    display: block;

    75

    76

    margin: 0.2em 0em;

    77

    78

    font-weight: bold;

    79

    font-size: small;

    80

}

    81

    82

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

    83

fieldset label strong

    84

{

    85

    color: #C00;

    86

    87

    text-transform: upppercase;

    88

}

    89

    90

/* The field element are consistently aligned */

    91

form input,

    92

form textarea

    93

{

    94

    width: 40%;

    95

    96

    border: thin solid #444;

    97

    padding: 4px;

    98

}

    99

   100

/* A multi-line text edit widget is wide enough for lots of text */

   101

form textarea

   102

{

   103

    width: 80%;

   104

}

   105

   106

/* A field that failed validation is highlighted */

   107

form .failed input,

   108

form .failed textarea

   109

{

   110

    border: thin solid red;

   111

}

   112

   113

form select,

   114

form input[type=submit]

   115

{

   116

    width: 30%;

   117

   118

    border: auto;

   119

}

   120

   121

form input[type=reset]

   122

{

   123

    width: auto;

   124

   125

    font-size: x-small;

   126

   127

    float: right;

   128

}

   129

   130

/* Field's descriptive text */

   131

fieldset p

   132

{

   133

    margin: 0.8em;

   134

   135

    font-style: italic;

   136

    font-size: x-small;

   137

}

   138

   139

/* Static fields */

   140

fieldset div.value

   141

{

   142

    /* Value is visually indented */

   143

    margin-left: 2em;

   144

}

   145