* {
	font-family: Arial, sans-serif;
	font-size: 14px;
}

html, 
body {
    height: 100%;
    min-height: 100%;
	
	margin: 0;
	padding: 0;
}

:root {
	--line-spacing: 150%;
	--paragraph-spacing: 15px;
	
	--padding: 25px;
	
	--topBar-size: 60px;
	--subTopBar-size: 40px;
	--sideBar-size: 300px;
	
	--searchBar-size: 300px;
	--nodeImage-maxWidth: 300px;
	--table-columnSize: 200px;
	
	--bottomBar-size: 50px;
	
	--backgroundColor-dark: #2a2f22; 	/*Dark green*/
	--backgroundColor-medium: #4a533d;	/*Medium green*/
	--backgroundColor-light: #c4df9b;	/*Light green*/
	
	--textColor-dark: #000000;			/*Black*/
	--textColor-medium: #565656;		/*Gray*/
	--textColor-light: #ababab;			/*Light gray*/
	--textColor-white: #ffffff;			/*White*/
	
	--contentColor-black: #000000;		/*Black*/
	--contentColor-dark: #ababab;		/*Medium light gray*/
	--contentColor-medium: #f5f5f5;		/*Light gray*/
	--contentColor-light: #ffffff;		/*White*/
	
	--linkColor-dark: #2a2f22;			/*Dark green*/
	--linkColor-medium: #5c8b5f;		/*Medium light green*/
	--linkColor-light: #c4df9b;			/*Light green*/
	
	--ff-mono: ui-monospace,"Cascadia Mono","Segoe UI Mono","Liberation Mono",Menlo,Monaco,Consolas,monospace;
}


/*Top bar*/
#TopBar {
	z-index: 3;
	background-color: var(--backgroundColor-dark);

	width: calc(100% - (var(--padding) * 2));
	height: var(--topBar-size);
	
	padding-left: var(--padding);
	padding-right: var(--padding);
	
	text-align: left;
	
	position: fixed;
}
#SubTopBar {
	z-index: 3;
	background-color: var(--backgroundColor-medium);

	top: var(--topBar-size);

	width: 100%;
	height: var(--subTopBar-size);
	
	padding-left: var(--padding);
	padding-right: var(--padding);
	
	position: fixed;
	
	box-shadow: 0px 3px 5px grey;
}

#TopBarText{
	color: var(--textColor-white);
	
	font-size: calc(var(--topBar-size) / 2);
	position: relative;	
	
	height: 100%;
	width: 100%;
	
	padding-top: calc(var(--topBar-size) / 4);
	left: var(--padding);
}
#SubTopBarText{
	color: var(--textColor-white);
	
	font-size: 18px;
	position: relative;	
	
	height: 100%;
	width: 100%;
	
	padding-top: 10px;
}

#TopBarIcon {
	position: relative;	
	
	width: calc(var(--topBar-size) * 0.8);
	height: calc(var(--topBar-size) * 0.8);
	
	float: left;
	top: calc((var(--topBar-size) / 8));
	
	image-rendering: pixelated;
	image-rendering: -moz-crisp-edges;
	image-rendering: crisp-edges;
}

#TopBar nav{
	bottom: 18px;
	width: 100%;
	display: block;
	position: absolute;
}
#TopBar nav ul{
	margin:0;
	text-align: left;
	padding-left: calc(var(--sideBar-size) + (var(--padding)));
}
#TopBar nav li{
	display: inline-block;
	margin: 0 10px;
}
#TopBar nav li a{
	color: var(--textColor-white) !important;
	text-decoration: none;
	font-size: 18px;
	transition: color 0.1s;
	padding: 3px;
}
#TopBar nav li a:hover {
	color: var(--backgroundColor-light)  !important;
}
#TopBar nav li a.selected{
	color:var(--backgroundColor-light) !important;
	text-decoration: none;
	font-size: 18px;
	transition: color 0.1s;
	padding: 3px;
}

