Cutom close button, some other layout crap

main.css

@@ -53,16 +53,22 @@ div.progress-container:hover div.hint {
 }
 
 #main.window { 
-  width: 684px; 
+  width: 686px; 
 }
 
 #Trats, 
-#Spells, #Spells table,
 #Plots,  #Plots table,
 #Quests, #Quests table { 
   width: 200px;
 }
 
+#Izquierda, #Derecha {
+  width: 202px;
+}
+
+#Spells       { width: 200px; }
+#Spells table { width: 184px; }
+
 #Trats th,             #Trats td             { width: 145px; }
 #Trats th:first-child, #Trats td:first-child { width:  55px; }
 
@@ -86,6 +92,10 @@ tr         { height:  15px; }
 #Inventory       { width: 270px; }
 #Inventory table { width: 254px; }
 
+#Centro { 
+  width: 274px; 
+}
+
 #Equips th,             #Equips td             { width: 202px; }
 #Equips th:first-child, #Equips td:first-child { width:  70px; }
 
@@ -94,7 +104,7 @@ tr         { height:  15px; }
 }
 
 #Spells .value { 
- width: 15ex;
+ width: 12ex;
 }
 
 #Inventory .value {
@@ -108,11 +118,3 @@ tr         { height:  15px; }
 #Quests td, #Plots td { 
   padding-left: 0;
 }
- 
-#Izquierda, #Derecha {
-  width: 202px;
-}
-
-#Centro {
-  width: 274px;
-}

main.html

@@ -16,7 +16,7 @@
 <div id="titlebar">
   <img src="swords.gif">
   <span>Progress Quest</span>
-  <button id="quit">X</button>
+  <a id="quit"><div>X</div></a>
 </div> 
 
 <script src="jquery.js"></script>

main.js

@@ -1,17 +1,18 @@
 // Copyright (c)2002-2010 Eric Fredricksen <e@fredricksen.net> all rights reserved
 
 // Before launch
-// TODO: Finalize borders in sections of main
-// TODO: Test in all browsers
-// TODO: Get better ProgrOS screenshot with just PQ
+// TODO: Test and get working in IE
 
 // After launch
+// TODO: Get fully operational in Opera
 // TODO: Online leader board
 // TODO: Server side saves
 // TODO: Active controls on fake Xp screen
 // TODO: Refactor logic to run with visible interface as a layer on top
 // TODO: Charsheet in some more pleasing delivery method
 // TODO: Use a cookie rather than a fragment to choose char?
+// TODO: Line up things on main.html perfectly
+// TODO: Finalize borders in sections of main
 
 var game = {};
 var lasttick, timerid;

progros.css

@@ -46,7 +46,7 @@ table { border-collapse: collapse; border-spacing: 0; }
 }
 
 td, th, .label, tr input, #titlebar, div { 
-  font-family: Helvetica, sans-serif;
+  font-family: Tahoma, Helvetica, sans-serif;
   font-size: 8pt;
 }
 
@@ -84,8 +84,37 @@ th:first-child {
   float: right;
 }
 
+#quit {
+  float: right;
+  border: solid 1px white;
+  border-color: white grey grey white;
+  height: 15px;
+  text-align: center;
+  background-color: #e7e7e7;
+  color: black;
+  margin: 2px;
+  padding: 1px 3px 1px 3px;
+  cursor: pointer;
+  
+  position: relative;
+  display: table;
+}
+
+/* http://www.jakpsatweb.cz/css/css-vertical-center-solution.html */
+
+#quit div {
+  display: table-cell;
+  vertical-align: middle;
+  width: 100%
+}
+
+#quit:active {
+  border-color: #e7e7e7;
+  padding: 2px 2px 0px 4px;
+}
+
 .window { 
-  background-color: #eee; 
+  background-color: #e7e7e7; 
   border: outset 2px silver;
   padding: 2px;
   text-align: left;

roster.html

@@ -15,8 +15,8 @@
   border: solid 2px #ccccee;
 }
 .brag td {
-  font: 9pt Helvetica, sans-serif;
-  vertical-align: top;
+  font-size: 9pt;
+  font-family: Tahoma, Helvetica, sans-serif;
 }
 div.rc {
   font-size: 9pt;