qeury input now gets saved correctly

8 files changed, 1681 insertions, 75 deletions

diff --git a/client/js/app/src/app/pages/querybuilder/Components/Text/Info.jsx b/client/js/app/src/app/pages/querybuilder/Components/Text/Info.jsx
index e7af732bdca..e6cd623fea7 100644
--- a/client/js/app/src/app/pages/querybuilder/Components/Text/Info.jsx
+++ b/client/js/app/src/app/pages/querybuilder/Components/Text/Info.jsx
@@ -7,7 +7,6 @@ export default function Info({
   height = 15,
   width = 15,
 }) {
-  //const image = require("../../assets/img/information.svg").default;
   return (
     <>
       <a
diff --git a/client/js/app/src/app/pages/querybuilder/Components/Text/QueryDropDownForm.jsx b/client/js/app/src/app/pages/querybuilder/Components/Text/QueryDropDownForm.jsx
index 85e7f5bfc0c..9d78a8accde 100644
--- a/client/js/app/src/app/pages/querybuilder/Components/Text/QueryDropDownForm.jsx
+++ b/client/js/app/src/app/pages/querybuilder/Components/Text/QueryDropDownForm.jsx
@@ -5,17 +5,19 @@ import SimpleDropDownForm from './SimpleDropDownForm';
 export default function QueryDropdownFormn({ choices, id }) {
   const { inputs, setInputs } = useContext(QueryInputContext);
 
-  const updateInputs = (e) => {
+  const updateType = (e) => {
     e.preventDefault();
     const index = inputs.findIndex((element) => element.id === id);
     inputs[index].type = e.target.value;
     setInputs(inputs);
   };
 
+  //TODO: Try to move this into SimpleDropDownForm
+
   return (
     <SimpleDropDownForm
       id={id}
-      onChange={updateInputs}
+      onChange={updateType}
       choices={choices}
     ></SimpleDropDownForm>
   );
diff --git a/client/js/app/src/app/pages/querybuilder/Components/Text/QueryInput.jsx b/client/js/app/src/app/pages/querybuilder/Components/Text/QueryInput.jsx
index 2132756db0c..c645cd86cd5 100644
--- a/client/js/app/src/app/pages/querybuilder/Components/Text/QueryInput.jsx
+++ b/client/js/app/src/app/pages/querybuilder/Components/Text/QueryInput.jsx
@@ -6,7 +6,7 @@ import { OverlayTrigger, Tooltip } from 'react-bootstrap';
 import { QueryInputContext } from '../Contexts/QueryInputContext';
 import QueryDropdownFormn from './QueryDropDownForm';
 
-export default function QueryInput({ id, onClick }) {
+export default function QueryInput({ id }) {
   const choices = ['yql', 'hits', 'offset', 'tracelevel'];
 
   const { inputs, setInputs } = useContext(QueryInputContext);
@@ -16,6 +16,15 @@ export default function QueryInput({ id, onClick }) {
     setInputs(newList);
   }
 
+  const updateInput = (e) => {
+    e.preventDefault();
+    const id = parseInt(e.target.id.replace('v', ''));
+    const index = inputs.findIndex((element) => element.id === id);
+    inputs[index].input = e.target.value;
+    setInputs(inputs);
+    console.log(inputs);
+  };
+
   const inputList = inputs.map((value, index) => {
     return (
       <div key={value.id} id={value.id} className="queryinput">
@@ -23,9 +32,12 @@ export default function QueryInput({ id, onClick }) {
           choices={choices}
           id={value.id}
         ></QueryDropdownFormn>
-        {/* <SimpleDropDownForm choices={choices} id={`i${value.id}`}></SimpleDropDownForm> */}
         <Info id={value.id} height="15" width="15"></Info>
-        <SimpleForm id={`v${value.id}`} size="30"></SimpleForm>
+        <SimpleForm
+          id={`v${value.id}`}
+          size="30"
+          onChange={updateInput}
+        ></SimpleForm>
         <OverlayTrigger
           placement="right"
           delay={{ show: 250, hide: 400 }}
diff --git a/client/js/app/src/app/pages/querybuilder/Components/Text/SimpleForm.jsx b/client/js/app/src/app/pages/querybuilder/Components/Text/SimpleForm.jsx
index 1b5935cb9cf..ed48eaf06ae 100644
--- a/client/js/app/src/app/pages/querybuilder/Components/Text/SimpleForm.jsx
+++ b/client/js/app/src/app/pages/querybuilder/Components/Text/SimpleForm.jsx
@@ -6,18 +6,26 @@ export default function SimpleForm({
   className = 'propvalue',
   initial,
   size = '20',
+  onChange,
 }) {
+  SimpleForm.defaultProps = {
+    onChange: handleChange,
+  };
   const [input, setValue] = useState(initial);
 
+  function handleChange(e) {
+    setValue(e.target.value);
+  }
+
   return (
-    <form className={className}>
+    <form className={className} id={id}>
       <input
         size={size}
         type="text"
         id={id}
         className={className}
-        value={input}
-        onChange={(e) => setValue(e.target.value)}
+        defaultValue={initial}
+        onChange={onChange}
       />
     </form>
   );
diff --git a/client/js/app/src/app/pages/querybuilder/index.js b/client/js/app/src/app/pages/querybuilder/index.js
deleted file mode 100644
index de40d0c2174..00000000000
--- a/client/js/app/src/app/pages/querybuilder/index.js
+++ /dev/null
@@ -1,63 +0,0 @@
-import "./css/agency.css";
-import "./css/vespa.css"
-import "bootstrap/dist/css/bootstrap.min.css";
-import "./font-awesome/css/font-awesome.min.css";
-
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import SimpleButton from 'Components/Buttons/SimpleButton';
-import QueryInput from 'Components/Text/QueryInput';
-import SimpleDropDownForm from 'Components/Text/SimpleDropDownForm';
-import SimpleForm from 'Components/Text/SimpleForm';
-import TextBox from 'Components/Text/TextBox';
-import ImageButton from "Components/Buttons/ImageButton";
-import OverlayImageButton from "Components/Buttons/OverlayImageButton";
-import AddQueryInput from "Components/Buttons/AddQueryInputButton";
-import { QueryInputProvider } from "Components/Contexts/QueryInputContext";
-
-
-
-const root = ReactDOM.createRoot(document.getElementById('root'));
-const messageMethodArray = ["POST", "GET"];
-
-const pasteImage = require("./assets/img/paste.svg").default;
-const copyImage = require("./assets/img/copy.svg").default;
-const refreshImage = require("./assets/img/reload.svg").default;
-
-
-root.render(
-  <>
-    <React.StrictMode>
-      <header>
-        <div className="intro container">
-          <TextBox className={"intro-lead-in"}>Vespa Search Engine</TextBox>
-          <TextBox className={"intro-long"}>Select the method for sending a request and construct a query.</TextBox>
-          <SimpleDropDownForm choices={messageMethodArray} id="method" className='methodselector'></SimpleDropDownForm>
-          <SimpleForm id="url" className='textbox' initial="http://localhost:8080/search/" size="30"></SimpleForm>
-          <SimpleButton id="send" className="button" onClick={handleClick}>Send</SimpleButton>
-          <br/>
-          <QueryInputProvider>
-            <div id="request">
-              <QueryInput></QueryInput>
-            </div>
-            <br/>
-            <AddQueryInput/>
-          </QueryInputProvider>
-          <br/>
-          <ImageButton id="pasteJSON" className="pasteJSON" showImage={true} image={pasteImage} style={{marginTop:"-2px", marginRight: "3px"}}>Paste JSON</ImageButton>
-          <SimpleButton className="showJSON">Show query JSON</SimpleButton>
-          <TextBox className="response">Response</TextBox>
-          <textarea className="responsebox" readOnly cols="70" rows="25"></textarea>
-          <OverlayImageButton className="intro-copy" image={copyImage} height="30" width="30" tooltip="Copy">Copy</OverlayImageButton>
-          <OverlayImageButton className="intro-refresh" image={refreshImage} height="30" width="30" tooltip="Refresh">Refresh</OverlayImageButton>
-          <br/>
-          <br/>
-        </div>
-      </header>
-    </React.StrictMode>
-  </>
-);
-
-function handleClick() {
-  console.log("Click happened");
-}
diff --git a/client/js/app/src/app/pages/querybuilder/query-builder.jsx b/client/js/app/src/app/pages/querybuilder/query-builder.jsx
index c89d668fa34..1d6741770d0 100644
--- a/client/js/app/src/app/pages/querybuilder/query-builder.jsx
+++ b/client/js/app/src/app/pages/querybuilder/query-builder.jsx
@@ -12,12 +12,13 @@ import pasteImage from './assets/img/paste.svg';
 import copyImage from './assets/img/copy.svg';
 import refreshImage from './assets/img/reload.svg';
 
+import '../../styles/agency.css';
+import '../../styles/vespa.css';
+//import 'bootstrap/dist/css/bootstrap.min.css'; //TODO: Find out how to get this css
+
 export function QueryBuilder() {
   const messageMethodArray = ['POST', 'GET'];
 
-  // const pasteImage = require("./assets/img/paste.svg").default;
-  // const copyImage = require("./assets/img/copy.svg").default;
-  // const refreshImage = require("./assets/img/reload.svg").default;
   return (
     <>
       <header>
diff --git a/client/js/app/src/app/styles/agency.css b/client/js/app/src/app/styles/agency.css
new file mode 100644
index 00000000000..e17809338c6
--- /dev/null
+++ b/client/js/app/src/app/styles/agency.css
@@ -0,0 +1,895 @@
+/*!
+ * Start Bootstrap - Agency Bootstrap Theme (http://startbootstrap.com)
+ * Code licensed under the Apache License v2.0.
+ * For details, see http://www.apache.org/licenses/LICENSE-2.0.
+ */
+:root {
+  --primary: #188fff;
+  --secondary: #003abc;
+  --secondary-dark: #333;
+  --muted: #777;
+
+  --fontprimary: HelveticaNeue, Helvetica, Arial, sans-serif;
+  --fontsecondary: HelveticaNeue-Thin, Helvetica, Arial, sans-serif;
+}
+
+body {
+  overflow-x: hidden;
+  font-family: HelveticaNeue, Helvetica, Arial, sans-serif;
+  color: var(--secondary-dark);
+}
+
+.text-muted {
+  color: var(--muted);
+}
+
+.text-primary {
+  color: HelveticaNeue, Helvetica, Arial, sans-serif;
+}
+
+p {
+  font-size: 14px;
+  line-height: 1.75;
+}
+
+p.large {
+  font-size: 16px;
+}
+
+a,
+a:hover,
+a:focus,
+a:active,
+a.active {
+  outline: 0;
+}
+
+a {
+  color: HelveticaNeue, Helvetica, Arial, sans-serif;
+}
+
+a:hover,
+a:focus,
+a:active,
+a.active {
+  color: HelveticaNeue-Thin, Helvetica, Arial, sans-serif;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  text-transform: uppercase;
+  font-family: HelveticaNeue, Helvetica, Arial, sans-serif;
+  font-weight: 700;
+}
+
+.img-centered {
+  margin: 0 auto;
+}
+
+.bg-light-gray {
+  background-color: #f7f7f7;
+}
+
+.bg-darkest-gray {
+  background-color: #222;
+}
+
+.btn-primary {
+  border-color: HelveticaNeue, Helvetica, Arial, sans-serif;
+  text-transform: uppercase;
+  font-family: HelveticaNeue, Helvetica, Arial, sans-serif;
+  font-weight: 700;
+  color: #fff;
+  background-color: HelveticaNeue, Helvetica, Arial, sans-serif;
+}
+
+.btn-primary:hover,
+.btn-primary:focus,
+.btn-primary:active,
+.btn-primary.active,
+.open .dropdown-toggle.btn-primary {
+  border-color: HelveticaNeue, Helvetica, Arial, sans-serif;
+  color: #fff;
+  background-color: HelveticaNeue-Thin, Helvetica, Arial, sans-serif;
+}
+
+.btn-primary:active,
+.btn-primary.active,
+.open .dropdown-toggle.btn-primary {
+  background-image: none;
+}
+
+.btn-primary.disabled,
+.btn-primary[disabled],
+fieldset[disabled] .btn-primary,
+.btn-primary.disabled:hover,
+.btn-primary[disabled]:hover,
+fieldset[disabled] .btn-primary:hover,
+.btn-primary.disabled:focus,
+.btn-primary[disabled]:focus,
+fieldset[disabled] .btn-primary:focus,
+.btn-primary.disabled:active,
+.btn-primary[disabled]:active,
+fieldset[disabled] .btn-primary:active,
+.btn-primary.disabled.active,
+.btn-primary[disabled].active,
+fieldset[disabled] .btn-primary.active {
+  border-color: HelveticaNeue, Helvetica, Arial, sans-serif;
+  background-color: HelveticaNeue, Helvetica, Arial, sans-serif;
+}
+
+.btn-primary .badge {
+  color: HelveticaNeue, Helvetica, Arial, sans-serif;
+  background-color: #fff;
+}
+
+.btn-xl {
+  padding: 20px 40px;
+  border-color: HelveticaNeue, Helvetica, Arial, sans-serif;
+  border-radius: 3px;
+  text-transform: uppercase;
+  font-family: HelveticaNeue, Helvetica, Arial, sans-serif;
+  font-size: 18px;
+  font-weight: 700;
+  color: #fff;
+  background-color: HelveticaNeue, Helvetica, Arial, sans-serif;
+}
+
+.btn-xl:hover,
+.btn-xl:focus,
+.btn-xl:active,
+.btn-xl.active,
+.open .dropdown-toggle.btn-xl {
+  border-color: HelveticaNeue, Helvetica, Arial, sans-serif;
+  color: #fff;
+  background-color: HelveticaNeue-Thin, Helvetica, Arial, sans-serif;
+}
+
+.btn-xl:active,
+.btn-xl.active,
+.open .dropdown-toggle.btn-xl {
+  background-image: none;
+}
+
+.btn-xl.disabled,
+.btn-xl[disabled],
+fieldset[disabled] .btn-xl,
+.btn-xl.disabled:hover,
+.btn-xl[disabled]:hover,
+fieldset[disabled] .btn-xl:hover,
+.btn-xl.disabled:focus,
+.btn-xl[disabled]:focus,
+fieldset[disabled] .btn-xl:focus,
+.btn-xl.disabled:active,
+.btn-xl[disabled]:active,
+fieldset[disabled] .btn-xl:active,
+.btn-xl.disabled.active,
+.btn-xl[disabled].active,
+fieldset[disabled] .btn-xl.active {
+  border-color: HelveticaNeue, Helvetica, Arial, sans-serif;
+  background-color: HelveticaNeue, Helvetica, Arial, sans-serif;
+}
+
+.btn-xl .badge {
+  color: HelveticaNeue, Helvetica, Arial, sans-serif;
+  background-color: #fff;
+}
+
+.navbar-default {
+  border-color: transparent;
+  background-color: #222;
+}
+
+.navbar-default .navbar-brand {
+  font-family: 'Kaushan Script', 'Helvetica Neue', Helvetica, Arial, cursive;
+  color: HelveticaNeue, Helvetica, Arial, sans-serif;
+}
+
+.navbar-default .navbar-brand:hover,
+.navbar-default .navbar-brand:focus,
+.navbar-default .navbar-brand:active,
+.navbar-default .navbar-brand.active {
+  color: HelveticaNeue-Thin, Helvetica, Arial, sans-serif;
+}
+
+.navbar-default .navbar-collapse {
+  border-color: rgba(255, 255, 255, 0.02);
+}
+
+.navbar-default .navbar-toggle {
+  border-color: HelveticaNeue, Helvetica, Arial, sans-serif;
+  background-color: HelveticaNeue, Helvetica, Arial, sans-serif;
+}
+
+.navbar-default .navbar-toggle .icon-bar {
+  background-color: #fff;
+}
+
+.navbar-default .navbar-toggle:hover,
+.navbar-default .navbar-toggle:focus {
+  background-color: HelveticaNeue, Helvetica, Arial, sans-serif;
+}
+
+.navbar-default .nav li a {
+  text-transform: uppercase;
+  font-family: HelveticaNeue, Helvetica, Arial, sans-serif;
+  font-weight: 400;
+  letter-spacing: 1px;
+  color: #fff;
+  -webkit-transition: all ease 0.35s;
+  -moz-transition: all ease 0.35s;
+  transition: all ease 0.35s;
+}
+
+.navbar-default .nav li a:hover,
+.navbar-default .nav li a:focus {
+  outline: 0;
+  color: HelveticaNeue, Helvetica, Arial, sans-serif;
+}
+
+.navbar-default .navbar-nav > .active > a {
+  border-radius: 0;
+  color: #fff;
+  background-color: HelveticaNeue, Helvetica, Arial, sans-serif;
+}
+
+.navbar-default .navbar-nav > .active > a:hover,
+.navbar-default .navbar-nav > .active > a:focus {
+  color: #fff;
+  background-color: HelveticaNeue-Thin, Helvetica, Arial, sans-serif;
+}
+
+@media (min-width: 768px) {
+  .navbar-default {
+    padding: 25px 0;
+    border: 0;
+    background-color: transparent;
+    -webkit-transition: padding 0.3s;
+    -moz-transition: padding 0.3s;
+    transition: padding 0.3s;
+  }
+
+  .navbar-default .navbar-brand {
+    font-size: 2em;
+    -webkit-transition: all 0.3s;
+    -moz-transition: all 0.3s;
+    transition: all 0.3s;
+  }
+
+  .navbar-default .navbar-nav > .active > a {
+    border-radius: 3px;
+  }
+
+  .navbar-default.navbar-shrink {
+    padding: 10px 0;
+    background-color: #222;
+  }
+
+  .navbar-default.navbar-shrink .navbar-brand {
+    font-size: 1.5em;
+  }
+}
+
+header {
+  text-align: center;
+  color: #fff;
+  background-attachment: scroll;
+  /*background-image: url('../img/header-bg.png');*/
+  background-position: center center;
+  background-repeat: none;
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  background-size: cover;
+  -o-background-size: cover;
+}
+
+header .intro-text {
+  padding-top: 100px;
+  padding-bottom: 50px;
+}
+
+header .intro-text .intro-lead-in {
+  margin-bottom: 25px;
+  font-family: HelveticaNeue-Thin, Helvetica, Arial, sans-serif;
+  font-size: 22px;
+  font-style: italic;
+  line-height: 22px;
+}
+
+header .intro-text .intro-heading {
+  margin-bottom: 25px;
+  text-transform: uppercase;
+  font-family: HelveticaNeue, Helvetica, Arial, sans-serif;
+  font-size: 50px;
+  font-weight: 700;
+  line-height: 50px;
+}
+
+@media (min-width: 768px) {
+  header .intro-text {
+    padding-top: 300px;
+    padding-bottom: 200px;
+  }
+
+  header .intro-text .intro-lead-in {
+    margin-bottom: 25px;
+    font-family: HelveticaNeue-Thin, Helvetica, Arial, sans-serif;
+    font-size: 40px;
+    font-style: italic;
+    line-height: 40px;
+  }
+
+  header .intro-text .intro-heading {
+    margin-bottom: 50px;
+    text-transform: uppercase;
+    font-family: HelveticaNeue, Helvetica, Arial, sans-serif;
+    font-size: 75px;
+    font-weight: 700;
+    line-height: 75px;
+  }
+}
+
+section {
+  padding: 100px 0;
+}
+
+section h2.section-heading {
+  margin-top: 0;
+  margin-bottom: 15px;
+  font-size: 40px;
+}
+
+section h3.section-subheading {
+  margin-bottom: 75px;
+  text-transform: none;
+  font-family: HelveticaNeue-Thin, Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  font-style: italic;
+  font-weight: 400;
+}
+
+@media (min-width: 768px) {
+  section {
+    padding: 150px 0;
+  }
+}
+
+.service-heading {
+  margin: 15px 0;
+  text-transform: none;
+}
+
+#portfolio .portfolio-item {
+  right: 0;
+  margin: 0 0 15px;
+}
+
+#portfolio .portfolio-item .portfolio-link {
+  display: block;
+  position: relative;
+  margin: 0 auto;
+  max-width: 400px;
+}
+
+#portfolio .portfolio-item .portfolio-link .portfolio-hover {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  -webkit-transition: all ease 0.5s;
+  -moz-transition: all ease 0.5s;
+  transition: all ease 0.5s;
+  background: rgba(254, 209, 54, 0.9); /* Fallback when no plugin support */
+  background: rgba(var(--primary) | hex_to_rgb | join: ','}}, 0.9);
+}
+
+#portfolio .portfolio-item .portfolio-link .portfolio-hover:hover {
+  opacity: 1;
+}
+
+#portfolio
+  .portfolio-item
+  .portfolio-link
+  .portfolio-hover
+  .portfolio-hover-content {
+  position: absolute;
+  top: 50%;
+  width: 100%;
+  height: 20px;
+  margin-top: -12px;
+  text-align: center;
+  font-size: 20px;
+  color: #fff;
+}
+
+#portfolio
+  .portfolio-item
+  .portfolio-link
+  .portfolio-hover
+  .portfolio-hover-content
+  i {
+  margin-top: -12px;
+}
+
+#portfolio
+  .portfolio-item
+  .portfolio-link
+  .portfolio-hover
+  .portfolio-hover-content
+  h3,
+#portfolio
+  .portfolio-item
+  .portfolio-link
+  .portfolio-hover
+  .portfolio-hover-content
+  h4 {
+  margin: 0;
+}
+
+#portfolio .portfolio-item .portfolio-caption {
+  margin: 0 auto;
+  padding: 25px;
+  max-width: 400px;
+  text-align: center;
+  background-color: #fff;
+}
+
+#portfolio .portfolio-item .portfolio-caption h4 {
+  margin: 0;
+  text-transform: none;
+}
+
+#portfolio .portfolio-item .portfolio-caption p {
+  margin: 0;
+  font-family: HelveticaNeue-Thin, Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  font-style: italic;
+}
+
+#portfolio * {
+  z-index: 2;
+}
+
+@media (min-width: 767px) {
+  #portfolio .portfolio-item {
+    margin: 0 0 30px;
+  }
+}
+
+.timeline {
+  position: relative;
+  padding: 0;
+  list-style: none;
+}
+
+.timeline:before {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 40px;
+  width: 2px;
+  margin-left: -1.5px;
+  background-color: #f1f1f1;
+}
+
+.timeline > li {
+  position: relative;
+  margin-bottom: 50px;
+  min-height: 50px;
+}
+
+.timeline > li:before,
+.timeline > li:after {
+  content: ' ';
+  display: table;
+}
+
+.timeline > li:after {
+  clear: both;
+}
+
+.timeline > li .timeline-panel {
+  float: right;
+  position: relative;
+  width: 100%;
+  padding: 0 20px 0 100px;
+  text-align: left;
+}
+
+.timeline > li .timeline-panel:before {
+  right: auto;
+  left: -15px;
+  border-right-width: 15px;
+  border-left-width: 0;
+}
+
+.timeline > li .timeline-panel:after {
+  right: auto;
+  left: -14px;
+  border-right-width: 14px;
+  border-left-width: 0;
+}
+
+.timeline > li .timeline-image {
+  z-index: 100;
+  position: absolute;
+  left: 0;
+  width: 80px;
+  height: 80px;
+  margin-left: 0;
+  border: 7px solid #f1f1f1;
+  border-radius: 100%;
+  text-align: center;
+  color: #fff;
+  background-color: HelveticaNeue, Helvetica, Arial, sans-serif;
+}
+
+.timeline > li .timeline-image h4 {
+  margin-top: 12px;
+  font-size: 10px;
+  line-height: 14px;
+}
+
+.timeline > li.timeline-inverted > .timeline-panel {
+  float: right;
+  padding: 0 20px 0 100px;
+  text-align: left;
+}
+
+.timeline > li.timeline-inverted > .timeline-panel:before {
+  right: auto;
+  left: -15px;
+  border-right-width: 15px;
+  border-left-width: 0;
+}
+
+.timeline > li.timeline-inverted > .timeline-panel:after {
+  right: auto;
+  left: -14px;
+  border-right-width: 14px;
+  border-left-width: 0;
+}
+
+.timeline > li:last-child {
+  margin-bottom: 0;
+}
+
+.timeline .timeline-heading h4 {
+  margin-top: 0;
+  color: inherit;
+}
+
+.timeline .timeline-heading h4.subheading {
+  text-transform: none;
+}
+
+.timeline .timeline-body > p,
+.timeline .timeline-body > ul {
+  margin-bottom: 0;
+}
+
+@media (min-width: 768px) {
+  .timeline:before {
+    left: 50%;
+  }
+
+  .timeline > li {
+    margin-bottom: 100px;
+    min-height: 100px;
+  }
+
+  .timeline > li .timeline-panel {
+    float: left;
+    width: 41%;
+    padding: 0 20px 20px 30px;
+    text-align: right;
+  }
+
+  .timeline > li .timeline-image {
+    left: 50%;
+    width: 100px;
+    height: 100px;
+    margin-left: -50px;
+  }
+
+  .timeline > li .timeline-image h4 {
+    margin-top: 16px;
+    font-size: 13px;
+    line-height: 18px;
+  }
+
+  .timeline > li.timeline-inverted > .timeline-panel {
+    float: right;
+    padding: 0 30px 20px 20px;
+    text-align: left;
+  }
+}
+
+@media (min-width: 992px) {
+  .timeline > li {
+    min-height: 150px;
+  }
+
+  .timeline > li .timeline-panel {
+    padding: 0 20px 20px;
+  }
+
+  .timeline > li .timeline-image {
+    width: 150px;
+    height: 150px;
+    margin-left: -75px;
+  }
+
+  .timeline > li .timeline-image h4 {
+    margin-top: 30px;
+    font-size: 18px;
+    line-height: 26px;
+  }
+
+  .timeline > li.timeline-inverted > .timeline-panel {
+    padding: 0 20px 20px;
+  }
+}
+
+@media (min-width: 1200px) {
+  .timeline > li {
+    min-height: 170px;
+  }
+
+  .timeline > li .timeline-panel {
+    padding: 0 20px 20px 100px;
+  }
+
+  .timeline > li .timeline-image {
+    width: 170px;
+    height: 170px;
+    margin-left: -85px;
+  }
+
+  .timeline > li .timeline-image h4 {
+    margin-top: 40px;
+  }
+
+  .timeline > li.timeline-inverted > .timeline-panel {
+    padding: 0 100px 20px 20px;
+  }
+}
+
+.team-member {
+  margin-bottom: 50px;
+  text-align: center;
+}
+
+.team-member img {
+  margin: 0 auto;
+  border: 7px solid #fff;
+}
+
+.team-member h4 {
+  margin-top: 25px;
+  margin-bottom: 0;
+  text-transform: none;
+}
+
+.team-member p {
+  margin-top: 0;
+}
+
+aside.clients img {
+  margin: 50px auto;
+}
+
+section#contact {
+  background-color: #222;
+  /* background-image: url('../img/map-image.png'); */
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+section#contact .section-heading {
+  color: #fff;
+}
+
+section#contact .form-group {
+  margin-bottom: 25px;
+}
+
+section#contact .form-group input,
+section#contact .form-group textarea {
+  padding: 20px;
+}
+
+section#contact .form-group input.form-control {
+  height: auto;
+}
+
+section#contact .form-group textarea.form-control {
+  height: 236px;
+}
+
+section#contact .form-control:focus {
+  border-color: HelveticaNeue, Helvetica, Arial, sans-serif;
+  box-shadow: none;
+}
+
+section#contact::-webkit-input-placeholder {
+  text-transform: uppercase;
+  font-family: HelveticaNeue, Helvetica, Arial, sans-serif;
+  font-weight: 700;
+  color: #bbb;
+}
+
+section#contact:-moz-placeholder {
+  text-transform: uppercase;
+  font-family: HelveticaNeue, Helvetica, Arial, sans-serif;
+  font-weight: 700;
+  color: #bbb;
+}
+
+section#contact::-moz-placeholder {
+  text-transform: uppercase;
+  font-family: HelveticaNeue, Helvetica, Arial, sans-serif;
+  font-weight: 700;
+  color: #bbb;
+}
+
+section#contact:-ms-input-placeholder {
+  text-transform: uppercase;
+  font-family: HelveticaNeue, Helvetica, Arial, sans-serif;
+  font-weight: 700;
+  color: #bbb;
+}
+
+section#contact .text-danger {
+  color: #e74c3c;
+}
+
+footer {
+  padding: 25px 0;
+  text-align: center;
+}
+
+footer span.copyright {
+  text-transform: uppercase;
+  text-transform: none;
+  font-family: HelveticaNeue, Helvetica, Arial, sans-serif;
+  line-height: 40px;
+}
+
+footer ul.quicklinks {
+  margin-bottom: 0;
+  text-transform: uppercase;
+  text-transform: none;
+  font-family: HelveticaNeue, Helvetica, Arial, sans-serif;
+  line-height: 40px;
+}
+
+ul.social-buttons {
+  margin-bottom: 0;
+}
+
+ul.social-buttons li a {
+  display: block;
+  width: 40px;
+  height: 40px;
+  border-radius: 100%;
+  font-size: 20px;
+  line-height: 40px;
+  outline: 0;
+  color: #fff;
+  background-color: #222;
+  -webkit-transition: all 0.3s;
+  -moz-transition: all 0.3s;
+  transition: all 0.3s;
+}
+
+ul.social-buttons li a:hover,
+ul.social-buttons li a:focus,
+ul.social-buttons li a:active {
+  background-color: HelveticaNeue, Helvetica, Arial, sans-serif;
+}
+
+.btn:focus,
+.btn:active,
+.btn.active,
+.btn:active:focus {
+  outline: 0;
+}
+
+.portfolio-modal .modal-content {
+  padding: 100px 0;
+  min-height: 100%;
+  border: 0;
+  border-radius: 0;
+  text-align: center;
+  background-clip: border-box;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+
+.portfolio-modal .modal-content h2 {
+  margin-bottom: 15px;
+  font-size: 3em;
+}
+
+.portfolio-modal .modal-content p {
+  margin-bottom: 30px;
+}
+
+.portfolio-modal .modal-content p.item-intro {
+  margin: 20px 0 30px;
+  font-family: HelveticaNeue-Thin, Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  font-style: italic;
+}
+
+.portfolio-modal .modal-content ul.list-inline {
+  margin-top: 0;
+  margin-bottom: 30px;
+}
+
+.portfolio-modal .modal-content img {
+  margin-bottom: 30px;
+}
+
+.portfolio-modal .close-modal {
+  position: absolute;
+  top: 25px;
+  right: 25px;
+  width: 75px;
+  height: 75px;
+  background-color: transparent;
+  cursor: pointer;
+}
+
+.portfolio-modal .close-modal:hover {
+  opacity: 0.3;
+}
+
+.portfolio-modal .close-modal .lr {
+  z-index: 1051;
+  width: 1px;
+  height: 75px;
+  margin-left: 35px;
+  background-color: #222;
+  -webkit-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  transform: rotate(45deg);
+}
+
+.portfolio-modal .close-modal .lr .rl {
+  z-index: 1052;
+  width: 1px;
+  height: 75px;
+  background-color: #222;
+  -webkit-transform: rotate(90deg);
+  -ms-transform: rotate(90deg);
+  transform: rotate(90deg);
+}
+
+::-moz-selection {
+  text-shadow: none;
+  background: HelveticaNeue, Helvetica, Arial, sans-serif;
+}
+
+::selection {
+  text-shadow: none;
+  background: HelveticaNeue, Helvetica, Arial, sans-serif;
+}
+
+img::selection {
+  background: 0 0;
+}
+
+img::-moz-selection {
+  background: 0 0;
+}
+
+body {
+  webkit-tap-highlight-color: HelveticaNeue, Helvetica, Arial, sans-serif;
+}
diff --git a/client/js/app/src/app/styles/vespa.css b/client/js/app/src/app/styles/vespa.css
new file mode 100644
index 00000000000..4017f0275c3
--- /dev/null
+++ b/client/js/app/src/app/styles/vespa.css
@@ -0,0 +1,752 @@
+/**
+* Copyright Yahoo. Licensed under the terms of the Apache 2.0 license. See LICENSE in the project root.
+* Based on vespa.css from https://github.com/vespa-engine/frontpage for header- and footer-elements
+*/
+:root {
+  --primary: #188fff;
+  --secondary: #003abc;
+  --secondary-dark: #333;
+  --muted: #777;
+
+  --fontprimary: 'Hind Madurai', Helvetica, Arial, sans-serif;
+  --fontsecondary: 'Hind Madurai', Helvetica, Arial, sans-serif;
+}
+
+.bg-light-blue {
+  background-image: linear-gradient(
+    -1deg,
+    rgba(63, 157, 216, 0.08) 0%,
+    rgba(163, 195, 215, 0.08) 97%
+  );
+}
+
+.yql {
+}
+
+.yql:focus {
+  outline: none;
+}
+
+.information {
+  margin-left: -40px;
+  margin-right: 28px;
+  margin-top: -2.5px;
+  opacity: 0.6;
+  transition: transform 0.1s; /* Animation */
+}
+
+.information:hover {
+  transform: scale(1.05);
+}
+
+/*** Tooltips! ***/
+.tip {
+  visibility: visible;
+  border-bottom: 1px dotted;
+  position: relative;
+  cursor: help;
+  text-decoration: none;
+  color: #fff !important;
+}
+.tip span {
+  display: none;
+  z-index: 100;
+  position: absolute;
+  padding: 0.6em;
+  padding-left: 1em;
+  top: 1.5em;
+  left: 2.4em;
+  width: 15em;
+  background-color: #4da2d6;
+  border: 1px solid #ffffff;
+  border-radius: 0.5em;
+}
+
+.tip span td {
+  text-align: left;
+  vertical-align: top;
+  padding-left: 5px;
+}
+
+.tip span a {
+  text-decoration: none;
+  color: white;
+}
+
+.tip:hover span {
+  display: inline-block;
+}
+.sg-question-set,
+.sg-type-radio ul.sg-list-vertical li,
+.sg-type-checkbox ul.sg-list-vertical li,
+.sg-question-options,
+.sg-type-radio-likert .sg-question-options,
+.sg-type-table .sg-question-options,
+.sg-instructions {
+  overflow: visible;
+}
+
+section h2.section-heading,
+section h2.section-subheading,
+section h3.section-heading,
+section h3.section-subheading {
+  text-transform: none;
+  font-family: 'Hind Madurai', Helvetica, Arial, sans-serif;
+  font-weight: normal;
+  font-style: normal;
+}
+
+section h2.section-heading,
+section h3.section-heading {
+  font-size: 50px;
+  color: #3f9dd8;
+  margin-bottom: 5px;
+}
+
+section h2.section-subheading,
+section h3.section-subheading {
+  line-height: 26px;
+  margin-top: 0;
+}
+
+header .help-title {
+  color: #ffc43c;
+  text-transform: uppercase;
+  font-weight: bold;
+}
+
+.text-muted {
+  color: #303030;
+}
+
+#banner {
+  background-color: #336699;
+  color: #ffffff;
+  font-weight: bold;
+  padding-bottom: 2px;
+  padding-top: 2px;
+  width: 100%;
+}
+
+#banner a {
+  color: #ffffff;
+  text-decoration: underline;
+}
+
+.navbar-default {
+  background-color: #005a8e;
+  padding: 0;
+  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
+}
+
+.navbar-default .navbar-header {
+  margin-left: 13px;
+}
+
+.navbar-default .navbar-brand {
+  background: transparent url('https://vespa.ai/assets/vespa-logo.png')
+    no-repeat;
+  background-size: contain;
+  direction: ltr;
+  text-indent: -9000px;
+  height: 28px;
+  width: 100px;
+  display: inline-block;
+  font-family: 'Hind Madurai', Helvetica, Arial, sans-serif;
+  font-weight: bold;
+  color: var(--primary);
+  margin-top: 16px;
+  margin-left: 10px;
+}
+
+.navbar-nav .nav-link {
+  font-weight: bold;
+  font-size: 14px;
+  letter-spacing: 1px;
+  color: #ffffff;
+  text-transform: none;
+  font-family: 'Hind Madurai', Helvetica, Arial, sans-serif;
+}
+
+.navbar-default .navbar-nav > a:hover,
+.navbar-default .navbar-nav > .active > a,
+.navbar-default .navbar-nav > .active > a:hover {
+  color: #ffc43c;
+}
+
+.navbar-default .navbar-toggler-icon {
+  background-image: url('data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 30 30%27%3e%3cpath stroke=%27rgba%280, 0, 0, 0.55%29%27 stroke-linecap=%27round%27 stroke-miterlimit=%2710%27 stroke-width=%272%27 d=%27M4 7h22M4 15h22M4 23h22%27/%3e%3c/svg%3e');
+}
+
+.navbar-default .navbar-toggler {
+  margin-right: 45px;
+  border: 1px solid;
+  border-color: #1a242f;
+}
+.navbar-toggler:hover,
+.navbar-default .navbar-toggler:focus {
+  background-color: #1a242f;
+  box-shadow: 0 0 0 0;
+}
+
+.navbar-toggle {
+  margin-right: 45px;
+}
+
+/* Trick to prevent anchored links to hide heading behind navbar */
+section[id]:before {
+  display: block;
+  content: ' ';
+  margin-top: -80px;
+  height: 100px;
+  visibility: hidden;
+}
+
+header {
+  /*background-image: linear-gradient(0deg, #98C1DB 7%, #3F9DD8 100%); */
+  background-color: #005a8e;
+  min-height: 1150px;
+}
+
+@media (max-height: 1150px) {
+  header {
+    min-height: 100vh;
+  }
+}
+
+header .intro {
+  margin-top: -80px;
+  max-width: 350px;
+  padding-top: 10px;
+  padding-bottom: 50px;
+}
+
+header .intro-logo {
+  max-width: 120px;
+  padding-bottom: 30px;
+}
+
+header .intro-button {
+  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
+  padding-left: 50px;
+  padding-right: 50px;
+}
+
+header .intro-long {
+  line-height: 27px;
+  font-size: 16px;
+  padding-bottom: 20px;
+}
+
+header .intro-param {
+  line-height: 27px;
+  font-size: 16px;
+  padding-bottom: 0px;
+  margin-bottom: 5px;
+}
+header .response {
+  line-height: 27px;
+  font-size: 20px;
+  padding-top: 10px;
+  padding-bottom: 8px;
+}
+
+header .methodselector {
+  font-size: 15px;
+  color: #fff;
+  background-color: #99c1da;
+  width: 70px;
+  height: 25px;
+  border-width: 0px;
+  -o-transition: 0.3s;
+  -ms-transition: 0.3s;
+  -moz-transition: 0.3s;
+  -webkit-transition: 0.3s;
+  transition: 0.3s;
+}
+header .intro-help:hover {
+  background-color: #4ea2d6 !important;
+}
+header .methodselector:hover {
+  background-color: #79b4d8;
+}
+header .button:hover {
+  background-color: #79b4d8;
+}
+header .removeRow:hover {
+  background-color: #79b4d8;
+}
+header .addRow:hover {
+  background-color: #79b4d8;
+}
+header .showJSON:hover {
+  background-color: #79b4d8;
+}
+header .copyURL:hover {
+  background-color: #79b4d8;
+}
+header .copyJSON:hover {
+  background-color: #79b4d8;
+}
+header .methodselector:focus {
+  outline: none;
+}
+header .textbox:focus {
+  outline: none;
+}
+header .input:focus {
+  outline: none;
+}
+header .responsebox::selection {
+  background-color: grey;
+}
+header .textbox::selection {
+  background-color: grey;
+}
+header .input::selection {
+  background-color: grey;
+}
+header .propvalue::selection {
+  background-color: grey;
+}
+header .responsebox:focus {
+  outline: none;
+}
+header .responseinfo:focus {
+  outline: none;
+}
+header .propvalue:focus {
+  outline: none;
+}
+header .addpropsbutton:focus {
+  outline: none;
+}
+
+header .input {
+  color: #000;
+  width: 190px;
+  border-width: 0px;
+  margin-right: 2px;
+}
+
+header .input2 {
+  color: #000;
+  width: 175px;
+  border-width: 0px;
+  margin-right: 2px;
+}
+
+header .textbox {
+  color: #000;
+  padding-left: 2px;
+}
+
+header .responsebox {
+  color: #000;
+  background-color: #fff;
+}
+
+header .responseinfo {
+  color: #d6e6f0;
+  text-align: center;
+  border-width: 0px;
+  background-color: transparent;
+}
+
+header .propvalue {
+  color: #000;
+  background-color: #fff;
+  width: 175px;
+  border-width: 0px;
+  margin-bottom: 3px;
+}
+
+header .propvalue::-webkit-input-placeholder {
+  /* Safari, Chrome(, Opera?) */
+  color: gray;
+  font-style: italic;
+}
+header .propvalue:-moz-placeholder {
+  /* Firefox 18- */
+  color: gray;
+  font-style: italic;
+}
+header .propvalue:-moz-placeholder {
+  /* Firefox 19+ */
+  color: gray;
+  font-style: italic;
+}
+header .propvalue-ms-input-placeholder {
+  /* IE (10+?) */
+  color: gray;
+  font-style: italic;
+}
+
+header .button {
+  font-size: 15px;
+  color: #fff;
+  background-color: #99c1da;
+  width: 70px;
+  height: 25px;
+  border-width: 0px;
+  border-radius: 5px;
+  padding: 0px;
+}
+header .button:focus {
+  outline: none;
+}
+
+header .addpropsbutton {
+  font-size: 15px;
+  color: #fff;
+  background-color: #99c1da;
+  width: 175px;
+  height: 23px;
+  border-width: 0px;
+  border-radius: 5px;
+  padding: 0px;
+  margin-left: 2px;
+  margin-bottom: 3px;
+}
+header .addRow {
+  font-size: 15px;
+  color: #fff;
+  background-color: #99c1da;
+  width: 70px;
+  height: 25px;
+  border-width: 0px;
+  border-radius: 5px;
+  padding: 0px;
+}
+header .addRow:focus {
+  outline: none;
+}
+
+header .removeRow {
+  font-size: 16px;
+  color: #fff;
+  background-color: #99c1da;
+  width: 35px;
+  height: 23px;
+  border-width: 0px;
+  border-radius: 5px;
+  padding: 0px;
+  padding-bottom: 2px;
+  margin-left: 3px;
+  text-align: center;
+  line-height: normal;
+}
+header .removeRow:focus {
+  outline: none;
+}
+
+header .json:focus {
+  outline: none;
+}
+header .copyJSON:focus {
+  outline: none;
+}
+header .showJSON:focus {
+  outline: none;
+}
+header .copyURL:focus {
+  outline: none;
+}
+header .pasteJSON:focus {
+  outline: none;
+}
+
+header .copyJSON {
+  font-size: 15px;
+  color: #fff;
+  background-color: #99c1da;
+  width: 130px;
+  height: 25px;
+  border-width: 0px;
+  border-radius: 5px;
+  padding-left: 1px;
+  margin-top: 10px;
+  margin-bottom: 20px;
+  margin-right: 2px;
+  display: none;
+}
+
+header .showJSON {
+  font-size: 15px;
+  color: #fff;
+  background-color: #99c1da;
+  width: 140px;
+  height: 25px;
+  border-width: 0px;
+  border-radius: 5px;
+  padding: 0px;
+  margin-top: 5px;
+  margin-bottom: 10px;
+}
+
+header .pasteJSON {
+  font-size: 15px;
+  color: #fff;
+  background-color: #99c1da;
+  width: 140px;
+  height: 25px;
+  border-width: 0px;
+  border-radius: 5px;
+  padding-left: 0px;
+  padding-bottom: 2px;
+  margin-top: 35px;
+  margin-bottom: 10px;
+}
+
+header .copyURL {
+  font-size: 15px;
+  color: #fff;
+  background-color: #99c1da;
+  width: 130px;
+  height: 25px;
+  border-width: 0px;
+  border-radius: 5px;
+  padding-left: 1px;
+  margin-top: 25px;
+  margin-bottom: 10px;
+  margin-left: 2px;
+  display: none;
+}
+
+header .intro .intro-lead-in {
+  font-style: normal;
+  font-size: 22px;
+  line-height: 50px;
+  margin-bottom: 25px;
+  font-family: 'Hind Madurai', Helvetica, Arial, sans-serif;
+}
+
+header .intro .intro-heading {
+  font-style: normal;
+}
+
+header .intro-button {
+  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
+}
+
+header .intro .btn-xl {
+  background: #ffffff;
+  border: 1px solid #3f9dd8;
+  border-radius: 2px;
+  font-size: 20px;
+  color: #3f9dd8;
+  font-weight: normal;
+  text-transform: none;
+  font-family: 'Hind Madurai', Helvetica, Arial, sans-serif;
+}
+
+header span {
+  display: inline-block;
+  position: inherit;
+  margin-top: 10px;
+  /*padding-left: 50px;*/
+  transform: translateX(-50%);
+  background: transparent;
+  border: none !important;
+  font-size: 0;
+}
+
+header .intro-copy {
+  background: transparent;
+  border: none !important;
+  font-size: 0;
+}
+
+header .intro-help {
+  display: inline-block;
+  margin-top: 15px;
+  width: 134px;
+  height: 45px;
+  background-color: transparent;
+  border: none !important;
+  font-size: 0;
+
+  border-top-left-radius: 30%;
+  border-top-right-radius: 29%;
+  border-bottom-right-radius: 24%;
+  border-bottom-left-radius: 26%;
+}
+
+header .intro-refresh {
+  display: inline-block;
+  margin-top: 15px;
+  /* transform: translateX(-50%); */
+  background: transparent;
+  border: none !important;
+  font-size: 0;
+}
+
+@media (min-height: 1150px) {
+  header .intro-down-arrow {
+    /* Hard code top: 1150 (height of top section) - 20 (bottom) - 36 (image height) = 1094 */
+    top: 1094px;
+  }
+}
+
+@media (max-height: 825px) {
+  header .intro-down-arrow {
+    display: none;
+  }
+}
+
+@media (min-width: 768px) {
+  header .intro {
+    padding-top: 200px;
+    padding-bottom: 200px;
+    max-width: 620px;
+  }
+
+  header .intro-logo {
+    max-width: 238px;
+    padding-bottom: 70px;
+  }
+
+  header .intro .intro-lead-in {
+    font-size: 51px;
+    font-style: normal;
+    line-height: 50px;
+  }
+
+  header .intro .intro-long {
+    margin-left: 80px;
+    margin-right: 80px;
+  }
+
+  header .intro .intro-heading {
+    margin-bottom: 25px;
+    font-size: 90px;
+    font-weight: 600;
+  }
+}
+
+section {
+  padding: 50px 0;
+}
+
+section h3.section-subheading {
+  margin-bottom: 50px;
+  font-weight: normal;
+}
+
+@media (min-width: 768px) {
+  section {
+    padding: 50px 0;
+  }
+}
+
+footer .row {
+  font-size: 12px;
+  text-align: left;
+}
+
+footer .row h4 {
+  font-size: 14px;
+  padding-left: 40px;
+}
+
+footer .row .quicklinks {
+  line-height: 25px;
+  list-style: none;
+  text-align: left;
+}
+
+footer .credits {
+  font-size: 10px;
+  text-align: center;
+}
+
+#description p {
+  font-weight: 300;
+  font-size: 25px;
+}
+
+footer {
+  font-size: 14px;
+  color: #ffffff;
+  background-color: #3f9dd8;
+  line-height: 22px;
+  letter-spacing: 0;
+  text-align: left;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+footer .footer-row {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+footer quicklinks {
+  font-size: 14px;
+  color: #ffffff;
+}
+
+footer ul.quicklinks {
+  margin: 0;
+  padding: 0;
+}
+
+footer .footer-title {
+  color: #ffc43c;
+  text-transform: uppercase;
+  font-weight: bold;
+}
+
+footer ul.quicklinks a {
+  font-size: 14px;
+  color: #ffffff;
+}
+
+footer .quicklink-section {
+  padding: 0;
+  min-width: 120px;
+}
+
+footer .credits {
+  float: left;
+  font-size: 12px;
+  font-weight: normal;
+  text-align: right;
+  font-family: 'Hind Madurai', Helvetica, Arial, sans-serif;
+}
+
+footer .credits a {
+  color: #ffffff;
+}
+
+footer .credits span {
+  color: #ffc43c;
+}
+
+footer a {
+  text-decoration: none;
+}
+
+footer .table {
+  width: fit-content;
+  margin-right: auto;
+  margin-left: auto;
+  float: left;
+  margin-bottom: 0em;
+}
+
+footer .table tbody th {
+  font-size: 13px;
+  padding-right: 2em;
+}
+
+footer table thead {
+  color: #ffc43c;
+}
+
+footer table tbody a {
+  color: #ffffff;
+}