@page {margin: 2cm} 
@media screen{
head {background-color:#B4D6B4; 
}
#print-head {display:none}
body {background-color: #e6e6e6 /*#C5D3D3*//*#B4D6B4*/; color: #031B3F; font-family: arial, helvetica, sans-serif; padding:15px; line-height:1.3em;}
/*div#space {background-color:#FFFFFF; width:99%; margin:auto; padding: 20px; line-height:1.2em; } */

div#top {width:100%; background-color:#bad7e6/*#D9E9D9*/; padding:5px; border-top-left-radius: 45px; 
border-bottom-right-radius: 45px;}
div#bannerImage {float:left;}
div#bannerImage img {width:150px}

div#title{font-size:30px; font-weight:bold; color:#FF0000; }
div#title a { text-decoration:none;}

div.boilerplate span {text-indent:5px;
    color:#63604F;
    margin-left:1em;
    display:block;
    font-size:smaller;
    line-height:1.4em;}
    
div.boilerplate img {position: relative; top:7px; right: -2px }


div.image {background-color:#B4D6B4; float:left; width:40%}
div.wideImage {float:left; width:100%; padding:25px}
div.explan{background-color:#3F4F3F; float:right; width:60%; padding:15px;}


div.imageAlt {float:right; width:35%; margin-left: auto;
    margin-right: auto; padding:15px;}
div.explanAlt{background-color:#B4D6B4; float:left; width:65%; padding:15px;}
div.container {background-color:#B4D6B4; width:100%; }
section.sub {padding-left: 5em;}
/* 2023-08-20 ebb: Added to help indent sub-sections. For future, I should apply more container section structures throughout my syllabus template. */

h1 {color:#5F0000; letter-spacing:1.1px; display:inline; font-size: 2.3em; text-align:center; padding: 10px; line-height: 1.12;}
h2 {color:#005BEB; font-family:arial, helvetica, sans-serif; font-size: 1.3em; text-align:left; line-height: 1.12;
}
h3 {color:#5F0000;
 font-family:arial, helvetica, sans-serif; font-size: 1.1em; text-align:left; padding:3px; line-height: 1.12;
}
h4{color:#5F0000; font-family:"Trebuchet MS", Helvetica, sans-serif; font-size: 1em; text-align:left; 
    
}
/* ebb: Styling for Jump "button" that jumps to today's date */
#dateRef {border:outset black 1px; font-size:larger; font-weight:bold; color:crimson; background-color:white; padding: 1vw;  border-radius: 2vw;}
span.h4 {color:#5F0000; display:inline-block; font-family:"Trebuchet MS", Helvetica, sans-serif; font-size: 1em; text-align:left;   
} /*ebb: Needed for styling headings in table header cells. h4 is invalid as a descendant of th. */

q {quotes:'“' '”' '‘' '’'; 
}

cite.sub {font-style:normal;}
cite.sub::before {content:'“'; 
}
cite.sub::after {content:'”';
}

q cite.sub::before {content: '‘'}
q cite.sub::after {content: '’'}
cite.sub cite.sub::before {content: '‘'}
cite.sub cite.sub::after {content: '’'}

img
{padding:5px;}

p {display:block; padding:2px 2px 2px 2px}

hr { display: block; height: 1px;
    border: 0; border-top: 1px solid #AA0000;
    margin: 1em 0; padding: 0; }
    
span.smaller {display:inline-block;; font-size:0.8em; line-height:1.2em; padding:2px}

span.red {color: #AA0000; font-weight:bold;}
span.green {color: #004C00; font-weight:bold;}
span.purple {color:#6600FF; font-weight:bold;}

span.code {color:#AA0000; font-weight:bold; width: 60%; margin:auto;}
code {color:#AA0000; font-weight:bold; width: 60%; margin:auto; font-family: arial, helvetica, sans-serif; }

div.code {background-color: #9EA9B9; color:#000; border:1px navy dashed; padding:10px; line-height:1.5em; width:60%; margin:auto;}
span.badCode {color:#5F0000; background-color: #FFD6D6; width: 60%; margin:auto;}

div.badCode {background-color: #FFD6D6; border:1px red dashed; padding:10px; line-height:1.5em; width:60%; margin:auto; }

span.indent {margin-left: 2em;}

span.indentMore {margin-left:5em;}

span.indentEvMore {margin-left:7em}


ul {list-style-type: square;}

ul li {padding: .3vw;}
ul li ul {list-style-type: circle; padding: .25vw;}
ul li ul li { padding: 1px; margin-left:20px; font-size: smaller;}

ol li { padding: 1px}

ol.d {list-style-type: lower-alpha; display: block; padding: 10px 10px 20px 20px}

a:link {color:#043a8a/*#AA0000*/;}      /* unvisited link */
a:visited {color:#660066
;}  /* visited link */
a:hover {color:#FF0000;}  /* mouse over link */
a:active {color:#FF0000;}  /* selected link */

table { border-collapse: collapse; width: 100%;
border: 2px solid #BF9E7D;
/*border: 0*/
}

tr {border-collapse: collapse; border: 0}

th
{ border-collapse: collapse;
border: 1px solid  #000066;
background-color: #bad7e6 /*#7E967E*/;
padding: 1px;
vertical-align:top;
}

td 
{ border-collapse: collapse;
border: 1px solid #000066;
padding: 7px;
vertical-align:top;
}
 

th:nth-child(1), td:nth-child(1) {
width:12%; text-align:center; 
}

th:nth-child(2), td:nth-child(2) {
width:34%; 
}

th:nth-child(3), td:nth-child(3) {
width:34%;  
}
th:nth-child(4), td:nth-child(4) {
width:10%;  
}
th:nth-child(5), td:nth-child(5) {
width:10%;  
}
td:nth-child(1) {background-color:#bad7e6/*#7E967E*/;}
/*td:nth-child(2), td:nth-child(3) {background-color:#e1ebf0/\*#C5D3D3*\/;}*/
}

td.zoom {background-color:#e6df9a}

@media print {
 body {color: #000;
 background: #fff; 
 font: 12pt;
 line-height: 1.12;
 }   
 h1, h2, h3, h4 {page-break-after: avoid; 
 page-break-inside: avoid;}
 tr, td {page-break-inside: avoid;}
 
tr {border-collapse: collapse; border: 0} 
table, td, th {border-collapse: collapse;
border: 1px solid black;
vertical-align:top; }
th:nth-child(1), td:nth-child(1) {
width:10%; text-align:center;   
}

th:nth-child(2), td:nth-child(2) {
width:45%;  
}

th:nth-child(3), td:nth-child(3) {
width:45%; }
div#bannerImage {float:left}
div#bannerImage img {width:150px}
}