Aside behavior in CSS

src/stylesheets/css/Lungo.layout.css

@@ -19,11 +19,14 @@ nav a{display:inline-block;padding:0 6px;height:inherit;float:left;font-size:2.0
 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;}
-[data-target="aside"]{display:none !important;}
-aside{position:absolute;top:0px;bottom:0px;width:256px;height:auto;padding-top:40px;}
+aside{position:absolute;top:0px;bottom:0px;height:auto;width:0px;}
+aside.show{width:256px;}
+header~aside{padding-top:40px;}
+header~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 (max-width: 768px){article{-webkit-transition:left 0.3s ease-in-out;} [data-target="aside"]{display:inline !important;} aside{width:0px;} aside.show{width:256px;}}article{position:absolute;width:100%;height:auto;top:0px;bottom:0px;display:block;z-index:0;opacity:0;}
+@media handheld, only screen and (min-width: 768px){[data-target="aside"]{display:none !important;} aside{width:256px;} aside~article{left:256px;}}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;}

src/stylesheets/less/Lungo.layout.less

@@ -136,20 +136,30 @@ nav a.current {
 /* @end */
 
 /* @group <aside> */
-[data-target="aside"]{
-	display: none !important;
-}
-
 aside {
 	position: absolute;
 	top: 0px; 
 	bottom: 0px;
-	width: 256px;
 	height: auto;
-	/* @ToDo */
+	width: 0px;	
+}
+	aside.show {
+		width: 256px;
+	}
+	
+header ~ aside {
 	padding-top: 40px;
 }
 
+header ~ aside {
+	padding-bottom: 40px;
+}
+	
+aside ~ article{
+	-webkit-transition: left 0.3s ease-in-out;
+	left: 0px;
+}
+
 aside a{
 	display: block;
 	width: 244px;
@@ -161,32 +171,28 @@ aside a{
 	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 (max-width: 768px) {
-	article {
-    	-webkit-transition: left 0.3s ease-in-out;
+	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;
 	}
-	
-	[data-target="aside"]{
-		display: inline !important;
+
+@media handheld, only screen and (min-width: 768px) {
+	[data-target="aside"] {
+		display: none !important;
 	}
 	
 	aside {
-    	width: 0px;
+		width: 256px;
 	}
-
-	aside.show {
-	    width: 256px;
+	
+	aside ~ article{
+    	left: 256px;
 	}
 }
 /* @end */