roll20-character-sheets/Connected_stories/Connected_stories.css

.sheet-txt-left {text-align:left !important;}
.sheet-txt-right {text-align:right !important;}
.sheet-txt-center {text-align:center !important;}

.sheet-input {height:25px; border:none; border-radius:5px; background:#e5e5e5; color:#000; padding:0 8px; box-sizing:border-box; line-height:25px; font-size:12px;}

.sheet-gray {background:#64605d !important; color:#fff !important; font-weight:600;}
.sheet-black {background:#4b4643 !important; color:#fff !important; font-weight:600;}

.sheet-mt5 {margin-top:5px !important;}
.sheet-mt10 {margin-top:10px !important;}
.sheet-mt20 {margin-top:20px !important;}

.sheet-story-wrap {position:relative; max-width:832px; margin:0 auto; color:#000; font-size:12px; background:url('https://i.imgur.com/i854rpo.png') no-repeat 0 0 #fff;}
.sheet-story-wrap * {outline:0; font-family:'Malgun Gothic';}
.sheet-story-wrap input,
.sheet-story-wrap textarea {font-size:12px;}

.sheet-top {display:block; position:relative; height:175px; clear:both; overflow:hidden; padding:17px 14px 0 289px; box-sizing:border-box;}
.sheet-charactername-box {position:absolute; top:15px; left:10px; width:267px;}
.sheet-logo {}
.sheet-logo img {display:block; margin:0 auto;}
.sheet-charactername {padding:43px 48px 0; box-sizing:border-box; margin-top:-4px; width:268px; height:82px; background:url('https://i.imgur.com/jDbetGr.png') no-repeat 0 0;}
.sheet-charactername input {display:block; width:100%; height:26px; border:none; outline:0; font-size:18px; vertical-align:middle; text-align:center; font-weight:bold;}
.sheet-ownername {position:relative; margin:0 auto; width:191px; height:32px; background:url('https://i.imgur.com/KBs4NvA.png') no-repeat 50% 100%;}
.sheet-ownername input {display:block; width:100%; height:32px; border:none; outline:0; font-size:12px; vertical-align:middle; text-align:center; font-weight:bold; background:transparent;}
.sheet-characterpfofile-box {position:relative; float:right; width:532px; height:157px; padding:25px 18px 0 9px; background:url('https://i.imgur.com/7MuI88g.png') no-repeat 0 0; box-sizing:border-box;}
.sheet-characterpfofile-box .sheet-left {width:274px; float:left;}
.sheet-characterpfofile-box .sheet-inpbox {width:50%; float:left; position:relative; padding-left:54px; box-sizing:border-box; margin-bottom:13px;}
.sheet-characterpfofile-box .sheet-inpbox label {display:block; position:absolute; top:0; left:0; width:54px; line-height:25px; text-align:center; font-weight:600;}
.sheet-characterpfofile-box .sheet-inpbox input {display:block; width:100%; text-align:center;}
.sheet-characterpfofile-box .sheet-right {width:180px; float:right;}
.sheet-characterpfofile-box .sheet-right textarea {display:block; width:100%; height:106px; box-sizing:border-box; border:none; resize:none; background:transparent; outline:0;}

.sheet-copyright {padding-right:14px; text-align:right; font-size:10px; color:rgba(0,0,0,.5);}

.sheet-statusbox {position:relative; margin:0 15px; min-height:157px; padding-left:103px; clear:both;}
.sheet-statusbox .sheet-hp-box {position:absolute; top:0; left:0; width:91px; height:157px; padding:30px 18px 0; box-sizing:border-box; background:url('https://i.imgur.com/KVluhnc.png') no-repeat 0 0;}
.sheet-statusbox .sheet-hp-box span {display:block; text-align:center; padding-bottom:5px;}
.sheet-statusbox .sheet-hp-box input {display:block; position:absolute; top:58px; left:10px; border:none; width:50px; height:30px; background:transparent; font-size:24px; font-weight:800; text-align:center; color:#cc475f;}
.sheet-statusbox .sheet-hp-box input + input {top:93px; left:auto; right:10px; color:#000;}

.sheet-exp {margin-right:180px; overflow:hidden; padding-bottom:10px;}
.sheet-exp .sheet-col {float:left; padding-right:25px; line-height:25px;}
.sheet-exp .sheet-col input {width:50px; text-align:center;}
.sheet-exp .sheet-col input.sheet-input-none {border:none; font-weight:600; color:#cc475f;}
.sheet-exp .sheet-col input.sheet-input-none ~ input.sheet-input-none {color:#000;}

.sheet-status:after {content:""; display:block; clear:both; margin-bottom:30px;}
.sheet-status .sheet-col {float:left; position:relative;}
.sheet-status .sheet-col + .sheet-col {margin-left:2px;}
.sheet-status .sheet-col label {display:block; position:absolute; width:26px; height:26px; left:50%; margin-left:-13px; bottom:0; text-indent:-999px; overflow:hidden; cursor:pointer; z-index:1;}
.sheet-status .sheet-stat {display:block; position:relative; width:85px; height:120px; background:url('https://i.imgur.com/7dDLA0p.png') no-repeat 50% 50%; z-index:0;}
.sheet-status .sheet-stat button {display:block; width:100%; height:39px; font-size:12px; border:none; padding:0; margin:0; background:transparent; text-align:center; vertical-align:middle; font-weight:600; box-sizing:border-box; padding-top:5px; cursor:pointer;}
.sheet-status .sheet-stat button:before {display:none;}
.sheet-status .sheet-stat input {display:block; width:100%; height:48px; font-size:24px; font-weight:800; text-align:center; background:transparent; border:none;}
.sheet-status .sheet-col .sheet-side {display:block; position:absolute; top:-30px; left:0; right:0;}
.sheet-status .sheet-col .sheet-side input {width:100%; text-align:center;}
.sheet-status .sheet-col input[type="checkbox"] {position:absolute; top:0; left:0; opacity:0; z-index:-999;}
.sheet-status .sheet-col input[type="checkbox"]:checked ~ .sheet-stat {background-image:url('https://i.imgur.com/lRCItKF.png');}
.sheet-status .sheet-col input[type="checkbox"]:checked ~ .sheet-stat input {color:#cc475f;}

.sheet-detailbox {position:relative; float:left; width:467px; height:305px; padding:35px 22px; margin-left:15px; background:url('https://i.imgur.com/DuZVRVr.png') no-repeat 0 0; box-sizing:border-box;}
.sheet-detailbox p {font-weight:800; margin:0 0 10px;}
.sheet-detailbox textarea {display:block; width:100%; height:208px; box-sizing:border-box; border:none; resize:none; background:transparent; line-height:1.5; font-size:12px;}
.sheet-detailbox .sheet-skill {width:160px; float:left;}
.sheet-detailbox .sheet-wepon {width:228px; float:right;}
.sheet-detailbox .sheet-wepon .sheet-list div {overflow:hidden; position:relative; margin:0 0 5px 0; padding:0 29px 0 124px; font-size:12px; color:rgba(0,0,0,.7); text-align:left; font-weight:400;}
.sheet-detailbox .sheet-wepon .sheet-list strong {margin:0; padding:0; display:block; position:absolute; width:120px; top:0; left:0;}
.sheet-detailbox .sheet-wepon .sheet-list span {display:block; position:relative; margin:0; padding:0; box-sizing:border-box;}
.sheet-detailbox .sheet-wepon .sheet-list span + span {position:absolute; display:block; width:25px; right:0; top:0; }
.sheet-detailbox .sheet-wepon .sheet-list input,
.sheet-detailbox .sheet-wepon .sheet-list button {display:block; width:100%;}
.sheet-detailbox .sheet-wepon .sheet-list button {width:25px; height:25px; cursor:pointer; margin:0 !important; box-sizing:border-box;}

.sheet-relationbox {position:relative; float:right; width:317px; height:310px; padding:50px 20px 0; margin-right:15px; background:url('https://i.imgur.com/8Hvty4q.png') no-repeat 0 15px; box-sizing:border-box;}
.sheet-relationbox p {display:block; position:absolute; top:13px; left:50%; width:130px; margin-left:-65px; font-size:14px; text-align:center;}

.sheet-relationbox div {overflow:hidden; position:relative; margin:0 0 5px 0; padding:0 50px 0 124px; font-size:12px; color:rgba(0,0,0,.7); text-align:left; font-weight:400;}
.sheet-relationbox strong {margin:0; padding:0; display:block; position:absolute; width:120px; top:0; left:0;}
.sheet-relationbox span {display:block; position:relative; margin:0; padding:0; box-sizing:border-box;}
.sheet-relationbox span + span {position:absolute; display:block; width:45px; right:0; top:0; }
.sheet-relationbox input,
.sheet-relationbox button {display:block; width:100%;}
.sheet-relationbox button {width:25px; height:25px; cursor:pointer; margin:0 !important; box-sizing:border-box;}


.sheet-inventory {margin:0 15px 30px; padding-top:0; clear:both;}
.sheet-inventory p {font-weight:600; margin:20px 0 10px;}
.sheet-inventory textarea {display:block; width:100%; height:106px; resize:none; padding:10px; line-height:1.5;}

.sheet-otherstory {position:relative; height:246px; background:url('https://i.imgur.com/BkFQDF3.png') no-repeat 50% 0; box-sizing:border-box; padding:70px 20px 20px;}
.sheet-otherstory textarea {display:block; width:100%; height:106px; box-sizing:border-box; border:none; resize:none; background:transparent; line-height:1.5;}

.sheet-rolltemplate-StoryState .sheet-dice-box {display:block; position:relative; max-width:275px; box-sizing:border-box; padding:17px 17px 25px; box-sizing:border-box;}
.sheet-rolltemplate-StoryState .sheet-dice-box:before {content:""; display:block; position:absolute; top:0; left:0; right:0; bottom:0; z-index:0; background:url('https://i.imgur.com/IcL0m6l.png'); background-size:cover; border: 28px solid transparent; border-image:url("https://i.imgur.com/FZJS271.png") 28 round;}
.sheet-rolltemplate-StoryState .sheet-dice-inner {display:block; position:relative;}
.sheet-rolltemplate-StoryState .sheet-dice-box .sheet-name {padding-bottom:23px; background:url('https://i.imgur.com/snP5h1t.png') no-repeat 50% 100%;}
.sheet-rolltemplate-StoryState .sheet-dice-box .sheet-name > * {display:block;}
.sheet-rolltemplate-StoryState .sheet-dice-box .sheet-name span {color:#cc475f; font-size:12px; font-weight:800;}
.sheet-rolltemplate-StoryState .sheet-dice-box .sheet-name strong {color:#000000; font-size:18px; font-weight:800;}
.sheet-rolltemplate-StoryState .sheet-dice-box .sheet-dice {font-size:48px; color:#cc475f; padding:10px 0 15px; text-align:center;}
.sheet-rolltemplate-StoryState .sheet-dice-box .sheet-dice .inlinerollresult {background:transparent; border:none; padding:0; font-size:48px; line-height:1.2;}
.sheet-rolltemplate-StoryState .sheet-dice-box .sheet-cont {background:rgba(255,255,255,.8); border-radius:10px; padding:15px; font-size:12px; line-height:1.5;}
.sheet-rolltemplate-StoryState .sheet-dice-box .sheet-cont p {margin:0;}
.sheet-rolltemplate-StoryState .sheet-dice-box .sheet-cont strong {display:block; padding-bottom:10px; font-weight:800; font-size:14px;}
.sheet-rolltemplate-StoryState .sheet-dice-box .sheet-cont strong.sheet-fail {color:rgb(255, 0, 0);}
.sheet-rolltemplate-StoryState .sheet-dice-box .sheet-cont strong.sheet-fail2 {color:rgb(213,0,0);}
.sheet-rolltemplate-StoryState .sheet-dice-box .sheet-cont strong.sheet-fail3 {color:rgb(255,87,34);}
.sheet-rolltemplate-StoryState .sheet-dice-box .sheet-cont strong.sheet-fail4 {color:rgb(255,87,34);}
.sheet-rolltemplate-StoryState .sheet-dice-box .sheet-cont strong.sheet-sucess {color:rgb(41,98,255);}
.sheet-rolltemplate-StoryState .sheet-dice-box .sheet-cont strong.sheet-ciri {color:rgb(0, 255, 243);}

.sheet-rolltemplate-StoryDamage .sheet-dice-box {display:block; position:relative; max-width:275px; box-sizing:border-box; padding:17px 17px 0; box-sizing:border-box;}
.sheet-rolltemplate-StoryDamage .sheet-dice-box:before {content:""; display:block; position:absolute; top:0; left:0; right:0; bottom:0; z-index:0; background:url('https://i.imgur.com/IcL0m6l.png'); background-size:cover; border: 28px solid transparent; border-image:url("https://i.imgur.com/FZJS271.png") 28 round;}
.sheet-rolltemplate-StoryDamage .sheet-dice-inner {display:block; position:relative;}
.sheet-rolltemplate-StoryDamage .sheet-dice-box .sheet-name {padding-bottom:23px; background:url('https://i.imgur.com/snP5h1t.png') no-repeat 50% 100%;}
.sheet-rolltemplate-StoryDamage .sheet-dice-box .sheet-name > * {display:block;}
.sheet-rolltemplate-StoryDamage .sheet-dice-box .sheet-name span {color:#cc475f; font-size:12px; font-weight:800;}
.sheet-rolltemplate-StoryDamage .sheet-dice-box .sheet-name strong {color:#000000; font-size:18px; font-weight:800;}
.sheet-rolltemplate-StoryDamage .sheet-dice-box .sheet-dice {font-size:48px; color:#cc475f; padding:10px 0 15px; text-align:center;}
.sheet-rolltemplate-StoryDamage .sheet-dice-box .sheet-dice .inlinerollresult {background:transparent; border:none; padding:0; font-size:48px; line-height:1.2;}