.marginpar {
float:right;
background-color: #DDDDFA;

width: 20%;
min-width: 6em;
max-width: 14em;
margin-right: -25%;


clear:both;
padding: .3em;
text-indent: 0;

border: 1px solid #7777FF;;
}

body {
padding-right: 20%;
padding-left: 1em; 

counter-reset: problem section;
}

p {
text-indent: 2em;
}
body.fullwidth {
padding-right: 1em;
}

button.margintoggle {
width: 200px;
height: 50px;
}

div.problem, div.problem-nonum{
border: 1px solid;
margin-left: 1em;
margin-top: 1em;
margin-bottom: 1em;
padding: 0.3em;
}

div.problem:before {
content: "Problem " counter(section) "." counter(problem) ". ";
counter-increment: problem;
font-weight: bold;
font-size: 120%;
margin-right: 0.5em;
}

div.definition {
/*border: 1px solid;*/
margin-left: 1em;
margin-top: 1em;
margin-bottom: 1em;
padding: 0.3em;
}

div.definition:before {
content: "Definition.";
font-weight: bold;
 margin-right: 0.5em;
}

div.example {
border: 1px solid;
margin-left: 1em;
margin-top: 1em;
margin-bottom: 1em;
padding: 0.3em;
}

div.example:before {
content: "Example.";
font-weight: bold;
 margin-right: 0.5em;
}

div.review {
border: 1px solid;
margin-left: 1em;
margin-top: 1em;
margin-bottom: 1em;
padding: 0.3em;
}

div.review:before {
content: "Review.";
font-weight: bold;
 margin-right: 0.5em;
}

div.review-answer {
display: none;
}

.note, .comment {
color: gray;
border: 1px solid;
margin: 0.2em;
padding: 0.2em; 
}

.note:before {
content: "Note: ";
}

.comment:before {
content: "Comment: ";
}

.theorem .title:before {
content: "(";
}

.theorem .title:after {
content: ")";
}

div.theorem:before {
content: "Theorem.";
font-weight: bold;
 margin-right: 0.5em;
}

div.theorem {
/*border: 1px solid;*/
margin-left: 1em;
margin-top: 1em;
margin-bottom: 1em;
padding: 0.3em;
}

th {
border-bottom: double;
}

h1, h2, h1+p, h2+p, li {
text-indent: 0;
}

/* To make sections really visible
section {
border: 4px solid lightblue;
margin: .1em;
padding: .1em;
}
*/


/* See the counter-reset: section; rule above in the body CSS*/
body>section {
  counter-reset: section;
  counter-reset: subsection;
}
body>section>section {
    counter-increment: subsection;
    counter-reset: subsubsection;
}
body>section>section>section {
    counter-increment: subsubsection;
}

body>section>section>section > h1:before  { 
content: counter(section) "." counter(subsection) "." counter(subsubsection) ". ";
}

body>section>section > h1:before  { 
content: counter(section) "." counter(subsection) ". ";
}
body>section > h1:before  { 
content: counter(section) ". ";
}

table {
    border: 1px solid;
}

table.inline-border td {
    border-bottom: 1px solid; 
}


/* This works in Firefox, but it doesn't work in Chrome
  Apparently Chrome supports the counter-reset: none; value, but Chrome does not
  The problem the section+section below solves is that we want only the *first* section element 
  in any section heading to reset the counter.

section {
  counter-reset: section;
}

section+section { counter-reset: none;}

section > h1 { counter-increment: section; }

section > h1:before  { content: counters(section, ".") ". "; }
*/