/* commentary.css: specific styles for commentary pages, to be linked after common.css */

/* Hide unused buttons */
 .commentary #btn_thai {display:none; } 

/* Override default font for UI language */
.commentary.english * {font-family: SengBuhan;}

/*

#sectionMenu .scroller {background-color: #003820;}
#sectionMenu div.scroller {width:30em; max-width: 100vw;}
#sectionMenu.menu ul {overflow-x: hidden;}
#sectionMenu.menu ul li {text-align: left; padding-left: 1.5em; height:auto; }
#sectionMenu.menu ul li.topic {color: #008; font-size: 1.2em; font-weight:normal; background-color: #ffffc0; padding-left:2.5em; white-space: nowrap; overflow: hidden; text-overflow:ellipsis;}
#sectionMenu.menu ul li.sectionhead {border-top:1px solid #080; padding-left:0.5em; } 
#sectionMenu.menu ul li.sectionhead span {color: #fff; text-align:center;}

#sectionList li.ot, #sectionList li.nt, #sectionList li.more {display:none;}

.topics_ot #sectionList li.ot, .topics_nt #sectionList li.nt, .topics_more #sectionList li.more {display: block;}
*/

.commentary.xref #book {max-width:744px;}
 
/* Styles for Commentary index page */
 .commentary #book.intro {margin:0 auto; max-width: 1000px;}
 .commentary #book.intro p.right {font-style:italic; text-align:right;}

 .commentary #book.appendix h2 {text-align:left; margin-bottom:0; padding-bottom:0; color:#600000;}
 .commentary #book.appendix h3 { margin-top:0; padding-top:0; margin-left:0;}
 
 .commentary #book.appendix div span {font-size:0.9em; font-weight: bold; color: #800000; cursor:pointer; margin-left:2em;}
 .appendix div span:hover {text-decoration:underline;}
 
 /* Styles for Commentary text pages */  
.commentary #book {max-width:1240px; padding: 0; }
.commentary #book h1 {font-size:2em;font-weight:bold; margin: 0.4em 0 0 0;} 
.commentary #book h2 {font-size:1.4em;font-weight:bold; margin: 0.2em 0; text-align:center; } 
.commentary #book h3 {font-size:1.2em;font-weight:bold; margin: 0.5em 0 0 0.5em; clear:both;} 
.commentary #book p   {margin-left:0.5em; text-indent:1.5em; margin-bottom:0.5em; color: #200000;}
  
/* Formatting for Commentary images */
.commentary #book img {width:90%;margin-right:5%; margin-left:5%; border: 1pt solid #ccc; max-width:1000px; }
.commentary.wide #book img.right {float:right; width:50%; margin: 0.5em 1% 0 2%;} 
.commentary.wide #book img.left {float:left; width:50%;} 
.commentary.wide #book img.full {width:80%; margin-left:10%;}

.commentary  #body div.lbctitles {margin-top:0.2em;padding-top:0; padding-left:0;margin-left:2.5em;}
.commentary  #body ul.pdflist {list-style-type:none; margin-top:0.2em; }
.commentary  #body ul.pdflist * {margin: 0;}
.commentary  #body ul.pdflist img {position:relative; top:16px; margin-left:1.5em; margin-right:0.5em;}
.commentary  #body h3.dlpdf {margin: 1.5em 0 0 1.5em;}

 .lbccaption div {display:none;}
 .lbccaption.expand div {display:block;}
  
 /* Style for index lists (p361, 362) */
div#book div.listref span {
  padding:0 2px; margin-left:0em; 
  color:#600; 
  background-color:transparent;
  font-size:1.1em;  
  font-weight:normal;
  cursor:pointer; 
  white-space:nowrap;
  -webkit-user-select:none;
  pointer-events: none;
}

div#book span.listref {  
  padding:0 2px; margin-left:0em; 
  color:#600; 
  background-color:transparent;
  font-size:1.1em;  
  font-weight:normal;
  cursor:pointer; 
  white-space:nowrap;
  -webkit-user-select:none;
  }

