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

JavaScript is currently disabled. Obsidian Portal has a lot of really cool features that use JavaScript. You should check them out. We think you'll have a much more enjoyable experience.

Call of Cthulhu (6th Edition)

Author: Natascope

Slug: coc_6e

System: Call of Cthulhu

DST Source Code

HTML Template

            <div class="content">
                <div class="coc_page1_split">
                    <div class="coc_sidebar">
                        <div class="coc_year">
                            <select class="coc_year_select" onchange="coc_6e_yearChanged(this);">
                                <option value="1890">1890's</option>
                                <option value="1920" selected="selected">1920's</option>
                                <option value="present">Present</option>
                            </select>
                            <span class="dsf dsf_year readonly coc_hidden"></span>
                        </div>
                        <div class="rotate_neg_90">
                            <div class="coc_gametitle">
                                <span class="coc_gametitle">Call of Cthulhu</span>
                                <div class="author">
                                    <span class="">DST Author:</span>
                                    <span class="dsf dsf_dst_author"></span>
                                </div>
                            </div>
                            <div class="player_info">
                                <div class="player">
                                    <span class="coc_title">Player:</span>
                                    <span class="dsf dsf_player"></span>
                                </div>
                                <div class="campaign">
                                    <span class="coc_title">Campaign:</span>
                                    <span class="dsf dsf_campaign"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="character_info coc_main_box">
                        <div class="name">
                            <span class="coc_title">Investigator Name:</span>
                            <span class="dsf dsf_name"></span>
                        </div>
                        <div class="occupation">
                            <span class="coc_title">Occupation:</span>
                            <span class="dsf dsf_occupation"></span>
                        </div>
                        <div class="colleges_degrees">
                            <span class="coc_title">Colleges, Degrees:</span>
                            <span class="dsf dsf_colleges_degrees"></span>
                        </div>
                        <div class="birthplace">
                            <span class="coc_title">Birthplace:</span>
                            <span class="dsf dsf_birthplace"></span>
                        </div>
                        <div class="mental_disorders">
                            <span class="coc_title">Mental Disorders:</span>
                            <span class="dsf dsf_mental_disorders"></span>
                        </div>
                        <div class="sex">
                            <span class="coc_title">Sex:</span>
                            <span class="dsf dsf_sex"></span>
                        </div>
                        <div class="age">
                            <span class="coc_title">Age:</span>
                            <span class="dsf dsf_age"></span>
                        </div>
                    </div>
                    <div class="rolls_and_points">
                        <div class="main_page_column">
                            <div class="column_left">
                                <div class="characteristics_rolls coc_main_box">
                                    <span class="coc_header">Characteristics &amp; Rolls</span>
                                    <div class="row">
                                        <div class="col">
                                            <span class="coc_title">STR</span>
                                            <span class="dsf dsf_str"></span>
                                        </div>
                                        <div class="col">
                                            <span class="coc_title">DEX</span>
                                            <span class="dsf dsf_dex"></span>
                                        </div>
                                        <div class="col">
                                            <span class="coc_title">INT</span>
                                            <span class="dsf dsf_int"></span>
                                        </div>
                                        <div class="col">
                                            <span class="coc_title">Idea</span>
                                            <span class="dsf dsf_idea"></span>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col">
                                            <span class="coc_title">CON</span>
                                            <span class="dsf dsf_con"></span>
                                        </div>
                                        <div class="col">
                                            <span class="coc_title">APP</span>
                                            <span class="dsf dsf_app"></span>
                                        </div>
                                        <div class="col">
                                            <span class="coc_title">POW</span>
                                            <span class="dsf dsf_pow"></span>
                                        </div>
                                        <div class="col">
                                            <span class="coc_title">Luck</span>
                                            <span class="dsf dsf_luck"></span>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col">
                                            <span class="coc_title">SIZ</span>
                                            <span class="dsf dsf_siz"></span>
                                        </div>
                                        <div class="col">
                                            <span class="coc_title">SAN</span>
                                            <span class="dsf dsf_san"></span>
                                        </div>
                                        <div class="col">
                                            <span class="coc_title">EDU</span>
                                            <span class="dsf dsf_edu"></span>
                                        </div>
                                        <div class="col">
                                            <span class="coc_title">Know</span>
                                            <span class="dsf dsf_know"></span>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="widecol">
                                            <span class="coc_title">99-Cthulhu Mythos</span>
                                            <span class="dsf dsf_cthulhu_sanity"></span>
                                        </div>
                                        <div class="widecol">
                                            <span class="coc_title">Damage Bonus</span>
                                            <span class="dsf dsf_damage_bonus"></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="main_page_column">
                            <div class="column_right">
                                <div class="points coc_main_box">
                                    <div class="sanity">
                                        <span class="coc_header">Sanity</span>
                                        <div class="sanity_points">
                                            <div class="current">
                                                <span class="coc_title">Current:</span>
                                                <span class="dsf dsf_current_sanity"></span>
                                            </div>
                                            <div class="maximum">
                                                <span class="coc_title">Max:</span>
                                                <span class="dsf dsf_maximum_sanity"></span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="magic">
                                        <span class="coc_header">Magic</span>
                                        <div class="magic_points">
                                            <div class="current">
                                                <span class="coc_title">Current:</span>
                                                <span class="dsf dsf_current_magic"></span>
                                            </div>
                                            <div class="maximum">
                                                <span class="coc_title">Max:</span>
                                                <span class="dsf dsf_maximum_magic"></span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="hit">
                                        <span class="coc_header">Hit Points</span>
                                        <div class="hit_points">
                                            <div class="current">
                                                <span class="coc_title">Current:</span>
                                                <span class="dsf dsf_current_hitpoints"></span>
                                            </div>
                                            <div class="maximum">
                                                <span class="coc_title">Max:</span>
                                                <span class="dsf dsf_maximum_hitpoints"></span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="investigator_skills coc_main_box">
                        <span class="coc_header">Investigator Skills</span>
                        <div class="column">
                            <div class="coc_skill_item">
                                <span class="skill_check dsf dsf_skill_accounting_check checkbox"></span>
                                <span class="skill_name">accounting</span>
                                <span class="skill_value dsf dsf_skill_accounting"></span>
                            </div>
                            <div class="coc_skill_item">
                                <span class="skill_check dsf dsf_skill_anthropology_check checkbox"></span>
                                <span class="skill_name">anthropology</span>
                                <span class="skill_value dsf dsf_skill_anthropology"></span>
                            </div>
                            <div class="coc_skill_item">
                                <span class="skill_check dsf dsf_skill_archaeology_check checkbox"></span>
                                <span class="skill_name">archaeology</span>
                                <span class="skill_value dsf dsf_skill_archaeology"></span>
                            </div>
                            <div class="coc_skill_item">
                                <span class="skill_check">&nbsp;</span>
                                <span class="skill_name">art</span>
                                <span class="skill_value">&nbsp;</span>
                            </div>
                            <div class="coc_skill_item">
                                <span class="skill_check dsf dsf_skill_art1_check checkbox"></span>
                                <span class="skill_name dsf dsf_skill_art1_name"></span>
                                <span class="skill_value dsf dsf_skill_art1"></span>
                            </div>
                            <div class="coc_skill_item">
                                <span class="skill_check dsf dsf_skill_art2_check checkbox"></span>
                                <span class="skill_name dsf dsf_skill_art2_name"></span>
                                <span class="skill_value dsf dsf_skill_art2"></span>
                            </div>
                            <div class="coc_skill_item">
                                <span class="skill_check dsf dsf_skill_astronomy_check checkbox"></span>
                                <span class="skill_name">astronomy</span>
                                <span class="skill_value dsf dsf_skill_astronomy"></span>
                            </div>
                            <div class="coc_skill_item">
                                <span class="skill_check dsf dsf_skill_bargain_check checkbox"></span>
                                <span class="skill_name">bargain</span>
                                <span class="skill_value dsf dsf_skill_bargain"></span>
                            </div>
                            <div class="coc_skill_item">
                                <span class="skill_check dsf dsf_skill_biology_check checkbox"></span>
                                <span class="skill_name">biology</span>
                                <span class="skill_value dsf dsf_skill_biology"></span>
                            </div>
                            <div class="coc_skill_item">
                                <span class="skill_check dsf dsf_skill_chemistry_check checkbox"></span>
                                <span class="skill_name">chemistry</span>
                                <span class="skill_value dsf dsf_skill_chemistry"></span>
                            </div>
                            <div class="coc_skill_item">
                                <span class="skill_check dsf dsf_skill_climb_check checkbox"></span>
                                <span class="skill_name">climb</span>
                                <span class="skill_value dsf dsf_skill_climb"></span>
                            </div>
                            <div class="coc_skill_item coc_year_present coc_hidden">
                                <span class="skill_check dsf dsf_skill_computer_use_check checkbox"></span>
                                <span class="skill_name">computer use</span>
                                <span class="skill_value dsf dsf_skill_computer_use"></span>
                            </div>
                            <div class="coc_skill_item">
                                <span class="skill_check dsf dsf_skill_conceal_check checkbox"></span>
                                <span class="skill_name">conceal</span>
                                <span class="skill_value dsf dsf_skill_conceal"></span>
                            </div>
                            <div class="coc_skill_item">
                                <span class="skill_check">&nbsp;</span>
                                <span class="skill_name">craft</span>
                                <span class="skill_value">&nbsp;</span>
                            </div>
                            <div class="coc_skill_item">
                                <span class="skill_check dsf dsf_skill_craft1_check checkbox"></span>
                                <span class="skill_name dsf dsf_skill_craf1_name"></span>
                                <span class="skill_value dsf dsf_skill_craft1"></span>
                            </div>
                            <div class="coc_skill_item">
                                <span class="skill_check dsf dsf_skill_craft2_check checkbox"></span>
                                <span class="skill_name dsf dsf_skill_craft2_name"></span>
                                <span class="skill_value dsf dsf_skill_craft2"></span>
                            </div>
                            <div class="coc_skill_item">
                                <span class="skill_check dsf dsf_skill_credit_rating_check checkbox"></span>
                                <span class="skill_name">credit rating</span>
                                <span class="skill_value dsf dsf_skill_credit_rating"></span>
                            </div>
                            <div class="coc_skill_item">
                                <span class="skill_check">&nbsp;</span>
                                <span class="skill_name">cthulhu mythos</span>
                                <span class="skill_value dsf dsf_skill_cthulhu_mythos"></span>
                            </div>
                            <div class="coc_skill_item">
                                <span class="skill_check dsf dsf_skill_disguise_check checkbox"></span>
                                <span class="skill_name">disguise</span>
                                <span class="skill_value dsf dsf_skill_disguise"></span>
                            </div>
                            <div class="coc_skill_item">
                                <span class="skill_check dsf dsf_skill_dodge_check checkbox"></span>
                                <span class="skill_name">dodge</span>
                                <span class="skill_value dsf dsf_skill_dodge"></span>
                            </div>
                            <div class="coc_skill_item coc_year_1920 coc_year_present">
                                <span class="skill_check dsf dsf_skill_drive_auto_check checkbox"></span>
                                <span class="skill_name">drive auto</span>
                                <span class="skill_value dsf dsf_skill_drive_auto"></span>
                            </div>
                            <div class="coc_skill_item coc_year_1890 coc_hidden">
                                <span class="skill_check dsf dsf_skill_drive_carriage_check checkbox"></span>
                                <span class="skill_name">drive carriage</span>
                                <span class="skill_value dsf dsf_skill_drive_carriage"></span>
                            </div>
                            <div class="coc_skill_item">
                                <span class="skill_check dsf dsf_skill_electronic_repair_check checkbox"></span>
                                <span class="skill_name">electr. repair</span>
                                <span class="skill_value dsf dsf_skill_electronic_repair"></span>
                            </div>
                            <div class="coc_skill_item coc_year_present coc_hidden">
                                <span class="skill_check dsf dsf_skill_electronics_check checkbox"></span>
                                <span class="skill_name">electronics</span>
                                <span class="skill_value dsf dsf_skill_electronics"></span>
                            </div>
                            <div class="coc_skill_item">
                                <span class="skill_check dsf dsf_skill_fast_talk_check checkbox"></span>
                                <span class="skill_name">fast talk</span>
                                <span class="skill_value dsf dsf_skill_fast_talk"></span>
                            </div>
                            <div class="coc_skill_item">
                                <span class="skill_check dsf dsf_skill_first_aid_check checkbox"></span>
                                <span class="skill_name">first aid</span>
                                <span class="skill_value dsf dsf_skill_first_aid"></span>
                            </div>
                            <div class="coc_skill_item">
                                <span class="skill_check dsf dsf_skill_geology_check checkbox"></span>
                                <span class="skill_name">geology</span>
                                <span class="skill_value dsf dsf_skill_geology"></span>
                            </div>
                            <div class="coc_skill_item">
                                <span class="skill_check dsf dsf_skill_hide_check checkbox"></span>
                                <span class="skill_name">hide</span>
                                <span class="skill_value dsf dsf_skill_hide"></span>
                            </div>
                            <div class="coc_skill_item">
                                <span class="skill_check dsf dsf_skill_history_check checkbox"></span>
                                <span class="skill_name">history</span>
                                <span class="skill_value dsf dsf_skill_history"></span>
                            </div>
                            <div class="coc_skill_item">
                                <span class="skill_check dsf dsf_skill_jump_check checkbox"></span>
                                <span class="skill_name">jump</span>
                                <span class="skill_value dsf dsf_skill_jump"></span>
                            </div>
                        </div>
                        <div class="column">
                            <div class="coc_skill_item">
                                <span class="skill_check dsf dsf_skill_law_check checkbox"></span>
                                <span class="skill_name">law</span>
                                <span class="skill_value dsf dsf_skill_law"></span>
                            </div>
                            <div class="coc_skill_item">
                                <span class="skill_check dsf dsf_skill_library_use_check checkbox"></span>
                                <span class="skill_name">library use</span>
                                <span class="skill_value dsf dsf_skill_library_use"></span>
                            </div>
                            <div class="coc_skill_item">
                                <span class="skill_check dsf dsf_skill_listen_check checkbox"></span>
                                <span class="skill_name">listen</span>
                                <span class="skill_value dsf dsf_skill_listen"></span>
                            </div>
                            <div class="coc_skill_item">
                                <span class="skill_check dsf dsf_skill_locksmith_check checkbox"></span>
                                <span class="skill_name">locksmith</span>
                                <span class="skill_value dsf dsf_skill_locksmith"></span>
                            </div>
                            <div class="coc_skill_item">
                                <span class="skill_check dsf dsf_skill_martial_arts_check checkbox"></span>
                                <span class="skill_name">martial arts</span>
                                <span class="skill_value dsf dsf_skill_martial_arts"></span>
                            </div>
                            <div class="coc_skill_item">
                                <span class="skill_check dsf dsf_skill_mechanical_repair_check checkbox"></span>
                                <span class="skill_name">mech. repair</span>
                                <span class="skill_value dsf dsf_skill_mechanical_repair"></span>
                            </div>
                            <div class="coc_skill_item">
                                <span class="skill_check dsf dsf_skill_medicine_check checkbox"></span>
                                <span class="skill_name">medicine</span>
                                <span class="skill_value dsf dsf_skill_medicine"></span>
                            </div>
                            <div class="coc_skill_item">
                                <span class="skill_check dsf dsf_skill_natural_history_check checkbox"></span>
                                <span class="skill_name">natural history</span>
                                <span class="skill_value dsf dsf_skill_natural_history"></span>
                            </div>
                            <div class="coc_skill_item">
                                <span class="skill_check dsf dsf_skill_navigate_check checkbox"></span>
                                <span class="skill_name">navigate</span>
                                <span class="skill_value dsf dsf_skill_navigate"></span>
                            </div>
                            <div class="coc_skill_item">
                                <span class="skill_check dsf dsf_skill_occult_check checkbox"></span>
                                <span class="skill_name">occult</span>
                                <span class="skill_value dsf dsf_skill_occult"></span>
                            </div>
                            <div class="coc_skill_item">
                                <span class="skill_check dsf dsf_skill_operate_heavy_machinery_check checkbox"></span>
                                <span class="skill_name">opr. hvy. mch.</span>
                                <span class="skill_value dsf dsf_skill_operate_heavy_machinery"></span>
                            </div>
                            <div class="coc_skill_item">
                                <span class="skill_check">&nbsp;</span>
                                <span class="skill_name">other language</span>
                                <span class="skill_value">&nbsp;</span>
                            </div>
                            <div class="coc_skill_item">
                                <span class="skill_check dsf dsf_skill_other_language1_check checkbox"></span>
                                <span class="skill_name dsf dsf_skill_other_language1_name"></span>
                                <span class="skill_value dsf dsf_skill_other_language1"></span>
                            </div>
                            <div class="coc_skill_item">
                                <span class="skill_check dsf dsf_skill_other_language2_check checkbox"></span>
                                <span class="skill_name dsf dsf_skill_other_language2_name"></span>
                                <span class="skill_value dsf dsf_skill_other_language2"></span>
                            </div>
                            <div class="coc_skill_item">
                                <span class="skill_check dsf dsf_skill_other_language3_check checkbox"></span>
                                <span class="skill_name dsf dsf_skill_other_language3_name"></span>
                                <span class="skill_value dsf dsf_skill_other_language3"></span>
                            </div>
                            <div class="coc_skill_item">
                                <span class="skill_check">&nbsp;</span>
                                <span class="skill_name">own language</span>
                                <span class="skill_value">&nbsp;</span>
                            </div>
                            <div class="coc_skill_item">
                                <span class="skill_check dsf dsf_skill_own_language_check checkbox"></span>
                                <span class="skill_name dsf dsf_skill_own_language_name"></span>
                                <span class="skill_value dsf dsf_skill_own_language"></span>
                            </div>
                            <div class="coc_skill_item">
                                <span class="skill_check dsf dsf_skill_persuade_check checkbox"></span>
                                <span class="skill_name">persuade</span>
                                <span class="skill_value dsf dsf_skill_persuade"></span>
                            </div>
                            <div class="coc_skill_item">
                                <span class="skill_check dsf dsf_skill_pharmacy_check checkbox"></span>
                                <span class="skill_name">pharmacy</span>
                                <span class="skill_value dsf dsf_skill_pharmacy"></span>
                            </div>
                            <div class="coc_skill_item">
                                <span class="skill_check dsf dsf_skill_photography_check checkbox"></span>
                                <span class="skill_name">photography</span>
                                <span class="skill_value dsf dsf_skill_photography"></span>
                            </div>
                            <div class="coc_skill_item">
                                <span class="skill_check dsf dsf_skill_physics_check checkbox"></span>
                                <span class="skill_name">physics</span>
                                <span class="skill_value dsf dsf_skill_physics"></span>
                            </div>
                            <div class="coc_skill_item coc_year_1920 coc_year_present">
                                <span class="skill_check">&nbsp;</span>
                                <span class="skill_name">pilot</span>
                                <span class="skill_value">&nbsp;</span>
                            </div>
                            <div class="coc_skill_item coc_year_1920 coc_year_present">
                                <span class="skill_check dsf dsf_skill_pilot1_check checkbox"></span>
                                <span class="skill_name dsf dsf_skill_pilot1_name"></span>
                                <span class="skill_value dsf dsf_skill_pilot1"></span>
                            </div>
                            <div class="coc_skill_item coc_year_1920 coc_year_present">
                                <span class="skill_check dsf dsf_skill_pilot2_check checkbox"></span>
                                <span class="skill_name dsf dsf_skill_pilot2_name"></span>
                                <span class="skill_value dsf dsf_skill_pilot2"></span>
                            </div>
                            <div class="coc_skill_item coc_year_1890 coc_hidden">
                                <span class="skill_check dsf dsf_skill_pilot_balloon_check checkbox"></span>
                                <span class="skill_name">pilot balloon</span>
                                <span class="skill_value dsf dsf_skill_pilot_balloon"></span>
                            </div>
                            <div class="coc_skill_item coc_year_1890 coc_hidden">
                                <span class="skill_check dsf dsf_skill_pilot_boat_check checkbox"></span>
                                <span class="skill_name">pilot boat</span>
                                <span class="skill_value dsf dsf_skill_pilot_boat"></span>
                            </div>
                            <div class="coc_skill_item coc_year_1920 coc_year_present">
                                <span class="skill_check dsf dsf_skill_psychoanalysis_check checkbox"></span>
                                <span class="skill_name">psychoanalysis</span>
                                <span class="skill_value dsf dsf_skill_psychoanalysis"></span>
                            </div>
                            <div class="coc_skill_item">
                                <span class="skill_check dsf dsf_skill_psychology_check checkbox"></span>
                                <span class="skill_name">psychology</span>
                                <span class="skill_value dsf dsf_skill_psychology"></span>
                            </div>
                            <div class="coc_skill_item">
                                <span class="skill_check dsf dsf_skill_ride_check checkbox"></span>
                                <span class="skill_name">ride</span>
                                <span class="skill_value dsf dsf_skill_ride"></span>
                            </div>
                        </div>
                        <div class="column">
                            <div class="coc_character_image">
                                <span class="dsf dsf_avatar_image"></span>
                            </div>
                            <div class="coc_skill_item">
                                <span class="skill_check dsf dsf_skill_sneak_check checkbox"></span>
                                <span class="skill_name">sneak</span>
                                <span class="skill_value dsf dsf_skill_sneak"></span>
                            </div>
                            <div class="coc_skill_item">
                                <span class="skill_check dsf dsf_skill_spot_hidden_check checkbox"></span>
                                <span class="skill_name">spot hidden</span>
                                <span class="skill_value dsf dsf_skill_spot_hidden"></span>
                            </div>
                            <div class="coc_skill_item">
                                <span class="skill_check dsf dsf_skill_swim_check checkbox"></span>
                                <span class="skill_name">swim</span>
                                <span class="skill_value dsf dsf_skill_swim"></span>
                            </div>
                            <div class="coc_skill_item">
                                <span class="skill_check dsf dsf_skill_throw_check checkbox"></span>
                                <span class="skill_name">throw</span>
                                <span class="skill_value dsf dsf_skill_throw"></span>
                            </div>
                            <div class="coc_skill_item">
                                <span class="skill_check dsf dsf_skill_track_check checkbox"></span>
                                <span class="skill_name">track</span>
                                <span class="skill_value dsf dsf_skill_track"></span>
                            </div>
                            <div class="coc_skill_item">
                                <span class="skill_check dsf dsf_skill_custom1_check checkbox"></span>
                                <span class="skill_name dsf dsf_skill_custom1_name"></span>
                                <span class="skill_value dsf dsf_skill_custom1"></span>
                            </div>
                            <div class="coc_skill_item">
                                <span class="skill_check dsf dsf_skill_custom2_check checkbox"></span>
                                <span class="skill_name dsf dsf_skill_custom2_name"></span>
                                <span class="skill_value dsf dsf_skill_custom2"></span>
                            </div>
                            <div class="coc_skill_item">
                                <span class="skill_check dsf dsf_skill_custom3_check checkbox"></span>
                                <span class="skill_name dsf dsf_skill_custom3_name"></span>
                                <span class="skill_value dsf dsf_skill_custom3"></span>
                            </div>
                            <div class="coc_skill_item">
                                <span class="skill_check dsf dsf_skill_custom4_check checkbox"></span>
                                <span class="skill_name dsf dsf_skill_custom4_name"></span>
                                <span class="skill_value dsf dsf_skill_custom4"></span>
                            </div>
                            <div class="coc_skill_item coc_year_1890 coc_year_1920">
                                <span class="skill_check dsf dsf_skill_custom5_check checkbox"></span>
                                <span class="skill_name dsf dsf_skill_custom5_name"></span>
                                <span class="skill_value dsf dsf_skill_custom5"></span>
                            </div>
                            <div class="coc_skill_item coc_year_1890 coc_year_1920">
                                <span class="skill_check dsf dsf_skill_custom6_check checkbox"></span>
                                <span class="skill_name dsf dsf_skill_custom6_name"></span>
                                <span class="skill_value dsf dsf_skill_custom6"></span>
                            </div>
                            <div class="coc_skill_item coc_year_1890 coc_hidden">
                                <span class="skill_check dsf dsf_skill_custom7_check checkbox"></span>
                                <span class="skill_name dsf dsf_skill_custom7_name"></span>
                                <span class="skill_value dsf dsf_skill_custom7"></span>
                            </div>
                            <div class="coc_skill_item coc_year_1890 coc_hidden">
                                <span class="skill_check dsf dsf_skill_custom8_check checkbox"></span>
                                <span class="skill_name dsf dsf_skill_custom8_name"></span>
                                <span class="skill_value dsf dsf_skill_custom8"></span>
                            </div>
                            <div class="coc_skill_item coc_year_1890 coc_hidden">
                                <span class="skill_check dsf dsf_skill_custom9_check checkbox"></span>
                                <span class="skill_name dsf dsf_skill_custom9_name"></span>
                                <span class="skill_value dsf dsf_skill_custom9"></span>
                            </div>
                            <div class="coc_skill_item">
                                <span class="skill_check">&nbsp;</span>
                                <span class="skill_section_header">Firearms</span>
                            </div>
                            <div class="coc_skill_item">
                                <span class="skill_check dsf dsf_skill_handgun_check checkbox"></span>
                                <span class="skill_name">handgun</span>
                                <span class="skill_value dsf dsf_skill_handgun"></span>
                            </div>
                            <div class="coc_skill_item">
                                <span class="skill_check dsf dsf_skill_machine_gun_check checkbox"></span>
                                <span class="skill_name">machine gun</span>
                                <span class="skill_value dsf dsf_skill_machine_gun"></span>
                            </div>
                            <div class="coc_skill_item">
                                <span class="skill_check dsf dsf_skill_rifle_check checkbox"></span>
                                <span class="skill_name">rifle</span>
                                <span class="skill_value dsf dsf_skill_rifle"></span>
                            </div>
                            <div class="coc_skill_item">
                                <span class="skill_check dsf dsf_skill_shotgun_check checkbox"></span>
                                <span class="skill_name">shotgun</span>
                                <span class="skill_value dsf dsf_skill_shotgun"></span>
                            </div>
                            <div class="coc_skill_item coc_year_1920 coc_year_present">
                                <span class="skill_check dsf dsf_skill_smg_check checkbox"></span>
                                <span class="skill_name">SMG</span>
                                <span class="skill_value dsf dsf_skill_smg"></span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="weapons coc_main_box">
                    <span class="coc_header">Weapons</span>
                    <div class="coc_weapons_item">
                        <span class="weapons_check weapons_header">&nbsp;</span>
                        <span class="weapons_name weapons_header">name</span>
                        <span class="weapons_percent weapons_header">%</span>
                        <span class="weapons_damage weapons_header">damage</span>
                        <span class="weapons_malfunction weapons_header">malf</span>
                        <span class="weapons_hands weapons_header">hnd</span>
                        <span class="weapons_range weapons_header">rng</span>
                        <span class="weapons_num_attack weapons_header">#att</span>
                        <span class="weapons_shots weapons_header">shots</span>
                        <span class="weapons_hitpoints weapons_header">hp</span>
                    </div>
                    <div class="coc_weapons_item">
                        <span class="weapons_check dsf dsf_weapon1_check checkbox"></span>
                        <span class="weapons_name dsf dsf_weapon1_name"></span>
                        <span class="weapons_percent dsf dsf_weapon1_percent"></span>
                        <span class="weapons_damage dsf dsf_weapon1_damage"></span>
                        <span class="weapons_malfunction dsf dsf_weapon1_malfunction"></span>
                        <span class="weapons_hands dsf dsf_weapon1_hands"></span>
                        <span class="weapons_range dsf dsf_weapon1_range"></span>
                        <span class="weapons_num_attack dsf dsf_weapon1_num_attack"></span>
                        <span class="weapons_shots dsf dsf_weapon1_shots"></span>
                        <span class="weapons_hitpoints dsf dsf_weapon1_hitpoints"></span>
                    </div>
                    <div class="coc_weapons_item">
                        <span class="weapons_check dsf dsf_weapon2_check checkbox"></span>
                        <span class="weapons_name dsf dsf_weapon2_name"></span>
                        <span class="weapons_percent dsf dsf_weapon2_percent"></span>
                        <span class="weapons_damage dsf dsf_weapon2_damage"></span>
                        <span class="weapons_malfunction dsf dsf_weapon2_malfunction"></span>
                        <span class="weapons_hands dsf dsf_weapon2_hands"></span>
                        <span class="weapons_range dsf dsf_weapon2_range"></span>
                        <span class="weapons_num_attack dsf dsf_weapon2_num_attack"></span>
                        <span class="weapons_shots dsf dsf_weapon2_shots"></span>
                        <span class="weapons_hitpoints dsf dsf_weapon2_hitpoints"></span>
                    </div>
                    <div class="coc_weapons_item">
                        <span class="weapons_check dsf dsf_weapon3_check checkbox"></span>
                        <span class="weapons_name dsf dsf_weapon3_name"></span>
                        <span class="weapons_percent dsf dsf_weapon3_percent"></span>
                        <span class="weapons_damage dsf dsf_weapon3_damage"></span>
                        <span class="weapons_malfunction dsf dsf_weapon3_malfunction"></span>
                        <span class="weapons_hands dsf dsf_weapon3_hands"></span>
                        <span class="weapons_range dsf dsf_weapon3_range"></span>
                        <span class="weapons_num_attack dsf dsf_weapon3_num_attack"></span>
                        <span class="weapons_shots dsf dsf_weapon3_shots"></span>
                        <span class="weapons_hitpoints dsf dsf_weapon3_hitpoints"></span>
                    </div>
                    <div class="coc_weapons_item">
                        <span class="weapons_check dsf dsf_weapon4_check checkbox"></span>
                        <span class="weapons_name dsf dsf_weapon4_name"></span>
                        <span class="weapons_percent dsf dsf_weapon4_percent"></span>
                        <span class="weapons_damage dsf dsf_weapon4_damage"></span>
                        <span class="weapons_malfunction dsf dsf_weapon4_malfunction"></span>
                        <span class="weapons_hands dsf dsf_weapon4_hands"></span>
                        <span class="weapons_range dsf dsf_weapon4_range"></span>
                        <span class="weapons_num_attack dsf dsf_weapon4_num_attack"></span>
                        <span class="weapons_shots dsf dsf_weapon4_shots"></span>
                        <span class="weapons_hitpoints dsf dsf_weapon4_hitpoints"></span>
                    </div>
                    <div class="coc_weapons_item">
                        <span class="weapons_check dsf dsf_weapon5_check checkbox"></span>
                        <span class="weapons_name dsf dsf_weapon5_name"></span>
                        <span class="weapons_percent dsf dsf_weapon5_percent"></span>
                        <span class="weapons_damage dsf dsf_weapon5_damage"></span>
                        <span class="weapons_malfunction dsf dsf_weapon5_malfunction"></span>
                        <span class="weapons_hands dsf dsf_weapon5_hands"></span>
                        <span class="weapons_range dsf dsf_weapon5_range"></span>
                        <span class="weapons_num_attack dsf dsf_weapon5_num_attack"></span>
                        <span class="weapons_shots dsf dsf_weapon5_shots"></span>
                        <span class="weapons_hitpoints dsf dsf_weapon5_hitpoints"></span>
                    </div>
                    <div class="coc_weapons_item">
                        <span class="weapons_check dsf dsf_weapon6_check checkbox"></span>
                        <span class="weapons_name dsf dsf_weapon6_name"></span>
                        <span class="weapons_percent dsf dsf_weapon6_percent"></span>
                        <span class="weapons_damage dsf dsf_weapon6_damage"></span>
                        <span class="weapons_malfunction dsf dsf_weapon6_malfunction"></span>
                        <span class="weapons_hands dsf dsf_weapon6_hands"></span>
                        <span class="weapons_range dsf dsf_weapon6_range"></span>
                        <span class="weapons_num_attack dsf dsf_weapon6_num_attack"></span>
                        <span class="weapons_shots dsf dsf_weapon6_shots"></span>
                        <span class="weapons_hitpoints dsf dsf_weapon6_hitpoints"></span>
                    </div>
                    <div class="coc_weapons_item">
                        <span class="weapons_check dsf dsf_weapon7_check checkbox"></span>
                        <span class="weapons_name dsf dsf_weapon7_name"></span>
                        <span class="weapons_percent dsf dsf_weapon7_percent"></span>
                        <span class="weapons_damage dsf dsf_weapon7_damage"></span>
                        <span class="weapons_malfunction dsf dsf_weapon7_malfunction"></span>
                        <span class="weapons_hands dsf dsf_weapon7_hands"></span>
                        <span class="weapons_range dsf dsf_weapon7_range"></span>
                        <span class="weapons_num_attack dsf dsf_weapon7_num_attack"></span>
                        <span class="weapons_shots dsf dsf_weapon7_shots"></span>
                        <span class="weapons_hitpoints dsf dsf_weapon7_hitpoints"></span>
                    </div>
                    <div class="coc_weapons_item">
                        <span class="weapons_check dsf dsf_weapon8_check checkbox"></span>
                        <span class="weapons_name dsf dsf_weapon8_name"></span>
                        <span class="weapons_percent dsf dsf_weapon8_percent"></span>
                        <span class="weapons_damage dsf dsf_weapon8_damage"></span>
                        <span class="weapons_malfunction dsf dsf_weapon8_malfunction"></span>
                        <span class="weapons_hands dsf dsf_weapon8_hands"></span>
                        <span class="weapons_range dsf dsf_weapon8_range"></span>
                        <span class="weapons_num_attack dsf dsf_weapon8_num_attack"></span>
                        <span class="weapons_shots dsf dsf_weapon8_shots"></span>
                        <span class="weapons_hitpoints dsf dsf_weapon8_hitpoints"></span>
                    </div>
                    <div class="coc_weapons_item">
                        <span class="weapons_check dsf dsf_weapon9_check checkbox"></span>
                        <span class="weapons_name dsf dsf_weapon9_name"></span>
                        <span class="weapons_percent dsf dsf_weapon9_percent"></span>
                        <span class="weapons_damage dsf dsf_weapon9_damage"></span>
                        <span class="weapons_malfunction dsf dsf_weapon9_malfunction"></span>
                        <span class="weapons_hands dsf dsf_weapon9_hands"></span>
                        <span class="weapons_range dsf dsf_weapon9_range"></span>
                        <span class="weapons_num_attack dsf dsf_weapon9_num_attack"></span>
                        <span class="weapons_shots dsf dsf_weapon9_shots"></span>
                        <span class="weapons_hitpoints dsf dsf_weapon9_hitpoints"></span>
                    </div>
                    <div class="coc_weapons_item">
                        <span class="weapons_check dsf dsf_weapon10_check checkbox"></span>
                        <span class="weapons_name dsf dsf_weapon10_name"></span>
                        <span class="weapons_percent dsf dsf_weapon10_percent"></span>
                        <span class="weapons_damage dsf dsf_weapon10_damage"></span>
                        <span class="weapons_malfunction dsf dsf_weapon10_malfunction"></span>
                        <span class="weapons_hands dsf dsf_weapon10_hands"></span>
                        <span class="weapons_range dsf dsf_weapon10_range"></span>
                        <span class="weapons_num_attack dsf dsf_weapon10_num_attack"></span>
                        <span class="weapons_shots dsf dsf_weapon10_shots"></span>
                        <span class="weapons_hitpoints dsf dsf_weapon10_hitpoints"></span>
                    </div>
                    <div class="coc_weapons_item">
                        <span class="weapons_check dsf dsf_weapon11_check checkbox"></span>
                        <span class="weapons_name dsf dsf_weapon11_name"></span>
                        <span class="weapons_percent dsf dsf_weapon11_percent"></span>
                        <span class="weapons_damage dsf dsf_weapon11_damage"></span>
                        <span class="weapons_malfunction dsf dsf_weapon11_malfunction"></span>
                        <span class="weapons_hands dsf dsf_weapon11_hands"></span>
                        <span class="weapons_range dsf dsf_weapon11_range"></span>
                        <span class="weapons_num_attack dsf dsf_weapon11_num_attack"></span>
                        <span class="weapons_shots dsf dsf_weapon11_shots"></span>
                        <span class="weapons_hitpoints dsf dsf_weapon11_hitpoints"></span>
                    </div>
                    <div class="coc_weapons_item">
                        <span class="weapons_check dsf dsf_weapon12_check checkbox"></span>
                        <span class="weapons_name dsf dsf_weapon12_name"></span>
                        <span class="weapons_percent dsf dsf_weapon12_percent"></span>
                        <span class="weapons_damage dsf dsf_weapon12_damage"></span>
                        <span class="weapons_malfunction dsf dsf_weapon12_malfunction"></span>
                        <span class="weapons_hands dsf dsf_weapon12_hands"></span>
                        <span class="weapons_range dsf dsf_weapon12_range"></span>
                        <span class="weapons_num_attack dsf dsf_weapon12_num_attack"></span>
                        <span class="weapons_shots dsf dsf_weapon12_shots"></span>
                        <span class="weapons_hitpoints dsf dsf_weapon12_hitpoints"></span>
                    </div>
                </div>
                <div class="page_marker">
                    <hr />
                </div>
                <div class="personal_data coc_main_box">
                    <span class="coc_header">Personal Data</span>
                    <div class="name">
                        <span class="coc_title">Investigator Name:</span>
                        <span class="dsf dsf_name"></span>
                    </div>
                    <div class="residence">
                        <span class="coc_title">Residence:</span>
                        <span class="dsf dsf_residence"></span>
                    </div>
                    <div class="quick_description">
                        <span class="coc_title">Personal Description:</span>
                        <span class="dsf dsf_personal_description"></span>
                    </div>
                    <div class="family_friends">
                        <span class="coc_title">Family &amp; Friends:</span>
                        <span class="dsf dsf_family_friends"></span>
                    </div>
                    <div class="insanity_episodes">
                        <span class="coc_title">Episodes of Insanity:</span>
                        <span class="dsf dsf_insanity_episodes"></span>
                    </div>
                    <div class="wounds_injuries">
                        <span class="coc_title">Wounds &amp; Injuries:</span>
                        <span class="dsf dsf_wounds_injuries"></span>
                    </div>
                    <div class="marks_scars">
                        <span class="coc_title">Marks &amp; Scars:</span>
                        <span class="dsf dsf_marks_scars"></span>
                    </div>
                </div>
                <div class="investigator_history coc_main_box">
                    <span class="coc_header">Investigator History</span>
                    <div class="internals">
                        <span class="dsf dsf_bio"></span>
                    </div>
                </div>
                <div class="bottom_page_2">
                    <div class="main_page_column">
                        <div class="column_left">
                            <div class="income_savings coc_main_box">
                                <span class="coc_header">Income &amp; Savings</span>
                                <div class="income">
                                    <span class="coc_title">Income:</span>
                                    <span class="dsf dsf_income"></span>
                                </div>
                                <div class="cash_on_hand">
                                    <span class="coc_title">Cash on Hand:</span>
                                    <span class="dsf dsf_cash_on_hand"></span>
                                </div>
                                <div class="savings">
                                    <span class="coc_title">Savings:</span>
                                    <span class="dsf dsf_savings"></span>
                                </div>
                                <div class="personal_property">
                                    <span class="coc_title">Personal Property:</span>
                                    <span class="dsf dsf_personal_property"></span>
                                </div>
                                <div class="real_estate">
                                    <span class="coc_title">Real Estate</span>
                                    <span class="dsf dsf_real_estate"></span>
                                </div>
                            </div>
                            <div class="mythos_tomes_read coc_main_box">
                                <span class="coc_header">Mythos Tomes Read</span>
                                <div class="internals">
                                    <span class="dsf dsf_mythos_tomes_read"></span>
                                </div>
                            </div>
                            <div class="artifacts_spells coc_main_box">
                                <span class="coc_header">Magical Artifacts / Spells Known</span>
                                <div class="magical_artifacts">
                                    <span class="artifacts_spells_subheader">Artifacts</span>
                                    <span class="dsf dsf_magical_artifcats"></span>
                                </div>
                                <div class="spells_known">
                                    <span class="artifacts_spells_subheader">Spells</span>
                                    <span class="dsf dsf_spells_known"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="main_page_column">
                        <div class="column_right">
                            <div class="adventuring_gear_possessions coc_main_box">
                                <span class="coc_header">Adventuring Gear &amp; Possessions</span>
                                <div class="internals">
                                    <span class="dsf dsf_adventuring_gear_possessions"></span>
                                </div>
                            </div>
                            <div class="monster_history coc_main_box">
                                <span class="coc_header">Monster History</span>
                                <div class="internals">
                                    <span class="dsf dsf_monster_history"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

