1

/*

     2

 * Form layout

     3

 *

     4

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

     5

 */

     6

     7

fieldset

     8

{

     9

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

    10

    margin: 1em 20% 1em 0em;

    11

    12

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

    13

    padding: 0em;

    14

    15

    border: thin solid #aaa;

    16

}

    17

    18

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

    19

fieldset legend

    20

{

    21

    width: 100%;

    22

    23

    font-size: large;

    24

    font-weight: bold;

    25

    26

    margin: 0em 1em;

    27

    padding: 0.5em;

    28

    29

    background-color: #e5e5e5;

    30

    31

    border: 1px dashed #c5c5c5;

    32

}

    33

    34

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

    35

fieldset ol

    36

{

    37

    list-style-type: none;

    38

    39

    margin: 0px;

    40

    41

    /* Recreate padding removed from fieldset */

    42

    padding: 0em 1em;

    43

    44

    width: 100%;

    45

}

    46

    47

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

    48

fieldset ol li

    49

{

    50

    padding: 1em 1em 0em;

    51

    52

    border-top: 1px solid #c5c5c5;

    53

}

    54

    55

fieldset ol li:first-child

    56

{

    57

    border-top: none;

    58

}

    59

    60

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

    61

fieldset label

    62

{

    63

    display: block;

    64

    65

    font-weight: bold;

    66

    font-size: small;

    67

}

    68

    69

/* The field element are consistently aligned */

    70

form input,

    71

form textarea

    72

{

    73

    width: 40%;

    74

    75

    border: thin solid #444;

    76

    padding: 4px;

    77

}

    78

    79

/* Field's descriptive text */

    80

fieldset p

    81

{

    82

    margin: 0.5em;

    83

    84

    font-style: italic;

    85

    font-size: x-small;

    86

}

    87

    88