body {
    font-family: sans-serif
}
code {
    font-family: monospace;
    white-space: pre
}
table {
    border-collapse: collapse
}
th, td {
    text-align: left;
    vertical-align: top;
    border: 1px solid black;
}
.example, .good-example, .bad-example {
    display: block;
    padding: 0.5%;
    border: thin solid;
}
.example {
    border-color: black;
}
.example:before {
    content: "Example: ";
    font-family: sans-serif;
    font-weight: bold
}
.inline-head {
    font-weight: bold
}
.good-example:before {
    content: "Right: ";
    font-family: sans-serif;
    font-weight: bold
}
.good-example { 
    border-color: green;
    width: 48%;
    float: right;
}
.bad-example:before {
    content: "Wrong: ";
    font-family: sans-serif;
    font-weight: bold
}
.bad-example {
    border-color: red;
    width: 48%;
    float: left;
}
h1, h2, hr {
    clear: both;
}
h1, h2 {
    padding-top: 0.5em;
}