diff --git a/common/en/kde-default.css b/common/en/kde-default.css
--- a/common/en/kde-default.css
+++ b/common/en/kde-default.css
@@ -22,7 +22,7 @@
 /*
    Important note: these setting may be overridden by localised CSS.  Do not 
    add here any localization-sensitive style declarations.
-   
+
    Any updates should be validated, e.g. http://jigsaw.w3.org/css-validator/ */
 
 /* Note: "should be inherit" means that in a proper browser inherit should work.
@@ -83,21 +83,13 @@
   padding-right: 1em;
 }
 
-/* Links in Navigation */
-
-.navLeft a:link, .navCenter a:link, .navRight a:link, .header a:link, .header a:visited, .bottom-nav a:link, .bottom-nav a:visited {
-  color: #41597A;
-  font-weight: bold;
-}
-
-
 /* Nice link colors for the main text */
 
 :link { 
   color: #41597A;
 }
 
-:visited { 
+a, :visited { 
   color: #597ba8;
 }
 
@@ -125,18 +117,14 @@
 }
 
 .header {
-  background: #3E91EB none;
-  border-bottom: 1px solid #206dcd;
+  background: #54a3d8 none;
   border-top: 1px solid white;
   color: white;
   font-size: small;
   height: 1.7em;
   line-height: 1em;
   margin: 0px;
-  padding-bottom: 0px;
-  padding-left: 1em;
-  padding-right: 0px;
-  padding-top: 0px;
+  padding: 0px;
   vertical-align: middle;
 }
 
@@ -156,10 +144,6 @@
   vertical-align: middle; 
 }
 
-#logo {
-  background: url('kde_logo_bg.png') transparent repeat;
-}
-
 /* A little bit of padding makes the tables for keybindings etc much easier to read */
 
 table { 
@@ -211,8 +195,8 @@
 }
 */
 
-p { 
-  text-align: justify; 
+p {
+  text-align: justify;
 }
 
 /* More specific settings */
@@ -224,6 +208,16 @@
   font-family: sans-serif;
 }
 
+h1, h2, h3, h4, h5, h6 {
+  color: #525052;
+  background-color: transparent;
+  font-weight: 550;
+}
+
+h1,h2,h3 {
+    line-height: 1.5em;
+}
+
 /* Visual cues for GUI elements etc in the text */
 
 .guimenu, .guimenuitem, .guisubmenu { 
@@ -241,11 +235,15 @@
   color: rgb(0,0,0); /* should be inherit */
 }
 
-.shortcut .keycap { 
+.shortcut .keycap {
   background-color: rgb(220,220,220);
   color: rgb(0,0,0); /* should be inherit */
 }
 
+.keycap {
+  margin-left: 4px;
+}
+
 .question { 
   font-weight: bolder; 
 }
@@ -262,11 +260,6 @@
   font-weight: bold;
 }
 
