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

7th Sea 2nd. Ed. (Theah)

Author: larrylf

Slug: seventh_sea_2e

System: 7th Sea

DST Source Code

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

HTML Template

<div class="mywrapper">
      
     <div class="tabs">
	    <a class="tab fluff tab_fluff" title="Background"></a>
	    <a class="tab magic tab_magic" title="Loadout"></a>
	    <a class="tab crunch tab_crunch active" title="Traits"></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 class="dropdown_menu menu_virtues menufld_virtue"></div>
		<div class="dropdown_menu menu_hubrises menufld_hubris"></div>
		<div class="dropdown_menu menu_advantages menufld_advantage menupfx_cost"></div>	    
		<div class="dropdown_menu menu_backgrounds menufld_background menupfx_nation"></div>	    
		<div class="dropdown_menu menu_schools menufld_school"></div>	    
		<div class="dropdown_menu menu_magic menufld_sorcery menupfx_nation"></div>    
		<div class="dropdown_menu menu_unguent_major menufld_unguent"></div>    
		<div class="dropdown_menu menu_unguent_minor menufld_unguent"></div>    
		<div class="dropdown_menu menu_knights menufld_knight"></div>
		<div class="dropdown_menu menu_glamour_major menufld_glamour menupfx_trait"></div>    
		<div class="dropdown_menu menu_glamour_minor menufld_glamour menupfx_trait"></div>    
		<div class="dropdown_menu menu_matushkas_gifts menufld_gift"></div>    
		<div class="dropdown_menu menu_matushkas_restrictions menufld_restriction"></div>    
		<div class="dropdown_menu menu_sanderis_deals menufld_deal"></div>    
		<div class="dropdown_menu menu_sanderis_favors menufld_favor menupfx_deal"></div>    
		<div class="dropdown_menu menu_sorte_minor menufld_weave"></div>    
		<div class="dropdown_menu menu_sorte_major menufld_weave"></div>    
		<div class="dropdown_menu menu_alquimia menufld_juvenilia"></div>    
		<div class="dropdown_menu menu_futhark menufld_rune"></div>    
		<div class="dropdown_menu menu_apostat_major menufld_unguent"></div>    
		<div class="dropdown_menu menu_apostat_minor menufld_unguent"></div>    
		<div class="dropdown_menu menu_lwas menufld_lwa"></div>    
		<div class="dropdown_menu menu_gros_gran_met menufld_granmet menupfx_lwa"></div>    
		<div class="dropdown_menu menu_ti_gran_met menufld_granmet menupfx_lwa"></div>    
		<div class="dropdown_menu menu_mystirios menufld_god"></div>    
		<div class="dropdown_menu menu_tattoos menufld_tattoo"></div>    
		<div class="dropdown_menu menu_opt_combat menufld_maneuver"></div>    
    </div>
      
	<div class="hidden readonly dsf dsf_has_university"></div>
    <div class="hidden readonly dsf dsf_has_lycium"></div>
    <div class="hidden readonly dsf dsf_has_academy"></div>
    <div class="hidden readonly dsf dsf_has_saltydog"></div>
    <div class="hidden readonly dsf dsf_is_hard_to_kill"></div>
    <div class="hidden readonly dsf dsf_has_extra_virtue"></div>
    <div class="hidden readonly dsf dsf_has_extra_story"></div>
    <div class="hidden readonly dsf dsf_has_duelist"></div>
    <div class="hidden readonly dsf dsf_has_magic"></div>
    <div class="hidden readonly dsf dsf_has_combat"></div>
    <div class="hidden readonly dsf dsf_magic_count"></div>

