div#content a[title] {
  color: #00a;
}

div#content a[title]:hover {
  background: #ddf;
  color: #006;
}

/* Most people don't like to read very long lines, so set a maximum to
the width of the contents on a page.

Planning ahead: we would like a way for students to make notes as they
read the book, and this creates a margin on the right side of the page.
Rob:  how does this compare to the page width in the new paper version
of your book?
*/

div #content { max-width: 600px }

div.section h3.section-heading {
  font-weight: bold;
  font-size: 250%;
  display:none;
}

/* Subsections are in a div of class "subsection" with a title property
(set to the subsection title) and an acro property (set to the subsection
acronym).  We use CSS ":before" on the div to create the subsection heading.
Then we throw away the h3 that also contains the title. 

Question: what controls the vertical space after the div.subsection:before ?
*/

div.subsection:before {
  font-weight: bold;
  font-size: 150%;
  content:   "Subsection "   attr(acro)": " attr(description);
/*  content:   "\A7\A7"   attr(acro)": " attr(description);
*/
}


div.subsection h4 span.acro:after{ content: ": ";}

div.subsection h4.subsection-heading {
  font-weight: bold;
  font-size: 150%;
  display:none;
}

/* definitions are in a div of class "definition" with a title property
(set to the term being defined) and an acro property (set to the acronym of
the thing being defined).  We use CSS ":before" on the div to create the:
**Definition TBD: Term Being Defined**
Then we throw away the h5 that also contains that information.

Inside a definition we encourage the use of <em class="term"> for those
terms which are being defined. (95% of the time an <em> in a definition
is indication a term.  Rob's "MN" definition has one of the counterexamples.)

A theorem will be typeset similarly to a definition and perhaps should be
handled in some combined way.
*/

div.definition h5 {
  font-weight: bold;
  font-size: 110%;
}

div.definition h5 span.type:after {  content: " "; }
div.definition h5 span.acro:after {  content: ": "; }
div.definition h5 span.description:after {  content: ". ";  margin: 0 10px 0 0;}

div.definition h5.definition-heading {
  display:inline;
}

div.definition p:first-child {
  display: inline;
}

div.definition h5.definition-heading + p {
  display: inline;
}

div.definition em.term {
  font-style: italic;
  font-weight: 600;
}

/* Theorems are typeset the same as definitions, except that the text
is in italics.  And we don't need a special <em> tag.
*/

div.theorem {
  margin: 0 0 10px 0;
}

div.theorem h5 {
  font-weight: bold;
  font-size: 110%;
}

div.theorem h5.theorem-heading {
  display:inline;
}

div.theorem h5:first-child {
  display:inline;
}

div.theorem h5 span.type:after {  content: " "; }
div.theorem h5 span.acro:after {  content: ": "; }
div.theorem h5 span.description:after {  content: ". ";  margin: 0 10px 0 0;}

div.theorem div.statement {
  display: inline;
}

div.theorem div.statement p {
  font-style: italic;
}

div.theorem div.statement p:first-child {
  display: inline;
}

/* obsolete
div.theorem h5.theorem-heading + p {
  display: inline;
}
*/

div.theorem div.statement p:last-of-type {
  margin-bottom: 0;
}

div.theorem div.proof { margin: 5px 0 10px 0; }

/* examples are in a div of class "example" with an acro property set to
the acronym of the example.

A "Sage example" has class "sage".  The styling is the same, so the two sets
of styles below could be combined.
*/

div.example h5 {
  font-weight: bold;
  font-size: 110%;
}

/* doesn't work because of the surrounding knowl
div.example h5 span.acro:after {  content: ". "; }
*/
div.example h5 span.description:before {  content: ""; margin: 0 0 0 10px; }

div.sage h5 {
  font-weight: bold;
  font-size: 110%;
}

div.sage h5 span.description:before {  content: ""; margin: 0 0 0 10px; }


.diagram {text-align:center; margin-bottom:2em}

.context {text-align:right}

* {font-family: 'Open Sans', sans-serif;}

pre, .code, .CodeMirror-lines {font-family: 'Source Code Pro', monospace;}