|
2
|
1 /* MPIWG website style sheet
|
|
|
2 *
|
|
11
|
3 * (c) 2013 MPIWG Berlin
|
|
|
4 * Author: Robert Casties
|
|
2
|
5 */
|
|
|
6
|
|
|
7
|
|
|
8
|
|
|
9 body {
|
|
|
10 margin: 0;
|
|
|
11 font-family: Verdana, Arial, sans-serif;
|
|
|
12 background-color: #fdf8ef;
|
|
|
13 font-size: 12px;
|
|
|
14 }
|
|
|
15
|
|
|
16 /*
|
|
|
17 * global styles
|
|
|
18 */
|
|
|
19
|
|
|
20 img {
|
|
|
21 border: none;
|
|
|
22 }
|
|
|
23
|
|
|
24 a {
|
|
4
|
25 color: #d45a00;
|
|
2
|
26 text-decoration: none;
|
|
|
27 }
|
|
|
28
|
|
|
29 a:hover {
|
|
|
30 text-decoration: underline;
|
|
|
31 }
|
|
|
32
|
|
|
33 /* new link-classes (with icons) */
|
|
|
34
|
|
|
35 a.internal {
|
|
|
36 background: url(../images/arr_more.gif) no-repeat;
|
|
|
37 padding-left: 12px;
|
|
|
38 padding-top: 1px;
|
|
|
39 }
|
|
|
40
|
|
|
41 a.download {
|
|
|
42 background: url(../images/download.gif) no-repeat;
|
|
|
43 padding-left: 17px;
|
|
|
44 /* padding-top:1px; */
|
|
|
45 }
|
|
|
46
|
|
|
47 a.external {
|
|
|
48 background: url(../images/external.gif) no-repeat;
|
|
|
49 padding-left: 15px;
|
|
|
50 /* padding-top:1px; */
|
|
|
51 }
|
|
|
52 a.pdf {
|
|
|
53 background: url(../images/pdf.gif) no-repeat;
|
|
|
54 padding-left: 15px;
|
|
|
55 /* padding-top:1px; */
|
|
|
56 }
|
|
|
57
|
|
|
58 a.audio {
|
|
|
59 background: url(../images/audio.gif) no-repeat;
|
|
|
60 padding-left: 15px;
|
|
|
61 /* padding-top:1px; */
|
|
|
62 }
|
|
|
63
|
|
|
64 a.book {
|
|
|
65 background: url(../images/book.gif) no-repeat;
|
|
|
66 padding-left: 20px;
|
|
|
67 margin-left: -5px;
|
|
|
68 margin-top: -1px;
|
|
|
69 }
|
|
|
70
|
|
|
71 a.maillink {
|
|
4
|
72 color: #3b4186 !important;
|
|
|
73 }
|
|
|
74
|
|
|
75 h1 {
|
|
|
76 color: #3b4186;
|
|
11
|
77 font-size: 20px;
|
|
|
78 font-weight: normal;
|
|
8
|
79 margin: 0.5em 0;
|
|
2
|
80 }
|
|
11
|
81 h1:first-child {
|
|
|
82 /* does this work correctly? */
|
|
|
83 margin-top: 0;
|
|
|
84 }
|
|
2
|
85
|
|
4
|
86 h2 {
|
|
|
87 color: #3b4186;
|
|
5
|
88 font-size: 16px;
|
|
4
|
89 font-weight: normal;
|
|
8
|
90 margin: 0.5em 0;
|
|
4
|
91 }
|
|
|
92
|
|
|
93 h3 {
|
|
|
94 color: #3b4186;
|
|
5
|
95 font-size: 14px;
|
|
4
|
96 font-weight: normal;
|
|
6
|
97 margin: 0;
|
|
4
|
98 }
|
|
|
99
|
|
2
|
100 h1 a {
|
|
|
101 /* a header with a link looks like a header */
|
|
|
102 color: inherit;
|
|
|
103 font-weight: inherit;
|
|
|
104 text-decoration: none;
|
|
|
105 }
|
|
|
106
|
|
7
|
107 p {
|
|
8
|
108 margin: 0.5em 0;
|
|
|
109 line-height: 1.5;
|
|
7
|
110 }
|
|
2
|
111
|
|
11
|
112 ul.inline {
|
|
|
113 padding: 0;
|
|
|
114 margin: 0;
|
|
|
115 }
|
|
|
116 ul.inline li {
|
|
|
117 display: inline;
|
|
|
118 }
|
|
|
119
|
|
|
120 div.rows {
|
|
|
121 display: table;
|
|
|
122 }
|
|
|
123
|
|
|
124 div.row {
|
|
|
125 display: table-row;
|
|
|
126 }
|
|
|
127
|
|
|
128 div.row div.block {
|
|
|
129 display: table-cell;
|
|
|
130 vertical-align: top;
|
|
|
131 }
|
|
|
132 div.row div.block:first-child {
|
|
|
133 /* first block has no left margin */
|
|
|
134 padding-left: 0 !important;
|
|
|
135 }
|
|
|
136
|
|
|
137 div.block h2 {
|
|
|
138 margin-top: 35px;
|
|
|
139 padding-bottom: 5px;
|
|
|
140 border-bottom: 3px solid #dccbae;
|
|
|
141 margin-bottom: 0;
|
|
|
142 }
|
|
|
143
|
|
|
144 div.item {
|
|
|
145 padding-top: 5px;
|
|
|
146 padding-bottom: 5px;
|
|
|
147 border-bottom: 1px solid #dccbae;
|
|
|
148 line-height: 1.5;
|
|
|
149 }
|
|
8
|
150
|
|
2
|
151 /*
|
|
11
|
152 * page wrapper and header
|
|
2
|
153 */
|
|
|
154
|
|
|
155 #wrapper {
|
|
4
|
156 width: 900px;
|
|
2
|
157 margin: 0 auto;
|
|
4
|
158 padding: 10px 40px 10px 20px;
|
|
2
|
159 background-color: #fcf2df;
|
|
4
|
160 box-shadow: 0 0 5px 3px #d0d0d0;
|
|
2
|
161 }
|
|
|
162
|
|
|
163 #header {
|
|
8
|
164 display: block;
|
|
|
165 position: relative;
|
|
|
166 height: 95px;
|
|
2
|
167 margin: 0 0 10px 0;
|
|
|
168 }
|
|
|
169
|
|
|
170 #header div.title {
|
|
4
|
171 position: absolute;
|
|
|
172 left: 0;
|
|
8
|
173 top: 25px;
|
|
2
|
174 }
|
|
8
|
175 #header div.title img {
|
|
|
176 width: 661px;
|
|
|
177 height: 40px;
|
|
|
178 }
|
|
2
|
179 #header div.logo {
|
|
4
|
180 position: absolute;
|
|
|
181 right: 0;
|
|
8
|
182 }
|
|
|
183 #header div.logo img {
|
|
2
|
184 width: 87px;
|
|
|
185 height: 88px;
|
|
|
186 }
|
|
|
187
|
|
6
|
188 /*
|
|
|
189 * Main Navigation
|
|
|
190 */
|
|
2
|
191 #mainnav {
|
|
8
|
192 display: block;
|
|
4
|
193 position: relative;
|
|
|
194 font-family: Verdana, Arial, sans-serif;
|
|
|
195 font-size: 12px;
|
|
2
|
196 border-top: 8px solid #fab775;
|
|
6
|
197 padding-top: 5px;
|
|
8
|
198 margin-bottom: 15px;
|
|
6
|
199 }
|
|
|
200 #mainnav ul {
|
|
|
201 padding: 0;
|
|
|
202 margin: 0;
|
|
|
203 }
|
|
|
204 #mainnav li.sec {
|
|
|
205 display: inline;
|
|
|
206 border-top: 8px solid #fab775;
|
|
|
207 margin: 0 35px 0 0;
|
|
2
|
208 padding-top: 5px;
|
|
|
209 }
|
|
|
210
|
|
6
|
211 #mainnav li.sec:hover {
|
|
8
|
212 border-top: 8px solid #d45a00;
|
|
2
|
213 }
|
|
|
214
|
|
|
215 #mainnav a {
|
|
4
|
216 color: #696968;
|
|
2
|
217 outline: none;
|
|
|
218 }
|
|
|
219
|
|
|
220 #mainnav a:hover {
|
|
|
221 color: #000000;
|
|
|
222 text-decoration: none;
|
|
|
223 }
|
|
|
224
|
|
6
|
225 #mainnav li.sec.on {
|
|
8
|
226 border-top: 8px solid #d45a00;
|
|
2
|
227 }
|
|
|
228
|
|
6
|
229 #mainnav li.sec.on a {
|
|
8
|
230 color: #d45a00;
|
|
2
|
231 outline: none;
|
|
|
232 font-weight: bold;
|
|
|
233 }
|
|
|
234
|
|
6
|
235 #mainnav li.sec.lang {
|
|
4
|
236 position: absolute;
|
|
8
|
237 right: 0;
|
|
4
|
238 top: -8px;
|
|
2
|
239 margin-right: 0;
|
|
|
240 }
|
|
|
241
|
|
8
|
242 /*
|
|
|
243 * breadcrumbs
|
|
|
244 */
|
|
|
245 #breadcrumbs {
|
|
|
246 font-size: 11px;
|
|
|
247 color: #6a4d3c;
|
|
|
248 margin-bottom: 5px;
|
|
|
249 }
|
|
|
250
|
|
|
251 #breadcrumbs a {
|
|
|
252 color: #6a4d3c;
|
|
|
253 }
|
|
|
254
|
|
|
255 #breadcrumbs .selected {
|
|
|
256 font-weight: bold;
|
|
|
257 }
|
|
|
258
|
|
|
259 /*
|
|
|
260 * main section wrapper
|
|
|
261 */
|
|
|
262 #mainrow {
|
|
|
263 display: table-row;
|
|
|
264 }
|
|
|
265
|
|
|
266
|
|
2
|
267 /*
|
|
|
268 * subnavigation
|
|
|
269 */
|
|
|
270
|
|
|
271 div.leftbox {
|
|
8
|
272 display: table-cell;
|
|
|
273 vertical-align: top;
|
|
2
|
274 width: 170px;
|
|
8
|
275 border-top: 3px solid #dccbae;
|
|
2
|
276 }
|
|
|
277
|
|
|
278 div.subnav {
|
|
|
279 font-size: 11px;
|
|
|
280 }
|
|
|
281
|
|
8
|
282 div.subnav ul {
|
|
|
283 margin: 0;
|
|
|
284 padding: 0;
|
|
|
285 }
|
|
|
286
|
|
|
287 div.subnav li {
|
|
|
288 list-style-type: none;
|
|
2
|
289 border-bottom: 1px solid #dccbae;
|
|
8
|
290 padding: 3px 6px 6px 3px;
|
|
2
|
291 }
|
|
|
292
|
|
|
293 div.subnav .sn_on {
|
|
8
|
294 padding-left: 6px;
|
|
|
295 background: #d45a00;
|
|
2
|
296 }
|
|
|
297
|
|
|
298 div.subnav .sn_on a {
|
|
8
|
299 color: #fcf2df;
|
|
2
|
300 font-weight: bold;
|
|
|
301 }
|
|
|
302
|
|
8
|
303 div.subnavbox {
|
|
|
304 /* navigation below e.g. research projects */
|
|
|
305 font-size: 11px;
|
|
|
306 margin-top: 30px;
|
|
|
307 }
|
|
|
308
|
|
2
|
309 div.subnav .sn_off .dept {
|
|
|
310 font-style: italic;
|
|
|
311 color: #b69f7b;
|
|
|
312 }
|
|
|
313
|
|
|
314 div.subnav .sn_on .dept {
|
|
|
315 font-style: italic;
|
|
|
316 color: #f9f4e1;
|
|
|
317 }
|
|
|
318
|
|
|
319 div.subnavbox h2 {
|
|
|
320 font-size: 11px;
|
|
|
321 color: #b69f7b;
|
|
8
|
322 padding-bottom: 3px;
|
|
|
323 border-bottom: 1px solid #dccbae;
|
|
2
|
324 margin-top: 20px;
|
|
|
325 }
|
|
|
326
|
|
|
327 /*
|
|
6
|
328 * main section
|
|
2
|
329 */
|
|
|
330
|
|
6
|
331 div.main {
|
|
8
|
332 display: table-cell;
|
|
|
333 vertical-align: top;
|
|
|
334 background-color: white;
|
|
|
335 border-top: 3px solid #dccbae;
|
|
|
336 padding: 20px;
|
|
|
337 }
|
|
|
338
|
|
11
|
339 div.main div.center {
|
|
|
340 /* display: table; */
|
|
2
|
341 }
|
|
|
342
|
|
11
|
343 div.main div.row div.block {
|
|
|
344 padding-left: 20px;
|
|
2
|
345 }
|
|
|
346
|
|
11
|
347 /*
|
|
|
348 * frontpage
|
|
|
349 */
|
|
2
|
350
|
|
8
|
351 div.main.home {
|
|
|
352 background-color: transparent;
|
|
|
353 border-top: 0;
|
|
|
354 padding: 0;
|
|
|
355 }
|
|
2
|
356
|
|
8
|
357 div.main.home div.row div.block {
|
|
|
358 width: 286px;
|
|
|
359 padding-left: 21px;
|
|
|
360 }
|
|
6
|
361 div.main.home div.row div.block b {
|
|
|
362 /* bold is blue */
|
|
|
363 color: #3b4186;
|
|
2
|
364 }
|
|
6
|
365 div.main.home div.row div.block h2 {
|
|
|
366 /* more-links in title are right */
|
|
|
367 position: relative;
|
|
2
|
368 }
|
|
6
|
369 div.main.home div.row div.block h2 a:link {
|
|
|
370 /* more-links in title are right */
|
|
|
371 position: absolute;
|
|
|
372 right: 0;
|
|
|
373 top: 3px;
|
|
|
374 /* more-links in title are small */
|
|
|
375 font-size: 12px;
|
|
2
|
376 }
|
|
|
377
|
|
|
378 /*
|
|
11
|
379 * front page feature
|
|
2
|
380 */
|
|
|
381
|
|
6
|
382 div.row.feature {
|
|
|
383 background-color: #f4e0c7;
|
|
2
|
384 }
|
|
|
385
|
|
8
|
386 div.teaser_image {
|
|
6
|
387 position: relative;
|
|
|
388 width: 593px;
|
|
|
389 height: 351px;
|
|
2
|
390 }
|
|
|
391
|
|
8
|
392 div.teaser_image div.caption {
|
|
|
393 /* caption inside image */
|
|
6
|
394 position: absolute;
|
|
|
395 bottom: 0;
|
|
|
396 padding: 3px;
|
|
|
397 text-align: right;
|
|
|
398 color: white;
|
|
2
|
399 font-size: 10px;
|
|
6
|
400 opacity: 0.8;
|
|
|
401 background-color: gray;
|
|
|
402 /* background-color: rgba(80,80,80,0.6); */
|
|
2
|
403 }
|
|
|
404
|
|
8
|
405 div.teaser_text {
|
|
6
|
406 position: relative;
|
|
|
407 padding-right: 21px;
|
|
2
|
408 }
|
|
8
|
409 /* feature number */
|
|
|
410 div.teaser_text div.feature_number {
|
|
6
|
411 position: absolute;
|
|
|
412 right: 14px;
|
|
|
413 top: 5px;
|
|
|
414 font-family: Georgia, Times, serif;
|
|
|
415 font-size: 26px;
|
|
|
416 color: #887163;
|
|
2
|
417 }
|
|
8
|
418 /* feature title */
|
|
|
419 div.teaser_text h1 {
|
|
6
|
420 font-size: 16px;
|
|
|
421 font-weight: normal;
|
|
|
422 margin-top: 0;
|
|
2
|
423 }
|
|
6
|
424 /* "current research topic */
|
|
8
|
425 div.teaser_text h2 {
|
|
6
|
426 font-size: 14px;
|
|
|
427 color: #887163;
|
|
|
428 margin-bottom: 0;
|
|
7
|
429 margin-top: 15px;
|
|
8
|
430 border-bottom: 0 !important;
|
|
2
|
431 }
|
|
6
|
432 /* feature date */
|
|
8
|
433 div.teaser_text h3 {
|
|
6
|
434 margin-top: 20px;
|
|
|
435 margin-bottom: 20px;
|
|
7
|
436 font-size: 12px;
|
|
2
|
437 }
|
|
8
|
438
|
|
|
439 /*
|
|
11
|
440 * toolboxes
|
|
|
441 */
|
|
|
442 div.tool.block {
|
|
|
443 background-color: #efeeec;
|
|
|
444 color: black;
|
|
|
445 padding: 20px;
|
|
|
446 box-shadow: 0 0 1px 1px #e0e0e0;
|
|
|
447 }
|
|
|
448
|
|
|
449 div.tool.block a {
|
|
|
450 color: #3b4186;
|
|
|
451 }
|
|
|
452
|
|
|
453 div.tool.block div.searchbox {
|
|
|
454 /* only to make it shrink-wrap */
|
|
|
455 display: table-cell;
|
|
|
456 }
|
|
|
457 div.tool.block div.searchbox input.text {
|
|
|
458 height: 20px;
|
|
|
459 width: 380px;
|
|
|
460 background-color: #9fa0a7;
|
|
|
461 color: white;
|
|
|
462 font-size: 14px;
|
|
|
463 font-style: italic;
|
|
|
464 border: 0;
|
|
|
465 padding: 3px;
|
|
|
466 }
|
|
|
467 div.tool.block div.searchbox input.submit {
|
|
|
468 /* submit uses border-box. don't ask */
|
|
|
469 height: 26px;
|
|
|
470 width: 26px;
|
|
|
471 background-color: #ee7f2d;
|
|
|
472 /* TODO: this should be an image */
|
|
|
473 color: white;
|
|
|
474 font-size: 14px;
|
|
|
475 border: 0;
|
|
|
476 padding: 2px 3px 4px 3px;
|
|
|
477 }
|
|
|
478
|
|
|
479 div.tool.block div.searchbox div.extended {
|
|
|
480 text-align: right;
|
|
|
481 padding: 5px 30px 5px 3px;
|
|
|
482 }
|
|
|
483
|
|
|
484 div.tool.block h3 {
|
|
|
485 font-family: Georgia, Times, serif;
|
|
|
486 font-style: italic;
|
|
|
487 font-size: 16px;
|
|
|
488 color: #887163;
|
|
|
489 margin: 0.5em 0;
|
|
|
490 }
|
|
|
491
|
|
|
492 div.tool.block div.atoz {
|
|
|
493 color: #887163;
|
|
|
494 font-size: 14px;
|
|
|
495 }
|
|
|
496
|
|
|
497 /*
|
|
|
498 * sources
|
|
|
499 */
|
|
|
500 div.block div.source,
|
|
|
501 div.block div.website {
|
|
|
502 padding: 10px 0;
|
|
|
503 }
|
|
|
504
|
|
|
505 div.block div.source div.thumb,
|
|
|
506 div.block div.website div.thumb {
|
|
|
507 background-color: #f8f8f8;
|
|
|
508 text-align: center;
|
|
|
509 }
|
|
|
510
|
|
|
511 div.block div.source div.caption,
|
|
|
512 div.block div.website div.caption {
|
|
|
513 font-size: 11px;
|
|
|
514 color: #9f917a;
|
|
|
515 }
|
|
|
516
|
|
|
517 div.block div.source div.author {
|
|
|
518 color: #3b4186;
|
|
|
519 }
|
|
|
520
|
|
|
521
|
|
|
522 /*
|
|
8
|
523 * sidebar
|
|
|
524 */
|
|
|
525 div.sidebar {
|
|
|
526 display: table-cell;
|
|
|
527 width: 220px;
|
|
|
528 border-top: 3px solid #dccbae;
|
|
|
529 background-color: white;
|
|
|
530 padding: 20px 8px 20px 0;
|
|
|
531 }
|
|
|
532
|
|
|
533 div.sideblock h2 {
|
|
|
534 font-size: 12px;
|
|
|
535 margin-top: 20px;
|
|
|
536 padding-bottom: 5px;
|
|
|
537 border-bottom: 3px solid #dccbae;
|
|
|
538 margin-bottom: 0;
|
|
|
539 }
|
|
|
540 div.sideblock:first-child h2 {
|
|
|
541 margin-top: 0;
|
|
7
|
542 }
|
|
2
|
543
|
|
|
544 /*
|
|
|
545 * footer
|
|
|
546 */
|
|
|
547
|
|
8
|
548 #footer {
|
|
6
|
549 position: relative;
|
|
|
550 height: 50px;
|
|
2
|
551 border-top: 1px solid #dccbae;
|
|
6
|
552 padding-top: 8px;
|
|
8
|
553 margin-top: 29px;
|
|
2
|
554 }
|
|
|
555
|
|
8
|
556 #footer div.text {
|
|
6
|
557 display: inline-block;
|
|
|
558 color: #d45a00;
|
|
|
559 font-size: 11px;
|
|
2
|
560 }
|
|
|
561
|
|
8
|
562 #footer div.logo {
|
|
6
|
563 display: inline-block;
|
|
|
564 position: absolute;
|
|
|
565 right: 0;
|
|
2
|
566 }
|
|
|
567
|
|
8
|
568 #footer div.logo img {
|
|
6
|
569 width: 204px;
|
|
|
570 height: 41px;
|
|
2
|
571 }
|
