main { display: block; } .nav-container { } .nav { overflow: inherit; } .nav__item a { display: inline-block; white-space: inherit; } .nav__item a svg { vertical-align: middle; height: 1em; } .nav__item a + button { margin-left: -0.75em; margin-right: 1em; ; } .main-content { -ms-grid-column: 2; -ms-grid-column-span: 6; grid-column: 2/span 6; -ms-grid-row: 2; -ms-grid-row-span: 2; grid-row-start: 2; } .sidebar ul { padding: 0; } .sidebar dd { margin-left: 0 !important; } h1 { padding-top: 33px; } h1 span { display: block; font-size: .5em; margin-bottom: 0.25em; } h2 { position: relative; } h2 .permalink { position: absolute; left: -1em; } h2 .permalink a { color: var(--grey); text-decoration: none; } h2 .fragmentlink { margin-left: -1em; position: relative; float: left; } h2 .fragmentlink svg { visibility: hidden; } h2:hover .fragmentlink svg { visibility: visible; } #success-criterion h2, #guideline h2, #technique h2 { margin: 0; } .navtoc ul { margin: 0.5em 0; } dt div { font-weight: normal; } .toc-wcag-docs { padding-left: 1em; } .main-content > .toc-understanding-guideline > li > a { font-weight: bold; margin-top: 2em; margin-bottom: -.5em; display: block; text-decoration: none; } .scquote { margin: 0; border: 1px solid var(--line-grey); padding: 1em; font-style: normal; } .scquote > :first-child { margin-top: 0; padding-top: 0; } /* two styles of notes: * inside a success criterion box, it looks the same as notes in the normative spec * otherwise, the style is similar, but much more subdued colour-wise */ .note { padding: .5em 1em; border: 1px solid; border-left: .5em solid; page-break-inside: avoid; margin: 1em auto; border-color: #72afd7; border-color: var(--w3c-powder-blue); background: #f2f2f2; background-color: var(--off-white); color: black; overflow: auto; } .note::before, .note > .marker { /* similar colours to the SC box itself */ text-transform: uppercase; padding-right: 1em; color: #005a6a; color: var(--wai-green); } #success-criterion .note { /* same as the normative specification */ border-color: #52e052; background: #e9fbe9; } #success-criterion .note::before, #success-criterion .note > .marker { color: hsl(120, 70%, 22%); } :is(aside, div).example .example-title { font-weight: bold; margin: 0; } :is(aside, div).example { padding: 1em 1em 0.5em 1em; margin-bottom: 1em; border-left-width: .5em; border-left-style: solid; border-color: #e0cb52; background: #fcfaee } .obsolete { border-left: solid 5px var(--faded-red); } .obsolete-message { background-color: var(--red-subtle); border-color: var(--faded-red); } .obsolete-message h2 { color: #fff; background-color: var(--faded-red); margin: 0; } /* import inline styles from https://www.w3.org/WAI/drafts/WCAG-understanding-redesign-hack.html */ .nav a:link { text-decoration: none; } #site-header.minimal-header.with-subtitle { padding: 1.75em 0 0 0; } .nav-container { margin-bottom: 0; } .nav { background: none; } .nav-related-info { /* blue bar with the "About:" links */ background: #005a9c; color: #fff; } .nav-related-info a { color: #fff !important; } .nav-page-specific { /* light blue bar with page/section specific navigation/pager */ margin-bottom: 1.25em; } .nav a:link, .nav a:visited { color: #036; color: var(--w3c-blue); } .nav a:hover, .nav a:active { color: var(--dk-blue); } .nav-hack.sidebar a:hover, .nav-hack.sidebar a:active { color: var(--dk-blue); text-decoration: underline; } .standalone-resource-about, .standalone-resource-pager { margin: 0; } nav.standalone-resource-about { padding: .5em 0 1.5em 0; font-style: italic; } .standalone-resource-about dl, .standalone-resource-about dt, .standalone-resource-about dd { display: inline; margin: 0; padding: 0; } .standalone-resource-about dt{ font-weight: normal; } .standalone-resource-about dl a { margin: 0; padding: 0 1em 0 1em; } .standalone-resource-about dd { border-right: 1px var(--gold) solid; } .standalone-resource-about dd:last-of-type { border-right: 0; } .standalone-resource-about dd svg { margin-left: 0.25rem; vertical-align: middle; } .nav .standalone-resource-pager ul { align-items: center; } .nav .standalone-resource-pager a, .nav .standalone-resource-pager span { margin-left: 0; margin-right: 0; } .pager-icon { vertical-align: middle; padding: 0 0.15em 0.15em 0.15em; width: 1em; height: 2em; fill: #005A6A; /* when these are used as actual SVGs */ } .category-icon { vertical-align: middle; padding: 0 0.25em 0.25em 0.25em; width: 2em; height: 2em; } .standalone-resource-pager ul { display: block; } .standalone-resource-pager ul li { display: inline; } .nav-hack { font-size: .85em; /*justify-self: end;*/ align-self: start; } .nav-hack ul { list-style: none; padding-left: 0 } .nav-hack li:not(:first-child){ padding-top: 0.4em; line-height: 1.2; border-top: 1px solid #BCBCBC; } .nav-hack li a { text-decoration: none; } .nav-hack h3 { margin: 0; font-size: 1rem; } .nav-hack p { margin: 0; } /* skip link */ .button--skip-link { background-color: var(--gold) !important; border-color: var(--gold) !important; outline-color: currentColor !important; color: var(--off-black) !important; font-weight: 600; font-size: larger; margin: 0 auto; position: absolute; z-index: 20; left: 0; right: 0; top: 0.5em; width: 10em; opacity: 1; transition: transform 0.1875s ease-out, opacity 0.1875s ease-out; } .button--skip-link:not(:focus):not(:hover) { transform: translateY(-4em); opacity: 0; } .standalone-resource-navrule { border:none; border-top: 1px solid grey } .standalone-resource-about ul, .standalone-resource-pager ul { list-style: none; } .nav { font-size: 95%; } .standalone-resource-about a, .standalone-resource-pager a, .standalone-resource-about span, .standalone-resource-pager span { margin-left:.8em; margin-right:.8em; } #examples video, figure video { max-width: 100%; } #brief { margin-bottom: 3em; } #brief dl { margin-left: 2em; } /* override WAI blockquote styles */ blockquote p:first-of-type::before, blockquote p:last-of-type::after { content: ""; } [dir="ltr"] blockquote p:first-of-type::before { margin-left: 0; } /* overrides for restyled figures and captions */ figure { margin: 2em 0; padding-left: 1em; border-left: 2px solid var(--cloudy); } figure img, figure video, figure svg { border: 1px solid var(--line-grey); } main table svg[role*="image"], figure svg[role*="image"] { display: block; max-inline-size: 100%; block-size: auto; } figcaption { font-weight: initial; border-bottom: initial; font-size: 0.9rem; } @media (max-width: 35em) { .nav-container { padding: 0; } .nav a { display: inline-block; width: calc(100% - 2em); } @supports (display:grid) { #site-header { padding-left: 0; } } } .figure-collection { --inline-size-specimen: 28ch; container: figure-collection / inline-size; &[ data-specimen-size="small" ] { --inline-size-specimen: 16ch; } } @container figure-collection (min-width: 64ch) { article { display: grid; grid-template-columns: var(--inline-size-specimen) 1fr; grid-template-rows: max-content auto; grid-template-areas: "specimen heading" "specimen caption"; column-gap: 1rem; padding-inline-end: 1rem; border-block-start: 1px solid var(--line-grey); border-inline: 1px solid var(--line-grey); background-color: white; &:last-child { border-block-end: 1px solid var(--line-grey); } } h5 { grid-area: heading; margin-block: 0.75rem 0; font-size: 1.2rem; } .specimen { grid-area: specimen; display: flex; align-self: stretch; align-items: start; justify-content: center; padding: 1rem; border-inline-end: 1px solid var(--line-grey); background-color: white; svg, img { border: 0; } } figure { display: contents; /* TODO: Is `display: contents` still too dangerous for this use case? If so, replace with the subgrid layout below. */ /* grid-column: 1 / -1; grid-row: 1 / -1; display: grid; replace with subgrid approach below.rid; replace with subgrid approach below.; margin: 0; border-inline-start: 0; padding-inline-start: 0; */ } figcaption { grid-area: caption; margin-block: 0.5rem; p { margin-block: 0.5rem; } } } /* preformatted blocks - generally contain code element */ pre { padding: 1em; border: 1px solid var(--line-grey); background-color: var(--pure-white); } /* inline code not in a preformatted block or link */ :not(:is(pre, a)) > code { font-size: 0.85em; background: #ebebeb; padding: 0 0.25em; display: inline-block; }