/*
-----------------------------------------------------------------------------------------
Copyright      : Copyright 2024 Ferntree Computer Services
Name           : screen.css
Version        : 1.00.0
Under SCM      : 2024 05 28
Purpose        : Default Screen Style sheet for all Ferntree Computer Services web pages
Author         : Thomas Stojanovic (TAS)
Email          : tom.stojanovic@ferntree.net.au
Comments       : 
-----------------------------------------------------------------------------------------
Change Control : 2024 05 15 Created TAS


-----------------------------------------------------------------------------------------
*/

:root {
 /*Dates */  
  --last-updated-index: "29 May 2024";
  --last-updated-contact: "29 May 2024";
  --last-updated-products: "29 May 2024";
  --last-updated-about-us: "29 May 2024";
  --last-updated-cookies: "29 May 2024";
  --last-updated-privacy-policy: "29 May 2024";
  --last-updated-services: "29 May 2024";
  --last-updated-terms-of-use: "29 May 2024";
  --last-updated-excel-solutions: "29 May 2024";
  --last-updated-training: "29 May 2024";
  --last-updated-terminology: "29 May 2024";
  --last-updated-access-database-solutions: "29 May 2024";
  --last-updated-access-database-maturity-model: "29 May 2024";
  --last-updated-personal-cyber-security-protection: "29 May 2024";
  --last-updated-introduction-to-html: "29 May 2024";
  --last-updated-introduction-to-bitcoin-and-cryptocurrencies: "29 May 2024";
  --last-updated-cryptocurrency-why: "29 May 2024";
  --last-updated-html-kb: "29 May 2024";
  --last-updated-knowledge-bases: "29 May 2024";
  --copyright-year: "2024";
  
  /*colours*/
  --theme-accc-banner: #00759E;
  --theme-body: #666666;  
  --theme-body-lighter: #777777;
  --theme-body-darker: #333333;
  --theme-text: #e3e3e3;
  --theme-text-subtle: #c7c7c7;
  --theme-text-invert: #2e2e2e;
  --theme-text-glow-high-contrast: #e73e3e3;
  --theme-box-shadow-light: rgba(255,255,255,0.108);
  --theme-box-shadow-medium: rgba(255,255,255,0.132);
  --theme-box-shadow-heavy: rgba(255,255,255,0.18);
  --theme-box-shadow-extra-heavy: rgba(255,255,255,0.22);
  --theme-overlay: rgba(0,0,0,0.7);
  --theme-overlay-invert: #FFFFFF;

  /* --theme-body-background: #171717; */
  --theme-body-background: #0E1117;
  --theme-body-background-soft: #1e1e1e;
  --theme-body-background-medium: #2e2e2e;
  --theme-body-background-dark: #242424;
  
  --theme-border: #454545;
  --theme-table-header: #454545;
  --theme-table-row-header: #2e2e2e;
  --theme-table-border-dark: #5e5e5e;
  --theme-hover-base: #c7c7c7;
  --theme-hover-invert: #2e2e2e;
  --theme-border-white-high-contrast: rgba(255,255,255,0);
  --theme-border-yellow-high-contrast: rgba(0,0,0,0);
  --theme-code-highlight-background: #0c5a0c;
  --theme-visited: #8980e0;

  --theme-score-low-off: rgba(218,59,1,0.7);
  --theme-score-low: #da3b01;
  --theme-score-medium-off: rgba(255,187,0,0.3);
  --theme-score-medium: #ffc933;
  --theme-score-high-off: rgba(18,135,18,0.7);
  --theme-score-high: #17b517;

  --theme-primary-base: #4db2ff;
  --theme-primary-background: #002b4d;
  --theme-primary-background-glow-high-contrast: #002b4d;
  --theme-primary-dark: #a3d7ff;
  --theme-primary-hyperlink: #58a6ff;  
  --theme-primary-hover: #0091ff;
  --theme-primary-active: #0065b3;
  --theme-primary-box-shadow: rgba(0,101,179,0.3);
  --theme-primary-invert: #000000;
  --theme-primary-line: rgb(71,71,71);

  --theme-secondary-base: #757575;
  --theme-secondary-background: #2e2e2e;
  --theme-secondary-background-glow-high-contrast: #2e2e2e;
  --theme-secondary-dark: #e3e3e3;
  --theme-secondary-darker: #b3b3b3;  
  --theme-secondary-hover: #919191;
  --theme-secondary-active: #ababab;
  --theme-secondary-box-shadow: rgba(0,0,0,0.7);
  --theme-secondary-invert: #FFFFFF;

  --theme-tertiary-base: #454545;
  --theme-tertiary-background: #171717;
  --theme-tertiary-background-glow-high-contrast: #171717;
  --theme-tertiary-dark: #e3e3e3;
  --theme-tertiary-hover: #5e5e5e;
  --theme-tertiary-active: #757575;
  --theme-tertiary-box-shadow: rgba(0,101,179,0.3);
  --theme-tertiary-invert: #FFFFFF;

  --theme-success-base: #128712;
  --theme-success-background: #094409;
  --theme-success-background-glow-high-contrast: #094409;
  --theme-success-dark: #d2f9d2;
  --theme-success-hover: #17b517;
  --theme-success-active: #4ae84a;
  --theme-success-box-shadow: rgba(18,135,18,0.7);
  --theme-success-invert: #000000;
  --theme-hyperlink: #58a6ff;
  --theme-info-base: #8763c5;
  --theme-info-background: #38225d;
  --theme-info-background-dark: #30205a;  
  --theme-info-background-glow-high-contrast: #38225d;
  --theme-info-dark: #e2daf1;
  --theme-info-hover: #9b7dcf;
  --theme-info-active: #a98fd6;
  --theme-info-box-shadow: rgba(38,23,63,0.7);
  --theme-info-invert: #FFFFFF;
  --theme-inline-code: #454545;
  --theme-note-dark-background: rgba(46,69,54,0.7);
  --theme-warning-base: #ffbb00;
  --theme-warning-background: #664b00;
  --theme-warning-background-glow-high-contrast: #664b00;
  --theme-warning-dark: #fff1cc;
  --theme-warning-hover: #ffc933;
  --theme-warning-active: #ffd666;
  --theme-warning-box-shadow: rgba(255,187,0,0.7);
  --theme-warning-invert: #000000;
  --theme-danger-base: #da3b01;
  --theme-danger-background: #651b01;
  --theme-danger-background-glow-high-contrast: #651b01;
  --theme-danger-dark: #ffdacc;
  --theme-danger-hover: #fe571b;
  --theme-danger-active: #fe8f67;
  --theme-danger-box-shadow: rgba(218,59,1,0.7);
  --theme-danger-invert: #ffffff;
  --theme-facepile-red: #fe571b;
  --theme-facepile-teal: #00ccb4;
  --theme-facepile-blue: #0091ff;
  --theme-masthead-heading: #6495ED;
  --theme-collapsible:#131313;
  --color-border-muted: #26262d;
  --color-backgroud-emphasis: #181b22;

  --color-scale-black: #1b1f24;
  --color-scale-white: #ffffff;

  --color-scale-gray-0: #f6f8fa;
  --color-scale-gray-1: #eaeef2;
  --color-scale-gray-2: #d0d7de;
  --color-scale-gray-3: #afb8c1;
  --color-scale-gray-4: #8c959f;
  --color-scale-gray-5: #6e7781;
  --color-scale-gray-6: #57606a;
  --color-scale-gray-7: #424a53;
  --color-scale-gray-8: #32383f;
  --color-scale-gray-9: #24292f;

  --color-scale-blue-0: #ddf4ff;
  --color-scale-blue-1: #b6e3ff;
  --color-scale-blue-2: #80ccff;
  --color-scale-blue-3: #54aeff;
  --color-scale-blue-4: #218bff;
  --color-scale-blue-5: #0969da;
  --color-scale-blue-6: #0550ae;
  --color-scale-blue-7: #033d8b;
  --color-scale-blue-8: #0a3069;
  --color-scale-blue-9: #002155;  

  --color-scale-yellow-1: #fae17d;
  --color-scale-yellow-2: #eac54f;
  --color-scale-yellow-3: #d4a72c;
  --color-scale-yellow-4: #bf8700;
  --color-scale-yellow-5: #9a6700;
  --color-scale-yellow-6: #7d4e00;
  --color-scale-yellow-7: #633c01;
  --color-scale-yellow-8: #4d2d00;
  --color-scale-yellow-9: #3b2300;


  --color-scale-green-0: #dafbe1;
  --color-scale-green-1: #aceebb;
  --color-scale-green-2: #6fdd8b;
  --color-scale-green-3: #4ac26b;
  --color-scale-green-4: #2da44e;
  --color-scale-green-5: #1a7f37;
  --color-scale-green-6: #116329;
  --color-scale-green-7: #044f1e;
  --color-scale-green-8: #006342;
  --color-scale-green-9: #003d16;  
  --color-scale-green-10: #002d11;
  
  --color-scale-orange-0: #fff1e5;
  --color-scale-orange-1: #ffd8b5;
  --color-scale-orange-2: #ffb77c;
  --color-scale-orange-3: #fb8f44;
  --color-scale-orange-4: #e16f24;
  --color-scale-orange-5: #bc4c00;
  --color-scale-orange-6: #953800;
  --color-scale-orange-7: #762c00;
  --color-scale-orange-8: #5c2200;
  --color-scale-orange-9: #471700;
  
  --color-scale-red-0: #FFEBE9;
  --color-scale-red-1: #ffcecb;
  --color-scale-red-2: #ffaba8;
  --color-scale-red-3: #ff8182;
  --color-scale-red-4: #fa4549;
  --color-scale-red-5: #cf222e;
  --color-scale-red-6: #a40e26;
  --color-scale-red-7: #82071e;
  --color-scale-red-8: #660018;
  --color-scale-red-9: #4c0014;
  --color-scale-purple-0: #fbefff;
  --color-scale-purple-1: #ecd8ff;
  --color-scale-purple-2: #d8b9ff;
  --color-scale-purple-3: #c297ff;
  --color-scale-purple-4: #a475f9;
  --color-scale-purple-5: #8250df;
  --color-scale-purple-6: #6639ba;
  --color-scale-purple-7: #512a97;
  --color-scale-purple-8: #3e1f79;
  --color-scale-purple-9: #2e1461;
  --color-fg-default: var(--color-scale-gray-0);
  --color-canvas-default: var(--color-scale-gray-8);
  --color-canvas-default-transparent: rgba(13, 17, 23, 0);
}

