html, body {margin: 0; padding: 0; width: 100%; height: 100%; font-family: monospace;}
div.body {display: table; width: 100%; height: 100%;}
div.table-cell {display: table-cell;}
header, main {display: table-row;}
main {position: relative; height: 100%; background-color: black; color: #bbb;}
div.content {background-color: white; max-width: 70em; margin: 0 auto 2em auto; color: black; padding: .5em 1em; border-radius: .7em; font-family: sans-serif; box-shadow: 10px 10px 10px #444;}
div.content a {color: black;}
div.content p {text-align: justify;}
div.language-switch {text-align: right; font-size: 1.5em;}
div.language-switch .selected {font-weight: bold;}
div.center {text-align: center; vertical-align: middle;}
main h1, main h2 {text-align: center;}
main h1 {color: white;}
main div.block h3 {text-align: start; border: 1px solid #bbb; border-radius: .5em; padding: .5em 1em; box-shadow: 2px 2px 5px #aaa;}
main div.block h3:hover {background-color: #eee; position: relative;}
main div.block.visible h3 {background-color: #ddd;}
main div.block.visible h3::after {color: #800; font-weight: bold; font-size: 1.5em; position: relative; top: -0.25em; width: 1em; height: 1em; content: '-'; float: right;}
main div.block.hidden  h3::after {color: #080; font-weight: bold; font-size: 1.5em; position: relative; top: -0.25em; width: 1em; height: 1em; content: '+'; float: right;}
main div.block>div {margin-left: 1em;}
main div.block>* {display: none;}
main div.block.visible>* {display: block;}
main div.block>h3 {display: block;}
span.method-container {display: inline-block; width: 4em; text-align: center;}
span.method {border: 1px solid #ccc; padding: .1em .2em; color: #000; border-radius: .3em; background-color: #fff; font-weight: bold;}
span.method.get {background-color: #dfd;}
span.method.put {background-color: #ddf;}
span.method.delete {background-color: #fdd;}
span.method.post {background-color: #ffd;}
span.uri {font-family: monospace; font-weight: bold;}
span.param {font-family: monospace; color: #800;}
div.box {background-color: #f3f3f3; max-width: 20em; box-shadow: 3px 3px 10px #ccc; margin: 1em auto;}
div.box h4 {background-color: #bbb; padding: .3em 1em; margin: 0;}
div.box pre {max-height: 20em; overflow: auto; margin: 0; padding: .5em; font-size: .9em;}
div.box div.boxcontent {padding: .5em;}
div.content h2, div.content h3, div.content h4, div.content h5, div.content h6 {color: black; font-family: monospace;}
div.container {left: 0; top: 0; position: absolute; width: 100%; height: 100%; overflow: hidden;}
div.container>div {width: 100%; height: 100%;}
header {background-color: black;color: #bbb;}
div.clear {clear: both;}
a {color: white; text-decoration: none;}
a.tree {font-weight: bold;}
a:hover {text-decoration: underline;}
header div.url {float: right; padding: 1em; font-size: 1.5em;}
.xterm .xterm-viewport {overflow-y: hidden;}
span.color {display: inline-block; width: 1em; height: 1em; border: 1px solid #eee; box-shadow: 1px 1px 3px #ddd;}
span.color-description {font-family: monospace; font-weight: bold;}
td.sp {padding-right: 1em;}
div.api-base {font-family: monospace; font-weight: bold; font-size: 1.3em; text-align: center; margin: 1em 0}
@media (max-width: 500px) {
    header {font-size: .9em;}
    h3 {font-size: .9em;}
}
@media (max-width: 350px) {
    header {font-size: .8em;}
    h3 {font-size: .8em;}
}