Apply new Qt brand styling

Update typography and colors to match new Qt brand. Also fix
site header and footer to look like those in qt.io and blog.qt.io.

Change-Id: I28294fe15af76b80422f921c18d287e2a1cf26f5
Reviewed-by: Tero Kojo <tero.kojo@qt.io>

2 files changed, 236 insertions, 191 deletions

diff --git a/website/online.css b/website/online.css
index f246beb..a1a1324 100644
--- a/website/online.css
+++ b/website/online.css
@@ -1,6 +1,6 @@
 /* -------------------------------------------------------
    Eric Meyer's Reset CSS v2.0 + ios landscape font-size hack
-------------------------------------------------------- */	
+------------------------------------------------------- */
 
 html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}
 
@@ -30,20 +30,15 @@ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abb
   float:right;
   line-height:18px;
   min-width:95px;
-  min-height: 60px;
   position:relative;
   text-align:center;
   margin:28px 0 0 0
 }
-#navbar .navbar-toggle:hover figure {
-  background:#5caa15
-}
 #navbar .navbar-toggle span {
   color:#bdbebf;
   font-weight:300
 }
 #navbar .navbar-toggle figure {
-  background:#7fc241;
   border-radius:100%;
   -webkit-border-radius:100%;
   -moz-border-radius:100%;
@@ -62,9 +57,9 @@ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abb
 }
 #navbar .navbar-toggle figure span.line {
   display:inline-block;
-  width:1.125em;
-  height:0.1875em;
-  background:#fff;
+  width:1.5em;
+  height:0.125em;
+  background:#09102b;
   transition:0.3s;
   position:relative;
   vertical-align:middle;
@@ -72,9 +67,9 @@ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abb
 }
 #navbar .navbar-toggle figure span.line:before,#navbar .navbar-toggle figure span.line:after {
   display:inline-block;
-  width:1.125em;
-  height:0.1875em;
-  background:#fff;
+  width:1.5em;
+  height:0.125em;
+  background:#09102b;
   position:absolute;
   left:0;
   content:'';
@@ -87,13 +82,10 @@ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abb
   -o-transition:0.3s
 }
 #navbar .navbar-toggle figure span.line:before {
-  top:6px
+  top:8px
 }
 #navbar .navbar-toggle figure span.line:after {
-  top:-6px
-}
-#navbar .navbar-toggle.opened figure {
-  background:#5caa15
+  top:-8px
 }
 #navbar .navbar-toggle.opened span {
   color:#5caa15
@@ -129,17 +121,17 @@ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abb
   float:left;
   width:31px;
   padding:20px 8px;
-  margin:0 15px 0 0
+  margin:0 25px 0 0
 }
 #navbar .navbar-oneQt:before {
   content:attr(data-icon);
   position:absolute;
-  top:15px;
+  top:19px;
   left:0;
   color:#41cd52;
   font-family:'Qt Icons';
   line-height:1;
-  font-size:3.125em;
+  font-size:40px;
   transition:all 0.2s ease-in-out;
   -webkit-transition:all 0.2s ease-in-out;
   -moz-transition:all 0.2s ease-in-out;
@@ -172,13 +164,12 @@ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abb
 #mainmenu li a {
   display:block;
   padding:29px 0.7em;
-  font-size:1.125em;
   font-weight:300;
   line-height:20px;
   height:80px;
-  color:#26282a;
+  color:#09102b;
   text-decoration:none;
-  border:0px solid #80c342;
+  border:0px solid #41cd52;
   -webkit-transition:all 0.2s ease-in-out;
   box-sizing:border-box;
   -webkit-box-sizing:border-box;
@@ -186,12 +177,12 @@ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abb
   *behavior:url(boxsizing.htc)
 }
 #mainmenu li a:hover {
-  color:#5caa15;
-  border-bottom:4px solid #80C342
+  color:#21be2b;
+  border-bottom:4px solid #41cd52;
 }
 #mainmenu li.current-menu-item a {
-  color:#5caa15;
-  border-bottom:4px solid #80C342
+  color:#21be2b;
+  border-bottom:4px solid #41cd52;
 }
 #menuextras, #mainmenu, #menuextraslanguages {
   margin-bottom:0
