body { font-family: Arial, Verdana, Tahoma; margin: 0; padding: 0; background-color: #f0f0f0; }
header { background-color: #ddd; color: #d26e2b; text-align: center; padding: 0; }
header h1, h2 { width: 100%; padding: 0.33rem 0; margin: 0; }
header h2 { background-color: #4c4c4c; color: lightgray; font-size: 13pt; font-weight: normal; }

nav { background-color: #d26e2b; }
nav ul { list-style-type: none; margin: 0; padding: 0; display: flex; justify-content: center; }
nav li { margin: 0; }
nav a { font-weight: bold; text-decoration: none; color: white; padding: 0.5em; display: block; border-radius: 10px; margin: 5px;}
nav a:hover { background-color: dodgerblue; color: white; }
nav a.active { background-color: #ddd; color: #4c4c4c; }

main { flex: 1; }
#content { background-color: white; padding: 1em; }
#content h1, #content h2, #content h3 { margin: 0; padding: 0; }
#content h1 { font-size: 20pt; }
#content h2 { font-size: 16pt; border-bottom: 2px solid gray; }
#content h3 { font-size: 14pt; background-color: lightgray; padding: 5px 10px; }
#content img { width: auto; height: auto; margin: 0 auto; display: block; }
#content img.mini { max-width: 50%; }
#content img.dev { width: 19px; display: inline; vertical-align: top; }
a.button { display: inline-block; padding: 5px 10px; background-color: #d26e2b; color: white; text-decoration: none; border-radius: 10px; }

div.dent { padding: 1em 2em; }

div.action { width: 90%; margin: auto; }
div.action p { background-color: lightgray; margin: 1em; padding: 0.75rem; }

ol.xl1 { padding-left: 1rem; color: slategray; background: lightsteelblue; padding: 10px; width: fit-content; margin: 1em auto; }
ol.xl1 li { margin: 5px; list-style-position: inside; }
ol.xl2 { padding-left: 2rem; }
ol.xl2 li { padding: 2px 5px; margin: 0; list-style: lower-alpha; list-style-position: inside; }
ol[class^='xl'] li a { text-decoration: none; color: black; font-weight: bold; }
ol.xl2 li a { font-weight: normal; }

div.qst { padding: 10px 5px; border-bottom: 1px solid #c9c6c2; cursor: pointer; }
#content div.qst img { float: right; margin-top: 5px; }
div.qst img.flip { transform: rotate(180deg); transition-duration: 0.25s; transition-timing-function: ease-out; transition-property: transform; }
div.ans { background-color: lightgray; display: none; margin: 0 0 0.5em 0; padding: 1em; }

footer { text-align:center; font-size: 8pt; border-top: 2px solid #d26e2b; }
footer a { text-decoration: none; }
footer div.content div { display: none; }
footer div.content div img { display: block; margin: auto; }

div#popup, div#popgray { display: none; position: fixed; }
div#popup { top: 50%; left: 50%; transform: translate(-50%, -50%); max-height: 90%; background-color: white; border-radius: 15px; z-index: 2; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.66); overflow: auto; }
div#popgray { top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.66); z-index: 1; }
div#popup section { padding: 0 15px; }
div#popup section img.mini { max-width: 100%; display: block; margin: 0 auto; }
div#popheader, div#popfooter { padding: 10px 15px; }
div#popheader { background: lightgray; font-size: 1.5em; font-weight: bold; }
div#popfooter { text-align: center; }

.example, table.statuses { text-align: center; width: 100%; font-size: 10pt; }
table.statuses { width: auto; margin: auto; }
table.example th, table.statuses th { background-color: #d26e2b; color: white; }
table.example tr:nth-of-type(2n+1), table.statuses tr:nth-of-type(2n+1) { background-color: lightgray; }
table.statuses td:nth-child(2) { text-align: left; }
table.statuses th, table.statuses td { padding: 5px; }

form.example { width: 500px; margin: auto; }
form.example label { display: block; float: left; text-align: right; width: 80px; }
form.example input { width: calc(100% - 100px); }
form.example textarea { width: calc(100% - 100px); height: 10em; }

form#wishlistURL { width: 100%; text-align: center;}
form#wishlistURL input { width: 50%; }
div#wishlistData { margin: 1em; }

@media (max-width: 640px){
  div#popup { top: 10%; left: 10%; transform: translate(-5%, -5%); }
  #content img.mini { max-width: 100%; }
  form.example { width: 100%; }
}