/* ------------------------------------------------------------------ body */
body {
  background-color: var(--color-scale-white); /* White background color */
  color: var(--theme-body-darker); /* Medium gray color */
  
  font-family: Helvetica, Arial, "Segoe UI", SegoeUI, "Helvetica Neue", sans-serif;  
  line-height: 1.6; /* Increased line spacing for better readability */
  font-size: 16px; /* Standard font size */
  font-weight: 400;
  margin: 0;
  padding: 0;
}

p {
  margin-top: 1em;
  margin-bottom: 0em;  
}

h2 {
  margin-top: 1em;
  margin-bottom: 0em;  
}

h3 {
  margin-top: 0em;
  margin-bottom: 0em;  
}

.home-title {
  margin-top: 3em; /* Adjust the value as needed */
}

a {
  color: #0066cc; /* Bright blue for visibility */
  text-decoration: none;   
  transition: color 0.3s; /* Smooth transition for color change */
}

a:hover, a:focus {
  text-decoration: underline;
}

/* ------------------------------------------------------------------ top button */
#top-button {
  position: fixed;
  bottom: 20px;
  left: 20px;
  display: none;
  padding: 10px;
  font-size: 0.9em; /* Adjusted to match content font size */
  background: var(--color-scale-green-8);
  color: var(--color-scale-white);
  border: none;
  border-radius: 5px;
  cursor: pointer;
  z-index: 1000;
}