#SearchContainer {
  	z-index: 4;
	
	background-color: #ffffff00;
	
	float: right;
  
	position: relative;	
  
	height: var(--topBar-size);
	width: var(--searchBar-size);
	font-size: 18px;
	
	top: calc((var(--topBar-size) * -1) - 15px);
	right: calc(var(--padding) * -1);
}

#SearchContainer input[type=text] {
	background-color: white;
  
	position: absolute;
	
	padding-left: var(--padding);
  
	height: var(--topBar-size);
	width: 100%;
	font-size: 18px;
	
	border: 0px solid #ffffff00;
	
	top: -2px;
	left: -2px;
}
#SearchContainer input[type=text]:focus {
	outline-width: 0;
}
#SearchContainer button {	
	float: left;

	width: var(--topBar-size);
	height: var(--topBar-size);

	background: var(--contentColor-dark);
	font-size: 18px;
	border: none;
	cursor: pointer;
	
	position: absolute;
	
	left: 0px;
}

#SearchContainer button:hover {
	background: var(--contentColor-medium);
}
.autocomplete {
	/*the container must be positioned relative:*/
	position: relative;
	display: inline-block;
	
	float:right;
  
	font-size: 18px;
  
	width: calc(100% - var(--topBar-size));
	height: var(--topBar-size);
}
.autocomplete-items {
	z-index: 5;
	
	position: absolute;
	border: 1px solid #d4d4d4;
	border-bottom: none;
	border-top: 1px solid #d4d4d4;
	z-index: 99;
	/*position the autocomplete items to be the same width as the container:*/
	top: 100%;
	left: 0;
	right: 0;
	
	box-shadow: 1px 3px 5px grey;
}
.autocomplete-items div {
	padding: 10px;
	cursor: pointer;
	background-color: #fff;
	border-bottom: 1px solid #d4d4d4;
}
.autocomplete-items div:hover {
	/*when hovering an item:*/
	background-color: #e9e9e9;
}
.autocomplete-active {
	/*when navigating through the items using the arrow keys:*/
	background-color: DodgerBlue !important;
	color: #ffffff;
}

/*Side bar*/
#SideBar {
	z-index: 2;
	
	top: calc(var(--topBar-size) + var(--subTopBar-size));
	padding-top: var(--padding);
	padding-left: var(--padding);
	padding-right: var(--padding);
	padding-bottom: var(--padding);
	
	background-color: var(--backgroundColor-light);
	
	width: var(--sideBar-size);
	height: calc(100% - (calc(var(--topBar-size) + var(--subTopBar-size)) + (var(--padding) * 2)));/*Full screen - (TopBar, and padding*2)*/
	
	position: fixed;
	
	overflow: scroll;
	overflow-x: hidden;
	word-wrap: break-word;
}

#SideBarText{
	color: var(--backgroundColor-dark);
	
	margin-bottom: 5px;
	width: calc(100% - (var(--padding) * 2));
	height: auto;
	
	text-align: left;
	position: relative;
}
#SideBarText.big{
	font-weight: bold;
	font-size: 18px;
}

#SmallLineHorizontal {
	border-radius: 50px;
	background-color: var(--backgroundColor-dark);
	height: 1px;
	width: 100%;
	
	margin-bottom: var(--paragraph-spacing);

	position: relative;
}

#SideBar nav{
	width: 100%;
	height: auto;
	display: block;
	position: relative;
}
#SideBar nav ul{
	text-align: left;
	padding-left:0px;
}
#SideBar nav li{	
	margin-bottom: 5px;
	margin-left: 13px; /*TODO: How should this value be calculated, based on var(--padding)?? Is it just half, rounded up?*/
}
#SideBar nav li a{
	color: var(--backgroundColor-dark) !important;
	text-decoration: none;
	transition: color 0.1s;
	padding-top: 3px;
	padding-bottom: 3px;
}
#SideBar nav li a:hover {
	color: var(--textColor-white)  !important;
}
#SideBar nav li a.selected{
	color:var(--backgroundColor-dark) !important;
	font-weight: bold;
}
#SideBar nav li a.selected:hover{
	color: var(--textColor-white) !important;
}


