- body {
- background: #eef;
- color: black;
- font: 14px Verdana, Arial, free-sans, sans-serif;
- }
- #boarder {
- margin: 10px;
- padding: 15px;
- background: #f5f5ff;
- float: left;
- border-radius: 3px;
- box-shadow: inset 1px 1px 4px #888;
- overflow: hidden;
- }
- #board {
- position: relative;
- height: 410px;
- width: 358px;
- }
- #right {
- float: left;
- width: 250px;
- }
- h1 {
- color: #55f;
- margin: 4px 0 0 0;
- text-align: center;
- }
- #subhead {
- margin-bottom: 10px;
- text-align: center;
- }
- .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 {
- height: 180px;
- padding: 5px;
- box-shadow: 1px 1px 3px #888;
- background: #ddf;
- border-radius: 3px;
- overflow: auto;
- margin-bottom: 0;
- }
- #definition_credit {
- margin-top: 2px;
- font-size: 12px;
- }
- #copyright {
- font-size: 85%;
- padding: 0 0 15px 15px;
- }