body {
	margin: 20px;
}

p.caption {
  color: #777;
  margin-top: 10px;
}
p code {
  white-space: inherit;
}
pre {
  word-break: normal;
  word-wrap: normal;
}
pre code {
  white-space: inherit;
}
p.flushright {
  text-align: right;
}
blockquote > p:last-child {
  text-align: right;
}
blockquote > p:first-child {
  text-align: inherit;
}
.header-section-number {
  padding-right: .2em;
  font-weight: 500;
}
.level1 .header-section-number {
  display: inline-block;
  border-bottom: 3px solid;
}
.level1 h1 {
  border-bottom: 1px solid;
}
h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
}
h1.title {
  font-weight: 700;
}
.smallcaps {
  font-variant: small-caps;
}
.book .book-body .page-wrapper .page-inner section.normal strong {
  font-weight: 600;
}

.answer{
  font-size: small;
  background-color: rgb(255, 255, 255);
  padding: 1em 1em 0 0; /* top right bottom left */
  margin-bottom: 5px;
  margin-top: 5px;
}


.example{
  padding: 10px 10px 10px 10px;
  background-color: rgb(249, 249, 249);
  margin-bottom: 10px;
}

button.example-fold-btn{ /* Extra example (exampleExtra) block: button */
  background-color: rgb(242, 242, 255); /* Need also to look at js/examplefold.js and similar */
  border-radius: 8px;
  border: none;
  margin-bottom: 10px;
  margin-top: 10px;
}
.example-fold-blck { /* Extra example (exampleExtra) block: text */
  padding: 10px 10px 10px 10px; /* Need also to look at js/examplefold.js and similar */
  border-radius: 8px;
  background-color: rgb(242, 242, 255);
  margin-bottom: 10px;
  margin-top: -10px;
}

button.fold-btn{  /* Question with potential answers: button */
  background-color: rgb(242, 242, 255); /* Need also to look at js/examplefold.js and similar */
  border-radius: 0;   /* TL TR BR BL */
  border: none;
  margin-top: -10px;
  margin-bottom: 5px;
}
.fold-blck {  /* Question with potential answers: text */
  padding: 10px 10px 10px 10px; /* Need also to look at js/examplefold.js and similar */
  border-radius: 0 8px 8px 8px;
  background-color: rgb(242, 242, 255);
  margin-bottom: 5px;
  margin-top: -5px;
}

button.info-fold-btn{ /* Extra info (extraInfo) block: button */
  background-color: rgb(242, 242, 255); /* Need also to look at js/examplefold.js and similar */
  border-radius: 8px;
  border: none;
  margin-bottom: 10px;
  margin-top: 10px;
}
.info-fold-blck { /* Extra info (extraInfo) block: text */
  padding: 10px 10px 10px 10px; /* Need also to look at js/examplefold.js and similar */
  border-radius: 8px;
  background-color: rgb(242, 242, 255);
  margin-bottom: 10px;
  margin-top: -10px;
}


.definition {
  padding: 10px 10px 10px 10px;
  background-color: rgb(242, 255, 230);
  margin-bottom: 10px;
}
.lemma {
  padding: 10px 10px 10px 10px;
  background-color: rgb(242, 242, 255);
  margin-bottom: 10px;
}

/* Two column chunks, from https://github.com/grantmcdermott/two-col-test/blob/master/preamble.css */
/* ALSO see: https://bookdown.org/yihui/rmarkdown-cookbook/multi-column.html */
.column-left {
  float: left;
  width: 49%;
  text-align: left;
}
.column-right {
  float: right;
  width: 49%;
  text-align: left;
}

/* Some boxes, for end of section exercises for instance */


/* Space out the entries in the reference list */
.csl-entry {
    padding-bottom: 1em;
}




/* My environments */
.softwareBox {
  padding: 1em 1em 1em 4em;
  margin-bottom: 10px;
  margin-top: 10px;
  border: 2px solid #e6f2ff;
  background: #e6f2ff 5px center/3em no-repeat; 
}

.pronounceBox {
  padding: 1em 1em 1em 4em;
  margin-bottom: 10px;
  margin-top: 10px;
  border: 2px solid #f9f2ec;
  background: #f9f2ec 5px center/3em no-repeat; 
}

.objectivesBox {
  font-size: small;
  padding: 1em 1em 1em 4em;
  margin-bottom: 10px;
  margin-top: 10px;
  border: 2px solid #ede9fb;
  background: #ede9fb 5px center/3em no-repeat; 
}

.importantBox {
  padding: 1em 1em 1em 4em;
  margin-bottom: 10px;
  margin-top: 10px;
  border: 2px solid #ffefe6;
  background: #ffefe6 5px center/3em no-repeat; 
}

.tipBox {
  padding: 1em 1em 1em 4em;
  margin-bottom: 10px;
  margin-top: 10px;
  border: 2px solid #f7ffe6;
  background: #f7ffe6 5px center/3em no-repeat; 
}

.thinkBox {
  padding: 1em 1em 1em 4em;
  margin-bottom: 10px;
  margin-top: 10px;
  border: 2px solid #f7ffe6;
  background: #f7ffe6 5px center/3em no-repeat; 
}

.answer {
  padding: 1em 1em 1em 1em;
  margin-bottom: 10px;
  margin-top: 10px;
}




/* Environments *without * images */
.definitionBox {
  padding: 1em 1em 1em 1em;
  margin-bottom: 10px;
  margin-top: 10px;
  border: 2px solid #f4ffe8;
  background: #f4ffe8 5px center/3em no-repeat; 
}


.exampleextraBox {
  padding: 1em 1em 1em 1em;
  margin-bottom: 10px;
  margin-top: 10px;
  border: 2px solid #e6ffff;
  background: #e6ffff 5px center/3em no-repeat; 
}


/* Try new way to do things with _icons_ in callouts */
.caution {
  background-image: url("./icons/iconmonstr-warning-8-240.png");
}
.software {
  background-image: url("../icons/iconmonstr-laptop-4-240.png");
}
.objectives {
  background-image: url("../icons/iconmonstr-target-4-240.png");
}
.pronounce {
  background-image: url("../icons/iconmonstr-microphone-7-240.png");
}
.important {
  background-image: url("../icons/iconmonstr-warning-8-240.png");
}
.tip {
  background-image: url("../icons/iconmonstr-info-6-240.png");
}
.think {
  background-image: url("../icons/iconmonstr-light-bulb-2-240.png");
}
.progress {
  background-image: url("../icons/iconmonstr-arrow-32-240.png");
}

.HTcircle {
  border-radius: 50%;
  width: 34px;
  height: 32px;
  padding: 3px;
  background: #fff;
  border: 3px solid #000;
  color: #000;
  text-align: center;
}