-h1, h2, h3, h4, h5, h6 { 
-  color: rgb(82,80,82);
-  background-color: transparent;
-}
-
 .arg, .parameter, .replaceable { 
   background-color: rgb(255,255,255);
   color: rgb(0,128,64);
@@ -309,8 +302,6 @@
 
 .inlinemediaobject { 
   vertical-align: baseline; 
-  padding-right: 1em;
-  padding-left: 1em;		
 }
 
 /* An idea that could be nice: a search engine looking for specific
@@ -328,4 +319,23 @@
   font-family: monospace;
   color: rgb(0,0,0);
 }
-
+code.email {
+  font-size: 87.5%;
+  color: #e83e8c;
+  word-break: break-word;
+}
+a {
+  color: #007bff;
+  text-decoration: none;
+  background-color: transparent;
+}
+a:hover {
+  color: #0056b3;
+  text-decoration: underline;
+}
+dt {
+  font-weight: 500;
+}
+.date {
+  margin-right: 4px;
+}
diff --git a/common/en/kde-docs.css b/common/en/kde-docs.css
--- a/common/en/kde-docs.css
+++ b/common/en/kde-docs.css
@@ -8,6 +8,11 @@
     padding: 0;
     width: 100%;
     height: 100%;
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.5;
+    color: #212529;
+    text-align: left;
 }
 
 /* These two divs force the content to fill up at least the viewport, which
@@ -88,61 +93,31 @@
 div.tip, div.note, div.warning, div.important {
     padding: 6pt;
     padding-top: 3pt;
+    border-radius: 3px;
 }
 
 div.tip > .title, div.warning > .title, div.note > .title, div.important > .title {
-    padding: 4pt 1cm;
-    margin: 0;
-    margin-top: 4pt;
+    font-weight: 550;
 }
 
 div.tip {
-    border: 1px solid #EEF;
-    border-left: 1px solid #88F;
-    background: #EFEFFF;
-}
-
-div.tip > .title {
-    border: 1px solid #88F;
-    background: #CFCFFF;
-    color: #222;
+    border: 2px solid #3daee9;
+    background: #cbe3ef;
 }
 
 div.important {
-    border: 1px solid #FF2;
-    border-left: 1px solid #888;
-    background: #FF7;
-}
-
-div.important > .title {
-    border: 1px solid #836900;
-    background: #FC0;
-    color: #222;
+    border: 2px solid #f67400;
+    background: #f0d7c1;
 }
 
 div.note {
-    border: 1px solid #EEE;
-    border-left: 1px solid #888;
-    background: #EFEFEF;
-}
-
-div.note > .title {
-    border: 1px solid #888;
-    background: #CFCFCF;
-    color: #222;
+    border: 2px solid #27ae60;
+    background: #c7e2d4;
 }
 
 div.warning {
-    border: 1px solid #FEE;
-    border-left: 1px solid #F88;
-    background: #FFEFEF;
-    margin-bottom: 6pt;
-}
-
-div.warning > .title {
-    border: 1px solid #F88;
-    background: #FFAFAF;
-    color: #222;
+    border: 2px solid #da4453;
+    background: #ebced1;
 }
 
 /* Make the content wrapping div have a nice margin. */
@@ -273,44 +248,28 @@
 #header {
     width: 100%;
     height: 51px;
-    color: #535353;
-    background: #eeeeee;
-    border-bottom: #bcbcbc 1px solid;
+    color: white;
+    font-height: 3em;
+    background: #54a3d8;
 }
 
 #header_content {
-    margin: 0 auto;
-    width: 80%;
-    height: 51px;
-    background: url("top.jpg") top left repeat-x;
+    margin-left: 1em;
+    background: white;
+    height: 47px;
+}
+#header_left {
+    background: #54a3d8;
+    display: inline-block;
+    height: 47px;
+    padding-right: 1em;
 }
 
 #header_right img {
     position: relative;
     top: 8px; /* Vertically center */
 }
 
-#header_left {
-    background: url("top-left.jpg") top left no-repeat;
-    padding-left: 20px;
-    height: 51px;
-}
-
-#header_right {
-    background: url("top-right.jpg") top right no-repeat;
-    color: white;
-    padding-right: 20px;
-    height: 51px;
-    text-align: left;
-    font-size: 18pt;
-    font-weight: bold;
-    vertical-align: middle;
-    text-shadow: #112 2px 2px 2px;
-    white-space: nowrap;
-    overflow: hidden;
-    line-height: 51px;
-}
-
 /* Used for the text and footer area at the bottom. */
 #footer {
     width: 100%;
@@ -360,3 +319,11 @@
         border-top: 1px solid #DDD;
     }
 }
+
+img {
+    max-width: 100%;
+}
+
+.productname {
+    margin-left: 5px;
+}
diff --git a/common/en/top-kde.jpg b/common/en/top-kde.jpg
index 0000000000000000000000000000000000000000..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001

literal 0
Hc$@<O00001