@import url(jquery.lightbox-0.5.css);
body { background-color: #fff; margin: 0; font-size: 15px; color: #323435; line-height: 1.2; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }

/* HTML5 compatibility with older browsers */
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, nav, section, summary, video { display: block; }

/* Fonts */
body, .comment_form textarea { font-family: 'Source Sans Pro', sans-serif; font-weight: 400; /* regular */ }

h1, h2, h3 { font-weight: 600; /* semi-bold */ }

h4, h5, h6 { font-weight: 400; /* regular */ }

table.style1 { font-family: sans-serif; }

pre, code { font-family: Consolas, Monaco, monospace; font-size: 12px; line-height: 17px; /* renders as 18px in Safari */ }

a { color: #2e7cf6; }

a:visited { color: #707070; }

.tinylink { font-size: 12px; }

#header { height: 64px; padding: 0 10px; background: #b9d2fc; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; }

#container { min-height: 100vh; position: relative; padding-bottom: 72px; /* enough room for footer */ box-sizing: border-box; }

#footer { position: absolute; bottom: 0; width: 100%; padding: 8px 10px 10px; background: #e5efff; border-top: 1px solid #b9d2fc; box-sizing: border-box; }

a.top-link, a.top-link:visited { color: #2e7cf6; }

h1 { font-size: 24px; text-align: left; margin: 12px 0 0; letter-spacing: -1px; }

h1 a:link, h1 a:visited { text-decoration: none; color: #323435; }

.byline { margin: 0 0 5px; font-size: 12px; }

.menu-toggle { display: none; }

#container { max-width: 768px; box-sizing: border-box; margin: 0 auto; }

#content { padding: 8px 10px; }

#about { padding: 26px 10px 10px; }

#about .photo { margin: 0; }

img.portrait { width: 100%; height: 198px; object-fit: cover; border-radius: 2px; }

#about h2 { font-size: 20px; margin: 13px 0 17px; }

/** Articles */
article { padding-bottom: 14px; margin-bottom: 17px; }

article:nth-child(n+2) { border-top: 1px solid #B9D2FC; padding-top: 36px; }

article h2 { font-size: 20px; line-height: 18px; margin: 20px 0 0; }

article .timestamp { display: block; margin: 6px 0 18px; font-size: 12px; line-height: 14px; font-weight: 600; /* semi-bold */ color: #707070; text-transform: uppercase; }

article h2, article h2 a:link, article h2 a:visited { color: inherit; text-decoration: none; }

article h2 a:hover { text-decoration: underline; }

article.type-link h2:before, .archive .type-link a:before { display: inline-block; /* content: '\2192'; */ /* rightwards arrow */ content: '\2318'; /* place of interest marker */ margin-right: 4px; color: #aaa; }

.archive .type-link a:before { margin-right: 2px; }

article.type-link h2 a:link, article.type-link h2 a:visited { color: #46a; text-decoration: underline; }

article.draft h2:after, .archive .draft a:after { content: 'draft'; text-transform: uppercase; background: #5e8fdb; color: #fff; border-radius: 5px; padding: 3px 5px; font-size: 10px; font-weight: bold; line-height: 10px; margin-left: 10px; display: inline-block; vertical-align: middle; }

p, article pre, article table, .figure, figure { margin: 0 0 18px 0; }

article ul, article ol { margin: 0 0 18px 0; padding-left: 24px; }

article h3 { font-size: 16px; line-height: 20px; margin: 24px 0 10px; }

article h4 { font-size: 15px; margin: 19px 0 10px; color: #666; }

article h5, article h6 { font-size: 13px; margin: 21px 0 10px; color: #666; }

article .indent { margin-left: 2em; }

table.style1 { margin-left: auto; margin-right: auto; border-collapse: collapse; font-size: 13px; line-height: 16px; }

table.style1 th { background-color: #c7d7f7; }

table.style1 td, table.style1 th { padding: 5px; text-align: center; border: 1px solid #8ae; }

.piano, .piano * { box-sizing: border-box; }

.piano { height: 150px; width: 434px; margin-left: auto; margin-right: auto; padding: 6px; border: 1px solid #160801; border-radius: 8px; background: linear-gradient(to bottom right, #222, #000); box-shadow: 0 0 50px rgba(0, 0, 0, 0.5) inset, 0 1px rgba(212, 152, 125, 0.2) inset; display: flex; }

.piano li { margin: 0; padding: 0; list-style: none; }

.piano .white { height: 100%; width: 28px; z-index: 1; border-left: 1px solid #bbb; border-bottom: 1px solid #bbb; border-radius: 0 0 5px 5px; box-shadow: -1px 0 0 rgba(255, 255, 255, 0.8) inset, 0 0 5px #ccc inset, 0 0 3px rgba(0, 0, 0, 0.2); background: linear-gradient(to bottom, #eee 0%, #fff 100%); display: flex; flex-direction: column-reverse; }

.piano .white:active { border-top: 1px solid #777; border-left: 1px solid #999; border-bottom: 1px solid #999; box-shadow: 2px 0 3px rgba(0, 0, 0, 0.1) inset, -5px 5px 20px rgba(0, 0, 0, 0.2) inset, 0 0 3px rgba(0, 0, 0, 0.2); background: linear-gradient(to bottom, #fff 0%, #e9e9e9 100%); }

.piano .black { height: 60%; width: 20px; margin: 0 0 0 -10px; z-index: 2; border: 1px solid #000; border-radius: 0 0 3px 3px; box-shadow: -1px -1px 2px rgba(255, 255, 255, 0.2) inset, 0 -5px 2px 3px rgba(0, 0, 0, 0.6) inset, 0 2px 2px rgba(0, 0, 0, 0.5); background: linear-gradient(45deg, #222 0%, #555 100%); }

.piano .black:active { box-shadow: -1px -1px 2px rgba(255, 255, 255, 0.2) inset, 0 -2px 2px 3px rgba(0, 0, 0, 0.6) inset, 0 1px 2px rgba(0, 0, 0, 0.5); background: linear-gradient(to right, #444 0%, #222 100%); }

.piano .d, .piano .e, .piano .g, .piano .a, .piano .b { margin: 0 0 0 -10px; }

.piano :first-child { border-radius: 5px 0 5px 5px; }

.piano :last-child { border-radius: 0 5px 5px 5px; }

.piano .label { font-size: 11px; font-style: normal; color: #222; margin-bottom: 10px; text-align: center; cursor: default; }

.piano .white.highlight, .piano .black.highlight { background: #2e7cf6; color: #fff; }

table.keyboard { border-collapse: collapse; border: 1px solid #aaa; margin: 0 auto; }

table.keyboard td, table.keyboard th { text-align: center; vertical-align: middle; width: .8em; height: 3em; border-left: 1px solid #aaa; border-right: 1px solid #aaa; }

table.keyboard th { background: #000; height: 4em; }

table.keyboard td.keyboard-top { height: 0; background: #aaa; }

article img { border: 1px solid #000; }

article .right { float: right; margin: 0 0 0 1em; }

article .left { float: left; margin: 0 1em 0 0; }

article .center, figure.center { text-align: center; }

.archive ul, .archive ol { margin: 0 0 18px 0; padding-left: 24px; }

.archive h2 { font-size: 20px; line-height: 18px; margin: 14px 0 20px; }

.archive h3 { margin: 9px 0 6px; font-size: 12px; line-height: 12px; font-weight: bold; color: #aaa; text-transform: uppercase; }

.article-nav { color: #707070; background: #E5EFFF; border-top: 1px solid #B9D2FC; border-bottom: 1px solid #B9D2FC; padding: 5px 10px; font-size: 18px; line-height: 18px; margin-bottom: 18px; font-weight: 600; /* semi-bold */ }

.article-nav a:link, .article-nav a:visited { font-size: 15px; font-weight: 400; /* regular */ }

/* Header nav */
.header-nav { margin: 15px 0; }

.header-nav ul { margin: 0; padding: 0; }

.header-nav li { list-style: none; margin: 0 5px; padding: 0; display: inline-block; height: 36px; }

.header-nav li a { color: inherit; text-decoration: none; display: inline-block; height: 36px; text-align: center; line-height: 36px; padding: 0 10px; }

.header-nav form { padding: 9px 0; }

.archive-link { text-align: center; font-size: 16px; }

.archive ul a { text-decoration: none; }

.archive ul a:hover { text-decoration: underline; }

/** Comments */
#comments .title, #comments .title a { font-size: 16px; letter-spacing: -.5px; }

#comments .timestamp, #comments .timestamp a { color: #aaa; font-style: italic; }

.comment .detail { margin-bottom: 12px; }

.comment_form { margin: 1em; }

.comment_form h2 { font-size: 1.1em; }

.comment_form input, .comment_form textarea { font-size: 12px; color: #000; background-color: #fff; }

.comment_form textarea { width: 450px; }

.comment_form th { font-weight: bold; }

.comment_form td, .comment_form th { text-align: left; vertical-align: top; }

.comment { font-size: 1em; padding: 1em; border-bottom: 1px solid #ddd; margin-top: 1em; }

.comment .detail { margin-top: 1em; }

.comment .title, .comment .title a:link, .comment .title a:visited { color: #028; font-weight: bold; font-size: 1em; text-decoration: none; }

.comment .title a:hover { text-decoration: underline; }

.author { background-color: #eef; }

.buttons { text-align: center; }

.comment_form { float: left; margin-top: 1em; }

acronym { border-bottom: 1px dotted black; cursor: help; }

img { border: 0; }

pre, p.panel { border: 1px dashed #779; font-size: 12px; padding: 8px; }

pre { white-space: pre-wrap; }

blockquote:before { content: '\201c'; position: absolute; z-index: -1; top: 0; left: -30px; color: #b9d2fc; font-size: 120px; line-height: 60px; }

blockquote { position: relative; color: #666; margin: 16px 30px 18px; font-style: oblique; }

blockquote em { font-style: normal; }

blockquote .big { font-size: 20px; line-height: 27px; }

.breadcrumb { font-family: sans-serif; font-size: 12px; }

.figure, figcaption { font-style: oblique; }

.figure img, figure img { border: 1px solid #000; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; max-width: 100%; }

.figure.noborder img, figure.noborder img { border: none; }

.math { font-style: italic; font-family: serif; font-size: 1.25em; }

.figure.math, figure .math { font-size: 1.4em; }

/* gallery */
.gallery { overflow: hidden; margin: 0; padding: 0; }

.gallery li { display: inline; list-style: none; float: left; margin: 0; padding: 10px; text-align: center; }

.gallery a, .gallery .caption { display: block; width: 200px; max-width: 200px; text-align: center; }

.gallery .caption { font-size: 90%; color: #333; }

/* page styles */
.page h1, .page h2 { font-size: 20px; }

.page header, .page footer { margin-bottom: 20px; }

/* travel galleries */
.page.travel figure { margin-bottom: 30px; }

.page.travel figcaption { font-style: normal; }

.page.travel img { max-width: 100%; max-height: 400px; object-fit: contain; border: none; }

.albums img { width: 100%; max-height: 250px; border: none; object-fit: cover; }

/* Development tools */
#dev-tools { display: none; }

.test #dev-tools { display: inline-block; position: fixed; top: 0; left: calc(50% - 50px); font: 12px sans-serif; background-color: #fff; background-image: url(/image/under-construction.gif); background-position: 2px 5px; background-repeat: no-repeat; background-size: 30px; background-origin: padding-box; padding: 5px 10px 5px 40px; border: 1px solid #aaa; margin: 5px; z-index: 1; }

#dev-tools ul, #dev-tools li { list-style: none; display: block; margin: 0; padding: 0; }

#container.vertical-rhythm { background-image: url(/image/vertical-rhythm-18px.png); }

/* Bootstrap-like styles */
.d-none { display: none; }

.d-flex { display: flex; }

.justify-content-between { justify-content: space-between; }

.justify-content-end { justify-content: flex-end; }

.flex-wrap { flex-wrap: wrap; }

.ml-auto { margin-left: auto; }

.cover { object-fit: cover; }

.h-25 { height: 25%; }

.w-25 { width: 25%; }

.h-50 { height: 50%; }

.w-50 { width: 50%; }

.h-75 { height: 75%; }

.w-75 { width: 75%; }

.h-100 { height: 100%; }

.w-100 { width: 100%; }

.mt-0 { margin-top: 0px; }

.mr-0 { margin-right: 0px; }

.mb-0 { margin-bottom: 0px; }

.ml-0 { margin-left: 0px; }

.mt-1 { margin-top: 10px; }

.mr-1 { margin-right: 10px; }

.mb-1 { margin-bottom: 10px; }

.ml-1 { margin-left: 10px; }

.mt-2 { margin-top: 20px; }

.mr-2 { margin-right: 20px; }

.mb-2 { margin-bottom: 20px; }

.ml-2 { margin-left: 20px; }

.mt-3 { margin-top: 30px; }

.mr-3 { margin-right: 30px; }

.mb-3 { margin-bottom: 30px; }

.ml-3 { margin-left: 30px; }

.mt-4 { margin-top: 40px; }

.mr-4 { margin-right: 40px; }

.mb-4 { margin-bottom: 40px; }

.ml-4 { margin-left: 40px; }

.mt-5 { margin-top: 50px; }

.mr-5 { margin-right: 50px; }

.mb-5 { margin-bottom: 50px; }

.ml-5 { margin-left: 50px; }

.mt-6 { margin-top: 60px; }

.mr-6 { margin-right: 60px; }

.mb-6 { margin-bottom: 60px; }

.ml-6 { margin-left: 60px; }

/* column layout: 5 x 134px + 20px gutter */
.col-2 { flex: 0 0 auto; width: 40%; box-sizing: border-box; }

.col-3 { flex: 0 0 auto; width: 60%; box-sizing: border-box; }

/* mobile */
@media (max-width: 600px) { #main { max-width: 500px; margin: 0 auto; flex-direction: column; } #content, #about { width: 100%; } #header, .header-nav ul { flex-direction: column; height: auto; } .header-title { position: relative; width: auto; } .byline { margin-bottom: 10px; } .menu-toggle { display: block; position: absolute; top: 12px; right: 0; box-sizing: content-box; color: #323435; width: 24px; height: 28px; padding: 4px; cursor: pointer; } .header-nav { background: #e5efff; width: auto; margin: 0 -10px; height: 0; /* toggled by menu-toggle */ overflow: hidden; transition: height 300ms; } .header-nav.visible { height: 99px; transition: height 300ms; } .header-nav li { border-bottom: 1px solid #b9d2fc; width: auto; height: auto; margin: 0; padding: 0; } .header-nav li a { display: block; text-align: left; height: 32px; line-height: 32px; padding: 0 20px; } .header-nav li a:hover, .header-nav li a:active { background: #b9d2fc; } #about { display: flex; flex-direction: row-reverse; padding-top: 0; } #about .photo { padding: 50px 0 0 10px; } img.portrait { height: 100px; width: 100px; } .article-nav { /* expand to fill width */ margin-left: -10px; margin-right: -10px; } h1 { font-size: 20px; } .archive #content { padding: 0 10px; border-bottom: 1px solid #b9d2fc; margin-bottom: 20px; } .test #dev-tools { top: auto; bottom: 0; } }

@media (prefers-color-scheme: dark) { body { color: #e9e9e9; background-color: #000; } a { color: #5e8fdb; } h1 a:link, h1 a:visited { text-decoration: none; color: #e9e9e9; } #header { background-color: #263d63; } .article-nav { color: #e9e9e9; background: #1d2f4d; border-top: 1px solid #263d63; border-bottom: 1px solid #263d63; } #footer { background: #1d2f4d; border-top: 1px solid #263d63; } a.top-link, a.top-link:visited { color: #5e8fdb; } article .timestamp, article h4, article h5, article h6 { color: #909090; } article:nth-child(n+2) { border-top: 1px solid #263d63; } .archive #content { border-bottom: 1px solid #263d63; } blockquote { color: #909090; } blockquote:before { color: #263d63; } pre, p.panel { border-color: #263d63; } table.style1 th { background-color: #7a7465; color: #e9e9e9; } table.style1 td, table.style1 th { border-color: #4f4b40; } table.keyboard th { background-color: transparent; } table.keyboard td { background-color: #e9e9e9; color: #323435; } .test #dev-tools { color: #e9e9e9; background-color: #000; border-color: #263d63; } .admin table.articles td, .admin table.articles th { border-color: #e0e0e0; } .admin table.articles th { background-color: #333; } .admin .unpublished * { background: #151; } /* mobile */ }

@media (prefers-color-scheme: dark) and (max-width: 600px) { .header-nav { background: #1d2f4d; } .header-nav li { border-bottom: 1px solid #263d63; } .header-nav li a:hover, .header-nav li a:active { background: #263d63; } .menu-toggle { color: #e9e9e9; } }

/*# sourceMappingURL=main.css.map */