From 0213302c89083fdc00737fe89ca467dbd0e29968 Mon Sep 17 00:00:00 2001
From: Fen Dweller <chemicalcrux@gmail.com>
Date: Sun, 20 May 2018 08:46:01 -0400
Subject: [PATCH] Working on css

---
 stroll.html | 46 ++++++++++++++++++++++------------------------
 style.css   | 22 +++++++++++++++++++---
 2 files changed, 41 insertions(+), 27 deletions(-)

diff --git a/stroll.html b/stroll.html
index 41e0423..f3545ba 100644
--- a/stroll.html
+++ b/stroll.html
@@ -299,24 +299,22 @@
           <div class="custom-category">
             <div class="custom-header-static">Brutality</div>
             <div>
-              <ul>
-                <li>
-                  <input autocomplete="off" type="radio" name="brutality" id="brutality-0" value="0">
-                  <label for="brutality-0">Non-fatal</label>
-                </li>
-                <li>
-                  <input autocomplete="off" type="radio" name="brutality" checked="true" id="brutality-1" value="1">
-                  <label for="brutality-1">Fatal, no gore</label>
-                </li>
-                <li>
-                  <input autocomplete="off" type="radio" name="brutality" id="brutality-2" value="2">
-                  <label for="brutality-2">Gory</label>
-                </li>
-                <li>
-                  <input autocomplete="off" type="radio" name="brutality" id="brutality-3" value="3">
-                  <label for="brutality-3">Sadistic</label>
-                </li>
-              </ul>
+              <li>
+                <input autocomplete="off" type="radio" name="brutality" id="brutality-0" value="0">
+                <label for="brutality-0">Non-fatal</label>
+              </li>
+              <li>
+                <input autocomplete="off" type="radio" name="brutality" checked="true" id="brutality-1" value="1">
+                <label for="brutality-1">Fatal, no gore</label>
+              </li>
+              <li>
+                <input autocomplete="off" type="radio" name="brutality" id="brutality-2" value="2">
+                <label for="brutality-2">Gory</label>
+              </li>
+              <li>
+                <input autocomplete="off" type="radio" name="brutality" id="brutality-3" value="3">
+                <label for="brutality-3">Sadistic</label>
+              </li>
             </div>
           </div>
 
@@ -324,20 +322,20 @@
             <div class="custom-header-static">Victims</div>
             <div>
               <li>
-                <label for="victimsHuman">Human prey (instead of anthros)</label>
                 <input autocomplete="off" type="checkbox" name="victimsHuman" id="victimsHuman" />
+                <label for="victimsHuman">Human prey (instead of anthros)</label>
               </li>
               <li>
-                <label for="military">Military</label>
                 <input autocomplete="off" type="checkbox" name="victimsMilitary" id="victimsMilitary" />
+                <label for="victimsMilitary">Military</label>
               </li>
               <li>
-                <label for="macros">Smaller macros</label>
                 <input autocomplete="off" type="checkbox" name="victimsMacros" id="victimsMacros" />
+                <label for="victimsMacros">Smaller macros</label>
               </li>
               <li>
-                <label for="micros">Micros</label>
                 <input autocomplete="off" type="checkbox" name="victimsMicros" id="victimsMicros" />
+                <label for="victimsMicros">Micros</label>
               </li>
             </div>
           </div>
@@ -346,12 +344,12 @@
             <div class="custom-header-static">Misc</div>
             <div>
               <li>
+                <input autocomplete="off" type="checkbox" checked="true" name="sameSizeVore" id="sameSizeVore"/>
                 <label class="has-tooltip" for="sameSizeVore" title="Can you eat people your own size?">Same-size predator</label>
-                <input autocomplete="off" type="checkbox" checked="true" name="sameSizeVore" />
               </li>
               <li>
+                <input autocomplete="off" type="checkbox" checked="true" name="sameSizeStomp" id="sameSizeStomp"/>
                 <label class="has-tooltip" for="sameSizeStomp" title="Can you stomp and sit on people your own size?">Same-size stomper</label>
-                <input autocomplete="off" type="checkbox" checked="true" name="sameSizeStomp" />
               </li>
               <li>
                 <label for="footType">Foot type</label>
diff --git a/style.css b/style.css
index 5a7fd26..5a53f40 100644
--- a/style.css
+++ b/style.css
@@ -299,9 +299,25 @@ body.dark input[type="checkbox"]:checked+
   width: 500px;
 }
 
-.flex-outer label,
-.flex-outer > div > div > li > label {
-  flex: 0 0 200px;
+.flex-outer label {
+  flex: 1 1 200px;
+}
+
+.flex-outer input[type="radio"],
+.flex-outer input[type="checkbox"] {
+  display: none;
+}
+
+.flex-outer input[type="radio"] + label:not(.custom-header),
+.flex-outer input[type="checkbox"] + label:not(.custom-header) {
+  color: #888;
+  background: #311;
+}
+
+.flex-outer input[type="radio"]:checked + label:not(.custom-header),
+.flex-outer input[type="checkbox"]:checked + label:not(.custom-header) {
+  color: #fff;
+  background: #131;
 }
 
 .flex-outer > li > label + *,