@@ -214,32 +205,13 @@ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abb
   display:inline-block;
   text-align:center;
   height:80px;
-  border-left:1px solid #eee;
-  padding-top:14px;
+  padding: 0 7px;
   box-sizing:border-box;
   overflow:hidden;
-  min-width:85px;
-  font-weight:100
-}
-#menuextras li:last-child a {
-  border-right:1px solid #eee;
-}
-#menuextras li a:before {
-  display:inline-block;
-  font-family:'Qt Icons';
-  content:attr(data-icon);
-  font-size:2.125em;
-  width:100%;
-  color:#80c342;
-  line-height:1;
-  transition:all 0.2s ease-in-out;
-  -webkit-transition:all 0.2s ease-in-out;
-  -moz-transition:all 0.2s ease-in-out;
-  -ms-transition:all 0.2s ease-in-out;
-  -o-transition:all 0.2s ease-in-out
 }
-#menuextras li a:hover:before {
-  color:#5caa15
+#menuextras li a:hover {
+    color: #09102b;
+    border-bottom: 4px solid #41cd52;
 }
 #menuextras .search.open a {
   color:#006325
@@ -248,17 +220,14 @@ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abb
   border-right:1px solid #eee
 }
 #menuextras li a span {
-  color:#bdbebf;
+  color:#09102b;
   display:inline-block;
   overflow:hidden;
-  max-height:30px;
-  transition:max-height 0.2s ease-in-out;
-  -webkit-transition:max-height 0.2s ease-in-out;
-  -moz-transition:max-height 0.2s ease-in-out;
-  -ms-transition:max-height 0.2s ease-in-out;
-  -o-transition:max-height 0.2s ease-in-out;
-  line-height:1.4;
-  font-size:0.875em
+  line-height:80px;
+  font-size:16px;
+}
+#menuextras li a:hover span {
+    color: #41cd52;
 }
 @media (min-width: 1120px) {
   #navbar.fixed,#navbar.shadow_bottom {
@@ -267,11 +236,12 @@ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abb
     box-shadow:0px 0px 8px rgba(0,0,0,0.2)
   }
   #navbar.fixed #menuextras li a,#navbar.shadow_bottom #menuextras li a {
-    padding-top:9px;
-    height:50px
+    padding-top:0px;
+    height:50px;
   }
   #navbar.fixed #menuextras li a span,#navbar.shadow_bottom #menuextras li a span {
-    max-height:0
+    max-height:50px;
+    line-height: 50px;
   }
   #navbar.fixed #menuextras li a:before,#navbar.shadow_bottom #menuextras li a:before {
     font-size:30px
@@ -280,11 +250,8 @@ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abb
     height:50px;
     padding:14px 0.7em
   }
-  #navbar.fixed #mainmenu li a:hover {
-    border-bottom:4px solid #5caa15
-  }
   #navbar.fixed .navbar-toggle {
-    padding:13px 14px 9px
+    padding: 10px 0;
   }
   #navbar.fixed #menuextras li.navbar-search {
     padding:0px 0
@@ -322,7 +289,11 @@ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abb
     padding:0
   }
   #navbar .navbar-toggle {
-    display:block
+    display:block;
+    min-width: 65px;
+  }
+  #navbar .navbar-toggle span {
+      display: none;
   }
   #navbar .navbar-oneQt,#navbar.fixed .navbar-oneQt,#navbar .navbar-oneQt:hover {
     margin-left:0;
@@ -331,18 +302,21 @@ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abb
     padding:7px 20px 7px 15px
   }
   #navbar .navbar-oneQt:before {
-    left:20px
+    left:15px;
+    font-size: 32px;
+    top: 15px;
   }
   #navbar .navbar-menu {
-    max-height:0;
+    max-height: 0;
     overflow:hidden;
     width:100%;
-    border-top:1px solid #eee;
+    border-top:1px solid #f3f3f4;
     -webkit-transition:all 600ms ease-in-out;
     -moz-transition:all 600ms ease-in-out;
     -o-transition:all 600ms ease-in-out;
     transition:all 600ms ease-in-out;
-    position:relative
+    position:relative;
+    background-color: #09102b;
   }
   #mainmenu {
     float:none;
