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

*/

body {
	background-color:#fff;
	font-family: 'Lato', sans-serif;	
	font-size:24px;
	padding: 1em  1em 4em 1em;
	
}
canvas {
	border: 1px solid black;
	box-shadow: 0px 5px 10px #aaa;
}
/* ****************************************** images ******************************************** */
img {
	border:1px solid #000;
	box-shadow: 0px 5px 10px #aaa;
	margin-top:.5em;
	margin-bottom:.5em;
	display:block; 
}
.img-inline {
	display:inline !important;
	margin: 0 .5em .5em 0;
}

.w25 {width:25%;}
.w30 {width:30%;}
.w33 {width:33%;}
.w40 {width:40%;}
.w45 {width:45%;}
.w50 {width:50%;}
.w60 {width:60%;}
.w66 {width:66%;}
.w70 {width:70%;}
.w75 {width:75%;}
.w80 {width:80%;}
.w90 {width:90%;}
.w100 {width:100%;}

.flat {
	border:none;
	box-shadow:none;
}
.borderme { border:1px solid #000; }
.shadowme { box-shadow: 0px 5px 10px #aaa; }

.floatl {
  float: left;
  margin-right:10px;
}
.floatr {
  float: right;;
  margin-left:10px;
}
.nofloat, .clearme {
  clear:both;
}

/* Lists next to floats */
.floatl + ul { }
.floatl + ul li {
	position:relative;
	left:1.5em;
	padding-right:2em;
}
.floatl + ul  ul li {
	left:2.5em;	
	padding-right:3em;
}

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


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: #bbb; 
}
ul ul ul ul li::before {
  content: "• ";
  color: #ddd; 
}
ol li::before, ol ol li::before {
	content:"";
}

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


/* **************************** formatting text ****************************** */
/* shortcuts for styles */
.center, .c, .cent { text-align:center !important; }
.right, .r, .fr { text-align:right !important; }
.left, .l, .fl {text-align:left !important;}
.justify, .j, .just {text-align:justify !important; }
.underline, .u {text-decoration:underline !important}
.strikethru {text-decoration:line-through !important}
.overline {text-decoration:overline !important;}
.italic {font-style:italic !important;}
.oblique {font-style:oblique !important;}

strong {font-weight:900; }

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

/* **************************** 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 {
	margin-bottom:.5em;	
}

.add-above { margin-top:.5em !important; }
.add-above-less{ margin-top:.25em !important; }
.add-above-more { margin-top:1em !important; }
.add-above-max { margin-top:2em !important; }

.add-below { margin-bottom:.5em !important; }
.add-below-less { margin-bottom:.25em !important; }
.add-below-more{ margin-bottom:1em !important; }
.add-below-max{ margin-bottom:2em !important; }

.add-left { margin-left:.5em !important;	 }
.add-left-less { margin-left:.25em !important;	 }
.add-left-more { margin-left:1em !important;	 }
.add-left-max { margin-left:2em !important;	 }

.add-right { margin-right:.5em !important;	 }
.add-right-less { margin-right:.25em !important;	 }
.add-right-more { margin-right:1em !important;	 }
.add-right-max { margin-right:2em !important;	 }

.sub-above { margin-top:-.5em !important; }
.sub-above-less { margin-top:-.25em !important; }
.sub-above-more { margin-top:-1em !important; }
.sub-above-max {margin-top:-4em !important; }

.sub-below { margin-bottom:-.5em !important; }
.sub-below-less { margin-bottom:-.25em !important; }
.sub-below-more { margin-bottom:-1em !important; }
.sub-below-max { margin-bottom:-2em !important; }

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

.size-xx-small{font-size:xx-small;}
.size-x-small{font-size:x-small;}
.size-small{font-size:small;}
.size-medium{font-size:medium;}
.size-large{font-size:large;}
.size-x-large{font-size:x-large;}
.size-xx-large{font-size:xx-large;}
.size-smaller{font-size:smaller;}
.size-larger{font-size:larger;}

/* **************************** Redesign links to be more obvious **************************** */
a:link, a:hover, a:visited, a:active {
  text-decoration:none;
  box-shadow: inset 0 -2px 0 #006fa5
}

/* ************** 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 {
	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:#222; 
	color:white; 
	line-height:1.5em; 
}
/* --------------------------------------------------Code Boxes-----------------------------------------------*/
._c { color:#888; }
._r { color:#82cc87; }
._i { color:#dd6667; }
._s { color:#e8c152; }

pre em { font-style:normal; color:#00FF51}
pre strong {font-style:normal; color:#FF9A9B}
pre b {font-weight:900;}

.proc, .as, .snippet {
	border:1px solid #006fa5;
	font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
	border-radius: 0 0 .5em .5em;
	padding: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:1em 0 -1em;
	height:2em;
	border-radius: .5em .5em 0 0;
	
}
.proctitle p:first-child, .astitle p:first-child { 
	position:absolute;
	top:-.5em;
	left:.45em;
	font-weight:900;
}
.proctitle p:nth-child(2), .astitle p:nth-child(2)  { 
	position:absolute;
	top: -.5em;
	right:.5em;
}
.proctitle a, .astitle a {
	color:white;
	text-decoration:underline;
}
.proctitle .ed1 { font-size:.75em; color:#bbd5ef}
.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;
}
blockquote {
 	padding:.5em 1.25em 1.25em 1.25em;
	background-color:#B9E4F8;
	border-radius:.25em;
	border:none;	
}
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;
}
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; }

#toggleme {display:none;}

/* -------------------------------- 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 {box-shadow: none}

#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;
}
#currentclass {
	background-color:#D7F0FC;	
}