@import url("./asciidoctor.css");
@import 'https://www.bootstrapworld.org/styles.css';
@import 'https://cdn.jsdelivr.net/npm/hack-font@3/build/web/hack.css';
/************************************************************************************
* SYSTEMWIDE STYLES
*/
html,
body {
  font-size: 9pt;
}
body {
  font-family: 'Lato', Arial, Helvetica, sans-serif;
  color: #75328A;
  width: 100%;
  /* needed to undo effect of html{display:flex} */
  display: block;
  position: relative;
  -webkit-font-smoothing: antialiased;
  /* Set Defaults (many asciidoc overrides) */
  /* unset asciidoc thead sizes */
  /* Make .mathunicode and MathJax look similar */
  /* The footer at the bottom of every page */
  /* Show the standard footer at the bottom of each page...*/
  /* But not if it's an extra-long page */
  /* outOfDate warning */
  /* These items should always max-out pagewidth, and have no padding */
  /* Sections */
  /* Images and Captions */
}

#outOfDate a {color: lightblue;}

body.beta::after {
  position: absolute;
  top: 40%;
  left: 40%;
  transform: rotate(-45deg);
  content: "BETA";
  opacity: 0.2;
  line-height: 3em;
  color: gray;
  font-size: 100pt;
  font-weight: 900;
  z-index: -1;
}
body h1 {
  font-size: 2rem;
  font-weight: bold;
  font-family: 'Lato', Arial, Helvetica, sans-serif;
}
body h2 {
  margin: 0;
  /* 1ex bottom margin */
  font-family: 'Lato', Arial, Helvetica, sans-serif;
}
body .prefix {
  font-style: italic;
  color: gray;
}
body a {
  color: #2156a5 !important;
}
body p {
  margin: 10px 0px;
  font-size: inherit;
}
body sup {
  font-size: xx-small;
  top: -0.35em;
}
body code {
  display: inline-block;
  padding: 0 !important;
  line-height: 1em !important;
}
body mark {
  background: none;
  color: inherit;
}
body em,
body strong {
  margin: 0px 2px;
}
body .listingblock pre {
  margin: 3px 0px;
  padding: 0;
}
body .indentedpara {
  margin-left: 3em;
}
body table thead * {
  font-size: unset !important;
}
body ul {
  line-height: inherit;
}
body .ulist ul {
  margin-bottom: 0px;
}
body .ulist p {
  margin: 5px 0px;
}
body .MathJax,
body .mathunicode {
  font-family: MJXZERO, 'MJXTEX';
  font-size: inherit !important;
}
body .MathJax .overbar,
body .mathunicode .overbar {
  border-top: 1px solid;
  display: inline-block;
  line-height: 1.2;
}
body table,
body td.tableblock > .content {
  margin-bottom: 0px;
}
body tr th.tableblock code,
body td.tableblock code {
  background: none;
}
body td.tableblock pre {
  background: none !important;
}
body tr th.tableblock {
  background: #cccccc !important;
  padding: 0.25em 0.5em;
  font-size: 1rem;
}
body #content {
  margin: 0;
}
body #header > h1:only-child {
  border-bottom: none;
}
body .acknowledgmentsect {
  position: absolute;
  top: 100%;
  margin-top: 20px;
}
body .acknowledgment {
  padding-bottom: 5px !important;
  font-size: 12px !important;
  font-style: italic !important;
  line-height: inherit !important;
}
body .acknowledgment * {
  line-height: inherit !important;
}
body .acknowledgment img {
  width: 94px !important;
  height: 37px !important;
  float: right !important;
}
body #footer {
  background: rgba(0, 0, 0, 0.5);
  padding-left: 10px !important;
  position: fixed;
  top: calc(100% + 250px);
  /* leave 250px space for acknowledgements button */
  padding: 0;
  z-index: 999;
}
body.canBeLongerThanAPage #footer {
  display: none;
}
body #outOfDate {
  background: black;
  color: white;
  display: block;
  width: 100%;
  position: fixed;
  z-index: 9999;
}
body .left {
  text-align: left  !important;
}
body .right {
  text-align: right !important;
}
body .right img {
  margin-left: 15px;
}
body .center,
body .centered-image {
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center !important;
  padding: 1ex 0ex;
}
body #header,
body #content,
body #footer {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0;
}
body .lesson-section-1,
body .lesson-section-1 + .lesson-section-1 {
  clear: both;
  border-top: solid 2px black;
  display: block;
}
body .lesson-section-2 {
  clear: both;
  width: 100%;
  margin: 20px 0px;
}
body .lesson-section-2 h3 {
  font-size: 1.5em;
  font-style: italic;
  margin: 0px;
}
body .sectionbreak {
  display: block;
  width: auto;
  border-bottom: solid 3px black;
  margin: 5px 0px;
}
body .image-figure .image-caption {
  display: block;
  font-style: italic;
  line-height: 1.5ex;
  word-break: break-word;
  text-align: center;
  margin: 10px 0;
  color: black;
}
body .image-figure .image-caption:empty {
  display: none;
}
body .editbox {
  width: auto;
  background-color: #f7f7f8;
  margin: 2px;
  padding: 0 2px;
  text-align: left;
  line-height: 1.3;
  vertical-align: baseline;
  /* If empty after JS post-processing, hide */
}
body .editbox:empty {
  display: none;
}
body .optionaltag {
  font-style: italic;
}
body:not(.LessonPlan, .narrativepage) p {
  overflow: hidden;
  margin: 0px;
  line-height: 1.3;
}
/*  RULES FOR GLOSSARY ITEMS  */
.glossary {
  margin-bottom: 20px;
}
.glossary * {
  display: inline;
  font-size: 16px;
}
.glossary dt::after {
  content: '::';
  margin: 0px 5px;
}
.glossary dd {
  margin: 0px;
}
.glossary dd::after {
  content: '\A';
  white-space: pre;
}
.glossary .title {
  display: block;
  font-weight: bold;
  color: inherit;
  font-size: 18px;
}
.alignedEntries {
  display: none;
}
.coverageElement {
  display: none;
}
.standard-menu-container {
  padding: 10px;
  display: flex;
  justify-content: space-between;
}
.standard-menu-container div:nth-child(1) {
  width: 75%;
}
.standard-menu-container div:nth-child(2) {
  width: 25%;
}
.quad {
  display: inline-block;
  min-height: 15px;
}
.vspace {
  display: inline-block;
}
.quad::before,
.fitbruby::before,
.fitb::before {
  content: '\00200b';
}
/* use 'thin' instead of 1px border to try and avoid disappearing 
lines on some browsers */
.fitb,
.fitbruby,
.fitb.stretch::after,
.fitbruby.stretch::after {
  padding-top: 1.2rem;
  position: relative;
  display: inline-block;
  min-width: 4em;
  text-align: center;
  line-height: 1rem;
  border-bottom: solid thin black;
  vertical-align: baseline;
}
.fitbruby {
  margin-bottom: 0.75rem;
}
.fitbruby .ruby,
.recipe .ruby:after,
.data-cycle .ruby:after {
  position: absolute;
  bottom: -11px;
  left: 0;
  font-size: 9.5px;
  font-weight: normal;
  width: 100%;
  text-align: center;
  font-style: normal;
  font-family: 'Lato', Arial, Helvetica, sans-serif;
  white-space: nowrap;
  user-select: none;
}
.ruby sup {
  top: -0.3em;
  font-size: 7px;
}
.fitb.stretch,
.fitbruby.stretch {
  margin-left: 5px;
  vertical-align: baseline;
  width: auto;
  border-color: transparent;
  /* hide the normal underline */
  /* add an underline that goes past the end of the page */
}
.fitb.stretch::after,
.fitbruby.stretch::after {
  content: "\00a0";
  position: absolute;
  width: 1000px;
  left: 0;
  bottom: -1px;
}
.vocab {
  font-weight: bold;
  font-style: italic;
  color: #75328A;
}
/************************************************************************************
* NARRATIVE PAGE STYLES
*/
.narrativepage {
  font-size: 12pt;
}
.narrativepage .logo {
  float: right;
}
.narrativepage .logo img {
  width: 400px;
}
.narrativepage #lesson-list * {
  display: inline;
  margin-bottom: 0px;
  margin-left: 0px;
}
.narrativepage #lesson-list dt {
  margin-top: 15px;
  display: inline-block;
  font-size: 17px;
}
.narrativepage #lesson-list dd:after {
  display: block;
  content: '';
}
.narrativepage #lesson-list dd:before {
  display: inline;
  content: ' :: ';
  font-weight: 900;
}
.narrativepage .course-banner {
  font-style: italic;
  background: #B6D990aa;
  border: #75328A 1px dashed;
  padding: 5px;
  margin-bottom: 2rem;
}
.narrativepage .course-banner a {
  color: black;
  text-decoration: underline;
}
/************************************************************************************
* LESSON PAGE STYLES
*/
.LessonPlan {
  font-size: 12pt;
  /* The summary table at the top of each lesson */
  /* Language table */
  /* Lesson sidebar */
  /* Callout boxes */
  /* Direct link to a section of a lesson */
  /* class for styling duration info in headers */
  /* Special links back to older, pre-remix materials */
}
.LessonPlan .preamble {
  color: black;
  background: transparent;
  /* Hide slide links intentionally left blank, and display useful feedback */
  /* Custom materials link styles */
}
.LessonPlan .preamble a[href$='Intentionally-left-blank-as-this-lesson-does-not-have-any-slides/'] {
  font-size: 0;
  text-decoration: none;
  color: black !important;
  pointer-events: none;
}
.LessonPlan .preamble a[href$='Intentionally-left-blank-as-this-lesson-does-not-have-any-slides/']::before {
  font-size: 12pt;
  content: "Slides are not yet available for this lesson";
}
.LessonPlan .preamble.left-header tr td:nth-child(1) {
  background-color: #b7d893;
}
.LessonPlan .preamble.left-header tr td:nth-child(1) p {
  font-weight: bold;
}
.LessonPlan .preamble .materials-links li p .showPageLinks a {
  text-decoration: none;
}
.LessonPlan .preamble .materials-links li p .showPageLinks a::after {
  content: ' ▼ ';
}
.LessonPlan .preamble .materials-links li p + .ulist {
  transition: 1s ease-in;
  max-height: 0;
  overflow: hidden;
  padding-left: 5px;
  margin: 0;
  font-style: italic;
  font-size: 10pt;
}
.LessonPlan .preamble .materials-links li p + .ulist .pageNum {
  float: right;
  margin-right: 10%;
}
.LessonPlan .preamble .materials-links li p.open .showPageLinks a::after {
  content: ' ▲ ';
}
.LessonPlan .preamble .materials-links li p.open + .ulist {
  transition: 1s ease-in;
  max-height: 1000px;
}
.LessonPlan .preamble .Optional,
.LessonPlan .preamble .OptProject,
.LessonPlan .preamble .handout {
  font-style: italic;
}
.LessonPlan .preamble .Optional::before,
.LessonPlan .preamble .OptProject::before,
.LessonPlan .preamble .handout::before {
  color: gray;
}
.LessonPlan .lang-features-table {
  display: table;
  z-index: 999;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 500px;
  transform: translate(-50%, -50%);
  border: solid 5px gray !important;
  /* Override default image treatment */
}
.LessonPlan .lang-features-table * {
  margin: 0px;
  padding: 1px;
  font-size: 0.8rem;
}
.LessonPlan .lang-features-table p {
  font-family: monospace;
}
.LessonPlan .lang-features-table tr:first-of-type,
.LessonPlan .lang-features-table tr:first-of-type p {
  background-color: lightgray;
  font-weight: bold;
  text-align: center;
  font-family: inherit;
  /* Header row should not be monospace */
}
.LessonPlan .lang-features-table .centered-image {
  display: inline;
}
.LessonPlan .lang-features-table tr td:nth-child(1),
.LessonPlan .lang-features-table tr td:nth-child(1) p {
  background-color: transparent;
  text-align: center;
  vertical-align: middle;
  font-family: inherit;
  /* Type cell should not be monospace */
}
@keyframes slideInFromLeft {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}
.LessonPlan .sidebar {
  animation: 0.5s ease-out 0s 1 slideInFromLeft;
  display: block;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 225px;
  height: 100%;
  background: #e8f3dd;
  transition: all 0.5s;
  color: black;
  box-shadow: -1px 2px 4px black;
  z-index: 9999;
  overflow: scroll;
  user-select: none;
}
.LessonPlan .sidebar.closed {
  left: -225px;
  width: 265px;
  height: 30px;
}
.LessonPlan .sidebar .paragraph {
  width: 205px;
}
.LessonPlan .sidebar #toggle {
  top: 0;
  right: 0;
  position: absolute;
  width: 40px;
  height: 30px;
  text-align: center;
  border: 0;
  margin: 0 !important;
  background: #75328AAA;
}
.LessonPlan .sidebar #toggle:after {
  content: '≫';
  font-size: 20px;
}
.LessonPlan .sidebar:not(.closed) #toggle:after {
  content: '«';
}
.LessonPlan .sidebar:hover * {
  opacity: 1;
}
.LessonPlan .sidebar > * {
  margin: 0px 10px !important;
}
.LessonPlan .sidebar > *,
.LessonPlan .sidebar .sidebar > * > * {
  opacity: 0.4;
  transition: opacity 0.5s;
}
.LessonPlan .sidebar label {
  display: inline;
  font-size: 0.8rem;
}
.LessonPlan .sidebar select {
  border: none;
}
.LessonPlan .sidebar strong {
  color: black;
  margin: 0;
}
.LessonPlan .sidebar li {
  list-style-type: none;
  margin-bottom: 5px;
}
.LessonPlan .sidebar table {
  background: none !important;
  border: none;
  width: auto;
}
.LessonPlan .sidebar table td,
.LessonPlan .sidebar table tr {
  padding: 0;
  background: none;
  border: 0;
}
.LessonPlan .sidebar table .title {
  display: none;
}
.LessonPlan .sidebar dl * {
  font-size: 9pt !important;
  margin: 0;
  display: inline;
}
.LessonPlan .sidebar dl {
  line-height: 0.4rem;
}
.LessonPlan .sidebar dd::after {
  content: '\A';
  white-space: pre;
}
.LessonPlan .sidebar dt::after {
  content: ' ·';
  white-space: pre;
  font-size: 0.7rem;
}
.LessonPlan .sidebar table dt {
  margin-top: 10px;
}
.LessonPlan .sidebar .sidebarlessons {
  margin-top: 30px;
}
.LessonPlan .sidebar .sidebarlessons input[type="checkbox"] {
  margin-right: 5px;
}
.LessonPlan .sidebar .sidebarlessons ul {
  background: white;
  margin: 0px;
  box-shadow: inset -1px 0px 2px gray;
  max-height: 250px;
  overflow: scroll;
  padding: 10px;
  font-size: 10pt !important;
}
.LessonPlan .sidebar .sidebarlessons li:nth-child(odd) {
  background: #b7d89333;
}
.LessonPlan .sidebar .sidebarpractices ul {
  font-size: 0.75rem !important;
  margin: 0;
}
.LessonPlan .lesson-instruction,
.LessonPlan .lesson-roleplay,
.LessonPlan .q-and-a {
  min-height: 50px;
  background: #eee;
  display: flow-root;
  clear: both;
  margin-top: 10px;
}
.LessonPlan .lesson-instruction > *:first-child,
.LessonPlan .lesson-roleplay > *:first-child,
.LessonPlan .q-and-a > *:first-child {
  margin-left: 60px;
}
.LessonPlan .lesson-instruction > *:first-child::before,
.LessonPlan .lesson-roleplay > *:first-child::before,
.LessonPlan .q-and-a > *:first-child::before {
  content: url('lesson-instruction.png');
  height: 50px;
  width: 50px;
  float: left;
  margin-left: -50px;
  margin-top: 10px;
}
.LessonPlan .lesson-instruction + .lesson-instruction,
.LessonPlan .lesson-roleplay + .lesson-roleplay,
.LessonPlan .q-and-a + .q-and-a {
  margin: 0;
}
.LessonPlan .lesson-instruction + .lesson-instruction > *:first-child::before,
.LessonPlan .lesson-roleplay + .lesson-roleplay > *:first-child::before,
.LessonPlan .q-and-a + .q-and-a > *:first-child::before {
  display: none;
}
.LessonPlan .q-and-a > *:first-child::before {
  content: url('q-and-a.png');
}
.LessonPlan .q-and-a .ulist .ulist li {
  font-style: italic;
}
.LessonPlan .lesson-roleplay > *:first-child::before {
  content: url('lesson-roleplay.png');
}
.LessonPlan .lesson-point {
  font-weight: bold;
  color: black;
  border-style: solid;
  margin: 2ex;
  border-width: 2px 0px;
  clear: both;
}
.LessonPlan .lesson-point p {
  margin: 0ex 1ex;
}
.LessonPlan .strategy-box {
  background: #efefef;
  border: solid 5px !important;
  width: 75%;
  margin: 15px auto;
  display: block;
  clear: both;
  position: relative;
}
.LessonPlan .strategy-box td {
  width: 8in;
}
.LessonPlan .strategy-box a {
  color: blue;
  text-decoration: underline;
}
.LessonPlan .strategy-box .title {
  width: 100%;
  display: block;
  text-align: center;
  font-weight: bold;
  font-size: 1.5rem;
}
.LessonPlan .strategy-box {
  border-color: #1a73b5 !important;
}
.LessonPlan h2 {
  font-size: 1.75em;
  font-weight: normal;
}
.LessonPlan h3 {
  font-size: 18pt;
  font-weight: 300;
}
.LessonPlan .section-link a {
  margin-left: -1.75em;
  padding-right: 0.5em;
  vertical-align: middle;
  text-decoration: none !important;
  font-size: 0.9rem;
  position: relative;
  left: -2em;
}
.LessonPlan .sectionbody td {
  color: inherit;
}
.LessonPlan .duration {
  position: absolute;
  right: 0px;
  font-style: italic;
  font-weight: 200;
  min-width: 150px;
}
.LessonPlan .old-materials p {
  width: 100%;
  background: #75328AAA;
  color: black;
  text-align: center;
}
.LessonPlan code {
  line-height: 1.5 !important;
}
.LessonPlan div.codesexp,
.LessonPlan div.circleevalsexp,
.LessonPlan .editbox,
.LessonPlan .cm-s-scheme {
  font-size: 0.8em;
}
/************************************************************************************
* WORKBOOK PAGES
*/
/* Maximize vertical space for content */
body.workbookpage,
body.workbookpage #content,
body.workbookpage #preamble_disabled,
body.workbookpage #preamble_disabled .sectionbody {
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
body.solution-page .fitbruby,
body.solution-page .fitb {
  font-style: italic;
}
body.workbookpage {
  font-size: 9pt;
  /* Use a tiny font for print, but then zoom in @screen */
  /* set page dimensions */
  /* define 'landscape' page type */
  /* Make content of page as tall as possible */
  /* make .FillVerticalSpace tables use CSS grid layout */
  /* Make code match text size/layout */
  /* Some elements show either solution mode or a blank */
  /* Auto-numbering - Add space and a right-paren, unless it's inside a table. */
}
body.workbookpage:not(.landscape) {
  width: 7.5in;
  height: 9.8in;
}
body.workbookpage.landscape {
  width: 9.8in;
  height: 7.5in;
  page: landscape;
}
body.workbookpage #content,
body.workbookpage #preamble_disabled,
body.workbookpage #preamble_disabled .sectionbody,
body.workbookpage #preamble_disabled .sectionbody table.FillVerticalSpace,
body.workbookpage #content > .sect1 {
  flex-grow: 1;
}
body.workbookpage table.FillVerticalSpace {
  display: grid;
  height: 100%;
  grid-template-columns: auto;
  grid-template-rows: max-content;
}
body.workbookpage table.FillVerticalSpace > colgroup {
  display: none;
}
body.workbookpage table.FillVerticalSpace > tbody,
body.workbookpage table.FillVerticalSpace > thead {
  display: contents;
}
body.workbookpage table.FillVerticalSpace > tbody > tr,
body.workbookpage table.FillVerticalSpace > thead > tr {
  display: contents;
}
body.workbookpage table.FillVerticalSpace > tbody > tr > td,
body.workbookpage table.FillVerticalSpace > thead > tr > td {
  display: grid;
  position: relative;
}
body.workbookpage table.FillVerticalSpace > tbody > tr > td.valign-middle,
body.workbookpage table.FillVerticalSpace > thead > tr > td.valign-middle {
  align-items: center;
}
body.workbookpage p .editbox,
body.workbookpage pre .editbox {
  font-size: 9pt !important;
}
body.workbookpage .solution {
  font-style: italic;
}
body.workbookpage .blank {
  color: rgba(0, 0, 0, 0);
}
body.workbookpage .chosen::after {
  content: '✅';
}
body.workbookpage .autonum {
  display: inline-block;
  padding-top: 1.2rem;
}
body.workbookpage .autonum::after {
  content: ')';
}
body.workbookpage .autonum.star::after {
  content: unset;
}
body.workbookpage td .autonum {
  padding-top: 0;
}
body.workbookpage td .autonum::after {
  content: none;
}
body.workbookpage .studentAnswerShort {
  min-width: 20pt;
}
body.workbookpage .studentAnswerMedium {
  min-width: 100pt;
}
body.workbookpage .studentAnswerLong {
  min-width: 140pt;
}
/* Back-of-the-book contracts table */
table.contracts-table {
  border-collapse: collapse;
  border: none;
}
table.contracts-table p {
  margin-top: 0;
}
table.contracts-table td {
  padding: 0.1em 0.625em !important;
  height: 23pt;
}
table.contracts-table tr:nth-child(odd) {
  border-top: solid 2px black;
}
table.contracts-table tbody tr:nth-child(odd) * {
  color: #cd7054 !important;
}
table.contracts-table tbody tr:nth-child(odd) td:first-child .tableblock {
  margin-left: 1em;
}
table.contracts-table tbody tr:nth-child(odd) td:first-child::before {
  position: absolute;
}
table.contracts-table tbody tr:nth-child(even) * {
  font-family: monospace;
  white-space: pre;
}
/* TODO(Emmanuel): do we even need all of these? Clean up */
body:not(.LessonPlan) {
  /* Empty p tags should take up no space */
}
body:not(.LessonPlan) p:empty {
  min-height: 0;
  margin: 0;
  padding: 0;
}
body:not(.LessonPlan) #header {
  margin-bottom: 5px !important;
}
body:not(.LessonPlan) #header > h1:first-child,
body:not(.LessonPlan) .sect1 > h1:first-child,
body:not(.LessonPlan) .sect1 > h2:first-child,
body:not(.LessonPlan) .sect1 > h3:first-child,
body:not(.LessonPlan) .sect2 > h3:first-child {
  width: 100%;
  padding: 5px 0px;
  margin: 0;
}
body:not(.LessonPlan) .description {
  display: none;
}
/* Don't use flex to space out content on notes pages */
body.LessonNotes #content {
  display: block !important;
}
body.LessonNotes li {
  margin-bottom: 10px;
}
/************************************************************************************
* DESIGN RECIPE, DATA CYCLE, AND STUDENT ANSWER STYLING
*/
/* Data Cycle tables should have borders */
.data-cycle {
  border-collapse: collapse;
  width: 100%;
  /* Ruby text in the Data Cycle needs to be slightly larger than normal */
}
.data-cycle td:first-of-type {
  background: lightgray;
  border: solid white;
  min-width: 1in;
}
.data-cycle td {
  padding: 0.2rem 0.325rem;
}
.data-cycle td p.tableblock {
  font-size: 1rem;
}
.data-cycle .fitbruby {
  text-align: left !important;
}
.data-cycle .fitbruby.stretch {
  margin-left: 0 !important;
}
.data-cycle .fitbruby .ruby {
  font-size: 0.75rem !important;
  user-select: none;
}
.data-cycle .fitbruby .ruby::after {
  bottom: 0 !important;
  color: black;
  text-align: left !important;
}
.data-cycle .question_type {
  display: block;
  font-size: 10px;
}
.data-cycle .question_type.chosen {
  font-style: italic;
  font-weight: bold;
  border: solid 1px black;
  border-radius: 50%;
}
.data-cycle .question_type.chosen::after {
  display: none;
}
.data-cycle .data-cycle-expression,
.data-cycle .data-cycle-filter,
.data-cycle .data-cycle-build {
  font-family: Hack, "Courier New", monospace;
}
/* We use tables (perhaps not the best idea) for our DR headings */
table.recipe_title {
  background: gray;
  border: gray;
}
table.recipe_title td {
  padding: 0px;
  margin: 0px;
  border: none;
  vertical-align: middle;
}
table.recipe_title td:last-child {
  border: 2px solid gray !important;
}
table.recipe_title td:last-child .content {
  width: 16px;
  height: 16px;
  background: white;
}
table.recipe_title p {
  color: white;
  font-weight: bold;
  margin: 0px;
  padding-left: 10px;
  min-height: unset !important;
}
/* common height for headless and non-headless DRs with no directions */
.recipe_word_problem p::before {
  font-weight: bold;
}
.recipe_word_problem p {
  margin-bottom: 0.05in !important;
}
.recipe_word_problem p:empty {
  min-height: 0.6in !important;
}
.recipe {
  /* Under a heading come the instructions */
  /* all paragraph tags are full-width, with no margin. If pushed to a new line, they wrap */
  /* All student answers have a bottom-border, and a "ruby" printed in black */
  /* We're using the ruby itself to hang the content, and it's already positioned correctly */
  /* Format fitrubies: mostly left, but a few in the center or on the right */
  /* Some things should grow to fill the width of their containing line */
  /* Contract and Purpose get lang-specific comment symbols */
  /* If there's a section break between recipes, eat up all vertical space */
}
.recipe .recipe_instructions * {
  font-style: italic;
  font-size: 0.85rem;
}
.recipe p {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
}
.recipe p .fitb,
.recipe p .fitbruby {
  word-spacing: 2pt;
  padding-top: 1rem;
}
.recipe p .fitb:after,
.recipe p .fitbruby:after {
  word-spacing: 0;
}
.recipe .ruby:after {
  bottom: 0 !important;
}
.recipe .fitbruby {
  text-align: left !important;
  font-family: Hack, "Courier New", monospace;
}
.recipe .recipe_example_inputs,
.recipe .recipe_variables,
.recipe .recipe_domain {
  text-align: center !important;
}
.recipe .fitbruby.recipe_name {
  min-width: 20%;
}
.recipe .fitbruby.recipe_range {
  min-width: 12%;
  text-align: center !important;
}
.recipe .fitbruby.recipe_example_inputs {
  min-width: 20%;
  white-space: nowrap;
}
.recipe .fitbruby.recipe_variables {
  min-width: 30%;
  white-space: nowrap;
}
.recipe .fitbruby.recipe_cond {
  flex-grow: unset !important;
  min-width: 10%;
}
.recipe .recipe_domain,
.recipe .recipe_purpose,
.recipe .fitbruby.questions,
.recipe .fitbruby.answers {
  flex-grow: 1;
}
.recipe .recipe_purpose,
.recipe.recipe_contract .recipe_name {
  padding-left: 1em;
}
.recipe .recipe_purpose::before,
.recipe.recipe_contract .recipe_name::before {
  color: black;
  position: absolute;
  left: 0;
}
.recipe.fitbruby.recipe_condition *::before,
.recipe *::after {
  color: #75328A;
}
.recipe + div.paragraph:not(.recipe) {
  margin: auto 0;
}
/* Proglang-specific adaptations */
.pyret {
  /* no whitespace in pyret */
  /* Indenting for function body and example bodies */
  /* Conditionals */
}
.pyret .recipe_purpose::before,
.pyret .recipe_contract .recipe_name::before {
  content: '#';
}
.pyret .solution.recipe_name {
  text-align: right !important;
  min-width: 6em;
}
.pyret .recipe_example_line:not(.keyword_only) > .content,
.pyret .recipe_definition_body {
  margin-left: 2ex;
}
.pyret .recipe_condition {
  position: relative;
  margin-left: 1em;
  width: 90%;
  /* the 1st condition ("if") */
  /* the next n-1 conditions ("if else")*/
  /* the last condition ("else") */
}
.pyret .recipe_condition .answers {
  margin-left: 1em;
  text-align: left;
}
.pyret .recipe_condition .questions {
  margin-left: 3em;
  text-align: left;
}
.pyret .recipe_condition .questions::after {
  content: ":";
  position: absolute;
  left: 100%;
  top: 0px;
  width: 1em;
}
.pyret .recipe_condition + .recipe:nth-last-child(3) .answers::before,
.pyret .recipe_condition .questions::before {
  position: absolute;
  left: -2em;
  color: #75328A;
  font-weight: bold;
  font-family: 'Lato', Arial, Helvetica, sans-serif;
}
.pyret .recipe_condition .questions::before {
  content: "if";
}
.pyret .recipe_condition + .recipe_condition .questions {
  margin-left: 4em;
}
.pyret .recipe_condition + .recipe_condition .questions::before {
  content: "else if";
  left: -3em;
}
.pyret .recipe_condition + .recipe:nth-last-child(3) .fitbruby:first-child {
  margin-left: 3em;
}
.pyret .recipe_condition + .recipe:nth-last-child(3) .fitbruby:first-child:before {
  content: "else:";
}
.pyret .recipe_condition + .recipe_line:not(.recipe_condition) .solution {
  border-bottom: none;
  margin-left: 2em;
  font-style: normal;
  text-align: left;
}
.pyret .wrapper p > *:nth-last-child(1) {
  flex-grow: 1;
}
.pyret strong {
  margin: 0;
  padding: 0;
}
.pyret .contracts-table tr:nth-child(odd) td:first-child::before {
  content: '#';
}
.wescheme .recipe_purpose::before,
.wescheme .recipe_contract .recipe_name::before {
  content: ';';
}
.wescheme .recipe_example_body {
  margin-left: 1em;
}
.wescheme .recipe_condition {
  position: relative;
  margin-left: 2em;
  width: 90%;
}
.wescheme .recipe_condition .questions {
  margin-left: 1em;
  text-align: left;
}
.wescheme .recipe_condition .answers {
  margin-left: 1em;
  margin-right: 1em;
  text-align: left;
}
.wescheme .recipe_condition .questions::before {
  content: "[";
  position: absolute;
  left: -1ex;
  color: #75328A;
}
.wescheme .recipe_condition .answers::after {
  content: "]";
  position: absolute;
  left: calc(100% + 2pt);
  bottom: 0;
  color: #75328A;
  width: unset;
  font-style: unset;
  font-size: unset;
  font-family: unset;
}
.wescheme .recipe_condition:last-child > ::after {
  content: ") )";
  white-space: nowrap;
  position: absolute;
  left: 100%;
  bottom: 0;
  line-height: 18px;
  margin-bottom: 0.9rem;
}
.wescheme .wrapper p > *:nth-last-child(2) {
  flex-grow: 1;
}
.wescheme strong {
  margin: 0;
  padding: 0;
}
.wescheme .contracts-table tr:nth-child(odd) td:first-child::before {
  content: ';';
}
.codap .cm-keyword {
  font-weight: normal !important;
}
.codap .transformer_type td:last-child .content {
  width: 0;
  height: 0px;
  background: none;
}
.codap .recipe_title .paragraph,
.codap .codap .recipe_title p {
  display: inline;
}
.codap .recipe_name {
  display: flex !important;
}
.codap .transformer_type p::before {
  width: 1.1rem;
  height: 1.1rem;
  background: white;
  display: inline-block;
  margin: 0 2px 2px 0;
  vertical-align: middle;
}
.codap div.transformer_type {
  margin-left: 2em;
}
.codap div.transformer_type p::before {
  content: "";
}
.codap table.transformer_type td:first-of-type .content {
  display: flex;
  flex: row;
}
.codap table.transformer_type td:first-of-type .paragraph {
  white-space: nowrap;
}
.codap div.transformer_type.chosen p::after {
  position: relative;
  top: -19px;
  left: 9px;
}
.codap .recipe_formula,
.codap .codap_transformer {
  display: flex !important;
}
.codap .codap_transformer p {
  width: 100%;
}
.codap .codap_example_tables + table table * {
  margin: 0;
  padding: 0;
}
.codap .codap_example_tables + table table * {
  text-align: center;
  height: 2rem;
}
.codap .recipe_domain,
.codap .recipe_range {
  width: 40%;
}
/************************************************************************************
* TEACHER RESOURCES PAGE
*/
.pathway_external_links ul li {
  margin-top: 3ex 0ex;
  list-style-type: none;
}
td.tableblock .listingblock {
  margin-bottom: 0 !important;
}
/************************************************************************************
* FORMATTING OF CIRCLES, AND TEXT CODE
*/
div.codesexp,
div.circleevalsexp,
.editbox,
.cm-s-scheme,
.CodeMirror {
  font-family: Hack, "Courier New", monospace;
}
td.halign-center div.circleevalsexp {
  text-align: center;
}
div.circleevalsexp {
  /* Display ONLY 5px hspaces that are after the first one (keeps args centered) */
  /* Don't show parens in Circle mode */
  /* fill-in-the-blanks inside circles need no border */
}
div.circleevalsexp .expression {
  display: inline-block;
  padding-top: 6px;
  margin: 2px 5px;
  clear: none;
  border: 2px solid black;
  background: white;
  text-align: center;
  border-radius: 20px;
}
div.circleevalsexp .value {
  display: inline-block;
  margin: 0.5rem 0.4rem;
  vertical-align: top;
}
div.circleevalsexp .operator {
  display: block;
  height: 1.1rem;
  text-align: center;
  line-height: 0.5rem;
  width: 100%;
  border-bottom: solid 2px black;
  border-radius: 15px 15px 0px 0px;
  /* When in operator position, drop the margins */
}
div.circleevalsexp .operator .value {
  margin: 0 0.5rem;
}
div.circleevalsexp .hspace {
  display: none;
}
div.circleevalsexp .hspace ~ .hspace {
  display: inline-block;
  width: 0.5ex;
}
div.circleevalsexp .lParen,
div.circleevalsexp .rParen {
  display: none;
}
div.circleevalsexp .fitb {
  border: none;
  padding: 0;
}
div.codesexp,
div.circleevalsexp,
.editbox,
.cm-s-scheme {
  width: 100%;
  margin: 0px 3px;
  display: inline-block;
  padding: 0px;
  color: #666;
  font-style: normal;
  clear: both;
}
/* WESCHEME COLORS */
.wescheme-string,
.cm-scheme-string {
  color: green;
}
.wescheme-number,
.cm-scheme-number {
  color: blue;
}
.wescheme-boolean,
.cm-scheme-boolean {
  color: darkred;
}
.wescheme-character,
.cm-scheme-character {
  color: orange;
}
.wescheme-symbol,
.cm-scheme-symbol {
  color: steelblue;
}
.wescheme-comment,
.cm-scheme-comment {
  color: #cd7054;
}
span.cm-scheme-punctuation {
  color: black;
}
span.cm-scheme-rparen {
  color: black;
}
/* PYRET COLORS */
.cm-s-default.CodeMirror {
  color: black;
}
.cm-comment {
  color: #cd7054;
}
.cm-boolean {
  color: darkred;
}
.cm-builtin {
  color: #555;
}
.cm-variable {
  color: #4d5966;
}
.cm-keyword {
  color: black;
  font-weight: bold;
}
.cm-number {
  color: navy;
}
.cm-roughnum {
  color: blue;
}
.cm-bad-number {
  color: red;
  font-weight: bold;
}
.cm-string {
  color: forestgreen;
}
.cm-type {
  color: #374049;
}
.cm-function-name {
  color: #374049;
}
.cm-unterminated-string {
  color: red;
  font-weight: bold;
}
.pyretkeyword {
  font-weight: 900;
  margin-right: 1ex;
}
* + .pyretkeyword {
  margin-left: 1ex;
}
/* compact tables */
table.data-table td,
table.data-table th {
  margin: 0;
  padding: 0 5px;
  width: 1px;
}
/* class for tables containing Pyret data */
table.pyret-table {
  border-collapse: collapse;
  width: 100%;
  table-layout: auto;
  display: table!important;
  border: 1px black solid;
  border-radius: 1em;
  overflow: hidden;
  background: #eee;
}
table.pyret-table tr:nth-child(even) {
  background-color: #f2f2f2;
}
table.pyret-table thead {
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
}
table.pyret-table td p {
  margin: 0px;
}
table.pyret-table td,
table.pyret-table th {
  border: none;
  border-right: 1px white solid;
  color: #1f1180;
  font-family: Hack, "Courier New", monospace;
}
table.sideways-pyret-table p {
  margin: 0px;
}
table.sideways-pyret-table tr {
  background: none;
  text-align: right;
}
table.sideways-pyret-table td:first-child {
  display: table-cell;
  background: #cccccc;
  text-align: center;
  width: 50px;
}
table.sideways-pyret-table td:first-child p {
  font-weight: bold;
}
.obeyspaces {
  white-space: pre-wrap;
}
div.leftColumn .obeyspaces,
div.rightColumn .obeyspaces {
  display: inline-block;
}
.codetwo {
  font-family: Hack, "Courier New", monospace;
  font-size: 0.85rem;
  background-color: #f7f7f8;
  color: #666;
  word-break: break-word;
}
code.pyret-comment {
  background-color: #f7f7f8 !important;
  color: #a50;
}
code.racket-comment {
  background-color: #f7f7f8 !important;
  color: #a50;
}
/************************************************************************************
* SCREEN MEDIA
*/
@media screen {
  html {
    height: 100%;
    display: flex;
    padding-left: 3em;
  }
  .web-page-only {
    font-weight: bold;
    font-style: italic;
    line-height: 2.5rem;
  }
  /* on WB pages zoom the page 1.25x for a big screen */
  body.workbookpage {
    transform-origin: left top;
    transform: scale(1.25);
  }
  /********************************************************************
   *  Collapsing Headers 
   */
  .LessonPlan,
  .TeacherResources {
    /* add a bottom padding to prevent browser-scroll */
    /* adjust colors */
    /* set collapsed size and transition rules */
    /* don't add the fade for summaries or active sections */
  }
  .LessonPlan #body,
  .TeacherResources #body {
    padding-bottom: 10in;
  }
  .LessonPlan h2,
  .TeacherResources h2 {
    background-color: #75328AAA;
    color: white;
    font-weight: 600;
    cursor: pointer;
    padding: 5px !important;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    /* add the plus/minus signs ("expand me" / "collapse me") for discoverability */
  }
  .LessonPlan h2::after,
  .TeacherResources h2::after {
    content: '▼';
    width: 16px;
    font-size: 16px;
    line-height: 32px;
    color: white;
    font-weight: bold;
    float: left;
    margin-right: 5px;
  }
  .LessonPlan h2.active::after,
  .TeacherResources h2.active::after {
    content: '▲';
  }
  .LessonPlan h2.active,
  .TeacherResources h2.active,
  .LessonPlan h2:hover,
  .TeacherResources h2:hover {
    background-color: #b7d893;
  }
  .LessonPlan .sect1:not(.acknowledgmentsect) .sectionbody,
  .TeacherResources .sect1:not(.acknowledgmentsect) .sectionbody {
    padding: 10px 18px;
    max-height: 100px;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    position: relative;
    /* Add a white fade to hint for discoverability */
  }
  .LessonPlan .sect1:not(.acknowledgmentsect) .sectionbody::after,
  .TeacherResources .sect1:not(.acknowledgmentsect) .sectionbody::after {
    content: "";
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 0;
    pointer-events: none;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), #ffffff 90%);
    width: 100%;
    height: 10em;
  }
  .LessonPlan .sect1:not(.acknowledgmentsect) h2:hover + .sectionbody:after,
  .TeacherResources .sect1:not(.acknowledgmentsect) h2:hover + .sectionbody:after {
    height: 4em;
  }
  .LessonPlan .lessonSummary .sectionbody,
  .TeacherResources .lessonSummary .sectionbody {
    max-height: unset;
  }
  .LessonPlan .lessonSummary .sectionbody::after,
  .TeacherResources .lessonSummary .sectionbody::after,
  .LessonPlan h2.active + .sectionbody::after,
  .TeacherResources h2.active + .sectionbody::after {
    display: none;
  }
  .LessonPlan .sect1:not(.acknowledgmentsect) h2:not(.active) + .sectionbody h3,
  .TeacherResources .sect1:not(.acknowledgmentsect) h2:not(.active) + .sectionbody h3 {
    display: none;
  }
}
@media all and (max-width: 600px) {
  html {
    padding-left: 0 !important;
  }
}
/************************************************************************************
 * PRINT MEDIA
 */
