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