.sheet-bounding-box { width: 800px; padding: 10px; } .charsheet h1 { font-size: 3em; line-height: 1em; display: block; padding-bottom: 0.2em; text-align: center; width: 100%; } .charsheet h2 { font-size: 1.4em; line-height: 1em; display: block; padding-bottom: 1em; text-align: center; width: 100%; } .sheet-box-title { font-size: 1.15em; padding: 0px 10px; margin: 5px 0px; font-weight: normal; display: block; } .charsheet label { display: inline-block; } .numberinput { width: 50px; } .sheet-dotted { border: 1px dotted #AAA; border-radius: 4px; } .sheet-form-row { clear: both; padding: 3px 10px 3px 0px; font-size: 1.15em; } .sheet-hidden-input { border: none; width: 95%; width: calc(100% - 16px); margin: 0 8px 8px 8px; } .sheet-attributes { background: #ccc; text-align: left; display: table; table-layout: fixed; margin-top: 10px; margin: 10px auto 0px auto; } .sheet-attribute { background: #fff; float: left; margin: 5px; padding: 10px; width: auto; display: table-cell; } .sheet-lower-box { width: 100%; height: 150px; padding:0px; margin-top: 10px; box-sizing: border-box; } .sheet-lower-box input[type="number"] { text-align: center; } .sheet-lower-box2 { // height: 150px; padding:0px; margin-top: 4px; box-sizing: border-box; width:49%; clear:none; float: left; } .sheet-lower-box2 input[type="number"] { text-align: center; } .sheet-upper-left-box { display: table-cell; width: 45%; } .sheet-upper-left-box input { float: right; } .charsheet textarea { width: 90%; width: calc(100% - 30px); margin: 0px 10px 5px 10px; height: 90%; height: calc(90% - 40px); } .sheet-lower-right-box { width: 100%; padding:0px; } .sheet-note { border: none; border-bottom: solid black 1px; margin: 1px 10px; width: 95%; width: calc(100% - 20px); } .charsheet h4 { clear: none; display: inline; position: relative; } input.sheet-type-maid { clear: none; display: inline; position: relative; } input.sheet-type-maid:not(:checked) ~ div.sheet-maid-box { display: none; } input.sheet-type-maid:checked ~ div.sheet-maid-box { display: inline; } input.sheet-type-butler { clear: none; display: inline; position: relative; } input.sheet-type-butler:not(:checked) ~ div.sheet-butler-box { display: none; } input.sheet-type-butler:checked ~ div.sheet-butler-box { display: inline; } input.sheet-type-master { clear: none; display: inline; position: relative; } input.sheet-type-master:not(:checked) ~ div.sheet-master-box { display: none; } input.sheet-type-master:checked ~ div.sheet-master-box { display: inline; }