/* [Imgur](http://i.imgur.com/OjBPJL9.jpg) [Imgur](http://i.imgur.com/RNob7Yh.jpg) */ @font-face { font-family: 'Special Elite'; font-style: normal; font-weight: 400; src: local('Special Elite'), local('SpecialElite-Regular'), url(http://fonts.gstatic.com/s/specialelite/v5/9-wW4zu3WNoD5Fjka35Jm4kzzdU71mzyRvKBGWbyScU.woff) format('woff'); } li { list-style: none; } .charsheet .sheet-maindiv { background: white; } .charsheet .sheet-maindiv label { display: inline-block; width: auto; margin-left: 5px; font-family: 'Special Elite', 'Helvetica', sans-serif; font-weight: normal; } .charsheet .sheet-maindiv .sheet-col label { display: inline-block; width: auto; } .charsheet .sheet-maindiv .sheet-col label.sheet-harm { padding-right: 0; } .charsheet .sheet-maindiv label.sheet-name { font-weight: 400; font-size: 1.5em; } .charsheet .sheet-maindiv .sheet-col .sheet-section-title { background: url('http://i.imgur.com/OjBPJL9.jpg') repeat-x left center transparent; color: #FFFFFF; line-height: 43px; height: 36px; width: 100%; padding-left: 15px; margin-left: 0; margin-bottom: 0; font-size: 1.5em; box-sizing: border-box; -moz-box-sizing: border-box; } .charsheet .sheet-maindiv .sheet-col.sheet-even .sheet-section-title { background: url('http://i.imgur.com/RNob7Yh.jpg') repeat-x left center transparent; } .charsheet .sheet-maindiv .sheet-col .sheet-harm.sheet-section-title, .charsheet .sheet-maindiv .sheet-col .sheet-other.sheet-section-title, .charsheet .sheet-maindiv .sheet-col .sheet-improvements.sheet-section-title { margin-bottom: 10px; } .charsheet label.sheet-improvement { font-size: 1em; } .charsheet label.sheet-lock { width: auto; font-size: 12px; font-weight: 400; } .charsheet .sheet-attr-box { padding: 5px; } .charsheet input[type=number]{ text-align: right; font-weight: bold; font-size: large; padding: 1px 2px 0px 2px; max-width: 45px; } .charsheet .sheet-attr-box input[type=text] { width: 35px; text-align: center; font-size: 1.2em; font-weight: bold; } .charsheet .sheet-attr-box input[type=checkbox] { width: auto; } label.sheet-cool.sheet-attr { width: auto; display: inline-block; float: left; line-height: 32px; } input.sheet-attr { display: inline-block; width: 40px; font-size: 18px; font-weight: bold; text-align: center; } .ui-dialog .charsheet button[type=roll] { float: right; } .sheet-move-box { } .charsheet div.sheet-roll-box { padding: 8px 4px; background: #EFEFEF; margin-top: 0; line-height: 16px; } .sheet-highlight { font-size: 0.85em; } .repcontainer div.repitem { padding: 5px; background: #EFEFEF; margin-bottom: 9px; } .repcontainer div.repitem { } div.repitem .sheet-movename, div.repitem .sheet-stat { width: 20%; box-sizing: border-box; } div.repitem input[type=text]{ width: 75%; } .repcontrol { margin-bottom: 15px; } .repcontainer div.repitem select { width: 75%; margin: 0; } div.repitem .sheet-desc { width: auto; } input[name="attr_movedesc"]{ width: auto; } .repitem textarea, .sheet-box textarea { height: 32px; box-sizing: border-box; } .largedialog textarea { height: 80px; } .sheet-roll-box label.sheet-buttonLbl { max-width: 80%; margin: 0; padding: 0; } .sheet-angel, .sheet-holder, .sheet-battlebabe, .sheet-brainer, .sheet-child-thing, .sheet-chopper, .sheet-driver, .sheet-faceless, .sheet-gunlugger, .sheet-hocus, .sheet-maestro, .sheet-news, .sheet-quarantine, .sheet-savvy, .sheet-skinner, .sheet-waterbearer, .sheet-marine { display: none; } .sheet-classSelected { display: none; } .sheet-lock:checked ~ .sheet-class, .sheet-lock:checked ~ .sheet-class + label { display: none; } .sheet-lock:checked ~ .sheet-class:checked, .sheet-lock:checked ~ .sheet-class:checked + label, .sheet-lock:checked ~ .sheet-classSelected { display: inline-block; } .sheet-lock:not(:checked) ~ .sheet-class, .sheet-lock:not(:checked) ~ .sheet-class + label { display: inline-block; } .sheet-lock:checked ~ .sheet-classcol { display: none; } .sheet-classcol > .sheet-class:checked, .sheet-classcol > .sheet-class:checked + label { display: inline-block; } input.sheet-showhide:checked ~ .sheet-subbox {display: none;} .sheet-isAngel:checked ~ .sheet-angel, .sheet-isBattlebabe:checked ~ .sheet-battlebabe, .sheet-isBrainer:checked ~ .sheet-brainer, .sheet-isChildThing:checked ~ .sheet-child-thing, .sheet-isChopper:checked ~ .sheet-chopper, .sheet-isDriver:checked ~ .sheet-driver, .sheet-isFaceless:checked ~ .sheet-faceless, .sheet-isGunlugger:checked ~ .sheet-gunlugger, .sheet-isHardholder:checked ~ .sheet-holder, .sheet-isHocus:checked ~ .sheet-hocus, .sheet-isMaestro:checked ~ .sheet-maestro, .sheet-isNews:checked ~ .sheet-news, .sheet-isQuarantine:checked ~ .sheet-quarantine, .sheet-isSavvyhead:checked ~ .sheet-savvy, .sheet-isSkinner:checked ~ .sheet-skinner, .sheet-isWaterbearer:checked ~ .sheet-waterbearer, .sheet-isMarine:checked ~ .sheet-marine { display: block; } /** * http://nicolasgallagher.com/micro-clearfix-hack/ * For modern browsers * 1. The space content is one way to avoid an Opera bug when the * contenteditable attribute is included anywhere else in the document. * Otherwise it causes space to appear at the top and bottom of elements * that are clearfixed. * 2. The use of `table` rather than `block` is only necessary if using * `:before` to contain the top-margins of child elements. */ .sheet-cf:before, .sheet-cf:after { content: " "; /* 1 */ display: table; /* 2 */ } .sheet-cf:after { clear: both; } /* HARM CLOCK */ .sheet-harm-section { display: inline-block; text-align: center; } .sheet-harm-clock { width: 5em; height: 5em; display: inline-block; border-radius: 50%; background: black; border: 2px solid black; } .sheet-harm-checkbox{ margin-left: 5px; margin-right: 4px; } .sheet-harm-checkbox.sheet-harm-0:checked ~ .sheet-harm-clock { background: white; } .sheet-harm-checkbox.sheet-harm-3:checked ~ .sheet-harm-clock { background-image: linear-gradient(180deg, transparent 50%, white 50%), linear-gradient(90deg, white 50%, transparent 50%); } .sheet-harm-checkbox.sheet-harm-6:checked ~ .sheet-harm-clock { background-image: linear-gradient(90deg, white 50%, transparent 50%); } .sheet-harm-checkbox.sheet-harm-9:checked ~ .sheet-harm-clock { background-image: linear-gradient(180deg, transparent 50%, black 50%), linear-gradient(90deg, white 50%, transparent 50%); } .sheet-harm-checkbox.sheet-harm-10:checked ~ .sheet-harm-clock { background-image: linear-gradient(210deg, transparent 50%, black 50%), linear-gradient(90deg, white 50%, transparent 50%); } .sheet-harm-checkbox.sheet-harm-11:checked ~ .sheet-harm-clock { background-image: linear-gradient(240deg, transparent 50%, black 50%), linear-gradient(90deg, white 50%, transparent 50%); } .sheet-harm-checkbox.sheet-harm-12:checked ~ .sheet-harm-clock { background-color: black; } /* FOOD CLOCK (LandfallMarine) */ .sheet-food-section { display: inline-block; text-align: center; } .sheet-food-clock { width: 5em; height: 5em; display: inline-block; border-radius: 50%; background: black; border: 2px solid black; } .sheet-food-checkbox{ margin-left: 5px; margin-right: 4px; } .sheet-food-checkbox.sheet-food-0:checked ~ .sheet-food-clock { background: white; } .sheet-food-checkbox.sheet-food-3:checked ~ .sheet-food-clock { background-image: linear-gradient(180deg, transparent 50%, white 50%), linear-gradient(90deg, white 50%, transparent 50%); } .sheet-food-checkbox.sheet-food-6:checked ~ .sheet-food-clock { background-image: linear-gradient(90deg, white 50%, transparent 50%); } .sheet-food-checkbox.sheet-food-9:checked ~ .sheet-food-clock { background-image: linear-gradient(180deg, transparent 50%, black 50%), linear-gradient(90deg, white 50%, transparent 50%); } .sheet-food-checkbox.sheet-food-10:checked ~ .sheet-food-clock { background-image: linear-gradient(210deg, transparent 50%, black 50%), linear-gradient(90deg, white 50%, transparent 50%); } .sheet-food-checkbox.sheet-food-11:checked ~ .sheet-food-clock { background-image: linear-gradient(240deg, transparent 50%, black 50%), linear-gradient(90deg, white 50%, transparent 50%); } .sheet-food-checkbox.sheet-food-12:checked ~ .sheet-food-clock { background-color: black; } /* CHARGE CLOCK (LandfallMarine) */ .sheet-charge-section { display: inline-block; text-align: center; } .sheet-charge-clock { width: 5em; height: 5em; display: inline-block; border-radius: 50%; background: black; border: 2px solid black; } .sheet-charge-checkbox{ margin-left: 5px; margin-right: 4px; } .sheet-charge-checkbox.sheet-charge-0:checked ~ .sheet-charge-clock { background: white; } .sheet-charge-checkbox.sheet-charge-3:checked ~ .sheet-charge-clock { background-image: linear-gradient(180deg, transparent 50%, white 50%), linear-gradient(90deg, white 50%, transparent 50%); } .sheet-charge-checkbox.sheet-charge-6:checked ~ .sheet-charge-clock { background-image: linear-gradient(90deg, white 50%, transparent 50%); } .sheet-charge-checkbox.sheet-charge-9:checked ~ .sheet-charge-clock { background-image: linear-gradient(180deg, transparent 50%, black 50%), linear-gradient(90deg, white 50%, transparent 50%); } .sheet-charge-checkbox.sheet-charge-10:checked ~ .sheet-charge-clock { background-image: linear-gradient(210deg, transparent 50%, black 50%), linear-gradient(90deg, white 50%, transparent 50%); } .sheet-charge-checkbox.sheet-charge-11:checked ~ .sheet-charge-clock { background-image: linear-gradient(240deg, transparent 50%, black 50%), linear-gradient(90deg, white 50%, transparent 50%); } .sheet-charge-checkbox.sheet-charge-12:checked ~ .sheet-charge-clock { background-color: black; } /* DAMAGE CLOCK (LandfallMarine) */ .sheet-dmg-section { display: inline-block; text-align: center; } .sheet-dmg-clock { width: 5em; height: 5em; display: inline-block; border-radius: 50%; background: black; border: 2px solid black; } .sheet-dmg-checkbox{ margin-left: 5px; margin-right: 4px; } .sheet-dmg-checkbox.sheet-dmg-0:checked ~ .sheet-dmg-clock { background: white; } .sheet-dmg-checkbox.sheet-dmg-3:checked ~ .sheet-dmg-clock { background-image: linear-gradient(180deg, transparent 50%, white 50%), linear-gradient(90deg, white 50%, transparent 50%); } .sheet-dmg-checkbox.sheet-dmg-6:checked ~ .sheet-dmg-clock { background-image: linear-gradient(90deg, white 50%, transparent 50%); } .sheet-dmg-checkbox.sheet-dmg-9:checked ~ .sheet-dmg-clock { background-image: linear-gradient(180deg, transparent 50%, black 50%), linear-gradient(90deg, white 50%, transparent 50%); } .sheet-dmg-checkbox.sheet-dmg-10:checked ~ .sheet-dmg-clock { background-image: linear-gradient(210deg, transparent 50%, black 50%), linear-gradient(90deg, white 50%, transparent 50%); } .sheet-dmg-checkbox.sheet-dmg-11:checked ~ .sheet-dmg-clock { background-image: linear-gradient(240deg, transparent 50%, black 50%), linear-gradient(90deg, white 50%, transparent 50%); } .sheet-dmg-checkbox.sheet-dmg-12:checked ~ .sheet-dmg-clock { background-color: black; } /* AMMO CLOCK (LandfallMarine) */ .sheet-ammo-section { display: inline-block; text-align: center; } .sheet-ammo-clock { width: 5em; height: 5em; display: inline-block; border-radius: 50%; background: black; border: 2px solid black; } .sheet-ammo-checkbox{ margin-left: 5px; margin-right: 4px; } .sheet-ammo-checkbox.sheet-ammo-0:checked ~ .sheet-ammo-clock { background: white; } .sheet-ammo-checkbox.sheet-ammo-3:checked ~ .sheet-ammo-clock { background-image: linear-gradient(180deg, transparent 50%, white 50%), linear-gradient(90deg, white 50%, transparent 50%); } .sheet-ammo-checkbox.sheet-ammo-6:checked ~ .sheet-ammo-clock { background-image: linear-gradient(90deg, white 50%, transparent 50%); } .sheet-ammo-checkbox.sheet-ammo-9:checked ~ .sheet-ammo-clock { background-image: linear-gradient(180deg, transparent 50%, black 50%), linear-gradient(90deg, white 50%, transparent 50%); } .sheet-ammo-checkbox.sheet-ammo-10:checked ~ .sheet-ammo-clock { background-image: linear-gradient(210deg, transparent 50%, black 50%), linear-gradient(90deg, white 50%, transparent 50%); } .sheet-ammo-checkbox.sheet-ammo-11:checked ~ .sheet-ammo-clock { background-image: linear-gradient(240deg, transparent 50%, black 50%), linear-gradient(90deg, white 50%, transparent 50%); } .sheet-ammo-checkbox.sheet-ammo-12:checked ~ .sheet-ammo-clock { background-color: black; } /* ROLL TEMPLATE */ .sheet-rolltemplate-aw table { width: 189px; height: 189px; padding: 2px; background: url(http://i.imgur.com/xBk4U1p.jpg) top left; background-size: 189px 189px; background-repeat: no-repeat; font-family: "Courier New", Courier, monospace; font-weight: bold; border-spacing: 0; } .sheet-rolltemplate-aw th { color: rgb(0, 0, 0); padding: 15px 2px 2px 20px; line-height: 1.2em; font-size: 1.2em; text-align: left; } .sheet-rolltemplate-aw td { padding-left: 20px; font-size: 1.0em; vertical-align: top; } .sheet-rolltemplate-aw .sheet-result { font-size: 2em; text-align: center; padding-bottom: 20px; } .sheet-rolltemplate-aw .inlinerollresult, .sheet-rolltemplate-aw .inlinerollresult.fullcrit, .sheet-rolltemplate-aw .inlinerollresult.fullfail, .sheet-rolltemplate-aw .inlinerollresult.importantroll{ background-color: transparent; color: #000000; border: none; } .sheet-rolltemplate-aw .sheet-success .inlinerollresult, .sheet-rolltemplate-aw .sheet-success .inlinerollresult.fullcrit, .sheet-rolltemplate-aw .sheet-success .inlinerollresult.fullfail, .sheet-rolltemplate-aw .sheet-success .inlinerollresult.importantroll{ background-color: transparent; color: #3FB315; border: none; } .sheet-rolltemplate-aw .sheet-failure .inlinerollresult, .sheet-rolltemplate-aw .sheet-failure .inlinerollresult.fullcrit, .sheet-rolltemplate-aw .sheet-failure .inlinerollresult.fullfail, .sheet-rolltemplate-aw .sheet-failure .inlinerollresult.importantroll{ background-color: transparent; color: #B31515; border: none; } /* fix some display bugs */ .itemcontrol { left: 0; top: 0; } .repcontrol { height: 28px; }