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

Chronicles of Darkness

Author: barrelv

Slug: CoD

Type: GameCharacter

System: World of Darkness

DST Source Code

HTML Template

<div class="wrapper csx">
		
	<div class="tabs">
		<a class="tab fluff tab_fluff" title="Characterization"></a>
		<a class="tab crunch tab_crunch active" title="Characteristics"></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;">
				
		<div class="pagehead">
			<div class="head">
				<span class="name readonly dsf dsf_name singlerow">Edit Character Name</span>
			</div>
			<span class="readonly dsf dsf_campaign">Campaign Name</span>
		</div>
		<div class="page page_crunch active">
				<!-- Attributes -->
				<div class="section">
					<div class="head">ATTRIBUTES</div>
					<div class="group threecolumn">
						Intelligence<span class="readonly pips pipsRange_5 dsf dsf_perception"></span><br />
						Wits<span class="readonly pips pipsRange_5 dsf dsf_intelligence"></span><br />
						Resolve<span class="readonly pips pipsRange_5 dsf dsf_wits"></span><br />
					</div>
					<div class="group threecolumn">
						Strength<span class="readonly pips pipsRange_5 dsf dsf_strength"></span><br />
						Dexterity<span class="readonly pips pipsRange_5 dsf dsf_dexterity"></span><br />
						Stamina<span class="readonly pips pipsRange_5 dsf dsf_stamina"></span><br />
					</div>
					<div class="group threecolumn">
						Presence<span class="readonly pips pipsRange_5 dsf dsf_charisma"></span><br />
						Manipulation<span class="readonly pips pipsRange_5 dsf dsf_manipulation"></span><br />
						Composure<span class="readonly pips pipsRange_5 dsf dsf_appearance"></span><br />
					</div>
				</div>
				
				<div class="section">
					<div class="threecolumn colspace">
						<div class="head">SKILLS</div>
						<ul>
							<li><u>Mental</u> (-3 unskilled)</li>
							<li><span class="readonly check dsf dsf_academics_favored"></span> Academics<span class="readonly pips pipsRange_5 dsf dsf_academics"></span> <i><span class="dsf dsf_academics_sp"></span></i></li>
							<li><span class="readonly check dsf dsf_computer_favored"></span> Computer<span class="readonly pips pipsRange_5 dsf dsf_computer"></span> <i><span class="dsf dsf_computer_sp"></span></i></li>
							<li><span class="readonly check dsf dsf_craft_favored"></span> Craft<span class="readonly pips pipsRange_5 dsf dsf_craft"></span> <i><span class="dsf dsf_craft_sp"></span></i></li>
							<li><span class="readonly check dsf dsf_investigation_favored"></span> Investigation<span class="readonly pips pipsRange_5 dsf dsf_investigation"> <i></span><span class="dsf dsf_investigation_sp"></span></i></li>
							<li><span class="readonly check dsf dsf_medicine_favored"></span> Medicine<span class="readonly pips pipsRange_5 dsf dsf_medicine"></span> <i><span class="dsf dsf_medicine_sp"></span></i></li>
							<li><span class="readonly check dsf dsf_occult_favored"></span> Occult<span class="readonly pips pipsRange_5 dsf dsf_occult"></span> <i><span class="dsf dsf_occult_sp"></span></i></li>
							<li><span class="readonly check dsf dsf_politics_favored"></span> Politics<span class="readonly pips pipsRange_5 dsf dsf_politics"></span> <i><span class="dsf dsf_politics_sp"></span></i></li>
							<li><span class="readonly check dsf dsf_science_favored"></span> Science<span class="readonly pips pipsRange_5 dsf dsf_science"></span> <i><span class="dsf dsf_science_sp"></span></i></li>
						</ul>
						<ul>
							<li><u>Physical</u> (-1 unskilled)</li>
							<li><span class="readonly check dsf dsf_athletics_favored"></span> Athletics<span class="readonly pips pipsRange_5 dsf dsf_athletics"></span> <i><span class="dsf dsf_athletics_sp"></span></i></li>
							<li><span class="readonly check dsf dsf_brawl_favored"></span> Brawl<span class="readonly pips pipsRange_5 dsf dsf_brawl"></span> <i><span class="dsf dsf_brawl_sp"></span></i></li>
							<li><span class="readonly check dsf dsf_drive_favored"></span> Drive<span class="readonly pips pipsRange_5 dsf dsf_drive"></span> <i><span class="dsf dsf_drive_sp"></span></i></li>
							<li><span class="readonly check dsf dsf_firearms_favored"></span> Firearms<span class="readonly pips pipsRange_5 dsf dsf_firearms"></span> <i><span class="dsf dsf_firearms_sp"></span></i></li>
							<li><span class="readonly check dsf dsf_larceny_favored"></span> Larceny<span class="readonly pips pipsRange_5 dsf dsf_larceny"></span> <i><span class="dsf dsf_larceny_sp"></span></i></li>
							<li><span class="readonly check dsf dsf_stealth_favored"></span> Stealth<span class="readonly pips pipsRange_5 dsf dsf_stealth"></span> <i><span class="dsf dsf_stealth_sp"></span></i></li>
							<li><span class="readonly check dsf dsf_survival_favored"></span> Survival<span class="readonly pips pipsRange_5 dsf dsf_survival"></span> <i><span class="dsf dsf_survival_sp"></span></i></li>
							<li><span class="readonly check dsf dsf_weaponry_favored"></span> Weaponry<span class="readonly pips pipsRange_5 dsf dsf_weaponry"></span> <i><span class="dsf dsf_weaponrysp"></span></i></li>
						</ul>
						<ul>
							<li><u>Social</u> (-1 unskilled)</li>
							<li><span class="readonly check dsf dsf_animalken_favored"></span> Animal Ken<span class="readonly pips pipsRange_5 dsf dsf_animalken"></span> <i><span class="dsf dsf_animalken_sp"></span></i></li>
							<li><span class="readonly check dsf dsf_empathy_favored"></span> Empathy<span class="readonly pips pipsRange_5 dsf dsf_empathy"></span> <i><span class="dsf dsf_empathy_sp"></span></i></li>
							<li><span class="readonly check dsf dsf_expression_favored"></span> Expression<span class="readonly pips pipsRange_5 dsf dsf_expression"></span> <i><span class="dsf dsf_expression_sp"></span></i></li>
							<li><span class="readonly check dsf dsf_intimidation_favored"></span> Intimidation<span class="readonly pips pipsRange_5 dsf dsf_intimidation"></span> <i><span class="dsf dsf_intimidation_sp"></span></i></li>
							<li><span class="readonly check dsf dsf_persuasion_favored"></span> Persuasion<span class="readonly pips pipsRange_5 dsf dsf_persuasion"></span> <i><span class="dsf dsf_persuasion_sp"></span></i></li>
							<li><span class="readonly check dsf dsf_socialize_favored"></span> Socialize<span class="readonly pips pipsRange_5 dsf dsf_socialize"></span> <i><span class="dsf dsf_socialize_sp"></span></i></li>
							<li><span class="readonly check dsf dsf_streetwise_favored"></span> Streetwise<span class="readonly pips pipsRange_5 dsf dsf_streetwise"></span> <i><span class="dsf dsf_streetwise_sp"></span></i></li>
							<li><span class="readonly check dsf dsf_subterfuge_favored"></span> Subterfuge<span class="readonly pips pipsRange_5 dsf dsf_subterfuge"></span> <i><span class="dsf dsf_subterfuge_sp"></span></i></li>
						</ul>
					</div>
					
				<div class="doublecolumn">
					<div class="threecolumn colspace">
						<div class="head">OTHER TRAITS</div>
						Virtue: <span class="dsf dsf_virtue right"></span><br />
						Vice: <span class="dsf dsf_vice right"></span><br />
						Size: <span class="dsf dsf_size right"></span><br />
						Speed: <span class="dsf dsf_speed right"></span><br />
						Defense: <span class="dsf dsf_defense right"></span><br />
						Armor: <span class="dsf dsf_armor right"></span><br />
						Initiative Mod: <span class="dsf dsf_init right"></span><br />
						Beats: <span class="readonly pips pipsRange_5 dsf dsf_beats"></span><br />
						Experience: <span class="dsf dsf_experience right"></span><br /><br /><br />
					</div>
					<div class="threecolumn" style="float: right">
						<div class="head">HEALTH</div>
						Max: <span class="readonly pips pipsRange_10 dsf dsf_health"></span><br />
						Current: <div class = "boxRange_10"><span class="readonly box dsf dsf_health1"></span><span class="readonly  box dsf dsf_health2"></span><span class="readonly  box dsf dsf_health3"></span><span class="readonly  box dsf dsf_health4"></span><span class="readonly  box dsf dsf_health5"></span><!--</div><div class = "">--> <span class="readonly  box dsf dsf_health6"></span><span class="readonly . box dsf dsf_health7"></span><span class="readonly  box dsf dsf_health8"></span><span class="readonly  box dsf dsf_health9"></span><span class="readonly  box dsf dsf_health10"></span> </div><br /><br />
						<div class="head">WILLPOWER</div>
						Max: <span class="readonly pips pipsRange_10 dsf dsf_willpower"></span><br />
						Current: <span class="readonly pips pipsRange_10 dsf dsf_current_will"></span><br /><br />
						<div class="head">INTEGRITY</div>
						Current: <span class="readonly pips pipsRange_10 dsf dsf_integrity"></span><br />
							<br />
						</div>
					<div class="threecolumn colspace">
				<!-- CONDITIONS -->
					<div class="head">CONDITIONS
						<span class="interface trash"></span>
						<span class="interface add addto_conditions" title="Add Condition"></span>
					</div>
					<ul class="group list list_conditions">
						<li class="proto item">
							<div class="handle"><div></div></div>
							<span class="edit dslf dslf_condition fullcolumn singlerow" defaultString="Condition">Condition</span>
							<span class="tip dslf dslf_tip"></span>
						</li>
						<span class="oldfields hidden">[{"condition":"condition","tip":"condition_tootip"}]</span>
						<span class="dsf dsf_conditions readonly hidden"></span>
					</ul>
					</div>
						<div class="threecolumn" style="float: right">
						<div class="head">ASPIRATIONS
							<span class="interface trash"></span>
							<span class="interface add addto_aspirations" title="Add Aspiration"></span>
						</div>
						<ul class="group list list_aspirations">
							<li class="proto item">
								<div class="handle"><div></div></div>
								<span class="edit dslf dslf_aspiration fullcolumn singlerow" defaultString="Aspiration">Aspiration</span>
								<span class="tip dslf dslf_tip"></span>
							</li>
							<span class="oldfields hidden">[{"name":"specialty_type","rating":"specialty_value"}]</span>
							<span class="dsf dsf_aspirations readonly hidden"></span>
						</ul>
					</div>
				<!-- Attacks -->
				<div class="section attacks doublecolumn">
					<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="dmg">Dmg</span>
						<span class="range">Range</span>
						<span class="clip">Clip</span>
						<span class="init">Init</span>
						<span class="str">Str</span>
						<span class="size">Size</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_dmg dmg singlerow" defaultString="Dmg">Dmg</span>
							<span class="edit dslf typed dslf_range range singlerow" defaultString="Range">Range</span>
							<span class="edit dslf typed dslf_clip clip singlerow" defaultString="Clip">Clip</span>
							<span class="edit dslf typed dslf_init init singlerow" defaultString="Init">Init</span>
							<span class="edit dslf typed dslf_str str singlerow" defaultString="Str">Str</span>
							<span class="edit dslf typed dslf_size size singlerow" defaultString="Size">Size</span>
							<span class="tip dslf dslf_tip"></span>
						</li>
						<span class="oldfields hidden">[{"name":"attack_weapon","clip":"attack_clip","dmg":"attack_damage","init":"attack_init","str":"attack_str","size":"attack_size"}]</span>
						<span class="dsf dsf_attacks readonly hidden"></span>
					</ul>
				</div>
				<div class="section equipment doublecolumn">
					<div class="head">EQUIPMENT
						<span class="interface trash"></span>
						<span class="interface add addto_equipments" title="Add Equipment"></span>
					</div>
					<div class="labelrow">
						<span class="equipment">Equipment</span>
						<span class="durability">Durability</span>
						<span class="structure">Structure</span>
						<span class="size">Size</span>
						<span class="cost">Cost</span>
						<span class="bonus">Bonus</span>
					</div>
					<ul class="group list list_equipments">
						<li class="proto item">
							<div class="handle"><div></div></div>
							<span class="edit dslf typea dslf_equipment equipment singlerow" defaultString="Equipment">Equipment</span>
							<span class="edit dslf typed dslf_durability durability singlerow" defaultString="Durability">Durability</span>
							<span class="edit dslf typed dslf_structure structure singlerow" defaultString="Structure">Structure</span>
							<span class="edit dslf typed dslf_size size singlerow" defaultString="Size">Size</span>
							<span class="edit dslf typed dslf_cost cost singlerow" defaultString="Cost">Cost</span>
							<span class="edit dslf typed dslf_bonus bonus singlerow" defaultString="Bonus">Bonus</span>
							<span class="tip dslf dslf_tip"></span>
						</li>
						<span class="oldfields hidden">[{"equipment":"equipment_name","durability":"equipment_durability","structure":"equipment_structure","size":"equipment_size","cost":"equipment_cost","bonus":"equipment_bonus"}]</span>
						<span class="dsf dsf_equipments readonly hidden"></span>
					</ul>
				</div>
				<div class="section equipment doublecolumn">
					<div class="head">MERITS
						<span class="interface trash"></span>
						<span class="interface add addto_merits" title="Add Merits"></span>
					</div>
					<ul class="group list list_merits">
						<li class="proto item">
							<div class="handle"><div></div></div>
							<span class="edit dslf dslf_merit fullcolumn singlerow" defaultString="Merit">Merit</span>
							<span class="readonly pips pipsRange_5 dslf dslf_merit_value"></span>
							<span class="tip dslf dslf_tip"></span>
						</li>
						<span class="oldfields hidden">[{"merit":"merit_type","tip":"merit_tootip","merit_value":"merit_value"}]</span>
						<span class="dsf dsf_merits readonly hidden"></span>
					</ul>
				</div>
				</div>
				</div>
		</div>
			
		<div class="page page_fluff active">
			
			<!-- Biography -->
			<div class="section">
				<div class="head">BIOGRAPHY</div>
				<div class="group">
					<div class="portraitholder">
						<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>
			<!-- CONCEPT -->
			<div class="section">
				<div class="head">CONCEPT</div>
				<div class="group">
					<span class="dsf dsf_nature fullwidth" defaultString="Character concept...">Character concept...</span>
				</div>
			</div>
			<!-- BREAKING POINTS -->
			<div class="section">
				<div class="head">BREAKING POINTS</div>
				<div class="group">
					<span class="dsf dsf_breakingpoints fullwidth" defaultString="Breaking Points">What is the worst thing your character has ever done?<br />What is the worst thing your character can imagine himself doing?<br />What is the worst thing your character can imagine someone else doing?<br />What has your character forgotten? <br />What is the most traumatic thing that has ever happened to your character?</span>
				</div>
			</div>
			<div class="section">
				<div class="head">ALLIES & CONTACTS
					<span class="interface trash"></span>
					<span class="interface add addto_contacts" title="Add Contacts"></span>
				</div>
				<ul class="group list list_contacts">
					<li class="proto item">
						<div class="handle"><div></div></div>
						<span class="edit dslf dslf_contact fullcolumn singlerow" defaultString="Contact">Contact</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_contacts readonly hidden"></span>
				</ul>
			</div>
		</div>
		<div class="page_foot">
			<div class="head"></div>
			Character By <span class="align_right dsf dsf_player readonly">Player</span> &#8226; Sheet By <span class="align_left dsf dsf_dst_author readonly">Author</span>
		</div>
	</div>
	
