From c7d2fc85fd2c2c198a6bf11102ed465549357114 Mon Sep 17 00:00:00 2001
From: Andrew Miner <andrewminer@mac.com>
Date: Sun, 18 Aug 2013 09:49:15 -0700
Subject: [PATCH] Finished basic styling

---
 html/css/main.css             |   3 +++
 html/images/workbench_top.png | Bin 0 -> 1012 bytes
 html/index.html               |  16 +++++++---------
 3 files changed, 10 insertions(+), 9 deletions(-)
 create mode 100755 html/images/workbench_top.png

diff --git a/html/css/main.css b/html/css/main.css
index 02331ea39..0dffa65ab 100644
--- a/html/css/main.css
+++ b/html/css/main.css
@@ -10,6 +10,9 @@ h1 img { height: 64px; width: 64px; vertical-align: bottom; }
 p { margin-left: 10px; margin-right: 10px; }
 
 #body { background: rgba(230, 230, 230, 0.90); box-shadow: 10px 10px 20px #666; margin-top: 50px; }
+#crafting_output { margin-left: 10px; width: 920px; }
+#crafting_output th { background: #f8f8f8; border-left: 1px solid #bbb; font-weight: bold; padding: 10px; }
+#crafting_output td { background: #f8f8f8; border-left: 1px solid #bbb; padding: 10px; }
 #header { background: url("../images/stone_brick_light.png"); height: 64px; }
 #header img { height: 96px; width: 96px; margin-left: -32px; margin-top: -32px; }
 #header_border { background: url("../images/stone_brick.png"); height: 32px; margin-bottom: 32px; }
diff --git a/html/images/workbench_top.png b/html/images/workbench_top.png
new file mode 100755
index 0000000000000000000000000000000000000000..60d8026c3b07e82a41a1e30599d3b14b962eb633
GIT binary patch
literal 1012
zcmV<Q0}K3#P)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F8000BKNkl<Zc-pm>
zSx*!}6h?V6F(?W+!y+oo0HZKy09gzu8NdY;gDerj7^8xWAVI}nVKCx@@kIpD7-L)@
z>Vto-o$rocal5)}226Z7Nq2R1-P2XKmM*9`w9nHN748x2@`}<zfzNGR?Nmng3oPe7
zDL~=ONULFbxLM$R?C?SFUf&7Bom3(eU5CV~ioNuByAK`9C-CFNq_DYs-Ow11c;6mh
zaPnob-}}7KE8rT~b&|DZ-tSkp4UB`B<(VFJ3gin;Y=L|d0RfB?y8PG6n*xH@A1m=T
zmoDuJEfDrRQC%tmKUby%2;k!b0t~+X;GFPoF3X#lGXn3|X1j%ti+uviT~Hz*z#(9_
zqvHFADQ~PJo~1L(cxSD^`v8CIUv4ZH^n2)XN+1RV?q_1+<Bb3we0_A@CxG!=oow}i
zM#FLe^$`Tu-=AC*R&TTf1n?ZOj6g}zUYTkLPJ#9GSrZ6Bx1J6NxE^V%k@Dr?CIJoO
zJ(la>0PUc6wE*C{AOh3<4LJqyGJ8M^aC|9%YYEPGatL6ZFiCi~_qch0N^9wEBY-d0
z$<$jHF~RYi<yTsc1QHJ-$Oi}@VL4ku1^B=gup6a-9)d6d_80_^1G^GH1I%J{EkFRk
z@}Z^*!JZ9+%~is+wrT-&bP{R-NkTmYTtq0Kvz%Y%oCTe6Uk|W+=K`7JaS3oy0{Nz)
z4o)$bKvmg+`~o`oe-S_;U>b4=!0V~)1&5o>#(a;!1uEAN=<<oKM0OUWx07&lX<$1E
zwE!iw03~)Kpe1Yp1V@a3fZo-f4JEzN_Lwl(P%hZB;Ofar!R#5_3o<hRjI`GXD1!hN
zH!egw7SMYD=RJb2jGYqjrMyNUu7G-x(gGZRp8yU85YT%$UL5U+1vVlG*b5E?`V!I5
zA<#+q&jNbog8;t{fpM(`>|V$#z-g#ABRvg~G`bhCw1y=iR?CfBrv<$nQ{clw%6D9Y
zfH{)c+c5>u00guI1?;ib0zjW1kOL6VyCGs40sBCr_W}$B;5|<~uD!tCE0E0gcAShy
zC8k-5c`Akk<~%C%^lBf~fqrHaR#yukI8Vg^0Z@0e*hm0$9dI2s-_CXk8*@DZ%W<p&
zJhaN8w5HVCdOjgI1+)a<`e5IOmFpjsz_C0N9Bl^#a3r$@I2_0ceNxf^iT$VaX+9<B
za<pZ)Z;s_I0ZQZ&V3}P<mxTrQ3D`fUHuldc7A@fVDb?k8H&@$6K>s$oeyfM;qryOD
iECKIb*uUwn-}yg6FE#D)LXC_70000<MNUMnLSTY3guXcd

literal 0
HcmV?d00001

diff --git a/html/index.html b/html/index.html
index b5cb0fd57..3867a8ecb 100644
--- a/html/index.html
+++ b/html/index.html
@@ -22,7 +22,7 @@
           <tr>
             <td>&nbsp;</td>
             <td>
-              <input id="recipebook_url" placeholder="load another recipebook..."></input>
+              <input id="recipebook_url" placeholder="enter a URL to load another recipe book..."></input>
               <button id="recipebook_load_button">Load</button>
             </td>
           </tr>
@@ -31,14 +31,12 @@
       </div> <!-- #recipe_books -->
 
       <div id="crafting" class="hidden">
-        <h1>Crafting</h1>
-        <select id="crafting_selector" disabled></select>
-        <div id="crafting_output" class="hidden">
-          <p>You'll need:</p>
-          <ul id="missing_materials"></ul>
-          <p>You'll get:</p>
-          <ul id="leftover_materials"></ul>
-        </div>
+        <h1><img src="images/workbench_top.png"> Crafting</h1>
+        <p>Choose a recipe: <select id="crafting_selector" disabled></select></p>
+        <table id="crafting_output" class="hidden" cellpadding="0" cellspacing="0">
+          <tr><th width="50%">You'll need:</th><th>You'll get:</th></tr>
+          <tr><td id="missing_materials">&nbsp;</td><td id="leftover_materials"></td></tr>
+        </table>
         <div id="crafting_error" class="error"></div>
       </div> <!-- #crafting -->
     </div> <!-- .container_12 -->