From a0e3a0231372613d877c5d5057f0952edd70d956 Mon Sep 17 00:00:00 2001
From: Laurence Lewis <laurence.r.lewis@gmail.com>
Date: Wed, 11 Oct 2017 12:42:52 +1000
Subject: [PATCH 01/18] Testing only

Testing changes before committing for comment
---
 revenge.css | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/revenge.css b/revenge.css
index 67170d5..cf857b0 100644
--- a/revenge.css
+++ b/revenge.css
@@ -240,7 +240,7 @@ embed::after, marquee::after, nobr::after, noembed::after, wbr::after {
 ----------------------------------------------------------------------
 */
 
-*:empty:not(script):not(input):not(br):not(img):not(link):not(hr):not(embed):not(area):not(command):not(col):not(param):not(source):not(track):not(wbr):not(base):not(keygen)::after {
+*:empty:not(script):not(input):not(br):not(img):not(link):not(hr):not(embed):not(area):not(command):not(col):not(param):not(source):not(track):not(wbr):not(base):not(keygen):not(span.fa)::after {
 	content: 'This element is empty. Why?' !important;
 }
 
@@ -260,14 +260,25 @@ aside > article:first-child::after,
 aside > section:first-child::after {
 	content: 'Sectioning elems are not arbitrary wrappers. Use <div>s here.' !important;
 }
+/****
+Removed as <footer> conveys contentInfo natively and
+****/
 
 body > header:not([role="banner"])::after, body > div > header:not([role="banner"])::after {
 	content: 'Use role="banner" on this header element.' !important;
 }
-
+/*
 body > footer:not([role="contentinfo"])::after, body > div > footer:not([role="contentinfo"])::after {
 	content: 'Use role="contentinfo" on this footer element.' !important;
 }
+*/
+/****
+Removed as <footer> conveys contentInfo natively and updated if using non native footer element using either class footer or id footer add role contentInfo
+****/
+body > footer#footer:not([role="contentinfo"])::after, body > div > footer.footer:not([role="contentinfo"])::after {
+	content: 'Use role="contentinfo" on this footer element or use native HTML5 <footer>.' !important;
+}
+
 
 section [role="banner"]::after, section [role="contentinfo"]::after, 
 article [role="banner"]::after, article [role="contentinfo"]::after, 

From d6b83c9ff6f5538cde09b2778f8a0bc1bed0c0f7 Mon Sep 17 00:00:00 2001
From: Laurence Lewis <laurence.r.lewis@gmail.com>
Date: Wed, 11 Oct 2017 12:59:41 +1000
Subject: [PATCH 02/18] Still testing

---
 revenge.css | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/revenge.css b/revenge.css
index cf857b0..4e2bdfd 100644
--- a/revenge.css
+++ b/revenge.css
@@ -260,25 +260,26 @@ aside > article:first-child::after,
 aside > section:first-child::after {
 	content: 'Sectioning elems are not arbitrary wrappers. Use <div>s here.' !important;
 }
-/****
-Removed as <footer> conveys contentInfo natively and
-****/
 
+/*
 body > header:not([role="banner"])::after, body > div > header:not([role="banner"])::after {
 	content: 'Use role="banner" on this header element.' !important;
 }
+*/
 /*
 body > footer:not([role="contentinfo"])::after, body > div > footer:not([role="contentinfo"])::after {
 	content: 'Use role="contentinfo" on this footer element.' !important;
 }
 */
 /****
-Removed as <footer> conveys contentInfo natively and updated if using non native footer element using either class footer or id footer add role contentInfo
+Removed as <footer> conveys contentInfo natively and updated if using non native footer element using either class footer or id footer add role contentInfo. Same for header
 ****/
 body > footer#footer:not([role="contentinfo"])::after, body > div > footer.footer:not([role="contentinfo"])::after {
 	content: 'Use role="contentinfo" on this footer element or use native HTML5 <footer>.' !important;
 }
