<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> </div>
<div> </div>
<div> </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>
@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;
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;