Implemented Corporation Research Tree UI using Treant library

dist/engine.css

@@ -1870,6 +1870,12 @@ button {
 
 /* COLORS */
 /* Attributes */
+/**
+ * Styling for Corporations
+ * The names/labels refer to "Company Management", which was the old name
+ * for the mechanic before it got changed to avoid confusion with normal
+ * companies
+ */
 #cmpy-mgmt-container p,
 #cmpy-mgmt-container a,
 #cmpy-mgmt-container div {
@@ -2094,5 +2100,68 @@ button {
   margin: 1px;
   padding: 1px; }
 
+/* required LIB STYLES */
+/* .Treant se automatski dodaje na svaki chart conatiner */
+.Treant {
+  position: relative;
+  overflow: hidden;
+  padding: 0 !important; }
+
+.Treant > .node,
+.Treant > .pseudo {
+  position: absolute;
+  display: block;
+  visibility: hidden; }
+
+.Treant.Treant-loaded .node,
+.Treant.Treant-loaded .pseudo {
+  visibility: visible; }
+
+.Treant > .pseudo {
+  width: 0;
+  height: 0;
+  border: none;
+  padding: 0; }
+
+.Treant .collapse-switch {
+  width: 3px;
+  height: 3px;
+  display: block;
+  border: 1px solid black;
+  position: absolute;
+  top: 1px;
+  right: 1px;
+  cursor: pointer; }
+
+.Treant .collapsed .collapse-switch {
+  background-color: #868DEE; }
+
+.Treant > .node img {
+  border: none;
+  float: left; }
+
+.Treant > .node {
+  cursor: pointer;
+  padding: 4px;
+  min-width: 60px;
+  text-align: center;
+  border: 2px solid #E8E8E3;
+  border-radius: 2px;
+  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
+  font-size: 12px; }
+
+.Treant > .researched {
+  background-color: #444; }
+
+.Treant > .locked > div {
+  color: red;
+  pointer-events: none; }
+
+.Treant > .node > div {
+  font-size: 12px; }
+
+.Treant > .unlocked:hover {
+  background-color: #666; }
+
 
 /*# sourceMappingURL=engine.css.map*/