/* Banner fonts, served from this site (SIL Open Font License; license texts are in fonts/).
   The old choice, Lucida Calligraphy, only exists on Windows. */
@font-face {
  font-family: 'Great Vibes'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/great-vibes-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'EB Garamond'; font-style: italic; font-weight: 500; font-display: swap;
  src: url(fonts/eb-garamond-italic-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body {
margin:0px;
padding:0.5%;
}

A{
text-decoration: none;
font-weight:normal;
margin: 0px;
padding: 0px;
border-style: solid;
border-width: 0px;
cursor: pointer;
}

h1, h2, h3, h4, h5, h6 {
margin: 0px;
padding: 0px;
}

#banner {
font-family:'EB Garamond', Georgia, 'Times New Roman', serif;
font-size: large;;
font-weight:bold;
border-bottom-width: 1px;
border-bottom-style: solid;
border-top-width: 1px;
border-top-style: solid;
border-left-width: 1px;
border-left-style: solid;
border-right-width: 1px;
border-right-style: solid;
padding:10px;
margin:0px;
text-transform:none;
letter-spacing: .1em;
}
#banner a{
border-width: 0px;
}

#banner h1,
#banner h1 a{
font-family:'Great Vibes', 'Lucida Calligraphy', cursive;
font-weight: normal;
}

#content {
margin-left:1%;
}

#links {
width:23%;
margin: 0px;
padding: 0px 5px 5px;
position: absolute;
top: 12px;
right: 1%;
float: right;
}

#links ul {
list-style: none;
padding-left: 0px;
margin: 0px 0px 0px 0px;
}

.blog {
padding: 5px;
margin: 10px 0px 10px 0px;
width: 73%;
}

.blogbody {
font-family:verdana, arial, sans-serif;
font-size:10pt;
font-weight:normal;
line-height:130%;
padding:5px 15px 5px 15px;
text-align:justify;
margin: 0px 0px 0px 0px;
}

.calendar {
align: center;
font-weight: bold;
text-align: right;
margin: 0px 10px 0px 10px;
padding: 0px 10px 0px 10px;
border-style:solid;
border-width: 0px 2px 0px 2px;
}

.calendar a {
font-weight: bold;
text-align: right;
}

.calendar a:hover {
background-color:#ddd;
}

.calendarToday {
border-width:1px;
border-style:solid;
}

.comments-body {
font-family: verdana, arial, sans-serif;
font-size:small;
font-weight:normal;
line-height:140%;
padding:15px 15px 15px 15px;
text-align:justify;
border-style: solid;
border-width:1px 0px 0px 0px;
}

.comments-body input,
.comments-body textarea{
background: url(imgs/input_bg_darkfire.gif);
margin:0px;
}

.comments-head{
font-family:verdana, arial, sans-serif;
font-size: small;
border-width:0px 0px 0px 0px;
border-style: solid;
padding:5px;
font-weight:bold;
text-align:center;
}

.comments-posted {
font-family:verdana, arial, sans-serif;
font-size: x-small;
text-transform: none;
font-weight:normal;
padding-left: 0px;
line-height: 110%;
text-align: right;
}

.copyright {
font-family:Comic Sans MS, Script MT Bold, cursive;
font-size: 75%;
text-transform:none;
/*  float: bottom;*/
}

.defaultstyle{
font-weight: bold;
margin: 0px;
padding: 0px;
cursor: pointer;
color: #c29248;
}

.tealstyle{
font-weight: bold;
margin: 0px;
padding: 0px;
cursor: pointer;
color: #088;
}

.greystyle{
font-weight: bold;
margin: 0px;
padding: 0px;
cursor: pointer;
color: #666;
}

.bluestyle{
font-weight: bold;
margin: 0px;
padding: 0px;
cursor: pointer;
color: fff;
}

.description {
width:73%;
font-family:'EB Garamond', Georgia, 'Times New Roman', serif;
font-style: italic;
font-weight: 500;
font-size: large;
letter-spacing: 0em;
}

.divider{
width: 50%;
align:center;
}

.dividerleft{
width: 50%;
align:left;
}

.postbar{
font-family:verdana, arial, sans-serif;
font-size: small;
border-width:0px 0px 1px 0px;
border-style: solid;
padding: 5px;
margin:0px;
}

