Obsidian Portal - Campaign websites for Dungeons and Dragons and other tabletop RPGs

Hero System 5th Edition (Revised) Character

Author: dragondreams

Slug: hero_system_5_revised

Type: GameCharacter

System: Hero System

DST Source Code

Note: This is the latest, unapproved DST code. Only the DST author can use an unapproved DST, and even then only they can see it. If it's a new DST, then it's invisible to everyone else. If modifying a previously approved DST, then everyone else uses the most recent approved version.

HTML Template

<div class="wrapper csx">

	<div class="tabs">
		<a class="tab combat tab_combat active" title="Characteristics &amp; Combat"></a>
		<a class="tab star tab_star" title="Powers, Talents &amp; Skills"></a>
		<a class="tab gem tab_gem" title="gem"></a>
		<a class="tab biography tab_biography" title="Biography"></a>
	</div>

	<div class="uicontainer">

		<div class="formatBar">
			<button type="button" class="boldButton" title="Bold (Ctrl+B)"></button>
			<button type="button" class="italicButton" title="Italic (Ctrl+I)"></button>
			<button type="button" class="underlineButton" title="Underline (Ctrl+U)"></button>
			<button type="button" class="indentButton" title="Indent (Ctrl+Tab)"></button>
		</div>

		<div class="tipBox">
			<div class="corner topLeft"></div>
			<div class="corner topRight"></div>
			<div class="corner bottomLeft"></div>
			<div class="corner bottomRight"></div>
			<div class="contentBox">
				<div class="tipArea edit"></div>
			</div>
		</div>

	</div>

	<div class="main" style="display:block;">
		<img alt=""
			src="https://www.glados.org/obsidian-portal/constellations-of-nut/DST/hero_system_5_revised/images/Image32-50.png"
			height="60px" class="corner_top_left" />
		<img alt=""
			src="https://www.glados.org/obsidian-portal/constellations-of-nut/DST/hero_system_5_revised/images/Image33-50.png"
			height="60px" class="corner_top_right" />
		<img alt=""
			src="https://www.glados.org/obsidian-portal/constellations-of-nut/DST/hero_system_5_revised/images/Image33-50.png"
			height="60px" class="corner_bottom_left" />
		<img alt=""
			src="https://www.glados.org/obsidian-portal/constellations-of-nut/DST/hero_system_5_revised/images/Image32-50.png"
			height="60px" class="corner_bottom_right" />
		<!-- <img alt="" src="https://www.glados.org/obsidian-portal/constellations-of-nut/DST/hero_system_5_revised/images/Image26-44long.png"     height="44px" class="brass_top" /> -->
		<img alt=""
			src="https://www.glados.org/obsidian-portal/constellations-of-nut/DST/hero_system_5_revised/images/Image26-44long.png"
			height="44px" class="brass_bottom" />

		<div class="pagehead">
			<div class="head"><span class="name readonly dsf dsf_name singlerow"></span></div>
			&lsqb;<span class="dsf dsf_wrap typev singlerow" style="text-align:right;"
				defaultstring="Edit Character Type">Edit Character Wrap</span>&rsqb;
		</div>

		<div class="page page_combat active">

			<!-- Characteristics -->
			<div class="column twothirdswidth colspace smaller">
				<div class="section characteristics ">
				<div class="head">CHARACTERISTICS</div>
				<div class="group">
					<table class="formatting_only ds_hero_system_5_revised" width="100%">
					<tbody>
						<tr class="">
							<td class=""><strong>Val</strong></td>
							<td class=""><strong>Char</strong></td>
							<td class="center editonly"><strong>Base</strong></td>
							<td class="editonly"><strong>Cost</strong></td>
							<td class="editonly"><strong>Points</strong></td>
							<td class=""><strong>Roll</strong></td>
							<td class=""><strong>Notes</strong></td>
						</tr>
						<tr class="">
							<td class=""><span class="dsf dsf_characteristic_str_value"
									defaultstring="&lowbar;&lowbar;&lowbar;">&lowbar;&lowbar;&lowbar;</span></td>
							<td class="">STR</td>
							<td class="center editonly">10</td>
							<td class="editonly">x1</td>
							<td class="editonly"><span class="dsf dsf_characteristic_str_points"
									defaultstring="&lowbar;&lowbar;&lowbar;">&lowbar;&lowbar;&lowbar;</span></td>
							<td class=""><span class="dsf dsf_characteristic_str_roll"
									defaultstring="&lowbar;&lowbar;&lowbar;">&lowbar;&lowbar;&lowbar;</span></td>
							<td class="smaller">HTH Damage:<span class="dsf dsf_characteristic_str_hthdamage"
									defaultstring="&lowbar;&lowbar;&lowbar;">&lowbar;&lowbar;&lowbar;</span>d6&nbsp;&nbsp;Lift:<span
									class="dsf dsf_characteristic_str_lift"
									defaultstring="&lowbar;&lowbar;&lowbar;">&lowbar;&lowbar;&lowbar;</span>&nbsp;&nbsp;END(<span
									class="dsf dsf_characteristic_str_end"
									defaultstring="&lowbar;&lowbar;&lowbar;">&lowbar;&lowbar;&lowbar;</span>)</td>
						</tr>
						<tr class="">
							<td class=""><span class="dsf dsf_characteristic_dex_value"
									defaultstring="&lowbar;&lowbar;&lowbar;">&lowbar;&lowbar;&lowbar;</span></td>
							<td class="">DEX</td>
							<td class="center editonly">10</td>
							<td class="editonly">x3</td>
							<td class="editonly"><span class="dsf dsf_characteristic_dex_points"
									defaultstring="&lowbar;&lowbar;&lowbar;">&lowbar;&lowbar;&lowbar;</span></td>
							<td class=""><span class="dsf dsf_characteristic_dex_roll"
									defaultstring="&lowbar;&lowbar;&lowbar;">&lowbar;&lowbar;&lowbar;</span></td>
							<td class="smaller">DEX OCV:<span class="dsf dsf_characteristic_dex_ocv"
									defaultstring="&lowbar;&lowbar;&lowbar;">&lowbar;&lowbar;&lowbar;</span>&nbsp;&nbsp;DEX
								DCV:<span class="dsf dsf_characteristic_dex_dcv"
									defaultstring="&lowbar;&lowbar;&lowbar;">&lowbar;&lowbar;&lowbar;</span></td>
						</tr>
						<tr class="">
							<td class=""><span class="dsf dsf_characteristic_con_value"
									defaultstring="&lowbar;&lowbar;&lowbar;">&lowbar;&lowbar;&lowbar;</span></td>
							<td class="">CON</td>
							<td class="center editonly">10</td>
							<td class="editonly">x2</td>
							<td class="editonly"><span class="dsf dsf_characteristic_con_points"
									defaultstring="&lowbar;&lowbar;&lowbar;">&lowbar;&lowbar;&lowbar;</span></td>
							<td class=""><span class="dsf dsf_characteristic_con_roll"
									defaultstring="&lowbar;&lowbar;&lowbar;">&lowbar;&lowbar;&lowbar;</span></td>
							<td class=""></td>
						</tr>
						<tr class="">
							<td class=""><span class="dsf dsf_characteristic_body_value"
									defaultstring="&lowbar;&lowbar;&lowbar;">&lowbar;&lowbar;&lowbar;</span></td>
							<td class="">BODY</td>
							<td class="center editonly">10</td>
							<td class="editonly">x2</td>
							<td class="editonly"><span class="dsf dsf_characteristic_body_points"
									defaultstring="&lowbar;&lowbar;&lowbar;">&lowbar;&lowbar;&lowbar;</span></td>
							<td class=""><span class="dsf dsf_characteristic_body_roll"
									defaultstring="&lowbar;&lowbar;&lowbar;">&lowbar;&lowbar;&lowbar;</span></td>
							<td class=""></td>
						</tr>
						<tr class="">
							<td class=""><span class="dsf dsf_characteristic_int_value"
									defaultstring="&lowbar;&lowbar;&lowbar;">&lowbar;&lowbar;&lowbar;</span></td>
							<td class="">INT</td>
							<td class="center editonly">10</td>
							<td class="editonly">x1</td>
							<td class="editonly"><span class="dsf dsf_characteristic_int_points"
									defaultstring="&lowbar;&lowbar;&lowbar;">&lowbar;&lowbar;&lowbar;</span></td>
							<td class=""><span class="dsf dsf_characteristic_int_roll"
									defaultstring="&lowbar;&lowbar;&lowbar;">&lowbar;&lowbar;&lowbar;</span></td>
							<td class="smaller">Perception:<span class="dsf dsf_characteristic_int_perception"
									defaultstring="&lowbar;&lowbar;&lowbar;">&lowbar;&lowbar;&lowbar;</span></td>
						</tr>
						<tr class="">
							<td class=""><span class="dsf dsf_characteristic_ego_value"
									defaultstring="&lowbar;&lowbar;&lowbar;">&lowbar;&lowbar;&lowbar;</span></td>
							<td class="">EGO</td>
							<td class="center editonly">10</td>
							<td class="editonly">x2</td>
							<td class="editonly"><span class="dsf dsf_characteristic_ego_points"
									defaultstring="&lowbar;&lowbar;&lowbar;">&lowbar;&lowbar;&lowbar;</span></td>
							<td class=""><span class="dsf dsf_characteristic_ego_roll"
									defaultstring="&lowbar;&lowbar;&lowbar;">&lowbar;&lowbar;&lowbar;</span></td>
							<td class="smaller">Base ECV:<span class="dsf dsf_characteristic_ego_ecv"
									defaultstring="&lowbar;&lowbar;&lowbar;">&lowbar;&lowbar;&lowbar;</span></td>
						</tr>
						<tr class="">
							<td class=""><span class="dsf dsf_characteristic_pre_value"
									defaultstring="&lowbar;&lowbar;&lowbar;">&lowbar;&lowbar;&lowbar;</span></td>
							<td class="">PRE</td>
							<td class="center editonly">10</td>
							<td class="editonly">x1</td>
							<td class="editonly"><span class="dsf dsf_characteristic_pre_points"
									defaultstring="&lowbar;&lowbar;&lowbar;">&lowbar;&lowbar;&lowbar;</span></td>
							<td class=""><span class="dsf dsf_characteristic_pre_roll"
									defaultstring="&lowbar;&lowbar;&lowbar;">&lowbar;&lowbar;&lowbar;</span></td>
							<td class="smaller">Base Prescence Attack:<span
									class="dsf dsf_characteristic_pre_basepreattackd6"
									defaultstring="&lowbar;&lowbar;&lowbar;">&lowbar;&lowbar;&lowbar;</span>d6</td>
						</tr>
						<tr class="">
							<td class=""><span class="dsf dsf_characteristic_com_value"
									defaultstring="&lowbar;&lowbar;&lowbar;">&lowbar;&lowbar;&lowbar;</span></td>
							<td class="">COM</td>
							<td class="center editonly">10</td>
							<td class="editonly">x&half;</td>
							<td class="editonly"><span class="dsf dsf_characteristic_com_points"
									defaultstring="&lowbar;&lowbar;&lowbar;">&lowbar;&lowbar;&lowbar;</span></td>
							<td class=""><span class="dsf dsf_characteristic_com_roll"
									defaultstring="&lowbar;&lowbar;&lowbar;">&lowbar;&lowbar;&lowbar;</span></td>
							<td class=""></td>
						</tr>
						<tr class="">
							<td colspan="7"></td>
						</tr>
						<tr class="">
							<td class=""><span class="dsf dsf_characteristic_pd_value"
									defaultstring="&lowbar;&lowbar;&lowbar;">&lowbar;&lowbar;&lowbar;</span></td>
							<td class="">PD</td>
							<td class="smaller center editonly"><span class="smaller">(STR/5)</span></td>
							<td class="editonly">x1</td>
							<td class="editonly"><span class="dsf dsf_characteristic_pd_points"
									defaultstring="&lowbar;&lowbar;&lowbar;">&lowbar;&lowbar;&lowbar;</span></td>
							<td class=""></td>
							<td class="smaller">Resistant PD:<span class="dsf dsf_characteristic_pd_resistant"
									defaultstring="&lowbar;&lowbar;&lowbar;">&lowbar;&lowbar;&lowbar;</span>&nbsp;&nbsp;Total
								PD:<span class="dsf dsf_characteristic_pd_total"
									defaultstring="&lowbar;&lowbar;&lowbar;">&lowbar;&lowbar;&lowbar;</span></td>
						</tr>
						<tr class="">
							<td class=""><span class="dsf dsf_characteristic_ed_value"
									defaultstring="&lowbar;&lowbar;&lowbar;">&lowbar;&lowbar;&lowbar;</span></td>
							<td class="">ED</td>
							<td class="smaller center editonly"><span class="smaller">(CON/5)</span></td>
							<td class="editonly">x1</td>
							<td class="editonly"><span class="dsf dsf_characteristic_ed_points"
									defaultstring="&lowbar;&lowbar;&lowbar;">&lowbar;&lowbar;&lowbar;</span></td>
							<td class=""></td>
							<td class="smaller">Resistant ED:<span class="dsf dsf_characteristic_ed_resistant"
									defaultstring="&lowbar;&lowbar;&lowbar;">&lowbar;&lowbar;&lowbar;</span>&nbsp;&nbsp;Total
								ED:<span class="dsf dsf_characteristic_ed_total"
									defaultstring="&lowbar;&lowbar;&lowbar;">&lowbar;&lowbar;&lowbar;</span></td>
						</tr>
						<tr class="">
							<td class=""><span class="dsf dsf_characteristic_spd_value"
									defaultstring="&lowbar;&lowbar;&lowbar;">&lowbar;&lowbar;&lowbar;</span></td>
							<td class="">SPD</td>
							<td class="smaller center editonly"><span class="smaller">1+(DEX/10)</span></td>
							<td class="editonly">x10</td>
							<td class="editonly"><span class="dsf dsf_characteristic_spd_points"
									defaultstring="&lowbar;&lowbar;&lowbar;">&lowbar;&lowbar;&lowbar;</span></td>
							<td class=""></td>
							<td class="smaller">Phases:
								&nbsp;&nbsp;<span class="dsf dsf_characteristic_spd_phases01 readonly"
									defaultstring="&dash;">&dash;</span>
								&nbsp;&nbsp;<span class="dsf dsf_characteristic_spd_phases02 readonly"
									defaultstring="&dash;">&dash;</span>
								&nbsp;&nbsp;<span class="dsf dsf_characteristic_spd_phases03 readonly"
									defaultstring="&dash;">&dash;</span>
								&nbsp;&nbsp;<span class="dsf dsf_characteristic_spd_phases04 readonly"
									defaultstring="&dash;">&dash;</span>
								&nbsp;&nbsp;<span class="dsf dsf_characteristic_spd_phases05 readonly"
									defaultstring="&dash;">&dash;</span>
								&nbsp;&nbsp;<span class="dsf dsf_characteristic_spd_phases06 readonly"
									defaultstring="&dash;">&dash;</span>
								&nbsp;&nbsp;<span class="dsf dsf_characteristic_spd_phases07 readonly"
									defaultstring="&dash;">&dash;</span>
								&nbsp;&nbsp;<span class="dsf dsf_characteristic_spd_phases08 readonly"
									defaultstring="&dash;">&dash;</span>
								&nbsp;&nbsp;<span class="dsf dsf_characteristic_spd_phases09 readonly"
									defaultstring="&dash;">&dash;</span>
								&nbsp;&nbsp;<span class="dsf dsf_characteristic_spd_phases10 readonly"
									defaultstring="&dash;">&dash;</span>
								&nbsp;&nbsp;<span class="dsf dsf_characteristic_spd_phases11 readonly"
									defaultstring="&dash;">&dash;</span>
								&nbsp;&nbsp;<span class="dsf dsf_characteristic_spd_phases12 readonly"
									defaultstring="&dash;">&dash;</span>
							</td>
						</tr>
						<tr class="">
							<td class=""><span class="dsf dsf_characteristic_rec_value"
									defaultstring="&lowbar;&lowbar;&lowbar;">&lowbar;&lowbar;&lowbar;</span></td>
							<td class="">REC</td>
							<td class="smaller center editonly"><span class="smaller">(STR/5)+(CON/5)</span></td>
							<td class="editonly">x2</td>
							<td class="editonly"><span class="dsf dsf_characteristic_rec_points"
									defaultstring="&lowbar;&lowbar;&lowbar;">&lowbar;&lowbar;&lowbar;</span></td>
							<td class=""></td>
							<td class=""></td>
						</tr>
						<tr class="">
							<td class=""><span class="dsf dsf_characteristic_end_value"
									defaultstring="&lowbar;&lowbar;&lowbar;">&lowbar;&lowbar;&lowbar;</span></td>
							<td class="">END</td>
							<td class="smaller center editonly"><span class="smaller">(CON x 2)</span></td>
							<td class="editonly">x&half;</td>
							<td class="editonly"><span class="dsf dsf_characteristic_end_points"
									defaultstring="&lowbar;&lowbar;&lowbar;">&lowbar;&lowbar;&lowbar;</span></td>
							<td class=""></td>
							<td class=""></td>
						</tr>
						<tr class="">
							<td class=""><span class="dsf dsf_characteristic_stun_value"
									defaultstring="&lowbar;&lowbar;&lowbar;">&lowbar;&lowbar;&lowbar;</span></td>
							<td class="">STUN</td>
							<td class="smaller center editonly"><span class="smaller">BODY+(STR/2)+(CON/2)</span></td>
							<td class="editonly">x1</td>
							<td class="editonly"><span class="dsf dsf_characteristic_stun_points"
									defaultstring="&lowbar;&lowbar;&lowbar;">&lowbar;&lowbar;&lowbar;</span></td>
							<td class=""></td>
							<td class=""><strong>Total Characteristics Points:&nbsp;&nbsp;<span
										class="dsf dsf_characteristic_total_points"
										defaultstring="&lowbar;&lowbar;&lowbar;">&lowbar;&lowbar;&lowbar;</span></strong>
							</td>
						</tr>
					</tbody>
				</table>
				</div>
			</div></div>

			<!-- Maneuvers -->
			<div class="column onethirdwidth">
				<div class="section maneuvers">
				<div class="head">COMBAT MANEUVERS
					<span class="interface trash"></span>
					<span class="interface add addto_maneuvers" title="Add Maneuver"></span>
				</div>
				<div class="labelrow">
					<span class="maneuvername">Maneuver</span>
					<span class="phase">Phase</span>
					<span class="ocv">OCV</span>
					<span class="dcv">DCV</span>
					<span class="effect">Effect</span>
				</div>
				<ul class="group staticlist">
					<li class="item">
						<div class="nohandle">
							<div></div>
						</div><span class="typea maneuvername singlerow">Block </span><span
							class="typed phase singlerow">&half;</span><span class="typed ocv singlerow">0</span><span
							class="typed dcv singlerow">0</span><span class="typed effect singlerow">Block, abort</span>
					</li>
					<li class="item">
						<div class="nohandle">
							<div></div>
						</div><span class="typea maneuvername singlerow">Brace </span><span
							class="typed phase singlerow">0</span><span class="typed ocv singlerow">2</span><span
							class="typed dcv singlerow">&half;</span><span class="typed effect singlerow"> +2 vs. Range
							Mod.</span>
					</li>
					<li class="item">
						<div class="nohandle">
							<div></div>
						</div><span class="typea maneuvername singlerow">Disarm </span><span
							class="typed phase singlerow">&half;</span><span class="typed ocv singlerow">-2</span><span
							class="typed dcv singlerow">0</span><span class="typed effect singlerow">Can disarm</span>
					</li>
					<li class="item">
						<div class="nohandle">
							<div></div>
						</div><span class="typea maneuvername singlerow">Dodge </span><span
							class="typed phase singlerow">&half;</span><span class="typed ocv singlerow">
							&mdash;</span><span class="typed dcv singlerow">3</span><span
							class="typed effect singlerow">Abort, vs. all attacks</span>
					</li>
					<li class="item">
						<div class="nohandle">
							<div></div>
						</div><span class="typea maneuvername singlerow">Grab </span><span
							class="typed phase singlerow">&half;</span><span class="typed ocv singlerow">-1</span><span
							class="typed dcv singlerow">-2</span><span class="typed effect singlerow">Grab two
							limbs</span>
					</li>
					<li class="item">
						<div class="nohandle">
							<div></div>
						</div><span class="typea maneuvername singlerow">Grab By </span><span
							class="typed phase singlerow">&half;</span><span class="typed ocv singlerow">-3</span><span
							class="typed dcv singlerow">-4</span><span class="typed effect singlerow">Move and
							Grab</span>
					</li>
					<li class="item">
						<div class="nohandle">
							<div></div>
						</div><span class="typea maneuvername singlerow">Haymaker </span><span
							class="typed phase singlerow">&half;</span><span class="typed ocv singlerow">0</span><span
							class="typed dcv singlerow">-5</span><span class="typed effect singlerow">+4DC</span>
					</li>
					<li class="item">
						<div class="nohandle">
							<div></div>
						</div><span class="typea maneuvername singlerow">Move By </span><span
							class="typed phase singlerow">&half;</span><span class="typed ocv singlerow">-2</span><span
							class="typed dcv singlerow">-2</span><span class="typed effect singlerow">STR/2 + v/5</span>
					</li>
					<li class="item">
						<div class="nohandle">
							<div></div>
						</div><span class="typea maneuvername singlerow">Move Through </span><span
							class="typed phase singlerow">&half;</span><span class="typed ocv singlerow"> -v/5
						</span><span class="typed dcv singlerow">-3</span><span class="typed effect singlerow">STR +
							v/3</span>
					</li>
					<li class="item">
						<div class="nohandle">
							<div></div>
						</div><span class="typea maneuvername singlerow">Set</span><span
							class="typed phase singlerow">1</span><span class="typed ocv singlerow">1</span><span
							class="typed dcv singlerow">0</span><span class="typed effect singlerow">Ranged attacks
							only</span>
					</li>
					<li class="item">
						<div class="nohandle">
							<div></div>
						</div><span class="typea maneuvername singlerow">Strike </span><span
							class="typed phase singlerow">&half;</span><span class="typed ocv singlerow">0</span><span
							class="typed dcv singlerow">0</span><span class="typed effect singlerow">STR or
							weapon</span>
					</li>
				</ul><hr class="dst ds_hero_system_5_revised">
				<ul class="group list list_maneuvers">
					<li class="proto item">
						<div class="handle">
							<div></div>
						</div>
						<span class="edit dslf typea dslf_maneuvername maneuvername readonly hidden singlerow dropdown"
							defaultstring="Maneuver Name">
							<select name="maneuvername">
								<option value="" disabled selected>--Select your option--</option>
							<!-- <optgroup label="Optional Maneuvers"> -->
								<option>Blazing Away</option>
								<option>Club Weapon</option>
								<option>Cover</option>
								<option>Dive For Cover</option>
								<option>Hipshot</option>
								<option>Hurry</option>
								<option>Pulling A Punch</option>
								<option>Rapid Fire</option>
								<option>Roll With A Punch</option>
								<option>Snap Shot</option>
								<option>Suppression Fire</option>
								<option>Sweep</option>
								<!-- </optgroup><optgroup label="Hand-To-Hand Martial Maneuver"> -->
								<option>Grappling Throw</option>
								<option>Martial Throw</option>
								<option>Passing Throw</option>
								<option>Joint Lock/Throw</option>
								<option>Takedown</option>
								<option>Legsweep</option>
								<option>Sacrifice Throw</option>
								<option>Choke Hold</option>
								<option>Flying Grab</option>
								<option>Killing Strike</option>
								<option>Killing Throw</option>
								<option>Offensive Strike</option>
								<option>Martial Disarm</option>
								<option>Martial Flash</option>
								<option>Martial Grab</option>
								<option>Nerve Strike</option>
								<option>Passing Disarm</option>
								<option>Reversal</option>
								<option>Charge</option>
								<option>Crush</option>
								<option>Disarming Throw</option>
								<option>Flying Tackle</option>
								<option>Martial Escape</option>
								<option>Martial Strike</option>
								<option>Root</option>
								<option>Shove</option>
								<option>Takeaway</option>
								<option>Basic Strike</option>
								<option>Defensive Block</option>
								<option>Defensive Strike</option>
								<option>Defensive Throw</option>
								<option>Grappling Block</option>
								<option>Passing Strike</option>
								<option>Sacrifice Strike</option>
								<option>Weapon Bind</option>
								<option>Counterstrike</option>
								<option>Fast Strike</option>
								<option>Martial Block</option>
								<option>Sacrifice Disarm</option>
								<option>Sacrifice Lunge</option>
								<option>Flying Dodge</option>
								<option>Martial Dodge</option>
								<!-- </optgroup><optgroup label="Ranged Martial Maneuver"> -->
								<option>Basic Shot</option>
								<option>Defensive Shot</option>
								<option>Distance Shot</option>
								<option>Far Shot</option>
								<option>Offensive Ranged Disarm</option>
								<option>Offensive Shot</option>
								<option>Offensive Trip</option>
								<option>Quick Shot</option>
								<option>Ranged Disarm</option>
								<option>Trip</option>
								<!-- </optgroup> -->
						  </select></span>
						<!-- <span class="edit dslf typea dslf_maneuvername maneuvername singlerow"
							defaultstring="Maneuver Name">Maneuver Name</span> -->
							
						<span class="edit dslf typed dslf_phase phase singlerow" defaultstring="Phase">Phase</span>
						<span class="edit dslf typed dslf_ocv ocv singlerow" defaultstring="OCV">OCV</span>
						<span class="edit dslf typed dslf_dcv dcv singlerow" defaultstring="DCV">DCV</span>
						<span class="edit dslf typed dslf_effect effect singlerow" defaultstring="Effect">Effect</span>
					</li>
					<!-- <span
						class="oldfields hidden">[{"name":"attack_weapon","speed":"attack_speed","accuracy":"attack_accuracy","damage":"attack_damage","defense":"attack_defense","rate":"attack_rate","range":"attack_range","tags":"attack_tags"}]</span> -->
					<span class="dsf dsf_maneuvers readonly hidden"></span>
				</ul>
			</div></div>

			<!-- Equipment -->
			<div class="section">
				<div class="head">EQUIPMENT
					<span class="interface trash"></span>
					<span class="interface add addto_combat" title="Add Item"></span>
					<span class="interface balance balance_combat"></span>
					<span
						class="interface readonly check dsf dsf_combat_autobalance autobalance autobalance_combat">1</span>
				</div>
				<ul class="group list list_combat threecolumn">
					<div class="column colspace"></div>
					<div class="column colspace"></div>
					<div class="column"></div>
					<li class="proto item">
						<div class="handle">
							<div></div>
						</div>
						<span class="edit dslf dslf_name fullcolumn singlerow" defaultstring="Item Name">Item
							Name</span>
						<span class="tip dslf dslf_tip"></span>
					</li>
					<!-- <span class="oldfields hidden">[{"name":"combat_name","tip":"combat_tootip"}]</span> -->
					<span class="dsf dsf_combat readonly hidden"></span>
				</ul>
			</div>

			<!-- Defenses -->
			<div class="section halfwidth colspace">
				<div class="head">DEFENSES</div>
				<div class="group">
					<div class="row">Soak: <span class="dsf dsf_soak right singlerow" defaultstring="0B / 0L / 0A">0B /
							0L / 0A</span></div>
					<div class="row">Hardness: <span class="dsf dsf_hardness right singlerow"
							defaultstring="0B / 0L / 0A">0B / 0L / 0A</span></div>
					<div class="row">Physical DVs: <span class="dsf dsf_dvs right singlerow"
							defaultstring="0 Dodge / 0 Parry">0 Dodge / 0 Parry</span></div>
					<div class="row">Mental DVs: <span class="dsf dsf_mdvs right singlerow"
							defaultstring="0 Dodge / 0 Parry">0 Dodge / 0 Parry</span></div>
				</div>
			</div>

			<!-- Health -->
			<div class="section halfwidth">
				<div class="head">HEALTH</div>
				<div class="group">
					<div class="row">-0 Levels<span class="readonly pips pipsRange_10 dsf dsf_0health"></span></div>
					<div class="row">-1 Levels<span class="readonly pips pipsRange_10 dsf dsf_1health"></span></div>
					<div class="row">-2 Levels<span class="readonly pips pipsRange_10 dsf dsf_2health"></span></div>
					<div class="row">-4 Levels<span class="readonly pips pipsRange_10 dsf dsf_4health"></span></div>
				</div>
			</div>

			<!-- Attacks -->
			<div class="section attacks">
				<div class="head">ATTACKS
					<span class="interface trash"></span>
					<span class="interface add addto_attacks" title="Add Attack"></span>
				</div>
				<div class="labelrow">
					<span class="weapon">Attack</span>
					<span class="speed">Speed</span>
					<span class="accuracy">Acc</span>
					<span class="damage">Damage</span>
					<span class="defense">Def</span>
					<span class="rate">Rate</span>
					<span class="range">Range</span>
					<span class="tags">Tags</span>
				</div>
				<ul class="group list list_attacks">
					<li class="proto item">
						<div class="handle">
							<div></div>
						</div>
						<span class="edit dslf typea dslf_name weapon singlerow" defaultstring="Attack Name">Attack
							Name</span>
						<span class="edit dslf typed dslf_speed speed singlerow" defaultstring="Speed">Speed</span>
						<span class="edit dslf typed dslf_accuracy accuracy singlerow" defaultstring="Acc">Acc</span>
						<span class="edit dslf typed dslf_damage damage singlerow" defaultstring="Damage">Damage</span>
						<span class="edit dslf typed dslf_defense defense singlerow" defaultstring="Def">Def</span>
						<span class="edit dslf typed dslf_rate rate singlerow" defaultstring="Rate">Rate</span>
						<span class="edit dslf typed dslf_range range singlerow" defaultstring="Range">Range</span>
						<span class="edit dslf typed dslf_tags tags singlerow" defaultstring="Tags">Tags</span>
					</li>
					<!-- <span
						class="oldfields hidden">[{"name":"attack_weapon","speed":"attack_speed","accuracy":"attack_accuracy","damage":"attack_damage","defense":"attack_defense","rate":"attack_rate","range":"attack_range","tags":"attack_tags"}]</span> -->
					<span class="dsf dsf_attacks readonly hidden"></span>
				</ul>
			</div>

		</div>

		<div class="page page_gem active">

			<span class="column halfwidth colspace">

				<!-- Attributes -->
				<div class="section halfwidth">
					<div class="head">ATTRIBUTES</div>
					<div class="group">
						<div class="row">Strength<span class="readonly pips pipsRange_10 dsf dsf_strength"></span></div>
						<div class="row">Dexterity<span class="readonly pips pipsRange_10 dsf dsf_dexterity"></span>
						</div>
						<div class="row">Stamina<span class="readonly pips pipsRange_10 dsf dsf_stamina"></span></div>
					</div>
					<div class="group">
						<div class="row">Charisma<span class="readonly pips pipsRange_10 dsf dsf_charisma"></span></div>
						<div class="row">Manipulation<span
								class="readonly pips pipsRange_10 dsf dsf_manipulation"></span></div>
						<div class="row">Appearance<span class="readonly pips pipsRange_10 dsf dsf_appearance"></span>
						</div>
					</div>
					<div class="group">
						<div class="row">Perception<span class="readonly pips pipsRange_10 dsf dsf_perception"></span>
						</div>
						<div class="row">Intelligence<span
								class="readonly pips pipsRange_10 dsf dsf_intelligence"></span></div>
						<div class="row">Wits<span class="readonly pips pipsRange_10 dsf dsf_wits"></span></div>
					</div>
				</div>

				<!-- Abilities -->
				<div class="section halfwidth">
					<div class="head">ABILITIES</div>
					<div class="group">
						<img src="https://chainsawxiv.github.io/DST/sheets/chainsawxiv_exalted/images/dawn.png"
							class="casteIcon" />
						<div class="row"><span class="readonly check dsf dsf_archery_favored"></span>Archery<span
								class="readonly pips pipsRange_10 dsf dsf_archery"></span></div>
						<div class="row"><span class="readonly check dsf dsf_martial_arts_favored"></span>Martial
							Arts<span class="readonly pips pipsRange_10 dsf dsf_martial_arts"></span></div>
						<div class="row"><span class="readonly check dsf dsf_melee_favored"></span>Melee<span
								class="readonly pips pipsRange_10 dsf dsf_melee"></span></div>
						<div class="row"><span class="readonly check dsf dsf_thrown_favored"></span>Thrown<span
								class="readonly pips pipsRange_10 dsf dsf_thrown"></span></div>
						<div class="row"><span class="readonly check dsf dsf_war_favored"></span>War<span
								class="readonly pips pipsRange_10 dsf dsf_war"></span></div>
					</div>
					<div class="group">
						<img src="https://chainsawxiv.github.io/DST/sheets/chainsawxiv_exalted/images/zenith.png"
							class="casteIcon" />
						<div class="row"><span class="readonly check dsf dsf_integrity_favored"></span>Integrity<span
								class="readonly pips pipsRange_10 dsf dsf_integrity"></span></div>
						<div class="row"><span
								class="readonly check dsf dsf_performance_favored"></span>Performance<span
								class="readonly pips pipsRange_10 dsf dsf_performance"></span></div>
						<div class="row"><span class="readonly check dsf dsf_presence_favored"></span>Presence<span
								class="readonly pips pipsRange_10 dsf dsf_presence"></span></div>
						<div class="row"><span class="readonly check dsf dsf_resistance_favored"></span>Resistance<span
								class="readonly pips pipsRange_10 dsf dsf_resistance"></span></div>
						<div class="row"><span class="readonly check dsf dsf_survival_favored"></span>Survival<span
								class="readonly pips pipsRange_10 dsf dsf_survival"></span></div>
					</div>
					<div class="group">
						<img src="https://chainsawxiv.github.io/DST/sheets/chainsawxiv_exalted/images/twilight.png"
							class="casteIcon" />
						<div class="row"><span class="readonly check dsf dsf_craft_favored"></span>Craft<span
								class="readonly pips pipsRange_10 dsf dsf_craft"></span></div>
						<div class="row"><span
								class="readonly check dsf dsf_investigation_favored"></span>Investigation<span
								class="readonly pips pipsRange_10 dsf dsf_investigation"></span></div>
						<div class="row"><span class="readonly check dsf dsf_lore_favored"></span>Lore<span
								class="readonly pips pipsRange_10 dsf dsf_lore"></span></div>
						<div class="row"><span class="readonly check dsf dsf_medicine_favored"></span>Medicine<span
								class="readonly pips pipsRange_10 dsf dsf_medicine"></span></div>
						<div class="row"><span class="readonly check dsf dsf_occult_favored"></span>Occult<span
								class="readonly pips pipsRange_10 dsf dsf_occult"></span></div>
					</div>
					<div class="group">
						<img src="https://chainsawxiv.github.io/DST/sheets/chainsawxiv_exalted/images/night.png"
							class="casteIcon" />
						<div class="row"><span class="readonly check dsf dsf_athletics_favored"></span>Athletics<span
								class="readonly pips pipsRange_10 dsf dsf_athletics"></span></div>
						<div class="row"><span class="readonly check dsf dsf_awareness_favored"></span>Awareness<span
								class="readonly pips pipsRange_10 dsf dsf_awareness"></span></div>
						<div class="row"><span class="readonly check dsf dsf_dodge_favored"></span>Dodge<span
								class="readonly pips pipsRange_10 dsf dsf_dodge"></span></div>
						<div class="row"><span class="readonly check dsf dsf_larceny_favored"></span>Larceny<span
								class="readonly pips pipsRange_10 dsf dsf_larceny"></span></div>
						<div class="row"><span class="readonly check dsf dsf_stealth_favored"></span>Stealth<span
								class="readonly pips pipsRange_10 dsf dsf_stealth"></span></div>
					</div>
					<div class="group">
						<img src="https://chainsawxiv.github.io/DST/sheets/chainsawxiv_exalted/images/eclipse.png"
							class="casteIcon" />
						<div class="row"><span
								class="readonly check dsf dsf_bureaucracy_favored"></span>Bureaucracy<span
								class="readonly pips pipsRange_10 dsf dsf_bureaucracy"></span></div>
						<div class="row"><span
								class="readonly check dsf dsf_linguistics_favored"></span>Linguistics<span
								class="readonly pips pipsRange_10 dsf dsf_linguistics"></span></div>
						<div class="row"><span class="readonly check dsf dsf_ride_favored"></span>Ride<span
								class="readonly pips pipsRange_10 dsf dsf_ride"></span></div>
						<div class="row"><span class="readonly check dsf dsf_sail_favored"></span>Sail<span
								class="readonly pips pipsRange_10 dsf dsf_sail"></span></div>
						<div class="row"><span class="readonly check dsf dsf_socialize_favored"></span>Socialize<span
								class="readonly pips pipsRange_10 dsf dsf_socialize"></span></div>
					</div>
				</div>

			</span>

			<span class="column halfwidth">

				<!-- Essence -->
				<div class="section halfwidth">
					<div class="head">ESSENCE</div>
					<div class="group">
						<div class="row">Essence<span class="readonly pips pipsRange_10 dsf dsf_essence"></span></div>
						<div class="row">Willpower<span class="readonly pips pipsRange_10 dsf dsf_willpower"></span>
						</div>
						<div class="row">Personal Essence: <span class="dsf dsf_personal_pool right singlerow"
								defaultstring="0m (0m Committed)">0m (0m Committed)</span></div>
						<div class="row">Peripheral Essence: <span class="dsf dsf_peripheral_pool right singlerow"
								defaultstring="0m (0m Committed)">0m (0m Committed)</span></div>
					</div>
				</div>

				<!-- Virtues -->
				<div class="section halfwidth">
					<div class="head">VIRTUES</div>
					<div class="group">
						<div class="row">Compassion<span class="readonly pips pipsRange_5 dsf dsf_compassion"></span>
						</div>
						<div class="row">Conviction<span class="readonly pips pipsRange_5 dsf dsf_conviction"></span>
						</div>
						<div class="row">Temperance<span class="readonly pips pipsRange_5 dsf dsf_temperance"></span>
						</div>
						<div class="row">Valor<span class="readonly pips pipsRange_5 dsf dsf_valor"></span></div>
					</div>
				</div>

				<!-- Mutations -->
				<div class="section halfwidth">
					<div class="head">MERITS &amp; FLAWS
						<span class="interface trash"></span>
						<span class="interface add addto_mutations" title="Add Merit or Flaw"></span>
					</div>
					<ul class="group list list_mutations">
						<li class="proto item">
							<div class="handle">
								<div></div>
							</div>
							<span class="edit dslf dslf_mutation fullcolumn singlerow"
								defaultstring="Merit or Flaw">Merit or Flaw</span>
							<span class="tip dslf dslf_tip"></span>
						</li>
						<!-- <span
							class="oldfields hidden">[{"mutation":"merit","tip":"merit_tip"},{"mutation":"flaw","tip":"flaw_tip"}]</span> -->
						<span class="dsf dsf_mutations readonly hidden"></span>
					</ul>
				</div>

				<!-- Languages -->
				<div class="section halfwidth">
					<div class="head">LANGUAGES
						<span class="interface trash"></span>
						<span class="interface add addto_languages" title="Add Language"></span>
					</div>
					<ul class="group list list_languages">
						<li class="proto item">
							<div class="handle">
								<div></div>
							</div>
							<span class="edit dslf dslf_name fullcolumn singlerow"
								defaultstring="Language">Language</span>
						</li>
						<!-- <span class="oldfields hidden">[{"name":"language"}]</span> -->
						<span class="dsf dsf_languages readonly hidden"></span>
					</ul>
				</div>

				<!-- Specialties -->
				<div class="section halfwidth">
					<div class="head">SPECIALTIES
						<span class="interface trash"></span>
						<span class="interface add addto_specialties" title="Add Specialty"></span>
					</div>
					<ul class="group list list_specialties">
						<li class="proto item">
							<div class="handle">
								<div></div>
							</div>
							<span class="edit dslf dslf_name pips3label singlerow"
								defaultstring="Specialty">Specialty</span>
							<span class="pips pipsRange_3 dslf readonly dslf_rating">1</span>
						</li>
						<!-- <span class="oldfields hidden">[{"name":"specialty_type","rating":"specialty_value"}]</span> -->
						<span class="dsf dsf_specialties readonly hidden"></span>
					</ul>
				</div>

				<!-- Crafts -->
				<div class="section halfwidth">
					<div class="head">CRAFTS
						<span class="interface trash"></span>
						<span class="interface add addto_crafts" title="Add Craft"></span>
					</div>
					<ul class="group list list_crafts">
						<li class="proto item">
							<div class="handle">
								<div></div>
							</div>
							<span class="edit dslf dslf_name pips10label singlerow" defaultstring="Craft">Craft</span>
							<span class="pips pipsRange_10 dslf readonly dslf_rating">1</span>
						</li>
						<!-- <span class="oldfields hidden">[{"name":"craft_type","rating":"craft_value"}]</span> -->
						<span class="dsf dsf_crafts readonly hidden"></span>
					</ul>
				</div>

			</span>

		</div>

		<div class="page page_star active">

			<!-- Charms -->
			<div class="section">
				<div class="head">CHARMS
					<span class="interface trash"></span>
					<span class="interface add addto_charms" title="Add Charm"></span>
					<span class="interface balance balance_charms"></span>
					<span
						class="interface readonly check dsf dsf_charms_autobalance autobalance autobalance_charms">1</span>
				</div>
				<ul class="group list list_charms twocolumn">
					<div class="column colspace"></div>
					<div class="column"></div>
					<li class="proto item">
						<div class="handle">
							<div></div>
						</div>
						<span class="edit dslf dslf_name fullcolumn singlerow" defaultstring="Charm Name">Charm
							Name</span>
						<span class="tip dslf dslf_tip"></span>
					</li>
					<!-- <span class="oldfields hidden">[{"name":"charm_name","tip":"charm_tootip"}]</span> -->
					<span class="dsf dsf_charms readonly hidden"></span>
				</ul>
			</div>

			<!-- Spells -->
			<div class="section">
				<div class="head">SPELLS
					<span class="interface trash"></span>
					<span class="interface add addto_spells" title="Add Spell"></span>
					<span class="interface balance balance_spells"></span>
					<span
						class="interface readonly check dsf dsf_spells_autobalance autobalance autobalance_spells">1</span>
				</div>
				<ul class="group list list_spells threecolumn">
					<div class="column colspace"></div>
					<div class="column colspace"></div>
					<div class="column"></div>
					<li class="proto item">
						<div class="handle">
							<div></div>
						</div>
						<span class="edit dslf dslf_name fullcolumn singlerow" defaultstring="Spell Name">Spell
							Name</span>
						<span class="tip dslf dslf_tip"></span>
					</li>
					<!-- <span class="oldfields hidden">[{"name":"sorcery","tip":"sorcery_tootip"}]</span> -->
					<span class="dsf dsf_spells readonly hidden"></span>
				</ul>
			</div>

			<!-- Combos -->
			<div class="section">
				<div class="head">COMBOS
					<span class="interface trash"></span>
					<span class="interface add addto_combos" title="Add Combo"></span>
				</div>
				<ul class="group list list_combos">
					<li class="proto item">
						<div class="handle">
							<div></div>
						</div>
						<span class="edit dslf dslf_name fullwidth singlerow" defaultstring="Combo Name">Combo
							Name</span>
						<span class="tip dslf dslf_tip"></span>
					</li>
					<!-- <span class="oldfields hidden">[{"name":"combo_type","tip":"combo_tooltip"}]</span> -->
					<span class="dsf dsf_combos readonly hidden"></span>
				</ul>
			</div>

		</div>


		<div class="page page_biography active">

			<!-- Biography -->
			<div class="section">
				<div class="head">BIOGRAPHY</div>
				<div class="group">
					<div class="portraitholder">
						<img alt=""
							src="https://chainsawxiv.github.io/DST/sheets/chainsawxiv_exalted/images/brass-corner-top-left.png"
							class="topleft" />
						<img alt=""
							src="https://chainsawxiv.github.io/DST/sheets/chainsawxiv_exalted/images/brass-corner-top-right.png"
							class="topright" />
						<img alt=""
							src="https://chainsawxiv.github.io/DST/sheets/chainsawxiv_exalted/images/brass-corner-bottom-left.png"
							class="bottomleft" />
						<img alt=""
							src="https://chainsawxiv.github.io/DST/sheets/chainsawxiv_exalted/images/brass-corner-bottom-right.png"
							class="bottomright" />
						<span class="portrait readonly dsf dsf_avatar_image">.</span>
					</div>
					<span class="dsf dsf_bio fullwidth readonly">Edit Biography below...</span>
				</div>
			</div>

			<!-- Appearance -->
			<div class="section">
				<div class="head">APPEARANCE</div>
				<div class="group">
					<span class="dsf dsf_desc fullwidth" defaultstring="Character appearance...">Character
						appearance...</span>
				</div>
			</div>

			<!-- Virtue Flaw -->
			<div class="section">
				<div class="head">VIRTUE FLAW</div>
				<div class="group">
					<span class="dsf dsf_virtue_flaw fullwidth" defaultstring="Virtue flaw description...">Virtue flaw
						description...</span>
				</div>
			</div>

			<!-- Motivation -->
			<div class="section">
				<div class="head">MOTIVATION</div>
				<div class="group">
					<span class="dsf dsf_motivation fullwidth"></span>
				</div>
			</div>

			<!-- Intimacies -->
			<div class="section">
				<div class="head">INTIMACIES
					<span class="interface trash"></span>
					<span class="interface add addto_intimacies" title="Add Intimacy"></span>
				</div>
				<ul class="group list list_intimacies">
					<li class="proto item">
						<div class="handle">
							<div></div>
						</div>
						<span class="edit dslf dslf_name fullwidth singlerow" defaultstring="Intimacy">Intimacy</span>
					</li>
					<!-- <span class="oldfields hidden">[{"name":"intimacy"}]</span> -->
					<span class="dsf dsf_intimacies readonly hidden"></span>
				</ul>
			</div>

		</div>

		<div class="page_foot">
			<div class="head"></div>
			<span class="ifpc">Character By <span class="dsf dsf_player readonly typev singlerow"
					style="text-align:right;"></span> &#8226; </span><span class="readonly dsf dsf_campaign">Campaign
				Name</span>
		</div>
	</div>

