diff --git a/Metal Adventures/MetalAdventures.css b/Metal Adventures/MetalAdventures.css
index e747269015..63aaf47533 100644
--- a/Metal Adventures/MetalAdventures.css	
+++ b/Metal Adventures/MetalAdventures.css	
@@ -3,6 +3,7 @@
 .charsheet {
     width: 859px;
     background: url(https://i.imgur.com/VMGQkox.png);
+    font-size: 0.9rem;
 }
 
 .row {
@@ -13,7 +14,17 @@
 
 .columnFlex {
     flex-grow: 1;
-    margin: 0 1mm;
+    margin: 1px;
+}
+
+.columnFlex>label {
+    width: 250px;
+    display: inline-block;
+}
+
+.flex-left {
+    text-align: right;
+    margin-right: 0;
 }
 
 .column-header {
@@ -25,12 +36,9 @@
 
 /***** Text *******/
 
-input[type='text'] {
-    width: 30mm;
-}
-
 input[type='number'] {
-    width: 10mm;
+    width: 30px;
+    text-align: right;
 }
 
 .mf {
diff --git a/Metal Adventures/MetalAdventures.html b/Metal Adventures/MetalAdventures.html
index 4114ec5bd4..0189d86f32 100644
--- a/Metal Adventures/MetalAdventures.html	
+++ b/Metal Adventures/MetalAdventures.html	
@@ -90,13 +90,15 @@
 				<div class="columnFlex">
 					<span><input type="checkbox" name="attr_predilection_Technique" value="0">Techniques</span>
 				</div>
-				<input type="number" name="attr_Technique" value="0">
+				<div class="columnFlex flex-left">
+					<input type="number" name="attr_Technique" value="0">
+				</div>
 			</div>
 			<div class="row">
 				<div class="columnFlex">
 					<span>Acrobaties</span>
 				</div>
-				<div>
+				<div class="columnFlex flex-left">
 					<input type="number" name="attr_Acrobatie">
 					<input type="number" name="attr_Acrobatie_max" readonly>
 				</div>
@@ -105,7 +107,7 @@
 				<div class="columnFlex">
 					<span class="mf">Armes de poings</span>
 				</div>
-				<div>
+				<div class="columnFlex flex-left">
 					<input type="number" name="attr_ArmesDePoing">
 					<input type="number" name="attr_ArmesDePoing_max" readonly>
 				</div>
@@ -114,7 +116,7 @@
 				<div class="columnFlex">
 					<span class="mf">Armes d'épaule</span>
 				</div>
-				<div>
+				<div class="columnFlex flex-left">
 					<input type="number" name="attr_ArmesDEpaule">
 					<input type="number" name="attr_ArmesDEpaule_max" readonly>
 				</div>
@@ -123,7 +125,7 @@
 				<div class="columnFlex">
 					<span class="mf">[Armes embarquée]</span>
 				</div>
-				<div>
+				<div class="columnFlex flex-left">
 					<input type="number" name="attr_ArmesEmbarquee">
 					<input type="number" name="attr_ArmesEmbarquee_max" readonly>
 				</div>
@@ -132,7 +134,7 @@
 				<div class="columnFlex">
 					<span>Artisanat (<input type="text" name="attr_ArtisanatLabel">)</span>
 				</div>
-				<div>
+				<div class="columnFlex flex-left">
 					<input type="number" name="attr_Artisanat">
 					<input type="number" name="attr_Artisanat_max" readonly>
 				</div>
@@ -141,7 +143,7 @@
 				<div class="columnFlex">
 					<span class="mf">[Pilotage (<input type="text" name="attr_Pilotage1Label">)</span>
 				</div>
-				<div>
+				<div class="columnFlex flex-left">
 					<input type="number" name="attr_Pilotage1">
 					<input type="number" name="attr_Pilotage1_max" readonly>
 				</div>
@@ -150,7 +152,7 @@
 				<div class="columnFlex">
 					<span class="mf">[Pilotage (<input type="text" name="attr_Pilotage2Label">)</span>
 				</div>
-				<div>
+				<div class="columnFlex flex-left">
 					<input type="number" name="attr_Pilotage2">
 					<input type="number" name="attr_Pilotage2_max" readonly>
 				</div>
@@ -159,7 +161,7 @@
 				<div class="columnFlex">
 					<span>Technologie</span>
 				</div>
-				<div>
+				<div class="columnFlex flex-left">
 					<input type="number" name="attr_Technologie">
 					<input type="number" name="attr_Technologie_max" readonly>
 				</div>
@@ -173,14 +175,16 @@
 				<div class="columnFlex">
 					<span><input type="checkbox" name="attr_predilection_survie" value="0">Survie</span>
 				</div>
-				<input type="number" name="attr_Survie" value="0">
+				<div class="columnFlex flex-left">
+					<input type="number" name="attr_Survie" value="0">
+				</div>
 			</div>
 
 			<div class="row">
 				<div class="columnFlex">
 					<span class="mf">Armes de jet</span>
 				</div>
-				<div>
+				<div class="columnFlex flex-left">
 					<input type="number" name="attr_ArmesdeJet">
 					<input type="number" name="attr_ArmesdeJet_max" readonly>
 				</div>
@@ -189,7 +193,7 @@
 				<div class="columnFlex">
 					<span class="mf">[Armes lourdes]</span>
 				</div>
-				<div>
+				<div class="columnFlex flex-left">
 					<input type="number" name="attr_ArmesLourdes">
 					<input type="number" name="attr_ArmesLourdes_max" readonly>
 				</div>
@@ -198,7 +202,7 @@
 				<div class="columnFlex">
 					<span>Athlétisme</span>
 				</div>
-				<div>
+				<div class="columnFlex flex-left">
 					<input type="number" name="attr_Athletisme">
 					<input type="number" name="attr_Athletisme_max" readonly>
 				</div>
@@ -207,7 +211,7 @@
 				<div class="columnFlex">
 					<span>Équitation</span>
 				</div>
-				<div>
+				<div class="columnFlex flex-left">
 					<input type="number" name="attr_Equitation">
 					<input type="number" name="attr_Equitation_max" readonly>
 				</div>
@@ -216,7 +220,7 @@
 				<div class="columnFlex">
 					<span class="mf">Mêlée</span>
 				</div>
-				<div>
+				<div class="columnFlex flex-left">
 					<input type="number" name="attr_Melee">
 					<input type="number" name="attr_Melee_max" readonly>
 				</div>
@@ -225,7 +229,7 @@
 				<div class="columnFlex">
 					<span>Environement (<input type="text" name="attr_Environement1Label">)</span>
 				</div>
-				<div>
+				<div class="columnFlex flex-left">
 					<input type="number" name="attr_Environement1">
 					<input type="number" name="attr_Environement1_max" readonly>
 				</div>
@@ -234,7 +238,7 @@
 				<div class="columnFlex">
 					<span>Environement (<input type="text" name="attr_Environement2Label">)</span>
 				</div>
-				<div>
+				<div class="columnFlex flex-left">
 					<input type="number" name="attr_Environement2">
 					<input type="number" name="attr_Environement2_max" readonly>
 				</div>
@@ -243,7 +247,7 @@
 				<div class="columnFlex">
 					<span>Environement (<input type="text" name="attr_Environement3Label">)</span>
 				</div>
-				<div>
+				<div class="columnFlex flex-left">
 					<input type="number" name="attr_Environement3">
 					<input type="number" name="attr_Environement3_max" readonly>
 				</div>
@@ -256,14 +260,16 @@
 				<div class="columnFlex">
 					<span><input type="checkbox" name="attr_predilection_espionnage" value="0">Espionnage</span>
 				</div>
-				<input type="number" name="attr_Espionnage" value="0">
+				<div class="columnFlex flex-left">
+					<input type="number" name="attr_Espionnage" value="0">
+				</div>
 			</div>
 
 			<div class="row">
 				<div class="columnFlex">
 					<span>Déguisement</span>
 				</div>
-				<div>
+				<div class="columnFlex flex-left">
 					<input type="number" name="attr_Deguisement">
 					<input type="number" name="attr_Deguisement_max" readonly>
 				</div>
@@ -273,7 +279,7 @@
 				<div class="columnFlex">
 					<span>Discrétion</span>
 				</div>
-				<div>
+				<div class="columnFlex flex-left">
 					<input type="number" name="attr_Discretion">
 					<input type="number" name="attr_Discretion_max" readonly>
 				</div>
@@ -283,7 +289,7 @@
 				<div class="columnFlex">
 					<span>Empathie</span>
 				</div>
-				<div>
+				<div class="columnFlex flex-left">
 					<input type="number" name="attr_Empathie">
 					<input type="number" name="attr_Empathie_max" readonly>
 				</div>
@@ -293,7 +299,7 @@
 				<div class="columnFlex">
 					<span>[Falsification]</span>
 				</div>
-				<div>
+				<div class="columnFlex flex-left">
 					<input type="number" name="attr_Falsification">
 					<input type="number" name="attr_Falsification_max" readonly>
 				</div>
@@ -313,7 +319,7 @@
 				<div class="columnFlex">
 					<span>[Senseurs]</span>
 				</div>
-				<div>
+				<div class="columnFlex flex-left">
 					<input type="number" name="attr_Senseurs">
 					<input type="number" name="attr_Senseurs_max" readonly>
 				</div>
@@ -323,7 +329,7 @@
 				<div class="columnFlex">
 					<span>[Sys. Sécu]</span>
 				</div>
-				<div>
+				<div class="columnFlex flex-left">
 					<input type="number" name="attr_SysSecu">
 					<input type="number" name="attr_SysSecu_max" readonly>
 				</div>
@@ -333,7 +339,7 @@
 				<div class="columnFlex">
 					<span>Vigilance</span>
 				</div>
-				<div>
+				<div class="columnFlex flex-left">
 					<input type="number" name="attr_Vigilance">
 					<input type="number" name="attr_Vigilance_max" readonly>
 				</div>
@@ -349,14 +355,16 @@
 				<div class="columnFlex">
 					<span><input type="checkbox" name="attr_predilection_Science" value="0">Science</span>
 				</div>
-				<input type="number" name="attr_Science" value="0">
+				<div class="columnFlex flex-left">
+					<input type="number" name="attr_Science" value="0">
+				</div>
 			</div>
 
 			<div class="row">
 				<div class="columnFlex">
 					<span>Analyse</span>
 				</div>
-				<div>
+				<div class="columnFlex flex-left">
 					<input type="number" name="attr_Analyse">
 					<input type="number" name="attr_Analyse_max" readonly>
 				</div>
@@ -366,7 +374,7 @@
 				<div class="columnFlex">
 					<span>Arts(<input type="text" name="attr_ArtsLabel">)</span>
 				</div>
-				<div>
+				<div class="columnFlex flex-left">
 					<input type="number" name="attr_Art">
 					<input type="number" name="attr_Art_max" readonly>
 				</div>
@@ -376,7 +384,7 @@
 				<div class="columnFlex">
 					<span>Connaissance (<input type="text" name="attr_Connaissance1Label">)</span>
 				</div>
-				<div>
+				<div class="columnFlex flex-left">
 					<input type="number" name="attr_Connaissance1">
 					<input type="number" name="attr_Connaissance1_max" readonly>
 				</div>
@@ -386,7 +394,7 @@
 				<div class="columnFlex">
 					<span>Connaissance (<input type="text" name="attr_Connaissance2Label">)</span>
 				</div>
-				<div>
+				<div class="columnFlex flex-left">
 					<input type="number" name="attr_Connaissance2">
 					<input type="number" name="attr_Connaissance2_max" readonly>
 				</div>
@@ -396,7 +404,7 @@
 				<div class="columnFlex">
 					<span>Connaissance (<input type="text" name="attr_Connaissance3Label">)</span>
 				</div>
-				<div>
+				<div class="columnFlex flex-left">
 					<input type="number" name="attr_Connaissance3">
 					<input type="number" name="attr_Connaissance3_max" readonly>
 				</div>
@@ -406,7 +414,7 @@
 				<div class="columnFlex">
 					<span>[Ésotérisme]</span>
 				</div>
-				<div>
+				<div class="columnFlex flex-left">
 					<input type="number" name="attr_Esoterisme">
 					<input type="number" name="attr_Esoterisme_max" readonly>
 				</div>
@@ -416,7 +424,7 @@
 				<div class="columnFlex">
 					<span>Histoire</span>
 				</div>
-				<div>
+				<div class="columnFlex flex-left">
 					<input type="number" name="attr_Histoire">
 					<input type="number" name="attr_Histoire_max" readonly>
 				</div>
@@ -426,7 +434,7 @@
 				<div class="columnFlex">
 					<span>[Ingénierie]</span>
 				</div>
-				<div>
+				<div class="columnFlex flex-left">
 					<input type="number" name="attr_Ingenierie">
 					<input type="number" name="attr_Ingenierie_max" readonly>
 				</div>
@@ -436,7 +444,7 @@
 				<div class="columnFlex">
 					<span>[Médecine]</span>
 				</div>
-				<div>
+				<div class="columnFlex flex-left">
 					<input type="number" name="attr_Medecine">
 					<input type="number" name="attr_Medecine_max" readonly>
 				</div>
@@ -446,7 +454,7 @@
 				<div class="columnFlex">
 					<span>Navigation</span>
 				</div>
-				<div>
+				<div class="columnFlex flex-left">
 					<input type="number" name="attr_Navigation">
 					<input type="number" name="attr_Navigation_max" readonly>
 				</div>
@@ -456,7 +464,7 @@
 				<div class="columnFlex">
 					<span>[Sciences Solaires]</span>
 				</div>
-				<div>
+				<div class="columnFlex flex-left">
 					<input type="number" name="attr_SciencesSolaires">
 					<input type="number" name="attr_SciencesSolaires_max" readonly>
 				</div>
@@ -466,7 +474,7 @@
 				<div class="columnFlex">
 					<span>[Sciences Stellaires]</span>
 				</div>
-				<div>
+				<div class="columnFlex flex-left">
 					<input type="number" name="attr_SciencesStellaires">
 					<input type="number" name="attr_SciencesStellaires_max" readonly>
 				</div>
@@ -480,14 +488,16 @@
 				<div class="columnFlex">
 					<span><input type="checkbox" name="attr_predilection_Negociation" value="0">Negociation</span>
 				</div>
-				<input type="number" name="attr_Negociation" value="0">
+				<div class="columnFlex flex-left">
+					<input type="number" name="attr_Negociation" value="0">
+				</div>
 			</div>
 
 			<div class="row">
 				<div class="columnFlex">
 					<span>Baration</span>
 				</div>
-				<div class="g">
+				<div class="columnFlex flex-left g">
 					<input type="number" name="attr_Baration">
 					<input type="number" name="attr_Baration_max" readonly>
 				</div>
@@ -497,7 +507,7 @@
 				<div class="columnFlex">
 					<span>Bureaucratie</span>
 				</div>
-				<div class="g">
+				<div class="columnFlex flex-left g">
 					<input type="number" name="attr_Bureaucratie">
 					<input type="number" name="attr_Bureaucratie_max" readonly>
 				</div>
@@ -507,7 +517,7 @@
 				<div class="columnFlex">
 					<span>Comédie</span>
 				</div>
-				<div class="g">
+				<div class="columnFlex flex-left g">
 					<input type="number" name="attr_Comedie">
 					<input type="number" name="attr_Comedie_max" readonly>
 				</div>
@@ -517,7 +527,7 @@
 				<div class="columnFlex">
 					<span>Commerce</span>
 				</div>
-				<div class="g">
+				<div class="columnFlex flex-left g">
 					<input type="number" name="attr_Commerce">
 					<input type="number" name="attr_Commerce_max" readonly>
 				</div>
@@ -527,7 +537,7 @@
 				<div class="columnFlex">
 					<span>Danse</span>
 				</div>
-				<div class="g">
+				<div class="columnFlex flex-left g">
 					<input type="number" name="attr_Danse">
 					<input type="number" name="attr_Danse_max" readonly>
 				</div>
@@ -537,7 +547,7 @@
 				<div class="columnFlex">
 					<span>Éloquence</span>
 				</div>
-				<div class="g">
+				<div class="columnFlex flex-left g">
 					<input type="number" name="attr_Eloquence">
 					<input type="number" name="attr_Eloquence_max" readonly>
 				</div>
@@ -547,7 +557,7 @@
 				<div class="columnFlex">
 					<span>Étiquette</span>
 				</div>
-				<div class="g">
+				<div class="columnFlex flex-left g">
 					<input type="number" name="attr_Etiquette">
 					<input type="number" name="attr_Etiquette_max" readonly>
 				</div>
@@ -557,7 +567,7 @@
 				<div class="columnFlex">
 					<span>Jeux</span>
 				</div>
-				<div class="g">
+				<div class="columnFlex flex-left g">
 					<input type="number" name="attr_Jeux">
 					<input type="number" name="attr_Jeux_max" readonly>
 				</div>
@@ -567,7 +577,7 @@
 				<div class="columnFlex">
 					<span class="mf">Séduction</span>
 				</div>
-				<div class="g">
+				<div class="columnFlex flex-left g">
 					<input type="number" name="attr_Seduction">
 					<input type="number" name="attr_Seduction_max" readonly>
 				</div>
@@ -581,14 +591,16 @@
 				<div class="columnFlex">
 					<span><input type="checkbox" name="attr_predilection_Trempe" value="0">Trempe</span>
 				</div>
-				<input type="number" name="attr_Trempe" value="0">
+				<div class="columnFlex flex-left">
+					<input type="number" name="attr_Trempe" value="0">
+				</div>
 			</div>
 
 			<div class="row">
 				<div class="columnFlex">
 					<span>Commandement</span>
 				</div>
-				<div class="g">
+				<div class="columnFlex flex-left g">
 					<input type="number" name="attr_Commandement">
 					<input type="number" name="attr_Commandement_max" readonly>
 				</div>
@@ -598,7 +610,7 @@
 				<div class="columnFlex">
 					<span class="mf">[Démolition]</span>
 				</div>
-				<div>
+				<div class="columnFlex flex-left">
 					<input type="number" name="attr_Demolition">
 					<input type="number" name="attr_Demolition_max" readonly>
 				</div>
@@ -608,7 +620,7 @@
 				<div class="columnFlex">
 					<span class="mf">Détermination</span>
 				</div>
-				<div>
+				<div class="columnFlex flex-left">
 					<input type="number" name="attr_Determination">
 					<input type="number" name="attr_Determination_max" readonly>
 				</div>
@@ -618,7 +630,7 @@
 				<div class="columnFlex">
 					<span>Dressage</span>
 				</div>
-				<div>
+				<div class="columnFlex flex-left">
 					<input type="number" name="attr_Dressage">
 					<input type="number" name="attr_Dressage_max" readonly>
 				</div>
@@ -628,7 +640,7 @@
 				<div class="columnFlex">
 					<span>Illégalités</span>
 				</div>
-				<div class="g">
+				<div class="columnFlex flex-left g">
 					<input type="number" name="attr_Illegalites">
 					<input type="number" name="attr_Illegalites_max" readonly>
 				</div>
@@ -638,7 +650,7 @@
 				<div class="columnFlex">
 					<span class="mf">Intimidation</span>
 				</div>
-				<div class="g">
+				<div class="columnFlex flex-left g">
 					<input type="number" name="attr_Intimidation">
 					<input type="number" name="attr_Intimidation_max" readonly>
 				</div>
@@ -648,7 +660,7 @@
 				<div class="columnFlex">
 					<span>Premiers soins</span>
 				</div>
-				<div>
+				<div class="columnFlex flex-left">
 					<input type="number" name="attr_Premierssoins">
 					<input type="number" name="attr_Premierssoins_max" readonly>
 				</div>
@@ -658,7 +670,7 @@
 				<div class="columnFlex">
 					<span>Tactique</span>
 				</div>
-				<div>
+				<div class="columnFlex flex-left">
 					<input type="number" name="attr_Tactique">
 					<input type="number" name="attr_Tactique_max" readonly>
 				</div>