Merge branch 'master' of https://github.com/j3parker/dweb
[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 accent colour:\r
6   #E2AA00\r
7 dark blue:\r
8   #2724AE\r
9 */\r
10 \r
11 body {\r
12   background-image:url('background.png');\r
13   text-align: center;\r
14   color: black;\r
15   background-color: white;\r
16   font-family: Helvetica, Verdana, Arial, 'Liberation Sans', FreeSans, sans-serif;\r
17   font-size: 84%;  /* Enables font size scaling in MSIE */\r
18   margin: 0;\r
19   padding: 0;\r
20 }\r
21 \r
22 #container {\r
23   position: relative;\r
24   margin: 0 auto;\r
25   max-width: 70em;\r
26   text-align: left;\r
27 }\r
28 \r
29 #logo {\r
30   height: 1em;\r
31   border: none;\r
32   margin:0;\r
33   padding: 0;\r
34 }\r
35 \r
36 /* # Header # */\r
37 .superHeader {\r
38   color: #777;\r
39   background-color: #fff;\r
40   height: 1.6em;\r
41 }\r
42 \r
43 .superHeader img { vertical-align: bottom; }\r
44 \r
45 .superHeader a {\r
46   color: #777;\r
47   background-color: transparent;\r
48   font-size: 91%;\r
49   margin: 0;\r
50   padding: 0 0.5ex 0 0.25ex;\r
51 }\r
52 \r
53 a { text-decoration: none; }\r
54 a:hover { text-decoration: underline; }\r
55 \r
56 .superHeader div {\r
57   position: absolute;\r
58   top: 0.40ex;\r
59 }\r
60 \r
61 .superHeader .left { left: 0.4em; }\r
62 .superHeader .right { right: 0.4em; }\r
63 \r
64 .midHeader {\r
65   color: #fff;\r
66   background-color: #2724AE;\r
67   border-bottom: solid 2px #E2AA00;\r
68 }\r
69 \r
70 .headerTitle {\r
71   color: #fff;\r
72   font-size: 233%;\r
73   font-weight: bold;\r
74   margin: 0 0 0 4mm;\r
75   padding: 0.2em 0;\r
76   height: 1em;\r
77 }\r
78 #headerSubTitle {\r
79 /*\r
80   color: #D2D1FA;\r
81 */\r
82 \r
83   color: #fff;\r
84   font-size: 50%;\r
85   vertical-align: 0.6em;\r
86 /*\r
87   font-style: italic;\r
88 */\r
89 }\r
90 \r
91 .headerTitle a { color: #fff; \r
92 margin: 0;\r
93 padding: 0;}\r
94 .headerTitle a:hover { text-decoration: none; }\r
95 \r
96 .subHeader {\r
97   display: none;\r
98   color: white;\r
99   background-color: rgb(0,51,153);\r
100   margin: 0;\r
101   padding: 1ex 1ex 1ex 1.5mm;\r
102 }\r
103 \r
104 .subHeader a {\r
105   color: white;\r
106   background-color: transparent;\r
107   font-weight: bold;\r
108   margin: 0;\r
109   padding: 0 0.75ex 0 0.5ex;\r
110 }  \r
111 \r
112 .superHeader .highlight, .subHeader .highlight {\r
113   color: rgb(253,160,91);\r
114   background-color: transparent;\r
115 }\r
116 \r
117 /* # Horiz-side # */\r
118 #horiz-side-bar {\r
119   width:100%;\r
120   clear: both;\r
121   border: 0;\r
122   margin: 0;\r
123   padding: 0;\r
124 }\r
125 \r
126 #horiz-side-bar ul {\r
127   list-style-type: none;\r
128   list-style-position: outside;\r
129   padding: 0;\r
130   margin-top: 0;\r
131   margin-bottom: 0;\r
132   background-color: #ddd;\r
133   border-top: 2px solid #ddd;\r
134 }\r
135 \r
136 #horiz-side-bar ul:nth-child(even) { \r
137   background-color: #ccc;\r
138   border-top: 2px solid #ccc;\r
139 }\r
140 \r
141 /* about events etc. */\r
142 #horiz-side-bar ul:first-child {\r
143   background-color: transparent;\r
144   margin-top: 0.5em;\r
145   margin-bottom: 0.5em;\r
146   border-top: none;\r
147   padding-left: 0;\r
148 }\r
149 \r
150 #horiz-side-bar li {\r
151   display: inline;\r
152   white-space: nowrap;\r
153   line-height: 1.6em;\r
154 }\r
155 \r
156 #horiz-side-bar ul li a {\r
157   text-decoration: none;\r
158   color: #333;\r
159   padding: 0.2em 1ex 0.3em;\r
160   margin-right: 0.5em;\r
161   font-weight: bold;\r
162 }\r
163 \r
164 #horiz-side-bar ul li a:hover {\r
165   color: black;\r
166   background-color: #ccc;\r
167 }\r
168 #horiz-side-bar ul:nth-child(even) li a:hover {\r
169   background-color: #ddd;\r
170 }\r
171 \r
172 #horiz-side-bar ul:first-child li a {\r
173   display: inline-block;\r
174 /*\r
175   color: #fff;\r
176   background-color: #7584E4;\r
177 */\r
178 \r
179   border-left: 0.5em solid #ddd;\r
180 \r
181   text-decoration: none;\r
182   font-weight: bold!important;\r
183   font-size: 102%;\r
184   padding: 0.25em 1ex 0.25em 2mm;\r
185   padding-left: 0.3em;\r
186   margin-right: 1em;\r
187 /* fixed width tabby things\r
188   margin-right: 0;\r
189   width: 5.5em;\r
190 */\r
191 }\r
192 \r
193 #horiz-side-bar ul:first-child li a:hover {\r
194 /*\r
195   background-color: #2724AE;\r
196 */\r
197 \r
198   background-color: #eee;\r
199   border-left: 0.5em solid #E2AA00;\r
200 }\r
201   \r
202 \r
203 #horiz-side-bar ul li.thisPage a {\r
204   color: #222;\r
205   background-color: #ccc;\r
206 }\r
207 \r
208 #horiz-side-bar ul:nth-child(even) li.thisPage a {\r
209   background-color: #ddd;\r
210 }\r
211 \r
212 #horiz-side-bar ul:last-child li.thisPage a,\r
213 #horiz-side-bar ul:last-child li a:hover {\r
214   background-color: #f5f5f5;\r
215 }\r
216 \r
217 #horiz-side-bar ul:first-child li.thisPage a {\r
218 /*\r
219   color: #fff;\r
220   background-color: #2724AE;\r
221 */\r
222   border-left: 0.5em solid #2724AE;\r
223   background-color: #eee;\r
224 }\r
225 \r
226 \r
227 /* # Side # */\r
228 #side-bar {\r
229   width: 16em;\r
230   float: left;\r
231   clear: left;\r
232   border-right: 1px solid #ddd;\r
233 }\r
234 \r
235 #side-bar div {\r
236   border-bottom: 1px solid #ddd;\r
237 }\r
238 \r
239 .sideBarTitle {\r
240   font-weight: bold;\r
241   margin: 0 0 0.5em 2mm;\r
242   padding: 1em 0 0 0;\r
243 }\r
244 \r
245 #side-bar ul {\r
246   list-style-type: none;\r
247   list-style-position: outside;\r
248   margin: 0;\r
249   padding: 0 0 0.3em 0;\r
250 }\r
251 \r
252 li ul {\r
253   padding-left: 0.6em !important;\r
254 }\r
255 \r
256 #side-bar li {\r
257   margin: 0;\r
258 }\r
259 \r
260 #side-bar a {\r
261   color: #43547e;\r
262   background-color: transparent;\r
263   margin: 0;\r
264   padding: 0.25em 1ex 0.25em 2mm;\r
265   display: block;\r
266   text-transform: capitalize;\r
267   font-weight: bold!important;\r
268   font-size: 102%;\r
269   border-left: white solid 0.2em;\r
270 }\r
271 \r
272 #side-bar li.thisPage a {\r
273   color: black!important;\r
274   background-color: white;\r
275   font-style:italic;\r
276 }\r
277 \r
278 #side-bar a:hover {\r
279   color: white;\r
280   background-color: rgb(100,135,220);\r
281   border-left: black solid 0.2em;\r
282   text-decoration: none;\r
283 }\r
284 \r
285 .sideBarText {\r
286   line-height: 1.5em;\r
287   margin: 0 0 1em 0;\r
288   padding: 0 1.5ex 0 2.5mm;\r
289   display: block;\r
290 }\r
291 \r
292 #side-bar .sideBarText a {\r
293   margin: 0;\r
294   padding: 0;\r
295   display: inline;\r
296 }\r
297 \r
298 #side-bar .sideBarText a:hover {\r
299   color: #43547e;\r
300   background-color: transparent;\r
301   text-decoration: none;\r
302 }\r
303 \r
304 \r
305 /* # Main Copy # */\r
306 #main-copy {\r
307 /*\r
308  # border: 1px dotted gray;\r
309 */\r
310   padding: 0.5em 1em;\r
311   color: black;\r
312   background-color: #f5f5f5;\r
313   text-align: justify;\r
314   line-height: 1.6em;\r
315   max-width: 68em;\r
316   word-wrap: break-word;\r
317 }\r
318 \r
319 .main-copy-side-bar {\r
320   max-width: 70em;\r
321   margin: 0em 0 0 16em;\r
322   padding: 0.5mm 5mm 5mm 5mm;\r
323   border-left: 1px solid #ddd;\r
324 }\r
325 \r
326 #bodyText {\r
327   margin: 0 0 0 15.5em;\r
328   padding: 2mm 5mm 2mm 5mm;\r
329 }\r
330 \r
331 #main-copy p {\r
332   margin: 1em 1ex 1em 1ex !important; /* Need !important so troff-generated pages don't look totally squezed */\r
333   padding: 0;\r
334 }\r
335 \r
336 #main-copy a {\r
337   color: #2724AE;\r
338   color: #E2AA00;\r
339   color:  rgb(100,135,220);\r
340   text-decoration: underline;\r
341 /*\r
342   border-bottom: 1px solid rgb(100,135,220);\r
343 */\r
344   \r
345   background-color: transparent;\r
346 }\r
347 \r
348 #main-copy a:hover {\r
349   background-color: #eee;\r
350   color: #E2AA00;\r
351 /*\r
352   border-bottom: 2px solid #E2AA00;\r
353 */\r
354 }\r
355 \r
356 #main-copy h1, #main-copy h2 {\r
357   font-size: 145.5%;\r
358   font-weight: bold;\r
359   margin: 0;\r
360   padding: 0.5ex 0 0.5ex 0.6ex;\r
361   border-bottom: 2px solid #E2AA00;\r
362 }\r
363 \r
364 #main-copy h2 {\r
365   font-size: 115.5%;\r
366 }\r
367 \r
368 #main-copy h3 {\r
369   font-size: 90%;\r
370   color: #333;\r
371   padding-left: 0.6ex;\r
372 }\r
373 \r
374 #main-copy ul {\r
375   list-style-type: disc;\r
376   list-style-position: inside;\r
377 }\r
378 \r
379 #main-copy ol {\r
380 }\r
381 \r
382 #main-copy .topOfPage {\r
383   color: #43547e;\r
384   background-color: transparent;\r
385   font-size: 91%;\r
386   font-weight: bold;\r
387   text-decoration: none;\r
388   margin: 3ex 1ex 0 0;\r
389   padding: 0;\r
390   float: right;\r
391 }\r
392 \r
393 dl {\r
394   margin: 1em 1ex 2em 1ex;\r
395   padding: 0;\r
396 }\r
397 \r
398 dt {\r
399   font-weight: bold;\r
400   margin: 0 0 0 0;\r
401   padding: 0;\r
402 }\r
403 \r
404 dd {\r
405   margin: 0 0 2em 2em;\r
406   padding: 0;\r
407 }\r
408 \r
409 \r
410 /* # Footer # */\r
411 #footer {\r
412   color: white;\r
413   background-color: #2724AE;\r
414   padding: 0.25ex;\r
415   clear: both;\r
416   border-top: solid 2px #E2AA00;\r
417   margin-bottom: 1.6em;\r
418 }\r
419 \r
420 #footer .left {\r
421   text-align: left;\r
422   margin-left: 0.4em;\r
423   line-height: 1.55em;\r
424   float: left;\r
425   clear: left;\r
426 }\r
427 \r
428 #footer .right {\r
429   text-align: right;\r
430   line-height: 1.45em;\r
431 }\r
432 \r
433 #footer a {\r
434   color: white;\r
435   background-color: transparent;\r
436 }\r
437 \r
438 \r
439 /* GENERAL */\r
440 \r
441 table {\r
442   border: solid 1px black;\r
443 }\r
444 th {\r
445   background-color: #abc;\r
446   border: solid 1px black;\r
447    text-align: center;\r
448 }\r
449 td {\r
450   background-color: #def;\r
451   border: solid 1px black;\r
452 }\r
453 \r
454 hr {\r
455   border-width: 0px 0px 0.1em 0px;\r
456   border-color: black;\r
457 }\r
458 \r
459 acronym, .titleTip {\r
460   border-bottom: 1px solid #ddd;\r
461   cursor: help;\r
462   margin: 0;\r
463   padding: 0 0 0.4px 0;\r
464 }\r
465 \r
466 pre {\r
467   margin-left: 2em; \r
468   font-size: 1.2em;\r
469 }\r
470 \r
471 blockquote {\r
472   border-left: 1px solid blue;\r
473   font-style: italic;\r
474 }\r
475 \r
476 .smallCaps {\r
477   font-size: 110%;\r
478   font-variant: small-caps;\r
479 }\r
480 \r
481 .doNotDisplay { display: none; }\r
482 \r
483 \r
484 .notify_errors,\r
485 .notify_notes,\r
486 .notify_success { padding: .8em; margin-bottom: 1em; border: 2px solid #ddd; }\r
487  \r
488 .notify_errors { background: #FBE3E4; color: #8a1f11; border-color: #FBC2C4; }\r
489 .notify_notes { background: #FFF6BF; color: #514721; border-color: #FFD324; }\r
490 .notify_success { background: #E6EFC2; color: #264409; border-color: #C6D880; }\r
491 .notify_errors a { color: #8a1f11; }\r
492 .notify_notes a { color: #514721; }\r
493 .notify_success a { color: #264409; }\r
494 \r
495 \r
496 /* # Page/Handler specific # */\r
497 h1.dir-list-head, ul.dir-list {\r
498   text-transform: capitalize;\r
499   font-weight: bold;\r
500 }\r
501 ul.sitemap-list a {\r
502   text-transform: capitalize;\r
503 }\r