New element for <header>: .groupbar

… need the class .extended in <header>

src/stylesheets/css/Lungo.layout.css

@@ -17,6 +17,7 @@ nav .bubble{position:relative;top:-16px;left:-10px;margin-right:-20px;}
 .toolbar.with-labels .icon{line-height:40px;padding-bottom:8px;}
 .toolbar .bubble{top:-54px;left:6px;padding:1px 4px;}
 .toolbar abbr{position:absolute;top:34px;width:inherit;height:12px;display:block !important;font-size:0.9em;line-height:12px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
+.groupbar{position:absolute;top:39px;height:34px;width:100%;line-height:34px;}.groupbar a{padding:0px;}
 aside{position:absolute;top:0px;bottom:0px;height:auto;width:256px;max-width:256px;opacity:0;z-index:0;}
 aside.show{opacity:1;}
 header~aside{padding-top:40px;}
@@ -28,6 +29,7 @@ aside .anchor{font-weight:bold;padding:3px 10px 4px;}
 aside .bubble{float:right;margin:12px 4px 0 0;}
 @media handheld, only screen and (min-width: 768px){[data-target="aside"]{display:none !important;} aside{opacity:1;} aside~article{width:auto !important;left:256px;right:0px !important;}}article{position:absolute;width:inherit;height:inherit;top:0px;bottom:0px;display:block;z-index:0;opacity:0;}
 header~article{top:40px;}
+header.extended~article{top:74px;}
 footer~article{bottom:40px;}
 article.current{z-index:1;opacity:1;}
 article.aside{-webkit-transform:translate3d(256px, 0, 0);transform:translate3d(256px, 0, 0);}

src/stylesheets/css/Lungo.theme.pro.css

@@ -49,6 +49,17 @@ nav a.current, nav a.active {
   box-shadow: inset 0px 0px 8px #101010;
   text-shadow: 0px 1px 4px #000;
 }
+.groupbar {
+  background: #ededed;
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
+}
+.groupbar a {
+  color: #6e6e6e;
+}
+.groupbar a.current {
+  color: #6e6e6e;
+  box-shadow: inset 0 -4px 0 #05bde9;
+}
 /* @end */
 /* @group <aside> */
 aside {
@@ -147,8 +158,8 @@ aside .anchor {
 /* @group .button */
 .button {
   border-bottom: 1px inset rgba(0, 0, 0, 0.2);
-  -webkit-border-radius: 1px;
-  border-radius: 1px;
+  -webkit-border-radius: 2px;
+  border-radius: 2px;
   -webkit-background-clip: padding-box;
   background-clip: padding-box;
   -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 3px rgba(0, 0, 0, 0.2);

src/stylesheets/less/Lungo.layout.less

@@ -44,7 +44,8 @@ header, footer  {
 }
 
 header  {
-	top: 0px
+	top: 0px;
+	//&.extended { height: 72px; }
 }
 
 footer  {
@@ -150,6 +151,18 @@ nav {
   		text-overflow: ellipsis;
 	}
 }
+
+.groupbar {
+	position: absolute;
+	top: 39px;    
+ 	height: 34px;
+    width: 100%;
+    line-height: 34px;
+    
+    & a {
+    	padding: 0px;
+	}
+}
 /* @end */
 
 /* @group <aside> */
@@ -231,6 +244,8 @@ article {
 	
 	header ~ article { top: 40px; }	
 	
+	header.extended ~ article { top: 74px; }	
+	
 	footer ~ article { bottom: 40px; }
 
 	article.current {

src/stylesheets/less/Lungo.theme.pro.less

@@ -67,6 +67,19 @@ nav a {
 		text-shadow: 0px 1px 4px #000;
 	}
 }
+
+.groupbar {
+    background: #ededed;  
+    box-shadow: 0 1px 0 rgba(0,0,0,0.1);
+    
+    & a {
+    	color: #6e6e6e;
+    	&.current {
+			color: #6e6e6e;
+    		box-shadow: inset 0 -4px 0 @theme-light;
+    	}
+	}
+}
 /* @end */
 
 /* @group <aside> */
@@ -178,7 +191,7 @@ aside {
 /* @group .button */
 .button {
 	border-bottom: 1px inset rgba(0,0,0,0.2);		
-	.border-radius(1px);
+	.border-radius(2px);
 	-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 1px 3px rgba(0,0,0,0.2);	
 	
 	&:active, &.active { 

src/view/Lungo.View.Resize.js

@@ -54,7 +54,7 @@ LUNGO.View.Resize = (function(lng, undefined) {
      * @method toolbars
      */
     var toolbars = function() {
-        var toolbar = '.toolbar nav';
+        var toolbar = '.toolbar nav, .groupbar';
         var all_toolbars = lng.dom(toolbar);
 
         for (var i = 0, len = all_toolbars.length; i < len; i++) {