-
+body > div#header:not([role="banner"])::after, body > div.header:not([role="banner"])::after, body > div.banner:not([role="banner"])::after, body > div#banner:not([role="banner"])::after {
+	content: 'Use role="banner" on this header element or use native <header>.' !important;
+}
 
 section [role="banner"]::after, section [role="contentinfo"]::after, 
 article [role="banner"]::after, article [role="contentinfo"]::after, 

From b56392bad40352e922319fad0c54d2cee2294a39 Mon Sep 17 00:00:00 2001
From: Laurence Lewis <laurence.r.lewis@gmail.com>
Date: Wed, 11 Oct 2017 13:06:14 +1000
Subject: [PATCH 03/18] Still having fun testing things

---
 revenge.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/revenge.css b/revenge.css
index 4e2bdfd..0b9aa2d 100644
--- a/revenge.css
+++ b/revenge.css
@@ -277,7 +277,7 @@ Removed as <footer> conveys contentInfo natively and updated if using non native
 body > footer#footer:not([role="contentinfo"])::after, body > div > footer.footer:not([role="contentinfo"])::after {
 	content: 'Use role="contentinfo" on this footer element or use native HTML5 <footer>.' !important;
 }
-body > div#header:not([role="banner"])::after, body > div.header:not([role="banner"])::after, body > div.banner:not([role="banner"])::after, body > div#banner:not([role="banner"])::after {
+body > header#header:not([role="banner"])::after, body > header.header:not([role="banner"])::after, body > div.banner:not([role="banner"])::after, body > div#banner:not([role="banner"])::after {
 	content: 'Use role="banner" on this header element or use native <header>.' !important;
 }
 

From f323711949825002eb4a37083203cdcb455d0f90 Mon Sep 17 00:00:00 2001
From: Laurence Lewis <laurence.r.lewis@gmail.com>
Date: Wed, 11 Oct 2017 13:08:15 +1000
Subject: [PATCH 04/18] And on we go

---
 revenge.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/revenge.css b/revenge.css
index 0b9aa2d..d365164 100644
--- a/revenge.css
+++ b/revenge.css
@@ -274,10 +274,10 @@ body > footer:not([role="contentinfo"])::after, body > div > footer:not([role="c
 /****
 Removed as <footer> conveys contentInfo natively and updated if using non native footer element using either class footer or id footer add role contentInfo. Same for header
 ****/
-body > footer#footer:not([role="contentinfo"])::after, body > div > footer.footer:not([role="contentinfo"])::after {
+body > div#footer:not([role="contentinfo"])::after, body > div.footer:not([role="contentinfo"])::after {
 	content: 'Use role="contentinfo" on this footer element or use native HTML5 <footer>.' !important;
 }
-body > header#header:not([role="banner"])::after, body > header.header:not([role="banner"])::after, body > div.banner:not([role="banner"])::after, body > div#banner:not([role="banner"])::after {
+body > div#header:not([role="banner"])::after, body > div.header:not([role="banner"])::after, body > div.banner:not([role="banner"])::after, body > div#banner:not([role="banner"])::after {
 	content: 'Use role="banner" on this header element or use native <header>.' !important;
 }
 

From fa774e1b3347f8439eec118b5f1a10375c8692b8 Mon Sep 17 00:00:00 2001
From: Laurence Lewis <laurence.r.lewis@gmail.com>
Date: Wed, 11 Oct 2017 13:25:07 +1000
Subject: [PATCH 05/18] Targeting FontAwesome icons

---
 revenge.css | 31 +++++++++++++++++--------------
 1 file changed, 17 insertions(+), 14 deletions(-)