</div>

CSS

/* Font Imports */

@import url(https://fonts.googleapis.com/css?family=Cinzel:400,700);
@import url(https://fonts.googleapis.com/css?family=EB+Garamond);
@import url(https://fonts.googleapis.com/css?family=Merriweather);


/* Component Includes */


/* 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 .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 .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 .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;
}

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

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

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

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

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

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

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

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

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

.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){
	background-color:rgba(0,0,0,0.05);
}

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

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

.csx .list .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 .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{
	line-height:inherit;
}

/* Pips Interface */

div.ds_CoD .boxRange_10{
	position:relative;
	z-index:2;
	float:right;
	top:3px;
	padding:0px 0px 0px 0px;
}

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

.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/common/images/misc/charsheet.png') top left no-repeat;
	background-size:
		730px 730px;
	background-color:#dedede;
	
	border-style:solid;
	border-width:1px;
	border-color:black;
	
	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:'EB Garamond',Sans Serif;
	font-size: 15px;
	line-height: 18px;
	color:black;
}

.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:728px;
	padding:0px 10px 80px 10px;
	margin:40px 0px 20px 0px;
	min-height: 795px;
	
	background-image:url('https://chainsawxiv.github.io/DST/common/images/misc/charsheet.png');
	background-position:top left;
	background-repeat:no-repeat;
	background-color:#dedede;
	
	border-style:solid;
	border-width:1px;
	border-color:black;
	
	font-family:'Merriweather', palatino, serif;
	font-size:14px;
	line-height:17px;
	color:black;
	
}

.csx .list.twocolumn .column{
	width:343px;
}
.csx .twocolumn li.item{
	width:345px;
}
/**.csx .threecolumn .column{
	width:210px;
	display:inline-block;
	vertical-align:top;
}**/
.csx .threecolumn {
	width:233px;
	display:inline-block;
	vertical-align:top;
	min-height:70px;
}
.csx .doublecolumn {
	width:480px;
	display:inline-block;
	vertical-align:top;
}
.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:70px;
}