#top-button:hover {
  background: var(--color-scale-green-8);
}
/* ------------------------------------------------------------------ header */
header {
  background-color: var(--color-scale-green-8); /* Darker green */
  color: var(--color-scale-white);  
  padding: 1em 0 0.25em 1em;
  position: relative;
  display: flex;
  flex-direction: column; /* Stack items vertically */
  align-items: center; /* Center items horizontally */  

}

header .logo {
  display: flex;
  align-items: center;
  justify-content: center; /* Centers the content within the .logo container */
  background: url('../media/image//logo.png') no-repeat left center;
  background-size: 60px 60px; /* Adjust the size as needed */
  padding-left: 70px; /* Adjust based on the logo size */
}

header .logo p {
  margin: 0;
  font-size: 2em;
  font-weight: 600; /* Bold font weight */
  letter-spacing: 1.5px; /* Increase space between letters */
}

/* ------------------------------------------------------------------ navigation */
nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: center;
  position: relative;
}

nav ul li {
  margin: 0 1em;
  position: relative;
}

nav ul li a {
  color: var(--color-scale-white);  
  text-decoration: none;
  font-weight: 500;
  display: flex;
  align-items: center;
}

nav ul li a:hover {
  text-decoration: underline;
}

/* Arrow for dropdowns */
nav ul li .arrow {
  margin-left: 5px;
  font-size: 0.75em; /* Adjust the size of the arrow */
}