<div class="main">
    <div class="pagehead">
        <div class="head">
         <span class="name readonly dsf dsf_name singlerow">Edit Character Name</span>
     </div>
       <span class="dsf dsf_summary typev singlerow" style="text-align:right;">Edit Character Summary</span> &#8226; 
             <span class="readonly dsf dsf_campaign">Campaign Name</span>
    </div>

    <div class="page page_crunch active">
 
	<div class="basic_info section halfwidth">
		<div class="header_left">Character</div>
		<div class="group"> 
		    <span class="mojo_label">Nation:</span> 
		    <span class="dsf bi_value dsf_nation"></span> 
			<span class="mojo_label">Religion:</span> 
			<span class="dsf bi_value dsf_religion"></span> 
			<span class="mojo_label">Secret Society:</span> 
			<span class="dsf bi_value dsf_secret_society"></span> 
			<span class="mojo_label">Reputation(s):</span>
			<span class="dsf dsf_reputation bi_value"></span>
			<span class="bi_value mojo_label"></span>
			<span class="bi_value mojo_label"></span>
			<span class="bi_value mojo_label"></span>
			<span class="bi_value mojo_label"></span>
			<div class="trait_score corruption">
				<span class="trait_score_name" style="width: 90px;">Corruption:</span> 
				<span class="readonly pips pipsRange_10 dsf dsf_corruption"></span>
			</div>
			<span class="mojo_label">GM Story Points:</span>
			<span class="dsf dsf_gm_story_pts bi_value"></span>
		</div>
	</div>

	<div class="trait_scores quarterwidth">
		<div class="header_left">Traits</div>
		<div class="trait_score brawn">
			<span class="trait_score_name">Brawn:</span> 
			<span class="readonly pips pipsRange_5 dsf dsf_brawn"></span>
		</div>
		<div class="trait_score finesse">
			<span class="trait_score_name">Finesse:</span> 
			<span class="readonly pips pipsRange_5 dsf dsf_finesse"></span>
		</div>
		<div class="trait_score resolve">
			<span class="trait_score_name">Resolve:</span> 
			<span class="readonly pips pipsRange_5 dsf dsf_resolve"></span>
		</div>
		<div class="trait_score wits">
			<span class="trait_score_name">Wits:</span> 
			<span class="readonly pips pipsRange_5 dsf dsf_wits"></span>
		</div>
		<div class="trait_score panache">
			<span class="trait_score_name">Panache:</span> 
			<span class="readonly pips pipsRange_5 dsf dsf_panache"></span>
		</div>
		<div class="trait_score wealth">
			<span class="trait_score_name" style="margin-top: 18px;">Wealth:</span> 
			<span class="readonly pips pipsRange_5 dsf dsf_wealth" style="margin-top: 18px;"></span>
		</div>
	</div>
		
	<div class="mojo_background halfwidth">
   			<div class="header_left">Backgrounds</div>
			<div class="character_background">
				<div class="mojo_background one">
					<span class="mojo_label">Background:</span> 
					<span class="dropdown menu_backgrounds menusel_background menusel_quirk"></span>
					<span class="dsf mojo_value dsf_background_1 menufill_background"></span>
					<span class="mojo_label">Quirk:</span> 
					<div  class="dsf mojo_quirk dsf_background_1_quirk menufill_quirk"></div>
				</div>
			</div>
			<div class="character_background">
				<div class="mojo_background two">
					<span class="mojo_label">Background:</span> 
					<span class="dropdown menu_backgrounds menusel_background menusel_quirk"></span>
					<span class="dsf mojo_value dsf_background_2 menufill_background"></span>
					<span class="mojo_label">Quirk:</span> 
					<div  class="dsf mojo_quirk dsf_background_2_quirk menufill_quirk"></div>
				</div>
			</div>
		</div>
    
	<div class="mojo_arcana thirdwidth">
   			<div class="header_left">Arcana</div>
			<div class="arcana">
				<div class="mojo_arcana_virtue">
					<span class="mojo_label">Virtue:</span> 
					<span class="dsf mojo_value menufill_virtue dsf_virtue"></span>
					<span class="dropdown menu_virtues menusel_virtue menusel_text"></span>
					<span class="mojo_label">Quirk:</span> 
					<div  class="dsf mojo_quirk menufill_text dsf_virtue_quirk"></div>
				</div>
				<div class="mojo_arcana_virtue_1 marker marker_for_has_extra_virtue">
					<span class="mojo_label">Virtue:</span> 
					<span class="dsf mojo_value menufill_virtue dsf_virtue_1"></span>
					<span class="dropdown menu_virtues menusel_virtue menusel_text"></span>
					<span class="mojo_label">Quirk:</span> 
					<div  class="dsf mojo_quirk menufill_text dsf_virtue_1_quirk"></div>
				</div>
				<div class="mojo_arcana_hubris">
					<span class="mojo_label">Hubris:</span> 
					<span class="dropdown menu_hubrises menusel_hubris menusel_text"></span>
					<span class="dsf mojo_value menufill_hubris dsf_hubris"></span>
					<span class="mojo_label">Quirk:</span> 
					<div  class="dsf mojo_quirk menufill_text dsf_hubris_quirk"></div>
				</div>
			</div>
		</div>

	<div class="skill_scores">
			<div class="header_center">Skills</div>
			<div class="skills_left">
				<div class="skill_score aim">
   					<span class="skill_score_name_left">Aim</span>
  					<span class="readonly pips pipsRange_5 dsf dsf_aim"></span>
				</div>
				<div class="skill_score athletics">
					<div class="marker skill_score_name_left marker_for_has_academy">Athletics</div> 
					<span class="readonly pips pipsRange_5 dsf dsf_athletics"></span>
				</div>
				<div class="skill_score brawl">
					<span class="skill_score_name_left">Brawl</span> 
					<span class="readonly pips pipsRange_5 dsf dsf_brawl"></span>
				</div>
				<div class="skill_score convince">
					<div class="marker skill_score_name_left marker_for_has_lycium">Convince</div>
					 <span class="readonly pips pipsRange_5 dsf dsf_convince"></span>
				</div>
				<div class="skill_score empathy">
					<span class="marker skill_score_name_left marker_for_has_university">Empathy</span>
					<span class="readonly pips pipsRange_5 dsf dsf_empathy"></span>
				</div>
				<div class="skill_score hide">
					<span class="skill_score_name_left">Hide</span> 
					<span class="readonly pips pipsRange_5 dsf dsf_hide"></span>
				</div>
				<div class="skill_score intimidate">
					<span class="marker skill_score_name_left marker_for_has_lycium marker_for_has_saltydog">Intimidate</span> 
					<span class="readonly pips pipsRange_5 dsf dsf_intimidate"></span>
				</div>
				<div class="skill_score notice">
					<span class="marker skill_score_name_left marker_for_has_university">Notice</span> 
					<span class="readonly pips pipsRange_5 dsf dsf_notice"></span>
				</div>
			</div>
			<div class="skills_right">
				<div class="skill_score perform">
					<span class="skill_score_name_right">Perform</span> 
					<span class="readonly pips pipsRange_5 dsf dsf_perform"></span>
				</div>
				<div class="skill_score ride">
					<span class="marker skill_score_name_right marker_for_has_academy">Ride</span>
					<span class="readonly pips pipsRange_5 dsf dsf_ride"></span>
				</div>
				<div class="skill_score sailing">
					<span class="marker skill_score_name_right marker_for_has_saltydog">Sailing</span>
					<span class="readonly pips pipsRange_5 dsf dsf_sailing"></span>
				</div>
				<div class="skill_score scholarship">
					<span class="marker skill_score_name_right marker_for_has_university">Scholarship</span> 
					<span class="readonly pips pipsRange_5 dsf dsf_scholarship"></span>
				</div>
				<div class="skill_score tempt">
					<span class="marker skill_score_name_right marker_for_has_lycium">Tempt</span> 
					<span class="readonly pips pipsRange_5 dsf dsf_tempt"></span>
				</div>
				<div class="skill_score theft">
					<span class="marker skill_score_name_right marker_for_has_saltydog">Theft</span> 
					<span class="readonly pips pipsRange_5 dsf dsf_theft"></span>
				</div>
				<div class="skill_score warfare">
					<span class="marker skill_score_name_right marker_for_has_academy">Warfare</span> 
					<span class="readonly pips pipsRange_5 dsf dsf_warfare"></span>
				</div>
				<div class="skill_score weaponry">
					<span class="skill_score_name_right">Weaponry</span> 
					<span class="readonly pips pipsRange_5 dsf dsf_weaponry"></span>
				</div>
			</div>
		</div>

    <!-- Advantages -->
	<div class="section adv_sec thirdwidth">
		<div class="header_left">Advantages 
		    <span class="interface trash"></span> 
		    <span class="interface add addto_advantages" title="Add Advantage"></span>
		</div>
		<ul class="group list list_advantages">
			<li class="proto item" >
				<div class="handle" title="Drag to re-arrainge list"><div></div></div> 
				<span class="edit dslf dslf_advantage story_value singlerow"></span>
				<span class="dropdown menu_advantages menusel_advantage menusel_text"></span> 
				<span class="dslf dslf_text" ></span>
			</li>
		    <span class="oldfields hidden">[{"advantage":"advantage","text":"advantage_desc"}]</span>
			<span class="dsf dsf_advantages readonly hidden"></span>
		</ul>
	</div>

	<span class="column story_col">
	
		<!-- Stories -->
		<div class="section story_box">
		  <div class="header_left">Story</div>
		  <span class="mojo_label">Name:</span>
		  <span class="story_value dsf dsf_story_1_name"></span>
		  <span class="mojo_label">Ending:</span>
		  <span class="story_value dsf dsf_story_1_end"></span>
		  <span class="mojo_label">Reward:</span>
		  <span class="story_value dsf dsf_story_1_reward"></span>
		  <br></br>
		  <span class="mojo_label">Step 1:</span>
		  <span class="story_value dsf dsf_story_1_step_1"></span>
		  <span class="mojo_label">Step 2:</span>
		  <span class="story_value dsf dsf_story_1_step_2"></span>
		  <span class="mojo_label">Step 3:</span>
		  <span class="story_value dsf dsf_story_1_step_3"></span>
		  <span class="mojo_label">Step 4:</span>
		  <span class="story_value dsf dsf_story_1_step_4"></span>
		  <span class="mojo_label">Step 5:</span>
		  <span class="story_value dsf dsf_story_1_step_5"></span>
		</div>
		
	    <div class="death_spiral">
		        <div class="marker marker_for_is_hard_to_kill htk_default">
		        	<img src="http://www.albireo.org/game/dst/images/Spiral_small.png" alt="" style="width:310px;height:200px;"/> 
		  </div>
		  <div class="marker marker_for_is_hard_to_kill htk_hard">
		  	<img src="http://www.albireo.org/game/dst/images/Spiral2_small.png" alt="" style="width:310px;height:200px;"/> 
		        </div>
		    </div>
		
		<div class="section story_box marker marker_for_has_extra_story">
		  <div class="header_left">Alternate Story</div>
		  <span class="mojo_label">Name:</span>
		  <span class="story_value dsf dsf_story_2_name"></span>
		  <span class="mojo_label">Ending:</span>
		  <span class="story_value dsf dsf_story_2_end"></span>
		  <span class="mojo_label">Reward:</span>
		  <span class="story_value dsf dsf_story_2_reward"></span>
		  <br></br>
		  <span class="mojo_label">Step 1:</span>
		  <span class="story_value dsf dsf_story_2_step_1"></span>
		  <span class="mojo_label">Step 2:</span>
		  <span class="story_value dsf dsf_story_2_step_2"></span>
		  <span class="mojo_label">Step 3:</span>
		  <span class="story_value dsf dsf_story_2_step_3"></span>
		  <span class="mojo_label">Step 4:</span>
		  <span class="story_value dsf dsf_story_2_step_4"></span>
		  <span class="mojo_label">Step 5:</span>
		  <span class="story_value dsf dsf_story_2_step_5"></span>
		</div>
		
	    <!--  Fencing Schools -->
		<div class="section fencing_banner thirdwidth marker marker_for_has_duelist marker_for_has_combat">
		  <div class="marker marker_for_has_duelist">
			<div class="header_left">Fencing Styles 
			    <span class="interface trash"></span> 
			    <span class="interface add addto_maneouvers" title="Add Fencing School"></span>
			</div>
			<ul class="group list list_maneouvers">
				<li class="proto item deliniated" >
					<div class="handle" title="Drag to re-arrainge list"><div></div></div> 
					<span class="edit dslf dslf_school fullcolumn singlerow"></span>
					<span class="dropdown menu_schools menusel_school menusel_special menusel_text"></span>
					Special: 
					<span class="dslf dslf_special singlerow"></span> 
					<br></br>
					<span class="dslf dslf_text" ></span>
				</li>
			    <span class="oldfields hidden">[{"school":"maneouver","special":"special maneouver","text":"maneouver_desc"}]</span>
				<span class="dsf dsf_maneouvers readonly hidden"></span>
			</ul>
		  </div>
		  <div class="marker marker_for_has_combat">
			<div class="header_left">Combat Maneuvers 
			</div>
		    <span class="inline_value">Slash: </span>
		    <span class="inline_value">Deal Weaponry wounds</span>
		    <span class="inline_value reset_row">Parry: </span>
		    <span class="inline_value">Prevent Weaponry wounds</span>
			<span class="edit reset_row inline_value dsf dsf_combat_maneuver menufill_maneuver"></span>
			<span class="dropdown menu_opt_combat menusel_maneuver menusel_text"></span>
		    <span class="reset_row inline_value menufill_text"></span>
  		  </div>
		</div>
			    
	</span> <!-- column -->
	</div>

    <div class="page page_magic active">

	<!-- Magic -->
	
	<div class="fullwidth_container section">
		<div class="header_left marker marker_for_has_magic">Sorcery:</div>
		<div class="header_center marker marker_for_has_magic no_sorcery">No Sorcery</div>
		<div class="sorcery_type marker marker_for_has_magic">
			<span class="mojo_label">Type:</span> 
			<span class="dsf story_value menufill_sorcery dsf_sorcery_name"></span>
			<span class="dropdown menu_magic menusel_sorcery"></span>
		</div>
		<br></br>
		 
		<div class="proto_sorcery sorcery_hexenwerk section fullwidth">
			<div class="header_left">Unguents Known 
			    <span class="interface trash"></span> 
			    <span class="interface add addto_sorcery_hexenwerk" title="Add Unguents"></span>
  	            <span class="interface balance balance_sorcery_hexenwerk"></span>
			</div>
			<ul class="group list list_sorcery_hexenwerk twocolumn">
				<div class="column colspace"></div>
				<div class="column"></div>
			<li class="proto item" >
				<div class="handle" title="Drag to re-arrainge list"><div></div></div> 
				<div>
				    <span class="list_label">Major Unguent:</span>
				    <span class="edit dslf dslf_major menufill_unguent unguent_value"></span>
	  				<span class="dropdown menu_unguent_major menusel_unguent menusel_text"></span>
				    <span class="dslf dslf_major_desc menufill_text desc_value"></span>
				</div>
				<div>
				    <span class="mojo_label">Minor Unguent:</span>
				    <span class="edit dslf dslf_minor1 menufill_unguent unguent_value"></span>
	  				<span class="dropdown menu_unguent_minor menusel_unguent menusel_text"></span>
				    <span class="dslf dslf_minor_desc1 menufill_text desc_value"></span>
				</div>
				<div>
				    <span class="mojo_label">Minor Unguent:</span>
				    <span class="edit dslf dslf_minor2 menufill_unguent unguent_value"></span>
  					<span class="dropdown menu_unguent_minor menusel_unguent menusel_text"></span>
			    	<span class="dslf dslf_minor_desc2 menufill_text desc_value"></span>
				</div>
			</li>
		    <span class="oldfields hidden">[{"major":"major unguent","minor1":"minor unguent","minor2":"minor unguent",
		      "major_desc":"major unguent","minor_desc1":"minor unguent","minor_desc2":"minor unguent"}]</span>
			<span class="dsf dsf_sorcery_hexenwerk readonly hidden"></span>
		    </ul>
		</div>
        
		<div class="proto_sorcery sorcery_knights_of_avalon section fullwidth">
		    <div class="group">
		        <span class="mojo_label">Embodiment Of:</span>
		        <span class="edit dsf dsf_sorcery_extra mojo_value menufill_knight"></span>
		        <span class="dropdown menu_knights menusel_knight menusel_major menusel_minor"></span>
		        <span class="mojo_label">Major Trait:</span>
		        <span class="menufill_major inline_value"></span>
		        <span class="inline_label">Minor Trait:</span>
		        <span class="menufill_minor inline_value"></span>
		    </div>
    		<br></br>
		    <div class="header_left">Glamours Known
			    <span class="interface trash"></span> 
			    <span class="interface add addto_sorcery_knights_of_avalon" title="Add Glamours"></span>
  	            <span class="interface balance balance_sorcery_knights_of_avalon"></span>
			</div>
			<ul class="group list list_sorcery_knights_of_avalon twocolumn">
				<div class="column colspace"></div>
				<div class="column"></div>
			<li class="proto item" >
				<div class="handle" title="Drag to re-arrainge list"><div></div></div> 
				<div>
				    <span class="list_label">Major Glamour:</span>
				    <span class="edit dslf dslf_major menufill_glamour unguent_value"></span>
	  				<span class="dropdown menu_glamour_major menusel_glamour menusel_text"></span>
				    <span class="dslf dslf_major_desc menufill_text desc_value"></span>
				</div>
				<div>
				    <span class="mojo_label">Minor Glamour:</span>
				    <span class="edit dslf dslf_minor1 menufill_glamour unguent_value"></span>
	  				<span class="dropdown menu_glamour_minor menusel_glamour menusel_text"></span>
				    <span class="dslf dslf_minor_desc1 menufill_text desc_value"></span>
				</div>
				<div>
				    <span class="mojo_label">Minor Glamour:</span>
				    <span class="edit dslf dslf_minor2 menufill_glamour unguent_value"></span>
  					<span class="dropdown menu_glamour_minor menusel_glamour menusel_text"></span>
			    	<span class="dslf dslf_minor_desc2 menufill_text desc_value"></span>
				</div>
			</li>
		    <span class="oldfields hidden">[{"major":"major unguent","minor1":"minor unguent","minor2":"minor unguent",
		      "major_desc":"major unguent","minor_desc1":"minor unguent","minor_desc2":"minor unguent"}]</span>
			<span class="dsf dsf_sorcery_knights_of_avalon readonly hidden"></span>
		    </ul>
		</div>
		
		<div class="proto_sorcery sorcery_dar_matushki section fullwidth">
		    <div class="header_left">Gifts &amp; Restrictions
			    <span class="interface trash"></span> 
			    <span class="interface add addto_sorcery_dar_matushki" title="Add Gifts"></span>
  	            <span class="interface balance balance_sorcery_dar_matushki"></span>
			</div>
			<ul class="group list list_sorcery_dar_matushki twocolumn">
				<div class="column colspace"></div>
				<div class="column"></div>
			<li class="proto item" >
				<div class="handle" title="Drag to re-arrainge list"><div></div></div> 
				<div>
				    <span class="list_label">Gift:</span>
				    <span class="edit dslf dslf_gift1 menufill_gift unguent_value"></span>
	  				<span class="dropdown menu_matushkas_gifts menusel_gift menusel_text"></span>
				    <span class="dslf dslf_gift1_desc menufill_text desc_value"></span>
				</div>
				<div>
				    <span class="mojo_label">Gift:</span>
				    <span class="edit dslf dslf_gift2 menufill_gift unguent_value"></span>
	  				<span class="dropdown menu_matushkas_gifts menusel_gift menusel_text"></span>
				    <span class="dslf dslf_gift2_desc menufill_text desc_value"></span>
				</div>
				<div>
				    <span class="mojo_label">Restriction:</span>
				    <span class="edit dslf dslf_restriction menufill_restriction unguent_value"></span>
  					<span class="dropdown menu_matushkas_restrictions menusel_restriction menusel_text"></span>
			    	<span class="dslf dslf_rest_desc menufill_text desc_value"></span>
				</div>
			</li>
		    <span class="oldfields hidden">[{"gift1":"major unguent","gift2":"minor unguent","restriction":"minor unguent",
		      "gift1_desc":"major unguent","gift2_desc":"minor unguent","rest_desc":"minor unguent"}]</span>
			<span class="dsf dsf_sorcery_dar_matushki readonly hidden"></span>
		    </ul>
		</div>
		
		<div class="proto_sorcery sorcery_porte section fullwidth">
		    <div class="header_left">Marks
			    <span class="interface trash"></span> 
			    <span class="interface add addto_sorcery_porte" title="Add Marks"></span>
  	            <span class="interface balance balance_sorcery_porte"></span>
			</div>
			<ul class="group list list_sorcery_porte twocolumn">
				<div class="column colspace"></div>
				<div class="column"></div>
			<li class="proto item" >
				<div class="handle" title="Drag to re-arrainge list"><div></div></div> 
				<div>
				    <span class="list_label">Major Mark:</span>
				    <span class="edit dslf dslf_major bi_value"></span>
				</div>
				<div>
				    <span class="mojo_label">Minor Mark:</span>
				    <span class="edit dslf dslf_minor1 mark_value"></span>
				</div>
				<div>
				    <span class="mojo_label">Minor Mark:</span>
				    <span class="edit dslf dslf_minor2 mark_value"></span>
				</div>
			</li>
		    <span class="oldfields hidden">[{"major":"major unguent","minor1":"minor unguent","minor2":"minor unguent"}]</span>
			<span class="dsf dsf_sorcery_porte readonly hidden"></span>
		    </ul>
		</div>
		
		<div class="proto_sorcery sorcery_sanderis section fullwidth">
		    <div class="header_left">Deals &amp; Favors
			    <span class="interface trash"></span> 
			    <span class="interface add addto_sorcery_sanderis" title="Add Gifts"></span>
  	            <span class="interface balance balance_sorcery_sanderis"></span>
			</div>
			<ul class="group list list_sorcery_sanderis twocolumn">
				<div class="column colspace"></div>
				<div class="column"></div>
			<li class="proto item" >
				<div class="handle" title="Drag to re-arrainge list"><div></div></div> 
				<div>
				    <span class="list_label">Deal:</span>
				    <span class="edit dslf dslf_deal menufill_deal mark_value"></span>
	  				<span class="dropdown menu_sanderis_deals menusel_deal menusel_text"></span>
				    <span class="dslf dslf_deal_desc menufill_text desc_value"></span>
				</div>
				<div>
				    <span class="list_label">Major Favor Price:</span>
				    <span class="edit dslf dslf_price unguant_value"></span>
				</div>
				<div>
				    <span class="mojo_label">Minor Favor:</span>
				    <span class="edit dslf dslf_minor1 menufill_favor bi_value"></span>
	  				<span class="dropdown menu_sanderis_favors menusel_favor menusel_text"></span>
				    <span class="dslf dslf_minor_desc1 menufill_text desc_value"></span>
				</div>
				<div>
				    <span class="mojo_label">Minor Favor:</span>
				    <span class="edit dslf dslf_minor2 menufill_favor bi_value"></span>
	  				<span class="dropdown menu_sanderis_favors menusel_favor menusel_text"></span>
				    <span class="dslf dslf_minor_desc2 menufill_text desc_value"></span>
				</div>
			</li>
		    <span class="oldfields hidden">[{"deal":"major unguent","price":"minor unguent","minor1":"minor unguent","minor2":"minor unguent",
		      "deal_desc":"major unguent","minor_desc1":"minor unguent","minor_desc2":"minor unguent"}]</span>
			<span class="dsf dsf_sorcery_sanderis readonly hidden"></span>
		    </ul>
		</div>
		
		<div class="proto_sorcery sorcery_sorte section fullwidth">
		    <div class="header_left">Tesse
			    <span class="interface trash"></span> 
			    <span class="interface add addto_sorcery_sorte" title="Add Gifts"></span>
  	            <span class="interface balance balance_sorcery_sorte"></span>
			</div>
			<b>Read:</b> Using Read costs a Raise during Action Sequences. Once used, you can see all the strands and Arcana for the rest of the Scene.
			<ul class="group list list_sorcery_sorte twocolumn">
				<div class="column colspace"></div>
				<div class="column"></div>
			<li class="proto item tag_sorte" >
				<div class="handle" title="Drag to re-arrainge list"><div></div></div> 
				<div>
				    <span class="list_label">Major Tessere:</span>
				    <span class="edit dslf dslf_major menufill_weave unguent_value"></span>
	  				<span class="dropdown menu_sorte_major menusel_weave menusel_text"></span>
				    <span class="dslf dslf_major_desc menufill_text desc_value"></span>
				</div>
				<div class="marker marker_for_magic_count firstmark">
				    <span class="mojo_label">Minor Tessere:</span>
				    <span class="edit dslf dslf_gift2 menufill_weave unguent_value"></span>
	  				<span class="dropdown menu_sorte_minor menusel_weave menusel_text"></span>
				    <span class="dslf dslf_minor_desc1 menufill_text desc_value"></span>
				</div>
				<div class="marker marker_for_magic_count secondmark">
				    <span class="mojo_label">Minor Tessere:</span>
				    <span class="edit dslf dslf_restriction menufill_weave unguent_value"></span>
  					<span class="dropdown menu_sorte_minor menusel_weave menusel_text"></span>
			    	<span class="dslf dslf_minor_desc2 menufill_text desc_value"></span>
				</div>
			</li>
		    <span class="oldfields hidden">[{"major":"major unguent","minor1":"minor unguent","minor2":"minor unguent",
		      "major_desc":"major unguent","minor_desc1":"minor unguent","minor_desc2":"minor unguent"}]</span>
			<span class="dsf dsf_sorcery_sorte readonly hidden"></span>
		    </ul>
		</div>
		
		<div class="proto_sorcery sorcery_alquimia section fullwidth">
		    <div class="group">
		        <span class="mojo_label">Magnum Opus:</span>
		        <span class="edit dsf dsf_sorcery_extra mojo_value"></span>
		    </div>
		    <div class="header_left">Juvenilia &amp; Alchemical Items
			    <span class="interface trash"></span> 
			    <span class="interface add addto_sorcery_alquimia" title="Add Juvenilia"></span>
  	            <span class="interface balance balance_sorcery_alquimia"></span>
			</div>
			<ul class="group list list_sorcery_alquimia twocolumn">
				<div class="column colspace"></div>
				<div class="column"></div>
			<li class="proto item" >
				<div class="handle" title="Drag to re-arrainge list"><div></div></div> 
				<div>
				    <span class="list_label">Juvenilia:</span>
				    <span class="edit dslf dslf_juvenilia menufill_juvenilia mark_value"></span>
	  				<span class="dropdown menu_alquimia menusel_juvenilia menusel_text"></span>
				    <span class="dslf dslf_desc menufill_text desc_value"></span>
				</div>
				<div>
				    <span class="list_label">Alchemical Item in Laboratorium:</span>
				    <span class="edit dslf dslf_lab1 desc_value"></span>
				</div>
				<div>
				    <span class="list_label">Alchemical Item in Laboratorium:</span>
				    <span class="edit dslf dslf_lab2 desc_value"></span>
				</div>
				<div>
				    <span class="list_label">Alchemical Item on Person:</span>
				    <span class="edit dslf dslf_carried desc_value"></span>
				</div>
			</li>
		    <span class="oldfields hidden">[{"juvenilia":"major unguent","desc":"minor unguent","lab1":"minor unguent","lab2":"minor unguent",
		      "carried":"major unguent"}]</span>
			<span class="dsf dsf_sorcery_alquimia readonly hidden"></span>
		    </ul>
		</div>
		
		<div class="proto_sorcery sorcery_galdr section fullwidth">
		    <div class="header_left">Futhark
			    <span class="interface trash"></span> 
			    <span class="interface add addto_sorcery_galdr" title="Add Futhark"></span>
  	            <span class="interface balance balance_sorcery_galdr"></span>
			</div>
			<ul class="group list list_sorcery_galdr twocolumn">
				<div class="column colspace"></div>
				<div class="column"></div>
			<li class="proto item" >
				<div class="handle" title="Drag to re-arrainge list"><div></div></div> 
				<div>
				    <span class="list_label">Rune:</span>
				    <span class="edit dslf dslf_rune1 menufill_rune mark_value"></span>
	  				<span class="dropdown menu_futhark menusel_rune menusel_text menusel_major menusel_minor"></span>
				    <span class="dslf dslf_desc1 menufill_text desc_value"></span>
				    <span class="list_label">Stort Merke:</span>
				    <span class="edit dslf dslf_major1 menufill_major bi_value"></span>
				    <span class="list_label">Litet Merke:</span>
				    <span class="edit dslf dslf_minor1 menufill_minor bi_value"></span>
				</div>
				<div>
				    <span class="mojo_label">Rune:</span>
				    <span class="edit dslf dslf_rune2 menufill_rune mark_value"></span>
	  				<span class="dropdown menu_futhark menusel_rune menusel_text menusel_major menusel_minor"></span>
				    <span class="dslf dslf_desc2 menufill_text desc_value"></span>
				    <span class="list_label">Stort Merke:</span>
				    <span class="edit dslf dslf_major2 menufill_major bi_value"></span>
				    <span class="list_label">Litet Merke:</span>
				    <span class="edit dslf dslf_minor2 menufill_minor bi_value"></span>
				</div>
			</li>
		    <span class="oldfields hidden">[{"rune1":"major unguent","major1":"minor unguent","minor1":"minor unguent",
		      "desc1":"","rune2":"major unguent","major2":"minor unguent","minor2":"minor unguent","desc2":""}]</span>
			<span class="dsf dsf_sorcery_galdr readonly hidden"></span>
		    </ul>
		</div>
		
		<div class="proto_sorcery sorcery_apostat_hexe section fullwidth">
			<div class="header_left">Unguents Known 
			    <span class="interface trash"></span> 
			    <span class="interface add addto_sorcery_apostat_hexe" title="Add Unguents"></span>
  	            <span class="interface balance balance_sorcery_apostat_hexe"></span>
			</div>
			<ul class="group list list_sorcery_apostat_hexe twocolumn">
				<div class="column colspace"></div>
				<div class="column"></div>
			<li class="proto item" >
				<div class="handle" title="Drag to re-arrainge list"><div></div></div> 
				<div>
				    <span class="list_label">Major Unguent:</span>
				    <span class="edit dslf dslf_major menufill_unguent unguent_value"></span>
	  				<span class="dropdown menu_apostat_major menusel_unguent menusel_text"></span>
				    <span class="dslf dslf_major_desc menufill_text desc_value"></span>
				</div>
				<div>
				    <span class="mojo_label">Minor Unguent:</span>
				    <span class="edit dslf dslf_minor1 menufill_unguent unguent_value"></span>
	  				<span class="dropdown menu_apostat_minor menusel_unguent menusel_text"></span>
				    <span class="dslf dslf_minor_desc1 menufill_text desc_value"></span>
				</div>
				<div>
				    <span class="mojo_label">Minor Unguent:</span>
				    <span class="edit dslf dslf_minor2 menufill_unguent unguent_value"></span>
  					<span class="dropdown menu_apostat_minor menusel_unguent menusel_text"></span>
			    	<span class="dslf dslf_minor_desc2 menufill_text desc_value"></span>
				</div>
			</li>
		    <span class="oldfields hidden">[{"major":"major unguent","minor1":"minor unguent","minor2":"minor unguent",
		      "major_desc":"major unguent","minor_desc1":"minor unguent","minor_desc2":"minor unguent"}]</span>
			<span class="dsf dsf_sorcery_apostat_hexe readonly hidden"></span>
		    </ul>
		</div>

		<div class="proto_sorcery sorcery_kap_sevi section fullwidth">
		    <div class="header_left">Gran Met
			    <span class="interface trash"></span> 
			    <span class="interface add addto_sorcery_kap_sevi" title="Add Gifts"></span>
  	            <span class="interface balance balance_sorcery_kap_sevi"></span>
			</div>
			<ul class="group list list_sorcery_kap_sevi twocolumn">
				<div class="column colspace"></div>
				<div class="column"></div>
			<li class="proto item" >
				<div class="handle" title="Drag to re-arrainge list"><div></div></div> 
				<div>
				    <span class="list_label">Lwa:</span>
				    <span class="edit dslf dslf_lwa menufill_lwa mark_value"></span>
	  				<span class="dropdown menu_lwas menusel_lwa menusel_text"></span>
				    <span class="dslf dslf_lwa_desc menufill_text desc_value"></span>
				</div>
				<div>
				    <span class="mojo_label">Gros Gran Met:</span>
				    <span class="edit dslf dslf_gros menufill_granmet bi_value"></span>
	  				<span class="dropdown menu_gros_gran_met menusel_granmet menusel_text"></span>
				    <span class="dslf dslf_gros_desc menufill_text desc_value"></span>
				</div>
				<div>
				    <span class="mojo_label">Ti Gran Met:</span>
				    <span class="edit dslf dslf_ti1 menufill_granmet bi_value"></span>
	  				<span class="dropdown menu_ti_gran_met menusel_granmet menusel_text"></span>
				    <span class="dslf dslf_ti1_desc menufill_text desc_value"></span>
				</div>
				<div>
				    <span class="mojo_label">Ti Gran Met:</span>
				    <span class="edit dslf dslf_ti2 menufill_granmet bi_value"></span>
	  				<span class="dropdown menu_ti_gran_met menusel_granmet menusel_text"></span>
				    <span class="dslf dslf_ti2_desc menufill_text desc_value"></span>
				</div>
			</li>
		    <span class="oldfields hidden">[{"lwa":"major unguent","gros":"minor unguent","ti1":"minor unguent","ti2":"minor unguent",
		      "lwa_desc":"major unguent","gros_desc":"minor unguent","ti1_desc":"minor unguent","ti2_desc":"minor unguent"}]</span>
			<span class="dsf dsf_sorcery_kap_sevi readonly hidden"></span>
		    </ul>
		</div>
		
		<div class="proto_sorcery sorcery_mystirios section fullwidth">
		    <div class="header_left">Initiated Gods
			    <span class="interface trash"></span> 
			    <span class="interface add addto_sorcery_mystirios" title="Add God"></span>
  	            <span class="interface balance balance_sorcery_mystirios"></span>
			</div>
			<ul class="group list list_sorcery_mystirios twocolumn">
			<div class="column colspace"></div>
			<div class="column"></div>
			<li class="proto item" >
				<div class="handle" title="Drag to re-arrainge list"><div></div></div> 
				<div>
				    <span class="list_label">God:</span>
				    <span class="edit dslf dslf_god menufill_god mark_value"></span>
	  				<span class="dropdown menu_mystirios menusel_god menusel_gtext menusel_text1 menusel_text2"></span>
				    <span class="dslf dslf_desc menufill_gtext desc_value"></span>
				    <span class="list_label">Mystirio:</span>
				    <span class="dslf dslf_mystery menufill_text1 desc_value"></span>
				    <span class="list_label">Apokalypsi:</span>
				    <span class="dslf dslf_revelation menufill_text2 desc_value"></span>
				</div>
			</li>
		    <span class="oldfields hidden">[{"god":"major unguent","desc":"minor unguent","mystery":"minor unguent","revelation":"minor unguent"}]</span>
			<span class="dsf dsf_sorcery_mystirios readonly hidden"></span>
		    </ul>
		</div>

		<div class="proto_sorcery sorcery_mohwoo section fullwidth">
		    <div class="header_left">Tattoos
			    <span class="interface trash"></span> 
			    <span class="interface add addto_sorcery_mohwoo" title="Add Futhark"></span>
  	            <span class="interface balance balance_sorcery_mohwoo"></span>
			</div>
		    <div class="group">
		        <span class="mojo_label">First Tattoo:</span>
		        <span class="edit dsf dsf_sorcery_extra menufill_tattoo bi_value"></span>
 				<span class="dropdown menu_tatoos menusel_tattoo menusel_text"></span>
		        <span class="dsf dsf_sorcery_extra_desc menufill_text desc_value"></span>
		    </div>
			<ul class="group list list_sorcery_mohwoo twocolumn">
				<div class="column colspace"></div>
				<div class="column"></div>
				<li class="proto item" >
					<div class="handle" title="Drag to re-arrainge list"><div></div></div> 
					<div>
					    <span class="list_label">Tattoo:</span>
					    <span class="edit dslf dslf_tat1 menufill_tattoo mark_value"></span>
		  				<span class="dropdown menu_tattoos menusel_tattoo menusel_text"></span>
					    <span class="dslf tat1_desc menufill_text desc_value"></span>
					</div>
					<div>
					    <span class="list_label">Tattoo:</span>
					    <span class="edit dslf dslf_tat2 menufill_tattoo mark_value"></span>
		  				<span class="dropdown menu_tattoos menusel_tattoo menusel_text"></span>
					    <span class="dslf tat2_desc menufill_text desc_value"></span>
					</div>
				</li>
		    <span class="oldfields hidden">[{"tat1":"major unguent","tat2":"minor unguent",
		      "tat1_desc":"","tat2_desc":"major unguent"}]</span>
			<span class="dsf dsf_sorcery_mohwoo readonly hidden"></span>
		    </ul>
		</div>
		      
		
	</div>
	</div>

    <div class="page page_fluff active">
    
    <!-- Equipment -->
    <div class="fullwidth_container section">
		<div class="header_left">Equipment
	    	<span class="interface trash"></span>
	    	<span class="interface add addto_equipment" title="Add Item"></span>
	    	<span class="interface balance balance_equipment"></span>
 	    </div>
	    <ul class="group list list_equipment threecolumn">
		    <div class="column colspace"></div>
		    <div class="column colspace"></div>
		    <div class="column"></div>
		    <li class="proto item">
			    <div class="handle"><div></div></div>
			    <span class="edit dslf dslf_name fullcolumn singlerow" >Item Name</span>
			    <span class="tip dslf dslf_tip"></span>
		    </li>
		    <span class="oldfields hidden">[{"name":"equipment_name","tip":"equipment_tootip"}]</span>
		    <span class="dsf dsf_equipment readonly hidden"></span>
	    </ul>
	</div>
    
    <!-- History -->
    <div class="fullwidth_container section">
		<div class="header_left">History</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>

    <!-- Description -->
    <div class="fullwidth_container section">
		<div class="header_left">Description</div>
		<div class="group">
			<span class="dsf dsf_desc fullwidth" defaultString="Character appearance...">Character appearance...</span>
		</div>
	</div>
    
    <div class="fullwidth_container section">
		<div class="header_left">Notes</div>
		<div class="group">
			<span class="dsf dsf_notes fullwidth" defaultString="Notes...">Notes...</span>
		</div>
	</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

