From a47a1d5f74374bb2945068a70f1a3987073209e6 Mon Sep 17 00:00:00 2001
From: Jason Woofenden <jason@jasonwoof.com>
Date: Wed, 20 Feb 2013 22:22:23 -0500
Subject: [PATCH] pad tab contents properly

---
 main.html  |   21 ++++++++++++---------
 style.less |    5 +++++
 2 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/main.html b/main.html
index fd8573b..312ef1c 100644
--- a/main.html
+++ b/main.html
@@ -39,19 +39,21 @@ cat style.css
 			<div id="tabs">
 				<div id="instructions" class="selected-tab" style="height: 150px">
 					<div class="tabtab">Instructions</div>
-					<ol>
-						<li>Click letter tiles to make a word (they have to touch).</li>
-						<li>Click the last letter tile again.</li>
-					</ol>
+					<div class="tabbody">
+						<div style="margin-left: 20px; text-indent: -20px"><strong>1.</strong> Click letter tiles to make a word (they have to touch).</div>
+						<div style="margin-left: 20px; text-indent: -20px"><strong>2.</strong> Click the last letter tile again.</div>
+					</div>
 				</div>
 				<div id="definition" class="tab" style="height: 20px">
 					<div class="tabtab">Definition</div>
-					<div id="definition_body">When you make a word, a definition should appear here.</div>
+					<div id="definition_body" class="tabbody">
+						When you make a word, a definition should appear here.
+					</div>
 				</div>
 
 				<div id="logtab" class="tab" style="height: 20px">
 					<div class="tabtab">log</div>
-					<div id="log">
+					<div id="log" class="tabbody">
 						<div>&nbsp;</div>
 						<div>&nbsp;</div>
 						<div>&nbsp;</div>
@@ -62,10 +64,11 @@ cat style.css
 
 				<div id="restart" class="tab" style="height: 20px">
 					<div class="tabtab">New Game</div>
+					<div class="tabbody">
+						<p class="warning">Warning: There's no undo! This will clear your score and reset the board.</p>
 
-					<p class="warning">Warning: There's no undo! This will clear your score and reset the board.</p>
-
-					<p><a id="start-over" href="#" class="button">New Game</a></p>
+						<p><a id="start-over" href="#" class="button">New Game</a></p>
+					</div>
 				</div>
 			</div>
 
diff --git a/style.less b/style.less
index b78dfde..bca514e 100644
--- a/style.less
+++ b/style.less
@@ -8,6 +8,7 @@
 @tabs-top: 120px;
 @tabtab-height: 20px; // also in main.coffee
 @tab-height: 150px; // also in main.coffee
+@tab-pad: 5px;
 @row-pad: 10px;
 @copyright-height: 20px;
 
@@ -74,6 +75,10 @@ body {
 		padding: 0 0 0 3px;
 		background: @tabtab-color;
 	}
+	.tabbody {
+		height: @tab-height - @tabtab-height - @tab-pad * 2;
+		padding: (@tab-pad - 1) (@tab-pad - 1) @tab-pad (@tab-pad + 1);
+	}
 	.selected-tab, .tab {
 		overflow: hidden;
 		box-shadow: 1px 1px 3px #888;
-- 
1.7.10.4