/* Drop-down Menu */
nav ul li.dropdown {
  display: inline-block;
}

nav ul li .dropdown-content {
  display: none;
  position: absolute;
  background-color: var(--color-scale-white);
  min-width: 300px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

nav ul li .dropdown-content a {
  color: var(--theme-body);
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  line-height: 0.6em; /* Reduce line height */
}

nav ul li .dropdown-content a:hover {
  background-color: var(--theme-hover-base);
}

nav ul li .dropdown-content .separator {
  border-top: 1px solid var(--theme-body);
  margin-top: 0em; /* Adjust margin to bring the line closer */
  margin-bottom: 0em; /* Adjust as needed */
}

nav ul li.dropdown:hover .dropdown-content {
  display: block;
}

/* ------------------------------------------------------------------ breadcrumb */
.breadcrumb {
  background-color: #f5f5f5;
  padding: 1em;
  margin-bottom: 0em;
  margin-left: auto;
  margin-right: auto;
  max-width: 1012px;

  /* text-align: left; */
}

.breadcrumb a {
  color: #006342; /* Darker green */
  text-decoration: none;
  font-weight: 600; /* Thicker font weight */
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.breadcrumb span {
  color: var(--theme-body); /* Medium gray color */
}


/* ------------------------------------------------------------------ Services */
.services-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  padding: 20px;
}

.service-tile {
  display: block;
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  padding: 20px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;
  text-decoration: none;
  color: inherit;
}

.service-tile:hover {
  transform: scale(1.05);
}

.service-title, .service-description, .service-description span {
  font-size: 1em;
  color: inherit;
  text-decoration: none;
}

.service-title {
  font-size: 1.2em;
  margin-bottom: 10px;
}

.service-description {
  font-size: 1em;
}
    
/* ------------------------------------------------------------------ content */
#content {
  margin-top: 0.25em;
  margin-left: auto;
  margin-right: auto;
  max-width: 1012px;
  padding-left: 4em;
  padding-right: 4em;
  padding-top: 0.5em;
  position: relative;
  text-align: left;
  text-rendering: optimizeLegibility;
}

