1 files changed, 255 insertions, 4 deletions
diff --git a/land-and-freedom.css b/land-and-freedom.css
index 9452199..196eddb 100644
--- a/land-and-freedom.css
+++ b/land-and-freedom.css
@@ -1,5 +1,5 @@
 main {
-  background-color: #7B904B;
+  background-color: #7b904b;
 }
 
 /* MAP */
@@ -26,10 +26,45 @@ main {
     background-image: url(images/map100.png);
   }
 }
+.game_info {
+  padding: 3px 4px;
+  border-bottom: 1px solid black;
+  font-size: 16px;
+  line-height: 1.5;
+  grid-column: 1;
+  grid-row: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+#roles {
+  grid-column: 1;
+  grid-row: 2;
+}
+
+#role_Anarchist {
+  background-color: rgb(76, 70, 89);
+}
+
+#role_Communist {
+  background-color: rgb(255, 0, 0);
+}
+
+#role_Moderate {
+  background-color: rgb(126, 18, 80);
+}
+
+.role {
+  color: white;
+}
+.role a {
+  color: white;
+}
+
 .panel {
   min-width: 1271px;
   max-width: 1271px;
-  background-color: #58641D;
+  background-color: #58641d;
   margin: 12px auto;
   box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.2666666667);
   border: 2px solid #333;
@@ -54,11 +89,19 @@ main {
 }
 
 #hand_header {
-  background-color: #273B09;
+  background-color: #273b09;
 }
 
 .panel_header[data-faction-id=a] {
-  background: linear-gradient(45deg, black 50%, red 0);
+  background-color: rgb(76, 70, 89);
+}
+
+.panel_header[data-faction-id=c] {
+  background-color: rgb(255, 0, 0);
+}
+
+.panel_header[data-faction-id=m] {
+  background-color: rgb(126, 18, 80);
 }
 
 .front {
@@ -341,6 +384,190 @@ main {
   background-image: url("images/cards100/card_62.png");
 }
 
+.card[data-card-id="63"] {
+  background-image: url("images/cards100/card_63.png");
+}
+
+.card[data-card-id="64"] {
+  background-image: url("images/cards100/card_64.png");
+}
+
+.card[data-card-id="65"] {
+  background-image: url("images/cards100/card_65.png");
+}
+
+.card[data-card-id="66"] {
+  background-image: url("images/cards100/card_66.png");
+}
+
+.card[data-card-id="67"] {
+  background-image: url("images/cards100/card_67.png");
+}
+
+.card[data-card-id="68"] {
+  background-image: url("images/cards100/card_68.png");
+}
+
+.card[data-card-id="69"] {
+  background-image: url("images/cards100/card_69.png");
+}
+
+.card[data-card-id="70"] {
+  background-image: url("images/cards100/card_70.png");
+}
+
+.card[data-card-id="71"] {
+  background-image: url("images/cards100/card_71.png");
+}
+
+.card[data-card-id="72"] {
+  background-image: url("images/cards100/card_72.png");
+}
+
+.card[data-card-id="73"] {
+  background-image: url("images/cards100/card_73.png");
+}
+
+.card[data-card-id="74"] {
+  background-image: url("images/cards100/card_74.png");
+}
+
+.card[data-card-id="75"] {
+  background-image: url("images/cards100/card_75.png");
+}
+
+.card[data-card-id="76"] {
+  background-image: url("images/cards100/card_76.png");
+}
+
+.card[data-card-id="77"] {
+  background-image: url("images/cards100/card_77.png");
+}
+
+.card[data-card-id="78"] {
+  background-image: url("images/cards100/card_78.png");
+}
+
+.card[data-card-id="79"] {
+  background-image: url("images/cards100/card_79.png");
+}
+
+.card[data-card-id="80"] {
+  background-image: url("images/cards100/card_80.png");
+}
+
+.card[data-card-id="81"] {
+  background-image: url("images/cards100/card_81.png");
+}
+
+.card[data-card-id="82"] {
+  background-image: url("images/cards100/card_82.png");
+}
+
+.card[data-card-id="83"] {
+  background-image: url("images/cards100/card_83.png");
+}
+
+.card[data-card-id="84"] {
+  background-image: url("images/cards100/card_84.png");
+}
+
+.card[data-card-id="85"] {
+  background-image: url("images/cards100/card_85.png");
+}
+
+.card[data-card-id="86"] {
+  background-image: url("images/cards100/card_86.png");
+}
+
+.card[data-card-id="87"] {
+  background-image: url("images/cards100/card_87.png");
+}
+
+.card[data-card-id="88"] {
+  background-image: url("images/cards100/card_88.png");
+}
+
+.card[data-card-id="89"] {
+  background-image: url("images/cards100/card_89.png");
+}
+
+.card[data-card-id="90"] {
+  background-image: url("images/cards100/card_90.png");
+}
+
+.card[data-card-id="91"] {
+  background-image: url("images/cards100/card_91.png");
+}
+
+.card[data-card-id="92"] {
+  background-image: url("images/cards100/card_92.png");
+}
+
+.card[data-card-id="93"] {
+  background-image: url("images/cards100/card_93.png");
+}
+
+.card[data-card-id="94"] {
+  background-image: url("images/cards100/card_94.png");
+}
+
+.card[data-card-id="95"] {
+  background-image: url("images/cards100/card_95.png");
+}
+
+.card[data-card-id="96"] {
+  background-image: url("images/cards100/card_96.png");
+}
+
+.card[data-card-id="97"] {
+  background-image: url("images/cards100/card_97.png");
+}
+
+.card[data-card-id="98"] {
+  background-image: url("images/cards100/card_98.png");
+}
+
+.card[data-card-id="99"] {
+  background-image: url("images/cards100/card_99.png");
+}
+
+.card[data-card-id="100"] {
+  background-image: url("images/cards100/card_100.png");
+}
+
+.card[data-card-id="101"] {
+  background-image: url("images/cards100/card_101.png");
+}
+
+.card[data-card-id="102"] {
+  background-image: url("images/cards100/card_102.png");
+}
+
+.card[data-card-id="103"] {
+  background-image: url("images/cards100/card_103.png");
+}
+
+.card[data-card-id="104"] {
+  background-image: url("images/cards100/card_104.png");
+}
+
+.card[data-card-id="105"] {
+  background-image: url("images/cards100/card_105.png");
+}
+
+.card[data-card-id="106"] {
+  background-image: url("images/cards100/card_106.png");
+}
+
+.card[data-card-id="107"] {
+  background-image: url("images/cards100/card_107.png");
+}
+
+.card[data-card-id="108"] {
+  background-image: url("images/cards100/card_108.png");
+}
+
 .card.event {
   position: absolute;
   width: 132px;
@@ -358,6 +585,30 @@ main {
   margin-top: 1px;
 }
 
+.glory {
+  box-sizing: border-box;
+  position: absolute;
+  width: 34px;
+  height: 34px;
+  background-size: 100% 100%;
+  border-radius: 4px;
+}
+
+.glory[data-faction-id=a] {
+  border: 1px #333 solid;
+  background-image: url("images/factions/anarchists.png");
+}
+
+.glory[data-faction-id=c] {
+  border: 1px #333 solid;
+  background-image: url("images/factions/communitsts.png");
+}
+
+.glory[data-faction-id=m] {
+  border: 1px #333 solid;
+  background-image: url("images/factions/moderates.png");
+}
+
 .standee {
   box-sizing: border-box;
   position: absolute;