/* hypertexthero.css */

/* =colors ----- */

html[data-theme='dark'] {
  --bg: #241926; /* dark wine */
  --bgimg: url("/img/bg-200x200-transparent.png"); /* Thank you https://www.noisetexturegenerator.com/ */
  --color-text: #ecd7dd;
  --color-link: #99dcfc; /* yellow #fed309   pink #ffa5c3 */
  --color-link-visited: #f59c13;
  --color-link-border: #76515f;
  --color-link-hover: #f1c4de;
  --color-link-bg-hover: #7b5262;
  --color-notebg: rgba(227, 115, 94, 0.35);
  --quiet: #ba7d8d;
  --color-shadow: rgba(255, 255, 255, 0); /* transparent for now */
  --color-text-shadow: rgba(255, 255, 255, 0.3);
  --logo: url(/img/hypertexthero-logo-light.svg) no-repeat 0 0;
}

html[data-theme='light'] {  
  --bg: #e6ddd7; /* light overcast */
  --bgimg: url("/img/bg-200x200-transparent.png");
  --color-text: #111;
  --color-link: #0074BD;
  --color-link-visited: #585995;
  --color-link-border: #c7c7c7;
  --color-link-hover: #ca2c00;
  --color-link-bg-hover: #ffc;
  --color-notebg: rgba(255, 241, 118, 0.35);
  --quiet: #888;
  --color-shadow: rgba(0, 0, 0, 0); /* transparent for now */
  --color-text-shadow: rgba(0, 0, 0, 0.3);
  --logo: url(/img/hypertexthero-logo-dark.svg) no-repeat 0 0;
}

