/* The one site-wide navigation, shared by all 691 pages. One file rather than a copy in each of the five stylesheets: those are already duplicated 22 times between them, and a sixth thing to keep in step by hand is how a site drifts. It is linked LAST on every page, which is what lets it override the section stylesheets' own
chrome below. */ /* ---- reset what the page's own stylesheet does to
---------------- Four of the five stylesheets style every
on the page: a border, a background, indented children, and a rotating "▸" drawn with ::before. Those are right for a collapsible proof and wrong for a menu, and without this the nav rendered 133px taller on the 240 pages that carry those rules -- with two arrows on every item, one of them pointing the wrong way. */ .sitenav details.sitenav-menu, .sitenav details.sitenav-menu[open] { border: none; background: none; margin: 0; padding: 0; border-radius: 0; box-shadow: none; /* overflow:hidden is what rounds the corners of a collapsible proof, and it clipped this menu's panel to the height of its own summary: the panel had the right geometry, was visible and painted -- and 40px of it showed. */ overflow: visible; } .sitenav details.sitenav-menu > summary, .sitenav details.sitenav-menu[open] > summary { border: none; background: none; margin: 0; border-radius: 0; font-size: 15px; /* The subject sheets set summary to 600 weight with extra letter-spacing, which is right for a collapsible proof heading. Here it made each item ~10px wider and pushed the phone bar from two rows to three -- and their summary colour is the same #0f4c81 as this bar, so on 240 pages all four menu labels were painted dark blue on dark blue and simply could not be seen. They were in the layout and in the accessibility tree; only the screenshot showed it. */ color: #fff; font-weight: 400; letter-spacing: normal; text-transform: none; } .sitenav details.sitenav-menu > summary::before { content: none; } .sitenav details.sitenav-menu > *:not(summary) { margin-left: 0; margin-right: 0; } .nav-skip { position: absolute; left: -9999px; top: 0; z-index: 200; background: #0f4c81; color: #fff; padding: 10px 16px; font: 600 15px/1.2 "Segoe UI", "Helvetica Neue", Arial, sans-serif; border-radius: 0 0 6px 0; text-decoration: none; } .nav-skip:focus { left: 0; } .sitenav { background: #0f4c81; color: #fff; font: 15px/1.4 "Segoe UI", "Helvetica Neue", Arial, sans-serif; position: relative; z-index: 100; } .sitenav-in { max-width: 1180px; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; flex-wrap: wrap; } .sitenav a { color: #fff; text-decoration: none; } .sitenav-brand { font-weight: 700; letter-spacing: .04em; padding: 12px 14px 12px 0; white-space: nowrap; } .sitenav-brand:hover, .sitenav-plain:hover { text-decoration: underline; } .sitenav-plain { padding: 12px 10px; white-space: nowrap; } /* Click, not hover: this has to work on the phones most of these readers use, and a hover menu has no touch equivalent.
gives that with no JavaScript, which is also what keeps the menu working when a script fails. */ .sitenav details.sitenav-menu { position: relative; } .sitenav details.sitenav-menu > summary { list-style: none; cursor: pointer; padding: 12px 10px; white-space: nowrap; user-select: none; display: block; } .sitenav details.sitenav-menu > summary::-webkit-details-marker { display: none; } .sitenav details.sitenav-menu > summary::after { content: " \25BE"; opacity: .75; } .sitenav details.sitenav-menu > summary:hover { background: rgba(255, 255, 255, .14); } .sitenav details.sitenav-menu[open] > summary { background: rgba(255, 255, 255, .22); } .sitenav details.sitenav-menu > summary:focus-visible, .sitenav a:focus-visible { outline: 2px solid #ffd166; outline-offset: -2px; } .sitenav .sitenav-panel { position: absolute; left: 0; top: 100%; min-width: 280px; max-width: 92vw; max-height: min(70vh, 560px); overflow-y: auto; background: #fff; color: #10233a; border: 1px solid #c8d6e5; border-radius: 0 0 8px 8px; box-shadow: 0 10px 28px rgba(0, 0, 0, .18); padding: 8px 0; text-align: left; } .sitenav .sitenav-panel a { display: block; color: #10233a; padding: 7px 16px; font-size: 14.5px; line-height: 1.35; } .sitenav .sitenav-panel a:hover { background: #eaf1f8; } .sitenav .sitenav-panel a[aria-current="page"] { background: #eaf1f8; font-weight: 700; } .sitenav .sitenav-panel a[aria-current="page"]::after { content: " \2014 you are here"; font-weight: 400; opacity: .7; } .sitenav .sitenav-all { font-weight: 700; border-bottom: 1px solid #e3ebf3; margin-bottom: 4px; padding-bottom: 9px; } .sitenav .sitenav-group { margin: 10px 0 2px; padding: 0 16px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #5b7794; } /* On a phone the bar stays a compact two rows and the OPEN panel spans the whole width, laid over the page rather than pushing it down. An earlier version gave each menu its own full-width row, which made the bar 268px tall on a 400px screen -- twice the sticky row it replaced, which is not a fix. */ @media (max-width: 720px) { .sitenav-in { padding: 0 12px; } .sitenav-brand { padding: 10px 12px 10px 0; font-size: 14.5px; } .sitenav-plain { padding: 10px 8px; font-size: 14px; } .sitenav details.sitenav-menu { position: static; } .sitenav details.sitenav-menu > summary { padding: 10px 8px; font-size: 14px; } .sitenav .sitenav-panel { left: 0; right: 0; min-width: 0; max-width: none; max-height: 62vh; border-radius: 0 0 8px 8px; } .sitenav .sitenav-panel a { padding: 9px 14px; } /* a touch target, not a line of text */ .sitenav .sitenav-group { padding: 0 14px; } } /* ---- search in the bar ----------------------------------------------------- The same box and script as the home page's, restyled for a panel. These rules are scoped to .sitenav because the section sheets know nothing about the box, and the home sheet's versions must not leak onto it. */ .sitenav-icon { vertical-align: -3px; margin-right: 6px; } .sitenav details.sitenav-search { margin-left: auto; } /* last item, pushed right */ .sitenav .sitenav-search .sitenav-panel { left: auto; right: 0; width: 400px; padding: 12px; } .sitenav .sr-head { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .sitenav .search { position: relative; margin: 0 0 8px; } .sitenav .search input { width: 100%; box-sizing: border-box; font: inherit; font-size: 15px; padding: 10px 12px; border: 1px solid #b9cadb; border-radius: 8px; color: #10233a; background: #fff; max-width: none; } .sitenav .search input:focus { outline: 2px solid #1565a8; outline-offset: 1px; border-color: #1565a8; } .sitenav .results { list-style: none; margin: 8px 0 0; padding: 0; max-height: 46vh; overflow-y: auto; border-top: 1px solid #e3ebf3; } .sitenav .results li { margin: 0; max-width: none; } .sitenav .sitenav-panel .results a { padding: 8px 6px; border-bottom: 1px solid #eef3f8; } .sitenav .results li[aria-selected="true"] a { background: #eaf1f8; } .sitenav .results .rt { display: block; font-weight: 600; color: #0f4c81; } .sitenav .results .rs { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #5b7794; margin-right: 8px; } .sitenav .results .rw { font-size: 13px; color: #46566f; } .sitenav .results .none { padding: 10px 6px; color: #46566f; font-size: 14px; } .sitenav .results .none a { display: inline; padding: 0; color: #1565a8; text-decoration: underline; } .sitenav .sitenav-panel a.sitenav-az { padding: 8px 6px 2px; font-weight: 600; color: #1565a8; } /* site-base.css underlines links in running text, and a result is an in an
  • ; this undoes it at matching strength. */ .sitenav .results li > a { text-decoration: none; } .sitenav .results li > a:hover .rt { text-decoration: underline; } .sitenav details.sitenav-search > summary::after { content: none; } /* On a phone the search is an icon in the FIRST row. As a labelled item it wrapped to a third row and the bar went from 80px to 119px, which is the ~120px of screen the old sticky UGC NET row was removed for taking. */ @media (max-width: 720px) { .sitenav-in > * { order: 2; } .sitenav-in > .sitenav-brand, .sitenav-in > details.sitenav-menu:nth-of-type(1), .sitenav-in > details.sitenav-menu:nth-of-type(2), .sitenav-in > details.sitenav-search { order: 1; } .sitenav details.sitenav-search { margin-left: auto; } .sitenav .sitenav-search > summary span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .sitenav-icon { margin-right: 0; } .sitenav .sitenav-search .sitenav-panel { left: 0; right: 0; width: auto; } } /* Between a phone and a wide screen the labelled search item was the one that wrapped the bar to a second row; the icon alone keeps it at one. */ @media (min-width: 721px) and (max-width: 960px) { .sitenav .sitenav-search > summary span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .sitenav-icon { margin-right: 0; } } @media (min-width: 721px) and (max-width: 820px) { .sitenav-brand { padding-right: 8px; } .sitenav details.sitenav-menu > summary, .sitenav-plain { padding-left: 6px; padding-right: 6px; } } /* Down to 360px -- the width of the most common small Android phones -- the bar must still be two rows. At 400px it fits with room to spare; at 360 the second row was 365px of items in 336px of space, and wrapped. */ @media (max-width: 400px) { .sitenav-in { padding: 0 10px; } .sitenav-brand { padding-right: 8px; font-size: 14px; } .sitenav details.sitenav-menu > summary, .sitenav-plain { padding: 10px 5px; font-size: 13.5px; } } /* ---- the site footer ------------------------------------------------------ One footer on every page. A page's own