@import url('fonts/Montserrat.css'); @import url('fonts/Open_Sans.css'); @import url('fonts/IBM_Plex_Mono.css'); :root { /* Colors from the Brand Guidelines palette */ --asf-color-navy: #28265E; /* Navy */ --asf-color-purple: #7C297D; /* Purple */ --asf-color-red: #D22128; /* Red */ --asf-color-orange: #DD552C; /* Orange */ --asf-color-yellow: #F79A23; /* Yellow */ --asf-color-lightblue: #DCE8F2; /* Light Blue */ --asf-color-white: #FFFFFF; /* White */ --asf-color-black: #000000; /* Black */ /* Colors */ --apr-bg: var(--asf-color-white); --apr-fg: var(--asf-color-black); --apr-fg-a: var(--asf-color-navy); --apr-bg-h1: var(--asf-color-purple);; --apr-fg-h1: var(--asf-color-white); --apr-bg-h2: var(--asf-color-lightblue); --apr-fg-h2: var(--apr-fg); --apr-bg-logo: var(--asf-color-navy); --apr-fg-border: var(--asf-color-navy); /* Dimensions */ --apr-site-nav-width: 15em; --apr-content-left: calc(var(--apr-site-nav-width) + 0.1em); --apr-logo-height: 6em; --apr-logo-space: 1em; --apr-logo-left: calc(var(--apr-content-left) - 1 * var(--apr-logo-height)); --apr-logo-bar-height: calc(0.382 * var(--apr-logo-height)); --apr-logo-bar-shift: calc(0.618 * var(--apr-logo-height)); --apr-font-weight: 400; --apr-h1-font-weight: 700; --apr-h2-font-weight: 300; --apr-code-font-weight: 600; /* Global */ background: var(--apr-bg); color: var(--apr-fg); font-family: "Open Sans", sans-serif; font-size: medium; font-style: normal; font-weight: var(--apr-font-weight); font-variation-settings: "wdth" 100; } b, strong { font-weight: var(--apr-h1-font-weight); } pre, code, tt { font-family: "IBM Plex Mono", monospace; font-size: 95%; } code b, code strong, tt b, tt strong { font-weight: var(--apr-code-font-weight); } a { color: var(--apr-fg-a); } p.note { border-style: double; border-color: var(--apr-fg-border); padding: 0.5em; } table, th, td { border: 1px solid var(--apr-fg-border); } table { width: 100%; border-collapse: collapse; } th { background: var(--apr-bg-h2); color: var(--apr-fg-h2); padding: 0.25em; padding-left: 0.5em; font-family: "Montserrat", sans-serif; font-weight: var(--apr-h2-font-weight); text-align: left; } td { padding: 0.25em 0.25em 0.25em 0.5em; } td.yesno { border-right: none; } td.semver { border-left: none; } td > ul { margin-block-start: 0px; margin-block-end: 0px; } td.mlh { width: 50% } .covError > td { background: #ffffff; } .covLT33 > td { background: #ffaaaa; } .covLT66 > td { background: #ffff77; } .covGE66 > td { background: #aaffaa; } #logo { height: var(--apr-logo-height); width: 100%; margin-top: var(--apr-logo-space); margin-bottom: var(--apr-logo-space); } #logo > a { position: relative; left: var(--apr-logo-left); top: calc(-1 * var(--apr-logo-bar-height)); } #logo > a > img { height: 100%; width: auto; } #logo > div { background: var(--apr-bg-logo); position: relative; top: var(--apr-logo-bar-shift); height: var(--apr-logo-bar-height); width: 100%; display: flex; justify-content: left; align-items: center; } #page { overflow: auto; } #site-nav { float: left; width: var(--apr-site-nav-width); } #site-content { margin-left: var(--apr-content-left); } #footer { text-align: center; font-size: small; } h1 { background: var(--apr-bg-h1); color: var(--apr-fg-h1); font-weight: var(--apr-h1-font-weight); } h2 { background: var(--apr-bg-h2); color: var(--apr-fg-h2); font-weight: var(--apr-h2-font-weight); } h1, h2 { font-family: "Montserrat", sans-serif; font-size: medium; padding: 0.25em 0.25em 0.25em 0.5em; margin-block-start: 0.67em; margin-block-end: 0.67em; } #site-nav-menu > dl, #site-nav-menu > dl > dd { margin: 0px; } #site-nav-menu > dl > dt { font-family: "Montserrat", sans-serif; font-size: medium; font-weight: var(--apr-h1-font-weight); margin-block-start: 0.67em; margin-block-end: 0.67em; padding-top: 0.25em; } label[for="hamburger"] { color: var(--apr-bg); font-family: "Montserrat", sans-serif; font-size: large; font-weight: var(--apr-h2-font-weight); padding: 0px 0.25em 0px 0.25em; cursor: pointer; /* FIXME: This is a visual hint, but do we really need it? The catch is that there are two link anchors side by side on narrow screens. */ border-right: 1px dotted var(--apr-bg); } #hamburger { display: none; } @media screen { label[for="hamburger"] { display: none; } } @media screen and (max-width: 815px) { :root { --apr-logo-height: 4em; --apr-logo-space: 0.67em; } #site-nav { width: 100%; float: none; } label[for="hamburger"] { display: inline-block; } #site-nav-menu { display: none } #site-nav input:checked + #site-nav-menu { display: block; } #site-content { margin-left: 0px; } #logo > a { left: var(--apr-logo-bar-height); } blockquote, dd { margin-inline-start: 1em; margin-inline-end: 0px; } } /** ** (Emacs) ** Local Variables: ** mode: css ** css-indent-offset: 2 ** End: **/