* {margin: 0; padding: 0; box-sizing: border-box; color: #5D5F63}
body {font-family: Airal, Tahoma, serif, Times New Roman; font-size: 15px; background: #333}
.cb {clear: both} .cl {clear: left} .cr {clear: right} .fl {float: left} .fr {float: right}
.center {text-align: center} .hidden {display: none} .bold {font-weight: bold}
.border {border: solid thin #CCC; border-radius: 5px}
a {text-decoration: none; color: #066} a:hover {color: #60AB44}
li a {display: inline-block; height: 100%; width: 100%} li a:hover {color: #FFF}
.logo:hover, .slogan:hover {color: #FFF} .logo {font-size: 30px; font-weight: bold}
.wrapper {width: 1200px; margin: auto; background: #FFF; border-radius: 25px} .header, .topNav, .body, .footer {width: 100%}
.header {position: sticky; top: 0; margin: 0 0 15px 0; background: #1C4966; border-radius: 25px 25px 0 0} .header *:not(select, option) {color: #EEE}
.topNav {position: sticky; top: 89px; margin: 0 0 15px 0; background: #5D5F63; border: solid thin #5D5F63; border-radius: 2px}
.headerL, .headerR {width: 50%; float: left; padding: 10px}
#sInput {border: none; border-radius: 5px 0 0 5px; width: 80%; height: 35px; margin: 0; padding: 0 10px; color: #5D5F63}
#sInput:focus {outline: none; background: #5D5F63; color: #FFF}
#sButton {border: none; border-radius: 0 5px 5px 0; background: #CCC; color: #5D5F63; font-weight: bold; width: 20%; height: 35px; cursor: pointer}
#sButton:hover {background: #5D5F63; color: #FFF}
.bodyL, .bodyR {width: 75%; float: left; padding: 10px}
.bodyR {width: 25%; position: sticky; top: 100px; border-left: solid thin #CCC}
.blockTool, .blockText {width: 100%; margin-bottom: 20px}
.blockTool p, textarea, input {margin: 10px 0}
.blockText p {margin: 0 0 10px 0} .blockText h1, h2, h3, h4, h5, h6 {margin: 20px 0 20px 0}
.blockList {width: 33.3333%; float: left; padding: 10px}
.pipeNode, .pipeRoot {font-size: 16px; font-weight: bold} .pipeRoot {font-size: 25px}
.blockText li, .linkList li {margin: 5px 0 5px 15px; padding: 2px} .linkList li:hover {background: #60AB44}
.inputBox, .inputArea {width: 100%; border: solid thin #CCC; border-radius: 5px; min-height: 25px; padding: 5px; font-size: 15px}
.inputArea {min-height: 125px; resize: vertical}
.submitBtn {background: #066; color: #FFF; border: none; border-radius: 5px; font-size: 20px; padding: 10px 20px}
.submitBtn:hover {cursor: pointer; background: #60AB44}
#success {color: blue} #error {color: red}
.resultTable {width: 100%; border-collapse: collapse}
.resultTable tr:nth-child(even) {background: #DDD}
.resultTable th, td {text-align: left; border: solid thin #CCC; padding: 5px}
.footer {border-top: solid thin #EEE; padding: 20px 0} .footer p {margin: 0 0 10px}
#F, #X, #P {background: #3b5998; padding: 5px; border: none; border-radius: 5px; color: #FFF; font-weight: bold; cursor: pointer}
#X {background: #55acee} #P {background: #bd081c} #F:hover, #X:hover, #P:hover {font-style: italic}
.cImg {max-width: 100%; height: auto; border: solid thin #CCC; border-radius: 5px; display: block; margin: 10px auto}
#hMenu {list-style: none; font-size: 17px}
#hMenu li {float: left; border-right: dotted thin #CCC; cursor: pointer}
#hMenu > li:last-child {display: none; border: none; width: 100%}
#hMenu > li:nth-last-child(2) {border: none}
#hMenu li a {display: block; color: #FFF; padding: 10px; text-decoration: none}
#hMenu li a:hover {background: #FFF; color: #60AB44}
#vMenuMB {list-style: none; display: none} #vMenuMB > li {float: none; border: none}
@media (max-width: 600px) {
    .wrapper {width: 100%}
    .headerL, .headerR {width: 100%; text-align: center}
    .topNav {top: 163px }
    .bodyL, .bodyR, .blockList {width: 100%; border: none}
    #hMenu > li {display: none} #hMenu > li:last-child {display: inherit}
}
@media (min-width: 601px) and (max-width: 1200px) {.wrapper {max-width: 100%; width: 98%} .bodyL {width: 70%} .bodyR {width: 30%}}