help cleanup, use dijit dialog

10 files changed, 200 insertions, 347 deletions

diff --git a/classes/backend.php b/classes/backend.php
index 42dfb5474..29f18171f 100644
--- a/classes/backend.php
+++ b/classes/backend.php
@@ -18,14 +18,74 @@ class Backend extends Handler {
 		print_r($rv);
 	}
 
+	private function display_main_help() {
+		$info = get_hotkeys_info($this->link);
+		$imap = get_hotkeys_map($this->link);
+		$omap = array();
+
+		// :(
+		$tinycharmap = array(
+			"(9)" => "{TAB}",
+			"(191)" => "?");
+
+		foreach ($imap[1] as $sequence => $action) {
+			if (!isset($omap[$action])) {
+				$omap[$action] = isset($tinycharmap[$sequence]) ? $tinycharmap[$sequence] :
+					$sequence;
+			}
+		}
+
+		print "<ul class='helpKbList' id='helpKbList'>";
+
+		print "<h2>" . __("Keyboard Shortcuts") . "</h2>";
+
+		foreach ($info as $section => $hotkeys) {
+
+			print "<li><h3>" . $section . "</h3></li>";
+
+			foreach ($hotkeys as $action => $description) {
+				print "<li>";
+				print "<input dojoType=\"dijit.form.CheckBox\"
+					type=\"checkbox\" disabled=\"1\" checked=\"1\">";
+			 	print "<span class='hksequence'>" . $omap[$action] . "</span>";
+			  	print $description;
+				print "</li>";
+			}
+
+		}
+
+		print "</ul>";
+
+		print "<p><a target=\"_blank\" href=\"http://tt-rss.org/wiki/InterfaceTips\">".
+			__("Other interface tips are available in the Tiny Tiny RSS wiki.") .
+			"</a></p>";
+	}
+
 	function help() {
 		$topic = basename($_REQUEST["topic"]);
 
-		if (file_exists("help/$topic.php")) {
+		switch ($topic) {
+		case "main":
+			$this->display_main_help();
+			break;
+		case "prefs":
+			//$this->display_prefs_help();
+			break;
+		default:
+			print "<p>".__("Help topic not found.")."</p>";
+		}
+
+		print "<div align='center'>";
+		print "<button dojoType=\"dijit.form.Button\"
+			onclick=\"return dijit.byId('helpDlg').hide()\">".
+			__('Close this window')."</button>";
+		print "</div>";
+
+		/* if (file_exists("help/$topic.php")) {
 			include("help/$topic.php");
 		} else {
 			print "<p>".__("Help topic not found.")."</p>";
-		}
+		} */
 		/* print "<div align='center'>
 			<button onclick=\"javascript:window.close()\">".
 			__('Close this window')."</button></div>"; */
diff --git a/help/main.php b/help/main.php
deleted file mode 100644
index 094b28977..000000000
--- a/help/main.php
+++ /dev/null
@@ -1,81 +0,0 @@
-	<h1><?php echo __("Keyboard Shortcuts") ?></h1>
-
-	<table style='width : 100%'><tr><td style='width : 50%' valign='top'>
-
-	<h2><?php echo __("Navigation") ?></h2>
-
-	<table>
-		<tr><td class='n'>j/k</td><td><?php echo __("Move between feeds") ?></td></tr>
-		<tr><td class='n'>n/p</td><td><?php echo __("Move between articles") ?></td></tr>
-		<tr><td class='n'>/</td><td><?php echo __("Show search dialog") ?></td></tr>
-	</table>
-
-	<h2><?php echo __("Active article actions") ?></h2>
-
-	<table>
-		<tr><td class='n'>s</td><td><?php echo __("Toggle starred") ?></td></tr>
-		<tr><td class='n'>S</td><td><?php echo __("Toggle published") ?></td></tr>
-		<tr><td class='n'>u</td><td><?php echo __("Toggle unread") ?></td></tr>
-		<tr><td class='n'>T</td><td><?php echo __("Edit tags") ?></td></tr>
-		<tr><td class='n'>D</td><td><?php echo __("Dismiss selected articles") ?></td></tr>
-		<tr><td class='n'>X</td><td><?php echo __("Dismiss read articles") ?></td></tr>
-		<tr><td class='n'>o</td><td><?php echo __("Open article in new window") ?></td></tr>
-		<tr><td class='n'>c n/c p</td><td><?php echo __("Mark articles below/above active one as read") ?></td></tr>
-		<tr><td class='n'>N/P</td><td><?php echo __("Scroll article content") ?></td></tr>
-		<tr><td class='n'>e</td><td><?php echo __("Email article") ?></td></tr>
-
-	</table>
-
-	<h2><?php echo __("Other actions") ?></h2>
-
-	<table>
-		<tr><td class='n'>[tab]</td><td><?php echo __("Select article under mouse cursor") ?></td></tr>
-		<tr><td class='n'>c l</td><td><?php echo __("Create label") ?></td></tr>
-		<tr><td class='n'>c f</td><td><?php echo __("Create filter") ?></td></tr>
-		<tr><td class='n'>c s</td><td><?php echo __("Collapse sidebar") ?></td></tr>
-		<tr><td class='n'>?</td><td><?php echo __("Display this help dialog") ?></td></tr>
-	</table>
-
-	</td><td valign='top'>
-
-	<h2><?php echo __("Multiple articles actions") ?></h2>
-
-	<table>
-		<tr><td class='n'>a a</td><td><?php echo __("Select all articles") ?></td></tr>
-		<tr><td class='n'>a u</td><td><?php echo __("Select unread articles") ?></td></tr>
-		<tr><td class='n'>a U</td><td><?php echo __("Select starred articles") ?></td></tr>
-		<tr><td class='n'>a p</td><td><?php echo __("Select published articles") ?></td></tr>
-		<tr><td class='n'>a i</td><td><?php echo __("Invert article selection") ?></td></tr>
-		<tr><td class='n'>a n</td><td><?php echo __("Deselect all articles") ?></td></tr>
-	</table>
-
-	<h2><?php echo __("Feed actions") ?></h2>
-
-	<table>
-		<tr><td class='n'>f r</td><td><?php echo __("Refresh active feed") ?></td></tr>
-		<tr><td class='n'>f a</td><td><?php echo __("(Un)hide read feeds") ?></td></tr>
-		<tr><td class='n'>f s</td><td><?php echo __("Subscribe to feed") ?></td></tr>
-		<tr><td class='n'>f e</td><td><?php echo __("Edit feed") ?></td></tr>
-		<tr><td class='n'>f q</td><td><?php echo __("Mark feed as read") ?></td></tr>
-		<tr><td class='n'>f x</td><td><?php echo __("Reverse headlines order") ?></td></tr>
-		<tr><td class='n'>Q</td><td><?php echo __("Mark all feeds as read") ?></td></tr>
-		<tr><td class='n'>x</td><td><?php echo __("If viewing category, (un)collapse it") ?></td></tr>
-	</table>
-
-	<h2><?php echo __("Go to...") ?></h2>
-
-	<table>
-		<tr><td class='n'>g a</td><td><?php echo __("All articles") ?></td></tr>
-		<tr><td class='n'>g f</td><td><?php echo __("Fresh articles") ?></td></tr>
-		<tr><td class='n'>g s</td><td><?php echo __("Starred articles") ?></td></tr>
-		<tr><td class='n'>g p</td><td><?php echo __("Published articles") ?></td></tr>
-		<tr><td class='n'>g t</td><td><?php echo __("Tag cloud") ?></td></tr>
-		<tr><td class='n'>g P</td><td><?php echo __("Preferences") ?></td></tr>
-	</table>
-
-
-	</td></tr></table>
-
-	<p><a target="_blank" href="http://tt-rss.org/wiki/InterfaceTips"><?php echo __("Other interface tips are available in the Tiny Tiny RSS wiki.") ?></a></p>
-
-	<p class="small"><?php echo __("Press any key to close this window.") ?></p>
diff --git a/help/prefs.php b/help/prefs.php
deleted file mode 100644
index 4cf3a1261..000000000
--- a/help/prefs.php
+++ /dev/null
@@ -1,41 +0,0 @@
-<h1><?php echo __("Keyboard Shortcuts") ?></h1>
-
-<table style='width : 100%'><tr><td style='width : 50%' valign='top'>
-
-	<h2><?php echo __("Go to...") ?></h2>
-
-	<table>
-		<tr><td class='n'>g 1</td><td><?php echo __("Preferences") ?></td></tr>
-		<tr><td class='n'>g 2</td><td><?php echo __("My Feeds") ?></td></tr>
-		<!-- <tr><td class='n'>g 3</td><td><?php echo __("Other Feeds") ?></td></tr> -->
-		<tr><td class='n'>g 3</td><td><?php echo __("Filters") ?></td></tr>
-		<tr><td class='n'>g 4</td><td><?php echo __("Labels") ?></td></tr>
-		<tr><td class='n'>g 5</td><td><?php echo __("Users") ?></td></tr>
-		<tr><td class='n'>g x</td><td><?php echo __("Exit preferences") ?></td></tr>
-	</table>
-
-</td><td valign='top'>
-
-	<h2><?php echo __("Panel actions") ?></h2>
-
-	<table>
-		<tr><td class='n'>c s</td><td><?php echo __("Subscribe to feed") ?></td></tr>
-		<tr><td class='n'>c T</td><td><?php echo __("Top 25 feeds") ?></td></tr>
-		<tr><td class='n'>c c</td><td><?php echo __("Edit feed categories") ?></td></tr>
-		<tr><td class='n'>c f</td><td><?php echo __("Create filter") ?></td></tr>
-		<!-- <tr><td class='n'>c l</td><td><?php echo __("Create label") ?></td></tr> -->
-		<!-- <tr><td class='n'>c u</td><td><?php echo __("Create user") ?></td></tr> -->
-	</table>
-
-	<h2><?php echo __("Other actions") ?></h2>
-
-	<table>
-		<tr><td class='n'>/</td><td><?php echo __("Focus search (if present)") ?></td></tr>
-		<tr><td class='n'>?</td><td><?php echo __("Display this help dialog") ?></td></tr>
-	</table>
-
-</td></tr></table>
-
-<p class='insensitive'><span class='small'><?php echo __("<b>Note:</b> not all actions may be available, depending on Tiny Tiny RSS configuration and your access level.") ?></span></p>
-
-<p class="small"><?php echo __("Press any key to close this window.") ?></p>
diff --git a/include/functions.php b/include/functions.php
index 0d90e725e..5d277db96 100644
--- a/include/functions.php
+++ b/include/functions.php
@@ -1963,14 +1963,70 @@
 		$params["num_feeds"] = (int) $num_feeds;
 
 		$params["collapsed_feedlist"] = (int) get_pref($link, "_COLLAPSED_FEEDLIST");
-		$params["hotkeys"] = get_hotkeys($link);
+		$params["hotkeys"] = get_hotkeys_map($link);
 
 		$params["csrf_token"] = $_SESSION["csrf_token"];
 
 		return $params;
 	}
 
-	function get_hotkeys($link) {
+	function get_hotkeys_info($link) {
+		$hotkeys = array(
+			__("Navigation") => array(
+				"next_feed" => __("Open next feed"),
+				"prev_feed" => __("Open previous feed"),
+				"next_article" => __("Open next article"),
+				"prev_article" => __("Open previous article"),
+				"search_dialog" => __("Show search dialog")),
+			__("Article") => array(
+				"toggle_mark" => __("Toggle starred"),
+				"toggle_publ" => __("Toggle published"),
+				"toggle_unread" => __("Toggle unread"),
+				"edit_tags" => __("Edit tags"),
+				"dismiss_selected" => __("Dismiss selected"),
+				"dismiss_read" => __("Dismiss read"),
+				"open_in_new_window" => __("Open in new window"),
+				"catchup_below" => __("Mark below as read"),
+				"catchup_above" => __("Mark above as read"),
+				"article_scroll_down" => __("Scroll down"),
+				"article_scroll_up" => __("Scroll up"),
+				"select_article_cursor" => __("Select article under cursor"),
+				"email_article" => __("Email article")),
+			__("Article selection") => array(
+				"select_all" => __("Select all articles"),
+				"select_unread" => __("Select unread"),
+				"select_marked" => __("Select starred"),
+				"select_published" => __("Select published"),
+				"select_invert" => __("Invert selection"),
+				"select_none" => __("Deselect everything")),
+			__("Feed") => array(
+				"feed_refresh" => __("Refresh current feed"),
+				"feed_unhide_read" => __("Un/hide read feeds"),
+				"feed_subscribe" => __("Subscribe to feed"),
+				"feed_edit" => __("Edit feed"),
+				"feed_catchup" => __("Mark as read"),
+				"feed_reverse" => __("Reverse headlines"),
+				"feed_debug_update" => __(""),
+				"catchup_all" => __("Mark all feeds as read"),
+				"cat_toggle_collapse" => __("Un/collapse current category")),
+			__("Go to") => array(
+				"goto_all" => __("All articles"),
+				"goto_fresh" => __("Fresh"),
+				"goto_marked" => __("Starred"),
+				"goto_published" => __("Published"),
+				"goto_tagcloud" => __("Tag cloud"),
+				"goto_prefs" => __("Preferences")),
+			__("Other") => array(
+				"create_label" => __("Create label"),
+				"create_filter" => __("Create filter"),
+				"collapse_sidebar" => __("Un/collapse sidebar"),
+				"help_dialog" => __("Show help dialog"))
+			);
+
+		return $hotkeys;
+	}
+
+	function get_hotkeys_map($link) {
 		$hotkeys = array(
 //			"navigation" => array(
 				"k" => "next_feed",
diff --git a/index.php b/index.php
index b86cd0e66..4d4048906 100644
--- a/index.php
+++ b/index.php
@@ -135,8 +135,6 @@
 		alt="new_version_icon"/>
 </div>
 
-<div id="hotkey_help_overlay" style="display : none" onclick="Element.hide(this)"></div>
-
 <div id="notify" class="notify"><span id="notify_body">&nbsp;</span></div>
 <div id="cmdline" style="display : none"></div>
 <div id="auxDlg" style="display : none"></div>
diff --git a/js/functions.js b/js/functions.js
index 8776405be..ec533faae 100644
--- a/js/functions.js
+++ b/js/functions.js
@@ -1874,3 +1874,25 @@ function get_timestamp() {
 	var date = new Date();
 	return Math.round(date.getTime() / 1000);
 }
+
+function helpDialog(topic) {
+	try {
+		var query = "backend.php?op=backend&method=help&topic=" + param_escape(topic);
+
+		if (dijit.byId("helpDlg"))
+			dijit.byId("helpDlg").destroyRecursive();
+
+		dialog = new dijit.Dialog({
+			id: "helpDlg",
+			title: __("Help"),
+			style: "width: 600px",
+			href: query,
+		});
+
+		dialog.show();
+
+	} catch (e) {
+		exception_error("helpDialog", e);
+	}
+}
+
diff --git a/js/prefs.js b/js/prefs.js
index 7ee88ab56..a193e1262 100644
--- a/js/prefs.js
+++ b/js/prefs.js
@@ -1009,9 +1009,9 @@ function validatePrefsReset() {
 
 }
 
-
 function pref_hotkey_handler(e) {
 	try {
+
 		if (e.target.nodeName == "INPUT" || e.target.nodeName == "TEXTAREA") return;
 
 		var keycode = false;
@@ -1034,151 +1034,65 @@ function pref_hotkey_handler(e) {
 		var keychar = String.fromCharCode(keycode);
 
 		if (keycode == 27) { // escape
-			if (Element.visible("hotkey_help_overlay")) {
-				Element.hide("hotkey_help_overlay");
-			}
 			hotkey_prefix = false;
-			closeInfoBox();
 		}
 
 		if (keycode == 16) return; // ignore lone shift
 		if (keycode == 17) return; // ignore lone ctrl
 
-		if ((keycode == 67 || keycode == 71) && !hotkey_prefix) {
-			hotkey_prefix = keycode;
+		if (!shift_key) keychar = keychar.toLowerCase();
+
+		var hotkeys = getInitParam("hotkeys");
+
+		if (!hotkey_prefix && hotkeys[0].indexOf(keychar) != -1) {
 
 			var date = new Date();
 			var ts = Math.round(date.getTime() / 1000);
 
+			hotkey_prefix = keychar;
 			hotkey_prefix_pressed = ts;
 
 			cmdline.innerHTML = keychar;
 			Element.show(cmdline);
 
-			console.log("KP: PREFIX=" + keycode + " CHAR=" + keychar);
-			return;
-		}
-
-		if (Element.visible("hotkey_help_overlay")) {
-			Element.hide("hotkey_help_overlay");
+			return true;
 		}
 
-		if (keycode == 13 || keycode == 27) {
-			seq = "";
-		} else {
-			seq = seq + "" + keycode;
-		}
-
-		/* Global hotkeys */
-
 		Element.hide(cmdline);
 
-		if (!hotkey_prefix) {
-
-			if ((keycode == 191 || keychar == '?') && shift_key) { // ?
-				showHelp();
-				return false;
-			}
-
-			if (keycode == 191 || keychar == '/') { // /
-				var search_boxes = new Array("label_search",
-					"feed_search", "filter_search", "user_search", "feed_browser_search");
-
-				for (var i = 0; i < search_boxes.length; i++) {
-					var elem = $(search_boxes[i]);
-					if (elem) {
-						$(search_boxes[i]).focus();
-						return false;
-					}
-				}
-			}
-		}
-
-		/* Prefix c */
-
-		if (hotkey_prefix == 67) { // c
-			hotkey_prefix = false;
-
-			if (keycode == 70) { // f
-				quickAddFilter();
-				return false;
-			}
-
-			if (keycode == 83) { // s
-				quickAddFeed();
-				return false;
-			}
-
-			if (keycode == 85) { // u
-				// no-op
-			}
-
-			if (keycode == 67) { // c
-				editFeedCats();
-				return false;
-			}
-
-			if (keycode == 84 && shift_key) { // T
-				feedBrowser();
-				return false;
-			}
-
-		}
-
-		/* Prefix g */
-
-		if (hotkey_prefix == 71) { // g
-
-			hotkey_prefix = false;
-
-			if (keycode == 49 && $("genConfigTab")) { // 1
-				selectTab("genConfig");
-				return false;
-			}
-
-			if (keycode == 50 && $("feedConfigTab")) { // 2
-				selectTab("feedConfig");
-				return false;
-			}
-
-			if (keycode == 51 && $("filterConfigTab")) { // 4
-				selectTab("filterConfig");
-				return false;
-			}
-
-			if (keycode == 52 && $("labelConfigTab")) { // 5
-				selectTab("labelConfig");
-				return false;
-			}
-
-			if (keycode == 53 && $("userConfigTab")) { // 6
-				selectTab("userConfig");
-				return false;
-			}
-
-			if (keycode == 88) { // x
-				return gotoMain();
-			}
+		var hotkey = keychar.search(/[a-zA-Z0-9]/) != -1 ? keychar : "(" + keycode + ")";
+		hotkey = hotkey_prefix ? hotkey_prefix + " " + hotkey : hotkey;
+		hotkey_prefix = false;
 
-		}
+		var hotkey_action = false;
+		var hotkeys = getInitParam("hotkeys");
 
-		if ($("piggie")) {
-			if (seq.match("8073717369")) {
-				seq = "";
-				piggie(true);
-			} else {
-				piggie(false);
+		for (sequence in hotkeys[1]) {
+			if (sequence == hotkey) {
+				hotkey_action = hotkeys[1][sequence];
+				break;
 			}
 		}
 
-		if (hotkey_prefix) {
-			console.log("KP: PREFIX=" + hotkey_prefix + " CODE=" + keycode + " CHAR=" + keychar);
-		} else {
-			console.log("KP: CODE=" + keycode + " CHAR=" + keychar);
+		switch (hotkey_action) {
+		case "feed_subscribe":
+			quickAddFeed();
+			return true;
+		case "create_label":
+			addLabel();
+			return true;
+		case "create_filter":
+			quickAddFilter();
+			return true;
+		case "help_dialog":
+			//helpDialog("prefs");
+			return false;
+		default:
+			console.log("unhandled action: " + hotkey_action + "; hotkey: " + hotkey);
 		}
 
 	} catch (e) {
-		exception_error("pref_hotkey_handler", e);
+		exception_error("hotkey_handler", e);
 	}
 }
 
@@ -1855,20 +1769,6 @@ function insertSSLserial(value) {
 	}
 }
 
-function showHelp() {
-	try {
-		new Ajax.Request("backend.php", {
-			parameters: "?op=backend&method=help&topic=prefs",
-			onComplete: function(transport) {
-				$("hotkey_help_overlay").innerHTML = transport.responseText;
-				Effect.Appear("hotkey_help_overlay", {duration : 0.3});
-			} });
-
-	} catch (e) {
-		exception_error("showHelp", e);
-	}
-}
-
 function gotoExportOpml(filename, settings) {
 	tmp = settings ? 1 : 0;
 	document.location.href = "backend.php?op=opml&method=export&filename=" + filename + "&settings=" + tmp;
diff --git a/js/tt-rss.js b/js/tt-rss.js
index 2698f152f..fb80f4899 100644
--- a/js/tt-rss.js
+++ b/js/tt-rss.js
@@ -453,12 +453,7 @@ function quickMenuGo(opid) {
 		}
 
 		if (opid == "qmcHKhelp") {
-			new Ajax.Request("backend.php", {
-				parameters: "?op=backend&method=help&topic=main",
-				onComplete: function(transport) {
-					$("hotkey_help_overlay").innerHTML = transport.responseText;
-					Effect.Appear("hotkey_help_overlay", {duration : 0.3});
-				} });
+			helpDialog("main");
 		}
 
 	} catch (e) {
@@ -638,9 +633,6 @@ function hotkey_handler(e) {
 		var keychar = String.fromCharCode(keycode);
 
 		if (keycode == 27) { // escape
-			if (Element.visible("hotkey_help_overlay")) {
-				Element.hide("hotkey_help_overlay");
-			}
 			hotkey_prefix = false;
 		}
 
@@ -844,12 +836,7 @@ function hotkey_handler(e) {
 			collapse_feedlist();
 			return true;
 		case "help_dialog":
-			new Ajax.Request("backend.php", {
-				parameters: "?op=backend&method=help&topic=main",
-				onComplete: function(transport) {
-					$("hotkey_help_overlay").innerHTML = transport.responseText;
-					Effect.Appear("hotkey_help_overlay", {duration : 0.3});
-				} });
+			helpDialog("main");
 			return false;
 		default:
 			console.log("unhandled action: " + hotkey_action + "; hotkey: " + hotkey);
diff --git a/prefs.php b/prefs.php
index e20ac9baa..575fbbf0f 100644
--- a/prefs.php
+++ b/prefs.php
@@ -90,12 +90,10 @@
 	</div>
 </div>
 
-<div id="hotkey_help_overlay" style="display : none" onclick="Element.hide(this)"></div>
-
 <img id="piggie" src="images/piggie.png" style="display : none" alt="piggie"/>
 
 <div id="header" dojoType="dijit.layout.ContentPane" region="top">
-	<a href='#' onclick="showHelp()"><?php echo __("Keyboard shortcuts") ?></a> |
+	<!-- <a href='#' onclick="showHelp()"><?php echo __("Keyboard shortcuts") ?></a> | -->
 	<a href="#" onclick="gotoMain()"><?php echo __('Exit preferences') ?></a>
 </div>
 
diff --git a/tt-rss.css b/tt-rss.css
index 9bcaafab6..ee52454cf 100644
--- a/tt-rss.css
+++ b/tt-rss.css
@@ -932,74 +932,6 @@ img.hlScorePic {
 	height : 16px;
 }
 
-div#hotkey_help_overlay {
-	position : absolute;
-	left : 30px;
-	right : 30px;
-	top : 30px;
-	z-index : 999;
-	color : white;
-	font-size : 15px;
-	background : black;
-	border-radius : 30px;
-	padding : 10px;
-}
-
-div#hotkey_help_overlay h1 {
-	text-align : center;
-}
-
-div#hotkey_help_overlay ul {
-	list-style-type : none;
-	margin : 0px;
-}
-
-div#hotkey_help_overlay a {
-	color : #88b0f0;
-}
-
-div#hotkey_help_overlay a:hover {
-	color : white;
-}
-
-div#hotkey_help_overlay li {
-	margin : 0px;
-}
-
-div#hotkey_help_overlay p {
-	text-align : center;
-}
-
-div#hotkey_help_overlay td.n {
-	text-align : right;
-	font-weight : bold;
-	width : 6em;
-	color : #a0ffa0;
-	padding-right : 5px;
-}
-
-div#hotkey_help_overlay td {
-	vertical-align : top;
-}
-
-div#hotkey_help_overlay h1 {
-	margin : 0px;
-}
-
-div#hotkey_help_overlay h2 {
-	font-size : 16px;
-	border-width : 0px;
-	margin : 0.3em 0px 0.3em 0px;
-	text-align : center;
-	color : #88b0f0;
-}
-
-div#hotkey_help_overlay table.hho td.top,
-div#hotkey_help_overlay table.hho td.bottom {
-	text-align : center;
-	font-size : 11px;
-}
-
 div.dlgSec {
 	font-size : 12px;
 	color : gray;
@@ -1411,3 +1343,25 @@ ul#filterDlg_Matches li div.dijitCheckBox, ul#filterDlg_Actions li div.dijitChec
 table.prefPluginsList td label, table.prefUserList td {
 	cursor : pointer;
 }
+
+ul.helpKbList {
+	max-height : 300px;
+	overflow : auto;
+	list-style-type : none;
+	border : 1px solid #c0c0c0;
+	background-color : #ecf4ff;
+	margin : 0px 0px 5px 0px;
+	padding : 5px;
+}
+
+ul.helpKbList span.hksequence {
+	width : 6em;
+	margin-left : 20px;
+	color : #88b0f0;
+	font-weight : bold;
+	display : inline-block;
+}
+
+ul.helpKbList h2 {
+	margin-top : 0px;
+}