/* Base: asciidoctor CSS, followed by the website stylesheet */
img {
  max-width: 100%;
  height: auto;
  -ms-interpolation-mode: bicubic;
}
div#body a:focus {
  outline: thin dotted;
}
div#body pre {
  white-space: pre-wrap;
}
div#body table {
  border-collapse: collapse;
  border-spacing: 0;
}
div#body *,
div#body *::before,
div#body *::after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
div#body a:hover {
  cursor: pointer;
}
div#body img,
div#body svg {
  display: inline-block;
  vertical-align: middle;
}
div#body .left {
  float: left !important;
}
div#body .right {
  float: right !important;
}
div#body .center {
  margin-left: auto;
  margin-right: auto;
}
div#body .stretch {
  width: 100%;
}
div#body div,
div#body dl,
div#body dt,
div#body dd,
div#body ul,
div#body ol,
div#body li,
div#body h1,
div#body h2,
div#body h3,
div#body h4,
div#body h5,
div#body h6,
div#body pre,
div#body form,
div#body p,
div#body blockquote,
div#body th,
div#body td {
  margin: 0;
  padding: 0;
  direction: ltr;
}
div#body a img {
  border: none;
}
div#body p {
  text-rendering: optimizeLegibility;
}
div#body ul,
div#body ol,
div#body dl {
  font-size: 1em;
  line-height: 1.6;
  margin-bottom: 1.25em;
  list-style-position: outside;
  font-family: inherit;
}
div#body ul,
div#body ol {
  margin-left: 1.5em;
}
div#body ul.square li ul,
div#body ul.circle li ul,
div#body ul.disc li ul {
  list-style: inherit;
}
div#body ol.arabic {
  list-style-type: decimal;
}
div#body ol.decimal {
  list-style-type: decimal-leading-zero;
}
div#body ol.loweralpha {
  list-style-type: lower-alpha;
}
div#body ol.upperalpha {
  list-style-type: upper-alpha;
}
div#body ol.lowerroman {
  list-style-type: lower-roman;
}
div#body ol.upperroman {
  list-style-type: upper-roman;
}
div#body ol.lowergreek {
  list-style-type: lower-greek;
}
div#body dl dt {
  margin-bottom: 0.3125em;
  font-weight: bold;
}
div#body dl dd {
  margin-bottom: 1.25em;
}
div#body table {
  background: #fff;
  margin-bottom: 1.25em;
  border: solid 1px #dedede;
}
div#body table thead {
  background: #f7f8f7;
}
div#body table thead tr th,
div#body table thead tr td {
  padding: 0.5em 0.625em 0.625em;
  font-size: inherit;
  color: rgba(0, 0, 0, 0.8);
  text-align: left;
}
div#body table tr th,
div#body table tr td {
  padding: 0.5625em 0.625em;
  font-size: inherit;
  color: rgba(0, 0, 0, 0.8);
}
div#body table tr.even,
div#body table tr.alt,
div#body table tr:nth-of-type(even) {
  background: #f8f8f7;
}
div#body table thead tr th,
div#body table tbody tr td,
div#body table tr td {
  display: table-cell;
  line-height: 1.6;
}
div#body h1,
div#body h2,
div#body h3,
div#body h4,
div#body h5,
div#body h6 {
  line-height: 1.2;
  word-spacing: -0.05em;
}
div#body h1 strong,
div#body h2 strong,
div#body h4 strong,
div#body h5 strong,
div#body h6 strong {
  font-weight: 400;
}
div#body .clearfix::before,
div#body .clearfix::after {
  content: " ";
  display: table;
}
div#body .clearfix::after {
  clear: both;
}
div#body *:not(pre) > code {
  font-style: normal!important;
  letter-spacing: 0;
  padding: 0.1em 0.5ex;
  word-spacing: -0.15em;
  background-color: #f7f7f8;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  line-height: 1.45;
  text-rendering: optimizeSpeed;
  word-wrap: break-word;
}
div#body *:not(pre) > code.nobreak {
  word-wrap: normal;
}
div#body *:not(pre) > code.nowrap {
  white-space: nowrap;
}
div#body pre,
div#body pre > code {
  line-height: 1.45;
  color: rgba(0, 0, 0, 0.9);
  font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace;
  font-weight: 400;
  text-rendering: optimizeSpeed;
}
div#body em em {
  font-style: normal;
}
div#body #header,
div#body #content {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 0;
  max-width: 62.5em;
  *zoom: 1;
  position: relative;
  padding-left: 0.9375em;
  padding-right: 0.9375em;
}
div#body #header::before,
div#body #header::after,
div#body #content::before,
div#body #content::after {
  content: " ";
  display: table;
}
div#body #header::after,
div#body #content::after {
  clear: both;
}
div#body #content > h1:first-child:not([class]) {
  color: rgba(0, 0, 0, 0.85);
  border-bottom: 1px solid #ddddd8;
  padding-bottom: 8px;
  margin-top: 0;
  padding-top: 1rem;
  margin-bottom: 1.25rem;
}
div#body .literalblock pre,
div#body .listingblock pre:not(.highlight),
div#body .listingblock pre[class="highlight"],
div#body .listingblock pre[class^="highlight "],
div#body .listingblock pre.CodeRay,
div#body .listingblock pre.prettyprint {
  background: #f7f7f8;
}
div#body .literalblock pre,
div#body .literalblock pre[class],
div#body .listingblock pre,
div#body .listingblock pre[class] {
  -webkit-border-radius: 4px;
  border-radius: 4px;
  word-wrap: break-word;
  padding: 1em;
}
div#body .literalblock pre.nowrap,
div#body .literalblock pre[class].nowrap,
div#body .listingblock pre.nowrap,
div#body .listingblock pre[class].nowrap {
  overflow-x: auto;
  white-space: pre;
  word-wrap: normal;
}
@media screen and (min-width: 768px) {
  div#body .literalblock pre,
  div#body .literalblock pre[class],
  div#body .listingblock pre,
  div#body .listingblock pre[class] {
    font-size: 0.90625em;
  }
}
div#body .literalblock.output pre {
  color: #f7f7f8;
  background-color: rgba(0, 0, 0, 0.9);
}
div#body .listingblock > .content {
  position: relative;
}
div#body table.tableblock {
  max-width: 100%;
  border-collapse: separate;
}
div#body p.tableblock:last-child {
  margin-bottom: 0;
}
div#body td.tableblock > .content {
  margin-bottom: -1.25em;
}
div#body table.tableblock,
div#body th.tableblock,
div#body td.tableblock {
  border: 0 solid #dedede;
}
div#body table.grid-all > thead > tr > .tableblock,
div#body table.grid-all > tbody > tr > .tableblock {
  border-width: 0 1px 1px 0;
}
div#body table.grid-cols > * > tr > .tableblock {
  border-width: 0 1px 0 0;
}
div#body table.grid-rows > thead > tr > .tableblock,
div#body table.grid-rows > tbody > tr > .tableblock {
  border-width: 0 0 1px;
}
div#body table.grid-all > * > tr > .tableblock:last-child,
div#body table.grid-cols > * > tr > .tableblock:last-child {
  border-right-width: 0;
}
div#body table.grid-all > tbody > tr:last-child > .tableblock,
div#body table.grid-all > thead:last-child > tr > .tableblock,
div#body table.grid-rows > tbody > tr:last-child > .tableblock,
div#body table.grid-rows > thead:last-child > tr > .tableblock {
  border-bottom-width: 0;
}
div#body table.frame-all {
  border-width: 1px;
}
div#body table.frame-sides {
  border-width: 0 1px;
}
div#body table.stripes-all tr,
div#body table.stripes-odd tr:nth-of-type(odd) {
  background: #f8f8f7;
}
div#body table.stripes-none tr,
div#body table.stripes-odd tr:nth-of-type(even) {
  background: none;
}
div#body th.halign-left,
div#body td.halign-left {
  text-align: left;
}
div#body th.halign-right,
div#body td.halign-right {
  text-align: right;
}
div#body th.halign-center,
div#body td.halign-center {
  text-align: center;
}
div#body th.valign-top,
div#body td.valign-top {
  vertical-align: top;
}
div#body th.valign-bottom,
div#body td.valign-bottom {
  vertical-align: bottom;
}
div#body th.valign-middle,
div#body td.valign-middle {
  vertical-align: middle;
}
div#body table thead th {
  font-weight: bold;
}
div#body tbody tr th {
  display: table-cell;
  line-height: 1.6;
  background: #f7f8f7;
}
div#body tbody tr th,
div#body tbody tr th p {
  color: rgba(0, 0, 0, 0.8);
  font-weight: bold;
}
div#body p.tableblock > code:only-child {
  background: none;
  padding: 0;
}
div#body p.tableblock {
  font-size: 1em;
}
div#body ul.checklist,
div#body ul.none,
div#body ol.none {
  list-style-type: none;
}
div#body ul.checklist {
  margin-left: 0.625em;
}
div#body ul.checklist li > p:first-child > .fa-square-o:first-child,
div#body ul.checklist li > p:first-child > .fa-check-square-o:first-child {
  width: 1.25em;
  font-size: 0.8em;
  position: relative;
  bottom: 0.125em;
}
div#body ul.checklist li > p:first-child > input[type="checkbox"]:first-child {
  margin-right: 0.25em;
}
div#body ol {
  margin-left: 1.75em;
}
div#body ul li ol {
  margin-left: 1.5em;
}
div#body dl dd {
  margin-left: 1.125em;
}
div#body dl dd:last-child,
div#body dl dd:last-child > :last-child {
  margin-bottom: 0;
}
div#body ol > li p,
div#body ul > li p,
div#body ul dd,
div#body ol dd,
div#body .olist .olist,
div#body .ulist .ulist,
div#body .ulist .olist,
div#body .olist .ulist {
  margin-bottom: 0.625em;
}
div#body .th {
  line-height: 0;
  display: inline-block;
  border: solid 4px #fff;
  -webkit-box-shadow: 0 0 0 1px #ddd;
  box-shadow: 0 0 0 1px #ddd;
}
div#body a.image {
  text-decoration: none;
  display: inline-block;
}
div#body .big {
  font-size: larger;
}
div#body .small {
  font-size: smaller;
}
div#body .underline {
  text-decoration: underline;
}
div#body .overline {
  text-decoration: overline;
}
div#body dt,
div#body th.tableblock,
div#body td.content {
  text-rendering: optimizeLegibility;
}
div#body h1,
div#body h2,
div#body p,
div#body td.content,
div#body span.alt {
  letter-spacing: -0.01em;
}
div#body p strong,
div#body td.content strong {
  letter-spacing: -0.005em;
}
div#body .exampleblock > .content {
  background-color: #fffef7;
  border-color: #e0e0dc;
  -webkit-box-shadow: 0 1px 4px #e0e0dc;
  box-shadow: 0 1px 4px #e0e0dc;
}
@page {
  margin: 1.25cm 0.75cm;
}
@media print {
  div#body a {
    color: inherit!important;
    text-decoration: underline !important;
  }
  div#body a.bare,
  div#body a[href^="#"],
  div#body a[href^="mailto:"] {
    text-decoration: none !important;
  }
  div#body a[href^="http:"]:not(.bare)::after,
  div#body a[href^="https:"]:not(.bare)::after {
    content: "(" attr(href) ")";
    display: inline-block;
    font-size: 0.875em;
    padding-left: 0.25em;
  }
  div#body pre,
  div#body blockquote,
  div#body tr,
  div#body img,
  div#body object,
  div#body svg {
    page-break-inside: avoid;
  }
  div#body thead {
    display: table-header-group;
  }
  div#body p,
  div#body blockquote,
  div#body dt,
  div#body td.content {
    font-size: 1em;
    orphans: 3;
    widows: 3;
  }
}
/************************************************************************************
* FONTS
*/
/* lato-regular - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/lato/lato-v24-latin_latin-ext-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* lato-italic - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lato';
  font-style: italic;
  font-weight: 400;
  src: url('fonts/lato/lato-v24-latin_latin-ext-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* lato-700 - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/lato/lato-v24-latin_latin-ext-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* lato-900 - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  src: url('fonts/lato/lato-v24-latin_latin-ext-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* lato-900italic - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lato';
  font-style: italic;
  font-weight: 900;
  src: url('fonts/lato/lato-v24-latin_latin-ext-900italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
@font-face {
  font-family: 'Hack';
  src: url('fonts/hack/hack-regular.woff2') format('woff2'), url('fonts/hack/hack-regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Hack';
  src: url('fonts/hack/hack-bold.woff2') format('woff2'), url('fonts/hack/hack-bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Hack';
  src: url('fonts/hack/hack-italic.woff2') format('woff2'), url('fonts/hack/hack-italic.woff') format('woff');
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: 'Hack';
  src: url('fonts/hack/hack-bolditalic.woff2') format('woff2'), url('fonts/hack/hack-bolditalic.woff') format('woff');
  font-weight: 700;
  font-style: italic;
}

* {
    box-sizing: border-box;
}

body {
    padding: 0px;
    margin: 0px;
    background: #fff;
    font-family: 'Lato', Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
}

a:visited {color: rgb(0, 0, 238); }
a[href]:hover {
    text-decoration: underline;
}
/* Used for better anchor behavior in the context of a fixed header */
.anchor{
   display:block;
   visibility:hidden;
}

