From 068bf94451c0e699e68331d2fea9e7e0477582a3 Mon Sep 17 00:00:00 2001
From: Fen Dweller <chemicalcrux@gmail.com>
Date: Wed, 28 Feb 2018 18:34:51 -0500
Subject: [PATCH] Smashing on the CSS some more...

---
 stroll.html |  3 ++-
 style.css   | 31 ++++++++++++++++++++++++-------
 2 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/stroll.html b/stroll.html
index cfd108c..90f0861 100644
--- a/stroll.html
+++ b/stroll.html
@@ -143,6 +143,7 @@
       <div id="custom-species">
       <button class="stat-button" id="button-dark-mode-options">Toggle Dark Mode</button>
         <p>Build your Character (leave blank for defaults)</p>
+        <p>Lengths in meters, areas in square meters, masses in kilograms</p>
         <form id="custom-species-form" name="custom-species-form">
           <ul class="flex-outer">
             <div class="custom-category">
@@ -365,7 +366,7 @@
                 </li>
                 <li>
                   <div class="custom-category-sub">
-                    <ul class="flex-outer">
+                    <ul class="flex-outer-sub">
                       <input class="custom-header-checkbox" type="checkbox" checked="true" id="lactationEnabled" name="lactationEnabled"/>
                       <label class="custom-header" for="lactationEnabled">Lactation</label>
                       <div class="reveal-if-active">
diff --git a/style.css b/style.css
index 2617e92..7acdb69 100644
--- a/style.css
+++ b/style.css
@@ -272,17 +272,34 @@ body.dark input[type="checkbox"]:checked+
   width: 500px;
 }
 
-.flex-outer > li > label,
-.flex-outer > div > div > li > label,
-.flex-outer li p {
-  flex: 1 0 120px;
-  max-width: 220px;
+.flex-outer label,
+.flex-outer > div > div > li > label {
+  flex: 1 0 150px;
 }
 
 .flex-outer > li > label + *,
-.flex-outer > div > div > li > label + *,
+.flex-outer label + *,
 .flex-inner {
-  flex: 1 0 220px;
+  flex: 1 0 200px;
+}
+
+.flex-outer-sub li,
+.flex-inner {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  width: 400px;
+}
+
+.flex-outer-sub label,
+.flex-outer-sub > div > div > li > label {
+  flex: 1 0 150px;
+}
+
+.flex-outer-sub > li > label + *,
+.flex-outer-sub label + *,
+.flex-inner {
+  flex: 1 0 200px;
 }
 
 body.light .has-tooltip {