0
|
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 }
|