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 {float:left;}
nav details {margin-bottom: 3rem;}
nav details {padding-left:3%;}
nav details summary { margin-top: 10px; position:relative;}
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; 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 !important; width:100% !important;}
    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; }
h1 {margin-top:12px; margin-bottom:12px;}
h2,h3 {margin-top: 8px; margin-bottom:8px;}
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;
}
.tree {
  margin:0;
  /*width:120%;*/
  padding:0;
  font-family: monospace;
  border-right: 1px solid gray;
  user-select:none;
  font-size:0.8rem;
  text-transform: capitalize;
}
.app_search, .app_navbar_search_results {
  width:calc(100% - 1px);
  border-right: 1px solid gray;
  border-bottom: 1px solid gray;
}
.app_navbar_search_results h1, .app_navbar_search_results ul{
  margin:0;
  padding-left:1rem;
}
.app_search_form{
  padding-top:0.35rem;
  padding-bottom:0.35rem;
  margin-left:0.65rem;
  border: transparent;
}

.tree details {
  margin-bottom:0;
  color:black;
  pointer-events: none;
  /*margin-top:0.1rem;*/
}
.tree details a{
  pointer-events: all;

}
.tree details:has(> ul) {
  pointer-events: all;
}
.tree details summary {
  margin-top:0;
}
.tree details > summary {
  list-style-type:none;
  margin-left:0.75rem;
}
.tree details summary::marker,
.tree details summary::-webkit-details-marker {
  display:none;
}
.tree details:has(> ul) > summary::marker,
.tree details:has(> ul) > summary::-webkit-details-marker {
  display:default;
}
.tree details[open]:has(> ul) > summary {
  list-style-type:disclosure-open;
  margin-left:0;
}
.tree details:not([open]):has(> ul) > summary {
  list-style-type:disclosure-closed;
  margin-left:0;
}


.navbar-opened {
  font-weight:900;
  font-size:0.8rem;
  text-decoration: black underline;
}

.tree ul {
  padding-top:0.3rem;
  padding-left: 0rem;
  padding-bottom:0.2rem;
}
.tree li {
  display: block;
  position: relative;
  border-bottom: 1px dashed gray;
  border-left: 1px solid gray;
}
.tree .navbar-dir {
  padding-top:0.4rem;
  padding-bottom:0.4rem;
  padding-left:0.1rem;
}
.tree .navbar-file {
  padding-top:0.4rem;
  padding-bottom:0.4rem;
  padding-left:1.3rem;
}
.tree li:first-child {
  border-top: 1px solid gray;
}
.tree li:last-child {
  border-bottom: 1px solid gray;
}
.tree summary {
  cursor: pointer;
}