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

Chronicles of Darkness

Author: barrelv

Slug: CoD

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://db4sgowjqfwig.cloudfront.net/campaigns/14253/assets/571429/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://db4sgowjqfwig.cloudfront.net/campaigns/14253/assets/571429/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://db4sgowjqfwig.cloudfront.net/campaigns/14253/assets/576530/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://db4sgowjqfwig.cloudfront.net/campaigns/14253/assets/576514/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://db4sgowjqfwig.cloudfront.net/campaigns/14253/assets/576515/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://db4sgowjqfwig.cloudfront.net/campaigns/14253/assets/576505/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://db4sgowjqfwig.cloudfront.net/campaigns/14253/assets/576505/tab01_inactive.png');
}
div.ds_CoD .tab.crunch.active{
	background-image:
		url('https://chainsawxiv.github.io/DST/common/images/crunch.png'),
		url('https://db4sgowjqfwig.cloudfront.net/campaigns/14253/assets/576499/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://db4sgowjqfwig.cloudfront.net/campaigns/14253/assets/576505/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://db4sgowjqfwig.cloudfront.net/campaigns/14253/assets/576505/tab01_inactive.png');
}
div.ds_CoD .tab.fluff.active{
	background-image:
		url('https://chainsawxiv.github.io/DST/common/images/fluff.png'),
		url('https://db4sgowjqfwig.cloudfront.net/campaigns/14253/assets/576499/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://db4sgowjqfwig.cloudfront.net/campaigns/14253/assets/571429/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://db4sgowjqfwig.cloudfront.net/campaigns/14253/assets/571429/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 = 'http://omnichron.net/external/op/src/vampire/';
		}
		
		// Replace the contents with the appropriate check image
		if (this.value() == "2") this.innerHTML = '<img src="https://db4sgowjqfwig.cloudfront.net/campaigns/14253/assets/574212/box-2.png" />' ;
		if (this.value() == "3") this.innerHTML = '<img src="https://db4sgowjqfwig.cloudfront.net/campaigns/14253/assets/574214/box-3.png" />' ;
		if (this.value() == "0") this.innerHTML = '<img src="https://db4sgowjqfwig.cloudfront.net/campaigns/14253/assets/574202/box-0.png" />' ;
		if (this.value() == "1") this.innerHTML = '<img src="https://db4sgowjqfwig.cloudfront.net/campaigns/14253/assets/574210/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://db4sgowjqfwig.cloudfront.net/campaigns/14253/assets/574212/box-2.png";
			//oLevel.value +=1;
		}
		else if (this.value()== "2") {
			oImage.src = "https://db4sgowjqfwig.cloudfront.net/campaigns/14253/assets/574214/box-3.png";
			//oLevel.value +=1;
		}
		else if (this.value()== "3") {
			oImage.src = "https://db4sgowjqfwig.cloudfront.net/campaigns/14253/assets/574202/box-0.png";
			//oLevel.value = 0;
		}
		else if (this.value() == "0") {
			oImage.src = "https://db4sgowjqfwig.cloudfront.net/campaigns/14253/assets/574210/box-1.png";
			//this.value +=1;
		}
		//else oImage.src = "http://db4sgowjqfwig.cloudfront.net/campaigns/14253/assets/574184/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

I'm sorry, but we no longer support this web browser. Please upgrade your browser or install Chrome or Firefox to enjoy the full functionality of this site.

Chronicles of Darkness

Create Your Campaign

Just One More Step

Just A Little More Info

Use a Social Account

I'm sorry, but we no longer support this web browser. Please upgrade your browser or install Chrome or Firefox to enjoy the full functionality of this site.