/****************************
* This is the CSS for the DST.
* Copy and paste this directly into the CSS textarea on obsidianportal.com
*****************************/

/**  Common **/

.ds_seventh_sea_2e .clearfix::after {
    content: "";
    clear: both;
    display: table;
}


/*  Menu Interface */

.ds_seventh_sea_2e .deliniated {
    border-bottom:solid 1px #7b2226;
}

/* Checks Interface */

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

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

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

.ds_seventh_sea_2e .check .checkBorder{
     background-image:url('http://www.albireo.org/game/dst/images/check_border.svg');
     display:inline-block;
     height:12px;
     width:12px;
}

.ds_seventh_sea_2e .check .checkOff{
     background-image:url('http://www.albireo.org/game/dst/images/check_off.png');
     background-size:10px;
     background-position:1px 2px;
     background-repeat:no-repeat;
}

.ds_seventh_sea_2e.editable .check .checkOff:hover{
	  background-image:url('http://www.albireo.org/game/dst/images/check_off_hover.png');
	  background-size:10px;
	  background-position:1px 2px;
	  background-repeat:no-repeat;
}

.ds_seventh_sea_2e .check .checkOn{
     background-image:url('http://www.albireo.org/game/dst/images/check_on.png');
     background-size:10px;
     background-position:1px 2px;
     background-repeat:no-repeat;
}

