diff --git a/_config.yml b/_config.yml
index 322c96eb..d0031a07 100644
--- a/_config.yml
+++ b/_config.yml
@@ -2,7 +2,13 @@
 
 remote_theme: mmistakes/minimal-mistakes@4.24.0
 #theme: minimal-mistakes-jekyll
-minimal_mistakes_skin: "midnight" # "default", "air", "aqua", "contrast", "dark", "dirt", "midnight", "mint", "neon", "plum", "sunrise"
+# Default minimal-mistakes skins
+#  - # "default", "air", "aqua", "contrast", "dark", "dirt", "mint", "neon", "plum", "sunrise"
+# Additional skins
+#  - "oi-midnight", "oi-light", "oi-dark"
+# NOTE: This one is not used at all, an d has no effect anymore, as we have our custom dynamic skin loading/swapping solution yet,
+#       that is turned on by default via "skin_switchable: true"
+minimal_mistakes_skin: "oi-light"
 skin_switchable: true
 
 # Disable caching of content to disk in order to skip creating a .jekyll-cache or similar directory
diff --git a/_includes/globals.html b/_includes/globals.html
new file mode 100644
index 00000000..2f51ee26
--- /dev/null
+++ b/_includes/globals.html
@@ -0,0 +1,73 @@
+{% comment %}
+<!-- Global variables, scripts that require an early access, go through liquid parsimg, and/or cannot be moved to main.min.js-->
+{% endcomment %}
+
+<script async="false">
+
+  const searchEnabled = {% if site.search == true %} true {% else %} false {% endif %};
+  const hasMastHead = {% if site.masthead != false %} true {% else %} false {% endif %};
+  const searchFromMastHead = {% if site.masthead != false and site.search_from_masthead == true %} true {% else %} false {% endif %};
+
+  const docRoot = '{{ site.baseurl }}';
+
+  function docPrefix() {
+    return (docRoot != '' ? docRoot + '/' : '');    
+  }
+
+  function setCookie(name, value, days = 365 * 100) {
+    var expires = "";
+    if (days) {
+      var date = new Date();
+      date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
+      expires = "; expires=" + date.toUTCString();
+    }
+    document.cookie = name + "=" + (value || "") + expires + "; path=/; SameSite=Strict";
+  }
+
+  function getCookie(name, defaultValue = null, saveIfMissing = false) {
+    var nameEQ = name + "=";
+    var ca = document.cookie.split(';');
+    for (var i = 0; i < ca.length; i++) {
+      var c = ca[i];
+      while (c.charAt(0) == ' ') {
+        c = c.substring(1, c.length);
+      }
+      if (c.indexOf(nameEQ) == 0) {
+        return c.substring(nameEQ.length, c.length);
+      }
+    }
+    if (saveIfMissing && defaultValue != null)
+      setCookie(name, defaultValue);
+    return defaultValue;
+  }
+
+  function compareDOMRect(rect1, rect2) {
+    return {
+      top: rect1.top === rect2.top,
+      right: rect1.right === rect2.right,
+      bottom: rect1.bottom === rect2.bottom,
+      left: rect1.left === rect2.left,
+      width: rect1.width === rect2.width,
+      height: rect1.height === rect2.height
+    };
+  }
+
+  function getElementPositionRelativeToRoot(element) {
+    var rect = element.getBoundingClientRect();
+
+    // Calculate the position relative to the document
+    var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
+    var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+
+    var position = {
+      top: rect.top + scrollTop,
+      left: rect.left + scrollLeft
+    };
+    return position;
+  }
+
+  function comparePositions(pos1, pos2) {
+    return pos1.top === pos2.top && pos1.left === pos2.left;
+  }
+
+</script>
diff --git a/_includes/head.html b/_includes/head.html
index 7711c92f..b238cd33 100644
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -10,6 +10,7 @@
 
 <script>document.documentElement.className = document.documentElement.className.replace(/\bno-js\b/g, '') + ' js ';</script>
 
+{% include globals.html %}
 {% include skins.html %}
 
 <link rel="preload" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5/css/all.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
diff --git a/_includes/masthead.html b/_includes/masthead.html
index 6d7e2bd5..3e9fe508 100644
--- a/_includes/masthead.html
+++ b/_includes/masthead.html
@@ -1,6 +1,17 @@
 {% capture logo_path %}{{ site.logo }}{% endcapture %}
 
 <div class="masthead {% if site.masthead.sticky == true %}sticky{% endif %}">
+
+  {% comment %}<!-- 
+    TODO: Far from perfect but working solution for now to have static (none moving) tooltips
+          It's satisfying now as 
+            - we do have only in the masthead such controls
+            - eliminates the need to add a real tooltip to each of the elements that require such a tooltip
+            - it aids the detection of wether the tooltip needs to be hiding (e.g on tooltip movements caused by scrolling)
+  -->{% endcomment %}
+  <span id="tooltip" class="tooltip"></span>
+  <span id="tooltipRenderer" class="tooltip visible"></span>
+
   <div class="masthead__inner-wrap">
     <div class="masthead__menu">
       <nav id="site-nav" class="greedy-nav">
@@ -36,11 +47,11 @@
         {% if site.search == true %}
           {% comment %}<!-- search__toggle is kept for backward compatibility -->{% endcomment %}
           <label class="sr-only" for="search-button">
-            {{ site.data.ui-text[site.locale].search_label_text | default: 'Toggle search (Shift + Ctrl + F or ESC to close)' }}
+            {{ site.data.ui-text[site.locale].search_label_text | default: 'Toggle search (`Shift + Ctrl + F`, ESC to close)' }}
           </label>
-          <button id="search-button" class="masthead_button search__toggle" type="button">
-            <span id="search_hint" class="">{{ site.data.ui-text[site.locale].search_label | default: "Toggle search (Shift + Ctrl + F or ESC to close)" }}</span>
-            <i class="masthead_button_icon fas fa-search" style="font-size: 120%;"></i>
+          <button id="search-button" class="masthead_button search__toggle" type="button" >
+            <i class="masthead_button_icon content-tooltip tooltip-align-center text-content-tooltip fas fa-search" style="font-size: 120%;"
+              data-tooltip-text="{{ site.data.ui-text[site.locale].search_label | default: 'Toggle search (`Shift + Ctrl + F`, ESC to close)' }}"></i>
           </button>
         {% endif %}
 
diff --git a/_includes/search/search_form.html b/_includes/search/search_form.html
index 4e366c1a..6a090b0f 100644
--- a/_includes/search/search_form.html
+++ b/_includes/search/search_form.html
@@ -3,10 +3,10 @@
   {%- case search_provider -%}
 
   {%- when "lunr" -%}
-    {% if site.search_from_masthead == false %}
+    {% if site.search_from_masthead == false or site.masthead == false %}
       {% include /search/search_input.html %}
     {% endif %}
-    <div id="results" class="results {% if site.search_from_masthead %}from-masthead{% else %}from-search-content{% endif %}"></div>
+    <div id="results" class="results {% if site.search_from_masthead and site.masthead != false %}from-masthead{% else %}from-search-content{% endif %}"></div>
 
   {%- when "google" -%}
     {% include /search/search_input.html %}
diff --git a/_includes/search/search_input.html b/_includes/search/search_input.html
index 191c90cc..822aaed7 100644
--- a/_includes/search/search_input.html
+++ b/_includes/search/search_input.html
@@ -2,12 +2,12 @@
 {%- case search_provider -%}
 
 {%- when "lunr" -%}
-  <form class="search-content__form {% if site.search_from_masthead %}from-masthead{% else %}from-search-content{% endif %}" 
+  <form class="search-content__form {% if site.search_from_masthead and site.masthead != false %}from-masthead{% else %}from-search-content{% endif %}" 
     onkeydown="return event.key != 'Enter';" role="search">
     <label class="sr-only" for="search">
       {{ site.data.ui-text[site.locale].search_label_text | default: 'Enter your search term...' }}
     </label>
-    <input type="search" id="search" class="search-input {% if site.search_from_masthead %}from-masthead{% else %}from-search-content{% endif %}" 
+    <input type="search" id="search" class="search-input {% if site.search_from_masthead and site.masthead != false %}from-masthead{% else %}from-search-content{% endif %}" 
       placeholder="{{ site.data.ui-text[site.locale].search_placeholder_text | default: 'Enter your search term...' }}" />    
     <a class="search-help content-tooltip tooltip-align-center full-content-tooltip nav-link fas fa-info-circle" href="{{ '/lunr_search_help.html' | relative_url }}"></a>
   </form>
diff --git a/_includes/skins.html b/_includes/skins.html
index a8482018..be080727 100644
--- a/_includes/skins.html
+++ b/_includes/skins.html
@@ -2,8 +2,7 @@
 <!-- Dynamic loading of the user selected skin stylesheet -->
 {% endcomment %}
 
-{% comment %}<!-- NOTE: the 'default' skin is in the 'main.css', see the main.scss file for details -->{% endcomment %}
-<link rel="stylesheet" id="skinedStylesheet" href="{{ '/assets/css/main.css' | relative_url }}">
+<link rel="stylesheet" id="skinedStylesheet" href="{{ '/assets/css/main_oi-light.css' | relative_url }}">
 
 <style>
   #full-page-container.full-page-container {
