Improved layout of newguy

newguy.html

@@ -23,6 +23,7 @@ input, button { display: inline; }
     <span>Progress Quest - New Character</span>
   </div> 
 
+  <div class="client">
   <div class="hbox">
     Name
     <input id="Name">
@@ -35,11 +36,13 @@ input, button { display: inline; }
       <legend>Race</legend>
     </fieldset>
 
+    <div class=vbox>
+      <div class=hbox>
         <fieldset class="vbox groupbox" id="classes">
           <legend>Class</legend>
         </fieldset>
         
-    <fieldset class="vbox groupbox">
+        <fieldset class="vbox groupbox" id="stats">
           <legend>Stats</legend>
           
           <table>
@@ -57,19 +60,25 @@ input, button { display: inline; }
           <br>
           <br>
           <br>
+          <br>
+          <br>
           
-      <button id="Reroll">Roll</button>
+          <center>
+            <button id="Reroll">Roll</button> <br>
             <button id="Unroll" disabled>Unroll</button>
+          </center>
+          <br>
           
         </fieldset>
-
       </div>
       
-  <div class=hbox style="text-align:right">
-    <button id=Sold type="submit">Sold!</button>
+      <div class=hbox style="text-align:right;padding-top:15px">
+        <button id=Sold>Sold!</button>
         <button id=Cancel>Cancel</button>
       </div>
-
+    </div>
+  </div>
+  </div>
 </div>
 
 </body>

pq.css

@@ -172,10 +172,6 @@ div.progress-container:hover div.hint {
   width: 820px; 
 }
 
-#newguy.window { 
-  width: 580px; 
-}
-
 body { 
   background: url(back.jpg) no-repeat;
   background-size: 100% 100%;
@@ -202,3 +198,33 @@ div.scroll > table {
   background-color: yellow;
 }
 
+/* New guy form TODO: move this */
+
+#newguy.window { 
+  width: 508px; 
+}
+
+#newguy > .client { 
+  padding: 4px;
+}
+
+#newguy > #titlebar { 
+  margin-bottom: 0;
+}
+
+#races, #classes { 
+  width: 185px;
+}
+
+#classes, #stats { 
+  height: 365px;
+}
+
+#stats { 
+  width: 109px;
+}
+
+.window#newguy .vbox button { 
+  width: 75px;
+  margin: 4px;
+}