Use image-base windows style close box

main.html

@@ -15,8 +15,8 @@
 
 <div id="titlebar">
   <img src="swords.gif">
-  <span>Progress Quest</span>
-  <a id="quit"><div>X</div></a>
+  <span id="title">Progress Quest</span>
+  <a id="quit"><img src="closeup.png"></a>
 </div> 
 
 <script src="jquery.js"></script>

main.js

@@ -998,7 +998,7 @@ function LoadCharacter() {
     LoadGame(sheet);
   }
 
-  $("#titlebar span").text("Progress Quest - " + GameSaveName());
+  $("#title").text("Progress Quest - " + GameSaveName());
 
   if (window.location.href.indexOf("?quit#") > 0)
     $("#quit").click();  // TODO: cheesy

newguy.html

@@ -23,7 +23,7 @@ input, button { display: inline; }
   <div id="titlebar">
     <img src="swords.gif">
     <span>Progress Quest - New Character</span>
-    <button id="Cancel">X</button>
+    <a id="quit"><img src="closeup.png"></a>
   </div> 
 
   <div class="client">

newguy.js

@@ -71,7 +71,7 @@ $(document).ready(function () {
   $("#Unroll").click(UnrollClick);
   $("#RandomName").click(GenClick);
   $('#Sold').click(sold);
-  $('#Cancel').click(cancel);
+  $('#quit').click(cancel);
 
   //var caption = 'Progress Quest - New Character';
   //if (MainForm.GetHostName != '')

progros.css

@@ -86,31 +86,14 @@ th:first-child {
 
 #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;
+  background: url(closedown.png);
+  text-decoration: none;
+  border: none 0;
+  margin: 2px 2px 0 0;
 }
 
-/* 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;
+#quit:active img {
+  opacity: 0;
 }
 
 .window {