New stylesheets .classes for <aside> element

src/stylesheets/css/Lungo.layout.css

@@ -20,5 +20,10 @@ 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;}
 article{position:absolute;width:100%;height:auto;top:0px;bottom:0px;display:block;z-index:0;opacity:0;}
 article.current{z-index:1;opacity:1;}
-.toolbar{height:48px;line-height:44px;display:block;}
-.toolbar a{float:left;padding:0;font-size:2.0em;}
+article{position:absolute;width:100%;height:auto;top:0px;bottom:0px;z-index:0;opacity:0;}
+article.current{z-index:1;opacity:1;}
+article.aside{left:256px !important;}
+aside{position:absolute;top:0px;bottom:0px;width:256px;height:auto;padding-top:40px;}
+aside a{display:block;width:100%;height:48px;padding:0 8px;font-size:1.1em;font-weight:bold;line-height:48px;}
+aside a .icon{width:32px;float:left;margin:8px 4px 0 0;opacity:0.5;font-size:2.2em;text-align:center;}
+@media handheld, only screen and (max-width: 768px){article{-webkit-transition:left 0.3s ease-in-out;} aside{width:0px;} aside.show{width:256px;}}

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

@@ -48,6 +48,17 @@ nav a.current {
   -webkit-box-shadow: none;
 }
 /* @end */
+/* @group <aside> */
+aside {
+  background: #42474d -webkit-gradient(linear, left top, left bottom, color-stop(0.25, #42474d), color-stop(1, #2c3137));
+  -webkit-box-shadow: inset -4px 0px 8px rgba(0, 0, 0, 0.5);
+}
+aside a {
+  color: #fff !important;
+  text-shadow: 0px 1px 0px #000 !important;
+  border-bottom: 1px inset rgba(255, 255, 255, 0.1);
+}
+/* @end */
 /* @group .list */
 .list {
   background: #c5c5c5;

src/stylesheets/less/Lungo.layout.less

@@ -145,16 +145,72 @@ article.current {
 }
 /* @end */
 
-/* @group .toolbar */
-.toolbar {
-	height: 48px; 
-	line-height: 44px;
+/* @group <article> */
+article {
+	position: absolute; 
+	width: 100%;
+	height: auto;
+	top: 0px; 
+	bottom: 0px;
+	
+	z-index: 0;
+	opacity: 0;
+}
+
+article.current { 
+	z-index: 1;
+	opacity: 1; 
+}
+
+article.aside {
+    left: 256px !important;
+}
+/* @end */
+
+/* @group <aside> */
+aside {
+	position: absolute;
+	top: 0px; 
+	bottom: 0px;
+	width: 256px;
+	height: auto;
+	/* @ToDo */
+	padding-top: 40px;
+}
+
+aside a{
 	display: block;
+	width: 100%;
+	height: 48px;
+	padding: 0 8px;
+	
+	font-size: 1.1em;
+	font-weight: bold;
+	line-height: 48px;
 }
 
-.toolbar a  {
+aside a .icon {
+	width: 32px;
 	float: left;
-	padding: 0;
-	font-size: 2.0em;
+	margin: 8px 4px 0 0;
+    
+	opacity: 0.5;
+    
+    font-size: 2.2em;
+    text-align: center;
+}
+
+@media handheld, only screen and (max-width: 768px) {
+	article {
+    	-webkit-transition: left 0.3s ease-in-out;
+	}
+	
+	aside {
+    	width: 0px;
+	}
+
+	aside.show {
+	    width: 256px;
+	}
 }
 /* @end */

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

@@ -74,6 +74,20 @@ not(.toolbar) nav a.current {
 	
 /* @end */
 
+/* @group <aside> */
+aside {
+    background: #42474d -webkit-gradient(linear, left top, left bottom, color-stop(0.25, #42474d), color-stop(1, #2c3137));
+	-webkit-box-shadow: inset -4px 0px 8px rgba(0,0,0, 0.5);
+}
+
+aside a{
+	color: #fff !important;
+    text-shadow: 0px 1px 0px #000 !important;
+    border-bottom: 1px inset rgba(255,255,255,0.1);
+}
+
+/* @end */
+
 /* @group .list */
 .list {
 	background: #c5c5c5;