div.sheet-tab-content { display: none; } input.sheet-tab1:checked ~ div.sheet-tab1, input.sheet-tab2:checked ~ div.sheet-tab2, input.sheet-tab3:checked ~ div.sheet-tab3, input.sheet-tab4:checked ~ div.sheet-tab4, input.sheet-tab5:checked ~ div.sheet-tab5 { display: block; } input.sheet-tab { width: 165px; height: 20px; position: relative; top: 0px; left: 6px; margin: -1.5px; cursor: pointer; z-index: 1; opacity: 0; } input.sheet-tab + span::before { content: attr(title); border: solid 1px #a8a8a8; border-bottom-color: black; text-align: center; display: inline-block; background: #fff; background: linear-gradient(to top, #c8c8c8, #fff, #c8c8c8); width: 165px; height: 20px; font-size: 16px; position: absolute; left: 35px; } input.sheet-tab:checked + span::before { background: #dcdcdc; background: linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc); border-bottom-color: #fff; } input.sheet-tab:not(:first-child) + span::before { border-left: none; } input.sheet-tab2 + span::before { left: 202px; } input.sheet-tab3 + span::before { left: 367px; } input.sheet-tab4 + span::before { left: 533px; } input.sheet-tab5 + span::before { left: 698px; } div.sheet-tab-content { margin: 2px 0 0 5px; padding: 5px; } div.sheet-page { margin-left:auto; margin-right:auto; min-width: 850px; min-height: 500px; } select { display: block; margin: 0 auto; width: 100%; } textarea { resize: none; width: 355px; height: 70px; margin-bottom: 0px; } input[class='sheet-step'] { -webkit-appearance:none; width:30px; height:30px; background:white; border-radius:30px; border:2px solid #555; } input[class='sheet-step']:checked { background: #000; } input[class='sheet-ram'] { -webkit-appearance:none; width:20px; height:20px; background:white; border-radius:17px; border:1px solid #555; } input[class='sheet-ram']:after { content: "R"; color: #f00; vertical-align: middle; padding-left: 4px; font-weight: bold; } input[class='sheet-ram']:checked { background: #f00; } input[class='sheet-ram']:checked:after { content: "R"; color: #fff; vertical-align: middle; padding-left: 4px; font-weight: bold; } input[class='sheet-crow'] { -webkit-appearance:none; width:20px; height:20px; background:white; border-radius:17px; border:1px solid #555; } input[class='sheet-crow']:after { content: "C"; color: #0a0; vertical-align: middle; padding-left: 4px; font-weight: bold; } input[class='sheet-crow']:checked { background: #0a0; } input[class='sheet-crow']:checked:after { content: "C"; color: #fff; vertical-align: middle; padding-left: 4px; font-weight: bold; } input[class='sheet-tome'] { -webkit-appearance:none; width:20px; height:20px; background:white; border-radius:17px; border:1px solid #555; } input[class='sheet-tome']:after { content: "T"; color: #00f; vertical-align: middle; padding-left: 5px; font-weight: bold; } input[class='sheet-tome']:checked { background: #00f; } input[class='sheet-tome']:checked:after { content: "T"; color: #fff; vertical-align: middle; padding-left: 5px; font-weight: bold; } input[class='sheet-mask'] { -webkit-appearance:none; width:20px; height:20px; background:white; border-radius:17px; border:1px solid #555; } input[class='sheet-mask']:after { content: "M"; color: #a0a; vertical-align: middle; padding-left: 4px; font-weight: bold; } input[class='sheet-mask']:checked { background: #a0a; } input[class='sheet-mask']:checked:after { content:"M"; color: #fff; vertical-align: middle; padding-left: 4px; font-weight: bold; } .sheet-step { padding-top: 4px; padding-bottom: 4px; vertical-align: top; display: inline-block; *display: inline; zoom: 1 } .sheet-trig { vertical-align: top; display: inline-block; *display: inline; zoom: 1 } .sheet-subhead { width: 100%; text-align: center; display: inline-block; padding-top: 15px; } .sheet-subsubhead { width:50%; text-align: center; display: inline-block; padding-top: 5px; padding-bottom: 5px; } .sheet-aspinp { width: 17%; background-color: white; text-align: center; } .sheet-tdwhite { padding: 3px; background-color: white; text-align: center; } .sheet-sklab { background-color: black; color: white; text-align: center; } .sheet-tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; } .sheet-tooltip .sheet-tooltiptext { visibility: hidden; width: 120px; background-color: #555; color: #fff; text-align: center; padding: 5px 0; border-radius: 6px; position: absolute; z-index: 1; bottom: 125%; left: 50%; margin-left: -60px; opacity: 0; transition: opacity 0.3s; } .sheet-tooltip .sheet-tooltiptext::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #555 transparent transparent transparent; } .sheet-tooltip:hover .sheet-tooltiptext { visibility: visible; opacity: 1; } input.sheet-arrow:checked ~ div.sheet-block { display: none; } input.sheet-arrow { opacity: 0; width: 30px; height: 20px; position: relative; top: 0px; left: 0px; margin: -10px; cursor: pointer; z-index: 1; } input.sheet-arrow + span::before { margin-right: 10px; line-height: 14px; text-align: center; display: inline; vertical-align: middle; color: white; content: "▼"; width: 14px; height: 14px; font-size: 12px; } input.sheet-arrow:checked + span::before { content: "►"; } .sheet-divTable{ display: table; width: 100%; } .sheet-divTableRow { display: table-row; } .sheet-divTableCell { border: 1px solid #999999; display: table-cell; padding: 3px 10px; vertical-align: middle; } .sheet-divTableBody { display: table-row-group; }