@@ -352,16 +326,17 @@ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abb
   }
   #mainmenu li {
     float:none;
-    list-style:none
-  }
-  #mainmenu li:nth-child(odd) {
-    background:rgba(0,0,0,0)
+    list-style:none;
+    border-bottom: solid 1px rgba(255, 255, 255, 0.1);
   }
   #mainmenu li a,#navbar.fixed #mainmenu li a {
-    padding:10px;
-    border-left:3px solid #fff;
+    padding:0 26px;
     height:auto;
-    width:100%
+    width:100%;
+    line-height: 58px;
+    color: #fff;
+    font-size: 1em;
+    font-weight: 300;
   }
   #mainmenu li.current-menu-item a,#navbar.fixed #mainmenu li.current-menu-item a {
     border-bottom:none;
@@ -370,8 +345,7 @@ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abb
   }
   #mainmenu li a:hover {
     border-bottom:0;
-    padding:10px;
-    border-left:3px solid #5caa15
+    border-left:3px solid #41cd52;
   }
   #navbar.fixed {
     -moz-box-shadow:0px 0px 0px rgba(0,0,0,0);
@@ -384,6 +358,13 @@ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abb
   #menuextras li.navbar-search {
     padding:5px 0
   }
+  #menuextras li a {
+      padding-top:10px;
+      height:55px;
+  }
+  #menuextras li a span {
+      line-height: 40px;
+  }
   #footerbar .container {
     padding:0
   }
@@ -722,8 +703,9 @@ body.qt-account #navbar .navbar-oneQt h2 {
   margin:0
 }
 #footerbar {
-  background:#26282a;
-  color:#fff
+  background:#22283B;
+  color:#fff;
+  font-size: 0.8em;
 }
 #footerbar.fixed {
   bottom:0;
@@ -740,10 +722,11 @@ body.qt-account #navbar .navbar-oneQt h2 {
 }
 #footerbar .footer-main .footer-nav li a {
   display:block;
-  padding:31px 10px 15px 0;
+  padding:30px 0 10px 0;
   line-height:20px;
   height:20px;
-  color:#d6d6d6
+  color:#fff;
+  font-weight: 600;
 }
 #footerbar .footer-main .footer-nav li a:hover,#footerbar .footer-main .footer-nav li.current-menu-item a {
   color:#eee
@@ -764,14 +747,15 @@ body.qt-account #navbar .navbar-oneQt h2 {
   margin-bottom:0
 }
 #footerbar .footer-main .footer-nav .sub-menu li a {
-  padding:1px 0;
-  font-size:0.786em;
-  line-height:8px;
+  padding:2px 0;
+  font-size:1em;
+  /*line-height:8px;*/
   float:none;
-  color:#d6d6d6
+  color:#cecfd5;
+  font-weight: 400;
 }
 #footerbar .footer-main .footer-nav .sub-menu li a:hover,#footerbar .footer-main .footer-nav .sub-menu li.current-menu-item a {
-  color:#eee
+  color:#fff
 }
 #footerbar .theqtcompany {
   background:url("theqtcompany.png") no-repeat;
@@ -989,7 +973,7 @@ a {
   transition-duration:0.3s
 }
 a:hover {
-  color:#46a2da
+  color:#17a81a;
 }
 .main,.navbar-header,#footerbar>div {
   max-width:1280px;
diff --git a/website/style.css b/website/style.css
index 2416b8e..6d7db6a 100644
--- a/website/style.css
+++ b/website/style.css
@@ -1,9 +1,45 @@
 /* ----------------------------------------------------------
-   CSS for Qt Project Rawdog 
+   CSS for Qt Project Rawdog
 ---------------------------------------------------------- */
 
 html { height: 100%; overflow-x: hidden !important;  }
