div.lecture-notes {
	line-height: 1.5em;
	/*max-width: 75%;*/
}

div.advice {
	line-height: 1.5em;
	max-width: 75%;
}

li.advice {list-style-type: none; color: blue}
li.opt_advice {list-style-type: none; color: #AAAAAA}
li.opt {color: #AAAAAA; background: #dddddd}

li.code-example {
	padding-top: 10;
	padding-bottom: 10;
} 

td.goodCode {
	color:green;
	font-family: monospace;
	padding-left: 15;
	padding-top: 15;
	text-align: left;
	vertical-align: top;
	width: 40%
}

td.badCode {
	color:red;
	font-family: monospace;
	padding-left: 15;
	padding-top: 15;
	text-align: left;
	vertical-align: top;
	width: 40%
}

div.chatgpt {border: thin solid; width:90%; background:#f0f30a}
span.user {color:#f2280c}
span.chat {color:#2296d8}
div.user {color:#f2280c}
div.chat {color:#2296d8}

div.boxed  {border: thin solid}
div.important {border: thick solid; border-color:red}}

div.instructionsheader {line-height: normal; font-weight: bold}
div.instructions{line-height:normal; background:LightCyan; border:1px solid; color: black; margin-right: 20%; overflow-wrap:break-word;}
div.notesheader {line-height: normal; margin-left:5%; font-weight: bold; font-size: larger}
#div.notes {line-height: normal; background:#eeeeee; margin-left:5%; margin-right:40%; font-size:smaller}
div.notes {line-height: normal; background:#eeeeee; margin-left:5%; margin-right:40%;}
div.codeheader {line-height: normal; font-weight: bold; font-size: larger}

div.detour {border:1px solid; background: WhiteSmoke}
#pre.code {line-height:normal; background:LightYellow; border:1px solid; color: blue; margin-right:20%; overflow-wrap:break-word; font-size:smaller; tab-size:3}
pre.code {line-height:normal; background:LightYellow; border:1px solid; color: blue; margin-right:20%; overflow-wrap:break-word; tab-size:3}
pre.incorrect-code {line-height:normal; background: LightPink; border:1px solid; color: blue; margin-right:20%; overflow-wrap:break-word; font-size:smaller; tab-size:3}
span.incorrect-code {background: Yellow;color: red}
pre.stdin		{background: LightGrey; color:Black; width:80%}
pre.infile	{background: LightGrey; color:Black; width:80%}
/*pre.stdout	{background: LightGrey; color:Black; width:80%}*/
pre.stdout	{line-height: normal; background: Khaki /*#f3da0a*/; color: blue; width:80%; border: 1px solid}
pre.outfile	{background: LightGrey; color:Black; width:80%}

span.divheader {font-weight: bold}
span.divhdr {font-weight: bold; margin-left:5%}

div.input {border: thin solid; width:90%}
div.output {border: thin solid; width:90%}
div.interactive {border: thin solid; width:90%; color:yellow; background:blue}
pre.interactive {border: thin solid; width:90%; color:yellow; background:blue}
div.input-header {font-weight:bold}
pre.output	{font-size: smaller; font-family: "Courier new"; background: #000000; color:Yellow; width:80%}
pre.input	 	{font-size: smaller; font-family: "Courier new"; background: #b7f30a; color:;Black;  width:80%}
span.divheader {font-weight: bold}
span.preheader {font-weight: bold; font-family: "Courier new"; color: blue; background: LightGrey}
div.samplerun {background:black;color:white;border:1px solid #ccc;padding:5px 10px;}

/*body, table {font-size: large;}*/
caption {font-size: x-large; font-weight: bold}
code  {font-weight: bold; color: green}
div.added {background: #00ffff}
div.assignment {border: thin solid; background: #eeeeee}
div.boxed  {border: thin solid}
div.code  {border: thin solid}
div.exercise {border: thin solid; width:90%; background: #eeeeee}
div.important {border: thin solid; width:90%; color:red; background: #eeeeee}
div.optional {border: dotted; background: #eeeeee; color: #999999}
div.pageTitle {h1;text-align:center;}
div.problemStatement {border: thin solid; margin-left: 10%; width: 80%; align: center; font-style: italic; background: #eeeeee}
div.program  {border: thin solid}
div.purpose {border: thin solid; width:90%; background: #eeeeee}
div.rule {color: #0000ff; background:#eeeeee; border: thin solid; margin-left: 10%; margin-right: 10%}
div.sidebar {background: #eeeeee; color: #777777; border: thin solid; margin-left: 5%; margin-right: 5%; width: 75%}
div.text {color: blue; background: #f0f0f0}
div.textReading {border:1px solid; background:PowderBlue;}
h1.pageTitle {text-align:center}
h2.shaded {background: #f0f0f0}
h2.centered {text-align:center}
h3.FAQ {background: #f0f0f0}
h3.assignmentHeading {text-align: center; color:red}
h3.programTitle {background: #f0f0f0}
h3.shaded {background: #f0f0f0}
h4 {font-weight: bold}
h4.shaded {background: #f0f0f0}
img.shaded {background: #f0f0f0}
img.block {display:block; margin-left:10%; border: thin solid; color: blue; padding: 10px;}
li.con {color:#ff0000}
li.pro {color:#008800}
/*pre {line-height:normal; background:LightYellow; border:1px solid; color: blue; margin-left: 10%; width: 80%; overflow-wrap:break-word;}*/
pre em {font-style: italic}
pre.exercise	{background: #202020; color:yellow; margin-left:10%; width: 80%}
pre.optional 	{background: #eeeeee; color:#7d8ac6; margin-left:10%; width:80%}
span.approval {color: blue;}
span.codelab {font-weight: bold; color: #006600}
span.def {font-weight: bold; color: purple}
span.error {color: red;}
span.red {color: red;}
span.important {font-weight: bold; color:red}
span.incomplete {font-weight: bold; color:red; background: yellow}
span.lab {font-weight: bold; color:red; background: #ffffff}
span.oldoptional {background: #cccccc; color: #666666}
span.opt {color: #888888}
span.optional {color: #AAAAAA}
span.placeholder {font-style: italic; color: #FF00FF}
span.program-ref {font-weight: bold; font-family: Courier}
span.pseudo {font-style: italic; color: #CC0099}
span.standout {font-size: larger}	
span.tangent {color: gray}
span.testrun {color: blue; font-weight: bold}
span.text {color: blue; background: #f0f0f0}
span.vital {font-weight: bold; color:red; background: #ffffff}
span.wiki {background: #eeeeee}
table pre	{background: #ffffff; margin-left: 1%; width: 90%; -moz-tab-size: 4; -o-tab-size: 4; tab-size: 4;}
table pre em {color: blue; font-style: italic}
table {border: 1px solid #000000; border-collapse: collapse;}
td, th {border: 1px solid #000000;}
th.row {text-align: left}
tr.past {background: #c0c0c0}

span.hlight3 {background: GreenYellow}
span.highlight {background: Yellow}
span.highlight2 {background: Gold}
span.hlight {background: Yellow}
span.hlight2 {background: Gold}
span.hlight3 {background: GreenYellow}
span.hlight4 {background: GreenYellow}
span.hlight5 {background: GreenYellow}

/*** Code Highlighting ***/

/***
General Guidelines

Stick with pastel colors for larger areas of highlight to avoid overwhelming the eyes.
Use brighter colors like yellow or light blue for key items or smaller highlighted sections.
Avoid colors that are too dark or that blend with your code background color.
If you're using multiple colors, make sure they are sufficiently different to avoid confusion.
***/

/* Softer Highlights (Less Intense) */

<span.hlight11 {background: #fff9c4} /* Pale Yellow (Good for subtle highlights) */
<span.hlight12 {background: #e3f2fd} /* Pale Blue (Calming, not too bold) */
<span.hlight13 {background: #e8f5e9} /* Pale Green (Soft, easy on the eyes) */
<span.hlight14 {background: #f3e5f5} /* Lavender (Light purple, gentle but noticeable) */
<span.hlight15 {background: #ffe0b2} /* Peach (Soft orange, for warmth) */

/* More Vivid Highlights (Higher Contrast) */

<span.hlight21 {background: #ffeb3b} /* Bright Yellow (Classic highlight color) */
<span.hlight22 {background: #81d4fa} /* Light Blue (Energetic, stands out) */
<span.hlight23 {background: #aed581} /* Light Green (Noticeable, but not overwhelming) */
<span.hlight24 {background: #ffccbc} /* Light Coral (Warm, but less harsh than red) */
<span.hlight24 {background: #ce93d8} /* Light Purple (Good for adding variation) */

/* Strong Contrasts (High Visibility) */

<span.hlight31 {background: #ffeb3b} /* Bold Yellow */
<span.hlight32 {background: #80deea} /* Light Cyan (Noticeably different) */
<span.hlight33 {background: #ff8a80} /* Pale Red (Attention-grabbing, but not too harsh) */
<span.hlight34 {background: #ffcc80} /* Bright Orange (Vivid and warm) */


.collapsible {
    cursor: pointer;
    background-color: #f1f1f1;
    border: none;
    padding: 10px;
    text-align: left;
    outline: none;
    font-size: 15px;
}

.active, .collapsible:hover {
    background-color: #ccc;
}

.content {
    padding: 0 10px;
    display: none;
    overflow: hidden;
    background-color: #f9f9f9;
    border-left: 3px solid #ddd;
    margin-bottom: 10px;
}

pre {
    margin: 0;
    padding: 10px;
}