CSS

/****************************
* This is the CSS for the coc_6e
*****************************/

.ds_coc_6e
{
    width: 700px;
}

.ds_coc_6e .coc_main_box
{
    border-width: 1px;
    border-color: black;
    border-style: solid;
    overflow: auto;
    padding-bottom: .5em;
    margin-bottom: 6px;
}

.ds_coc_6e .coc_title
{
    font-weight: bold;
    clear: left;
}

.ds_coc_6e .coc_header
{
    width: 100%;
    font-size: 125%;
    font-weight: bold;
    background-color: black;
    color: white;
    float: left;
    text-align: center;
    margin-bottom: .25em;
}

.ds_coc_6e .coc_hidden
{
    display: none;
    visibility: hidden;
}

.ds_coc_6e .page_marker
{
    margin-top: 1em;
    margin-bottom: 1em;
}

.ds_coc_6e .main_page_column
{
    width: 50%;
    float: left;
}

.ds_coc_6e .column_left
{
    padding-right: 3px;
}

.ds_coc_6e .column_right
{
    padding-left: 3px;
}

.ds_coc_6e .bottom_page_2
{
    overflow: auto;
}

/****************************
* Left Sidebar / Header
*****************************/
.ds_coc_6e .coc_sidebar
{
    width: 5em;
    height: 50em;
    position: relative;
    float: left;
    background-color: Black;
    color: White;
    margin-right: 6px;
}