.ds_seventh_sea_2e.editable .check .checkOn:hover{
	  background-image:url('http://www.albireo.org/game/dst/images/check_on_hover.png');
	  background-size:10px;
	  background-position:1px 2px;
	  background-repeat:no-repeat;
}

/* Edit Fields */

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

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

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

}

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

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

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

.ds_seventh_sea_2e .dsf ul,
.ds_seventh_sea_2e .edit ul{
     margin:0px;
     padding: 0px 0px 0px 20px;
     list-style: url('http://www.albireo.org/game/dst/images/bullet.png');
}
.ds_seventh_sea_2e .dsf ul li,
.ds_seventh_sea_2e .edit ul li{
     margin:0px;
     display:list-item;
}

/* Format Bar */

.ds_seventh_sea_2e .formatBar{
     background-image:
	url('http://www.albireo.org/game/dst/images/fb_back_top.png'),
		url('http://www.albireo.org/game/dst/images/fb_back_main.png'),
			url('http://www.albireo.org/game/dst/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;
}

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

.ds_seventh_sea_2e .formatBar .boldButton{
     background-image:url('http://www.albireo.org/game/dst/images/bold.png');
}
.ds_seventh_sea_2e .formatBar .boldButton:hover{
     background-image:url('http://www.albireo.org/game/dst/images/bold_hover.png');
}
.ds_seventh_sea_2e .formatBar .boldButton:active{
     background-image:url('http://www.albireo.org/game/dst/images/bold_active.png');
}

.ds_seventh_sea_2e .formatBar .italicButton{
     background-image:url('http://www.albireo.org/game/dst/images/italic.png');
}
.ds_seventh_sea_2e .formatBar .italicButton:hover{
     background-image:url('http://www.albireo.org/game/dst/images/italic_hover.png');
}
.ds_seventh_sea_2e .formatBar .italicButton:active{
     background-image:url('http://www.albireo.org/game/dst/images/italic_active.png');
}

.ds_seventh_sea_2e .formatBar .underlineButton{
     background-image:url('http://www.albireo.org/game/dst/images/underline.png');
}
.ds_seventh_sea_2e .formatBar .underlineButton:hover{
     background-image:url('http://www.albireo.org/game/dst/images/underline_hover.png');
}
.ds_seventh_sea_2e .formatBar .underlineButton:active{
     background-image:url('http://www.albireo.org/game/dst/images/underline_active.png');
}

.ds_seventh_sea_2e .formatBar .indentButton{
     background-image:url('http://www.albireo.org/game/dst/images/indent.png');
}
.ds_seventh_sea_2e .formatBar .indentButton:hover{
     background-image:url('http://www.albireo.org/game/dst/images/indent_hover.png');
}
.ds_seventh_sea_2e .formatBar .indentButton:active{
     background-image:url('http://www.albireo.org/game/dst/images/indent_active.png');
}

/* List Interface */

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

.ds_seventh_sea_2e .dropdown_item, dropdown_item:hover {
	display: block;
	float: left;
	height: 20px;
	width: 100%;
	right: 0;
	padding: 2px;
	border: none;
	color: black;
	text-align: left;
	background-color: inherit;
}

.ds_seventh_sea_2e .dropdown_item:hover {
	border: 2px inset #404040;
}

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

.ds_seventh_sea_2e .dropdown {
     position:relative;
     top:-1px;
     margin-right:0px;
}

.ds_seventh_sea_2e .trash{
     background-image:url('http://www.albireo.org/game/dst/images/trash.png');
}

.ds_seventh_sea_2e .trash.active{
     background-image:url('http://www.albireo.org/game/dst/images/trash_active.png');
}

.ds_seventh_sea_2e .trash.over{
     background-image:url('http://www.albireo.org/game/dst/images/trash_hover.png');
}

.ds_seventh_sea_2e .add{
     background-image:url('http://www.albireo.org/game/dst/images/add.png');
     cursor:pointer;
}

.ds_seventh_sea_2e .add:hover{
     background-image:url('http://www.albireo.org/game/dst/images/add_hover.png');
}

.ds_seventh_sea_2e .dropdown {
     background-image:url('http://www.albireo.org/game/dst/images/menu_btn.png');
     cursor:pointer;
}

.ds_seventh_sea_2e .dropdown:hover{
     background-image:url('http://www.albireo.org/game/dst/images/menu_btn_hover.png');
}

.ds_seventh_sea_2e .balance{
     background-image:url('http://www.albireo.org/game/dst/images/balance.png');
     cursor:pointer;
}

.ds_seventh_sea_2e .balance:hover{
     background-image:url('http://www.albireo.org/game/dst/images/balance_hover.png');
}

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

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

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

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

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

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

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

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

.ds_seventh_sea_2e .list li.over-below:before{
     content:"‚ñ∂";
     position:absolute;
     left:-10px;
     bottom:-9px;
     z-index:10;
}

.ds_seventh_sea_2e .list li.over-below:after{
     content:"‚óÄ";
     position:absolute;
     right:-10px;
     bottom:-9px;
     z-index:10;
}

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

.ds_seventh_sea_2e .list li.over-above:before{
     content:"‚ñ∂";
     position:absolute;
     left:-10px;
     top:-8px;
     z-index:10;
}

.ds_seventh_sea_2e .list li.over-above:after{
     content:"‚óÄ";
     position:absolute;
     right:-10px;
     top:-8px;
     z-index:10;
}

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

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

.ds_seventh_sea_2e .list li .handle div{
     background-image:url('http://www.albireo.org/game/dst/images/grab.png');
     background-position:2px 0px;
     background-repeat:no-repeat;
     height:12px;
     width:13px;
     margin:3px;
}

.ds_seventh_sea_2e .list li .handle div:hover{
     background-image:url('http://www.albireo.org/game/dst/images/grab_hover.png');
}

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

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

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

/* Pips Interface */

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

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

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

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

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

.ds_seventh_sea_2e .pipBorder{
     background-image:url('http://www.albireo.org/game/dst/images/pip_border.svg');
     display:inline-block;
     height:15px;
     width:15px;
}

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

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

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

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

.ds_seventh_sea_2e .pips svg{
     position:absolute;
}

/* Page Tabs */

div.ds_seventh_sea_2e .pagehead {
	padding-top:30px;
}

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

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

.ds_seventh_sea_2e .tab.crunch {
    background:
	url('http://www.albireo.org/game/dst/images/crunch.png') no-repeat 50% 50%,
	url('http://www.albireo.org/game/dst/images/tab01_inactive.png');
 	background-size:
        61% 70%,
        100% 100%;
}
.ds_seventh_sea_2e .tab.crunch:not(.active):hover{
     background-image:
	url('http://www.albireo.org/game/dst/images/crunch_hover.png'),
		url('http://www.albireo.org/game/dst/images/tab01_inactive.png');
}
.ds_seventh_sea_2e .tab.crunch.active{
     background-image:
	url('http://www.albireo.org/game/dst/images/crunch.png'),
		url('http://www.albireo.org/game/dst/images/tab01_active.png');
}

.ds_seventh_sea_2e .tab.magic{
     background:
	url('http://www.albireo.org/game/dst/images/magic.png') no-repeat 50% 50%,
									 url('http://www.albireo.org/game/dst/images/tab02_inactive.png');
									 background-size:
										61% 70%,
										    100% 100%;
}
.ds_seventh_sea_2e .tab.magic:not(.active):hover{
     background-image:
	url('http://www.albireo.org/game/dst/images/magic_hover.png'),
		url('http://www.albireo.org/game/dst/images/tab02_inactive.png');
}
.ds_seventh_sea_2e .tab.magic.active{
     background-image:
	url('http://www.albireo.org/game/dst/images/magic.png'),
		url('http://www.albireo.org/game/dst/images/tab02_active.png');
}

.ds_seventh_sea_2e .tab.equipment{
     background:
	url('http://www.albireo.org/game/dst/images/equipment.png') no-repeat 50% 50%,
									     url('http://www.albireo.org/game/dst/images/tab03_inactive.png');
	     background-size:
		61% 70%,
		    100% 100%;
}
.ds_seventh_sea_2e .tab.equipment:not(.active):hover{
     background-image:
	url('http://www.albireo.org/game/dst/images/equipment_hover.png'),
		url('http://www.albireo.org/game/dst/images/tab03_inactive.png');
}
.ds_seventh_sea_2e .tab.equipment.active{
     background-image:
	url('http://www.albireo.org/game/dst/images/equipment.png'),
		url('http://www.albireo.org/game/dst/images/tab03_active.png');
}

.ds_seventh_sea_2e .tab.fluff{
     background:
	url('http://www.albireo.org/game/dst/images/fluff.png') no-repeat 50% 50%,
									 url('http://www.albireo.org/game/dst/images/tab04_inactive.png');
									 background-size:
										61% 70%,
										    100% 100%;
}
.ds_seventh_sea_2e .tab.fluff:not(.active):hover{
     background-image:
	url('http://www.albireo.org/game/dst/images/fluff_hover.png'),
		url('http://www.albireo.org/game/dst/images/tab04_inactive.png');
}
.ds_seventh_sea_2e .tab.fluff.active{
     background-image:
	url('http://www.albireo.org/game/dst/images/fluff.png'),
		url('http://www.albireo.org/game/dst/images/tab04_active.png');
}

/* Tooltip Interface */

.ds_seventh_sea_2e .tip{
     display:none;
}

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

.ds_seventh_sea_2e.editable .tip {
	  display:inline-block;
	  float:right;
	  cursor: pointer;
	  position: relative;
	  top:4px;
	  height:12px;
	  width:12px;
	  background:url('http://www.albireo.org/game/dst/images/tip.png') no-repeat;
	  color:transparent;
	  overflow:hidden;
	  background-size:11px;
	  opacity:0.7;
}

.ds_seventh_sea_2e.editable .tip:hover{
	  background-image:url('http://www.albireo.org/game/dst/images/tip_hover.png');
}


.ds_seventh_sea_2e .tipBox{
     display:none;
     position:absolute;
     z-index:25;
     left:50%;
     top:50%;
}
.ds_seventh_sea_2e .dropdown_menu {
     display:none;
     position:absolute;
     z-index:25;
     border: 2px solid Brown;
     overflow-y: auto;
     max-height: 200px;
}

.ds_seventh_sea_2e .tipBox .corner.topLeft{
     background:url('http://www.albireo.org/game/dst/images/brass-corner-top-left.png') top left no-repeat;
     background-size:15px 15px;
     top:-1px;
     left:-1px;
}
.ds_seventh_sea_2e .tipBox .corner.topRight{
     background:url('http://www.albireo.org/game/dst/images/brass-corner-top-right.png') top right no-repeat;
     background-size:15px 15px;
     top:-1px;
     right:-1px;
}
.ds_seventh_sea_2e .tipBox .corner.bottomLeft{
     background:url('http://www.albireo.org/game/dst/images/brass-corner-bottom-left.png') bottom left no-repeat;
     background-size:15px 15px;
     bottom:-1px;
     left:-1px;
}
.ds_seventh_sea_2e .tipBox .corner.bottomRight{
     background:url('http://www.albireo.org/game/dst/images/brass-corner-bottom-right.png') bottom right no-repeat;
     background-size:15px 15px;
     bottom:-1px;
     right:-1px;
}
.ds_seventh_sea_2e .tipBox .corner{
     position:absolute;
     height:15px;
     width:15px;
     border-radius:3px;
}

.ds_seventh_sea_2e .tipBox .contentBox{
     min-height:100px;
     width:300px;
    background: url('http://www.albireo.org/game/dst/images/background.jpg') top left no-repeat;
 	background-size:
		730px 730px;
	background-color:#e4e5d5;
	
	border-style:solid;
	border-width:1px;
	border-color:#554220;
	
	box-shadow:0px 0px 15px rgba(0,0,0,0.3);
}

.ds_seventh_sea_2e .tipBox .contentBox .tipArea,
.ds_seventh_sea_2e .tipBox .contentBox .tipArea:hover{
     background-color:rgba(224,224,255,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-size: 15px;
     line-height: 18px;
     color:#554220;
}

.ds_seventh_sea_2e .dropdown_menu {
     background-color:rgba(243, 234, 227,0.9);
     margin:5px;
     border:1px solid rgba(0,0,0,0.7);
     padding:0px 5px 2px 5px;
     position:absolute;
}

.ds_seventh_sea_2e .tipBox .contentBox .tipArea ul{
     margin:0px;
     padding: 0px 0px 0px 20px;
     list-style: url('http://www.albireo.org/game/dst/images/bullet.png');
}
.ds_seventh_sea_2e .tipBox .contentBox .tipArea ul li{
     margin:0px;
     line-height:18px;
}

/* Sheet Content */

.ds_seventh_sea_2e .mywrapper {
	position:relative;
	width:930px;
	margin:0px auto;
}

.ds_seventh_sea_2e .main {

     position:relative;
     width:920px;
     padding:0px 10px 80px 10px;
     margin:40px 0px 20px 0px;
     min-height: 795px;
     
     background-color: #f8efe8;

     border-style:solid;
     border-width:1px;
     border-color:#554220;
     
     font-size:14px;
     line-height:17px;
 //    color:#554220;
     
}

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

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

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

.ds_seventh_sea_2e .halfwidth {
     width:348px;
}

.ds_seventh_sea_2e .quarterwidth {
     width:174px;
}

.ds_seventh_sea_2e .thirdwidth {
     width:256px;
}

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

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

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

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

.ds_seventh_sea_2e .hidden {
     display:none;
}

.ds_seventh_sea_2e .page {
     display:none;
}

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

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

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

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

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

/* Corner Brass */

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

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

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

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

.ds_seventh_sea_2e .brass_bottom{
     position:absolute;
     left:262px;
     bottom:-7px;
     z-index:4;
}

/* Caste Icons */

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

/* Portrait */

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

/* Editable Fields */

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

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

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

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

.ds_seventh_sea_2e .dsf.fullcolumn,
.ds_seventh_sea_2e .edit.fullcolumn{
     width:297px;
}

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

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

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

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

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

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

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

/* Attack List */

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

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

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

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


/* Misc */

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

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

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

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

.ds_seventh_sea_2e .check.autobalance .checkMark{
     background-position: 1px 3px;
     position: relative;
     left: 2px;
}
/* Component Includes */


div.ds_seventh_sea_2e .pipBorder {
	background-image:url('http://www.albireo.org/game/dst/images/pip_border.svg');
}

div.ds_seventh_sea_2e .pips .pipOff {
	background-image:url('http://www.albireo.org/game/dst/images/pip_off.png');
}

div.ds_seventh_sea_2e.editable .pips .pipOff:hover {
	 background-image:url('http://www.albireo.org/game/dst/images/pip_off_hover.png');
}

div.ds_seventh_sea_2e .pips .pipOn {
	background-image:url('http://www.albireo.org/game/dst/images/pip_on.png');
}

div.ds_seventh_sea_2e.editable .pips .pipOn:hover {
	 background-image:url('http://www.albireo.org/game/dst/images/pip_on_hover.png');
}

/* Markers */

.ds_seventh_sea_2e .marker_for_magic_count.firstmark.instance_1,
.ds_seventh_sea_2e .marker_for_magic_count.firstmark.instance_2,
.ds_seventh_sea_2e .marker_for_magic_count.firstmark.instance_3,
.ds_seventh_sea_2e .marker_for_magic_count.secondmark.instance_1,
.ds_seventh_sea_2e .death_spiral .htk_default.mark_0,
.ds_seventh_sea_2e .death_spiral .htk_hard.mark_1,
.ds_seventh_sea_2e .marker_for_has_extra_virtue.mark_1,
.ds_seventh_sea_2e .marker_for_has_magic:not(.no_sorcery).mark_1,
.ds_seventh_sea_2e .marker_for_has_magic.no_sorcery.mark_0	 {
	    display: block;
}

.ds_seventh_sea_2e .marker_for_magic_count.firstmark.instance_4,
.ds_seventh_sea_2e .marker_for_magic_count.secondmark.instance_2,
.ds_seventh_sea_2e .marker_for_magic_count.secondmark.instance_3,
.ds_seventh_sea_2e .marker_for_magic_count.secondmark.instance_4,
.ds_seventh_sea_2e .death_spiral .htk_default.mark_1,
.ds_seventh_sea_2e .death_spiral .htk_hard.mark_0,
.ds_seventh_sea_2e .marker_for_has_extra_virtue.mark_0,
.ds_seventh_sea_2e .marker_for_has_magic:not(.no_sorcery).mark_0,
.ds_seventh_sea_2e .marker_for_has_magic.no_sorcery.mark_1	{
	    display: none;
}	    		    

.ds_seventh_sea_2e .marker_for_has_duelist.marker_for_has_combat.mark_0 {
	visibility: hidden;
}

.ds_seventh_sea_2e .marker_for_has_duelist.marker_for_has_combat.mark_1 {
	visibility: visible;
}

.ds_seventh_sea_2e .marker_for_has_combat:not(.marker_for_has_duelist).mark_0,
.ds_seventh_sea_2e .marker_for_has_duelist:not(.marker_for_has_combat).mark_0 {
	    display: none;
}

.ds_seventh_sea_2e .marker_for_has_combat:not(.marker_for_has_duelist).mark_1,
.ds_seventh_sea_2e .marker_for_has_duelist:not(.marker_for_has_combat).mark_1 {
	    display: block;
}

.ds_seventh_sea_2e .marker_for_has_extra_story.mark_0 {
	visibility: hidden;
}

.ds_seventh_sea_2e .marker_for_has_extra_story.mark_1 {
	visibility: visible;
}
	
.ds_seventh_sea_2e .skill_scores .marker.skill_score_name_left.mark_1::before,
.ds_seventh_sea_2e .skill_scores .marker.skill_score_name_right.mark_1::after {
	content: "+";
}
.ds_seventh_sea_2e .skill_scores .marker.skill_score_name_left.mark_0::before,
.ds_seventh_sea_2e .skill_scores .marker.skill_score_name_right.mark_0::after {
	content: "";
}

/* Containers */
.ds_seventh_sea_2e .fullwidth_container {
	width: 800px;
	margin-right: 60px;
	margin-left: 60px;
}

.ds_seventh_sea_2e .proto_sorcery:not(.active) {
	display: none;
}

.ds_seventh_sea_2e .proto_sorcery.active {
	display: block;
}

.ds_seventh_sea_2e .header_left {
  display: block;
  clear: both;
  font-size: 18px;
  background: #7b2226;
  color: white;
  text-align: left;
  margin-top: 5px;
}

.ds_seventh_sea_2e .header_center {
  margin-top: 5px;
  display: block;
  font-size: 18px;
  background: #7b2226;
  color: white;
  text-align: center;
}

.ds_seventh_sea_2e .header_right {
  margin-top: 5px;
  display: block;
  clear: right;
  font-size: 18px;
  background: #7b2226;
  color: white;
  text-align: right;
}

.ds_seventh_sea_2e .basic_info {
  clear: both;
  float: left;
  margin-right: 20px;
}

.ds_seventh_sea_2e .adv_sec {
  float: right;
  margin-right:15px;
 // min-height: 400px;
  vertical-align: top;
}

.ds_seventh_sea_2e .header_skills {
  margin-top: 5px;
  display: block;
  clear: left;
  font-size: 18px;
  background: #7b2226;
  color: white;
  text-align: center;
}

.ds_seventh_sea_2e .story_box {
  float: left;
  clear: left;
  width: 290px;
}

.ds_seventh_sea_2e .story_col {
	width: 633px;
}

/************************
* Traits, skills, etc.
************************/

.ds_seventh_sea_2e .trait_scores {
  float: left;
  margin-right: 20px;
}

.ds_seventh_sea_2e .skill_scores {
  float: left;
  margin-left: 8px;
  margin-right: 8px;
}

.ds_seventh_sea_2e .advantage_sec {
  float: left:
}

.ds_seventh_sea_2e .fencing_banner {
	margin-left: 20px;
}

.ds_seventh_sea_2e .death_spiral {
  float: left;
  display:block;
  margin-left: 10px;
  margin-top: 15px;
  margin-bottom: 30px;
  object-fit: contain;
  width: 310px;
  height: 200px; 
}

.ds_seventh_sea_2e .trait_score {
  display: block;
  clear: left;
}


.ds_seventh_sea_2e .trait_score_name {
  display: block;
  float: left;
  width: 70px;
  font-weight: bold;
}

.ds_seventh_sea_2e .trait_score_score {
  display: block;
  float: left;
  width: 20px;
}

/**
* Skills
**/
.ds_seventh_sea_2e .skills_left {
  display: block;
  float: left;
  margin-right: 10px;
}

.ds_seventh_sea_2e .skills_right {
  display: block;
  float: right;
  margin-left: 10px;
}


.ds_seventh_sea_2e .skill_score_name_left {
  display: block;
  float: left;
  width: 90px;
  text-align: right;
  margin-right: 10px;
}

.ds_seventh_sea_2e .skill_score_name_right {
  display: block;
  float: right;
  width: 90px;
  text-align: left;
  margin-left: 10px;
}

.ds_seventh_sea_2e .sorcery_type {
	width: inherit;
}

.ds_seventh_sea_2e .mojo {
	float: left;
	min-height: 200px;
}

.ds_seventh_sea_2e .mojo_arcana {
  float: left;
  clear:left;
  display: block;
  margin-bottom: 5px;
}

.ds_seventh_sea_2e .mojo_background {
  float: left;
  display: block;
  margin-bottom: 5px;
}

.ds_seventh_sea_2e .list_label {
  float: left;
  display: inline;
  font-weight: bold;
  margin-right: 5px;
}

.ds_seventh_sea_2e .mojo_label {
  float: left;
  display: inline;
  clear: left;
  font-weight: bold;
  margin-right: 5px;
}

.ds_seventh_sea_2e .mojo_value {
  margin-top: 3px;
  display: inline;
  width: 100%;
}

.ds_seventh_sea_2e .mojo_quirk {
  width: 100%;
  height: 3;
}

.ds_seventh_sea_2e .reset_row {
	clear: left;
}

.ds_seventh_sea_2e .inline_label {
  float: left;
	  font-weight: bold;
  display: inline;
  margin-right: 5px;
}

.ds_seventh_sea_2e .inline_value {
   float: left;
  display: inline;
  margin-right:5px;
  min-width: 30px;
}

.ds_seventh_sea_2e .mark_value {
  display: inline-block;
  width: 70%;
  margin-top: 3px;
}
.ds_seventh_sea_2e .story_value {
  display: inline-block;
  width: 80%;
  margin-top: 3px;
}

.ds_seventh_sea_2e .unguent_value {
  display: inline-block;
  width: 50%;
  margin-top: 3px;
}
.ds_seventh_sea_2e .bi_value {
  display: inline-block;
  width: 60%;
  margin-top: 3px;
}
.ds_seventh_sea_2e .desc_value {
  display: inline-block;
  width: 100%;
  margin-top: 3px;
  margin-bottom:3px;
}

.ds_seventh_sea_2e .circle_empty {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 3px solid blue;
  margin: 1px; 
  display: inline-block;
}

.ds_seventh_sea_2e .circle_full {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 3px solid blue;
  background: gray;
  margin: 1px; 
}

div.ds_seventh_sea_2e .add,
div.ds_seventh_sea_2e .trash {
  position:relative;
}

Javascript

/*
 * This is the javascript specific to the seventh_sea_2e DST
 * In this example, we're using some javascript to update the ability modifiers when someone changes their
 * level or their ability score.
 *
 * The key is to use the callback functions to catch the right events.
 * Read the top comments in characters.js to get a better idea of how the callbacks work.
 *
 * Copy and paste this directly into the javascript textarea on obsidianportal.com
 */


// Global Options
seventh_sea_2e_opts = {
	'dataLoader':null,
	'data':null,
	'defaultContext':document,
	'isEditable':false,
    'setupCallback': function(item){seventh_sea_2e_setup(item);},
    'menuSelectCB': function(menu,item){seventh_sea_2e_menu_select(menu,item);},
    'uiContainer': function(){return document;},
    'defaultFieldValue':'Click to edit',
    'imagePath':'http://www.albireo.org/game/dst/images/',
    'preloadFiles':[
            'Spiral_small.png',
            'Spiral2_small.png',
		    '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',
		    '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'
		    ],
};

// Master Startup
function seventh_sea_2e_dataPreLoad(data) {
    seventh_sea_2e_opts.defaultContext = document.getElementById(data.containerId);
	
    if(typeof(Worker) !== "undefined") {
        if(!seventh_sea_2e_opts.dataLoader) {
        	seventh_sea_2e_opts.dataLoader = new Worker("http://www.albireo.org/game/dst/charsheets/7thSea/menudata.js");
        }
        seventh_sea_2e_opts.dataLoader.onmessage = function(event) {
        	seventh_sea_2e_opts.data = JSON.parse(event.data);
        	
        	seventh_sea_2e_setup();
        	seventh_sea_2e_setupMenu();            
        };
    } else {
        log( "Sorry! No Web Worker support.");
    }
}

function stopWorker() { 
	seventh_sea_2e_opts.dataLoader.terminate();
	seventh_sea_2e_opts.dataLoader = undefined;
}

function seventh_sea_2e_dataPostLoad(data){

    seventh_sea_2e_opts.uiContainer = seventh_sea_2e_opts.defaultContext.querySelector('.uicontainer');
    seventh_sea_2e_opts.isEditable = data.isEditable;

	// Fix container properties
	seventh_sea_2e_firstParentWithClass(seventh_sea_2e_opts.defaultContext,'dynamic_sheet_container').style.overflow = 'visible';
	//seventh_sea_2e_firstParentWithClass(seventh_sea_2e_opts.defaultContext,'main-content').style.minWidth = '950px';

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

// Field change callback
function seventh_sea_2e_dataChange(data) {
	var field = data.fieldName;  // no dsf_ prefix
	var value = data.fieldValue;
}

//Shutdown Before Save
function seventh_sea_2e_dataPreSave(){

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


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

    // Provide default context
    if (context == undefined)
    	context = seventh_sea_2e_opts.defaultContext;
    
    // Do setup for interfaces
    seventh_sea_2e_marker(context);
    seventh_sea_2e_pips(context);
    seventh_sea_2e_check(context);
    seventh_sea_2e_edit(context);
    seventh_sea_2e_tip(context);
    seventh_sea_2e_list(context);
    seventh_sea_2e_tab(context);
	seventh_sea_2e_setup_dropdowns(context);
	
	seventh_sea_2e_handle_sorte(context);
}

function seventh_sea_2e_setupMenu(){

	var context = seventh_sea_2e_opts.defaultContext;
	var menus = document.querySelectorAll('.dropdown_menu');

	for( var i= 0; i < menus.length; i++ ) {
		var menu = menus[i].className.match(/menu_([\w\d_]+)/)[1];
		seventh_sea_2e_create_menu(context, seventh_sea_2e_opts.data, menu);
	}
}

function seventh_sea_2e_menu_select(menu,item) {
	if( menu.match(/menu_advantages/) ) {
		seventh_sea_2e_evaluate_advantages();
	} else if( menu.match(/menu_magic/) ) {
		seventh_sea_2e_select_magic();
	}
}

function seventh_sea_2e_evaluate_advantages() {
	var advBins = document.querySelectorAll('.dslf_advantage');
	var has_university = 0;
	var has_lycium = 0;
	var has_academy = 0;
	var has_saltydog = 0;
	var is_hard_to_kill = 0;
	var has_extra_virtue = 0;
	var has_extra_story = 0;
    var has_duelist = 0;
    var has_magic = 0;
    var has_combat = 0;
    var magic_count = 0;
    
	for( var i = 0; i < advBins.length; i++ ) {
		var adv = advBins[i].innerHTML;

		if(adv == 'University') {
			has_university = 1;
		} else if(adv == 'Lyceum') {
			has_lycium = 1;
		} else if(adv == 'Academy') {
			has_academy = 1;
		} else if(adv == 'Salty Dog') {
			has_saltydog = 1;
		} else if(adv == 'Hard to Kill') {
			is_hard_to_kill = 1;
		} else if(adv == 'Seize Your Glory') {
			has_extra_virtue = 1;
		} else if(adv == 'Foul Weather Jack') {
			has_extra_story = 1;
		} else if(adv == 'Duelist Academy') {
			has_duelist = 1;
		} else if(adv == 'Sorcery') {
			has_magic = 1;
			magic_count++;
		} else if(adv == 'Student of Combat') {
			has_combat = 1;
		}
	}
	
	seventh_sea_2e_set_marker_field('has_university', has_university);
	seventh_sea_2e_set_marker_field('has_lycium', has_lycium);
	seventh_sea_2e_set_marker_field('has_academy', has_academy);
	seventh_sea_2e_set_marker_field('has_saltydog', has_saltydog);
	seventh_sea_2e_set_marker_field('is_hard_to_kill', is_hard_to_kill);
	seventh_sea_2e_set_marker_field('has_extra_virtue', has_extra_virtue);
	seventh_sea_2e_set_marker_field('has_extra_story', has_extra_story);
	seventh_sea_2e_set_marker_field('has_duelist', has_duelist);
	seventh_sea_2e_set_marker_field('has_magic', has_magic);
	seventh_sea_2e_set_marker_field('has_combat', has_combat);
	seventh_sea_2e_set_marker_field('magic_count', magic_count);
	
	if( has_magic ) {
		seventh_sea_2e_select_magic();
	}
}


function seventh_sea_2e_handle_sorte(context) {
	if( context == undefined || context == null ) return;
	
	if( context.className.match(/tag_sorte/) ) {
		var items = context.parentNode.querySelectorAll(".tag_sorte");
		var maxNum = 0;
		for( var i = 0; i < items.length; i++ ) {
			if( items[i].className.match(/proto/) ) continue;
			if( items[i].className.match(/tag_sorte/) ) {
				var instName = items[i].className.match(/instance_([\w\d_]+)/);
				if( instName ){
					var num = parseInt(instName[1]);
					if( num > maxNum ) maxNum = num;
				} else {
					var newInst = " instance_" + (maxNum+1);
					items[i].className += newInst;
					var marks = items[i].querySelectorAll(".marker");
					for( var j = 0; j < marks.length; j++ ) {
						marks[j].className += newInst;
					}
				}
			}
		} 
	}
}

function seventh_sea_2e_select_magic() {
	var numMagics = seventh_sea_2e_get_field("magic_count");
	var magicName = seventh_sea_2e_get_field("sorcery_name");
	
	if( numMagics == 0 || magicName == undefined || !magicName ) return;
	
	magicName = magicName.replace(/\s/g,'_');
	magicName = magicName.toLowerCase();
	
	var templates = document.querySelectorAll('.proto_sorcery');
	for( var i = 0; i < templates.length; i++ ) {
		var temp = templates[i];
		var tempName = temp.className.match(/sorcery_([\w\d_]+)/)[1];
		if( tempName == magicName ) {
			if( !temp.className.match(/active/) ) {
				temp.className += ' active';
			}
		} else {
			if( temp.className.match(/active/) ) {
				temp.className = temp.className.replace(/ active/,'');
			} 
		}
	}
}

/* common */

function seventh_sea_2e_firstParentWithClass(node,className) {
	while (node.parentNode) {
		node = node.parentNode;
		if (node.className){
			if (node.className.match(className))
				return node;
		}
	}
	return false;
}

// Marker Interface Control

function seventh_sea_2e_marker(context) {

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

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

		// Gets the field value from the embedded image or the text
		field.getValue = function(afield) {
			var markFor = afield;
			if( afield == undefined ) {
				var forList = this.className.match(/marker_for_([\w\d_]+)/g);
				var comb = 0;
				for( var j= 0; j < forList.length; j++ ) {
					comb |= this.getValue(forList[j].substring(11));
				}
				return comb;
			}
			
			var mrkField = document.querySelector('.dsf_'+markFor);
			
			// Get the value from the text content, cache, and return
			var value = parseInt(mrkField.innerHTML);
			if (mrkField.innerHTML == '') value = 0;
			return value;
		};

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

			// Replace the contents with the appropriate check image
			if( this.className.match(/mark_([\w\d_]+)/) ) {
				var existing = this.className.match(/mark_([\w\d_]+)/)[1];
				this.className = this.className.replace('mark_'+existing, 'mark_'+this.getValue());
			} else {
				this.className += ' mark_'+this.getValue();
			}
		};
		
		field.render();
	}
}

function seventh_sea_2e_set_marker_field( field, value ) {
	var fld = document.querySelector('.dsf_'+field);
	if( value != fld.innerHTML ) {
		fld.innerHTML = value;
		
		var mrks = document.querySelectorAll('.marker_for_'+field);
		for( var i = 0; i < mrks.length; i++ ) {
			mrks[i].render();
		}
	}
}

function seventh_sea_2e_get_field( field ) {
	var fld = document.querySelector('.dsf_'+field);
	if( fld ) return fld.innerHTML;
	
	return undefined;
}


//Checks Interface Control

function seventh_sea_2e_check(context){

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

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

		var field = checkFields[i];

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

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

			// Get the value from the text content, cache, and return
			var value = parseInt(this.innerHTML);
			if (this.innerHTML == '') value = 0;
			this.valueCache = value;
			return value;

		};

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

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

			// Activate the check
			this.activate();

		};

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

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

		};

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

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

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

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

		};

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

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

			// Rerender the field
			this.render();

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

		};

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

		}

		// Render the field
		field.render();

	}

}
//General Editing Control

