What is an object? Almost everything in Sage and Python for that matter is an object! More specifically an object is an instance of a class.
+
A class provides a template or blueprint for creating objects and defines the attributes (properties) and methods (behaviors) that those objects can have.
+
This might not mean too much right now and it will be more clear as we explore what is known as object-oriented programming. Just know that SageMath has different ways of representing and working with data. We can create an object by typing something into our Sage Worksheet or the cells on this page.
+
+Dot notation is a feature in object-oriented programming. Here is an example of dot notation. There are many more examples of this in Sage. Dot notation is used to access attributes and methods of an object. We can also pass in arguments to this method to specify the number of digits we want to round to.
+
+
Sage supports different ways of accomplishing the same task.
+
+
+
+
+
+
diff --git a/_static/pretext/css/banner_crc.css b/_static/pretext/css/banner_crc.css
new file mode 100644
index 00000000..c3db4604
--- /dev/null
+++ b/_static/pretext/css/banner_crc.css
@@ -0,0 +1,336 @@
+/*** Some PreTeXt overrides ***/
+/*
+@media (min-width: 801px) {
+ .title-container .title {
+ font-size: unset;
+ font-weight: unset;
+ }
+}
+*/
+.ptx-masthead .title-container > .heading {
+ line-height: unset;
+}
+/*
+.ptx-masthead .title-container > .heading {
+ font-family: unset;
+ font-weight: unset;
+ font-size: unset;
+ line-height: unset;
+ color: unset;
+}
+*/
+.ptx-masthead .byline {
+ margin: unset;
+ font-size: unset;
+ line-height: unset;
+ font-family: unset;
+}
+
+.ptx-masthead .ptx-banner {
+ border-top: 1px solid transparent;
+ border-bottom: none;
+ overflow: hidden;
+ padding-top: 0.625em;
+ padding-bottom: 1.125em;
+}
+
+.ptx-content .summary-links a {
+ display: block;
+ padding: .6em;
+ text-decoration: none;
+ font-family: "Open Sans", sans-serif;
+ font-size: 1em;
+ font-weight: 600;
+ border-radius: 5px;
+}
+
+.ptx-content .summary-links a .codenumber {
+ color: var(--bluegreen)
+}
+
+.ptx-content .summary-links a .title {
+ font-weight: 600;
+}
+
+.ptx-content .summary-links a:hover {
+ color: #fff;
+ background: var(--bluegreen);
+}
+
+.ptx-content .summary-links ul,
+.ptx-content .summary-links ul li {
+ display: grid;
+ list-style-type: none;
+ min-width: 300px;
+ padding-inline-start: 0px;
+ font-family: "Open Sans", sans-serif;
+ justify-items: stretch;
+ margin: 2px auto 3px auto;
+}
+
+
+.ptx-content .summary-links > ul {
+ // text-align: left;
+}
+
+@media screen and (min-width: 600px) {
+ .ptx-content .summary-links ul,
+ .ptx-content .summary-links ul li {
+ width: 60vw;
+ max-width: 500px;
+ }
+}
+
+@media screen and (min-width: 700px) {
+ .ptx-content .summary-links ul,
+ .ptx-content .summary-links ul li {
+ width: 55vw;
+ max-width: 500px;
+ }
+}
+
+@media screen and (min-width: 800px) {
+ .ptx-content .summary-links ul,
+ .ptx-content .summary-links ul li {
+ width: 49vw;
+ max-width: 500px;
+ }
+}
+/*** End PreTeXt overrides ***/
+
+
+
+.ptx-masthead .title-container {
+ font-size: 1em;
+ padding-left: 9.68px;
+ overflow: hidden;
+}
+
+@media screen and (max-width: 480px) {
+ .ptx-masthead .title-container {
+ padding: 0;
+ text-align: center;
+ }
+}
+
+.ptx-masthead .title-container > .heading {
+ margin: 0;
+ font-size: 2em;
+}
+
+.ptx-masthead .title-container > .heading.hide-type .type {
+ display: none;
+}
+.ptx-masthead .title-container > .heading.hide-codenumber .codenumber {
+ display: none;
+}
+.ptx-masthead .title-container > .heading.hide-title .title {
+ display: none;
+}
+
+/*
+@media screen and (max-width: 480px) {
+ .ptx-masthead .title-container > .heading {
+ font-size: 1.5em;
+ line-height: 1.25em;
+ margin: 0;
+ margin-bottom: 0.41667em;
+ }
+}
+
+
+.ptx-masthead .title-container > .heading a {
+ color: #932919;
+ background: none;
+ text-decoration: none;
+}
+
+
+
+.ptx-masthead .title-container > .heading a:active {
+ color: #3572a0;
+}
+*/
+
+.ptx-masthead .title-container > .heading .subtitle {
+ font-weight: normal;
+}
+
+
+@media screen and (max-width: 800px) {
+ .ptx-masthead .title-container > .heading .subtitle {
+ /* Force the subtitle onto a separate line */
+ display: block;
+ /* De-emphasize relative to main title */
+ color: #595959;
+ /* Remove colon */
+ }
+ .ptx-masthead .title-container > .heading .subtitle:before {
+ content: normal;
+ }
+}
+
+
+.ptx-masthead .byline {
+ color: #333333;
+ font-size: 1.2em;
+ font-weight: normal;
+ margin: 0;
+ min-height: inherit;
+}
+
+
+
+@media screen and (max-width: 480px) {
+ .ptx-masthead .byline {
+ margin-top: 0;
+ font-size: 1em;
+ line-height: 1.25em;
+ }
+}
+
+
+
+
+.ptx-masthead .byline a {
+ color: #333333;
+}
+.ptx-masthead .byline a:active {
+ color: #3572a0;
+}
+
+
+.ptx-masthead .ptx-banner .title-container .heading {
+ font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+
+/* .ptx-masthead-banner */
+.ptx-masthead .ptx-banner { /* maybe .ptx-masthead > .ptx-banner? */
+ max-width: 904px;
+ display: grid;
+ grid-gap: 1em;
+ grid-template-columns: 50px 1fr;
+ grid-template-areas:
+ "ptx-logobox ptx-title-byline-box";
+ background-color: #fff; /* #fafafa; */
+ padding: 0px 20px 0px 20px;
+/*
+ justify-self: stretch;
+*/
+
+}
+
+.title-container .title {
+ color: var(--bodytitle);
+}
+
+.title-container .subtitle {
+ color: var(--bodysubtitle);
+}
+
+/* Adjust font sizes by screen sizes */
+/* Phones */
+.title-container {
+ margin-top: 0px;
+}
+
+.title-container .title {
+ font-size: .6em;
+ font-weight: 600;
+}
+
+.title-container .subtitle {
+ font-weight: normal;
+ font-size: .5em;
+}
+
+
+
+/* Larger than mobile */
+@media (min-width: 400px) {
+
+ .title-container {
+ margin-top: 0px;
+ }
+
+ .title-container .title {
+ font-size: .7em;
+ font-weight: 600;
+ }
+
+ .title-container .subtitle {
+ font-weight: normal;
+ font-size: .6em;
+ }
+
+
+}
+
+/* Larger than phablet (also point when grid becomes active) */
+@media (min-width: 550px) {
+
+ .title-container {
+ margin-top: 3px;
+ }
+
+ .title-container .title {
+ font-size: .9em;
+ font-weight: 600;
+ }
+
+ .title-container .subtitle {
+ font-weight: normal;
+ font-size: .7em;
+ }
+
+
+}
+
+/* Large screens */
+@media (min-width: 801px) {
+
+ .title-container {
+ margin-top: 5px;
+ }
+
+ .title-container .title {
+ font-size: 1.0em;
+ font-weight: 600;
+ }
+
+ .title-container .subtitle {
+ font-weight: normal;
+ font-size: .8em;
+ }
+
+
+}
+
+
+
+/* .ptx-logobox */
+.logo-link {
+ grid-area: ptx-logobox;
+ color: #000;
+ padding: 15px 0px 0px 0px;
+ justify-self: stretch;
+}
+
+/* Fix the width of logo to always be 50px */
+/* .ptx-logobox img */
+.ptx-masthead .logo-link img {
+ width: 50px;
+}
+
+/* .ptx-title-byline-box */
+.title-container {
+ grid-area: ptx-title-byline-box;
+ color: #000;
+ padding: 0px 0px 0px 0px;
+ justify-self: stretch;
+}
+
+/* ptx-searchbox */
+.searchbox {
+ grid-area: ptx-searchbox;
+}
diff --git a/_static/pretext/css/banner_default.css b/_static/pretext/css/banner_default.css
new file mode 100644
index 00000000..59336757
--- /dev/null
+++ b/_static/pretext/css/banner_default.css
@@ -0,0 +1,141 @@
+/*******************************************************************************
+ * PreTeXt Masthead Stylesheet
+ *******************************************************************************/
+
+.ptx-masthead .ptx-banner {
+ border-bottom: 1px solid #d4d4d4;
+ border-top: 1px solid transparent;
+ overflow: hidden;
+ padding-top: 0.625em;
+ padding-bottom: 1.125em;
+ border-bottom: none;
+}
+
+.ptx-masthead {
+ max-width: 904px;
+ border-right: 1px solid #bababa;
+}
+
+.ptx-masthead .title-container {
+ font-size: 1em;
+ padding-left: 9.68px;
+ overflow: hidden;
+}
+@media screen and (max-width: 480px) {
+ .ptx-masthead .title-container {
+ padding: 0;
+ text-align: center;
+ margin-top: 0.625em;
+ }
+}
+.ptx-masthead .title-container > .heading {
+ font-family: "PT Serif", "Times New Roman", Times, serif;
+ font-weight: 700;
+ margin: 0;
+ font-size: 2em;
+ line-height: 1.25em;
+ color: #932919;
+}
+@media screen and (max-width: 480px) {
+ .ptx-masthead .title-container > .heading {
+ font-size: 1.5em;
+ line-height: 1.25em;
+ margin: 0;
+ margin-bottom: 0.41667em;
+ }
+}
+.ptx-masthead .title-container > .heading a {
+ color: #932919;
+ background: none;
+ text-decoration: none;
+}
+.ptx-masthead .title-container > .heading .subtitle {
+ font-weight: normal;
+}
+@media screen and (max-width: 800px) {
+ .ptx-masthead .title-container > .heading .subtitle {
+ /* Force the subtitle onto a separate line */
+ display: block;
+ font-size: 1.16667em;
+ line-height: 1.42857em;
+ /* De-emphasize relative to main title */
+ color: #595959;
+ /* Remove colon */
+ }
+ .ptx-masthead .title-container > .heading .subtitle:before {
+ content: normal;
+ }
+}
+.ptx-masthead .logo-link {
+ position: relative;
+ float: left;
+ font-size: 50px;
+ margin-top: 0.1em;
+ margin-left: 9.68px;
+ text-align: center;
+ line-height: 1;
+}
+.ptx-masthead .logo-link img {
+ width: auto;
+ height: auto;
+ /* Allow font-size to control height
+ * so that icon placeholder height matches */
+ max-height: 1em;
+}
+.ptx-masthead .logo-link:empty:before {
+ font-family: "Open Sans";
+ font-size: 1em;
+ content: "\2211";
+ /* Center the icon in a square the size of the parent's font-size */
+ line-height: 1;
+ width: 1em;
+ display: inline-block;
+ vertical-align: top;
+ text-align: center;
+ color: #ccc;
+}
+.ptx-masthead .logo-link:empty:hover:before {
+ color: #932919;
+}
+.ptx-masthead .logo-link:empty:active:before {
+ color: #3572a0;
+}
+.ptx-masthead .logo-link {
+ background: transparent;
+ border: none;
+ text-decoration: none;
+}
+@media screen and (max-width: 480px) {
+ .ptx-masthead .logo-link {
+ display: block;
+ float: none;
+ margin: 0;
+ font-size: 50px;
+ }
+}
+.ptx-masthead .byline {
+ color: #333333;
+ font-weight: normal;
+ margin: 0;
+ font-size: 1.3125em;
+ line-height: 1.42857em;
+ min-height: inherit;
+ font-family: "PT Serif", "Times New Roman", Times, serif;
+}
+@media screen and (max-width: 480px) {
+ .ptx-masthead .byline {
+ margin-top: 0;
+ font-size: 1em;
+ line-height: 1.25em;
+ }
+}
+.ptx-masthead .byline a {
+ color: #333333;
+}
+.ptx-masthead .byline a:hover, .ptx-masthead .byline a:focus {
+ color: #932919;
+}
+.ptx-masthead .byline a:active {
+ color: #3572a0;
+}
+
diff --git a/_static/pretext/css/banner_wide.css b/_static/pretext/css/banner_wide.css
new file mode 100644
index 00000000..45ce9edb
--- /dev/null
+++ b/_static/pretext/css/banner_wide.css
@@ -0,0 +1,20 @@
+@import url("banner_default.css");
+
+:root {
+ --banner-background-color: #ffffff;
+}
+
+.pretext .ptx-masthead {
+ max-width: var(--page-width);
+ background-color: var(--banner-background-color);
+ margin: 0 auto;
+}
+
+.pretext .ptx-masthead .ptx-banner {
+ margin: 0 auto;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ max-width: var(--page-width);
+ padding: 8px 0;
+}
\ No newline at end of file
diff --git a/_static/pretext/css/catalog.css b/_static/pretext/css/catalog.css
new file mode 100644
index 00000000..a6180592
--- /dev/null
+++ b/_static/pretext/css/catalog.css
@@ -0,0 +1,94 @@
+
+.projects a {
+ text-decoration: none;
+}
+.projects p {
+ margin: 0;
+}
+.projects p + p {
+ margin-top: 0.75em;
+}
+
+.projects .category {
+ max-width: 700px;
+}
+.projects .fact-sheet-knowl {
+ display: none;
+}
+.projects .description-knowl {
+ display: none;
+}
+.projects .awards-knowl {
+ display: none;
+}
+.projects .book-summary {
+ margin-left: 2em;
+ padding-left: 0.5em;
+}
+.projects .book-summary + .book-summary {
+ padding-top: 0.5em;
+ padding-bottom: 0.5em;
+ margin-top: 1em;
+}
+
+.projects .book-summary:nth-of-type(even) {
+ background: #efe;
+}
+.projects .badges {
+ margin-top: 0.25em;
+ padding-left: 0.5em;
+ min-height: 30px;
+}
+.projects .badges img {
+ max-height: 25px;
+}
+.projects .badges img + img {
+ margin-left: 5px;
+}
+.projects .badge.award + .badge:not(.award) {
+ margin-left: 2em;
+}
+.projects .badge.license {
+ margin-right: 0.5em;
+ float: right;
+}
+
+.projects .biblio > .title {
+ font-style: italic;
+ font-size: 120%;
+}
+.projects .biblio > .authors {
+ margin-left: 0.25em;
+}
+
+.projects .category > .title {
+ display: block;
+ margin-top: 1em;
+ margin-bottom: 0.4em;
+ margin-left: 1em;
+ background: #ccf;
+ font-size: 150%;
+ padding: 0.5em 0 0.25em 0.2em;
+}
+
+.projects .blurb {
+ margin-top: 0.2em;
+ padding-left: 0.5em;
+}
+.projects .category .blurb .id-ref { /* why that name? */
+ font-style: italic;
+ font-size: 90%;
+ margin-left: 0.5em;
+}
+.projects .category .description {
+ padding: 0.5em 2em 0.5em 2em;
+}
+[data-knowl]:hover, [data-knowl]:active, [data-knowl].active {
+ color: #8a1200;
+ background: #ffedeb;
+/*
+ margin-bottom: 0;
+*/
+ border-bottom: none;
+}
+
diff --git a/_static/pretext/css/colors_blue_green.css b/_static/pretext/css/colors_blue_green.css
new file mode 100644
index 00000000..210e7738
--- /dev/null
+++ b/_static/pretext/css/colors_blue_green.css
@@ -0,0 +1,118 @@
+
+/*
+ There are five main choices that define a color scheme in the
+ HTML output of PreTeXt:
+ 1) A dark color for the title on each page
+ 2) A dark color for highlighted words in the body
+ 3) A dark color for other highlighted words in the body
+
+ In the CSS those are called 'documenttitle', 'bodytitle',
+ and 'bodysubtitle'.
+
+ The other two choices appear in the ToC.
+
+ Either:
+ 3) A dark color for each chapter background
+ 4) A dark color for the current section background
+ (Often the ToC section background equals documenttitle.
+
+ Or:
+ 3') A light color for each chapter background
+ 4') A light color for the current section background
+
+ In the CSS those are called 'chaptertoc' and 'sectiontoc',
+ respectively.
+
+ With 3) and 4) you need white letters to go on the dark
+ background, and with 3') and 4') you need dark letters
+ on the light background. Set the color of those letters
+ with 'chaptertoctext'.
+
+ In addition to the above four choices, you need to
+ choose a contrasting shade of each color, to be used
+ for highlighting, borders, etc.
+
+ In the future you will be able to choose colors for assemblages
+ and for knowl output
+*/
+
+:root {
+ --documenttitle: #2a5ea4;
+ --bodytitle: #2b5f82;
+ --bodysubtitle: #a62e1c;
+ --bodytitlehighlight: #e0e9ff; /* light, and contrasting to bodytitle */
+ --bodysubtitlehighlight: #fce5e4; /* light, and contrasting to bodysubtitle */
+ /*
+ The bodytitle and bodysubtitle colors must have at least a 3:1 contrast
+ ratio with black, and at least 5:1 ratio with with the corresponding highlight.
+ (The second condition will guarantee an adequate contrast with white.)
+ */
+
+ --chaptertoc: #28803f;
+ --chaptertoctext: white;
+ --chaptertocactive: var(--documenttitle); /* often the same as documenttitle */
+ --chaptertoctextactive: white;
+ --sectiontoc: white; /* can also write it as #ffffff */
+ --sectiontoctext: #20477b;
+ --sectiontocactive: var(--documenttitle); /* often the same as documenttitle */
+ --sectiontoctextactive: white;
+ --tocborder: #152f53;
+
+ --highlighttoc: #20477b; /* often a dark version of documenttitle */
+ --highlighttoctext: white;
+ --highlighttocborder: var(--chaptertoc);
+
+ --videoplay: var(--bodytitle);
+ --assemblageborder: #1100aa;
+ --assemblagebackground: #f5f8ff;
+
+ --knowlborder: var(--bodytitlehighlight);
+ --knowlbackground: var(--assemblagebackground);
+
+ /* Colors for block envirornments: */
+ /*
+ We specify 6 color families (hues), each with 5 hue/lightness options, to be used by style files if they wish.
+
+ The hues should roughly corrspond to red, orange, yellow, green, blue, violet, but should be consistent with the colors specified for titles and toc defined above.
+
+ Each color has *light, *dark variants (adjusting the lightness of hsl) and *rich, *dull variants (adjusting the saturation). *light and *dull should work for a main background. The standard and *riche should work for borders. For a bold title background, the *dark could be used.
+
+ The *dark should always contrast correctly with white text (we could later specify a *dark-text to be the correct contrast with *dark). All other variants should contrast correctly with black text.
+ */
+ --red: hsl(345, 60%, 60%);
+ --redlight: hsl(345, 60%, 80%);
+ --reddark: hsl(345, 60%, 15%);
+ --redrich: hsl(345, 100%, 60%);
+ --reddull: hsl(345, 20%, 60%);
+
+ --orange: hsl(30, 70%, 60%);
+ --orangelight: hsl(30, 60%, 80%);
+ --orangedark: hsl(30, 60%, 15%);
+ --orangerich: hsl(30, 100%, 60%);
+ --orangedull: hsl(30, 30%, 60%);
+
+ --yellow: hsl(58, 60%, 60%);
+ --yellowlight: hsl(58, 60%, 80%);
+ --yellowdark: hsl(58, 60%, 15%);
+ --yellowrich: hsl(58, 100%, 60%);
+ --yellowdull: hsl(58, 30%, 60%);
+
+ --green: hsl(136, 52%, 33%);
+ --greenlight: hsl(136, 52%, 80%);
+ --greendark: hsl(136, 52%, 15%);
+ --greenrich: hsl(136, 100%, 60%);
+ --greendull: hsl(136, 20%, 60%);
+
+ --blue: hsl(214, 59%, 60%);
+ --bluelight: hsl(214, 59%, 80%);
+ --bluedark: hsl(214, 59%, 15%);
+ --bluerich: hsl(214, 100%, 50%);
+ --bluedull: hsl(214, 20%, 50%);
+
+ --violet: hsl(259, 60%, 60%);
+ --violetlight: hsl(259, 60%, 80%);
+ --violetdark: hsl(259, 60%, 15%);
+ --violetrich: hsl(259, 100%, 60%);
+ --violetdull: hsl(259, 20%, 60%);
+}
+
diff --git a/_static/pretext/css/colors_blue_grey.css b/_static/pretext/css/colors_blue_grey.css
new file mode 100644
index 00000000..30835d13
--- /dev/null
+++ b/_static/pretext/css/colors_blue_grey.css
@@ -0,0 +1,74 @@
+
+/*
+ There are five main choices that define a color scheme in the
+ HTML output of PreTeXt:
+ 1) A dark color for the title on each page
+ 2) A dark color for highlighted words in the body
+ 3) A dark color for other highlighted words in the body
+
+ In the CSS those are called 'documenttitle', 'bodytitle',
+ and 'bodysubtitle'.
+
+ The other two choices appear in the ToC.
+
+ Either:
+ 3) A dark color for each chapter background
+ 4) A dark color for the current section background
+ (Often the ToC section background equals documenttitle.
+
+ Or:
+ 3') A light color for each chapter background
+ 4') A light color for the current section background
+
+ In the CSS those are called 'chaptertoc' and 'sectiontoc',
+ respectively.
+
+ With 3) and 4) you need white letters to go on the dark
+ background, and with 3') and 4') you need dark letters
+ on the light background. Set the color of those letters
+ with 'chaptertoctext'.
+
+ In addition to the above four choices, you need to
+ choose a contrasting shade of each color, to be used
+ for highlighting, borders, etc.
+
+ In the future you will be able to choose colors for assemblages
+ and for knowl output
+*/
+
+/* Colors formerly in mathbook-4.css */
+
+:root {
+ --documenttitle: #2a5ea4;
+ --bodytitle: #2B5F82;
+ --bodysubtitle: #A62E1C;
+ --bodytitlehighlight: #e0e9ff; /* light, and contrasting to bodytitle */
+ --bodysubtitlehighlight: #fce5e4; /* light, and contrasting to bodysubtitle */
+ /*
+ The bodytitle and bodysubtitle colors must have at least a 3:1 contrast
+ ratio with black, and at least 5:1 ratio with with the corresponding highlight.
+ (The second condition will guarantee an adequate contrast with white.)
+ */
+
+ --chaptertoc: #525252;
+ --chaptertoctext: white;
+ --chaptertocactive: var(--documenttitle); /* often the same as documenttitle */
+ --chaptertoctextactive: white;
+ --sectiontoc: white; /* can also write it as #ffffff */
+ --sectiontoctext: #20477b;
+ --sectiontocactive: var(--documenttitle); /* often the same as documenttitle */
+ --sectiontoctextactive: white;
+ --tocborder: #152f53;
+
+ --highlighttoc: #20477b; /* often a dark version of documenttitle */
+ --highlighttoctext: white;
+ --highlighttocborder: var(--chaptertoc);
+
+ --videoplay: var(--bodytitle);
+ --assemblageborder: #5B2F82;
+ --assemblagebackground: #f5f8ff;
+
+ --knowlborder: var(--bodytitlehighlight);
+ --knowlbackground: var(--assemblagebackground);
+}
+
diff --git a/_static/pretext/css/colors_blue_red.css b/_static/pretext/css/colors_blue_red.css
new file mode 100644
index 00000000..19b65206
--- /dev/null
+++ b/_static/pretext/css/colors_blue_red.css
@@ -0,0 +1,72 @@
+
+/*
+ There are five main choices that define a color scheme in the
+ HTML output of PreTeXt:
+ 1) A dark color for the title on each page
+ 2) A dark color for highlighted words in the body
+ 3) A dark color for other highlighted words in the body
+
+ In the CSS those are called 'documenttitle', 'bodytitle',
+ and 'bodysubtitle'.
+
+ The other two choices appear in the ToC.
+
+ Either:
+ 3) A dark color for each chapter background
+ 4) A dark color for the current section background
+ (Often the ToC section background equals documenttitle.
+
+ Or:
+ 3') A light color for each chapter background
+ 4') A light color for the current section background
+
+ In the CSS those are called 'chaptertoc' and 'sectiontoc',
+ respectively.
+
+ With 3) and 4) you need white letters to go on the dark
+ background, and with 3') and 4') you need dark letters
+ on the light background. Set the color of those letters
+ with 'chaptertoctext'.
+
+ In addition to the above four choices, you need to
+ choose a contrasting shade of each color, to be used
+ for highlighting, borders, etc.
+
+ In the future you will be able to choose colors for assemblages
+ and for knowl output
+*/
+
+:root {
+ --documenttitle: #2a5ea4;
+ --bodytitle: #2B5F82;
+ --bodysubtitle: #A62E1C;
+ --bodytitlehighlight: #e0e9ff; /* light, and contrasting to bodytitle */
+ --bodysubtitlehighlight: #fce5e4; /* light, and contrasting to bodysubtitle */
+ /*
+ The bodytitle and bodysubtitle colors must have at least a 3:1 contrast
+ ratio with black, and at least 5:1 ratio with with the corresponding highlight.
+ (The second condition will guarantee an adequate contrast with white.)
+ */
+
+ --chaptertoc: #932c1c;
+ --chaptertoctext: white;
+ --chaptertocactive: var(--documenttitle); /* often the same as documenttitle */
+ --chaptertoctextactive: white;
+ --sectiontoc: white; /* can also write it as #ffffff */
+ --sectiontoctext: #20477b;
+ --sectiontocactive: var(--documenttitle); /* often the same as documenttitle */
+ --sectiontoctextactive: white;
+ --tocborder: #152f53;
+
+ --highlighttoc: #20477b; /* often a dark version of documenttitle */
+ --highlighttoctext: white;
+ --highlighttocborder: var(--chaptertoc);
+
+ --videoplay: var(--bodytitle);
+ --assemblageborder: #1100aa;
+ --assemblagebackground: #f5f8ff;
+
+ --knowlborder: var(--bodytitlehighlight);
+ --knowlbackground: var(--assemblagebackground);
+}
+
diff --git a/_static/pretext/css/colors_blue_red_dark.css b/_static/pretext/css/colors_blue_red_dark.css
new file mode 100644
index 00000000..6442cba6
--- /dev/null
+++ b/_static/pretext/css/colors_blue_red_dark.css
@@ -0,0 +1,130 @@
+
+/*
+ There are five main choices that define a color scheme in the
+ HTML output of PreTeXt:
+ 1) A dark color for the title on each page
+ 2) A dark color for highlighted words in the body
+ 3) A dark color for other highlighted words in the body
+
+ In the CSS those are called 'documenttitle', 'bodytitle',
+ and 'bodysubtitle'.
+
+ The other two choices appear in the ToC.
+
+ Either:
+ 3) A dark color for each chapter background
+ 4) A dark color for the current section background
+ (Often the ToC section background equals documenttitle.
+
+ Or:
+ 3') A light color for each chapter background
+ 4') A light color for the current section background
+
+ In the CSS those are called 'chaptertoc' and 'sectiontoc',
+ respectively.
+
+ With 3) and 4) you need white letters to go on the dark
+ background, and with 3') and 4') you need dark letters
+ on the light background. Set the color of those letters
+ with 'chaptertoctext'.
+
+ In addition to the above four choices, you need to
+ choose a contrasting shade of each color, to be used
+ for highlighting, borders, etc.
+
+ In the future you will be able to choose colors for assemblages
+ and for knowl output
+*/
+
+:root {
+ --bodyfontcolor: #eee;
+ --documenttitle: #2a5ea4;
+ --documenttitledark: #20477b;
+ --documenttitlelight: #abf;
+ --bodytitle: #2B5F82;
+ --bodysubtitle: #A62E1C;
+ --bodytitlehighlight: #316; /* DARKER, and contrasting to bodytitle */
+ --bodysubtitlehighlight: #fce5e4; /* light, and contrasting to bodysubtitle */
+ /*
+ The bodytitle and bodysubtitle colors must have at least a 3:1 contrast
+ ratio with black, and at least 5:1 ratio with with the corresponding highlight.
+ (The second condition will guarantee an adequate contrast with white.)
+ */
+
+ --chaptertoc: #932c1c;
+ --chaptertoctext: #dee;
+ --chaptertocactive: var(--documenttitle); /* often the same as documenttitle */
+ --chaptertoctextactive: white;
+ --sectiontoc: #666;
+ --sectiontoctext: #eed;
+ --sectiontocactive: var(--documenttitle); /* often the same as documenttitle */
+ --sectiontoctextactive: white;
+ --tocborder: #152f53;
+
+ --highlighttoc: var(--documenttitledark);
+ --highlighttoctext: white;
+ --highlighttocborder: var(--chaptertoc);
+
+ --videoplay: var(--bodytitle);
+ --assemblageborder: #1100aa;
+ --assemblagebackground: #f5f8ff;
+ --assemblagebackground: #003;
+
+ --knowlborder: var(--bodytitlehighlight);
+ --knowlbackground: var(--assemblagebackground);
+}
+
+body.pretext {
+ background: #222;
+}
+.pretext .ptx-page > .ptx-main {
+ background: #444;
+ color: var(--bodyfontcolor);
+}
+.ptx-content .summary-links a {
+ background: var(--documenttitledark);
+ background: var(--chaptertoc);
+}
+.ptx-navbar {
+ background: #333;
+}
+.ptx-navbar .button{
+ background-color: #635;
+ color: #fff;
+}
+.ptx-navbar .button:hover {
+ background-color: #fafafa;
+ color: #000;
+}
+.ptx-navbar .calculator-toggle {
+ background-color: #336;
+}
+.ptx-navbar .calculator-toggle:hover {
+ background-color: #fce;
+}
+
+.pretext .ptx-masthead {
+ background: #555;
+}
+.pretext .ptx-masthead .title-container > .pretext .heading,
+.pretext .ptx-masthead .title-container > .heading a,
+.pretext .ptx-masthead .logo-link:empty:hover::before,
+.pretext .ptx-masthead .byline,
+.pretext .ptx-masthead .byline a {
+ color: var(--documenttitlelight);
+}
+.pretext .ptx-content .code-inline {
+ color: var(--documenttitledark);
+}
+.ptx-content .goal-like > .heading {
+ background: var(--chaptertoc);
+}
+.pretext .ptx-content [data-knowl],
+.pretext .ptx-content [data-knowl]:hover,
+.pretext .ptx-content [data-knowl]:active,
+.pretext .ptx-content [data-knowl].active {
+ color: var(--documenttitlelight);
+}
+.pretext .ptx-page .ptx-main .ptx-content .knowl-content > .solution-like {
+ background: #606;
+}
diff --git a/_static/pretext/css/colors_bluegreen_grey.css b/_static/pretext/css/colors_bluegreen_grey.css
new file mode 100644
index 00000000..2546fe3c
--- /dev/null
+++ b/_static/pretext/css/colors_bluegreen_grey.css
@@ -0,0 +1,119 @@
+
+/*
+ There are five main choices that define a color scheme in the
+ HTML output of PreTeXt:
+ 1) A dark color for the title on each page
+ 2) A dark color for highlighted words in the body
+ 3) A dark color for other highlighted words in the body
+
+ In the CSS those are called 'documenttitle', 'bodytitle',
+ and 'bodysubtitle'.
+
+ The other two choices appear in the ToC.
+
+ Either:
+ 3) A dark color for each chapter background
+ 4) A dark color for the current section background
+ (Often the ToC section background equals documenttitle.
+
+ Or:
+ 3') A light color for each chapter background
+ 4') A light color for the current section background
+
+ In the CSS those are called 'chaptertoc' and 'sectiontoc',
+ respectively.
+
+ With 3) and 4) you need white letters to go on the dark
+ background, and with 3') and 4') you need dark letters
+ on the light background. Set the color of those letters
+ with 'chaptertoctext'.
+
+ In addition to the above four choices, you need to
+ choose a contrasting shade of each color, to be used
+ for highlighting, borders, etc.
+
+ In the future you will be able to choose colors for assemblages
+ and for knowl output
+*/
+
+:root {
+ --bluegreen: hsl(192, 98%, 23%);
+ --documenttitle: var(--bluegreen);
+ --bodytitle: var(--bluegreen);
+ --bodysubtitle: var(--bluegreen);
+ --bodytitlehighlight: #e0e9ff; /* light, and contrasting to bodytitle */
+ --bodysubtitlehighlight: #fce5e4; /* light, and contrasting to bodysubtitle */
+ /*
+ The bodytitle and bodysubtitle colors must have at least a 3:1 contrast
+ ratio with black, and at least 5:1 ratio with with the corresponding highlight.
+ (The second condition will guarantee an adequate contrast with white.)
+ */
+
+ --chaptertoc: #ddd; /* #28803f; */
+ --chaptertoctext: var(--bluegreen); /* white; */
+ --chaptertocactive: hsl(192, 98%, 19%);
+ --chaptertoctextactive: white;
+ --sectiontoc: white; /* can also write it as #ffffff */
+ --sectiontoctext: var(--bluegreen); /* #20477b; */
+ --sectiontocactive: hsl(192, 98%, 19%);
+ --sectiontoctextactive: white;
+ --tocborder: var(--bluegreen); /* #152f53; */
+
+ --highlighttoc: var(--bluegreen); /* #20477b; */
+ --highlighttoctext: white;
+ --highlighttocborder: var(--chaptertoc);
+
+ --videoplay: var(--bodytitle);
+ --assemblageborder: #1100aa;
+ --assemblagebackground: #f5f8ff;
+
+ --knowlborder: var(--bodytitlehighlight);
+ --knowlbackground: var(--assemblagebackground);
+
+ /* Colors for block envirornments: */
+ /*
+ We specify 6 color families (hues), each with 5 hue/lightness options, to be used by style files if they wish.
+
+ The hues should roughly corrspond to red, orange, yellow, green, blue, violet, but should be consistent with the colors specified for titles and toc defined above.
+
+ Each color has *light, *dark variants (adjusting the lightness of hsl) and *rich, *dull variants (adjusting the saturation). *light and *dull should work for a main background. The standard and *riche should work for borders. For a bold title background, the *dark could be used.
+
+ The *dark should always contrast correctly with white text (we could later specify a *dark-text to be the correct contrast with *dark). All other variants should contrast correctly with black text.
+ */
+ --red: hsl(345, 60%, 60%);
+ --redlight: hsl(345, 60%, 80%);
+ --reddark: hsl(345, 60%, 15%);
+ --redrich: hsl(345, 100%, 60%);
+ --reddull: hsl(345, 20%, 60%);
+
+ --orange: hsl(30, 70%, 60%);
+ --orangelight: hsl(30, 60%, 80%);
+ --orangedark: hsl(30, 60%, 15%);
+ --orangerich: hsl(30, 100%, 60%);
+ --orangedull: hsl(30, 30%, 60%);
+
+ --yellow: hsl(58, 60%, 60%);
+ --yellowlight: hsl(58, 60%, 80%);
+ --yellowdark: hsl(58, 60%, 15%);
+ --yellowrich: hsl(58, 100%, 60%);
+ --yellowdull: hsl(58, 30%, 60%);
+
+ --green: hsl(136, 52%, 33%);
+ --greenlight: hsl(136, 52%, 80%);
+ --greendark: hsl(136, 52%, 15%);
+ --greenrich: hsl(136, 100%, 60%);
+ --greendull: hsl(136, 20%, 60%);
+
+ --blue: hsl(214, 59%, 60%);
+ --bluelight: hsl(214, 59%, 80%);
+ --bluedark: hsl(214, 59%, 15%);
+ --bluerich: hsl(214, 100%, 50%);
+ --bluedull: hsl(214, 20%, 50%);
+
+ --violet: hsl(259, 60%, 60%);
+ --violetlight: hsl(259, 60%, 80%);
+ --violetdark: hsl(259, 60%, 15%);
+ --violetrich: hsl(259, 100%, 60%);
+ --violetdull: hsl(259, 20%, 60%);
+}
+
diff --git a/_static/pretext/css/colors_brown_gold.css b/_static/pretext/css/colors_brown_gold.css
new file mode 100644
index 00000000..9b446bd1
--- /dev/null
+++ b/_static/pretext/css/colors_brown_gold.css
@@ -0,0 +1,37 @@
+
+/* Colors for Manitoba */
+
+:root {
+ --documenttitle: #472200;
+ --bodytitle: #8e4a0c;
+ --bodysubtitle: #864E1C;
+ --bodytitlehighlight: #eeeff3; /* light, and contrasting to bodytitle */
+ --bodysubtitlehighlight: #fce5e4; /* light, and contrasting to bodysubtitle */
+ /*
+ The bodytitle and bodysubtitle colors must have at least a 3:1 contrast
+ ratio with black, and at least 5:1 ratio with with the corresponding highlight.
+ (The second condition will guarantee an adequate contrast with white.)
+ */
+
+ --chaptertoc: #eaaf0f;
+ --chaptertoctext: white;
+ --chaptertocactive: var(--documenttitle); /* often the same as documenttitle */
+ --chaptertoctextactive: white;
+ --sectiontoc: white; /* can also write it as #ffffff */
+ --sectiontoctext: #6f080b;
+ --sectiontocactive: var(--documenttitle); /* often the same as documenttitle */
+ --sectiontoctextactive: white;
+ --tocborder: #152f53;
+
+ --highlighttoc: #140a00 /* often a dark version of documenttitle */
+ --highlighttoctext: white;
+ --highlighttocborder: var(--chaptertoc);
+
+ --videoplay: var(--bodytitle);
+ --assemblageborder: #1100aa;
+ --assemblagebackground: #f5f8ff;
+
+ --knowlborder: var(--bodytitlehighlight);
+ --knowlbackground: var(--assemblagebackground);
+}
+
diff --git a/_static/pretext/css/colors_darkmartiansands.css b/_static/pretext/css/colors_darkmartiansands.css
new file mode 100644
index 00000000..d2d80daf
--- /dev/null
+++ b/_static/pretext/css/colors_darkmartiansands.css
@@ -0,0 +1,74 @@
+
+/*
+ There are five main choices that define a color scheme in the
+ HTML output of PreTeXt:
+ 1) A dark color for the title on each page
+ 2) A dark color for highlighted words in the body
+ 3) A dark color for other highlighted words in the body
+
+ In the CSS those are called 'documenttitle', 'bodytitle',
+ and 'bodysubtitle'.
+
+ The other two choices appear in the ToC.
+
+ Either:
+ 3) A dark color for each chapter background
+ 4) A dark color for the current section background
+ (Often the ToC section background equals documenttitle.
+
+ Or:
+ 3') A light color for each chapter background
+ 4') A light color for the current section background
+
+ In the CSS those are called 'chaptertoc' and 'sectiontoc',
+ respectively.
+
+ With 3) and 4) you need white letters to go on the dark
+ background, and with 3') and 4') you need dark letters
+ on the light background. Set the color of those letters
+ with 'chaptertoctext'.
+
+ In addition to the above four choices, you need to
+ choose a contrasting shade of each color, to be used
+ for highlighting, borders, etc.
+
+ In the future you will be able to choose colors for assemblages
+ and for knowl output
+*/
+
+/* Martian sands color scheme by Alex Jordan */
+
+:root {
+ --documenttitle: #880000;
+ --bodytitle: #932c10;
+ --bodysubtitle: #A62E1C;
+ --bodytitlehighlight: #dcd3f0; /* light, and contrasting to bodytitle */
+ --bodysubtitlehighlight: #fce5e4; /* light, and contrasting to bodysubtitle */
+ /*
+ The bodytitle and bodysubtitle colors must have at least a 3:1 contrast
+ ratio with black, and at least 5:1 ratio with with the corresponding highlight.
+ (The second condition will guarantee an adequate contrast with white.)
+ */
+
+ --chaptertoc: #b58039;
+ --chaptertoctext: white;
+ --chaptertocactive: var(--documenttitle); /* often the same as documenttitle */
+ --chaptertoctextactive: white;
+ --sectiontoc: white; /* can also write it as #ffffff */
+ --sectiontoctext: #20477b;
+ --sectiontocactive: var(--documenttitle); /* often the same as documenttitle */
+ --sectiontoctextactive: white;
+ --tocborder: #d1d1d1;
+
+ --highlighttoc: #550000; /* often a dark version of documenttitle */
+ --highlighttoctext: white;
+ --highlighttocborder: var(--chaptertoc);
+
+ --videoplay: var(--bodytitle);
+ --assemblageborder: #5B2F82;
+ --assemblagebackground: #f5f8ff;
+
+ --knowlborder: var(--bodytitlehighlight);
+ --knowlbackground: var(--assemblagebackground);
+}
+
diff --git a/_static/pretext/css/colors_default.css b/_static/pretext/css/colors_default.css
new file mode 100644
index 00000000..f10eb36d
--- /dev/null
+++ b/_static/pretext/css/colors_default.css
@@ -0,0 +1,82 @@
+
+/*
+ There are five main choices that define a color scheme in the
+ HTML output of PreTeXt:
+ 1) A dark color for the title on each page
+ 2) A dark color for highlighted words in the body
+ 3) A dark color for other highlighted words in the body
+
+ In the CSS those are called 'documenttitle', 'bodytitle',
+ and 'bodysubtitle'.
+
+ The other two choices appear in the ToC.
+
+ Either:
+ 4) A dark color for each chapter background
+ 5) A dark color for the current section background
+ (Often the ToC section background equals documenttitle.
+
+ Or:
+ 4') A light color for each chapter background
+ 5') A light color for the current section background
+
+ In the CSS those are called 'chaptertoc' and 'sectiontoc',
+ respectively.
+
+ With 4) and 5) you need white letters to go on the dark
+ background, and with 4') and 5') you need dark letters
+ on the light background. Set the color of those letters
+ with 'chaptertoctext'.
+
+ In addition to the above choices, you need to
+ choose a contrasting shade of each color, to be used
+ for highlighting, borders, etc.
+
+ In the future you will be able to choose colors for assemblages
+ and for knowl output
+*/
+
+:root {
+ --documenttitle: #932919;
+ --bodytitle: #A62E1C; /* often a darker version of documenttitle */
+ --bodysubtitle: #2B5F82; /* can be the same as bodytitle */
+ --bodytitlehighlight: #e0e9ff; /* light, and contrasting to bodytitle */
+ --bodysubtitlehighlight: #fce5e4; /* light, and contrasting to bodysubtitle */
+ /*
+ The bodytitle and bodysubtitle colors must have at least a 3:1 contrast
+ ratio with black, and at least 5:1 ratio with with the corresponding highlight.
+ (The second condition will guarantee an adequate contrast with white.)
+ */
+
+ /* Part colors are not used in non-focused TOC */
+ --parttoc: #932c1c;
+ --parttoctext: white;
+ --parttocactive: var(--documenttitle);
+ --parttoctextactive: white;
+
+ --chaptertoc: #3572a0;
+ --chaptertoctext: white;
+ --chaptertocactive: var(--documenttitle); /* often the same as documenttitle */
+ --chaptertoctextactive: white;
+ --sectiontoc: white; /* can also write it as #ffffff */
+ --sectiontoctext: #662211;
+ --sectiontocactive: var(--documenttitle); /* often the same as documenttitle */
+ --sectiontoctextactive: white;
+ --tocborder: #185f65;
+
+ --highlighttoc: #671d12; /* often a dark version of documenttitle */
+ --highlighttoctext: white;
+ --highlighttocborder: var(--chaptertoc);
+
+ --videoplay: var(--bodytitle);
+ --assemblagebackground: #f5f8ff;
+ --assemblagebackground: #F0EAF6;
+ --assemblageborder: #5B2F82;
+ --assemblageborder: #B793D7;
+ --assemblageborder: #CAAEE0;
+ --assemblagedarkborder: #472664;
+
+ --knowlborder: var(--bodytitlehighlight);
+ --knowlbackground: var(--assemblagebackground);
+}
+
diff --git a/_static/pretext/css/colors_focused_gray_aqua.css b/_static/pretext/css/colors_focused_gray_aqua.css
new file mode 100644
index 00000000..af0f56b1
--- /dev/null
+++ b/_static/pretext/css/colors_focused_gray_aqua.css
@@ -0,0 +1,47 @@
+/*
+ Sample bolder focused TOC color scheme
+ See colors_default for general color tips
+*/
+
+
+:root {
+ /* -------- general -------- */
+ --documenttitle: #343b48;
+ --bodytitle: #2B5F82;
+ --bodysubtitle: #1d686e;
+ --bodytitlehighlight: #e0e9ff;
+ --bodysubtitlehighlight: #fce5e4;
+
+ --videoplay: var(--bodytitle);
+ --assemblageborder: #343b48;
+ --assemblagebackground: #f5f8ff;
+
+ --knowlborder: var(--bodytitlehighlight);
+ --knowlbackground: var(--assemblagebackground);
+
+ /* -------- TOC -------- */
+ --toc-text-dark: #343b48;
+ --toc-text-light: white;
+ --tocborder: var(--toc-text-dark);
+ --active-toc-item: #e5ca34;
+
+ --parttoc: var(--toc-text-dark);
+ --parttoctext: var(--toc-text-light);
+ --parttocactive: var(--active-toc-item);
+ --parttoctextactive: var(--toc-text-dark);
+
+ --chaptertoc: #1d686e;
+ --chaptertoctext: var(--toc-text-light);
+ --chaptertocactive: var(--active-toc-item);
+ --chaptertoctextactive: var(--toc-text-dark);
+
+ --sectiontoc: #fffffd;
+ --sectiontoctext: var(--toc-text-dark);
+ --sectiontocactive: var(--active-toc-item);
+ --sectiontoctextactive: var(--toc-text-dark);
+
+
+ --highlighttoc: var(--active-toc-item);
+ --highlighttoctext: var(--toc-text-dark);
+ --highlighttocborder: var(--chaptertoc);
+}
\ No newline at end of file
diff --git a/_static/pretext/css/colors_focused_light.css b/_static/pretext/css/colors_focused_light.css
new file mode 100644
index 00000000..ddedb0a3
--- /dev/null
+++ b/_static/pretext/css/colors_focused_light.css
@@ -0,0 +1,44 @@
+/*
+ Sample light, non-distracting focused TOC color scheme
+ See colors_default for general color tips
+*/
+
+:root {
+ /* -------- general -------- */
+ --documenttitle: #343b48;
+ --bodytitle: #2B5F82;
+ --bodysubtitle: #A62E1C;
+ --bodytitlehighlight: #e0e9ff;
+ --bodysubtitlehighlight: #fce5e4;
+
+ --videoplay: var(--bodytitle);
+ --assemblageborder: #1100aa;
+ --assemblagebackground: #f5f8ff;
+
+ --knowlborder: var(--bodytitlehighlight);
+ --knowlbackground: var(--assemblagebackground);
+
+ /* -------- TOC -------- */
+ --toc-text-dark: #333;
+ --tocborder: var(--toc-text-dark);
+ --active-toc-item: #dbebf1;
+
+ --parttoc: #e8e8e8;
+ --parttoctext: var(--toc-text-dark);
+ --parttocactive: var(--active-toc-item);
+ --parttoctextactive: var(--toc-text-dark);
+
+ --chaptertoc: #f2f2f2;
+ --chaptertoctext: var(--toc-text-dark);
+ --chaptertocactive: var(--active-toc-item);
+ --chaptertoctextactive: var(--toc-text-dark);
+
+ --sectiontoc: #fdfdfd;
+ --sectiontoctext: var(--toc-text-dark);
+ --sectiontocactive: var(--active-toc-item);
+ --sectiontoctextactive: var(--toc-text-dark);
+
+ --highlighttoc: #c2e5f2;
+ --highlighttoctext: var(--toc-text-dark);
+ --highlighttocborder: var(--chaptertoc);
+}
\ No newline at end of file
diff --git a/_static/pretext/css/colors_green_blue.css b/_static/pretext/css/colors_green_blue.css
new file mode 100644
index 00000000..0b637e3d
--- /dev/null
+++ b/_static/pretext/css/colors_green_blue.css
@@ -0,0 +1,72 @@
+
+/*
+ There are five main choices that define a color scheme in the
+ HTML output of PreTeXt:
+ 1) A dark color for the title on each page
+ 2) A dark color for highlighted words in the body
+ 3) A dark color for other highlighted words in the body
+
+ In the CSS those are called 'documenttitle', 'bodytitle',
+ and 'bodysubtitle'.
+
+ The other two choices appear in the ToC.
+
+ Either:
+ 3) A dark color for each chapter background
+ 4) A dark color for the current section background
+ (Often the ToC section background equals documenttitle.
+
+ Or:
+ 3') A light color for each chapter background
+ 4') A light color for the current section background
+
+ In the CSS those are called 'chaptertoc' and 'sectiontoc',
+ respectively.
+
+ With 3) and 4) you need white letters to go on the dark
+ background, and with 3') and 4') you need dark letters
+ on the light background. Set the color of those letters
+ with 'chaptertoctext'.
+
+ In addition to the above four choices, you need to
+ choose a contrasting shade of each color, to be used
+ for highlighting, borders, etc.
+
+ In the future you will be able to choose colors for assemblages
+ and for knowl output
+*/
+
+:root {
+ --documenttitle: #248038;
+ --bodytitle: #20602f;
+ --bodysubtitle: #822060;
+ --bodytitlehighlight: #e0e9ff; /* light, and contrasting to bodytitle */
+ --bodysubtitlehighlight: #fce5e4; /* light, and contrasting to bodysubtitle */
+ /*
+ The bodytitle and bodysubtitle colors must have at least a 3:1 contrast
+ ratio with black, and at least 5:1 ratio with with the corresponding highlight.
+ (The second condition will guarantee an adequate contrast with white.)
+ */
+
+ --chaptertoc: #2650a0;
+ --chaptertoctext: white;
+ --chaptertocactive: var(--documenttitle); /* often the same as documenttitle */
+ --chaptertoctextactive: white;
+ --sectiontoc: white; /* can also write it as #ffffff */
+ --sectiontoctext: #20602f;
+ --sectiontocactive: var(--documenttitle); /* often the same as documenttitle */
+ --sectiontoctextactive: white;
+ --tocborder: #152f53;
+
+ --highlighttoc: #195827; /* often a dark version of documenttitle */
+ --highlighttoctext: white;
+ --highlighttocborder: var(--chaptertoc);
+
+ --videoplay: var(--bodytitle);
+ --assemblageborder: #1100aa;
+ --assemblagebackground: #f5f8ff;
+
+ --knowlborder: var(--bodytitlehighlight);
+ --knowlbackground: var(--assemblagebackground);
+}
+
diff --git a/_static/pretext/css/colors_green_plum.css b/_static/pretext/css/colors_green_plum.css
new file mode 100644
index 00000000..20edb332
--- /dev/null
+++ b/_static/pretext/css/colors_green_plum.css
@@ -0,0 +1,72 @@
+
+/*
+ There are five main choices that define a color scheme in the
+ HTML output of PreTeXt:
+ 1) A dark color for the title on each page
+ 2) A dark color for highlighted words in the body
+ 3) A dark color for other highlighted words in the body
+
+ In the CSS those are called 'documenttitle', 'bodytitle',
+ and 'bodysubtitle'.
+
+ The other two choices appear in the ToC.
+
+ Either:
+ 3) A dark color for each chapter background
+ 4) A dark color for the current section background
+ (Often the ToC section background equals documenttitle.
+
+ Or:
+ 3') A light color for each chapter background
+ 4') A light color for the current section background
+
+ In the CSS those are called 'chaptertoc' and 'sectiontoc',
+ respectively.
+
+ With 3) and 4) you need white letters to go on the dark
+ background, and with 3') and 4') you need dark letters
+ on the light background. Set the color of those letters
+ with 'chaptertoctext'.
+
+ In addition to the above four choices, you need to
+ choose a contrasting shade of each color, to be used
+ for highlighting, borders, etc.
+
+ In the future you will be able to choose colors for assemblages
+ and for knowl output
+*/
+
+:root {
+ --documenttitle: #28803f;
+ --bodytitle: #20602f;
+ --bodysubtitle: #822060;
+ --bodytitlehighlight: #e0e9ff; /* light, and contrasting to bodytitle */
+ --bodysubtitlehighlight: #fce5e4; /* light, and contrasting to bodysubtitle */
+ /*
+ The bodytitle and bodysubtitle colors must have at least a 3:1 contrast
+ ratio with black, and at least 5:1 ratio with with the corresponding highlight.
+ (The second condition will guarantee an adequate contrast with white.)
+ */
+
+ --chaptertoc: #822060;
+ --chaptertoctext: white;
+ --chaptertocactive: var(--documenttitle); /* often the same as documenttitle */
+ --chaptertoctextactive: white;
+ --sectiontoc: white; /* can also write it as #ffffff */
+ --sectiontoctext: #20602f;
+ --sectiontocactive: var(--documenttitle); /* often the same as documenttitle */
+ --sectiontoctextactive: white;
+ --tocborder: #152f53;
+
+ --highlighttoc: #20602f; /* often a dark version of documenttitle */
+ --highlighttoctext: white;
+ --highlighttocborder: var(--chaptertoc);
+
+ --videoplay: var(--bodytitle);
+ --assemblageborder: #1100aa;
+ --assemblagebackground: #f5f8ff;
+
+ --knowlborder: var(--bodytitlehighlight);
+ --knowlbackground: var(--assemblagebackground);
+}
+
diff --git a/_static/pretext/css/colors_maroon_grey.css b/_static/pretext/css/colors_maroon_grey.css
new file mode 100644
index 00000000..8a8506cb
--- /dev/null
+++ b/_static/pretext/css/colors_maroon_grey.css
@@ -0,0 +1,37 @@
+
+/* Colors for UPS */
+
+:root {
+ --documenttitle: #660000;
+ --bodytitle: #8e0a0c;
+ --bodysubtitle: #A62E1C;
+ --bodytitlehighlight: #eeeff3; /* light, and contrasting to bodytitle */
+ --bodysubtitlehighlight: #fce5e4; /* light, and contrasting to bodysubtitle */
+ /*
+ The bodytitle and bodysubtitle colors must have at least a 3:1 contrast
+ ratio with black, and at least 5:1 ratio with with the corresponding highlight.
+ (The second condition will guarantee an adequate contrast with white.)
+ */
+
+ --chaptertoc: #6d8899;
+ --chaptertoctext: white;
+ --chaptertocactive: var(--documenttitle); /* often the same as documenttitle */
+ --chaptertoctextactive: white;
+ --sectiontoc: white; /* can also write it as #ffffff */
+ --sectiontoctext: #6f080b;
+ --sectiontocactive: var(--documenttitle); /* often the same as documenttitle */
+ --sectiontoctextactive: white;
+ --tocborder: #152f53;
+
+ --highlighttoc: #330000; /* often a dark version of documenttitle */
+ --highlighttoctext: white;
+ --highlighttocborder: var(--chaptertoc);
+
+ --videoplay: var(--bodytitle);
+ --assemblageborder: #1100aa;
+ --assemblagebackground: #f5f8ff;
+
+ --knowlborder: var(--bodytitlehighlight);
+ --knowlbackground: var(--assemblagebackground);
+}
+
diff --git a/_static/pretext/css/colors_martiansands.css b/_static/pretext/css/colors_martiansands.css
new file mode 100644
index 00000000..d26e8ca1
--- /dev/null
+++ b/_static/pretext/css/colors_martiansands.css
@@ -0,0 +1,74 @@
+
+/*
+ There are five main choices that define a color scheme in the
+ HTML output of PreTeXt:
+ 1) A dark color for the title on each page
+ 2) A dark color for highlighted words in the body
+ 3) A dark color for other highlighted words in the body
+
+ In the CSS those are called 'documenttitle', 'bodytitle',
+ and 'bodysubtitle'.
+
+ The other two choices appear in the ToC.
+
+ Either:
+ 3) A dark color for each chapter background
+ 4) A dark color for the current section background
+ (Often the ToC section background equals documenttitle.
+
+ Or:
+ 3') A light color for each chapter background
+ 4') A light color for the current section background
+
+ In the CSS those are called 'chaptertoc' and 'sectiontoc',
+ respectively.
+
+ With 3) and 4) you need white letters to go on the dark
+ background, and with 3') and 4') you need dark letters
+ on the light background. Set the color of those letters
+ with 'chaptertoctext'.
+
+ In addition to the above four choices, you need to
+ choose a contrasting shade of each color, to be used
+ for highlighting, borders, etc.
+
+ In the future you will be able to choose colors for assemblages
+ and for knowl output
+*/
+
+/* Martian sands color scheme by Alex Jordan */
+
+:root {
+ --documenttitle: #944921;
+ --bodytitle: #932c10;
+ --bodysubtitle: #A62E1C;
+ --bodytitlehighlight: #dcd3f0; /* light, and contrasting to bodytitle */
+ --bodysubtitlehighlight: #fce5e4; /* light, and contrasting to bodysubtitle */
+ /*
+ The bodytitle and bodysubtitle colors must have at least a 3:1 contrast
+ ratio with black, and at least 5:1 ratio with with the corresponding highlight.
+ (The second condition will guarantee an adequate contrast with white.)
+ */
+
+ --chaptertoc: #d19e69;
+ --chaptertoctext: white;
+ --chaptertocactive: var(--documenttitle); /* often the same as documenttitle */
+ --chaptertoctextactive: white;
+ --sectiontoc: white; /* can also write it as #ffffff */
+ --sectiontoctext: #20477b;
+ --sectiontocactive: var(--documenttitle); /* often the same as documenttitle */
+ --sectiontoctextactive: white;
+ --tocborder: #d1d1d1;
+
+ --highlighttoc: #6a3418; /* often a dark version of documenttitle */
+ --highlighttoctext: white;
+ --highlighttocborder: var(--chaptertoc);
+
+ --videoplay: var(--bodytitle);
+ --assemblageborder: #5B2F82;
+ --assemblagebackground: #f5f8ff;
+
+ --knowlborder: var(--bodytitlehighlight);
+ --knowlbackground: var(--assemblagebackground);
+}
+
diff --git a/_static/pretext/css/colors_orange_navy.css b/_static/pretext/css/colors_orange_navy.css
new file mode 100644
index 00000000..502f1801
--- /dev/null
+++ b/_static/pretext/css/colors_orange_navy.css
@@ -0,0 +1,72 @@
+
+/*
+ There are five main choices that define a color scheme in the
+ HTML output of PreTeXt:
+ 1) A dark color for the title on each page
+ 2) A dark color for highlighted words in the body
+ 3) A dark color for other highlighted words in the body
+
+ In the CSS those are called 'documenttitle', 'bodytitle',
+ and 'bodysubtitle'.
+
+ The other two choices appear in the ToC.
+
+ Either:
+ 3) A dark color for each chapter background
+ 4) A dark color for the current section background
+ (Often the ToC section background equals documenttitle.
+
+ Or:
+ 3') A light color for each chapter background
+ 4') A light color for the current section background
+
+ In the CSS those are called 'chaptertoc' and 'sectiontoc',
+ respectively.
+
+ With 3) and 4) you need white letters to go on the dark
+ background, and with 3') and 4') you need dark letters
+ on the light background. Set the color of those letters
+ with 'chaptertoctext'.
+
+ In addition to the above four choices, you need to
+ choose a contrasting shade of each color, to be used
+ for highlighting, borders, etc.
+
+ In the future you will be able to choose colors for assemblages
+ and for knowl output
+*/
+
+:root {
+ --documenttitle: #d64000;
+ --bodytitle: #00408a;
+ --bodysubtitle: #9e2f00;
+ --bodytitlehighlight: #ffcdbd; /* light, and contrasting to bodytitle */
+ --bodysubtitlehighlight: #fce5e4; /* light, and contrasting to bodysubtitle */
+ /*
+ The bodytitle and bodysubtitle colors must have at least a 3:1 contrast
+ ratio with black, and at least 5:1 ratio with with the corresponding highlight.
+ (The second condition will guarantee an adequate contrast with white.)
+ */
+
+ --chaptertoc: #00326b;
+ --chaptertoctext: white;
+ --chaptertocactive: var(--documenttitle); /* often the same as documenttitle */
+ --chaptertoctextactive: white;
+ --sectiontoc: white; /* can also write it as #ffffff */
+ --sectiontoctext: #00326b;
+ --sectiontocactive: var(--documenttitle); /* often the same as documenttitle */
+ --sectiontoctextactive: white;
+ --tocborder: #152f53;
+
+ --highlighttoc: #006deb; /* often a dark version of documenttitle */
+ --highlighttoctext: white;
+ --highlighttocborder: var(--chaptertoc);
+
+ --videoplay: var(--bodytitle);
+ --assemblageborder: #1100aa;
+ --assemblagebackground: #f5f8ff;
+
+ --knowlborder: var(--bodytitlehighlight);
+ --knowlbackground: var(--assemblagebackground);
+}
+
diff --git a/_static/pretext/css/colors_pastel_blue_orange.css b/_static/pretext/css/colors_pastel_blue_orange.css
new file mode 100644
index 00000000..2ec26e88
--- /dev/null
+++ b/_static/pretext/css/colors_pastel_blue_orange.css
@@ -0,0 +1,32 @@
+
+/* Pastel color scheme by Nathan Wintersgill */
+
+:root {
+ --documenttitle: #2a5ea4;
+ --bodytitle: #A62E1C;
+ --bodysubtitle: #2B5F82;
+ --bodytitlehighlight: #e0e9ff;
+ --bodysubtitlehighlight: #FCE5E4;
+
+ --chaptertoc: #dbf5ff;
+ --chaptertoctext: #444444;
+ --chaptertocactive: #fae5b6;
+ --chaptertoctextactive: #303030;
+ --sectiontoc: #ffffff;
+ --sectiontoctext: #404040;
+ --sectiontocactive: #fae5b6;
+ --sectiontoctextactive: #202020;
+ --tocborder: #afc2e5;
+
+ --highlighttoc: #fac793;
+ --highlighttoctext: #321a0c;
+ --highlighttocborder: #ec704b;
+
+ --assemblageborder: #1100aa;
+ --assemblagebackground: #f4f4fe;
+
+ --knowlborder: #e0e9ff;
+ --knowlbackground: #f5f8ff;
+
+}
+
diff --git a/_static/pretext/css/colors_red_blue.css b/_static/pretext/css/colors_red_blue.css
new file mode 100644
index 00000000..c4a833f6
--- /dev/null
+++ b/_static/pretext/css/colors_red_blue.css
@@ -0,0 +1,35 @@
+
+:root {
+ --documenttitle: #932919;
+ --bodytitle: #A62E1C; /* often a darker version of documenttitle */
+ --bodysubtitle: #2B5F82; /* can be the same as bodytitle */
+ --bodytitlehighlight: #e0e9ff; /* light, and contrasting to bodytitle */
+ --bodysubtitlehighlight: #fce5e4; /* light, and contrasting to bodysubtitle */
+ /*
+ The bodytitle and bodysubtitle colors must have at least a 3:1 contrast
+ ratio with black, and at least 5:1 ratio with with the corresponding highlight.
+ (The second condition will guarantee an adequate contrast with white.)
+ */
+
+ --chaptertoc: #3572a0;
+ --chaptertoctext: white;
+ --chaptertocactive: var(--documenttitle); /* often the same as documenttitle */
+ --chaptertoctextactive: white;
+ --sectiontoc: white; /* can also write it as #ffffff */
+ --sectiontoctext: #662211;
+ --sectiontocactive: var(--documenttitle); /* often the same as documenttitle */
+ --sectiontoctextactive: white;
+ --tocborder: #185f65;
+
+ --highlighttoc: #671d12; /* often a dark version of documenttitle */
+ --highlighttoctext: white;
+ --highlighttocborder: var(--chaptertoc);
+
+ --videoplay: var(--bodytitle);
+ --assemblageborder: #5B2F82;
+ --assemblagebackground: #f5f8ff;
+
+ --knowlborder: var(--bodytitlehighlight);
+ --knowlbackground: var(--assemblagebackground);
+}
+
diff --git a/_static/pretext/css/colors_ruby_amethyst.css b/_static/pretext/css/colors_ruby_amethyst.css
new file mode 100644
index 00000000..57264cfb
--- /dev/null
+++ b/_static/pretext/css/colors_ruby_amethyst.css
@@ -0,0 +1,72 @@
+
+/*
+ There are five main choices that define a color scheme in the
+ HTML output of PreTeXt:
+ 1) A dark color for the title on each page
+ 2) A dark color for highlighted words in the body
+ 3) A dark color for other highlighted words in the body
+
+ In the CSS those are called 'documenttitle', 'bodytitle',
+ and 'bodysubtitle'.
+
+ The other two choices appear in the ToC.
+
+ Either:
+ 3) A dark color for each chapter background
+ 4) A dark color for the current section background
+ (Often the ToC section background equals documenttitle.
+
+ Or:
+ 3') A light color for each chapter background
+ 4') A light color for the current section background
+
+ In the CSS those are called 'chaptertoc' and 'sectiontoc',
+ respectively.
+
+ With 3) and 4) you need white letters to go on the dark
+ background, and with 3') and 4') you need dark letters
+ on the light background. Set the color of those letters
+ with 'chaptertoctext'.
+
+ In addition to the above four choices, you need to
+ choose a contrasting shade of each color, to be used
+ for highlighting, borders, etc.
+
+ In the future you will be able to choose colors for assemblages
+ and for knowl output
+*/
+
+:root {
+ --documenttitle: #9e0c0f;
+ --bodytitle: #8e0a0c;
+ --bodysubtitle: #A62E1C;
+ --bodytitlehighlight: #d0f9ff; /* light, and contrasting to bodytitle */
+ --bodysubtitlehighlight: #fce5e4; /* light, and contrasting to bodysubtitle */
+ /*
+ The bodytitle and bodysubtitle colors must have at least a 3:1 contrast
+ ratio with black, and at least 5:1 ratio with with the corresponding highlight.
+ (The second condition will guarantee an adequate contrast with white.)
+ */
+
+ --chaptertoc: #6f080b;
+ --chaptertoctext: white;
+ --chaptertocactive: var(--documenttitle); /* often the same as documenttitle */
+ --chaptertoctextactive: white;
+ --sectiontoc: white; /* can also write it as #ffffff */
+ --sectiontoctext: #6f080b;
+ --sectiontocactive: var(--documenttitle); /* often the same as documenttitle */
+ --sectiontoctextactive: white;
+ --tocborder: #152f53;
+
+ --highlighttoc: #008099; /* often a dark version of documenttitle */
+ --highlighttoctext: white;
+ --highlighttocborder: var(--chaptertoc);
+
+ --videoplay: var(--bodytitle);
+ --assemblageborder: #1100aa;
+ --assemblagebackground: #f5f8ff;
+
+ --knowlborder: var(--bodytitlehighlight);
+ --knowlbackground: var(--assemblagebackground);
+}
+
diff --git a/_static/pretext/css/colors_ruby_emerald.css b/_static/pretext/css/colors_ruby_emerald.css
new file mode 100644
index 00000000..cb92c044
--- /dev/null
+++ b/_static/pretext/css/colors_ruby_emerald.css
@@ -0,0 +1,72 @@
+
+/*
+ There are five main choices that define a color scheme in the
+ HTML output of PreTeXt:
+ 1) A dark color for the title on each page
+ 2) A dark color for highlighted words in the body
+ 3) A dark color for other highlighted words in the body
+
+ In the CSS those are called 'documenttitle', 'bodytitle',
+ and 'bodysubtitle'.
+
+ The other two choices appear in the ToC.
+
+ Either:
+ 3) A dark color for each chapter background
+ 4) A dark color for the current section background
+ (Often the ToC section background equals documenttitle.
+
+ Or:
+ 3') A light color for each chapter background
+ 4') A light color for the current section background
+
+ In the CSS those are called 'chaptertoc' and 'sectiontoc',
+ respectively.
+
+ With 3) and 4) you need white letters to go on the dark
+ background, and with 3') and 4') you need dark letters
+ on the light background. Set the color of those letters
+ with 'chaptertoctext'.
+
+ In addition to the above four choices, you need to
+ choose a contrasting shade of each color, to be used
+ for highlighting, borders, etc.
+
+ In the future you will be able to choose colors for assemblages
+ and for knowl output
+*/
+
+:root {
+ --documenttitle: #9e0c0f;
+ --bodytitle: #8e0a0c;
+ --bodysubtitle: #A62E1C;
+ --bodytitlehighlight: #d9ffe9; /* light, and contrasting to bodytitle */
+ --bodysubtitlehighlight: #fce5e4; /* light, and contrasting to bodysubtitle */
+ /*
+ The bodytitle and bodysubtitle colors must have at least a 3:1 contrast
+ ratio with black, and at least 5:1 ratio with with the corresponding highlight.
+ (The second condition will guarantee an adequate contrast with white.)
+ */
+
+ --chaptertoc: #16a67d;
+ --chaptertoctext: white;
+ --chaptertocactive: var(--documenttitle); /* often the same as documenttitle */
+ --chaptertoctextactive: white;
+ --sectiontoc: white; /* can also write it as #ffffff */
+ --sectiontoctext: #6f080b;
+ --sectiontocactive: var(--documenttitle); /* often the same as documenttitle */
+ --sectiontoctextactive: white;
+ --tocborder: #152f53;
+
+ --highlighttoc: #6f080b; /* often a dark version of documenttitle */
+ --highlighttoctext: white;
+ --highlighttocborder: var(--chaptertoc);
+
+ --videoplay: var(--bodytitle);
+ --assemblageborder: #1100aa;
+ --assemblagebackground: #f5f8ff;
+
+ --knowlborder: var(--bodytitlehighlight);
+ --knowlbackground: var(--assemblagebackground);
+}
+
diff --git a/_static/pretext/css/colors_ruby_turquoise.css b/_static/pretext/css/colors_ruby_turquoise.css
new file mode 100644
index 00000000..17c6b314
--- /dev/null
+++ b/_static/pretext/css/colors_ruby_turquoise.css
@@ -0,0 +1,72 @@
+
+/*
+ There are five main choices that define a color scheme in the
+ HTML output of PreTeXt:
+ 1) A dark color for the title on each page
+ 2) A dark color for highlighted words in the body
+ 3) A dark color for other highlighted words in the body
+
+ In the CSS those are called 'documenttitle', 'bodytitle',
+ and 'bodysubtitle'.
+
+ The other two choices appear in the ToC.
+
+ Either:
+ 3) A dark color for each chapter background
+ 4) A dark color for the current section background
+ (Often the ToC section background equals documenttitle.
+
+ Or:
+ 3') A light color for each chapter background
+ 4') A light color for the current section background
+
+ In the CSS those are called 'chaptertoc' and 'sectiontoc',
+ respectively.
+
+ With 3) and 4) you need white letters to go on the dark
+ background, and with 3') and 4') you need dark letters
+ on the light background. Set the color of those letters
+ with 'chaptertoctext'.
+
+ In addition to the above four choices, you need to
+ choose a contrasting shade of each color, to be used
+ for highlighting, borders, etc.
+
+ In the future you will be able to choose colors for assemblages
+ and for knowl output
+*/
+
+:root {
+ --documenttitle: #9e0c0f;
+ --bodytitle: #8e0a0c;
+ --bodysubtitle: #A62E1C;
+ --bodytitlehighlight: #d0f9ff; /* light, and contrasting to bodytitle */
+ --bodysubtitlehighlight: #fce5e4; /* light, and contrasting to bodysubtitle */
+ /*
+ The bodytitle and bodysubtitle colors must have at least a 3:1 contrast
+ ratio with black, and at least 5:1 ratio with with the corresponding highlight.
+ (The second condition will guarantee an adequate contrast with white.)
+ */
+
+ --chaptertoc: #008099;
+ --chaptertoctext: white;
+ --chaptertocactive: var(--documenttitle); /* often the same as documenttitle */
+ --chaptertoctextactive: white;
+ --sectiontoc: white; /* can also write it as #ffffff */
+ --sectiontoctext: #6f080b;
+ --sectiontocactive: var(--documenttitle); /* often the same as documenttitle */
+ --sectiontoctextactive: white;
+ --tocborder: #152f53;
+
+ --highlighttoc: #6f080b; /* often a dark version of documenttitle */
+ --highlighttoctext: white;
+ --highlighttocborder: var(--chaptertoc);
+
+ --videoplay: var(--bodytitle);
+ --assemblageborder: #1100aa;
+ --assemblagebackground: #f5f8ff;
+
+ --knowlborder: var(--bodytitlehighlight);
+ --knowlbackground: var(--assemblagebackground);
+}
+
diff --git a/_static/pretext/css/edit.css b/_static/pretext/css/edit.css
new file mode 100644
index 00000000..236ced79
--- /dev/null
+++ b/_static/pretext/css/edit.css
@@ -0,0 +1,493 @@
+/* CAT */
+
+.edit_menu_holder {
+ position: relative;
+ left: 15em;
+ bottom: 1.5em;
+ z-index: 1000;
+}
+.edit_menu_holder li {
+ font-style: normal;
+}
+p > .edit_menu_holder,
+.creator > .edit_menu_holder {
+ display: inline;
+}
+p > .edit_menu_holder {
+ bottom: 4.2em;
+}
+#local_menu_holder {
+ position: relative;
+ left: 20em;
+ bottom: 1.5em;
+ z-index: 1000;
+}
+.edit_menu,
+#enter_choice {
+ background: #fee;
+ position: absolute;
+ left: 0;
+ white-space: nowrap;
+ z-index: 1000;
+ font-size: 95%;
+ font-weight: normal;
+}
+.edit_menu.past {
+ background: #ffe;
+ color: #999;
+}
+.past > li {
+ background: #fff9f9;
+ color: #aaa;
+}
+#enter_choice {
+ padding: 0.25em 0.5em 0 0.5em;
+ background: yellow;
+ bottom: -1.2em;
+ border-radius: 0.5em 0.5em 0 0;
+ font-style: italic;
+}
+.may_enter #enter_choice {
+ background: #ccccee;
+}
+.may_enter {
+ margin-top: 1.25em;
+ background: #eeeeff !important;
+}
+.may_enter > [data-editable] {
+ background: #feeedf !important;
+}
+.may_enter > [data-editable="99"] {
+ background: #ffffdd !important;
+}
+
+p > .edit_menu_holder > #enter_choice {
+ bottom: -2.7em;
+}
+blockquote > .edit_menu_holder > #enter_choice {
+ bottom: -1.2em;
+}
+blockquote.may_leave + .edit_menu_holder > #enter_choice {
+ bottom: -2.3em;
+}
+article.project-like > .edit_menu_holder > #enter_choice {
+ bottom: -0.5em;
+}
+article.theorem-like > .edit_menu_holder > #enter_choice,
+article.definition-like > .edit_menu_holder > #enter_choice {
+ bottom: -0.2em;
+}
+/*
+article.project-like > ol > .edit_menu_holder > #enter_choice {
+ bottom: -1.3em;
+}
+*/
+.ptx-content section article.project-like.may-enter > .heading,
+.ptx-content section article.project-like.may-leave > .heading {
+ background-color: inherit;
+}
+
+ol > .edit_menu_holder > #enter_choice {
+ bottom: -1.3em;
+}
+ol.may_leave + .edit_menu_holder > #enter_choice {
+ bottom: -3.3em;
+}
+li > .para > .edit_menu_holder > #enter_choice {
+ bottom: -4.1em;
+}
+#enter_choice[data-location="inline"] {
+ bottom: -0.2em;
+ left: -0.5em;
+}
+
+.edit_menu_holder + .para {
+ margin-top: 0;
+}
+li > .edit_menu_holder {
+ display: block;
+}
+.may_leave + .edit_menu_holder #enter_choice {
+ position: absolute;
+ padding: 0em 0.5em 0.25em 0.25em;
+ background: #FFD6D9;
+ bottom: -1.9em;
+ border-radius: 0 0 0.5em 0.5em;
+ list-style-type: none;
+ font-style: italic;
+}
+section.may_leave + .edit_menu_holder #enter_choice {
+ bottom: -3.3em;
+}
+article.may_leave + .edit_menu_holder #enter_choice {
+ bottom: -2.3em;
+}
+.may_leave + .edit_menu_holder #enter_choice li {
+ padding: 0;
+ padding-left: 0.25em;
+ padding-right: 0.25em;
+}
+
+.edit_menu li.chosen,
+.edit_menu #choose_current {
+ background: #ddf;
+ color: #000;
+}
+.edit_menu.past > .choose {
+ background: #eef;
+ color: #000;
+}
+.edit_menu {
+ margin-top: 0;
+ margin-bottom: 0;
+ padding-left: 0;
+ list-style-type: none;
+}
+.edit_menu li {
+ margin-top: 0;
+ padding-right: 1.4em;
+ padding-left: 0.4em;
+ padding-bottom: 0.1em;
+}
+.edit_menu li:last-of-type {
+ padding-bottom: 0.3em;
+}
+.edit_menu_holder ol.past {
+ box-shadow: -0.25em 0.25em 0 #ccc;
+}
+.edit_menu_holder ol:not(.past) {
+ border: 0.1em solid #999;
+ box-shadow: 0.15em 0.15em 0.05em #ccc;
+}
+.edit_menu li#choose_current {
+ background: #ddf;
+}
+.edit_menu li.choosen {
+ background: #ddf;
+}
+.edit_menu li ol {
+ position: absolute;
+ left: 8em;
+/*
+ bottom: -0.5em;
+*/
+ top: -3.5em;
+ margin-top: 0;
+ padding-left: 0;
+ list-style-type: none;
+ background: #fdd;
+}
+.edit_menu li ol li {
+ position: relative;
+}
+.edit_menu li ol ol {
+ position: absolute;
+ top: -1.5em;
+ z-index: 500;
+}
+.edit_menu li.choose {
+ background: #eef;
+}
+.edit_menu .wrap_to_submenu {
+ float: right;
+}
+.past > li > .wrap_to_submenu {
+ display: none;
+}
+.edit_menu .to_submenu {
+ position: absolute;
+ padding-left: 0.5em;
+}
+.text_source {
+ font-size: 95%;
+}
+.may_select > .para:first-of-type {
+ margin-top: 0;
+}
+.sbspanel.may_select {
+ margin-top: 0;
+}
+sbspanel:empty { /* can only happen when partially created */
+ height: 10em;
+ background-color: rgb(221, 221, 255);
+}
+.ptx-content .sbspanel:empty + .sbspanel:empty {
+ background-color: #dfd;
+}
+.ptx-content .sbspanel:empty + .sbspanel:empty + .sbspanel:empty {
+ background-color: #eee;
+}
+
+#actively_editing {
+ margin-top: 1em;
+}
+#actively_editing_id {
+ float: right;
+ width: 8em;
+ margin-bottom: 0;
+}
+#actively_editing[data-component="title"] {
+ display: inline-block;
+ min-width: 10em;
+ margin-top: 0;
+ margin-left: 0.75em;
+ background: #fff;
+ border: 1px dotted black;
+}
+.title > .edit_menu_holder {
+ display: inline;
+}
+.space + .title {
+ margin-left: 0.5em;
+}
+
+.edit_menu .in_edit_tree {
+ border: none;
+}
+.edit_menu .in_edit_tree:before,
+.edit_menu .in_edit_tree:before {
+ display: none;
+}
+
+.in_edit_tree > .workspace {
+ min-height: 3em;
+ background: #efe;
+ border: 1px dotted #aaa;
+}
+.in_edit_tree > .workspace::before {
+ content: "optional workspace (in printed worksheet)";
+ font-size: 90%;
+ font-style: italic;
+ padding-left: 0.25em;
+}
+/* why not collapse the next groups of 4? */
+.in_edit_tree > .placeholder.proof,
+.in_edit_tree > .placeholder.hint,
+.in_edit_tree > .placeholder.answer,
+.in_edit_tree > .placeholder.solution {
+ min-height: 1em;
+ background: #fee;
+}
+.in_edit_tree > .placeholder.proof::before,
+.in_edit_tree > .placeholder.hint::before,
+.in_edit_tree > .placeholder.answer::before,
+.in_edit_tree > .placeholder.solution::before {
+ font-size: 90%;
+ font-style: italic;
+ padding-left: 0.25em;
+}
+.in_edit_tree > .placeholder.proof::before {
+ content: "optional proof";
+}
+.in_edit_tree > .placeholder.hint::before {
+ content: "optional hint";
+}
+.in_edit_tree > .placeholder.answer::before {
+ content: "optional answer";
+}
+.in_edit_tree > .placeholder.solution::before {
+ content: "optional solution";
+}
+
+.group_description {
+ font-size: 75%;
+ font-color: #caa;
+ font-style: italic;
+}
+[data-objecttype="theorem-like"] .para {
+ font-style: italic;
+}
+[data-objecttype="theorem-like"] .para ol {
+ font-style: normal;
+}
+
+.paragraph_input {
+ width: 98%;
+ min-height: 3em;
+ border: 3px dashed #999;
+}
+.paragraph_input:focus {
+ border: 1px solid #000;
+ padding: 2px;
+}
+.displaymath_input {
+ width: 98%;
+ min-height: 3em;
+ border: 3px dotted #399;
+}
+.displaymath_input:focus {
+ border: 1px dashed #900;
+ padding: 2px;
+}
+.edit_inline_math {
+ font-family: "Inconsolata";
+ margin-left: 0.5em;
+ margin-right: 0.5em;
+ background-color: #ddf;
+}
+#actively_editing em {
+ background-color: #fdf;
+}
+#actively_editing q {
+ background-color: #eef;
+}
+#actively_editing span {
+ background-color: #dfd;
+}
+#actively_editing code {
+ background-color: #ddd;
+}
+#actively_editing dfn {
+ background-color: #fee;
+}
+.ptx-content section.may_enter > .heading {
+ margin-top: 0;
+}
+.ptx-content #deleting {
+ transition: all 0.5s;
+ background: #666;
+ height: 5em;
+ margin-right: 20em;
+ margin-left: 15em;
+ font-size: 5%;
+ box-shadow: -2px -1px 1px #770000;
+}
+
+.ptx-content .phantomobject.move {
+ margin-left: 5em;
+ margin-right: 2em;
+ padding: 1.5em;
+ box-shadow: 1em 0.7em rgba(180, 180, 180,0.96);
+ margin-top: -1.5em;
+ margin-bottom: -1.5em;
+ z-index: 100;
+ background: rgba(239, 223,256,0.9);
+ font-size: 110%;
+ font-style: italic;
+ position: relative;
+}
+.ptx-content .phantomobject.move + .para {
+ margin-top: 0;
+}
+.ptx-content .phantomobject.move .done {
+ margin-left: 1em;
+ margin-top: 0em;
+}
+.ptx-content .phantomobject.move .movearrow {
+ position: relative;
+ z-index: 101;
+ background: rgba(243, 225,256,1);
+}
+.ptx-content .phantomobject.move .movearrow .arrow {
+ font-size: 200%;
+ margin-right: 0.6em;
+ margin-top: -0.5em;
+}
+.ptx-content .phantomobject.move .movearrow .para {
+ margin-top: 0.4em;
+}
+.ptx-content .phantomobject.move .movearrow .para.up {
+ margin-top: 0;
+ margin-bottom: -1em;
+}
+.ptx-content .phantomobject.move .movearrow .para.down {
+ margin-top: 0.0em;
+}
+.ptx-content .phantomobject.move .movearrow > * {
+ display: inline-block;
+}
+
+.ptx-content .ref.tmp {
+ background: #dfd;
+}
+.ptx-content .may_enter q {
+ background: #ddf;
+}
+.ptx-content .may_enter abbr {
+ background: #adf;
+}
+
+/* new editing css */
+.ptx-content .para.may_select {
+ display: block !important;
+}
+.ptx-content .may_select {
+ background: #fef;
+ border: 2px solid #999;
+}
+
+.ptx-content .onepage.in_edit_tree,
+.ptx-content .in_edit_tree .onepage {
+ border: 6px double #600 !important;
+ padding: 0.5em;
+}
+
+
+.ptx-content .para.in_edit_tree,
+.ptx-content section.in_edit_tree,
+.ptx-content article.in_edit_tree {
+ border: 3px solid #666 !important;
+ padding: 0.5em;
+}
+.ptx-content .in_edit_tree .para,
+.ptx-content .in_edit_tree .displaymath,
+.ptx-content .in_edit_tree section,
+.ptx-content .in_edit_tree article {
+ border: 3px solid blue !important;
+ padding: 0.5em;
+}
+.ptx-content .in_edit_tree .para {
+ border: 3px solid #4a9 !important;
+ background: #ffd;
+ padding: 0.5em;
+}
+.ptx-content .in_edit_tree figcaption,
+.ptx-content .in_edit_tree blockquote {
+ border: 3px dotted #9a0 !important;
+ background: #efd;
+ padding: 0.5em;
+}
+.ptx-content .in_edit_tree img {
+ border: 3px dotted #09a !important;
+ background: #fbd;
+ padding: 0.5em;
+}
+.ptx-content .in_edit_tree .displaymath,
+.ptx-content .in_edit_tree figure {
+ border: 3px solid #92a !important;
+ background: #efe;
+ padding: 0.5em;
+}
+/* over-rive overflow-x on small screens */
+.ptx-content.canedit .displaymath,
+.ptx-content.canedit .figure,
+.ptx-content.canedit figure.figure-like figcaption {
+ overflow: initial;
+}
+.ptx-content .in_edit_tree * section,
+.ptx-content .in_edit_tree * article {
+ border: 3px solid green !important;
+ padding: 0.5em;
+}
+.ptx-content .in_edit_tree * * .para,
+.ptx-content .in_edit_tree * * .displaymath,
+.ptx-content .in_edit_tree * * section,
+.ptx-content .in_edit_tree * * article {
+ border: 3px dashed grey !important;
+ padding: 0.5em;
+}
+
+.ptx-content .in_edit_tree .para.mp,
+.ptx-content .in_edit_tree .para.fp {
+ margin-top: 0;
+}
+
+.ptx-content .in_edit_tree .heading + .para {
+ display: block;
+}
+.ptx-content .in_edit_tree::before,
+.ptx-content .in_edit_tree::after,
+.ptx-content .in_edit_tree *::before,
+.ptx-content .in_edit_tree *::after {
+ all: reset;
+}
diff --git a/_static/pretext/css/epub.css b/_static/pretext/css/epub.css
new file mode 100644
index 00000000..31807fff
--- /dev/null
+++ b/_static/pretext/css/epub.css
@@ -0,0 +1,58 @@
+
+.ptx-content.epub img {
+ display: block;
+}
+.ptx-content.epub .solutions {
+ margin-top: 1em;
+}
+
+.ptx-content.epub .solutions .solution .type,
+.ptx-content.epub .solutions .answer .type {
+ font-family: "PT Serif", "Times New Roman", Times, serif;
+ font-weight: bold;
+}
+.ptx-content.epub .solutions .solution .type + .period,
+.ptx-content.epub .solutions .answer .type + .period {
+ margin-right: 0.75em;
+}
+.ptx-content.epub .solutions .solution .type + p,
+.ptx-content.epub .solutions .answer .type + p {
+ display: inline;
+}
+
+/* sage cell code goes in a pre. What else goes there? */
+.ptx-content pre {
+ font-size: 95%;
+ padding-top: 0.3em;
+ padding-bottom: 0.5em;
+ padding-left: 0.5em;
+ background: #f0f0f0;
+}
+.ptx-content pre.code.input {
+ background: #f0f0ff;
+}
+.ptx-content pre.code.output {
+ background: #f0fff0;
+}
+
+
+/* these "break-(before/after) might not actually do anything */
+.ptx-content section > .heading {
+ display: block;
+ margin-top: 0;
+ break-after: avoid !important;
+}
+.ptx-content section > .heading + p {
+ display: block;
+ break-before: avoid !important;
+}
+.ptx-content figcaption {
+ break-before: avoid !important;
+}
+.ptx-content figure .image-box,
+.ptx-content figure .tabular-box {
+ break-after: avoid !important;
+}
+.ptx-content figure {
+ break-inside: avoid !important;
+}
diff --git a/_static/pretext/css/features.css b/_static/pretext/css/features.css
new file mode 100644
index 00000000..7420b57e
--- /dev/null
+++ b/_static/pretext/css/features.css
@@ -0,0 +1,324 @@
+
+/*
+ *
+ * login
+ *
+ */
+
+ /* Bordered form */
+.login form {
+ border: 3px solid #f1f1f1;
+}
+
+/* Full-width inputs */
+.login input[type=text], input[type=password] {
+ width: 100%;
+ padding: 12px 20px;
+ margin: 8px 0;
+ display: inline-block;
+ border: 1px solid #ccc;
+ box-sizing: border-box;
+}
+
+/* Set a style for all buttons */
+.login button {
+ background-color: #4CAF50;
+ color: white;
+ padding: 14px 20px;
+ margin: 8px 0;
+ border: none;
+ cursor: pointer;
+ width: 100%;
+}
+
+.login .instructions {
+ padding-left: 1em;
+}
+
+/* Add a hover effect for buttons */
+.login button:hover {
+ opacity: 0.8;
+}
+
+/* Add padding to containers */
+.login .container {
+ padding: 16px;
+ padding-bottom: 32px;
+}
+
+/* The "Forgot password" text */
+.login span.psw {
+ float: right;
+}
+
+ /* The Modal (background) */
+.login.modal {
+ position: fixed; /* Stay in place */
+ z-index: 1; /* Sit on top */
+ left: 0;
+ top: 0;
+ width: 100%; /* Full width */
+ height: 100%; /* Full height */
+ overflow: auto; /* Enable scroll if needed */
+ background-color: rgb(0,0,0); /* Fallback color */
+ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+ padding-top: 60px;
+}
+
+.survey.modal {
+ position: fixed; /* Stay in place */
+ z-index: 1; /* Sit on top */
+ left: 0;
+ top: 0;
+ width: 100%; /* Full width */
+ height: 100%; /* Full height */
+ overflow: auto; /* Enable scroll if needed */
+ background-color: rgb(0,0,0); /* Fallback color */
+ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+ padding-top: 60px;
+}
+
+.survey .instructions {
+ width: 80%;
+ margin: 1em auto 1em auto;
+ background: #eef;
+ font-style: italic;
+ text-align: center;
+}
+.surveyresponse {
+ display: block;
+ width: 80%;
+ margin: 1em auto 1em auto;
+ background: #efe;
+ padding: 0.5em;
+}
+.surveyresponse + .surveyresponse {
+ background: #ffe;
+}
+
+/* Modal Content/Box */
+.survey .modal-content,
+.login .modal-content {
+ background-color: #fefefe;
+ margin: 5px auto; /* 15% from the top and centered */
+ border: 1px solid #888;
+ width: 50%; /* Could be more or less, depending on screen size */
+}
+
+/* The Close Button */
+.login .close {
+ /* Position it in the top right corner outside of the modal */
+ position: absolute;
+ right: 25px;
+ top: 0;
+ color: #000;
+ font-size: 35px;
+ font-weight: bold;
+}
+
+/* Close button on hover */
+.login .close:hover,
+.login .close:focus {
+ color: red;
+ cursor: pointer;
+}
+
+/* Add Zoom Animation */
+.login .animate {
+ animation: animatezoom 0.6s
+}
+
+.login-link {
+ position: absolute;
+ right: 10px;
+ top: 10px;
+ cursor: pointer;
+}
+.login-link > * {
+ visibility: hidden;
+}
+.login-link:hover > * {
+ visibility: visible;
+ background-color: #fcc;
+}
+.login-link .logout {
+ visibility: visible;
+ background-color: #fcc;
+}
+
+.dontlogout {
+ float: right;
+ font-size: 80%;
+ cursor: pointer;
+}
+
+.dontlogout:hover {
+ background-color: #fdd;
+}
+
+/*
+ *
+ * reading questions
+ *
+ */
+
+.rq_answer .given_answer {
+ background: #ffd;
+}
+
+#rq_submit {
+ padding: 3px 5px;
+ border-radius: 0.5em;
+}
+#rq_submit.submitted {
+ background: #EFE;
+ color: #BBB;
+}
+
+.addcontent, .action, .submit {
+ cursor: pointer;
+}
+
+.addcontent:hover, .action:hover {
+ background: #eff;
+}
+
+/*
+.action + .action {
+ margin-left: 0.25em;
+ display: block;
+}
+.action + .amhelp {
+ margin-left: 0.25em;
+ display: block;
+}
+*/
+
+.input_controls {
+ font-family: sans-serif;
+ font-weight: lighter;
+ font-size: 90%;
+ background: #fff;
+ padding-left: 0;
+ padding-bottom: 0;
+ margin-top: 0;
+/*
+ margin-bottom: -1.6em;
+ display: inline;
+*/
+ position: absolute;
+}
+.rq_answer_text {
+ display: inline;
+}
+textarea {
+ border-width: 0.1em;
+ margin-bottom: 0.3em;
+}
+.input_controls .action {
+ border: 1px solid #aaa;
+ display: inline;
+ /* border-radius: 3px;
+*/
+ padding: 1px 2px;
+}
+.input_controls .action.amhelp {
+ margin-left: 21.9em;
+}
+.clear_item:hover {
+ background: #fdd;
+}
+
+.save_item:hover, .edit_item:hover {
+ background: #dfd;
+}
+
+.hidecontrols {
+ display: none;
+}
+
+.readingquestion_make_answer.instructor {
+ margin-left:1em;
+ font-size:80%;
+ color:#a0a;
+}
+.readingquestion_make_answer.student {
+ display: block;
+ margin-left: 10%;
+ margin-right: 11%;
+ width: 75%;
+ height: 63px;
+ border: 1px solid #999;
+ color: #999;
+}
+
+.given_answer {
+ font-family: monospace;
+ font-family: "Lucida Console", Monaco, monospace;
+ white-space: pre-wrap;
+ margin-top: 0.5em;
+ margin-bottom: -0.5em;
+ min-height: 2.72em;
+}
+textarea.rq_answer_text {
+ font-family: "Lucida Console", Monaco, monospace;
+ resize: vertical;
+ font-size: inherit;
+}
+.compiled_answers {
+ border: 0.7em solid #dfd;
+ border-top: 0.35em;
+ margin-top: 1em;
+}
+.s_id {
+ font-size: 80%;
+ padding-top: 0.4em;
+ padding-left: 0.5em;
+ display: inline;
+}
+.rq_sub_time {
+ font-size: 70%;
+ padding-top: 0.5em;
+ padding-right: 0.5em;
+ float: right;
+ display: inline;
+}
+.s_ans {
+ font-family: "Lucida Console", Monaco, monospace;
+ white-space: pre-wrap;
+ width: 480px;
+ margin-left: 3em;
+ padding-bottom: 0.5em;
+}
+.noanswer .s_ans {
+ font-style: italic;
+ font-size: 80%;
+ margin-left: 4em;
+}
+.one_answer:nth-of-type(odd) {
+ background: #dfd;
+}
+
+/*
+ *
+ * highlights
+ *
+ */
+
+#hlmenu {
+ z-index: 1000;
+}
+#hlmenu *:hover {
+ cursor: pointer;
+}
+
+span.hl { background: yellow; }
+#hlmenu { position: absolute; top: 300px; left: 200px;}
+#hlmenu { padding: 8px; background: #FFF; }
+#hlmenu { box-shadow: 8px 10px 5px #888; border: 1px solid #aaa;}
+#hlmenu .hldelete { background: #fdd; }
+#hlmenu .hldelete:hover { background: #fbb; }
+#hlmenu .hlcopy { background: #ddf; }
+#hlmenu .hlcopy:hover { background: #bbf; }
+#hlmenu .dismiss:hover { background: #ff9; }
+#hlmenu > div { padding: 4px; font-size: 90%}
diff --git a/_static/pretext/css/kindle.css b/_static/pretext/css/kindle.css
new file mode 100644
index 00000000..9c178647
--- /dev/null
+++ b/_static/pretext/css/kindle.css
@@ -0,0 +1,103 @@
+
+.ptx-content.epub img {
+ display: block;
+}
+.ptx-content.epub .solutions {
+ margin-top: 1em;
+}
+
+.ptx-content.epub .solutions .solution .type,
+.ptx-content.epub .solutions .answer .type {
+ font-family: "PT Serif", "Times New Roman", Times, serif;
+ font-weight: bold;
+}
+.ptx-content.epub .solutions .solution .type + .period,
+.ptx-content.epub .solutions .answer .type + .period {
+ margin-right: 0.75em;
+}
+.ptx-content.epub .solutions .solution .type + p,
+.ptx-content.epub .solutions .answer .type + p {
+ display: inline;
+}
+
+/* default behavior is excessive space below display math. */
+/* should the selector be .mjpage__block? */
+.ptx-content .mjpage + p {
+ margin-top: -0.5em !important;
+}
+.ptx-content .mjpage {
+ margin-bottom: 0 !important;
+}
+/* align inline math baseline */
+.ptx-content .mjpage {
+ vertical-align: -.68ex;
+}
+
+.ptx-content .solution-like > .type {
+ font-weight: bold;
+}
+.ptx-content .solution-like .type + p {
+ display: inline;
+}
+
+/* Greg's L was a line too long */
+.ptx-content article.theorem-like::after,
+.ptx-content article.definition-like::after,
+.ptx-content article.example-like::after,
+.ptx-content article.project-like::after,
+.ptx-content article.remark-like::after,
+.ptx-content article.computation-like::after {
+ margin-top: -1em;
+}
+
+.ptx-content .mjpage {
+ vertical-align: -.68ex;
+}
+
+.ptx-content section {
+ padding-top: 0 !important;
+}
+.ptx-content .subsection {
+ margin-top: 1.5em !important;
+}
+
+/* sage cell code goes in a pre. What else goes there? */
+.ptx-content pre {
+ font-size: 95%;
+ padding-top: 0.3em;
+ padding-bottom: 0.5em;
+ padding-left: 0.5em;
+ background: #f0f0f0;
+}
+.ptx-content pre.code.input {
+ background: #f0f0ff;
+}
+.ptx-content pre.code.output {
+ background: #f0fff0;
+}
+
+
+/* these "break-(before/after) might not actually do anything */
+.ptx-content section article > .heading,
+.ptx-content section > .heading {
+ display: block;
+ margin-top: 0;
+ break-after: avoid !important;
+}
+.ptx-content section > .heading + p,
+.ptx-content section article > .heading + p,
+.ptx-content section article > .heading + .introduction {
+ display: block;
+ break-before: avoid !important;
+}
+.ptx-content figcaption {
+ break-before: avoid !important;
+}
+.ptx-content figure .image-box,
+.ptx-content figure .tabular-box {
+ break-after: avoid !important;
+}
+.ptx-content figure {
+ break-inside: avoid !important;
+}
+
diff --git a/_static/pretext/css/knowls_default.css b/_static/pretext/css/knowls_default.css
new file mode 100644
index 00000000..dd7d5286
--- /dev/null
+++ b/_static/pretext/css/knowls_default.css
@@ -0,0 +1,230 @@
+/*
+ main knowls style
+*/
+
+[data-knowl] {
+ display: inline;
+ position: relative;
+ cursor: pointer;
+ color: #9c2310;
+ padding: 0px 2px 0px 2px;
+ margin: 0;
+ text-decoration: none;
+ margin-bottom: 1px;
+/*
+ margin-bottom: 0;
+*/
+ font-weight: 500;
+ white-space: nowrap;
+ border-bottom: none;
+ border-top-left-radius: 3px;
+ border-top-right-radius: 3px;
+ transition-property: background-color;
+ transition-duration: 0ms;
+}
+table [data-knowl] {
+ white-space: pre-line;
+}
+
+[data-knowl]:hover, [data-knowl]:active, [data-knowl].active {
+ color: #8a1200;
+ background: #ffedeb;
+/*
+ margin-bottom: 0;
+*/
+ border-bottom: none;
+}
+
+[data-knowl]::after, [data-knowl]:hover::after, [data-knowl].active::after {
+ content: "";
+ position: absolute;
+ top: 0;
+ bottom: 1px;
+ right: 2.4px;
+ left: 2.4px;
+ border-bottom: 1px dotted #9c2310;
+ transition-property: left, right;
+ transition-duration: 0ms;
+ z-index: 0;
+}
+/* is the next only for a proof or other content that is only a knowl? */
+article > [data-knowl]::after, article > [data-knowl]:hover::after, article > [data-knowl].active::after,
+ section > details > summary > .heading, article + details > summary > .heading {
+ content: "";
+ position: absolute;
+ top: 0;
+ bottom: 1px;
+ right: 8.4px;
+ right: 0.6em;
+ left: 2.4px;
+ border-bottom: 1px dotted #9c2310;
+ transition-property: left, right;
+ transition-duration: 0ms;
+ z-index: 0;
+}
+
+[data-knowl].fn-knowl {
+ padding-left: 0;
+ padding-right: 0;
+ margin-right: 2px;
+}
+[data-knowl].fn-knowl::after {
+ bottom: 7px;
+}
+
+.knowl-error {
+ color: red;
+ border-bottom: 0;
+}
+.knowl-output {
+ background: #f5f5ff;
+ border: 10px solid #ddf;
+ border-radius: 10px;
+ padding: 0;
+ margin-top: 10px;
+ scroll-margin-top: 60px; /* height of header */
+}
+
+.knowl-output.original {
+ background: #f8f8f8;
+ border: none;
+/* border-left: 1px solid #666;
+*/
+ border-radius: 0;
+ padding: 0;
+ margin-top: 10px;
+}
+.knowl-output.original .knowl-content {
+ padding-top: 0;
+ padding-bottom: 0;
+ margin-bottom: 0;
+}
+/*
+.knowl-output.original:after {
+ content: '';
+ display: block;
+ padding-top: 0.35em;
+}
+*/
+.example-like .knowl-output.original {
+ background: inherit;
+}
+
+.knowl-output--hide {
+ display: none;
+}
+
+.knowl-output__error .para:first-child {
+ margin-top: 0;
+}
+
+.knowl-output__error a {
+ text-decoration: underline;
+}
+
+.knowl-output .knowl-output {
+ border-width: 6px;
+ background: #fffff5;
+ border-radius: 4px;
+ margin-bottom: -3px;
+ margin-left: -7px;
+ margin-right: -7px;
+}
+.knowl-output .knowl-output .knowl-output {
+ background: #fff5ff;
+}
+.knowl-output .knowl-output .knowl-output .knowl-output {
+ background: #fafffa;
+}
+.knowl-footer {
+ position: relative;
+ bottom: -9px;
+ font-size: x-small;
+ background: #ddf;
+ color: grey;
+ padding: 0 0 0 12px;
+ margin: -10px 0 0 0;
+}
+.knowl-footer a {
+ color: #006;
+}
+.knowl-footer a:hover {
+ background: none;
+ color: #88f;
+}
+/* .knowl-footer:after {
+ content: "\2002";
+} */
+
+.knowl-output .knowl-output .knowl-footer {
+ bottom: -5px;
+ margin: -5px 0 0 0;
+}
+
+.knowl-output + .knowl-output {
+ margin-top: 0;
+}
+.knowl-output + .knowl-output.original {
+ margin-top: 0.5em;
+}
+.knowl-content {
+ padding: 10px;
+ padding-bottom: 7px;
+}
+.knowl-content > *:first-child {
+ margin-top: 0;
+}
+
+/* sort of a hack for proof knows in theorem knowls */
+.ptx-content div.knowl .posterior a[data-knowl]:first-child {
+ padding: 0;
+}
+
+/* not sure where this was being used, but it made short knowls
+ * look bad, like the hint here:
+ * SAFurtherReading.html
+*/
+.ptx-content .knowl-output .knowl-content > *:last-child:not(.incontext) {
+ margin-bottom: 0.5em;
+}
+
+/* No Greg's L in knowls, to save space */
+
+.ptx-content .knowl-content > article.theorem-like,
+.ptx-content .knowl-content > article.definition-like,
+.ptx-content .knowl-content > article.example-like,
+.ptx-content .knowl-content > article.project-like,
+.ptx-content .knowl-content > article.objectives,
+.ptx-content .knowl-content > article.outcomes,
+.ptx-content .knowl-content > article.remark-like {
+ padding-left: 0;
+ border-left: none;
+}
+.ptx-content .knowl-content > article.theorem-like::after,
+.ptx-content .knowl-content > article.definition-like::after,
+.ptx-content .knowl-content > article.example-like::after,
+.ptx-content .knowl-content > article.project-like::after,
+.ptx-content .knowl-content > article.objectives::after,
+.ptx-content .knowl-content > article.outcomes::after,
+.ptx-content .knowl-content > article.remark-like::after {
+ content: '';
+ border-bottom: none;
+ margin: 0;
+ padding: 0;
+ width: 0;
+}
+
+/* sup knowls are used for footnotes */
+/* the next 2 are obsolete, because (in PTX HTML) the structure is now a(sup), not sup(a) */
+sup [data-knowl] {
+ padding: 0px 0px 0px 3px;
+}
+
+sup .active[data-knowl] {
+ padding: 0px 0px 0px 3px;
+}
+
+sup [data-knowl]:hover {
+ padding: 0px 0px 0px 3px;
+}
+
diff --git a/_static/pretext/css/navbar_crc.css b/_static/pretext/css/navbar_crc.css
new file mode 100644
index 00000000..71618dd7
--- /dev/null
+++ b/_static/pretext/css/navbar_crc.css
@@ -0,0 +1,358 @@
+
+/* Since CRC loads after default, we need to suppress some of the default styling */
+
+.ptx-navbar .treebuttons .next-button, .ptx-navbar .treebuttons .up-button,
+.ptx-navbar .treebuttons .previous-button {
+ float: unset;
+}
+
+.ptx-navbar .previous-button, .ptx-navbar .up-button, .ptx-navbar .next-button,
+.ptx-navbar .index-button, .ptx-navbar .calculator-toggle, .ptx-navbar .toc-toggle {
+ width: unset;
+}
+
+.ptx-navbar .calculator-toggle {
+ margin-left: unset;
+ margin-right: unset;
+}
+
+.ptx-navbar .index-button .name {
+ padding-top: unset;
+}
+
+
+/* Generic and large screen layout */
+.ptx-navbar .toc-toggle, .ptx-navbar .index-button, .ptx-navbar .searchbox
+{
+}
+
+.ptx-navbar .nav-other-controls
+{
+ margin-left: 1em;
+}
+
+.ptx-navbar .treebuttons {
+ display: flex;
+ justify-content: right;
+}
+
+.ptx-navbar .button {
+ padding: 0 10px 0 10px;
+}
+
+.ptx-navbar .treebuttons .button {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.ptx-navbar .treebuttons .previous-button { padding-left: 0px; }
+.ptx-navbar .treebuttons .next-button { padding-right: 0px; }
+
+.ptx-navbar .nav-runestone-controls {
+ display: flex;
+}
+
+
+nav.ptx-navbar {
+ display: grid;
+ grid-column-gap: 0em;
+
+ grid-template-columns: auto auto auto 1fr 1fr auto;
+ grid-template-areas:
+ "MH-toc-area MH-extras-area1 ptx-searchbox MH-extras-area2 MH-page-navigation-area MH-preferences-area";
+ background-color: #fff;
+/*
+ padding: 20px 0px 0px 0px;
+*/
+ align-items: start;
+
+ border: 2px solid #ddd;
+ border-top: none;
+ border-bottom-left-radius: 5px;
+ border-bottom-right-radius: 5px;
+
+ font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ z-index: 20;
+
+ position: sticky;
+ top: 0;
+ align-items: end;
+ min-height: unset; /* to thwart navbar.less */
+ margin-bottom: 0; /* to thwart navbar.less */
+}
+nav.ptx-navbar::before,
+nav.ptx-navbar::after {
+ content: none; /* to thwart clearfix.less */
+}
+
+
+/* TOC button may be sized differently */
+.toc-toggle {
+ display: inline-block;
+ height: 32px;
+ color: #333;
+ font-family: inherit;
+ text-align: center;
+ font-size: .8em; /*11px; */
+ font-weight: 600;
+ line-height: 32px;
+ letter-spacing: .1rem;
+ text-transform: uppercase;
+ text-decoration: none;
+ white-space: nowrap;
+ background-color: #eee;
+ border-radius: 4px;
+ border: 1px solid #888;
+ cursor: pointer;
+ box-sizing: border-box;
+ margin-right: 2em;
+}
+
+.toc-toggle:hover {
+ background-color: #fafafa;
+ color: black;
+
+}
+
+
+/* .ptx-MH-toc-area */
+.toc-toggle {
+ grid-area: MH-toc-area;
+ justify-self: start;
+/*
+ align-self: start;
+*/
+}
+
+/* .ptx-MH-extras-area */
+.index-button {
+ grid-area: MH-extras-area1;
+ justify-self: right;
+}
+.calculator-toggle {
+ grid-area: MH-extras-area2;
+ justify-self: left;
+}
+.user-preferences-button {
+ justify-self: left;
+}
+
+/* .ptx-page-navigation-area */
+.treebuttons {
+ grid-area: MH-page-navigation-area;
+ justify-self: end;
+ display: flex;
+ width: 100%;
+/*
+ align-self: start;
+*/
+}
+
+.nav-runestone-controls {
+ grid-area: MH-preferences-area;
+ justify-self: end;
+ display: flex;
+ padding-left: 4em;
+}
+
+/* .ptx-navbar button, */
+.ptx-navbar .button {
+ display: inline-block;
+ height: 32px;
+ color: var(--bodytitle);
+ font-family: inherit;
+ text-align: center;
+ font-size: .8em;
+ font-weight: 600;
+ line-height: 32px;
+ letter-spacing: .1rem;
+ text-transform: uppercase;
+ text-decoration: none;
+ white-space: nowrap;
+ background-color: #eee;
+ border-radius: 4px;
+ border: 1px solid #888;
+ cursor: pointer;
+ box-sizing: border-box;
+}
+
+.ptx-navbar .searchbutton {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.searchresultsplaceholder {
+ left: calc(50vw - 300px);
+}
+
+
+/* Small screen layout */
+@media only screen and (max-width: 800px) {
+ .pretext .ptx-navbar {
+ position: fixed;
+ top: auto;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ padding: 0;
+ background: #ededed;
+ grid-template-columns: auto auto auto auto 1fr auto;
+/*
+ box-shadow: rgba(0, 0, 0, 0.3) 0px -2px 5px;
+*/
+ /* height: 44.2px; */
+
+ align-items: end;
+ }
+
+ /* .pretext .ptx-navbar .button {
+ width: 24.95%;
+ height: 36px;
+ line-height: 40px;
+ margin: 0;
+ }
+ .ptx-navbar .toc-toggle {
+ width: 25%;
+ margin: 0;
+ } */
+
+ .ptx-navbar .toc-toggle {
+ padding: 0 40px;
+ }
+
+ .ptx-navbar .nav-runestone-controls {
+ padding-left: 0;
+ }
+
+ .ptx-navbar .treebuttons {
+ justify-content: center;
+ }
+
+ .ptx-navbar :is(.toc-toggle, .previous-button, .up-button, .next-button, .calculator-toggle, .index-button) .name {
+ display: none;
+ }
+
+ .pretext .ptx-navbar :is(.calculator-toggle, .index-button) .icon {
+ display: inline-block;
+ }
+
+ .searchresultsplaceholder {
+ left: 10vw;
+ }
+}
+
+.ptx-navbar .button:hover {
+ background-color: #fafafa;
+ color: #888;
+}
+
+.ptx-navbar .button:focus {
+ outline: thin dotted #333;
+ outline-offset: -2px;
+}
+
+.ptx-navbar .button:active {
+ background-color: #e0e0e0;
+}
+
+
+.ptx-navbar .button.disabled {
+ opacity: .4;
+ color: #333333;
+ background: #ededed;
+ cursor: default;
+ box-shadow: none;
+}
+.ptx-navbar .toc-toggle .icon {
+ font-size: 1.5em;
+ position: relative;
+ bottom: -0.1em;
+ padding-left: 0;
+ padding-right: 0.4em;
+}
+.ptx-navbar .toc-toggle .name {
+ font-size: 1.0em;
+}
+
+.ptx-navbar .index-button .name {
+ /* Nada */
+}
+.ptx-navbar .index-button .icon {
+ display: none;
+}
+
+.ptx-navbar .calculator-toggle .name {
+ /* Nada */
+}
+.ptx-navbar .calculator-toggle .icon {
+ display: none;
+}
+
+.ptx-navbar .runestone-profile .name {
+ display: none;
+}
+
+.ptx-navbar .activecode-toggle .name {
+ display: none;
+}
+
+.pretext .ptx-navbar .dropdown {
+ height: 32px;
+}
+
+.ptx-navbar .up-button {
+ text-align: center;
+}
+
+.ptx-navbar .name {
+ display: inline-block;
+}
+.ptx-navbar .searchbutton .name {
+ display: none;
+ position: relative;
+ bottom: 0;
+}
+
+.ptx-navbar .icon {
+ display: inline-block;
+ font-size: 1.5em;
+}
+.ptx-navbar .previous-button .icon {
+ margin-left: 0.3em;
+ margin-right: 0.2em;
+}
+.ptx-navbar .up-button .icon {
+ margin-left: 0;
+ margin-right: 0.2em;
+}
+.ptx-navbar .next-button .icon {
+ margin-left: 0.2em;
+ margin-right: 0.3em;
+}
+.ptx-navbar .user-preferences-button {
+ padding: 0 0.8em 0 0.8em;
+ margin-left: 2em;
+ border: 1px solid #bababa;
+ width: 6em;
+}
+
+@media screen and (max-width: 800px) {
+ .ptx-navbar .toc-toggle .name,
+ .ptx-navbar .previous-button .name,
+ .ptx-navbar .up-button .name,
+ .ptx-navbar .up-button .disabled .name,
+ .ptx-navbar .next-button .name {
+ display: none;
+ }
+
+ .ptx-navbar .toc-toggle {
+ margin: 0;
+ }
+
+ .ptx-navbar .calculator-toggle .icon {
+ padding-top: 5px;
+ }
+}
+
diff --git a/_static/pretext/css/navbar_default.css b/_static/pretext/css/navbar_default.css
new file mode 100644
index 00000000..6dd8c1e1
--- /dev/null
+++ b/_static/pretext/css/navbar_default.css
@@ -0,0 +1,194 @@
+/*******************************************************************************
+ * Navbar Stylesheet
+ *******************************************************************************
+ *
+ * Authors: David Farmer, Rob Beezer
+ *
+ *******************************************************************************
+ */
+
+nav.ptx-navbar {
+ background: #ededed;
+ border: 0;
+ border-top: 1px solid #bababa;
+ border-bottom: 1px solid #bababa;
+ margin: 0;
+ z-index: 100;
+ font-family: "Open Sans";
+ overflow: visible;
+ display: flex;
+}
+
+.ptx-navbar .button {
+ font-size: 1.0em;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 0 10px;
+ gap: 10px;
+ min-height: 34px;
+
+ color: #333333;
+ background-color: #ededed;
+ border: 0;
+ border-right: 1px solid #bababa;
+
+ /* Disable accidental text-selection */
+ user-select: none;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.ptx-navbar .button:focus {
+ outline: thin dotted #333;
+ outline-offset: -2px;
+}
+
+.ptx-navbar .button:active {
+ box-shadow: rgba(0, 0, 0, 0.5) 0 2px 5px inset;
+}
+
+.ptx-navbar .button:hover {
+ background-color: #fafafa;
+}
+
+.ptx-navbar .button:active {
+ background-color: #e0e0e0;
+}
+
+.ptx-navbar .button.disabled {
+ opacity: .4;
+ color: #333333;
+ background: #ededed;
+ box-shadow: none;
+}
+
+.ptx-navbar .toc-toggle {
+ width: 240px;
+ gap: 0.4em;
+}
+
+.ptx-navbar .button .icon {
+ font-size: 1.5em;
+}
+
+.ptx-navbar :is(.treebuttons, .nav-runestone-controls) {
+ display: flex;
+}
+
+.ptx-navbar .treebuttons {
+ flex: 1 1 210px;
+ justify-content: end;
+}
+
+.ptx-navbar .nav-runestone-controls {
+ flex: 1 1 70px;
+ justify-content: end;
+}
+
+.pretext .navbar .dropdown {
+ height: 34px;
+}
+
+
+.ptx-navbar :is(.treebuttons, .nav-runestone-controls) > *:first-child {
+ border-left: 1px solid #bababa;
+}
+
+
+.ptx-navbar .treebuttons > * {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-width: 75px;
+}
+
+.ptx-navbar .treebuttons .icon {
+ margin: 0 -7px; /* chevrons have lots of horizontal padding */
+}
+
+.ptx-navbar :is(.index-button, .calculator-toggle) .icon {
+ display: none;
+}
+.ptx-navbar :is(.runestone-profile, .activecode-toggle, .searchbutton) .name {
+ display: none;
+}
+
+.ptx-navbar .index-button {
+ width: 70px;
+}
+
+.ptx-navbar .calculator-toggle {
+ width: 60px;
+ min-height: 32px;
+ text-align: center;
+ border-radius: 20px;
+ margin-left: 5px;
+ border: 2px solid #66f;
+ line-height: 25px;
+ margin-top: 1px;
+ background-color: #eef;
+}
+
+.ptx-navbar .calculator-toggle.open {
+ background: #fee;
+ border: 2px solid #f66;
+}
+
+@media screen and (max-width: 800px) {
+ .ptx-navbar {
+ position: fixed;
+ top: auto;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ background: #ededed;
+ box-shadow: rgba(0, 0, 0, 0.3) 0px -2px 5px;
+ }
+
+ .ptx-navbar .nav-runestone-controls {
+ flex: 0;
+ }
+ .ptx-navbar .toc-toggle {
+ flex: 2 1 100px;
+ }
+ .ptx-navbar .treebuttons {
+ flex: 3 1 150px; /* 3:2 ratio with toc-toggle */
+ }
+ .ptx-navbar .treebuttons > * {
+ flex: 1 1;
+ min-width: 35px
+ }
+ .ptx-navbar .index-button {
+ display: none;
+ }
+
+ .ptx-navbar :is(.treebuttons) > *:first-child {
+ border-left: 0;
+ }
+
+ .ptx-navbar :is(.toc-toggle, .previous-button, .up-button, .next-button, .calculator-toggle, .index-button) .name {
+ display: none;
+ }
+
+ .pretext .ptx-navbar :is(.calculator-toggle, .index-button) .icon {
+ display: inline-block;
+ }
+
+ .ptx-navbar .nav-runestone-controls > *:first-child {
+ border-left: 0
+ }
+
+ .ptx-navbar .calculator-toggle {
+ width: auto;
+ height: 35px;
+ border-radius: 0;
+ margin-left: 0;
+ border: 0;
+ border-right: 1px solid #bababa;
+ line-height: inherit;
+ margin-top: 0;
+ background-color: inherit;
+ }
+}
\ No newline at end of file
diff --git a/_static/pretext/css/navbar_wide.css b/_static/pretext/css/navbar_wide.css
new file mode 100644
index 00000000..62299356
--- /dev/null
+++ b/_static/pretext/css/navbar_wide.css
@@ -0,0 +1,39 @@
+@import url("navbar_default.css");
+
+
+:root {
+ --nav-background-color: #ededed;
+}
+
+.pretext .ptx-navbar {
+ max-width: 100%;
+ margin: 0 auto;
+ display: flex;
+ width: var(--page-width);
+ background: var(--nav-background-color);
+ border-top: 0;
+ box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
+}
+
+.pretext .ptx-navbar .toc-toggle {
+ border-left: 0;
+}
+
+.ptx-navbar .calculator-toggle {
+ width: auto;
+ height: 35px;
+ text-align: center;
+ border-radius: 0;
+ margin-left: 0;
+ border: 0;
+ border-right: 1px solid #bababa;
+ line-height: inherit;
+ margin-top: 0;
+ background-color: #ededed;
+ padding: 0 15px;
+}
+
+
+.ptx-navbar > :last-child > :last-child {
+ border-right: none;
+}
\ No newline at end of file
diff --git a/_static/pretext/css/pretext.css b/_static/pretext/css/pretext.css
new file mode 100644
index 00000000..dc380107
--- /dev/null
+++ b/_static/pretext/css/pretext.css
@@ -0,0 +1,1151 @@
+/*******************************************************************************
+ * pretext.css handles structure which (should be) common to all styles
+ *******************************************************************************
+ *
+ * Authors: David Farmer, Rob Beezer
+ *
+ *******************************************************************************
+ */
+
+@import url("https://fonts.googleapis.com/css?family=PT+Serif:400,700,400italic,700italic|Open+Sans:400italic,700italic,400,700");
+
+* {
+ box-sizing: border-box;
+}
+
+body.pretext {
+ font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+body.pretext[data-font="OS"] {
+ font-family: "Open Sans", sans-serif;
+}
+body.pretext[data-font="RS"] {
+ font-family: "Roboto Serif", serif;
+}
+body.pretext,
+body.standalone {
+ margin: 0;
+ padding: 0;
+ font-size: 16px;
+}
+
+body.pretext { background: #fff; }
+
+a {
+ color: inherit;
+ text-decoration: none;
+}
+a:hover,
+a:focus {
+ text-decoration: none;
+}
+
+
+body.pretext > a.assistive {
+ padding:6px;
+ position: absolute;
+ top:-40px;
+ left:0px;
+ color:white;
+ border-right:1px solid white;
+ border-bottom:1px solid white;
+ border-bottom-right-radius:8px;
+ background:transparent;
+ z-index: 10000;
+}
+
+body.pretext > a.assistive:focus {
+ top:0px;
+ background:#BF1722;
+ outline:0;
+ transition: top .1s ease-in, background .5s linear;
+}
+
+/* over-write bootstrap (in Runestone, for example) */
+nav .ptx-navbar {
+ border-top: none;
+ border-right: none;
+ border-left: none;
+ min-height: unset;
+}
+
+/* next for the Activecode popup */
+/*
+.modal-backdrop.fade.in {
+ display: none;
+}
+*/
+.ptx-navbar .activecode-toggle {
+ padding: 3px 5px;
+}
+
+/* Runestone nav for Runestone-wide features */
+.pretext #brand-navbar,
+.pretext .brand-navbar {
+ left: 0;
+ position: fixed;
+ right: 0;
+ z-index: 1030;
+ height: 50px;
+ border-width: 0 0 1px;
+ top: 0;
+ margin-bottom: 0;
+}
+.pretext #brand-navbar > .container::before,
+.pretext .brand-navbar > .container::before,
+.pretext #brand-navbar > .container::after,
+.pretext .brand-navbar > .container::after {
+ display: none;
+}
+.pretext #brand-navbar + .ptx-masthead,
+.pretext .brand-navbar + .ptx-masthead {
+ margin-top: 50px;
+}
+.pretext #brand-navbar .navbar-collapse.collapse,
+.pretext .brand-navbar .navbar-collapse.collapse {
+ overflow: hidden !important;
+}
+.pretext #brand-navbar ~ .ptx-navbar,
+.pretext .brand-navbar ~ .ptx-navbar {
+ top: 50px;
+}
+@media screen and (max-width: 800px) {
+ .pretext #brand-navbar ~ .ptx-navbar,
+ .pretext .brand-navbar ~ .ptx-navbar {
+ top: auto;
+ }
+}
+
+/* so that we can position things (like .autopermalink) absolutely wrt these items */
+.ptx-content section,
+.ptx-content article,
+.ptx-content figure,
+.ptx-content figcaption,
+.ptx-content .exercisegroup,
+.ptx-content .discussion-like,
+.ptx-content .para {
+ position: relative;
+}
+
+/* we use .para as a wrapper around some "compound" p, so the
+ first p in .para is block-like because of the .pare */
+.ptx-content .para > p:first-child,
+.ptx-content .para > .para:first-child {
+ display: inline;
+}
+
+/* Oscar Levin figured out the cause of chrome showing a funny border focus */
+.ptx-content .knowl .para {
+ position: unset;
+}
+
+/* CSS defult values:
+https://www.w3schools.com/cssref/css_default_values.asp
+*/
+
+/* the default margin for pre is "1em 0", so we over-ride
+so that we can set our own later */
+.ptx-content pre {
+ margin: 0;
+ padding: 0;
+ border: none;
+}
+/* these are to over-ride "pre" styling in code.less */
+.ptx-content pre {
+ border-radius: 0;
+}
+
+.ptx-content textarea {
+ padding: 0;
+}
+
+/* .para and other block-level elements should have space at the top, and not the bottom */
+.ptx-content h1, .ptx-content h2, .ptx-content h3, .ptx-content h4, .ptx-content h5, .ptx-content h6 {
+ margin: 0;
+ font-size: unset;
+}
+.pretext h1, .pretext h2, .pretext h3, .pretext h4, .pretext h5, .pretext h6 {
+ margin: 0;
+ font-size: unset;
+}
+
+.ptx-content .heading {
+ line-height: 1.1;
+}
+
+/* spacing around and after .para, and around and after article */
+.ptx-content .para {
+ margin-top: 1.25em;
+ margin-bottom: 0;
+ line-height: 1.35;
+}
+.ptx-content .para.continuation {
+ margin-top: 0;
+}
+.ptx-content pre + .para.continuation,
+.ptx-content pre + form,
+.ptx-content div + form {
+ margin-top: 1em;
+}
+.ptx-content ul + .para.continuation,
+.ptx-content ol + .para.continuation,
+.ptx-content dl + .para.continuation {
+ margin-top: 0.75em;
+}
+
+.ptx-content .aside-like > .para:first-child,
+.ptx-content td > .para:first-child,
+.ptx-content .solution-like > .para:first-child {
+ margin-top: 0;
+}
+/* for assemblages without a title */
+.ptx-content .assemblage-like > .para:first-of-type {
+ margin-top: 0;
+}
+.ptx-content .assemblage-like > .heading + .para {
+ margin-top: 0.25em;
+}
+.ptx-content .assemblage-like + .para {
+ margin-top: 1.75em;
+}
+
+.ptx-content .para.intertext {
+ margin-top: -0.25em;
+ text-indent: 0;
+}
+
+.ptx-content .para + table {
+ margin-top: 1em;
+}
+
+.ptx-content table tr td .para + .para {
+ margin-top: 1em;
+}
+
+.ptx-content table + .para {
+ margin-top: 1.5em;
+}
+
+.ptx-content .para + figure.figure-like > table {
+ margin-top: 1em;
+}
+
+/* 1.25 = ol top + li top ? looked too big with 0.75 below */
+.ptx-content .exercise-like .para + ol {
+ margin-top: 0.5em;
+}
+
+.ptx-content .para + pre.prettyprint,
+.ptx-content .para + pre.plainprint {
+ margin-top: 1.25em;
+}
+.ptx-content .para + .code-box {
+ margin-top: 1.25em;
+}
+.ptx-content .code-box > .console {
+ margin-left: 1.5em;
+}
+
+.ptx-content .exercisegroup {
+ padding-top: 1.25em;
+ margin-bottom: 1.0em;
+}
+.ptx-content section .exercisegroup > .heading {
+ font-size: 1.10em;
+ line-height: 1.05em;
+ margin-top: 0.75em;
+ display: inline;
+}
+.ptx-content section .exercisegroup > .heading + .introduction {
+ display: inline;
+}
+.ptx-content section .exercisegroup > .heading + .introduction > .para:first-child {
+ display: inline;
+}
+
+.ptx-content .exercisegroup article.exercise-like .solution .para:first-child {
+ margin-top: -3px; /* because of the 10px (instread of 7) on the .knowl-content */
+}
+.ptx-content .exercisegroup article.exercise-like li > .para:first-child {
+ margin-top: 0;
+}
+
+.ptx-content .exercisegroup article.exercise-like .heading {
+ margin: 0;
+}
+.ptx-content article.exercise-like .task > .heading + .heading {
+ font-weight: 600; /* should be slightly less bold, but some browsers make it bold */
+}
+.ptx-content article.exercise-like .task > .heading + .heading + .para,
+.ptx-content article.exercise-like .task > .heading + .heading + div {
+ display: block;
+ margin-top: 0;
+}
+.ptx-content .exercisegroup .conclusion .heading {
+ margin-top: 0.5em;
+}
+.ptx-content .exercisegroup .hidden-knowl-wrapper {
+ margin: 0;
+}
+.ptx-content .exercisegroup article + article {
+ margin-top: 1em;
+}
+
+/* http://spot.pcc.edu/math/APEXCalculus/sec_interp_deriv.html */
+.ptx-content .exercisegroup > article,
+.ptx-content .exercisegroup-exercises > article {
+ margin-left: 2em;
+}
+.ptx-content .exercisegroup .cols2 > article {
+ margin-left: 1.25em;
+}
+.ptx-content .exercisegroup > .introduction,
+.ptx-content .exercisegroup > .conclusion {
+ margin-left: 0;
+}
+.ptx-content .exercisegroup > .introduction {
+ margin-top: 1.25em;
+ margin-top: 0;
+}
+.ptx-content .exercisegroup > .introduction > .para:first-child::before {
+ content: '\25a0\2009';
+ /* font-size: 70%; */
+ color: #06a;
+ position: relative;
+ top: -1px;
+ right: 1px;
+}
+.ptx-content .exercisegroup > .heading + .introduction > .para:first-child::before {
+ content: '\2003';
+}
+
+.ptx-content .exercisegroup > .introduction > .para:first-child {
+ margin-top: 0;
+}
+
+.ptx-content .exercisegroup article + .hidden-knowl-wrapper {
+ margin-left: 4em;
+}
+
+/* make it look like a list, and have entra indenting when already more indented */
+.ptx-content .exercise-like .introduction + .hidden-knowl-wrapper,
+.ptx-content .exercise-like .conclusion {
+ margin-left: 1.0em;
+}
+.ptx-content .exercisegroup .exercise-like .introduction + .hidden-knowl-wrapper,
+.ptx-content .exercisegroup .exercise-like .conclusion {
+ margin-left: 1.5em;
+}
+.ptx-content section > .hidden-knowl-wrapper {
+ margin-top: 1em;
+}
+.ptx-content article + .hidden-knowl-wrapper {
+ margin-top: 1em;
+}
+.ptx-content .knowl-content > section:first-child > .heading:first-child {
+ margin-top: 0;
+}
+
+
+
+/* 9/23/23 a knowled article is now in a "details", so we add style
+ to mimic the old style below */
+
+.ptx-content section .born-hidden-knowl > summary {
+ cursor: pointer;
+}
+
+.ptx-content section > .born-hidden-knowl > summary::marker,
+.ptx-content article + .born-hidden-knowl > summary::marker {
+ content: "";
+}
+
+.ptx-content section > .born-hidden-knowl , .ptx-content .paragraphs > .born-hidden-knowl ,
+.ptx-content article + .born-hidden-knowl {
+ margin-top: 1.25em;
+}
+.ptx-content .born-hidden-knowl summary + article {
+ margin-top: 1em;
+}
+.ptx-content section .born-hidden-knowl + .born-hidden-knowl ,
+.ptx-content section .introduction + .born-hidden-knowl ,
+.ptx-content section .para + .born-hidden-knowl ,
+.ptx-content section .posterior + .born-hidden-knowl {
+ margin-top: 1.75em;
+}
+
+.ptx-content .born-hidden-knowl > article {
+ padding-top: 0.25em;
+}
+.ptx-content .born-hidden-knowl > article:not(.theorem-like):not(.definition-like) {
+ padding: 0.25em;
+ padding-left: 0.5em;
+ padding-bottom: 0;
+}
+.ptx-content .born-hidden-knowl > article {
+ background-color: #f5f5ff;
+}
+.ptx-content .born-hidden-knowl > article .born-hidden-knowl > article,
+.ptx-content .born-hidden-knowl > article .born-hidden-knowl > .answer {
+ margin: 0.5em;
+ padding: 0.25em;
+ padding-left: 0.5em;
+ background-color: #fffff5;
+}
+.ptx-content .born-hidden-knowl > article .born-hidden-knowl > article .born-hidden-knowl > article {
+ background-color: #fff5ff;
+}
+.ptx-content .born-hidden-knowl > article .born-hidden-knowl > article .born-hidden-knowl > article .born-hidden-knowl > article {
+ background-color: #fafffa;
+}
+
+/* this > may be too restrictive. The purpose is to not put a
+ top margin on an article at the top of a knowl */
+.ptx-content section > article, .ptx-content section > section.paragraphs, .ptx-content .paragraphs > article {
+ margin-top: 1.25em;
+}
+.ptx-content section article + article,
+.ptx-content section .introduction + article,
+.ptx-content section .para + article,
+.ptx-content section .posterior + article {
+ margin-top: 1.75em;
+}
+.ptx-content section article > .introduction + article {
+ margin-top: 1em;
+}
+
+.ptx-content section article > .discussion-like {
+ margin-top: 1em;
+}
+.ptx-content section article > .discussion-like .para {
+ margin-top: 1em;
+}
+
+.ptx-content article + .posterior {
+ margin-top: 0.5em;
+}
+.ptx-content section .para + .tabular-box {
+ margin-top: 0.75em;
+}
+.ptx-content section .tabular-box + .tabular-box {
+ margin-top: 1.0em;
+}
+.ptx-content section .proof {
+ margin-top: 0.75em;
+}
+
+.ptx-content section > pre, .ptx-content .para + pre {
+ margin-top: 1.25em;
+}
+
+.ptx-content ol .para + .para, .ptx-content ul .para + .para {
+ margin-top: 1em;
+}
+
+/* see Ex 29 https://yoshiwarabooks.org/linear-functions.html
+and ex 2.91 in
+https://yoshiwarabooks.org/mfg/MathModels.html */
+.ptx-content .introduction + .sidebyside,
+.ptx-content .para + .sidebyside,
+.ptx-content ol + .sidebyside,
+.ptx-content ul + .sidebyside {
+ margin-top: 1em;
+}
+
+.ptx-content section .heading,
+.ptx-content article .heading {
+ font-family: "PT Serif", "Times New Roman", Times, serif;
+ font-weight: 700;
+ color: inherit;
+}
+.ptx-content article .exercise-stage {
+ font-family: "PT Serif", "Times New Roman", Times, serif;
+ font-weight: 700;
+ color: inherit;
+ font-size: 100%;
+ margin-top: 0.4em;
+}
+
+.ptx-content article > .heading + .para {
+ margin-top: 0;
+}
+.ptx-content section .heading + .para,
+.ptx-content section .title + .para, /* list items have bare .title, not in a .heading */
+.ptx-content section .heading + .introduction > .para:first-child,
+.ptx-content section .blob > .para:first-child {
+ margin-top: 0.25em;
+}
+.ptx-content section .heading + article { /* , .ptx-content section header + article { */
+ margin-top: 1em;
+}
+.ptx-content section .heading + .sidebyside {
+ margin-top: 1em;
+}
+
+.ptx-content a > .heading { display: inline;}
+
+.ptx-content section > .heading {
+ font-size: 1.75em;
+ line-height: 1.25em;
+ margin-top: 1em;
+ margin-bottom: 0.35em;
+}
+.ptx-content section section > .heading {
+ font-size: 1.5em;
+ line-height: 1.25em;
+ margin-bottom: 0;
+}
+.ptx-content .paragraphs > .heading {
+ font-size: 1.125em;
+ line-height: 1.125em;
+ display: inline;
+}
+/*
+.ptx-content .paragraphs .heading {
+ display: inline;
+}
+*/
+
+.ptx-content .paragraphs .heading + .para {
+ display: inline;
+}
+.ptx-content .para.logical > .para:first-child {
+ display: inline;
+}
+
+/* next is for runestone multiple choice */
+.ptx-content .runestone label > .para {
+ display: inline;
+}
+/* the next are to avoid stlping a .para as inline, because
+ * inline styling messes up the meaning of line-height.
+ * */
+
+.ptx-content .paragraphs .para .title {
+ font-family: "PT Serif", "Times New Roman", Times, serif;
+ font-size: 1.125em;
+ font-weight: 700;
+}
+
+.ptx-content .paragraphs > .heading {
+ margin-top: 0;
+}
+
+.ptx-content .paragraphs + .paragraphs {
+ margin-top: 3em;
+}
+
+.ptx-content article .paragraphs > .heading {
+ font-size: 1.05em;
+}
+.ptx-content section section section > .heading {
+ font-size: 1.40em;
+ line-height: 1.15em;
+ margin-top: 0.75em;
+}
+@media screen and (max-width: 480px) {
+ .ptx-content section > .heading {
+ font-size: 1.5em;
+ line-height: 1.33em;
+ margin-top: 1em;
+ }
+ .ptx-content section section > .heading {
+ font-size: 1.3em;
+ line-height: 1.15em;
+ }
+ .ptx-content section section section > .heading {
+ font-size: 1.15em;
+ line-height: 1em;
+ }
+}
+
+.ptx-content .abstract {
+ margin: 4em 2em;
+}
+.ptx-content .abstract > .title {
+ font-size: 1.125em;
+ font-weight: 600;
+ line-height: 1.125em;
+ display: inline;
+}
+.ptx-content .abstract > .title::after {
+ content: ".\2009\2009\2009";
+}
+.ptx-content .abstract > .title + .para {
+ display: inline;
+}
+
+/* born hidden articls are now in "details", so adding markup
+to immitate what is below. */
+
+.ptx-content .born-hidden-knowl summary,
+.ptx-content .born-hidden-knowl summary > .heading {
+ position: relative;
+}
+
+.ptx-content .born-hidden-knowl summary > .heading {
+ font-size: 1.125em;
+ line-height: 1.125em;
+ margin-top: 0;
+ display: inline;
+}
+
+
+/* ----- */
+
+
+.ptx-content article > .heading,
+.ptx-content article > a .heading {
+ font-size: 1.125em;
+ line-height: 1.125em;
+ margin-top: 0;
+ display: inline;
+}
+.ptx-content .discussion-like > .heading {
+ font-size: 1.0em;
+ line-height: 1.125em;
+ margin-top: 0;
+ display: inline;
+}
+.ptx-content .discussion-like.discussion > .heading .codenumber,
+.ptx-content .discussion-like.discussion > .heading .space,
+.ptx-content .discussion-like.discussion > .heading .period {
+ display: none;
+}
+.ptx-content .discussion-like.discussion > .heading .type::after {
+ content: ". ";
+}
+.ptx-content .discussion-like.status > .heading {
+ display: none;
+}
+.ptx-content .discussion-like.status > .heading + .para,
+.ptx-content .discussion-like.status > .para {
+ font-style: italic;
+ display: block;
+ padding-left: 1em;
+}
+
+
+.ptx-content article > .heading::after,
+.ptx-content .discussion-like > .heading::after,
+.ptx-content .paragraphs > .heading::after,
+.ptx-content article > a > .heading::after {
+ content: "\2009";
+}
+/* Currently only for Solution to example */
+.ptx-content .posterior .heading {
+ font-weight: normal;
+ font-size: 1.125em;
+ line-height: 1.125em;
+ margin-top: 0;
+}
+
+/*
+ * Contents of articles
+ */
+.ptx-content article > .heading + .para,
+.ptx-content .discussion-like > .heading + .para,
+.ptx-content article > .heading + .introduction,
+.ptx-content article > .heading + .introduction > .para:first-child {
+ display: inline;
+}
+/* when a list is the only thing in an environment with a border,
+ there is too much space to the left */
+.ptx-content article > .heading + ol,
+.ptx-content article > .heading + ul {
+ padding-left: 1.5em;
+}
+.ptx-content article.theorem-like .para,
+.ptx-content article.theorem-like li {
+ font-style: italic;
+}
+.ptx-content article.theorem-like .emphasis {
+ font-weight: 700;
+}
+
+.ptx-content ol, .ptx-content ul {
+ margin-bottom: 0;
+}
+.ptx-content li {
+ margin-bottom: 0;
+}
+.ptx-content li .title {
+ font-size: 100%;
+ font-weight: normal;
+ font-style: italic;
+}
+.ptx-content article.theorem-like li .title {
+ font-weight: 600;
+ font-style: normal;
+ font-size: 96%;
+}
+
+.ptx-content figure {
+ margin-bottom: 0;
+}
+
+.ptx-content .heading {
+ margin-top: 0;
+ margin-bottom: 0;
+}
+
+.ptx-content .conclusion {
+ margin-top: 1em;
+}
+.ptx-content .conclusion > .para:first-child {
+ margin-top: 0.5em;
+}
+
+.ptx-content ol, .ptx-content ul {
+ margin-top: 0.75em;
+}
+.ptx-content .exercise-like > ol:first-child,
+.ptx-content .exercise-like > ul:first-child {
+ margin-top: 0;
+}
+.ptx-content .heading + ol, .ptx-content .heading + ul {
+ margin-top: 0.45em;
+}
+.ptx-content li > .heading + ol, .ptx-content li > .heading + ul {
+ margin-top: 0.25em;
+}
+.ptx-content li > .heading + ol > li:nth-child(1),
+.ptx-content li > .heading + ul > li:nth-child(1) {
+ margin-top: 0;
+}
+.ptx-content li > .heading + ol.cols2 > li:nth-child(2),
+.ptx-content li > .heading + ul.cols2 > li:nth-child(2) {
+ margin-top: 0;
+}
+
+.ptx-content li {
+ margin-top: 0.5em;
+}
+.ptx-content li > .para:first-child {
+ margin-top: 0;
+}
+.ptx-content article .para:first-child {
+ margin-top: 0;
+}
+
+.ptx-content ol ol, .ptx-content ol ul, .ptx-content ul ol, .ptx-content ul ul {
+ margin-top: 0.5em;
+}
+
+.ptx-content .frontmatter > .heading {
+ display: block;
+ text-align: center;
+}
+.ptx-content .frontmatter > .heading .title, .ptx-content .book > .heading .title {
+ font-size: 1.3em;
+}
+.ptx-content .frontmatter > .heading .subtitle, .ptx-content .book > .heading .subtitle {
+ display: block;
+ font-weight: normal;
+ color: #666666;
+ font-size: 0.875em;
+ line-height: 1.42857em;
+ margin-top: 0.35714em;
+}
+
+.ptx-content .frontmatter .author:first-of-type {
+ margin-top: 4em;
+}
+.ptx-content .frontmatter > .para:first-of-type {
+ margin-top: 4em;
+}
+.ptx-content .frontmatter > .author,
+.ptx-content .frontmatter > .credit {
+ margin-top: 2em;
+ text-align: center;
+}
+.ptx-content .frontmatter > .author .author-name {
+ font-size: 120%;
+}
+.ptx-content .frontmatter .date {
+ display: block;
+ margin-top: 2em;
+ text-align: center;
+}
+.ptx-content .frontmatter .credit .title {
+ font-size: 1em;
+}
+.ptx-content .frontmatter .credit .author {
+ font-size: 0.9em;
+ margin-top: 0.75em;
+}
+.ptx-content .frontmatter .author-info {
+ font-size: 90%;
+}
+.ptx-content a[href^="mailto:"] {
+ white-space: pre;
+}
+
+button {
+ font: inherit;
+}
+
+.print-button {
+ position: relative;
+ right: 2px;
+ top: 66px;
+ background-color: LightGreen;
+ z-index: 1;
+ margin-top: -4em;
+ float: right;
+}
+
+@media print {
+ .pretext .ptx-masthead,
+ .pretext .ptx-navbar,
+ body.pretext > a.assistive,
+ .pretext .ptx-page > .ptx-sidebar,
+ .pretext .ptx-page-footer,
+ .pretext .ptx-main > div.ptx-content-footer {
+ display:none;
+ border:none;
+ }
+ .pretext .ptx-page main.ptx-main {
+ margin-left:0;
+ left:auto;
+ border:none;
+ box-shadow:none;
+ padding: 0;
+ }
+ .pretext .ptx-page .ptx-main .ptx-content { margin-top:0 }
+ .pretext .ptx-page .ptx-main .ptx-content.ptx-content section { margin-top:1em }
+ .pretext .ptx-page .ptx-main .ptx-content.ptx-content section .heading { margin-top:0 }
+
+ /* over-ride print.less */
+ .pretext a[href]::after {
+ content: "";
+ }
+
+ /* don't print the print-button */
+ .print-button {
+ display: none;
+ }
+}
+
+/* printing for one-page worksheets */
+
+@media print {
+ body.standalone.worksheet .ptx-page > .ptx-main .ptx-content {
+ width: 820px;
+ max-width: 820px;
+ font-size: 12.5px;
+ }
+ body.standalone.worksheet {
+ margin: 0;
+ }
+ body.standalone .ptx-content section.worksheet {
+ border: none;
+ }
+ body.standalone.worksheet .ptx-masthead,
+ body.standalone.worksheet .ptx-page-footer {
+ display: none;
+ }
+
+ body.standalone.worksheet.has-sidebar-left.mathbook-loaded .ptx-page .ptx-main {
+ margin: 0;
+ }
+
+ body.standalone.worksheet .ptx-page > .ptx-main .ptx-content {
+ margin: 0;
+ }
+ body.standalone.worksheet .ptx-content section.onepage {
+ max-height: 100%;
+ max-width: 100%;
+ overflow: hidden;
+ page-break-after: always;
+/*
+ height: 1243px;
+*/
+ border: none;
+ page-break-inside: avoid;
+ }
+ body.standalone.worksheet .ptx-content .onepage.lastpage {
+ margin-bottom: -2em; /* to avoid blank space overflow causing an extra blank page */
+ page-break-after: auto;
+ }
+ body.standalone.worksheet.a4 .ptx-content .onepage {
+/*
+ height: 1320px;
+*/
+ }
+ body.standalone.worksheet .ptx-content .onepage div.workspace,
+ body.standalone.worksheet .ptx-content .onepage div.workspace.squashed.tight {
+ border: none;
+ padding: 0;
+ background: none !important;
+ }
+ body.standalone.worksheet a {
+ color: black;
+ }
+
+ body.standalone.worksheet .ptx-page .ptx-main {
+ padding: 0;
+ }
+
+ body.standalone.worksheet.mathbook-loaded .ptx-page .ptx-main .ptx-content.ptx-content section.onepage {
+ padding-bottom: 20px; /* to help prevent flow onto the next page, particularly in Safari */
+ /* the page is not full length, but what is missing was blank anyway */
+/*
+ margin: 0;
+*/
+ }
+
+ @page { margin: 0 }
+}
+
+.hidden {
+ display: none;
+}
+
+.ptx-navbar .preferences_menu_holder .active > li {
+ color: #ddd;
+}
+.ptx-navbar .preferences_menu_holder > ol > li:focus {
+ background: #eef;
+ border: 2px solid #909;
+ padding: 2px 24px 2px 8px;
+}
+.ptx-navbar .preferences_menu_holder > ol > li > ol > li:focus {
+ background: #eef;
+ border: 2px solid #909;
+ padding: 4px 4px 2px 4px;
+}
+
+.ptx-navbar .preferences_menu_holder .active .selected {
+ background: #eef;
+ color: #111;
+}
+.ptx-navbar .button.user-preferences-button {
+ overflow: visible;
+ display: none;
+}
+.preferences_menu_holder {
+ z-index: 30;
+ background: #fee;
+ color: #222;
+ position: absolute;
+ left: -11em;
+ top: 4em;
+}
+.preferences_menu_holder ol {
+ list-style-type: none;
+ padding: 0;
+ margin: 0;
+}
+.preferences_menu_holder > ol {
+ width: 12.5em;
+}
+.preferences_menu_holder > ol > li {
+ padding: 4px 26px 4px 10px;
+}
+.preferences_menu_holder ol li ol {
+ z-index: 40;
+ position: absolute;
+ left: 13em;
+ top: -2em;
+ background: #fee;
+}
+.preferences_menu_holder ol li ol li {
+ padding: 6px 6px 4px 6px;
+ display: flex;
+ align-items: center;
+}
+.preferences_menu_holder ol.fonts:not(.hidden) {
+ display: grid;
+ grid-template-columns: 1fr 1fr 1fr 1fr;
+}
+.preferences_menu_holder ol.fonts li:nth-child(8n+1),
+.preferences_menu_holder ol.fonts li:nth-child(8n+2),
+.preferences_menu_holder ol.fonts li:nth-child(8n+3),
+.preferences_menu_holder ol.fonts li:nth-child(8n+4) {
+ background-color: #eff;
+}
+.preferences_menu_holder ol.fonts li:nth-child(4n+2) {
+ width: 4em;
+ justify-content: center;
+ text-align: center;
+ align-items: center;
+}
+.preferences_menu_holder ol.fonts li:nth-child(4n+1) {
+ padding-left: 14px;
+}
+
+.preferences_menu_holder .wrap_to_submenu {
+ float: right;
+ line-height: 0.95em;
+ margin-right: -7px;
+}
+.preferences_menu_holder .to_submenu {
+ position: absolute;
+}
+.preferences_menu_holder .avatars li {
+ font-size: 200%;
+ text-align: center;
+}
+.preferences_menu_holder .fontfamily .name {
+ margin-right: 2em;
+}
+.preferences_menu_holder .fontfamily .sample {
+ margin-left: auto;
+}
+.preferences_menu_holder .fonts .byunits {
+ font-size: 80%;
+ margin-bottom: -0.3em;
+}
+#choose_topic {
+ background: #eef;
+}
+.ffcheck,
+.atmospherecheck,
+.avatarcheck,
+.rulercheck,
+.motioncheck {
+ width: 1em;
+ margin-left: 0.2em;
+ margin-right: 0.7em;
+ font-size: 11pt;
+}
+
+.preferences_menu_holder .moveQ {
+ padding-top: 0.5em;
+ border-top: 0.3em solid #eef;
+}
+.preferences_menu_holder .moveQ,
+.preferences_menu_holder .moveQ ~ li {
+ background: #efe;
+}
+
+[data-ruler="greybar"] .onelineX:hover{
+ padding-top: 2px;
+ margin-top: -2px;
+ padding-bottom: 2px;
+ margin-bottom: -2px;
+ background-color: #f3f3f3;
+}
+[data-atmosphere*="dark"][data-ruler="greybar"] .onelineX:hover{
+ color: #333;
+}
+[data-ruler="lightbox"] .onelineX {
+ background-color: #e3e3e3;
+}
+[data-ruler="lightbox"] .onelineX:hover{
+ padding-top: 2px;
+ margin-top: -2px;
+ padding-bottom: 2px;
+ margin-bottom: -2px;
+ background-color: inherit;
+}
+[data-ruler="sunrise"] .onelineX:hover ~ .onelineX {
+ background-color: #e3e3e3;
+}
+[data-ruler="sunrise"] .para:hover ~ * .onelineX {
+ background-color: #e3e3e3;
+}
+[data-ruler="sunrise"] section:hover ~ * .onelineX {
+ background-color: #e3e3e3;
+}
+
+[data-ruler="sunriseunderline"] .onelineX:hover{
+ background-color: inherit;
+ border-bottom: 2px solid black;
+ margin-bottom: -2px;
+ position: relative;
+ z-index: 10;
+}
+xxxxxx[data-ruler="sunriseunderline"] .onelineX:hover + .onelineX {
+ margin-top: -2px;
+}
+[data-ruler="sunriseunderline"] .onelineX:hover ~ .onelineX {
+ background-color: #e3e3e3;
+}
+[data-ruler="sunriseunderline"] .para:hover ~ * .onelineX {
+ background-color: #e3e3e3;
+}
+[data-ruler="sunriseunderline"] section:hover ~ * .onelineX {
+ background-color: #e3e3e3;
+}
+
+
+[data-ruler="underline"] .onelineX:hover{
+ background-color: inherit;
+ border-bottom: 1px solid black;
+ margin-bottom: -1px;
+}
+[data-ruler="lunderline"] .onelineX:hover{
+ background-color: inherit;
+ border-bottom: 1px solid black;
+ border-left: 1px solid black;
+ padding-left: 4px;
+ margin-left: -5px;
+ margin-bottom: -1px;
+}
+[data-atmosphere*="dark"][data-ruler*="underline"] .onelineX:hover{
+ border-bottom: 1.5px solid #ddd;
+ margin-bottom: -1.5px;
+}
+[data-atmosphere*="dark"][data-ruler="lunderline"] .onelineX:hover{
+ border-left: 1.5px solid #ddd;
+ padding-left: 3.5px;
+ margin-left: -5px;
+}
+
+
+.material-symbols-outlined {
+ font-variation-settings:
+ 'FILL' 0,
+ 'wght' 400,
+ 'GRAD' 0,
+ 'opsz' 24
+}
+
+.ptx-footnote {
+ display: inline;
+}
+
+.ptx-footnote[open] {
+ display: contents;
+}
+
+.ptx-footnote[open] .ptx-footnote__number {
+ visibility: hidden;
+}
+.ptx-footnote[open] .ptx-footnote__number::before {
+ font-size: 0.6rem;
+ content: "[x]";
+ visibility: visible;
+ vertical-align: super;
+}
+
+.ptx-footnote__number {
+ display: inline;
+ cursor: pointer;
+}
+
+.ptx-footnote__number::marker {
+ content: "";
+}
+
+.ptx-footnote__contents {
+ display: block;
+ font-style: italic;
+ background: var(--knowlbackground);
+ border-radius: 6px;
+ padding: 0px 8px;
+ margin: 4px auto;
+ width: fit-content;
+ max-width: calc(100% - 60px);
+ border: 2px solid var(--knowlborder);
+}
+
+
+/*******************************************************************************
+ *
+ * Authors: David Farmer, Rob Beezer
+ *
+ *******************************************************************************
+ */
diff --git a/_static/pretext/css/pretext_add_on.css b/_static/pretext/css/pretext_add_on.css
new file mode 100644
index 00000000..9a08c893
--- /dev/null
+++ b/_static/pretext/css/pretext_add_on.css
@@ -0,0 +1,3178 @@
+
+.ptx-content section .para.credit + .para.credit {
+ margin-top: 0.25em;
+}
+.ptx-content section .para.credit > .title {
+ font-weight: 700;
+ margin-right: 0.5em;
+}
+/* .ptx-content section .para.credit > .title::after {
+ content: ": ";
+} */
+
+.ptx-content section .para.copyright {
+ margin-top: 2.5em;
+}
+.ptx-content section .para.license {
+ margin-top: 2.5em;
+}
+
+/* stacked headings in the solutions backmatter */
+.ptx-content section > .heading + .heading,
+.ptx-content section section > .heading + .heading {
+ margin-top: 0.5em;
+}
+.ptx-content section.solutions > h3.heading,
+.ptx-content section.solutions section > h3.heading {
+ font-size: 1.6em;
+}
+.ptx-content section.solutions > h4.heading,
+.ptx-content section.solutions section > h4.heading {
+ font-size: 1.45em;
+}
+.ptx-content section.solutions > h5.heading,
+.ptx-content section.solutions section > h5.heading {
+ font-size: 1.35em;
+}
+.ptx-content section.solutions > h6.heading,
+.ptx-content section.solutions section > h6.heading {
+ font-size: 1.25em;
+}
+
+.ptx-content .bibitem + .bibentry {
+ display: inline-block;
+ width: 90%;
+}
+.ptx-content .bibitem {
+ display: inline-block;
+ vertical-align: top;
+ width: 7%;
+ margin-right: 0;
+}
+
+.ptx-content figcaption {
+ font-weight: normal;
+}
+
+.ptx-content figcaption {
+ margin-top: 0.6em;
+ margin-left: auto;
+ margin-right: auto;
+/* Commenting this out because the initial letter of some captions were cut off
+ text-indent: -30px;
+*/
+}
+
+.ptx-content figure.table-like figcaption:first-child {
+ font-style: oblique;
+ margin-top: 0;
+}
+.ptx-content figure.table-like figcaption:first-child .type,
+.ptx-content figure.table-like figcaption:first-child .codenumber {
+ font-style: normal;
+}
+
+.ptx-content section figcaption .codenumber,
+.ptx-content section figcaption .type {
+ font-weight: 700;
+ font-size: inherit;
+}
+
+.ptx-content figcaption .codenumber:after {
+ content: "\2002";
+}
+.ptx-content figcaption .type:last-of-type::after {
+ /* so, not followed by a span.codenumber */
+ /* not sure where this is used */
+ content: "\2002";
+}
+
+.ptx-content figcaption code.code-inline {
+ white-space: pre;
+}
+
+.ptx-content figure > figcaption:first-child {
+ margin-top: 1.5em;
+}
+
+.ptx-content figcaption + .named-list-content {
+ margin-top: 0.6em;
+}
+.ptx-content figcaption + .named-list-content > .introduction > .para:first-child {
+ margin-top: 0;
+}
+.ptx-content figcaption + table,
+.ptx-content figcaption + .tabular-box {
+ margin-top: 0.5em;
+}
+
+.ptx-content .definition-like .para > .emphasis {
+ font-weight: 700;
+}
+.ptx-content em.alert {
+ font-weight: bold;
+}
+
+.unprocessed {
+ padding: 8px;
+ background-color: rgb(255,230,230)
+}
+
+.unprocessed .unprocessed {
+ margin: 8px;
+ background-color: rgb(255,200,255)
+}
+
+.unprocessed .unprocessed .unprocessed {
+ margin: 8px;
+ background-color: rgb(205,205,255)
+}
+
+.ptx-content section.introduction + section {
+ margin-top: 2em;
+}
+
+.ptx-content {
+ margin: 0;
+}
+
+.ptx-content .runestone.parsons_section {
+ display: inline-block;
+ max-width: unset;
+}
+
+.ptx-content .runestone.ac_section {
+ width: 60em;
+ max-width: unset;
+}
+.ptx-content .runestone.ac_section .ac_section {
+ max-width: unset;
+}
+.ptx-content .runestone.ac_section > div {
+ max-width: unset;
+}
+
+.ptx-content .runestone > .parsons {
+ width: 60em;
+ max-width: unset;
+}
+
+.ptx-content .runestone .parsons {
+ margin: 0;
+}
+.ptx-content .runestone.parsons_section > .parsons {
+ width: max-content;
+ padding-right: 1em;
+}
+.ptx-content .runestone .parsons .sortable-code-container {
+ text-align: unset;
+}
+.ptx-content .runestone .parsons .parsons-text,
+.ptx-content .runestone .parsons .parsons-controls {
+ margin-left: 0;
+ margin-right: 0;
+}
+.ptx-content .runestone .parsons .sortable-code + .sortable-code {
+ margin-right: 0;
+}
+
+.ptx-content .runestone .parsons .runestone_caption_text {
+ max-width: 660px;
+}
+
+.runestonebustmenu {
+ position: absolute;
+ right: 0;
+ top: 0;
+}
+.runestonebustmenu .dropdown-content {
+ position: absolute;
+ right: 2em;
+ left: unset;
+ top: 1em;
+}
+@media screen and (max-width: 800px) {
+/*
+ .runestonebustmenu { display: none }
+*/
+ nav .dropdown .dropdown-content {
+ top: unset;
+ bottom: 36px;
+ }
+
+ .activecode-toggle { display: none }
+}
+/* above may be obsolete because we do not have the runestonebustmenu class in overhaul?
+*/
+.pretext .navbar .dropdown {
+ height: 35px;
+}
+
+.ptx-content section section + section {
+ margin-top: 3em;
+}
+
+
+.ptx-content .sidebyside > .para, .ptx-content .sidebyside > figure, .ptx-content .sidebyside > img, .ptx-content .sidebyside > table, .ptx-content .sidebyside > tabular, .ptx-content .sidebyside > section, .ptx-content .sidebyside > .paragraphs {
+ display: inline-block;
+ margin: 0;
+}
+.ptx-content .sidebyside .sbspanel > table {
+/* see Sec 23.12 of sample article */
+ overflow-x: auto;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.ptx-content .sidebyside figcaption {
+ padding-left: 1em;
+ padding-right: 0;
+ padding-bottom: 0;
+ margin: 0.75em 0 0 0;
+}
+
+
+.ptx-content figcaption {
+ font-family: "PT Serif", "Times New Roman", Times, serif;
+}
+
+.ptx-content .sidebyside > .para { /* what about sbspanel? */
+ width: 32%;
+ vertical-align: top;
+}
+
+.ptx-content .sidebyside > .para.left, .ptx-content .sidebyside > .para.middle, .ptx-content .sidebyside > .para.right {
+ vertical-align: middle;
+}
+
+.ptx-content .sidebyside > .para + img {
+ vertical-align: middle;
+}
+
+.ptx-content .sidebyside .sbsrow .sbsheader {
+ margin-top: 0;
+}
+
+.ptx-content .sbsgroup {
+ width: 100%;
+}
+
+.ptx-content .sidebyside {
+ width: 100%;
+}
+
+.ptx-content .sbsrow {
+ display: flex;
+ justify-content: space-between;
+}
+
+/* Components of three types of "sbsrow" */
+
+/* titles, totally centered text */
+.ptx-content .sbsheader {
+ text-align: center;
+ justify-content: center;
+ font-size: 1em;
+}
+
+.ptx-content .sbspanel:empty { /* can only happen when partially created */
+ height: 10em;
+ background-color: rgb(221, 221, 255);
+}
+/* containers of desired width for actual content */
+.ptx-content .sbspanel {
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+}
+.ptx-content .sbspanel.top { /* also the default */
+ justify-content: flex-start;
+}
+.ptx-content .sbspanel.middle {
+ justify-content: center; /* should that be space-between? */
+}
+.ptx-content .sbspanel.bottom {
+ justify-content: flex-end;
+}
+
+.ptx-content .sbspanel > .para:first-child {
+ margin-top: 0;
+}
+
+/* fixed-width items are centered horizontally in their panel */
+/* always used in conjunction with sbspanel */
+.ptx-content .fixed-width {
+ align-items: center;
+}
+
+/* captions, centered until word-wrapped */
+.ptx-content .sbscaption {
+ justify-content: center;
+}
+
+
+/* good for table, bad for image
+.ptx-content .sidebyside {
+ overflow-x: scroll;
+}
+*/
+
+.ptx-content table {
+ border-spacing: 0;
+}
+
+.ptx-content table {
+ border-collapse: collapse;
+}
+
+.ptx-content .image-box + table,
+.ptx-content .image-box + .sidebyside > .sbsrow:first-child > .sbspanel > table:first-child {
+ margin-top: 1.5em;
+}
+
+.ptx-content table tr td,
+.ptx-content table tr th {
+ padding-top: 2px;
+ padding-bottom: 2px;
+ padding-left: 5px;
+ padding-right: 5px;
+}
+.ptx-content table tr td {
+ font-size: 90%;
+}
+
+.ptx-content table tr td.l {
+ text-align: left;
+}
+.ptx-content table tr td.c {
+ text-align: center;
+}
+.ptx-content table tr td.r {
+ text-align: right;
+}
+.ptx-content table tr td.j {
+ text-align: justify;
+}
+.ptx-content table tr td.lines {
+ white-space: nowrap;
+}
+
+
+.ptx-content table tr td.t {
+ vertical-align: top;
+}
+.ptx-content table tr td.b {
+ vertical-align: bottom;
+}
+.ptx-content table tr td.m {
+ vertical-align: middle;
+}
+
+.ptx-content table tr td.vv {
+ border-left: 2px solid #000;
+ border-right: 2px solid #000;
+}
+
+.ptx-content table tr td.vcv {
+ border-left: 2px solid #000;
+ border-right: 2px solid #000;
+ text-align: center;
+}
+
+.ptx-content table tr td.vcvv {
+ border-left: 2px solid #000;
+ border-right: 4px solid #000;
+ text-align: center;
+}
+
+.ptx-content table tr td.vlv {
+ border-left: 2px solid #000;
+ border-right: 2px solid #000;
+ text-align: left;
+}
+
+.ptx-content table tr td.vrv {
+ border-left: 2px solid #000;
+ border-right: 2px solid #000;
+ text-align: right;
+}
+
+.ptx-content table tr td.rv {
+ border-right: 2px solid #000;
+ text-align: right;
+}
+
+.ptx-content table tr td.vr {
+ border-left: 2px solid #000;
+ text-align: right;
+}
+
+.ptx-content table tr td.lv {
+ border-right: 2px solid #000;
+ text-align: left;
+}
+
+.ptx-content table tr td.vl {
+ border-left: 2px solid #000;
+ text-align: left;
+}
+.ptx-content table tr td.cv {
+ border-right: 2px solid #000;
+ text-align: center;
+}
+
+.ptx-content table tr td.Xv {
+ border-right: 2px solid #000;
+ text-align: left;
+}
+
+.ptx-content table tr td.vc {
+ border-left: 2px solid #000;
+ text-align: center;
+}
+
+.ptx-content table tr td.hline {
+ padding: 0;
+}
+
+.ptx-content table tr td.hlinethick {
+
+ padding-left: 0px;
+ padding-right: 0px;
+
+}
+
+.ptx-content table tr td.hline hr {
+
+ margin-top:0;
+ margin-bottom:0;
+ margin-left: -1px;
+ margin-right: -1px;
+ border: 1px solid rgb(0,0,0);
+
+}
+
+.ptx-content table tr td.hlinethick hr {
+
+ margin-top:0;
+ margin-bottom:0;
+ margin-left: -1px;
+ margin-right: -1px;
+ border: 2px solid rgb(0,0,0);
+
+}
+
+.center table {
+ text-align: center;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.ptx-content table tr th.b1,
+.ptx-content table tr td.b1 {
+ border-bottom: 1px solid #000;
+}
+.ptx-content table tr th.b2,
+.ptx-content table tr td.b2 {
+ border-bottom: 2px solid #000;
+}
+.ptx-content table tr th.b3,
+.ptx-content table tr td.b3 {
+ border-bottom: 3px solid #000;
+}
+.ptx-content table tr th.b0,
+.ptx-content table tr td.b0 {
+ border-bottom: none;
+}
+
+.ptx-content table tr th.t1,
+.ptx-content table tr td.t1 {
+ border-top: 1px solid #000;
+}
+.ptx-content table tr th.t2,
+.ptx-content table tr td.t2 {
+ border-top: 2px solid #000;
+}
+.ptx-content table tr th.t3,
+.ptx-content table tr td.t3 {
+ border-top: 3px solid #000;
+}
+.ptx-content table tr th.t0,
+.ptx-content table tr td.t0 {
+ border-top: none;
+}
+
+.ptx-content table tr th.r1,
+.ptx-content table tr td.r1 {
+ border-right: 1px solid #000;
+}
+.ptx-content table tr th.r2,
+.ptx-content table tr td.r2 {
+ border-right: 2px solid #000;
+}
+.ptx-content table tr th.r3,
+.ptx-content table tr td.r3 {
+ border-right: 3px solid #000;
+}
+.ptx-content table tr th.r0,
+.ptx-content table tr td.r0 {
+ border-right: none;
+}
+
+.ptx-content table tr th.l1,
+.ptx-content table tr td.l1 {
+ border-left: 1px solid #000;
+}
+.ptx-content table tr th.l2,
+.ptx-content table tr td.l2 {
+ border-left: 2px solid #000;
+}
+.ptx-content table tr th.l3,
+.ptx-content table tr td.l3 {
+ border-left: 3px solid #000;
+}
+.ptx-content table tr th.l0,
+.ptx-content table tr td.l0 {
+ border-left: none;
+}
+
+.ptx-content table tr td img {
+ max-width: 200px;
+ margin-right: 30px;
+}
+
+.ptx-content table.notation-list tr th {
+ text-align: left;
+}
+.ptx-content table.notation-list tr td {
+ text-align:left;
+ vertical-align:top;
+}
+.ptx-content table.notation-list tr th {
+ margin-left: 2em;
+}
+.ptx-content table.notation-list tr td {
+ margin-left: 1em;
+}
+
+.ptx-content tr th.r0.l0,
+.ptx-content tr td.r0.l0 {
+ padding-left: 0.8em;
+ padding-right: 0.8em;
+}
+
+.ptx-content table tr td span.decimal {
+ float: left;
+ text-align: right;
+}
+
+.ptx-content table tr.header-vertical th {
+ writing-mode: vertical-rl;
+ padding-left: 2em;
+/*
+ transform: rotate(180deg);
+*/
+}
+
+.ptx-content table + article {
+ margin-top: 1em;
+}
+
+.ptx-content .hidden-knowl-wrapper .hiddenproof,
+.ptx-content .blob > article.hiddenproof,
+.ptx-content section > article.hiddenproof {
+ margin-top: 0.3em;
+}
+
+.ptx-content .hidden-knowl-wrapper article {
+ display: inline;
+}
+
+/* next disabled accidentally or on purpose? */
+.apretext-content figure.figure-like {
+ overflow: auto;
+}
+.ptx-content figure.figure-like {
+ margin-left: 0;
+ margin-right: 0;
+}
+.ptx-content figure.table-like {
+ margin-left: 30px;
+ margin-right: 30px;
+}
+.ptx-content figure.table-like.list {
+ margin-right: 0;
+}
+
+/* why was this ever added ?
+.ptx-content figure.figure-like figcaption {
+ overflow: hidden;
+}
+*/
+
+.ptx-content a > tt {
+ font-size: 110%;
+}
+
+.ptx-content section .videolink a:link {
+ background-size: 0;
+}
+.ptx-content .playvideo {
+ cursor: pointer;
+}
+
+.ptx-content .videobig {
+ padding-right: 0.3em;
+ padding-left: 0.3em;
+ font-size: 85%;
+/* background: #ffff66;
+*/
+ background-color: rgba(255,255,100,0.9);
+ display: inline-block;
+ position: relative;
+ top: 100px;
+ cursor: zoom-in;
+}
+.ptx-content .videobig.nofigure {
+ /* not actually used */
+}
+.ptx-content .knowl .videobig {
+ display: none;
+}
+
+.ptx-content .videosmall {
+ padding-right: 0.3em;
+ padding-left: 0.3em;
+ font-size: 80%;
+ background-color: rgba(255,255,100,0.9);
+ display: inline-block;
+ position: absolute;
+ left: -250px;
+ z-index: 1001;
+ cursor: zoom-out;
+}
+
+
+.ptx-content .exercise-like ol li table {
+ margin-bottom: 0.5em;
+}
+
+.ptx-content .exercise-like > ol li + li {
+ margin-top: 0.5em;
+}
+.ptx-content .solution > ol li + li {
+ margin-top: 0.5em;
+}
+
+/* should be the default
+.ptx-content section.worksheet > .heading,
+.ptx-content section section.worksheet > .heading,
+.ptx-content section section section.worksheet > .heading {
+ display: block;
+}
+*/
+.ptx-content section.worksheet > .heading > .codenumber {
+ display: inline-block;
+ vertical-align: top;
+}
+.ptx-content section.worksheet > .heading > .title {
+ display: inline-block;
+ max-width: 70%;
+}
+.ptx-content .heading .print-links {
+ display: inline-block;
+ float: right;
+ vertical-align: top;
+ width: 19%;
+ text-align: right;
+}
+.standalone .ptx-content .heading .print-links {
+ display: none;
+}
+.standalone.worksheet .previous-button,
+.standalone.worksheet .up-button,
+.standalone.worksheet .next-button {
+ display: none;
+}
+.standalone.worksheet .ptx-navbar .toc-toggle {
+ display: none;
+}
+.standalone.worksheet .ptx-content [data-knowl]:hover,
+.standalone.worksheet .ptx-content [data-knowl]:active,
+.standalone.worksheet .ptx-content [data-knowl].active {
+ background: none;
+ color: black;
+}
+.standalone.worksheet .ptx-content [data-knowl]::after {
+ border: none;
+}
+.standalone.worksheet .ptx-content .knowl-content {
+ padding: 0;
+}
+.standalone.worksheet .ptx-content article > .knowl-output.original {
+ margin: 0;
+}
+
+.ptx-content .appendix .heading > .type {
+ display: inline;
+}
+.ptx-content .heading.hide-type > .type {
+ display: none;
+}
+
+.ptx-content .heading .print-links > a {
+ font-family: "Open Sans";
+ font-size: 0.6em;
+ font-weight: bold;
+ padding: 0.1em 0.2em;
+ background: #ffa;
+ border: 2px solid green;
+}
+.ptx-content .heading .print-links > a.us {
+ background: #eef;
+ color: #9b1c2c;
+ border-color: #041E42;
+}
+.ptx-content .heading .print-links > a + a {
+ margin-left: 0.25em;
+}
+
+.ptx-content .autopermalink {
+ position: absolute;
+ display: inline-block;
+ top: 3px;
+ left: -1.9em;
+ font-size: 85%;
+ color: #a00;
+ opacity: 0.05;
+ margin-top: 0.1em;
+}
+
+.ptx-content li > .para > .autopermalink {
+ left: -3.4em;
+ top: 0;
+}
+.ptx-content .autopermalink a {
+ color: #a00;
+}
+.ptx-content .autopermalink > * {
+ padding-left: 0.2em;
+ padding-right: 0.2em;
+}
+/* when jumping to a permalink, push down so sticky navbar does not cover */
+:target {
+ /* scroll-snap-margin-top: 45px; for safari, except it doesn't work */
+ scroll-margin-top: 45px;
+}
+
+.ptx-content .para > .autopermalink {
+ margin-top: 0.2em;
+}
+
+.ptx-content .exercises > .autopermalink,
+.ptx-content .introduction > .autopermalink,
+.ptx-content .glossary > .autopermalink {
+ margin-top: 0.3em;
+/*
+ margin-top: 1em;
+*/
+}
+.ptx-content .appendix > .autopermalink,
+.ptx-content .chapter > .autopermalink,
+.ptx-content .index > .autopermalink,
+.ptx-content .section > .autopermalink {
+ margin-top: 0.3em;
+/*
+ margin-top: 2.7em;
+*/
+}
+.ptx-content .subsection > .autopermalink,
+.ptx-content .references > .autopermalink,
+.ptx-content .exercises > .autopermalink {
+ margin-top: 0.3em;
+/*
+ margin-top: 2.0em;
+*/
+}
+.ptx-content .figure-like > .autopermalink {
+ margin-top: 1.4em;
+}
+
+.ptx-content .subsubsection > .autopermalink {
+ margin-top: 0;
+}
+.ptx-content .exercisegroup > .autopermalink {
+/*
+ margin-top: 0.3em;
+*/
+ margin-top: 1.4em;
+}
+
+.ptx-content .autopermalink:hover {
+ opacity: 1;
+ background: #eeddff;
+}
+.ptx-content .permalink-alert {
+ position: absolute;
+ top: -3em;
+ left: 5em;
+ padding: 1.5em 2em;
+ background: #fff;
+ border: 3px solid blue;
+ z-index: 2001;
+}
+
+.navbar .indexnav {
+ position: absolute;
+ top: 46px;
+ right: 0;
+}
+.mininav {
+ float: left;
+ padding-top: 0.7ex;
+ padding-left: 1ex;
+}
+
+/* the index at the back of the book */
+
+.indexjump {
+ margin-left: 1.5ex;
+ margin-top: 0.2ex;
+ padding-top: 0;
+ float: left;
+ line-height: 0.95;
+}
+
+.indexjump a {
+ padding-left: 2.5px;
+ padding-right: 0.5px;
+ width: 2.5ex;
+/*
+ * * omitted, because we put a space in the source
+ * padding-right: 3px;
+ * */
+ margin-right: -1px;
+ color: inherit;
+ font-size: 80%;
+ text-align: center;
+}
+.indexjump a::after{
+ content: "";
+ display: inline-block;
+}
+.indexjump a:nth-of-type(14){
+ padding-left: 1.8ex;
+}
+.indexjump a:last-child {
+ padding-right: 10px;
+}
+
+.indexjump a:hover {
+ background: #eeaaff;
+}
+
+.ptx-content .indexitem {
+ margin-top: 2px;
+}
+
+.ptx-content .subindexitem {
+ margin-left: 2em;
+ font-size: 95%;
+ margin-top: -1px;
+}
+
+.ptx-content .subsubindexitem {
+ margin-left: 3.5em;
+ font-size: 95%;
+ margin-top: -1px;
+}
+
+.ptx-content .indexknowl {
+ margin-left: 0.11em;
+}
+.ptx-content em + .indexknowl {
+ margin-left: -0.25em;
+}
+.ptx-content .indexknowl a {
+ margin-left: 2em;
+}
+
+.ptx-content .indexitem .see,
+.ptx-content .subindexitem .see,
+.ptx-content .subsubindexitem .see {
+ margin-left: 1em;
+ margin-right: 0;
+}
+.ptx-content .indexitem .seealso,
+.ptx-content .subindexitem .seealso,
+.ptx-content .subsubindexitem .seealso {
+ margin-left: 1em;
+ margin-right: 0;
+}
+.ptx-content .indexitem .see em,
+.ptx-content .subindexitem .see em,
+.ptx-content .subsubindexitem .see em,
+.ptx-content .indexitem .seealso em,
+.ptx-content .subindexitem .seealso em,
+.ptx-content .subsubindexitem .seealso em {
+ margin-right: 0.25em;
+ font-style: italic;
+}
+/* note that multiple things after "see" are in separate spans */
+.ptx-content .indexitem .see + .see,
+.ptx-content .subindexitem .see + .see,
+.ptx-content .subsubindexitem .see + .see,
+.ptx-content .indexitem .seealso + .seealso,
+.ptx-content .subindexitem .seealso + .seealso,
+.ptx-content .subsubindexitem .seealso + .seealso {
+ margin-left: 0;
+ margin-right: 0;
+}
+
+.ptx-content .indexitem .indexknowl {
+ font-size: 90%;
+}
+
+.ptx-content .indexitem [data-knowl], .ptx-content .subindexitem [data-knowl], .ptx-content .indexitem [data-knowl]:hover {
+ padding-right: 2px;
+ padding-left: 2px;
+}
+.ptx-content .indexknowl [data-knowl]:hover, .ptx-content .indexknowl .active[data-knowl] {
+ margin-left: 2em;
+}
+
+.ptx-content .subindexitem .indexknowl {
+ font-size: 95%;
+}
+.ptx-content .subsubindexitem .indexknowl {
+ font-size: 95%;
+}
+
+.ptx-content .indexletter {
+ margin-top: 1.5em;
+}
+
+/* end index */
+
+.ptx-content .hidden-knowl-wrapper .heading {
+ display: inline;
+}
+.ptx-content .heading + .hidden-knowl-wrapper {
+ display: inline;
+}
+
+.ptx-content .cols2 .knowl-output, .ptx-content .cols3 .knowl-output, .ptx-content .cols4 .knowl-output, .ptx-content .cols5 .knowl-output, .ptx-content .cols5 .knowl-output {
+ width: 100%;
+}
+
+.ptx-content .cols2 + *, .ptx-content .cols3 + *, .ptx-content .cols4 + *, .ptx-content .cols5 + *, .ptx-content .cols6 + * {
+ clear: both;
+}
+/* does the next line eliminate the need for the previous line? */
+.ptx-content .cols2::after, .ptx-content .cols3::after, .ptx-content .cols4::after, .ptx-content .cols5::after, .ptx-content .cols6::after {
+ content: "";
+ display: block;
+ clear: both;
+}
+
+.ptx-content section > ol:last-child,
+.ptx-content section > ul:last-child {
+ margin-bottom: 1.5em;
+}
+/* because of */
+/* .ptx-content .colsN > li:last-child {
+ padding-bottom: 1em;
+}
+*/
+.ptx-content section > ol:last-child > li:last-child,
+.ptx-content section > ul:last-child > li:last-child {
+ padding-bottom: 0em;
+}
+
+/* does this do anything which is not accomplished by the colsN::after above? */
+/* seems not
+.ptx-content .cols2:last-child::after, .ptx-content .cols3:last-child::after, .ptx-content .cols4:last-child::after, .ptx-content .cols5:last-child::after, .ptx-content .cols6:last-child::after {
+ content: "";
+ display: block;
+ clear: both;
+}
+*/
+
+.ptx-content .cols2 > li:nth-child(2n+1),
+.ptx-content .cols3 > li:nth-child(3n+1),
+.ptx-content .cols4 > li:nth-child(4n+1),
+.ptx-content .cols5 > li:nth-child(5n+1),
+.ptx-content .cols6 > li:nth-child(6n+1) {
+ clear: left;
+}
+/* need to repeat for .colsN */
+.ptx-content .exercise-like ol.cols2 li {
+ margin-top: 0.5em;
+}
+
+.ptx-content .cols2 > li,
+.ptx-content .cols3 > li,
+.ptx-content .cols4 > li,
+.ptx-content .cols5 > li,
+.ptx-content .cols6 > li {
+ float: left;
+}
+
+.ptx-content .incontext {
+ display: block;
+ font-size: 85%;
+ text-align: right;
+}
+
+.ptx-content .terminology {
+ font-style: italic;
+ font-weight: bold;
+}
+
+.ptx-content .emphasis {
+ font-style: italic;
+}
+.ptx-content .emphasis .emphasis {
+ font-weight: bold;
+}
+
+/* the "pink flash" when navigating to a target
+*/
+:target {
+ animation: target-fade 15s 1;
+}
+@-webkit-keyframes target-fade {
+ 0% { background-color: rgba(120,0,120,.3); }
+ 100% { background-color: inherit;
+ opacity: 1; }
+}
+@-moz-keyframes target-fade {
+ 0% { background-color: rgba(120,0,120,.3); }
+ 100% { background-color: inherit;
+ opacity: 1; }
+}
+
+
+.ptx-content .autoterm [knowl], .ptx-content .autoterm [knowl]:after {
+ font-weight: inherit;
+ color: inherit;
+ padding: 0;
+ margin-bottom: inherit;
+ border-bottom: inherit;
+ border-bottom-color: inherit;
+}
+
+.ptx-content .autoterm [knowl]:hover {
+ background: #ffddff;
+ border-top: 2px dotted purple;
+ border-bottom: 1px dotted red;
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+}
+
+.ptx-content ol li.custom-list-style-type {
+ list-style-type: none;
+}
+
+.ptx-content ol li.custom-list-style-type:before {
+ content: attr(label) "\00A0\00A0 ";
+}
+
+.ptx-content ol.no-marker,
+.ptx-content ul.no-marker,
+.ptx-content li.no-marker {
+ list-style-type: none;
+}
+
+.ptx-content ol.decimal {
+ list-style-type: decimal;
+}
+.ptx-content ol.lower-alpha {
+ list-style-type: lower-alpha;
+}
+.ptx-content ol.upper-alpha {
+ list-style-type: upper-alpha;
+}
+.ptx-content ol.lower-roman {
+ list-style-type: lower-roman;
+}
+.ptx-content ol.upper-roman {
+ list-style-type: upper-roman;
+}
+.ptx-content ul.disc {
+ list-style-type: disc;
+}
+.ptx-content ul.square {
+ list-style-type: square;
+}
+.ptx-content ul.circle {
+ list-style-type: circle;
+}
+.ptx-content ol.no-marker,
+.ptx-content ul.no-marker {
+ list-style-type: none;
+}
+
+/* needed for dl, but probably won't cause harm elsewhere */
+.ptx-content section,
+.ptx-content article,
+.ptx-content figure {
+ clear: both;
+}
+
+/* dl is used for glossaries and descriptions lists.
+ Glossaries are simple: bold word by itself on a line.
+ Definition indented on the next line.
+ Vertical space before the next term.
+
+ Description lists are more complicated. The wider version
+ (refering to the horizontal indentation of the definition;
+ this is the default)
+ has the (wrapped) term inline with the definition.
+
+ The narrow version is complicated because the term is inline
+ with its definition if it fits, otherwise it is on the line above.
+ That means the vertical space between entries can't be handled by
+ a top margin on the dt. Instead we have an ::after on the dd .
+ */
+
+.ptx-content dl {
+ margin-top: 1em;
+ margin-left: 0;
+ margin-bottom: 0;
+ overflow: hidden;
+}
+.ptx-content dl dd {
+ margin-top: 0;
+}
+.ptx-content dl dd::after {
+ content: "";
+ display: block;
+ clear: both;
+}
+.ptx-content dl.glossary dt {
+ margin-top: 1.25em;
+}
+.ptx-content dl.description-list dt,
+.ptx-content dl.description-list dd {
+ margin-top: 1em;
+}
+.ptx-content dl.description-list.narrow dt {
+ margin-top: 0;
+}
+.ptx-content dl.glosary dt:first-of-type,
+.ptx-content dl.description-list dt:first-of-type,
+.ptx-content dl.glosary dd:first-of-type,
+.ptx-content dl.description-list dd:first-of-type {
+ margin-top: 0;
+}
+.ptx-content dl dd .para {
+ margin-top: 1em;
+}
+.ptx-content dl dt > .para:first-child, .ptx-content dl dd > .para:first-child {
+ margin-top: 0;
+}
+
+
+.ptx-content dl > dt {
+ font-weight: bold;
+ max-width: 55ex;
+}
+
+.ptx-content dl.description-list dt {
+ float: left;
+ clear: left;
+ text-align: right;
+ width: 18ex;
+}
+.ptx-content dl.description-list.narrow dt,
+.ptx-content dl.glossary dt {
+ text-align: left;
+}
+.ptx-content dl.glossary dd {
+ margin-left: 5ex;
+}
+.ptx-content dl.description-list dd {
+ margin-left: 22ex;
+}
+.ptx-content dl.description-list.narrow dd {
+ margin-left: 12ex;
+}
+.ptx-content dl.description-list dt:first-of-type {
+ clear: none;
+}
+.ptx-content dl.description-list.narrow dd::after {
+ content: "";
+ display: block;
+ height: 1em;
+ clear: left;
+}
+.ptx-content dl.description-list.narrow dd:last-child::after {
+ height: 0;
+}
+
+.ptx-content dl.description-list dt {
+ float: left;
+ clear: both;
+ margin-right: 1ex;
+}
+.ptx-content dl.description-list.narrow dt {
+ width: unset;
+ max-width: 55ex;
+ text-align: left;
+}
+.ptx-content dl.description-list.narrow dd {
+ margin-left: 0;
+ margin-top: 0;
+ width: 31em;
+ max-width: calc(100% - 12ex);
+ float: right;
+ clear: right;
+}
+
+.ptx-content dl.description-list + * {
+ clear: both;
+}
+
+@media screen and (max-width: 480px) {
+ .ptx-content dl.description-list dt {
+ float: none;
+ margin-left: 0;
+ text-align: left;
+ }
+ .ptx-content dl.description-list dd,
+ .ptx-content dl.description-list.narrow dd {
+ margin-top: 0.5em;
+ margin-left: 3em;
+ max-width: calc(100% - 3em);
+ }
+}
+/* where do we have nested dl? */
+.ptx-content dl.description-list dl dt {
+ width: 8ex;
+}
+.ptx-content dl.description-list dd dd {
+ margin-left: 18ex;
+}
+.ptx-content dl.description-list dl dd {
+ margin-left: 12ex;
+}
+.ptx-content [data-knowl] > mjx-mrow .TEX-I {
+ font-family: MJXZERO !important;
+ font-style: normal !important;
+}
+
+/* remove this when MathJax fixes the bug that was setting the width to 0 */
+/* as in $x=0$. becomes $x=0\text{.}$ */
+.ptx-content .knowl mjx-mtext > mjx-utext,
+.ptx-content mjx-mtext > mjx-utext {
+ width: revert !important;
+}
+.ptx-content mjx-msup mjx-utext,
+.ptx-content mjx-msub mjx-utext {
+ display: inline;
+}
+
+/* to stop things being blue when rendering MathJax with SVG */
+a.mjx-svg-href {
+ fill: inherit;
+ stroke: inherit;
+}
+
+.displaymath + .para {
+ margin-top: 0
+}
+
+/* for long math formulas and tables to scroll on small screens */
+@media screen and (max-width: 943px) {
+ .ptx-content .displaymath {
+ position: relative;
+ overflow-x: auto;
+ }
+/* maybe the remainder of this case is subsumed by the above,
+ and also does not apply to MJ3 */
+ .ptx-content .mjx-chtml.MJXc-display {
+ /*Allow users on smaller screens to scroll equations*/
+ /*horizontally when they don't fit on the screen*/
+ overflow-x: auto;
+ overflow-y: hidden;
+ }
+ .ptx-content .figure-like {
+ overflow-x: auto;
+ }
+
+ .ptx-content #MathJax_ZoomFrame {
+ position: static;
+ background: white;
+ }
+ .ptx-content #MathJax_Zoom {
+ background-color: inherit;
+ border: 0;
+ padding: 0;
+ position: absolute;
+ overflow-x: auto;
+ overflow-y: visible;
+ left: 10% !important;
+ max-height: none !important;
+ }
+}
+
+/* http://sites.wcsu.edu/mbxml/OER_Linear_Alg/glossary.html
+ to fix the extra margin on top of the next term when
+ the previous definition ends in display math
+ May need to make less specific
+*/
+.ptx-content dd .displaymath:last-child .MJXc-display {
+ margin-bottom: 0;
+}
+
+.floatnav {
+ margin-top: 8px;
+ margin-left: 50px;
+}
+
+.floatnav a {
+ padding-left: 3px;
+/*
+ * omitted, because we put a space in the source
+ padding-right: 3px;
+*/
+ margin-right: -1px;
+ color: inherit;
+}
+
+/* Example 4.8 of sample article (compare main page of sample book (4^{th} edition)`*/
+.ptx-content a .heading .mjx-chtml {
+ z-index: 1;
+ background: #fff;
+}
+.ptx-content .hidden-knowl-wrapper [data-knowl]::after, .ptx-content .hidden-knowl-wrapper [data-knowl]:hover::after, .ptx-content .hidden-knowl-wrapper .active[data-knowl]::after {
+ right: 7px;
+}
+
+.floatnav a:hover {
+ background: #eeaaff;
+}
+
+.ptx-content .unselectable { /* from Alex Jordan */
+ user-select: none; /* Non-prefixed version, currently
+ not supported by any browser */
+}
+
+/* Adapted from William Hammond (attributed to David Carlisle) */
+/* "mathjax-users" Google Group, 2015-12-27 */
+
+.ptx-content .latex-logo {font-family: "PT Serif", "Times New Roman", Times, serif;}
+
+.ptx-content .latex-logo .A {font-size: 75%; text-transform: uppercase; vertical-align: .5ex;
+ margin-left: -.48em; margin-right: -.2em;}
+
+.ptx-content .latex-logo .E {vertical-align:-.5ex; text-transform: uppercase;
+ margin-left: -.18em; margin-right: -.12em; }
+
+.ptx-content .fillin {
+ display: inline-block;
+ border-bottom-style: solid;
+ border-width: 1px;
+ margin-right: 0.1em;
+ margin-bottom: -0.25em;
+}
+.ptx-content .fillin.underline {
+ display: inline-block;
+ border-bottom-style: solid;
+ border-width: 1px;
+ margin-right: 0.1em;
+ margin-bottom: -0.25em;
+}
+.ptx-content .fillin.box {
+ display: inline-block;
+ border: none;
+ margin-left: 0.1em;
+ margin-right: 0.1em;
+ margin-bottom: -0.25em;
+ outline: 1px solid black;
+ height: 1.3em;
+}
+.ptx-content .fillin.shade {
+ display: inline-block;
+ border: none;
+ margin-right: 0.1em;
+ margin-left: 0.1em;
+ margin-bottom: -0.25em;
+ background-color: #eee;
+ height: 1.3em;
+}
+
+
+/*
+ * .hiddenproof
+ */
+
+/* knowlified proofs are in an article.hiddenproof */
+/* .ptx-content .hiddenproof .heading, ???? can't happen, because the a does the hiding? */
+.ptx-content .hiddenproof > a > .heading {
+ font-style: italic;
+ font-weight: normal;
+}
+
+/* show wide equation overflow even when no scroll bars,
+from Jiří Lebl */
+.ptx-content .MJXc-display, .ptx-content .knowl-output .knowl-output .knowl-output .knowl-output .MJXc-display ,
+.ptx-content pre.prettyprint,
+.ptx-content pre.plainprint,
+.ptx-content pre.console,
+.ptx-content .code-box {
+ background-image: linear-gradient(to right, white, white), linear-gradient(to right, white, white), linear-gradient(to right, rgba(0,0,0,.25), rgba(255,255,255,0)), linear-gradient(to left, rgba(0,0,0,.25), rgba(255,255,255,0));
+ background-position: left center, right center, left center, right center;
+ background-repeat: no-repeat;
+ background-color: inherit;
+ background-size: 20px 100%, 20px 100%, 10px 100%, 10px 100%;
+ background-attachment: local, local, scroll, scroll;
+}
+.ptx-content .runestone .code-box {
+ background-image: none;
+}
+.ptx-content .knowl-output .MJXc-display {
+ background-image: linear-gradient(to right, var(--knowlbackground), var(--knowlbackground)), linear-gradient(to right, var(--knowlbackground), var(--knowlbackground)), linear-gradient(to right, rgba(0,0,0,.25), var(--knowlbackground)), linear-gradient(to left, rgba(0,0,0,.25), var(--knowlbackground));
+}
+/* this should have a variable name, maybe? */
+.ptx-content .knowl-output.original .MJXc-display {
+ background: inherit;
+}
+
+.ptx-content .assemblage-like .MJXc-display {
+/*
+ background-image: none;
+ background-image: linear-gradient(to right, #f4f4fe, #f4f4fe), linear-gradient(to right, #f4f4fe, #f4f4fe), linear-gradient(to right, rgba(0,0,0,.25), rgba(242,242,254,0)), linear-gradient(to left, rgba(0,0,0,.25), rgba(242,242,254,0));
+*/
+ background-image: linear-gradient(to right, var(--assemblagebackground), var(--assemblagebackground)), linear-gradient(to right, var(--assemblagebackground), var(--assemblagebackground)), linear-gradient(to right, rgba(0,0,0,.25), var(--assemblagebackground)), linear-gradient(to left, rgba(0,0,0,.25), var(--assemblagebackground));
+}
+
+
+.ptx-content .knowl-output .knowl-output .MJXc-display {
+ background-image: none;
+ background-image: linear-gradient(to right, #fffff5, #fffff5), linear-gradient(to right, #fffff5, #fffff5), linear-gradient(to right, rgba(0,0,0,.25), rgba(255,255,243,0)), linear-gradient(to left, rgba(0,0,0,.25), rgba(255,255,243,0));
+}
+.ptx-content .knowl-output .knowl-output .knowl-output .MJXc-display {
+ background-image: none;
+ background-image: linear-gradient(to right, #fff5fe, #fff5fe), linear-gradient(to right, #fff5fe, #fff5fe), linear-gradient(to right, rgba(0,0,0,.25), rgba(255,243,254,0)), linear-gradient(to left, rgba(0,0,0,.25), rgba(255,243,254,0));
+}
+
+
+
+/* not sure where this was being used, but it made short knowls
+ * look bad, like the hint here:
+ * SAFurtherReading.html
+*/
+.ptx-content .knowl-output .knowl-content > *:last-child:not(.incontext) {
+ margin-bottom: 0.5em;
+}
+.ptx-content .knowl-output .knowl .knowl-content > .solution-like,
+.ptx-content .knowl-output .knowl .knowl-content > .solution-like:not(.incontext) {
+ margin-bottom: 0.15em;
+}
+.ptx-content .knowl-output .knowl .knowl-content > .solution-like.hint {
+ border-left: 1px solid #0f0;
+ padding-left: 0.35em;
+ background: #efe;
+}
+.ptx-content .knowl-output .knowl .knowl-content > .solution-like.answer {
+ border-left: 2px solid #00f;
+ padding-left: 0.35em;
+ background: #eef;
+}
+.ptx-content .knowl-output .knowl .knowl-content > .solution-like.solution {
+ border-left: 3px solid #c0c;
+ padding-left: 0.5em;
+ background: #fef;
+}
+
+.ptx-content .knowl-content > article:first-child,
+.ptx-content .knowl-content > .solution-like:first-child {
+/* padding, not margin, to get colored background (and not be absorbed) */
+ padding-top: 0.25em;
+}
+.ptx-content .knowl-footer {
+ display: none;
+}
+
+.ptx-content .exercisegroup > .conclusion {
+ margin-left: 1.5em;
+}
+
+.ptx-content .exercise-like .introduction {
+ display: inline;
+}
+.ptx-content .exercise-like .introduction .heading {
+ display: inline;
+}
+.ptx-content .exercise-like .introduction .para:first-child {
+ display: inline;
+}
+.ptx-content .exercise-like .introduction::after {
+ content: "";
+ display: block;
+}
+.ptx-content .exercise-like .conclusion::before {
+ content: "";
+ display: block;
+ margin-top: 0.25em;
+}
+
+
+/* if hints and solutions are in .posterior, then
+ * some of the above styling does not apply */
+
+.ptx-content article.exercise-like + .posterior {
+ margin-top: -0.75em;
+}
+
+
+.ptx-content article.example-like .hint {
+ display: block;
+ margin-top: -0.75em;
+}
+
+
+.ptx-content .exercisegroup .exercisegroup-exercises.cols2, .ptx-content .exercisegroup .exercisegroup-exercises.cols3, .ptx-content .exercisegroup .exercisegroup-exercises.cols4, .ptx-content .exercisegroup .exercisegroup-exercises.cols5, .ptx-content .exercisegroup .exercisegroup-exercises.cols6 {
+ width: 100%;
+ display:inline-flex;
+ flex-direction:row;
+ flex-wrap:wrap;
+ justify-content:flex-start;
+ align-items:flex-start;
+ align-content:flex-start;
+}
+
+.ptx-content .exercisegroup .exercisegroup-exercises.cols1 {
+ display:inline;
+}
+
+.ptx-content .exercisegroup .exercisegroup-exercises.cols1 .knowl-output {
+ display: block;
+}
+
+.ptx-content .exercisegroup .cols1 > article.exercise-like {flex-basis: calc(100% - 2em);}
+.ptx-content .exercisegroup .cols2 > article.exercise-like {flex-basis: calc(50% - 2em);}
+.ptx-content .exercisegroup .cols3 > article.exercise-like {flex-basis: calc(33.33% - 2em);}
+.ptx-content .exercisegroup .cols4 > article.exercise-like {flex-basis: calc(25% - 2em);}
+.ptx-content .exercisegroup .cols5 > article.exercise-like {flex-basis: calc(20% - 2em);}
+.ptx-content .exercisegroup .cols6 > article.exercise-like {flex-basis: calc(16.66% - 2em);}
+
+/* math directly adajacent to words is wrapped to avoid bad line breaks */
+.ptx-content .mathword {
+ white-space: nowrap;
+}
+
+.ptx-content .unit,
+.ptx-content .quantity {
+ white-space: nowrap;
+ word-spacing: -0.25ex;
+ margin-right: 0.125em;
+}
+.ptx-content .unit sub,
+.ptx-content .unit sup,
+.ptx-content .quantity sub,
+.ptx-content .quantity sup {
+ word-spacing: normal;
+}
+
+.ptx-content .code-inline,
+.ptx-content .code-block,
+.ptx-content .console,
+.ptx-content .program,
+.ptx-content .program code {
+ font-family: "Inconsolata", monospace;
+}
+.ptx-content .code-block,
+.ptx-content .console,
+.ptx-content .program {
+ overflow-x: auto;
+}
+
+.ptx-content .code-inline {
+ font-size: 1em;
+ white-space: pre;
+ color: inherit;
+ background: #eeeeee;
+ border: 1px solid #dddddd;
+ padding: 0.0625em 0.25em;
+ margin-left: 0.2em;
+ margin-right: 0.2em;
+ border-radius: 0.2em;
+}
+.ptx-content .code-inline:first-child {
+ margin-left: 0;
+}
+.ptx-content .title .code-inline {
+ padding-left: 0;
+ padding-right: 0;
+ margin-left: 0;
+ margin-right: 0;
+}
+.ptx-content a .code-inline {
+ background: #f6f6f6;
+}
+
+.ptx-content .kbdkey {
+ background: #f1f1f1;
+ border: 1px solid #dddddd;
+ border-radius: 3px;
+ padding: 1px 2px 0 2px;
+ vertical-align: 0.1em;
+ font-size: 110%;
+ line-height: 1;
+ box-shadow: 2px 2px grey;
+ display: inline-block;
+ margin-right: 3px;
+}
+.ptx-content .kbdkey {
+ color: #333;
+}
+
+.ptx-content .sagecell_sessionOutput pre {
+ font-family: 'Inconsolata', monospace;
+}
+
+.ptx-content .sagecell {
+ white-space: normal;
+ margin-top: 1.25em;
+ margin-bottom: 1.25em;
+}
+.ptx-content .sage-interact.sagecell {
+ margin: 0;
+}
+
+.ptx-content .sagecell_evalButton {
+ font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: 16px;
+ padding: 0 0.65em;
+}
+.ptx-content .sagecell_evalButton {
+ cursor: pointer;
+ display: inline-block;
+ vertical-align: middle;
+ /* Disable accidental text-selection */
+ user-select: none;
+ /* Truncate overflowing text with ellipsis */
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ border-width: 1px;
+ border-style: solid;
+ font-weight: bold;
+ border-radius: 3px;
+}
+.ptx-content .sagecell_evalButton {
+ color: #383838;
+ background-image: linear-gradient(#f7f7f7, #bbbbbb);
+ border-color: #c4c4c4;
+}
+.ptx-content .sagecell_evalButton:hover {
+ color: #181868;
+ background-image: linear-gradient(#bbbbbb, #f7f7f7);
+}
+.ptx-content .sagecell_evalButton:focus,
+.ptx-content .sagecell_evalButton:active {
+ color: #20160b;
+ background-image: linear-gradient(#ff6852, #ffd7d1);
+ border-color: #ff2822;
+}
+
+.ptx-content .sagecell .sagecell_editor {
+ margin-bottom: 8px;
+}
+
+.ptx-content .booktitle {
+ font-style: oblique;
+}
+
+.ptx-content .objectives > .heading,
+.ptx-content .outcomes > .heading {
+ font-size: 1.25em;
+}
+
+/* Born-hidden example with a very long title */
+/* http://physics.thomasmore.edu/ConnectedPhysics/sss-netforce.html */
+.ptx-content a .heading {
+ white-space: normal;
+}
+
+
+.ptx-content .solutions > a, .ptx-content .solutions > a:hover, .ptx-content .solutions > a.active,
+.ptx-content .instructions > a, .ptx-content .instructions > a:hover, .ptx-content .instructions > a.active {
+ display: inline-block;
+ margin-right: 1.5em;
+}
+
+/* When the knowl is a Hint, Answer, or Solution, put a little
+ triangle in front of it */
+.ptx-content .solutions > a::before,
+.ptx-content .instructions > a::before {
+ content: '\25ba';
+ font-size: 70%;
+ color: #06a;
+ position: relative;
+ top: -2px;
+ right: 3px;
+}
+.ptx-content .solutions > a.active::before,
+.ptx-content .instructions > a.active::before {
+ content: '\25bc';
+ animation-name: solutiontriangle;
+ animation-duration: 3s;
+ animation-iteration-count: 1;
+}
+.ptx-content .solutions > a[data-knowl]::after,
+.ptx-content .instructions > a[data-knowl]::after {
+ left: 12px;
+}
+@keyframes solutiontriangle {
+ from {content: '\25ba';}
+ to {content: '\25bc';}
+}
+
+.ptx-content section.solutions {
+ font-size: 90%;
+ padding-left: 1em;
+ border-left: 1em solid #eeeeee;
+}
+
+.ptx-content.ptx-content > section.solutions:first-child {
+ padding-left: 0;
+ border-left: none;
+}
+
+.ptx-content article.example-like > .solution-like,
+.ptx-content article.exercise-like > .solution-like {
+ margin-top: 1.0em;
+ padding-left: 0.7em;
+}
+.ptx-content article.example-like > .solution-like > .heading,
+.ptx-content article.exercise-like > .solution-like > .heading {
+ font-size: 100%;
+ font-weight: 700;
+ margin-right: 0.25em;
+ display: inline;
+}
+.ptx-content article.example-like > .solution-like > .heading + .para,
+.ptx-content article.exercise-like > .solution-like > .heading + .para {
+ display: inline;
+}
+
+
+
+
+/* these were taken from the local add-on.css.
+ * need to check if the are needed.
+ */
+
+.ptx-content article > figure:first-child {
+ margin-top: 0;
+}
+
+.ptx-content figure + figure,
+.ptx-content figure + .sidebyside,
+.ptx-content .sidebyside + .sidebyside,
+.ptx-content article + figure,
+.ptx-content .sidebyside + figure {
+ padding-top: 1.0em;
+}
+
+
+.ptx-content img {
+ display: inline-block;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+/* is .cs for commutative diagrams? */
+.ptx-content img.cs {
+ display: block;
+ margin-top: 20px;
+ margin-bottom: 20px;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.ptx-content img:not(.cs) {
+ max-width: 650px;
+}
+
+.ptx-content .tabular-box.natural-width table {
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.ptx-content figure img {
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.ptx-content figure img + img {
+ margin-top: 30px;
+}
+
+.ptx-content div.center img {
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.ptx-content div.center + div.center > img {
+ margin-top: 60px;
+}
+
+.ptx-content div.center > img + img {
+ margin-top: 60px;
+}
+
+.ptx-content figure table {
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.ptx-content .caption {
+ margin-top: 10px;
+ margin-left: auto;
+ margin-right: auto;
+ font-size: 100%;
+ text-align: center;
+}
+
+
+.ptx-content figure.wrap img {
+ width: 250px;
+}
+.ptx-content figure.wrap {
+ float: right;
+ margin-right: 0;
+ margin-left: 30px;
+}
+.ptx-content figure img.wrap {
+ float: right;
+ margin: 0;
+}
+
+.ptx-content figure figcaption.wrap {
+ margin: 10px;
+ font-size: 100%;
+ text-align: center;
+}
+
+.ptx-content figure, .ptx-content .image-box {
+ margin-top: 0.5em;
+}
+.ptx-content figure .image-box {
+ margin-top: 0;
+}
+.ptx-content .sidebyside figure {
+ margin-top: 0;
+}
+.ptx-content .image-box img, /* See sample article Graphics section */
+.ptx-content img.contained, /* See sample article Graphics section */
+.ptx-content .sbspanel img {
+ /* previously these were hard-coded in the HTML */
+ width: 100%;
+ height: auto;
+}
+
+/* these seem to be obsolete because an img has to be in a .image-box .
+ Check on that.
+.ptx-content .sbspanel > img:not(.draw_on_me):not(.mag_popup),
+.ptx-content figure > img:not(.draw_on_me):not(.mag_popup),
+.ptx-content figure > div > img:not(.draw_on_me):not(.mag_popup),
+*/
+.ptx-content .image-box > img:not(.draw_on_me):not(.mag_popup) {
+ cursor: zoom-in;
+}
+.ptx-content img.mag_popup {
+ border: 1px solid #666;
+ box-shadow: 4px 6px 4px #999;
+ cursor: zoom-out;
+ max-width: 600px;
+}
+.ptx-content .mag_popup_container {
+ width:100%;
+ position:absolute;
+ z-index:1001;
+ overflow-x: visible;
+}
+
+.ptx-content .image-box,
+.ptx-content .audio-box,
+.ptx-content .video-box,
+.ptx-content .asymptote-box {
+ position: relative;
+}
+.ptx-content .image-box .asymptote-box iframe.asymptote,
+.ptx-content iframe.asymptote,
+.ptx-content .video-box .video,
+.ptx-content .video-box .video-poster {
+ position: absolute; top: 0; left: 0; width: 100%; height: 100%;
+}
+.ptx-content section > .audio-box,
+.ptx-content section > .video-box,
+.ptx-content section > .image-box {
+ margin-top: 0.75em;
+}
+
+.ptx-content .audio {
+ width: 100%;
+}
+
+.caption .heading {
+ font-weight: bold;
+}
+
+.caption .counter {
+ font-weight: bold;
+}
+
+.ptx-content div.quote {
+ padding-left: 40px;
+ padding-right: 10px;
+ margin-bottom: 1em;
+}
+
+.minipage + .minipage {
+ display: inline-block;
+}
+
+.ptx-content code.inline {
+ background: none;
+ border: none;
+}
+
+/* These next are for Prism */
+.ptx-content pre.program,
+.ptx-content pre.program code,
+.ptx-content pre.code-block,
+.ptx-content pre.code-block code {
+ line-height: 1.1;
+}
+.ptx-content section > .code-box,
+.ptx-content .para + .code-box,
+.ptx-content section > .code-block,
+.ptx-content .para + .code-block {
+ margin-top: 1em;
+}
+
+.ptx-content pre.program,
+.ptx-content pre.code-block {
+ margin-top: 0;
+ padding-left: 15px;
+ border-left: 1px solid #aaa;
+ font-size: 93%;
+ overflow: auto;
+}
+.ptx-content pre.program:before,
+.ptx-content pre.code-block:before {
+ content:' ';
+ font-size: 50%;
+ border-top: 1px solid #aaa;
+ display: block;
+ margin-right: auto;
+ margin-left: -15px;
+ width: 3.0em;
+}
+
+.ptx-content pre[data-line].program,
+.ptx-content pre[data-line].code-block
+{
+ padding-left: 2.5em;
+}
+
+.ptx-content pre[data-line].program:before,
+.ptx-content pre[data-line].code-block:before {
+ margin-left: -5em;
+}
+
+.ptx-content pre.program.line-numbers,
+.ptx-content pre.code-block.line-numbers
+{
+ padding-left: 3.5em;
+ overflow: visible;
+}
+
+.ptx-content pre.program.line-numbers:before,
+.ptx-content pre.code-block.line-numbers:before {
+ margin-left: -7em;
+}
+
+/* fine tune next 3 based on line-height of surrounding pre */
+.ptx-content pre[data-line].line-numbers code {
+ padding-top: 0em; /* increase with line-height */
+}
+.ptx-content pre[data-line].line-numbers .line-highlight {
+ margin-top: 0em; /* decreases as line-height increases */
+}
+.ptx-content pre[data-line]:not(.line-numbers) .line-highlight {
+ margin-top: 0.6em; /* decreases as line-height increases */
+}
+
+
+/* next is for the old code formatting js */
+.ptx-content pre.prettyprint,
+.ptx-content pre.plainprint {
+ margin-top: 0;
+ padding-left: 15px;
+ border-left: 1px solid #aaa;
+ font-size: 93%;
+ overflow: auto;
+/* preveiously turned off the border and padding from pretty.css */
+}
+
+.ptx-content pre.prettyprint:before,
+.ptx-content pre.plainprint:before {
+ content:'';
+ font-size: 50%;
+ border-top: 1px solid #aaa;
+ display: block;
+ margin-right: auto;
+ margin-left: -15px;
+ width: 2.5em;
+}
+
+.ptx-content .objectives {
+ margin-bottom: 1.25em;
+}
+
+
+.ptx-content ol > li {
+ padding-left: 0.25em;
+}
+.ptx-content ol.cols2 > li, .ptx-content ul.cols2 > li { width: calc(49% - 1.75em); min-width: 190px}
+/*
+.ptx-content ol.cols2 > li, .ptx-content ul.cols2 > li { width: 50%; min-width: 240px}
+*/
+.ptx-content ol.cols3 > li, .ptx-content ul.cols3 > li { width: calc(33% - 1.25em); min-width: 160px}
+/*
+.ptx-content ol.cols3 > li, .ptx-content ul.cols3 > li { width: 31%; min-width: 160px}
+*/
+.ptx-content ol.cols4 > li, .ptx-content ul.cols4 > li { width: calc(24.5% - 1.25em); min-width: 100px}
+.ptx-content ol.cols5 > li, .ptx-content ul.cols5 > li { width: calc(19.5% - 0.75em); min-width: 90px}
+.ptx-content ol.cols6 > li, .ptx-content ul.cols6 > li { width: calc(16.3% - 0.5em); min-width: 80px}
+/* sample-article sec 5 */
+.ptx-content ul.cols2 > li:nth-child(odd), .ptx-content ol.cols2 > li:nth-child(odd) {
+ padding-right: 1.5em;
+ padding-right: 2em;
+}
+
+/*
+.ptx-content .cols2 > li:first-child,
+.ptx-content .cols3 > li:first-child,
+.ptx-content .cols4 > li:first-child,
+.ptx-content .cols5 > li:first-child,
+.ptx-content .cols6 > li:first-child {
+ margin-top: 0.5em;
+}
+*/
+
+.ptx-content .cols2 ol,
+.ptx-content .cols3 ol,
+.ptx-content .cols4 ol,
+.ptx-content .cols5 ol,
+.ptx-content .cols6 ol {
+ padding-left: 0.7em;
+}
+.ptx-content .exercisegroup-exercises > article.exercise-like {
+ margin-top: 1em;
+}
+
+
+/* see http://bob.cs.sonoma.edu/IntroCompOrg-RPi/exercises-10.html
+ for examples of an odd number of items in a cols2, followed by
+ a hint */
+.ptx-content .cols2 > li:last-child:nth-child(odd) {
+ float: none !important;
+ padding-top: 0.5em;
+}
+
+
+/* http://spot.pcc.edu/math/APEXCalculus/sec_prod_quot_rules.html
+ * solution to Example 2.4.14
+ */
+.ptx-content .solution ol li {
+ margin-top: 1em;
+ padding-left: 0.5em;
+}
+
+/* solution to Example 4.2.12 in http://spot.pcc.edu/math/orcca-draft/orcca/section-radical-expressions-and-rational-exponents.html
+*/
+.ptx-content .solution ol li > .para:first-child, .ptx-content .solution ol li > .displaymath:first-child {
+ vertical-align: top;
+ display: inline-block;
+ margin-top: 0;
+}
+.ptx-content .solution ol li > .displaymath:first-child .MJXc-display {
+ margin-top: 0;
+}
+
+
+.ptx-content .exercise-like ol li {
+ margin-top: 1em;
+ padding-left: 0.5em;
+}
+
+.ptx-content .exercise-like > .cols2 > li { width: calc(49% - 2.5em)}
+.ptx-content .exercise-like > .cols3 > li { width: calc(33% - 2.5em)}
+.ptx-content .exercise-like > .cols4 > li { width: calc(24.5% - 2.5em)}
+.ptx-content .exercise-like > .cols5 > li { width: calc(19.5% - 2.5em)}
+.ptx-content .exercise-like > .cols6 > li { width: calc(16.3% - 2.5em)}
+
+/* A colsN in a knowl needs to be narrower because of the margin/padding of the knowl */
+.ptx-content .knowl .exercise-like > .cols2 > li { width: calc(49% - 2em)}
+/* next 4 not actually checked: just copied from cols2 */
+.ptx-content .knowl .exercise-like > .cols3 > li { width: calc(33% - 2em)}
+.ptx-content .knowl .exercise-like > .cols4 > li { width: calc(24.5% - 2em)}
+.ptx-content .knowl .exercise-like > .cols5 > li { width: calc(19.5% - 2em)}
+.ptx-content .knowl .exercise-like > .cols6 > li { width: calc(16.3% - 2em)}
+
+
+.ptx-content .exercise-like ol li > .para:first-child {
+ vertical-align: top;
+ display: inline-block;
+ margin-top: 0;
+}
+
+.ptx-content .contributor .contributor-name {
+ font-variant: small-caps;
+}
+.ptx-content .contributor .contributor-info {
+ font-size: 88%;
+ font-style: italic;
+ margin-left: 3ex;
+}
+.ptx-content .contributor {
+ margin-top: 3ex;
+}
+.ptx-content .contributor + .contributor {
+ margin-top: 1.5ex;
+}
+
+.ptx-content .contributor + .para {
+ margin-top: 3ex;
+}
+
+.ptx-content .frontmatter .contributors, .ptx-content .book .contributors {
+ text-align: center;
+ font-style: normal;
+}
+
+.pretext .searchwrapper {
+ max-width: 900px;
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ margin-bottom: 39px;
+}
+
+.pretext .searchwrapper .cse .gsc-control-cse, .searchwrapper .gsc-control-cse {
+ padding: 0;
+ border: none;
+ width: 25ex;
+}
+.pretext .searchwrapper .cse .gsc-search-button input.gsc-search-button-v2, .searchwrapper input.gsc-search-button-v2 {
+ padding: 2px 2px;
+}
+.pretext .searchwrapper form.gsc-search-box {
+ margin: 0;
+}
+.pretext .searchwrapper table.gsc-search-box {
+ margin: 0;
+}
+.pretext .searchwrapper .gsc-search-box-tools .gsc-search-box .gsc-input {
+ padding: 0;
+}
+.pretext .searchwrapper .gsib_a {
+ padding: 0 0 0 5px;
+}
+.pretext .searchwrapper .gsc-input-box {
+ height: 3.0ex;
+}
+.pretext .searchwrapper form.gsc-search-box {
+ font-size: 12px;
+}
+
+/* turn off the green parentheses Alex does not like */
+.ptx-content div.CodeMirror span.CodeMirror-matchingbracket {color: #090;}
+
+.ptx-content .image-archive {
+ margin-left: auto;
+ margin-right: auto;
+ margin-bottom: 0; /* was auto */
+ margin-top: 0.75em;
+ padding-bottom: 0.25em;
+ text-align: center;
+}
+.ptx-content .image-archive > a {
+ display: inline-block;
+ padding-left: 0.5em;
+ padding-right: 0.5em;
+ font-family: monospace;
+}
+
+.ptx-content iframe {
+ margin: 0;
+ border: none;
+ box-sizing: border-box;
+}
+
+.ptx-content .times-sign {
+ font-size: larger;
+ vertical-align: -0.15ex;
+}
+/* temporary for Geogebra development: replace with a more
+ restrictive selector for articles */
+.ptx-content article.notranslate {
+ margin-top: 0;
+}
+
+/*
+nested tasks. see
+https://pretextbook.org/examples/sample-article/html/interesting-corollary.html#aBc
+*/
+
+/* 9/27/23 added "article" because of details.exercise-like */
+.ptx-content article.exercise-like > .exercise-like {
+ margin-left: 40px;
+}
+.ptx-content article.exercise-like > .exercise-like.task {
+ margin-left: 20px;
+}
+.ptx-content article.exercise-like > .exercise-like > .para {
+ margin-top: 1.25em;
+/* margin-bottom: 0.25em; */
+}
+.ptx-content article.example-like > .heading + .introduction {
+ display: inline;
+}
+.ptx-content article.example-like > .heading + .introduction > .para:first-child {
+ display: inline;
+}
+.ptx-content article.example-like > .exercise-like > .para {
+ margin-top: 1.25em;
+}
+
+/* end of nested tasks */
+
+/* genus and species in italics */
+.ptx-content .taxon {
+ font-style: italic;
+}
+
+/* Sage stuff */
+.ptx-content .sageanswer {
+ font-family: monospace;
+ white-space: pre;
+ margin-left: 3em;
+ margin-bottom: 2em;
+}
+.ptx-content .sageanswer .key {
+ display: inline-block;
+ vertical-align: top;
+ margin-right: 1em;
+}
+.ptx-content .sageanswer .output {
+ display: inline-block;
+ vertical-align: top;
+}
+.ptx-content .CodeMirror-code pre.CodeMirror-line {
+ padding-bottom: 5px;
+/* the next item is the CodeMirror default, which was
+ previously over-ridden */
+ padding-left: 6px;
+}
+
+/* used when knowl content is hidden in the page */
+.ptx-content .hidden-content, .pretext .hidden-content {
+/* things will be different after 2022 overhaul */
+ display: none;
+}
+
+.ptx-content hr.ptx-pagebreak {
+ width: 30em;
+ text-align: center;
+ margin-left: auto;
+ margin-right: auto;
+ margin-bottom: 2.0em;
+ margin-top: 0;
+ height: 4em;
+ border: 0;
+ border-bottom: 1px dashed #ccc;
+}
+
+.ptx-content hr.ptx-pagebreak:after {
+ content: "page";
+ display: inline-block;
+ position: relative;
+ top: 4.0em;
+ font-size: 80%;
+ padding: 0 0.25em;
+ background: white;
+}
+
+/*
+ See 10.1.8c in http://faculty.valpo.edu/calculus3ibl/ch10_01_gradient.html
+and condider having this replace line 3338 of the general code (which uses .heading + p)
+*/
+.ptx-content .example-like > .exercise-like > .para:first-of-type {
+ display: inline;
+}
+.ptx-content .example-like > .exercise-like > .aside-like {
+ margin-top: -3em;
+}
+.ptx-content .example-like > .exercise-like > .aside-like.front {
+ margin-top: 0;
+}
+
+.ptx-content meta {
+ display: none;
+}
+
+.ptx-content .summary-links a {
+ color: #671d12;
+ background: #f0f0f0;
+ text-decoration: none;
+ cursor: pointer;
+}
+.ptx-content .summary-links a:hover, .ptx-content .summary-links a:focus {
+ color: white;
+ background: #671d12;
+}
+.ptx-content .summary-links a .codenumber {
+ color: #303030;
+ margin-right: 0.41667em;
+}
+
+.ptx-content .summary-links a:hover .codenumber, .ptx-content .summary-links a:focus .codenumber {
+ color: #f0f0f0;
+}
+
+
+
+.ptx-content .summary-links {
+ margin-top: 4em;
+}
+.ptx-content section + .summary-links {
+ margin-top: 2em;
+}
+.ptx-content .summary-links ul {
+ list-style-type:none;
+}
+.ptx-content .summary-links li {
+ margin-top: 0;
+}
+.ptx-content section .summary-links li .title {
+ font-style: normal;
+}
+.ptx-content .summary-links a {
+ position: relative;
+ display: block;
+ font-size: 1.5em;
+ line-height: 1.25em;
+ padding: 0.41667em 0.83333em;
+ margin-top: 0.20833em;
+ border-radius: 3px;
+ padding-right: 2.06667em;
+}
+.ptx-content .summary-links a:after {
+ right: 0.83333em;
+}
+.ptx-content .summary-links a:after {
+ content: "";
+ position: absolute;
+ /* center vertically */
+ top: 50%;
+ margin-top: -0.4em;
+ width: 0;
+ height: 0;
+ border-top: 0.4em solid transparent;
+ border-bottom: 0.4em solid transparent;
+ border-left: 0.4em solid #c9c9c9;
+}
+.ptx-content .summary-links a, .ptx-content .summary-links a:link, .ptx-content .summary-links a:visited {
+ cursor: pointer;
+}
+.ptx-content .summary-links a:hover:after {
+ width: 0;
+ height: 0;
+ border-top: 0.4em solid transparent;
+ border-bottom: 0.4em solid transparent;
+ border-left: 0.4em solid white;
+}
+.ptx-content .summary-links a {
+ font-family: "PT Serif", "Times New Roman", Times, serif;
+}
+@media screen and (max-width: 480px) {
+ .ptx-content .summary-links a {
+ font-size: 1em;
+ line-height: 1.25em;
+ }
+}
+.ptx-content .summary-links a .codenumber {
+ margin-right: 0.41667em;
+}
+
+.ptx-content .summary-links a:active {
+ position: relative;
+ color: white;
+ background: #932919;
+ text-decoration: none;
+ box-shadow: rgba(0, 0, 0, 0.2) 0 2px 5px 5px inset;
+}
+.ptx-content .summary-links a:active:after {
+ width: 0;
+ height: 0;
+ border-top: 0.4em solid transparent;
+ border-bottom: 0.4em solid transparent;
+ border-left: 0.4em solid white;
+}
+.ptx-content .summary-links a:focus {
+ outline: thin dotted #333;
+ outline-offset: -2px;
+ /**
+ * Remove stupid inner dotted border applied by Firefox on focus
+ * See http://stackoverflow.com/a/199319/1599617
+ */
+}
+
+
+/* also see section > heading for worksheets, maybe around line 1200 */
+/* one-page documents in the browser */
+
+body.standalone.worksheet .ptx-content .onepage > .heading {
+ margin-top: 0;
+ font-size: 1.3em;
+}
+body.standalone.worksheet .ptx-content .onepage > .introduction {
+ margin-top: 0.4em;
+}
+body.standalone.worksheet .ptx-content .onepage > .introduction > .heading {
+ font-size: 1.1em;
+}
+body.standalone.worksheet .ptx-content .onepage .solutions,
+body.standalone.worksheet .ptx-content .onepage .instructions {
+ display: none;
+}
+body.standalone .ptx-content .worksheet {
+/*
+ padding: 40px 45px 45px 55px;
+*/
+ padding: 40px 0 45px 0;
+ border: 2px solid grey;
+ margin: 0;
+/* height: 1243px; */
+}
+
+body.standalone .ptx-content .onepage {
+/* padding: 40px 45px 45px 55px;
+ padding: 0 0 45px 0;
+*/
+ padding: 40px 45px 45px 55px;
+ border-bottom: 2px solid grey;
+ margin: 0;
+/* height: 1243px; */
+}
+body.standalone .ptx-content .onepage + .onepage {
+/*
+ padding-top: 40px;
+*/
+ border-top: 2px solid grey;
+}
+/* there may be worksheet content before the first page
+ or after the last page
+*/
+body.standalone .ptx-content .onepage.firstpage {
+ padding-top: 0
+}
+body.standalone .ptx-content .onepage.lastpage {
+ padding-bottom: 0;
+ border-bottom: none;
+}
+
+body.standalone .ptx-content .worksheet > *:last-child {
+ padding-bottom: 0 !important
+}
+.ptx-content .onepage + .onepage {
+ margin-top: 2.5em;
+ padding-top: 1.5em;
+ border-top: 1px dashed #aaa;
+}
+.ptx-content .onepage + .onepage::before {
+ content: "pagebreak";
+ text-align: center;
+ margin-left: 40%;
+ padding-left: 1em;
+ padding-right: 1em;
+ position: absolute;
+ top: -0.8em;
+ font-size: 80%;
+ font-style: italic;
+ background: white;
+}
+
+body.standalone .ptx-content .onepage + .onepage {
+ margin-top: 10px;
+}
+body.standalone .ptx-content .onepage + .onepage::before {
+ content: none;
+}
+
+body.standalone .ptx-content .onepage article {
+ padding-left: 0;
+ border: none;
+}
+body.standalone .ptx-content .onepage article::after {
+ all: unset;
+}
+.ptx-content .onepage > .para:first-child,
+.ptx-content .onepage > article:first-child {
+ margin-top: 0;
+}
+.ptx-content section + .onepage.firstpage,
+.ptx-content article + .onepage.firstpage,
+.ptx-content .para + .onepage.firstpage {
+ margin-top: 1.25em;
+}
+
+/* not good, because of image next to image
+.ptx-content .onepage .sbspanel + .sbspanel {
+ padding-left: 1.25em;
+ border-left: 1px solid grey;
+ margin-left: -1.25em;
+}
+*/
+body.worksheet .ptx-content .onepage .sbspanel + .sbspanel > .exercise::before {
+ content: "";
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ right: 0;
+ left: 0;
+ padding-left: 1.25em;
+ border-left: 1px solid grey;
+ margin-left: -1.25em;
+ z-index: -100; /* to not block editable content */
+}
+
+body.standalone.worksheet .ptx-content section article.task {
+ margin-left: 0;
+}
+body.standalone.worksheet .ptx-content section article.task > .heading {
+ font-weight: normal;
+}
+
+body.standalone .autopermalink {
+ display: none;
+}
+
+body.standalone.worksheet .ptx-content .onepage .workspace {
+ border: 2px dotted grey;
+ background: #f3fff3;
+/* Sally suggests light and dark blue
+ background: linear-gradient(
+ #eef 0px, #eef 200px,
+ #eef 200px, #99f 205px,
+ #99f 205px, #99f 100%)
+*/
+}
+body.standalone.worksheet .ptx-content .onepage .workspace.squashed {
+ border: 2px dotted grey;
+ background: #ffe;
+}
+
+body.standalone.worksheet .ptx-content .onepage .workspace.squashed.tight {
+ border: 15px solid;
+ border-image: repeating-linear-gradient(
+ -35deg,
+ #f33,
+ #f33 10px,
+ #000 10px,
+ #000 20px
+ ) 20;
+/*
+ background: linear-gradient(
+ #ff0 0%, #ff0 8%,
+ #000 8%, #000 9%,
+ #ff6 9%, #ff6 17%,
+ #555 17%, #555 19%,
+ #ff8 19%, #ff8 26%,
+ #777 26%, #777 29%,
+ #ffa 29%, #ffa 37%,
+ #aaa 37%, #aaa 41%,
+ #ffd 41%, #ffd 48%,
+ #ccc 48%, #ccc 52%,
+ #ffd 52%, #ffd 59%,
+ #aaa 59%, #aaa 63%,
+ #ffa 63%, #ffa 71%,
+ #777 71%, #777 74%,
+ #ff8 74%, #ff8 81%,
+ #555 81%, #555 83%,
+ #ff6 83%, #ff6 91%,
+ #000 91%, #000 92%,
+ #ff0 92%, #ff0 100%
+ );
+*/
+ background: yellow;
+}
+
+body.has-sidebar-left.mathbook-loaded.standalone.worksheet .ptx-page .ptx-main {
+ margin-left: 0;
+}
+body.standalone.worksheet .ptx-page > .ptx-main .ptx-content {
+ max-width: 1030px;
+ width: 1030px;
+ margin-right: 0;
+}
+body.standalone.worksheet.a4 .ptx-page > .ptx-main .ptx-content {
+ max-width: 1001px;
+ width: 1001px;
+}
+
+body.standalone.worksheet .ptx-content .goal-like {
+ border: none;
+ padding: 0;
+}
+body.standalone.worksheet .ptx-content .goal-like > .heading {
+ margin-top: -0.5em;
+ padding: 0;
+ margin: 0;
+ font-size: 1.1em;
+}
+body.standalone.worksheet .ptx-content section.worksheet > .heading {
+ display: inline;
+ font-size: 1.1em;
+}
+/* becaues the worksheet has no side margins but the .onepage does */
+body.standalone.worksheet .ptx-content section.worksheet > .heading,
+body.standalone.worksheet .ptx-content section.worksheet > .objectives,
+body.standalone.worksheet .ptx-content section.worksheet > .introduction,
+body.standalone.worksheet .ptx-content section.worksheet > .conclusion {
+ margin-left: 55px;
+ margin-right: 40px;
+}
+body.standalone.worksheet .ptx-content section.worksheet > .heading + .para {
+ display: inline;
+}
+
+/* printing for one-page worksheets */
+
+.ui-dialog.ui-widget.ui-widget-content.ui-corner-all.ui-draggable.ui-resizable {
+ left: 0 !important;
+ top: 0 !important;
+}
+
+/* move to the color file(s) and figure out next comment */
+/*
+.ptx-content a.internal {
+ color: #900;
+}
+.ptx-content a.internal:hover {
+ background-color: #ddf;
+}
+*/
+/* check whether class="url" under Endnotes in pretext-epub.xsl can be
+ changed to class = "external"*/
+.ptx-content a.url,
+.ptx-content a.external {
+ color: #22a;
+}
+.ptx-content a.url:hover,
+.ptx-content a.external:hover {
+ background: #ffd;
+}
+
+/*
+.ptx-content a.internal:hover,
+.ptx-content a.external:hover,
+.ptx-content a.internal:focus,
+.ptx-content a.external:focus {
+ text-decoration: underline;
+}
+*/
+
+/* style for poems */
+
+.ptx-content .poem {
+ margin-top: 1.5em;
+}
+.ptx-content .poem {
+ display: table;
+ margin-top: 1.5em;
+ margin-left: auto;
+ margin-right: auto;
+ margin-bottom: 0;
+ width: auto;
+ max-width: 90%;
+}
+
+.ptx-content .poem > .heading {
+ display: block;
+ text-align: center;
+}
+.ptx-content section article.poem > .heading::after {
+ content: "";
+}
+.ptx-content .poem > .heading > .title {
+ font-weight: bold;
+ font-size: 1.2em;
+ line-height: 1.2em;
+}
+
+.ptx-content .poem .author {
+ font-style: italic;
+ margin-top: 0.75em;
+}
+.ptx-content .poem .author.left {
+ text-align: left;
+}
+.ptx-content .poem .author.center {
+ text-align: center;
+}
+.ptx-content .poem .author.right {
+ text-align: right;
+}
+
+.ptx-content .poem .stanza > .heading {
+ text-align: center;
+ font-weight: bold;
+ font-size: 1em;
+ line-height: 1em;
+}
+.ptx-content .poem .stanza + .stanza {
+ margin-top: 1em;
+}
+.ptx-content .poem .heading + .stanza {
+ margin-top: 0.2em;
+}
+.ptx-content .poem .heading + .line {
+ margin-top: 0.2em;
+}
+
+.ptx-content .poem .line.left {
+ text-align: left;
+ margin-left: 4em;
+ text-indent: -4em;
+}
+.ptx-content .poem .line.center {
+ text-align: center;
+}
+.ptx-content .poem .line.right {
+ text-align: right;
+}
+.ptx-content .poem .tab {
+ margin-left: 2em;
+}
+
+/* GeoGebra calculator */
+
+.calculator-container {
+ position: fixed;
+ z-index: 100;
+ bottom: 5px;
+ right: 5px;
+/*
+ width: 320px;
+*/
+ width: 253px;
+/*
+ height: 600px;
+*/
+ height: 460px;
+}
+@media screen and (max-width: 800px) {
+ .calculator-container {
+ bottom: 50px !important;
+ }
+}
+
+.toolBPanel {
+ overflow: hidden !important;
+}
+.toolBPanel:hover {
+ overflow: auto !important;
+}
+
+/* Preview of annual edition */
+
+.pretext main .para.newstuff {
+ border-right: 6px solid #6f6;
+ background: #dfd;
+}
+.pretext main li.newstuff {
+ border-right: 6px solid #66f;
+ background: #eef;
+}
+.pretext main li.newstuff .para.newstuff {
+ border-right: none;
+ background: inherit;
+}
+.pretext main article.newstuff {
+ border-right: 6px solid #ff6;
+ background: #ffd;
+}
+.pretext main section.newstuff {
+ border-right: 10px solid #f6f;
+}
+.pretext main a[data-knowl].newstuff {
+ border: 1px solid #f33;
+ background: #fdd;
+}
+
+#aboelkins-ACS .ptx-main .ptx-content > section:first-of-type > section:first-of-type > .project-like:first-of-type li {
+ font-size: 300%
+}
+/* WW problems */
+
+.ptx-content .wwprob table.attemptResults {
+ margin-left: 2em;
+ background: #efefef;
+ padding: 0.2em;
+}
+.ptx-content .wwprob table.attemptResults + .attemptResultsSummary {
+ margin-top: 1em;
+}
+
+.ptx-content .wwprob .problem-main-form {
+ margin-top: 1em;
+ background: #eeeeff;
+ padding: 0.5em;
+}
+.ptx-content .wwprob td.ResultsWithoutError {
+ background: #9f9;
+}
+.ptx-content .wwprob td.ResultsWithError {
+ background: #f99;
+}
+
+.ptx-content .wwprob tr th {
+ text-align: center;
+ padding: 0.2em 1em 0.2em 1em;
+}
+.ptx-content .wwprob tr td {
+ text-align: center;
+}
+.ptx-content .wwprob tr td:empty {
+ background: #fff;
+}
+
+.ptx-content .wwprob ol, .ptx-content .wwprob ul {
+ margin-top: 0.75em !important;
+}
+
+.ptx-content .wwprob .problem {
+ background: #fdfdfd;
+}
+
+.ptx-content .wwprob .problem a {
+ text-decoration: none;
+}
+
+.ptx-content .wwprob #footer {
+ font-size: 70%;
+ text-align: right;
+}
+
+.ptx-content .marginresource {
+ position: relative;
+ height: 0;
+ left: 40em;
+ top: 1em;
+}
+.ptx-content .marginresource a {
+ color: blue;
+}
+.ptx-content .marginresource a[knowl] {
+ border-bottom: 1px dotted blue;
+}
+.ptx-content .marginresource .icon {
+ font-size: 200%;
+ margin-right: 1em;
+ display: inline-block;
+}
+.ptx-content .marginresource .resource_description {
+ display: inline-block;
+}
+.ptx-content .marginresource .resource_links {
+ display: block;
+ margin-left: 2em;
+}
+
+.collectedworks .knowl-output {
+ border: 12px
+ solid #D6E3FF;
+ background: none repeat scroll 0% 0% #FAFCFF;
+ border-radius: 4px;
+ margin-bottom: 1.25em;
+}
+
+.collectedworks .subjectwork {
+ max-width: 750px;
+}
+
+.collectedworks .bib {
+ margin-bottom: 1em;
+}
+
+.collectedworks .bibitem + .bibentry {
+ display: inline;
+}
+
+.collectedworks .bibitem {
+ display: inline;
+ font-weight: bold;
+ margin-right: 1em;
+}
+.collectedworks .work .title a {
+ text-decoration: none;
+ color: #009;
+}
+.collectedworks .work .title {
+}
+
+
+.iconlegend {
+ position: absolute;
+ margin-top: 0.5em;
+ top: 0;
+ left: 920px;
+ line-height: 1;
+}
+
+.iconlegend .icon_name {
+ font-size: 90%;
+ margin-right: 1em;
+}
+.icongroup + .icongroup {
+ margin-left: 1em;
+}
+
+/* interactive WeBWorK */
+
+label.webwork {
+display:inline-flex;
+flex-direction:column;
+}
+
+label.correct .status {
+background-color: #a0f0a0;
+}
+
+label.partly-correct .status {
+ color: #ffcc66;
+}
+
+label.incorrect .status {
+ color: #b00;
+}
+label.incorrect .status::before {
+ content: " ";
+}
+
+.feedback {
+ word-wrap:break-word;
+}
+
+label.correct .feedback {
+ background-color: #00ffcc;
+}
+
+label.partly-correct .feedback {
+ color: #ffcc66;
+}
+
+label.incorrect .feedback {
+ color: #e07070;
+}
+
+
+.ptx-content .webwork-button {
+ border-radius: 3px;
+ padding: 0px 3px 0px 3px;
+ border: 1px solid #999;
+ background-color: #ffffff;
+}
+
+.ptx-content .webwork-button:hover {
+ cursor: pointer;
+ background-color: #e0e0ff;
+ border: 1px solid #000;
+}
+.ptx-content .webwork-button:active {
+ cursor: pointer;
+ background-color: #a0a0a0;
+ border: 1px solid #999;
+}
+
+.webwork img, .webwork + .knowl-output img {max-width:100%;}
+
+.ptx-content .exercise-wrapper form button {
+ border-radius: 3px;
+ padding: 0px 3px 0px 3px;
+ border: 1px solid #999;
+ color: black;
+ background-color: #ffffff;
+}
+.ptx-content .webwork-button.activate {
+ width: 22px;
+ height: 22px;
+ background-image: url('https://raw.githubusercontent.com/openwebwork/webwork2/main/htdocs/images/favicon.ico');
+ background-size: contain;
+ position: absolute;
+ right: -35px;
+}
+
+article.project-like > .heading + div.ptx-runestone-container > div.runestone,
+article.exercise-like > .heading + div.ptx-runestone-container > div.runestone {
+ margin-top: 0.5em;
+}
+
+/* hack for runestone */
+/*
+.ptx-content .exercise-wrapper form button.btn-success {
+ background-color: #5cb85c;
+}
+*/
+/* to undo Runestone's presentermode.css */
+.ptx-content .bottom {
+ position: unset;
+}
+
+/* to undo Runestone's draganddrop.css */
+.ptx-content .rsdraggable {
+ font-size: 100%;
+}
+
+.ptx-content .exercise-wrapper form button:hover {
+ cursor: pointer;
+ background-color: #e0e0ff;
+ border: 1px solid #000;
+}
+.ptx-content .exercise-wrapper form button:active {
+ background-color: #f0f0f0;
+}
+.ptx-content .exercise-wrapper form button + button {
+ margin-left: 0.8em;
+}
+
+.ptx-content .exercise-wrapper,
+.ptx-content .exercise-wrapper form,
+.ptx-content .exercise-wrapper form > div:first-child {
+ display: inline-block;
+ vertical-align: top;
+ width: 100%; /* for live ww to open at 100% wide */
+}
+.ptx-content .knowl .exercise-wrapper,
+.ptx-content .knowl .exercise-wrapper form,
+.ptx-content .knowl .exercise-wrapper form > div:first-child {
+ width: 100%;
+}
+/*
+.ptx-content .exercise-wrapper form {
+ max-width: 95%;
+}
+*/
+.ptx-content .exercise-wrapper > .para:first-child,
+.ptx-content .exercisegroup .exercise-wrapper > .para:first-child {
+ margin-top: 0;
+ display: inline;
+}
+/* next is realted to having exercises start in-line with their exercise number,
+ including when a static WW problem is made interactive */
+/* not sure this was the right way to do it */
+/* see https://opentext.uleth.ca/apex-calculus/sec_antider.html#exercise-722 */
+.ptx-content .heading + .exercise-wrapper {
+ display: inline-block;
+ max-width: 95%;
+ width: 100%;
+}
+/*
+.ptx-content .exercisegroup .heading + .exercise-wrapper {
+ width: auto;
+}
+*/
+.ptx-content .cols2 .heading + .exercise-wrapper {
+ width: auto;
+}
+
+/* next two need to be separate due to limitations in Chrome and Safari */
+@media screen and (max-width: 600px) {
+ .ptx-content .exercisegroup .cols2 > article.exercise-like {flex-basis: calc(100% - 2em);}
+ .ptx-content .exercisegroup .cols3 > article.exercise-like {flex-basis: calc(100% - 2em);}
+ .ptx-content .exercisegroup .cols4 > article.exercise-like {flex-basis: calc(50% - 2em);}
+ .ptx-content .exercisegroup .cols5 > article.exercise-like {flex-basis: calc(50% - 2em);}
+ .ptx-content .exercisegroup .cols6 > article.exercise-like {flex-basis: calc(33.3% - 2em);}
+ .ptx-content .exercisegroup .cols2 .heading + .exercise-wrapper { max-width: 100%; }
+}
+@media screen and (max-width: 850px) and (min-width: 786px) {
+ .ptx-content .exercisegroup .cols2 > article.exercise-like {flex-basis: calc(100% - 2em);}
+ .ptx-content .exercisegroup .cols3 > article.exercise-like {flex-basis: calc(100% - 2em);}
+ .ptx-content .exercisegroup .cols4 > article.exercise-like {flex-basis: calc(50% - 2em);}
+ .ptx-content .exercisegroup .cols5 > article.exercise-like {flex-basis: calc(50% - 2em);}
+ .ptx-content .exercisegroup .cols6 > article.exercise-like {flex-basis: calc(33.3% - 2em);}
+ .ptx-content .exercisegroup .cols2 .heading + .exercise-wrapper { max-width: 100%; }
+}
+
+.APEXlogo {
+ white-space: nowrap;
+}
+.APEXlogo .A {
+ margin-right: -0.07em;
+}
+.APEXlogo .P {
+ margin-right: -0.33em;
+ position: relative;
+ top: -0.30em;
+}
+.APEXlogo .E {
+ position: relative;
+ top: 0.33em;
+}
+
+/* testing */
+
+
+.runestone-profile .dropdown-content {
+ position: absolute;
+ display: none;
+ right: 0;
+ top: 35px;
+ text-align: left;
+ border: 1px solid;
+ border-color: #600;
+ border-color: var(--tocborder);
+}
+.runestone-profile.dropdown:hover {
+ background-color: #ddd;
+ overflow: visible;
+}
+.runestone-profile.dropdown:hover .dropdown-content {
+ display: block;
+}
+.runestone-profile .dropdown-content {
+ background-color: white;
+ z-index: 1800;
+ min-width: 100px;
+ padding: 5px;
+}
+.runestone-profile .dropdown-content a {
+ display: block;
+ text-decoration: none;
+ color: #662211;
+ padding: 2px 8px;
+}
+.runestone-profile.dropdown .dropdown-content a:hover {
+ background-color: #671d12;
+ color: #ffffff;
+ text-decoration: none;
+ background-color: var(--chaptertoc);
+}
+.runestone-profile.dropdown .dropdown-content hr {
+ margin-bottom: 4px;
+ margin-top: 4px;
+ border-color: #600;
+ border-color: var(--sectiontoctext);
+}
diff --git a/_static/pretext/css/pretext_search.css b/_static/pretext/css/pretext_search.css
new file mode 100644
index 00000000..f49f9568
--- /dev/null
+++ b/_static/pretext/css/pretext_search.css
@@ -0,0 +1,173 @@
+.searchresultsplaceholder article {
+ width: 60%;
+ margin-left: auto;
+ margin-right: auto;
+ font-family: sans-serif;
+}
+
+.searchbox {
+/*
+ height: 60px;
+ border: solid;
+ border-radius: 5px;
+ background-color: #eeee;
+*/
+ /* position: absolute;
+ top: 37px;
+ right: 0; */
+}
+
+.ptxsearch {
+ height: 35px;
+ flex: 1 1;
+}
+
+.searchbutton .name {
+ display: none;
+}
+
+.searchwidget {
+/*
+ padding-top: 15px;
+ padding-left: 20px;
+ font-size: larger;
+*/
+ text-align: right;
+}
+
+.searchwidget input {
+/*
+ font-size: larger;
+*/
+}
+
+.helpbox {
+ display: none;
+}
+
+.detailed_result {
+ margin-bottom: 10px;
+}
+
+.all_results a:link {
+ text-decoration: none;
+ font-size: large;
+}
+
+.all_results a:hover {
+ background-color: lightgray;
+}
+.searchresults a:hover {
+ background-color: #eee;
+}
+
+.searchresults a {
+ text-decoration: none;
+ color: #222;
+}
+.searchresults a:hover {
+ text-decoration: underline;
+ color: #33f;
+}
+.searchresults ul li {
+ list-style-type: none;
+}
+ol.searchresults {
+ padding-left: 10px;
+ margin-top: 0;
+ overflow-y: auto;
+ flex: 1 1;
+}
+ol.searchresults > li {
+ list-style-type: none;
+}
+.search-result-score {
+ display: none;
+}
+.high_result {
+ font-weight: 700;
+}
+
+.medium_result {
+ font-weight: 500;
+}
+
+
+.low_result {
+ font-weight: 200;
+}
+.no_result {
+ font-weight: 200;
+ color: #444;
+}
+.detailed_result .no_result {
+ font-size: 90%;
+}
+
+.searchresultsplaceholder {
+ position: fixed;
+ top: 5vh;
+ bottom: 5vh;
+ left: 152px;
+ width: 600px;
+ padding: 1em;
+ border: 0.2em solid #009;
+ background: aliceblue;
+ z-index: 5000;
+ display: flex;
+ flex-direction: column;
+}
+
+.search-results-heading {
+ border-bottom: 1px solid rgba(0,0,125,0.5);
+}
+
+.search-results-controls {
+ display:flex;
+ justify-content: space-between;
+ align-items: stretch;
+ gap: 10px;
+ margin-bottom: 1em;
+}
+
+.closesearchresults {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ border: 1px solid black;
+}
+.closesearchresults:hover {
+ color: #c00;
+ background-color: #fee;
+ border-color: #f00;
+}
+.closesearchresults + h2 {
+ margin-top: -1em;
+}
+.searchempty {
+ display: none;
+ padding-left: 10px;
+ padding-top: 5px;
+}
+.search-result-bullet {
+ margin-top: 0.3em;
+}
+.search-result-clip {
+ font-size: 80%;
+ font-style: italic;
+ color: #444;
+ padding-left: 15px;
+}
+.search-results-unshown-count {
+ margin-top: 0.6em;
+}
+.search-result-clip-highlight {
+ background: rgba(255,255,0,0.5);
+}
+@media screen and (max-width: 800px) {
+ .searchresultsplaceholder {
+ width: 80vw;
+ left: 10vw;
+ bottom: 10vh;
+ }
+}
diff --git a/_static/pretext/css/reveal.css b/_static/pretext/css/reveal.css
new file mode 100644
index 00000000..ce3bb71f
--- /dev/null
+++ b/_static/pretext/css/reveal.css
@@ -0,0 +1,75 @@
+
+ul {
+ display: block !important;
+}
+.reveal img {
+ border: 0.5px !important;
+ border-radius: 2px 10px 2px;
+ padding: 4px;
+}
+.definition,.theorem,.activity {
+ border-width: 0.5px;
+ border-style: solid;
+ border-radius: 2px 10px 2px;
+ padding: 1%;
+ margin-bottom: 2em;
+}
+.definition {
+ background: #00608010;
+}
+.theorem {
+ background: #ff000010;
+}
+.proof {
+ background: #ffffff90;
+}
+.activity {
+ background: #60800010;
+}
+dfn {
+ font-weight: bold;
+}
+.ptx-content ol.no-marker,
+.ptx-content ul.no-marker,
+.ptx-content li.no-marker {
+ list-style-type: none;
+}
+
+.ptx-content ol.decimal {
+ list-style-type: decimal;
+}
+.ptx-content ol.lower-alpha {
+ list-style-type: lower-alpha;
+}
+.ptx-content ol.upper-alpha {
+ list-style-type: upper-alpha;
+}
+.ptx-content ol.lower-roman {
+ list-style-type: lower-roman;
+}
+.ptx-content ol.upper-roman {
+ list-style-type: upper-roman;
+}
+.ptx-content ul.disc {
+ list-style-type: disc;
+}
+.ptx-content ul.square {
+ list-style-type: square;
+}
+.ptx-content ul.circle {
+ list-style-type: circle;
+}
+.ptx-content ol.no-marker,
+.ptx-content ul.no-marker {
+ list-style-type: none;
+}
+.ptx-content .cols1 li,
+.ptx-content .cols2 li,
+.ptx-content .cols3 li,
+.ptx-content .cols4 li,
+.ptx-content .cols5 li,
+.ptx-content .cols6 li {
+ float: left;
+ padding-right:2em;
+}
+
diff --git a/_static/pretext/css/setcolors.css b/_static/pretext/css/setcolors.css
new file mode 100644
index 00000000..1e54aae2
--- /dev/null
+++ b/_static/pretext/css/setcolors.css
@@ -0,0 +1,452 @@
+
+/* This file assigns the main colors, using variables that
+ have been set previously. */
+
+body.pretext {
+ color: var(--bodyfontcolor);
+}
+
+.ptx-masthead .title-container > .heading, .ptx-masthead .title-container > .heading a, .ptx-masthead .logo-link:empty:hover:before, .ptx-masthead .byline a {
+ color: var(--documenttitle, #2a5ea4);
+}
+
+.ptx-masthead .title-container > .heading a:active, .ptx-masthead .logo-link:empty:active:before, .ptx-masthead .byline a:active {
+ color: var(--bodytitle, #932c1c);
+}
+
+
+/* Start by assuming any TOC item is a section, change others as appropriate */
+.ptx-toc .toc-item {
+ color: var(--sectiontoctext, #404040);
+ background-color: var(--sectiontoc);
+ border-color: var(--tocborder, #afc2e5);
+}
+.ptx-toc .toc-item.active {
+ color: var(--sectiontoctextactive);
+ background-color: var(--sectiontocactive);
+ border-color: var(--highlighttocborder);
+}
+
+/* this looks weird but it matches previous ways the colors were applied */
+.ptx-toc:not(.depth2) .toc-chapter {
+ background-color: var(--chaptertocactive);
+ color: var(--chaptertoctextactive);
+}
+/* override for focused view */
+.ptx-toc.focused:not(.depth2) .toc-chapter {
+ background-color: var(--chaptertoc);
+ color: var(--chaptertoctext);
+}
+
+
+/* All top level items styled like chapters to match old styling */
+.ptx-toc > .toc-item-list > .toc-item {
+ color: var(--chaptertoctext);
+ background-color: var(--chaptertoc);
+}
+.ptx-toc > .toc-item-list > .toc-item.active {
+ color: var(--chaptertoctextactive);
+ background-color: var(--chaptertocactive);
+ border-color: var(--highlighttocborder);
+}
+
+
+.ptx-toc .toc-item > .toc-title-box > a:is(:hover, :focus) {
+ color: var(--highlighttoctext, #321a0c);
+ background-color: var(--highlighttoc);
+ border-color: var(--highlighttocborder, #ec704b);
+}
+
+/* top level parts/front/backmatter styled as parts*/
+.ptx-toc.focused > .toc-item-list > :is(.toc-frontmatter, .toc-part, .toc-backmatter) {
+ background-color: var(--parttoc);
+ color: var(--parttoctext);
+}
+.ptx-toc.focused > .toc-item-list > :is(.toc-frontmatter, .toc-part, .toc-backmatter).active {
+ background-color: var(--parttocactive);
+ color: var(--parttoctextactive);
+}
+
+.ptx-toc.focused .toc-chapter {
+ background-color: var(--chaptertoc);
+ color: var(--chaptertoctext);
+}
+.ptx-toc.focused .toc-chapter.active {
+ background-color: var(--chaptertocactive);
+ color: var(--chaptertoctextactive);
+}
+
+/* Anything under a chapter, front matter, back matter styled as section */
+.ptx-toc.focused :is(.toc-chapter, .toc-frontmatter, .toc-backmatter) > ul > .toc-item {
+ background-color: var(--sectiontoc);
+ color: var(--sectiontoctext);
+}
+.ptx-toc.focused :is(.toc-chapter, .toc-frontmatter, .toc-backmatter) > ul > .toc-item.active {
+ background-color: var(--sectiontocactive);
+ color: var(--sectiontoctextactive);
+}
+
+
+.ptx-content .summary-links a {
+ color: var(--sectiontoctext);
+}
+.ptx-content .summary-links a:hover, .ptx-content .summary-links a:focus {
+ color: var(--highlighttoctext);
+ background: var(--highlighttoc);
+}
+
+.ptx-content [data-knowl], .ptx-content [data-knowl]:hover, .ptx-content [data-knowl]:active, .ptx-content [data-knowl].active, .ptx-content summary {
+ color: var(--bodytitle);
+}
+.ptx-content [data-knowl]:hover, .ptx-content [data-knowl]:active, .ptx-content [data-knowl].active {
+ color: var(--bodyfontcolorhighlight);
+ background-color: var(--bodytitlehighlight);
+}
+
+/* next two groups concern accessibility, so check when making changes */
+.ptx-content .para > a.internal {
+ color: var(--bodytitle);
+}
+.ptx-content .para > a.external {
+ color: var(--bodysubtitle);
+}
+.ptx-content .para > a.internal:hover, .ptx-content .para > a.internal:hover *,
+.ptx-content .para > a.internal:focus, .ptx-content .para > a.internal:focus * {
+ color: var(--bodyfontcolorhighlight);
+ background-color: var(--bodytitlehighlight);
+}
+.ptx-content .para > a.external:hover, .ptx-content .para > a.external:hover *,
+.ptx-content .para > a.external:focus, .ptx-content .para > a.external:focus * {
+ color: var(--bodyfontcolorhighlight);
+ background-color: var(--bodysubtitlehighlight);
+}
+
+.ptx-content .playvideo {
+ background-color: var(--videoplay);
+}
+
+.ptx-content .goal-like {
+ border-color: var(--chaptertoc);
+}
+
+.ptx-content .assemblage-like {
+ border-color: var(--assemblageborder);
+ background-color: var(--assemblagebackground);
+}
+
+.ptx-content .knowl-output {
+ border-color: var(--knowlborder);
+ background-color: var(--knowlbackground);
+}
+.ptx-content .knowl-footer {
+ background-color: var(--knowlborder);
+}
+
+/*
+ pastel
+*/
+.pretext[data-atmosphere="pastel"],
+.pretext[data-atmosphere="pastel"] .ptx-main {
+ background: #dbf5ff;
+ background: #efe;
+}
+.pretext[data-atmosphere="pastel"] {
+ --documenttitle: #2a5ea4;
+ --bodytitle: #A62E1C;
+ --bodysubtitle: #2B5F82;
+ --bodytitlehighlight: #e0e9ff;
+ --bodyfonttitlehighlight: #306;
+ --bodysubtitlehighlight: #FCE5E4;
+
+ --chaptertoc: #dbf5ff;
+ --chaptertoc: #dcdcf9;
+ --chaptertoctext: #444444;
+ --chaptertocactive: #fae5b6;
+ --chaptertoctextactive: #303030;
+ --sectiontoc: #ffeeee;
+ --sectiontoctext: #404040;
+ --sectiontocactive: #fae5b6;
+ --sectiontoctextactive: #202020;
+ --tocborder: #afc2e5;
+
+ --highlighttoc: #fac793;
+ --highlighttoc: #fadfa3;
+ --highlighttoctext: #321a0c;
+ --highlighttocborder: #ec704b;
+
+ --assemblageborder: #1100aa;
+ --assemblagebackground: #f4f4fe;
+
+ --knowlborder: #e0e9ff;
+ --knowlbackground: #f5f8ff;
+}
+
+.pretext[data-atmosphere="pastel"] .ptx-toc {
+ scrollbar-color: var(--documenttitlelight) #efe;
+}
+.pretext[data-atmosphere="pastel"] .ptx-navbar {
+ background: #efe;
+ background: #dbf5ff;
+}
+.pretext[data-atmosphere="pastel"] .ptx-masthead {
+ background: #efe;
+ background: #dbf5ff;
+}
+.pretext[data-atmosphere="pastel"] .ptx-sidebar {
+ background: #ffd;
+}
+
+/* twilight */
+
+.pretext[data-atmosphere="darktwilight"] {
+ --bodyfontcolor: #ddd;
+ --bodyfontcolorhighlight: #222;
+ --documenttitle: #2a5ea4;
+ --documenttitledark: #20477b;
+ --documenttitlelight: #abd;
+ --bodytitle: #abd;
+ --bodysubtitle: #dcb;
+ --bodytitlehighlight: #ad6;
+ --bodyfonttitlehighlight: #306;
+ --bodysubtitlehighlight: #363;
+ /*
+ The bodytitle and bodysubtitle colors must have at least a 3:1 contrast
+ ratio with black, and at least 5:1 ratio with with the corresponding highlight.
+ (The second condition will guarantee an adequate contrast with white.)
+ */
+
+ --chaptertoc: hsl(9, 72%, 30%); /* #832615; */
+ --chaptertoctext: #dee;
+ --chaptertocactive: var(--documenttitle);
+ --chaptertoctextactive: white;
+ --sectiontoc: hsl(0, 0%, 40%);
+ --sectiontoctext: #eed;
+ --sectiontocactive: var(--documenttitle);
+ --sectiontoctextactive: white;
+ --tocborder: #152f53;
+
+ --highlighttoc: var(--documenttitledark);
+ --highlighttoctext: white;
+ --highlighttocborder: var(--chaptertoc);
+
+ --videoplay: var(--bodytitle);
+ --assemblageborder: #1100aa;
+ --assemblagebackground: #f5f8ff;
+ --assemblagebackground: #003;
+
+ --knowlborder: var(--bodytitlehighlight);
+ --knowlbackground: var(--assemblagebackground);
+
+ --bannerbackground: hsl(0, 0%, 33%);
+ --navbarbackground: hsl(0, 0%, 33%);
+ --footerbackground: hsl(0, 0%, 30%);
+ --mainbackground: hsl(0, 0%, 27%);
+ --buttonbackground: hsl(225, 80%, 25%);
+ --codebackground: hsl(120, 100%, 17%);
+ --linkbackground: hsl(120, 90%, 23%);
+ --linkbackgroundhighlight: hsl(0, 0%, 70%);
+ --keybackground: hsl(0, 100%, 20%);
+
+}
+
+/* dark */
+
+.pretext[data-atmosphere="dark"] {
+ --bodyfontcolor: #ddd;
+ --bodyfontcolorhighlight: #222;
+ --documenttitle: #2a5ea4;
+ --documenttitledark: #20477b;
+ --documenttitlelight: #8ab;
+ --bodytitle: #abd;
+ --bodysubtitle: #dcb;
+ --bodytitlehighlight: #ad6;
+ --bodyfonttitlehighlight: #306;
+ --bodysubtitlehighlight: #363;
+ /*
+ The bodytitle and bodysubtitle colors must have at least a 3:1 contrast
+ ratio with black, and at least 5:1 ratio with with the corresponding highlight.
+ (The second condition will guarantee an adequate contrast with white.)
+ */
+
+ --chaptertoc: hsl(5, 86%, 24%);
+ --chaptertoctext: #dee;
+ --chaptertocactive: var(--documenttitle); /* often the same as documenttitle */
+ --chaptertoctextactive: white;
+ --sectiontoc: hsl(0, 0%, 27%);
+ --sectiontoctext: #eed;
+ --sectiontocactive: var(--documenttitle); /* often the same as documenttitle */
+ --sectiontoctextactive: white;
+ --tocborder: #152f53;
+
+ --highlighttoc: var(--documenttitledark);
+ --highlighttoctext: white;
+ --highlighttocborder: var(--chaptertoc);
+
+ --videoplay: var(--bodytitle);
+ --assemblageborder: #1100aa;
+ --assemblagebackground: #f5f8ff;
+ --assemblagebackground: #003;
+
+ --knowlborder: var(--bodytitlehighlight);
+ --knowlbackground: var(--assemblagebackground);
+
+ --bannerbackground: hsl(0, 0%, 20%);
+ --navbarbackground: hsl(0, 0%, 20%);
+ --footerbackground: hsl(0, 0%, 22%);
+ --mainbackground: hsl(0, 0%, 17%);
+ --buttonbackground: hsl(232, 90%, 19%);
+ --codebackground: hsl(120, 100%, 15%);
+ --linkbackground: hsl(120, 90%, 20%);
+ --linkbackgroundhighlight: hsl(0, 0%, 70%);
+ --keybackground: hsl(0, 100%, 19%);
+
+}
+
+
+/* midnight */
+
+.pretext[data-atmosphere="darkmidnight"] {
+ --bodyfontcolor: #ddd;
+ --bodyfontcolorhighlight: #222;
+ --documenttitle: #2a5ea4;
+ --documenttitledark: #20477b;
+ --documenttitlelight: #8ab;
+ --bodytitle: #abd;
+ --bodysubtitle: #dcb;
+ --bodytitlehighlight: #ad9;
+ --bodyfonttitlehighlight: #306;
+ --bodysubtitlehighlight: #363;
+ /*
+ The bodytitle and bodysubtitle colors must have at least a 3:1 contrast
+ ratio with black, and at least 5:1 ratio with with the corresponding highlight.
+ (The second condition will guarantee an adequate contrast with white.)
+ */
+
+ --chaptertoc: hsl(0, 100%, 17%);
+ --chaptertoctext: #dee;
+ --chaptertocactive: var(--documenttitle); /* often the same as documenttitle */
+ --chaptertoctextactive: white;
+ --sectiontoc: hsl(0, 0%, 13%);
+ --sectiontoctext: #eed;
+ --sectiontocactive: var(--documenttitle); /* often the same as documenttitle */
+ --sectiontoctextactive: white;
+ --tocborder: #152f53;
+
+ --highlighttoc: var(--documenttitledark);
+ --highlighttoctext: white;
+ --highlighttocborder: var(--chaptertoc);
+
+ --videoplay: var(--bodytitle);
+ --assemblageborder: #1100aa;
+ --assemblagebackground: #f5f8ff;
+ --assemblagebackground: #003;
+
+ --knowlborder: var(--bodytitlehighlight);
+ --knowlbackground: var(--assemblagebackground);
+
+ --bannerbackground: hsl(0, 0%, 16%);
+ --navbarbackground: hsl(0, 0%, 16%);
+ --footerbackground: hsl(0, 0%, 13%);
+ --mainbackground: hsl(0, 0%, 7%);
+ --buttonbackground: hsl(240, 100%, 13%);
+ --codebackground: hsl(120, 100%, 17%);
+ --linkbackground: hsl(120, 90%, 20%);
+ --linkbackgroundhighlight: hsl(0, 0%, 70%);
+ --keybackground: hsl(0, 100%, 17%);
+}
+
+.pretext[data-atmosphere*="dark"] {
+ background: var(--mainbackground);
+}
+.pretext[data-atmosphere*="dark"] .ptx-page > .ptx-main {
+ background: var(--mainbackground);
+ color: var(--bodyfontcolor);
+}
+.pretext[data-atmosphere*="dark"] .ptx-content .summary-links a {
+ background: var(--documenttitledark);
+ background: var(--chaptertoc);
+}
+.pretext[data-atmosphere*="dark"] .ptx-navbar {
+ background: var(--navbarbackground);
+}
+.pretext[data-atmosphere*="dark"] .ptx-page-footer .feedback-link,
+.pretext[data-atmosphere*="dark"] .ptx-content-footer .button,
+.pretext[data-atmosphere*="dark"] .ptx-navbar .button {
+ background-color: var(--buttonbackground);
+ color: var(--bodyfontcolor);
+}
+.pretext[data-atmosphere*="dark"] .ptx-page-footer .feedback-link:hover,
+.pretext[data-atmosphere*="dark"] .ptx-content-footer .button:hover,
+.pretext[data-atmosphere*="dark"] .ptx-navbar .button:hover,
+.pretext[data-atmosphere*="dark"] .ptx-content-footer .button:hover {
+ background-color: var(--linkbackgroundhighlight);
+ color: var(--bodyfontcolorhighlight);
+}
+.pretext[data-atmosphere*="dark"] .ptx-navbar .calculator-toggle {
+ background-color: var(--buttonbackground);
+}
+.pretext[data-atmosphere*="dark"] .ptx-navbar .calculator-toggle:hover {
+ background-color: var(--linkbackgroundhighlight);
+ color: var(--bodyfontcolorhighlight);
+}
+
+.pretext[data-atmosphere*="dark"] .ptx-masthead {
+ background: var(--bannerbackground);
+}
+
+.pretext[data-atmosphere*="dark"] .ptx-page-footer {
+ background: var(--footerbackground);
+ border-top-color: #447;
+ border-bottom-color: #447;
+}
+.pretext[data-atmosphere*="dark"] .ptx-page-footer .logo {
+ background: #779;
+ border-radius: 0.4em;
+}
+.pretext[data-atmosphere*="dark"] .ptx-masthead .title-container > .pretext .heading,
+.pretext[data-atmosphere*="dark"] .ptx-masthead .title-container > .heading a,
+.pretext[data-atmosphere*="dark"] .ptx-masthead .logo-link:empty:hover::before,
+.pretext[data-atmosphere*="dark"] .ptx-masthead .byline,
+.pretext[data-atmosphere*="dark"] .ptx-masthead .byline a {
+ color: var(--documenttitlelight);
+}
+.pretext[data-atmosphere*="dark"] .ptx-toc {
+ scrollbar-color: var(--documenttitlelight) var(--footerbackground);
+}
+.pretext[data-atmosphere*="dark"] .ptx-content .code-inline {
+/*
+ color: var(--documenttitledark);
+*/
+ background: var(--codebackground);
+}
+.pretext[data-atmosphere*="dark"] .ptx-content .kbdkey {
+/*
+ color: var(--documenttitledark);
+*/
+ background: var(--keybackground);
+}
+.pretext[data-atmosphere*="dark"] .ptx-content .goal-like > .heading {
+ background: var(--chaptertoc);
+}
+.pretext[data-atmosphere*="dark"] .ptx-content a.url,
+.pretext[data-atmosphere*="dark"] .ptx-content a.internal,
+.pretext[data-atmosphere*="dark"] .ptx-content a.external {
+ color: #ddc;
+ background-color: var(--linkbackground);
+ color: var(--bodyfontcolor);
+}
+
+.pretext[data-atmosphere*="dark"] .ptx-content [data-knowl] {
+ background-color: var(--linkbackground);
+ color: var(--bodyfontcolor);
+}
+.pretext[data-atmosphere*="dark"] .ptx-content [data-knowl]:hover,
+.pretext[data-atmosphere*="dark"] .ptx-content [data-knowl]:active,
+.pretext[data-atmosphere*="dark"] .ptx-content [data-knowl].active {
+ background-color: var(--linkbackgroundhighlight);
+ color: var(--bodyfontcolorhighlight);
+}
+.pretext[data-atmosphere*="dark"] .ptx-page .ptx-main .ptx-content .knowl-content > .solution-like {
+ background: #606;
+}
+
diff --git a/_static/pretext/css/shell_crc.css b/_static/pretext/css/shell_crc.css
new file mode 100644
index 00000000..700d0422
--- /dev/null
+++ b/_static/pretext/css/shell_crc.css
@@ -0,0 +1,408 @@
+/*******************************************************************************
+ * shell_X.css controls the overall arrangement of the blocks on the page.
+ *******************************************************************************
+ *
+ * Author: Thomas Shemanske
+ *
+ *******************************************************************************
+ */
+
+/* The overall structure is
+ html
+ head
+ body.pretext
+ header.ptx-masthead
+ nav.ptx-navbar
+ div.ptx-page
+ div.sidebar
+ nav.ptx-toc
+ main.ptx-main
+ div.ptx-content
+ div.ptx-content-footer
+ div.ptx-page-footer
+*/
+
+/* Supplied by colors_bluegreen_grey.css */
+/*
+:root{
+ --bluegreen: hsl(192, 98%, 23%);
+ --bodytitle: var(--bluegreen);
+ --bodysubtitle: var(--bluegreen);
+}
+*/
+
+/* over-ride some of the default style */
+
+.pretext .ptx-page > .ptx-main {
+ margin-left: unset;
+}
+.ptx-masthead .logo-link img {
+ width: unset;
+ height: unset;
+ max-height: unset;
+}
+.ptx-masthead .logo-link {
+ font-size: unset;
+ text-align: unset;
+ line-height: unset;
+}
+.pretext .ptx-masthead {
+ position: unset;
+ background: unset;
+ min-height: unset;
+ border: unset;
+ position: unset;
+ z-index: unset;
+}
+
+.ptx-content-footer .previous-button .name {
+ margin-left: unset;
+ padding-right: unset;
+}
+.pretext .ptx-content-footer .name {
+ position: relative;
+ bottom: 0;
+}
+.pretext .ptx-content-footer .button.previous-button, .pretext .ptx-content-footer .button.next-button {
+ font-size: 0.8em;
+ margin-top: 1.5em;
+ padding: 0.4em;
+}
+.pretext .ptx-content-footer .top-button .icon, .pretext .ptx-content-footer .top-button .name {
+ display: unset;
+}
+.pretext .ptx-content-footer .previous-button .icon {
+ margin-left: unset;
+ margin-right: unset;
+}
+.pretext .ptx-content-footer .button {
+ text-align: unset;
+/*
+ color: unset;
+ background-color: unset;
+*/
+ padding: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 35px;
+ min-width: 85px;
+}
+
+/* Elements introduced in order of appearance */
+
+/* .ptx-container */
+body.pretext {
+/*
+ position: relative;
+*/
+ max-width: 904px; /* To match PreTeXt */
+ margin: 0 auto 0 auto; /* centered content */
+ padding: 0;
+ box-sizing: border-box;
+}
+
+/* .ptx-masthead-wrapper */
+.pretext .ptx-masthead {
+ border: 2px solid #ddd;
+ border-bottom: none;
+ border-top-left-radius: 5px;
+ border-top-right-radius: 5px;
+ /* overflow: hidden;*/ /* otherwise the rounded corners are not visible */
+}
+.pretext .ptx-masthead {
+ position: relative;
+ background: #fafafa;
+ min-height: inherit;
+ box-shadow: none;
+}
+.pretext .ptx-masthead {
+ max-width: 904px;
+ border-right: 1px solid #bababa;
+}
+@media only screen and (min-width: 600px) {
+ /* .ptx-masthead-wrapper {*/
+ .ptx-masthead {
+ z-index: 100;
+ }
+}
+.ptx-masthead .searchbox {
+ bottom: 2px;
+ margin-right: -19px;
+}
+
+/* .ptx-main-wrapper */
+.ptx-page {
+ font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: 1.0em;
+ min-height: 100vh;
+
+ display: grid;
+ grid-template-columns: auto 1fr auto;
+ grid-template-rows: auto;
+ grid-template-areas:
+ "toc main-content"
+ "toc content-footer";
+}
+.ptx-content {
+ min-height: 50vh;
+}
+
+/* MH-toc dropdown Content (Hidden by Default) */
+.ptx-sidebar {
+ position: sticky;
+ top: 34px;
+ background-color: #f1f1f1;
+ box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+ width: 240px;
+ max-height: 100vh;
+ height: 100vh;
+ grid-area: toc;
+ grid-column-start: 1;
+ grid-column-end: 2;
+ grid-row-start: 1;
+ grid-row-end: 3;
+
+/*
+ overflow-y: auto;
+ overflow-x: hidden;
+*/
+ border: 2px solid var(--bluegreen);
+ border-radius:5px;
+ z-index: 1;
+}
+
+/* .ptx-main-content */
+.ptx-page > .ptx-main {
+ grid-area: main-content;
+ grid-column-start: 2;
+ grid-column-end: 3;
+ grid-row-start: 1;
+ grid-row-end: 2;
+
+ justify-self: start;
+ max-width: 664px;
+ width: 97vw;
+ transition: 0s;
+ padding: 0;
+ margin: 0;
+ z-index: 0; /* Added so horizontal scrollbars in content don't bleed into TOC dropdown */
+ // overflow-y: auto;
+ // border: 2px solid green;
+}
+
+@media only screen and (min-width: 500px) {
+ .ptx-page > .ptx-main {
+ margin: 0;
+ max-width: 664px;
+ width: min(100vw,664px);
+ justify-self: center;
+ /* width: 570px; @ 810px */
+ }
+
+}
+.ptx-page > .ptx-main > .ptx-content {
+ margin-left: 2em;
+}
+
+/* Content footer wrapper playground */
+
+.pretext .ptx-page .ptx-content-footer {
+ display: grid;
+ max-width: 100%;
+ grid-template-columns: 1fr 1fr 1fr;
+ grid-template-areas:
+ "content-footer-prev content-footer-top content-footer-next";
+ margin-left: 32px;
+ margin-top: 30px;
+}
+
+.ptx-content-footer .previous-button {
+ grid-area: content-footer-prev;
+
+ justify-self: start;
+ align-self: center;
+ margin: 20px;
+ padding: 5px;
+
+ display: inline-block;
+ height: 32px;
+ color: var(--bodytitle);
+ font-family: inherit;
+ text-align: center;
+ font-size: .8em;
+ font-weight: 700;
+ letter-spacing: .1rem;
+ text-transform: uppercase;
+ text-decoration: none;
+ white-space: nowrap;
+ background-color: #eee;
+ border-radius: 4px;
+ border: 1px solid #888;
+ cursor: pointer;
+ box-sizing: border-box;
+
+}
+
+.ptx-content-footer .previous-button:hover{
+ background-color: #fafafa;
+ color: #888;
+}
+
+
+.ptx-content-footer .previous-button .name{
+ margin-left: 2px;
+ padding-right: 5px;
+}
+
+.ptx-content-footer .previous-button .icon{
+ padding-left: 5px;
+}
+
+.ptx-content-footer .top-button{
+ grid-area: content-footer-top;
+ justify-self: center;
+ align-self: center;
+ margin: 20px;
+ padding: 5px;
+
+ display: inline-block;
+ height: 32px;
+ color: var(--bodytitle);
+ font-family: inherit;
+ text-align: center;
+ font-size: .8em;
+ font-weight: 700;
+ letter-spacing: .1rem;
+ text-transform: uppercase;
+ text-decoration: none;
+ white-space: nowrap;
+ background-color: #eee;
+ border-radius: 4px;
+ border: 1px solid #888;
+ cursor: pointer;
+ box-sizing: border-box;
+}
+
+.ptx-content-footer .top-button:hover{
+ background-color: #fafafa;
+ color: #888;
+}
+
+ color: #888;
+}
+
+.ptx-content-footer .top-button .name{
+ margin-left: 2px;
+ padding-right: 5px;
+
+}
+
+.ptx-content-footer .top-button .icon{
+ padding-left: 5px;
+}
+
+.ptx-content-footer .next-button {
+ grid-area: content-footer-next;
+ justify-self: end;
+ align-self: center;
+ margin: 20px;
+ padding: 5px;
+
+ display: inline-block;
+ height: 32px;
+ color: var(--bodytitle);
+ font-family: inherit;
+ text-align: center;
+ font-size: .8em;
+ font-weight: 700;
+ letter-spacing: .1rem;
+ text-transform: uppercase;
+ text-decoration: none;
+ white-space: nowrap;
+ background-color: #eee;
+ border-radius: 4px;
+ border: 1px solid #888;
+ cursor: pointer;
+ box-sizing: border-box;
+
+
+}
+
+.ptx-content-footer .next-button:hover{
+ background-color: #fafafa;
+ color: #888;
+}
+
+.ptx-content-footer .next-button .name{
+ margin-right: 2px;
+ padding-left: 5px
+
+}
+
+.ptx-content-footer .next-button .icon{
+ padding-right:5px;
+}
+
+.pretext .ptx-sidebar.visible {
+ display: block;
+}
+
+@media only screen and (max-width: 800px) {
+
+ .pretext .ptx-sidebar {
+ display: none;
+ }
+/* copied from shell_default.css Wher is ptx-navbar set in the CRC style */
+.pretext .ptx-navbar {
+ position: fixed;
+ top: auto;
+ bottom: 0;
+ z-index: 1100;
+ }
+ .pretext .ptx-sidebar {
+ display: none;
+ position: fixed;
+ top: 10px;
+ z-index: 1000;
+ background: white;
+ }
+}
+
+.pretext .ptx-page-footer .feedback-link {
+ cursor: pointer;
+ text-align: center;
+ color: #333333;
+ background-color: #ededed;
+ border: 1px solid #bababa;
+ margin: 1.5em 0 0 0;
+ padding: 0 1em 0 1em;
+ height: 2em;
+ display: flex;
+ align-items: center;
+}
+.pretext .ptx-page-footer {
+ background: #f4f4f4;
+ margin-top: 2em;
+ padding-top: 0;
+ max-width: 900px;
+ border-top: 2px solid var(--sectiontoctext);
+ border-bottom: 2px solid var(--sectiontoctext);
+ display: flex;
+ flex-direction: row;
+ justify-content: space-around;
+ position: relative;
+/*
+ z-index: 100;
+*/
+}
+
+.pretext .ptx-page-footer > a {
+ margin: 1em 0;
+}
+.pretext .ptx-page-footer > a > .logo:first-child {
+ height: 3em;
+ width: unset;
+ margin: 0;
+}
+
diff --git a/_static/pretext/css/shell_default.css b/_static/pretext/css/shell_default.css
new file mode 100644
index 00000000..823c911b
--- /dev/null
+++ b/_static/pretext/css/shell_default.css
@@ -0,0 +1,260 @@
+/*******************************************************************************
+ * shell_X.css controls the overall arrangement of the blocks on the page.
+ *******************************************************************************
+ *
+ * Authors: David Farmer, Rob Beezer
+ *
+ *******************************************************************************
+ */
+
+/* The overall structure is
+ html
+ head
+ body.pretext
+ header.ptx-masthead
+ nav.ptx-navbar
+ div.ptx-page
+ div.sidebar
+ nav.ptx-toc
+ main.ptx-main
+ div.ptx-content
+ div.ptx-content-footer
+ div.ptx-page-footer
+*/
+
+.pretext .ptx-masthead {
+ position: relative;
+ background: #fafafa;
+ min-height: inherit;
+ border: none;
+ position: relative;
+}
+
+.pretext .ptx-navbar {
+ position: sticky;
+ top: 0;
+ max-width: 904px;
+ height: 36px;
+}
+
+.pretext .ptx-page {
+ position: relative;
+ min-height: 100vh;
+}
+.ptx-content {
+ min-height: 60vh;
+}
+
+.pretext .ptx-sidebar {
+ position: sticky;
+ top: 36px;
+ left: 0;
+ float: left;
+ width: 240px;
+}
+
+.pretext .ptx-toc {
+ position: sticky;
+ top: 50px;
+ box-sizing: border-box;
+ overflow-y: scroll;
+ height: calc(100vh - 60px);
+}
+
+.pretext .ptx-page > .ptx-main {
+ display: block;
+ position: relative;
+ overflow-y: hidden;
+ margin: 0 0 0 240px;
+ padding: 1px 0 0 0;
+ background: white;
+ border-left: 1px solid #ccc;
+}
+.pretext .ptx-page .ptx-sidebar.hidden + .ptx-main {
+ margin-left: 0;
+}
+.pretext .ptx-page > .ptx-main.notoc {
+ margin-left: 0;
+ transition-property: margin-left;
+ transition-duration: 0.3s;
+}
+@media screen and (max-width: 800px) {
+ .pretext .ptx-page > .ptx-main {
+ margin-left: 0;
+ left: auto;
+ }
+ .pretext .ptx-page-footer {
+ /* Make space for navbar fixed to bottom of screen */
+ margin-bottom: 38px;
+ }
+}
+
+.pretext .ptx-page > .ptx-main .ptx-content {
+ max-width: 600px;
+ margin: 32px;
+}
+@media screen and (max-width: 663px) {
+ .pretext .ptx-page > .ptx-main .ptx-content {
+ /* Decrease the margins */
+ margin: 28px;
+ }
+}
+
+/*
+.ptx-content.serif .para {
+ font-family: "PT Serif", "Times New Roman", serif;
+ font-size: 105%;
+}
+.ptx-content.serif #text-in-paragraphs .para,
+.ptx-content.serif #Bcd .para,
+.ptx-content.serif #interesting-corollary .para {
+ font-family: "Roboto Serif", serif;
+ font-size: 12pt;
+ line-height: 1.20;
+ font-variation-settings: 'wdth' 100;
+
+}
+.ptx-content.serif #table-calisthenics .para,
+.ptx-content.serif #section-7 .para,
+.ptx-content.serif #section-11 .para {
+ font-family: "Tinos", serif;
+ font-size: 115%;
+ line-height: 1.30;
+}
+
+.ptx-content.serif #section-6 .para,
+.ptx-content.serif #section-6 .para {
+ font-family: "Noto", serif;
+ font-size: 115%;
+ line-height: 1.30;
+}
+*/
+
+/* text in lists was big */
+.ptx-content.serif .para .para,
+.ptx-content[data-font="RS"] .para .para {
+ font-size: 100%;
+}
+
+.ptx-content[data-font="RS"] .code-inline {
+ background: #f6f6f6;
+ border: 1px solid #eee;
+ padding: 0.01em 0.15em 0.03em 0.15em;
+ margin-left: 0.15em;
+ margin-right: 0.15em;
+ border-radius: 0;
+}
+
+.pretext .ptx-content-footer {
+ margin-top: 2em;
+ display: flex;
+ justify-content: space-around;
+ max-width: 600px;
+ margin-left: 32px;
+}
+
+.pretext .ptx-content-footer .button {
+ min-width: 80px;
+ height: 35px;
+ color: #333333;
+ background-color: #ededed;
+ border: 1px solid #bababa;
+ padding: 0 10px;
+ display: flex;
+ gap: 10px;
+ align-items: center;
+ justify-content: center;
+ /* Disable accidental text-selection */
+ user-select: none;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+.pretext .ptx-content-footer .button .icon {
+ margin: 0 -7px; /* icons have lots of whitespace */
+}
+
+.pretext .ptx-content-footer .button:hover,
+.pretext .ptx-content-footer .button:active,
+.pretext .ptx-content-footer .button:focus {
+ background-color: #fafafa;
+}
+
+
+.pretext .ptx-sidebar.visible {
+ display: block;
+}
+
+
+.pretext .ptx-page-footer .feedback-link {
+ cursor: pointer;
+ text-align: center;
+ color: #333333;
+ background-color: #ededed;
+ border: 1px solid #bababa;
+ margin: 1.5em 0 0 0;
+ padding: 0 1em 0 1em;
+ height: 2em;
+ display: flex;
+ align-items: center;
+}
+.pretext .ptx-page-footer {
+ background: #f4f4f4;
+ margin-top: 2em;
+ padding-top: 0;
+ max-width: 900px;
+ border-top: 2px solid var(--sectiontoctext);
+ border-bottom: 2px solid var(--sectiontoctext);
+ display: flex;
+ flex-direction: row;
+ justify-content: space-around;
+ position: relative;
+/*
+ z-index: 100;
+*/
+}
+
+.pretext .ptx-page-footer > a {
+ margin: 1em 0;
+}
+.pretext .ptx-page-footer > a > .logo:first-child {
+ height: 3em;
+ width: unset;
+ margin: 0;
+}
+
+
+
+@media screen and (max-width: 800px) {
+ .pretext .ptx-navbar {
+ position: fixed;
+ top: auto;
+ bottom: 0;
+ z-index: 1100;
+ }
+ .pretext .ptx-sidebar {
+ display: none;
+ position: fixed;
+ top: 10px;
+ z-index: 1000;
+ background: white;
+ }
+ .pretext .ptx-content-footer {
+ display: none;
+ }
+/*
+ .pretext .ptx-content-footer {
+ margin-bottom: 60px;
+ }
+*/
+ .pretext .ptx-toc {
+ height: calc(100vh - 50px);
+ }
+}
+
+/*******************************************************************************
+ *
+ * Authors: David Farmer, Rob Beezer
+ *
+ *******************************************************************************
+ */
diff --git a/_static/pretext/css/shell_min.css b/_static/pretext/css/shell_min.css
new file mode 100644
index 00000000..1c1ead3d
--- /dev/null
+++ b/_static/pretext/css/shell_min.css
@@ -0,0 +1,273 @@
+/*******************************************************************************
+ * shell_X.css controls the overall arrangement of the blocks on the page.
+ *******************************************************************************
+ *
+ * Authors: David Farmer, Rob Beezer
+ *
+ *******************************************************************************
+ */
+
+/* The overall structure is
+ html
+ head
+ body.pretext
+ header.ptx-masthead
+ nav.ptx-navbar
+ div.ptx-page
+ div.sidebar
+ nav.ptx-toc
+ main.ptx-main
+ div.ptx-content
+ div.ptx-content-footer
+ div.ptx-page-footer
+*/
+
+.pretext .ptx-masthead {
+ position: relative;
+ background: #fafafa;
+ min-height: inherit;
+ border: none;
+}
+
+.pretext .ptx-navbar {
+ position: sticky;
+ top: 0;
+ max-width: 904px;
+}
+
+.pretext .ptx-page {
+ position: relative;
+}
+
+.pretext .ptx-sidebar {
+ position: sticky;
+ top: 41px;
+ float: left;
+ width: 240px;
+}
+
+.pretext .ptx-toc {
+ position: sticky;
+ top: 50px;
+ box-sizing: border-box;
+ overflow-y: scroll;
+ height: calc(100vh - 60px);
+}
+
+.pretext .ptx-page > .ptx-main {
+ display: block;
+ position: relative;
+ overflow-y: hidden;
+ margin: 0 0 0 240px;
+ padding: 1px 0 0 0;
+ background: white;
+ border-left: 1px solid #ccc;
+}
+@media screen and (max-width: 800px) {
+ .pretext .ptx-page > .ptx-main {
+ margin-left: 0;
+ left: auto;
+ }
+}
+
+.pretext .ptx-page > .ptx-main .ptx-content {
+ max-width: 600px;
+ margin: 32px;
+}
+@media screen and (max-width: 663px) {
+ .pretext .ptx-page > .ptx-main .ptx-content {
+ /* Decrease the margins */
+ margin: 28px;
+ }
+}
+
+/*
+.ptx-content.serif .para {
+ font-family: "PT Serif", "Times New Roman", serif;
+ font-size: 105%;
+}
+.ptx-content.serif #text-in-paragraphs .para,
+.ptx-content.serif #Bcd .para,
+.ptx-content.serif #interesting-corollary .para {
+ font-family: "Roboto Serif", serif;
+ font-size: 12pt;
+ line-height: 1.20;
+ font-variation-settings: 'wdth' 100;
+
+}
+.ptx-content.serif #table-calisthenics .para,
+.ptx-content.serif #section-7 .para,
+.ptx-content.serif #section-11 .para {
+ font-family: "Tinos", serif;
+ font-size: 115%;
+ line-height: 1.30;
+}
+
+.ptx-content.serif #section-6 .para,
+.ptx-content.serif #section-6 .para {
+ font-family: "Noto", serif;
+ font-size: 115%;
+ line-height: 1.30;
+}
+*/
+
+/* text in lists was big */
+.ptx-content.serif .para .para,
+.ptx-content[data-font="RS"] .para .para {
+ font-size: 100%;
+}
+
+.ptx-content[data-font="RS"] .code-inline {
+ background: #f6f6f6;
+ border: 1px solid #eee;
+ padding: 0.01em 0.15em 0.03em 0.15em;
+ margin-left: 0.15em;
+ margin-right: 0.15em;
+ border-radius: 0;
+}
+
+.pretext .ptx-content-footer {
+ margin-top: 2em;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-around;
+ max-width: 650px;
+}
+.pretext .ptx-content-footer .button {
+ cursor: pointer;
+ text-align: center;
+ color: #333333;
+ background-color: #ededed;
+ border: 1px solid #bababa;
+ padding: 0;
+ display: flex;
+ align-items: center;
+}
+.pretext .ptx-content-footer .button:hover,
+.pretext .ptx-content-footer .button:active,
+.pretext .ptx-content-footer .button:focus {
+ background-color: #fafafa;
+}
+
+.pretext .ptx-content-footer .button.top-button {
+ text-align: center;
+ width: 40px;
+ height: 50px;
+}
+.pretext .ptx-content-footer .button.previous-button,
+.pretext .ptx-content-footer .button.next-button {
+ font-size: 1.0em;
+ cursor: pointer;
+ display: inline-block;
+ vertical-align: middle;
+ height: 35px;
+ width: 65px;
+ /* Disable accidental text-selection */
+ user-select: none;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ float: left;
+ position: relative;
+ margin-top: 0.5em;
+}
+.pretext .ptx-content-footer .previous-button {
+ text-align: left;
+}
+.pretext .ptx-content-footer .next-button {
+ text-align: right;
+}
+
+.pretext .ptx-content-footer .name {
+ position: relative;
+ bottom: 0;
+}
+.pretext .ptx-content-footer .icon {
+ font-size: 1.3em;
+ Position: relative;
+ bottom: -0.1em;
+}
+.pretext .ptx-content-footer .previous-button .icon {
+ margin-left: 0.3em;
+ margin-right: 0.2em;
+}
+.pretext .ptx-content-footer .next-button .icon {
+ margin-left: 0.2em;
+ margin-right: 0.3em;
+}
+.pretext .ptx-content-footer .next-button {
+ text-align: right;
+}
+.pretext .ptx-content-footer .previous-button {
+ width: 70px;
+ float: right;
+ border-left: 1px solid #bababa;
+ border-right: 1px solid #bababa;
+}
+.pretext .ptx-content-footer .next-button {
+ width: 70px;
+ float: right;
+ border-right: 1px solid #bababa;
+}
+
+
+
+.pretext .ptx-content-footer .top-button {
+ display: block;
+}
+
+.pretext .ptx-content-footer .top-button .icon,
+.pretext .ptx-content-footer .top-button .name {
+ display: block;
+}
+.pretext .ptx-content-footer .top-button .icon {
+ bottom: 0;
+}
+.pretext .ptx-content-footer .top-button .name {
+ position: relative;
+ bottom: 0.4em;
+}
+
+@media screen and (max-width: 800px) {
+ .pretext .ptx-navbar {
+ position: fixed;
+ top: auto;
+ bottom: 0;
+ }
+ .pretext .ptx-sidebar {
+ display: none;
+ }
+ .pretext .ptx-content-footer {
+ display: none;
+ }
+/*
+ .pretext .ptx-content-footer {
+ margin-bottom: 60px;
+ }
+*/
+ .pretext .ptx-toc {
+ height: calc(100vh - 50px);
+ }
+ .pretext .ptx-navbar .calculator-toggle,
+ .pretext .ptx-navbar .index-button {
+ display: none;
+ }
+ .pretext .ptx-navbar .toc-toggle {
+ width: 25%;
+ }
+ .pretext .ptx-navbar .treebuttons {
+ width: 75%;
+ }
+ .pretext .ptx-navbar .previous-button,
+ .pretext .ptx-navbar .up-button,
+ .pretext .ptx-navbar .next-button {
+ width: 33.3%;
+ }
+}
+
+/*******************************************************************************
+ *
+ * Authors: David Farmer, Rob Beezer
+ *
+ *******************************************************************************
+ */
diff --git a/_static/pretext/css/shell_wide.css b/_static/pretext/css/shell_wide.css
new file mode 100644
index 00000000..93418b60
--- /dev/null
+++ b/_static/pretext/css/shell_wide.css
@@ -0,0 +1,350 @@
+@import url("shell_default.css");
+
+:root {
+ --content-margin: 32px;
+ --content-width: 750px;
+ --content-width-wide: 1050px;
+ --page-width: 1100px;
+ --xl-margin: calc(
+ (var(--content-width) - var(--content-width-wide)) / 2 -
+ var(--content-margin)
+ );
+
+ --content-font-size: 1.2rem;
+}
+
+html {
+ font-size: 16px !important; /* temp override runestone injection */
+}
+
+:root {
+ --questionBgColor: var(--componentBgColor) !important;
+}
+
+:root {
+ --component-border-color: #bababa;
+ --page-gutter-color: #c5c4c4;
+ --page-border-color: #444;
+ --page-color: white;
+}
+
+.pretext .ptx-masthead {
+ border-bottom: 1px solid var(--component-border-color);
+}
+
+body.pretext {
+ background-color: var(--page-gutter-color);
+}
+
+.pretext .ptx-page {
+ position: relative;
+ min-height: 100vh;
+ max-width: var(--page-width);
+ margin: 0 auto;
+ background: var(--page-color);
+
+ box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
+}
+
+.searchresultsplaceholder {
+ left: calc(50vw - 300px);
+}
+
+.pretext .ptx-page .ptx-main {
+ max-width: var(--content-width);
+ margin: 0 auto;
+ padding-bottom: 2em;
+ border: 0;
+ overflow: visible;
+}
+
+.pretext .ptx-page .ptx-sidebar.hidden + .ptx-main {
+ margin: 0 auto;
+}
+
+.pretext .ptx-page > .ptx-main .ptx-content {
+ max-width: var(--content-width);
+ font-size: var(--content-font-size);
+}
+
+.pretext .ptx-page-footer {
+ max-width: var(--page-width);
+ justify-content: center;
+ margin: 0 auto;
+ gap: 90px;
+ box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
+ border-bottom: 0;
+}
+
+.pretext .ptx-content-footer {
+ max-width: 100%;
+ margin: 2em auto 0;
+ padding-bottom: 2em;
+ justify-content: space-evenly;
+}
+
+.pretext .ptx-page-footer a {
+ --margin: 15px 45px;
+}
+
+/* components that should be wide */
+.ptx-content
+ .runestone:is(.ac_section, .codelens, .parsons_section, .hparsons_section),
+/* .ptx-content pre.program, */
+.ptx-content .runestone.datafile,
+.ptx-content .contains-wide {
+ width: var(--content-width-wide);
+ max-width: unset;
+ margin-left: var(--xl-margin);
+ max-width: unset;
+ border-width: 1px;
+ border-radius: 3px;
+}
+
+/* unless nested in other runestone's */
+.ptx-content
+ .runestone
+ .runestone:is(.ac_section, .codelens, .parsons_section, .hparsons_section),
+/* .ptx-content .runestone pre.program, */
+.ptx-content .runestone .runestone.datafile {
+ width: 100%;
+ margin-left: auto;
+}
+
+.ptx-content .runestone {
+ border-width: 1px;
+ border-radius: 3px;
+}
+
+.pretext .ptx-page > .ptx-main .ptx-content pre,
+.pretext
+ .ptx-page
+ > .ptx-main
+ .ptx-content
+ .ptx-runestone-container
+ :is(.ac_code_div),
+.ptx-runestone-container .parsons .sortable-code-container,
+.ptx-runestone-container .hparsons_section .hparsons-input {
+ font-size: 1rem;
+}
+
+/* limit width of content inside ac except for actual activecode */
+.ptx-content
+ .runestone.ac_section
+ > div
+ > div
+ > *:not(.ac_code_div):not(.ac_output):not(.codelens):not(.ac_actions) {
+ max-width: calc(var(--content-width) - 2 * var(--content-margin));
+ margin-left: auto;
+ margin-right: auto;
+}
+
+
+/* limit width of content inside contains-wide */
+.ptx-content .runestone.contains-wide .tab-content {
+ max-width: var(--content-width);
+ margin-left: auto;
+ margin-right: auto;
+}
+
+/* but widen item that needs it */
+.ptx-content .runestone.contains-wide .tab-content
+ .runestone:is(.ac_section, .codelens, .parsons_section, .hparsons_section) {
+ width: calc(var(--content-width-wide) - 20px);
+ margin-left: calc(var(--xl-margin) + 8px);
+ }
+
+
+/* limit width of content inside parsons except for actual parsons */
+.ptx-content .runestone.parsons_section > .parsons {
+ width: 100%;
+ padding-right: 0;
+}
+
+.ptx-content
+ .runestone.parsons_section
+ > .parsons
+ > div
+ > *:not(.sortable-code-container) {
+ max-width: calc(var(--content-width) - 2 * var(--content-margin));
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.ptx-content .runestone .parsons .sortable-code-container {
+ display: flex;
+ flex-flow: wrap;
+ justify-content: center;
+ gap: 15px;
+ margin: 10px auto;
+}
+
+.ptx-content .ptx-runestone-container .parsons .sortable-code {
+ margin: 0;
+}
+
+.ptx-content .runestone .parsons .runestone_caption_text {
+ max-width: unset;
+}
+
+.ptx-content .runestone .parsons .lines code {
+ white-space: nowrap;
+}
+
+.ptx-content .runestone .parsons .lines code .token {
+ background: none; /*fix prism overlap */
+}
+
+.ptx-runestone-container .runestone.parsons_section {
+ padding-top: 15px;
+}
+
+/* whole bunch of rules to relatively gracefully handle lots of different sizes without js */
+@media screen and (max-width: 1100px) {
+ /* tune to match --page-width */
+ :root {
+ --page-width: 100%;
+ }
+}
+
+@media screen and (max-width: 1100px) {
+ :root {
+ --content-width-wide: 1000px;
+ }
+}
+
+@media screen and (max-width: 1050px) {
+ :root {
+ --content-width-wide: 950px;
+ }
+}
+
+@media screen and (max-width: 1000px) {
+ :root {
+ --content-width-wide: 900px;
+ }
+}
+
+@media screen and (max-width: 950px) {
+ :root {
+ --content-width-wide: 850px;
+ }
+}
+
+@media screen and (max-width: 900px) {
+ :root {
+ --content-width-wide: 800px;
+ }
+}
+
+@media screen and (max-width: 943px) {
+ /* Override rule that adds scrollbars to program listings when not needed */
+ .ptx-content .figure-like {
+ overflow-x: inherit;
+ }
+}
+
+@media screen and (max-width: 850px) {
+ /* match to --content-width - should be that + 100 */
+ :root {
+ --content-width: 100%;
+ --content-width-wide: calc(100% + 2 * var(--content-margin));
+ --xl-margin: calc(-1 * var(--content-margin));
+ }
+
+ /* nested sizing */
+ .ptx-content
+ article:is(
+ .theorem-like,
+ .definition-like,
+ .example-like,
+ .project-like,
+ .remark-like,
+ .openproblem-like,
+ .openproblems-like,
+ .computation-like
+ )
+ > .ptx-runestone-container
+ > .runestone:is(
+ .ac_section,
+ .codelens,
+ .parsons_section,
+ .hparsons_section
+ ),
+ /* .ptx-content
+ article:is(
+ .theorem-like,
+ .definition-like,
+ .example-like,
+ .project-like,
+ .remark-like,
+ .openproblem-like,
+ .openproblems-like,
+ .computation-like
+ )
+ > .ptx-runestone-container
+ > pre.program, */
+ .ptx-content
+ article:is(
+ .theorem-like,
+ .definition-like,
+ .example-like,
+ .project-like,
+ .remark-like,
+ .openproblem-like,
+ .openproblems-like,
+ .computation-like
+ )
+ > .ptx-runestone-container
+ > .runestone.datafile,
+ .ptx-content
+ article:is(
+ .theorem-like,
+ .definition-like,
+ .example-like,
+ .project-like,
+ .remark-like,
+ .openproblem-like,
+ .openproblems-like,
+ .computation-like
+ )
+ > .ptx-runestone-container
+ > .runestone.contains-wide {
+ width: calc(var(--content-width-wide) + 10px);
+ }
+
+ .ptx-content
+ .runestone:is(.ac_section, .codelens, .parsons_section, .hparsons_section, .contains-wide) {
+ border-left: 0;
+ border-right: 0;
+ border-top: 1px solid #aaa;
+ border-bottom: 1px solid #aaa;
+ border-radius: 0;
+ }
+
+ .ptx-content .code-inline {
+ white-space: pre-wrap;
+ }
+
+ .ptx-runestone-container .cd_section,
+ .ptx-content .ptx-runestone-container .parsons .sortable-code {
+ overflow-x: auto;
+ }
+
+ .ptx-content .ptx-runestone-container .parsons .sortable-code:first-of-type {
+ padding: 0 25px;
+ }
+
+ .searchresultsplaceholder {
+ width: 80vw;
+ left: 10vw;
+ bottom: 10vh;
+ }
+
+}
+
+@media screen and (max-width: 663px) {
+ :root {
+ --content-margin: 28px; /* based on shell_default */
+ }
+}
diff --git a/_static/pretext/css/style_default.css b/_static/pretext/css/style_default.css
new file mode 100644
index 00000000..0fb58fdf
--- /dev/null
+++ b/_static/pretext/css/style_default.css
@@ -0,0 +1,332 @@
+
+/* The Greg's L for theorems, proofs, etc */
+
+.ptx-content .proof {
+ border-right: 1px solid #666;
+ padding-right: 0.625em;
+ margin-right: -0.725em;
+}
+.ptx-content .proof:after {
+ content: '';
+ border-bottom: 1px solid #666;
+ display: block;
+ margin-left: auto;
+ margin-right: -0.625em;
+ /* so the corner of the L meets */
+ width: 1.5em;
+ padding-bottom: 0.25em;
+}
+
+.ptx-content.epub .proof {
+ margin-right: 1px;
+}
+
+.ptx-content .proof .proof {
+ margin-right: -0.2em;
+ border-right: 1.5px solid #ddd;
+}
+.ptx-content .proof .proof:after {
+ border-bottom: 1.5px solid #ddd;
+ width: 1em;
+}
+
+.ptx-content article.theorem-like,
+.ptx-content article.definition-like,
+.ptx-content article.example-like,
+.ptx-content article.project-like,
+.ptx-content article.remark-like,
+.ptx-content article.openproblem-like,
+.ptx-content article.openproblems-like, /* delete once markup is fixed */
+.ptx-content article.computation-like {
+ padding-left: 0.4em;
+ border-left: 1px solid #569;
+}
+
+.ptx-content.epub article.theorem-like,
+.ptx-content.epub article.definition-like,
+.ptx-content.epub article.example-like,
+.ptx-content.epub article.project-like,
+.ptx-content.epub article.remark-like,
+.ptx-content article.openproblem-like,
+.ptx-content article.openproblems-like, /* delete once markup is fixed */
+.ptx-content.epub article.computation-like {
+ margin-left: 1px;
+}
+
+
+.ptx-content article.theorem-like::after,
+.ptx-content article.definition-like::after,
+.ptx-content article.example-like::after,
+.ptx-content article.project-like::after,
+.ptx-content article.remark-like::after,
+.ptx-content article.openproblem-like::after,
+.ptx-content article.openproblems-like::after, /* delete once markup is fixed */
+.ptx-content article.computation-like::after {
+ content:'';
+ border-bottom: 1px solid #569;
+ display: block;
+ margin-right: auto;
+ margin-left: -0.5em;
+ padding-top: 0.25em;
+ width: 1.5em;
+}
+/* projects get a dotted L */
+.ptx-content article.project-like {
+ border-left: 1px dotted #569;
+}
+.ptx-content article.project-like::after {
+ border-bottom: 1px dotted #569;
+}
+
+/* commentary gets a thicker red L */
+
+.ptx-content article.commentary {
+ padding-left: 0.6em;
+ border-left: 3px solid #c33;
+}
+.ptx-content article.commentary::after {
+ content:'';
+ border-bottom: 3px solid #c33;
+ display: block;
+ margin-right: auto;
+ margin-left: -0.6em;
+ padding-top: 0.25em;
+ width: 1.5em;
+}
+
+.ptx-content .assemblage-like {
+ border: solid 2px #1100AA;
+ border-radius: 12px;
+ padding: 10px;
+ background-color: #f4f4fe;
+}
+
+.ptx-content .assemblage-like .heading {
+ margin-top: 0;
+}
+
+.ptx-content .assemblage-like + .sidebyside {
+ margin-top: 1.25em;
+}
+.ptx-content section article.assemblage-like .heading + .para {
+ display: block;
+}
+
+.ptx-content .goal-like {
+ border: solid 3px #999999;
+ padding: 0.7em;
+ margin-bottom: 1em;
+}
+
+.ptx-content .goal-like > .heading {
+ margin-top: -1.5em;
+ background-color: white;
+ display: table;
+ padding: 5px 1em;
+ margin-left: 5px;
+ font-style: italic;
+ font-size: 120%;
+}
+
+.ptx-content .goal-like > .heading .codenumber {
+ display:none;
+}
+
+.ptx-content .goal-like > .heading::after {
+ display:none;
+}
+
+
+.ptx-content .aside-like {
+ position: absolute;
+ margin-left: 45%;
+ overflow-x: hidden;
+ max-width: 495px;
+ max-height: 7em;
+ overflow-y: hidden;
+ border: none;
+ padding: 4px 10px 0 10px;
+ color: #888;
+ z-index: 100;
+}
+.ptx-content .example-like .aside-like {
+ margin-top: 0;
+ position: absolute;
+}
+.ptx-content .aside-like {
+ font-size: 90%;
+}
+.ptx-content .aside-like {
+ margin-bottom: 5px;
+ background-color: #f5faff;
+ box-shadow: 0 0 1.0em 0.2em #fff inset;
+}
+.ptx-content .aside-like .para {
+ overflow-x: auto;
+}
+.ptx-content .aside-like:first-child {
+ margin-top: -2.25em;
+}
+.ptx-content .aside-like:after {
+ content : "";
+ position : absolute;
+ z-index : 1;
+ top : 0em;
+ bottom : 0;
+ left : 0;
+ pointer-events : none;
+ background-image : linear-gradient(to bottom,
+ rgba(255,255,255, 0.4),
+ rgba(255,255,255, 1) 90%);
+ width : 550px;
+ height : 8em;
+}
+/* example of where the following is needed? */
+/*
+.ptx-content .aside-like * {
+ background-color: #f5faff !important;
+}
+*/
+.ptx-content .aside-like.front, .ptx-content .example-like .aside-like.front {
+ position: relative;
+ z-index: 0;
+ padding: 8px 15px 10px 15px;
+ padding: 2px 10px;
+ margin: 5px 0px 5px 10px;
+ border: 2px solid #dcebfa;
+ max-height: none;
+ max-width: 550px;
+ color: inherit;
+ font-size: 100%;
+ box-shadow: none;
+}
+.ptx-content .aside-like.front:after, .ptx-content .example-like .aside-like.front:after {
+ background-image: none;
+}
+.ptx-content .example-like .aside-like.front {
+ margin-top: 1.25em;
+}
+
+.ptx-content .aside-like.front + p{
+ margin-top: 1.25em !important;
+ padding-top: 0;
+}
+
+
+
+.ptx-content .aside-like .aside-like {
+ background-color: #fafff5;
+ border: 1px dotted #aaa;
+}
+
+.ptx-content article.aside-like > p:first-child {
+ margin-top: 0;
+}
+
+.ptx-content .aside-like > .heading {
+ font-size: 95%;
+}
+
+.ptx-content .aside-like + *{
+ margin-top: 3em; /* !important; */
+ margin-right: 3em;
+}
+
+/* on sufficiently large screens, there is enough of a margin to see part of the aside */
+
+@media screen and (min-width: 943px) {
+ .ptx-content .aside-like + * {
+ margin-right: 0;
+ }
+}
+
+/* on a wide screen, asides should appear in the right margin */
+@media screen and (min-width: 1100px) {
+ .ptx-content .aside-like, .ptx-content .aside-like.front, .ptx-content .example-like .aside-like, .ptx-content .example-like .aside-like.front {
+ position: absolute;
+ margin-top: -2em;
+ margin-left: 660px;
+ max-width: 200px; /* for some reason the width was too small, so I had to put width (next line) */
+ width: 200px;
+ color: inherit;
+ }
+ .ptx-content .aside-like.front, .ptx-content .example-like .aside-like.front {
+ max-height: none;
+ max-width: 223px;
+ border: 2px solid #dcebfa;
+}
+ .ptx-content .example-like .aside-like, .ptx-content .example-like .aside-like.front {
+ margin-left: 654px; /* because .example-like has 6px of padding */
+ }
+
+ .ptx-content .aside-like + * {
+ margin-top: 1.25em;
+ /* background: none; */
+ margin-right: 0;
+ }
+ /* previous and next point to the need to rethink asides: structurally they are
+ in the midts of the other elements, so they affect neighbor selectors.
+ but visually they often are off to the side */
+ .ptx-content .aside-like + .solutions,
+ .ptx-content .aside-like + .instructions {
+ margin-top: 0;
+ }
+
+ .ptx-content .aside-like.front:after, .ptx-content .example-like .aside-like.front:after {
+ background-image: none;
+ }
+
+ .ptx-content .aside-like:nth-of-type(3n+1) {
+ margin-left: 660px;
+}
+ .ptx-content .aside-like:nth-of-type(3n) {
+ margin-left: 680px;
+}
+ .ptx-content .aside-like:nth-of-type(3n+2) {
+ margin-left: 640px;
+}
+}
+
+.ptx-content .aside-like:hover:after, .ptx-content .aside-like:focus:after {
+ top: 3em;
+ height: auto;
+ background-image : none;
+}
+
+.ptx-content .aside-like:hover, .ptx-content .aside-like:focus {
+ color: inherit;
+ padding: 2px 8px 0 8px;
+ border: 2px solid #dcebfa;
+ height: auto;
+ max-height: none;
+}
+.ptx-content .aside-like.front:hover, .ptx-content .aside-like.front:focus {
+ padding: 4px 10px;
+}
+
+/* find a better way to handle asides in content that has a wide left margin */
+/* see http://pretext.jahrme.com/aside-in-knowl/section-1.html */
+.ptx-content section dl dd .aside-like {
+ margin-top: 0 !important;
+ margin-left: 100px !important;
+}
+.ptx-content section dl dd .aside-like.front {
+ margin-left: -300px !important;
+}
+
+@media screen and (max-width: 1099px) {
+ .ptx-content .aside-like {
+ position: relative;
+ float: right;
+ z-index: 0;
+ overflow-x: hidden;
+ margin-left: 1em;
+ margin-top: 1em;
+ max-width: 195px;
+ max-height: 4em;
+ margin-right: -8em;
+}
+ .ptx-content li > .aside-like:last-child {
+ position: absolute;
+}
+}
diff --git a/_static/pretext/css/style_oscarlevin.css b/_static/pretext/css/style_oscarlevin.css
new file mode 100644
index 00000000..2e1296c8
--- /dev/null
+++ b/_static/pretext/css/style_oscarlevin.css
@@ -0,0 +1,471 @@
+/* Since the detault style is loaded before the oscarlevin style, */
+/* some of the default style has to be undone */
+
+.ptx-content article.theorem-like::after, .ptx-content article.definition-like::after, .ptx-content article.example-like::after, .ptx-content article.project-like::after, .ptx-content article.remark-like::after, .ptx-content article.openproblem-like::after, .ptx-content article.openproblems-like::after, .ptx-content article.computation-like::after {
+ content: unset;
+}
+
+.ptx-content article.theorem-like, .ptx-content article.definition-like, .ptx-content article.example-like, .ptx-content article.project-like, .ptx-content article.remark-like, .ptx-content article.openproblem-like, .ptx-content article.openproblems-like, .ptx-content article.computation-like {
+ padding: unset;
+ border: unset;
+}
+
+
+:root {
+/* Set colors for environments */
+
+ --assembbody: var(--bluelight, hsl(210, 90%, 80%));
+ --assembborder: var(--blue, hsl(210, 40%, 60%));
+ --assembhead: var(--blue, hsl(210, 40%, 75%));
+ --definitionbody: var(--greenlight, hsl(180, 40%, 80%));
+ --definitionborder: var(--green, hsl(180, 40%, 50%));
+ --definitionhead: var(--green, hsl(180, 40%, 50%));
+ --theorembody: var(--violetlight, hsl(270, 40%, 94%));
+ --theoremborder: var(--violet, hsl(270, 40%, 75%));
+ --theoremhead: var(--violetdark, hsl(270, 40%, 25%));
+ --examplebody: var(--bluedull, hsl(240, 40%, 90%));
+ --exampleborder: var(--bluedark, hsl(240, 40%, 25%));
+ --examplehead: var(--exampleborder);
+ --examplelikebody: var(--examplebody);
+ --examplelikeborder: var(--bluedull, hsl(240, 40%, 75%));
+ --examplelikehead: var(--examplelikeborder);
+ --projectbody: var(--greenlight, hsl(180, 40%, 94%));
+ --projectborder: var(--green, hsl(180, 40%, 75%));
+ --projecthead: var(--green, hsl(180, 40%, 75%));
+ --investigateborder: var(--bluerich, hsl(180, 40%, 25%));
+ --goalborder: var(--violetrich, hsl(270, 90%, 25%));
+ --remarklikebody: var(--yellowlight, hsl(59, 55%, 85%));
+ --remarklikeborder: var(--yellow, hsl(59, 55%, 50%));
+ --remarklikehead: var(--yellow, hsl(59, 55%, 50%));
+ --computationborder: var(--orangedull, hsl(180, 40%, 75%));
+
+ /* temporary workaround for setcolors.css use of assemblage */
+ --asemblagebackground: var(--assembbody) !important;
+ --assemblageborder: var(--assembborder) !important;
+}
+
+/* We can style all the *-like environments:
+ definition-like,
+ theorem-like,
+ example-like,
+ project-like,
+ remark-like,
+ computation-like,
+ goal-like, and
+ assemblage-like.
+ We also could do something for proofs, and commentary.
+
+ (should we style aside-like? Or just copy from style_default?)
+
+ We define the style of environments in three steps: first the shape, then the color, and finally the shape and color of the heading/title. The only reason to group these as such is that we can then have a common shape for differet *-like elements, but still allow for different colors to distinguish them.
+
+ Start with the important custom environments (theorem might be different from the other theorem-like, etc.), then clean up any standard *-like.
+
+*/
+
+/* definitions, theorems, assemblages, with theorem-like.theorem distinguished */
+.ptx-content article.assemblage-like,
+.ptx-content article.definition-like,
+.ptx-content article.theorem-like.theorem {
+ margin-top: 1.75em;
+ padding: 1em;
+ border-radius: 2px;
+ margin-bottom: 1em;
+}
+
+.ptx-content article.theorem-like {
+ margin-top: 1.25em;
+ padding: 1em;
+ border-radius: 2px;
+ margin-bottom: 1em;
+}
+
+.ptx-content article.assemblage-like{
+ background-color: var(--assembbody);
+ border: 2px solid var(--assembborder);
+}
+
+.ptx-content article.definition-like {
+ background-color: var(--definitionbody);
+ border: 2px solid var(--definitionborder);
+}
+
+.ptx-content article.theorem-like.theorem,
+.ptx-content article.theorem-like {
+ background-color: var(--theorembody);
+ border: 2px solid var(--theoremborder);
+}
+
+.ptx-content article.assemblage-like .heading,
+.ptx-content article.definition-like .heading,
+.ptx-content article.theorem-like.theorem .heading {
+ margin-top: -1.75em;
+ margin-left: -0.25em;
+ display: table;
+ padding: 0.25em 0.4em;
+}
+
+.ptx-content .assemblage-like .heading {
+ background-color: var(--assembhead);
+ color: #000;
+}
+
+.ptx-content .definition-like .heading {
+ background-color: var(--definitionborder);
+ color: #000;
+}
+
+.ptx-content .theorem-like.theorem .heading {
+ background-color: var(--theoremborder);
+ color: #000;
+}
+
+.ptx-content .example-like > .heading + .introduction,
+.ptx-content .computation-like > .heading + .introduction,
+.ptx-content .assemblage-like .heading + .para,
+.ptx-content .computation-like > .heading + .para,
+.ptx-content .example-like .heading + .para,
+.ptx-content .theorem-like.theorem .heading + .para,
+.ptx-content .definition-like .heading + .para {
+ display: block;
+ margin-top: 0.25em;
+}
+
+/* Examples and example-like; computation-like styled same as example-like with different colors */
+.ptx-content article.example-like,
+.ptx-content article.computation-like {
+ padding-left: 0.8em;
+ padding-bottom: 0.5em;
+}
+
+.ptx-content article.example-like.example {
+ border-left: 0.1em solid var(--examplehead);
+ border-bottom: 0.1em solid var(--examplehead);
+}
+
+.ptx-content article.example-like {
+ border-left: 0.1em solid var(--examplelikeborder);
+ border-bottom: 0.1em solid var(--examplelikeborder);
+}
+
+.ptx-content article.computation-like {
+ border-left: 0.1em solid var(--computationborder);
+ border-bottom: 0.1em solid var(--computationborder);
+}
+
+.ptx-content .example-like > .heading,
+.ptx-content .computation-like > .heading {
+ display: inline-block;
+ padding: 0.3em 0.5em;
+ margin-left: -0.8em;
+}
+
+
+.ptx-content .example-like.example > .heading {
+ border: 0.1em solid var(--examplehead); /* maybe no border-left? */
+ background: var(--examplehead);
+ color: white;
+}
+
+.ptx-content .example-like > .heading {
+ background: var(--examplelikeborder);
+ color: black;
+}
+
+.ptx-content .computation-like > .heading {
+ background: var(--computationborder);
+ color: black;
+}
+
+/* Project-like */
+.ptx-content article.project-like {
+ background-color: white;
+ border: solid 3px var(--projectborder);
+ border-radius: 10px;
+ padding: 10px;
+ margin-bottom: 1em;
+}
+
+.ptx-content article.project-like.investigation {
+ border-color: var(--investigateborder);
+}
+
+.ptx-content article.project-like > .heading {
+ margin-top: -1.5em;
+ background-color: white;
+ display: table !important;
+ padding: 5px 1em;
+ margin-left: 10px;
+ font-style: italic;
+ font-size: 120% !important;
+}
+
+
+/* Goal-like */
+
+.ptx-content .goal-like {
+ background-color: white;
+ border-radius: 0em;
+ padding: 0.7em;
+ margin-bottom: 1em;
+}
+.ptx-content .goal-like.objectives {
+ border-top: solid 3px var(--goalborder);
+ border-bottom: solid 3px var(--goalborder);
+ border-left: none;
+ border-right: none;
+}
+.ptx-content .goal-like.outcomes {
+ border-top: solid 3px var(--goalborder);
+ border-bottom: solid 3px var(--goalborder);
+ border-left: none;
+ border-right: none;
+}
+
+.ptx-content .goal-like .heading {
+ margin-top: -1.5em;
+ background-color: white;
+ display: table;
+ padding: 5px 1em;
+ margin-left: 10px;
+ font-style: italic;
+ font-size: 120%;
+}
+
+/* remark-like */
+
+.ptx-content article.remark-like {
+ margin-top: 1.25em;
+ padding: 1em;
+ padding-top: 0.7em;
+ margin-bottom: 1em;
+ border-radius: 0px;
+ border-left: 5px solid var(--remarklikeborder);
+ background-color: var(--remarklikebody);
+}
+
+
+/* proofs */
+
+.ptx-content section > .proof {
+ margin-bottom: 1em;
+}
+
+
+/* Common fixes? */
+.ptx-content article.assemblage-like .heading::after,
+.ptx-content article.theorem-like.theorem .heading::after,
+.ptx-content article.theorem-like .heading::after,
+.ptx-content article.example-like > .heading::after,
+.ptx-content article.project-like > .heading::after {
+ content: "";
+}
+
+/* Fixes for mathjax: */
+/* These gradients need to be adjusted to match background colors */
+.ptx-content .assemblage-like .MJXc-display,
+.ptx-content .definition-like .MJXc-display,
+.ptx-content .theorem-like.theorem .MJXc-display {
+ background-image: linear-gradient(to right, #e9eff5, #e9eff5), linear-gradient(to right, #e9eff5, #e9eff5), linear-gradient(to right, rgba(0,0,0,.25), rgba(242,242,254,0)), linear-gradient(to left, rgba(0,0,0,.25), rgba(242,242,254,0));
+}
+.ptx-content .theorem-like.corollary .MJXc-display {
+ background-image: linear-gradient(to right, var(--bodytitlehighlight), var(--bodytitlehighlight)), linear-gradient(to right, var(--bodytitlehighlight), var(--bodytitlehighlight)), linear-gradient(to right, rgba(0,0,0,.25), rgba(242,242,254,0)), linear-gradient(to left, rgba(0,0,0,.25), rgba(242,242,254,0));
+}
+
+/*
+END OF STYLE_OSCARLEVIN
+(below is only stuff copied from style_default)
+*/
+
+
+
+/* Assides, copied directly from style_default.css */
+/* next selector first part of the following is due to the mistake of
+ putting paragraph spacing in the margin-bottom
+ Redo when we fix that error */
+.ptx-content .aside-like {
+ /* margin-top: -1.25em;
+*/
+ position: absolute;
+ margin-left: 45%;
+ overflow-x: hidden;
+ max-width: 495px;
+ max-height: 7em;
+ overflow-y: hidden;
+ border: none;
+ padding: 4px 10px 0 10px;
+ color: #888;
+}
+.ptx-content .example-like .aside-like {
+ margin-top: 0;
+ position: absolute;
+}
+.ptx-content .aside-like {
+ font-size: 90%;
+}
+.ptx-content .aside-like {
+ margin-bottom: 5px;
+ background-color: #f5faff;
+ box-shadow: 0 0 1.0em 0.2em #fff inset;
+}
+.ptx-content .aside-like:first-child {
+ margin-top: -2.25em;
+}
+.ptx-content .aside-like:after {
+ content : "";
+ position : absolute;
+ z-index : 1;
+ top : 0em;
+ bottom : 0;
+ left : 0;
+ pointer-events : none;
+ background-image : linear-gradient(to bottom,
+ rgba(255,255,255, 0.4),
+ rgba(255,255,255, 1) 90%);
+ width : 550px;
+ height : 8em;
+}
+/* example of where the following is needed? */
+/*
+.ptx-content .aside-like * {
+ background-color: #f5faff !important;
+}
+*/
+.ptx-content .aside-like.front, .ptx-content .example-like .aside-like.front {
+ position: relative;
+ z-index: 0;
+ padding: 8px 15px 10px 15px;
+ padding: 2px 10px;
+ margin: 5px 0px 5px 10px;
+ border: 2px solid #dcebfa;
+ max-height: none;
+ max-width: 550px;
+ color: inherit;
+ font-size: 100%;
+ box-shadow: none;
+}
+.ptx-content .aside-like.front:after, .ptx-content .example-like .aside-like.front:after {
+ background-image: none;
+}
+.ptx-content .example-like .aside-like.front {
+ margin-top: 1.25em;
+}
+
+.ptx-content .aside-like.front + .para{
+ margin-top: 1.25em !important;
+ padding-top: 0;
+}
+
+
+
+.ptx-content .aside-like .aside-like {
+ background-color: #fafff5;
+ border: 1px dotted #aaa;
+}
+
+.ptx-content article.aside-like > .para:first-child {
+ margin-top: 0;
+}
+
+.ptx-content .aside-like > .heading {
+ font-size: 95%;
+}
+
+.ptx-content .aside-like + *{
+ margin-top: 3em !important;
+ margin-right: 3em;
+}
+
+/* on sufficiently large screens, there is enough of a margin to see part of the aside */
+
+@media screen and (min-width: 943px) {
+ .ptx-content .aside-like + * {
+ margin-right: 0;
+ }
+}
+
+/* on a wide screen, asides should appear in the right margin */
+@media screen and (min-width: 1100px) {
+ .ptx-content .aside-like, .ptx-content .aside-like.front, .ptx-content .example-like .aside-like, .ptx-content .example-like .aside-like.front {
+ position: absolute;
+ margin-top: -2em;
+ margin-left: 660px;
+ max-width: 200px; /* for some reason the width was too small, so I had to put width (next line) */
+ width: 200px;
+ color: inherit;
+ }
+ .ptx-content .aside-like.front, .ptx-content .example-like .aside-like.front {
+ max-height: none;
+ max-width: 223px;
+ border: 2px solid #dcebfa;
+}
+ .ptx-content .example-like .aside-like, .ptx-content .example-like .aside-like.front {
+ margin-left: 654px; /* because .example-like has 6px of padding */
+ }
+
+ .ptx-content .aside-like + * {
+ margin-top: 1.25em !important;
+ /* background: none; */
+ margin-right: 0;
+ }
+
+ .ptx-content .aside-like.front:after, .ptx-content .example-like .aside-like.front:after {
+ background-image: none;
+ }
+
+ .ptx-content .aside-like:nth-of-type(3n+1) {
+ margin-left: 660px;
+}
+ .ptx-content .aside-like:nth-of-type(3n) {
+ margin-left: 680px;
+}
+ .ptx-content .aside-like:nth-of-type(3n+2) {
+ margin-left: 640px;
+}
+}
+
+.ptx-content .aside-like:hover:after, .ptx-content .aside-like:focus:after {
+ top: 3em;
+ height: auto;
+ background-image : none;
+}
+
+.ptx-content .aside-like:hover, .ptx-content .aside-like:focus {
+ color: inherit;
+ padding: 2px 8px 0 8px;
+ border: 2px solid #dcebfa;
+ height: auto;
+ max-height: none;
+}
+.ptx-content .aside-like.front:hover, .ptx-content .aside-like.front:focus {
+ padding: 4px 10px;
+}
+
+/* find a better way to handle asides in content that has a wide left margin */
+/* see http://pretext.jahrme.com/aside-in-knowl/section-1.html */
+.ptx-content section dl dd .aside-like {
+ margin-top: 0 !important;
+ margin-left: 100px !important;
+}
+.ptx-content section dl dd .aside-like.front {
+ margin-left: -300px !important;
+}
+
+@media screen and (max-width: 1099px) {
+ .ptx-content .aside-like {
+ position: relative;
+ float: right;
+ z-index: 0;
+ overflow-x: hidden;
+ margin-left: 1em;
+ margin-top: 1em;
+ max-width: 195px;
+ max-height: 4em;
+ margin-right: -8em;
+}
+ .ptx-content li > .aside-like:last-child {
+ position: absolute;
+}
+}
+
+
diff --git a/_static/pretext/css/style_soundwriting.css b/_static/pretext/css/style_soundwriting.css
new file mode 100644
index 00000000..4dcc5cab
--- /dev/null
+++ b/_static/pretext/css/style_soundwriting.css
@@ -0,0 +1,156 @@
+
+/*
+:root {
+ --documenttitle: #660000;
+ --bodytitle: #8e0a0c;
+ --bodysubtitle: #A62E1C;
+ --bodytitlehighlight: #eeeff3;
+ --bodysubtitlehighlight: #fce5e4;
+
+ --chaptertoc: #6d8899;
+ --chaptertoctext: white;
+ --chaptertocactive: var(--documenttitle);
+ --chaptertoctextactive: white;
+ --sectiontoc: white;
+ --sectiontoctext: #6f080b;
+ --sectiontocactive: var(--documenttitle);
+ --sectiontoctextactive: white;
+ --tocborder: #152f53;
+
+ --highlighttoc: #330000;
+ --highlighttoctext: white;
+ --highlighttocborder: var(--chaptertoc);
+
+ --videoplay: var(--bodytitle);
+ --assemblageborder: #1100aa;
+ --assemblagebackground: #f5f8ff;
+
+ --knowlborder: var(--bodytitlehighlight);
+ --knowlbackground: var(--assemblagebackground);
+}
+*/
+
+
+:root {
+/* Colors for titles */
+--chaptertitle: var(--documenttitle);
+--sectiontitle: var(--documenttitle);
+--subsectiontitle: var(--documenttitle);
+
+/* Set colors for blocks */
+
+ --bordercolor: var(--documenttitle);
+ --listbackground: #d0ccbd; /*neutral1*/
+ --insightbackground: #d0c681; /*muted2*/
+ --conventionbackground: #b1a77d; /*muted3*/
+ --notebackground: #93a396; /*muted4*/
+ --examplebackground: #a2bac2; /*muted5*/
+ --warningbackground: #b4bd00; /*bright4*/
+ --observationbackground: #48848d; /*bright6*/
+}
+
+
+/* Headings: */
+
+.ptx-content section.chapter h2.heading {
+ color: var(--chaptertitle);
+}
+
+.ptx-content section.chapter h2.heading .title {
+ display:block;
+ font-size:larger;
+ margin-top: 5pt;
+}
+
+.ptx-content section.section h2.heading {
+ color: var(--sectiontitle);
+ border-top: 1pt solid;
+ border-bottom: 1pt solid;
+ margin-bottom: 20pt;
+ width: 100%;
+}
+.ptx-content section.subsection h2.heading {
+ color: var(--subsectiontitle);
+ border-bottom: 1pt solid;
+ margin-bottom: 20pt;
+ width: 90%;
+}
+
+/* frontmatter headings: */
+.ptx-content section.frontmatter h2.heading {
+ color: var(--chaptertitle);
+ font-size:2em;
+}
+
+.ptx-content section.preface h2.heading,
+.ptx-content section.acknowledgement h2.heading,
+.ptx-content section.colophon h2.heading {
+ color: var(--chaptertitle);
+ margin-bottom: 15pt;
+ font-size: 1.75em;
+}
+
+.ptx-content section.preface h2.heading .title {
+ display:block;
+ font-size:larger;
+}
+
+/* Blocks: */
+
+/* set background colors */
+.ptx-content .list {
+ background-color: var(--listbackground);
+}
+.ptx-content .insight {
+ background-color: var(--insightbackground);
+}
+.ptx-content .convention {
+ background-color: var(--conventionbackground);
+}
+.ptx-content .note {
+ background-color: var(--notebackground);
+}
+.ptx-content .example {
+ background-color: var(--examplebackground);
+}
+.ptx-content .warning {
+ background-color: var(--warningbackground);
+}
+.ptx-content .observation {
+ background-color: var(--observationbackground);
+}
+
+/* set titles and borders */
+.ptx-content .remark-like,
+.ptx-content .example-like,
+.ptx-content .list {
+ padding: 1em;
+ border-radius: 10px;
+ margin-bottom: 1em;
+ border: 2px solid var(--bordercolor);
+}
+
+.ptx-content .example-like .example-like {
+ padding: 0;
+ margin: 0;
+ border: none;
+ background: inherit;
+}
+
+
+/* override list margins */
+.ptx-content .list {
+ margin-left: 0 !important;
+ margin-right: 0 !important;
+}
+
+.ptx-content .remark-like .heading,
+/* .ptx-content .example-like .heading, */
+.ptx-content .list figcaption {
+ display: block;
+ margin-top: -0.5em !important;
+ padding-bottom: 1em;
+ font-size: large; /*sets font caption size to match h6*/
+}
+
+
diff --git a/_static/pretext/css/style_wide.css b/_static/pretext/css/style_wide.css
new file mode 100644
index 00000000..9a02ebc0
--- /dev/null
+++ b/_static/pretext/css/style_wide.css
@@ -0,0 +1,225 @@
+@import url("style_default.css");
+
+/* handle margin of articles that items might be nested inside */
+/* first change nesting unit to px to avoid font-size issues */
+.ptx-content
+ article:is(
+ .theorem-like,
+ .definition-like,
+ .example-like,
+ .project-like,
+ .remark-like,
+ .openproblem-like,
+ .openproblems-like,
+ .computation-like
+ ) {
+ padding-left: 10px;
+}
+/* now overcome the indentation */
+.ptx-content
+ article:is(
+ .theorem-like,
+ .definition-like,
+ .example-like,
+ .project-like,
+ .remark-like,
+ .openproblem-like,
+ .openproblems-like,
+ .computation-like
+ )
+ > .ptx-runestone-container
+ > .runestone:is(.ac_section, .codelens, .parsons_section, .hparsons_section),
+/* .ptx-content
+ article:is(
+ .theorem-like,
+ .definition-like,
+ .example-like,
+ .project-like,
+ .remark-like,
+ .openproblem-like,
+ .openproblems-like,
+ .computation-like
+ )
+ > pre.program, */
+.ptx-content
+ article:is(
+ .theorem-like,
+ .definition-like,
+ .example-like,
+ .project-like,
+ .remark-like,
+ .openproblem-like,
+ .openproblems-like,
+ .computation-like
+ )
+ > .ptx-runestone-container
+ > .runestone.datafile,
+.ptx-content
+ article:is(
+ .theorem-like,
+ .definition-like,
+ .example-like,
+ .project-like,
+ .remark-like,
+ .openproblem-like,
+ .openproblems-like,
+ .computation-like
+) .contains-wide {
+ margin-left: calc(var(--xl-margin) - 10px);
+}
+
+
+
+.ptx-content .datafile pre {
+ border: 1px solid #616160;
+ border-radius: 3px;
+ padding: 10px;
+}
+
+.ptx-content .runestone.datafile {
+ margin-top: 10px;
+ margin-bottom: 10px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 10px;
+}
+
+.ptx-content .datafile_caption {
+ background: transparent;
+ border: 0;
+ margin: 0;
+ padding: 0;
+}
+
+.ac_actions {
+ font-size: 1rem;
+ margin-bottom: 5px;
+}
+
+.ptx-content .ptx-runestone-container .ac_output {
+ margin-bottom: 10px;
+}
+
+.ptx-content .ptx-runestone-container .codelens {
+ margin-bottom: 10px;
+}
+
+.ptx-content .ptx-runestone-container .ac_output pre {
+ width: 100%;
+ max-width: var(--content-width);
+ margin: 10px auto;
+}
+.ptx-runestone-container .ac-canvas {
+ margin-left: calc(50% - 202px);
+}
+.ptx-runestone-container .ac-canvas:empty {
+ display: none;
+}
+
+.runestone_caption {
+ font-size: 1rem;
+}
+
+.ptx-runestone-container .unittest-results table {
+ background: white;
+}
+
+.ptx-content .ptx-runestone-container div.ExecutionVisualizer table.visualizer {
+ width: 100%;
+}
+
+.ptx-content table tr td {
+ font-size: 1rem;
+}
+
+.pretext .ptx-content-footer {
+ align-items: stretch;
+}
+
+
+/*change margin to px to avoid font size issues */
+.ptx-content
+ article:is(
+ .theorem-like,
+ .definition-like,
+ .example-like,
+ .project-like,
+ .remark-like,
+ .openproblem-like,
+ .openproblems-like,
+ .computation-like
+ )::after {
+ margin-left: -10px;
+}
+
+.video-box {
+ margin: 0.75em auto !important;
+}
+
+.ac_code_div {
+ margin-top: 10px;
+}
+
+.pretext .ptx-runestone-container .ac_actions {
+ max-width: var(--content-width);
+ margin: 0 auto;
+ flex-wrap: nowrap;
+ align-items: center;
+ gap: 10px;
+ padding-left: 10px;
+ padding-right: 10px;
+}
+
+.pretext .ptx-runestone-container .ac_actions > * {
+ flex: 0 1;
+ margin: 0 !important;
+}
+
+
+.pretext .ptx-runestone-container .ac_actions > div:first-of-type {
+ display: flex !important;
+ flex-direction: column;
+ align-items: stretch;
+ text-align: center;
+ flex-grow: 1;
+}
+
+.ptx-runestone-container .unittest-results {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+
+.ptx-content pre.program.line-numbers,
+.ptx-content pre.code-block.line-numbers {
+ overflow-x: auto;
+}
+
+.hparsons_section {
+ max-width: unset !important;
+}
+
+.hparsons_section > :not(.hparsons_section, .hp_question) {
+ max-width: unset !important;
+}
+
+.ptx-runestone-container .hparsons_section .hp_question {
+ max-width: var(--content-width);
+}
+
+.matching_section > div > div {
+ font-size: 1rem;
+ clear: both;
+}
+.matching_section > div > div:first-of-type {
+ font-size: var(--content-font-size);
+}
+
+@media screen and (max-width: 600px) {
+ .pretext .ptx-runestone-container .ac_actions > * {
+ white-space: break-spaces;
+ flex-grow: 1;
+ }
+}
diff --git a/_static/pretext/css/toc_crc.css b/_static/pretext/css/toc_crc.css
new file mode 100644
index 00000000..b31c8753
--- /dev/null
+++ b/_static/pretext/css/toc_crc.css
@@ -0,0 +1,276 @@
+
+/* over-ride default css */
+.ptx-toc > ul.structural > li:not(:first-child) {
+ margin-top: 0;
+}
+.ptx-toc ul.structural li a {
+ border-bottom: 0;
+}
+
+.ptx-toc ul.structural li li a {
+ border-bottom: none; /*solid #999 1px; */
+}
+.ptx-toc ul.structural .toc-title-box {
+ border-top: solid #999 1px;
+}
+.ptx-toc ul.structural li ul.structural li:last-child {
+ margin-bottom: 0;
+}
+
+.ptx-toc {
+ width: 240px;
+ margin: 0;
+ font-size: 14.72px;
+ overflow-y: auto;
+ overflow-x: hidden;
+ background: #fff;
+}
+
+/* Aligns toc to the top and side of the allotted space, respectively */
+.ptx-toc ul {
+ margin: 0px;
+ padding: 0px;
+}
+
+.ptx-toc ul a,
+.ptx-toc ul .part a,
+.ptx-toc ul .frontmatter a {
+ font-weight: 700;
+ font-size: .9em;
+}
+.ptx-toc ul ul li a {
+ font-weight: 400;
+ grid-template-columns: 1.5em 1fr;
+}
+
+.ptx-toc .toc-chapter .toc-item-list .toc-item .codenumber {
+ font-size: 80%;
+ padding-top: 0.16em;
+}
+/* no codenumbers on subsections (anything under section) */
+.ptx-toc .toc-section .toc-item-list .toc-item a > .codenumber {
+ display: none;
+}
+.ptx-toc .toc-section .toc-item-list .toc-item a:hover > .codenumber {
+ display: inline-block;
+}
+
+.ptx-toc ul ul a > .title {
+ margin-left: 0;
+}
+.ptx-toc ul ul a > .title:empty::after {
+ content: "empty heading!";
+ font-weight: bold;
+}
+.ptx-toc ul ul ul a > .title {
+ margin-left: 0.5em;
+ font-size: 90%;
+}
+.ptx-toc ul ul ul ul a > .title {
+ margin-left: 2em;
+ font-size: 90%;
+ font-style: italic;
+}
+
+.ptx-toc ul li a {
+ text-decoration: none;
+}
+
+.ptx-toc > ul > li a {
+ font-weight: bold;
+ font-family: "PT Serif", "Times New Roman", Times, serif;
+ padding-left: 0.2em;
+}
+/*
+.ptx-toc ul li ul a:hover {
+ padding-top: -10px;
+}
+*/
+
+.ptx-toc ul li a:active {
+ box-shadow: rgba(0, 0, 0, 0.5) 0 2px 5px inset;
+}
+
+
+/* ************************************************** */
+/* Above code may be old. New code below */
+/* ************************************************** */
+
+
+/* TOC is initially closed in the CRC style */
+/* The onload js will close it, but you get an odd fluttering effect */
+
+/* comment out because we need to fix the fluttering effect.
+ if this is hidden by default, the page is not usable without JavaScript
+.ptx-sidebar {
+ display: none;
+}
+*/
+
+
+
+/* Links inside the dropdown */
+.ptx-toc a {
+ padding: .25em .5em .25em .5em;
+ text-decoration: none;
+ font-weight: 500;
+ font-size: .9em;
+ margin: 0px;
+}
+
+.ptx-toc ul,
+.ptx-toc ul li {
+ list-style-type: none;
+ margin: 0px;
+/* width: 255px; */ /* This one is key to making items menu uniform width */
+ padding-inline-start: 0px;
+}
+
+/* The anchor carries the grid content */
+/* undo what is in toc_default.css */
+.ptx-toc ul li a {
+ display: grid;
+/* made titles too wide */
+/*
+ width: 240px;
+*/
+ grid-gap: 3px;
+ grid-template-columns: 1.25em 10fr;
+ grid-template-areas:
+ "toc-codenumber toc-content";
+}
+.ptx-toc {
+ position: sticky;
+ top: 0;
+ width: unset;
+ height: 100vh;
+}
+
+/*
+.ptx-toc::after {
+ content: "";
+ display: block;
+ height: 13em;
+ background: #fff;
+}
+*/
+
+.ptx-toc::after {
+ content: url("data:image/svg+xml; utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='338 3000 8772 6866'%3E%3Cg style='stroke-width:.025in; stroke:black; fill:none'%3E%3Cpolyline points='472,3590 472,9732 ' style='stroke:%23000000;stroke-width:174; stroke-linejoin:miter; stroke-linecap:round; '%3E%3C/polyline%3E%3Cpath style='stroke:%23000000;stroke-width:126;stroke-linecap:butt;' d='M 4724,9448 A 4660 4660 0 0 1 8598 9259 '%3E%3C/path%3E%3Cpath style='stroke:%23000000;stroke-width:174;stroke-linecap:butt;' d='M 4488,9685 A 4228 4228 0 0 0 472 9732 '%3E%3C/path%3E%3Cpath style='stroke:%23000000;stroke-width:126;stroke-linecap:butt;' d='M 4724,3590 A 4241 4241 0 0 1 8598 3496 '%3E%3C/path%3E%3Cpath style='stroke:%23000000;stroke-width:126;stroke-linecap:round;' d='M 850,3496 A 4241 4241 0 0 1 4724 3590 '%3E%3C/path%3E%3Cpath style='stroke:%23000000;stroke-width:126;stroke-linecap:round;' d='M 850,9259 A 4507 4507 0 0 1 4724 9448 '%3E%3C/path%3E%3Cpolyline points='5385,4299 4062,8125 ' style='stroke:%23000000;stroke-width:300; stroke-linejoin:miter; stroke-linecap:round; '%3E%3C/polyline%3E%3Cpolyline points='8598,3496 8598,9259 ' style='stroke:%23000000;stroke-width:126; stroke-linejoin:miter; stroke-linecap:round; '%3E%3C/polyline%3E%3Cpolyline points='850,3496 850,9259 ' style='stroke:%23000000;stroke-width:126; stroke-linejoin:miter; stroke-linecap:round; '%3E%3C/polyline%3E%3Cpolyline points='4960,9685 4488,9685 ' style='stroke:%23000000;stroke-width:174; stroke-linejoin:miter; stroke-linecap:round; '%3E%3C/polyline%3E%3Cpolyline points='3070,4582 1889,6141 3070,7700 ' style='stroke:%23000000;stroke-width:300; stroke-linejoin:miter; stroke-linecap:round; '%3E%3C/polyline%3E%3Cpolyline points='6418,4582 7600,6141 6418,7700 ' style='stroke:%23000000;stroke-width:300; stroke-linejoin:miter; stroke-linecap:round; '%3E%3C/polyline%3E%3Cpolyline points='8976,3590 8976,9732 ' style='stroke:%23000000;stroke-width:174; stroke-linejoin:miter; stroke-linecap:round; '%3E%3C/polyline%3E%3Cpath style='stroke:%23000000;stroke-width:174;stroke-linecap:butt;' d='M 4960,9685 A 4228 4228 0 0 1 8976 9732 '%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
+ display: block;
+ height: 13em;
+ padding: 2em 1em;
+ background: #fff;
+}
+
+.ptx-toc > ul:first-child > li:last-child {
+ border-bottom: 4px solid #669;
+}
+
+
+
+/**** Use serif font for Roman numerals ****/
+/* .ptx-TOC-codenumber */
+.ptx-toc a > .codenumber {
+ font-family: "PT Serif", "Times New Roman", Times, serif;
+ grid-area: toc-codenumber;
+}
+
+/* .ptx-TOC-contents */
+.ptx-toc a > .title {
+ grid-area: toc-content;
+}
+
+.ptx-toc.depth0 ul.structural {
+ display: none;
+}
+.ptx-toc.depth1 ul.structural ul.structural {
+ display: none;
+}
+.ptx-toc.depth2 ul.structural ul.structural ul.structural {
+ display: none;
+}
+.ptx-toc.depth3 ul.structural ul.structural ul.structural ul.structural {
+ display: none;
+}
+.ptx-toc.depth4 ul.structural ul.structural ul.structural ul.structural ul.structural {
+ display: none;
+}
+
+
+/* Hide all but active area of book */
+.ptx-toc.focused ul.structural:not(.contains-active) > li {
+ display: none;
+}
+.ptx-toc.focused ul.structural li.active > ul > li {
+ display: block;
+}
+
+/* Hooks for js based switching */
+.ptx-toc.focused ul.structural:not(.contains-active) > li.visible {
+ display: block;
+}
+.ptx-toc.focused ul.structural li.active > ul > li.hidden {
+ display: none ;
+}
+
+
+.ptx-toc.focused > ul.structural > li:not(:first-child) {
+ margin-top: 0em;
+}
+.ptx-toc.focused ul.structural li ul.structural a:hover {
+ border: 0;
+}
+
+
+.toc-title-box {
+ display: flex;
+}
+
+.ptx-toc ul.structural li .toc-title-box a {
+ flex: 1 1;
+}
+
+.ptx-toc.focused .toc-expander {
+ border: 0;
+ padding: 2px 5px;
+ background: inherit;
+ color: inherit;
+ display: flex;
+ align-items: center;
+}
+
+.ptx-toc.focused .toc-expander .icon {
+ font-size: 30px;
+ line-height: 18px;
+ font-variation-settings: 'wght' 200;
+}
+
+.ptx-toc.focused .toc-expander:is(:hover) {
+ background-color: var(--highlighttoc);
+ color: var(--highlighttoctext);
+}
+
+.ptx-toc.focused .toc-expander:is(:hover) .icon {
+ fill: var(--highlighttoctext);
+}
+
+.ptx-toc.focused .toc-item.expanded > .toc-title-box > .toc-expander > .icon {
+ transform: rotate(-90deg);
+}
+
+/* Part colors fall back to same as chapter if not defined
+ Defined here and not in setcolors so that colors_ file can override as include
+ order is toc/colors/setcolors */
+:root {
+ --parttoc: var(--chaptertoc);
+ --parttoctext: var(--chaptertoctext);
+ --parttocactive: var(--documenttitle);
+ --parttoctextactive: var(--chaptertoctextactive);
+}
+/* But if browser supports, make parts very slightly darker than chapters */
+@supports (background: color-mix(in srgb, red 50%, blue)) {
+ :root {
+ --parttoc: color-mix(in srgb, var(--chaptertoc), black 15%);
+ }
+}
\ No newline at end of file
diff --git a/_static/pretext/css/toc_default.css b/_static/pretext/css/toc_default.css
new file mode 100644
index 00000000..a6f4314c
--- /dev/null
+++ b/_static/pretext/css/toc_default.css
@@ -0,0 +1,274 @@
+/* -------------------toc-------------------- */
+.ptx-toc {
+ /* IMPORTANT height must be calculated by javascript. */
+ width: 240px;
+ margin: 0;
+ font-size: 14.72px;
+ overflow-y: auto;
+ overflow-x: hidden;
+}
+.ptx-toc::after {
+ content: url("data:image/svg+xml; utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='338 3000 8772 6866'%3E%3Cg style='stroke-width:.025in; stroke:black; fill:none'%3E%3Cpolyline points='472,3590 472,9732 ' style='stroke:%23000000;stroke-width:174; stroke-linejoin:miter; stroke-linecap:round; '%3E%3C/polyline%3E%3Cpath style='stroke:%23000000;stroke-width:126;stroke-linecap:butt;' d='M 4724,9448 A 4660 4660 0 0 1 8598 9259 '%3E%3C/path%3E%3Cpath style='stroke:%23000000;stroke-width:174;stroke-linecap:butt;' d='M 4488,9685 A 4228 4228 0 0 0 472 9732 '%3E%3C/path%3E%3Cpath style='stroke:%23000000;stroke-width:126;stroke-linecap:butt;' d='M 4724,3590 A 4241 4241 0 0 1 8598 3496 '%3E%3C/path%3E%3Cpath style='stroke:%23000000;stroke-width:126;stroke-linecap:round;' d='M 850,3496 A 4241 4241 0 0 1 4724 3590 '%3E%3C/path%3E%3Cpath style='stroke:%23000000;stroke-width:126;stroke-linecap:round;' d='M 850,9259 A 4507 4507 0 0 1 4724 9448 '%3E%3C/path%3E%3Cpolyline points='5385,4299 4062,8125 ' style='stroke:%23000000;stroke-width:300; stroke-linejoin:miter; stroke-linecap:round; '%3E%3C/polyline%3E%3Cpolyline points='8598,3496 8598,9259 ' style='stroke:%23000000;stroke-width:126; stroke-linejoin:miter; stroke-linecap:round; '%3E%3C/polyline%3E%3Cpolyline points='850,3496 850,9259 ' style='stroke:%23000000;stroke-width:126; stroke-linejoin:miter; stroke-linecap:round; '%3E%3C/polyline%3E%3Cpolyline points='4960,9685 4488,9685 ' style='stroke:%23000000;stroke-width:174; stroke-linejoin:miter; stroke-linecap:round; '%3E%3C/polyline%3E%3Cpolyline points='3070,4582 1889,6141 3070,7700 ' style='stroke:%23000000;stroke-width:300; stroke-linejoin:miter; stroke-linecap:round; '%3E%3C/polyline%3E%3Cpolyline points='6418,4582 7600,6141 6418,7700 ' style='stroke:%23000000;stroke-width:300; stroke-linejoin:miter; stroke-linecap:round; '%3E%3C/polyline%3E%3Cpolyline points='8976,3590 8976,9732 ' style='stroke:%23000000;stroke-width:174; stroke-linejoin:miter; stroke-linecap:round; '%3E%3C/polyline%3E%3Cpath style='stroke:%23000000;stroke-width:174;stroke-linecap:butt;' d='M 4960,9685 A 4228 4228 0 0 1 8976 9732 '%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
+ display: block;
+ height: 13em;
+ padding: 2em 1em;
+ background: #fff;
+}
+
+.ptx-toc > .toc-item-list:first-child > .toc-item:last-child {
+ border-bottom: 8px solid #999;
+}
+
+/* -------------------toc-items-------------------- */
+
+.ptx-toc {
+ --codenumber-pad-left: 0.3rem;
+ --codenumber-pad-right: 0.5rem;
+
+ --toc-indent-first: calc(1.0rem + var(--codenumber-pad-left) + var(--codenumber-pad-right));
+ --toc-indent-second: calc(1.7rem + var(--codenumber-pad-left) + var(--codenumber-pad-right));
+ --toc-indent-third: calc(2.2rem + var(--codenumber-pad-left) + var(--codenumber-pad-right));
+}
+
+/* will be less indentation */
+.ptx-toc:is(.depth1, .parts.depth2) {
+ --codenumber-pad-right: 0.5rem;
+}
+
+.ptx-toc .toc-item-list {
+ margin: 0px;
+ padding: 0px;
+ list-style-type: none;
+}
+
+.ptx-toc .toc-item {
+ border-top: 1px solid var(--tocborder, #d1d1d1);
+}
+
+/* -------------------title-box------------------- */
+
+.ptx-toc .toc-title-box {
+ display: flex;
+}
+
+.ptx-toc .toc-title-box > .internal {
+ position: relative;
+ display: flex;
+ flex-grow: 1;
+ padding: 0.2em;
+ font-family: "PT Serif", "Times New Roman", Times, serif;
+ font-weight: bold;
+}
+
+/* at second level, switch fonts */
+.ptx-toc .toc-item-list .toc-item-list .toc-title-box > .internal {
+ font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-weight: normal;
+}
+
+/* Extra border above top level items */
+.ptx-toc > .toc-item-list > .toc-item {
+ border-top: 2px solid var(--tocborder, #d1d1d1);
+}
+
+.ptx-toc .toc-item.active {
+ box-shadow: rgba(0, 0, 0, 0.5) 0 2px 5px inset;
+}
+
+
+/* -------------------codenumbers-------------------- */
+.ptx-toc .codenumber {
+ min-width: var(--toc-indent-first);
+ padding-left: var(--codenumber-pad-left);
+ padding-right: var(--codenumber-pad-right);
+ display: inline-block;
+ text-align: left;
+ flex-grow: 0;
+}
+
+/* second level of numbering */
+/* anything 1+ levels deeper than a chapter in a book */
+.book .ptx-toc .toc-chapter .toc-item-list .codenumber,
+/* anything 1+ levels deeper than a section in an article */
+.article .ptx-toc .toc-section .toc-item-list .codenumber,
+/* anything 1+ levels deeper than backmatter */
+.ptx-toc .toc-backmatter .toc-item-list .codenumber
+{
+ font-size: 80%;
+ padding-top: 0.16em;
+ min-width: var(--toc-indent-second);
+}
+
+/* third level of numbering */
+/* anything 2+ levels deeper than a chapter in a book */
+.book .ptx-toc .toc-chapter .toc-item-list .toc-item-list .codenumber,
+/* anything 2+ levels deeper than a section in an article */
+.article .ptx-toc .toc-section .toc-item-list .toc-item-list .codenumber,
+/* anything 2+ levels deeper than backmatter */
+.ptx-toc .toc-backmatter .toc-item-list .toc-item-list .codenumber
+{
+ min-width: var(--toc-indent-third);
+ visibility: hidden;
+}
+
+/* reveal on interaction */
+.ptx-toc .toc-item-list .toc-item-list .toc-item-list a:is(:hover, :focus) > .codenumber {
+ visibility: visible;
+}
+
+/* -------------------titles-------------------- */
+.ptx-toc .toc-title-box .title {
+ flex-grow: 1;
+}
+
+/* Any toc item without a codenumber needs indentation
+ Can't select absence of a preceeding, so indent all titles
+ and then clear indent if there is a codenumber */
+.ptx-toc .toc-item .toc-title-box .title {
+ margin-left: var(--toc-indent-first);
+}
+
+/* second level as defined by codenumber selectors */
+.book .ptx-toc .toc-chapter .toc-item-list .title,
+.article .ptx-toc .toc-section .toc-item-list .title,
+.ptx-toc .toc-backmatter .toc-item-list .title
+{
+ margin-left: var(--toc-indent-second);
+}
+
+/* third level as defined by codenumber selectors */
+.book .ptx-toc .toc-chapter .toc-item-list .toc-item-list .title,
+.article .ptx-toc .toc-section .toc-item-list .toc-item-list .title,
+.ptx-toc .toc-backmatter .toc-item-list .toc-item-list .title
+{
+ margin-left: var(--toc-indent-third);
+}
+
+/* unless there is a codenumber */
+.ptx-toc .toc-item > .toc-title-box .codenumber + .title {
+ margin-left: 0 !important;
+}
+
+.ptx-toc ul.structural ul.structural .title:empty::after {
+ content: "empty heading!";
+ font-weight: bold;
+}
+
+
+.ptx-toc .toc-chapter .toc-item-list .title,
+.ptx-toc .toc-section .toc-item-list .title,
+/* 2 levels deep in back matter */
+.ptx-toc .toc-backmatter .toc-item-list .toc-item-list .title
+{
+ font-size: 90%;
+}
+
+.ptx-toc .toc-chapter .toc-item-list .toc-item-list .title,
+.ptx-toc .toc-section .toc-item-list .toc-item-list .title,
+/* 3 levels deep in back matter */
+.ptx-toc .toc-backmatter .toc-item-list .toc-item-list .toc-item-list .title
+{
+ font-style: italic;
+}
+
+/* ??? */
+.ptx-toc ul.structural li a.has-chevron {
+ padding-right: 2em;
+}
+
+/* -------------------depth controls-------------------- */
+.ptx-toc.depth0 ul.structural {
+ display: none;
+}
+.ptx-toc.depth1 ul.structural ul.structural {
+ display: none;
+}
+.ptx-toc.depth2 ul.structural ul.structural ul.structural {
+ display: none;
+}
+.ptx-toc.depth3 ul.structural ul.structural ul.structural ul.structural {
+ display: none;
+}
+.ptx-toc.depth4 ul.structural ul.structural ul.structural ul.structural ul.structural {
+ display: none;
+}
+
+/* if depth is shallow, identify best available toc item */
+.ptx-toc.depth1 ul.structural .toc-item.contains-active {
+ background-color: var(--chaptertocactive);
+ color: var(--chaptertoctextactive);
+}
+.ptx-toc.depth2 ul.structural ul.structural .toc-item.contains-active {
+ background-color: var(--parttocactive);
+ color: var(--parttoctextactive);
+}
+
+
+/* -------------------focused toc-------------------- */
+/* Hide all but active area of book */
+.ptx-toc.focused ul.structural:not(.contains-active) > li {
+ display: none;
+}
+.ptx-toc.focused ul.structural li.active > ul > li {
+ display: block;
+}
+
+/* Hooks for js based switching */
+.ptx-toc.focused ul.structural:not(.contains-active) > li.visible {
+ display: block;
+}
+.ptx-toc.focused ul.structural li.active > ul > li.hidden {
+ display: none ;
+}
+
+
+.ptx-toc.focused > ul.structural > li:not(:first-child) {
+ margin-top: 0em;
+}
+.ptx-toc.focused ul.structural li ul.structural a:hover {
+ border: 0;
+}
+
+.ptx-toc.focused .toc-expander {
+ border: 0;
+ padding: 2px 5px;
+ background: inherit;
+ color: inherit;
+ display: flex;
+ align-items: center;
+}
+
+.ptx-toc.focused .toc-expander .icon {
+ font-size: 30px;
+ line-height: 18px;
+ font-variation-settings: 'wght' 200;
+}
+
+.ptx-toc.focused .toc-expander:is(:hover) {
+ background-color: var(--highlighttoc);
+ color: var(--highlighttoctext);
+}
+
+.ptx-toc.focused .toc-expander:is(:hover) .icon {
+ fill: var(--highlighttoctext);
+}
+
+.ptx-toc.focused .toc-item.expanded > .toc-title-box > .toc-expander > .icon {
+ transform: rotate(-90deg);
+}
+
+/* Part colors fall back to same as chapter if not defined
+ Defined here and not in setcolors so that colors_ file can override as include
+ order is toc/colors/setcolors */
+:root {
+ --parttoc: var(--chaptertoc);
+ --parttoctext: var(--chaptertoctext);
+ --parttocactive: var(--documenttitle);
+ --parttoctextactive: var(--chaptertoctextactive);
+}
+/* But if browser supports, make parts very slightly darker than chapters */
+@supports (background: color-mix(in srgb, red 50%, blue)) {
+ :root {
+ --parttoc: color-mix(in srgb, var(--chaptertoc), black 15%);
+ }
+}
diff --git a/_static/pretext/css/toc_min.css b/_static/pretext/css/toc_min.css
new file mode 100644
index 00000000..9bb2e470
--- /dev/null
+++ b/_static/pretext/css/toc_min.css
@@ -0,0 +1,144 @@
+
+.ptx-toc {
+ /* IMPORTANT height must be calculated by javascript. */
+ width: 240px;
+ margin: 0;
+ font-size: 14.72px;
+ overflow-y: auto;
+ overflow-x: hidden;
+}
+
+/* Aligns toc to the top and side of the allotted space, respectively */
+.ptx-toc ul {
+ margin: 0px;
+ padding: 0px;
+ list-style-type: none;
+}
+
+
+/* Places codenumbers */
+.ptx-toc .codenumber {
+ position: absolute;
+ margin-right: 0;
+ margin-left: 0em;
+/*
+ margin-top: 0.4px;
+*/
+ left: 0.3em;
+ display: inline-block;
+}
+/* no codenumbers on subsections */
+.ptx-toc ul.structural ul.structural a > .codenumber {
+ display: none;
+}
+.ptx-toc ul.structural .title {
+ margin-left: 1.4em;
+ display: inline-block;
+}
+.ptx-toc ul.structural ul.structural .title {
+ margin-left: 1.5em;
+}
+.ptx-toc ul.structural ul.structural .title:empty::after {
+ content: "empty heading!";
+ font-weight: bold;
+}
+.ptx-toc ul.structural ul.structural ul.structural .title {
+ margin-left: 2.5em;
+ font-size: 90%;
+}
+.ptx-toc ul.structural ul.structural ul.structural ul.structural .title {
+ margin-left: 3.2em;
+ font-size: 90%;
+ font-style: italic;
+}
+
+/* more specific than something in toc_default (obsolete comment?) */
+.ptx-toc ul.structural li ul.structural li ul.structural li:last-child {
+ margin-bottom: 0;
+ border-bottom: 1px solid #ddd;
+}
+
+.ptx-toc .part > a .codenumber {
+ position: relative;
+ display: block;
+ float: left;
+ margin-right: 0.7em;
+}
+.ptx-toc .part > a .title {
+ display: block;
+ margin-left: 1em;
+}
+
+.ptx-toc ul.structural li a {
+ position: relative;
+ display: block;
+ padding: 2.86957px;
+ padding: 0.2em;
+// padding-left: 0.5em;
+ border-top: 1px solid #d1d1d1;
+ border-bottom: 1px solid #d1d1d1;
+ font-family: "PT Serif", "Times New Roman", Times, serif;
+ font-weight: bold;
+}
+.ptx-toc ul.structural ul.structural li a {
+ font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-weight: normal;
+// padding-left: 2.0em;
+}
+
+/* Sets spacing between section headings*/
+.ptx-toc > ul.structural > li:not(:first-child) {
+ margin-top: 0.3em;
+}
+/* But not at the start of a part */
+/* I cannot see that this actually does anything --DF */
+.ptx-toc > ul.structural > li.part + li,
+.ptx-toc > ul.structural > li.frontmatter + li,
+.ptx-toc > ul.structural > li.backmatter + li {
+ margin-top: 0;
+}
+/* Removes underlines from links in toc */
+.ptx-toc ul.structural li a, .ptx-toc ul.structural li a:link, .ptx-toc ul.structural li a:visited, .ptx-toc ul.structural li a:hover, .ptx-toc ul.structural li a:focus, .ptx-toc ul.structural li a:active {
+ text-decoration: none;
+}
+
+/*
+.ptx-toc > ul > li a, .ptx-toc > ul > li a:link, .ptx-toc > ul > li a:visited {
+ font-weight: bold;
+ font-family: "PT Serif", "Times New Roman", Times, serif;
+ padding-left: 0.2em;
+}
+*/
+
+/* Ensures that there is no double border between subsections */
+.ptx-toc ul.structural li ul.structural a {
+ border-top: none;
+}
+
+/* Allows both "top" and bottom border of a subsection to be highlighted on hover */
+.ptx-toc ul.structural li ul.structural a:hover {
+ border-top: 1px solid #3c110a;
+ margin-top: -1px;
+}
+
+/* Removes the excess space between the last subsection and the next section (caused by
+the margin on top of sections being used to space out adjacent sections) */
+.ptx-toc ul.structural li ul.structural li:last-child {
+ margin-bottom: -0.3em;
+}
+
+/* Removes double border between last subsection and next section */
+.ptx-toc ul.structural li ul.structural li:last-child a {
+ border-bottom: none;
+}
+
+.ptx-toc ul.structural li a:active {
+ box-shadow: rgba(0, 0, 0, 0.5) 0 2px 5px inset;
+}
+
+.ptx-toc ul.structural li a.has-chevron {
+ padding-right: 2em;
+}
+.ptx-toc .toc-item {
+ position: relative;
+}
diff --git a/_static/pretext/css/toc_wide.css b/_static/pretext/css/toc_wide.css
new file mode 100644
index 00000000..9bd73470
--- /dev/null
+++ b/_static/pretext/css/toc_wide.css
@@ -0,0 +1,36 @@
+@import url("toc_default.css");
+
+.pretext .ptx-sidebar {
+ display: none;
+ width: 0;
+}
+
+.pretext .ptx-sidebar {
+ position: sticky;
+ top: 36px;
+ z-index: 10;
+ height: 0;
+}
+
+.pretext .ptx-sidebar.visible {
+ position: sticky;
+ top: 36px;
+ z-index: 10;
+ height: 0;
+}
+
+.pretext .ptx-sidebar .ptx-toc {
+ width: 360px;
+ background-color: var(--page-color);
+ border: 1px solid var(--tocborder)
+}
+
+.pretext .ptx-page .ptx-main {
+ margin-left: inherit;
+}
+
+.ptx-toc::after {
+ height: auto;
+ max-width: 100px;
+ margin: 0 auto;
+}
diff --git a/_static/pretext/css/webwork.css b/_static/pretext/css/webwork.css
new file mode 100644
index 00000000..79ff9f0e
--- /dev/null
+++ b/_static/pretext/css/webwork.css
@@ -0,0 +1,72 @@
+
+table.attemptResults {
+ margin-left: 2em;
+ background: #efefef;
+ padding: 0.2em;
+}
+table.attemptResults + .attemptResultsSummary {
+ margin-top: 1em;
+}
+
+.problem-main-form {
+ margin-top: 1em;
+ background: #eeeeff;
+ padding: 0.5em;
+}
+td.ResultsWithoutError {
+ background: #9f9;
+}
+td.ResultsWithError {
+ background: #f99;
+}
+
+tr th {
+ text-align: center;
+ padding: 0.2em 1em 0.2em 1em;
+}
+tr td {
+ text-align: center;
+}
+tr td:empty {
+ background: #fff;
+}
+
+/*
+table td { border-left: 1px solid #000; }
+table td:first-child { border-left: none; }
+*/
+
+ol, ul {
+ margin-top: 0.75em !important;
+}
+
+.problem {
+ padding: 1em;
+ border: 0.5px solid #aaa;
+ background: #fdfdfd;
+}
+
+.problem a {
+ text-decoration: none;
+}
+
+.knowl {
+ margin-left: 1em;
+ padding: 0.2em;
+ background: #efe;
+}
+
+/*
+.problem a.internal::after {
+ content: "";
+ position: absolute;
+ top: 0;
+ bottom: 1px;
+ right: 2.4px;
+ left: 2.4px;
+ border-bottom: 1px dotted #9c2310;
+ transition-property: left, right;
+ transition-duration: 0ms;
+ z-index: 0;
+}
+*/
diff --git a/_static/pretext/js/answer.js b/_static/pretext/js/answer.js
new file mode 100644
index 00000000..652dcd34
--- /dev/null
+++ b/_static/pretext/js/answer.js
@@ -0,0 +1,552 @@
+
+function escapeHTML(text) {
+ if (!text) { return "" }
+ the_ans = text;
+ the_ans = the_ans.replace(/&/g, "&");
+ the_ans = the_ans.replace(/<([a-zA-Z])/g, '< $1');
+
+ return the_ans
+}
+function uNescapeHTML(text) {
+ if (!text) { return "" }
+ the_ans = text;
+ the_ans = the_ans.replace(/< /g, "<");
+ the_ans = the_ans.replace(/</g, "<");
+ the_ans = the_ans.replace(/>/g, ">");
+ the_ans = the_ans.replace(/&/g, "&");
+ the_ans = the_ans.replace(/<([a-zA-Z])/g, "< $1");
+
+ return the_ans
+}
+
+function dollars_to_slashparen(text) {
+ the_ans = text;
+ the_ans = the_ans.replace(/(^|\s|-)\$([^\$\f\r\n]+)\$(\s|\.|,|;|:|\?|!|$)/g, "$1\\($2\\)$3");
+ //twice, for $5$-$6$
+ the_ans = the_ans.replace(/(^|\s|-)\$([^\$\f\r\n]+)\$(\s|\.|,|;|:|\?|!|-|$)/g, "$1\\($2\\)$3");
+
+ return the_ans
+}
+
+/* The structure of a reading question is an erticle with an id (this_ques_id),
+ containing:
+ #this_ques_id_text the answer given (in a div with that id)
+ #this_ques_id_text_hidden the answer in a raw form (in a hidden div)
+ #this_ques_id_text_input the answer in a textinput with that id
+
+ Try to do all operations by id, and not by carrying objects around.
+*/
+
+var reading_questions = document.querySelectorAll("section.reading-questions article.exercise-like, #boelkins-ACS .main #content > section:first-of-type > section:first-of-type > .project-like li");
+
+var reading_answers = {};
+
+console.log('reading_questions.length', reading_questions.length);
+
+function make_submit_button() {
+ if (document.getElementById("rq_submit")) { // don't make the button if it already exists
+ console.log("button exists", document.getElementById("rq_submit"));
+ return
+ }
+ last_reading_question = reading_questions[reading_questions.length - 1];
+ answer_button_holder = document.createElement('div');
+ answer_button_holder.setAttribute('class', 'rq_submit_wrapper');
+ answer_button_holder.innerHTML = rq_submit_button;
+ last_reading_question.insertAdjacentElement("afterend", answer_button_holder);
+}
+
+function save_reading_questions() {
+ rq_data = {"action": "save", "user": uname, "pw": emanu, "pI": pageIdentifier, "type": "readingquestions", "rq": JSON.stringify(reading_questions_object)}
+ $.ajax({
+ url: "https://aimath.org/cgi-bin/u/highlights.py",
+ type: "post",
+ data: JSON.stringify(rq_data),
+ dataType: "json",
+ success: function(data) {
+ console.log("something", data, "back from highlight");
+ alert(data);
+ },
+ error: function(errMsg) {
+ console.log("seems to be an error?",errMsg);
+ alert("Error\n" + errMsg);
+ }
+ });
+
+ console.log("just ajax sent", JSON.stringify(reading_questions_object));
+}
+
+// no point in handling reading questions if there are not any
+
+if (reading_questions.length) {
+
+ // retrieve the existing reading questions, if they exist
+ var reading_questions_object_id = pageIdentifier + "___" + "rq";
+ var reading_questions_object = localStorage.getObject(reading_questions_object_id);
+ var reading_questions_all_answered = false;
+ var reading_questions_submitted = false;
+
+ if (!reading_questions_object) {
+ reading_questions_object = {}
+ }
+
+ if (Object.keys(reading_questions_object).length >= reading_questions.length) {
+ console.log("Object.keys(reading_questions_object)",Object.keys(reading_questions_object));
+ console.log("reading_questions", reading_questions);
+ console.log("all reading questions have previously been answered");
+ reading_questions_all_answered = true;
+ }
+
+ answer_css = document.createElement('style');
+ answer_css.type = "text/css";
+ answer_css.id = "highlight_css";
+ document.head.appendChild(answer_css);
+ var css_for_ans = '#rq_submit { background: #FDD; padding: 3px 5px; border-radius: 0.5em}\n';
+ css_for_ans += '#rq_submit.submitted { background: #EFE; color: #BBB}';
+ css_for_ans += '.rq_submit_wrapper { margin-top: 0.5em; float: right}';
+ answer_css.innerHTML = css_for_ans;
+
+ rq_answer_label = '';
+ this_rq_controls += 'preview';
+// this_rq_controls += 'delete';
+ this_rq_controls += 'typing math?';
+ this_rq_controls += ''
+
+ var this_rq_answer_and_controls = document.createElement('div');
+ this_rq_answer_and_controls.setAttribute('style', 'width:80%; padding-left:10%; padding-right:10%; margin-top:0.5em;');
+ this_rq_answer_and_controls.setAttribute('class', 'rq_answer');
+ this_rq_answer_and_controls.innerHTML = hidden_answer_div + answer_div + this_rq_controls;
+ console.log("appending to ", reading_question_id);
+ $('#'+reading_question_id).append(this_rq_answer_and_controls);
+ // this.parentNode.insertAdjacentElement("afterend", this_rq_answer_and_controls);
+
+ /* typeset the math in the reading questions answers */
+ // MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
+ if (mjvers && mjvers < 3) {
+ MathJax.Hub.Queue(['Typeset', MathJax.Hub]);
+ } else if (mjvers > 3) {
+ MathJax.typesetPromise();
+ }
+
+ } else if(role == "instructor" || role == "student") {
+
+ var this_answer_link = document.createElement('div');
+ this_answer_link.innerHTML = rq_answer_label;
+ console.log("inserting afterend of",reading_question);
+ // reading_question.insertAdjacentElement("afterend", this_answer_link);
+ reading_question.append(this_answer_link);
+ } else {
+
+ console.log("should not be here");
+
+ }
+
+ }
+
+ function allow_student_answers(){
+ /* make a new blank area to answer a question */
+ $('.readingquestion_make_answer.student').mousedown(function(e){
+ console.log(".readingquestion_make_answer student");
+// $(this).addClass("hidecontrols");
+ // var this_ques_id = this.parentNode.parentNode.id;
+ var this_ques_id = this.parentNode.parentNode.id;
+ var this_ques_id_text = this_ques_id + "_text";
+ var this_ques_id_controls = this_ques_id + "_controls";
+ console.log(".rq", this_ques_id);
+ answer_textarea = '';
+ this_rq_controls += 'preview';
+// this_rq_controls += 'delete';
+ this_rq_controls += 'typing math?';
+ this_rq_controls += ''
+
+ var this_rq_answer_and_controls = document.createElement('div');
+ this_rq_answer_and_controls.setAttribute('class', 'rq_answer editing');
+ this_rq_answer_and_controls.setAttribute('style', 'width:80%; padding-left:10%; padding-right:10%; margin-top:0.5em;');
+
+ this_rq_answer_and_controls.innerHTML = answer_textarea + this_rq_controls;
+ this.parentNode.insertAdjacentElement("afterend", this_rq_answer_and_controls);
+
+ this.remove();
+
+ // MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
+
+ console.log("adding other keypress listener");
+ var this_textarea = document.getElementById(this_ques_id_text + "_input");
+ console.log("to", this_textarea);
+ this_textarea.addEventListener("keypress", function() {
+ // if(this_textarea.scrollTop != 0){
+ // console.log("this_textarea.scrollHeight", this_textarea.scrollHeight, "this_textarea.scrollTop", this_textarea.scrollTop);
+ // console.log("this_textarea.clientHeight", this_textarea.clientHeight);
+ this_textarea.overflow = "scroll";
+ // console.log("this_textarea.scrollHeight", this_textarea.scrollHeight, "this_textarea.scrollTop", this_textarea.scrollTop);
+ // console.log("this_textarea.clientHeight", this_textarea.clientHeight);
+ this_textarea.overflow = "hidden";
+ // console.log("this_textarea.scrollHeight", this_textarea.scrollHeight, "this_textarea.scrollTop", this_textarea.scrollTop);
+ // console.log("this_textarea.getBoundingClientRect()", this_textarea.getBoundingClientRect());
+ this_textarea.style.height = this_textarea.scrollHeight + "px";
+ // }
+ }, false);
+ var tmp_id = this_ques_id_text + "_input";
+ console.log("want focus to ", tmp_id);
+ console.log("which is ", $("#" +tmp_id));
+ console.log("the active ", document.hasFocus(), "element is", document.activeElement);
+ console.log("or maybe it is ", $(":focus"));
+ $("#" + tmp_id).focus();
+ document.getElementById(tmp_id).focus();
+ console.log("the active ", document.hasFocus(), "element is", document.activeElement);
+ });
+ }
+ allow_student_answers();
+
+ $('.readingquestion_make_answer.instructor').mousedown(function(e){
+ console.log(".readingquestion_make_answer instructor", "instId", uname, "pI", pageIdentifier);
+ if (jQuery.isEmptyObject(reading_answers) || this.classList.contains("reload")) {
+ rq_data = {"action": "retrieve", "instId": uname, "pw": emanu, "pI": pageIdentifier, "type": "readingquestions"};
+ // myjson = {"action": "retrieve", "type": "readingquestions", "instId": "100002000", "pI": "beezer-FCLA___FPm"}
+
+ $.ajax({
+ url: "https://aimath.org/cgi-bin/u/highlights.py",
+ type: "post",
+ data: JSON.stringify(rq_data),
+ dataType: "json",
+ async: false,
+ success: function(data) {
+ reading_answers = data;
+ // console.log("something", data, "back from highlight");
+ // alert(data);
+ },
+ error: function(errMsg) {
+ console.log("seems to be an error?",errMsg);
+ alert("Error\n" + errMsg);
+ }
+ });
+ }
+// var this_ques_id = this.parentNode.previousSibling.id;
+ var this_ques_id = this.parentNode.parentNode.id;
+ console.log("this_ques_id", this_ques_id);
+ var compiled_answers = "";
+ var title_of_this_section = $("section > h2 > .title").html();
+ title_of_this_section = title_of_this_section.replace(/ /g, "%20");
+ title_of_this_section = title_of_this_section.replace(/\?/g, "");
+ var number_of_this_rq = 1 + $("#" + this_ques_id).index(".exercise-like");
+// console.log("first title_of_this_section", title_of_this_section);
+// console.log("first title_of_this_section.html()", title_of_this_section.html());
+// console.log("second title_of_this_section[0]", title_of_this_section[0]);
+ for(var j=0; j < reading_answers.length; ++j) {
+ var this_answer_all = reading_answers[j];
+ var this_student_id = this_answer_all[0];
+ var these_specific_answers = JSON.parse(this_answer_all[1]);
+ console.log("these_specific_answers", these_specific_answers);
+ console.log("this_answer_all[2]", this_answer_all[2]);
+ var this_submitted_time = JSON.parse(this_answer_all[2]);
+ // var this_submitted_time = this_answer_all[2];
+ console.log("looking for this answer:", this_ques_id + "_text");
+ var this_specific_answer = these_specific_answers[this_ques_id + "_text"];
+ console.log("this_answer_all",this_answer_all);
+ console.log("j",j,"this_specific_answer", this_specific_answer);
+ console.log("this_specific_time", this_submitted_time);
+ this_specific_answer = dollars_to_slashparen(escapeHTML(this_specific_answer))
+ if (!this_specific_answer) {
+ this_specific_answer = "no answer submitted";
+ compiled_answers += '
+