html {
	-webkit-text-size-adjust:100%;
	text-size-adjust:100%;
}
/**:focus {outline:none}*/
::selection { background: black; color: white;}
body { font-family: serif;  word-wrap: break-word; font-size: 1rem; }
article {overflow: hidden; margin: auto; padding:1rem; margin-bottom: 3rem; }
article .article-main { overflow:visible; max-width: min(800px, 98vw); margin:auto; }
nav details {float:left; margin-bottom: 3rem;}
nav details {padding-left:3%;}
nav details summary { margin-top: 10px; position:relative; width:100px;}
nav a, header a { text-decoration: none ; color: inherit; }
header h1 span { margin-left: 1em; font-size: 1.2rem; font-style: italic; }
body > nav {padding-right: 1vw; min-width: 16em; max-width:20%;}
nav ul { list-style-type: none; list-style-position: outside; padding-left: 0;  }
nav li ul { padding-left: 0.6em }
footer {clear:left;}
footer { width:100%; position: fixed; bottom:0; }
img {
	object-fit:contain;
	max-width: 100%;
	max-height: 100%;
}
input[type="submit"] {
	padding: 5px; 15px;
	background-color: #eee;
	border: 0px none;
	border-left:5px solid #ddd;
	cursor:pointer;
}
input[type="submit"]:hover {
	background-color:rgb(0, 102, 204);
	border-left:5px solid rgb(0, 142, 234);
	color: white;
}
@media (max-width:600px) {
    nav { !clear:left; }
    article { clear:left; padding-top:0; }
    nav > details { margin-bottom:unset; }
    header h1 span { display:block; margin-left: 1em; font-size: 0.9rem; font-style: italic; }
}
/* cut here to leave vanity behind */
/*body { margin:0; padding: 0; font-family: Helvetica, Verdana, Arial, 'Liberation Sans', FreeSans, sans-serif; }*/
body { margin:0; padding:0;}
a > a { text-decoration-style: dotted; color: black; }
a:hover { text-decoration: none; color:white; background-color:black; }
.thisPage { color: black; text-decoration: dotted; font-weight:bold; }

/* header and top bar */
header nav { background-color: var(--sidebar-bg-color); color: var(--sidebar-fg-color); padding: 0.3em; border-bottom: 2px solid black;}
header h1, .top_bar { background-color: var(--header-bg-color); color: var(--header-fg-color); margin: 0; border-bottom: 2px solid black; font-weight: normal; padding: 0.25ex; }
header a, .top_bar a{ text-decoration: none; color: white; background-color:unset; }
header a:hover, .top_bar a:hover { text-decoration: none; color: white; background-color:unset; }
.top_bar { border-bottom: 1px solid white;}

/* sidebar */
body > nav > details > div a { text-transform: capitalize;} 

/* main copy */
article { padding-right:5%;}
article pre { font-size: 80%; word-wrap: break-word; object-fit:contain; max-width: 100%; white-space: pre-wrap; background-color: #ddd; padding:10px;}
textarea {max-width:100%; width:99%;}
/* footer */
footer{ color: white; background-color: black; padding:0.3em;}
footer a { color: inherit; text-decoration: none;}
/* tables */
table { border: 1px solid rgba(128,128,128,0.5); padding: 0; }
th { color: white; background-color: rgb(100,135,220); }
tr:nth-child(odd) { background-color: rgba(128,128,128,0.1)  }
/* utility */
canvas {object-fit:contain; width:40%; height: auto;}
ul.dir-list > li {list-style:none;}

/* img gallery */
.gallery {
  display:flex;
  margin: 0 auto;
  transition: transform .2s;
}
.gallery:hover {
  transform: scale(1.25);
}

/* Colour scheme */
:root {
  --sidebar-fg-color: #000000;
  --sidebar-bg-color: #ffffff;
  --header-bg-color: #000000;
  --header-fg-color: #ffffff;
}

.article-main > ul {
  display: contents;
}

/* Goralog app */
.goralog-article-box {
  padding-top:0.5rem;
  display:flex;
  flex-wrap:wrap;
  justify-content: space-between;
  padding-bottom: 0.5rem;
  border-top: black 1px solid;
}

.goralog-date {
  order: 2;
  flex: 0 0 10%;
}
.goralog-title {
  display: list-item;
  list-style: upper-roman;
  margin-left:3%;
  order: 1;
  flex: 0 0 86%;
}
.goralog-article-description {
  margin-left:5%;
  order: 3;
  flex: 0 0 83%;
}

.bible-book-list {
  display: inline-block	
}
.bible-verse-list {
  list-style: none;
}