.csx .halfwidth{
	width:348px;
}

.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 black;
	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:black;
}

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

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

/* 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:262px;
	bottom:-7px;
	z-index:4;
}

/* 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:black;
}
.csx .portraitholder .portrait .avatar_image {
    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:163px;
	margin-left:5px;
}

.editable .csx .attacks .weapon{
	width:155px;
	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 .dmg,
.csx .attacks .clip,
.csx .attacks .init,
.csx .attacks .str,
.csx .attacks .size{
	display:inline-block;
	width:35px;
	text-align:center;
	margin-left:3px;
}

.csx .attacks .range{
	display:inline-block;
	width:70px;
	text-align:center;
	margin-left:3px;
}

/* Equipment List */

.csx .equipment .equipment{
	width:163px;
	margin-left:5px;
}

.editable .csx .equipment .equipment{
	width:155px;
	margin-left:0px;
}
.editable .csx .equipment .labelrow .equipment{
	margin-left:16px;
}
.csx .equipment .labelrow span{
	display:inline-block;
	border-bottom:1px solid #A59270;
	line-height:12px;
}
.csx .equipment .durability,
.csx .equipment .structure{
	display:inline-block;
	width:68px;
	text-align:center;
	margin-left:3px;
}

.csx .equipment .size,
.csx .equipment .cost,
.csx .equipment .bonus{
	display:inline-block;
	width:40px;
	text-align:center;
	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:'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;
}

