body {padding:0; margin: 0; background-color: #ffffff; font-family: Calibri, Arial, sansserif;}
a:link {	color: black;}
a:visited {color: black;}
a:hover {	text-decoration: none; color: red;}
a:active {	color: black;}

h1, h2{ text-decoration: none; font-weight: normal; color: darkblue;}
h3, h4 {text-decoration: none; font-weight: bold; color: darkblue;}

table {width: 100%; border-collapse:collapse;}
td {padding:10px;}
th {padding:10px; font-weight:bold; text-align:center;}
.trdisplay {border-top: 1px solid #888; border-bottom: 1px solid #888;}
.normaltd {border: 1px solid black; }
.normaltable {width: 100%; border: 1px solid black;border-collapse:collapse;}

.para {margin-bottom: 0; margin-top: 0;}
.ctr {text-align:center; }
.code_slot {color: #888; font-size: 80%; font-weight:normal;}
.hangingindent {  padding-left: 22px ;  text-indent: -22px ;}
.paraindent {text-indent:1cm;}
.element_title {text-decoration: underline;}
.close_button {text-align:center; background-color:#ebebeb; padding: 5px; width:7em; border: 1px solid silver; float: right;}
.hilite {border: 1px solid #666; padding:15px; margin: 3px; background-color:#f1f1f1;}
.lispaced {margin-top: 5px; margin-bottom: 5px;}
.spaced2 {margin-top: 10px;}
.spaced3 {margin-top: 15px; font-weight:bold;}
.spaced4 {margin-top: 15px; margin-bottom: 10px; font-weight:bold; color: darkblue}
.new {color: red; font-size: 80%; font-weight:normal;}
.mybox {border: 1px solid darkblue; padding:5px; margin:3px;}
.mybox2 {border: 1px solid darkblue; padding:5px; margin:3px;}
.tiny {color: #333; font-size: 80%; font-weight:normal;}
.indexhdg{font-size: 120%; color:darkblue;}


/* Keep sections together in index pages: Not presently used in favour of orphans and widows
.indexp {break-inside: avoid; text-align:center;} */

/* Apply widows and orphans to sections in index pages */
.indexp {orphans:3; widows:3; text-align:center;}

.mybox {border: 1px solid #666; padding:5px; margin:5px;} */

.hint {font-size:120%; text-shadow: 0 0 12px darkorange, 0 0 16px gold;}
/* lightbulb hint: <span class="hint">&#x1f4a1;</span> */

.warning {font-size:150%; color:#f33;}
/* warning : <span class="warning">&#9888;</span> */

.explanation {font-size:150%;}
/* explanation: <span class="explanation">&#129300;</span> */

/* Banner graphic; full width of screen with no margin */
.lead_pix
   {width:100%;
   height:auto;
   display: block;
   padding: 0;
   margin:0;
   border: none;    /* Removes any actual borders */
   outline: none;   /* Removes any focus outlines */
}

/* Default styles */
.degree { width:100%; background-color:white; border:0; text-align:center; color:#663300; padding:5px; }
.dtitle { font-size:150%; }
.txt { width:100%; background-color:white; border:0; text-align:left; color:#663300; padding:5px; }
.content { padding:20px; }
.columnarea { column-count:1; }

/* Picture in text, landscape format */
.pix {
 width:300px;
 max-width:100%;
 height:auto;
 float:right;
 margin-left:15px;
 margin-top:15px;
 margin-right:0;
 margin-bottom:15px;
 padding:5px;
 border:1px solid #888;
 box-sizing:border-box;
}

/* Picture in text, portrait format*/
.pix_ptrt {
float:right;
width:25%;
height:auto;
margin-left:15px;
margin-top:15px;
margin-right:0;
margin-bottom:15px;
padding:5px;
border:1px solid #888;
box-sizing:border-box;
}

/* ===== Small screens (0–599px) ===== */

@media only screen and (max-width:599px) {
.content { padding:5px; }
.columnarea {column-count:1;}
.pix {width:min(250px, 45%);}
}

/* ===== Medium screens (600–999px) ===== */
@media only screen and (min-width:600px) and (max-width:999px) {
.content {padding:40px;}
.columnarea {column-count:2; }
.pix {width:min(300px, 45%;)}
}

/* ===== Large screens (1000px and above) ===== */
@media only screen and (min-width:1000px) {
.content {padding:50px;}
.columnarea {column-count:3;}
.pix {width:min(420px, 45%); margin: 12px 0 12px 12px;}
}
/* Making the images slightly responsive rather than fixed widths. This allows the image to scale smoothly as the browser window changes size, instead of jumping from 250 → 300 → 420 pixels at the breakpoints. For example:
.pix {
 width:min(420px, 45%);
 max-width:100%;
 height:auto;
 ...
}

*/

/*CSS to govern how pages will dispay when printed*/
@page {  size: A4 portrait;}
@page :left {  margin-left: 3cm;}
@page :right {  margin-left: 4cm;}
@page{orphans:4; widows:2;}

/*Always put h1 on new */
/* h1 {  page-break-before: always;}*/

/*Avoid page breaks directly after any heading*/
h1, h2, h3, h4, h5 {page-break-after: avoid;}

/*Always insert a page-break after a <footer> element: */
@media print {    footer {page-break-after: always;}} 

/*Avoid dividing tables beween two pages*/
table, figure {  page-break-inside: avoid; }

/*Specifies first page*/
@page :first { }

/*Put page number in*/
@page:right{  @bottom-right {    content: counter(page);  } }
@page:left{  @bottom-left {    content: counter(page);} }

/*Put chapter numbers in*/
body {  counter-reset: chapternum;}
h1.chapter:before {
  counter-increment: chapternum;
  content: counter(chapternum) ". "; }

/* Top margin on first page 10cm */
@page :first { margin-top: 10cm   }