+
+ .button {
+ display: none;
+ border: 1px solid #aaa;
+ border-radius: 2px;
+ background-color: #fff;
+ }
+ .button:hover {
+ background: #eee;
+ cursor: pointer;
+ }
+ &:hover .button {
+ display: block;
+ }
+}
+
+.marked {
+ border-color: black;
+}
+
+.flipped {
+ .cardtext {
+ display: none;
+ }
+ background-color: #ddd;
+}
+
+#my_side, #your_side {
+ position: absolute;
+ width: @table-width;
+ height: @hand-height;
+ left: 0;
+}
+
+#your_side {
+ background: @your-side-color;
+ border-bottom: 2px solid @area-border-color;
+ top: 0;
+}
+
+#my_side {
+ background: @my-side-color;
+ border-top: 2px solid @area-border-color;
+ top: @table-height - @hand-height - 2px;
+}
+
+.discard_area, .deck_area, .hand_area {
+ position: absolute;
+ height: @hand-height;
+}
+.discard_area, .deck_area {
+ border-right: 2px solid @area-border-color;
+ width: @pile-width;
+}
+.hand_area {
+ width: @table-width - (@pile-width + 2px) * 2;
+}
+.discard_area {
+ left: 0px;
+}
+.deck_area {
+ left: @pile-width + 2px;
+}
+.hand_area {
+ left: (@pile-width + 2px) * 2;
+}
+
+#your_side div {
+ top: 0px;
+}
+
+#my_side div {
+ top: 0; // @table-height - @hand-height;