JasonWoof Got questions, comments, patches, etc.? Contact Jason Woofenden
a21b3676e63891c5668bc29aa4dae32299b78db6
[wfpl.git] / metaform / style.less
1 // dimensions
2 @site-width: 940px;
3 @nav-width: 200px;
4 @site-gutter-width: 18px;
5 @site-main-body-width: @site-width - 2*@site-gutter-width - @nav-width;
6
7 // colors
8 @site-header-color: #ddf;
9 @nav-color:    #dff;
10 @site-body-color:   #fff;
11 @site-window-color: #eee;
12 @site-footer-color: #ddf;
13 @site-gutter-color: #fff;
14
15 header, hgroup, section, footer, aside, nav, article, figure, img {
16         display: block;
17 }
18
19 body {
20         margin: 0;
21         padding: 0;
22         color: #000;
23         background: @site-window-color;
24         font: 14px "Verdana", sans-serif;
25 }
26
27 #centerer {
28         position: relative;
29         background: @nav-color;
30         margin: 15 auto;
31         width: @site-width;
32         -moz-box-shadow: 2px 2px 15px #777;
33         -webkit-box-shadow: 2px 2px 15px #777;
34         box-shadow: 2px 2px 13px #777;
35 }
36
37 header {
38         width: @site-width;
39         height: 100px;
40         background: @site-header-color;
41 }
42
43 @nav-padding: 10px;
44 nav {
45         float: left;
46         width: @nav-width - 2*@nav-padding;
47         padding: @nav-padding;
48         background: @nav-color;
49         a {
50                 display: block;
51         }
52 }
53
54 #main-body {
55         float: left;
56         width: @site-main-body-width;
57         padding: @site-gutter-width @site-gutter-width @site-gutter-width @site-gutter-width;
58         background: @site-body-color;
59 }
60
61 footer {
62         clear: both;
63         width: @site-width;
64         height: 50px;
65         background: @site-footer-color;
66 }
67
68 #wfpl_messages {
69         border: 2px solid red;
70         background: #fbb;
71         padding: 5px;
72         margin: 20px 0px;
73         p {
74                 font-size: 120%;
75                 padding: 5px;
76                 margin: 0px;
77         }
78         hr {
79                 height: 1px;
80         }
81 }
82 .caption {
83         margin-top: 15px;
84         font-weight: bold;
85 }
86 .field {
87         margin-bottom: 15px;
88 }
89 div.field_notes {
90         font-size: 12px;
91         line-height: 16px;
92 }
93 fieldset {
94         border: 1px dotted black;
95         padding: 0 15px 15px 15px;
96         margin: 15px 0;
97         position: relative;
98 }
99 legend {
100         padding: 0 6px;
101         font-weight: bold;
102 }
103 div.error {
104         border: 2px solid red;
105         padding: 13px;
106         margin: 20px;
107         background: #fdd;
108 }
109
110 /* hack so that vertical margins are only between siblings for the most part */
111 td > :first-child,
112 th > :first-child,
113 legend + *,
114 article > :first-child,
115 section > :first-child,
116 nav > :first-child,
117 div > :first-child,
118 .first {
119         margin-top: 0px;
120 }
121 td > :last-child,
122 th > :last-child,
123 fieldset > :last-child,
124 article > :last-child,
125 section > :last-child,
126 nav > :last-child,
127 div > :last-child,
128 .last {
129         margin-bottom: 0px;
130 }