@page {
  size: letter portrait;
  margin: 0.5in;
}
@page landscape {
  size: letter landscape;
  margin: 0.5in;
}
@media print {
  body.LessonPlan {
    width: 7.5in;
  }
  body.LessonPlan .preamble tr td:last-child > * {
    background: white !important;
  }
  /* Elements we don't want printed */
  ::-webkit-scrollbar {
    display: none;
  }
  a[href]::after {
    content: none !important;
  }
  .copyright,
  #footer,
  #outOfDate,
  .web-page-only,
  .section-link,
  .acknowledgmentsect,
  .sidebar,
  .CodeMirror div.CodeMirror-cursor,
  #MathJax_Message {
    display: none !important;
    visibility: hidden;
    float: none;
  }
  div#body {
    position: static;
  }
  /* page-break fails on absolute positioning */
  /* Override AsciiDoc print default */
  p {
    margin: 0px;
    font-size: 1rem;
    font-weight: normal;
  }
  #content {
    margin: auto;
  }
  /* Change coloring of body text, lesson summary table, and code */
  html {
    -webkit-print-color-adjust: exact;
  }
  div#body,
  body {
    color: black;
  }
  :not(body.LessonPlan) #header {
    background: black;
    color: white;
  }
  .listingblock pre:not(.highlight) {
    background: none !important;
  }
  .LessonPlan .lessonSummary {
    break-after: page !important;
    page-break-after: always !important;
  }
  .LessonPlan .lesson-section-1 {
    break-before: page !important;
    page-break-before: always !important;
  }
  .LessonPlan .lesson-section-2 p,
  .LessonPlan .strategy-box,
  .LessonPlan .circleevalsexp,
  .LessonPlan .image,
  .LessonPlan img,
  .LessonPlan .MathJax,
  .LessonPlan #_additional_exercises + .sectionbody {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }
  .LessonPlan .left-header tr td:nth-child(1) {
    background-color: lightgray;
  }
  .LessonPlan .sect1 + .sect1 {
    border-top: solid 3px black;
  }
  .LessonPlan .preamble tr td > * {
    max-height: 1000px;
  }
  body.workbookpage {
    /* Use B&W colors for headers */
    /* Even when invisible, flex-grow will take up space */
  }
  body.workbookpage #header > h1:first-child,
  body.workbookpage .sect1 > h1:first-child {
    background: black;
    color: white;
    text-align: center;
    padding: 1px;
  }
  body.workbookpage .acknowledgmentsect:last-child {
    flex-grow: 0 !important;
  }
  body.workbookpage .lesson-section-1 {
    border: none;
  }
  body.workbookpage .sect1 > h2:first-child,
  body.workbookpage .sect1 > h3:first-child,
  body.workbookpage .sect2 > h3:first-child {
    background: #ccc;
    font-weight: 600;
    font-size: 12pt;
    padding-left: 5px;
  }
  body.workbookpage .recipe_condition *::before,
  body.workbookpage *::after {
    color: black !important;
  }
  /* Page Breaks for printed lesson plans, projects, and TR pages */
  h3,
  h2 {
    break-after: avoid !important;
    page-break-after: avoid !important;
  }
  h3 + .paragraph,
  h2 + .paragraph {
    break-before: avoid !important;
    page-break-before: avoid !important;
  }
  table {
    break-inside: auto;
  }
  tr td {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    page-break-after: auto;
  }
  thead {
    display: table-header-group;
  }
  tfoot {
    display: table-footer-group;
  }
  /* Get rid of collapsing headers */
  .sect1.lesson-section-1,
  .sect1.lesson-section-1 .sectionbody {
    max-height: unset !important;
  }
}