@charset "UTF-8";
/* CSS Document */

html {
	font-size: 14px;
	font-family: Verdana, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}



/* COLOUR DEFINITIONS */
:root {
	--black-background-colour: rgba(255, 255, 255,1.00);
	--main-background-colour: rgba(245, 245, 245, 1.00);
	--main-border-colour: rgba(73, 73, 73, 1.00);
	--gold-text-colour: rgba(50, 0, 0, 1.00);
	--blue-text-colour: rgba(0, 0, 20, 1.00);
	
	--level-one-background-colour: rgba(240, 240,240, 1.00);
	--level-one-text-colour: rgba(0, 0, 30, 1.00);
	--level-one-top-border-colour: rgba(0, 0, 20, 1.00);
	--level-one-bottom-border-colour: rgba(0, 0, 30, 1.00);
	
	--level-two-background-colour: rgba(225, 225, 225, 1.00);
	--level-two-text-colour: rgba(0, 0, 30, 1.00);
	--level-two-top-border-colour: rgba(0, 0, 30, 1.00);
	--level-two-bottom-border-colour: rgba(0, 0, 35, 1.00);
	
	--level-three-background-colour: rgba(210, 210, 210, 1.00);
	--level-three-text-colour: rgba(0, 0, 30, 1.00);
	--level-three-top-border-colour: rgba(0, 0, 35, 1.00);
	--level-three-bottom-border-colour: rgba(0, 0, 40, 1.00);
	
	--level-four-background-colour: rgba(195, 195, 195, 1.00);
	--level-four-text-colour: rgba(0, 0, 30, 1.00);
	--level-four-top-border-colour: rgba(0, 0, 40, 1.00);
	--level-four-bottom-border-colour: rgba(0, 0, 45, 1.00);
	
	--level-five-background-colour: rgba(180, 180, 180, 1.00);
	--level-five-text-colour: rgba(0, 0, 30, 1.00);
	--level-five-top-border-colour: rgba(0, 0, 45, 1.00);
	--level-five-bottom-border-colour: rgba(0, 0, 50, 1.00);
	
	--level-six-background-colour: rgba(165, 165, 165, 1.00);
	--level-six-text-colour: rgba(0, 0, 30, 1.00);
	--level-six-top-border-colour: rgba(0, 0, 50, 1.00);
	--level-six-bottom-border-colour: rgba(0, 0, 55, 1.00);
	
	--main-grid-border-radius: .25rem;
	--main-grid-border-width: .1rem;
	--main-grid-margin: .1rem .5rem;
}

body {
	background-color: var(--black-background-colour);
	margin: auto;
	padding: 0px
}

/*  PAGE GRID */
div#code_assistant {
	height: 98vh;
	width: 99vw;
	margin: 1vh auto;
	display: grid;
	grid-template-rows: 3rem 3rem auto 8rem;
	grid-template-columns: 1fr;
	grid-row-gap: .5rem;
	grid-column-gap: .5rem;
	grid-template-areas: 
		"hd"
		"nav"
		"mn"
		"ft"
}

div#code_assistant > header { grid-area: hd }
div#code_assistant > nav { grid-area: nav }
div#code_assistant > main { grid-area: mn }
div#code_assistant > footer { grid-area: ft }

/* GRID STYLE */
div#code_assistant > header,
div#code_assistant > nav button,
div#code_assistant > main > div,
div#code_assistant > main > aside,
div#code_assistant > footer {
	background-color: var(--main-background-colour);
	border-style: solid;
	border-color: var(--main-border-colour);
	border-radius: var(--main-grid-border-radius);
	border-width: var(--main-grid-border-width);
	margin: var(--main-grid-border-margin);
	box-sizing: border-box;
}

div#code_assistant > main {
	height: 100%;
	overflow-y: hidden;
}


div#code_assistant > main > div.content,
div#code_assistant > main > aside {
	box-sizing: border-box;
	height: 100%;
	overflow-y: hidden;
	cursor: default;
}

