@page {margin: 2cm} 
@media screen{
head {background-color: #B4D6B4;
;}

body {background-color: #e6e6e6 /*#C5D3D3*/ /*#B4D6B4*/; color: #031B3F; font-family: arial, helvetica, sans-serif; padding:15px; line-height:1.4em}
/*div#space {background-color:#FFFFFF; width:99%; margin:auto; padding: 20px; line-height:1.2em; } */

div#top {width:100%; background-color:#bad7e6/*#bdb3b3*//*#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;}
    
.showCaseAlt {width: 80%; max-width:500px}

section.showCaseHeader {display:flex; width:90%;/*flex-direction:row;*/ /*justify-content:space-between;*/}
div.showCase{flex:3}
div.showCaseImg {flex:1;}
img.showCaseAlt {padding:0; width:100%; max-width:400px; min-width:150px;}


div.explanAlt{background-color:#B4D6B4; float:left; width:65%; padding:15px;}
div.container {background-color:#B4D6B4; width:100%; }
.codeContainFlex {display:flex; flex-direction: row; justify-content:space-between; min-width: 0}
.codeContainFlex table {flex: 1;}
/* 2020-11-01 ebb Trying to control pre within flex containers, we need to set the min-width to 0: https://stackoverflow.com/questions/32035406/how-to-limit-pre-tag-width-inside-flex-container */
.codeContainFlex pre {flex: 1; min-width:0;}


img#frontispiece {max-width:5000px; width:100%}

h1 {color:#5F0000/*#AA0000*/; 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.25em; text-align:left; padding:3px; line-height:1.12
}
h4{color:#005BEB; font-family:arial, helvetica, sans-serif;  font-size: 1em; text-align:left; padding:0; line-height:1.12
    
}

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

div.flexContain{display:flex; flex-direction:row;}
figure {width:10%}
figure.mbtei {width:40%}
figure img {max-width:1000px; width:100%}
figcaption {font-style:italic; font-size:.8em;}

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;}
img.screenCap{width:75%}

p {display:block; padding:2px 2px 2px 2px; line-height:1.2em;}

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

pre {background-color: #b8ccd6 /* #9EA9B9*/; color:#000; border:1px navy dashed; padding:10px; line-height:1.5em; margin:auto; font-family: arial, helvetica, sans-serif; }
div.code {background-color: #b8ccd6 /*#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}

dl {margin-left: 20px}
dt {color:#AA0000; font-weight:bold; font-style:italic; line-height:1.2em;  padding-bottom:2px}

dd {font-size:0.9em; line-height:1.2em;  padding-bottom:5px}

ul {list-style-type: circle;}

ul li { padding: 5px}


ol li { padding: 10px}
ol li ol li {padding: 5px; list-style-type: lower-alpha;}

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

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

table, th, td
{border-collapse: collapse;
border: 1px solid #000066;    
padding: 15px;
vertical-align:top;
}
th {border-collapse: collapse;
border: 1px solid  #000066;
background-color: #bad7e6; /*#7E967E;*/
padding: 1px;
vertical-align:middle;}
}
table.studentProjects {table-layout: fixed; }
table.studentProjects tr td {width:20%;}

table.showCase {vertical-align: middle; margin:auto;}
table.showCase tr:nth-child(even) {background-color:/*#dcd0ff*/ /*#dbd7d2*/ #c3cde6;}
@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, li {page-break-inside: avoid;}
 
tr {border-collapse: collapse; border: 0} 
table, td, th {border-collapse: collapse;
border: 1px solid black;
padding: 2px;
vertical-align:top; }
div#bannerImage {float:left}
div#bannerImage img {width:150px}
}