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{
  background-color: rgb(255, 255, 255);
  padding: 1em 1em 1em 0; /* top right bottom left */
  margin-bottom: 10px;
  margin-top: 10px;
}


.example{
  padding: 10px 10px 10px 10px;
  background-color: rgb(245, 245, 245);
  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 */
.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 */

.SectionExercises{
	width:90%;
	padding: 15px 15px 15px 64px;
  margin-bottom: 10px;
  margin-top: 10px;
  background: #f0f5f5 5px center/3em no-repeat;
}



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

.linkBox {
  padding: 1em 1em 1em 4em;
  margin-bottom: 10px;
  margin-top: 10px;
  border: 2px solid #ede9fb;
  background: #ede9fb 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; 
}
.progressBox {
  padding: 1em 1em 1em 4em;
  margin-bottom: 10px;
  margin-top: 10px;
  border: 2px solid #ffffcc;
  background: #ffffcc 5px center/3em no-repeat; 
}

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



/* 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");
}
.link {
  background-image: url("../icons/iconmonstr-link-1-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");
}
.notation {
  background-image: url("../icons/iconmonstr-browser-lined-240.png");
}