.ds_coc_6e .coc_year
{
    background-color: black;
    color: white;
    float: left;
    width: 100%;
    text-align: center;
}

.ds_coc_6e .coc_year_select
{
    font-size: 100%;
    font-weight: normal;
    background-color: black;
    color: white;
    float: left;
    width: 100%;
    text-align: center;
    border: 0px;
    padding: 0px;
    margin: 0px;
}

.ds_coc_6e .coc_sidebar .rotate_neg_90
{
    border-width: 0px;
    border-style: solid;
    border-color: Red;
    position: absolute;
    bottom: -3em;
    width: 45em;
    left: 0px;
    
    -ms-transform: rotate(-90deg);
    -ms-transform-origin: 0% 0%;
    
    -o-transform: rotate(-90deg);
    -o-transform-origin: 0% 0%;
    
    -webkit-transform: rotate(-90deg);
    -webkit-transform-origin: 0% 0%;
    
    -moz-transform: rotate(-90deg);
    -moz-transform-origin: 0% 0%;
}

.ds_coc_6e .coc_gametitle
{
    float: left;
    width: 25em;
}

.ds_coc_6e .coc_gametitle .coc_gametitle
{
    font-size: 200%;
    font-weight: bold;
}

.ds_coc_6e .coc_gametitle .author
{
    font-size: 75%;
}

