/*  FF-ADDONS-FLEXBOX-COLORS-04 */
/*  paper: #28 https://www.canva.com/learn/website-color-schemes/ */
/*  #d5d5d5 Paper  -  #96858f Dusty  -  #6d7993 Lavendar  -  #9099a2 Overcast   */
/*
2023-10-31 :
    hover effect added to Extensions table
2023-11-04 :
    tried Firefox logo colors for Auxiliary table (#3);
    modified colors for Auxiliary table (#3);
2023-11-09:
    bottom footer background color removed from html element;
    background-1 background-color RESTORED;
    body background transparency REMOVED and ADDED to .wrapper-1 section element;
2023-11-10:
    darker text color for figure h3 and blockquote; changed color of the blockquote quotation marks
2023-12-23: ?
    NEW Version ff-addons-flexbox-colors-03.css     (from ff-addons-flexbox-colors-02.css)
    CHANGED classes .background-0x to .colors-0x
    Table Link State colors are now stored in Variables and assigned with the var() function.
2024-03-04:
    CHANGED .colors-02  [table caption] background-color to same as [footer]  border color;
    CHANGED [footer] background color to  .colors-02  table darker even-numbered rows and ADDED linear-gradient;
2024-04-12:
    FIRST USE OF :not() selector;
    USING [no-hover] class to filter Table Row background color Hover effect in the Extensions table;
2024-07-07:
    CHANGED Themes table to use .colors-02 INSTEAD OF .colors-03 to reduce the number of page colors AND look more compatible with the nav-bar dropdown indian red scheme;
    CHANGED [body] background color gradient start to match about-07 [body] background color;
    CHANGED .colors-02 table heading background to match indian red scheme dropdown headings;
    CHANGED [footer] border color to match indian red scheme dropdown headings;
    CHANGED [footer] background color to match .colors-02 background color;
    EDIT: CHANGED [footer] background color to match .colors-02 Table [even] rows background color which is lighter - Linux logo more visible with the ligher background;
    CHANGED [footer] links color to #ffcb00 Firefox logo color PHILIPPINE YELLOW;
    CHANGED [blockquote] quotes color to match indian red scheme dropdown headings AND adjusted quotes spacing;
 */

/* =====  F-I-R-E-F-O-X   L-O-G-O   C-O-L-O-R-S  ========== */

/*  #e66000 spanish orange  -  #ff9500 vivid gamboge  -  #ffcb00 philippine yellow  -  #00539f usafa blue  -  #0095dd blue cola  -  #331e54 russian violet  */



/* =====  C-O-L-O-R-S   P-R-I-M-A-R-Y  ========== */

/* .colors-01, body { */
body {
    background-color: #989d97;      /* #099d97 a light greenish beige */
    background-color: #bebab7;      /* lighter tint of #b7b3af */
    background-color: #edeae0;      /*  #edeae0  Alabaster  */
    background-color: #ede6d6;      /*  #ede6d6  White Chocolate  */
    background-color: #e8e3da;
    background-color: #eae7e5;
    color: #27221f;                 /* Ink color from #2e2a29  https://encycolorpedia.com/2e2a28 */
    color: #25201e;                 /*  #25201e  darker shade of #eae7e5  https://coolors.co/eae7e5 */
    }

