diff --git a/AGE System/AGE System.css b/AGE System/AGE System.css
index d3b08a7cdf..3daf16aa07 100644
--- a/AGE System/AGE System.css	
+++ b/AGE System/AGE System.css	
@@ -1551,6 +1551,14 @@ input.sheet-rainbow-color-checkbox:checked ~ .sheet-page .sheet-section-name  {
                 background-image: radial-gradient(circle at bottom left, mediumvioletred, firebrick, darkorange, darkkhaki, forestgreen, blue, darkviolet);
 }
 
+.sheet-rolltemplate-age-roller .sheet-age-roller-title.sheet-age-roller-color-trans,
+input.sheet-trans-color-checkbox:checked ~ .sheet-tab-button:checked + span,
+input.sheet-trans-color-checkbox:checked ~ .sheet-tab-button.sheet-tab5:checked + span + span,
+input.sheet-trans-color-checkbox:checked ~ .sheet-tab-button.sheet-tab5:checked + span + span + span,
+input.sheet-trans-color-checkbox:checked ~ .sheet-page .sheet-section-name  { 
+                background-image: radial-gradient(circle at top left, #55cdfc, #f7a8b8, #55cdfc);
+}
+
 .sheet-rolltemplate-age-roller .sheet-age-roller-title.sheet-age-roller-color-green,
 input.sheet-green-color-checkbox:checked ~ .sheet-tab-button:checked + span,
 input.sheet-green-color-checkbox:checked ~ .sheet-tab-button.sheet-tab5:checked + span + span,
@@ -1723,6 +1731,17 @@ input.sheet-rainbow-color-checkbox:checked ~ .sheet-page .sheet-spell-container
                 color: blueviolet;
 }
 
+.sheet-rolltemplate-age-roller .sheet-die-face-drama.sheet-color-trans,
+input.sheet-trans-color-checkbox:checked ~ .sheet-page .repcontrol .repcontrol_edit:after,
+input.sheet-trans-color-checkbox:checked ~ .sheet-page .repcontrol .repcontrol_add:before,
+input.sheet-trans-color-checkbox:checked ~ button[type=roll].sheet-floating-dice-roller::before,
+input.sheet-trans-color-checkbox:checked ~ .sheet-page .sheet-attack-container button[type=roll]::before,
+input.sheet-trans-color-checkbox:checked ~ .sheet-page .sheet-spell-short-container button[type=roll]::before,
+input.sheet-trans-color-checkbox:checked ~ .sheet-page .sheet-focus-container button[type=roll]::before,
+input.sheet-trans-color-checkbox:checked ~ .sheet-page .sheet-spell-container button[type=roll]::before {
+                color: #f7a8b8;
+}
+
 .sheet-rolltemplate-age-roller .sheet-die-face-drama.sheet-color-dragon,
 input.sheet-dragon-color-checkbox:checked ~ .sheet-page .repcontrol .repcontrol_edit:after,
 input.sheet-dragon-color-checkbox:checked ~ .sheet-page .repcontrol .repcontrol_add:before,
