Mercurial > hg > MPIWGWeb

comparison css/mpiwg.css.inlinebox @ 8:0a7691055ea3

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