:root {
--main-color: #00b9e4;
--complementary-color: #00677f;
--complementarylight-color: #28724f;
--complementarylighter-color: #c4bfb6;
--contenttext-color: #3f3f3f;
--contenttextlight-color: #6f6f6f;
--link-color: #f8485e;
--headertext-color: #fff;
--footertext-color: #fff;
--tablehead-color: #ccc;
--tableborder-color: #999;
--tablestripe-color: #eee;
--shrink-size: 64;
--min-header-height: 36px;
--str-advertisement: 'advertisement:';
}
html,body,p,ol,ul,li,dl,dt,dd,blockquote,figure,fieldset,legend,textarea,pre,iframe,hr,h1,h2,h3,h4,h5,h6{margin:0;padding:0}
ul{list-style:none}
button,input,select,textarea{margin:0}
html{box-sizing:border-box}
*,*:before,*:after{box-sizing:inherit}
img,embed,iframe,object,audio,video{max-width:100%}
iframe{border:0}
table{border-collapse:collapse;border-spacing:0}
td,th{padding:0;text-align:left}
:focus:not(:focus-visible) { outline: none }
html { min-height: 100%; }
body { font-family: var(--canvas-text); }
a {
text-decoration: none;
color: var(--link-color);
}
sup, sub {
vertical-align: baseline;
position: relative;
top: -0.4em;
}
sub { top: 0.4em; }
#gridder {
display: grid;
grid-template-columns: auto 1080px auto;
grid-template-rows: 100px auto 50px;
grid-gap: 0 0;
grid-template-areas:
"header header header"
". main ."
"footer footer footer"
;
}
@media (max-width: 1080px) {
#gridder {
grid-template-columns: unset !important;
grid-template-areas:
"header"
"main"
"footer"
;
}
}
#gridder > header {
grid-area: header;
background-color: var(--main-color);
color: var(--headertext-color);
}
body #gridder header {
z-index: 666;
height: 100px;
transition: all .2s ease-in-out;
}
body.min-header #gridder header {
position: fixed;
top: 0;
left: 0;
z-index: 666;
width: 100%;
height: var(--min-header-height);
}
#gridder > main { grid-area: main; }
#gridder > footer {
grid-area: footer;
display: flex;
align-items: center;
text-align: center;
background-color: var(--complementary-color);
color: var(--footertext-color);
}
#gridder > footer a {
color: var(--footertext-color);
text-decoration: none;
}
.constrainer {
width: 100%;
max-width: 1080px;
margin: 0 auto;
}
header .constrainer {
display: flex;
align-items: stretch;
position: relative;
height: 100%;
}
main {
display: grid;
grid-template-rows: min-content 1fr;
grid-template-columns: 30% auto;
grid-template-areas:
"banner-top banner-top"
"nav content"
;
grid-gap: 0 20px;
min-height: calc(100vh - 150px);
}
main > nav { grid-area: nav; }
main #content { grid-area: content; }
#menu a {
position: relative;
text-decoration: none;
text-transform: uppercase;
white-space: nowrap;
color: var(--headertext-color);
}
body:not(.menu) #menu a:hover { color: #000; }
body:not(.menu) #menu a:hover:before,
body:not(.menu) #menu a:hover:after {
position: absolute;
top: -15px;
left: -10px;
content: '⌜';
font-size: 20px;
color: #fff;
}
body:not(.menu) #menu a:hover:after {
top: unset;
left: unset;
bottom: -10px;
right: -10px;
content: '⌟';
}
header h1,
header nav {
display: flex;
flex-grow: 1;
justify-content: flex-end;
align-items: center;
}
header h1 { justify-content: flex-start; }
header nav a {
margin: 10px;
}
header form {
display: flex;
position: absolute;
top: 100px;
left: 0;
z-index: 6;
width: 100%;
max-height: 0;
overflow: hidden;
background-color: var(--complementary-color);
transition: all 0.5s ease-out;
}
.min-header header form { top: var(--min-header-height); }
header form.active {
max-height: 100px;
box-shadow: 0 3px 6px #00000033;
}
header form input,
header form button {
margin: 5px;
padding: 5px;
border: none;
font-size: 20px;
outline: none;
}
header form input {
flex-grow: 1;
margin-right: 0;
}
header form button {
margin-left: 0;
padding: 5px 10px;
background-color: var(--complementary-color);
border-left: 5px solid var(--complementary-color);
text-transform: uppercase;
color: var(--headertext-color);
cursor: pointer;
transition: text-shadow 1s linear;
animation: glow 1.0s infinite alternate;
}
@keyframes glow {
to { text-shadow: 0 0 5px #fff; }
}
header form button:hover { background-color: var(--main-color); }
header h1 .text { display: none; }
header h1 img {
height: 50px;
transition: all .2s ease-in-out;
}
.min-header header h1 img { height: 25px; }
main > nav,
main > section { padding: 20px 0; }
main > nav h1 { margin-bottom: 10px; }
main > nav > ul >li { margin-top: 10px; }
#content.toc {
font-family: var(--canvas-text);
line-height: 1.2;
}
.toc h2 {
margin: 1.2em 0 .5em 0;
font-weight: normal;
font-size: smaller;
text-transform: uppercase;
color: var(--contenttextlight-color);
}
.toc ul { margin: 0 !important; }
.toc ul ul { padding-left: 10px; }
.toc li {
margin: 0 !important;
padding: 0 !important;
}
main.issue > nav > ul > li > ul,
main.article > nav > ul > li > ul { margin-left: 0; }
.toc a,
#content.library a.pdf,
#content ul.subsections a,
main.theme > nav a,
main > nav label {
position: relative;
display: block;
margin-bottom: 5px;
padding-left: 15px;
text-decoration: none;
color: var(--contenttext-color);
cursor: pointer;
}
.toc a:hover,
main.theme > nav a:hover { color: #000; }
main > nav label:before,
.toc a:before,
#content.library a.pdf:before,
#content ul.subsections a:before,
main.theme > nav a:before,
main.frontpage #content article:before,
main.result #content article:before {
position: absolute;
top: 5px;
left: 0;
width: 10px;
height: 10px;
content: ' ';
background: transparent url('data:image/svg+xml;utf8,') no-repeat -3px 0;
line-height: 0;
color: #999;
transition: all 200ms ease;
}
main > nav input:checked + label,
.toc li.active > a,
.toc li a.active,
main.theme > nav .active a { font-weight: bold; }
main > nav label:hover:before,
main > nav input:checked + label:before,
.toc a:hover:before,
.toc .active > a:before,
.toc a.active:before,
#content.library a.pdf:hover:before,
#content ul.subsections a:hover:before,
main.theme > nav a:hover:before,
main.theme > nav .active a:before,
main.frontpage #content article:hover:before,
main.result #content article:hover:before { left: 5px; color: #000; }
#content.library article img,
#content.library article .placeholder {
box-shadow: 0 0 10px #00000066;
transition: all .2s ease;
}
#content.library article .placeholder {
width: 100%;
height: 200px;
background: transparent url('data:image/svg+xml;utf8,') no-repeat center center;
background-size: 90% 90%;
}
#content.library article a:hover img,
#content.library article a:hover .placeholder { transform: scale(1.02); }
#content.library article a:hover h1 { text-decoration: underline; }
#content.library {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(164px, 1fr));
grid-auto-rows: min-content;
grid-gap: 20px;
}
#content.library a {
text-decoration: none;
color: var(--contenttext-color);
}
#content.library article h1 { font-size: 100%; }
#content.toc h2 { font-size: 18px; }
main.news > nav a { text-transform: capitalize; }
#content p {
font-family: var(--content-serif);
color: var(--contenttext-color);
line-height: 1.8;
-webkit-hyphens: auto;
hyphens: auto;
}
/* headings */
#content h1,
#content h2,
#content h3,
#content h4,
#content h5,
#content h6 {
margin: 1.2em 0 .5em 0;
font-family: var(--content-sans);
font-weight: 700;
line-height: 1.2;
}
#content h5,
#content h6 {
font-size: 100%;
font-style: italic;
}
#content h1 {
margin-top: 0;
font-size: 250%;
}
#content .partitle {
text-transform: uppercase;
font-family: var(--content-sans);
color: var(--contenttextlight-color);
}
#content.toc .part > h1 {
margin: 10px 0 0 0;
padding: 10px 0;
border-bottom: 1px solid var(--complementarylight-color);
font-size: 100%;
font-weight: 400;
text-transform: uppercase;
}
#content .suptitle {
margin-bottom: 10px;
font-family: var(--content-sans), sans-serif;
font-size: 137%;
font-weight: 400;
line-height: 1.2;
}
#content .subtitle {
margin: -.5em 0 1em 0;
font-family: var(--content-sans), sans-serif;
font-size: 137%;
font-weight: 400;
line-height: 1.2;
}
#content h2 + section > h3,
#content h3 + section > h4 { margin-top: 0; }
#content :not(section) h1 {
font-weight: 700;
font-size: 150%;
}
#content figure h1 {
margin-bottom: .5em;
font-weight: 700;
font-size: 100%;
text-transform: none;
}
#content .lead {
font-family: var(--content-sans), sans-serif;
font-size: 120%;
line-height: 1.5;
}
#content .persons {
margin: 1em 0;
border: 1px solid var(--complementary-color);
border-width: 1px 0;
font-family: var(--content-sans), sans-serif;
font-size: small;
}
#content .person {
margin: 10px 0;
line-height: 1.2;
}
#content .persons span[class$="name"] { font-weight: 600; }
#content .persons p { margin: 0; }
#content .persons .misc,
#content .persons .misc-2 { display: inline; }
#content p { margin: 0 0 1em 0; }
#content p.blank { margin-top: 2em; }
#content p.unindented { margin-top: -1em; }
#content h2 + p.unindented { margin-top: 0; }
#content p.hanging {
padding-left: 2.2em;
text-indent: -2.2em;
}
#content p.left { text-align: left; }
#content p.center { text-align: center; }
#content p.right { text-align: right; }
#content p.justify { text-align: justify; }
#content p.source {
text-align: right;
font-size: 90%;
}
#content p a {
word-wrap: break-word;
line-break: anywhere;
}
#content em {
font-weight: inherit;
font-style: normal;
text-decoration: none;
}
#content em.strong { font-weight: bold; }
#content em.italic { font-style: italic; }
#content em.underline { text-decoration: underline; }
#content ol,
#content ul { margin: .5em 0 1em 1.2em; }
#content ol.1 { list-style: decimal; }
#content ol.A { list-style: upper-alpha; }
#content ol.a { list-style: lower-alpha; }
#content ol.I { list-style: upper-roman; }
#content ol.i { list-style: lower-roman; }
#content ul.circle { list-style: circle; }
#content ul.bullet { list-style: initial; }
#content ul.free { list-style: none; }
#content li { margin: .5em 0; }
#content li p { margin: 0; }
#content figure { margin: 1.5em 0; }
#content figure.table {
overflow-x: auto;
overflow-y: hidden;
}
#content figure img { max-width: 100%; }
#content figure img[style*="height"] { width: unset; }
#content figure.var-a {
width: 100%;
}
#content figure.var-b {
width: 100%;
}
#content figure.var-c {
width: 50%;
margin-left: auto;
margin-right: auto;
}
#content figure.var-d {
float: left;
width: 50%;
margin-top: .5em;
padding-right: 20px;
}
#content figure.var-e {
float: right;
width: 50%;
margin-top: .5em;
padding-left: 20px;
}
#content figure.var-f {
width: 25%;
float: left;
margin-top: .5em;
margin-right: 20px;
}
#content figure.var-g {
width: 25%;
float: right;
margin-left: 20px;
margin-top: .5em;
}
#content figure.var-h {
width: 12.5%;
float: left;
margin-right: 20px;
margin-top: .5em;
}
#content figure.var-i {
width: 12.5%;
float: right;
margin-left: 20px;
margin-top: .5em;
}
#content figure.var-j {
width: 75%;
margin-left: auto;
margin-right: auto;
}
#content figure img.b {
padding: 10px;
border: 1px solid var(--tableborder-color);
}
#content figure:not([class^="var-"]) {
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-gap: 10px;
}
#content figure:not(.textflow).left.w100 > * { grid-column: 1 / span 8; }
#content figure:not(.textflow).left.w75 > * { grid-column: 1 / span 6; }
#content figure:not(.textflow).left.w50 > * { grid-column: 1 / span 4; }
#content figure:not(.textflow).left.w25 > * { grid-column: 1 / span 2; }
#content figure:not(.textflow).left.w12½ > * { grid-column: 1 / span 1; }
#content figure:not(.textflow).center.w100> * { grid-column: 1 / span 8; justify-self: center; }
#content figure:not(.textflow).center.w75> * { grid-column: 2 / span 6; }
#content figure:not(.textflow).center.w50> * { grid-column: 3 / span 4; }
#content figure:not(.textflow).center.w25> * { grid-column: 4 / span 2; }
#content figure:not(.textflow).center.w12½> * { grid-column: 4 / span 1; }
#content figure:not(.textflow).right.w100 > * { grid-column: 1 / span 8; justify-self: end; }
#content figure:not(.textflow).right.w75 > * { grid-column: 3 / span 6; }
#content figure:not(.textflow).right.w50 > * { grid-column: 5 / span 4; }
#content figure:not(.textflow).right.w25 > * { grid-column: 7 / span 2; }
#content figure:not(.textflow).right.w12½ > * { grid-column: 8 / span 1; }
#content figure:not(.textflow).left.w75 figcaption[class^="side-"] { grid-column: 7 / span 2 !important; grid-row: 1; }
#content figure:not(.textflow).left.w50 figcaption[class^="side-"] { grid-column: 5 / span 4 !important; grid-row: 1; }
#content figure:not(.textflow).left.w25 figcaption[class^="side-"] { grid-column: 3 / span 6 !important; grid-row: 1; }
#content figure:not(.textflow).left.w12½ figcaption[class^="side-"] { grid-column: 2 / span 7 !important; grid-row: 1; }
#content figure:not(.textflow).center figcaption.full-width { grid-column: 1 / span 8 !important; grid-row: 1; }
#content figure:not(.textflow).right.w75 figcaption[class^="side-"] { grid-column: 1 / span 2 !important; grid-row: 1; }
#content figure:not(.textflow).right.w50 figcaption[class^="side-"] { grid-column: 1 / span 4 !important; grid-row: 1; }
#content figure:not(.textflow).right.w25 figcaption[class^="side-"] { grid-column: 1 / span 6 !important; grid-row: 1; }
#content figure:not(.textflow).right.w12½ figcaption[class^="side-"] { grid-column: 1 / span 7 !important; grid-row: 1; }
#content figure:not(.textflow) figcaption.side-top { align-self: start; }
#content figure:not(.textflow) figcaption.side-bottom { align-self: end; }
#content figure:not(.textflow) figcaption.full-width { grid-column: 1 / span 8 !important; }
#content figure.right figcaption { text-align: left; }
#content figure.center figcaption { text-align: center; }
#content figure.textflow {
display: block;
margin-top: 0.5em;
}
#content figure.textflow.left { float: left; margin-right: 20px; }
#content figure.textflow.center { margin-left: auto; margin-right: auto; text-align: center; }
#content figure.textflow.right { float: right; margin-left: 20px; }
#content figure.textflow.w75 { width: 75%; }
#content figure.textflow.w50 { width: 50%; }
#content figure.textflow.w25 { width: 25%; }
#content figure.textflow.w12½ { width: 12.5%; }
#content figure.imbed iframe {
width: 100%;
height: 415px;
}
#content figcaption {
margin-top: 0;
font-family: var(--content-sans), sans-serif;
font-style: italic;
font-weight: 400;
line-height: 1.2;
}
#content figcaption .note,
#content .origin {
font-style: normal;
font-size: 90%;
}
#content figcaption p { margin-bottom: .5em; }
#content .gallery {
margin: 2em 0;
}
#content .gallery a { display: inline-block }
#content .gallery .item {
display: inline-block;
width: 100px;
height: 100px;
margin: 10px;
background-size: cover;
}
#content .gallery .item img {
width: 1px;
height: 1px;
}
#content table {
width: 100%;
margin: .5em 0;
border-collapse: collapse;
}
#content table caption {
margin-bottom: .5em;
font-family: var(--content-sans), sans-serif;
font-size: 100%;
font-weight: 600;
text-align: left;
line-height: 1.2;
}
#content table th,
#content table td {
padding: 5px;
border: 1px var(--tableborder-color) solid;
font-family: var(--content-sans), sans-serif;
font-size: 90%;
line-height: 1.2;
}
#content table th.left,
#content table td.left { text-align: left; }
#content table th.center,
#content table td.center { text-align: center; }
#content table th.right,
#content table td.right { text-align: right; }
#content table th,
#content table td { vertical-align: top; } /* default */
#content table th.top,
#content table td.top { vertical-align: top; }
#content table th.middle,
#content table td.middle { vertical-align: middle; }
#content table th.bottom,
#content table td.bottom { vertical-align: bottom; }
#content table p { margin: 0 0 .5em 0; }
#content table th p:last-child,
#content table td p:last-child { margin: 0; }
#content table td p.unindented { margin-top: -.5em; }
#content table p.blank { margin-top: .5em; }
#content table th { background-color: var(--tablehead-color) }
#content table.var-a tr:nth-child(even) td { background-color: var(--tablestripe-color); }
#content table.var-b tr th,
#content table.var-b tr td { background-color: transparent; }
#content table.var-c tr > * { border: none; }
#content table.var-c th { background-color: unset; }
#content table.var-d { margin: 0; }
#content table.var-d tr > * {
padding: 0;
border: none;
}
#content table.var-d tr > * > p {
font-size: initial;
font-family: var(--content-serif);
line-height: 1.8;
}
#content table tr.under > * { border-bottom: 1px solid var(--tableborder-color); }
#content table tr.over > * { border-top: 1px solid var(--tableborder-color); }
#content table tr.overunder > * {
border: 1px solid var(--tableborder-color);
border-width: 1px 0;
}
#content table tr > *.border { border: 1px solid var(--tableborder-color); }
#content table tr > *.border-t { border-top: 1px solid var(--tableborder-color); }
#content table tr > *.border-r { border-right: 1px solid var(--tableborder-color); }
#content table tr > *.border-b { border-bottom: 1px solid var(--tableborder-color); }
#content table tr > *.border-l { border-left: 1px solid var(--tableborder-color); }
#content table th.rotate p,
#content table td.rotate p {
writing-mode: vertical-lr;
writing-mode: vertical-rl;
white-space: nowrap;
margin: 0 auto;
}
#content blockquote {
margin: 2em 0;
padding: 30px 50px 5px 65px;
background: transparent url('data:image/svg+xml;utf8,') no-repeat 0 5px;
background-size: auto 30px;
border-top: 1px solid var(--complementarylight-color);
border-bottom: 1px solid var(--complementarylight-color);
font-size: 130%;
font-style: italic;
font-weight: 400;
}
#content blockquote .origin { font-size: 85%; }
#content .footnote {
vertical-align: baseline;
top: -0.4em;
position: relative;
padding: 0 0 0 3px;
cursor: help;
font-weight: bold;
}
#content .footnote > span {
display: none;
position: absolute;
bottom: 20px;
left: -150px;
z-index: 666;
width: 300px;
padding: 5px;
background-color: var(--complementarylighter-color);
border: 1px var(--complementarylight-color) solid;
border-radius: 3px;
box-shadow: 1px 1px 6px var(--complementarylight-color);
text-indent: 0;
font-weight: normal;
font-size: 90%;
line-height: normal;
}
#content .box {
margin: 1em 0;
padding: 20px 30px;
border-radius: 3px;
}
#content .box h2 {
margin-top: 0;
font-size: 110%;
text-transform: uppercase;
}
#content .box h3 {
margin-top: 0;
font-size: 105%;
}
#content .box p {
font-family: var(--content-sans), sans-serif;
line-height: 1.4;
}
#content .box section + p { margin-top: 1.2em; }
#content .petit {
margin-left: 20px;
font-style: italic;
}
#content .example {
padding-left: 15px;
border-left: 15px var(--complementarylighter-color) solid;
}
#content .variant p {
font-weight: 700;
font-style: italic;
color: var(--main-color);
}
#content .poem { margin: 1em 0; }
#content .poem h1 {
margin-top: 1.5em;
font-size: 22px;
font-style: italic;
}
#content .verse { margin: 1em 0; }
#content .verse p { margin: 0; }
#content code {
white-space: pre-wrap;
font-family: 'Courier New', Courier, monospace;
}
#content nav.prevnext {
display: flex;
clear: both;
padding-top: 10px;
border-top: 1px solid var(--complementary-color);
font-family: var(--canvas-text);
line-height: 1.2;
}
#content nav.prevnext a {
position: relative;
display: block;
width: 50%;
margin: 0 15px;
text-decoration: none;
color: var(--contenttext-color);
}
#content nav.prevnext a.next { text-align: right; }
#content nav.prevnext a:before {
position: absolute;
top: 2px;
left: -15px;
width: 10px;
height: 10px;
content: ' ';
background: transparent url('data:image/svg+xml;utf8,') no-repeat 3px 0;
line-height: 0;
color: #999;
transition: all 200ms ease;
}
#content nav.prevnext a.next:before {
left: unset;
background: transparent url('data:image/svg+xml;utf8,') no-repeat -3px 0;
right: -15px;
}
#content nav.prevnext a:hover:before { left: -20px; }
#content nav.prevnext a.next:hover:before {
left: unset;
right: -20px;
}
#content nav.prevnext a.noprev { visibility: hidden; }
#content nav.prevnext label {
display: block;
font-weight: normal;
font-size: smaller;
text-transform: uppercase;
color: var(--contenttextlight-color);
cursor: pointer;
}
main.result h2.in { margin-bottom: 10px; }
main.result nav form input {
width: 100%;
margin-bottom: 20px;
padding: 5px;
border: 5px solid var(--complementary-color);
font-size: 20px;
outline: none;
}
main.result nav ul { margin-left: 0; }
main.result nav li input { display: none; }
main.result #content article {
position: relative;
margin: 1em 0;
padding-left: 15px;
line-height: 1.2;
}
main.result #content article:before { top: 6px; }
main.result #content article:hover h1 { text-decoration: underline; }
main.result #content a {
text-decoration: none;
color: var(--contenttextlight-color);
}
main.result #content article * { margin: 0; }
main.result #content article p{
display: inline;
font-size: small;
}
main.result #content article .lead {
font-family: var(--content-serif);
font-size: unset;
line-height: unset;
}
main.result #content article p.author { font-style: italic; }
main.result #content article p.author:before { content: ' – '; }
main.result #content article em {
font-weight: bold;
color: var(--contenttext-color);
}
.paginator {
display: flex;
align-items: flex-end;
margin: 0 0 20px 0;
border: 5px var(--complementary-color) solid;
font-family: var(--canvas-text);
}
.paginator > span { flex-grow: 1; }
.paginator span a,
.paginator span span {
display: block;
padding: 3px 0 1px 0;
text-align: center;
text-decoration: none;
border-right: 1px var(--complementary-color) solid;
}
.paginator span:last-child a,
.paginator span:last-child span { border-width: 0; }
.paginator span a:hover {
background-color: var(--main-color);
color: #fff;
}
.paginator span.current {
background-color: var(--complementary-color);
color: #fff;
}
@media (max-width: 1080px) {
header h1 { margin: 0 10px; }
main { margin: 0 10px; }
}
@media (max-width: 466px) {
main:not(.year) { display: block; }
#content figure { width: 100% !important; }
#content figure:not(.textflow) > * { grid-column: 1 / span 8 !important; }
}