/*Content*/
#ContentContainer {
	z-index: 0;
	
	top: calc(var(--topBar-size) + var(--subTopBar-size));
	left: calc(var(--sideBar-size) + (var(--padding) * 2));
	padding-top: var(--padding);
	padding-left: var(--padding);
	padding-right: var(--padding);
	padding-bottom: var(--padding);
	
	background-color: var(--contentColor-light);
	
	width: calc(100% - (var(--sideBar-size) + (var(--padding) * 4))); /*Full screen - (SideBar, and padding)*/
	min-height: calc(100% - (var(--topBar-size) + var(--subTopBar-size) + var(--bottomBar-size) + (var(--padding) * 2)));/*Full screen - (TopBar, BottomBar, and padding)*/
	
	position: relative;
	
	word-wrap: break-word;
}
#ContentContainerTitle {
	font-size: 30px;
	position: relative;	
	font-weight: bold;
	
	height: 100%;
	width: calc(100% - 300px);
}
#ContentContainerSubTitle {
	color: var(--textColor-light);
	
	position: relative;	
	
	padding-bottom: calc(var(--paragraph-spacing) * 3);
	
	height: 100%;
	width: calc(100% - 300px);
}
#ContentContainerTitleImage {
	float: right;
	position: relative;
	
	max-width: var(--nodeImage-maxWidth);
	
	padding-bottom: var(--padding);
}
#ContentContainerHeader {
	font-weight: bold;
	font-size: 18px;
	
	padding-top: var(--paragraph-spacing);
	padding-bottom: var(--paragraph-spacing);
	
	position: relative;	
	
	height: 100%;
	width: 100%;
}
#ContentContainerHeader.noWrap {
	clear: both;
}
#ContentContainerText {
	color: var(--textColor-medium);
	
	position: relative;	
	
	padding-bottom: var(--paragraph-spacing);
	
	line-height: var(--line-spacing);
	
	height: 100%;
	width: 100%;
}
#ContentContainerText ul.changeLog {
	margin-left: -20px; 
	margin-top: -5px;
}

#ContentContainerText span.informationBox {
	color: rgba(25,25,25,255);
	
	background: rgba(225,225,225,225);
	
	border-radius: 3px;

	padding: 2px 4px;
	
	font-family: var(--ff-mono);
	font-size: 13px;
}
#ContentContainerText span.informationBoxLight {
	color: rgba(25,25,25,255);
	
	background: rgba(255,255,255,255);
	
	border-radius: 3px;

	padding: 2px 4px;
	
	font-family: var(--ff-mono);
	font-size: 13px;
}
#ContentContainerText section.codeBox {
	color: rgba(25,25,25,255);
	
	background: rgba(225,225,225,225);
	
	border-radius: 3px;
	
	padding: 4px 4px;
	
	font-family: var(--ff-mono);
	font-size: 13px;
}

#ContentContainerText section.codeBoxLight {
	color: rgba(25,25,25,255);
	
	background: rgba(255,255,255,255);
	
	border-radius: 3px;
	
	padding: 4px 4px;
	
	font-family: var(--ff-mono);
	font-size: 13px;
}