.posted{
font-family:verdana, arial, sans-serif;
font-size: x-small;
text-transform: none;
font-weight:normal;
padding-top: 15px;
line-height: 120%;
}

.side {
font-family:verdana, arial, sans-serif;
font-size: 8pt;
font-weight:normal;
line-height:105%;
padding: 3px 3px 3px 3px;
margin: 0px;
text-indent: 0px;
}

.sideitem {
margin: 0px;
font-family:verdana, arial, sans-serif;
padding: 0px 4px 4px 4px;
line-height: 130%;
}

.sideitem A{
margin: 0px;
padding: 0px;
cursor: pointer;
border-top-width: 0px;
}

.sideitem UL{
margin: 0px;
padding: 0px;
}

/*Nothing here for now*/
.sidesubtitle {
}

.sidetitle {
font-family:verdana, arial, sans-serif;
font-size:small;
font-weight:bold;
line-height:110%;
padding:2px;
margin-top:5px;
text-align:center;
text-transform:uppercase;
letter-spacing: .2em;
border-width:0px 0px 1px 0px;
border-style:solid;
}

.title{
font-family:verdana, arial, sans-serif;
font-size:12pt;
text-transform:small-caps;
font-weight:bold;
color:#000;
}
.title a{
border-width: 0px;
font-size: 12pt;
font-variant: small-caps;
font-weight: bold;
color:#000;
}
.title a:link,
.title a:visited{
border-width: 0px;
color:#000;
}
.title a:active,
.title a:hover{
border-width: 0px;
font-style: italic;
color:#000;
}

.nodisplay{
display:none;
}

/* ---- Phones and small tablets ----------------------------------------------------------------------------
   Below 900px the sidebar becomes a panel opened by the menu button (see script.js), posts use the full width,
   and wide content (tables, code, pictures) stays inside the screen. */
/* Wide content stays inside its post box at every screen size instead of running under the sidebar. */
.blogbody img, .blogbody video, .blogbody iframe, .blogbody embed, .blogbody object { max-width: 100%; height: auto; }
.blogbody table { display: block; max-width: 100%; overflow-x: auto; }
.blogbody pre { max-width: 100%; overflow-x: auto; }
.menu { display: none; }
@media only screen and (max-width: 900px) {
  body { padding: 0; }
  #banner { position: relative; padding: 8px 58px 8px 10px; }
  #banner h1 { font-size: 1.6em; margin: 0; }
  #banner h1 img { width: 56px; height: auto; margin-right: 8px; }
  .description { width: auto; font-size: medium; }
  .menu {
    display: block; position: absolute; top: 10px; right: 10px; width: 42px; height: 42px; padding: 0;
    border: 1px solid #fdf2d2; border-radius: 6px; background-color: transparent; cursor: pointer;
    background-image: linear-gradient(#fdf2d2, #fdf2d2), linear-gradient(#fdf2d2, #fdf2d2), linear-gradient(#fdf2d2, #fdf2d2);
    background-size: 22px 3px; background-repeat: no-repeat; background-position: center 11px, center 19px, center 27px;
  }
  .menu[aria-expanded="true"] { background-color: rgba(253, 242, 210, 0.2); }
  #content { margin: 0 1%; }
  #links { display: none; position: absolute; top: 0; left: 2%; right: 2%; width: auto; z-index: 10; box-sizing: border-box; }
  #links.show { display: block; }
  #links .side, #links .sideitem { font-size: 12pt; }
  #links li { padding: 2px 0; }
  .blog { width: auto; }
  .blogbody { padding: 5px 10px; text-align: left; overflow-wrap: anywhere; font-size: 11pt; }
  .blogbody table { overflow-wrap: normal; word-break: normal; }   /* scroll sideways instead of squeezing columns to one letter */
  blockquote { margin: 10px 4px; padding: 0 10px; }
  blockquote.bqlevel2 { margin: 10px 8px; }
}

/* ---- Complete Archives page: years flow into as many columns as fit (up to 4), newest year first ------------- */
.archive-years { columns: 11em 4; column-gap: 1.5em; }
.archive-year { break-inside: avoid; margin: 0 0 1.1em; }
.archive-year h3 { margin: 0 0 0.3em; }
.archive-year ul { list-style: none; margin: 0; padding: 0; }
.archive-year li { padding: 1px 0; text-align: left; }
.archive-count { opacity: 0.75; }