getting ready to do some more UI

index.html

@@ -18,7 +18,7 @@
   <div class="dialog">
     <div class="header">
       <div class="title">
-        Display Properties
+        Windows 98 Example
       </div>
 
       <div class="controls">
@@ -26,9 +26,28 @@
       </div>
     </div>
     <div class="body">
-      <p>Hello, world!</p>
+      <section>This is an example window with some controls.</section>
 
-      <p><button style="width: 75px; height: 23px"><u>C</u>lose</button></p>
+      <fieldset>
+        <legend>I think it's</legend>
+        <input type="radio" name="answer" value="cool">
+        <label for="male">Cool</label>
+        <input type="radio" name="answer" value="meh">
+        <label for="female">Meh</label>
+
+        <label for="reason">Reason:</label>
+        <select>
+          <option>Nostalgia</option>
+          <option>It looks sharp</option>
+          <option>It's confusing</option>
+          <option>It looks dated</option>
+        </select>
+      </fieldset>
+
+      <section class="align-right">
+        <button>OK</button>
+        <button>Cancel</button>
+      </section>
     </div>
   </div>
 </body>

style.css

@@ -38,6 +38,9 @@ button {
   margin: 1px;
   background: var(--surface);
   box-shadow: var(--border-raised-outer), var(--border-raised-inner);
+
+  min-width: 73px;
+  min-height: 21px;
 }
 
 button:active {
@@ -46,13 +49,12 @@ button:active {
 
 button:focus {
   outline: 1px dotted #000000;
-  outline-offset: -3px;
+  outline-offset: -3.5px;
 }
 
 .dialog {
   box-shadow: var(--border-raised-outer), var(--border-raised-inner);
   background: var(--surface);
-  min-width: calc(188 * var(--dlu));
   padding: 1px;
 }
 
@@ -77,9 +79,8 @@ button:focus {
 }
 
 .dialog .header .controls button {
-  /* I don't love these */
+  min-width: 14px;
-  width: 14px;
+  min-height: 12px;
-  height: 12px;
 }
 
 .dialog .header .controls button:focus {
@@ -106,22 +107,22 @@ button:focus {
 }
 
 .dialog .body {
-  margin: 8px;
+  margin: 12px 8px 8px;
+}
+
+.dialog .body > * + * {
+  margin-top: 8px;
+}
+
+section.align-right {
+  text-align: right;
+}
+
+section button + button {
+  margin-left: 4px;
 }
 
 :disabled {
   color: var(--button-shadow);
   text-shadow: 1px 1px 0 var(--button-highlight);
 }
-
-fieldset {
-  border: none;
-}
-
-fieldset > * {
-  margin-right: calc(4 * var(--dlu));
-}
-
-fieldset > *:last-child {
-  margin: 0;
-}