Mercurial > hg > MPIWGWeb

comparison css/mpiwg.css @ 25:5a4b22fa726c

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
more work on project navigation.
author casties
date Wed, 10 Apr 2013 17:56:29 +0200
parents 6a4996805505
children 8a99ad8713d6
comparison
equal deleted inserted replaced
24:6a4996805505 25:5a4b22fa726c
28 28
29 a:hover { 29 a:hover {
30 text-decoration: underline; 30 text-decoration: underline;
31 } 31 }
32 32
33 /* new link-classes (with icons) */ 33 /* link-classes (with icons) */
34 34
35 a.internal { 35 a.internal {
36 background: url(../images/arr_more.gif) no-repeat; 36 background: url(../images/internal.png) center left no-repeat;
37 padding-left: 12px; 37 padding-left: 10px;
38 padding-top: 1px;
39 } 38 }
40 39
41 a.download { 40 a.download {
42 background: url(../images/download.gif) no-repeat; 41 background: url(../images/download.png) center left no-repeat;
43 padding-left: 17px; 42 padding-left: 15px;
44 /* padding-top:1px; */
45 } 43 }
46 44
47 a.external { 45 a.external {
48 background: url(../images/external.gif) no-repeat; 46 background: url(../images/external.png) center left no-repeat;
49 padding-left: 15px; 47 padding-left: 15px;
50 /* padding-top:1px; */ 48 }
51 } 49
52 a.pdf { 50 a.pdf {
53 background: url(../images/pdf.gif) no-repeat; 51 background: url(../images/pdf.gif) no-repeat;
54 padding-left: 15px; 52 padding-left: 15px;
55 /* padding-top:1px; */ 53 /* padding-top:1px; */
56 } 54 }
57 55
58 a.audio { 56 a.audio {
59 background: url(../images/audio.gif) no-repeat; 57 background: url(../images/audio.png) center left no-repeat;
60 padding-left: 15px; 58 padding-left: 15px;
61 /* padding-top:1px; */ 59 }
60
61 a.down {
62 background: url(../images/down.png) center left no-repeat;
63 padding-left: 15px;
62 } 64 }
63 65
64 a.book { 66 a.book {
65 background: url(../images/book.gif) no-repeat; 67 background: url(../images/book.gif) no-repeat;
66 padding-left: 20px; 68 padding-left: 20px;
123 125
124 div.row { 126 div.row {
125 display: table-row; 127 display: table-row;
126 } 128 }
127 129
128 div.row div.block { 130 div.row div.col {
129 display: table-cell; 131 display: table-cell;
130 vertical-align: top; 132 vertical-align: top;
131 } 133 }
132 div.row div.block:first-child { 134 div.row div.col:first-child {
133 /* first block has no left margin */ 135 /* first block has no left margin */
134 padding-left: 0 !important; 136 padding-left: 0 !important;
135 } 137 }
136 138
137 div.block h2 { 139 div.box h2 {
138 margin-top: 35px; 140 margin-top: 35px;
139 padding-bottom: 5px; 141 padding-bottom: 5px;
140 border-bottom: 3px solid #dccbae; 142 border-bottom: 3px solid #dccbae;
141 margin-bottom: 0; 143 margin-bottom: 0;
142 } 144 }
302 div.subnav .sn_on a { 304 div.subnav .sn_on a {
303 color: #fcf2df; 305 color: #fcf2df;
304 font-weight: bold; 306 font-weight: bold;
305 } 307 }
306 308
309 div.subnav h2.subnavhead {
310 background-color: white;
311 color: #d45a00;
312 border-bottom: 1px solid #dccbae;
313 font-size: 11px;
314 font-weight: bold;
315 margin: 0;
316 padding: 5px 3px;
317 }
318
319 div.subnav li.dept {
320 padding-left: 18px;
321 list-style-position: inside;
322 list-style-image: url(../images/internal.png);
323 text-indent: -14px;
324 }
325
326 div.subnav li.dept .type {
327 font-style: italic;
328 color: #6a4d3c;
329 }
330
331 div.subnav li.dept.sn_on .type {
332 color: #f9f4e1;
333 }
334
307 div.subnavbox { 335 div.subnavbox {
308 /* navigation below e.g. research projects */ 336 /* navigation below e.g. research projects */
309 font-size: 11px; 337 font-size: 11px;
310 margin-top: 30px; 338 margin-top: 30px;
311 }
312
313 div.subnav .sn_off .dept {
314 font-style: italic;
315 color: #b69f7b;
316 }
317
318 div.subnav .sn_on .dept {
319 font-style: italic;
320 color: #f9f4e1;
321 } 339 }
322 340
323 div.subnavbox h2 { 341 div.subnavbox h2 {
324 font-size: 11px; 342 font-size: 11px;
325 color: #b69f7b; 343 color: #b69f7b;
342 360
343 div.main div.center { 361 div.main div.center {
344 /* display: table; */ 362 /* display: table; */
345 } 363 }
346 364
347 div.main div.row div.block { 365 div.main div.row div.col {
348 padding-left: 20px; 366 padding-left: 20px;
349 } 367 }
350 368
351 /* 369 /*
352 * frontpage 370 * frontpage
356 background-color: transparent; 374 background-color: transparent;
357 border-top: 0; 375 border-top: 0;
358 padding: 0; 376 padding: 0;
359 } 377 }
360 378
361 div.main.home div.row div.block { 379 div.main.home div.row div.col {
362 width: 286px; 380 width: 286px;
363 padding-left: 21px; 381 padding-left: 21px;
364 } 382 }
365 div.main.home div.row div.block b { 383 div.main.home div.row div.col b {
366 /* bold is blue */ 384 /* bold is blue */
367 color: #3b4186; 385 color: #3b4186;
368 } 386 }
369 div.main.home div.row div.block h2 { 387 div.main.home div.row div.col h2 {
370 /* more-links in title are right */ 388 /* more-links in title are right */
371 position: relative; 389 position: relative;
372 } 390 }
373 div.main.home div.row div.block h2 a:link { 391 div.main.home div.row div.col h2 a:link {
374 /* more-links in title are right */ 392 /* more-links in title are right */
375 position: absolute; 393 position: absolute;
376 right: 0; 394 right: 0;
377 top: 3px; 395 top: 3px;
378 /* more-links in title are small */ 396 /* more-links in title are small */
459 } 477 }
460 478
461 /* 479 /*
462 * toolboxes 480 * toolboxes
463 */ 481 */
464 div.tool.block { 482 div.tool.box {
465 background-color: #efeeec; 483 background-color: #efeeec;
466 color: black; 484 color: black;
467 padding: 20px; 485 padding: 20px;
468 box-shadow: 0 0 1px 1px #e0e0e0; 486 box-shadow: 0 0 1px 1px #e0e0e0;
469 } 487 }
470 488
471 div.tool.block a { 489 div.tool.box a {
472 color: #3b4186; 490 color: #3b4186;
473 } 491 }
474 492
475 div.tool.block div.searchbox { 493 div.tool.box div.searchbox {
476 /* only to make it shrink-wrap */ 494 /* only to make it shrink-wrap */
477 display: table-cell; 495 display: table-cell;
478 } 496 }
479 div.tool.block div.searchbox input.text { 497 div.tool.box div.searchbox input.text {
480 height: 20px; 498 height: 20px;
481 width: 380px; 499 width: 380px;
482 background-color: #9fa0a7; 500 background-color: #9fa0a7;
483 color: white; 501 color: white;
484 font-size: 14px; 502 font-size: 14px;
485 font-style: italic; 503 font-style: italic;
486 border: 0; 504 border: 0;
487 padding: 3px; 505 padding: 3px;
488 } 506 }
489 div.tool.block div.searchbox input.submit { 507 div.tool.box div.searchbox input.submit {
490 /* submit uses border-box. don't ask */ 508 /* submit uses border-box. don't ask */
491 height: 26px; 509 height: 26px;
492 width: 26px; 510 width: 26px;
493 border: 0; 511 border: 0;
494 padding: 2px 3px 4px 3px; 512 padding: 2px 3px 4px 3px;
496 background-color: #ee7f2d; 514 background-color: #ee7f2d;
497 color: white; 515 color: white;
498 font-size: 14px; 516 font-size: 14px;
499 } 517 }
500 518
501 div.tool.block div.searchbox div.extended { 519 div.tool.box div.searchbox div.extended {
502 text-align: right; 520 text-align: right;
503 padding: 5px 30px 5px 3px; 521 padding: 5px 30px 5px 3px;
504 } 522 }
505 523
506 div.tool.block h3 { 524 div.tool.box h3 {
507 font-family: Georgia, Times, serif; 525 font-family: Georgia, Times, serif;
508 font-style: italic; 526 font-style: italic;
509 font-size: 16px; 527 font-size: 16px;
510 color: #887163; 528 color: #887163;
511 margin: 0.5em 0; 529 margin: 0.5em 0;
512 } 530 }
513 div.tool.block h3:first-child { 531 div.tool.box h3:first-child {
514 /* does this work correctly? */ 532 /* does this work correctly? */
515 margin-top: 0; 533 margin-top: 0;
516 } 534 }
517 535
518 div.tool.block ul { 536 div.tool.box ul {
519 margin: 0; 537 margin: 0;
520 padding: 0; 538 padding: 0;
521 } 539 }
522 540
523 div.tool.block div.options li { 541 div.tool.box div.options li {
524 font-family: Georgia, Times, serif; 542 font-family: Georgia, Times, serif;
525 font-style: italic; 543 font-style: italic;
526 font-size: 16px; 544 font-size: 16px;
527 color: #887163; 545 color: #887163;
528 list-style-type: none; 546 list-style-type: none;
529 margin: 0.5em 0; 547 margin: 0.5em 0;
530 } 548 }
531 549
532 div.tool.block div.options { 550 div.tool.box div.options {
533 margin-top: 20px; 551 margin-top: 20px;
534 } 552 }
535 553
536 div.tool.block div.atoz { 554 div.tool.box div.atoz {
537 color: #887163; 555 color: #887163;
538 font-size: 14px; 556 font-size: 14px;
539 } 557 }
540 558
541 div.tool.block input.checkbox, 559 div.tool.box input.checkbox,
542 div.tool.block input.radio { 560 div.tool.box input.radio {
543 /* checkbox uses border-box. don't ask */ 561 /* checkbox uses border-box. don't ask */
544 width: 20px; 562 width: 20px;
545 height: 20px; 563 height: 20px;
546 margin: 0; 564 margin: 0;
547 /* TODO: this should be an image */ 565 /* TODO: this should be an image */
549 } 567 }
550 568
551 /* 569 /*
552 * sources and websites 570 * sources and websites
553 */ 571 */
554 div.block div.source, 572 div.box div.source,
555 div.block div.website { 573 div.box div.website {
556 padding: 10px 0; 574 padding: 10px 0;
557 } 575 }
558 576
559 div.block div.source div.thumb, 577 div.box div.source div.thumb,
560 div.block div.website div.thumb { 578 div.box div.website div.thumb {
561 background-color: #f8f8f8; 579 background-color: #f8f8f8;
562 text-align: center; 580 text-align: center;
563 } 581 }
564 582
565 div.block div.source div.caption, 583 div.box div.source div.caption,
566 div.block div.website div.caption { 584 div.box div.website div.caption {
567 font-size: 11px; 585 font-size: 11px;
568 color: #9f917a; 586 color: #9f917a;
569 } 587 }
570 588
571 div.block div.source div.author, 589 div.box div.source div.author,
572 div.block div.website div.title { 590 div.box div.website div.title {
573 color: #3b4186; 591 color: #3b4186;
574 } 592 }
575 593
576 div.block div.website div.description { 594 div.box div.website div.description {
577 /* initially hidden */ 595 /* initially hidden */
578 display: none; 596 display: none;
579 } 597 }
580 598
581 div.block div.website.item { 599 div.box div.website.item {
582 min-height: 180px; 600 min-height: 180px;
583 position: relative; 601 position: relative;
584 margin: 10px 0 0 0; 602 margin: 10px 0 0 0;
585 } 603 }
586 604
587 div.block div.website.item div.fold { 605 div.box div.website.item div.fold {
588 position: absolute; 606 position: absolute;
589 bottom: 0; 607 bottom: 0;
590 right: 0; 608 right: 0;
591 /* TODO: this should be an image */ 609 /* TODO: this should be an image */
592 background-color: #ee7f2d; 610 background-color: #ee7f2d;