#content p {
  margin-top: 0.25em;  
  color: var(--theme-body); /* Medium gray color */
  line-height: 1.6; /* Increased line spacing for better readability */  
}

#content h1 {
  font-size: 1.75em;
  font-weight: 500; /* Bold font weight */
  letter-spacing: 2px; /* Increase space between letters */
  margin-top: 0em; /* Add margin below the heading */
  margin-bottom: 0.5em; /* Add margin below the heading */
  padding-bottom: 0.25em;
}

#content h2 {
  font-size: 1.5em; /* Increase font size */
  font-weight: 500; /* Bold font weight */
  letter-spacing: 1.5px; /* Increase space between letters */
}

.home-title {
  padding-top: 1em; /* Adjust the value as needed */
}

h1 + h2 {
  margin-top: 0; /* Removes the top margin of h2 when it immediately follows h1 */
}

#content h3 {
  font-size: 1.25em; /* Increase font size */
  font-weight: 500; /* Semi-bold font weight */
  margin-top: 0.5em; 
  padding-bottom: 0.25em;  
}

#content h4 {
  font-size: 1em;
  font-weight: 600;
  margin-top: 0.75em; 
  margin-bottom: -0.25em;
  padding-bottom: 0em;
}


/* ------------------------------------------------------------------ definitions section */
#definitions {
  margin-top: 0.25em;
  margin-left: auto;
  margin-right: auto;
  max-width: 1012px;
  padding-bottom: 1em;
  padding-left: 4em;
  padding-right: 4em;
  padding-top: 0.5em;
  position: relative;
  text-align: left;
  text-rendering: optimizeLegibility;
}

#definitions p {
  color: var(--theme-body); /* Medium gray color */
  font-size: 0.9em;
  line-height: 1.4em; /* Increased line spacing for better readability */  
  margin-top: 0em;
  margin-bottom: 1em;
}

#definitions h1 {
  font-size: 1.75em;
  font-weight: 500; /* Bold font weight */
  letter-spacing: 2px; /* Increase space between letters */
  margin-bottom: 0.5em; /* Add margin below the heading */
}

#definitions h2 {
  font-size: 1.5em; /* Increase font size */
  font-weight: 500; /* Bold font weight */
  letter-spacing: 1.5px; /* Increase space between letters */
  margin-bottom: 0.5em; /* Add margin below the heading */
  padding-bottom: 0.2em; /* Add padding below the text */
}

#definitions h3 {
  font-size: 1.25em; /* Increase font size */
  font-weight: 500; /* Semi-bold font weight */
  margin-bottom: 0.5em; /* Add margin below the heading */
}

#definitions dt {
  font-size: 0.9em;
  font-weight: 600; /* Bold font weight */  
  line-height: 1.4em; /* Increased line spacing for better readability */  
  padding-bottom: 0.75em;    
}

#definitions dd {
  font-size: 0.9em;  
  line-height: 1.4em; /* Increased line spacing for better readability */  
  padding-bottom: 0.75em;  
}

#definitions ul {
  margin-top: 0em;  
}


/* ------------------------------------------------------------------ lists */
ul {
  list-style: disc inside;
  margin-left: -2em;
  margin-bottom: 1em;
}

ul li {
  margin-bottom: 0.5em;
}

/* ------------------------------------------------------------------ form */
form {
  display: flex;
  flex-direction: column;
}

form label {
  margin-top: 1em;
}

form input, form textarea {
  padding: 0.5em;
  margin-top: 0.5em;
}

form input[type="text"], form input[type="email"], form textarea {
  width: 50%; /* Reduce width to half size */
}

form button {
  width: 100px;
  margin-top: 1em;
  padding: 0.5em 1em;
  background-color: var(--color-scale-green-8); /* Darker green */
  color: var(--color-scale-white);
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-weight: 600; /* Thicker font weight */
}

