:root {
  --smalltext: .75em;
  --greyborder: 2px solid #bbb;
}

body {
  background: #ffe;
  padding-left: 24px;
  padding-right: 24px;
  font-family: Verdana,sans-serif;
  max-width: 1600px;
  margin: 0 auto;
  font-size: 95%;
  color: #333;
  line-height: 1.5em;
}

body > nav:first-child {
  margin: 0 -24px 1em;
  padding: 8px 0;
  border-bottom: 1px #333 solid;
  text-align: center;
  position: sticky;
  top: 0;
  background: rgba(255,255,255,.8);
}
html.smoothscroll {
  scroll-behavior: smooth;
}
.darkpage { background-color: #001; }
.darkpage p,
.darkpage li { color: #aaa; }
.darkpage h1 { color: #669; }
.darkpage .breadcrumbs a:hover { color: #666; }
.darkpage main { width: 100%; }
.darkpage main img,
.darkpage main video { width: 100%; }
.darkpage > nav:first-child { background: inherit; }

h1, h2, h3, h4 { color:#336; position: relative; }
h1 { font-size: 20px; margin-top: 12px; margin-bottom: .75em; }
h2 { font-size: 18px; margin-top: 14px; margin-bottom: 6px; }
h3 { font-size: 14px; margin-top: 10px; margin-bottom: 4px; }
h4 { font-size: 11px; margin-top: 4px;  margin-bottom: 2px; }
h1.subpage { font-size: 1.5em; margin-bottom: 1em; }
.readable { max-width: 67em; margin: 0 auto; }
.textblock h1 { margin-top: 1em; font-size: 1.25em; line-height: 1.25em }
.textblock.story h2 { font-size: 1em; line-height: 1.15em }
.breadcrumbs { font-size: 1em; font-weight: bold; padding-bottom: .75em; border-bottom: #bbb solid 2px; }
.breadcrumbs a { color: inherit; }
.breadcrumbs h2 { display: inline-block; font-size: inherit; color: inherit; margin: 0; }
.toplink { text-align: right; letter-spacing: .2em; }
.toparrow {
  position: absolute;
  top: 4px;
  right: 4px;
  font-weight: bold;
  font-size: 1.5rem;
  color: #666;
  text-decoration: none;
}
.toparrow:hover {
  text-decoration: underline;
}

hr { border-color: #bbb; border-style: solid; } 
img { border: none }
sup { font-size: .6em; color: #336; line-height: normal; }
sup:hover { background: #ccc; }
dfn, dfn.info { border-bottom: 1px #666 dotted; cursor: help; font-style: italic; }
dfn.info { font-style: normal; }
p, ul { line-height: 1.75em; }
p + ul { margin-top: 0; }
ul + p { clear: left; }
dl ul { padding-left: 0; }
dl.listbox dt { margin-bottom: .75em; }

.nolinkwrap a { text-wrap: nowrap; text-decoration: none; color: #888; margin-left: 4px; }
.nolinkwrap a:hover { color: #333;  }
.nolinkwrap a::before { content: " •"; margin: 0 4px; text-wrap: wrap; color: #ccc; }
.nolinkwrap a:first-child::before { margin-left: -4px; }
.nolinkwrap a:hover::before { text-decoration: none; color: #66b; }

.border-top {
  border-top: var(--greyborder);
}
.clearleft {
  clear: left;
}
.img_deflist dt {
  text-align: center;
  border-top: var(--greyborder);
  padding-top: 0.5em;
}
.img_deflist dd {
  display: flex;
  flex-direction: column;
  margin: .5em 0 0 0;
  font-size: .9em;
}
.img_deflist dd:last-child {
  border-bottom: var(--greyborder);
  padding-bottom: 1em;
}
.img_deflist figure,
.img_deflist figure img {
  margin: 0;
  text-align: center;
}
.img_deflist figure {
  margin-right: .5em;
}
.img_deflist figure img {
  border-radius: 50%;
}
.img_deflist figcaption {
  font-size: .75em;
}
.img_deflist blockquote {
  position: relative;
  margin: .5em 1em .5em 3.75em;
  font-style: italic;
}
.img_deflist blockquote::before {
  content: "“";
  position: absolute;
  left: -.75em;
  top: .25em;
  font-size: 4em;
  font-family: 'Times New Roman', Times, serif;
  color: #669;
}
.clear { clear: both; }
.centred { text-align: center; }
.blockcentred { margin: 0 auto; }
.paddingtop { padding-top: 1em; }
.nospacetop { margin-top: 0; padding-top: 0; }
.spacetop { margin-top: 1em; }
.morespacetop { margin-top: 2em; }
.bigspacetop { margin-top: 4em; }
.nospace { margin-top: .75em; margin-bottom: 0; }
.story { font-family: Times New Roman,Times,Palatino; letter-spacing: 0.02em; font-size: 1.6em; line-height: 1.65em; }
.story cite { font-family: Times New Roman,Times,Palatino; font-size: inherit; }
.caption { color: #999; font-size: 0.9em; text-align: center; }
.quotebox {
  clear: both;
  overflow: auto;
  background: #fff;
  padding: 0 1em;
  border: 2px solid #bbb;
  border-radius: 6px;
  position: relative;
}
div.quotebox { padding: 1em 1em 0.5em; margin-bottom: 1em; }
ul.quotebox { padding: 1em 1em 1em 2.5em; line-height: 1.5em; list-style-type: square; }
.quotebox > p:first-child { margin-top: 1em; }
h1 + .bodyspace + .quotebox { margin-top: 1em; }
.quotebox > h2:first-child { margin-top: 0; }
dl.quotebox { padding-bottom: 1em; }
.quotebox > .anchor { position: absolute; top: -2.5em; height: 1px; }
h2, h3 { position: relative; }
h2 > .anchor, h3 > .anchor { position: absolute; top: -2.5em; height: 1px; }

/* art page only so far */
.previewimg img,
img.previewimg {
  display: block;
  padding: 0;
  float: left;
  height: auto;
  margin: 6px 1em 2px 0;
  border: 2px solid #bbb;
  transition: border .25s;
}
a.previewimg + p {
  margin-top: auto;
}
.previewimg img:hover,
img.previewimg:hover {
  border-color: #fff;
}
/* art page only so far */

.quotelist { padding-bottom: 1em; } /* graphic-programming */
.imgleft { float:left; margin: .5em 1em .5em 0; }
.imgright { float:right; margin: .5em 0 .5em .75em; }
.imgleft.spacetop,
.imgright.spacetop { margin-top: 1em; }
.bordered { border: 1px solid #666; }
figure.imgleft figcaption,
figure.imgright figcaption {
  text-align: center;
  font-size: .75em;
  font-weight: bold;
  padding-bottom: .25em;
  border-bottom: var(--greyborder);
}
.floatright { float: right; margin: 0 0 1em 1em; }
.floatleft  { float: left; margin: 0 1em 1em 0; }

.rightcolrt p { font-size: 90%; margin-top:0; }
.rightcolrt p cite { font-size: inherit; }
.leftcolrt p { margin-top :0; }
.updated { font-size: smaller; margin-top: 1.5em; text-align: right; }

.slogans {
  clear: both;
  padding-top: 1em;
  margin: 1em 0;
  border-top: var(--greyborder);
  text-align: center;
}

h1 a:link, h2 a:link, h3 a:link, h4 a:link, dl a:link { color: #336; }
h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, dl a:visited { color: #669; }
dt { font-weight: bold; font-size: 1.15em; margin-top: 1em; }
dt a { font-weight: bold; }

.rightcolrt h2:first-child, /* (replace #top) H2s to align if at the top of a right div */
#top { margin-top: 4px; }

.smalltext { font-size: var(--smalltext); color: #333; line-height: 1.5em;}
.smalltext cite { font-size: inherit; }
.author { margin-top: 0; text-align: right; }

.references { font-size: var(--smalltext); }
.references li { margin-bottom: .75em; }

.indented70 { margin: 0 70px; }

/* ------------ GALLERIES ------------ */
.gallery { text-align: center; background: #eee; }
.gallery .thumbs a:hover { background: transparent; }
.gallery .thumbs a img { margin: 6px; border: 2px #ccc solid; }
.gallery .thumbs a img:hover { border-color: #999; }
/* needed?: */
.gallery p a.here { background: #ddd; }

/* ------------ /cube-app/magic-cube.html ------------ */
.thumbnails { display: flex; justify-content: center; flex-wrap: wrap; margin: .25em auto 0; padding: 0; list-style-type: none; }
.thumbnails li { display: inline-block; padding: 8px 0; background-color: white; margin: 0 6px 6px; width: 84px; text-align: center; border: 1px solid #ccc; }
.thumbnails li:hover { background-color: #ffc; border-color: #666; }
.thumbnails li span { display: block; font-weight: bold; }
.thumbnails li span a:link,
.thumbnails li span a:visited { color: #333; text-decoration: none; }
.thumbnails li span a:hover { background-color: transparent; }
.thumbnails figure { margin: 2%; }
.boxedfigure figure { min-width: 74px; padding: .5em; background: #fff; text-align: center; border: 1px solid #333; transition: all .25s; }
.boxedfigure figure a { text-decoration: none; }
.boxedfigure figure:hover { background: transparent; }
.smallcaption figcaption { font-size: var(--smalltext); }

/* ------------ /cube-app/order*.html ------------ */
#container { width: 960px; margin: 1em auto 0; } /* in 2col.css? */
#leftcol { width: 480px; float: left; }
#rightcol { width: 480px; float: left; padding-top: 5em; }
.cubeapp { background: url(/images/stars.jpg); }
#leftcol applet span { font-weight: bold; }

/* MAKE 630px to match 2-col styles? */
@media screen and (min-width: 700px) {
  /* for sketches: */
  .darkpage main,
  .darkpage main img,
  .darkpage main video { max-width: 600px; }
  .narrow main { max-width: 400px; }
  /* for author pages: */
  .img_deflist dt { text-align: left; }
  .img_deflist dd { flex-direction: row; }
}
@media screen and (min-width: 1023px) {
  /* for sketches - make site-wide: */
  .gallery .thumbs a img { margin: 10px 20px; border: 2px #ccc solid; }
}