/* Dan's accessibility and best practice checkup styles! */
/* this style sheet is appended dynamically on DEV server only */
/* works via jQuery/javascript in site.core.js to highlight a few common issues */
/* Dan Meade 11.08.19 */
/* rev 12.10.19 */


/* clearly identify DEV and LocalHost environment  */
.server-banner {background:red; color:#fff; font-weight:bold; font-size:14px; padding:0.25em; text-align:center; }


/* We should always declare the language on each page, important for a11y and also search engine indexing and more */
html:not([lang])::before, html[lang=""]::before {
    background: orange; font-weight: bold; color: #000; font-family: Arial, Helvetica, sans-serif;
    display:block; text-align:center; clear:both; padding:0.25em; content: "a11y warning: page language not set!";}

/* Don't forget to add alt tags to images that are not purely decorative */
.img-warning { margin:0.25em; padding:0.25em; background:red; color:#fff; font-weight:bold; content: "missing or empty ALT tag";}
/* ignore google third party images we can't control */
img[src*="google"] {border: 0;}


/* If using canvas, make sure to add appropriate role/ARIA tags */
canvas:not([role]), canvas:not([aria-label]),
canvas[role=""], canvas[aria-label=""] {border: 7px dashed orange;}