/* CSS Reset */{} .charsheet .sheet-wrapper div, .charsheet .sheet-wrapper span, .charsheet .sheet-wrapper label, .charsheet .sheet-wrapper h1, .charsheet .sheet-wrapper h2, .charsheet .sheet-wrapper h3, .charsheet .sheet-wrapper h4, .charsheet .sheet-wrapper h5, .charsheet .sheet-wrapper h6, .charsheet .sheet-wrapper p, .charsheet .sheet-wrapper table, .charsheet .sheet-wrapper caption, .charsheet .sheet-wrapper tbody, .charsheet .sheet-wrapper tfoot, .charsheet .sheet-wrapper thead, .charsheet .sheet-wrapper tr, .charsheet .sheet-wrapper th, .charsheet .sheet-wrapper td { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; color: #404040; vertical-align: baseline; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } .charsheet .sheet-wrapper table { border-collapse: collapse; border-spacing: 0; } .charsheet .sheet-wrapper input::-webkit-outer-spin-button, .charsheet .sheet-wrapper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .charsheet .sheet-wrapper input[type="number"] { -moz-appearance: textfield; } .charsheet .sheet-wrapper textarea { resize: none; } /* Main Styles */{} .charsheet { background-color: white; } .charsheet .sheet-wrapper h2 { margin: 1px 0; font-weight:bold; font-size: 15px; } .charsheet .sheet-wrapper input, .charsheet .sheet-wrapper textarea, .charsheet .sheet-wrapper select, .charsheet .sheet-wrapper input[type="number"] { display: inline-block; border: 1px solid #ccc; padding: 2px; height: 28px; width: 100%; font-size: 12px; line-height: 16px; font-weight: normal; margin: 0; color: #555; background-color: white; vertical-align: middle; cursor: auto; letter-spacing: normal; word-spacing: normal; text-transform: none; text-indent: 0px; text-shadow: none; text-align: start; -webkit-rtl-ordering: logical; -webkit-user-select: text; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); -webkit-transition: border linear .2s,box-shadow linear .2s; -moz-transition: border linear .2s,box-shadow linear .2s; -ms-transition: border linear .2s,box-shadow linear .2s; -o-transition: border linear .2s,box-shadow linear .2s; transition: border linear .2s,box-shadow linear .2s; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-writing-mode: horizontal-tb; } .charsheet .sheet-wrapper input:not([type='checkbox']) { -webkit-appearance: textfield; } .charsheet .sheet-wrapper input[type="checkbox"] { margin-top: 7px; height: 13px; width: 13px; color: #555; border: 1px solid #ccc; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); -webkit-transition: border linear .2s,box-shadow linear .2s; -moz-transition: border linear .2s,box-shadow linear .2s; -ms-transition: border linear .2s,box-shadow linear .2s; -o-transition: border linear .2s,box-shadow linear .2s; transition: border linear .2s,box-shadow linear .2s; } .charsheet .sheet-wrapper input[disabled], .charsheet .sheet-wrapper select[disabled], .charsheet .sheet-wrapper textarea[disabled], .charsheet .sheet-wrapper input[readonly], .charsheet .sheet-wrapper select[readonly], .charsheet .sheet-wrapper textarea[readonly] { background-color: #f5f5f5; border-color: #ddd; cursor: not-allowed; } .charsheet .sheet-wrapper textarea { width: 98%; height: 50px; font-size: 13px; line-height: 18px; } .charsheet .sheet-wrapper textarea.sheet-resize { resize: vertical; height: 20px; } .charsheet .sheet-wrapper label { display: inline-block; width: 100%; font-size: 12px; text-align: left; height: 28px; line-height: 28px; vertical-align: middle; } .charsheet .sheet-wrapper .sheet-3colrow .sheet-col { width: calc(33% - 3px) !important; margin-right: 2px !important; } .charsheet .sheet-wrapper .sheet-3colrow .sheet-col:last-child { margin-right: 0 !important; } .charsheet .sheet-wrapper .sheet-2colrow .sheet-col { width: calc(50% - 3px) !important; margin-right: 2px !important; } .charsheet .sheet-wrapper .sheet-2colrow .sheet-col:last-child { margin-right: 0 !important; } /* Row And Items */{} .charsheet .sheet-wrapper .sheet-row { height: 34px; margin: 0 0 2px; } .charsheet .sheet-wrapper .sheet-alternative:nth-child(2n) { background-color: #E3E3E3; } .charsheet .sheet-wrapper .sheet-header { height: 20px; margin: 0; margin-bottom: 3px; } .charsheet .sheet-wrapper .sheet-header label { padding: 0; font-size: 9px; height: 20px; line-height: 20px; font-weight: normal; word-wrap:break-word; } .charsheet .sheet-wrapper .sheet-item { display: inline-block; width: 100%; height: 34px; vertical-align: middle; margin: 0 -2px; text-align: left; padding: 3px 2px; } .charsheet .sheet-wrapper .sheet-item.sheet-center { text-align: center; } .charsheet .sheet-wrapper .sheet-item.sheet-multiline label { line-height: 9px; padding-top: 1px; } .charsheet .sheet-wrapper .sheet-item.sheet-mini { width: calc(5%); } .charsheet .sheet-wrapper .sheet-item.sheet-puny { width: calc(10%); } .charsheet .sheet-wrapper .sheet-item.sheet-tiny { width: calc(15%); } .charsheet .sheet-wrapper .sheet-item.sheet-small { width: calc(20%); } .charsheet .sheet-wrapper textarea.sheet-small { height: 32px; } .charsheet .sheet-wrapper .sheet-item.sheet-med { width: calc(30%); } .charsheet .sheet-wrapper .sheet-item.sheet-large { width: calc(40%); } .charsheet .sheet-wrapper .sheet-item.sheet-vlarge { width: calc(50%); } .charsheet .sheet-wrapper .sheet-item.sheet-vvlarge { width: calc(60%); } .charsheet .sheet-wrapper .sheet-item.sheet-vvvlarge { width: calc(70%); } .charsheet .sheet-wrapper .sheet-item.sheet-huge { width: calc(80%); } /* Base Info */{} .sheet-baseinfo { display: inline-block; width: 145px; margin-right: 3px; } .sheet-baseinfo.sheet-number { width: 39px; margin-right: 10px; } .sheet-baseinfo.sheet-short { width: 60px; } .sheet-baseinfo.sheet-medium { width: 100px; } /* Stat Blocks */{} .charsheet .sheet-wrapper .sheet-statblock { display: block; visibility: visible; text-align: left; width: 100%; height: auto; display: inline-block; position: relative; z-index: 1; top: 0px; left: 0px; margin: 0; margin-bottom: 5px; padding: 0; border: none; background: none; text-align: left; -webkit-transition: .125s linear; -moz-transition: .125s linear; -ms-transition: .125s linear; -o-transition: .125s linear; transition: .125s linear; } .charsheet .sheet-wrapper .sheet-statblock:last-child { margin-bottom: 0!important; } .charsheet .sheet-wrapper .sheet-statblock .sheet-black label { color: white; } .charsheet .sheet-wrapper .sheet-statblock .sheet-halfblack { background: linear-gradient(to right, white 50%, black 50%); } .charsheet .sheet-wrapper .sheet-statblock .sheet-black { background: black; color: white; } .charsheet .sheet-wrapper .sheet-statblock h2, .charsheet .sheet-wrapper .sheet-headtwo { width: 100%; background-color: black; color: white; text-align: center; margin: 1px 0; font-weight:bold; font-size: 15px; } /* CSS Hide/Show without IDs */ .charsheet .sheet-wrapper .sheet-toggle-container { margin-bottom: -23px; } .charsheet .sheet-wrapper input[type="checkbox"].sheet-toggle { width: 100%; height: 28px; opacity: 0; margin: 0; position: relative; cursor: pointer; z-index: 1; } .charsheet .sheet-wrapper .sheet-toggle + label.sheet-headtwo { margin-top: 0; position: relative; top: -28px; } .charsheet .sheet-wrapper .sheet-toggle ~ .sheet-statblock { position: relative; top: -28px; } .charsheet .sheet-wrapper .sheet-toggle:checked + label.sheet-headtwo { background-color: #333; } .charsheet .sheet-wrapper .sheet-toggle:checked ~ .sheet-statblock { display: none; visibility: hidden; } /* Hidden Roll buttons */{} .charsheet .sheet-wrapper button[type="roll"]:before { content: ""!important; display: none; } .charsheet .sheet-wrapper button[type="roll"], .charsheet .sheet-wrapper .sheet-btn { width: 100%; height:28px; vertical-align: middle; padding: 0; display: inline-block; margin: 0; font-weight: 400; text-align: center; vertical-align: middle; cursor: pointer; background-image: none; background-color: #fff; border: 1px solid #ccc; white-space: nowrap; border-radius: 4px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } .charsheet .sheet-wrapper button[type="roll"]:hover, .charsheet .sheet-wrapper .sheet-btn:hover, .charsheet .sheet-wrapper .sheet-hider input[type=checkbox]:checked ~ .sheet-btn { background-color: #ebebeb; border-color: #adadad; } .charsheet .sheet-wrapper .sheet-hider input[type=checkbox]:checked ~ .sheet-btn { margin-bottom: 4px; } .charsheet .sheet-wrapper button[type="roll"] label, .charsheet .sheet-wrapper button[type="roll"] input { height:22px; line-height: 22px; font-size: 11px; vertical-align: middle; text-align:center; width: 99%; cursor: pointer; border: none; background: none; box-shadow: none; transition: none; border-radius: none; } /* Power Cards */ .charsheet .sheet-wrapper .sheet-power-card { width: 49%; margin: 0 0.5% 10px; border: 1px solid black; padding: 0 10px 10px; float: left; -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; } .charsheet .sheet-wrapper .sheet-power-card .sheet-header { margin: 0; } .charsheet .sheet-wrapper .sheet-power-card input[type="radio"] { width: 20px; display: inline-block; } .charsheet .sheet-wrapper .sheet-power-card input[type="radio"] + label{ width: 19%; display: inline-block; } .sheet-colred:checked ~ .sheet-headcolor { background-color: red; } .sheet-colgreen:checked ~ .sheet-headcolor { background-color: green; } .sheet-colgrey:checked ~ .sheet-headcolor { background-color: gray; } .sheet-colorange:checked ~ .sheet-headcolor { background-color: orange; } .charsheet .sheet-wrapper .sheet-headcolor { width: calc(100% + 20px); height: 68px; border: 1px; position: relative; border: 1px solid transparent; top: -133px; right: 10px; z-index:-1; -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; } .charsheet .sheet-wrapper .sheet-bodyfix { position: relative; top: -68px; margin-bottom: -68px; height: 0px; } .charsheet .sheet-wrapper .sheet-headfix { position: relative; top: -28px; margin-bottom: -28px; height: 0px; } .charsheet .sheet-wrapper .sheet-power-card .sheet-toggle ~ .sheet-statblock { position: relative; top: 0px; } .charsheet .sheet-wrapper .sheet-labelfix { height: 20px; } .charsheet .sheet-wrapper .sheet-power-card .sheet-header:first-of-type label{ color:white; } .charsheet .sheet-wrapper .sheet-power-card .sheet-statblock .sheet-header label{ color:#404040; } .charsheet .sheet-wrapper .sheet-power-card .sheet-statblock textarea, .charsheet .sheet-wrapper textarea.sheet-text-large{ height: 100px; } .charsheet .sheet-wrapper .sheet-toggle:checked ~ input[type="radio"] { display: none; visibility: hidden; } .charsheet .sheet-wrapper .sheet-toggle:checked ~ input[type="radio"] + label { display: none; visibility: hidden; } .charsheet .sheet-wrapper .sheet-toggle:checked ~ .sheet-headcolor { top: -105px; } /* Tabs */ .charsheet .sheet-wrapper input[type="radio"].sheet-tab { width: 15%; display: inline-block; opacity: 0; position: relative; cursor: pointer; z-index: 1; } .charsheet .sheet-wrapper input[type="radio"].sheet-tab + label{ width: 15%; display: inline-block; position: relative; left: -15%; margin-right: -15%; background-color: black; color: white; text-align: center; font-weight:bold; } .charsheet .sheet-wrapper input[type="radio"].sheet-tab:checked + label{ background-color: #333; } .charsheet .sheet-wrapper .sheet-tab-stats { display: none; visibility: hidden; } .charsheet .sheet-wrapper .sheet-tab-stats-radio:checked ~ .sheet-tab-stats { display: block; visibility: visible; } .charsheet .sheet-wrapper .sheet-tab-inventory { display: none; visibility: hidden; } .charsheet .sheet-wrapper .sheet-tab-inventory-radio:checked ~ .sheet-tab-inventory { display: block; visibility: visible; } .charsheet .sheet-wrapper .sheet-tab-powers { display: none; visibility: hidden; } .charsheet .sheet-wrapper .sheet-tab-powers-radio:checked ~ .sheet-tab-powers { display: block; visibility: visible; } .charsheet .sheet-wrapper .sheet-tab-powers-radio:checked ~ .sheet-tab-powers .sheet-tab-powers { display: block; visibility: visible; } .charsheet .sheet-wrapper .sheet-tab-powers-radio:checked ~ .sheet-tab-powers .sheet-tab-settings { display: none !important; visibility: hidden !important; } .charsheet .sheet-wrapper .sheet-tab-settings { display: none; visibility: hidden; } .charsheet .sheet-wrapper .sheet-tab-settings-radio:checked ~ .sheet-tab-settings { display: block; visibility: visible; } .charsheet .sheet-wrapper .sheet-tab-settings-radio:checked ~ .sheet-tab-settings .sheet-tab-settings { display: block; visibility: visible; } .charsheet .sheet-wrapper .sheet-tab-settings-radio:checked ~ .sheet-tab-settings .sheet-tab-powers { display: none !important; visibility: hidden !important; } /* Power Card Toggle */ .charsheet .sheet-wrapper .sheet-tab-powers .sheet-power-card-toggle-container .sheet-power-card-toggle ~ .sheet-power-card.sheet-tab-powers { display: none; visibility: hidden; } .charsheet .sheet-wrapper .sheet-tab-powers .sheet-power-card-toggle-container .sheet-power-card-toggle:checked ~ .sheet-power-card.sheet-tab-powers { display: block; visibility: visible; } .charsheet .sheet-wrapper .sheet-tab-settings-radio:checked ~ .sheet-tab-settings .sheet-power-card-toggle-container { width: 20%; float: left; } .charsheet .sheet-wrapper input[type="checkbox"].sheet-power-card-toggle { width: 100%; display: inline-block; opacity: 0; position: relative; cursor: pointer; z-index: 1; height: 28px; } .charsheet .sheet-wrapper input[type="checkbox"].sheet-power-card-toggle + label{ width: 100%; display: inline-block; position: relative; background-color: black; color: white; text-align: center; font-weight:bold; top: -28px; margin-bottom: -28px; } .charsheet .sheet-wrapper input[type="checkbox"].sheet-power-card-toggle:checked + label{ background-color: #333; } /* Power Roll Template */ .sheet-rolltemplate-dnd4epower table { width: 98%; padding: 2px; border: 1px solid; background-color: #ffffff; font-family: Arial, Helvetica, sans-serif; } .sheet-rolltemplate-dnd4epower .sheet-emote { color: #000000; padding-left: 5px; padding-bottom: 5px; line-height: 1em; font-size: 1em; font-style: italic; text-align: left; } .sheet-rolltemplate-dnd4epower .sheet-power-header { color: #ffffff; padding-left: 5px; line-height: 1.6em; font-size: 1.2em; text-align: left; } .sheet-rolltemplate-dnd4epower .sheet-atwill { background-color: #3a7042; } .sheet-rolltemplate-dnd4epower .sheet-encounter { background-color: #7d0824; } .sheet-rolltemplate-dnd4epower .sheet-daily { background-color: #333333; } .sheet-rolltemplate-dnd4epower .sheet-item { background-color: #E6B800; } .sheet-rolltemplate-dnd4epower .sheet-other { background-color: #000000; } .sheet-rolltemplate-dnd4epower .sheet-ability { background-color: #483D8B; } .sheet-rolltemplate-dnd4epower .sheet-skill { background-color: #3A5ECA; } .sheet-rolltemplate-dnd4epower .sheet-monster { background-color: -webkit-linear-gradient(left, darkgreen , chartreuse); /* For Safari 5.1 to 6.0 */ background-color: -o-linear-gradient(right, darkgreen, chartreuse); /* For Opera 11.1 to 12.0 */ background-color: -moz-linear-gradient(right, darkgreen, chartreuse); /* For Firefox 3.6 to 15 */ background-color: linear-gradient(to right, darkgreen , chartreuse); /* Standard syntax (must be last) */ } .sheet-rolltemplate-dnd4epower .sheet-subheader-alignright { color: #ffffff; padding-left: 5px; line-height: 1em; font-size: 1em; text-align: right; } /* Odd Row Background (Hex Value #D9D1C7) */ .sheet-rolltemplate-dnd4epower tr:nth-of-type(odd) { background: -webkit-linear-gradient(left,rgba(217, 209, 199,1),rgba(217, 209, 199,0.25)); /*Safari 5.1-6*/ background: -o-linear-gradient(right,rgba(217, 209, 199,1),rgba(217, 209, 199,0.25)); /*Opera 11.1-12*/ background: -moz-linear-gradient(right,rgba(217, 209, 199,1),rgba(217, 209, 199,0.25)); /*Fx 3.6-15*/ background: linear-gradient(to right, rgba(217, 209, 199,1), rgba(217, 209, 199,0.25)); /*Standard*/ } .sheet-rolltemplate-dnd4epower td { color: #000000; padding-left: 5px; line-height: 1em; font-size: 1em; text-align: left; } .sheet-rolltemplate-dnd4epower .sheet-td-critical { color: #3FB315; line-height: 1.1em; font-size: 1.1em; } .sheet-rolltemplate-dnd4epower .sheet-td-red { color: #B31515; } .sheet-rolltemplate-dnd4epower .sheet-template-bold { font-weight: bold; } .sheet-rolltemplate-dnd4epower .inlinerollresult { background-color: transparent; border: none; } .sheet-rolltemplate-dnd4epower .inlinerollresult.fullcrit { color: #3FB315; border: none; } .sheet-rolltemplate-dnd4epower .inlinerollresult.fullfail { color: #B31515; border: none; } .sheet-rolltemplate-dnd4epower .inlinerollresult.importantroll { color: #4A57ED; border: none; }