/* by James Khazar
   Created: July 13th, 2017 
   Modified for public use April 2022
   
   Colors:
   	Dark Blue: #006fa5
   	light blue: #B9E4F8
	lighter blue: #C9EBFB
	lightest blue: #D7F0FC
	Dark gray: #333333
	
   Shades of blue
	#299bd6
	#4da3da
	#66acde
	#7cb5e2
	#91bfe6
	#a6caeb
	#bbd5ef
	#d1e1f4
	#e6eef9
	Target screen width for Cañada projectors is 913px wide
*/

body {
	font-family: "LatoWeb", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
	/* If not using inside Canvas */
	margin: 2em;
	/* This is the max width of the Canvas page.
	   Turn it off if using inside Canvas as it
	   allows the page width to optimize inside
	   Canvas */
	width: 900px !important; 
	/* Change to a good size for viewing method. 
	   1.5em works well in Zoom and displayed on large screen */
	font-size: 1.5em;
	background-color: #fff;
}

a {
	text-decoration: none !important;
}

a:hover {
	color: #000 !important;
}



/* FIRST HEADLINE */

#setwidth {
	width: 1320px;
	border-bottom: 7px solid #006fa5;
	padding-bottom: .25em;
}

#setwidth + section {
	border: none;
}





/* ****************************************** images ******************************************** */

img {
	border: 1px solid #000;
	box-shadow: 0px 5px 10px #aaa;
	margin-top: .5em;
	margin-bottom: .5em;
	display: block;
}

.boxme img {
	box-shadow: 0px 5px 10px #858799;
}

.cover {
	object-fit: cover !important;
}

.img-inline {
	display: inline !important;
	margin: 0 .5em .5em 0;
}

.w05,
.w10,
.w15,
.w20,
.w25,
.w30,
.w33,
.w35,
.w40,
.w45,
.w50,
.w55,
.w60,
.w65,
.w66,
.w70.w75,
.w80,
.w85,
.w90,
.w95 {
	float: left;
	margin-right: .5em;
}

.w05 {
	width: 5% !important;
}

.w10 {
	width: 10% !important;
}

.w15 {
	width: 15% !important;
}

.w20 {
	width: 20% !important;
}

.w25 {
	width: 25% !important;
}

.w30 {
	width: 30% !important;
}

.w33 {
	width: 33% !important;
}

.w35 {
	width: 35% !important;
}

.w40 {
	width: 40% !important;
}

.w45 {
	width: 45% !important;
}

.w50 {
	width: 50% !important;
}

.w55 {
	width: 55% !important;
}

.w60 {
	width: 60% !important;
}

.w65 {
	width: 65% !important;
}

.w66 {
	width: 76% !important;
}

.w70 {
	width: 70% !important;
}

.w75 {
	width: 75% !important;
}

.w80 {
	width: 80% !important;
}

.w85 {
	width: 85% !important;
}

.w90 {
	width: 90% !important;
}

.w95 {
	width: 95% !important;
}

.w100 {
	width: 100% !important;
}

.mh {
	max-height: 100hw;
}

.h-quarter {
	height: .25em;
}

.h-half {
	height: .5em;
}

.h1 {
	height: 1em;
}

.h2 {
	height: 2em;
}

.h3 {
	height: 3em;
}

.h4 {
	height: 4em;
}

.h5 {
	height: 5em;
}

.flat {
	border: none !important;
	box-shadow: none !important;
}

.flatter {
	border: none;
	box-shadow: none;
	display: inline;
}

.cover {
	object-fit: cover;
}

.flipmehoriz {
	-moz-transform: scaleX(-1);
	-o-transform: scaleX(-1);
	-webkit-transform: scaleX(-1);
	transform: scaleX(-1);
	filter: FlipH;
	-ms-filter: "FlipH";
}

.borderme {
	border: 1px solid #000;
}

.shadowme {
	box-shadow: 0px 5px 10px #aaa;
}

.shadowmedark {
	box-shadow: 0px 5px 10px #000;
}

.shadowtext {
	text-shadow: 0px 5px 10px #aaa;
}

.shadowtextdark {
	text-shadow: 0px 5px 10px #000;
}

.noshadow {
	box-shadow: none;
	text-shadow: none;
}

.floatl,
.fl {
	float: left;
	margin-right: 10px;
}

.floatr,
.fr {
	float: right;
	;
	margin-left: 10px;
}

.nofloat,
.clearme,
.cl {
	clear: both;
}

.spacer-1 {
	height: 1em;
}

.spacer-2 {
	height: 2em;
}

