From: Robert Kaiser <kairo@kairo.at>
Date: Sun, 12 Apr 2015 19:01:03 +0000 (+0200)
Subject: sync both themes with toolkit windows theme changes in Mozilla 38 cycle
X-Git-Tag: LCARStrek-2.35~13
X-Git-Url: https://git-public.kairo.at/?a=commitdiff_plain;h=e6947267ac09872af2aa1c74c74cb00d8581abe4;p=themes.git

sync both themes with toolkit windows theme changes in Mozilla 38 cycle
---

diff --git a/EarlyBlue/global/aboutReader.css b/EarlyBlue/global/aboutReader.css
index 27393b2e..b852c609 100644
--- a/EarlyBlue/global/aboutReader.css
+++ b/EarlyBlue/global/aboutReader.css
@@ -5,8 +5,20 @@
 body {
   padding: 64px 0;
   max-width: 660px;
-  margin-left: auto;
-  margin-right: auto;
+  margin: 0 auto;
+}
+
+@media (max-width: 785px) {
+  body {
+    padding-top: 64px;
+    -moz-padding-end: 0;
+    padding-bottom: 64px;
+    -moz-padding-start: 51px;
+  }
+}
+
+body.loaded {
+  transition: color 0.4s, background-color 0.4s;
 }
 
 .light,
@@ -27,11 +39,13 @@ body {
   background-color: #f0ece7;
 }
 