div#code_assistant > main > div.content > div.content_body,
div#code_assistant > main > div.content > div.search_block {
	height: calc(100% - 0px);
	margin-top: 0px;
	box-sizing: border-box;
	overflow-y: auto;
	color: var(--blue-text-colour);
}

div#code_assistant > main > aside > div {
	height: calc(100% - 2rem);
	margin-top: 0px;
	box-sizing: border-box;
	overflow-y: auto;
}

i.term {
  font-style: italic;
}

i.term:hover {
	text-decoration: underline;
	cursor: pointer;
}

span.reference:hover {
	text-decoration: underline;
	cursor: pointer;
}

span.smallcap {
  font-variant: small-caps;	
}

table {
  border: thin solid #000000
}

tr {
	border-top: thin solid #000000
}

h1 {
	text-align: center;
	font-variant: small-caps;
	font-size: 1.5rem;
	overflow-wrap: break-word;
	margin-top: .25rem;
	margin-bottom: .25rem;
}

h2,
h3,
h4,
h5,
h6 {
	font-size: 1.2rem;
	overflow-wrap: break-word;
	margin-top: .25rem;
	margin-bottom: .25rem;
}

p {
	font-size: 1rem;
	overflow-wrap: break-word;
}

/* HEADER */
div#code_assistant > header {
	display: flex;
}

div#code_assistant > header div {
	flex: auto
}

div#code_assistant > header div:first-child,
div#code_assistant > header div:last-child {
	flex: none;
}

div#code_assistant > header h1 {
	color: var(--gold-text-colour);
	margin: 0px;
	padding: 0px;
	line-height: 3rem;
}

div#code_assistant > header p {
	color: var(--blue-text-colour);
	margin: 0px;
	padding: .25rem .2rem;
	line-height: 1.2rem;
	text-align: left;
}

div#code_assistant > header div.user_greeting p {
	text-align: center;
}

/* NAVIGATION */

div#code_assistant > nav {
	display: flex;
	justify-content: space-between;
	list-style-type: none;
}

div#code_assistant > nav button {
	display: inline;
	text-align: center;
	border-style: solid;
	border-width: .1rem;
	border-radius: .25rem;
	margin: 0px 0px;
	box-sizing: border-box;
}

div#code_assistant > nav button:first-child {
	margin-right: .25rem;
}

div#code_assistant > nav button:last-child {
	margin-left: .25rem;
}

div#code_assistant > nav button.inactive {
	flex: 3 1 auto;
	color: var(--blue-text-colour);
}

div#code_assistant > nav button.active {
	flex: 5 1 auto;
	color: var(--gold-text-colour);
}

/* Main */
div#code_assistant > main {
	display: grid;
	grid-template-rows: 1fr;
	grid-row-gap: .5rem;
	grid-column-gap: .5rem;
}

div#code_assistant > main.single {
	grid-template-columns: auto;
	grid-template-areas: 
		"cnt"
}

div#code_assistant > main.left {
	grid-template-columns: 15rem auto;
	grid-template-areas: 
		"toc cnt"
}

div#code_assistant > main.right {
	grid-template-columns: auto 15rem;
	grid-template-areas: 
		"cnt tl"
}

div#code_assistant > main.both {
	grid-template-columns: 15rem auto 15rem;
	grid-template-areas: 
		"toc cnt tl"
}

div#code_assistant > main aside.toc { grid-area: toc }
div#code_assistant > main div.content { grid-area: cnt }
div#code_assistant > main aside.tool { grid-area: tl }

div#code_assistant > main aside.toc > button:first-child,
div#code_assistant > main aside.tool > button:first-child,
div#code_assistant > main div.content div.content_display button {
	width: 100%;
	box-sizing: border-box;
	line-height: 1.2rem;
	border-color: var(--main-border-colour);
	border-width: var(--main-grid-border-width);
	border-radius: var(--main-grid-border-radius);
	background-color: var(--main-background-colour);
	border-style: solid;
	margin: 0px 0px;
	color: var(--gold-text-colour);
}

