Revert "Revert "Gang rework""

This reverts commit be0a08d70c.

dist/engine.css

@@ -94,7 +94,8 @@ a:visited {
 /* Tool tips (when hovering over an element */
 .tooltip {
   display: inline-block;
-  position: relative; }
+  position: relative;
+  /* Positioned to left of element rather than right */ }
   .tooltip .tooltiptext {
     visibility: hidden;
     width: 300px;
@@ -107,6 +108,24 @@ a:visited {
     pointer-events: none;
     position: absolute;
     z-index: 99; }
+  .tooltip .tooltiptextleft {
+    visibility: hidden;
+    width: 300px;
+    background-color: var(--my-background-color);
+    border: 2px solid var(--my-highlight-color);
+    color: #fff;
+    text-align: center;
+    padding: 4px;
+    top: 50%;
+    left: 50%;
+    transform: translate(-100%, -100%);
+    /* Backwards compatibility */
+    -webkit-transform: translate(-100%, -100%);
+    -moz-transform: translate(-100%, -100%);
+    -o-transform: translate(-100%, -100%);
+    -ms-transform: translate(-100%, -100%);
+    position: absolute;
+    z-index: 99; }
 
 /* Same thing as a normal tooltip except its a bit higher */
 .tooltip .tooltiptexthigh {
@@ -122,21 +141,6 @@ a:visited {
   position: absolute;
   z-index: 99; }
 
-/* Similar to a normal tooltip except its positioned on the left of the element
-   rather than the right to avoid exceeding the elements normal width */
-.tooltip .tooltiptextleft {
-  visibility: hidden;
-  width: 300px;
-  background-color: var(--my-background-color);
-  border: 2px solid var(--my-highlight-color);
-  color: #fff;
-  text-align: center;
-  padding: 4px;
-  left: 40%;
-  bottom: -10%;
-  position: absolute;
-  z-index: 99; }
-
 .tooltip:hover .tooltiptext,
 .tooltip:hover .tooltiptexthigh,
 .tooltip:hover .tooltiptextleft {
@@ -144,13 +148,14 @@ a:visited {
 
 /* help tip. Question mark that opens popup with info/details */
 .help-tip {
-  content: '?';
-  padding: 1px;
-  margin-left: 3px;
-  color: #fff;
+  background-color: black;
   border: 1px solid #fff;
   border-radius: 5px;
-  display: inline-block; }
+  color: #fff;
+  content: '?';
+  display: inline-block;
+  margin-left: 3px;
+  padding: 1px; }
 
 .help-tip-big {
   content: '?';
@@ -418,7 +423,7 @@ a:visited {
   .accordion-header:after {
     content: '\2795';
     /* "plus" sign (+) */
-    font-size: 13px;
+    font-size: 14px;
     float: right;
     color: transparent;
     text-shadow: 0 0 0 #fff;
@@ -472,6 +477,9 @@ a:visited {
 .charisma-purple {
   color: #a671d1; }
 
+.smallfont {
+  font-size: 13px; }
+
 /* COLORS */
 /* Attributes */
 /**
@@ -546,6 +554,29 @@ button {
   .std-button-bought:active {
     pointer-events: none; }
 
+/**
+ * This is a button that is meant to be used on accordions (accordion-header and accordion-panel classes)
+ * It has a black background so it does not clash with the default accordion coloring
+ */
+.accordion-button {
+  -webkit-border-radius: 12px;
+  -moz-border-radius: 12px;
+  border-radius: 12px;
+  -webkit-box-shadow: 1px 1px 3px #000;
+  -moz-box-shadow: 1px 1px 3px #000;
+  box-shadow: 1px 1px 3px #000;
+  color: #aaa;
+  font-size: 16px;
+  font-weight: bold;
+  margin: 4px;
+  padding: 4px;
+  background-color: #000;
+  /* TODO focus selector? */ }
+  .accordion-button:hover, .accordion-button:active {
+    color: #fff;
+    text-decoration: none;
+    cursor: pointer; }
+
 /* COLORS */
 /* Attributes */
 /**
@@ -921,24 +952,6 @@ button {
     color: #fff;
     margin-left: 5%; }
 
-.active-scripts-button {
-  -webkit-border-radius: 12px;
-  -moz-border-radius: 12px;
-  border-radius: 12px;
-  -webkit-box-shadow: 1px 1px 3px #000;
-  -moz-box-shadow: 1px 1px 3px #000;
-  box-shadow: 1px 1px 3px #000;
-  color: #aaa;
-  font-size: 16px;
-  font-weight: bold;
-  margin: 4px;
-  padding: 4px;
-  background-color: #000; }
-  .active-scripts-button:hover, .active-scripts-button:focus {
-    color: #fff;
-    text-decoration: none;
-    cursor: pointer; }
-
 /* Hacknet Nodes */
 #hacknet-nodes-container {
   position: fixed;
@@ -1227,18 +1240,6 @@ button {
   margin: 2px;
   padding: 0; }
 
-/* Gang */
-#gang-container {
-  position: fixed;
-  padding: 6px; }
-
-#gang-management-subpage > p {
-  padding: 4px; }
-
-.gang-member-info-div {
-  float: left;
-  background-color: #555; }
-
 /* COLORS */
 /* Attributes */
 /* Both Work in progress and BitNode stuff */
@@ -2040,5 +2041,42 @@ button {
   -webkit-hyphens: auto;
   -moz-hyphens: auto; }
 
+/* COLORS */
+/* Attributes */
+/**
+ * Styling for the Gang mechanic UI (BitNode-2)
+ */
+#gang-container {
+  position: fixed;
+  padding: 6px; }
+  #gang-container p, #gang-container pre {
+    font-size: 15px; }
+  #gang-container select {
+    background-color: black;
+    color: white; }
+
+#gang-management-subpage > p {
+  padding: 4px; }
+
+.gang-member-info-div {
+  background-color: #555;
+  display: inline;
+  float: left;
+  width: 30%; }
+
+/**
+ * Showing owned upgrades in the Equipment Box
+ */
+.gang-owned-upgrades-div {
+  display: inline-block;
+  margin-left: 6px;
+  width: 75%; }
+
+.gang-owned-upgrade {
+  border: 1px solid white;
+  font-size: 12px;
+  margin: 1px;
+  padding: 1px; }
+
 
 /*# sourceMappingURL=engine.css.map*/