/* Splat Specific: Checks */

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

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

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

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

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

/* Splat Specific: Pips */

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

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

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

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

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

/* Splat Specific: Tabs */

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

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

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

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

/* Splat Specific: Tips */

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

div.ds_CoD .tipBox .contentBox{
	background:
		url('https://chainsawxiv.github.io/DST/common/images/misc/charsheet.png') top left no-repeat;
	background-size:
		730px 730px;
	background-color:#dedede;
	border-color:black;
}

div.ds_CoD .tipBox .contentBox .tipArea,
div.ds_CoD .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:'Merriweather', palatino, serif;
	color:black;
}

/* Splat Specific: Editable */

div.ds_CoD .dsf:not(.readonly),
div.ds_CoD .edit:not(.readonly),
div.ds_CoD .dsf_bio{
	font-family:'Merriweather', palatino, serif;
	font-size:11px;
}

/* Splat Specific: Sheet */

div.ds_CoD .main{
	background-image:url('https://chainsawxiv.github.io/DST/common/images/misc/charsheet.png');
	background-position:top left;
	background-repeat:no-repeat;
	background-color:#dedede;
	
	border-style:solid;
	border-width:1px;
	border-color:black;
	
	font-family:'Merriweather', palatino, serif;
	font-size:14px;
	line-height:17px;
	color:black;
}

