/*** **** Style sheet for the case index pages (cases/index[_by-property].html). **** **** All these pages have . ***/ body.caseIndex { font: 14px Verdana, Arial, Helvetica, Geneva, sans-serif; } .caseIndex a { text-decoration: none; color: inherit; } .caseIndex p { font-size: 125%; margin: 0 2%; } /* The page navigation section contains a list of links to subsections in the case index table. */ .caseIndex nav.page { margin: 0.25em 0 0 2%; } .caseIndex nav.page p { display: inline; margin: 0; } .caseIndex nav.page ul { display: inline; padding: 0; margin: 0; } .caseIndex nav.page li { display: inline; list-style-type: none; font-weight: bold; margin: 0 0.1em; } .caseIndex nav.page a:hover, .caseIndex nav.page a:active { background: #ccd; } /* The cases navigation section contains a table representing the case index. Each data row represents a case. Columns represent case properties. The table is sorted by the property in the first column (the “key” property). */ .caseIndex nav.cases table { padding: 0; margin: 1em 2%; border-collapse: separate; border-spacing: 0 1px; font-size: 10px; } /* There are vertical rules between the columns, but not at the sides of the table. */ .caseIndex nav.cases th, .caseIndex nav.cases td { border-left : 0.5px solid #bbb; border-right: 0.5px solid #bbb; } .caseIndex nav.cases th:first-child, .caseIndex nav.cases td:first-child { border-left: none; } .caseIndex nav.cases th:last-child, .caseIndex nav.cases td:last-child { border-right: none; } .caseIndex nav.cases col#id { width: 6em; } /* The table has a header with a single row containing the property labels. */ .caseIndex nav.cases thead th { padding: 3px 0; text-align: center; vertical-align: middle; font-size: 110%; font-weight: bold; background: black; color: white; } @media (prefers-color-scheme: dark) { .caseIndex nav.cases thead th { background: #32324D; } } /* The table header row is pinned to the top of the table as the table is scrolled. */ .caseIndex nav.cases table { position: relative; } .caseIndex nav.cases thead th { position: sticky; top: 0; } /* The header labels are links to alternative case index pages sorted by different properties. */ .caseIndex nav.cases thead a:link, .caseIndex nav.cases thead a:visited { color: white; background: inherit; } .caseIndex nav.cases thead a:hover, .caseIndex nav.cases thead a:active { color: red; background: inherit; } /* The table is divided into tbody sections for ranges of key values. Each tbody has a single-column header row showing the appropriate key prefix. */ .caseIndex nav.cases thead + tbody tr:first-child th { border-top: 2px solid white; } .caseIndex nav.cases tbody tr:first-child th { padding: 3px 0; margin: 0; font-size: 110%; font-weight: bold; text-align: center; background: #444; color: white; } @media (prefers-color-scheme: dark) { .caseIndex nav.cases tbody tr:first-child th { background: #434364; } } .caseIndex nav.cases td { padding: 0; margin: 0; vertical-align: text-top; text-align: left; } /* Data rows are alternating white and gray.*/ .caseIndex nav.cases tr:nth-child(even) td { background: inherit; } .caseIndex nav.cases tr:nth-child(odd) td { background: #d8d8d8; } @media (prefers-color-scheme: dark) { .caseIndex nav.cases tr:nth-child(odd) td { background: #41424C; } } /* All data cells are links to the case page for the case described by the row. */ .caseIndex nav.cases a { display: block; padding: 3px 0.35em; } .caseIndex nav.cases td a:hover, .caseIndex nav.cases td a:active { color: inherit; background-color: #e4e4ff; } @media (prefers-color-scheme: dark) { .caseIndex nav.cases td a:hover, .caseIndex nav.cases td a:active { color: #99A8F4; background-color: inherit; } }