.spacer-3 {
	height: 3em;
}

.spacer-5 {
	height: .5em;
}

.spacer-25 {
	height: .25em;
}

.spacer-125 {
	height: .125em;
}

.minhi {
	min-height: 1em;
}





/* Lists next to floats */

.floatl + ul {}

.floatl + ul li,
.fl + ul li {
	position: relative;
	left: 1.5em;
	padding-right: 2em;
}

.floatl + ul ul li,
.fl + ul ul li {
	left: 2.5em;
	padding-right: 3em;
}





/* ****************************************** tags ******************************************** */

h1,
h2,
h3,
h4,
h5 {
	text-transform: capitalize;
	font-family: lato;
	font-weight: 900 !important;
	text-align: left;
	color: #006fa5;
	letter-spacing: -.02em;
	margin: 0;
	line-height: 1em;
}

h1 {
	font-size: 1.75em;
	margin: 0;
}

h2 {
	font-size: 1.5em;
	margin: 0;
}

h3 {
	font-size: 1.25em;
	margin: 0;
}

h4 {
	font-size: 1em;
	margin: 0;
}

h5 {
	font-size: .75em;
	margin: 0;
	;
	text-transform: uppercase;
}

h1 + h2,
h1 + h3,
h1 + h4,
h1 + h5 {
	margin-top: .25em !important;
}

h2 + h3,
h2 + h4,
h2 + h5 {
	margin-top: .5em !important;
}

h3 + h4,
h3 + h5 {
	margin-top: .75em !important;
}

h4 + h5 {
	margin-top: .75em !important;
}





/* Take space out of top of paragraph after heading */

h1 + p,
h2 + p,
h3 + p,
h4 + p,
h5 + p,
h1 + ul,
h2 + ul,
h3 + ul,
h4 + ul,
h5 + ul,
h1 + ol,
h2 + ol,
h3 + ol,
h4 + ol,
h5 + ol {
	margin-top: .5em;
}





/* Special Targeting */


/* first h1 on a page */

body > h1 {
	font-size: 2.25em;
}





/* target first section on page */

h1 + section {}

h1 + h1,
h2 + h2,
h3 + h3,
h4 + h4 {
	margin-top: .5em
}

p {
	margin-bottom: 1em;
}





/* shortcuts for styles */

.center,
.c {
	text-align: center !important;
}

.right,
.r {
	text-align: right !important;
}

.left,
.l {
	text-align: left !important;
}

.justify,
.j {
	text-align: justify !important;
}

.underline,
.u {
	text-decoration: underline !important
}

.strikethru {
	text-decoration: line-through !important
}

.overline {
	text-decoration: overline !important;
}

.italic,
.i {
	font-style: italic !important;
}

.oblique {
	font-style: oblique !important;
}

.rel {
	position: relative;
}

.abs {
	position: absolute;
	height: 55px;
}

strong {
	font-weight: 900;
}

q:before,
.q:before,
.quote:before {
	content: '“';
}

q:after,
.q:after,
.quote:after {
	content: '”';
}

ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

ul li,
ol ul li {
	line-height: 1.125em;
	margin-bottom: 1.125em;
	margin-left: 0;
	padding-left: .75em;
	text-indent: -.75em;
}

ol li {
	line-height: 1.125em;
	margin-bottom: 1.125em;
	margin-left: .25em;
	padding-left: .25em;
	text-indent: -.1275em;
}

h3 + ol {
	margin-top: .5em;
}

ul ul li {
	margin-left: 1.75em;
}

ul ul ul li {
	margin-left: 3.25em;
}

ul ul ul ul li {
	margin-left: 5.25em;
}

ul li::before,
ol ul li::before {
	content: "• ";
	color: #555;
}

ul ul li::before {
	content: "• ";
	color: #888;
}

ul ul ul li::before {
	content: "• ";
	color: #aaa;
}

ul ul ul ul li::before {
	content: "• ";
	color: #ccc;
}

ol li::before,
ol ol li::before {
	content: "";
}

ol li {}

.nobull::before {
	content: "" !important;
}





/* Something above messes with fontawsome icons in lists. This couteracts it */

ol li .fa {
	margin-left: 1.25em;
	margin-right: -.5em;
}

ul li .fa {
	margin-left: .75em;
	margin-right: 0em;
}

li + p {
	margin-left: 1.5em;
	margin-bottom: .5em;
	line-height: 1.125em;
	font-style: italic
}

ul ul li + p {
	margin-left: 3.25em;
}

