Refactor in stylesheets

src/stylesheets/css/Lungo.layout.article.css

@@ -1,5 +1,4 @@
-article{position:absolute;width:inherit;height:auto;top:0px;bottom:0px;visibility:hidden;z-index:0;}article.current{visibility:visible;z-index:1;}
-article.aside{-webkit-transform:translate3d(256px, 0, 0);transform:translate3d(256px, 0, 0);}
+article{position:absolute;width:100% !important;height:auto;top:0px;bottom:0px;visibility:hidden;z-index:0;}article.current{visibility:visible;z-index:1;}
 article .title{font-size:1.1em;margin:0px 0 4px;}article .title .icon{margin-right:4px;}
 article .text{margin:4px 0 8px;display:block;font-size:0.9em;font-weight:normal;line-height:1.4em;}
 header:not(.extended)~article{top:40px;}

src/stylesheets/css/Lungo.layout.aside.css

@@ -10,4 +10,4 @@ aside a{display:block;width:244px;height:40px;padding:0 6px;font-size:15px;line-
 aside .icon{width:24px;float:left;margin:8px 4px 0 0;font-size:24px;line-height:24px;text-align:center;}
 aside .anchor{font-weight:bold;padding:3px 10px 4px;}
 aside .bubble{float:right;font-size:11px;margin:12px 4px 0 0;}
-@media handheld, only screen and (min-width: 768px){[data-target="aside"]{display:none !important;} aside{opacity:1;} aside~article{width:auto !important;left:256px;right:0px !important;}}
+@media handheld, only screen and (min-width: 768px){[data-target="aside"]{display:none !important;} aside{visibility:visible;} section.current{width:auto !important;left:256px;right:0px !important;} aside~section{width:auto !important;left:256px;right:0px !important;}}

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

@@ -1,4 +1,4 @@
-.list{width:inherit;font-size:1.15em;}.list a{display:block;}
+.list{font-size:1.15em;}.list a{display:block;}
 .list li:not(.toolbar){padding:8px 6px 8px 8px;list-style-type:none;}.list li:not(.toolbar) .icon,.list li:not(.toolbar) img{float:left;width:32px;height:32px;margin-right:6px;font-size:36px;font-weight:normal;}
 .list .icon,.list img{display:inline-block;}
 .list small{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:0.85em;}

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

@@ -2,7 +2,7 @@
 label{font-size:0.8em;line-height:27px;}
 input:not([type=checkbox]),textarea,select{display:inline-block;padding:5px;width:95%;margin-bottom:2px;outline:none;-webkit-appearance:none;border-radius:0px;font-size:15px;line-height:15px;font-weight:bold;-webkit-user-select:text;}
 input[type=search]{width:86%;}input[type=search] +.button{float:right;padding:0px;width:32px;height:30px;}input[type=search] +.button .icon{font-size:22px !important;line-height:30px;}
-select{width:100%;}
+select{width:100%;height:29px;}
 label.select{position:relative;display:inline-block;width:100%;padding-top:2px;}
 .select:after{text-align:center;position:absolute;top:0;right:0;bottom:0;height:29px;width:29px;content:"▼";pointer-events:none;line-height:32px;margin-top:2px;}
 .no-pointer-events .select:after{content:none;}
@@ -20,4 +20,7 @@ input[type="checkbox"]+span::before,input[type="radio"]+span::before{content:"";
 input[type="checkbox"]+span::after,input[type="radio"]+span::after{text-indent:0;width:41px;height:27px;text-align:center;box-shadow:0px 1px 0px #fff, 0px 2px 0px #d2d2d2;}
 input[type="checkbox"]:checked+span::before,input[type="radio"]:checked+span::before{left:auto;}
 input[type="checkbox"]:checked+span::after,input[type="radio"]:checked+span::after{height:27px;}
+input[type="range"]{-webkit-appearance:none;height:3px;width:100%;outline:none;border-radius:1px;position:relative;padding:0px;margin:0px;margin-bottom:4px !important;background-color:#c7c7c7;border:0;cursor:ew-resize;}input[type="range"]:active{background-color:#34b7dc;}
+input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;position:relative;z-index:1;width:24px;height:24px;border-radius:12px;border:solid 7px rgba(255, 255, 255, 0.5);background:#34b7dc;}
+input[type="range"]:active::-webkit-slider-thumb{box-shadow:0px 0px 4px #34b7dc;}
 @media screen and (-webkit-min-device-pixel-ratio:0){.custom-select select{padding-right:30px;}}

src/stylesheets/less/Lungo.layout.article.less

@@ -17,7 +17,7 @@
 /* @group <article> */
 article {
 	position: absolute;
-	width: inherit;
+	width: 100% !important;
 	height: auto;
 	top: 0px;
 	bottom: 0px;
@@ -29,8 +29,6 @@ article {
 		z-index: 1;
 	}
 	
-	&.aside { .transform(translate3d(256px, 0, 0)); }
-	
 	& .title {
     	font-size: 1.1em;
 		margin: 0px 0 4px;

src/stylesheets/less/Lungo.layout.aside.less

@@ -82,8 +82,13 @@ footer ~ aside {
 	
 		@media handheld, only screen and (min-width: 768px) {
 			[data-target="aside"] { display: none !important; }		
-			aside { opacity: 1; }
-			aside ~ article{
+			aside { visibility: visible; }
+			section.current {
+    			width: auto !important;
+		    	left: 256px;
+		    	right:  0px !important;
+			}
+			aside ~ section{
 				width: auto !important;
 		    	left: 256px;
 		    	right:  0px !important;

src/stylesheets/less/Lungo.layout.list.less

@@ -10,7 +10,6 @@
  @import "mixins.less";
  
 .list {
-    width: inherit;
     font-size: 1.15em;
     
     & a {  

src/stylesheets/less/Lungo.widgets.form.less

@@ -8,7 +8,6 @@
  */
 
 @import "mixins.less";
-
 .form, form {
 	width: inherit !important;
 }
@@ -54,6 +53,7 @@ input[type=search] {
 
 select { 
 	width: 100%;
+	height: 29px;
 }
 
 label.select {
@@ -188,42 +188,42 @@ input[type="checkbox"]:checked + span::after,
 }
 /* @end */
 
-/* @group slider */
-/*
+/* @group range */
+
 input[type="range"] {
 	-webkit-appearance:	none;
-	outline: none;
 	height: 3px;
+	width: 100%;
+	outline: none;
 	border-radius: 1px;
 	position: relative;
 	padding: 0px;
 	margin: 0px;
+	margin-bottom: 4px !important;
 	
 	background-color: #c7c7c7;
 	
 	border: 0;
 	cursor: ew-resize;
-}
-	input[type="range"]:active { background-color: #34b7dc; }
-
-input[type="range"]::-webkit-slider-thumb {
-	-webkit-appearance:	none;	
-	position: relative;
-	z-index: 		1;
-
-	width: 12px;
-	height: 12px;
 	
-	border-radius: 6px;
-	background: #34b7dc;
-	box-shadow: inset 0px 0px 1px rgba(0,0,0,0.5);
+	&:active { background-color: #34b7dc; }
+	&::-webkit-slider-thumb {
+		-webkit-appearance:	none;	
+		position: relative;
+		z-index: 		1;
 	
-}
-	input[type="range"]:hover::-webkit-slider-thumb,
-	input[type="range"]:active::-webkit-slider-thumb {
-		box-shadow: 0px 0px 8px #34b7dc;
+		width: 24px;
+		height: 24px;
+		border-radius: 12px;
+		border: solid 7px rgba(255,255,255, 0.5);
+		
+		background: #34b7dc;
+		//box-shadow: inset 0px 0px 1px rgba(0,0,0,0.2);
+	}
+	&:active::-webkit-slider-thumb {
+		box-shadow: 0px 0px 4px #34b7dc;
 	}
-*/
+}
 /* @end */
 
 @media screen and (-webkit-min-device-pixel-ratio:0) {