Working on css

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>

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 + *,