.empty-ol-li {
	color: rgba(0, 0, 0, 0.0);
	margin-top: -1.5em
}





/* Pair these to make ordered lists with bold numbers */

.boldnum {
	font-weight: 900;
}

.boldnum span {
	font-weight: normal;
}





/* **************************** formatting text ****************************** */

.bold {
	font-weight: 900 !important;
}

.notbold {
	font-weight: normal !important;
}

.fl {
	text-align: left !important;
}

.fr {
	text-align: right !important;
}

.just {
	text-align: justify !important;
}

.cent {
	text-align: center !important;
}

.ital {
	font-style: italic !important;
}

.obli {
	font-style: oblique !important;
}

.norm {
	font-style: normal !important;
}

.em5 {
	font-size: .5em;
}

.em75 {
	font-size: .75em;
}

.em100 {
	font-size: 1em;
}

.em125 {
	font-size: 1.25em;
}

.em150 {
	font-size: 1.5em;
}

.capsinit {
	text-transform: capitalize;
}

.capsall {
	text-transform: uppercase;
}

.capsnone {
	text-transform: lowercase;
}

.notrans {
	text-transform: none;
}

.tip {
	background: #006fa5;
	color: #fff;
	padding: .125em .25em;
	letter-spacing: .125em;
}





/* **************************** spacing ****************************** */

.in0 {
	margin-left: 0;
}

.in1 {
	margin-left: .9em;
}

.in2 {
	margin-left: 2.5em;
}

.in3 {
	margin-left: 4em;
}

.out1 {
	margin-left: -.9em;
}

.out2 {
	margin-left: -2.5em;
}

.out3 {
	margin-left: -4em;
}

.nospace li {
	margin-bottom: 0;
}

.somespace li,
.sp li {
	margin-bottom: .5em;
}

.add-above,
.aa {
	margin-top: .5em !important;
}

.add-above-less,
.aal {
	margin-top: .25em !important;
}

.add-above-more,
.aam {
	margin-top: 1em !important;
}

.add-above-max,
.aamx {
	margin-top: 2em !important;
}

.add-below,
.ab {
	margin-bottom: .5em !important;
}

.add-below-less,
.abl {
	margin-bottom: .25em !important;
}

.add-below-more,
.abm {
	margin-bottom: 1em !important;
}

.add-below-max,
.abmx {
	margin-bottom: 2em !important;
}

.add-left,
.al {
	margin-left: .5em !important;
}

.add-left-less,
.all {
	margin-left: .25em !important;
}

.add-left-more,
.alm {
	margin-left: 1em !important;
}

.add-left-max,
.almx {
	margin-left: 2em !important;
}

.add-right,
.ar {
	margin-right: .5em !important;
}

.add-right-less,
.arl {
	margin-right: .25em !important;
}

.add-right-more,
.arm {
	margin-right: 1em !important;
}

.add-right-max,
.armx {
	margin-right: 2em !important;
}

.sub-above,
.sa {
	margin-top: -.5em !important;
}

.sub-above-less,
.sal {
	margin-top: -.25em !important;
}

.sub-above-more,
.sam {
	margin-top: -1em !important;
}

.sub-above-max,
.samx {
	margin-top: -4em !important;
}

.sub-below,
.sb {
	margin-bottom: -.5em !important;
}

.sub-below-less,
.sbl {
	margin-bottom: -.25em !important;
}

.sub-below-more,
.sbm {
	margin-bottom: -1em !important;
}

.sub-below-max,
.sbmx {
	margin-bottom: -2em !important;
}

.sub-left,
.sl {
	margin-left: -.5em !important;
}

.sub-left-less,
.sll {
	margin-left: -.25em !important;
}

.sub-left-more,
.slm {
	margin-left: -1em !important;
}

.sub-left-max,
.slmx {
	margin-left: -2em !important;
}

.sub-right,
.sr {
	margin-right: -.5em !important;
}

.sub-right-less,
.srl {
	margin-right: -.25em !important;
}

.sub-right-more,
.srm {
	margin-right: -1em !important;
}

.sub-right-max,
.srmx {
	margin-right: -2em !important;
}





/* **************************** sizing ****************************** */

.size-xx-small {
	font-size: .5em;
}

.size-x-small {
	font-size: .66em;
}

.size-small {
	font-size: .75em;
}

.size-medium {
	font-size: 1em;
}

.size-large {
	font-size: 1.25em;
}

.size-x-large {
	font-size: 1.5em;
}

.size-xx-large {
	font-size: 1.75em;
}

.size-huge {
	font-size: 2em;
}