#ContentContainerImage {
	position: relative;		
	
	margin-bottom: var(--paragraph-spacing);	

	/*max-width: calc(100% - (var(--padding) * 2));*/
	max-width: 50%;
	
	border: 1px solid var(--contentColor-black);
}
a.lightbox img {
	position: relative;		
	
	margin-bottom: var(--paragraph-spacing);	

	/*max-width: calc(100% - (var(--padding) * 2));*/
	max-width: 55%;
	
	border: 1px solid var(--contentColor-black);	
}
.lightbox-target {
	z-index: 2;
	
	position: fixed;
	
	top: -100%;

	width: calc(100% - (var(--sideBar-size) + (var(--padding) * 2))); /*Full screen - (SideBar, and padding)*/
	height: calc(100% - (var(--topBar-size) + var(--subTopBar-size)));/*Full screen - (TopBar, BottomBar, and padding)*/
	left: calc(var(--sideBar-size) + (var(--padding) * 2));
	
	/*top: calc(var(--topBar-size) + var(--subTopBar-size));*/
	
	background: rgba(0,0,0,.7);
	opacity: 0;
	-webkit-transition: opacity .25s ease-in-out;
	-moz-transition: opacity .25s ease-in-out;
	-o-transition: opacity .25s ease-in-out;
	transition: opacity .25s ease-in-out;
	overflow: hidden;
	
	/*top: calc(-1* var(--padding));
	left: calc(-1* var(--padding));
	right: calc(-1* var(--padding));
	bottom: calc(-1* var(--padding));*/
}
.lightbox-target img {
	margin: auto;
	position: absolute;
	
	top:0;
	left:0;
	right:0;
	bottom: 0;
	
	max-height: 0%;
	max-width: 0%;
	
	border: 3px solid white;
	box-shadow: 0px 0px 8px rgba(0,0,0,.3);
	box-sizing: border-box;
	-webkit-transition: .25s ease-in-out;
	-moz-transition: .25s ease-in-out;
	-o-transition: .25s ease-in-out;
	transition: .25s ease-in-out;
}
a.lightbox-close {
	z-index: 3;
	
	display: block;
	width:50px;
	height:50px;
	box-sizing: border-box;
	background: white;
	color: black;
	text-decoration: none;
	position: absolute;
	top: -80px;
	right: var(--padding);
	-webkit-transition: .25s ease-in-out;
	-moz-transition: .25s ease-in-out;
	-o-transition: .25s ease-in-out;
	transition: .25s ease-in-out;
}
a.lightbox-close:before {
	content: "";
	display: block;
	height: 30px;
	width: 1px;
	background: black;
	position: absolute;
	left: 26px;
	top: 10px;
	-webkit-transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	-o-transform:rotate(45deg);
	transform:rotate(45deg);
}
a.lightbox-close:after {
	content: "";
	display: block;
	height: 30px;
	width: 1px;
	background: black;
	position: absolute;
	left: 26px;
	top: 10px;
	-webkit-transform:rotate(-45deg);
	-moz-transform:rotate(-45deg);
	-o-transform:rotate(-45deg);
	transform:rotate(-45deg);
}
.lightbox-target:target {
	opacity: 1;
	top: calc(var(--topBar-size) + var(--subTopBar-size));
	bottom: 0;
}

.lightbox-target:target img {
	max-height: calc(100% - (var(--padding) * 2));
	max-width: calc(100% - (var(--padding) * 2));
}

.lightbox-target:target a.lightbox-close {
	top: var(--padding);
}

#InTextIcon {
	position: relative;		

	max-height: 20px;	
	
	background-color: var(--backgroundColor-dark);
	border: 1px solid var(--backgroundColor-dark);
}
#InTextIconNoBackground {
	position: relative;		

	max-height: 20px;	
}

#ContentContainer table {
	border-collapse: collapse;
	
	width: calc(100% - var(--nodeImage-maxWidth) - var(--padding));
	
	background-color: var(--contentColor-light);
	
	margin-bottom: var(--paragraph-spacing);
}
#ContentContainer table.stretch {
	width: 100%;
}
#ContentContainer th { /*Table column headers*/
	border: 1px solid var(--contentColor-dark);
	text-align: left;
	padding: 8px;	
	
	width: var(--table-columnSize);
	min-width: var(--table-columnSize);
	max-width: var(--table-columnSize);
	
	color: var(--textColor-medium);
	background-color: var(--backgroundColor-light);
}
#ContentContainer td {
	border: 1px solid var(--contentColor-dark);
	text-align: left;
	padding: 8px;	
	
	width: var(--table-columnSize);
	min-width: var(--table-columnSize);
	max-width: var(--table-columnSize);
	
	color: var(--textColor-medium);
}
#ContentContainer td.stretch, th.stretch {
	width: 100%;
}