div#code_assistant > main div.content {
	display: grid;
	grid-template-rows: 1.6rem auto 1.6rem;
	grid-template-columns: 1fr;
	grid-template-areas: 
		"crumbs"
		"m_content"
		"r_trail"
}

div#code_assistant > main div.content div.content_display { grid-area: crumbs }
div#code_assistant > main div.content div.content_body { grid-area: m_content }
div#code_assistant > main > div.content > div.search_block { grid-area: m_content }
div#code_assistant > main div.content div.reference_trail { grid-area: r_trail }

div#code_assistant > main div.content div.content_display {
	display: grid;
	grid-template-rows: 1fr;
}

div#code_assistant > main.single div.content div.content_display {
	grid-template-columns: 15rem auto 15rem;
	grid-template-areas:
		"toc_btn b_crumb tool_btn"
}

div#code_assistant > main.left div.content div.content_display {
	grid-template-columns: auto 15rem;
	grid-template-areas:
		"b_crumb tool_btn"
}

div#code_assistant > main.right div.content div.content_display {
	grid-template-columns: 15rem auto;
	grid-template-areas:
		"toc_btn b_crumb"
}

div#code_assistant > main.both div.content div.content_display {
	grid-template-columns: auto;
	grid-template-areas:
		"b_crumb"
}

div#code_assistant > main.both div.content div.content_display button.btn_toc { grid-area: toc_btn }
div#code_assistant > main.both div.content div.content_display p { grid-area: b_crumb }
div#code_assistant > main.both div.content div.content_display button.btn_tool { grid-area: tool_btn }

div#code_assistant > main div.content div.content_display p {
	margin: calc(var(--main-grid-border-margin) + var(--main-grid-border-width));
	line-height: 1.6rem;
}

div.levelDivision,
div.levelPart,
div.levelSection,
div.levelSubsection {
	display: flex;
	flex-flow: row nowrap;
	margin-top: 0px;
	padding-top: 0px;
	margin-bottom: 0px;
	padding-bottom: 0px;
	box-sizing: border-box;
}

aside.toc div.levelDivision button:first-child,
aside.toc div.levelPart button:first-child,
aside.toc div.levelSection button:first-child,
aside.toc div.levelSubsection button:first-child,
aside.toc div.levelDivision button:last-child,
aside.toc div.levelPart button:last-child,
aside.toc div.levelSection button:last-child,
aside.toc div.levelSubsection button:last-child {
	flex: 0 0 1rem;
}

aside.toc div.levelDivision h2,
aside.toc div.levelPart h3,
aside.toc div.levelSection h4,
aside.toc div.levelSubsection h5 {
	flex: 1 1 calc(100% - 2.1rem);
	overflow-x: hidden;
	font-size: 1rem;
	text-align: center;
	margin-top: .2rem;
	margin-bottom: .1rem
}

aside.toc div.levelDivision h2.active,
aside.toc div.levelPart h3.active,
aside.toc div.levelSection h4.active,
aside.toc div.levelSubsection h5.active {
	color: black;
}

aside.toc div.levelDivision {
	background-color: var(--level-one-background-colour);
	color: var(--level-one-text-colour);
	border-top-style: solid;
	border-top-width: var(--main-grid-border-width);
	border-top-color: var(--level-one-top-border-colour);
	border-bottom-style: solid;
	border-bottom-width: var(--main-grid-border-width);
	border-bottom-color: var(--level-one-bottom-border-colour);
}

aside.toc div.levelDivision button {
	background-color: var(--level-one-background-colour);
	color: var(--level-one-text-colour);
	border-style: none;
}

aside.toc div.levelPart {
	background-color: var(--level-two-background-colour);
	color: var(--level-two-text-colour);
	border-top-style: solid;
	border-top-width: var(--main-grid-border-width);
	border-top-color: var(--level-two-top-border-colour);
	border-bottom-style: solid;
	border-bottom-width: var(--main-grid-border-width);
	border-bottom-color: var(--level-two-bottom-border-colour);
}

