From ec3ec986d0f4da83c0bb3e8c51bbb2d71e6c6f34 Mon Sep 17 00:00:00 2001
From: Villain1nGlasses <85969638+Villain1nGlasses@users.noreply.github.com>
Date: Sun, 30 Apr 2023 13:16:31 -0600
Subject: [PATCH] More powers. Dark mode fix.

Added support for seven more powers.
Added expand and collapse function for power descriptions.
Fixed a dark mode issue with roll template text visibility that occurred in Chrome.
---
 HeroSystem6eHeroic/HeroSystem6eHeroic.css  | 9676 ++++++++++----------
 HeroSystem6eHeroic/HeroSystem6eHeroic.html | 3195 ++++++-
 2 files changed, 7672 insertions(+), 5199 deletions(-)

diff --git a/HeroSystem6eHeroic/HeroSystem6eHeroic.css b/HeroSystem6eHeroic/HeroSystem6eHeroic.css
index ce9bcc6e60..ef257755cb 100644
--- a/HeroSystem6eHeroic/HeroSystem6eHeroic.css
+++ b/HeroSystem6eHeroic/HeroSystem6eHeroic.css
@@ -1,4726 +1,4984 @@
-/* --------------------------------------------------- */
-/* Roll20-specific styling                             */
-/* --------------------------------------------------- */
-
-.charsheet {
-	background: white;
-}
-
-body.sheet-darkmode .charsheet {
-	background: #1f1f1f;
-}
-
-/* Roll20 Roll Button re-styling, Thanks to Scott C. */
-
-button[type=roll] {
-	/* Override Roll20 default styling */
-	border: none;
-	text-shadow: none;
-	line-height: 14px;
-	background-image: none;
-	box-shadow: none;
+	/* --------------------------------------------------- */
+	/* Roll20-specific styling                             */
+	/* --------------------------------------------------- */
 	
-	/* Set global border radius of 'Roll' buttons here. */
-	border-radius: 3px;
-	
-	/* Set global font weight and size here. */
-	font-style: normal;
-	font-weight: bold;
-	font-size: 13px !important;
-}
-
-button[type=roll]::before{
-	/* Remove Roll20 d20 */
-	content: "" !important;
-}
-
-/* --------------------------------------------------- */
-/* Browser-specific Styling                            */
-/* --------------------------------------------------- */
-
-@media screen and (-webkit-min-device-pixel-ratio:0) {
-	/* CSS Statements that only apply on webkit-based browsers (Chrome, Safari, etc.) */
-	
-	input[type=number]:hover,
-	input[type=number]:focus {
-		padding-right: 1px;  // Keeps some numbers from shifting during mouse hover and click.
+	.charsheet {
+		background: white;
 	}
 	
-	input:read-only::-webkit-outer-spin-button,
-	input:read-only::-webkit-inner-spin-button {
+	body.sheet-darkmode .charsheet {
+		background: #1f1f1f;
+	}
+	
+	/* Roll20 Roll Button re-styling, Thanks to Scott C. */
+	
+	button[type=roll] {
+		/* Override Roll20 default styling */
+		border: none;
+		text-shadow: none;
+		line-height: 14px;
+		background-image: none;
+		box-shadow: none;
+		
+		/* Set global border radius of 'Roll' buttons here. */
+		border-radius: 3px;
+		
+		/* Set global font weight and size here. */
+		font-style: normal;
+		font-weight: bold;
+		font-size: 13px !important;
+	}
+	
+	button[type=roll]::before{
+		/* Remove Roll20 d20 */
+		content: "" !important;
+	}
+	
+	/* --------------------------------------------------- */
+	/* Browser-specific Styling                            */
+	/* --------------------------------------------------- */
+	
+	@media screen and (-webkit-min-device-pixel-ratio:0) {
+		/* CSS Statements that only apply on webkit-based browsers (Chrome, Safari, etc.) */
+		
+		input[type=number]:hover,
+		input[type=number]:focus {
+			padding-right: 1px;  /* Keeps some numbers from shifting during mouse hover and click. */
+		}
+		
+		input:read-only::-webkit-outer-spin-button,
+		input:read-only::-webkit-inner-spin-button {
+			-webkit-appearance: none;
+			margin: 0;
+		}
+	}
+	
+	@-moz-document url-prefix() {
+		/* CSS Statements that only apply on Firefox */
+	
+		input[type=number]:hover,
+		input[type=number]:focus {
+			-moz-appearance: number-input;
+			padding-right: 0px;  /* Keeps some numbers from shifting during mouse hover and click. */
+		}
+		
+		input[type=number]:read-only {
+		  	-moz-appearance: textfield;
+		} 
+		
+	}
+	
+	/* --------------------------------------------------- */
+	/* General Styling                                     */
+	/* --------------------------------------------------- */
+	
+	textarea {
+		font-size: 14px;
+		resize: none;
+	}
+	
+	input {
+		font-size: 13px;
+		border: hidden;
+		border-radius: 3px;
+		padding: 0px;
+		text-align: center;
+	}
+	
+	input[type=number]:focus {
+		outline: none;
+	}
+	
+	input[type=text]:focus,
+		textarea:focus,
+		button:focus {
+	}
+	
+	input.customCheckbox {
+		width: 20px;
+		height: 20px;
+		vertical-align: middle;
+	}
+	
+	
+	/* --------------------------------------------------------------- */
+	/* Custom select used due to differences between Firefox,          */
+	/* Chrome, and Safari. From:                                       */
+	/* @link https://moderncss.dev/custom-select-styles-with-pure-css/ */
+	/* --------------------------------------------------------------- */
+	
+	
+	select,
+	select::before,
+	select::after {
+  	box-sizing: border-box;
+	}
+		
+	select {
 		-webkit-appearance: none;
+	 	-moz-appearance: none;
+		  	appearance: none;
+		background-color: transparent;
+		border: none;
+		padding: 0 1em 0 0;
 		margin: 0;
-	}
-}
-
-@-moz-document url-prefix() {
-	/* CSS Statements that only apply on Firefox */
-
-	input[type=number]:hover,
-	input[type=number]:focus {
-		-moz-appearance: number-input;
-		padding-right: 0px;  // Keeps some numbers from shifting during mouse hover and click.
+		width: 100%;
+		font-family: inherit;
+		/* font-size: inherit; */
+		font-size: 12px;
+		cursor: inherit;
+		line-height: inherit;
+		z-index: 1;
+		outline: none;
+		max-height: 22px;
 	}
 	
-	input[type=number]:read-only {
-		  -moz-appearance: textfield;
+	.custom-select,
+	.custom-select-skill,
+	.custom-select-alternate,
+	.custom-select-alternate-skill {
+		display: grid;
+		grid-template-areas: "select";
+		align-items: center;
+		position: relative;
+		min-width: 34px;
+		max-height: 20px;
+		border: 1px solid gray;
+		border-radius: 3px;
+		padding: 0px;
+		padding-bottom: 1px;
+		padding-left: 0px;
+		padding-right: 3px;
+		cursor: pointer;
+		background-color: #fff;
+		background-image: linear-gradient(to top, #f9f9f9, #fff 33%);
+	}
+	
+	.custom-select-skill,
+	.custom-select-alternate-skill {
+		margin-top: 2px;
+		margin-bottom: 1px;
+		max-height: 20px;
+	}
+	
+	.custom-select select,
+	.custom-select-skill select,
+	.custom-select-alternate select,
+	.custom-select-alternate-skill select,
+	.custom-select::after,
+	.custom-select-skill::after,
+	.custom-select-alternate::after,
+	.custom-select-alternate-skill::after {
+		grid-area: select;
+	}
+	
+	.custom-select::after,
+	.custom-select-skill::after,
+	.custom-select-alternate::after,
+	.custom-select-alternate-skill::after {
+		content: "";
+		justify-self: end;
+		width: 12px;
+		height: 8px;
+		-webkit-clip-path: polygon(100% 0%, 0 0%, 50% 100%);
+		  	clip-path: polygon(100% 0%, 0 0%, 50% 100%);
+	}
+	
+	.custom-select::after,
+	.custom-select-skill::after {
+		background-color: olive;
+	}
+	
+	.custom-select-alternate::after,
+	.custom-select-alternate-skill::after {
+		background-color: salmon;
+	}
+	
+	select:focus + .focus {
+		position: absolute;
+		top: -1px;
+		left: -1px;
+		right: -1px;
+		bottom: -1px;
+		border: 2px solid goldenrod;
+		border-radius: inherit;
+	}
+	
+	.custom-select--disabled,
+	.custom-select-skill--disabled,
+	.custom-select-alternate--disabled,
+	.custom-select-alternate-skill--disabled {
+		cursor: not-allowed;
+		background-color: #eee;
+		background-image: linear-gradient(to top, #ddd, #eee 33%);
+	}
+	
+	.custom-select-skill,
+	.custom-select-alternate-skill {
+		width: 64px;
+	}
+	
+	/* --------------------------------------------------- */
+	/* Tab Styling                                         */
+	/* --------------------------------------------------- */
+	.tab {
+		display: flex;
+		justify-content: space-between;
+		height:36px;
+		padding: 0px;
+		widows: 100%;
+		margin-bottom: 0px;
+		margin-left: 0px;
+		margin-right: 0px;
+		width: 680px;
+		background: dodgerblue;
+		border: 8px;
+		border-bottom: 0px;
+		border-radius: 4px;
+		border-bottom-left-radius: 0px;
+		border-bottom-right-radius: 0px;
+		border-color: dodgerblue;
+		border-style: solid;
+	}
+	
+	/* Style the buttons inside the tab */
+	.tab button {
+  	background-color: #CCCCFF;
+  	float: left;
+  	outline: none;
+  	cursor: pointer;
+  	padding: 10px 10px;
+  	margin-right: 0px;
+  	transition: 0.3s;
+  	font-size: 18px;
+  	border: 0px;
+	}
+	
+	/* Change background color of buttons on hover */
+	.tab button:hover {
+  	background-color: yellow;
+	}
+	
+	/* Create an active/current tab class */
+	.tab button.active {
+  	background-color: yellow;
+	}
+	
+	/* --------------------------------------------------- */
+	/* Configure sheet and tab buttons                     */
+	/* --------------------------------------------------- */
+	.sheet-characteristics,
+	.sheet-skills,
+	.sheet-powers,
+	.sheet-complications,
+	.sheet-gear,
+	.sheet-options {
+		display: none;
+		width: 680px;
+		background: dodgerblue;
+		border: 8px;
+		border-color: dodgerblue;
+		border-style: solid;
+	}
+	
+	/* show the selected tab */
+	.sheet-tabstoggle[value="characteristics"] ~ div.sheet-characteristics,
+	.sheet-tabstoggle[value="skills"] ~ div.sheet-skills,
+	.sheet-tabstoggle[value="powers"] ~ div.sheet-powers,
+	.sheet-tabstoggle[value="complications"] ~ div.sheet-complications,
+	.sheet-tabstoggle[value="gear"] ~ div.sheet-gear,
+	.sheet-tabstoggle[value="options"] ~ div.sheet-options {
+		display: block;
+	}
+	
+	/* Styling for characteristics tab labels */
+	.sheet-characteristics label {
+		display:inline-block;
+		font-size: 13px;
+	}
+	
+	/* --------------------------------------------------- */
+	/* Tally Bar styling                                   */
+	/* --------------------------------------------------- */
+	
+	.sheet-tallybar {
+		width: 680px;
+		background: dodgerblue;
+		border: 8px;
+		border-top: 0px;
+		border-radius: 4px;
+		border-top-left-radius: 0px;
+		border-top-right-radius: 0px;
+		border-color: dodgerblue;
+		border-style: solid;
+	}
+	
+	.sheet-flex-tallybar {
+		display: flex;
+		flex-direction: row;
+		flex-wrap: wrap;
+		align-items: center;
+		justify-content: space-evenly;
+		width: 668px;
+		height: 36px;
+		border: 3px solid #fff990;
+		border-radius: 5px;
+		background: royalblue;
+		margin: 0px;
+		padding-left: 3px;
+		padding-right: 3px;
+	}
+	
+	.sheet-flex-tallybar span {
+		color: white;
+	}
+	
+	.sheet-flex-tallybar span:nth-child(1) {
+		color: white;
+	
+	}
+	
+	.sheet-flex-tallybar input[type=number] {
+		min-width: 52px;
+		text-align: right;
+		padding-right: 0px;
+	}
+	
+	.sheet-flex-tallybar input[type=number]:hover,
+	.sheet-flex-tallybar input[type=number]:focus {
+		padding-right: 0px;  /* Keeps some numbers from shifting during mouse hover and click. Both webkit and moz. For some reason. */
+	}
+	
+	.sheet-flex-tallybar input[readonly] {
+		background: #fff990;
+		padding-right: 0px;
+		min-width: 36px;
+		max-width: 40px;
+		text-align: center;
+	}
+	
+	/* --------------------------------------------------- */
+	/* Characteristics Tab styling                         */
+	/* --------------------------------------------------- */
+	
+	.grid-container-tab-characteristics {
+		display: grid;
+		grid-template-areas: "leftGrid rightGrid";
+		grid-template-columns: 335px 335px;
+		max-width: 674px;
+		height: 801px;
+		font-size: 16px;
+		grid-gap: 5px;
+		background-color: royalblue;
+		border: 3px solid #fff990;
+		border-radius: 5px;
+		margin-bottom: 0px;
+	}
+	
+	.grid-container-tab-characteristics input[readonly]{
+		background: #fff990;
+	}
+	
+	/* characteristics tab left side */
+	
+	.grid-container-characteristics-leftGrid {
+		grid-area: leftGrid;
+		display: grid;
+		grid-template-areas:
+		"logo"
+		"bio"
+		"earnings"
+		"primaryAbilities"
+		"combatAbilities"
+		"movementAbilities";
+		grid-template-columns: 329px;
+		grid-gap: 0px;
+		background: royalblue;
+		margin-bottom: 5px;
+	}
+	
+	.grid-container-characteristics-leftGrid  h1 {
+		padding-left: 0px;
+		padding-top: 5px;
+		padding-bottom: 0px;
+		margin: 0px;
+		font-size: 13px;
+		font-style: normal;
+		line-height: 1.40;
+		min-width: 54px;
+	}
+	
+	.grid-container-characteristics-leftGrid  h2 {
+		height: 20px;
+		line-height: 1.6;
+		margin-left: 5px;
+		margin-bottom: 0px;
+		margin-top: 2px;
+		font-size: 13px;
+		font-style: normal;
+	}
+	
+	/* Item: logo graphic bio0 */
+	
+	.item-characteristics-logo {
+		grid-area: logo;
+		padding: 2px;
+		background-color: royalblue;
+		margin-bottom: 4px;
+	}
+	
+	/* Item: character bio bio1*/
+	
+	.item-characteristics-bio {	
+		max-width: 330px;
+		grid-area: bio;
+		display: grid;
+		grid-template-areas:
+		"nameLabel nameText nameText nameText"
+		"titleLabel titleText titleText titleText"
+		"backgroundLabel backgroundText backgroundText backgroundText";
+		grid-template-columns: 85px 105px 57px 73px;
+		grid-template-rows: 30px 30px 48px;
+		margin-left: 6px;
+		margin-bottom: 0px;
+		padding: 5px;
+		padding-bottom: 0px;
+		background-color: gold;
+		border-top: solid 1px goldenrod;
+		border-right: solid 1px goldenrod;
+		border-left: solid 1px goldenrod;
+		border-top-left-radius: 3px;
+		border-top-right-radius: 3px;
+		vertical-align: top;
+	}
+	
+	.item-characteristics-bio input[type=text] {
+		text-align:left;
+		width: 222px;
+		padding: 2px;
+		padding-left: 4px;
+		margin-left: 5px;
+		border: solid 1px goldenrod;
+		font-size: 13;
+		font-weight: bold;
+	}
+	
+	.item-characteristics-bio textarea {
+		width: 214px;
+		max-height: 36px;
+		padding: 2px;
+		padding-left: 4px;
+		margin-left: 5px;
+		border: solid 1px black;
+		text-align: left;
+		border: solid 1px goldenrod;
+	}
+	
+	/* Subitem: Character Name Label */
+	.item-characteristics-bio-nameLabel {
+		grid-area: nameLabel;
+		background: gold;
+	}
+	
+	/* Subitem: Character Name Text */
+	.item-characteristics-bio-name {
+		grid-area: nameText;
+	}
+	
+	/* Subitem: Character Title Label */
+	.item-characteristics-bio-titleLabel {
+		grid-area: titleLabel;
+		background: gold;
+	}
+	
+	/* Subitem: Character Title Text */
+	.item-characteristics-bio-titleText {
+		grid-area: titleText;
+	}
+	
+	/* Subitem: Character background label */
+	.item-characteristics-bio-backgroundLabel {
+		grid-area: backgroundLabel;
+		background: gold;
+	}
+	
+	/* Subitem: Character background text */
+	.item-characteristics-bio-backgroundText {
+		grid-area: backgroundText;
+	}
+	
+	/* Item: character bio experience and money*/
+	
+	.item-characteristics-earnings {	
+		max-width: 330px;
+		grid-area: earnings;
+		display: grid;
+		grid-template-areas:
+		"experienceLabel experience moneyLabel money";
+		grid-template-columns: 90px 57px 95px 83px;
+		grid-template-rows: 23px;
+		margin-left: 6px;
+		margin-bottom: 6px;
+		padding-top: 0px;
+		padding-bottom: 0px;
+		padding: 5px;
+		padding-bottom: 0px;
+		background-color: #fff990;
+		border-left: solid 1px goldenrod;
+		border-right: solid 1px goldenrod;
+		border-bottom: solid 1px goldenrod;
+		border-bottom-left-radius: 3px;
+		border-bottom-right-radius: 3px;
+		vertical-align: top;
+	}
+	
+	.item-characteristics-earnings h1 {
+		margin-bottom: 10px;
+		padding-left: 3px;
+		padding-top: 4px;
+		line-height: 1.3;
+	}
+	
+	.item-characteristics-earnings-experience input {
+		min-width: 54px;
+		padding-right: 0px;
+		padding-top: 0px;
+	}
+	
+	.item-characteristics-earnings input[type=number] {
+		text-align: right;
+		padding-right: 0px;
+		border: solid 1px palegoldenrod;
+		padding-top: 0px;
+		margin-bottom: 5px;
+	}
+	
+	.item-characteristics-earnings input[type=text] {
+		font-size: 13px;
+		max-width: 90px;
+		text-align: right;
+		background-color: #fff990;
+		font-weight: bold;
+		margin-top: 0px;
+		margin-bottom: 1px;
+		color: black;
+	}
+	
+	/* Subitem: Character Experience */
+	.item-characteristics-earnings-experienceLabel {
+		grid-area: experienceLabel;
+	}
+	
+	/* Subitem: Character Experience */
+	.item-characteristics-earnings-experience {
+		grid-area: experience;
+	}
+	
+	/* Subitem: Character Money */
+	.item-characteristics-earnings-moneyLabel {
+		grid-area: moneyLabel;
+	}
+	
+	/* Subitem: Character Money */
+	.item-characteristics-earnings-money {
+		grid-area: money;
+	}
+	
+	.item-characteristics-earnings-money input[type=number] {
+		min-width: 70px;
+		margin-bottom: 5px;
+	}
+	
+	/* Item: core abilities */
+	.item-characteristics-primary-attributes {
+		grid-area: primaryAbilities;
+		display: grid;
+		grid-template-areas:
+		"primaryAbilityNames primaryAbilityValues primaryAbilityChances primaryAbilityButtons primaryAbilityCosts";
+		grid-template-columns: 126px 49px 50px 45px 45px;
+		min-width: 300px;
+		vertical-align: middle;
+		margin-left: 6px;
+		background-color: #fff990; 
+		border-top: solid 1px goldenrod;
+		border-left: solid 1px goldenrod;
+		border-right: solid 1px goldenrod;
+		border-bottom: 0px;
+		border-top-left-radius: 3px;
+		border-top-right-radius: 3px;
+		padding-bottom: 2px;
+	}
+	
+	.item-characteristics-primary-attributes h1 {
+		background: gold;
+		padding-left: 5px;
+		padding-right: 6px;
+		padding-top: 2px;
+		padding-bottom: 2px;
+		margin: 0px;
+		margin-top: 0px;
+		font-size: 13px;
+		font-style: normal;
+		line-height: 1.35;
+	}
+	
+	.item-characteristics-primary-attributes h2 {
+		margin-left: 8px;
+	}
+	
+	.item-characteristics-primary-attributes input[type=number] {
+		text-align: right;
+		padding-right: 0px;
+		border: solid 1px palegoldenrod;	
+	}
+	
+	.item-characteristics-primary-attributes input[readonly] {
+		text-align: center;
+		border: none;	
+		max-width: 45px;
+	}
+	
+	/* Sub-Item: core abilities characteristics */
+	.item-characteristics-primary-attributes-names {
+		grid-area: primaryAbilityNames;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		text-align: left;
+		min-height: 130px;
+		max-height: 160px;
+	}
+	
+	/* Sub-Item: core abilities values */
+	.item-characteristics-primary-attributes-values {
+		grid-area: primaryAbilityValues;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		text-align: left;
+		min-height: 130px;
+		max-height: 160px;
+		max-width: 55px;
+	}
+	
+	/* Sub-Item: core abilities values */
+	.item-characteristics-primary-attributes-rollChances {
+		grid-area: primaryAbilityChances;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		text-align: left;
+		min-height: 130px;
+		max-height: 160px;
+	}
+	
+	.item-characteristics-primary-attributes-rollChances h1 {
+		margin-left: 6px;
+	}
+	
+	/* Sub-Item: core abilities values */
+	.item-characteristics-primary-attributes-rollButtons {
+		grid-area: primaryAbilityButtons;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		min-height: 130px;
+		max-height: 160px;
+	}
+	
+	/* Sub-Item: core abilities values */
+	.item-characteristics-primary-attributes-costs {
+		grid-area: primaryAbilityCosts;
+		text-align: center;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		min-height: 130px;
+		max-height: 160px;
+	}
+	
+	.item-characteristics-primary-attributes-costs h1 {
+		margin-left: 8px;
+		text-align: left;
+		min-width: 32px;
+	}
+	
+	/* Item: combat abilities */
+	.item-characteristics-combat-attributes {
+		grid-area: combatAbilities;
+		display: grid;
+		grid-template-areas:
+		"combatAbilityNames combatAbilityValues . . combatAbilityCosts";
+		grid-template-columns: 126px 49px 50px 45px 45px;
+		min-width: 300px;
+		vertical-align: middle;
+		margin-left: 6px;
+		background-color: #fff990; 
+		border: solid 1px goldenrod;
+		border-right: solid 1px goldenrod;
+		border-left: solid 1px goldenrod;
+		border-bottom: none;
+		border-top: none;
+		padding-bottom: 2px;
+	}
+	
+	.item-characteristics-combat-attributes input[type=number] {
+		text-align: right;
+		padding-right: 0px;
+		border: solid 1px palegoldenrod;
+	}
+	
+	.item-characteristics-combat-attributes input[readonly] {
+		text-align: center;
+		padding-right: 2px;
+		border: none;
+		max-width: 45px;
+	}
+	
+	.item-characteristics-combat-attributes h1 {
+		background: gold;
+		padding-left: 5px;
+		padding-right: 6px;
+		padding-top: 2px;
+		padding-bottom: 2px;
+		margin: 0px;
+		margin-top: 0px;
+		font-size: 13px;
+		font-style: normal;
+		line-height: 1.35;
+	}
+	
+	.item-characteristics-combat-attributes h2 {
+		margin-left: 8px;
+	}
+	
+	/* Sub-Item: combat abilities characteristics */
+	.item-characteristics-combat-attributes-names {
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		text-align: left;
+		grid-area: combatAbilityNames;
+		min-width: 120px;
+	}
+	
+	/* Sub-Item: core abilities values */
+	.item-characteristics-combat-attributes-values {
+		text-align: center;
+		grid-area: combatAbilityValues;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		min-width: 152px;
+		text-align: left;
+	}
+	
+	/* Sub-Item: core abilities values */
+	.item-characteristics-combat-attributes-costs {
+		grid-area: combatAbilityCosts;
+		text-align: right;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+	}
+	
+	.item-characteristics-combat-attributes-costs h1 {
+		margin-left: 8px;
+		text-align: left;
+		min-width: 32px;
+	}
+	
+	/* Item: combat abilities */
+	.item-characteristics-movement-abilities {
+		grid-area: movementAbilities;
+		display: grid;
+		grid-template-areas:
+		"movementNames movementValues . . movementCosts";
+		grid-template-columns: 126px 49px 50px 45px 45px;
+		background: purple;
+		min-width: 300px;
+		margin-left: 6px;
+		padding-bottom: 2px;
+		background-color: #fff990; 
+		border-right: solid 1px goldenrod;
+		border-left: solid 1px goldenrod;
+		border-bottom: solid 1px goldenrod;
+		border-top: none;
+		border-bottom-left-radius: 3px;
+		border-bottom-right-radius: 3px;
+	}
+	
+	.item-characteristics-movement-abilities input[type=number] {
+		text-align: right;
+		padding-right: 0px;
+		border: solid 1px palegoldenrod;
+	}
+	
+	.item-characteristics-movement-abilities input[readonly] {
+		text-align: center;
+		padding-right: 0px;
+		border: none; 
+		max-width: 45px;
+	}
+	
+	.item-characteristics-movement-abilities h1 {
+		background: gold;
+		padding-left: 5px;
+		padding-right: 6px;
+		padding-top: 2px;
+		padding-bottom: 2px;
+		margin: 0px;
+		margin-top: 0px;
+		font-size: 13px;
+		font-style: normal;
+		line-height: 1.35;
+	}
+	
+	.item-characteristics-movement-abilities h2 {
+		margin-left: 8px;
+	}
+	
+	/* Sub-Item: combat abilities characteristics */
+	.item-characteristics-movement-abilities-names {
+		grid-area: movementNames;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+	}
+	
+	/* Sub-Item: core abilities values */
+	.item-characteristics-movement-abilities-values {
+		grid-area: movementValues;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+	}
+	
+	.item-characteristics-movement-abilities-values h1 {
+		min-width: 141px;
+	}
+	
+	/* Sub-Item: core abilities costs */
+	.item-characteristics-movement-abilities-costs {
+		grid-area: movementCosts;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+	}
+	
+	.item-characteristics-movement-abilities-costs h1 {
+		margin-left: 8px;
+		text-align: left;
+		min-width: 32px;
+	}
+	
+	/* characteristics tab right side */
+	
+	.grid-container-characteristics-rightGrid {
+		grid-area: rightGrid;
+		display: grid;
+		grid-template-areas:
+		"portrait health"
+		"turnSegmentIndicators turnTracker"
+		"perception perception"
+		"history history";
+		grid-template-columns: 264px 68px;
+		grid-template-rows: 260px 22px 100px 419px;
+		background: royalblue;
+		max-height: 800px;
+		max-width: 300px;
+	}
+	
+	
+	/* Item: character portrait graphic */
+	.item-characteristics-portrait {
+		grid-area: portrait;
+		position: relative;
+		width: 100%;
+		max-width: 250px;
+		padding: 0px;
+		height: 250px;
+		margin: 3px;
+		margin-left: 0px;
+		margin-top: 4px;
+		background-color: royalblue;
+	}
+	
+	.item-characteristics-portrait textarea {
+		width: 242px;
+		margin-left: 5px;
+		margin-right: 5px;
+		margin-bottom: 4px;
+		background-color: lavender;
+		height: 242px;
+		font-size: 14px;
+	}
+	
+	.item-characteristics-portrait img {
+		width: 100%;
+		height: auto;
+		margin-left: 7px;
+		border-right: solid gray 1px;
+		border-bottom: solid gray 1px;
+		border-left: solid darkgray 1px;
+		border-top: solid darkgray 1px;
+	}
+	
+	.item-characteristics-portrait .button-left-arrow,
+	.item-characteristics-portrait .button-right-arrow {
+		position: absolute;
+		transform: translate(-50%, -50%);
+		color: transparent;
+		background-color: transparent;
+		font-size: 16px;
+		padding: 12px 12px;
+		border: none;
+		cursor: pointer;
+		border-radius: 5px;
+		text-align: center;
+	}
+	
+	.item-characteristics-portrait .button-left-arrow {
+		top: 50%;
+		left: 11%;
+	}
+	
+	.item-characteristics-portrait .button-right-arrow {
+		top: 50%;
+		left: 95%;
+	}
+	
+	.item-characteristics-portrait .button-right-arrow:hover,
+	.item-characteristics-portrait .button-left-arrow:hover {
+		background-color: gold;	
+	}
+	
+	
+	/* By deafult, hides all portrait images. Add more numbered entries to add more images, notes, or cards. */
+	.item-portrait-00, 
+	.item-portrait-01,
+	.item-portrait-02 {
+		display: none;
+	}
+	
+	/* show the selected portrait frame. Add more numbered entries to add more images, notes, or cards. */
+	.item-portrait-slideshow[value="0"] ~ div.item-portrait-00,
+	.item-portrait-slideshow[value="1"] ~ div.item-portrait-01,
+	.item-portrait-slideshow[value="2"] ~ div.item-portrait-02 {
+		display: block;
+		position: relative;
+	}
+	
+	/* Alternate styling for rule cards instead of portraits */
+	.item-portrait-00 {
+		background-color: white;
+		border: solid 2px gray;
+		height: 250px;
+		width: 250px;
+		margin-left: 5px;
+	}
+	
+	.item-portrait-00 h1 {
+		font-size: 16px;
+		color: white;
+		text-align: center;
+		padding-left: 0px;
+		background-color: crimson;
+	}
+	
+	.item-portrait-flex-container {
+		display: flex;
+		flex-direction: column;
+		justify-content: flex-start;
+		max-height: 240px;
+		padding: 0px;
+	}
+	
+	.item-portrait-rule-description {
+		max-width: 250px;
+		margin: 0px;
+		padding: 0px;
+		line-height: 1.0;
+	}
+	
+	.item-portrait-rule-description h1 {
+		font-size: 16px;
+		color: firebrick;
+		text-align: center;
+		padding-left: 4px;
+		background-color: inherit;
+		line-height: 1.4;
+		padding-bottom: 0px;
+	}
+	
+	.item-portrait-rule-description p {
+		font-size: 13px;
+		padding: 4px;
+		margin: 0px;
+		text-align: left;
+		line-height: 1.2;
+	}
+	
+	/* Item: health status                                     */
+	/* Item: gear tab health status                            */
+	/* Sheet worker used to synchronizes the contents of each  */
+	
+	.item-characteristics-health,
+	.item-gear-health {
+		padding: 0px;
+		width: 68px;
+		background: royalblue;
+		border: white;
+		margin-top: 4px;
+		margin-right: 2px;
+		height: 250px;
+		align-items: center;
+		display: flex;
+		justify-content: space-between;
+		flex-direction: column;
+	}
+	
+	.item-powers-health {
+		padding: 6px;
+		width: 318px;
+		height: 56px;
+		margin: 0px;
+		align-items: center;
+		display: flex;
+		justify-content: space-between;
+		flex-direction: row;
+		background-color: royalblue;
+		border: 3px solid #fff990;
+		border-radius: 5px;
+	}
+	
+	.item-characteristics-health  {
+		grid-area: health;
+	}
+	
+	.item-gear-health {
+		grid-area: gearHealth;
+	}
+	
+	.item-powers-health {
+		grid-area: powerHealth;
+	}
+	
+	.item-gear-health h2,
+	.item-characteristics-health h2,
+	.item-powers-health h2 {
+		color: white;
+		background-color: inherit;
+		text-align: center;
+		font-size: 17px;
+		line-height: 1.0em;
+		margin-top: 0px;
+		margin-bottom: 0px;
+		padding: 0px;
+	}
+	
+	.item-health-stat {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		width: 63px;
+		height: 30px;
+		background-color: gold;
+		border-radius: 3px;
+		align-items: center;
+		padding: 0px;
+		margin-right: 1px;
+		margin-bottom: 2px;
+		border: solid 1px darkgoldenrod;
+	}
+	
+	.item-health-stat-enclosure {
+		padding: none;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		height: 57px;
+	}
+	
+	.item-health-stat-plus-minus-enclosure {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		max-height: 20px;
+		width: 20px;
+		align-items: center;
+		padding: 1px;
+	}
+	
+	.item-health-stat input[type=text] {
+		max-width: 45px;
+		height: 30px;
+		font-size: 20px;
+		background-color: gold;
+	}
+	
+	.item-health-stat input[type=text]:focus{
+		outline: transparent;
+	}
+	
+	.item-health-stat button.buttonPlus,
+	.item-health-stat button.buttonMinus {
+		background-color: LemonChiffon;
+		border: solid 1px slategray;
+		color: slategray;
+		padding-left: 4px;
+		padding-right: 4px;
+		padding-top: 1px;
+		padding-bottom: 1px;
+		display: inline-block;
+		font-size: 16px;
+		margin: 0px 0px;
+		line-height: 1.4ch;
+		border-radius: 0px;
+	}
+	
+	.item-health-stat button.buttonPlus span,
+	.item-health-stat button.buttonMinus span {
+		display: inline-block;
+		transform: rotate(-90deg);
+		text-align: center;
+	}
+	
+	.item-health-stat button.buttonPlus:hover,
+	.item-health-stat button.buttonMinus:hover {
+		background-color: gray;
+		color: white;
+		transition: 0.05s;
+	}
+	
+	/* Item: Turn Tracker Button Space */
+	
+	.item-characteristics-turn-tracker {
+		grid-area: turnTracker;
+		width: 68px;
+		height: 22px;
+		padding: 0px;
+		line-height: 20px;
+	}
+	
+	/* Item: character history */
+	.item-characteristics-history {
+		grid-area: history;
+		text-align: left;
+		padding: 2px;
+		max-width: 343px;
+		background-color: inherit;
+		margin-bottom: 1px;
+		margin-right: 6px;
+		max-height: 402px;
+		margin-bottom: 6px;
+	}
+	
+	.item-characteristics-history textarea {
+		width: 316px;
+		height: 100%;
+	}
+	
+	/* Item: Speed Phase Indicator Buttons */
+	.item-characteristics-speedIndicatorButtons {
+		grid-area: speedIndicatorButtons;
+		padding-left: 2px;
+		padding-top: 1px;
+		padding-bottom: 1px;
+		background-color: royalblue;
+		width: 264px;
+		margin: 0px;
+	}
+	
+	/* Item: Perception */
+	.item-characteristics-perception {
+		grid-area: perception;
+		max-width: 323px;
+		background-color: inherit;
+		max-height: 95px;
+		margin-left: 3px;
+		border: transparent;
+		margin-top: 0px;
+	}
+	
+	.item-characteristics-perception h1 {
+		font-size: 13px;
+		line-height: 1.6;
+		text-align: left;
+		background-color: royalblue;
+		color: white;
+	}
+	
+	.item-characteristics-perception input[type=number] {
+		text-align: right;
+		padding-right: 0px;
+		border: solid 1px palegoldenrod;
+		margin: 0px;
+		margin-bottom: 3px;
+		background-color: white;
+		max-width: 40px;
+	}
+	
+	.subitem-characteristics-perception-stat-container {
+		display: flex;
+		justify-content: space-between;
+		flex-direction: column;
+		background-color: inherit;
+		padding-left: 0px;
+		align-items: center;
+	}
+	
+	.subitem-characteristics-perception-stat-container input[type=text] {
+		font-size: 13px;
+		max-width: 65px;
+		text-align: center;
+		background-color: royalblue;
+		color: white;
+		font-weight: bold;
+		margin-top: 2px;
+	}
+	
+	.subitem-characteristics-perception-column-container {
+		display: flex;
+		justify-content: space-between;
+		flex-direction: column;
+		background-color: lightblue;
+		padding: 2px;
+		align-items: center;
+		border-radius: 5px;
+		border: solid lightcyan 2px;
+	}
+	
+	.subitem-characteristics-perception-column-container input[type=text] {
+		font-size: 13px;
+		max-width: 32px;
+		line-height: 1.3;
+		text-align: center;
+		background-color: lightcyan;
+		padding: 0px;
+		color: black;
+		font-weight: normal;
+	}
+	
+	.subitem-characteristics-perception-row-container {
+		display: flex;
+		justify-content: space-between;
+		flex-direction: row;
+		margin-top: 2px;
+	}
+	
+	/* --------------------------------------------------- */
+	/* Options Tab                                         */
+	/* --------------------------------------------------- */
+	
+	.grid-container-tab-options {
+		display: grid;
+		grid-template-areas: ". . ." 
+			". options ."
+			". . .";
+		grid-template-columns: 110px 500px 100px;
+		grid-template-rows: 100px 185px 100px;
+		font-size: 16px;
+		background-color: royalblue;
+		border: 3px solid #fff990;
+		border-radius: 5px;
+		margin-bottom: 1px;
+		min-height: 800px;
+		min-width: 674px;
+	}
+	
+	.grid-container-tab-options h1 {
+		font-size: 14px;
+		margin-left: 0px;
+		color: black;
+		padding-bottom: 5px;
+		font-weight: 500;
+	}
+	
+	.grid-container-tab-options label {
+		max-width: 13px;
+		padding: 8px;
+	}
+	
+	/* Sub-Item: options */
+	.item-options {
+		grid-area: options;
+		display: flex;
+		flex-direction: column;
+		justify-content: flex-start;
+		padding-left: 2px;
+		padding-top: 2px;
+		padding-bottom: 2px;
+		background-color: #fff990;
+		margin: 5px;
+		width: 450px;
+		height: 213px;
+		margin: 0px;
+		border: solid 2px goldenrod;
+		border-radius: 3px;
+	}
+	
+	.item-options-row {
+		display: flex;
+		flex-direction: row;
+		justify-content: flex-start;
+		align-items: baseline;
+		min-width: 400px;
+		max-height: 28px;
+		margin-left: 10px;
+	}
+	
+	/* --------------------------------------------------- */
+	/* Custom buttons                                      */
+	/* --------------------------------------------------- */
+	
+	.button {
+		border: none;
+		color: white;
+		text-decoration: none;
+		display: inline-block;
+		cursor: pointer;
+		transition-duration: 0.2s;
+		text-align: center;
+	}
+		
+	.buttonRecover {
+		background-color: darkseagreen;
+		padding-top: 4px;
+		padding-bottom: 4px;
+		margin-left: 2px;
+		margin-right: 2px;
+		margin-top: 0px;
+		margin-bottom: 0px;
+		padding-left: 4px;
+		padding-right: 3.5px;
+		vertical-align: middle;
+		text-align: right;
+		font-size: 13px;
+		font-weight: bold;
+		border-radius: 3px;
+	}
+	
+	.buttonReset {
+		background-color: orange;
+		padding-top: 4px;
+		padding-bottom: 4px;
+		margin-left: 2px;
+		margin-right: 2px;
+		margin-top: 0px;
+		margin-bottom: 0px;
+		padding-left: 12px;
+		padding-right: 12px;
+		vertical-align: middle;
+		text-align: center;
+		font-size: 13px;
+		font-weight: bold;
+		border-radius: 3px;
+	}
+	
+	.buttonTracker {
+		background-color: dodgerblue;
+		padding-left: 3px;
+		padding-right: 3px;
+		padding-top: 2px;
+		padding-bottom: 2px;
+		font-weight: bold;
+	}
+	
+	.button-Power-END-right,
+	.button-Power-END-left {
+		padding-top: 2px;
+		padding-bottom: 2px;
+		padding-right: 2px;
+		padding-left: 2px;
+		min-height: 16px;
+		max-height: 16px;
+		text-align: middle;
+		font-weight: bold;
+		border-radius: 2.5px;
+	}
+	
+	.button-Power-END-left {
+		background-color: olive;
+		margin-right: 0px;
+		min-width: 34px;
+		max-width: 35px;
+	}
+	
+	.button-Power-END-right {
+		background-color: salmon;
+		margin-right: 0px;
+		min-width: 34px;
+		max-width: 35px;
+	}
+	
+	.buttonRoll,
+	.buttonRollAttack,
+	.buttonRollActivate,
+	.buttonRollNormalAttack,
+	.buttonRollShieldAttack,
+	.buttonRollShow,
+	.buttonRollPower {
+		padding-left: 3px;
+		padding-right: 3px;
+		text-align: center;
+		line-height: 13px;
+		padding-top: 2px;
+		padding-bottom: 2px;
+		font-weight: bold;
+		max-height: 16px;
+		min-height: 15px;
+	}
+	
+	.buttonRoll,
+	.buttonRollAttack,
+	.buttonRollActivate,
+	.buttonRollNormalAttack,
+	.buttonRollShieldAttack {
+		min-width: 25px;
+		max-width: 26px;
+	}
+	
+	
+	.buttonRollPower {
+		min-width: 32px;
+		max-width: 34px;
+	}
+	
+	.button:hover,
+	.buttonRecover:hover,
+	.buttonReset:hover,
+	.buttonRoll:hover,
+	.buttonRollAttack:hover,
+	.buttonRollActivate:hover,
+	.buttonRollNormalAttack:hover,
+	.buttonRollShieldAttack:hover,
+	.buttonRollShow:hover,
+	.buttonRollPower:hover {
+		color: black;
+		background-color: lightgray;
+		text-align: center;
+	}
+	
+	.button-Power-END-left:hover,
+	.button-Power-END-right:hover {
+		background-color: #ff9900;
+		color: black;
+	}
+	
+	.buttonRoll {
+		background-color: orange;
+	}
+	
+	.buttonRollAttack {
+		background-color: indianred;
+		border-radius: 2.5px;
+	}
+	
+	.buttonRollActivate {
+		background-color: steelblue;
+	}
+	
+	.buttonRollNormalAttack {
+		background-color: olivedrab;
+		border-radius: 2.5px;
+	}
+	
+	.buttonRollShieldAttack  {
+		background-color: DarkGoldenrod;
+		border-radius: 2.5px;
+	}
+	
+	.buttonRollShow {
+		background-color: lightslategray;
+		min-width: 36px;
+		max-width: 38px;
+	}
+	
+	.buttonRollPower {
+		background-color: #9184E2; /* lighter than mediumslateblue */
+		border-radius: 2.5px;
+	}
+	
+	/* The d6 of dicefontd6 doesn't look good. Let's hold off for a better idea or stick with the label 'Roll' on the buttons.
+	
+	.buttonRollNormalAttack::before {
+		font-family: 'dicefontd6';
+		font-size: 16px;
+		content: 'F';
+	} */
+	
+	.portrait-display-button-left,
+	.portrait-display-button-right {
+		background-color: orange;
+		padding-top: 4px;
+		padding-bottom: 4px;
+		margin: 4px 2px;
+		padding-left: 14px;
+		padding-right: 14px;
+		vertical-align: middle;
+		text-align: center;
+	}
+	
+	.portrait-display-button-left:hover,
+	.portrait-display-button-right:hover {
+		color: black;
+		background-color: limegreen;
+		text-align: center;
+	}
+	
+	
+	/* --------------------------------------------------- */
+	/* Custom Checkbox used for options                    */
+	/* From w3 schools                                     */
+	/* --------------------------------------------------- */
+	
+	/* Customize the label (the container) */
+	.container-checkbox {
+		display: inline-block;
+		position: relative;
+		padding-left: 25px;
+		padding-top: 2px;
+		/* margin-bottom: 10px; */
+		cursor: pointer;
+		max-width: 400px;
+		font-size: 12px;
+		-webkit-user-select: none;
+		-moz-user-select: none;
+		-ms-user-select: none;
+		user-select: none;
+		border: transparent;
+	}
+	
+	/* Hide the browser's default checkbox */
+	.container-checkbox input,
+	.container-checkbox-small input,
+	.container-checkbox-small-gray input {
+		position: absolute;
+		opacity: 0;
+		cursor: pointer;
+		height: 0;
+		width: 0;
+	}
+	
+	/* Create a custom checkbox */
+	.checkmark {
+		position: absolute;
+		top: 0;
+		left: 0;
+		height: 20px;
+		width: 20px;
+		background-color: gold;
+	}
+	
+	/* On mouse-over, add a grey background color */
+	.container-checkbox:hover input ~ .checkmark,
+	.container-checkbox-small:hover input ~ .checkmark-small {
+		background-color: goldenrod;
+		border: solid 1px darkgoldenrod;
+	}
+	
+	.container-checkbox-small-gray:hover input ~ .checkmark-small-gray {
+		background-color: lightsteelblue;
+		border: solid 1px darkgray;
+	}
+	
+	/* When the checkbox is checked, add a gold background */
+	.container-checkbox input:checked ~ .checkmark,
+	.container-checkbox-small input:checked ~ .checkmark-small {
+		background-color: gold;
+	}
+	
+	.container-checkbox-small-gray input:checked ~ .checkmark-small-gray {
+		background-color: lightgray;
+	}
+	
+	/* Create the checkmark/indicator (hidden when not checked) */
+	.checkmark:after,
+	.checkmark-small:after {
+		content: "";
+		position: absolute;
+		display: none;
+		border: solid 1px darkgoldenrod;
+	}
+	
+	.checkmark-small-gray:after {
+		content: "";
+		position: absolute;
+		display: none;
+		border: solid 1px gray;
+	}
+	
+	/* Show the checkmark when checked */
+	.container-checkbox input:checked ~ .checkmark:after,
+	.container-checkbox-small input:checked ~ .checkmark-small:after,
+	.container-checkbox-small-gray input:checked ~ .checkmark-small-gray:after {
+		display: block;
+	}
+	
+	/* Style the checkmark/indicator */
+	.container-checkbox .checkmark:after {
+		left: 7px;
+		top: 2px;
+		width: 5px;
+		height: 10px;
+		border: solid black;
+		border-width: 0 3px 3px 0;
+		-webkit-transform: rotate(45deg);
+		-ms-transform: rotate(45deg);
+		transform: rotate(45deg);
+	}
+	
+	/* --------------------------------------------------- */
+	/* Custom Checkbox (small) used for skill enhancers    */
+	/* From w3 schools                                     */
+	/* --------------------------------------------------- */
+	
+	/* Customize the label (the container) */
+	.container-checkbox-small,
+	.container-checkbox-small-gray {
+		display: block;
+		position: relative;
+		padding-left: 20px;
+		padding-top: 0px;
+		cursor: pointer;
+		font-size: 12px;
+		max-width: 20px;
+		-webkit-user-select: none;
+		-moz-user-select: none;
+		-ms-user-select: none;
+		user-select: none;
+	}
+	
+	/* Create a custom checkbox */
+	.checkmark-small {
+		position: absolute;
+		top: 0;
+		left: 0;
+		height: 15px;
+		width: 15px;
+		background-color: gold;
+	}
+	
+	.checkmark-small-gray {
+		position: absolute;
+		top: 0;
+		left: 0;
+		height: 15px;
+		width: 15px;
+		background-color: lightgray;
+	}
+	
+	/* Style the checkmark/indicator */
+	.container-checkbox-small .checkmark-small:after,
+	.container-checkbox-small-gray .checkmark-small-gray:after {
+		left: 4px;
+		top: 2px;
+		width: 4px;
+		height: 7px;
+		border: solid black;
+		border-width: 0 3px 3px 0;
+		-webkit-transform: rotate(45deg);
+		-ms-transform: rotate(45deg);
+		transform: rotate(45deg);
+	}
+	
+	
+	/* --------------------------------------------------- */
+	/* Custom Checkboxes used for turn segment indicators  */
+	/* Modification of custom checkbox above               */
+	/* --------------------------------------------------- */
+	
+	.grid-container-container-turn-segments {
+		grid-area: turnSegmentIndicators;
+		display: inline-flex; /* or inline-flex */
+		flex-direction: row;
+		flex-wrap: nowrap;
+		align-items: top;
+		justify-content: space-evenly;
+		width: 264px;
+		height: 24px;
+		background: royalblue;
+		margin-top: 2px;
+		margin-left: 1px;
+		padding: 0px;
+	}
+	
+	.grid-container-container-turn-segments label {
+		display: inline;
+		pointer-events: none;
+		font-style: normal;
+	}
+	
+	/* Custom checkbox indicator */
+	
+	.container-speed-indicator {
+		display: inline-block;
+		position: relative;
+		padding-left: 5px;
+		margin-bottom: 0px;
+		cursor: pointer;
+		font-size: 20px;
+		-webkit-user-select: none;
+		-moz-user-select: none;
+		-ms-user-select: none;
+		user-select: none;
+	}
+		
+	/* Hide the browser's default checkbox */
+	.container-speed-indicator input {
+		position: absolute;
+		opacity: 0;
+		cursor: pointer;
+		height: 0;
+		width: 0;
+	}
+	
+	/* Custom checkbox */
+	
+	.checkmark01,
+	.checkmark02,
+	.checkmark03,
+	.checkmark04,
+	.checkmark05,
+	.checkmark06,
+	.checkmark07,
+	.checkmark08,
+	.checkmark09,
+	.checkmark10,
+	.checkmark11,
+	.checkmark12 {
+		position: absolute;
+		top: 0;
+		left: 0;
+		height: 20px;
+		width: 20px;
+		background-color: dodgerblue;
+		border: none;
+		border-radius: 5px;
+		pointer-events: none;
+	}
+	
+	/* Custom segment indicator checkbox: Status */
+	.container-speed-indicator input:checked ~ .checkmark01,
+	.container-speed-indicator input:checked ~ .checkmark02,
+	.container-speed-indicator input:checked ~ .checkmark03,
+	.container-speed-indicator input:checked ~ .checkmark04,
+	.container-speed-indicator input:checked ~ .checkmark05,
+	.container-speed-indicator input:checked ~ .checkmark06,
+	.container-speed-indicator input:checked ~ .checkmark07,
+	.container-speed-indicator input:checked ~ .checkmark08,
+	.container-speed-indicator input:checked ~ .checkmark09,
+	.container-speed-indicator input:checked ~ .checkmark10,
+	.container-speed-indicator input:checked ~ .checkmark11,
+	.container-speed-indicator input:checked ~ .checkmark12 {
+		background-color: hotpink;
+		border: none;
+		border-radius: 5px;
+	}
+	
+	/* Custom segment indicator checkbox 01. Active/checked. */
+	.checkmark01:after {
+		content: "1";
+		color: white;
+		position: absolute;
+		padding-left: 6px;
+		padding-top: 1px;
+		display: none;
+	}
+	
+	/* Custom segment indicator checkbox 01. Inactive/not checked. */
+	.checkmark01:before {
+		content: "1";
+		color: black;
+		position: absolute;
+		padding-left: 6px;
+		padding-top: 1px;
+		display: none;
+	}
+	
+	/* Custom segment indicator checkbox 02. Active/checked. */
+	.checkmark02:after {
+		content: "2";
+		color: white;
+		position: absolute;
+		padding-left: 6px;
+		padding-top: 1px;
+		display: none;
+	}
+	
+	/* Custom segment indicator checkbox 02. Inactive/not checked. */
+	.checkmark02:before {
+		content: "2";
+		color: black;
+		position: absolute;
+		padding-left: 6px;
+		padding-top: 1px;
+		display: none;
+	}
+	
+	/* Custom segment indicator checkbox 03. Active/checked. */
+	.checkmark03:after {
+		content: "3";
+		color: white;
+		position: absolute;
+		padding-left: 6px;
+		padding-top: 1px;
+		display: none;
+	}
+	
+	/* Custom segment indicator checkbox 03. Inactive/not checked. */
+	.checkmark03:before {
+		content: "3";
+		color: black;
+		position: absolute;
+		padding-left: 6px;
+		padding-top: 1px;
+		display: none;
+	}
+	
+	/* Custom segment indicator checkbox 04. Active/checked. */
+	.checkmark04:after {
+		content: "4";
+		color: white;
+		position: absolute;
+		padding-left: 6px;
+		padding-top: 1px;
+		display: none;
+	}
+	
+	/* Custom segment indicator checkbox 04. Inactive/not checked. */
+	.checkmark04:before {
+		content: "4";
+		color: black;
+		position: absolute;
+		padding-left: 6px;
+		padding-top: 1px;
+		display: none;
+	}
+	
+	/* Custom segment indicator checkbox 05. Active/checked. */
+	.checkmark05:after {
+		content: "5";
+		color: white;
+		position: absolute;
+		padding-left: 6px;
+		padding-top: 1px;
+		display: none;
+	}
+	
+	/* Custom segment indicator checkbox 05. Inactive/not checked. */
+	.checkmark05:before {
+		content: "5";
+		color: black;
+		position: absolute;
+		padding-left: 6px;
+		padding-top: 1px;
+		display: none;
+	}
+	
+	/* Custom segment indicator checkbox 06. Active/checked. */
+	.checkmark06:after {
+		content: "6";
+		color: white;
+		position: absolute;
+		padding-left: 6px;
+		padding-top: 1px;
+		display: none;
+	}
+	
+	/* Custom segment indicator checkbox 06. Inactive/not checked. */
+	.checkmark06:before {
+		content: "6";
+		color: black;
+		position: absolute;
+		padding-left: 6px;
+		padding-top: 1px;
+		display: none;
+	}
+	
+	/* Custom segment indicator checkbox 07. Active/checked. */
+	.checkmark07:after {
+		content: "7";
+		color: white;
+		position: absolute;
+		padding-left: 6px;
+		padding-top: 1px;
+		display: none;
+	}
+	
+	/* Custom segment indicator checkbox 07. Inactive/not checked. */
+	.checkmark07:before {
+		content: "7";
+		color: black;
+		position: absolute;
+		padding-left: 6px;
+		padding-top: 1px;
+		display: none;
+	}
+	
+	/* Custom segment indicator checkbox 08. Active/checked. */
+	.checkmark08:after {
+		content: "8";
+		color: white;
+		position: absolute;
+		padding-left: 6px;
+		padding-top: 1px;
+		display: none;
+	}
+	
+	/* Custom segment indicator checkbox 08. Inactive/not checked. */
+	.checkmark08:before {
+		content: "8";
+		color: black;
+		position: absolute;
+		padding-left: 6px;
+		padding-top: 1px;
+		display: none;
+	}
+	
+	/* Custom segment indicator checkbox 09. Active/checked. */
+	.checkmark09:after {
+		content: "9";
+		color: white;
+		position: absolute;
+		padding-left: 6px;
+		padding-top: 1px;
+		display: none;
+	}
+	
+	/* Custom segment indicator checkbox 09. Inactive/not checked. */
+	.checkmark09:before {
+		content: "9";
+		color: black;
+		position: absolute;
+		padding-left: 6px;
+		padding-top: 1px;
+		display: none;
+	}
+	
+	/* Custom segment indicator checkbox 10. Active/checked. */
+	.checkmark10:after {
+		content: "10";
+		color: white;
+		position: absolute;
+		padding-left: 2px;
+		padding-top: 1px;
+		display: none;
+	}
+	
+	/* Custom segment indicator checkbox 10. Inactive/not checked. */
+	.checkmark10:before {
+		content: "10";
+		color: black;
+		position: absolute;
+		padding-left: 2px;
+		padding-top: 1px;
+		display: none;
+	}
+	
+	/* Custom segment indicator checkbox 11. Active/checked. */
+	.checkmark11:after {
+		content: "11";
+		color: white;
+		position: absolute;
+		padding-left: 3px;
+		padding-top: 1px;
+		display: none;
+	}
+	
+	/* Custom segment indicator checkbox 11. Inactive/not checked. */
+	.checkmark11:before {
+		content: "11";
+		color: black;
+		position: absolute;
+		padding-left: 3px;
+		padding-top: 1px;
+		display: none;
+	}
+	
+	/* Custom segment indicator checkbox 12. Active/checked. */
+	.checkmark12:after {
+		content: "12";
+		color: white;
+		position: absolute;
+		padding-left: 2px;
+		padding-top: 1px;
+		display: none;
+	}
+	
+	/* Custom segment indicator checkbox 12. Inactive/not checked. */
+	.checkmark12:before {
+		content: "12";
+		color: black;
+		position: absolute;
+		padding-left: 2px;
+		padding-top: 1px;
+		display: none;
+	}
+	
+	/* Show the checkmark when checked */
+	.container-speed-indicator input:checked ~ .checkmark01:after,
+	.container-speed-indicator input:checked ~ .checkmark02:after,
+	.container-speed-indicator input:checked ~ .checkmark03:after,
+	.container-speed-indicator input:checked ~ .checkmark04:after,
+	.container-speed-indicator input:checked ~ .checkmark05:after,
+	.container-speed-indicator input:checked ~ .checkmark06:after,
+	.container-speed-indicator input:checked ~ .checkmark07:after,
+	.container-speed-indicator input:checked ~ .checkmark08:after,
+	.container-speed-indicator input:checked ~ .checkmark09:after,
+	.container-speed-indicator input:checked ~ .checkmark10:after,
+	.container-speed-indicator input:checked ~ .checkmark11:after,
+	.container-speed-indicator input:checked ~ .checkmark12:after {
+		display: block;
+	}
+	
+	/* Show the checkmark when checked */
+	.container-speed-indicator input:not(:checked) ~ .checkmark01:before,
+	.container-speed-indicator input:not(:checked) ~ .checkmark02:before,
+	.container-speed-indicator input:not(:checked) ~ .checkmark03:before,
+	.container-speed-indicator input:not(:checked) ~ .checkmark04:before,
+	.container-speed-indicator input:not(:checked) ~ .checkmark05:before,
+	.container-speed-indicator input:not(:checked) ~ .checkmark06:before,
+	.container-speed-indicator input:not(:checked) ~ .checkmark07:before,
+	.container-speed-indicator input:not(:checked) ~ .checkmark08:before,
+	.container-speed-indicator input:not(:checked) ~ .checkmark09:before,
+	.container-speed-indicator input:not(:checked) ~ .checkmark10:before,
+	.container-speed-indicator input:not(:checked) ~ .checkmark11:before,
+	.container-speed-indicator input:not(:checked) ~ .checkmark12:before {
+		display: block;
+	}
+	
+	/* --------------------------------------------------- */
+	/* Talents, Perks, and Complications                   */
+	/* --------------------------------------------------- */
+	.grid-container-complications-talents {
+		display: grid;
+		grid-gap: 4px;
+		grid-template-areas: 
+		"theTalentsAndPerks theComplications"
+		"theNotes theNotes";
+		grid-template-columns: 338px 338px;
+		grid-template-rows: 642px 160px;
+		max-width: 685px;
+		padding: 0px;
+		font-size: 16px;
+		background-color: dodgerblue;
+		justify-content: middle;
+		padding-bottom: 0px;
+		margin-bottom: 1px;
+	}
+	
+	.grid-container-complications-talents h2 {
+		font-size: 18px;
+		line-height: 1.3;
+		text-align: center;
+		font-weight: normal;
+	}
+	
+	/* Complications and Talents Tab: Talents and Perks */
+	.flex-container-complications-talents-left {
+		grid-area: theTalentsAndPerks;
+		display: flex;
+		justify-content: space-between;
+		flex-direction: column;
+		border: 3px solid #fff990;
+		border-radius: 5px;
+		max-width: 333px;
+		background: gold;
+		height: 630px;
+		padding: 5px;
+		padding-bottom: 0px;
+		margin-bottom: 0px;
+	}
+	
+	.item-talent-heading {
+		display: flex;
+		flex-wrap: nowrap;
+		justify-content: space-between;
+		align-items: center;
+		flex-direction: row;
+		margin-bottom: 0px;
+		padding: 0px;
+		max-width: 333px;
+	}
+	
+	.item-talent-heading input[type=text] {
+		max-width: 200px;
+		padding: 1px;
+		padding-left: 3px;
+		margin: 0px;
+		margin-right: 0px;
+		margin-left: 2px;
+		text-align: left;
+		font-size: 13px;
+		font-weight: bold;
+		border: solid 1px darkgray;
+	}
+	
+	.item-talent-heading input[type=number] {
+		max-width: 45px;
+		padding: 2px;
+		margin: 0px;
+		padding-right: 0px;
+		text-align: right;
+		border: solid 1px darkgray;
+	}
+	
+	.item-talent-heading h1 {
+		font-size: 12px;
+		line-height: 1.1;
+		padding-right: 2px;
+		padding-left: 6px;
+	}
+	
+	.item-talent-textbox textarea {
+		max-width: 314px;
+		max-height: 36px;
+		padding: 3px;
+		border: solid 1px darkgray;
+		margin-bottom: 6px;
+	}
+	
+	
+	/* Complications and Talents Tab: Complications */
+	.flex-container-complications-talents-right {
+		grid-area: theComplications;
+		display: flex;
+		justify-content: space-between;
+		flex-direction: column;
+		border: 3px solid lightcyan;
+		border-radius: 5px;
+		max-width: 333px;
+		background: lightblue;
+		height: 630px;
+		padding: 5px;
+		padding-bottom: 0px;
+		margin-bottom: 0px;
+	}
+	
+	.item-complication-heading {
+		display: flex;
+		flex-wrap: nowrap;
+		justify-content: space-between;
+		align-items: center;
+		flex-direction: row;
+		margin-bottom: 0px;
+		padding: 0px;
+		max-width: 333px;
+	}
+	
+	.item-complication-heading input[type=text] {
+		max-width: 210px;
+		padding: 1px;
+		padding-left: 3px;
+		margin: 0px;
+		margin-right: 0px;
+		margin-left: 2px;
+		text-align: left;
+		font-size: 13px;
+		font-weight: bold;
+		border: solid 1px darkgray;
+	}
+	
+	.item-complication-heading input[type=number] {
+		max-width: 45px;
+		padding: 2px;
+		margin: 0px;
+		padding-right: 0px;
+		text-align: right;
+		border: solid 1px darkgray;
+	}
+	
+	.item-complication-heading h1 {
+		font-size: 12px;
+		line-height: 1.1;
+		padding-right: 2px;
+		padding-left: 6px;
+	}
+	
+	.item-complication-textbox textarea {
+		max-width: 314px;
+		max-height: 54px;
+		padding: 3px;
+		border: solid 1px darkgray;
+		margin-bottom: 6px;
+	}
+	
+	/* Complications Tab: Notes Text Panel */
+	
+	.flex-container-complications-bottom {
+		grid-area: theNotes;
+		display: flex;
+		flex-direction: row;
+		flex-wrap: nowrap;
+		justify-content: space-between;
+		border: 3px solid lightgray;
+		border-radius: 5px;
+		max-width: 674px;
+		padding: 5px;
+		margin: 0px;
+		height: 145px;
+		background: white;
+	}
+	
+	.flex-container-complications-bottom textarea {
+		width: 322px;
+		max-height: 143px;
+		padding: 0px;
+		margin: 0px;
+		border: transparent;
+	}
+	
+	/* ----------------------------------------------------- */
+	/* Powers                                                */
+	/* Organized in two columns with different color styles. */
+	/* ----------------------------------------------------- */
+	.grid-container-powers {
+		display: grid;
+		grid-gap: 5px 5px;
+		grid-template-areas: 
+		"leftPowers powerHealth"
+		"leftPowers rightPowers";
+		grid-template-columns: 338px 336px;
+		grid-template-rows: 74px 727px;
+		max-width: 686px;
+		min-width: 676px;
+		padding: 0px;
+		font-size: 16px;
+		background-color: dodgerblue;
+		justify-content: middle;
+		padding-bottom: 0px;
+		margin-bottom: 1px;
+	}
+	
+	.grid-container-powers h1 {
+		display:inline-block;
+		margin-left: 0px;
+		padding-left: 2px;
+		padding-right: 0px;
+		padding-top: 0px;
+		padding-bottom: 0px;
+		margin: 0px;
+		margin-top: 1px;
+		font-size: 13px;
+		font-style: normal;
+		line-height: 1.35;
+	}
+	
+	.grid-container-powers input[type=number] {
+		padding-right: 0px;
+		padding-top: 2px;
+		width: 30px;
+		margin: 0px;
+		text-align: right;
+		height: 21px;
+		padding: 1px;
+	}
+	
+	.flex-container-powers-right,
+	.flex-container-powers-left {
+		display: flex;
+		justify-content: space-between;
+		flex-direction: column;
+		border-radius: 5px;
+		max-width: 333px;
+		padding-left: 4px;
+		padding-right: 4px;
+		margin: 0px;
+	}
+	
+	.flex-container-powers-left,
+	.flex-container-powers-right {
+		padding-top: 3px;
+		padding-bottom: 3px;
+	}
+	
+	.flex-container-powers-left {
+		height: 795px;
+	}
+	
+	.flex-container-powers-right {
+		height: 716px;
+	}
+	
+	.flex-container-powers-left textarea,
+	.flex-container-powers-right textarea {
+		color: gray; 
+		height: 54px;
+		padding: 3px;
+		margin: 0px;
+		margin-top: 1px;
+		font-size: 8;
+	}
+	
+	.flex-container-powers-left textarea {
+		max-width: 316px;
+	}
+	
+	.flex-container-powers-right textarea {
+		border: solid 1px goldenrod;
+		max-width: 315px;
+	}
+	
+	/* Power subitems. */
+	
+	.item-flex-power {
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		margin-top: 2px;
+		padding-bottom: 3px;
+	}
+	
+	.subitem-flex-power-heading-left,
+	.subitem-flex-power-heading-right,
+	.subitem-flex-power-effect-left,
+	.subitem-flex-power-effect-right {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		margin-top: 1px;
+		margin-bottom: 0px;
+		align-items: center;
+		max-height: 23px;
+	}
+	
+	.subitem-flex-power-heading-left input[type=text],
+	.subitem-flex-power-heading-right input[type=text],
+	.subitem-flex-power-effect-left input[type=text],
+	.subitem-flex-power-effect-right input[type=text] {
+		min-height: 22px;
+		text-align: left;
+		padding-left: 2px;
+		margin-right: 0px;
+	}
+	
+	.subitem-flex-power-heading-left input[type=text]:nth-child(2),
+	.subitem-flex-power-heading-right input[type=text]:nth-child(2) {
+		font-weight: bold;
+		max-width: 130px;
+		margin-left: 1px;
+	}
+	
+	.subitem-flex-power-heading-left input[type=text]:nth-child(4),
+	.subitem-flex-power-heading-right input[type=text]:nth-child(4) {
+		font-weight: bold;
+		text-align: center;
+	}
+	
+	.subitem-flex-power-heading-left select,
+	.subitem-flex-power-heading-right select {
+		font-size: 13px;
+		height: 19px;
+		width: 98px;
+		margin: 0px;
+		padding-left: 3px;
+	}
+	
+	/* Effect */
+	.subitem-flex-power-effect-left input[type=text]:nth-child(2),
+	.subitem-flex-power-effect-right input[type=text]:nth-child(2){
+		max-width: 130px;
+		max-height: 23px;
+	}
+	
+	/* Dice */
+	.subitem-flex-power-effect-left input[type=text]:nth-child(3),
+	.subitem-flex-power-effect-right input[type=text]:nth-child(3) {
+		max-width: 58px;
+		text-align: center;
+		margin-left: 2px;
+		margin-right: 0px;
+		padding-left: 0px;
+		padding-right: 0px;
+	}
+	
+	/* Roll chance */
+	.subitem-flex-power-effect-left input[type=number]:nth-child(5), 
+	.subitem-flex-power-effect-right input[type=number]:nth-child(5) {
+		max-width: 41px;
+		min-width: 41px;
+		text-align: right;
+		margin-left: 1px;
+		margin-right: 2px;
+	}
+	
+	.subitem-flex-power-activeCost input[type=number]:nth-child(2), /* Advantages */
+	.subitem-flex-power-activeCost input[type=number]:nth-child(4) /* Limitations */ {
+		border: solid 1px gray;
+		min-width: 55px;
+	}
+	
+	/* Powers Tab: Left Powers and general to right. */
+	.flex-container-powers-left {
+		grid-area: leftPowers;
+		border: 3px solid lightcyan;
+		background: lightblue;
+	}
+	
+	.flex-container-powers-left textarea {
+		border: solid 1px black;
+	}
+	
+	.flex-container-powers-left input[readonly]{
+		background: lightcyan;
+		border: solid 1px #89abb9;
+		line-height: 1.0;
+	}
+	
+	.flex-container-powers-left textarea{
+		border: 1px solid #89ABB9;
+	}
+	
+	.subitem-flex-power-heading-left input[type=text]{
+		border: solid 1px #89ABB9;
+		max-width: 28px;
+	}
+	
+	.subitem-flex-power-effect-left input[type=text],
+	.subitem-flex-power-effect-left input[type=number]{
+		border: solid 1px #89ABB9;
+	}
+	
+	.subitem-flex-power-points-block-left,
+	.subitem-flex-power-points-block-right {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		align-items: center;
+		max-height: 23px;
+		margin-bottom: 2px;
+	}
+	
+	.subitem-flex-power-points-block-left input[type=number] {
+		/* Active, Real Cost */
+		border: solid 1px #89ABB9;
+	}
+	
+	.subitem-flex-power-points-block-left input[readonly] {
+		/* Active, Real Cost */
+		max-width: 38px;
+		text-align: center;
+		padding: 0px;
+	}
+	
+	.subitem-flex-power-limitations-left,
+	.subitem-flex-power-limitations-right {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		max-width: 333px;
+		margin-bottom: 2px;
+		max-height: 23px;
+	}
+	
+	.subitem-flex-power-limitations-left input[type=number]{
+		/* Advantages, limitations */
+		border: solid 1px #89ABB9;
+		min-width: 50px;
+	}
+	
+	.subitem-flex-power-limitations-left select,
+	.subitem-flex-power-limitations-right select {
+		font-size: 13px;
+		height: 19px;
+		max-width: 115px;
+		margin: 0px;
+		align-items: center;
+		padding-left: 3px;
+	}
+
+	
+	/* Powers Tab: Right Powers */
+	.flex-container-powers-right {
+		grid-area: rightPowers;
+		border: 3px solid #fff990;
+		background: gold;
+	}
+	
+	.flex-container-powers-right textarea {
+		border: solid 1px black;
+	}
+	
+	.flex-container-powers-right input[readonly]{
+		background: #fff990;
+		border: solid 1px goldenrod;
+		line-height: 1.0;
+	}
+	
+	.flex-container-powers-right textarea{
+		border: 1px solid goldenrod;
+	}
+	
+	.subitem-flex-power-heading-right input[type=text] {
+		max-width: 28px;
+		border: solid 1px goldenrod;
+	}
+	
+	.subitem-flex-power-effect-right input[type=text],
+	.subitem-flex-power-effect-right input[type=number]{
+		border: solid 1px goldenrod;
+	}
+	
+	.subitem-flex-power-points-block-right input[type=number] {
+		/* Active, Real Cost */
+		border: solid 1px goldenrod;
+	}
+	
+	.subitem-flex-power-points-block-right input[readonly] {
+		/* Active, Real Cost */
+		max-width: 38px;
+		text-align: center;
+	}
+	
+	.subitem-flex-power-limitations-right input[type=number]{
+		/* Advantages, limitations */
+		border: solid 1px goldenrod;
+		min-width: 50px;
+	}
+	
+	
+	/* Buttons for power, talent, and complication movers. */
+	.power-mover-plus-minus-enclosure,
+	.talent-mover-plus-minus-enclosure,
+	.complication-mover-plus-minus-enclosure {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+	}
+	
+	.power-mover-plus-minus-button,
+	.talent-mover-plus-minus-button,
+	.complication-mover-plus-minus-button {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		height: 24px;
+		width: 10px;
+		align-items: center;
+		padding: 0px;
+		margin-right: 2px;
+		margin-left:3px;
+	}
+	
+	.power-mover-plus-minus-button button.buttonPlus,
+	.power-mover-plus-minus-button button.buttonMinus,
+	.talent-mover-plus-minus-button button.buttonPlus,
+	.talent-mover-plus-minus-button button.buttonMinus,
+	.complication-mover-plus-minus-button button.buttonPlus,
+	.complication-mover-plus-minus-button button.buttonMinus {
+		background-color: LemonChiffon;
+		border: solid 1px silver;
+		color: slategray;
+		padding-left: 4px;
+		padding-right: 4px;
+		padding-top: 1px;
+		padding-bottom: 1px;
+		display: inline-block;
+		font-size: 10px;
+		margin: 0px 0px;
+		line-height: 1.25ch;
+		border-radius: 0px;
+		max-width: 10px;
+	}
+	
+	.power-mover-plus-minus-button button.buttonPlus span,
+	.power-mover-plus-minus-button button.buttonMinus span,
+	.talent-mover-plus-minus-button button.buttonPlus span,
+	.talent-mover-plus-minus-button button.buttonMinus span,
+	.complication-mover-plus-minus-button button.buttonPlus span,
+	.complication-mover-plus-minus-button button.buttonMinus span {
+		display: inline-block;
+		transform: rotate(-90deg);
+		text-align: center;
+	}
+	
+	.power-mover-plus-minus-button button.buttonPlus:hover,
+	.power-mover-plus-minus-button button.buttonMinus:hover,
+	.talent-mover-plus-minus-button button.buttonPlus:hover,
+	.talent-mover-plus-minus-button button.buttonMinus:hover,
+	.complication-mover-plus-minus-button button.buttonPlus:hover,
+	.complication-mover-plus-minus-button button.buttonMinus:hover {
+		background-color: gray;
+		color: white;
+		transition: 0.05s;
 	} 
 	
-}
-
-/* --------------------------------------------------- */
-/* General Styling                                     */
-/* --------------------------------------------------- */
-
-textarea {
-	font-size: 14px;
-	resize: none;
-}
-
-input {
-	font-size: 13px;
-	border: hidden;
-	border-radius: 3px;
-	padding: 0px;
-	text-align: center;
-}
-
-input[type=number]:focus {
-	outline: none;
-}
-
-input[type=text]:focus,
-	textarea:focus,
-	button:focus {
-}
-
-input.customCheckbox {
-	width: 20px;
-	height: 20px;
-	vertical-align: middle;
-}
-
-
-/* --------------------------------------------------------------- */
-/* Custom select used due to differences between Firefox,          */
-/* Chrome, and Safari. From:                                       */
-/* @link https://moderncss.dev/custom-select-styles-with-pure-css/ */
-/* --------------------------------------------------------------- */
-
-
-select,
-select::before,
-select::after {
-  box-sizing: border-box;
-}
 	
-select {
-	-webkit-appearance: none;
-	 -moz-appearance: none;
-		  appearance: none;
-	background-color: transparent;
-	border: none;
-	padding: 0 1em 0 0;
-	margin: 0;
-	width: 100%;
-	font-family: inherit;
-	// font-size: inherit;
-	font-size: 12px;
-	cursor: inherit;
-	line-height: inherit;
-	z-index: 1;
-	outline: none;
-	max-height: 22px;
-}
-
-.custom-select,
-.custom-select-skill,
-.custom-select-alternate,
-.custom-select-alternate-skill {
-	display: grid;
-	grid-template-areas: "select";
-	align-items: center;
-	position: relative;
-	min-width: 34px;
-	max-height: 20px;
-	border: 1px solid gray;
-	border-radius: 3px;
-	padding: 0px;
-	padding-bottom: 1px;
-	padding-left: 0px;
-	padding-right: 3px;
-	cursor: pointer;
-	background-color: #fff;
-	background-image: linear-gradient(to top, #f9f9f9, #fff 33%);
-}
-
-.custom-select-skill,
-.custom-select-alternate-skill {
-	margin-top: 2px;
-	margin-bottom: 1px;
-	max-height: 20px;
-}
-
-.custom-select select,
-.custom-select-skill select,
-.custom-select-alternate select,
-.custom-select-alternate-skill select,
-.custom-select::after,
-.custom-select-skill::after,
-.custom-select-alternate::after,
-.custom-select-alternate-skill::after {
-	grid-area: select;
-}
-
-.custom-select::after,
-.custom-select-skill::after,
-.custom-select-alternate::after,
-.custom-select-alternate-skill::after {
-	content: "";
-	justify-self: end;
-	width: 12px;
-	height: 8px;
-	-webkit-clip-path: polygon(100% 0%, 0 0%, 50% 100%);
-		  clip-path: polygon(100% 0%, 0 0%, 50% 100%);
-}
-
-.custom-select::after,
-.custom-select-skill::after {
-	background-color: olive;
-}
-
-.custom-select-alternate::after,
-.custom-select-alternate-skill::after {
-	background-color: salmon;
-}
-
-select:focus + .focus {
-	position: absolute;
-	top: -1px;
-	left: -1px;
-	right: -1px;
-	bottom: -1px;
-	border: 2px solid goldenrod;
-	border-radius: inherit;
-}
-
-.custom-select--disabled,
-.custom-select-skill--disabled,
-.custom-select-alternate--disabled,
-.custom-select-alternate-skill--disabled {
-	cursor: not-allowed;
-	background-color: #eee;
-	background-image: linear-gradient(to top, #ddd, #eee 33%);
-}
-
-.custom-select-skill,
-.custom-select-alternate-skill {
-	width: 64px;
-}
-
-/* --------------------------------------------------- */
-/* Tab Styling                                         */
-/* --------------------------------------------------- */
-.tab {
-	display: flex;
-	justify-content: space-between;
-	height:36px;
-	padding: 0px;
-	widows: 100%;
-	margin-bottom: 0px;
-	margin-left: 0px;
-	margin-right: 0px;
-	width: 680px;
-	background: dodgerblue;
-	border: 8px;
-	border-bottom: 0px;
-	border-radius: 4px;
-	border-bottom-left-radius: 0px;
-	border-bottom-right-radius: 0px;
-	border-color: dodgerblue;
-	border-style: solid;
-}
-
-/* Style the buttons inside the tab */
-.tab button {
-  background-color: #CCCCFF;
-  float: left;
-  outline: none;
-  cursor: pointer;
-  padding: 10px 10px;
-  margin-right: 0px;
-  transition: 0.3s;
-  font-size: 18px;
-  border: 0px;
-}
-
-/* Change background color of buttons on hover */
-.tab button:hover {
-  background-color: yellow;
-}
-
-/* Create an active/current tab class */
-.tab button.active {
-  background-color: yellow;
-}
-
-/* --------------------------------------------------- */
-/* Configure sheet and tab buttons                     */
-/* --------------------------------------------------- */
-.sheet-characteristics,
-.sheet-skills,
-.sheet-powers,
-.sheet-complications,
-.sheet-gear,
-.sheet-options {
-	display: none;
-	width: 680px;
-	background: dodgerblue;
-	border: 8px;
-	border-color: dodgerblue;
-	border-style: solid;
-}
-
-/* show the selected tab */
-.sheet-tabstoggle[value="characteristics"] ~ div.sheet-characteristics,
-.sheet-tabstoggle[value="skills"] ~ div.sheet-skills,
-.sheet-tabstoggle[value="powers"] ~ div.sheet-powers,
-.sheet-tabstoggle[value="complications"] ~ div.sheet-complications,
-.sheet-tabstoggle[value="gear"] ~ div.sheet-gear,
-.sheet-tabstoggle[value="options"] ~ div.sheet-options {
-	display: block;
-}
-
-/* Styling for characteristics tab labels */
-.sheet-characteristics label {
-	display:inline-block;
-	font-size: 13px;
-}
-
-/* --------------------------------------------------- */
-/* Tally Bar styling                                   */
-/* --------------------------------------------------- */
-
-.sheet-tallybar {
-	width: 680px;
-	background: dodgerblue;
-	border: 8px;
-	border-top: 0px;
-	border-radius: 4px;
-	border-top-left-radius: 0px;
-	border-top-right-radius: 0px;
-	border-color: dodgerblue;
-	border-style: solid;
-}
-
-.sheet-flex-tallybar {
-	display: flex;
-	flex-direction: row;
-	flex-wrap: wrap;
-	align-items: center;
-	justify-content: space-evenly;
-	width: 668px;
-	height: 36px;
-	border: 3px solid #fff990;
-	border-radius: 5px;
-	background: royalblue;
-	margin: 0px;
-	padding-left: 3px;
-	padding-right: 3px;
-}
-
-.sheet-flex-tallybar span {
-	color: white;
-}
-
-.sheet-flex-tallybar span:nth-child(1) {
-	color: white;
-
-}
-
-.sheet-flex-tallybar input[type=number] {
-	min-width: 52px;
-	text-align: right;
-	padding-right: 0px;
-}
-
-.sheet-flex-tallybar input[type=number]:hover,
-.sheet-flex-tallybar input[type=number]:focus {
-	padding-right: 0px;  // Keeps some numbers from shifting during mouse hover and click. Both webkit and moz. For some reason.
-}
-
-.sheet-flex-tallybar input[readonly]{
-	background: #fff990;
-	padding-right: 0px;
-	min-width: 36px;
-	max-width: 40px;
-	text-align: center;
-}
-
-/* --------------------------------------------------- */
-/* Characteristics Tab styling                         */
-/* --------------------------------------------------- */
-
-.grid-container-tab-characteristics {
-	display: grid;
-	grid-template-areas: "leftGrid rightGrid";
-	grid-template-columns: 335px 335px;
-	max-width: 674px;
-	height: 801px;
-	font-size: 16px;
-	grid-gap: 5px;
-	background-color: royalblue;
-	border: 3px solid #fff990;
-	border-radius: 5px;
-	margin-bottom: 0px;
-}
-
-.grid-container-tab-characteristics input[readonly]{
-	background: #fff990;
-}
-
-/* characteristics tab left side */
-
-.grid-container-characteristics-leftGrid {
-	grid-area: leftGrid;
-	display: grid;
-	grid-template-areas:
-	"logo"
-	"bio"
-	"earnings"
-	"primaryAbilities"
-	"combatAbilities"
-	"movementAbilities";
-	grid-template-columns: 329px;
-	grid-gap: 0px;
-	background: royalblue;
-	margin-bottom: 5px;
-}
-
-.grid-container-characteristics-leftGrid  h1 {
-	padding-left: 0px;
-	padding-top: 5px;
-	padding-bottom: 0px;
-	margin: 0px;
-	font-size: 13px;
-	font-style: normal;
-	line-height: 1.40;
-	min-width: 54px;
-}
-
-.grid-container-characteristics-leftGrid  h2 {
-	height: 20px;
-	line-height: 1.6;
-	margin-left: 5px;
-	margin-bottom: 0px;
-	margin-top: 2px;
-	font-size: 13px;
-	font-style: normal;
-}
-
-/* Item: logo graphic bio0 */
-
-.item-characteristics-logo {
-	grid-area: logo;
-	padding: 2px;
-	background-color: royalblue;
-	margin-bottom: 4px;
-}
-
-/* Item: character bio bio1*/
-
-.item-characteristics-bio {	
-	max-width: 330px;
-	grid-area: bio;
-	display: grid;
-	grid-template-areas:
-	"nameLabel nameText nameText nameText"
-	"titleLabel titleText titleText titleText"
-	"backgroundLabel backgroundText backgroundText backgroundText";
-	grid-template-columns: 85px 105px 57px 73px;
-	grid-template-rows: 30px 30px 48px;
-	margin-left: 6px;
-	margin-bottom: 0px;
-	padding: 5px;
-	padding-bottom: 0px;
-	background-color: gold;
-	border-top: solid 1px goldenrod;
-	border-right: solid 1px goldenrod;
-	border-left: solid 1px goldenrod;
-	border-top-left-radius: 3px;
-	border-top-right-radius: 3px;
-	vertical-align: top;
-}
-
-.item-characteristics-bio input[type=text] {
-	text-align:left;
-	width: 222px;
-	padding: 2px;
-	padding-left: 4px;
-	margin-left: 5px;
-	border: solid 1px goldenrod;
-	font-size: 13;
-	font-weight: bold;
-}
-
-.item-characteristics-bio textarea {
-	width: 214px;
-	max-height: 36px;
-	padding: 2px;
-	padding-left: 4px;
-	margin-left: 5px;
-	border: solid 1px black;
-	text-align: left;
-	border: solid 1px goldenrod;
-}
-
-/* Subitem: Character Name Label */
-.item-characteristics-bio-nameLabel {
-	grid-area: nameLabel;
-	background: gold;
-}
-
-/* Subitem: Character Name Text */
-.item-characteristics-bio-name {
-	grid-area: nameText;
-}
-
-/* Subitem: Character Title Label */
-.item-characteristics-bio-titleLabel {
-	grid-area: titleLabel;
-	background: gold;
-}
-
-/* Subitem: Character Title Text */
-.item-characteristics-bio-titleText {
-	grid-area: titleText;
-}
-
-/* Subitem: Character background label */
-.item-characteristics-bio-backgroundLabel {
-	grid-area: backgroundLabel;
-	background: gold;
-}
-
-/* Subitem: Character background text */
-.item-characteristics-bio-backgroundText {
-	grid-area: backgroundText;
-}
-
-/* Item: character bio experience and money*/
-
-.item-characteristics-earnings {	
-	max-width: 330px;
-	grid-area: earnings;
-	display: grid;
-	grid-template-areas:
-	"experienceLabel experience moneyLabel money";
-	grid-template-columns: 90px 57px 95px 83px;
-	grid-template-rows: 23px;
-	margin-left: 6px;
-	margin-bottom: 6px;
-	padding-top: 0px;
-	padding-bottom: 0px;
-	padding: 5px;
-	padding-bottom: 0px;
-	background-color: #fff990;
-	border-left: solid 1px goldenrod;
-	border-right: solid 1px goldenrod;
-	border-bottom: solid 1px goldenrod;
-	border-bottom-left-radius: 3px;
-	border-bottom-right-radius: 3px;
-	vertical-align: top;
-}
-
-.item-characteristics-earnings h1 {
-	margin-bottom: 10px;
-	padding-left: 3px;
-	padding-top: 4px;
-	line-height: 1.3;
-}
-
-.item-characteristics-earnings-experience input {
-	min-width: 54px;
-	padding-right: 0px;
-	padding-top: 0px;
-}
-
-.item-characteristics-earnings input[type=number] {
-	text-align: right;
-	padding-right: 0px;
-	border: solid 1px palegoldenrod;
-	padding-top: 0px;
-	margin-bottom: 5px;
-}
-
-.item-characteristics-earnings input[type=text] {
-	font-size: 13px;
-	max-width: 90px;
-	text-align: right;
-	background-color: #fff990;
-	font-weight: bold;
-	margin-top: 0px;
-	margin-bottom: 1px;
-	color: black;
-}
-
-/* Subitem: Character Experience */
-.item-characteristics-earnings-experienceLabel {
-	grid-area: experienceLabel;
-}
-
-/* Subitem: Character Experience */
-.item-characteristics-earnings-experience {
-	grid-area: experience;
-}
-
-/* Subitem: Character Money */
-.item-characteristics-earnings-moneyLabel {
-	grid-area: moneyLabel;
-}
-
-/* Subitem: Character Money */
-.item-characteristics-earnings-money {
-	grid-area: money;
-}
-
-.item-characteristics-earnings-money input[type=number] {
-	min-width: 70px;
-	margin-bottom: 5px;
-}
-
-/* Item: core abilities */
-.item-characteristics-primary-attributes {
-	grid-area: primaryAbilities;
-	display: grid;
-	grid-template-areas:
-	"primaryAbilityNames primaryAbilityValues primaryAbilityChances primaryAbilityButtons primaryAbilityCosts";
-	grid-template-columns: 126px 49px 50px 45px 45px;
-	min-width: 300px;
-	vertical-align: middle;
-	margin-left: 6px;
-	background-color: #fff990; 
-	border-top: solid 1px goldenrod;
-	border-left: solid 1px goldenrod;
-	border-right: solid 1px goldenrod;
-	border-bottom: 0px;
-	border-top-left-radius: 3px;
-	border-top-right-radius: 3px;
-	padding-bottom: 2px;
-}
-
-.item-characteristics-primary-attributes h1 {
-	background: gold;
-	padding-left: 5px;
-	padding-right: 6px;
-	padding-top: 2px;
-	padding-bottom: 2px;
-	margin: 0px;
-	margin-top: 0px;
-	font-size: 13px;
-	font-style: normal;
-	line-height: 1.35;
-}
-
-.item-characteristics-primary-attributes h2 {
-	margin-left: 8px;
-}
-
-.item-characteristics-primary-attributes input[type=number] {
-	text-align: right;
-	padding-right: 0px;
-	border: solid 1px palegoldenrod;	
-}
-
-.item-characteristics-primary-attributes input[readonly] {
-	text-align: center;
-	border: none;	
-	max-width: 45px;
-}
-
-/* Sub-Item: core abilities characteristics */
-.item-characteristics-primary-attributes-names {
-	grid-area: primaryAbilityNames;
-	display: flex;
-	flex-direction: column;
-	justify-content: space-between;
-	text-align: left;
-	min-height: 130px;
-	max-height: 160px;
-}
-
-/* Sub-Item: core abilities values */
-.item-characteristics-primary-attributes-values {
-	grid-area: primaryAbilityValues;
-	display: flex;
-	flex-direction: column;
-	justify-content: space-between;
-	text-align: left;
-	min-height: 130px;
-	max-height: 160px;
-	max-width: 55px;
-}
-
-/* Sub-Item: core abilities values */
-.item-characteristics-primary-attributes-rollChances {
-	grid-area: primaryAbilityChances;
-	display: flex;
-	flex-direction: column;
-	justify-content: space-between;
-	text-align: left;
-	min-height: 130px;
-	max-height: 160px;
-}
-
-.item-characteristics-primary-attributes-rollChances h1 {
-	margin-left: 6px;
-}
-
-/* Sub-Item: core abilities values */
-.item-characteristics-primary-attributes-rollButtons {
-	grid-area: primaryAbilityButtons;
-	display: flex;
-	flex-direction: column;
-	justify-content: space-between;
-	min-height: 130px;
-	max-height: 160px;
-}
-
-/* Sub-Item: core abilities values */
-.item-characteristics-primary-attributes-costs {
-	grid-area: primaryAbilityCosts;
-	text-align: center;
-	display: flex;
-	flex-direction: column;
-	justify-content: space-between;
-	min-height: 130px;
-	max-height: 160px;
-}
-
-.item-characteristics-primary-attributes-costs h1 {
-	margin-left: 8px;
-	text-align: left;
-	min-width: 32px;
-}
-
-/* Item: combat abilities */
-.item-characteristics-combat-attributes {
-	grid-area: combatAbilities;
-	display: grid;
-	grid-template-areas:
-	"combatAbilityNames combatAbilityValues . . combatAbilityCosts";
-	grid-template-columns: 126px 49px 50px 45px 45px;
-	min-width: 300px;
-	vertical-align: middle;
-	margin-left: 6px;
-	background-color: #fff990; 
-	border: solid 1px goldenrod;
-	border-right: solid 1px goldenrod;
-	border-left: solid 1px goldenrod;
-	border-bottom: none;
-	border-top: none;
-	padding-bottom: 2px;
-}
-
-.item-characteristics-combat-attributes input[type=number] {
-	text-align: right;
-	padding-right: 0px;
-	border: solid 1px palegoldenrod;
-}
-
-.item-characteristics-combat-attributes input[readonly] {
-	text-align: center;
-	padding-right: 2px;
-	border: none;
-	max-width: 45px;
-}
-
-.item-characteristics-combat-attributes h1 {
-	background: gold;
-	padding-left: 5px;
-	padding-right: 6px;
-	padding-top: 2px;
-	padding-bottom: 2px;
-	margin: 0px;
-	margin-top: 0px;
-	font-size: 13px;
-	font-style: normal;
-	line-height: 1.35;
-}
-
-.item-characteristics-combat-attributes h2 {
-	margin-left: 8px;
-}
-
-/* Sub-Item: combat abilities characteristics */
-.item-characteristics-combat-attributes-names {
-	display: flex;
-	flex-direction: column;
-	justify-content: space-between;
-	text-align: left;
-	grid-area: combatAbilityNames;
-	min-width: 120px;
-}
-
-/* Sub-Item: core abilities values */
-.item-characteristics-combat-attributes-values {
-	text-align: center;
-	grid-area: combatAbilityValues;
-	display: flex;
-	flex-direction: column;
-	justify-content: space-between;
-	min-width: 152px;
-	text-align: left;
-}
-
-/* Sub-Item: core abilities values */
-.item-characteristics-combat-attributes-costs {
-	grid-area: combatAbilityCosts;
-	text-align: right;
-	display: flex;
-	flex-direction: column;
-	justify-content: space-between;
-}
-
-.item-characteristics-combat-attributes-costs h1 {
-	margin-left: 8px;
-	text-align: left;
-	min-width: 32px;
-}
-
-/* Item: combat abilities */
-.item-characteristics-movement-abilities {
-	grid-area: movementAbilities;
-	display: grid;
-	grid-template-areas:
-	"movementNames movementValues . . movementCosts";
-	grid-template-columns: 126px 49px 50px 45px 45px;
-	background: purple;
-	min-width: 300px;
-	margin-left: 6px;
-	padding-bottom: 2px;
-	background-color: #fff990; 
-	border-right: solid 1px goldenrod;
-	border-left: solid 1px goldenrod;
-	border-bottom: solid 1px goldenrod;
-	border-top: none;
-	border-bottom-left-radius: 3px;
-	border-bottom-right-radius: 3px;
-}
-
-.item-characteristics-movement-abilities input[type=number] {
-	text-align: right;
-	padding-right: 0px;
-	border: solid 1px palegoldenrod;
-}
-
-.item-characteristics-movement-abilities input[readonly] {
-	text-align: center;
-	padding-right: 0px;
-	border: none; 
-	max-width: 45px;
-}
-
-.item-characteristics-movement-abilities h1 {
-	background: gold;
-	padding-left: 5px;
-	padding-right: 6px;
-	padding-top: 2px;
-	padding-bottom: 2px;
-	margin: 0px;
-	margin-top: 0px;
-	font-size: 13px;
-	font-style: normal;
-	line-height: 1.35;
-}
-
-.item-characteristics-movement-abilities h2 {
-	margin-left: 8px;
-}
-
-/* Sub-Item: combat abilities characteristics */
-.item-characteristics-movement-abilities-names {
-	grid-area: movementNames;
-	display: flex;
-	flex-direction: column;
-	justify-content: space-between;
-}
-
-/* Sub-Item: core abilities values */
-.item-characteristics-movement-abilities-values {
-	grid-area: movementValues;
-	display: flex;
-	flex-direction: column;
-	justify-content: space-between;
-}
-
-.item-characteristics-movement-abilities-values h1 {
-	min-width: 141px;
-}
-
-/* Sub-Item: core abilities costs */
-.item-characteristics-movement-abilities-costs {
-	grid-area: movementCosts;
-	display: flex;
-	flex-direction: column;
-	justify-content: space-between;
-}
-
-.item-characteristics-movement-abilities-costs h1 {
-	margin-left: 8px;
-	text-align: left;
-	min-width: 32px;
-}
-
-/* characteristics tab right side */
-
-.grid-container-characteristics-rightGrid {
-	grid-area: rightGrid;
-	display: grid;
-	grid-template-areas:
-	"portrait health"
-	"turnSegmentIndicators turnTracker"
-	"perception perception"
-	"history history";
-	grid-template-columns: 264px 68px;
-	grid-template-rows: 260px 22px 100px 419px;
-	background: royalblue;
-	max-height: 800px;
-	max-width: 300px;
-}
-
-
-/* Item: character portrait graphic */
-.item-characteristics-portrait {
-	grid-area: portrait;
-	position: relative;
-	width: 100%;
-	max-width: 250px;
-	padding: 0px;
-	height: 250px;
-	margin: 3px;
-	margin-left: 0px;
-	margin-top: 4px;
-	background-color: royalblue;
-}
-
-.item-characteristics-portrait textarea {
-	width: 242px;
-	margin-left: 5px;
-	margin-right: 5px;
-	margin-bottom: 4px;
-	background-color: lavender;
-	height: 242px;
-	font-size: 14px;
-}
-
-.item-characteristics-portrait img {
-	width: 100%;
-	height: auto;
-	margin-left: 7px;
-	border-right: solid gray 1px;
-	border-bottom: solid gray 1px;
-	border-left: solid darkgray 1px;
-	border-top: solid darkgray 1px;
-}
-
-.item-characteristics-portrait .button-left-arrow {
-	  position: absolute;
-	  top: 50%;
-	  left: 11%;
-	  transform: translate(-50%, -50%);
-	  color: transparent;
-	  background-color: transparent;
-	  font-size: 16px;
-	  padding: 12px 12px;
-	  border: none;
-	  cursor: pointer;
-	  border-radius: 5px;
-	  text-align: center;
-}
-
-.item-characteristics-portrait .button-right-arrow {
-	position: absolute;
-	  top: 50%;
-	  left: 95%;
-	  transform: translate(-50%, -50%);
-	  color: transparent;
-	  background-color: transparent;
-	  font-size: 16px;
-	  padding: 12px 12px;
-	  border: none;
-	  cursor: pointer;
-	  border-radius: 5px;
-	  text-align: center;
-}
-
-.item-characteristics-portrait .button-right-arrow:hover,
-.item-characteristics-portrait .button-left-arrow:hover {
-	background-color: gold;	
-}
-
-
-/* By deafult, hides all portrait images. Add more numbered entries to add more images, notes, or cards. */
-.item-portrait-00, 
-.item-portrait-01,
-.item-portrait-02 {
-	display: none;
-}
-
-/* show the selected portrait frame. Add more numbered entries to add more images, notes, or cards. */
-.item-portrait-slideshow[value="0"] ~ div.item-portrait-00,
-.item-portrait-slideshow[value="1"] ~ div.item-portrait-01,
-.item-portrait-slideshow[value="2"] ~ div.item-portrait-02 {
-	display: block;
-	position: relative;
-}
-
-/* Alternate styling for rule cards instead of portraits */
-.item-portrait-00 {
-	background-color: white;// #fff990;
-	border: solid 2px gray;
-	height: 250px;
-	margin-left: 12px;
-}
-
-.item-portrait-00 h1 {
-	font-size: 16px;
-	color: white;
-	text-align: center;
-	padding-left: 0px;
-	background-color: crimson;
-}
-
-.item-portrait-flex-container {
-	display: flex;
-	flex-direction: column;
-	justify-content: flex-start;
-	max-height: 240px;
-	padding: 0px;
-}
-
-.item-portrait-rule-description {
-	max-width: 240px;
-	margin: 0px;
-	padding: 0px;
-	line-height: 1.0;
-}
-
-.item-portrait-rule-description h1 {
-	font-size: 16px;
-	color: firebrick;
-	text-align: left;
-	padding-left: 4px;
-	background-color: inherit;
-	line-height: 1.4;
-	padding-bottom: 0px;
-}
-
-.item-portrait-rule-description p {
-	font-size: 13px;
-	padding: 4px;
-	margin: 0px;
-	text-align: left;
-	line-height: 1.2;
-}
-
-/* Item: health status                                     */
-/* Item: gear tab health status                            */
-/* Sheet worker used to synchronizes the contents of each  */
-
-.item-characteristics-health,
-.item-gear-health {
-	padding: 0px;
-	width: 68px;
-	background: royalblue;
-	border: white;
-	margin-top: 4px;
-	margin-right: 2px;
-	height: 250px;
-	align-items: center;
-	display: flex;
-	justify-content: space-between;
-	flex-direction: column;
-}
-
-.item-characteristics-health  {
-	grid-area: health;
-}
-
-.item-gear-health {
-	grid-area: gearHealth;
-}
-
-.item-gear-health h2,
-.item-characteristics-health h2 {
-	color: white;
-	background-color: inherit;
-	text-align: center;
-	font-size: 17px;
-	line-height: 1.0em;
-	margin-top: 0px;
-	margin-bottom: 0px;
-	padding: 0px;
-}
-
-.item-health-stat {
-	display: flex;
-	flex-direction: row;
-	justify-content: space-between;
-	width: 63px;
-	height: 30px;
-	background-color: gold;
-	border-radius: 3px;
-	align-items: center;
-	padding: 0px;
-	margin-right: 1px;
-	margin-bottom: 2px;
-	border: solid 1px darkgoldenrod;
-}
-
-.item-health-stat-plus-minus-enclosure {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	max-height: 20px;
-	width: 20px;
-	align-items: center;
-	padding: 1px;
-}
-
-.item-health-stat input[type=text] {
-	max-width: 45px;
-	height: 30px;
-	font-size: 20px;
-	background-color: gold;
-}
-
-.item-health-stat input[type=text]:focus{
-	outline: transparent;
-}
-
-.item-health-stat button.buttonPlus,
-.item-health-stat button.buttonMinus {
-	background-color: LemonChiffon;
-	border: solid 1px slategray;
-	color: slategray;
-	padding-left: 4px;
-	padding-right: 4px;
-	padding-top: 1px;
-	padding-bottom: 1px;
-	display: inline-block;
-	font-size: 16px;
-	margin: 0px 0px;
-	line-height: 1.4ch;
-	border-radius: 0px;
-}
-
-.item-health-stat button.buttonPlus span,
-.item-health-stat button.buttonMinus span {
-	display: inline-block;
-	transform: rotate(-90deg);
-	text-align: center;
-}
-
-.item-health-stat button.buttonPlus:hover,
-.item-health-stat button.buttonMinus:hover {
-	background-color: gray;
-	color: white;
-	transition: 0.05s;
-}
-
-/* Item: Turn Tracker Button Space */
-
-.item-characteristics-turn-tracker {
-	grid-area: turnTracker;
-	width: 68px;
-	height: 22px;
-	padding: 0px;
-	line-height: 20px;
-}
-
-/* Item: character history */
-.item-characteristics-history {
-	grid-area: history;
-	text-align: left;
-	padding: 2px;
-	max-width: 343px;
-	background-color: inherit;
-	margin-bottom: 1px;
-	margin-right: 6px;
-	max-height: 402px;
-	margin-bottom: 6px;
-}
-
-.item-characteristics-history textarea {
-	width: 316px;
-	height: 100%;
-}
-
-/* Item: Speed Phase Indicator Buttons */
-.item-characteristics-speedIndicatorButtons {
-	grid-area: speedIndicatorButtons;
-	padding-left: 2px;
-	padding-top: 1px;
-	padding-bottom: 1px;
-	background-color: royalblue;
-	width: 264px;
-	margin: 0px;
-}
-
-/* Item: Perception */
-.item-characteristics-perception {
-	grid-area: perception;
-	max-width: 323px;
-	background-color: inherit;
-	max-height: 95px;
-	margin-left: 3px;
-	border: transparent;
-	margin-top: 0px;
-}
-
-.item-characteristics-perception h1 {
-	font-size: 13px;
-	line-height: 1.6;
-	text-align: left;
-	background-color: royalblue;
-	color: white;
-}
-
-.item-characteristics-perception input[type=number] {
-	text-align: right;
-	padding-right: 0px;
-	border: solid 1px palegoldenrod;
-	margin: 0px;
-	margin-bottom: 3px;
-	background-color: white;
-	max-width: 40px;
-}
-
-.subitem-characteristics-perception-stat-container {
-	display: flex;
-	justify-content: space-between;
-	flex-direction: column;
-	background-color: inherit;
-	padding-left: 0px;
-	align-items: center;
-}
-
-.subitem-characteristics-perception-stat-container input[type=text] {
-	font-size: 13px;
-	max-width: 65px;
-	text-align: center;
-	background-color: royalblue;
-	color: white;
-	font-weight: bold;
-	margin-top: 2px;
-}
-
-.subitem-characteristics-perception-column-container {
-	display: flex;
-	justify-content: space-between;
-	flex-direction: column;
-	background-color: lightblue;
-	padding: 2px;
-	align-items: center;
-	border-radius: 5px;
-	border: solid lightcyan 2px;
-}
-
-.subitem-characteristics-perception-column-container input[type=text] {
-	font-size: 13px;
-	max-width: 32px;
-	line-height: 1.3;
-	text-align: center;
-	background-color: lightcyan;
-	padding: 0px;
-	color: black;
-	font-weight: normal;
-}
-
-.subitem-characteristics-perception-row-container {
-	display: flex;
-	justify-content: space-between;
-	flex-direction: row;
-	margin-top: 2px;
-}
-
-/* --------------------------------------------------- */
-/* Options Tab                                         */
-/* --------------------------------------------------- */
-
-.grid-container-tab-options {
-	display: grid;
-	grid-template-areas: ". . ." 
-		". options ."
-		". . .";
-	grid-template-columns: 110px 500px 100px;
-	grid-template-rows: 100px 185px 100px;
-	font-size: 16px;
-	background-color: royalblue;
-	border: 3px solid #fff990;
-	border-radius: 5px;
-	margin-bottom: 1px;
-	min-height: 800px;
-	min-width: 674px;
-}
-
-.grid-container-tab-options h1 {
-	font-size: 14px;
-	margin-left: 0px;
-	color: black;
-	padding-bottom: 5px;
-	font-weight: 500;
-}
-
-.grid-container-tab-options label {
-	max-width: 13px;
-	padding: 8px;
-}
-
-/* Sub-Item: options */
-.item-options {
-	grid-area: options;
-	display: flex;
-	flex-direction: column;
-	justify-content: flex-start;
-	padding-left: 2px;
-	padding-top: 2px;
-	padding-bottom: 2px;
-	background-color: #fff990;
-	margin: 5px;
-	width: 450px;
-	height: 213px;
-	margin: 0px;
-	border: solid 2px goldenrod;
-	border-radius: 3px;
-}
-
-.item-options-row {
-	display: flex;
-	flex-direction: row;
-	justify-content: flex-start;
-	align-items: baseline;
-	min-width: 400px;
-	max-height: 28px;
-	margin-left: 10px;
-}
-
-/* --------------------------------------------------- */
-/* Custom buttons                                      */
-/* --------------------------------------------------- */
-
-.button {
-	border: none;
-	color: white;
-	text-decoration: none;
-	display: inline-block;
-	cursor: pointer;
-	transition-duration: 0.2s;
-	text-align: center;
-}
-	
-.buttonRecover {
-	background-color: darkseagreen;
-	padding-top: 4px;
-	padding-bottom: 4px;
-	margin-left: 2px;
-	margin-right: 2px;
-	margin-top: 0px;
-	margin-bottom: 0px;
-	padding-left: 4px;
-	padding-right: 3.5px;
-	vertical-align: middle;
-	text-align: right;
-	font-size: 13px;
-	font-weight: bold;
-	border-radius: 3px;
-}
-
-.buttonReset {
-	background-color: orange;
-	padding-top: 4px;
-	padding-bottom: 4px;
-	margin-left: 2px;
-	margin-right: 2px;
-	margin-top: 0px;
-	margin-bottom: 0px;
-	padding-left: 12px;
-	padding-right: 12px;
-	vertical-align: middle;
-	text-align: center;
-	font-size: 13px;
-	font-weight: bold;
-	border-radius: 3px;
-}
-
-.buttonTracker {
-	background-color: dodgerblue;
-	padding-left: 3px;
-	padding-right: 3px;
-	padding-top: 2px;
-	padding-bottom: 2px;
-	font-weight: bold;
-}
-
-.button-Power-END-right,
-.button-Power-END-left {
-	padding-top: 2px;
-	padding-bottom: 2px;
-	padding-right: 2px;
-	padding-left: 2px;
-	min-height: 16px;
-	max-height: 16px;
-	text-align: middle;
-	font-weight: bold;
-	border-radius: 2.5px;
-}
-
-.button-Power-END-left {
-	background-color: olive;
-	margin-right: 0px;
-	min-width: 34px;
-	max-width: 35px;
-}
-
-.button-Power-END-right {
-	background-color: salmon;
-	margin-right: 0px;
-	min-width: 34px;
-	max-width: 35px;
-}
-
-.buttonRoll,
-.buttonRollAttack,
-.buttonRollActivate,
-.buttonRollNormalAttack,
-.buttonRollShieldAttack,
-.buttonRollShow,
-.buttonRollPower {
-	padding-left: 3px;
-	padding-right: 3px;
-	text-align: center;
-	line-height: 13px;
-	padding-top: 2px;
-	padding-bottom: 2px;
-	font-weight: bold;
-	max-height: 16px;
-	min-height: 15px;
-}
-
-.buttonRoll,
-.buttonRollAttack,
-.buttonRollActivate,
-.buttonRollNormalAttack,
-.buttonRollShieldAttack {
-	min-width: 25px;
-	max-width: 26px;
-}
-
-
-.buttonRollPower {
-	min-width: 32px;
-	max-width: 34px;
-}
-
-.button:hover,
-.buttonRecover:hover,
-.buttonReset:hover,
-.buttonRoll:hover,
-.buttonRollAttack:hover,
-.buttonRollActivate:hover,
-.buttonRollNormalAttack:hover,
-.buttonRollShieldAttack:hover,
-.buttonRollShow:hover,
-.buttonRollPower:hover {
-	color: black;
-	background-color: lightgray;
-	text-align: center;
-}
-
-.button-Power-END-left:hover,
-.button-Power-END-right:hover {
-	background-color: #ff9900;
-	color: black;
-}
-
-.buttonRoll {
-	background-color: orange;
-}
-
-.buttonRollAttack {
-	background-color: indianred;
-	border-radius: 2.5px;
-}
-
-.buttonRollActivate {
-	background-color: steelblue;
-}
-
-.buttonRollNormalAttack {
-	background-color: olivedrab;
-	border-radius: 2.5px;
-}
-
-.buttonRollShieldAttack  {
-	background-color: DarkGoldenrod;
-	border-radius: 2.5px;
-}
-
-.buttonRollShow {
-	background-color: lightslategray;
-	min-width: 36px;
-	max-width: 38px;
-}
-
-.buttonRollPower {
-	background-color: #9184E2; /* lighter than mediumslateblue */
-	border-radius: 2.5px;
-}
-
-/* The d6 of dicefontd6 doesn't look good. Let's hold off for a better idea or stick with the label 'Roll' on the buttons.
-
-.buttonRollNormalAttack::before {
-	font-family: 'dicefontd6';
-	font-size: 16px;
-	content: 'F';
-} */
-
-.portrait-display-button-left,
-.portrait-display-button-right {
-	background-color: orange;
-	padding-top: 4px;
-	padding-bottom: 4px;
-	margin: 4px 2px;
-	padding-left: 14px;
-	padding-right: 14px;
-	vertical-align: middle;
-	text-align: center;
-}
-
-.portrait-display-button-left:hover,
-.portrait-display-button-right:hover {
-	color: black;
-	background-color: limegreen;
-	text-align: center;
-}
-
-
-/* --------------------------------------------------- */
-/* Custom Checkbox used for options                    */
-/* From w3 schools                                     */
-/* --------------------------------------------------- */
-
-/* Customize the label (the container) */
-.container-checkbox {
-	display: inline-block;
-	position: relative;
-	padding-left: 25px;
-	padding-top: 2px;
-	//margin-bottom: 10px;
-	cursor: pointer;
-	max-width: 400px;
-	font-size: 12px;
-	-webkit-user-select: none;
-	-moz-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
-	border: transparent;
-}
-
-/* Hide the browser's default checkbox */
-.container-checkbox input,
-.container-checkbox-small input,
-.container-checkbox-small-gray input {
-	position: absolute;
-	opacity: 0;
-	cursor: pointer;
-	height: 0;
-	width: 0;
-}
-
-/* Create a custom checkbox */
-.checkmark {
-	position: absolute;
-	top: 0;
-	left: 0;
-	height: 20px;
-	width: 20px;
-	background-color: gold;
-}
-
-/* On mouse-over, add a grey background color */
-.container-checkbox:hover input ~ .checkmark,
-.container-checkbox-small:hover input ~ .checkmark-small {
-	background-color: goldenrod;
-	border: solid 1px darkgoldenrod;
-}
-
-.container-checkbox-small-gray:hover input ~ .checkmark-small-gray {
-	background-color: lightsteelblue;
-	border: solid 1px darkgray;
-}
-
-/* When the checkbox is checked, add a gold background */
-.container-checkbox input:checked ~ .checkmark,
-.container-checkbox-small input:checked ~ .checkmark-small {
-	background-color: gold;
-}
-
-.container-checkbox-small-gray input:checked ~ .checkmark-small-gray {
-	background-color: lightgray;
-}
-
-/* Create the checkmark/indicator (hidden when not checked) */
-.checkmark:after,
-.checkmark-small:after {
-	content: "";
-	position: absolute;
-	display: none;
-	border: solid 1px darkgoldenrod;
-}
-
-.checkmark-small-gray:after {
-	content: "";
-	position: absolute;
-	display: none;
-	border: solid 1px gray;
-}
-
-/* Show the checkmark when checked */
-.container-checkbox input:checked ~ .checkmark:after,
-.container-checkbox-small input:checked ~ .checkmark-small:after,
-.container-checkbox-small-gray input:checked ~ .checkmark-small-gray:after {
-	display: block;
-}
-
-/* Style the checkmark/indicator */
-.container-checkbox .checkmark:after {
-	left: 7px;
-	top: 2px;
-	width: 5px;
-	height: 10px;
-	border: solid black;
-	border-width: 0 3px 3px 0;
-	-webkit-transform: rotate(45deg);
-	-ms-transform: rotate(45deg);
-	transform: rotate(45deg);
-}
-
-/* --------------------------------------------------- */
-/* Custom Checkbox (small) used for skill enhancers    */
-/* From w3 schools                                     */
-/* --------------------------------------------------- */
-
-/* Customize the label (the container) */
-.container-checkbox-small,
-.container-checkbox-small-gray {
-	display: block;
-	position: relative;
-	padding-left: 20px;
-	padding-top: 0px;
-	cursor: pointer;
-	font-size: 12px;
-	max-width: 20px;
-	-webkit-user-select: none;
-	-moz-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
-}
-
-/* Create a custom checkbox */
-.checkmark-small {
-	position: absolute;
-	top: 0;
-	left: 0;
-	height: 15px;
-	width: 15px;
-	background-color: gold;
-}
-
-.checkmark-small-gray {
-	position: absolute;
-	top: 0;
-	left: 0;
-	height: 15px;
-	width: 15px;
-	background-color: lightgray;
-}
-
-/* Style the checkmark/indicator */
-.container-checkbox-small .checkmark-small:after,
-.container-checkbox-small-gray .checkmark-small-gray:after {
-	left: 4px;
-	top: 2px;
-	width: 4px;
-	height: 7px;
-	border: solid black;
-	border-width: 0 3px 3px 0;
-	-webkit-transform: rotate(45deg);
-	-ms-transform: rotate(45deg);
-	transform: rotate(45deg);
-}
-
-
-/* --------------------------------------------------- */
-/* Custom Checkboxes used for turn segment indicators  */
-/* Modification of custom checkbox above               */
-/* --------------------------------------------------- */
-
-.grid-container-container-turn-segments {
-	grid-area: turnSegmentIndicators;
-	display: inline-flex; /* or inline-flex */
-	flex-direction: row;
-	flex-wrap: nowrap;
-	align-items: top;
-	justify-content: space-evenly;
-	width: 264px;
-	height: 24px;
-	background: royalblue;
-	margin-top: 2px;
-	margin-left: 1px;
-	padding: 0px;
-}
-
-.grid-container-container-turn-segments label {
-	display: inline;
-	pointer-events: none;
-	font-style: normal;
-}
-
-/* Custom checkbox indicator */
-
-.container-speed-indicator {
-	display: inline-block;
-	position: relative;
-	padding-left: 5px;
-	margin-bottom: 0px;
-	cursor: pointer;
-	font-size: 20px;
-	-webkit-user-select: none;
-	-moz-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
-}
-	
-/* Hide the browser's default checkbox */
-.container-speed-indicator input {
-	position: absolute;
-	opacity: 0;
-	cursor: pointer;
-	height: 0;
-	width: 0;
-}
-
-/* Custom checkbox */
-
-.checkmark01,
-.checkmark02,
-.checkmark03,
-.checkmark04,
-.checkmark05,
-.checkmark06,
-.checkmark07,
-.checkmark08,
-.checkmark09,
-.checkmark10,
-.checkmark11,
-.checkmark12 {
-	position: absolute;
-	top: 0;
-	left: 0;
-	height: 20px;
-	width: 20px;
-	background-color: dodgerblue;
-	border: none;
-	border-radius: 5px;
-	pointer-events: none;
-}
-
-/* Custom segment indicator checkbox: Status */
-.container-speed-indicator input:checked ~ .checkmark01,
-.container-speed-indicator input:checked ~ .checkmark02,
-.container-speed-indicator input:checked ~ .checkmark03,
-.container-speed-indicator input:checked ~ .checkmark04,
-.container-speed-indicator input:checked ~ .checkmark05,
-.container-speed-indicator input:checked ~ .checkmark06,
-.container-speed-indicator input:checked ~ .checkmark07,
-.container-speed-indicator input:checked ~ .checkmark08,
-.container-speed-indicator input:checked ~ .checkmark09,
-.container-speed-indicator input:checked ~ .checkmark10,
-.container-speed-indicator input:checked ~ .checkmark11,
-.container-speed-indicator input:checked ~ .checkmark12 {
-	background-color: hotpink;
-	border: none;
-	border-radius: 5px;
-}
-
-/* Custom segment indicator checkbox 01. Active/checked. */
-.checkmark01:after {
-	content: "1";
-	color: white;
-	position: absolute;
-	padding-left: 6px;
-	padding-top: 1px;
-	display: none;
-}
-
-/* Custom segment indicator checkbox 01. Inactive/not checked. */
-.checkmark01:before {
-	content: "1";
-	color: black;
-	position: absolute;
-	padding-left: 6px;
-	padding-top: 1px;
-	display: none;
-}
-
-/* Custom segment indicator checkbox 02. Active/checked. */
-.checkmark02:after {
-	content: "2";
-	color: white;
-	position: absolute;
-	padding-left: 6px;
-	padding-top: 1px;
-	display: none;
-}
-
-/* Custom segment indicator checkbox 02. Inactive/not checked. */
-.checkmark02:before {
-	content: "2";
-	color: black;
-	position: absolute;
-	padding-left: 6px;
-	padding-top: 1px;
-	display: none;
-}
-
-/* Custom segment indicator checkbox 03. Active/checked. */
-.checkmark03:after {
-	content: "3";
-	color: white;
-	position: absolute;
-	padding-left: 6px;
-	padding-top: 1px;
-	display: none;
-}
-
-/* Custom segment indicator checkbox 03. Inactive/not checked. */
-.checkmark03:before {
-	content: "3";
-	color: black;
-	position: absolute;
-	padding-left: 6px;
-	padding-top: 1px;
-	display: none;
-}
-
-/* Custom segment indicator checkbox 04. Active/checked. */
-.checkmark04:after {
-	content: "4";
-	color: white;
-	position: absolute;
-	padding-left: 6px;
-	padding-top: 1px;
-	display: none;
-}
-
-/* Custom segment indicator checkbox 04. Inactive/not checked. */
-.checkmark04:before {
-	content: "4";
-	color: black;
-	position: absolute;
-	padding-left: 6px;
-	padding-top: 1px;
-	display: none;
-}
-
-/* Custom segment indicator checkbox 05. Active/checked. */
-.checkmark05:after {
-	content: "5";
-	color: white;
-	position: absolute;
-	padding-left: 6px;
-	padding-top: 1px;
-	display: none;
-}
-
-/* Custom segment indicator checkbox 05. Inactive/not checked. */
-.checkmark05:before {
-	content: "5";
-	color: black;
-	position: absolute;
-	padding-left: 6px;
-	padding-top: 1px;
-	display: none;
-}
-
-/* Custom segment indicator checkbox 06. Active/checked. */
-.checkmark06:after {
-	content: "6";
-	color: white;
-	position: absolute;
-	padding-left: 6px;
-	padding-top: 1px;
-	display: none;
-}
-
-/* Custom segment indicator checkbox 06. Inactive/not checked. */
-.checkmark06:before {
-	content: "6";
-	color: black;
-	position: absolute;
-	padding-left: 6px;
-	padding-top: 1px;
-	display: none;
-}
-
-/* Custom segment indicator checkbox 07. Active/checked. */
-.checkmark07:after {
-	content: "7";
-	color: white;
-	position: absolute;
-	padding-left: 6px;
-	padding-top: 1px;
-	display: none;
-}
-
-/* Custom segment indicator checkbox 07. Inactive/not checked. */
-.checkmark07:before {
-	content: "7";
-	color: black;
-	position: absolute;
-	padding-left: 6px;
-	padding-top: 1px;
-	display: none;
-}
-
-/* Custom segment indicator checkbox 08. Active/checked. */
-.checkmark08:after {
-	content: "8";
-	color: white;
-	position: absolute;
-	padding-left: 6px;
-	padding-top: 1px;
-	display: none;
-}
-
-/* Custom segment indicator checkbox 08. Inactive/not checked. */
-.checkmark08:before {
-	content: "8";
-	color: black;
-	position: absolute;
-	padding-left: 6px;
-	padding-top: 1px;
-	display: none;
-}
-
-/* Custom segment indicator checkbox 09. Active/checked. */
-.checkmark09:after {
-	content: "9";
-	color: white;
-	position: absolute;
-	padding-left: 6px;
-	padding-top: 1px;
-	display: none;
-}
-
-/* Custom segment indicator checkbox 09. Inactive/not checked. */
-.checkmark09:before {
-	content: "9";
-	color: black;
-	position: absolute;
-	padding-left: 6px;
-	padding-top: 1px;
-	display: none;
-}
-
-/* Custom segment indicator checkbox 10. Active/checked. */
-.checkmark10:after {
-	content: "10";
-	color: white;
-	position: absolute;
-	padding-left: 2px;
-	padding-top: 1px;
-	display: none;
-}
-
-/* Custom segment indicator checkbox 10. Inactive/not checked. */
-.checkmark10:before {
-	content: "10";
-	color: black;
-	position: absolute;
-	padding-left: 2px;
-	padding-top: 1px;
-	display: none;
-}
-
-/* Custom segment indicator checkbox 11. Active/checked. */
-.checkmark11:after {
-	content: "11";
-	color: white;
-	position: absolute;
-	padding-left: 3px;
-	padding-top: 1px;
-	display: none;
-}
-
-/* Custom segment indicator checkbox 11. Inactive/not checked. */
-.checkmark11:before {
-	content: "11";
-	color: black;
-	position: absolute;
-	padding-left: 3px;
-	padding-top: 1px;
-	display: none;
-}
-
-/* Custom segment indicator checkbox 12. Active/checked. */
-.checkmark12:after {
-	content: "12";
-	color: white;
-	position: absolute;
-	padding-left: 2px;
-	padding-top: 1px;
-	display: none;
-}
-
-/* Custom segment indicator checkbox 12. Inactive/not checked. */
-.checkmark12:before {
-	content: "12";
-	color: black;
-	position: absolute;
-	padding-left: 2px;
-	padding-top: 1px;
-	display: none;
-}
-
-/* Show the checkmark when checked */
-.container-speed-indicator input:checked ~ .checkmark01:after,
-.container-speed-indicator input:checked ~ .checkmark02:after,
-.container-speed-indicator input:checked ~ .checkmark03:after,
-.container-speed-indicator input:checked ~ .checkmark04:after,
-.container-speed-indicator input:checked ~ .checkmark05:after,
-.container-speed-indicator input:checked ~ .checkmark06:after,
-.container-speed-indicator input:checked ~ .checkmark07:after,
-.container-speed-indicator input:checked ~ .checkmark08:after,
-.container-speed-indicator input:checked ~ .checkmark09:after,
-.container-speed-indicator input:checked ~ .checkmark10:after,
-.container-speed-indicator input:checked ~ .checkmark11:after,
-.container-speed-indicator input:checked ~ .checkmark12:after {
-	display: block;
-}
-
-/* Show the checkmark when checked */
-.container-speed-indicator input:not(:checked) ~ .checkmark01:before,
-.container-speed-indicator input:not(:checked) ~ .checkmark02:before,
-.container-speed-indicator input:not(:checked) ~ .checkmark03:before,
-.container-speed-indicator input:not(:checked) ~ .checkmark04:before,
-.container-speed-indicator input:not(:checked) ~ .checkmark05:before,
-.container-speed-indicator input:not(:checked) ~ .checkmark06:before,
-.container-speed-indicator input:not(:checked) ~ .checkmark07:before,
-.container-speed-indicator input:not(:checked) ~ .checkmark08:before,
-.container-speed-indicator input:not(:checked) ~ .checkmark09:before,
-.container-speed-indicator input:not(:checked) ~ .checkmark10:before,
-.container-speed-indicator input:not(:checked) ~ .checkmark11:before,
-.container-speed-indicator input:not(:checked) ~ .checkmark12:before {
-	display: block;
-}
-
-/* --------------------------------------------------- */
-/* Talents, Perks, and Complications                   */
-/* --------------------------------------------------- */
-.grid-container-complications-talents {
-	display: grid;
-	grid-gap: 4px;
-	grid-template-areas: 
-	"theTalentsAndPerks theComplications"
-	"theNotes theNotes";
-	grid-template-columns: 338px 338px;
-	grid-template-rows: 642px 160px;
-	max-width: 685px;
-	padding: 0px;
-	font-size: 16px;
-	background-color: dodgerblue;
-	justify-content: middle;
-	padding-bottom: 0px;
-	margin-bottom: 1px;
-}
-
-.grid-container-complications-talents h2 {
-	font-size: 18px;
-	line-height: 1.3;
-	text-align: center;
-	font-weight: normal;
-}
-
-/* Complications and Talents Tab: Talents and Perks */
-.flex-container-complications-talents-left {
-	grid-area: theTalentsAndPerks;
-	display: flex;
-	justify-content: space-between;
-	flex-direction: column;
-	border: 3px solid #fff990;
-	border-radius: 5px;
-	max-width: 333px;
-	background: gold;
-	height: 630px;
-	padding: 5px;
-	padding-bottom: 0px;
-	margin-bottom: 0px;
-}
-
-.item-talent-heading {
-	display: flex;
-	flex-wrap: nowrap;
-	justify-content: space-between;
-	align-items: center;
-	flex-direction: row;
-	margin-bottom: 0px;
-	padding: 0px;
-	max-width: 333px;
-}
-
-.item-talent-heading input[type=text] {
-	max-width: 200px;
-	padding: 1px;
-	padding-left: 3px;
-	margin: 0px;
-	margin-right: 0px;
-	margin-left: 2px;
-	text-align: left;
-	font-size: 13px;
-	font-weight: bold;
-	border: solid 1px darkgray;
-}
-
-.item-talent-heading input[type=number] {
-	max-width: 45px;
-	padding: 2px;
-	margin: 0px;
-	padding-right: 0px;
-	text-align: right;
-	border: solid 1px darkgray;
-}
-
-.item-talent-heading h1 {
-	font-size: 12px;
-	line-height: 1.1;
-	padding-right: 2px;
-	padding-left: 6px;
-}
-
-.item-talent-textbox textarea {
-	max-width: 314px;
-	max-height: 36px;
-	padding: 3px;
-	border: solid 1px darkgray;
-	margin-bottom: 6px;
-}
-
-
-/* Complications and Talents Tab: Complications */
-.flex-container-complications-talents-right {
-	grid-area: theComplications;
-	display: flex;
-	justify-content: space-between;
-	flex-direction: column;
-	border: 3px solid lightcyan;
-	border-radius: 5px;
-	max-width: 333px;
-	background: lightblue;
-	height: 630px;
-	padding: 5px;
-	padding-bottom: 0px;
-	margin-bottom: 0px;
-}
-
-.item-complication-heading {
-	display: flex;
-	flex-wrap: nowrap;
-	justify-content: space-between;
-	align-items: center;
-	flex-direction: row;
-	margin-bottom: 0px;
-	padding: 0px;
-	max-width: 333px;
-}
-
-.item-complication-heading input[type=text] {
-	max-width: 210px;
-	padding: 1px;
-	padding-left: 3px;
-	margin: 0px;
-	margin-right: 0px;
-	margin-left: 2px;
-	text-align: left;
-	font-size: 13px;
-	font-weight: bold;
-	border: solid 1px darkgray;
-}
-
-.item-complication-heading input[type=number] {
-	max-width: 45px;
-	padding: 2px;
-	margin: 0px;
-	padding-right: 0px;
-	text-align: right;
-	border: solid 1px darkgray;
-}
-
-.item-complication-heading h1 {
-	font-size: 12px;
-	line-height: 1.1;
-	padding-right: 2px;
-	padding-left: 6px;
-}
-
-.item-complication-textbox textarea {
-	max-width: 314px;
-	max-height: 54px;
-	padding: 3px;
-	border: solid 1px darkgray;
-	margin-bottom: 6px;
-}
-
-/* Complications Tab: Notes Text Panel */
-
-.flex-container-complications-bottom {
-	grid-area: theNotes;
-	display: flex;
-	flex-direction: row;
-	flex-wrap: nowrap;
-	justify-content: space-between;
-	border: 3px solid lightgray;
-	border-radius: 5px;
-	max-width: 674px;
-	padding: 5px;
-	margin: 0px;
-	height: 145px;
-	background: white;
-}
-
-.flex-container-complications-bottom textarea {
-	width: 322px;
-	max-height: 143px;
-	padding: 0px;
-	margin: 0px;
-	border: transparent;
-}
-
-/* ----------------------------------------------------- */
-/* Powers                                                */
-/* Organized in two columns with different color styles. */
-/* ----------------------------------------------------- */
-.grid-container-powers {
-	display: grid;
-	grid-gap: 4px;
-	grid-template-areas: 
-	"leftPowers rightPowers";
-	grid-template-columns: 338px 338px;
-	grid-template-rows: 806px;
-	max-width: 686px;
-	min-width: 676px;
-	padding: 0px;
-	font-size: 16px;
-	background-color: dodgerblue;
-	justify-content: middle;
-	padding-bottom: 0px;
-	margin-bottom: 1px;
-}
-
-.grid-container-powers h1 {
-	display:inline-block;
-	margin-left: 0px;
-	padding-left: 2px;
-	padding-right: 0px;
-	padding-top: 0px;
-	padding-bottom: 0px;
-	margin: 0px;
-	margin-top: 1px;
-	font-size: 13px;
-	font-style: normal;
-	line-height: 1.35;
-}
-
-.grid-container-powers input[type=number] {
-	padding-right: 0px;
-	padding-top: 2px;
-	width: 30px;
-	height: 20px;
-	margin: 0px;
-	text-align: right;
-}
-
-.flex-container-powers-right,
-.flex-container-powers-left {
-	display: flex;
-	justify-content: space-between;
-	flex-direction: column;
-	border-radius: 5px;
-	max-width: 333px;
-	padding-top: 1px;
-	padding-left: 4px;
-	padding-right: 4px;
-	padding-bottom: 2px;
-	margin: 0px;
-	height: 797px;
-}
-
-.flex-container-powers-left textarea,
-.flex-container-powers-right textarea {
-	color: gray; 
-	max-width: 316px;
-	height: 54px;
-	padding: 3px;
-	margin: 0px;
-	margin-top: 1px;
-	font-size: 8;
-}
-
-.flex-container-powers-right textarea {
-	border: solid 1px goldenrod;
-}
-
-// Subitems to organize rows within each power flex item.
-
-.item-flex-power {
-	display: flex;
-	flex-direction: column;
-	justify-content: space-between;
-}
-
-.subitem-flex-power-heading-left,
-.subitem-flex-power-heading-right,
-.subitem-flex-power-effect-left,
-.subitem-flex-power-effect-right {
-	display: flex;
-	flex-direction: row;
-	justify-content: space-between;
-	margin-top: 1px;
-	margin-bottom: 1px;
-	align-items: center;
-}
-
-.subitem-flex-power-heading-left input[type=text],
-.subitem-flex-power-heading-right input[type=text],
-.subitem-flex-power-effect-left input[type=text],
-.subitem-flex-power-effect-right input[type=text]{
-	min-height: 22px;
-	text-align: left;
-	padding-left: 2px;
-	margin-right: 0px;
-}
-
-.subitem-flex-power-heading-left input[type=text]:nth-child(2),
-.subitem-flex-power-heading-right input[type=text]:nth-child(2) {
-	font-weight: bold;
-	min-width: 134px;
-}
-
-.subitem-flex-power-heading-left input[type=text]:nth-child(4),
-.subitem-flex-power-heading-right input[type=text]:nth-child(4) {
-	font-weight: bold;
-	text-align: center;
-}
-
-.subitem-flex-power-effect-left input[type=text],
-.subitem-flex-power-effect-right input[type=text]{
-	min-width: 140px;
-}
-
-.subitem-flex-power-heading-left select,
-.subitem-flex-power-heading-right select {
-	font-size: 13px;
-	height: 19px;
-	width: 96px;
-	margin: 0px;
-}
-
-.subitem-flex-power-effect-left input[type=text]:nth-child(1),
-.subitem-flex-power-effect-right input[type=text]:nth-child(1){
-	min-width: 150px;
-}
-
-.subitem-flex-power-effect-left input[type=text]:nth-child(2), /* Dice */
-.subitem-flex-power-effect-right input[type=text]:nth-child(2) /* Dice */ {
-	min-width: 58px;
-	text-align: center;
-	margin-left: 2px;
-	margin-right: 0px;
-	padding-left: 0px;
-	padding-right: 0px;
-}
-
-.subitem-flex-power-effect-left input[type=number]:nth-child(4), /* Roll chance */
-.subitem-flex-power-effect-right input[type=number]:nth-child(4) /* Roll chance */ {
-	max-width: 41px;
-	min-width: 41px;
-	text-align: right;
-	margin-left: 1px;
-	margin-right: 2px;
-}
-
-.subitem-flex-power-activeCost input[type=number]:nth-child(2), /* Advantages */
-.subitem-flex-power-activeCost input[type=number]:nth-child(4) /* Limitations */ {
-	border: solid 1px gray;
-	min-width: 55px;
-}
-
-/* Powers Tab: Left Powers */
-.flex-container-powers-left {
-	grid-area: leftPowers;
-	border: 3px solid lightcyan;
-	background: lightblue;
-}
-
-.flex-container-powers-left textarea {
-	border: solid 1px black;
-}
-
-.flex-container-powers-left input[readonly]{
-	background: lightcyan;
-	border: solid 1px #89abb9;
-	line-height: 1.0;
-}
-
-.flex-container-powers-left textarea{
-	border: 1px solid #89ABB9;
-}
-
-.subitem-flex-power-heading-left input[type=text]{
-	border: solid 1px #89ABB9;
-	max-width: 28px;
-}
-
-.subitem-flex-power-effect-left input[type=text],
-.subitem-flex-power-effect-left input[type=number]{
-	border: solid 1px #89ABB9;
-}
-
-.subitem-flex-power-active-cost-left {
-	display: flex;
-	flex-direction: row;
-	justify-content: space-between;
-	align-items: center;
-}
-
-.subitem-flex-power-active-cost-left input[type=number] {
-	/* Active, Real Cost */
-	border: solid 1px #89ABB9;
-}
-
-.subitem-flex-power-active-cost-left input[readonly] {
-	/* Active, Real Cost */
-	max-width: 38px;
-	text-align: center;
-	padding: 0px;
-}
-
-.subitem-flex-power-limitations-left {
-	display: flex;
-	flex-direction: row;
-	justify-content: space-between;
-	max-width: 333px;
-	margin-top: 1px;
-	margin-bottom: 1px;
-}
-
-.subitem-flex-power-limitations-left input[type=number]{
-	/* Advantages, limitations */
-	border: solid 1px #89ABB9;
-	min-width: 50px;
-}
-
-.subitem-flex-power-limitations-left select {
-	font-size: 13px;
-	height: 19px;
-	max-width: 115px;
-	margin: 0px;
-	align-items: center;
-}
-
-
-/* Powers Tab: Right Powers */
-.flex-container-powers-right {
-	grid-area: rightPowers;
-	border: 3px solid #fff990;
-	background: gold;
-}
-
-.flex-container-powers-right textarea {
-	border: solid 1px black;
-}
-
-.flex-container-powers-right input[readonly]{
-	background: #fff990;
-	border: solid 1px goldenrod;
-	line-height: 1.0;
-}
-
-.flex-container-powers-right textarea{
-	border: 1px solid goldenrod;
-}
-
-.subitem-flex-power-heading-right input[type=text] {
-	max-width: 28px;
-	border: solid 1px goldenrod;
-}
-
-.subitem-flex-power-effect-right input[type=text],
-.subitem-flex-power-effect-right input[type=number]{
-	border: solid 1px goldenrod;
-}
-
-.subitem-flex-power-active-cost-right {
-	display: flex;
-	flex-direction: row;
-	justify-content: space-between;
-	align-items: center;
-}
-
-.subitem-flex-power-active-cost-right input[type=number] {
-	/* Active, Real Cost */
-	border: solid 1px goldenrod;
-}
-
-.subitem-flex-power-active-cost-right input[readonly] {
-	/* Active, Real Cost */
-	max-width: 38px;
-	text-align: center;
-}
-
-.subitem-flex-power-limitations-right {
-	display: flex;
-	flex-direction: row;
-	justify-content: space-between;
-	max-width: 333px;
-	margin-top: 1px;
-	margin-bottom: 1px;
-	align-items: center;
-}
-
-.subitem-flex-power-limitations-right input[type=number]{
-	/* Advantages, limitations */
-	border: solid 1px goldenrod;
-	min-width: 50px;
-}
-
-.subitem-flex-power-limitations-right select {
-	font-size: 13px;
-	height: 19px;
-	max-width: 115px;
-	margin: 0px;
-}
-
-// Buttons for power, talent, and complication movers.
-
-.power-mover-plus-minus-enclosure,
-.talent-mover-plus-minus-enclosure,
-.complication-mover-plus-minus-enclosure {
-	display: flex;
-	flex-direction: row;
-	justify-content: space-between;
-	
-}
-
-.power-mover-plus-minus-button,
-.talent-mover-plus-minus-button,
-.complication-mover-plus-minus-button {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	height: 24px;
-	width: 10px;
-	align-items: center;
-	padding: 0px;
-	margin-right: 2px;
-	margin-left:3px;
-}
-
-.power-mover-plus-minus-button button.buttonPlus,
-.power-mover-plus-minus-button button.buttonMinus,
-.talent-mover-plus-minus-button button.buttonPlus,
-.talent-mover-plus-minus-button button.buttonMinus,
-.complication-mover-plus-minus-button button.buttonPlus,
-.complication-mover-plus-minus-button button.buttonMinus {
-	background-color: LemonChiffon;
-	border: solid 1px silver;
-	color: slategray;
-	padding-left: 4px;
-	padding-right: 4px;
-	padding-top: 1px;
-	padding-bottom: 1px;
-	display: inline-block;
-	font-size: 10px;
-	margin: 0px 0px;
-	line-height: 1.25ch;
-	border-radius: 0px;
-	max-width: 10px;
-}
-
-.power-mover-plus-minus-button button.buttonPlus span,
-.power-mover-plus-minus-button button.buttonMinus span,
-.talent-mover-plus-minus-button button.buttonPlus span,
-.talent-mover-plus-minus-button button.buttonMinus span,
-.complication-mover-plus-minus-button button.buttonPlus span,
-.complication-mover-plus-minus-button button.buttonMinus span {
-	display: inline-block;
-	transform: rotate(-90deg);
-	text-align: center;
-}
-
-.power-mover-plus-minus-button button.buttonPlus:hover,
-.power-mover-plus-minus-button button.buttonMinus:hover,
-.talent-mover-plus-minus-button button.buttonPlus:hover,
-.talent-mover-plus-minus-button button.buttonMinus:hover,
-.complication-mover-plus-minus-button button.buttonPlus:hover,
-.complication-mover-plus-minus-button button.buttonMinus:hover {
-	background-color: gray;
-	color: white;
-	transition: 0.05s;
-} 
-
-
-/* ----------------------------------------------------- */
-/* Skills                                                */
-/* Organized into a 2x3 grid of containers               */
-/* ----------------------------------------------------- */
-.grid-container-skills-tab {
-	display: grid;
-	grid-template-areas:
-	"theSkills1 theCombatSkills"
-	"theSkills2 theLanguageSkills"
-	"theSkills3 theEnhancers";
-	grid-gap: 6px;
-	grid-template-columns: 358px 322px;
-	grid-template-rows: 273px 251px 259px;
-	max-width: 692px;
-	padding: 0px;
-	padding-left: 0px;
-	padding-top: 6px;
-	margin-bottom: 0px;
-	font-size: 16px;
-	background-color: gold;
-	border: 3px solid #fff990;
-	border-radius: 5px;
-	justify-content: middle;
-	min-height: 795px;
-}
-
-.grid-container-skills-tab h1 {
-	display:inline-block;
-	margin-left: 0px;
-	padding-left: 2px;
-	padding-right: 0px;
-	padding-top: 0px;
-	padding-bottom: 0px;
-	margin: 0px;
-	margin-top: 1px;
-	font-size: 13px;
-	font-style: normal;
-	line-height: 1.10;
-	text-align: center;
-}
-
-.grid-container-skills-tab input[type=text] {
-	height: 22px;
-}
-
-.grid-container-skills-tab .custom-select,
-.grid-container-skills-tab .custom-select-skill,
-.grid-container-skills-tab .custom-select-alternate,
-.grid-container-skills-tab .custom-select-alternate-skill{
-	font-size: 13px;
-	max-width: 110px;
-	margin-left: 3px;
-}
-
-/* Item: Skill Containers for Skill Groups 01, 02, and 03 */
-.item-skillsTab-flex-container-skills-group01,
-.item-skillsTab-flex-container-skills-group02,
-.item-skillsTab-flex-container-skills-group03 {
-	display: flex;
-	flex-direction: column;
-	justify-content: space-evenly;
-	max-width: 358px;
-	margin-left: 5px;
-	background-color: #fff990; 
-	border: solid 2px goldenrod;
-	border-radius: 3px;
-	line-height: 1.10;
-	padding-left: 1px;
-	padding-right: 4px;
-}
-
-.item-skillsTab-flex-container-skills-group01 {
-	grid-area: theSkills1;
-	padding-bottom: 2px;
-}
-
-.item-skillsTab-flex-container-skills-group02 {
-	grid-area: theSkills2;
-	padding-top: 3px;
-	padding-bottom: 2px;
-}
-
-.item-skillsTab-flex-container-skills-group03 {
-	grid-area: theSkills3;
-	padding-top: 3px;
-	padding-bottom: 2px;
-	margin-bottom: 4px;
-}
-
-.item-skillsTab-flex-container-skills-group01 input[type=number],
-.item-skillsTab-flex-container-skills-group02 input[type=number],
-.item-skillsTab-flex-container-skills-group03 input[type=number] {
-	text-align: right;
-	padding-right: 0px;
-	margin-top: 0px;
-	margin-bottom: 0px;
-	border: solid 1px palegoldenrod;
-	max-height: 22px;
-}
-
-.item-skillsTab-flex-container-skills-group01 input[readonly],
-.item-skillsTab-flex-container-skills-group02 input[readonly],
-.item-skillsTab-flex-container-skills-group03 input[readonly] {
-	text-align: center;
-	background-color: #fff990; 
-	border: transparent;
-	max-width: 24px;
-}
-
-.item-skillsTab-flex-container-skills-group01 input[type=text]:nth-child(1),
-.item-skillsTab-flex-container-skills-group02 input[type=text]:nth-child(1),
-.item-skillsTab-flex-container-skills-group03 input[type=text]:nth-child(1) {
-	max-width: 140px;
-	margin-top: 1px;
-	margin-bottom: 1px;
-	font-size: 13px;
-	text-align: left;
-	margin-left: 4px;
-	margin-right: 1px;
-	padding-left: 1px;
-	padding-right: 1px;
-	border: solid 1px palegoldenrod;
-}
-
-/* Sub-Item: Flex containers for rows */
-.subitem-skillsTab-grid-container-skills-heading-left {
-	grid-template-areas: "skillName skillType rollChance . skillCost";
-	grid-template-columns: 164px 70px 26px 38px 46px;
-	display: grid;
-}
-
-.subitem-skillsTab-grid-container-skills-heading-left-name {
-	grid-area: skillName;
-	padding-left: 5px;
-}
-
-.subitem-skillsTab-grid-container-skills-heading-left-name h2 {
-	text-align: left;
-}
-
-.subitem-skillsTab-grid-container-skills-heading-left-type {
-	grid-area: skillType;
-	text-align: center;
-}
-
-.subitem-skillsTab-grid-container-skills-heading-left-roll {
-	grid-area: rollChance;
-	text-align: center;
-}
-
-.subitem-skillsTab-grid-container-skills-heading-left-cost {
-	grid-area: skillCost;
-	text-align: center;
-}
-
-.subitem-skillsTab-flex-container-skill {
-	text-align: left;
-	display: flex;
-	flex-direction: row;
-	justify-content: space-between;
-	max-height: 24px;
-}
-
-.subitem-skillsTab-flex-container {
-	text-align: right;
-}
-
-// Buttons for skill movers.
-
-.skill-mover-plus-minus-enclosure {
-	display: flex;
-	flex-direction: row;
-	justify-content: space-between;
-}
-
-.skill-mover-plus-minus-button {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	height: 24px;
-	width: 10px;
-	align-items: center;
-	padding: 0px;
-	margin-right: 2px;
-	margin-left: 2px;
-}
-
-.skill-mover-plus-minus-button button.buttonPlus,
-.skill-mover-plus-minus-button button.buttonMinus {
-	background-color: LemonChiffon;
-	border: solid 1px silver;
-	color: slategray;
-	padding-left: 4px;
-	padding-right: 4px;
-	padding-top: 1px;
-	padding-bottom: 1px;
-	display: inline-block;
-	font-size: 10px;
-	margin: 0px 0px;
-	line-height: 1.25ch;
-	border-radius: 0px;
-	max-width: 10px;
-}
-
-.skill-mover-plus-minus-button button.buttonPlus span,
-.skill-mover-plus-minus-button button.buttonMinus span {
-	display: inline-block;
-	transform: rotate(-90deg);
-	text-align: center;
-}
-
-.skill-mover-plus-minus-button button.buttonPlus:hover,
-.skill-mover-plus-minus-button button.buttonMinus:hover {
-	background-color: gray;
-	color: white;
-	transition: 0.05s;
-} 
-
-/* Item: Skill Container for combat skill flex "columns" */
-.item-skillsTab-grid-container-combat-skills {
-	grid-area: theCombatSkills;
-	display: grid;
-	grid-template-areas: 
-	"skillNames skillLevels skillTypes skillCosts"
-	"skillLevelNames skillLevels . skillCosts";
-	grid-template-columns: 150px 50px 61px 38px;
-	grid-template-rows: 199px 76px;
-	max-width: 292px;
-	padding-left: 4px;
-	padding-right: 4px;
-	padding-bottom: 3px;
-	padding-top: 0px;
-	background-color: #fff990; 
-	border: solid 2px goldenrod;
-	border-radius: 3px;
-	line-height: 1.10;
-}
-
-/* Subitem: flex container for combat skill name "column" */
-.subitem-skillsTab-flex-container-combat-skills-names {
-	grid-area: skillNames;
-	display: flex;
-	flex-direction: column;
-	justify-content: space-between;
-	margin-bottom: 3px;
-	padding-top: 0px;
-}
-
-.subitem-skillsTab-flex-container-combat-skills-names input[type=text] {
-	max-width: 140px;
-	margin-top: 0px;
-	margin-bottom: 3px;
-	font-size: 13px;
-	text-align: left;
-	margin-left: 4px;
-	padding-left: 1px;
-	padding-right: 1px;
-	border: solid 1px palegoldenrod;
-}
-
-.subitem-skillsTab-flex-container-combat-skills-names h1 {
-	text-align: left;
-	padding-top: 3px;
-	padding-bottom: 3px;
-	max-height: 18px;
-}
-
-.subitem-skillsTab-flex-container-combat-skills-level-names {
-	grid-area: skillLevelNames;
-	display: flex;
-	flex-direction: column;
-	justify-content: space-between;
-	margin-bottom: 8px;
-	padding-top: 0px;
-} 
-
-.subitem-skillsTab-flex-container-combat-skills-level-names h1 {
-	text-align: left;
-	padding-top: 3px;
-	padding-bottom: 3px;
-	max-height: 18px;
-	font-weight: bold;
-}
-
-/* Subitem: flex container for combat skill levels "column" */
-.subitem-skillsTab-flex-container-combat-skills-levels {
-	grid-area: skillLevels;
-	display: flex;
-	flex-direction: column;
-	justify-content: space-between;
-	margin-top: 7px;
-	margin-bottom: 6px;
-	max-height: 264px;
-	margin-top: 3px;
-	padding-bottom: 2px;
-}
-
-.subitem-skillsTab-flex-container-combat-skills-levels input[type=number] {
-	text-align: center;
-	padding-left: 3px;
-	padding-right: 1px; /* Fix for shifting spinners on focus */
-	max-width: 45px;
-	margin-right: 5px;
-	padding-bottom: 1px;
-	max-height: height: 22px;
-	border: solid 1px palegoldenrod;
-}
-
-.subitem-skillsTab-flex-container-combat-skills-levels h1 {
-	text-align: left;
-	padding-top: 0px;
-	padding-bottom: 0px;
-	max-height: 18px;
-	margin-left: 0px;
-}
-
-/* Subitem: flex container for combat skill type "column" */
-.subitem-skillsTab-flex-container-combat-skills-types {
-	grid-area: skillTypes;
-	display: flex;
-	flex-direction: column;
-	justify-content: space-between;
-	margin-top: 3px;
-	margin-bottom: 5px;
-	margin-left: 0px;
-	height: 189px;
-}
-
-.subitem-skillsTab-flex-container-combat-skills-types h1 {
-	text-align: center;
-	padding-top: 0px;
-	padding-bottom: 0px;
-	max-height: 18px;
-	margin-left: 0px;
-}
-
-.subitem-skillsTab-flex-container-combat-skills-types .custom-select {
-	max-width: 55px;
-	text-align: center;
-	height: 19px;
-}
-
-/* Subitem: flex container for combat skill costs "column" */
-.subitem-skillsTab-flex-container-combat-skills-costs {
-	grid-area: skillCosts;
-	display: flex;
-	flex-direction: column;
-	justify-content: space-between;
-	margin-bottom: 7px;
-	margin-top: 3px;
-	padding-bottom: 2px;
-}
-
-.subitem-skillsTab-flex-container-combat-skills-costs h1 {
-	text-align: center;
-	padding-top: 0px;
-	padding-bottom: 0px;
-	padding-right: 0px;
-	max-height: 18px;
-	max-width: 40px;
-}
-
-.subitem-skillsTab-flex-container-combat-skills-costs input[readonly] {
-	text-align: center;
-	background-color: #fff990;
-	max-width: 30px;
-	margin-left: 5px;
-}
-
-/* Item: Skill Container for Language Skill "rows" */
-.item-skillsTab-flex-container-languages {
-	grid-area: theLanguageSkills;
-	display: flex;
-	flex-direction: column;
-	justify-content: space-between;
-	max-width: 292px;
-	background-color: #fff990; 
-	border: solid 2px goldenrod;
-	border-radius: 3px;
-	line-height: 1.10;
-	padding-left: 4px;
-	padding-right: 4px;
-	padding-bottom: 3px;
-}
-
-/* Sub-Item: Flex containers for columns */
-.subitem-skillsTab-flex-container-languages-heading {
-	grid-template-areas: "skillName skillFluency literacy skillCost";
-	grid-template-columns: 148px 83px 31px 36px;
-	display: grid;
-	margin-left: 0px;
-}
-
-.subitem-skillsTab-flex-container-languages-heading-name {
-	grid-area: skillName;
-	text-align: left;
-}
-
-.subitem-skillsTab-flex-container-languages-heading-fluency {
-	grid-area: skillFluency;
-	text-align: center;
-}
-
-.subitem-skillsTab-flex-container-languages-heading-literacy {
-	grid-area: literacy;
-	text-align: center;
-}
-
-.subitem-skillsTab-flex-container-languages-heading-cost {
-	grid-area: skillCost;
-	text-align: center;
-}
-
-.subitem-skillsTab-flex-container-language {
-	display: flex;
-	flex-direction: row;
-	justify-content: space-between;
-	max-width: 285px;
-	margin-left: 0px;
-	padding: 0px;
-	margin-left: 4px;
-}
-
-.subitem-skillsTab-flex-container-language input[type=text]:nth-child(1) {
-	text-align: left;
-	padding-left: 2px;
-	min-width: 140px;
-	margin-right: 0px;
-	border: solid 1px palegoldenrod;	
-}
-
-.subitem-skillsTab-flex-container-language input[readonly] {
-	text-align: center;
-	background-color: #fff990;
-	max-width: 22px;
-	margin-right: 0px;
-	margin-left: 3px;
-	border: transparent;
-}
-
-.subitem-skillsTab-flex-container-language .container-checkbox-small {
-	margin-top: 3px;
-	margin-left: 10px;
-}
-
-.subitem-skillsTab-flex-container-language .custom-select {
-	min-width: 70px;
-	margin-left: 8px;
-	max-height: 19px;
-}
-
-
-/* Item: Skill Container for Skill Enhancers */
-.item-skillsTab-grid-container-skill-enhancers {
-	grid-area: theEnhancers;
-	display: grid;
-	grid-template-areas: 
-	". skillEnhancersHeading skillEnhancersHeading skillEnhancersHeading"
-	"checkboxes skillNames . skillCosts"
-	". skillNames skillLevels skillCosts";
-	grid-template-columns: 25px 175px 65px 38px;
-	grid-template-rows: 20px 112px 112px;
-	max-width: 295px;
-	padding-left: 5px;
-	grid-gap:0px;
-	background-color: #fff990; 
-	border: solid 2px goldenrod;
-	border-radius: 3px;
-	max-height: 251px;
-}
-
-.item-skillsTab-grid-container-skill-enhancers input[readonly]{
-	background-color: #fff990;
-	text-align: center;
-	height: 18px;
-	max-width: 30px;
-}
-
-.subitem-skillsTab-flex-container-skill-enhancers-checkboxes {
-	grid-area: checkboxes;
-	text-align: center;
-	display: flex;
-	flex-direction: column;
-	justify-content: space-between;
-	line-height: 1.2;
-	padding-bottom: 5px;
-	padding-top: 5px;
-	height: 113px;
-}
-
-.subitem-skillsTab-flex-container-skill-enhancers-heading {
-	grid-area: skillEnhancersHeading;
-	text-align: left;
-	display: flex;
-	flex-direction: row;
-	padding-top: 4px;
-	justify-content: space-between;
-	line-height: 1.15;
-	width: 264px;
-}
-
-.subitem-skillsTab-flex-container-skill-enhancers-heading h1:nth-child(2) {
-	padding-right: 0px;
-	line-height: 1.15;
-}
-
-.subitem-skillsTab-flex-container-skill-enhancers-names {
-	grid-area: skillNames;
-	display: flex;
-	flex-direction: column;
-	justify-content: space-evenly;
-	height: 229px;
-}
-
-.subitem-skillsTab-flex-container-skill-enhancers-names h1 {
-	text-align: left;
-	line-height: 1.15;
-	font-weight: bold;
-}
-
-.subitem-skillsTab-flex-container-skill-enhancers-levels {
-	grid-area: skillLevels;
-	text-align: left;
-	display: flex;
-	flex-direction: column;
-	justify-content: flex-end;
-	line-height: 1.15;
-	margin-top: 11px;
-	height: 107px;
-	margin-bottom: 4px;
-}
-
-.subitem-skillsTab-flex-container-skill-enhancers-levels input[type=number]{
-	border: solid 1px palegoldenrod;
-	height: 19px;
-	margin-bottom: 2px;
-}
-
-.subitem-skillsTab-flex-container-skill-enhancers-costs {
-	grid-area: skillCosts;
-	text-align: center;
-	display: flex;
-	flex-direction: column;
-	justify-content: space-evenly;
-	line-height: 1.15;
-	height: 229px;
-}
-
-/* ----------------------------------------------------- */
-/* Gear: armor, weapons, and equipment                   */
-/* Organized into a 3x4 grid of containers               */
-/* ----------------------------------------------------- */
-
-.grid-container-tab-gear {
-	display: grid;
-	grid-template-areas:
-	"theEncumbrance theEncumbrance gearHealth"
-	"theArmor theArmor gearHealth"
-	"theWeapons theWeapons theWeapons"
-	"theEquipment theSlides theSlides";
-	grid-gap: 8px;
-	grid-template-columns: 250px 336px 84px;
-	grid-template-rows: 63px 174px 155px 322px;
-	max-width: 692px;
-	padding: 0px;
-	padding-left: 2px;
-	font-size: 16px;
-	background-color: royalblue;
-	border: 3px solid #fff990;
-	border-radius: 5px;
-	justify-content: middle;
-	min-height: 801px;
-}
-
-.grid-container-tab-gear h1 {
-	display:inline-block;
-	margin-left: 0px;
-	padding-left: 2px;
-	padding-right: 0px;
-	padding-top: 0px;
-	padding-bottom: 0px;
-	margin: 0px;
-	margin-top: 1px;
-	font-size: 13px;
-	font-style: normal;
-	line-height: 1.10;
-	text-align: center;
-}
-
-.grid-container-tab-gear .custom-select {
-	font-size: 13px;
-	max-width: 110px;
-	max-height: 19px;
-}
-
-/* Health status styling grouped with item-health-characteristics */
-
-/* Encumbrance */
-.item-tab-gear-flex-container-encumbrance {
-	grid-area: theEncumbrance;
-	display: flex;
-	flex-direction: row;
-	justify-content: space-between;
-	margin-left: 4px;
-	margin-top: 6px;
-	padding: 0px;
-	max-width: 594px;
-	max-height: 56px;
-	padding-left: 20px;
-	padding-right: 20px;
-	text-align: left;
-	vertical-align: middle;
-	background-color: royalblue;
-	border: none;
-}
-
-.item-tab-gear-flex-container-encumbrance h1 {
-	text-align: center;
-	color: white;
-	font-size: 13px;
-}
-
-.item-tab-gear-flex-container-encumbrance input[type=number]{
-	background-color: #fff990;
-	text-align: center;
-	max-width: 70px;
-	background-color: gold;
-	border: solid 1px goldenrod;
-	font-size: 16px;
-	margin-left: 0px;
-	padding-right: 0px;
-	min-height: 22px;
-}
-
-.subitem-tab-gear-flex-container-encumbrance,
-.subitem-tab-gear-flex-container-encumbrance-bonus {
-	display:flex;
-	flex-direction: column;
-	justify-content: space-between;
-	max-width: 80px;
-	align-items: center;
-}
-
-.subitem-tab-gear-flex-container-encumbrance-bonus {
-	margin-left: 0px;
-}
-
-.subitem-tab-gear-plus-minus-enclosure {
-	display: flex;
-	flex-direction: row;
-	background-color: gold;
-	justify-content: space-between;
-	width: 50px;
-	max-height: 20px;
-	border: solid 1px goldenrod;
-	border-radius: 3px;
-}
-
-.subitem-tab-gear-plus-minus-enclosure input[type=text] {
-	max-width: 40px;
-	height: 20px;
-	font-size: 16px;
-	background-color: transparent;
-	text-align: center;
-	vertical-align: center;
-}
-
-.subitem-tab-gear-plus-minus-enclosure input[type=text]:focus{
-	outline: transparent;
-}
-
-.subitem-tab-gear-flex-container-stat {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	height: 20px;
-	width: 10px;
-	align-items: center;
-	padding: 0px;
-}
-
-.subitem-tab-gear-flex-container-stat button.buttonPlus,
-.subitem-tab-gear-flex-container-stat button.buttonMinus {
-	background-color: LemonChiffon;
-	border: solid 1px slategray;
-	color: slategray;
-	padding-left: 4px;
-	padding-right: 4px;
-	padding-top: 1px;
-	padding-bottom: 1px;
-	display: inline-block;
-	font-size: 10px;
-	margin: 0px 0px;
-	line-height: 1.4ch;
-	border-radius: 0px;
-	max-width: 10px;
-}
-
-.subitem-tab-gear-flex-container-stat button.buttonPlus span,
-.subitem-tab-gear-flex-container-stat button.buttonMinus span {
-	display: inline-block;
-	transform: rotate(-90deg);
-	text-align: center;
-}
-
-.subitem-tab-gear-flex-container-stat button.buttonPlus:hover,
-.subitem-tab-gear-flex-container-stat button.buttonMinus:hover {
-	background-color: gray;
-	color: white;
-	transition: 0.05s;
-} 
-
-/* ------------- */
-/* Item: Armor   */
-/* ------------- */
-.item-tab-gear-grid-container-armor {
-	grid-area: theArmor;
-	display: flex;
-	flex-direction: column;
-	justify-content: space-around;
-	max-width: 594px;
-	padding-left: 5px;
-	margin-left: 3px;
-	padding-top: 0px;
-	grid-gap: 3px;
-	background-color: #fff990; 
-	border: solid 2px goldenrod;
-	border-radius: 3px;
-	height: 175px;
-}
-
-.subitem-tab-gear-flex-container-armor-row {
-	display: flex;
-	flex-direction: row;
-	justify-content: space-between;
-	align-items: center;
-	max-width: 576px;
-	margin-bottom: 1px;
-	height: 24px;
-}
-
-.subitem-tab-gear-flex-container-armor-row h1:nth-child(1) {
-	min-width: 118px;
-	text-align: left;
-}
-
-.subitem-tab-gear-flex-container-armor-row h1:nth-child(2),
-.subitem-tab-gear-flex-container-armor-row h1:nth-child(3),
-.subitem-tab-gear-flex-container-armor-row h1:nth-child(4),
-.subitem-tab-gear-flex-container-armor-row h1:nth-child(5) {
-	min-width: 34px;
-	text-align: center;
-}
-
-.subitem-tab-gear-flex-container-armor-row h1:nth-child(6),
-.subitem-tab-gear-flex-container-armor-row h1:nth-child(7) {
-	min-width: 44px;
-}
-
-.subitem-tab-gear-flex-container-armor-row h1:nth-child(8) {
-	min-width: 36px;
-}
-
-.subitem-tab-gear-flex-container-armor-row h1:nth-child(9) {
-	min-width: 98px;
-}
-
-.subitem-tab-gear-flex-container-armor-row h1:nth-child(10) {
-	min-width: 46px;
-}
-
-.subitem-tab-gear-flex-container-armor-row input {
-	max-height: 22px;
-}
-
-.subitem-tab-gear-flex-container-armor-row input[type=number] {
-	text-align: right;
-	padding-left: 2px;
-	max-width: 36px;
-	min-width: 34px;
-	padding-right: 0px;
-	margin-right: 0px;
-	margin-left: 0px;
-	border: solid 1px palegoldenrod;
-}
-
-.subitem-tab-gear-flex-container-armor-row input[type=text]:nth-child(1),
-.subitem-tab-gear-flex-container-armor-row input[type=text]:nth-child(9) {
-	padding-left: 1px;
-	padding-right: 1px;
-	margin-right: 0px;
-	border: solid 1px palegoldenrod;
-}
-
-.subitem-tab-gear-flex-container-armor-row input[type=text]:nth-child(1) {
-	text-align: left;
-	max-width: 120px;
-}
-
-.subitem-tab-gear-flex-container-armor-row input[type=text]:nth-child(9) {
-	text-align: center;
-	max-width: 100px;
-}
-
-.subitem-tab-gear-flex-container-armor-row input[type=number]:nth-child(10) {
-	text-align: right;
-	min-width: 48px;
-}
-
-.subitem-tab-gear-flex-container-armor-row select {
-	text-align-last: center; // For Chrome
-	text-align: center; // Firefox
-}
-
-// Shield
-
-.subitem-tab-gear-flex-container-shield {
-	display: flex;
-	flex-direction: column;
-	justify-content: space-between;
-	margin-right: 5px;
-	margin-top: 5px;
-}
-
-.subitem-tab-gear-flex-container-shield-row h1 {
-	margin-bottom: 3px;
-	padding: 0px;
-}
-
-.subitem-tab-gear-flex-container-shield-row input {
-	max-height: 21px;
-}
-
-.subitem-tab-gear-flex-container-shield-row label {
-	max-width: 5px;
-	margin-left: 2px;
-	margin-top: 3px;
-	padding-right: 0px;
-}
-
-.subitem-tab-gear-flex-container-shield-row .container-checkbox-small {
-	padding-left: 10px;
-	margin-right: 3px;
-}
-
-.subitem-tab-gear-flex-container-shield-row h1:nth-child(1) {
-	min-width: 120px;
-	text-align: left;
-}
-
-.subitem-tab-gear-flex-container-shield-row h1:nth-child(3) {
-	min-width: 67px;
-	text-align: center;
-}
-
-.subitem-tab-gear-flex-container-shield-row h1:nth-child(4) {
-	min-width: 24px;
-	text-align: center;
-}
-
-.subitem-tab-gear-flex-container-shield-row h1:nth-child(6) {
-	min-width: 38px;
-	text-align: center;
-}
-
-.subitem-tab-gear-flex-container-shield-row h1:nth-child(7) {
-	min-width: 48px;
-	text-align: center;
-}
-
-.subitem-tab-gear-flex-container-shield-row h1:nth-child(5),
-.subitem-tab-gear-flex-container-shield-row h1:nth-child(8),
-.subitem-tab-gear-flex-container-shield-row h1:nth-child(9) {
-	min-width: 32px;
-	text-align: center;
-}
-
-.subitem-tab-gear-flex-container-shield-row h1:nth-child(2),
-.subitem-tab-gear-flex-container-shield-row h1:nth-child(10),
-.subitem-tab-gear-flex-container-shield-row h1:nth-child(11) {
-	min-width: 40px;
-	text-align: center;
-}
-
-.subitem-tab-gear-flex-container-shield-row h1:nth-child(12) {
-	min-width: 42px;
-	text-align: center;
-}
-
-.subitem-tab-gear-flex-container-shield-row input[type=text]:nth-child(1),
-.subitem-tab-gear-flex-container-shield-row input[type=text]:nth-child(3) {
-	padding-left: 1px;
-	padding-right: 1px;
-	margin-right: 0px;
-	border: solid 1px palegoldenrod;
-}
-
-.subitem-tab-gear-flex-container-shield-row input[type=text]:nth-child(1) {
-	max-width: 120px;
-	text-align: left;
-}
-
-.subitem-tab-gear-flex-container-shield-row input[type=text]:nth-child(3) {
-	max-width: 65px;
-	text-align: center;
-}
-
-.subitem-tab-gear-flex-container-shield-row  input[readonly]:nth-child(9){
-	background-color: inherit;
-	text-align: center;
-	padding-left: 0px;
-	max-width: 24px;
-	padding-right: 0px;
-	margin-right: 0px;
-	margin-left: 0px;
-	margin-top: 3px;
-	margin-bottom: 2px;
-}
-
-.subitem-tab-gear-flex-container-shield-row input[type=number] {
-	text-align: right;
-	padding-left: 3px;
-	max-width: 38px;
-	padding-right: 0px;
-	margin-right: 0px;
-	margin-left: 0px;
-	border: solid 1px palegoldenrod;
-}
-
-.subitem-tab-gear-flex-container-shield-row input[type=number]:nth-child(12) {
-	text-align: right;
-	padding-left: 3px;
-	min-width: 42px;
-	padding-right: 0px;
-	margin-right: 0px;
-	margin-left: 0px;
-	border: solid 1px palegoldenrod;
-}
-
-.subitem-tab-gear-flex-container-shield-row{
-	display: flex;
-	flex-direction: row;
-	justify-content: space-between;
-	max-width: 576px;
-}
-
-/* ------------- */
-/* Item: Weapons */
-/* ------------- */
-.item-tab-gear-flex-container-weapons {
-	grid-area: theWeapons;
-	display: flex;
-	flex-direction: column;
-	justify-content: space-around;
-	margin-left: 4px;
-	padding: 0px;
-	padding-left: 5px;
-	margin-top: 8px;
-	max-height: 145px;
-	max-width: 655px;
-	background-color: #fff990;
-	border: solid 2px goldenrod;
-	border-radius: 3px;
-}
-
-.subitem-tab-gear-flex-container-weapon-row {
-	display: flex;
-	flex-direction: row;
-	justify-content: space-between;
-	max-width: 650px;
-}
-
-.subitem-tab-gear-flex-container-weapon-row input {
-	max-height: 21px;
-}
-
-.subitem-tab-gear-flex-container-weapon-row h1 {
-	min-width: 39px;
-	text-align: center;
-}
-
-.subitem-tab-gear-flex-container-weapon-row label {
-	max-width: 5px;
-	margin-left: 2px;
-	margin-top: 3px;
-	padding-right: 0px;
-}
-
-.subitem-tab-gear-flex-container-weapon-row h1:nth-child(1) {
-	min-width: 120px;
-	text-align: left;
-}
-
-.subitem-tab-gear-flex-container-weapon-row h1:nth-child(2) {
-	min-width: 65px;
-	text-align: center;
-}
-
-.subitem-tab-gear-flex-container-weapon-row h1:nth-child(3) {
-	min-width: 26px;
-	text-align: center;
-}
-
-.subitem-tab-gear-flex-container-weapon-row h1:nth-child(4) {
-	min-width: 32px;
-	text-align: left;
-}
-
-.subitem-tab-gear-flex-container-weapon-row h1:nth-child(5) {
-	min-width: 36px;
-	text-align: center;
-}
-
-.subitem-tab-gear-flex-container-weapon-row h1:nth-child(6) {
-	min-width: 40x;
-	text-align: center;
-}
-
-.subitem-tab-gear-flex-container-weapon-row h1:nth-child(7) {
-	min-width: 44px;
-	text-align: center;
-}
-
-.subitem-tab-gear-flex-container-weapon-row h1:nth-child(8) {
-	min-width: 42px;
-	text-align: center;
-}
-
-.subitem-tab-gear-flex-container-weapon-row h1:nth-child(9) {
-	min-width: 32px;
-	text-align: right;
-}
-
-.subitem-tab-gear-flex-container-weapon-row h1:nth-child(10) {
-	min-width: 34px;
-	text-align: right;
-}
-
-.subitem-tab-gear-flex-container-weapon-row h1:nth-child(11) {
-	min-width: 45px;
-	text-align: center;
-	padding-left: 0px;
-}
-
-.subitem-tab-gear-flex-container-weapon-row h1:nth-child(12) {
-	min-width: 32px;
-	text-align: center;
-	padding: 0px;
-}
-
-.subitem-tab-gear-flex-container-weapon-row h1:nth-child(13) {
-	min-width: 32px;
-	text-align: right;
-	margin-right: 6px;
-}
-
-.subitem-tab-gear-flex-container-weapon-row input[type=text]:nth-child(1) {
-	text-align: left;
-	padding-left: 1px;
-	padding-right: 1px;
-	max-width: 120px;
-	margin-right: 0px;
-	border: solid 1px palegoldenrod;
-}
-
-.subitem-tab-gear-flex-container-weapon-row input[type=text]:nth-child(2) {
-	text-align: center;
-	padding-left: 1px;
-	padding-right: 1px;
-	max-width: 68px;
-	margin-right: 0px;
-	border: solid 1px palegoldenrod;
-}
-
-.subitem-tab-gear-flex-container-weapon-row .container-checkbox-small {
-	padding-left: 10px;
-	margin-right: 3px;
-}
-
-.subitem-tab-gear-flex-container-weapon-row button:nth-child(4) {
-	margin-left: 0px;
-	margin-right: 0px;
-}
-
-.subitem-tab-gear-flex-container-weapon-row input[type=number]:nth-child(5),
-.subitem-tab-gear-flex-container-weapon-row input[type=number]:nth-child(6),
-.subitem-tab-gear-flex-container-weapon-row input[type=number]:nth-child(7),
-.subitem-tab-gear-flex-container-weapon-row input[type=number]:nth-child(9) {
-	text-align: right;
-	padding-left: 3px;
-	max-width: 38px;
-	padding-right: 0px;
-	margin-right: 0px;
-	margin-left: 0px;
-	border: solid 1px palegoldenrod;
-}
-
-.subitem-tab-gear-flex-container-weapon-row input[type=number]:nth-child(8),
-.subitem-tab-gear-flex-container-weapon-row input[type=number]:nth-child(11),
-.subitem-tab-gear-flex-container-weapon-row input[type=number]:nth-child(13) {
-	text-align: right;
-	padding-left: 3px;
-	max-width: 46px;
-	padding-right: 0px;
-	margin-right: 0px;
-	margin-left: 0px;
-	border: solid 1px palegoldenrod;
-}
-
-.subitem-tab-gear-flex-container-weapon-row input[readonly]:nth-child(10){
-	background-color: inherit;
-	text-align: center;
-	padding-left: 0px;
-	max-width: 24px;
-	padding-right: 0px;
-	margin-right: 0px;
-	margin-left: 0px;
-	margin-top: 3px;
-	margin-bottom: 2px;
-}
-
-/* --------------- */
-/* Item: Equipment */
-/* --------------- */
-.item-tab-gear-flex-container-equipment {
-	grid-area: theEquipment;
-	display: flex;
-	flex-direction: column;
-	justify-content: space-between;
-	max-width: 248px;
-	padding-left: 5px;
-	margin-left: 4px;
-	padding: 4px;
-	background-color: lightcyan;
-	border: solid 2px lightgray;
-	border-radius: 3px;
-	height: 367px;
-}
-
-.subitem-tab-gear-flex-container-equipment {
-	display: flex;
-	flex-direction: row;
-	justify-content: space-between;
-}
-
-.subitem-tab-gear-flex-container-equipment h1 {
-	margin-right: 8px;
-}
-
-.subitem-tab-gear-flex-container-equipment input[type=text] {
-	text-align: left;
-	padding-left: 1px;
-	padding-right: 1px;
-	max-width: 162px;
-	max-height: 21px;
-	margin-right: 0px;
-	border: solid 1px #eaeaea;
-}
-
-.subitem-tab-gear-flex-container-equipment input[type=number] {
-	text-align: right;
-	padding-left: 3px;
-	max-width: 120px;
-	min-width: 50px;
-	max-height: 21px;
-	padding-right: 0px;
-	margin-right: 0px;
-	margin-left: 2px;
-	border: solid 1px #eaeaea;
-}
-
-// Buttons for equipment movers.
-
-.gear-mover-plus-minus-enclosure {
-	display: flex;
-	flex-direction: row;
-	justify-content: space-between;
-	
-}
-
-.gear-mover-plus-minus-button {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	height: 22px;
-	width: 10px;
-	align-items: center;
-	padding: 0px;
-	margin-right: 2px;
-}
-
-.gear-mover-plus-minus-button button.buttonPlus,
-.gear-mover-plus-minus-button button.buttonMinus {
-	background-color: white;
-	border: solid 1px lightgray;
-	color: lightskyblue;
-	padding-left: 4px;
-	padding-right: 4px;
-	padding-top: 1px;
-	padding-bottom: 1px;
-	display: inline-block;
-	font-size: 8px;
-	margin: 0px 0px;
-	line-height: 1.25ch;
-	border-radius: 0px;
-	max-width: 10px;
-}
-
-.gear-mover-plus-minus-button button.buttonPlus span,
-.gear-mover-plus-minus-button button.buttonMinus span {
-	display: inline-block;
-	transform: rotate(-90deg);
-	text-align: center;
-}
-
-.gear-mover-plus-minus-button button.buttonPlus:hover,
-.gear-mover-plus-minus-button button.buttonMinus:hover {
-	background-color: silver;
-	transition: 0.05s;
-	color: white;
-} 
-
-/* ----------------------------------------------------------- */
-/* Item: Attacks and Maneuvers or treasures text box slideshow */
-/* ----------------------------------------------------------- */
-
-.item-tab-gear-slide-container {
-	grid-area: theSlides;
-	position: relative;
-}
-
-.item-tab-gear-slide-container h1 {
-	text-align: left;
-	line-height: 1.2;
-	font-size: 12px;
-	margin: 0px;
-}
-
-.item-tab-gear-slide-container h2 {
-	font-size: 12px;
-	text-align: center;
-	font-weight: 400;
-	line-height: 1.2;
-}
-
-.item-tab-gear-slide-container .button-left-arrow {
-	  position: absolute;
-	  top: 4.5%;
-	  left: 88%;
-	  transform: translate(-50%, -50%);
-	  color: gray;
-	  background-color: lightgray;
-	  font-size: 12px;
-	  padding: 1px 5px;
-	  border: none;
-	  cursor: pointer;
-	  border-radius: 3px;
-	  text-align: center;
-}
-
-.item-tab-gear-slide-container .button-right-arrow {
-	position: absolute;
-	  top: 4.5%;
-	  left: 92.5%;
-	  transform: translate(-50%, -50%);
-	  color: gray;
-	  background-color: lightgray;
-	  font-size: 12px;
-	  padding: 1px 5px;
-	  border: none;
-	  cursor: pointer;
-	  border-radius: 3px;
-	  text-align: center;
-}
-
-.item-tab-gear-slide-container .button-right-arrow:hover,
-.item-tab-gear-slide-container .button-left-arrow:hover {
-	background-color: gold;
-	color: black;
-}
-
-.item-tab-gear-slide-flex-container-maneuvers,
-.item-tab-gear-slide-flex-container-martial-maneuvers {
-	width: 406px;
-	height: 375px;
-	padding: 0px;
-	margin-left: 0px;
-	margin-bottom: 0px;
-	background-color: lightcyan;
-	border: solid 2px lightgray;
-	border-radius: 3px;
-}
-
-.item-tab-gear-slide-flex-container-martial-maneuvers-block {
-	display: flex;
-	flex-direction: column;
-	justify-content: space-between;
-	max-height: 280px;
-	min-height: 270px;
-}
-
-.item-tab-gear-slide-flex-container-martial-maneuvers input[type=text] {
-	height: 20px;
-}
-
-.item-tab-gear-slide-flex-container-martial-maneuvers input[type=number] {
-	height: 20px;
-	border: solid 1px lightgray;
-	margin: 0px;
-	padding: 0px;
-	padding-right: 0px;
-}
-
-.item-tab-gear-slide-flex-container-martial-maneuvers input[type=text]:nth-child(1) {
-	width: 135px;
-	border: 1px solid lightgray;
-	margin: 0px;
-	text-align: left;
-	padding-left: 2px;
-	height: 20px;
-}
-
-.item-tab-gear-slide-flex-container-martial-maneuvers input[type=text]:nth-child(2),
-.item-tab-gear-slide-flex-container-martial-maneuvers input[type=text]:nth-child(3),
-.item-tab-gear-slide-flex-container-martial-maneuvers input[type=text]:nth-child(4) {
-	width: 30px;
-	border: 1px solid lightgray;
-	margin: 0px;
-	margin-left: 6px;
-}
-
-.item-tab-gear-slide-flex-container-martial-maneuvers input[type=text]:nth-child(5) {
-	// Probably not going to be used.
-	width: 165px;
-	border: 1px solid lightgray;
-	margin: 0px;
-	margin-left: 3px;
-	text-align: left;
-}
-
-.item-tab-gear-slide-flex-container-martial-maneuvers textarea {
-	width: 135px;
-	border: 1px solid lightgray;
-	height: 36px;
-	padding: 1px;
-	font-size: 12px;
-}
-
-.item-tab-gear-slide-flex-container-maneuvers h1:nth-child(1),
-.item-tab-gear-slide-flex-container-maneuvers h2:nth-child(1) {
-	width: 108px;
-}
-
-.item-tab-gear-slide-flex-container-maneuvers h1:nth-child(2),
-.item-tab-gear-slide-flex-container-maneuvers h2:nth-child(2),
-.item-tab-gear-slide-flex-container-maneuvers h1:nth-child(3),
-.item-tab-gear-slide-flex-container-maneuvers h2:nth-child(3),
-.item-tab-gear-slide-flex-container-maneuvers h1:nth-child(4),
-.item-tab-gear-slide-flex-container-maneuvers h2:nth-child(4),
-.item-tab-gear-slide-flex-container-martial-maneuvers h1:nth-child(2),
-.item-tab-gear-slide-flex-container-martial-maneuvers h1:nth-child(3),
-.item-tab-gear-slide-flex-container-martial-maneuvers h1:nth-child(4) {
-	width: 40px;
-	padding: 0px;
-	margin: 0px;
-	text-align: center;
-}
-
-.item-tab-gear-slide-flex-container-maneuvers h1:nth-child(5),
-.item-tab-gear-slide-flex-container-maneuvers h2:nth-child(5) {
-	text-align: left;
-	padding-left: 0px;
-	margin-left: 0px;
-}
-
-.item-tab-gear-slide-flex-container-martial-maneuvers h1:nth-child(1) {
-	width: 138px;
-}
-
-.item-tab-gear-slide-flex-container-martial-maneuvers h1:nth-child(5) {
-	text-align: left;
-	padding-left: 0px;
-	margin-left: 0px;
-}
-
-.subitem-tab-gear-slide-flex-container-maneuvers-heading,
-.subitem-tab-gear-slide-flex-container-martial-maneuvers-heading {
-	flex-direction: row;
-	display: flex;
-	justify-content: flex-start;
-	width: 402px;
-	height: 19px;
-	padding: 0px;
-	margin-left: 0px;
-	padding-top: 5px;
-	padding-left: 4px;
-	margin-bottom: 0px;
-	background-color: lightcyan;
-}
-
-.subitem-tab-gear-slide-flex-container-maneuvers-light-row,
-.subitem-tab-gear-slide-flex-container-maneuvers-dark-row {
-	flex-direction: row;
-	display: flex;
-	justify-content: flex-start;
-	width: 402px;
-	height: 19px;
-	padding: 0px;
-	margin-left: 0px;
-	padding-top: 4px;
-	padding-left: 4px;
-	margin-top: 0px;
-	margin-bottom: 0px;
-}
-
-.subitem-tab-gear-slide-flex-container-maneuvers-light-row {
-	background-color: white;
-}
-
-.subitem-tab-gear-slide-flex-container-maneuvers-dark-row {
-	background-color: lightcyan;
-}
-
-.subitem-tab-gear-slide-flex-container-martial-maneuvers-row {
-	flex-direction: row;
-	display: flex;
-	justify-content: space-between;
-	width: 397px;
-	height: 40px;
-	padding: 0px;
-	margin-left: 0px;
-	padding-top: 0px;
-	padding-left: 4px;
-	margin-top: 0px;
-	margin-bottom: 0px;
-}
-
-
-.subitem-tab-gear-slide-flex-container-martial-name-and-points {
-	display: flex;
-	flex-direction: column;
-	justify-content: space-between;
-	min-height: 42px;
-	max-width: 134px;
-	padding: 0px 0px;
-}
-
-.subitem-tab-gear-slide-flex-container-martial-name-and-points-row {
-	display: flex;
-	flex-direction: row;
-	justify-content: right;
-}
-
-.subitem-tab-gear-slide-flex-container-martial-name-and-points-row h1 {
-	padding-right: 0px;
-	padding-left: 30px;
-	padding-top: 4px;
-}
-
-.subitem-tab-gear-slide-flex-container-martial-name-and-points-row input[type=number] {
-	max-width: 42px;
-}
-
-/* Basic Attack */
-
-.subitem-tab-gear-slide-flex-container-standard-attack {
-	display: flex;
-	flex-direction: row;
-	justify-content: left;
-	margin-left: 3px;
-	margin-right: 3px;
-	margin-top: 13px;
-	align-items: center;
-}
-
-.subitem-tab-gear-slide-flex-container-standard-attack h1 {
-	max-width: 90px;
-	margin-right: 5px;
-	margin-top: 2px;
-}
-
-.subitem-tab-gear-slide-flex-container-standard-attack span {
-	min-width: 42px;
-	align-content: left;
-}
-
-.subitem-tab-gear-slide-flex-container-standard-attack h2:nth-child(3),
-.subitem-tab-gear-slide-flex-container-standard-attack h2:nth-child(4),
-.subitem-tab-gear-slide-flex-container-standard-attack h2:nth-child(5) {
-	width: 40px;
-	text-align: center;
-	padding-right: 0px;
-	margin-top: 2px;
-}
-
-.subitem-tab-gear-slide-flex-container-standard-attack h2:nth-child(6) {
-	max-width: 130px;
-	text-align: left;
-	margin-right: 6px;
-	margin-top: 2px;
-}
-
-.subitem-tab-gear-slide-flex-container-range-modifiers {
-	flex-direction: row;
-	display: flex;
-	justify-content: space-between;
-	width: 397px;
-	height: 30px;
-	padding: 0px;
-	margin-left: 0px;
-	padding-top: 0px;
-	padding-left: 5px;
-	margin-top: 13px;
-	margin-bottom: 0px;
-}
-
-.subitem-tab-gear-slide-range-modifier-container-first,
-.subitem-tab-gear-slide-range-modifier-container {
-	display: flex;
-	flex-direction: column;
-	justify-content: space-between;
-	height: 30px;
-}
-
-.subitem-tab-gear-slide-range-modifier-container-first {
-	min-width: 83px;
-	align-items: flex-start;
-}
-
-.subitem-tab-gear-slide-range-modifier-container {
-	min-width: 50px;
-	align-items: center;
-}
-
-.subitem-tab-gear-slide-range-modifier-container h2:nth-child(1) {
-	font-weight: bold;
-}
-
-.subitem-tab-gear-slide-range-modifier-container-first h2 {
-	font-weight: bold;
-}
-
-/* Item: Hit Locations */
-.item-tab-gear-slide-flex-container-hit-locations {
-	display: flex;
-	flex-direction: column;
-	justify-content: space-between;
-	width: 403px;
-	height: 375px;
-	padding: 0px;
-	padding-left: 3px;
-	background-color: lightcyan;
-	margin-left: 0px;
-	margin-bottom: 0px;
-	border: solid 2px lightgray;
-	border-radius: 3px;
-}
-
-.item-gear-slide-container-hit-locations-flex-row {
-	display: flex;
-	flex-direction: row;
-	justify-content: space-between;
-	border-radius: 3px;
-	width: 400px;
-}
-
-/* Special Hit Locations */
-.item-gear-slide-flex-container-hit-locations-special {
-	width: 260px;
-	height: 145px;
-	display: flex;
-	flex-direction: column;
-	justify-content: space-between;
-}
-
-.item-gear-slide-flex-container-hit-locations-special label {
-	display: inline-block;
-	margin-left: 14px;
-	margin-right: 4px;
-	margin-top: 2px; /* A fix to get a uniform look with the hit location table */
-}
-
-.subitem-gear-slide-flex-container-hit-locations-special-heading {
-	background-color: lightcyan;
-	height: 20px;
-	margin-bottom: 3px;
-}
-
-.subitem-gear-slide-flex-container-hit-locations-special-heading h1:nth-child(1){
-	width: 42px;
-	text-align: left;
-	margin-left: 2px;
-}
-
-.subitem-gear-slide-flex-container-hit-locations-special-heading h1:nth-child(2){
-	width: 40px;
-	text-align: center;
-	margin-left: 3px;
-}
-
-.subitem-gear-slide-flex-container-hit-locations-special-heading h1:nth-child(3){
-	width: 52px;
-	text-align: center;
-	margin-left: 30px;
-}
-
-.subitem-gear-slide-flex-container-hit-locations-special-heading h1:nth-child(4){
-	width: 44px;
-	text-align: right;
-	margin-left: 15px;
-}
-
-.subitem-gear-slide-flex-container-hit-locations-special-top-row,
-.subitem-gear-slide-flex-container-hit-locations-special-middle-row,
-.subitem-gear-slide-flex-container-hit-locations-special-bottom-row {
-	display: flex;
-	flex-direction: row;
-	justify-content: space-between;
-	background-color: white;
-	border-left: solid 1px lightgray;
-	border-right: solid 1px lightgray;
-	width: 260px;
-	height: 20px;
-}
-
-.subitem-gear-slide-flex-container-hit-locations-special-top-row {
-	border-top: solid 1px lightgray;
-	border-top-left-radius: 3px;
-	border-top-right-radius: 3px;
-	padding-top: 5px;
-}
-
-.subitem-gear-slide-flex-container-hit-locations-special-bottom-row {
-	border-bottom: solid 1px lightgray;
-	border-bottom-left-radius: 3px;
-	border-bottom-right-radius: 3px;
-}
-
-.subitem-gear-slide-flex-container-hit-locations-special-top-row h1,
-.subitem-gear-slide-flex-container-hit-locations-special-middle-row h1,
-.subitem-gear-slide-flex-container-hit-locations-special-bottom-row h1 {
-	width: 65px;
-	text-align: center;
-}
-
-.subitem-gear-slide-flex-container-hit-locations-special-top-row h1:nth-child(4),
-.subitem-gear-slide-flex-container-hit-locations-special-middle-row h1:nth-child(4),
-.subitem-gear-slide-flex-container-hit-locations-special-bottom-row h1:nth-child(4) {
-	width: 35px;
-	text-align: right;
-	padding-right: 19px;
-}
-
-/* Targeting Options */
-.item-gear-slide-container-hit-locations-options {
-	width: 130px;
-	height: 100px;
-	margin-top: 50px;
-}
-
-.subitem-gear-slide-container-hit-locations-options-top,
-.subitem-gear-slide-container-hit-locations-options-bottom {
-	display: flex;
-	flex-direction: row;
-	justify-content: flex-start;
-	width: 115px;
-	margin: 3px;
-	margin-bottom: 15px;
-}
-
-.subitem-gear-slide-container-hit-locations-options-top {
-	margin-left: 10px;
-}
-
-.subitem-gear-slide-container-hit-locations-options-top h1,
-.subitem-gear-slide-container-hit-locations-options-bottom h1 {
-	padding-top: 4px;
-	margin: 0px;
-}
-
-.subitem-gear-slide-container-hit-locations-options-top label {
-	max-width: 0px;
-	margin-left: 2px;
-	margin-right: 0px;
-	margin-top: 3px;
-	padding-right: 0px;
-}
-
-.subitem-gear-slide-container-hit-locations-options-bottom input {
-	margin-left: 5px;
-	border: solid 1px lightgray;
-}
-
-/* Hit Location Table */
-.item-gear-slide-container-hit-locations-table {
-	width: 399px;
-	height: 215px;
-}
-
-.item-gear-slide-container-hit-locations-table h1 {
-	width: 51px;
-	text-align: center;
-}
-
-.item-gear-slide-container-hit-locations-table label {
-	display: inline-block;
-	margin-left: 14px;
-	margin-right: 3px;
-}
-
-.subitem-gear-slide-container-hit-locations-table-heading {
-	background-color: lightcyan;
-	height: 20px;
-	margin-bottom: 3px;
-}
-
-.subitem-gear-slide-container-hit-locations-table-heading h1 {
-	text-align: center;
-	margin-left: 2px;
-}
-
-.subitem-gear-slide-container-hit-locations-table-heading h1:nth-child(1){
-	width: 42px;
-	text-align: left;
-}
-
-.subitem-gear-slide-container-hit-locations-table-heading h1:nth-child(2){
-	width: 34px;
-	text-align: center;
-	margin-right: 9px;
-	margin-left: 3px;
-}
-
-.subitem-gear-slide-container-hit-locations-table-top-row,
-.subitem-gear-slide-container-hit-locations-table-middle-row,
-.subitem-gear-slide-container-hit-locations-table-bottom-row {
-	height: 19px;
-}
-
-.subitem-gear-slide-container-hit-locations-table-top-row h1:nth-child(2),
-.subitem-gear-slide-container-hit-locations-table-middle-row h1:nth-child(2),
-.subitem-gear-slide-container-hit-locations-table-bottom-row h1:nth-child(2){
-	width: 40x;
-	text-align: center;
-	margin-right: 11px;
-}
-
-.subitem-gear-slide-container-hit-locations-table-top-row h1:nth-child(2),
-.subitem-gear-slide-container-hit-locations-table-middle-row h1:nth-child(2),
-.subitem-gear-slide-container-hit-locations-table-bottom-row h1:nth-child(2){
-	width: 34px;
-	text-align: center;
-	margin-left: 21px;
-}
-
-.subitem-gear-slide-container-hit-locations-table-top-row h1:nth-child(6),
-.subitem-gear-slide-container-hit-locations-table-middle-row h1:nth-child(6),
-.subitem-gear-slide-container-hit-locations-table-bottom-row h1:nth-child(6){
-	width: 45px;
-	text-align: center;
-	margin-left: 6px;
-	margin-right: 0px;
-}
-
-.subitem-gear-slide-container-hit-locations-table-top-row h1:nth-child(7),
-.subitem-gear-slide-container-hit-locations-table-middle-row h1:nth-child(7),
-.subitem-gear-slide-container-hit-locations-table-bottom-row h1:nth-child(7){
-	width: 34px;
-	text-align: right;
-	margin-left: 4px;
-	margin-right: 17px;
-}
-
-.subitem-gear-slide-container-hit-locations-table-top-row {
-	background-color: white;
-	border-top: solid 1px lightgray;
-	border-left: solid 1px lightgray;
-	border-right: solid 1px lightgray;
-	border-top-left-radius: 3px;
-	border-top-right-radius: 3px;
-}
-
-.subitem-gear-slide-container-hit-locations-table-middle-row {
-	background-color: white;
-	border-left: solid 1px lightgray;
-	border-right: solid 1px lightgray;
-}
-
-.subitem-gear-slide-container-hit-locations-table-bottom-row {
-	background-color: white;
-	border-left: solid 1px lightgray;
-	border-right: solid 1px lightgray;
-	border-bottom: solid 1px lightgray;
-	border-bottom-left-radius: 3px;
-	border-bottom-right-radius: 3px;
-	padding-bottom: 5px;
-}
-
-/* Item: Slide of treasure and notes box  */
-.item-tab-gear-slide-treasure-text {
-	width: 402px;
-	height: 367px;
-	padding: 0px;
-	margin-left: 0px;
-	margin-bottom: 0px;
-}
-
-.item-tab-gear-slide-treasure-text textarea {
-	width: 398px;
-	height: 367px;
-	margin: 0px;
-	border: solid 2px lightgray;
-	border-radius: 3px;
-}
-
-/* hide all gear tab slides by default */
-
-.item-tab-gear-slide-flex-container-maneuvers,
-.item-tab-gear-slide-flex-container-martial-maneuvers,
-.item-tab-gear-slide-flex-container-hit-locations,
-.item-tab-gear-slide-treasure-text {
-	display: none;
-}
-
-/* show the selected gear slide */
-.item-gear-slideshow[value="1"] ~ div.item-tab-gear-slide-flex-container-maneuvers,
-.item-gear-slideshow[value="2"] ~ div.item-tab-gear-slide-flex-container-martial-maneuvers,
-.item-gear-slideshow[value="3"] ~ div.item-tab-gear-slide-flex-container-hit-locations,
-.item-gear-slideshow[value="4"] ~ div.item-tab-gear-slide-treasure-text {
-	display: block;
-	position: relative;
-}
-
-/* ---------------------------------------------------------------- */
-/* Custom radio button from w3 schools.                             */
-/* https://www.w3schools.com/howto/howto_css_custom_checkbox.asp    */
-/* ---------------------------------------------------------------- */
-
-/* Customize the label (the container) */
-.custom-radio-button-container {
-	display: block;
-	position: relative;
-	padding: 0px;
-	margin: 0px;
-	cursor: pointer;
-	font-size: 12px;
-	max-width: 0px;
-	max-height: 0px;
-	-webkit-user-select: none;
-	-moz-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
-	background-color: orange;
-}
-
-/* Hide the browser's default radio button */
-.custom-radio-button-container input {
-	position: absolute;
-	opacity: 0;
-	cursor: pointer;
-	height: 0;
-	width: 0;
-}
-
-/* Create a custom radio button */
-.custom-radio-button {
-	position: absolute;
-	top: -2px; /* A fix to get a uniform look with the hit location table */
-	left: 0px;
-	height: 11px;
-	width: 11px;
-	background-color: white;
-	border: solid 2px lightsteelblue;
-	border-radius: 50%;
-	margin-bottom: 0px;
-	padding: 0px;
-}
-
-/* On mouse-over, add a grey background color */
-.custom-radio-button-container:hover input ~ .custom-radio-button {
-	background-color: lightsteelblue;
-}
-
-/* When the radio button is checked, add a blue background */
-.custom-radio-button-container input:checked ~ .custom-radio-button {
-	background-color: indianred;
-	border: solid 2px indianred;
-}
-
-/* Create the indicator (the dot/circle - hidden when not checked) */
-.custom-radio-button:after {
-	content: "";
-	position: absolute;
-	display: none;
-}
-
-/* Show the indicator (dot/circle) when checked */
-.custom-radio-button-container input:checked ~ .custom-radio-button:after {
-	display: block;
-}
-
-/* Style the indicator (dot/circle) */
-.custom-radio-button-container .custom-radio-button:after {
-	top: 0px;
-	left: 0px;
-	width: 7px;
-	height: 7px;
-	border-radius: 50%;
-	border: solid 2px white;
-	background: indianred;
-	margin: 0px;
-	padding: 0px;
-}
-
-/* ---------------------------------------------------------------- */
-/* Jackob's Roll Template                                           */
-/* https://wiki.roll20.net/Building_Character_Sheets/Roll_Templates */
-/* ---------------------------------------------------------------- */
-
-/* Three different Templates for attacks, armor activation, and skills ability checks. */
-.sheet-rolltemplate-custom,
-.sheet-rolltemplate-custom-normal-attack,
-.sheet-rolltemplate-custom-power-attack,
-.sheet-rolltemplate-custom-attack,
-.sheet-rolltemplate-custom-activate,
-.sheet-rolltemplate-custom-show {
-	margin-left: -37px;
-	color: #181818;
-}
-
-.withoutavatars .sheet-rolltemplate-custom,
-.withoutavatars .sheet-rolltemplate-custom-normal-attack,
-.withoutavatars .sheet-rolltemplate-custom-power-attack,
-.withoutavatars .sheet-rolltemplate-custom-attack,
-.withoutavatars .sheet-rolltemplate-custom-activate,
-.withoutavatars .sheet-rolltemplate-custom-show {
-	margin-left: -7px;
-	color: #181818;
-}
-
-.sheet-rolltemplate-custom .sheet-container,
-.sheet-rolltemplate-custom-normal-attack .sheet-container,
-.sheet-rolltemplate-custom-power-attack .sheet-container,
-.sheet-rolltemplate-custom-attack .sheet-container,
-.sheet-rolltemplate-custom-activate .sheet-container,
-.sheet-rolltemplate-custom-show .sheet-container {
-  border: 1px solid;
-  /* by default, the border is the same color as the header. You can change this here, e.g. to black */
-  border-color: var(--header-bg-color);
-}
-
-/* Header formatting - title and subtitle */
-.sheet-rolltemplate-custom .sheet-header {
-	  background-color: orange;
-	  /* change text-align to center to center the header text */
-	  text-align: left;
-	  color: var(--header-text-color);
-	  padding: 5px;
+	/* ----------------------------------------------------- */
+	/* Skills                                                */
+	/* Organized into a 2x3 grid of containers               */
+	/* ----------------------------------------------------- */
+	.grid-container-skills-tab {
+		display: grid;
+		grid-template-areas:
+		"theSkills1 theCombatSkills"
+		"theSkills2 theLanguageSkills"
+		"theSkills3 theEnhancers";
+		grid-gap: 6px;
+		grid-template-columns: 358px 322px;
+		grid-template-rows: 273px 251px 259px;
+		max-width: 692px;
+		padding: 0px;
+		padding-left: 0px;
+		padding-top: 6px;
+		margin-bottom: 0px;
+		font-size: 16px;
+		background-color: gold;
+		border: 3px solid #fff990;
+		border-radius: 5px;
+		justify-content: middle;
+		min-height: 795px;
 	}
 	
-.sheet-rolltemplate-custom-attack .sheet-header {
-  background-color: indianred;
-  /* change text-align to center to center the header text */
-  text-align: left;
-  color: var(--header-text-color);
-  padding: 5px;
-}
-
-.sheet-rolltemplate-custom-normal-attack .sheet-header {
-	  background-color: olivedrab;
-	  /* change text-align to center to center the header text */
-	  text-align: left;
-	  color: var(--header-text-color);
-	  padding: 5px;
+	.grid-container-skills-tab h1 {
+		display:inline-block;
+		margin-left: 0px;
+		padding-left: 2px;
+		padding-right: 0px;
+		padding-top: 0px;
+		padding-bottom: 0px;
+		margin: 0px;
+		margin-top: 1px;
+		font-size: 13px;
+		font-style: normal;
+		line-height: 1.10;
+		text-align: center;
 	}
 	
-.sheet-rolltemplate-custom-power-attack .sheet-header {
-	 background-color: #9184E2; // lighter than mediumslateblue;
-	  /* change text-align to center to center the header text */
-	  text-align: left;
-	  color: var(--header-text-color);
-	  padding: 5px;
-	}
-
-.sheet-rolltemplate-custom-activate .sheet-header {
-	  background-color: steelblue;
-	  /* change text-align to center to center the header text */
-	  text-align: left;
-	  color: var(--header-text-color);
-	  padding: 5px;
+	.grid-container-skills-tab input[type=text] {
+		height: 22px;
 	}
 	
-.sheet-rolltemplate-custom-show .sheet-header {
-	  background-color: lightslategray;
-	  /* change text-align to center to center the header text */
-	  text-align: left;
-	  color: var(--header-text-color);
-	  padding: 5px;
+	.grid-container-skills-tab .custom-select,
+	.grid-container-skills-tab .custom-select-skill,
+	.grid-container-skills-tab .custom-select-alternate,
+	.grid-container-skills-tab .custom-select-alternate-skill{
+		font-size: 13px;
+		max-width: 110px;
+		margin-left: 3px;
+		padding-left: 3px;
 	}
-
-.sheet-rolltemplate-custom .sheet-title,
-.sheet-rolltemplate-custom-normal-attack .sheet-title,
-.sheet-rolltemplate-custom-power-attack .sheet-title,
-.sheet-rolltemplate-custom-attack .sheet-title,
-.sheet-rolltemplate-custom-activate .sheet-title,
-.sheet-rolltemplate-custom-show .sheet-title {
-	font-size:1.2em;
-}
-
-.sheet-rolltemplate-custom .sheet-subtitle,
-.sheet-rolltemplate-custom-normal-attack .sheet-subtitle,
-.sheet-rolltemplate-custom-power-attack .sheet-subtitle,
-.sheet-rolltemplate-custom-attack .sheet-subtitle,
-.sheet-rolltemplate-custom-activate .sheet-subtitle,
-.sheet-rolltemplate-custom-show .sheet-subtitle {
-	font-size:1.0em;
-	padding-top: 0.1em;
-}
-
-/* example colors */
-.sheet-rolltemplate-custom .sheet-container,
-.sheet-rolltemplate-custom-normal-attack .sheet-container,
-.sheet-rolltemplate-custom-power-attack .sheet-container,
-.sheet-rolltemplate-custom-attack .sheet-container,
-.sheet-rolltemplate-custom-activate .sheet-container,
-.sheet-rolltemplate-custom-show .sheet-container  {
-	/* this is the default color */
-	--header-bg-color: black;
-	--header-text-color: #FFF;
-}
-
-/* Allprops part */
-.sheet-rolltemplate-custom .sheet-content,
-.sheet-rolltemplate-custom-normal-attack .sheet-content,
-.sheet-rolltemplate-custom-power-attack .sheet-content,
-.sheet-rolltemplate-custom-attack .sheet-content,
-.sheet-rolltemplate-custom-activate .sheet-content,
-.sheet-rolltemplate-custom-show .sheet-content {
-	display: grid;
-	background: #FFF;
-	/* Header formatting - modify the column layout below */
-	grid-template-columns: auto auto;
-	/* Line height to match default roll template */
-	line-height:1.4em;
-}
-
-.sheet-rolltemplate-custom .sheet-content > div,
-.sheet-rolltemplate-custom-normal-attack .sheet-content > div,
-.sheet-rolltemplate-custom-power-attack .sheet-content > div,
-.sheet-rolltemplate-custom-attack .sheet-content > div,
-.sheet-rolltemplate-custom-activate .sheet-content > div,
-.sheet-rolltemplate-custom-show .sheet-content > div {
-	padding: 5px;
-}
-
-/* Left column */
-.sheet-rolltemplate-custom .sheet-content .sheet-key,
-.sheet-rolltemplate-custom-normal-attack .sheet-content .sheet-key,
-.sheet-rolltemplate-custom-power-attack .sheet-content .sheet-key,
-.sheet-rolltemplate-custom-attack .sheet-content .sheet-key,
-.sheet-rolltemplate-custom-activate .sheet-content .sheet-key,
-.sheet-rolltemplate-custom-show .sheet-content .sheet-key {
-	font-weight: bold;
-	padding-right: 10px;
-	text-align: right;
-}
-
-/* Empty rule, use this if you want to change the right column 
-.sheet-rolltemplate-custom .sheet-value {
-}
-*/
-
-/* Make even-numbered rows grey */
-.sheet-rolltemplate-custom .sheet-content :nth-child(4n+3),
-.sheet-rolltemplate-custom .sheet-content :nth-child(4n),
-.sheet-rolltemplate-custom-normal-attack .sheet-content :nth-child(4n+3),
-.sheet-rolltemplate-custom-normal-attack .sheet-content :nth-child(4n),
-.sheet-rolltemplate-custom-power-attack .sheet-content :nth-child(4n+3),
-.sheet-rolltemplate-custom-power-attack .sheet-content :nth-child(4n),
-.sheet-rolltemplate-custom-attack .sheet-content :nth-child(4n+3),
-.sheet-rolltemplate-custom-attack .sheet-content :nth-child(4n),
-.sheet-rolltemplate-custom-activate .sheet-content :nth-child(4n+3),
-.sheet-rolltemplate-custom-activate .sheet-content :nth-child(4n),
-.sheet-rolltemplate-custom-show .sheet-content :nth-child(4n+3),
-.sheet-rolltemplate-custom-show .sheet-content :nth-child(4n) {
-	background:#EEE;
-}
-
-/* Description field */
-.sheet-rolltemplate-custom .sheet-desc,
-.sheet-rolltemplate-custom-normal-attack .sheet-desc,
-.sheet-rolltemplate-custom-power-attack .sheet-desc,
-.sheet-rolltemplate-custom-attack .sheet-desc,
-.sheet-rolltemplate-custom-activate .sheet-desc,
-.sheet-rolltemplate-custom-show .sheet-desc {
-	grid-column: span 2;
-	padding-right: 10px;
-	text-align: left;
-}
-
-// Dice roll face colors. Needed to prevent problems with dark mode.
-
-.sheet-rolltemplate-custom .inlinerollresult,
-.sheet-rolltemplate-custom-normal-attack .inlinerollresult,
-.sheet-rolltemplate-custom-power-attack .inlinerollresult,
-.sheet-rolltemplate-custom-attack .inlinerollresult,
-.sheet-rolltemplate-custom-activate .inlinerollresult,
-.sheet-rolltemplate-custom-show .inlinerollresult {
-	display: inline-block;
-	min-width: 1.5em;
-	text-align: center;
-	border: 2px solid palegoldenrod;
-	background: #fff990;
-}
-
-.sheet-rolltemplate-custom .sheet-template-wrapper .inlinerollresult,
-.sheet-rolltemplate-custom-normal-attack .sheet-template-wrapper .inlinerollresult,
-.sheet-rolltemplate-custom-power-attack .sheet-template-wrapper .inlinerollresult,
-.sheet-rolltemplate-custom-attack .sheet-template-wrapper .inlinerollresult,
-.sheet-rolltemplate-custom-activate .sheet-template-wrapper .inlinerollresult,
-.sheet-rolltemplate-custom-show .sheet-template-wrapper .inlinerollresult {
-	background-color: #fff990;
-	border: 2px solid palegoldenrod;
-}
-
-.sheet-rolltemplate-custom .sheet-template-wrapper .inlinerollresult.fullcrit,
-.sheet-rolltemplate-custom-normal-attack .sheet-template-wrapper .inlinerollresult.fullcrit,
-.sheet-rolltemplate-custom-power-attack .sheet-template-wrapper .inlinerollresult.fullcrit,
-.sheet-rolltemplate-custom-attack .sheet-template-wrapper .inlinerollresult.fullcrit,
-.sheet-rolltemplate-custom-activate .sheet-template-wrapper .inlinerollresult.fullcrit,
-.sheet-rolltemplate-custom-show .sheet-template-wrapper .inlinerollresult.fullcrit {
-	border: 2px solid #3FB315;
-}
-
-.sheet-rolltemplate-custom .sheet-template-wrapper .inlinerollresult.fullfail,
-.sheet-rolltemplate-custom-normal-attack .sheet-template-wrapper .inlinerollresult.fullfail,
-.sheet-rolltemplate-custom-power-attack .sheet-template-wrapper .inlinerollresult.fullfail,
-.sheet-rolltemplate-custom-attack .sheet-template-wrapper .inlinerollresult.fullfail,
-.sheet-rolltemplate-custom-activate .sheet-template-wrapper .inlinerollresult.fullfail,
-.sheet-rolltemplate-custom-show .sheet-template-wrapper .inlinerollresult.fullfail {
-	border: 2px solid #B31515;
-}
\ No newline at end of file
+	
+	/* Item: Skill Containers for Skill Groups 01, 02, and 03 */
+	.item-skillsTab-flex-container-skills-group01,
+	.item-skillsTab-flex-container-skills-group02,
+	.item-skillsTab-flex-container-skills-group03 {
+		display: flex;
+		flex-direction: column;
+		justify-content: space-evenly;
+		max-width: 358px;
+		margin-left: 5px;
+		background-color: #fff990; 
+		border: solid 2px goldenrod;
+		border-radius: 3px;
+		line-height: 1.10;
+		padding-left: 1px;
+		padding-right: 4px;
+	}
+	
+	.item-skillsTab-flex-container-skills-group01 {
+		grid-area: theSkills1;
+		padding-bottom: 2px;
+	}
+	
+	.item-skillsTab-flex-container-skills-group02 {
+		grid-area: theSkills2;
+		padding-top: 3px;
+		padding-bottom: 2px;
+	}
+	
+	.item-skillsTab-flex-container-skills-group03 {
+		grid-area: theSkills3;
+		padding-top: 3px;
+		padding-bottom: 2px;
+		margin-bottom: 4px;
+	}
+	
+	.item-skillsTab-flex-container-skills-group01 input[type=number],
+	.item-skillsTab-flex-container-skills-group02 input[type=number],
+	.item-skillsTab-flex-container-skills-group03 input[type=number] {
+		text-align: right;
+		padding-right: 0px;
+		margin-top: 0px;
+		margin-bottom: 0px;
+		border: solid 1px palegoldenrod;
+		max-height: 22px;
+	}
+	
+	.item-skillsTab-flex-container-skills-group01 input[readonly],
+	.item-skillsTab-flex-container-skills-group02 input[readonly],
+	.item-skillsTab-flex-container-skills-group03 input[readonly] {
+		text-align: center;
+		background-color: #fff990; 
+		border: transparent;
+		max-width: 24px;
+	}
+	
+	.item-skillsTab-flex-container-skills-group01 input[type=text]:nth-child(1),
+	.item-skillsTab-flex-container-skills-group02 input[type=text]:nth-child(1),
+	.item-skillsTab-flex-container-skills-group03 input[type=text]:nth-child(1) {
+		max-width: 140px;
+		margin-top: 1px;
+		margin-bottom: 1px;
+		font-size: 13px;
+		text-align: left;
+		margin-left: 4px;
+		margin-right: 1px;
+		padding-left: 1px;
+		padding-right: 1px;
+		border: solid 1px palegoldenrod;
+	}
+	
+	/* Sub-Item: Flex containers for rows */
+	.subitem-skillsTab-grid-container-skills-heading-left {
+		grid-template-areas: "skillName skillType rollChance . skillCost";
+		grid-template-columns: 164px 70px 26px 38px 46px;
+		display: grid;
+	}
+	
+	.subitem-skillsTab-grid-container-skills-heading-left-name {
+		grid-area: skillName;
+		padding-left: 5px;
+	}
+	
+	.subitem-skillsTab-grid-container-skills-heading-left-name h2 {
+		text-align: left;
+	}
+	
+	.subitem-skillsTab-grid-container-skills-heading-left-type {
+		grid-area: skillType;
+		text-align: center;
+	}
+	
+	.subitem-skillsTab-grid-container-skills-heading-left-roll {
+		grid-area: rollChance;
+		text-align: center;
+	}
+	
+	.subitem-skillsTab-grid-container-skills-heading-left-cost {
+		grid-area: skillCost;
+		text-align: center;
+	}
+	
+	.subitem-skillsTab-flex-container-skill {
+		text-align: left;
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		max-height: 24px;
+	}
+	
+	.subitem-skillsTab-flex-container {
+		text-align: right;
+	}
+	
+	/* Buttons for skill movers. */
+	
+	.skill-mover-plus-minus-enclosure {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+	}
+	
+	.skill-mover-plus-minus-button {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		height: 24px;
+		width: 10px;
+		align-items: center;
+		padding: 0px;
+		margin-right: 2px;
+		margin-left: 2px;
+	}
+	
+	.skill-mover-plus-minus-button button.buttonPlus,
+	.skill-mover-plus-minus-button button.buttonMinus {
+		background-color: LemonChiffon;
+		border: solid 1px silver;
+		color: slategray;
+		padding-left: 4px;
+		padding-right: 4px;
+		padding-top: 1px;
+		padding-bottom: 1px;
+		display: inline-block;
+		font-size: 10px;
+		margin: 0px 0px;
+		line-height: 1.25ch;
+		border-radius: 0px;
+		max-width: 10px;
+	}
+	
+	.skill-mover-plus-minus-button button.buttonPlus span,
+	.skill-mover-plus-minus-button button.buttonMinus span {
+		display: inline-block;
+		transform: rotate(-90deg);
+		text-align: center;
+	}
+	
+	.skill-mover-plus-minus-button button.buttonPlus:hover,
+	.skill-mover-plus-minus-button button.buttonMinus:hover {
+		background-color: gray;
+		color: white;
+		transition: 0.05s;
+	} 
+	
+	/* Item: Skill Container for combat skill flex "columns" */
+	.item-skillsTab-grid-container-combat-skills {
+		grid-area: theCombatSkills;
+		display: grid;
+		grid-template-areas: 
+		"skillNames skillLevels skillTypes skillCosts"
+		"skillLevelNames skillLevels . skillCosts";
+		grid-template-columns: 150px 50px 61px 38px;
+		grid-template-rows: 199px 76px;
+		max-width: 292px;
+		padding-left: 4px;
+		padding-right: 4px;
+		padding-bottom: 3px;
+		padding-top: 0px;
+		background-color: #fff990; 
+		border: solid 2px goldenrod;
+		border-radius: 3px;
+		line-height: 1.10;
+	}
+	
+	/* Subitem: flex container for combat skill name "column" */
+	.subitem-skillsTab-flex-container-combat-skills-names {
+		grid-area: skillNames;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		margin-bottom: 3px;
+		padding-top: 0px;
+	}
+	
+	.subitem-skillsTab-flex-container-combat-skills-names input[type=text] {
+		max-width: 140px;
+		margin-top: 0px;
+		margin-bottom: 3px;
+		font-size: 13px;
+		text-align: left;
+		margin-left: 4px;
+		padding-left: 1px;
+		padding-right: 1px;
+		border: solid 1px palegoldenrod;
+	}
+	
+	.subitem-skillsTab-flex-container-combat-skills-names h1 {
+		text-align: left;
+		padding-top: 3px;
+		padding-bottom: 3px;
+		max-height: 18px;
+	}
+	
+	.subitem-skillsTab-flex-container-combat-skills-level-names {
+		grid-area: skillLevelNames;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		margin-bottom: 8px;
+		padding-top: 0px;
+	} 
+	
+	.subitem-skillsTab-flex-container-combat-skills-level-names h1 {
+		text-align: left;
+		padding-top: 3px;
+		padding-bottom: 3px;
+		max-height: 18px;
+		font-weight: bold;
+	}
+	
+	/* Subitem: flex container for combat skill levels "column" */
+	.subitem-skillsTab-flex-container-combat-skills-levels {
+		grid-area: skillLevels;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		margin-top: 7px;
+		margin-bottom: 6px;
+		max-height: 264px;
+		margin-top: 3px;
+		padding-bottom: 2px;
+	}
+	
+	.subitem-skillsTab-flex-container-combat-skills-levels input[type=number] {
+		text-align: center;
+		padding-left: 3px;
+		padding-right: 1px; /* Fix for shifting spinners on focus */
+		max-width: 45px;
+		margin-right: 5px;
+		padding-bottom: 1px;
+		max-height: height: 22px;
+		border: solid 1px palegoldenrod;
+	}
+	
+	.subitem-skillsTab-flex-container-combat-skills-levels h1 {
+		text-align: left;
+		padding-top: 0px;
+		padding-bottom: 0px;
+		max-height: 18px;
+		margin-left: 0px;
+	}
+	
+	/* Subitem: flex container for combat skill type "column" */
+	.subitem-skillsTab-flex-container-combat-skills-types {
+		grid-area: skillTypes;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		margin-top: 3px;
+		margin-bottom: 5px;
+		margin-left: 0px;
+		height: 189px;
+	}
+	
+	.subitem-skillsTab-flex-container-combat-skills-types h1 {
+		text-align: center;
+		padding-top: 0px;
+		padding-bottom: 0px;
+		max-height: 18px;
+		margin-left: 0px;
+	}
+	
+	.subitem-skillsTab-flex-container-combat-skills-types .custom-select {
+		max-width: 55px;
+		text-align: center;
+		height: 19px;
+		padding-left: 3px;
+	}
+	
+	/* Subitem: flex container for combat skill costs "column" */
+	.subitem-skillsTab-flex-container-combat-skills-costs {
+		grid-area: skillCosts;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		margin-bottom: 7px;
+		margin-top: 3px;
+		padding-bottom: 2px;
+	}
+	
+	.subitem-skillsTab-flex-container-combat-skills-costs h1 {
+		text-align: center;
+		padding-top: 0px;
+		padding-bottom: 0px;
+		padding-right: 0px;
+		max-height: 18px;
+		max-width: 40px;
+	}
+	
+	.subitem-skillsTab-flex-container-combat-skills-costs input[readonly] {
+		text-align: center;
+		background-color: #fff990;
+		max-width: 30px;
+		margin-left: 5px;
+	}
+	
+	/* Item: Skill Container for Language Skill "rows" */
+	.item-skillsTab-flex-container-languages {
+		grid-area: theLanguageSkills;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		max-width: 292px;
+		background-color: #fff990; 
+		border: solid 2px goldenrod;
+		border-radius: 3px;
+		line-height: 1.10;
+		padding-left: 4px;
+		padding-right: 4px;
+		padding-bottom: 3px;
+	}
+	
+	/* Sub-Item: Flex containers for columns */
+	.subitem-skillsTab-flex-container-languages-heading {
+		grid-template-areas: "skillName skillFluency literacy skillCost";
+		grid-template-columns: 148px 83px 31px 36px;
+		display: grid;
+		margin-left: 0px;
+	}
+	
+	.subitem-skillsTab-flex-container-languages-heading-name {
+		grid-area: skillName;
+		text-align: left;
+	}
+	
+	.subitem-skillsTab-flex-container-languages-heading-fluency {
+		grid-area: skillFluency;
+		text-align: center;
+	}
+	
+	.subitem-skillsTab-flex-container-languages-heading-literacy {
+		grid-area: literacy;
+		text-align: center;
+	}
+	
+	.subitem-skillsTab-flex-container-languages-heading-cost {
+		grid-area: skillCost;
+		text-align: center;
+	}
+	
+	.subitem-skillsTab-flex-container-language {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		max-width: 285px;
+		margin-left: 0px;
+		padding: 0px;
+		margin-left: 4px;
+	}
+	
+	.subitem-skillsTab-flex-container-language input[type=text]:nth-child(1) {
+		text-align: left;
+		padding-left: 2px;
+		min-width: 140px;
+		margin-right: 0px;
+		border: solid 1px palegoldenrod;	
+	}
+	
+	.subitem-skillsTab-flex-container-language input[readonly] {
+		text-align: center;
+		background-color: #fff990;
+		max-width: 22px;
+		margin-right: 0px;
+		margin-left: 3px;
+		border: transparent;
+	}
+	
+	.subitem-skillsTab-flex-container-language .container-checkbox-small {
+		margin-top: 3px;
+		margin-left: 10px;
+	}
+	
+	.subitem-skillsTab-flex-container-language .custom-select {
+		min-width: 70px;
+		margin-left: 8px;
+		max-height: 19px;
+		padding-left: 3px;
+	}
+	
+	
+	/* Item: Skill Container for Skill Enhancers */
+	.item-skillsTab-grid-container-skill-enhancers {
+		grid-area: theEnhancers;
+		display: grid;
+		grid-template-areas: 
+		". skillEnhancersHeading skillEnhancersHeading skillEnhancersHeading"
+		"checkboxes skillNames . skillCosts"
+		". skillNames skillLevels skillCosts";
+		grid-template-columns: 25px 175px 65px 38px;
+		grid-template-rows: 20px 112px 112px;
+		max-width: 295px;
+		padding-left: 5px;
+		grid-gap:0px;
+		background-color: #fff990; 
+		border: solid 2px goldenrod;
+		border-radius: 3px;
+		max-height: 251px;
+	}
+	
+	.item-skillsTab-grid-container-skill-enhancers input[readonly]{
+		background-color: #fff990;
+		text-align: center;
+		height: 18px;
+		max-width: 30px;
+	}
+	
+	.subitem-skillsTab-flex-container-skill-enhancers-checkboxes {
+		grid-area: checkboxes;
+		text-align: center;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		line-height: 1.2;
+		padding-bottom: 5px;
+		padding-top: 5px;
+		height: 113px;
+	}
+	
+	.subitem-skillsTab-flex-container-skill-enhancers-heading {
+		grid-area: skillEnhancersHeading;
+		text-align: left;
+		display: flex;
+		flex-direction: row;
+		padding-top: 4px;
+		justify-content: space-between;
+		line-height: 1.15;
+		width: 264px;
+	}
+	
+	.subitem-skillsTab-flex-container-skill-enhancers-heading h1:nth-child(2) {
+		padding-right: 0px;
+		line-height: 1.15;
+	}
+	
+	.subitem-skillsTab-flex-container-skill-enhancers-names {
+		grid-area: skillNames;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-evenly;
+		height: 229px;
+	}
+	
+	.subitem-skillsTab-flex-container-skill-enhancers-names h1 {
+		text-align: left;
+		line-height: 1.15;
+		font-weight: bold;
+	}
+	
+	.subitem-skillsTab-flex-container-skill-enhancers-levels {
+		grid-area: skillLevels;
+		text-align: left;
+		display: flex;
+		flex-direction: column;
+		justify-content: flex-end;
+		line-height: 1.15;
+		margin-top: 11px;
+		height: 107px;
+		margin-bottom: 4px;
+	}
+	
+	.subitem-skillsTab-flex-container-skill-enhancers-levels input[type=number]{
+		border: solid 1px palegoldenrod;
+		height: 19px;
+		margin-bottom: 2px;
+	}
+	
+	.subitem-skillsTab-flex-container-skill-enhancers-costs {
+		grid-area: skillCosts;
+		text-align: center;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-evenly;
+		line-height: 1.15;
+		height: 229px;
+	}
+	
+	/* ----------------------------------------------------- */
+	/* Gear: armor, weapons, and equipment                   */
+	/* Organized into a 3x4 grid of containers               */
+	/* ----------------------------------------------------- */
+	
+	.grid-container-tab-gear {
+		display: grid;
+		grid-template-areas:
+		"theEncumbrance theEncumbrance gearHealth"
+		"theArmor theArmor gearHealth"
+		"theWeapons theWeapons theWeapons"
+		"theEquipment theSlides theSlides";
+		grid-gap: 8px;
+		grid-template-columns: 250px 336px 84px;
+		grid-template-rows: 63px 174px 155px 322px;
+		max-width: 692px;
+		padding: 0px;
+		padding-left: 2px;
+		font-size: 16px;
+		background-color: royalblue;
+		border: 3px solid #fff990;
+		border-radius: 5px;
+		justify-content: middle;
+		min-height: 801px;
+	}
+	
+	.grid-container-tab-gear h1 {
+		display:inline-block;
+		margin-left: 0px;
+		padding-left: 2px;
+		padding-right: 0px;
+		padding-top: 0px;
+		padding-bottom: 0px;
+		margin: 0px;
+		margin-top: 1px;
+		font-size: 13px;
+		font-style: normal;
+		line-height: 1.10;
+		text-align: center;
+	}
+	
+	.grid-container-tab-gear .custom-select {
+		font-size: 13px;
+		max-width: 110px;
+		max-height: 19px;
+	}
+	
+	/* Health status styling grouped with item-health-characteristics */
+	
+	/* Encumbrance */
+	.item-tab-gear-flex-container-encumbrance {
+		grid-area: theEncumbrance;
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		margin-left: 4px;
+		margin-top: 6px;
+		padding: 0px;
+		max-width: 594px;
+		max-height: 56px;
+		padding-left: 20px;
+		padding-right: 20px;
+		text-align: left;
+		vertical-align: middle;
+		background-color: royalblue;
+		border: none;
+	}
+	
+	.item-tab-gear-flex-container-encumbrance h1 {
+		text-align: center;
+		color: white;
+		font-size: 13px;
+	}
+	
+	.item-tab-gear-flex-container-encumbrance input[type=number]{
+		background-color: #fff990;
+		text-align: center;
+		max-width: 70px;
+		background-color: gold;
+		border: solid 1px goldenrod;
+		font-size: 16px;
+		margin-left: 0px;
+		padding-right: 0px;
+		min-height: 22px;
+	}
+	
+	.subitem-tab-gear-flex-container-encumbrance,
+	.subitem-tab-gear-flex-container-encumbrance-bonus {
+		display:flex;
+		flex-direction: column;
+		justify-content: space-between;
+		max-width: 80px;
+		align-items: center;
+	}
+	
+	.subitem-tab-gear-flex-container-encumbrance-bonus {
+		margin-left: 0px;
+	}
+	
+	.subitem-tab-gear-plus-minus-enclosure {
+		display: flex;
+		flex-direction: row;
+		background-color: gold;
+		justify-content: space-between;
+		width: 50px;
+		max-height: 20px;
+		border: solid 1px goldenrod;
+		border-radius: 3px;
+	}
+	
+	.subitem-tab-gear-plus-minus-enclosure input[type=text] {
+		max-width: 40px;
+		height: 20px;
+		font-size: 16px;
+		background-color: transparent;
+		text-align: center;
+		vertical-align: center;
+	}
+	
+	.subitem-tab-gear-plus-minus-enclosure input[type=text]:focus{
+		outline: transparent;
+	}
+	
+	.subitem-tab-gear-flex-container-stat {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		height: 20px;
+		width: 10px;
+		align-items: center;
+		padding: 0px;
+	}
+	
+	.subitem-tab-gear-flex-container-stat button.buttonPlus,
+	.subitem-tab-gear-flex-container-stat button.buttonMinus {
+		background-color: LemonChiffon;
+		border: solid 1px slategray;
+		color: slategray;
+		padding-left: 4px;
+		padding-right: 4px;
+		padding-top: 1px;
+		padding-bottom: 1px;
+		display: inline-block;
+		font-size: 10px;
+		margin: 0px 0px;
+		line-height: 1.4ch;
+		border-radius: 0px;
+		max-width: 10px;
+	}
+	
+	.subitem-tab-gear-flex-container-stat button.buttonPlus span,
+	.subitem-tab-gear-flex-container-stat button.buttonMinus span {
+		display: inline-block;
+		transform: rotate(-90deg);
+		text-align: center;
+	}
+	
+	.subitem-tab-gear-flex-container-stat button.buttonPlus:hover,
+	.subitem-tab-gear-flex-container-stat button.buttonMinus:hover {
+		background-color: gray;
+		color: white;
+		transition: 0.05s;
+	} 
+	
+	/* ------------- */
+	/* Item: Armor   */
+	/* ------------- */
+	.item-tab-gear-grid-container-armor {
+		grid-area: theArmor;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-around;
+		max-width: 594px;
+		padding-left: 5px;
+		margin-left: 3px;
+		padding-top: 0px;
+		grid-gap: 3px;
+		background-color: #fff990; 
+		border: solid 2px goldenrod;
+		border-radius: 3px;
+		height: 175px;
+	}
+	
+	.subitem-tab-gear-flex-container-armor-row {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		align-items: center;
+		max-width: 576px;
+		margin-bottom: 1px;
+		height: 24px;
+	}
+	
+	.subitem-tab-gear-flex-container-armor-row h1:nth-child(1) {
+		min-width: 118px;
+		text-align: left;
+	}
+	
+	.subitem-tab-gear-flex-container-armor-row h1:nth-child(2),
+	.subitem-tab-gear-flex-container-armor-row h1:nth-child(3),
+	.subitem-tab-gear-flex-container-armor-row h1:nth-child(4),
+	.subitem-tab-gear-flex-container-armor-row h1:nth-child(5) {
+		min-width: 34px;
+		text-align: center;
+	}
+	
+	.subitem-tab-gear-flex-container-armor-row h1:nth-child(6),
+	.subitem-tab-gear-flex-container-armor-row h1:nth-child(7) {
+		min-width: 44px;
+	}
+	
+	.subitem-tab-gear-flex-container-armor-row h1:nth-child(8) {
+		min-width: 36px;
+	}
+	
+	.subitem-tab-gear-flex-container-armor-row h1:nth-child(9) {
+		min-width: 98px;
+	}
+	
+	.subitem-tab-gear-flex-container-armor-row h1:nth-child(10) {
+		min-width: 46px;
+	}
+	
+	.subitem-tab-gear-flex-container-armor-row input {
+		max-height: 22px;
+	}
+	
+	.subitem-tab-gear-flex-container-armor-row input[type=number] {
+		text-align: right;
+		padding-left: 2px;
+		max-width: 36px;
+		min-width: 34px;
+		padding-right: 0px;
+		margin-right: 0px;
+		margin-left: 0px;
+		border: solid 1px palegoldenrod;
+	}
+	
+	.subitem-tab-gear-flex-container-armor-row input[type=text]:nth-child(1),
+	.subitem-tab-gear-flex-container-armor-row input[type=text]:nth-child(9) {
+		padding-left: 1px;
+		padding-right: 1px;
+		margin-right: 0px;
+		border: solid 1px palegoldenrod;
+	}
+	
+	.subitem-tab-gear-flex-container-armor-row input[type=text]:nth-child(1) {
+		text-align: left;
+		max-width: 120px;
+	}
+	
+	.subitem-tab-gear-flex-container-armor-row input[type=text]:nth-child(9) {
+		text-align: center;
+		max-width: 100px;
+	}
+	
+	.subitem-tab-gear-flex-container-armor-row input[type=number]:nth-child(10) {
+		text-align: right;
+		min-width: 48px;
+	}
+	
+	.subitem-tab-gear-flex-container-armor-row select {
+		text-align-last: center; /* For Chrome */
+		text-align: center; /* Firefox */
+	}
+	
+	/* Shield */
+	
+	.subitem-tab-gear-flex-container-shield {
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		margin-right: 5px;
+		margin-top: 5px;
+	}
+	
+	.subitem-tab-gear-flex-container-shield-row h1 {
+		margin-bottom: 3px;
+		padding: 0px;
+	}
+	
+	.subitem-tab-gear-flex-container-shield-row input {
+		max-height: 21px;
+	}
+	
+	.subitem-tab-gear-flex-container-shield-row label {
+		max-width: 5px;
+		margin-left: 2px;
+		margin-top: 3px;
+		padding-right: 0px;
+	}
+	
+	.subitem-tab-gear-flex-container-shield-row .container-checkbox-small {
+		padding-left: 10px;
+		margin-right: 3px;
+	}
+	
+	.subitem-tab-gear-flex-container-shield-row h1:nth-child(1) {
+		min-width: 120px;
+		text-align: left;
+	}
+	
+	.subitem-tab-gear-flex-container-shield-row h1:nth-child(3) {
+		min-width: 67px;
+		text-align: center;
+	}
+	
+	.subitem-tab-gear-flex-container-shield-row h1:nth-child(4) {
+		min-width: 24px;
+		text-align: center;
+	}
+	
+	.subitem-tab-gear-flex-container-shield-row h1:nth-child(6) {
+		min-width: 38px;
+		text-align: center;
+	}
+	
+	.subitem-tab-gear-flex-container-shield-row h1:nth-child(7) {
+		min-width: 48px;
+		text-align: center;
+	}
+	
+	.subitem-tab-gear-flex-container-shield-row h1:nth-child(5),
+	.subitem-tab-gear-flex-container-shield-row h1:nth-child(8),
+	.subitem-tab-gear-flex-container-shield-row h1:nth-child(9) {
+		min-width: 32px;
+		text-align: center;
+	}
+	
+	.subitem-tab-gear-flex-container-shield-row h1:nth-child(2),
+	.subitem-tab-gear-flex-container-shield-row h1:nth-child(10),
+	.subitem-tab-gear-flex-container-shield-row h1:nth-child(11) {
+		min-width: 40px;
+		text-align: center;
+	}
+	
+	.subitem-tab-gear-flex-container-shield-row h1:nth-child(12) {
+		min-width: 42px;
+		text-align: center;
+	}
+	
+	.subitem-tab-gear-flex-container-shield-row input[type=text]:nth-child(1),
+	.subitem-tab-gear-flex-container-shield-row input[type=text]:nth-child(3) {
+		padding-left: 1px;
+		padding-right: 1px;
+		margin-right: 0px;
+		border: solid 1px palegoldenrod;
+	}
+	
+	.subitem-tab-gear-flex-container-shield-row input[type=text]:nth-child(1) {
+		max-width: 120px;
+		text-align: left;
+	}
+	
+	.subitem-tab-gear-flex-container-shield-row input[type=text]:nth-child(3) {
+		max-width: 65px;
+		text-align: center;
+	}
+	
+	.subitem-tab-gear-flex-container-shield-row  input[readonly]:nth-child(9){
+		background-color: inherit;
+		text-align: center;
+		padding-left: 0px;
+		max-width: 24px;
+		padding-right: 0px;
+		margin-right: 0px;
+		margin-left: 0px;
+		margin-top: 3px;
+		margin-bottom: 2px;
+	}
+	
+	.subitem-tab-gear-flex-container-shield-row input[type=number] {
+		text-align: right;
+		padding-left: 3px;
+		max-width: 38px;
+		padding-right: 0px;
+		margin-right: 0px;
+		margin-left: 0px;
+		border: solid 1px palegoldenrod;
+	}
+	
+	.subitem-tab-gear-flex-container-shield-row input[type=number]:nth-child(12) {
+		text-align: right;
+		padding-left: 3px;
+		min-width: 42px;
+		padding-right: 0px;
+		margin-right: 0px;
+		margin-left: 0px;
+		border: solid 1px palegoldenrod;
+	}
+	
+	.subitem-tab-gear-flex-container-shield-row{
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		max-width: 576px;
+	}
+	
+	/* ------------- */
+	/* Item: Weapons */
+	/* ------------- */
+	.item-tab-gear-flex-container-weapons {
+		grid-area: theWeapons;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-around;
+		margin-left: 4px;
+		padding: 0px;
+		padding-left: 5px;
+		margin-top: 8px;
+		max-height: 145px;
+		max-width: 655px;
+		background-color: #fff990;
+		border: solid 2px goldenrod;
+		border-radius: 3px;
+	}
+	
+	.subitem-tab-gear-flex-container-weapon-row {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		max-width: 650px;
+	}
+	
+	.subitem-tab-gear-flex-container-weapon-row input {
+		max-height: 21px;
+	}
+	
+	.subitem-tab-gear-flex-container-weapon-row h1 {
+		min-width: 39px;
+		text-align: center;
+	}
+	
+	.subitem-tab-gear-flex-container-weapon-row label {
+		max-width: 5px;
+		margin-left: 2px;
+		margin-top: 3px;
+		padding-right: 0px;
+	}
+	
+	.subitem-tab-gear-flex-container-weapon-row h1:nth-child(1) {
+		min-width: 120px;
+		text-align: left;
+	}
+	
+	.subitem-tab-gear-flex-container-weapon-row h1:nth-child(2) {
+		min-width: 65px;
+		text-align: center;
+	}
+	
+	.subitem-tab-gear-flex-container-weapon-row h1:nth-child(3) {
+		min-width: 26px;
+		text-align: center;
+	}
+	
+	.subitem-tab-gear-flex-container-weapon-row h1:nth-child(4) {
+		min-width: 32px;
+		text-align: left;
+	}
+	
+	.subitem-tab-gear-flex-container-weapon-row h1:nth-child(5) {
+		min-width: 36px;
+		text-align: center;
+	}
+	
+	.subitem-tab-gear-flex-container-weapon-row h1:nth-child(6) {
+		min-width: 40x;
+		text-align: center;
+	}
+	
+	.subitem-tab-gear-flex-container-weapon-row h1:nth-child(7) {
+		min-width: 44px;
+		text-align: center;
+	}
+	
+	.subitem-tab-gear-flex-container-weapon-row h1:nth-child(8) {
+		min-width: 42px;
+		text-align: center;
+	}
+	
+	.subitem-tab-gear-flex-container-weapon-row h1:nth-child(9) {
+		min-width: 32px;
+		text-align: right;
+	}
+	
+	.subitem-tab-gear-flex-container-weapon-row h1:nth-child(10) {
+		min-width: 34px;
+		text-align: right;
+	}
+	
+	.subitem-tab-gear-flex-container-weapon-row h1:nth-child(11) {
+		min-width: 45px;
+		text-align: center;
+		padding-left: 0px;
+	}
+	
+	.subitem-tab-gear-flex-container-weapon-row h1:nth-child(12) {
+		min-width: 32px;
+		text-align: center;
+		padding: 0px;
+	}
+	
+	.subitem-tab-gear-flex-container-weapon-row h1:nth-child(13) {
+		min-width: 32px;
+		text-align: right;
+		margin-right: 6px;
+	}
+	
+	.subitem-tab-gear-flex-container-weapon-row input[type=text]:nth-child(1) {
+		text-align: left;
+		padding-left: 1px;
+		padding-right: 1px;
+		max-width: 120px;
+		margin-right: 0px;
+		border: solid 1px palegoldenrod;
+	}
+	
+	.subitem-tab-gear-flex-container-weapon-row input[type=text]:nth-child(2) {
+		text-align: center;
+		padding-left: 1px;
+		padding-right: 1px;
+		max-width: 68px;
+		margin-right: 0px;
+		border: solid 1px palegoldenrod;
+	}
+	
+	.subitem-tab-gear-flex-container-weapon-row .container-checkbox-small {
+		padding-left: 10px;
+		margin-right: 3px;
+	}
+	
+	.subitem-tab-gear-flex-container-weapon-row button:nth-child(4) {
+		margin-left: 0px;
+		margin-right: 0px;
+	}
+	
+	.subitem-tab-gear-flex-container-weapon-row input[type=number]:nth-child(5),
+	.subitem-tab-gear-flex-container-weapon-row input[type=number]:nth-child(6),
+	.subitem-tab-gear-flex-container-weapon-row input[type=number]:nth-child(7),
+	.subitem-tab-gear-flex-container-weapon-row input[type=number]:nth-child(9) {
+		text-align: right;
+		padding-left: 3px;
+		max-width: 38px;
+		padding-right: 0px;
+		margin-right: 0px;
+		margin-left: 0px;
+		border: solid 1px palegoldenrod;
+	}
+	
+	.subitem-tab-gear-flex-container-weapon-row input[type=number]:nth-child(8),
+	.subitem-tab-gear-flex-container-weapon-row input[type=number]:nth-child(11),
+	.subitem-tab-gear-flex-container-weapon-row input[type=number]:nth-child(13) {
+		text-align: right;
+		padding-left: 3px;
+		max-width: 46px;
+		padding-right: 0px;
+		margin-right: 0px;
+		margin-left: 0px;
+		border: solid 1px palegoldenrod;
+	}
+	
+	.subitem-tab-gear-flex-container-weapon-row input[readonly]:nth-child(10){
+		background-color: inherit;
+		text-align: center;
+		padding-left: 0px;
+		max-width: 24px;
+		padding-right: 0px;
+		margin-right: 0px;
+		margin-left: 0px;
+		margin-top: 3px;
+		margin-bottom: 2px;
+	}
+	
+	/* --------------- */
+	/* Item: Equipment */
+	/* --------------- */
+	.item-tab-gear-flex-container-equipment {
+		grid-area: theEquipment;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		max-width: 248px;
+		padding-left: 5px;
+		margin-left: 4px;
+		padding: 4px;
+		background-color: lightcyan;
+		border: solid 2px lightgray;
+		border-radius: 3px;
+		height: 367px;
+	}
+	
+	.subitem-tab-gear-flex-container-equipment {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+	}
+	
+	.subitem-tab-gear-flex-container-equipment h1 {
+		margin-right: 8px;
+	}
+	
+	.subitem-tab-gear-flex-container-equipment input[type=text] {
+		text-align: left;
+		padding-left: 1px;
+		padding-right: 1px;
+		max-width: 162px;
+		max-height: 21px;
+		margin-right: 0px;
+		border: solid 1px #eaeaea;
+	}
+	
+	.subitem-tab-gear-flex-container-equipment input[type=number] {
+		text-align: right;
+		padding-left: 3px;
+		max-width: 120px;
+		min-width: 50px;
+		max-height: 21px;
+		padding-right: 0px;
+		margin-right: 0px;
+		margin-left: 2px;
+		border: solid 1px #eaeaea;
+	}
+	
+	/* Buttons for equipment movers. */
+	
+	.gear-mover-plus-minus-enclosure {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		
+	}
+	
+	.gear-mover-plus-minus-button {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		height: 22px;
+		width: 10px;
+		align-items: center;
+		padding: 0px;
+		margin-right: 2px;
+	}
+	
+	.gear-mover-plus-minus-button button.buttonPlus,
+	.gear-mover-plus-minus-button button.buttonMinus {
+		background-color: white;
+		border: solid 1px lightgray;
+		color: lightskyblue;
+		padding-left: 4px;
+		padding-right: 4px;
+		padding-top: 1px;
+		padding-bottom: 1px;
+		display: inline-block;
+		font-size: 8px;
+		margin: 0px 0px;
+		line-height: 1.25ch;
+		border-radius: 0px;
+		max-width: 10px;
+	}
+	
+	.gear-mover-plus-minus-button button.buttonPlus span,
+	.gear-mover-plus-minus-button button.buttonMinus span {
+		display: inline-block;
+		transform: rotate(-90deg);
+		text-align: center;
+	}
+	
+	.gear-mover-plus-minus-button button.buttonPlus:hover,
+	.gear-mover-plus-minus-button button.buttonMinus:hover {
+		background-color: silver;
+		transition: 0.05s;
+		color: white;
+	} 
+	
+	/* ----------------------------------------------------------- */
+	/* Item: Attacks and Maneuvers or treasures text box slideshow */
+	/* ----------------------------------------------------------- */
+	
+	.item-tab-gear-slide-container {
+		grid-area: theSlides;
+		position: relative;
+	}
+	
+	.item-tab-gear-slide-container h1 {
+		text-align: left;
+		line-height: 1.2;
+		font-size: 12px;
+		margin: 0px;
+	}
+	
+	.item-tab-gear-slide-container h2 {
+		font-size: 12px;
+		text-align: center;
+		font-weight: 400;
+		line-height: 1.2;
+	}
+	
+	.item-tab-gear-slide-container .button-left-arrow {
+		position: absolute;
+		top: 4.5%;
+		left: 88%;
+		transform: translate(-50%, -50%);
+		color: gray;
+		background-color: lightgray;
+		font-size: 12px;
+		padding: 1px 5px;
+		border: none;
+		cursor: pointer;
+		border-radius: 3px;
+		text-align: center;
+	}
+	
+	.item-tab-gear-slide-container .button-right-arrow {
+		position: absolute;
+		top: 4.5%;
+		left: 92.5%;
+		transform: translate(-50%, -50%);
+		color: gray;
+		background-color: lightgray;
+		font-size: 12px;
+		padding: 1px 5px;
+		border: none;
+		cursor: pointer;
+		border-radius: 3px;
+		text-align: center;
+	}
+	
+	.item-tab-gear-slide-container .button-right-arrow:hover,
+	.item-tab-gear-slide-container .button-left-arrow:hover {
+		background-color: gold;
+		color: black;
+	}
+	
+	.item-tab-gear-slide-flex-container-maneuvers,
+	.item-tab-gear-slide-flex-container-martial-maneuvers {
+		width: 406px;
+		height: 375px;
+		padding: 0px;
+		margin-left: 0px;
+		margin-bottom: 0px;
+		background-color: lightcyan;
+		border: solid 2px lightgray;
+		border-radius: 3px;
+	}
+	
+	.item-tab-gear-slide-flex-container-martial-maneuvers-block {
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		max-height: 280px;
+		min-height: 270px;
+	}
+	
+	.item-tab-gear-slide-flex-container-martial-maneuvers input[type=text] {
+		height: 20px;
+	}
+	
+	.item-tab-gear-slide-flex-container-martial-maneuvers input[type=number] {
+		height: 20px;
+		border: solid 1px lightgray;
+		margin: 0px;
+		padding: 0px;
+		padding-right: 0px;
+	}
+	
+	.item-tab-gear-slide-flex-container-martial-maneuvers input[type=text]:nth-child(1) {
+		width: 135px;
+		border: 1px solid lightgray;
+		margin: 0px;
+		text-align: left;
+		padding-left: 2px;
+		height: 20px;
+	}
+	
+	.item-tab-gear-slide-flex-container-martial-maneuvers input[type=text]:nth-child(2),
+	.item-tab-gear-slide-flex-container-martial-maneuvers input[type=text]:nth-child(3),
+	.item-tab-gear-slide-flex-container-martial-maneuvers input[type=text]:nth-child(4) {
+		width: 30px;
+		border: 1px solid lightgray;
+		margin: 0px;
+		margin-left: 6px;
+	}
+	
+	.item-tab-gear-slide-flex-container-martial-maneuvers input[type=text]:nth-child(5) {
+		/* Probably not going to be used. */
+		width: 165px;
+		border: 1px solid lightgray;
+		margin: 0px;
+		margin-left: 3px;
+		text-align: left;
+	}
+	
+	.item-tab-gear-slide-flex-container-martial-maneuvers textarea {
+		width: 135px;
+		border: 1px solid lightgray;
+		height: 36px;
+		padding: 1px;
+		font-size: 12px;
+	}
+	
+	.item-tab-gear-slide-flex-container-maneuvers h1:nth-child(1),
+	.item-tab-gear-slide-flex-container-maneuvers h2:nth-child(1) {
+		width: 108px;
+	}
+	
+	.item-tab-gear-slide-flex-container-maneuvers h1:nth-child(2),
+	.item-tab-gear-slide-flex-container-maneuvers h2:nth-child(2),
+	.item-tab-gear-slide-flex-container-maneuvers h1:nth-child(3),
+	.item-tab-gear-slide-flex-container-maneuvers h2:nth-child(3),
+	.item-tab-gear-slide-flex-container-maneuvers h1:nth-child(4),
+	.item-tab-gear-slide-flex-container-maneuvers h2:nth-child(4),
+	.item-tab-gear-slide-flex-container-martial-maneuvers h1:nth-child(2),
+	.item-tab-gear-slide-flex-container-martial-maneuvers h1:nth-child(3),
+	.item-tab-gear-slide-flex-container-martial-maneuvers h1:nth-child(4) {
+		width: 40px;
+		padding: 0px;
+		margin: 0px;
+		text-align: center;
+	}
+	
+	.item-tab-gear-slide-flex-container-maneuvers h1:nth-child(5),
+	.item-tab-gear-slide-flex-container-maneuvers h2:nth-child(5) {
+		text-align: left;
+		padding-left: 0px;
+		margin-left: 0px;
+	}
+	
+	.item-tab-gear-slide-flex-container-martial-maneuvers h1:nth-child(1) {
+		width: 138px;
+	}
+	
+	.item-tab-gear-slide-flex-container-martial-maneuvers h1:nth-child(5) {
+		text-align: left;
+		padding-left: 0px;
+		margin-left: 0px;
+	}
+	
+	.subitem-tab-gear-slide-flex-container-maneuvers-heading,
+	.subitem-tab-gear-slide-flex-container-martial-maneuvers-heading {
+		flex-direction: row;
+		display: flex;
+		justify-content: flex-start;
+		width: 402px;
+		height: 19px;
+		padding: 0px;
+		margin-left: 0px;
+		padding-top: 5px;
+		padding-left: 4px;
+		margin-bottom: 0px;
+		background-color: lightcyan;
+	}
+	
+	.subitem-tab-gear-slide-flex-container-maneuvers-light-row,
+	.subitem-tab-gear-slide-flex-container-maneuvers-dark-row {
+		flex-direction: row;
+		display: flex;
+		justify-content: flex-start;
+		width: 402px;
+		height: 19px;
+		padding: 0px;
+		margin-left: 0px;
+		padding-top: 4px;
+		padding-left: 4px;
+		margin-top: 0px;
+		margin-bottom: 0px;
+	}
+	
+	.subitem-tab-gear-slide-flex-container-maneuvers-light-row {
+		background-color: white;
+	}
+	
+	.subitem-tab-gear-slide-flex-container-maneuvers-dark-row {
+		background-color: lightcyan;
+	}
+	
+	.subitem-tab-gear-slide-flex-container-martial-maneuvers-row {
+		flex-direction: row;
+		display: flex;
+		justify-content: space-between;
+		width: 397px;
+		height: 40px;
+		padding: 0px;
+		margin-left: 0px;
+		padding-top: 0px;
+		padding-left: 4px;
+		margin-top: 0px;
+		margin-bottom: 0px;
+	}
+	
+	
+	.subitem-tab-gear-slide-flex-container-martial-name-and-points {
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		min-height: 42px;
+		max-width: 134px;
+		padding: 0px 0px;
+	}
+	
+	.subitem-tab-gear-slide-flex-container-martial-name-and-points-row {
+		display: flex;
+		flex-direction: row;
+		justify-content: right;
+	}
+	
+	.subitem-tab-gear-slide-flex-container-martial-name-and-points-row h1 {
+		padding-right: 0px;
+		padding-left: 30px;
+		padding-top: 4px;
+	}
+	
+	.subitem-tab-gear-slide-flex-container-martial-name-and-points-row input[type=number] {
+		max-width: 42px;
+	}
+	
+	/* Basic Attack */
+	
+	.subitem-tab-gear-slide-flex-container-standard-attack {
+		display: flex;
+		flex-direction: row;
+		justify-content: left;
+		margin-left: 3px;
+		margin-right: 3px;
+		margin-top: 13px;
+		align-items: center;
+	}
+	
+	.subitem-tab-gear-slide-flex-container-standard-attack h1 {
+		max-width: 90px;
+		margin-right: 5px;
+		margin-top: 2px;
+	}
+	
+	.subitem-tab-gear-slide-flex-container-standard-attack span {
+		min-width: 42px;
+		align-content: left;
+	}
+	
+	.subitem-tab-gear-slide-flex-container-standard-attack h2:nth-child(3),
+	.subitem-tab-gear-slide-flex-container-standard-attack h2:nth-child(4),
+	.subitem-tab-gear-slide-flex-container-standard-attack h2:nth-child(5) {
+		width: 40px;
+		text-align: center;
+		padding-right: 0px;
+		margin-top: 2px;
+	}
+	
+	.subitem-tab-gear-slide-flex-container-standard-attack h2:nth-child(6) {
+		max-width: 130px;
+		text-align: left;
+		margin-right: 6px;
+		margin-top: 2px;
+	}
+	
+	.subitem-tab-gear-slide-flex-container-range-modifiers {
+		flex-direction: row;
+		display: flex;
+		justify-content: space-between;
+		width: 397px;
+		height: 30px;
+		padding: 0px;
+		margin-left: 0px;
+		padding-top: 0px;
+		padding-left: 5px;
+		margin-top: 13px;
+		margin-bottom: 0px;
+	}
+	
+	.subitem-tab-gear-slide-range-modifier-container-first,
+	.subitem-tab-gear-slide-range-modifier-container {
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		height: 30px;
+	}
+	
+	.subitem-tab-gear-slide-range-modifier-container-first {
+		min-width: 83px;
+		align-items: flex-start;
+	}
+	
+	.subitem-tab-gear-slide-range-modifier-container {
+		min-width: 50px;
+		align-items: center;
+	}
+	
+	.subitem-tab-gear-slide-range-modifier-container h2:nth-child(1) {
+		font-weight: bold;
+	}
+	
+	.subitem-tab-gear-slide-range-modifier-container-first h2 {
+		font-weight: bold;
+	}
+	
+	/* Item: Hit Locations */
+	.item-tab-gear-slide-flex-container-hit-locations {
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		width: 403px;
+		height: 375px;
+		padding: 0px;
+		padding-left: 3px;
+		background-color: lightcyan;
+		margin-left: 0px;
+		margin-bottom: 0px;
+		border: solid 2px lightgray;
+		border-radius: 3px;
+	}
+	
+	.item-gear-slide-container-hit-locations-flex-row {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		border-radius: 3px;
+		width: 400px;
+	}
+	
+	/* Special Hit Locations */
+	.item-gear-slide-flex-container-hit-locations-special {
+		width: 260px;
+		height: 145px;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+	}
+	
+	.item-gear-slide-flex-container-hit-locations-special label {
+		display: inline-block;
+		margin-left: 14px;
+		margin-right: 4px;
+		margin-top: 2px; /* A fix to get a uniform look with the hit location table */
+	}
+	
+	.subitem-gear-slide-flex-container-hit-locations-special-heading {
+		background-color: lightcyan;
+		height: 20px;
+		margin-bottom: 3px;
+	}
+	
+	.subitem-gear-slide-flex-container-hit-locations-special-heading h1:nth-child(1){
+		width: 42px;
+		text-align: left;
+		margin-left: 2px;
+	}
+	
+	.subitem-gear-slide-flex-container-hit-locations-special-heading h1:nth-child(2){
+		width: 40px;
+		text-align: center;
+		margin-left: 3px;
+	}
+	
+	.subitem-gear-slide-flex-container-hit-locations-special-heading h1:nth-child(3){
+		width: 52px;
+		text-align: center;
+		margin-left: 30px;
+	}
+	
+	.subitem-gear-slide-flex-container-hit-locations-special-heading h1:nth-child(4){
+		width: 44px;
+		text-align: right;
+		margin-left: 15px;
+	}
+	
+	.subitem-gear-slide-flex-container-hit-locations-special-top-row,
+	.subitem-gear-slide-flex-container-hit-locations-special-middle-row,
+	.subitem-gear-slide-flex-container-hit-locations-special-bottom-row {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		background-color: white;
+		border-left: solid 1px lightgray;
+		border-right: solid 1px lightgray;
+		width: 260px;
+		height: 20px;
+	}
+	
+	.subitem-gear-slide-flex-container-hit-locations-special-top-row {
+		border-top: solid 1px lightgray;
+		border-top-left-radius: 3px;
+		border-top-right-radius: 3px;
+		padding-top: 5px;
+	}
+	
+	.subitem-gear-slide-flex-container-hit-locations-special-bottom-row {
+		border-bottom: solid 1px lightgray;
+		border-bottom-left-radius: 3px;
+		border-bottom-right-radius: 3px;
+	}
+	
+	.subitem-gear-slide-flex-container-hit-locations-special-top-row h1,
+	.subitem-gear-slide-flex-container-hit-locations-special-middle-row h1,
+	.subitem-gear-slide-flex-container-hit-locations-special-bottom-row h1 {
+		width: 65px;
+		text-align: center;
+	}
+	
+	.subitem-gear-slide-flex-container-hit-locations-special-top-row h1:nth-child(4),
+	.subitem-gear-slide-flex-container-hit-locations-special-middle-row h1:nth-child(4),
+	.subitem-gear-slide-flex-container-hit-locations-special-bottom-row h1:nth-child(4) {
+		width: 35px;
+		text-align: right;
+		padding-right: 19px;
+	}
+	
+	/* Targeting Options */
+	.item-gear-slide-container-hit-locations-options {
+		width: 130px;
+		height: 100px;
+		margin-top: 50px;
+	}
+	
+	.subitem-gear-slide-container-hit-locations-options-top,
+	.subitem-gear-slide-container-hit-locations-options-bottom {
+		display: flex;
+		flex-direction: row;
+		justify-content: flex-start;
+		width: 115px;
+		margin: 3px;
+		margin-bottom: 15px;
+	}
+	
+	.subitem-gear-slide-container-hit-locations-options-top {
+		margin-left: 10px;
+	}
+	
+	.subitem-gear-slide-container-hit-locations-options-top h1,
+	.subitem-gear-slide-container-hit-locations-options-bottom h1 {
+		padding-top: 4px;
+		margin: 0px;
+	}
+	
+	.subitem-gear-slide-container-hit-locations-options-top label {
+		max-width: 0px;
+		margin-left: 2px;
+		margin-right: 0px;
+		margin-top: 3px;
+		padding-right: 0px;
+	}
+	
+	.subitem-gear-slide-container-hit-locations-options-bottom input {
+		margin-left: 5px;
+		border: solid 1px lightgray;
+	}
+	
+	/* Hit Location Table */
+	.item-gear-slide-container-hit-locations-table {
+		width: 399px;
+		height: 215px;
+	}
+	
+	.item-gear-slide-container-hit-locations-table h1 {
+		width: 51px;
+		text-align: center;
+	}
+	
+	.item-gear-slide-container-hit-locations-table label {
+		display: inline-block;
+		margin-left: 14px;
+		margin-right: 3px;
+	}
+	
+	.subitem-gear-slide-container-hit-locations-table-heading {
+		background-color: lightcyan;
+		height: 20px;
+		margin-bottom: 3px;
+	}
+	
+	.subitem-gear-slide-container-hit-locations-table-heading h1 {
+		text-align: center;
+		margin-left: 2px;
+	}
+	
+	.subitem-gear-slide-container-hit-locations-table-heading h1:nth-child(1){
+		width: 42px;
+		text-align: left;
+	}
+	
+	.subitem-gear-slide-container-hit-locations-table-heading h1:nth-child(2){
+		width: 34px;
+		text-align: center;
+		margin-right: 9px;
+		margin-left: 3px;
+	}
+	
+	.subitem-gear-slide-container-hit-locations-table-top-row,
+	.subitem-gear-slide-container-hit-locations-table-middle-row,
+	.subitem-gear-slide-container-hit-locations-table-bottom-row {
+		height: 19px;
+	}
+	
+	.subitem-gear-slide-container-hit-locations-table-top-row h1:nth-child(2),
+	.subitem-gear-slide-container-hit-locations-table-middle-row h1:nth-child(2),
+	.subitem-gear-slide-container-hit-locations-table-bottom-row h1:nth-child(2){
+		width: 40x;
+		text-align: center;
+		margin-right: 11px;
+	}
+	
+	.subitem-gear-slide-container-hit-locations-table-top-row h1:nth-child(2),
+	.subitem-gear-slide-container-hit-locations-table-middle-row h1:nth-child(2),
+	.subitem-gear-slide-container-hit-locations-table-bottom-row h1:nth-child(2){
+		width: 34px;
+		text-align: center;
+		margin-left: 21px;
+	}
+	
+	.subitem-gear-slide-container-hit-locations-table-top-row h1:nth-child(6),
+	.subitem-gear-slide-container-hit-locations-table-middle-row h1:nth-child(6),
+	.subitem-gear-slide-container-hit-locations-table-bottom-row h1:nth-child(6){
+		width: 45px;
+		text-align: center;
+		margin-left: 6px;
+		margin-right: 0px;
+	}
+	
+	.subitem-gear-slide-container-hit-locations-table-top-row h1:nth-child(7),
+	.subitem-gear-slide-container-hit-locations-table-middle-row h1:nth-child(7),
+	.subitem-gear-slide-container-hit-locations-table-bottom-row h1:nth-child(7){
+		width: 34px;
+		text-align: right;
+		margin-left: 4px;
+		margin-right: 17px;
+	}
+	
+	.subitem-gear-slide-container-hit-locations-table-top-row {
+		background-color: white;
+		border-top: solid 1px lightgray;
+		border-left: solid 1px lightgray;
+		border-right: solid 1px lightgray;
+		border-top-left-radius: 3px;
+		border-top-right-radius: 3px;
+	}
+	
+	.subitem-gear-slide-container-hit-locations-table-middle-row {
+		background-color: white;
+		border-left: solid 1px lightgray;
+		border-right: solid 1px lightgray;
+	}
+	
+	.subitem-gear-slide-container-hit-locations-table-bottom-row {
+		background-color: white;
+		border-left: solid 1px lightgray;
+		border-right: solid 1px lightgray;
+		border-bottom: solid 1px lightgray;
+		border-bottom-left-radius: 3px;
+		border-bottom-right-radius: 3px;
+		padding-bottom: 5px;
+	}
+	
+	/* Item: Slide of treasure and notes box  */
+	.item-tab-gear-slide-treasure-text {
+		width: 402px;
+		height: 367px;
+		padding: 0px;
+		margin-left: 0px;
+		margin-bottom: 0px;
+	}
+	
+	.item-tab-gear-slide-treasure-text textarea {
+		width: 398px;
+		height: 367px;
+		margin: 0px;
+		border: solid 2px lightgray;
+		border-radius: 3px;
+	}
+	
+	/* hide all gear tab slides by default */
+	
+	.item-tab-gear-slide-flex-container-maneuvers,
+	.item-tab-gear-slide-flex-container-martial-maneuvers,
+	.item-tab-gear-slide-flex-container-hit-locations,
+	.item-tab-gear-slide-treasure-text {
+		display: none;
+	}
+	
+	/* show the selected gear slide */
+	.item-gear-slideshow[value="1"] ~ div.item-tab-gear-slide-flex-container-maneuvers,
+	.item-gear-slideshow[value="2"] ~ div.item-tab-gear-slide-flex-container-martial-maneuvers,
+	.item-gear-slideshow[value="3"] ~ div.item-tab-gear-slide-flex-container-hit-locations,
+	.item-gear-slideshow[value="4"] ~ div.item-tab-gear-slide-treasure-text {
+		display: block;
+		position: relative;
+	}
+	
+	/* ---------------------------------------------------------------- */
+	/* Custom radio button from w3 schools.                             */
+	/* https://www.w3schools.com/howto/howto_css_custom_checkbox.asp    */
+	/* ---------------------------------------------------------------- */
+	
+	/* Customize the label (the container) */
+	.custom-radio-button-container {
+		display: block;
+		position: relative;
+		padding: 0px;
+		margin: 0px;
+		cursor: pointer;
+		font-size: 12px;
+		max-width: 0px;
+		max-height: 0px;
+		-webkit-user-select: none;
+		-moz-user-select: none;
+		-ms-user-select: none;
+		user-select: none;
+		background-color: orange;
+	}
+	
+	/* Hide the browser's default radio button */
+	.custom-radio-button-container input {
+		position: absolute;
+		opacity: 0;
+		cursor: pointer;
+		height: 0;
+		width: 0;
+	}
+	
+	/* Create a custom radio button */
+	.custom-radio-button {
+		position: absolute;
+		top: -2px; /* A fix to get a uniform look with the hit location table */
+		left: 0px;
+		height: 11px;
+		width: 11px;
+		background-color: white;
+		border: solid 2px lightsteelblue;
+		border-radius: 50%;
+		margin-bottom: 0px;
+		padding: 0px;
+	}
+	
+	/* On mouse-over, add a grey background color */
+	.custom-radio-button-container:hover input ~ .custom-radio-button {
+		background-color: lightsteelblue;
+	}
+	
+	/* When the radio button is checked, add a blue background */
+	.custom-radio-button-container input:checked ~ .custom-radio-button {
+		background-color: indianred;
+		border: solid 2px indianred;
+	}
+	
+	/* Create the indicator (the dot/circle - hidden when not checked) */
+	.custom-radio-button:after {
+		content: "";
+		position: absolute;
+		display: none;
+	}
+	
+	/* Show the indicator (dot/circle) when checked */
+	.custom-radio-button-container input:checked ~ .custom-radio-button:after {
+		display: block;
+	}
+	
+	/* Style the indicator (dot/circle) */
+	.custom-radio-button-container .custom-radio-button:after {
+		top: 0px;
+		left: 0px;
+		width: 7px;
+		height: 7px;
+		border-radius: 50%;
+		border: solid 2px white;
+		background: indianred;
+		margin: 0px;
+		padding: 0px;
+	}
+	
+	/* ---------------------------------------------------------------- */
+	/* Jackob's Roll Template                                           */
+	/* https://wiki.roll20.net/Building_Character_Sheets/Roll_Templates */
+	/* ---------------------------------------------------------------- */
+	
+	/* Three different Templates for attacks, armor activation, and skills ability checks. */
+	.sheet-rolltemplate-custom,
+	.sheet-rolltemplate-custom-normal-attack,
+	.sheet-rolltemplate-custom-power-attack,
+	.sheet-rolltemplate-custom-attack,
+	.sheet-rolltemplate-custom-activate,
+	.sheet-rolltemplate-custom-show {
+		margin-left: -37px;
+		color: #181818;
+	}
+	
+	.withoutavatars .sheet-rolltemplate-custom,
+	.withoutavatars .sheet-rolltemplate-custom-normal-attack,
+	.withoutavatars .sheet-rolltemplate-custom-power-attack,
+	.withoutavatars .sheet-rolltemplate-custom-attack,
+	.withoutavatars .sheet-rolltemplate-custom-activate,
+	.withoutavatars .sheet-rolltemplate-custom-show {
+		margin-left: -7px;
+		color: #181818;
+	}
+	
+	.sheet-rolltemplate-custom .sheet-container,
+	.sheet-rolltemplate-custom-normal-attack .sheet-container,
+	.sheet-rolltemplate-custom-power-attack .sheet-container,
+	.sheet-rolltemplate-custom-attack .sheet-container,
+	.sheet-rolltemplate-custom-activate .sheet-container,
+	.sheet-rolltemplate-custom-show .sheet-container {
+		border: 1px solid;
+		/* by default, the border is the same color as the header. You can change this here, e.g. to black */
+		border-color: var(--header-bg-color);
+	}
+	
+	/* Header formatting - title and subtitle */
+	.sheet-rolltemplate-custom .sheet-header {
+		background-color: orange;
+		/* change text-align to center to center the header text */
+		text-align: left;
+		color: var(--header-text-color);
+		padding: 5px;
+	}
+		
+	.sheet-rolltemplate-custom-attack .sheet-header {
+		background-color: indianred;
+		/* change text-align to center to center the header text */
+		text-align: left;
+		color: var(--header-text-color);
+		padding: 5px;
+	}
+	
+	.sheet-rolltemplate-custom-normal-attack .sheet-header {
+		background-color: olivedrab;
+		/* change text-align to center to center the header text */
+		text-align: left;
+		color: var(--header-text-color);
+		padding: 5px;
+	}
+		
+	.sheet-rolltemplate-custom-power-attack .sheet-header {
+		background-color: #9184E2; /* lighter than mediumslateblue; */
+		/* change text-align to center to center the header text */
+		text-align: left;
+		color: var(--header-text-color);
+		padding: 5px;
+	}
+	
+	.sheet-rolltemplate-custom-activate .sheet-header {
+		background-color: steelblue;
+		/* change text-align to center to center the header text */
+		text-align: left;
+		color: var(--header-text-color);
+		padding: 5px;
+	}
+		
+	.sheet-rolltemplate-custom-show .sheet-header {
+		background-color: lightslategray;
+		/* change text-align to center to center the header text */
+		text-align: left;
+		color: var(--header-text-color);
+		padding: 5px;
+	}
+	
+	.sheet-rolltemplate-custom .sheet-title,
+	.sheet-rolltemplate-custom-normal-attack .sheet-title,
+	.sheet-rolltemplate-custom-power-attack .sheet-title,
+	.sheet-rolltemplate-custom-attack .sheet-title,
+	.sheet-rolltemplate-custom-activate .sheet-title,
+	.sheet-rolltemplate-custom-show .sheet-title {
+		font-size:1.2em;
+	}
+	
+	.sheet-rolltemplate-custom .sheet-subtitle,
+	.sheet-rolltemplate-custom-normal-attack .sheet-subtitle,
+	.sheet-rolltemplate-custom-power-attack .sheet-subtitle,
+	.sheet-rolltemplate-custom-attack .sheet-subtitle,
+	.sheet-rolltemplate-custom-activate .sheet-subtitle,
+	.sheet-rolltemplate-custom-show .sheet-subtitle {
+		font-size:1.0em;
+		padding-top: 0.1em;
+	}
+	
+	/* example colors */
+	.sheet-rolltemplate-custom .sheet-container,
+	.sheet-rolltemplate-custom-normal-attack .sheet-container,
+	.sheet-rolltemplate-custom-power-attack .sheet-container,
+	.sheet-rolltemplate-custom-attack .sheet-container,
+	.sheet-rolltemplate-custom-activate .sheet-container,
+	.sheet-rolltemplate-custom-show .sheet-container  {
+		/* this is the default color */
+		--header-bg-color: black;
+		--header-text-color: #FFF;
+	}
+	
+	/* Allprops part */
+	.sheet-rolltemplate-custom .sheet-content,
+	.sheet-rolltemplate-custom-normal-attack .sheet-content,
+	.sheet-rolltemplate-custom-power-attack .sheet-content,
+	.sheet-rolltemplate-custom-attack .sheet-content,
+	.sheet-rolltemplate-custom-activate .sheet-content,
+	.sheet-rolltemplate-custom-show .sheet-content {
+		display: grid;
+		background: #FFF;
+		/* Header formatting - modify the column layout below */
+		grid-template-columns: auto auto;
+		/* Line height to match default roll template */
+		line-height:1.4em;
+	}
+	
+	.sheet-rolltemplate-custom .sheet-content > div,
+	.sheet-rolltemplate-custom-normal-attack .sheet-content > div,
+	.sheet-rolltemplate-custom-power-attack .sheet-content > div,
+	.sheet-rolltemplate-custom-attack .sheet-content > div,
+	.sheet-rolltemplate-custom-activate .sheet-content > div,
+	.sheet-rolltemplate-custom-show .sheet-content > div {
+		padding: 5px;
+	}
+	
+	/* Left column */
+	.sheet-rolltemplate-custom .sheet-content .sheet-key,
+	.sheet-rolltemplate-custom-normal-attack .sheet-content .sheet-key,
+	.sheet-rolltemplate-custom-power-attack .sheet-content .sheet-key,
+	.sheet-rolltemplate-custom-attack .sheet-content .sheet-key,
+	.sheet-rolltemplate-custom-activate .sheet-content .sheet-key,
+	.sheet-rolltemplate-custom-show .sheet-content .sheet-key {
+		font-weight: bold;
+		padding-right: 10px;
+		text-align: right;
+		color: #222222; /* To fix dark mode in Chrome. */
+	}
+	
+	/* Right column. Color to fix dark mode in Chrome. */
+	.sheet-rolltemplate-custom .sheet-value,
+	.sheet-rolltemplate-custom-normal-attack .sheet-value,
+	.sheet-rolltemplate-custom-power-attack .sheet-value,
+	.sheet-rolltemplate-custom-attack .sheet-value,
+	.sheet-rolltemplate-custom-activate .sheet-value,
+	.sheet-rolltemplate-custom-show .sheet-value {
+		color: #222222;
+	}
+	
+	/* Make even-numbered rows grey */
+	.sheet-rolltemplate-custom .sheet-content :nth-child(4n+3),
+	.sheet-rolltemplate-custom .sheet-content :nth-child(4n),
+	.sheet-rolltemplate-custom-normal-attack .sheet-content :nth-child(4n+3),
+	.sheet-rolltemplate-custom-normal-attack .sheet-content :nth-child(4n),
+	.sheet-rolltemplate-custom-power-attack .sheet-content :nth-child(4n+3),
+	.sheet-rolltemplate-custom-power-attack .sheet-content :nth-child(4n),
+	.sheet-rolltemplate-custom-attack .sheet-content :nth-child(4n+3),
+	.sheet-rolltemplate-custom-attack .sheet-content :nth-child(4n),
+	.sheet-rolltemplate-custom-activate .sheet-content :nth-child(4n+3),
+	.sheet-rolltemplate-custom-activate .sheet-content :nth-child(4n),
+	.sheet-rolltemplate-custom-show .sheet-content :nth-child(4n+3),
+	.sheet-rolltemplate-custom-show .sheet-content :nth-child(4n) {
+		background:#EEE;
+	}
+	
+	/* Description field */
+	.sheet-rolltemplate-custom .sheet-desc,
+	.sheet-rolltemplate-custom-normal-attack .sheet-desc,
+	.sheet-rolltemplate-custom-power-attack .sheet-desc,
+	.sheet-rolltemplate-custom-attack .sheet-desc,
+	.sheet-rolltemplate-custom-activate .sheet-desc,
+	.sheet-rolltemplate-custom-show .sheet-desc {
+		grid-column: span 2;
+		padding-right: 10px;
+		text-align: left;
+		color: #222222; /* To fix dark mode in Chrome. */
+	}
+	
+	/* Dice roll face colors. Needed to prevent problems with dark mode. */
+	.sheet-rolltemplate-custom .inlinerollresult,
+	.sheet-rolltemplate-custom-normal-attack .inlinerollresult,
+	.sheet-rolltemplate-custom-power-attack .inlinerollresult,
+	.sheet-rolltemplate-custom-attack .inlinerollresult,
+	.sheet-rolltemplate-custom-activate .inlinerollresult,
+	.sheet-rolltemplate-custom-show .inlinerollresult {
+		display: inline-block;
+		min-width: 1.5em;
+		text-align: center;
+		border: 2px solid palegoldenrod;
+		background: #fff990;
+	}
+	
+	.sheet-rolltemplate-custom .sheet-template-wrapper .inlinerollresult,
+	.sheet-rolltemplate-custom-normal-attack .sheet-template-wrapper .inlinerollresult,
+	.sheet-rolltemplate-custom-power-attack .sheet-template-wrapper .inlinerollresult,
+	.sheet-rolltemplate-custom-attack .sheet-template-wrapper .inlinerollresult,
+	.sheet-rolltemplate-custom-activate .sheet-template-wrapper .inlinerollresult,
+	.sheet-rolltemplate-custom-show .sheet-template-wrapper .inlinerollresult {
+		background-color: #fff990;
+		border: 2px solid palegoldenrod;
+	}
+	
+	.sheet-rolltemplate-custom .sheet-template-wrapper .inlinerollresult.fullcrit,
+	.sheet-rolltemplate-custom-normal-attack .sheet-template-wrapper .inlinerollresult.fullcrit,
+	.sheet-rolltemplate-custom-power-attack .sheet-template-wrapper .inlinerollresult.fullcrit,
+	.sheet-rolltemplate-custom-attack .sheet-template-wrapper .inlinerollresult.fullcrit,
+	.sheet-rolltemplate-custom-activate .sheet-template-wrapper .inlinerollresult.fullcrit,
+	.sheet-rolltemplate-custom-show .sheet-template-wrapper .inlinerollresult.fullcrit {
+		border: 2px solid #3FB315;
+	}
+	
+	.sheet-rolltemplate-custom .sheet-template-wrapper .inlinerollresult.fullfail,
+	.sheet-rolltemplate-custom-normal-attack .sheet-template-wrapper .inlinerollresult.fullfail,
+	.sheet-rolltemplate-custom-power-attack .sheet-template-wrapper .inlinerollresult.fullfail,
+	.sheet-rolltemplate-custom-attack .sheet-template-wrapper .inlinerollresult.fullfail,
+	.sheet-rolltemplate-custom-activate .sheet-template-wrapper .inlinerollresult.fullfail,
+	.sheet-rolltemplate-custom-show .sheet-template-wrapper .inlinerollresult.fullfail {
+		border: 2px solid #B31515;
+	}
+	
+	/* --------------------------------------------------- */
+	/* Power block expanding/collapse functionality        */
+	/* --------------------------------------------------- */
+	
+	/* Nominal state for expanded areas */
+	.sheet-power-expand-01,
+	.sheet-power-expand-02,
+	.sheet-power-expand-03,
+	.sheet-power-expand-04,
+	.sheet-power-expand-05,
+	.sheet-power-expand-06,
+	.sheet-power-expand-07,
+	.sheet-power-expand-08,
+	.sheet-power-expand-09,
+	.sheet-power-expand-10,
+	.sheet-power-expand-11,
+	.sheet-power-expand-12,
+	.sheet-power-expand-13,
+	.sheet-power-expand-14,
+	.sheet-power-expand-15,
+	.sheet-power-expand-16,
+	.sheet-power-expand-17 {
+		display: none;
+	}
+	
+	/* Expand the selected left power block. */
+	.sheet-left-power-toggle[value="powerExpand01"] ~ div.item-flex-power .sheet-power-expand-01,
+	.sheet-left-power-toggle[value="powerExpand02"] ~ div.item-flex-power .sheet-power-expand-02,
+	.sheet-left-power-toggle[value="powerExpand03"] ~ div.item-flex-power .sheet-power-expand-03,
+	.sheet-left-power-toggle[value="powerExpand04"] ~ div.item-flex-power .sheet-power-expand-04,
+	.sheet-left-power-toggle[value="powerExpand05"] ~ div.item-flex-power .sheet-power-expand-05,
+	.sheet-left-power-toggle[value="powerExpand06"] ~ div.item-flex-power .sheet-power-expand-06,
+	.sheet-left-power-toggle[value="powerExpand07"] ~ div.item-flex-power .sheet-power-expand-07,
+	.sheet-left-power-toggle[value="powerExpand08"] ~ div.item-flex-power .sheet-power-expand-08,
+	.sheet-left-power-toggle[value="powerExpand09"] ~ div.item-flex-power .sheet-power-expand-09 {
+		display: block;
+	}
+	
+	/* Expand the selected right power block. */
+	.sheet-right-power-toggle[value="powerExpand10"] ~ div.item-flex-power .sheet-power-expand-10,
+	.sheet-right-power-toggle[value="powerExpand11"] ~ div.item-flex-power .sheet-power-expand-11,
+	.sheet-right-power-toggle[value="powerExpand12"] ~ div.item-flex-power .sheet-power-expand-12,
+	.sheet-right-power-toggle[value="powerExpand13"] ~ div.item-flex-power .sheet-power-expand-13,
+	.sheet-right-power-toggle[value="powerExpand14"] ~ div.item-flex-power .sheet-power-expand-14,
+	.sheet-right-power-toggle[value="powerExpand15"] ~ div.item-flex-power .sheet-power-expand-15,
+	.sheet-right-power-toggle[value="powerExpand16"] ~ div.item-flex-power .sheet-power-expand-16,
+	.sheet-right-power-toggle[value="powerExpand17"] ~ div.item-flex-power .sheet-power-expand-17 {
+		display: block;
+	}
+	
+	/* Turn down the opacity on the left point values to help visibility overall. */
+	.sheet-left-power-toggle:not([value="powerExpand01"]) ~ div.item-flex-power .subitem-opacity-power01,
+	.sheet-left-power-toggle:not([value="powerExpand02"]) ~ div.item-flex-power .subitem-opacity-power02,
+	.sheet-left-power-toggle:not([value="powerExpand03"]) ~ div.item-flex-power .subitem-opacity-power03,
+	.sheet-left-power-toggle:not([value="powerExpand04"]) ~ div.item-flex-power .subitem-opacity-power04,
+	.sheet-left-power-toggle:not([value="powerExpand05"]) ~ div.item-flex-power .subitem-opacity-power05,
+	.sheet-left-power-toggle:not([value="powerExpand06"]) ~ div.item-flex-power .subitem-opacity-power06,
+	.sheet-left-power-toggle:not([value="powerExpand07"]) ~ div.item-flex-power .subitem-opacity-power07,
+	.sheet-left-power-toggle:not([value="powerExpand08"]) ~ div.item-flex-power .subitem-opacity-power08,
+	.sheet-left-power-toggle:not([value="powerExpand09"]) ~ div.item-flex-power .subitem-opacity-power09 {
+		opacity: 0.4;
+	}
+	
+	/* Turn down the opacity on the right point values to help visibility overall. */
+	.sheet-right-power-toggle:not([value="powerExpand10"]) ~ div.item-flex-power .subitem-opacity-power10,
+	.sheet-right-power-toggle:not([value="powerExpand11"]) ~ div.item-flex-power .subitem-opacity-power11,
+	.sheet-right-power-toggle:not([value="powerExpand12"]) ~ div.item-flex-power .subitem-opacity-power12,
+	.sheet-right-power-toggle:not([value="powerExpand13"]) ~ div.item-flex-power .subitem-opacity-power13,
+	.sheet-right-power-toggle:not([value="powerExpand14"]) ~ div.item-flex-power .subitem-opacity-power14,
+	.sheet-right-power-toggle:not([value="powerExpand15"]) ~ div.item-flex-power .subitem-opacity-power15,
+	.sheet-right-power-toggle:not([value="powerExpand16"]) ~ div.item-flex-power .subitem-opacity-power16,
+	.sheet-right-power-toggle:not([value="powerExpand17"]) ~ div.item-flex-power .subitem-opacity-power17 {
+		opacity: 0.4;
+	}
+	
+	/* Hide the base and active costs for a tidier look. */
+	.subitem-visibility-power01,
+	.subitem-visibility-power02,
+	.subitem-visibility-power03,
+	.subitem-visibility-power04,
+	.subitem-visibility-power05,
+	.subitem-visibility-power06,
+	.subitem-visibility-power07,
+	.subitem-visibility-power08,
+	.subitem-visibility-power09,
+	.subitem-visibility-power10,
+	.subitem-visibility-power11,
+	.subitem-visibility-power12,
+	.subitem-visibility-power13,
+	.subitem-visibility-power14,
+	.subitem-visibility-power15,
+	.subitem-visibility-power16,
+	.subitem-visibility-power17 {
+		visibility: hidden;
+	}
+	
+	.sheet-left-power-toggle[value="powerExpand01"] ~ div.item-flex-power .subitem-flex-power-points-block-left .subitem-visibility-power01,
+	.sheet-left-power-toggle[value="powerExpand02"] ~ div.item-flex-power .subitem-flex-power-points-block-left .subitem-visibility-power02,
+	.sheet-left-power-toggle[value="powerExpand03"] ~ div.item-flex-power .subitem-flex-power-points-block-left .subitem-visibility-power03,
+	.sheet-left-power-toggle[value="powerExpand04"] ~ div.item-flex-power .subitem-flex-power-points-block-left .subitem-visibility-power04,
+	.sheet-left-power-toggle[value="powerExpand05"] ~ div.item-flex-power .subitem-flex-power-points-block-left .subitem-visibility-power05,
+	.sheet-left-power-toggle[value="powerExpand06"] ~ div.item-flex-power .subitem-flex-power-points-block-left .subitem-visibility-power06,
+	.sheet-left-power-toggle[value="powerExpand07"] ~ div.item-flex-power .subitem-flex-power-points-block-left .subitem-visibility-power07,
+	.sheet-left-power-toggle[value="powerExpand08"] ~ div.item-flex-power .subitem-flex-power-points-block-left .subitem-visibility-power08,
+	.sheet-left-power-toggle[value="powerExpand09"] ~ div.item-flex-power .subitem-flex-power-points-block-left .subitem-visibility-power09 {
+		visibility: visible;
+	}
+	
+	.sheet-right-power-toggle[value="powerExpand10"] ~ div.item-flex-power .subitem-flex-power-points-block-right .subitem-visibility-power10,
+	.sheet-right-power-toggle[value="powerExpand11"] ~ div.item-flex-power .subitem-flex-power-points-block-right .subitem-visibility-power11,
+	.sheet-right-power-toggle[value="powerExpand12"] ~ div.item-flex-power .subitem-flex-power-points-block-right .subitem-visibility-power12,
+	.sheet-right-power-toggle[value="powerExpand13"] ~ div.item-flex-power .subitem-flex-power-points-block-right .subitem-visibility-power13,
+	.sheet-right-power-toggle[value="powerExpand14"] ~ div.item-flex-power .subitem-flex-power-points-block-right .subitem-visibility-power14,
+	.sheet-right-power-toggle[value="powerExpand15"] ~ div.item-flex-power .subitem-flex-power-points-block-right .subitem-visibility-power15,
+	.sheet-right-power-toggle[value="powerExpand16"] ~ div.item-flex-power .subitem-flex-power-points-block-right .subitem-visibility-power16,
+	.sheet-right-power-toggle[value="powerExpand17"] ~ div.item-flex-power .subitem-flex-power-points-block-right .subitem-visibility-power17 {
+		visibility: visible;
+	}
+	
+	/* ---------------------------------------------------------------- */
+	/* Custom button for power expand                                   */
+	/* ---------------------------------------------------------------- */
+	
+	.custom-expand-button-container {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		margin-right: 1px;
+	}
+	
+	.custom-expand-button-container button.buttonExpand {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		height: 24px;
+		width: 10px;
+		align-items: center;
+		padding: 0px;
+		margin-right: 2px;
+		margin-left: 0px;
+		border-color: transparent;
+		background: transparent;
+	}
+	
+	.custom-expand-button-container button.buttonExpand span {
+		display: inline-block;
+		text-align: center;
+	}
+	
+	/* Rotate when expanded */
+	.sheet-left-power-toggle[value="powerExpand01"] ~ div.item-flex-power .subitem-flex-power-effect-left .custom-expand-button-container .custom-expand-button-container-01,
+	.sheet-left-power-toggle[value="powerExpand02"] ~ div.item-flex-power .subitem-flex-power-effect-left .custom-expand-button-container .custom-expand-button-container-02,
+	.sheet-left-power-toggle[value="powerExpand03"] ~ div.item-flex-power .subitem-flex-power-effect-left .custom-expand-button-container .custom-expand-button-container-03,
+	.sheet-left-power-toggle[value="powerExpand04"] ~ div.item-flex-power .subitem-flex-power-effect-left .custom-expand-button-container .custom-expand-button-container-04,
+	.sheet-left-power-toggle[value="powerExpand05"] ~ div.item-flex-power .subitem-flex-power-effect-left .custom-expand-button-container .custom-expand-button-container-05,
+	.sheet-left-power-toggle[value="powerExpand06"] ~ div.item-flex-power .subitem-flex-power-effect-left .custom-expand-button-container .custom-expand-button-container-06,
+	.sheet-left-power-toggle[value="powerExpand07"] ~ div.item-flex-power .subitem-flex-power-effect-left .custom-expand-button-container .custom-expand-button-container-07,
+	.sheet-left-power-toggle[value="powerExpand08"] ~ div.item-flex-power .subitem-flex-power-effect-left .custom-expand-button-container .custom-expand-button-container-08,
+	.sheet-left-power-toggle[value="powerExpand09"] ~ div.item-flex-power .subitem-flex-power-effect-left .custom-expand-button-container .custom-expand-button-container-09,
+	.sheet-right-power-toggle[value="powerExpand10"] ~ div.item-flex-power .subitem-flex-power-effect-right .custom-expand-button-container .custom-expand-button-container-10,
+	.sheet-right-power-toggle[value="powerExpand11"] ~ div.item-flex-power .subitem-flex-power-effect-right .custom-expand-button-container .custom-expand-button-container-11,
+	.sheet-right-power-toggle[value="powerExpand12"] ~ div.item-flex-power .subitem-flex-power-effect-right .custom-expand-button-container .custom-expand-button-container-12,
+	.sheet-right-power-toggle[value="powerExpand13"] ~ div.item-flex-power .subitem-flex-power-effect-right .custom-expand-button-container .custom-expand-button-container-13,
+	.sheet-right-power-toggle[value="powerExpand14"] ~ div.item-flex-power .subitem-flex-power-effect-right .custom-expand-button-container .custom-expand-button-container-14,
+	.sheet-right-power-toggle[value="powerExpand15"] ~ div.item-flex-power .subitem-flex-power-effect-right .custom-expand-button-container .custom-expand-button-container-15,
+	.sheet-right-power-toggle[value="powerExpand16"] ~ div.item-flex-power .subitem-flex-power-effect-right .custom-expand-button-container .custom-expand-button-container-16,
+	.sheet-right-power-toggle[value="powerExpand17"] ~ div.item-flex-power .subitem-flex-power-effect-right .custom-expand-button-container .custom-expand-button-container-17 {
+		transform: rotate(90deg);
+	}
+	
+	/* Rotate when not expanded, but hover */
+	.sheet-left-power-toggle:not([value="powerExpand01"]) ~ div.item-flex-power .subitem-flex-power-effect-left .custom-expand-button-container .custom-expand-button-container-01:hover,
+	.sheet-left-power-toggle:not([value="powerExpand02"]) ~ div.item-flex-power .subitem-flex-power-effect-left .custom-expand-button-container .custom-expand-button-container-02:hover,
+	.sheet-left-power-toggle:not([value="powerExpand03"]) ~ div.item-flex-power .subitem-flex-power-effect-left .custom-expand-button-container .custom-expand-button-container-03:hover,
+	.sheet-left-power-toggle:not([value="powerExpand04"]) ~ div.item-flex-power .subitem-flex-power-effect-left .custom-expand-button-container .custom-expand-button-container-04:hover,
+	.sheet-left-power-toggle:not([value="powerExpand05"]) ~ div.item-flex-power .subitem-flex-power-effect-left .custom-expand-button-container .custom-expand-button-container-05:hover,
+	.sheet-left-power-toggle:not([value="powerExpand06"]) ~ div.item-flex-power .subitem-flex-power-effect-left .custom-expand-button-container .custom-expand-button-container-06:hover,
+	.sheet-left-power-toggle:not([value="powerExpand07"]) ~ div.item-flex-power .subitem-flex-power-effect-left .custom-expand-button-container .custom-expand-button-container-07:hover,
+	.sheet-left-power-toggle:not([value="powerExpand08"]) ~ div.item-flex-power .subitem-flex-power-effect-left .custom-expand-button-container .custom-expand-button-container-08:hover,
+	.sheet-left-power-toggle:not([value="powerExpand09"]) ~ div.item-flex-power .subitem-flex-power-effect-left .custom-expand-button-container .custom-expand-button-container-09:hover,
+	.sheet-right-power-toggle:not([value="powerExpand10"]) ~ div.item-flex-power .subitem-flex-power-effect-right .custom-expand-button-container .custom-expand-button-container-10:hover,
+	.sheet-right-power-toggle:not([value="powerExpand11"]) ~ div.item-flex-power .subitem-flex-power-effect-right .custom-expand-button-container .custom-expand-button-container-11:hover,
+	.sheet-right-power-toggle:not([value="powerExpand12"]) ~ div.item-flex-power .subitem-flex-power-effect-right .custom-expand-button-container .custom-expand-button-container-12:hover,
+	.sheet-right-power-toggle:not([value="powerExpand13"]) ~ div.item-flex-power .subitem-flex-power-effect-right .custom-expand-button-container .custom-expand-button-container-13:hover,
+	.sheet-right-power-toggle:not([value="powerExpand14"]) ~ div.item-flex-power .subitem-flex-power-effect-right .custom-expand-button-container .custom-expand-button-container-14:hover,
+	.sheet-right-power-toggle:not([value="powerExpand15"]) ~ div.item-flex-power .subitem-flex-power-effect-right .custom-expand-button-container .custom-expand-button-container-15:hover,
+	.sheet-right-power-toggle:not([value="powerExpand16"]) ~ div.item-flex-power .subitem-flex-power-effect-right .custom-expand-button-container .custom-expand-button-container-16:hover,
+	.sheet-right-power-toggle:not([value="powerExpand17"]) ~ div.item-flex-power .subitem-flex-power-effect-right .custom-expand-button-container .custom-expand-button-container-17:hover {
+		transition: 0.25s;
+		transform: rotate(90deg);
+	}
+	
+	.custom-button-triangle {
+		position: relative; 
+		border-top: 8px solid transparent;
+		border-bottom: 8px solid transparent;
+		border-left: 12px solid silver;
+		border-right: 8px solid transparent;
+		top: 0px;
+		left: 5px;
+	}
+	
+	.custom-button-triangle:before {
+		content: "";
+		width: 0;
+		height: 0;
+		position: absolute;
+		border-top: 6px solid transparent;
+		border-bottom: 6px solid transparent;
+		border-left: 10px solid #FFF9CF;
+		top: -6px;
+		left: -11px; 
+	}
+	
+	.custom-button-triangle:hover,
+	.custom-button-triangle:after {
+		position: relative; 
+		border-top: 8px solid transparent;
+		border-bottom: 8px solid transparent;
+		border-left: 12px solid #666666;
+		border-right: 8px solid transparent;
+		top: 0px;
+		left: 5px;
+	}
\ No newline at end of file
diff --git a/HeroSystem6eHeroic/HeroSystem6eHeroic.html b/HeroSystem6eHeroic/HeroSystem6eHeroic.html
index b25ee5c8ad..470886e2af 100644
--- a/HeroSystem6eHeroic/HeroSystem6eHeroic.html
+++ b/HeroSystem6eHeroic/HeroSystem6eHeroic.html
@@ -7,7 +7,7 @@
 	<button type="action" name="act_options" >Options</button>
 </div>
 
-<input type="hidden" class="sheet-tabstoggle" name="attr_sheetTab"  value="character"/>
+<input type="hidden" class="sheet-tabstoggle" name="attr_sheetTab" value="characteristics"/>
 
 <!--  --------------------------------------------------------------------------------- -->
 <!--  Bio, primary statistics, and combat statistics tab                                -->
@@ -3355,17 +3355,21 @@
 </div>
 
 <!--  --------------------------------------------------------------------------------- -->
-<!--  Powers tab                                                                        -->
+<!--  Powers Tab                                                                        -->
 <!--  --------------------------------------------------------------------------------- -->
 
 <div class="sheet-powers">
 	<div class="grid-container-powers">
 		<!-- Left side powers -->
 		<div class="flex-container-powers-left">
+			
+			<input type="hidden" class="sheet-left-power-toggle" name="attr_leftPowerToggle"  value="powerExpand01" />		
+			
 			<!-- Power 01 -->
 			<div class="item-flex-power">
+			
+				<!-- Power and type -->
 				<div class="subitem-flex-power-heading-left">
-					
 					<div class="power-mover-plus-minus-enclosure">
 						<div class="power-mover-plus-minus-button">
 							<button type="action" class="button buttonPlus" tabindex="-1" name="act_powerUp01">
@@ -3392,54 +3396,78 @@
 					<input type="text" name="attr_powerEND01" value="0" readonly tabindex="-1"/>
 					<button type="action" class="button button-Power-END-left" tabindex="-1" name="act_buttonPowerEND01" tabindex="-1">END</button>
 				</div>
+				
+				<!-- Power effect -->
 				<div class="subitem-flex-power-effect-left">
+					<div class="custom-expand-button-container">
+						<div class="custom-expand-button-container-01">
+							<button type="action" class="buttonExpand" name="act_powerExpand01">
+								<div class=custom-button-triangle>
+								</div>
+							</button>
+						</div>
+					</div>
 					<input type="text" name="attr_powerEffect01" maxlength="25" tabindex="401"/>
 					<input type="text" name="attr_powerDice01" value="0d6" maxlength="16" tabindex="402"/>
 					<h1>Roll:</h1>
 					<input type="number" name="attr_powerSkillRoll01" value="18" min="0" max="30" tabindex="403"/>
 					<button type="action" class="button buttonRollPower" tabindex="-1" name="act_powerRoll01">Roll</button>
 				</div>
-				<div class="subitem-flex-power-active-cost-left">
-					<h1>Base CP:</h1>
-					<input type="number" name="attr_powerBaseCost01" min="0" value="0" tabindex="404"/>
-					<h1>Active CP:</h1>
-					<input type="text" name="attr_powerActiveCost01" value="0" readonly tabindex="-1"/>
-					<h1>Real CP:</h1>
-					<input type="text" name="attr_powerCP01" value="0" readonly tabindex="-1"/>
-				</div>
-				<div class="subitem-flex-power-limitations-left">
-					<h1>Adv:</h1>
-					<input type="number" name="attr_powerAdvantages01" min="0" value="0" step="0.25" tabindex="405"/>
-					<h1>Lim:</h1>
-					<input type="number" name="attr_powerLimitations01" min="0" value="0" step="0.25" tabindex="406"/>
-					<h1>END:</h1>
-					<div class="custom-select">
-						<select name="attr_powerReducedEND01">
-							<option value="noEND">None</option>
-							<option value="costsENDhalf">Costs END (half)</option>
-							<option value="costsENDfull">Costs END (full)</option>
-							<option value="zeroENDAF">Zero (AF)</option>
-							<option value="zeroEND">Zero</option>
-							<option value="reducedENDAF">Reduced (AF)</option>
-							<option value="reducedEND">Reduced</option>
-							<option value="standardEND" selected>Standard</option>
-							<option value="increasedENDx2">Increase x2</option>
-							<option value="increasedENDx3">Increase x3</option>
-							<option value="increasedENDx4">Increase x4</option>
-							<option value="increasedENDx5">Increase x5</option>
-							<option value="increasedENDx6">Increase x6</option>
-							<option value="increasedENDx7">Increase x7</option>
-							<option value="increasedENDx8">Increase x8</option>
-							<option value="increasedENDx9">Increase x9</option>
-							<option value="increasedENDx10">Increase x10</option>
-						</select>
+				
+				<!-- Points Block -->
+				<div class="subitem-flex-power-points-block-left">
+					<div class="subitem-visibility-power01">
+						<h1>Base Cost:</h1>
+						<input type="number" name="attr_powerBaseCost01" min="0" value="0" tabindex="404"/>
+					</div>
+					<div class="subitem-visibility-power01">
+						<h1>Active Cost:</h1>
+						<input type="text" name="attr_powerActiveCost01" value="0" readonly tabindex="-1"/>
+					</div>
+					<div class="subitem-opacity-power01">
+						<h1>CP:</h1>
+						<input type="text" name="attr_powerCP01" value="0" readonly tabindex="-1"/>
 					</div>
 				</div>
-				<textarea name="attr_powerText01" maxlength="512" tabindex="407"></textarea>
+				
+				<!-- Expanding Block -->
+				<div class="sheet-power-expand-01">
+					<div class="subitem-flex-power-limitations-left">
+						<h1>Adv:</h1>
+						<input type="number" name="attr_powerAdvantages01" min="0" value="0" step="0.25" tabindex="405"/>
+						<h1>Lim:</h1>
+						<input type="number" name="attr_powerLimitations01" min="0" value="0" step="0.25" tabindex="406"/>
+						<h1>END:</h1>
+						<div class="custom-select">
+							<select name="attr_powerReducedEND01">
+								<option value="noEND">None</option>
+								<option value="costsENDhalf">Costs END (half)</option>
+								<option value="costsENDfull">Costs END (full)</option>
+								<option value="zeroENDAF">Zero (AF)</option>
+								<option value="zeroEND">Zero</option>
+								<option value="reducedENDAF">Reduced (AF)</option>
+								<option value="reducedEND">Reduced</option>
+								<option value="standardEND" selected>Standard</option>
+								<option value="increasedENDx2">Increase x2</option>
+								<option value="increasedENDx3">Increase x3</option>
+								<option value="increasedENDx4">Increase x4</option>
+								<option value="increasedENDx5">Increase x5</option>
+								<option value="increasedENDx6">Increase x6</option>
+								<option value="increasedENDx7">Increase x7</option>
+								<option value="increasedENDx8">Increase x8</option>
+								<option value="increasedENDx9">Increase x9</option>
+								<option value="increasedENDx10">Increase x10</option>
+							</select>
+						</div>
+					</div>
+					<textarea name="attr_powerText01" maxlength="512" tabindex="407"></textarea>
+				</div>
 			</div>
 			
 			<!-- Power 02 -->
 			<div class="item-flex-power">
+			
+				<!-- Power and type -->
 				<div class="subitem-flex-power-heading-left">
 									
 					<div class="power-mover-plus-minus-enclosure">
@@ -3468,54 +3496,78 @@
 					<input type="text" name="attr_powerEND02" value="0" readonly tabindex="-1"/>
 					<button type="action" class="button button-Power-END-left" tabindex="-1" name="act_buttonPowerEND02">END</button>
 				</div>
+				
+				<!-- Power effect -->
 				<div class="subitem-flex-power-effect-left">
+					<div class="custom-expand-button-container">
+						<div class="custom-expand-button-container-02">
+							<button type="action" class="buttonExpand" name="act_powerExpand02">
+								<div class=custom-button-triangle>
+								</div>
+							</button>
+						</div>
+					</div>
 					<input type="text" name="attr_powerEffect02" maxlength="25" tabindex="411"/>
 					<input type="text" name="attr_powerDice02" value="0d6" maxlength="16" tabindex="412"/>
 					<h1>Roll:</h1>
 					<input type="number" name="attr_powerSkillRoll02" value="18" min="0" max="30" tabindex="413"/>
 					<button type="action" class="button buttonRollPower" tabindex="-1" name="act_powerRoll02">Roll</button>
 				</div>
-				<div class="subitem-flex-power-active-cost-left">
-					<h1>Base CP:</h1>
-					<input type="number" name="attr_powerBaseCost02" min="0" value="0" tabindex="414"/>
-					<h1>Active CP:</h1>
-					<input type="text" name="attr_powerActiveCost02" value="0" readonly tabindex="-1"/>
-					<h1>Real CP:</h1>
-					<input type="text" name="attr_powerCP02" value="0" readonly tabindex="-1"/>
-				</div>
-				<div class="subitem-flex-power-limitations-left">
-					<h1>Adv:</h1>
-					<input type="number" name="attr_powerAdvantages02" min="0" value="0" step="0.25" tabindex="415"/>
-					<h1>Lim:</h1>
-					<input type="number" name="attr_powerLimitations02" min="0" value="0" step="0.25" tabindex="416"/>
-					<h1>END:</h1>
-					<div class="custom-select">
-						<select name="attr_powerReducedEND02">
-							<option value="noEND">None</option>
-							<option value="costsENDhalf">Costs END (half)</option>
-							<option value="costsENDfull">Costs END (full)</option>
-							<option value="zeroENDAF">Zero (AF)</option>
-							<option value="zeroEND">Zero</option>
-							<option value="reducedENDAF">Reduced (AF)</option>
-							<option value="reducedEND">Reduced</option>
-							<option value="standardEND" selected>Standard</option>
-							<option value="increasedENDx2">Increase x2</option>
-							<option value="increasedENDx3">Increase x3</option>
-							<option value="increasedENDx4">Increase x4</option>
-							<option value="increasedENDx5">Increase x5</option>
-							<option value="increasedENDx6">Increase x6</option>
-							<option value="increasedENDx7">Increase x7</option>
-							<option value="increasedENDx8">Increase x8</option>
-							<option value="increasedENDx9">Increase x9</option>
-							<option value="increasedENDx10">Increase x10</option>
-						</select>
+				
+				<!-- Points Block -->
+				<div class="subitem-flex-power-points-block-left">
+					<div class="subitem-visibility-power02">
+						<h1>Base Cost:</h1>
+						<input type="number" name="attr_powerBaseCost02" min="0" value="0" tabindex="414"/>
+					</div>
+					<div class="subitem-visibility-power02">
+						<h1>Active Cost:</h1>
+						<input type="text" name="attr_powerActiveCost02" value="0" readonly tabindex="-1"/>
+					</div>
+					<div class="subitem-opacity-power02">
+						<h1>CP:</h1>
+						<input type="text" name="attr_powerCP02" value="0" readonly tabindex="-1"/>
 					</div>
 				</div>
-				<textarea name="attr_powerText02" maxlength="512" tabindex="417"></textarea>
+				
+				<!-- Expanding Block -->
+				<div class="sheet-power-expand-02">
+					<div class="subitem-flex-power-limitations-left">
+						<h1>Adv:</h1>
+						<input type="number" name="attr_powerAdvantages02" min="0" value="0" step="0.25" tabindex="415"/>
+						<h1>Lim:</h1>
+						<input type="number" name="attr_powerLimitations02" min="0" value="0" step="0.25" tabindex="416"/>
+						<h1>END:</h1>
+						<div class="custom-select">
+							<select name="attr_powerReducedEND02">
+								<option value="noEND">None</option>
+								<option value="costsENDhalf">Costs END (half)</option>
+								<option value="costsENDfull">Costs END (full)</option>
+								<option value="zeroENDAF">Zero (AF)</option>
+								<option value="zeroEND">Zero</option>
+								<option value="reducedENDAF">Reduced (AF)</option>
+								<option value="reducedEND">Reduced</option>
+								<option value="standardEND" selected>Standard</option>
+								<option value="increasedENDx2">Increase x2</option>
+								<option value="increasedENDx3">Increase x3</option>
+								<option value="increasedENDx4">Increase x4</option>
+								<option value="increasedENDx5">Increase x5</option>
+								<option value="increasedENDx6">Increase x6</option>
+								<option value="increasedENDx7">Increase x7</option>
+								<option value="increasedENDx8">Increase x8</option>
+								<option value="increasedENDx9">Increase x9</option>
+								<option value="increasedENDx10">Increase x10</option>
+							</select>
+						</div>
+					</div>
+					<textarea name="attr_powerText02" maxlength="512" tabindex="417"></textarea>
+				</div>
 			</div>
 			
 			<!-- Power 03 -->
 			<div class="item-flex-power">
+			
+				<!-- Power and type -->
 				<div class="subitem-flex-power-heading-left">
 					
 					<div class="power-mover-plus-minus-enclosure">
@@ -3544,54 +3596,78 @@
 					<input type="text" name="attr_powerEND03" value="0" readonly tabindex="-1"/>
 					<button type="action" class="button button-Power-END-left" tabindex="-1" name="act_buttonPowerEND03">END</button>
 				</div>
+				
+				<!-- Power effect -->
 				<div class="subitem-flex-power-effect-left">
+					<div class="custom-expand-button-container">
+						<div class="custom-expand-button-container-03">
+							<button type="action" class="buttonExpand" name="act_powerExpand03">
+								<div class=custom-button-triangle>
+								</div>
+							</button>
+						</div>
+					</div>
 					<input type="text" name="attr_powerEffect03" maxlength="25" tabindex="421"/>
 					<input type="text" name="attr_powerDice03" value="0d6" maxlength="16" tabindex="422"/>
 					<h1>Roll:</h1>
 					<input type="number" name="attr_powerSkillRoll03" value="18" min="0" max="30" tabindex="423"/>
 					<button type="action" class="button buttonRollPower" tabindex="-1" name="act_powerRoll03">Roll</button>
 				</div>
-				<div class="subitem-flex-power-active-cost-left">
-					<h1>Base CP:</h1>
-					<input type="number" name="attr_powerBaseCost03" min="0" value="0" tabindex="424"/>
-					<h1>Active CP:</h1>
-					<input type="text" name="attr_powerActiveCost03" value="0" readonly tabindex="-1"/>
-					<h1>Real CP:</h1>
-					<input type="text" name="attr_powerCP03" value="0" readonly tabindex="-1"/>
-				</div>
-				<div class="subitem-flex-power-limitations-left">
-					<h1>Adv:</h1>
-					<input type="number" name="attr_powerAdvantages03" min="0" value="0" step="0.25" tabindex="425"/>
-					<h1>Lim:</h1>
-					<input type="number" name="attr_powerLimitations03" min="0" value="0" step="0.25" tabindex="426"/>
-					<h1>END:</h1>
-					<div class="custom-select">
-						<select name="attr_powerReducedEND03">
-							<option value="noEND">None</option>
-							<option value="costsENDhalf">Costs END (half)</option>
-							<option value="costsENDfull">Costs END (full)</option>
-							<option value="zeroENDAF">Zero (AF)</option>
-							<option value="zeroEND">Zero</option>
-							<option value="reducedENDAF">Reduced (AF)</option>
-							<option value="reducedEND">Reduced</option>
-							<option value="standardEND" selected>Standard</option>
-							<option value="increasedENDx2">Increase x2</option>
-							<option value="increasedENDx3">Increase x3</option>
-							<option value="increasedENDx4">Increase x4</option>
-							<option value="increasedENDx5">Increase x5</option>
-							<option value="increasedENDx6">Increase x6</option>
-							<option value="increasedENDx7">Increase x7</option>
-							<option value="increasedENDx8">Increase x8</option>
-							<option value="increasedENDx9">Increase x9</option>
-							<option value="increasedENDx10">Increase x10</option>
-						</select>
+				
+				<!-- Points Block -->
+				<div class="subitem-flex-power-points-block-left">
+					<div class="subitem-visibility-power03">
+						<h1>Base Cost:</h1>
+						<input type="number" name="attr_powerBaseCost03" min="0" value="0" tabindex="424"/>
+					</div>
+					<div class="subitem-visibility-power03">
+						<h1>Active Cost:</h1>
+						<input type="text" name="attr_powerActiveCost03" value="0" readonly tabindex="-1"/>
+					</div>
+					<div class="subitem-opacity-power03">
+						<h1>CP:</h1>
+						<input type="text" name="attr_powerCP03" value="0" readonly tabindex="-1"/>
 					</div>
 				</div>
-				<textarea name="attr_powerText03" maxlength="512" tabindex="427"></textarea>
+				
+				<!-- Expanding Block -->
+				<div class="sheet-power-expand-03">
+					<div class="subitem-flex-power-limitations-left">
+						<h1>Adv:</h1>
+						<input type="number" name="attr_powerAdvantages03" min="0" value="0" step="0.25" tabindex="425"/>
+						<h1>Lim:</h1>
+						<input type="number" name="attr_powerLimitations03" min="0" value="0" step="0.25" tabindex="426"/>
+						<h1>END:</h1>
+						<div class="custom-select">
+							<select name="attr_powerReducedEND03">
+								<option value="noEND">None</option>
+								<option value="costsENDhalf">Costs END (half)</option>
+								<option value="costsENDfull">Costs END (full)</option>
+								<option value="zeroENDAF">Zero (AF)</option>
+								<option value="zeroEND">Zero</option>
+								<option value="reducedENDAF">Reduced (AF)</option>
+								<option value="reducedEND">Reduced</option>
+								<option value="standardEND" selected>Standard</option>
+								<option value="increasedENDx2">Increase x2</option>
+								<option value="increasedENDx3">Increase x3</option>
+								<option value="increasedENDx4">Increase x4</option>
+								<option value="increasedENDx5">Increase x5</option>
+								<option value="increasedENDx6">Increase x6</option>
+								<option value="increasedENDx7">Increase x7</option>
+								<option value="increasedENDx8">Increase x8</option>
+								<option value="increasedENDx9">Increase x9</option>
+								<option value="increasedENDx10">Increase x10</option>
+							</select>
+						</div>
+					</div>
+					<textarea name="attr_powerText03" maxlength="512" tabindex="427"></textarea>
+				</div>
 			</div>
 			
 			<!-- Power 04 -->
 			<div class="item-flex-power">
+			
+				<!-- Power and type -->
 				<div class="subitem-flex-power-heading-left">
 					
 					<div class="power-mover-plus-minus-enclosure">
@@ -3620,54 +3696,78 @@
 					<input type="text" name="attr_powerEND04" value="0" readonly tabindex="-1"/>
 					<button type="action" class="button button-Power-END-left" tabindex="-1" name="act_buttonPowerEND04">END</button>
 				</div>
+				
+				<!-- Power effect -->
 				<div class="subitem-flex-power-effect-left">
+					<div class="custom-expand-button-container">
+						<div class="custom-expand-button-container-04">
+							<button type="action" class="buttonExpand" name="act_powerExpand04">
+								<div class=custom-button-triangle>
+								</div>
+							</button>
+						</div>
+					</div>
 					<input type="text" name="attr_powerEffect04" maxlength="25" tabindex="431"/>
 					<input type="text" name="attr_powerDice04" value="0d6" maxlength="16" tabindex="432"/>
 					<h1>Roll:</h1>
 					<input type="number" name="attr_powerSkillRoll04" value="18" min="0" max="30" tabindex="433"/>
 					<button type="action" class="button buttonRollPower" tabindex="-1" name="act_powerRoll04">Roll</button>
 				</div>
-				<div class="subitem-flex-power-active-cost-left">
-					<h1>Base CP:</h1>
-					<input type="number" name="attr_powerBaseCost04" min="0" value="0" tabindex="434"/>
-					<h1>Active CP:</h1>
-					<input type="text" name="attr_powerActiveCost04" value="0" readonly tabindex="-1"/>
-					<h1>Real CP:</h1>
-					<input type="text" name="attr_powerCP04" value="0" readonly tabindex="-1"/>
-				</div>
-				<div class="subitem-flex-power-limitations-left">
-					<h1>Adv:</h1>
-					<input type="number" name="attr_powerAdvantages04" min="0" value="0" step="0.25" tabindex="435"/>
-					<h1>Lim:</h1>
-					<input type="number" name="attr_powerLimitations04" min="0" value="0" step="0.25" tabindex="436"/>
-					<h1>END:</h1>
-					<div class="custom-select">
-						<select name="attr_powerReducedEND04">
-							<option value="noEND">None</option>
-							<option value="costsENDhalf">Costs END (half)</option>
-							<option value="costsENDfull">Costs END (full)</option>
-							<option value="zeroENDAF">Zero (AF)</option>
-							<option value="zeroEND">Zero</option>
-							<option value="reducedENDAF">Reduced (AF)</option>
-							<option value="reducedEND">Reduced</option>
-							<option value="standardEND" selected>Standard</option>
-							<option value="increasedENDx2">Increase x2</option>
-							<option value="increasedENDx3">Increase x3</option>
-							<option value="increasedENDx4">Increase x4</option>
-							<option value="increasedENDx5">Increase x5</option>
-							<option value="increasedENDx6">Increase x6</option>
-							<option value="increasedENDx7">Increase x7</option>
-							<option value="increasedENDx8">Increase x8</option>
-							<option value="increasedENDx9">Increase x9</option>
-							<option value="increasedENDx10">Increase x10</option>
-						</select>
+				
+				<!-- Points Block -->
+				<div class="subitem-flex-power-points-block-left">
+					<div class="subitem-visibility-power04">
+						<h1>Base Cost:</h1>
+						<input type="number" name="attr_powerBaseCost04" min="0" value="0" tabindex="434"/>
+					</div>
+					<div class="subitem-visibility-power04">
+						<h1>Active Cost:</h1>
+						<input type="text" name="attr_powerActiveCost04" value="0" readonly tabindex="-1"/>
+					</div>
+					<div class="subitem-opacity-power04">
+						<h1>CP:</h1>
+						<input type="text" name="attr_powerCP04" value="0" readonly tabindex="-1"/>
 					</div>
 				</div>
-				<textarea name="attr_powerText04" maxlength="512" tabindex="437"></textarea>
+				
+				<!-- Expanding Block -->
+				<div class="sheet-power-expand-04">
+					<div class="subitem-flex-power-limitations-left">
+						<h1>Adv:</h1>
+						<input type="number" name="attr_powerAdvantages04" min="0" value="0" step="0.25" tabindex="435"/>
+						<h1>Lim:</h1>
+						<input type="number" name="attr_powerLimitations04" min="0" value="0" step="0.25" tabindex="436"/>
+						<h1>END:</h1>
+						<div class="custom-select">
+							<select name="attr_powerReducedEND04">
+								<option value="noEND">None</option>
+								<option value="costsENDhalf">Costs END (half)</option>
+								<option value="costsENDfull">Costs END (full)</option>
+								<option value="zeroENDAF">Zero (AF)</option>
+								<option value="zeroEND">Zero</option>
+								<option value="reducedENDAF">Reduced (AF)</option>
+								<option value="reducedEND">Reduced</option>
+								<option value="standardEND" selected>Standard</option>
+								<option value="increasedENDx2">Increase x2</option>
+								<option value="increasedENDx3">Increase x3</option>
+								<option value="increasedENDx4">Increase x4</option>
+								<option value="increasedENDx5">Increase x5</option>
+								<option value="increasedENDx6">Increase x6</option>
+								<option value="increasedENDx7">Increase x7</option>
+								<option value="increasedENDx8">Increase x8</option>
+								<option value="increasedENDx9">Increase x9</option>
+								<option value="increasedENDx10">Increase x10</option>
+							</select>
+						</div>
+					</div>
+					<textarea name="attr_powerText04" maxlength="512" tabindex="437"></textarea>
+				</div>
 			</div>
 			
 			<!-- Power 05 -->
 			<div class="item-flex-power">
+			
+				<!-- Power and type -->
 				<div class="subitem-flex-power-heading-left">
 					
 					<div class="power-mover-plus-minus-enclosure">
@@ -3696,58 +3796,79 @@
 					<input type="text" name="attr_powerEND05" value="0" readonly tabindex="-1"/>
 					<button type="action" class="button button-Power-END-left" tabindex="-1" name="act_buttonPowerEND05">END</button>
 				</div>
+				
+				<!-- Power effect -->
 				<div class="subitem-flex-power-effect-left">
+					<div class="custom-expand-button-container">
+						<div class="custom-expand-button-container-05">
+							<button type="action" class="buttonExpand" name="act_powerExpand05">
+								<div class=custom-button-triangle>
+								</div>
+							</button>
+						</div>
+					</div>
 					<input type="text" name="attr_powerEffect05" maxlength="25" tabindex="441"/>
 					<input type="text" name="attr_powerDice05" value="0d6" maxlength="16" tabindex="442"/>
 					<h1>Roll:</h1>
 					<input type="number" name="attr_powerSkillRoll05" value="18" min="0" max="30" tabindex="443"/>
-					<button type="action" class="button buttonRollPower" tabindex="-1" name="act_powerRoll05">Roll</button>
+					<button type="action" class="button buttonRollPower" tabindex="-1" name="act_powerRoll04">Roll</button>
 				</div>
-				<div class="subitem-flex-power-active-cost-left">
-					<h1>Base CP:</h1>
-					<input type="number" name="attr_powerBaseCost05" min="0" value="0" tabindex="444"/>
-					<h1>Active CP:</h1>
-					<input type="text" name="attr_powerActiveCost05" value="0" readonly tabindex="-1"/>
-					<h1>Real CP:</h1>
-					<input type="text" name="attr_powerCP05" value="0" readonly tabindex="-1"/>
-				</div>
-				<div class="subitem-flex-power-limitations-left">
-					<h1>Adv:</h1>
-					<input type="number" name="attr_powerAdvantages05" min="0" value="0" step="0.25" tabindex="445"/>
-					<h1>Lim:</h1>
-					<input type="number" name="attr_powerLimitations05" min="0" value="0" step="0.25" tabindex="446"/>
-					<h1>END:</h1>
-					<div class="custom-select">
-						<select name="attr_powerReducedEND05">
-							<option value="noEND">None</option>
-							<option value="costsENDhalf">Costs END (half)</option>
-							<option value="costsENDfull">Costs END (full)</option>
-							<option value="zeroENDAF">Zero (AF)</option>
-							<option value="zeroEND">Zero</option>
-							<option value="reducedENDAF">Reduced (AF)</option>
-							<option value="reducedEND">Reduced</option>
-							<option value="standardEND" selected>Standard</option>
-							<option value="increasedENDx2">Increase x2</option>
-							<option value="increasedENDx3">Increase x3</option>
-							<option value="increasedENDx4">Increase x4</option>
-							<option value="increasedENDx5">Increase x5</option>
-							<option value="increasedENDx6">Increase x6</option>
-							<option value="increasedENDx7">Increase x7</option>
-							<option value="increasedENDx8">Increase x8</option>
-							<option value="increasedENDx9">Increase x9</option>
-							<option value="increasedENDx10">Increase x10</option>
-						</select>
+				
+				<!-- Points Block -->
+				<div class="subitem-flex-power-points-block-left">
+					<div class="subitem-visibility-power05">
+						<h1>Base Cost:</h1>
+						<input type="number" name="attr_powerBaseCost05" min="0" value="0" tabindex="444"/>
+					</div>
+					<div class="subitem-visibility-power05">
+						<h1>Active Cost:</h1>
+						<input type="text" name="attr_powerActiveCost05" value="0" readonly tabindex="-1"/>
+					</div>
+					<div class="subitem-opacity-power05">
+						<h1>CP:</h1>
+						<input type="text" name="attr_powerCP05" value="0" readonly tabindex="-1"/>
 					</div>
 				</div>
-				<textarea name="attr_powerText05" maxlength="512" tabindex="447"></textarea>
+				
+				<!-- Expanding Block -->
+				<div class="sheet-power-expand-05">
+					<div class="subitem-flex-power-limitations-left">
+						<h1>Adv:</h1>
+						<input type="number" name="attr_powerAdvantages05" min="0" value="0" step="0.25" tabindex="445"/>
+						<h1>Lim:</h1>
+						<input type="number" name="attr_powerLimitations05" min="0" value="0" step="0.25" tabindex="446"/>
+						<h1>END:</h1>
+						<div class="custom-select">
+							<select name="attr_powerReducedEND05">
+								<option value="noEND">None</option>
+								<option value="costsENDhalf">Costs END (half)</option>
+								<option value="costsENDfull">Costs END (full)</option>
+								<option value="zeroENDAF">Zero (AF)</option>
+								<option value="zeroEND">Zero</option>
+								<option value="reducedENDAF">Reduced (AF)</option>
+								<option value="reducedEND">Reduced</option>
+								<option value="standardEND" selected>Standard</option>
+								<option value="increasedENDx2">Increase x2</option>
+								<option value="increasedENDx3">Increase x3</option>
+								<option value="increasedENDx4">Increase x4</option>
+								<option value="increasedENDx5">Increase x5</option>
+								<option value="increasedENDx6">Increase x6</option>
+								<option value="increasedENDx7">Increase x7</option>
+								<option value="increasedENDx8">Increase x8</option>
+								<option value="increasedENDx9">Increase x9</option>
+								<option value="increasedENDx10">Increase x10</option>
+							</select>
+						</div>
+					</div>
+					<textarea name="attr_powerText05" maxlength="512" tabindex="447"></textarea>
+				</div>
 			</div>
-		</div>
-		
-		<!-- Right side powers -->
-		<div class="flex-container-powers-right">
+			
 			<!-- Power 06 -->
 			<div class="item-flex-power">
-				<div class="subitem-flex-power-heading-right">
+			
+				<!-- Power and type -->
+				<div class="subitem-flex-power-heading-left">
 					
 					<div class="power-mover-plus-minus-enclosure">
 						<div class="power-mover-plus-minus-button">
@@ -3761,7 +3882,7 @@
 					</div>
 					
 					<input type="text" value="" name="attr_powerName06" maxlength="35" tabindex="450"/>
-					<div class="custom-select-alternate">
+					<div class="custom-select">
 						<select name="attr_powerType06">
 							<option value="single" selected>Single Power</option>
 							<option value="multipower">Multipower</option>
@@ -3773,57 +3894,81 @@
 						</select>
 					</div>
 					<input type="text" name="attr_powerEND06" value="0" readonly tabindex="-1"/>
-					<button type="action" class="button button-Power-END-right" tabindex="-1" name="act_buttonPowerEND06">END</button>
+					<button type="action" class="button button-Power-END-left" tabindex="-1" name="act_buttonPowerEND06">END</button>
 				</div>
-				<div class="subitem-flex-power-effect-right">
+				
+				<!-- Power effect -->
+				<div class="subitem-flex-power-effect-left">
+					<div class="custom-expand-button-container">
+						<div class="custom-expand-button-container-02">
+							<button type="action" class="buttonExpand" name="act_powerExpand06">
+								<div class=custom-button-triangle>
+								</div>
+							</button>
+						</div>
+					</div>
 					<input type="text" name="attr_powerEffect06" maxlength="25" tabindex="451"/>
 					<input type="text" name="attr_powerDice06" value="0d6" maxlength="16" tabindex="452"/>
 					<h1>Roll:</h1>
 					<input type="number" name="attr_powerSkillRoll06" value="18" min="0" max="30" tabindex="453"/>
 					<button type="action" class="button buttonRollPower" tabindex="-1" name="act_powerRoll06">Roll</button>
 				</div>
-				<div class="subitem-flex-power-active-cost-right">
-					<h1>Base CP:</h1>
-					<input type="number" name="attr_powerBaseCost06" min="0" value="0" tabindex="454"/>
-					<h1>Active CP:</h1>
-					<input type="text" name="attr_powerActiveCost06" value="0" readonly tabindex="-1"/>
-					<h1>Real CP:</h1>
-					<input type="text" name="attr_powerCP06" value="0" readonly tabindex="-1"/>
-				</div>
-				<div class="subitem-flex-power-limitations-right">
-					<h1>Adv:</h1>
-					<input type="number" name="attr_powerAdvantages06" min="0" value="0" step="0.25" tabindex="455"/>
-					<h1>Lim:</h1>
-					<input type="number" name="attr_powerLimitations06" min="0" value="0" step="0.25" tabindex="456"/>
-					<h1>END:</h1>
-					<div class="custom-select-alternate">
-						<select name="attr_powerReducedEND06">
-							<option value="noEND">None</option>
-							<option value="costsENDhalf">Costs END (half)</option>
-							<option value="costsENDfull">Costs END (full)</option>
-							<option value="zeroENDAF">Zero (AF)</option>
-							<option value="zeroEND">Zero</option>
-							<option value="reducedENDAF">Reduced (AF)</option>
-							<option value="reducedEND">Reduced</option>
-							<option value="standardEND" selected>Standard</option>
-							<option value="increasedENDx2">Increase x2</option>
-							<option value="increasedENDx3">Increase x3</option>
-							<option value="increasedENDx4">Increase x4</option>
-							<option value="increasedENDx5">Increase x5</option>
-							<option value="increasedENDx6">Increase x6</option>
-							<option value="increasedENDx7">Increase x7</option>
-							<option value="increasedENDx8">Increase x8</option>
-							<option value="increasedENDx9">Increase x9</option>
-							<option value="increasedENDx10">Increase x10</option>
-						</select>
+				
+				<!-- Points Block -->
+				<div class="subitem-flex-power-points-block-left">
+					<div class="subitem-visibility-power06">
+						<h1>Base Cost:</h1>
+						<input type="number" name="attr_powerBaseCost06" min="0" value="0" tabindex="454"/>
+					</div>
+					<div class="subitem-visibility-power06">
+						<h1>Active Cost:</h1>
+						<input type="text" name="attr_powerActiveCost06" value="0" readonly tabindex="-1"/>
+					</div>
+					<div class="subitem-opacity-power06">
+						<h1>CP:</h1>
+						<input type="text" name="attr_powerCP06" value="0" readonly tabindex="-1"/>
 					</div>
 				</div>
-				<textarea name="attr_powerText06" maxlength="512" tabindex="457"></textarea>
+				
+				<!-- Expanding Block -->
+				<div class="sheet-power-expand-06">
+					<div class="subitem-flex-power-limitations-left">
+						<h1>Adv:</h1>
+						<input type="number" name="attr_powerAdvantages06" min="0" value="0" step="0.25" tabindex="455"/>
+						<h1>Lim:</h1>
+						<input type="number" name="attr_powerLimitations06" min="0" value="0" step="0.25" tabindex="456"/>
+						<h1>END:</h1>
+						<div class="custom-select">
+							<select name="attr_powerReducedEND06">
+								<option value="noEND">None</option>
+								<option value="costsENDhalf">Costs END (half)</option>
+								<option value="costsENDfull">Costs END (full)</option>
+								<option value="zeroENDAF">Zero (AF)</option>
+								<option value="zeroEND">Zero</option>
+								<option value="reducedENDAF">Reduced (AF)</option>
+								<option value="reducedEND">Reduced</option>
+								<option value="standardEND" selected>Standard</option>
+								<option value="increasedENDx2">Increase x2</option>
+								<option value="increasedENDx3">Increase x3</option>
+								<option value="increasedENDx4">Increase x4</option>
+								<option value="increasedENDx5">Increase x5</option>
+								<option value="increasedENDx6">Increase x6</option>
+								<option value="increasedENDx7">Increase x7</option>
+								<option value="increasedENDx8">Increase x8</option>
+								<option value="increasedENDx9">Increase x9</option>
+								<option value="increasedENDx10">Increase x10</option>
+							</select>
+						</div>
+					</div>
+					<textarea name="attr_powerText06" maxlength="512" tabindex="457"></textarea>
+				</div>
 			</div>
 			
 			<!-- Power 07 -->
 			<div class="item-flex-power">
-				<div class="subitem-flex-power-heading-right">
+			
+				<!-- Power and type -->
+				<div class="subitem-flex-power-heading-left">
 					
 					<div class="power-mover-plus-minus-enclosure">
 						<div class="power-mover-plus-minus-button">
@@ -3837,7 +3982,7 @@
 					</div>
 					
 					<input type="text" value="" name="attr_powerName07" maxlength="35" tabindex="460"/>
-					<div class="custom-select-alternate">
+					<div class="custom-select">
 						<select name="attr_powerType07">
 							<option value="single" selected>Single Power</option>
 							<option value="multipower">Multipower</option>
@@ -3849,57 +3994,81 @@
 						</select>
 					</div>
 					<input type="text" name="attr_powerEND07" value="0" readonly tabindex="-1"/>
-					<button type="action" class="button button-Power-END-right" tabindex="-1" name="act_buttonPowerEND07">END</button>
+					<button type="action" class="button button-Power-END-left" tabindex="-1" name="act_buttonPowerEND07">END</button>
 				</div>
-				<div class="subitem-flex-power-effect-right">
+				
+				<!-- Power effect -->
+				<div class="subitem-flex-power-effect-left">
+					<div class="custom-expand-button-container">
+						<div class="custom-expand-button-container-07">
+							<button type="action" class="buttonExpand" name="act_powerExpand07">
+								<div class=custom-button-triangle>
+								</div>
+							</button>
+						</div>
+					</div>
 					<input type="text" name="attr_powerEffect07" maxlength="25" tabindex="461"/>
 					<input type="text" name="attr_powerDice07" value="0d6" maxlength="16" tabindex="462"/>
 					<h1>Roll:</h1>
 					<input type="number" name="attr_powerSkillRoll07" value="18" min="0" max="30" tabindex="463"/>
 					<button type="action" class="button buttonRollPower" tabindex="-1" name="act_powerRoll07">Roll</button>
 				</div>
-				<div class="subitem-flex-power-active-cost-right">
-					<h1>Base CP:</h1>
-					<input type="number" name="attr_powerBaseCost07" min="0" value="0" tabindex="464"/>
-					<h1>Active CP:</h1>
-					<input type="text" name="attr_powerActiveCost07" value="0" readonly tabindex="-1"/>
-					<h1>Real CP:</h1>
-					<input type="text" name="attr_powerCP07" value="0" readonly tabindex="-1"/>
-				</div>
-				<div class="subitem-flex-power-limitations-right">
-					<h1>Adv:</h1>
-					<input type="number" name="attr_powerAdvantages07" min="0" value="0" step="0.25" tabindex="465"/>
-					<h1>Lim:</h1>
-					<input type="number" name="attr_powerLimitations07" min="0" value="0" step="0.25" tabindex="466"/>
-					<h1>END:</h1>
-					<div class="custom-select-alternate">
-						<select name="attr_powerReducedEND07">
-							<option value="noEND">None</option>
-							<option value="costsENDhalf">Costs END (half)</option>
-							<option value="costsENDfull">Costs END (full)</option>
-							<option value="zeroENDAF">Zero (AF)</option>
-							<option value="zeroEND">Zero</option>
-							<option value="reducedENDAF">Reduced (AF)</option>
-							<option value="reducedEND">Reduced</option>
-							<option value="standardEND" selected>Standard</option>
-							<option value="increasedENDx2">Increase x2</option>
-							<option value="increasedENDx3">Increase x3</option>
-							<option value="increasedENDx4">Increase x4</option>
-							<option value="increasedENDx5">Increase x5</option>
-							<option value="increasedENDx6">Increase x6</option>
-							<option value="increasedENDx7">Increase x7</option>
-							<option value="increasedENDx8">Increase x8</option>
-							<option value="increasedENDx9">Increase x9</option>
-							<option value="increasedENDx10">Increase x10</option>
-						</select>
+				
+				<!-- Points Block -->
+				<div class="subitem-flex-power-points-block-left">
+					<div class="subitem-visibility-power07">
+						<h1>Base Cost:</h1>
+						<input type="number" name="attr_powerBaseCost07" min="0" value="0" tabindex="464"/>
+					</div>
+					<div class="subitem-visibility-power07">
+						<h1>Active Cost:</h1>
+						<input type="text" name="attr_powerActiveCost07" value="0" readonly tabindex="-1"/>
+					</div>
+					<div class="subitem-opacity-power07">
+						<h1>CP:</h1>
+						<input type="text" name="attr_powerCP07" value="0" readonly tabindex="-1"/>
 					</div>
 				</div>
-				<textarea name="attr_powerText07" maxlength="512" tabindex="467"></textarea>
+				
+				<!-- Expanding Block -->
+				<div class="sheet-power-expand-07">
+					<div class="subitem-flex-power-limitations-left">
+						<h1>Adv:</h1>
+						<input type="number" name="attr_powerAdvantages07" min="0" value="0" step="0.25" tabindex="465"/>
+						<h1>Lim:</h1>
+						<input type="number" name="attr_powerLimitations07" min="0" value="0" step="0.25" tabindex="466"/>
+						<h1>END:</h1>
+						<div class="custom-select">
+							<select name="attr_powerReducedEND07">
+								<option value="noEND">None</option>
+								<option value="costsENDhalf">Costs END (half)</option>
+								<option value="costsENDfull">Costs END (full)</option>
+								<option value="zeroENDAF">Zero (AF)</option>
+								<option value="zeroEND">Zero</option>
+								<option value="reducedENDAF">Reduced (AF)</option>
+								<option value="reducedEND">Reduced</option>
+								<option value="standardEND" selected>Standard</option>
+								<option value="increasedENDx2">Increase x2</option>
+								<option value="increasedENDx3">Increase x3</option>
+								<option value="increasedENDx4">Increase x4</option>
+								<option value="increasedENDx5">Increase x5</option>
+								<option value="increasedENDx6">Increase x6</option>
+								<option value="increasedENDx7">Increase x7</option>
+								<option value="increasedENDx8">Increase x8</option>
+								<option value="increasedENDx9">Increase x9</option>
+								<option value="increasedENDx10">Increase x10</option>
+							</select>
+						</div>
+					</div>
+					<textarea name="attr_powerText07" maxlength="512" tabindex="467"></textarea>
+				</div>
 			</div>
 			
 			<!-- Power 08 -->
 			<div class="item-flex-power">
-				<div class="subitem-flex-power-heading-right">
+			
+				<!-- Power and type -->
+				<div class="subitem-flex-power-heading-left">
 					
 					<div class="power-mover-plus-minus-enclosure">
 						<div class="power-mover-plus-minus-button">
@@ -3913,7 +4082,7 @@
 					</div>
 					
 					<input type="text" value="" name="attr_powerName08" maxlength="35" tabindex="470"/>
-					<div class="custom-select-alternate">
+					<div class="custom-select">
 						<select name="attr_powerType08">
 							<option value="single" selected>Single Power</option>
 							<option value="multipower">Multipower</option>
@@ -3925,57 +4094,81 @@
 						</select>
 					</div>
 					<input type="text" name="attr_powerEND08" value="0" readonly tabindex="-1"/>
-					<button type="action" class="button button-Power-END-right" tabindex="-1" name="act_buttonPowerEND08">END</button>
+					<button type="action" class="button button-Power-END-left" tabindex="-1" name="act_buttonPowerEND08">END</button>
 				</div>
-				<div class="subitem-flex-power-effect-right">
+				
+				<!-- Power effect -->
+				<div class="subitem-flex-power-effect-left">
+					<div class="custom-expand-button-container">
+						<div class="custom-expand-button-container-08">
+							<button type="action" class="buttonExpand" name="act_powerExpand08">
+								<div class=custom-button-triangle>
+								</div>
+							</button>
+						</div>
+					</div>
 					<input type="text" name="attr_powerEffect08" maxlength="25" tabindex="471"/>
 					<input type="text" name="attr_powerDice08" value="0d6" maxlength="16" tabindex="472"/>
 					<h1>Roll:</h1>
 					<input type="number" name="attr_powerSkillRoll08" value="18" min="0" max="30" tabindex="473"/>
 					<button type="action" class="button buttonRollPower" tabindex="-1" name="act_powerRoll08">Roll</button>
 				</div>
-				<div class="subitem-flex-power-active-cost-right">
-					<h1>Base CP:</h1>
-					<input type="number" name="attr_powerBaseCost08" min="0" value="0" tabindex="474"/>
-					<h1>Active CP:</h1>
-					<input type="text" name="attr_powerActiveCost08" value="0" readonly tabindex="-1"/>
-					<h1>Real CP:</h1>
-					<input type="text" name="attr_powerCP08" value="0" readonly tabindex="-1"/>
-				</div>
-				<div class="subitem-flex-power-limitations-right">
-					<h1>Adv:</h1>
-					<input type="number" name="attr_powerAdvantages08" min="0" value="0" step="0.25" tabindex="475"/>
-					<h1>Lim:</h1>
-					<input type="number" name="attr_powerLimitations08" min="0" value="0" step="0.25" tabindex="476"/>
-					<h1>END:</h1>
-					<div class="custom-select-alternate">
-						<select name="attr_powerReducedEND08">
-							<option value="noEND">None</option>
-							<option value="costsENDhalf">Costs END (half)</option>
-							<option value="costsENDfull">Costs END (full)</option>
-							<option value="zeroENDAF">Zero (AF)</option>
-							<option value="zeroEND">Zero</option>
-							<option value="reducedENDAF">Reduced (AF)</option>
-							<option value="reducedEND">Reduced</option>
-							<option value="standardEND" selected>Standard</option>
-							<option value="increasedENDx2">Increase x2</option>
-							<option value="increasedENDx3">Increase x3</option>
-							<option value="increasedENDx4">Increase x4</option>
-							<option value="increasedENDx5">Increase x5</option>
-							<option value="increasedENDx6">Increase x6</option>
-							<option value="increasedENDx7">Increase x7</option>
-							<option value="increasedENDx8">Increase x8</option>
-							<option value="increasedENDx9">Increase x9</option>
-							<option value="increasedENDx10">Increase x10</option>
-						</select>
+				
+				<!-- Points Block -->
+				<div class="subitem-flex-power-points-block-left">
+					<div class="subitem-visibility-power08">
+						<h1>Base Cost:</h1>
+						<input type="number" name="attr_powerBaseCost08" min="0" value="0" tabindex="474"/>
+					</div>
+					<div class="subitem-visibility-power08">
+						<h1>Active Cost:</h1>
+						<input type="text" name="attr_powerActiveCost08" value="0" readonly tabindex="-1"/>
+					</div>
+					<div class="subitem-opacity-power08">
+						<h1>CP:</h1>
+						<input type="text" name="attr_powerCP08" value="0" readonly tabindex="-1"/>
 					</div>
 				</div>
-				<textarea name="attr_powerText08" maxlength="512" tabindex="477"></textarea>
+				
+				<!-- Expanding Block -->
+				<div class="sheet-power-expand-08">
+					<div class="subitem-flex-power-limitations-left">
+						<h1>Adv:</h1>
+						<input type="number" name="attr_powerAdvantages08" min="0" value="0" step="0.25" tabindex="475"/>
+						<h1>Lim:</h1>
+						<input type="number" name="attr_powerLimitations08" min="0" value="0" step="0.25" tabindex="476"/>
+						<h1>END:</h1>
+						<div class="custom-select">
+							<select name="attr_powerReducedEND08">
+								<option value="noEND">None</option>
+								<option value="costsENDhalf">Costs END (half)</option>
+								<option value="costsENDfull">Costs END (full)</option>
+								<option value="zeroENDAF">Zero (AF)</option>
+								<option value="zeroEND">Zero</option>
+								<option value="reducedENDAF">Reduced (AF)</option>
+								<option value="reducedEND">Reduced</option>
+								<option value="standardEND" selected>Standard</option>
+								<option value="increasedENDx2">Increase x2</option>
+								<option value="increasedENDx3">Increase x3</option>
+								<option value="increasedENDx4">Increase x4</option>
+								<option value="increasedENDx5">Increase x5</option>
+								<option value="increasedENDx6">Increase x6</option>
+								<option value="increasedENDx7">Increase x7</option>
+								<option value="increasedENDx8">Increase x8</option>
+								<option value="increasedENDx9">Increase x9</option>
+								<option value="increasedENDx10">Increase x10</option>
+							</select>
+						</div>
+					</div>
+					<textarea name="attr_powerText08" maxlength="512" tabindex="477"></textarea>
+				</div>
 			</div>
 			
 			<!-- Power 09 -->
 			<div class="item-flex-power">
-				<div class="subitem-flex-power-heading-right">
+			
+				<!-- Power and type -->
+				<div class="subitem-flex-power-heading-left">
 					
 					<div class="power-mover-plus-minus-enclosure">
 						<div class="power-mover-plus-minus-button">
@@ -3989,7 +4182,7 @@
 					</div>
 					
 					<input type="text" value="" name="attr_powerName09" maxlength="35" tabindex="480"/>
-					<div class="custom-select-alternate">
+					<div class="custom-select">
 						<select name="attr_powerType09">
 							<option value="single" selected>Single Power</option>
 							<option value="multipower">Multipower</option>
@@ -4001,56 +4194,140 @@
 						</select>
 					</div>
 					<input type="text" name="attr_powerEND09" value="0" readonly tabindex="-1"/>
-					<button type="action" class="button button-Power-END-right" tabindex="-1" name="act_buttonPowerEND09">END</button>
+					<button type="action" class="button button-Power-END-left" tabindex="-1" name="act_buttonPowerEND09">END</button>
 				</div>
-				<div class="subitem-flex-power-effect-right">
+				
+				<!-- Power effect -->
+				<div class="subitem-flex-power-effect-left">
+					<div class="custom-expand-button-container">
+						<div class="custom-expand-button-container-09">
+							<button type="action" class="buttonExpand" name="act_powerExpand09">
+								<div class=custom-button-triangle>
+								</div>
+							</button>
+						</div>
+					</div>
 					<input type="text" name="attr_powerEffect09" maxlength="25" tabindex="481"/>
 					<input type="text" name="attr_powerDice09" value="0d6" maxlength="16" tabindex="482"/>
 					<h1>Roll:</h1>
 					<input type="number" name="attr_powerSkillRoll09" value="18" min="0" max="30" tabindex="483"/>
 					<button type="action" class="button buttonRollPower" tabindex="-1" name="act_powerRoll09">Roll</button>
 				</div>
-				<div class="subitem-flex-power-active-cost-right">
-					<h1>Base CP:</h1>
-					<input type="number" name="attr_powerBaseCost09" min="0" value="0" tabindex="484"/>
-					<h1>Active CP:</h1>
-					<input type="text" name="attr_powerActiveCost09" value="0" readonly tabindex="-1"/>
-					<h1>Real CP:</h1>
-					<input type="text" name="attr_powerCP09" value="0" readonly tabindex="-1"/>
+				
+				<!-- Points Block -->
+				<div class="subitem-flex-power-points-block-left">
+					<div class="subitem-visibility-power09">
+						<h1>Base Cost:</h1>
+						<input type="number" name="attr_powerBaseCost01" min="0" value="0" tabindex="484"/>
+					</div>
+					<div class="subitem-visibility-power09">
+						<h1>Active Cost:</h1>
+						<input type="text" name="attr_powerActiveCost09" value="0" readonly tabindex="-1"/>
+					</div>
+					<div class="subitem-opacity-power09">
+						<h1>CP:</h1>
+						<input type="text" name="attr_powerCP09" value="0" readonly tabindex="-1"/>
+					</div>
 				</div>
-				<div class="subitem-flex-power-limitations-right">
-					<h1>Adv:</h1>
-					<input type="number" name="attr_powerAdvantages09" min="0" value="0" step="0.25" tabindex="485"/>
-					<h1>Lim:</h1>
-					<input type="number" name="attr_powerLimitations09" min="0" value="0" step="0.25" tabindex="486"/>
-					<h1>END:</h1>
-					<div class="custom-select-alternate">
-						<select name="attr_powerReducedEND09">
-							<option value="noEND">None</option>
-							<option value="costsENDhalf">Costs END (half)</option>
-							<option value="costsENDfull">Costs END (full)</option>
-							<option value="zeroENDAF">Zero (AF)</option>
-							<option value="zeroEND">Zero</option>
-							<option value="reducedENDAF">Reduced (AF)</option>
-							<option value="reducedEND">Reduced</option>
-							<option value="standardEND" selected>Standard</option>
-							<option value="increasedENDx2">Increase x2</option>
-							<option value="increasedENDx3">Increase x3</option>
-							<option value="increasedENDx4">Increase x4</option>
-							<option value="increasedENDx5">Increase x5</option>
-							<option value="increasedENDx6">Increase x6</option>
-							<option value="increasedENDx7">Increase x7</option>
-							<option value="increasedENDx8">Increase x8</option>
-							<option value="increasedENDx9">Increase x9</option>
-							<option value="increasedENDx10">Increase x10</option>
-						</select>
+				
+				<!-- Expanding Block -->
+				<div class="sheet-power-expand-09">
+					<div class="subitem-flex-power-limitations-left">
+						<h1>Adv:</h1>
+						<input type="number" name="attr_powerAdvantages09" min="0" value="0" step="0.25" tabindex="485"/>
+						<h1>Lim:</h1>
+						<input type="number" name="attr_powerLimitations09" min="0" value="0" step="0.25" tabindex="486"/>
+						<h1>END:</h1>
+						<div class="custom-select">
+							<select name="attr_powerReducedEND09">
+								<option value="noEND">None</option>
+								<option value="costsENDhalf">Costs END (half)</option>
+								<option value="costsENDfull">Costs END (full)</option>
+								<option value="zeroENDAF">Zero (AF)</option>
+								<option value="zeroEND">Zero</option>
+								<option value="reducedENDAF">Reduced (AF)</option>
+								<option value="reducedEND">Reduced</option>
+								<option value="standardEND" selected>Standard</option>
+								<option value="increasedENDx2">Increase x2</option>
+								<option value="increasedENDx3">Increase x3</option>
+								<option value="increasedENDx4">Increase x4</option>
+								<option value="increasedENDx5">Increase x5</option>
+								<option value="increasedENDx6">Increase x6</option>
+								<option value="increasedENDx7">Increase x7</option>
+								<option value="increasedENDx8">Increase x8</option>
+								<option value="increasedENDx9">Increase x9</option>
+								<option value="increasedENDx10">Increase x10</option>
+							</select>
+						</div>
+					</div>
+					<textarea name="attr_powerText09" maxlength="512" tabindex="487"></textarea>
+				</div>
+			</div>
+		</div>
+		
+		<!-- Tab Power Health Status -->
+		
+		<div class="item-powers-health">
+			<div class="item-health-stat-enclosure">
+				<h2>BODY</h2>
+				<div class="item-health-stat">
+					<input type="text" name="attr_powerCurrentBODY" value="10" maxlength="3" pattern="[0-9]+" tabindex="-1"/>
+					<div class="item-health-stat-plus-minus-enclosure ">
+						<button type="action" class="button buttonPlus" tabindex="-1" name="act_powerCurrentBODYplus">
+							<span>&#10095;</span>
+						</button>
+						<button type="action" class="button buttonMinus" tabindex="-1" name="act_powerCurrentBODYminus">
+							<span>&#10094;</span>
+						</button>
 					</div>
 				</div>
-				<textarea name="attr_powerText09" maxlength="512" tabindex="487"></textarea>
 			</div>
 			
+			<div class="item-health-stat-enclosure">
+				<h2>STUN</h2>
+				<div class="item-health-stat">
+					<input type="text" name="attr_powerCurrentSTUN" value="20" maxlength="3" pattern="[0-9]+" tabindex="-1"/>
+					<div class="item-health-stat-plus-minus-enclosure ">
+						<button type="action" class="button buttonPlus" tabindex="-1" name="act_powerCurrentSTUNplus">
+							<span>&#10095;</span>
+						</button>
+						<button type="action" class="button buttonMinus" tabindex="-1" name="act_powerCurrentSTUNminus">
+							<span>&#10094;</span>
+						</button>
+					</div>
+				</div>
+			</div>
+			
+			<div class="item-health-stat-enclosure">
+				<h2>END</h2>
+				<div class="item-health-stat">
+					<input type="text" name="attr_powerCurrentEND" value="20" maxlength="3" pattern="[0-9]+" tabindex="-1"/>
+					<div class="item-health-stat-plus-minus-enclosure ">
+						<button type="action" class="button buttonPlus" tabindex="-1" name="act_powerCurrentENDplus">
+							<span>&#10095;</span>
+						</button>
+						<button type="action" class="button buttonMinus" tabindex="-1" name="act_powerCurrentENDminus">
+							<span>&#10094;</span>
+						</button>
+					</div>
+				</div>
+			</div>
+			
+			<div class="item-health-stat-enclosure">
+				<button type="action" class="button buttonRecover" tabindex="-1" name="act_powerRecoverHealth">Recover</button>
+				<button type="action" class="button buttonReset" tabindex="-1" name="act_powerResetHealth">Reset</button>
+			</div>
+		</div>
+		
+		<!-- Right side powers -->
+		<div class="flex-container-powers-right">
+			
+			<input type="hidden" class="sheet-right-power-toggle" name="attr_rightPowerToggle"  value="powerExpand10" />	
+
 			<!-- Power 10 -->
 			<div class="item-flex-power">
+			
+				<!-- Power and type -->
 				<div class="subitem-flex-power-heading-right">
 					
 					<div class="power-mover-plus-minus-enclosure">
@@ -4079,50 +4356,771 @@
 					<input type="text" name="attr_powerEND10" value="0" readonly tabindex="-1"/>
 					<button type="action" class="button button-Power-END-right" tabindex="-1" tabindex="-1" name="act_buttonPowerEND10">END</button>
 				</div>
+				
+				<!-- Power effect -->
 				<div class="subitem-flex-power-effect-right">
+					<div class="custom-expand-button-container">
+						<div class="custom-expand-button-container-10">
+							<button type="action" class="buttonExpand" name="act_powerExpand10">
+								<div class=custom-button-triangle>
+								</div>
+							</button>
+						</div>
+					</div>
 					<input type="text" name="attr_powerEffect10" maxlength="25" tabindex="491"/>
 					<input type="text" name="attr_powerDice10" value="0d6" maxlength="16" tabindex="492"/>
 					<h1>Roll:</h1>
 					<input type="number" name="attr_powerSkillRoll10" value="18" min="0" max="30" tabindex="493"/>
 					<button type="action" class="button buttonRollPower" tabindex="-1" name="act_powerRoll10">Roll</button>
 				</div>
-				<div class="subitem-flex-power-active-cost-right">
-					<h1>Base CP:</h1>
-					<input type="number" name="attr_powerBaseCost10" min="0" value="0" tabindex="494"/>
-					<h1>Active CP:</h1>
-					<input type="text" name="attr_powerActiveCost10" value="0" readonly tabindex="-1"/>
-					<h1>Real CP:</h1>
-					<input type="text" name="attr_powerCP10" value="0" readonly tabindex="-1"/>
-				</div>
-				<div class="subitem-flex-power-limitations-right">
-					<h1>Adv:</h1>
-					<input type="number" name="attr_powerAdvantages10" min="0" value="0" step="0.25" tabindex="495"/>
-					<h1>Lim:</h1>
-					<input type="number" name="attr_powerLimitations10" min="0" value="0" step="0.25" tabindex="496"/>
-					<h1>END:</h1>
-					<div class="custom-select-alternate">
-						<select name="attr_powerReducedEND10">
-							<option value="noEND">None</option>
-							<option value="costsENDhalf">Costs END (half)</option>
-							<option value="costsENDfull">Costs END (full)</option>
-							<option value="zeroENDAF">Zero (AF)</option>
-							<option value="zeroEND">Zero</option>
-							<option value="reducedENDAF">Reduced (AF)</option>
-							<option value="reducedEND">Reduced</option>
-							<option value="standardEND" selected>Standard</option>
-							<option value="increasedENDx2">Increase x2</option>
-							<option value="increasedENDx3">Increase x3</option>
-							<option value="increasedENDx4">Increase x4</option>
-							<option value="increasedENDx5">Increase x5</option>
-							<option value="increasedENDx6">Increase x6</option>
-							<option value="increasedENDx7">Increase x7</option>
-							<option value="increasedENDx8">Increase x8</option>
-							<option value="increasedENDx9">Increase x9</option>
-							<option value="increasedENDx10">Increase x10</option>
-						</select>
+				
+				<!-- Points Block -->
+				<div class="subitem-flex-power-points-block-right">
+					<div class="subitem-visibility-power10">
+						<h1>Base Cost:</h1>
+						<input type="number" name="attr_powerBaseCost10" min="0" value="0" tabindex="494"/>
+					</div>
+					<div class="subitem-visibility-power10">
+						<h1>Active Cost:</h1>
+						<input type="text" name="attr_powerActiveCost10" value="0" readonly tabindex="-1"/>
+					</div>
+					<div class="subitem-opacity-power10">
+						<h1>CP:</h1>
+						<input type="text" name="attr_powerCP10" value="0" readonly tabindex="-1"/>
 					</div>
 				</div>
-				<textarea name="attr_powerText10" maxlength="512" tabindex="497"></textarea>
+				
+				<!-- Expanding Block -->
+				<div class="sheet-power-expand-10">
+					<div class="subitem-flex-power-limitations-right">
+						<h1>Adv:</h1>
+						<input type="number" name="attr_powerAdvantages10" min="0" value="0" step="0.25" tabindex="495"/>
+						<h1>Lim:</h1>
+						<input type="number" name="attr_powerLimitations10" min="0" value="0" step="0.25" tabindex="496"/>
+						<h1>END:</h1>
+						<div class="custom-select-alternate">
+							<select name="attr_powerReducedEND10">
+								<option value="noEND">None</option>
+								<option value="costsENDhalf">Costs END (half)</option>
+								<option value="costsENDfull">Costs END (full)</option>
+								<option value="zeroENDAF">Zero (AF)</option>
+								<option value="zeroEND">Zero</option>
+								<option value="reducedENDAF">Reduced (AF)</option>
+								<option value="reducedEND">Reduced</option>
+								<option value="standardEND" selected>Standard</option>
+								<option value="increasedENDx2">Increase x2</option>
+								<option value="increasedENDx3">Increase x3</option>
+								<option value="increasedENDx4">Increase x4</option>
+								<option value="increasedENDx5">Increase x5</option>
+								<option value="increasedENDx6">Increase x6</option>
+								<option value="increasedENDx7">Increase x7</option>
+								<option value="increasedENDx8">Increase x8</option>
+								<option value="increasedENDx9">Increase x9</option>
+								<option value="increasedENDx10">Increase x10</option>
+							</select>
+						</div>
+					</div>
+					<textarea name="attr_powerText10" maxlength="512" tabindex="497"></textarea>
+				</div>
+			</div>
+			
+			
+			<!-- Power 11 -->
+			<div class="item-flex-power">
+			
+				<!-- Power and type -->
+				<div class="subitem-flex-power-heading-right">
+					
+					<div class="power-mover-plus-minus-enclosure">
+						<div class="power-mover-plus-minus-button">
+							<button type="action" class="button buttonPlus" tabindex="-1" name="act_powerUp11">
+								<span>&#10095;</span>
+							</button>
+							<button type="action" class="button buttonMinus" tabindex="-1" name="act_powerDown11">
+								<span>&#10094;</span>
+							</button>
+						</div>
+					</div>
+					
+					<input type="text" value="" name="attr_powerName11" maxlength="35" tabindex="500"/>
+					<div class="custom-select-alternate">
+						<select name="attr_powerType11">
+							<option value="single" selected>Single Power</option>
+							<option value="multipower">Multipower</option>
+							<option value="variableSlot">Variable Slot</option>
+							<option value="fixedSlot">Fixed Slot</option>
+							<option value="powerPool">Power Pool</option>
+							<option value="compound">Compound</option>
+							<option value="unified">Unified</option>
+						</select>
+					</div>
+					<input type="text" name="attr_powerEND11" value="0" readonly tabindex="-1"/>
+					<button type="action" class="button button-Power-END-right" tabindex="-1" tabindex="-1" name="act_buttonPowerEND11">END</button>
+				</div>
+				
+				<!-- Power effect -->
+				<div class="subitem-flex-power-effect-right">
+					<div class="custom-expand-button-container">
+						<div class="custom-expand-button-container-11">
+							<button type="action" class="buttonExpand" name="act_powerExpand11">
+								<div class=custom-button-triangle>
+								</div>
+							</button>
+						</div>
+					</div>
+					<input type="text" name="attr_powerEffect11" maxlength="25" tabindex="501"/>
+					<input type="text" name="attr_powerDice11" value="0d6" maxlength="16" tabindex="502"/>
+					<h1>Roll:</h1>
+					<input type="number" name="attr_powerSkillRoll11" value="18" min="0" max="30" tabindex="503"/>
+					<button type="action" class="button buttonRollPower" tabindex="-1" name="act_powerRoll11">Roll</button>
+				</div>
+				
+				<!-- Points Block -->
+				<div class="subitem-flex-power-points-block-right">
+					<div class="subitem-visibility-power11">
+						<h1>Base Cost:</h1>
+						<input type="number" name="attr_powerBaseCost11" min="0" value="0" tabindex="504"/>
+					</div>
+					<div class="subitem-visibility-power11">
+						<h1>Active Cost:</h1>
+						<input type="text" name="attr_powerActiveCost11" value="0" readonly tabindex="-1"/>
+					</div>
+					<div class="subitem-opacity-power11">
+						<h1>CP:</h1>
+						<input type="text" name="attr_powerCP11" value="0" readonly tabindex="-1"/>
+					</div>
+				</div>
+				
+				<!-- Expanding Block -->
+				<div class="sheet-power-expand-11">
+					<div class="subitem-flex-power-limitations-right">
+						<h1>Adv:</h1>
+						<input type="number" name="attr_powerAdvantages11" min="0" value="0" step="0.25" tabindex="505"/>
+						<h1>Lim:</h1>
+						<input type="number" name="attr_powerLimitations11" min="0" value="0" step="0.25" tabindex="506"/>
+						<h1>END:</h1>
+						<div class="custom-select-alternate">
+							<select name="attr_powerReducedEND11">
+								<option value="noEND">None</option>
+								<option value="costsENDhalf">Costs END (half)</option>
+								<option value="costsENDfull">Costs END (full)</option>
+								<option value="zeroENDAF">Zero (AF)</option>
+								<option value="zeroEND">Zero</option>
+								<option value="reducedENDAF">Reduced (AF)</option>
+								<option value="reducedEND">Reduced</option>
+								<option value="standardEND" selected>Standard</option>
+								<option value="increasedENDx2">Increase x2</option>
+								<option value="increasedENDx3">Increase x3</option>
+								<option value="increasedENDx4">Increase x4</option>
+								<option value="increasedENDx5">Increase x5</option>
+								<option value="increasedENDx6">Increase x6</option>
+								<option value="increasedENDx7">Increase x7</option>
+								<option value="increasedENDx8">Increase x8</option>
+								<option value="increasedENDx9">Increase x9</option>
+								<option value="increasedENDx10">Increase x10</option>
+							</select>
+						</div>
+					</div>
+					<textarea name="attr_powerText11" maxlength="512" tabindex="450"></textarea>
+				</div>
+			</div>
+			
+			<!-- Power 12 -->
+			<div class="item-flex-power">
+			
+				<!-- Power and type -->
+				<div class="subitem-flex-power-heading-right">
+					
+					<div class="power-mover-plus-minus-enclosure">
+						<div class="power-mover-plus-minus-button">
+							<button type="action" class="button buttonPlus" tabindex="-1" name="act_powerUp12">
+								<span>&#10095;</span>
+							</button>
+							<button type="action" class="button buttonMinus" tabindex="-1" name="act_powerDown12">
+								<span>&#10094;</span>
+							</button>
+						</div>
+					</div>
+					
+					<input type="text" value="" name="attr_powerName12" maxlength="35" tabindex="510"/>
+					<div class="custom-select-alternate">
+						<select name="attr_powerType12">
+							<option value="single" selected>Single Power</option>
+							<option value="multipower">Multipower</option>
+							<option value="variableSlot">Variable Slot</option>
+							<option value="fixedSlot">Fixed Slot</option>
+							<option value="powerPool">Power Pool</option>
+							<option value="compound">Compound</option>
+							<option value="unified">Unified</option>
+						</select>
+					</div>
+					<input type="text" name="attr_powerEND12" value="0" readonly tabindex="-1"/>
+					<button type="action" class="button button-Power-END-right" tabindex="-1" tabindex="-1" name="act_buttonPowerEND12">END</button>
+				</div>
+				
+				<!-- Power effect -->
+				<div class="subitem-flex-power-effect-right">
+					<div class="custom-expand-button-container">
+						<div class="custom-expand-button-container-12">
+							<button type="action" class="buttonExpand" name="act_powerExpand12">
+								<div class=custom-button-triangle>
+								</div>
+							</button>
+						</div>
+					</div>
+					<input type="text" name="attr_powerEffect12" maxlength="25" tabindex="451"/>
+					<input type="text" name="attr_powerDice12" value="0d6" maxlength="16" tabindex="512"/>
+					<h1>Roll:</h1>
+					<input type="number" name="attr_powerSkillRoll12" value="18" min="0" max="30" tabindex="513"/>
+					<button type="action" class="button buttonRollPower" tabindex="-1" name="act_powerRoll12">Roll</button>
+				</div>
+				
+				<!-- Points Block -->
+				<div class="subitem-flex-power-points-block-right">
+					<div class="subitem-visibility-power12">
+						<h1>Base Cost:</h1>
+						<input type="number" name="attr_powerBaseCost12" min="0" value="0" tabindex="514"/>
+					</div>
+					<div class="subitem-visibility-power12">
+						<h1>Active Cost:</h1>
+						<input type="text" name="attr_powerActiveCost12" value="0" readonly tabindex="-1"/>
+					</div>
+					<div class="subitem-opacity-power12">
+						<h1>CP:</h1>
+						<input type="text" name="attr_powerCP12" value="0" readonly tabindex="-1"/>
+					</div>
+				</div>
+				
+				<!-- Expanding Block -->
+				<div class="sheet-power-expand-12">
+					<div class="subitem-flex-power-limitations-right">
+						<h1>Adv:</h1>
+						<input type="number" name="attr_powerAdvantages12" min="0" value="0" step="0.25" tabindex="515"/>
+						<h1>Lim:</h1>
+						<input type="number" name="attr_powerLimitations12" min="0" value="0" step="0.25" tabindex="516"/>
+						<h1>END:</h1>
+						<div class="custom-select-alternate">
+							<select name="attr_powerReducedEND12">
+								<option value="noEND">None</option>
+								<option value="costsENDhalf">Costs END (half)</option>
+								<option value="costsENDfull">Costs END (full)</option>
+								<option value="zeroENDAF">Zero (AF)</option>
+								<option value="zeroEND">Zero</option>
+								<option value="reducedENDAF">Reduced (AF)</option>
+								<option value="reducedEND">Reduced</option>
+								<option value="standardEND" selected>Standard</option>
+								<option value="increasedENDx2">Increase x2</option>
+								<option value="increasedENDx3">Increase x3</option>
+								<option value="increasedENDx4">Increase x4</option>
+								<option value="increasedENDx5">Increase x5</option>
+								<option value="increasedENDx6">Increase x6</option>
+								<option value="increasedENDx7">Increase x7</option>
+								<option value="increasedENDx8">Increase x8</option>
+								<option value="increasedENDx9">Increase x9</option>
+								<option value="increasedENDx10">Increase x10</option>
+							</select>
+						</div>
+					</div>
+					<textarea name="attr_powerText12" maxlength="512" tabindex="517"></textarea>
+				</div>
+			</div>
+			
+			<!-- Power 13 -->
+			<div class="item-flex-power">
+			
+				<!-- Power and type -->
+				<div class="subitem-flex-power-heading-right">
+					
+					<div class="power-mover-plus-minus-enclosure">
+						<div class="power-mover-plus-minus-button">
+							<button type="action" class="button buttonPlus" tabindex="-1" name="act_powerUp13">
+								<span>&#10095;</span>
+							</button>
+							<button type="action" class="button buttonMinus" tabindex="-1" name="act_powerDown13">
+								<span>&#10094;</span>
+							</button>
+						</div>
+					</div>
+					
+					<input type="text" value="" name="attr_powerName13" maxlength="35" tabindex="520"/>
+					<div class="custom-select-alternate">
+						<select name="attr_powerType13">
+							<option value="single" selected>Single Power</option>
+							<option value="multipower">Multipower</option>
+							<option value="variableSlot">Variable Slot</option>
+							<option value="fixedSlot">Fixed Slot</option>
+							<option value="powerPool">Power Pool</option>
+							<option value="compound">Compound</option>
+							<option value="unified">Unified</option>
+						</select>
+					</div>
+					<input type="text" name="attr_powerEND13" value="0" readonly tabindex="-1"/>
+					<button type="action" class="button button-Power-END-right" tabindex="-1" tabindex="-1" name="act_buttonPowerEND13">END</button>
+				</div>
+				
+				<!-- Power effect -->
+				<div class="subitem-flex-power-effect-right">
+					<div class="custom-expand-button-container">
+						<div class="custom-expand-button-container-13">
+							<button type="action" class="buttonExpand" name="act_powerExpand13">
+								<div class=custom-button-triangle>
+								</div>
+							</button>
+						</div>
+					</div>
+					<input type="text" name="attr_powerEffect13" maxlength="25" tabindex="521"/>
+					<input type="text" name="attr_powerDice13" value="0d6" maxlength="16" tabindex="522"/>
+					<h1>Roll:</h1>
+					<input type="number" name="attr_powerSkillRoll13" value="18" min="0" max="30" tabindex="523"/>
+					<button type="action" class="button buttonRollPower" tabindex="-1" name="act_powerRoll13">Roll</button>
+				</div>
+				
+				<!-- Points Block -->
+				<div class="subitem-flex-power-points-block-right">
+					<div class="subitem-visibility-power13">
+						<h1>Base Cost:</h1>
+						<input type="number" name="attr_powerBaseCost13" min="0" value="0" tabindex="524"/>
+					</div>
+					<div class="subitem-visibility-power13">
+						<h1>Active Cost:</h1>
+						<input type="text" name="attr_powerActiveCost13" value="0" readonly tabindex="-1"/>
+					</div>
+					<div class="subitem-opacity-power13">
+						<h1>CP:</h1>
+						<input type="text" name="attr_powerCP13" value="0" readonly tabindex="-1"/>
+					</div>
+				</div>
+				
+				<!-- Expanding Block -->
+				<div class="sheet-power-expand-13">
+					<div class="subitem-flex-power-limitations-right">
+						<h1>Adv:</h1>
+						<input type="number" name="attr_powerAdvantages13" min="0" value="0" step="0.25" tabindex="525"/>
+						<h1>Lim:</h1>
+						<input type="number" name="attr_powerLimitations13" min="0" value="0" step="0.25" tabindex="526"/>
+						<h1>END:</h1>
+						<div class="custom-select-alternate">
+							<select name="attr_powerReducedEND13">
+								<option value="noEND">None</option>
+								<option value="costsENDhalf">Costs END (half)</option>
+								<option value="costsENDfull">Costs END (full)</option>
+								<option value="zeroENDAF">Zero (AF)</option>
+								<option value="zeroEND">Zero</option>
+								<option value="reducedENDAF">Reduced (AF)</option>
+								<option value="reducedEND">Reduced</option>
+								<option value="standardEND" selected>Standard</option>
+								<option value="increasedENDx2">Increase x2</option>
+								<option value="increasedENDx3">Increase x3</option>
+								<option value="increasedENDx4">Increase x4</option>
+								<option value="increasedENDx5">Increase x5</option>
+								<option value="increasedENDx6">Increase x6</option>
+								<option value="increasedENDx7">Increase x7</option>
+								<option value="increasedENDx8">Increase x8</option>
+								<option value="increasedENDx9">Increase x9</option>
+								<option value="increasedENDx10">Increase x10</option>
+							</select>
+						</div>
+					</div>
+					<textarea name="attr_powerText13" maxlength="512" tabindex="527"></textarea>
+				</div>
+			</div>
+			
+			<!-- Power 14 -->
+			<div class="item-flex-power">
+			
+				<!-- Power and type -->
+				<div class="subitem-flex-power-heading-right">
+					
+					<div class="power-mover-plus-minus-enclosure">
+						<div class="power-mover-plus-minus-button">
+							<button type="action" class="button buttonPlus" tabindex="-1" name="act_powerUp14">
+								<span>&#10095;</span>
+							</button>
+							<button type="action" class="button buttonMinus" tabindex="-1" name="act_powerDown14">
+								<span>&#10094;</span>
+							</button>
+						</div>
+					</div>
+					
+					<input type="text" value="" name="attr_powerName14" maxlength="35" tabindex="530"/>
+					<div class="custom-select-alternate">
+						<select name="attr_powerType14">
+							<option value="single" selected>Single Power</option>
+							<option value="multipower">Multipower</option>
+							<option value="variableSlot">Variable Slot</option>
+							<option value="fixedSlot">Fixed Slot</option>
+							<option value="powerPool">Power Pool</option>
+							<option value="compound">Compound</option>
+							<option value="unified">Unified</option>
+						</select>
+					</div>
+					<input type="text" name="attr_powerEND14" value="0" readonly tabindex="-1"/>
+					<button type="action" class="button button-Power-END-right" tabindex="-1" tabindex="-1" name="act_buttonPowerEND14">END</button>
+				</div>
+				
+				<!-- Power effect -->
+				<div class="subitem-flex-power-effect-right">
+					<div class="custom-expand-button-container">
+						<div class="custom-expand-button-container-14">
+							<button type="action" class="buttonExpand" name="act_powerExpand14">
+								<div class=custom-button-triangle>
+								</div>
+							</button>
+						</div>
+					</div>
+					<input type="text" name="attr_powerEffect14" maxlength="25" tabindex="531"/>
+					<input type="text" name="attr_powerDice14" value="0d6" maxlength="16" tabindex="532"/>
+					<h1>Roll:</h1>
+					<input type="number" name="attr_powerSkillRoll14" value="18" min="0" max="30" tabindex="533"/>
+					<button type="action" class="button buttonRollPower" tabindex="-1" name="act_powerRoll14">Roll</button>
+				</div>
+				
+				<!-- Points Block -->
+				<div class="subitem-flex-power-points-block-right">
+					<div class="subitem-visibility-power14">
+						<h1>Base Cost:</h1>
+						<input type="number" name="attr_powerBaseCost14" min="0" value="0" tabindex="534"/>
+					</div>
+					<div class="subitem-visibility-power14">
+						<h1>Active Cost:</h1>
+						<input type="text" name="attr_powerActiveCost14" value="0" readonly tabindex="-1"/>
+					</div>
+					<div class="subitem-opacity-power14">
+						<h1>CP:</h1>
+						<input type="text" name="attr_powerCP14" value="0" readonly tabindex="-1"/>
+					</div>
+				</div>
+				
+				<!-- Expanding Block -->
+				<div class="sheet-power-expand-14">
+					<div class="subitem-flex-power-limitations-right">
+						<h1>Adv:</h1>
+						<input type="number" name="attr_powerAdvantages14" min="0" value="0" step="0.25" tabindex="535"/>
+						<h1>Lim:</h1>
+						<input type="number" name="attr_powerLimitations14" min="0" value="0" step="0.25" tabindex="536"/>
+						<h1>END:</h1>
+						<div class="custom-select-alternate">
+							<select name="attr_powerReducedEND14">
+								<option value="noEND">None</option>
+								<option value="costsENDhalf">Costs END (half)</option>
+								<option value="costsENDfull">Costs END (full)</option>
+								<option value="zeroENDAF">Zero (AF)</option>
+								<option value="zeroEND">Zero</option>
+								<option value="reducedENDAF">Reduced (AF)</option>
+								<option value="reducedEND">Reduced</option>
+								<option value="standardEND" selected>Standard</option>
+								<option value="increasedENDx2">Increase x2</option>
+								<option value="increasedENDx3">Increase x3</option>
+								<option value="increasedENDx4">Increase x4</option>
+								<option value="increasedENDx5">Increase x5</option>
+								<option value="increasedENDx6">Increase x6</option>
+								<option value="increasedENDx7">Increase x7</option>
+								<option value="increasedENDx8">Increase x8</option>
+								<option value="increasedENDx9">Increase x9</option>
+								<option value="increasedENDx10">Increase x10</option>
+							</select>
+						</div>
+					</div>
+					<textarea name="attr_powerText14" maxlength="512" tabindex="537"></textarea>
+				</div>
+			</div>
+			
+			<!-- Power 15 -->
+			<div class="item-flex-power">
+				
+				<!-- Power and type -->
+				<div class="subitem-flex-power-heading-right">
+					
+					<div class="power-mover-plus-minus-enclosure">
+						<div class="power-mover-plus-minus-button">
+							<button type="action" class="button buttonPlus" tabindex="-1" name="act_powerUp15">
+								<span>&#10095;</span>
+							</button>
+							<button type="action" class="button buttonMinus" tabindex="-1" name="act_powerDown15">
+								<span>&#10094;</span>
+							</button>
+						</div>
+					</div>
+					
+					<input type="text" value="" name="attr_powerName15" maxlength="35" tabindex="540"/>
+					<div class="custom-select-alternate">
+						<select name="attr_powerType15">
+							<option value="single" selected>Single Power</option>
+							<option value="multipower">Multipower</option>
+							<option value="variableSlot">Variable Slot</option>
+							<option value="fixedSlot">Fixed Slot</option>
+							<option value="powerPool">Power Pool</option>
+							<option value="compound">Compound</option>
+							<option value="unified">Unified</option>
+						</select>
+					</div>
+					<input type="text" name="attr_powerEND15" value="0" readonly tabindex="-1"/>
+					<button type="action" class="button button-Power-END-right" tabindex="-1" tabindex="-1" name="act_buttonPowerEND15">END</button>
+				</div>
+				
+				<!-- Power effect -->
+				<div class="subitem-flex-power-effect-right">
+					<div class="custom-expand-button-container">
+						<div class="custom-expand-button-container-15">
+							<button type="action" class="buttonExpand" name="act_powerExpand15">
+								<div class=custom-button-triangle>
+								</div>
+							</button>
+						</div>
+					</div>
+					<input type="text" name="attr_powerEffect15" maxlength="25" tabindex="541"/>
+					<input type="text" name="attr_powerDice15" value="0d6" maxlength="16" tabindex="542"/>
+					<h1>Roll:</h1>
+					<input type="number" name="attr_powerSkillRoll15" value="18" min="0" max="30" tabindex="543"/>
+					<button type="action" class="button buttonRollPower" tabindex="-1" name="act_powerRoll15">Roll</button>
+				</div>
+				
+				<!-- Points Block -->
+				<div class="subitem-flex-power-points-block-right">
+					<div class="subitem-visibility-power15">
+						<h1>Base Cost:</h1>
+						<input type="number" name="attr_powerBaseCost15" min="0" value="0" tabindex="544"/>
+					</div>
+					<div class="subitem-visibility-power15">
+						<h1>Active Cost:</h1>
+						<input type="text" name="attr_powerActiveCost15" value="0" readonly tabindex="-1"/>
+					</div>
+					<div class="subitem-opacity-power15">
+						<h1>CP:</h1>
+						<input type="text" name="attr_powerCP15" value="0" readonly tabindex="-1"/>
+					</div>
+				</div>
+				
+				<!-- Expanding Block -->
+				<div class="sheet-power-expand-15">
+					<div class="subitem-flex-power-limitations-right">
+						<h1>Adv:</h1>
+						<input type="number" name="attr_powerAdvantages15" min="0" value="0" step="0.25" tabindex="545"/>
+						<h1>Lim:</h1>
+						<input type="number" name="attr_powerLimitations15" min="0" value="0" step="0.25" tabindex="546"/>
+						<h1>END:</h1>
+						<div class="custom-select-alternate">
+							<select name="attr_powerReducedEND15">
+								<option value="noEND">None</option>
+								<option value="costsENDhalf">Costs END (half)</option>
+								<option value="costsENDfull">Costs END (full)</option>
+								<option value="zeroENDAF">Zero (AF)</option>
+								<option value="zeroEND">Zero</option>
+								<option value="reducedENDAF">Reduced (AF)</option>
+								<option value="reducedEND">Reduced</option>
+								<option value="standardEND" selected>Standard</option>
+								<option value="increasedENDx2">Increase x2</option>
+								<option value="increasedENDx3">Increase x3</option>
+								<option value="increasedENDx4">Increase x4</option>
+								<option value="increasedENDx5">Increase x5</option>
+								<option value="increasedENDx6">Increase x6</option>
+								<option value="increasedENDx7">Increase x7</option>
+								<option value="increasedENDx8">Increase x8</option>
+								<option value="increasedENDx9">Increase x9</option>
+								<option value="increasedENDx10">Increase x10</option>
+							</select>
+						</div>
+					</div>
+					<textarea name="attr_powerText15" maxlength="512" tabindex="547"></textarea>
+				</div>
+			</div>
+			
+			<!-- Power 16 -->
+			<div class="item-flex-power">
+				
+				<!-- Power and type -->
+				<div class="subitem-flex-power-heading-right">
+					<div class="power-mover-plus-minus-enclosure">
+						<div class="power-mover-plus-minus-button">
+							<button type="action" class="button buttonPlus" tabindex="-1" name="act_powerUp16">
+								<span>&#10095;</span>
+							</button>
+							<button type="action" class="button buttonMinus" tabindex="-1" name="act_powerDown16">
+								<span>&#10094;</span>
+							</button>
+						</div>
+					</div>
+					
+					<input type="text" value="" name="attr_powerName16" maxlength="35" tabindex="550"/>
+					<div class="custom-select-alternate">
+						<select name="attr_powerType16">
+							<option value="single" selected>Single Power</option>
+							<option value="multipower">Multipower</option>
+							<option value="variableSlot">Variable Slot</option>
+							<option value="fixedSlot">Fixed Slot</option>
+							<option value="powerPool">Power Pool</option>
+							<option value="compound">Compound</option>
+							<option value="unified">Unified</option>
+						</select>
+					</div>
+					<input type="text" name="attr_powerEND16" value="0" readonly tabindex="-1"/>
+					<button type="action" class="button button-Power-END-right" tabindex="-1" tabindex="-1" name="act_buttonPowerEND16">END</button>
+				</div>
+				
+				<!-- Power effect -->
+				<div class="subitem-flex-power-effect-right">
+					<div class="custom-expand-button-container">
+						<div class="custom-expand-button-container-16">
+							<button type="action" class="buttonExpand" name="act_powerExpand16">
+								<div class=custom-button-triangle>
+								</div>
+							</button>
+						</div>
+					</div>
+					<input type="text" name="attr_powerEffect16" maxlength="25" tabindex="551"/>
+					<input type="text" name="attr_powerDice16" value="0d6" maxlength="16" tabindex="552"/>
+					<h1>Roll:</h1>
+					<input type="number" name="attr_powerSkillRoll16" value="18" min="0" max="30" tabindex="553"/>
+					<button type="action" class="button buttonRollPower" tabindex="-1" name="act_powerRoll16">Roll</button>
+				</div>
+				
+				<!-- Points Block -->
+				<div class="subitem-flex-power-points-block-right">
+					<div class="subitem-visibility-power16">
+						<h1>Base Cost:</h1>
+						<input type="number" name="attr_powerBaseCost16" min="0" value="0" tabindex="554"/>
+					</div>
+					<div class="subitem-visibility-power16">
+						<h1>Active Cost:</h1>
+						<input type="text" name="attr_powerActiveCost16" value="0" readonly tabindex="-1"/>
+					</div>
+					<div class="subitem-opacity-power16">
+						<h1>CP:</h1>
+						<input type="text" name="attr_powerCP16" value="0" readonly tabindex="-1"/>
+					</div>
+				</div>
+				
+				<!-- Expanding Block -->
+				<div class="sheet-power-expand-16">
+					<div class="subitem-flex-power-limitations-right">
+						<h1>Adv:</h1>
+						<input type="number" name="attr_powerAdvantages16" min="0" value="0" step="0.25" tabindex="555"/>
+						<h1>Lim:</h1>
+						<input type="number" name="attr_powerLimitations16" min="0" value="0" step="0.25" tabindex="556"/>
+						<h1>END:</h1>
+						<div class="custom-select-alternate">
+							<select name="attr_powerReducedEND16">
+								<option value="noEND">None</option>
+								<option value="costsENDhalf">Costs END (half)</option>
+								<option value="costsENDfull">Costs END (full)</option>
+								<option value="zeroENDAF">Zero (AF)</option>
+								<option value="zeroEND">Zero</option>
+								<option value="reducedENDAF">Reduced (AF)</option>
+								<option value="reducedEND">Reduced</option>
+								<option value="standardEND" selected>Standard</option>
+								<option value="increasedENDx2">Increase x2</option>
+								<option value="increasedENDx3">Increase x3</option>
+								<option value="increasedENDx4">Increase x4</option>
+								<option value="increasedENDx5">Increase x5</option>
+								<option value="increasedENDx6">Increase x6</option>
+								<option value="increasedENDx7">Increase x7</option>
+								<option value="increasedENDx8">Increase x8</option>
+								<option value="increasedENDx9">Increase x9</option>
+								<option value="increasedENDx10">Increase x10</option>
+							</select>
+						</div>
+					</div>
+					<textarea name="attr_powerText16" maxlength="512" tabindex="557"></textarea>
+				</div>
+			</div>
+			
+			<!-- Power 17 -->
+			<div class="item-flex-power">
+				
+				<!-- Power and type -->
+				<div class="subitem-flex-power-heading-right">	
+					<div class="power-mover-plus-minus-enclosure">
+						<div class="power-mover-plus-minus-button">
+							<button type="action" class="button buttonPlus" tabindex="-1" name="act_powerUp17">
+								<span>&#10095;</span>
+							</button>
+							<button type="action" class="button buttonMinus" tabindex="-1" name="act_powerDown17">
+								<span>&#10094;</span>
+							</button>
+						</div>
+					</div>
+					
+					<input type="text" value="" name="attr_powerName17" maxlength="35" tabindex="560"/>
+					<div class="custom-select-alternate">
+						<select name="attr_powerType17">
+							<option value="single" selected>Single Power</option>
+							<option value="multipower">Multipower</option>
+							<option value="variableSlot">Variable Slot</option>
+							<option value="fixedSlot">Fixed Slot</option>
+							<option value="powerPool">Power Pool</option>
+							<option value="compound">Compound</option>
+							<option value="unified">Unified</option>
+						</select>
+					</div>
+					<input type="text" name="attr_powerEND17" value="0" readonly tabindex="-1"/>
+					<button type="action" class="button button-Power-END-right" tabindex="-1" tabindex="-1" name="act_buttonPowerEND17">END</button>
+				</div>
+				
+				<!-- Power effect -->
+				<div class="subitem-flex-power-effect-right">
+					<div class="custom-expand-button-container">
+						<div class="custom-expand-button-container-17">
+							<button type="action" class="buttonExpand" name="act_powerExpand17">
+								<div class=custom-button-triangle>
+								</div>
+							</button>
+						</div>
+					</div>
+					<input type="text" name="attr_powerEffect17" maxlength="25" tabindex="561"/>
+					<input type="text" name="attr_powerDice17" value="0d6" maxlength="16" tabindex="562"/>
+					<h1>Roll:</h1>
+					<input type="number" name="attr_powerSkillRoll17" value="18" min="0" max="30" tabindex="563"/>
+					<button type="action" class="button buttonRollPower" tabindex="-1" name="act_powerRoll17">Roll</button>
+				</div>
+				
+				<!-- Points Block -->
+				<div class="subitem-flex-power-points-block-right">
+					<div class="subitem-visibility-power17">
+						<h1>Base Cost:</h1>
+						<input type="number" name="attr_powerBaseCost17" min="0" value="0" tabindex="544"/>
+					</div>
+					<div class="subitem-visibility-power17">
+						<h1>Active Cost:</h1>
+						<input type="text" name="attr_powerActiveCost17" value="0" readonly tabindex="-1"/>
+					</div>
+					<div class="subitem-opacity-power17">
+						<h1>CP:</h1>
+						<input type="text" name="attr_powerCP17" value="0" readonly tabindex="-1"/>
+					</div>
+				</div>
+				
+				<!-- Expanding Block -->
+				<div class="sheet-power-expand-17">
+					<div class="subitem-flex-power-limitations-right">
+						<h1>Adv:</h1>
+						<input type="number" name="attr_powerAdvantages17" min="0" value="0" step="0.25" tabindex="565"/>
+						<h1>Lim:</h1>
+						<input type="number" name="attr_powerLimitations17" min="0" value="0" step="0.25" tabindex="566"/>
+						<h1>END:</h1>
+						<div class="custom-select-alternate">
+							<select name="attr_powerReducedEND17">
+								<option value="noEND">None</option>
+								<option value="costsENDhalf">Costs END (half)</option>
+								<option value="costsENDfull">Costs END (full)</option>
+								<option value="zeroENDAF">Zero (AF)</option>
+								<option value="zeroEND">Zero</option>
+								<option value="reducedENDAF">Reduced (AF)</option>
+								<option value="reducedEND">Reduced</option>
+								<option value="standardEND" selected>Standard</option>
+								<option value="increasedENDx2">Increase x2</option>
+								<option value="increasedENDx3">Increase x3</option>
+								<option value="increasedENDx4">Increase x4</option>
+								<option value="increasedENDx5">Increase x5</option>
+								<option value="increasedENDx6">Increase x6</option>
+								<option value="increasedENDx7">Increase x7</option>
+								<option value="increasedENDx8">Increase x8</option>
+								<option value="increasedENDx9">Increase x9</option>
+								<option value="increasedENDx10">Increase x10</option>
+							</select>
+						</div>
+					</div>
+					<textarea name="attr_powerText17" maxlength="512" tabindex="567"></textarea>
+				</div>
 			</div>
 		</div>
 	</div>
@@ -4151,13 +5149,13 @@
 					</div>
 				</div>
 				
-				<input type="text" name="attr_talentName01" value="" maxlength="32" tabindex="500"/>
+				<input type="text" name="attr_talentName01" value="" maxlength="32" tabindex="600"/>
 				<button type="roll" class="button buttonRollShow" tabindex="-1" name="roll_showTalentRoll01" value="&{template:custom-show} {{title=@{character_name} - @{character_title}}} {{subtitle= Perks & Talents - @{talentName01}}} {{desc=@{talentText01}}}">Show</button>
 				<h1>CP:</h1>
-				<input type="number" name="attr_talentCP01" value="0" min="0" tabindex="501"/>
+				<input type="number" name="attr_talentCP01" value="0" min="0" tabindex="601"/>
 			</div>
 			<div class="item-talent-textbox">
-				<textarea name="attr_talentText01" maxlength="240" tabindex="502"></textarea>
+				<textarea name="attr_talentText01" maxlength="240" tabindex="602"></textarea>
 			</div>
 			
 			<!-- Talent 02 -->
@@ -4173,13 +5171,13 @@
 					</div>
 				</div>
 				
-				<input type="text" name="attr_talentName02" value="" maxlength="32" tabindex="503"/>
+				<input type="text" name="attr_talentName02" value="" maxlength="32" tabindex="603"/>
 				<button type="roll" class="button buttonRollShow" tabindex="-1" name="roll_showTalentRoll02" value="&{template:custom-show} {{title=@{character_name} - @{character_title}}} {{subtitle= Perks & Talents - @{talentName02}}} {{desc=@{talentText02}}}">Show</button>
 				<h1>CP:</h1>
-				<input type="number" name="attr_talentCP02" value="0" min="0" tabindex="504"/>
+				<input type="number" name="attr_talentCP02" value="0" min="0" tabindex="604"/>
 			</div>
 			<div class="item-talent-textbox">
-				<textarea name="attr_talentText02" maxlength="240" tabindex="505"></textarea>
+				<textarea name="attr_talentText02" maxlength="240" tabindex="605"></textarea>
 			</div>
 			
 			<!-- Talent 03 -->
@@ -4195,13 +5193,13 @@
 					</div>
 				</div>
 				
-				<input type="text" name="attr_talentName03" value="" maxlength="32"tabindex="506"/>
+				<input type="text" name="attr_talentName03" value="" maxlength="32"tabindex="606"/>
 				<button type="roll" class="button buttonRollShow" tabindex="-1" name="roll_showTalentRoll03" value="&{template:custom-show} {{title=@{character_name} - @{character_title}}} {{subtitle= Perks & Talents - @{talentName03}}} {{desc=@{talentText03}}}">Show</button>
 				<h1>CP:</h1>
-				<input type="number" name="attr_talentCP03" value="0" min="0" tabindex="507"/>
+				<input type="number" name="attr_talentCP03" value="0" min="0" tabindex="607"/>
 			</div>
 			<div class="item-talent-textbox">
-				<textarea name="attr_talentText03" maxlength="240" tabindex="508"></textarea>
+				<textarea name="attr_talentText03" maxlength="240" tabindex="608"></textarea>
 			</div>
 			
 			<!-- Talent 04 -->
@@ -4217,13 +5215,13 @@
 					</div>
 				</div>
 				
-				<input type="text" name="attr_talentName04" value="" maxlength="32" tabindex="509"/>
+				<input type="text" name="attr_talentName04" value="" maxlength="32" tabindex="609"/>
 				<button type="roll" class="button buttonRollShow" tabindex="-1" name="roll_showTalentRoll04" value="&{template:custom-show} {{title=@{character_name} - @{character_title}}} {{subtitle= Perks & Talents - @{talentName04}}} {{desc=@{talentText04}}}">Show</button>
 				<h1>CP:</h1>
-				<input type="number" name="attr_talentCP04" value="0" min="0" tabindex="510"/>
+				<input type="number" name="attr_talentCP04" value="0" min="0" tabindex="610"/>
 			</div>
 			<div class="item-talent-textbox">
-				<textarea name="attr_talentText04" maxlength="240" tabindex="511"></textarea>
+				<textarea name="attr_talentText04" maxlength="240" tabindex="611"></textarea>
 			</div>
 			
 			<!-- Talent 05 -->
@@ -4239,13 +5237,13 @@
 					</div>
 				</div>
 				
-				<input type="text" name="attr_talentName05" value="" maxlength="32" tabindex="512"/>
+				<input type="text" name="attr_talentName05" value="" maxlength="32" tabindex="612"/>
 				<button type="roll" class="button buttonRollShow" tabindex="-1" name="roll_showTalentRoll05" value="&{template:custom-show} {{title=@{character_name} - @{character_title}}} {{subtitle= Perks & Talents - @{talentName05}}} {{desc=@{talentText05}}}">Show</button>
 				<h1>CP:</h1>
-				<input type="number" name="attr_talentCP05" value="0" min="0" tabindex="513"/>
+				<input type="number" name="attr_talentCP05" value="0" min="0" tabindex="613"/>
 			</div>
 			<div class="item-talent-textbox">
-				<textarea name="attr_talentText05" maxlength="240" tabindex="514"></textarea>
+				<textarea name="attr_talentText05" maxlength="240" tabindex="614"></textarea>
 			</div>
 			
 			<!-- Talent 06 -->
@@ -4261,13 +5259,13 @@
 					</div>
 				</div>
 				
-				<input type="text" name="attr_talentName06" value="" maxlength="32" tabindex="515"/>
+				<input type="text" name="attr_talentName06" value="" maxlength="32" tabindex="615"/>
 				<button type="roll" class="button buttonRollShow" tabindex="-1" name="roll_showTalentRoll06" value="&{template:custom-show} {{title=@{character_name} - @{character_title}}} {{subtitle= Perks & Talents - @{talentName06}}} {{desc=@{talentText06}}}">Show</button>
 				<h1>CP:</h1>
-				<input type="number" name="attr_talentCP06" value="0" min="0" tabindex="516"/>
+				<input type="number" name="attr_talentCP06" value="0" min="0" tabindex="616"/>
 			</div>
 			<div class="item-talent-textbox">
-				<textarea name="attr_talentText06" maxlength="240" tabindex="517"></textarea>
+				<textarea name="attr_talentText06" maxlength="240" tabindex="617"></textarea>
 			</div>
 			
 			<!-- Talent 07 -->
@@ -4283,13 +5281,13 @@
 					</div>
 				</div>
 				
-				<input type="text" name="attr_talentName07" value="" maxlength="32" tabindex="518"/>
+				<input type="text" name="attr_talentName07" value="" maxlength="32" tabindex="618"/>
 				<button type="roll" class="button buttonRollShow" tabindex="-1" name="roll_showTalentRoll07" value="&{template:custom-show} {{title=@{character_name} - @{character_title}}} {{subtitle= Perks & Talents - @{talentName07}}} {{desc=@{talentText07}}}">Show</button>
 				<h1>CP:</h1>
-				<input type="number" name="attr_talentCP07" value="0" min="0" tabindex="519"/>
+				<input type="number" name="attr_talentCP07" value="0" min="0" tabindex="619"/>
 			</div>
 			<div class="item-talent-textbox">
-				<textarea name="attr_talentText07" maxlength="240" tabindex="520"></textarea>
+				<textarea name="attr_talentText07" maxlength="240" tabindex="620"></textarea>
 			</div>
 		</div>
 		
@@ -4310,13 +5308,13 @@
 					</div>
 				</div>
 				
-				<input type="text" name="attr_complicationName01" value="" maxlength="32" tabindex="530"/>
+				<input type="text" name="attr_complicationName01" value="" maxlength="32" tabindex="630"/>
 				<button type="roll" class="button buttonRollShow" tabindex="-1" name="roll_showComplicationRoll01" value="&{template:custom-show} {{title=@{character_name} - @{character_title}}} {{subtitle= Complication - @{complicationName01}}} {{desc=@{complicationText01}}}">Show</button>
 				<h1>CP:</h1>
-				<input type="number" name="attr_complicationCP01" value="0" min="0" tabindex="531"/>
+				<input type="number" name="attr_complicationCP01" value="0" min="0" tabindex="631"/>
 			</div>
 			<div class="item-complication-textbox">
-				<textarea name="attr_complicationText01" maxlength="240" tabindex="532"></textarea>
+				<textarea name="attr_complicationText01" maxlength="240" tabindex="632"></textarea>
 			</div>
 			
 			<!-- Complication 02 -->
@@ -4332,13 +5330,13 @@
 					</div>
 				</div>
 				
-				<input type="text" name="attr_complicationName02" value="" maxlength="32" tabindex="533"/>
+				<input type="text" name="attr_complicationName02" value="" maxlength="32" tabindex="633"/>
 				<button type="roll" class="button buttonRollShow" tabindex="-1" name="roll_showComplicationRoll02" value="&{template:custom-show} {{title=@{character_name} - @{character_title}}} {{subtitle= Complication - @{complicationName02}}} {{desc=@{complicationText02}}}">Show</button>
 				<h1>CP:</h1>
-				<input type="number" name="attr_complicationCP02" value="0" min="0" tabindex="534"/>
+				<input type="number" name="attr_complicationCP02" value="0" min="0" tabindex="634"/>
 			</div>
 			<div class="item-complication-textbox">
-				<textarea name="attr_complicationText02" maxlength="240" tabindex="535"></textarea>
+				<textarea name="attr_complicationText02" maxlength="240" tabindex="635"></textarea>
 			</div>
 			
 			<!-- Complication 03 -->
@@ -4354,13 +5352,13 @@
 					</div>
 				</div>
 				
-				<input type="text" name="attr_complicationName03" value="" maxlength="32" tabindex="536"/>
+				<input type="text" name="attr_complicationName03" value="" maxlength="32" tabindex="636"/>
 				<button type="roll" class="button buttonRollShow" tabindex="-1" name="roll_showComplicationRoll03" value="&{template:custom-show} {{title=@{character_name} - @{character_title}}} {{subtitle= Complication - @{complicationName03}}} {{desc=@{complicationText03}}}">Show</button>
 				<h1>CP:</h1>
-				<input type="number" name="attr_complicationCP03" value="0" min="0" tabindex="537"/>
+				<input type="number" name="attr_complicationCP03" value="0" min="0" tabindex="637"/>
 			</div>
 			<div class="item-complication-textbox">
-				<textarea name="attr_complicationText03" maxlength="240" tabindex="538"></textarea>
+				<textarea name="attr_complicationText03" maxlength="240" tabindex="638"></textarea>
 			</div>
 			
 			<!-- Complication 04 -->
@@ -4376,13 +5374,13 @@
 					</div>
 				</div>
 				
-				<input type="text" name="attr_complicationName04" value="" maxlength="32" tabindex="539"/>
+				<input type="text" name="attr_complicationName04" value="" maxlength="32" tabindex="639"/>
 				<button type="roll" class="button buttonRollShow" tabindex="-1" name="roll_showComplicationRoll04" value="&{template:custom-show} {{title=@{character_name} - @{character_title}}} {{subtitle= Complication - @{complicationName04}}} {{desc=@{complicationText04}}}">Show</button>
 				<h1>CP:</h1>
-				<input type="number" name="attr_complicationCP04" value="0" min="0" tabindex="540"/>
+				<input type="number" name="attr_complicationCP04" value="0" min="0" tabindex="640"/>
 			</div>
 			<div class="item-complication-textbox">
-				<textarea name="attr_complicationText04" maxlength="240" tabindex="541"></textarea>
+				<textarea name="attr_complicationText04" maxlength="240" tabindex="641"></textarea>
 			</div>
 			
 			<!-- Complication 05 -->
@@ -4398,13 +5396,13 @@
 					</div>
 				</div>
 				
-				<input type="text" name="attr_complicationName05" value="" maxlength="32" tabindex="542"/>
+				<input type="text" name="attr_complicationName05" value="" maxlength="32" tabindex="642"/>
 				<button type="roll" class="button buttonRollShow" tabindex="-1" name="roll_showComplicationRoll05" value="&{template:custom-show} {{title=@{character_name} - @{character_title}}} {{subtitle= Complication - @{complicationName05}}} {{desc=@{complicationText05}}}">Show</button>
 				<h1>CP:</h1>
-				<input type="number" name="attr_complicationCP05" value="0" min="0" tabindex="543"/>
+				<input type="number" name="attr_complicationCP05" value="0" min="0" tabindex="643"/>
 			</div>
 			<div class="item-complication-textbox">
-				<textarea name="attr_complicationText05" maxlength="240" tabindex="544"></textarea>
+				<textarea name="attr_complicationText05" maxlength="240" tabindex="644"></textarea>
 			</div>
 			
 			<!-- Complication 06 -->
@@ -4420,20 +5418,20 @@
 					</div>
 				</div>
 				
-				<input type="text" name="attr_complicationName06" value="" maxlength="32" tabindex="545"/>
+				<input type="text" name="attr_complicationName06" value="" maxlength="32" tabindex="645"/>
 				<button type="roll" class="button buttonRollShow" tabindex="-1" name="roll_showComplicationRoll06" value="&{template:custom-show} {{title=@{character_name} - @{character_title}}} {{subtitle= Complication - @{complicationName06}}} {{desc=@{complicationText06}}}">Show</button>
 				<h1>CP:</h1>
-				<input type="number" name="attr_complicationCP06" value="0" min="0" tabindex="546"/>
+				<input type="number" name="attr_complicationCP06" value="0" min="0" tabindex="646"/>
 			</div>
 			<div class="item-complication-textbox">
-				<textarea name="attr_complicationText06" maxlength="240" tabindex="547"></textarea>
+				<textarea name="attr_complicationText06" maxlength="240" tabindex="647"></textarea>
 			</div>
 		</div>
 		
 		<!-- Complications Notes -->
 		<div class="flex-container-complications-bottom">
-			<textarea name="attr_complicationsTextLeft" maxlength="2048" tabindex="548"></textarea>
-			<textarea name="attr_complicationsTextRight" maxlength="2048" tabindex="549"></textarea>
+			<textarea name="attr_complicationsTextLeft" maxlength="2048" tabindex="648"></textarea>
+			<textarea name="attr_complicationsTextRight" maxlength="2048" tabindex="649"></textarea>
 		</div>
 	</div>
 </div>
@@ -4495,7 +5493,7 @@
 				</label>
 				<h1>Takes No STUN</h1>
 			</div>
-		</div>
+		</div>	
 	</div>
 </div>
 
@@ -4707,6 +5705,25 @@
 			});
 		});
 	});
+
+		
+	const buttonExpandLeftPowerList = ["powerExpand01", "powerExpand02", "powerExpand03", "powerExpand04", "powerExpand05", "powerExpand06", "powerExpand07", "powerExpand08", "powerExpand09"];
+	buttonExpandLeftPowerList.forEach(button => {
+		on(`clicked:${button}`, function() {
+			setAttrs({
+				leftPowerToggle: button
+			});
+		});
+	});
+	
+	const buttonExpandRightPowerList = ["powerExpand10", "powerExpand11", "powerExpand12", "powerExpand13", "powerExpand14", "powerExpand15", "powerExpand16", "powerExpand17"];
+	buttonExpandRightPowerList.forEach(button => {
+		on(`clicked:${button}`, function() {
+			setAttrs({
+				rightPowerToggle: button
+			});
+		});
+	});
 	
 	/* ------------------------- */
 	/* Functions used sheet-wide */
@@ -5034,6 +6051,98 @@
 		});
 	}
 	
+	
+	/* Increment and Decrement buttons for Health Fields on Page 4: powers */
+	
+	// Add 1 to powerCurrentBODY
+	on("clicked:powerCurrentBODYplus", function () {
+		getAttrs(["powerCurrentBODY"], function(values) {
+			const currentValue = parseInt(values.powerCurrentBODY)||0;
+			
+			setAttrs({
+				"powerCurrentBODY":currentValue+1
+			});
+		});
+	});
+	
+	// Subtract 1 from powerCurrentBODY
+	on("clicked:powerCurrentBODYminus", function () {
+		getAttrs(["powerCurrentBODY"], function(values) {
+			const currentValue = parseInt(values.powerCurrentBODY)||0;
+			
+			setAttrs({
+				"powerCurrentBODY":currentValue-1
+			});
+		});
+	});
+	
+	// Add 1 to powerCurrentSTUN
+	on("clicked:powerCurrentSTUNplus", function () {
+		getAttrs(["powerCurrentSTUN", "optionTakesNoSTUN"], function(values) {
+			let currentValue = parseInt(values.powerCurrentSTUN)||0;
+			const takesNoSTUN = values.optionTakesNoSTUN;
+			
+			if (takesNoSTUN != 0) {
+				currentValue = 0;
+			} else {
+				currentValue = currentValue +1;
+			}
+			
+			setAttrs({
+				"powerCurrentSTUN":currentValue
+			});
+		});
+	});
+	
+	// Subtract 1 from powerCurrentSTUN
+	on("clicked:powerCurrentSTUNminus", function () {
+		getAttrs(["powerCurrentSTUN", "optionTakesNoSTUN"], function(values) {
+			let currentValue = parseInt(values.powerCurrentSTUN)||0;
+			const takesNoSTUN = values.optionTakesNoSTUN;
+			
+			if (takesNoSTUN != 0) {
+				currentValue = 0;
+			} else {
+				currentValue = currentValue -1;
+			}
+					
+			setAttrs({
+				"powerCurrentSTUN":currentValue
+			});
+		});
+	});
+	
+	// Add 1 to powerCurrentEND
+	on("clicked:powerCurrentENDplus", function () {
+		getAttrs(["powerCurrentEND"], function(values) {
+			const currentValue = parseInt(values.powerCurrentEND)||0;
+			
+			if (currentValue < 0) {
+				// Attempt to correct negative END values.
+				setAttrs({
+					"powerCurrentEND":0
+				});
+			} else {
+				setAttrs({
+					"powerCurrentEND":currentValue+1
+				});
+			}
+		});
+	});
+	
+	// Subtract 1 from powerCurrentEND
+	on("clicked:powerCurrentENDminus", function () {
+		getAttrs(["powerCurrentEND"], function(values) {
+			const currentValue = parseInt(values.powerCurrentEND)||0;
+			
+			if (currentValue > 0) {
+				setAttrs({
+					"powerCurrentEND":currentValue-1
+				});
+			}
+		});
+	});
+	
 	// Reset endurance and stun in item-characteristics-health when the reset action button is clicked.
 	on("clicked:resetHealth", function () {
 		applyResetHealth();
@@ -5044,6 +6153,11 @@
 		applyResetHealth();
 	});
 	
+	// Reset endurance and stun when the resect action button in item-powers-health panel is clicked.
+	on("clicked:powerResetHealth", function () {
+		applyResetHealth();
+	});
+	
 	function applyResetHealth() {
 		getAttrs(["endurance","stun"], function(values) {
 			const maxEND = parseInt(values.endurance);
@@ -5053,7 +6167,9 @@
 				"currentSTUN":maxSTUN,
 				"currentEND":maxEND,
 				"gearCurrentSTUN":maxSTUN,
-				"gearCurrentEND":maxEND
+				"gearCurrentEND":maxEND,
+				"powerCurrentSTUN":maxSTUN,
+				"powerCurrentEND":maxEND
 			});
 		});
 	}
@@ -5070,8 +6186,13 @@
 		applyRecovery();
 	});
 	
+	// Recover endurance and stun when the recover button in the powers health status box is clicked.
+	on("clicked:powerRecoverHealth", function () {
+		applyRecovery();
+	});
+	
 	function applyRecovery() {
-		getAttrs(["endurance","stun","currentEND","currentSTUN","gearCurrentEND","gearCurrentSTUN","recovery","sheetTab"], function(values) {
+		getAttrs(["endurance","stun","currentEND","currentSTUN","gearCurrentEND","gearCurrentSTUN","powerCurrentEND","powerCurrentSTUN","recovery","sheetTab"], function(values) {
 			const maxEND = parseInt(values.endurance);
 			const maxSTUN = parseInt(values.stun);
 			const recovery = parseInt(values.recovery);
@@ -5105,7 +6226,7 @@
 						});
 					}
 				}	
-			} else {
+			} else if (currentSheet=="gear") {
 				// The player is viewing Page 2: gear.
 				let currentEND = parseInt(values.gearCurrentEND);
 				let currentSTUN = parseInt(values.gearCurrentSTUN);
@@ -5133,46 +6254,101 @@
 						});
 					}
 				}	
+			} else {
+				// The player is viewing Page 4: powers.
+				let currentEND = parseInt(values.powerCurrentEND);
+				let currentSTUN = parseInt(values.powerCurrentSTUN);
+				
+				if (currentSTUN<=maxSTUN) { // Check to see if character hasn't been boosted above character max by Aid power or similar.
+					if (currentSTUN+recovery<=maxSTUN) {
+						setAttrs({
+							"powerCurrentSTUN":currentSTUN+recovery
+						});
+					} else {
+						setAttrs({
+							"powerCurrentSTUN":maxSTUN
+						});
+					}
+				}
+			
+				if (currentEND<=maxEND) { // Check to see if character hasn't been boosted above character max by Aid power or similar.
+					if (currentEND+recovery<=maxEND) {
+						setAttrs({
+							"powerCurrentEND":currentEND+recovery
+						});
+					} else {
+						setAttrs({
+							"powerCurrentEND":maxEND
+						});
+					}
+				}	
 			}
 		});
 	}
 	
 	/* Synchronize health statuses */
 	
-	// Keep the gear tab's health status up to date with the character tab's health status.
+	// Health status up to date: tab gear and tab powers.
 	on("change:currentBODY change:currentSTUN change:currentEND", function () {
-		getAttrs(["gearCurrentBODY","gearCurrentSTUN","gearCurrentEND","currentBODY","currentSTUN","currentEND","sheetTab"], function(values) {
+		getAttrs(["powerCurrentBODY","powerCurrentSTUN","powerCurrentEND", "gearCurrentBODY","gearCurrentSTUN","gearCurrentEND","currentBODY","currentSTUN","currentEND","sheetTab"], function(values) {
 			// Get the visible sheet.
 			const currentSheet = values.sheetTab;
-
-			// As long as the visible sheet is not Page 2 (Gear) change Page 2's BODY, STUN, and END health status.
-			if (currentSheet != "gear") {
+			
+			// Update other sheets.
+			if (currentSheet == "characteristics") {
 				setAttrs({
 					"gearCurrentBODY":parseInt(values.currentBODY)||0,
 					"gearCurrentSTUN":parseInt(values.currentSTUN)||0,
 					"gearCurrentEND":parseInt(values.currentEND)||0,
+					"powerCurrentBODY":parseInt(values.currentBODY)||0,
+					"powerCurrentSTUN":parseInt(values.currentSTUN)||0,
+					"powerCurrentEND":parseInt(values.currentEND)||0
 				})
 			}
 		});
 	});
 	
-	// Keep the gear tab's health status up to date with the character tab's health status.
+	// Health status up to date: tab powers and tab characteristics.
 	on("change:gearCurrentBODY change:gearCurrentSTUN change:gearCurrentEND", function () {
-		getAttrs(["gearCurrentBODY","gearCurrentSTUN","gearCurrentEND","currentBODY","currentSTUN","currentEND","sheetTab"], function(values) {
+		getAttrs(["powerCurrentBODY","powerCurrentSTUN","powerCurrentEND", "gearCurrentBODY","gearCurrentSTUN","gearCurrentEND","currentBODY","currentSTUN","currentEND","sheetTab"], function(values) {
 			// Get the visible sheet.
 			const currentSheet = values.sheetTab;
 			
-			// As long as the visible sheet is Page 2 (Gear) change Page 1's BODY, STUN, and END health status.
+			// Update other sheets.
 			if (currentSheet == "gear") {
 				setAttrs({
 					"currentBODY":parseInt(values.gearCurrentBODY)||0,
 					"currentSTUN":parseInt(values.gearCurrentSTUN)||0,
 					"currentEND":parseInt(values.gearCurrentEND)||0,
+					"powerCurrentBODY":parseInt(values.gearCurrentBODY)||0,
+					"powerCurrentSTUN":parseInt(values.gearCurrentSTUN)||0,
+					"powerCurrentEND":parseInt(values.gearCurrentEND)||0
 				})
 			}
 		});
 	});
 	
+	// Health status up to date: tab gear and tab characteristics.
+	on("change:powerCurrentBODY change:powerCurrentSTUN change:powerCurrentEND", function () {
+		getAttrs(["powerCurrentBODY","powerCurrentSTUN","powerCurrentEND", "gearCurrentBODY","gearCurrentSTUN","gearCurrentEND","currentBODY","currentSTUN","currentEND","sheetTab"], function(values) {
+			// Get the visible sheet.
+			const currentSheet = values.sheetTab;
+			
+			// Update other sheets.
+			if (currentSheet == "powers") {
+				setAttrs({
+					"currentBODY":parseInt(values.powerCurrentBODY)||0,
+					"currentSTUN":parseInt(values.powerCurrentSTUN)||0,
+					"currentEND":parseInt(values.powerCurrentEND)||0,
+					"gearCurrentBODY":parseInt(values.powerCurrentBODY)||0,
+					"gearCurrentSTUN":parseInt(values.powerCurrentSTUN)||0,
+					"gearCurrentEND":parseInt(values.powerCurrentEND)||0
+				})
+			}
+		});
+	});
+
+	
 	/* -------------------------------------- */
 	/* Functions used for characteristics tab */
 	/* -------------------------------------- */
@@ -5832,7 +7008,8 @@
 				"hiddenSTUN":savedStatValue,
 				"stun":statValue,
 				"currentSTUN":statValue,
-				"gearCurrentSTUN":statValue
+				"gearCurrentSTUN":statValue,
+				"powerCurrentSTUN":statValue
 			});
 			
 			// Update characteristics cost
@@ -6111,8 +7288,15 @@
 			const power08cost = parseInt(values.powerCP08)||0;
 			const power09cost = parseInt(values.powerCP09)||0;
 			const power10cost = parseInt(values.powerCP10)||0;
+			const power11cost = parseInt(values.powerCP11)||0;
+			const power12cost = parseInt(values.powerCP12)||0;
+			const power13cost = parseInt(values.powerCP13)||0;
+			const power14cost = parseInt(values.powerCP14)||0;
+			const power15cost = parseInt(values.powerCP15)||0;
+			const power16cost = parseInt(values.powerCP16)||0;
+			const power17cost = parseInt(values.powerCP17)||0;
 			
-			let powersCost = power01cost+power02cost+power03cost+power04cost+power05cost+power06cost+power07cost+power08cost+power09cost+power10cost;
+			let powersCost = power01cost+power02cost+power03cost+power04cost+power05cost+power06cost+power07cost+power08cost+power09cost+power10cost+power11cost+power12cost+power13cost+power14cost+power15cost+power16cost+power17cost;
 			
 			let totalCost=talentsCost+powersCost;
 			
@@ -6320,8 +7504,8 @@
 	
 	// Use Power 01 Endurance
 	on("clicked:buttonPowerEND01", function () {
-		getAttrs(["currentEND","powerEND01"], function(values) {
-			const currentEND = parseInt(values.currentEND);
+		getAttrs(["powerCurrentEND","powerEND01"], function(values) {
+			const currentEND = parseInt(values.powerCurrentEND);
 			const powerEND = parseInt(values.powerEND01);
 			
 			let updatedEND=currentEND-powerEND;
@@ -6331,7 +7515,7 @@
 			}
 			
 			setAttrs({
-				"currentEND":updatedEND
+				"powerCurrentEND":updatedEND
 			});
 		});
 	});	
@@ -6416,8 +7600,8 @@
 	
 	// Use Power 02 Endurance
 	on("clicked:buttonPowerEND02", function () {
-		getAttrs(["currentEND","powerEND02"], function(values) {
-			const currentEND = parseInt(values.currentEND);
+		getAttrs(["powerCurrentEND","powerEND02"], function(values) {
+			const currentEND = parseInt(values.powerCurrentEND);
 			const powerEND = parseInt(values.powerEND02);
 			
 			let updatedEND=currentEND-powerEND;
@@ -6427,10 +7611,10 @@
 			}
 			
 			setAttrs({
-				"currentEND":updatedEND
+				"powerCurrentEND":updatedEND
 			});
 		});
-	});	
+	});
 	
 	/* Activate Power 02 */	
 	on('clicked:powerRoll02', (info) => {
@@ -6512,8 +7696,8 @@
 	
 	// Use Power 03 Endurance
 	on("clicked:buttonPowerEND03", function () {
-		getAttrs(["currentEND","powerEND03"], function(values) {
-			const currentEND = parseInt(values.currentEND);
+		getAttrs(["powerCurrentEND","powerEND03"], function(values) {
+			const currentEND = parseInt(values.powerCurrentEND);
 			const powerEND = parseInt(values.powerEND03);
 			
 			let updatedEND=currentEND-powerEND;
@@ -6523,10 +7707,10 @@
 			}
 			
 			setAttrs({
-				"currentEND":updatedEND
+				"powerCurrentEND":updatedEND
 			});
 		});
-	});	
+	});
 	
 	/* Activate Power 03 */	
 	on('clicked:powerRoll03', (info) => {
@@ -6608,8 +7792,8 @@
 	
 	// Use Power 04 Endurance
 	on("clicked:buttonPowerEND04", function () {
-		getAttrs(["currentEND","powerEND04"], function(values) {
-			const currentEND = parseInt(values.currentEND);
+		getAttrs(["powerCurrentEND","powerEND04"], function(values) {
+			const currentEND = parseInt(values.powerCurrentEND);
 			const powerEND = parseInt(values.powerEND04);
 			
 			let updatedEND=currentEND-powerEND;
@@ -6619,10 +7803,10 @@
 			}
 			
 			setAttrs({
-				"currentEND":updatedEND
+				"powerCurrentEND":updatedEND
 			});
 		});
-	});	
+	});
 	
 	/* Activate Power 04 */	
 	on('clicked:powerRoll04', (info) => {
@@ -6704,8 +7888,8 @@
 	
 	// Use Power 05 Endurance
 	on("clicked:buttonPowerEND05", function () {
-		getAttrs(["currentEND","powerEND05"], function(values) {
-			const currentEND = parseInt(values.currentEND);
+		getAttrs(["powerCurrentEND","powerEND05"], function(values) {
+			const currentEND = parseInt(values.powerCurrentEND);
 			const powerEND = parseInt(values.powerEND05);
 			
 			let updatedEND=currentEND-powerEND;
@@ -6715,7 +7899,7 @@
 			}
 			
 			setAttrs({
-				"currentEND":updatedEND
+				"powerCurrentEND":updatedEND
 			});
 		});
 	});
@@ -6798,10 +7982,10 @@
 		});
 	});
 	
-	// Use Power 06
+	// Use Power 06 Endurance
 	on("clicked:buttonPowerEND06", function () {
-		getAttrs(["currentEND","powerEND06"], function(values) {
-			const currentEND = parseInt(values.currentEND);
+		getAttrs(["powerCurrentEND","powerEND06"], function(values) {
+			const currentEND = parseInt(values.powerCurrentEND);
 			const powerEND = parseInt(values.powerEND06);
 			
 			let updatedEND=currentEND-powerEND;
@@ -6811,7 +7995,7 @@
 			}
 			
 			setAttrs({
-				"currentEND":updatedEND
+				"powerCurrentEND":updatedEND
 			});
 		});
 	});
@@ -6896,8 +8080,8 @@
 	
 	// Use Power 07 Endurance
 	on("clicked:buttonPowerEND07", function () {
-		getAttrs(["currentEND","powerEND07"], function(values) {
-			const currentEND = parseInt(values.currentEND);
+		getAttrs(["powerCurrentEND","powerEND07"], function(values) {
+			const currentEND = parseInt(values.powerCurrentEND);
 			const powerEND = parseInt(values.powerEND07);
 			
 			let updatedEND=currentEND-powerEND;
@@ -6907,7 +8091,7 @@
 			}
 			
 			setAttrs({
-				"currentEND":updatedEND
+				"powerCurrentEND":updatedEND
 			});
 		});
 	});
@@ -6990,10 +8174,10 @@
 		});
 	});
 	
-	// Use Power 08
+	// Use Power 08 Endurance
 	on("clicked:buttonPowerEND08", function () {
-		getAttrs(["currentEND","powerEND08"], function(values) {
-			const currentEND = parseInt(values.currentEND);
+		getAttrs(["powerCurrentEND","powerEND08"], function(values) {
+			const currentEND = parseInt(values.powerCurrentEND);
 			const powerEND = parseInt(values.powerEND08);
 			
 			let updatedEND=currentEND-powerEND;
@@ -7003,7 +8187,7 @@
 			}
 			
 			setAttrs({
-				"currentEND":updatedEND
+				"powerCurrentEND":updatedEND
 			});
 		});
 	});
@@ -7088,8 +8272,8 @@
 	
 	// Use Power 09 Endurance
 	on("clicked:buttonPowerEND09", function () {
-		getAttrs(["currentEND","powerEND09"], function(values) {
-			const currentEND = parseInt(values.currentEND);
+		getAttrs(["powerCurrentEND","powerEND09"], function(values) {
+			const currentEND = parseInt(values.powerCurrentEND);
 			const powerEND = parseInt(values.powerEND09);
 			
 			let updatedEND=currentEND-powerEND;
@@ -7099,7 +8283,7 @@
 			}
 			
 			setAttrs({
-				"currentEND":updatedEND
+				"powerCurrentEND":updatedEND
 			});
 		});
 	});
@@ -7184,8 +8368,8 @@
 	
 	// Use Power 10 Endurance
 	on("clicked:buttonPowerEND10", function () {
-		getAttrs(["currentEND","powerEND10"], function(values) {
-			const currentEND = parseInt(values.currentEND);
+		getAttrs(["powerCurrentEND","powerEND10"], function(values) {
+			const currentEND = parseInt(values.powerCurrentEND);
 			const powerEND = parseInt(values.powerEND10);
 			
 			let updatedEND=currentEND-powerEND;
@@ -7195,7 +8379,7 @@
 			}
 			
 			setAttrs({
-				"currentEND":updatedEND
+				"powerCurrentEND":updatedEND
 			});
 		});
 	});
@@ -7220,8 +8404,688 @@
 		});
 	});
 	
+	
+	/* Update Power11 after detecting change to any of the numerical vales in the flex container */
+	on("change:powerType11 change:powerBaseCost11 change:powerAdvantages11 change:powerReducedEND11 change:powerLimitations11 change:powerDice11", function () {
+		getAttrs(["powerType11","powerBaseCost11","powerAdvantages11","powerReducedEND11","powerLimitations11","powerDice11"], function(values) {
+			
+			let powerType = values.powerType11;
+			const powerBaseCost = parseInt(values.powerBaseCost11)||0;
+			const powerAdvantages = parseFloat(values.powerAdvantages11)||0;
+			const powerReducedEND = values.powerReducedEND11;
+			let powerActiveCost=0;
+			let powerModifiedCost=0;
+			let powerRealCost=0;
+			let powerEND=0;
+			let thePowerDice=values.powerDice11;
+			
+			var increasedENDLimitation=increasedENDlimitation(powerReducedEND);
+			var powerLimitations = (parseFloat(values.powerLimitations11)||0)+increasedENDLimitation;
+			
+			powerPreReducedEndActiveCost=powerBaseCost * (1+powerAdvantages);
+			powerEND=calculatePowerEND(powerPreReducedEndActiveCost, powerReducedEND);
+			powerActiveCost=calculateActiveCost(powerBaseCost, powerAdvantages, powerReducedEND);
+			powerActiveCost=heroRoundLow(powerActiveCost);
+			thePowerDice=thePowerDice.replace(/[^\ddD\\+\\-]/g,"");
+			
+			if (powerBaseCost != 0) {
+				switch (powerType) {
+					case 'variableSlot': 	powerRealCost=powerActiveCost/(1+powerLimitations)/5;
+									powerRealCost=heroRoundLow(powerRealCost);
+									if (powerRealCost<1) {
+										powerRealCost=1;
+									};
+									break;
+					case 'fixedSlot': 	powerRealCost=powerActiveCost/(1+powerLimitations)/10;
+									powerRealCost=heroRoundLow(powerRealCost);
+									if (powerRealCost<1) {
+										powerRealCost=1;
+									};
+									break;
+					default: powerRealCost=powerActiveCost/(1+powerLimitations);
+									powerRealCost=heroRoundLow(powerRealCost);
+									if (powerRealCost<1) {
+										powerRealCost=1;
+									};
+				}
+			} else {
+				powerActiveCost=0;
+				powerEND=0;
+			}
+			
+			setAttrs({
+				"powerActiveCost11":powerActiveCost,
+				"powerEND11":powerEND,
+				"powerCP11":powerRealCost,
+				"hiddenPowerDice11":thePowerDice
+			});
+			
+		});
+	});
+	
+	// Use Power 11 Endurance
+	on("clicked:buttonPowerEND11", function () {
+		getAttrs(["powerCurrentEND","powerEND11"], function(values) {
+			const currentEND = parseInt(values.powerCurrentEND);
+			const powerEND = parseInt(values.powerEND11);
+			
+			let updatedEND=currentEND-powerEND;
+			
+			if (updatedEND<0) {
+				updatedEND=0;
+			}
+			
+			setAttrs({
+				"powerCurrentEND":updatedEND
+			});
+		});
+	});
+	
+	/* Activate Power 11 */	
+	on('clicked:powerRoll11', (info) => {
+		startRoll("&{template:custom-power-attack} {{title=@{character_name} - @{character_title}}} {{subtitle= @{powerName11} - @{powerEffect11}}} {{desc=@{powerText11}}} {{Activate On = [[?{Modifiers|0}+@{powerSkillRoll11}]] **or less**}} {{Success Roll=[[3d6cf<0cs>0]]}} {{Attack Roll=[[3d6cf<0cs>0]]}} {{Effect Roll=[[@{hiddenPowerDice11}sd]]}} {{END=[[@{powerEND11}]]}}", (results) => {
+			// Roll activation and effect dice. If the option to auto apply endurance is TRUE, subtract the power's END once from currentEND.
+			
+			getAttrs(["optionAutoSubtractEND", "powerEND11"], function(values) {
+				let autoSubtractEND = values.optionAutoSubtractEND;
+				let powerEND = parseInt(values.powerEND11)||0;	
+				
+				subtractEndurance(powerEND);
+			});
+			
+			finishRoll(
+				results.rollId,
+				{
+				}
+			);
+		});
+	});
+	
+	
+	/* Update Power12 after detecting change to any of the numerical vales in the flex container */
+	on("change:powerType12 change:powerBaseCost12 change:powerAdvantages12 change:powerReducedEND12 change:powerLimitations12 change:powerDice12", function () {
+		getAttrs(["powerType12","powerBaseCost12","powerAdvantages12","powerReducedEND12","powerLimitations12","powerDice12"], function(values) {
+			
+			let powerType = values.powerType12;
+			const powerBaseCost = parseInt(values.powerBaseCost12)||0;
+			const powerAdvantages = parseFloat(values.powerAdvantages12)||0;
+			const powerReducedEND = values.powerReducedEND12;
+			let powerActiveCost=0;
+			let powerModifiedCost=0;
+			let powerRealCost=0;
+			let powerEND=0;
+			let thePowerDice=values.powerDice12;
+			
+			var increasedENDLimitation=increasedENDlimitation(powerReducedEND);
+			var powerLimitations = (parseFloat(values.powerLimitations12)||0)+increasedENDLimitation;
+			
+			powerPreReducedEndActiveCost=powerBaseCost * (1+powerAdvantages);
+			powerEND=calculatePowerEND(powerPreReducedEndActiveCost, powerReducedEND);
+			powerActiveCost=calculateActiveCost(powerBaseCost, powerAdvantages, powerReducedEND);
+			powerActiveCost=heroRoundLow(powerActiveCost);
+			thePowerDice=thePowerDice.replace(/[^\ddD\\+\\-]/g,"");
+			
+			if (powerBaseCost != 0) {
+				switch (powerType) {
+					case 'variableSlot': 	powerRealCost=powerActiveCost/(1+powerLimitations)/5;
+									powerRealCost=heroRoundLow(powerRealCost);
+									if (powerRealCost<1) {
+										powerRealCost=1;
+									};
+									break;
+					case 'fixedSlot': 	powerRealCost=powerActiveCost/(1+powerLimitations)/10;
+									powerRealCost=heroRoundLow(powerRealCost);
+									if (powerRealCost<1) {
+										powerRealCost=1;
+									};
+									break;
+					default: powerRealCost=powerActiveCost/(1+powerLimitations);
+									powerRealCost=heroRoundLow(powerRealCost);
+									if (powerRealCost<1) {
+										powerRealCost=1;
+									};
+				}
+			} else {
+				powerActiveCost=0;
+				powerEND=0;
+			}
+			
+			setAttrs({
+				"powerActiveCost12":powerActiveCost,
+				"powerEND12":powerEND,
+				"powerCP12":powerRealCost,
+				"hiddenPowerDice12":thePowerDice
+			});
+			
+		});
+	});
+	
+	// Use Power 12 Endurance
+	on("clicked:buttonPowerEND12", function () {
+		getAttrs(["powerCurrentEND","powerEND12"], function(values) {
+			const currentEND = parseInt(values.powerCurrentEND);
+			const powerEND = parseInt(values.powerEND12);
+			
+			let updatedEND=currentEND-powerEND;
+			
+			if (updatedEND<0) {
+				updatedEND=0;
+			}
+			
+			setAttrs({
+				"powerCurrentEND":updatedEND
+			});
+		});
+	});
+	
+	/* Activate Power 12 */	
+	on('clicked:powerRoll12', (info) => {
+		startRoll("&{template:custom-power-attack} {{title=@{character_name} - @{character_title}}} {{subtitle= @{powerName12} - @{powerEffect12}}} {{desc=@{powerText12}}} {{Activate On = [[?{Modifiers|0}+@{powerSkillRoll12}]] **or less**}} {{Success Roll=[[3d6cf<0cs>0]]}} {{Attack Roll=[[3d6cf<0cs>0]]}} {{Effect Roll=[[@{hiddenPowerDice12}sd]]}} {{END=[[@{powerEND12}]]}}", (results) => {
+			// Roll activation and effect dice. If the option to auto apply endurance is TRUE, subtract the power's END once from currentEND.
+			
+			getAttrs(["optionAutoSubtractEND", "powerEND12"], function(values) {
+				let autoSubtractEND = values.optionAutoSubtractEND;
+				let powerEND = parseInt(values.powerEND12)||0;	
+				
+				subtractEndurance(powerEND);
+			});
+			
+			finishRoll(
+				results.rollId,
+				{
+				}
+			);
+		});
+	});
+	
+	
+	/* Update Power13 after detecting change to any of the numerical vales in the flex container */
+	on("change:powerType13 change:powerBaseCost13 change:powerAdvantages13 change:powerReducedEND13 change:powerLimitations13 change:powerDice13", function () {
+		getAttrs(["powerType13","powerBaseCost13","powerAdvantages13","powerReducedEND13","powerLimitations13","powerDice13"], function(values) {
+			
+			let powerType = values.powerType13;
+			const powerBaseCost = parseInt(values.powerBaseCost13)||0;
+			const powerAdvantages = parseFloat(values.powerAdvantages13)||0;
+			const powerReducedEND = values.powerReducedEND13;
+			let powerActiveCost=0;
+			let powerModifiedCost=0;
+			let powerRealCost=0;
+			let powerEND=0;
+			let thePowerDice=values.powerDice13;
+			
+			var increasedENDLimitation=increasedENDlimitation(powerReducedEND);
+			var powerLimitations = (parseFloat(values.powerLimitations13)||0)+increasedENDLimitation;
+			
+			powerPreReducedEndActiveCost=powerBaseCost * (1+powerAdvantages);
+			powerEND=calculatePowerEND(powerPreReducedEndActiveCost, powerReducedEND);
+			powerActiveCost=calculateActiveCost(powerBaseCost, powerAdvantages, powerReducedEND);
+			powerActiveCost=heroRoundLow(powerActiveCost);
+			thePowerDice=thePowerDice.replace(/[^\ddD\\+\\-]/g,"");
+			
+			if (powerBaseCost != 0) {
+				switch (powerType) {
+					case 'variableSlot': 	powerRealCost=powerActiveCost/(1+powerLimitations)/5;
+									powerRealCost=heroRoundLow(powerRealCost);
+									if (powerRealCost<1) {
+										powerRealCost=1;
+									};
+									break;
+					case 'fixedSlot': 	powerRealCost=powerActiveCost/(1+powerLimitations)/10;
+									powerRealCost=heroRoundLow(powerRealCost);
+									if (powerRealCost<1) {
+										powerRealCost=1;
+									};
+									break;
+					default: powerRealCost=powerActiveCost/(1+powerLimitations);
+									powerRealCost=heroRoundLow(powerRealCost);
+									if (powerRealCost<1) {
+										powerRealCost=1;
+									};
+				}
+			} else {
+				powerActiveCost=0;
+				powerEND=0;
+			}
+			
+			setAttrs({
+				"powerActiveCost13":powerActiveCost,
+				"powerEND13":powerEND,
+				"powerCP13":powerRealCost,
+				"hiddenPowerDice13":thePowerDice
+			});
+			
+		});
+	});
+	
+	// Use Power 13 Endurance
+	on("clicked:buttonPowerEND13", function () {
+		getAttrs(["powerCurrentEND","powerEND13"], function(values) {
+			const currentEND = parseInt(values.powerCurrentEND);
+			const powerEND = parseInt(values.powerEND13);
+			
+			let updatedEND=currentEND-powerEND;
+			
+			if (updatedEND<0) {
+				updatedEND=0;
+			}
+			
+			setAttrs({
+				"powerCurrentEND":updatedEND
+			});
+		});
+	});
+	
+	/* Activate Power 13 */	
+	on('clicked:powerRoll13', (info) => {
+		startRoll("&{template:custom-power-attack} {{title=@{character_name} - @{character_title}}} {{subtitle= @{powerName13} - @{powerEffect13}}} {{desc=@{powerText13}}} {{Activate On = [[?{Modifiers|0}+@{powerSkillRoll13}]] **or less**}} {{Success Roll=[[3d6cf<0cs>0]]}} {{Attack Roll=[[3d6cf<0cs>0]]}} {{Effect Roll=[[@{hiddenPowerDice13}sd]]}} {{END=[[@{powerEND13}]]}}", (results) => {
+			// Roll activation and effect dice. If the option to auto apply endurance is TRUE, subtract the power's END once from currentEND.
+			
+			getAttrs(["optionAutoSubtractEND", "powerEND13"], function(values) {
+				let autoSubtractEND = values.optionAutoSubtractEND;
+				let powerEND = parseInt(values.powerEND13)||0;	
+				
+				subtractEndurance(powerEND);
+			});
+			
+			finishRoll(
+				results.rollId,
+				{
+				}
+			);
+		});
+	});
+	
+	
+	/* Update Power14 after detecting change to any of the numerical vales in the flex container */
+	on("change:powerType14 change:powerBaseCost14 change:powerAdvantages14 change:powerReducedEND14 change:powerLimitations14 change:powerDice14", function () {
+		getAttrs(["powerType14","powerBaseCost14","powerAdvantages14","powerReducedEND14","powerLimitations14","powerDice14"], function(values) {
+			
+			let powerType = values.powerType14;
+			const powerBaseCost = parseInt(values.powerBaseCost14)||0;
+			const powerAdvantages = parseFloat(values.powerAdvantages14)||0;
+			const powerReducedEND = values.powerReducedEND14;
+			let powerActiveCost=0;
+			let powerModifiedCost=0;
+			let powerRealCost=0;
+			let powerEND=0;
+			let thePowerDice=values.powerDice14;
+			
+			var increasedENDLimitation=increasedENDlimitation(powerReducedEND);
+			var powerLimitations = (parseFloat(values.powerLimitations14)||0)+increasedENDLimitation;
+			
+			powerPreReducedEndActiveCost=powerBaseCost * (1+powerAdvantages);
+			powerEND=calculatePowerEND(powerPreReducedEndActiveCost, powerReducedEND);
+			powerActiveCost=calculateActiveCost(powerBaseCost, powerAdvantages, powerReducedEND);
+			powerActiveCost=heroRoundLow(powerActiveCost);
+			thePowerDice=thePowerDice.replace(/[^\ddD\\+\\-]/g,"");
+			
+			if (powerBaseCost != 0) {
+				switch (powerType) {
+					case 'variableSlot': 	powerRealCost=powerActiveCost/(1+powerLimitations)/5;
+									powerRealCost=heroRoundLow(powerRealCost);
+									if (powerRealCost<1) {
+										powerRealCost=1;
+									};
+									break;
+					case 'fixedSlot': 	powerRealCost=powerActiveCost/(1+powerLimitations)/10;
+									powerRealCost=heroRoundLow(powerRealCost);
+									if (powerRealCost<1) {
+										powerRealCost=1;
+									};
+									break;
+					default: powerRealCost=powerActiveCost/(1+powerLimitations);
+									powerRealCost=heroRoundLow(powerRealCost);
+									if (powerRealCost<1) {
+										powerRealCost=1;
+									};
+				}
+			} else {
+				powerActiveCost=0;
+				powerEND=0;
+			}
+			
+			setAttrs({
+				"powerActiveCost14":powerActiveCost,
+				"powerEND14":powerEND,
+				"powerCP14":powerRealCost,
+				"hiddenPowerDice14":thePowerDice
+			});
+			
+		});
+	});
+	
+	// Use Power 14 Endurance
+	on("clicked:buttonPowerEND14", function () {
+		getAttrs(["powerCurrentEND","powerEND14"], function(values) {
+			const currentEND = parseInt(values.powerCurrentEND);
+			const powerEND = parseInt(values.powerEND14);
+			
+			let updatedEND=currentEND-powerEND;
+			
+			if (updatedEND<0) {
+				updatedEND=0;
+			}
+			
+			setAttrs({
+				"powerCurrentEND":updatedEND
+			});
+		});
+	});
+	
+	/* Activate Power 14 */	
+	on('clicked:powerRoll14', (info) => {
+		startRoll("&{template:custom-power-attack} {{title=@{character_name} - @{character_title}}} {{subtitle= @{powerName14} - @{powerEffect14}}} {{desc=@{powerText14}}} {{Activate On = [[?{Modifiers|0}+@{powerSkillRoll14}]] **or less**}} {{Success Roll=[[3d6cf<0cs>0]]}} {{Attack Roll=[[3d6cf<0cs>0]]}} {{Effect Roll=[[@{hiddenPowerDice14}sd]]}} {{END=[[@{powerEND14}]]}}", (results) => {
+			// Roll activation and effect dice. If the option to auto apply endurance is TRUE, subtract the power's END once from currentEND.
+			
+			getAttrs(["optionAutoSubtractEND", "powerEND14"], function(values) {
+				let autoSubtractEND = values.optionAutoSubtractEND;
+				let powerEND = parseInt(values.powerEND14)||0;	
+				
+				subtractEndurance(powerEND);
+			});
+			
+			finishRoll(
+				results.rollId,
+				{
+				}
+			);
+		});
+	});
+	
+	
+	/* Update Power15 after detecting change to any of the numerical vales in the flex container */
+	on("change:powerType15 change:powerBaseCost15 change:powerAdvantages15 change:powerReducedEND15 change:powerLimitations15 change:powerDice15", function () {
+		getAttrs(["powerType15","powerBaseCost15","powerAdvantages15","powerReducedEND15","powerLimitations15","powerDice15"], function(values) {
+			
+			let powerType = values.powerType15;
+			const powerBaseCost = parseInt(values.powerBaseCost15)||0;
+			const powerAdvantages = parseFloat(values.powerAdvantages15)||0;
+			const powerReducedEND = values.powerReducedEND15;
+			let powerActiveCost=0;
+			let powerModifiedCost=0;
+			let powerRealCost=0;
+			let powerEND=0;
+			let thePowerDice=values.powerDice15;
+			
+			var increasedENDLimitation=increasedENDlimitation(powerReducedEND);
+			var powerLimitations = (parseFloat(values.powerLimitations15)||0)+increasedENDLimitation;
+			
+			powerPreReducedEndActiveCost=powerBaseCost * (1+powerAdvantages);
+			powerEND=calculatePowerEND(powerPreReducedEndActiveCost, powerReducedEND);
+			powerActiveCost=calculateActiveCost(powerBaseCost, powerAdvantages, powerReducedEND);
+			powerActiveCost=heroRoundLow(powerActiveCost);
+			thePowerDice=thePowerDice.replace(/[^\ddD\\+\\-]/g,"");
+			
+			if (powerBaseCost != 0) {
+				switch (powerType) {
+					case 'variableSlot': 	powerRealCost=powerActiveCost/(1+powerLimitations)/5;
+									powerRealCost=heroRoundLow(powerRealCost);
+									if (powerRealCost<1) {
+										powerRealCost=1;
+									};
+									break;
+					case 'fixedSlot': 	powerRealCost=powerActiveCost/(1+powerLimitations)/10;
+									powerRealCost=heroRoundLow(powerRealCost);
+									if (powerRealCost<1) {
+										powerRealCost=1;
+									};
+									break;
+					default: powerRealCost=powerActiveCost/(1+powerLimitations);
+									powerRealCost=heroRoundLow(powerRealCost);
+									if (powerRealCost<1) {
+										powerRealCost=1;
+									};
+				}
+			} else {
+				powerActiveCost=0;
+				powerEND=0;
+			}
+			
+			setAttrs({
+				"powerActiveCost15":powerActiveCost,
+				"powerEND15":powerEND,
+				"powerCP15":powerRealCost,
+				"hiddenPowerDice15":thePowerDice
+			});
+			
+		});
+	});
+	
+	// Use Power 15 Endurance
+	on("clicked:buttonPowerEND15", function () {
+		getAttrs(["powerCurrentEND","powerEND15"], function(values) {
+			const currentEND = parseInt(values.powerCurrentEND);
+			const powerEND = parseInt(values.powerEND15);
+			
+			let updatedEND=currentEND-powerEND;
+			
+			if (updatedEND<0) {
+				updatedEND=0;
+			}
+			
+			setAttrs({
+				"powerCurrentEND":updatedEND
+			});
+		});
+	});
+	
+	/* Activate Power 15 */	
+	on('clicked:powerRoll15', (info) => {
+		startRoll("&{template:custom-power-attack} {{title=@{character_name} - @{character_title}}} {{subtitle= @{powerName15} - @{powerEffect15}}} {{desc=@{powerText15}}} {{Activate On = [[?{Modifiers|0}+@{powerSkillRoll15}]] **or less**}} {{Success Roll=[[3d6cf<0cs>0]]}} {{Attack Roll=[[3d6cf<0cs>0]]}} {{Effect Roll=[[@{hiddenPowerDice15}sd]]}} {{END=[[@{powerEND15}]]}}", (results) => {
+			// Roll activation and effect dice. If the option to auto apply endurance is TRUE, subtract the power's END once from currentEND.
+			
+			getAttrs(["optionAutoSubtractEND", "powerEND15"], function(values) {
+				let autoSubtractEND = values.optionAutoSubtractEND;
+				let powerEND = parseInt(values.powerEND15)||0;	
+				
+				subtractEndurance(powerEND);
+			});
+			
+			finishRoll(
+				results.rollId,
+				{
+				}
+			);
+		});
+	});
+	
+	
+	/* Update Power16 after detecting change to any of the numerical vales in the flex container */
+	on("change:powerType16 change:powerBaseCost16 change:powerAdvantages16 change:powerReducedEND16 change:powerLimitations16 change:powerDice16", function () {
+		getAttrs(["powerType16","powerBaseCost16","powerAdvantages16","powerReducedEND16","powerLimitations16","powerDice16"], function(values) {
+			
+			let powerType = values.powerType16;
+			const powerBaseCost = parseInt(values.powerBaseCost16)||0;
+			const powerAdvantages = parseFloat(values.powerAdvantages16)||0;
+			const powerReducedEND = values.powerReducedEND16;
+			let powerActiveCost=0;
+			let powerModifiedCost=0;
+			let powerRealCost=0;
+			let powerEND=0;
+			let thePowerDice=values.powerDice16;
+			
+			var increasedENDLimitation=increasedENDlimitation(powerReducedEND);
+			var powerLimitations = (parseFloat(values.powerLimitations16)||0)+increasedENDLimitation;
+			
+			powerPreReducedEndActiveCost=powerBaseCost * (1+powerAdvantages);
+			powerEND=calculatePowerEND(powerPreReducedEndActiveCost, powerReducedEND);
+			powerActiveCost=calculateActiveCost(powerBaseCost, powerAdvantages, powerReducedEND);
+			powerActiveCost=heroRoundLow(powerActiveCost);
+			thePowerDice=thePowerDice.replace(/[^\ddD\\+\\-]/g,"");
+			
+			if (powerBaseCost != 0) {
+				switch (powerType) {
+					case 'variableSlot': 	powerRealCost=powerActiveCost/(1+powerLimitations)/5;
+									powerRealCost=heroRoundLow(powerRealCost);
+									if (powerRealCost<1) {
+										powerRealCost=1;
+									};
+									break;
+					case 'fixedSlot': 	powerRealCost=powerActiveCost/(1+powerLimitations)/10;
+									powerRealCost=heroRoundLow(powerRealCost);
+									if (powerRealCost<1) {
+										powerRealCost=1;
+									};
+									break;
+					default: powerRealCost=powerActiveCost/(1+powerLimitations);
+									powerRealCost=heroRoundLow(powerRealCost);
+									if (powerRealCost<1) {
+										powerRealCost=1;
+									};
+				}
+			} else {
+				powerActiveCost=0;
+				powerEND=0;
+			}
+			
+			setAttrs({
+				"powerActiveCost16":powerActiveCost,
+				"powerEND16":powerEND,
+				"powerCP16":powerRealCost,
+				"hiddenPowerDice16":thePowerDice
+			});
+			
+		});
+	});
+	
+	// Use Power 16 Endurance
+	on("clicked:buttonPowerEND16", function () {
+		getAttrs(["powerCurrentEND","powerEND16"], function(values) {
+			const currentEND = parseInt(values.powerCurrentEND);
+			const powerEND = parseInt(values.powerEND16);
+			
+			let updatedEND=currentEND-powerEND;
+			
+			if (updatedEND<0) {
+				updatedEND=0;
+			}
+			
+			setAttrs({
+				"powerCurrentEND":updatedEND
+			});
+		});
+	});
+	
+	/* Activate Power 16 */	
+	on('clicked:powerRoll16', (info) => {
+		startRoll("&{template:custom-power-attack} {{title=@{character_name} - @{character_title}}} {{subtitle= @{powerName16} - @{powerEffect16}}} {{desc=@{powerText16}}} {{Activate On = [[?{Modifiers|0}+@{powerSkillRoll16}]] **or less**}} {{Success Roll=[[3d6cf<0cs>0]]}} {{Attack Roll=[[3d6cf<0cs>0]]}} {{Effect Roll=[[@{hiddenPowerDice16}sd]]}} {{END=[[@{powerEND16}]]}}", (results) => {
+			// Roll activation and effect dice. If the option to auto apply endurance is TRUE, subtract the power's END once from currentEND.
+			
+			getAttrs(["optionAutoSubtractEND", "powerEND16"], function(values) {
+				let autoSubtractEND = values.optionAutoSubtractEND;
+				let powerEND = parseInt(values.powerEND16)||0;	
+				
+				subtractEndurance(powerEND);
+			});
+			
+			finishRoll(
+				results.rollId,
+				{
+				}
+			);
+		});
+	});
+	
+	
+	/* Update Power17 after detecting change to any of the numerical vales in the flex container */
+	on("change:powerType17 change:powerBaseCost17 change:powerAdvantages17 change:powerReducedEND17 change:powerLimitations17 change:powerDice17", function () {
+		getAttrs(["powerType17","powerBaseCost17","powerAdvantages17","powerReducedEND17","powerLimitations17","powerDice17"], function(values) {
+			
+			let powerType = values.powerType17;
+			const powerBaseCost = parseInt(values.powerBaseCost17)||0;
+			const powerAdvantages = parseFloat(values.powerAdvantages17)||0;
+			const powerReducedEND = values.powerReducedEND17;
+			let powerActiveCost=0;
+			let powerModifiedCost=0;
+			let powerRealCost=0;
+			let powerEND=0;
+			let thePowerDice=values.powerDice17;
+			
+			var increasedENDLimitation=increasedENDlimitation(powerReducedEND);
+			var powerLimitations = (parseFloat(values.powerLimitations17)||0)+increasedENDLimitation;
+			
+			powerPreReducedEndActiveCost=powerBaseCost * (1+powerAdvantages);
+			powerEND=calculatePowerEND(powerPreReducedEndActiveCost, powerReducedEND);
+			powerActiveCost=calculateActiveCost(powerBaseCost, powerAdvantages, powerReducedEND);
+			powerActiveCost=heroRoundLow(powerActiveCost);
+			thePowerDice=thePowerDice.replace(/[^\ddD\\+\\-]/g,"");
+			
+			if (powerBaseCost != 0) {
+				switch (powerType) {
+					case 'variableSlot': 	powerRealCost=powerActiveCost/(1+powerLimitations)/5;
+									powerRealCost=heroRoundLow(powerRealCost);
+									if (powerRealCost<1) {
+										powerRealCost=1;
+									};
+									break;
+					case 'fixedSlot': 	powerRealCost=powerActiveCost/(1+powerLimitations)/10;
+									powerRealCost=heroRoundLow(powerRealCost);
+									if (powerRealCost<1) {
+										powerRealCost=1;
+									};
+									break;
+					default: powerRealCost=powerActiveCost/(1+powerLimitations);
+									powerRealCost=heroRoundLow(powerRealCost);
+									if (powerRealCost<1) {
+										powerRealCost=1;
+									};
+				}
+			} else {
+				powerActiveCost=0;
+				powerEND=0;
+			}
+			
+			setAttrs({
+				"powerActiveCost17":powerActiveCost,
+				"powerEND17":powerEND,
+				"powerCP17":powerRealCost,
+				"hiddenPowerDice17":thePowerDice
+			});
+			
+		});
+	});
+	
+	// Use Power 17 Endurance
+	on("clicked:buttonPowerEND17", function () {
+		getAttrs(["powerCurrentEND","powerEND17"], function(values) {
+			const currentEND = parseInt(values.powerCurrentEND);
+			const powerEND = parseInt(values.powerEND17);
+			
+			let updatedEND=currentEND-powerEND;
+			
+			if (updatedEND<0) {
+				updatedEND=0;
+			}
+			
+			setAttrs({
+				"powerCurrentEND":updatedEND
+			});
+		});
+	});
+	
+	/* Activate Power 17 */	
+	on('clicked:powerRoll17', (info) => {
+		startRoll("&{template:custom-power-attack} {{title=@{character_name} - @{character_title}}} {{subtitle= @{powerName17} - @{powerEffect17}}} {{desc=@{powerText17}}} {{Activate On = [[?{Modifiers|0}+@{powerSkillRoll17}]] **or less**}} {{Success Roll=[[3d6cf<0cs>0]]}} {{Attack Roll=[[3d6cf<0cs>0]]}} {{Effect Roll=[[@{hiddenPowerDice17}sd]]}} {{END=[[@{powerEND17}]]}}", (results) => {
+			// Roll activation and effect dice. If the option to auto apply endurance is TRUE, subtract the power's END once from currentEND.
+			
+			getAttrs(["optionAutoSubtractEND", "powerEND17"], function(values) {
+				let autoSubtractEND = values.optionAutoSubtractEND;
+				let powerEND = parseInt(values.powerEND17)||0;	
+				
+				subtractEndurance(powerEND);
+			});
+			
+			finishRoll(
+				results.rollId,
+				{
+				}
+			);
+		});
+	});
+	
+	
 	// Update Tally Bar after change to any Power's CP cost.
-	on("change:powerCP01 change:powerCP02 change:powerCP03 change:powerCP04 change:powerCP05 change:powerCP06 change:powerCP07 change:powerCP08 change:powerCP09 change:powerCP10", function () {
+	on("change:powerCP01 change:powerCP02 change:powerCP03 change:powerCP04 change:powerCP05 change:powerCP06 change:powerCP07 change:powerCP08 change:powerCP09 change:powerCP10 change:powerCP11 change:powerCP12 change:powerCP13 change:powerCP14 change:powerCP15 change:powerCP16 change:powerCP17", function () {
 		sumPowersPerksTalents();
 	});
 	
@@ -7277,6 +9141,7 @@
 		});
 	});
 	
+	
 	on("clicked:powerDown02 clicked:powerUp03", function () {
 		getAttrs(["powerName02", "powerName03", "powerType02", "powerType03", "powerEffect02", "powerEffect03", "powerDice02", "powerDice03", "powerSkillRoll02", "powerSkillRoll03", "powerBaseCost02", "powerBaseCost03", "powerAdvantages02", "powerAdvantages03", "powerLimitations02", "powerLimitations03", "powerReducedEND02", "powerReducedEND03", "powerText02", "powerText03"], function(values) {
 			let destinationName = values.powerName03;
@@ -7325,6 +9190,7 @@
 		});
 	});
 	
+	
 	on("clicked:powerDown03 clicked:powerUp04", function () {
 		getAttrs(["powerName03", "powerName04", "powerType03", "powerType04", "powerEffect03", "powerEffect04", "powerDice03", "powerDice04", "powerSkillRoll03", "powerSkillRoll04", "powerBaseCost03", "powerBaseCost04", "powerAdvantages03", "powerAdvantages04", "powerLimitations03", "powerLimitations04", "powerReducedEND03", "powerReducedEND04", "powerText03", "powerText04"], function(values) {
 			let destinationName = values.powerName04;
@@ -7373,6 +9239,7 @@
 		});
 	});
 	
+	
 	on("clicked:powerDown04 clicked:powerUp05", function () {
 		getAttrs(["powerName04", "powerName05", "powerType04", "powerType05", "powerEffect04", "powerEffect05", "powerDice04", "powerDice05", "powerSkillRoll04", "powerSkillRoll05", "powerBaseCost04", "powerBaseCost05", "powerAdvantages04", "powerAdvantages05", "powerLimitations04", "powerLimitations05", "powerReducedEND04", "powerReducedEND05", "powerText04", "powerText05"], function(values) {
 			let destinationName = values.powerName05;
@@ -7421,6 +9288,7 @@
 		});
 	});
 	
+	
 	on("clicked:powerDown05 clicked:powerUp06", function () {
 		getAttrs(["powerName05", "powerName06", "powerType05", "powerType06", "powerEffect05", "powerEffect06", "powerDice05", "powerDice06", "powerSkillRoll05", "powerSkillRoll06", "powerBaseCost05", "powerBaseCost06", "powerAdvantages05", "powerAdvantages06", "powerLimitations05", "powerLimitations06", "powerReducedEND05", "powerReducedEND06", "powerText05", "powerText06"], function(values) {
 			let destinationName = values.powerName06;
@@ -7469,6 +9337,7 @@
 		});
 	});
 	
+	
 	on("clicked:powerDown06 clicked:powerUp07", function () {
 		getAttrs(["powerName06", "powerName07", "powerType06", "powerType07", "powerEffect06", "powerEffect07", "powerDice06", "powerDice07", "powerSkillRoll06", "powerSkillRoll07", "powerBaseCost06", "powerBaseCost07", "powerAdvantages06", "powerAdvantages07", "powerLimitations06", "powerLimitations07", "powerReducedEND06", "powerReducedEND07", "powerText06", "powerText07"], function(values) {
 			let destinationName = values.powerName07;
@@ -7517,6 +9386,7 @@
 		});
 	});
 	
+	
 	on("clicked:powerDown07 clicked:powerUp08", function () {
 		getAttrs(["powerName07", "powerName08", "powerType07", "powerType08", "powerEffect07", "powerEffect08", "powerDice07", "powerDice08", "powerSkillRoll07", "powerSkillRoll08", "powerBaseCost07", "powerBaseCost08", "powerAdvantages07", "powerAdvantages08", "powerLimitations07", "powerLimitations08", "powerReducedEND07", "powerReducedEND08", "powerText07", "powerText08"], function(values) {
 			let destinationName = values.powerName08;
@@ -7565,6 +9435,7 @@
 		});
 	});
 	
+	
 	on("clicked:powerDown08 clicked:powerUp09", function () {
 		getAttrs(["powerName08", "powerName09", "powerType08", "powerType09", "powerEffect08", "powerEffect09", "powerDice08", "powerDice09", "powerSkillRoll08", "powerSkillRoll09", "powerBaseCost08", "powerBaseCost09", "powerAdvantages08", "powerAdvantages09", "powerLimitations08", "powerLimitations09", "powerReducedEND08", "powerReducedEND09", "powerText08", "powerText09"], function(values) {
 			let destinationName = values.powerName09;
@@ -7595,8 +9466,8 @@
 				"powerType08":destinationType,
 				"powerEffect09":sourceEffect,
 				"powerEffect08":destinationEffect,
-				"powerDice08":sourceDice,
-				"powerDice09":destinationDice,
+				"powerDice09":sourceDice,
+				"powerDice08":destinationDice,
 				"powerSkillRoll09":sourceSkillRoll,
 				"powerSkillRoll08":destinationSkillRoll,
 				"powerBaseCost09":sourceBaseCost,
@@ -7644,8 +9515,8 @@
 				"powerType09":destinationType,
 				"powerEffect10":sourceEffect,
 				"powerEffect09":destinationEffect,
-				"powerDice09":sourceDice,
-				"powerDice10":destinationDice,
+				"powerDice10":sourceDice,
+				"powerDice09":destinationDice,
 				"powerSkillRoll10":sourceSkillRoll,
 				"powerSkillRoll09":destinationSkillRoll,
 				"powerBaseCost10":sourceBaseCost,
@@ -7662,55 +9533,399 @@
 		});
 	});
 	
-	on("clicked:powerDown10 clicked:powerUp01", function () {
-		getAttrs(["powerName10", "powerName01", "powerType10", "powerType01", "powerEffect10", "powerEffect01", "powerDice10", "powerDice01", "powerSkillRoll10", "powerSkillRoll01", "powerBaseCost10", "powerBaseCost01", "powerAdvantages10", "powerAdvantages01", "powerLimitations10", "powerLimitations01", "powerReducedEND10", "powerReducedEND01", "powerText10", "powerText01"], function(values) {
-			let destinationName = values.powerName01;
+	
+	on("clicked:powerDown10 clicked:powerUp11", function () {
+		getAttrs(["powerName10", "powerName11", "powerType10", "powerType11", "powerEffect10", "powerEffect11", "powerDice10", "powerDice11", "powerSkillRoll10", "powerSkillRoll11", "powerBaseCost10", "powerBaseCost11", "powerAdvantages10", "powerAdvantages11", "powerLimitations10", "powerLimitations11", "powerReducedEND10", "powerReducedEND11", "powerText10", "powerText11"], function(values) {
+			let destinationName = values.powerName11;
 			let sourceName = values.powerName10;
-			let destinationType = values.powerType01;
+			let destinationType = values.powerType11;
 			let sourceType = values.powerType10;
-			let destinationEffect = values.powerEffect01;
+			let destinationEffect = values.powerEffect11;
 			let sourceEffect = values.powerEffect10;
-			let destinationDice = values.powerDice01;
+			let destinationDice = values.powerDice11;
 			let sourceDice = values.powerDice10;
-			let destinationSkillRoll = values.powerSkillRoll01;
+			let destinationSkillRoll = values.powerSkillRoll11;
 			let sourceSkillRoll = values.powerSkillRoll10;
-			let destinationBaseCost = values.powerBaseCost01;
+			let destinationBaseCost = values.powerBaseCost11;
 			let sourceBaseCost = values.powerBaseCost10;
-			let destinationAdvantages = values.powerAdvantages01;
+			let destinationAdvantages = values.powerAdvantages11;
 			let sourceAdvantages = values.powerAdvantages10;
-			let destinationLimitations = values.powerLimitations01;
+			let destinationLimitations = values.powerLimitations11;
 			let sourceLimitations = values.powerLimitations10;
-			let destinationReducedEND = values.powerReducedEND01;
+			let destinationReducedEND = values.powerReducedEND11;
 			let sourceReducedEND = values.powerReducedEND10;
-			let destinationText = values.powerText01;
+			let destinationText = values.powerText11;
 			let sourceText = values.powerText10;
 						
 			setAttrs({
-				"powerName01":sourceName,
+				"powerName11":sourceName,
 				"powerName10":destinationName,
-				"powerType01":sourceType,
+				"powerType11":sourceType,
 				"powerType10":destinationType,
-				"powerEffect01":sourceEffect,
+				"powerEffect11":sourceEffect,
 				"powerEffect10":destinationEffect,
-				"powerDice01":sourceDice,
+				"powerDice11":sourceDice,
 				"powerDice10":destinationDice,
-				"powerSkillRoll01":sourceSkillRoll,
+				"powerSkillRoll11":sourceSkillRoll,
 				"powerSkillRoll10":destinationSkillRoll,
-				"powerBaseCost01":sourceBaseCost,
+				"powerBaseCost11":sourceBaseCost,
 				"powerBaseCost10":destinationBaseCost,
-				"powerAdvantages01":sourceAdvantages,
+				"powerAdvantages11":sourceAdvantages,
 				"powerAdvantages10":destinationAdvantages,
-				"powerLimitations01":sourceLimitations,
+				"powerLimitations11":sourceLimitations,
 				"powerLimitations10":destinationLimitations,
-				"powerReducedEND01":sourceReducedEND,
+				"powerReducedEND11":sourceReducedEND,
 				"powerReducedEND10":destinationReducedEND,
-				"powerText01":sourceText,
+				"powerText11":sourceText,
 				"powerText10":destinationText
 			});
 		});
 	});
 	
 	
+	on("clicked:powerDown11 clicked:powerUp12", function () {
+		getAttrs(["powerName11", "powerName12", "powerType11", "powerType12", "powerEffect11", "powerEffect12", "powerDice11", "powerDice12", "powerSkillRoll11", "powerSkillRoll12", "powerBaseCost11", "powerBaseCost12", "powerAdvantages11", "powerAdvantages12", "powerLimitations11", "powerLimitations12", "powerReducedEND11", "powerReducedEND12", "powerText11", "powerText12"], function(values) {
+			let destinationName = values.powerName12;
+			let sourceName = values.powerName11;
+			let destinationType = values.powerType12;
+			let sourceType = values.powerType11;
+			let destinationEffect = values.powerEffect12;
+			let sourceEffect = values.powerEffect11;
+			let destinationDice = values.powerDice12;
+			let sourceDice = values.powerDice11;
+			let destinationSkillRoll = values.powerSkillRoll12;
+			let sourceSkillRoll = values.powerSkillRoll11;
+			let destinationBaseCost = values.powerBaseCost12;
+			let sourceBaseCost = values.powerBaseCost11;
+			let destinationAdvantages = values.powerAdvantages12;
+			let sourceAdvantages = values.powerAdvantages11;
+			let destinationLimitations = values.powerLimitations12;
+			let sourceLimitations = values.powerLimitations11;
+			let destinationReducedEND = values.powerReducedEND12;
+			let sourceReducedEND = values.powerReducedEND11;
+			let destinationText = values.powerText12;
+			let sourceText = values.powerText11;
+						
+			setAttrs({
+				"powerName12":sourceName,
+				"powerName11":destinationName,
+				"powerType12":sourceType,
+				"powerType11":destinationType,
+				"powerEffect12":sourceEffect,
+				"powerEffect11":destinationEffect,
+				"powerDice12":sourceDice,
+				"powerDice11":destinationDice,
+				"powerSkillRoll12":sourceSkillRoll,
+				"powerSkillRoll11":destinationSkillRoll,
+				"powerBaseCost12":sourceBaseCost,
+				"powerBaseCost11":destinationBaseCost,
+				"powerAdvantages12":sourceAdvantages,
+				"powerAdvantages11":destinationAdvantages,
+				"powerLimitations12":sourceLimitations,
+				"powerLimitations11":destinationLimitations,
+				"powerReducedEND12":sourceReducedEND,
+				"powerReducedEND11":destinationReducedEND,
+				"powerText12":sourceText,
+				"powerText11":destinationText
+			});
+		});
+	});
+	
+	
+	on("clicked:powerDown12 clicked:powerUp13", function () {
+		getAttrs(["powerName12", "powerName13", "powerType12", "powerType13", "powerEffect12", "powerEffect13", "powerDice12", "powerDice13", "powerSkillRoll12", "powerSkillRoll13", "powerBaseCost12", "powerBaseCost13", "powerAdvantages12", "powerAdvantages13", "powerLimitations12", "powerLimitations13", "powerReducedEND12", "powerReducedEND13", "powerText12", "powerText13"], function(values) {
+			let destinationName = values.powerName13;
+			let sourceName = values.powerName12;
+			let destinationType = values.powerType13;
+			let sourceType = values.powerType12;
+			let destinationEffect = values.powerEffect13;
+			let sourceEffect = values.powerEffect12;
+			let destinationDice = values.powerDice13;
+			let sourceDice = values.powerDice12;
+			let destinationSkillRoll = values.powerSkillRoll13;
+			let sourceSkillRoll = values.powerSkillRoll12;
+			let destinationBaseCost = values.powerBaseCost13;
+			let sourceBaseCost = values.powerBaseCost12;
+			let destinationAdvantages = values.powerAdvantages13;
+			let sourceAdvantages = values.powerAdvantages12;
+			let destinationLimitations = values.powerLimitations13;
+			let sourceLimitations = values.powerLimitations12;
+			let destinationReducedEND = values.powerReducedEND13;
+			let sourceReducedEND = values.powerReducedEND12;
+			let destinationText = values.powerText13;
+			let sourceText = values.powerText12;
+						
+			setAttrs({
+				"powerName13":sourceName,
+				"powerName12":destinationName,
+				"powerType13":sourceType,
+				"powerType12":destinationType,
+				"powerEffect13":sourceEffect,
+				"powerEffect12":destinationEffect,
+				"powerDice13":sourceDice,
+				"powerDice12":destinationDice,
+				"powerSkillRoll13":sourceSkillRoll,
+				"powerSkillRoll12":destinationSkillRoll,
+				"powerBaseCost13":sourceBaseCost,
+				"powerBaseCost12":destinationBaseCost,
+				"powerAdvantages13":sourceAdvantages,
+				"powerAdvantages12":destinationAdvantages,
+				"powerLimitations13":sourceLimitations,
+				"powerLimitations12":destinationLimitations,
+				"powerReducedEND13":sourceReducedEND,
+				"powerReducedEND12":destinationReducedEND,
+				"powerText13":sourceText,
+				"powerText12":destinationText
+			});
+		});
+	});
+	
+	
+	on("clicked:powerDown13 clicked:powerUp14", function () {
+		getAttrs(["powerName13", "powerName14", "powerType13", "powerType14", "powerEffect13", "powerEffect14", "powerDice13", "powerDice14", "powerSkillRoll13", "powerSkillRoll14", "powerBaseCost13", "powerBaseCost14", "powerAdvantages13", "powerAdvantages14", "powerLimitations13", "powerLimitations14", "powerReducedEND13", "powerReducedEND14", "powerText13", "powerText14"], function(values) {
+			let destinationName = values.powerName14;
+			let sourceName = values.powerName13;
+			let destinationType = values.powerType14;
+			let sourceType = values.powerType13;
+			let destinationEffect = values.powerEffect14;
+			let sourceEffect = values.powerEffect13;
+			let destinationDice = values.powerDice14;
+			let sourceDice = values.powerDice13;
+			let destinationSkillRoll = values.powerSkillRoll14;
+			let sourceSkillRoll = values.powerSkillRoll13;
+			let destinationBaseCost = values.powerBaseCost14;
+			let sourceBaseCost = values.powerBaseCost13;
+			let destinationAdvantages = values.powerAdvantages14;
+			let sourceAdvantages = values.powerAdvantages13;
+			let destinationLimitations = values.powerLimitations14;
+			let sourceLimitations = values.powerLimitations13;
+			let destinationReducedEND = values.powerReducedEND14;
+			let sourceReducedEND = values.powerReducedEND13;
+			let destinationText = values.powerText14;
+			let sourceText = values.powerText13;
+						
+			setAttrs({
+				"powerName14":sourceName,
+				"powerName13":destinationName,
+				"powerType14":sourceType,
+				"powerType13":destinationType,
+				"powerEffect14":sourceEffect,
+				"powerEffect13":destinationEffect,
+				"powerDice14":sourceDice,
+				"powerDice13":destinationDice,
+				"powerSkillRoll14":sourceSkillRoll,
+				"powerSkillRoll13":destinationSkillRoll,
+				"powerBaseCost14":sourceBaseCost,
+				"powerBaseCost13":destinationBaseCost,
+				"powerAdvantages14":sourceAdvantages,
+				"powerAdvantages13":destinationAdvantages,
+				"powerLimitations14":sourceLimitations,
+				"powerLimitations13":destinationLimitations,
+				"powerReducedEND14":sourceReducedEND,
+				"powerReducedEND13":destinationReducedEND,
+				"powerText14":sourceText,
+				"powerText13":destinationText
+			});
+		});
+	});
+	
+	
+	on("clicked:powerDown14 clicked:powerUp15", function () {
+		getAttrs(["powerName14", "powerName15", "powerType14", "powerType15", "powerEffect14", "powerEffect15", "powerDice14", "powerDice15", "powerSkillRoll14", "powerSkillRoll15", "powerBaseCost14", "powerBaseCost15", "powerAdvantages14", "powerAdvantages15", "powerLimitations14", "powerLimitations15", "powerReducedEND14", "powerReducedEND15", "powerText14", "powerText15"], function(values) {
+			let destinationName = values.powerName15;
+			let sourceName = values.powerName14;
+			let destinationType = values.powerType15;
+			let sourceType = values.powerType14;
+			let destinationEffect = values.powerEffect15;
+			let sourceEffect = values.powerEffect14;
+			let destinationDice = values.powerDice15;
+			let sourceDice = values.powerDice14;
+			let destinationSkillRoll = values.powerSkillRoll15;
+			let sourceSkillRoll = values.powerSkillRoll14;
+			let destinationBaseCost = values.powerBaseCost15;
+			let sourceBaseCost = values.powerBaseCost14;
+			let destinationAdvantages = values.powerAdvantages15;
+			let sourceAdvantages = values.powerAdvantages14;
+			let destinationLimitations = values.powerLimitations15;
+			let sourceLimitations = values.powerLimitations14;
+			let destinationReducedEND = values.powerReducedEND15;
+			let sourceReducedEND = values.powerReducedEND14;
+			let destinationText = values.powerText15;
+			let sourceText = values.powerText14;
+						
+			setAttrs({
+				"powerName15":sourceName,
+				"powerName14":destinationName,
+				"powerType15":sourceType,
+				"powerType14":destinationType,
+				"powerEffect15":sourceEffect,
+				"powerEffect14":destinationEffect,
+				"powerDice15":sourceDice,
+				"powerDice14":destinationDice,
+				"powerSkillRoll15":sourceSkillRoll,
+				"powerSkillRoll14":destinationSkillRoll,
+				"powerBaseCost15":sourceBaseCost,
+				"powerBaseCost14":destinationBaseCost,
+				"powerAdvantages15":sourceAdvantages,
+				"powerAdvantages14":destinationAdvantages,
+				"powerLimitations15":sourceLimitations,
+				"powerLimitations14":destinationLimitations,
+				"powerReducedEND15":sourceReducedEND,
+				"powerReducedEND14":destinationReducedEND,
+				"powerText15":sourceText,
+				"powerText14":destinationText
+			});
+		});
+	});
+	
+	
+	on("clicked:powerDown15 clicked:powerUp16", function () {
+		getAttrs(["powerName15", "powerName16", "powerType15", "powerType16", "powerEffect15", "powerEffect16", "powerDice15", "powerDice16", "powerSkillRoll15", "powerSkillRoll16", "powerBaseCost15", "powerBaseCost16", "powerAdvantages15", "powerAdvantages16", "powerLimitations15", "powerLimitations16", "powerReducedEND15", "powerReducedEND16", "powerText15", "powerText16"], function(values) {
+			let destinationName = values.powerName16;
+			let sourceName = values.powerName15;
+			let destinationType = values.powerType16;
+			let sourceType = values.powerType15;
+			let destinationEffect = values.powerEffect16;
+			let sourceEffect = values.powerEffect15;
+			let destinationDice = values.powerDice16;
+			let sourceDice = values.powerDice15;
+			let destinationSkillRoll = values.powerSkillRoll16;
+			let sourceSkillRoll = values.powerSkillRoll15;
+			let destinationBaseCost = values.powerBaseCost16;
+			let sourceBaseCost = values.powerBaseCost15;
+			let destinationAdvantages = values.powerAdvantages16;
+			let sourceAdvantages = values.powerAdvantages15;
+			let destinationLimitations = values.powerLimitations16;
+			let sourceLimitations = values.powerLimitations15;
+			let destinationReducedEND = values.powerReducedEND16;
+			let sourceReducedEND = values.powerReducedEND15;
+			let destinationText = values.powerText16;
+			let sourceText = values.powerText15;
+						
+			setAttrs({
+				"powerName16":sourceName,
+				"powerName15":destinationName,
+				"powerType16":sourceType,
+				"powerType15":destinationType,
+				"powerEffect16":sourceEffect,
+				"powerEffect15":destinationEffect,
+				"powerDice16":sourceDice,
+				"powerDice15":destinationDice,
+				"powerSkillRoll16":sourceSkillRoll,
+				"powerSkillRoll15":destinationSkillRoll,
+				"powerBaseCost16":sourceBaseCost,
+				"powerBaseCost15":destinationBaseCost,
+				"powerAdvantages16":sourceAdvantages,
+				"powerAdvantages15":destinationAdvantages,
+				"powerLimitations16":sourceLimitations,
+				"powerLimitations15":destinationLimitations,
+				"powerReducedEND16":sourceReducedEND,
+				"powerReducedEND15":destinationReducedEND,
+				"powerText16":sourceText,
+				"powerText15":destinationText
+			});
+		});
+	});
+	
+	
+	on("clicked:powerDown16 clicked:powerUp17", function () {
+		getAttrs(["powerName16", "powerName17", "powerType16", "powerType17", "powerEffect16", "powerEffect17", "powerDice16", "powerDice17", "powerSkillRoll16", "powerSkillRoll17", "powerBaseCost16", "powerBaseCost17", "powerAdvantages16", "powerAdvantages17", "powerLimitations16", "powerLimitations17", "powerReducedEND16", "powerReducedEND17", "powerText16", "powerText17"], function(values) {
+			let destinationName = values.powerName17;
+			let sourceName = values.powerName16;
+			let destinationType = values.powerType17;
+			let sourceType = values.powerType16;
+			let destinationEffect = values.powerEffect17;
+			let sourceEffect = values.powerEffect16;
+			let destinationDice = values.powerDice17;
+			let sourceDice = values.powerDice16;
+			let destinationSkillRoll = values.powerSkillRoll17;
+			let sourceSkillRoll = values.powerSkillRoll16;
+			let destinationBaseCost = values.powerBaseCost17;
+			let sourceBaseCost = values.powerBaseCost16;
+			let destinationAdvantages = values.powerAdvantages17;
+			let sourceAdvantages = values.powerAdvantages16;
+			let destinationLimitations = values.powerLimitations17;
+			let sourceLimitations = values.powerLimitations16;
+			let destinationReducedEND = values.powerReducedEND17;
+			let sourceReducedEND = values.powerReducedEND16;
+			let destinationText = values.powerText17;
+			let sourceText = values.powerText16;
+						
+			setAttrs({
+				"powerName17":sourceName,
+				"powerName16":destinationName,
+				"powerType17":sourceType,
+				"powerType16":destinationType,
+				"powerEffect17":sourceEffect,
+				"powerEffect16":destinationEffect,
+				"powerDice17":sourceDice,
+				"powerDice16":destinationDice,
+				"powerSkillRoll17":sourceSkillRoll,
+				"powerSkillRoll16":destinationSkillRoll,
+				"powerBaseCost17":sourceBaseCost,
+				"powerBaseCost16":destinationBaseCost,
+				"powerAdvantages17":sourceAdvantages,
+				"powerAdvantages16":destinationAdvantages,
+				"powerLimitations17":sourceLimitations,
+				"powerLimitations16":destinationLimitations,
+				"powerReducedEND17":sourceReducedEND,
+				"powerReducedEND16":destinationReducedEND,
+				"powerText17":sourceText,
+				"powerText16":destinationText
+			});
+		});
+	});
+	
+	
+	on("clicked:powerDown17 clicked:powerUp01", function () {
+		getAttrs(["powerName17", "powerName01", "powerType17", "powerType01", "powerEffect17", "powerEffect01", "powerDice17", "powerDice01", "powerSkillRoll17", "powerSkillRoll01", "powerBaseCost17", "powerBaseCost01", "powerAdvantages17", "powerAdvantages01", "powerLimitations17", "powerLimitations01", "powerReducedEND17", "powerReducedEND01", "powerText17", "powerText01"], function(values) {
+			let destinationName = values.powerName01;
+			let sourceName = values.powerName17;
+			let destinationType = values.powerType01;
+			let sourceType = values.powerType17;
+			let destinationEffect = values.powerEffect01;
+			let sourceEffect = values.powerEffect17;
+			let destinationDice = values.powerDice01;
+			let sourceDice = values.powerDice17;
+			let destinationSkillRoll = values.powerSkillRoll01;
+			let sourceSkillRoll = values.powerSkillRoll17;
+			let destinationBaseCost = values.powerBaseCost01;
+			let sourceBaseCost = values.powerBaseCost17;
+			let destinationAdvantages = values.powerAdvantages01;
+			let sourceAdvantages = values.powerAdvantages17;
+			let destinationLimitations = values.powerLimitations01;
+			let sourceLimitations = values.powerLimitations17;
+			let destinationReducedEND = values.powerReducedEND01;
+			let sourceReducedEND = values.powerReducedEND17;
+			let destinationText = values.powerText01;
+			let sourceText = values.powerText17;
+						
+			setAttrs({
+				"powerName01":sourceName,
+				"powerName17":destinationName,
+				"powerType01":sourceType,
+				"powerType17":destinationType,
+				"powerEffect01":sourceEffect,
+				"powerEffect17":destinationEffect,
+				"powerDice01":sourceDice,
+				"powerDice17":destinationDice,
+				"powerSkillRoll01":sourceSkillRoll,
+				"powerSkillRoll17":destinationSkillRoll,
+				"powerBaseCost01":sourceBaseCost,
+				"powerBaseCost17":destinationBaseCost,
+				"powerAdvantages01":sourceAdvantages,
+				"powerAdvantages17":destinationAdvantages,
+				"powerLimitations01":sourceLimitations,
+				"powerLimitations17":destinationLimitations,
+				"powerReducedEND01":sourceReducedEND,
+				"powerReducedEND17":destinationReducedEND,
+				"powerText01":sourceText,
+				"powerText17":destinationText
+			});
+		});
+	});
+	
+	
 	/* -------------------------------------------------- */
 	/* Functions used for skills tab                      */
 	/* -------------------------------------------------- */