css adjustments

Client/WebServer/css/credits.css

@@ -0,0 +1,21 @@
+.credits {
+    width: 100%;
+    margin: auto;
+    margin-bottom: 50;
+    text-align: center;
+    position:absolute;
+    bottom:0;
+  }
+  
+  .credits p {
+    font-family: 'Saira Condensed';
+    font-size: 140%;
+    color: whitesmoke;
+    padding: 0 100;
+  }
+  
+  .credits-red {
+    color: #e3493c;
+    font-weight: 700;
+  }
+  

Client/WebServer/css/docs.css

@@ -0,0 +1,9 @@
+
+  .docs-page {
+    padding: 15px;
+    margin-bottom: 20px;
+    border: 2px solid;
+    border-color: #1b998b;
+    border-radius: 8px;
+    background-color: #fdfdfd;
+  }

Client/WebServer/css/main.css

@@ -22,23 +22,3 @@
   font-style: normal;
 }
 
-.credits {
-  width: 100%;
-  margin: auto;
-  margin-bottom: 50;
-  text-align: center;
-  position:absolute;
-  bottom:0;
-}
-
-.credits p {
-  font-family: 'Saira Condensed';
-  font-size: 140%;
-  color: whitesmoke;
-  padding: 0 100;
-}
-
-.red {
-  color: #e3493c;
-  font-weight: 700;
-}

Client/WebServer/css/tutorial.css

@@ -239,14 +239,14 @@
   }
   
   /* Tooltip container */
-  .tooltip {
+  .tutorial-tooltip {
     position: relative;
     display: inline-block;
     border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
   }
   
   /* Tooltip text */
-  .tooltip .tooltiptext {
+  .tutorial-tooltip .tooltiptext {
     visibility: hidden;
     width: 240px;
     background-color: #0295aa;
@@ -258,7 +258,7 @@
     padding: 15px;
     border-radius: 6px;
   
-    /* Position the tooltip text */
+    /* Position the tutorial-tooltip text */
     position: absolute;
     z-index: 1;
     bottom: 125%;
@@ -266,13 +266,13 @@
     margin-left: -120px;
      
   
-    /* Fade in tooltip */
+    /* Fade in tutorial-tooltip */
     opacity: 0;
     transition: opacity 0.3s;
   }
   
   /* Tooltip arrow */
-  .tooltip .tooltiptext::after {
+  .tutorial-tooltip .tooltiptext::after {
     content: "";
     position: absolute;
     top: 100%;
@@ -284,7 +284,7 @@
   }
   
   /* Show the tooltip text when you mouse over the tooltip container */
-  .tooltip:hover .tooltiptext {
+  .tutorial-tooltip:hover .tooltiptext {
     visibility: visible;
     opacity: 1;
   }

Client/WebServer/index.html

@@ -5,7 +5,9 @@
     <title>Superalgos</title>
     <meta name="description" content="Free and Open Source Crypto Trading Tools">
     <link rel="stylesheet" href="main.css" type="text/css" charset="utf-8" />
+    <link rel="stylesheet" href="credits.css" type="text/css" charset="utf-8" />
     <link rel="stylesheet" href="tutorial.css" type="text/css" charset="utf-8" />
+    <link rel="stylesheet" href="docs.css" type="text/css" charset="utf-8" />
     <link rel="stylesheet" href="font-awasome.css" type="text/css" />
     <link rel="shortcut icon" type="image/png/ico" href="Images/favicon.ico" />
     <script type="text/javascript" src="WebServer/require.js"></script>
@@ -50,13 +52,13 @@
     style="overflow:hidden; background: url(Images/superalgos-platform.jpg); background-size: cover;"
     onresize="onResize()">
     <div id="contributors" class="credits">
-        <p>Superalgos is <span class="red">free</span> and <span class="red">open-source</span>, and is <span class="red">constantly improving</span> thanks to the involvement of contributors:</p>
+        <p>Superalgos is <span class="credits-red">free</span> and <span class="credits-red">open-source</span>, and is <span class="credits-red">constantly improving</span> thanks to the involvement of contributors:</p>
         <p>Luis Fernando Molina, Julian Molina, Andreja Cobeljic, Matías Benitez, Ira Miller, Eduardo Remis, 
             Jeff Braun, rico4dev, 9808us, Barry Low, Nikola Bjelogrlic, Hirajin Koizuko, Francisco J. Santillán, Viktoria B., Guillermo V., Daniel J., 
             Javier A., Gustavo J., Romina GS, Pedro P., Thais M., Andrey M., Loui M., Natalia M., Bashar A., Carlos V., Diego M., 
             Sebastian E., Bogdan P., Marko V., Igor S., Niksa K., Rodrigo M., Nicanor M., Alejandro P., Mateo H., Lan T., Leon A., Uroš R., Filip M., Vladimir J. and Pavle B.</p>
-        <p><span class="red">You too can help grow and improve Superalgos. Become a contributor!</span></p>
-        <p>If you like the project, please give it a <span class="red">star</span> and <span class="red">fork</span> it on Github. This helps developers find it on the search! </p>
+        <p><span class="credits-red">You too can help grow and improve Superalgos. Become a contributor!</span></p>
+        <p>If you like the project, please give it a <span class="credits-red">star</span> and <span class="credits-red">fork</span> it on Github. This helps developers find it on the search! </p>
     </div>
     <div id="masterApp"></div>
     <div id="canvasApp"></div>

Client/httpInterface.js

@@ -768,6 +768,18 @@ exports.newHttpInterface = function newHttpInterface(WEB_SERVER, DATA_FILE_SERVE
                 }
                 break
 
+            case 'credits.css':
+                {
+                    sendStyleSheet('credits.css')
+                }
+                break
+
+            case 'docs.css':
+                {
+                    sendStyleSheet('docs.css')
+                }
+                break
+
             case 'font-awasome.css':
                 {
                     sendStyleSheet('font-awasome.css')

Projects/Superalgos/UI/Spaces/Tutorial-Space/TutorialSpace.js

@@ -1183,7 +1183,7 @@ function newSuperalgosTutorialSpace() {
         tutorialDiv.innerHTML = html
 
         function addToolTips(text) {
-            const TOOL_TIP_HTML = '<div class="tooltip">NODE_TYPE<span class="tooltiptext">NODE_DEFINITION</span></div>'
+            const TOOL_TIP_HTML = '<div class="tutorial-tooltip">NODE_TYPE<span class="tooltiptext">NODE_DEFINITION</span></div>'
             let resultingText = ''
             let splittedText = text.split('->')