function seventh_sea_2e_edit(context){

	function escape(string){
		// string = string.replace(/\\/g,'\\\&#92;');
		// string = string.replace(/"/g,'\\\&quot;');
		string = string.replace(/</g,'&lt;');
		return string;
	}

	function unescape(string){
		string = string.replace(/&lt;/g,'<');
		string = string.replace(/&gt;/g,'>');
		// string = string.replace(/\\"/g,'"');
		// string = string.replace(/\&quot;/g,'"');
		// string = string.replace(/\&#92;/g,'\\');
		return string;
	}

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

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

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

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

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

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

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

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

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

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

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

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

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

		}

		formatBar.keyup = function(e){

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

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

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

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

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

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

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

		}

		formatBar.hide = function(){

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

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

		}

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

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

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

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

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

	}

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

		var baseField = editFields[i];

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

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

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

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

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

		}

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

			this.innerHTML = unescape(this.innerHTML);

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

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

		}

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

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

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

		}

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

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

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

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

		}

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

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

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

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

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

		}

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

			if(!this.allowBlur)
				return;

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

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

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

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

		}

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

		}

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

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

		}

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

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

	}

}
//Dynamic List Control

function seventh_sea_2e_list(context, addItemCallback){

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

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

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

		return value;
	}

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

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

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

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

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

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

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

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

			var listData = (dataString) ? JSON.parse(dataString) : [];

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

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

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

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

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

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

		}

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

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

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

		}

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

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

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

			this.querySelector('.dsf_' + listName).innerHTML = dataString;

		}

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

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

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

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

