<!DOCTYPE html>
<html lang="en">
<head>
<title>hs_promoshop_edits_highlightjs</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<!-- notes
1
thanks to: https://highlightjs.org/ .. https://cdnjs.com/libraries/highlight.js .. https://highlightjs.org/usage/ discusses using white-space: pre; for wrapping text, defined here: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space .. turns out pre-line is BEST and only works in the pre or code tags
2
use < and > to replace div brackets < > to make code appear without being read .. apparently the opening tag replacement is all that's needed but not sure how compliant that is
thanks to: https://stackoverflow.com/questions/5068951/what-do-lt-and-gt-stand-for
3
use /* in beginning and */ at end to make all text and code greyscale, otherwise css will bring color to text and code
4
tutorial for troubleshooting (find more)
https://highlightjs.readthedocs.io/en/latest/index.html
https://github.com/highlightjs/highlight.js#getting-started
https://nono.ma/code-highlighting-highlight-js
are min requirements of script loaded?
are all languages loaded?
is the code being isolated properly?
5
favs
androidstudio.min.css
nord.min.css
lioshi-min.css
github-dark-dimmed-min.css
6
needed definitions of whitespace, pre and code
whitespace
https://developer.mozilla.org/en-US/docs/Glossary/Whitespace
"Whitespace refers to characters which are used to provide horizontal or vertical space between other characters. Whitespace is often used to separate tokens in HTML, CSS, JavaScript, and other computer languages.""
pre
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre
"The <pre> HTML element represents preformatted text which is to be presented exactly as written in the HTML file. The text is typically rendered using a non-proportional, or monospaced, font. Whitespace inside this element is displayed as written."
code
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/code
"The <code> HTML element displays its contents styled in a fashion intended to indicate that the text is a short fragment of computer code. By default, the content text is displayed using the user agent's default monospace font.""
7
addressing line breaks and invisible breaks caused by <code> tag (<pre> DOES NOT cause breaks) >
pre and code tags causing invisible space
https://duckduckgo.com/?t=ffab&q=pre+and+code+tags+causing+invisible+space&ia=web
he mentions it in the beginning in the orange 'hey' ( ***** READ ME ***** )
https://css-tricks.com/considerations-styling-pre-tag/
8
can a pseudo element be used to create vertical space?
https://duckduckgo.com/?t=ffab&q=can+a+pseudo+element+be+used+to+create+vertical+space%3F&ia=web
https://stackoverflow.com/questions/69346376/how-create-a-specific-space-between-an-element-and-it-pseudo-element-before
pseudo element symbol for line break or space + placing text
https://duckduckgo.com/?t=ffab&q=pseudo+element+symbol+for+line+break+or+space&ia=web
https://css-tricks.com/almanac/selectors/a/after-and-before/
https://css-tricks.com/injecting-line-break/
https://codepen.io/chriscoyier/pen/LNamvy
** https://css-tricks.com/a-complete-guide-to-data-attributes/ (for data attributes you can make up your own code AFTER 'data-')
example 1 has cool pseudo element character that creates line break >
content: "\A";
more ref here >
https://duckduckgo.com/?t=ffab&q=content%3A+%22%5CA%22%3B&ia=web
https://stackoverflow.com/questions/34060665/css-content-character-a-takes-more-space-than-br-tag
https://stackoverflow.com/questions/10933837/line-break-like-br-using-only-css
FOUND IT >
example 7
https://developer.mozilla.org/en-US/docs/Web/CSS/attr
9
color palette >
body, border, button (background): #242629
title (background): #2e2e2f
content (background:) #303030
button, pseudo element notes (text): #5c5b5b
title, content (text): #8f8f8f
(in lioshi.css)
head css values: #de935f (orange)
head css properties: #f0c674 (yellow)
html tags: #c66 (red)
inline css classes: #b5bd68 (green)
head css !important: #b3c7d8 (blue)
10
next > find and replace js for code so this page is close to a cms
javascript for find and replace when DOM is loading
https://duckduckgo.com/?q=javascript+for+find+and+replace+when+DOM+is+loading&t=ffab&ia=web
https://stackoverflow.com/questions/56597286/find-and-replace-text-in-whole-dom
https://stackoverflow.com/questions/7275650/javascript-replace-command-replace-page-text/7275856#7275856
"The best way to go through every node in a DOM and replace text in it is to use the document.createTreeWalker method to create a TreeWalker object. This is a practice that is used in a number of Chrome extensions!""
-->
<style>
/* when theming is DISABLED use body colors and spacings */
body {
/* height: 100% !important; */
/* don't use, causes horizontal scroll */
/* width: 100% !important; */
background: #242629;
font-size: 1em;
font-family: 'Lato', sans-serif !important; /* added */
font-weight: 600; /* added */
color: #c5c8c6 !important; /* lioshi .hljs theme color #c5c8c6 .. dev color #808080 */
/* word-wrap: break-word; */
/* white-space: pre-line !important; */
padding: 0px; /* border more reliable than padding for all viewports */
margin: 0px;
border: 15px solid #242629;
border-radius: 0px
}
/* smooth scroll .. thanks to: https://stackoverflow.com/questions/62098093/scroll-behaviour-smooth-not-working-at-all */
html, body {
scroll-behavior: smooth !important;
/* box-sizing: border-box */ /* for wrapping pseudo element text below in .ftext::after below */
}
/* flex based sticky footer .. thanks to: https://codepen.io/montein56/pen/RwLJZxq */
body {
display: flex;
flex-direction: column
}
.main {
flex: 1 0 auto;
}
.dnfooter {
display: block;
height: 80vh;
width: 100%;
/* background: #191b1c; */
flex-shrink: 0;
/* https://pionezero.com/assets/images/pionezero/wavysvgbg_blastclouds_med.jpg */
background: url('https://pionezero.com/assets/images/pionezero/wavysvgbg_blastclouds_med.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: 55% 0%;
/* grayscale thanks to: https://stackoverflow.com/questions/16340159/greyscale-background-css-images */
-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
filter: grayscale(100%);
opacity: 0.09 /* was 0.09 */
}
/* configuring text inside footer */
.dnfooter::after {
display: block !important;
content: ''; /* text here */
/* content: attr(data-text); */ /* text in div tag */
white-space: pre-wrap; /* pre allows for spacebar space */
word-wrap: break-word; /* break-word breaks long strings */
margin: 0px 0px 20px 0px;
position: absolute;
bottom: 0px;
color: #c5c8c6;
font-size: 2em;
text-align: center;
/* how to responsively center pseudo element text, thanks to: https://stackoverflow.com/questions/40791217/how-to-center-text-inside-before-pseudo-element */
left: 50%;
transform: translate(-50%, -25px);
/* max-width: 100% !important */
}
@media (max-width: 500px) {
.dnfooter::after {
font-size: 1.1em;
}
}
/* configuring text OUTSIDE footer */
.ftext::after {
display: block !important;
/* content: 'pionezero labs'; */ /* text here */
content: attr(data-text); /* text in div tag */
/* background: transparent; */
white-space: pre-wrap; /* pre allows for spacebar space */
word-wrap: break-word; /* break-word breaks long strings */
margin: -80px 0px 20px 0px;
position: relative;
bottom: 0px;
color: #c5c8c6;
font-size: 2em;
text-align: center;
/* how to responsively center pseudo element text, thanks to: https://stackoverflow.com/questions/40791217/how-to-center-text-inside-before-pseudo-element */
left: 50%;
transform: translate(-50%, -25px);
/* max-width: 100% !important */
opacity: 0.055;
/* box-sizing: inherit */ /* for wrapping text in content like long string words .. set in html above also .. thanks to: https://stackoverflow.com/questions/42724888/css-make-text-wrap-when-before-pseudo-element-is-too-big and https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing */
cursor: pointer
}
@media (max-width: 500px) {
.ftext::after {
font-size: 1.1em;
margin: -40px 0px 20px 0px;
opacity: 0.135
}
}
.ftext {
text-decoration: none !important
}
/* turning div into link thanks to: https://stackoverflow.com/questions/8160494/how-to-make-a-whole-div-clickable-in-html-and-css-without-javascript */
.star:before {
font-family: 'Font Awesome 6 Pro';
content: "\f005";
/* content: "★"; */ /* original */
display: block;
font-size: 20px;
color: #fff;
position: absolute;
left: 30%;
transform: translate(-50%, 25px);
}
.star2:before {
font-family: 'Font Awesome 6 Pro';
content: "\f005";
display: block;
font-size: 12px;
color: #fff;
position: absolute;
left: 15%;
transform: translate(-50%, 125px);
}
.star3:before {
font-family: 'Font Awesome 6 Pro';
content: "\f005";
display: block;
font-size: 12px;
color: #fff;
position: absolute;
left: 20%;
transform: translate(-50%, 325px);
}
.star4:before {
font-family: 'Font Awesome 6 Pro';
content: "\f005";
display: block;
font-size: 20px;
color: #fff;
position: absolute;
left: 80%;
transform: translate(-50%, 200px);
}
.star5:before {
font-family: 'Font Awesome 6 Pro';
content: "\f005";
display: block;
font-size: 10px;
color: #fff;
position: absolute;
left: 90%;
transform: translate(-50%, 100px);
}
.star6:before {
font-family: 'Font Awesome 6 Pro';
content: "\f005";
display: block;
font-size: 10px;
color: #fff;
position: absolute;
left: 93%;
transform: translate(-50%, 130px);
}
.star7:before {
font-family: 'Font Awesome 6 Pro';
content: "\f005";
display: block;
font-size: 10px;
color: #fff;
position: absolute;
left: 87%;
transform: translate(-50%, 260px);
}
.star8:before {
font-family: 'Font Awesome 6 Pro';
content: "\f005";
display: block;
font-size: 10px;
color: #fff;
position: absolute;
left: 45%;
transform: translate(-50%, 70px);
}
.star9:before {
font-family: 'Font Awesome 6 Pro';
content: "\f005";
display: block;
font-size: 10px;
color: #fff;
position: absolute;
left: 24%;
transform: translate(-50%, 380px);
}
.star10:before {
font-family: 'Font Awesome 6 Pro';
content: "\f005";
display: block;
font-size: 10px;
color: #fff;
position: absolute;
left: 75%;
transform: translate(-50%, 30px);
}
.comet:before {
font-family: 'Font Awesome 6 Pro';
content: "\e003";
display: block;
font-size: 40px;
color: #fff;
position: absolute;
left: 35%;
transform: translate(-50%, 150px);
opacity: 0.5
}
/* font awesome ufo .. <i class="fa-solid fa-ufo"></i> .. e047
https://fontawesome.com/docs/web/setup/upgrade/pseudo-elements
https://stackoverflow.com/questions/71201741/how-to-use-font-awesome-6-icons
final solution thanks to: https://stackoverflow.com/questions/57653377/how-to-add-fontawesome-fonts-in-css-pseudo-elements
*/
.starship::before {
font-family: 'Font Awesome 6 Pro'; /* pro uses js file */
content: "\e047";
display: inline-block; /* was inline-block */
text-rendering: auto;
-webkit-font-smoothing: antialiased;
font-size: 50px;
color: #fff;
position: absolute;
left: 25%;
transform: translate(-50%, 500px) rotate(-20deg);
opacity: 0.5
}
/* to top icon */
.upere {
display: block;
position: relative;
width: 10% !important;
height: 10% !important
}
.upere::before {
/* for non-kit */
font-family: 'Font Awesome 6 Pro'; /* pro uses js file */
/* for kit */
/* font-family: 'Font Awesome Kit'; */
content: "\e168"; /* circled arrow f0aa .. dolphin e168 e168 */
display: inline-block; /* was inline-block */
text-rendering: auto;
-webkit-font-smoothing: antialiased;
font-size: 30px;
color: #fff;
position: absolute; /* was absolute but making relative for absolute value below in .upere a */
left: 5%;
transform: translate(-50%, 30px) rotate(0deg);
opacity: 1;
cursor: pointer;
width: 10% !important;
height: 10% !important
}
/* turning div to a link */
.upere a {
display: block;
position: absolute;
width: 35%;
height: 60%
}
@media (max-width: 500px) {
.upere a {
display: block;
position: absolute;
width: 100%;
height: 100%
}
}
/* code icon */
.facode::before {
/* for non-kit */
font-family: 'Font Awesome 6 Pro'; /* pro uses js file */
/* for kit */
/* font-family: 'Font Awesome Kit'; */
content: "\f121"; /* code icon */
display: inline-block; /* was inline-block */
text-rendering: auto;
-webkit-font-smoothing: antialiased;
font-size: 140px;
color: #fff;
position: absolute;
left: 30%;
transform: translate(-50%, -130px) rotate(0deg);
opacity: 0.04;
/* cursor: pointer; */
max-width: 10px; /* email and phone number hover was disabled bcs there must have been overlap from .facode nearby */
max-height: 10px
}
/* pre-line best one, but break-word essential for long strings of text wrapping in tablet, mobile */
code {
white-space: pre-line !important;
word-wrap: break-word !important;
margin: -30px 0px 0px 0px; /* attempt to fix breaks causing lots of empty vertical space, otherwise #7 abovve in notes */
font-family: 'Lato', sans-serif !important; /* added */
color: #8f8f8f !important /* added .. override of lioshi.css .hljs #c5c8c6, line 11 */
}
/* fixes top and bottom black space where body background not filling .. NOTE > thw white-space property in code is DISABLING spacebar spaces in pre */
pre {
margin: 0px !important;
}
/* fixes horizontal scroll in tablet, mobile but cuts text off */
pre code.hljs {
/* overflow-x: hidden !important */
}
/* link anchor stuff from original code
<a target="_self" href="#target">description</a>
<div id="target" class="anch"></div>
*/
.ancht {
color: #808080 !important;
text-decoration: none
}
.ancht a:link {
color: #808080 !important;
text-decoration: none
}
.ancht a:hover {
color: #adadad !important;
text-decoration: none
}
.ancht a:active {
color: #adadad !important;
text-decoration: none
}
.ancht a:visited {
color: #808080 !important;
text-decoration: none
}
/* @media (min-width: 1301px) {
.ancht {
margin-top: -2% !important
}
}
@media (min-width: 961px) and (max-width: 1300px) {
.ancht {
margin-top: -5% !important
}
}
@media (min-width: 601px) and (max-width: 960px) {
.ancht {
margin-top: -7% !important
}
}
@media (min-width: 200px) and (max-width: 600px) {
.ancht {
margin-top: -10% !important
}
} */
/* NORMAL TEXT NOTES BLOCK .. from .txtpl below */
.normal {
display: block;
/* content: 'color picker > 4b4b4b \a css > 555 \a ok'; */ /* CAN PUT ANY TEXT IN HERE AND POSITION ANYWHERE */
white-space: normal; /* was pre-wrap */
font-size: 1em;
font-family: 'Lato', sans-serif !important;
font-weight: 600;
color: #8f8f8f !important;
padding: 20px 0px 40px 14px !important;
margin: 0px 0px 0px 0px; /* WORKS GREAT TO CREATE SPACE WITHOUT TEXT .. too much will show dark bg so use padding above for unlimited spaces */
background: #303030; /* was #303030 but now coordinating flat colors with menu text color */
/* sets dimensions .. after this a negative margin crushes it, WITH NO CONTENT */
height: 100% !important;
max-height: 100%;
/* width: 100vw !important;
max-width: 100vw !important */ /* disabliing this auto adjusts to right */
}
/* menu tweaks */
/* full height menu .. check details[open] + div.content, .wcon also */
.menutwk {
display: block !important;
height: 100% !important;
width: 100% !important
}
/* reduced font size for long string menu titles */
@media (max-width: 500px) {
.menutwk {
font-size: 0.84em;
padding: 20px 10px 0px 10px !important
}
}
/* rad pseudo element use below, for >
FILE HEADINGS (.file)
TEXT/CHARACTER PLACEMENT + SPACE CREATION (via content in CSS, .txtpl)
TEXT/CHARACTER PLACEMENT + SPACE CREATION (via data attribute in HTML, .pseubr_a and .pseubr_b)
*/
/* FILE HEADINGS */
.file {
background: #2e2e2f; /* was #393a3d then #2e2e2f then #242629 */
max-width: 100vw;
height: 60px;
display: flex;
font-size: 1em;
font-family: 'Lato', sans-serif !important;
font-weight: 600;
color: #8f8f8f !important; /* was #c5c8c6 */
/* opacity: 0.4; */
align-items: center;
padding-left: 15px;
position: relative;
z-index: 2
}
/* pseudo element placement of characters around file name .. thanks to: https://stackoverflow.com/questions/3032856/is-it-possible-to-set-the-stacking-order-of-pseudo-elements-below-their-parent-e */
.file::before {
content: '';
white-space: pre; /* pre allows for spacebar space */
word-wrap: break-word; /* break-word breaks long strings */
margin: -34px 0px 0px 0px;
position: absolute
}
.file::after {
content: '';
white-space: pre;
word-wrap: break-word;
margin: 29px 0px 0px 0px;
position: absolute
}
/* see .file_sp::before further below for rendering pseudo element based space rendering (micro line breaks, horizontal space) */
/* TEXT/CHARACTER PLACEMENT and/or SPACE CREATION (via content in head CSS) .. pseudo element placement of any text after an element (taken from .pseubr_a below) .. use double colons, ref: https://stackoverflow.com/questions/16704049/what-does-the-double-colon-mean-in-css .. great solution to LINE BREAKS IN THE CONTENT thanks to: https://www.digitalocean.com/community/tutorials/css-line-break-content-property */
.txtpl {
display: block;
/* content: 'color picker > 4b4b4b \a css > 555 \a ok'; */ /* CAN PUT ANY TEXT IN HERE AND POSITION ANYWHERE */
white-space: normal; /* was pre-wrap */
font-size: 1em;
font-family: 'Lato', sans-serif !important;
font-weight: 600;
color: #c5c8c6 !important;
padding: 20px 0px 0px 20px !important;
margin: 0px 0px 0px 0px; /* WORKS GREAT TO CREATE SPACE WITHOUT TEXT .. too much will show dark bg so use padding above for unlimited spaces */
background: #303030;
/* sets dimensions .. after this a negative margin crushes it, WITH NO CONTENT */
height: 100% !important;
max-height: 100%;
/* width: 100vw !important;
max-width: 100vw !important */ /* disabliing this auto adjusts to right */
}
.txtpl::after {
display: block; /* inline-block creates more unwanted vertical space .. flex allows align-items and justify-content */
/* content: ''; */
content: 'this is optional text (written inside head CSS) \a - code can go here \a - or any text you want \a - or any character'; /* CAN PUT ANY TEXT IN HERE AND POSITION ANYWHERE */
white-space: pre-wrap;
font-size: 1em;
font-family: 'Lato', sans-serif !important;
font-weight: 600;
color: #5c5b5b !important;
padding: 0px 0px 60px 0px !important;
margin: -30px 0px 0px -4px; /* WORKS GREAT TO CREATE SPACE WITHOUT TEXT .. too much will show dark bg so use padding above for unlimited spaces */
/* align-items: center;
justify-content: center; */
background: #303030;
/* sets dimensions .. after this a negative margin crushes it, WITH NO CONTENT */
height: 7vh !important;
max-height: 7vh;
/* width: 100vw !important;
max-width: 100vw !important */
}
/* TEXT/CHARACTER PLACEMENT + PSEUDO ELEMENT BASED SPACE RENDERING (micro line breaks, horizontal space) via data attribute in HTML(data-text="") .. WHEW ....... use data-text attribute to set the element for spacing, then remove the text, where space can still be manipulated .. have to use margin as padding does not allow negative values, but margin creates different background so use padding to retain background .. CAN ALSO USE FOR INSERTING TEXT USING DATA AATRIBUTES (data in HTML), ref: https://css-tricks.com/a-complete-guide-to-data-attributes/ */
/* use to create space after an element via data attribute in HTML .. use padding or margin */
.pseubr_a::after {
display: block; /* inline-block creates more unwanted vertical space */
content: attr(data-text);
font-size: 1em;
font-family: 'Lato', sans-serif !important;
font-weight: 600;
color: #c5c8c6 !important;
padding: 0px 0px 20px 0px !important;
margin: 0px 0px 0px 0px; /* WORKS GREAT TO CREATE SPACE WITHOUT TEXT */
background: #303030 !important;
/* sets dimensions .. after this a negative margin crushes it, WITH NO CONTENT .. set all at 100% */
height: 100% !important;
max-height: 100%;
width: 100% !important;
max-width: 100% !important
}
/* use to render space before an element via data attribute in HTML .. use padding or margin .. can be used to correct invisible spaces created by closing and opening code and pre tags */
.pseubr_b::before {
display: block; /* inline-block creates more unwanted vertical space */
content: attr(data-text);
font-size: 1em;
font-family: 'Lato', sans-serif !important;
font-weight: 600;
color: #c5c8c6 !important;
padding: 0px 0px 0px 0px !important;
margin: -37px 0px 0px 0px; /* WORKS GREAT TO CREATE SPACE WITHOUT TEXT */
background: #303030 !important;
/* sets dimensions .. after this a negative margin crushes it, WITH NO CONTENT .. set all at 100% */
height: 100% !important;
max-height: 100%;
width: 100% !important;
max-width: 100% !important;
}
/* use to place text via data attribute in HTML */
.divtxt::after {
display: block; /* inline-block creates more unwanted vertical space */
content: attr(data-text);
font-size: 1em;
font-family: 'Lato', sans-serif !important;
font-weight: 600;
color: #5c5b5b !important;
padding: 0px 16px 30px 16px !important;
margin: -20px 0px 0px 0px; /* WORKS GREAT TO CREATE SPACE WITHOUT TEXT */
background: #303030 !important;
/* sets dimensions .. after this a negative margin crushes it, WITH NO CONTENT .. set all at 100% */
height: 100% !important;
max-height: 100%;
/* width: 100% !important;
max-width: 100% !important */ /* disabled as without it the WIDTH GOES TO AUTO */
}
/* just to change the color of main text */
.divtxt2::after {
display: block; /* inline-block creates more unwanted vertical space */
content: attr(data-text);
font-size: 1em;
font-family: 'Lato', sans-serif !important;
font-weight: 600;
color: #808080 !important;
padding: 0px 16px 30px 16px !important;
margin: -20px 0px 0px 0px; /* WORKS GREAT TO CREATE SPACE WITHOUT TEXT */
background: #303030 !important;
/* sets dimensions .. after this a negative margin crushes it, WITH NO CONTENT .. set all at 100% */
height: 100% !important;
max-height: 100%;
/* width: 100% !important;
max-width: 100% !important */ /* disabled as without it the WIDTH GOES TO AUTO */
}
/* iphone se viewprt space above file using data attr based spaces */
@media (max-width: 500px) {
.file_sp::before {
display: block; /* inline-block creates more unwanted vertical space */
content: attr(data-text);
padding: 50px 0px 0px 0px !important;
margin: 0px 0px 0px 0px; /* WORKS GREAT TO CREATE SPACE WITHOUT TEXT */
background: #303030 !important
}
}
/* / / / / / / ACCORDION, from no_js_accordion(3, summary-based).html .. orignal animated triangle in no_js_accordion(2) and no_js_accordion(1)
thanks to:
https://dev.to/jgustavoas/how-to-fully-animate-the-details-html-element-with-only-css-no-javascript-2n88
https://codepen.io/jgustavoas/pen/zYLNKbN
https://codepen.io/jgustavoas/pen/rNQyxWa?editors=1100 (updated)
https://dev.to/jgustavoas/solved-how-to-fully-animate-the-details-html-element-with-only-css-and-no-javascript-55ek (updated)
span role=term >
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/term_role
https://stackoverflow.com/questions/12892726/how-to-style-css-role
aria-details >
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-details
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes (for assistive tech only)
'button' tricks >
https://css-tricks.com/having-a-little-fun-with-custom-focus-styles/
https://codepen.io/larimaza/pen/qBByEzX (USED BELOW FOR DETAILS)
color palette >
https://colorkit.co/color-palette-generator/403f3a-66625e-e6dccb-808080/
*/
/* setting variables for details animation */
html {
--lgt-khaki: #4a4846;
--med-khaki: #292827;
--drk-khaki: #1f1e1d;
--grnntfnd: #454001
}
/* details and summmary used for disclosure widget > https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details */
/* widget container, ADDED */
.wcon {
display: block;
background: #303030;
min-height: 7vh !important;
max-width: 100% !important;
padding: 20px 20px 0px 20px;
word-wrap: break-word !important;
white-space: normal !important
}
/* OUTER (technically not a 'button' but button dimensions here) */
details {
max-width: 80px; /* was 500px */
min-height: 2.5rem; /* added .. match with span (now summary) height below */
border-radius: 6px; /* added .. would also work in span (now summary) */
/* overflow: hidden; */ /* Keep this line to prevent an odd blue outline around the element in Safari. */
transition: all 0.3s ease; /* added */
background: #242629; /* added */
color: #5c5b5b; /* menu font color, was #e6dccb w/opacity 0.4 .. added from span (now summary) below in order for variables to work */
/* opacity: 0.4 */
}
details:hover {
color: #5c5b5b;
background-color: var(--drk-khaki);
border-color: var(--drk-khaki)
}
details:active {
color: #5c5b5b;
background-color: var(--drk-khaki);
border-color: var(--drk-khaki)
}
details:focus {
outline: none;
box-shadow: 0 0 0 5px rgba(21, 156, 228, 0.4) /* hex #159ce4 */
}
/* INNER ('button' text .. note: inner and innermost combined when span was eliminated and summary is used in it's place to avoid conflicts with span and div in hs_promoshop_edits(CODEPEN).html */
summary::-webkit-details-marker {
display: none
}
/* summary (was span) can be used as an html element that uses transition */
summary {
position: relative;
display: flex;
align-items: center;
padding-left: 1.2rem;
/* background: #242629; */
/* color: #fff; */
height: 2.4rem; /* was 4rem */
font-family: 'Lato', sans-serif; /* added */
font-weight: 700; /* added */
cursor: pointer !important /* added .. includes pointer in mobile viewport */
}
/* change cursor from text input to pointer */
summary:hover {
cursor: pointer !important
}
/* triangle (disabled) closing speed .. */
summary::before {
content: ''; /* was ► used a animated arrow so keep this .. can use 'dev notes' here too if all 'bottons', otherwise place text btw summary tags */
font-size: 1rem;
display: flex;
align-items: center;
margin-right: 0rem;
transition: rotate 200ms 400ms ease-out;
/* transition-duration, transition-delay .. https://developer.mozilla.org/en-US/docs/Web/CSS/transition */
/* display: none; */ /* added */
cursor: pointer !important /* added .. includes pointer in mobile viewport */
}
/* content closing speed */
div.content {
box-sizing: border-box;
min-width: 100%;
/* max-width: 500px; */
max-height: 0;
overflow: hidden;
padding: 0px 5px 0px 5px; /* zero'd out for line 471 .. then had to add back to match details[open] + div.content below */
border: 0px solid transparent;
transition: max-height 400ms ease-out, border 0ms 400ms linear;
/* background: #242629 */ /* added */
}
/* content opening speed */
details[open] + div.content {
max-height: 700vh; /* Set a max-height value enough to show all the content .. was 800px .. had to increase from 100vh to 100% for class .menutwk to push new content, but 100% was disabling smooth transition, so settled on 180vh which retains smooth transition and has full height for desktop and most tablet, but have to use 240vh for mobile */
border-color: #888;
transition: max-height 600ms ease-out, border 0ms linear;
border: none; /* added .. clunky transition otherwise */
min-width: 100% !important; /* added for long string text .. 100vw too long and has overflow so use min-width: 100% .. however content in .content changes width and jerks when menu is closing so keep disabled UNLESS min-width: 100% is added to div.content */
padding: 0px 5px 0px 5px /* needed here as extra padding pushes content into wrap */
}
/* triangle (disabled) opening speed */
details[open] span::before {
rotate: 90deg;
transition: rotate 200ms ease-out
}
/* color palette version of widget */
/* widget container modified for hidden header color palette, ADDED */
.colorp {
display: block;
background: #303030;
max-height: 40px;
padding: 0px 0px 0px 16px
}
.colorp_sum {
min-width: 80px !important;
position: relative; /* was absolute .. when absolute 'color palette' text can exceed 80px width of details, otherwise when relative cannot, but disabling overflow: hidden in details allows longer length .. relative will allow content pushing */
top: 0px;
left: 0px
}
.colorp_sum::before {
display: block !important;
content: 'color palette'; /* details is a button and determines width allowance for text .. max now is 80px .. so better to have text in html below .. OR can disable overflow: hidden in details */
min-width: 80px !important;
position: absolute !important; /* was absolute */
top: 0px;
left: 0px
}
.colorp_con {
display: flex;
justify-content: flex-start;
min-width: 100vw;
position: absolute;
top: 0px;
left: 0px /* note padding in lines 438 */
}
.colorp_div {
min-width: 100%;
height: 22px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: start;
border: 5px solid #242629;
border-radius: 0px
}
.colorp_hx {
width: 9.09%; /* (100vw/11=9.09%) */
height: 22px
}
/* superscript .. position adjust thanks to: https://css-tricks.com/snippets/css/prevent-superscripts-and-subscripts-from-affecting-line-height/ */
sup {
color: #f0c674;
vertical-align: baseline;
position: relative;
top: 0em;
margin-left: 0.5em
}
/* compensation vertical space */
/* .supt {
line-height: 25px !important
} */
/* marking templates done */
.done {
display: inline-block;
background-color: var(--drk-khaki);
height: 14px;
/* vertical-align: text-bottom; */
/* line-height: 40px !important; */
/* width: 100% */
padding: 2px 2px 6px 2px;
margin: 10px 0px 0px 0px !important;
text-align: center;
vertical-align: middle !important;
text-decoration: none;
border-radius: 0px 0px 0px 0px;
word-break: break-all /* keeps long strings in mobile justified left */
}
/* to keep spacing */
.notdone {
display: inline-block;
background-color: transparent;
height: 14px; /* need it taller for mobile, 34px .. that disrupts background height so use margin: -4px 0px 20px 0px */
/* vertical-align: text-bottom; */
/* line-height: 40px !important; */
/* width: 100% */
padding: 2px 2px 6px 2px;
margin: 10px 0px 0px 0px !important;
text-align: center;
vertical-align: middle !important;
text-decoration: none;
border-radius: 0px 0px 0px 0px;
word-break: break-all /* keeps long strings in mobile justified left */
}
.noaccess {
display: inline-block;
background-color: var(--grnntfnd);
height: 14px;
/* vertical-align: text-bottom; */
/* line-height: 40px !important; */
/* width: 100% */
padding: 2px 2px 6px 2px;
margin: 10px 0px 0px 0px !important;
text-align: center;
vertical-align: middle !important;
text-decoration: none;
border-radius: 0px 0px 0px 0px;
word-break: break-all /* keeps long strings in mobile justified left */
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/lioshi.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap" rel="stylesheet">
<!-- font awesome -->
<!-- <link rel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"> -->
<!-- non-kit -->
<script src="https://kit.fontawesome.com/a24879a822.js" crossorigin="anonymous"></script>
<!-- kit -->
<!-- <script src="https://kit.fontawesome.com/3c4f5c0732.js" crossorigin="anonymous"></script> -->
</head>
<body>
<main>
<!-- ======================== DEV NOTES, TIME, COLOR PALETTE, MENU ======================== -->
<!-- =========== TITLE (.file in head css allows pseudo element placement of character around title) -->
<div class="file_sp" style="display:none">
<div class="file">
ZZZ
</div>
</div>
<!-- / TITLE -->
<!-- =========== BRIEF -->
<!-- normal text -->
<div class="normal" id="upere">
dev notes<br />
miva > henry schein promoshop<br />
updated: thursday december 28 2023, 22:27<br /><br />
<span class="ancht"><a href="grant.ext@wildmarketinggroup.com">grant.ext@wildmarketinggroup.com</a></span><br />
<span class="ancht"><a href="tel:+16082869463">608-286-9463</a></span>
</div>
<div class="facode"></div>
<!-- option for html -->
<pre><code class="language-html" data-text="" style="display:none">
</code></pre>
<!-- option for css -->
<pre><code class="language-css" data-text="" style="display:none">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt2" data-text="(1) does not include log of recent text-only edits, changing 'henry schein..' to 'wild marketing group'"></div>
<div class="divtxt2" data-text="(2) this log is a front end cms for easy cut and paste of dev notes into a readable log for documenting template edits, including found errors, coding solutions brief (renders code in color), location breadcrumbs and coding solutions process, coding credits and coding notes"></div>
<div class="divtxt2" data-text="(3) in menu SUPERSCRIPT TAG 'ux' denotes a likely user experience will encounter this template (and not the rest) .. EDITING THESE FIRST WOULD CONSTITUTE THE 'MINIMUM VIABLE PRODUCT', about 18 templates plus the global header"></div>
<div class="divtxt2" data-text="(4) body id=js-SFNT etc is confimration that that was the page edited (and not a redirect page by mistake, common occurance in miva)"></div>
<div class="txtpl" style="display:none"></div>
<!-- / BRIEF -->
<!-- ======================== COLOR PALETTE ======================== -->
<!-- =========== BUTTON TOGGLE -->
<div class="colorp">
<!-- button -->
<details style="background:transparent !important">
<summary role="term" aria-details="pure-css" class="colorp_sum"></summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content colorp_con">
<div class="colorp_div">
<div class="colorp_hx" style="background:#242629"></div>
<div class="colorp_hx" style="background:#2e2e2f"></div>
<div class="colorp_hx" style="background:#303030"></div>
<div class="colorp_hx" style="background:#5c5b5b"></div>
<div class="colorp_hx" style="background:#8f8f8f"></div>
<div class="colorp_hx" style="background:#de935f"></div>
<div class="colorp_hx" style="background:#f0c674"></div>
<div class="colorp_hx" style="background:#c66"></div>
<div class="colorp_hx" style="background:#b5bd68"></div>
<div class="colorp_hx" style="background:#454001"></div>
<div class="colorp_hx" style="background:#b3c7d8"></div>
</div>
</div>
<!-- / content -->
</div>
<!-- / BUTTON TOGGLE -->
<!-- =========== MENU (button toggle) -->
<div class="wcon">
<!-- button -->
<details>
<summary role="term" aria-details="pure-css">menu</summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content">
<!-- normal text -->
<div class="normal menutwk">
<div class="divtxt" style="margin:16px 0px 0px -16px" data-text="DARK: done --- BLANK: not done --- GOLD: no access --- UX: most used user experience (storefront to checkout)"></div>
<a target="_self" href="#globh" class="ancht supt done">GLOBAL HEADER</a><sup> UX</sup><br /><br />
<a target="_self" href="#abal" class="ancht supt done">ABAL</a><br />(Customer Account Balance)<br />
<a target="_self" href="#abus" class="ancht supt done">ABUS</a><br />(About Us)<br />
<a target="_self" href="#acad" class="ancht supt done">ACAD</a><br />(Customer Create)<br />
<a target="_self" href="#aced" class="ancht supt done">ACED</a><br />(Customer Edit)<br />
<a target="_self" href="#acln" class="ancht supt done">ACLN</a><sup> UX</sup><br />(Customer Account)<br />
<a target="_self" href="#acrt" class="ancht supt done">ACRT</a><br />(Customer Password Reset)<br />
<a target="_self" href="#afad" class="ancht supt done">AFAD</a><br />(Affiliate Create)<br />
<a target="_self" href="#afcl" class="ancht supt done">AFCL</a><br />(Affiliate Login)<br />
<a target="_self" href="#afed" class="ancht supt done">AFED</a><br />(Affiliate Edit)<br />
<a target="_self" href="#affr" class="ancht supt noaccess">AFFR</a><br />(Affiliate Password Reset)<br />
<a target="_self" href="#afpw" class="ancht supt done">AFPW</a><br />(Affiliate Forgot Password)<br />
<a target="_self" href="#afrt" class="ancht supt notdone">AFRT</a><br />(Affiliate Temporary Password)<br />
<a target="_self" href="#amz_ocst" class="ancht supt notdone">AMAZONPAY_OCST</a><br />(Amazon Pay - OCST)<br />
<a target="_self" href="#amz_opay" class="ancht supt notdone">AMAZONPAY_OPAY</a><br />(Amazon Pay - OPAY)<br />
<a target="_self" href="#amz_osel" class="ancht supt notdone">AMAZONPAY_OSEL</a><br />(Amazon Pay - OSEL)<br />
<a target="_self" href="#bask" class="ancht supt done">BASK</a><sup> UX</sup><br />(Basket Contents)<br />
<a target="_self" href="#bske" class="ancht supt done">BSKE</a><sup> UX</sup><br />(Checkout: Basket Empty)<br />
<a target="_self" href="#cabk" class="ancht supt notdone">CABK</a><br />(Address Book)<br />
<a target="_self" href="#cact" class="ancht supt notdone">CACT</a><br />(Create Customer Account)<br />
<a target="_self" href="#cada" class="ancht supt notdone">CADA</a><br />(Add New Address)<br />
<a target="_self" href="#cade" class="ancht supt notdone">CADE</a><br />(Edit Address)<br />
<a target="_self" href="#ceml" class="ancht supt notdone">CEML</a><br />(Change Email Address)<br />
<a target="_self" href="#cpca" class="ancht supt notdone">CPCA</a><br />(Add New Payment Method)<br />
<a target="_self" href="#cpcd" class="ancht supt notdone">CPCD</a><br />(Payment)<br />
<a target="_self" href="#cpce" class="ancht supt notdone">CPCE</a><br />(Edit Payment Method)<br />
<a target="_self" href="#cpro" class="ancht supt notdone">CPRO</a><br />(Custom Profile)<br />
<a target="_self" href="#cpwd" class="ancht supt notdone">CPWD</a><br />(Change Password)<br />
<a target="_self" href="#csbe" class="ancht supt notdone">CSBE</a><br />(Edit Subscription)<br />
<a target="_self" href="#cstr" class="ancht supt notdone">CSTR</a><br />(Password Reset)<br />
<a target="_self" href="#csub" class="ancht supt notdone">CSUB</a><br />(Subscription)<br />
<a target="_self" href="#ctfm" class="ancht supt notdone">CTFM</a><br />(Contact Form)<br />
<a target="_self" href="#ctgy" class="ancht supt done">CTGY</a><sup> UX</sup><br />(Category Display)<br />
<a target="_self" href="#ctlg" class="ancht supt notdone">CTLG</a><br />(Our Catalogue)<br />
<a target="_self" href="#ctus" class="ancht supt done">CTUS</a><sup> UX</sup><br />(Contact Us)<br />
<a target="_self" href="#em_aban" class="ancht supt notdone">EMAIL_ABANDONED_BASKET</a><br />(Abandoned Basket)<br />
<a target="_self" href="#em_back" class="ancht supt notdone">EMAIL_BACKORDER_NOTICE</a><br />(Backorder Notice)<br />
<a target="_self" href="#em_cust" class="ancht supt notdone">EMAIL_CUSTOMER_CREATED</a><br />(Customer Created)<br />
<a target="_self" href="#em_digi" class="ancht supt notdone">EMAIL_DIGITALDOWNLOAD_CREATED</a><br />(Digital Download Created)<br />
<a target="_self" href="#em_gift" class="ancht supt notdone">EMAIL_GIFTCERTIFICATE_CREATED</a><br />(Gift Certificate Created)<br />
<a target="_self" href="#em_ord_cus" class="ancht supt noaccess">EMAIL_ORDERCONF_CUSTOMER</a><sup> UX</sup><br />(Order Confirmation: Customer)<br />
<a target="_self" href="#em_ord_mer" class="ancht supt noaccess">EMAIL_ORDERCONF_MERCHANT</a><sup> UX</sup><br />(Order Confirmation: Merchant)<br />
<a target="_self" href="#em_pay" class="ancht supt notdone">EMAIL_PAYMENTCARD_EXPIRING</a><br />(Payment Card Expiring)<br />
<a target="_self" href="#em_ret" class="ancht supt notdone">EMAIL_RETURN_RECEIVED</a><br />(Return Received)<br />
<a target="_self" href="#em_rma" class="ancht supt notdone">EMAIL_RMA_ISSUED</a><br />(RMA Issued)<br />
<a target="_self" href="#em_ship" class="ancht supt notdone">EMAIL_SHIPMENT_SHIPPED</a><br />(Shipment Shipped)<br />
<a target="_self" href="#em_sub_auth" class="ancht supt notdone">EMAIL_SUBSCRIPTION_AUTH_FAILURE</a><br />(Subscription Authorization Failure)<br />
<a target="_self" href="#em_sub_can" class="ancht supt notdone">EMAIL_SUBSCRIPTION_CANCELLED</a><br />(Subscription Cancelled)<br />
<a target="_self" href="#em_sub_cha" class="ancht supt notdone">EMAIL_SUBSCRIPTION_CHANGED</a><br />(Subscription Changed)<br />
<a target="_self" href="#em_sub_cre" class="ancht supt notdone">EMAIL_SUBSCRIPTION_CREATED</a><br />(Subscription Created)<br />
<a target="_self" href="#em_sub_out" class="ancht supt notdone">EMAIL_SUBSCRIPTION_OUTOFSTOCK</a><br />(Subscription Out of Stock)<br />
<a target="_self" href="#em_sub_rem" class="ancht supt notdone">EMAIL_SUBSCRIPTION_REMINDER</a><br />(Subscription Reminder)<br />
<a target="_self" href="#faq" class="ancht supt notdone">FAQS</a><br />(Frequently Asked Questions)<br />
<a target="_self" href="#fpwd" class="ancht supt notdone">FPWD</a><br />(Forgot Password)<br />
<a target="_self" href="#gftl" class="ancht supt notdone">GFTL</a><br />(Redeem Gift Certificate)<br />
<a target="_self" href="#invc" class="ancht supt noaccess">INVC</a><sup> UX</sup><br />(Confirmation)<br />
<a target="_self" href="#logn" class="ancht supt done">LOGN</a><sup> UX</sup><br />(Customer Login)<br />
<a target="_self" href="#mntn" class="ancht supt notdone">MNTN</a><br />(Maintenance Mode)<br />
<a target="_self" href="#ntfd" class="ancht supt notdone">NTFD</a><br />(Not Found)<br />
<a target="_self" href="#ocst" class="ancht supt done">OCST</a><sup> UX</sup><br />(Checkout Customer Information)<br />
<a target="_self" href="#omin" class="ancht supt notdone">OMIN</a><br />(Checkout: Minimum Purchase Required)<br />
<a target="_self" href="#opay" class="ancht supt done">OPAY</a><sup> UX</sup><br />(Checkout: Payment Information)<br />
<a target="_self" href="#oprc" class="ancht supt notdone">OPRC</a><br />(Order Already Processed)<br />
<a target="_self" href="#ord_inv" class="ancht supt notdone">ORDER_INVOICE</a><br />(Printable Invoice)<br />
<a target="_self" href="#ordh" class="ancht supt done">ORDH</a><sup> UX</sup><br />(Order History List)<br />
<a target="_self" href="#ordl" class="ancht supt done">ORDL</a><sup> UX</sup><br />(Order Custom Login)<br />
<a target="_self" href="#ords" class="ancht supt noaccess">ORDS</a><sup> UX</sup><br />(Order Status)<br />
<a target="_self" href="#orhl" class="ancht supt notdone">ORHL</a><br />(Lookup Order History)<br />
<a target="_self" href="#osel" class="ancht supt done">OSEL</a><sup> UX</sup><br />(Checkout: Shipping/Payment Selection)<br />
<a target="_self" href="#ous1" class="ancht supt notdone">OUS1</a><br />(Checkout: Upsell Product (Single))<br />
<a target="_self" href="#ousm" class="ancht supt notdone">OUSM</a><br />(Checkout: Upsell Product (Multiple))<br />
<a target="_self" href="#patr" class="ancht supt notdone">PATR</a><br />(Missing Product Attributes)<br />
<a target="_self" href="#plmt" class="ancht supt notdone">PLMT</a><br />(Product Limited Stock)<br />
<a target="_self" href="#plst" class="ancht supt notdone">PLST</a><br />(Product List)<br />
<a target="_self" href="#pout" class="ancht supt notdone">POUT</a><br />(Product Sold Out)<br />
<a target="_self" href="#pprs" class="ancht supt notdone">PPRS</a><br />(PayPal Express Checkout Return Screen)<br />
<a target="_self" href="#prod" class="ancht supt done">PROD</a><sup> UX</sup><br />(Product Display)<br />
<a target="_self" href="#prpo" class="ancht supt notdone">PRPO</a><br />(Privacy Policy)<br />
<a target="_self" href="#rgft" class="ancht supt notdone">RGFT</a><br />(Redeem Gift Certificate)<br />
<a target="_self" href="#sarp" class="ancht supt notdone">SARP</a><br />(Shipping And Return Policy)<br />
<a target="_self" href="#sert" class="ancht supt notdone">SERT</a><br />(Shipping Estimate Rates)<br />
<a target="_self" href="#sfnt" class="ancht supt done">SFNT</a><sup> UX</sup><br />(Storefront)<br />
<a target="_self" href="#shipm" class="ancht supt notdone">SHIPMENT_PICKLIST</a><br />(Shipment Picklist)<br />
<a target="_self" href="#smap" class="ancht supt notdone">SMAP</a><br />(Site Map)<br />
<a target="_self" href="#srch" class="ancht supt notdone">SRCH</a><br />(Search)<br />
<a target="_self" href="#tosu" class="ancht supt notdone">TOSU</a><br />(Terms Of Site Use)<br />
<a target="_self" href="#uatm" class="ancht supt notdone">UATM</a><br />(Upsell: Missing Product Attributes (Multiple))<br />
<a target="_self" href="#uatr" class="ancht supt notdone">UATR</a><br />(Upsell: Missing Product Attributes (Single))<br />
<a target="_self" href="#wish" class="ancht supt notdone">WISH</a><br />(Wish List)<br />
<a target="_self" href="#wlad" class="ancht supt notdone">WLAD</a><br />(Add A Wish List)<br />
<a target="_self" href="#wled" class="ancht supt notdone">WLED</a><br />(Edit Wish List)<br />
<a target="_self" href="#wlgn" class="ancht supt notdone">WLGN</a><br />(Wish List: Customer Login)<br />
<a target="_self" href="#wlst" class="ancht supt notdone">WLST</a><br />(Wish Lists)<br />
<a target="_self" href="#wpck" class="ancht supt notdone">WPCK</a><br />(Choose Wish List)<br />
</div>
<!-- html -->
<pre><code class="language-html" data-text="">
</code></pre>
<!-- css -->
<pre><code class="language-css" data-text="">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt" data-text="this is optional text (data attr based written inside HTML tag)"></div>
<div class="txtpl"></div>
</div>
<!-- / content -->
</div>
<!-- / MENU -->
<!-- ======================== GLOBAL HEADER ======================== -->
<!-- =========== TITLE (.file in head css allows pseudo element placement of character around title) -->
<div class="file_sp">
<div class="file ancht" id="globh">
GLOBAL HEADER
</div>
</div>
<!-- / TITLE -->
<!-- =========== BRIEF -->
<!-- normal text -->
<div class="normal">
</div>
<!-- option for html -->
<pre><code class="language-html pseubr_b" data-text="" style="display:non">
<body id="js-SFNT" ..>
confirmed
(page rendered when clicking preview on global header page, which has no body id)
ERROR >
1
code error
FIXED >
1
global settings > global header & footer > global header > html > line 140 > removed redundant code
<section class="class"o-layout t-expanded-block bg-gray u-color-white"">
to
<section class="o-layout t-expanded-block bg-gray u-color-white">
</code></pre>
<!-- option for css -->
<pre><code class="language-css" data-text="" style="display:none">
</code></pre>
<!-- / BRIEF -->
<!-- =========== NOTES (button toggle) -->
<div class="wcon">
<!-- button -->
<details>
<summary role="term" aria-details="pure-css">notes</summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content">
<!-- html -->
<pre><code class="language-html" data-text="">
</code></pre>
<!-- css -->
<pre><code class="language-css" data-text="">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt" data-text="this is optional text (data attr based written inside HTML tag)"></div>
<div class="txtpl"></div>
</div>
<!-- / content -->
</div>
<!-- / NOTES -->
<!-- ======================== ABAL ======================== -->
<!-- =========== TITLE (.file in head css allows pseudo element placement of character around title) -->
<div class="file_sp">
<div class="file ancht" id="abal">
ABAL<br />
Customer Account Balance
</div>
</div>
<!-- / TITLE -->
<!-- =========== BRIEF -->
<!-- normal text -->
<div class="normal">
</div>
<!-- option for html -->
<pre><code class="language-html pseubr_b" data-text="" style="display:non">
<body id="js-ABAL" ..>
confirmed
ERROR >
1
mobile, tablet > footer white space on right (due to gradient, but still looks off)
FIXED >
1
global settings > global header & footer > global footer > head css > line 1-5
global settings > global header & footer > global footer > inline css > line 34 (now line 40)
class edit1
min-width:100vw
background-color: #555
</code></pre>
<!-- option for css -->
<pre><code class="language-css" data-text="" style="display:none">
</code></pre>
<!-- / BRIEF -->
<!-- =========== NOTES (button toggle) -->
<div class="wcon">
<!-- button -->
<details>
<summary role="term" aria-details="pure-css">notes</summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content">
<!-- html -->
<pre><code class="language-html" data-text="">
WORKS for all viewports
SITEWIDE footer fix for mobile and tablet
--
top and aside menu locations
commented out <mvt:comment>
ABAL > line 16
<mvt:item name="hdft" param="global_header" />
and found menu is there
GLOBAL HEADER > line 134-138
<section class="o-layout">
<div class="o-layout__item">
<mvt:item name="readytheme" param="navigationset( 'account_navigation' )" />
</div>
</section>
so .. ACED would have to call the same snippet:
<mvt:item name="hdft" param="global_header" />
and it does:
<mvt:item name="hdft" param="global_header" />
THEME COMPONENTS > NAVIGATION SETS > ACCOUNT PAGE NAVIGATION > line 1-17
CONTENT of this TOP and ASIDE menu is here
--
color picker > 4b4b4b
css > 555
so calibrante new monitor
</code></pre>
<!-- css -->
<pre><code class="language-css" data-text="">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt" data-text="this is optional text (data attr based written inside HTML tag)"></div>
<div class="txtpl"></div>
</div>
<!-- / content -->
</div>
<!-- / NOTES -->
<!-- ======================== ABUS ======================== -->
<!-- =========== TITLE (.file in head css allows pseudo element placement of character around title) -->
<div class="file_sp">
<div class="file ancht" id="abus">
ABUS<br />
About Us
</div>
</div>
<!-- / TITLE -->
<!-- =========== BRIEF -->
<!-- normal text -->
<div class="normal">
</div>
<!-- option for html -->
<pre><code class="language-html pseubr_b" data-text="" style="display:non">
<body id="js-ABUS" ..>
confirmed
ERROR >
none
</code></pre>
<!-- option for css -->
<pre><code class="language-css" data-text="" style="display:none">
</code></pre>
<!-- / BRIEF -->
<!-- =========== NOTES (button toggle) -->
<div class="wcon">
<!-- button -->
<details>
<summary role="term" aria-details="pure-css">notes</summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content">
<!-- html -->
<pre><code class="language-html" data-text="">
</code></pre>
<!-- css -->
<pre><code class="language-css" data-text="">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt" data-text="this is optional text (data attr based written inside HTML tag)"></div>
<div class="txtpl"></div>
</div>
<!-- / content -->
</div>
<!-- / NOTES -->
<!-- ======================== ACAD ======================== -->
<!-- =========== TITLE (.file in head css allows pseudo element placement of character around title) -->
<div class="file_sp">
<div class="file ancht" id="acad">
ACAD<br />
Customer Create
</div>
</div>
<!-- / TITLE -->
<!-- =========== BRIEF -->
<!-- normal text -->
<div class="normal">
</div>
<!-- option for html -->
<pre><code class="language-html pseubr_b" data-text="" style="display:non">
<body id="js-ACAD" ..>
confirmed
ERROR >
1
shipping information touching title in desktop and tablet
FIXED >
1
HAVE TO FIX
</code></pre>
<!-- option for css -->
<pre><code class="language-css" data-text="" style="display:none">
</code></pre>
<!-- / BRIEF -->
<!-- =========== NOTES (button toggle) -->
<div class="wcon">
<!-- button -->
<details>
<summary role="term" aria-details="pure-css">notes</summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content">
<!-- html -->
<pre><code class="language-html" data-text="">
</code></pre>
<!-- css -->
<pre><code class="language-css" data-text="">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt" data-text="this is optional text (data attr based written inside HTML tag)"></div>
<div class="txtpl"></div>
</div>
<!-- / content -->
</div>
<!-- / NOTES -->
<!-- ======================== ACED ======================== -->
<!-- =========== TITLE (.file in head css allows pseudo element placement of character around title) -->
<div class="file_sp">
<div class="file ancht" id="aced">
ACED<br />
Customer Edit
</div>
</div>
<!-- / TITLE -->
<!-- =========== BRIEF -->
<!-- normal text -->
<div class="normal">
</div>
<!-- option for html -->
<pre><code class="language-html pseubr_b" data-text="" style="display:non">
<body id="js-ACED" ..>
confirmed
ERROR >
1
left-justifued menu coding is wrong
2
shipping information too far to right in desktop and lardge tablet
FIXED >
1
ACED > details > html > line 18-25 > moved aside to top to mimic ABAL menu
2
HAVE TO FIX
</code></pre>
<!-- option for css -->
<pre><code class="language-css" data-text="" style="display:none">
</code></pre>
<!-- / BRIEF -->
<!-- =========== NOTES (button toggle) -->
<div class="wcon">
<!-- button -->
<details>
<summary role="term" aria-details="pure-css">notes</summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content">
<!-- html -->
<pre><code class="language-html" data-text="">
<aside class="o-layout__item u-width-12 u-width-3--l">
<mvt:item name="readytheme" param="navigationset( 'account_navigation' )" />
</aside>
bcs in ABAL it's justifed at the top and collapses nicely into mobile where it scrolls left-right
</code></pre>
<!-- css -->
<pre><code class="language-css" data-text="">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt" data-text="this is optional text (data attr based written inside HTML tag)"></div>
<div class="txtpl"></div>
</div>
<!-- / content -->
</div>
<!-- / NOTES -->
<!-- ======================== ACLN ======================== -->
<!-- =========== TITLE (.file in head css allows pseudo element placement of character around title) -->
<div class="file_sp">
<div class="file ancht" id="acln">
ACLN<br />
Customer Account
</div>
</div>
<!-- / TITLE -->
<!-- =========== BRIEF -->
<!-- normal text -->
<div class="normal">
</div>
<!-- option for html -->
<pre><code class="language-html pseubr_b" data-text="" style="display:non">
<body id="js-ACLN" ..>
confirmed
ERROR >
none
</code></pre>
<!-- option for css -->
<pre><code class="language-css" data-text="" style="display:none">
</code></pre>
<!-- / BRIEF -->
<!-- =========== NOTES (button toggle) -->
<div class="wcon">
<!-- button -->
<details>
<summary role="term" aria-details="pure-css">notes</summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content">
<!-- html -->
<pre><code class="language-html" data-text="">
has overview underlined but same code is everywhere else
class > t-account-navigation__link--current
<!-- embedded css -->
<pre><code class="language-css pseubr_b" data-text="">
<style>
.t-account-navigation__link--current {
box-shadow: inset 0 -0.2ch 0 0 currentColor;
}
</style>
</code></pre>
CLASS LOCATED IN THEME COMPONENTS > NAVIGATION SETS > ACCOUNT PAGE NAVIGATION
where it uses if else logic .. but disabling else code makes all links disappear for ABAL but for ACLN OVERVIEW stays while all the rest disappears
BUT INSPECT HAS FULL RENDERED CODE >
ACLN >
<li class="t-account-navigation__list-item">
<a class="t-account-navigation__link t-account-navigation__link--current" href="https://henryscheinpromoshop.com/customer-account-526.html" title="Overview" target="_self">Overview</a>
</li>
ABAL >
<li class="t-account-navigation__list-item">
<a class="t-account-navigation__link" href="https://henryscheinpromoshop.com/customer-account-526.html" title="Overview" target="_self">Overview</a>
</li>
</code></pre>
<!-- css -->
<pre><code class="language-css" data-text="">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt" data-text="this is optional text (data attr based written inside HTML tag)"></div>
<div class="txtpl"></div>
</div>
<!-- / content -->
</div>
<!-- / NOTES -->
<!-- ======================== ACRT ======================== -->
<!-- =========== TITLE (.file in head css allows pseudo element placement of character around title) -->
<div class="file_sp">
<div class="file ancht" id="acrt">
ACRT<br />
Customer Password Reset
</div>
</div>
<!-- / TITLE -->
<!-- =========== BRIEF -->
<!-- normal text -->
<div class="normal">
</div>
<!-- option for html -->
<pre><code class="language-html pseubr_b" data-text="" style="display:non">
<body id="js-ACRT" ..>
confirmed
ERROR >
none
</code></pre>
<!-- option for css -->
<pre><code class="language-css" data-text="" style="display:none">
</code></pre>
<!-- / BRIEF -->
<!-- =========== NOTES (button toggle) -->
<div class="wcon">
<!-- button -->
<details>
<summary role="term" aria-details="pure-css">notes</summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content">
<!-- html -->
<pre><code class="language-html" data-text="">
</code></pre>
<!-- css -->
<pre><code class="language-css" data-text="">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt" data-text="this is optional text (data attr based written inside HTML tag)"></div>
<div class="txtpl"></div>
</div>
<!-- / content -->
</div>
<!-- / NOTES -->
<!-- ======================== AFAD ======================== -->
<!-- =========== TITLE (.file in head css allows pseudo element placement of character around title) -->
<div class="file_sp">
<div class="file ancht" id="afad">
AFAD<br />
Affiliate Create
</div>
</div>
<!-- / TITLE -->
<!-- =========== BRIEF -->
<!-- normal text -->
<div class="normal">
</div>
<!-- option for html -->
<pre><code class="language-html pseubr_b" data-text="" style="display:non">
<body id="js-AFAD" ..>
confirmed
ERROR >
1
tablet (768x1024) > contact info fields not aligned
FIXED >
1
AFAD > affiliate fields > inline css > line 44
style="min-width:80vw !important"
</code></pre>
<!-- option for css -->
<pre><code class="language-css" data-text="" style="display:none">
</code></pre>
<!-- / BRIEF -->
<!-- =========== NOTES (button toggle) -->
<div class="wcon">
<!-- button -->
<details>
<summary role="term" aria-details="pure-css">notes</summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content">
<!-- html -->
<pre><code class="language-html" data-text="">
</code></pre>
<!-- css -->
<pre><code class="language-css" data-text="">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt" data-text="this is optional text (data attr based written inside HTML tag)"></div>
<div class="txtpl"></div>
</div>
<!-- / content -->
</div>
<!-- / NOTES -->
<!-- ======================== AFCL ======================== -->
<!-- =========== TITLE (.file in head css allows pseudo element placement of character around title) -->
<div class="file_sp">
<div class="file ancht" id="afcl">
AFCL<br />
Affiliate Login
</div>
</div>
<!-- / TITLE -->
<!-- =========== BRIEF -->
<!-- normal text -->
<div class="normal">
</div>
<!-- option for html -->
<pre><code class="language-html pseubr_b" data-text="" style="display:non">
<body id="js-AFCL" ..>
confirmed
ERROR >
1
desktop 4k (past 2140px width) > content justifies outside of header
2
tablet (under 1024x1366 ipad pro) > content justifies outside of header
3
register button under text 'new affiliate' not aligned
4
footer hugging main content in mobile
FIXED >
1
AFCL > details > inline css > line 65 > changed u-width-6--m to u-width-4--m (only for under 4k)
2
AFCL > inline css > line 67 > changed class name from u-text-right to u-text-left
3
AFCL > inline css > head css > line 1-7
4
margin-bottom: 30vh
</code></pre>
<!-- option for css -->
<pre><code class="language-css" data-text="" style="display:none">
</code></pre>
<!-- / BRIEF -->
<!-- =========== NOTES (button toggle) -->
<div class="wcon">
<!-- button -->
<details>
<summary role="term" aria-details="pure-css">notes</summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content">
<!-- html -->
<pre><code class="language-html" data-text="">
</code></pre>
<!-- css -->
<pre><code class="language-css" data-text="">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt" data-text="this is optional text (data attr based written inside HTML tag)"></div>
<div class="txtpl"></div>
</div>
<!-- / content -->
</div>
<!-- / NOTES -->
<!-- ======================== AFED ======================== -->
<!-- =========== TITLE (.file in head css allows pseudo element placement of character around title) -->
<div class="file_sp">
<div class="file ancht" id="afed">
AFED<br />
Affiliate Edit
</div>
</div>
<!-- / TITLE -->
<!-- =========== BRIEF -->
<!-- normal text -->
<div class="normal">
</div>
<!-- option for html -->
<pre><code class="language-html pseubr_b" data-text="" style="display:non">
<body id="js-AFED" ..>
confirmed
** have to log in to see this page (tried but still redirecting to AFCL), need affiliate code
</code></pre>
<!-- option for css -->
<pre><code class="language-css" data-text="" style="display:none">
</code></pre>
<!-- / BRIEF -->
<!-- =========== NOTES (button toggle) -->
<div class="wcon">
<!-- button -->
<details>
<summary role="term" aria-details="pure-css">notes</summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content">
<!-- html -->
<pre><code class="language-html" data-text="">
</code></pre>
<!-- css -->
<pre><code class="language-css" data-text="">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt" data-text="this is optional text (data attr based written inside HTML tag)"></div>
<div class="txtpl"></div>
</div>
<!-- / content -->
</div>
<!-- / NOTES -->
<!-- ======================== AFFR ======================== -->
<!-- =========== TITLE (.file in head css allows pseudo element placement of character around title) -->
<div class="file_sp">
<div class="file ancht" id="affr">
AFFR<br />
Affiliate Password Reset
</div>
</div>
<!-- / TITLE -->
<!-- =========== BRIEF -->
<!-- normal text -->
<div class="normal">
</div>
<!-- option for html -->
<pre><code class="language-html pseubr_b" data-text="" style="display:non">
<body id="js-AFFR" ..>
NOT confirmed
** have to log in to see this page (tried but still redirecting to AFCL), need affiliate code
</code></pre>
<!-- option for css -->
<pre><code class="language-css" data-text="" style="display:none">
</code></pre>
<!-- / BRIEF -->
<!-- =========== NOTES (button toggle) -->
<div class="wcon">
<!-- button -->
<details>
<summary role="term" aria-details="pure-css">notes</summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content">
<!-- html -->
<pre><code class="language-html" data-text="">
</code></pre>
<!-- css -->
<pre><code class="language-css" data-text="">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt" data-text="this is optional text (data attr based written inside HTML tag)"></div>
<div class="txtpl"></div>
</div>
<!-- / content -->
</div>
<!-- / NOTES -->
<!-- ======================== AFPW ======================== -->
<!-- =========== TITLE (.file in head css allows pseudo element placement of character around title) -->
<div class="file_sp">
<div class="file ancht" id="afpw">
AFPW<br />
Affiliate Forgot Password
</div>
</div>
<!-- / TITLE -->
<!-- =========== BRIEF -->
<!-- normal text -->
<div class="normal">
</div>
<!-- option for html -->
<pre><code class="language-html pseubr_b" data-text="" style="display:non">
<body id="js-AFPW" ..>
confirmed
ERROR >
1
left justified menu
2
login and breadcrumbs at the bottom of page
3
footer not sticky
4
two breadcrumbs (one may be in global header or some content section in theme .. div id="global-header")
5
two 1 px lines
FIXED >
1
AFPW > details > inline css > line 83 > disabled left justified menu with display:none
AFPW > details > head css > line 1-62 >
2
flex aligned vertically breadc div and login form
3
flex sticky footer (with created classes .content in line 78 and .footerdiv in line 122)
4
disabled erroneous breadcrumb (located in line 86 with created class .breadc)
5
enabled only one 1px line
</code></pre>
<!-- option for css -->
<pre><code class="language-css" data-text="" style="display:none">
</code></pre>
<!-- / BRIEF -->
<!-- =========== NOTES (button toggle) -->
<div class="wcon">
<!-- button -->
<details>
<summary role="term" aria-details="pure-css">notes</summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content">
<!-- html -->
<pre><code class="language-html" data-text="">
</code></pre>
<!-- css -->
<pre><code class="language-css" data-text="">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt" data-text="this is optional text (data attr based written inside HTML tag)"></div>
<div class="txtpl"></div>
</div>
<!-- / content -->
</div>
<!-- / NOTES -->
<!-- ======================== AFRT ======================== -->
<!-- =========== TITLE (.file in head css allows pseudo element placement of character around title) -->
<div class="file_sp">
<div class="file ancht" id="afrt">
AFRT<br />
(Affiliate Temporary Password)
</div>
</div>
<!-- / TITLE -->
<!-- =========== BRIEF -->
<!-- normal text -->
<div class="normal">
</div>
<!-- option for html -->
<pre><code class="language-html" data-text="" style="display:none">
</code></pre>
<!-- option for css -->
<pre><code class="language-css" data-text="" style="display:none">
</code></pre>
<!-- / BRIEF -->
<!-- =========== NOTES (button toggle) -->
<div class="wcon">
<!-- button -->
<details>
<summary role="term" aria-details="pure-css">notes</summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content">
<!-- html -->
<pre><code class="language-html" data-text="">
</code></pre>
<!-- css -->
<pre><code class="language-css" data-text="">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt" data-text="this is optional text (data attr based written inside HTML tag)"></div>
<div class="txtpl"></div>
</div>
<!-- / content -->
</div>
<!-- / NOTES -->
<!-- ======================== AMAZONPAY_OCST ======================== -->
<!-- =========== TITLE (.file in head css allows pseudo element placement of character around title) -->
<div class="file_sp">
<div class="file ancht" id="amz_ocst">
AMAZONPAY_OCST<br />
(Amazon Pay - OCST)
</div>
</div>
<!-- / TITLE -->
<!-- =========== BRIEF -->
<!-- normal text -->
<div class="normal">
</div>
<!-- option for html -->
<pre><code class="language-html" data-text="" style="display:none">
</code></pre>
<!-- option for css -->
<pre><code class="language-css" data-text="" style="display:none">
</code></pre>
<!-- / BRIEF -->
<!-- =========== NOTES (button toggle) -->
<div class="wcon">
<!-- button -->
<details>
<summary role="term" aria-details="pure-css">notes</summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content">
<!-- html -->
<pre><code class="language-html" data-text="">
</code></pre>
<!-- css -->
<pre><code class="language-css" data-text="">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt" data-text="this is optional text (data attr based written inside HTML tag)"></div>
<div class="txtpl"></div>
</div>
<!-- / content -->
</div>
<!-- / NOTES -->
<!-- ======================== AMAZONPAY_OPAY ======================== -->
<!-- =========== TITLE (.file in head css allows pseudo element placement of character around title) -->
<div class="file_sp">
<div class="file ancht" id="amz_opay">
AMAZONPAY_OPAY<br/>
(Amazon Pay - OPAY)
</div>
</div>
<!-- / TITLE -->
<!-- =========== BRIEF -->
<!-- normal text -->
<div class="normal">
</div>
<!-- option for html -->
<pre><code class="language-html" data-text="" style="display:none">
</code></pre>
<!-- option for css -->
<pre><code class="language-css" data-text="" style="display:none">
</code></pre>
<!-- / BRIEF -->
<!-- =========== NOTES (button toggle) -->
<div class="wcon">
<!-- button -->
<details>
<summary role="term" aria-details="pure-css">notes</summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content">
<!-- html -->
<pre><code class="language-html" data-text="">
</code></pre>
<!-- css -->
<pre><code class="language-css" data-text="">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt" data-text="this is optional text (data attr based written inside HTML tag)"></div>
<div class="txtpl"></div>
</div>
<!-- / content -->
</div>
<!-- / NOTES -->
<!-- ======================== AMAZONPAY_OSEL ======================== -->
<!-- =========== TITLE (.file in head css allows pseudo element placement of character around title) -->
<div class="file_sp">
<div class="file ancht" id="amz_osel">
AMAZONPAY_OSEL<br />
(Amazon Pay - OSEL)
</div>
</div>
<!-- / TITLE -->
<!-- =========== BRIEF -->
<!-- normal text -->
<div class="normal">
</div>
<!-- option for html -->
<pre><code class="language-html" data-text="" style="display:none">
</code></pre>
<!-- option for css -->
<pre><code class="language-css" data-text="" style="display:none">
</code></pre>
<!-- / BRIEF -->
<!-- =========== NOTES (button toggle) -->
<div class="wcon">
<!-- button -->
<details>
<summary role="term" aria-details="pure-css">notes</summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content">
<!-- html -->
<pre><code class="language-html" data-text="">
</code></pre>
<!-- css -->
<pre><code class="language-css" data-text="">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt" data-text="this is optional text (data attr based written inside HTML tag)"></div>
<div class="txtpl"></div>
</div>
<!-- / content -->
</div>
<!-- / NOTES -->
<!-- ======================== BASK ======================== -->
<!-- =========== TITLE (.file in head css allows pseudo element placement of character around title) -->
<div class="file_sp">
<div class="file ancht" id="bask">
BASK<br />
(Basket Contents)
</div>
</div>
<!-- / TITLE -->
<!-- =========== BRIEF -->
<!-- normal text -->
<div class="normal">
</div>
<!-- option for html -->
<pre><code class="language-html pseubr_b" data-text="" style="display:non">
<body id="js-BASK" ..>
confirmed
ERROR >
none
</code></pre>
<!-- option for css -->
<pre><code class="language-css" data-text="" style="display:none">
</code></pre>
<!-- / BRIEF -->
<!-- =========== NOTES (button toggle) -->
<div class="wcon">
<!-- button -->
<details>
<summary role="term" aria-details="pure-css">notes</summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content">
<!-- html -->
<pre><code class="language-html" data-text="">
</code></pre>
<!-- css -->
<pre><code class="language-css" data-text="">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt" data-text="this is optional text (data attr based written inside HTML tag)"></div>
<div class="txtpl"></div>
</div>
<!-- / content -->
</div>
<!-- / NOTES -->
<!-- ======================== BSKE ======================== -->
<!-- =========== TITLE (.file in head css allows pseudo element placement of character around title) -->
<div class="file_sp">
<div class="file ancht" id="bske">
BSKE<br />
(Checkout: Basket Empty)
</div>
</div>
<!-- / TITLE -->
<!-- =========== BRIEF -->
<!-- normal text -->
<div class="normal">
</div>
<!-- option for html -->
<pre><code class="language-html pseubr_b" data-text="" style="display:non">
<body id="js-BSKE" ..>
confirmed
sun dec 24 1:00 2023
created branch > marcus_dev_hspromoshop
ERROR >
1
'cart currently empty' box too high
2
no space below 'cart currently empty' box in mobile so touches footer
3
'cart currently empty' box too wide
4
header message touches edges
FIXED >
1
line 24 added > style="margin-top:10%"
2
changed line 24 edit to style="margin:10% 0% 50vh 0%"
3
changed line 24 edit to style="margin:10% 0% 50vh 0%;max-width:70vw"
4
header > 2nd div > span > span > classes: playfair italic
can't find class playfair but use it anyway for padding in global header >
<!-- embedded css -->
<pre><code class="language-css pseubr_b" data-text="" style="display:non">
<style>
/* class available to tweak 'annual inventory' message at top of header */
.playfair {
display: block !important;
padding: 0% 1% 3% 1% !important
}
</style>
</code></pre>
</code></pre>
<!-- option for css -->
<pre><code class="language-css" data-text="" style="display:none">
</code></pre>
<!-- / BRIEF -->
<!-- =========== NOTES (button toggle) -->
<div class="wcon">
<!-- button -->
<details>
<summary role="term" aria-details="pure-css">notes</summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content">
<!-- html -->
<pre><code class="language-html" data-text="">
</code></pre>
<!-- css -->
<pre><code class="language-css" data-text="">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt" data-text="this is optional text (data attr based written inside HTML tag)"></div>
<div class="txtpl"></div>
</div>
<!-- / content -->
</div>
<!-- / NOTES -->
<!-- ======================== CABK ======================== -->
<!-- =========== TITLE (.file in head css allows pseudo element placement of character around title) -->
<div class="file_sp">
<div class="file ancht" id="cabk">
CABK<br />
(Address Book)
</div>
</div>
<!-- / TITLE -->
<!-- =========== BRIEF -->
<!-- normal text -->
<div class="normal">
</div>
<!-- option for html -->
<pre><code class="language-html" data-text="" style="display:none">
</code></pre>
<!-- option for css -->
<pre><code class="language-css" data-text="" style="display:none">
</code></pre>
<!-- / BRIEF -->
<!-- =========== NOTES (button toggle) -->
<div class="wcon">
<!-- button -->
<details>
<summary role="term" aria-details="pure-css">notes</summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content">
<!-- html -->
<pre><code class="language-html" data-text="">
</code></pre>
<!-- css -->
<pre><code class="language-css" data-text="">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt" data-text="this is optional text (data attr based written inside HTML tag)"></div>
<div class="txtpl"></div>
</div>
<!-- / content -->
</div>
<!-- / NOTES -->
<!-- ======================== CACT ======================== -->
<!-- =========== TITLE (.file in head css allows pseudo element placement of character around title) -->
<div class="file_sp">
<div class="file ancht" id="cact">
CACT<br />
(Create Customer Account)
</div>
</div>
<!-- / TITLE -->
<!-- =========== BRIEF -->
<!-- normal text -->
<div class="normal">
</div>
<!-- option for html -->
<pre><code class="language-html" data-text="" style="display:none">
</code></pre>
<!-- option for css -->
<pre><code class="language-css" data-text="" style="display:none">
</code></pre>
<!-- / BRIEF -->
<!-- =========== NOTES (button toggle) -->
<div class="wcon">
<!-- button -->
<details>
<summary role="term" aria-details="pure-css">notes</summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content">
<!-- html -->
<pre><code class="language-html" data-text="">
</code></pre>
<!-- css -->
<pre><code class="language-css" data-text="">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt" data-text="this is optional text (data attr based written inside HTML tag)"></div>
<div class="txtpl"></div>
</div>
<!-- / content -->
</div>
<!-- / NOTES -->
<!-- ======================== CADA ======================== -->
<!-- =========== TITLE (.file in head css allows pseudo element placement of character around title) -->
<div class="file_sp">
<div class="file ancht" id="cada">
CADA<br />
(Add New Address)
</div>
</div>
<!-- / TITLE -->
<!-- =========== BRIEF -->
<!-- normal text -->
<div class="normal">
</div>
<!-- option for html -->
<pre><code class="language-html" data-text="" style="display:none">
</code></pre>
<!-- option for css -->
<pre><code class="language-css" data-text="" style="display:none">
</code></pre>
<!-- / BRIEF -->
<!-- =========== NOTES (button toggle) -->
<div class="wcon">
<!-- button -->
<details>
<summary role="term" aria-details="pure-css">notes</summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content">
<!-- html -->
<pre><code class="language-html" data-text="">
</code></pre>
<!-- css -->
<pre><code class="language-css" data-text="">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt" data-text="this is optional text (data attr based written inside HTML tag)"></div>
<div class="txtpl"></div>
</div>
<!-- / content -->
</div>
<!-- / NOTES -->
<!-- ======================== CADE ======================== -->
<!-- =========== TITLE (.file in head css allows pseudo element placement of character around title) -->
<div class="file_sp">
<div class="file ancht" id="cade">
CADE<br />
(Edit Address)
</div>
</div>
<!-- / TITLE -->
<!-- =========== BRIEF -->
<!-- normal text -->
<div class="normal">
</div>
<!-- option for html -->
<pre><code class="language-html" data-text="" style="display:none">
</code></pre>
<!-- option for css -->
<pre><code class="language-css" data-text="" style="display:none">
</code></pre>
<!-- / BRIEF -->
<!-- =========== NOTES (button toggle) -->
<div class="wcon">
<!-- button -->
<details>
<summary role="term" aria-details="pure-css">notes</summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content">
<!-- html -->
<pre><code class="language-html" data-text="">
</code></pre>
<!-- css -->
<pre><code class="language-css" data-text="">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt" data-text="this is optional text (data attr based written inside HTML tag)"></div>
<div class="txtpl"></div>
</div>
<!-- / content -->
</div>
<!-- / NOTES -->
<!-- ======================== CEML ======================== -->
<!-- =========== TITLE (.file in head css allows pseudo element placement of character around title) -->
<div class="file_sp">
<div class="file ancht" id="ceml">
CEML<br />
(Change Email Address)
</div>
</div>
<!-- / TITLE -->
<!-- =========== BRIEF -->
<!-- normal text -->
<div class="normal">
</div>
<!-- option for html -->
<pre><code class="language-html" data-text="" style="display:none">
</code></pre>
<!-- option for css -->
<pre><code class="language-css" data-text="" style="display:none">
</code></pre>
<!-- / BRIEF -->
<!-- =========== NOTES (button toggle) -->
<div class="wcon">
<!-- button -->
<details>
<summary role="term" aria-details="pure-css">notes</summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content">
<!-- html -->
<pre><code class="language-html" data-text="">
</code></pre>
<!-- css -->
<pre><code class="language-css" data-text="">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt" data-text="this is optional text (data attr based written inside HTML tag)"></div>
<div class="txtpl"></div>
</div>
<!-- / content -->
</div>
<!-- / NOTES -->
<!-- ======================== CPCA ======================== -->
<!-- =========== TITLE (.file in head css allows pseudo element placement of character around title) -->
<div class="file_sp">
<div class="file ancht" id="cpca">
CPCA<br />
(Add New Payment Method)
</div>
</div>
<!-- / TITLE -->
<!-- =========== BRIEF -->
<!-- normal text -->
<div class="normal">
</div>
<!-- option for html -->
<pre><code class="language-html" data-text="" style="display:none">
</code></pre>
<!-- option for css -->
<pre><code class="language-css" data-text="" style="display:none">
</code></pre>
<!-- / BRIEF -->
<!-- =========== NOTES (button toggle) -->
<div class="wcon">
<!-- button -->
<details>
<summary role="term" aria-details="pure-css">notes</summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content">
<!-- html -->
<pre><code class="language-html" data-text="">
</code></pre>
<!-- css -->
<pre><code class="language-css" data-text="">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt" data-text="this is optional text (data attr based written inside HTML tag)"></div>
<div class="txtpl"></div>
</div>
<!-- / content -->
</div>
<!-- / NOTES -->
<!-- ======================== CPCD ======================== -->
<!-- =========== TITLE (.file in head css allows pseudo element placement of character around title) -->
<div class="file_sp">
<div class="file ancht" id="cpcd">
CPCD<br />
(Payment)
</div>
</div>
<!-- / TITLE -->
<!-- =========== BRIEF -->
<!-- normal text -->
<div class="normal">
</div>
<!-- option for html -->
<pre><code class="language-html" data-text="" style="display:none">
</code></pre>
<!-- option for css -->
<pre><code class="language-css" data-text="" style="display:none">
</code></pre>
<!-- / BRIEF -->
<!-- =========== NOTES (button toggle) -->
<div class="wcon">
<!-- button -->
<details>
<summary role="term" aria-details="pure-css">notes</summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content">
<!-- html -->
<pre><code class="language-html" data-text="">
</code></pre>
<!-- css -->
<pre><code class="language-css" data-text="">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt" data-text="this is optional text (data attr based written inside HTML tag)"></div>
<div class="txtpl"></div>
</div>
<!-- / content -->
</div>
<!-- / NOTES -->
<!-- ======================== CPCE ======================== -->
<!-- =========== TITLE (.file in head css allows pseudo element placement of character around title) -->
<div class="file_sp">
<div class="file ancht" id="cpce">
CPCE<br />
(Edit Payment Method)
</div>
</div>
<!-- / TITLE -->
<!-- =========== BRIEF -->
<!-- normal text -->
<div class="normal">
</div>
<!-- option for html -->
<pre><code class="language-html" data-text="" style="display:none">
</code></pre>
<!-- option for css -->
<pre><code class="language-css" data-text="" style="display:none">
</code></pre>
<!-- / BRIEF -->
<!-- =========== NOTES (button toggle) -->
<div class="wcon">
<!-- button -->
<details>
<summary role="term" aria-details="pure-css">notes</summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content">
<!-- html -->
<pre><code class="language-html" data-text="">
</code></pre>
<!-- css -->
<pre><code class="language-css" data-text="">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt" data-text="this is optional text (data attr based written inside HTML tag)"></div>
<div class="txtpl"></div>
</div>
<!-- / content -->
</div>
<!-- / NOTES -->
<!-- ======================== CPRO ======================== -->
<!-- =========== TITLE (.file in head css allows pseudo element placement of character around title) -->
<div class="file_sp">
<div class="file ancht" id="cpro">
CPRO<br />
(Custom Profile)
</div>
</div>
<!-- / TITLE -->
<!-- =========== BRIEF -->
<!-- normal text -->
<div class="normal">
</div>
<!-- option for html -->
<pre><code class="language-html" data-text="" style="display:none">
</code></pre>
<!-- option for css -->
<pre><code class="language-css" data-text="" style="display:none">
</code></pre>
<!-- / BRIEF -->
<!-- =========== NOTES (button toggle) -->
<div class="wcon">
<!-- button -->
<details>
<summary role="term" aria-details="pure-css">notes</summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content">
<!-- html -->
<pre><code class="language-html" data-text="">
</code></pre>
<!-- css -->
<pre><code class="language-css" data-text="">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt" data-text="this is optional text (data attr based written inside HTML tag)"></div>
<div class="txtpl"></div>
</div>
<!-- / content -->
</div>
<!-- / NOTES -->
<!-- ======================== CPWD ======================== -->
<!-- =========== TITLE (.file in head css allows pseudo element placement of character around title) -->
<div class="file_sp">
<div class="file ancht" id="cpwd">
CPWD<br />
(Change Password)
</div>
</div>
<!-- / TITLE -->
<!-- =========== BRIEF -->
<!-- normal text -->
<div class="normal">
</div>
<!-- option for html -->
<pre><code class="language-html" data-text="" style="display:none">
</code></pre>
<!-- option for css -->
<pre><code class="language-css" data-text="" style="display:none">
</code></pre>
<!-- / BRIEF -->
<!-- =========== NOTES (button toggle) -->
<div class="wcon">
<!-- button -->
<details>
<summary role="term" aria-details="pure-css">notes</summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content">
<!-- html -->
<pre><code class="language-html" data-text="">
</code></pre>
<!-- css -->
<pre><code class="language-css" data-text="">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt" data-text="this is optional text (data attr based written inside HTML tag)"></div>
<div class="txtpl"></div>
</div>
<!-- / content -->
</div>
<!-- / NOTES -->
<!-- ======================== CSBE ======================== -->
<!-- =========== TITLE (.file in head css allows pseudo element placement of character around title) -->
<div class="file_sp">
<div class="file ancht" id="csbe">
CSBE<br />
(Edit Subscription)
</div>
</div>
<!-- / TITLE -->
<!-- =========== BRIEF -->
<!-- normal text -->
<div class="normal">
</div>
<!-- option for html -->
<pre><code class="language-html" data-text="" style="display:none">
</code></pre>
<!-- option for css -->
<pre><code class="language-css" data-text="" style="display:none">
</code></pre>
<!-- / BRIEF -->
<!-- =========== NOTES (button toggle) -->
<div class="wcon">
<!-- button -->
<details>
<summary role="term" aria-details="pure-css">notes</summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content">
<!-- html -->
<pre><code class="language-html" data-text="">
</code></pre>
<!-- css -->
<pre><code class="language-css" data-text="">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt" data-text="this is optional text (data attr based written inside HTML tag)"></div>
<div class="txtpl"></div>
</div>
<!-- / content -->
</div>
<!-- / NOTES -->
<!-- ======================== CSTR ======================== -->
<!-- =========== TITLE (.file in head css allows pseudo element placement of character around title) -->
<div class="file_sp">
<div class="file ancht" id="cstr">
CSTR<br />
(Password Reset)
</div>
</div>
<!-- / TITLE -->
<!-- =========== BRIEF -->
<!-- normal text -->
<div class="normal">
</div>
<!-- option for html -->
<pre><code class="language-html" data-text="" style="display:none">
</code></pre>
<!-- option for css -->
<pre><code class="language-css" data-text="" style="display:none">
</code></pre>
<!-- / BRIEF -->
<!-- =========== NOTES (button toggle) -->
<div class="wcon">
<!-- button -->
<details>
<summary role="term" aria-details="pure-css">notes</summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content">
<!-- html -->
<pre><code class="language-html" data-text="">
</code></pre>
<!-- css -->
<pre><code class="language-css" data-text="">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt" data-text="this is optional text (data attr based written inside HTML tag)"></div>
<div class="txtpl"></div>
</div>
<!-- / content -->
</div>
<!-- / NOTES -->
<!-- ======================== CSUB ======================== -->
<!-- =========== TITLE (.file in head css allows pseudo element placement of character around title) -->
<div class="file_sp">
<div class="file ancht" id="csub">
CSUB<br />
(Subscription)
</div>
</div>
<!-- / TITLE -->
<!-- =========== BRIEF -->
<!-- normal text -->
<div class="normal">
</div>
<!-- option for html -->
<pre><code class="language-html" data-text="" style="display:none">
</code></pre>
<!-- option for css -->
<pre><code class="language-css" data-text="" style="display:none">
</code></pre>
<!-- / BRIEF -->
<!-- =========== NOTES (button toggle) -->
<div class="wcon">
<!-- button -->
<details>
<summary role="term" aria-details="pure-css">notes</summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content">
<!-- html -->
<pre><code class="language-html" data-text="">
</code></pre>
<!-- css -->
<pre><code class="language-css" data-text="">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt" data-text="this is optional text (data attr based written inside HTML tag)"></div>
<div class="txtpl"></div>
</div>
<!-- / content -->
</div>
<!-- / NOTES -->
<!-- ======================== CTFM ======================== -->
<!-- =========== TITLE (.file in head css allows pseudo element placement of character around title) -->
<div class="file_sp">
<div class="file ancht" id="ctfm">
CTFM<br />
(Contact Form)
</div>
</div>
<!-- / TITLE -->
<!-- =========== BRIEF -->
<!-- normal text -->
<div class="normal">
</div>
<!-- option for html -->
<pre><code class="language-html" data-text="" style="display:none">
</code></pre>
<!-- option for css -->
<pre><code class="language-css" data-text="" style="display:none">
</code></pre>
<!-- / BRIEF -->
<!-- =========== NOTES (button toggle) -->
<div class="wcon">
<!-- button -->
<details>
<summary role="term" aria-details="pure-css">notes</summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content">
<!-- html -->
<pre><code class="language-html" data-text="">
</code></pre>
<!-- css -->
<pre><code class="language-css" data-text="">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt" data-text="this is optional text (data attr based written inside HTML tag)"></div>
<div class="txtpl"></div>
</div>
<!-- / content -->
</div>
<!-- / NOTES -->
<!-- ======================== CTGY ======================== -->
<!-- =========== TITLE (.file in head css allows pseudo element placement of character around title) -->
<div class="file_sp">
<div class="file ancht" id="ctgy">
CTGY<br />
(Category Display)
</div>
</div>
<!-- / TITLE -->
<!-- =========== BRIEF -->
<!-- normal text -->
<div class="normal">
</div>
<!-- option for html -->
<pre><code class="language-html pseubr_b" data-text="" style="display:non">
<body id="js-CTGY" ..>
confirmed
ERROR >
1
aside menu usually not wanted (disabled)
2
not much vertical space between 'shop' title and footer for mobile
3
no category display (blank)
FIXED >
1
style="display:none" in line 109 in aside tag
2
added div at line 117
<div style="margin-bottom:50vh !important"></div>
3
HAVE TO FIX
</code></pre>
<!-- option for css -->
<pre><code class="language-css" data-text="" style="display:none">
</code></pre>
<!-- / BRIEF -->
<!-- =========== NOTES (button toggle) -->
<div class="wcon">
<!-- button -->
<details>
<summary role="term" aria-details="pure-css">notes</summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content">
<!-- html -->
<pre><code class="language-html" data-text="">
</code></pre>
<!-- css -->
<pre><code class="language-css" data-text="">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt" data-text="this is optional text (data attr based written inside HTML tag)"></div>
<div class="txtpl"></div>
</div>
<!-- / content -->
</div>
<!-- / NOTES -->
<!-- ======================== CTLG ======================== -->
<!-- =========== TITLE (.file in head css allows pseudo element placement of character around title) -->
<div class="file_sp">
<div class="file ancht" id="ctlg">
CTLG<br />
(Our Catalogue)
</div>
</div>
<!-- / TITLE -->
<!-- =========== BRIEF -->
<!-- normal text -->
<div class="normal">
</div>
<!-- option for html -->
<pre><code class="language-html" data-text="" style="display:none">
</code></pre>
<!-- option for css -->
<pre><code class="language-css" data-text="" style="display:none">
</code></pre>
<!-- / BRIEF -->
<!-- =========== NOTES (button toggle) -->
<div class="wcon">
<!-- button -->
<details>
<summary role="term" aria-details="pure-css">notes</summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content">
<!-- html -->
<pre><code class="language-html" data-text="">
</code></pre>
<!-- css -->
<pre><code class="language-css" data-text="">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt" data-text="this is optional text (data attr based written inside HTML tag)"></div>
<div class="txtpl"></div>
</div>
<!-- / content -->
</div>
<!-- / NOTES -->
<!-- ======================== CTUS ======================== -->
<!-- =========== TITLE (.file in head css allows pseudo element placement of character around title) -->
<div class="file_sp">
<div class="file ancht" id="ctus">
CTUS<br />
(Contact Us)
</div>
</div>
<!-- / TITLE -->
<!-- =========== BRIEF -->
<!-- normal text -->
<div class="normal">
</div>
<!-- option for html -->
<pre><code class="language-html pseubr_b" data-text="" style="display:non">
<body id="js-CTUS" ..>
confirmed
ERROR >
none
</code></pre>
<!-- option for css -->
<pre><code class="language-css" data-text="" style="display:none">
</code></pre>
<!-- / BRIEF -->
<!-- =========== NOTES (button toggle) -->
<div class="wcon">
<!-- button -->
<details>
<summary role="term" aria-details="pure-css">notes</summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content">
<!-- html -->
<pre><code class="language-html" data-text="">
</code></pre>
<!-- css -->
<pre><code class="language-css" data-text="">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt" data-text="this is optional text (data attr based written inside HTML tag)"></div>
<div class="txtpl"></div>
</div>
<!-- / content -->
</div>
<!-- / NOTES -->
<!-- ======================== EMAIL_ABANDONED_BASKET ======================== -->
<!-- =========== TITLE (.file in head css allows pseudo element placement of character around title) -->
<div class="file_sp">
<div class="file ancht" id="em_aban">
EMAIL_ABANDONED_BASKET<br />
(Abandoned Basket)
</div>
</div>
<!-- / TITLE -->
<!-- =========== BRIEF -->
<!-- normal text -->
<div class="normal">
</div>
<!-- option for html -->
<pre><code class="language-html" data-text="" style="display:none">
</code></pre>
<!-- option for css -->
<pre><code class="language-css" data-text="" style="display:none">
</code></pre>
<!-- / BRIEF -->
<!-- =========== NOTES (button toggle) -->
<div class="wcon">
<!-- button -->
<details>
<summary role="term" aria-details="pure-css">notes</summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content">
<!-- html -->
<pre><code class="language-html" data-text="">
</code></pre>
<!-- css -->
<pre><code class="language-css" data-text="">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt" data-text="this is optional text (data attr based written inside HTML tag)"></div>
<div class="txtpl"></div>
</div>
<!-- / content -->
</div>
<!-- / NOTES -->
<!-- ======================== EMAIL_BACKORDER_NOTICE ======================== -->
<!-- =========== TITLE (.file in head css allows pseudo element placement of character around title) -->
<div class="file_sp">
<div class="file ancht" id="em_back">
EMAIL_BACKORDER_NOTICE<br />
(Backorder Notice)
</div>
</div>
<!-- / TITLE -->
<!-- =========== BRIEF -->
<!-- normal text -->
<div class="normal">
</div>
<!-- option for html -->
<pre><code class="language-html" data-text="" style="display:none">
</code></pre>
<!-- option for css -->
<pre><code class="language-css" data-text="" style="display:none">
</code></pre>
<!-- / BRIEF -->
<!-- =========== NOTES (button toggle) -->
<div class="wcon">
<!-- button -->
<details>
<summary role="term" aria-details="pure-css">notes</summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content">
<!-- html -->
<pre><code class="language-html" data-text="">
</code></pre>
<!-- css -->
<pre><code class="language-css" data-text="">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt" data-text="this is optional text (data attr based written inside HTML tag)"></div>
<div class="txtpl"></div>
</div>
<!-- / content -->
</div>
<!-- / NOTES -->
<!-- ======================== EMAIL_CUSTOMER_CREATED ======================== -->
<!-- =========== TITLE (.file in head css allows pseudo element placement of character around title) -->
<div class="file_sp">
<div class="file ancht" id="em_cust">
EMAIL_CUSTOMER_CREATED<br />
(Customer Created)
</div>
</div>
<!-- / TITLE -->
<!-- =========== BRIEF -->
<!-- normal text -->
<div class="normal">
</div>
<!-- option for html -->
<pre><code class="language-html" data-text="" style="display:none">
</code></pre>
<!-- option for css -->
<pre><code class="language-css" data-text="" style="display:none">
</code></pre>
<!-- / BRIEF -->
<!-- =========== NOTES (button toggle) -->
<div class="wcon">
<!-- button -->
<details>
<summary role="term" aria-details="pure-css">notes</summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content">
<!-- html -->
<pre><code class="language-html" data-text="">
</code></pre>
<!-- css -->
<pre><code class="language-css" data-text="">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt" data-text="this is optional text (data attr based written inside HTML tag)"></div>
<div class="txtpl"></div>
</div>
<!-- / content -->
</div>
<!-- / NOTES -->
<!-- ======================== EMAIL_DIGITALDOWNLOAD_CREATED ======================== -->
<!-- =========== TITLE (.file in head css allows pseudo element placement of character around title) -->
<div class="file_sp">
<div class="file ancht" id="em_digi">
EMAIL_DIGITALDOWNLOAD_CREATED<br />
(Digital Download Created)
</div>
</div>
<!-- / TITLE -->
<!-- =========== BRIEF -->
<!-- normal text -->
<div class="normal">
</div>
<!-- option for html -->
<pre><code class="language-html" data-text="" style="display:none">
</code></pre>
<!-- option for css -->
<pre><code class="language-css" data-text="" style="display:none">
</code></pre>
<!-- / BRIEF -->
<!-- =========== NOTES (button toggle) -->
<div class="wcon">
<!-- button -->
<details>
<summary role="term" aria-details="pure-css">notes</summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content">
<!-- html -->
<pre><code class="language-html" data-text="">
</code></pre>
<!-- css -->
<pre><code class="language-css" data-text="">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt" data-text="this is optional text (data attr based written inside HTML tag)"></div>
<div class="txtpl"></div>
</div>
<!-- / content -->
</div>
<!-- / NOTES -->
<!-- ======================== EMAIL_GIFTCERTIFICATE_CREATED ======================== -->
<!-- =========== TITLE (.file in head css allows pseudo element placement of character around title) -->
<div class="file_sp">
<div class="file ancht" id="em_gift">
EMAIL_GIFTCERTIFICATE_CREATED<br />
(Gift Certificate Created)
</div>
</div>
<!-- / TITLE -->
<!-- =========== BRIEF -->
<!-- normal text -->
<div class="normal">
</div>
<!-- option for html -->
<pre><code class="language-html" data-text="" style="display:none">
</code></pre>
<!-- option for css -->
<pre><code class="language-css" data-text="" style="display:none">
</code></pre>
<!-- / BRIEF -->
<!-- =========== NOTES (button toggle) -->
<div class="wcon">
<!-- button -->
<details>
<summary role="term" aria-details="pure-css">notes</summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content">
<!-- html -->
<pre><code class="language-html" data-text="">
</code></pre>
<!-- css -->
<pre><code class="language-css" data-text="">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt" data-text="this is optional text (data attr based written inside HTML tag)"></div>
<div class="txtpl"></div>
</div>
<!-- / content -->
</div>
<!-- / NOTES -->
<!-- ======================== EMAIL_ORDERCONF_CUSTOMER ======================== -->
<!-- =========== TITLE (.file in head css allows pseudo element placement of character around title) -->
<div class="file_sp">
<div class="file ancht" id="em_ord_cus">
EMAIL_ORDERCONF_CUSTOMER<br />
(Order Confirmation: Customer)
</div>
</div>
<!-- / TITLE -->
<!-- =========== BRIEF -->
<!-- normal text -->
<div class="normal">
</div>
<!-- option for html -->
<pre><code class="language-html pseubr_b" data-text="" style="display:non">
<body id="js-EMAIL_ORDERCONF_CUSTOMER" ..>
NOT confirmed
ERROR >
1
old branding text
FIXED >
1
line 139 > changed alt="Henry Schein Custom Branding" to alt="Wild Marketing Group"
line 191 > changed customerservice@henryscheincustombranding.com to customerservice@wildmarketinggroup.com
</code></pre>
<!-- option for css -->
<pre><code class="language-css" data-text="" style="display:none">
</code></pre>
<!-- / BRIEF -->
<!-- =========== NOTES (button toggle) -->
<div class="wcon">
<!-- button -->
<details>
<summary role="term" aria-details="pure-css">notes</summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content">
<!-- html -->
<pre><code class="language-html" data-text="">
</code></pre>
<!-- css -->
<pre><code class="language-css" data-text="">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt" data-text="this is optional text (data attr based written inside HTML tag)"></div>
<div class="txtpl"></div>
</div>
<!-- / content -->
</div>
<!-- / NOTES -->
<!-- ======================== EMAIL_ORDERCONF_MERCHANT ======================== -->
<!-- =========== TITLE (.file in head css allows pseudo element placement of character around title) -->
<div class="file_sp">
<div class="file ancht" id="em_ord_mer">
EMAIL_ORDERCONF_MERCHANT<br />
(Order Confirmation: Merchant)
</div>
</div>
<!-- / TITLE -->
<!-- =========== BRIEF -->
<!-- normal text -->
<div class="normal">
</div>
<!-- option for html -->
<pre><code class="language-html pseubr_b" data-text="" style="display:non">
<body id="js-EMAIL_ORDERCONF_MERCHANT" ..>
NOT confirmed
ERROR >
1
old branding text
FIXED >
1
line 139 > changed alt="Henry Schein Custom Branding" to alt="Wild Marketing Group"
line 191 > "The following order has been placed on the Henry Schein Promo Shop store." replaced with "The following order has been placed on the Wild Marketing Group store."
</code></pre>
<!-- option for css -->
<pre><code class="language-css" data-text="" style="display:none">
</code></pre>
<!-- / BRIEF -->
<!-- =========== NOTES (button toggle) -->
<div class="wcon">
<!-- button -->
<details>
<summary role="term" aria-details="pure-css">notes</summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content">
<!-- html -->
<pre><code class="language-html" data-text="">
</code></pre>
<!-- css -->
<pre><code class="language-css" data-text="">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt" data-text="this is optional text (data attr based written inside HTML tag)"></div>
<div class="txtpl"></div>
</div>
<!-- / content -->
</div>
<!-- / NOTES -->
<!-- ======================== EMAIL_PAYMENTCARD_EXPIRING ======================== -->
<!-- =========== TITLE (.file in head css allows pseudo element placement of character around title) -->
<div class="file_sp">
<div class="file ancht" id="em_pay">
EMAIL_PAYMENTCARD_EXPIRING<br />
(Payment Card Expiring)
</div>
</div>
<!-- / TITLE -->
<!-- =========== BRIEF -->
<!-- normal text -->
<div class="normal">
</div>
<!-- option for html -->
<pre><code class="language-html" data-text="" style="display:none">
</code></pre>
<!-- option for css -->
<pre><code class="language-css" data-text="" style="display:none">
</code></pre>
<!-- / BRIEF -->
<!-- =========== NOTES (button toggle) -->
<div class="wcon">
<!-- button -->
<details>
<summary role="term" aria-details="pure-css">notes</summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content">
<!-- html -->
<pre><code class="language-html" data-text="">
</code></pre>
<!-- css -->
<pre><code class="language-css" data-text="">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt" data-text="this is optional text (data attr based written inside HTML tag)"></div>
<div class="txtpl"></div>
</div>
<!-- / content -->
</div>
<!-- / NOTES -->
<!-- ======================== EMAIL_RETURN_RECEIVED ======================== -->
<!-- =========== TITLE (.file in head css allows pseudo element placement of character around title) -->
<div class="file_sp">
<div class="file ancht" id="em_ret">
EMAIL_RETURN_RECEIVED<br />
(Return Received)
</div>
</div>
<!-- / TITLE -->
<!-- =========== BRIEF -->
<!-- normal text -->
<div class="normal">
</div>
<!-- option for html -->
<pre><code class="language-html" data-text="" style="display:none">
</code></pre>
<!-- option for css -->
<pre><code class="language-css" data-text="" style="display:none">
</code></pre>
<!-- / BRIEF -->
<!-- =========== NOTES (button toggle) -->
<div class="wcon">
<!-- button -->
<details>
<summary role="term" aria-details="pure-css">notes</summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content">
<!-- html -->
<pre><code class="language-html" data-text="">
</code></pre>
<!-- css -->
<pre><code class="language-css" data-text="">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt" data-text="this is optional text (data attr based written inside HTML tag)"></div>
<div class="txtpl"></div>
</div>
<!-- / content -->
</div>
<!-- / NOTES -->
<!-- ======================== EMAIL_RMA_ISSUED ======================== -->
<!-- =========== TITLE (.file in head css allows pseudo element placement of character around title) -->
<div class="file_sp">
<div class="file ancht" id="em_rma">
EMAIL_RMA_ISSUED<br />
(RMA Issued)
</div>
</div>
<!-- / TITLE -->
<!-- =========== BRIEF -->
<!-- normal text -->
<div class="normal">
</div>
<!-- option for html -->
<pre><code class="language-html" data-text="" style="display:none">
</code></pre>
<!-- option for css -->
<pre><code class="language-css" data-text="" style="display:none">
</code></pre>
<!-- / BRIEF -->
<!-- =========== NOTES (button toggle) -->
<div class="wcon">
<!-- button -->
<details>
<summary role="term" aria-details="pure-css">notes</summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content">
<!-- html -->
<pre><code class="language-html" data-text="">
</code></pre>
<!-- css -->
<pre><code class="language-css" data-text="">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt" data-text="this is optional text (data attr based written inside HTML tag)"></div>
<div class="txtpl"></div>
</div>
<!-- / content -->
</div>
<!-- / NOTES -->
<!-- ======================== EMAIL_SHIPMENT_SHIPPED ======================== -->
<!-- =========== TITLE (.file in head css allows pseudo element placement of character around title) -->
<div class="file_sp">
<div class="file ancht" id="em_ship">
EMAIL_SHIPMENT_SHIPPED<br />
(Shipment Shipped)
</div>
</div>
<!-- / TITLE -->
<!-- =========== BRIEF -->
<!-- normal text -->
<div class="normal">
</div>
<!-- option for html -->
<pre><code class="language-html" data-text="" style="display:none">
</code></pre>
<!-- option for css -->
<pre><code class="language-css" data-text="" style="display:none">
</code></pre>
<!-- / BRIEF -->
<!-- =========== NOTES (button toggle) -->
<div class="wcon">
<!-- button -->
<details>
<summary role="term" aria-details="pure-css">notes</summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content">
<!-- html -->
<pre><code class="language-html" data-text="">
</code></pre>
<!-- css -->
<pre><code class="language-css" data-text="">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt" data-text="this is optional text (data attr based written inside HTML tag)"></div>
<div class="txtpl"></div>
</div>
<!-- / content -->
</div>
<!-- / NOTES -->
<!-- ======================== EMAIL_SUBSCRIPTION_AUTH_FAILURE ======================== -->
<!-- =========== TITLE (.file in head css allows pseudo element placement of character around title) -->
<div class="file_sp">
<div class="file ancht" id="em_sub_auth">
EMAIL_SUBSCRIPTION_AUTH_FAILURE<br />
(Subscription Authorization Failure)
</div>
</div>
<!-- / TITLE -->
<!-- =========== BRIEF -->
<!-- normal text -->
<div class="normal">
</div>
<!-- option for html -->
<pre><code class="language-html" data-text="" style="display:none">
</code></pre>
<!-- option for css -->
<pre><code class="language-css" data-text="" style="display:none">
</code></pre>
<!-- / BRIEF -->
<!-- =========== NOTES (button toggle) -->
<div class="wcon">
<!-- button -->
<details>
<summary role="term" aria-details="pure-css">notes</summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content">
<!-- html -->
<pre><code class="language-html" data-text="">
</code></pre>
<!-- css -->
<pre><code class="language-css" data-text="">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt" data-text="this is optional text (data attr based written inside HTML tag)"></div>
<div class="txtpl"></div>
</div>
<!-- / content -->
</div>
<!-- / NOTES -->
<!-- ======================== EMAIL_SUBSCRIPTION_CANCELLED ======================== -->
<!-- =========== TITLE (.file in head css allows pseudo element placement of character around title) -->
<div class="file_sp">
<div class="file ancht" id="em_sub_can">
EMAIL_SUBSCRIPTION_CANCELLED<br />
(Subscription Cancelled)
</div>
</div>
<!-- / TITLE -->
<!-- =========== BRIEF -->
<!-- normal text -->
<div class="normal">
</div>
<!-- option for html -->
<pre><code class="language-html" data-text="" style="display:none">
</code></pre>
<!-- option for css -->
<pre><code class="language-css" data-text="" style="display:none">
</code></pre>
<!-- / BRIEF -->
<!-- =========== NOTES (button toggle) -->
<div class="wcon">
<!-- button -->
<details>
<summary role="term" aria-details="pure-css">notes</summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content">
<!-- html -->
<pre><code class="language-html" data-text="">
</code></pre>
<!-- css -->
<pre><code class="language-css" data-text="">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt" data-text="this is optional text (data attr based written inside HTML tag)"></div>
<div class="txtpl"></div>
</div>
<!-- / content -->
</div>
<!-- / NOTES -->
<!-- ======================== EMAIL_SUBSCRIPTION_CHANGED ======================== -->
<!-- =========== TITLE (.file in head css allows pseudo element placement of character around title) -->
<div class="file_sp">
<div class="file ancht" id="em_sub_cha">
EMAIL_SUBSCRIPTION_CHANGED<br />
(Subscription Changed)
</div>
</div>
<!-- / TITLE -->
<!-- =========== BRIEF -->
<!-- normal text -->
<div class="normal">
</div>
<!-- option for html -->
<pre><code class="language-html" data-text="" style="display:none">
</code></pre>
<!-- option for css -->
<pre><code class="language-css" data-text="" style="display:none">
</code></pre>
<!-- / BRIEF -->
<!-- =========== NOTES (button toggle) -->
<div class="wcon">
<!-- button -->
<details>
<summary role="term" aria-details="pure-css">notes</summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content">
<!-- html -->
<pre><code class="language-html" data-text="">
</code></pre>
<!-- css -->
<pre><code class="language-css" data-text="">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt" data-text="this is optional text (data attr based written inside HTML tag)"></div>
<div class="txtpl"></div>
</div>
<!-- / content -->
</div>
<!-- / NOTES -->
<!-- ======================== EMAIL_SUBSCRIPTION_CREATED ======================== -->
<!-- =========== TITLE (.file in head css allows pseudo element placement of character around title) -->
<div class="file_sp">
<div class="file ancht" id="em_sub_cre">
EMAIL_SUBSCRIPTION_CREATED<br />
(Subscription Created)
</div>
</div>
<!-- / TITLE -->
<!-- =========== BRIEF -->
<!-- normal text -->
<div class="normal">
</div>
<!-- option for html -->
<pre><code class="language-html" data-text="" style="display:none">
</code></pre>
<!-- option for css -->
<pre><code class="language-css" data-text="" style="display:none">
</code></pre>
<!-- / BRIEF -->
<!-- =========== NOTES (button toggle) -->
<div class="wcon">
<!-- button -->
<details>
<summary role="term" aria-details="pure-css">notes</summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content">
<!-- html -->
<pre><code class="language-html" data-text="">
</code></pre>
<!-- css -->
<pre><code class="language-css" data-text="">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt" data-text="this is optional text (data attr based written inside HTML tag)"></div>
<div class="txtpl"></div>
</div>
<!-- / content -->
</div>
<!-- / NOTES -->
<!-- ======================== EMAIL_SUBSCRIPTION_OUTOFSTOCK ======================== -->
<!-- =========== TITLE (.file in head css allows pseudo element placement of character around title) -->
<div class="file_sp">
<div class="file ancht" id="em_sub_out">
EMAIL_SUBSCRIPTION_OUTOFSTOCK<br />
(Subscription Out of Stock)
</div>
</div>
<!-- / TITLE -->
<!-- =========== BRIEF -->
<!-- normal text -->
<div class="normal">
</div>
<!-- option for html -->
<pre><code class="language-html" data-text="" style="display:none">
</code></pre>
<!-- option for css -->
<pre><code class="language-css" data-text="" style="display:none">
</code></pre>
<!-- / BRIEF -->
<!-- =========== NOTES (button toggle) -->
<div class="wcon">
<!-- button -->
<details>
<summary role="term" aria-details="pure-css">notes</summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content">
<!-- html -->
<pre><code class="language-html" data-text="">
</code></pre>
<!-- css -->
<pre><code class="language-css" data-text="">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt" data-text="this is optional text (data attr based written inside HTML tag)"></div>
<div class="txtpl"></div>
</div>
<!-- / content -->
</div>
<!-- / NOTES -->
<!-- ======================== EMAIL_SUBSCRIPTION_REMINDER ======================== -->
<!-- =========== TITLE (.file in head css allows pseudo element placement of character around title) -->
<div class="file_sp">
<div class="file ancht" id="em_sub_rem">
EMAIL_SUBSCRIPTION_REMINDER<br />
(Subscription Reminder)
</div>
</div>
<!-- / TITLE -->
<!-- =========== BRIEF -->
<!-- normal text -->
<div class="normal">
</div>
<!-- option for html -->
<pre><code class="language-html" data-text="" style="display:none">
</code></pre>
<!-- option for css -->
<pre><code class="language-css" data-text="" style="display:none">
</code></pre>
<!-- / BRIEF -->
<!-- =========== NOTES (button toggle) -->
<div class="wcon">
<!-- button -->
<details>
<summary role="term" aria-details="pure-css">notes</summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content">
<!-- html -->
<pre><code class="language-html" data-text="">
</code></pre>
<!-- css -->
<pre><code class="language-css" data-text="">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt" data-text="this is optional text (data attr based written inside HTML tag)"></div>
<div class="txtpl"></div>
</div>
<!-- / content -->
</div>
<!-- / NOTES -->
<!-- ======================== FAQ ======================== -->
<!-- =========== TITLE (.file in head css allows pseudo element placement of character around title) -->
<div class="file_sp">
<div class="file ancht" id="faq">
FAQS<br />
(Frequently Asked Questions)
</div>
</div>
<!-- / TITLE -->
<!-- =========== BRIEF -->
<!-- normal text -->
<div class="normal">
</div>
<!-- option for html -->
<pre><code class="language-html" data-text="" style="display:none">
</code></pre>
<!-- option for css -->
<pre><code class="language-css" data-text="" style="display:none">
</code></pre>
<!-- / BRIEF -->
<!-- =========== NOTES (button toggle) -->
<div class="wcon">
<!-- button -->
<details>
<summary role="term" aria-details="pure-css">notes</summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content">
<!-- html -->
<pre><code class="language-html" data-text="">
</code></pre>
<!-- css -->
<pre><code class="language-css" data-text="">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt" data-text="this is optional text (data attr based written inside HTML tag)"></div>
<div class="txtpl"></div>
</div>
<!-- / content -->
</div>
<!-- / NOTES -->
<!-- ======================== FPWD ======================== -->
<!-- =========== TITLE (.file in head css allows pseudo element placement of character around title) -->
<div class="file_sp">
<div class="file ancht" id="fpwd">
FPWD<br />
(Forgot Password)
</div>
</div>
<!-- / TITLE -->
<!-- =========== BRIEF -->
<!-- normal text -->
<div class="normal">
</div>
<!-- option for html -->
<pre><code class="language-html" data-text="" style="display:none">
</code></pre>
<!-- option for css -->
<pre><code class="language-css" data-text="" style="display:none">
</code></pre>
<!-- / BRIEF -->
<!-- =========== NOTES (button toggle) -->
<div class="wcon">
<!-- button -->
<details>
<summary role="term" aria-details="pure-css">notes</summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content">
<!-- html -->
<pre><code class="language-html" data-text="">
</code></pre>
<!-- css -->
<pre><code class="language-css" data-text="">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt" data-text="this is optional text (data attr based written inside HTML tag)"></div>
<div class="txtpl"></div>
</div>
<!-- / content -->
</div>
<!-- / NOTES -->
<!-- ======================== GFTL ======================== -->
<!-- =========== TITLE (.file in head css allows pseudo element placement of character around title) -->
<div class="file_sp">
<div class="file ancht" id="gftl">
GFTL<br />
(Redeem Gift Certificate)
</div>
</div>
<!-- / TITLE -->
<!-- =========== BRIEF -->
<!-- normal text -->
<div class="normal">
</div>
<!-- option for html -->
<pre><code class="language-html" data-text="" style="display:none">
</code></pre>
<!-- option for css -->
<pre><code class="language-css" data-text="" style="display:none">
</code></pre>
<!-- / BRIEF -->
<!-- =========== NOTES (button toggle) -->
<div class="wcon">
<!-- button -->
<details>
<summary role="term" aria-details="pure-css">notes</summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content">
<!-- html -->
<pre><code class="language-html" data-text="">
</code></pre>
<!-- css -->
<pre><code class="language-css" data-text="">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt" data-text="this is optional text (data attr based written inside HTML tag)"></div>
<div class="txtpl"></div>
</div>
<!-- / content -->
</div>
<!-- / NOTES -->
<!-- ======================== INVC ======================== -->
<!-- =========== TITLE (.file in head css allows pseudo element placement of character around title) -->
<div class="file_sp">
<div class="file ancht" id="invc">
INVC<br />
(Confirmation)
</div>
</div>
<!-- / TITLE -->
<!-- =========== BRIEF -->
<!-- normal text -->
<div class="normal">
</div>
<!-- option for html -->
<pre><code class="language-html pseubr_b" data-text="" style="display:non">
<body id="js-OSEL" ..>
NOT confirmed
ERROR >
1
not much vertical space between 'your orderhas already ..' box and footer for mobile
2
header & footer > line 9 > If you would like to make any changes to the personalized fields, please contact our Customer Service Team at <a href="customerservice@wildmarketinggroup.com?Subject=Henry%20Schein%29Promo%20Shop%20Inquiry">customerservice@wildmarketinggroup.com</a>
3
content (printer_friendly_content) > line 4 > alt="Henry Schein Custom Branding"
4
content (printer_friendly_content) > line 10 > Email: customerservice@henryscheincustombranding.com
FIXED >
1
/* fixes not much vertical space between 'your order has already ..' box and footer for mobile */
<!-- embedded css -->
<pre><code class="language-css" data-text="" style="display:non">
<style>
.t-site-footer {
margin-top: 40vh
}
</style>
</code></pre>
works in dev tools in firefox so should work in INVC > details, or INVC > header & footer > header
edits were not working as i wsa not logged in as customer perhaps, so the page that was actually loading was >
https://henryscheinpromoshop.com/invoice-521.html
<body id="js-OPRC" ..>
** logged in as customer but could not complete order (need fake credit card or some some free pass for pseudo order from sean)
2
replaced customerservice@henryscheincustombranding.com with customerservice@wildmarketinggroup.com
replaced Subject=Henry%20Schein%29Promo%20Shop%20Inquiry with Subject=Wild%20Marketing%29Group%20Inquiry
3
replaced alt="Henry Schein Custom Branding" with alt="Wild Marketing Group"
4
replaced customerservice@henryscheincustombranding.com? with customerservice@wildmarketinggroup.com
</code></pre>
<!-- option for css -->
<pre><code class="language-css" data-text="" style="display:none">
</code></pre>
<!-- / BRIEF -->
<!-- =========== NOTES (button toggle) -->
<div class="wcon">
<!-- button -->
<details>
<summary role="term" aria-details="pure-css">notes</summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content">
<!-- html -->
<pre><code class="language-html" data-text="">
</code></pre>
<!-- css -->
<pre><code class="language-css" data-text="">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt" data-text="this is optional text (data attr based written inside HTML tag)"></div>
<div class="txtpl"></div>
</div>
<!-- / content -->
</div>
<!-- / NOTES -->
<!-- ======================== LOGN ======================== -->
<!-- =========== TITLE (.file in head css allows pseudo element placement of character around title) -->
<div class="file_sp">
<div class="file ancht" id="logn">
LOGN<br />
(Customer Login)
</div>
</div>
<!-- / TITLE -->
<!-- =========== BRIEF -->
<!-- normal text -->
<div class="normal">
</div>
<!-- option for html -->
<pre><code class="language-html pseubr_b" data-text="" style="display:non">
<body id="js-LOGN" ..>
confirmed
ERROR >
none
</code></pre>
<!-- option for css -->
<pre><code class="language-css" data-text="" style="display:none">
</code></pre>
<!-- / BRIEF -->
<!-- =========== NOTES (button toggle) -->
<div class="wcon">
<!-- button -->
<details>
<summary role="term" aria-details="pure-css">notes</summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content">
<!-- html -->
<pre><code class="language-html" data-text="">
</code></pre>
<!-- css -->
<pre><code class="language-css" data-text="">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt" data-text="this is optional text (data attr based written inside HTML tag)"></div>
<div class="txtpl"></div>
</div>
<!-- / content -->
</div>
<!-- / NOTES -->
<!-- ======================== MNTN ======================== -->
<!-- =========== TITLE (.file in head css allows pseudo element placement of character around title) -->
<div class="file_sp">
<div class="file ancht" id="mntn">
MNTN<br />
(Maintenance Mode)
</div>
</div>
<!-- / TITLE -->
<!-- =========== BRIEF -->
<!-- normal text -->
<div class="normal">
</div>
<!-- option for html -->
<pre><code class="language-html" data-text="" style="display:none">
</code></pre>
<!-- option for css -->
<pre><code class="language-css" data-text="" style="display:none">
</code></pre>
<!-- / BRIEF -->
<!-- =========== NOTES (button toggle) -->
<div class="wcon">
<!-- button -->
<details>
<summary role="term" aria-details="pure-css">notes</summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content">
<!-- html -->
<pre><code class="language-html" data-text="">
</code></pre>
<!-- css -->
<pre><code class="language-css" data-text="">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt" data-text="this is optional text (data attr based written inside HTML tag)"></div>
<div class="txtpl"></div>
</div>
<!-- / content -->
</div>
<!-- / NOTES -->
<!-- ======================== NTFD ======================== -->
<!-- =========== TITLE (.file in head css allows pseudo element placement of character around title) -->
<div class="file_sp">
<div class="file ancht" id="ntfd">
NTFD<br />(Not Found)
</div>
</div>
<!-- / TITLE -->
<!-- =========== BRIEF -->
<!-- normal text -->
<div class="normal">
</div>
<!-- option for html -->
<pre><code class="language-html" data-text="" style="display:none">
</code></pre>
<!-- option for css -->
<pre><code class="language-css" data-text="" style="display:none">
</code></pre>
<!-- / BRIEF -->
<!-- =========== NOTES (button toggle) -->
<div class="wcon">
<!-- button -->
<details>
<summary role="term" aria-details="pure-css">notes</summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content">
<!-- html -->
<pre><code class="language-html" data-text="">
</code></pre>
<!-- css -->
<pre><code class="language-css" data-text="">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt" data-text="this is optional text (data attr based written inside HTML tag)"></div>
<div class="txtpl"></div>
</div>
<!-- / content -->
</div>
<!-- / NOTES -->
<!-- ======================== OCST ======================== -->
<!-- =========== TITLE (.file in head css allows pseudo element placement of character around title) -->
<div class="file_sp">
<div class="file ancht" id="ocst">
OCST<br />
(Checkout Customer Information)
</div>
</div>
<!-- / TITLE -->
<!-- =========== BRIEF -->
<!-- normal text -->
<div class="normal">
</div>
<!-- option for html -->
<pre><code class="language-html pseubr_b" data-text="" style="display:non">
<body id="js-OCST" ..>
confirmed
ERROR >
none
works fine to test without ordering
</code></pre>
<!-- option for css -->
<pre><code class="language-css" data-text="" style="display:none">
</code></pre>
<!-- / BRIEF -->
<!-- =========== NOTES (button toggle) -->
<div class="wcon">
<!-- button -->
<details>
<summary role="term" aria-details="pure-css">notes</summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content">
<!-- html -->
<pre><code class="language-html" data-text="">
</code></pre>
<!-- css -->
<pre><code class="language-css" data-text="">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt" data-text="this is optional text (data attr based written inside HTML tag)"></div>
<div class="txtpl"></div>
</div>
<!-- / content -->
</div>
<!-- / NOTES -->
<!-- ======================== OMIN ======================== -->
<!-- =========== TITLE (.file in head css allows pseudo element placement of character around title) -->
<div class="file_sp">
<div class="file ancht" id="omin">
OMIN<br />
(Checkout: Minimum Purchase Required)
</div>
</div>
<!-- / TITLE -->
<!-- =========== BRIEF -->
<!-- normal text -->
<div class="normal">
</div>
<!-- option for html -->
<pre><code class="language-html" data-text="" style="display:none">
</code></pre>
<!-- option for css -->
<pre><code class="language-css" data-text="" style="display:none">
</code></pre>
<!-- / BRIEF -->
<!-- =========== NOTES (button toggle) -->
<div class="wcon">
<!-- button -->
<details>
<summary role="term" aria-details="pure-css">notes</summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content">
<!-- html -->
<pre><code class="language-html" data-text="">
</code></pre>
<!-- css -->
<pre><code class="language-css" data-text="">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt" data-text="this is optional text (data attr based written inside HTML tag)"></div>
<div class="txtpl"></div>
</div>
<!-- / content -->
</div>
<!-- / NOTES -->
<!-- ======================== OPAY ======================== -->
<!-- =========== TITLE (.file in head css allows pseudo element placement of character around title) -->
<div class="file_sp">
<div class="file ancht" id="opay">
OPAY<br />
(Checkout: Payment Information)
</div>
</div>
<!-- / TITLE -->
<!-- =========== BRIEF -->
<!-- normal text -->
<div class="normal">
</div>
<!-- option for html -->
<pre><code class="language-html pseubr_b" data-text="" style="display:non">
<body id="js-OPAY" ..>
confirmed
ERROR >
none
works fine to test without ordering
</code></pre>
<!-- option for css -->
<pre><code class="language-css" data-text="" style="display:none">
</code></pre>
<!-- / BRIEF -->
<!-- =========== NOTES (button toggle) -->
<div class="wcon">
<!-- button -->
<details>
<summary role="term" aria-details="pure-css">notes</summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content">
<!-- html -->
<pre><code class="language-html" data-text="">
</code></pre>
<!-- css -->
<pre><code class="language-css" data-text="">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt" data-text="this is optional text (data attr based written inside HTML tag)"></div>
<div class="txtpl"></div>
</div>
<!-- / content -->
</div>
<!-- / NOTES -->
<!-- ======================== OPRC ======================== -->
<!-- =========== TITLE (.file in head css allows pseudo element placement of character around title) -->
<div class="file_sp">
<div class="file ancht" id="oprc">
OPRC<br />
(Order Already Processed)
</div>
</div>
<!-- / TITLE -->
<!-- =========== BRIEF -->
<!-- normal text -->
<div class="normal">
</div>
<!-- option for html -->
<pre><code class="language-html" data-text="" style="display:none">
</code></pre>
<!-- option for css -->
<pre><code class="language-css" data-text="" style="display:none">
</code></pre>
<!-- / BRIEF -->
<!-- =========== NOTES (button toggle) -->
<div class="wcon">
<!-- button -->
<details>
<summary role="term" aria-details="pure-css">notes</summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content">
<!-- html -->
<pre><code class="language-html" data-text="">
</code></pre>
<!-- css -->
<pre><code class="language-css" data-text="">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt" data-text="this is optional text (data attr based written inside HTML tag)"></div>
<div class="txtpl"></div>
</div>
<!-- / content -->
</div>
<!-- / NOTES -->
<!-- ======================== ORDER_INVOICE ======================== -->
<!-- =========== TITLE (.file in head css allows pseudo element placement of character around title) -->
<div class="file_sp">
<div class="file ancht" id="ord_inv">
ORDER_INVOICE<br
/>(Printable Invoice)
</div>
</div>
<!-- / TITLE -->
<!-- =========== BRIEF -->
<!-- normal text -->
<div class="normal">
</div>
<!-- option for html -->
<pre><code class="language-html" data-text="" style="display:none">
</code></pre>
<!-- option for css -->
<pre><code class="language-css" data-text="" style="display:none">
</code></pre>
<!-- / BRIEF -->
<!-- =========== NOTES (button toggle) -->
<div class="wcon">
<!-- button -->
<details>
<summary role="term" aria-details="pure-css">notes</summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content">
<!-- html -->
<pre><code class="language-html" data-text="">
</code></pre>
<!-- css -->
<pre><code class="language-css" data-text="">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt" data-text="this is optional text (data attr based written inside HTML tag)"></div>
<div class="txtpl"></div>
</div>
<!-- / content -->
</div>
<!-- / NOTES -->
<!-- ======================== ORDH ======================== -->
<!-- =========== TITLE (.file in head css allows pseudo element placement of character around title) -->
<div class="file_sp">
<div class="file ancht" id="ordh">
ORDH<br />
(Order History List)
</div>
</div>
<!-- / TITLE -->
<!-- =========== BRIEF -->
<!-- normal text -->
<div class="normal">
</div>
<!-- option for html -->
<pre><code class="language-html pseubr_b" data-text="" style="display:non">
<body id="js-ORDH" ..>
confirmed
ERROR >
none
** logged in as customer (sean as he has order history list of 1 item) but could not complete order (need fake credit card or some some free pass for pseudo order from sean)
</code></pre>
<!-- option for css -->
<pre><code class="language-css" data-text="" style="display:none">
</code></pre>
<!-- / BRIEF -->
<!-- =========== NOTES (button toggle) -->
<div class="wcon">
<!-- button -->
<details>
<summary role="term" aria-details="pure-css">notes</summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content">
<!-- html -->
<pre><code class="language-html" data-text="">
</code></pre>
<!-- css -->
<pre><code class="language-css" data-text="">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt" data-text="this is optional text (data attr based written inside HTML tag)"></div>
<div class="txtpl"></div>
</div>
<!-- / content -->
</div>
<!-- / NOTES -->
<!-- ======================== ORDL ======================== -->
<!-- =========== TITLE (.file in head css allows pseudo element placement of character around title) -->
<div class="file_sp">
<div class="file ancht" id="ordl">
ORDL<br />
(Order Custom Login)
</div>
</div>
<!-- / TITLE -->
<!-- =========== BRIEF -->
<!-- normal text -->
<div class="normal">
</div>
<!-- option for html -->
<pre><code class="language-html pseubr_b" data-text="" style="display:non">
<body id="js-ORDL" ..>
confirmed
ERROR >
none
</code></pre>
<!-- option for css -->
<pre><code class="language-css" data-text="" style="display:none">
</code></pre>
<!-- / BRIEF -->
<!-- =========== NOTES (button toggle) -->
<div class="wcon">
<!-- button -->
<details>
<summary role="term" aria-details="pure-css">notes</summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content">
<!-- html -->
<pre><code class="language-html" data-text="">
</code></pre>
<!-- css -->
<pre><code class="language-css" data-text="">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt" data-text="this is optional text (data attr based written inside HTML tag)"></div>
<div class="txtpl"></div>
</div>
<!-- / content -->
</div>
<!-- / NOTES -->
<!-- ======================== ORDS ======================== -->
<!-- =========== TITLE (.file in head css allows pseudo element placement of character around title) -->
<div class="file_sp">
<div class="file ancht" id="ords">
ORDS<br />
(Order Status)
</div>
</div>
<!-- / TITLE -->
<!-- =========== BRIEF -->
<!-- normal text -->
<div class="normal">
</div>
<!-- option for html -->
<pre><code class="language-html pseubr_b" data-text="" style="display:non">
<body id="js-OSEL" ..>
NOT confirmed
** logged in as customer but could not complete order (need fake credit card or some some free pass for pseudo order from sean)
</code></pre>
<!-- option for css -->
<pre><code class="language-css" data-text="" style="display:none">
</code></pre>
<!-- / BRIEF -->
<!-- =========== NOTES (button toggle) -->
<div class="wcon">
<!-- button -->
<details>
<summary role="term" aria-details="pure-css">notes</summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content">
<!-- html -->
<pre><code class="language-html" data-text="">
</code></pre>
<!-- css -->
<pre><code class="language-css" data-text="">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt" data-text="this is optional text (data attr based written inside HTML tag)"></div>
<div class="txtpl"></div>
</div>
<!-- / content -->
</div>
<!-- / NOTES -->
<!-- ======================== ORHL ======================== -->
<!-- =========== TITLE (.file in head css allows pseudo element placement of character around title) -->
<div class="file_sp">
<div class="file ancht" id="orhl">
ORHL<br />
(Lookup Order History)
</div>
</div>
<!-- / TITLE -->
<!-- =========== BRIEF -->
<!-- normal text -->
<div class="normal">
</div>
<!-- option for html -->
<pre><code class="language-html" data-text="" style="display:none">
</code></pre>
<!-- option for css -->
<pre><code class="language-css" data-text="" style="display:none">
</code></pre>
<!-- / BRIEF -->
<!-- =========== NOTES (button toggle) -->
<div class="wcon">
<!-- button -->
<details>
<summary role="term" aria-details="pure-css">notes</summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content">
<!-- html -->
<pre><code class="language-html" data-text="">
</code></pre>
<!-- css -->
<pre><code class="language-css" data-text="">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt" data-text="this is optional text (data attr based written inside HTML tag)"></div>
<div class="txtpl"></div>
</div>
<!-- / content -->
</div>
<!-- / NOTES -->
<!-- ======================== OSEL ======================== -->
<!-- =========== TITLE (.file in head css allows pseudo element placement of character around title) -->
<div class="file_sp">
<div class="file ancht" id="osel">
OSEL<br />
(Checkout: Shipping/Payment Selection)
</div>
</div>
<!-- / TITLE -->
<!-- =========== BRIEF -->
<!-- normal text -->
<div class="normal">
</div>
<!-- option for html -->
<pre><code class="language-html pseubr_b" data-text="" style="display:non">
<body id="js-OSEL" ..>
confirmed
ERROR >
none
</code></pre>
<!-- option for css -->
<pre><code class="language-css" data-text="" style="display:none">
</code></pre>
<!-- / BRIEF -->
<!-- =========== NOTES (button toggle) -->
<div class="wcon">
<!-- button -->
<details>
<summary role="term" aria-details="pure-css">notes</summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content">
<!-- html -->
<pre><code class="language-html" data-text="">
</code></pre>
<!-- css -->
<pre><code class="language-css" data-text="">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt" data-text="this is optional text (data attr based written inside HTML tag)"></div>
<div class="txtpl"></div>
</div>
<!-- / content -->
</div>
<!-- / NOTES -->
<!-- ======================== OUS1 ======================== -->
<!-- =========== TITLE (.file in head css allows pseudo element placement of character around title) -->
<div class="file_sp">
<div class="file ancht" id="ous1">
OUS1<br />
(Checkout: Upsell Product (Single))
</div>
</div>
<!-- / TITLE -->
<!-- =========== BRIEF -->
<!-- normal text -->
<div class="normal">
</div>
<!-- option for html -->
<pre><code class="language-html" data-text="" style="display:none">
</code></pre>
<!-- option for css -->
<pre><code class="language-css" data-text="" style="display:none">
</code></pre>
<!-- / BRIEF -->
<!-- =========== NOTES (button toggle) -->
<div class="wcon">
<!-- button -->
<details>
<summary role="term" aria-details="pure-css">notes</summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content">
<!-- html -->
<pre><code class="language-html" data-text="">
</code></pre>
<!-- css -->
<pre><code class="language-css" data-text="">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt" data-text="this is optional text (data attr based written inside HTML tag)"></div>
<div class="txtpl"></div>
</div>
<!-- / content -->
</div>
<!-- / NOTES -->
<!-- ======================== OUSM ======================== -->
<!-- =========== TITLE (.file in head css allows pseudo element placement of character around title) -->
<div class="file_sp">
<div class="file ancht" id="ousm">
OUSM<br />
(Checkout: Upsell Product (Multiple))
</div>
</div>
<!-- / TITLE -->
<!-- =========== BRIEF -->
<!-- normal text -->
<div class="normal">
</div>
<!-- option for html -->
<pre><code class="language-html" data-text="" style="display:none">
</code></pre>
<!-- option for css -->
<pre><code class="language-css" data-text="" style="display:none">
</code></pre>
<!-- / BRIEF -->
<!-- =========== NOTES (button toggle) -->
<div class="wcon">
<!-- button -->
<details>
<summary role="term" aria-details="pure-css">notes</summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content">
<!-- html -->
<pre><code class="language-html" data-text="">
</code></pre>
<!-- css -->
<pre><code class="language-css" data-text="">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt" data-text="this is optional text (data attr based written inside HTML tag)"></div>
<div class="txtpl"></div>
</div>
<!-- / content -->
</div>
<!-- / NOTES -->
<!-- ======================== PATR ======================== -->
<!-- =========== TITLE (.file in head css allows pseudo element placement of character around title) -->
<div class="file_sp">
<div class="file ancht" id="patr">
PATR<br />
(Missing Product Attributes)
</div>
</div>
<!-- / TITLE -->
<!-- =========== BRIEF -->
<!-- normal text -->
<div class="normal">
</div>
<!-- option for html -->
<pre><code class="language-html" data-text="" style="display:none">
</code></pre>
<!-- option for css -->
<pre><code class="language-css" data-text="" style="display:none">
</code></pre>
<!-- / BRIEF -->
<!-- =========== NOTES (button toggle) -->
<div class="wcon">
<!-- button -->
<details>
<summary role="term" aria-details="pure-css">notes</summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content">
<!-- html -->
<pre><code class="language-html" data-text="">
</code></pre>
<!-- css -->
<pre><code class="language-css" data-text="">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt" data-text="this is optional text (data attr based written inside HTML tag)"></div>
<div class="txtpl"></div>
</div>
<!-- / content -->
</div>
<!-- / NOTES -->
<!-- ======================== PLMT ======================== -->
<!-- =========== TITLE (.file in head css allows pseudo element placement of character around title) -->
<div class="file_sp">
<div class="file ancht" id="plmt">
PLMT<br />
(Product Limited Stock)
</div>
</div>
<!-- / TITLE -->
<!-- =========== BRIEF -->
<!-- normal text -->
<div class="normal">
</div>
<!-- option for html -->
<pre><code class="language-html" data-text="" style="display:none">
</code></pre>
<!-- option for css -->
<pre><code class="language-css" data-text="" style="display:none">
</code></pre>
<!-- / BRIEF -->
<!-- =========== NOTES (button toggle) -->
<div class="wcon">
<!-- button -->
<details>
<summary role="term" aria-details="pure-css">notes</summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content">
<!-- html -->
<pre><code class="language-html" data-text="">
</code></pre>
<!-- css -->
<pre><code class="language-css" data-text="">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt" data-text="this is optional text (data attr based written inside HTML tag)"></div>
<div class="txtpl"></div>
</div>
<!-- / content -->
</div>
<!-- / NOTES -->
<!-- ======================== PLST ======================== -->
<!-- =========== TITLE (.file in head css allows pseudo element placement of character around title) -->
<div class="file_sp">
<div class="file ancht" id="plst">
PLST<br />
(Product List)
</div>
</div>
<!-- / TITLE -->
<!-- =========== BRIEF -->
<!-- normal text -->
<div class="normal">
</div>
<!-- option for html -->
<pre><code class="language-html" data-text="" style="display:none">
</code></pre>
<!-- option for css -->
<pre><code class="language-css" data-text="" style="display:none">
</code></pre>
<!-- / BRIEF -->
<!-- =========== NOTES (button toggle) -->
<div class="wcon">
<!-- button -->
<details>
<summary role="term" aria-details="pure-css">notes</summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content">
<!-- html -->
<pre><code class="language-html" data-text="">
</code></pre>
<!-- css -->
<pre><code class="language-css" data-text="">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt" data-text="this is optional text (data attr based written inside HTML tag)"></div>
<div class="txtpl"></div>
</div>
<!-- / content -->
</div>
<!-- / NOTES -->
<!-- ======================== POUT ======================== -->
<!-- =========== TITLE (.file in head css allows pseudo element placement of character around title) -->
<div class="file_sp">
<div class="file ancht" id="pout">
POUT<br />
(Product Sold Out)
</div>
</div>
<!-- / TITLE -->
<!-- =========== BRIEF -->
<!-- normal text -->
<div class="normal">
</div>
<!-- option for html -->
<pre><code class="language-html" data-text="" style="display:none">
</code></pre>
<!-- option for css -->
<pre><code class="language-css" data-text="" style="display:none">
</code></pre>
<!-- / BRIEF -->
<!-- =========== NOTES (button toggle) -->
<div class="wcon">
<!-- button -->
<details>
<summary role="term" aria-details="pure-css">notes</summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content">
<!-- html -->
<pre><code class="language-html" data-text="">
</code></pre>
<!-- css -->
<pre><code class="language-css" data-text="">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt" data-text="this is optional text (data attr based written inside HTML tag)"></div>
<div class="txtpl"></div>
</div>
<!-- / content -->
</div>
<!-- / NOTES -->
<!-- ======================== PPRS ======================== -->
<!-- =========== TITLE (.file in head css allows pseudo element placement of character around title) -->
<div class="file_sp">
<div class="file ancht" id="pprs">
PPRS<br />
(PayPal Express Checkout Return Screen)
</div>
</div>
<!-- / TITLE -->
<!-- =========== BRIEF -->
<!-- normal text -->
<div class="normal">
</div>
<!-- option for html -->
<pre><code class="language-html" data-text="" style="display:none">
</code></pre>
<!-- option for css -->
<pre><code class="language-css" data-text="" style="display:none">
</code></pre>
<!-- / BRIEF -->
<!-- =========== NOTES (button toggle) -->
<div class="wcon">
<!-- button -->
<details>
<summary role="term" aria-details="pure-css">notes</summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content">
<!-- html -->
<pre><code class="language-html" data-text="">
</code></pre>
<!-- css -->
<pre><code class="language-css" data-text="">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt" data-text="this is optional text (data attr based written inside HTML tag)"></div>
<div class="txtpl"></div>
</div>
<!-- / content -->
</div>
<!-- / NOTES -->
<!-- ======================== PROD ======================== -->
<!-- =========== TITLE (.file in head css allows pseudo element placement of character around title) -->
<div class="file_sp">
<div class="file ancht" id="prod">
PROD<br />
(Product Display)
</div>
</div>
<!-- / TITLE -->
<!-- =========== BRIEF -->
<!-- normal text -->
<div class="normal">
</div>
<!-- option for html -->
<pre><code class="language-html pseubr_b" data-text="" style="display:non">
<body id="js-PROD" ..>
confirmed
ERROR >
none
</code></pre>
<!-- option for css -->
<pre><code class="language-css" data-text="" style="display:none">
</code></pre>
<!-- / BRIEF -->
<!-- =========== NOTES (button toggle) -->
<div class="wcon">
<!-- button -->
<details>
<summary role="term" aria-details="pure-css">notes</summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content">
<!-- html -->
<pre><code class="language-html" data-text="">
</code></pre>
<!-- css -->
<pre><code class="language-css" data-text="">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt" data-text="this is optional text (data attr based written inside HTML tag)"></div>
<div class="txtpl"></div>
</div>
<!-- / content -->
</div>
<!-- / NOTES -->
<!-- ======================== PRPO ======================== -->
<!-- =========== TITLE (.file in head css allows pseudo element placement of character around title) -->
<div class="file_sp">
<div class="file ancht" id="prpo">
PRPO<br />
(Privacy Policy)
</div>
</div>
<!-- / TITLE -->
<!-- =========== BRIEF -->
<!-- normal text -->
<div class="normal">
</div>
<!-- option for html -->
<pre><code class="language-html" data-text="" style="display:none">
</code></pre>
<!-- option for css -->
<pre><code class="language-css" data-text="" style="display:none">
</code></pre>
<!-- / BRIEF -->
<!-- =========== NOTES (button toggle) -->
<div class="wcon">
<!-- button -->
<details>
<summary role="term" aria-details="pure-css">notes</summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content">
<!-- html -->
<pre><code class="language-html" data-text="">
</code></pre>
<!-- css -->
<pre><code class="language-css" data-text="">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt" data-text="this is optional text (data attr based written inside HTML tag)"></div>
<div class="txtpl"></div>
</div>
<!-- / content -->
</div>
<!-- / NOTES -->
<!-- ======================== RGFT ======================== -->
<!-- =========== TITLE (.file in head css allows pseudo element placement of character around title) -->
<div class="file_sp">
<div class="file ancht" id="rgft">
RGFT<br />
(Redeem Gift Certificate)
</div>
</div>
<!-- / TITLE -->
<!-- =========== BRIEF -->
<!-- normal text -->
<div class="normal">
</div>
<!-- option for html -->
<pre><code class="language-html" data-text="" style="display:none">
</code></pre>
<!-- option for css -->
<pre><code class="language-css" data-text="" style="display:none">
</code></pre>
<!-- / BRIEF -->
<!-- =========== NOTES (button toggle) -->
<div class="wcon">
<!-- button -->
<details>
<summary role="term" aria-details="pure-css">notes</summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content">
<!-- html -->
<pre><code class="language-html" data-text="">
</code></pre>
<!-- css -->
<pre><code class="language-css" data-text="">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt" data-text="this is optional text (data attr based written inside HTML tag)"></div>
<div class="txtpl"></div>
</div>
<!-- / content -->
</div>
<!-- / NOTES -->
<!-- ======================== SARP ======================== -->
<!-- =========== TITLE (.file in head css allows pseudo element placement of character around title) -->
<div class="file_sp">
<div class="file ancht" id="sarp">
SARP<br />
(Shipping And Return Policy)
</div>
</div>
<!-- / TITLE -->
<!-- =========== BRIEF -->
<!-- normal text -->
<div class="normal">
</div>
<!-- option for html -->
<pre><code class="language-html" data-text="" style="display:none">
</code></pre>
<!-- option for css -->
<pre><code class="language-css" data-text="" style="display:none">
</code></pre>
<!-- / BRIEF -->
<!-- =========== NOTES (button toggle) -->
<div class="wcon">
<!-- button -->
<details>
<summary role="term" aria-details="pure-css">notes</summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content">
<!-- html -->
<pre><code class="language-html" data-text="">
</code></pre>
<!-- css -->
<pre><code class="language-css" data-text="">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt" data-text="this is optional text (data attr based written inside HTML tag)"></div>
<div class="txtpl"></div>
</div>
<!-- / content -->
</div>
<!-- / NOTES -->
<!-- ======================== SERT ======================== -->
<!-- =========== TITLE (.file in head css allows pseudo element placement of character around title) -->
<div class="file_sp">
<div class="file ancht" id="sert">
SERT<br />
(Shipping Estimate Rates)
</div>
</div>
<!-- / TITLE -->
<!-- =========== BRIEF -->
<!-- normal text -->
<div class="normal">
</div>
<!-- option for html -->
<pre><code class="language-html" data-text="" style="display:none">
</code></pre>
<!-- option for css -->
<pre><code class="language-css" data-text="" style="display:none">
</code></pre>
<!-- / BRIEF -->
<!-- =========== NOTES (button toggle) -->
<div class="wcon">
<!-- button -->
<details>
<summary role="term" aria-details="pure-css">notes</summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content">
<!-- html -->
<pre><code class="language-html" data-text="">
</code></pre>
<!-- css -->
<pre><code class="language-css" data-text="">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt" data-text="this is optional text (data attr based written inside HTML tag)"></div>
<div class="txtpl"></div>
</div>
<!-- / content -->
</div>
<!-- / NOTES -->
<!-- ======================== SFNT ======================== -->
<!-- =========== TITLE (.file in head css allows pseudo element placement of character around title) -->
<div class="file_sp">
<div class="file ancht" id="sfnt">
SFNT<br />
(Storefront)
</div>
</div>
<!-- / TITLE -->
<!-- =========== BRIEF -->
<!-- normal text -->
<div class="normal">
</div>
<!-- option for html -->
<pre><code class="language-html pseubr_b" data-text="" style="display:non">
<body id="js-SFNT" ..>
confirmed
ERROR >
none
</code></pre>
<!-- option for css -->
<pre><code class="language-css" data-text="" style="display:none">
</code></pre>
<!-- / BRIEF -->
<!-- =========== NOTES (button toggle) -->
<div class="wcon">
<!-- button -->
<details>
<summary role="term" aria-details="pure-css">notes</summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content">
<!-- html -->
<pre><code class="language-html" data-text="">
</code></pre>
<!-- css -->
<pre><code class="language-css" data-text="">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt" data-text="this is optional text (data attr based written inside HTML tag)"></div>
<div class="txtpl"></div>
</div>
<!-- / content -->
</div>
<!-- / NOTES -->
<!-- ======================== SHIPMENT_PICKLIST ======================== -->
<!-- =========== TITLE (.file in head css allows pseudo element placement of character around title) -->
<div class="file_sp">
<div class="file ancht" id="shipm">
SHIPMENT_PICKLIST<br />
(Shipment Picklist)
</div>
</div>
<!-- / TITLE -->
<!-- =========== BRIEF -->
<!-- normal text -->
<div class="normal">
</div>
<!-- option for html -->
<pre><code class="language-html" data-text="" style="display:none">
</code></pre>
<!-- option for css -->
<pre><code class="language-css" data-text="" style="display:none">
</code></pre>
<!-- / BRIEF -->
<!-- =========== NOTES (button toggle) -->
<div class="wcon">
<!-- button -->
<details>
<summary role="term" aria-details="pure-css">notes</summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content">
<!-- html -->
<pre><code class="language-html" data-text="">
</code></pre>
<!-- css -->
<pre><code class="language-css" data-text="">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt" data-text="this is optional text (data attr based written inside HTML tag)"></div>
<div class="txtpl"></div>
</div>
<!-- / content -->
</div>
<!-- / NOTES -->
<!-- ======================== SMAP ======================== -->
<!-- =========== TITLE (.file in head css allows pseudo element placement of character around title) -->
<div class="file_sp">
<div class="file ancht" id="smap">
SMAP<br />
(Site Map)
</div>
</div>
<!-- / TITLE -->
<!-- =========== BRIEF -->
<!-- normal text -->
<div class="normal">
</div>
<!-- option for html -->
<pre><code class="language-html" data-text="" style="display:none">
</code></pre>
<!-- option for css -->
<pre><code class="language-css" data-text="" style="display:none">
</code></pre>
<!-- / BRIEF -->
<!-- =========== NOTES (button toggle) -->
<div class="wcon">
<!-- button -->
<details>
<summary role="term" aria-details="pure-css">notes</summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content">
<!-- html -->
<pre><code class="language-html" data-text="">
</code></pre>
<!-- css -->
<pre><code class="language-css" data-text="">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt" data-text="this is optional text (data attr based written inside HTML tag)"></div>
<div class="txtpl"></div>
</div>
<!-- / content -->
</div>
<!-- / NOTES -->
<!-- ======================== SRCH ======================== -->
<!-- =========== TITLE (.file in head css allows pseudo element placement of character around title) -->
<div class="file_sp">
<div class="file ancht" id="srch">
SRCH<br />
(Search)
</div>
</div>
<!-- / TITLE -->
<!-- =========== BRIEF -->
<!-- normal text -->
<div class="normal">
</div>
<!-- option for html -->
<pre><code class="language-html" data-text="" style="display:none">
</code></pre>
<!-- option for css -->
<pre><code class="language-css" data-text="" style="display:none">
</code></pre>
<!-- / BRIEF -->
<!-- =========== NOTES (button toggle) -->
<div class="wcon">
<!-- button -->
<details>
<summary role="term" aria-details="pure-css">notes</summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content">
<!-- html -->
<pre><code class="language-html" data-text="">
</code></pre>
<!-- css -->
<pre><code class="language-css" data-text="">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt" data-text="this is optional text (data attr based written inside HTML tag)"></div>
<div class="txtpl"></div>
</div>
<!-- / content -->
</div>
<!-- / NOTES -->
<!-- ======================== TOSU ======================== -->
<!-- =========== TITLE (.file in head css allows pseudo element placement of character around title) -->
<div class="file_sp">
<div class="file ancht" id="tosu">
TOSU<br />
(Terms Of Site Use)
</div>
</div>
<!-- / TITLE -->
<!-- =========== BRIEF -->
<!-- normal text -->
<div class="normal">
</div>
<!-- option for html -->
<pre><code class="language-html" data-text="" style="display:none">
</code></pre>
<!-- option for css -->
<pre><code class="language-css" data-text="" style="display:none">
</code></pre>
<!-- / BRIEF -->
<!-- =========== NOTES (button toggle) -->
<div class="wcon">
<!-- button -->
<details>
<summary role="term" aria-details="pure-css">notes</summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content">
<!-- html -->
<pre><code class="language-html" data-text="">
</code></pre>
<!-- css -->
<pre><code class="language-css" data-text="">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt" data-text="this is optional text (data attr based written inside HTML tag)"></div>
<div class="txtpl"></div>
</div>
<!-- / content -->
</div>
<!-- / NOTES -->
<!-- ======================== UATM ======================== -->
<!-- =========== TITLE (.file in head css allows pseudo element placement of character around title) -->
<div class="file_sp">
<div class="file ancht" id="uatm">
UATM<br />
(Upsell: Missing Product Attributes (Multiple))
</div>
</div>
<!-- / TITLE -->
<!-- =========== BRIEF -->
<!-- normal text -->
<div class="normal">
</div>
<!-- option for html -->
<pre><code class="language-html" data-text="" style="display:none">
</code></pre>
<!-- option for css -->
<pre><code class="language-css" data-text="" style="display:none">
</code></pre>
<!-- / BRIEF -->
<!-- =========== NOTES (button toggle) -->
<div class="wcon">
<!-- button -->
<details>
<summary role="term" aria-details="pure-css">notes</summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content">
<!-- html -->
<pre><code class="language-html" data-text="">
</code></pre>
<!-- css -->
<pre><code class="language-css" data-text="">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt" data-text="this is optional text (data attr based written inside HTML tag)"></div>
<div class="txtpl"></div>
</div>
<!-- / content -->
</div>
<!-- / NOTES -->
<!-- ======================== UATR ======================== -->
<!-- =========== TITLE (.file in head css allows pseudo element placement of character around title) -->
<div class="file_sp">
<div class="file ancht" id="uatr">
UATR<br />
(Upsell: Missing Product Attributes (Single))
</div>
</div>
<!-- / TITLE -->
<!-- =========== BRIEF -->
<!-- normal text -->
<div class="normal">
</div>
<!-- option for html -->
<pre><code class="language-html" data-text="" style="display:none">
</code></pre>
<!-- option for css -->
<pre><code class="language-css" data-text="" style="display:none">
</code></pre>
<!-- / BRIEF -->
<!-- =========== NOTES (button toggle) -->
<div class="wcon">
<!-- button -->
<details>
<summary role="term" aria-details="pure-css">notes</summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content">
<!-- html -->
<pre><code class="language-html" data-text="">
</code></pre>
<!-- css -->
<pre><code class="language-css" data-text="">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt" data-text="this is optional text (data attr based written inside HTML tag)"></div>
<div class="txtpl"></div>
</div>
<!-- / content -->
</div>
<!-- / NOTES -->
<!-- ======================== WISH ======================== -->
<!-- =========== TITLE (.file in head css allows pseudo element placement of character around title) -->
<div class="file_sp">
<div class="file ancht" id="wish">
WISH<br />
(Wish List)
</div>
</div>
<!-- / TITLE -->
<!-- =========== BRIEF -->
<!-- normal text -->
<div class="normal">
</div>
<!-- option for html -->
<pre><code class="language-html" data-text="" style="display:none">
</code></pre>
<!-- option for css -->
<pre><code class="language-css" data-text="" style="display:none">
</code></pre>
<!-- / BRIEF -->
<!-- =========== NOTES (button toggle) -->
<div class="wcon">
<!-- button -->
<details>
<summary role="term" aria-details="pure-css">notes</summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content">
<!-- html -->
<pre><code class="language-html" data-text="">
</code></pre>
<!-- css -->
<pre><code class="language-css" data-text="">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt" data-text="this is optional text (data attr based written inside HTML tag)"></div>
<div class="txtpl"></div>
</div>
<!-- / content -->
</div>
<!-- / NOTES -->
<!-- ======================== WLAD ======================== -->
<!-- =========== TITLE (.file in head css allows pseudo element placement of character around title) -->
<div class="file_sp">
<div class="file ancht" id="wlad">
WLAD<br />
(Add A Wish List)
</div>
</div>
<!-- / TITLE -->
<!-- =========== BRIEF -->
<!-- normal text -->
<div class="normal">
</div>
<!-- option for html -->
<pre><code class="language-html" data-text="" style="display:none">
</code></pre>
<!-- option for css -->
<pre><code class="language-css" data-text="" style="display:none">
</code></pre>
<!-- / BRIEF -->
<!-- =========== NOTES (button toggle) -->
<div class="wcon">
<!-- button -->
<details>
<summary role="term" aria-details="pure-css">notes</summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content">
<!-- html -->
<pre><code class="language-html" data-text="">
</code></pre>
<!-- css -->
<pre><code class="language-css" data-text="">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt" data-text="this is optional text (data attr based written inside HTML tag)"></div>
<div class="txtpl"></div>
</div>
<!-- / content -->
</div>
<!-- / NOTES -->
<!-- ======================== WLED ======================== -->
<!-- =========== TITLE (.file in head css allows pseudo element placement of character around title) -->
<div class="file_sp">
<div class="file ancht" id="wled">
WLED<br />
(Edit Wish List)
</div>
</div>
<!-- / TITLE -->
<!-- =========== BRIEF -->
<!-- normal text -->
<div class="normal">
</div>
<!-- option for html -->
<pre><code class="language-html" data-text="" style="display:none">
</code></pre>
<!-- option for css -->
<pre><code class="language-css" data-text="" style="display:none">
</code></pre>
<!-- / BRIEF -->
<!-- =========== NOTES (button toggle) -->
<div class="wcon">
<!-- button -->
<details>
<summary role="term" aria-details="pure-css">notes</summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content">
<!-- html -->
<pre><code class="language-html" data-text="">
</code></pre>
<!-- css -->
<pre><code class="language-css" data-text="">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt" data-text="this is optional text (data attr based written inside HTML tag)"></div>
<div class="txtpl"></div>
</div>
<!-- / content -->
</div>
<!-- / NOTES -->
<!-- ======================== WLGN ======================== -->
<!-- =========== TITLE (.file in head css allows pseudo element placement of character around title) -->
<div class="file_sp">
<div class="file ancht" id="wlgn">
WLGN<br />
(Wish List: Customer Login)
</div>
</div>
<!-- / TITLE -->
<!-- =========== BRIEF -->
<!-- normal text -->
<div class="normal">
</div>
<!-- option for html -->
<pre><code class="language-html" data-text="" style="display:none">
</code></pre>
<!-- option for css -->
<pre><code class="language-css" data-text="" style="display:none">
</code></pre>
<!-- / BRIEF -->
<!-- =========== NOTES (button toggle) -->
<div class="wcon">
<!-- button -->
<details>
<summary role="term" aria-details="pure-css">notes</summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content">
<!-- html -->
<pre><code class="language-html" data-text="">
</code></pre>
<!-- css -->
<pre><code class="language-css" data-text="">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt" data-text="this is optional text (data attr based written inside HTML tag)"></div>
<div class="txtpl"></div>
</div>
<!-- / content -->
</div>
<!-- / NOTES -->
<!-- ======================== WLST ======================== -->
<!-- =========== TITLE (.file in head css allows pseudo element placement of character around title) -->
<div class="file_sp">
<div class="file ancht" id="wlst">
WLST<br />
(Wish Lists)
</div>
</div>
<!-- / TITLE -->
<!-- =========== BRIEF -->
<!-- normal text -->
<div class="normal">
</div>
<!-- option for html -->
<pre><code class="language-html" data-text="" style="display:none">
</code></pre>
<!-- option for css -->
<pre><code class="language-css" data-text="" style="display:none">
</code></pre>
<!-- / BRIEF -->
<!-- =========== NOTES (button toggle) -->
<div class="wcon">
<!-- button -->
<details>
<summary role="term" aria-details="pure-css">notes</summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content">
<!-- html -->
<pre><code class="language-html" data-text="">
</code></pre>
<!-- css -->
<pre><code class="language-css" data-text="">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt" data-text="this is optional text (data attr based written inside HTML tag)"></div>
<div class="txtpl"></div>
</div>
<!-- / content -->
</div>
<!-- / NOTES -->
<!-- ======================== WPCK ======================== -->
<!-- =========== TITLE (.file in head css allows pseudo element placement of character around title) -->
<div class="file_sp">
<div class="file ancht" id="wpck">
WPCK<br />
(Choose Wish List)
</div>
</div>
<!-- / TITLE -->
<!-- =========== BRIEF -->
<!-- normal text -->
<div class="normal">
</div>
<!-- option for html -->
<pre><code class="language-html" data-text="" style="display:none">
</code></pre>
<!-- option for css -->
<pre><code class="language-css" data-text="" style="display:none">
</code></pre>
<!-- / BRIEF -->
<!-- =========== NOTES (button toggle) -->
<div class="wcon">
<!-- button -->
<details>
<summary role="term" aria-details="pure-css">notes</summary>
</details>
<!-- content for rendering code (use classes in code tag > pseubr_a to create/remove space after an element, pseubr_b before an element) -->
<div role="definition" id="pure-css" class="content">
<!-- html -->
<pre><code class="language-html" data-text="">
</code></pre>
<!-- css -->
<pre><code class="language-css" data-text="">
</code></pre>
<!-- option for pseudo element based text and/or space rendering .. divtxt > in html as data-text=, then head css content: attr(data-text) .. or .. txtpl > in head css using content: '' -->
<div class="divtxt" data-text="this is optional text (data attr based written inside HTML tag)"></div>
<div class="txtpl"></div>
</div>
<!-- / content -->
</div>
<!-- / NOTES -->
</main>
<!-- ======================== FOOTER ======================== -->
<!-- =========== FONT AWESOME ICONS -->
<div class="dnfooter" data-text="pionezero labs">
<div class="star"></div>
<div class="star2"></div>
<div class="star3"></div>
<div class="star4"></div>
<div class="star5"></div>
<div class="star6"></div>
<div class="star7"></div>
<div class="star8"></div>
<div class="star9"></div>
<div class="star10"></div>
<div class="starship"></div>
<div class="comet"></div>
<div class="upere"><a href="#upere"></a></div>
</div>
<!-- =========== HOME PAGE -->
<div>
<a class="ftext" href="https://pionezero.com" data-text="pionezero labs"></a>
</div>
</body>
</html>
!
