<!--
Bugfix list

The load character button doesn't seem to work on the first loading of the website. Reloading seems to fix it.
	I can't seem to replicate it relaibly, even by clearing the cache, but Bhoomi had this issue crop up as well.

Pre load background images

Fix the zooming issue with Firefox? One guy in this thread I think has a solution: https://stackoverflow.com/questions/10464038/imitate-browser-zoom-with-javascript

VERY good tutorial advice: https://www.youtube.com/watch?v=-GV814cWiAw

Info icon tooltip hover 

Loading SP inconsistently

add XP

Fix palpatate

Fix the Throw Martial arts move

Pip boxes getting misaligned with skill names with different resolutions

Resource management issues

CRT effect: http://aleclownes.com/2017/02/01/crt-display.html

update spells over cantrip level

add 4th level spells

Pre-emptively fix medicine

Initiative tracker

Mod support with localstorage

Nerf the DPs of ranged weapons a bit

Fix Power damage bonus with melee weapons. Instead of flat for one or two handed, have it scale for heavier / lighter variants of weapons in those categories. (currently, more hits for a given weapon class are favored for power damage bonus, which doesn't make sense)


Put the increase PP button next to where PP is displayed somehow

Chase tracker?

Improve chase mechanics to incorporate more choices

+1 MP ever time a leveled spell is used, up to 5 times per session

Save Characcter reminder

Have a dedicated button for d100 

Explain what stuff does during character creation. Ie. Background = starting stats + skills

https://stackoverflow.com/questions/39805557/dropdown-within-a-dropdown

Fix issues with cultist background stacking too much with mage kit

Too many spells

Make spells more theatore of mind. Ranges in terms of close, medium, far

More utility spells - more general in application 

Show domain affinities in the spell menu, like the old console version

To get more people running this game besides me, we'll need to make things more appealing to potential GM's
	Other systems have more resources, like monsters, items (with costs), and pre-written adventures

The advantage I have is that I can design automated tools to make running the game easier. I did it for
the player side of things, so I ought to be able to do it for the GM's as well.

First: We need a GCS (general cost system). Its nice to have one catalog you can use for most any setting.
You just use the items that exist in your setting and it should roughly work. I'm not sure if this is
entirely feasible, but it should be more doable due to the better balancing in Threadlinkers.

We also need some sort of system to transmit player rolls to the GM. It would also be nice to have it
be able to send chat messages in the same window, just a little touch.

We also need some sort of built in organizational tool, for planning campaigns. You should be able to
type up lore, unique spells, and create timelines, clock tracking. Have it be able to be internally 
cross linked, between articles, and be able to have a visual view of everything connected by lines
maybe. There should also be an encounter planner. Where you can pre-prepare an encounter, and then
hit a button to start up the battle manager. The encounter planner should also be able to generate
combat encounters and terrain for you, for different types of opponents and environments.

A button in said organizational tool should be able to post things to a discord chat


GM buttons in character menu (enable though options)
Add in duplicate button. (opens up another copy of current file)

Read/Write current effects to cookie. Good for transferring lists of debuffs the party has to multiply foes

Update tutorial for slotless spells

see the math

Design Philosophy

Swap Spell muster chance to spirit instead of soft magic

Spell levels to spell classes. Class 1, class 2, class 3, etc


Non magic healing - 3 per day, every after roll a dc 50 pow check. If fail, take damage instead of healing. DC goes up by 10 for every item used after that.

Only have daily casting limit for healers? Since thats why the limit exists after all.

Turn off spell costs for header tags in spell list ( "[", "\")

Add in cannibalism perk
	2 bore rifle
	Rework Slugs
	White Phosphorus, like incidienry, but worse, also toxic


https://stackoverflow.com/questions/6338217/get-a-css-value-with-javascript

Armor tinkering

To apply a healing item mid-battle, there is a DC for each item, Medicine check usually
if the target is unwilling, then add their speed to the DC

Language rules - Intellectual

Follower - Charisma

Upgrade attack files to include the number of hands it takes to use (for Power damage bonus calculations)

Maybe put info about D6 notation, as well as disadvantage or advantage right at the start

Edit backgrounds so that when you choose a background, there are more viable skills, even if they are at the same level (small blade bias issue)

https://codepen.io/bunnypi04/pen/GRJJXvN

Applejack theme
Make stat increase buttons blink

make Hijack Senses Spell, Darkvision Spells

Change Total PP/SP to Physical/Magic level, and spare PP/SP to just PP and SP

Little tracker for number of spells cast due to healing

Button to add shield defense, Dodge/Endure Display will show unshielded and shielded values for the shield selected

Authors notes tab for spells

Certify Wealth System as a core rule?
-->
<html id="HTML" class="crt">

<!--<div class="crt" id="CRTmask"></div>-->

<link rel="icon" type="image/x-icon" href="Trial 1 a2.png">

<script>
	// Some stuff for dealing with CSS variables
	var rootElem = document.querySelector(':root');

	function getCSSvariable(variableName) 
	{
  		var rs = getComputedStyle(rootElem);
  		return rs.getPropertyValue('--' + variableName);
	}

	function setCSSvariable(variableName, newValue) 
	{
  		rootElem.style.setProperty('--' + variableName, newValue);
	}
</script>

<head>
	<meta charset="utf-8">
	<title id="tabTitle">Spells and Streetlights</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<link rel="stylesheet" type="text/css" href="style2.css">
	<link rel="preload" as="image" href="Down_Arrow.png">
	<script type="text/javascript" src = "jquery-3.6.1.js"></script>
	<script type="text/javascript" src = "jQueryUI_v1_10_4.js"></script> <!-- junk I suppose -->
</head>

<body class="back-row-toggle splat-toggle">

<div class="rain front-row"></div>
<div class="rain back-row"></div>

<!--<button onclick="stopRain()">Stop Rain</button>-->


<div id="sidebar1" class="hidden"></div>
<div id="sidebar2" class="hidden"></div>

<div id="mainMenu">
	<img src="Trial 1 a2_4.png" id="mainMenuBackground">
	<br>
	<br>
	<div id="mainMenuOptions">
		<br>
		<div id="title"><header>Spells and Streetlights</header></div>
		<br>
	</div>
	<br>
	<div id="mainMenuButtons">
		
		<!--<button onclick="changeMenu(-2)">New Character</button>-->
		<div onclick="changeMenu(-2)" id="newCharacterButton" class="mainMenuButton">New Character</div>
		<br>	
		<input type="file" id="input" name="input" single class="inputfile">

		<!--https://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/-->
		<label for="input" id="loadCharacterButton" class="mainMenuButton">Upload Character</label><br>
		<!--<div onclick="loadCharacterFromCookieMk2(0)" id="quickLoad" class="mainMenuButton">Quickload Character</div><br>-->
		<div onclick="openQuickloadMenu();" id="quickLoad" class="mainMenuButton">Open Character File</div><br>
		<div onclick="window.open('https://narlax.itch.io/spells-and-streetlights-ttrpg?secret=HeJWY6S3CYhEEQKHkiTAxN3R4');" id="rulebookButton1" class="mainMenuButton">Rulebooks</div><br>
		<div onclick="spellbookMode = true; document.getElementById('topBar_-1').style.display = 'none'; document.getElementById('topBar_-4').style.display = 'none';changeMenu(0)" class="mainMenuButton" id='spellbookButton'>Spellbook</div><br>
		<div id="rulebookButton2" style="display: inline-block;" onclick="window.open('../Creature Catalog V2.pdf');">Creature Catalog</div><br>
		
		<!--<div id="rulebookButton3" style="display: inline-block;" onclick="window.open('../Item Catalog V1.pdf');">Item Catalog</div><br>-->

		<!--<div onclick="window.open('https://docs.google.com/document/d/1WU_FZtCLZ6D1ftr54h4rFOiySswR8z4GeJoIVJfGLyo/edit?usp=sharing');" id="rulebookButton3" class="mainMenuButton">Item Catalogue</div><br>-->
		<!--<div id="rulebookButton2" style="display: inline-block;"><a href="Operations Manual.pdf" download>Operations Manual</a></div>-->
		<!--<div onclick="window.open('https://docs.google.com/document/d/16sEXwG6-4zKd73Mx-TOLi1H-PTS0QJHQ0JKCo277SZ4/edit?usp=sharing');" id="rulebookButton2" class="mainMenuButton">Expanded Mechanics</div>
		<br>-->
		<div id="discordButton" onclick="document.getElementById('discordBox').classList.remove('hidden');" class="mainMenuButton">Join the Discord!</div>
			<br>
		<div onclick="document.getElementById('GMtools').classList.remove('hidden')" class="mainMenuButton" id="GM tools button">GM Tools</div><br>
		 <br> <br>
	</div>
</div>

<div id="skillWrapper" class="hidden">
	<div id="skillBlock">
		<img src="Title Header.png" id="skillTopHeader">
		<div id="skillList"></div>
		<div id="skillAmounts" style="display: none;"></div>
		<div id="skillAmounts2"></div>
		<div id="skillTotals"></div>
		<div id="skillPips"></div>
		<div id="bar1"></div>
    	<div id="bar2"></div>
    </div>
</div>

<div id="characterMenu" class="hidden">
	<br>
	<!--<input type="file" id="input" single>:-->
	<!--<button onclick="updateCharacterNameDisplay()">Test</button><br>-->
	<!--<div id="characterMenuNameDisplay" style="display: inline-block;"></div><br>-->

	<button onclick="saveCharacter(true)" id="diskSaveButton">Download Character</button><br>
	<button onclick="quickSave()" id="quicksaveButton">Save Character</button><div id="saveIndicator" class="hidden">&nbspSaved!</div><br>
	<br>
	<button onclick="document.getElementById('optionsMenu').classList.remove('hidden');" id="optionsButton">Options</button><br>
	<br>
	<!--<button onclick="updatePlayerThemes();alert(playerThemeIndex1 + ' ' + playerThemeIndex2 + ' ' + playerThemedSpells)">TEST</button>-->

	<img src="Question-Mark.jpg" id="characterProfileImage" onerror="this.src = 'Question-Mark.jpg'">
	<br>
	<input type="file" capture id="characterProfileImageInput" name="characterProfileImageInput" class="inputfile">
	<label for="characterProfileImageInput" id="characterPicButton">[Upload Image]</label>
	<br><br>
	

	
	<!--<button onclick="alert(getElementById('TEST_ID').innerHTML)">Alert</button>-->
	<div id="addLevelMenu">
		<button onclick="addLevel(-1)">Sub 1 level</button>
		<button onclick="addLevel(-0.5)">Sub 0.5 levels</button>
		<button onclick="addLevel(0.5)">Add 0.5 levels</button>
		<button onclick="addLevel(1)">Add 1 level</button><br>	
	</div>
	<br>
	<!--<button onclick="displaySimpleSpellList()"> Print Simple Spell List</button>-->
	
	<div style="display: inline-block;" class = 'lowlighted textColor2'>//= Perks =//
		<br>
		<hr id="line2">
	</div>
	<br>
	
	><div class="dropdown"><button class="dropbtn" id="perkSelector3">Dropdown<img src="Down_Arrow.png" class="downArrow"></button>
  		<div class="dropdown-content" id="Char Menu Perk Dropdown"> <!-- if you want to change the img source, there are code references to account for, due to me replacing the innerHTML wholesale-->
  		</div>
	</div>
	<button onclick="addPerk()">Add Perk</button><button onclick="removePerk()">Remove Perk</button>
	<div class="thinSpacer"></div>
	<div id="perkMenu" style = "display: inline-block;">
	</div>
	<br>

	<!--<button onclick="writeStatsToInputs()">Write Stats to Inputs</button><br>
	<button onclick="writeInputsToStats()">Write Inputs to Stats</button><br>-->
	<!--<button onclick="alert(document.cookie)">Display Cookies</button><br>-->
	<!--<button onclick="changeMenu(-2)">New Character</button><br>-->
	<!--<button onclick="alert(startingKit);">Display Starting Kit</button>
	<button onclick="displaySimpleSpellList()">Display Simple Spell List</button>-->
	<!--<button onclick="alert(playerPPspentOnSpells)">Display SP spent</button>-->
	<!--<button onclick="alert(keysPressed)">werwer</button>-->
	<!--<button onclick="alert(getPipBoxHeight())">Pip Box Height</button>-->
	<br><br>


	<div id="topHeader2" class="hidden">
	//= PP =//&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
	Spare PP: <div id="sparePP" style="width: 40px; display: inline-block;"></div>
	Total PP: <div id="totalPP" style="width: 40px; display: inline-block;"></div>
	<br>
	<hr id="line2">
	</div>
	<br>
	<button onclick="modSparePP()">Change Spare PP</button><input type="number" name="modSparePPbox" id="modSparePPbox" style="width: 50px;"> / 
	<button onclick="addPP()">Add Total PP</button><input type="number" name="addPPbox" id="addPPbox" style="width: 50px;"><br>
	<button onclick="openPipMenu()" id="applyPipsButton">Apply Pips</button><br><br>
	<br>
	
	<!--<button id="111" onclick="addSkillTooltip('111','test');">Add Tooltip</button>-->
	<div style="display: none;">
		<div name="files loaded: " id="numLoaded"></div>
		<div id="dataOut">1</div>
		<div id="dataOut2">2</div>
		<div id="color 0">false</div>
		<div id="color 1">false</div>
		<div id="color 2">false</div>
		<div id="color 3">false</div>
		<div id="color 4">false</div>
		<div id="color 5">false</div>
	</div>

	<div style="display: inline-block;" class = 'lowlighted textColor2'>//= Magic =//&nbsp&nbsp&nbsp
		Spare SP: <div id="spareSP" style="width: 40px; display: inline-block;"></div>
		Total SP: <div id="totalSP" style="width: 40px; display: inline-block;"></div>
		<br>
	<hr id="line2">
	</div>
	<br>
	<button onclick="modSpareSP()">Change Spare SP</button><input type="number" name="modSpareSPbox" id="modSpareSPbox" style="width: 50px;"> /
	<button onclick="addSP()">Add Total SP</button><input type="number" name="addSPbox" id="addSPbox" style="width: 50px;">
	<br><br>
	<div id="spellStrainDisplay">Healing Strain: 0%</div> <button onclick="resetSpellStrain()">Reset Healing Strain</button>
	<br>
	<br>

	<div id="characterMenuSpellListing">
		<div id="characterMenuSpellListing_0">
			&nbsp&nbsp<div id="spellTitle_0" class="spellTitle textColor2">// Rank-1 Spells // =========== //</div><br>
			<div id="list_0"></div>
		</div>
		<div id="characterMenuSpellListing_1">
			<br>&nbsp&nbsp<div id="spellTitle_1" class="spellTitle textColor2">// Rank-2 Spells // =========== //<br></div> <!--<button id="muster_1" onclick="musterRoll(spellMusterSuccessChance[1],1)">Muster Rank-2 Power: 80%</button>-->
			<!--
				<div> slots: <input type="text" id="slot_1" class="spellSlotCounter" style="display: none"><div id = "spellSlots_1" class="spellTitle">/1</div style="display: none;"></div style="display: none">
			<div id="list_1"></div>
		</div>
		<div id="characterMenuSpellListing_2">
			<br><div id="spellTitle_2" class="spellTitle">// 2nd Level Spells // slots: <input type="text" id="slot_2" class="spellSlotCounter"><div id = "spellSlots_2" class="spellTitle">/1</div></div><br>
			<div id="list_2"></div>
		</div>
		<div id="characterMenuSpellListing_3">
			<br><div id="spellTitle_3" class="spellTitle">// 3rd Level Spells // slots: <input type="text" id="slot_3" class="spellSlotCounter"><div id = "spellSlots_3" class="spellTitle">/1</div></div><br>
			<div id="list_3"></div>
		</div>
	-->
				<div><input type="text" id="slot_1" class="spellSlotCounter textColor2" style="display: none"><div id = "spellSlots_1" class="spellTitle"></div style="display: none;"></div style="display: none">
			<div id="list_1"></div>
		</div>
		<div id="characterMenuSpellListing_2">
			<br>&nbsp&nbsp<div id="spellTitle_2" class="spellTitle textColor2">// Rank-3 Spells // =========== //</div> <!--<button id="muster_2" onclick="musterRoll(spellMusterSuccessChance[2],2)">Muster Rank-3 Power: 80%</button>-->
			<div>
				<input type="text" id="slot_2" class="spellSlotCounter" style="display: none"><div id = "spellSlots_2" class="spellTitle"></div style="display: none"></div style="display: none">
			<div id="list_2"></div>
		</div>
		<div id="characterMenuSpellListing_3">
			<br>&nbsp&nbsp<div id="spellTitle_3" class="spellTitle textColor2">// Rank-4 Spells // =========== //</div><!-- <button id="muster_3" onclick="musterRoll(spellMusterSuccessChance[3],3)">Muster Rank-4 Power: 80%</button>-->
			<div><input type="text" id="slot_3" class="spellSlotCounter" style="display: none"><div id = "spellSlots_3" class="spellTitle"></div></div>
			<div id="list_3"></div>
		</div>
		
		<div id="characterMenuSpellListing_4">
			<br>&nbsp&nbsp<div id="spellTitle_4" class="spellTitle textColor2">// Rank-5 Spells // =========== //</div>
			<div><input type="text" id="slot_4" class="spellSlotCounter" style="display: none"><div id = "spellSlots_4" class="spellTitle"></div></div>
			<div id="list_4"></div>
		</div>

		<div id="characterMenuSpellListing_4"></div>
		<div id="characterMenuSpellListing_5"></div>
		<div id="characterMenuSpellListing_6"></div>
		<div id="characterMenuSpellListing_7"></div>
		<div id="characterMenuSpellListing_8"></div>
		<div id="characterMenuSpellListing_9"></div>
	</div><br><br>
    

	<div id="stats">
		<div class = "statDisplay">&nbsp&nbsp&nbsp&nbsp&nbsp Health : </div><input type="text" class="statDisplay" id="spareHealth"><div id="health" class="statDisplay"></div><br><br>
		<div class = "statDisplay"><div id="stat 0" style="display: inline-block;"></div><input type="number" id="statInput 0" class="statInput"></div><div id="statMenu 0" class = "statMenuDisplay"></div><br>
		<div class = "statDisplay"><div id="stat 1" style="display: inline-block;"></div><input type="number" id="statInput 1" class="statInput"></div> <div id="statMenu 1" class = "statMenuDisplay"></div><br>
		<div class = "statDisplay"><div id="stat 2" style="display: inline-block;"></div><input type="number" id="statInput 2" class="statInput"></div> <div id="statMenu 2" class = "statMenuDisplay"></div><br>
		<div class = "statDisplay"><div id="stat 3" style="display: inline-block;"></div><input type="number" id="statInput 3" class="statInput"></div> <div id="statMenu 3" class = "statMenuDisplay"></div><br>
		<div class = "statDisplay"><div id="stat 4" style="display: inline-block;"></div><input type="number" id="statInput 4" class="statInput"></div> <div id="statMenu 4" class = "statMenuDisplay"></div><br>
		<div class = "statDisplay"><div id="stat 5" style="display: inline-block;"></div><input type="number" id="statInput 5" class="statInput"></div> <div id="statMenu 5" class = "statMenuDisplay"></div><br>
		<div class = "statDisplay"><div id="stat 6" style="display: inline-block;"></div><input type="number" id="statInput 6" class="statInput"></div> <div id="statMenu 6" class = "statMenuDisplay"></div><br>

		<br>
		<div id="endureDC" class="statDisplay">&nbsp&nbsp Endure DC : 60</div><br>
		<div id="dodgeDC" class="statDisplay">&nbsp&nbsp&nbsp Dodge DC : 70</div>
		<div id="statDivider" class="statDisplay"></div>
	</div>
	<div id="rollResults">
		<div id="roll title 5" class = "RollResultsMenu"></div>
		<br>
		<div id="roll result 5" class = "RollResultsMenu"></div>
		<br>
		<br>
		<div id="roll title 4" class = "RollResultsMenu"></div>
		<br>
		<div id="roll result 4" class = "RollResultsMenu"></div>
		<br>
		<br>
		<div id="roll title 3" class = "RollResultsMenu"></div>
		<br>
		<div id="roll result 3" class = "RollResultsMenu"></div>
		<br>
		<br>
		<div id="roll title 2" class = "RollResultsMenu"></div>
		<br>
		<div id="roll result 2" class = "RollResultsMenu"></div>
		<br>
		<br>
		<div id="roll title 1" class = "RollResultsMenu"></div>
		<br>
		<div id="roll result 1" class = "RollResultsMenu"></div>
		<br>
		<br>
		<div id="roll title 0" class = "RollResultsMenu"></div>
		<br>
		<div id="roll result 0" class = "RollResultsMenu"></div>
		<br>
		<br>
		<div id="diceButtonBox">&nbsp<button onclick="diceRoll(4)">d4</button><button onclick="diceRoll(6)">d6</button><button onclick="diceRoll(8)">d8</button><button onclick="diceRoll(10)">d10</button><button onclick="diceRoll(100)">d100</button> <button onclick="shiftRollHistory(); updateRollDisplay(); NLflag = true;">New</button><br></div>
	</div>

	<!--<div id="attackMenu_0" class="attackMenu">
		<label for="attackName_0">Name:&nbsp</label>
		<input name="attackName_0" type="text" id="attackName_0" value="Attack Name"><div id = "loadIndicator_0" style='display:inline-block;'>// Invalid Selection</div><br>
		<label for="attackSkillSelector_0">Skill: </label>
		<select id="attackSkillSelector_0" name="attackSkillSelector_0">
			<optgroup label="test">
				<option value = "1">1</option>
			</optgroup>
		</select><br>
		<button>1</button>
	</div> -->

	<div style="display: inline-block;" class = 'lowlighted textColor2'>//= Armor & Non-Magic Attacks =// ~~~~~~~~~~~ +<hr class="line2"></div><br><br>
	&nbsp&nbsp&nbsp&nbspArmor <input type="number" id="armorInput" value="0"><br><br>


	<div id="attackMenu_0_box" class="attackMenuBox textColor2">
	<div id="attackMenu_0" class="attackMenu">
		&nbspAttack: <select id="attackSkillSelect_0"></select> <div id="attackWeaponSelect_0" style ="display: inline-block;"></div><br>
		&nbsp<div id="parryDC_0" class="parryBox">Counter DC: 25</div><br>
		&nbspStrike Attempts: <div id="strikeAttempts_0" style ="display: inline-block;"></div><br>
		<!--<button id="strikeAttempt_0_0">1</button><button id="strikeAttempt_0_1">2</button><br>-->
		&nbspHits: &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <div id="strikeHits_0" style ="display: inline-block;"></div><br>&nbspNotes: <input type="text" class="attackNotes" id="attackNotes_0">
		<!-- <button id="strikeHit_0_0">1</button><button id="strikeHit_0_1">2</button> -->
	</div>
	</div>
	<div id="attackSpace_0"><br></div>

	<div id="attackMenu_1_box" class="attackMenuBox2 textColor2">
	<div id="attackMenu_1" class="attackMenu">
		&nbspAttack: <select id="attackSkillSelect_1"></select> <div id="attackWeaponSelect_1" style ="display: inline-block;"></div><br>
		&nbsp<div id="parryDC_1" class="parryBox">Counter DC: 25</div><br>
		&nbspStrike Attempts: <div id="strikeAttempts_1" style ="display: inline-block;"></div><br>
		<!--<button id="strikeAttempt_0_0">1</button><button id="strikeAttempt_0_1">2</button><br>-->
		&nbspHits: &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <div id="strikeHits_1" style ="display: inline-block;"></div><br>&nbspNotes: <input type="text" class="attackNotes" id="attackNotes_1">
		<!-- <button id="strikeHit_0_0">1</button><button id="strikeHit_0_1">2</button> -->
	</div>
	</div>
	<div id="attackSpace_1"><br></div>

	<div id="attackMenu_2_box" class="attackMenuBox textColor2">
	<div id="attackMenu_2" class="attackMenu">
		&nbspAttack: <select id="attackSkillSelect_2"></select> <div id="attackWeaponSelect_2" style ="display: inline-block;"></div><br>
		&nbsp<div id="parryDC_2" class="parryBox">Counter DC: 25</div><br>
		&nbspStrike Attempts: <div id="strikeAttempts_2" style ="display: inline-block;"></div><br>
		<!--<button id="strikeAttempt_0_0">1</button><button id="strikeAttempt_0_1">2</button><br>-->
		&nbspHits: &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <div id="strikeHits_2" style ="display: inline-block;"></div><br>&nbspNotes: <input type="text" class="attackNotes" id="attackNotes_2">
		<!-- <button id="strikeHit_0_0">1</button><button id="strikeHit_0_1">2</button> -->
	</div>
	</div>
	<div id="attackSpace_2"><br></div>

	<div id="attackMenu_3_box" class="attackMenuBox2 textColor2">
	<div id="attackMenu_3" class="attackMenu">
		&nbspAttack: <select id="attackSkillSelect_3"></select> <div id="attackWeaponSelect_3" style ="display: inline-block;"></div><br>
		&nbsp<div id="parryDC_3" class="parryBox">Counter DC: 25</div><br>
		&nbspStrike Attempts: <div id="strikeAttempts_3" style ="display: inline-block;"></div><br>
		<!--<button id="strikeAttempt_0_0">1</button><button id="strikeAttempt_0_1">2</button><br>-->
		&nbspHits: &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <div id="strikeHits_3" style ="display: inline-block;"></div><br>&nbspNotes: <input type="text" class="attackNotes" id="attackNotes_3">
		<!-- <button id="strikeHit_0_0">1</button><button id="strikeHit_0_1">2</button> -->
	</div>
	</div>
	<div id="attackSpace_3"><br></div>

	<div id="attackMenu_4_box" class="attackMenuBox textColor2">
	<div id="attackMenu_4" class="attackMenu">
		&nbspAttack: <select id="attackSkillSelect_4"></select> <div id="attackWeaponSelect_4" style ="display: inline-block;"></div><br>
		&nbsp<div id="parryDC_4" class="parryBox">Counter DC: 25</div><br>
		&nbspStrike Attempts: <div id="strikeAttempts_4" style ="display: inline-block;"></div><br>
		<!--<button id="strikeAttempt_0_0">1</button><button id="strikeAttempt_0_1">2</button><br>-->
		&nbspHits: &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <div id="strikeHits_4" style ="display: inline-block;"></div><br>&nbspNotes: <input type="text" class="attackNotes" id="attackNotes_4">
		<!-- <button id="strikeHit_0_0">1</button><button id="strikeHit_0_1">2</button> -->
	</div>
	</div>
	<div id="attackSpace_4"><br></div>

	<div id="attackMenu_5_box" class="attackMenuBox2 textColor2">
	<div id="attackMenu_5" class="attackMenu">
		&nbspAttack: <select id="attackSkillSelect_5"></select> <div id="attackWeaponSelect_5" style ="display: inline-block;"></div><br>
		&nbsp<div id="parryDC_5" class="parryBox">Counter DC: 25</div><br>
		&nbspStrike Attempts: <div id="strikeAttempts_5" style ="display: inline-block;"></div><br>
		<!--<button id="strikeAttempt_0_0">1</button><button id="strikeAttempt_0_1">2</button><br>-->
		&nbspHits: &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <div id="strikeHits_5" style ="display: inline-block;"></div><br>&nbspNotes: <input type="text" class="attackNotes" id="attackNotes_5">
		<!-- <button id="strikeHit_0_0">1</button><button id="strikeHit_0_1">2</button> -->
	</div>
	</div>
	<div id="attackSpace_5"><br></div>
	
	<div id="attackMenu_6_box" class="attackMenuBox textColor2">
	<div id="attackMenu_6" class="attackMenu">
		&nbspAttack: <select id="attackSkillSelect_6"></select> <div id="attackWeaponSelect_6" style ="display: inline-block;"></div><br>
		&nbsp<div id="parryDC_6" class="parryBox">Counter DC: 25</div><br>
		&nbspStrike Attempts: <div id="strikeAttempts_6" style ="display: inline-block;"></div><br>
		<!--<button id="strikeAttempt_0_0">1</button><button id="strikeAttempt_0_1">2</button><br>-->
		&nbspHits: &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <div id="strikeHits_6" style ="display: inline-block;"></div><br>&nbspNotes: <input type="text" class="attackNotes" id="attackNotes_6">
		<!-- <button id="strikeHit_0_0">1</button><button id="strikeHit_0_1">2</button> -->
	</div>
	</div>
	<div id="attackSpace_6"><br></div>

	<div id="attackMenu_7_box" class="attackMenuBox2 textColor2">
	<div id="attackMenu_7" class="attackMenu">
		&nbspAttack: <select id="attackSkillSelect_7"></select> <div id="attackWeaponSelect_7" style ="display: inline-block;"></div><br>
		&nbsp<div id="parryDC_7" class="parryBox">Counter DC: 25</div><br>
		&nbspStrike Attempts: <div id="strikeAttempts_7" style ="display: inline-block;"></div><br>
		<!--<button id="strikeAttempt_0_0">1</button><button id="strikeAttempt_0_1">2</button><br>-->
		&nbspHits: &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <div id="strikeHits_7" style ="display: inline-block;"></div><br>&nbspNotes: <input type="text" class="attackNotes" id="attackNotes_7">
		<!-- <button id="strikeHit_0_0">1</button><button id="strikeHit_0_1">2</button> -->
	</div>
	</div>
	<div id="attackSpace_7"><br></div>
	
	<button onclick="decreaseAttacksShown()">Remove Attack</button>
    <button onclick="increaseAttacksShown()" id="Add_Attack_Button">Add Attack</button>
	<div id="test"></div>
</div>

<div id="newCharacterMenu" class="hidden">

	<div id="newCharacterMenuBackgroundBit">
		<h1 class="centerText">Background</h1><br>
		<img src = "../Background Pictures/Academic.jpg" id="backgroundPic">
		<select class="creationSelector" id="backgroundSelector"></select><br>
		<div id="backgroundFlavortext"></div>
		<br>
		<hr class="divLine">
	</div>

<div id="leftSidebar_characterCreation"></div>
<div id="rightSidebar_characterCreation"></div>


<h1 class="centerText">Magic Domains</h1><br>
<div class="centerText">Select two domains your character has an affinity for. Spells in these domains will be easier to learn</div><br>
<select class="creationSelector" id="colorSelector1">
	<option value="0">White</option>
	<option value="1">Black</option>
	<option value="2">Blue</option>
	<option value="3">Green</option>
	<option value="4">Red</option>
	<option value="5">Brown</option>
</select>
<!--<div id="colorFlavortext1" class="centerBox"></div>-->
<div id="colorFlavortext1" class="centerText"></div>
<br>

<select class="creationSelector" id="colorSelector2">
	<option value="0">White</option>
	<option value="1">Black</option>
	<option value="2">Blue</option>
	<option value="3">Green</option>
	<option value="4">Red</option>
	<option value="5">Brown</option>
</select>
<!--<div id="colorFlavortext2" class="centerBox"></div>-->
<div id="colorFlavortext2" class="centerText"></div>
<br>
<hr class="divLine">

<h1 class="centerText">Starting Kit</h1><br>
<select class="creationSelector" id="archetypeSelector">
	<option value="0">0001</option>
	<option value="1">0002</option>
	<option value="2">0003</option>
	<option value="3">0004</option>
</select>

<div id="archetypeFlavortext" class="centerBox"></div>

<br>

<hr class="divLine">

<h1 class="centerText">Perk(s)</h1>
<div class="centerText">Select a Perk, additional Theme, or Rank-1 Innate Spell.<br>You cannot take multiple copies of a perk unless otherwise noted.</div><br>
<select id="perkSelector1" class = "creationSelector"></select>
<div id="perkDescriptor1" class="centerBox"></div>
<br>
<select id="perkSelector2" class = "creationSelector"></select>
<div id="perkDescriptor2" class="centerBox"></div>
<br>
<hr class="divLine">
<h1 class = "centerText">Save File Name</h1>
<br>
<input type="text" name="characterNameInput" id="characterNameInput" class="creationSelector"></input>
	<!--<button onclick="location.reload()" class="creationSelector">Return to Main Menu</button>-->
	<button onclick="changeMenu(-9);" class="creationSelector">Back</button>

	<button class="creationSelector" id="createCharacterButton" onclick="createCharacter(false)">Create Character</button>

<br>
</div>

<div id="spellMenuLeft" class="hidden">
	<br>
	<div style="display: inline-block;" id="spellNameListing"></div>
	<div style="display: inline-block;" id="themeIndicator"></div>
	<div style="display: inline-block;" id="spellCostDisplay"></div>
	<div style="display: inline-block;" id="spellLearningProgression"></div>
</div>
<div id="spellDetailBox" class="hidden">
	<div id="tablet_learnSpellButtonBox">
		<button style="font-size: 20px;" onclick="tabletLearnSpell()" id="tablet_learnSpellButton">Learn Spell</button>
		<button style="font-size: 20px;" onclick="castSpell(spellNameCastCache, successChanceCastCache, levelCastCache); closeSpellDetailBox()" id="tablet_castSpellButton">Cast Spell</button>
		<button style="font-size: 20px;" onclick="closeSpellDetailBox()" id="tablet_closePanelButton">Close Panel</button>
	</div>
	<div style="display: inline-block; top: 0px; position: relative;" id="spellDetailDisplay">	
	</div>
</div>

<div id="topHeader" class="hidden" class="hidden">
	<div style="display: inline-block;" id="topBar_-1"onclick="changeMenu(-1);">Character</div> / 
	<div style="display: inline-block;" id="topBar_-4" onclick="changeMenu(-4);">Notes  </div> // Magic >>
	<div style="display: inline-block;" id="topBar_0" onclick="changeMenu(0);">Rank-1 </div>
	<div style="display: inline-block;" id="topBar_1" onclick="changeMenu(1);"> Rank-2 </div>
	<div style="display: inline-block;" id="topBar_2" onclick="changeMenu(2);"> Rank-3 </div>
	<div style="display: inline-block;" id="topBar_3" onclick="changeMenu(3);"> Rank-4 </div>
	<div style="display: inline-block;" id="topBar_4" onclick="changeMenu(4);"> Rank-5 </div>
	<br>
	<hr id="line1">
</div>

<div id="topHeader3" class="hidden">
	Spare SP: <div id="spareSP2" style="width: 40px; display: inline-block;"></div>
	Total SP: <div id="totalSP2" style="width: 40px; display: inline-block;"></div>
	<br>
	<hr id="line2">
</div>

<div id="spellSliderBox" class="hidden">
	<div id="spellLearnName">&nbsp</div><br>
	<img src="Pictures/X button.png" class="xButton" id="xButton1" onclick='document.getElementById("spellSliderBox").classList.add("hidden");
	spellMenuUiActive = true;'>
	
	<!--<input type="number" name="learnPoints" id="learnPoints">-->

	<div id="sliderBox">
		<input type="range" min="1" max="100" value="50" class="slider" id="spellSlider">
		<div id="spellLearnSelectedPoints">&nbsp</div>
		<div id="spellLearnSelectedPercentage">&nbsp</div>
		<!--<div id="spellLearnSelectedPercentage">Test</div>-->
	</div> <br> <br> <br>
	<div id="buttonBox">
		<button onclick="purchaseSpell()" id="confirmSpellBuy">Confirm</button>
		<button onclick='document.getElementById("spellSliderBox").classList.add("hidden");
    	spellMenuUiActive = true;' id="cancelSpellBuy">Cancel</button>
    </div>
</div>

<div id="noteBoxes" class="hidden">
	<br>
	<br>
	<textarea id="noteBox1" name="noteBox1" rows="35" cols="75">
Inventory
=========
	> Item 1
	> Item 2
	> Item 3
	</textarea>
	<textarea id="noteBox2" name="noteBox2" rows="35" cols="75">
Character Details
=================
Themes
	> Theme 1
		> Explanation

	>Theme 2
		> Explanation

Goals and Objectives
	> Goal 1
	> Goal 2
	> Goal 3

Flaws
	> Flaw 1
	> Flaw 2
	> Flaw 3

Other Traits
	> Trait 1
	> Trait 2
	> Trait 3

Backstory
	> Event 1
	> Event 2
	> Event 3

	</textarea>
</div>

<div id="optionsMenu" class="hidden">
	<br>
	<h1 class="centerText">Options</h1>
	<br>
	<div style="position: relative; left: 100px;"><input type="checkbox" id="CRToverlay">
	<label for="CRToverlay">CRT overlay</label></div>
	&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<button onclick="startTour(1); document.getElementById('optionsMenu').classList.add('hidden');">Start Tour</button><br>
	&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<button onclick="startTour(7); document.getElementById('optionsMenu').classList.add('hidden');">Skills</button><br>
	&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<button onclick="startTour(13); document.getElementById('optionsMenu').classList.add('hidden');">Stats</button><br>
	&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<button onclick="startTour(22); document.getElementById('optionsMenu').classList.add('hidden');">Combat</button><br>
	&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<button onclick="startTour(37); document.getElementById('optionsMenu').classList.add('hidden');">Getting Stronger</button><br>
	&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<button onclick="startTour(51); document.getElementById('optionsMenu').classList.add('hidden');">Getting Magic</button><br>
	&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<button onclick="startTour(69); document.getElementById('optionsMenu').classList.add('hidden');">Using Magic</button><br>
	<br>
	<div style="position: relative; left: 100px;">
		Style <select id="styleSelector">
			<option value="Greens">Greens</option>
			<option value="Dark">Dark</option>
			<option value="Applejack">Applejack</option>
			<option value="Amber">Amber</option>
		</select>
	</div>
		<div style="position: relative; left: 100px;">
		<input type="checkbox" id="keeperModeToggle"><label for="keeperModeToggle">GM Mode</label>
	</div>
	<div style="position: relative; left: 100px;">
		<input type="checkbox" id="tabletModeToggle"><label for="tabletModeToggle">Tablet Mode</label>
	</div>
	<br>
	<br>
	<button onclick="document.getElementById('optionsMenu').classList.add('hidden');" class="creationSelector">Close</button>
	<br>
	
</div>

<div id="pipMenu" class="hidden">
	<img src="Pictures/X button.png" class="xButton" id="xButton2" onclick='closePipMenu()'>
	<br>
	<div id="boostingMenuTitle">Boosting Pips</div>
	<br>
	<div id="pipMenuPPdisplay">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp Spare PP: 0</div><br>
	<div id="pipMenuCenterBox">
		<div id="pipMenuDetails">You have no pips! :(</div>
		<div id="freePips"><input type ='checkbox' id='freePip1' name="freePip1" onclick='updatePipMenu()'><label for='freePips' id="freePip1Label"><select id='freePipSelector1' onchange="updatePipMenu();"></select><div id="freePip1LabelText"></div></label></div>
	</div>
	<div id="pipMenuDetailsSpacer"></div>
	<br>
	<br><br><br>
	&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
	<button onclick="applyPips()">Confirm</button><button onclick="closePipMenu()">Close</button> &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<button onclick="alert(boostHelpMessage)">Help</button> <br>&nbsp
</div>

<div id="tooltipBox" style="padding: 2px;">Test</div>
<div id="tooltipBox2" style="padding: 2px;" class="hidden">Test</div>


<div id="improvedNewCharacterMenu1" class="hidden">
	<div id="backgroundImageMatrix">	
	</div>

	<div id="backgroundInfoWrapper">
	<div id="backgroundInfoBox">
		<br>
		<h2 id="backgroundNameBox" style="text-align: center;">Academic</h2>
		<hr class="divLine2">
		<div id="backgroundFlavortextBox">Test</div>

		<div id="characterCreationButton1">
			<button id="characterCreationButton2" onclick="location.reload();">Back</button>
			<button onclick="randomizeCharacterMatrix();">Randomize</button>
			<button onclick="changeMenu(-8);">Next</button>
		</div>
	</div>
	</div>
	<button id="showSkillsButton" onclick="createCharacter(true); toggleShowSkills();">Show Skills</button>

	<div id="instructions1">// Select a Background // Your background determines your starting skills and stats (what you're good at) //</div>
</div>

<div id="discordBox" class="hidden">
	<br>
	<br>
	<div class="centered"><!--<iframe src="https://discord.com/widget?id=1036828219845906492&theme=dark" width="350" height="350" allowtransparency="true" frameborder="0" sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"></iframe>--><iframe src="https://discord.com/widget?id=1153389656600227882&theme=dark" width="350" height="500" allowtransparency="true" frameborder="0" sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"></iframe></div>
	
	<button onclick="document.getElementById('discordBox').classList.add('hidden');" class="creationSelector">Close</button>
	<br>
</div>

<div id="battleMenuV1" style="text-align: center;" class="hidden">
	<br>
	<input type="checkbox" id="battleMenuV1_CheckBox0"><input type="text" id="battleMenuV1_Box0"> HP<input type="number" class="battleHP"><br>
	<input type="checkbox" id="battleMenuV1_CheckBox1"><input type="text" id="battleMenuV1_Box1"> HP<input type="number" class="battleHP"><br>
	<input type="checkbox" id="battleMenuV1_CheckBox2"><input type="text" id="battleMenuV1_Box2"> HP<input type="number" class="battleHP"><br>
	<input type="checkbox" id="battleMenuV1_CheckBox3"><input type="text" id="battleMenuV1_Box3"> HP<input type="number" class="battleHP"><br>
	<input type="checkbox" id="battleMenuV1_CheckBox4"><input type="text" id="battleMenuV1_Box4"> HP<input type="number" class="battleHP"><br>
	<input type="checkbox" id="battleMenuV1_CheckBox5"><input type="text" id="battleMenuV1_Box5"> HP<input type="number" class="battleHP"><br>
	<input type="checkbox" id="battleMenuV1_CheckBox6"><input type="text" id="battleMenuV1_Box6"> HP<input type="number" class="battleHP"><br>
	<input type="checkbox" id="battleMenuV1_CheckBox7"><input type="text" id="battleMenuV1_Box7"> HP<input type="number" class="battleHP"><br>
	<input type="checkbox" id="battleMenuV1_CheckBox8"><input type="text" id="battleMenuV1_Box8"> HP<input type="number" class="battleHP"><br>
	<input type="checkbox" id="battleMenuV1_CheckBox9"><input type="text" id="battleMenuV1_Box9"> HP<input type="number" class="battleHP"><br>
	<input type="checkbox" id="battleMenuV1_CheckBox9"><input type="text" id="battleMenuV1_Box9"> HP<input type="number" class="battleHP"><br>
	<input type="checkbox" id="battleMenuV1_CheckBox10"><input type="text" id="battleMenuV1_Box10"> HP<input type="number" class="battleHP"><br>
	<input type="checkbox" id="battleMenuV1_CheckBox11"><input type="text" id="battleMenuV1_Box11"> HP<input type="number" class="battleHP"><br>
	<br>
	<!--<div id="endOfRoundTag">------// End of round //------</div><br><br>-->
	<div style="position: relative;">
		<button onclick="nextTurnV1()">Next Turn</button><br><br>
		<button onclick="resetRoundV1()">Reset Round</button><br><br>
		<button onclick="document.getElementById('battleMenuV1').classList.add('hidden'); document.getElementById('mainMenu').classList.remove('hidden');">Return to Main Menu</button><br><br>
	</div>

	<img src="Pointing Finger.png" style="height: 20px; width: auto;" id="pointingFinger">

</div>


<div id="GMtools" class="menuBox hidden" style="text-align: center;">
	<br>
	<h1 class="centerText">GM Tools</h1>
	<br>
	<button onclick="changeMenu(-7); document.getElementById('GMtools').classList.add('hidden')">Battle Manager V1</button><br><br>
	<button onclick="document.getElementById('GMtools').classList.add('hidden')">Return to Main Menu</button><br><br>	
</div>







<!--<div id="targetBox"><button onclick="alert(testOutput);">Test</button></div>-->
  <div id="tourBox" class="hidden">
  	<div id="tourButtons">
  		&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<button onclick="tourStep--; updateTourBox()">Back</button>
  		<button onclick="tourStep++; updateTourBox();">Next</button>
  	</div>

  	<img src="Pictures/X button.png" class="xButton" id="xButton2" onclick='document.getElementById("tourBox").classList.add("hidden"); document.getElementById("svg1").classList.add("hidden");'>

  	<div id="tourText">[Description (✿◠‿◠)( •̀ᴗ•́ )و ̑̑]</div>


  </div>
<!--
  <button onclick="moveTarget()">move Target</button>
  <button onclick="updateTourBox()">Update Box</button>
  <button onclick="tourStep++">Next Step</button>
  <button onclick="targetID='targetBox'"></button>
-->

 <svg width="100%" height="100%" id="svg1" class="hidden">
  	<defs>
  		<marker 
  			id="arrowHead"
      	refX="2.7"
      	refY="1.5"
      	markerWidth="4"
      	markerHeight="3"
      	orient="auto"
      	>

    		<polygon points="0 0, 4 1.5, 0 3" fill="white"/>
  		</marker>

  		<marker 
  			id="squareHead"
      	refX="1.5"
      	refY="1.5"
      	markerWidth="3"
      	markerHeight="3"
      	orient="none"
      	>

    		<polygon points="0 0, 3 0, 3 3, 0 3" fill="white"/>
    		<polygon points="0.5 0.5, 2.5 0.5, 2.5 2.5, 0.5 2.5" fill="var(--accent)"/>
  		</marker>

  	</defs>
  	<!--<line id="SVG_line2"/>-->
  	<line id="SVG_line1"/>

  </svg>



<!--<div id="improvedNewCharacterMenu2" class="hidden">

	<div id="leftSidebar_characterCreation"></div>
	<div id="rightSidebar_characterCreation"></div>
	<br>
	<hr class="divLine">
	<h1 class="centerText">Archetype</h1><br>
	<select class="creationSelector" id="archetypeSelector">
		<option value="0">Mage</option>
		<option value="1">Warrior</option>
		<option value="2">Specialist</option>
		<option value="3">Rogue</option>
	</select>
	<div id="archetypeFlavortext" class="centerBox"></div>
	<br>
	<hr class="divLine">
	<h1 class="centerText">Philosophy</h1><br>
	<select class="creationSelector" id="colorSelector1">
		<option value="0">White</option>
		<option value="1">Black</option>
		<option value="2">Blue</option>
		<option value="3">Green</option>
		<option value="4">Red</option>
		<option value="5">Brown</option>
	</select>
	<div id="colorFlavortext1" class="centerBox"></div>
	<br>

	<select class="creationSelector" id="colorSelector2">
		<option value="0">White</option>
		<option value="1">Black</option>
		<option value="2">Blue</option>
		<option value="3">Green</option>
		<option value="4">Red</option>
		<option value="5">Brown</option>
	</select>
	<div id="colorFlavortext2" class="centerBox"></div>
	<br>
	<hr class="divLine">
	<h1 class="centerText">Perks</h1>
	<select id="perkSelector1" class = "creationSelector"></select>
	<div id="perkDescriptor1" class="centerBox"></div>
	<br>
	<select id="perkSelector2" class = "creationSelector"></select>
	<div id="perkDescriptor2" class="centerBox"></div>
	<br>
	<hr class="divLine">
	<h1 class = "centerText">Save File Name</h1>
	<br>
	<input type="text" name="characterNameInput" id="characterNameInput" class="creationSelector"></input>
		<button onclick="location.reload()" class="creationSelector">Return to Menu</button>

		<button class="creationSelector" id="createCharacterButton" onclick="createCharacter()">Create Character</button>
	<br>
</div>-->

<div id="improvedNewCharacterMenu2" class="hidden">
	<div id="themeImageMatrix">	
	</div>

	<!--<div id="backgroundInfoBox">
		<br>
		<h2 id="backgroundNameBox" style="text-align: center;">Blood</h2>
		<hr class="divLine2">
		<div id="backgroundFlavortextBox">Test</div>


		<div id="themeCreationButton1">
			<button id="themeCreationButton2" onclick="location.reload();">Back</button>
			<button onclick="randomizeCharacterMatrix();">Randomize</button>
			<button onclick="changeMenu(-6);">Next</button>
		</div>
		
	</div>-->

	<div id="themeInfoBox1">
		<br>
		<h2 id="themeNameBox1" style="text-align: center;">Unselected</h2>
		<hr class="divLine3">
		<div id="themeFlavortextBox1"></div>


		<div id="themeCreationButton1">
			&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
			<button onclick="randomizeThemeMatrix(1);">Randomize</button>
		</div>
		
	</div>

	<div id="themeInfoBox2">
		<br>
		<h2 id="themeNameBox2" style="text-align: center;">Unselected</h2>
		<hr class="divLine3">
		<div id="themeFlavortextBox2">Themes define how your character interacts with the world. Whenever your character does something that adheres to one of their themes, the roll gets a +10 bonus (which is pretty good)</div>


		<div id="themeCreationButton1">
			&nbsp&nbsp&nbsp&nbsp&nbsp
			<button id="themeCreationButton2" onclick="changeMenu(-5);">Back</button>
			<button onclick="randomizeThemeMatrix(2);">Randomize</button>
			<button onclick="changeMenu(-9);">Next</button>
		</div>
		
	</div>

	<div id="instructions2">// Select Two Themes //</div>
</div>


<div id="themeConfirmationScreen" class="hidden">
	<div id="themeConfirmationQuery">
		Test test test test test test test test test
	</div>
	<br>
	<div id="themeConfirmationButtons">
		<button onclick="changeMenu(-8)">Back</button>
		<button onclick="swapThemes()">Swap Order</button>
		<button onclick="changeMenu(-6)">Next</button>	
	</div>
</div>

<div id="nameHeader" class="hidden">
	<!--<input type="text" id="playerNameInputBox"> -->
	<div style="display:inline;"><span id="nameBox" contenteditable> Test</span></div>, <div id="nameInNameHeader" style="display: inline;"></div>
	<hr class="underline">
</div>



<div id="saveMenu" class="hidden">
	
</div>



<!--
test
<br>
<br>
<br>
test
<br>
<br>
<br>
test
<br>
<br>
<br>
test
<br>
<br>
<br>
test
<br>
<br>
<br>
test
<br>
<br>
<br>
test
<br>
<br>
<br>
test
<br>
<br>
<br>
test
<br>
<br>
<br>
test
<br>
<br>
<br>
test
<br>
<br>
<br>
test
<br>
<br>
<br>
-->






	<script type="text/javascript" src = "variables.js"></script>
	<script type="text/javascript" src = "script2.js"></script>
	<script type="text/javascript" src = "startup.js"></script>
	<script type="text/javascript" src = "spellStuff.js"></script>
	<script type="text/javascript" src = "characterStuff.js"></script>
	<script type="text/javascript" src = "script3.js"></script>
	<script type="text/javascript" src = "Cookie Stuff.js"></script>
	<script type="text/javascript" src = "tourStuff.js"></script>
	<script type="text/javascript" src = "indexedDBcode.js"></script>
	<script type="text/javascript" src = "quickSaveStuff.js"></script>
	<script type="text/javascript" src = "main.js"></script>
</body>
</html>