Add Setup Guides

frontendApp/assets/css/style.css

@@ -1004,15 +1004,84 @@ thead cell{
 
 
 /* CSS style for Help Menu */
-.accordion-button {
-  background-color: black;
-  color: white;
+/*side tabs*/
+* {box-sizing: border-box}
+body {font-family: "Lato", sans-serif;}
+
+/* Style the tab */
+.tab {
+    float: left;
+    background-color: rgb(204, 204, 204);
+    width: 30%;
+    height: 550px;
 }
-.accordion-collapse {
-  background-color: rgba(225, 225, 225, 0.7);
-  color: black;
+
+/* Style the buttons inside the tab */
+.tab button {
+    color: #282828;
+    background-color: rgb(204, 204, 204);
+    border-right: 2px #b8b4a8 solid;
+    border-bottom: none;
+    display: block;
+    padding: 22px 16px;
+    width: 100%;
+    outline: none;
+    text-align: left;
+    cursor: pointer;
+    transition: 0.3s;
+    font-size: 17px;
 }
-.accordion-item {
-  border-color: #852401;
-  color: white;
+
+/* Change background color of buttons on hover */
+.tab button:hover {
+    color: #282828;
+    background-color: rgb(220, 220, 220);
+    border-top: 2px #282828 solid;
+    border-left: 1px #fff solid;
+    border-right: none;
+    border-bottom: 1px #fff solid;
+}
+
+/* Create an active/current "tab button" class */
+.tab button.active {
+    color: #282828;
+    background: rgb(239, 239, 239);
+    border-top: 1px #282828 solid;
+    border-left: 2px #282828 solid;
+    border-right: none;
+    border-bottom: 1px #282828 solid;
+}
+
+/* Style the tab content */
+.sideTabContent {
+    background: rgb(239, 239, 239);
+    color: #1b1b3d;
+    margin: 0 0;
+    float: left;
+    padding: 12px 12px;
+    width: 70%;
+    height: 550px;
+    border-top: 1px #282828 solid;
+    border-left: none;
+    border-right: 1px #282828 solid;
+    border-bottom: 1px #282828 solid;
+}
+
+div.scrolledText {
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+}
+
+#roverLogoImg{
+    max-width: 750px;
+}
+#manualCTRLImg{
+    max-width: 700px;
+}
+#telemetryImg, #serialImg{
+    max-width: 200px;
+}
+#liveStreamingImg, #controlPadImg, #terminalImg{
+    max-width: 250px;
 }