pad tab contents properly

diff --git a/main.html b/main.html
index fd8573b..312ef1c 100644 (file)
--- 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>
                        <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>
                                <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>
 
                                <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>
                                                <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 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>
 
                                </div>
                        </div>
 

diff --git a/style.less b/style.less
index b78dfde..bca514e 100644 (file)
--- 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
 @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;
 
 @row-pad: 10px;
 @copyright-height: 20px;
 

@@ -74,6 +75,10 @@ body {
                padding: 0 0 0 3px;
                background: @tabtab-color;
        }
                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;
        .selected-tab, .tab {
                overflow: hidden;
                box-shadow: 1px 1px 3px #888;