@@ -23,63 +22,74 @@
 
 <script async="false">
 
-  const docRoot = '{{ site.baseurl }}';
-  const darkSkin = 'midnight';
-  const lightSkin = 'default';
-  const searchEnabled = {% if site.search == true %} true {% else %} false {% endif %};
-  const searchFromMastHead = {% if site.search_from_masthead == true %} true {% else %} false {% endif %};
+  (function () {
+    const defaultDarkSkin = 'oi-dark';
+    const defaultLightSkin = 'oi-light';
 
-  function docPrefix() {
-    return (docRoot != '' ? docRoot + '/' : '');    
-  }
+    const selectedSkinStateKey = 'skin-state';
+    const selectedSkinBackgroundColorKey = 'skin-background-color'
+    const lightSkinKey = 'skin-light';
+    const darkSkinKey = 'skin-dark';
+  
+    const darkModeStateOn = 'dark';
+    const darkModeStateOff = 'light';
+
+    //selectedLightSkin = 'default';
+    //selectedDarkSkin = 'default';
+
+    function setSkinModeState(state) {
+      const stylesheet = document.getElementById('skinedStylesheet');
+      const skinName = getSkinForState(state);
 
-  function setCookie(name, value, days) {
-    var expires = "";
-    if (days) {
-      var date = new Date();
-      date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
-      expires = "; expires=" + date.toUTCString();
+      // TODO: It seems it is not always triggered on a href value change once it is loaded/cached
+      //       We might have to force save the new color somehow in a different way as well
+      //       (Maybe a delayed saveColorChanges from window.addEventListener("load", ...) bellow ?!?!
+      stylesheet.onload = saveColorChanges;
+      stylesheet.href = docPrefix() + '/assets/css/main' + (skinName == 'default' ? '' : '_' + skinName) + '.css';
+      
+      setCookie(selectedSkinStateKey, state);
     }
-    document.cookie = name + "=" + (value || "") + expires + "; path=/; SameSite=Strict";
-  }
 
-  function getCookie(name, defaultValue = null) {
-    var nameEQ = name + "=";
-    var ca = document.cookie.split(';');
-    for (var i = 0; i < ca.length; i++) {
-      var c = ca[i];
-      while (c.charAt(0) == ' ') {
-        c = c.substring(1, c.length);
-      }
-      if (c.indexOf(nameEQ) == 0) {
-        return c.substring(nameEQ.length, c.length);
-      }
+    function getLightSkin() {
+      return getCookie(lightSkinKey, defaultLightSkin, true);
     }
-    return defaultValue;
-  }
 
-  (function () {
-    function setSkin(skin) {
-      const stylesheet = document.getElementById('skinedStylesheet');
-      //stylesheet.onload = saveChanges;
-      stylesheet.href = docPrefix() + '/assets/css/main' + (skin == 'default' ? '' : '_' + skin) + '.css';
-      setCookie('skin', skin, 365 * 100);
+    function getDarkSkin() {
+      return getCookie(darkSkinKey, defaultDarkSkin, true);
     }
 
+    function getSkinModeState() {
+      return getCookie(selectedSkinStateKey, darkModeStateOff, true);
+    }
+    
+    function getSkinForState(state) {
+      return state == darkModeStateOn ? getDarkSkin() : getLightSkin();
+    }
+    
+    function getSelectedSkin() {
+      return getSkinForState(getSkinModeState());
+    }
+    
     function toggleSkin(event) {
-        if (getCookie('skin', 'default') == darkSkin) {
+        const currentSkinState = getSkinModeState();
+        if (currentSkinState == darkModeStateOff) {
           event.target.classList.remove('fa-toggle-on');
           event.target.classList.add('fa-toggle-off');
-          setSkin(lightSkin);
         }
         else {
           event.target.classList.remove('fa-toggle-off');
           event.target.classList.add('fa-toggle-on');
-          setSkin(darkSkin);
         }
+        setSkinModeState(currentSkinState == darkModeStateOff ? darkModeStateOn : darkModeStateOff);
         event.currentTarget.blur();
       }
 
+    function saveColorChanges() {
+      const htmlStyle = window.getComputedStyle(document.documentElement);
+      const backgroundColor = htmlStyle.backgroundColor;
+      setCookie(selectedSkinBackgroundColorKey, backgroundColor);
+    };    
+
     function toggleIcon(target, off) {
       if (off) {
         target.classList.remove('fa-toggle-on');
@@ -92,12 +102,9 @@
     }
     
     function toggleSkin(event) {
-      var off = getCookie('skin', 'default') == darkSkin;
+      var off = getSkinModeState() == darkModeStateOff;
       
-      if (off)
-        setSkin(lightSkin);
-      else
-        setSkin(darkSkin);
+      setSkinModeState(off ? darkModeStateOn : darkModeStateOff);
       toggleIcon(event.target, off);
 
       event.currentTarget.blur();
@@ -107,12 +114,6 @@
       half rendered content parts (it is better to see an empty content even if it might appear in a different bacground color that the skin has)
     */
     window.addEventListener("load", function () {
-      function saveChanges() {
-        const htmlStyle = window.getComputedStyle(document.documentElement);
-        const backgroundColor = htmlStyle.backgroundColor;
-        setCookie('skin-background-color', backgroundColor, 365 * 100);
-      };    
-
       var container = document.getElementById("full-page-container");
       if (container)
         container.classList.remove('hidden');
@@ -120,23 +121,27 @@
       // Why this is not working?!?!
       //document.body.style.removeProperty("backgroundColor");
       document.body.style.backgroundColor = "";
-      if (storedSkin !== 'default')
-        toggleIcon($('#skin-button').find('.masthead_button_icon')[0], false);
-  
+      
+      toggleIcon($('#skin-button').find('.masthead_button_icon')[0], getSkinModeState());
       $("#skin-button").on("click", toggleSkin);
 
-      saveChanges();
+      // TODO: See, setSkinModeState - stylesheet.onload
+      // setTimeout(function () {
+      //  saveColorChanges();
+      //}, 100);
     });
 
     document.addEventListener("DOMContentLoaded", function () {
-      const skinBackgroundColor = getCookie('skin-background-color');
+      const skinBackgroundColor = getCookie(selectedSkinBackgroundColorKey);
       if (skinBackgroundColor)
         document.body.style.backgroundColor = skinBackgroundColor;
     });
 
-    const storedSkin = getCookie('skin', 'default');
-    if (storedSkin !== 'default')
-      setSkin(storedSkin);
+    // These are just for always saving a default to the cookiestore if missing
+    getLightSkin();
+    getDarkSkin();
+
+    setSkinModeState(getSkinModeState());
 
   })();
 </script>
diff --git a/_js/custom/navigation.js b/_js/custom/navigation.js
index b2badba2..9bcf96cb 100644
--- a/_js/custom/navigation.js
+++ b/_js/custom/navigation.js
@@ -201,7 +201,7 @@ $(function () {
       // If 'docRoot' is found or it is not the last segment, return the next part after it as the collection name
       if (docIndex !== -1 && docIndex !== parts.length - 1)
         collection = parts[docIndex + 1];
-    }    
+    }
     return collection;
   }
 
@@ -315,36 +315,48 @@ $(function () {
   // This part should also handle the case when only the title presented. (a.k.a. not showing the tooltip in that case),
   // also responsible to create a uniform look and fell both for page title tooltips and other link tooltips. 
   //
-  function alterContentForTooltip(content, url, isFullPageContent) {
-    let tempContainer = document.createElement('div');
-    tempContainer.innerHTML = content;
-
-    hideTocIfNotNeeded(tempContainer, true);
-
-    // Remove/Override some default title style formatting to look better in the tooltip
-    var pageTitle = tempContainer.querySelector('#page-title');
-    if (pageTitle == null) {
-      // If there is no page title, replace the first heading with an item looks and behaves like the page title
-      // to have similar result both for page title tooltips and other link item tooltips
-      // FIXME: This magic 6 must be maintained together now with generate_links.rb (and other places ?!), eliminate it!
-      var firstHeading = tempContainer.querySelector("h2, h3, h4, h5, h6");
-      if (firstHeading) {
-        // Everything bellow must exist, so intentionally there's no error handling, let it rise
-        pageTitle = document.querySelector('#page-title').cloneNode(true);
-        pageTitle.id = firstHeading.id;
-
-        const anchorElement = pageTitle.querySelector("a");
-        anchorElement.textContent = firstHeading.textContent;
-        anchorElement.href = url;
-
-        tempContainer.replaceChild(pageTitle, firstHeading);
-      }
+  function alterContentForTooltip(content, url, isFullPageContent, isTextTooltip) {
+    var newContent = null;
+
+    if (isTextTooltip) {
+      // This would give the saem result as for the other tooltip contents
+      // but this kind of tooltip close to a real, one liner tooltip
+      // <p> would add huge paddings around it
+      // TODO: Add a better, musch more tiny tooltip look
+      // newContent = "<p>" + content + "</p>";
+      newContent = content;
     }
-    pageTitle.style.marginTop = '1em';
+    else {
+      let tempContainer = document.createElement('div');
+      tempContainer.innerHTML = content;
+
+      hideTocIfNotNeeded(tempContainer, true);
+
+      // Remove/Override some default title style formatting to look better in the tooltip
+      var pageTitle = tempContainer.querySelector('#page-title');
+      if (pageTitle == null) {
+        // If there is no page title, replace the first heading with an item looks and behaves like the page title
+        // to have similar result both for page title tooltips and other link item tooltips
+        // FIXME: This magic 6 must be maintained together now with generate_links.rb (and other places ?!), eliminate it!
+        var firstHeading = tempContainer.querySelector("h2, h3, h4, h5, h6");
+        if (firstHeading) {
+          // Everything bellow must exist, so intentionally there's no error handling, let it rise
+          pageTitle = document.querySelector('#page-title').cloneNode(true);
+          pageTitle.id = firstHeading.id;
+
+          const anchorElement = pageTitle.querySelector("a");
+          anchorElement.textContent = firstHeading.textContent;
+          anchorElement.href = url;
+
+          tempContainer.replaceChild(pageTitle, firstHeading);
+        }
+      }
+      pageTitle.style.marginTop = '1em';
 
-    var newContent = tempContainer.innerHTML
-    // remove unnecessary, reqursive inner content tooltips
-    newContent = newContent.replace(/\bcontent-tooltip\b/g, '');
+      newContent = tempContainer.innerHTML
+      // remove unnecessary, reqursive inner content tooltips
+      newContent = newContent.replace(/\bcontent-tooltip\b/g, '');
+    }
 
     return newContent;
   }
@@ -402,18 +414,23 @@ $(function () {
   // -------------
   // Tooltip generation and handling
   // -------------
-  /* _variables.scss & _navigation.scss - .tooltip:before */
-  const toolTipArrowHalfSize = 10;  /* $tooltip-arrow-half-size */
-  var tooltip = null;
+  const toolTipArrowHalfSize = 10; /* $tooltip-arrow-half-size  -> _variables.scss & _navigation.scss - .tooltip:before */
+  var contentTooltip = null;
   var tooltipRenderer = null;
   var tooltipTarget = null;
+  var tooltipToTargetRelativePosition = null;
   var elementUnderCursor = null;
   var shouldShowTooltip = false;
   var showTimeoutFuncID;
   var hideTimeoutFuncID;
 
-  function setTooltipPos(event, tooltipTarget, alignment) {
-    const rect = tooltipTarget.getBoundingClientRect();
+  function setTooltipArrowPosition(posName, position) {
+    var newPosition = position + 'px';
+    contentTooltip.style.setProperty(posName, newPosition);
+  }
+
+  function setTooltipPos(event, tooltipTarget, alignment, isTextTooltip) {
+    const targetRect = tooltipTarget.getBoundingClientRect();
     var computedTargetStyle = window.getComputedStyle(tooltipTarget);
     var lineHeight = parseFloat(computedTargetStyle.getPropertyValue('line-height'));
     // NOTE: The content of the targeted tooltip is still not yet calculated correctly here, as it is invisible, and getting visible is animated multiple ways
@@ -427,66 +444,149 @@ $(function () {
 
     const mouseX = event.clientX;
     var xShift = (alignment == 'tooltip-align-left' ? tooltipWidth : (alignment == 'tooltip-align-center' ? tooltipWidth / 2 : 0));
-    pos.x = mouseX; // Use now mouse X instead - Math.max(0, pos.x + document.documentElement.scrollLeft + rect.left);
+    pos.x = mouseX; // Use now mouse X instead - Math.max(0, pos.x + document.documentElement.scrollLeft + targetRect.left);
     pos.x -= xShift;
     
     // If the occupied space of the tooltip target is bigger than its line height, it means it spanws to multiple lines
-    // align to the upper line part in that case if the mouse is on the right side of the middle of its rect, otherwise align to the bottom row part
-    var multilineUpperPart = (rect.height > lineHeight && mouseX > rect.x + rect.width / 2);
-    pos.y = pos.y + document.documentElement.scrollTop + rect.top + rect.height / (multilineUpperPart ? 2 : 1);
+    // align to the upper line part in that case if the mouse is on the right side of the middle of its targetRect, otherwise align to the bottom row part
+    var multilineUpperPart = false == isTextTooltip && (targetRect.height > lineHeight && mouseX > targetRect.x + targetRect.width / 2);
+    pos.y = pos.y + (hasMastHead ? 0 : document.documentElement.scrollTop) + targetRect.top + targetRect.height / (multilineUpperPart ? 2 : 1);
 
     var tooltipArrowHorizontalPadding = (4 * toolTipArrowHalfSize) * (alignment == 'tooltip-align-left' ? 1 : (alignment == 'tooltip-align-right' ? -1 : 0));
-    setArrowPosition('--tooltip-arrow-left', xShift - tooltipArrowHorizontalPadding - toolTipArrowHalfSize);
-    setArrowPosition('--tooltip-arrow-top', -1 * toolTipArrowHalfSize);
+    setTooltipArrowPosition('--tooltip-arrow-left', xShift - tooltipArrowHorizontalPadding - toolTipArrowHalfSize);
+    setTooltipArrowPosition('--tooltip-arrow-top', -1 * toolTipArrowHalfSize);
 
-    tooltip.style.left = pos.x + tooltipArrowHorizontalPadding + 'px';
-    tooltip.style.top = pos.y + toolTipArrowHalfSize + 'px';
+    var contentTooltipLeft = pos.x + tooltipArrowHorizontalPadding;
+    var contentTooltipTop = pos.y + toolTipArrowHalfSize;
+    contentTooltip.style.left = contentTooltipLeft + 'px';
+    contentTooltip.style.top = contentTooltipTop + 'px';
   }
 
-  function setArrowPosition(posName, position) {
-    var newPosition = position + 'px';
-    tooltip.style.setProperty(posName, newPosition);
-  }
+  function getRealZIndex(element) {
+    var zIndex = getComputedStyle(element).zIndex;
 
-  function showTooltip(event, tooltipText, alignment, isFullPageContent) {
-
-    tooltip.innerHTML = tooltipText.innerHTML;
-    tooltipRenderer.innerHTML = tooltipText.innerHTML;
+    // If the element's z-index is not auto, return it
+    if (zIndex !== "auto")
+      return parseInt(zIndex);
+    else {
+      // If the element's z-index is auto, traverse the parent hierarchy
+      var parent = element.parentElement;
+      var highestZIndex = null;
+      while (parent) {
+        var parentZIndex = getComputedStyle(parent).zIndex;
+        if (parentZIndex !== "auto") {
+          var zIndexValue = parseInt(parentZIndex);
+          if (highestZIndex === null || zIndexValue > highestZIndex) {
+            highestZIndex = zIndexValue;
+          }
+        }
+        parent = parent.parentElement;
+      }
+      return highestZIndex;
+    }
+  }
 
+  function setTooltipStyle(alignment, isFullPageContent, isTextTooltip) {
+    if (isTextTooltip) {
+      contentTooltip.classList.add("text-content-tooltip");
+      tooltipRenderer.classList.add("text-content-tooltip");
+    }
+    else {
+      contentTooltip.classList.remove("text-content-tooltip");
+      tooltipRenderer.classList.remove("text-content-tooltip");
+    }
     if (isFullPageContent) {
-      tooltip.classList.add("full-content-tooltip");
+      contentTooltip.classList.add("full-content-tooltip");
       tooltipRenderer.classList.add("full-content-tooltip");
     }
     else {
-      tooltip.classList.remove("full-content-tooltip");
+      contentTooltip.classList.remove("full-content-tooltip");
       tooltipRenderer.classList.remove("full-content-tooltip");
     }
-    tooltip.classList.remove('tooltip-align-left', 'tooltip-align-center', 'tooltip-align-right');
+    contentTooltip.classList.remove('tooltip-align-left', 'tooltip-align-center', 'tooltip-align-right');
     tooltipRenderer.classList.remove('tooltip-align-left', 'tooltip-align-center', 'tooltip-align-right');
-    tooltip.classList.add(alignment);
+    contentTooltip.classList.add(alignment);
     tooltipRenderer.classList.add(alignment);
+  }
+
+  function setTooltipZIndex() {
+    var zIndex = getRealZIndex(tooltipTarget);
+
+    if (zIndex)
+      contentTooltip.style.zIndex = zIndex;
+    else {
+      /* If the parent hierarchy has no explicit z-index setting, use a higher than the default
+         FIXME: messy, as a deafult is not defined anywhere, only in the (s)css files, 
+                add a know global in the _variables.scss and use it here, and everywhere in the scss files where the z-index is set
+                (like _magnific-popup,scss does)
+         Now, it seems, the 0 is the default and only the following values are used
+            - 100000 - screen reader
+            - 9999, 999 - modals
+            - 1040+ - magnific-popup
+            - 20 - skip-link
+            - 20, 1 - sidebar author__urls-wrapper
+            - 20, 10 - .nav__list .nav__items label
+            - 20 - masthead
+            - 10 - masthead nav
+            - 10 - sidebar__right
+            - 10 - archive__item a
+            - 5 - archive__item-caption
+            - 5 - page__hero-caption
+       */
+      zIndex = 5;
+    }
+    /*
+     NOTE: Currently we only have to care about tooltips for
+           - page content items
+                max z-index - 0
+           - masthead items (e,g, buttons)
+                max z-index - 20
+    so, simply currently just setting one higher value for the tooltip than the target. 
+    */
+    contentTooltip.style.zIndex = zIndex + 1;
+  }
+
+  function showTooltip(event, tooltipText, alignment, isFullPageContent, isTextTooltip) {
+
+    contentTooltip.innerHTML = tooltipText.innerHTML;
+    tooltipRenderer.innerHTML = contentTooltip.innerHTML;
+
+    setTooltipStyle(alignment, isFullPageContent, isTextTooltip);
+    setTooltipZIndex();
+    setTooltipPos(event, tooltipTarget, alignment, isTextTooltip);
     
     shouldShowTooltip = true;
-
+    
     clearTimeout(hideTimeoutFuncID);
     clearTimeout(showTimeoutFuncID);
     showTimeoutFuncID = setTimeout(function () {
       if (shouldShowTooltip) {
-        setTooltipPos(event, tooltipTarget, alignment);
-        tooltip.classList.add('visible');
+        contentTooltip.classList.add('visible');
       }
     }, 100);
   }
 
   function shouldHideTooltip(activeTarget) {
-    return ((tooltipTarget == null || activeTarget != tooltipTarget) && (tooltip == null || (activeTarget != tooltip && activeTarget != null && activeTarget.closest('.tooltip') == null)));
+    return ((tooltipTarget == null || activeTarget != tooltipTarget) && (contentTooltip == null || (activeTarget != contentTooltip && activeTarget != null && activeTarget.closest('.tooltip') == null)));
   }
 
   function hideTooltip(withDelay) {
     function doHideTooltip() {
       if (false == shouldShowTooltip && tooltip)
-        tooltip.classList.remove('visible');
+        contentTooltip.classList.remove('visible');
       tooltipTarget = null;
+      tooltipToTargetRelativePosition = null;
+      // TODO: Here is the gotcha
+      //       - this cannot be done directly as it will kill the transition animation effects
+      //       - not doing it could lead to occupied, overflowing area that will break the auto srinking back the container 
+      //         to its content minimum size once the overflowing tooltip got 'invisible'
+      //         actually this issue will go away once we limit the tooltip oveflowing in any direction from the window
+      setTimeout(function () {
+        if (tooltipTarget == null && false == shouldShowTooltip) {
+          contentTooltip.innerHTML = '';
+          tooltipRenderer.innerHTML = '';
+        }
+      }, 100);
     }
 
     shouldShowTooltip = false;
@@ -503,7 +603,7 @@ $(function () {
 
   function addContentTooltips() {
     var tooltipElements = document.querySelectorAll('.content-tooltip');
-    tooltip = document.getElementById('tooltip');
+    contentTooltip = document.getElementById('tooltip');
     tooltipRenderer = document.getElementById('tooltipRenderer');
     hideTooltip();
 
@@ -515,9 +615,11 @@ $(function () {
 
       element.addEventListener('mouseover', function (event) {
         var isFullPageContent = element.classList.contains('full-content-tooltip');
+        var isTextTooltip = element.classList.contains('text-content-tooltip');
         var alignment = (element.classList.contains('tooltip-align-left') ? 'tooltip-align-left' : (element.classList.contains('tooltip-align-center') ? 'tooltip-align-center' : 'tooltip-align-right'));
 
         tooltipTarget = element;
+        tooltipToTargetRelativePosition = null;
 
         // Load only once per page load
         if (tooltipText.innerHTML === '') {
@@ -526,11 +628,11 @@ $(function () {
           function onSuccess(newContent) {
             if (typeof (newContent) === 'object' && 'innerHTML' in newContent)
               newContent = newContent.innerHTML;
-            newContent = alterContentForTooltip(newContent, url. isFullPageContent);
+            newContent = alterContentForTooltip(newContent, url, isFullPageContent, isTextTooltip);
 
             if (newContent.length > 0) {              
               tooltipText.innerHTML = newContent; // cache for reuse
-              showTooltip(event, tooltipText, alignment, isFullPageContent);
+              showTooltip(event, tooltipText, alignment, isFullPageContent, isTextTooltip);
             }
             else {
               // Quick navigation from another link with tooltip to this link would keep alive the previous tooltip
@@ -546,7 +648,14 @@ $(function () {
             console.error('Error loading the tooltip content!' + error);
           }
           
-          if (isFullPageContent) {
+          if (isTextTooltip) {
+            newContent = alterContentForTooltip(element.getAttribute("data-tooltip-text"), null, isFullPageContent, isTextTooltip);
+            if (newContent.length > 0) {
+              tooltipText.innerHTML = newContent;
+              showTooltip(event, tooltipText, alignment, isFullPageContent, isTextTooltip);
+            }
+          }
+          else if (isFullPageContent) {
             loadContentFromUrl(url, newContent => onSuccess(newContent), error => onError(error));
           }
           else {
@@ -554,7 +663,7 @@ $(function () {
           }
         }
         else
-          showTooltip(event, tooltipText, alignment, isFullPageContent);
+          showTooltip(event, tooltipText, alignment, isFullPageContent, isTextTooltip);
       });
     });
 
@@ -571,9 +680,29 @@ $(function () {
 
     document.addEventListener('scroll', function (event) {
       if (elementUnderCursor == null || shouldHideTooltip(elementUnderCursor)) {
-        if (tooltipTarget)
-          hideTooltip(true);
+         hideTooltip(true);
       }
+      else if (tooltipTarget) {
+        var targetPosition = getElementPositionRelativeToRoot(tooltipTarget);
+        var tooltipPosition = getElementPositionRelativeToRoot(contentTooltip);
+        var relativPos = { 
+          top: tooltipPosition.top - targetPosition.top,
+          left: tooltipPosition.left - targetPosition.left
+        }
+
+        if (tooltipToTargetRelativePosition == null)
+          tooltipToTargetRelativePosition = relativPos;
+        else {
+          // console.log(" ----");
+          // console.log("tooltipPosition - Top: " + tooltipPosition.top + ", Left: " + tooltipPosition.left);
+          // console.log("targetPosition - Top: " + targetPosition.top + ", Left: " + targetPosition.left);
+          // console.log("relativPos - Top: " + relativPos.top + ", Left: " + relativPos.left);
+          // console.log("tooltipToTargetRelativePosition - Top: " + tooltipToTargetRelativePosition.top + ", Left: " + tooltipToTargetRelativePosition.left);
+
+          if (false == comparePositions(relativPos, tooltipToTargetRelativePosition))
+            hideTooltip(true);
+        }
+      }      
     });
 
     document.addEventListener('mouseover', function (event) {
diff --git a/_js/main.min.js b/_js/main.min.js
index 5e894ab9..85a7513a 100644
--- a/_js/main.min.js
+++ b/_js/main.min.js
@@ -8634,25 +8634,30 @@ $(function() {
             }
         });
     }
-    function alterContentForTooltip(content, url, isFullPageContent) {
-        let tempContainer = document.createElement("div");
-        tempContainer.innerHTML = content;
-        hideTocIfNotNeeded(tempContainer, true);
-        var pageTitle = tempContainer.querySelector("#page-title");
-        if (pageTitle == null) {
-            var firstHeading = tempContainer.querySelector("h2, h3, h4, h5, h6");
-            if (firstHeading) {
-                pageTitle = document.querySelector("#page-title").cloneNode(true);
-                pageTitle.id = firstHeading.id;
-                const anchorElement = pageTitle.querySelector("a");
-                anchorElement.textContent = firstHeading.textContent;
-                anchorElement.href = url;
-                tempContainer.replaceChild(pageTitle, firstHeading);
-            }
-        }
-        pageTitle.style.marginTop = "1em";
-        var newContent = tempContainer.innerHTML;
-        newContent = newContent.replace(/\bcontent-tooltip\b/g, "");
+    function alterContentForTooltip(content, url, isFullPageContent, isTextTooltip) {
+        var newContent = null;
+        if (isTextTooltip) {
+            newContent = content;
+        } else {
+            let tempContainer = document.createElement("div");
+            tempContainer.innerHTML = content;
+            hideTocIfNotNeeded(tempContainer, true);
+            var pageTitle = tempContainer.querySelector("#page-title");
+            if (pageTitle == null) {
+                var firstHeading = tempContainer.querySelector("h2, h3, h4, h5, h6");
+                if (firstHeading) {
+                    pageTitle = document.querySelector("#page-title").cloneNode(true);
+                    pageTitle.id = firstHeading.id;
+                    const anchorElement = pageTitle.querySelector("a");
+                    anchorElement.textContent = firstHeading.textContent;
+                    anchorElement.href = url;
+                    tempContainer.replaceChild(pageTitle, firstHeading);
+                }
+            }
+            pageTitle.style.marginTop = "1em";
+            newContent = tempContainer.innerHTML;
+            newContent = newContent.replace(/\bcontent-tooltip\b/g, "");
+        }
         return newContent;
     }
     function loadContentPartFrom(url, onSuccess, onError) {
@@ -8683,15 +8688,20 @@ $(function() {
         });
     }
     const toolTipArrowHalfSize = 10;
-    var tooltip = null;
+    var contentTooltip = null;
     var tooltipRenderer = null;
     var tooltipTarget = null;
+    var tooltipToTargetRelativePosition = null;
     var elementUnderCursor = null;
     var shouldShowTooltip = false;
     var showTimeoutFuncID;
     var hideTimeoutFuncID;
-    function setTooltipPos(event, tooltipTarget, alignment) {
-        const rect = tooltipTarget.getBoundingClientRect();
+    function setTooltipArrowPosition(posName, position) {
+        var newPosition = position + "px";
+        contentTooltip.style.setProperty(posName, newPosition);
+    }
+    function setTooltipPos(event, tooltipTarget, alignment, isTextTooltip) {
+        const targetRect = tooltipTarget.getBoundingClientRect();
         var computedTargetStyle = window.getComputedStyle(tooltipTarget);
         var lineHeight = parseFloat(computedTargetStyle.getPropertyValue("line-height"));
         var tooltipRect = tooltipRenderer.getBoundingClientRect();
@@ -8701,49 +8711,90 @@ $(function() {
         var xShift = alignment == "tooltip-align-left" ? tooltipWidth : alignment == "tooltip-align-center" ? tooltipWidth / 2 : 0;
         pos.x = mouseX;
         pos.x -= xShift;
-        var multilineUpperPart = rect.height > lineHeight && mouseX > rect.x + rect.width / 2;
-        pos.y = pos.y + document.documentElement.scrollTop + rect.top + rect.height / (multilineUpperPart ? 2 : 1);
+        var multilineUpperPart = false == isTextTooltip && (targetRect.height > lineHeight && mouseX > targetRect.x + targetRect.width / 2);
+        pos.y = pos.y + (hasMastHead ? 0 : document.documentElement.scrollTop) + targetRect.top + targetRect.height / (multilineUpperPart ? 2 : 1);
         var tooltipArrowHorizontalPadding = 4 * toolTipArrowHalfSize * (alignment == "tooltip-align-left" ? 1 : alignment == "tooltip-align-right" ? -1 : 0);
-        setArrowPosition("--tooltip-arrow-left", xShift - tooltipArrowHorizontalPadding - toolTipArrowHalfSize);
-        setArrowPosition("--tooltip-arrow-top", -1 * toolTipArrowHalfSize);
-        tooltip.style.left = pos.x + tooltipArrowHorizontalPadding + "px";
-        tooltip.style.top = pos.y + toolTipArrowHalfSize + "px";
+        setTooltipArrowPosition("--tooltip-arrow-left", xShift - tooltipArrowHorizontalPadding - toolTipArrowHalfSize);
+        setTooltipArrowPosition("--tooltip-arrow-top", -1 * toolTipArrowHalfSize);
+        var contentTooltipLeft = pos.x + tooltipArrowHorizontalPadding;
+        var contentTooltipTop = pos.y + toolTipArrowHalfSize;
+        contentTooltip.style.left = contentTooltipLeft + "px";
+        contentTooltip.style.top = contentTooltipTop + "px";
     }
-    function setArrowPosition(posName, position) {
-        var newPosition = position + "px";
-        tooltip.style.setProperty(posName, newPosition);
+    function getRealZIndex(element) {
+        var zIndex = getComputedStyle(element).zIndex;
+        if (zIndex !== "auto") return parseInt(zIndex); else {
+            var parent = element.parentElement;
+            var highestZIndex = null;
+            while (parent) {
+                var parentZIndex = getComputedStyle(parent).zIndex;
+                if (parentZIndex !== "auto") {
+                    var zIndexValue = parseInt(parentZIndex);
+                    if (highestZIndex === null || zIndexValue > highestZIndex) {
+                        highestZIndex = zIndexValue;
+                    }
+                }
+                parent = parent.parentElement;
+            }
+            return highestZIndex;
+        }
     }
-    function showTooltip(event, tooltipText, alignment, isFullPageContent) {
-        tooltip.innerHTML = tooltipText.innerHTML;
-        tooltipRenderer.innerHTML = tooltipText.innerHTML;
+    function setTooltipStyle(alignment, isFullPageContent, isTextTooltip) {
+        if (isTextTooltip) {
+            contentTooltip.classList.add("text-content-tooltip");
+            tooltipRenderer.classList.add("text-content-tooltip");
+        } else {
+            contentTooltip.classList.remove("text-content-tooltip");
+            tooltipRenderer.classList.remove("text-content-tooltip");
+        }
         if (isFullPageContent) {
-            tooltip.classList.add("full-content-tooltip");
+            contentTooltip.classList.add("full-content-tooltip");
             tooltipRenderer.classList.add("full-content-tooltip");
         } else {
-            tooltip.classList.remove("full-content-tooltip");
+            contentTooltip.classList.remove("full-content-tooltip");
             tooltipRenderer.classList.remove("full-content-tooltip");
         }
-        tooltip.classList.remove("tooltip-align-left", "tooltip-align-center", "tooltip-align-right");
+        contentTooltip.classList.remove("tooltip-align-left", "tooltip-align-center", "tooltip-align-right");
         tooltipRenderer.classList.remove("tooltip-align-left", "tooltip-align-center", "tooltip-align-right");
-        tooltip.classList.add(alignment);
+        contentTooltip.classList.add(alignment);
         tooltipRenderer.classList.add(alignment);
+    }
+    function setTooltipZIndex() {
+        var zIndex = getRealZIndex(tooltipTarget);
+        if (zIndex) contentTooltip.style.zIndex = zIndex; else {
+            zIndex = 5;
+        }
+        contentTooltip.style.zIndex = zIndex + 1;
+    }
+    function showTooltip(event, tooltipText, alignment, isFullPageContent, isTextTooltip) {
+        contentTooltip.innerHTML = tooltipText.innerHTML;
+        tooltipRenderer.innerHTML = contentTooltip.innerHTML;
+        setTooltipStyle(alignment, isFullPageContent, isTextTooltip);
+        setTooltipZIndex();
+        setTooltipPos(event, tooltipTarget, alignment, isTextTooltip);
         shouldShowTooltip = true;
         clearTimeout(hideTimeoutFuncID);
         clearTimeout(showTimeoutFuncID);
         showTimeoutFuncID = setTimeout(function() {
             if (shouldShowTooltip) {
-                setTooltipPos(event, tooltipTarget, alignment);
-                tooltip.classList.add("visible");
+                contentTooltip.classList.add("visible");
             }
         }, 100);
     }
     function shouldHideTooltip(activeTarget) {
-        return (tooltipTarget == null || activeTarget != tooltipTarget) && (tooltip == null || activeTarget != tooltip && activeTarget != null && activeTarget.closest(".tooltip") == null);
+        return (tooltipTarget == null || activeTarget != tooltipTarget) && (contentTooltip == null || activeTarget != contentTooltip && activeTarget != null && activeTarget.closest(".tooltip") == null);
     }
     function hideTooltip(withDelay) {
         function doHideTooltip() {
-            if (false == shouldShowTooltip && tooltip) tooltip.classList.remove("visible");
+            if (false == shouldShowTooltip && tooltip) contentTooltip.classList.remove("visible");
             tooltipTarget = null;
+            tooltipToTargetRelativePosition = null;
+            setTimeout(function() {
+                if (tooltipTarget == null && false == shouldShowTooltip) {
+                    contentTooltip.innerHTML = "";
+                    tooltipRenderer.innerHTML = "";
+                }
+            }, 100);
         }
         shouldShowTooltip = false;
         if (withDelay) {
@@ -8755,7 +8806,7 @@ $(function() {
     }
     function addContentTooltips() {
         var tooltipElements = document.querySelectorAll(".content-tooltip");
-        tooltip = document.getElementById("tooltip");
+        contentTooltip = document.getElementById("tooltip");
         tooltipRenderer = document.getElementById("tooltipRenderer");
         hideTooltip();
         tooltipElements.forEach(function(element) {
@@ -8765,16 +8816,18 @@ $(function() {
             element.appendChild(tooltipText);
             element.addEventListener("mouseover", function(event) {
                 var isFullPageContent = element.classList.contains("full-content-tooltip");
+                var isTextTooltip = element.classList.contains("text-content-tooltip");
                 var alignment = element.classList.contains("tooltip-align-left") ? "tooltip-align-left" : element.classList.contains("tooltip-align-center") ? "tooltip-align-center" : "tooltip-align-right";
                 tooltipTarget = element;
+                tooltipToTargetRelativePosition = null;
                 if (tooltipText.innerHTML === "") {
                     var url = element.href;
                     function onSuccess(newContent) {
                         if (typeof newContent === "object" && "innerHTML" in newContent) newContent = newContent.innerHTML;
-                        newContent = alterContentForTooltip(newContent, url.isFullPageContent);
+                        newContent = alterContentForTooltip(newContent, url, isFullPageContent, isTextTooltip);
                         if (newContent.length > 0) {
                             tooltipText.innerHTML = newContent;
-                            showTooltip(event, tooltipText, alignment, isFullPageContent);
+                            showTooltip(event, tooltipText, alignment, isFullPageContent, isTextTooltip);
                         } else {
                             hideTooltip(false);
                         }
@@ -8783,12 +8836,18 @@ $(function() {
                         hideTooltip(false);
                         console.error("Error loading the tooltip content!" + error);
                     }
-                    if (isFullPageContent) {
+                    if (isTextTooltip) {
+                        newContent = alterContentForTooltip(element.getAttribute("data-tooltip-text"), null, isFullPageContent, isTextTooltip);
+                        if (newContent.length > 0) {
+                            tooltipText.innerHTML = newContent;
+                            showTooltip(event, tooltipText, alignment, isFullPageContent, isTextTooltip);
+                        }
+                    } else if (isFullPageContent) {
                         loadContentFromUrl(url, newContent => onSuccess(newContent), error => onError(error));
                     } else {
                         loadContentPartFrom(url, newContent => onSuccess(newContent), error => onError(error));
                     }
-                } else showTooltip(event, tooltipText, alignment, isFullPageContent);
+                } else showTooltip(event, tooltipText, alignment, isFullPageContent, isTextTooltip);
             });
         });
         document.addEventListener("mousemove", function(event) {
@@ -8801,7 +8860,17 @@ $(function() {
         });
         document.addEventListener("scroll", function(event) {
             if (elementUnderCursor == null || shouldHideTooltip(elementUnderCursor)) {
-                if (tooltipTarget) hideTooltip(true);
+                hideTooltip(true);
+            } else if (tooltipTarget) {
+                var targetPosition = getElementPositionRelativeToRoot(tooltipTarget);
+                var tooltipPosition = getElementPositionRelativeToRoot(contentTooltip);
+                var relativPos = {
+                    top: tooltipPosition.top - targetPosition.top,
+                    left: tooltipPosition.left - targetPosition.left
+                };
+                if (tooltipToTargetRelativePosition == null) tooltipToTargetRelativePosition = relativPos; else {
+                    if (false == comparePositions(relativPos, tooltipToTargetRelativePosition)) hideTooltip(true);
+                }
             }
         });
         document.addEventListener("mouseover", function(event) {
diff --git a/_layouts/default.html b/_layouts/default.html
index e2210040..9d67aac1 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -3,7 +3,9 @@
 ---
 
 {% include_cached skip-links.html %}
-{% include_cached masthead.html %}
+{% if site.masthead != false %}
+  {% include masthead.html %}
+{% endif %}
 
 <div class="initial-content">
   {{ content }}
@@ -11,12 +13,14 @@
 
 {% if site.search == true %}
   <div class="search-content">
-    {% include_cached search/search_form.html %}
+    {% include search/search_form.html %}
   </div>
 {% endif %}
 
-<span id="tooltip" class="tooltip"></span>
-<span id="tooltipRenderer" class="tooltip visible"></span>
+{% if site.masthead == false %}
+  <span id="tooltip" class="tooltip"></span>
+  <span id="tooltipRenderer" class="tooltip visible"></span>
+{% endif %}
 
 <div id="footer" class="page__footer">
   <footer>
diff --git a/_sass/minimal-mistakes/minimal-mistakes/_navigation.scss b/_sass/minimal-mistakes/minimal-mistakes/_navigation.scss
index c4b69c50..1a453a5e 100644
--- a/_sass/minimal-mistakes/minimal-mistakes/_navigation.scss
+++ b/_sass/minimal-mistakes/minimal-mistakes/_navigation.scss
@@ -757,7 +757,7 @@
 
 .tooltip {
   position: absolute;
-  z-index: 99; /* Higher than anything else */
+  z-index: 5; /* a default, higher than normal items have in the content that could have tooltip, see navigation.js - setTooltipStyle for more  */
   opacity: 0;
 
   color: $tooltip-color;
@@ -766,6 +766,8 @@
   //text-shadow: 1px 1px 2px $tooltip-text-shadow-color; // #111
   background: $tooltip-background-color;
   
+  height: auto;
+
   // FIXME: Get rid of the dependency on size of the container
   width: 500%;
   min-width: 200px;
@@ -776,6 +778,7 @@
   @include breakpoint($x-large) {
     max-width: $right-sidebar-width + 125px;
   }
+
   &.full-content-tooltip {
     max-width: 400px;
     @include breakpoint($large) {
@@ -785,7 +788,19 @@
       max-width: 2 * $right-sidebar-width + 125px;
     }
   }
-  height: auto;
+
+  &.text-content-tooltip {
+    font-size: $type-size-9;
+
+    min-width: 150px;
+    max-width: 150px;
+    @include breakpoint($large) {
+      max-width: 200px;
+    }
+    @include breakpoint($x-large) {
+      max-width: 255px;
+    }
+  }
   
   padding-top: 0;
   padding-bottom: 0;
@@ -810,7 +825,7 @@
   transform: scale(0);
 }
 
-.tooltip:before //, .tooltip:after
+.tooltip:before
 {
   // These are mandatory, do not remove
   content: '';
diff --git a/_sass/minimal-mistakes/minimal-mistakes/_page.scss b/_sass/minimal-mistakes/minimal-mistakes/_page.scss
index c4ff67e2..b61817ba 100644
--- a/_sass/minimal-mistakes/minimal-mistakes/_page.scss
+++ b/_sass/minimal-mistakes/minimal-mistakes/_page.scss
@@ -30,9 +30,14 @@ body {
           flex-direction: column;
 }
 
-.initial-content,
-.search-content {
-  flex: 1 0 auto;
+.initial-content {
+  &:not(.is--hidden) {
+    flex: 1 0 auto;
+  }
+  
+  &.is--hidden {
+    flex: none;
+  }
 }
 
 .page {
diff --git a/_sass/minimal-mistakes/minimal-mistakes/_search.scss b/_sass/minimal-mistakes/minimal-mistakes/_search.scss
index 30ae181c..2386401e 100644
--- a/_sass/minimal-mistakes/minimal-mistakes/_search.scss
+++ b/_sass/minimal-mistakes/minimal-mistakes/_search.scss
@@ -54,6 +54,29 @@
   padding-top: 1em;
   padding-bottom: 1em;
 
+  &.is--visible {
+    display: block;
+    visibility: visible;
+    flex: 1 0 auto;
+
+    &::after {
+      content: "";
+      display: block;
+    }
+  }
+
+  .results__found {
+    margin-top: 0.5em;
+    font-size: $type-size-6;
+  }
+
+  .results.from-masthead {
+    .list__item, .results__found {
+      display: flex; /* Use Flexbox */
+      justify-content: center; /* Horizontally center the content */
+    }
+  }
+
   &__inner-wrap {
     width: 100%;
     margin-left: auto;
@@ -136,28 +159,6 @@
     }
   }
 
-  &.is--visible {
-    display: block;
-    visibility: visible;
-
-    &::after {
-      content: "";
-      display: block;
-    }
-  }
-
-  .results__found {
-    margin-top: 0.5em;
-    font-size: $type-size-6;
-  }
-
-  .results.from-masthead {
-    .list__item, .results__found {
-      display: flex; /* Use Flexbox */
-      justify-content: center; /* Horizontally center the content */
-    }
-  }
-
   .archive__item {
     margin-bottom: 2em;
 
diff --git a/_sass/minimal-mistakes/minimal-mistakes/_variables.scss b/_sass/minimal-mistakes/minimal-mistakes/_variables.scss
index 800f46aa..4414e0b7 100644
--- a/_sass/minimal-mistakes/minimal-mistakes/_variables.scss
+++ b/_sass/minimal-mistakes/minimal-mistakes/_variables.scss
@@ -42,6 +42,7 @@ $type-size-5: 1em !default; // ~16px
 $type-size-6: 0.75em !default; // ~12px
 $type-size-7: 0.6875em !default; // ~11px
 $type-size-8: 0.625em !default; // ~10px
+$type-size-9: 0.5em !default; // ~8px
 
 /* headline scale */
 $h-size-1: 1.563em !default; // ~25.008px
diff --git a/_sass/minimal-mistakes/minimal-mistakes/skins/_midnight.scss b/_sass/minimal-mistakes/minimal-mistakes/skins/_oi-dark.scss
similarity index 100%
rename from _sass/minimal-mistakes/minimal-mistakes/skins/_midnight.scss
rename to _sass/minimal-mistakes/minimal-mistakes/skins/_oi-dark.scss
diff --git a/_sass/minimal-mistakes/minimal-mistakes/skins/_oi-light.scss b/_sass/minimal-mistakes/minimal-mistakes/skins/_oi-light.scss
new file mode 100644
index 00000000..4a72d311
--- /dev/null
+++ b/_sass/minimal-mistakes/minimal-mistakes/skins/_oi-light.scss
@@ -0,0 +1,80 @@
+/* ==========================================================================
+   OID skin
+   ========================================================================== */
+
+/* Colors */
+$oid-gray                   : #40535d !default;
+$oid-black					: #162c36 !default;
+$oid-blue					: #04aada !default;
+$quest-orange				: #fb4f14 !default;
+$jaffa						: #ee8a54 !default;
+$nepal						: #82a7c5 !default;
+
+$gray						: $oid-gray !default;
+$black						: $oid-black !default;
+$white						: white !default;
+
+$dark-gray                  : mix($black, $gray, 40%) !default;
+$darker-gray                : mix($black, $gray, 60%) !default;
+$light-gray                 : mix($white, $gray, 50%) !default;
+$lighter-gray               : mix($white, $gray, 90%) !default;
+
+$body-color                 : $white !default;
+$background-color           : $white !default;
+$code-background-color      : $lighter-gray !default;
+$code-background-color-dark : $light-gray !default;
+$text-color                 : $oid-black !default;
+$border-color               : $lighter-gray !default;
+$footer-background-color	: mix($oid-blue, $background-color, 60%) !default;
+
+$tooltip-color                   : mix($gray, $text-color, 50%) !default;
+$tooltip-background-color        : rgba(mix($light-gray, $background-color, 7%), 0.925) !default;
+$tooltip-arrow-background-color  : rgba(mix($tooltip-background-color, $tooltip-color, 90%), 0.925) !default;
+
+$primary-color              : $oid-black !default;
+$success-color              : #27ae60 !default;
+$warning-color              : $jaffa !default;
+$danger-color               : $quest-orange !default;
+$info-color                 : $nepal !default;
+
+/* links */
+$link-color                 : $oid-blue !default;
+$link-color-hover           : mix($black, $link-color, 25%) !default;
+$link-color-visited         : mix($white, $link-color, 25%) !default;
+$masthead-link-color        : $primary-color !default;
+$masthead-link-color-hover  : mix($black, $primary-color, 25%) !default;
+$menuitem-hovered-background-color :$oid-blue !default;
+$menuitem-selected-background-color: $oid-gray !default;
+
+/* notices */
+$notice-background-mix: 60% !default;
+$code-notice-background-mix: 65% !default;
+
+$base01	: $oid-blue !default;
+
+.page__title {
+	a { 
+		color: $link-color !important;
+	}
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	color: $link-color !important;
+}
+
+.toc {
+	h4 {
+		color: $text-color !important;
+	}
+}
+
+.highlight-header {
+	.btn {
+		color: $text-color !important;
+	}
+}
diff --git a/_sass/minimal-mistakes/minimal-mistakes/skins/_oi-midnight.scss b/_sass/minimal-mistakes/minimal-mistakes/skins/_oi-midnight.scss
new file mode 100644
index 00000000..a7821336
--- /dev/null
+++ b/_sass/minimal-mistakes/minimal-mistakes/skins/_oi-midnight.scss
@@ -0,0 +1,72 @@
+/* ==========================================================================
+   Midnight skin
+   ========================================================================== */
+
+/* Colors */
+$background-color: #252525 !default;
+$text-color: #f0e7d5 !default;
+$selection-color: mix($text-color, $background-color, 20%) !default;
+$selection-background-color:  mix($text-color, $background-color, 80%) !default;
+$primary-color: #e8ba00 !default;
+$border-color: mix(white, $background-color, 20%) !default;
+$code-background-color: #1e1e1e !default;
+$code-background-color-dark: mix(black, $code-background-color, 25%) !default;
+$form-background-color: mix(black, $background-color, 15%) !default;
+$footer-background-color: mix(black, $background-color, 30%) !default;
+
+$link-color: $primary-color !default;
+$link-color-visited: mix(white, $link-color, 40%) !default;
+$link-color-hover: mix(white, $link-color, 60%) !default;
+$link-color-selected: $selection-color !default;
+
+$masthead-link-color: $text-color !default;
+$masthead-link-color-hover: mix(black, $text-color, 20%) !default;
+$navicon-link-color-hover: mix(black, $background-color, 30%) !default;
+
+/* sunrise syntax highlighting (base16) */
+$base00: $code-background-color !default;
+$base01: $code-background-color-dark !default;
+$base02: #3b3b3b !default;
+$base03: #969896 !default;
+$base04: #888    !default;
+$base05: #d0d0d0 !default;
+$base06: #e0e0e0 !default;
+$base07: white   !default;
+$base08: #ac4142 !default;
+$base09: #90a959 !default;
+$base0a: #f0c674 !default;
+$base0b: #90a959 !default;
+$base0c: #d0d0d0 !default;
+$base0d: #6a9fb5 !default;
+$base0e: #aa759f !default;
+$base0f: #a3685a !default;
+
+/* notices */
+$notice-background-mix: 75% !default;
+//$code-notice-background-mix: 
+
+.page__content {
+  .notice,
+  .notice--primary,
+  .notice--info,
+  .notice--warning,
+  .notice--success,
+  .notice--danger {
+    color: $text-color; // default
+  }
+
+  .notice {
+    background-color: $base02;
+  }
+}
+
+.author__urls.social-icons i,
+.author__urls.social-icons .svg-inline--fa,
+.page__footer-follow .social-icons i,
+.page__footer-follow .social-icons .svg-inline--fa  {
+  color: inherit;
+}
+
+.ais-search-box .ais-search-box--input {
+  background-color: $form-background-color;
+}
diff --git a/assets/css/main.scss b/assets/css/main.scss
index bb0b3741..b869cc06 100644
--- a/assets/css/main.scss
+++ b/assets/css/main.scss
@@ -16,6 +16,7 @@ toc: false
 // FIXME: Wish I could find a solution to get everything beside the skin include line to be moved to a common include file
 //        to eliminate repeated content bellow in the different main skin files :S
 //        Hope one day someone could come up with a working solution.
+//        Probably skipping the default Jekyll scss compilation and adding a self ade build step instead?!?
 //
 @charset "utf-8";
 
@@ -25,7 +26,10 @@ $sidebar-nav-item-left-margin: {% if site.sidebar.nav_sub_items_ident %} {{ site
 $masthead-sticky: {% if site.masthead.sticky == true %} 1 {% else %} 0 {% endif %} !default;
 $footer-top-margin: {% if site.footer.top_margin %} {{ site.footer.top_margin }} {% else %} 3em {% endif %} !default; // 3em is huge, but that was the theme default
 
-// NOTE: Though it is not documented at all, but it seems jekyll always require a main.(s)css file, no matter how many other presented already, so
-//       we use this for the default skin (name difference is handled in the head.html)
+// NOTE: Though it is not documented at all, but it seems jekyll scss build always require a main.(s)css file, no matter how many other presented already, so
+//       we use this for the minimal-mistakes default skin (name difference is handled in the head.html)
+//
+// WARNING: Even it suggests it is a kind of "deafult skin", but not at all !!! Default skin is the one that skins.html declars in its <link rel="stylesheet" id="skinedStylesheet" ...> statement
+//
 @import "minimal-mistakes/skins/default"; // skin overrides
 @import "minimal-mistakes"; // main partials
diff --git a/assets/css/main_air.scss b/assets/css/main_mm-air.scss
similarity index 94%
rename from assets/css/main_air.scss
rename to assets/css/main_mm-air.scss
index abac7f7c..e017f582 100644
--- a/assets/css/main_air.scss
+++ b/assets/css/main_mm-air.scss
@@ -16,6 +16,7 @@ toc: false
 // FIXME: Wish I could find a solution to get everything beside the skin include line to be moved to a common include file
 //        to eliminate repeated content bellow in the different main skin files :S
 //        Hope one day someone could come up with a working solution.
+//        Probably skipping the default Jekyll scss compilation and adding a self ade build step instead?!?
 //
 @charset "utf-8";
 
diff --git a/assets/css/main_aqua.scss b/assets/css/main_mm-aqua.scss
similarity index 94%
rename from assets/css/main_aqua.scss
rename to assets/css/main_mm-aqua.scss
index 0fb0c2f9..32ef1d3b 100644
--- a/assets/css/main_aqua.scss
+++ b/assets/css/main_mm-aqua.scss
@@ -16,6 +16,7 @@ toc: false
 // FIXME: Wish I could find a solution to get everything beside the skin include line to be moved to a common include file
 //        to eliminate repeated content bellow in the different main skin files :S
 //        Hope one day someone could come up with a working solution.
+//        Probably skipping the default Jekyll scss compilation and adding a self ade build step instead?!?
 //
 @charset "utf-8";
 
diff --git a/assets/css/main_contrast.scss b/assets/css/main_mm-contrast.scss
similarity index 94%
rename from assets/css/main_contrast.scss
rename to assets/css/main_mm-contrast.scss
index e86caffc..c89d3efe 100644
--- a/assets/css/main_contrast.scss
+++ b/assets/css/main_mm-contrast.scss
@@ -16,6 +16,7 @@ toc: false
 // FIXME: Wish I could find a solution to get everything beside the skin include line to be moved to a common include file
 //        to eliminate repeated content bellow in the different main skin files :S
 //        Hope one day someone could come up with a working solution.
+//        Probably skipping the default Jekyll scss compilation and adding a self ade build step instead?!?
 //
 @charset "utf-8";
 
diff --git a/assets/css/main_dark.scss b/assets/css/main_mm-dark.scss
similarity index 94%
rename from assets/css/main_dark.scss
rename to assets/css/main_mm-dark.scss
index 364fb3e1..f3123571 100644
--- a/assets/css/main_dark.scss
+++ b/assets/css/main_mm-dark.scss
@@ -16,6 +16,7 @@ toc: false
 // FIXME: Wish I could find a solution to get everything beside the skin include line to be moved to a common include file
 //        to eliminate repeated content bellow in the different main skin files :S
 //        Hope one day someone could come up with a working solution.
+//        Probably skipping the default Jekyll scss compilation and adding a self ade build step instead?!?
 //
 @charset "utf-8";
 
diff --git a/assets/css/main_dirt.scss b/assets/css/main_mm-dirt.scss
similarity index 94%
rename from assets/css/main_dirt.scss
rename to assets/css/main_mm-dirt.scss
index fde99b9b..0ab563d9 100644
--- a/assets/css/main_dirt.scss
+++ b/assets/css/main_mm-dirt.scss
@@ -16,6 +16,7 @@ toc: false
 // FIXME: Wish I could find a solution to get everything beside the skin include line to be moved to a common include file
 //        to eliminate repeated content bellow in the different main skin files :S
 //        Hope one day someone could come up with a working solution.
+//        Probably skipping the default Jekyll scss compilation and adding a self ade build step instead?!?
 //
 @charset "utf-8";
 
diff --git a/assets/css/main_mint.scss b/assets/css/main_mm-mint.scss
similarity index 94%
rename from assets/css/main_mint.scss
rename to assets/css/main_mm-mint.scss
index a8621963..bd2ea566 100644
--- a/assets/css/main_mint.scss
+++ b/assets/css/main_mm-mint.scss
@@ -16,6 +16,7 @@ toc: false
 // FIXME: Wish I could find a solution to get everything beside the skin include line to be moved to a common include file
 //        to eliminate repeated content bellow in the different main skin files :S
 //        Hope one day someone could come up with a working solution.
+//        Probably skipping the default Jekyll scss compilation and adding a self ade build step instead?!?
 //
 @charset "utf-8";
 
diff --git a/assets/css/main_neon.scss b/assets/css/main_mm-neon.scss
similarity index 94%
rename from assets/css/main_neon.scss
rename to assets/css/main_mm-neon.scss
index f6fff6cf..88e67615 100644
--- a/assets/css/main_neon.scss
+++ b/assets/css/main_mm-neon.scss
@@ -16,6 +16,7 @@ toc: false
 // FIXME: Wish I could find a solution to get everything beside the skin include line to be moved to a common include file
 //        to eliminate repeated content bellow in the different main skin files :S
 //        Hope one day someone could come up with a working solution.
+//        Probably skipping the default Jekyll scss compilation and adding a self ade build step instead?!?
 //
 @charset "utf-8";
 
diff --git a/assets/css/main_plum.scss b/assets/css/main_mm-plum.scss
similarity index 94%
rename from assets/css/main_plum.scss
rename to assets/css/main_mm-plum.scss
index cf424fb2..90241786 100644
--- a/assets/css/main_plum.scss
+++ b/assets/css/main_mm-plum.scss
@@ -16,6 +16,7 @@ toc: false
 // FIXME: Wish I could find a solution to get everything beside the skin include line to be moved to a common include file
 //        to eliminate repeated content bellow in the different main skin files :S
 //        Hope one day someone could come up with a working solution.
+//        Probably skipping the default Jekyll scss compilation and adding a self ade build step instead?!?
 //
 @charset "utf-8";
 
diff --git a/assets/css/main_sunrise.scss b/assets/css/main_mm-sunrise.scss
similarity index 94%
rename from assets/css/main_sunrise.scss
rename to assets/css/main_mm-sunrise.scss
index eb85f0b6..fd6bc3a1 100644
--- a/assets/css/main_sunrise.scss
+++ b/assets/css/main_mm-sunrise.scss
@@ -16,6 +16,7 @@ toc: false
 // FIXME: Wish I could find a solution to get everything beside the skin include line to be moved to a common include file
 //        to eliminate repeated content bellow in the different main skin files :S
 //        Hope one day someone could come up with a working solution.
+//        Probably skipping the default Jekyll scss compilation and adding a self ade build step instead?!?
 //
 @charset "utf-8";
 
diff --git a/assets/css/main_midnight.scss b/assets/css/main_oi-dark.scss
similarity index 91%
rename from assets/css/main_midnight.scss
rename to assets/css/main_oi-dark.scss
index b2e67317..43f87f6b 100644
--- a/assets/css/main_midnight.scss
+++ b/assets/css/main_oi-dark.scss
@@ -16,6 +16,7 @@ toc: false
 // FIXME: Wish I could find a solution to get everything beside the skin include line to be moved to a common include file
 //        to eliminate repeated content bellow in the different main skin files :S
 //        Hope one day someone could come up with a working solution.
+//        Probably skipping the default Jekyll scss compilation and adding a self ade build step instead?!?
 //
 @charset "utf-8";
 
@@ -25,5 +26,5 @@ $sidebar-nav-item-left-margin: {% if site.sidebar.nav_sub_items_ident %} {{ site
 $masthead-sticky: {% if site.masthead.sticky == true %} 1 {% else %} 0 {% endif %} !default;
 $footer-top-margin: {% if site.footer.top_margin %} {{ site.footer.top_margin }} {% else %} 3em {% endif %} !default; // 3em is huge, but that was the theme default
 
-@import "minimal-mistakes/skins/midnight"; // skin overrides
+@import "minimal-mistakes/skins/oi-dark"; // skin overrides
 @import "minimal-mistakes"; // main partials
diff --git a/assets/css/main_oi-light.scss b/assets/css/main_oi-light.scss
new file mode 100644
index 00000000..c3c5e94d
--- /dev/null
+++ b/assets/css/main_oi-light.scss
@@ -0,0 +1,30 @@
+---
+search: false
+toc: false
+---
+// You have two kinds of Sass files:
+//
+// 1. Main files, which you wish to be output as CSS files
+//    Main files are like pages, they go where you want them to be output, and they contain the YAML front matter (--- lines) at the top. 
+//    Only the main Sass file needs front matter (the dashes are enough), and only that is processed, @included files are not!!!
+//        https: //stackoverflow.com/questions/34293733/jekyll-using-values-from-config-yml-in-scss-partial
+//        https: //stackoverflow.com/questions/34274368/jekyll-using-values-from-config-yml-in-scss?rq=3
+//
+// 2. Partials, which are used by main files in @import statements
+//    Partials are like hidden Jekyll data, so they go in an underscored directory, which defaults to _sass.
+//
+// FIXME: Wish I could find a solution to get everything beside the skin include line to be moved to a common include file
+//        to eliminate repeated content bellow in the different main skin files :S
+//        Hope one day someone could come up with a working solution.
+//        Probably skipping the default Jekyll scss compilation and adding a self ade build step instead?!?
+//
+@charset "utf-8";
+
+$max-width: {% if site.page_content_width %} {{ site.page_content_width }} {% else %} 1280px {% endif %} !default;
+$sidebar-sticky: {% if site.sidebar.sticky == true %} 1 {% else %} 0 {% endif %} !default;
+$sidebar-nav-item-left-margin: {% if site.sidebar.nav_sub_items_ident %} {{ site.sidebar.nav_sub_items_ident }} {% else %} 0px {% endif %} !default;
+$masthead-sticky: {% if site.masthead.sticky == true %} 1 {% else %} 0 {% endif %} !default;
+$footer-top-margin: {% if site.footer.top_margin %} {{ site.footer.top_margin }} {% else %} 3em {% endif %} !default; // 3em is huge, but that was the theme default
+
+@import "minimal-mistakes/skins/oi-light"; // skin overrides
+@import "minimal-mistakes"; // main partials
diff --git a/assets/css/main_oi-midnight.scss b/assets/css/main_oi-midnight.scss
new file mode 100644
index 00000000..090364d6
--- /dev/null
+++ b/assets/css/main_oi-midnight.scss
@@ -0,0 +1,30 @@
+--- 
+search: false 
+toc: false 
+---
+// You have two kinds of Sass files:
+//
+// 1. Main files, which you wish to be output as CSS files
+//    Main files are like pages, they go where you want them to be output, and they contain the YAML front matter (--- lines) at the top. 
+//    Only the main Sass file needs front matter (the dashes are enough), and only that is processed, @included files are not!!!
+//        https: //stackoverflow.com/questions/34293733/jekyll-using-values-from-config-yml-in-scss-partial
+//        https: //stackoverflow.com/questions/34274368/jekyll-using-values-from-config-yml-in-scss?rq=3
+//
+// 2. Partials, which are used by main files in @import statements
+//    Partials are like hidden Jekyll data, so they go in an underscored directory, which defaults to _sass.
+//
+// FIXME: Wish I could find a solution to get everything beside the skin include line to be moved to a common include file
+//        to eliminate repeated content bellow in the different main skin files :S
+//        Hope one day someone could come up with a working solution.
+//        Probably skipping the default Jekyll scss compilation and adding a self ade build step instead?!?
+//
+@charset "utf-8";
+
+$max-width: {% if site.page_content_width %} {{ site.page_content_width }} {% else %} 1280px {% endif %} !default;
+$sidebar-sticky: {% if site.sidebar.sticky == true %} 1 {% else %} 0 {% endif %} !default;
+$sidebar-nav-item-left-margin: {% if site.sidebar.nav_sub_items_ident %} {{ site.sidebar.nav_sub_items_ident }} {% else %} 0px {% endif %} !default;
+$masthead-sticky: {% if site.masthead.sticky == true %} 1 {% else %} 0 {% endif %} !default;
+$footer-top-margin: {% if site.footer.top_margin %} {{ site.footer.top_margin }} {% else %} 3em {% endif %} !default; // 3em is huge, but that was the theme default
+
+@import "minimal-mistakes/skins/oi-midnight"; // skin overrides
+@import "minimal-mistakes"; // main partials