-* { box-sizing: border-box; -moz-box-sizing: border-box; } 
+* { box-sizing: border-box; -moz-box-sizing: border-box; }
+
+/* Web fonts ---------------------------------------------- */
+
+@font-face {
+  font-family: 'Qt Icons';
+  src: url("//d33sqmjvzgs8hq.cloudfront.net/wp-content/themes/oneqt/assets/fonts/icomoon.eot?-tgjuoj");
+  src: url("//d33sqmjvzgs8hq.cloudfront.net/wp-content/themes/oneqt/assets/fonts/icomoon.eot?#iefix-tgjuoj") format("embedded-opentype"), url("//d33sqmjvzgs8hq.cloudfront.net/wp-content/themes/oneqt/assets/fonts/icomoon.woff?-tgjuoj") format("woff"), url("//d33sqmjvzgs8hq.cloudfront.net/wp-content/themes/oneqt/assets/fonts/icomoon.ttf?-tgjuoj") format("truetype"), url("//d33sqmjvzgs8hq.cloudfront.net/wp-content/themes/oneqt/assets/fonts/icomoon.svg?-tgjuoj#icomoon") format("svg");
+  font-weight: normal;
+  font-style: normal; }
+/* titillium-web-regular - latin_latin-ext */
+@font-face {
+  font-family: 'Titillium Web';
+  font-style: normal;
+  font-weight: 400;
+  src: url("//d33sqmjvzgs8hq.cloudfront.net/wp-content/themes/oneqt/assets/fonts/titillium-web-v4-latin_latin-ext-regular.eot");
+  /* IE9 Compat Modes */
+  src: local("Titillium Web"), local("TitilliumWeb-Regular"), url("//d33sqmjvzgs8hq.cloudfront.net/wp-content/themes/oneqt/assets/fonts/titillium-web-v4-latin_latin-ext-regular.eot?#iefix") format("embedded-opentype"), url("//d33sqmjvzgs8hq.cloudfront.net/wp-content/themes/oneqt/assets/fonts/titillium-web-v4-latin_latin-ext-regular.woff2") format("woff2"), url("//d33sqmjvzgs8hq.cloudfront.net/wp-content/themes/oneqt/assets/fonts/titillium-web-v4-latin_latin-ext-regular.woff") format("woff"), url("//d33sqmjvzgs8hq.cloudfront.net/wp-content/themes/oneqt/assets/fonts/titillium-web-v4-latin_latin-ext-regular.ttf") format("truetype"), url("//d33sqmjvzgs8hq.cloudfront.net/wp-content/themes/oneqt/assets/fonts/titillium-web-v4-latin_latin-ext-regular.svg#TitilliumWeb") format("svg");
+  /* Legacy iOS */ }
+/* titillium-web-italic - latin_latin-ext */
+@font-face {
+  font-family: 'Titillium Web';
+  font-style: italic;
+  font-weight: 400;
+  src: url("//d33sqmjvzgs8hq.cloudfront.net/wp-content/themes/oneqt/assets/fonts/titillium-web-v4-latin_latin-ext-italic.eot");
+  /* IE9 Compat Modes */
+  src: local("Titillium WebItalic"), local("TitilliumWeb-Italic"), url("//d33sqmjvzgs8hq.cloudfront.net/wp-content/themes/oneqt/assets/fonts/titillium-web-v4-latin_latin-ext-italic.eot?#iefix") format("embedded-opentype"), url("//d33sqmjvzgs8hq.cloudfront.net/wp-content/themes/oneqt/assets/fonts/titillium-web-v4-latin_latin-ext-italic.woff2") format("woff2"), url("//d33sqmjvzgs8hq.cloudfront.net/wp-content/themes/oneqt/assets/fonts/titillium-web-v4-latin_latin-ext-italic.woff") format("woff"), url("//d33sqmjvzgs8hq.cloudfront.net/wp-content/themes/oneqt/assets/fonts/titillium-web-v4-latin_latin-ext-italic.ttf") format("truetype"), url("//d33sqmjvzgs8hq.cloudfront.net/wp-content/themes/oneqt/assets/fonts/titillium-web-v4-latin_latin-ext-italic.svg#TitilliumWeb") format("svg");
+  /* Legacy iOS */ }
+/* titillium-web-600 - latin_latin-ext */
+@font-face {
+  font-family: 'Titillium Web';
+  font-style: normal;
+  font-weight: 600;
+  src: url("//d33sqmjvzgs8hq.cloudfront.net/wp-content/themes/oneqt/assets/fonts/titillium-web-v4-latin_latin-ext-600.eot");
+  /* IE9 Compat Modes */
+  src: local("Titillium WebSemiBold"), local("TitilliumWeb-SemiBold"), url("//d33sqmjvzgs8hq.cloudfront.net/wp-content/themes/oneqt/assets/fonts/titillium-web-v4-latin_latin-ext-600.eot?#iefix") format("embedded-opentype"), url("//d33sqmjvzgs8hq.cloudfront.net/wp-content/themes/oneqt/assets/fonts/titillium-web-v4-latin_latin-ext-600.woff2") format("woff2"), url("//d33sqmjvzgs8hq.cloudfront.net/wp-content/themes/oneqt/assets/fonts/titillium-web-v4-latin_latin-ext-600.woff") format("woff"), url("//d33sqmjvzgs8hq.cloudfront.net/wp-content/themes/oneqt/assets/fonts/titillium-web-v4-latin_latin-ext-600.ttf") format("truetype"), url("//d33sqmjvzgs8hq.cloudfront.net/wp-content/themes/oneqt/assets/fonts/titillium-web-v4-latin_latin-ext-600.svg#TitilliumWeb") format("svg");
+  /* Legacy iOS */ }
 
 /* Header ---------------------------------------------- */
 
