|
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;
|
|
6
|
78 margin: 10px 0 10px 0;
|
|
2
|
79 }
|
|
|
80
|
|
4
|
81 h2 {
|
|
|
82 color: #3b4186;
|
|
5
|
83 font-size: 16px;
|
|
4
|
84 font-weight: normal;
|
|
6
|
85 margin: 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
|
|
|
102
|
|
|
103 /*
|
|
|
104 * header and wrapper
|
|
|
105 */
|
|
|
106
|
|
|
107 #wrapper {
|
|
4
|
108 width: 900px;
|
|
2
|
109 margin: 0 auto;
|
|
4
|
110 padding: 10px 40px 10px 20px;
|
|
2
|
111 background-color: #fcf2df;
|
|
4
|
112 box-shadow: 0 0 5px 3px #d0d0d0;
|
|
2
|
113 }
|
|
|
114
|
|
|
115 #header {
|
|
4
|
116 position: relative;
|
|
2
|
117 width: 900px;
|
|
4
|
118 height: 90px;
|
|
2
|
119 margin: 0 0 10px 0;
|
|
|
120 }
|
|
|
121
|
|
|
122 #header div.title {
|
|
|
123 display: inline;
|
|
4
|
124 position: absolute;
|
|
|
125 left: 0;
|
|
|
126 top: 20px;
|
|
|
127 width: 661px;
|
|
2
|
128 height: 40px;
|
|
|
129 }
|
|
|
130
|
|
|
131 #header div.logo {
|
|
|
132 display: inline;
|
|
4
|
133 position: absolute;
|
|
|
134 right: 0;
|
|
2
|
135 width: 87px;
|
|
|
136 height: 88px;
|
|
|
137 }
|
|
|
138
|
|
6
|
139 /*
|
|
|
140 * Main Navigation
|
|
|
141 */
|
|
2
|
142 #mainnav {
|
|
4
|
143 position: relative;
|
|
2
|
144 width: 900px;
|
|
4
|
145 font-family: Verdana, Arial, sans-serif;
|
|
|
146 font-size: 12px;
|
|
2
|
147 border-top: 8px solid #fab775;
|
|
6
|
148 padding-top: 5px;
|
|
|
149 margin-bottom: 40px;
|
|
|
150 }
|
|
|
151 #mainnav ul {
|
|
|
152 padding: 0;
|
|
|
153 margin: 0;
|
|
|
154 }
|
|
|
155 #mainnav li.sec {
|
|
|
156 display: inline;
|
|
|
157 border-top: 8px solid #fab775;
|
|
|
158 margin: 0 35px 0 0;
|
|
2
|
159 padding-top: 5px;
|
|
|
160 }
|
|
|
161
|
|
6
|
162 #mainnav li.sec:hover {
|
|
2
|
163 border-top: 8px solid #ea8500;
|
|
|
164 }
|
|
|
165
|
|
|
166 #mainnav a {
|
|
4
|
167 color: #696968;
|
|
2
|
168 outline: none;
|
|
|
169 }
|
|
|
170
|
|
|
171 #mainnav a:hover {
|
|
|
172 color: #000000;
|
|
|
173 text-decoration: none;
|
|
|
174 }
|
|
|
175
|
|
6
|
176 #mainnav li.sec.on {
|
|
2
|
177 border-top: 8px solid #ea8500;
|
|
|
178 }
|
|
|
179
|
|
6
|
180 #mainnav li.sec.on a {
|
|
2
|
181 color: #ea8500;
|
|
|
182 outline: none;
|
|
|
183 font-weight: bold;
|
|
|
184 }
|
|
|
185
|
|
6
|
186 #mainnav li.sec.lang {
|
|
4
|
187 position: absolute;
|
|
|
188 right: 0;
|
|
|
189 top: -8px;
|
|
2
|
190 margin-right: 0;
|
|
|
191 }
|
|
|
192
|
|
|
193 /*
|
|
|
194 * subnavigation
|
|
|
195 */
|
|
|
196
|
|
|
197 div.leftbox {
|
|
4
|
198 /* float: left; */
|
|
2
|
199 width: 170px;
|
|
|
200 }
|
|
|
201
|
|
|
202 div.subnav {
|
|
4
|
203 /* float: left; */
|
|
2
|
204 width: 170px;
|
|
|
205 font-size: 11px;
|
|
|
206 }
|
|
|
207
|
|
|
208 div.subnav .sn_off, .subnavbox .sn_off {
|
|
4
|
209 /* float: left; */
|
|
2
|
210 width: 164px;
|
|
|
211 border-bottom: 1px solid #dccbae;
|
|
|
212 padding: 3px 6px 6px 0;
|
|
|
213 }
|
|
|
214
|
|
|
215 div.subnav .sn_on {
|
|
4
|
216 /* float: left; */
|
|
2
|
217 width: 158px;
|
|
|
218 border-bottom: 1px solid #dccbae;
|
|
|
219 padding: 3px 6px 6px 6px;
|
|
|
220 background: #EA8500;
|
|
|
221 }
|
|
|
222
|
|
|
223 div.subnav .sn_on a {
|
|
|
224 color: #FCF2DF;
|
|
|
225 font-weight: bold;
|
|
|
226 }
|
|
|
227
|
|
|
228 div.subnav .sn_off .dept {
|
|
|
229 font-style: italic;
|
|
|
230 color: #b69f7b;
|
|
|
231 }
|
|
|
232
|
|
|
233 div.subnav .sn_on .dept {
|
|
|
234 font-style: italic;
|
|
|
235 color: #f9f4e1;
|
|
|
236 }
|
|
|
237
|
|
|
238 div.subnavbox {
|
|
|
239 /* navigation below e.g. research projects */
|
|
4
|
240 /* float: left; */
|
|
2
|
241 width: 170px;
|
|
|
242 font-size: 11px;
|
|
|
243 margin-top: 30px;
|
|
|
244 }
|
|
|
245
|
|
|
246 div.subnavbox h2 {
|
|
4
|
247 /* float: left; */
|
|
2
|
248 width: 170px;
|
|
|
249 height: 20px;
|
|
|
250 font-size: 11px;
|
|
|
251 color: #b69f7b;
|
|
|
252 margin-bottom: 0px;
|
|
|
253 padding-bottom: 3px;
|
|
|
254 margin-top: 20px;
|
|
|
255 background: transparent url(../images/side.gif) repeat-x;
|
|
|
256 }
|
|
|
257
|
|
|
258 /*
|
|
6
|
259 * main section
|
|
2
|
260 */
|
|
|
261
|
|
6
|
262 div.main {
|
|
2
|
263 }
|
|
|
264
|
|
6
|
265 div.row {
|
|
|
266 /* set font-size to ignore whitespace */
|
|
|
267 font-size: 0;
|
|
2
|
268 }
|
|
|
269
|
|
6
|
270 div.row div.block {
|
|
|
271 display: inline-block;
|
|
|
272 vertical-align: top;
|
|
|
273 /* reset font-size */
|
|
|
274 font-size: 12px;
|
|
|
275 line-height: 1.5;
|
|
2
|
276 }
|
|
6
|
277 div.row div.block:first-child {
|
|
|
278 /* first block has no left margin */
|
|
|
279 margin-left: 0 !important;
|
|
2
|
280 }
|
|
|
281
|
|
6
|
282 div.row.triple div.block {
|
|
|
283 width: 31.7%;
|
|
|
284 margin-left: 2.4%;
|
|
2
|
285 }
|
|
|
286
|
|
6
|
287 div.row div.block h2 {
|
|
|
288 padding-bottom: 3px;
|
|
|
289 margin-top: 35px;
|
|
|
290 border-bottom: 3px solid #dccbae;
|
|
2
|
291 }
|
|
|
292
|
|
6
|
293 div.row div.block div.item {
|
|
|
294 padding-top: 5px;
|
|
|
295 padding-bottom: 3px;
|
|
|
296 border-bottom: 1px solid #dccbae;
|
|
2
|
297 }
|
|
|
298
|
|
|
299
|
|
6
|
300 /* frontpage version */
|
|
2
|
301
|
|
6
|
302 div.main.home div.row div.block b {
|
|
|
303 /* bold is blue */
|
|
|
304 color: #3b4186;
|
|
2
|
305 }
|
|
6
|
306 div.main.home div.row div.block h2 {
|
|
|
307 /* more-links in title are right */
|
|
|
308 position: relative;
|
|
2
|
309 }
|
|
6
|
310 div.main.home div.row div.block h2 a:link {
|
|
|
311 /* more-links in title are right */
|
|
|
312 position: absolute;
|
|
|
313 right: 0;
|
|
|
314 top: 3px;
|
|
|
315 /* more-links in title are small */
|
|
|
316 font-size: 12px;
|
|
2
|
317 }
|
|
|
318
|
|
|
319 /*
|
|
6
|
320 * Front page feature
|
|
2
|
321 */
|
|
|
322
|
|
6
|
323 div.row.feature {
|
|
|
324 background-color: #f4e0c7;
|
|
2
|
325 }
|
|
|
326
|
|
6
|
327 div.row.feature div.block.teaser_image {
|
|
|
328 position: relative;
|
|
|
329 width: 593px;
|
|
|
330 height: 351px;
|
|
2
|
331 }
|
|
|
332
|
|
6
|
333 div.row.feature div.teaser_image div.caption {
|
|
|
334 position: absolute;
|
|
|
335 bottom: 0;
|
|
|
336 padding: 3px;
|
|
|
337 text-align: right;
|
|
|
338 color: white;
|
|
2
|
339 font-size: 10px;
|
|
6
|
340 opacity: 0.8;
|
|
|
341 background-color: gray;
|
|
|
342 /* background-color: rgba(80,80,80,0.6); */
|
|
2
|
343 }
|
|
|
344
|
|
6
|
345 div.row.feature div.block.teaser_text {
|
|
|
346 position: relative;
|
|
|
347 width: 265px;
|
|
|
348 margin-left: 21px;
|
|
|
349 padding-right: 21px;
|
|
2
|
350 }
|
|
|
351
|
|
6
|
352 div.row.feature div.block.teaser_text div.feature_number {
|
|
|
353 position: absolute;
|
|
|
354 right: 14px;
|
|
|
355 top: 5px;
|
|
|
356 font-family: Georgia, Times, serif;
|
|
|
357 font-size: 26px;
|
|
|
358 color: #887163;
|
|
2
|
359 }
|
|
6
|
360 /* title */
|
|
|
361 div.row.feature div.block.teaser_text h1 {
|
|
|
362 font-size: 16px;
|
|
|
363 font-weight: normal;
|
|
|
364 margin-top: 0;
|
|
2
|
365 }
|
|
6
|
366 /* "current research topic */
|
|
|
367 div.row.feature div.block.teaser_text h2 {
|
|
|
368 font-size: 14px;
|
|
|
369 color: #887163;
|
|
|
370 margin-bottom: 0;
|
|
2
|
371 }
|
|
6
|
372 /* feature date */
|
|
|
373 div.row.feature div.block.teaser_text h3 {
|
|
|
374 margin-top: 20px;
|
|
|
375 margin-bottom: 20px;
|
|
2
|
376 }
|
|
|
377
|
|
|
378
|
|
|
379 /*
|
|
|
380 * footer
|
|
|
381 */
|
|
|
382
|
|
6
|
383 div.footer {
|
|
|
384 position: relative;
|
|
2
|
385 width: 900px;
|
|
6
|
386 height: 50px;
|
|
2
|
387 border-top: 1px solid #dccbae;
|
|
6
|
388 padding-top: 8px;
|
|
|
389 margin-top: 45px;
|
|
2
|
390 }
|
|
|
391
|
|
6
|
392 div.footer div.text {
|
|
|
393 display: inline-block;
|
|
|
394 color: #d45a00;
|
|
|
395 font-size: 11px;
|
|
2
|
396 }
|
|
|
397
|
|
6
|
398 div.footer div.logo {
|
|
|
399 display: inline-block;
|
|
|
400 position: absolute;
|
|
|
401 right: 0;
|
|
2
|
402 }
|
|
|
403
|
|
6
|
404 div.footer div.logo img {
|
|
|
405 width: 204px;
|
|
|
406 height: 41px;
|
|
2
|
407 }
|
