Mercurial > hg > MPIWGWeb
diff css/mpiwg.css @ 2:ddf6c1a27a4b
new version with main_template and css in product.
author | casties |
---|---|
date | Thu, 07 Feb 2013 19:50:39 +0100 |
parents | |
children | 1a895905f7ca |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/css/mpiwg.css Thu Feb 07 19:50:39 2013 +0100 @@ -0,0 +1,1149 @@ +/* MPIWG website style sheet + * + * (c) 2013 Robert Casties + */ + + + +body { + margin: 0; + font-family: Verdana, Arial, sans-serif; + background-color: #fdf8ef; + font-size: 12px; +} + +/* + * global styles + */ + +img { + border: none; +} + +a { + color: #ee802d; + text-decoration: none; +} + +a:hover { + text-decoration: underline; +} + +/* new link-classes (with icons) */ + +a.internal { + background: url(../images/arr_more.gif) no-repeat; + padding-left: 12px; + padding-top: 1px; +} + +a.download { + background: url(../images/download.gif) no-repeat; + padding-left: 17px; +/* padding-top:1px; */ +} + +a.external { + background: url(../images/external.gif) no-repeat; + padding-left: 15px; +/* padding-top:1px; */ +} +a.pdf { + background: url(../images/pdf.gif) no-repeat; + padding-left: 15px; +/* padding-top:1px; */ +} + +a.audio { + background: url(../images/audio.gif) no-repeat; + padding-left: 15px; +/* padding-top:1px; */ +} + +a.book { + background: url(../images/book.gif) no-repeat; + padding-left: 20px; + margin-left: -5px; + margin-top: -1px; +} + +a.maillink { + color: #485297 !important; +} + +h1 a { + /* a header with a link looks like a header */ + color: inherit; + font-weight: inherit; + text-decoration: none; +} + +img.pic_large { + /* class for wide pictures used for example on institute/addres.html etc. */ + margin-bottom: 20px; +} + + +/* + * header and wrapper + */ + +#wrapper { + /* float: left; */ + width: 960px; + margin: 0 auto; + padding: 20px 0 0 20px; + background-color: #fcf2df; +} + +#header { + /* float: left; */ + width: 900px; + margin: 0 0 10px 0; +} + +#header div.title { + display: inline; + /* float: left; */ + width: 661px; + height: 40px; +} + +#header div.title img { + margin-bottom: 30px; +} + +#header div.logo { + display: inline; + /* float: right; */ + width: 87px; + height: 88px; +} + +#header div.logo img { + margin-left: 145px; +} + +/* Main Navigation */ + +#mainnav { + /* float: left; */ + width: 900px; + font-size: 12px; + border-top: 8px solid #fab775; + margin-bottom: 20px; + padding-top: 5px; +} + +#mainnav div.sec { + display: inline; + /* float: left; */ + border-top: 8px solid #fab775; + margin-top: -0px; + margin-right: 35px; + padding-top: 5px; +} + +#mainnav div.sec:hover { + border-top: 8px solid #ea8500; +} + +#mainnav a { + color: #666666; + outline: none; +} + +#mainnav a:hover { + color: #000000; + text-decoration: none; +} + +#mainnav div.sec.on { + border-top: 8px solid #ea8500; +} + +#mainnav div.sec.on a { + color: #ea8500; + outline: none; + font-weight: bold; +} + +#mainnav div.sec.lang { + float: right; + margin-top: -13px; + margin-right: 0; +} + + + + + + +/* Search */ + +div.search { + float: left; + width: 900px; + height: 25px; +} + +#wrapper_home div.search { + float: right; + width: 220px; +} + +.searchform { + float: right; +} + +input.searchinput { + width: 211px; + padding-left: 18px; + border: 1px solid #dccbae; + background: url(../images/search.gif) no-repeat #FFFFFF; + color: #EA8500; +} + + + + + + +/* Breadcrumbs & Quicklinks */ + +div.quicklinks { + float: left; + width: 900px; + border-bottom: 3px solid #dccbae; + color: #EA8500; +} + +#wrapper_home div.quicklinks { + float: right; + width: 230px; + border-bottom: none; +} + +div.breadcrumbs { + float: left; + font-size: 10px; + color: #6a4d3c; +} + +div.breadcrumbs a { + color: #6a4d3c; + text-decoration: none; +} + +div.breadcrumbs .selected { + color: #6a4d3c; + font-weight: bold; +} + +select.quickfind { + float: right; + width: 230px; + height: 20px; + padding: 2px 2px 2px 18px; + color: #EA8500; + font-size: 11px; + border: none; + background: url(../images/arr_qf.gif) no-repeat #f4daae; +} + + + + + + + + + +/* + * Content + */ + +/* frontpage */ + +div.feature, div.feature .thumbnails { + float: left; + width: 650px; +/* margin-right: 20px; */ + font-size: 12px; + line-height: 1.6; +} + +div.feature .thumb { + float: left; + width: 129px; + margin-right: 1px; + margin-bottom: 1px; +} + +div.feature .feature_image { + float: left; + width: 650px; + margin-bottom: 15px; +} + +div.feature .caption { + text-align: right; + font-size: 10px; + color: #b69f7b; + margin-top: 5px; +} + +div.feature h1 { + color: #485297; + font-size: 15px; + font-weight: bold; + margin: 10px 2px 2px 2px; +} + +div.feature h2 { + color: #485297; + font-size: 15px; + font-weight:normal; + margin: 10px 2px 2px 2px; +} + +div.feature p { +/* margin-top: 0.5em; + margin-bottom: 0.5em; */ +} + + + + +/* + * main section + */ + +div.content { + float: left; + width: 900px; +} + +div.main { + float: left; + width: 720px; + background-color: #FFFFFF; + margin-bottom: 10px; + padding-right: 10px; + font-size: 12px; +} + +div.main div.center { + float: left; + width: 460px; + padding: 20px; +} + + +div.center, div.center_wide { + line-height: 1.6; +} +div.center ul { + list-style: none; + margin-left: 0; + padding: 0; +} + +div.center li { + margin-bottom: 10px; +} + + +div.main div.center_wide { + float: left; + width: 710px; +/* padding: 20px 0 0 20px; */ + padding: 20px; +} + + +div.main h1 { + color: #485297; + font-size: 15px; + font-weight: bold; + margin: 10px 2px 10px 2px; +} + +div.main h2 { + color: #485297; + font-size: 15px; + font-weight: normal; + margin: 2px; +} + +div.main h3 { + color: #485297; + font-size: 13px; + font-weight: normal; + margin: 2px; +} + + + + + +/* + * subnavigation + */ + +div.leftbox { + float: left; + width: 170px; +} + +div.subnav { + float: left; + width: 170px; + font-size: 11px; +} + +div.subnav .sn_off, .subnavbox .sn_off { + float: left; + width: 164px; + border-bottom: 1px solid #dccbae; + padding: 3px 6px 6px 0; +} + +div.subnav .sn_on { + float: left; + width: 158px; + border-bottom: 1px solid #dccbae; + padding: 3px 6px 6px 6px; + background: #EA8500; +} + +div.subnav .sn_on a { + color: #FCF2DF; + font-weight: bold; +} + +div.subnav .sn_off .dept { + font-style: italic; + color: #b69f7b; +} + +div.subnav .sn_on .dept { + font-style: italic; + color: #f9f4e1; +} + +div.subnavbox { + /* navigation below e.g. research projects */ + float: left; + width: 170px; + font-size: 11px; + margin-top: 30px; +} + +div.subnavbox h2 { + float: left; + width: 170px; + height: 20px; + font-size: 11px; + color: #b69f7b; + margin-bottom: 0px; + padding-bottom: 3px; + margin-top: 20px; + background: transparent url(../images/side.gif) repeat-x; +} + + + + + + +/* + * research section + */ + +div.center_wide.dept { + padding-left: 16px !important; + padding-right: 0 !important; +} + +div.center.dept { + padding-left: 16px !important; + padding-right: 0 !important; + width: 480px !important; +} + +div.dept_block { + float: left; + width: 221px; + min-height:420px; + border-bottom: 2px solid #979CE0; + margin-right: 15px; + margin-bottom: 20px; + font-size: 11px; +} + +div.dept_block.clear { + clear:left; +} + +div.dept_block.wide { + width: 460px !important; + min-height:0px !important; + height: auto !important; +} + +div.dept_block.short { + min-height: 290px !important; + border-bottom: None; +} + +div.dept_block h2 { + margin: 0 0 5px 0; + font-size: 13px; + font-weight: normal; + color: #485297; +} + +div.dept_block.wide h2 { + margin: 0 0 5px 0; + font-size: 16px; + color: #485297; +} + +div.dept_block h1 { + font-size: 13px; + font-weight: bold; + color: #485297; +} + +div.dept_block.wide h1 { + font-size: 16px; +} + +div.dept_block h2 a, div.dept_block h1 a { + color: #485297; +} + +div.dept_block p { + font-size: 11px; + line-height: 1.6; +} + +p.dept_leader, p.dept_summary { + /* legacy */ + font-size: 11px; + line-height:1.4; +} + + + +/* + * people list + */ + +div.namelist { + float: left; + clear: left; + padding-top: 10px; +} + +div.namelist.line { + border-top: 3px solid #dccbae; +} +/* NEW */ +div.namelist h2 { + border-bottom: 3px solid #dccbae; +} +div.namelist h2.noline { + border-bottom: none; +} +div.namelist.small { + font-size: 11px; +} + +div.center_wide div.namelist { + width: 700px; +} +div.center div.namelist div.row { + width:100%; +} +div.namelist div.row { + float: left; + border-bottom: 1px solid #dccbae; + margin-top: 5px; + padding-bottom: 7px; +} +div.namelist div.row.noline { + border-bottom: none; +} + +div.center_wide div.namelist div.row { + width: 700px; +} + +div.namelist div.row:last-child { + border-bottom: none; +} + +div.namelist .name { + display: block; + float: left; + width: 30%; +} + +div.namelist.namelinks .name a { + color: #485297; +} + +div.namelist .definition { + display: block; + float: left; + width: 70%; +} + +div.namelist.namelinks .definition a { + color: #485297; +} + +/* legacy */ +div.namelist.namelinks .definition.normallinks a { + color: #EA8500; +} + +div.list_disclaimer { + float: left; + width: 180px; + font-size: 10px; + margin-right: 20px; +} + +div.letters { + float: left; + margin-right: 10px; + color: #EA8500; +} +div.letters a { + margin-left: 0.2em; + margin-right: 0.2em; +} + +div.letter { + float: left; + width: 700px; + margin-top: 20px; + padding-bottom: 3px; + border-bottom: 3px solid #dccbae; + font-weight: bold; + font-size: 13px; + color: #dccbae; +} + +div.jump_top { + float: left; + width: 700px; + text-align: right; + font-size: 10px; +} + + + + +/* bios */ + +p.bio_section_header { + color: #485297; + padding-bottom: 5px; + margin-bottom: 5px; + border-bottom: 1px solid #dccbae; +} + + + +/* + * right sidebar + */ + +div.sidebar { + float: right; + width: 220px; + font-size: 10px; + line-height: 1.6; +/* margin-right: 10px; */ +} + +#wrapper_home .sidebar { + width: 230px; +} + +div.sideblock { +/* border-bottom: 1px solid #dccbae; */ + float: left; + clear: left; +} + +div.sideblock h2 { + padding-bottom: 5px; + margin: 18px 0px 0px 0px; + /* brown bottom line + background: transparent url(../images/side.gif) repeat-x; + */ + border-bottom: 3px solid #dccbae; + font-size: 12px; + color: #485297; + /*float:left; + clear:both;*/ + font-weight: normal; +} + +div.sideblock h2 a { + /* no longer so ugly hack to have right-adjust link... */ + float: right; + color: #EA8500; + font-size: 10px; +} + +div.sideblock h2 .proj_state { + /* right-adjusted block besides the title */ + float: right; + font-size: 10px; + color: #b69f7b; + font-weight: bold; +} +div.sideblock h2 .proj_state a { + /* inside should not float */ + float: none; +} + +div.sideblock a.maillink { + color: #ea8500 !important; +} + +div.sideblock .item, div.sideblock p { + float:left; + width:220px; + margin: 5px 0 0 0; + padding: 0 0 5px 0; + border-bottom: 1px solid #dccbae; + +} + +div.sideblock .item.noline { + border-bottom: none; +} + +div.sideblock .project { + background: url(../images/arr_right.gif) no-repeat #f5daaf; + padding: 6px 6px 6px 20px; + border-bottom: 1px solid #f3be7c; + width:194px; +} + +div.sideblock .project.inactive { + background: url(../images/arr_right.gif) no-repeat #f6e6cc; + width:194px; +} + +div.sideblock .project.parent { + background: url(../images/arr_up.gif) no-repeat #f9f4e1; + color: #666666; + border-bottom: 1px solid #dccbae; + margin-top:20px; +} + +div.sideblock .project a { + color: #333; +} + +div.sideblock .item.featurearchive { + border-bottom:none; + float:left; + margin: 5px 0 10px 0; + padding: 0 0 5px 0; + border-bottom: None; +} + +div.sideblock .item img { + margin-right: 8px; +} + +div.sideblock .item.link, div.sideblock .item.internal { + padding: 0 0 10px 20px; + background: url(../images/arr_more.gif) no-repeat; + width: 200px; +} +div.sideblock .item.book { + padding: 0 0 10px 20px; + background: url(../images/book.gif) no-repeat; + width: 200px; +} + +div.sideblock .item.external { + padding: 0 0 10px 20px; + background: url(../images/external.gif) no-repeat; + width: 200px; +} + +div.sideblock .item.video { + padding: 0 0 10px 20px; + background: url(../images/vid.gif) no-repeat; + width: 200px; +} + +div.sideblock .item.audio { + padding: 0 0 10px 20px; + background: url(../images/audio.gif) no-repeat; + width: 200px; +} + +div.sideblock .item.download { + padding: 0 0 10px 20px; + background: url(../images/download.gif) no-repeat; + width: 200px; +} + + + + +/* + * footer + */ + +.footer { + float: left; + width: 700px; + background-color: #FFFFFF; + margin: 0 10px 20px 20px; + border-top: 1px solid #485297; +} + +#wrapper_home .footer { + float: left; + width: 900px; + margin: 0 10px 20px 20px; + border-top: 1px solid #dccbae; +} + +div.services { + float: right; + font-size: 11px; + margin-top: 5px; +} + +.services a { + color: #485297; +} + +div.serviceprint { + float: left; + margin-left: 20px; + padding-left: 20px; + height: 25px; + background: url(../images/print.gif) no-repeat; +} + +div.serviceforward { + float: left; + margin-left: 20px; + padding-left: 20px; + height: 25px; + background: url(../images/forward.gif) no-repeat; +} + +div.servicepdf { + float: left; + margin-left: 20px; + padding-left: 20px; + height: 25px; + background: url(../images/pdf.gif) no-repeat; +} + +div.boilerplate { + float: left; + margin: 0 0 50px 170px; + width: 730px; +} + +#wrapper_home div.boilerplate { + float: left; + margin: 30px 0 50px 0px; + width: 900px; + border-top: 1px solid #dccbae; + padding-top: 10px; +} + +div.legal { + float: left; + font-size: 11px; + color: #EA8500; +} + +div.mpg_signet { + float: right; +} + + +/* more generic lists */ + +ul.big { + width:100%; +} + +ul.big li { + border-bottom: 1px solid #dccbae; + margin-top: 5px; + padding-bottom: 7px; +} +ul.big li:last-child { + border-bottom: none; +} + + + +/* Sitemap */ +div.dept_block_sitemap { + float: left; + width: 221px; + font-size: 11px; +} + +.dept_title_sitemap { + margin: 0 0 5px 0; + font-size: 13px; + color: #485297; + width: 221px; + padding-top: 5px; + border-top: 2px solid #979CE0; +} + +.dept_title a, .dept_title_sitemap a, .dept_headline a { + color: #485297; +} + + +div.banner_large .caption { + font-size: 10px; + color: #b69f7b; + margin-top: 5px; +} + + +div.image_large .caption { + font-size: 10px; + color: #b69f7b; + margin-top: 5px; +} +div.image_small { + width: 230px; + padding: 10px; +} +div.image_small.left { + float: left; + padding-left: 0px; +} +div.image_small.right { + float: right; + padding-right: 0px; +} +div.image_small .caption { + font-size: 10px; + color: #b69f7b; + margin-top: 5px; +} + + + +/* projects */ + +div.projectlist { + width:100%; +} + +div.projectlist h2 { + width:700px; + font-size: 13px; + border-bottom: 2px solid #dccbae; + font-weight:normal; +} +div.projectlist h2 a { + color: #485297; +} +div.projectlist h2 a .dep { + font-weight:bold; + color: #485297; + margin-right:10px; +} +div.project_block { + margin-top:10px; + margin-bottom:14px; +} + +ul.projectlist { + list-style-image:url(../images/arr_more.gif); +/* line-height: 20px; */ +} +ul.projectlist a{ + color: #485297; +} + + +p.maintext_more { + font-size: 12px; + margin-top: -10px; + padding-left: 15px; + background: url(../images/arr_more.gif) no-repeat; +} +p.maintext_authors { + font-size: 12px; + font-weight: bold; +} + + +div.caption_inline { + /* caption for images on project pages */ + float: left; + width: 208px; + font-size: 9px; + color: #b69f7b; + margin-top: 5px; +} + +div.pic_inline { + float: left; + width: 220px; +} +div.pic_inline_container { + float: left; + width: 220px; + margin: 5px 15px 0 0; +} + + + +/* Research Units */ +li.level_1 { + margin-left:2px; +} +li.level_2 { + margin-left:22px; + border-bottom: 1px solid #dccbae; + font-weight:bold; +} +li.level_3 { + margin-left:52px; + font-weight:bold; +} +li.level_4 { + margin-left:82px; +} + +a.expand { + margin-left:45px; + margin-top:10px; +} + + + + + + + +/* Events */ + +div.event { + margin-bottom: 44px; +} + +div.event span.category{ + border-bottom:1px solid #dccbae; + color: #485297; + + font-size:12px; +} +div.event h2 { + margin-left:0px; +/* color: #dccbae; + font-weight:bold; + border-bottom:2px solid #dccbae; + */ + color: #485297; + font-weight:normal; +} + +div.event h1{ + margin-left:0px; +} + +div.event p { + font-size: 11px; + + margin-left:82px; +} + + +div.event div.row { + width:100%; + float: left; + border-bottom: 1px solid #dccbae; + margin-bottom: 5px; + padding-bottom: 7px; +} + + +div.event div.row div.name { + float:left; + width:80px; + color:#485297; +} + +div.event div.row div.definition { + float:left; + margin-left:20px; + width:300px; +} + + + +/* mediathek */ + +div.media_nav { + background-color:#ffffff; +} + +div.media_nav div.element { + float:left; + margin-left:8px; + margin-right:8px; +} + + + +/* unknown */ +div.line{ + border-bottom: 3px solid #dccbae; + margin-bottom:10px; + margin-top:10px; + width:700px; +} +/* used e.g. on staff-pages 'kollegium/board of directors' */ + +.deptlink { + color: #485297; + margin:20px; +} + +ul.presse li { + border-top: 1px solid #dccbae; + font-size: 11px; + padding-left:8px; + padding-top: 8px; +} + +h2.line { + border-bottom:2px solid #dccbae; + margin-bottom:8px; +} +h1.line { + border-bottom:3px solid #dccbae; + padding-bottom:5px; +} +