|
1 /* $Id: style.css,v 1.24 2007/12/22 23:24:26 goba Exp $ */ |
|
2 |
|
3 /* |
|
4 ** HTML elements |
|
5 */ |
|
6 body { |
|
7 color: #000; |
|
8 background-color: #fff; |
|
9 margin: 0; |
|
10 padding: 0; |
|
11 } |
|
12 body, p, td, li, ul, ol { |
|
13 font-family: Verdana, Helvetica, Arial, sans-serif; |
|
14 } |
|
15 h1, h2, h3, h4, h5, h6 { |
|
16 font-family: "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, Verdana, sans-serif; |
|
17 margin: 0; |
|
18 } |
|
19 h1 { |
|
20 color: #369; |
|
21 font-size: 1.6em; |
|
22 } |
|
23 tr.odd td, tr.even td { |
|
24 padding: 0.3em; |
|
25 } |
|
26 a:link { |
|
27 text-decoration: none; |
|
28 font-weight: bold; |
|
29 color: #ff8c00; |
|
30 } |
|
31 a:visited { |
|
32 text-decoration: none; |
|
33 font-weight: bold; |
|
34 color: #c96; |
|
35 } |
|
36 a:hover, a:active { |
|
37 font-weight: bold; |
|
38 color: #ff4500; |
|
39 text-decoration: underline; |
|
40 } |
|
41 fieldset { |
|
42 border: 1px solid #ccc; |
|
43 } |
|
44 p { |
|
45 margin: 0 0 1.3em 0; |
|
46 padding: 0; |
|
47 } |
|
48 blockquote { |
|
49 border-left: 4px solid #69c; /* LTR */ |
|
50 padding: 0 15px; |
|
51 margin: 25px 100px 25px 50px; /* LTR */ |
|
52 color: #696969; |
|
53 text-align: left; /* LTR */ |
|
54 font-size: 1.2em; |
|
55 line-height: 1.3em; |
|
56 font-family: "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, Verdana, sans-serif; |
|
57 } |
|
58 pre { |
|
59 background-color: #eee; |
|
60 padding: 0.75em 1.5em; |
|
61 font-size: 1.2em; |
|
62 border: 1px solid #ddd; |
|
63 } |
|
64 .form-item { |
|
65 margin-top: 1em; |
|
66 } |
|
67 .form-item label { |
|
68 color: #369; |
|
69 } |
|
70 .item-list .title { |
|
71 color: #369; |
|
72 font-size: 0.85em; |
|
73 } |
|
74 |
|
75 /* |
|
76 ** Page layout blocks / IDs |
|
77 */ |
|
78 #primary-menu { |
|
79 border-collapse: separate; |
|
80 background-color: #e0edfb; |
|
81 border-bottom: 3px solid #69c; |
|
82 } |
|
83 #primary-menu tr { |
|
84 background: transparent url(header-a.jpg) left bottom repeat; /* LTR */ |
|
85 } |
|
86 td#home { |
|
87 background: transparent url(logo-background.jpg) left top repeat; /* LTR */ |
|
88 } |
|
89 td#home a:link img, td#home a:visited img { |
|
90 background: transparent url(logo-active.jpg) repeat; /* LTR */ |
|
91 width: 144px; |
|
92 height: 63px; |
|
93 } |
|
94 td#home a:hover img { |
|
95 background: transparent url(logo-hover.jpg) repeat; /* LTR */ |
|
96 width: 144px; |
|
97 height: 63px; |
|
98 } |
|
99 .primary-links, .primary-links a:link, .primary-links a:visited { |
|
100 color: #369; |
|
101 } |
|
102 .primary-links a:hover { |
|
103 color: #000; |
|
104 } |
|
105 #primary-menu .primary-links { |
|
106 background: transparent url(header-b.jpg) left top no-repeat; /* LTR */ |
|
107 font-size: 0.79em; |
|
108 } |
|
109 #primary-menu .primary-links h1, #primary-menu .primary-links h2, #primary-menu .primary-links h3 { |
|
110 font-size: 2.3em; |
|
111 color: #369; |
|
112 } |
|
113 #secondary-menu { |
|
114 border-collapse: separate; |
|
115 background-color: #369; |
|
116 border-bottom: 3px solid #69c; |
|
117 } |
|
118 .secondary-links, .secondary-links a:link, .secondary-links a:visited { |
|
119 color: #e4e9eb; |
|
120 } |
|
121 .secondary-links a:hover { |
|
122 color: #fff; |
|
123 text-decoration: underline; |
|
124 } |
|
125 #secondary-menu .secondary-links { |
|
126 font-size: 0.85em; |
|
127 } |
|
128 ul.links li { |
|
129 border-left: 1px solid #ff8c00; /* LTR */ |
|
130 } |
|
131 #navlist li { |
|
132 border-left: 1px solid #369; /* LTR */ |
|
133 } |
|
134 #subnavlist li, ul.primary-links li, ul.secondary-links li { |
|
135 border-left: 1px solid #fff; /* LTR */ |
|
136 } |
|
137 #navlist li.first, #subnavlist li.first, ul.links li.first { |
|
138 border: none; |
|
139 } |
|
140 .tabs { |
|
141 margin: 15px 0; |
|
142 } |
|
143 .tabs ul.primary { |
|
144 border-collapse: collapse; |
|
145 padding: 0 0 3px 10px; /* LTR */ |
|
146 white-space: nowrap; |
|
147 list-style: none; |
|
148 margin: 0; |
|
149 height: auto; |
|
150 line-height: normal; |
|
151 border-bottom: 2px solid #369; |
|
152 } |
|
153 .tabs ul.primary li { |
|
154 display: inline; |
|
155 } |
|
156 .tabs ul.primary li a { |
|
157 padding: 3px 10px; |
|
158 background: #fff url(tabs-off.png) left top no-repeat; /* LTR */ |
|
159 border-color: #69C; |
|
160 border-width: 2px; |
|
161 border-style: none solid none none; /* LTR */ |
|
162 height: auto; |
|
163 margin-right: 10px; /* LTR */ |
|
164 text-decoration: none; |
|
165 text-transform: lowercase; |
|
166 } |
|
167 .tabs ul.primary li.active a { |
|
168 background: #369 url(tabs-on.png) left top no-repeat; /* LTR */ |
|
169 border-right: 2px solid #369; /* LTR */ |
|
170 color: #fff; |
|
171 } |
|
172 .tabs ul.primary li a:hover { |
|
173 background-color: #fffaf0; |
|
174 color: #ff4500; |
|
175 } |
|
176 .tabs ul.secondary { |
|
177 border-collapse: collapse; |
|
178 padding: 10px 0; |
|
179 margin: 0; |
|
180 white-space: nowrap; |
|
181 width: 100%; |
|
182 list-style: none; |
|
183 height: auto; |
|
184 line-height: normal; |
|
185 border-bottom: none; |
|
186 } |
|
187 .tabs ul.secondary li { |
|
188 display: inline; |
|
189 height: auto; |
|
190 padding: 0 0 0 10px; /* LTR */ |
|
191 text-decoration: none; |
|
192 border-right: none; /* LTR */ |
|
193 } |
|
194 .tabs ul.secondary li a { |
|
195 background: #fff url(tabs-option-off.png) left center no-repeat; /* LTR */ |
|
196 padding: 10px 0 10px 25px; /* LTR */ |
|
197 margin: 0; |
|
198 } |
|
199 .tabs ul.secondary li a.active { |
|
200 background: #fff url(tabs-option-on.png) left center no-repeat; /* LTR */ |
|
201 color: #369; |
|
202 border-bottom: none; |
|
203 } |
|
204 .tabs ul.secondary li a:hover { |
|
205 background: #fff url(tabs-option-hover.png) left center no-repeat; /* LTR */ |
|
206 color: #FF4500; |
|
207 } |
|
208 #content { |
|
209 background-color: #fff; |
|
210 } |
|
211 #contentstart { |
|
212 background-color: #fff; |
|
213 } |
|
214 #menu { |
|
215 padding: 0.5em 0.5em 0 0.5em; |
|
216 text-align: right; /* LTR */ |
|
217 vertical-align: middle; |
|
218 } |
|
219 #search .form-text, #search .form-submit { |
|
220 border: 1px solid #369; |
|
221 font-size: 0.85em; |
|
222 margin: 0.2em; |
|
223 } |
|
224 #search .form-text { |
|
225 width: 9em; |
|
226 } |
|
227 #search .form-submit { |
|
228 height: 1.5em; |
|
229 } |
|
230 #mission { |
|
231 background-color: #fff; |
|
232 color: #696969; |
|
233 border-top: 2px solid #dcdcdc; |
|
234 border-bottom: 2px solid #dcdcdc; |
|
235 padding: 10px; |
|
236 margin: 20px 35px 0 35px; |
|
237 font-family: "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, Verdana, sans-serif; |
|
238 font-size: 1.1em; |
|
239 font-weight: normal; |
|
240 } |
|
241 #site-info { |
|
242 background-color: #bdd3ea; |
|
243 background-image: url(header-c.png); |
|
244 font-family: "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, Verdana, sans-serif; |
|
245 } |
|
246 .site-name { |
|
247 font-size: 1.2em; |
|
248 } |
|
249 .site-name a:link, .site-name a:visited { |
|
250 color: #fff; |
|
251 } |
|
252 .site-name a:hover { |
|
253 color: #ff8c00; |
|
254 text-decoration: none; |
|
255 } |
|
256 .site-slogan { |
|
257 font-size: 0.8em; |
|
258 font-weight: bold; |
|
259 } |
|
260 #main { |
|
261 /* padding in px not ex because IE messes up 100% width tables otherwise */ |
|
262 padding: 30px 35px 50px 35px; |
|
263 background: transparent url(background.png) center center no-repeat; |
|
264 /* fix background overlapping text in IE (aka Peekaboo Bug) */ |
|
265 position: relative; |
|
266 } |
|
267 #mission, .node .content, .comment .content { |
|
268 line-height: 1.4; |
|
269 } |
|
270 #help { |
|
271 font-size: 0.9em; |
|
272 margin-bottom: 1em; |
|
273 } |
|
274 .breadcrumb { |
|
275 margin-bottom: .5em; |
|
276 } |
|
277 .messages { |
|
278 background-color: #eee; |
|
279 border: 1px solid #ccc; |
|
280 padding: 0.3em; |
|
281 margin-bottom: 1em; |
|
282 } |
|
283 .error { |
|
284 border-color: red; |
|
285 } |
|
286 .nav { |
|
287 padding: 0; |
|
288 margin: 0; |
|
289 } |
|
290 #sidebar-left, #sidebar-right { |
|
291 font-size: 0.75em; |
|
292 width: 175px; |
|
293 /* padding in px not ex because IE messes up 100% width tables otherwise */ |
|
294 padding: 25px 10px 75px 10px; |
|
295 vertical-align: top; |
|
296 background: #FFFAF0; |
|
297 } |
|
298 #sidebar-left { |
|
299 border-right: 3px solid #f5f5f5; |
|
300 } |
|
301 #sidebar-right { |
|
302 border-left: 3px solid #f5f5f5; |
|
303 } |
|
304 #sidebar-left li, #sidebar-right li { |
|
305 font-size: 1em; |
|
306 } |
|
307 .node .content { |
|
308 text-align: left; /* LTR */ |
|
309 font-size: 0.85em; |
|
310 line-height: 1.3; |
|
311 } |
|
312 .comment .content { |
|
313 text-align: left; /* LTR */ |
|
314 font-size: 0.85em; |
|
315 line-height: 1.3; |
|
316 } |
|
317 #footer-message { |
|
318 padding: 15px 100px 30px 100px; |
|
319 font-size: 0.85em; |
|
320 text-align: center; |
|
321 color: #aaa; |
|
322 } |
|
323 table#footer-menu { |
|
324 border-top: 3px solid #69c; |
|
325 border-bottom: 3px solid #69c; |
|
326 background-color: #369; |
|
327 color: #e4e9eb; |
|
328 } |
|
329 #footer-menu td { |
|
330 padding: 5px; |
|
331 font-size: 0.75em; |
|
332 } |
|
333 #footer-menu .primary-links, #footer-menu a:link, #footer-menu a:visited { |
|
334 color: #e4e9eb; |
|
335 } |
|
336 #footer-menu a:hover { |
|
337 color: #fff; |
|
338 text-decoration: underline; |
|
339 } |
|
340 #footer-menu .primary-links h1, #footer-menu .primary-links h2, #footer-menu .primary-links h3 { |
|
341 font-size: 1.3em; |
|
342 color: #e4e9eb; |
|
343 } |
|
344 /* |
|
345 ** Common declarations for child classes of node, comment, block, box, etc. |
|
346 ** If you want any of them styled differently for a specific parent, add |
|
347 ** additional rules /with only the differing properties!/ to .parent .class. |
|
348 ** See .comment .title for an example. |
|
349 */ |
|
350 #content .title, #content .title a { |
|
351 color: #369; |
|
352 } |
|
353 .content h1 { |
|
354 color: #369; |
|
355 font-size: 1.9em; |
|
356 } |
|
357 .content h2 { |
|
358 color: #58b; |
|
359 font-size: 1.7em; |
|
360 } |
|
361 .content h3 { |
|
362 color: #69c; |
|
363 font-size: 1.5em; |
|
364 } |
|
365 .content h4 { |
|
366 color: #8be; |
|
367 font-size: 1.3em; |
|
368 } |
|
369 .content h5 { |
|
370 color: #96c6f6; |
|
371 font-size: 1.15em; |
|
372 } |
|
373 .submitted { |
|
374 color: #999; |
|
375 font-size: 0.79em; |
|
376 } |
|
377 div.links { |
|
378 color: #ff8c00; |
|
379 } |
|
380 .links a { |
|
381 font-weight: bold; |
|
382 } |
|
383 .box { |
|
384 padding: 0 0 1.5em 0; |
|
385 } |
|
386 .box { |
|
387 padding: 0; |
|
388 margin: 0; |
|
389 } |
|
390 .box h2 { |
|
391 font-size: 9px; |
|
392 } |
|
393 .block .title h3 { |
|
394 border-bottom: 2px solid #69c; |
|
395 color: #369; |
|
396 font-size: 18px; |
|
397 font-weight: bold; |
|
398 padding: 10px 5px 10px 30px; /* LTR */ |
|
399 margin-bottom: .25em; |
|
400 background: transparent url(icon-block.png) left center no-repeat; /* LTR */ |
|
401 } |
|
402 .block .content { |
|
403 padding: 5px; |
|
404 } |
|
405 .block { |
|
406 margin-bottom: 1.5em; |
|
407 } |
|
408 .box .title { |
|
409 font-size: 1.1em; |
|
410 } |
|
411 .node { |
|
412 margin: .5em 0 2.5em 0; |
|
413 } |
|
414 .node .content, .comment .content { |
|
415 margin: .5em 0 .5em 0; |
|
416 } |
|
417 .node .taxonomy { |
|
418 color: #999; |
|
419 font-size: 0.83em; |
|
420 padding: 1.5em; |
|
421 } |
|
422 .node .picture { |
|
423 border: 1px solid #fff; |
|
424 float: right; /* LTR */ |
|
425 margin: 0.5em; |
|
426 } |
|
427 .comment { |
|
428 border: 1px solid #abc; |
|
429 padding: .5em; |
|
430 margin-bottom: 1em; |
|
431 } |
|
432 .comment .title { |
|
433 font-size: 1em; |
|
434 padding: 10px 0 12px 19px; /* LTR */ |
|
435 background: transparent url(icon-comment.png) left center no-repeat; /* LTR */ |
|
436 } |
|
437 .comment .new { |
|
438 font-weight: bold; |
|
439 font-size: 1em; |
|
440 margin-left: 2px; /* LTR */ |
|
441 color: red; |
|
442 } |
|
443 .comment .picture { |
|
444 border: 1px solid #fff; |
|
445 float: right; /* LTR */ |
|
446 margin: 10px; |
|
447 } |
|
448 div.links { |
|
449 font-size: 0.75em; |
|
450 } |
|
451 div.links .prev, div.links .next, div.links .up { |
|
452 font-size: 1.15em; |
|
453 } |
|
454 .titles .prev, .titles .next { |
|
455 font-size: 0.85em; |
|
456 font-weight: bold; |
|
457 color: #444; |
|
458 } |
|
459 .hide { |
|
460 display: none |
|
461 } |
|
462 .nav .links .next a:link { |
|
463 padding: 17px 17px 17px 0; /* LTR */ |
|
464 background: transparent url(arrow-next.png) right center no-repeat; /* LTR */ |
|
465 } |
|
466 .nav .links .next a:visited { |
|
467 padding: 17px 17px 17px 0; /* LTR */ |
|
468 background: transparent url(arrow-next-visited.png) right center no-repeat; /* LTR */ |
|
469 } |
|
470 .nav .links .next a:hover { |
|
471 padding: 17px 17px 17px 0; /* LTR */ |
|
472 background: transparent url(arrow-next-hover.png) right center no-repeat; /* LTR */ |
|
473 } |
|
474 .nav .links .prev a:link { |
|
475 padding: 17px 0 17px 17px; /* LTR */ |
|
476 background: transparent url(arrow-prev.png) left center no-repeat; /* LTR */ |
|
477 } |
|
478 .nav .links .prev a:visited { |
|
479 padding: 17px 0 17px 17px; /* LTR */ |
|
480 background: transparent url(arrow-prev-visited.png) left center no-repeat; /* LTR */ |
|
481 } |
|
482 .nav .links .prev a:hover { |
|
483 padding: 17px 0 17px 17px; /* LTR */ |
|
484 background: transparent url(arrow-prev-hover.png) left center no-repeat; /* LTR */ |
|
485 } |
|
486 .nav .links .up a:link { |
|
487 padding: 11px 0 17px 0; |
|
488 background: transparent url(arrow-up.png) center top no-repeat; |
|
489 } |
|
490 .nav .links .up a:visited { |
|
491 padding: 11px 0 17px 0; |
|
492 background: transparent url(arrow-up-visited.png) center top no-repeat; |
|
493 } |
|
494 .nav .links .up a:hover { |
|
495 padding: 11px 0 17px 0; |
|
496 background: transparent url(arrow-up-hover.png) center top no-repeat; |
|
497 } |
|
498 |
|
499 /* |
|
500 ** Administration page styles |
|
501 */ |
|
502 div.admin-panel .description { |
|
503 color: #999; |
|
504 } |
|
505 div.admin-panel h3 { |
|
506 background-color: #369; |
|
507 color: #fff; |
|
508 padding: 5px 8px 5px; |
|
509 margin: 0; |
|
510 } |
|
511 div.admin-panel .body { |
|
512 background: #fffaf0; |
|
513 } |
|
514 |
|
515 /* |
|
516 ** Module specific styles |
|
517 */ |
|
518 .content .active { |
|
519 color: #369; |
|
520 } |
|
521 #aggregator .feed-source { |
|
522 background-color: #eee; |
|
523 border: 1px solid #ccc; |
|
524 padding: 1em; |
|
525 margin: 1em 0 1em 0; |
|
526 } |
|
527 #aggregator .news-item .source { |
|
528 color: #999; |
|
529 font-style: italic; |
|
530 font-size: 0.85em; |
|
531 } |
|
532 #aggregator .title { |
|
533 font-size: 1em; |
|
534 } |
|
535 #aggregator h3 { |
|
536 margin-top: 1em; |
|
537 } |
|
538 #tracker th { |
|
539 text-align: center; |
|
540 background-color: #f5f5f5; |
|
541 border-bottom: 1px solid #ddd; |
|
542 border-right: 1px solid #ddd; /* LTR */ |
|
543 border-left: 1px solid #fafafa; /* LTR */ |
|
544 } |
|
545 #tracker th img { |
|
546 float: right; /* LTR */ |
|
547 } |
|
548 #tracker tr.even, #tracker tr.odd { |
|
549 background-color: #fff; |
|
550 } |
|
551 #tracker td { |
|
552 vertical-align: top; |
|
553 padding: 1em 1em 1em 0; /* LTR */ |
|
554 border-bottom: 1px solid #bbb; |
|
555 } |
|
556 #forum { |
|
557 margin: 15px 0 15px 0; |
|
558 background-color: #fff; |
|
559 } |
|
560 #forum table { |
|
561 width: 100%; |
|
562 border: 2px solid #69c; |
|
563 } |
|
564 #forum table tr th { |
|
565 text-align: center; |
|
566 background: #69c; |
|
567 color: #fff; |
|
568 font-size: 0.75em; |
|
569 border-bottom: 1px solid #aaa; |
|
570 } |
|
571 #forum table tr th a { |
|
572 color: #fff; |
|
573 text-decoration: underline; |
|
574 } |
|
575 #forum table tr th img { |
|
576 margin: 0; |
|
577 } |
|
578 #forum tr.odd { |
|
579 background: #e0edfb; |
|
580 } |
|
581 #forum tr.even { |
|
582 background: #fff; |
|
583 } |
|
584 #forum td { |
|
585 padding: 0.5em; |
|
586 } |
|
587 #forum td.container { |
|
588 color: #000; |
|
589 background: #369 url(forum-container.jpg) right top no-repeat; /* LTR */ |
|
590 border: 2px solid #69c; |
|
591 } |
|
592 #forum td.container a { |
|
593 color: #e4e9eb; |
|
594 padding: 20px 0 20px 35px; /* LTR */ |
|
595 background: transparent url(forum-link.png) left center no-repeat; /* LTR */ |
|
596 } |
|
597 #forum td.container a:visited { |
|
598 color: #e4e9eb; |
|
599 } |
|
600 #forum td.statistics, #forum td.settings, #forum td.pager { |
|
601 height: 1.5em; |
|
602 border: 1px solid #bbb; |
|
603 } |
|
604 #forum td .name { |
|
605 color: #96c; |
|
606 } |
|
607 #forum td .links { |
|
608 padding-top: 0.7em; |
|
609 font-size: 0.9em; |
|
610 } |
|
611 .block-forum h3 { |
|
612 margin-bottom: .5em; |
|
613 } |