Match widths to Main.dfm, mostly

main.css

@@ -11,7 +11,6 @@ thead.mid {
 
 .listbox { 
   border: solid 1px black;
-  width: 250px;
   background-color: white;
 }
 
@@ -25,7 +24,6 @@ thead.mid {
 
 div.progress-container { 
   border: 1px solid #ccc; 
-  width: 250px; 
   margin: 2px 5px 2px 0; 
   padding: 1px; 
   background: white;
@@ -35,7 +33,6 @@ div.progress-container {
 div.progress-container > div.bar { 
   background-color: #ACE97C; 
   height: 12px;
-  width: 50%;
 }
 
 div.hint { 
@@ -43,7 +40,6 @@ div.hint {
   position: absolute;
   margin-top: 1px;
   visibility: hidden;
-  width: 250px;
   text-align: center;
   color: #060;
 }
@@ -56,6 +52,36 @@ div.progress-container:hover div.hint {
   width: 820px; 
 }
 
+#Trats, 
+#Spells, #Spells table,
+#Plots,  #Plots table,
+#Quests, #Quests table { 
+  width: 200px;
+}
+
+#ExpBar, #ExpBar .hint, 
+#PlotBar, #PlotBar .hint,
+#QuestBar, #QuestBar .hint { 
+  width: 198px;
+}
+
+#Equips,
+#Inventory, #Inventory table {
+  width: 272px;
+}
+
+#EncumBar, #EncumBar .hint { 
+  width: 270px;
+}
+
+#Trats thead th:first-child { 
+  width: 55px;
+}
+
+#Spells .value { 
+ width: 15ex;
+}
+
 #TaskBar, #TaskBar .hint { 
   width: 800px;
 }

main.html

@@ -27,10 +27,10 @@
     
     <span class="label head" >Character Sheet</span>
     
-    <table class="listbox">
+    <table class="listbox" id="Trats">
       <thead>
         <tr>
-          <th style="width:25%">Trait</th>
+          <th>Trait</th>
           <th>Value</th>
         </tr>
       </thead>
@@ -79,15 +79,15 @@
     </div>
 
     <span class="label head" >Spell Book</span>
-    <div class="scroll listbox">
+    <div id="Spells" class="scroll listbox">
       <table>
         <thead>
           <tr>
-            <th>Spell</th>
+            <th class="key">Spell</th>
-            <th style="width:10ex">Level</th>
+            <th class="value">Level</th>
           </tr>
         </thead>
-        <tbody id="Spells">
+        <tbody>
         </tbody>
       </table>
     </div>
@@ -96,8 +96,8 @@
   <div class="vbox">
     <span class="label head">Equipment</span>
 
-    <table class="listbox">
+    <table id="Equips" class="listbox">
-      <tbody id="Equips">
+      <tbody>
         <tr><td style="width:12ex">Weapon</td><td></td></tr>
         <tr><td>Shield</td><td></tr>
         <tr><td>Helm<td></tr>
@@ -113,7 +113,7 @@
     </table>
 
     <span class="label head" >Inventory</span>
-    <div class="scroll listbox">
+    <div id="Inventory" class="scroll listbox">
       <table >
         <thead>
           <tr>
@@ -121,7 +121,7 @@
             <th style="width:6ex">Qty</th>
           </tr>
         </thead>
-        <tbody id="Inventory">
+        <tbody>
           <tr><td>Gold<td>0</tr>
         </tbody>
       </table>
@@ -138,9 +138,9 @@
   <div class="vbox">
 
     <span class="label head">Plot Development</span>
-    <div class="scroll listbox">
+    <div id="Plots" class="scroll listbox">
       <table>
-        <tbody id="Plots">
+        <tbody>
         </tbody>
       </table>
     </div>
@@ -151,9 +151,9 @@
     </div>
 
     <span class="label head">Quests</span>
-    <div class="scroll listbox">
+    <div id="Quests" class="scroll listbox">
       <table>
-        <tbody id="Quests">
+        <tbody>
         </tbody>
       </table>
     </div>

main.js

@@ -452,7 +452,8 @@ function ProgressBar(id) {
 
 function ListBox(id, columns, fixedkeys) {
   this.id = id;
-  this.box = $("#"+ id);
+  //this.box = $("#"+ id);
+  this.box = $("tbody#_, #_ tbody".replace(/_/g, id));
   this.columns = columns;
   this.fixedkeys = fixedkeys;
 
@@ -1080,6 +1081,9 @@ $(function() {
     }
   });
 
+  cheat("Break", function () {
+    debugger;
+  });
   cheat("Equip", function () {
     WinEquip();
   });

progros.css

@@ -46,7 +46,7 @@ table { border-collapse: collapse; border-spacing: 0; }
 }
 
 td, th, .label, tr input, #titlebar, div { 
-  font-family: Helvetica;
+  font-family: Helvetica, sans-serif;
   font-size: 8pt;
 }