.fit99 {
	font-size: .99em;
}

.fit98 {
	font-size: .98em;
}

.fit97 {
	font-size: .97em;
}

.fit96 {
	font-size: .96em;
}

.fit95 {
	font-size: .95em;
}

.fit90 {
	font-size: .90em;
}

.fit85 {
	font-size: .85em;
}

.fit80 {
	font-size: .80em;
}

.fit75 {
	font-size: .75em;
}

.fit110 {
	font-size: 1.1em;
}

.fit115 {
	font-size: 1.15em;
}

.fit120 {
	font-size: 1.2em;
}

.fit125 {
	font-size: 1.25em;
}





/* **************************** Redesign links to be more obvious **************************** */

a:link,
a:hover,
a:visited,
a:active {
	text-decoration: none;
	box-shadow: inset 0 -2px 0 #006fa5;
}

a:link.nounder,
a:link.nu {
	text-decoration: none;
	box-shadow: none;
}





/* ************** Sections, Articles, Code Blocks, Quote Blocks **************** */

section {
	border-top: solid 6px #006fa5;
	margin-bottom: 2em;
	padding-top: .25em;
	margin-top: .5em;
	clear: both;
}

section:last-of-type {
	margin-bottom: 6em;
}

article {
	border-top: solid 3px #006fa5;
	margin-bottom: 2em;
	padding-top: .25em;
	clear: both;
}

section article:first-of-type {
	margin-top: 2.5em;
}

.columns-2 {
	-webkit-column-count: 2;
	/* Chrome, Safari, Opera */
	-moz-column-count: 2;
	/* Firefox */
	column-count: 2;
	-webkit-column-rule: 1px solid #ccc;
	/* Chrome, Safari, Opera */
	-moz-column-rule: 1px solid #ccc;
	/* Firefox */
	column-rule: 1px solid #ccc;
	-webkit-column-gap: 1em;
	/* Chrome, Safari, Opera */
	-moz-column-gap: 1em;
	/* Firefox */
	column-gap: 1em;
}

.columns-3 {
	-webkit-column-rule: 1px solid #ccc;
	/* Chrome, Safari, Opera */
	-moz-column-rule: 1px solid #ccc;
	/* Firefox */
	column-rule: 1px solid #ccc;
	-webkit-column-count: 3;
	/* Chrome, Safari, Opera */
	-moz-column-count: 3;
	/* Firefox */
	column-count: 3;
	-webkit-column-gap: 1em;
	/* Chrome, Safari, Opera */
	-moz-column-gap: 1em;
	/* Firefox */
	column-gap: 1em;
}

.columns-4 {
	-webkit-column-rule: 1px solid #ccc;
	/* Chrome, Safari, Opera */
	-moz-column-rule: 1px solid #ccc;
	/* Firefox */
	column-rule: 1px solid #ccc;
	-webkit-column-count: 4;
	/* Chrome, Safari, Opera */
	-moz-column-count: 4;
	/* Firefox */
	column-count: 4;
	-webkit-column-gap: 1em;
	/* Chrome, Safari, Opera */
	-moz-column-gap: 1em;
	/* Firefox */
	column-gap: 1em;
}





/* get all the first heading in sections and articles correctly spaced relative to top border */

article h1:first-of-type,
article h2:first-of-type,
article h3:first-of-type,
article h4:first-of-type,
section h1:first-of-type,
section h2:first-of-type,
section h3:first-of-type,
section h4:first-of-type {
	margin-top: 0;
}

hr {
	border-top: solid 3px #006fa5;
}

.codeblock {
	background-color: #333333;
	padding: 1em 1em .75em 2em;
	margin-bottom: 1em;
	border-radius: .25em;
	position: relative
}

.codenum {
	color: #7E7E7E;
	font-size: .85em;
	line-height: 1.5em;
	position: absolute;
	top: 1.6em;
	left: 5px;
}

.inlinecode,
i {
	font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
	font-weight: bold;
	font-style: normal;
	color: #999;
}

.inlinecode em,
i em {
	color: #00BFBB;
	font-style: normal;
}
/* processing format */
    .proc {
      border: 1px solid #666;
      font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
      border-radius: .25em;
      background: none !important;
      color: #666;
    }

pre {
	font-size: .85em;
	border: none;
	background-color: #333333;
	color: white;
	letter-spacing: .01em;
	line-height: 1.5em;
	padding: 1em;
}

pre em {
	font-style: normal;
	color: #00FF51
}

pre strong {
	font-style: normal;
	color: #FF9A9B
}