aside.toc div.levelPart button {
	background-color: var(--level-two-background-colour);
	color: var(--level-two-text-colour);
	border-style: none;
}

aside.toc div.levelSection {
	background-color: var(--level-three-background-colour);
	color: var(--level-three-text-colour);
	border-top-style: solid;
	border-top-width: var(--main-grid-border-width);
	border-top-color: var(--level-three-top-border-colour);
	border-bottom-style: solid;
	border-bottom-width: var(--main-grid-border-width);
	border-bottom-color: var(--level-three-bottom-border-colour);
}

aside.toc div.levelSection button {
	background-color: var(--level-three-background-colour);
	color: var(--level-three-text-colour);
	border-style: none;
}

aside.toc div.levelSubsection {
	background-color: var(--level-four-background-colour);
	color: var(--level-four-text-colour);
	border-top-style: solid;
	border-top-width: var(--main-grid-border-width);
	border-top-color: var(--level-four-top-border-colour);
	border-bottom-style: solid;
	border-bottom-width: var(--main-grid-border-width);
	border-bottom-color: var(--level-four-bottom-border-colour);
}

aside.toc div.levelSubsection button {
	background-color: var(--level-four-background-colour);
	color: var(--level-four-text-colour);
	border-style: none;
}

ul.breadCrumbs {
	display: flex;
	flex-flow: row nowrap;
	margin: .1rem;
	padding: .1rem;
	list-style: circle inside;
	overflow-x: auto;
	
}

ul.breadCrumbs li {
	padding-left: .1rem;
	margin-left: 0px;
	flex: 0 0 auto;
}

div#code_assistant > main div.content div.reference_trail {
	display: flex;
	flex-flow: row nowrap;
	margin-top: auto
	margin-bottom: .25rem;
	padding: .1rem;
	height: 1.6rem;
}

div#code_assistant > main div.content div.reference_trail p {
	flex: 1 1 auto;
	text-align: center;
	font-size: 1rem;
	margin: .1rem;
	padding: .1rem;
	border-color: var(--main-border-colour);
	border-width: var(--main-grid-border-width);
	border-radius: var(--main-grid-border-radius);
	background-color: var(--main-background-colour);
	border-style: solid;
}

form#goto_form {
	height: 4.75rem;
	display: flex;
	flex-direction: column;
}

form#goto_form label,
form#goto_form input,
form#goto_form div {
	text-align: center;
}

form#goto_form input.active {
	color: black;
}

form#goto_form div {
	display: flex;
	flex-direction: row;
}

form#goto_form div input {
	flex: 1 1 auto;
}

form#search_form {
	height: 4.75rem;
}

div#code_assistant > main aside.tool form {
	background-color: var(--level-one-background-colour);
	color: var(--level-one-text-colour);
	border-style: solid;
	border-width: var(--main-grid-border-width);
	border-color: var(--level-one-top-border-colour);
}

div#code_assistant > main aside.tool form input {
	background-color: var(--level-two-background-colour);
	color: var(--level-two-text-colour);
	border-style: solid;
	border-width: var(--main-grid-border-width);
	border-color: var(--level-two-top-border-colour);
}

div#code_assistant > main aside.tool div form {
	background-color: var(--level-one-background-colour);
	color: var(--level-one-text-colour);
	border-style: solid;
	border-width: var(--main-grid-border-width);
	border-color: var(--level-one-top-border-colour);
}

div#code_assistant > main aside.tool div form input {
	background-color: var(--level-two-background-colour);
	color: var(--level-two-text-colour);
	border-style: solid;
	border-width: var(--main-grid-border-width);
	border-color: var(--level-two-top-border-colour);
}

div#code_assistant > main aside.tool div form label,
div#code_assistant > main aside.tool div form input{
	display: block;
	width: 98%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

div#code_assistant > main aside.tool div form label {
	margin-top: .25rem;
}

