Mercurial > hg > MPIWGWeb
diff css/mpiwg.css @ 6:9e4dba0a81e2
front page layout works now.
author | casties |
---|---|
date | Wed, 13 Feb 2013 16:34:22 +0100 |
parents | 9e720c6c5b6c |
children | 9813d9960e98 |
line wrap: on
line diff
--- a/css/mpiwg.css Tue Feb 12 18:15:05 2013 +0100 +++ b/css/mpiwg.css Wed Feb 13 16:34:22 2013 +0100 @@ -75,24 +75,23 @@ color: #3b4186; font-size: 16px; font-weight: bold; - margin: 10px 2px 10px 2px; + margin: 10px 0 10px 0; } h2 { color: #3b4186; font-size: 16px; font-weight: normal; - margin: 2px; + margin: 0; } h3 { color: #3b4186; font-size: 14px; font-weight: normal; - margin: 2px; + margin: 0; } - h1 a { /* a header with a link looks like a header */ color: inherit; @@ -100,18 +99,12 @@ 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: 900px; margin: 0 auto; padding: 10px 40px 10px 20px; @@ -120,7 +113,6 @@ } #header { - /* float: left; */ position: relative; width: 900px; height: 90px; @@ -129,7 +121,6 @@ #header div.title { display: inline; - /* float: left; */ position: absolute; left: 0; top: 20px; @@ -139,36 +130,36 @@ #header div.logo { display: inline; - /* float: right; */ position: absolute; right: 0; width: 87px; height: 88px; } -/* Main Navigation */ - +/* + * Main Navigation + */ #mainnav { - /* float: left; */ position: relative; width: 900px; font-family: Verdana, Arial, sans-serif; font-size: 12px; border-top: 8px solid #fab775; - margin-bottom: 20px; + padding-top: 5px; + margin-bottom: 40px; +} +#mainnav ul { + padding: 0; + margin: 0; +} +#mainnav li.sec { + display: inline; + border-top: 8px solid #fab775; + margin: 0 35px 0 0; 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 { +#mainnav li.sec:hover { border-top: 8px solid #ea8500; } @@ -182,167 +173,23 @@ text-decoration: none; } -#mainnav div.sec.on { +#mainnav li.sec.on { border-top: 8px solid #ea8500; } -#mainnav div.sec.on a { +#mainnav li.sec.on a { color: #ea8500; outline: none; font-weight: bold; } -#mainnav div.sec.lang { - /* float: right; */ +#mainnav li.sec.lang { position: absolute; right: 0; top: -8px; margin-right: 0; } - -/* Breadcrumbs */ - - -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; -} - - -/* - * Front page feature - */ - -div.feature { - width: 900px; - background-color: #f4e0c7; -} - -div.feature div.teaser_image { - /* float: left; */ - display: inline-block; - vertical-align: top; - position: relative; - width: 593px; - height: 351px; -} - -div.feature div.teaser_image div.caption { - position: absolute; - bottom: 0; - padding: 3px; - text-align: right; - color: white; - font-size: 10px; - opacity: 0.8; - background-color: gray; - /* background-color: rgba(80,80,80,0.6); */ -} - -div.feature div.teaser_text { - display: inline-block; - position: relative; - width: 265px; - padding-left: 21px; - padding-right: 21px; -} - -div.feature div.teaser_text div.feature_number { - position: absolute; - right: 14px; - top: 5px; - font-family: Georgia, Times, serif; - font-size: 26px; - color: #887163; -} -/* title */ -div.feature div.teaser_text h1 { - font-size: 16px; - font-weight: normal; - margin-top: 0; -} -/* "current research topic */ -div.feature div.teaser_text h2 { - font-size: 14px; - color: #887163; - margin-bottom: 0; -} -/* feature date */ -div.feature div.teaser_text h3 { - margin-top: 20px; - margin-bottom: 20px; -} - -div.feature div.teaser_text p { - line-height: 1.5; -} - - - - -/* - * main section - */ - -div.main { -} - -div.main div.row { - /* set font-size to ignore whitespace */ - font-size: 0; -} - -div.main div.block { - display: inline-block; - width: 286px; - vertical-align: top; - /* reset font-size */ - font-size: 12px; - line-height: 1.5; - margin-left: 21px; -} -div.main div.block:first-child { - /* first block has no left margin */ - margin-left: 0; -} - -div.main div.block h2 { - position: relative; - padding-bottom: 3px; - margin-top: 18px; - border-bottom: 3px solid #dccbae; -} -div.main div.block h2 a:link { - /* more-links in title are right */ - position: absolute; - right: 0; - /* more-links in title are small */ - font-size: 12px; -} - -div.main div.block div.item { - padding-top: 5px; - padding-bottom: 3px; - border-bottom: 1px solid #dccbae; -} - -div.main div.block b { - /* bold is blue */ - color: #3b4186; -} - /* * subnavigation */ @@ -408,698 +255,153 @@ background: transparent url(../images/side.gif) repeat-x; } - - - - - /* - * research section + * main section */ -div.center_wide.dept { - padding-left: 16px !important; - padding-right: 0 !important; +div.main { } -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.row { + /* set font-size to ignore whitespace */ + font-size: 0; } -div.dept_block.short { - min-height: 290px !important; - border-bottom: None; +div.row div.block { + display: inline-block; + vertical-align: top; + /* reset font-size */ + font-size: 12px; + line-height: 1.5; } - -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.row div.block:first-child { + /* first block has no left margin */ + margin-left: 0 !important; } -div.dept_block h1 { - font-size: 13px; - font-weight: bold; - color: #485297; -} - -div.dept_block.wide h1 { - font-size: 16px; +div.row.triple div.block { + width: 31.7%; + margin-left: 2.4%; } -div.dept_block h2 a, div.dept_block h1 a { - color: #485297; +div.row div.block h2 { + padding-bottom: 3px; + margin-top: 35px; + border-bottom: 3px solid #dccbae; } -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; +div.row div.block div.item { + padding-top: 5px; + padding-bottom: 3px; + border-bottom: 1px solid #dccbae; } - -/* - * people list - */ - -div.namelist { - /* float: left; */ - clear: left; - padding-top: 10px; -} +/* frontpage version */ -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.main.home div.row div.block b { + /* bold is blue */ + color: #3b4186; } -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.main.home div.row div.block h2 { + /* more-links in title are right */ + position: relative; } - -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.main.home div.row div.block h2 a:link { + /* more-links in title are right */ + position: absolute; + right: 0; + top: 3px; + /* more-links in title are small */ + font-size: 12px; } -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 + * Front page feature */ -div.sidebar { - /* float: right; */ - width: 220px; - font-size: 10px; - line-height: 1.6; -/* margin-right: 10px; */ +div.row.feature { + background-color: #f4e0c7; } -#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.row.feature div.block.teaser_image { + position: relative; + width: 593px; + height: 351px; } -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; */ +div.row.feature div.teaser_image div.caption { + position: absolute; + bottom: 0; + padding: 3px; + text-align: right; + color: white; 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; + opacity: 0.8; + background-color: gray; + /* background-color: rgba(80,80,80,0.6); */ } -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.row.feature div.block.teaser_text { + position: relative; + width: 265px; + margin-left: 21px; + padding-right: 21px; } -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.row.feature div.block.teaser_text div.feature_number { + position: absolute; + right: 14px; + top: 5px; + font-family: Georgia, Times, serif; + font-size: 26px; + color: #887163; } - -div.sideblock .item.video { - padding: 0 0 10px 20px; - background: url(../images/vid.gif) no-repeat; - width: 200px; +/* title */ +div.row.feature div.block.teaser_text h1 { + font-size: 16px; + font-weight: normal; + margin-top: 0; } - -div.sideblock .item.audio { - padding: 0 0 10px 20px; - background: url(../images/audio.gif) no-repeat; - width: 200px; +/* "current research topic */ +div.row.feature div.block.teaser_text h2 { + font-size: 14px; + color: #887163; + margin-bottom: 0; } - -div.sideblock .item.download { - padding: 0 0 10px 20px; - background: url(../images/download.gif) no-repeat; - width: 200px; +/* feature date */ +div.row.feature div.block.teaser_text h3 { + margin-top: 20px; + margin-bottom: 20px; } - - /* * footer */ -.footer { - /* float: left; */ - width: 700px; - background-color: #FFFFFF; - margin: 0 10px 20px 20px; - border-top: 1px solid #485297; -} - -#wrapper_home .footer { - /* float: left; */ +div.footer { + position: relative; 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; + height: 50px; 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; + padding-top: 8px; + margin-top: 45px; } -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.footer div.text { + display: inline-block; + color: #d45a00; + font-size: 11px; } -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.footer div.logo { + display: inline-block; + position: absolute; + right: 0; } -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; +div.footer div.logo img { + width: 204px; + height: 41px; } - - - -/* 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; -} -