.notcode {
	font-family: 'Lato', sans-serif;
	color: black;
	font-weight: normal;
}





/* ----------------------Code Coloring and Boxes-------------------*/

._c,
._gray {
	color: #aaa !important;
}





/* gray */

._dg,
._dgray,
._darkgray {
	color: #666 !important;
}

._r,
._green {
	color: #82cc87 !important;
}





/*green*/

._i,
._red {
	color: #dd6667 !important;
}





/*red*/

._s,
._orange {
	color: #e8c152 !important;
}





/* orange */

._t,
._h,
._blue {
	color: #81B8EE !important;
}





/* blue */

._bl,
.black {
	color: #000 !important
}





/*
Dark Blue: #006fa5
   	light blue: #B9E4F8
	lighter blue: #C9EBFB
	lightest blue: #D7F0FC
	Dark gray: #333333
	*/

._regblue {
	color: #006fa5;
}

._lightblue {
	color: #B9E4F8;
}

._lighterblue {
	color: #C9EBFB;
}

._lightestblue {
	color: #D7F0FC;
}

.proc,
.as,
.snippet {
	border: 1px solid #006fa5;
	/*
	font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
	*/
	font-family: 'Inconsolata', monospace;
	font-size: 1em;
	border-radius: 0 0 .5em .5em;
	background: none !important;
	color: #000;
	padding: 1.5em;
	box-shadow: 0 7px 15px rgba(0, 0, 0, .5);
	margin-left: 0;
	margin-bottom: 1.5em
}

.snippet {
	border-radius: .5em;
}

.as {
	border-color: #929292;
	border-top: none;
}

.proc strong,
.snippet strong {
	color: black;
	font-weight: 900 !important;
	background-color: #FFE880
}

.proctitle,
.astitle {
	background-color: #006fa5;
	color: #fff;
	position: relative;
	padding: 0;
	margin: 0;
	height: 2em;
	border-radius: .5em .5em 0 0;
}

.proctitle p:first-child,
.astitle p:first-child {
	position: absolute;
	top: -.25em;
	left: .45em;
	font-weight: 900;
}

.proctitle p:nth-child(2),
.astitle p:nth-child(2) {
	position: absolute;
	top: -.25em;
	right: .5em;
}

.proctitle a,
.astitle a {
	color: white;
	text-decoration: underline;
}

.proctitle .ed1 {
	font-size: .75em;
	color: #bbd5ef;
	text-transform: capitalize;
}

.prenum {
	position: absolute;
	top: 5px;
	font-family: 'Source Code Pro', monospace;
	font-size: .5em;
	line-height: 3em;
	padding: 0 .5em 0 2em;
	color: #bbdddd;
	border-radius: 0 0 0 1em;
}

.astitle {
	background-color: #929292
}

.as .kw {
	color: #800080;
}

.as .com {
	color: #808080;
}

.as .id {
	color: #5555FF;
}

.as .st {
	color: #009900;
}

.as {
	color: #000;
}

.keys {
	font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
	font-weight: bold;
	color: #999;
	letter-spacing: -.05em;
	padding: .25em;
	margin: -.25em;
}

.keycap {
	border: 2px solid #666;
	border-radius: .25em;
	background: rgb(190, 190, 190);
	background: linear-gradient(180deg, rgba(210, 210, 210, 1) 0%, rgba(255, 255, 255, 1) 100%);
	color: #666;
	font-weight: normal;
	padding: 3px 5px 0 5px;
	margin: 0 .125em 0 .125em;
	box-shadow: 0 4px 5px #aaa;
}

.console {
	font-family: 'Inconsolata', monospace;
	font-size: 1.25em;
	border-radius: 0 0 .5em .5em;
	background-color: #333 !important;
	padding: 1.5em;
	box-shadow: 0 7px 15px rgba(0, 0, 0, .5);
	margin-left: 0;
	margin-bottom: 1.5em
}





/* -------------------- p5j canvas stuff ------------ */

