Stylesheet for groupbar

src/stylesheets/less/Lungo.layout.article.less

@@ -49,7 +49,7 @@ article {
 		
 header:not(.extended) ~ article { top: @header-height; }	
 	header.extended ~ article { top: @header_extended_height; }		
-footer:not(.with-labels) ~ article { bottom: @header-height; }
+footer:not(.with-labels) ~ article { bottom: @article-bottom; }
 	footer.with-labels ~ article { bottom: @article-bottom-with-labels; }
 
 @media handheld, only screen and (min-width: 768px) {

src/stylesheets/less/Lungo.layout.less

@@ -109,15 +109,16 @@ header, footer  {
 	left: 0px;
 	width: 100%;	
 	height: @header-height;
-	line-height: @header-height;
-	overflow: hidden;
-	
+	display: block;
 	z-index: 2;
+
+	line-height: @header-height;
+	overflow: hidden;	
 }
 
 header  {
 	top: 0px;
-		
+	
 	//&.extended { height: 72px; }
 	& .onleft { margin-left: 4px !important;}
 	& .onright {margin-right: 4px !important;}

src/stylesheets/less/Lungo.layout.nav.less

@@ -22,7 +22,6 @@ nav {
 		padding: 0 6px;
 		z-index: 1000;
 		float: left;
-		//line-height: 39px;
 
 		& .icon {
 			position: relative;
@@ -64,7 +63,7 @@ nav {
 
 	& a {
 		padding: 0;
-		height:  35px;
+		height:  36px;
 	}
 
 
@@ -106,14 +105,15 @@ nav {
 
 .groupbar {
 	position: absolute;
-	top: 39px;
+	top: 43px;
 	height: 28px;
+	display: block;
 	width: 100%;
 	padding: 4px 0 2px;
  	display: block;
     line-height: 28px;
     z-index: 2;
 
-    & a { padding: 0px; }
+    & a { padding: 0px; font-weight: bold;}
 }
 /* @end */

src/stylesheets/less/Lungo.theme.default.less

@@ -21,6 +21,9 @@
 	@theme-secondary: #2c2c2d;
 		@theme-secondary-dark: #1c1c1c;
 
+@background-main: #2c8bca -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2c8bca), color-stop(100%,#154f93));
+@background-secondary: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2c8bca), color-stop(100%,#154f93));
+
 .app {
     background: @black;
     font-family: 'Roboto', Helvetica, Arial, sans-serif;
@@ -28,23 +31,15 @@
 
 /* @group <header> & <footer> & <article> */
 header {
-	//background-color: @theme;
-	
-	//border-top: 1px solid @theme-light;
-	//border-bottom: 1px solid @theme-dark;
-	//box-shadow: 0 1px 0 rgba(0,0,0,0.1);
-	
 	border-top-left-radius: 5px;
 	border-top-right-radius: 5px;
+	border-bottom: 1px solid #1a2838;
 	
-	background: #2c8bca;
-	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2c8bca), color-stop(100%,#154f93));
-	background: -webkit-linear-gradient(top,  #2c8bca 0%,#154f93 100%);
-	
+	background: @background-main;
+		
 	-webkit-box-shadow: inset 0 1px 0 #64b9e2, inset 0 -1px 0 #2566a4;
 	box-shadow: inset 0 1px 0 #64b9e2, inset 0 -1px 0 #2566a4;
-	border-bottom: 1px solid #1a2838;
-	overflow: hidden;
+	
 	position: absolute;
 	z-index: 2;
 	
@@ -93,14 +88,17 @@ nav a {
 
 
 .groupbar {
-    background: #ededed;
+    //background: #ededed;
+    background: #272a2d;
     border-bottom: solid 1px rgba(0,0,0,0.1);
+    box-shadow: inset 0 1px 8px rgba(0,0,0,0.3);
 
     & a {
     	color: #6e6e6e;
     	&.current {
 			color: #6e6e6e;
-			border-bottom: solid 3px @theme-light;
+			color:  #fff;
+			border-bottom: solid 3px #2566a4;
     	}
 	}
 }
@@ -345,13 +343,10 @@ input[type="range"] {
 	
 	border: solid 1px @white;
 	box-shadow: 0 0 6px #000;	
+	
+	&.count { background: @background-main; }
 }
 	header .bubble.count {
 		background: @theme-secondary;
 	}
-	.bubble.count { 
-		//background: @theme; 
-		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2c8bca), color-stop(100%,#154f93));
-		background: -webkit-linear-gradient(top,  #2c8bca 0%,#154f93 100%);
-	}
 /* @end */

src/stylesheets/less/constants.less

@@ -4,7 +4,7 @@
 
 @header-height: 42px;
 @with-labels-height: 51px;
-@article-bottom: 40px;
+@article-bottom: 41px;
 	@article-bottom-with-labels: 52px;
 
 /* @end */