/* THIS FILE IS KEPT at https://accounts.smccd.edu/khazarj/dvc/canvas_dvc_pagestyles.css
   by James Khazar
   Created: July 13th, 2017 
   
   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
*/
.test {
  background-color: red;
}
body {
  background-color: #fff;
  font-family: 'Lato', sans-serif;
  font-size: 24px;
  padding: 0em .5em 4em 0;
}

#fixwidth {
  width: 1086px;
}

.sizer-22-113,
.set-width-canada,
#set-width-canada {
  border-top: 6px solid #006fa5;
  border-right: 1px solid #f00;
  /* width:1099px; */
  width: 1264px;
  height: 4px;
}

.set-width-canada-nobars {
  width: 1264px;
}



/* 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;
}

.img_25 {
  width: 25%;
  float: left;
  margin-right: .5em;
}

.p_25 {
  width: 70%;
  margin-top: .125em;
}

.img_33 {
  width: 33%;
  float: left;
  margin-right: .5em;
}

.p_33 {
  width: 60%;
  margin-top: .125em;
}

.img_50 {
  width: 50%;
  float: left;
  margin-right: .5em;
}

.p_50 {
  width: 45%;
  float: left;
  margin-top: .125em;
}

.img_75 {
  width: 75%;
  float: left;
  margin-right: .5em;
}

.p_75 {
  width: 20%;
  float: left;
  margin-top: .125em;
}

.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;
}

.w60 {
  width: 60% !important;
}

.w66 {
  width: 66% !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;
}

.w49 {
  width: 49% !important;
}

.w100 {
  width: 100% !important;
}

.w150 {
  width: 150px !important;
}

.w200 {
  width: 200px !important;
}

.w250 {
  width: 250px !important;
}

.w300 {
  width: 300px !important;
}

.w350 {
  width: 350px !important;
}

.w400 {
  width: 400px !important;
}

.w450 {
  width: 450px !important;
}

.w500 {
  width: 500px !important;
}

.w550 {
  width: 550px !important;
}

.w600 {
  width: 600px !important;
}

.w650 {
  width: 650px !important;
}

.w700 {
  width: 700px !important;
}

.w750 {
  width: 750px !important;
}

.w800 {
  width: 800px !important;
}

.w850 {
  width: 850px !important;
}

.w900 {
  width: 900px !important;
}

.w950 {
  width: 950px !important;
}

.w1000 {
  width: 1000px !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;
}

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);
}



/* -------------------------------- 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;
}

/* --------------------------------------- digital paining home --------------------------------------------------------*/

.home {
	margin-bottom: 2em;
}

.home a:link {
	text-decoration: none;
	box-shadow: none;
}