body { margin: 0; padding: 0; color: white; background-color: black; } h1, h2, h3, h4, h5, h6 { text-align: center; } .center { margin: auto; width: 96%; /*border: 1px solid #73AD21; padding: 10px;*/ } tr, li, #pages, .info { font-family: "Lucida Console", Monaco, monospace; font-size : 12px; height: 22px; } #pages { margin-top: 15px; } td { text-align: center; word-break: break-all; } a:link { text-decoration: none; color: white; } a:visited { text-decoration: none; color: white; } a:hover { text-decoration: underline; color: white; } a:active { text-decoration: none; color: white; } form { display: inline-block; text-align: center; } .style-1 input[type="text"] { padding: 2px; border: solid 1px #dcdcdc; transition: box-shadow 0.3s, border 0.3s; } .style-1 input[type="text"]:focus, .style-1 input[type="text"].focus { border: solid 1px #707070; box-shadow: 0 0 5px 1px #969696; } .tabs { position: relative; min-height: 240px; clear: both; margin: 25px 0; } .tab { float: left; } .tab label { background: black; padding: 10px; border: 1px solid #ccc; margin-left: -1px; position: relative; left: 1px; } .tab [type=radio] { display: none; } .content { position: absolute; top: 28px; left: 0; background: black; right: 0; bottom: 0; padding: 20px; border: 1px solid #ccc; display: none; } [type=radio]:checked ~ label { background: #505050 ; border-bottom: 1px solid white; z-index: 2; } [type=radio]:checked ~ label ~ .content { z-index: 1; } #tab-1:checked ~ .content.tab-1, #tab-2:checked ~ .content.tab-2 { display: block; } input#toggle-1[type=checkbox] { position: absolute; /*top: -9999px;*/ left: -9999px; } label#show-decoded-inputs { /*-webkit-appearance: push-button;*/ /*-moz-appearance: button;*/ display: inline-block; /*margin: 60px 0 10px 0;*/ cursor: pointer; background-color: black;; color: white; width: 100%; text-align: center; } div#decoded-inputs{ display: none; } /* Toggled State */ input#toggle-1[type=checkbox]:checked ~ div#decoded-inputs { display: block; }