start editing setting page

some relevant stuff updated

app/assets/javascripts/orbitdesktop.js

@@ -151,6 +151,8 @@ var orbitDesktop = function(dom){
 			}, function(){
 				$(this).addClass('op01');
 			});
+
+			// simple dropdown menu
 			var $sdm = $('.sdm');
 
 			if( !$sdm.children('.sdm_o') ){
@@ -255,12 +257,13 @@ var orbitDesktop = function(dom){
 					}
 					else
 						$("#"+$(this).attr("data-category")).append(element);
-		},over:function(){
+				},
+				over:function(){
 				    $(this).find('span.tile').removeClass('op06');
 				},
-				 out:function(){
+				out:function(){
 					$(this).find('span.tile').addClass('op06');
-				 }
+				}
 	 		});
 			$('#holder').tinyscrollbar({ axis: 'x'});
 			var $sdm = $('.sdm');
@@ -291,7 +294,8 @@ var orbitDesktop = function(dom){
 		var bindHandlers = function(){
 			$("select#change_theme").change(function(){
 				o.changeTheme($(this).val());	
-			})
+			});
+			$('#panel_r').tinyscrollbar({ axis: 'y'});
 		}
 		if(!o.desktopData[o.currentface]){
 			$(o.contentHolder).empty().load("/desktop/"+target,function(){

app/assets/stylesheets/desktopmain.css

@@ -173,6 +173,7 @@ a, a:hover { text-decoration: none; }
 	}
 .appholder {
 	position: relative;
+	z-index: 2;
 	padding-bottom: 12px;
 	}
 .holder_f {
@@ -180,8 +181,8 @@ a, a:hover { text-decoration: none; }
 	width: 100%;
 	height: 100%;
 	padding: 0;
-/*	left: 0;
-	top: 0; */
+	left: 0;
+	top: 0;
 	}
 .dtitle { 
 	font-size: 30px;
@@ -213,6 +214,10 @@ a, a:hover { text-decoration: none; }
 	top: 0;
 	}
 
+/* panel */
+#panel_l { background-color: #f0f0f0; float: left; }
+#panel_r { margin-left: 252px; position: relative;}
+
 /* simple dropdown menu */
 .sdm {}
 .sdm:hover .sdm_o { display: block; }
@@ -227,6 +232,22 @@ a, a:hover { text-decoration: none; }
 .sdm_o li:first-child { border: none; }
 .sdm_o .admtxt { display: block; line-height: 36px; }
 .sdm_o .admtxt:hover { background-color: #F0F0F0; }
+
+/* simple menu */
+.s_menu { font-size: 15px; line-height: 36px; }
+.s_menu li { border-top: solid 1px #ddd; }
+.s_menu li:first-child { border: none; }
+.s_menu a { display: block; }
+
+/* simple tabs */
+.s_tab { font-size: 15px; line-height: 36px; }
+.stb_h {}
+.stb_v {}
+.s_tab li { display: inline-block; }
+.s_tab a { display: block; }
+.st_c { display: none; }
+.st_c:first-child { display: block; }
+
 /* theme color opacity */
 .op10 { opacity: 1; }
 .op09 { opacity: 0.9; }
@@ -247,6 +268,8 @@ a, a:hover { text-decoration: none; }
 .wh1 { width: 30px; }
 .wh2 { width: 36px; }
 .wh3 { width: 60px; }
+.w100 { width: 100%; }
+.pw { width: 572px; }
 
 .h1 { height: 96px; }
 .h2 { height: 228px; }
@@ -254,6 +277,7 @@ a, a:hover { text-decoration: none; }
 .hh1 { height: 30px; }
 .hh2 { height: 36px; }
 .hh3 { height: 60px; }
+.ph { height: 516px; }
 
 .hp { padding-left: 12px; padding-right: 12px; }
 .vp { padding-top: 12px; padding-bottom: 12px; }
@@ -287,12 +311,9 @@ a, a:hover { text-decoration: none; }
 /* tiny scrollbar */
 #holder .viewport { width: auto; height: 516px; overflow: hidden; position: relative; }
 #holder .overview { position: absolute; left: 0; top: 0; }
-#holder .scrollbar { 
-	position: absolute;
-	bottom: 0;
-	left: 0;
-	height: 12px;
-}
+#holder .scrollbar { position: absolute; }
+#holder .scrollbar.sb_h { left: 0; bottom: 0; height: 12px; }
+#holder .scrollbar.sb_v { right: 0; top: 0; width: 12px; }
 #holder .track { height: 100%; width: 12px; position: relative; }
 #holder .thumb { height: 12px; width: 12px; cursor: pointer; overflow: hidden; position: absolute; top: 0; }
 #holder .thumb .end { overflow: hidden; height: 12px; width: 12px; }
@@ -330,5 +351,4 @@ a, a:hover { text-decoration: none; }
 }
 .grp{
 	min-height:540px;
-}
-
+}