Creating a more consistent layout

src/stylesheets/css/Lungo.layout.css

@@ -1,270 +1,41 @@
-/**
- * Stylesheet
- *
- * @namespace LUNGO
- * @class Layout
- *
- * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
- */
-/* @group <section> */
-body {
-  height: 100%;
-}
-section {
-  position: absolute;
-  position: fixed;
-  width: 100%;
-  height: inherit;
-  z-index: 0;
-  -webkit-backface-visibility: hidden;
-  -webkit-transform: translate3d(100%, 0, 0);
-  -moz-transform: translate3d(100%, 0, 0);
-  -ms-transform: translate3d(100%, 0, 0);
-  -o-transform: translate3d(100%, 0, 0);
-  transform: translate3d(100%, 0, 0);
-  -webkit-transition: -webkit-transform 0.3s ease-in-out;
-}
-section:first-child {
-  z-index: 1;
-  -webkit-transform: translate3d(0%, 0, 0);
-  -moz-transform: translate3d(0%, 0, 0);
-  -ms-transform: translate3d(0%, 0, 0);
-  -o-transform: translate3d(0%, 0, 0);
-  transform: translate3d(0%, 0, 0);
-}
-section.hide {
-  z-index: 0;
-  -webkit-transform: translate3d(-100%, 0, 0);
-  -moz-transform: translate3d(-100%, 0, 0);
-  -ms-transform: translate3d(-100%, 0, 0);
-  -o-transform: translate3d(-100%, 0, 0);
-  transform: translate3d(-100%, 0, 0);
-}
-section.show {
-  z-index: 1;
-  -webkit-transform: translate3d(0%, 0, 0);
-  -moz-transform: translate3d(0%, 0, 0);
-  -ms-transform: translate3d(0%, 0, 0);
-  -o-transform: translate3d(0%, 0, 0);
-  transform: translate3d(0%, 0, 0);
-}
-section.static.hide {
-  -webkit-transform: translate3d(0%, 0, 0);
-  -moz-transform: translate3d(0%, 0, 0);
-  -ms-transform: translate3d(0%, 0, 0);
-  -o-transform: translate3d(0%, 0, 0);
-  transform: translate3d(0%, 0, 0);
-}
-section.popup {
-  -webkit-transform: translate3d(0, 100%, 0);
-  -moz-transform: translate3d(0, 100%, 0);
-  -ms-transform: translate3d(0, 100%, 0);
-  -o-transform: translate3d(0, 100%, 0);
-  transform: translate3d(0, 100%, 0);
-}
-section.popup.show {
-  -webkit-transform: translate3d(0, 0%, 0);
-  -moz-transform: translate3d(0, 0%, 0);
-  -ms-transform: translate3d(0, 0%, 0);
-  -o-transform: translate3d(0, 0%, 0);
-  transform: translate3d(0, 0%, 0);
-}
-section.popup.hide {
-  -webkit-transform: translate3d(0, -100%, 0);
-  -moz-transform: translate3d(0, -100%, 0);
-  -ms-transform: translate3d(0, -100%, 0);
-  -o-transform: translate3d(0, -100%, 0);
-  transform: translate3d(0, -100%, 0);
-}
-/* @end */
-/* @group <header> & <footer> */
-header, footer {
-  position: absolute;
-  left: 0px;
-  width: 100%;
-  height: 40px;
-  display: block;
-  z-index: 2;
-  line-height: 40px;
-}
-header {
-  top: 0px;
-}
-footer {
-  bottom: 0px;
-}
-header .title, footer .title {
-  float: left;
-  margin: 0 8px;
-  font-size: 1.3em;
-}
-header .title {
-  position: absolute;
-  left: 0px;
-  width: 100%;
-  margin: 0px auto;
-  text-align: center;
-  z-index: -1;
-}
-section header a.button, section footer a.button {
-  margin: 4px 3px auto;
-}
-section header a.button.icon, section footer a.button.icon {
-  width: 17px;
-  font-size: 1.5em;
-  font-weight: normal;
-}
-/* @end */
-/* @group <nav> */
-nav {
-  height: inherit;
-  text-align: center;
-  font-weight: normal;
-}
-nav a {
-  display: inline-block;
-  padding: 0 6px;
-  height: inherit;
-  float: left;
-  font-size: 2.0em;
-}
-nav a abbr {
-  position: relative;
-  bottom: 3px;
-  margin-left: 2px;
-  display: none;
-  font-size: 0.5em;
-  font-weight: bold;
-}
-nav a.current abbr {
-  display: inline;
-}
-nav a.current {
-  -webkit-transition: all 0.3s ease-in-out;
-  -moz-transition: all 0.3s ease-in-out;
-  -ms-transition: all 0.3s ease-in-out;
-  -o-transition: all 0.3s ease-in-out;
-  transition: all 0.3s ease-in-out;
-}
-/* @end */
-/* @group <aside> */
-aside {
-  position: absolute;
-  top: 0px;
-  bottom: 0px;
-  height: auto;
-  width: 0px;
-}
-aside.show {
-  width: 256px;
-}
-header ~ aside {
-  padding-top: 40px;
-}
-footer ~ aside {
-  padding-bottom: 40px;
-}
-aside ~ article {
-  -webkit-transition: left 0.3s ease-in-out;
-  left: 0px;
-}
-aside a {
-  display: block;
-  width: 244px;
-  height: 40px;
-  padding: 0 6px;
-  font-size: 1.1em;
-  font-weight: bold;
-  line-height: 40px;
-}
-aside a .icon {
-  width: 28px;
-  height: 28px;
-  float: left;
-  margin: 8px 6px 0 0;
-  font-size: 1.9em;
-  line-height: 1.0em;
-  text-align: center;
-}
-@media handheld, only screen and (min-width: 768px) {
-  [data-target="aside"] {
-    display: none !important;
-  }
-  aside {
-    width: 256px;
-  }
-  aside ~ article {
-    left: 256px;
-  }
-}
-/* @end */
-/* @group <article> */
-article {
-  position: absolute;
-  width: 100%;
-  height: auto;
-  top: 0px;
-  bottom: 0px;
-  display: block;
-  z-index: 0;
-  opacity: 0;
-}
-header ~ article {
-  top: 40px;
-}
-footer ~ article {
-  bottom: 40px;
-}
-article.current {
-  z-index: 1;
-  opacity: 1;
-}
-article.aside {
-  left: 256px !important;
-}
-article.indented {
-  background-color: #e2e2e2;
-}
-.indented ul, .indented form {
-  margin: 10px;
-  -webkit-border-radius: 4px;
-  -moz-border-radius: 4px;
-  border-radius: 4px;
-  -webkit-background-clip: padding-box;
-  -moz-background-clip: padding;
-  background-clip: padding-box;
-  border: 1px solid #c5c5c5;
-  box-shadow: 0px 0px 8px #ccc;
-}
-.indented li:first-child {
-  border-top-left-radius: 4px;
-  border-top-right-radius: 4px;
-}
-.indented li:last-child {
-  border-bottom-left-radius: 4px;
-  border-bottom-right-radius: 4px;
-}
-.list .contrasted {
-  background-color: #f4f4f4 !important;
-  box-shadow: inset 0px 1px 0px #fff;
-}
-.list .toolbar a {
-  box-shadow: 1px 0px 0px #d9d9d9 ;
-}
-.list .toolbar a:last-child {
-  box-shadow: none;
-}
-.list .toolbar a.current {
-  color: #419ad9;
-}
-/* @end */
-.toolbar {
-  height: 48px;
-  line-height: 44px;
-  display: block;
-}
-.toolbar a {
-  float: left;
-  padding: 0;
-  font-size: 2.0em;
-}
+body{height:100%;}
+section{position:absolute;position:fixed;width:100%;height:inherit;z-index:0;-webkit-backface-visibility:hidden;-webkit-transform:translate3d(100%, 0, 0);-moz-transform:translate3d(100%, 0, 0);-ms-transform:translate3d(100%, 0, 0);-o-transform:translate3d(100%, 0, 0);transform:translate3d(100%, 0, 0);-webkit-transition:-webkit-transform 0.3s ease-in-out;}
+section:first-child{z-index:1;-webkit-transform:translate3d(0%, 0, 0);-moz-transform:translate3d(0%, 0, 0);-ms-transform:translate3d(0%, 0, 0);-o-transform:translate3d(0%, 0, 0);transform:translate3d(0%, 0, 0);}
+section.hide{z-index:0;-webkit-transform:translate3d(-100%, 0, 0);-moz-transform:translate3d(-100%, 0, 0);-ms-transform:translate3d(-100%, 0, 0);-o-transform:translate3d(-100%, 0, 0);transform:translate3d(-100%, 0, 0);}
+section.show{z-index:1;-webkit-transform:translate3d(0%, 0, 0);-moz-transform:translate3d(0%, 0, 0);-ms-transform:translate3d(0%, 0, 0);-o-transform:translate3d(0%, 0, 0);transform:translate3d(0%, 0, 0);}
+section.static.hide{-webkit-transform:translate3d(0%, 0, 0);-moz-transform:translate3d(0%, 0, 0);-ms-transform:translate3d(0%, 0, 0);-o-transform:translate3d(0%, 0, 0);transform:translate3d(0%, 0, 0);}
+section.popup{-webkit-transform:translate3d(0, 100%, 0);-moz-transform:translate3d(0, 100%, 0);-ms-transform:translate3d(0, 100%, 0);-o-transform:translate3d(0, 100%, 0);transform:translate3d(0, 100%, 0);}
+section.popup.show{-webkit-transform:translate3d(0, 0%, 0);-moz-transform:translate3d(0, 0%, 0);-ms-transform:translate3d(0, 0%, 0);-o-transform:translate3d(0, 0%, 0);transform:translate3d(0, 0%, 0);}
+section.popup.hide{-webkit-transform:translate3d(0, -100%, 0);-moz-transform:translate3d(0, -100%, 0);-ms-transform:translate3d(0, -100%, 0);-o-transform:translate3d(0, -100%, 0);transform:translate3d(0, -100%, 0);}
+header,footer{position:absolute;left:0px;width:100%;height:40px;display:block;z-index:2;line-height:40px;}
+header{top:0px;}
+footer{bottom:0px;}
+header .title,footer .title{float:left;margin:0 8px;font-size:1.3em;}
+header .title{position:absolute;left:0px;width:100%;margin:0px auto;text-align:center;z-index:-1;}
+section header a.button,section footer a.button{margin:4px 3px auto;}
+section header a.button.icon,section footer a.button.icon{width:17px;font-size:1.5em;font-weight:normal;}
+aside{position:absolute;top:0px;bottom:0px;height:auto;width:0px;}
+aside.show{width:256px;}
+header~aside{padding-top:40px;}
+footer~aside{padding-bottom:40px;}
+aside~article{-webkit-transition:left 0.3s ease-in-out;left:0px;}
+aside a{display:block;width:244px;height:40px;padding:0 6px;font-size:1.1em;font-weight:bold;line-height:40px;}
+aside .icon{width:28px;height:28px;float:left;margin:8px 6px 0 0;font-size:1.9em;line-height:1.0em;text-align:center;}
+aside .anchor{font-weight:bold;padding:6px 10px;}
+@media handheld, only screen and (min-width: 768px){[data-target="aside"]{display:none !important;} aside{width:256px;} 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;}
+footer~article{bottom:40px;}
+article.current{z-index:1;opacity:1;}
+article.aside{left:256px !important;}
+article.indented>*:only-child{padding:10px;width:auto;}
+article .title{font-size:15px;margin:0 4px 4px;}
+article .title .icon{margin-right:4px;}
+nav{height:inherit;text-align:center;font-weight:normal;}
+nav a{display:inline-block;padding:0 6px;height:inherit;float:left;font-size:2.0em;line-height:38px;}
+nav a abbr{position:relative;bottom:3px;margin-left:2px;display:none;font-size:0.5em;font-weight:bold;}
+nav a.current abbr{display:inline;}
+nav a.current{-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-ms-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;}
+.toolbar{height:48px;display:block;}
+.toolbar a{float:left;padding:0;font-size:2.2em;}
+.toolbar .icon{display:block;line-height:52px;}
+.toolbar .bubble{position:relative;top:-60px;left:12px;padding:1px 4px;display:inline;font-size:0.45em;-webkit-border-radius:12px;-moz-border-radius:12px;border-radius:12px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}

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