//				Inject any provided data into the item
				if (data){
					var fields = newItem.querySelectorAll('.dslf');
					for (var fieldIndex = 0; fieldIndex < fields.length; fieldIndex++){
						var fieldName = fields[fieldIndex].className.match(/dslf_([\w\d_]+)/)[1];
						if (fieldName in data)
							fields[fieldIndex].innerHTML = data[fieldName];
					}
				}

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

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

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

			}

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

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

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

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

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

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

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

				}, false);

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

							var li = listItems[itemIndex];

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

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

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

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

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

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

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

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

						}

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

			};

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

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

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

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

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

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

				}

			}

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

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

	}

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

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

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

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

	}

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

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

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

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

	}

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

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

		button.title = 'Auto-balance columns';

	}

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

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

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

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

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

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

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

	}
}
//Pips Interface Control

function seventh_sea_2e_pips(context){

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

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

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

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

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

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

		var field = pipsFields[i];

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

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

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

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

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

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

		};

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

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

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

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

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

		};

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

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

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

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

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

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

				this.appendChild(pip);

			}

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

		};

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

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

		};

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

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

//			Rerender the pips
			this.render();

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

//			Then we're done
			return;

		};

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

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

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

			return value;

		} 

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

		}

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

	}
}
//Page Tab Control

