Mercurial > hg > MPIWG-drupal-modules
comparison sites/all/themes/mpiwgDev/layout_orig.css @ 0:015d06b10d37 default tip
initial
author | dwinter |
---|---|
date | Wed, 31 Jul 2013 13:49:13 +0200 |
parents | |
children |
comparison
equal
deleted
inserted
replaced
-1:000000000000 | 0:015d06b10d37 |
---|---|
1 | |
2 /** | |
3 * @file | |
4 * Stark layout method | |
5 * | |
6 * To avoid obscuring CSS added to the page by Drupal or a contrib module, the | |
7 * Stark theme itself has no styling, except just enough CSS to arrange the page | |
8 * in a traditional "Header, sidebars, content, and footer" layout. | |
9 * | |
10 * This layout method works reasonably well, but shouldn't be used on a | |
11 * production site because it can break. For example, if an over-large image | |
12 * (one that is wider than 20% of the viewport) is in the left sidebar, the | |
13 * image will overlap with the #content to the right. The exception to this | |
14 * is IE6 which will just hide the navigation block completely in these | |
15 * instances due to a positioning bug. | |
16 */ | |
17 | |
18 | |
19 /* MPIWG addtional syles for drupal */ | |
20 | |
21 /* | |
22 * return to mpiwg | |
23 */ | |
24 | |
25 | |
26 | |
27 td.key{ | |
28 color :rgb(59, 65, 134); | |
29 | |
30 } | |
31 | |
32 div.main{ | |
33 width: 75%; | |
34 } | |
35 | |
36 .mpiwg_internal_view{ | |
37 background-color: red; | |
38 } | |
39 .webSearch_hl { | |
40 font-weight: bold; | |
41 } | |
42 | |
43 | |
44 | |
45 #mpiwg_link a { | |
46 background-color: #ebecf3; | |
47 color: #3b4186; | |
48 padding: 3px 10px 3px 10px; | |
49 font-style: italic; | |
50 | |
51 } | |
52 | |
53 #header div.title img.logo_left { | |
54 width: 180px; | |
55 height: 100%; | |
56 vertical-align: top; | |
57 padding: 0px 5px 20px 0px; | |
58 } | |
59 | |
60 div.logo_left { | |
61 float: left; | |
62 } | |
63 | |
64 #header div.title { | |
65 width: 750px; | |
66 | |
67 | |
68 } | |
69 | |
70 div.subnav .sn_off { | |
71 padding-left: 0px; | |
72 background-color: #fcf2df; | |
73 font-weight: normal; | |
74 } | |
75 | |
76 div.subnav li.sn_off a{ | |
77 padding-left: 0px; | |
78 color: #d45a00; | |
79 font-weight: normal; | |
80 } | |
81 | |
82 ul li.leaf{ | |
83 list-style-image: none; | |
84 } | |
85 | |
86 ul li.expanded{ | |
87 list-style-image: none; | |
88 } | |
89 | |
90 ul li.collapsed{ | |
91 list-style-image: none; | |
92 } | |
93 | |
94 ul.menu li{ | |
95 margin-left : 0px; | |
96 } | |
97 | |
98 ul.inline li { | |
99 display: inline; | |
100 padding: 0; | |
101 } | |
102 | |
103 /* MPIWG website style sheet | |
104 * | |
105 * (c) 2013 MPIWG Berlin | |
106 * Author: Robert Casties | |
107 */ | |
108 body { | |
109 margin: 0; | |
110 font-family: Verdana, Arial, sans-serif; | |
111 background-color: #fdf8ef; | |
112 font-size: 12px; | |
113 } | |
114 | |
115 /* | |
116 * global styles | |
117 */ | |
118 img { | |
119 border: none; | |
120 } | |
121 | |
122 a { | |
123 color: #d45a00; | |
124 text-decoration: none; | |
125 } | |
126 | |
127 a:hover { | |
128 text-decoration: underline; | |
129 } | |
130 | |
131 /* link-classes (with icons) */ | |
132 a.internal, | |
133 a.more { | |
134 background: url(../images/internal.png) center left no-repeat; | |
135 padding-left: 10px; | |
136 } | |
137 | |
138 a.download { | |
139 background: url(../images/download.png) center left no-repeat; | |
140 padding-left: 15px; | |
141 } | |
142 | |
143 a.external { | |
144 background: url(../images/external.png) center left no-repeat; | |
145 padding-left: 15px; | |
146 } | |
147 | |
148 a.down { | |
149 background: url(../images/down.png) center left no-repeat; | |
150 padding-left: 15px; | |
151 } | |
152 | |
153 a.jumptop { | |
154 background: url(../images/jump_top.png) center left no-repeat; | |
155 padding-left: 15px; | |
156 } | |
157 | |
158 a.email { | |
159 background: url(../images/email.png) center left no-repeat; | |
160 padding-left: 23px; | |
161 } | |
162 | |
163 /* old blue mail link */ | |
164 a.maillink { | |
165 color: #3b4186 !important; | |
166 } | |
167 | |
168 h1 { | |
169 color: #3b4186; | |
170 font-size: 20px; | |
171 font-weight: normal; | |
172 margin: 0.5em 0; | |
173 } | |
174 | |
175 h1:first-child { | |
176 /* does this work correctly? */ | |
177 margin-top: 0; | |
178 } | |
179 | |
180 h2 { | |
181 color: #3b4186; | |
182 font-size: 16px; | |
183 font-weight: normal; | |
184 margin: 0.5em 0; | |
185 } | |
186 | |
187 h3 { | |
188 color: #3b4186; | |
189 font-size: 14px; | |
190 font-weight: normal; | |
191 margin: 0; | |
192 } | |
193 | |
194 h3 + h3 { | |
195 /* h3 directly after h3 has a margin */ | |
196 margin-top: 0.5em; | |
197 } | |
198 | |
199 h1 a { | |
200 /* a header with a link looks like a header */ | |
201 color: inherit; | |
202 font-weight: inherit; | |
203 text-decoration: none; | |
204 } | |
205 | |
206 p { | |
207 margin: 0.5em 0; | |
208 line-height: 1.5; | |
209 } | |
210 | |
211 ul.plain { | |
212 list-style-type: none; | |
213 padding-left: 0.5em; | |
214 } | |
215 ul.plain > li { | |
216 margin-top: 0.5em; | |
217 } | |
218 | |
219 ul.inline { | |
220 display: inline; | |
221 padding: 0; | |
222 margin: 0; | |
223 } | |
224 | |
225 ul.inline li { | |
226 display: inline; | |
227 } | |
228 | |
229 /* | |
230 * table-like rows and columns | |
231 */ | |
232 | |
233 div.rows { | |
234 display: table; | |
235 } | |
236 | |
237 div.row { | |
238 display: table-row; | |
239 } | |
240 | |
241 div.row>div.col { | |
242 display: table-cell; | |
243 vertical-align: top; | |
244 } | |
245 | |
246 div.row>div.col:first-child { | |
247 /* first block has no left margin */ | |
248 padding-left: 0 !important; | |
249 } | |
250 | |
251 /* | |
252 * page wrapper and header | |
253 */ | |
254 #wrapper { | |
255 width: 900px; | |
256 margin: 0 auto; | |
257 padding: 10px 40px 10px 20px; | |
258 background-color: #fcf2df; | |
259 box-shadow: 0 0 5px 3px #d0d0d0; | |
260 } | |
261 | |
262 #header { | |
263 display: block; | |
264 position: relative; | |
265 height: 95px; | |
266 margin: 0 0 10px 0; | |
267 } | |
268 | |
269 #header div.title { | |
270 position: absolute; | |
271 left: 0; | |
272 top: 25px; | |
273 } | |
274 | |
275 #header div.title img { | |
276 width: 661px; | |
277 height: 40px; | |
278 } | |
279 | |
280 #header div.logo { | |
281 position: absolute; | |
282 right: 0; | |
283 } | |
284 | |
285 #header div.logo img { | |
286 width: 87px; | |
287 height: 88px; | |
288 } | |
289 | |
290 /* | |
291 * Main Navigation | |
292 */ | |
293 #mainnav { | |
294 display: block; | |
295 position: relative; | |
296 font-family: Verdana, Arial, sans-serif; | |
297 font-size: 12px; | |
298 border-top: 8px solid #fab775; | |
299 padding-top: 5px; | |
300 margin-bottom: 15px; | |
301 /* make iPhone-Safari not botch text size */ | |
302 -webkit-text-size-adjust: 100%; | |
303 } | |
304 | |
305 #mainnav ul { | |
306 padding: 0; | |
307 margin: 0; | |
308 } | |
309 | |
310 #mainnav li.sec { | |
311 display: inline; | |
312 border-top: 8px solid #fab775; | |
313 margin: 0 35px 0 0; | |
314 padding-top: 5px; | |
315 } | |
316 | |
317 #mainnav li.sec:hover { | |
318 border-top: 8px solid #d45a00; | |
319 } | |
320 | |
321 #mainnav a { | |
322 color: #696968; | |
323 outline: none; | |
324 } | |
325 | |
326 #mainnav a:hover { | |
327 color: #000000; | |
328 text-decoration: none; | |
329 } | |
330 | |
331 #mainnav li.sec.on { | |
332 border-top: 8px solid #d45a00; | |
333 } | |
334 | |
335 #mainnav li.sec.on a { | |
336 color: #d45a00; | |
337 outline: none; | |
338 font-weight: bold; | |
339 } | |
340 | |
341 #mainnav li.sec.lang { | |
342 position: absolute; | |
343 right: 0; | |
344 top: -8px; | |
345 margin-right: 0; | |
346 } | |
347 | |
348 /* | |
349 * breadcrumbs | |
350 */ | |
351 #breadcrumbs { | |
352 font-size: 11px; | |
353 color: #6a4d3c; | |
354 margin-bottom: 5px; | |
355 } | |
356 | |
357 #breadcrumbs a { | |
358 color: #6a4d3c; | |
359 } | |
360 | |
361 #breadcrumbs .selected { | |
362 font-weight: bold; | |
363 } | |
364 | |
365 /* | |
366 * main section wrapper | |
367 */ | |
368 #mainrow { | |
369 display: table-row; | |
370 } | |
371 | |
372 /* | |
373 * subnavigation | |
374 */ | |
375 div.leftbox { | |
376 display: table-cell; | |
377 vertical-align: top; | |
378 width: 170px; | |
379 border-top: 3px solid #dccbae; | |
380 } | |
381 | |
382 div.subnav { | |
383 font-size: 11px; | |
384 } | |
385 | |
386 div.subnav ul { | |
387 margin: 0; | |
388 padding: 0; | |
389 } | |
390 | |
391 div.subnav li { | |
392 list-style-type: none; | |
393 border-bottom: 1px solid #dccbae; | |
394 padding: 3px 6px 6px 3px; | |
395 } | |
396 | |
397 div.subnav .sn_on { | |
398 padding-left: 6px; | |
399 background-color: #d45a00; | |
400 } | |
401 | |
402 div.subnav .sn_on a { | |
403 color: #fcf2df; | |
404 font-weight: bold; | |
405 } | |
406 | |
407 div.subnav h2.subnavhead { | |
408 background-color: white; | |
409 color: #d45a00; | |
410 border-bottom: 1px solid #dccbae; | |
411 font-size: 11px; | |
412 font-weight: bold; | |
413 margin: 0; | |
414 padding: 5px 3px; | |
415 } | |
416 | |
417 div.subnav li.dept { | |
418 padding-left: 18px; | |
419 list-style-position: inside; | |
420 list-style-image: url(../images/internal.png); | |
421 text-indent: -14px; | |
422 } | |
423 | |
424 div.subnav li.dept .type { | |
425 font-style: italic; | |
426 color: #6a4d3c; | |
427 } | |
428 | |
429 div.subnav li.dept.sn_on .type { | |
430 color: #f9f4e1; | |
431 } | |
432 | |
433 div.subnavbox { | |
434 /* navigation below e.g. research projects */ | |
435 font-size: 11px; | |
436 margin-top: 30px; | |
437 } | |
438 | |
439 div.subnavbox h2 { | |
440 font-size: 11px; | |
441 color: #b69f7b; | |
442 padding-bottom: 3px; | |
443 border-bottom: 1px solid #dccbae; | |
444 margin-top: 20px; | |
445 } | |
446 | |
447 /* | |
448 * main section | |
449 */ | |
450 div.main { | |
451 display: table-cell; | |
452 vertical-align: top; | |
453 background-color: white; | |
454 border-top: 3px solid #dccbae; | |
455 padding: 20px; | |
456 } | |
457 | |
458 div.main div.row>div.col { | |
459 /* col default padding */ | |
460 padding-left: 20px; | |
461 } | |
462 | |
463 div.main div.center { | |
464 /* make sure center does not collapse */ | |
465 min-width: 460px; | |
466 } | |
467 | |
468 | |
469 /* | |
470 * frontpage | |
471 */ | |
472 div.main.home { | |
473 background-color: transparent; | |
474 border-top: 0; | |
475 padding: 0; | |
476 } | |
477 | |
478 div.main.home b { | |
479 /* bold is blue */ | |
480 color: #3b4186; | |
481 } | |
482 | |
483 div.main.home div.row.triple>div.col { | |
484 /* frontpage col width */ | |
485 width: 286px; | |
486 padding-left: 21px; | |
487 } | |
488 | |
489 div.box h2, | |
490 h2.line { | |
491 /* more-links in title are right */ | |
492 position: relative; | |
493 } | |
494 | |
495 div.box h2 a:link, | |
496 h2.line a.more:link { | |
497 /* more-links in title are right */ | |
498 position: absolute; | |
499 right: 0; | |
500 top: 3px; | |
501 /* more-links in title are small */ | |
502 font-size: 12px; | |
503 } | |
504 | |
505 /* | |
506 * front page feature teaser | |
507 */ | |
508 div.main.home div.teaser { | |
509 background-color: #f4e0c7; | |
510 } | |
511 | |
512 div.main.home div.teaser div.box { | |
513 /* teaser box needs no margins */ | |
514 margin: 0; | |
515 } | |
516 | |
517 div.teaser_image { | |
518 position: relative; | |
519 width: 593px; | |
520 height: 351px; | |
521 } | |
522 | |
523 div.teaser_image div.caption { | |
524 /* caption inside image */ | |
525 position: absolute; | |
526 bottom: 0; | |
527 padding: 3px; | |
528 text-align: right; | |
529 color: white; | |
530 font-size: 10px; | |
531 opacity: 0.8; | |
532 background-color: gray; | |
533 /* background-color: rgba(80,80,80,0.6); */ | |
534 } | |
535 | |
536 div.teaser_text { | |
537 padding-right: 21px; | |
538 } | |
539 /* feature number */ | |
540 div.teaser_text div.feature_number { | |
541 position: absolute; | |
542 right: 14px; | |
543 top: 5px; | |
544 font-family: Georgia, Times, serif; | |
545 font-size: 26px; | |
546 color: #887163; | |
547 } | |
548 /* feature title */ | |
549 div.teaser_text h1 { | |
550 font-size: 16px; | |
551 font-weight: normal; | |
552 margin-top: 0; | |
553 } | |
554 /* current research topic */ | |
555 div.teaser_text h3 { | |
556 color: #887163; | |
557 margin-bottom: 3px; | |
558 margin-top: 15px; | |
559 } | |
560 /* feature date */ | |
561 div.teaser_text div.date { | |
562 color: #3b4186; | |
563 padding-top: 20px; | |
564 margin-bottom: 20px; | |
565 } | |
566 | |
567 /* teaser slider */ | |
568 div.teaser div.box div.slider { | |
569 top: 150px; | |
570 width: 18px; | |
571 height: 24px; | |
572 padding-top: 11px; | |
573 } | |
574 | |
575 div.teaser div.box div.slider.prev { | |
576 background-image: url(../images/slider_prev_bg.png); | |
577 } | |
578 | |
579 div.teaser div.box div.slider.next { | |
580 background-image: url(../images/slider_next_bg.png); | |
581 } | |
582 | |
583 /* | |
584 * toolboxes | |
585 */ | |
586 div.tool.box { | |
587 font-family: Georgia, Times, serif; | |
588 font-style: italic; | |
589 font-size: 16px; | |
590 color: #887163; | |
591 background-color: #efeeec; | |
592 padding: 20px; | |
593 box-shadow: 0 0 1px 1px #e0e0e0; | |
594 } | |
595 | |
596 div.tool.box a { | |
597 color: #3b4186; | |
598 } | |
599 | |
600 div.tool.box div.searchbox { | |
601 /* only to make it shrink-wrap */ | |
602 display: table-cell; | |
603 } | |
604 | |
605 div.tool.box div.searchbox input.text { | |
606 height: 20px; | |
607 width: 370px; | |
608 background-color: #9fa0a7; | |
609 color: white; | |
610 font-size: 14px; | |
611 font-style: italic; | |
612 border: 0; | |
613 padding: 3px; | |
614 } | |
615 | |
616 div.tool.box div.searchbox input.submit { | |
617 /* submit uses border-box. don't ask */ | |
618 height: 26px; | |
619 width: 26px; | |
620 border: 0; | |
621 padding: 2px 3px 4px 3px; | |
622 /* TODO: this should be an image */ | |
623 background-color: #ee7f2d; | |
624 color: white; | |
625 font-size: 14px; | |
626 } | |
627 | |
628 div.tool.box div.searchbox div.extended { | |
629 font-family: Verdana, Arial, sans-serif; | |
630 font-size: 12px; | |
631 text-align: right; | |
632 padding: 5px 30px 5px 3px; | |
633 } | |
634 | |
635 div.tool.box h3 { | |
636 font-family: Georgia, Times, serif; | |
637 font-style: italic; | |
638 font-size: 16px; | |
639 color: #887163; | |
640 margin: 0.5em 0; | |
641 } | |
642 | |
643 div.tool.box h3:first-child { | |
644 /* top header has no margin */ | |
645 margin-top: 0; | |
646 } | |
647 | |
648 div.tool.box ul { | |
649 margin: 0; | |
650 padding: 0; | |
651 } | |
652 | |
653 div.tool.box div.options { | |
654 margin-top: 10px; | |
655 } | |
656 | |
657 div.tool.box div.options li { | |
658 list-style-type: none; | |
659 margin: 0.5em 0; | |
660 } | |
661 | |
662 div.tool.box div.atoz { | |
663 color: #887163; | |
664 font-family: Verdana, Arial, sans-serif; | |
665 font-size: 14px; | |
666 font-style: normal; | |
667 margin-top: 10px; | |
668 } | |
669 | |
670 div.tool.box input.checkbox, | |
671 div.tool.box input.radio { | |
672 /* checkbox uses border-box. don't ask */ | |
673 width: 20px; | |
674 height: 20px; | |
675 margin: 0; | |
676 /* TODO: this should be an image */ | |
677 background-color: white; | |
678 } | |
679 | |
680 /* project page toolbox with thumbs */ | |
681 div.tool.box div.box.thumbs { | |
682 width: 420px; | |
683 } | |
684 | |
685 div.box.thumbs div.thumb { | |
686 display: inline; | |
687 } | |
688 div.box.thumbs div.thumb img { | |
689 width: 55px; | |
690 height: 34px; | |
691 } | |
692 | |
693 | |
694 /* | |
695 * service box on frontpage | |
696 */ | |
697 div.box h2.service { | |
698 /* title has no line */ | |
699 border: 0; | |
700 } | |
701 | |
702 div.tool.box.service { | |
703 margin-top: 0; | |
704 padding: 0; | |
705 } | |
706 | |
707 div.tool.box.service div.row > div.col { | |
708 padding: 0; | |
709 } | |
710 div.tool.box.service div.search { | |
711 width: 200px; | |
712 height: 20px; | |
713 padding: 26px 0 26px 16px; | |
714 border-bottom: 1px solid #9fa0a7; | |
715 } | |
716 div.tool.box.service div.search.both { | |
717 height: 44px; | |
718 padding: 14px 0 14px 16px; | |
719 } | |
720 div.tool.box.service div.searchicon { | |
721 width: 38px; | |
722 height: 40px; | |
723 text-align: center; | |
724 padding: 16px; | |
725 border-bottom: 1px solid #9fa0a7; | |
726 } | |
727 div.tool.box.service div.icon { | |
728 width: 71px; | |
729 height: 70px; | |
730 text-align: center; | |
731 line-height: 2.5; | |
732 padding: 1px 0; | |
733 border-left: 1px solid #9fa0a7; | |
734 } | |
735 div.tool.box.service div.icon a { | |
736 color: black; | |
737 font-size: 12px; | |
738 font-family: Verdana, Arial, sans-serif; | |
739 font-style: normal; | |
740 } | |
741 div.tool.box.service div.icon.first { | |
742 border-left: 0; | |
743 width: 70px; | |
744 } | |
745 div.tool.box.service div.searchbox { | |
746 display: block; | |
747 } | |
748 div.tool.box.service div.searchbox input.text { | |
749 width: 170px; | |
750 height: 17px; | |
751 font-size: 12px; | |
752 padding: 1px 3px; | |
753 } | |
754 div.tool.box.service div.searchbox input.submit { | |
755 height: 19px; | |
756 width: 19px; | |
757 padding: 0; | |
758 margin: 0; | |
759 vertical-align: bottom; | |
760 } | |
761 div.tool.box.service select.quickfinder { | |
762 width: 200px; | |
763 height: 19px; | |
764 font-size: 12px; | |
765 background-color: white; | |
766 margin-bottom: 5px; | |
767 border: 0; | |
768 } | |
769 | |
770 /* | |
771 * other boxes | |
772 */ | |
773 div.box { | |
774 margin: 20px 0; | |
775 position: relative; | |
776 } | |
777 | |
778 div.box h2, | |
779 h2.line { | |
780 /* h2 is title with line */ | |
781 padding-bottom: 5px; | |
782 border-bottom: 3px solid #dccbae; | |
783 margin-bottom: 5px; | |
784 } | |
785 | |
786 div.box.line, | |
787 div.line { | |
788 border-bottom: 1px solid #dccbae; | |
789 } | |
790 | |
791 div.box h3 { | |
792 /* h3 is subtitle/type */ | |
793 font-size: 12px; | |
794 color: #6a4d3c; | |
795 } | |
796 | |
797 div.box h3 + h2 { | |
798 /* directly over h2 */ | |
799 margin-top: 0; | |
800 } | |
801 | |
802 /* | |
803 * small box with thumbnail | |
804 */ | |
805 div.mini { | |
806 padding: 10px 0; | |
807 /* line-height: 1; */ | |
808 } | |
809 | |
810 div.row.quintuple div.mini { | |
811 max-width: 122px; | |
812 font-size: 11px; | |
813 } | |
814 | |
815 div.mini div.thumb { | |
816 background-color: #f8f8f8; | |
817 text-align: center; | |
818 margin-top: 0.5em; | |
819 } | |
820 div.mini div.thumb:first-child { | |
821 margin-top: 0; | |
822 } | |
823 div.row.quintuple div.mini div.thumb img { | |
824 width: 120px; | |
825 height: 75px; | |
826 } | |
827 | |
828 div.row.triple div.mini { | |
829 width: 140px; | |
830 } | |
831 | |
832 div.row.triple div.mini div.thumb img { | |
833 width: 140px; | |
834 height: 87px; | |
835 } | |
836 | |
837 div.row.triple div.mini.source div.thumb img { | |
838 /* thumb size for sources given by digilib */ | |
839 width: auto; | |
840 height: auto; | |
841 } | |
842 | |
843 div.row.double div.mini div.thumb img { | |
844 height: 180px; | |
845 } | |
846 | |
847 div.mini div.type { | |
848 color: #9f917a; | |
849 margin-top: 0.5em; | |
850 } | |
851 | |
852 div.mini div.title { | |
853 margin-top: 0.5em; | |
854 } | |
855 | |
856 div.mini div.author { | |
857 color: #3b4186; | |
858 margin-top: 0.5em; | |
859 } | |
860 | |
861 div.mini div.link { | |
862 margin-top: 0.5em; | |
863 } | |
864 | |
865 div.mini h2 { | |
866 /* e.g. title for mini-books */ | |
867 font-size: 14px; | |
868 } | |
869 | |
870 div.mini.website div.description { | |
871 /* initially hidden */ | |
872 display: none; | |
873 } | |
874 | |
875 div.box.foldable div.fold { | |
876 /* initially hidden */ | |
877 display: none; | |
878 position: absolute; | |
879 bottom: 0; | |
880 right: 0; | |
881 /* TODO: this should be an image */ | |
882 background-color: #ee7f2d; | |
883 color: white; | |
884 font-size: 14px; | |
885 } | |
886 | |
887 /* | |
888 * slider buttons | |
889 */ | |
890 div.box div.slider { | |
891 position: absolute; | |
892 top: 110px; | |
893 width: 16px; | |
894 height: 18px; | |
895 } | |
896 | |
897 div.box div.slider.prev { | |
898 left: 0; | |
899 } | |
900 | |
901 div.box div.slider.next { | |
902 right: 0; | |
903 text-align: right; | |
904 } | |
905 | |
906 /* | |
907 * paragraph with line | |
908 */ | |
909 div.item { | |
910 padding-top: 5px; | |
911 padding-bottom: 5px; | |
912 border-bottom: 1px solid #dccbae; | |
913 line-height: 1.5; | |
914 } | |
915 | |
916 /* | |
917 * pubman references | |
918 */ | |
919 .reference .Italic { | |
920 font-style: italic; | |
921 } | |
922 | |
923 | |
924 /* | |
925 * table with items (articles) | |
926 */ | |
927 table.items { | |
928 /* no space between cells */ | |
929 border-collapse: collapse; | |
930 } | |
931 | |
932 table.items td { | |
933 vertical-align: top; | |
934 text-align: left; | |
935 line-height: 1.5; | |
936 padding: 1em 1em 0.5em 0; | |
937 } | |
938 table.items td:last-child { | |
939 padding-right: 0; | |
940 } | |
941 table.items.shorter td { | |
942 padding: 0.5em 0.5em 0.5em 0; | |
943 } | |
944 | |
945 table.items th { | |
946 font-family: Georgia, Times, serif; | |
947 font-size: 16px; | |
948 font-weight: normal; | |
949 font-style: italic; | |
950 color: #887163; | |
951 text-align: left; | |
952 border-bottom: 3px solid #dccbae; | |
953 } | |
954 | |
955 table.items h2 { | |
956 border-bottom: 3px solid #dccbae; | |
957 margin-bottom: 0; | |
958 } | |
959 table.items h2 a { | |
960 color: inherit; | |
961 font-weight: inherit; | |
962 text-decoration: none; | |
963 } | |
964 | |
965 table.items img.thumb { | |
966 width: 55px; | |
967 height: 34px; | |
968 } | |
969 | |
970 table.items td.line, | |
971 table.items tr.line td { | |
972 border-bottom: 1px solid #dccbae; | |
973 } | |
974 | |
975 table.items td.topline, | |
976 table.items tr.topline td { | |
977 border-top: 1px solid #dccbae; | |
978 } | |
979 | |
980 table.items tr.last_item td { | |
981 /* last_item has no padding-top */ | |
982 padding: 0 0 0.5em 0; | |
983 } | |
984 | |
985 table.items h3.fold_head { | |
986 font-size: 12px; | |
987 background-color: #f6f2eb; | |
988 padding: 3px; | |
989 } | |
990 | |
991 table.items h3.fold_head img { | |
992 margin: 0 5px 0 3px; | |
993 } | |
994 | |
995 table.items div.fold_body { | |
996 /* e.g. preprint abstracts */ | |
997 padding: 0.5em 0 0 20px; | |
998 } | |
999 | |
1000 ul.items { | |
1001 list-style-type: none; | |
1002 padding: 0; | |
1003 } | |
1004 | |
1005 ul.items li { | |
1006 padding: 0 0 0.5em 20px; | |
1007 border-bottom: 3px solid #dccbae; | |
1008 margin-bottom: 0.5em; | |
1009 } | |
1010 | |
1011 ul.items .fold_head { | |
1012 text-indent: -20px; | |
1013 } | |
1014 ul.items .fold_head img.fold_open, | |
1015 ul.items .fold_head img.fold_closed { | |
1016 padding-right: 5px; | |
1017 } | |
1018 | |
1019 ul.items .type { | |
1020 /* font-size: 11px; */ | |
1021 color: #696968; | |
1022 } | |
1023 | |
1024 ul.items h2 { | |
1025 font-size: 12px; | |
1026 } | |
1027 | |
1028 ul.items td.key { | |
1029 color: #3b4186; | |
1030 } | |
1031 | |
1032 .foldable img.fold_closed { | |
1033 /* fold is initially open */ | |
1034 display: none; | |
1035 } | |
1036 | |
1037 | |
1038 /* | |
1039 * hierarchical list (of projects) | |
1040 */ | |
1041 div.hierlist h2 { | |
1042 text-indent: -20px; | |
1043 padding-left: 20px; | |
1044 padding-bottom: 5px; | |
1045 border-bottom: 3px solid #dccbae; | |
1046 margin-bottom: 0; | |
1047 } | |
1048 | |
1049 div.hierlist h2 img { | |
1050 padding: 0 3px 3px 3px; | |
1051 } | |
1052 | |
1053 div.hierlist h2 a { | |
1054 color: inherit; | |
1055 font-weight: inherit; | |
1056 text-decoration: none; | |
1057 } | |
1058 | |
1059 div.hierlist ul { | |
1060 list-style-type: none; | |
1061 padding: 0 0 10px 0; | |
1062 margin: 0; | |
1063 border-bottom: 1px solid #dccbae; | |
1064 } | |
1065 | |
1066 div.hierlist li { | |
1067 padding: 5px 0 5px 16px; | |
1068 text-indent: -13px; | |
1069 } | |
1070 | |
1071 div.hierlist li a { | |
1072 /* icon is more distant from text */ | |
1073 padding-left: 13px; | |
1074 } | |
1075 | |
1076 div.hierlist li.indent { | |
1077 padding-bottom: 10px; | |
1078 border-bottom: 1px solid #dccbae; | |
1079 margin-bottom: 5px; | |
1080 } | |
1081 | |
1082 div.hierlist li.level_1 { | |
1083 font-size: 14px; | |
1084 } | |
1085 | |
1086 div.hierlist li.level_2 { | |
1087 font-weight: bold; | |
1088 margin-left: 20px; | |
1089 } | |
1090 | |
1091 div.hierlist li.level_3 { | |
1092 margin-left: 40px; | |
1093 } | |
1094 | |
1095 div.hierlist li.level_4 { | |
1096 margin-left: 60px; | |
1097 } | |
1098 | |
1099 div.hierlist li.level_5 { | |
1100 margin-left: 80px; | |
1101 } | |
1102 | |
1103 | |
1104 /* | |
1105 * figures (in project descriptions and features) | |
1106 */ | |
1107 div.figure, | |
1108 div.image_small { | |
1109 float: left; | |
1110 width: 230px; | |
1111 padding: 0.5em 1em 0 0; | |
1112 } | |
1113 div.image_small.right { | |
1114 float: right; | |
1115 padding: 0.5em 0 0 1em; | |
1116 } | |
1117 div.figure div.image img, | |
1118 div.image_small img { | |
1119 width: 230px; | |
1120 } | |
1121 div.figure div.figcaption, | |
1122 div.banner_large div.caption, | |
1123 div.image_small div.caption { | |
1124 font-size: 10px; | |
1125 line-height: 1.5; | |
1126 color: #9f917a; | |
1127 margin-top: 0.5em; | |
1128 } | |
1129 div.banner_large img { | |
1130 width: 460px; | |
1131 } | |
1132 | |
1133 /* | |
1134 * project description and feature | |
1135 */ | |
1136 h3.authors { | |
1137 margin-top: 0.5em; | |
1138 } | |
1139 | |
1140 p.maintext_authors { | |
1141 font-size: 14px; | |
1142 color: #3b4186; | |
1143 } | |
1144 | |
1145 div.description { | |
1146 margin-top: 0.5em; | |
1147 line-height: 1.5; | |
1148 } | |
1149 | |
1150 h2.type { | |
1151 color: #9f917a; | |
1152 } | |
1153 | |
1154 /* | |
1155 * feature story archive | |
1156 */ | |
1157 ul.items.features li { | |
1158 padding: 0 0 0.5em 0; | |
1159 border-bottom: 1px solid #dccbae; | |
1160 } | |
1161 ul.items.features .thumb { | |
1162 float:left; | |
1163 padding: 8px 10px 0 0; | |
1164 } | |
1165 ul.items.features .thumb img { | |
1166 width: 55px; | |
1167 height: 34px; | |
1168 } | |
1169 ul.items.features .feature_number { | |
1170 font-family: Georgia, Times, serif; | |
1171 font-size: 24px; | |
1172 color: #696968; | |
1173 } | |
1174 ul.items.features .date { | |
1175 font-size: 11px; | |
1176 color: #696968; | |
1177 } | |
1178 ul.items.features h1 { | |
1179 font-size: 12px; | |
1180 font-weight: bold; | |
1181 margin: 0; | |
1182 } | |
1183 | |
1184 /* | |
1185 * sidebar | |
1186 */ | |
1187 div.sidebar { | |
1188 display: table-cell; | |
1189 width: 220px; | |
1190 border-top: 3px solid #dccbae; | |
1191 background-color: white; | |
1192 padding: 20px 10px 20px 0; | |
1193 } | |
1194 | |
1195 div.sideblock h2 { | |
1196 position: relative; | |
1197 font-size: 12px; | |
1198 margin-top: 20px; | |
1199 padding-bottom: 5px; | |
1200 border-bottom: 3px solid #dccbae; | |
1201 margin-bottom: 0; | |
1202 } | |
1203 | |
1204 div.sideblock:first-child h2 { | |
1205 margin-top: 0; | |
1206 } | |
1207 | |
1208 div.sideblock h3 { | |
1209 font-size: 12px; | |
1210 margin-top: 5px; | |
1211 padding-bottom: 5px; | |
1212 border-bottom: 1px solid #dccbae; | |
1213 } | |
1214 | |
1215 /* like sidebar without line */ | |
1216 div.sidebox { | |
1217 width: 220px; | |
1218 padding: 0 0 20px 0; | |
1219 } | |
1220 | |
1221 /* | |
1222 * project sidebars | |
1223 */ | |
1224 div.sideblock h2 .proj_state { | |
1225 position: absolute; | |
1226 right: 0; | |
1227 } | |
1228 | |
1229 div.sideblock .project { | |
1230 background: url(../images/internal.png) no-repeat scroll 6px 11px #F5DAAF; | |
1231 border-bottom: 1px solid #F3BE7C; | |
1232 padding: 6px 6px 6px 20px; | |
1233 } | |
1234 div.sideblock .project.inactive { | |
1235 background: url(../images/internal.png) no-repeat scroll 6px 11px #f6e6cc; | |
1236 } | |
1237 div.sideblock .project.parent { | |
1238 background: url(../images/up.png) no-repeat scroll 6px 11px #F9F4E1; | |
1239 border-bottom: 1px solid #DCCBAE; | |
1240 color: #666666; | |
1241 } | |
1242 div.sideblock .project a { | |
1243 color: #333; | |
1244 } | |
1245 | |
1246 /* | |
1247 * special sideblocks | |
1248 */ | |
1249 div.sideblock .item.link, | |
1250 div.sideblock .item.internal { | |
1251 background: url(../images/internal.png) 0 11px no-repeat; | |
1252 padding-left: 10px; | |
1253 } | |
1254 | |
1255 div.sideblock .item.external { | |
1256 background: url(../images/external.png) 0 11px no-repeat; | |
1257 padding-left: 13px; | |
1258 } | |
1259 | |
1260 div.sideblock .item.download { | |
1261 background: url(../images/download.png) 0 8px no-repeat; | |
1262 padding-left: 15px; | |
1263 } | |
1264 | |
1265 div.sideblock .item.thumb img { | |
1266 width: 55px; | |
1267 height: 34px; | |
1268 } | |
1269 div.sideblock .item.thumb .text { | |
1270 padding-left: 0.5em; | |
1271 } | |
1272 | |
1273 /* | |
1274 * footer | |
1275 */ | |
1276 #footer { | |
1277 position: relative; | |
1278 height: 50px; | |
1279 border-top: 1px solid #dccbae; | |
1280 padding-top: 8px; | |
1281 margin-top: 29px; | |
1282 } | |
1283 | |
1284 #footer div.text { | |
1285 display: inline-block; | |
1286 color: #d45a00; | |
1287 font-size: 11px; | |
1288 } | |
1289 | |
1290 #footer div.logo { | |
1291 display: inline-block; | |
1292 position: absolute; | |
1293 right: 0; | |
1294 } | |
1295 | |
1296 #footer div.logo img { | |
1297 width: 204px; | |
1298 height: 41px; | |
1299 } | |
1300 /* extension */ | |
1301 | |
1302 #header div.title { | |
1303 width: 750px; | |
1304 top: 15px; | |
1305 | |
1306 } | |
1307 | |
1308 #header div.logo img { | |
1309 width: 100%; | |
1310 height: 100px; | |
1311 | |
1312 } |