@@ -2020,4 +2039,5 @@ input.sheet-ammo-col-checkbox:checked ~ .sheet-page .sheet-attack-container .she
 .sheet-page select.sheet-color-select option[value=green] { background-color: white; color: #1d8514; font-weight: bold; }
 .sheet-page select.sheet-color-select option[value=rainbow] { background-color: white; color: blueviolet; font-weight: bold; }
 .sheet-page select.sheet-color-select option[value=dragon] { background-color: white; color: darkred; font-weight: bold; }
+.sheet-page select.sheet-color-select option[value=trans] { background-color: white; color: pink; font-weight: bold; }
 
diff --git a/AGE System/AGE System.html b/AGE System/AGE System.html
index 03c4e04b42..9f9fbbea25 100644
--- a/AGE System/AGE System.html	
+++ b/AGE System/AGE System.html	
@@ -104,9 +104,9 @@
                         <span data-i18n="char-name-u">CHARACTER NAME</span>
                 </div>
 		<div class="header-info">
-			<div class="top dragon-age-selected">
+			<div class="top dragon-age-selected fantasy-age-selected titansgrave-selected">
 				<div class="info-container">
-					<select class="character class" name="attr_class" style="width: 124px;">
+					<select class="character class" name="attr_class" style="width: 96px;">
 						<option value="Mage" data-i18n="mage">Mage</option>
 						<option value="Rogue" data-i18n="rogue">Rogue</option>
 						<option value="Warrior" data-i18n="warrior">Warrior</option>
@@ -118,33 +118,15 @@
 					<span data-i18n="level-u">LEVEL</span>
 				</div>
 				<div class="info-container">
-						<input type="text" name="attr_race" style="width: 160px;">
+						<input type="text" name="attr_race" style="width: 120px;">
 						<span data-i18n="race-u">RACE</span>
 				</div>
 				<div class="info-container">
-					<input type="text" name="attr_background" style="width: 160px;">
-					<span data-i18n="background-u">BACKGROUND</span>
-				</div>
-			</div>
-			<div class="top fantasy-age-selected titansgrave-selected">
-				<div class="info-container">
-					<select class="character class" name="attr_class" style="width: 124px;">
-						<option value="Mage" data-i18n="mage">Mage</option>
-						<option value="Rogue" data-i18n="rogue">Rogue</option>
-						<option value="Warrior" data-i18n="warrior">Warrior</option>
-					</select>
-					<span data-i18n="class-u">CLASS</span>
-				</div>
-				<div class="info-container">
-					<input type="number" class="class-level" name="attr_level" value="1" style="width: 36px;">
-					<span data-i18n="level-u">LEVEL</span>
-				</div>
-				<div class="info-container">
-						<input type="text" name="attr_social-class" style="width: 160px;">
+						<input type="text" name="attr_social-class" style="width: 108px;">
 						<span data-i18n="social-class-u">SOCIAL CLASS</span>
 				</div>
 				<div class="info-container">
-					<input type="text" name="attr_background" style="width: 160px;">
+					<input type="text" name="attr_background" style="width: 120px;">
 					<span data-i18n="background-u">BACKGROUND</span>
 				</div>
 			</div>
@@ -1276,9 +1258,9 @@
                         <span data-i18n="char-name-u">CHARACTER NAME</span>
                 </div>
 		<div class="header-info">
-			<div class="top dragon-age-selected">
+			<div class="top dragon-age-selected fantasy-age-selected titansgrave-selected">
 				<div class="info-container">
-					<select class="character class" name="attr_class" style="width: 124px;">
+					<select class="character class" name="attr_class" style="width: 96px;">
 						<option value="Mage" data-i18n="mage">Mage</option>
 						<option value="Rogue" data-i18n="rogue">Rogue</option>
 						<option value="Warrior" data-i18n="warrior">Warrior</option>
@@ -1290,33 +1272,15 @@
 					<span data-i18n="level-u">LEVEL</span>
 				</div>
 				<div class="info-container">
-						<input type="text" name="attr_race" style="width: 160px;">
+						<input type="text" name="attr_race" style="width: 120px;">
 						<span data-i18n="race-u">RACE</span>
 				</div>
 				<div class="info-container">
-					<input type="text" name="attr_background" style="width: 160px;">
-					<span data-i18n="background-u">BACKGROUND</span>
-				</div>
-			</div>
-			<div class="top fantasy-age-selected titansgrave-selected">
-				<div class="info-container">
-					<select class="character class" name="attr_class" style="width: 124px;">
-						<option value="Mage" data-i18n="mage">Mage</option>
-						<option value="Rogue" data-i18n="rogue">Rogue</option>
-						<option value="Warrior" data-i18n="warrior">Warrior</option>
-					</select>
-					<span data-i18n="class-u">CLASS</span>
-				</div>
-				<div class="info-container">
-					<input type="number" class="class-level" name="attr_level" value="1" style="width: 36px;">
-					<span data-i18n="level-u">LEVEL</span>
-				</div>
-				<div class="info-container">
-						<input type="text" name="attr_social-class" style="width: 160px;">
+						<input type="text" name="attr_social-class" style="width: 108px;">
 						<span data-i18n="social-class-u">SOCIAL CLASS</span>
 				</div>
 				<div class="info-container">
-					<input type="text" name="attr_background" style="width: 160px;">
+					<input type="text" name="attr_background" style="width: 120px;">
 					<span data-i18n="background-u">BACKGROUND</span>
 				</div>
 			</div>
@@ -1501,9 +1465,9 @@
                         <span data-i18n="char-name-u">CHARACTER NAME</span>
                 </div>
 		<div class="header-info">
-			<div class="top dragon-age-selected">
+			<div class="top dragon-age-selected fantasy-age-selected titansgrave-selected">
 				<div class="info-container">
-					<select class="character class" name="attr_class" style="width: 124px;">
+					<select class="character class" name="attr_class" style="width: 96px;">
 						<option value="Mage" data-i18n="mage">Mage</option>
 						<option value="Rogue" data-i18n="rogue">Rogue</option>
 						<option value="Warrior" data-i18n="warrior">Warrior</option>
@@ -1515,33 +1479,15 @@
 					<span data-i18n="level-u">LEVEL</span>
 				</div>
 				<div class="info-container">
-						<input type="text" name="attr_race" style="width: 160px;">
+						<input type="text" name="attr_race" style="width: 120px;">
 						<span data-i18n="race-u">RACE</span>
 				</div>
 				<div class="info-container">
-					<input type="text" name="attr_background" style="width: 160px;">
-					<span data-i18n="background-u">BACKGROUND</span>
-				</div>
-			</div>
-			<div class="top fantasy-age-selected titansgrave-selected">
-				<div class="info-container">
-					<select class="character class" name="attr_class" style="width: 124px;">
-						<option value="Mage" data-i18n="mage">Mage</option>
-						<option value="Rogue" data-i18n="rogue">Rogue</option>
-						<option value="Warrior" data-i18n="warrior">Warrior</option>
-					</select>
-					<span data-i18n="class-u">CLASS</span>
-				</div>
-				<div class="info-container">
-					<input type="number" class="class-level" name="attr_level" value="1" style="width: 36px;">
-					<span data-i18n="level-u">LEVEL</span>
-				</div>
-				<div class="info-container">
-						<input type="text" name="attr_social-class" style="width: 160px;">
+						<input type="text" name="attr_social-class" style="width: 108px;">
 						<span data-i18n="social-class-u">SOCIAL CLASS</span>
 				</div>
 				<div class="info-container">
-					<input type="text" name="attr_background" style="width: 160px;">
+					<input type="text" name="attr_background" style="width: 120px;">
 					<span data-i18n="background-u">BACKGROUND</span>
 				</div>
 			</div>
@@ -1921,9 +1867,9 @@
                         <span data-i18n="char-name-u">CHARACTER NAME</span>
                 </div>
 		<div class="header-info">
-			<div class="top dragon-age-selected">
+			<div class="top dragon-age-selected fantasy-age-selected titansgrave-selected">
 				<div class="info-container">
-					<select class="character class" name="attr_class" style="width: 124px;">
+					<select class="character class" name="attr_class" style="width: 96px;">
 						<option value="Mage" data-i18n="mage">Mage</option>
 						<option value="Rogue" data-i18n="rogue">Rogue</option>
 						<option value="Warrior" data-i18n="warrior">Warrior</option>
@@ -1935,33 +1881,15 @@
 					<span data-i18n="level-u">LEVEL</span>
 				</div>
 				<div class="info-container">
-						<input type="text" name="attr_race" style="width: 160px;">
+						<input type="text" name="attr_race" style="width: 120px;">
 						<span data-i18n="race-u">RACE</span>
 				</div>
 				<div class="info-container">
-					<input type="text" name="attr_background" style="width: 160px;">
-					<span data-i18n="background-u">BACKGROUND</span>
-				</div>
-			</div>
-			<div class="top fantasy-age-selected titansgrave-selected">
-				<div class="info-container">
-					<select class="character class" name="attr_class" style="width: 124px;">
-						<option value="Mage" data-i18n="mage">Mage</option>
-						<option value="Rogue" data-i18n="rogue">Rogue</option>
-						<option value="Warrior" data-i18n="warrior">Warrior</option>
-					</select>
-					<span data-i18n="class-u">CLASS</span>
-				</div>
-				<div class="info-container">
-					<input type="number" class="class-level" name="attr_level" value="1" style="width: 36px;">
-					<span data-i18n="level-u">LEVEL</span>
-				</div>
-				<div class="info-container">
-						<input type="text" name="attr_social-class" style="width: 160px;">
+						<input type="text" name="attr_social-class" style="width: 108px;">
 						<span data-i18n="social-class-u">SOCIAL CLASS</span>
 				</div>
 				<div class="info-container">
-					<input type="text" name="attr_background" style="width: 160px;">
+					<input type="text" name="attr_background" style="width: 120px;">
 					<span data-i18n="background-u">BACKGROUND</span>
 				</div>
 			</div>
@@ -2235,7 +2163,7 @@
 								<input type="number" placeholder="*" name="attr_spell-focus-bonus">
 							</div>
 							<div class="row">
-								<button class="spell-magic-buttons" type="roll" value="@{wtype}&{template:age-roller} {{name=@{char-name-option}@{spell-name}}}{{Roll=[[1d6cs>7cf<0]] [[1d6cs>7cf<0]] [[1d6cs>1cf<6]]}}{{Intelligence=+ [[@{Intelligence}]]}}{{Arcana Focus=+ [[@{spell-focus-bonus}]]}}{{TN=@{spell-tn}}}{{Spellpower=@{spell-spellpower}}}" name="roll_spell_check"></button>
+                                                                <button class="spell-magic-buttons" name="roll_spell_check" type="roll" value="@{wtype}&{template:age-roller} {{color-@{color}=1}} [[ [[1d6]] + [[1d6]] + [[1d6]] + @{spell-focus-bonus} + @{intelligence} - @{fatigue}]] {{mod=@{intelligence}}} {{ability=Intelligence}} {{extramod1=@{spell-focus-bonus}}} {{extramod1-name=Magic Arcana Focus}} {{desc=@{spell-name}}} {{fatigue=[[@{fatigue}]]}}  {{player=@{char-name-option}}} {{tn=@{spell-tn}}} {{note1=@{spell-spellpower}}} {{note1-name=Spellpower}} {{die1=$[[0]]}} {{die2=$[[1]]}} {{drama=$[[2]]}} {{total=$[[3]]}}"></button>
 							</div>
 						</div>
 					</div>
@@ -2628,9 +2556,9 @@
                         <span data-i18n="char-name-u">CHARACTER NAME</span>
                 </div>
 		<div class="header-info">
-			<div class="top dragon-age-selected">
+			<div class="top dragon-age-selected fantasy-age-selected titansgrave-selected">
 				<div class="info-container">
-					<select class="character class" name="attr_class" style="width: 124px;">
+					<select class="character class" name="attr_class" style="width: 96px;">
 						<option value="Mage" data-i18n="mage">Mage</option>
 						<option value="Rogue" data-i18n="rogue">Rogue</option>
 						<option value="Warrior" data-i18n="warrior">Warrior</option>
@@ -2642,33 +2570,15 @@
 					<span data-i18n="level-u">LEVEL</span>
 				</div>
 				<div class="info-container">
-						<input type="text" name="attr_race" style="width: 160px;">
+						<input type="text" name="attr_race" style="width: 120px;">
 						<span data-i18n="race-u">RACE</span>
 				</div>
 				<div class="info-container">
-					<input type="text" name="attr_background" style="width: 160px;">
-					<span data-i18n="background-u">BACKGROUND</span>
-				</div>
-			</div>
-			<div class="top fantasy-age-selected titansgrave-selected">
-				<div class="info-container">
-					<select class="character class" name="attr_class" style="width: 124px;">
-						<option value="Mage" data-i18n="mage">Mage</option>
-						<option value="Rogue" data-i18n="rogue">Rogue</option>
-						<option value="Warrior" data-i18n="warrior">Warrior</option>
-					</select>
-					<span data-i18n="class-u">CLASS</span>
-				</div>
-				<div class="info-container">
-					<input type="number" class="class-level" name="attr_level" value="1" style="width: 36px;">
-					<span data-i18n="level-u">LEVEL</span>
-				</div>
-				<div class="info-container">
-						<input type="text" name="attr_social-class" style="width: 160px;">
+						<input type="text" name="attr_social-class" style="width: 108px;">
 						<span data-i18n="social-class-u">SOCIAL CLASS</span>
 				</div>
 				<div class="info-container">
-					<input type="text" name="attr_background" style="width: 160px;">
+					<input type="text" name="attr_background" style="width: 120px;">
 					<span data-i18n="background-u">BACKGROUND</span>
 				</div>
 			</div>
@@ -3031,6 +2941,7 @@
                {{#color-lazarus}}<div class="sheet-age-roller-title sheet-age-roller-color-lazarus">{{#player}}{{player}}{{/player}}{{#desc}}{{desc}}{{/desc}} </div>{{/color-lazarus}}
                {{#color-rainbow}}<div class="sheet-age-roller-title sheet-age-roller-color-rainbow">{{#player}}{{player}}{{/player}}{{#desc}}{{desc}}{{/desc}} </div>{{/color-rainbow}}
                {{#color-dragon}}<div class="sheet-age-roller-title sheet-age-roller-color-dragon">{{#player}}{{player}}{{/player}}{{#desc}}{{desc}}{{/desc}} </div>{{/color-dragon}}
+               {{#color-trans}}<div class="sheet-age-roller-title sheet-age-roller-color-trans">{{#player}}{{player}}{{/player}}{{#desc}}{{desc}}{{/desc}} </div>{{/color-trans}}
 
                {{#total}}
                        <div class="sheet-age-roller-result">
@@ -3063,6 +2974,7 @@
                                {{#color-stars}} <span class="sheet-die-face sheet-die-face-drama sheet-color-stars"> {{/color-stars}}
                                {{#color-rainbow}} <span class="sheet-die-face sheet-die-face-drama sheet-color-rainbow"> {{/color-rainbow}}
                                {{#color-dragon}} <span class="sheet-die-face sheet-die-face-drama sheet-color-dragon"> {{/color-dragon}}
+                               {{#color-trans}} <span class="sheet-die-face sheet-die-face-drama sheet-color-trans"> {{/color-trans}}
 
                                       {{#rollTotal() drama 1}}a{{/rollTotal() drama 1}}
                                       {{#rollTotal() drama 2}}b{{/rollTotal() drama 2}}