.ds_coc_6e .player_info
{
    margin-left: 2em;
    float: left;
    background-color: Window;
    color: WindowText;
    padding: 2px 2px 2px 2px;
    margin-top: 0.5em;
}

.ds_coc_6e .coc_sidebar a
{
    text-decoration: none;
}

/****************************
* Character Info
*****************************/
.ds_coc_6e .character_info .coc_title 
{
    float: left;
    padding-right: 6px;
}

.ds_coc_6e .character_info .dsf
{
    float: left;
    min-width: 50%;
}

.ds_coc_6e .sex
{
    float: left;
    width: 50%;
}

.ds_coc_6e .sex .dsf
{
    float: left;
    min-width: 25%;
}

.ds_coc_6e .age
{
    float: left;
    width: 50%;
}

.ds_coc_6e .age .dsf
{
    float: left;
    min-width: 25%;
}

/****************************
* Characteristics and Rolls
*****************************/
.ds_coc_6e .rolls_and_points
{
    overflow: auto;
}

.ds_coc_6e .characteristics_rolls .row
{
    clear: left;
}

.ds_coc_6e .characteristics_rolls .col
{
    float: left;
    width: 25%;
}

.ds_coc_6e .characteristics_rolls .coc_title
{
    float: left;
    width: 3.1em;
}