div#code_assistant > main aside.tool div div.search_list h2,
div#display_code.search_list h2 {
	box-sizing: border-box;
	font-size: 1rem;
	margin-top: 0rem;
	margin-bottom: 0rem;
	padding: auto;
	overflow: hidden;
	height: 1.4rem;
	text-overflow: ellipsis;
	background-color: var(--level-one-background-colour);
	color: var(--level-one-text-colour);
	border-top-style: solid;
	border-top-width: var(--main-grid-border-width);
	border-top-color: var(--level-one-top-border-colour);
	border-bottom-style: solid;
	border-bottom-width: var(--main-grid-border-width);
	border-bottom-color: var(--level-one-bottom-border-colour);
}

div#code_assistant > main aside.tool div div.search_list h3,
div#display_code.search_list h3 {
	box-sizing: border-box;
	font-size: 1rem;
	margin-top: 0rem;
	margin-bottom: 0rem;
	padding: auto;
	overflow: hidden;
	height: 1.4rem;
	text-overflow: ellipsis;
	background-color: var(--level-two-background-colour);
	color: var(--level-two-text-colour);
	border-top-style: solid;
	border-top-width: var(--main-grid-border-width);
	border-top-color: var(--level-two-top-border-colour);
	border-bottom-style: solid;
	border-bottom-width: var(--main-grid-border-width);
	border-bottom-color: var(--level-two-bottom-border-colour);
}

div#code_assistant > main aside.tool div div.search_list h4,
div#display_code.search_list h4 {
	box-sizing: border-box;
	font-size: 1rem;
	margin-top: 0rem;
	margin-bottom: 0rem;
	padding: auto;
	overflow: hidden;
	height: 1.4rem;
	text-overflow: ellipsis;
	background-color: var(--level-three-background-colour);
	color: var(--level-three-text-colour);
	border-top-style: solid;
	border-top-width: var(--main-grid-border-width);
	border-top-color: var(--level-three-top-border-colour);
	border-bottom-style: solid;
	border-bottom-width: var(--main-grid-border-width);
	border-bottom-color: var(--level-three-bottom-border-colour);
}

div#code_assistant > main aside.tool div div.search_list h5,
div#display_code.search_list h5 {
	box-sizing: border-box;
	font-size: 1rem;
	margin-top: 0rem;
	margin-bottom: 0rem;
	padding: auto;
	overflow: hidden;
	height: 1.4rem;
	text-overflow: ellipsis;
	background-color: var(--level-four-background-colour);
	color: var(--level-four-text-colour);
	border-top-style: solid;
	border-top-width: var(--main-grid-border-width);
	border-top-color: var(--level-four-top-border-colour);
	border-bottom-style: solid;
	border-bottom-width: var(--main-grid-border-width);
	border-bottom-color: var(--level-four-bottom-border-colour);
}

div#code_assistant > main aside.tool div div.search_list h6,
div#display_code.search_list h6 {
	box-sizing: border-box;
	font-size: 1rem;
	margin-top: 0rem;
	margin-bottom: 0rem;
	padding: auto;
	overflow: hidden;
	height: 1.4rem;
	text-overflow: ellipsis;
	color: var(--blue-text-colour);
	background-color: var(--level-five-background-colour);
	color: var(--level-five-text-colour);
	border-top-style: solid;
	border-top-width: var(--main-grid-border-width);
	border-top-color: var(--level-five-top-border-colour);
	border-bottom-style: solid;
	border-bottom-width: var(--main-grid-border-width);
	border-bottom-color: var(--level-five-bottom-border-colour);
}

div#code_assistant > main aside.tool div div.search_list p {
	height: 4.5rem;
}
div#display_code.search_list p {
	height: auto
}

div#code_assistant > main aside.tool div div.search_list p,
div#display_code.search_list p {
	box-sizing: border-box;
	font-size: 0.9rem;
	margin-top: 0rem;
	margin-bottom: 0rem;
	padding: auto;
	overflow: hidden;
	line-height: 1rem;
	text-overflow: ellipsis;
	color: var(--level-six-text-colour);	display: block;
	background-color: var(--level-six-background-colour);
	color: var(--level-six-text-colour);
	border-top-style: solid;
	border-top-width: var(--main-grid-border-width);
	border-top-color: var(--level-six-top-border-colour);
	border-bottom-style: solid;
	border-bottom-width: var(--main-grid-border-width);
	border-bottom-color: var(--level-six-bottom-border-colour);
}