function seventh_sea_2e_tab(context){

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

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

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

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

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

		};

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

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

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

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

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

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

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

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

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

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

}
//Tooltip Control

function seventh_sea_2e_tip(context){

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

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

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

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

	}

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

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

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

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

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

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

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

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

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

//			Calcs was lost to the edit controls
			var posX = Math.min(wrapper.offsetWidth - tipBox.offsetWidth, (e.pageX - containerX) + 30);
			var posY = (e.pageY - containerY) + 30;
			
			// Position the box
			tipBox.style.left = posX + 'px';
			tipBox.style.top = posY + 'px';
			
		}
		
		tipFields[i].hide = function(e){
		
			// Stop here if focus was lost to the edit controls
			var tipArea = tipBox.querySelector('.tipArea');
			if(!tipArea.allowBlur)
				return;

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

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

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

		}

//		Enable click to edit in sheet editing mode
		if (seventh_sea_2e_opts.isEditable){
			
			// On hover show edit prompt
			tipFields[i].title = "Click to edit tool tip";
			
			// On click open editing interface
			tipFields[i].addEventListener('click', function(e){
				this.show(e);
			}, false);			
		
		}
		// Use mouse over and track mouse for view mode
		else{
		
			// Assign a link down to the tip
			tipFields[i].parentNode.tooltip = tipFields[i];
		
			// Only show tool tips if they have content
			if (tipFields[i].innerHTML != ''){

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

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

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

			}
		}

	}

}