.canvasholder {
	padding: 0 0 0 0;
	background-color: #ddd;
	background-image: url(http://khazar.com/academics/portal/canada/mart385/images/sketchtop.png);
	background-repeat: no-repeat;
	border-radius: 5px 5px 0 0;
	border: 1px solid #aaa;
	box-shadow: 0px 15px 50px rgba(0, 0, 0, .5);
}





/* -------------------- quotation stuff ------------ */

blockquote {
	padding: .5em 1.25em 1.25em 1.25em;
	background-color: #B9E4F8;
	border-radius: .25em;
	border: none;
}

blockquote img {
	box-shadow: 0px 5px 10px rgba(0, 0, 0, .5);
}

blockquote p {
	font-size: 1.25em;
	font-family: 'Libre Baskerville', serif;
	line-height: 1.5em;
}

.attribution {
	font-size: .75em;
	text-align: right;
	font-weight: 900;
	text-transform: uppercase;
	color: #006fa5
}

.hangquote {
	position: relative;
	padding: 0 .5em
}

.hangquote::before {
	content: '“';
	font-size: 2em;
	position: absolute;
	left: -.25em;
	top: .25em;
	color: #006fa5;
}






/* #B9E4F8 */

.hangquote::after {
	content: '”';
	text-align: right !important;
	font-size: 2em;
	position: absolute;
	right: 0em;
	bottom: -.25em;
	color: #006fa5;
}

.hangleftquote {
	position: relative;
	padding: 0 .5em
}

.hangleftquote::before {
	content: '“';
	font-size: 2em;
	position: absolute;
	left: -.25em;
	top: .25em;
	color: #006fa5;
}





/* #B9E4F8 */

pre + blockquote {
	padding: 5em;
}

blockquote + pre {
	padding: 5em;
}

.boxme {
	border: 1px solid #000 !important;
	padding: 1em 1.5em;
	background-color: #D7F0FC;
	border-radius: .25em;
}

.borderme {
	border: 1px solid black !important;
}

.fontbox {
	font-size: 3em;
	padding: 1em;
	margin: 20px 0 20px 0;
	width: 700px;
	border: 1px solid black;
	text-align: center;
}

.indent1 {
	margin-left: 1em;
}

.indent2 {
	margin-left: 2em;
}

.indent3 {
	margin-left: 3em;
}

.indent4 {
	margin-left: 4em;
}

.sizer {
	position: absolute;
	right: 0;
	top: 0;
}

.sizer a,
.sizer a:hover,
.sizer a:active,
.sizer a:visited {
	text-decoration: none !important;
	color: black;
	cursor: pointer;
}

.sizer a:after {
	background: none
}

.size-val {
	color: #bbb !important;
}

#width-widget {
	height: 4px;
	background-color: #006fa5;
	width: 1015px;
	border-right: 2px solid red;
}

#toggleme,
.toggleme,
.nodisplay {
	display: none;
}





/* ------------------ Abs position highlighters and pointer ---------------------- */

.highlightdiv {
	border: 4px solid #ffbb00;
	box-shadow: inset 0 0 10px #000, 0 0 10px #000;
	border-radius: 15px;
	position: absolute;
}

.roundhighlightdiv {
	border: 4px solid #ffbb00;
	box-shadow: inset 0 0 10px #000, 0 0 10px #000;
	border-radius: 100%;
	position: absolute;
	height: 30px;
	width: 30px;
}

.pointer,
.pointer2x,
.pointer15x {
	color: #ffbb00 !important;
	text-shadow: 0 0 10px #000;
}

.pointer2x {
	font-size: 2em;
}

.pointer15x {
	font-size: 1.5em;
}