.ds_coc_6e .characteristics_rolls .widecol
{
    float: left;
    width: 50%;
    font-size: 75%;
    margin-top: 1px;
}

.ds_coc_6e .characteristics_rolls .widecol .coc_title
{
    width: auto;
    font-weight: normal;
    margin-right: 6px;
    float: left;
}

.ds_coc_6e .dsf_cthulhu_sanity
{
    float: left;
    min-width: 20px;
}

.ds_coc_6e .dsf_damage_bonus
{
    float: left;
    min-width: 40px;
}

/****************************
* Points
*****************************/
.ds_coc_6e .points .current
{
    clear: left;
}

.ds_coc_6e .points .maximum
{
    clear: left;
}

.ds_coc_6e .points .sanity
{
    float: left;
    width: 33.33%;
}

.ds_coc_6e .points .magic
{
    float: left;
    width: 33.33%;
}

.ds_coc_6e .points .hit
{
    float: left;
    width: 33.33%;
}

.ds_coc_6e .points .coc_title
{
    float: left;
    width: 75%;
}

/****************************
* Investigator Skills
*****************************/
.ds_coc_6e .investigator_skills .column
{
    float: left;
    width: 33.33%;
    position: relative;
}

.ds_coc_6e .investigator_skills .coc_skill_item
{
    clear: left;
}