body { background: linear-gradient(to bottom, #bebab7, 80%, #989d97)  }
body { background: linear-gradient(to bottom, #bebab7, 70%, #eae7e5)  }
body { background: linear-gradient(to bottom, #989d97, 80%, #535D52)  }     /* #989d97 a light greenish beige */
body { background: linear-gradient(to bottom, #989d97, 80%, #95908b)  }
body { background: linear-gradient(to bottom, #989d97, 80%, #767d74)  }
body { background: linear-gradient(to bottom, #989d97, 80%, #6f6661)  }     /* #6f6661 compliment of #989d97 */
body { background: linear-gradient(to bottom, #bcb8b5, 80%, #6f6661)  }     /* compliments of #989d97;  medium-beige to darker brownish beige */
body { background: linear-gradient(to bottom, #bcb8b5, 80%, #535c51)  }     /* compliments of #989d97;  medium-beige to darker greenish beige */
body { background: linear-gradient(to bottom, #bcb8b5, 80%, #767d74)  }     /* compliments of #989d97;  medium-beige to greenish beige */
body { background: linear-gradient(to bottom, #bebab7, 70%, #7e7671)  }     /* same as chosen but with darker top-start */
body { background: linear-gradient(to bottom, #edeae0, 50%, #6f6661)  }     /*  */
body { background: linear-gradient(to bottom, #eae7e5, 50%, #5c5551)  }     /* same as chosen to darker brownish beige bottom #5c5551 darker tint of #6f6661 */
body { background: linear-gradient(to bottom, #ede6d6, 70%, #6f6661)  }     /* #ede6d6 White Chocolate */
body { background: linear-gradient(to bottom, #eae7e5, 65%, #767d74)  }     /* altered chosen;  gradient to medium-beige to greenish beige */
body { background: linear-gradient(to bottom, #ebe7e0, 50%, #7e7671)  }     /* MODIFIED chosen  #ebe7e0 shade of #f5f3ef  note: about-07 .package #2  CHANGED to #ebe7e0  https://coolors.co/f5f3ef */
body { background: linear-gradient(to bottom, #e8e3da, 60%, #7e7671)  }     /* MODIFIED chosen  #e8e3da shade of #f5f3ef  note: about-07 [body]  https://coolors.co/f5f3ef */
body { background: linear-gradient(to bottom, #eae7e5, 60%, #7e7671)  }     /* chosen */
body { background: linear-gradient(to bottom, #eae7e5, 70%, #6f6661)  }     /* same as chosen to darker brownish beige bottom */
body { background: linear-gradient(to bottom, #eae7e5, 84%, #25201e)  }     /* #25201e is a darker shade of #eae7e5  https://coolors.co/eae7e5 */
body { background: linear-gradient(to bottom, #eae7e5, 86%, #37312c)  }     /* #37312c is a darker shade of #eae7e5  https://coolors.co/eae7e5 */
body { background: linear-gradient(to bottom, #eae7e5, 80%, #25201E)  }     /* #25201E is a darker shade of #eae7e5  https://coolors.co/eae7e5 */
body { background: linear-gradient(to bottom, #eae7e5, 93%, #37312c)  }     /* #37312c is a darker shade of #eae7e5  https://coolors.co/eae7e5 */

/* body { background: linear-gradient(to bottom, #dddddd, 60%, #606060)  } */
/* body { background: linear-gradient(to bottom, #edead8, 70%, #606060)  } */

.wrapper-1  section {
    background-color: transparent;   /*  added to make background gradient work properly within section 1 behind figure/blcokquote in flexbox layout  */
    }


/* =====  H-E-A-D-E-R  ========== */

header h1 {
    /* #331e54 RUSSIAN VIOLET a Firefox brand color  https://brandpalettes.com/firefox-logo-colors/ */
    color: #331e54;
    /* color: purple; */
    /* color: #5e2750; */      /* ubuntu colors (Mid aubergine): https://design.ubuntu.com/brand/colour-palette */
    }
/* p.document-date is in header */
p.document-date {
    color: #e66000; /* Firefox logo color spanish orange */
    color: #77216f; /* ubuntu purple: https://colorswatches.info/color/ubuntu-purple */
    color: #5e2750; /* ubuntu colors (Mid aubergine): https://design.ubuntu.com/brand/colour-palette */
    }


/* =====  B-L-O-C-K-Q-U-O-T-E  ========== */

figure h3 {
    /* #5E2750 background-02 table heading */
    color: #5E2750;     /* ubuntu colors (Mid aubergine): https://design.ubuntu.com/brand/colour-palette */
    /* #331e54 RUSSIAN VIOLET a Firefox brand color  https://brandpalettes.com/firefox-logo-colors/ */
    color: #331e54;
    color: #2C001E;
    }
blockquote {
    color: #331E54;
    color: #2C001E;
    color: #25201e;     /*  #25201e  darker shade of #eae7e5  https://coolors.co/eae7e5 */
    }
blockquote p::before, blockquote p::after {
    /* #e66000 SPANISH ORANGE a Firefox brand color  https://brandpalettes.com/firefox-logo-colors/ */
    color: #e66000;
    /* #cf5600 darker shade of #e66000 */
    color: #cf5600;
    /* #b84d00 25% darker than #e66000  https://encycolorpedia.com/e66000  */
    color: #b84d00;
    /*  i used the browser eyedropper to extract this color from the logo */
    color: #d8105a;
    /* Firefox logo color philippine yellow */
    color: #FFCB00;
    /* Firefox logo color vivid gamboge */
    color: #FF9500;
    /* #5a2527 - indian red scheme --heading-bg - #5a2527 shade of #c1666b   https://coolors.co/c1666b */
    color: #5a2527;
    }



/* =====  C-O-L-O-R-S-01   T-A-B-L-E   C-O-L-O-R-S   (EXTENSIONS)  ========== */

.colors-01 table {
    background-color: #d5d5d5;  /* paper: #28 https://www.canva.com/learn/website-color-schemes/  */
    background-color: #e5e5e5;
    /* #efece5 extra white */
    background-color: #efece5;
    /* #f5f3ef penguin white */
    background-color: #f5f3ef;
    box-shadow: 4px 6px 10px rgba(0, 0, 0, .5);
    /* #30 - https://getcssscan.com/css-box-shadow-examples */
    box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
    /* #29 - https://getcssscan.com/css-box-shadow-examples*/
    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
    }
.colors-01 table caption {
    background-color: #4A4B4B;  /* paper #d5d5d5 compliment */
    background-color: #414242;  /* #414242 - darker tint of #4A4B4B  https://encycolorpedia.com/4a4b4b  */
    background-color: #68482f;  /* #68482f - from sisley painting  */
    background-color: #3d3e3e;  /* #3d3e3e - darker tint of #4A4B4B  https://encycolorpedia.com/4a4b4b  */
    background-color: #2a2b2b;
    background-color: #463820;  /* #463820 from color palette #10 for #f5f3ef  https://coolors.co/f5f3ef/palettes */
    color: #fff;
    }
.colors-01 table tfoot {
    background-color: #4A4B4B;  /* paper #d5d5d5 compliment */
    background-color: #414242;  /* #414242 - darker tint of #4A4B4B  https://encycolorpedia.com/4a4b4b  */
    background-color: #3d3e3e;  /* #3d3e3e - darker tint of #4A4B4B  https://encycolorpedia.com/4a4b4b  */
    background-color: #2a2b2b;
    background-color: #463820;  /* #463820 from color palette #10 for #f5f3ef  https://coolors.co/f5f3ef/palettes */
    color: #fff;
    }
.colors-01 table tfoot tr {
    border-top-color: #000;
    }

/*
.colors-01 table th.not-used {
    background-color: #5e2750;
    color: #fff;;
    background-color: #f5c1ba;
    color: #000;
    background-color: #331E54;
    color: #fff;;
    background-color: #4A4B4B;
    color: #f3f3f3;
    }
*/

/* =====  C-O-L-O-R-S-01   S-T-R-I-P-E-D   R-O-W-S  ========== */

.colors-01 table tbody tr:nth-of-type(even) { background-color: #A9A9A9; }  /* paper #d5d5d5 compliment */
.colors-01 table tbody tr:nth-of-type(even) { background-color: #C7C7C7; }  /* paper #d5d5d5 compliment */
.colors-01 table tbody tr:nth-of-type(even) { background-color: #d5d5d5; }
.colors-01 table tbody tr:nth-of-type(even) { background-color: #dbd7d2; }
.colors-01 table tbody tr:nth-of-type(even) { background-color: #E8E3DA; }
/* #e5e3df based on #f5f3ef penguine white */
.colors-01 table tbody tr:nth-of-type(even) { background-color: #e5e3df; }


/* =====  C-O-L-O-R-S-01   H-O-V-E-R   E-F-F-E-C-T  added: 2023-10-31  ========== */

/* .colors-01 table tbody tr:not([class*="no-hover"]):hover { background-color: #ffcb00; transition: all 0.20s ease; }   #ffcb00 Firefox logo PHILIPPINE YELLOW */

/* ***** this selector added: 2026-06-03 ***** */
.colors-01 table tbody tr:has(> td):hover { background-color: #ffcb00; transition: all 0.20s ease; }   /* #ffcb00 Firefox logo PHILIPPINE YELLOW */
.colors-01 table tbody tr:has( td a:focus ) { background-color: #ffcb00; transition: all 0.20s ease; }   /* #ffcb00 Firefox logo PHILIPPINE YELLOW */
.colors-01 table tbody tr td a:focus { outline: transparent; }


/* attribute selector for class that CONTAINS "not-used" */
/* .colors-01 table tbody tr[class*="not-used"]:hover { background-color: #ff9500; } */  /* firefox logo Vivid Gamboge */
/* .colors-01 table tbody tr.not-used:not.no-hover:hover { background-color: #ff9500; transition: all 0.20s ease;  }  #ff9500 Firefox logo VIVID GAMBOGE */

/* #ffcb00 Firefox logo PHILIPPINE YELLOW */
.colors-01 table tbody tr.not-used:has(td):hover { background-color: #ff9500; transition: all 0.20s ease; }
/* .colors-01 table tbody tr.not-used td a:focus { background-color: #ff9500; transition: all 0.20s ease; } */
.colors-01 table tbody tr.not-used:has( td a:focus) { background-color: #ff9500; transition: all 0.20s ease; }



/* =====  C-O-L-O-R-S-01   L-I-N-K   S-T-A-T-E-S  ========== */

/*  --a-link-clr   --a-visited-clr   --a-hover-clr   --a-active-clr   --a-text-decor-clr  */

/* a:hover MUST come after a:link and a:visited - https://www.w3schools.com/Css/css_link.asp */
.colors-01 { --a-link-clr: #000050; }

.colors-01 { --a-visited-clr: #000050; }

.colors-01 { --a-hover-clr: #5e2750; }  /* ubuntu colors (Mid aubergine): https://design.ubuntu.com/brand/colour-palette */
.colors-01 { --a-hover-clr: #2c001e; }

.colors-01 { --a-active-clr: #b22222; }
.colors-01 { --a-active-clr: #5d0601; }
.colors-01 { --a-active-clr: #000000; }

.colors-01 { --a-text-decor-clr: #2c001e; }



/* =====  C-O-L-O-R-S-02  ========== */

.colors-02 {
    background-color: #333333;  /*  */
    color: #27221f;     /* Ink color from #2e2a29  https://encycolorpedia.com/2e2a28 */
}
/* .class.class matches any element with both classes. */
.colors-02.bg-wrap {
    border-color: #000000;  /*  */
    /* box-shadow: 4px 6px 10px rgba(0, 0, 0, .5); */
    /* #28 - https://getcssscan.com/css-box-shadow-examples */
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
    /* #29 - https://getcssscan.com/css-box-shadow-examples */
    /* box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px; */
}


/* =====  C-O-L-O-R-S-02   T-A-B-L-E   C-O-L-O-R-S   (RESOURCES)  ========== */

.colors-02 table,
.colors-02 table tr,
.colors-02 table caption {
     border-color: #000;    /* match bg-wrap border-color */
}

.colors-02 table {
     background-color: #4A4B4B;
     /* bg color change:  2026-07-14 */
     background-color: #343535;
     color: #000;
}

.colors-02 table caption { background-color: #77216f; color: #fff; }  /* ubuntu Light aubergine */
.colors-02 table caption { background-color: #a9a9a9; color: #000; }  /*  */
.colors-02 table caption { background-color: #c7c7c7; color: #000; }  /*  */
.colors-02 table caption { background-color: #5e2750; color: #fff; }  /* #5e2750 - footer border - ubuntu Mid aubergine https://design.ubuntu.com/brand/colour-palette */
.colors-02 table caption { background-color: #5a2527; color: #fff; }  /* #5a2527 - indian red scheme --heading-bg - #5a2527 shade of #c1666b   https://coolors.co/c1666b */
.colors-02 table caption { background-color: #511919; color: #fff; }  /* #511919 - shade of indian red #cd5c5c  https://coolors.co/cd5c5c */


/* =====  C-O-L-O-R-S-02   S-T-R-I-P-E-D   R-O-W-S ========== */

.colors-02 table tbody tr:nth-of-type(even) { background-color: inherit; }
.colors-02 table tbody tr:nth-of-type(even) { background-color: #5c5d5d; }
.colors-02 table tbody tr:nth-of-type(even) { background-color: #414242; }
 /* bg color change:  2026-07-14 */
.colors-02 table tbody tr:nth-of-type(even) { background-color: #252525; }


/* =====  C-O-L-O-R-S-02   H-O-V-E-R   E-F-F-E-C-T  added: 2023-10-31 ========== */

.colors-02 table tbody tr:hover { background-color: transparent; }
/* INCREASED td bottom and top padding to improve appearance of hover effect on the smaller tables */
.colors-02 table tbody tr:hover { background-color: #3b3c3c; }  /* 25% darker than #4a4b4b */
.colors-02 table tbody tr:hover,
.colors-02 table tbody tr a:focus {
     background-color: #272828;
     /* bg color change:  2026-07-14 */
     background-color: #050505;
}


/* =====  C-O-L-O-R-S-02   L-I-N-K   S-T-A-T-E-S  ========== */

.colors-02 { --a-link-clr: #ffffff; }
.colors-02 { --a-visited-clr: #ffffff; }
.colors-02 { --a-hover-clr: #ffffff; }

.colors-02 { --a-active-clr: #b22222; }
.colors-02 { --a-active-clr: #ffcb00; }     /* PHILIPPINE YELLOW from the Firefox Logo */
.colors-02 { --a-active-clr: #ffea80; }     /* SANDY or SWEET CORN from: https://support.mozilla.org/en-US/kb/recommended-extensions-program */
.colors-02 { --a-active-clr: #ffffff; }

.colors-02 { --a-text-decor-clr: #2c001e; }
.colors-02 { --a-text-decor-clr: #800080; }
.colors-02 { --a-text-decor-clr: #ccc; }
.colors-02 { --a-text-decor-clr: #999; }
.colors-02 { --a-text-decor-clr: #8b8c8b; }     /* lighter version of #272828 hover */
.colors-02 { --a-text-decor-clr: #676868; }     /* lighter version of #272828 hover */




/* =====  C-O-L-O-R-S-03  =============== */

.colors-03 {
    background-color: #768C76;  /* from greyish scheme */
    background-color: #7aae8e;  /* #7aae8e from coolors.co schemes for #eae7e5 */
    background-color: #243e0d;  /* ##243e0d from https://www.patreon.com/linux_mint */
    background-color: #bec5b7;  /* #bec5b7 from coolors.co schemes for #eae7e5 */
    background-color: #6a929c;  /* #6a929c from coolors.co schemes for #eae7e5 */
    background-color: #5e845e;  /* #5e845e compliment of #a8baa8 .colors-03 table background */
    color: #27221f;     /* Ink color from #2e2a29  https://encycolorpedia.com/2e2a28 */
}
/* .class.class matches any element with both classes. */
.colors-03.bg-wrap {
    border-color: #648064;  /* from greyish scheme */
    border-color: #517a51;  /* complemnet for #96ae96 */
    border-color: #374e37;  /* complemnet for #768c76 */
    border-color: #254f25;  /* #254f25 complemnet for #5e845e .colors-03 background color */
    box-shadow: 4px 6px 10px #222;
    box-shadow: 4px 6px 10px rgba(10, 10, 10, .6);
}

/* =====  C-O-L-O-R-S-03   T-A-B-L-E   C-O-L-O-R-S   (AUXILIARY)  ========== */

.colors-03 table,
.colors-03 table tr,
.colors-03 table caption {
  /* match bg-wrap border-color */
     border-color: #254f25;
}

.colors-03 table { background-color: #80aa6f; color: #000; }        /* complimentary of #5e2750 background-02 caption */
.colors-03 table { background-color: #AEB9AD; color: #000; }        /* for paper theme */
.colors-03 table { background-color: #829e82; color: #000; }
.colors-03 table { background-color: #96ae96; color: #000; }        /* as of 2023 - 11 - 20  12:10  */
.colors-03 table { background-color: #A8BAA8; color: #000; }        /* original */

.colors-03 table caption { background-color: #485F47; color: #fff; }  /* paper theme: dusty #96858f compliment   */
.colors-03 table caption { background-color: #455645; color: #fff; }  /* from greyish scheme */
.colors-03 table caption { background-color: #072c07; color: #fff; }  /* #072c07 complement of #254f25 complemnet for #5e845e .colors-03 background color */
.colors-03 table caption { background-color: #5e845e; color: #fff; }  /* #855f74 complement of #a8baa8  https://paletton.com*/
.colors-03 table caption { background-color: #464648; color: #fff; }  /* #464648 selected palette of #a8baa8  https://coolors.co */
.colors-03 table caption { background-color: #333333; color: #fff; }  /* #333333 colors-02 bg-wrap background */
.colors-03 table caption { background-color: #164703; color: #fff; }  /* #164703 analogous palette of #a8baa8  https://coolors.artyclick.com */
.colors-03 table caption { background-color: #254f25; color: #fff; }  /* #254f25 complemnet for #5e845e .colors-03 background color */
.colors-03 table caption { background-color: #215843; color: #fff; }  /* #215843 selected palette of #a8baa8  https://coolors.co */


/* =====  C-O-L-O-R-S-03   S-T-R-I-P-E-D   R-O-W-S  ========== */

.colors-03 table tbody tr:nth-of-type(even) { background-color: #aabdaa; }
.colors-03 table tbody tr:nth-of-type(even) { background-color: inherit; }
.colors-03 table tbody tr:nth-of-type(odd) { background-color: #b6c5b6; }
.colors-03 table tbody tr:nth-of-type(even) { background-color: #8a988a; }
.colors-03 table tbody tr:nth-of-type(even) { background-color: #829e82; }
.colors-03 table tbody tr:nth-of-type(even) { background-color: #b9c7b9; }
.colors-03 table tbody tr:nth-of-type(even) { background-color: #97a797; }
.colors-03 table tbody tr:nth-of-type(even) { background-color: #a1b5a1; }  /* #a1b5a1 darker shade of #a8baa8 - https://icolorpalette.com/color/a8baa8 */


/* =====  C-O-L-O-R-S-03   H-O-V-E-R   E-F-F-E-C-T  added: 2023-10-31  ========== */

/* .colors-03 table tbody tr:hover { background-color: #a9a9a9; } */
.colors-03 table tbody tr:hover { background-color: #bbc4ba; }
.colors-03 table tbody tr:hover { background-color: #d6cac0; }  /* compliment for #768c76 background-03 */
.colors-03 table tbody tr:hover {
    background-color: #113411;  /* #113411 compliment for #374e37 background-03 */
    background-color: #254f25;  /* #254f25 complemnet for #5e845e .colors-03 background color  */
    background-color: #154115;  /* #154115 compliment of #254f25 complemnet for #5e845e .colors-03 background color  */
    color: #ffffff;
}


/* =====  C-O-L-O-R-S-03   L-I-N-K   S-T-A-T-E-S  ========== */

/* .colors-03 a:link { color: #0d110d; text-decoration: none; } */      /* darker shade of #455645 .colors-03 table thead */
.colors-03 { --a-link-clr: #000000; }

.colors-03 { --a-visited-clr: #000000; }

.colors-03 { --a-hover-clr: #fff; }

.colors-03 { --a-active-clr: #b22222; }
.colors-03 { --a-active-clr: #e66000; }
.colors-03 { --a-active-clr: #800080; }
.colors-03 { --a-active-clr: #800000; }
.colors-03 { --a-active-clr: #5e2750; }
.colors-03 { --a-active-clr: #004400; }
.colors-03 { --a-active-clr: #5d0601; }
.colors-03 { --a-active-clr: #fff; }

.colors-03 { --a-text-decor-clr: #005000; }
.colors-03 { --a-text-decor-clr: #ccc; }
.colors-03 { --a-text-decor-clr: #6a8667; }     /* lighter version of #254f25 hover */


/* =====  L-I-N-K   S-T-A-T-E-S  =============== */

/*  --a-link-clr   --a-visited-clr   --a-hover-clr   --a-active-clr   --a-text-decor-clr  */

/* a:hover MUST come after a:link and a:visited - https://www.w3schools.com/Css/css_link.asp */
.colors-01 a:link,
.colors-02 a:link,
.colors-03 a:link {
    color: var(--a-link-clr);
    text-decoration: none;
    }

.colors-01 a:visited,
.colors-02 a:visited,
.colors-03 a:visited {
    color: var(--a-visited-clr);
    text-decoration: none;
    }

.colors-01 a:hover,
.colors-02 a:hover,
.colors-03 a:hover {
    color: var(--a-hover-clr);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    text-decoration-color: var(--a-text-decor-clr);
    /*
    transition-property : background-color;
    transition: 0.2s;
    */
    }
/* link hover underline Removed from extras tables - 2026-01-05 */
table.extras a:hover {
    text-decoration: none;
}

.colors-01 a:active,
.colors-02 a:active,
.colors-03 a:active {
    color: var(--a-active-clr);
    font-style: italic;
    text-decoration: none;
    }



/* =====  F-O-O-T-E-R  =============== */

footer {
    background-color: #4A4B4B;  /* paper compliment */
    background-color: #414242;  /* colors-02 table even-numbered rows */
    background: linear-gradient(to bottom, #414242, 80%, #202121 );
    background: linear-gradient(to bottom, #414242, 80%, #1a1a1a );     /*  #1a1a1a - shade of #414242 from  https://www.color-hex.com/color/414242  */
    background: linear-gradient(to bottom, #3b3c3c, 80%, #1a1a1a );     /*  #1a1a1a - shade of #414242 from  https://www.color-hex.com/color/414242  */
    background: linear-gradient(to bottom, #333333, 80%, #000000 );     /*  #333333 colors-02 background Inside .bg-wrap - #1a1a1a - shade of #414242 from  https://www.color-hex.com/color/414242  */
    background: linear-gradient(to bottom, #4a413b, 90%, #000000 );     /*  #4a413b is a Darker Shade of #eae7e5  https://coolors.co/eae7e5 */
    background: linear-gradient(to bottom, #25201e, 90%, #000000 );     /*  #25201e is a Darker Shade of #eae7e5  https://coolors.co/eae7e5 */
    background: linear-gradient(to bottom, #37312c, 90%, #000000 );     /*  #37312c is a Darker Shade of #eae7e5  https://coolors.co/eae7e5 */
    background: linear-gradient(to bottom, #414242, 90%, #000000 );     /*  #414242 colors-02 Table [even] row numbers background  */
    background: linear-gradient(to bottom, #9b9693, 30%, #37312c );     /* #37312c is a darker shade of #eae7e5  https://coolors.co/eae7e5 */
    background: linear-gradient(to bottom, #96918e, 20%, #5C514A );     /* #5C514A is a darker shade of #eae7e5  https://coolors.co/eae7e5 */
    background: linear-gradient(to bottom, #96918e, 35%, #4A413B );     /* #4A413B is a darker shade of #eae7e5  https://coolors.co/eae7e5 */
    background: linear-gradient(to bottom, #96918e, 40%, #37312c );     /* #37312c is a darker shade of #eae7e5  https://coolors.co/eae7e5 */
    /* Allow [body] background Gradient to show through [footer]   2024-07-11 */
    /* background: transparent; */

    color: #27221f;             /* Ink color from #2e2a29  https://encycolorpedia.com/2e2a28 */
    color: #ffffff;
}
footer, .footer-wrapper {
    --footer-border-color: #77216f;     /* ubuntu Light aubergine   https://design.ubuntu.com/brand/colour-palette  */
    --footer-border-color: #5e2750;     /* ubuntu colors (Mid aubergine): https://design.ubuntu.com/brand/colour-palette */
    --footer-border-color: #5a2527;     /* #5a2527 - indian red --heading-bg - #5a2527 shade of #c1666b   https://coolors.co/c1666b */
    --footer-border-color: #000;        /* 2024-07-11 */
    border-color: var(--footer-border-color);
}
.copyright {
    color: #dd4814;  /* ubuntu orange: https://colorswatches.info/color/ubuntu-orange */
    color: #e46d43;  /* tint of ubuntu orange */
    color: #e77f5b;  /* tint of ubuntu orange */
    color: #e98866;  /* tint of ubuntu orange */
    color: #eb9172;  /* tint of ubuntu orange #e95420 */
    color: #ff9500;  /* #ff9500 is Firefox logo color VIVID GAMBOGE */
}
/* ADDED a link to p.copyright */
footer p.copyright a:link {
    color: #ff9500;         /* #ff9500 is Firefox logo color VIVID GAMBOGE */
    text-decoration: none;
}
footer p.copyright a:visited {
    color: #ff9500;         /* #ff9500 is Firefox logo color VIVID GAMBOGE */
}
footer p.copyright a:hover {
    color: #ff9500;
    color: #7cfc00;     /* Lawn green */
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    font-style: italic;
}
footer p.copyright a:active {
    color: #fa8072;
    text-decoration: none;
    font-style: italic;
}

footer .links-1 {  border-left-color: var(--footer-border-color); }
footer .links-2 {  border-right-color: var(--footer-border-color); }
footer div.divider { background-color: var(--footer-border-color); }


/*  -----  footer links  -----  */
footer a:link {
    color: #ddd;
    color: #eee;
    color: #ffcb00;         /* #ffcb00 is a Firefox logo color PHILIPPINE YELLOW   2024-07-10 */
    /* color: #ff9500; */
}
footer a:visited {
    color: #ddd;
    color: #eee;
    color: #ffcb00;         /* #ffcb00 is a Firefox logo color PHILIPPINE YELLOW   2024-07-10 */
    /* color: #ff9500; */
}
footer a:hover {
    color: #fff;
    text-decoration-color: #fff;
    /* text-decoration-thickness: 1px; */
    /* text-underline-offset: 3px; */
}
footer a:active { color: #ffff33; text-decoration: none; font-style: italic; }

/* =====  end footer  ========== */