.encircle {
	filter: drop-shadow( 0px 0px 5px #000);
	width: 100px;
	height: 100px;
}

.rot45 {
	-ms-transform: rotate(45deg);
	/* IE 9 */
	-webkit-transform: rotate(45deg);
	/* Chrome, Safari, Opera */
	transform: rotate(45deg);
}

.rot90 {
	-ms-transform: rotate(-90deg);
	/* IE 9 */
	-webkit-transform: rotate(-90deg);
	/* Chrome, Safari, Opera */
	transform: rotate(-90deg);
}

.rot135 {
	-ms-transform: rotate(135deg);
	/* IE 9 */
	-webkit-transform: rotate(135deg);
	/* Chrome, Safari, Opera */
	transform: rotate(135deg);
}

.rot225 {
	-ms-transform: rotate(225deg);
	/* IE 9 */
	-webkit-transform: rotate(225deg);
	/* Chrome, Safari, Opera */
	transform: rotate(225deg);
}

.rot270 {
	-ms-transform: rotate(270deg);
	/* IE 9 */
	-webkit-transform: rotate(270deg);
	/* Chrome, Safari, Opera */
	transform: rotate(270deg);
}

.rot315 {
	-ms-transform: rotate(315deg);
	/* IE 9 */
	-webkit-transform: rotate(315deg);
	/* Chrome, Safari, Opera */
	transform: rotate(315deg);
}

.popupvalue,
.inputvalue,
.tabvalue,
.fieldvalueup,
.fieldvaluedown,
.checkboxvalue {
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	background-color: #444;
	color: #ccc;
	border: 1px solid #ccc;
	border-radius: .35em;
	font-size: .75em;
	white-space: pre;
	padding: 3px;
	vertical-align: text-top;
}

.popupvalue::before,
.inputvalue::before {
	content: " ";
}

.popupvalue::after {
	font: normal normal normal 14px/1 FontAwesome;
	content: "  \f107"
}

.inputvalue::after {
	content: " ";
}

.inputvalue::before {
	content: " ";
}

.inputvalue {
	border-radius: .3em;
}

.tabvalue {
	color: #00BFFF;
	border-radius: 0;
	background-color: #333333;
}

.twosetvalue1,
.twosetvalue2 {
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	background-color: #555;
	color: #ccc;
	font-size: .75em;
	white-space: pre;
	padding: 3px;
	vertical-align: text-top;
}

.twosetvalue2 {
	background-color: #333;
	border-left: 1px solid #999;
	border-right: 1px solid #999;
}

.fieldvaluedown::before {
	font: normal normal normal 14px/1 FontAwesome;
	content: "\f107   ";
}

.fieldvalueup::before {
	font: normal normal normal 14px/1 FontAwesome;
	content: "\f106   ";
}

.menuvalue {
	background-color: #8C8C8C;
	color: white;
	padding: 1px 1em 3px .25em;
	white-space: pre;
	font-size: .75em;
	vertical-align: text-top;
}

.menuvalue::before {
	content: " ✓ ";
}

.checkboxvalue {
	border-radius: 0;
	border: 1px solid #444;
	padding-bottom: 4px;
	padding-right: .5em;
	padding: 3px .5em 4px
}

.checkboxvalue::before {
	content: " ✓ ";
	display: inline-block;
	background: #ccc;
	color: #555;
	margin-right: .5em;
	border-radius: 6px;
	font-weight: bold;
}

.menucarrot:before {
	color: #555;
	content: "▸";
}

li .menucarrot:before {
	margin-left: 0;
	margin-right: 0;
}

.checkmark::before {
	content: " ✓ ";
	color: white;
	background-color: #888;
	padding: 2px 0 2px 5px;
	font-size: .75em;
	margin-right: 2px;
	border-radius: .25em;
}

.radiobutton::before {
	content: "⦿";
	font-size: 1em;
	padding: 0px .35em .125em;
	color: #aaa;
	background: #333;
	border-radius: 1em;
	height: 1.25em;
	display: inline-block
}

.button,
.whitebutton,
.canvasbutton {
	background-color: #444;
	border: 1px solid #ddd;
	color: #eee;
	border-radius: 1em;
	text-align: center;
	display: inline-block;
	font-size: .8em;
	padding: 0px 15px 1px 15px;
}

.whitebutton {
	background-color: white;
	color: #333;
	border-color: #555;
}

li .button {
	padding: 0px 0 1px 15px;
}

.canvasbutton {
	background-color: #006fa5;
	color: #fff;
	font-size: .75em;
	border-color: #000;
	border-radius: 3px;
	padding: .35em .66em
}





/* ------------------ tables ---------------------- */

.simpletable table {
	border-collapse: collapse;
}

.simpletable td {
	border: 1px solid #666;
	padding: .5em;
	vertical-align: top;
}

.rot90 {
	-ms-transform: rotate(-90deg);
	/* IE 9 */
	-webkit-transform: rotate(-90deg);
	/* Chrome, Safari, Opera */
	transform: rotate(-90deg);
}

#myTable td {
	vertical-align: top;
	padding: .5em;
	border-left: 1px solid #666;
	border-bottom: 1px solid #666;
}

#myTable td:first-child {
	width: 2em;
	font-weight: bold;
	font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
}

#myTable {
	border-collapse: collapse;
	border: 1px solid #666;
}



/* ------------------ bottom nav ---------------------- */

#nextclass {
	float: right;
	margin: 0;
}

#prevclass {
	float: left;
	margin: 0;
}

#nextclass a,
#prevclass a,
#classmenu a,
#projmenu a {
	box-shadow: none
}





/* ------------------ Class menu -------*/

#classmenu li {
	float: left;
	list-style: none;
	font-size: .65em;
	text-align: center;
	border-bottom: 1px solid #ccc;
	border-right: 1px solid #ccc;
	width: 30px;
	height: 30px;
	margin: 0;
	padding: 0;
	text-indent: 0px;
	line-height: 30px;
}

#classmenu a {
	display: block;
}

