.required, .challenge, .question {
  padding: .5em .5em .5em .5em;
  display: block;
  margin-left: auto;
  margin-right: auto;
  background: #e0e0ff;
  border: 2px dotted silver;
}

.honors {
  padding: .5em .5em .5em .5em;
  display: block;
  margin-left: auto;
  margin-right: auto;
  background: #fff8e0;
  border: 2px dotted silver;
}


/*
div.required, div.challenge, div.question {
  padding: .5em .5em .5em .5em;
  display: block;
  margin-left: auto;
  margin-right: auto;
  background-color: #e0e0ff;
  border: 2px dotted silver; 
  padding-top: 0px;
  padding-bottom: 0px;
*/

/*
    margin-left: 2em;
    margin-right: 2em;
    margin-left: auto; 
    margin-right: auto; 
    width: 80%; 
    background-color: #e0e0ff;
    border: 4px double black;
    padding-left: 5px; 
    padding-right: 5px; 
*/

div.required .header {
    font-weight: bold;
}

p.required .header {
    font-weight: bold;
}


div.challenge .header {
    font-style: italic;
}


div.challenge {
    background-color: #ffe0e0;
}

kbd {
  color: #007700;
  font-family: monospace;
  font-weight: bold;
}

BODY {
    counter-reset: problem;      
}

H2:before {
    content: counter(problem) ". ";
    counter-increment: problem;  
}

OL {
    counter-reset: subproblem 0; 
}

ol li {
    display: block;
}

ol li:before {
    content: counter(problem) "." counter(subproblem) ".  ";
    counter-increment: subproblem
}