before mango user integration

public/assets/css/oof.css

@@ -1,3 +1,12 @@
+/* mobile */
+
+@media only screen and (max-width: 600px) {
+  body {
+    background: url("../img/winxp.jpg");
+    background-repeat: repeat;
+  }
+}
+
 /* Works on Firefox */
 * {
   scrollbar-width: thin;
@@ -39,7 +48,7 @@ body {
 }
 
 .pclass {
-    font-size: 64px;
+    font-size: 74px;
     margin-left: 0;
     margin-bottom: 0px;
     font-weight: bold;
@@ -49,6 +58,11 @@ body {
     text-shadow: 4px 0px var(--teal);
 }
 
+.typebox {
+  margin-top: 2%;
+  margin-bottom: 2%;
+}
+
 #sbody {
   font-size: 15px;
     margin-left: 5px;
@@ -60,6 +74,14 @@ body {
     font-style: normal;
 }
 
+#equtbimage {
+  font-size: 15px;
+  margin-left: 5px;
+  margin-right: 5px;
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
 #audioplayerdivstop {
   margin-bottom: 160px;
 }
@@ -68,22 +90,65 @@ body {
   margin-bottom: 2px;
 }
 
-#ws:link {
+.table tr, .table td, .table th {border: 0!important;}
+
+#equtb {
+  width: 100%;
+  font-weight: bold;
+  font-family: 'Comic Neue';
+  font-style: normal;
+  font-size: small;
+  text-align: left;
+  color: black;
+}
+
+#equiDesc {
+  margin-top: 10px;
+  padding: 4%;
+  
+}
+
+#bjlogin {
+  margin: 0 auto;
+  margin-left: auto;
+  margin-right: auto;
+  text-align:center;
+}
+
+#bjmenu {
+  margin-bottom: -1px;
+}
+
+#tab1bj {
+  margin-right: 2px;
+}
+
+.bjbuttons {
+  margin: 2px;
+}
+
+#mainbj {
+  padding: 3%;
+  border: 1px solid black;
+  background-color: #F3F3EF;
+}
+
+.ws:link {
   text-decoration: none;
   color: inherit;
 }
 
-#ws:visited {
+.ws:visited {
   text-decoration: none;
   color: inherit;
 }
 
-#ws:hover {
+.ws:hover {
   text-decoration: none;
   color: coral;
 }
 
-#ws:active {
+.ws:active {
   text-decoration: none;
   color: inherit;
 }

public/assets/css/xp.css

@@ -389,7 +389,7 @@ input[type=range].has-box-indicator::-moz-range-thumb {
 }
 
 .window {
-    font-size: 11px;
+    font-size: small;
     box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px grey, inset 2px 2px #fff;
     background: #ece9d8;
     padding: 3px
@@ -549,7 +549,7 @@ legend {
 
 menu[role=tablist] {
     position: relative;
-    margin: 0 0 -2px;
+    margin: 0 0 0;
     text-indent: 0;
     list-style-type: none;
     display: flex;
@@ -557,6 +557,7 @@ menu[role=tablist] {
 }
 
 menu[role=tablist] button {
+    background: #d0d0bf;
     z-index: 1;
     display: block;
     color: #222;
@@ -565,19 +566,11 @@ menu[role=tablist] button {
 }
 
 menu[role=tablist] button[aria-selected=true] {
-    padding-bottom: 2px;
-    margin-top: -2px;
-    background-color: #ece9d8;
     position: relative;
+    margin-bottom: -2px;
     z-index: 8;
-    margin-left: -3px;
-    margin-bottom: 1px
 }
 
-menu[role=tablist] button:focus {
-    outline: 1px dotted #222;
-    outline-offset: -4px
-}
 
 menu[role=tablist].justified button {
     flex-grow: 1;
@@ -1004,14 +997,8 @@ legend {
 }
 
 menu[role=tablist] button {
-    background: linear-gradient(180deg, #fff, #fafaf9 26%, #f0f0ea 95%, #ecebe5);
+    padding: 0 12px 3px;
-    margin-left: -1px;
+    border-bottom: 1px solid black;
-    margin-right: 2px;
-    border-radius: 0;
-    border-color: #91a7b4;
-    border-top-right-radius: 3px;
-    border-top-left-radius: 3px;
-    padding: 0 12px 3px
 }
 
 menu[role=tablist] button:hover {
@@ -1021,23 +1008,17 @@ menu[role=tablist] button:hover {
 }
 
 menu[role=tablist] button[aria-selected=true] {
-    border-color: #919b9c;
+    background: #F3F3EF;
-    margin-right: -1px;
-    border-bottom: 1px solid transparent;
     border-top: 1px solid #e68b2c;
-    box-shadow: inset 0 2px #ffc73c
+    box-shadow: inset 0 2px #ffc73c;
+    border-bottom: 1px solid #F3F3EF;
 }
 
 menu[role=tablist] button[aria-selected=true]:first-of-type:before {
     content: "";
     display: block;
     position: absolute;
-    z-index: -1;
-    top: 100%;
-    left: -1px;
-    height: 2px;
     width: 0;
-    border-left: 1px solid #919b9c
 }
 
 ul.tree-view {