City Of Mist

DST Source Code

HTML Template <div class="dst_container"> <div class="dst_theme_container"> <!--Basic Info/Crew/Evolution--> <div class="basic_info_col"> <H2> Character Name: <span class="dsf dsf_name"></span> </H2> <p> Player: <span class="dsf dsf_player"></span> </p> <p> Campaign: <span class="dsf dsf_campaign"></span> </p> <p> Mythos: <span class="dsf dsf_mythos"></span> </p> <p> Logos: <span class="dsf dsf_logos"></span> </p> <h3>Crew</h3> <table class="dst_table_crew"> <tr> <th> Character </th> <th> <p>Help</p> </th> <th> <p>Hurt</p> </th> </tr> <tr> <td> <p class="dsf dsf_crew1"></p> </td> <td> <p class="dsf dsf_crew1_help">0</p> </td> <td> <p class="dsf dsf_crew1_hurt">0</p> </td> </tr> <tr> <td> <p class="dsf dsf_crew2"></p> </td> <td> <p class="dsf dsf_crew2_help">0</p> </td> <td> <p class="dsf dsf_crew2_hurt">0</p> </td> </tr> <tr> <td> <p class="dsf dsf_crew3"></p> </td> <td> <p class="dsf dsf_crew3_help">0</p> </td> <td> <p class="dsf dsf_crew3_hurt">0</p> </td> </tr> <tr> <td> <p class="dsf dsf_crew4"></p> </td> <td> <p class="dsf dsf_crew4_help">0</p> </td> <td> <p class="dsf dsf_crew4_hurt">0</p> </td> </tr> <tr> <td> <p class="dsf dsf_crew5"></p> </td> <td> <p class="dsf dsf_crew5_help">0</p> </td> <td> <p class="dsf dsf_crew5_hurt">0</p> </td> </tr> </table> </div> <div class="photo_box"> <div class="dsf dsf_avatar_image readonly"></div> </div> </div> <div class="dst_theme_container"> <div class="buildup_col"> <H3>Moments of Evolution:</h3> <p> Build Up: <span class="dsf dsf_buildup1 checkbox"></span><span class="dsf dsf_buildup2 checkbox"></span><span class="dsf dsf_buildup3 checkbox"></span><span class="dsf dsf_buildup4 checkbox"></span><span class="dsf dsf_buildup5 checkbox"></span> </p> <div class="dst_theme"><span class="dsf dsf_evo2 checkbox dst_evo"></span>Gain an extra theme: Ally</div> <div class="dst_theme"><span class="dsf dsf_evo3 checkbox dst_evo"></span>Gain an extra theme: Base of Operations</div> <div class="dst_theme"><span class="dsf dsf_evo4 checkbox dst_evo"></span>Gain an extra theme: Ride</div> <div class="dst_theme"><span class="dsf dsf_evo7 checkbox dst_evo"></span>Make <span class="dsf dsf_evo_dnm1 dst_dnm"></span> permanently Dynamite!</div> <div class="dst_theme"><span class="dsf dsf_evo8 checkbox dst_evo"></span>Make <span class="dsf dsf_evo_dnm2 dst_dnm"></span> permanently Dynamite!</div> <div class="dst_theme"><span class="dsf dsf_evo9 checkbox dst_evo"></span>Make <span class="dsf dsf_evo_dnm3 dst_dnm"></span> permanently Dynamite!</div> <div class="dst_theme"><span class="dsf dsf_evo6 checkbox dst_evo"></span>Go through a transformation</div> <div class="dst_theme"><span class="dsf dsf_evo1 checkbox dst_evo"></span>Choose another broad power tag</div> <div class="dst_theme"><span class="dsf dsf_evo5 checkbox dst_evo"></span>Get closure from your Nemeses</div> <div class="dst_theme"><span class="dsf dsf_evo10 checkbox dst_evo"></span>See through the Mist</div> <div class="dst_theme"><span class="dsf dsf_evo6 checkbox dst_evo"></span>Leave the city</div> </div> <div class="buildup_col"> <h3>Nemeses</h3> <div class="dst_theme"><p class="dsf dsf_nem1"></p></div> <div class="dst_theme"><p class="dsf dsf_nem2"></p></div> <div class="dst_theme"><p class="dsf dsf_nem3"></p></div> <div class="dst_theme"><p class="dsf dsf_nem4"></p></div> <div class="dst_theme"><p class="dsf dsf_nem5"></p></div> <div class="dst_theme"><p class="dsf dsf_nem6"></p></div> <div class="dst_theme"><p class="dsf dsf_nem7"></p></div> <div class="dst_theme"><p class="dsf dsf_nem8"></p></div> <div class="dst_theme"><p class="dsf dsf_nem9"></p></div> </div> </div> <!--Themes--> <div class="dst_theme_container"> <div class="dst_theme_inner_container"> <!--Theme Titles--> <div class="dst_theme"><h2 class="dsf dsf_theme1_title yellow-highlight">Theme 1 Title (click to edit)</h2></div> <div class="dst_theme"><h2 class="dsf dsf_theme2_title yellow-highlight">Theme 2 Title (click to edit)</h2></div> <div class="dst_theme"><h2 class="dsf dsf_theme3_title yellow-highlight">Theme 3 Title (click to edit)</h2></div> <div class="dst_theme"><h2 class="dsf dsf_theme4_title yellow-highlight">Theme 4 Title (click to edit)</h2></div> </div> <div class="dst_theme_inner_container"> <div class="dst_theme"> <p> Type: <span class="dsf dsf_theme1_type"></span> </p> </div> <div class="dst_theme"> <p> Type: <span class="dsf dsf_theme2_type"></span> </p> </div> <div class="dst_theme"> <p> Type: <span class="dsf dsf_theme3_type"></span> </p> </div> <div class="dst_theme"> <p> Type: <span class="dsf dsf_theme4_type"></span> </p> </div> </div> <div class="dst_theme_inner_container"> <div class="dst_theme"> <p> Mythos<span class="dsf dsf_theme1_myt checkbox"></span>Logos<span class="dsf dsf_theme1_log checkbox"></span> </p> <p> Attention: <span class="dsf dsf_theme1_att1 checkbox"></span><span class="dsf dsf_theme1_att2 checkbox"></span><span class="dsf dsf_theme1_att3 checkbox"></span> Fade: <span class="dsf dsf_theme1_fde1 checkbox"></span><span class="dsf dsf_theme1_fde2 checkbox"></span><span class="dsf dsf_theme1_fde3 checkbox"></span> </p> </div> <div class="dst_theme"> <p> Mythos<span class="dsf dsf_theme2_myt checkbox"></span>Logos<span class="dsf dsf_theme2_log checkbox"></span> </p> <p> Attention: <span class="dsf dsf_theme2_att1 checkbox"></span><span class="dsf dsf_theme2_att2 checkbox"></span><span class="dsf dsf_theme2_att3 checkbox"></span> Fade: <span class="dsf dsf_theme2_fde1 checkbox"></span><span class="dsf dsf_theme2_fde2 checkbox"></span><span class="dsf dsf_theme2_fde3 checkbox"></span> </p> </div> <div class="dst_theme"> <p> Mythos<span class="dsf dsf_theme3_myt checkbox"></span>Logos<span class="dsf dsf_theme3_log checkbox"></span> </p> <p> Attention: <span class="dsf dsf_theme3_att1 checkbox"></span><span class="dsf dsf_theme3_att2 checkbox"></span><span class="dsf dsf_theme3_att3 checkbox"></span> Fade: <span class="dsf dsf_theme3_fde1 checkbox"></span><span class="dsf dsf_theme3_fde2 checkbox"></span><span class="dsf dsf_theme3_fde3 checkbox"></span> </p> </div> <div class="dst_theme"> <p> Mythos<span class="dsf dsf_theme4_myt checkbox"></span>Logos<span class="dsf dsf_theme4_log checkbox"></span> </p> <p> Attention: <span class="dsf dsf_theme4_att1 checkbox"></span><span class="dsf dsf_theme4_att2 checkbox"></span><span class="dsf dsf_theme4_att3 checkbox"></span> Fade: <span class="dsf dsf_theme4_fde1 checkbox"></span><span class="dsf dsf_theme4_fde2 checkbox"></span><span class="dsf dsf_theme4_fde3 checkbox"></span> </p> </div> </div> <div class="dst_theme_inner_container"> <div class="dst_theme"> <h3>Mystery/Identity</h3> <span style="font-weight:bold;" class="dsf dsf_theme1_mysidn"></span> </div> <div class="dst_theme"> <h3>Mystery/Identity</h3> <span style="font-weight:bold;" class="dsf dsf_theme2_mysidn"></span> </div> <div class="dst_theme"> <h3>Mystery/Identity</h3> <span style="font-weight:bold;" class="dsf dsf_theme3_mysidn"></span> </div> <div class="dst_theme"> <h3>Mystery/Identity</h3> <span style="font-weight:bold;" class="dsf dsf_theme4_mysidn"></span> </div> </div> <div class="dst_theme_inner_container"> <div class="dst_theme"> <p style="margin-top:1px;">Description: <span class="dsf dsf_theme1_description"></span></p> </div> <div class="dst_theme"> <p style="margin-top:1px;">Description: <span class="dsf dsf_theme2_description"></span></p> </div> <div class="dst_theme"> <p style="margin-top:1px;">Description: <span class="dsf dsf_theme3_description"></span></p> </div> <div class="dst_theme"> <p style="margin-top:1px;">Description: <span class="dsf dsf_theme4_description"></span></p> </div> </div> <div class="dst_theme_inner_container"> <!--Theme Power Tags--> <div class="dst_theme"> <h3>Power Tags</h3> <table class="dst_table"> <tr> <th> <p>Q</p> </th> <th> <p>Title</p> </th> <th> <p class="flame"></p> </th> </tr> <tr> <td> <p class="dsf dsf_theme1_pq1">Q?</p> </td> <td> <p class="dsf dsf_theme1_pwr1"></p> </td> <td> <p class="dsf dsf_theme1_brn1 brn checkbox"><p></p></p> </td> </tr> <tr> <td> <p class="dsf dsf_theme1_pq2">Q?</p> </td> <td> <p class="dsf dsf_theme1_pwr2"></p> </td> <td> <p class="dsf dsf_theme1_brn2 checkbox"></p> </td> </tr> <tr> <td> <p class="dsf dsf_theme1_pq3">Q?</p> </td> <td> <p class="dsf dsf_theme1_pwr3"></p> </td> <td> <p class="dsf dsf_theme1_brn3 checkbox"></p> </td> </tr> <tr> <td> <p class="dsf dsf_theme1_pq4">Q?</p> </td> <td> <p class="dsf dsf_theme1_pwr4"></p> </td> <td> <p class="dsf dsf_theme1_brn4 checkbox"></p> </td> </tr> <tr> <td> <p class="dsf dsf_theme1_pq5">Q?</p> </td> <td> <p class="dsf dsf_theme1_pwr5"></p> </td> <td> <p class="dsf dsf_theme1_brn5 checkbox"></p> </td> </tr> <tr> <td> <p class="dsf dsf_theme1_pq6">Q?</p> </td> <td> <p class="dsf dsf_theme1_pwr6"></p> </td> <td> <p class="dsf dsf_theme1_brn6 checkbox"></p> </td> </tr> <tr> <td> <p class="dsf dsf_theme1_pq7">Q?</p> </td> <td> <p class="dsf dsf_theme1_pwr7"></p> </td> <td> <p class="dsf dsf_theme1_brn7 checkbox"></p> </td> </tr> </table> </div> <div class="dst_theme"> <h3>Power Tags</h3> <table class="dst_table"> <tr> <th> <p>Q</p> </th> <th> <p>Title</p> </th> <th> <p class="flame"></p> </th> </tr> <tr> <td> <p class="dsf dsf_theme2_pq1">Q?</p> </td> <td> <p class="dsf dsf_theme2_pwr1"></p> </td> <td> <p class="dsf dsf_theme2_brn1 brn checkbox"><p></p></p> </td> </tr> <tr> <td> <p class="dsf dsf_theme2_pq2">Q?</p> </td> <td> <p class="dsf dsf_theme2_pwr2"></p> </td> <td> <p class="dsf dsf_theme2_brn2 checkbox"></p> </td> </tr> <tr> <td> <p class="dsf dsf_theme2_pq3">Q?</p> </td> <td> <p class="dsf dsf_theme2_pwr3"></p> </td> <td> <p class="dsf dsf_theme2_brn3 checkbox"></p> </td> </tr> <tr> <td> <p class="dsf dsf_theme2_pq4">Q?</p> </td> <td> <p class="dsf dsf_theme2_pwr4"></p> </td> <td> <p class="dsf dsf_theme2_brn4 checkbox"></p> </td> </tr> <tr> <td> <p class="dsf dsf_theme2_pq5">Q?</p> </td> <td> <p class="dsf dsf_theme2_pwr5"></p> </td> <td> <p class="dsf dsf_theme2_brn5 checkbox"></p> </td> </tr> <tr> <td> <p class="dsf dsf_theme2_pq6">Q?</p> </td> <td> <p class="dsf dsf_theme2_pwr6"></p> </td> <td> <p class="dsf dsf_theme2_brn6 checkbox"></p> </td> </tr> <tr> <td> <p class="dsf dsf_theme2_pq7">Q?</p> </td> <td> <p class="dsf dsf_theme2_pwr7"></p> </td> <td> <p class="dsf dsf_theme2_brn7 checkbox"></p> </td> </tr> </table> </div><div class="dst_theme"> <h3>Power Tags</h3> <table class="dst_table"> <tr> <th> <p>Q</p> </th> <th> <p>Title</p> </th> <th> <p class="flame"></p> </th> </tr> <tr> <td> <p class="dsf dsf_theme3_pq1">Q?</p> </td> <td> <p class="dsf dsf_theme3_pwr1"></p> </td> <td> <p class="dsf dsf_theme3_brn1 brn checkbox"><p></p></p> </td> </tr> <tr> <td> <p class="dsf dsf_theme3_pq2">Q?</p> </td> <td> <p class="dsf dsf_theme3_pwr2"></p> </td> <td> <p class="dsf dsf_theme3_brn2 checkbox"></p> </td> </tr> <tr> <td> <p class="dsf dsf_theme3_pq3">Q?</p> </td> <td> <p class="dsf dsf_theme3_pwr3"></p> </td> <td> <p class="dsf dsf_theme3_brn3 checkbox"></p> </td> </tr> <tr> <td> <p class="dsf dsf_theme3_pq4">Q?</p> </td> <td> <p class="dsf dsf_theme3_pwr4"></p> </td> <td> <p class="dsf dsf_theme3_brn4 checkbox"></p> </td> </tr> <tr> <td> <p class="dsf dsf_theme3_pq5">Q?</p> </td> <td> <p class="dsf dsf_theme3_pwr5"></p> </td> <td> <p class="dsf dsf_theme3_brn5 checkbox"></p> </td> </tr> <tr> <td> <p class="dsf dsf_theme3_pq6">Q?</p> </td> <td> <p class="dsf dsf_theme3_pwr6"></p> </td> <td> <p class="dsf dsf_theme3_brn6 checkbox"></p> </td> </tr> <tr> <td> <p class="dsf dsf_theme3_pq7">Q?</p> </td> <td> <p class="dsf dsf_theme3_pwr7"></p> </td> <td> <p class="dsf dsf_theme3_brn7 checkbox"></p> </td> </tr> </table> </div><div class="dst_theme"> <h3>Power Tags</h3> <table class="dst_table"> <tr> <th> <p>Q</p> </th> <th> <p>Title</p> </th> <th> <p class="flame"></p> </th> </tr> <tr> <td> <p class="dsf dsf_theme4_pq1">Q?</p> </td> <td> <p class="dsf dsf_theme4_pwr1"></p> </td> <td> <p class="dsf dsf_theme4_brn1 brn checkbox"><p></p></p> </td> </tr> <tr> <td> <p class="dsf dsf_theme4_pq2">Q?</p> </td> <td> <p class="dsf dsf_theme4_pwr2"></p> </td> <td> <p class="dsf dsf_theme4_brn2 checkbox"></p> </td> </tr> <tr> <td> <p class="dsf dsf_theme4_pq3">Q?</p> </td> <td> <p class="dsf dsf_theme4_pwr3"></p> </td> <td> <p class="dsf dsf_theme4_brn3 checkbox"></p> </td> </tr> <tr> <td> <p class="dsf dsf_theme4_pq4">Q?</p> </td> <td> <p class="dsf dsf_theme4_pwr4"></p> </td> <td> <p class="dsf dsf_theme4_brn4 checkbox"></p> </td> </tr> <tr> <td> <p class="dsf dsf_theme4_pq5">Q?</p> </td> <td> <p class="dsf dsf_theme4_pwr5"></p> </td> <td> <p class="dsf dsf_theme4_brn5 checkbox"></p> </td> </tr> <tr> <td> <p class="dsf dsf_theme4_pq6">Q?</p> </td> <td> <p class="dsf dsf_theme4_pwr6"></p> </td> <td> <p class="dsf dsf_theme4_brn6 checkbox"></p> </td> </tr> <tr> <td> <p class="dsf dsf_theme4_pq7">Q?</p> </td> <td> <p class="dsf dsf_theme4_pwr7"></p> </td> <td> <p class="dsf dsf_theme4_brn7 checkbox"></p> </td> </tr> </table> </div> </div> <!--Theme Weakness Tags--> <div class="dst_theme_inner_container"> <div class="dst_theme"> <h3>Weakness Tags</h3> <table class="dst_table_wk"> <tr> <th> <p>Q</p> </th> <th> <p>Title</p> </th> </tr> <tr> <td> <p class="dsf dsf_theme1_wq1">Q?</p> </td> <td> <p class="dsf dsf_theme1_wk1"></p> </td> </tr> <tr> <td> <p class="dsf dsf_theme1_wq2">Q?</p> </td> <td> <p class="dsf dsf_theme1_wk2"></p> </td> </tr> <tr> <td> <p class="dsf dsf_theme1_wq3">Q?</p> </td> <td> <p class="dsf dsf_theme1_wk3"></p> </td> </tr> </table> </div> <div class="dst_theme"> <h3>Weakness Tags</h3> <table class="dst_table_wk"> <tr> <th> <p>Q</p> </th> <th> <p>Title</p> </th> </tr> <tr> <td> <p class="dsf dsf_theme2_wq1">Q?</p> </td> <td> <p class="dsf dsf_theme2_wk1"></p> </td> </tr> <tr> <td> <p class="dsf dsf_theme2_wq2">Q?</p> </td> <td> <p class="dsf dsf_theme2_wk2"></p> </td> </tr> <tr> <td> <p class="dsf dsf_theme2_wq3">Q?</p> </td> <td> <p class="dsf dsf_theme2_wk3"></p> </td> </tr> </table> </div> <div class="dst_theme"> <h3>Weakness Tags</h3> <table class="dst_table_wk"> <tr> <th> <p>Q</p> </th> <th> <p>Title</p> </th> </tr> <tr> <td> <p class="dsf dsf_theme3_wq1">Q?</p> </td> <td> <p class="dsf dsf_theme3_wk1"></p> </td> </tr> <tr> <td> <p class="dsf dsf_theme3_wq2">Q?</p> </td> <td> <p class="dsf dsf_theme3_wk2"></p> </td> </tr> <tr> <td> <p class="dsf dsf_theme3_wq3">Q?</p> </td> <td> <p class="dsf dsf_theme3_wk3"></p> </td> </tr> </table> </div> <div class="dst_theme"> <h3>Weakness Tags</h3> <table class="dst_table_wk"> <tr> <th> <p>Q</p> </th> <th> <p>Title</p> </th> </tr> <tr> <td> <p class="dsf dsf_theme4_wq1">Q?</p> </td> <td> <p class="dsf dsf_theme4_wk1"></p> </td> </tr> <tr> <td> <p class="dsf dsf_theme4_wq2">Q?</p> </td> <td> <p class="dsf dsf_theme4_wk2"></p> </td> </tr> <tr> <td> <p class="dsf dsf_theme4_wq3">Q?</p> </td> <td> <p class="dsf dsf_theme4_wk3"></p> </td> </tr> </table> </div> </div> <div class="dst_theme_inner_container"> <div class="dst_theme"> <h3>Improvements</h3> <p class="dsf dsf_theme1_imp1"></p> <p class="dsf dsf_theme1_imp2"></p> <p class="dsf dsf_theme1_imp3"></p> <p class="dsf dsf_theme1_imp4"></p> <p class="dsf dsf_theme1_imp5"></p> <p class="dsf dsf_theme1_imp6"></p> <p class="dsf dsf_theme1_imp7"></p> <p class="dsf dsf_theme1_imp8"></p> <p class="dsf dsf_theme1_imp9"></p> <p class="dsf dsf_theme1_imp10"></p> <h3>Flipside</h3> <p class="dsf dsf_theme1_flp1"></p> <p class="dsf dsf_theme1_flp2"></p> <p class="dsf dsf_theme1_flp3"></p> </div> <div class="dst_theme"> <h3>Improvements</h3> <p class="dsf dsf_theme2_imp1"></p> <p class="dsf dsf_theme2_imp2"></p> <p class="dsf dsf_theme2_imp3"></p> <p class="dsf dsf_theme2_imp4"></p> <p class="dsf dsf_theme2_imp5"></p> <p class="dsf dsf_theme2_imp6"></p> <p class="dsf dsf_theme2_imp7"></p> <p class="dsf dsf_theme2_imp8"></p> <p class="dsf dsf_theme2_imp9"></p> <p class="dsf dsf_theme2_imp10"></p> <h3>Flipside</h3> <p class="dsf dsf_theme2_flp1"></p> <p class="dsf dsf_theme2_flp2"></p> <p class="dsf dsf_theme2_flp3"></p> </div> <div class="dst_theme"> <h3>Improvements</h3> <p class="dsf dsf_theme3_imp1"></p> <p class="dsf dsf_theme3_imp2"></p> <p class="dsf dsf_theme3_imp3"></p> <p class="dsf dsf_theme3_imp4"></p> <p class="dsf dsf_theme3_imp5"></p> <p class="dsf dsf_theme3_imp6"></p> <p class="dsf dsf_theme3_imp7"></p> <p class="dsf dsf_theme3_imp8"></p> <p class="dsf dsf_theme3_imp9"></p> <p class="dsf dsf_theme3_imp10"></p> <h3>Flipside</h3> <p class="dsf dsf_theme3_flp1"></p> <p class="dsf dsf_theme3_flp2"></p> <p class="dsf dsf_theme3_flp3"></p> </div> <div class="dst_theme"> <h3>Improvements</h3> <p class="dsf dsf_theme4_imp1"></p> <p class="dsf dsf_theme4_imp2"></p> <p class="dsf dsf_theme4_imp3"></p> <p class="dsf dsf_theme4_imp4"></p> <p class="dsf dsf_theme4_imp5"></p> <p class="dsf dsf_theme4_imp6"></p> <p class="dsf dsf_theme4_imp7"></p> <p class="dsf dsf_theme4_imp8"></p> <p class="dsf dsf_theme4_imp9"></p> <p class="dsf dsf_theme4_imp10"></p> <h3>Flipside</h3> <p class="dsf dsf_theme4_flp1"></p> <p class="dsf dsf_theme4_flp2"></p> <p class="dsf dsf_theme4_flp3"></p> </div> </div> </div> <div class="dst_theme_container"> <div class="dst_theme_inner_container"> <div class="dst_theme"><h2 class="dsf dsf_ally_title yellow-highlight">Extra Theme: Ally (click to edit)</h2></div> <div class="dst_theme"><h2 class="dsf dsf_ride_title yellow-highlight">Extra Theme: Ride (click to edit)</h2></div> <div class="dst_theme"><h2 class="dsf dsf_base_title yellow-highlight">Extra Theme: Base (click to edit)</h2></div> </div> <div class="dst_theme_inner_container"> <div class="dst_theme"> <h3>Mystery/Identity</h3> <span style="font-weight:bold;" class="dsf dsf_ally_mysidn"></span> </div> <div class="dst_theme"> <h3>Mystery/Identity</h3> <span style="font-weight:bold;" class="dsf dsf_ride_mysidn"></span> </div> <div class="dst_theme"> <h3>Mystery/Identity</h3> <span style="font-weight:bold;" class="dsf dsf_base_mysidn"></span> </div> </div> <div class="dst_theme_inner_container"> <div class="dst_theme"> <p style="margin-top:1px;">Description: <span class="dsf dsf_ally_description"></span></p> </div> <div class="dst_theme"> <p style="margin-top:1px;">Description: <span class="dsf dsf_ride_description"></span></p> </div> <div class="dst_theme"> <p style="margin-top:1px;">Description: <span class="dsf dsf_base_description"></span></p> </div> </div> <div class="dst_theme_inner_container"> <div class="dst_theme"> <h3>Power Tags</h3> <table class="dst_table"> <tr> <th> <p>Q</p> </th> <th> <p>Title</p> </th> <th> <p class="flame"></p> </th> </tr> <tr> <td> <p class="dsf dsf_ally_pq1">Q?</p> </td> <td> <p class="dsf dsf_ally_pwr1"></p> </td> <td> <p class="dsf dsf_ally_brn1 brn checkbox"><p></p></p> </td> </tr> <tr> <td> <p class="dsf dsf_ally_pq2">Q?</p> </td> <td> <p class="dsf dsf_ally_pwr2"></p> </td> <td> <p class="dsf dsf_ally_brn2 checkbox"></p> </td> </tr> <tr> <td> <p class="dsf dsf_ally_pq3">Q?</p> </td> <td> <p class="dsf dsf_ally_pwr3"></p> </td> <td> <p class="dsf dsf_ally_brn3 checkbox"></p> </td> </tr> <tr> <td> <p class="dsf dsf_ally_pq4">Q?</p> </td> <td> <p class="dsf dsf_ally_pwr4"></p> </td> <td> <p class="dsf dsf_ally_brn4 checkbox"></p> </td> </tr> <tr> <td> <p class="dsf dsf_ally_pq5">Q?</p> </td> <td> <p class="dsf dsf_ally_pwr5"></p> </td> <td> <p class="dsf dsf_ally_brn5 checkbox"></p> </td> </tr> <tr> <td> <p class="dsf dsf_ally_pq6">Q?</p> </td> <td> <p class="dsf dsf_ally_pwr6"></p> </td> <td> <p class="dsf dsf_ally_brn6 checkbox"></p> </td> </tr> <tr> <td> <p class="dsf dsf_ally_pq7">Q?</p> </td> <td> <p class="dsf dsf_ally_pwr7"></p> </td> <td> <p class="dsf dsf_ally_brn7 checkbox"></p> </td> </tr> </table> </div> <div class="dst_theme"> <h3>Power Tags</h3> <table class="dst_table"> <tr> <th> <p>Q</p> </th> <th> <p>Title</p> </th> <th> <p class="flame"></p> </th> </tr> <tr> <td> <p class="dsf dsf_ride_pq1">Q?</p> </td> <td> <p class="dsf dsf_ride_pwr1"></p> </td> <td> <p class="dsf dsf_ride_brn1 brn checkbox"><p></p></p> </td> </tr> <tr> <td> <p class="dsf dsf_ride_pq2">Q?</p> </td> <td> <p class="dsf dsf_ride_pwr2"></p> </td> <td> <p class="dsf dsf_ride_brn2 checkbox"></p> </td> </tr> <tr> <td> <p class="dsf dsf_ride_pq3">Q?</p> </td> <td> <p class="dsf dsf_ride_pwr3"></p> </td> <td> <p class="dsf dsf_ride_brn3 checkbox"></p> </td> </tr> <tr> <td> <p class="dsf dsf_ride_pq4">Q?</p> </td> <td> <p class="dsf dsf_ride_pwr4"></p> </td> <td> <p class="dsf dsf_ride_brn4 checkbox"></p> </td> </tr> <tr> <td> <p class="dsf dsf_ride_pq5">Q?</p> </td> <td> <p class="dsf dsf_ride_pwr5"></p> </td> <td> <p class="dsf dsf_ride_brn5 checkbox"></p> </td> </tr> <tr> <td> <p class="dsf dsf_ride_pq6">Q?</p> </td> <td> <p class="dsf dsf_ride_pwr6"></p> </td> <td> <p class="dsf dsf_ride_brn6 checkbox"></p> </td> </tr> <tr> <td> <p class="dsf dsf_ride_pq7">Q?</p> </td> <td> <p class="dsf dsf_ride_pwr7"></p> </td> <td> <p class="dsf dsf_ride_brn7 checkbox"></p> </td> </tr> </table> </div> <div class="dst_theme"> <h3>Power Tags</h3> <table class="dst_table"> <tr> <th> <p>Q</p> </th> <th> <p>Title</p> </th> <th> <p class="flame"></p> </th> </tr> <tr> <td> <p class="dsf dsf_base_pq1">Q?</p> </td> <td> <p class="dsf dsf_base_pwr1"></p> </td> <td> <p class="dsf dsf_base_brn1 brn checkbox"><p></p></p> </td> </tr> <tr> <td> <p class="dsf dsf_base_pq2">Q?</p> </td> <td> <p class="dsf dsf_base_pwr2"></p> </td> <td> <p class="dsf dsf_base_brn2 checkbox"></p> </td> </tr> <tr> <td> <p class="dsf dsf_base_pq3">Q?</p> </td> <td> <p class="dsf dsf_base_pwr3"></p> </td> <td> <p class="dsf dsf_base_brn3 checkbox"></p> </td> </tr> <tr> <td> <p class="dsf dsf_base_pq4">Q?</p> </td> <td> <p class="dsf dsf_base_pwr4"></p> </td> <td> <p class="dsf dsf_base_brn4 checkbox"></p> </td> </tr> <tr> <td> <p class="dsf dsf_base_pq5">Q?</p> </td> <td> <p class="dsf dsf_base_pwr5"></p> </td> <td> <p class="dsf dsf_base_brn5 checkbox"></p> </td> </tr> <tr> <td> <p class="dsf dsf_base_pq6">Q?</p> </td> <td> <p class="dsf dsf_base_pwr6"></p> </td> <td> <p class="dsf dsf_base_brn6 checkbox"></p> </td> </tr> <tr> <td> <p class="dsf dsf_base_pq7">Q?</p> </td> <td> <p class="dsf dsf_base_pwr7"></p> </td> <td> <p class="dsf dsf_base_brn7 checkbox"></p> </td> </tr> </table> </div> </div> <div class="dst_theme_inner_container"> <div class="dst_theme"> <h3>Weakness Tags</h3> <table class="dst_table_wk"> <tr> <th> <p>Q</p> </th> <th> <p>Title</p> </th> </tr> <tr> <td> <p class="dsf dsf_ally_wq1">Q?</p> </td> <td> <p class="dsf dsf_ally_wk1"></p> </td> </tr> <tr> <td> <p class="dsf dsf_ally_wq2">Q?</p> </td> <td> <p class="dsf dsf_ally_wk2"></p> </td> </tr> <tr> <td> <p class="dsf dsf_ally_wq3">Q?</p> </td> <td> <p class="dsf dsf_ally_wk3"></p> </td> </tr> </table> </div> <div class="dst_theme"> <h3>Weakness Tags</h3> <table class="dst_table_wk"> <tr> <th> <p>Q</p> </th> <th> <p>Title</p> </th> </tr> <tr> <td> <p class="dsf dsf_ride_wq1">Q?</p> </td> <td> <p class="dsf dsf_ride_wk1"></p> </td> </tr> <tr> <td> <p class="dsf dsf_ride_wq2">Q?</p> </td> <td> <p class="dsf dsf_ride_wk2"></p> </td> </tr> <tr> <td> <p class="dsf dsf_ride_wq3">Q?</p> </td> <td> <p class="dsf dsf_ride_wk3"></p> </td> </tr> </table> </div> <div class="dst_theme"> <h3>Weakness Tags</h3> <table class="dst_table_wk"> <tr> <th> <p>Q</p> </th> <th> <p>Title</p> </th> </tr> <tr> <td> <p class="dsf dsf_base_wq1">Q?</p> </td> <td> <p class="dsf dsf_base_wk1"></p> </td> </tr> <tr> <td> <p class="dsf dsf_base_wq2">Q?</p> </td> <td> <p class="dsf dsf_base_wk2"></p> </td> </tr> <tr> <td> <p class="dsf dsf_base_wq3">Q?</p> </td> <td> <p class="dsf dsf_base_wk3"></p> </td> </tr> </table> </div> </div> <div class="dst_theme_inner_container" style="margin-left:30px;"> <div class="dst_theme"> <h3>Improvements</h3> <div class="dst_imp" style="float:none;"><span class="dsf dsf_ally_imp1 checkbox"></span>Sharing is Caring</div> <div class="dst_imp" style="float:none;"><span class="dsf dsf_ally_imp2 checkbox"></span>Gets Around</div> <div class="dst_imp" style="float:none;"><span class="dsf dsf_ally_imp3 checkbox"></span>Back-to-Back</div> <div class="dst_imp" style="float:none;"><span class="dsf dsf_ally_imp4 checkbox"></span>Tag Team</div> <div class="dst_imp" style="float:none;"><span class="dsf dsf_ally_imp5 checkbox"></span>Serious Firepower</div> </div> <div class="dst_theme"> <h3>Improvements</h3> <div class="dst_imp" style="float:none;"><span class="dsf dsf_ride_imp1 checkbox"></span>Showoff</div> <div class="dst_imp" style="float:none;"><span class="dsf dsf_ride_imp2 checkbox"></span>Rev Up</div> <div class="dst_imp" style="float:none;"><span class="dsf dsf_ride_imp3 checkbox"></span>Protective</div> <div class="dst_imp" style="float:none;"><span class="dsf dsf_ride_imp4 checkbox"></span>Loyal Steed</div> <div class="dst_imp" style="float:none;"><span class="dsf dsf_ride_imp5 checkbox"></span>Getaway</div> </div> <div class="dst_theme"> <h3>Improvements</h3> <div class="dst_imp" style="float:none;"><span class="dsf dsf_base_imp1 checkbox"></span>Storage Space</div> <div class="dst_imp" style="float:none;"><span class="dsf dsf_base_imp2 checkbox"></span>Boobytraps</div> <div class="dst_imp" style="float:none;"><span class="dsf dsf_base_imp3 checkbox"></span>Away From Prying Eyes</div> <div class="dst_imp" style="float:none;"><span class="dsf dsf_base_imp4 checkbox"></span>An Ancient Place</div> <div class="dst_imp" style="float:none;"><span class="dsf dsf_base_imp5 checkbox"></span>Peace of Mind</div> </div> </div> <div class="chr_bio"> <p> Character Biography: <span class="dsf dsf_bio"></span> </p> </div> <div class="sheet_author"> <p> Sheet Created By: <span class="dsf dsf_dst_author"></span> </p> </div> </div> </div>

