/* Stylesheet for Len's web site HTML Requirements: directly contains one each of

,

,

in that order and nothing else. (Additional

and

elements may appear inside other things, e.g.

.)
contains (or
) and
, and
contains a linkline which is a
. */ /* TODO: forms */ @import url("fonts.css"); @viewport { zoom: 1.0; width: extend-to-zoom; } * { box-sizing: border-box } html { text-size-adjust: 100%; color: black; font-family: "Open Sans", Arial, Helvetica, sans-serif; font-size: 1.05rem; line-height: 1.5; overflow-wrap: break-word; height: 100%; } body { /* Page width is set in children so the header can be full width. */ margin: 0 auto; position: relative; } body:last-child { margin-bottom: 3rem; } body > header { /* Header image is full screen width; contained elements are the nominal page width. */ padding-top: 1rem; padding-bottom: 0.1rem; margin-bottom: 1rem; color: rgb(168,200,220); background: rgb(51,103,153) url(header.jpg) no-repeat top right -250px; } body > header hgroup, body > header nav { min-width: 200px; max-width: 800px; margin: 0 auto; padding-right: 2rem; padding-left: 2rem; } body > header hgroup .logo { float: left; padding-right: 0.5rem; } body > header hgroup h1 { margin-top: 0; margin-bottom: 0; padding: 0; font-size: 2em; color: rgb(168,200,220); border-bottom: none; background: none; } main { min-width: 200px; max-width: 800px; margin: 0 auto; padding-left: 2rem; padding-right: 2rem; padding-top: 0px; } body > footer { clear: both; min-width: 200px; max-width: 800px; margin: 2rem auto; padding: 1rem 2rem 2rem 2rem; border: solid rgb(168,200,220); border-width: 0.2rem 0 0 0; color: rgb(51,103,153); font-size: 0.85em; font-weight: bold; } a:link { color: rgb(51,103,153); text-decoration: none; } strong a:link, blockquote a:link, figcaption a:link, footer a:link, code a:link, kbd a:link, aside a:link { color: black } a:visited { color: rgb(128,128,128); text-decoration: none; } a:active, a:hover { text-decoration: underline; } em { font-weight: italic } strong { font-weight: bold; color: rgb(51,103,153); } cite { font-style: italic; } h1, h2, h3, h4, h5, h6 { margin-top: 1.5rem; margin-bottom: 1rem; font-weight: 600; line-height: 1.25; } h1 { margin: 0.67em 0; padding-bottom: 0.3em; padding-left: 0.6em; font-size: 2em; color: rgb(51,103,153); border-bottom: 1px solid rgb(168,200,220); background: url(ding.svg) no-repeat left top 0.45em; background-size: 0.4em } h2 { padding-left: 0.6em; font-size: 1.5em; color: rgb(51,103,153); background: url(ding.svg) no-repeat left top 0.45em; background-size: 0.4em } h3 { font-size: 1.25em; color: rgb(51,103,153); } h4 { font-size: 1em; color: #6a737d; } h5 { font-size: 0.875em; color: #6a737d; } h6 { font-size: 0.85em; } hgroup p { font-style: italic; margin-bottom: 0.5em; } hgroup p i, hgroup p em, hgroup p cite { font-style: normal; } img { max-width: 100%; box-sizing: content-box; border-style: none; margin: 0.2rem 0.2rem 0.2rem 0; vertical-align: middle } /* For an image with a caption, use
*/ figure { padding: 0.2rem 0.2rem 0.2rem 0; vertical-align: middle } figcaption { font-style: italic; color: rgb(51,103,153); } aside { font-style: italic; color: rgb(51,103,153); background: white; } @media (min-width: 640px) { aside { clear: both; float: right; margin: 0.2rem 0 0.2rem 0.5rem; max-width: 40%; } aside img, aside figure { margin: 0 } } code, kbd { font-family: Hack, Consolas, monospace; font-size: 0.85em; } /* Code can be used as either an inline span or a block element. */ code { display: block; white-space: pre; margin: 0 0 1em 0; padding: 0.3em 0.3em; color: rgb(51,103,153); background-color: rgb(226,233,241); border-radius: 3px; } p code, li code, dt code, dd code { /* TODO: add other container elements as required */ display: inline-block; padding: 0 0.3em; margin: 0; } kbd { display: inline-block; color: rgb(51,103,153); } /* Nested element will outline the inner contents, for things like Ctrl+X for "Ctrl+X" */ kbd > kbd { padding: 0 0.25em; border-radius: 3px; border: solid rgb(51,103,153) 1px; } /* TODO: some of this might be redundant */ p, blockquote, ul, ol, dl, table { margin-top: 0; margin-bottom: 0.5em; } p { margin-bottom: 1em; } blockquote { padding: 0 2em 0 2em; margin-top: 0; margin-left: 0; min-height: 32px; color: rgb(51,103,153); background-image: url("quote.png"), url("quote2.png"); background-position: top left, bottom right; background-repeat: no-repeat; } blockquote > :first-child { margin-top: 0; } blockquote > :last-child { margin-bottom: 0; } blockquote footer { display: block; margin-left: 1em; } blockquote footer::before { display: inline; content: "\2014 " } ul { padding-left: 1em; } ol { padding-left: 2em; } ul { list-style-image: none; list-style-type: none; } ul ul, ul ol, ol ol, ol ul { margin-top: 0; margin-bottom: 0; } ol ol, ul ol { list-style-type: lower-roman; } ul ul ol, ul ol ol, ol ul ol, ol ol ol { list-style-type: lower-alpha; } ul > li { padding-left: 0.8em; background: url(ding.svg) no-repeat left top 0.5em; background-size: 0.5em } li::marker { color: rgb(51,103,153); } li > p { margin-top: 0.5em; margin-bottom: 0.5em; } dl { list-style: inside; list-style-image: none; list-style-type: none; } dl dt { display: list-item; font-weight: bold; color: rgb(51,103,153); padding-left: 0.8em; background: url(ding.svg) no-repeat left top 0.5em; background-size: 0.5em } dl dd { margin-left: 0.8em; } dd > p { margin-top: 0.5em; margin-bottom: 0.5em; margin-left: 0; text-indent: 0; } /* puts and on one line */ dl.inline { margin-top: 0.5em; margin-bottom: 0.5em; margin-left: 0.75em; } dl.inline dt { display: inline; background-position-y: 0.45em; margin-left: -0.75em; } dl.inline dd { display: inline; margin-left: 0; } dl.inline dd::before { content: " \2013 "; } dl.inline dd::after { content: "\a"; /* line break */ white-space: pre; } dl.inline dd:last-of-type::after { content: none; white-space-collapse: inherit; } dl.inline dd > p { margin-left: 1em; } table { border-spacing: 0; border-collapse: collapse; width: 100%; overflow: auto; margin-left:auto; margin-right:auto; } table th { text-align: start; font-weight: 600; } table th, table td { text-align: start; padding: 0.4em 0.7em; border: 1px solid rgb(168,200,220); } table tr { background-color: white; border-top: 1px solid rgb(168,200,220); } table tr:nth-child(2n) { background-color: rgb(226,233,241); } body > header a, body > header a:link, body > header a:visited { color: rgb(168,200,220); text-decoration: none; } body > header a:active, body > header a:hover { color: rgb(168,200,220); text-decoration: underline; } body > header strong { color: inherit; } body > header nav { display: flex; font-style: italic; } body > header nav i, body > header nav em, body > header nav cite { font-style: normal; } /* Header linkline is a with inline formatting. On a small display it's hidden until the icon is clicked. */ body > header nav ul { display: none; /* will be shown if screen is wide enough - see below */ padding: 0 0 0 0.1em; margin-bottom: 1em; } body > header nav label { padding: 0 0 0 28px; margin: 0 0 1em 0; background: url(navh.svg) no-repeat left top 0.3em; background-size: 30px } body > header nav #navCheck { display: none } body > header nav #navCheck:checked + ul { display: inline-block } @media (min-width: 640px) { /* On a wide screen, display the linkline with a small dingbat */ body > header nav ul { display: inline-block; padding-left: 0.75em; background: url(dingh.svg) no-repeat left top 0.55em; background-size: 0.53em } body > header nav label { display: none; } } body > header nav li { display: inline; list-style-type: none; background: none; padding-left: 0.45em; padding-right: 0.15em; border-left: 1px solid rgb(168,200,220); font-size: 0.85em; } body > header nav li:first-child { padding-left: 0; border-left: none; } body > header nav a { font-style: normal; font-weight: bold; } hr { box-sizing: content-box; overflow: hidden; background: transparent; height: 0.1rem; padding: 0; margin: 24px 0; background-color: rgb(168,200,220); border: 0; } hr::before { display: table; content: ""; } hr::after { display: table; clear: both; content: ""; } /* custom grid layout tags */ g-row { display: block; } g-col { display: inline; vertical-align: middle; } @media (min-width: 640px) { g-row { width: 100%; display: table; table-layout: fixed; } g-col { display: table-cell; padding-right: 0.1rem; padding-left: 0.1rem; } } /* custom tag to prevent line wrapping in a span */ no-wrap { display: inline; white-space: nowrap; }