/* Our top box */

div#top {
    position: absolute;
    width: 895px;
    left: 230px;
    top: 0px;
    text-align: left;
    z-index: 10;
    height: 150px;
    background: #fff;
}

div#top img#logo {
	width: 60%;
    max-width: 500px;
	height: auto;
    margin-top: 10px;
    margin-left: 5px;
    padding: 10px 0;
	float: none;
}

.facebook-icon,
.twitter-icon,
.instagram-icon,
.email-icon,
.donate-link {
    text-indent: -9999px;
    height: 40px;
    width: 40px;
    background-size: 40px 40px;
    display: inline-block;
    float: right;
    margin-top: 20px;
    margin-left: 10px;
    padding: 5px;
    background-repeat: no-repeat;
	background-color: #B6D990;
}

.facebook-icon:hover,
.twitter-icon:hover,
.email-icon:hover,
.donate-link {
	background-color: #75328A;
}

.donate-link {
	width: auto;
	color: white;
	text-indent: initial;
	line-height: 30px;
	font-size: 20px;
    margin-right: 20px;
	transition: all 1s;
display: inline-block;
}
.donate-link:hover{
	    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.4);
}
.facebook-icon {
    background-image: url('/images/facebook.png');
}

.instagram-icon {
    background-image: url('/images/instagram.png');
}

.twitter-icon {
    background-image: url('/images/twitter.png');
}

.email-icon {
    background-image: url('/images/email.png');
}

.plus-sign {
    background-image: url('/images/plus-sign.png');
    background-repeat: no-repeat;
    height: 60px;
    width: 60px;
    background-size: 60px 60px;
    display: block;
}
/* Sidebar and menu links */

div#sidebar, .sidebar {
    position:   absolute;
    left:       50px;
    top:        0px;
	bottom:     0px;
    width:      165px;
	z-index:    9;
}

div#sidebar img,.sidebar img {
	margin: 15px auto; 
	display: block;
}

div#sidebar > ul, .sidebar > ul {
    margin: 0px;
    padding: 0px;
}

div#sidebar > ul > li, .sidebar > ul > li {
    float: left;
    position: relative;
    display: inline;
    width: 100%;
    background-color: #B6D990;
    margin-bottom: 10px;
    padding: 10px;
    font-family: 'Lato', Arial, Helvetica, sans-serif;
}

div#sidebar > ul > li>a, div#sidebar strong {
    font-size: 18px;
    font-weight: 700;
    display: block;
    color: #ffffff !important;
    text-decoration: none;
}

div#sidebar > ul li:hover {
    background-color: #75328A;
}
/* Main body entries and images */

div#body {
    position: absolute;
    left: 225px;
    top: 175px;
    max-width: 895px;
    padding-left: 10px;
    padding-right: 20px;
    margin: 0px;
    color: #75328A;
}

div.inset {
    margin-top: 20px;
    margin-left: 30px;
}

span.date {
    font-size: 10px;
    font-family: courier;
    float: right;
    clear: both;
}

div.item {
    float: left;
    padding: 0px 0px 20px 0px;
	width: 100%;
}

div.item>img,
div.item>div#map,
div.item .side {
    float: left;
    max-width: 100%;
    height: auto;
    vertical-align: text-top;
    padding: 0 10px 20px;
}

div.video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 */
    
    padding-top: 25px;
    height: 0;
}

iframe {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

div#cm_map {
    border: 1px solid black;
    width: 350px;
    height: 200px;
    -moz-box-shadow: 5px 5px 7px #000;
    -webkit-box-shadow: 5px 5px 7px #000;
    box-shadow: 5px 5px 7px #000;
}

h1,
h2,
h3 {
    padding: 0px;
    margin: 0px;
    font-size: 30px;
    font-weight: 900;
    margin-bottom: 10px;
}
#header>h1:first-child {margin-top: 0 !important; }
h1 { line-height: 30px; }
h2 { font-size: 20px; }
h3 { font-size: 16px; }

div#socialMedia {
    width: 180px;
}

div#socialMedia * {
    margin-left: 5px;
    float: left;
}

iframe#forum_embed {
    width: 80%;
    height: 80%;
    z-index: -1;
    position: fixed;
    margin: 20px;
    visibility: hidden;
    opacity: 0;
    background: white;
    -webkit-transition: opacity 0.5s ease-in-out;
    -webkit-transition: opacity 0.5s ease-out;
    -moz-transition: opacity 0.5s ease-out;
    -o-transition: opacity 0.5s ease-out;
    -moz-box-shadow: 5px 5px 7px #000;
    -webkit-box-shadow: 5px 5px 7px #000;
    box-shadow: 5px 5px 7px #000;
}

iframe#forum_embed.shown {
    opacity: 1;
    visibility: visible;
    z-index: 100;
}
/* *********** FORM STYLES *********** */

form div {
    position: relative;
    float: left;
    margin-right: 10px;
}

form br {
    clear: both;
}

fieldset {
    width: 550px;
    margin: 10px 0px;
}

legend {
    font-weight: 700;
}

input {
    margin: 1px 0px 2px 0px;
    padding: 0px;
    font-family: arial, helvetica, serif;
    font-size: 12px;
}

label {
    font-size: 10px;
    display: block;
    color: black;
    margin: 0px 0px 5px 2px;
    clear: left;
    z-index: 0;
    -moz-user-select: none;
    -khtml-user-select: none;
    user-select: none;
}

select {
    font-size: 11px;
    padding: 0px;
    margin-top: 2px;
    z-index: 0;
}
/* New Layout Styles - Used across pages */

div.one-third {
    width: 33%;
    min-width: 0;
    padding: 0 20px 0 0;
}

div.two-thirds {
    width: 66%;
    min-width: 0;
    padding: 0 20px 0 0;
}

div.one-half {
    width: 50%;
    min-width: 0;
    padding: 0 20px 25px 0;
}

div.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

div.bottom-border {
    border-bottom: 1px solid #B6D990;
    margin-bottom: 25px;
}

div.top-border {
    border-top: 1px solid #B6D990;
    padding-top: 25px;
}

blockquote {
    font-family: Georgia, serif;
    font-size: 18px;
    font-style: italic;
    max-width: 500px;
    margin: 50px auto;
    padding: 0.35em 40px;
    line-height: 1.15;
    position: relative;
    color: #383838;
}

blockquote:before {
    display: inline-block;
    content: "\201C";
    font-size: 80px;
    position: relative;
    top: 65px;
	left: -40px;
    color: #7a7a7a;
}

blockquote cite {
    color: #999999;
    font-size: 14px;
    display: block;
    margin-top: 5px;
}

blockquote cite:before {
    content: "\2014 \2009";
}
/* *********** PAGE-SPECIFIC STYLES *********** */
/* Materials Layout */

.anchor {
    display: block;
    position: relative;
    top: -175px;
    visibility: hidden;
}

.yellow {
    color: #F4AB3A;
}

.button-purple, .button-purple[href] {
    display: block;
    width: 200px;
	text-align: center;
    background: #75328A;
    padding: 5px 20px 6px;
    margin: 20px 0;
    border-radius: 18px;
    color: #fff;
    font-weight: 900;
    font-size: 20px;
}

.button-white {
    float: none;
    display: block;
    width: 230px;
    padding: 5px 20px 6px;
    margin: 20px 0;
    background: #fff;
    border: 1px solid #75328A;
    border-radius: 18px;
    color: #75328A;
    font-weight: 900;
    font-size: 20px;
}
/* Courses */

ul.done b {
    text-decoration: line-through;
}

.BSUnitTitle {
    display: inline-block;
    margin-right: 5px;
    font-size: 18px;
    font-weight: 700;
}
.BSUnitTitle::after{content: ' ::';}

.BSUnitSummary {
    margin: 15px 0px;
}
/* Workshops Layout */

.workshops div.item>img {
    max-width: 100%;
    height: auto;
}

.member-bio {
    padding-bottom: 15px;
    border-bottom: 1px solid #B6D990;
}
/* Contribute Layout */

.contribute div.one-half>img {
    width: 100%;
    height: auto;
    padding: 0 0 10px 0;
}

/* Tab and dropdown styles */
ul.tab, .tabcontent li {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    cursor: pointer;
}

/* Float the list items side by side */
ul.tab>li {
    display: inline-block;
    min-width: 160px;
    transition: 0.3s; 
    text-align: center;
    z-index: 2;
    border: solid 1px transparent;
}