/* Dark/Light theme switcher https://hypertexthero.com/dark-mode-website-theme-switcher-localstorage/ */
a#switch {color:var(--color-link);}
a#switch:hover {cursor:pointer;}
.missing {color:#E3735E !important;} /* for wiki links */

/* =layout =links =general ======================== */

body {font-family: verdana, sans-serif; padding:10px 0 200px; background-color: var(--bg); background-image: var(--bgimg); color: var(--color-text);}

body#error {margin:0; padding-top:0;}

a {text-decoration:none; padding-bottom:0; border-bottom:2px solid var(--color-link-border);}
a:link {color: var(--color-link);}
a:visited {color: var(--color-link);}
a:hover, a:active {cursor:pointer; color: var(--color-link-hover); background: var(--color-link-bg-hover);}

.underline {border-bottom:1px solid var(--color-link-border) !important;}
.nounderline {border:0 !important;}

/* 100 ms threshold http://stackoverflow.com/a/2547903 */
:target {background: rgb(255 0 255 / 0.2) !important; border:rgb(255 0 255 / 0.1) 2px solid; border-radius:5px; padding:15px;}

#wrapper {text-align:center; overflow: hidden;}
#page {width:970px; text-align:left; margin:0 auto;}
body#shop #page, body#music #page, body.wide #page {width:100%;}

body#error #page {padding:20px 0 100px;}

#header {margin:0 38px 0; position:relative;}
blockquote {line-height:1.5em; padding-left:1em; margin-left:0; border-left:2px solid var(--color-link-border);}
details {padding-left:12px; border-left:solid 1px var(--color-link-border);}
details:hover {cursor:pointer;}
p.breadcrumbs {font-size:14px; color: var(--color-link-border);}
body.detail #header p.breadcrumbs {bottom:20px;}
body#archive #header, body#goals #header, body#stream #header, body#shop #header, body#recently #header {height:25px; padding:0 0 60px;}
p.breadcrumbs a {font-weight:normal;}

a.homelink {
  margin:0 auto;
  display:block;
  width:152px; 
  height:63px; 
  background: var(--logo); 
  text-indent:3000rem; 
  border:none; 
  clear:both;
  }
a.homelink:hover, a.homelink:active {filter:drop-shadow(1px 2px 2px #fc0);}

#logo img {width:112px; float:right; margin:0 -25px -25px 0;}
#logo img, .rotating {animation: rotate 120s linear infinite;}
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* =home =work ======================== */

#introduction {font-weight:normal; padding:100px 0 0 0; max-width:22em !important;}

div.column {width:155px; float:left; margin:0 26px 0 0;}
div.column h2 {text-align:center; background: url(/img/parachute.gif) no-repeat 35px 0; margin:20px auto 15px; width: 155px; padding:40px 0 0 10px;}

h2#etcetera {background-position: 35px 0;} 
h2#identity {background-position: 35px 0;} 
h2#print {background-position: 32px 0;} 
h2#websites {background-position: 35px 0;} 
h2#writing {background-position: 30px 0; font-style:italic;} 
h2#writing a {margin:-50px auto 20px; border:0; padding:50px 0 0; display:block;}
h2#writing a:hover {text-decoration:underline; background:none;}

#latest {margin:-15px 0 0;}
#latest ul li {padding:0.5em 0; font-size:14px;}
ul.thumbs {list-style:none;}
.intro {max-width:500px;}
ul.thumbs li {
  margin-bottom:40px; 
  margin-right:20px; 
  width:auto;
  text-align:center;
  max-width:330px !important; 
  vertical-align:center; 
  display:inline-block;
  overflow:hidden;
}
/*ul.thumbs li:hover img {
    -webkit-transition: all 0.1s ease;
       -moz-transition: all 0.1s ease;
         -o-transition: all 0.1s ease;
        -ms-transition: all 0.1s ease;
            transition: all 0.1s ease;
    border-radius: 100px;
  }*/
.large {font-size:1.25em;}
.larger {font-size:1.5em;}
.verylarge {font-size:4em;}
li.nopicture {height:96px;}
ul.thumbs img {margin-bottom:0.5em;}

table {border:0; margin-bottom:15px;}
td {padding:0 1em 0 0; line-height:1.8em; border:0 solid #eee;}
th {border-bottom:0px solid #eee; padding:0 1em 0 0; font-weight:normal; font-size:14px; letter-spacing:0.1em; line-height:1.6em; text-transform:uppercase;}
th {background-color:var(--color-link-bg) !important;}
th:hover {cursor:pointer !important; background-color:var(--color-link-bg-hover) !important;}

body.workhome #page {width:100%;}

/*.aeroplanebimini {background:url(/img/AeromarineAirwaysHighballExpresstoBimini.gif) no-repeat; background-position:left 0px; text-indent:-2000em; display:block; width:272px; height:125px; border:0; margin-bottom:0; margin-left:-15px;}
*/
#content {padding-left:226px; margin-top:2.8rem;}
body#home #content {padding-top:40px;}
#sidebar {float:right; width:296px; font-size:14px; margin:20px;}
#picture {float:left; margin:0 0 1em 0;}
#picture p {max-width:400px;}

div.sidebox {padding:5px 18px 7px 18px; margin:0 25px 15px; box-shadow: 1px 2px 5px 2px var(--color-shadow); border-radius:10px; max-width:40% !important;}
.shadow {text-shadow: 1px 1px 1px var(--color-text-shadow) !important;}

div.sideboxleft /*to be used together with .sidebox*/ {margin-left:-19px;}

/* =maxwidth */
#content h1, #content h2, #content h3, #content p, #content li, #content dd, #content dt {max-width:35em;}
body.wide #content h1, body.wide #content h2, body.wide #content h3, body.wide #content p, body.wide #content li, body.wide #content dd, body.wide #content dt {max-width:100%;}
.monospace {font-family:courier, "courier new", monospace; font-size:16px !important;}
#content h1 {max-width:600px;}

/* =nav ======================== */

div.nav {float:left; clear:both; text-align:right; padding-top:2.1rem;}
div.nav h1 {margin:0;}
div.nav ul {list-style:none; margin:-10px 0 30px; padding-left:0;}
div.nav a {border:0; font-weight:normal;}
div.nav li {line-height:32px;}
div.nav li a {padding:2px;}

body#home a.nav-home {color: var(--color-text);}

body#home a.nav-home,
body#archive a.nav-archive,
body#linked a.nav-linked,
body#archive a.nav-archive,
body#tags a.nav-tags,
body#shop a.nav-shop,
body#contact a.nav-contact,
body#about a.nav-about,
body#brief a.nav-brief,
body#recently a.nav-recently,
body#now a.nav-now,
body#goals a.nav-goals,
body#stream a.nav-stream,
body#archive a.nav-pc,
body#music a.nav-music
{color: var(--color-text); font-weight:normal;}

/* =work ======================== */

div#description {width:296px; float:left; padding-left:43px;}

/* =logbook ======================== */

body#logbook.detail #header {background:none; padding-bottom:40px;}
body#logbook #header p strong a {font-style:italic; font-size:22px; line-height:14px;}
#content h1 a {border-bottom:none; color: var(--color-text);}
#content h1 a:hover {color:var(--color-link-hover);}
body#logbook #content h2 {font-size:110%;}

/* =archive ======================== */

body#archive #content h2.archivemonth {margin:2.5em 0; font-weight:400;}
body#archive #content p.archiveday {line-height:1em; margin:0 0 -1em 1em !important;}
body#archive #content p.archivetitle {line-height:1.2em; position:relative; padding-left:2.8em;}

/* =misc ======================== */

button {font-size:16px;}
form#search {padding-bottom:15px;}
form#search button, form#search input {border:1px solid var(--color-link-border); padding:6px; font-size:16px;}
form#search input {font-weight:bold; background:rgba(255,255,255,0.4); color:var(--color-text);}
form#search button {padding:6px 10px; background:rgba(255,255,255,0.4); color:var(--color-text);}
form#search button:hover {cursor:pointer !important;}
body#about #header, body.detail #header {background:none;}
body#linked #header, body#linked #header {padding:0 0 85px !important;}
textarea {width:100%; max-width:100%; min-height:1rem; font-size:16px; padding:10px;}
.quiet {color:var(--quiet) !important;}
.quieter {color:var(--color-link-border) !important;}
pre.quieter {background:0 !important;}
.quiet a, .quieter a {font-weight:normal;}
.borderless {border:0;}
.normal {font-weight:normal;}
.capitalize {text-transform:capitalize;}
.dark {color: var(--color-text);}
.totop {padding:1em; float:right; border:0;}
/* http://www.bymichaellancaster.com/blog/fluid-iframe-and-images-without-javascript-plugins/*/
.fluidmedia {position:relative; padding-bottom:56.25%; /* proportionvaluetoaspectratio16:9(9/16=0.5625or56.25%) */ padding-top:5px; height:0; overflow:hidden; margin-bottom:15px;}
.fluidmedia iframe {position:absolute; top:0; left:0; width:100%; height:100%;}

/* =typography, =paragraph ======================== */

p.adminmenu {font-family:monospace; position:absolute; top:0; left:0; z-index:100; padding:1em 0;}
p, label, dd, details, summary {margin:0 0 15px; font-size:18px; line-height:27px;}
strong {font-weight:bold;}
i, em {font-style:italic;}
i i, em em, figcaption em, figcaption i {font-style:normal;}
dt {margin:0 0 0.5em; line-height:1.6em; font-size:18px; padding:0 !important; font-weight:bold;}
dt a {font-weight:normal;}
dd {margin:0 0 5em 0;}
body.detail dd {margin-bottom:0 !important;}
dd p {color: var(--color-text);}

dl.linkedlist {margin-bottom:3em;}
body#home dl.linkedlist {margin-top:3.8em;}
body.detail dl.linkedlist {margin-bottom:2em;}
li {font-size:18px; line-height:27px;}
.unstyled, .inlinelist, .inlinelistnoborder {list-style-type:none !important; margin-left:0 !important; padding-left:0 !important;}
.loweralphalist {list-style-type:lower-alpha;}
.inlinelist li {display:inline-block;}
.inlinelist li a, .inlinelinks a {padding:2px 7px; border:solid 1px var(--color-link-border); line-height:35px; border-radius:2px;}
.inlinelinks a {padding:0 7px !important; line-height:1em !important;}
.inlinelist li a:visited {color:var(--color-link-visited) !important;}

/*=todo: latest .inlinelist > li:first-of-type a {border:dotted 3px var(--color-link-border);}*/


ul ul, ol ol, dd ul, dd ol, blockquote ol {margin-left:1em !important;}
dd ul {list-style:square;}
#content ul, #content ol {margin-bottom:1em; margin-left:0; padding-left:1em; list-position:outside;}
#content ul {margin-left:1em;}
ol ol {list-style:lower-alpha outside; margin-left:1em;}
ol ol li {margin-left:1.4em;}
ol ol ol {list-style:lower-roman outside; margin-left:1.5em;}
ol ol ol li {margin-left:1.4em;}
blockquote ul, blockquote ol {margin-left:1em;}
.extrapad {padding:0.25em 0.5em;}
.maxwidth {max-width:100% !important;}
a.plink {color:var(--color-link-border); text-decoration:none; font-size:15px; padding:0.5em 0.75em; border:0; font-weight:normal;}
body.detail a.plink {color:inherit; font-weight:normal; font-size:16px; padding:0; border-bottom:1px solid var(--color-link-border);}
dt:hover a.plink, li:hover a.plink {color: var(--color-link);}
a.plink:hover {color: var(--color-text);}

h1, h2, h3, h4, h5, h6 {font-weight:bold;}
h1 {font-size:46px; line-height:50px; margin:0; font-family:"trattatello", verdana, sans-serif; font-weight:bold;}
h1 small {font-weight:normal;}
#header h1 {font-size:18px; line-height:27px; max-width:40em; font-family:verdana, sans-serif;}
h2 {font-size:23px; line-height:27px; margin:1.25em 0 0.5em;}
h2 a {color: var(--color-text) !important;}
body#about h2 {font-size:1.5em;}
h2.dateline {margin:5em 0 3em; text-transform:uppercase; font-size:0.9em !important; letter-spacing:0.2em; font-weight:normal;}
h2.datelinearchive {font-weight:normal;}
h3 {font-size:19px; margin:1em 0 0.8em; line-height:1.4em;}
h3 span.normal {font-style:italic;}
h3.posted {font-size:14px; font-style:italic; font-weight:normal; margin-top:0em; text-transform:normal; letter-spacing:normal;}
body#about h3 {font-size:1em !important; margin:1em 0 0.3em;}
.small, small {font-size:0.9em;}
.smaller {font-size:0.8em !important;}
.noborder {border:none !important;}
.nomarginlist {margin-left:0 !important; padding-left:0 !important; list-style-type:none;}
pre {margin:1em 0; padding:1em; overflow-wrap: anywhere !important; hyphens: auto; background: var(--color-notebg) !important; color:var(--color-text) !important; border-radius:9px;}
pre, code, kbd, samp, tt {font-family:monaco, consolas, courier, "courier new", monospace; font-size:1em; border:0 !important;}
abbr {border-color:var(--color-link-border);}
.note, mark {background: var(--color-notebg); color:var(--color-text) !important;}
kbd, code {background: var(--color-link-bg-hover); padding:0.15em; border:1px solid var(--color-link-border); border-radius:10px;}
pre.articlebreak {padding:0; margin:8em 0; font-family:courier, monospace; color: var(--color-link-border); background:none !important; border:0 !important;}
strong, b {font-weight:600;}
p.datelineresults {margin:2em 0 0;}
div.footnote {font-size:0.9em;}
div.footnote hr {margin:3em 0 1em; width:8em;}
img {border:0; display:block; margin-bottom:15px;}
.rounded {border-radius:10px;}
figure img {margin-bottom:0;}
.inlineicon {display:inline; line-height:0; padding:0; vertical-align:middle; margin:0; max-height:24px !important; max-width:24px !important; background:transparent !important;}  
.inline {display:inline !important;}
sup, sub {line-height:0;}
hr {color: var(--color-link-border); background: var(--color-link-border); max-width:32em; height:1px; border:none; margin:1.5em 0 1.5em;}
div.clear {clear:both !important;}
.caps {text-transform:uppercase; font-size:0.85em; letter-spacing:0.05em; line-height:0;}
figure {padding:0 15px 0 0; margin:0 0 15px;}
figcaption, p.caption {font-size:16px; font-style:italic; padding-top:5px; line-height:24px; margin:0 0 1em; max-width:550px;}
.pull-right, .floatright {float:right; margin:10px 0 10px 15px;}
.pull-left, .floatleft {float:left; margin:10px 15px 10px 0;}
.alignright {text-align:right;}
.pull-right img, .floatright img, .pull-left img, .floatleft img,
img.pull-right, img.floatright, img.pull-left, img.floatleft
 {margin-bottom:0;}
.monospace {font-family:monospace;}
.titlecase {text-transform:capitalize;}
.center {text-align:center;}
.hide {display:none;}
a.edit {color:#afa99f;}
a.browserid-login {color:#fafafa; border:0;}

#footer {clear:both; padding:0.5em 0 0 243px;}
#footer p {margin:0 0 2em; max-width:42em; padding-top:1em;}
p.paging a {font-weight:normal !important;}

/* =responsive structure ======================== */

img {max-width: 100% !important; height: auto !important;}
@media (max-width: 960px) {
    #page {width:auto;}
    div.sidebox {float:none; max-width:100% !important;}
    body#home #content, body#contact #content
    {padding-top:2em;}
    p.aeroplane a {margin:0 0 1.5em;}
    #latest {width:auto; clear:both; text-align:left; float:none;}
    body#home #header {padding-bottom:3em;}
    }
@media (max-width: 850px) {
    /* no transitions or animations on mobile */
    * { 
     -webkit-transition: none !important;
     -moz-transition: none !important;
     -o-transition: none !important;
     -ms-transition: none !important;
     transition: none !important;
     animation: none !important;
    }
    * {-webkit-animation:none !important; -moz-animation:none !important;}
    
    div.nav ul {margin-bottom:0;}
    #page, #latest {width:auto;}
    div.column {margin:0 10px 0 0;}
    p.scroll, pre.articlebreak {display:none;}
    div.nav {clear:both; padding-bottom:30px; padding-top:0; text-align:center; display:block; width:99%;}
    div.nav li {display:inline-block; margin:5px;}
    div.nav li a {padding:5px;}
    #logo img {
      margin:40px auto -25px !important;
      float:none;
      -webkit-animation: none;
      animation: none;
      }
    #sunbg {
      margin:0 auto !important;
    }
    div.nav h1 {margin:0 0 15px;}
    .tip {display:none;}
    body#error #page {background:none;}
    h1 {clear:both;}
    #page {width:auto;}
    #header {margin:0 20px 0;}
    #content {width:auto !important; padding-left:15px; padding-right:15px;}
    body#home #content {width:auto !important; padding:0 15px !important;}
    #content img {width:100%; height:auto;}
    #content img.floatleft, #content img.floatright, 
    #content img.pull-left, #content img.pull-right {max-width:200px !important;}
    #content img.thumbincontent, #content img.smallimg {width:auto;}
    div#description {padding-left:0;}
    #footer {padding-left:20px; padding-right:20px;}
    iframe, pre {width:100% !important; overflow:hidden; max-width:550px !important;}
    ol {list-style-position:inside !important;}
    }
 @media (max-width: 480px) {.pull-right, .pull-left {float:none; margin:0 0 15px; padding:0;}}