Mercurial > hg > MPIWGWeb

comparison css/mpiwg.css @ 2:ddf6c1a27a4b

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
new version with main_template and css in product.
author casties
date Thu, 07 Feb 2013 19:50:39 +0100
parents
children 1a895905f7ca
comparison
equal deleted inserted replaced
1:1f2760ed3efe 2:ddf6c1a27a4b
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: #ee802d;
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: #485297 !important;
72 }
73
74 h1 a {
75 /* a header with a link looks like a header */
76 color: inherit;
77 font-weight: inherit;
78 text-decoration: none;
79 }
80
81 img.pic_large {
82 /* class for wide pictures used for example on institute/addres.html etc. */
83 margin-bottom: 20px;
84 }
85
86
87 /*
88 * header and wrapper
89 */
90
91 #wrapper {
92 /* float: left; */
93 width: 960px;
94 margin: 0 auto;
95 padding: 20px 0 0 20px;
96 background-color: #fcf2df;
97 }
98
99 #header {
100 /* float: left; */
101 width: 900px;
102 margin: 0 0 10px 0;
103 }
104
105 #header div.title {
106 display: inline;
107 /* float: left; */
108 width: 661px;
109 height: 40px;
110 }
111
112 #header div.title img {
113 margin-bottom: 30px;
114 }
115
116 #header div.logo {
117 display: inline;
118 /* float: right; */
119 width: 87px;
120 height: 88px;
121 }
122
123 #header div.logo img {
124 margin-left: 145px;
125 }
126
127 /* Main Navigation */
128
129 #mainnav {
130 /* float: left; */
131 width: 900px;
132 font-size: 12px;
133 border-top: 8px solid #fab775;
134 margin-bottom: 20px;
135 padding-top: 5px;
136 }
137
138 #mainnav div.sec {
139 display: inline;
140 /* float: left; */
141 border-top: 8px solid #fab775;
142 margin-top: -0px;
143 margin-right: 35px;
144 padding-top: 5px;
145 }
146
147 #mainnav div.sec:hover {
148 border-top: 8px solid #ea8500;
149 }
150
151 #mainnav a {
152 color: #666666;
153 outline: none;
154 }
155
156 #mainnav a:hover {
157 color: #000000;
158 text-decoration: none;
159 }
160
161 #mainnav div.sec.on {
162 border-top: 8px solid #ea8500;
163 }
164
165 #mainnav div.sec.on a {
166 color: #ea8500;
167 outline: none;
168 font-weight: bold;
169 }
170
171 #mainnav div.sec.lang {
172 float: right;
173 margin-top: -13px;
174 margin-right: 0;
175 }
176
177
178
179
180
181
182 /* Search */
183
184 div.search {
185 float: left;
186 width: 900px;
187 height: 25px;
188 }
189
190 #wrapper_home div.search {
191 float: right;
192 width: 220px;
193 }
194
195 .searchform {
196 float: right;
197 }
198
199 input.searchinput {
200 width: 211px;
201 padding-left: 18px;
202 border: 1px solid #dccbae;
203 background: url(../images/search.gif) no-repeat #FFFFFF;
204 color: #EA8500;
205 }
206
207
208
209
210
211
212 /* Breadcrumbs & Quicklinks */
213
214 div.quicklinks {
215 float: left;
216 width: 900px;
217 border-bottom: 3px solid #dccbae;
218 color: #EA8500;
219 }
220
221 #wrapper_home div.quicklinks {
222 float: right;
223 width: 230px;
224 border-bottom: none;
225 }
226
227 div.breadcrumbs {
228 float: left;
229 font-size: 10px;
230 color: #6a4d3c;
231 }
232
233 div.breadcrumbs a {
234 color: #6a4d3c;
235 text-decoration: none;
236 }
237
238 div.breadcrumbs .selected {
239 color: #6a4d3c;
240 font-weight: bold;
241 }
242
243 select.quickfind {
244 float: right;
245 width: 230px;
246 height: 20px;
247 padding: 2px 2px 2px 18px;
248 color: #EA8500;
249 font-size: 11px;
250 border: none;
251 background: url(../images/arr_qf.gif) no-repeat #f4daae;
252 }
253
254
255
256
257
258
259
260
261
262 /*
263 * Content
264 */
265
266 /* frontpage */
267
268 div.feature, div.feature .thumbnails {
269 float: left;
270 width: 650px;
271 /* margin-right: 20px; */
272 font-size: 12px;
273 line-height: 1.6;
274 }
275
276 div.feature .thumb {
277 float: left;
278 width: 129px;
279 margin-right: 1px;
280 margin-bottom: 1px;
281 }
282
283 div.feature .feature_image {
284 float: left;
285 width: 650px;
286 margin-bottom: 15px;
287 }
288
289 div.feature .caption {
290 text-align: right;
291 font-size: 10px;
292 color: #b69f7b;
293 margin-top: 5px;
294 }
295
296 div.feature h1 {
297 color: #485297;
298 font-size: 15px;
299 font-weight: bold;
300 margin: 10px 2px 2px 2px;
301 }
302
303 div.feature h2 {
304 color: #485297;
305 font-size: 15px;
306 font-weight:normal;
307 margin: 10px 2px 2px 2px;
308 }
309
310 div.feature p {
311 /* margin-top: 0.5em;
312 margin-bottom: 0.5em; */
313 }
314
315
316
317
318 /*
319 * main section
320 */
321
322 div.content {
323 float: left;
324 width: 900px;
325 }
326
327 div.main {
328 float: left;
329 width: 720px;
330 background-color: #FFFFFF;
331 margin-bottom: 10px;
332 padding-right: 10px;
333 font-size: 12px;
334 }
335
336 div.main div.center {
337 float: left;
338 width: 460px;
339 padding: 20px;
340 }
341
342
343 div.center, div.center_wide {
344 line-height: 1.6;
345 }
346 div.center ul {
347 list-style: none;
348 margin-left: 0;
349 padding: 0;
350 }
351
352 div.center li {
353 margin-bottom: 10px;
354 }
355
356
357 div.main div.center_wide {
358 float: left;
359 width: 710px;
360 /* padding: 20px 0 0 20px; */
361 padding: 20px;
362 }
363
364
365 div.main h1 {
366 color: #485297;
367 font-size: 15px;
368 font-weight: bold;
369 margin: 10px 2px 10px 2px;
370 }
371
372 div.main h2 {
373 color: #485297;
374 font-size: 15px;
375 font-weight: normal;
376 margin: 2px;
377 }
378
379 div.main h3 {
380 color: #485297;
381 font-size: 13px;
382 font-weight: normal;
383 margin: 2px;
384 }
385
386
387
388
389
390 /*
391 * subnavigation
392 */
393
394 div.leftbox {
395 float: left;
396 width: 170px;
397 }
398
399 div.subnav {
400 float: left;
401 width: 170px;
402 font-size: 11px;
403 }
404
405 div.subnav .sn_off, .subnavbox .sn_off {
406 float: left;
407 width: 164px;
408 border-bottom: 1px solid #dccbae;
409 padding: 3px 6px 6px 0;
410 }
411
412 div.subnav .sn_on {
413 float: left;
414 width: 158px;
415 border-bottom: 1px solid #dccbae;
416 padding: 3px 6px 6px 6px;
417 background: #EA8500;
418 }
419
420 div.subnav .sn_on a {
421 color: #FCF2DF;
422 font-weight: bold;
423 }
424
425 div.subnav .sn_off .dept {
426 font-style: italic;
427 color: #b69f7b;
428 }
429
430 div.subnav .sn_on .dept {
431 font-style: italic;
432 color: #f9f4e1;
433 }
434
435 div.subnavbox {
436 /* navigation below e.g. research projects */
437 float: left;
438 width: 170px;
439 font-size: 11px;
440 margin-top: 30px;
441 }
442
443 div.subnavbox h2 {
444 float: left;
445 width: 170px;
446 height: 20px;
447 font-size: 11px;
448 color: #b69f7b;
449 margin-bottom: 0px;
450 padding-bottom: 3px;
451 margin-top: 20px;
452 background: transparent url(../images/side.gif) repeat-x;
453 }
454
455
456
457
458
459
460 /*
461 * research section
462 */
463
464 div.center_wide.dept {
465 padding-left: 16px !important;
466 padding-right: 0 !important;
467 }
468
469 div.center.dept {
470 padding-left: 16px !important;
471 padding-right: 0 !important;
472 width: 480px !important;
473 }
474
475 div.dept_block {
476 float: left;
477 width: 221px;
478 min-height:420px;
479 border-bottom: 2px solid #979CE0;
480 margin-right: 15px;
481 margin-bottom: 20px;
482 font-size: 11px;
483 }
484
485 div.dept_block.clear {
486 clear:left;
487 }
488
489 div.dept_block.wide {
490 width: 460px !important;
491 min-height:0px !important;
492 height: auto !important;
493 }
494
495 div.dept_block.short {
496 min-height: 290px !important;
497 border-bottom: None;
498 }
499
500 div.dept_block h2 {
501 margin: 0 0 5px 0;
502 font-size: 13px;
503 font-weight: normal;
504 color: #485297;
505 }
506
507 div.dept_block.wide h2 {
508 margin: 0 0 5px 0;
509 font-size: 16px;
510 color: #485297;
511 }
512
513 div.dept_block h1 {
514 font-size: 13px;
515 font-weight: bold;
516 color: #485297;
517 }
518
519 div.dept_block.wide h1 {
520 font-size: 16px;
521 }
522
523 div.dept_block h2 a, div.dept_block h1 a {
524 color: #485297;
525 }
526
527 div.dept_block p {
528 font-size: 11px;
529 line-height: 1.6;
530 }
531
532 p.dept_leader, p.dept_summary {
533 /* legacy */
534 font-size: 11px;
535 line-height:1.4;
536 }
537
538
539
540 /*
541 * people list
542 */
543
544 div.namelist {
545 float: left;
546 clear: left;
547 padding-top: 10px;
548 }
549
550 div.namelist.line {
551 border-top: 3px solid #dccbae;
552 }
553 /* NEW */
554 div.namelist h2 {
555 border-bottom: 3px solid #dccbae;
556 }
557 div.namelist h2.noline {
558 border-bottom: none;
559 }
560 div.namelist.small {
561 font-size: 11px;
562 }
563
564 div.center_wide div.namelist {
565 width: 700px;
566 }
567 div.center div.namelist div.row {
568 width:100%;
569 }
570 div.namelist div.row {
571 float: left;
572 border-bottom: 1px solid #dccbae;
573 margin-top: 5px;
574 padding-bottom: 7px;
575 }
576 div.namelist div.row.noline {
577 border-bottom: none;
578 }
579
580 div.center_wide div.namelist div.row {
581 width: 700px;
582 }
583
584 div.namelist div.row:last-child {
585 border-bottom: none;
586 }
587
588 div.namelist .name {
589 display: block;
590 float: left;
591 width: 30%;
592 }
593
594 div.namelist.namelinks .name a {
595 color: #485297;
596 }
597
598 div.namelist .definition {
599 display: block;
600 float: left;
601 width: 70%;
602 }
603
604 div.namelist.namelinks .definition a {
605 color: #485297;
606 }
607
608 /* legacy */
609 div.namelist.namelinks .definition.normallinks a {
610 color: #EA8500;
611 }
612
613 div.list_disclaimer {
614 float: left;
615 width: 180px;
616 font-size: 10px;
617 margin-right: 20px;
618 }
619
620 div.letters {
621 float: left;
622 margin-right: 10px;
623 color: #EA8500;
624 }
625 div.letters a {
626 margin-left: 0.2em;
627 margin-right: 0.2em;
628 }
629
630 div.letter {
631 float: left;
632 width: 700px;
633 margin-top: 20px;
634 padding-bottom: 3px;
635 border-bottom: 3px solid #dccbae;
636 font-weight: bold;
637 font-size: 13px;
638 color: #dccbae;
639 }
640
641 div.jump_top {
642 float: left;
643 width: 700px;
644 text-align: right;
645 font-size: 10px;
646 }
647
648
649
650
651 /* bios */
652
653 p.bio_section_header {
654 color: #485297;
655 padding-bottom: 5px;
656 margin-bottom: 5px;
657 border-bottom: 1px solid #dccbae;
658 }
659
660
661
662 /*
663 * right sidebar
664 */
665
666 div.sidebar {
667 float: right;
668 width: 220px;
669 font-size: 10px;
670 line-height: 1.6;
671 /* margin-right: 10px; */
672 }
673
674 #wrapper_home .sidebar {
675 width: 230px;
676 }
677
678 div.sideblock {
679 /* border-bottom: 1px solid #dccbae; */
680 float: left;
681 clear: left;
682 }
683
684 div.sideblock h2 {
685 padding-bottom: 5px;
686 margin: 18px 0px 0px 0px;
687 /* brown bottom line
688 background: transparent url(../images/side.gif) repeat-x;
689 */
690 border-bottom: 3px solid #dccbae;
691 font-size: 12px;
692 color: #485297;
693 /*float:left;
694 clear:both;*/
695 font-weight: normal;
696 }
697
698 div.sideblock h2 a {
699 /* no longer so ugly hack to have right-adjust link... */
700 float: right;
701 color: #EA8500;
702 font-size: 10px;
703 }
704
705 div.sideblock h2 .proj_state {
706 /* right-adjusted block besides the title */
707 float: right;
708 font-size: 10px;
709 color: #b69f7b;
710 font-weight: bold;
711 }
712 div.sideblock h2 .proj_state a {
713 /* inside should not float */
714 float: none;
715 }
716
717 div.sideblock a.maillink {
718 color: #ea8500 !important;
719 }
720
721 div.sideblock .item, div.sideblock p {
722 float:left;
723 width:220px;
724 margin: 5px 0 0 0;
725 padding: 0 0 5px 0;
726 border-bottom: 1px solid #dccbae;
727
728 }
729
730 div.sideblock .item.noline {
731 border-bottom: none;
732 }
733
734 div.sideblock .project {
735 background: url(../images/arr_right.gif) no-repeat #f5daaf;
736 padding: 6px 6px 6px 20px;
737 border-bottom: 1px solid #f3be7c;
738 width:194px;
739 }
740
741 div.sideblock .project.inactive {
742 background: url(../images/arr_right.gif) no-repeat #f6e6cc;
743 width:194px;
744 }
745
746 div.sideblock .project.parent {
747 background: url(../images/arr_up.gif) no-repeat #f9f4e1;
748 color: #666666;
749 border-bottom: 1px solid #dccbae;
750 margin-top:20px;
751 }
752
753 div.sideblock .project a {
754 color: #333;
755 }
756
757 div.sideblock .item.featurearchive {
758 border-bottom:none;
759 float:left;
760 margin: 5px 0 10px 0;
761 padding: 0 0 5px 0;
762 border-bottom: None;
763 }
764
765 div.sideblock .item img {
766 margin-right: 8px;
767 }
768
769 div.sideblock .item.link, div.sideblock .item.internal {
770 padding: 0 0 10px 20px;
771 background: url(../images/arr_more.gif) no-repeat;
772 width: 200px;
773 }
774 div.sideblock .item.book {
775 padding: 0 0 10px 20px;
776 background: url(../images/book.gif) no-repeat;
777 width: 200px;
778 }
779
780 div.sideblock .item.external {
781 padding: 0 0 10px 20px;
782 background: url(../images/external.gif) no-repeat;
783 width: 200px;
784 }
785
786 div.sideblock .item.video {
787 padding: 0 0 10px 20px;
788 background: url(../images/vid.gif) no-repeat;
789 width: 200px;
790 }
791
792 div.sideblock .item.audio {
793 padding: 0 0 10px 20px;
794 background: url(../images/audio.gif) no-repeat;
795 width: 200px;
796 }
797
798 div.sideblock .item.download {
799 padding: 0 0 10px 20px;
800 background: url(../images/download.gif) no-repeat;
801 width: 200px;
802 }
803
804
805
806
807 /*
808 * footer
809 */
810
811 .footer {
812 float: left;
813 width: 700px;
814 background-color: #FFFFFF;
815 margin: 0 10px 20px 20px;
816 border-top: 1px solid #485297;
817 }
818
819 #wrapper_home .footer {
820 float: left;
821 width: 900px;
822 margin: 0 10px 20px 20px;
823 border-top: 1px solid #dccbae;
824 }
825
826 div.services {
827 float: right;
828 font-size: 11px;
829 margin-top: 5px;
830 }
831
832 .services a {
833 color: #485297;
834 }
835
836 div.serviceprint {
837 float: left;
838 margin-left: 20px;
839 padding-left: 20px;
840 height: 25px;
841 background: url(../images/print.gif) no-repeat;
842 }
843
844 div.serviceforward {
845 float: left;
846 margin-left: 20px;
847 padding-left: 20px;
848 height: 25px;
849 background: url(../images/forward.gif) no-repeat;
850 }
851
852 div.servicepdf {
853 float: left;
854 margin-left: 20px;
855 padding-left: 20px;
856 height: 25px;
857 background: url(../images/pdf.gif) no-repeat;
858 }
859
860 div.boilerplate {
861 float: left;
862 margin: 0 0 50px 170px;
863 width: 730px;
864 }
865
866 #wrapper_home div.boilerplate {
867 float: left;
868 margin: 30px 0 50px 0px;
869 width: 900px;
870 border-top: 1px solid #dccbae;
871 padding-top: 10px;
872 }
873
874 div.legal {
875 float: left;
876 font-size: 11px;
877 color: #EA8500;
878 }
879
880 div.mpg_signet {
881 float: right;
882 }
883
884
885 /* more generic lists */
886
887 ul.big {
888 width:100%;
889 }
890
891 ul.big li {
892 border-bottom: 1px solid #dccbae;
893 margin-top: 5px;
894 padding-bottom: 7px;
895 }
896 ul.big li:last-child {
897 border-bottom: none;
898 }
899
900
901
902 /* Sitemap */
903 div.dept_block_sitemap {
904 float: left;
905 width: 221px;
906 font-size: 11px;
907 }
908
909 .dept_title_sitemap {
910 margin: 0 0 5px 0;
911 font-size: 13px;
912 color: #485297;
913 width: 221px;
914 padding-top: 5px;
915 border-top: 2px solid #979CE0;
916 }
917
918 .dept_title a, .dept_title_sitemap a, .dept_headline a {
919 color: #485297;
920 }
921
922
923 div.banner_large .caption {
924 font-size: 10px;
925 color: #b69f7b;
926 margin-top: 5px;
927 }
928
929
930 div.image_large .caption {
931 font-size: 10px;
932 color: #b69f7b;
933 margin-top: 5px;
934 }
935 div.image_small {
936 width: 230px;
937 padding: 10px;
938 }
939 div.image_small.left {
940 float: left;
941 padding-left: 0px;
942 }
943 div.image_small.right {
944 float: right;
945 padding-right: 0px;
946 }
947 div.image_small .caption {
948 font-size: 10px;
949 color: #b69f7b;
950 margin-top: 5px;
951 }
952
953
954
955 /* projects */
956
957 div.projectlist {
958 width:100%;
959 }
960
961 div.projectlist h2 {
962 width:700px;
963 font-size: 13px;
964 border-bottom: 2px solid #dccbae;
965 font-weight:normal;
966 }
967 div.projectlist h2 a {
968 color: #485297;
969 }
970 div.projectlist h2 a .dep {
971 font-weight:bold;
972 color: #485297;
973 margin-right:10px;
974 }
975 div.project_block {
976 margin-top:10px;
977 margin-bottom:14px;
978 }
979
980 ul.projectlist {
981 list-style-image:url(../images/arr_more.gif);
982 /* line-height: 20px; */
983 }
984 ul.projectlist a{
985 color: #485297;
986 }
987
988
989 p.maintext_more {
990 font-size: 12px;
991 margin-top: -10px;
992 padding-left: 15px;
993 background: url(../images/arr_more.gif) no-repeat;
994 }
995 p.maintext_authors {
996 font-size: 12px;
997 font-weight: bold;
998 }
999
1000
1001 div.caption_inline {
1002 /* caption for images on project pages */
1003 float: left;
1004 width: 208px;
1005 font-size: 9px;
1006 color: #b69f7b;
1007 margin-top: 5px;
1008 }
1009
1010 div.pic_inline {
1011 float: left;
1012 width: 220px;
1013 }
1014 div.pic_inline_container {
1015 float: left;
1016 width: 220px;
1017 margin: 5px 15px 0 0;
1018 }
1019
1020
1021
1022 /* Research Units */
1023 li.level_1 {
1024 margin-left:2px;
1025 }
1026 li.level_2 {
1027 margin-left:22px;
1028 border-bottom: 1px solid #dccbae;
1029 font-weight:bold;
1030 }
1031 li.level_3 {
1032 margin-left:52px;
1033 font-weight:bold;
1034 }
1035 li.level_4 {
1036 margin-left:82px;
1037 }
1038
1039 a.expand {
1040 margin-left:45px;
1041 margin-top:10px;
1042 }
1043
1044
1045
1046
1047
1048
1049
1050 /* Events */
1051
1052 div.event {
1053 margin-bottom: 44px;
1054 }
1055
1056 div.event span.category{
1057 border-bottom:1px solid #dccbae;
1058 color: #485297;
1059
1060 font-size:12px;
1061 }
1062 div.event h2 {
1063 margin-left:0px;
1064 /* color: #dccbae;
1065 font-weight:bold;
1066 border-bottom:2px solid #dccbae;
1067 */
1068 color: #485297;
1069 font-weight:normal;
1070 }
1071
1072 div.event h1{
1073 margin-left:0px;
1074 }
1075
1076 div.event p {
1077 font-size: 11px;
1078
1079 margin-left:82px;
1080 }
1081
1082
1083 div.event div.row {
1084 width:100%;
1085 float: left;
1086 border-bottom: 1px solid #dccbae;
1087 margin-bottom: 5px;
1088 padding-bottom: 7px;
1089 }
1090
1091
1092 div.event div.row div.name {
1093 float:left;
1094 width:80px;
1095 color:#485297;
1096 }
1097
1098 div.event div.row div.definition {
1099 float:left;
1100 margin-left:20px;
1101 width:300px;
1102 }
1103
1104
1105
1106 /* mediathek */
1107
1108 div.media_nav {
1109 background-color:#ffffff;
1110 }
1111
1112 div.media_nav div.element {
1113 float:left;
1114 margin-left:8px;
1115 margin-right:8px;
1116 }
1117
1118
1119
1120 /* unknown */
1121 div.line{
1122 border-bottom: 3px solid #dccbae;
1123 margin-bottom:10px;
1124 margin-top:10px;
1125 width:700px;
1126 }
1127 /* used e.g. on staff-pages 'kollegium/board of directors' */
1128
1129 .deptlink {
1130 color: #485297;
1131 margin:20px;
1132 }
1133
1134 ul.presse li {
1135 border-top: 1px solid #dccbae;
1136 font-size: 11px;
1137 padding-left:8px;
1138 padding-top: 8px;
1139 }
1140
1141 h2.line {
1142 border-bottom:2px solid #dccbae;
1143 margin-bottom:8px;
1144 }
1145 h1.line {
1146 border-bottom:3px solid #dccbae;
1147 padding-bottom:5px;
1148 }
1149