.tablinks h2 a {color: inherit;}
/* Style the tab content */
.tabcontent{ 
    display: none; 
    position: absolute;
    padding: 12px 12px; 
    left: 0px;
    color: #75328A;
    background-color: #f9f9f9;
    text-align: left;
    z-index: 1;
}
ul.tab>li:hover, .tabcontent {
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.4);
    opacity: 1;
    border: solid 1px black;
}
ul.tab>li:hover {background: #75328A; color: white;}

ul.tab li:hover .tabcontent { display: block;}

.tabcontent img{float: right; border: solid 1px black;}

.dropdown-content {
    display: none;
    position: absolute;
    font-size: 16px;
    left: 150px;
    top: 0px;
    background-color: #75328A;
    min-width: 225px;
    padding: 12px 16px;
    z-index: 99;
}

.dropdown-content a { display: block; color: white !important; }

.dropdown:hover .dropdown-content, .dropdown-content:hover {
    display: block;
}

div#copyright{
  display: inline-block;
  border-top: dashed 2px black;
  padding: 20px;
  margin-top: 20px;
  font-size: 14px;
  line-height: 16px;
}

/* 1000px Breakpoint */

@media only screen and (max-width: 1000px),
only screen and (max-device-width: 1000px) {
    .twitter-icon,
    .instagram-icon,
    .email-icon,
	.facebook-icon {
        display: none;
    }

    div#sidebar {
        width: 20%;
        max-width: 165px;
    }

	div#sidebar img, div#top img#logo {width: 70%; height: auto; }
    div.one-third,
    div.one-half {
        width: 100%;
    }
    .quote {
        display: none;
    }
    div#map { width: 100%; text-align:  center;}
    div#map table { margin: auto; }

    div#body{ left: min(225px, calc(50px + 20%)); width: calc(100% - 20% - 50px) }
}

/* 600px Breakpoint */
@media only screen and (max-width: 600px),
only screen and (max-device-width: 600px) {
	div#top img#logo { margin-top: 10px; width: 60%; height: auto;}
    div#socialMedia * { display: none; }
    div#sidebar ul li a {
        font-size: 16px;
    }
    .duration { display: none; }
}

/* 500px Breakpoint */
@media only screen and (max-width: 500px),
only screen and (max-device-width: 500px) {
    .donate-link { display: none; }
    div#top {
        height:     75px;
        width:      100%;
        left:       0;
        padding:    0px;
        text-align: center;
    }
    div#top, div#sidebar, div#body { position: relative; }
    div#top img#logo {
        width:      200px;
        height:     auto;
        margin:     10px;
        margin-left: 40px;
        padding:    0;
    }
    /* Sidebar and menu links */
    
    div#sidebar {
        top:        0px;
        left:       0px;
        width:      100%;
        max-width:  none;
        z-index:    10;
        background: #B6D990;
		margin-bottom: 10px;
    }
	div#sidebar img { display: none; }
    div#sidebar ul {
        text-align: center;
		margin:     0px auto;
    }
    div#sidebar ul li {
        width:      auto;
		float:      none;
        border:     0px;
        margin:     0px 10px;
        padding:    5px 0;
		display:    inline-block;
    }
    div#sidebar ul>li>a {
        font-size: 14px;
        display: inline;
        color: white;
    }
    div#sidebar ul li:hover, div#sidebar ul li:hover > a {
        background-color: #B6D990;
		color: #75328A;
    }
    /* Main body entries and images */
    div#body {
        width:      100%;
        left:       0px;
        top:        0px;
        margin:     0px;
        padding:    0px 10px;
        max-width:  640px;
    }
    div.item {
        width: 100%;
        min-width: 95%;
    }
    div.item h1 {
        font-size: 18px;
    }
    div.item>iframe,
    div.item>img,
    div.item>div#map {
        clear: both;
        float: none;
        padding: 0 0 10px 0;
        max-width: 90%;
        display: block;
        margin: auto;
    }
    div#cm_map {
        border: 1px solid black;
        width: 250px;
        height: 200px;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
    }
    div#socialMedia * { display: none; }

    /* Homepage Layout */
    
    .homepage div.item {
        width: 100%;
        min-width: 0;
        padding: 15px 10px 10px;
    }
    div.two-halves p {
        width: 100%;
        min-width: 0;
        padding: 0;
    }
    #first-quote { display: none; }
    ul.tab li {min-width: 100px;}
    div#quotes, div.item>div#map {margin: 0px; padding: 0px;}
    .dropdown-content { left: 0px; }

}