.ds_coc_6e .investigator_skills .skill_check
{
    float: left;
    width: 25px;
    clear: left;
}

.ds_coc_6e .investigator_skills .skill_name
{
    text-transform: capitalize;
    float: left;
    width: 8em;
}

.ds_coc_6e .investigator_skills .skill_value
{
    float: left;
}

.ds_coc_6e .skill_section_header
{
    float: left;
    font-weight: bold;
    position: relative;
    left: -5px;
    text-transform: capitalize;
}

.ds_coc_6e .coc_character_image
{
    width: 12em;
    height: 12em;
    border-width: 1px;
    border-style: solid;
    border-color: Black;
    padding: 2px 2px 2px 2px;
    display: block;
    float: left;
    text-align: center;
    overflow: hidden;
}

.ds_coc_6e .avatar_image
{
    width: auto;
    height: auto;
}

/****************************
* Weapons
*****************************/
.ds_coc_6e .coc_weapons_item 
{
    clear: left;
}

.ds_coc_6e .weapons_header
{
    font-style: italic;
}

.ds_coc_6e .weapons_check
{
    float: left;
    clear: left;
    width: 25px;
}

.ds_coc_6e .weapons_name
{
    float: left;
    width: 180px;
}

.ds_coc_6e .weapons_percent
{
    float: left;
    width: 50px;
}

