Aarrr, we'll see who'll be top parrot on this jolly board. / /* responsive stuffs */ #board { display: flex; flex-direction: row; } #board > #left { flex-shrink: 1; } #board > #right { flex-shrink: 0; flex-basis: auto; width: 9.5em; } /* buttons, and parrot */ #board a.tile.button { appearance: button; box-sizing: border-box; margin: 0; font-weight: bold; display: inline-block; background-color: #eee; border-color: rgb(227, 227, 227); border-style: outset; border-width: 1px; border-collapse: separate; text-decoration: none; text-align: center; line-height: 3em; } #board button, #board a.tile.button { width: 3em; height: 3em; margin-right: 2px; margin-bottom: 2px; cursor: pointer; color: initial; border-radius: 5px; } #board.won button, #board.won a.tile.button { box-shadow: aquamarine 1px 1px 12px 6px; } #board.lost button, #board.lost a.tile.button { box-shadow: rgb(255, 200, 190) 0px 1px 34px 2px; } #board.draw button , #board.draw a.tile.button { box-shadow: rgb(200, 200, 200) 0px 1px 30px 8px; } #board button , #board a.tile.button { color: #888; } #board button:not([disabled]):hover, #board a.tile.button:not(.disabled):hover { border-style: ridge; box-shadow: inset -10px -10px 15px rgba(255, 255, 255, 0.5), inset 10px 10px 15px rgba(70, 70, 70, 0.12); border-radius: 5px; } #board button[disabled], #board a.tile.button.disabled { cursor: default; } #board button:not([disabled]), #board a.tile.button:not(.disabled) { color: transparent; } #board button:not([disabled]):hover , #board a.tile.button:not(.disabled):hover { color: #888; text-transform: uppercase; } #board button.highlighted, #board a.tile.button.highlighted { color: chocolate; } img#parrot { -webkit-transform: scaleX(-1); transform: scaleX(-1); padding-left: 10px; margin-right: 0.5em; } XXX XXX OXX [Okay country roads, take me home](/r/grepsuzette/pr2554/v3/games)