.charsheet { overflow: hidden; font-family: times, sans-serif; width: 842px; } .charsheet .sheet-background { float: left; position: relative; padding: 10px; } .charsheet .sheet-background::after { content: ""; background: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/The%20Strange/images/CKxmrkG.jpg'); background-repeat: no-repeat; background-position: top left; opacity: 0.2; top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: -1; background-size: cover; } .charsheet .sheet-col { width: calc(50% - 20px); margin-right: 20px; } .charsheet .sheet-charinfo { width: 60%; display: inline-block; } .charsheet .sheet-rvd { width: 39%; display: inline-block; vertical-align: top; } .charsheet .sheet-recursion { width: 60%; display: inline-block; } .charsheet .sheet-cyphers { width: 39%; display: inline-block; vertical-align: top; } .charsheet .sheet-primary { display: inline-block; color: #000000; text-align: center; border-radius:1px; border-style:solid; border-color: #000000; font-family: times, sans-serif; font-size: 16px; font-weight: bold; background-color:rgba(255, 255, 255, 0.4) } .charsheet .sheet-spacer { height: 20px; } .charsheet .sheet-circle { font-weight: bold; background: none; border: none; box-shadow: none; margin: 0px auto 0px auto; text-align: center; font-size:24px; width: 70px; color: #000000; font-family: times, sans-serif; padding:0; } .charsheet .sheet-circlebox { background: none; border: none; width: 80px; height: 80px; background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/The%20Strange/images/7YwR8QL.png'); background-repeat: no-repeat; background-position: center; background-size: contain; text-align:center } .charsheet .sheet-circlelabel { background-image: none; background: none; color: #000000; font-size:16px; font-weight: bold; height: 24px; padding-top:0px; padding-bottom:0px; border:0px; text-align:center; } .charsheet .sheet-header { background: #000066; color: #FFFFFF; border: 1px; border-style: solid; border-color: #000066; height: 12px; font-size: 16px; text-align: center; } .charsheet .sheet-smallheader { background: #FFFFFF; color: #000000; border: 3px; border-style: solid; border-color: #000066; height: 12px; width: 16%; font-size: 8px; } .charsheet tbody { background: none; color: #000000; border: 3px; border-style: solid; border-color: #000066; } .charsheet td { background: none; color: #000000; border: 1px; border-style: solid; border-color: #000066; } .charsheet .sheet-attrbox { height: 80px; text-align:center } .charsheet .sheet-skillbox { width: 24px; height: 24px; font-size:14px; font-weight: bold; line-height: 14px; } .charsheet .sheet-attackbox { width: 40%; } .charsheet .sheet-attackboxsmall { width: 10%; } .charsheet .sheet-specialabilbox { width: 50%; } .charsheet .sheet-equipmentbox { width: 100%; height: 200px; } .charsheet .sheet-cypherbox { width: 100%; height: 544px; border: 3px; border-style: solid; border-color: #000066; } .charsheet .sheet-recovery { border: 0px; vertical-align: bottom; } .charsheet .sheet-recovery2 { border: 0px; vertical-align: top; } .charsheet .sheet-dmgtrk { border: 0px; text-align: left; font-size: 10px; padding: 10px; line-height: 100%; } .charsheet .sheet-dmgtrkchbx { border: 0px; text-align: center; vertical-align: bottom; font-size: 10px; line-height: 100%; } .charsheet .sheet-dmgtrkchbx2 { border: 0px; text-align: center; vertical-align: top; font-size: 10px; font-weight: bold; line-height: 100%; } .charsheet .sheet-recoveryrow { border: 3px; border-style: solid; border-color: #000066; text-align: center; } .charsheet .sheet-recoverycirclebox { border: none; width: 60px; height: 60px; background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/The%20Strange/images/Mb5vVT9.png'); background-repeat: no-repeat; background-position: center; background-size: contain; text-align:center; padding:0; } .charsheet .sheet-orangeparent { width:100%; height:100%; z-index:1; position:relative; } .charsheet .sheet-limitcirclebox { background: none; border: none; width: 80px; height: 80px; background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/The%20Strange/images/MaTJpSF.png'); background-repeat: no-repeat; background-position: center; background-size: contain; text-align:center; padding:0; right: -10px; top: -30px; z-index:2; position: absolute; } .charsheet .sheet-armorcirclebox { background: none; border: none; width: 80px; height: 80px; background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/The%20Strange/images/MaTJpSF.png'); background-repeat: no-repeat; background-position: center; background-size: contain; text-align:center; padding:0; left: -10px; top: -30px; z-index:2; position: absolute; } .charsheet .sheet-moneycirclebox { background: none; border: none; width: 80px; height: 80px; background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/The%20Strange/images/MaTJpSF.png'); background-repeat: no-repeat; background-position: center; background-size: contain; text-align:center; padding:0; right: -10px; top: -30px; z-index:2; position: absolute; } .charsheet .sheet-orangecircle { font-weight: bold; background: none; border: none; box-shadow: none; margin: 0px auto 0px auto; text-align: center; font-size:24px; width: 70px; color: #000000; font-family: times, sans-serif; padding:0; vertical-align: middle; position:absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); } .charsheet .sheet-orangecircle2 { font-weight: bold; background: none; border: none; box-shadow: none; margin: 0px auto 0px auto; text-align: center; font-size:16px; color: #000000; font-family: times, sans-serif; padding:0; position:absolute; left: 50%; top: 110%; transform: translate(-50%,-50%); } .charsheet .sheet-rvdbx { background: none; border: 0px; text-align:right; font-weight:bold; font-size:18px; } .charsheet .sheet-rvdbtn { background: none; border: 0px; text-align:left; } .charsheet td input { width: 100%; font-weight: bold; background: none; border: none; box-shadow: none; text-align: left; font-size:16px; color: #000000; font-family: times, sans-serif; } .charsheet .sheet-centerinput { text-align: center; } .charsheet td input[type=checkbox] { width: auto; display: inline-block; box-shadow: 0px 0px 10px 0px #056da1 inset; border-radius:100px; } .charsheet textarea { width: calc(100% - 5px); height: 100%; font-weight: bold; background: none; border: none; box-shadow: none; text-align: left; vertical-align: text-top; font-size:16px; color: #000000; font-family: times, sans-serif; resize: none; } .charsheet .sheet-recoverybtn { overflow: hidden; background: none; border: none; box-shadow: none; font-size:12px !important; color: #000000; font-family: times, sans-serif; }