/* Menu control */

function seventh_sea_2e_setup_dropdowns(context) {
	if (!seventh_sea_2e_opts.isEditable) return;

	var menus = context.querySelectorAll('.dropdown');
	for( var i = 0; i < menus.length; i++ ) {
		var ddFld = menus[i];
		
		if( ddFld.ddSetup ) continue;
		ddFld.ddSetup = true;
		
		ddFld.addEventListener('click', function() {
			this.showDropdown();
		});
		
		ddFld.showDropdown = function() {
			var menuContainerName = this.className.match(/menu_([\w\d_]+)/)[1];
			var menuContainer = document.querySelector('.menu_'+menuContainerName);
			if( menuContainer.parentNode.className.match(/uicontainer/) ) {
				menuContainer.show(this);
				menuContainer.focus();
			} else {
				menuContainer.hide();
			}
		};
		ddFld.itemSel = function(index, obj) {
			var objData = JSON.parse(obj);
			var fields = this.className.match(/menusel_([\w\d_]+)/g);
			for( var idx in fields ) {
				var field = fields[idx].substring(8);
				var fillFld = this.parentNode.querySelector('.dslf_'+field);
				if( fillFld == undefined || fillFld == null ) {
					fillFld = this.parentNode.querySelector('.menufill_'+field);
				}
				fillFld.innerHTML = objData[field];				
			}
			
			seventh_sea_2e_opts.menuSelectCB(this.className, obj);
		}
	}
}

function seventh_sea_2e_create_menu(context, data, data_fld) {
	var objList = data[data_fld];
	
	if (!seventh_sea_2e_opts.isEditable) return;
	
	if( objList == undefined || objList.length == 0 ) return;
	
	var menuContainer = document.querySelector('.menu_'+data_fld);
	if( !menuContainer ) return;

	var lineFld = menuContainer.className.match(/menufld_([\w\d_]+)/)[1];
	var prefixFld = menuContainer.className.match(/menupfx_([\w\d_]+)/);
	var suffixFld = menuContainer.className.match(/menusuf_([\w\d_]+)/);
	var top = 0;
	for( var i= 0; i < objList.length; i++ ) {
		var label = objList[i][lineFld];
		var prefix = '';
		var suffix = '';
		if( prefixFld ) {
			prefix = objList[i][prefixFld[1]] + ': ';
		}
		if( suffixFld ) {
			suffix = ' - ' + objList[i][suffixFld[1]];
		}
		var button = document.createElement('button');
		button.className += ' dropdown_item';
		button.type = "button";
		button.value = JSON.stringify(objList[i]);
		button.name = "lbl"+label;
		button.innerHTML = prefix + label + suffix;
		button.index = i;
		button.addEventListener('click', function() {this.parentNode.click(this.index, this.value);}, false);
		button.addEventListener('blur', function() {this.parentNode.hide();}, false);
		
		menuContainer.appendChild(button);
	}
	
	menuContainer.click = function( index, obj ) {
		this.valueFld.itemSel(index, obj);
		this.hide();
	};
	
	menuContainer.show = function(field) {
		this.valueFld = field;
		
		// Insert and display the bar
		field.parentNode.insertBefore(this,field.nextSibling);
		this.style.display = 'block';

		// Position the bar below and centered
		this.style.width = 'inherit';
		this.style.top = (field.offsetTop + field.offsetHeight) + 'px';

	};

	menuContainer.hide = function() {
		this.style.display = 'none';
		seventh_sea_2e_opts.uiContainer.appendChild(this);
	}
}

Back

7th Sea 2nd. Ed. (Theah)

Create Your Campaign

Just One More Step

Just A Little More Info

Use a Social Account