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