New style of header with-subtitle

src/attributes/Lungo.Attributes.Data.js

@@ -49,7 +49,7 @@ LUNGO.Attributes.Data = {
     Title: {
         tag: 'title',
         selector: 'header, footer, article',
-        html: '<span class="title">{{value}}</span>'
+        html: '<span class="title centered">{{value}}</span>'
     },
     Back: {
         tag: 'back',

src/stylesheets/css/Lungo.theme.default.css

@@ -33,7 +33,10 @@ footer {
 }
 .title {
   color: #ffffff;
-  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2);
+}
+.subtitle {
+  color: rgba(255, 255, 255, 0.6);
+  text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.3);
 }
 article {
   background-color: #EBEBEB;
@@ -271,11 +274,11 @@ section.aside.onright {
   -webkit-box-shadow: inset 0 10px 30px rgba(0, 0, 0, 0.2), inset 0 -2px 4px rgba(0, 0, 0, 0.3);
 }
 .button.default {
-  background: #5a5a5a;
+  background: #2c4579;
 }
 .button.default:active,
 .button.default.active {
-  background: #4b4b4b;
+  background: #213761;
 }
 /* @end */
 /* @group <form> */

src/stylesheets/less/Lungo.layout.less

@@ -83,8 +83,6 @@ header, footer  {
 
 header  {
 	top: 0px;
-	
-	//&.extended { height: 72px; }
 	& .onleft { margin-left: 4px !important;}
 	& .onright {margin-right: 4px !important;}
 }
@@ -93,21 +91,39 @@ footer  { bottom: 0px; }
 
 header .title, footer .title  {
 	margin: 0 4px;	
-	float: left;
 	z-index: -1;
 	font-size: 15px;
 	font-weight: bold;
+	display:block;
+	
+	&.centered {
+		position: absolute;
+		left: 0px;
+		right: 0px;
+		text-align: center;
+		display: inline-block;
+	}
 }
 
+.with-subtitle {
+	line-height: 20px;
+	padding-top: 4px;
+}
 
-header .title {
-	position: absolute;
-	left: 0px;
-	right: 0px;
-	text-align: center;
-	display: inline-block;
+.subtitle {
+	display:block;
+	font-size: 11px;
+	line-height: 11px;
 }
 
+/*.title > .subtitle {
+	//line-height: 21px;
+	font-weight: normal;
+	font-size: 12px;
+	height: 12px;
+	line-height: 12px;
+}*/
+
 section header a.button, section footer a.button  {
 	margin: 5px 1px 0px;
 	/*

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

@@ -59,7 +59,12 @@ footer {
 }
 .title {
 	color: @white;
-	text-shadow: 0px 1px 0px rgba(0,0,0,0.2);
+	//text-shadow: 0px 1px 0px rgba(0,0,0,0.2);
+}
+
+.subtitle {
+	color: rgba(255,255,255,0.6);
+	text-shadow: 0px -1px 0px rgba(0,0,0,0.3);
 }
 
 article {
@@ -258,8 +263,8 @@ section.aside {
 	}
 
 	&.default {
-    	background: #5a5a5a;
-    	&:active, &.active { background: #4b4b4b; }
+    	background: #2c4579;
+    	&:active, &.active { background: #213761;}
 	}
 }
 /* @end */