1 files changed, 14 insertions, 6 deletions

diff --git a/play.css b/play.css
index 175a87e..1d12a87 100644
--- a/play.css
+++ b/play.css
@@ -41,28 +41,36 @@ body.Saracens header.your_turn { background-color: lightgreen; }
 	width: 225px;
 	height: 350px;
 	border-radius: 15px;
+	box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
+	transition: 100ms;
+	display: none;
+}
+
+.card.show {
+	display: block;
 }
 
 .card.enabled:hover {
 	transform: scale(1.1);
 }
 
-.small_card.prior {
+.role_info .card.prior {
 	filter: grayscale(100%) contrast(70%) brightness(120%);
 }
 
 .role_info { padding: 15px; }
-.small_card { width: 90px; height: 140px; border-radius: 5px; }
-.small_card:hover { width: 180px; height: 280px; border-radius: 10px; }
+.role_info .card { margin: 0 auto; }
+.role_info .card { width: 90px; height: 140px; border-radius: 5px; }
+.role_info .card:hover { width: 180px; height: 280px; border-radius: 10px; }
 
 @media (max-height: 800px) {
 	.role_info { padding: 15px 0 0 0; }
-	.small_card { width: 180px; height: 80px; border-radius: 10px 10px 0 0; }
-	.small_card:hover { width: 180px; height: 280px; border-radius: 10px; margin-bottom: 15px; }
+	.role_info .card { width: 180px; height: 80px; border-radius: 10px 10px 0 0; }
+	.role_info .card:hover { width: 180px; height: 280px; border-radius: 10px; margin-bottom: 15px; }
 }
 
 @media (min-height: 1200px) {
-	.small_card { width: 180px; height: 280px; border-radius: 10px; }
+	.role_info .card { width: 180px; height: 280px; border-radius: 10px; }
 }
 
 /* MAP */