* { box-sizing: border-box; } div[class^="sheet-section"] { display: none; } div.sheet-character, div.sheet-monster { display: none; } .sheet-header { margin-bottom: 5px; } input.sheet-type-character:checked ~ div.sheet-character, input.sheet-type-monster:checked ~ div.sheet-monster { display: block; } input.sheet-ctrl-core-hidden:checked ~ ul.sheet-tab-menu li.sheet-core, input.sheet-ctrl-combat-hidden:checked ~ ul.sheet-tab-menu li.sheet-combat, input.sheet-ctrl-class-hidden:checked ~ ul.sheet-tab-menu li.sheet-class, input.sheet-ctrl-skills-hidden:checked ~ ul.sheet-tab-menu li.sheet-skills, input.sheet-ctrl-feats-hidden:checked ~ ul.sheet-tab-menu li.sheet-feats, input.sheet-ctrl-items-hidden:checked ~ ul.sheet-tab-menu li.sheet-items, input.sheet-ctrl-materia-hidden:checked ~ ul.sheet-tab-menu li.sheet-materia, input.sheet-ctrl-spells-hidden:checked ~ ul.sheet-tab-menu li.sheet-spells, input.sheet-ctrl-notes-hidden:checked ~ ul.sheet-tab-menu li.sheet-notes { display: none; } input.sheet-ctrl-hide-mp:checked ~ table tr.sheet-mp-row { display: none; } input.sheet-ctrl-show-energy1:checked ~ table tr.sheet-energy1-row, input.sheet-ctrl-show-energy2:checked ~ table tr.sheet-energy2-row, input.sheet-ctrl-show-energy3:checked ~ table tr.sheet-energy3-row { display: table-row; } input.sheet-ctrl-show-energy1:not(:checked) ~ table tr.sheet-energy1-row, input.sheet-ctrl-show-energy2:not(:checked) ~ table tr.sheet-energy2-row, input.sheet-ctrl-show-energy3:not(:checked) ~ table tr.sheet-energy3-row { display: none; } input.sheet-core:checked ~ div.sheet-section-core, input.sheet-combat:checked ~ div.sheet-section-combat, input.sheet-class:checked ~ div.sheet-section-class, input.sheet-items:checked ~ div.sheet-section-items, input.sheet-materia:checked ~ div.sheet-section-materia, input.sheet-skills:checked ~ div.sheet-section-skills, input.sheet-feats:checked ~ div.sheet-section-feats, input.sheet-spells:checked ~ div.sheet-section-spells, input.sheet-notes:checked ~ div.sheet-section-notes, input.sheet-settings:checked ~ div.sheet-section-settings { display: block; } ul.sheet-tab-menu { list-style-type: none; margin: 1px 0; padding: 0; overflow: hidden; } ul.sheet-tab-menu li { float: left; height: 24px; width: 70px; color: #E8E8E8; padding: 2px; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; font-family: "Tahoma", "Arial"; background: rgb(130,130,130); /* Old browsers */ background: -moz-linear-gradient(top, rgba(130,130,130,1) 0%, rgba(96,96,96,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(130,130,130,1) 0%,rgba(96,96,96,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(130,130,130,1) 0%,rgba(96,96,96,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ border: solid 1px black; font-weight: bold; border-radius: 2px; margin-right: 1px; text-align: center; position: relative; } ul.sheet-tab-menu li input { position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; margin: 0; padding: 0; cursor: pointer; opacity: 0; z-index: 1; } input.sheet-core:checked ~ ul.sheet-tab-menu li.sheet-core, input.sheet-combat:checked ~ ul.sheet-tab-menu li.sheet-combat, input.sheet-class:checked ~ ul.sheet-tab-menu li.sheet-class, input.sheet-items:checked ~ ul.sheet-tab-menu li.sheet-items, input.sheet-materia:checked ~ ul.sheet-tab-menu li.sheet-materia, input.sheet-skills:checked ~ ul.sheet-tab-menu li.sheet-skills, input.sheet-feats:checked ~ ul.sheet-tab-menu li.sheet-feats, input.sheet-spells:checked ~ ul.sheet-tab-menu li.sheet-spells, input.sheet-notes:checked ~ ul.sheet-tab-menu li.sheet-notes, input.sheet-settings:checked ~ ul.sheet-tab-menu li.sheet-settings { background: rgb(0,214,214); /* Old browsers */ background: -moz-linear-gradient(top, rgba(0,214,214,1) 0%, rgba(6,153,153,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(0,214,214,1) 0%,rgba(6,153,153,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(0,214,214,1) 0%,rgba(6,153,153,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ color: yellow; } .sheet-wrapper { min-width: 800px; position: relative; } .sheet-background { background: rgb(38, 35, 230); /* Old browsers */ background: -moz-linear-gradient(-45deg, rgba(38, 35, 230, 1) 20%, rgba(1,0,12,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(-45deg, rgba(38, 35, 230, 1) 20%,rgba(1,0,12,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(135deg, rgba(38, 35, 230, 1) 20%,rgba(1,0,12,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ color: #E8E8E8; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; font-family: "Tahoma", "Arial"; border-radius: 8px; white-space: normal; } .sheet-box-outer { border: 1px solid black; border-radius: 5px; height: 100%; } .sheet-box-middle { border: 2px solid lightgrey; border-radius: 4px; height: 100%; } .sheet-box-inner { border: 1px solid black; border-radius: 3px; height: 100%; position: relative; } .sheet-box-title { padding: 3px; text-align: center; font-weight: bold; } .sheet-box-content { padding: 5px; } .sheet-options-loc { position: absolute; top: 0; right: 0; } input[type="checkbox"].sheet-button-options { opacity: 0; width: 20px; height: 20px; position: absolute; top: 3px; right: 3px; cursor: pointer; z-index: 4; } input[type="checkbox"].sheet-button-options + span::before { content: "⚙"; display: block; width: 20px; height: 20px; margin: 3px 2px; border-radius: 2px; font-size: 20px; line-height: 18px; z-index: 3; position: relative; } input[type="checkbox"].sheet-button-options:hover + span::before { color: #00E8E8; } input[type="checkbox"].sheet-button-options:checked + span::before { content: "✖"; color: black; text-shadow: none; } input[type="checkbox"].sheet-button-options:checked:hover + span::before { color: #00E8E8; } .sheet-options:checked + .sheet-options-area { display: block; } .sheet-options-area { background-color: rgba(255, 255, 255, 0.9); width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: none; z-index: 2; color: black; text-shadow: none; font-family: "Tahoma", "Arial"; } table { table-layout: fixed; width: 100%; border-collapse: separate; border-spacing: 1px; margin: 0px 0px -1px 0px; } table.sheet-table-skill { table-layout: fixed; border-collapse: separate; border-spacing: 0px; width: 100%; vertical-align: middle; margin-top: -1px; } table.sheet-fancy { border-bottom: 1px solid #00E8E8; border-top: 1px solid #00E8E8; border-spacing: 0px; } tr.sheet-fancy { background-color: rgba(0, 232, 232, 0.4); height: 26px; } tr[class^="sheet-fancy"] td.sheet-label-left, tr[class^="sheet-fancy"] td.sheet-label-top { color: #E8E8E8; } td.sheet-label-top { font-size: 80%; text-align: center; vertical-align: middle; color: #00E8E8; height: 20px; line-height: 100%; } .sheet-label-left { text-align: center; vertical-align: middle; padding: 0px 4px; color: #00E8E8; } td.sheet-label-skill { vertical-align: middle; padding-left: 8px; text-align: left; } .sheet-table-label-left-lb { text-align: center; vertical-align: middle; padding: 5px; color: grey; } .sheet-materia-level { display: table-cell; text-align: center; vertical-align: middle; color: #E8E8E8; } tr { vertical-align: middle; line-height: 100%; } tr.sheet-table-row-skill { vertical-align: middle; height: 25px; line-height: 23px; } tr.sheet-table-row-skill:hover { background-color: rgba(255, 255, 255, 0.25); } tr.sheet-table-row-skill:nth-child(even) { background-color: rgba(0, 0, 0, 0.4); } tr.sheet-table-row-skill:nth-child(even):hover { background-color: rgba(255, 255, 255, 0.25); } td { vertical-align: middle; text-align: center; padding: 0px; } td.sheet-data-skill { vertical-align: middle; text-align: center; padding-left: 1px; } table.sheet-table-skill-monster { table-layout: fixed; border-collapse: separate; border-spacing: 0px; width: 100%; vertical-align: middle; margin-top: -1px; font-size: 80%; line-height: 100%; } table.sheet-table-skill-monster td.sheet-data-skill { padding: 0px; } table.sheet-table-skill-monster td.sheet-label-top { font-size: 100%; } table.sheet-table-skill-monster tr.sheet-table-row-skill { vertical-align: middle; height: 19px; line-height: 17px; } table.sheet-table-skill-monster tr, table.sheet-table-skill-monster input { height: 18px; } .sheet-lb { display: none; } .sheet-inactive:checked ~ .sheet-table-label-left-lb { color: #E8E8E8; border: 1px solid #00E8E8; background: #232323; /* Old browsers */ background: -moz-linear-gradient(top, #232323 0%, #4c4c4c 50%, #6b6b6b 90%, #3d3d3d 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #232323 0%,#4c4c4c 50%,#6b6b6b 90%,#3d3d3d 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #232323 0%,#4c4c4c 50%,#6b6b6b 90%,#3d3d3d 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ } .sheet-active:checked ~ .sheet-table-label-left-lb { color: yellow; border: 1px solid #00E8E8; background: #9e38a5; /* Old browsers */ background: -moz-linear-gradient(top, #9e38a5 0%, #ffccff 40%, #ffe5ff 50%, #ffccff 60%, #d17ddb 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #9e38a5 0%,#ffccff 40%,#ffe5ff 50%,#ffccff 60%,#d17ddb 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #9e38a5 0%,#ffccff 40%,#ffe5ff 50%,#ffccff 60%,#d17ddb 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ } .sheet-materia-type-none:checked ~ table tr td .sheet-materia-level { color: #E8E8E8; } .sheet-materia-type-ability:checked ~ table tr td .sheet-materia-level { color: #ffff4d; } .sheet-materia-type-independent:checked ~ table tr td .sheet-materia-level { color: #cc00cc; } .sheet-materia-type-spell:checked ~ table tr td .sheet-materia-level { color: #00e600; } .sheet-materia-type-summon:checked ~ table tr td .sheet-materia-level { color: #e60000; } .sheet-materia-type-support:checked ~ table tr td .sheet-materia-level { color: #8080ff; } .sheet-materia-icon { height: 24px; background-repeat: no-repeat; background-position: center; } .sheet-materia-type-none:checked ~ table tr td .sheet-materia-icon { background-image: none; } .sheet-materia-type-ability:checked ~ table tr td .sheet-materia-icon { background-image: url("http://www.finalfantasyd20.com/ffd20/images/materia-yellow.png"); } .sheet-materia-type-independent:checked ~ table tr td .sheet-materia-icon { background-image: url("http://www.finalfantasyd20.com/ffd20/images/materia-purple.png"); } .sheet-materia-type-spell:checked ~ table tr td .sheet-materia-icon { background-image: url("http://www.finalfantasyd20.com/ffd20/images/materia-green.png"); } .sheet-materia-type-summon:checked ~ table tr td .sheet-materia-icon { background-image: url("http://www.finalfantasyd20.com/ffd20/images/materia-red.png"); } .sheet-materia-type-support:checked ~ table tr td .sheet-materia-icon { background-image: url("http://www.finalfantasyd20.com/ffd20/images/materia-blue.png"); } .sheet-cs-show { text-align: center; vertical-align: middle; padding: 0px 4px 0px 4px; color: #00E8E8; } .sheet-lb { display: none; } input.sheet-show-spell-details:checked + table.sheet-spell-details { display: none; } .sheet-controller, .sheet-controller-rv { display: none; } .sheet-options-section { border: 1px dotted black; margin: 0 5px 10px 5px; border-radius: 4px; } ul.sheet-unstyled { padding: 0; margin: 0; list-style: none; } ul.sheet-unstyled li { height: 25px; line-height: 25px; } hr { border: 1px solid transparent; border-top: 1px dotted #00E8E8; margin: 10px 0px 10px 0px; } .sheet-flex-container { display: flex; } .sheet-flex-container input[type="text"] { margin: 0 1px 1px 5px; flex: 1; } .sheet-button { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,e6e6e6+100 */ background: rgb(255,255,255); /* Old browsers */ background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(230,230,230,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(230,230,230,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(230,230,230,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ color: rgb(51, 51, 51); border: 1px solid rgb(204, 204, 204); border-bottom-color: #bbb; border-radius: 4px; position: relative; height: 24px; text-align: center; text-shadow: none; padding: 4px 2px; } .sheet-button:hover { color: #00E8E8; } .sheet-button input[type=checkbox] { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; opacity: 0; } input[type=checkbox] { text-align: center; width: 20px; height: 20px; margin-left: 1px; } input[type=number] { color: black; border: 1px solid #00E8E8; font-family: "Tahoma", "Arial"; text-align: center; padding: 2px 4px 2px 4px; border-radius: 0px; height: 24px; margin: 0px; } td input[type=number] { width: 100% !important; } input[type=text] { color: black; width: 100%; text-align: left; border: 1px solid #00E8E8; font-family: "Tahoma", "Arial"; padding: 2px 4px 2px 4px; border-radius: 0px; height: 24px; margin: 0px; min-width: 0; } input[readonly] { border: 1px solid #00E8E8; box-shadow: none !important; background-color: transparent; font-family: "Tahoma", "Arial"; color: #F8F8F8; text-align: center; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; vertical-align: middle; padding: 2px 4px 2px 4px; height: 24px; } input[readonly].sheet-total { color: yellow; background-color: rgba(0, 232, 232, 0.4); } input[type='number'] { -moz-appearance:textfield; } input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; } input:focus { background-color: #00E8E8; } button[type=roll] { width: 24px; height: 24px; padding: 0px; margin: 0px; vertical-align: middle; color: black; } table.sheet-table-skill-monster button[type=roll] { width: 18px; height: 18px; padding: 0px; margin: 0px; vertical-align: middle; color: black; } button[type=roll].sheet-text-button { padding-top: 3px; margin: 0px; vertical-align: middle; color: black; } button[type=roll]:hover { background-image: none; color: #00E8E8; } textarea { resize: none; border: 1px solid #00E8E8; height: 100%; font-family: "Tahoma", "Arial"; color: black; border-radius: 0px; margin: 0px; padding: 2px 4px 2px 4px; overflow-x: hidden; vertical-align: top; } textarea.sheet-notes { border: 1px solid #00E8E8; height: 100%; font-family: "Tahoma", "Arial"; color: black; border-radius: 0px; margin: 0px; padding: 2px 4px 2px 4px; overflow-x: hidden; background-image: url("http://www.finalfantasyd20.com/ffd20/images/Mog_US.png"); background-repeat: no-repeat; background-position: right bottom; } textarea.sheet-resizeable { resize: vertical !important; } textarea:focus { background-color: #00E8E8; } input[type="checkbox"].sheet-expander { opacity: 0; width: 20px; height: 20px; position: relative; left: 11px; bottom: 4px; margin: -10px; cursor: pointer; z-index: 1; } input[type="checkbox"].sheet-expander + span::before { display: inline-block; content: "▼"; color: yellow; width: 20px; height: 20px; margin: 1px 0px; border: 1px solid #00E8E8; border-radius: 2px; font-size: 20px; line-height: 18px; } input[type="checkbox"].sheet-expander:checked + span::before { content: "►"; background-color: transparent; color: #F8F8F8; } .sheet-info { width: 20px; height: 20px; border: 1px solid #00E8E8; border-radius: 2px; font-size: 14px; line-height: 20px; background-color: transparent; color: #F8F8F8; margin: 2px; } div.sheet-info:hover + .sheet-popup { display: block; } select { width: 100% !important; height: 24px; vertical-align: top; padding: 0px; margin: 0px; color: black; border: 1px solid #00E8E8; border-radius: 0px; font-family: "Tahoma", "Arial"; } select.sheet-spell-type { font-size: 80%; border: 1px solid #00E8E8; box-shadow: none !important; background-color: transparent; font-family: "Tahoma", "Arial"; color: #00E8E8; text-align: center; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; vertical-align: middle; } .sheet-expansion-area { display: none; } .sheet-controller.sheet-expander:not(:checked) + .sheet-expansion-area { display: block; } .sheet-controller.sheet-expander:not(:checked) + tr.sheet-expansion-area { display: table-row; } .sheet-controller-rv.sheet-expander:checked + .sheet-expansion-area { display: block; } .itemcontrol { z-index: 9; } .repcontrol_add, .repcontrol_edit, .repcontrol_del, .repcontrol_move { height: 24px; width: 60px; margin: 1px 1px 0px 0px; padding: 0px; vertical-align: middle; text-align: center; } .repcontrol_del, .repcontrol_move { width: 23px; margin: 1px; font-size: 140%; border-radius: 0px; z-index: 100; } .repitem { margin-top: -1px; } .repcontrol { width: 122px; float: left; margin: 0px 0px 1px 1px; } .sheet-rolltemplate-weapon-attack *, .sheet-rolltemplate-roll-check *, .sheet-rolltemplate-special *, .sheet-rolltemplate-spell * { box-sizing: border-box; } .sheet-rolltemplate-weapon-attack .sheet-background, .sheet-rolltemplate-roll-check .sheet-background, .sheet-rolltemplate-special .sheet-background, .sheet-rolltemplate-spell .sheet-background { background: rgb(38, 35, 230); /* Old browsers */ background: -moz-linear-gradient(-45deg, rgba(38, 35, 230, 1) 20%, rgba(1,0,12,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(-45deg, rgba(38, 35, 230, 1) 20%,rgba(1,0,12,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(135deg, rgba(38, 35, 230, 1) 20%,rgba(1,0,12,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; font-family: "Tahoma", "Arial"; border-radius: 8px; white-space: normal; min-width: 233px; border: 1px solid black; border-radius: 5px; } .sheet-rolltemplate-weapon-attack .sheet-box-middle, .sheet-rolltemplate-roll-check .sheet-box-middle, .sheet-rolltemplate-special .sheet-box-middle, .sheet-rolltemplate-spell .sheet-box-middle { border: 2px solid lightgrey; border-radius: 4px; } .sheet-rolltemplate-weapon-attack .sheet-box-inner, .sheet-rolltemplate-roll-check .sheet-box-inner, .sheet-rolltemplate-special .sheet-box-inner, .sheet-rolltemplate-spell .sheet-box-inner { border: 1px solid black; border-radius: 3px; padding: 5px; } .sheet-rolltemplate-weapon-attack .sheet-title, .sheet-rolltemplate-roll-check .sheet-title, .sheet-rolltemplate-special .sheet-title, .sheet-rolltemplate-spell .sheet-title { padding: 5px; text-align: center; font-weight: bold; font-size: 100%; color: #E8E8E8; } .sheet-rolltemplate-weapon-attack .sheet-label, .sheet-rolltemplate-roll-check .sheet-label, .sheet-rolltemplate-special .sheet-label, .sheet-rolltemplate-spell .sheet-label { vertical-align: middle; color: #00E8E8; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; } .sheet-rolltemplate-weapon-attack .sheet-label-small, .sheet-rolltemplate-roll-check .sheet-label-small, .sheet-rolltemplate-special .sheet-label-small, .sheet-rolltemplate-spell .sheet-label-small { text-align: left; vertical-align: middle; color: #00E8E8; font-size: 80%; line-height: 1.3em; } .sheet-rolltemplate-weapon-attack hr.sheet-divider, .sheet-rolltemplate-roll-check hr.sheet-divider, .sheet-rolltemplate-special hr.sheet-divider, .sheet-rolltemplate-spell hr.sheet-divider { border: 1px solid transparent; border-top: 1px solid #00E8E8; margin: 3px 0; } .sheet-rolltemplate-weapon-attack .sheet-roll-result, .sheet-rolltemplate-roll-check .sheet-roll-result, .sheet-rolltemplate-special .sheet-roll-result, .sheet-rolltemplate-spell .sheet-roll-result { text-align: left; vertical-align: middle; text-shadow: none; color: black; padding-left: 5px; } .sheet-rolltemplate-weapon-attack .sheet-critical, .sheet-rolltemplate-special .sheet-critical, .sheet-rolltemplate-spell .sheet-critical { text-align: center; vertical-align: middle; color: yellow; font-weight: bold; font-style: italic; padding-left: 5px; } .sheet-rolltemplate-weapon-attack table, .sheet-rolltemplate-roll-check table, .sheet-rolltemplate-special table, .sheet-rolltemplate-spell table { table-layout: fixed; border-collapse: separate; width: 100%; }