CSS @import url('https://fonts.googleapis.com/css?family=Bangers|Gloria+Hallelujah'); div.ds_city_of_mist_by_gur .dsf { font-family: 'Gloria Hallelujah', cursive; font-size:1em; } div.ds_city_of_mist_by_gur .dsf a { color:#2E0854!important; } /**************************** containers *****************************/ div.ds_city_of_mist_by_gur .dst_container { background:url('https://chainsawxiv.github.io/DST/common/images/misc/coffeestain.png'), url('https://chainsawxiv.github.io/DST/common/images/misc/24.jpg'); background-repeat: no-repeat, repeat; background-position:right top, left top; padding-top:30px; height:100%; font-family: 'Bangers', cursive; letter-spacing: 2px; display:inline-block; } div.ds_city_of_mist_by_gur .dst_dnm { font-family: 'Bangers', cursive; } div.ds_city_of_mist_by_gur .dst_container h3, div.ds_city_of_mist_by_gur .dst_container th, div.ds_city_of_mist_by_gur div.ds_city_of_mist_by_gur div.ds_city_of_mist_by_gur .dst_container h1, div.ds_city_of_mist_by_gur .dst_container h2{ font-weight:normal; font-family: 'Bangers', cursive; letter-spacing: 2px; } div.ds_city_of_mist_by_gur .dst_container h3 { margin:15px 0 1px 0; font-weight:normal; text-decoration: underline; } div.ds_city_of_mist_by_gur .dst_theme_container { float:left; display:inline-block; width:100%; } div.ds_city_of_mist_by_gur .dst_theme, div.ds_city_of_mist_by_gur .basic_info_col { position:relative; float:left; margin:5px 1% 5px 1%; height:auto; z-index:2; } div.ds_city_of_mist_by_gur .basic_info_col{ width:25vw; } div.ds_city_of_mist_by_gur .buildup_col { margin:5px 1%; display:inline-block; } div.ds_city_of_mist_by_gur .dst_theme { width:24%; } div.ds_city_of_mist_by_gur .dst_theme_inner_container, div.ds_city_of_mist_by_gur .dst_faux_table, div.ds_city_of_mist_by_gur .dst_faux_table_crew { display:flex; margin:5px 0 5px 0; } div.ds_city_of_mist_by_gur .sheet_author, div.ds_city_of_mist_by_gur .chr_bio { clear:both; margin:5px 40px 5px 40px; } div.ds_city_of_mist_by_gur .dst_imp { clear:both; margin:10px 0; width:100%; } /**************************** character image box *****************************/ div.ds_city_of_mist_by_gur .photo_box { position:relative; margin:5vh auto 0 auto; background:url('https://chainsawxiv.github.io/DST/common/images/misc/photoborder.png') no-repeat; height:20vw; width:20vw; padding:2vw; background-size:contain; background-origin:padding-box; z-index:0; } div.ds_city_of_mist_by_gur .dsf_avatar_image { max-width:65%; max-height:65%; transform: rotate(2deg); left: 3.6vw; top: 5vw; position: absolute; overflow:hidden; } div.ds_city_of_mist_by_gur .dsf_avatar_image img { max-width:100%; max-height:auto; } /**************************** tables *****************************/ div.ds_city_of_mist_by_gur .dst_table, div.ds_city_of_mist_by_gur .dst_table_crew, div.ds_city_of_mist_by_gur .dst_table_wk { border-spacing:0; width:100%; } div.ds_city_of_mist_by_gur .dst_table th, div.ds_city_of_mist_by_gur .dst_table_crew th, div.ds_city_of_mist_by_gur .dst_table_wk th { background:#2E0854; color:white; font-size:1.2em; padding:2px 4px; } div.ds_city_of_mist_by_gur .dst_table td, div.ds_city_of_mist_by_gur .dst_table_crew td, div.ds_city_of_mist_by_gur .dst_table_wk td { padding:0px 10px; } div.ds_city_of_mist_by_gur .dst_table tr:nth-child(even), div.ds_city_of_mist_by_gur .dst_table_crew tr:nth-child(even), div.ds_city_of_mist_by_gur .dst_table_wk tr:nth-child(even) { background:white; } div.ds_city_of_mist_by_gur .dst_table_crew td:nth-child(3n+2), div.ds_city_of_mist_by_gur .dst_table_crew td:nth-child(3n+3) { text-align:center; } div.ds_city_of_mist_by_gur .dst_table td:nth-child(3n+1), div.ds_city_of_mist_by_gur .dst_table td:nth-child(3n+3) { text-align:center; width:12%; } div.ds_city_of_mist_by_gur .dst_table tr:nth-child(odd), div.ds_city_of_mist_by_gur .dst_table_crew tr:nth-child(odd), div.ds_city_of_mist_by_gur .dst_table_wk tr:nth-child(odd) { background:#f2f2f2; } div.ds_city_of_mist_by_gur .dst_table_wk td:nth-child(odd) { text-align:center; } div.ds_city_of_mist_by_gur .dst_table_wk td:nth-child(odd) { text-align:center; } div.ds_city_of_mist_by_gur .flame { background: url('https://chainsawxiv.github.io/DST/common/images/misc/flame-42424_960_720.png') center center no-repeat, #2E0854; background-size: contain; height:auto; background-origin:content-box; margin:0; min-height:30px; width:100%; } /**************************** burn checkbox *****************************/ div.ds_city_of_mist_by_gur .dst_table td:nth-child(3n+3) p { background: url('https://chainsawxiv.github.io/DST/common/images/misc/flame-42424_960_720.png') center center no-repeat; background-size: contain; background-origin:content-box; margin:0; filter:grayscale(100); } div.ds_city_of_mist_by_gur .dst_table input[type="checkbox"] { opacity:0; } div.ds_city_of_mist_by_gur .dst_customCheckboxChecked { filter:grayscale(0)!important; } /**************************** highlight effect *****************************/ div.ds_city_of_mist_by_gur .yellow-highlight { border-radius: 5px; padding-left: 3px; background: #E4FC5B; font-size:1.3em; }

JavaScript $(function(){ var checkboxs = $('.dst_table td input[type="checkbox"]'); checkboxs.each(function(){ if($(this).is(':checked')){ $(this).parent().addClass('dst_customCheckboxChecked'); } else { $(this).parent().removeClass('dst_customCheckboxChecked'); } }); checkboxs.change(function(){ if($(this).is(':checked')){ $(this).parent().addClass('dst_customCheckboxChecked'); } else { $(this).parent().removeClass('dst_customCheckboxChecked'); } }); })

Submit Notes

Back