Mercurial > hg > MPIWGWeb
diff css/mpiwg.css.inlinebox @ 8:0a7691055ea3
layout now with table-cell.
author | casties |
---|---|
date | Thu, 14 Feb 2013 20:38:30 +0100 |
parents | |
children |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/css/mpiwg.css.inlinebox Thu Feb 14 20:38:30 2013 +0100 @@ -0,0 +1,447 @@ +/* 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: #d45a00; + 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: #3b4186 !important; +} + +h1 { + color: #3b4186; + font-size: 16px; + font-weight: bold; + margin: 10px 0 10px 0; +} + +h2 { + color: #3b4186; + font-size: 16px; + font-weight: normal; + margin: 0; +} + +h3 { + color: #3b4186; + font-size: 14px; + font-weight: normal; + margin: 0; +} + +h1 a { + /* a header with a link looks like a header */ + color: inherit; + font-weight: inherit; + text-decoration: none; +} + +p { + margin: 0; +} + +/* + * header and wrapper + */ + +#wrapper { + width: 900px; + margin: 0 auto; + padding: 10px 40px 10px 20px; + background-color: #fcf2df; + box-shadow: 0 0 5px 3px #d0d0d0; +} + +#header { + position: relative; + width: 900px; + height: 90px; + margin: 0 0 10px 0; +} + +#header div.title { + display: inline; + position: absolute; + left: 0; + top: 20px; + width: 661px; + height: 40px; +} + +#header div.logo { + display: inline; + position: absolute; + right: 0; + width: 87px; + height: 88px; +} + +/* + * Main Navigation + */ +#mainnav { + position: relative; + width: 900px; + font-family: Verdana, Arial, sans-serif; + font-size: 12px; + border-top: 8px solid #fab775; + 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 li.sec:hover { + border-top: 8px solid #ea8500; +} + +#mainnav a { + color: #696968; + outline: none; +} + +#mainnav a:hover { + color: #000000; + text-decoration: none; +} + +#mainnav li.sec.on { + border-top: 8px solid #ea8500; +} + +#mainnav li.sec.on a { + color: #ea8500; + outline: none; + font-weight: bold; +} + +#mainnav li.sec.lang { + position: absolute; + right: 0; + top: -8px; + margin-right: 0; +} + +/* + * main section wrapper + */ +div.maincontent { + /* set font-size to ignore whitespace */ + font-size: 0; +} + + +/* + * subnavigation + */ + +div.leftbox { + display: inline-block; + vertical-align: top; + 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; +} + +/* + * main section + */ + +div.main { + display: inline-block; + vertical-align: top; + background-color: white; +} + +div.main div.center { + width: 460px; + margin: 20px; + /* reset font-size */ + font-size: 12px; +} + +/* sidebars */ + +div.main div.sidebar { + width: 220px; + /* margin-right: 10px; */ +} + + +div.row { + /* set font-size to ignore whitespace */ + font-size: 0; +} + +div.row div.block { + display: inline-block; + vertical-align: top; + /* reset font-size */ + font-size: 12px; +} +div.row div.block:first-child { + /* first block has no left margin */ + margin-left: 0 !important; +} + +div.row.triple div.block { + width: 31.7%; + margin-left: 2.4%; +} + +div.row div.block h2 { + margin-top: 35px; + padding-bottom: 3px; + border-bottom: 3px solid #dccbae; +} + +div.row div.block div.item { + padding-top: 5px; + padding-bottom: 5px; + border-bottom: 1px solid #dccbae; + line-height: 1.5; +} + + +/* frontpage version */ +div.main.home { + background-color: transparent; +} + +div.main.home div.row div.block b { + /* bold is blue */ + color: #3b4186; +} +div.main.home div.row div.block h2 { + /* more-links in title are right */ + position: relative; +} +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; +} + +/* + * Front page feature + */ + +div.row.feature { + background-color: #f4e0c7; +} + +div.row.feature div.block.teaser_image { + position: relative; + width: 593px; + height: 351px; +} + +div.row.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.row.feature div.block.teaser_text { + position: relative; + width: 265px; + margin-left: 21px; + padding-right: 21px; +} + +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; +} +/* title */ +div.row.feature div.block.teaser_text h1 { + font-size: 16px; + font-weight: normal; + margin-top: 0; +} +/* "current research topic */ +div.row.feature div.block.teaser_text h2 { + font-size: 14px; + color: #887163; + margin-bottom: 0; + margin-top: 15px; + border-bottom: 0; +} +/* feature date */ +div.row.feature div.block.teaser_text h3 { + margin-top: 20px; + margin-bottom: 20px; + font-size: 12px; +} +div.row.feature div.block.teaser_text p { + line-height: 1.5; + margin: 0; +} + +/* + * footer + */ + +div.footer { + position: relative; + width: 900px; + height: 50px; + border-top: 1px solid #dccbae; + padding-top: 8px; + margin-top: 45px; +} + +div.footer div.text { + display: inline-block; + color: #d45a00; + font-size: 11px; +} + +div.footer div.logo { + display: inline-block; + position: absolute; + right: 0; +} + +div.footer div.logo img { + width: 204px; + height: 41px; +}