div { border: thin solid black; border-bottom: medium solid black; border-right: medium solid black; background: #F0EEDC; } input:disabled { background: #ddd; } .sheet-wrapper { display: grid; border: none; grid-template-columns: repeat(6, 1fr); grid-gap: 1px; grid-auto-rows: minmax(30px, auto); background: #F0EEDC; } .sheet-exp span input.sheet-wide { width: 80px; } .sheet-heading { grid-column: 1 / span 3; grid-row: 1; font-weight: bold; text-align: left; } .sheet-heading input { width:300px; } .sheet-exp { grid-column: 4 / span 3; grid-row: 1; display: grid; grid-gap: 3px; grid-template-columns: 1fr 1fr; font-weight: bold; text-align: right; } .sheet-exp-1 { grid-column: 1 / span 2 } .sheet-str { grid-column: 1; grid-row: 2 ; display: grid; grid-gap: 3px; grid-template-columns: 1fr 1fr; text-align: center; background: #E59866; } .sheet-att-name{ font-weight: bold; grid-column: 1 / 3; grid-row: 1; } .sheet-att-bon{ grid-column: 1 / 3; grid-row: span 1; } .sheet-dex { grid-column: 2; grid-row: 2 ; display: grid; grid-gap: 3px; grid-template-columns: 1fr 1fr; text-align: center; background: #F7DC6F; } .sheet-con { grid-column: 3; grid-row: 2 ; display: grid; grid-gap: 3px; grid-template-columns: 1fr 1fr; text-align: center; background: #EC7063; } .sheet-int { grid-column: 4; grid-row: 2 ; display: grid; grid-gap: 3px; grid-template-columns: 1fr 1fr; text-align: center; background: #85C1E9; } .sheet-wis { grid-column: 5; grid-row: 2 ; display: grid; grid-gap: 3px; grid-template-columns: 1fr 1fr; text-align: center; background: #82E0AA; } .sheet-cha { grid-column: 6; grid-row: 2 ; display: grid; grid-gap: 3px; grid-template-columns: 1fr 1fr; text-align: center; background: #C39BD3; } .sheet-two { grid-column: 4 / 7; grid-row: 1 ; } .sheet-top-break { border-top: thin gray solid; } .sheet-hps { grid-column: 5; grid-row: 3 / span 1; display: grid; grid-gap: 3px; grid-template-columns: 1fr; text-align: center; font-weight: bold; background: #EC7063; } .sheet-morale { grid-column: 5; grid-row: 4 / span 1; display: grid; grid-gap: 3px; grid-template-columns: 1fr; text-align: center; font-weight: bold; background: #ddd; } .sheet-morale button.sheet-morale-check { width: 35px; background: #C39BD3; } .sheet-armor { grid-column: 6 ; grid-row: 3 / span 2; display: grid; grid-gap: 3px; grid-template-columns: 1fr; text-align: center; font-weight: bold; } .sheet-logo { grid-column: 6 ; grid-row: 3 / 5; } .sheet-attacks { grid-column: 1 / span 4; grid-row: 3 / span 2; display: grid; grid-gap: 3px; grid-template-columns: 1fr ; text-align: center; font-weight: bold; } .sheet-attack-slot { display: grid; grid-gap: 5px; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; grid-template-rows: 1fr; text-align: center; font-weight: bold; } .sheet-attacks .sheet-attack-slot input.sheet-attack-damage { width: 60px; grid-column: 4 ; grid-row: 1; } .sheet-attacks .sheet-attack-slot input.sheet-attack-descr { width: 250px; grid-column: 1; grid-row: 1; } .sheet-attacks .sheet-attack-slot input.sheet-attack-roll1 { width: 50px; grid-column: 2; grid-row: 1; } .sheet-attacks .sheet-attack-slot input.sheet-attack-roll2 { width: 50px; grid-column: 2; grid-row: 1; } .sheet-attacks .sheet-attack-slot input.sheet-attack-roll3 { width: 50px; grid-column: 2; grid-row: 1; } .sheet-attacks .sheet-attack-slot input.sheet-attack-roll4 { width: 50px; grid-column: 2; grid-row: 1; } .sheet-attacks .sheet-attack-slot input.sheet-attack-roll5 { width: 50px; grid-column: 2; grid-row: 1; } .sheet-attacks .sheet-attack-slot button { width: 20px; grid-column: 5; grid-row: 1; background: #EC7063; } .sheet-attacks .sheet-attack-slot button.sheet-att-bon { width: 20px; grid-column: 3; grid-row: 1; background: #E59866; } .sheet-attacks .sheet-attack-slot button.sheet-att-bon2 { width: 20px; grid-column: 3; grid-row: 1; background: #82E0AA; } .sheet-notes { grid-column: 1 / span 2; grid-row: 5 / 11; display: grid; grid-gap: 3px; grid-template-columns: 1fr; grid-template-rows: 1fr 19fr; text-align: center; font-weight: bold; } .sheet-notes textarea { height: 95%; width: 95%; } .sheet-slots { grid-column: 3 / span 4; grid-row: 5 / 11; display: grid; grid-gap: 1px; grid-template-columns: 1fr 1fr ; text-align: center; font-weight: bold; } .sheet-slot { display: grid; grid-gap: 1px; grid-template-columns: 2fr 1fr 1fr 1fr; grid-template-rows: 1; text-align: center; font-weight: bold; height: 10px; } .sheet-slots-title { grid-column: span 2; font-weight: bold; text-align: center; height: 10px; } .sheet-contents { width: 165px; height: 20px; } .sheet-quality { width: 40px; }