#classmenu a:hover {
	background-color: #006fa5;
	color: white;
}

#classmenu {
	width: 341px;
	margin: auto;
	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
	height: 93px;
}

#classmenu li::before {
	content: "" !important;
}

#classmenu .directlink {
	width: 340px;
	border-left: 1px solid #ccc;
	margin-left: -1px;
	font-size: .5em;
	height: 1.5em;
	line-height: 1.5em
}

#classmenu.weeks-17 {
	width: 186px;
}

#classmenu .doublewide {
	width: 61px;
}

#classmenu.weeks-17 .directlink {
	width: 185px;
}





/* ------------------ projmenu -------*/

#projmenu li {
	float: left;
	list-style: none;
	font-size: .65em;
	text-align: center;
	border-bottom: 1px solid #ccc;
	border-right: 1px solid #ccc;
	width: 84px;
	height: 30px;
	margin: 0;
	padding: 0;
	text-indent: 0px;
	line-height: 30px
}

#projmenu a {
	display: block;
}

#projmenu a:hover {
	background-color: #006fa5;
	color: white;
}

#projmenu {
	width: 255px;
	margin: auto;
	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
	height: 62px;
}

#projmenu li::before {
	content: "" !important;
}

#currentclass {
	background-color: #D7F0FC;
}

.copybutton img {
	width: 1.5em;
	margin-top: 4px;
	box-shadow: none;
	display: inline;
	border: none;
}

.copybutton {
	width: 3em;
	background: none;
	border: none;
	cursor: pointer;
}

.bigscrollbar::-webkit-scrollbar-thumb {
	border-radius: 20px;
	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
	background-color: #666;
}

.bigscrollbar::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
	background-color: #F5F5F5;
	width: 2em;
}





/* ----------- Affinity div ----------------------------*/

.affinity {
	/*  border: 1px solid #666;
  background-color: #EEE5D3;
  padding: 2em;
  border-radius: .5em;
*/
	color: firebrick !important;
	font-size: .8em
}

.affinity:before {
	color: firebrick;
	content: "IN AFFINITY: ";
}

li.affinity {
	margin-left: 1em;
}

li + li.affinity {
	margin-left: 3em;
}



/* ----------- processing text chapter break ----------------------------*/

.chapterbreak {
	background-color: #fa0;
	padding: .5em;
	border-bottom: 7px solid #006fa5;
	border-top: 7px solid #006fa5;
	margin: 0;
}

.chapterbreak + section {
	border: none;
}




/* ----------- processing numbering ----------------------------*/

.prn {
	background-color: #222;
	color: #889999;
	margin-left: -1.5em;
	margin-right: .25em;
	border-bottom: 10px solid #222;
	border-right: 4px solid #222;
}



/* ----------- Chapter contents list ----------------------------*/

ol.contents li {
	list-style-type: none !important;
	font-weight: bold;
	font-size: 1.25em;
	margin: 0;
	margin-top: .5em;
	padding: 0;
}

ol.contents ol li {
	font-weight: normal;
	font-size: 1em;
	margin-top: .25em;
	margin-left: .5em;
}

ol.contents {
	list-style-type: none !important;
	margin-left: 1em;
	padding: 0;
}

ol.ital {
	font-size: .75em
}

/* ----------- Processing Color Coding when ----------------------------*/
/* ----------- Formated at https://andrewsun.com/tools/syntax-highlighter/ -----------*/
/* ----------- Within Inline CSS turned off ----------------------------*/
/* ----------- Much more accurate than their css -----------------------*/
		.hljs-keyword {
			color: #669900;
		}

		.hljs-built_in {
			color: #006699;
		}

		.hljs-datatype {
			color: #006699;
		}

		.hljs-comment {
			color: #999;
		}

		.hljs-string {
			color: #804b96;
		}

		.hljs-title {
			color: #006699;
			font-weight: 900;
		}

		.hljs-number {
			color: #000;
		}

		.hljs-reserved {
			color: #d94a7a;
		}

		.hljs-property {
			color: #718a62;
		}

		.hljs-constant {
			color: #718a62;
		}

		.hljs-datatype {
			color: #FF8C00
		}

		.hljs-new {
			background-color: #fffecc;
		}

		.proc {
			font-family: 'Source Code Pro', monospace;
			font-weight: 500;
			line-height: 1.33em;
		}

		.proc-code-small {
			font-size: .9em;
		}

		.proc-code-smaller {
			font-size: .8em;
		}

		.proc-code-smallest {
			font-size: .7em;
		}