+
+ &:hover {
+ height: auto;
+ min-height: @card-height;
+ z-index: 9999 !important;
+ }
+ .button {
+ display: none;
+ border: 1px solid #aaa;
+ border-radius: 2px;
+ background-color: #fff;
+ }
+ .button:hover {
+ background: #eee;
+ cursor: pointer;
+ }
+ &:hover .button {
+ display: block;
+ }
+}
+
+.your_card {
+ -webkit-transform: rotate(180deg);
+ -moz-transform: rotate(180deg);
+ -ms-transform: rotate(180deg);
+ -o-transform: rotate(180deg);
+ transform: rotate(180deg);
+ &:hover {
+ -webkit-transform: none;
+ -moz-transform: none;
+ -ms-transform: none;
+ -o-transform: none;
+ transform: none;
+ }
+}
+
+.marked {
+ border-color: black;
+}
+
+.flipped, .your_hand {
+ .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;
+}
+
+#deck_designer {
+ position: absolute;
+ top: 40px;
+ left: 10px;
+ background: white;
+ z-index: 10000;
+ width: @table-width + 10;
+ height: @table-height + 20;
+ overflow: scroll;
+ .shadow(3px, 3px, 16px, 0.8);
+
+ li, div {
+ cursor: pointer;
+ }
+
+ .in_deck {
+ color: #080;
+ }
+}
+
+#copyright {
+ padding-top: 4px;