dweb 0.5: handlers, fixes, tidying.
[public/www-new.git] / pub / style / style.css
1 /* General style guidelines:\r
2     - All font-size at least 14px (recommended 16px)\r
3     - Line-height: 1.5 for paragraph body, 1.1 for header\r
4 */\r
5 \r
6 body {\r
7   color: black;\r
8   background-color: white;\r
9   font-family: Helvetica, Verdana, Arial, 'Liberation Sans', FreeSans, sans-serif;\r
10   font-size: 84%;  /* Enables font size scaling in MSIE */\r
11   margin: 0;\r
12   padding: 0;\r
13 }\r
14 \r
15 #container {\r
16   position: relative;\r
17   margin: 20px auto;\r
18   width: 900px;\r
19   text-align: left;\r
20 }\r
21 \r
22 /* # Header # */\r
23 .superHeader {\r
24   color: white;\r
25   background-color: rgb(100,135,220);\r
26   height: 1.6em;\r
27 }\r
28 \r
29 .superHeader img { vertical-align: bottom; }\r
30 \r
31 .superHeader a {\r
32   color: white;\r
33   background-color: transparent;\r
34   font-size: 91%;\r
35   margin: 0;\r
36   padding: 0 0.5ex 0 0.25ex;\r
37 }\r
38 \r
39 a { text-decoration: none; }\r
40 a:hover { text-decoration: underline; }\r
41 \r
42 .superHeader div {\r
43   position: absolute;\r
44   top: 0.40ex;\r
45 }\r
46 \r
47 .superHeader .left { left: 0.4em; }\r
48 .superHeader .right { right: 0.4em; }\r
49 \r
50 .midHeader {\r
51   color: rgb(39,78,144);\r
52   background-color: rgb(140,170,230);\r
53   background-color: #ff6d06;\r
54   border: solid 0 black;\r
55   border-width: 2px 0;\r
56 }\r
57 \r
58 .headerTitle {\r
59   color: black;\r
60   font-size: 233%;\r
61   font-weight: normal;\r
62   margin: 0 0 0 4mm;\r
63   padding: 0.25ex 0;\r
64 }\r
65 #headerSubTitle {\r
66   font-size: 50%;\r
67   font-style: italic;\r
68   margin-left: 1em;\r
69 }\r
70 \r
71 .headerTitle a { color: black; }\r
72 .headerTitle a:hover { text-decoration: none; }\r
73 \r
74 .subHeader {\r
75   display: none;\r
76   color: white;\r
77   background-color: rgb(0,51,153);\r
78   margin: 0;\r
79   padding: 1ex 1ex 1ex 1.5mm;\r
80 }\r
81 \r
82 .subHeader a {\r
83   color: white;\r
84   background-color: transparent;\r
85   font-weight: bold;\r
86   margin: 0;\r
87   padding: 0 0.75ex 0 0.5ex;\r
88 }  \r
89 \r
90 .superHeader .highlight, .subHeader .highlight {\r
91   color: rgb(253,160,91);\r
92   background-color: transparent;\r
93 }\r
94 \r
95 /* # Horiz-side # */\r
96 #horiz-side-bar {\r
97   width:100%;\r
98   clear: both;\r
99   border: 0;\r
100   margin: 0;\r
101   padding: 0;\r
102 }\r
103 \r
104 #horiz-side-bar ul {\r
105   margin: 0;\r
106   padding: 0.3em;\r
107   list-style-type: none;\r
108   list-style-image: none;\r
109   background: #eeeeee;\r
110   border: 0;\r
111 }\r
112 \r
113 #horiz-side-bar ul:nth-child(even) { \r
114   background-color: #dddddd;\r
115 }\r
116 \r
117 #horiz-side-bar li {\r
118   display: inline;\r
119   white-space: nowrap;\r
120   line-height: 1.6em;\r
121 }\r
122 \r
123 #horiz-side-bar li.thisPage a {\r
124   color: black!important;\r
125   font-weight: bold;\r
126 }\r
127 #horiz-side-bar ul li a {\r
128   margin: 0;\r
129   padding: 0.1em 1ex 0.1em 1ex;\r
130   color: #336699;\r
131   background-color: transparent;\r
132   text-decoration: none;\r
133   font-size: 1em;\r
134   border: 0;\r
135 }\r
136 \r
137 #horiz-side-bar ul li a:hover {\r
138   color: black;\r
139   text-decoration: none;\r
140   text-transform: none;\r
141 }\r
142 \r
143 \r
144 /* # Side # */\r
145 #side-bar {\r
146   width: 16em;\r
147   float: left;\r
148   clear: left;\r
149   border-right: 1px solid #ddd;\r
150 }\r
151 \r
152 #side-bar div {\r
153   border-bottom: 1px solid #ddd;\r
154 }\r
155 \r
156 .sideBarTitle {\r
157   font-weight: bold;\r
158   margin: 0 0 0.5em 2mm;\r
159   padding: 1em 0 0 0;\r
160 }\r
161 \r
162 #side-bar ul {\r
163   list-style-type: none;\r
164   list-style-position: outside;\r
165   margin: 0;\r
166   padding: 0 0 0.3em 0;\r
167 }\r
168 \r
169 li ul {\r
170   padding-left: 0.6em !important;\r
171 }\r
172 \r
173 #side-bar li {\r
174   margin: 0;\r
175 }\r
176 \r
177 #side-bar a {\r
178   color: rgb(0,102,204);\r
179   background-color: transparent;\r
180   margin: 0;\r
181   padding: 0.25em 1ex 0.25em 2mm;\r
182   display: block;\r
183   text-transform: capitalize;\r
184   font-weight: bold!important;\r
185   font-size: 102%;\r
186   border-left: white solid 0.2em;\r
187 }\r
188 \r
189 #side-bar li.thisPage a {\r
190   color: black!important;\r
191   background-color: white;\r
192   font-style:italic;\r
193 }\r
194 \r
195 #side-bar a:hover {\r
196   color: white;\r
197   background-color: rgb(100,135,220);\r
198   border-left: black solid 0.2em;\r
199   text-decoration: none;\r
200 }\r
201 \r
202 .sideBarText {\r
203   line-height: 1.5em;\r
204   margin: 0 0 1em 0;\r
205   padding: 0 1.5ex 0 2.5mm;\r
206   display: block;\r
207 }\r
208 \r
209 #side-bar .sideBarText a {\r
210   margin: 0;\r
211   padding: 0;\r
212   display: inline;\r
213 }\r
214 \r
215 #side-bar .sideBarText a:hover {\r
216   color: rgb(0,102,204);\r
217   background-color: transparent;\r
218   text-decoration: none;\r
219 }\r
220 \r
221 \r
222 /* # Main Copy # */\r
223 #main-copy {\r
224   padding: 0.5mm 5mm 5mm 5mm;\r
225   color: black;\r
226   background-color: transparent;\r
227   text-align: justify;\r
228   line-height: 1.5em;\r
229   word-wrap: break-word;\r
230 }\r
231 \r
232 .main-copy-side-bar {\r
233   max-width: 70em;\r
234   margin: 0em 0 0 16em;\r
235   padding: 0.5mm 5mm 5mm 5mm;\r
236   border-left: 1px solid #ddd;\r
237 }\r
238 \r
239 #bodyText {\r
240   margin: 0 0 0 15.5em;\r
241   padding: 2mm 5mm 2mm 5mm;\r
242 }\r
243 \r
244 #main-copy p {\r
245   margin: 1em 1ex 1em 1ex !important; /* Need !important so troff-generated pages don't look totally squezed */\r
246   padding: 0;\r
247 }\r
248 \r
249 #main-copy a {\r
250   color: rgb(0,102,204);\r
251   background-color: transparent;\r
252 }\r
253 \r
254 #main-copy a:hover {\r
255   color:  rgb(100,135,220);\r
256 }\r
257 \r
258 #main-copy h1, #main-copy h2 {\r
259   color: rgb(0,102,204);\r
260   background-color: transparent;\r
261   font-size: 145.5%;\r
262   font-weight: bold;\r
263   margin: 2em 0 0 0;\r
264   padding: 0.5ex 0 0.5ex 0.6ex;\r
265   border-bottom: 2px solid rgb(0,102,204);\r
266 }\r
267 \r
268 #main-copy h2 {\r
269   font-size: 115.5%;\r
270   border-bottom: 1px solid rgb(0,102,204);\r
271 }\r
272 \r
273 #main-copy .topOfPage {\r
274   color: rgb(0,102,204);\r
275   background-color: transparent;\r
276   font-size: 91%;\r
277   font-weight: bold;\r
278   text-decoration: none;\r
279   margin: 3ex 1ex 0 0;\r
280   padding: 0;\r
281   float: right;\r
282 }\r
283 \r
284 dl {\r
285   margin: 1em 1ex 2em 1ex;\r
286   padding: 0;\r
287 }\r
288 \r
289 dt {\r
290   font-weight: bold;\r
291   margin: 0 0 0 0;\r
292   padding: 0;\r
293 }\r
294 \r
295 dd {\r
296   margin: 0 0 2em 2em;\r
297   padding: 0;\r
298 }\r
299 \r
300 \r
301 /* # Footer # */\r
302 #footer {\r
303   color: white;\r
304   background-color: rgb(100,135,220);\r
305   padding: 1em;\r
306   clear: both;\r
307 }\r
308 \r
309 #footer .left {\r
310   text-align: left;\r
311   line-height: 1.55em;\r
312   float: left;\r
313   clear: left;\r
314 }\r
315 \r
316 #footer .right {\r
317   text-align: right;\r
318   line-height: 1.45em;\r
319 }\r
320 \r
321 #footer a {\r
322   color: white;\r
323   background-color: transparent;\r
324 }\r
325 \r
326 \r
327 /* GENERAL */\r
328 \r
329 table {\r
330   border: solid 1px black;\r
331 }\r
332 th {\r
333   background-color: #abc;\r
334   border: solid 1px black;\r
335    text-align: center;\r
336 }\r
337 td {\r
338   background-color: #def;\r
339   border: solid 1px black;\r
340 }\r
341 \r
342 hr {\r
343   border-width: 0px 0px 0.1em 0px;\r
344   border-color: black;\r
345 }\r
346 \r
347 acronym, .titleTip {\r
348   border-bottom: 1px solid #ddd;\r
349   cursor: help;\r
350   margin: 0;\r
351   padding: 0 0 0.4px 0;\r
352 }\r
353 \r
354 pre {\r
355   margin-left: 2em; \r
356   font-size: 1.2em;\r
357 }\r
358 \r
359 blockquote {\r
360   border-left: 1px solid blue;\r
361   font-style: italic;\r
362 }\r
363 \r
364 .smallCaps {\r
365   font-size: 110%;\r
366   font-variant: small-caps;\r
367 }\r
368 \r
369 .doNotDisplay { display: none; }\r
370 \r
371 \r
372 .notify_errors,\r
373 .notify_notes,\r
374 .notify_success { padding: .8em; margin-bottom: 1em; border: 2px solid #ddd; }\r
375  \r
376 .notify_errors { background: #FBE3E4; color: #8a1f11; border-color: #FBC2C4; }\r
377 .notify_notes { background: #FFF6BF; color: #514721; border-color: #FFD324; }\r
378 .notify_success { background: #E6EFC2; color: #264409; border-color: #C6D880; }\r
379 .notify_errors a { color: #8a1f11; }\r
380 .notify_notes a { color: #514721; }\r
381 .notify_success a { color: #264409; }\r
382 \r
383 \r
384 /* # Page/Handler specific # */\r
385 h1.dir-list-head, ul.dir-list {\r
386   text-transform: capitalize;\r
387   font-weight: bold;\r
388 }\r
389 ul.sitemap-list a {\r
390   text-transform: capitalize;\r
391 }\r