input, textarea, select, [contenteditable=true], [contenteditable=true] * { -webkit-user-select: text !important; -khtml-user-select: text !important; -moz-user-select: text !important; -ms-user-select: text !important; user-select: text !important; outline:none; } html, body { margin: 0; padding:0; width:100%; color:#1a1a1a; font-family: 'Poppins',sans-serif; font-weight: 500; font-style: normal; font-size:13px; overflow-x:hidden; background-color:#fff; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; } @media screen and (max-width: 1000px) { html, body { overflow-x:auto; } } h1,h2 { font-size:1.5em; font-weight:bold; } h3 { font-size:1.08em; line-height:1.57em; font-weight:700; color:#061353; margin:0; margin-top:30px; margin-bottom:10px; padding:0; } p.error, font.error, i.error { color:#BB1A3F; } p.light, font.light, i.light { color:#97A3B5; } p.info { color:#6C7382; } .nobr { white-space:nowrap; } sub, sup { line-height:0; font-size:0.6em; vertical-align:sub; } sup { vertical-align:super; } img { border:0; } a { color:inherit; text-decoration:none; } a:hover { color:#029896; } a.row { display:block; } a.row small { color:#97A3B5; } a.row:hover { color:inherit; background-color:#F2F5F9; border-radius:4px; margin:-5px; padding:5px; } p a { text-decoration:underline; } .printonly { display:none; } [data-slider][data-href], [data-slider][href] { cursor:pointer; } .positive { background-color:#19A483; color:#fff; } .negative { background-color:#BB1A3F; color:#fff; } .warning { background-color:#ED5A2B; color:#fff; } *:not(strong).positive:not(.state) { padding-left:3px; padding-right:3px; margin-left:-3px; margin-right:-3px; border-radius:4px; -webkit-box-shadow: 0px 0px 0px 1px #19A483; -moz-box-shadow: 0px 0px 0px 1px #19A483; box-shadow: 0px 0px 0px 1px #19A483; } *:not(strong).negative:not(.state) { padding-left:3px; padding-right:3px; margin-left:-3px; margin-right:-3px; border-radius:4px; -webkit-box-shadow: 0px 0px 0px 1px #BB1A3F; -moz-box-shadow: 0px 0px 0px 1px #BB1A3F; box-shadow: 0px 0px 0px 1px #BB1A3F; } *:not(strong).warning:not(.state) { padding-left:3px; padding-right:3px; margin-left:-3px; margin-right:-3px; border-radius:4px; -webkit-box-shadow: 0px 0px 0px 1px #ED5A2B; -moz-box-shadow: 0px 0px 0px 1px #ED5A2B; box-shadow: 0px 0px 0px 1px #ED5A2B; } .font-positive { color:#19A483 !important; } .font-negative { color:#BB1A3F !important; } .font-warning { color:#ED5A2B !important; } .font-light { color:darkgrey !important; } span.state { display:inline-block; text-align:center; font-weight:600; font-size:0.92em; background-color:#DEE9FC; color:#2C6EEF; padding:0.3em 0.5em; border-radius:4px; white-space:nowrap; } span.state.info { background-color:#F2F5F9; color:#97A3B5; } span.state.positive { background-color:#F0FCF8; color:#19A483; } span.state.negative { background-color:#FEEAE8; color:#BB1A3F; } span.state.warning { background-color:#FFECE1; color:#ED5A2B; } span.state.blank { background-color:transparent; color:#97A3B5; } span.state.large { font-size:1em; } span.state.inline { display:inline; } .notice { display:block; position:relative; padding:10px; margin-bottom:30px; background-color:#FFECE1; color:#1a1a1a; border-radius:4px; } .notice[class^="icon-"]:before, .notice[class*=" icon-"]:before, .notice td:last-child { color:#ED5A2B; } .notice[class^="icon-"]:before, .notice[class*=" icon-"]:before { position:absolute; top:50%; left:10px; margin:0; transform:translateY(-50%); font-size:2.31em;} .notice[class^="icon-"], .notice[class*=" icon-"] { padding-left:3.85em; min-height:3em; } .notice td:last-child { font-weight:600; font-size:1.08em; text-align:right; } .notice td:last-child a { display:inline-block; padding:0.43em 0.57em; } .notice :first-child { margin-top:0; } .notice :last-child { margin-bottom:0; } .notice a { color:inherit; } .notice a:hover { color:#1a1a1a; } .notice h2 { margin:0; padding:0; font-size:inherit; font-weight:bold; line-height:1.69em; } .notice p { margin:0; padding:0; line-height:1.46em; } .notice.light { background-color:#F0FCF8; } .notice.light[class^="icon-"]:before, .notice.light[class*=" icon-"]:before, .notice.light td:last-child { color:#19A483; } .notice:empty, .notice[data-autocomplete-notice-value="value"][data-value=""], .notice[data-autocomplete-notice-value="value"]:not([data-value]) { display:none; } .notice + .notice { margin-top:-20px; } .input + .notice { margin-top:1em; } .notice[data-value] + .input { margin-top:-25px; } [class^="icon-"].large, [class*=" icon-"].large { font-size:1.4em; } ul.kpi { display:block; list-style:none; margin:0; margin-bottom:-5px; padding:0; overflow:hidden; } ul.kpi > li { position:relative; display:block; float:left; margin:0; padding:0; padding-bottom:5px; } ul.kpi > li + li { margin-left:30px; padding-left:30px; } ul.kpi > li + li:before { content:""; position:absolute; bottom:5px; left:-1px; width:1px; height:1000px; background-color:#E4E9EF; } ul.kpi > li > span { display:block; font-size:0.92em; line-height:1.67em; color:#6C7382; margin-bottom:5px; } ul.kpi > li > strong { display:block; color:#061353; font-size:1.85em; line-height:1.33em; font-weight:500; } ul.kpi.small > li > strong { font-size:1.6em; } ul.kpi > li > strong.negative { background:transparent; color:#BB1A3F; } /* In the page head the KPIs scroll sideways rather than wrapping onto a second line. overflow-y stays hidden: the divider between them is a 1000px pseudo-element that relies on being clipped, and leaving one axis visible would promote the other to auto and add a vertical scrollbar. The bar itself is hidden — trackpad and shift+wheel still scroll, and a scrollbar would sit badly against the list's negative bottom margin. */ div.wrapper > div.main > div.content > .head ul.kpi { display:flex; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -ms-overflow-style:none; } div.wrapper > div.main > div.content > .head ul.kpi::-webkit-scrollbar { display:none; } div.wrapper > div.main > div.content > .head ul.kpi > li { float:none; flex:none; white-space:nowrap; } /* Fade the right edge into the background while there is more to scroll to. A mask rather than an overlay, because the list IS the scroll container — an absolutely positioned gradient inside it would scroll away with the content. functions.js drops .scroll-more once the end is reached, so the last figure is never left half-faded. */ div.wrapper > div.main > div.content > .head ul.kpi.scroll-more { -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 60px),transparent 100%); mask-image:linear-gradient(to right,#000 calc(100% - 60px),transparent 100%); } ul.kpi > li > small { display:block; margin-top:5px; font-size:0.92em; line-height:1.17em; color:#97A3B5; } ul.kpi > li > a.button { margin-top:5px; padding:0.3em 0.5em; display:inline-block; } ul.kpi > li > a.button[class^="icon-"]:before, ul.kpi > li > a.button[class*=" icon-"]:before { width:auto; margin:auto; margin-right:5px; } ul.index { display:block; list-style:none; margin:0; margin-bottom:2em; padding:0; border-bottom:1px solid #E4E9EF; } ul.index > li { position:relative; display:inline-block; margin:0; padding:0; } ul.index > li a { display:block; position:relative; color:#6C7382; font-size:14px; padding:0.71em 1.43em; font-weight:600; } ul.index > li a:before { margin-right:0.3em; } ul.index > li a:hover, ul.index > li a.selected, ul.index > li a.search-match { color:#2C6EEF; } ul.index > li a.selected:after, ul.index > li a.search-match:after { content:""; position:absolute; bottom:-1px; left:0; right:0; height:3px; background-color:#2C6EEF; } /* S125: die Reiter zeigen, ohne selbst zu suchen (functions.js, searchIndexApply()), wo eine laufende Suche noch Treffer hat. Kein neues Gestaltungsmittel: .search-match teilt sich die Farbe mit :hover/ .selected oben -- derselbe Blauton, den ein Reiter ohnehin schon annimmt, sobald er "ansprechbar" wirkt, nur jetzt durch eine Klasse statt den Mauszeiger ausgelöst. .search-none übernimmt die 55% Deckkraft, mit der .permission-group-block.suggested weiter unten in dieser Datei einen Block bereits "zurücknimmt", ohne ihn zu verstecken. Beides bleibt aus, solange keine Suche läuft (die Klassen setzt ausschliesslich JS, nie PHP) -- der Normalfall (DoD 2) ändert sich damit nicht um ein einziges Byte. S126: die Farbe reichte nicht -- .selected zeigt sein Aussehen auch über die Linie (:after direkt oben), die .search-match bisher nicht mitbekam. Jetzt teilen sich beide dieselbe :after-Regel, also auch dieselbe Linie, gemessen gleich (DoD 1). Und der gewählte Reiter ohne eigenen Treffer darf jetzt nicht mehr wie gewählt aussehen (DoD 2) -- ohne dass die Klasse .selected selbst wandert (siehe searchIndexApply() in functions.js: sie bleibt die tatsächliche Auswahl, nur ihr Aussehen wird unterdrückt). .search-none trägt search-none jetzt auch auf dem gewählten Reiter selbst; die beiden Regeln darunter nehmen ihm exakt die zwei Dinge wieder weg, die .selected ihm gibt (Farbe, Linie) -- übrig bleibt genau das Aussehen eines gewöhnlichen, trefferlosen Reiters, samt derselben 55% Deckkraft. */ ul.index > li a.search-none { opacity:0.55; } ul.index > li a.selected.search-none { color:#6C7382; } ul.index > li a.selected.search-none:after { content:none; } .input, label:not([class]) { display:block; position:relative; line-height:1.3em; } label.input, label:not([class]) { padding:0.77em 0; border-bottom:1px solid transparent; } .input input:not(.button), .input textarea, .input select { display:block; position:relative; font-family:inherit; font-weight:inherit; font-size:inherit; line-height:inherit; color:inherit; background:none; padding:0; margin:0; border:0; width:100%; -webkit-appearance:none; -moz-appearance:none; appearance:none; resize: none; white-space: pre-wrap; word-wrap: break-word; } .input.large input:not(.button), .input.large textarea, .input.large select { font-size:1.54em; font-weight:bold; } .input.disabled input:not(.button):disabled, .input.disabled textarea:disabled, .input.disabled select:disabled { color:#1a1a1a; -webkit-text-fill-color:#1a1a1a; opacity:1; } .input ::-webkit-input-placeholder { color:#97A3B5; } .input ::-moz-placeholder { color:#97A3B5; } .input :-ms-input-placeholder { color:#97A3B5; } .input :-moz-placeholder { color:#97A3B5; } .input.error ::-webkit-input-placeholder, .input.missing ::-webkit-input-placeholder { color:#BB1A3F; } .input.error .input ::-moz-placeholder, .input.missing .input ::-moz-placeholder { color:#BB1A3F; } .input.error .input :-ms-input-placeholder, .input.missing .input :-ms-input-placeholder { color:#BB1A3F; } .input.error .input :-moz-placeholder, .input.missing .input :-moz-placeholder { color:#BB1A3F; } .input[class^="icon-"]:not(.select), .input[class*=" icon-"]:not(.select) { padding-left:2em; } .input[class^="icon-"].icon-right:not(.select), .input[class*=" icon-"].icon-right:not(.select) { padding-right:2em; padding-left:0; } .input[class^="icon-"]:not(.select):not(.disabled), .input[class*=" icon-"]:not(.select):not(.disabled) { cursor:pointer; } .input[class^="icon-"]:before, .input[class*=" icon-"]:before, .input.icon-text > span, .input.icon-text > a { position:absolute; top:0.92em; left:0; margin:0; } .input.icon-text > span { pointer-events:none; } .input[class^="icon-"].icon-right:before, .input[class*=" icon-"].icon-right:before, .input.icon-text.icon-right > span, .input.icon-text.icon-right > a { right:0; left:auto; } .input.icon-text > span, .input.icon-text > a { font-weight:600; } .input.icon-text > a { background-color:#97A3B5; color:#fff; padding:4px 8px; margin-top:-4px; border-radius:4px; } .input.icon-text > input:not([readonly]) + a:hover { background-color: #1a1a1a; } .input.icon-text > input[readonly] + a { cursor:default; background-color:#1a1a1a; } /* The connected state as plain INFORMATION — what a non-writer sees instead of the connect button. */ .input.icon-text > span.bank-connected { position:absolute; top:0.92em; left:0; font-weight:600; background-color:#1a1a1a; color:#fff; padding:4px 8px; margin:-4px 0 0 0; border-radius:4px; cursor:default; } .input.icon-text > input:not([readonly]) + a span.readonly { display:none; } .input.icon-text > input[readonly] + a span.readonly { display:inline; } .input.icon-text > input[readonly] + a span.readonly + span { display:none; } .input.select { padding:0; } .input.select.color { margin:0.77em 0; } .input.select select { padding:0.77em 0; padding-right:2em; cursor:pointer; } .input.select.color select { padding:0.77em; padding-right:2.77em; color:#97A3B5; background-color:#F2F5F9; border-radius: 4px; } .input.select.color.missing select, .input.select.color.error select { border-bottom-left-radius:0; border-bottom-right-radius:0; color:#BB1A3F; } .input.select.selected select { color:rgba(18, 23, 40, 1); } .input.select:after { position:absolute; top:50%; right:0; color:#97A3B5; font-size:0.6em; transform:translateY(-50%); content:"\e822"; pointer-events:none; font-family: "profuturum-icon"; font-style: normal; font-weight: normal; speak: never; text-decoration: inherit; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .input.select.color:after { right:0.77em; } .input.select.icon-right select { padding-left:2em; padding-right:0; } .input.select.color.icon-right select { padding-left:2.77em; padding-right:0.77em; } .input.select.icon-right:after { left:0; right:auto; } .input.select.color.icon-right:after { left:0.77em; } /* A select the rights locked (readonlyFields tags the wrapper): nothing will open, so no arrow inviting a click, and no pointer cursor either. */ .input.select.readonly:after { content:none; } .input.select.readonly select { cursor:default; } .input.select[class^="icon-"] select, .input.select[class*=" icon-"] select { padding-left:2em; padding-right:2em; } .input.select.color[class^="icon-"] select, .input.select.color[class*=" icon-"] select { padding-left:2.77em; padding-right:2.77em; } .input.select[class^="icon-"]:before, .input.select[class*=" icon-"]:before { pointer-events:none; position:absolute; top:0.15em; left:0; margin:0; } .input.select.color[class^="icon-"]:before, .input.select.color[class*=" icon-"]:before { top:0.92em; left:0.77em; } .input.select[class^="icon-"].icon-right:before, .input.select[class*=" icon-"].icon-right:before { right:0; left:auto; } .input.select.color[class^="icon-"].icon-right:before, .input.select.color[class*=" icon-"].icon-right:before { right:0.77em; } label.input.checkbox, label.input.radio { cursor:pointer; } .input.checkbox input, .input.radio input { position:absolute; opacity:0; cursor:pointer; height:0; width:0; } .input.checkbox input + span, .input.radio input + span { box-sizing: border-box; position:relative; display:block; cursor:pointer; float:right; text-align:center; min-height:0; height:1.3em; padding:0; min-width:1.3em; overflow:hidden; border:1px solid #E4E9EF; border-radius:4px; -webkit-border-radius:4px; -moz-border-radius:4px; background-color:#fff; } .input.radio input + span { width:1.3em; background-color:#E4E9EF; } .input.checkbox.left { position:relative; padding-left:2.07em; text-align:left; } .input.checkbox.left input + span { position:absolute; top:0.77em; left:0; } .input.checkbox.notext { overflow:hidden; } .input.checkbox input:checked + span, .input.radio input:checked + span { background-color:#1a1a1a; border-color:#1a1a1a; } .input.checkbox input:disabled:checked + span, .input.radio input:disabled:checked + span { background-color:#19A483; border-color:#19A483; } .input.checkbox input + span:after, .input.radio input + span:after { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:0.7em; text-align:center; line-height:1em; font-family: "profuturum-icon"; font-style: normal; font-weight: normal; speak: never; text-decoration: inherit; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .input.checkbox input:checked + span:after, .input.radio input:checked + span:after { color:#fff; } .input.checkbox input:checked + span:not([data-icon]):not([data-icon-checked]):after, .input.radio input:checked + span:not([data-icon]):not([data-icon-checked]):after { content:"\e809"; } .input.checkbox input + span[data-icon][data-icon-checked]:after, .input.radio input + span[data-icon][data-icon-checked]:after { content:attr(data-icon); } .input.checkbox input:checked + span[data-icon-checked]:after, .input.radio input:checked + span[data-icon-checked]:after { content:attr(data-icon-checked); } .input.checkbox input:checked + span[data-icon]:not([data-icon-checked]):after, .input.radio input:checked + span[data-icon]:not([data-icon-checked]):after { content:attr(data-icon); } .input.checkbox.disabled { color:#19A483; } .input.checkbox.disabled, .input.checkbox.disabled input + span { cursor:not-allowed; } /* Ein "left"-Kaestchen in einer TABELLENZELLE sitzt senkrecht mittig, nicht an der Oberkante. .input.checkbox.left setzt top:0.77em -- das ist fuer ein Kaestchen NEBEN TEXT gedacht, wo es auf der ersten Textzeile sitzen soll. In einer Zelle gilt aber vertical-align:middle, die Zelle ist so hoch wie die hoechste Spalte, und die 0.77em schoeben das Kaestchen um genau diesen Betrag unter die Mitte. GEMESSEN (Portfolio-Bericht, 3 Projekte, 1280px): ohne diese Zeile box.y-Zellenoberkante 40.36px bei 81.72px Zeilenhoehe -- 10.01px zu tief; mit ihr 32.42px, also exakt mittig (Zeilenmitte 40.86px minus halbe Kaestchenhoehe 8.44px). DIESELBE ERKLAERUNG, ZWEI ORTE IM SELEKTOR -- nicht zwei Regeln: die Projektauswahl (S94) braucht woertlich, was table.input schon hatte. Eine zweite Regel danebenzuschreiben hiesse, dieselbe Aussage zweimal zu fuehren; sie liefen auseinander, ohne je falsch auszusehen. Neu ist hier nur ein SELEKTOR, kein CSS-Mittel -- die Zusicherung aus S51 (neue Mittel ausschliesslich in Erklaerungen) bleibt unberuehrt. */ table.input td .input.checkbox.left input + span, .input.list .results td .input.checkbox.left input + span { top:50%; transform:translateY(-50%); } label.input.missing, label.input.error { border-color:#BB1A3F; } label.input:not(.error):not(.disabled):not(.readonly):not(.select.color).focus, label.input:not(.error):not(.disabled):not(.readonly):not(.select.color):hover { border-radius:4px; border-color:transparent; background-color:#F2F5F9; -webkit-box-shadow:-0.77em 0 0 0 #F2F5F9,0.77em 0 0 0 #F2F5F9; -moz-box-shadow:-0.77em 0 0 0 #F2F5F9,0.77em 0 0 0 #F2F5F9; box-shadow:-0.77em 0 0 0 #F2F5F9,0.77em 0 0 0 #F2F5F9; border-radius:4px; } .input.input-2 { padding:0; } .input.input-2 > div:not(.clear) { position:relative; display:block; width:50%; float:left; } .input.input-2 > div:first-child > .input { margin-right:2.5em; } .input.input-2 > div:first-child:after { content:''; width:1px; position:absolute; top:0; bottom:0; right:-1px; background-color:#E4E9EF; } .input.input-2 > div:first-child + div > .input { margin-left:2.5em; } .input.input-3 { padding:0; } .input.input-3 > div:not(.clear) { position:relative; display:block; width:25%; float:left; } .input.input-3 > div:first-child { width:50%; } .input.input-3 > div:first-child > .input, .input.input-3 > div:first-child + div > .input { margin-right:2.5em; } .input.input-3 > div:first-child:after{ content:''; width:1px; position:absolute; top:0; bottom:0; right:-1px; background-color:#E4E9EF; } .input.input-3 > div:first-child + div > .input { margin-left:2.5em; } .input:not([data-more][data-more-state=hide]) + .input, .input:not([data-more][data-more-state=hide]) + .input[data-more][data-more-state=hide] + .input { margin-top:0.92em; } .input:not([data-more][data-more-state=hide]) + .input.select, .input.select:not([data-more][data-more-state=hide]) + .input, .input.select:not([data-more][data-more-state=hide]) + .input[data-more][data-more-state=hide] + .input { margin-top:1.69em; } .input.select:not([data-more][data-more-state=hide]) + .input.select, .input.select:not([data-more][data-more-state=hide]) + .input[data-more][data-more-state=hide] + .input.select { margin-top:2.46em; } .button { display:inline-block; cursor:pointer; margin:0; padding:11px; text-align:center; font-size:1.08em; line-height:1em; font-family:inherit; font-weight:600; border:2px solid transparent; border-radius:4px; background-color:#2C6EEF; color:#fff; -webkit-appearance:none; -moz-appearance:none; appearance:none; } .input .button { margin-top:0.77em; } .input.submit .button:not(.plain) { display:block; } .input.submit { text-align:center; } .input input.button { width:100%; } .input + .input .button { margin-top:1.69em; } .input.select + .input .button, *:not(.input) + .input .button { margin-top:2.46em; } .action + .input .button { margin-top:3.47em; } .input.submit + .input.submit, form + .input.submit { margin-top:0; } .input.submit + .input.submit .button, form + .input.submit .button { margin-top:1.54em; } .input.list { margin-bottom:2.31em; border-bottom:1px solid #E4E9EF; } .input.list table tbody tr.hidden, .input.list:not([data-search-results-visible="0"]) table tbody tr.protected { display:none!important; } .input.list h2 { font-size:0.92em; font-weight:600; color:#061353; line-height:1.17em; margin:0; padding:0; padding-bottom:1.67em; padding-top:2.31em; margin-top:2.31em; } /* DIE TRENNLINIE DIESER LISTEN -- EINE ERKLAERUNG, ZWEI STELLEN (S68). Der Auftraggeber wollte zwischen Suchfeld und erstem Listeneintrag mehr Abstand und eine Trennlinie, "wie bei der Bankauswahl". Die Linie dort ist GEMESSEN und nicht nachgebaut: im Bankenauswahl-Overlay (module/bank.overlay.php) steht zwischen Suchfeld und Liste eine Ueberschrift, und die Linie ist deren border-top. Echter Browser, 1280x800, Grundschrift 13px: 1px solid #E4E9EF -> computed "1px solid rgb(228, 233, 239)" Dieselbe Haarlinie, die .input.list auch unten unter sich zieht (border-bottom, oben) -- im Haus gibt es genau diese eine. Die Projektauswahl (includes/php/projectselect.inc.php) hat an dieser Stelle KEINE Ueberschrift. Sie bekommt deshalb ein eigenes, leeres Kaestchen dafuer: .search:after. Geteilt wird die ERKLAERUNG, nicht der Wert -- eine zweite Zeile mit "1px solid #E4E9EF" saehe heute gleich aus und liefe morgen auseinander, ohne dabei je falsch auszusehen. WARUM NICHT EINFACH DER OBERE RAHMEN DER LISTE (so stand es bis S80): weil die Liste der ROLLENDE Kasten ist. Alles, was unter ihrem oberen Rahmen Platz schafft, liegt IN ihr und rollt mit dem Inhalt hinaus -- der Abstand unter der Linie verschwand beim Rollen, und die erste sichtbare Zeile klebte an ihr. Gemessen, 100 Projekte, drei Rollpositionen (Abstand Linie -> oberster sichtbarer Inhalt): bis S80 (padding im Kasten) oben 21.70 mittendrin 0.00 ganz unten 0.00 jetzt (Kaestchen davor) oben 21.70 mittendrin 21.70 ganz unten 21.70 An der unteren Linie war der Abstand immer konstant 21.70 -- er ist ein margin AUSSERHALB des Kastens. Genau diese Bauweise hat die obere Linie jetzt auch, und das ist es, was der Auftraggeber mit "so wie bei der unteren linie zum unteren rand des scrollbaren bereichs" verlangt hat. DIE BANKAUSWAHL MACHT ES RICHTIG, nachgemessen an genau dieser Eigenschaft (23 Banken, 972px rollbar): ihr Abstand Linie -> Inhalt betraegt in allen drei Rollpositionen 61.58px. Ihre Linie und der Abstand darunter sitzen auf der Ueberschrift, also AUSSERHALB des rollenden Kastens. Sie ist damit Vorbild und nicht ein zweiter Fall derselben Sache. DAS KAESTCHEN HAENGT AM SUCHFELD, DIE LINIE IST TROTZDEM NICHT DESSEN RAND -- und das ist der Unterschied, an dem eine naheliegende Fassung gescheitert waere. label.input traegt selbst ein border-bottom:1px solid transparent (die Regel weiter oben bei label.input), und dieses Band ist ZUSTANDSTRAGEND: bei 0 Treffern setzt functions.js .error auf genau dieses .input, und "label.input.missing, label.input.error { border-color:#BB1A3F; }" faerbte eine daran gehaengte Trennlinie ROT; unter dem Zeiger macht label.input:hover sie transparent und legt eine graue Flaeche darueber. Das Pseudoelement ist ein EIGENER Kasten mit einem eigenen Rahmen -- border-color am Label erbt sich nicht dorthin. GEMESSEN, alle drei Zustaende, an der Linie und am Feld daneben: in Ruhe Linie rgb(228,233,239) Feldrand rgba(0,0,0,0) Zeiger drauf Linie rgb(228,233,239) Feldrand rgba(0,0,0,0), Feld grau hinterlegt 0 Treffer Linie rgb(228,233,239) Feldrand rgb(187,26,63) -- das rote Signal bleibt Die graue Flaeche kann die Linie auch nicht verdecken: das Feld endet bei 132.27, die Linie liegt bei 152.98, und der Schatten der Hinterlegung hat 0 senkrechten Versatz und 0 Ausbreitung (gemessen "rgb(242,245,249) -10.01px 0px 0px 0px, rgb(242,245,249) 10.01px 0px 0px 0px"). pointer-events:none, wie bei .input.select:after weiter oben: eine gemalte Linie darf keinen Klick abfangen. DER ANKER KOSTET EINEN PIXEL, benannt statt verschwiegen: top:100% zaehlt vom Polsterrand-Kasten des Suchfelds, und der endet 1px ueber dessen Rahmenkante (eben wegen jenes durchsichtigen border-bottom). Der Abstand Suchfeld -> Linie ist deshalb gemessen 20.71px statt 21.71px. Der Abstand, um den es geht -- Linie -> Liste -- ist unveraendert 21.70px. S96 -- EINGERUECKT AUF DIE INHALTSFLUCHT, AUF AUSDRUECKLICHEN WUNSCH. Bis hierher trug das Kaestchen dieselben -0.77em wie .results, und die Linie stand auf deren HUELLE (-10.01 .. 1290.01) statt auf der Flucht des INHALTS (0 .. 1280), auf der die Linie der Bankauswahl steht -- s.o. Der Auftraggeber wollte ausdruecklich genau diese Kante. Das Kaestchen haengt an .search, und .search selbst steht schon auf 0 .. 1280 (dasselbe Element traegt keine eigene negative Randbreite) -- die Einrueckung ist deshalb links:0/rechts:0 statt der geerbten -0.77em, keine zweite Zahl. DIE ZEILENHINTERLEGUNG BLEIBT UNBERUEHRT, GEMESSEN STATT ANGENOMMEN: die -0.77em, die .results bis an den Rand ragen laesst (Regel weiter unten, .input.list .results), ist eine ANDERE Erklaerung an einem ANDEREN Element und stand hier nie zur Debatte. Gemessen vorher/nachher: .results unveraendert bei -10.01 .. 1290.01, nur die Linie steht jetzt bei 0 .. 1280 -- dieselbe Kante wie bei der Bankauswahl. WENN DER BROWSER DAS KAESTCHEN NICHT KENNT: dann faellt die LINIE weg, und sonst nichts. GEMESSEN auf einer Wegwerf-Kopie ohne diese Regel: der Abstand zwischen Suchfeld und Liste steht unveraendert (43.41px, denn er ist ein margin an der Liste und haengt nicht am Kaestchen), der Kasten misst 400, die Reservierung steht bei 400px, und der Filter arbeitet weiter (data-search-results "1" bei einem Treffer). Hoechstens eine Verbesserung entfaellt, nie eine Funktion. */ .input.list h2, .input.list.projects .search:after { border-top:1px solid #E4E9EF; } .input.list.projects .search:after { content:''; position:absolute; top:100%; left:0; right:0; margin-top:1.67em; pointer-events:none; } .input.list[data-search-results="0"] h2 { color:transparent; } .input.list .results { height:160px; overflow:auto; margin-left:-0.77em; margin-right:-0.77em; margin-bottom:1.67em; } /* S15/S51 (Aufgabennotizen) -- die Projektauswahl soll von Haus aus 2-3x so hoch sein wie eine gewoehnliche Liste. .results ist die GETEILTE Listenhuelle: das Bankenauswahl-Overlay (module/bank.overlay.php) benutzt sie genauso, und die Projektliste ist seinerzeit nach dessen Vorbild gebaut. Eine Regel auf .results selbst aenderte jede Liste im Haus. S15 hat dafuer die Formular-Id des einen Overlays genommen. Seit S51 gibt es die Auswahl an ZWEI Orten (Rechteverwaltung und Portfolio-Bericht) aus EINER Quelle -- includes/php/projectselect.inc.php --, und damit gibt es etwas Besseres als eine Formular-Id: die Klasse, die genau dieser Baustein setzt. Sie traegt die Regel an beide Orte, ohne sie einer dritten, fremden Liste zu geben. Eine zweite Id danebenzuschreiben waere die Regel an zwei Orten gewesen -- genau das, was S51 abschaffen soll. max-height statt height: bei WENIG Projekten (kein Scrollen noetig) bleibt die Liste so kurz wie ihr Inhalt. Gemessen im echten Browser (ws.browser, nicht Teil dieser Suite -- sie hat entschieden, bezeugt aber nicht hier), 500px hohes Fenster, 2 Projekte: mit einer FESTEN Hoehe von 400px stand der "Weiter"-Knopf bei y=710, ausserhalb des sichtbaren Bereichs; mit max-height stand dieselbe Liste nur 96px hoch (statt reservierter 400px) und der Knopf bei y=406, INNERHALB des 500px-Fensters. Bei VIELEN Projekten verhalten sich beide Formen gleich (beide deckeln bei 400px und scrollen) -- max-height ist also nie schlechter, oft besser. */ .input.list.projects .results { height:auto; max-height:400px; } /* Die gemessenen Zeilenhoehen, und warum sie hier stehen und nicht in PHP. S48 hat beim Filtern die Hoehe reserviert und dafuer eine feste Zahl genommen. Die durfte fest sein, weil das Suchfeld damals erst ab 13 Projekten kam: 13 Zeilen sind immer ueber dem Deckel. S51 stellt die Schwelle auf DREI -- damit faellt diese Voraussetzung, und die feste Zahl wird falsch. GEMESSEN (echter Browser, 3 Projekte mit Suchfeld, 1280x800): .results 400px, Tabelle darin 143.74px -- 256.26px leerer Kasten. Genau der wortlose Kasten, den S15 verhindern wollte. Reserviert wird deshalb, was die UNGEFILTERTE Liste wirklich braucht. Die Pixel dazu stehen HIER, drei Zeilen unter der Auffuellung und der Zeilenhoehe, aus denen sie folgen (.input.list .results tr td: padding 5px, line-height 1.46em) -- nicht in PHP, wo sie niemand faende, der genau diese Werte aendert. PHP liefert nur die ANZAHLEN (--list-rows/-sublines/-titles), und eine Anzahl kann nicht verrotten. GEMESSEN im echten Browser, je Zeilenart und an vier Grundschriften (13/16/20/26px), groesster Fehler 0.02px: Ueberschriftzeile 10px + 1.46em 28.98 / 33.36 / 39.20 / 47.96 Projektzeile 11px + 2.84em 47.91 / 56.42 / 67.80 / 84.83 Zuschlag Unterzeile 1.30em 16.90 / 20.80 / 26.00 / 33.80 WAS PASSIERT, WENN JEMAND DIE GRUNDSCHRIFT AENDERT: nichts Stilles. Die Gesetze stehen in em und px nebeneinander, weil die Zeile genau so gebaut ist -- die Auffuellung ist fest, der Rest waechst mit der Schrift. Deshalb sind sie an allen vier gemessenen Groessen richtig und nicht nur bei den 13px, die das Haus heute setzt (style.css:19). Genau daran ist die alte Konstante gestorben: $row_height=33 war die Hoehe einer UEBERSCHRIFTZEILE bei 16px Grundschrift (10 + 1.46*16 = 33.36) -- falsche Zeilenart, falsche Grundschrift, und beides unsichtbar, weil eine Zahl ohne ihre Herkunft danebenstand. min-height, nicht height: die Richtung des Irrtums ist damit gewaehlt. Reservierten wir zu VIEL, stuende wieder ein leerer Kasten da; reservieren wir zu WENIG, sinkt die Liste auf ihren Inhalt -- das Verhalten von vor S48, unschoen, aber nie ein wortloser Kasten. Der Deckel bleibt max-height:400px, und min() haelt die Reservierung darunter: ohne das gewaenne min-height gegen max-height (so die Kaskade) und eine lange Liste spraenge ueber ihren eigenen Deckel. Gebunden an das Suchfeld (.search + .results), nicht an die Klasse allein: OHNE Suchfeld wird nicht gefiltert, da kann nichts springen, und dort muss max-height weiter allein regieren -- sonst faellt S15 um (dort gemessen: 2 Projekte, 500px hohes Fenster, feste 400px schoben den Knopf auf y=710 aus dem Bild). WENN DER BROWSER DAS NICHT KENNT (Hausregel des Auftraggebers, 23.09.: ein fehlendes CSS-Mittel darf nie etwas kaputtmachen -- hoechstens eine Verbesserung entfaellt, niemals eine Funktion): **faellt die Reservierung weg und die Liste sinkt beim Filtern wieder auf ihren Inhalt -- das Springen von vor S48, unangenehm, aber nichts ist kaputt.** Das ist GEMESSEN, nicht ueberlegt (wir messen sonst immer im neuen Browser). Je Mittel einzeln, indem an seiner Stelle ein Funktionsname stand, den der Browser wirklich nicht kennt -- das ist derselbe Fehlerpfad, den er bei einem kuenftig unbekannten min()/var() nimmt. 3 Projekte, 1280x800: min() unbekannt min-height faellt auf 0 -> .results 194.44 / 64.81 / 26.90 (ungefiltert / 1 Treffer / var() unbekannt 0 Treffer), Knopf wandert 167.54px. Filter, data-search-results UND der Satz fuer den Zaehlungen fehlen leeren Fall arbeiten unveraendert weiter; kein leerer Kasten, nichts faellt zusammen, nichts laeuft ueber. Bei 13 Projekten deckelt und rollt die Liste weiterhin bei 400px. Gesund zum Vergleich: 194.45 in allen drei Zustaenden, Knopf unbewegt. Der dritte Fall ist kein hypothetischer: wer die Auswahl ohne die Zaehlungen rendert, landet ueber die Ersatzwerte var(--list-rows,0) im selben, harmlosen Zustand. Warum das sicher ist, und das ist die Regel dahinter: die neuen Mittel stehen ausschliesslich in ERKLAERUNGEN (min-height, und die --list-*-Eigenschaften), nie in einem SELEKTOR. Ein unbekanntes Mittel in einer Erklaerung laesst nur diese Erklaerung wegfallen; im Selektor macht es die GANZE Regel ungueltig. S55 hat genau das gemessen: eine unbekannte Pseudoklasse in einem Hover-Selektor nahm JEDER Tabellenzeile im Haus den Hover. Die einfache Erklaerung steht deshalb auch in einer EIGENEN Regel (height:auto; max-height:400px, oben) -- faellt die bessere weg, bleibt sie stehen, und sie ist fuer sich benutzbar: die Liste deckelt und rollt, nur reserviert sie nichts mehr. ERSTE IHRER ART IM HAUS: das hier sind die ersten CSS-Variablen und das erste min() (calc() gab es schon viermal). Wer das nachahmt, nehme bitte den GRUND mit, nicht nur die Form: gerechnet wird in CSS, weil die Zahlen aus der Zellenauffuellung, der Zeilenhoehe und der Grundschrift folgen -- also aus Dingen, die hier stehen. Dieselbe Rechnung in PHP kennt die Grundschrift nicht, und genau daran ist die Vorgaengerkonstante gestorben ($row_height=33). Die Anzahlen kommen aus PHP, weil PHP sie WEISS. */ .input.list.projects { --list-row-height:calc(11px + 2.84em); --list-row-subline:1.3em; --list-row-title:calc(10px + 1.46em); } .input.list.projects .search + .results { min-height:min(400px,calc(var(--list-rows,0) * var(--list-row-height) + var(--list-sublines,0) * var(--list-row-subline) + var(--list-titles,0) * var(--list-row-title))); } /* DER ABSTAND UM DIE LINIE -- UND WARUM ER DIE RESERVIERUNG DARUEBER NICHT VERSTELLT (S68, Masse S80). Der Auftraggeber zu S68: "sollte nach unten auch einen margin haben (wie die linie unten) und generell weniger margins haben. mach es genau wie im bank auswahl overlay linie oben und unten." DIE BANKAUSWAHL GEMESSEN, BEIDE LINIEN, statt sie anzusehen (1280x800, Grundschrift 13px): Suchfeld -> obere Linie 27.63px (h2 margin-top:2.31em, bei 0.92em Schrift) obere Linie -> Liste 62.59px (padding 2.31em + Ueberschriftzeile + padding 1.67em) Liste -> untere Linie 21.70px (.results margin-bottom:1.67em) untere Linie -> naechstes Element 30.03px (.input.list margin-bottom:2.31em) Daraus die Zahl, die eine Linie im Haus von einer Liste trennt: **1.67em**. Sie steht an beiden Stellen, an denen eine Linie eine LISTE beruehrt -- unter der Ueberschrift der Bankauswahl (padding-bottom:1.67em) und ueber deren unterer Linie (.results margin-bottom:1.67em). Die 2.31em dagegen trennen die Linie von etwas, das KEINE Liste ist (dem Suchfeld oben, dem naechsten Feld unten). HIER also 1.67em auf BEIDEN Seiten der oberen Linie. Gemessen: 20.71px darueber (der Anker kostet einen Pixel, siehe oben beim Kaestchen), 21.70px darunter -- und darunter im Wortsinn dieselbe Zahl wie die 21.71px, die die Liste von der unteren Linie trennen. Die Liste steht damit zwischen ihren zwei Linien mittig, auf 0.01px genau, und das ist es, was "linie oben und unten wie bei der bankauswahl" messbar heisst. BEIDE ABSTAENDE SIND MARGINS UND LIEGEN AUSSERHALB DES ROLLENDEN KASTENS (S83). Der untere war es immer (.results margin-bottom), der obere ist es seit S83: er steckt in margin-top:3.34em an der Liste -- 1.67em davon ueber der Linie, 1.67em darunter, die Linie selbst haengt als Kaestchen am Suchfeld davor und nimmt keinen Platz. Deshalb bleibt der Abstand in JEDER Rollposition stehen. ANGENOMMENE ABWEICHUNG, benannt: ueber der Linie nimmt die Bankauswahl 2.31em, hier stehen 1.67em. Das ist "generell weniger margins" -- die beiden Saetze des Auftraggebers ziehen dort gegeneinander, denn die Bankauswahl misst zwischen Suchfeld und Liste insgesamt 91.22px, also MEHR als die 61.05px, die vor S80 hier standen. Seit S83 sind es gemessen 43.41px (20.71 + Linie + 21.70). Wer die 2.31em ueber der Linie zurueckhaben will, aendert eine Zahl. Der Auftraggeber hat sich die beiden Faelle als Bild zeigen lassen und 1.67em gewaehlt. WARUM DER ABSTAND UNTER DER LINIE NICHT IN DEN KASTEN DARF -- zweimal rot belegt, und beim zweiten Mal war es die Fassung, die S80 ausgeliefert hat. Alles, was unter dem oberen Rand des rollenden Kastens Platz schafft, liegt IN ihm: es rollt mit hinaus (das war S83s Befund), und wenn es zusaetzlich in den Inhaltsfluss faellt, zaehlt es nicht in die Reservierung und der Dialog springt. ROT BELEGT auf einer Wegwerf-Kopie (margin-top an der Tabelle statt padding am Kasten): 3 Projekte, ungefiltert Knopf 423.84, gefiltert 402.16 -- **Sprung 21.68px** (Portfolio-Bericht 392.65 -> 370.96, 21.69px). Bei 13 Projekten springt es nicht, weil der Deckel greift; der Fehler zeigte sich also ausgerechnet nur im kleinen Fall. Der Ausweg ist keiner INNERHALB des Kastens, sondern das Kaestchen DAVOR: die Linie nimmt keinen Platz, und beide Abstaende sind margins. Die Bankauswahl macht es genauso -- dort traegt die Ueberschrift die Linie und den Abstand darunter, beides ausserhalb des rollenden Kastens. DIE AUFLAGE, UM DIE ES HIER WIRKLICH GEHT. Darueber reserviert min-height die Hoehe der UNGEFILTERTEN Liste, damit beim Filtern nichts springt (S48/S51). Abstand und Linie sitzen deshalb ABSICHTLICH AUSSERHALB dieses reservierten Kastens -- seit S83 sogar vollstaendig: der Kasten traegt weder border-top noch padding-top mehr (gemessen: beide 0px), nur noch margin-top, und ein margin geht in min-height/max-height grundsaetzlich nicht ein. Die Reservierung bleibt damit Wort fuer Wort dieselbe Rechnung, und sie stimmt weiter auf die Zeilen. Neu geprueft und nicht uebernommen: min-height gemessen 194.46 / 143.76 / 400px wie vorher, der Kasten misst jetzt genau das (194.45 / 143.76 / 400), weil Rahmen und Auffuellung fehlen. GEMESSEN, vorher und nachher, in denselben drei Zustaenden (ungefiltert / 1 Treffer / 0 Treffer) und an BEIDEN Orten (Rechte-Overlay und Portfolio-Bericht), 1280x800, echtes functions.js. "vorher" ist dabei S68s Stand (2.31em/2.31em), "nachher" dieser (1.67em/1.67em) -- beide aus DERSELBEN eingefrorenen Fassung des Stilblatts gebaut, damit zwischen den zwei Messungen wirklich nur diese Regel steht: Rechte-Overlay, 3 Projekte mit Unterzeile .results 225.48 -> 217.16 (= 1 + 21.71 + 194.45) Knopf 440.50 -> 423.86, in allen drei Zustaenden gleich Portfolio-Bericht, 3 Projekte ohne Unterzeile .results 174.78 -> 166.46, Knopf 409.30 -> 392.66 13 Projekte (am Deckel) .results 431.02 -> 422.70, Knopf 646.05 -> 629.41 Der Knopf rueckt an allen drei Stellen um exakt 16.64px hoch = 8.32 oben + 8.32 unten, und er steht in jedem der drei Zustaende still. Der Inhalt ist unveraendert: die Tabelle misst 194.44 bzw. 143.74. S83 DARAUF, dieselben drei Zustaende, dieselben zwei Orte, neu gemessen statt uebernommen: Rechte-Overlay, 3 Projekte Kasten 217.16 -> 194.45, Knopf 423.86 -> 422.87 Portfolio-Bericht, 3 Projekte Kasten 166.46 -> 143.76, Knopf 392.66 -> 391.67 13 Projekte (am Deckel) Kasten 422.70 -> 400.00, Knopf 629.41 -> 628.41 Der Kasten verliert genau Rahmen und Auffuellung (22.71px), die als margin vor ihm wieder auftauchen; der Knopf steht 0.99px hoeher (der eine Pixel des Ankers) und in jedem der drei Zustaende still. UND SO SAEHE DER IRRTUM AUS, den das vermeidet -- zweimal rot belegt auf WEGWERF-KOPIEN: box-sizing:border-box (Abstand und Linie IM reservierten Kasten), S68s Masse: 3 Projekte, ungefiltert 225.46, gefiltert 194.45 -- Knopf springt um 31.00px (Portfolio-Bericht 31.01px) margin-top an der Tabelle statt padding am Kasten, S80s Masse: ungefiltert 423.84, gefiltert 402.16 -- Knopf springt um 21.68px (Portfolio-Bericht 21.69px) Beide Male genau das Springen, das S48 beseitigt hat, und beide Male ist der Sprung so gross wie der Abstand, den jemand in den Kasten gelegt hat. Wer den Abstand IN den Kasten legt (eine Leerzeile, ein Trennelement in der Tabelle, ein margin daran, ein border-box), muss ihn in die Rechnung oben aufnehmen. Wer ihn wie hier daneben legt, nicht. AM SUCHFELD AUFGEHAENGT, NICHT AN DER KLASSE -- aus demselben Grund wie die Reservierung darueber: unter der Schwelle von drei Projekten gibt es kein Suchfeld, also auch nichts zu trennen. Gemessen, 2 Projekte, beide Orte: computed border-top "0px none", padding-top 0px, margin-top 0px, und die Geometrie ist Pixel fuer Pixel die von vorher (Rechte-Overlay .results 129.63, Knopf 276.71; Portfolio-Bericht 95.83, Knopf 262.41). S15s Boden bleibt damit unberuehrt. DER LEERE FALL. Eine Trennlinie ueber dem Nichts saehe aus wie ein Fehler -- steht aber keine da: der Satz fuer "kein Treffer" (p.noresults) liegt INNERHALB von .results, also unter der Linie im reservierten Kasten. Gemessen bei 0 Treffern: der Satz steht 21.70px unter der Linie, also genau so weit wie sonst die erste Projektzeile. Darueber faerbt functions.js das Suchfeld rot (.error); dieselbe Paarung aus roter Feldlinie und grauer Trennlinie zeigt die Bankauswahl bei 0 Treffern auch. BEIM ROLLEN (S83): der Abstand bleibt jetzt in jeder Rollposition stehen, weil er kein padding im Kasten mehr ist, sondern ein margin davor. Gemessen an BEIDEN Orten, 100 Projekte, Abstand Linie -> oberster sichtbarer Inhalt bei scrollTop 0 / Mitte / Anschlag: 21.70 / 21.70 / 21.70 -- vorher 21.70 / 0.00 / 0.00. Der Inhalt wird an der Kastenkante geschnitten, genau wie unten, und genau so weit von der Linie entfernt wie unten von ihrer (21.70). WENN DER BROWSER DAS NICHT KENNT: hier steht nur noch margin-top, und das ist so alt wie CSS -- kein var(), kein min(), kein calc(). Faellt es doch weg, ruecken Linie und Liste zusammen; die Liste, der Filter, der Satz fuer den leeren Fall und die Reservierung darueber arbeiten unveraendert weiter, weil keiner von ihnen darauf zugreift. Was passiert, wenn der Browser das KAESTCHEN mit der Linie nicht kennt, steht oben bei dessen Regel -- gemessen: die Linie entfaellt, der Abstand bleibt. */ .input.list.projects .search + .results { margin-top:3.34em; } /* Der leere Fall, der aus der reservierten Hoehe erst folgt: ohne Treffer bliebe ein 400px hoher, wortloser Kasten stehen -- schlimmer als der Sprung, den er ersetzt. Sichtbar allein ueber [data-search-results="0"], dasselbe Attribut, das functions.js ohnehin auf .input.list setzt und auf das die h2-Regel vier Zeilen weiter oben schon steht -- kein zweiter Zaehler und kein eigenes JS. Anders als die Hoehenregeln darf das allgemein auf .input.list stehen: es greift nur, wo es ein p.noresults GIBT, und das gibt es bisher in genau einer Liste. Die Zellenauffuellung ist die der Tabellenzeilen darueber (5px 0.77em), damit der Satz auf der Flucht der Projektnamen steht. */ .input.list .results > p.noresults { display:none; margin:0; padding:5px 0.77em; } .input.list[data-search-results="0"] .results > p.noresults { display:block; } .input.list .results table { width:100%; } .input.list .results tr td, .input.list .results tr th { padding:5px 0.77em; font-size:1em; color:#6C7382; line-height:1.46em; } .input.list .results tr td + td, .input.list .results tr th + th { padding-left:0; } .input.list .results tr td small, .input.list .results tr th small { font-size:inherit; color:#97A3B5; line-height:inherit; } .input.list .results tr td img:first-child, .input.list .results tr th img:first-child, .input.list .results tr td input[type=hidden]:first-child + img, .input.list .results tr th input[type=hidden]:first-child + img { margin-top:0.02em; } .input.list .results tr.title td, .input.list .results tr.title th { font-weight:bold; } /* Ein