@@ -12,7 +12,7 @@
   background: #000;
 }
 article {
-  background: #fff;
+  background-color: #e2e2e2;
 }
 /* @group <header> & <footer> */
 header {
@@ -37,17 +37,22 @@ footer {
 /* @group <nav> */
 nav a {
   color: rgba(0, 0, 0, 0.5);
-  text-shadow: rgba(255, 255, 255, 0.35) 0 1px 1px;
-}
-header:not(.toolbar) nav a, footer:not(.toolbar) nav a {
-  line-height: 38px;
 }
 nav a.current {
   color: #fff;
   text-shadow: 0px 1px 0px #000 !important;
 }
+.toolbar {
+  box-shadow: inset 0px 1px #1c1c1c;
+}
 .toolbar a.current {
-  background: rgba(255, 255, 255, 0.15);
+  background: #1c1c1c;
+  color: #fff;
+  box-shadow: inset 0px 0px 8px #101010;
+  text-shadow: 0px 1px 4px #000;
+}
+.toolbar .bubble {
+  text-shadow: none;
 }
 /* @end */
 /* @group <aside> */
@@ -67,83 +72,66 @@ aside a.current {
 aside a .icon {
   opacity: 0.5;
 }
+aside .anchor {
+  background: #151515;
+  color: #666;
+}
 /* @end */
 /* @group .list */
-.list {
-  background: #e2e2e2;
-  color: #787878;
+.list, .list li:not(.toolbar) a {
+  color: #333;
 }
-.list li:not(.info) {
+.list li {
   background: #fff;
   border-bottom: 1px inset #e6e6e6;
-  color: #333;
 }
 .list li:last-child {
   border-bottom: none;
 }
-.list li.toolbar {
-  border-bottom-color: rgba(0, 0, 0, 0.2);
-}
-.list li:not(.toolbar) a {
-  color: #787878;
-  text-shadow: #fff 0px 1px 1px;
-  -webkit-tap-highlight-color: #242525;
+.list .darker {
+  background-color: #2c2c2d;
+  color: #fff;
+  text-shadow: 0px 1px 0px #000;
 }
-.list strong {
-  color: #333;
+.list li.darker a {
+  color: #fff !important;
 }
-.list .bubble {
-  border: 1px solid rgba(0, 0, 0, 0.15);
-  -webkit-border-radius: 2px;
-  -moz-border-radius: 2px;
-  border-radius: 2px;
-  -webkit-background-clip: padding-box;
-  -moz-background-clip: padding;
-  background-clip: padding-box;
-  background: #ccc;
-  color: #fff;
-  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
+.list .dark {
+  background-color: #f4f4f4;
+  box-shadow: inset 0px 1px 0px #fff;
+  text-shadow: 0px 1px 0px #fff;
 }
-.list .button {
-  color: #fff;
-  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
+.list small, .list .onright {
+  color: #999;
 }
-.list .arrow:before {
-  color: #a9a9a9;
+.list .tip {
+  color: #7a7a7a;
 }
-/* @group .anchor */
-.list li.anchor {
+.list .anchor {
   background: #f4f4f4;
   color: #222;
 }
-/* @end */
-/* @group .anchor */
-.list li.search {
-  border: none;
-  -webkit-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.1), inset 0px -1px 0px rgba(0, 0, 0, 0.25);
+.list .toolbar {
+  border-bottom-color: rgba(0, 0, 0, 0.2);
 }
-/* @end */
-/* @group .info */
-.list li.info {
-  border: none;
-  -webkit-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.1), inset 0px -1px 0px rgba(0, 0, 0, 0.25);
-  background: #cbcbcb;
+.list .bubble {
+  color: #fff;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
+  box-shadow: inset 0px 0px 1px #000;
 }
-.list .info strong {
-  color: #333;
+.list .arrow:before {
+  color: #a9a9a9;
 }
-.list .info.contrast strong {
-  color: #fff;
+.list .toolbar a {
+  box-shadow: 1px 0px 0px #d9d9d9;
 }
-/* @end */
-/* @end */
-.list .contrast {
-  background: #2c2c2d -webkit-gradient(linear, left top, left bottom, color-stop(0.25, #2c2c2d), color-stop(1, #1c1d1d)) !important;
-  text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25);
-  color: #fff;
+.list .toolbar a:last-child {
+  box-shadow: none;
 }
-.list .highlight {
-  background: #499dc4 -webkit-gradient(linear, left top, left bottom, color-stop(0, #499dc4), color-stop(1, #0e8eb6)) !important;
+.list .toolbar a.current {
+  background: transparent;
+  color: #333;
+  text-shadow: none !important;
 }
 /* @end */
 /* @group widgets */
@@ -183,4 +171,10 @@ input:focus, textarea:focus, select:focus {
   background-clip: padding-box;
 }
 /* @end */
+/* @end */
+/* @group Article */
+article .title {
+  color: #797979;
+  text-shadow: 0px 1px 0px #fff;
+}
 /* @end */

src/stylesheets/css/Lungo.widgets.colour.css

@@ -24,3 +24,16 @@ a.twitter,.twitter:not(span){background-color:#35cdff;}
 a.twitter:active{background-color:#2bafda;}
 a.facebook,.facebook:not(span){background-color:#3b5998;}
 a.facebook:active{background-color:#2c4579;}
+li.grey{box-shadow:inset 3px 0px 0px #ccc;}
+li.red{box-shadow:inset 3px 0px 0px #e33100;}
+li.lightgreen{box-shadow:inset 3px 0px 0px #91bd09;}
+li.green{box-shadow:inset 3px 0px 0px #009600;}
+li.blue{box-shadow:inset 3px 0px 0px #237fd7;}
+li.arcticblue{box-shadow:inset 3px 0px 0px #2daebf;}
+li.orange{box-shadow:inset 3px 0px 0px #ff5c00;}
+li.purple{box-shadow:inset 3px 0px 0px #7b658d;}
+li.magenta{box-shadow:inset 3px 0px 0px #a9014b;}
+li.pink{box-shadow:inset 3px 0px 0px #ff007f;}
+li.yellow{box-shadow:inset 3px 0px 0px #ffb515;}
+li.twitter{box-shadow:inset 3px 0px 0px #35cdff;}
+li.facebook{box-shadow:inset 3px 0px 0px #3b5998;}

src/stylesheets/css/Lungo.widgets.form.css

@@ -1,12 +1,13 @@
-.form,form{position:relative;margin:8px;font-size:1.15em;font-weight:bold;}
-input:not([type=checkbox]),textarea,select{display:inline-block;padding:6px 6px 5px;width:95%;margin-bottom:8px;outline:none;-webkit-appearance:none;font-size:1.0em;font-weight:bold;line-height:1.25em;}
-input[type=search]{width:100%;z-index:1;margin:0px;}
+.form,form{font-size:0.95em;}
+label:not(.checkbox){display:block;margin-bottom:2px;}
+input:not([type=checkbox]),textarea,select{display:inline-block;padding:5px;width:95%;margin-bottom:2px;outline:none;-webkit-appearance:none;font-size:1.0em;font-weight:bold;line-height:1.25em;}
+input[type=search]{width:100%;}
 input[type=search]:before{content:"hola";}
 select{width:100%;}
 label.select{position:relative;display:inline-block;width:100%;}
 .select:after{padding:0 7px;position:absolute;top:0;right:0;bottom:0;height:30px;content:"▼";pointer-events:none;font-size:60%;line-height:32px;}
 .no-pointer-events .select:after{content:none;}
-input[type="checkbox"],input[type="radio"]{width:74px;float:left;z-index:1;}
+input[type="checkbox"],input[type="radio"]{width:74px;float:left;z-index:2;}
 input[type="checkbox"]+span::after,input[type="radio"]+span::after{content:"off";}
 input[type="checkbox"]:checked+span::after,input[type="radio"]:checked+span::after{content:"on";}
 .iphone-toggle-buttons{-moz-user-select:none;-webkit-user-select:none;user-select:none;}

src/stylesheets/less/Lungo.layout.less

@@ -104,39 +104,6 @@ section header a.button.icon, section footer a.button.icon  {
 }
 /* @end */
 
-/* @group <nav> */
-nav  {
-	height: inherit;
-	text-align: center;
-	font-weight: normal;
-}
-
-nav a  {
-	display: inline-block;
-	padding: 0 6px;
-	height: inherit;
-	float: left;
-	font-size: 2.0em;
-}
-
-nav a abbr {
-	position: relative;
-	bottom: 3px;
-	margin-left: 2px;
-	display: none;
-	font-size: 0.5em;
-	font-weight: bold;
-}
-
-nav a.current abbr {
-	display: inline;
-}
-
-nav a.current {
-	.transition(all 0.3s ease-in-out);
-}
-/* @end */
-
 /* @group <aside> */
 aside {
 	position: absolute;
@@ -173,7 +140,7 @@ aside a{
 	line-height: 40px;
 }
 
-	aside a .icon {
+	aside .icon {
 		width: 28px;
 		height: 28px;
 		float: left;
@@ -183,6 +150,11 @@ aside a{
 	    line-height: 1.0em;
 	    text-align: center;
 	}
+	
+	aside .anchor {
+		font-weight: bold;
+    	padding: 6px 10px;
+	}
 
 @media handheld, only screen and (min-width: 768px) {
 	[data-target="aside"] {
@@ -194,7 +166,9 @@ aside a{
 	}
 
 	aside ~ article{
+		width: auto !important;
     	left: 256px;
+    	right:  0px !important;
 	}
 }
 /* @end */
@@ -202,8 +176,8 @@ aside a{
 /* @group <article> */
 article {
 	position: absolute;
-	width: 100%;
-	height: auto;
+	width: inherit;
+	height: inherit;
 	top: 0px;
 	bottom: 0px;
 	display: block;
@@ -211,71 +185,95 @@ article {
 	opacity: 0;
 }
 	
-	header ~ article {
-		top: 40px;
-	}
+	header ~ article { top: 40px; }	
 	
-	footer ~ article {
-		bottom: 40px;
-	}
+	footer ~ article { bottom: 40px; }
 
 	article.current {
 		z-index: 1;
 		opacity: 1;
 	}
 	
-	article.aside {
-	    left: 256px !important;
+	article.aside { left: 256px !important; }
+	
+	article.indented > *:only-child{
+    	padding: 10px;
+    	width: auto;
 	}
 	
-	article.indented {
-		background-color: #e2e2e2;
+	article .title {
+		font-size: 15px;
+		margin: 0 4px 4px;
 	}
-		.indented ul, .indented form {
-			margin: 10px;
-			.border-radius(4px);
-			border: 1px solid #c5c5c5;
-			box-shadow: 0px 0px 8px #ccc;
-		}
-		
-		.indented li:first-child {
-			border-top-left-radius: 4px;
-			border-top-right-radius: 4px;
-		}
-		
-		.indented li:last-child {
-			border-bottom-left-radius: 4px;
-			border-bottom-right-radius: 4px;
-		}
-		
-		.list .contrasted {
-			background-color: #f4f4f4 !important;
-			box-shadow: inset 0px 1px 0px #fff;
-		}
-		
-		.list .toolbar a {
-			box-shadow: 1px 0px 0px #d9d9d9 ;
-		}
 		
-		.list .toolbar a:last-child {
-			box-shadow: none;
-		}
-		
-		.list .toolbar a.current {
-			color: #419ad9;
-		}
+		article .title .icon { margin-right: 4px; }
+				
 /* @end */
 
+/* @group <nav> */
+nav  {
+	height: inherit;
+	text-align: center;
+	font-weight: normal;
+}
+
+nav a  {
+	display: inline-block;
+	padding: 0 6px;
+	height: inherit;
+	float: left;
+	font-size: 2.0em;
+	line-height: 38px;
+}
+
+nav .icon {
+    
+}
+
+nav a abbr {
+	position: relative;
+	bottom: 3px;
+	margin-left: 2px;
+	display: none;
+	font-size: 0.5em;
+	font-weight: bold;
+}
+
+nav a.current abbr {
+	display: inline;
+}
+
+nav a.current {
+	.transition(all 0.3s ease-in-out);
+}
+
 
+.toolbar {
+	height: 48px;
+	display: block;
+}
 
-.toolbar{
-	height:48px;
-	line-height:44px;
-	display:block;
+.toolbar a {
+	float: left;
+	padding: 0;
+	font-size: 2.2em;
 }
 
-.toolbar a{
-	float:left;
-	padding:0;
-	font-size:2.0em;
+.toolbar .icon {
+	display: block;
+	
+	line-height: 52px;
+}
+.toolbar .bubble {
+	position: relative;
+    top:  -60px;
+    left: 12px;
+    padding: 1px 4px;
+    display: inline;
+    
+    font-size: 0.45em;
+    
+    .border-radius(12px);
 }
+
+/* @end */

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

@@ -11,12 +11,12 @@
 
 /* @group layout */
 .app {
-	font-size:13px;
+	font-size: 13px;
     background: #000;
 }
 
 article {
-	background: #fff;
+	background-color: #e2e2e2;
 }
 	
 /* @group <header> & <footer> */
@@ -35,6 +35,8 @@ footer {
 	-webkit-box-shadow: inset 0px 1px rgba(0,0,0,0.5);
 }
 
+
+
 .title {
 	color: #fff;
 	text-shadow: rgba(0,0,0,0.5) 0 -1px 0px; 
@@ -44,11 +46,7 @@ footer {
 /* @group <nav> */
 nav a {
 	color: rgba(0,0,0,0.5);
-	text-shadow: rgba(255,255,255,0.35) 0 1px 1px;
-}
-	
-header:not(.toolbar) nav a, footer:not(.toolbar) nav a {
-	line-height: 38px;
+	//text-shadow: rgba(255,255,255,0.35) 0 1px 1px;
 }
 
 nav a.current {
@@ -56,8 +54,25 @@ nav a.current {
 	text-shadow: 0px 1px 0px #000 !important;
 }
 
+.toolbar {
+    //background: #f00;
+    box-shadow: inset 0px 1px #1c1c1c;
+}
+
+.toolbar a {
+    //line-height: 44px;
+}
+
 .toolbar a.current{
-	background: rgba(255,255,255,0.15);
+	background: #1c1c1c;
+	color: #fff;
+	
+	box-shadow: inset 0px 0px 8px #101010;
+	text-shadow: 0px 1px 4px #000;
+}
+
+.toolbar .bubble {
+    text-shadow: none;
 }
 	
 /* @end */
@@ -83,99 +98,75 @@ aside a .icon {
 	opacity: 0.5;
 }
 
+aside .anchor {
+    background: #151515;
+	color:  #666;
+}
+
 /* @end */
 
 /* @group .list */
-.list {
-	background: #e2e2e2;
-	color: #787878;
-}
-
-.list li:not(.info) {
-	background: #fff;
-	border-bottom: 1px inset #e6e6e6;
+.list, .list li:not(.toolbar) a {
 	color: #333;
 }
-
-.list li:last-child {
-	border-bottom: none;
-}
+	.list li {
+		background: #fff;
+		border-bottom: 1px inset #e6e6e6;
+	}
 	
-.list li.toolbar {
-	border-bottom-color: rgba(0,0,0,0.2);
-}
-
-.list li:not(.toolbar) a { 
-	color: #787878;
-	text-shadow: #fff 0px 1px 1px; 
-	-webkit-tap-highlight-color: #242525;
-}
-
-.list strong {
-	color: #333;
-}
+	.list li:last-child { border-bottom: none; }
 	
-.list .bubble {
-	border: 1px solid rgba(0,0,0,0.15);
-	.border-radius(2px);
-	background: #ccc;
+	.list .darker {
+		background-color: #2c2c2d;	
+		color: #fff;
+		text-shadow: 0px 1px 0px #000;
+	}
 	
-	color: #fff; 
-	text-shadow: 0 -1px 0 rgba(0,0,0,.3);
-}	
-
-.list .button {
-	color: #fff;
-	text-shadow: 0 -1px 0 rgba(0,0,0,.3); 
-}
-
-.list .arrow:before {
-	color: #a9a9a9;
-}
-
-/* @group .anchor */
-.list li.anchor {
-	background: #f4f4f4;
-	color: #222;
-}
-/* @end */
-
-/* @group .anchor */
-.list li.search {
-	border: none;
-	-webkit-box-shadow: 
-		inset 0px 1px 0px rgba(255,255,255,0.1), 
-		inset 0px -1px 0px rgba(0,0,0,0.25);
+		.list li.darker a{ color: #fff !important; }
+	
+	.list .dark {
+	    background-color: #f4f4f4;
+		box-shadow: inset 0px 1px 0px #fff;			
+		text-shadow: 0px 1px 0px #fff;
 	}
-/* @end */
 
-/* @group .info */
-.list li.info {	
-	border: none;
-	-webkit-box-shadow: 
-		inset 0px 1px 0px rgba(255,255,255,0.1), 
-		inset 0px -1px 0px rgba(0,0,0,0.25);
-	background: #cbcbcb;
-}
+	.list small, .list .onright {
+		color: #999;
+	}
 	
-.list .info strong{	
-	color: #333;
-}
+	.list .tip {
+		color: #7a7a7a;
+	}
+	
+	.list .anchor {
+		background: #f4f4f4;
+		color: #222;
+	}
+	
+	.list .toolbar {
+		border-bottom-color: rgba(0,0,0,0.2);
+	}
 
-.list .info.contrast strong {	
-	color: #fff;
-}
-/* @end */
-/* @end */
-.list .contrast {
-	background: #2c2c2d -webkit-gradient(linear, left top, left bottom, color-stop(0.25, #2c2c2d), color-stop(1, #1c1d1d)) !important;
-	text-shadow: 0px 1px 1px rgba(0,0,0,0.25);
-	color: #fff;
-}
+	.list .bubble {
+		color: #fff; 
+		text-shadow: 0 -1px 0 rgba(0,0,0,.3);
+		box-shadow: inset 0px 0px 1px #000;
+	}	
+	
+	.list .arrow:before {
+		color: #a9a9a9;
+	}
+	
+	.list .toolbar a { box-shadow: 1px 0px 0px #d9d9d9; }
+		
+		.list .toolbar a:last-child { box-shadow: none; }
+		
+		.list .toolbar a.current {
+			background: transparent;
+			color: #333;
+			text-shadow: none !important;
+		}
 
-.list .highlight {
-	background: #499dc4 -webkit-gradient(linear, left top, left bottom, color-stop(0, #499dc4), color-stop(1, #0e8eb6)) !important;
-}
 /* @end */
 
 /* @group widgets */
@@ -207,4 +198,14 @@ input:focus, textarea:focus, select:focus {
 	.border-radius(0 2px 2px 0);
 }
 /* @end */
+/* @end */
+
+/* @group Article */
+
+article .title {
+    color: #797979;
+    text-shadow: 0px 1px 0px #fff;
+}
+    		
+
 /* @end */