.ds_coc_6e .weapons_damage
{
    float: left;
    width: 150px;
}

.ds_coc_6e .weapons_malfunction
{
    float: left;
    width: 40px;
}

.ds_coc_6e .weapons_hands
{
    float: left;
    width: 30px;
}

.ds_coc_6e .weapons_range
{
    float: left;
    width: 100px;
}

.ds_coc_6e .weapons_num_attack
{
    float: left;
    width: 30px;
}

.ds_coc_6e .weapons_shots
{
    float: left;
    width: 40px;
}

.ds_coc_6e .weapons_hitpoints
{
    float: left;
    width: 30px;
}

/****************************
* Personal Data
*****************************/
.ds_coc_6e .personal_data .coc_title
{
    float: left;
    margin-right: 6px;
}

.ds_coc_6e .personal_data .dsf
{
    float: left;
    min-width: 300px;
}

/****************************
* Income and Savings
*****************************/
.ds_coc_6e .income_savings .coc_title
{
    float: left;
    margin-right: 6px;
}

.ds_coc_6e .income_savings .dsf
{
    float: left;
    min-width: 40%;
}

/****************************
* Adventuring Gear and Possessions
*****************************/
.ds_coc_6e .adventuring_gear_possessions .dsf
{
    float: left;
    min-width: 90%;
}

/****************************
* Mythos Tomes Read
*****************************/
.ds_coc_6e .mythos_tomes_read .dsf
{
    float: left;
    min-width: 90%;
}

/****************************
* Artifacts and Spells
*****************************/
.ds_coc_6e .artifacts_spells div
{
    float: left;
    width: 50%;
}

.ds_coc_6e .artifacts_spells_subheader
{
    float: left;
    font-weight: bold;
    margin-right: 6px;
}

.ds_coc_6e .artifacts_spells .dsf
{
    float: left;
    min-width: 50%;
}

/****************************
* Monster History
*****************************/
.ds_coc_6e .monster_history .dsf
{
    float: left;
    min-width: 90%;
}

Javascript

/*
* This is the javascript specific to the coc_6e DST
*/

var coc_6e_default_values = {
    "year": "1920",

    "cthulhu_sanity": "99",

    "skill_accounting": "10",
    "skill_anthropology": "1",
    "skill_archaeology": "1",
    "skill_astronomy": "1",
    "skill_bargain": "5",
    "skill_biology": "1",
    "skill_chemistry": "1",
    "skill_climb": "40",
    "skill_computer_use": "1",
    "skill_conceal": "15",
    "skill_credit_rating": "15",
    "skill_cthulhu_mythos": "0",
    "skill_disguise": "1",
    "skill_drive_auto": "20",
    "skill_drive_carriage": "20",
    "skill_electronic_repair": "10",
    "skill_electronics": "1",
    "skill_fast_talk": "5",
    "skill_first_aid": "30",
    "skill_geology": "1",
    "skill_hide": "10",
    "skill_history": "20",
    "skill_jump": "25",
    "skill_law": "5",
    "skill_library_use": "25",
    "skill_listen": "25",
    "skill_locksmith": "1",
    "skill_martial_arts": "1",
    "skill_mechanical_repair": "20",
    "skill_medicine": "5",
    "skill_natural_history": "10",
    "skill_navigate": "10",
    "skill_occult": "5",
    "skill_operate_heavy_machinery": "1",
    "skill_persuade": "15",
    "skill_pharmacy": "1",
    "skill_photography": "10",
    "skill_physics": "1",
    "skill_pilot_balloon": "1",
    "skill_pilot_boat": "1",
    "skill_psychoanalysis": "1",
    "skill_psychology": "5",
    "skill_ride" : "1",
    "skill_sneak": "10",
    "skill_spot_hidden": "25",
    "skill_swim": "25",
    "skill_throw": "25",
    "skill_track": "10",
    "skill_handgun": "20",
    "skill_machine_gun": "15",
    "skill_rifle": "25",
    "skill_shotgun": "30",
    "skill_smg": "15",

    "weapon1_name": "Fist",
    "weapon1_percent": "50",
    "weapon1_damage": "1D3+db",
    "weapon1_malfunction": "n/a",
    "weapon1_hands": "1",
    "weapon1_range": "touch",
    "weapon1_num_attack": "1",
    "weapon1_shots": "n/a",
    "weapon1_hitpoints": "n/a",

    "weapon2_name": "Grapple",
    "weapon2_percent": "25",
    "weapon2_damage": "special",
    "weapon2_malfunction": "n/a",
    "weapon2_hands": "2",
    "weapon2_range": "touch",
    "weapon2_num_attack": "1",
    "weapon2_shots": "n/a",
    "weapon2_hitpoints": "n/a",

    "weapon3_name": "Head",
    "weapon3_percent": "10",
    "weapon3_damage": "1D4+db",
    "weapon3_malfunction": "n/a",
    "weapon3_hands": "0",
    "weapon3_range": "touch",
    "weapon3_num_attack": "1",
    "weapon3_shots": "n/a",
    "weapon3_hitpoints": "n/a",

    "weapon4_name": "Kick",
    "weapon4_percent": "25",
    "weapon4_damage": "1D6+db",
    "weapon4_malfunction": "n/a",
    "weapon4_hands": "0",
    "weapon4_range": "touch",
    "weapon4_num_attack": "1",
    "weapon4_shots": "n/a",
    "weapon4_hitpoints": "n/a",

};

// Make sure that the sidebar is the same height as the main
// page split. This has to be done once all of the values are filled
// in to the page. So, doing this on the Post Load event is just a
// little bit too soon.
jQuery(document).ready(coc_6e_resizeSidebar);

function coc_6e_dataPreLoad(options) {

    aisleten.characters.jeditablePlaceholder = "__";

    // Called just before the data is loaded.
    var tempData = {};
    for (var val in coc_6e_default_values)
    {
        tempData[val] = coc_6e_default_values[val];
    }
    for (var val in dynamic_sheet_attrs)
    {
        tempData[val] = dynamic_sheet_attrs[val];
    }

    dynamic_sheet_attrs = tempData;
}

function coc_6e_dataPostLoad(options) {
    var year = jQuery('.dsf_year').html();
    var yearSelect = jQuery('.coc_year_select')[0];

    if (year == '1890') {
        yearSelect.selectedIndex = 0;
    } else if (year == 'present') {
        yearSelect.selectedIndex = 2;
    } else {
        yearSelect.selectedIndex = 1;
    }

    coc_6e_showCorrectSkillPage(year);

    // Modify the image attributes so that it is scaled to fit inside
    // the pre-allocated space on the character sheet
    var avatarImgActual = '.avatar_image';
    var avatarImg = jQuery(avatarImgActual);
    var width = avatarImg.width();
    var height = avatarImg.height();
    if (width > height) {
        jQuery(avatarImgActual).css("width", "100%");
    } else {
        jQuery(avatarImgActual).css("height", "100%");
    }
}