@@ -18,143 +54,170 @@ a.xmlbutton img { max-width: 16px; margin-right: 0.5em; display: inline; }
 /* Typo ---------------------------------------------- */
 
 body {
-	background-color: #ffffff;
-	color: #404244;
-	font-family: "Open Sans", Arial, Helvetica, sans-serif;
-	font-size: 100%;
-	line-height: 1.625;
-	font-weight: 400;
+    background-color: #ffffff;
+    color: #404244;
+    font-family: "Titillium Web", Helvetica, Arial, sans-serif;
+    font-size: 19px;
+    line-height: 1.625;
+    font-weight: 400;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
 }
 
 p { margin: 1em 0; }
-a { color: #44a51c; text-decoration: none; }
+a { color: #17a81a; text-decoration: none; }
 
 h1, h2, h3 { margin: 1em 0; line-height: 1; }
 h1 { font-size: 1.6em; }
 h2 { font-size: 1.4em; }
 h3 { font-size: 1.2em; }
 
-h2.itemtitle { font-size: 1.4em; margin: 0; font-weight: bold; }
+h2.itemtitle { font-size: 2.1875em; margin: -10px 0 0 0; font-weight: 300; }
 article footer { font-size: 0.8em; color: #7c7c7c; margin-top: -0.4em; margin-bottom: 2em; }
 article footer a { color: #7c7c7c; }
 
 .content .wrapper aside { font-size: 0.8em;}
 .content .wrapper aside h3 {
-	font-size: 1.4em;
-	font-weight: bold;
-	margin: 1em 0 0.8em;
+    font-size: 1.4em;
+    font-weight: bold;
+    margin: 1em 0 0.8em;
 }
 .content .wrapper aside a:visited,
 .content .wrapper aside a {
-	color: #44a51c;
-	text-decoration: none;
-	font-weight: bold;
+    color: #44a51c;
+    text-decoration: none;
+    font-weight: bold;
 }
 .content .wrapper aside a:focus,
 .content .wrapper aside a:hover {
-	text-decoration: underline;
+    text-decoration: underline;
 }
 
 /* Structure ---------------------------------------------- */
 
 .content {
-	max-width: 100%;
-	margin: 0 auto;
-	padding-top: 120px;
-	overflow-y: auto;
+    max-width: 100%;
+    margin: 0 auto;
+    padding-top: 120px;
+    overflow-y: auto;
 }
 .content .wrapper {
-	max-width: 1280px;
-	padding: 0 10px;
-	margin: 0 auto;
+    max-width: 1280px;
+    padding: 0 10px;
+    margin: 0 auto;
 }
 
 /* Main content ---------------------------------------------- */
 
 .content .wrapper .content-column {
-	width: 65%;
-	float: left;
-	padding: 0 68px; /* For date box */
-	overflow-x: hidden;
+    width: 65%;
+    float: left;
+    padding: 0 68px; /* For date box */
+    overflow-x: hidden;
 }
 
-div.day { position: relative; }
+div.day { position: relative; padding-top: 3em; }
+div.day > h2 {
+    margin: 0;
+    position: absolute;
+    left: -68px;
+}
 
 h2 time {
-	position: absolute;
-	top: 1.7em;
-	left: -68px;
-	width: 48px;
-	height: 48px;
-	padding: 10px 0 0 0;
-	font-size: 20.78px;
-	text-transform: uppercase;
-	line-height: 0.8em;
-	text-align: center;
-	font-weight: bold;
-	color: #FFFFFF;
-	background-color: #80C342;
+    width: 48px;
+    height: 48px;
+    padding: 10px 0 0 0;
+    font-size: 20.78px;
+    text-transform: uppercase;
+    line-height: 0.8em;
+    text-align: center;
+    font-weight: bold;
+    color: #FFFFFF;
+    background-color: #41cd52;
+    display: block;
+}
+
+h2 time:before, h2 time:after {
+    content: '';
+    display: inline-block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 8px 8px 0 0;
+    border-color: #ffffff transparent transparent transparent;
+}
+h2 time:after {
+    top: auto;
+    left: auto;
+    bottom: 0;
+    right: 0;
+    border-width: 0 0 8px 8px;
+    border-color: transparent transparent #ffffff transparent;
 }
+
 #items .day:first-child h2 time { top: 0.2em; }
 h2 time span { display: block; font-size: 11.08px; font-weight: normal; }
 
-article { position: relative; padding: 2.2em 0 2em 0; border-bottom: 1px solid #E8E8E8; overflow-y: auto; }
-#items .day:first-child article { padding: 0 0 2em 0; margin-top: -1.6em; }
-#items .day:last-child article { margin-bottom: 3em; padding: 2.2em 0 0 0; border-bottom: none; }
+article { position: relative; padding: 0 0 2em 0; border-bottom: 1px solid #E8E8E8; overflow-y: auto; }
+#items .day:first-child { padding-top: 0; }
+#items .day:last-child article { margin-bottom: 3em; border-bottom: none; }
 article div, article img { width: auto; max-width: 100%; height: auto; }
 article img { display: block; margin: 1em 0; }
 
 article ul { list-style-type: none; margin: 2em 0; padding: 0px; }
 article ul li:before { content: "- ";  }
-article ul li { padding: 0 0 1.6em 2.5em; color: #7c7c7c; }
+article ul li { padding: 0 0 .6em 2.5em; color: #7c7c7c; }
 article ul li:last-child { padding: 0 0 0 2.5em; }
 
 /* Aside ---------------------------------------------- */
 
 .content .wrapper aside {
-	width: 35%;
-	float: left;
-	padding-left: 68px;
-	border-left: 1px solid #e8e8e8;
-	overflow-x: hidden;
+    width: 35%;
+    float: left;
+    padding-left: 68px;
+    border-left: 1px solid #e8e8e8;
+    overflow-x: hidden;
 }
 .content .wrapper aside ul {
-	margin: 0;
-	padding: 0;
-	list-style: none;
+    margin: 0;
+    padding: 0;
+    list-style: none;
 }
 .content .wrapper aside .rss-feed {
-	display: block;
-	background: url('images/icon-rss.png') 3px center no-repeat;
-	line-height: 16px;
-	height: 16px;
-	padding-left: 30px;
+    display: block;
+    background: url('images/icon-rss.png') 3px center no-repeat;
+    line-height: 16px;
+    height: 16px;
+    padding-left: 30px;
 }
 .content .wrapper aside .icon-links {
-	margin-top: 8px;
+    margin-top: 8px;
 }
 .content .wrapper aside .icon-links a {
-	display: block;
-	height: 37px;
-	padding-left: 45px;
-	line-height: 32px;
+    display: block;
+    height: 37px;
+    padding-left: 45px;
+    line-height: 32px;
 }
 .content .wrapper aside .icon-links .qtproject-twitter a {
-	background: url('images/icon-twitter.png') left top no-repeat;
+    background: url('images/icon-twitter.png') left top no-repeat;
 }
 .content .wrapper aside .icon-links .qtproject-gplus a {
-	background: url('images/icon-gplus.png') left top no-repeat;
+    background: url('images/icon-gplus.png') left top no-repeat;
 }
 .content .wrapper aside .icon-links .qt-meetup a {
-	background: url('images/icon-meetup.png') left top no-repeat;
+    background: url('images/icon-meetup.png') left top no-repeat;
 }
 .content .wrapper aside .recent-posts time {
-	display: block;
-	color: #7c7c7c;
-	font-weight: normal;
-	font-size: 13px;
-	margin-top: -3px;
-	margin-bottom: 2px;
+    display: block;
+    color: #7c7c7c;
+    font-weight: normal;
+    font-size: 13px;
+    margin-top: -3px;
+    margin-bottom: 2px;
 }
 
 footer {
@@ -162,9 +225,9 @@ footer {
 }
 
 header h2 a {
-	text-decoration: none;
-	color: #44a51c;
-	line-height: 1.2em;
+    text-decoration: none;
+    color: #262827;
+    line-height: 1.2em;
 }
 
 /* Footer */
@@ -187,39 +250,40 @@ ul#menu-footer-menu ul.sub-menu a { margin-bottom: 0.2em; }
    ALL SCREENS UNDER 1200 ... 0px <-> 1199px
 ------------------------------------------------------- */
 @media only screen and (max-width: 1120px) {
-	
-	/* Header */
-	.main, .navbar-header, #footerbar>div { width: 100%; margin: 0; }
-	#navbar .navbar-toggle { margin: 11px 0 9px 0; }	
-	
-	/* Structure */
-	.content { width: 100%; margin: 0; padding-top: 30px; }
-	.content .wrapper { width: 100%; padding: 0 15px; margin: 0; }
-	
+
+    /* Header */
+    .main, .navbar-header, #footerbar>div { width: 100%; margin: 0; }
+    #navbar .navbar-toggle { margin: 11px 0 9px 0; }
+
+    /* Structure */
+    .content { width: 100%; margin: 0; padding-top: 30px; }
+    .content .wrapper { width: 100%; padding: 0 15px; margin: 0; }
+
 }
 
 /* -------------------------------------------------------
    TABLETS PORTRAIT ... 768px <-> 959px
 ------------------------------------------------------- */
 @media only screen and (min-width: 768px) and (max-width: 959px) {
-	
-	/* Main content ---------------------------------------------- */
-	.content .wrapper .content-column { width: 70%; padding: 0 20px 0 60px; }
-	h2 time { left: -60px; width: 44px; height: 44px; }
-	/* Aside ---------------------------------------------- */
-	.content .wrapper aside { width: 30%; padding-left: 20px; }
-	
+
+    /* Main content ---------------------------------------------- */
+    .content .wrapper .content-column { width: 70%; padding: 0 20px 0 60px; }
+    div.day > h2 { left: -60px; }
+    h2 time { width: 44px; height: 44px; }
+    /* Aside ---------------------------------------------- */
+    .content .wrapper aside { width: 30%; padding-left: 20px; }
+
 }
 
 /* -------------------------------------------------------
    SMARTPHONES PORTRAIT & LANDSCAPE ... 0 <-> 767px
 ------------------------------------------------------- */
 @media only screen and (max-width: 767px) {
-	
-	/* Main content & Aside ---------------------------------------------- */
-	.content .wrapper .content-column, .content .wrapper aside  { width: 100%; padding: 0; float: none; }
-	h2 time { display: none; }
-	
+
+    /* Main content & Aside ---------------------------------------------- */
+    .content .wrapper .content-column, .content .wrapper aside  { width: 100%; padding: 0; float: none; }
+    h2 time { display: none; }
+
 }
 
 /* -------------------------------------------------------
@@ -231,7 +295,4 @@ ul#menu-footer-menu ul.sub-menu a { margin-bottom: 0.2em; }
    SMARTPHONES PORTRAIT ... 0px <-> 479px
 ------------------------------------------------------- */
 @media only screen and (max-width: 479px) {
-	
-	#menuextras { display: none; }
-	
-}
\ No newline at end of file
+}