/* Sheet container */ .charsheet { min-width: 860px; position: relative; padding: 0 10px 0 0 !important; height:auto; background-color:#1f1f1f; background-image:url(http://i.imgur.com/AZp4v4X.jpg); overflow: hidden; } .sheet-container { position: relative; width: 860px; } input:checked + .sheet-container { min-width: 860px; width: initial; } /* GHOST HOLDER */ .sheet-ghostholder{ width:860px; height:891px; background-image:url(http://i.imgur.com/BIcJOGk.png); margin-right: auto; margin-left: auto; } .sheet-column1, .sheet-column2{ display:inline-block; height:50px; width:50%; vertical-align: top; } .sheet-column1{ width: 335px; height:891px; } .sheet-column2{ width: 525px; height:891px; } /* BUTTONS ETC */ .sheet-circlebg{ width: 35px; height: 35px; border-radius: 100px; border: 1px solid white; display: inline-block; vertical-align: middle; float: right; margin-right: 13px; position: relative; top: -8px; } .sheet-ghostbuttonholder{ width: 150px; height: 30px; } .sheet-ghostbuttonholder:first-child{ margin-bottom: 27px; } .sheet-actionbuttons{ position: relative; top: 72px; left: 17px; } .sheet-secondrow{ margin-bottom:21px; } .sheet-imposewill { margin-bottom: 52px !important; } .charsheet button[type=roll].sheet-actionbutton { font-size: 13.5px; letter-spacing: 1px; color: #e0e0e0; margin-top: 1px; text-align: left; width: auto; } .charsheet button[type=roll].sheet-rollbutton { text-transform: uppercase; border: none; margin: 0; padding: 0; font-weight: 800; line-height: 9px; } .charsheet button[type=roll] { font-family: "Hoefler Text",Georgia,"Baskerville Old Face",Garamond,"Times New Roman",serif; background: transparent; box-shadow: none; } .charsheet button { text-shadow: none!important; } .charsheet button[type=roll]:before { content: ""!important; } /* INPUTS */ .charsheet .sheet-topinput input[type=text], .charsheet .sheet-topinput input[type=number] { width: 100%; border-bottom: 1px solid #3ad9ff; border-radius: 0; font-size: 14px; padding: 3px 0 0; margin: 3px 0 0; color: #3ad9ff; text-shadow: 0px 0px 14px rgb(0, 204, 255); } .charsheet .sheet-badgeinput{ position: relative; width: 124px; top: 114px; left: 75px; } .charsheet .sheet-nameinput{ position: relative; width: 118px; top: 89px; left: 263px; } .charsheet .sheet-levelinput{ position: relative; width: 39px; top: 64px; left: 450px; } .charsheet .sheet-homeland{ position: relative; width: 214px; top: 79px; left: 276px; } /* GENERALITIES */ button { text-shadow: none !important; } label { font-family: Georgia, Times, "Times New Roman", serif; text-transform: uppercase; letter-spacing: 1px; margin: 0; } div { cursor: default; box-sizing: border-box; } input[type=text],input[type=number] { font-family: Georgia, Times, "Times New Roman", serif; border: none; background: none; box-shadow: none; width: 95%; padding: 0; color: black; } textarea { box-shadow: none; font-family: Georgia, Times, "Times New Roman", serif; border: none; margin: 0; padding: 0; background: transparent; color: black; } li { cursor: default; } li, li input[type=text] { font-family: Georgia, Times, "Times New Roman", serif; position: relative; color: #404040; } li:after { background: black; transform: rotate(45deg); content: ''; display: block; position: absolute; left: 0; } ul { list-style: none; margin: 0; } span { font-family: Georgia, Times, "Times New Roman", serif; color: black; cursor: default; } input[type=checkbox], input[type=radio] { opacity: 0; z-index: 1; margin: 0; padding: 0; position: absolute; } input[type=checkbox] + span, input[type=radio] + span { cursor: pointer; } input[type=number] { color: black; box-shadow: none; } /* input[type=number] { -moz-appearance: textfield; } input[type=number]:hover, input[type=number]:focus { -moz-appearance: number-input; } */ .sheet-hidden { display: none !important; } .sheet-rep-block { display: inline-block; width: 100%; } span.sheet-inherit, input.sheet-inherit { font-size: inherit; color: inherit; font-family: inherit; font-weight: inherit; text-transform: inherit; letter-spacing: inherit; } /* NEW STYLES */ .charsheet input.sheet-attrnum{ position: relative; left: 100px; top: -21px; width: 55px !important; font-size: 19px; text-align: center; color: #3ad9ff; text-shadow: 0px 0px 14px rgb(0, 204, 255); } .sheet-homelandbox1{ color:#e0e0e0; position: relative; left: 178px; top: -139px; width: 310px; height: 200px; } .sheet-homelandtitle{ font-variant: small-caps; font-family: Georgia, Times, "Times New Roman", serif; color:#e0e0e0; padding-right: 6px; } .sheet-checklabel{ color:#e0e0e0; font-family: Georgia, Times, "Times New Roman", serif; padding-left: 6px; } input.sheet-checkbox.sheet-squarebox { height: 15px; width: 146px; } input.sheet-checkbox.sheet-squarebox + span { margin: 0; width: 7px; height: 7px; } input.sheet-checkbox.sheet-squarebox:checked + span { background-color: #3ad9ff !important; box-shadow: 0px 0px 14px rgb(0, 204, 255); opacity: 1; } input.sheet-checkbox.sheet-squarebox:checked~span.sheet-checklabel{ color: #3ad9ff; text-shadow: 0px 0px 14px rgb(0, 204, 255); } input.sheet-checkbox { height: 12px; width: 12px; } input.sheet-checkbox.sheet-circlebox-small { margin-top: 2px; } input.sheet-checkbox.sheet-squarebox-small { height: 10px; width: 10px; } input.sheet-checkbox + span { display: inline-block; width: 10px; height: 10px; border: 1px solid #ffffff; margin: 0 2px 0 0; } input.sheet-checkbox:hover + span { opacity: 0.7; } input.sheet-checkbox.sheet-squarebox { margin-top: 3px; } input.sheet-checkbox.sheet-squarebox + span { background: transparent; vertical-align: middle; margin-left: 1px; } .sheet-homelandbox{ width: 49%; } .sheet-akoros{ position: relative; top: 11px; } .sheet-severos{ position: relative; top: -180px; left: 165px; } .sheet-iruvia{ position: relative; top: -169px; left: 165px; } .sheet-geardesc{ font-family: Georgia, Times, "Times New Roman", serif; color: #e0e0e0; font-size: 12px; position: relative; top: -125px; left: 15px; width: 215px; } .sheet-lightningoil{ position: relative; top: -111px; left: 18px; width: 199px; font-size: 127%; } input.sheet-checkbox.sheet-circlebox{ width:21px; } input.sheet-checkbox.sheet-circlebox + span { border-radius: 50px; height: 12px; width: 12px; margin-right: 5px; float: right; position: relative; top: 1px; } .sheet-lightningoil div{ display:inline-block; } .sheet-role{ position: relative; top: -248px; left: 253px; width: 44%; line-height: 15px; } div.sheet-role > div { margin-bottom:10px; } .sheet-levels{ position: relative; top: -240px; left: 13px; } .sheet-levels .sheet-homelandtitle{ margin-top:8px; } .sheet-lines{ position: relative; top: -508px; left: 167px; } .sheet-lines > div { margin-bottom:3px; } .sheet-rolesworked{ position: relative; top: -781px; left: 334px; width: 160px; } .sheet-rolesworked > div { margin-bottom:3px; } .sheet-ghostkills{ position: relative; top: -771px; left: 334px; width: 160px; } .sheet-ghostkills .sheet-circlebg{ float:none; display:block; top:2px; width: 50px; height: 50px; } div.sheet-homelandbox.sheet-ghostkills > input { left: 5px; top: -43px; font-size: 29px; line-height: 0%; } div.sheet-homelandbox.sheet-ghostkills > div:nth-child(4){ position: relative; top: -15px; } div.sheet-homelandbox.sheet-ghostkills > div:nth-child(5){ top: -12px; } div.sheet-homelandbox.sheet-ghostkills > input:nth-child(6){ top: -57px; } /* CLOCKS */ .sheet-harmclock{ position:relative; top: 42px; left: 15px; } .sheet-traumaclock{ top:232px !important; } .sheet-scarsclock{ left: 154px !important; } .sheet-horrorclock{ top:232px !important; } .sheet-clock input.sheet-label { font-size: 11px; letter-spacing: 1px; font-weight: 600; line-height: 0; width: 100%; } .sheet-clockpicture { position: absolute; padding: 2px; margin-top: -38px; z-index: 1; height: 117px; width: 117px; background-image: url(http://i.imgur.com/77QdOWK.png); } .sheet-clock .sheet-clockpicture { margin-left: 85%; } .sheet-clock .sheet-4clock, .sheet-6clock, .sheet-8clock, .sheet-12clock { /* display: none; */ margin-top: 10px; } /* Positioning inputs on clocks */ .sheet-clockpicture input[type=checkbox]:checked { display: none; } .sheet-4clock .sheet-clockpicture input { position: relative; left: 38px; top: 40px; height: 35px !important; width: 35px !important; } .sheet-4clock .sheet-clockpicture input[value="1"] { position: relative; top: 11px; left: 39px; } .sheet-4clock .sheet-clockpicture input[value="2"] { position: relative; left: 31px; } .sheet-4clock .sheet-clockpicture input[value="3"] { position: relative; top: 68px; left: -38px; } .sheet-4clock .sheet-clockpicture input[value="4"] { position: relative; top: 4px; left: 12px; } .sheet-6clock .sheet-clockpicture input { /*height: 17px; width: 12px;*/ left: 38px; top: 40px; height: 35px !important; width: 35px !important; } .sheet-6clock .sheet-clockpicture input[value="1"] { position: relative; top: 17px; left: 55px; } .sheet-6clock .sheet-clockpicture input[value="2"] { position: relative; } .sheet-6clock .sheet-clockpicture input[value="3"] { position: relative; top: 70px; left: -23px; } .sheet-6clock .sheet-clockpicture input[value="4"] { position: relative; top: 30px; left: 22px; } .sheet-6clock .sheet-clockpicture input[value="5"] { position: relative; top: 4px; left: -31px; } .sheet-6clock .sheet-clockpicture input[value="6"] { position: relative; top: -20px; left: -52px; } /* End positioning */ input[value="4"]:checked ~ .sheet-4clock, input[value="6"]:checked ~ .sheet-6clock { display: block; } .sheet-4clock input[value="0"]:checked ~ .sheet-clockpicture { background-image: url(http://i.imgur.com/8cImqJt.png); } .sheet-4clock input[value="1"]:checked ~ .sheet-clockpicture { background-image: url(http://i.imgur.com/ZaxeV1l.png); } .sheet-4clock input[value="2"]:checked ~ .sheet-clockpicture { background-image: url(http://i.imgur.com/LVbgk7Q.png); } .sheet-4clock input[value="3"]:checked ~ .sheet-clockpicture { background-image: url(http://i.imgur.com/PcVhKsv.png); } .sheet-4clock input[value="4"]:checked ~ .sheet-clockpicture { background-image: url(http://i.imgur.com/0XG71xP.png); } div.sheet-harmclock.sheet-horrorclock .sheet-4clock input[value="0"]:checked ~ .sheet-clockpicture { background-image: url(http://i.imgur.com/yRBth0u.png); } div.sheet-harmclock.sheet-horrorclock .sheet-4clock input[value="1"]:checked ~ .sheet-clockpicture { background-image: url(http://i.imgur.com/DQlms38.png); } div.sheet-harmclock.sheet-horrorclock .sheet-4clock input[value="2"]:checked ~ .sheet-clockpicture { background-image: url(http://i.imgur.com/xdF7Wqp.png); } div.sheet-harmclock.sheet-horrorclock .sheet-4clock input[value="3"]:checked ~ .sheet-clockpicture { background-image: url(http://i.imgur.com/2sBZFvd.png); } div.sheet-harmclock.sheet-horrorclock .sheet-4clock input[value="4"]:checked ~ .sheet-clockpicture { background-image: url(http://i.imgur.com/9umbkU9.png); } .sheet-6clock input[value="0"]:checked ~ .sheet-clockpicture { background-image: url(http://i.imgur.com/77QdOWK.png); } .sheet-6clock input[value="1"]:checked ~ .sheet-clockpicture { background-image: url(http://i.imgur.com/oEoEarl.png); } .sheet-6clock input[value="2"]:checked ~ .sheet-clockpicture { background-image: url(http://i.imgur.com/VENKtb4.png); } .sheet-6clock input[value="3"]:checked ~ .sheet-clockpicture { background-image: url(http://i.imgur.com/NybZx5G.png); } .sheet-6clock input[value="4"]:checked ~ .sheet-clockpicture { background-image: url(http://i.imgur.com/0TneIDf.png); } .sheet-6clock input[value="5"]:checked ~ .sheet-clockpicture { background-image: url(http://i.imgur.com/SRagNmE.png); } .sheet-6clock input[value="6"]:checked ~ .sheet-clockpicture { background-image: url(http://i.imgur.com/CJB1p7f.png); } div.sheet-harmclock.sheet-traumaclock .sheet-6clock input[value="0"]:checked ~ .sheet-clockpicture { background-image: url(http://i.imgur.com/aTqb6sN.png); } div.sheet-harmclock.sheet-traumaclock .sheet-6clock input[value="1"]:checked ~ .sheet-clockpicture { background-image: url(http://i.imgur.com/yRpRATi.png); } div.sheet-harmclock.sheet-traumaclock .sheet-6clock input[value="2"]:checked ~ .sheet-clockpicture { background-image: url(http://i.imgur.com/C2oIScD.png); } div.sheet-harmclock.sheet-traumaclock .sheet-6clock input[value="3"]:checked ~ .sheet-clockpicture { background-image: url(http://i.imgur.com/Xfju0t7.png); } div.sheet-harmclock.sheet-traumaclock .sheet-6clock input[value="4"]:checked ~ .sheet-clockpicture { background-image: url(http://i.imgur.com/V9nBIvl.png); } div.sheet-harmclock.sheet-traumaclock .sheet-6clock input[value="5"]:checked ~ .sheet-clockpicture { background-image: url(http://i.imgur.com/1PYixAr.png); } div.sheet-harmclock.sheet-traumaclock .sheet-6clock input[value="6"]:checked ~ .sheet-clockpicture { background-image: url(http://i.imgur.com/hwvZ0IS.png); } .sheet-clockprogress { margin-top: 10px; } .sheet-clockprogress span:first-child { margin-right: 3px; } .sheet-clock { background-color: #d6d8d9; font-style: italic; font-size: 10px; line-height: 8px; } .sheet-clock { width: 100%; display: inline-block; padding: 8px 8px 12px; margin-bottom: 8px; } .sheet-healing .sheet-clockpicture { margin: 32px 0 0 22px; } input.sheet-zero { width: 13px; height: 13px; } input.sheet-zero + span { width: 10px; height: 13px; margin-right: 3px; display: inline-block; position: absolute; vertical-align: top; background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Blades%20in%20the%20Dark/Assets/teeth/zero.png); } input.sheet-zero[type=radio]:checked + span { display: none; } .sheet-healing .sheet-zeroholder { z-index: 3; } .sheet-zeroholder { position: relative; top: -4px; left: 34px; } div.sheet-harmclock.sheet-traumaclock div.sheet-zeroholder{ left:19px; } div.sheet-harmclock.sheet-horrorclock div.sheet-zeroholder{ left:19px; } .sheet-chits{ position: relative; top: 470px; left: -45px; } .sheet-chits input{ font-size: 29px; line-height: 0%; } div.sheet-chits > input:nth-child(2) { left: 143px;} div.sheet-chits > input:nth-child(3) { left: 183px;} .sheet-notes{ position: relative; top: 531px; left: 33px; resize: none; width: 269px; height: 77px; color: #3ad9ff; } .sheet-notes2{ position: relative; top: 594px; left: 33px; resize: none; width: 269px; height: 150px; color: #3ad9ff; } .sheet-reference{ width: 788px; margin-top: 20px; padding-bottom: 50px; margin-right: auto; margin-left: auto; height: 880px; overflow: hidden; } .sheet-rulesbox{ font-family: Georgia, Times, "Times New Roman", serif; color: #e0e0e0; font-size: 14px; width:30%; border-top: 1px solid white; padding-top: 13px; display:inline-block; margin-right: 23px; padding-bottom: 23px; vertical-align: top; } .sheet-rulestitle{ font-variant: small-caps; font-family: Georgia, Times, "Times New Roman", serif; color:white; font-size: 20px; } .sheet-rulesbox ul{ color:#e0e0e0; list-style-type: disc; padding-left: 15px; padding-bottom: 14px; } .sheet-rulesbox li{ color:#e0e0e0; padding-top: 8px; } /* ROLL TEMPLATE */ .sheet-rolltemplate-ghost { margin-left: -42px; margin-right: -1px; } .sheet-rolltemplate-ghost { height: auto; padding: 2px; /* background: url(http://i.imgur.com/xBk4U1p.jpg) top left; */ background-color: #000000; color: #3ad9ff; text-shadow: 0px 0px 14px rgb(0, 204, 255); font-family: Georgia, Times, "Times New Roman", serif; background-image:url(http://i.imgur.com/VRNyMBT.gif); background-size:cover; } .sheet-rolltemplate-ghost table { border-collapse: separate; border-spacing: 0; padding: 10px; min-width: 100%; line-height: 32px; font-size: 134%; margin: 0; border: none; } .sheet-rolltemplate-ghost .sheet-rt-table td, .sheet-rolltemplate-ghost .sheet-rt-table th { padding: 0; border: none; } .sheet-rolltemplate-ghost table td.sheet-desc_leftcol { width: 67px; } .sheet-rolltemplate-ghost table td.sheet-desc_rightcol { padding-left: 14px; line-height: 1.3em; padding-top: 2px; padding-bottom: 2px; color:white; } .sheet-rolltemplate-ghost table td.sheet-desc_rightcol span { font-size: 1.2em !important; padding: 0; font-weight: 100; border: 0 !important; background-color: rgba(0, 0, 0, 0); } .sheet-rolltemplate-ghost td { border-top: 1px solid rgba(255, 255, 255, 0.25) !important; } .sheet-rolltemplate-ghost th { font-size: 1.5em; padding-top: 0px; padding-bottom: 4px; font-weight: 100; text-align: left; } .sheet-rolltemplate-ghost table td.sheet-desc_leftcollongoff { vertical-align: top; padding-top: 5px; } .sheet-rolltemplate-ghost table td.sheet-desc_rightcollongoff { font-size: 1.1em; padding-top: 5px; padding-bottom: 5px; text-transform: none; letter-spacing: 0px; }