function coc_6e_dataChange(options) {

    var field = options['fieldName'];
    var val = options['fieldValue'];

    if (field.indexOf("skill") != -1) {
        if (field == 'skill_cthulhu_mythos') {
            coc_6e_updateCthulhuMythos(val);
        }
    } else {
        if (field == 'str') {
            coc_6e_updateStrength(val);
        } else if (field == 'dex') {
            coc_6e_updateDexterity(val);
        } else if (field == 'int') {
            coc_6e_updateIntelligence(val);
        } else if (field == 'con') {
            coc_6e_updateConstitution(val);
        } else if (field == 'pow') {
            coc_6e_updatePower(val);
        } else if (field == 'siz') {
            coc_6e_updateSize();
        } else if (field == 'edu') {
            coc_6e_updateEducation(val);
        }
    }

    coc_6e_resizeSidebar();
}

function coc_6e_dataPreSave(options) {
    // Called just before the data is saved to the server.
}

function coc_6e_updateStrength(strength) {
    coc_6e_calculateDamageBonus();
}

function coc_6e_updateDexterity(dexterity) {
    var score = parseInt(dexterity);
    if (isNaN(score)) score == 0;

    var dodge = parseInt(jQuery('.dsf_skill_dodge').html());
    if (isNaN(dodge) || dodge == 0) {
        dodge = score * 2;
        jQuery('.dsf_skill_dodge').html(dodge);
    }
}

function coc_6e_updateSize(size) {
    coc_6e_calculateDamageBonus();
    coc_6e_calculateHP();
}

function coc_6e_updateCthulhuMythos(cthulhuMythosValue) {
    var score = parseInt(cthulhuMythosValue);
    if (isNaN(score)) score = 0;

    var cthulhuSanity = 99 - score;
    jQuery('.dsf_cthulhu_sanity').html(cthulhuSanity);

    coc_6e_calculateMaximumSanity();
}

function coc_6e_updateIntelligence(intelligence) {
    var score = parseInt(intelligence);
    if (isNaN(score)) score = 0;

    var idea = Math.min(score * 5, 99);
    jQuery('.dsf_idea').html(idea);
}

function coc_6e_updatePower(power) {
    var score = parseInt(power);
    if (isNaN(score)) score = 0;

    var luck = Math.min(score * 5, 99);
    jQuery('.dsf_luck').html(luck);

    var san = luck;
    jQuery('.dsf_san').html(san);

    coc_6e_calculateMaximumSanity();
    coc_6e_calculateMaximumMagic();
}

function coc_6e_updateConstitution(constitution) {
    coc_6e_calculateHP();
}

function coc_6e_updateEducation(education) {
    var score = parseInt(education);
    if (isNaN(score)) score = 0;

    var know = Math.min(score * 5, 99);
    jQuery('.dsf_know').html(know);

    var ownLanguage = parseInt(jQuery('.dsf_skill_own_language').html());
    if (isNaN(ownLanguage) || ownLanguage == 0) {
        ownLanguage = know;
        jQuery('.dsf_skill_own_language').html(ownLanguage);
    }
}

function coc_6e_calculateDamageBonus()
{
    var str = parseInt(jQuery('.dsf_str').html());
    var siz = parseInt(jQuery('.dsf_siz').html());

    var dmgBonus = str + siz;
    var bonusText;

    if (isNaN(dmgBonus)) {
        bonusText = '0';
    } else if (dmgBonus <= 12) {
        bonusText = '-1D6';
    } else if (dmgBonus <= 16) {
        bonusText = '-1D4';
    } else if (dmgBonus <= 24) {
        bonusText = '0';
    } else if (dmgBonus <= 32) {
        bonusText = '+1D4';
    } else {
        var total = dmgBonus - 24;
        total /= 16;
        total = Math.floor(total);

        bonusText = '+' + total + 'D6';
    }
    jQuery('.dsf_damage_bonus').html(bonusText);
}

function coc_6e_calculateMaximumSanity() {
    var cthulhuSanity = parseInt(jQuery('.dsf_cthulhu_sanity').html());
    var luck = Math.min(parseInt(jQuery('.dsf_pow').html()) * 5, 99);

    var maxSanity = Math.min(cthulhuSanity, luck);
    if (!isNaN(maxSanity)) {
        jQuery('.dsf_maximum_sanity').html(maxSanity);

        var currentSanity = parseInt(jQuery('.dsf_current_sanity').html());
        if (isNaN(currentSanity)) {
            jQuery('.dsf_current_sanity').html(maxSanity);
        }
    }
}

function coc_6e_calculateMaximumMagic() {
    var score = parseInt(jQuery('.dsf_pow').html());
    
    if (!isNaN(score)) {
        jQuery('.dsf_maximum_magic').html(score);

        var currentMagic = parseInt(jQuery('.dsf_current_magic').html());
        if (isNaN(currentMagic)) {
            jQuery('.dsf_current_magic').html(score);
        }
    }
}

function coc_6e_calculateHP() {
    var con = parseInt(jQuery('.dsf_con').html());
    var siz = parseInt(jQuery('.dsf_siz').html());

    var hp = Math.round((con + siz) / 2);
    if (!isNaN(hp)) {
        jQuery('.dsf_maximum_hitpoints').html(hp);

        var currentHP = parseInt(jQuery('.dsf_current_hitpoints').html());
        if (isNaN(currentHP)) {
            jQuery('.dsf_current_hitpoints').html(hp);
        }
    }
}

function coc_6e_resizeSidebar() {
    var page1split = jQuery('.coc_page1_split');
    var page1splitHeight = page1split.height() + 'px';

    jQuery('.coc_sidebar').css("height", page1splitHeight);
}

function coc_6e_yearChanged(yearSelect) {
    var year = yearSelect.options[yearSelect.selectedIndex].value;
    jQuery('.dsf_year').html(year);

    coc_6e_showCorrectSkillPage(year);
}

function coc_6e_showCorrectSkillPage(year) {
    var skill1890 = '.coc_year_1890';
    var skill1920 = '.coc_year_1920';
    var skillPresent = '.coc_year_present';
    var skillYear = '.coc_year_' + year;

    jQuery(skill1890).addClass('coc_hidden');
    jQuery(skill1920).addClass('coc_hidden');
    jQuery(skillPresent).addClass('coc_hidden');
    jQuery(skillYear).removeClass('coc_hidden');

    var range1_1890 = 30;
    var range1_1920 = 30;
    var range1_present = 28;
    var range2_1890 = 61;
    var range2_1920 = 59;
    var range2_present = 57;

    var range1lt = (year == '1920') ? range1_1920 : (year == 'present') ? range1_present : range1_1890;
    var range2lt = (year == '1920') ? range2_1920 : (year == 'present') ? range2_present : range2_1890;

    var wrapDiv = '<div class="column"></div>';
    var avatarImageDiv = '<div class="coc_character_image">';
    avatarImageDiv += jQuery('.coc_character_image').html();
    avatarImageDiv += '</div>';

    jQuery('.coc_character_image').remove();
    jQuery('.coc_skill_item').unwrap();
    jQuery('.coc_skill_item').slice(0, range1lt).wrapAll(wrapDiv);
    jQuery('.coc_skill_item').slice(range1lt, range2lt).wrapAll(wrapDiv);
    jQuery('.coc_skill_item').slice(range2lt).wrapAll(wrapDiv);
    jQuery('.coc_skill_item').slice(range2lt, range2lt + 1).before(avatarImageDiv);
}

Back

ObsidianPortal

Call of Cthulhu (6th Edition)

Obsidian Portal Around the Web