-.sans-serif {
+.sans-serif,
+.sans-serif .remove-button {
   font-family: "Fira Sans", Helvetica, Arial, sans-serif;
 }
 
-.serif {
+.serif,
+.serif .remove-button {
   font-family: "Charis SIL", Georgia, "Times New Roman", serif;
 }
 
@@ -79,7 +93,7 @@ body {
   display: none;
   text-align: center;
   width: 100%;
-  font-size: 0.9rem;
+  font-size: 0.9em;
 }
 
 /* Header */
@@ -90,8 +104,8 @@ body {
 }
 
 .domain {
-  font-size: 0.9rem;
-  line-height: 1.33rem;
+  font-size: 0.9em;
+  line-height: 1.48em;
   padding-bottom: 4px;
   font-family: "Fira Sans", Helvetica, Arial, sans-serif;
   text-decoration: none;
@@ -109,16 +123,16 @@ body {
 }
 
 .header > h1 {
-  font-size: 1.33rem;
-  line-height: 1.66rem;
+  font-size: 1.33em;
+  line-height: 1.25em;
   width: 100%;
   margin: 30px 0;
   padding: 0;
 }
 
 .header > .credits {
-  font-size: 0.9rem;
-  line-height: 1.33rem;
+  font-size: 0.9em;
+  line-height: 1.48em;
   margin: 0 0 30px 0;
   padding: 0;
   font-style: italic;
@@ -126,10 +140,10 @@ body {
 
 /* Content */
 
-.content {
+#moz-reader-content {
   display: none;
-  font-size: 1rem;
-  line-height: 1.44rem;
+  font-size: 1em;
+  line-height: 1.6em;
 }
 
 .content h1,
@@ -138,19 +152,19 @@ body {
   font-weight: bold;
 }
 
-.content h1 {
-  font-size: 1.33rem;
-  line-height: 1.66rem;
+#moz-reader-content h1 {
+  font-size: 1.33em;
+  line-height: 1.25em;
 }
 
-.content h2 {
-  font-size: 1.1rem;
-  line-height: 1.66rem;
+#moz-reader-content h2 {
+  font-size: 1.1em;
+  line-height: 1.51em;
 }
 
-.content h3 {
-  font-size: 1rem;
-  line-height: 1.66rem;
+#moz-reader-content h3 {
+  font-size: 1em;
+  line-height: 1.66em;
 }
 
 .content a {
@@ -171,26 +185,34 @@ body {
 }
 
 .content p,
-.content img,
 .content code,
 .content pre,
 .content blockquote,
 .content ul,
 .content ol,
-.content li {
+.content li,
+.content figure,
+.content .wp-caption {
   margin: 0 0 30px 0;
 }
 
-.content .wp-caption,
-.content figure {
-  margin: 0 30px 30px 30px;
+.content p > img:only-child,
+.content p > a:only-child > img:only-child,
+.content .wp-caption img,
+.content figure img {
+  display: block;
+}
+
+.content img[moz-reader-center] {
+  margin-left: auto;
+  margin-right: auto;
 }
 
-.content .caption,
-.content .wp-caption-text,
-.content figcaption {
-  font-size: 0.9rem;
-  line-height: 1.33rem;
+#moz-reader-content .caption,
+#moz-reader-content .wp-caption-text,
+#moz-reader-content figcaption {
+  font-size: 0.9em;
+  line-height: 1.48em;
   font-style: italic;
 }
 
@@ -212,6 +234,13 @@ body {
 .dark > .container > .content blockquote {
   -moz-border-start: 2px solid #eeeeee;
 }
+.dark *::-moz-selection {
+  background-color: #FFFFFF;
+  color: #0095DD;
+}
+.dark a::-moz-selection {
+  color: #DD4800;
+}
 
 .content ul,
 .content ol {
@@ -220,7 +249,7 @@ body {
 
 .content ul {
   -moz-padding-start: 30px;
-  list-style: disk;
+  list-style: disc;
 }
 
 .content ol {
@@ -234,30 +263,34 @@ body {
   font-family: "Fira Sans", Helvetica, Arial, sans-serif;
   position: fixed;
   height: 100%;
-  top: 0px;
-  left: 0px;
+  top: 0;
+  left: 0;
   margin: 0;
   padding: 0;
   list-style: none;
-  background-color: #FBFBFB;
+  background-color: #fbfbfb;
   -moz-user-select: none;
-  border-right: 1px solid #B5B5B5;
+  border-right: 1px solid #b5b5b5;
 }
 
 .button {
-  color: white;
   display: block;
-  background-position: center;
   background-size: 24px 24px;
   background-repeat: no-repeat;
-  background-color: transparent;
+  color: #333;
+  background-color: #fbfbfb;
   height: 40px;
+  padding: 0;
+}
+
+.toolbar .button {
   width: 40px;
+  background-position: center;
+  margin-right: -1px;
   border-top: 0;
   border-left: 0;
-  border-right: 0;
+  border-right: 1px solid #b5b5b5;
   border-bottom: 1px solid #c1c1c1;
-  padding: 0;
 }
 
 .button[hidden] {
@@ -267,36 +300,32 @@ body {
 .dropdown {
   text-align: center;
   list-style: none;
-  margin: 0px;
-  padding: 0px;
+  margin: 0;
+  padding: 0;
 }
 
 .dropdown li {
-  margin: 0px;
-  padding: 0px;
+  margin: 0;
+  padding: 0;
 }
 
 /*======= Font style popup =======*/
 
 .dropdown-popup {
-  min-width: 250px;
+  min-width: 300px;
   text-align: start;
   position: absolute;
   left: 48px; /* offset to account for toolbar width */
   z-index: 1000;
-  background-color: #FBFBFB;
+  background-color: #fbfbfb;
   visibility: hidden;
   border-radius: 4px;
-  border: 1px 1px 0 1px solid #B5B5B5;
-  box-shadow: 0px 1px 12px #666;
+  border: 1px 1px 0 1px solid #b5b5b5;
+  box-shadow: 0 1px 12px #666;
 }
 
 .dropdown-popup > hr {
-  width: 100%;
-  height: 0px;
-  border: 0px;
-  border-top: 1px solid #B5B5B5;
-  margin: 0;
+  display: none;
 }
 
 .open > .dropdown-popup {
@@ -337,17 +366,15 @@ body {
 #font-size-buttons > button,
 #color-scheme-buttons > button {
   text-align: center;
-  border-left: 1px solid #B5B5B5;
-  border-right: 0;
-  border-top: 0;
-  border-bottom: 0;
-  padding: 10px;
+  border: 0;
 }
 
 #font-type-buttons > button,
 #font-size-buttons > button {
   width: 50%;
   background-color: transparent;
+  border-left: 1px solid #B5B5B5;
+  border-bottom: 1px solid #B5B5B5;
 }
 
 #color-scheme-buttons > button {
@@ -355,40 +382,62 @@ body {
   font-size: 14px;
 }
 
+#color-scheme-buttons > .dark-button {
+  margin-top: -1px;
+  height: 61px;
+}
+
 #font-type-buttons > button:first-child,
-#font-size-buttons > button:first-child,
-#color-scheme-buttons > button:first-child {
-  border-left: 0px;
+#font-size-buttons > button:first-child {
+  border-left: 0;
 }
 
 #font-type-buttons > button {
   display: inline-block;
-  font-size: 48px;
+  font-size: 58px;
+  height: 100px;
+}
+
+/* Make the serif button content the same size as the sans-serif button content. */
+#font-type-buttons > .serif-button {
+  padding-top: 1px;
+  font-size: 60px;
+}
+
+#font-size-buttons > button,
+#color-scheme-buttons > button {
+  height: 60px;
 }
 
 #font-type-buttons > button:active:hover,
 #font-type-buttons > button.selected,
 #color-scheme-buttons > button:active:hover,
 #color-scheme-buttons > button.selected {
-  box-shadow: inset 0 -3px 0 0 #FC6420;
+  box-shadow: inset 0 -3px 0 0 #fc6420;
+}
+
+#font-type-buttons > button:active:hover,
+#font-type-buttons > button.selected {
+  border-bottom: 1px solid #FC6420;
 }
 
 #font-type-buttons > button > div {
   color: #666;
   font-size: 12px;
+  margin-top: -4px;
 }
 
 .button:hover,
 #font-size-buttons > button:hover,
 #font-type-buttons > button:hover {
-  background-color: #EBEBEB;
+  background-color: #ebebeb;
 }
 
 .dropdown.open,
 .button:active,
 #font-size-buttons > button:active,
 #font-size-buttons > button.selected {
-  background-color: #DADADA;
+  background-color: #dadada;
 }
 
 /* Only used on Android */
@@ -404,12 +453,40 @@ body {
 .plus-button {
   background-color: transparent;
   border: 0;
-  height: 50px;
   background-size: 18px 18px;
   background-repeat: no-repeat;
   background-position: center;
 }
 
+.footer {
+  height: 64px;
+  background-color: #ebebeb;
+  position: absolute;
+  left: 0;
+  width: 100%;
+  text-align: center;
+  padding: 12px 0;
+  box-sizing: border-box;
+  box-shadow: 0 3px 3px -3px rgba(0, 0, 0, 0.35) inset;
+}
+
+.sepia .footer {
+  background-color: #dedad4;
+}
+
+.remove-button {
+  background-image: url("chrome://global/skin/reader/RM-Delete-24x24.svg");
+  margin: 0 auto;
+  border: 1px solid #c1c1c1;
+  background-position: 10px 7px;
+  padding-left: 42px;
+  padding-right: 10px;
+  border-radius: 2px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  font-size: 18px;
+}
+
+
 /*======= Toolbar icons =======*/
 
 /* Android-only controls */
@@ -418,15 +495,23 @@ body {
 }
 
 .close-button {
-  background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg");
+  background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg#close");
   height: 68px;
   background-position: center 8px;
 }
 
-.close-button:active,
 .close-button:hover {
-  background-image: url("chrome://global/skin/reader/RM-Close-hover-24x24.svg");
+  background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg#close-hover");
   background-color: #d94141;
+  border-bottom: 1px solid #d94141;
+  border-right: 1px solid #d94141;
+}
+
+.close-button:hover:active {
+  background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg#close-hover");
+  background-color: #AE2325;
+  border-bottom: 1px solid #AE2325;
+  border-right: 1px solid #AE2325;
 }
 
 .style-button {
@@ -460,4 +545,7 @@ body {
   .toolbar {
     display: none;
   }
+  .footer {
+    display: none;
+  }
 }
diff --git a/EarlyBlue/global/aboutSupport.css b/EarlyBlue/global/aboutSupport.css
index 8b71b9f1..990091a8 100644
--- a/EarlyBlue/global/aboutSupport.css
+++ b/EarlyBlue/global/aboutSupport.css
@@ -81,7 +81,7 @@ td {
   overflow: hidden;
 }
 
-#reset-box {
+#action-box {
   background-color: #CCD0DD;
   border: 1px solid #666699;
   color: #000000;
@@ -92,10 +92,15 @@ td {
   -moz-margin-end: 0;
   padding: 16px;
   width: 30%;
-  visibility: hidden;
 }
 
-#reset-box:-moz-dir(rtl) {
+#action-box,
+#reset-box,
+#safe-mode-box {
+  display: none;
+}
+
+#action-box:-moz-dir(rtl) {
   float: left;
 }
 
@@ -103,7 +108,7 @@ td {
   margin-top: 0;
 }
 
-#reset-box > button {
+#action-box > button {
   display: block;
 }
 
diff --git a/EarlyBlue/global/checkbox.css b/EarlyBlue/global/checkbox.css
index 36777951..66253d53 100644
--- a/EarlyBlue/global/checkbox.css
+++ b/EarlyBlue/global/checkbox.css
@@ -46,6 +46,7 @@ checkbox:-moz-focusring > .checkbox-label-center-box > .checkbox-label-box {
 
 /* ..... disabled state ..... */
 
+checkbox[disabled="true"] > .checkbox-check,
 checkbox[disabled="true"] > .checkbox-spacer-box > .checkbox-check {
   background-color: #CCD0DD;
 }
@@ -58,21 +59,30 @@ checkbox[disabled="true"] {
 
 .checkbox-check {
   border: 1px inset #CCD0DD;
-  width: 12px;
-  height: 12px;
+  width: 1em;
+  height: 1em;
+  min-width: 12px;
+  min-height: 12px;
   background: transparent 50% 50% no-repeat;
 }
 
+checkbox > .checkbox-check {
+  -moz-margin-end: 4px;
+}
+
+checkbox:hover:active > .checkbox-check,
 checkbox:hover:active > .checkbox-spacer-box > .checkbox-check {
   background-color: #CCD0DD;
 }
 
 /* ..... checked state ..... */
 
+checkbox[checked="true"] > .checkbox-check,
 checkbox[checked="true"] > .checkbox-spacer-box > .checkbox-check {
   background-image: url("chrome://global/skin/checkbox/cbox-check.gif");
 }
 
+checkbox[checked="true"][disabled="true"] > .checkbox-check,
 checkbox[checked="true"][disabled="true"] > .checkbox-spacer-box > .checkbox-check {
   background-image: url("chrome://global/skin/checkbox/cbox-check-disabled.gif") !important
 }
diff --git a/EarlyBlue/global/config.css b/EarlyBlue/global/config.css
index 0a949ef8..9731c4b8 100644
--- a/EarlyBlue/global/config.css
+++ b/EarlyBlue/global/config.css
@@ -6,81 +6,48 @@
    == Styles for about:config
    ======================================================================= */
 
-@import url("chrome://global/skin/");
-@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
-
-/* ::::: warning screen ::::: */
-
-#warningScreen
-{
-  background: #CCD0DD;
+#warningScreen {
+  font-size: 15px;
+  padding-top: 0;
+  padding-bottom: 0;
+  -moz-padding-start: calc(48px + 4.6em);
+  -moz-padding-end: 48px;
 }
 
-#warningBox
-{
-  background: #9999CC;
-  color: #000000;
-  border: 1px solid #666699;
-  border-radius: 10px;
-  padding: 3em;
-  -moz-padding-start: 30px;
-  -moz-margin-start: 1em;
-  -moz-margin-end: 1em;
+.title {
+  background-image: url("chrome://global/skin/icons/warning.svg");
 }
 
-#warningInnerBox
-{
- max-width: 50em;
+#warningTitle {
+  font-weight: lighter;
+  line-height: 1.2;
+  color: #6666CC;
+  margin: 0;
+  margin-bottom: .5em;
 }
 
-#warningTitle
-{
-  margin: 0 0 .6em;
-  font-size: 160%;
-  border-bottom: 1px solid #666699;
+#warningText {
+  margin: 1em 0;
 }
 
-#warningText
-{
-  font-size: 110%;
-  -moz-margin-start: 0;
-}
-
-#warningButton
-{
+#warningButton {
   margin-top: 0.6em;
 }
 
-#showWarningNextTime
-{
-  margin-top: 0.6em;
+#filterRow {
+  margin-top: 4px;
+  -moz-margin-start: 4px;
 }
 
-#exclam
-{
-  list-style-image: url("chrome://global/skin/icons/alert-exclam.gif");
-  -moz-margin-end: 3em;
+#configTree {
+  margin-top: 4px;
+  margin-bottom: 4px;
 }
 
-/* ::::: tree rows ::::: */
-
-#configTreeBody::-moz-tree-cell-text(user)
-{
+#configTreeBody::-moz-tree-cell-text(user) {
   font-weight: bold;
 }
 
-#configTreeBody::-moz-tree-cell-text(locked)
-{
+#configTreeBody::-moz-tree-cell-text(locked) {
   font-style: italic;
 }
-
-#configTree
-{
-  margin-top: 5px;
-  margin-bottom: 5px;
-}
-
-#filterRow
-{
-  margin-top: 5px;
-}
diff --git a/EarlyBlue/global/icons/warning.svg b/EarlyBlue/global/icons/warning.svg
new file mode 100644
index 00000000..79d1ddf0
--- /dev/null
+++ b/EarlyBlue/global/icons/warning.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" viewBox="0 0 60 60" enable-background="new 0 0 60 60">
+  <linearGradient id="gradient" gradientUnits="userSpaceOnUse" x1="30" y1="10" x2="30" y2="50">
+    <stop offset="0" style="stop-color: #FFFFC0"/>
+    <stop offset="1" style="stop-color: #FFF0C0"/>
+  </linearGradient>
+  <path fill="url(#gradient)" d="M49.316,42.867L33.829,12.7c-0.879-1.715-2.274-2.7-3.828-2.7c-1.554,0-2.949,0.985-3.829,2.702
+    L10.685,42.864c-0.869,1.69-0.913,3.482-0.121,4.909C11.35,49.187,12.817,50,14.591,50h30.82c1.772,0,3.24-0.81,4.023-2.224
+    C50.227,46.349,50.185,44.56,49.316,42.867z M32.176,22.304l-0.48,14.304h-3.424L27.76,22.304H32.176z M30,44.896
+    c-1.44,0-2.592-1.184-2.592-2.592c0-1.44,1.152-2.592,2.592-2.592c1.472,0,2.592,1.152,2.592,2.592
+    C32.592,43.712,31.472,44.896,30,44.896z"/>
+</svg>
\ No newline at end of file
diff --git a/EarlyBlue/global/in-content/common.css b/EarlyBlue/global/in-content/common.css
index b3777733..e222bce7 100644
--- a/EarlyBlue/global/in-content/common.css
+++ b/EarlyBlue/global/in-content/common.css
@@ -8,7 +8,8 @@
 @namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
 
 html|body,
-xul|page {
+xul|page,
+xul|window {
   font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
   -moz-appearance: none;
   background-color: #CCD0DD;
@@ -25,13 +26,20 @@ html|h1 {
   font-size: 2.5em;
   font-weight: lighter;
   line-height: 1.2;
+  color: #000000;
   margin: 0;
   margin-bottom: .5em;
 }
 
+html|hr {
+  border-style: solid none none none;
+  border-color: #666699;
+}
+
 xul|caption {
 }
 
+xul|caption > xul|checkbox,
 xul|caption > xul|label {
   margin-top: 0;
   margin-bottom: 0;
@@ -58,9 +66,7 @@ xul|prefpane > xul|*.content-box {
 xul|groupbox {
   -moz-appearance: none;
   border: none;
-  margin-top: 15px;
-  margin-bottom: 15px;
-  -moz-margin-end: 0;
+  margin: 15px 0 0;
   -moz-padding-start: 0;
   -moz-padding-end: 0;
   font-size: 1.25rem;
@@ -200,7 +206,7 @@ xul|menulist > xul|*.menulist-label-box {
   padding-left: 10px !important;
 }
 
-xul|menulist > xul|*.menulist-label-box > xul|*.menulist-icon {
+xul|menulist > xul|*.menulist-label-box > xul|*.menulist-icon[src] {
   -moz-margin-end: 5px;
 }
 
@@ -359,7 +365,6 @@ xul|button[type="menu"] > xul|menupopup xul|menuseparator {
   height: 30px;
   color: #333;
   line-height: 20px;
-  text-shadow: 0 1px 1px #fefffe;
   padding-right: 10px;
   padding-left: 10px;
   border: 1px solid #c1c1c1;
@@ -384,34 +389,52 @@ xul|textbox[disabled="true"] {
 /* Links */
 /*
 html|a,
-xul|*.text-link,
-xul|*.inline-link {
+.text-link,
+.inline-link {
   line-height: 22px;
   color: #0095dd;
   text-decoration: none;
 }
 
 html|a:hover,
-xul|*.text-link:hover,
-xul|*.inline-link:hover {
+.text-link:hover,
+.inline-link:hover {
   color: #4cb1ff;
   text-decoration: none;
 }
 
 html|a:hover:active,
-xul|*.text-link:hover:active,
-xul|*.inline-link:hover:active {
+.text-link:hover:active,
+.inline-link:hover:active {
   color: #ff9500;
   text-decoration: none;
 }
 */
 /* Checkboxes and radio buttons */
 /*
+/ Hide the actual checkbox /
+html|input[type="checkbox"] {
+  opacity: 0;
+  position: absolute;
+}
+
+/ Create a box to style as the checkbox /
+html|input[type="checkbox"] + html|label:before {
+  display: inline-block;
+  content: "";
+  vertical-align: middle;
+}
+
+html|input[type="checkbox"] + html|label {
+  line-height: 0px;
+}
+
 xul|checkbox {
   -moz-margin-start: 0;
 }
 
-xul|*.checkbox-check {
+xul|*.checkbox-check,
+html|input[type="checkbox"] + html|label:before {
   -moz-appearance: none;
   width: 23px;
   height: 23px;
@@ -426,7 +449,8 @@ xul|*.checkbox-check {
   box-shadow: 0 1px 1px 0 #fff, inset 0 2px 0 0 rgba(0,0,0,0.03);
 }
 
-xul|checkbox:not([disabled="true"]):hover > xul|*.checkbox-check {
+xul|checkbox:not([disabled="true"]):hover > xul|*.checkbox-check,
+html|input[type="checkbox"]:not(:disabled) + html|label:hover:before {
   border-color: #0095dd;
 }
 
@@ -436,7 +460,12 @@ xul|*.checkbox-check[checked] {
                     linear-gradient(#fff, rgba(255,255,255,0.8)) !important;
 }
 
-xul|checkbox[disabled="true"] > xul|*.checkbox-check {
+html|input[type="checkbox"]:checked + html|label:before {
+  background-image: url("chrome://global/skin/in-content/check.svg#check"), linear-gradient(#fff, rgba(255,255,255,0.8)) !important;
+}
+
+xul|checkbox[disabled="true"] > xul|*.checkbox-check,
+html|input[type="checkbox"]:disabled + html|label {
   opacity: 0.5;
 }
 
@@ -521,6 +550,7 @@ xul|*#categories[keyboard-navigation="true"]:-moz-focusring > xul|*.category[cur
   padding-bottom: 2px;
   -moz-padding-start: 9px;
   margin: 0;
+  -moz-user-select: none;
 }
 
 *|*.category-icon {
@@ -542,6 +572,7 @@ xul|*#categories[keyboard-navigation="true"]:-moz-focusring > xul|*.category[cur
   font-weight: normal;
   line-height: 40px;
   margin: 0;
+  -moz-user-select: none;
 }
 */
 /* File fields */
@@ -627,6 +658,11 @@ xul|tree {
   border: 1px solid #c1c1c1;
 }
 
+xul|tree:-moz-focusring,
+xul|richlistbox:-moz-focusring {
+  border: 1px dotted #0095dd;
+}
+
 xul|listheader,
 xul|treecols {
   -moz-appearance: none;
@@ -644,7 +680,7 @@ xul|treecolpicker {
   padding: 5px 10px;
 }
 
-xul|treecol:not([hideheader="true"]):hover,
+xul|treecol:not([hideheader="true"]):not([sortable="false"]):hover,
 xul|treecolpicker:hover {
   background-color: #dadada;
   color: #333;
@@ -658,21 +694,15 @@ xul|treecolpicker {
 }
 
 xul|treecol:not([hideheader="true"]) > xul|*.treecol-sortdirection[sortDirection] {
-  list-style-image: url("chrome://global/skin/in-content/sorter.png");
-  width: 12px;
-  height: 8px;
+  list-style-image: url("chrome://global/skin/in-content/dropdown.svg#dropdown");
+  width: 18px;
+  height: 18px;
 }
 
-xul|treecol:not([hideheader="true"]) > xul|*.treecol-sortdirection[sortDirection="descending"] {
+xul|treecol:not([hideheader="true"]) > xul|*.treecol-sortdirection[sortDirection="ascending"] {
   transform: scaleY(-1);
 }
 
-@media (min-resolution: 2dppx) {
-  xul|treecol:not([hideheader="true"]) > xul|*.treecol-sortdirection[sortDirection] {
-    list-style-image: url("chrome://global/skin/in-content/sorter@2x.png");
-  }
-}
-
 / This is the only way to increase the height of a tree row unfortunately /
 xul|treechildren::-moz-tree-row {
   min-height: 2em;
@@ -694,6 +724,7 @@ xul|caption {
 }
 
 xul|button,
+html|button,
 xul|colorpicker[type="button"],
 xul|menulist {
   margin: 2px 4px;
@@ -710,7 +741,6 @@ xul|checkbox {
 
 xul|radio {
   -moz-binding: url("chrome://global/content/bindings/radio.xml#radio");
-  -moz-margin-start: 0;
   -moz-padding-start: 0;
 }
 
@@ -720,8 +750,8 @@ xul|*.checkbox-icon {
 }
 
 html|a:-moz-focusring,
-xul|*.text-link:-moz-focusring,
-xul|*.inline-link:-moz-focusring {
+.text-link:-moz-focusring,
+.inline-link:-moz-focusring {
   border: 1px dotted -moz-DialogText;
 }
 */
\ No newline at end of file
diff --git a/EarlyBlue/global/in-content/info-pages.css b/EarlyBlue/global/in-content/info-pages.css
new file mode 100644
index 00000000..45f6a0b3
--- /dev/null
+++ b/EarlyBlue/global/in-content/info-pages.css
@@ -0,0 +1,89 @@
+@import url("chrome://global/skin/in-content/common.css");
+/* Body and container */
+body {
+  display: flex;
+  box-sizing: padding-box;
+  min-height: 100vh;
+  padding-top: 0;
+  padding-bottom: 0;
+  -moz-padding-start: calc(48px + 4.6em);
+  -moz-padding-end: 48px;
+  align-items: center;
+  justify-content: center;
+}
+
+.container {
+  min-width: 13em;
+  max-width: 52em;
+}
+
+/* Typography */
+.title {
+  background-image: url("chrome://browser/skin/aboutNetError_info.svg");
+  background-position: left 0;
+  background-repeat: no-repeat;
+  background-size: 1.6em;
+  -moz-margin-start: -2.3em;
+  -moz-padding-start: 2.3em;
+  font-size: 2.5em;
+}
+
+.title:-moz-dir(rtl) {
+  background-position: right 0;
+}
+
+.title-text {
+  border-bottom: 1px solid #666699;
+  font-size: inherit;
+  padding-bottom: 0.4em;
+}
+
+@media (max-width: 675px) {
+  body {
+    padding: 0 48px;
+  }
+
+  .title {
+    background-image: none !important;
+    -moz-padding-start: 0;
+    -moz-margin-start: 0;
+  }
+
+  .title-text {
+    padding-top: 0;
+  }
+}
+
+ul, ol {
+  margin: 0;
+  padding: 0;
+  -moz-margin-start: 1em;
+}
+
+ul > li, ol > li {
+  margin-bottom: .5em;
+}
+
+ul {
+  list-style: disc;
+}
+
+/* Buttons */
+.button-container {
+  margin-top: 1.2em;
+}
+
+.button-container > button {
+  min-width: 150px;
+}
+
+.button-container > button:first-child {
+  -moz-margin-start: 0;
+}
+
+/* Trees */
+tree {
+  min-height: 12em;
+  margin-top: 1.2em;
+  width: 100%;
+}
\ No newline at end of file
diff --git a/EarlyBlue/global/media/videoClickToPlayButton.svg b/EarlyBlue/global/media/videoClickToPlayButton.svg
index c8d6f23c..f118afb0 100644
--- a/EarlyBlue/global/media/videoClickToPlayButton.svg
+++ b/EarlyBlue/global/media/videoClickToPlayButton.svg
@@ -1,3 +1,7 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+
 <svg
    xmlns:dc="http://purl.org/dc/elements/1.1/"
    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
@@ -42,58 +46,34 @@
        height="1.25"
        color-interpolation-filters="sRGB"
        id="dropShadow">
-      <feGaussianBlur
-         result="blur"
-         stdDeviation="2"
-         in="SourceAlpha"
-         id="dropShadowBlur" />
-      <feColorMatrix
-         values="1 0 0 0  0
-                 0 1 0 0  0
-                 0 0 1 0  0
-                 0 0 0 .5 0"
-         type="matrix"
-         result="bluralpha"
-         id="dropShadowColor" />
-      <feOffset
-         result="offsetBlur"
-         dy="1"
-         dx="0"
-         in="bluralpha"
-         id="dropShadowOffset" />
-      <feMerge>
-        <feMergeNode
-           in="offsetBlur" />
-        <feMergeNode
-           in="SourceGraphic" />
-      </feMerge>
+      <feDropShadow dx="0" dy="1" flood-opacity="0.5"/>
     </filter>
     <mask id="dropShadowMask">
       <path
          d="M47.285,30.991L23.75,17.24c-0.357-0.208-0.692-0.278-0.969-0.221 C22.32,17.115,22,17.555,22,18.252v27.499c0,1.112,0.797,1.568,1.75,1.011l23.535-13.748C48.238,32.458,48.238,31.547,47.285,30.991 z M0,0v64h64V0H0z M32,60C16.536,60,4,47.464,4,32S16.536,4,32,4s28,12.536,28,28S47.464,60,32,60z"
          id="dropShadowMaskPath"
-         style="fill:#ffffff;fill-opacity:1;stroke:none" />
+         style="fill:#ffffff;" />
     </mask>       
   </defs>
   <path 
      d="M32,4C16.536,4,4,16.536,4,32s12.536,28,28,28s28-12.536,28-28S47.464,4,32,4z M47.285,33.014 L23.75,46.762C22.797,47.319,22,46.863,22,45.751v-27.5c0-0.697,0.32-1.137,0.781-1.232c0.277-0.058,0.612,0.012,0.969,0.221 l23.535,13.751C48.238,31.546,48.238,32.458,47.285,33.014z"
      mask="url(#dropShadowMask)"
      id="playButtonShadow"
-     style="fill:black;fill-opacity:1;stroke:none;filter:url(#dropShadow)" />
+     style="filter:url(#dropShadow);" />
   <path
      d="M22.781,17.019C22.32,17.114,22,17.555,22,18.251v27.5c0,1.112,0.797,1.568,1.75,1.011 l23.535-13.748c0.953-0.556,0.953-1.467,0-2.023L23.75,17.24C23.393,17.031,23.058,16.961,22.781,17.019z"
      id="playButtonArrow"
-     style="fill:url(#arrowGradient);fill-opacity:1;stroke:none" />
+     style="fill:url(#arrowGradient);" />
   <path 
      d="M32,4C16.536,4,4,16.536,4,32s12.536,28,28,28s28-12.536,28-28S47.464,4,32,4z M47.285,33.014 L23.75,46.762C22.797,47.319,22,46.863,22,45.751v-27.5c0-0.697,0.32-1.137,0.781-1.232c0.277-0.058,0.612,0.012,0.969,0.221 l23.535,13.751C48.238,31.546,48.238,32.458,47.285,33.014z"
      id="playButton"
-     style="fill:url(#whiteGradient);fill-opacity:1;stroke:none" />
+     style="fill:url(#whiteGradient);" />
   <path
      d="M32,4C16.536,4,4,16.536,4,32s12.536,28,28,28s28-12.536,28-28S47.464,4,32,4z M32,59C17.112,59,5,46.888,5,32S17.112,5,32,5s27,12.112,27,27S46.888,59,32,59z M47.789,30.127l-23.534-13.75 C23.826,16.126,23.396,16,22.976,16c-0.135,0-0.27,0.014-0.398,0.041C21.62,16.238,21,17.106,21,18.251v27.5 C21,47.075,21.812,48,22.977,48c0.423,0,0.854-0.126,1.279-0.375L47.79,33.877c0.769-0.449,1.21-1.132,1.21-1.875 S48.559,30.576,47.789,30.127z M47.285,33.014L23.75,46.762C23.474,46.924,23.211,47,22.977,47C22.402,47,22,46.541,22,45.751v-27.5 c0-0.697,0.32-1.137,0.781-1.232L22.976,17c0.233,0,0.498,0.079,0.775,0.24l23.535,13.751 C48.238,31.546,48.238,32.458,47.285,33.014z"
      id="playButtonEdgeHighlights"
-     style="fill:white;fill-opacity:.3;stroke:none" />
+     style="fill:white;fill-opacity:.3;" />
   <path
      d="M32,4C16.536,4,4,16.536,4,32c0,0.167,0.01,0.333,0.013,0.5 C4.28,17.268,16.704,5,32,5c15.296,0,27.72,12.268,27.987,27.5C59.99,32.333,60,32.167,60,32C60,16.536,47.464,4,32,4z M47.285,33.014L23.75,46.762C22.797,47.319,22,46.863,22,45.751v1c0,1.112,0.797,1.568,1.75,1.011l23.535-13.748 c0.697-0.406,0.879-1.003,0.556-1.512C47.723,32.688,47.541,32.864,47.285,33.014z"
      id="playButtonTopEdgeHighlights"
-     style="fill:white;fill-opacity:.8;stroke:none" />
+     style="fill:white;fill-opacity:.8;" />
 </svg>
diff --git a/EarlyBlue/global/reader/RM-Add-24x24.svg b/EarlyBlue/global/reader/RM-Add-24x24.svg
new file mode 100644
index 00000000..66551ef1
--- /dev/null
+++ b/EarlyBlue/global/reader/RM-Add-24x24.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+     viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<path fill-rule="evenodd" clip-rule="evenodd" fill="#808080" d="M12,2C6.477,2,2,6.477,2,12c0,5.523,4.477,10,10,10s10-4.477,10-10
+    C22,6.477,17.523,2,12,2z M17.714,12.714h-5v5h-1.429v-5h-5v-1.429h5v-5h1.429v5h5V12.714z"/>
+</svg>
diff --git a/EarlyBlue/global/reader/RM-Close-24x24.svg b/EarlyBlue/global/reader/RM-Close-24x24.svg
new file mode 100644
index 00000000..b0674b2d
--- /dev/null
+++ b/EarlyBlue/global/reader/RM-Close-24x24.svg
@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg viewBox="0 0 24 24"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <style type="text/css">
+      use:not(:target) {
+        display: none;
+      }
+
+      #close {
+        fill: #808080;
+      }
+      #close-hover {
+        fill: #FFFFFF;
+      }
+    </style>
+
+    <g id="close-shape">
+      <polygon points="20.477,6.551 20.477,17.449 11.992,17.449 11.992,20 23,20 23,4 11.992,4 11.992,6.551"/>
+      <polygon points="1,11.981 9.698,19.95 9.698,15.13 18.184,15.13 18.184,8.87 9.698,8.87 9.698,4.011"/>
+    </g>
+  </defs>
+
+  <use id="close"       xlink:href="#close-shape"/>
+  <use id="close-hover" xlink:href="#close-shape"/>
+
+</svg>
\ No newline at end of file
diff --git a/EarlyBlue/global/reader/RM-Delete-24x24.svg b/EarlyBlue/global/reader/RM-Delete-24x24.svg
new file mode 100644
index 00000000..6010fbe7
--- /dev/null
+++ b/EarlyBlue/global/reader/RM-Delete-24x24.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+     viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<path fill-rule="evenodd" clip-rule="evenodd" fill="#808080" d="M12,2C6.477,2,2,6.477,2,12c0,5.523,4.477,10,10,10s10-4.477,10-10
+    C22,6.477,17.523,2,12,2z M11.286,6.286 M6.286,12.714v-1.429h11.429v1.429H6.286z"/>
+</svg>
diff --git a/EarlyBlue/global/reader/RM-Minus-24x24.svg b/EarlyBlue/global/reader/RM-Minus-24x24.svg
new file mode 100644
index 00000000..9da7e03b
--- /dev/null
+++ b/EarlyBlue/global/reader/RM-Minus-24x24.svg
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+     viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<path fill-rule="evenodd" clip-rule="evenodd" fill="#808080" d="M0,13.5v-3h24v3H0z"/>
+<g enable-background="new    ">
+    <g>
+        <defs>
+            <rect id="SVGID_2_" x="-269.917" y="-1054" width="22" height="34"/>
+        </defs>
+        <clipPath id="SVGID_1_">
+            <use xlink:href="#SVGID_2_"  overflow="visible"/>
+        </clipPath>
+        <g clip-path="url(#SVGID_1_)">
+            <defs>
+                <rect id="SVGID_6_" x="-365.917" y="-1459" width="1080" height="2896"/>
+            </defs>
+            <clipPath id="SVGID_3_">
+                <use xlink:href="#SVGID_6_"  overflow="visible"/>
+            </clipPath>
+        </g>
+        <g clip-path="url(#SVGID_1_)">
+            <defs>
+                <rect id="SVGID_10_" x="-365.917" y="-1459" width="1080" height="2896"/>
+            </defs>
+            <clipPath id="SVGID_5_">
+                <use xlink:href="#SVGID_10_"  overflow="visible"/>
+            </clipPath>
+        </g>
+        <g clip-path="url(#SVGID_1_)">
+            <defs>
+                <rect id="SVGID_16_" x="-365.917" y="-1459" width="1080" height="2896"/>
+            </defs>
+            <clipPath id="SVGID_7_">
+                <use xlink:href="#SVGID_16_"  overflow="visible"/>
+            </clipPath>
+        </g>
+    </g>
+</g>
+</svg>
diff --git a/EarlyBlue/global/reader/RM-Plus-24x24.svg b/EarlyBlue/global/reader/RM-Plus-24x24.svg
new file mode 100644
index 00000000..249912a1
--- /dev/null
+++ b/EarlyBlue/global/reader/RM-Plus-24x24.svg
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+     viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<path fill-rule="evenodd" clip-rule="evenodd" fill="#808080" d="M24,13.5H13.5V24h-3V13.5H0v-3h10.5V0h3v10.5H24V13.5z"/>
+<g enable-background="new    ">
+    <g>
+        <defs>
+            <rect id="SVGID_2_" x="-233.667" y="-1054" width="22" height="34"/>
+        </defs>
+        <clipPath id="SVGID_1_">
+            <use xlink:href="#SVGID_2_"  overflow="visible"/>
+        </clipPath>
+        <g clip-path="url(#SVGID_1_)">
+            <defs>
+                <rect id="SVGID_6_" x="-329.667" y="-1459" width="1080" height="2896"/>
+            </defs>
+            <clipPath id="SVGID_3_">
+                <use xlink:href="#SVGID_6_"  overflow="visible"/>
+            </clipPath>
+        </g>
+        <g clip-path="url(#SVGID_1_)">
+            <defs>
+                <rect id="SVGID_10_" x="-329.667" y="-1459" width="1080" height="2896"/>
+            </defs>
+            <clipPath id="SVGID_5_">
+                <use xlink:href="#SVGID_10_"  overflow="visible"/>
+            </clipPath>
+        </g>
+        <g clip-path="url(#SVGID_1_)">
+            <defs>
+                <rect id="SVGID_16_" x="-329.667" y="-1459" width="1080" height="2896"/>
+            </defs>
+            <clipPath id="SVGID_7_">
+                <use xlink:href="#SVGID_16_"  overflow="visible"/>
+            </clipPath>
+        </g>
+    </g>
+</g>
+</svg>
diff --git a/EarlyBlue/global/reader/RM-Reading-List-24x24.svg b/EarlyBlue/global/reader/RM-Reading-List-24x24.svg
new file mode 100644
index 00000000..1f21efd5
--- /dev/null
+++ b/EarlyBlue/global/reader/RM-Reading-List-24x24.svg
@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+     viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+    <rect x="8" y="10" fill-rule="evenodd" clip-rule="evenodd" fill="#808080" width="14" height="4"/>
+    <rect x="8" y="16" fill-rule="evenodd" clip-rule="evenodd" fill="#808080" width="14" height="4"/>
+    <rect x="8" y="4" fill-rule="evenodd" clip-rule="evenodd" fill="#808080" width="14" height="4"/>
+    <circle fill-rule="evenodd" clip-rule="evenodd" fill="#808080" cx="4" cy="6" r="2"/>
+    <circle fill-rule="evenodd" clip-rule="evenodd" fill="#808080" cx="4" cy="12" r="2"/>
+    <circle fill-rule="evenodd" clip-rule="evenodd" fill="#808080" cx="4" cy="18" r="2"/>
+</g>
+<g enable-background="new    ">
+    <g>
+        <defs>
+            <rect id="SVGID_2_" x="-197" y="-1054" width="22" height="34"/>
+        </defs>
+        <clipPath id="SVGID_1_">
+            <use xlink:href="#SVGID_2_"  overflow="visible"/>
+        </clipPath>
+        <g clip-path="url(#SVGID_1_)">
+            <defs>
+                <rect id="SVGID_6_" x="-293" y="-1459" width="1080" height="2896"/>
+            </defs>
+            <clipPath id="SVGID_3_">
+                <use xlink:href="#SVGID_6_"  overflow="visible"/>
+            </clipPath>
+        </g>
+        <g clip-path="url(#SVGID_1_)">
+            <defs>
+                <rect id="SVGID_10_" x="-293" y="-1459" width="1080" height="2896"/>
+            </defs>
+            <clipPath id="SVGID_5_">
+                <use xlink:href="#SVGID_10_"  overflow="visible"/>
+            </clipPath>
+        </g>
+        <g clip-path="url(#SVGID_1_)">
+            <defs>
+                <rect id="SVGID_16_" x="-293" y="-1459" width="1080" height="2896"/>
+            </defs>
+            <clipPath id="SVGID_7_">
+                <use xlink:href="#SVGID_16_"  overflow="visible"/>
+            </clipPath>
+        </g>
+    </g>
+</g>
+</svg>
diff --git a/EarlyBlue/global/reader/RM-Type-Controls-24x24.svg b/EarlyBlue/global/reader/RM-Type-Controls-24x24.svg
new file mode 100644
index 00000000..a25429ad
--- /dev/null
+++ b/EarlyBlue/global/reader/RM-Type-Controls-24x24.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+     viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+    <path fill="#808080" d="M8.23,18.748v-1.016l1.182-0.146c0.065-0.013,0.12-0.055,0.166-0.127s0.052-0.143,0.02-0.215L8.513,14.07
+        H4.236l-1.104,3.096c-0.039,0.104-0.02,0.199,0.059,0.283s0.153,0.13,0.225,0.137l1.123,0.146v1.016H0.232v-1.016l1.123-0.166
+        L5.837,5.008h2.275l4.443,12.197c0.052,0.124,0.103,0.21,0.151,0.259s0.145,0.089,0.288,0.122l0.762,0.146v1.016H8.23z
+         M6.296,8.084l-1.68,4.805h3.398L6.296,8.084z"/>
+    <path fill="#808080" d="M20.05,18.748l-0.264-0.996c-0.345,0.234-0.706,0.443-1.083,0.625c-0.331,0.156-0.702,0.298-1.112,0.425
+        c-0.409,0.127-0.835,0.19-1.277,0.19c-0.364,0-0.704-0.06-1.02-0.181s-0.592-0.293-0.829-0.518s-0.424-0.497-0.561-0.815
+        S13.7,16.801,13.7,16.404c0-0.299,0.024-0.576,0.073-0.83s0.146-0.49,0.293-0.708s0.356-0.426,0.63-0.625s0.637-0.392,1.089-0.581
+        s1.008-0.377,1.665-0.566s1.445-0.384,2.363-0.586v-0.244c0-0.098,0.003-0.186,0.01-0.264c0-0.091,0.003-0.182,0.01-0.273
+        c0.007-0.189-0.013-0.392-0.059-0.61s-0.137-0.42-0.273-0.605s-0.329-0.338-0.576-0.459s-0.569-0.181-0.967-0.181
+        c-0.137,0-0.259,0.003-0.366,0.01s-0.197,0.016-0.269,0.029c-0.085,0.013-0.159,0.026-0.225,0.039v1.895h-2.061
+        c-0.169,0.013-0.319-0.003-0.449-0.049c-0.11-0.039-0.213-0.107-0.308-0.205s-0.142-0.25-0.142-0.459
+        c0-0.371,0.132-0.703,0.396-0.996c0.263-0.293,0.607-0.542,1.033-0.747s0.904-0.363,1.435-0.474
+        c0.529-0.111,1.058-0.166,1.585-0.166c0.572,0,1.096,0.042,1.57,0.127s0.883,0.249,1.224,0.493c0.342,0.244,0.604,0.587,0.79,1.03
+        s0.278,1.025,0.278,1.748v5.137c0,0.124,0.042,0.229,0.127,0.317s0.188,0.138,0.312,0.151l0.879,0.059v0.938H20.05z M19.793,13.592
+        c-0.645,0.13-1.177,0.264-1.597,0.4s-0.754,0.293-1.001,0.469s-0.42,0.376-0.518,0.601s-0.146,0.487-0.146,0.786
+        c0,0.208,0.034,0.402,0.103,0.581s0.166,0.335,0.293,0.469s0.278,0.239,0.454,0.317s0.368,0.117,0.576,0.117
+        c0.215,0,0.432-0.023,0.649-0.068s0.415-0.094,0.591-0.146c0.208-0.065,0.407-0.14,0.596-0.225V13.592z"/>
+</g>
+</svg>
diff --git a/EarlyBlue/global/reader/RM-Type-Controls-Arrow.svg b/EarlyBlue/global/reader/RM-Type-Controls-Arrow.svg
new file mode 100644
index 00000000..9094d8a3
--- /dev/null
+++ b/EarlyBlue/global/reader/RM-Type-Controls-Arrow.svg
@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+     viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<polygon opacity="0.15" fill-rule="evenodd" clip-rule="evenodd" points="16.583,0.015 16.569,0 4.583,12 16.569,24 16.583,23.985
+    "/>
+<g enable-background="new    ">
+    <g>
+        <defs>
+            <rect id="SVGID_2_" x="-125" y="-1086.667" width="22" height="34"/>
+        </defs>
+        <clipPath id="SVGID_1_">
+            <use xlink:href="#SVGID_2_"  overflow="visible"/>
+        </clipPath>
+        <g clip-path="url(#SVGID_1_)">
+            <defs>
+                <rect id="SVGID_6_" x="-221" y="-1491.667" width="1080" height="2896"/>
+            </defs>
+            <clipPath id="SVGID_3_">
+                <use xlink:href="#SVGID_6_"  overflow="visible"/>
+            </clipPath>
+        </g>
+        <g clip-path="url(#SVGID_1_)">
+            <defs>
+                <rect id="SVGID_10_" x="-221" y="-1491.667" width="1080" height="2896"/>
+            </defs>
+            <clipPath id="SVGID_5_">
+                <use xlink:href="#SVGID_10_"  overflow="visible"/>
+            </clipPath>
+        </g>
+        <g clip-path="url(#SVGID_1_)">
+            <defs>
+                <rect id="SVGID_16_" x="-221" y="-1491.667" width="1080" height="2896"/>
+            </defs>
+            <clipPath id="SVGID_7_">
+                <use xlink:href="#SVGID_16_"  overflow="visible"/>
+            </clipPath>
+        </g>
+    </g>
+</g>
+<polygon fill-rule="evenodd" clip-rule="evenodd" fill="#FBFBFB" points="16.575,1.021 16.561,1.008 5.583,12 16.577,23.008
+    16.591,22.994 "/>
+</svg>
diff --git a/EarlyBlue/mozapps/extensions/extensions.css b/EarlyBlue/mozapps/extensions/extensions.css
index 59a635a1..7af4bd7e 100644
--- a/EarlyBlue/mozapps/extensions/extensions.css
+++ b/EarlyBlue/mozapps/extensions/extensions.css
@@ -298,7 +298,7 @@
 }
 
 #header-utils-btn {
-  list-style-image: url("chrome://mozapps/skin/extensions/utilities.png");
+  list-style-image: url("chrome://mozapps/skin/extensions/utilities.svg#utilities");
   -moz-margin-end: 16px;
 }
 
diff --git a/EarlyBlue/mozapps/extensions/utilities.png b/EarlyBlue/mozapps/extensions/utilities.png
deleted file mode 100644
index 7c036760..00000000
Binary files a/EarlyBlue/mozapps/extensions/utilities.png and /dev/null differ
diff --git a/EarlyBlue/mozapps/extensions/utilities.svg b/EarlyBlue/mozapps/extensions/utilities.svg
new file mode 100644
index 00000000..a04a0e25
--- /dev/null
+++ b/EarlyBlue/mozapps/extensions/utilities.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     x="0"
+     y="0"
+     width="16"
+     height="16"
+     viewBox="0 0 16 16">
+  <style>
+    use:not(:target) {
+      display: none;
+    }
+    use {
+      fill: #6666CC;
+    }
+    use[id$="-native"] {
+      fill: GrayText;
+    }
+  </style>
+  <defs style="display: none;">
+    <path id="utilities-shape" d="m11.5,13.9l-.6-1.5c.3-.2 .5-.4 .8-.6 .2-.2 .4-.5 .6-.7l1.5,.6c.3,.1 .6,0 .7-.3l.4-1c.1-.3 0-.6-.3-.7l-1.5-.6c.1-.6 .1-1.3 0-2l1.5-.6c.3-.1 .4-.4 .3-.7l-.4-1c-.1-.3-.4-.4-.7-.3l-1.5,.6c-.2-.3-.4-.5-.6-.8-.2-.1-.5-.3-.7-.5l.6-1.5c.1-.3 0-.6-.3-.7l-.9-.4c-.3-.1-.6,0-.7,.3l-.6,1.5c-.6-.1-1.3-.1-2,0l-.6-1.5c-.1-.3-.4-.4-.7-.3l-1,.4c-.2,.1-.3,.4-.2,.6l.6,1.5c-.3,.3-.5,.5-.8,.7-.2,.3-.4,.5-.6,.8l-1.5-.7c-.3-.1-.6,0-.7,.3l-.4,.9c-.1,.3 0,.6 .3,.7l1.5,.7c-.1,.6-.1,1.3 0,1.9l-1.5,.6c-.3,.1-.4,.4-.3,.7l.4,1c.1,.3 .4,.4 .7,.3l1.5-.6c.2,.3 .4,.5 .6,.8 .2,.2 .5,.4 .7,.6l-.6,1.5c-.1,.3 0,.6 .3,.7l1,.4c.3,.1 .6,0 .7-.3l.6-1.5c.6,.1 1.3,.1 2,0l.6,1.5c.1,.3 .4,.4 .7,.3l1-.4c.1-.1 .3-.4 .1-.7zm-5.1-4.2c-.9-.9-.9-2.4 0-3.3 .9-.9 2.4-.9 3.3,0 .9,.9 .9,2.4 0,3.3-.9,.9-2.4,.9-3.3,0z"/>
+  </defs>
+  <use id="utilities" xlink:href="#utilities-shape"/>
+  <use id="utilities-native" xlink:href="#utilities-shape"/>
+</svg>
diff --git a/LCARStrek/global/aboutReader.css b/LCARStrek/global/aboutReader.css
index 27393b2e..b852c609 100644
--- a/LCARStrek/global/aboutReader.css
+++ b/LCARStrek/global/aboutReader.css
@@ -5,8 +5,20 @@
 body {
   padding: 64px 0;
   max-width: 660px;
-  margin-left: auto;
-  margin-right: auto;
+  margin: 0 auto;
+}
+
+@media (max-width: 785px) {
+  body {
+    padding-top: 64px;
+    -moz-padding-end: 0;
+    padding-bottom: 64px;
+    -moz-padding-start: 51px;
+  }
+}
+
+body.loaded {
+  transition: color 0.4s, background-color 0.4s;
 }
 
 .light,
@@ -27,11 +39,13 @@ body {
   background-color: #f0ece7;
 }
 
-.sans-serif {
+.sans-serif,
+.sans-serif .remove-button {
   font-family: "Fira Sans", Helvetica, Arial, sans-serif;
 }
 
-.serif {
+.serif,
+.serif .remove-button {
   font-family: "Charis SIL", Georgia, "Times New Roman", serif;
 }
 
@@ -79,7 +93,7 @@ body {
   display: none;
   text-align: center;
   width: 100%;
-  font-size: 0.9rem;
+  font-size: 0.9em;
 }
 
 /* Header */
@@ -90,8 +104,8 @@ body {
 }
 
 .domain {
-  font-size: 0.9rem;
-  line-height: 1.33rem;
+  font-size: 0.9em;
+  line-height: 1.48em;
   padding-bottom: 4px;
   font-family: "Fira Sans", Helvetica, Arial, sans-serif;
   text-decoration: none;
@@ -109,16 +123,16 @@ body {
 }
 
 .header > h1 {
-  font-size: 1.33rem;
-  line-height: 1.66rem;
+  font-size: 1.33em;
+  line-height: 1.25em;
   width: 100%;
   margin: 30px 0;
   padding: 0;
 }
 
 .header > .credits {
-  font-size: 0.9rem;
-  line-height: 1.33rem;
+  font-size: 0.9em;
+  line-height: 1.48em;
   margin: 0 0 30px 0;
   padding: 0;
   font-style: italic;
@@ -126,10 +140,10 @@ body {
 
 /* Content */
 
-.content {
+#moz-reader-content {
   display: none;
-  font-size: 1rem;
-  line-height: 1.44rem;
+  font-size: 1em;
+  line-height: 1.6em;
 }
 
 .content h1,
@@ -138,19 +152,19 @@ body {
   font-weight: bold;
 }
 
-.content h1 {
-  font-size: 1.33rem;
-  line-height: 1.66rem;
+#moz-reader-content h1 {
+  font-size: 1.33em;
+  line-height: 1.25em;
 }
 
-.content h2 {
-  font-size: 1.1rem;
-  line-height: 1.66rem;
+#moz-reader-content h2 {
+  font-size: 1.1em;
+  line-height: 1.51em;
 }
 
-.content h3 {
-  font-size: 1rem;
-  line-height: 1.66rem;
+#moz-reader-content h3 {
+  font-size: 1em;
+  line-height: 1.66em;
 }
 
 .content a {
@@ -171,26 +185,34 @@ body {
 }
 
 .content p,
-.content img,
 .content code,
 .content pre,
 .content blockquote,
 .content ul,
 .content ol,
-.content li {
+.content li,
+.content figure,
+.content .wp-caption {
   margin: 0 0 30px 0;
 }
 
-.content .wp-caption,
-.content figure {
-  margin: 0 30px 30px 30px;
+.content p > img:only-child,
+.content p > a:only-child > img:only-child,
+.content .wp-caption img,
+.content figure img {
+  display: block;
+}
+
+.content img[moz-reader-center] {
+  margin-left: auto;
+  margin-right: auto;
 }
 
-.content .caption,
-.content .wp-caption-text,
-.content figcaption {
-  font-size: 0.9rem;
-  line-height: 1.33rem;
+#moz-reader-content .caption,
+#moz-reader-content .wp-caption-text,
+#moz-reader-content figcaption {
+  font-size: 0.9em;
+  line-height: 1.48em;
   font-style: italic;
 }
 
@@ -212,6 +234,13 @@ body {
 .dark > .container > .content blockquote {
   -moz-border-start: 2px solid #eeeeee;
 }
+.dark *::-moz-selection {
+  background-color: #FFFFFF;
+  color: #0095DD;
+}
+.dark a::-moz-selection {
+  color: #DD4800;
+}
 
 .content ul,
 .content ol {
@@ -220,7 +249,7 @@ body {
 
 .content ul {
   -moz-padding-start: 30px;
-  list-style: disk;
+  list-style: disc;
 }
 
 .content ol {
@@ -234,30 +263,34 @@ body {
   font-family: "Fira Sans", Helvetica, Arial, sans-serif;
   position: fixed;
   height: 100%;
-  top: 0px;
-  left: 0px;
+  top: 0;
+  left: 0;
   margin: 0;
   padding: 0;
   list-style: none;
-  background-color: #FBFBFB;
+  background-color: #fbfbfb;
   -moz-user-select: none;
-  border-right: 1px solid #B5B5B5;
+  border-right: 1px solid #b5b5b5;
 }
 
 .button {
-  color: white;
   display: block;
-  background-position: center;
   background-size: 24px 24px;
   background-repeat: no-repeat;
-  background-color: transparent;
+  color: #333;
+  background-color: #fbfbfb;
   height: 40px;
+  padding: 0;
+}
+
+.toolbar .button {
   width: 40px;
+  background-position: center;
+  margin-right: -1px;
   border-top: 0;
   border-left: 0;
-  border-right: 0;
+  border-right: 1px solid #b5b5b5;
   border-bottom: 1px solid #c1c1c1;
-  padding: 0;
 }
 
 .button[hidden] {
@@ -267,36 +300,32 @@ body {
 .dropdown {
   text-align: center;
   list-style: none;
-  margin: 0px;
-  padding: 0px;
+  margin: 0;
+  padding: 0;
 }
 
 .dropdown li {
-  margin: 0px;
-  padding: 0px;
+  margin: 0;
+  padding: 0;
 }
 
 /*======= Font style popup =======*/
 
 .dropdown-popup {
-  min-width: 250px;
+  min-width: 300px;
   text-align: start;
   position: absolute;
   left: 48px; /* offset to account for toolbar width */
   z-index: 1000;
-  background-color: #FBFBFB;
+  background-color: #fbfbfb;
   visibility: hidden;
   border-radius: 4px;
-  border: 1px 1px 0 1px solid #B5B5B5;
-  box-shadow: 0px 1px 12px #666;
+  border: 1px 1px 0 1px solid #b5b5b5;
+  box-shadow: 0 1px 12px #666;
 }
 
 .dropdown-popup > hr {
-  width: 100%;
-  height: 0px;
-  border: 0px;
-  border-top: 1px solid #B5B5B5;
-  margin: 0;
+  display: none;
 }
 
 .open > .dropdown-popup {
@@ -337,17 +366,15 @@ body {
 #font-size-buttons > button,
 #color-scheme-buttons > button {
   text-align: center;
-  border-left: 1px solid #B5B5B5;
-  border-right: 0;
-  border-top: 0;
-  border-bottom: 0;
-  padding: 10px;
+  border: 0;
 }
 
 #font-type-buttons > button,
 #font-size-buttons > button {
   width: 50%;
   background-color: transparent;
+  border-left: 1px solid #B5B5B5;
+  border-bottom: 1px solid #B5B5B5;
 }
 
 #color-scheme-buttons > button {
@@ -355,40 +382,62 @@ body {
   font-size: 14px;
 }
 
+#color-scheme-buttons > .dark-button {
+  margin-top: -1px;
+  height: 61px;
+}
+
 #font-type-buttons > button:first-child,
-#font-size-buttons > button:first-child,
-#color-scheme-buttons > button:first-child {
-  border-left: 0px;
+#font-size-buttons > button:first-child {
+  border-left: 0;
 }
 
 #font-type-buttons > button {
   display: inline-block;
-  font-size: 48px;
+  font-size: 58px;
+  height: 100px;
+}
+
+/* Make the serif button content the same size as the sans-serif button content. */
+#font-type-buttons > .serif-button {
+  padding-top: 1px;
+  font-size: 60px;
+}
+
+#font-size-buttons > button,
+#color-scheme-buttons > button {
+  height: 60px;
 }
 
 #font-type-buttons > button:active:hover,
 #font-type-buttons > button.selected,
 #color-scheme-buttons > button:active:hover,
 #color-scheme-buttons > button.selected {
-  box-shadow: inset 0 -3px 0 0 #FC6420;
+  box-shadow: inset 0 -3px 0 0 #fc6420;
+}
+
+#font-type-buttons > button:active:hover,
+#font-type-buttons > button.selected {
+  border-bottom: 1px solid #FC6420;
 }
 
 #font-type-buttons > button > div {
   color: #666;
   font-size: 12px;
+  margin-top: -4px;
 }
 
 .button:hover,
 #font-size-buttons > button:hover,
 #font-type-buttons > button:hover {
-  background-color: #EBEBEB;
+  background-color: #ebebeb;
 }
 
 .dropdown.open,
 .button:active,
 #font-size-buttons > button:active,
 #font-size-buttons > button.selected {
-  background-color: #DADADA;
+  background-color: #dadada;
 }
 
 /* Only used on Android */
@@ -404,12 +453,40 @@ body {
 .plus-button {
   background-color: transparent;
   border: 0;
-  height: 50px;
   background-size: 18px 18px;
   background-repeat: no-repeat;
   background-position: center;
 }
 
+.footer {
+  height: 64px;
+  background-color: #ebebeb;
+  position: absolute;
+  left: 0;
+  width: 100%;
+  text-align: center;
+  padding: 12px 0;
+  box-sizing: border-box;
+  box-shadow: 0 3px 3px -3px rgba(0, 0, 0, 0.35) inset;
+}
+
+.sepia .footer {
+  background-color: #dedad4;
+}
+
+.remove-button {
+  background-image: url("chrome://global/skin/reader/RM-Delete-24x24.svg");
+  margin: 0 auto;
+  border: 1px solid #c1c1c1;
+  background-position: 10px 7px;
+  padding-left: 42px;
+  padding-right: 10px;
+  border-radius: 2px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  font-size: 18px;
+}
+
+
 /*======= Toolbar icons =======*/
 
 /* Android-only controls */
@@ -418,15 +495,23 @@ body {
 }
 
 .close-button {
-  background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg");
+  background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg#close");
   height: 68px;
   background-position: center 8px;
 }
 
-.close-button:active,
 .close-button:hover {
-  background-image: url("chrome://global/skin/reader/RM-Close-hover-24x24.svg");
+  background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg#close-hover");
   background-color: #d94141;
+  border-bottom: 1px solid #d94141;
+  border-right: 1px solid #d94141;
+}
+
+.close-button:hover:active {
+  background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg#close-hover");
+  background-color: #AE2325;
+  border-bottom: 1px solid #AE2325;
+  border-right: 1px solid #AE2325;
 }
 
 .style-button {
@@ -460,4 +545,7 @@ body {
   .toolbar {
     display: none;
   }
+  .footer {
+    display: none;
+  }
 }
diff --git a/LCARStrek/global/aboutSupport.css b/LCARStrek/global/aboutSupport.css
index f1a003a4..d99ed071 100644
--- a/LCARStrek/global/aboutSupport.css
+++ b/LCARStrek/global/aboutSupport.css
@@ -137,7 +137,7 @@ td {
   overflow: hidden;
 }
 
-#reset-box {
+#action-box {
   background-color: #000000;
   border: 1px solid #9C9CFF;
   color: #FF9F00;
@@ -148,10 +148,15 @@ td {
   -moz-margin-end: 0;
   padding: 16px;
   width: 30%;
-  visibility: hidden;
 }
 
-#reset-box:-moz-dir(rtl) {
+#action-box,
+#reset-box,
+#safe-mode-box {
+  display: none;
+}
+
+#action-box:-moz-dir(rtl) {
   float: left;
 }
 
@@ -159,7 +164,7 @@ td {
   margin-top: 0;
 }
 
-#reset-box > button {
+#action-box > button {
   display: block;
 }
 
diff --git a/LCARStrek/global/checkbox.css b/LCARStrek/global/checkbox.css
index 759ec780..3a60c41c 100644
--- a/LCARStrek/global/checkbox.css
+++ b/LCARStrek/global/checkbox.css
@@ -47,6 +47,7 @@ checkbox:-moz-focusring > .checkbox-label-center-box > .checkbox-label-box {
 
 /* ..... disabled state ..... */
 
+checkbox[disabled="true"] > .checkbox-check,
 checkbox[disabled="true"] > .checkbox-spacer-box > .checkbox-check {
   border: 1px solid #8050B0;
   background-color: #000000;
@@ -61,16 +62,26 @@ checkbox[disabled="true"] > .checkbox-label-center-box > .checkbox-label-box {
 .checkbox-check {
   border-radius: 2px;
   border: 1px solid #FF9F00;
-  width: 12px;
-  height: 12px;
+  width: 1em;
+  height: 1em;
+  min-width: 12px;
+  min-height: 12px;
   background: transparent 50% 50% no-repeat;
 }
 
+checkbox > .checkbox-check {
+  -moz-margin-end: 4px;
+}
+
+checkbox:not([disabled="true"]):hover > .checkbox-check,
+checkbox:not([disabled="true"]):hover:active > .checkbox-check,
 checkbox:not([disabled="true"]):hover > .checkbox-spacer-box > .checkbox-check,
 checkbox:not([disabled="true"]):hover:active > .checkbox-spacer-box > .checkbox-check {
   border: 1px solid #FFCF00;
 }
 
+checkbox:not([disabled="true"]):hover > .checkbox-label-box,
+checkbox:not([disabled="true"]):hover:active > .checkbox-label-box,
 checkbox:not([disabled="true"]):hover > .checkbox-label-center-box > .checkbox-label-box,
 checkbox:not([disabled="true"]):hover:active > .checkbox-label-center-box > .checkbox-label-box {
   color: #FFCF00;
@@ -78,16 +89,20 @@ checkbox:not([disabled="true"]):hover:active > .checkbox-label-center-box > .che
 
 /* ..... checked state ..... */
 
+checkbox[checked="true"] > .checkbox-check,
 checkbox[checked="true"] > .checkbox-spacer-box > .checkbox-check {
   background-image: url("chrome://global/skin/checkbox/cbox-check.gif");
 }
 
+checkbox[checked="true"]:hover > .checkbox-check,
+checkbox[checked="true"]:hover:active > .checkbox-check,
 checkbox[checked="true"]:hover > .checkbox-spacer-box > .checkbox-check,
 checkbox[checked="true"]:hover:active > .checkbox-spacer-box > .checkbox-check {
   background-image: url("chrome://global/skin/checkbox/cbox-check-hover.gif");
 }
 
-checkbox[checked="true"][disabled="true"] > .checkbox-spacer-box > .checkbox-check {
+checkbox[checked="true"][disabled="true"] .checkbox-check,
+checkbox[checked="true"][disabled="true"] > .checkbox-spacer-box > > .checkbox-check {
   background-image: url("chrome://global/skin/checkbox/cbox-check-disabled.gif") !important;
 }
 
@@ -114,12 +129,18 @@ caption > checkbox:not([disabled="true"]):hover:active > .checkbox-label-center-
   color: inherit;
 }
 
+caption > checkbox:not([disabled="true"]) > .checkbox-check,
+caption > checkbox:not([disabled="true"]):hover > .checkbox-check,
+caption > checkbox:not([disabled="true"]):hover:active > .checkbox-check,
 caption > checkbox:not([disabled="true"]) > .checkbox-spacer-box > .checkbox-check,
 caption > checkbox:not([disabled="true"]):hover > .checkbox-spacer-box > .checkbox-check,
 caption > checkbox:not([disabled="true"]):hover:active > .checkbox-spacer-box > .checkbox-check {
   border-color: #000000;
 }
 
+caption > checkbox[checked="true"] > .checkbox-check,
+caption > checkbox[checked="true"]:hover > .checkbox-check,
+caption > checkbox[checked="true"]:hover:active > .checkbox-check,
 caption > checkbox[checked="true"] > .checkbox-spacer-box > .checkbox-check,
 caption > checkbox[checked="true"]:hover > .checkbox-spacer-box > .checkbox-check,
 caption > checkbox[checked="true"]:hover:active > .checkbox-spacer-box > .checkbox-check {
diff --git a/LCARStrek/global/checkbox/cbox-check-inverted.gif b/LCARStrek/global/checkbox/cbox-check-inverted.gif
new file mode 100755
index 00000000..f5b94ba6
Binary files /dev/null and b/LCARStrek/global/checkbox/cbox-check-inverted.gif differ
diff --git a/LCARStrek/global/config.css b/LCARStrek/global/config.css
index 1f4c4f1c..669f75fa 100644
--- a/LCARStrek/global/config.css
+++ b/LCARStrek/global/config.css
@@ -6,93 +6,48 @@
    == Styles for about:config
    ======================================================================= */
 
-@import url("chrome://global/skin/");
-@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
-
-#config {
-  padding: 0;
-}
-
-/* ::::: warning screen ::::: */
-
-#warningScreen
-{
-  background: #000000;
+#warningScreen {
+  font-size: 15px;
+  padding-top: 0;
+  padding-bottom: 0;
+  -moz-padding-start: calc(48px + 4.6em);
+  -moz-padding-end: 48px;
 }
 
-#warningBox
-{
-  background: #000000;
-  color: #FF9F00;
-  border: 1px solid #9C9FFF;
-  border-radius: 10px;
-  padding: 3em;
-  -moz-padding-start: 30px;
-  -moz-margin-start: 1em;
-  -moz-margin-end: 1em;
+.title {
+  background-image: url("chrome://global/skin/icons/warning.svg");
 }
 
-#warningInnerBox
-{
- max-width: 50em;
+#warningTitle {
+  font-weight: lighter;
+  line-height: 1.2;
+  color: #9C9CFF;
+  margin: 0;
+  margin-bottom: .5em;
 }
 
-#warningTitle
-{
-  margin: 0 0 .6em;
-  font-size: 160%;
-  border-bottom: 1px solid #008484;
+#warningText {
+  margin: 1em 0;
 }
 
-#warningText
-{
-  font-size: 110%;
-  -moz-margin-start: 0;
-}
-
-#warningButton
-{
+#warningButton {
   margin-top: 0.6em;
 }
 
-#showWarningNextTime
-{
-  margin-top: 0.6em;
+#filterRow {
+  margin-top: 4px;
+  -moz-margin-start: 4px;
 }
 
-#exclam
-{
-  list-style-image: url("chrome://global/skin/icons/alert-exclam.gif");
-  -moz-margin-end: 3em;
+#configTree {
+  margin-top: 4px;
+  margin-bottom: 4px;
 }
 
-/* ::::: tree rows ::::: */
-
-#configTreeBody::-moz-tree-cell-text(user)
-{
+#configTreeBody::-moz-tree-cell-text(user) {
   font-weight: bold;
 }
 
-#configTreeBody::-moz-tree-cell-text(locked)
-{
+#configTreeBody::-moz-tree-cell-text(locked) {
   font-style: italic;
 }
-
-#configTree
-{
-  margin-top: 3px;
-}
-
-#filterRow
-{
-}
-
-#filterRow > label
-{
-  -moz-margin-start: 0;
-}
-
-#textbox
-{
-  -moz-margin-end: 0;
-}
diff --git a/LCARStrek/global/icons/warning.svg b/LCARStrek/global/icons/warning.svg
new file mode 100644
index 00000000..57d228ad
--- /dev/null
+++ b/LCARStrek/global/icons/warning.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" viewBox="0 0 60 60" enable-background="new 0 0 60 60">
+  <linearGradient id="gradient" gradientUnits="userSpaceOnUse" x1="30" y1="10" x2="30" y2="50">
+    <stop offset="0" style="stop-color: #FFCF00"/>
+    <stop offset="1" style="stop-color: #FF9F00"/>
+  </linearGradient>
+  <path fill="url(#gradient)" d="M49.316,42.867L33.829,12.7c-0.879-1.715-2.274-2.7-3.828-2.7c-1.554,0-2.949,0.985-3.829,2.702
+    L10.685,42.864c-0.869,1.69-0.913,3.482-0.121,4.909C11.35,49.187,12.817,50,14.591,50h30.82c1.772,0,3.24-0.81,4.023-2.224
+    C50.227,46.349,50.185,44.56,49.316,42.867z M32.176,22.304l-0.48,14.304h-3.424L27.76,22.304H32.176z M30,44.896
+    c-1.44,0-2.592-1.184-2.592-2.592c0-1.44,1.152-2.592,2.592-2.592c1.472,0,2.592,1.152,2.592,2.592
+    C32.592,43.712,31.472,44.896,30,44.896z"/>
+</svg>
\ No newline at end of file
diff --git a/LCARStrek/global/in-content/common.css b/LCARStrek/global/in-content/common.css
index 3faf41f1..f06fc51c 100644
--- a/LCARStrek/global/in-content/common.css
+++ b/LCARStrek/global/in-content/common.css
@@ -8,7 +8,8 @@
 @namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
 
 html|body,
-xul|page {
+xul|page,
+xul|window {
   font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
   -moz-appearance: none;
   background-color: #000000;
@@ -25,13 +26,20 @@ html|h1 {
   font-size: 2.5em;
   font-weight: lighter;
   line-height: 1.2;
+  color: #9C9CFF;
   margin: 0;
   margin-bottom: .5em;
 }
 
+html|hr {
+  border-style: solid none none none;
+  border-color: #9C9CFF;
+}
+
 xul|caption {
 }
 
+xul|caption > xul|checkbox,
 xul|caption > xul|label {
   margin-top: 0;
   margin-bottom: 0;
@@ -58,9 +66,7 @@ xul|prefpane > xul|*.content-box {
 xul|groupbox {
   -moz-appearance: none;
   border: none;
-  margin-top: 15px;
-  margin-bottom: 15px;
-  -moz-margin-end: 0;
+  margin: 15px 0 0;
   -moz-padding-start: 0;
   -moz-padding-end: 0;
   font-size: 1.25rem;
@@ -201,7 +207,7 @@ xul|menulist > xul|*.menulist-label-box {
   padding-left: 10px !important;
 }
 
-xul|menulist > xul|*.menulist-label-box > xul|*.menulist-icon {
+xul|menulist > xul|*.menulist-label-box > xul|*.menulist-icon[src] {
   -moz-margin-end: 5px;
 }
 
@@ -363,7 +369,6 @@ xul|button[type="menu"] > xul|menupopup xul|menuseparator {
   height: 30px;
   color: #333;
   line-height: 20px;
-  text-shadow: 0 1px 1px #fefffe;
   padding-right: 10px;
   padding-left: 10px;
   border: 1px solid #c1c1c1;
@@ -388,34 +393,52 @@ xul|textbox[disabled="true"] {
 /* Links */
 
 html|a,
-xul|*.text-link,
-xul|*.inline-link {
+.text-link,
+.inline-link {
 /*  line-height: 22px;*/
   color: #3333FF;
   text-decoration: none;
 }
 
 html|a:hover,
-xul|*.text-link:hover,
-xul|*.inline-link:hover {
+.text-link:hover,
+.inline-link:hover {
   color: #FFCF00;
   text-decoration: underline;
 }
 
 html|a:hover:active,
-xul|*.text-link:hover:active,
-xul|*.inline-link:hover:active {
+.text-link:hover:active,
+.inline-link:hover:active {
   color: #FF9F00;
   text-decoration: underline;
 }
 
 /* Checkboxes and radio buttons */
 /*
+/ Hide the actual checkbox /
+html|input[type="checkbox"] {
+  opacity: 0;
+  position: absolute;
+}
+
+/ Create a box to style as the checkbox /
+html|input[type="checkbox"] + html|label:before {
+  display: inline-block;
+  content: "";
+  vertical-align: middle;
+}
+
+html|input[type="checkbox"] + html|label {
+  line-height: 0px;
+}
+
 xul|checkbox {
   -moz-margin-start: 0;
 }
 
-xul|*.checkbox-check {
+xul|*.checkbox-check,
+html|input[type="checkbox"] + html|label:before {
   -moz-appearance: none;
   width: 23px;
   height: 23px;
@@ -430,7 +453,8 @@ xul|*.checkbox-check {
   box-shadow: 0 1px 1px 0 #fff, inset 0 2px 0 0 rgba(0,0,0,0.03);
 }
 
-xul|checkbox:not([disabled="true"]):hover > xul|*.checkbox-check {
+xul|checkbox:not([disabled="true"]):hover > xul|*.checkbox-check,
+html|input[type="checkbox"]:not(:disabled) + html|label:hover:before {
   border-color: #0095dd;
 }
 
@@ -440,7 +464,12 @@ xul|*.checkbox-check[checked] {
                     linear-gradient(#fff, rgba(255,255,255,0.8)) !important;
 }
 
-xul|checkbox[disabled="true"] > xul|*.checkbox-check {
+html|input[type="checkbox"]:checked + html|label:before {
+  background-image: url("chrome://global/skin/in-content/check.svg#check"), linear-gradient(#fff, rgba(255,255,255,0.8)) !important;
+}
+
+xul|checkbox[disabled="true"] > xul|*.checkbox-check,
+html|input[type="checkbox"]:disabled + html|label {
   opacity: 0.5;
 }
 
@@ -518,15 +547,18 @@ xul|*#categories[keyboard-navigation="true"]:-moz-focusring > xul|*.category[cur
   border-top: 1px #ffffff dotted;
   border-bottom: 1px #ffffff dotted;
 }
-
+*/
 *|*.category-name {
+/*
   line-height: 22px;
   font-size: 1.25rem;
   padding-bottom: 2px;
   -moz-padding-start: 9px;
   margin: 0;
+*/
+  -moz-user-select: none;
 }
-
+/*
 *|*.category-icon {
   width: 24px;
   height: 24px;
@@ -546,6 +578,7 @@ xul|*#categories[keyboard-navigation="true"]:-moz-focusring > xul|*.category[cur
   font-weight: normal;
   line-height: 40px;
   margin: 0;
+  -moz-user-select: none;
 }
 
 /* File fields */
@@ -645,6 +678,11 @@ xul|tree {
   border: 1px solid #c1c1c1;
 }
 
+xul|tree:-moz-focusring,
+xul|richlistbox:-moz-focusring {
+  border: 1px dotted #0095dd;
+}
+
 xul|listheader,
 xul|treecols {
   -moz-appearance: none;
@@ -662,7 +700,7 @@ xul|treecolpicker {
   padding: 5px 10px;
 }
 
-xul|treecol:not([hideheader="true"]):hover,
+xul|treecol:not([hideheader="true"]):not([sortable="false"]):hover,
 xul|treecolpicker:hover {
   background-color: #dadada;
   color: #333;
@@ -676,20 +714,14 @@ xul|treecolpicker {
 }
 
 xul|treecol:not([hideheader="true"]) > xul|*.treecol-sortdirection[sortDirection] {
-  list-style-image: url("chrome://global/skin/in-content/sorter.png");
-  width: 12px;
-  height: 8px;
+  list-style-image: url("chrome://global/skin/in-content/dropdown.svg#dropdown");
+  width: 18px;
+  height: 18px;
 }
 
-xul|treecol:not([hideheader="true"]) > xul|*.treecol-sortdirection[sortDirection="descending"] {
+xul|treecol:not([hideheader="true"]) > xul|*.treecol-sortdirection[sortDirection="ascending"] {
   transform: scaleY(-1);
 }
-
-@media (min-resolution: 2dppx) {
-  xul|treecol:not([hideheader="true"]) > xul|*.treecol-sortdirection[sortDirection] {
-    list-style-image: url("chrome://global/skin/in-content/sorter@2x.png");
-  }
-}
 */
 /* === END common.inc.css === */
 /*
@@ -698,6 +730,7 @@ xul|caption {
 }
 
 xul|button,
+html|button,
 xul|colorpicker[type="button"],
 xul|menulist {
   margin: 2px 4px;
@@ -714,7 +747,6 @@ xul|checkbox {
 
 xul|radio {
   -moz-binding: url("chrome://global/content/bindings/radio.xml#radio");
-  -moz-margin-start: 0;
   -moz-padding-start: 0;
 }
 
@@ -724,8 +756,8 @@ xul|*.checkbox-icon {
 }
 */
 html|a:-moz-focusring,
-xul|*.text-link:-moz-focusring,
-xul|*.inline-link:-moz-focusring {
+.text-link:-moz-focusring,
+.inline-link:-moz-focusring {
   /* Don't specify the outline-color, we should always use initial value. */
   outline: 1px dotted;
 }
diff --git a/LCARStrek/global/in-content/info-pages.css b/LCARStrek/global/in-content/info-pages.css
index e21ddebc..b75ddd4a 100644
--- a/LCARStrek/global/in-content/info-pages.css
+++ b/LCARStrek/global/in-content/info-pages.css
@@ -77,6 +77,10 @@ ul {
   min-width: 150px;
 }
 
+.button-container > button:first-child {
+  -moz-margin-start: 0;
+}
+
 /* Trees */
 tree {
   min-height: 12em;
diff --git a/LCARStrek/global/media/videoClickToPlayButton.svg b/LCARStrek/global/media/videoClickToPlayButton.svg
index d5e21c78..62ee0448 100644
--- a/LCARStrek/global/media/videoClickToPlayButton.svg
+++ b/LCARStrek/global/media/videoClickToPlayButton.svg
@@ -1,3 +1,7 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+
 <svg
    xmlns:dc="http://purl.org/dc/elements/1.1/"
    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
@@ -42,58 +46,34 @@
        height="1.25"
        color-interpolation-filters="sRGB"
        id="dropShadow">
-      <feGaussianBlur
-         result="blur"
-         stdDeviation="2"
-         in="SourceAlpha"
-         id="dropShadowBlur" />
-      <feColorMatrix
-         values="1 0 0 0  0
-                 0 1 0 0  0
-                 0 0 1 0  0
-                 0 0 0 .5 0"
-         type="matrix"
-         result="bluralpha"
-         id="dropShadowColor" />
-      <feOffset
-         result="offsetBlur"
-         dy="1"
-         dx="0"
-         in="bluralpha"
-         id="dropShadowOffset" />
-      <feMerge>
-        <feMergeNode
-           in="offsetBlur" />
-        <feMergeNode
-           in="SourceGraphic" />
-      </feMerge>
+      <feDropShadow dx="0" dy="1" flood-opacity="0.5"/>
     </filter>
     <mask id="dropShadowMask">
       <path
          d="M47.285,30.991L23.75,17.24c-0.357-0.208-0.692-0.278-0.969-0.221 C22.32,17.115,22,17.555,22,18.252v27.499c0,1.112,0.797,1.568,1.75,1.011l23.535-13.748C48.238,32.458,48.238,31.547,47.285,30.991 z M0,0v64h64V0H0z M32,60C16.536,60,4,47.464,4,32S16.536,4,32,4s28,12.536,28,28S47.464,60,32,60z"
          id="dropShadowMaskPath"
-         style="fill:#000000;fill-opacity:1;stroke:none" />
-    </mask>
+         style="fill:#000000;" />
+    </mask>       
   </defs>
-  <path
+  <path 
      d="M32,4C16.536,4,4,16.536,4,32s12.536,28,28,28s28-12.536,28-28S47.464,4,32,4z M47.285,33.014 L23.75,46.762C22.797,47.319,22,46.863,22,45.751v-27.5c0-0.697,0.32-1.137,0.781-1.232c0.277-0.058,0.612,0.012,0.969,0.221 l23.535,13.751C48.238,31.546,48.238,32.458,47.285,33.014z"
      mask="url(#dropShadowMask)"
      id="playButtonShadow"
-     style="fill:white;fill-opacity:1;stroke:none;filter:url(#dropShadow)" />
+     style="filter:url(#dropShadow);" />
   <path
      d="M22.781,17.019C22.32,17.114,22,17.555,22,18.251v27.5c0,1.112,0.797,1.568,1.75,1.011 l23.535-13.748c0.953-0.556,0.953-1.467,0-2.023L23.75,17.24C23.393,17.031,23.058,16.961,22.781,17.019z"
      id="playButtonArrow"
-     style="fill:url(#arrowGradient);fill-opacity:1;stroke:none" />
-  <path
+     style="fill:url(#arrowGradient);" />
+  <path 
      d="M32,4C16.536,4,4,16.536,4,32s12.536,28,28,28s28-12.536,28-28S47.464,4,32,4z M47.285,33.014 L23.75,46.762C22.797,47.319,22,46.863,22,45.751v-27.5c0-0.697,0.32-1.137,0.781-1.232c0.277-0.058,0.612,0.012,0.969,0.221 l23.535,13.751C48.238,31.546,48.238,32.458,47.285,33.014z"
      id="playButton"
-     style="fill:url(#whiteGradient);fill-opacity:1;stroke:none" />
+     style="fill:url(#whiteGradient);" />
   <path
      d="M32,4C16.536,4,4,16.536,4,32s12.536,28,28,28s28-12.536,28-28S47.464,4,32,4z M32,59C17.112,59,5,46.888,5,32S17.112,5,32,5s27,12.112,27,27S46.888,59,32,59z M47.789,30.127l-23.534-13.75 C23.826,16.126,23.396,16,22.976,16c-0.135,0-0.27,0.014-0.398,0.041C21.62,16.238,21,17.106,21,18.251v27.5 C21,47.075,21.812,48,22.977,48c0.423,0,0.854-0.126,1.279-0.375L47.79,33.877c0.769-0.449,1.21-1.132,1.21-1.875 S48.559,30.576,47.789,30.127z M47.285,33.014L23.75,46.762C23.474,46.924,23.211,47,22.977,47C22.402,47,22,46.541,22,45.751v-27.5 c0-0.697,0.32-1.137,0.781-1.232L22.976,17c0.233,0,0.498,0.079,0.775,0.24l23.535,13.751 C48.238,31.546,48.238,32.458,47.285,33.014z"
      id="playButtonEdgeHighlights"
-     style="fill:black;fill-opacity:.3;stroke:none" />
+     style="fill:#000000;fill-opacity:.3;" />
   <path
      d="M32,4C16.536,4,4,16.536,4,32c0,0.167,0.01,0.333,0.013,0.5 C4.28,17.268,16.704,5,32,5c15.296,0,27.72,12.268,27.987,27.5C59.99,32.333,60,32.167,60,32C60,16.536,47.464,4,32,4z M47.285,33.014L23.75,46.762C22.797,47.319,22,46.863,22,45.751v1c0,1.112,0.797,1.568,1.75,1.011l23.535-13.748 c0.697-0.406,0.879-1.003,0.556-1.512C47.723,32.688,47.541,32.864,47.285,33.014z"
      id="playButtonTopEdgeHighlights"
-     style="fill:#402800;fill-opacity:.8;stroke:none" />
+     style="fill:#402800;fill-opacity:.8;" />
 </svg>
diff --git a/LCARStrek/mozapps/extensions/extensions.css b/LCARStrek/mozapps/extensions/extensions.css
index 85b5523f..60488483 100644
--- a/LCARStrek/mozapps/extensions/extensions.css
+++ b/LCARStrek/mozapps/extensions/extensions.css
@@ -320,14 +320,14 @@
 }
 
 #header-utils-btn {
-  list-style-image: url("chrome://mozapps/skin/extensions/utilities.png");
+  list-style-image: url("chrome://mozapps/skin/extensions/utilities.svg#utilities");
   -moz-margin-end: 16px;
 }
 
 #header-utils-btn:hover,
 #header-utils-btn:hover:active,
 #header-utils-btn[open="true"] {
-  list-style-image: url("chrome://mozapps/skin/extensions/utilities-hover.png");
+  list-style-image: url("chrome://mozapps/skin/extensions/utilities.svg#utilities-hover");
 }
 
 #header-utils-btn > .button-box > .button-menu-dropmarker {
diff --git a/LCARStrek/mozapps/extensions/utilities-hover.png b/LCARStrek/mozapps/extensions/utilities-hover.png
deleted file mode 100644
index e8ab8cd1..00000000
Binary files a/LCARStrek/mozapps/extensions/utilities-hover.png and /dev/null differ
diff --git a/LCARStrek/mozapps/extensions/utilities.png b/LCARStrek/mozapps/extensions/utilities.png
deleted file mode 100644
index 1aaba92e..00000000
Binary files a/LCARStrek/mozapps/extensions/utilities.png and /dev/null differ
diff --git a/LCARStrek/mozapps/extensions/utilities.svg b/LCARStrek/mozapps/extensions/utilities.svg
new file mode 100644
index 00000000..e6f3f610
--- /dev/null
+++ b/LCARStrek/mozapps/extensions/utilities.svg
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     x="0"
+     y="0"
+     width="16"
+     height="16"
+     viewBox="0 0 16 16">
+  <style>
+    use:not(:target) {
+      display: none;
+    }
+    use {
+      fill: #FF9F00;
+    }
+    use[id$="-hover"] {
+      fill: #000000;
+    }
+    use[id$="-native"] {
+      fill: GrayText;
+    }
+  </style>
+  <defs style="display: none;">
+    <path id="utilities-shape" d="m11.5,13.9l-.6-1.5c.3-.2 .5-.4 .8-.6 .2-.2 .4-.5 .6-.7l1.5,.6c.3,.1 .6,0 .7-.3l.4-1c.1-.3 0-.6-.3-.7l-1.5-.6c.1-.6 .1-1.3 0-2l1.5-.6c.3-.1 .4-.4 .3-.7l-.4-1c-.1-.3-.4-.4-.7-.3l-1.5,.6c-.2-.3-.4-.5-.6-.8-.2-.1-.5-.3-.7-.5l.6-1.5c.1-.3 0-.6-.3-.7l-.9-.4c-.3-.1-.6,0-.7,.3l-.6,1.5c-.6-.1-1.3-.1-2,0l-.6-1.5c-.1-.3-.4-.4-.7-.3l-1,.4c-.2,.1-.3,.4-.2,.6l.6,1.5c-.3,.3-.5,.5-.8,.7-.2,.3-.4,.5-.6,.8l-1.5-.7c-.3-.1-.6,0-.7,.3l-.4,.9c-.1,.3 0,.6 .3,.7l1.5,.7c-.1,.6-.1,1.3 0,1.9l-1.5,.6c-.3,.1-.4,.4-.3,.7l.4,1c.1,.3 .4,.4 .7,.3l1.5-.6c.2,.3 .4,.5 .6,.8 .2,.2 .5,.4 .7,.6l-.6,1.5c-.1,.3 0,.6 .3,.7l1,.4c.3,.1 .6,0 .7-.3l.6-1.5c.6,.1 1.3,.1 2,0l.6,1.5c.1,.3 .4,.4 .7,.3l1-.4c.1-.1 .3-.4 .1-.7zm-5.1-4.2c-.9-.9-.9-2.4 0-3.3 .9-.9 2.4-.9 3.3,0 .9,.9 .9,2.4 0,3.3-.9,.9-2.4,.9-3.3,0z"/>
+  </defs>
+  <use id="utilities" xlink:href="#utilities-shape"/>
+  <use id="utilities-native" xlink:href="#utilities-shape"/>
+</svg>