</div>

CSS

/* Font Imports */

@import url(https://fonts.googleapis.com/css?family=Cinzel:400,700);
@import url(https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap);

/* Component Includes */

/* @import url(https://chainsawxiv.github.io/DST/common/css/csx_exalted_common.css); */

/* --------------------------------------------------------------------------------------------------------- */
/* -----vvvvvvvvvvvvvvvvvvvv------ common/css/csx_exalted_common.css --------------vvvvvvvvvvvvvvvvvvvv----- */
/* --------------------------------------------------------------------------------------------------------- */

.csx hr.dst{
	height:1px;
	border-width:0;
	color:#554220;
	background-color:#554220;
	padding-top: 0px;
	padding-bottom: 0px;
	margin-top: 0px;
	margin-bottom: 2px;
}
/* Checks Interface */

.csx .check{
	position:relative;
	top:1px;
	margin:0px 3px 0px 0px;
}

.csx .check .checkMark{
	display:inline-block;
	width:12px;
	height:12px;
}

.editable .csx .checkMark{
	cursor:pointer;
}

.csx .check .checkBorder{
	background-image:url('https://chainsawxiv.github.io/DST/common/images/check_border.svg');
	display:inline-block;
	height:12px;
	width:12px;
}

.csx .check .checkOff{
	background-image:url('../images/check_off.png');
	background-size:10px;
	background-position:1px 2px;
	background-repeat:no-repeat;
}

.editable .csx .check .checkOff:hover{
	background-image:url('../images/check_off_hover.png');
	background-size:10px;
	background-position:1px 2px;
	background-repeat:no-repeat;
}

.csx .check .checkOn{
	background-image:url('../images/check_on.png');
	background-size:10px;
	background-position:1px 2px;
	background-repeat:no-repeat;
}

.editable .csx .check .checkOn:hover{
	background-image:url('../images/check_on_hover.png');
	background-size:10px;
	background-position:1px 2px;
	background-repeat:no-repeat;
}

/* Edit Fields */

.csx .dsf,
.csx .staticlist,
.csx .edit{
	position:relative;
	display:inline-block;
	cursor:default;
}

.csx .dsf p,
.csx .edit p{
	margin:0px;
	line-height:inherit;
}

.csx .dsf:not(.readonly),
.csx .edit:not(.readonly){

}

.editable .csx .dsf,
.editable .csx .edit{
	cursor:text;
}

.editable .csx .dsf:hover:not(.readonly),
.editable .csx .edit:hover:not(.readonly){
	background-color:rgba(0,0,0,0.02);
}

.editable .csx .dsf:focus,
.editable .csx .edit:focus,
.editable .csx .dsf:focus:hover,
.editable .csx .edit:focus:hover{
	background-color:rgba(0,0,0,0.05);
}

.csx .dsf ul,
.csx .staticlist ul,
.csx .edit ul{
	margin:0px;
	padding: 0px 0px 0px 20px;
	list-style: url('https://chainsawxiv.github.io/DST/common/images/bullet.png');
}

.csx .dsf ul li,
.csx .staticlist ul li,
.csx .edit ul li{
	margin:0px;
	display:list-item;
}

/* Format Bar */

.csx .formatBar{
	background-image:
		url('https://chainsawxiv.github.io/DST/common/images/fb_back_top.png'),
		url('https://chainsawxiv.github.io/DST/common/images/fb_back_main.png'),
		url('https://chainsawxiv.github.io/DST/common/images/fb_back_bottom.png');
	background-position:bottom center, center 1px, top center;
	background-repeat:no-repeat, no-repeat, no-repeat;
	position:absolute;
	display:none;
	padding-bottom:7px;
	padding-top:3px;
	margin-bottom:4px;
	width:140px;
	text-align:center;
	font-size:12px;
	z-index:10;	
	height:28px;
}

.csx .formatBar button{
	display:inline-block;
	height:28px;
	width:28px;
	border:none;
}

.csx .formatBar .boldButton{
	background-image:url('https://chainsawxiv.github.io/DST/common/images/bold.png');
}
.csx .formatBar .boldButton:hover{
	background-image:url('https://chainsawxiv.github.io/DST/common/images/bold_hover.png');
}
.csx .formatBar .boldButton:active{
	background-image:url('https://chainsawxiv.github.io/DST/common/images/bold_active.png');
}

.csx .formatBar .italicButton{
	background-image:url('https://chainsawxiv.github.io/DST/common/images/italic.png');
}
.csx .formatBar .italicButton:hover{
	background-image:url('https://chainsawxiv.github.io/DST/common/images/italic_hover.png');
}
.csx .formatBar .italicButton:active{
	background-image:url('https://chainsawxiv.github.io/DST/common/images/italic_active.png');
}

.csx .formatBar .underlineButton{
	background-image:url('https://chainsawxiv.github.io/DST/common/images/underline.png');
}
.csx .formatBar .underlineButton:hover{
	background-image:url('https://chainsawxiv.github.io/DST/common/images/underline_hover.png');
}
.csx .formatBar .underlineButton:active{
	background-image:url('https://chainsawxiv.github.io/DST/common/images/underline_active.png');
}

.csx .formatBar .indentButton{
	background-image:url('https://chainsawxiv.github.io/DST/common/images/indent.png');
}
.csx .formatBar .indentButton:hover{
	background-image:url('https://chainsawxiv.github.io/DST/common/images/indent_hover.png');
}
.csx .formatBar .indentButton:active{
	background-image:url('https://chainsawxiv.github.io/DST/common/images/indent_active.png');
}

/* List Interface */

.csx .add,
.csx .trash,
.csx .balance,
.csx .autobalance{
	display:none;
	float:right;
	height:15px;
	width:15px;
	margin-bottom:0px;
	cursor:default;
	background-size:contain;
}

.csx .autobalance{
	position:relative;
	top:-1px;
	margin-right:0px;
}

.csx .trash{
	background-image:url('https://chainsawxiv.github.io/DST/common/images/trash.png');
}

.csx .trash.active{
	background-image:url('https://chainsawxiv.github.io/DST/common/images/trash_active.png');
}

.csx .trash.over{
	background-image:url('https://chainsawxiv.github.io/DST/common/images/trash_hover.png');
}

.csx .add{
	background-image:url('https://chainsawxiv.github.io/DST/common/images/add.png');
	cursor:pointer;
}

.csx .add:hover{
	background-image:url('https://chainsawxiv.github.io/DST/common/images/add_hover.png');
}

.csx .balance{
	background-image:url('https://chainsawxiv.github.io/DST/common/images/balance.png');
	cursor:pointer;
}

.csx .balance:hover{
	background-image:url('https://chainsawxiv.github.io/DST/common/images/balance_hover.png');
}

.csx .list,
.csx .staticlist{
	padding:0px;
	line-height:inherit;
}

.csx .staticlist li.item,
.csx .list li.item{
	display:inline-block;
	width:100%;
	position:relative;
	border-color:red;
	border-radius:2px;
}

.csx .list li.item:nth-of-type(odd),
.csx .staticlist li.item:nth-of-type(odd){
	background-color:rgba(0,0,0,0.05);
}

.csx .list li.item:nth-of-type(even),
.csx .staticlist li.item:nth-of-type(even){
	background-color:initial;
}

.csx .list .column li.item:nth-of-type(even),
.csx .staticlist .column li.item:nth-of-type(even){
	background-color:rgba(0,0,0,0.05);
}

.csx .list .column li.item:nth-of-type(odd),
.csx .staticlist .column li.item:nth-of-type(odd){
	background-color:initial;
}

.csx .list li.proto{
	display:none;
}

.csx .list li.over-below{
	border-bottom:1px dashed rgb(0,0,0);
}

.csx .list li.over-below:before{
	content:"▶";
	position:absolute;
	left:-10px;
	bottom:-9px;
	z-index:10;
}

.csx .list li.over-below:after{
	content:"◀";
	position:absolute;
	right:-10px;
	bottom:-9px;
	z-index:10;
}

.csx .list li.over-above{
	border-top:1px dashed rgb(0,0,0);
	line-height:16px;
}

.csx .list li.over-above:before{
	content:"▶";
	position:absolute;
	left:-10px;
	top:-8px;
	z-index:10;
}

.csx .list li.over-above:after{
	content:"◀";
	position:absolute;
	right:-10px;
	top:-8px;
	z-index:10;
}

.csx .list li.source{
	background-color:rgba(0,0,0,0.1);
	box-shadow:0px 0px 4px rgba(0,0,0,0.1);
}

.csx .list li .nohandle{
	display:none;
	float: left;
	position: relative;
	top: -1px;
	left: -6px;
	height:18px;
	width:19px;
	margin-right:-5px;
}

.csx .list li .nohandle div{
	background-image:url('https://www.glados.org/obsidian-portal/constellations-of-nut/DST/hero_system_5_revised/images/nograb.png');
	background-position:2px 0px;
	background-repeat:no-repeat;
	height:12px;
	width:13px;
	margin:3px;
}

.csx .list li .handle{
	display:none;
	float: left;
	position: relative;
	top: -1px;
	left: -6px;
	height:18px;
	width:19px;
	margin-right:-5px;
}

.csx .list li .handle div{
	background-image:url('https://chainsawxiv.github.io/DST/common/images/grab.png');
	background-position:2px 0px;
	background-repeat:no-repeat;
	height:12px;
	width:13px;
	margin:3px;
}

.csx .list li .handle div:hover{
	background-image:url('https://chainsawxiv.github.io/DST/common/images/grab_hover.png');
}

.csx .list li .handle img{
	position:absolute;
	top:-1px;
	left:-1px;
	height:13px;
}

.editable .csx .list li .handle,
.editable .csx .add,
.editable .csx .trash,
.editable .csx .balance,
.editable .csx .autobalance{
	display:inline-block;
}

.csx .list .item ul,
.csx .list .item li,
.csx .staticlist .item ul,
.csx .staticlist .item li{
	line-height:inherit;
}

/* Pips Interface */

.csx .pips{
	position:relative;
	z-index:2;
	float:right;
	top:3px;
	height:17px;
	padding:0px 0px 0px 0px;
	margin:0px 0px 0px 2px;
}

.csx .pips.pipsRange_3{
	width:41px;
}

.csx .pips.pipsRange_5{
	width:70px;
}

.csx .pips.pipsRange_10{
	width:142px;
}

.csx .pips .pip{
	position:absolute;
	top:-2px;
	height:15px;
	width:15px;
	display:inline-block;
}

.csx .pipBorder{
	background-image:url('https://chainsawxiv.github.io/DST/common/images/pip_border.svg');
	display:inline-block;
	height:15px;
	width:15px;
}

.csx .pips .pipOff{
	background-image:url('../images/pip_off.png');
}

.editable .csx .pips .pipOff:hover{
	background-image:url('../images/pip_off_hover.png');
}

.csx .pips .pipOn{
	background-image:url('../images/pip_on.png');
}

.editable .csx .pips .pipOn:hover{
	background-image:url('../images/pip_on_hover.png');
}

.csx .pips svg{
	position:absolute;
}

/* Page Tabs */

.csx .tabs{
	position:absolute;
	padding-right:90px;
	top:-37px;
	right:0px;
	z-index:3;
}

.csx .tab{
	display:inline-block;
	/* float:right; */
	height:40px;
	width:46px;
}
.csx .tab:not(.active){
	cursor:pointer;
}

/* .csx .tab.crunch{
	background:
		url('https://chainsawxiv.github.io/DST/common/images/crunch.png') no-repeat 50% 50%,
		url('../images/tab01_inactive.png');
	background-size:
		61% 70%,
		100% 100%;
}
.csx .tab.crunch:not(.active):hover{
	background-image:
		url('https://chainsawxiv.github.io/DST/common/images/crunch_hover.png'),
		url('../images/tab01_inactive.png');
}
.csx .tab.crunch.active{
	background-image:
		url('https://chainsawxiv.github.io/DST/common/images/crunch.png'),
		url('../images/tab01_active.png');
}

.csx .tab.magic{
	background:
		url('https://chainsawxiv.github.io/DST/common/images/magic.png') no-repeat 50% 50%,
		url('../images/tab02_inactive.png');
	background-size:
		61% 70%,
		100% 100%;
}
.csx .tab.magic:not(.active):hover{
	background-image:
		url('https://chainsawxiv.github.io/DST/common/images/magic_hover.png'),
		url('../images/tab02_inactive.png');
}
.csx .tab.magic.active{
	background-image:
		url('https://chainsawxiv.github.io/DST/common/images/magic.png'),
		url('../images/tab02_active.png');
}

.csx .tab.equipment{
	background:
		url('https://chainsawxiv.github.io/DST/common/images/equipment.png') no-repeat 50% 50%,
		url('../images/tab03_inactive.png');
	background-size:
		61% 70%,
		100% 100%;
}
.csx .tab.equipment:not(.active):hover{
	background-image:
		url('https://chainsawxiv.github.io/DST/common/images/equipment_hover.png'),
		url('../images/tab03_inactive.png');
}
.csx .tab.equipment.active{
	background-image:
		url('https://chainsawxiv.github.io/DST/common/images/equipment.png'),
		url('../images/tab03_active.png');
}

.csx .tab.fluff{
	background:
		url('https://chainsawxiv.github.io/DST/common/images/fluff.png') no-repeat 50% 50%,
		url('../images/tab04_inactive.png');
	background-size:
		61% 70%,
		100% 100%;
}
.csx .tab.fluff:not(.active):hover{
	background-image:
		url('https://chainsawxiv.github.io/DST/common/images/fluff_hover.png'),
		url('../images/tab04_inactive.png');
}
.csx .tab.fluff.active{
	background-image:
		url('https://chainsawxiv.github.io/DST/common/images/fluff.png'),
		url('../images/tab04_active.png');
} */

/* Tooltip Interface */

.csx .tip{
	display:none;
}

.csx .highlight{
	background-color:rgba(0,0,0,0.4);
}

.editable .csx .tip{
	display:inline-block;
	/* float:right; */
	cursor: pointer;
	position: relative;
	top:4px;
	height:12px;
	width:12px;
	background:url('https://chainsawxiv.github.io/DST/common/images/tip.png') no-repeat;
	color:transparent;
	overflow:hidden;
	background-size:11px;
	opacity:0.7;
}

.editable .csx .tip:hover{
	background-image:url('https://chainsawxiv.github.io/DST/common/images/tip_hover.png');
}

.csx .tipBox{
	display:none;
	position:absolute;
	z-index:25;
	left:50%;
	top:50%;
}

.csx .tipBox .corner.topLeft{
	background:url('https://chainsawxiv.github.io/DST/sheets/chainsawxiv_exalted/images/brass-corner-top-left.png') top left no-repeat;
	background-size:15px 15px;
	top:-1px;
	left:-1px;
}
.csx .tipBox .corner.topRight{
	background:url('https://chainsawxiv.github.io/DST/sheets/chainsawxiv_exalted/images/brass-corner-top-right.png') top right no-repeat;
	background-size:15px 15px;
	top:-1px;
	right:-1px;
}
.csx .tipBox .corner.bottomLeft{
	background:url('https://chainsawxiv.github.io/DST/sheets/chainsawxiv_exalted/images/brass-corner-bottom-left.png') bottom left no-repeat;
	background-size:15px 15px;
	bottom:-1px;
	left:-1px;
}
.csx .tipBox .corner.bottomRight{
	background:url('https://chainsawxiv.github.io/DST/sheets/chainsawxiv_exalted/images/brass-corner-bottom-right.png') bottom right no-repeat;
	background-size:15px 15px;
	bottom:-1px;
	right:-1px;
}
.csx .tipBox .corner{
	position:absolute;
	height:15px;
	width:15px;
	border-radius:3px;
}

.csx .tipBox .contentBox{
	min-height:100px;
	width:300px;
	
	background:
		url('https://chainsawxiv.github.io/DST/sheets/chainsawxiv_exalted/images/background.jpg') top left no-repeat;
	background-size:
		730px 730px;
	background-color:#e4e5d5;
	
	border-style:solid;
	border-width:1px;
	border-color:#554220;
	
	box-shadow:0px 0px 15px rgba(0,0,0,0.3);
}

.csx .tipBox .contentBox .tipArea,
.csx .tipBox .contentBox .tipArea:hover{
	background-color:rgba(255,255,224,0.7);
	margin:5px;
	width:278px;
	min-height:88px;
	border:1px dotted rgba(0,0,0,0.3);
	border-radius:4px;
	padding:0px 5px 2px 5px;
	font-family:Papyrus;
	/* font-family:'EB Garamond',Sans Serif; */
	font-size: 15px;
	line-height: 18px;
	color:#554220;
}

.csx .tipBox .contentBox .tipArea ul{
	margin:0px;
	padding: 0px 0px 0px 20px;
	list-style: url('../images/bullet.png');
}
.csx .tipBox .contentBox .tipArea ul li{
	margin:0px;
	line-height:18px;
}

/* Sheet Content */

.wrapper.csx{
	position:relative;
	width:730px;
	margin:0px auto;
}

.csx .main{

	position:relative;
	width:708px;
	padding:0px 10px 80px 10px;
	margin:40px 0px 20px 0px;
	min-height: 795px;
	
	background-image:url('https://chainsawxiv.github.io/DST/sheets/chainsawxiv_exalted/images/background.jpg');
	background-position:top left;
	background-repeat:no-repeat;
	background-color:#e4e5d5;
	
	border-style:solid;
	border-width:1px;
	border-color:#554220;

	font-family:Papyrus;
	/* font-family:'Cinzel', palatino, serif; */
	font-size:14px;
	line-height:17px;
	color:#554220;
	
}

.csx .list.twocolumn .column{
	width:343px;
}
.csx .twocolumn li.item{
	width:345px;
}
.csx .threecolumn .column{
	width:223px;
}
.csx .threecolumn li.item{
	width:226px;
}
.csx .list .column.colspace{
	margin-right:12px;
}

.csx .group{
	margin:0px 0px 8px 0px;
	padding:0px 3px 0px 3px;
	position:relative;
}

.csx .section{
	display:inline-block;
	width:100%;
	padding:0px 0px 0px 0px;
	margin:0px 0px 2px 1px;
	min-height:98px;
	font-size: smaller;
}

.csx .halfwidth{
	width:348px;
}

.csx .quarterwidth{
	width:174px;
}

.csx .threequarterwidth{
	width:522px;
}

.csx .onethirdwidth{
	width:292px;
}

.csx .twothirdswidth{
	width: 400px;
}


.csx .column{
	vertical-align:top;
	display:inline-block;
}

.csx .colspace{
	margin-right:6px;
}

.csx .head{
	font-size:14pt;
	font-weight:normal;
	letter-spacing:3px;
	border-bottom:solid 1px #554220;
	margin-bottom:5px;
}

.csx .pagehead{
	text-align:center;
	width:600px;
	margin:22px auto 30px auto;
}

.csx .hidden{
	display:none;
}

.csx .page{
	display:none;
}

.csx .page.active{
	display:block;
}

.csx .page_foot{
	text-align:center;
	width:600px;
	margin:22px 0px 0px 55px;
	padding:0px 0px 30px 0px;
	position:absolute;
	bottom:12px;
}

.csx a{
	text-decoration:none;
	color:#554220;
}

.csx .section a{
	text-decoration:underline;
}

.csx .right{
	float:right;
	text-align:right;
}

.csx .left{
	float:left;
	text-align:left;
}

.csx .center{
	float:center;
	text-align:center;
}

/* Corner Brass */

.csx .corner_top_left{
	position:absolute;
	left:-7px;
	top:-7px;
	z-index:4;
}

.csx .corner_top_right{
	position:absolute;
	right:-7px;
	top:-7px;
	z-index:4;
}

.csx .corner_bottom_left{
	position:absolute;
	left:-7px;
	bottom:-7px;
	z-index:4;
}

.csx .corner_bottom_right{
	position:absolute;
	right:-7px;
	bottom:-7px;
	z-index:4;
}

.csx .brass_bottom{
	position:absolute;
	left:40px;
	bottom:-7px;
	z-index:3;
}

.csx .brass_top{
	position:absolute;
	left:40px;
	top:-7px;
	z-index:3;
}

/* Caste Icons */

.csx .casteIcon{
	position:absolute;
	left:118px;
	top:0px;
	height:85px;
}

/* Portrait */

.csx .portraitholder{
	display:inline-block;
	position:relative;
	/* float:right; */
	padding:0px 0px 0px 0px;
	margin:3px 3px 5px 10px;
	border-style:solid;
	border-width:1px;
	border-color:#554220;
}
.csx .portraitholder .portrait {
    min-height: 150px;
    min-width: 150px;
    background-color: white;
    margin: 0px;
    padding: 0px;
	max-height: 300px;
	max-width: 300px;
}
.csx .portraitholder .topleft{
	position:absolute;
	left:-4px;
	top:-4px;
	width:64px;
	height:64px;
	z-index:4;
}
.csx .portraitholder .topright{
	position:absolute;
	right:-4px;
	top:-4px;
	width:64px;
	height:64px;
	z-index:4;
}
.csx .portraitholder .bottomleft{
	position:absolute;
	left:-4px;
	bottom:-4px;
	width:64px;
	height:64px;
	z-index:4;
}
.csx .portraitholder .bottomright{
	position:absolute;
	right:-4px;
	bottom:-4px;
	width:64px;
	height:64px;
	z-index:4;
}

/* Editable Fields */

.csx .dsf:not(.readonly),
.csx .edit:not(.readonly){
	line-height: 14px;
	padding-bottom: 3px;
}

.csx .dsf.pips10label,
.csx .edit.pips10label{
	width:180px;
}

.csx .dsf.pips5label,
.csx .edit.pips5label{
	width:244px;
}

.csx .dsf.pips3label,
.csx .edit.pips3label{
	width:281px;
}

.csx .dsf.fullcolumn,
.csx .edit.fullcolumn{
	width:312px;
}

.csx .threecolumn .dsf.fullcolumn,
.csx .threecolumn .edit.fullcolumn{
	width:196px;
}

.csx .dsf.fullwidth,
.csx .edit.fullwidth{
	width:704px;
	min-height:50px;
	display:inline-block;
	line-height:17px;
	text-align:justify;
}

.editable .csx .list .dsf.fullwidth,
.editable .csx .list .edit.fullwidth{
	width:684px;
}

.csx .list .dsf.fullwidth,
.csx .list .edit.fullwidth{
	min-height:0px;
	line-height:14px;
}

.csx .dsf.right,
.csx .edit.right{
	max-width:180px;
	min-width:100px;
}

.editable .csx .dsf:hover:not(.readonly),
.editable .csx .edit:hover:not(.readonly){
	color:#957438;
	background-color:rgba(0,0,0,0.02);
}

.editable .csx .dsf:focus,
.editable .csx .edit:focus,
.editable .csx .dsf:focus:hover,
.editable .csx .edit:focus:hover{
	color:#957438;
	background-color:rgba(0,0,0,0.05);
}

/* Attack List */

.csx .attacks .weapon{
	width:193px;
	margin-left:5px;
}

.editable .csx .attacks .weapon{
	width:180px;
	margin-left:0px;
}

.editable .csx .attacks .labelrow .weapon{
	margin-left:16px;
}
.csx .attacks .labelrow span{
	display:inline-block;
	border-bottom:1px solid #A59270;
	line-height:12px;
}
.csx .attacks .speed,
.csx .attacks .accuracy,
.csx .attacks .damage,
.csx .attacks .defense,
.csx .attacks .rate,
.csx .attacks .range,
.csx .attacks .tags{
	display:inline-block;
	width:65px;
	text-align:center;
	margin-left:3px;
}

/* Attack List */

.csx .maneuvers .maneuvername{
	display:inline-block;
	width:70px;
	margin-left:5px;
}

.editable .csx .maneuvers .maneuvername{
	width:57px;
	margin-left:0px;
}

.editable .csx .maneuvers .labelrow .maneuvername{
	margin-left:16px;
}
.csx .maneuvers .labelrow span{
	display:inline-block;
	border-bottom:1px solid #A59270;
	line-height:12px;
}
.csx .maneuvers .phase,
.csx .maneuvers .ocv,
.csx .maneuvers .dcv{
	display:inline-block;
	width:23px;
	text-align:center;
	margin-left:3px;
}

.csx .maneuvers .effect{
	display:inline-block;
	width:115px;
	text-align:left;
	margin-left:3px;
}

.csx .list li.item.highlight,.csx .list .column li.item.highlight{
	background-color:rgba(255,255,255,0.4);
}


/* Misc */

.csx .name{
	display:inline-block;
	font-size:18pt;
	margin:0px 0px 9px 0px;
	width: 600px;
	height:16px;
}

.csx .dsf.dsf_type{
	font-family:Papyrus;
	/* font-family:'Cinzel', palatino, serif; */
	font-size:14px;
	line-height:17px;
}

.csx .dsf.dsf_bio{
    width: auto;
	display:block;
}
.csx .dsf.dsf_bio p{
	margin-top:17px;
}
.csx .dsf.dsf_bio p:first-of-type{
	margin-top:0px;
}

.editable .csx .list_combos .edit.fullwidth{
	width:672px;
}

.csx .check.autobalance .checkMark{
	background-position: 1px 3px;
	position: relative;
	left: 2px;
}

/* --------------------------------------------------------------------------------------------------------- */
/* -----^^^^^^^^^^^^^^^^^^^^^------ common/css/csx_exalted_common.css --------------^^^^^^^^^^^^^^^^^^^^----- */
/* --------------------------------------------------------------------------------------------------------- */

/* Splat Specific: Checks */

div.ds_hero_system_5_revised .check .checkBorder{
	background-image:url('https://chainsawxiv.github.io/DST/common/images/check_border.svg');
}

div.ds_hero_system_5_revised .check .checkOff{
	background-image:url('https://chainsawxiv.github.io/DST/sheets/chainsawxiv_exalted/images/check_off.png');
}

div.ds_hero_system_5_revised.editable .check .checkOff:hover{
	background-image:url('https://chainsawxiv.github.io/DST/sheets/chainsawxiv_exalted/images/check_off_hover.png');
}

div.ds_hero_system_5_revised .check .checkOn{
	background-image:url('https://chainsawxiv.github.io/DST/sheets/chainsawxiv_exalted/images/check_on.png');
}

div.ds_hero_system_5_revised.editable .check .checkOn:hover{
	background-image:url('https://chainsawxiv.github.io/DST/sheets/chainsawxiv_exalted/images/check_on_hover.png');
}

/* Splat Specific: Pips */

div.ds_hero_system_5_revised .pipBorder{
	background-image:url('https://chainsawxiv.github.io/DST/common/images/pip_border.svg');
}

div.ds_hero_system_5_revised .pips .pipOff{
	background-image:url('https://chainsawxiv.github.io/DST/sheets/chainsawxiv_exalted/images/pip_off.png');
}

div.ds_hero_system_5_revised.editable .pips .pipOff:hover{
	background-image:url('https://chainsawxiv.github.io/DST/sheets/chainsawxiv_exalted/images/pip_off_hover.png');
}

div.ds_hero_system_5_revised .pips .pipOn{
	background-image:url('https://chainsawxiv.github.io/DST/sheets/chainsawxiv_exalted/images/pip_on.png');
}

div.ds_hero_system_5_revised.editable .pips .pipOn:hover{
	background-image:url('https://chainsawxiv.github.io/DST/sheets/chainsawxiv_exalted/images/pip_on_hover.png');
}

/* Splat Specific: Tabs */

div.ds_hero_system_5_revised .tab.gem{
	background:
		url('https://www.glados.org/obsidian-portal/constellations-of-nut/DST/hero_system_5_revised/images/gem.png') no-repeat 50% 50%,
		url('https://chainsawxiv.github.io/DST/sheets/chainsawxiv_exalted/images/tab01_inactive.png');
	background-size:
		61% 70%,
		100% 100%;
}
div.ds_hero_system_5_revised .tab.gem:not(.active):hover{
	background-image:
		url('https://www.glados.org/obsidian-portal/constellations-of-nut/DST/hero_system_5_revised/images/gem_hover.png'),
		url('https://chainsawxiv.github.io/DST/sheets/chainsawxiv_exalted/images/tab01_inactive.png');
}
div.ds_hero_system_5_revised .tab.gem.active{
	background-image:
		url('https://www.glados.org/obsidian-portal/constellations-of-nut/DST/hero_system_5_revised/images/gem.png'),
		url('https://chainsawxiv.github.io/DST/sheets/chainsawxiv_exalted/images/tab01_active.png');
}

div.ds_hero_system_5_revised .tab.star{
	background:
		url('https://www.glados.org/obsidian-portal/constellations-of-nut/DST/hero_system_5_revised/images/star.png') no-repeat 50% 50%,
		url('https://chainsawxiv.github.io/DST/sheets/chainsawxiv_exalted/images/tab02_inactive.png');
	background-size:
		61% 70%,
		100% 100%;
}
div.ds_hero_system_5_revised .tab.star:not(.active):hover{
	background-image:
		url('https://www.glados.org/obsidian-portal/constellations-of-nut/DST/hero_system_5_revised/images/star_hover.png'),
		url('https://chainsawxiv.github.io/DST/sheets/chainsawxiv_exalted/images/tab02_inactive.png');
}
div.ds_hero_system_5_revised .tab.star.active{
	background-image:
		url('https://www.glados.org/obsidian-portal/constellations-of-nut/DST/hero_system_5_revised/images/star.png'),
		url('https://chainsawxiv.github.io/DST/sheets/chainsawxiv_exalted/images/tab02_active.png');
}

div.ds_hero_system_5_revised .tab.combat{
	background:
		url('https://www.glados.org/obsidian-portal/constellations-of-nut/DST/hero_system_5_revised/images/combat.png') no-repeat 50% 50%,
		url('https://chainsawxiv.github.io/DST/sheets/chainsawxiv_exalted/images/tab03_inactive.png');
	background-size:
		61% 70%,
		100% 100%;
}
div.ds_hero_system_5_revised .tab.combat:not(.active):hover{
	background-image:
		url('https://www.glados.org/obsidian-portal/constellations-of-nut/DST/hero_system_5_revised/images/combat_hover.png'),
		url('https://chainsawxiv.github.io/DST/sheets/chainsawxiv_exalted/images/tab03_inactive.png');
}
div.ds_hero_system_5_revised .tab.combat.active{
	background-image:
		url('https://www.glados.org/obsidian-portal/constellations-of-nut/DST/hero_system_5_revised/images/combat.png'),
		url('https://chainsawxiv.github.io/DST/sheets/chainsawxiv_exalted/images/tab03_active.png');
}

div.ds_hero_system_5_revised .tab.biography{
	background:
		url('https://www.glados.org/obsidian-portal/constellations-of-nut/DST/hero_system_5_revised/images/biography.png') no-repeat 50% 50%,
		url('https://chainsawxiv.github.io/DST/sheets/chainsawxiv_exalted/images/tab04_inactive.png');
	background-size:
		61% 70%,
		100% 100%;
}
div.ds_hero_system_5_revised .tab.biography:not(.active):hover{
	background-image:
		url('https://www.glados.org/obsidian-portal/constellations-of-nut/DST/hero_system_5_revised/images/biography_hover.png'),
		url('https://chainsawxiv.github.io/DST/sheets/chainsawxiv_exalted/images/tab04_inactive.png');
}
div.ds_hero_system_5_revised .tab.biography.active{
	background-image:
		url('https://www.glados.org/obsidian-portal/constellations-of-nut/DST/hero_system_5_revised/images/biography.png'),
		url('https://chainsawxiv.github.io/DST/sheets/chainsawxiv_exalted/images/tab04_active.png');
}

/* Splat Specific: Tips */

div.ds_hero_system_5_revised .tipBox .corner.topLeft{
	background:url('https://chainsawxiv.github.io/DST/sheets/chainsawxiv_exalted/images/brass-corner-top-left.png') top left no-repeat;
	background-size:15px 15px;
}
div.ds_hero_system_5_revised .tipBox .corner.topRight{
	background:url('https://chainsawxiv.github.io/DST/sheets/chainsawxiv_exalted/images/brass-corner-top-right.png') top right no-repeat;
	background-size:15px 15px;
}
div.ds_hero_system_5_revised .tipBox .corner.bottomLeft{
	background:url('https://chainsawxiv.github.io/DST/sheets/chainsawxiv_exalted/images/brass-corner-bottom-left.png') bottom left no-repeat;
	background-size:15px 15px;
}
div.ds_hero_system_5_revised .tipBox .corner.bottomRight{
	background:url('https://chainsawxiv.github.io/DST/sheets/chainsawxiv_exalted/images/brass-corner-bottom-right.png') bottom right no-repeat;
	background-size:15px 15px;
}

div.ds_hero_system_5_revised .tipBox .contentBox{
	background:
		url('https://chainsawxiv.github.io/DST/sheets/chainsawxiv_exalted/images/background.jpg') top left no-repeat;
	background-size:
		730px 730px;
	background-color:#e4e5d5;
	border-color:#554220;
}

div.ds_hero_system_5_revised .tipBox .contentBox .tipArea,
div.ds_hero_system_5_revised .tipBox .contentBox .tipArea:hover{
	background-color:rgba(255,255,224,0.7);
	border:1px dotted rgba(0,0,0,0.3);
	border-radius:4px;
	/* font-family:'EB Garamond',Sans Serif; */
	font-family:Papyrus;
	color:#554220;
}

/* Splat Specific: Editable */

div.ds_hero_system_5_revised .dsf:not(.readonly),
div.ds_hero_system_5_revised .edit:not(.readonly),
div.ds_hero_system_5_revised .dsf_bio{
	/* font-family:'EB Garamond',Sans Serif; */
	font-family: Papyrus;

}

/* Splat Specific: Sheet */
/* ************************************************************************************************* */
/* ************************************************************************************************* */
/* ************************************** Main Background ****************************************** */
/* ************************************************************************************************* */
/* ************************************************************************************************* */


div.ds_hero_system_5_revised .main{
	/* background-image:url('https://www.glados.org/pacific-rim/DST/hero_system_5_revised/Image6.jpg'); */
	 /* background-image:url('https://www.glados.org/pacific-rim/DST/hero_system_5_revised/Image20.jpg');  */
	 background-image:url('https://www.glados.org/obsidian-portal/constellations-of-nut/DST/hero_system_5_revised/images/Papyrus.png'); 
	/* background-image:url('https://www.glados.org/pacific-rim/DST/hero_system_5_revised/the_egyptian_god_ra_by_oldlegends_dgr3415-pre.jpg'); */
	object-fit: cover;
	background-position:top left;
	background-repeat:no-repeat;
	background-size: cover;
	/* background-size: 100% auto; */
	/* background-color:#e4e5d5;*/
	background-color:  rgba(255, 255, 255, .4);
	background-blend-mode: lighten;

	border-style:solid;
	border-width:1px;
	border-color:#554220;
	
	/* font-family:'Cinzel', palatino, serif; */
	font-family:Papyrus;
	font-size:14px;
	line-height:17px;
	color:#554220;
}

div.ds_hero_system_5_revised .head{
	border-bottom:solid 1px #554220;
}

div.ds_hero_system_5_revised a{
	text-decoration:none;
	color:#554220;
}

div.ds_hero_system_5_revised .section a{
	text-decoration:underline;
}

div.ds_hero_system_5_revised .attacks .labelrow span{
	border-bottom:1px solid #A59270;
}

div.ds_hero_system_5_revised .maneuvers .labelrow span{
	border-bottom:1px solid #A59270;
}

div.ds_hero_system_5_revised .dsf.dsf_type{
	/* font-family:'Cinzel', palatino, serif; */
	font-family:Papyrus;
}

div.ds_hero_system_5_revised .smaller {font-size: smaller;}
div.ds_hero_system_5_revised .larger {font-size: larger;}

div.ds_hero_system_5_revised table.formatting_only.format_fill {
	width: "100%";
}

div.ds_hero_system_5_revised table.formatting_only {
	border-style: none;
	background-color: transparent;
	background: transparent;
	/* margin: 0px; */
	padding: 0px;
}

div.ds_hero_system_5_revised table.formatting_only tbody tr {
	background-color: transparent;
	background: transparent;
	margin: 0px;
	padding: 0px;
}

div.ds_hero_system_5_revised table.formatting_only tbody tr td {
	background-color: transparent;
	background: transparent;
	margin: 0px;
	padding: 0px;
}

JavaScript

/**
 * This is the namespace that contains the JavaScript functions and variables for the Obsidian Portal DST for Hero 5th
 * Edition Revised for the Constellations of Nut Campaign's 
 * {@link https://constellations-of-nut.obsidianportal.com/characters |Constellations of Nut Obsidian Portal Characters}
 * {@link https://www.obsidianportal.com/dynamic_sheet_templates/535/edit | Edit the DST for Constellations of Nut Obsidian Portal Characters}
 * 
 * @namespace hero_system_5_revised
 */

/**
 * @global
 * @typedef {object} dynamic_charactersheet_attrs The fields containing the character's attributes.  There are 6 required fields:
 * @property {string} dynamic_charactersheet_attrs.dsf_name  Character Name - A link to the character (ie. link to the current page). It will have an additional class of dst_character_name_link that can be used for styling.
 * @property {string} dynamic_charactersheet_attrs.dsf_player  Player Name - A link to the player's profile page. Can be empty, like for an NPC. It will have an additional class of dst_player_link that can be used for styling.
 * @property {string} dynamic_charactersheet_attrs.dsf_campaign  Campaign Name - A link to the campaign. A link to the character's campaign. It will have an additional class of dst_campaign_link that can be used for styling.
 * @property {string} dynamic_charactersheet_attrs.dsf_dst_author  DST Author - A link to the profile page for the DST author (you!). It will have an additional class of dst_dst_author_link that can be used for styling.
 * @property {string} dynamic_charactersheet_attrs.dsf_bio  Character Bio - This is HTML and can be very long. Make sure to fit it into your DST in such a way that it can grow to any length.
 * @property {image} dynamic_charactersheet_attrs.dsf_avatar_image  Character Avatar - Places the character's avatar image on the sheet. The image will have an additional class of avatar_image for styling purposes. The character's name will be added as both the alt and title values.
 */

/**
 * @global
 * @typedef {object} Reserved_CSS_Classes These class names are reserved and perform specific functions in your DST
 * @property {class} dsf  dsf which stands for dynamic sheet field. The system will find all the span elements with the dsf class and automatically fill them with the correct value for that field. How does it know what value to fill with? That's where the dsf_ class comes in. This class is dsf_FIELDNAME. When the sheet loads, we will insert all the correct values using javascript.
 * @property {class} checkbox  Since checkboxes (or similar) are a very common feature for character sheets, we have added support for easily adding checkboxes to a DST. Simply add the checkbox class to a dsf span and it will automatically get converted. See example below.
 * @example
 * <span class="dsf dsf_trained checkbox"></span>
 * @property {string} readonly  If you wish to prevent a field from being edited for any reason (such as if it is calculated by your sheet's JavaScript), you can add a class of readonly to the field to make it unable to be edited; as seen in example below.
 * @example
 * <span class="dsf dsf_armor_class_total readonly"></span>
 */

/**
 * @global
 * 
 * @typedef {object} opts "opts" is a JavaScript object containing
 * @property {string} opts.containerId The HTML id of the container div surrounding the HTML template.
 * @property {string} opts.slug The slug of the current DST.
 * @property {boolean} opts.isEditable True if the DST is in edit mode, false otherwise.
 */

/**
 * @global  
 * @typedef {object} hero_system_5_revised_csx_opts
 * @property {function} hero_system_5_revised_csx_opts.setupCallback Callback for hero_system_5_revised_setup
 * @property {object} hero_system_5_revised_csx_opts.uiContainer returns the DOM 
 * @property {string} hero_system_5_revised_csx_opts.defaultFieldValue 
 * @property {string} hero_system_5_revised_csx_opts.imagePath path to the proloaded UI components {@link hero_system_5_revised_csx_opts.preloadFiles}
 * @property {string[]} hero_system_5_revised_csx_opts.preloadFiles the preloaded UI components
 * 
 */
hero_system_5_revised_csx_opts = {
	'setupCallback': function (item) { hero_system_5_revised_setup(item); },
	'uiContainer': function () { return document; },
	'defaultFieldValue': 'Click to edit',
	'imagePath': 'https://chainsawxiv.github.io/DST/common/images/',
	'preloadFiles': [
		'add.png',
		'add_hover.png',
		'balance.png',
		'balance_hover.png',
		'bold_active.png',
		'bold_hover.png',
		'bullet.png',
		'gem.png',
		'gem_hover.png',
		'combat.png',
		'combat_hover.png',
		'fb_back_bottom.png',
		'fb_back_main.png',
		'fb_back_top.png',
		'biography.png',
		'biography_hover.png',
		'grab.png',
		'grab_hover.png',
		'indent.png',
		'indent_active.png',
		'indent_hover.png',
		'italic.png',
		'italic_active.png',
		'italic_hover.png',
		'star.png',
		'star_hover.png',
		'tip.png',
		'tip_hover.png',
		'trash.png',
		'trash_active.png',
		'trash_hover.png',
		'underline.png',
		'underline_active.png',
		'underline_hover.png',
		'https://chainsawxiv.github.io/DST/sheets/chainsawxiv_exalted/images/pip_off.png',
		'https://chainsawxiv.github.io/DST/sheets/chainsawxiv_exalted/images/pip_off_hover.png',
		'https://chainsawxiv.github.io/DST/sheets/chainsawxiv_exalted/images/pip_on.png',
		'https://chainsawxiv.github.io/DST/sheets/chainsawxiv_exalted/images/pip_on_hover.png',
		'https://chainsawxiv.github.io/DST/sheets/chainsawxiv_exalted/images/tab01_active.png',
		'https://chainsawxiv.github.io/DST/sheets/chainsawxiv_exalted/images/tab01_inactive.png',
		'https://chainsawxiv.github.io/DST/sheets/chainsawxiv_exalted/images/tab02_active.png',
		'https://chainsawxiv.github.io/DST/sheets/chainsawxiv_exalted/images/tab02_inactive.png',
		'https://chainsawxiv.github.io/DST/sheets/chainsawxiv_exalted/images/tab03_active.png',
		'https://chainsawxiv.github.io/DST/sheets/chainsawxiv_exalted/images/tab03_inactive.png',
		'https://chainsawxiv.github.io/DST/sheets/chainsawxiv_exalted/images/tab04_active.png',
		'https://chainsawxiv.github.io/DST/sheets/chainsawxiv_exalted/images/tab04_inactive.png',
		'https://chainsawxiv.github.io/DST/sheets/chainsawxiv_exalted/images/check_off.png',
		'https://chainsawxiv.github.io/DST/sheets/chainsawxiv_exalted/images/check_off_hover.png',
		'https://chainsawxiv.github.io/DST/sheets/chainsawxiv_exalted/images/check_on.png',
		'https://chainsawxiv.github.io/DST/sheets/chainsawxiv_exalted/images/check_on_hover.png',
	],
};

/**
 * @memberof hero_system_5_revised
 * @typedef {object} hero5_maneuvers The Hero 5th Edition Revised Manuevers for Constellations of Nut
 * @property {string} hero5_maneuvers.maneuver
 * @property {string} hero5_maneuvers.cost
 * @property {string} hero5_maneuvers.ocv
 * @property {string} hero5_maneuvers.dcv
 * @property {string} hero5_maneuvers.effects
 */
var hero5_maneuvers = [ 
	{ "maneuver":"Block", "cost":0, "ocv":"+0","dcv":"+0","effects":"Block HTH attacks, Abort"},
{ "maneuver":"Brace", "cost":0, "ocv":"+2","dcv":"½ ","effects":"+2 OCV only to offset Range"},
{ "maneuver":"Disarm", "cost":0, "ocv":"-2","dcv":"+0","effects":"Disarm target, requires STR vs. STR Roll"},
{ "maneuver":"Dodge", "cost":0, "ocv":"---","dcv":"+3","effects":"Dodge all attacks, Abort"},
{ "maneuver":"Grab", "cost":0, "ocv":"-1","dcv":"-2","effects":"Grab Two Limbs; can squeeze or throw"},
{ "maneuver":"Grab By", "cost":0, "ocv":"-3","dcv":"-4","effects":"Move and Grab object, +(v/5) to STR"},
{ "maneuver":"Haymaker", "cost":0, "ocv":"+0","dcv":"-5","effects":"+4 Damage Classes to any attack"},
{ "maneuver":"Move By", "cost":0, "ocv":"-2","dcv":"-2","effects":"((STR/2) + (v/5))d6; attacker takes 1/3 damage"},
{ "maneuver":"Move Through", "cost":0, "ocv":"-v/5","dcv":"-3","effects":"(STR + (v/3))d6; attacker takes 1/2 or full damage"},
{ "maneuver":"Set", "cost":0, "ocv":"+1","dcv":"+0","effects":""},
{ "maneuver":"Strike", "cost":0, "ocv":"+0","dcv":"+0","effects":"STR damage or by weapon type"},
{ "maneuver":"Blazing Away", "cost":0, "ocv":"+0","dcv":"+0","effects":"Make as many attacks as desired, only hit on a 3"},
{ "maneuver":"Club Weapon", "cost":0, "ocv":"+0","dcv":"+0","effects":"Killing weapon does equivalent Normal Damage"},
{ "maneuver":"Cover", "cost":0, "ocv":"-2","dcv":"+0","effects":"Target held at 'gunpoint'"},
{ "maneuver":"Dive For Cover", "cost":0, "ocv":"+0","dcv":"+0","effects":"Character avoids attack; Abort"},
{ "maneuver":"Hipshot", "cost":0, "ocv":"-1","dcv":"+0","effects":"+1 DEX only for purposes of initiative"},
{ "maneuver":"Hurry", "cost":0, "ocv":"-2","dcv":"-2","effects":"+1d6 DEX only for purposes of initiative"},
{ "maneuver":"Pulling A Punch", "cost":0, "ocv":"-1/5d6","dcv":"+0","effects":"Strike, normal STUN damage, 1/2 BODY damage"},
{ "maneuver":"Rapid Fire", "cost":0, "ocv":"-2/x","dcv":"x½ ","effects":"Make multiple Ranged attacks"},
{ "maneuver":"Roll With A Punch", "cost":0, "ocv":"-2","dcv":"-2","effects":"Block after being bit, take 1/2 damage; Abort"},
{ "maneuver":"Snap Shot", "cost":0, "ocv":"-1","dcv":"+0","effects":"Lets character duck back behind cover"},
{ "maneuver":"Suppression Fire", "cost":0, "ocv":"-2","dcv":"+0","effects":"Continues fire on hexes, must be Autofire"},
{ "maneuver":"Sweep", "cost":0, "ocv":"-2/x","dcv":"x½ ","effects":"Make multiple HTH attacks"},
{ "maneuver":"Grappling Throw", "cost":3, "ocv":"+0","dcv":"+2","effects":"STR +2d6 Strike; Target Falls; Must Follow Grab"},
{ "maneuver":"Martial Throw", "cost":3, "ocv":"+0","dcv":"+1","effects":"STR +v/5 Strike; Target Falls"},
{ "maneuver":"Passing Throw", "cost":5, "ocv":"+0","dcv":"+0","effects":"STR +v/5 Strike; Target Falls; FMove"},
{ "maneuver":"Joint Lock/Throw", "cost":4, "ocv":"+1","dcv":"+0","effects":"Grab One Limb; 1d6 NND(7); Target Falls"},
{ "maneuver":"Takedown", "cost":3, "ocv":"+1","dcv":"+1","effects":"STR Strike; Target Falls"},
{ "maneuver":"Legsweep", "cost":3, "ocv":"+2","dcv":"-1","effects":"STR +1d6 Strike; Target Falls"},
{ "maneuver":"Sacrifice Throw", "cost":3, "ocv":"+2","dcv":"+1","effects":"STR Strike; You Fall, Target Falls"},
{ "maneuver":"Choke Hold", "cost":4, "ocv":"-2","dcv":"+0","effects":"Grab One Limb; 2d6 NND(2)"},
{ "maneuver":"Flying Grab", "cost":5, "ocv":"-2","dcv":"-1","effects":"Grab Two Limbs, +10 STR for holding on; FMove"},
{ "maneuver":"Killing Strike", "cost":4, "ocv":"-2","dcv":"+0","effects":"HKA ½d6 (2DC)"},
{ "maneuver":"Killing Throw", "cost":5, "ocv":"-2","dcv":"+0","effects":"HKA ½d6 (2DC); Target Falls"},
{ "maneuver":"Offensive Strike", "cost":5, "ocv":"-2","dcv":"+1","effects":"STR +4d6 Strike"},
{ "maneuver":"Martial Disarm", "cost":4, "ocv":"-1","dcv":"+1","effects":"Disarm, +10 STR to Disarm roll"},
{ "maneuver":"Martial Flash", "cost":4, "ocv":"-1","dcv":"-1","effects":"Flash 4d6 (choose Sense Group)"},
{ "maneuver":"Martial Grab", "cost":3, "ocv":"-1","dcv":"-1","effects":"Grab Two Limbs, +10 STR for holding on"},
{ "maneuver":"Nerve Strike", "cost":4, "ocv":"-1","dcv":"+1","effects":"2d6 NND(1)"},
{ "maneuver":"Passing Disarm", "cost":5, "ocv":"-1","dcv":"-1","effects":"Disarm, +10 STR to Disarm roll; FMove"},
{ "maneuver":"Reversal", "cost":4, "ocv":"-1","dcv":"-2","effects":"STR +15 to Escape; Grab Two Limbs"},
{ "maneuver":"Charge", "cost":4, "ocv":"+0","dcv":"-2","effects":"STR +2d6 +v/5 Strike, FMove"},
{ "maneuver":"Crush", "cost":4, "ocv":"+0","dcv":"+0","effects":"STR +4d6 Crush, Must Follow Grab"},
{ "maneuver":"Disarming Throw", "cost":5, "ocv":"+0","dcv":"+0","effects":"Grab Weapon, +5 STR Take Weapon Away; Target Falls"},
{ "maneuver":"Flying Tackle", "cost":3, "ocv":"+0","dcv":"-1","effects":"STR +v/5 Strike; You Fall, Target Falls; FMove"},
{ "maneuver":"Martial Escape", "cost":4, "ocv":"+0","dcv":"+0","effects":"+15 STR vs. Grabs"},
{ "maneuver":"Martial Strike", "cost":4, "ocv":"+0","dcv":"+2","effects":"STR +2d6 Strike"},
{ "maneuver":"Root", "cost":4, "ocv":"+0","dcv":"+0","effects":"STR +15 to resist Shove; Block, Abort"},
{ "maneuver":"Shove", "cost":4, "ocv":"+0","dcv":"+0","effects":"+15 STR to Shove"},
{ "maneuver":"Takeaway", "cost":5, "ocv":"+0","dcv":"+0","effects":"Grab Weapon, +10 STR Take Weapon Away"},
{ "maneuver":"Basic Strike", "cost":3, "ocv":"+1","dcv":"+0","effects":"STR +2d6 Strike"},
{ "maneuver":"Defensive Block", "cost":5, "ocv":"+1","dcv":"+3","effects":"Block, Abort"},
{ "maneuver":"Defensive Strike", "cost":5, "ocv":"+1","dcv":"+3","effects":"STR Strike"},
{ "maneuver":"Defensive Throw", "cost":3, "ocv":"+1","dcv":"+1","effects":"Block, Target Falls"},
{ "maneuver":"Grappling Block", "cost":5, "ocv":"+1","dcv":"+1","effects":"Grab One Limb, Block"},
{ "maneuver":"Passing Strike", "cost":5, "ocv":"+1","dcv":"+0","effects":"STR +v/5; FMove"},
{ "maneuver":"Sacrifice Strike", "cost":5, "ocv":"+1","dcv":"-2","effects":"STR +4d6 Strike"},
{ "maneuver":"Weapon Bind", "cost":4, "ocv":"+1","dcv":"+0","effects":"Bind, +10 STR"},
{ "maneuver":"Counterstrike", "cost":4, "ocv":"+2","dcv":"+2","effects":"STR +2d6 Strike, Must Follow Block"},
{ "maneuver":"Fast Strike", "cost":4, "ocv":"+2","dcv":"+0","effects":"STR +2d6 Strike"},
{ "maneuver":"Martial Block", "cost":4, "ocv":"+2","dcv":"+2","effects":"Block, Abort"},
{ "maneuver":"Sacrifice Disarm", "cost":4, "ocv":"+2","dcv":"-2","effects":"Disarm, +10 STR to Disarm roll"},
{ "maneuver":"Sacrifice Lunge", "cost":4, "ocv":"+2","dcv":"-2","effects":"STR +v/5; FMove"},
{ "maneuver":"Flying Dodge", "cost":5, "ocv":"---","dcv":"+4","effects":"Dodge All Attacks, Abort; FMove"},
{ "maneuver":"Martial Dodge", "cost":4, "ocv":"---","dcv":"+5","effects":"Dodge, Affects All Attacks, Abort"},
{ "maneuver":"Basic Shot", "cost":4, "ocv":"+0","dcv":"+0","effects":"Strike, +2 DC"},
{ "maneuver":"Defensive Shot", "cost":3, "ocv":"-1","dcv":"+2","effects":"Strike"},
{ "maneuver":"Distance Shot", "cost":5, "ocv":"+0","dcv":"-2","effects":"Strike; +1 Segment"},
{ "maneuver":"Far Shot", "cost":5, "ocv":"+1","dcv":"-1","effects":"Strike"},
{ "maneuver":"Offensive Ranged Disarm", "cost":5, "ocv":"+1","dcv":"-1","effects":"Disarm, +10 STR"},
{ "maneuver":"Offensive Shot", "cost":4, "ocv":"-1","dcv":"-1","effects":"Strike, +4 DC"},
{ "maneuver":"Offensive Trip", "cost":5, "ocv":"+1","dcv":"-1","effects":"Strike, +v/5; Target Falls"},
{ "maneuver":"Quick Shot", "cost":4, "ocv":"+1","dcv":"+0","effects":"Strike, +2 DC"},
{ "maneuver":"Ranged Disarm", "cost":4, "ocv":"+0","dcv":"+0","effects":"Disarm, +15 STR"},
{ "maneuver":"Trip", "cost":4, "ocv":"-1","dcv":"-1","effects":"v/5, Target Falls"}
];

//######################################################################### Standard DST Callbacks
//######################################################################### Standard DST Callbacks
//#########vvvvvvvvvvvvvvvv################################################ Standard DST Callbacks

/**
 * Called immediately before the data values are loaded into the HTML template. 
 * 
 * @function hero_system_5_revised_dataPreLoad
 * @memberof hero_system_5_revised
 */
function hero_system_5_revised_dataPreLoad(data) {
	console.groupCollapsed("hero_system_5_revised_dataPreLoad(data)...");
	console.groupEnd();
}


/**
 * Called immediately after the data values have been loaded into the HTML template, e.g. hero_system_5_revised_dataPostLoad(opts) - see [opts]{@link opts} 
 * @param {object} opts {@link opts}
 * @function hero_system_5_revised_dataPostLoad 
 * @memberof hero_system_5_revised
 */
function hero_system_5_revised_dataPostLoad(opts) {
	console.groupCollapsed("hero_system_5_revised_dataPostLoad(opts)... opts="+JSON.stringify(opts));

	hero_system_5_revised_csx_opts.defaultContext = document.getElementById(opts.containerId);
	hero_system_5_revised_csx_opts.uiContainer = hero_system_5_revised_csx_opts.defaultContext.querySelector('.uicontainer');
	hero_system_5_revised_csx_opts.isEditable = opts.isEditable;

	// Include the shared script file
	var includes = document.createElement('script');
	//includes.type = 'text/javascript';
	//includes.src = 'https://chainsawxiv.github.io/DST/common/js/csx_exalted_common.js?v=dev001';
	//includes.src = 'https://www.glados.org/pacific-rim/DST/chainsaw/exalted/chainsawxiv_exalted/csx_exalted.js';


	includes.onload = function () {

		// Fix container properties
		hero_system_5_revised_csx_firstParentWithClass(hero_system_5_revised_csx_opts.defaultContext, 'dynamic_sheet_container').style.overflow = 'visible';
		//csx_firstParentWithClass(hero_system_5_revised_csx_opts.defaultContext,'main-content-container').style.minWidth = '853px';

		// Set up the editing interfacea
		hero_system_5_revised_csx_opts.setupCallback();

	};
	document.body.appendChild(includes);

	hero_system_5_revised_csx_firstParentWithClass(hero_system_5_revised_csx_opts.defaultContext, 'dynamic_sheet_container').style.overflow = 'visible';
	hero_system_5_revised_setup(hero_system_5_revised_csx_opts.defaultContext);

	// Preload rollover images 
	// Deferred to prevent blocking
	window.setTimeout(function () {
		if (document.images) {
			for (var i = 0; i < hero_system_5_revised_csx_opts.preloadFiles.length; i++) {
				var img = new Image();
				img.src = hero_system_5_revised_csx_opts.imagePath + hero_system_5_revised_csx_opts.preloadFiles[i];
			}
		}
	}, 500);
	console.groupEnd();

}


/**
 * Custom DST Setup After Script Load
 * @param {DOM} context 
 * @memberof hero_system_5_revised
 * @function hero_system_5_revised_setup
 */
function hero_system_5_revised_setup(context) {
	if(context != null) console.groupCollapsed("hero_system_5_revised_setup(context)... context.id="+context.id);
	else console.groupCollapsed("hero_system_5_revised_setup(context)... context.id= null");
console.info("JSON.stringify(hero_system_5_revised_csx_opts.defaultContext).id="+hero_system_5_revised_csx_opts.defaultContext.id);
	// Provide default context
	if (context == undefined)
		context = hero_system_5_revised_csx_opts.defaultContext;

	// Do setup for interfaces
	hero_system_5_revised_csx_pips(context);
	hero_system_5_revised_csx_check(context);
	hero_system_5_revised_csx_edit(context);
	hero_system_5_revised_csx_tip(context);
	hero_system_5_revised_csx_list(context);
	hero_system_5_revised_csx_tab(context);

	if (!hero_system_5_revised_csx_opts.isEditable) {
		var editonlys = context.querySelectorAll('.editonly');
		for (var i = 0; i < editonlys.length; i++)
			editonlys[i].style.display = "none";;
	}
	console.info("dynamic_sheet_attrs ="+JSON.stringify(dynamic_sheet_attrs ));
	if (dynamic_sheet_attrs.player.length == 0) {
		var ifpc = context.querySelectorAll('.ifpc');
		for (var i = 0; i < ifpc.length; i++)
			ifpc[i].style.display = "none";
	}
	console.groupEnd();
}

/**
 * Called immediately after a field value has been changed. This is useful if you want to do auto-calculations or validation, e.g. hero_system_5_revised_dataChange(opts) - see [opts]{@link opts} 
 * 
 * @function hero_system_5_revised_dataChange 
 * @memberof hero_system_5_revised
 */
function hero_system_5_revised_dataChange(opts) {
	console.groupCollapsed("hero_system_5_revised_dataChange(opts)..."+JSON.stringify(opts));
	console.groupEnd();
}

/**
 * Called immediately before the data values are retrieved from the HTML template and sent to the server to save, e.g. hero_system_5_revised_dataPreSave(opts) - see [opts]{@link opts} 
 * 
 * @function hero_system_5_revised_dataPreSave 
 * @memberof hero_system_5_revised
 */
function hero_system_5_revised_dataPreSave(opts) {
	console.groupCollapsed("hero_system_5_revised_dataPreSave(opts)...");

	// Default the context if not set
	var context = hero_system_5_revised_csx_opts.defaultContext;

	// Bake everything down to its field values
	var pips = context.querySelectorAll('.pips');
	for (var i = 0; i < pips.length; i++) {
		if (pips[i].parentNode.className.match(/proto/))
			continue;
		pips[i].unrender();
	}

	var checks = context.querySelectorAll('.check');
	for (var i = 0; i < checks.length; i++)
		checks[i].unrender();

	var edits = context.querySelectorAll('.dsf:not(.readonly),.edit');
	for (var i = 0; i < edits.length; i++)
		edits[i].unrender();

	var lists = context.querySelectorAll('.list');
	for (var i = 0; i < lists.length; i++)
		lists[i].unrender();
	console.groupEnd();
}

//#########^^^^^^^^^^^^^^^^################################################ Standard DST Callbacks
//######################################################################### Standard DST Callbacks
//######################################################################### Standard DST Callbacks

// #################################################################################### csx functions
// #################################################################################### csx functions
// ####vvvvvvvvvvvvvvvvvvvv############################################################ csx functions
/**
 * This is the namespace that contains the Chainsaw functions - some of which have been altered from [ChainsawXIV's github DST wiki]{@link https://github.com/ChainsawXIV/DST/wiki}. 
 * 
 * @namespace hero_system_5_revised_hero_system_5_revised_csx_functions
 */

/**
 *  Returns the first parent of {@link node} with class {@link className} 
 * 
 * @function hero_system_5_revised_csx_firstParentWithClass 
 * @memberof hero_system_5_revised_csx_functions
 * @param {string} className the classname to search for in the DOM parents of {@link node}
 * @param {DOM} node the node to search the parents for the first occurence of class with {@link className} 
 */
function hero_system_5_revised_csx_firstParentWithClass(node, className) {
	while (node.parentNode) {
		node = node.parentNode;
		if (node.className) {
			if (node.className.match(className))
				return node;
		}
	}
	return false;
}


/**
 * Checks Interface Control
 * @param {DOM} context DOM Node
 * @instance
 * @namespace
 */
function hero_system_5_revised_csx_check(context) {
	console.groupCollapsed("hero_system_5_revised_csx_check(context)...");

	// Default the context if not set
	if (!context) context = document;

	// Convert each check field
	var checkFields = context.querySelectorAll('.check');
	for (var i = 0; i < checkFields.length; i++) {

		var field = checkFields[i];

		// Gets the field value from the embedded image or the text
		field.value = function () {

			// Return the cached value if it exists
			if (this.valueCache != null)
				return this.valueCache;

			// Get the value from the text content, cache, and return
			var value = parseInt(this.innerHTML);
			if (this.innerHTML == '') {
				if (this.className.match('checkDefaultOn'))
					value = 1;
				else
					value = 0;
			}
			this.valueCache = value;
			return value;

		};

		// Converts the associated span element's contents to a pips image
		field.render = function () {

			// Replace the contents with the appropriate check image
			var status = (this.value()) ? 'checkOn' : 'checkOff';
			var mark = document.createElement('div');
			mark.className = 'checkMark ' + status;
			var border = document.createElement('div');
			border.className = 'checkBorder';
			this.innerHTML = '';
			mark.appendChild(border);
			this.appendChild(mark);

			// Activate the check
			this.activate();

		};

		// Converts the associated span element's contents to a text value
		field.unrender = function () {

			// Replace the contents with the appropriate value string
			this.innerHTML = this.value();

		};

		// Assigns clickability to a pips image element
		field.activate = function () {

			// Only enable if editing
			if (!hero_system_5_revised_csx_opts.isEditable)
				return;

			// Activate the element's pips interface
			this.addEventListener('click', this.click, false);

			// Set the element's alt text
			if (!this.title)
				this.title = 'Click to toggle';

		};

		// Click event handler for the pips interface
		field.click = function () {

			// Flip the value of the field
			if (this.value() == 1)
				this.valueCache = 0;
			else
				this.valueCache = 1;

			// Rerender the field
			this.render();

			// Call the onUpdate event
			this.onUpdate();

		};

		// On Update event function, typicaly overriden
		field.onUpdate = function () {

		}

		// Render the field
		field.render();

	}
	console.groupEnd();
}

/**
 * General Editing Control
 * @param {DOM} context DOM Node
 * @returns {null}
 * @instance
 * @namespace
 */
function hero_system_5_revised_csx_edit(context) {
	console.groupCollapsed("hero_system_5_revised_csx_edit(context)...");

/**
 * Replaces '<' with &lt;
 * @param {string} string 
 * @returns {string}
 * @memberof hero_system_5_revised_csx_edit
 * @method escape
 */
	function escape(string) {
		//string = string.replace(/\\/g,'\\\&#92;');
		//string = string.replace(/"/g,'\\\&quot;');
		string = string.replace(/</g, '&lt;');
		return string;
	}
/**
  * Replaces &lt; with '<' and &gt; with '>' 
 * @param {string} string 
 * @returns {string}
 * @memberof hero_system_5_revised_csx_edit
 * @method unescape
 */
	function unescape(string) {
		string = string.replace(/&lt;/g, '<');
		string = string.replace(/&gt;/g, '>');
		//string = string.replace(/\\"/g,'"');
		//string = string.replace(/\&quot;/g,'"');
		//string = string.replace(/\&#92;/g,'\\');
		return string;
	}

	// Just unescape if not editing
	if (!hero_system_5_revised_csx_opts.isEditable) {
		var editFields = context.querySelectorAll('.dsf:not(.readonly):not(.checkbox),.edit:not(.readonly)');
		for (var i = 0; i < editFields.length; i++)
			editFields[i].innerHTML = unescape(editFields[i].innerHTML);
		return;
	}

	// Default the context if not set
	if (!context) context = document;

	// Returns the formatting bar or performs setup
	var formatBar = hero_system_5_revised_csx_opts.defaultContext.querySelector('.formatBar');
	if (!formatBar.eventsAttached) {

		// Apply button functions
		formatBar.down = function () {
			this.parentNode.editNode.allowBlur = false;
		}

		formatBar.bold = function () {
			// Try catch hackery to handle bug in FF (Bug 889940)
			try {
				document.execCommand('bold', false, null);
			} catch (ex) { }
			if (this.up) this.up();
			else this.parentNode.up();
		}

		formatBar.italic = function () {
			// Try catch hackery to handle bug in FF (Bug 889940)
			try {
				document.execCommand('italic', false, null);
			} catch (ex) { }
			if (this.up) this.up();
			else this.parentNode.up();
		}

		formatBar.underline = function () {
			// Try catch hackery to handle bug in FF (Bug 889940)
			try {
				document.execCommand('underline', false, null);
			} catch (ex) { }
			if (this.up) this.up();
			else this.parentNode.up();
		}

		formatBar.indent = function () {
			// Try catch hackery to handle bug in FF (Bug 889940)
			try {
				document.execCommand('insertUnorderedList', false, null);
			} catch (ex) { }
			if (this.up) this.up();
			else this.parentNode.up();
		}

		formatBar.up = function () {
			this.editNode.focus();
			this.editNode.allowBlur = true;
		}

		// Map keybaoard shortcuts
		formatBar.keydown = function (e) {

			// Genericize event data
			e = e || window.event;

			// Suppress line break insertion if needed
			if (e.keyCode == 13 && this.className.match(/singlerow/)) {
				e.preventDefault();
				e.stopPropagation();
				return false;
			}

			// Suppress normal browser shortcuts
			if (e.ctrlKey || e.metaKey) {
				if (e.keyCode == 66) {
					e.preventDefault();
					e.stopPropagation();
					return false;
				}
				else if (e.keyCode == 73) {
					e.preventDefault();
					e.stopPropagation();
					return false;
				}
				else if (e.keyCode == 85) {
					e.preventDefault();
					e.stopPropagation();
					return false;
				}
				else if (e.keyCode == 9) {
					e.preventDefault();
					e.stopPropagation();
					return false;
				}
			}

		}

		formatBar.keyup = function (e) {

			// Genericize event data
			e = e || window.event;

			// Handle the shortcuts for formatting
			if (e.ctrlKey || e.metaKey) {
				if (e.keyCode == 66) {
					this.formatBar.bold();
					e.preventDefault();
					e.stopPropagation();
					return false;
				}
				else if (e.keyCode == 73) {
					this.formatBar.italic();
					e.preventDefault();
					e.stopPropagation();
					return false;
				}
				else if (e.keyCode == 85) {
					this.formatBar.underline();
					e.preventDefault();
					e.stopPropagation();
					return false;
				}
				else if (e.keyCode == 9) {
					this.formatBar.indent();
					e.preventDefault();
					e.stopPropagation();
					return false;
				}
			}
		}

		// Assign show and hide behavior
		formatBar.show = function (field) {

			// Set the field being edited
			this.editNode = field;

			// Insert and display the bar
			field.parentNode.insertBefore(this, field);
			this.style.display = 'block';

			// Position the bar below and centered
			this.style.left = (field.offsetLeft + (field.offsetWidth / 2) - (this.offsetWidth / 2)) + 'px';
			this.style.top = (field.offsetTop - (this.offsetHeight)) + 'px';

			// Enable keyboard shortcuts
			field.addEventListener('keyup', this.keyup, false);
			field.addEventListener('keydown', this.keydown, false);

		}

		formatBar.hide = function () {

			// Hide the bar
			this.style.display = 'none';

			// Move the bar back to the holding area
			hero_system_5_revised_csx_opts.uiContainer.appendChild(this);

			// Disable keyboard shortcuts
			this.editNode.removeEventListener('keyup', this.keyup, false);
			this.editNode.removeEventListener('keydown', this.keydown, false);

		}

		// Add button events
		var boldButton = formatBar.querySelector('.boldButton');
		boldButton.addEventListener('mousedown', formatBar.down, false);
		boldButton.addEventListener('click', formatBar.bold, false);

		var italicButton = formatBar.querySelector('.italicButton');
		italicButton.addEventListener('mousedown', formatBar.down, false);
		italicButton.addEventListener('click', formatBar.italic, false);

		var underlineButton = formatBar.querySelector('.underlineButton');
		underlineButton.addEventListener('mousedown', formatBar.down, false);
		underlineButton.addEventListener('click', formatBar.underline, false);

		var indentButton = formatBar.querySelector('.indentButton');
		indentButton.addEventListener('mousedown', formatBar.down, false);
		indentButton.addEventListener('click', formatBar.indent, false);

		// Mark the format bar as ready
		formatBar.eventsAttached = true;

	}

	// Convert each editable field
	var editFields = context.querySelectorAll('.dsf,.edit');
	for (var i = 0; i < editFields.length; i++) {

		var baseField = editFields[i];

		// Don't do anything to read only fields
		if (baseField.className.match(/readonly/))
			continue;

		// Add stub methods to checkboxes for backwards compatability
		if (baseField.className.match(/checkbox/)) {
			baseField.value = function () { };
			baseField.render = function () { };
			baseField.unrender = function () { };
			baseField.enable = function () { };
			baseField.activate = function () { };
			baseField.deactivate = function () { };
			baseField.update = function () { };
			baseField.select = function () { };
			continue;
		}

		// Replace the field span with a div if it's not
		// Here instead of render so events attach to the new div
		var field = baseField;
		if (baseField.tagName == 'SPAN') {
			var field = document.createElement('div');
			field.className = baseField.className;
			field.innerHTML = baseField.innerHTML;
			field.style.left = baseField.style.left;
			field.style.top = baseField.style.top;
			field.style.width = baseField.style.width;
			field.style.textAlign = baseField.style.textAlign;
			field.old_value = '';
			baseField.parentNode.insertBefore(field, baseField);
			baseField.parentNode.removeChild(baseField);
		}

		// Set the default text value for blank fields
		if (baseField.attributes['defaultstring']) {
			field.defaultValue = baseField.attributes['defaultstring'].value;
			field.setAttribute('defaultstring', baseField.attributes['defaultstring'].value);
		}
		else
			field.defaultValue = hero_system_5_revised_csx_opts.defaultFieldValue;

		// Returns the text edited into the field
		field.value = function () {

			// Return nothing if the field is defaulted
			if (this.innerHTML == this.defaultValue)
				return '';
			// Otherwise return the actual content
			else
				return this.innerHTML;

		}

		// Populates editable fields with default values
		field.render = function () {

			this.innerHTML = unescape(this.innerHTML);

			// Set default value if the field is blank
			if (this.innerHTML == hero_system_5_revised_csx_opts.defaultFieldValue || this.innerHTML == '')
				this.innerHTML = this.defaultValue;

			// Activate the field for editing
			this.enable();

		}

		// Strips the default value away if needed
		field.unrender = function () {

			if (this.innerHTML == this.defaultValue)
				this.innerHTML = '';

			// Replace this with a span if it's not
			if (this.tagName != 'SPAN') {
				var span = document.createElement('span');
				span.className = this.className;
				span.innerHTML = escape(this.innerHTML);
				this.parentNode.insertBefore(span, this);
				this.parentNode.removeChild(this);
			}

		}

		// Attaches required events and sets values
		field.enable = function () {

			// Set title and cursor mode
			this.title = 'Click and type to edit';

			// Make the content editable
			this.contentEditable = true; // *** This is hella slow in FF for some reason

			// Assign the required events to the field
			this.addEventListener('focus', this.activate, false);
			this.addEventListener('blur', this.deactivate, false);
			this.allowBlur = true;

		}

		// Select content and show edit interface on focus
		field.activate = function (e) {
			this.old_value = this.innerHTML;

			// Display the formatting toolbar
			this.formatBar.show(this);

			// Shade the field
			this.className += ' activeField';

			// Select all the text in the field for editing
			if (this.allowBlur) {
				var el = this;
				requestAnimationFrame(function () {
					el.select();
				});
			}

			// Disable the element's title
			this.titleStore = this.title;
			this.title = '';

		}

		// Called when the field loses focus, hide editing interface
		field.deactivate = function () {

			if (!this.allowBlur)
				return;

			// Hide the formatting toolbar
			this.formatBar.hide();

			// Default the text if empty
			if (this.innerHTML == '' || this.innerHTML == '<br>')
				this.innerHTML = this.defaultValue;

			// Unshade the field
			this.className = this.className.replace(/ activeField/g, '');

			// Enable the element's title
			this.title = this.titleStore;

			if (this.old_value != this.innerHTML) {
				this.update();
			}
		}

		// Called when the content changes, typically overridden
		field.update = function () {

		}

		// Selects all the text in the field
		field.select = function () {

			var range = document.createRange();
			range.selectNodeContents(this);
			var selection = window.getSelection();
			selection.removeAllRanges();
			selection.addRange(range);

		}

		// Create ref to format bar
		field.formatBar = formatBar;

		// Ready the field for use
		field.render();

	}
	console.groupEnd();
}

/**
 * Dynamic List Control
 * @param {DOM} context DOM Node
 * @param {*} addItemCallback 
 * @returns {null}
 * @instance
 * @namespace
 */
function hero_system_5_revised_csx_list(context, addItemCallback) {
	console.groupCollapsed("hero_system_5_revised_csx_list(context, addItemCallback))...");

	// Default the context if not set
	if (!context) context = document;

	// Initialize globals
	var mover = null;
	var onHandle = false;

	// Generic utility digit padding function
	function padDigits(value, digits) {
		value = value.toString();
		while (value.length < digits)
			value = '0' + value;

		return value;
	}

	// Utility function to get an element's page height
	function getOffset(element) {
		var offsetX = 0;
		var offsetY = 0;
		while (element && !isNaN(element.offsetTop)) {
			//offsetX += element.offsetLeft - element.scrollLeft;
			//offsetY += element.offsetTop - element.scrollTop;
			offsetX += element.offsetLeft;
			offsetY += element.offsetTop;
			element = element.offsetParent;
		}
		return { 'x': offsetX, 'y': offsetY };
	}

	// Utility function for finding the owning list
	function getOwningList(node) {
		while (node.parentNode) {
			node = node.parentNode;
			if (node.className) {
				if (node.className.match(/list_/))
					return node;
			}
		}
		return false;
	}

	// Utility function to find the owning page
	function getOwningPage(node) {
		while (node.parentNode) {
			node = node.parentNode;
			if (node.className) {
				if (node.className.match(/page_/))
					return node;
			}
		}
		return false;
	}

	// Convert each list
	var lists = context.querySelectorAll('.list');
	for (var listIndex = 0; listIndex < lists.length; listIndex++) {

		// Handling for scripted columnation
		lists[listIndex].columns = lists[listIndex].querySelectorAll('.column');
		lists[listIndex].autoBalance = function () { return false; };
		for (var i = 0; i < lists[listIndex].columns.length; i++)
			lists[listIndex].columns[i].colNum = i;

		// Handle loading and conversion of old data format
		lists[listIndex].load = function () {

			// Get and parse the data from the new-type storage field
			var listName = this.className.match(/list_([\w\d_]+)/)[1];
			console.info("worked with"+listName);
			var dataString = this.querySelector('.dsf_' + listName).innerHTML;

			// Manually clean up all the unhandled string escaping
			dataString = dataString.replace(/"\\/g, '\"');
			dataString = dataString.replace(/=\"\"/g, '=\"\"');
			dataString = dataString.replace(/&lt;/g, '<');
			dataString = dataString.replace(/&gt;/g, '>');
			dataString = dataString.replace(/<[/]*span[^>]*>/g, '');
			dataString = dataString.replace(/<[/]*font[^>]*>/g, '');
			dataString = dataString.replace(/<b[^>r]*>/g, '<b>');

			var listData = [];
			if (dataString) {
				try {
					var listData = JSON.parse(dataString);
				}
				catch (error) {
					console.error("Unable to parse save blob for " + listName);
				}
			}

			// Add on to the end any data stored in the old way
			// var oldStructure = this.querySelector('.oldfields').innerHTML;
			// if (oldStructure) {
			// 	var oldLists = JSON.parse(oldStructure);

			// 	// Harvest data for each list to be merged in
			// 	for (var oldListIndex = 0; oldListIndex < oldLists.length; oldListIndex++) {
			// 		var oldFields = oldLists[oldListIndex];
			// 		var oldItemIndex = 0;

			// 		// Search the saved data for items coresponding to the list's first field
			// 		while (dynamic_sheet_attrs[oldFields[Object.keys(oldFields)[0]] + '_' + padDigits(oldItemIndex, 2)] != undefined) {
			// 			var newItemData = {};

			// 			// Get the data for each field once an item is found
			// 			for (var newFieldName in oldFields) {
			// 				var oldFieldName = oldFields[newFieldName] + '_' + padDigits(oldItemIndex, 2);
			// 				newItemData[newFieldName] = dynamic_sheet_attrs[oldFieldName];
			// 				// Clean up busticated data from old implementation
			// 				if (newItemData[newFieldName] == undefined || newItemData[newFieldName] == 'undefined')
			// 					newItemData[newFieldName] = '';
			// 			}

			// 			// Add the new item to the complete item array
			// 			listData[listData.length] = newItemData;
			// 			oldItemIndex++;
			// 		}
			// 	}
			// }

			// If saved data exists then clear and render
			if (listData.length) {
				this.clear();
				this.render(listData);
			}

		}

		// Core function to clear the list of pre-existing data
		lists[listIndex].clear = function () {
			var items = this.querySelectorAll('li.item');
			for (var itemIndex = 0; itemIndex < items.length; itemIndex++) {
				if (!items[itemIndex].className.match(/proto/)) {
					this.removeChild(items[itemIndex]);
				}
			}
		}

		// Core function to load list data from JSON string
		lists[listIndex].render = function (listData) {

			// Add the contents of the object to the list
			var rebalance = false;
			for (var itemIndex = 0; itemIndex < listData.length; itemIndex++) {
				// Rebalance after render if missing any column specifications
				if (listData[itemIndex].column == undefined)
					rebalance = true;
				this.addItem(listData[itemIndex]);
			}
			if (rebalance && this.columns.length)
				this.balanceColumns();

		}

		// Core function to extract and save list data
		lists[listIndex].unrender = function () {

			// Walk the list harvesting data into an object
			var listData = [];
			var items = this.querySelectorAll('li.item');
			for (var itemIndex = 0; itemIndex < items.length; itemIndex++) {
				if (!items[itemIndex].className.match(/proto/)) {
					var itemData = {};
					var fields = items[itemIndex].querySelectorAll('.dslf');
					for (var fieldIndex = 0; fieldIndex < fields.length; fieldIndex++) {
						var fieldName = fields[fieldIndex].className.match(/dslf_([\w\d_]+)/)[1];
						var fieldValue = fields[fieldIndex].innerHTML.replace(/&/g, '&amp;').replace(/"/g, '&qq;');
						itemData[fieldName] = fieldValue;
					}
					if (this.columns.length)
						itemData.column = items[itemIndex].parentNode.colNum;
					listData[listData.length] = itemData;
				}
			}

			// Stringify the object and put it to the save field
			var listName = this.className.match(/list_([\w\d_]+)/)[1];
			var dataString = JSON.stringify(listData);
			dataString = dataString.replace(/</g, '&lt;');
			this.querySelector('.dsf_' + listName).innerHTML = dataString;

		}

		// Callback function for post-add processing
		if (hero_system_5_revised_csx_opts.setupCallback)
			lists[listIndex].itemAdded = hero_system_5_revised_csx_opts.setupCallback;
		else
			lists[listIndex].itemAdded = function () { };

		// Core function to add an item to the list
		lists[listIndex].addItem = function (data) {

			// Clone the embeded prototype as a basis
			var proto = this.querySelector('.proto');
			var newItem = proto.cloneNode(true);

			// Initialize the new item
			newItem.className = newItem.className.replace(/proto/g, '');

			// Inject any provided data into the item
			if (data) {
				var fields = newItem.querySelectorAll('.dslf');
				for (var fieldIndex = 0; fieldIndex < fields.length; fieldIndex++) {
					var fieldName = fields[fieldIndex].className.match(/dslf_([\w\d_]+)/)[1];
					if (fieldName in data) {
						console.log("fieldName:" + fieldName + " = " + data[fieldName].toString());
						var fieldValue = data[fieldName].toString().replace(/&amp;/g, '&').replace(/&qq;/g, '"');
						fields[fieldIndex].innerHTML = fieldValue;
					}
				}
			}

			// Place and enable the new item
			if (this.columns.length) {
				if (data) {
					if (data.column != undefined) {
						// Put it in the right column if specified
						this.columns[data.column].appendChild(newItem);
					}
					else {
						// ERROR CASE: default to last column
						this.lastColumn.appendChild(newItem);
					}
				}
				else {
					// Put new items in the lat column
					this.lastColumn.appendChild(newItem);
				}
			}
			else {
				// Put it right in the list if there are no columns
				this.appendChild(newItem);
			}

			this.makeDragable(newItem);
			this.itemAdded(newItem);

			// Autobalance the list if enabled
			if (this.autoBalance())
				this.balanceColumns();

		}

		// Core function to make an item dragable
		lists[listIndex].makeDragable = function (item) {
			item.draggable = true;

			// Prevent drag when interacting with editable text
			var textFields = item.querySelectorAll('[contentEditable=true]');
			for (var fieldIndex = 0; fieldIndex < textFields.length; fieldIndex++) {
				textFields[fieldIndex].addEventListener('mousedown', function (e) {
					this.parentNode.draggable = false;
					this.addEventListener('mouseup', function (e) {
						this.parentNode.draggable = true;
					}, false);
					this.addEventListener('mouseout', function (e) {
						this.parentNode.draggable = true;
					}, false);
				}, false);
				textFields[fieldIndex].addEventListener('touchstart', function (e) {
					this.parentNode.draggable = false;
					this.addEventListener('touchend', function (e) {
						this.parentNode.draggable = true;
					}, false);
					this.addEventListener('touchleave', function (e) {
						this.parentNode.draggable = true;
					}, false);
				}, false);
			}

			// Designate to higher scope when mousing a drag handle
			var dragHandle = item.querySelector('.handle');
			dragHandle.title = 'Drag to rearrange list';
			dragHandle.addEventListener('mousedown', function (e) {
				onHandle = true;
				var handle = this;

				this.mouseup = function (e) {
					onHandle = false;
					handle.clearEvents();
				}
				this.addEventListener('mouseup', this.mouseup, false);

				this.mouseout = function (e) {
					this.handleTimeout = window.setTimeout(function () {
						onHandle = false;
						handle.clearEvents();
					}, 5);
				}
				this.addEventListener('mouseout', this.mouseout, false);

				this.mouseover = function (e) {
					window.clearTimeout(handle.handleTimeout);
				}
				this.addEventListener('mouseover', this.mouseover, false);

				this.clearEvents = function () {
					this.removeEventListener('mouseup', this.mouseup);
					this.removeEventListener('mouseout', this.mouseout);
					this.removeEventListener('mouseover', this.mouseover);
				};

			}, false);
			dragHandle.addEventListener('touchstart', function (e) {
				onHandle = true;
				var handle = this;

				this.touchend = function (e) {
					onHandle = false;
					handle.clearEvents();
				}
				this.addEventListener('touchend', this.touchend, false);

				this.touchleave = function (e) {
					this.handleTimeout = window.setTimeout(function () {
						onHandle = false;
						handle.clearEvents();
					}, 5);
				}
				this.addEventListener('touchleave', this.touchleave, false);

				this.touchenter = function (e) {
					window.clearTimeout(handle.handleTimeout);
				}
				this.addEventListener('touchenter', this.touchenter, false);

				this.clearEvents = function () {
					this.removeEventListener('touchend', this.touchend);
					this.removeEventListener('touchleave', this.touchleave);
					this.removeEventListener('touchenter', this.touchenter);
				};

			}, false);

			// Apply event listener for when draging begins
			item.addEventListener('dragstart', function (e) {
				// Do nothing unless we're grabbing the handle
				if (onHandle) {

					// Declare the action being taken
					e.dataTransfer.effectAllowed = 'move';
					e.dataTransfer.setData('Text', this.id);

					// Flag the item in motion up in scope
					mover = this;

					// Apply styling class to the thing moving
					this.className += ' source';

					// Put the parent in the context
					var parentList = getOwningList(this);

					// Highlight all the trash drops
					var trash = document.querySelectorAll('.trash');
					for (var trashIdx = 0; trashIdx < trash.length; trashIdx++) {
						trash[trashIdx].className += ' active';
					}

					// Disable all contentEditables in the list
					var edits = parentList.querySelectorAll('[contentEditable=true]');
					for (var fieldIndex = 0; fieldIndex < edits.length; fieldIndex++)
						edits[fieldIndex].contentEditable = false;

					// Apply the cleanup event handler
					this.addEventListener('dragend', function (e) {

						// Mark us as off the drag handle
						onHandle = false;

						// Remove grab handle events
						this.querySelector('.handle').clearEvents();

						// Remove events from the rest of the list
						var listItems = parentList.querySelectorAll('li.item');
						for (var itemIndex = 0; itemIndex < listItems.length; itemIndex++) {
							var li = listItems[itemIndex];
							li.removeEventListener('dragenter', li.dragenterFunc, false);
							li.removeEventListener('dragover', li.dragoverFunc, false);
							li.removeEventListener('dragleave', li.dragleaveFunc, false);
							li.removeEventListener('drop', li.dropFunc, false);
						}

						// Strip styling classes
						this.className = this.className.replace(/[\s]*source/g, '');

						// Un-highlight all the trash drops
						var trash = document.querySelectorAll('.trash');
						for (var trashIdx = 0; trashIdx < trash.length; trashIdx++) {
							trash[trashIdx].className = trash[trashIdx].className.replace(/[\s]*active/g, '');
						}

						// Remove this event handler
						this.ondragend = false;

						// Autobalance the list if enabled
						if (parentList.autoBalance())
							parentList.balanceColumns();

						// Reenable editing by the power of closures
						for (var fieldIndex = 0; fieldIndex < edits.length; fieldIndex++)
							edits[fieldIndex].contentEditable = true;
					}, false);

					var listItems = getOwningList(this).querySelectorAll('li.item');
					for (var itemIndex = 0; itemIndex < listItems.length; itemIndex++) {

						var li = listItems[itemIndex];

						// Style potential drop targets as they're moved over
						li.dragUpdateFunc = function (e) {
							// Prevent response from the origenal item in the list
							if (this == mover) return false;

							// Apply styling class to potential drop targets
							var offset = getOffset(this);
							var verticalPosition = (e.pageY - offset.y) / this.offsetHeight;
							if (verticalPosition < 0.5) {
								this.className = this.className.replace(/[\s]*over-below/g, '');
								this.className += ' over-above';
							}
							else {
								this.className = this.className.replace(/[\s]*over-above/g, '');
								this.className += ' over-below';
							}
							return false;
						};
						li.dragenterFunc = function (e) {
							this.dragUpdateFunc(e);
						}
						li.addEventListener('dragenter', li.dragenterFunc, false);
						li.dragoverFunc = function (e) {
							// Cancel removal of styling class after leaving an element
							// if it was internal to the draggable item itself
							window.clearTimeout(this.leaveTimer);

							// Update the styling for above / below insertion
							this.dragUpdateFunc(e);

							// Cancel the default behavior of the drag
							if (e.preventDefault) e.preventDefault();
							return false;
						};
						li.addEventListener('dragover', li.dragoverFunc, false);
						li.dragleaveFunc = function (e) {
							// Schedule styling class cleanup if not canceled
							var leaveTarget = this;
							this.leaveTimer = window.setTimeout(function () {
								leaveTarget.className = leaveTarget.className.replace(/[\s]*over-above/g, '');
								leaveTarget.className = leaveTarget.className.replace(/[\s]*over-below/g, '');
							}, 5);
						};
						li.addEventListener('dragleave', li.dragleaveFunc, false);

						// Apply event listeners for dropping the item
						li.dropFunc = function (e) {
							// Prevent response if dropping on itself
							if (this == mover) return;

							// Insert the moved item above or below the target
							var offset = getOffset(this);
							var verticalPosition = (e.pageY - offset.y) / this.offsetHeight;
							if (verticalPosition < 0.5)
								this.parentNode.insertBefore(mover, this);
							else {
								if (this.nextSibling)
									this.parentNode.insertBefore(mover, this.nextSibling);
								else
									this.parentNode.appendChild(mover);
							}

							// Remove the styling class from the target
							this.className = this.className.replace(/[\s]*over-above/g, '');
							this.className = this.className.replace(/[\s]*over-below/g, '');

							// Stop the default events from occuring
							if (e.stopPropagation) e.stopPropagation();
							return false;
						};
						li.addEventListener('drop', li.dropFunc, false);

					}

				}
				else {
					e.preventDefault();
				}
			}, false);

		};

		// Only set up columns if there's more than one
		if (lists[listIndex].columns.length) {

			// Shortcut to the last column
			lists[listIndex].lastColumn = lists[listIndex].columns[lists[listIndex].columns.length - 1];

			// Calculate the pixel height of the list's content
			lists[listIndex].contentHeight = function () {
				var items = this.querySelectorAll('li.item:not(.proto)');
				var height = 0;
				for (var i = 0; i < items.length; i++)
					height += items[i].offsetHeight;
				return height;
			}

			// Distribute list items between columns
			lists[listIndex].balanceColumns = function () {
				var items = this.querySelectorAll('li.item:not(.proto)');
				var colHeight = 0;
				var currentCol = 0;

				// Determine the ideal column height
				var idealHeight = this.contentHeight() / this.columns.length;

				// Tally up the height of the items
				for (var i = 0; i < items.length; i++) {
					if (colHeight >= idealHeight) {
						colHeight = 0;
						currentCol++;
					}
					this.columns[currentCol].appendChild(items[i]);
					colHeight += items[i].offsetHeight;
				}

			}

		}

		// Apply dragability to each item on the list
		if (hero_system_5_revised_csx_opts.isEditable) {
			var items = lists[listIndex].querySelectorAll('li.item');
			for (var itemIndex = 0; itemIndex < items.length; itemIndex++)
				lists[listIndex].makeDragable(items[itemIndex]);
		}

		// Load any existing saved data
		lists[listIndex].load();

	}

	// Convert each add button
	var addButtons = context.querySelectorAll('.add');
	for (var addIndex = 0; addIndex < addButtons.length; addIndex++) {

		var button = addButtons[addIndex];
		var listName = button.className.match(/addto_([\w\d]+)/)[1];

		if (!button.title)
			button.title = 'Add list item';

		button.listOwner = context.querySelector('.list_' + listName);
		button.addEventListener('mouseup', function (e) {
			this.listOwner.addItem();
		});

	}

	// Convert each balance button
	var balanceButtons = context.querySelectorAll('.balance');
	for (var balanceIndex = 0; balanceIndex < balanceButtons.length; balanceIndex++) {

		var button = balanceButtons[balanceIndex];
		var listName = button.className.match(/balance_([\w]+)/)[1];

		if (!button.title)
			button.title = 'Balance list columns';

		button.listOwner = context.querySelector('.list_' + listName);
		button.addEventListener('mouseup', function (e) {
			this.listOwner.balanceColumns();
		});

	}

	// Hook up each auto-balance toggle
	var autoButtons = context.querySelectorAll('.autobalance');
	for (var autoIndex = 0; autoIndex < autoButtons.length; autoIndex++) {

		var button = autoButtons[autoIndex];
		var listName = button.className.match(/autobalance_([\w]+)/)[1];
		var listOwner = context.querySelector('.list_' + listName);
		listOwner.autoBalanceToggle = autoButtons[autoIndex];
		listOwner.autoBalance = function () {
			if (this.autoBalanceToggle.value() == 1)
				return true;
			else
				return false;
		}

		button.title = 'Auto-balance columns';

	}

	// Convert each trash drop
	var trashBins = context.querySelectorAll('.trash');
	for (var trashIndex = 0; trashIndex < trashBins.length; trashIndex++) {

		// Set up the trash drop point
		var trash = trashBins[trashIndex];
		trash.title = 'Drag here to delete';

		// Style the trash drop point as the item moves over it
		trash.addEventListener('dragenter', function (e) {
			this.className += ' over';
			return false;
		}, false);
		trash.addEventListener('dragover', function (e) {
			// Cancel removal of styling class after leaving an element
			// if it was internal to the draggable item itself
			window.clearTimeout(this.leaveTimer);

			// Cancel the default behavior of the drag
			if (e.preventDefault) e.preventDefault();
			return false;
		}, false);
		trash.addEventListener('dragleave', function () {
			// Schedule styling class cleanup if not canceled
			var leaveTarget = this;
			this.leaveTimer = window.setTimeout(function () {
				leaveTarget.className = leaveTarget.className.replace(/[\s]*over/g, '');
			}, 5);
		}, false);

		// Remove the item being moved if dropped in the trash
		trash.addEventListener('drop', function (e) {
			// Remove the moving item itself
			mover.parentNode.removeChild(mover);

			// Remove the styling class from the trash
			this.className = this.className.replace(/[\s]*over/g, '');

			// Stop the default events from occuring
			if (e.stopPropagation) e.stopPropagation();
			return false;
		}, false);

	}
	console.groupEnd();
}

/**
 * Pips Interface Control
 * @param {DOM} context DOM Node
 * @returns {null}
 * @instance
 * @namespace
 */
function hero_system_5_revised_csx_pips(context) {
	console.groupCollapsed("hero_system_5_revised_csx_pips(context)...");

	// Default the context if not set
	if (!context) context = document;

	// Create the pips context menu if needed
	var pipsMenu = hero_system_5_revised_csx_opts.uiContainer.querySelector('#pipsMenu');
	if (!pipsMenu) {
		pipsMenu = document.createElement('menu');
		pipsMenu.id = 'pipsMenu';
		pipsMenu.setAttribute('type', 'context');

		var showHide = document.createElement('menuitem');
		showHide.label = 'Hide Pips';
		showHide.onclick = function () {
			var targetField = this.parentNode.currentField;

			if (targetField.value().match(/[\s]*hidden/)) {
				targetField.valueCache = targetField.value().replace(/[\s]*hidden/g, '');
				targetField.style.opacity = '1.0';
			}
			else {
				targetField.valueCache += ' hidden';
				targetField.style.opacity = '0.1';
			}
			targetField.innerHTML = '';
			targetField.render();
		}

		pipsMenu.appendChild(showHide);
		hero_system_5_revised_csx_opts.uiContainer.appendChild(pipsMenu);
	}

	// Convert each pips field
	var pipsFields = context.querySelectorAll('.pips');
	for (var i = 0; i < pipsFields.length; i++) {

		var field = pipsFields[i];

		// Skip list item prototype fields
		if (field.parentNode.className.match(/proto/))
			continue;

		// Set the pixel threshold for each pip
		field.pipThresholds = [0, 14, 28, 42, 56, 73, 87, 101, 115, 129, 146, 160];
		field.pipWidth = 15.0;
		field.pipRadius = 6.0;
		field.pipStrokeColor = '#000'; //'#19110E';
		field.pipStrokeThickness = 0.6;

		// Set context menu if needed
		if (hero_system_5_revised_csx_opts.isEditable && field.className.match(/pips_canHide/)) {
			field.setAttribute('contextmenu', 'pipsMenu');
			field.addEventListener('mousedown', function () {
				this.rmousedown();
			}, false);
		}

		// Gets the total number of possible pips for the field
		field.range = function () {

			// Return cached value if it exists
			if (this.rangeCache != null)
				return this.rangeCache;

			// Get the range from the class, cache, and return
			var range = this.className.match(/pipsRange_[\d]+/)[0].substring(10);
			this.rangeCache = range;
			return range;

		};

		// Gets the current field value from text or image
		field.value = function () {

			// Return the cached value if it exists
			if (this.valueCache != null)
				return this.valueCache.toString();

			// Get the value from the text content, cache, and return
			var value = this.innerHTML;

			// Catch and fix rare cases of HTML being saved instead of a number
			if (isNaN(value)) {
				var pips = this.querySelectorAll('.pipOn');
				if (pips)
					value = pips.length;
				else
					value = 0;
			}

			if (this.innerHTML == '') value = 0;
			this.valueCache = value;
			return value.toString();

		};

		// Converts the content to their visual representation
		field.render = function () {

			// Skip hidden fields
			var allowEdit = true;
			if (this.value()) {
				if (this.value().match(/[\s]*hidden/)) {
					allowEdit = false;
					if (hero_system_5_revised_csx_opts.isEditable)
						this.style.opacity = '0.1';
					else {
						this.innerHTML = '';
						return;
					}
				}
			}

			// Skip fields with a value of -1
			var intVal = parseInt(this.value());
			if (intVal == -1)
				return;

			// Replace the contents with the appropriate pips
			var border = document.createElement('div');
			border.className = 'pipBorder';

			this.innerHTML = '';
			for (var i = this.range() - 1; i >= 0; i--) {
				var pip = document.createElement('div');
				pip.value = this.range() - i;
				pip.className = 'pip';
				pip.className += (pip.value <= intVal) ? ' pipOn' : ' pipOff';
				pip.style.right = this.pipThresholds[i] + 'px';
				pip.appendChild(border.cloneNode(false));

				if (allowEdit && hero_system_5_revised_csx_opts.isEditable) {
					pip.addEventListener('click', function () { this.parentNode.click(this.value); }, false);
				}

				this.appendChild(pip);

			}

			// Activate the pips
			if (allowEdit && hero_system_5_revised_csx_opts.isEditable) {
				this.title = 'Click to set value';
				this.style.cursor = 'pointer';
			}

		};

		// Converts the value back from image to text
		field.unrender = function () {

			// Replace the contents with the appropriate value string
			this.innerHTML = this.value();

		};

		// Click event handler for the pips interface
		field.click = function (clickedValue) {

			// If the user clicks the current score, they probably want to reduce by one
			if (clickedValue == this.value())
				this.valueCache = clickedValue - 1;
			else
				this.valueCache = clickedValue;

			// Rerender the pips
			this.render();

			// Invoke the update event handler
			this.update();

			// Then we're done
			return;

		};

		// Right mouse down handler for menu control
		field.rmousedown = function (e) {
			pipsMenu.currentField = this;
			if (this.value().match(/[\s]*hidden/))
				pipsMenu.querySelector('menuitem').label = 'Show Pips';
			else
				pipsMenu.querySelector('menuitem').label = 'Hide Pips';
		}

		// Padds a value with leading zeros to length
		field.pad = function (value, digits) {

			value = value.toString();
			while (value.length < digits)
				value = '0' + value;

			return value;

		}

		// On Update event function, typicaly overriden
		field.update = function () {

		}

		// Convert the field value to pips display
		field.render();

	}
	console.groupEnd();
}
 
/**
 * Page Tab Control
 * @param {DOM} context DOM Node
 * @returns {null}
 * @instance
 * @namespace
 */
function hero_system_5_revised_csx_tab(context) {
	console.groupCollapsed("hero_system_5_revised_csx_tab(context)...");
	// Default the context if not set
	if (!context) context = document;

	// Convert each tab
	var tabs = context.querySelectorAll('.tab');
	for (var i = 0; i < tabs.length; i++) {
		var tab = tabs[i];

		// Gets the name of the page associated with the tab
		tab.page = function () {

			// Return the cached value if it exists
			if (this.pageCache != null)
				return this.pageCache;

			// Get the value from the text content, cache, and return
			var value = this.className.match(/tab_([\w]+)/)[1];
			this.pageCache = value;
			return value;

		};

		// Register the click event
		tab.addEventListener('click', function () {
			this.click();
		}, false);

		// Click event handler for the tabs interface
		tab.click = function () {
			var pageName = this.page();
			this.activate(pageName);
		};

		// Switch the active tab and sheet page
		tab.activate = function (pageName) {

			// Default the page name if the named one doesn't exist
			var tab = context.querySelector('.tab.tab_' + pageName);
			if (!tab)
				pageName = 'combat';

			// Remember the active tab across sessions
			var storageKey = window.location.hostname + window.location.pathname + "#lastPage"
			if (localStorage)
				localStorage[storageKey] = pageName;

			// Clear active class from current tab and page
			var activeTab = context.querySelectorAll('.tab.active');
			for (var i = 0; i < activeTab.length; i++)
				activeTab[i].className = activeTab[i].className.replace(/[\s]*active/g, '');

			var activePage = context.querySelectorAll('.page.active');
			for (var i = 0; i < activePage.length; i++)
				activePage[i].className = activePage[i].className.replace(/[\s]*active/g, '');

			// Make the proper page and tab active
			activeTab = context.querySelector('.tab.tab_' + pageName);
			activeTab.className += ' active';

			activePage = context.querySelector('.page.page_' + pageName);
			activePage.className += ' active';
		};

		// Go back to the most recent tab if available
		if (localStorage) {
			var storageKey = window.location.hostname + window.location.pathname + "#lastPage"
			if (localStorage[storageKey])
				tab.activate(localStorage[storageKey]);
			else
				tab.activate('gem');
		}
		else
			tab.activate('gem');
	}
	console.groupEnd();
}

/**
 * Tooltip Control
 * @param {DOM} context DOM Node
 * @returns {null}
 * @instance
 * @namespace
 */
function hero_system_5_revised_csx_tip(context) {
	console.groupCollapsed("hero_system_5_revised_csx_tip(context)...");

	// Default the context if not set
	if (!context) context = document;

	// Create the tool tip element of needed
	var tipBox = hero_system_5_revised_csx_opts.uiContainer.querySelector('.tipBox');
	if (!tipBox.eventsAttached) {

		// Hide the tip box when it loses focus
		tipBox.querySelector('.tipArea').addEventListener('blur', function (e) {
			this.parentNode.parentNode.activeField.hide();
		}, false);

		// Flag the tip box as having been configured
		tipBox.eventsAttached = true;

	}

	// Convert each tip field
	var tipFields = context.querySelectorAll('.tip');
	for (var i = 0; i < tipFields.length; i++) {

		tipFields[i].show = function (e) {

			// Provide a quick connection to the tip field
			tipBox.activeField = this;

			// Initialize the floater and contents
			var tipArea = tipBox.querySelector('.tipArea');
			if (this.innerHTML != '')
				tipArea.innerHTML = this.innerHTML;
			else
				tipArea.innerHTML = hero_system_5_revised_csx_opts.defaultFieldValue;
			tipArea.allowBlur = true;

			// Reveal the floater and focus
			tipBox.style.display = 'block';
			tipArea.focus();

			// Highlight the item
			this.parentNode.className += ' highlight';

			// Position the tip near the mouse
			this.move(e);
		}

		tipFields[i].move = function (e) {

			// Get wrapper offset
			var wrapper = tipBox.parentNode.parentNode;
			var element = wrapper;
			var containerX = 0;
			var containerY = 0;
			while (element.offsetParent) {
				containerX += element.offsetLeft;
				containerY += element.offsetTop;
				element = element.offsetParent;
			}

			// Calculate the tip's new position
			var posX = Math.min(wrapper.offsetWidth - tipBox.offsetWidth, (e.pageX - containerX) + 30);
			var posY = (e.pageY - containerY) + 30;

			// Position the box
			tipBox.style.left = posX + 'px';
			tipBox.style.top = posY + 'px';

		}

		tipFields[i].hide = function (e) {

			// Stop here if focus was lost to the edit controls
			var tipArea = tipBox.querySelector('.tipArea');
			if (!tipArea.allowBlur)
				return;

			// Write the tip box content back to the tip field
			if (tipArea.innerHTML != hero_system_5_revised_csx_opts.defaultFieldValue)
				tipBox.activeField.innerHTML = tipArea.innerHTML;
			// Don't store the default value
			else
				tipBox.activeField.innerHTML = '';

			// Remove the highlight
			this.parentNode.className = this.parentNode.className.replace(/ highlight/g, '');

			// Hide the tip box
			tipBox.style.display = 'none';

		}

		// Enable click to edit in sheet editing mode
		if (hero_system_5_revised_csx_opts.isEditable) {

			// On hover show edit prompt
			tipFields[i].title = "Click to edit tool tip";

			// On click open editing interface
			tipFields[i].addEventListener('click', function (e) {
				this.show(e);
			}, false);

		}
		// Use mouse over and track mouse for view mode
		else {

			// Assign a link down to the tip
			tipFields[i].parentNode.tooltip = tipFields[i];

			// Only show tool tips if they have content
			if (tipFields[i].innerHTML != '') {

				// On enter show the tip
				tipFields[i].parentNode.addEventListener('mouseover', function (e) {
					this.tooltip.show(e);
				}, false);

				// On move move the tip
				tipFields[i].parentNode.addEventListener('mousemove', function (e) {
					this.tooltip.move(e);
				}, false);

				// On leave hide the tip
				tipFields[i].parentNode.addEventListener('mouseout', function (e) {
					this.tooltip.hide(e);
				}, false);

			}
		}

	}
	console.groupEnd();
}

Back

Hero System 5th Edition (Revised) Character

Create Your Campaign

Just One More Step

Just A Little More Info

Use a Social Account