:root{

}

ul{
	list-style: none;
}

ul summary{
	cursor: pointer;
}

ul summary::marker{
	display: none;
	line-height:2em;
}

ul summary::-webkit-details-marker{
	display: none;
}

ul li{
	position:relative;
}

.section{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 20px;
	font-weight: bold;
	background-color: lightgreen;
}

.MainTopic1{
	font-family: "Brush Script Mt", cursive;
	font-size: 30px;
	font-weight: bold;
}

.SubTopic{
  	width: 100%;
	font-family: "Brush Script Mt", cursive;
	font-size: 32px;
	font-weight: bold;
  	text-align: center;
}

.MainTopic2{
	font-family: "Brush Script Mt", cursive;
	font-size: 30px;
	font-weight: bold;
	left:500;
}

.Commandment{
	font-size: 18px;
	font-weight: bold;
	color: black;
}

.question{
	font-size: 16px;
	font-weight: bold;
	color: red;
}

.query{
	font-size: 16px;
	font-weight: bold;
	color: red;
}

.answer{
	font-size: 14 px;
}

.BibleReference{
	font-weight: bold;
}

.BibleQuote{
	font-style: italic;
}

.title{
	position: relative;
	top:-50%;
}

.column {
  float: left;
}

.left, .right {
  width: 25%;
}

.middle {
  width: 50%;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

a, a:visited, a:hover, a:active {
  color: inherit;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}

.center2 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.center3 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}

.MainTopicHeader {
  	width: 100%;
	font-family: "Brush Script Mt", cursive;
	font-size: 40px;
	font-weight: bold;
  	text-align: center;
}

.liUnderline {
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: yellow;
  text-decoration-thickness: 2px;
}	

.image{
  position: relative;
}

.image a{
  display: block;      
  position: absolute;
}

.HomePage{
  position: relative;
}

.HomePage a{
  display: block;      
  position: absolute;
}

input[type="question"]
{
    width: 100%;
    font-size:14px;
    text-align: left;
}

input[type="query"]
{
    width: 100%;
    font-size:14px;
    text-align: left;
}

.statement{
	font-size: 18px;
	color: black;
}


.slideshow{
	position: absolute; 
	top: 33%; 
	left: 10%; 
	width: 16%; 
	height: 66%;	
	color: transparent; 
	background-color: transparent; 
	border-color: transparent; 
	cursor: grab; 
}

.gallery{
	position: absolute; 
	top: 0%; 
	left: 26%; 
	width: 16%; 
	height: 66%;
	color: transparent; 
	background-color: transparent; 
	border-color: transparent; 
	cursor: grab; 
}

.carousel{
	position: absolute; 
	top: 33%; 
	left: 42%; 
	width: 16%; 
	height: 66%;
	color: transparent; 
	background-color: transparent; 
	border-color: transparent; 
	cursor: grab; 
}

.scroll{
	position: absolute; 
	top: 0%; 
	left: 58%; 
	width: 16%; 
	height: 66%;
	color: transparent; 
	background-color: transparent; 
	border-color: transparent; 
	cursor: grab; 
}

.portfolio{
	position: absolute; 
	top: 33%; 
	left: 74%; 
	width: 16%; 
	height: 66%;
	color: transparent; 
	background-color: transparent; 
	border-color: transparent; 
	cursor: grab; 
}

.pictureSet{
  text-decoration-line: underline;
  text-decoration-style: solid;
  cursor: grab;
}

table, tr {
  border: 1px solid black;
  border-collapse: collapse;
}

.tdWithLines{
  border: 1px solid black;
  border-collapse: collapse;
  text-align: center;
  padding: 3px;
}

.tdWithLinesHand{
  border: 1px solid black;
  border-collapse: collapse;
  text-align: center;
  padding: 3px;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: yellow;
  text-decoration-thickness: 2px;
}

.mon_yr{
	font-family: "Brush Script Mt", cursive;
	font-size: 32px;
	font-weight: bold;
	position: absolute;
	transform: translate(-50%, -50%);
}

.day{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 20px;
	font-weight: bold;
	position: absolute;
}

.day6{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 20px;
	font-weight: bold;
	position: absolute;
	transform: translate(-50%, -50%);
}

.dot {
  height: 25px;
  width: 25px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  position: relative;
}

.NewHomePage {
	font-family: Calibri, Helvetica, sans-serif;
	font-size: 20px;
  border: 2px solid black;
  padding: 10px;
  margin: 10px;
}

.tree{
  --spacing : 1.5rem;
  --radius  : 10px;
}

.tree li{
  display      : block;
  position     : relative;
  padding-left : calc(2 * var(--spacing) - var(--radius) - 2px);
}

.tree ul{
  margin-left  : calc(var(--radius) - var(--spacing));
  padding-left : 0;
}

.tree ul li{
  border-left : 2px solid #ddd;
}

.tree ul li:last-child{
  border-color : transparent;
}

.tree ul li::before{
  content      : '';
  display      : block;
  position     : absolute;
  top          : calc(var(--spacing) / -2);
  left         : -2px;
  width        : calc(var(--spacing) + 2px);
  height       : calc(var(--spacing) + 1px);
  border       : solid #ddd;
  border-width : 0 0 2px 2px;
}

.tree summary{
  display : block;
  cursor  : pointer;
}

.tree summary::marker,
.tree summary::-webkit-details-marker{
  display : none;
}

.tree summary:focus{
  outline : none;
}

.tree summary:focus-visible{
  outline : 1px dotted #000;
}

.tree li::after,
.tree summary::before{
  content       : '';
  display       : block;
  position      : absolute;
  top           : calc(var(--spacing) / 2 - var(--radius));
  left          : calc(var(--spacing) - var(--radius) - 1px);
  width         : calc(2 * var(--radius));
  height        : calc(2 * var(--radius));
  border-radius : 50%;
  background    : #ddd;
}

.tree summary::before{
  z-index    : 1;
  background : #696 url('expand-collapse.svg') 0 0;
}

.tree details[open] > summary::before{
  background-position : calc(-2 * var(--radius)) 0;
}

.iframe-class {
    width: 100%;
    height: 100%;
    border: 1px solid red;
    overflow: auto;
}

.highlight {
    background-color: yellow;
}

.liQAUnderline {
  cursor: pointer;
  text-decoration: underline;
}

.imgQA {
  cursor: pointer;
}