New stylesheets classes: .box & .col

src/stylesheets/Lungo.layout.article.less

@@ -10,13 +10,6 @@
 @import "mixins.less";
 @import "constants.less";
 
-
-@defaultTrasition : @easeOutSine;
-@header_footer_height: 40px;
-    @header_extended_height: 75px;
-@footer_toolbar_height: 48px;
-
-/* @group <article> */
 article {
     //position: absolute;
     position: fixed;
@@ -50,6 +43,24 @@ article {
     }
 
     & .box {
+        .box-shadow( 0 1px 0 #e0e0e0);
+        
+        
+        
+        &.grey {
+			color: #636363 !important;
+			text-shadow:  0 1px 0 #fff;
+			background: #efefef;
+			line-height: 1.5em;
+			
+			& .icon, & a {
+				color: #636363;
+			}
+			& .icon { 
+				font-size:  1.25em;
+			}
+        }
+
         &.quarter {
             height: 25%;
         }
@@ -63,14 +74,39 @@ article {
             height: 66.7%;
         }
     }
+    
+    & .col {       
+    	float:  left;
+    	display: inline-block;
+    	height:  100%;
+    	font-size:  0.85em;
+            
+    	&:not(last-child) {
+			.box-shadow(inset 1px 0 0 #e0e0e0);
+		}
+        &.quarter {
+            width: 25%;
+        }
+        &.third {
+            width: 33.3%;
+        }
+        &.middle {
+            width: 50%;
+        }
+        &.two-thirds {
+            width: 66.7%;
+        }
+    }
+}
+
+a {
 }
 
 header:not(.extended) ~ article { top: @header-height; }
-    header.extended ~ article { top: @header_extended_height; }
+    header.extended ~ article { top: @article_with_header_extended; }
 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) {
     article.aside { .transform(translate3d(0px, 0, 0)); }
-}
-/* @end */
+}

src/stylesheets/Lungo.layout.list.less

@@ -11,8 +11,6 @@
 @import "mixins.less";
 
 .list {
-    font-size: 1.15em;
-
     & li {
         list-style-type: none;
 
@@ -60,15 +58,6 @@
         }
     }
 
-
-    & small {
-        display: block;
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        font-size: 0.75em;
-    }
-
     & .bubble {
         padding-left: 5px;
         padding-right: 5px;

src/stylesheets/Lungo.theme.default.less

@@ -167,17 +167,10 @@ section.aside {
 /* @group .list */
 .list, .list li:not(.toolbar) a { color: #2a2a2a; }
 
-
 .list {
     & li {
-        //background: #f8f8f8;
         background: #fff;
-
-        //border-bottom: 1px inset #e1e1e1;
         border-bottom: 1px inset #f8f8f8;
-        //text-shadow: 0 1px 0 #fff;
-
-
         &:last-child { border-bottom: none; }
 
         &.selectable:active {
@@ -192,6 +185,10 @@ section.aside {
         }
 
         & small, & .onright:not(.bubble) { color: #888; }
+        
+        & strong {
+			color: #134c81;
+		}
     }
 
     &.indented li {

src/stylesheets/Lungo.widgets.less

@@ -33,6 +33,9 @@
 .onright { float: right;}
 .hidden { display: none; }
 .indented > * { padding: 10px; }
+.wrapper {
+    padding: 8px 8px;
+}
 
 .icon.small {
     font-size: 20px !important;
@@ -52,4 +55,16 @@
     font-size: 0.75em;
     font-weight: bold;
     line-height: 13px;
+}
+
+& strong {
+    font-size: 1.15em;
+}
+
+& small {
+    display: block;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    font-size: 0.8em;
 }

src/stylesheets/constants.less

@@ -2,12 +2,14 @@
 
 /* DIMENSIONS */
 @header-height: 42px;
-    @header_extended_height: 74px;
+    @header_extended_height: 75px;
+
 @header_footer_height: 40px;
 @footer_toolbar_height: 48px;
     @with-labels-height: 51px;
 @article-bottom: 41px;
     @article-bottom-with-labels: 52px;
+    @article_with_header_extended: 78px;
 
 @border-radius: 3px;
 

src/stylesheets/css/Lungo.layout.list.css

@@ -1,9 +1,8 @@
-.list{font-size:1.15em;}.list li{list-style-type:none;}.list li.padding{padding:8px;}
+.list li{list-style-type:none;}.list li.padding{padding:8px;}
 .list li a{position:relative;display:block;padding:8px;}
 .list li.arrow>a::after{content:'';display:block;width:6px;height:6px;border-right:3px solid #D0D0D8;border-top:3px solid #D0D0D8;position:absolute;right:12px;top:43%;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);}
 .list li .icon,.list li img{float:left;width:32px;height:32px;margin-right:8px;font-size:46px;line-height:32px;text-align:center;}
 .list li.thumb img{margin:-8px 8px -8px -8px;height:47px;width:47px;}
-.list small{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:0.75em;}
 .list .bubble{padding-left:5px;padding-right:5px;}
 .list .onright{font-size:0.75em;font-weight:bold;}
 .list .onright .icon,.list small .icon{height:13px;width:auto;margin-right:1px;font-size:1.4em !important;line-height:0.8em;}

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

@@ -283,6 +283,9 @@ section.aside.onright {
 .list li .onright:not(.bubble) {
   color: #888;
 }
+.list li strong {
+  color: #134c81;
+}
 .list.indented li {
   border-left: solid 1px #e1e1e1;
   border-right: solid 1px #e1e1e1;

src/stylesheets/css/Lungo.widgets.css

@@ -3,7 +3,10 @@
 .onright{float:right;}
 .hidden{display:none;}
 .indented>*{padding:10px;}
+.wrapper{padding:8px 8px;}
 .icon.small{font-size:20px !important;height:16px !important;width:16px !important;line-height:16px !important;}
 .framed{border:2px solid #fff;}
 .round{-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}
 .bubble{display:inline-block;padding:2px 3px;min-width:12px;font-size:0.75em;font-weight:bold;line-height:13px;}
+strong{font-size:1.15em;}
+small{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:0.8em;}