diff --git a/revenge.css b/revenge.css
index d365164..88266ed 100644
--- a/revenge.css
+++ b/revenge.css
@@ -239,10 +239,21 @@ embed::after, marquee::after, nobr::after, noembed::after, wbr::after {
 * Empty elements
 ----------------------------------------------------------------------
 */
-
-*:empty:not(script):not(input):not(br):not(img):not(link):not(hr):not(embed):not(area):not(command):not(col):not(param):not(source):not(track):not(wbr):not(base):not(keygen):not(span.fa)::after {
+/***
+Added not:span.fa and i.fa to exclude icons hooks.
+***/
+*:empty:not(script):not(input):not(br):not(img):not(link):not(hr):not(embed):not(area):not(command):not(col):not(param):not(source):not(track):not(wbr):not(base):not(keygen):not(span.fa):not(i.fa)::after {
 	content: 'This element is empty. Why?' !important;
 }
+/**
+Icons used for pure decoration or visual styling
+
+If you're using an icon to add some extra decoration or branding, it does not need to be announced to users as they are navigating your site or app aurally. Additionally, if you're using an icon to visually re-emphasize or add styling to content already present in your HTML, it does not need to be repeated to an assistive technology-using user. You can make sure this is not read by adding the aria-hidden="true" to your Font Awesome markup.
+http://fontawesome.io/accessibility/
+****************/
+.fa:not([aria-hidden="true"])::after {
+    content: 'Use aria-hidden="true on icons.' !important;
+}
 
 /**
 * Sectioning elements, headers and footers
@@ -261,26 +272,18 @@ aside > section:first-child::after {
 	content: 'Sectioning elems are not arbitrary wrappers. Use <div>s here.' !important;
 }
 
-/*
-body > header:not([role="banner"])::after, body > div > header:not([role="banner"])::after {
-	content: 'Use role="banner" on this header element.' !important;
-}
-*/
-/*
-body > footer:not([role="contentinfo"])::after, body > div > footer:not([role="contentinfo"])::after {
-	content: 'Use role="contentinfo" on this footer element.' !important;
-}
-*/
+
 /****
-Removed as <footer> conveys contentInfo natively and updated if using non native footer element using either class footer or id footer add role contentInfo. Same for header
+Removed as <footer> requires role=contentInfo and <header> requires role=banner as these are already conveyed natively. W3C validator generates a warning if used.
 ****/
+/*
 body > div#footer:not([role="contentinfo"])::after, body > div.footer:not([role="contentinfo"])::after {
 	content: 'Use role="contentinfo" on this footer element or use native HTML5 <footer>.' !important;
 }
 body > div#header:not([role="banner"])::after, body > div.header:not([role="banner"])::after, body > div.banner:not([role="banner"])::after, body > div#banner:not([role="banner"])::after {
 	content: 'Use role="banner" on this header element or use native <header>.' !important;
 }
-
+*/
 section [role="banner"]::after, section [role="contentinfo"]::after, 
 article [role="banner"]::after, article [role="contentinfo"]::after, 
 aside [role="banner"]::after, aside [role="contentinfo"]::after {

From d974454b5353ce8722ef6de0ad360f29118e175f Mon Sep 17 00:00:00 2001
From: Laurence Lewis <laurence.r.lewis@gmail.com>
Date: Wed, 11 Oct 2017 13:30:50 +1000
Subject: [PATCH 06/18] Getting the FA bit right

---
 revenge.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/revenge.css b/revenge.css
index 88266ed..ebb0232 100644
--- a/revenge.css
+++ b/revenge.css
@@ -251,7 +251,7 @@ Icons used for pure decoration or visual styling
 If you're using an icon to add some extra decoration or branding, it does not need to be announced to users as they are navigating your site or app aurally. Additionally, if you're using an icon to visually re-emphasize or add styling to content already present in your HTML, it does not need to be repeated to an assistive technology-using user. You can make sure this is not read by adding the aria-hidden="true" to your Font Awesome markup.
 http://fontawesome.io/accessibility/
 ****************/
-.fa:not([aria-hidden="true"])::after {
+:not(.fa[aria-hidden="true"])::after {
     content: 'Use aria-hidden="true on icons.' !important;
 }
 

From a6ba63e45c611afdc10bae3944bdec1fd7401753 Mon Sep 17 00:00:00 2001
From: Laurence Lewis <laurence.r.lewis@gmail.com>
Date: Wed, 11 Oct 2017 13:37:36 +1000
Subject: [PATCH 07/18] Still learning how to compile :not correctly

---
 revenge.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/revenge.css b/revenge.css
index ebb0232..4b4fcd2 100644
--- a/revenge.css
+++ b/revenge.css
@@ -251,7 +251,7 @@ Icons used for pure decoration or visual styling
 If you're using an icon to add some extra decoration or branding, it does not need to be announced to users as they are navigating your site or app aurally. Additionally, if you're using an icon to visually re-emphasize or add styling to content already present in your HTML, it does not need to be repeated to an assistive technology-using user. You can make sure this is not read by adding the aria-hidden="true" to your Font Awesome markup.
 http://fontawesome.io/accessibility/
 ****************/
-:not(.fa[aria-hidden="true"])::after {
+:not(.fa *[aria-hidden="true"])::after {
     content: 'Use aria-hidden="true on icons.' !important;
 }
 

From 2dec4cc601e6cbe8e749e2a04b6e4271e982c826 Mon Sep 17 00:00:00 2001
From: Laurence Lewis <laurence.r.lewis@gmail.com>
Date: Wed, 11 Oct 2017 13:39:19 +1000
Subject: [PATCH 08/18] Latest change

.fa:not([aria-hidden="true"])::after {
    content: 'Use aria-hidden="true on icons.' !important;
}
---
 revenge.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/revenge.css b/revenge.css
index 4b4fcd2..88266ed 100644
--- a/revenge.css
+++ b/revenge.css
@@ -251,7 +251,7 @@ Icons used for pure decoration or visual styling
 If you're using an icon to add some extra decoration or branding, it does not need to be announced to users as they are navigating your site or app aurally. Additionally, if you're using an icon to visually re-emphasize or add styling to content already present in your HTML, it does not need to be repeated to an assistive technology-using user. You can make sure this is not read by adding the aria-hidden="true" to your Font Awesome markup.
 http://fontawesome.io/accessibility/
 ****************/
-:not(.fa *[aria-hidden="true"])::after {
+.fa:not([aria-hidden="true"])::after {
     content: 'Use aria-hidden="true on icons.' !important;
 }
 

From 6e00e911ce4ec56140fc17522a8ce5e289604fcd Mon Sep 17 00:00:00 2001
From: Laurence Lewis <laurence.r.lewis@gmail.com>
Date: Wed, 11 Oct 2017 13:42:03 +1000
Subject: [PATCH 09/18] Trial and error

:not(i.fa[aria-hidden="true"])::after, :not(span.fa[aria-hidden="true"])::after {
    content: 'Use aria-hidden="true on icons.' !important;
}
---
 revenge.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/revenge.css b/revenge.css
index 88266ed..0d0a84e 100644
--- a/revenge.css
+++ b/revenge.css
@@ -251,7 +251,7 @@ Icons used for pure decoration or visual styling
 If you're using an icon to add some extra decoration or branding, it does not need to be announced to users as they are navigating your site or app aurally. Additionally, if you're using an icon to visually re-emphasize or add styling to content already present in your HTML, it does not need to be repeated to an assistive technology-using user. You can make sure this is not read by adding the aria-hidden="true" to your Font Awesome markup.
 http://fontawesome.io/accessibility/
 ****************/
-.fa:not([aria-hidden="true"])::after {
+:not(i.fa[aria-hidden="true"])::after, :not(span.fa[aria-hidden="true"])::after {
     content: 'Use aria-hidden="true on icons.' !important;
 }
 

From ffcb5194c5a4baca3c43723461682b34a974461b Mon Sep 17 00:00:00 2001
From: Laurence Lewis <laurence.r.lewis@gmail.com>
Date: Wed, 11 Oct 2017 13:59:41 +1000
Subject: [PATCH 10/18] Added and removed the following

Added not:span.fa and i.fa to exclude icons hooks on empty elements.
Added i.fa:not([aria-hidden="true"])::after, span.fa:not([aria-hidden="true"])::after {
    content: 'Use aria-hidden="true on icons.' !important;
} to make sure aria-hidden is included on icons


/****
Removed as <footer> requires role=contentInfo and <header> requires role=banner as these are already conveyed natively. W3C validator generates a warning if used.
****/
/*
body > div#footer:not([role="contentinfo"])::after, body > div.footer:not([role="contentinfo"])::after {
	content: 'Use role="contentinfo" on this footer element or use native HTML5 <footer>.' !important;
}
body > div#header:not([role="banner"])::after, body > div.header:not([role="banner"])::after, body > div.banner:not([role="banner"])::after, body > div#banner:not([role="banner"])::after {
	content: 'Use role="banner" on this header element or use native <header>.' !important;
}
*/

/***
if div has class or ID of header but is not a native element include role. Considering if .banner #banner should be included
*/
div#header:not([role="banner"])::after, div.header:not([role="banner"])::after {
	content: 'Use role="banner" on this header element or use native <header>.' !important;
}

These are just personal observations.
---
 revenge.css | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/revenge.css b/revenge.css
index 0d0a84e..2dbc3b3 100644
--- a/revenge.css
+++ b/revenge.css
@@ -251,7 +251,7 @@ Icons used for pure decoration or visual styling
 If you're using an icon to add some extra decoration or branding, it does not need to be announced to users as they are navigating your site or app aurally. Additionally, if you're using an icon to visually re-emphasize or add styling to content already present in your HTML, it does not need to be repeated to an assistive technology-using user. You can make sure this is not read by adding the aria-hidden="true" to your Font Awesome markup.
 http://fontawesome.io/accessibility/
 ****************/
-:not(i.fa[aria-hidden="true"])::after, :not(span.fa[aria-hidden="true"])::after {
+i.fa:not([aria-hidden="true"])::after, span.fa:not([aria-hidden="true"])::after {
     content: 'Use aria-hidden="true on icons.' !important;
 }
 
@@ -284,6 +284,15 @@ body > div#header:not([role="banner"])::after, body > div.header:not([role="bann
 	content: 'Use role="banner" on this header element or use native <header>.' !important;
 }
 */
+
+/***
+if div has class or ID of header. Considering if .banner #banner should be included
+*/
+div#header:not([role="banner"])::after, div.header:not([role="banner"])::after {
+	content: 'Use role="banner" on this header element or use native <header>.' !important;
+}
+
+
 section [role="banner"]::after, section [role="contentinfo"]::after, 
 article [role="banner"]::after, article [role="contentinfo"]::after, 
 aside [role="banner"]::after, aside [role="contentinfo"]::after {

From aeefe4722ce69b03250a4565fe7069aec2ee55ad Mon Sep 17 00:00:00 2001
From: Laurence Lewis <laurence.r.lewis@gmail.com>
Date: Wed, 11 Oct 2017 15:09:55 +1000
Subject: [PATCH 11/18] Added recognition for MathJax

---
 revenge.css | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/revenge.css b/revenge.css
index 2dbc3b3..856136e 100644
--- a/revenge.css
+++ b/revenge.css
@@ -231,9 +231,12 @@ button.disabled:not([disabled]):not([readonly])::after {
 acronym::after, applet::after, basefont::after, big::after, center::after, dir::after, 
 font::after, frame::after, frameset::after, isindex::after, listing::after, menu::after, multicol::after, 
 plaintext::after, strike::after, u::after, xmp::after, bgsound::after, blink::after, comment::after, 
-embed::after, marquee::after, nobr::after, noembed::after, wbr::after {
+embed::after, marquee::after, nobr::after, noembed::after, wbr::after, :not(span.MathJax .math) {
 	content: 'This element is deprecated, non-standard or obsolete.' !important;
 }
+span.MathJax .math::after {
+	content: 'This is a MathJax symbol.' !important;
+}
 
 /**
 * Empty elements

From 876c273d240c29a57bf4fecced8f3fb9218ab404 Mon Sep 17 00:00:00 2001
From: Laurence Lewis <laurence.r.lewis@gmail.com>
Date: Wed, 11 Oct 2017 15:14:49 +1000
Subject: [PATCH 12/18] Removing MathJax from obsolete or non-standard

---
 revenge.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/revenge.css b/revenge.css
index 856136e..d301b0c 100644
--- a/revenge.css
+++ b/revenge.css
@@ -231,7 +231,7 @@ button.disabled:not([disabled]):not([readonly])::after {
 acronym::after, applet::after, basefont::after, big::after, center::after, dir::after, 
 font::after, frame::after, frameset::after, isindex::after, listing::after, menu::after, multicol::after, 
 plaintext::after, strike::after, u::after, xmp::after, bgsound::after, blink::after, comment::after, 
-embed::after, marquee::after, nobr::after, noembed::after, wbr::after, :not(span.MathJax .math) {
+embed::after, marquee::after, nobr::after, noembed::after, wbr::after, .MathJax::after {
 	content: 'This element is deprecated, non-standard or obsolete.' !important;
 }
 span.MathJax .math::after {

From ec78cb08e5bcb1a0e3280d8a245123de08808736 Mon Sep 17 00:00:00 2001
From: Laurence Lewis <laurence.r.lewis@gmail.com>
Date: Wed, 11 Oct 2017 15:16:42 +1000
Subject: [PATCH 13/18] Test new changes

:not.MathJax::after {
	content: 'This element is deprecated, non-standard or obsolete.' !important;
}
span.MathJax .math::after {
	content: 'This is a MathJax symbol.' !important;
}
---
 revenge.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/revenge.css b/revenge.css
index d301b0c..dcb864d 100644
--- a/revenge.css
+++ b/revenge.css
@@ -231,7 +231,7 @@ button.disabled:not([disabled]):not([readonly])::after {
 acronym::after, applet::after, basefont::after, big::after, center::after, dir::after, 
 font::after, frame::after, frameset::after, isindex::after, listing::after, menu::after, multicol::after, 
 plaintext::after, strike::after, u::after, xmp::after, bgsound::after, blink::after, comment::after, 
-embed::after, marquee::after, nobr::after, noembed::after, wbr::after, .MathJax::after {
+embed::after, marquee::after, nobr::after, noembed::after, wbr::after, :not.MathJax::after {
 	content: 'This element is deprecated, non-standard or obsolete.' !important;
 }
 span.MathJax .math::after {

From 61f96c7f8d2bdb21b8b613f776c96c1278214de8 Mon Sep 17 00:00:00 2001
From: Laurence Lewis <laurence.r.lewis@gmail.com>
Date: Wed, 11 Oct 2017 15:19:00 +1000
Subject: [PATCH 14/18] Forgot to add ()

:not(.MathJax)::after {
	content: 'This element is deprecated, non-standard or obsolete.' !important;
}
---
 revenge.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/revenge.css b/revenge.css
index dcb864d..ea929bb 100644
--- a/revenge.css
+++ b/revenge.css
@@ -231,7 +231,7 @@ button.disabled:not([disabled]):not([readonly])::after {
 acronym::after, applet::after, basefont::after, big::after, center::after, dir::after, 
 font::after, frame::after, frameset::after, isindex::after, listing::after, menu::after, multicol::after, 
 plaintext::after, strike::after, u::after, xmp::after, bgsound::after, blink::after, comment::after, 
-embed::after, marquee::after, nobr::after, noembed::after, wbr::after, :not.MathJax::after {
+embed::after, marquee::after, nobr::after, noembed::after, wbr::after, :not(.MathJax)::after {
 	content: 'This element is deprecated, non-standard or obsolete.' !important;
 }
 span.MathJax .math::after {

From 97228849ddf479c04ea1791622b228387910ebb7 Mon Sep 17 00:00:00 2001
From: Laurence Lewis <laurence.r.lewis@gmail.com>
Date: Wed, 11 Oct 2017 15:20:36 +1000
Subject: [PATCH 15/18] Trying again

:not(span.MathJax .math)::after {
	content: 'This element is deprecated, non-standard or obsolete.' !important;
}
---
 revenge.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/revenge.css b/revenge.css
index ea929bb..f2aff8f 100644
--- a/revenge.css
+++ b/revenge.css
@@ -231,7 +231,7 @@ button.disabled:not([disabled]):not([readonly])::after {
 acronym::after, applet::after, basefont::after, big::after, center::after, dir::after, 
 font::after, frame::after, frameset::after, isindex::after, listing::after, menu::after, multicol::after, 
 plaintext::after, strike::after, u::after, xmp::after, bgsound::after, blink::after, comment::after, 
-embed::after, marquee::after, nobr::after, noembed::after, wbr::after, :not(.MathJax)::after {
+embed::after, marquee::after, nobr::after, noembed::after, wbr::after, :not(span.MathJax .math)::after {
 	content: 'This element is deprecated, non-standard or obsolete.' !important;
 }
 span.MathJax .math::after {

From 0beeaf7598a026492a72dd2b36481e5ab97500fd Mon Sep 17 00:00:00 2001
From: Laurence Lewis <laurence.r.lewis@gmail.com>
Date: Wed, 11 Oct 2017 15:24:51 +1000
Subject: [PATCH 16/18] Add MAthJax to styling red box

---
 revenge.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/revenge.css b/revenge.css
index f2aff8f..8d764a0 100644
--- a/revenge.css
+++ b/revenge.css
@@ -140,7 +140,8 @@ li.disabled > a[href]:not([tabindex="-1"])::after,
 li.disabled > button:not([disabled])::after, 
 a.disabled[href]:not([tabindex="-1"])::after,
 button.disabled:not([disabled])::after, 
-[data-toggle="dropdown"]:not([aria-haspopup])::after
+[data-toggle="dropdown"]:not([aria-haspopup])::after,
+span.MathJax .math::after
 {
    display: inline-block !important;
    background: #dc143c !important;

From dbe0d8e4600bb70306d826e626ec626a3c210cd1 Mon Sep 17 00:00:00 2001
From: Laurence Lewis <laurence.r.lewis@gmail.com>
Date: Wed, 11 Oct 2017 15:30:45 +1000
Subject: [PATCH 17/18] Added to BS section for sr-only screen reader test

.sr-only:after{
   content: 'Off-screen text for screen reader users. Is this text necessary?' !important;
}
---
 revenge.css | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/revenge.css b/revenge.css
index 8d764a0..29130ce 100644
--- a/revenge.css
+++ b/revenge.css
@@ -141,7 +141,8 @@ li.disabled > button:not([disabled])::after,
 a.disabled[href]:not([tabindex="-1"])::after,
 button.disabled:not([disabled])::after, 
 [data-toggle="dropdown"]:not([aria-haspopup])::after,
-span.MathJax .math::after
+span.MathJax .math::after,
+.sr-only:after
 {
    display: inline-block !important;
    background: #dc143c !important;
@@ -409,3 +410,7 @@ button.disabled:not([disabled])::after {
 [data-toggle="dropdown"]:not([aria-haspopup])::after {
 	content: 'Indicate the hidden menu with aria-haspopup' !important;
 }
+
+.sr-only:after{
+   content: 'Off-screen text for screen reader users. Is this text necessary?' !important; 
+}

From dc0972ceec2392179f8824bf16b25306b33edb7d Mon Sep 17 00:00:00 2001
From: Laurence Lewis <laurence.r.lewis@gmail.com>
Date: Thu, 12 Oct 2017 06:51:55 +1000
Subject: [PATCH 18/18] Removed sr-only and MathJax for pull request

---
 revenge.css | 31 +++++++------------------------
 1 file changed, 7 insertions(+), 24 deletions(-)

diff --git a/revenge.css b/revenge.css
index 29130ce..97084a5 100644
--- a/revenge.css
+++ b/revenge.css
@@ -140,9 +140,7 @@ li.disabled > a[href]:not([tabindex="-1"])::after,
 li.disabled > button:not([disabled])::after, 
 a.disabled[href]:not([tabindex="-1"])::after,
 button.disabled:not([disabled])::after, 
-[data-toggle="dropdown"]:not([aria-haspopup])::after,
-span.MathJax .math::after,
-.sr-only:after
+[data-toggle="dropdown"]:not([aria-haspopup])::after
 {
    display: inline-block !important;
    background: #dc143c !important;
@@ -236,9 +234,6 @@ plaintext::after, strike::after, u::after, xmp::after, bgsound::after, blink::af
 embed::after, marquee::after, nobr::after, noembed::after, wbr::after, :not(span.MathJax .math)::after {
 	content: 'This element is deprecated, non-standard or obsolete.' !important;
 }
-span.MathJax .math::after {
-	content: 'This is a MathJax symbol.' !important;
-}
 
 /**
 * Empty elements
@@ -252,10 +247,8 @@ Added not:span.fa and i.fa to exclude icons hooks.
 }
 /**
 Icons used for pure decoration or visual styling
-
-If you're using an icon to add some extra decoration or branding, it does not need to be announced to users as they are navigating your site or app aurally. Additionally, if you're using an icon to visually re-emphasize or add styling to content already present in your HTML, it does not need to be repeated to an assistive technology-using user. You can make sure this is not read by adding the aria-hidden="true" to your Font Awesome markup.
-http://fontawesome.io/accessibility/
-****************/
+----------------------------------------------------------------------
+*/
 i.fa:not([aria-hidden="true"])::after, span.fa:not([aria-hidden="true"])::after {
     content: 'Use aria-hidden="true on icons.' !important;
 }
@@ -280,18 +273,12 @@ aside > section:first-child::after {
 
 /****
 Removed as <footer> requires role=contentInfo and <header> requires role=banner as these are already conveyed natively. W3C validator generates a warning if used.
-****/
-/*
-body > div#footer:not([role="contentinfo"])::after, body > div.footer:not([role="contentinfo"])::after {
-	content: 'Use role="contentinfo" on this footer element or use native HTML5 <footer>.' !important;
-}
-body > div#header:not([role="banner"])::after, body > div.header:not([role="banner"])::after, body > div.banner:not([role="banner"])::after, body > div#banner:not([role="banner"])::after {
-	content: 'Use role="banner" on this header element or use native <header>.' !important;
-}
+----------------------------------------------------------------------
 */
 
 /***
-if div has class or ID of header. Considering if .banner #banner should be included
+if div has class or ID of header.
+----------------------------------------------------------------------
 */
 div#header:not([role="banner"])::after, div.header:not([role="banner"])::after {
 	content: 'Use role="banner" on this header element or use native <header>.' !important;
@@ -409,8 +396,4 @@ button.disabled:not([disabled])::after {
 
 [data-toggle="dropdown"]:not([aria-haspopup])::after {
 	content: 'Indicate the hidden menu with aria-haspopup' !important;
-}
-
-.sr-only:after{
-   content: 'Off-screen text for screen reader users. Is this text necessary?' !important; 
-}
+}
\ No newline at end of file