@media print {
	#top, #sidebar {display: none;}

}
/* Add our curriculum-specific CSS, then rule-changes for the old website */
/************************************************************************************
* SYSTEMWIDE STYLES
*/
/* Note(Emmanuel): use this for positioning and font size! */
div#body {
  font-family: 'Lato', Arial, Helvetica, sans-serif;
  color: #75328A;
  width: 100%;
  /* needed to undo effect of html{display:flex} */
  display: block;
  position: relative;
  max-width: 700px;
  -webkit-font-smoothing: antialiased;
  /* Set Defaults (many asciidoc overrides) */
  /* unset asciidoc thead sizes */
  /* Make .mathunicode and MathJax look similar */
  /*
    When used in a header, exponents should be medium
    and there's no need for a bottom border
  */
  /* 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 */
  /* Hide anything that we only want seen on Google drive */
  /* Warn the user the Save-to-Drive is broken on Safari */
  /* outOfDate warning */
  /* images and floated images */
  /* These items should always max-out pagewidth, and have no padding */
  /* Sections */
  /* Images and Captions */
  /*  RULES FOR GLOSSARY ITEMS  */
  /* Rubies are sensitive to line-height, so force
    the same font and special superscript behavior
  */
}
div#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: bold;
  z-index: -1;
}
div#body h1 {
  font-size: 24px;
  font-weight: 900;
  font-family: 'Lato', Arial, Helvetica, sans-serif;
  line-height: 30px;
}
div#body h2 {
  margin: 0;
  font-family: 'Lato', Arial, Helvetica, sans-serif;
}
div#body h3 {
  font-size: 16px;
  font-weight: bold;
}
div#body .prefix {
  font-style: italic;
  color: gray;
}
div#body a {
  color: #2156a5 !important;
}
div#body p {
  margin: 10px 0px;
  font-size: inherit;
}
div#body sup {
  font-size: smaller;
  top: -0.55em;
  left: 1px;
}
div#body sub {
  font-size: smaller;
  bottom: -0.35em;
}
div#body code {
  border: none;
  font-family: Hack, "Courier New", monospace;
  display: inline-block;
  padding: 0 !important;
  line-height: 1em !important;
  font-size: inherit;
}
div#body mark {
  background: none;
  color: inherit;
}
div#body em,
div#body strong {
  margin: 0px 2px;
}
div#body .listingblock pre {
  margin: 3px 0px;
  padding: 0;
}
div#body .indentedpara {
  margin-left: 3em;
}
div#body table thead * {
  font-size: unset !important;
}
div#body ul {
  line-height: inherit;
}
div#body .ulist ul {
  margin-bottom: 0px;
}
div#body .ulist p {
  margin: 5px 0px;
}
div#body .quad {
  display: inline-block;
}
div#body .citation {
  position: relative;
}
div#body .citation .apa-citation {
  display: none;
}
div#body .citation:hover .apa-citation {
  display: inline-block;
  position: absolute;
  top: 100%;
  left: 0;
  width: 300px;
  background: lightyellow;
  font-size: 6pt;
  line-height: initial;
  border: 1px solid gray;
  padding: 5px;
}
div#body .MathJax,
div#body .mathunicode {
  display: inline-block;
  font-weight: normal !important;
  margin-left: 2px;
  margin-right: 3px;
}
div#body .MathJax .overbar,
div#body .mathunicode .overbar {
  border-top: 1px solid;
  display: inline-block;
  line-height: 1;
  margin-left: 2px;
}
div#body .MathJax sup,
div#body .mathunicode sup {
  font-size: 65% !important;
}
div#body .MathJax sub,
div#body .mathunicode sub {
  font-size: 65% !important;
}
div#body .MathJax {
  margin: 0 !important;
  font-family: MJXZERO, 'MJXTEX';
  font-size: inherit !important;
}
div#body .mathunicode {
  font-family: MJXZERO, 'MJXTEX';
  font-size: inherit !important;
  line-height: 0;
}
div#body em .mathunicode,
div#body em .MathJax * {
  font-family: 'MJXTEX-I';
  margin-right: 1px;
}
div#body strong .mathunicode,
div#body strong .MathJax * {
  font-family: 'MJXTEX-B';
  margin-right: 1px;
}
div#body em strong .mathunicode,
div#body strong em .mathunicode,
div#body strong .MathJax .TEX-I,
div#body em .MathJax .TEX-B {
  font-family: 'MJXTEX-BI';
  margin-right: 1px;
}
div#body table,
div#body td.tableblock > .content {
  margin-bottom: 0px;
}
div#body tr th.tableblock code,
div#body td.tableblock code {
  background: none;
}
div#body td.tableblock pre {
  background: none !important;
}
div#body tr th.tableblock {
  background: #eee !important;
  padding: 0.2em 0.5em;
  font-size: 1rem;
}
div#body #content {
  margin: 0;
}
div#body #header > h1:only-child {
  border-bottom: none;
}
div#body #header sup {
  font-size: medium;
}
div#body .acknowledgmentsect {
  position: relative;
  top: 100%;
  margin-top: 20px;
}
div#body .acknowledgment {
  padding-bottom: 5px !important;
  font-size: 12px !important;
  font-style: italic !important;
  line-height: inherit !important;
}
div#body .acknowledgment * {
  line-height: inherit !important;
}
div#body .acknowledgment img {
  width: 94px !important;
  height: 37px !important;
  float: right !important;
}
div#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;
}
div#body.canBeLongerThanAPage #footer {
  display: none;
}
div#body .gdrive-only {
  display: none;
  visibility: hidden;
}
div#body #safariWarning {
  display: none;
}
div#body #savetodrive-div:hover + #safariWarning {
  display: block;
  background: #75328AAA;
  color: white;
  padding: 5px;
  margin-top: 75px;
  border-radius: 5px;
  font-size: 10pt;
  line-height: 1rem;
}
div#body #outOfDate {
  background: black;
  color: white;
  display: block;
  width: 100%;
  position: fixed;
  z-index: 9999;
}
div#body #outOfDate a {
  color: lightblue;
}
div#body .left {
  text-align: left  !important;
}
div#body .right {
  text-align: right !important;
}
div#body .right .image-figure {
  margin-left: 1em;
  margin-bottom: 1em;
}
div#body .center,
div#body .centered-image {
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center !important;
  padding: 1ex 0ex;
}
div#body #header,
div#body #content,
div#body #footer {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0;
}
div#body .lesson-section-1,
div#body .lesson-section-1 + .lesson-section-1 {
  clear: both;
  display: block;
}
div#body .lesson-section-2 {
  clear: both;
  width: 100%;
  margin: 20px 0px;
}
div#body .sectionbreak {
  display: block;
  width: auto;
  border-bottom: solid 3px black;
  margin: 3px 0px;
}
div#body .image-figure {
  display: inline-block;
}
div#body .image-figure .image-caption {
  display: block;
  font-style: italic;
  line-height: 1.1;
  word-break: break-word;
  text-align: center;
  margin: 0;
  color: black;
}
div#body .image-figure .image-caption:empty {
  display: none;
}
div#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 */
}
div#body .editbox:empty {
  display: none;
}
div#body .optionaltag::before {
  font-style: italic;
}
div#body div.hiddenblock {
  display: none;
}
div#body .strategy-box {
  background: #efefef;
  border: solid #1a73b5 5px !important;
  width: 75%;
  margin-left: auto;
  margin-right: auto;
  padding: 0 15px;
  display: block;
  clear: both;
  position: relative;
}
div#body .strategy-box td {
  width: 8in;
}
div#body .strategy-box a {
  color: blue;
  text-decoration: underline;
}
div#body .strategy-box .title,
div#body .strategy-box .title p {
  width: 100%;
  display: block;
  text-align: center;
  font-weight: bold;
  font-size: 1.5rem;
}
div#body .glossary {
  margin-bottom: 20px;
}
div#body .glossary * {
  display: inline;
  font-size: 16px;
}
div#body .glossary dt::after {
  content: '::';
  margin: 0px 5px;
}
div#body .glossary dd {
  margin: 0px;
}
div#body .glossary dd::after {
  content: '\A';
  white-space: pre;
}
div#body .glossary .title {
  display: block;
  font-weight: bold !important;
  color: inherit;
  font-size: 18px;
}
div#body .alignedEntries {
  display: none;
}
div#body .coverageElement {
  display: none;
}
div#body .standard-menu-container {
  padding: 10px;
  display: flex;
  justify-content: space-between;
}
div#body .standard-menu-container div:nth-child(1) {
  width: 75%;
}
div#body .standard-menu-container div:nth-child(2) {
  width: 25%;
}
div#body .vspace {
  display: inline-block;
}
div#body .fitbruby::before,
div#body .fitb::before {
  content: '\00200b';
}
div#body .fitbruby {
  margin-bottom: 0.75rem;
}
div#body .fitbruby .ruby,
div#body .recipe .ruby:after,
div#body .data-cycle .ruby:after {
  position: absolute;
  display: inline-block;
  bottom: -11.85px;
  left: 0;
  font-size: 9.5px;
  line-height: 14px;
  font-weight: normal;
  width: 100%;
  text-align: center;
  font-style: normal;
  font-family: 'Lato', Arial, Helvetica, sans-serif;
  white-space: nowrap;
  user-select: none;
}
div#body .ruby * {
  font-family: 'Lato', Arial, Helvetica, sans-serif !important;
  background: none !important;
}
div#body .ruby sup {
  top: -0.3em;
  font-size: 7px;
}
div#body .fitb.stretch,
div#body .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 */
}
div#body .fitb.stretch::after,
div#body .fitbruby.stretch::after {
  content: "\00a0";
  position: absolute;
  width: 1000px;
  left: 0;
  bottom: -1px;
}
div#body .vocab {
  font-weight: bold;
  font-style: italic;
  color: #75328A;
}
/* 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 gray;
  vertical-align: baseline;
}
div#body:not(.LessonPlan, .narrativepage) p {
  overflow: hidden;
  margin: 0px;
  line-height: 1.3;
}
/************************************************************************************
* NARRATIVE PAGE STYLES
*/
div#body.narrativepage {
  font-size: 12pt;
}
div#body.narrativepage p {
  line-height: 1.6;
}
div#body.narrativepage .logo {
  float: right;
}
div#body.narrativepage .logo img {
  max-width: 375px;
}
div#body.narrativepage #lesson-list * {
  display: inline;
  margin-bottom: 0px;
  margin-left: 0px;
}
div#body.narrativepage #lesson-list dt {
  margin-top: 15px;
  display: inline-block;
  font-size: 17px;
}
div#body.narrativepage #lesson-list dt a.project::before {
  content: '🎨 ';
  text-decoration: none;
}
div#body.narrativepage #lesson-list dd:after {
  display: block;
  content: '';
}
div#body.narrativepage #lesson-list dd:before {
  display: inline;
  content: ' :: ';
  font-weight: bold;
}
div#body.narrativepage .course-banner {
  font-style: italic;
  background: #B6D990aa;
  border: #75328A 1px dashed;
  padding: 5px;
  margin-bottom: 2rem;
}
div#body.narrativepage .course-banner a {
  color: black;
  text-decoration: underline;
}
/************************************************************************************
* LESSON PAGE STYLES
*/
div#body.LessonPlan {
  font-size: 12pt;
  /* The summary table at the top of each lesson */
  /* Special styling of teacherNotes used inside overview sections */
  /* Lesson sections are comprised of content blocks, each separated by the same amount of space */
  /* Direct link to a section of a lesson */
  /* class for styling duration info in headers */
  /* Special links back to older, pre-remix materials */
  /* COLLAPSED ELEMENTS:
   * divs that contain a .slidebreak or divs that are .hiddenblock are
   * considered *collapsed*, since they take up no space in the lesson plan
   */
  /*
   * CONTENT BOXES: lesson-instruction, lesson-roleplay, teacherNote, q-and-a, lesson-point...
   *
   * When two of the same content boxes are separated by one or more @{collapse}d
   * elements (see above), make it look like the second box is part of the first
   */
  /* Let two adjacent lesson-points blend into each other */
  /* text within a table should inherit from the color outside the table */
}
div#body.LessonPlan .other-proglang::before {
  font-style: italic;
}
div#body.LessonPlan .preamble {
  color: black;
  background: transparent;
  /* Hide slide links intentionally left blank, and display useful feedback */
  /* Custom materials link styles */
}
div#body.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;
}
div#body.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";
}
div#body.LessonPlan .preamble.left-header tr td:nth-child(1) {
  background-color: #b7d893;
}
div#body.LessonPlan .preamble.left-header tr td:nth-child(1) p {
  font-weight: bold;
}
div#body.LessonPlan .preamble .Optional::before,
div#body.LessonPlan .preamble .OptProject::before,
div#body.LessonPlan .preamble .handout::before {
  color: gray;
}
div#body.LessonPlan .preamble #material-links p .showPageLinks a,
div#body.LessonPlan .preamble #opt-material-links p .showPageLinks a {
  text-decoration: none;
}
div#body.LessonPlan .preamble #material-links p .showPageLinks a::after,
div#body.LessonPlan .preamble #opt-material-links p .showPageLinks a::after {
  content: ' ▼ ';
}
div#body.LessonPlan .preamble #material-links p + .ulist,
div#body.LessonPlan .preamble #opt-material-links p + .ulist {
  transition: 1s ease-in;
  max-height: 0;
  overflow: hidden;
  padding-left: 5px;
  margin: 0;
  font-style: italic;
  font-size: smaller;
}
div#body.LessonPlan .preamble #material-links p + .ulist .pageNum,
div#body.LessonPlan .preamble #opt-material-links p + .ulist .pageNum {
  float: right;
  margin-right: 10%;
}
div#body.LessonPlan .preamble #material-links p.open .showPageLinks a::after,
div#body.LessonPlan .preamble #opt-material-links p.open .showPageLinks a::after {
  content: ' ▲ ';
}
div#body.LessonPlan .preamble #material-links p.open + .ulist,
div#body.LessonPlan .preamble #opt-material-links p.open + .ulist {
  transition: 1s ease-in;
  max-height: 1000px;
}
div#body.LessonPlan h2 {
  font-size: 1.75em;
  font-weight: normal;
}
div#body.LessonPlan .lesson-section-2 h3 {
  font-size: 1.5em;
  font-style: italic;
  margin: 0px;
}
div#body.LessonPlan h3[id^="_overview"] ~ .paragraph .teacherNote {
  width: 100%;
  border-width: 0 0 0 1px !important;
  padding-left: 20px;
}
div#body.LessonPlan .lesson-section-2 > *,
div#body.LessonPlan .lesson-section-3 > * {
  margin-top: 1em;
}
div#body.LessonPlan .lesson-section-1,
div#body.LessonPlan .lesson-section-1 + .lesson-section-1 {
  border-top: solid 2px black;
}
div#body.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;
}
div#body.LessonPlan .duration {
  position: absolute;
  right: 0px;
  font-style: italic;
  font-weight: 200;
  min-width: 150px;
}
div#body.LessonPlan .duration {
  display: none;
}
div#body.LessonPlan .old-materials p {
  width: 100%;
  background: #75328AAA;
  color: black;
  text-align: center;
}
div#body.LessonPlan .optpara {
  border: 2px;
  border-style: groove;
  border-radius: 20px;
  background-color: transparent !important;
  padding: 18px;
  /* Override Asciidoc default here */
}
div#body.LessonPlan .optpara::before {
  font-family: "Open Sans", "DejaVu Sans", sans-serif;
  font-weight: 300;
  display: block;
  font-size: 1.25em;
}
div#body.LessonPlan .optpara > .content > * {
  margin-top: 1em;
}
div#body.LessonPlan .optpara .exampleblock > .content {
  background-color: inherit;
  border: none;
  box-shadow: none;
  border-radius: 20px;
}
div#body.LessonPlan code {
  line-height: 1.5 !important;
}
div#body.LessonPlan .codesexp,
div#body.LessonPlan .circleevalsexp,
div#body.LessonPlan .editbox,
div#body.LessonPlan .cm-s-scheme {
  font-size: 0.8em;
}
div#body.LessonPlan .lesson-instruction,
div#body.LessonPlan .lesson-roleplay,
div#body.LessonPlan .q-and-a {
  min-height: 50px;
  background: #eee;
  display: flow-root;
  clear: both;
  padding-right: 5px;
}
div#body.LessonPlan .lesson-instruction > *:first-child,
div#body.LessonPlan .lesson-roleplay > *:first-child,
div#body.LessonPlan .q-and-a > *:first-child {
  margin-left: 60px;
}
div#body.LessonPlan .lesson-instruction > *:first-child::before,
div#body.LessonPlan .lesson-roleplay > *:first-child::before,
div#body.LessonPlan .q-and-a > *:first-child::before {
  content: url('images/lesson-instruction.png');
  height: 50px;
  width: 50px;
  float: left;
  margin-left: -50px;
  margin-top: 10px;
}
div#body.LessonPlan .q-and-a {
  min-height: 85px;
}
div#body.LessonPlan .q-and-a .qblock,
div#body.LessonPlan .q-and-a .ablock {
  font-style: normal;
  display: inline;
}
div#body.LessonPlan .q-and-a li:has(>.ablock) {
  margin-left: 1em;
  list-style-type: none;
}
div#body.LessonPlan .q-and-a li:has(>.ablock)::before {
  content: '→';
}
div#body.LessonPlan .q-and-a li:has(>.ablock) li {
  margin-left: 1em;
}
div#body.LessonPlan .q-and-a .ablock,
div#body.LessonPlan .q-and-a .ablock + .ulist p {
  font-style: italic;
}
div#body.LessonPlan .paragraph:has(.slidebreak) {
  clear: both;
  margin: 0 !important;
}
div#body.LessonPlan .paragraph:has(.slidebreak) p {
  margin: 0 !important;
}
div#body.LessonPlan .lesson-instruction + :is(div:has(>p .slidebreak), .hiddenblock) + .lesson-instruction,
div#body.LessonPlan .lesson-instruction + :is(div:has(>p .slidebreak), .hiddenblock) + :is(div:has(>p .slidebreak), .hiddenblock) + .lesson-instruction,
div#body.LessonPlan .lesson-roleplay + :is(div:has(>p .slidebreak), .hiddenblock) + .lesson-roleplay,
div#body.LessonPlan .lesson-roleplay + :is(div:has(>p .slidebreak), .hiddenblock) + :is(div:has(>p .slidebreak), .hiddenblock) + .lesson-roleplay,
div#body.LessonPlan .teacherNote + :is(div:has(>p .slidebreak), .hiddenblock) + .teacherNote,
div#body.LessonPlan .teacherNote + :is(div:has(>p .slidebreak), .hiddenblock) + :is(div:has(>p .slidebreak), .hiddenblock) + .teacherNote,
div#body.LessonPlan .q-and-a + :is(div:has(>p .slidebreak), .hiddenblock) + .q-and-a,
div#body.LessonPlan .q-and-a + :is(div:has(>p .slidebreak), .hiddenblock) + :is(div:has(>p .slidebreak), .hiddenblock) + .q-and-a {
  margin: 0;
}
div#body.LessonPlan .lesson-instruction + :is(div:has(>p .slidebreak), .hiddenblock) + .lesson-instruction > *:first-child::before,
div#body.LessonPlan .lesson-instruction + :is(div:has(>p .slidebreak), .hiddenblock) + :is(div:has(>p .slidebreak), .hiddenblock) + .lesson-instruction > *:first-child::before,
div#body.LessonPlan .lesson-roleplay + :is(div:has(>p .slidebreak), .hiddenblock) + .lesson-roleplay > *:first-child::before,
div#body.LessonPlan .lesson-roleplay + :is(div:has(>p .slidebreak), .hiddenblock) + :is(div:has(>p .slidebreak), .hiddenblock) + .lesson-roleplay > *:first-child::before,
div#body.LessonPlan .teacherNote + :is(div:has(>p .slidebreak), .hiddenblock) + .teacherNote > *:first-child::before,
div#body.LessonPlan .teacherNote + :is(div:has(>p .slidebreak), .hiddenblock) + :is(div:has(>p .slidebreak), .hiddenblock) + .teacherNote > *:first-child::before,
div#body.LessonPlan .q-and-a + :is(div:has(>p .slidebreak), .hiddenblock) + .q-and-a > *:first-child::before,
div#body.LessonPlan .q-and-a + :is(div:has(>p .slidebreak), .hiddenblock) + :is(div:has(>p .slidebreak), .hiddenblock) + .q-and-a > *:first-child::before {
  display: none;
}
div#body.LessonPlan .q-and-a > *:first-child::before {
  content: url('images/q-and-a.png');
}
div#body.LessonPlan .q-and-a table {
  background: none;
}
div#body.LessonPlan .lesson-roleplay > *:first-child::before {
  content: url('images/lesson-roleplay.png');
}
div#body.LessonPlan .lesson-point {
  color: black;
  border-style: solid;
  margin-left: 2em;
  margin-right: 2em;
  border-width: 2px 0px;
  clear: both;
}
div#body.LessonPlan .lesson-point p {
  margin: 0ex 1ex;
}
div#body.LessonPlan .lesson-point:has(+.lesson-point) {
  border-bottom: none;
}
div#body.LessonPlan .lesson-point + .lesson-point {
  border-top: none;
}
div#body.LessonPlan .teacherNote {
  display: inline-block;
  padding: 0 5px;
  border: black dashed 1px;
  font-style: italic;
  width: 100%;
}
div#body.LessonPlan .teacherNote table {
  margin: 10px;
  width: calc(100% - 20px);
}
div#body.LessonPlan .sectionbody td {
  color: inherit;
}
/************************************************************************************
* WORKBOOK PAGES
*/
/* Maximize vertical space for content */
div#body.workbookpage,
div#body.workbookpage #content,
div#body.workbookpage #preamble_disabled,
div#body.workbookpage #preamble_disabled .sectionbody,
div#body.workbookpage #content .sect1.lesson-section-1 {
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
div#body.workbookpage #content .sect1.lesson-section-1 .sectionbody {
  display: contents;
}
div#body.solution-page .fitbruby,
div#body.solution-page .fitb {
  font-style: italic;
}
div#body.workbookpage {
  font-size: 9pt;
  /* Use a tiny font for print, but then zoom in @screen */
  color: black !important;
  top: 0;
  left: 0;
  max-width: unset;
  /* Code that shows up in headers should not have the usual background */
  /* set page dimensions */
  /* define 'landscape' page type */
  /* Make content of page as tall as possible */
  /* Some sections shouldn't grow at all, and should basically just be block-level elements
   * (This allows *other* sections to grow, taking up the available space)
  */
  /* In some cases, AsiiDoc will put an empty preamble containing
     only a grandchild for custom styles. In this situation, no display
     is needed
   */
  /* Top-level (non-nested) tables should have vertical margins
  * Make an exception for DR titles, Data Cycles, Graphs & Templates
  */
  /* Give adjacent sections some padding */
  /* make .FillVerticalSpace tables use CSS grid layout */
  /* Override AsciiDoc table defaults based on asciidoc classnames */
  /*
    "Graph" tables provide a pure-CSS solution for all coordinate planes.

    They rely on a set up CSS variables, with reasonable defaults:
      --width and --height determine the size of plane. Defaults to 3in x 3x.
      --min-gap determines the minimum space between graphs. Defaults to 20px.

      --top_pct and --left_pct determine the origin's position. Defaults to (50%, 50%).
      --minors determines how many "minor axes" (incl the one behind major). Defaults to 7.

      --x_label defaults to 'x'
      --y_label defaults to 'y'
  */
  /* 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. */
  /* compact tables */
  /* class for tables containing Pyret data */
}
div#body.workbookpage #header > h1:first-child {
  text-align: center;
  margin-bottom: 0;
}
div#body.workbookpage h1 {
  font-weight: bold;
}
div#body.workbookpage h2 .editbox,
div#body.workbookpage h2 .editbox *,
div#body.workbookpage h2 .pyret {
  color: black;
  background: none;
  margin: 0 5px;
}
div#body.workbookpage:not(.landscape) {
  width: 7.5in;
  height: 9.8in;
}
div#body.workbookpage.landscape {
  width: 9.8in;
  height: 7.5in;
  page: landscape;
}
div#body.workbookpage #content,
div#body.workbookpage #preamble_disabled,
div#body.workbookpage #preamble_disabled .sectionbody,
div#body.workbookpage #preamble_disabled .sectionbody table.FillVerticalSpace,
div#body.workbookpage #content > .sect1 {
  flex-grow: 1;
}
div#body.workbookpage #content > .sect1.no-flex-section {
  flex-grow: 0;
}
div#body.workbookpage #preamble_disabled:has(>.sectionbody>style:only-child) {
  display: none;
}
div#body.workbookpage .sectionbody > table:not(.data-cycle, .recipe_title, .graph, .template) {
  margin: 1ex 0;
}
div#body.workbookpage .teacherNote {
  font-style: italic;
  display: inline;
  line-height: 1.3;
}
div#body.workbookpage .teacherNote * {
  display: inline;
}
div#body.workbookpage .teacherNote::before {
  content: 'Teachers:';
  display: inline;
  font-weight: bold;
}
div#body.workbookpage .lesson-section-1 + .lesson-section-1 {
  border: none;
  margin-top: 1ex;
}
div#body.workbookpage .linkInstructions {
  font-style: italic;
}
div#body.workbookpage table.FillVerticalSpace {
  display: grid;
  height: 100%;
  grid-template-columns: auto;
  grid-template-rows: max-content;
}
div#body.workbookpage table.FillVerticalSpace.SameHeight {
  grid-template-rows: auto;
}
div#body.workbookpage table.FillVerticalSpace > colgroup {
  display: none;
}
div#body.workbookpage table.FillVerticalSpace > tbody,
div#body.workbookpage table.FillVerticalSpace > thead {
  display: contents;
}
div#body.workbookpage table.FillVerticalSpace > tbody > tr,
div#body.workbookpage table.FillVerticalSpace > thead > tr {
  display: contents;
  /* Try to mimic AsciiDoc's TD formatting classes */
}
div#body.workbookpage table.FillVerticalSpace > tbody > tr > td,
div#body.workbookpage table.FillVerticalSpace > thead > tr > td {
  display: flex;
  flex-wrap: wrap;
  position: relative;
}
div#body.workbookpage table.FillVerticalSpace > tbody > tr > td > .content,
div#body.workbookpage table.FillVerticalSpace > thead > tr > td > .content {
  display: contents;
}
div#body.workbookpage table.FillVerticalSpace > tbody > tr > td > .content > *,
div#body.workbookpage table.FillVerticalSpace > thead > tr > td > .content > * {
  width: 100%;
}
div#body.workbookpage table.FillVerticalSpace > tbody > tr > td.valign-top,
div#body.workbookpage table.FillVerticalSpace > thead > tr > td.valign-top {
  align-content: flex-start;
}
div#body.workbookpage table.FillVerticalSpace > tbody > tr > td.valign-middle,
div#body.workbookpage table.FillVerticalSpace > thead > tr > td.valign-middle {
  align-items: center;
}
div#body.workbookpage table.FillVerticalSpace > tbody > tr > td.valign-bottom,
div#body.workbookpage table.FillVerticalSpace > thead > tr > td.valign-bottom {
  align-items: end;
}
div#body.workbookpage table.FillVerticalSpace > tbody > tr > td.halign-left,
div#body.workbookpage table.FillVerticalSpace > thead > tr > td.halign-left {
  justify-content: left;
}
div#body.workbookpage table.FillVerticalSpace > tbody > tr > td.halign-center,
div#body.workbookpage table.FillVerticalSpace > thead > tr > td.halign-center {
  justify-content: center;
}
div#body.workbookpage table.FillVerticalSpace > tbody > tr > td.halign-right,
div#body.workbookpage table.FillVerticalSpace > thead > tr > td.halign-right {
  justify-content: right;
}
div#body.workbookpage table.FillVerticalSpace > tbody > tr:nth-of-type(even) > td,
div#body.workbookpage table.FillVerticalSpace > thead > tr:nth-of-type(even) > td {
  background-color: #f8f8f7;
}
div#body.workbookpage table.FillVerticalSpace.stripes-none tr:nth-of-type(even) > td {
  background: none ;
}
div#body.workbookpage table.graph {
  grid-gap: var(--min-gap, 20px);
  margin-top: 5px;
  /* Add labels for axes */
  /* Location and style of the coefficient value */
  /* Squeeze solution img to the exact dimensions of the td */
}
div#body.workbookpage table.graph td {
  padding: 0;
  border: none !important;
  background-image: linear-gradient(lightblue 2px, transparent 2px), linear-gradient(270deg, lightblue 2px, transparent 2px), linear-gradient(rgba(150, 150, 150, 0.3) 1px, transparent 0px), linear-gradient(270deg, rgba(150, 150, 150, 0.3) 1px, transparent 1px);
  background-size: var(--width, 3in) var(--width, 3in), var(--width, 3in) var(--width, 3in), calc(var(--width, 3in) / var(--minors, 7)) calc(var(--width, 3in) / var(--minors, 7)), calc(var(--width, 3in) / var(--minors, 7)) calc(var(--width, 3in) / var(--minors, 7));
  background-position: calc(var(--width, 3in) * var(--left_pct, 0.5)) calc(var(--height, 3in) * var(--top_pct, 0.5));
  width: var(--width, 3in);
  height: var(--height, 3in);
}
div#body.workbookpage table.graph td::before,
div#body.workbookpage table.graph td::after {
  position: absolute;
  font-style: italic;
}
div#body.workbookpage table.graph td::after {
  content: var(--x_label, 'x\0000A0\0000A0');
  right: 1%;
  top: calc(var(--height, 3in) * var(--top_pct, 0.5));
}
div#body.workbookpage table.graph td::before {
  content: var(--y_label, '\0000A0\0000A0y');
  left: calc(var(--width, 3in) * (var(--left_pct, 0.5) - 0.08));
  top: 2%;
  transform: rotate(270deg);
}
div#body.workbookpage table.graph td p > .mathunicode:first-child {
  top: 6px;
  right: 3px;
  position: absolute;
  background: white;
  z-index: 10;
}
div#body.workbookpage table.graph .solution *:not(img) {
  display: contents;
}
div#body.workbookpage table.graph .solution,
div#body.workbookpage table.graph .solution img {
  position: absolute;
  width: 100%;
  height: 100%;
}
div#body.workbookpage p .editbox,
div#body.workbookpage pre .editbox {
  font-size: 9pt !important;
  margin: 0;
  line-height: 1rem;
}
div#body.workbookpage .solution,
div#body.workbookpage .solution code,
div#body.workbookpage .solution .MJX-TEX {
  font-style: italic !important;
}
div#body.workbookpage .blank {
  color: rgba(0, 0, 0, 0);
}
div#body.workbookpage .chosen::after {
  content: '✅';
}
div#body.workbookpage .teacherNote {
  display: none;
}
div#body.workbookpage.solution-page .teacherNote {
  display: unset;
}
div#body.workbookpage .autonum {
  display: inline-block;
  padding-top: 1.2rem;
}
div#body.workbookpage .autonum::after {
  content: ')';
}
div#body.workbookpage .autonum.star::after {
  content: unset !important;
}
div#body.workbookpage th .autonum,
div#body.workbookpage td .autonum {
  padding-top: 0;
}
div#body.workbookpage th .autonum::after,
div#body.workbookpage td .autonum::after {
  content: none;
}
div#body.workbookpage .blanklines {
  display: block;
  position: relative;
  background-image: linear-gradient(black 1px, transparent 1px);
  background-size: 100% 2.2rem;
  background-position-y: 1.7rem;
  margin-left: 5px;
  line-height: 2.2rem;
}
div#body.workbookpage .blanklines .solution {
  position: fixed;
}
div#body.workbookpage .sect1 > h2:first-child,
div#body.workbookpage .sect1 > h3:first-child,
div#body.workbookpage .sect2 > h3:first-child {
  background: #75328AAA;
  font-weight: 600;
  font-size: 12pt;
  color: white;
  padding: 1px 10px !important;
  margin-top: 2px;
}
div#body.workbookpage table.data-table td,
div#body.workbookpage table.data-table th {
  margin: 0;
  padding: 0 5px;
  width: 1px;
}
div#body.workbookpage 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;
}
div#body.workbookpage table.pyret-table tr:nth-child(even) {
  background-color: #f2f2f2;
}
div#body.workbookpage table.pyret-table thead {
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
}
div#body.workbookpage table.pyret-table td p {
  margin: 0px;
}
div#body.workbookpage table.pyret-table td,
div#body.workbookpage table.pyret-table th {
  border: none;
  border-right: 1px white solid;
  color: #1f1180;
  font-family: Hack, "Courier New", monospace;
}
div#body.workbookpage table.sideways-pyret-table p {
  margin: 0px;
}
div#body.workbookpage table.sideways-pyret-table tr {
  background: none;
  text-align: right;
}
div#body.workbookpage table.sideways-pyret-table td:first-child {
  display: table-cell;
  background: #eee !important;
  text-align: center;
  width: 50px;
}
div#body.workbookpage table.sideways-pyret-table td:first-child p {
  font-weight: bold;
}
.studentAnswerShort {
  min-width: 20pt;
}
.studentAnswerMedium {
  min-width: 100pt;
}
.studentAnswerLong {
  min-width: 140pt;
}
.circleevalsexp .studentBlockAnswerFilled {
  font-weight: bold;
  font-style: italic;
  display: inline-block;
}
.circleevalsexp .studentBlockAnswerFilled .value {
  border: dotted 1px black;
  border-radius: 50%;
  padding: 0 3px;
}
/* TODO(Emmanuel): do we even need all of these? Clean up */
div#body:not(.LessonPlan) {
  /* Empty p tags should take up no space */
}
div#body:not(.LessonPlan) p:empty {
  min-height: 0;
  margin: 0;
  padding: 0;
}
div#body:not(.LessonPlan) #header {
  margin-bottom: 5px !important;
}
div#body:not(.LessonPlan) #header > h1:first-child,
div#body:not(.LessonPlan) .sect1 > h1:first-child,
div#body:not(.LessonPlan) .sect1 > h2:first-child,
div#body:not(.LessonPlan) .sect1 > h3:first-child,
div#body:not(.LessonPlan) .sect2 > h3:first-child {
  width: 100%;
  padding: 5px 0px;
}
div#body:not(.LessonPlan) .description {
  display: none;
}
/* Don't use flex to space out content on notes pages */
div#body.LessonNotes #content {
  display: block !important;
}
div#body.LessonNotes li {
  margin-bottom: 10px;
}
div#body.LessonNotes .sect1.lesson-section-1 {
  margin-bottom: 1.25em;
}
/************************************************************************************
* CONTRACTS TABLE, DESIGN RECIPE, DATA CYCLE, AND STUDENT ANSWER STYLING
*/
div#body {
  /* Data Cycle tables should have borders */
  /* Back-of-the-book contracts table */
  /* We use tables (perhaps not the best idea) for our DR headings */
  /* common height for headless and non-headless DRs with no directions */
  /* Proglang-specific adaptations */
}
div#body .data-cycle {
  border-collapse: collapse;
  width: 100%;
  /* Ruby text in the Data Cycle needs to be slightly larger than normal */
  /* If there's a section break between data cycles, eat up all vertical space */
}
div#body .data-cycle td:first-of-type {
  background: lightgray;
  border: solid white;
  min-width: 1in;
}
div#body .data-cycle td {
  padding: 0.2rem 0.325rem;
}
div#body .data-cycle td p.tableblock {
  font-size: 1rem;
}
div#body .data-cycle .fitbruby {
  text-align: left !important;
}
div#body .data-cycle .fitbruby.stretch {
  margin-left: 0 !important;
}
div#body .data-cycle .fitbruby .ruby {
  font-size: 0.75rem !important;
  user-select: none;
}
div#body .data-cycle .fitbruby .ruby::after {
  bottom: 0 !important;
  color: black;
  text-align: left !important;
}
div#body .data-cycle .question_type {
  display: block;
  font-size: 10px;
}
div#body .data-cycle .question_type.chosen {
  font-style: italic;
  font-weight: bold;
  border: solid 1px black;
  border-radius: 50%;
}
div#body .data-cycle .question_type.chosen::after {
  display: none;
}
div#body .data-cycle .data-cycle-expression,
div#body .data-cycle .data-cycle-filter,
div#body .data-cycle .data-cycle-build {
  font-family: Hack, "Courier New", monospace;
}
div#body .data-cycle + div.paragraph:not(.data-cycle):has(+.data-cycle) {
  margin: auto 0;
}
div#body table.contracts-table {
  border-collapse: collapse;
  border: none;
}
div#body table.contracts-table p {
  margin-top: 0;
}
div#body table.contracts-table td {
  padding: 0.1em 0.625em !important;
  height: 23pt;
}
div#body table.contracts-table tr:nth-child(odd) {
  border-top: solid 2px black;
}
div#body table.contracts-table tbody tr:nth-child(odd) * {
  color: #cd7054 !important;
}
div#body table.contracts-table tbody tr:nth-child(odd) td:first-child .tableblock {
  margin-left: 1em;
}
div#body table.contracts-table tbody tr:nth-child(odd) td:first-child::before {
  position: absolute;
}
div#body table.contracts-table tbody tr:nth-child(even) * {
  font-family: monospace;
  white-space: pre;
}
div#body table.recipe_title {
  background: #75328AAA;
  border: #75328AAA;
}
div#body table.recipe_title td {
  padding: 0px;
  margin: 0px;
  border: none;
  vertical-align: middle;
}
div#body table.recipe_title td:last-child {
  border: 2px solid #75328AAA !important;
}
div#body table.recipe_title td:last-child .content {
  width: 16px;
  height: 16px;
  background: white;
}
div#body table.recipe_title p {
  color: white;
  font-weight: bold;
  margin: 0px;
  padding-left: 10px;
  min-height: unset !important;
}
div#body .recipe_word_problem p::before {
  font-weight: bold;
}
div#body .recipe_word_problem p {
  margin-bottom: 0.05in !important;
}
div#body .recipe_word_problem p:empty {
  min-height: 0.6in !important;
}
div#body .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 */
}
div#body .recipe .recipe_instructions * {
  font-style: italic;
  font-size: 0.85rem;
}
div#body .recipe p {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
}
div#body .recipe p .fitb,
div#body .recipe p .fitbruby {
  word-spacing: 2pt;
  padding-top: 1rem;
}
div#body .recipe p .fitb:after,
div#body .recipe p .fitbruby:after {
  word-spacing: 0;
}
div#body .recipe .ruby:after {
  bottom: 0 !important;
}
div#body .recipe .fitbruby {
  text-align: left !important;
  font-family: Hack, "Courier New", monospace;
}
div#body .recipe .recipe_example_inputs,
div#body .recipe .recipe_variables,
div#body .recipe .recipe_domain {
  text-align: center !important;
}
div#body .recipe .fitbruby.recipe_name {
  min-width: 20%;
}
div#body .recipe .fitbruby.recipe_range {
  min-width: 12%;
  text-align: center !important;
}
div#body .recipe .fitbruby.recipe_example_inputs {
  min-width: 20%;
  white-space: nowrap;
}
div#body .recipe .fitbruby.recipe_variables {
  min-width: 30%;
  white-space: nowrap;
}
div#body .recipe .fitbruby.recipe_cond {
  flex-grow: unset !important;
  min-width: 10%;
}
div#body .recipe .recipe_domain,
div#body .recipe .recipe_purpose,
div#body .recipe .fitbruby.questions,
div#body .recipe .fitbruby.answers {
  flex-grow: 1;
}
div#body .recipe .recipe_purpose,
div#body .recipe.recipe_contract .recipe_name {
  padding-left: 1em;
}
div#body .recipe .recipe_purpose::before,
div#body .recipe.recipe_contract .recipe_name::before {
  color: black;
  position: absolute;
  left: 0;
}
div#body .recipe.fitbruby.recipe_condition *::before,
div#body .recipe *::after {
  color: #75328A;
}
div#body .recipe + div.paragraph:not(.recipe) {
  margin: auto 0;
}
div#body.pyret {
  /* no whitespace in pyret */
  /* Indenting for function body and example bodies */
  /* Conditionals */
}
div#body.pyret .recipe_purpose::before,
div#body.pyret .recipe_contract .recipe_name::before {
  content: '#';
}
div#body.pyret .solution.recipe_name {
  text-align: right !important;
  min-width: 6em;
}
div#body.pyret .recipe_example_line:not(.keyword_only) > .content,
div#body.pyret .recipe_definition_body {
  margin-left: 2ex;
}
div#body.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") */
}
div#body.pyret .recipe_condition .answers {
  margin-left: 1em;
  text-align: left;
}
div#body.pyret .recipe_condition .questions {
  margin-left: 3em;
  text-align: left;
}
div#body.pyret .recipe_condition .questions::after {
  content: ":";
  position: absolute;
  left: 100%;
  top: 0px;
  width: 1em;
}
div#body.pyret .recipe_condition + .recipe:nth-last-child(3) .answers::before,
div#body.pyret .recipe_condition .questions::before {
  position: absolute;
  left: -2em;
  color: #75328A;
  font-weight: bold;
  font-family: 'Lato', Arial, Helvetica, sans-serif;
}
div#body.pyret .recipe_condition .questions::before {
  content: "if";
}
div#body.pyret .recipe_condition + .recipe_condition .questions {
  margin-left: 4em;
}
div#body.pyret .recipe_condition + .recipe_condition .questions::before {
  content: "else if";
  left: -3em;
}
div#body.pyret .recipe_condition + .recipe:nth-last-child(3) .fitbruby:first-child {
  margin-left: 3em;
}
div#body.pyret .recipe_condition + .recipe:nth-last-child(3) .fitbruby:first-child:before {
  content: "else:";
}
div#body.pyret .recipe_condition + .recipe_line:not(.recipe_condition) .solution {
  border-bottom: none;
  margin-left: 2em;
  font-style: normal;
  text-align: left;
}
div#body.pyret .wrapper p > *:nth-last-child(1) {
  flex-grow: 1;
}
div#body.pyret strong {
  margin: 0;
  padding: 0;
}
div#body.pyret .contracts-table tr:nth-child(odd) td:first-child::before {
  content: '#';
}
div#body.wescheme .recipe_purpose::before,
div#body.wescheme .recipe_contract .recipe_name::before {
  content: ';';
}
div#body.wescheme .recipe_example_body {
  margin-left: 1em;
}
div#body.wescheme .recipe_condition {
  position: relative;
  margin-left: 2em;
  width: 90%;
}
div#body.wescheme .recipe_condition .questions {
  margin-left: 1em;
  text-align: left;
}
div#body.wescheme .recipe_condition .answers {
  margin-left: 1em;
  margin-right: 1em;
  text-align: left;
}
div#body.wescheme .recipe_condition .questions::before {
  content: "[";
  position: absolute;
  left: -1ex;
  color: #75328A;
}
div#body.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;
}
div#body.wescheme .recipe_condition:last-child > ::after {
  content: ") )";
  white-space: nowrap;
  position: absolute;
  left: 100%;
  bottom: 0;
  line-height: 18px;
  margin-bottom: 0.9rem;
}
div#body.wescheme .wrapper p > *:nth-last-child(2) {
  flex-grow: 1;
}
div#body.wescheme strong {
  margin: 0;
  padding: 0;
}
div#body.wescheme .contracts-table tr:nth-child(odd) td:first-child::before {
  content: ';';
}
div#body.codap .data-cycle-expression {
  font-family: inherit;
}
div#body.codap .cm-keyword {
  font-weight: normal !important;
}
div#body.codap .transformer_type td:last-child .content {
  width: 0;
  height: 0px;
  background: none;
}
div#body.codap .recipe_title .paragraph,
div#body.codap .codap .recipe_title p {
  display: inline;
}
div#body.codap .recipe_name {
  display: flex !important;
}
div#body.codap .transformer_type p::before {
  width: 1.1rem;
  height: 1.1rem;
  background: white;
  display: inline-block;
  margin: 0 2px 2px 0;
  vertical-align: middle;
}
div#body.codap div.transformer_type {
  margin-left: 2em;
}
div#body.codap div.transformer_type p::before {
  content: "";
}
div#body.codap table.transformer_type td:first-of-type .content {
  display: flex;
  flex: row;
}
div#body.codap table.transformer_type td:first-of-type .paragraph {
  white-space: nowrap;
}
div#body.codap div.transformer_type.chosen p::after {
  position: relative;
  top: -19px;
  left: 9px;
}
div#body.codap .recipe_formula,
div#body.codap .codap_transformer {
  display: flex !important;
}
div#body.codap .codap_transformer p {
  width: 100%;
}
div#body.codap .codap_example_tables + table table * {
  margin: 0;
  padding: 0;
}
div#body.codap .codap_example_tables + table table * {
  text-align: center;
  height: 2rem;
}
div#body.codap .recipe_domain,
div#body.codap .recipe_range {
  width: 40%;
}
/************************************************************************************
* TEACHER RESOURCES PAGE
*/
div#body .pathway_external_links ul li {
  margin-top: 3ex 0ex;
  list-style-type: none;
}
div#body td.tableblock .listingblock {
  margin-bottom: 0 !important;
}
div#body #lesson-info-table table {
  border: none;
}
div#body #lesson-info-table table td:nth-of-type(1) {
  line-height: 1.3;
}
div#body #lesson-info-table table th:nth-of-type(2),
div#body #lesson-info-table table td:nth-of-type(2) {
  width: 20%;
  text-align: center;
}
div#body #lesson-info-table table th:nth-of-type(3),
div#body #lesson-info-table table td:nth-of-type(3) {
  text-align: right;
}
div#body #lesson-info-table table td {
  padding: 0.1em 0.5em;
  height: 55px;
  vertical-align: top;
}
div#body .materials-links li:hover {
  background-color: #0001;
}
div#body .materials-links .pageNum {
  float: right;
}
div#body #exercises_and_solutions .materials-links p {
  margin: 2px 0;
}
/************************************************************************************
* FORMATTING OF CIRCLES, AND TEXT CODE
*/
.codesexp,
.circleevalsexp,
.editbox,
.cm-s-scheme,
.CodeMirror {
  font-family: Hack, "Courier New", monospace;
}
td.halign-center .circleevalsexp {
  text-align: center;
}
.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 */
}
.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;
}
.circleevalsexp .value {
  display: inline-block;
  margin: 0.5rem 0.4rem;
  vertical-align: top;
}
.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 */
}
.circleevalsexp .operator .value {
  margin: 0 0.5rem;
}
.circleevalsexp .hspace {
  display: none;
}
.circleevalsexp .hspace ~ .hspace {
  display: inline-block;
  width: 0.5ex;
}
.circleevalsexp .lParen,
.circleevalsexp .rParen {
  display: none;
}
.circleevalsexp .fitb {
  border: none;
  padding: 0;
}
.codesexp,
.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: forestgreen;
}
.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;
}
.cm-scheme-punctuation {
  color: black;
}
.cm-scheme-rparen {
  color: black;
}
/* PYRET COLORS */
.cm-s-default.CodeMirror {
  color: black;
}
.cm-comment,
.hljs-comment {
  color: #cd7054;
}
.cm-boolean {
  color: darkred;
}
.cm-builtin,
.hljs-built_in {
  color: #555;
}
.cm-variable,
.hljs-name {
  color: #4d5966;
}
.cm-keyword {
  color: black;
  font-weight: bold;
}
.cm-number,
.hljs-number {
  color: navy;
}
.cm-roughnum {
  color: blue;
}
.cm-bad-number {
  color: red;
  font-weight: bold;
}
.cm-string,
.hljs-string {
  color: forestgreen;
}
.cm-type {
  color: #374049;
}
.cm-function-name {
  color: #374049;
}
.cm-unterminated-string {
  color: red;
  font-weight: bold;
}
.pyretkeyword,
.hljs-keyword {
  font-weight: bold;
  margin-right: 1ex;
}
* + .pyretkeyword {
  margin-left: 1ex;
}
.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;
  }
  .web-page-only {
    font-weight: bold;
    font-style: italic;
    line-height: 2.5rem;
  }
  #savetodrive-div {
    display: none;
    height: 30px !important;
  }
  /* on WB pages zoom the page 1.25x for a big screen */
  div#body.workbookpage,
  div#body.LessonPlan #content {
    transform-origin: left top;
    transform: scale(calc(12 / 9));
  }
  div#body.workbookpage #savetodrive-div,
  div#body.LessonPlan #content #savetodrive-div {
    transform: scale(0.8);
  }
  div#body.workbookpage {
    margin-left: 3em;
  }
  /********************************************************************
   *  Collapsing Headers
   */
  div#body.LessonPlan,
  div#body.TeacherResources {
    /* add a bottom padding to prevent browser-scroll */
    padding-bottom: 5in;
    /* adjust colors */
    /* set collapsed size and transition rules */
    /* don't add the fade for summaries or active sections */
  }
  div#body.LessonPlan h2,
  div#body.TeacherResources h2 {
    background-color: #75328AAA;
    color: white;
    font-weight: 600;
    font-size: 1.75em;
    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 */
  }
  div#body.LessonPlan h2::after,
  div#body.TeacherResources h2::after {
    content: '▼';
    width: 16px;
    font-size: 16px;
    line-height: 30px;
    color: white;
    font-weight: bold;
    float: left;
    margin-right: 5px;
  }
  div#body.LessonPlan h2.active::after,
  div#body.TeacherResources h2.active::after {
    content: '▲';
  }
  div#body.LessonPlan h2.active,
  div#body.TeacherResources h2.active,
  div#body.LessonPlan h2:hover,
  div#body.TeacherResources h2:hover {
    background-color: #b7d893;
  }
  div#body.LessonPlan .sect1:not(.acknowledgmentsect) .sectionbody,
  div#body.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 */
  }
  div#body.LessonPlan .sect1:not(.acknowledgmentsect) .sectionbody::after,
  div#body.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;
  }
  div#body.LessonPlan .sect1:not(.acknowledgmentsect) h2 + .sectionbody:after,
  div#body.TeacherResources .sect1:not(.acknowledgmentsect) h2 + .sectionbody:after {
    height: 4em;
  }
  div#body.LessonPlan .lessonSummary .sectionbody,
  div#body.TeacherResources .lessonSummary .sectionbody {
    max-height: unset;
  }
  div#body.LessonPlan .lessonSummary .sectionbody::after,
  div#body.TeacherResources .lessonSummary .sectionbody::after,
  div#body.LessonPlan h2.active + .sectionbody::after,
  div#body.TeacherResources h2.active + .sectionbody::after {
    display: none;
  }
  div#body.LessonPlan .sect1:not(.acknowledgmentsect) h2:not(.active) + .sectionbody h3,
  div#body.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 {
  color: black;
  /* Elements we don't want printed */
  .noprint {
    display: none;
  }
  ::-webkit-scrollbar {
    display: none;
  }
  a[href]::after {
    content: none !important;
  }
  #savetodrive-div,
  .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;
  }
  .listingblock pre:not(.highlight) {
    background: none !important;
  }
  /* Don't print box-shadows */
  * {
    -webkit-box-shadow: none!important;
    box-shadow: none!important;
    text-shadow: none !important;
  }
  div#body.LessonPlan {
    width: 7.5in;
  }
  div#body.LessonPlan .preamble tr td:last-child > * {
    background: white !important;
  }
  div#body.LessonPlan .lessonSummary {
    break-after: page !important;
    page-break-after: always !important;
  }
  div#body.LessonPlan .lesson-section-1 {
    break-before: page !important;
    page-break-before: always !important;
  }
  div#body.LessonPlan .lesson-section-2 p,
  div#body.LessonPlan .strategy-box,
  div#body.LessonPlan .circleevalsexp,
  div#body.LessonPlan .image,
  div#body.LessonPlan img,
  div#body.LessonPlan .MathJax,
  div#body.LessonPlan #_additional_exercises + .sectionbody {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }
  div#body.LessonPlan .left-header tr td:nth-child(1) {
    background-color: lightgray;
  }
  div#body.LessonPlan .sect1 + .sect1 {
    border-top: solid 3px black;
  }
  div#body.LessonPlan .preamble tr td > * {
    max-height: 1000px;
  }
  div#body.workbookpage {
    /* Use B&W colors for headers */
    /* Even when invisible, flex-grow will take up space */
  }
  div#body.workbookpage #header > h1:first-child,
  div#body.workbookpage .sect1 > h1:first-child {
    color: black;
  }
  div#body.workbookpage .sect1 > h2:first-child,
  div#body.workbookpage .sect1 > h3:first-child,
  div#body.workbookpage .sect2 > h3:first-child {
    color: white;
  }
  div#body.workbookpage .recipe_title,
  div#body.workbookpage h2 {
    background: lightgray !important;
  }
  div#body.workbookpage .recipe_title td:last-child,
  div#body.workbookpage h2 td:last-child {
    border: 2px solid lightgray !important;
  }
  div#body.workbookpage h2,
  div#body.workbookpage table.recipe_title p {
    color: black !important;
  }
  div#body.workbookpage .acknowledgmentsect:last-child {
    flex-grow: 0 !important;
  }
  div#body.workbookpage .recipe_condition *::before,
  div#body.workbookpage *::after {
    color: black !important;
  }
  div#body {
    margin: 0;
    /* Page Breaks for printed lesson plans, projects, and TR pages */
    /* Get rid of collapsing headers */
    /* Override AsciiDoc print default */
  }
  div#body h3,
  div#body h2 {
    break-after: avoid !important;
    page-break-after: avoid !important;
  }
  div#body h3 + .paragraph,
  div#body h2 + .paragraph {
    break-before: avoid !important;
    page-break-before: avoid !important;
  }
  div#body table {
    break-inside: auto;
  }
  div#body tr td {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    page-break-after: auto;
  }
  div#body thead {
    display: table-header-group;
  }
  div#body tfoot {
    display: table-footer-group;
  }
  div#body .sect1.lesson-section-1,
  div#body .sect1.lesson-section-1 .sectionbody {
    max-height: unset !important;
  }
  div#body p {
    margin: 0px;
    font-size: 1rem;
    font-weight: normal;
  }
}
/* Additional base rules */
html {
  font-size: 9pt;
}
body {
  width: 100%;
}
/************************************************************************************
* SIDEBAR STYLES
*
*/
@keyframes slideInFromLeft {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}
.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;
}
.sidebar.closed {
  left: -225px;
  width: 265px;
  height: 30px;
}
.sidebar .paragraph {
  width: 205px;
}
.sidebar #toggle {
  top: 0;
  right: 0;
  position: absolute;
  width: 40px;
  height: 30px;
  text-align: center;
  border: 0;
  margin: 0 !important;
  background: #75328AAA;
}
.sidebar #toggle:after {
  content: '≫';
  font-size: 20px;
}
.sidebar:not(.closed) #toggle:after {
  content: '«';
}
.sidebar:hover * {
  opacity: 1;
}
.sidebar > * {
  margin: 0px 10px !important;
}
.sidebar > *,
.sidebar .sidebar > * > * {
  opacity: 0.4;
  transition: opacity 0.5s;
}
.sidebar label {
  display: inline;
  font-size: 0.8rem;
}
.sidebar select {
  border: none;
  width: 100%;
}
.sidebar strong {
  color: black;
  margin: 0;
}
.sidebar li {
  list-style-type: none;
  margin-bottom: 5px !important;
}
.sidebar table {
  background: none !important;
  border: 0 !important;
  width: auto;
}
.sidebar table td,
.sidebar table tr {
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
}
.sidebar table .title {
  display: none;
}
.sidebar dl * {
  font-size: 9pt !important;
  margin: 0;
  display: inline;
}
.sidebar dl {
  line-height: 1.4rem !important;
}
.sidebar dd {
  margin-left: 0 !important;
}
.sidebar dd::after {
  content: '\A';
  white-space: pre;
}
.sidebar dt::after {
  content: ' ·';
  white-space: pre;
  font-size: 0.7rem;
}
.sidebar table dt {
  margin-top: 10px;
}
.sidebar .sidebarlessons {
  margin-top: 30px !important;
}
.sidebar .sidebarlessons input[type="checkbox"] {
  margin-right: 5px;
}
.sidebar .sidebarlessons ul {
  background: white;
  margin: 0px !important;
  box-shadow: inset -1px 0px 2px gray;
  max-height: 250px;
  overflow: scroll;
  padding: 10px !important;
  font-size: 10pt !important;
}
.sidebar .sidebarlessons li:nth-child(odd) {
  background: #b7d893;
}
.sidebar .sidebarpractices ul {
  font-size: 0.75rem !important;
  margin: 0;
}
div#body.LessonPlan #content {
  font-size: 9pt;
}
/* And now our english-specific rules */
.handout::before {
  content: "Handout: ";
}
.optionaltag::before {
  content: "Optional: ";
}
.optpara::before {
  content: "Optional";
}
/*****************************************************
 * Proglang-Specific Strings
 */