div#book span.listref:hover {
  background-color: #eee;
  }                         

div#book span.listref.active {
  text-decoration:underline;
  }
  
/* Styles for pre-formatted HTML */  
div.history table {border-collapse:collapse; width:auto; margin: 0.5em auto;}
div.history table th {border-bottom: 2px solid #800;} 
div.history table td {border: 1px solid #866; border-top:none; border-bottom: none; padding:0 0.5em;}
div.history table td:first-child {text-align:center;}
div.history table tr:last-child td {border-bottom: 1px solid #866;}

div.history table.timeline td:first-child {font-weight:bold;}
div.history table.timeline td+td {border-bottom: 1px dotted #800;}
div.history table.timeline tr:last-child td {border-bottom: 1px solid #800;}

div.history table.kings td:first-child {font-weight:bold;}  
div.history table.kings tr+tr td:nth-child(2) {border-top: 1px dotted #800;}  
div.history table.kings tr+tr td:nth-child(2):empty {border-top: none;}  
div.history table.kings tr:nth-child(n+33):nth-child(-n+53) td:nth-child(3) {background-color: #e0e0e0;}  

div.history tr.new-dynasty td:nth-child(3) {border-top: 1px solid #800;}

div.history table.persia td:first-child {font-weight: bold;}
div.history table.persia tr+tr td:nth-child(n+2) {border-top: 1px dotted #800;}  
div.history table.persia tr+tr td:nth-child(2):empty {border-top: none;}  

div table.psalms {border-collapse:collapse; width:auto; margin: 0.5em auto;}

div.history table.psalms tr td {padding:2px 10px;}
div.history table.psalms td:first-child {font-weight: bold;text-align:left;}
table.psalms tr+tr td {border-top: 1px dotted #800;}  

div.history table.jeremiah1 td:nth-child(2) {text-align:center;}
div.history table.jeremiah1 td:nth-child(-n+2) {font-weight:bold;}
table.jeremiah1 tr+tr td {border-top: 1px dotted #800;}  

div.history table.jeremiah2 {width:auto; margin:1em auto;}
div.history table.jeremiah2 td:first-child {text-align:left;font-weight:bold}
table.jeremiah2 tr+tr td {border-top: 1px dotted #800;}  

div.history table.haggai td:nth-child(-n+3) {text-align:center;font-weight:bold}
table.haggai td:nth-child(-n+3):nth-child(n+2) {color:blue;}
table.haggai tr+tr td {border-top: 1px dotted #800;}  

div.history table.apostles th {color: #600; font-size:1.1em;} 
div.history table.apostles td:first-child {font-weight:bold; text-align:left;} 

div.history table.paul1 {margin-left:3em; margin-right:3em;}
div.history table.paul1 td:first-child {vertical-align:top; padding-left:10px; padding-right:0;}
div.history table.paul1 th, div.history table.paul1 td, div.history table.paul1 tr:last-child td {border:none;}

div.history table.nt1 ul {margin:0; padding:0; margin-left:1.5em;list-style:circle;}
div.history table.nt1 td:first-child {width: 6em; padding:0.2em; font-weight:bold;}
div.history table.nt1 tr+tr td:first-child {border-top: 1px dotted #800;}
div.history table.nt1 tr+tr td:first-child+td {border-top: 1px dotted #800;}
div.history table.nt1 tr+tr td:first-child:empty {border-top:none;}
div.history table.nt1 tr:nth-child(18) {border-top: 1px solid #800;}

div.history table.nt2 {max-width:90%;}
div.history table.nt2 tr td {border-bottom: 1px solid #800; text-align:center;padding:2px 0.5em;}
div.history table.nt2 tr td:first-child {text-align: left;} 
div.history table.nt2 tr td:last-child {max-width:3.5em;}

div.history table.nt3 {width: auto; margin-left:auto; margin-right: auto;}
div.history table.nt3 td:first-child {text-align:left; font-weight:bold;}
div.history table.nt3 td:nth-child(2) {text-align:center;border-right-width:3px; border-right-style:double;}
div.history table.nt3 td:nth-child(3) {text-align:center; font-weight:bold;}
div.history table.nt3 tr+tr td:first-child {border-top: 1px dotted #800;}
div.history table.nt3 tr+tr td:first-child+td {border-top: 1px dotted #800;}
div.history table.nt3 tr+tr td:first-child:empty {border-top:none;}
div.history table.nt3 tr+tr td:first-child:empty+td {border-top:none;}

div.history table.nt3 tr+tr td:nth-child(3) {border-top: 1px dashed #800;}
div.history table.nt3 tr+tr td:nth-child(3)+td {border-top: 1px dashed #800;}
div.history table.nt3 tr+tr td:nth-child(3):empty {border-top:none;}
div.history table.nt3 tr+tr td:nth-child(3):empty+td {border-top:none;}


div.history table.nt3 td {vertical-align:top;}
div.history table.nt3 td span {display:block;font-style:italic;}

div.history table.paul td+td {border-bottom: 1px dotted #800;}
div.history table.paul tr:last-child td {border-bottom: 1px solid #800;}
 
div#places {
  min-width:400px; column-count:3; -webkit-column-count:3; -moz-column-count:3; 
  column-rule: 1px solid #800; -webkit-column-rule: 1px solid #800; -moz-column-rule: 1px solid #800;
  column-gap:0;-webkit-column-gap:0;-moz-column-gap:0;
  border: 2px solid #800; margin:1em auto; padding:0;    
  }  
div#places table {border-collapse:collapse; margin:0; width:100%;}
div#places th {text-align:left; padding-left:0.5em;}
div#places td {text-align:left; padding-left:1.5em;}
div#places tr:nth-child(n+2) td {border-top:1px dotted #daa;}   
div#places tr:nth-child(n+2) th {border-top:1px solid #800;} 

div#abbr {
  min-width:240px;
  column-count:3; -webkit-column-count:3; -moz-column-count:3; 
  column-rule: 1px solid #800; -webkit-column-rule: 1px solid #800; -moz-column-rule: 1px solid #800;
  column-gap:0;-webkit-column-gap:0;-moz-column-gap:0;
  column-fill:auto;-webkit-column-fill:auto;-moz-column-fill:auto;
  border: 2px solid #800; margin:1em auto; padding:0;     
  }
div#abbr table {border-collapse:collapse; margin:0; width:100%;}
div#abbr tr:nth-child(n+2) td {border-top:1px dotted #daa;} 
div#abbr tr:last-child td {border-bottom: 1px solid #800;}  

div#abbr table td:first-child {text-align:left; padding-left:0.5em;}
div#abbr table td:nth-child(2){text-align:center; width:4em;font-weight:bold;}

div#abbr h3 {
  column-span:all; -webkit-column-span: all; -moz-column-span: all; 
  border-bottom: 2px solid #800; text-align:center; padding-bottom:5px;
  }
/* div.people previously had border:1px solid #ddd */
div.people {border:none; margin:1em; padding:1em; margin-right:0;}
div.people table {border-collapse:collapse; width:auto; margin:0.5em auto;}
div.people table th {text-align:left;color:#600;padding-bottom:0.2em;border-bottom: 2px solid #800; font-size:1.2em;} 
div.people table td {border-left: 1px solid #800; border-right: 1px solid #800; padding:3px 0.5em 2px;}
div.people table tr+tr td {border-top: 1px dotted #866;}
div.people table td:first-child {color: #00f; font-weight:bold;white-space:nowrap;}
div.people table tr:last-child td {border-bottom: 1px solid #800;}

div table.synchrony {border-collapse:collapse; width:auto;margin-left:auto;margin-right:auto;}
div table.synchrony th {border-bottom: 2px solid #800;} 
div table.synchrony th:nth-child(1) {width:2em;}
div table.synchrony th:nth-child(3),div table.synchrony th:nth-child(4),
  div table.synchrony th:nth-child(5),div table.synchrony th:nth-child(6) {width:6em;}
div table.synchrony td:nth-child(3),div table.synchrony td:nth-child(4),
  div table.synchrony td:nth-child(5),div table.synchrony td:nth-child(6) {text-align:center;}
div table.synchrony td {border: 1px dotted #800; border-top:none; border-bottom: none; padding:0 0.5em;vertical-align:top;}
div table.synchrony tr:last-child td {border-bottom: 1px solid #800;}
div table.synchrony td:first-child {text-align:right;padding-right:0.2em;border-left:1px solid #800;}
div table.synchrony td:last-child {border-right:1px solid #800;}

div table.synchrony tr.sh+tr td:nth-child(n+3) {color:blue; font-size:0.8em; font-style:italic; font-weight:bold; border-bottom:1px dotted #800;}

div table.synchrony tr.sh td {text-align:left;font-size:1.1em; font-weight:bold; border-top:2px solid #800; 
  border-bottom:1px solid #800; padding-top:0.1em;padding-left:1.5em;
  }

/* Index pages */
div#body h1.index {font-size:1.75em;font-weight:bold; margin: 0.5em 0 0 1em;text-align:left;} 

div#middleSection div#book div.people p.ref {
  font-style:italic; clear:both; float:none; text-align:right; padding-top:1em; 
  }
div#middleSection div#book p.important {
  padding:0.5em; margin:2em; margin-left:3em; color: #008; font-weight: bold;border: 2px solid #800;
  }
  
/* Next/previous page links */
.pageLink {
  position:fixed;top:50vh;display:block;background: url(/inc/buttons.png) top left no-repeat;
  width:23px;height:23px;cursor:pointer;z-index:103;}
.pageLink.next {right:0.5em;background-position: -46px 0;}
.pageLink.previous {left:0.5em;background-position: -23px 0;}
.pageLink:hover {filter:brightness(150%);}
/*.pageLink.next:hover {background-position: -46px 0px;}
.pageLink.previous:hover {background-position: -23px 0px;}*/

.commentary #book div.people p.st {color:#008; font-size:1.1em; font-weight:bold;text-indent:0; font-style:italic;}
/* Family tree CSS */
.tree * {margin: 0; padding: 0;}

.tree ul {
  padding-top: 2em; 
  position: relative; 
  display:flex;/*was table*/
  margin-left:auto; margin-right:auto;
  
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}

.tree li {
  float: left; text-align: center;
  list-style-type: none;
  position: relative;
  padding: 2em 0.5em 0 0.5em;
  
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}

/* Use ::before and ::after to draw the connectors */

.tree li::before, .tree li::after{
  content: '';
  position: absolute; top: 0; right: 50%;
  border-top: 2px solid #f88;  
  width: 50%; height: 2em;
}

.tree li::after{
  right: auto; left: 50%;
  border-left: 2px solid #f88;
}


/* Remove left-right connectors from elements without any siblings */
.tree li:only-child::after, .tree li:only-child::before {display: none;}

/* Remove space from the top of single children, center name beneath connector */
.tree li:only-child{ padding-top: 0;float:none;}

/* Remove left connector from first child and right connector from last child */
.tree li:first-child::before, .tree li:last-child::after{border: 0 none;}

/* But add back the vertical connector to the last nodes */
.tree li:last-child::before{
  border-right: 2px solid #f88;
  border-radius: 0 5px 0 0;
  -webkit-border-radius: 0 5px 0 0;
  -moz-border-radius: 0 5px 0 0;
}
.tree li:first-child::after{
  border-radius: 5px 0 0 0;
  -webkit-border-radius: 5px 0 0 0;
  -moz-border-radius: 5px 0 0 0;
}

/* Add downward connectors from parents */
.tree ul ul::before{
  content: '';
  position: absolute; top: 0; left: 50%;
  border-left: 2px solid #f88;
  width: 0; height: 2em;
}

/* Extended connectors */
.tree ul.lc{padding-top: 4em;}
.tree ul.lc::before{height: 4em;}

/* Special list elements */
.tree ul li.married {z-index:2;}
.tree ul li.spouse  a {border: 2px solid #aaf;}
.tree ul li.spouse::before {display:none;}
.tree ul li.married::after {border-top:none; border-left:none;}
.tree ul li.married::before {border-top-right-radius:5px; border-right:2px solid #f88;}
 
.tree ul li.married2:first-child {top:-2em;}
.tree ul li.married2::before, .tree ul li.married2::after {border:none;}
.tree ul li.married2 + li.spouse {top:0;}

.tree ul li.spouse hr {
  position:absolute; 
  top:72%; right:85%; 
  width:1.5em; height:3px; 
  border:2px dotted #00d; border-left:none; border-right: none;
} 
.tree ul li.spouse a div {
  display:inline; position:absolute; left:-1.1em; bottom: 1.6em; height:0; width:1.5em; 
  margin:0;padding:0; border:2px solid #0a0; border-left:none; border-right:none;z-index:1;
}
.tree ul li.married2+li.spouse a div {left:-1.7em; width:2em;} 

.tree hr {margin-top:1em; clear:both;}

/* Name element styles */
.tree li a{
  border: 2px solid #faa;
  padding: 5px;
  text-decoration: none;
  color: #00f;
  font-family: Saysettha, arial, verdana, tahoma;
  font-size: 1em;
  font-weight: bold;
  display: inline-block;
  
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}

/* Hovering over a name indicates descendents */
.tree li a:hover, .tree li a:hover+ul li a{
  background: #c8e4f8; border:2px solid #a00;
}

.tree li a:hover+ul li.spouse a{
  background:transparent; border:2px solid #aaf;
}

/* Also highlight connectors when hovering */
.tree li a:hover+ul li::after, 
.tree li a:hover+ul li::before, 
.tree li a:hover+ul::before, 
.tree li a:hover+ul ul::before{
  border-color:  #800;
}

/* Styles for notes following a tree segment */
.tree li ul + a,.tree li ul + a:hover {color:#00f;border:none; font-style:italic;background:transparent;}
.tree li a span {color:#00f; font-size:0.9em; font-style:italic;display:block;white-space:nowrap;} /* display:block forces span to start new line */

.tree li a span.thinSpace {font-size:1pt};
      
/* Styles for Cross reference window */
div#bible-ref {
  position:fixed; 
  left:0; right:auto; width:92%;
  bottom:0; top:50px;
  height:5%; min-height:24px; max-height:30%;
  padding:4px 4%;
  border-top: 2px solid #ccc; border-left:none;
  z-index: 1; overflow-y: scroll;
  background-color: #ffffe8; display: none;
  margin: 0; 
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
  
div#bible-ref.adjacent {
  float:right;
  left:auto; right:0; width:40%;
  top:0; bottom:auto; height:95%; max-height: 100%;
  padding:60px 1%; 
  border-top:none;border-left: 2px solid #ccc;
}  

div#bible-ref.adjacent p:last-child {margin-bottom:8em;} 

div#bible-ref span.vn {
  font-weight:bold; font-size:1em; color:#008; 
  padding: 0 0.2em 0 0; margin-left:0.5em;
  vertical-align:baseline; position:relative; top:-0.5em;
}

div#bible-ref span.vn:first-child {margin-left:0;}   

div#bible-ref span.tlao {
  font-size:1.2em; color:#600;
}

div#bible-ref div.termDef div.l {font-size:1.8em; font-weight:bold;color: #008;} 
div#bible-ref div.termDef div.e {display: none;} 
div#bible-ref div.termDef div.h {font-size:1.4em; font-weight:bold;color:#600;} 
div#bible-ref div.termDef div.t {font-size: 1.2em; color:#008;}

div#bible-ref-screen {
  position:fixed;
  left:0;
  top:0;
  height:100%;
  width:100%;
  background-color: #000;
  opacity: 0.3;
  z-index:101;
  display:none;
}

span.xref_vn {
  font-weight:bold; font-size:1em; color:#008; 
  padding: 0 0.2em 0 0; margin-left:0.5em;
  vertical-align:baseline; position:relative; top:-0.5em;
}

span.xref_vn:first-child {margin-left:0;}   
.poetry span.xref_vn:before{content:'';display:block;}
span.xref_lao {font-weight:bold; font-size:1.3em; color:#600;}
  
/* Styles for main menu */
.allsections {margin:0 auto; padding-top:2px; width:40%; min-width:240px;}

.allsections * {user-select:none; -webkit-user-select:none;}

@media screen and (orientation:portrait) {
	.allsections {width:80%;}
}

.tt p {font-size:1.5em; color:#fffffe; background-color:#600000; padding-left:4px; margin-top:0; font-weight:bold;}
.ttx {white-space: pre; border-top: 3px double #800;}
.bb {clear:both; width:100%; border-top:1px solid #aaa; padding-top:0.1em;}
.bb p {font-size:1.25em; padding:0 0 0 0.5em;  margin:0 auto; cursor:pointer; font-weight:bold;}
.bb p.bx {font-style:italic;}

.english .bb p span.english {font-family:helvetica,sans-serif,Arial;}
.bb .pp {display:none; overflow:hidden; margin:-0.3em 0 0.3em 1.2em; }
.bb .pp.show {display:block;}

.bb .pp .pg{
	font-size:1em; height:1.5em; text-align:left; padding-top:0; 
	color:blue; overflow:hidden; margin-top:-0.1em;}

.noshow {display:none;} 
.show {display:block;}

/* Styles for map and table lists */
.maplist {margin:0 auto; width:fit-content; padding-top:0.5em;}
.maplist .pg {
	font-size:1em; height:1.5em; text-align:left; padding:0 0 0 0.5em; 
	color:blue; overflow:hidden; margin-top:-0.1em; cursor:pointer;
}
.maplist .pg span:hover {color:#600; text-decoration:underline;}

/* 
.commentary .allsections .major {display:block; font-size:1.5em; color:#000080;}
.commentary .allsections .minor {display:block; font-size:0.9em; font-style:italic; color:#800000;margin-left:1em;}
.commentary .allsections .section {display:none; font-size: 0.9em; font-style:normal;color:#000080; margin-left:1em;}
.commentary .allsections span {text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2px; cursor:pointer;	}
.commentary .allsections span:hover {color:#0000ff;}

.commentary.english .allsections .show {display:block;}
.commentary.lao .allsections .show {display:block;}*/

/* Show Lao or English where required */
.lao .lao {display:inline;}
.lao .english {display:none;}

.english .lao {display:none;}
.english .english, .english .pg .lao {display:inline;}

/* Styles for family tree diagrams */
.tree {margin:0 auto;}

.family {
	position:relative;
	align-items:center;
	/*justify-items:left;*/
	grid-column:2;
	display:grid; 
	grid-template-columns: fit-content(40%);
	gap:20px;
	grid-auto-rows:auto; 
	width:fit-content;
	z-index:1;
}

.member {
	position:relative; z-index:1;
	grid-column:1; 
	background-color:#ffffe8;	
	border:3px solid blue;
	border-radius:5px; padding:1px 3px;
	color:#600; font-weight:bold;
	text-align:center;
	cursor:pointer;
	white-space:nowrap;
}


div.trunk, div.stem, div.branch {
	border:3px solid blue; border-right:none;
	position:absolute; z-index:0;
	top:0; left:0; height:0; width:0;
	/* max-width:2%; */
}
div.trunk, div.branch {border-left:none; border-bottom:none;}

div.stem {
	border-top-left-radius:5px; 
	border-bottom-left-radius:5px; 			
}

.showwives > .stem, 
.showwives > .trunk, 
.showwives > .branch {border-color:#600;}
.showwives > .family > .member {
	color:#600; font-style:italic; 
	border-color:#600; 
}

.member:hover {background-color:#dff;}
.member:hover+.family .member {background-color:#dff;}

.tree {font-size:1em;}
.justified .tree div {text-align:center;}

.commentary #book p.note-rhs {float:right; font-size:16px; font-weight:bold; color:#600;}