Mercurial > hg > MPIWGWeb
view css/mpiwg.css @ 198:7515f7e51b0f
styles for flyout divs (for websites).
author | casties |
---|---|
date | Mon, 24 Jun 2013 18:05:04 +0200 |
parents | b0ed3974efbd |
children | 6ff1c6c270b1 |
line wrap: on
line source
/* MPIWG website style sheet * * (c) 2013 MPIWG Berlin * Author: Robert Casties */ body { margin: 0; font-family: Verdana, Arial, sans-serif; background-color: #fdf8ef; font-size: 12px; } /* * global styles */ img { border: none; } a, .linklike { color: #d45a00; text-decoration: none; } a:hover, .linklike:hover { text-decoration: underline; } /* link-classes (with icons) */ a.internal, a.more { background: url(../images/internal.png) center left no-repeat; padding-left: 10px; } a.download { background: url(../images/download.png) center left no-repeat; padding-left: 15px; } a.external { background: url(../images/external.png) center left no-repeat; padding-left: 15px; } a.down { background: url(../images/down.png) center left no-repeat; padding-left: 15px; } a.jumptop { background: url(../images/jump_top.png) center left no-repeat; padding-left: 15px; } a.email { background: url(../images/email.png) center left no-repeat; padding-left: 23px; } a.disk { background: url(../images/disk_link.png) center left no-repeat; padding: 0 0 3px 25px; } a.namelink { color: #3b4186; } h1 { color: #3b4186; font-size: 20px; font-weight: normal; margin: 1em 0 0.5em 0; } h1:first-child { /* does this work correctly? */ margin-top: 0; } h2 { color: #3b4186; font-size: 16px; font-weight: normal; margin: 1em 0 0.5em 0; } h3 { color: #3b4186; font-size: 14px; font-weight: normal; margin: 0; } h3 + h3 { /* h3 directly after h3 has a margin */ margin-top: 0.5em; } h1 a { /* a header with a link looks like a header */ color: inherit; font-weight: inherit; text-decoration: none; } h2 a { /* a header with a link looks like a header */ color: inherit; font-weight: inherit; text-decoration: none; } p { margin: 0.5em 0; line-height: 1.5; } ul.plain { list-style-type: none; padding: 0; } ul.plain > li { margin-top: 0.5em; } ul.plain > li:first-child { margin-top: 0; } ul.inline { display: inline; padding: 0; margin: 0; } ul.inline li { display: inline; } .hasright { position: relative; } .hasright .right { position: absolute; right: 0; margin-right: 0.5em; } .clear { clear: both; } .blue { color: #3b4186; } .javascriptonly { /* initially hidden, shown by javascript */ display: none; } /* * table-like rows and columns */ div.rows { display: table; } div.row { display: table-row; } div.row > div.col { display: table-cell; vertical-align: top; } div.row > div.col:first-child { /* first block has no left margin */ padding-left: 0; /* padding-left: 0 !important; */ } /* * page wrapper and header */ #wrapper { position: relative; z-index: 5; width: 900px; margin: 0 auto; padding: 10px 40px 10px 20px; background-color: #fcf2df; box-shadow: 0 0 5px 3px #d0d0d0; } #header { display: block; position: relative; height: 95px; margin: 0 0 10px 0; } #header div.title { position: absolute; left: 0; top: 25px; } #header div.title img { width: 661px; height: 40px; } #header div.logo { position: absolute; right: 0; } #header div.logo img { width: 87px; height: 88px; } /* * Main Navigation */ #mainnav { display: block; position: relative; font-family: Verdana, Arial, sans-serif; font-size: 12px; border-top: 8px solid #fab775; padding-top: 5px; margin-bottom: 15px; /* make iPhone-Safari not botch text size */ -webkit-text-size-adjust: 100%; } #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 li.sec:hover { border-top: 8px solid #d45a00; } #mainnav a { color: #696968; outline: none; } #mainnav a:hover { color: #000000; text-decoration: none; } #mainnav li.sec.on { border-top: 8px solid #d45a00; } #mainnav li.sec.on a { color: #d45a00; outline: none; font-weight: bold; } #mainnav li.sec.lang { position: absolute; right: 0; top: -8px; margin-right: 0; } /* * breadcrumbs */ #breadcrumbs { font-size: 11px; color: #6a4d3c; margin-bottom: 5px; } #breadcrumbs a { color: #6a4d3c; } #breadcrumbs .selected { font-weight: bold; } /* * main section wrapper */ #mainrow { display: table-row; } /* * subnavigation */ div.leftbox { display: table-cell; vertical-align: top; width: 170px; border-top: 3px solid #dccbae; } div.subnav { font-size: 11px; } div.subnav ul { margin: 0; padding: 0; } div.subnav li { list-style-type: none; border-bottom: 1px solid #dccbae; padding: 3px 6px 6px 3px; } div.subnav .sn_on { padding-left: 6px; background-color: #d45a00; } div.subnav .sn_on a { color: #fcf2df; font-weight: bold; } div.subnav h2.subnavhead { background-color: white; color: #d45a00; border-bottom: 1px solid #dccbae; font-size: 11px; font-weight: bold; margin: 0; padding: 5px 3px; } div.subnav li.dept { padding-left: 18px; list-style-position: inside; list-style-image: url(../images/internal.png); text-indent: -14px; } div.subnav li.dept .type { font-style: italic; color: #6a4d3c; } div.subnav li.dept.sn_on .type { color: #f9f4e1; } div.subnavbox { /* navigation below e.g. research projects */ font-size: 11px; margin-top: 30px; } div.subnavbox h2 { font-size: 11px; color: #b69f7b; padding-bottom: 3px; border-bottom: 1px solid #dccbae; margin-top: 20px; } /* * main section */ div.main { display: table-cell; vertical-align: top; background-color: white; border-top: 3px solid #dccbae; padding: 20px; } div.main div.row>div.col { /* col default padding */ padding-left: 20px; } div.main div.row>div.col:first-child { /* first col has no left-padding */ padding-left: 0; } div.main div.center { /* make sure center does not collapse */ min-width: 460px; } div.main div.center.wide { /* make sure center does not collapse */ min-width: 690px; } /* * frontpage */ div.main.home { background-color: transparent; border-top: 0; padding: 0; } div.main.home b { /* bold is blue */ color: #3b4186; } div.main.home div.row.triple>div.col { /* frontpage col width */ width: 286px; padding-left: 21px; } div.main.home div.row.triple>div.col:first-child { /* first col has no left-padding */ padding-left: 0; } div.box h2, h2.line { /* more-links in title are right */ position: relative; } div.box h2 a, h2.line a.more { /* more-links in title are right */ position: absolute; right: 0; bottom: 5px; color: #d45a00; /* more-links in title are small */ font-size: 12px; } div.box h2.withmore, h2.line.withmore { /* leave space for 'more' text */ padding-right: 3em; } /* * front page feature teaser */ div.main.home div.teaser { background-color: #f4e0c7; } div.main.home div.teaser div.box { /* teaser box needs no margins */ margin: 0; } div.teaser_image { position: relative; width: 593px; height: 351px; } div.teaser_image div.caption { /* caption inside image */ 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.teaser_image div.caption a { /* links in caption inside image */ color: white; } div.teaser_text { padding-right: 21px; } /* feature number */ div.teaser_text div.feature_number { position: absolute; right: 14px; top: 5px; font-family: Georgia, Times, serif; font-size: 26px; color: #887163; } /* feature title */ div.teaser_text h1 { font-size: 16px; font-weight: normal; margin-top: 0; } /* current research topic */ div.teaser_text h3 { color: #887163; margin-bottom: 3px; margin-top: 15px; } /* feature date */ div.teaser_text div.date { color: #3b4186; padding-top: 20px; margin-bottom: 20px; } /* teaser slider */ div.teaser div.box div.slidebutton { top: 150px; width: 18px; height: 24px; padding-top: 11px; } div.teaser div.box div.slidebutton.prev { background-image: url(../images/slider_prev_bg.png); } div.teaser div.box div.slidebutton.next { background-image: url(../images/slider_next_bg.png); } /* book slider */ div.newbooks div.slider.row.double > div.col > div.mini { width: 123px; } div.newbooks div.slider.row.double > div.col > div.mini img { width: 100px; } div.newbooks div.slider.row.double > div.col { /* non-ajax version has padding-left (even first-child) */ padding-left: 20px; } div.newbooks div.slidewindow > div.slider.row.double > div.col:first-child { /* ajax version first-child has no padding-left */ padding-left: 0; } div.newbooks div.slidebutton { top: 80px; } /* * toolboxes */ div.tool.box { font-family: Georgia, Times, serif; font-style: italic; font-size: 16px; color: #887163; background-color: #efeeec; padding: 20px; box-shadow: 0 0 1px 1px #e0e0e0; } div.tool.box a { color: #3b4186; } div.tool.box div.searchbox { /* only to make it shrink-wrap */ display: table-cell; } div.tool.box div.searchbox input.text { height: 20px; width: 370px; background-color: #9fa0a7; color: white; font-size: 14px; font-style: italic; border: 0; padding: 3px; } div.tool.box div.searchbox input.submit { /* submit uses border-box. don't ask */ height: 26px; width: 26px; border: 0; padding: 2px 3px 4px 3px; /* TODO: this should be an image */ background-color: #ee7f2d; color: white; font-size: 14px; } div.tool.box div.searchbox div.extended { font-family: Verdana, Arial, sans-serif; font-size: 12px; text-align: right; padding: 5px 30px 5px 3px; } div.tool.box h3 { font-family: Georgia, Times, serif; font-style: italic; font-size: 16px; color: #887163; margin: 0.5em 0; } div.tool.box h3:first-child { /* top header has no margin */ margin-top: 0; } div.tool.box ul { margin: 0; padding: 0; } div.tool.box div.options { margin-top: 10px; } div.tool.box div.options li { list-style-type: none; margin: 0.5em 0; } div.tool.box div.atoz { color: #887163; font-family: Verdana, Arial, sans-serif; font-style: normal; font-size: 14px; /* try to make a-z fit on one line */ word-spacing: -1px; margin-top: 10px; } div.tool.box input.checkbox, div.tool.box input.radio { /* checkbox uses border-box. don't ask */ width: 20px; height: 20px; margin: 0; /* TODO: this should be an image */ background-color: white; } /* project page toolbox with thumbs */ div.tool.box div.thumbs { width: 420px; } div.thumbs div.thumb { display: inline; } div.thumbs div.thumb img { width: 55px; height: 34px; } /* * service box on frontpage */ div.box h2.service { /* title has no line */ border: 0; } div.tool.box.service { margin-top: 0; padding: 0; } div.tool.box.service div.row > div.col { padding: 0; } div.tool.box.service div.search { width: 200px; height: 20px; padding: 26px 0 26px 16px; border-bottom: 1px solid #9fa0a7; } div.tool.box.service div.search.both { height: 44px; padding: 14px 0 14px 16px; } div.tool.box.service div.searchicon { width: 38px; height: 40px; text-align: center; padding: 16px; border-bottom: 1px solid #9fa0a7; } div.tool.box.service div.icon { width: 71px; height: 70px; text-align: center; line-height: 2.5; padding: 1px 0; border-left: 1px solid #9fa0a7; } div.tool.box.service div.icon a { color: black; font-size: 12px; font-family: Verdana, Arial, sans-serif; font-style: normal; } div.tool.box.service div.icon.first { border-left: 0; width: 70px; } div.tool.box.service div.searchbox { display: block; } div.tool.box.service div.searchbox input.text { width: 170px; height: 17px; font-size: 12px; padding: 1px 3px; } div.tool.box.service div.searchbox input.submit { height: 19px; width: 19px; padding: 0; margin: 0; vertical-align: bottom; } div.tool.box.service select.quickfinder { width: 200px; height: 19px; font-size: 12px; background-color: white; margin-bottom: 5px; border: 0; } /* * jobs page tool list */ div.tool.list { font-size: 14px; color: #887163; background-color: #efeeec; } div.tool.list a { color: #3b4186; } div.tool.list ul { list-style-type: none; padding: 0; } div.tool.list li { padding: 0.7em 0.5em 0.7em 20px; border-bottom: 1px solid white; } /* * overview page */ div.center.wide > div.row.double > div.col { width: 335px; } div.center.wide > div.row.double div.tool.box div.searchbox input.text { /* smaller search box */ width: 250px; } h2.withicon span.strut { /* equalize uneven height of icons */ display: inline-block; height: 45px; vertical-align: bottom; } div.tool.box div.links a { font-family: Verdana, Arial, sans-serif; font-style: normal; font-size: 14px; color: #d45a00; } div.tool.box div.links h3 { font-family: Verdana, Arial, sans-serif; font-style: normal; font-size: 14px; color: #3b4186; padding-bottom: 3px; border-bottom: 1px solid white; } div.tool.box div.links h3 a { color: inherit; } /* * other boxes */ div.box { margin: 20px 0; position: relative; } div.box h2, h2.line { /* h2 is title with line */ padding-bottom: 5px; border-bottom: 3px solid #dccbae; margin-bottom: 5px; } div.box.line, div.line { border-bottom: 1px solid #dccbae; } div.box h3 { /* h3 is subtitle/type */ font-size: 12px; color: #6a4d3c; } div.box h3 + h2 { /* directly over h2 */ margin-top: 0; } div.box + div.jump_top { margin-top: -10px; } /* * small box with thumbnail */ div.mini { padding: 10px 0; /* line-height: 1; */ } div.row.quintuple > div.col > div.mini { max-width: 122px; font-size: 11px; } div.mini div.thumb { background-color: #f8f8f8; text-align: center; margin-top: 0.5em; } div.mini div.thumb:first-child { margin-top: 0; } div.slider.row.quintuple > div.col > div.mini { /* slider needs fixed width */ width: 120px; } div.slider.row.quintuple > div.col { /* slider needs space for buttons */ padding-left: 10px; } div.row.quintuple > div.col > div.mini div.thumb img { width: 120px; height: 75px; } div.row.triple > div.col > div.mini { width: 140px; } div.row.triple > div.col > div.mini div.thumb img { width: 140px; height: 87px; } div.row.triple > div.col > div.mini.source div.thumb img { /* thumb size for sources given by digilib */ width: auto; height: auto; } div.row.double > div.col > div.mini div.thumb img { height: 180px; } div.row.double > div.col { width: 220px; } div.mini div.type { color: #9f917a; margin-top: 0.5em; } div.mini div.title { margin-top: 0.5em; } div.mini.website div.title { color: #3b4186; } div.mini div.author { color: #3b4186; margin-top: 0.5em; } div.mini div.link { margin-top: 0.5em; } div.mini h2 { /* e.g. title for mini-books */ font-size: 14px; /* but no line if used inside box */ border-bottom: 0; } /* * slider buttons */ div.box div.slidebutton { position: absolute; top: 110px; width: 16px; height: 18px; z-index: 10; } div.box div.slidebutton.prev { left: 0; } div.box div.slidebutton.next { right: 0; text-align: right; } .ajaxSlider .slidebutton.prev, .ajaxSlider .slidebutton.next { /* AJAX slider buttons initially hidden */ display: none; } div.slider.row > div.col:first-child { /* space for slidebuttons */ padding-left: 20px; } /* * paragraph with line */ div.item { padding-top: 5px; padding-bottom: 5px; border-bottom: 1px solid #dccbae; line-height: 1.5; } /* * pubman references */ .reference .Italic { font-style: italic; } /* * table with items (articles) */ table.items { /* no space between cells */ border-collapse: collapse; } table.items td { vertical-align: top; text-align: left; line-height: 1.5; padding: 1em 1em 0.5em 0; } table.items td:last-child { padding-right: 0; } table.items.shorter td, table.items tr.shorter td { padding: 0.5em 0.5em 0.5em 0; } table.items th { font-family: Georgia, Times, serif; font-size: 16px; font-weight: normal; font-style: italic; color: #887163; text-align: left; border-bottom: 3px solid #dccbae; } table.items h2 { border-bottom: 3px solid #dccbae; margin-bottom: 0; } table.items h2 a { color: inherit; font-weight: inherit; text-decoration: none; } table.items img.thumb { width: 55px; height: 34px; } table.items td.line, table.items tr.line td { border-bottom: 1px solid #dccbae; } table.items td.fatline, table.items tr.fatline td { border-bottom: 2px solid #dccbae; } table.items td.topline, table.items tr.topline td { border-top: 1px solid #dccbae; } table.items td.line h2, table.items tr.line td h2, table.items td.fatline h2, table.items tr.fatline td h2 { /* h2 in td.line has no line */ border-bottom: 0; } table.items tr.last_item td { /* last_item has no padding-top */ padding: 0 0 0.5em 0; } table.items td p:first-child { /* first p has no margin-top */ margin-top: 0; } table.items h3.fold_head { font-size: 12px; background-color: #f6f2eb; padding: 3px; } table.items h3.fold_head img { margin: 0 5px 0 3px; } table.items tr td:first-child div.fold_body { /* e.g. preprint abstracts */ padding: 0.5em 0 0 20px; } table.items .thumb_fold { position: relative; padding-left: 14px; } table.items .thumb_fold .fold_head { position: absolute; left: 0; top: 3px; } ul.items { list-style-type: none; padding: 0; } ul.items li { padding: 0 0 0.5em 20px; border-bottom: 3px solid #dccbae; margin-bottom: 0.5em; } ul.items .fold_head { text-indent: -20px; } ul.items .fold_head img.fold_open, ul.items .fold_head img.fold_closed { padding-right: 5px; } ul.items .type { /* font-size: 11px; */ color: #696968; } ul.items h2 { font-size: 12px; } ul.items td.key, table.items td.key { color: #3b4186; } .foldable img.fold_closed, .foldableById img.fold_closed { /* fold is initially open */ display: none; } /* * hierarchical list (of projects) */ div.hierlist h2 { text-indent: -20px; padding-left: 20px; padding-bottom: 5px; border-bottom: 3px solid #dccbae; margin-bottom: 0; } div.hierlist h2 img { padding: 0 3px 3px 3px; } div.hierlist h2 a { color: inherit; font-weight: inherit; text-decoration: none; } div.hierlist ul { list-style-type: none; padding: 0 0 10px 0; margin: 0; border-bottom: 1px solid #dccbae; } div.hierlist li { padding: 5px 0 5px 16px; text-indent: -13px; } div.hierlist li.indent { padding-bottom: 10px; border-bottom: 1px solid #dccbae; margin-bottom: 5px; } div.hierlist li h3 { font-size: 12px; } div.hierlist li.level_1 h3 { font-size: 14px; } div.hierlist li.level_2 h3 { font-weight: bold; } div.hierlist li.level_2 { margin-left: 20px; } div.hierlist li.level_3 { margin-left: 40px; } div.hierlist li.level_4 { margin-left: 60px; } div.hierlist li.level_5 { margin-left: 80px; } /* * figures (in project descriptions and features) */ div.figure { float: left; padding: 0.5em 1em 0.5em 0; } div.feature div.figure, div.project div.figure { width: 230px; } div.feature div.figure img, div.project div.figure img { width: 230px; } div.image_small { float: left; width: 230px; padding: 0.5em 1em 0 0; } div.image_small.right { float: right; padding: 0.5em 0 0 1em; } div.image_small img { width: 230px; } div.banner_large img { width: 460px; } div.figure div.figcaption, div.banner_large div.caption, div.image_small div.caption { font-size: 10px; line-height: 1.5; color: #9f917a; margin-top: 0.5em; } /* * project description and feature */ h3.authors { margin-top: 0.5em; } p.maintext_authors { font-size: 14px; color: #3b4186; } div.description { margin-top: 0.5em; line-height: 1.5; } h2.type { color: #9f917a; } /* * feature story archive */ ul.items.features li { padding: 0 0 0.5em 0; border-bottom: 1px solid #dccbae; } ul.items.features .thumb { float:left; padding: 8px 10px 0 0; } ul.items.features .thumb img { width: 55px; height: 34px; } ul.items.features .feature_number { font-family: Georgia, Times, serif; font-size: 24px; color: #696968; } ul.items.features .date { font-size: 11px; color: #696968; } ul.items.features h1 { font-size: 12px; font-weight: bold; margin: 0; } /* * thesaurus */ .showApproach { color:#EA8500; cursor:pointer; } .showApproach:hover { text-decoration: underline; } /* * flyout divs (for webpages) */ .flyout { position: relative; z-index: 0; } .flyout .folded { /* folded initially hidden */ display: none; } .flyout.flying { background-color: white; z-index: 10; /* padding: 10px; */ box-shadow: 2px 2px 3px 1px #d0d0d0; } .flyout.flying .folded { display: block; } .flyout.flying div { padding: 0 10px; } .flyout .flyout_open, .flyout .flyout_close { position: absolute; bottom: 0; right: 0; } .flyout .flyout_close { /* close initially hidden */ display: none; } div.row.triple > div.col > div.mini.flying div.thumb { padding: 0; } div.row.triple > div.col > div.mini.flying div.thumb img { /* extended flyout image */ width: 300px; height: 187px; } /* * sidebar */ div.sidebar { display: table-cell; width: 220px; border-top: 3px solid #dccbae; background-color: white; padding: 20px 10px 20px 0; } /* like sidebar inside main */ div.sidebox { width: 220px; padding: 0 0 20px 0; } div.sideblock h2, div.sidebox h2 { position: relative; font-size: 12px; margin-top: 20px; padding-bottom: 5px; border-bottom: 3px solid #dccbae; margin-bottom: 0; } div.sideblock:first-child h2, div.sidebox:first-child h2 { margin-top: 0; } div.sideblock h3 { font-size: 12px; margin-top: 5px; padding-bottom: 5px; border-bottom: 1px solid #dccbae; } /* * project sidebars */ div.sideblock h2 .proj_state, div.sideblock h2 .more { position: absolute; right: 0; } div.sideblock .project { background: url(../images/internal.png) no-repeat scroll 6px 11px #F5DAAF; border-bottom: 1px solid #F3BE7C; padding: 6px 6px 6px 20px; } div.sideblock .project.inactive { background: url(../images/internal.png) no-repeat scroll 6px 11px #f6e6cc; } div.sideblock .project.parent { background: url(../images/up.png) no-repeat scroll 6px 11px #F9F4E1; border-bottom: 1px solid #DCCBAE; color: #666666; } div.sideblock .project a { color: #333; } /* * special sideblocks */ div.sideblock .item.link, div.sideblock .item.internal { background: url(../images/internal.png) 0 11px no-repeat; padding-left: 10px; } div.sideblock .item.external { background: url(../images/external.png) 0 11px no-repeat; padding-left: 13px; } div.sideblock .item.download { background: url(../images/download.png) 0 8px no-repeat; padding-left: 15px; } div.sideblock .item.thumb img { width: 55px; height: 34px; } div.sideblock .item.thumb .text { padding-left: 0.5em; } /* * footer */ #footservices { position: relative; /* height: 20px; */ border-top: 1px solid #dccbae; padding-top: 8px; margin-top: 2em; } #footservices div.text { font-size: 11px; display: inline; } #footservices div.icons { display: inline; position: absolute; right: 0; } #footer { position: relative; height: 50px; border-top: 1px solid #dccbae; padding-top: 8px; margin-top: 1em; } #footer div.text { display: inline-block; color: #d45a00; font-size: 11px; } #footer div.logo { display: inline-block; position: absolute; right: 0; } #footer div.logo img { width: 204px; height: 41px; } /* * bookmark flags */ #bookmarks { position: absolute; top: 0; right: -131px; width: 130px; } #bookmarks div.bookmark { z-index: 1; font-family: Georgia, Times, serif; font-style: italic; font-size: 14px; color: #3b4186; background-color: white; padding: 5px 0.5em 5px 0.5em; margin: 0.5em 0; box-shadow: 2px 2px 3px 1px #d0d0d0; } #bookmarks div.bookmark a { display: inline-block; position: relative; width: 100px; color: #3b4186; background: url(../images/internal.png) center right no-repeat; padding-right: 13px; } #bookmarks div.bookmark a img { position: absolute; right: 13px; }