div.ds_CoD .head{
	border-bottom:solid 1px black;
}

div.ds_CoD a{
	text-decoration:none;
	color:black;
}

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

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

div.ds_CoD .dsf.dsf_type{
	font-family:'Cinzel', palatino, serif;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  line-height:inherit;
}

JavaScript

// Global Options
csx_opts = {
	'setupCallback': function(item){CoD_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',
		'crunch.png',
		'crunch_hover.png',
		'equipment.png',
		'equipment_hover.png',
		'fb_back_bottom.png',
		'fb_back_main.png',
		'fb_back_top.png',
		'fluff.png',
		'fluff_hover.png',
		'grab.png',
		'grab_hover.png',
		'indent.png',
		'indent_active.png',
		'indent_hover.png',
		'italic.png',
		'italic_active.png',
		'italic_hover.png',
		'magic.png',
		'magic_hover.png',
		'tip.png',
		'tip_hover.png',
		'trash.png',
		'trash_active.png',
		'trash_hover.png',
		'underline.png',
		'underline_active.png',
		'underline_hover.png',
		'solar/pip_off.png',
		'solar/pip_off_hover.png',
		'solar/pip_on.png',
		'solar/pip_on_hover.png',
		'solar/tab01_active.png',
		'solar/tab01_inactive.png',
		'solar/tab02_active.png',
		'solar/tab02_inactive.png',
		'solar/tab03_active.png',
		'solar/tab03_inactive.png',
		'solar/tab04_active.png',
		'solar/tab04_inactive.png',
		'solar/check_off.png',
		'solar/check_off_hover.png',
		'solar/check_on.png',
		'solar/check_on_hover.png',
	],
};

