body { font-family:Arial, sans-serif; background:#eeeeee; margin:0; padding:0; }
h1, h2, h3, h4, h5, h6, p { margin:5px; padding:0; }
h1 { text-align:center; }
/* Use pre or kbd for example code or other computer input or output */
pre, kbd, code, .code, .kbd { font-family:Courier, monospace; background:#eeeeee; }
/* Use kbd for explicit keyboard input examples */
kbd, .kbd { background:#ddffdd; }
pre { margin:5px 20px; }

ul,ol { margin:5px; border:1px dashed lightgray; }
li { margin:5px; }

table, tbody, tr, th, td { border:1px solid gray; padding:0 5px; }
table { border-collapse: collapse; margin:3px auto 3px auto; }
table th { background:black; color:white; text-align:center; font-weight:bold; padding:0 5px 0 5px; }
table.zebra tbody tr:nth-child(odd) { background:#ffffff; }
table.zebra tbody tr:nth-child(even) { background:#eeeeff; }
tr:hover { background:orange; }
table th, table td { vertical-align:top; }

/* Use article for major sections */
article { border:1px solid gray; border-radius:3px; background:white; margin:5px; padding:5px; }
article>h2, article>h1 { text-align:left; background:lightgray; margin:1px 1px 3px 1px; padding:5px 5px 5px 20px; border-radius:5px; }

/* Use section for minor sections */
section { border:1px solid #dddddd; background:#ffffcc; margin:10px; padding:10px; }
section section { background:#eeffff; }
section section section { background:#ffeeff; }
p { border:1px dotted pink; padding:5px; }

.centered { display:flex; flex-direction:column; align-items:center; }

.split2 { display:grid; grid-gap:5px; grid-template-columns: 1fr 1fr; }

/* Use <em> for example text that should be replaced */
em { color:red; font-weight:bold; font-style:italic; font-size:0.9em; }
div#magicToc { padding:10px; text-align:center; }
output#magicToc { font-weight:normal; padding:10px; text-align:center; display:block; word-spacing:0.5rem; line-height:125%; }
output#magicToc>a:hover { outline:1px solid red; }
button#top { position:fixed; top:0; right:0; }
/* simulate the appearance of a button */
.btn { display:inline-block; border:1px solid gray; font-size:0.9em; background:#dddddd; padding:0 3px 0 3px; border-radius:3px; }
.btn:hover { background:black; color:white; }
/* simulate appearance of an input field */
.input { display:inline-block; border:1px solid gray; font-size:0.9em; padding:0 3px 0 3px; }
.center { text-align:center; }
.hide { display:none; }

/* Tried to make section.middle center like a table does, but it doesn't work. Bah. */
/*                      top rght bot left */
/* section.middle { margin:3px auto 3px auto; border:1px solid red; display:inline-block; } */

dl.grid { display:grid; column-gap:0; row-gap:0; }
dl.grid dt, dl.grid dd { margin:0; border:1px solid gray; margin-top:-1px; padding:2px; }
dl.grid dt { grid-column-start:1; }
dl.grid dd { grid-column-start:2; margin-left:-1px; }

dl.grid2 { margin:5px; display:grid; grid-template-columns: auto auto; border-bottom:1px solid red; border-bottom:1px solid gray; } 
dl.grid2>dt { font-weight:bold; }
dl.grid2>dt, dl.grid2>dd { padding:1px 5px; margin:0; border-top:1px solid gray; }
dl.grid2>dt { border-left:1px solid gray; border-right:1px solid gray; }
dl.grid2>dd { border-right:1px solid gray; }

aside { display:inline; font-style:italic; color:darkgreen; } /* used in to-do items where the fix (or whatever response or resolution) is described. */
q { font-family:Courier, fixed; font-weight:bold; }
.no-break { display:inline-block; }
.no-break { outline:1px dashed red; }
article footer { text-align:center; font-size:0.9em; font-style:italic; }