form button:hover {
  background-color: #004d00;
}

/* ------------------------------------------------------------------ footer */
footer {
  background-color: var(--color-scale-green-8); /* Darker green */
  color: var(--color-scale-white);
  text-align: center;
  margin-top: 2em;
  padding: 0.5em 0;
  font-size: 14px; /* Example property to make the text smaller */
}

footer ul {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: center;
  margin-bottom: 1em;
}

footer ul li {
  margin: 0 1em;
  position: relative;
}

footer ul li a {
  color: var(--color-scale-white);
  text-decoration: none;
  font-weight: 500; /* Thicker font weight */
}

footer ul li a:hover {
  text-decoration: underline;
}

footer p {
  color: var(--color-scale-white);
}

.small {
  font-size: 14px; /* Example property to make the text smaller */
}

footer .last-updated-excel-solutions::before {
  content: "Date last updated: " var(--last-updated-excel-solutions);
}

footer .last-updated-index::before {
  content: "Date last updated: " var(--last-updated-index);
}

footer .last-updated-contact::before {
  content: "Date last updated: " var(--last-updated-contact);
}

footer .last-updated-products::before {
  content: "Date last updated: " var(--last-updated-products);
}

footer .last-updated-about-us::before {
  content: "Date last updated: " var(--last-updated-about-us);
}

footer .last-updated-cookies::before {
  content: "Date last updated: " var(--last-updated-cookies);
}

footer .last-updated-privacy-policy::before {
  content: "Date last updated: " var(--last-updated-privacy-policy);
}

footer .last-updated-services::before {
  content: "Date last updated: " var(--last-updated-services);
}

footer .last-updated-terms-of-use::before {
  content: "Date last updated: " var(--last-updated-terms-of-use);
}

footer .last-updated-training::before {
  content: "Date last updated: " var(--last-updated-training);
}

footer .last-updated-access-database-solutions::before {
  content: "Date last updated: " var(--last-updated-access-database-solutions);
}

footer .last-updated-access-database-maturity-model::before {
  content: "Date last updated: " var(--last-updated-access-database-maturity-model);
}

footer .last-updated-terminology::before {
  content: "Date last updated: " var(--last-updated-terminology);
}

footer .last-updated-html-kb::before {
  content: "Date last updated: " var(--last-updated-html-kb);
}

footer .last-updated-personal-cyber-security-protection::before {
  content: "Date last updated: " var(--last-updated-personal-cyber-security-protection);
}

footer .last-updated-introduction-to-html::before {
  content: "Date last updated: " var(--last-updated-introduction-to-html);
}

footer .last-updated-introduction-to-bitcoin-and-cryptocurrencies::before {
  content: "Date last updated: " var(--last-updated-introduction-to-bitcoin-and-cryptocurrencies);
}

footer .last-updated-cryptocurrency-why::before {
  content: "Date last updated: " var(--last-updated-cryptocurrency-why);
}

footer .last-updated-knowledge-bases::before {
  content: "Date last updated: " var(--last-updated-knowledge-bases);
}

footer .copyright::before {
  content: "\00A9 \0020 Copyright " var(--copyright-year) " Ferntree.net.au.  All rights reserved.";
}

footer .trademarks::before {
  content: "All registered trademarks herein are the property of their respective owners.";
}

/* ------------------------------------------------------------------ table of contents */
.toc {
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  padding: 15px;
  margin-bottom: 20px;
  padding-left: 4em;  
}

.toc h2 {
  font-size: 1.25em; /* Increase font size */
}

.toc ul {
  list-style-type: none;
  padding-left: 0;
}

.toc ul li {
  margin-bottom: 5px;
}

.toc ul ul {
  margin-left: 20px;
}

.toc ul li a {
  text-decoration: none;
  color: #0073e6;
}

.toc ul li a:hover {
  text-decoration: underline;
}