.pyret .other-proglang::before {
  content: "This lesson plan has students programming in Pyret. ";
}
.wescheme .other-proglang::before {
  content: "This lesson plan has students programming in WeScheme. ";
}
.codap .other-proglang::before {
  content: "This lesson plan has students use CODAP. ";
}
/*****************************************************
 * DESIGN RECIPE
 */
div#body.workbookpage .recipe_word_problem p::before {
  content: 'Directions: ';
}
div#body.workbookpage .recipe_name .ruby::after {
  content: "function name";
}
div#body.workbookpage.codap .recipe_name .ruby::after {
  content: "Transformer name";
}
div#body.workbookpage .recipe_purpose .ruby::after {
  content: "what does the function do?";
}
div#body.workbookpage.codap .recipe_purpose .ruby::after {
  content: "Purpose: what does the formula do for each row?";
}
div#body.workbookpage .recipe_domain .ruby::after {
  content: "Domain";
}
div#body.workbookpage .recipe_range .ruby::after {
  content: "Range";
}
div#body.workbookpage .recipe_variables .ruby::after {
  content: "variable(s)";
}
div#body.workbookpage .recipe_example_inputs .ruby::after {
  content: "input(s)";
}
div#body.workbookpage .recipe_example_body .ruby::after {
  content: "what the function produces";
}
div#body.workbookpage .recipe_definition_body .ruby::after {
  content: "what the function does with those variable(s)";
}
div#body.workbookpage.codap .codap_example_tables + table {
  border-width: 0;
}
div#body.workbookpage.codap .codap_example_tables + table > tbody > tr > td {
  padding-top: 0;
}
div#body.workbookpage.codap .recipe_formula .ruby::after {
  content: 'i.e. Weight < 20 or Species = "rabbit". Pay careful attention to capitalization and quotation marks.';
}
div#body.workbookpage.codap .ExampleTableTitle {
  text-align: center;
  font-size: 0.7rem;
}
div#body.workbookpage.codap .ExampleTableTitle p {
  font-weight: bold;
  min-height: unset;
}
/*****************************************************
 * DATA CYCLE
 */