// Master Startup
function CoD_dataPostLoad(data){

	
	csx_opts.defaultContext = document.getElementById(data.containerId);	
	csx_opts.uiContainer = csx_opts.defaultContext.querySelector('.uicontainer');
	csx_opts.isEditable = data.isEditable;
	data['context'] = document.getElementById(data['containerId']);
	data['debugThreshold'] = -1;
	
	CoD_convertBoxes(data);

	// 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.onload = function(){

		// Fix container properties
		csx_firstParentWithClass(csx_opts.defaultContext,'dynamic_sheet_container').style.overflow = 'visible';
		//csx_firstParentWithClass(csx_opts.defaultContext,'main-content-container').style.minWidth = '853px';
		
		// Set up the editing interface
		csx_opts.setupCallback();
		
	};
	document.body.appendChild(includes);
	
	// Preload rollover images 
	// Deferred to prevent blocking
	window.setTimeout(function(){
		if (document.images){
			for (var i = 0; i < csx_opts.preloadFiles.length; i++){
				var img = new Image();
				img.src = csx_opts.imagePath + csx_opts.preloadFiles[i];
			}
		}
	},500);
	
}

// Setup After Script Load
function CoD_setup(context){

	// Provide default context
	if (context == undefined)
		context = csx_opts.defaultContext;
	
	// Do setup for interfaces
	csx_pips(context);
	csx_check(context);
	csx_edit(context);
	csx_tip(context);
	csx_list(context);
	csx_tab(context);

}

// Shutdown Before Save
function CoD_dataPreSave(opts){
	
	// Set additional options
	opts['context'] = document.getElementById(opts['containerId']);

	CoD_unconvertBoxes(opts);

	// Default the context if not set
	var context = 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();		
		
}
///////////////////////////////////////////////////
// Box Interface Control ////////////////////////
///////////////////////////////////////////////////