#ContentContainer tr:nth-child(odd) {
  background-color: var(--contentColor-medium);
}

/*Bottom bar*/
#BottomBar {
	z-index: 1;
	background-color: var(--backgroundColor-dark);

	width: calc(100% - (var(--sideBar-size) + (var(--padding) * 4))); /*Full screen - (SideBar, and padding)*/
	left: calc(var(--sideBar-size) + (var(--padding) * 2));
	
	height: var(--bottomBar-size);
	
	position: relative;
	
	bottom: calc(-1 * (var(--bottomBar-size) + (var(--padding) * 2)));

	padding-left: var(--padding);
	padding-right: var(--padding);
	
	box-shadow: 0px -2px 5px grey;
}
#BottomBarText{
	color: var(--textColor-white);
	
	font-size: 10px;
	position: absolute;	
		
	bottom: 5px;
}
#BottomBarText.right{
	float:right;
	
	right: var(--padding);
}
#BottomBarText a{
	color: var(--textColor-white);
	
	font-size: 10px;
	position: absolute;		
}

/*Misc*/
a:link {				/* Hyperlink */
  color: var(--linkColor-medium);
}
a:visited {				/* visited link */
  color: var(--linkColor-medium);
}
a:hover {				/* mouse over link */
  color: var(--linkColor-light);
}
a:active {				/* selected link */
  color: var(--linkColor-dark);
}

.collapsible {			/* Style the button that is used to open and close the collapsible content */
	color: var(--linkColor-dark) !important;
	cursor: pointer;
	
	background-color: #ffffff00;
	
	padding-top: 3px;
	padding-bottom: 3px;
	width: 100%;
	border: none;
	text-align: left;
	
	margin-left: -7px; /*TODO: How should this value be calculated, based on var(--padding)??*/
		
	position: relative;
}
.collapsible:hover {	/* Make the button text white when hovered over */
	color: var(--textColor-white)  !important;
}
.content {				/* Style the collapsible content. Note: hidden by default */
	padding: 0 3px;
	display: none;
	overflow: hidden;
	margin-left: 15px;
}
.collapsible:after {	/* Add an icon to a closed collapsible element */
	content: '\02795'; /* Unicode character for "plus" sign (+) */
	font-size: 9px;
	color: white;
	float: left;
	padding-right: 10px;
}
.active:after {			/* Add an icon to an opened collapsible element */
	content: "\2796"; /* Unicode character for "minus" sign (-) */
}

#PopUp {
	z-index: 6;
	
    height : 100px;
	
	position: fixed;
	
	bottom: 0px;
	width: 100%;
	
	padding-top: 15px;
	padding-bottom: 15px;
	padding-left: 30px;
	padding-right: 30px;
	
	background: rgba(0,0,0,.7);
	opacity: 1;
	-webkit-transition: opacity .25s ease-in-out;
	-moz-transition: opacity .25s ease-in-out;
	-o-transition: opacity .25s ease-in-out;
	transition: opacity .25s ease-in-out;
	overflow: hidden;
}

#PopUpText {
	font-family: Arial;
	font-size: 18px;
	color:var(--textColor-white);
}

a.PopUp:link {				/* Hyperlink */
  font-family: Arial;
  font-size: 18px;
  color: var(--linkColor-light);
}
a.PopUp:visited {				/* visited link */
  font-family: Arial;
  font-size: 18px;
  color: var(--linkColor-light);
}
a.PopUp:hover {				/* mouse over link */
  font-family: Arial;
  font-size: 18px;
  color: var(--textColor-white);
}
a.PopUp:active {				/* selected link */
  font-family: Arial;
  font-size: 18px;
  color: var(--linkColor-medium);
}