div#body.workbookpage .data-cycle-question .ruby::after {
  content: "What question do you have?";
}
div#body.workbookpage .data-cycle-type-of-question::after {
  content: "What type of question is this? (circle one) ";
}
div#body.workbookpage .data-cycle-lookup::after {
  content: " Lookup ";
}
div#body.workbookpage .data-cycle-arithmetic::after {
  content: " Arithmetic ";
}
div#body.workbookpage .data-cycle-statistical::after {
  content: " Statistical ";
}
div#body.workbookpage .data-cycle-rows .ruby::after {
  content: "Which Rows should we investigate? (All the rows, just the cats, fixed dogs, etc.)";
}
div#body.workbookpage .data-cycle-cols .ruby::after {
  content: "What Column(s) do we need? (age, weight-in-kilograms, weeks, etc.)";
}
div#body.workbookpage .data-cycle-filter .ruby::after {
  content: "If you only need some rows, define your filter function here (Need help? Use the Design Recipe!)";
}
div#body.workbookpage.codap .data-cycle-filter .ruby::after {
  content: "If you only need some rows, write an expression for your Filter Transformer here.";
}
div#body.workbookpage .data-cycle-build .ruby::after {
  content: "If you need to make a new column, define your builder function here (Need help? Use the Design Recipe!)";
}
div#body.workbookpage.codap .data-cycle-build .ruby::after {
  content: "If you need to Transform or Build an attribute, write the expression for your Transformer here.";
}
div#body.workbookpage .data-cycle-expression .ruby::after {
  content: "What code will make the table or display you want?";
}
div#body.workbookpage.codap .data-cycle-expression .ruby::after {
  content: "What display, measure, or table do you want to create (i.e., median, bar chart, scatterplot, etc.)?";
}
div#body.workbookpage .data-cycle-finding .ruby::after {
  content: "What did you find out? What can you infer?";
}
div#body.workbookpage .data-cycle-new-question .ruby::after {
  content: "What - if any - new question(s) does this raise?";
}