div#search_footer {
	width: 100%;
	display: flex;
	flex-flow: row nowrap;
	margin-top: 0px;
	padding-top: 0px;
	margin-bottom: 0px;
	padding-bottom: 0px;
	box-sizing: border-box;
	height: 1.8rem;
	background-color: var(--level-one-background-colour);
	border-style: solid;
	border-width: var(--main-grid-border-width);
	border-color: var(--level-one-top-border-colour);
}

div#search_footer button {
	flex: 1 1 auto;
	font-size: 1rem;
	text-align: center;
	margin-top: .1rem;
	margin-bottom: .1rem;
	padding-top: auto;
	padding-bottom: auto;
	box-sizing: border-box;
	background-color: var(--level-two-background-colour);
	color: var(--level-two-text-colour);
	border-style: solid;
	border-width: var(--main-grid-border-width);
	border-color: var(--level-two-top-border-colour);
}

div#search_footer button:first-child {
	margin-left: .1rem;
	margin-right: 0px;
	padding-left: 0px;
	padding-right: 0px;
	border-top-left-radius: .25rem;
	border-bottom-left-radius: .25rem;
}

div#search_footer button:last-child {
	margin-left: 0px;
	margin-right: .1rem;
	padding-left: 0px;
	padding-right: 0px;
	border-top-right-radius: .25rem;
	border-bottom-right-radius: .25rem;
}

div#search_footer button {
	cursor: not-allowed;
}

div#search_footer button.active {
	cursor: pointer;
}

div#tools_display {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
}

div#tools_display button {
	flew: 1 1 0;
	width: 150px;
	height: 150px;
	text-align: center;
	font-size: 1rem;
	margin: .1rem;
	padding: .2rem;
	color: var(--level-one-text-colour);
	border-color: var(--level-one-top-border-colour);
	border-width: var(--main-grid-border-width);
	border-radius: var(--main-grid-border-radius);
	background-color: var(--level-one-background-colour);
	border-style: solid;
}

div#code_assistant > main > div.content > div.search_block form {
	background-color: var(--level-one-background-colour);
	color: var(--level-one-text-colour);
	border-style: solid;
	border-width: var(--main-grid-border-width);
	border-color: var(--level-one-top-border-colour);
}

div#code_assistant > main > div.content > div.search_block form input {
	background-color: var(--level-two-background-colour);
	color: var(--level-two-text-colour);
	border-style: solid;
	border-width: var(--main-grid-border-width);
	border-color: var(--level-two-top-border-colour);
}

div#code_assistant > main > div.content > div.search_block form label,
div#code_assistant > main > div.content > div.search_block form input {
	display: block;
	width: 98%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

div#code_assistant > main > div.content > div.search_block form label {
	margin-top: .25rem;
}

div#code_assistant > main > div.content > div.search_block form {
	display: grid;
	grid-template-rows: 1fr 1fr;
	grid-template-columns: 2fr 1fr;
	grid-row-gap: .1rem;
	grid-column-gap: .1rem;
	grid-template-areas: 
		"st st"
		"sl sb"
}

div.search_block form label { grid-area: st }
div.search_block form input:first-of-type { grid-area: sl }
div.search_block form input:last-of-type { grid-area: sb }

div#code_assistant > main > div.content > div.search_block {
	display: grid;
	grid-template-rows: 4rem auto 2rem;
	grid-template-columns: 1fr;
	grid-row-gap: 0.25rem;
	grid-column-gap: 0.25rem;
	grid-template-areas: 
		"sf"
		"sr"
		"sc"
}

div.search_block form#search_page { grid-area: sf}
div.search_block div.search_list {grid-area: sr}
div.search_block div.search_footer {grid-area: sc}

div#code_assistant > main > div.content > div.search_block div.search_list {
	height: 100%;
	overflow-y: auto;
}