html, body {overflow-x: hidden; height: 100%; margin: 0;}
h1{font: 1.3em Arial, sans-serif; color: #195896;}
h2{font: 1.2em Arial, sans-serif; color: #195896;}
h3{font: 1.1em Arial, sans-serif; color: #195896;}
h4{font: 1em Arial, sans-serif; color: #195896;}
article{font: 1.1em Arial, sans-serif; color: black;}
.font2{font: 1em Arial, sans-serif;	color: black;}
.font3{font: 1.1em Arial, sans-serif; color: black;}
.hbm{font: 1.1em Arial, sans-serif; color: #195896;}
.hbm1{font: 1.2em Arial, sans-serif; color: #195896;}
.hbm2 {font: 1.3em Arial, sans-serif; color: #195896;}
.hbm3{font: 1.5em Arial, sans-serif; color: #195896;}
.hbm4{font: 2.1em Arial, sans-serif; color:#195896; text-shadow:3px 3px 3px #999;}
img, embed, object, video {max-width: 100%;}
div{width: auto; font: 1.2em Arial, sans-serif;	color: #000000;}
ol{line-height:1; font: 1 em "Lucida Sans Unicode", "Lucida Sans", "sans-serif";}
ul{list-style-type: disc; min-width: 1em ;width:95%; max-width:100%; margin: 0.1em; font: 1em Arial, sans-serif; color: #000000;}
ul li{margin: 0.1em; font: 1em "Lucida Sans Unicode", "Lucida Sans", "sans-serif"; color: #000000;}
ol li {margin: 0.1em; font: 1em "Lucida Sans Unicode", "Lucida Sans", "sans-serif"; color: #000000;}
ol+ul {min-width: 1em; width:90%; max-width:100%; margin: 0.1em; font: 1em Arial, sans-serif; color: #000000;}
ul ~ ol {min-width: 1em ;width:90%; max-width:95%; margin: 0.1em; font: 1em Arial, sans-serif; color: #000000;}
button{background-color: ButtonFace;  border: none;  padding: 5px;  cursor: pointer;}
.ButtonSubmit{align-self: center; text-align: center; border: 1px;  margin: 0.5%; padding: 0.5%;} 
/* ----- Bard instructions ----- */
#exercise-input:nth-child(1n) {font:1.3em; color:#000066; text-align: center; background-color: transparent; }
.ButtonSubmit{margin-top: 16px;}
.exercise-container {min-width: 600px; width:75%; max-width: 100%; margin: 0 auto; padding: 13px;  border: 1px solid #184685;}
/* ----- textarea ----- */
textarea{-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: auto;}
textarea[id$=objectTextArea]{min-width:55%; max-width: 65%; background-color: transparent;  font: 1.4em Arial;color: #000066;}
textarea[id$=objectTextArea1]{min-width:55%; max-width: 65%; background-color: transparent; font: 1.4em Arial; color: #000066;}
textarea[id$=objectTextArea2]{min-width:55%; max-width: 65%; background-color: transparent; font: 1.4em; color: #000066;}
textarea[id$=objectTextArea3]{min-width:55%; max-width: 65%; background-color: transparent; font: 1.4em;	color: #000066;}
textarea[id$=objectTextArea4]{min-width:55%;	max-width: 65%;	background-color: transparent; font: 1.4em;	color: #000066;}
textarea[id$=objectTextArea5]{min-width:55%; max-width: 65%; background-color: transparent; font: 1.4em; color: #000066;}
textarea[id$=quiz_answer]{min-width:55%; max-width: 65%; font: 1.4em; color: #0000FF;	background-color: transparent;}
.TextSubmit{width:auto; border:3px; text-align:center; margin: 0.1%; padding: 0.1%;}
#lesson {width: 21%; font: 1.1em Arial, sans-serif;	color: #0000FF;}
/* ----- table | lesson | objective*/
#tl{min-width: auto; min-height:19px; height:23px; max-height: 29px;} 
#t1{border-right: 1px solid #fbfbfb;} #t1{border-left: 1px solid #fcfcfc;}   
#t1{border-top: 1px solid #fdfdfd;} #t1{border-bottom: 1px solid #fefefe;}   
#t1 *.Lesson {width:13%; max-height: 0px; border: 1px solid #757575; font: 1.1em Arial, sans-serif; color:#0000FF; margin: 0.1%; padding: 0.1%;}
#t1 *.Objective {width:13%; max-height: 0px; border: 1px solid Gray; font: 1.1em Arial, sans-serif; color: #0000FF; margin:0.1%; padding: 0.1%; }
#t1 *.lC {max-height: 0px; font: 1.1em Arial, sans-serif; color: #0000FF;} 
#t1 *.oC {max-height: 0px; font: 1.1em Arial, sans-serif; color: #0000FF;}
.DarkMode {font: 1.1em monospace; background-color: black;color: lime; margin: 0.1%; padding: 0.1%; min-width: 1em; width:90%; max-width: 95%; white-space: pre-wrap; overflow-x: auto; }
.DarkModeSmall{min-width: 1em; width:90%; max-width: 95%; font: 0.9 monospace; color: lime; background-color: black; margin: 0.1%; padding: 0.1%; width: auto;}
.Begin{font: 1em monospace;color: #F37F0A; background-color: black; padding: 0.1%;}
.Create{font: 1em monospace; color: #F36F0E; background-color: black; padding: 0.1%;}
.Delete{font: 1em monospace; color: #F36F0A; background-color: black; padding: 0.1%;}
.From{font: 1em monospace; color: #F36F0B; background-color: black; padding: 0.1%;}
.GroupBy{font: 1em monospace; color: #129AF1; background-color: black; padding: 0.1%;}
.In{font: 1em monospace; color: hwb(317 5% 5%); background-color: black; padding: 0.1%;	margin: 0.1%}
.Insert{font: 1em monospace; color: #F36F0C;background-color: black;padding: 0.1%;}
.Update{font: 1em monospace; color: #F36F0D; background-color: black; padding: 0.1%;}
.Select{font: 1em monospace; color: #129AF1; background-color: black; padding: 0.1%;}
.Where{font: 1em monospace; color: #129AF2; background-color: black; padding: 0.1%;}
.Function {font: 1em monospace; color: #F36F0C; background-color: black; padding: 0.1%; width: auto;}
.SubString {font: 1em monospace; color: #F36F0A; background-color: black; padding: 0.1%;}
/* END - Dark Mode */
figure{border: 1px;margin: 0.1%; padding: 0.1%;}
figcaption{font: oblique 1em Arial, sans-serif; margin: 0.1%; padding: 0.1%;}
code{font: 1.1em monospace; color: lime; background-color: black; padding: 0.2%; margin: 0.2%; width: auto;}
pre{
	min-width: 100px; width: 95%;	max-width:100%;
	font: 1.1em monospace; background: #EFEFEF; color: black; margin: 0.2%; padding: 0.2%;
}
pre.small {
	width: auto; /* Let it adjust based on content */
	font: 0.9em monospace; color: black; background: #EFEFFF;
	margin: 0.1%; padding: 0.1%;
}
pre.smaller {
	border: 0px;
	background: #EFEFFF; font: 0.8em monospace; color: black;
	margin: 0.1%;padding: 0.1%;
	min-width: 67%; width: 79%; max-width: 97%;
}
pre.smallest {
	background: #EFEFFF; border: 0px #C0C0D0;
	font: 0.7em monospace; color: black;
	margin: 0.1%;	padding: 0.1%;	width: 100%;
}
pre.DarkMode {
	font: 1.1em monospace;  
	background-color: black;	color: lime;  
	margin: 0.5em; padding: 0.5em;
	min-width:100px; width: 95%;  max-width: 100%; /* (TJH) this stopped the black background going to the right edge */
	white-space: pre-wrap; 
	overflow-x: auto; /* Allows horizontal scrolling if content overflows */
}
#uniqueDarkMode {
  font: 1.1em monospace; background-color: black; color: lime;  
  margin: 0.1%;  padding: 0.1%; min-width:1em; width: 90%;  max-width:95%; white-space: pre-wrap; 
  overflow-x: auto; 
}
.QuizPrompt {font: 1.1em Arial, sans-serif; color: #000099; margin: 0.1%; padding: 0.1%;}
.Summary{font: 1em Arial, sans-serif; color: blue; margin: 0.1%; padding: 0.1%;}
/* ----- start TableCol ----- */
.TableCol {min-width: 1em; width:90%; max-width: 95%;} /* width was 100%*/
.TableCol td {padding: 0.1; border-color: #EAEAEA solid;}
.TableCol tr:nth-child(odd) {background: #EAEAEA;}
.TableCol tr:nth-child(even) {background: #FFFFFF;}
/* unordered list breadcrumb */
ul.breadcrumb {width: 97%;padding: 0.1em; border: 1px solid #0E04F5; list-style: none;	background-color: #EAEAEA;}
ul.breadcrumb li {display: inline; font: 1em Arial, sans-serif;}
ul.breadcrumb li+li:before{padding: 0.5em; color: black; content: "\00a0|\00a0";}
ul.breadcrumb li a {color: #0275d8; text-decoration: none;}
ul.breadcrumb li a:hover { font: 1.0em; color: #01447e; text-decoration: underline;}
/*  ----- ----- RelationalDB ----- ----- [Mobile] ----- ----- RelationalDB ----- ----- [Mobile]  ----- RelationalDB ----- ----- */
#wrapper {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	grid-template-rows: auto; grid-gap: 1px;
	display: flex; flex-direction: column; 
	min-height: 100vh;
	max-width: 768px; grid-template-areas:
		"logo logo logo logo logo logo logo logo"
		"nav nav nav nav nav nav nav nav"
		"search search search search search search search search"
		"header header header header header header header header"
		"section section section section section section section section"
		"footer footer footer footer footer footer footer footer";
}
#logo {
	display: grid;
	grid-template-columns: 2fr 2fr 2fr 2fr;
	font: 1.7em Arial, sans-serif; color: #195896;background-color: aliceblue;
	text-shadow: 3px 3px 3px #999;
	text-decoration: none;
	grid-area: logo;
}
#logo a:link {font: Arial; color: #195896; text-decoration: none;}
#logo a:visited{font: Arial; color: #195897; text-decoration: none;}
#sitemap {display: none;}
/*  ----- ----- RelationalDB ----- ----- [Mobile] ----- ----- RelationalDB ----- ----- [Mobile]  ----- RelationalDB ----- ----- */
nav {
	display: grid;
	grid-template-columns: auto;
	align-items: stretch; 
	background-color: #0A1EF1; color:white; 
	grid-gap: 1px; padding: 0.1em;
	grid-area: nav;
}
nav div {
	display: block;
	font: 1.3em Arial, sans-serif; color: white;
	text-align: center; grid-gap: 1px;
	border: 1px solid white;
	height: auto;
	text-decoration: none;
}
nav div a {display: block; padding: 3px; color: white; text-decoration: none;}
/*  ----- ----- RelationalDB ----- ----- [Mobile] ----- ----- RelationalDB ----- ----- [Mobile]  ----- RelationalDB ----- ----- */
nav div a:hover { display: block; color: #9BF4F8; background-color: #757575; text-decoration: underline; }
.search {display: grid; justify-content: start; grid-template-columns: repeat(4, 2fr); grid-area: search;}
header {
	display: grid;
	grid-template-columns: repeat(4, 2fr); 
	font: 1.3em Arial, sans-serif; color: blue;
	height: auto;
	grid-area: header;
}
header a {
	display: block;
	font: 1.2em Arial, sans-serif; color: navy; padding: 3px;
	text-decoration: none;
}
header a:hover {
	color: lime;background-color: #B3AAAA;
	text-decoration: underline;
}
/*  ----- (RelationalDBDesign) ----- ----- [Mobile] ----- (RelationalDBDesign) ----- ----- [Mobile]  ----- ----- */
#localnav {display: none;}
section {
	flex: 1; /*need this for mobile or else footer will not stay at bottom */
	display: grid;
	min-height: 317px; height: 419px; max-height: auto; line-height: 1.2;
	min-width:73%; width:91%; max-width: 100%;
	padding: 0.3em; font: 1em Arial, sans-serif; color: black; 
	grid-area: section;
}
section div {min-width: 100px ; width:97%;max-width: 100% rgba(0, 0, 0, 0); font: 1.1em; margin: 0px;}
section a:link {font: 1.1em Arial; color: #184785; text-decoration: none;}
section a:visited {font: 1.1em Arial, sans-serif; color: #184685; text-decoration: none;}
section a:hover {font: 1.1em Arial, sans-serif; color: #00FF00; text-decoration: underline;}
/*  ----- footer ----- (RelationalDBDesign) ----- ----- [Mobile] ----- (RelationalDBDesign) ----- ----- [Mobile] ----- */
footer {
  display: grid;
  grid-template-columns: repeat(4, 2fr);
  place-items: end; 
  font: 1.2em Arial, sans-serif; color: blue;
  border-top: 1px solid black; 
  height: auto;
  text-decoration: none;
  grid-area: footer; 
}
footer a {	
	display: block;
	font: 1.2em Arial, sans-serif; color: navy; padding: 0.1%;
	text-decoration: none;
}
footer a:hover {
	font: 1.2em Arial, sans-serif; color: navy;
	text-decoration: underline;
}
/* ----- Begin ----- [RelDB]----- [Tablet] ----- #localnav =L.H. Navigation ----- (RelDB) -----  ----- [Tablet] -----  */
/* Tablet Breakpoint for iPad 9th Generation and Amazon Fire HD 10 Plus */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  /* Target the left-hand navigation specifically for tablets */
  #localnav {
    width: 60%; /* Adjust width for better layout */
    margin: 0 auto; /* Center the left-hand navigation */
    font-size: 0.9em;
    padding-left: 1em; /* Add left padding to move it inward */
    border: none; /* Remove any borders around the #localnav div */
  }

  #localnav ul {
    border: none; /* Remove border from the ul element */
    padding: 0; /* Remove any default padding */
    margin: 0; /* Remove any default margin */
  }

  #localnav ul li {
    border: none; /* Remove border from the li elements */
    list-style: none; /* Remove any list style */
  }

  /* Hide less important navigation items */
  #localnav ul li:nth-child(n+6) {
    display: none; /* Hides items from the 6th child onward */
  }
  /* Customize the appearance of remaining items without borders */
  #localnav ul li a {
    border: none; /* Remove borders from navigation links */
    text-decoration: none;
    padding: 0.5em; /* Adjust padding for spacing */
  }
}
/* ----- END ----- [RelDB]----- [Tablet] ----- #localnav =L.H. Navigation ----- (RelDB) -----  ----- [Tablet] -----  */
/*  ----- (Start) ----- [RelDB] ------ ----- [Desktop] ----- (RelDB) ----- ----- [Desktop]  ----- ----- */
@media only screen and (min-width:760px) {
#wrapper {
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		grid-template-rows: auto; grid-gap: 0.0em;
		max-width: 100%; margin: 0px;
		box-sizing: border-box;
		grid-template-areas:
			"logo logo logo logo logo logo logo logo logo logo sitemap sitemap"
			"nav nav nav nav nav nav nav nav nav nav nav nav"
			"search search search search search search search search search search search search"
			"header header header header header header header header header header header header"
			"localnav localnav section section section section section section section section section section"
			"footer footer footer footer footer footer footer footer footer footer footer footer";
	}
	#logo {
		display: grid;
		grid-template-columns: repeat(5,2fr); 
		justify-content: start; justify-items: stretch;
		font: 2.0em Arial, sans-serif; color:#195896; text-shadow: 3px 3px 3px #999; background-color: aliceblue;
		text-shadow:3px 3px 3px #999; text-decoration: none;
		grid-area: logo;
	}
	#logo a:hover{font: Arial; color: limegreen; text-decoration: underline;}
	#sitemap{
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    justify-content: space-around; 
    background-color: aliceblue;
    grid-area: sitemap;
	}
	#sitemap ul {font: 1em Arial; padding: 0em; margin: 0em; list-style-type: none;}
	#sitemap li {display: inline; margin: 0px;}
	#sitemap li a{padding: 0em; margin: 0em; border: 0px solid #778; color: #2d2b2b; 
	background: transparent url(media/bluetab.gif) top left repeat-x; text-decoration: none;}
	#sitemap li a:hover{background: transparent url(media/bluetab.gif) top left repeat-x; text-decoration: underline;}
	/* ----- RelDB ----- [Desktop]  ----- [4 columns] ----- (4 X 3) = 12----- [4 columns] (RelDB) ----- [Desktop] -----*/
	nav{
		display: grid;
		grid-template-columns: 3fr 3fr 3fr 3fr;
		justify-content: center; align-items: center; 
		background-color: #EAEAEA; padding: 0.1em;
		grid-area: nav;
	}
	nav div {
		display: block;
		font: 1.3em Arial, sans-serif; color: black;
		border: 1px solid blue; border-radius: 3px; grid-gap: 1px;
		padding: 0px; height: auto;
		text-decoration: none;
	}
	nav div a {
		display: block; color: black; padding: 3px;
		text-decoration: none;
	}
	nav div a:hover {
		display: block;				
		font: Arial, sans-serif; background-color: #880EF0; color: #9BF4F8;
		text-decoration: underline;
	}
	nav div a.selected {
		display: block;	
		background-color:  #600A93; color: white; 
		padding: 0.1em;
		text-decoration: none;
	}
	/* ----- RelDB ----- [3 columns] ----- -----  [Desktop] ----- [3 columns] ----- -----  [Desktop]  -----  -----*/
	#menu1 {
		display: grid;
		grid-template-columns: repeat(3, 4fr); 
		justify-content: center; align-items: center;
		background-color: #EAEAEA; color: black; padding: 0.1em;
		grid-area: nav;
	}
	#menu1 div {
		display: block;
		font: 1.3em Arial, sans-serif; color: black; text-align: center;
		border: 1px solid blue; border-radius: 5px; 
		grid-gap: 1px; padding: 0px; height: auto;
		text-decoration: none;
	}
	#menu1 div a {
		display: block; color: black; padding: 5px;
		text-decoration: none;
	}
	#menu1 div a:hover {
		display: block;				
		font: Arial, sans-serif; background-color: #880EF0; color: #9BF4F8;
		text-decoration: underline;
	}
	#menu1 div a.selected {
		display: block; background-color:  #600A93; color: white; padding: 0.1em;
		text-decoration: none;
	}
	.search {
		display: grid;
		grid-template-columns: repeat(2, 6fr); justify-content: start;
		grid-area: search;
	}
/* ----- RelationDB ----- [repeat(4, 3fr);] ----- ----- [Desktop] ----- (RelDB) ----- [repeat(4, 3fr);] ----- ----- [Desktop] */
/* ----- header -----  */
	header {
		display: grid;
		grid-template-columns: repeat(4, 3fr);
		justify-content: start; justify-items: stretch;
		min-height: 0.76 rem; height: 1.1 rem; max-height: 1.43 rem;
		font: 1.4em Arial, sans-serif; color: blue; background-color: transparent;
		border: solid 1px #EAEAEA;
		text-decoration: none;
		grid-area: header;
	}
	header a {
		display: block;
		min-height: 0.76 rem; height: 1.1 rem; max-height: 1.43 rem;
		font: 1.1em Arial, sans-serif; color: navy; padding: 0.3rem;
		background-color: transparent;
		text-decoration: none;
	}
	header a:hover {
		min-height: 0.76 rem; height: 1.1 rem; max-height: 1.43 rem;
		font: 1.2em Arial, sans-serif; color: lime; background-color: transparent;
		text-decoration: underline;
	}
	/* ----- [RelDB]----- ----- [Desktop] ----- #localnav =L.H. Navigation ----- (RelDB) -----  ----- [Desktop] -----  */
	#localnav {
		display:grid;
		min-width: 1em; width:95%; max-width:100%;
    padding-right: 0.1em;
    margin-right: 0.1em;
    margin-left: -1.8em; font: 1.1em Arial, sans-serif; background-color: transparent;
    text-decoration: none;
    grid-area: localnav; 
	}
	#localnav li {
		list-style-type: none;
		border-left: 1px solid #9999ff; 
		border-right: 1px solid #9999ff;
	  border-bottom: 1px solid rgb(144, 154, 181);
		text-decoration: none;
	}
	#localnav li a:link, #localnav li a:visited {
		display: block;
		background-color: transparent; color: rgb(49, 52, 61);
		text-decoration: none;
	}
	#localnav li a:hover {
		background-color: #7e7e7e;
		color: #FFFFFF; border-left: 1px solid #9966ff;
		text-decoration: underline;
	}
	/* ----- ----- [RelDB]----- ----- [Desktop] ----- section ----- (RelationalDBDesign) ----- ----- */
	section{
		display: grid;
		justify-content: start; justify-items: stretch; align-self: stretch;
		min-width:  1em; width: 85%;	max-width: 95%;
		min-height: 50%; height: 75%; max-height: auto;
		line-height: 1.3; background-color: transparent;
		font: 1.1em "Lucida Sans Unicode", "Lucida Sans", "sans-serif"; color: black;
		grid-area: section;
	}
	section div{font: 1em "Lucida Sans Unicode", "Lucida Sans", "sans-serif"; color: black;}
	section a{font: 1em Arial; color: #184785;	text-decoration: none;}
	section a:hover{font: 1em Arial; color: #00FF00; text-decoration: underline;}
	/* ----- footer ----- */
	footer{
		display: grid;
		grid-template-columns: repeat(4, 3fr);
		justify-content: start; justify-items: stretch;
		min-height: 71px; height: 73px; max-height: 79px;
		font: 1.3em Arial, sans-serif; color: blue;
		background-color:transparent; border: 1px solid black;
		text-decoration: none;
		grid-area: footer;
	}
	footer a {
		display: block;
		min-height: 71px; height: 73px; max-height: 79px;
		font: 1.2em Arial, sans-serif; color: navy; border: solid 1px #EAEAEA;
		text-decoration: none;
	}
	footer a:hover {
		min-height: 71px; height: 73px; max-height: 79px;
		font: 1.2em Arial, sans-serif; color: lime;
		text-decoration: underline;
	}
}