// Applies a bunch of pips functionality to the specified element
function CoD_box(oElement,opts){

	// Store options
	oElement.setAttribute('optsImagePath',opts['imagePath']);
	oElement.setAttribute('optsIsEditable',opts['isEditable']);
	oElement.setAttribute('optsDebugThreshold',opts['debugThreshold']);
	
	// Parses the title from the class name
	oElement.getTitle = function(){
		
		// Get the column count from the element's class name
		var sTitle = this.className.match(/title_[\w\d\s]+/);
		if (sTitle) sTitle = sTitle[0].substring(6);
		return sTitle;
	
	};
	
	// Gets the field value from the embedded image or the text
	oElement.value = function(){
	
		// Get the value from the image if there is one
		if (this.getElementsByTagName('img').length){
			var sPath = this.getElementsByTagName('img')[0].src;
			var sValue = sPath.substring(sPath.length - 5,sPath.length - 4);
		}
		
		// If there's no image, get the value from the text
		else{
			var sValue = this.innerHTML;
			if (this.innerHTML == '') sValue = '0';
		}
		
		// Check the value for bad data, default if needed, and return
		if (sValue != '3' && sValue != '2' && sValue != '1' && sValue != '0'){
			this.error(1,"Invalid value for Box Element (Element Class: " + this.className + ")");
			return 0;
		}
		else return sValue;
		
	};
	
	// Converts the associated span element's contents to a pips image
	oElement.showBox = function(){
		
		// Get the image path from options or default
		if (this.getAttribute('optsImagePath')) var sPath = this.getAttribute('optsImagePath');
		else{
			this.error(2,'No imagePath specified in options for Checks element (Element Class: ' + this.className + ')');
			//sPath = 'https://chainsawxiv.github.io/DST/sheets/chainsawxiv_vampire/images/';
			sPath = 'https://chainsawxiv.github.io/DST/common/images/';
		}
		
		// Replace the contents with the appropriate check image
		if (this.value() == "2") this.innerHTML = '<img src="https://chainsawxiv.github.io/DST/common/images/misc/box-2.png" />' ;
		if (this.value() == "3") this.innerHTML = '<img src="https://chainsawxiv.github.io/DST/common/images/misc/box-3.png" />' ;
		if (this.value() == "0") this.innerHTML = '<img src="https://chainsawxiv.github.io/DST/common/images/misc/box-0.png" />' ;
		if (this.value() == "1") this.innerHTML = '<img src="https://chainsawxiv.github.io/DST/common/images/misc/box-1.png" />' ;
		
		// Activate the check
		this.activate();		
	
	};
	
	// Converts the associated span element's contents to a text value
	oElement.showValue = function(){
	
		// Replace the contents with the appropriate value string
		this.innerHTML = this.value();
	
	};
	
	// Assigns clickability to a pips image element
	oElement.activate = function(){
	
		// Don't actualy activate anything if we're not in edit mode
		if (this.getAttribute('optsIsEditable') != 'true') return;

		// Activate the element's pips interface
		this.onclick = this.click;
		
		// Set the element's alt text
		this.title = this.getTitle();
		if (!this.title) this.title = 'Click to set value';
		
		// Set the cursor for the item
		this.style.cursor = 'pointer';

	};
	
	// Click event handler for the pips interface
	oElement.click = function(){
	
		// Get the pips image that was clicked as a pips object
		var oImage = this.getElementsByTagName('img')[0];
		
		
		// Determine which pip the click was on and change the image
		if (this.value() == "1") {
			oImage.src = "https://chainsawxiv.github.io/DST/common/images/misc/box-2.png";
			//oLevel.value +=1;
		}
		else if (this.value()== "2") {
			oImage.src = "https://chainsawxiv.github.io/DST/common/images/misc/box-3.png";
			//oLevel.value +=1;
		}
		else if (this.value()== "3") {
			oImage.src = "https://chainsawxiv.github.io/DST/common/images/misc/box-0.png";
			//oLevel.value = 0;
		}
		else if (this.value() == "0") {
			oImage.src = "https://chainsawxiv.github.io/DST/common/images/misc/box-1.png";
			//this.value +=1;
		}
		//else oImage.src = "https://chainsawxiv.github.io/DST/common/images/misc/box-0.png";
		
		// Call the onUpdate event
		this.onUpdate();
		
	};

	// Error handling function - alerts on errors if bug reporting is on
	oElement.error = function(iImportance,sText){
		if (this.getAttribute('optsDebugThreshold')) var iThreshold = this.getAttribute('optsDebugThreshold');
		else iThreshold = 0;
		if (iImportance < iThreshold){
			alert(sText);
		}
	}

	// On Update event function, typicaly overriden
	oElement.onUpdate = function(){
	
	}	
	
	// Return the pips element for ease of refference
	return oElement;
	
}

// Converts all properly classed spans in the context to pips elements
function CoD_convertBoxes(opts){

	// Get all the spans in the context, whatever it may be
	if (opts['context']) var aSpans = opts['context'].getElementsByTagName('span');
	else var aSpans = document.getElementsByTagName('span');
	
	// Convert all the potential values in the context to pips
	var pTemp = {};
	for (var i = 0; i < aSpans.length; i++){
		if (aSpans[i].className.match(/box/)){
			pTemp = CoD_box(aSpans[i],opts);
			pTemp.showBox();
		}
	}
	
}

// Converts all the pips in the context back to thier basic values for saving
function CoD_unconvertBoxes(opts) {

	// Get the working context
	if (opts['context']) var aSpans = opts['context'].getElementsByTagName('span');
	else var aSpans = document.getElementsByTagName('span');
	
	// Flip all the pips in the context back to values
	for(var i = 0; i < aSpans.length; i++){
		if(aSpans[i].className.match(/box/)){
			aSpans[i].showValue();
		}
	}	
	
}

Back

Chronicles of Darkness

Create Your Campaign

Just One More Step

Just A Little More Info

Use a Social Account