@board-inner-width: 358px; @board-inner-height: 410px; @board-pad: 15px; // also in main.coffee @board-width: @board-inner-width + @board-pad * 2; @board-height: @board-inner-height + @board-pad * 2; @column-pad: 10px; @right-width: 250px; @tabs-top: 120px; @tabtab-height: 20px; // also in main.coffee @tab-height: 150px; // also in main.coffee @row-pad: 10px; @copyright-height: 20px; @tab-color: #ddf; @tabtab-color: darken(@tab-color, 3%); body { background: #eef; color: black; font: 14px Verdana, Arial, free-sans, sans-serif; margin: 0; padding: 0; } #centerer { margin: auto auto; width: @board-width + @column-pad + @right-width; height: @board-height; position: relative; } #boarder { background: #f5f5ff; position: absolute; top: 0px; left: 0px; width: @board-width; height: @board-height; border-radius: 3px; box-shadow: inset 1px 1px 4px #888; overflow: hidden; } #board { position: absolute; top: @board-pad; left: @board-pad; width: @board-inner-width; height: @board-inner-height; } #right { position: absolute; top: 0px; left: @board-width + @column-pad; width: @right-width; height: @board-height; h1 { font-size: 28px; color: #55f; margin: 0; text-align: center; } #subhead { margin-bottom: 10px; text-align: center; } #tabs { position: absolute; top: @tabs-top; height: @tabtab-height * 4 + @tab-height; } .tab + .tab, .selected-tab + .tab, .tab + .selected-tab { margin-top: 5px; } .tabtab { height: @tabtab-height; padding: 0 0 0 3px; background: @tabtab-color; } .selected-tab, .tab { overflow: hidden; box-shadow: 1px 1px 3px #888; background: @tab-color; border-radius: 3px; } .selected-tab { .tabtab:before { content: "▼ "; } } .tab { .tabtab:before { content: "▶ "; } .tabtab { cursor: pointer; } .tabtab:hover { color: darken(@tab-color, 50%); } .tabtab:hover:before { content: "▼ "; } } #copyright { position: absolute; top: @board-height - @row-pad - @copyright-height; left: 0px; font-size: 85%; } } .tile { padding-top: 4px; height: 38px; width: 42px; background-color: #aaf; color: #000; font-size: 30px; display: block; position: absolute; border-radius: 13px; text-align: center; cursor: pointer; user-select: none; -khtml-user-select: none; -o-user-select: none; -moz-user-select: -moz-none; -webkit-user-select: none; box-shadow: 1px 1px 2px #666; } .tile.selected, .tile.selected_word { background-color: #ffa; box-shadow: inset 1px 1px 5px #444; } .tile.selected_word { background-color: #cfc; } #loading { position: absolute; top: 140px; right: 140px; font-size: 32px; } .head { margin-top: -4px; height: 42px; width: 42px; position: relative; border-radius: 13px; } .eye1, .eye2 { width: 6px; height: 6px; border: 2px solid #a83; border-radius: 9px; background-color: white; position: absolute; } .eye1 { top: -8px; right: -1px; width: 5px; border-width: 4px 4px 3px 4px; } .eye2 { right: -9px; top: 1px; border-width: 3px 4px 4px 2px; } .tooth1, .tooth2, .tooth3, .tooth4 { width: 6px; height: 6px; border: 2px solid #a83; background-color: white; position: absolute; } .tooth1 { top: -2px; left: 22px; width: 7px; border-width: 2px 0 2px 2px; } .tooth2 { height: 7px; top: 12px; right: -3px; border-width: 0 2px 2px 2px; } .pate { position: absolute; top: -2px; right: -3px; width: 12px; height: 12px; background: white; border: 2px solid #a83; border-radius: 0 13px 0 0; } .tooth3 { width: 7px; bottom: -3px; left: 12px; border-width: 2px 2px 2px 0; } .tooth4 { height: 7px; bottom: 11px; left: -2px; border-width: 2px 2px 0 2px; } .chin { position: absolute; bottom: -3px; left: -2px; width: 12px; height: 12px; background: white; border: 2px solid #a83; border-radius: 0 0 0 13px; } #definition { overflow: auto; } #definition_credit { margin-top: 15px; font-size: 12px; }