merging in changes from rob/iu-rf and fixing conflicts

34 files changed, 720 insertions, 410 deletions

diff --git a/debug_toolbar/management/__init__.py b/debug_toolbar/management/__init__.py
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/debug_toolbar/management/__init__.py
diff --git a/debug_toolbar/management/commands/__init__.py b/debug_toolbar/management/commands/__init__.py
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/debug_toolbar/management/commands/__init__.py
diff --git a/debug_toolbar/management/commands/debugsqlshell.py b/debug_toolbar/management/commands/debugsqlshell.py
new file mode 100644
index 0000000..84b4a2f
--- /dev/null
+++ b/debug_toolbar/management/commands/debugsqlshell.py
@@ -0,0 +1,84 @@
+import os
+from optparse import make_option
+
+from django.core.management.base import NoArgsCommand
+from django.db.backends import util
+
+# Optional sqlparse to make the SQL look pretty...
+# http://code.google.com/p/python-sqlparse/
+try:
+    import sqlparse
+except ImportError:
+    sqlparse = None
+
+class PrintQueryWrapper(util.CursorDebugWrapper):
+    def execute(self, sql, params=()):
+        try:
+            return self.cursor.execute(sql, params)
+        finally:
+            raw_sql = self.db.ops.last_executed_query(self.cursor, sql, params)
+            if sqlparse:
+                print sqlparse.format(raw_sql, reindent=True)
+            else:
+                print raw_sql
+            print
+
+util.CursorDebugWrapper = PrintQueryWrapper
+
+# The rest is copy/paste from django/core/management/commands/shell.py
+
+class Command(NoArgsCommand):
+    option_list = NoArgsCommand.option_list + (
+        make_option('--plain', action='store_true', dest='plain',
+            help='Tells Django to use plain Python, not IPython.'),
+    )
+    help = "Runs a Python interactive interpreter. Tries to use IPython, if it's available."
+
+    requires_model_validation = False
+
+    def handle_noargs(self, **options):
+        # XXX: (Temporary) workaround for ticket #1796: force early loading of all
+        # models from installed apps.
+        from django.db.models.loading import get_models
+        loaded_models = get_models()
+
+        use_plain = options.get('plain', False)
+
+        try:
+            if use_plain:
+                # Don't bother loading IPython, because the user wants plain Python.
+                raise ImportError
+            import IPython
+            # Explicitly pass an empty list as arguments, because otherwise IPython
+            # would use sys.argv from this script.
+            shell = IPython.Shell.IPShell(argv=[])
+            shell.mainloop()
+        except ImportError:
+            import code
+            # Set up a dictionary to serve as the environment for the shell, so
+            # that tab completion works on objects that are imported at runtime.
+            # See ticket 5082.
+            imported_objects = {}
+            try: # Try activating rlcompleter, because it's handy.
+                import readline
+            except ImportError:
+                pass
+            else:
+                # We don't have to wrap the following import in a 'try', because
+                # we already know 'readline' was imported successfully.
+                import rlcompleter
+                readline.set_completer(rlcompleter.Completer(imported_objects).complete)
+                readline.parse_and_bind("tab:complete")
+
+            # We want to honor both $PYTHONSTARTUP and .pythonrc.py, so follow system
+            # conventions and get $PYTHONSTARTUP first then import user.
+            if not use_plain:
+                pythonrc = os.environ.get("PYTHONSTARTUP")
+                if pythonrc and os.path.isfile(pythonrc):
+                    try:
+                        execfile(pythonrc)
+                    except NameError:
+                        pass
+                # This will import .pythonrc.py as a side-effect
+                import user
+            code.interact(local=imported_objects)
diff --git a/debug_toolbar/media/debug_toolbar/back.png b/debug_toolbar/media/debug_toolbar/back.png
new file mode 100644
index 0000000..fa6a36b
--- /dev/null
+++ b/debug_toolbar/media/debug_toolbar/back.png
diff --git a/debug_toolbar/media/debug_toolbar/back_hover.png b/debug_toolbar/media/debug_toolbar/back_hover.png
new file mode 100644
index 0000000..774f97c
--- /dev/null
+++ b/debug_toolbar/media/debug_toolbar/back_hover.png
diff --git a/debug_toolbar/media/debug_toolbar/close.png b/debug_toolbar/media/debug_toolbar/close.png
new file mode 100644
index 0000000..c22e2e8
--- /dev/null
+++ b/debug_toolbar/media/debug_toolbar/close.png
diff --git a/debug_toolbar/media/debug_toolbar/close_hover.png b/debug_toolbar/media/debug_toolbar/close_hover.png
new file mode 100644
index 0000000..f868e80
--- /dev/null
+++ b/debug_toolbar/media/debug_toolbar/close_hover.png
diff --git a/debug_toolbar/media/debug_toolbar/indicator.png b/debug_toolbar/media/debug_toolbar/indicator.png
new file mode 100644
index 0000000..a21fc6e
--- /dev/null
+++ b/debug_toolbar/media/debug_toolbar/indicator.png
diff --git a/debug_toolbar/media/debug_toolbar/panel_bg.png b/debug_toolbar/media/debug_toolbar/panel_bg.png
new file mode 100644
index 0000000..73add17
--- /dev/null
+++ b/debug_toolbar/media/debug_toolbar/panel_bg.png
diff --git a/debug_toolbar/media/debug_toolbar/toolbar.css b/debug_toolbar/media/debug_toolbar/toolbar.css
index 9ef6dc3..6156fb7 100644
--- a/debug_toolbar/media/debug_toolbar/toolbar.css
+++ b/debug_toolbar/media/debug_toolbar/toolbar.css
@@ -1,195 +1,317 @@
+/* Debug Toolbar CSS Reset, adapted from YUI CSS Reset */
+#djDebug {color:#000;background:#FFF;}
+#djDebug div,#djDebug dl,#djDebug dt,#djDebug dd,#djDebug ul,#djDebug ol,#djDebug li,#djDebug h1,#djDebug h2,#djDebug h3,#djDebug h4,#djDebug h5,#djDebug h6,#djDebug pre,#djDebug code,#djDebug form,#djDebug fieldset,#djDebug legend,#djDebug input,#djDebug button,#djDebug textarea,#djDebug p,#djDebug blockquote,#djDebug th,#djDebug td{margin:0;padding:0;}
+#djDebug table{border-collapse:collapse;border-spacing:0;}
+#djDebug fieldset,#djDebug img{border:0;}
+#djDebug address,#djDebug caption,#djDebug cite,#djDebug code,#djDebug dfn,#djDebug em,#djDebug strong,#djDebug th,#djDebug var,#djDebug optgroup{font-style:inherit;font-weight:inherit;}
+#djDebug del,#djDebug ins{text-decoration:none;}
+#djDebug li{list-style:none;}
+#djDebug caption,#djDebug th{text-align:left;}
+#djDebug h1,#djDebug h2,#djDebug h3,#djDebug h4,#djDebug h5,#djDebug h6{font-size:100%;font-weight:normal;}
+#djDebug q:before,#djDebug q:after{content:'';}
+#djDebug abbr,#djDebug acronym{border:0;font-variant:normal;}
+#djDebug sup{vertical-align:baseline;}
+#djDebug sub{vertical-align:baseline;}
+#djDebug legend{color:#000;}
+#djDebug input,#djDebug button,#djDebug textarea,#djDebug select,#djDebug optgroup,#djDebug option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}
+#djDebug input,#djDebug button,#djDebug textarea,#djDebug select{*font-size:100%;}
 #djDebug * {
-    color: #000;
-    float: none;
-    margin: 0;
-    padding: 0;
-    position: static;
-    text-align: left;
-}
-#djDebug a {
-    color: #f7c757;
-}
-#djDebug a:hover {
-    color: #aaa;
+	color: #000;
+	float: none;
+	margin: 0;
+	padding: 0;
+	position: static;
+	text-align: left;
+	font-family:sans-serif;
 }
 
 #djDebugToolbar {
-    background: #326342;
-    height: 30px;
-    z-index: 100000000;
-    border-bottom: 2px solid #234f32;
-    position:absolute;
-    top:0;
-    left:0;
-    right:0;
+	background: #111;
+	width: 200px;
+	z-index: 100000000;
+	position:absolute;
+	top:0;
+	bottom:0;
+	right:0;
+	opacity:0.9;
+}
+
+#djDebugToolbar small {
+	color:#999;
 }
 
 #djDebugToolbarHandle {
-    background: #326342;
-    height: 30px;
-    z-index: 100000000;
-    border-bottom: 2px solid #234f32;
-    position:absolute;
-    top:0;
-    left:0;
-    right:0;
-    width: 16px;
+	position:absolute;
+	background: #111;
+	top:0;
+	right:0;
+	height: 25px;
+	width: 25px;
+	z-index: 100000000;
 }
 
 #djDebugToolbarHandle ul li {
-    padding: 3px 0px 0px 3px;
+	list-style-type:none;
+	padding: 0;
 }
 
 #djDebugToolbarHandle ul li a {
-    font-size: 16px;
-    font-weight: bold;
+	display: block;
+	width: 100%;
+	font-size: 16px;
+	line-height: 25px;
+	font-weight: bold;
+	text-decoration: none;
+	color: #daf7ff;
+	text-align: center;
+}
+
+#djDebugToolbarHandle ul li a:hover {
+	color: #111;
+	background-color: #9fbb54;
 }
 
 #djDebugToolbar ul {
-    margin: 0;
-    padding: 0;
-    list-style: none;
+	margin: 0;
+	padding: 0;
+	list-style: none;
 }
 
 #djDebugToolbar li {
-    border-left: 1px solid #487858;
-    color: #fff;
-    display: inline;
-    font-size: 11px;
-    font-weight: bold;
-    float: none;
-    height: 20px;
-    margin: 0;
-    padding: 0;
-    line-height: 30px;
-    padding: 8px 9px 9px;
-    position: relative;
-    width: auto;
+	border-bottom: 1px solid #222;
+	color: #fff;
+	display: block;
+	font-weight: bold;
+	float: none;
+	margin: 0;
+	padding: 0;
+	position: relative;
+	width: auto;
+}
+
+#djDebugToolbar li>a,
+#djDebugToolbar li>div.contentless  {
+	font-weight: normal;
+	font-style: normal;
+	font-variant: small-caps;
+	text-decoration: none;
+	display: block;
+	font-size: 16px;
+	padding: 10px 10px 5px 25px;
+	color: #fff;
+}
+
+#djDebugToolbar li a:hover {
+	color: #111;
+	background-color: #c6d6da;
+	border-right: 10px solid #fff;
 }
 
-#djDebugToolbar li:hover {
-    background: #487858;
+#djDebugToolbar li.active {
+	background-image: url(indicator.png);
+	background-repeat: no-repeat;
+	background-position: left center;
 }
 
-#djDebugToolbar li:hover a {
-    color: #fff;
+#djDebugToolbar li.active a:hover {
+	background-color: #111;
+	background-image: inherit;
+	background-position: inherit;
+	background-repeat: inherit;
+	color: #b36a60;
+	border: none;
 }
 
-#djDebugToolbar li:last-child {
-    border-right: 1px solid #487858;
+#djDebugToolbar li small {
+	font-size: 12px;
+	color: #999;
+	font-style: italic;
+	text-decoration: none;
+	font-variant: normal;
 }
 
 #djDebugToolbar #djDebugButton {
-    color: #92ef3f;
+	color: #92ef3f;
 }
 
 #djDebug pre {
-    background-color: #ffffff;
+	background-color: #ffffff;
 }
 
 #djDebug tr.djDebugOdd pre {
-    background-color: #eeeeee;
+	background-color: #eeeeee;
 }
 
 #djDebug .panelContent {
-    background: #2a5738;
-    border-bottom: 2px solid #234f32;
-    border-top: 2px solid #487858;
-    display: none;
-    position: absolute;
-    margin: 0;
-    padding: 10px;
-    top: 32px;
-    width: auto;
-    left: 0px;
-    right: 0px;
-    bottom: 5px;
-    color: black;
-    z-index: 1000000;
-    overflow: auto;
-}
-
-#djDebug .panelContent p a, #djDebug .panelContent dl a {
-    color: #40684c;
-}
-#djDebug .panelContent p a:hover, #djDebug .panelContent dl a:hover {
-    color: #92EF3F;
+	
+	display: none;
+	position: absolute;
+	margin: 0;
+	padding: 10px 20px;
+	top: 2px;
+	right: 200px;
+	bottom: 2px;
+	left: 2px;
+	color: #111;
+	z-index: 1000000;
+	/*overflow: auto;*/
+	border-left: 10px solid #c6d6da;
+	border-top: 10px solid #c6d6da;
+	border-bottom: 10px solid #c6d6da;
+	opacity: 1.0;
+	background: transparent url(panel_bg.png) repeat left top;
+}
+
+#djDebug .panelContent .panelScrollWrap {
+	overflow: auto;
+	height: 90%;
+	width: 100%;
+}
+
+#djDebug .panelContent .panelScrollContent {
+	width: auto;
+	margin-right: 10px;
+}
+
+#djDebug .panelContent .boxed {
+	background-color: #fff;
+	padding: 5px;
+	border: 1px solid #c6d6da;
+}
+
+#djDebug .panelContent p a, #djDebug .panelContent dt a {
+	color: #000;
+	padding: 2px 4px;
+}
+#djDebug .panelContent p a:hover, #djDebug .panelContent dt a:hover {
+	background-color: #ffc;
+}
+
+#djDebug .panelContent p a, #djDebug .panelContent dd a {
+	color: #000;
+	background-color: #eee;
+	padding: 2px 4px;
+}
+#djDebug .panelContent p a:hover, #djDebug .panelContent dd a:hover {
+	color: #111;
+	background-color: #ffc;
 }
 
 #djDebug .panelContent h3 {
-    border-bottom: 1px solid #40684c;
-    color: #92ef3f;
-    padding: 0 0 5px;
+	font-size: 24px;
+	font-variant: small-caps;
+}
+
+#djDebug .panelContent h4 {
+	font-weight: normal;
+	margin-top: 0.5em;
+	font-size: 20px;
+	line-height: 24px;
+}
+
+#djDebug .panelContent code {
+	font-family: Consolas, Monaco, "Bitstream Vera Sans Mono", "Lucida Console", monospace;
+	font-size: inherit;
 }
 
 #djDebug .panelContent p {
-    padding: 0 5px;
+	padding: 0 5px;
 }
 
 #djDebug .panelContent p, #djDebug .panelContent table, #djDebug .panelContent ol, #djDebug .panelContent ul, #djDebug .panelContent dl {
-    margin: 5px 0 15px;
-    background-color: #fff;
+	margin: 5px 0 15px;
+	background-color: #fff;
 }
 
 #djDebug .panelContent table {
-    width: 100%;
-    clear: both;
+	/*width: 90%;*/
+	clear: both;
+	border: 0;
+	padding: 0;
+	margin: 0;
+	border-collapse: collapse;
+	border-spacing: 0;
 }
 
 #djDebug .panelContent table a {
-    color: #40684C;
+	color: #000;
+	padding: 2px 4px;
+}
+#djDebug .panelContent table a:hover {
+	background-color: #ffc;
 }
 
 #djDebug .panelContent table th {
-    background-color: #9dcc49;
-    font-weight: bold;
-    color: #000;
-    font-size: 11px;
-    padding: 3px 7px 3px;
-    text-align: left;
-    cursor: pointer;
-    border-right: 1px solid #b9d977;
+	background-color: #333;
+	font-weight: bold;
+	color: #fff;
+	padding: 3px 7px 3px;
+	text-align: left;
+	cursor: pointer;
 }
 #djDebug .panelContent table td {
-    padding: 5px 10px;
-    font-size: 11px;
-    background: #fff;
-    color: #000;
-    vertical-align: top;
+	padding: 5px 10px;
+	font-size: 14px;
+	background: #fff;
+	color: #000;
+	vertical-align: top;
+	border: 0;
 }
 #djDebug .panelContent table tr.djDebugOdd td {
   background: #eee;
 }
 
 #djDebug .panelContent .close {
-    float: right;
-    font-weight: bold;
+	text-indent: -9999999px;
+	display: block;
+	position: absolute;
+	top: 0;
+	right: 10px;
+	height: 40px;
+	width: 40px;
+	background: url(close.png) no-repeat center center;
+}
+
+#djDebug .panelContent .close:hover {
+	background-image: url(close_hover.png);
+}
+
+#djDebug .panelContent .close.back {
+	background-image: url(back.png);
+}
+
+#djDebug .panelContent .close.back:hover  {
+	background-image: url(back_hover.png);
 }
 
 #djDebug .panelContent dt, #djDebug .panelContent dd {
-    display: block;
+	display: block;
+}
+
+#djDebug .panelContent dt {
+	margin-top: 0.75em;
 }
 
 #djDebug .panelContent dd {
-    margin-left: 10px;
+	margin-left: 10px;
 }
 
 #djDebug .highlight  { color: #000; }
 #djDebug .highlight .err { color: #000; } /* Error */
 #djDebug .highlight .g { color: #000; } /* Generic */
-#djDebug .highlight .k { color: #40684C; font-weight: bold } /* Keyword */
+#djDebug .highlight .k { color: #000; font-weight: bold } /* Keyword */
 #djDebug .highlight .o { color: #000; } /* Operator */
 #djDebug .highlight .n { color: #000; } /* Name */
-#djDebug .highlight .mi { color: #40684C; font-weight: bold } /* Literal.Number.Integer */
+#djDebug .highlight .mi { color: #000; font-weight: bold } /* Literal.Number.Integer */
 #djDebug .highlight .l { color: #000; } /* Literal */
 #djDebug .highlight .x { color: #000; } /* Other */
 #djDebug .highlight .p { color: #000; } /* Punctuation */
-#djDebug .highlight .m { color: #40684C; font-weight: bold } /* Literal.Number */
-#djDebug .highlight .s { color: #0086d2 } /* Literal.String */
+#djDebug .highlight .m { color: #000; font-weight: bold } /* Literal.Number */
+#djDebug .highlight .s { color: #333 } /* Literal.String */
 #djDebug .highlight .w { color: #888888 } /* Text.Whitespace */
-#djDebug .highlight .il { color: #40684C; font-weight: bold } /* Literal.Number.Integer.Long */
-#djDebug .highlight .na { color: #7D9029 } /* Name.Attribute */
-#djDebug .highlight .nt { color: #008000; font-weight: bold } /* Name.Tag */
-#djDebug .highlight .nv { color: #19177C } /* Name.Variable */
-#djDebug .highlight .s2 { color: #BA2121 } /* Literal.String.Double */
-#djDebug .highlight .cp { color: #BC7A00 } /* Comment.Preproc */
+#djDebug .highlight .il { color: #000; font-weight: bold } /* Literal.Number.Integer.Long */
+#djDebug .highlight .na { color: #333 } /* Name.Attribute */
+#djDebug .highlight .nt { color: #000; font-weight: bold } /* Name.Tag */
+#djDebug .highlight .nv { color: #333 } /* Name.Variable */
+#djDebug .highlight .s2 { color: #333 } /* Literal.String.Double */
+#djDebug .highlight .cp { color: #333 } /* Comment.Preproc */
diff --git a/debug_toolbar/media/debug_toolbar/toolbar.js b/debug_toolbar/media/debug_toolbar/toolbar.js
index 40e1a58..355a66f 100644
--- a/debug_toolbar/media/debug_toolbar/toolbar.js
+++ b/debug_toolbar/media/debug_toolbar/toolbar.js
@@ -14,10 +14,13 @@ jQuery(function($j) {
 				current = $j('#djDebug #' + this.className);
 				if (current.is(':visible')) {
 					$j(document).trigger('close.djDebug');
+					$j(this).parent().removeClass("active");
 				} else {
 					$j('.panelContent').hide();
 					current.show();
 					$j.djDebug.open();
+					$j('#djDebugToolbar li').removeClass("active");
+					$j(this).parent().addClass("active");
 				}
 				return false;
 			});
@@ -77,6 +80,7 @@ jQuery(function($j) {
 		},
 		hide_toolbar: function(setCookie) {
 			$j('#djDebugToolbar').hide("fast");
+			$j('#djDebugToolbar li').removeClass("active");
 			$j(document).trigger('close.djDebug');
 			$j('#djDebugToolbarHandle').show();
 			if (setCookie) {
@@ -98,6 +102,7 @@ jQuery(function($j) {
 	$j(document).bind('close.djDebug', function() {
 		$j(document).unbind('keydown.djDebug');
 		$j('.panelContent').hide();
+		$j('#djDebugToolbar li').removeClass("active");
 	});
 });
 jQuery(function() {
diff --git a/debug_toolbar/media/debug_toolbar/toolbar.min.css b/debug_toolbar/media/debug_toolbar/toolbar.min.css
index c172fbd..21262aa 100644
--- a/debug_toolbar/media/debug_toolbar/toolbar.min.css
+++ b/debug_toolbar/media/debug_toolbar/toolbar.min.css
@@ -1 +1 @@
-#djDebug *{color:#000;float:none;margin:0;padding:0;position:static;text-align:left;}#djDebug a{color:#f7c757;}#djDebug a:hover{color:#aaa;}#djDebugToolbar{background:#326342;height:30px;z-index:100000000;border-bottom:2px solid #234f32;position:absolute;top:0;left:0;right:0;}#djDebugToolbarHandle{background:#326342;height:30px;z-index:100000000;border-bottom:2px solid #234f32;position:absolute;top:0;left:0;right:0;width:16px;}#djDebugToolbarHandle ul li{padding:3px 0 0 3px;}#djDebugToolbarHandle ul li a{font-size:16px;font-weight:bold;}#djDebugToolbar ul{margin:0;padding:0;list-style:none;}#djDebugToolbar li{border-left:1px solid #487858;color:#fff;display:inline;font-size:11px;font-weight:bold;float:none;height:20px;margin:0;padding:0;line-height:30px;padding:8px 9px 9px;position:relative;width:auto;}#djDebugToolbar li:hover{background:#487858;}#djDebugToolbar li:hover a{color:#fff;}#djDebugToolbar li:last-child{border-right:1px solid #487858;}#djDebugToolbar #djDebugButton{color:#92ef3f;}#djDebug pre{background-color:#fff;}#djDebug tr.djDebugOdd pre{background-color:#eee;}#djDebug .panelContent{background:#2a5738;border-bottom:2px solid #234f32;border-top:2px solid #487858;display:none;position:absolute;margin:0;padding:10px;top:32px;width:auto;left:0;right:0;bottom:5px;color:black;z-index:1000000;overflow:auto;}#djDebug .panelContent p a,#djDebug .panelContent dl a{color:#40684c;}#djDebug .panelContent p a:hover,#djDebug .panelContent dl a:hover{color:#92EF3F;}#djDebug .panelContent h3{border-bottom:1px solid #40684c;color:#92ef3f;padding:0 0 5px;}#djDebug .panelContent p{padding:0 5px;}#djDebug .panelContent p,#djDebug .panelContent table,#djDebug .panelContent ol,#djDebug .panelContent ul,#djDebug .panelContent dl{margin:5px 0 15px;background-color:#fff;}#djDebug .panelContent table{width:100%;clear:both;}#djDebug .panelContent table a{color:#40684C;}#djDebug .panelContent table th{background-color:#9dcc49;font-weight:bold;color:#000;font-size:11px;padding:3px 7px 3px;text-align:left;cursor:pointer;border-right:1px solid #b9d977;}#djDebug .panelContent table td{padding:5px 10px;font-size:11px;background:#fff;color:#000;vertical-align:top;}#djDebug .panelContent table tr.djDebugOdd td{background:#eee;}#djDebug .panelContent .close{float:right;font-weight:bold;}#djDebug .panelContent dt,#djDebug .panelContent dd{display:block;}#djDebug .panelContent dd{margin-left:10px;}#djDebug .highlight{color:#000;}#djDebug .highlight .err{color:#000;}#djDebug .highlight .g{color:#000;}#djDebug .highlight .k{color:#40684C;font-weight:bold;}#djDebug .highlight .o{color:#000;}#djDebug .highlight .n{color:#000;}#djDebug .highlight .mi{color:#40684C;font-weight:bold;}#djDebug .highlight .l{color:#000;}#djDebug .highlight .x{color:#000;}#djDebug .highlight .p{color:#000;}#djDebug .highlight .m{color:#40684C;font-weight:bold;}#djDebug .highlight .s{color:#0086d2;}#djDebug .highlight .w{color:#888;}#djDebug .highlight .il{color:#40684C;font-weight:bold;}#djDebug .highlight .na{color:#7D9029;}#djDebug .highlight .nt{color:#008000;font-weight:bold;}#djDebug .highlight .nv{color:#19177C;}#djDebug .highlight .s2{color:#BA2121;}#djDebug .highlight .cp{color:#BC7A00;}
\ No newline at end of file
+#djDebug *{color:#000;float:none;margin:0;padding:0;position:static;text-align:left;}#djDebug a{color:#fff;}#djDebug a:hover{color:#900;}#djDebugToolbar{background:#111;width:150px;z-index:100000000;position:absolute;top:0;bottom:0;right:0;opacity:.9;}#djDebugToolbar small{color:#999;}#djDebugToolbarHandle{position:absolute;background:#111;top:0;bottom:0;right:0;z-index:100000000;}#djDebugToolbarHandle ul li{list-style-type:none;padding:3px;}#djDebugToolbarHandle ul li a{font-size:16px;font-weight:bold;}#djDebugToolbar ul{margin:0;padding:0;list-style:none;}#djDebugToolbar li{border-bottom:1px solid #222;color:#fff;display:block;font-size:11px;font-weight:bold;float:none;margin:0;padding:0;padding:8px;position:relative;width:auto;}#djDebugToolbar li:hover{background:#222;}#djDebugToolbar li:hover a{color:#fff;}#djDebugToolbar #djDebugButton{color:#92ef3f;}#djDebug pre{background-color:#fff;}#djDebug tr.djDebugOdd pre{background-color:#eee;}#djDebug .panelContent{background:#222;display:none;position:absolute;margin:0;padding:10px;top:0;width:auto;left:0;right:150px;bottom:0;color:#fff;z-index:1000000;overflow:auto;}#djDebug .panelContent p a,#djDebug .panelContent dl a{color:#000;}#djDebug .panelContent p a:hover,#djDebug .panelContent dl a:hover{color:#900;}#djDebug .panelContent h3{color:#fff;padding:0 0 5px;}#djDebug .panelContent p{padding:0 5px;}#djDebug .panelContent p,#djDebug .panelContent table,#djDebug .panelContent ol,#djDebug .panelContent ul,#djDebug .panelContent dl{margin:5px 0 15px;background-color:#fff;}#djDebug .panelContent table{width:100%;clear:both;}#djDebug .panelContent table a{color:#000;}#djDebug .panelContent table a:hover{color:#900;}#djDebug .panelContent table th{background-color:#333;font-weight:bold;color:#fff;font-size:11px;padding:3px 7px 3px;text-align:left;cursor:pointer;}#djDebug .panelContent table td{padding:5px 10px;font-size:11px;background:#fff;color:#000;vertical-align:top;}#djDebug .panelContent table tr.djDebugOdd td{background:#eee;}#djDebug .panelContent .close{float:right;font-weight:bold;}#djDebug .panelContent dt,#djDebug .panelContent dd{display:block;}#djDebug .panelContent dd{margin-left:10px;}#djDebug .highlight{color:#000;}#djDebug .highlight .err{color:#000;}#djDebug .highlight .g{color:#000;}#djDebug .highlight .k{color:#000;font-weight:bold;}#djDebug .highlight .o{color:#000;}#djDebug .highlight .n{color:#000;}#djDebug .highlight .mi{color:#000;font-weight:bold;}#djDebug .highlight .l{color:#000;}#djDebug .highlight .x{color:#000;}#djDebug .highlight .p{color:#000;}#djDebug .highlight .m{color:#000;font-weight:bold;}#djDebug .highlight .s{color:#333;}#djDebug .highlight .w{color:#888;}#djDebug .highlight .il{color:#000;font-weight:bold;}#djDebug .highlight .na{color:#333;}#djDebug .highlight .nt{color:#000;font-weight:bold;}#djDebug .highlight .nv{color:#333;}#djDebug .highlight .s2{color:#333;}#djDebug .highlight .cp{color:#333;}
\ No newline at end of file
diff --git a/debug_toolbar/panels/__init__.py b/debug_toolbar/panels/__init__.py
index 54b3318..cf65aa8 100644
--- a/debug_toolbar/panels/__init__.py
+++ b/debug_toolbar/panels/__init__.py
@@ -14,7 +14,16 @@ class DebugPanel(object):
     def dom_id(self):
         return 'djDebug%sPanel' % (self.name.replace(' ', ''))
 
+    def nav_title(self):
+        """Title showing in toolbar"""
+        raise NotImplementedError
+
+    def nav_subtitle(self):
+        """Subtitle showing until title in toolbar"""
+        return ''
+
     def title(self):
+        """Title showing in panel"""
         raise NotImplementedError
 
     def url(self):
diff --git a/debug_toolbar/panels/cache.py b/debug_toolbar/panels/cache.py
index 613d4d9..a05d3cc 100644
--- a/debug_toolbar/panels/cache.py
+++ b/debug_toolbar/panels/cache.py
@@ -87,9 +87,12 @@ class CacheDebugPanel(DebugPanel):
             self.cache = CacheStatTracker(cache.cache)
             cache.cache = self.cache
 
-    def title(self):
+    def nav_title(self):
         return 'Cache: %.2fms' % self.cache.total_time
 
+    def title(self):
+        return 'Cache Usage'
+
     def url(self):
         return ''
 
diff --git a/debug_toolbar/panels/headers.py b/debug_toolbar/panels/headers.py
index 213198a..06858ef 100644
--- a/debug_toolbar/panels/headers.py
+++ b/debug_toolbar/panels/headers.py
@@ -31,6 +31,9 @@ class HeaderDebugPanel(DebugPanel):
         'SERVER_SOFTWARE',
     )
 
+    def nav_title(self):
+        return 'HTTP Headers'
+
     def title(self):
         return 'HTTP Headers'
 
diff --git a/debug_toolbar/panels/logger.py b/debug_toolbar/panels/logger.py
index cb88148..7ba1686 100644
--- a/debug_toolbar/panels/logger.py
+++ b/debug_toolbar/panels/logger.py
@@ -51,8 +51,14 @@ class LoggingPanel(DebugPanel):
         handler.clear_records()
         return records
 
+    def nav_title(self):
+        return "Logging"
+
+    def nav_subtitle(self):
+        return "%s message%s" % (len(handler.get_records()), (len(handler.get_records()) == 1) and '' or 's')
+
     def title(self):
-        return "Logging (%s message%s)" % (len(handler.get_records()), (len(handler.get_records()) == 1) and '' or 's')
+        return 'Log Messages'
 
     def url(self):
         return ''
diff --git a/debug_toolbar/panels/request_vars.py b/debug_toolbar/panels/request_vars.py
index 88a7204..d0a8c19 100644
--- a/debug_toolbar/panels/request_vars.py
+++ b/debug_toolbar/panels/request_vars.py
@@ -8,9 +8,12 @@ class RequestVarsDebugPanel(DebugPanel):
     name = 'RequestVars'
     has_content = True
 
+    def nav_title(self):
+        return 'Request Vars'
+    
     def title(self):
         return 'Request Vars'
-
+    
     def url(self):
         return ''
 
diff --git a/debug_toolbar/panels/settings_vars.py b/debug_toolbar/panels/settings_vars.py
index e090718..0b7c315 100644
--- a/debug_toolbar/panels/settings_vars.py
+++ b/debug_toolbar/panels/settings_vars.py
@@ -10,9 +10,12 @@ class SettingsVarsDebugPanel(DebugPanel):
     name = 'SettingsVars'
     has_content = True
 
-    def title(self):
+    def nav_title(self):
         return 'Settings'
 
+    def title(self):
+        return 'Settings from <code>%s</code>' % settings.SETTINGS_MODULE
+
     def url(self):
         return ''
 
diff --git a/debug_toolbar/panels/signals.py b/debug_toolbar/panels/signals.py
index 7fe382e..a922694 100644
--- a/debug_toolbar/panels/signals.py
+++ b/debug_toolbar/panels/signals.py
@@ -34,6 +34,9 @@ class SignalDebugPanel(DebugPanel):
         'post_syncdb': post_syncdb,
     }
 
+    def nav_title(self):
+        return "Signals"
+
     def title(self):
         return "Signals"
 
diff --git a/debug_toolbar/panels/sql.py b/debug_toolbar/panels/sql.py
index d3ac7f3..f12939e 100644
--- a/debug_toolbar/panels/sql.py
+++ b/debug_toolbar/panels/sql.py
@@ -73,14 +73,20 @@ class SQLDebugPanel(DebugPanel):
         self._offset = len(connection.queries)
         self._sql_time = 0
 
-    def title(self):
+    def nav_title(self):
+        return 'SQL'
+
+    def nav_subtitle(self):
         self._sql_time = sum(map(lambda q: float(q['time']), connection.queries))
         num_queries = len(connection.queries) - self._offset
-        return '%d SQL %s (%.2fms)' % (
+        return "%d %s in %.2fms" % (
             num_queries,
             (num_queries == 1) and 'query' or 'queries',
             self._sql_time
         )
+    
+    def title(self):
+        return 'SQL Queries'
 
     def url(self):
         return ''
diff --git a/debug_toolbar/panels/template.py b/debug_toolbar/panels/template.py
index 7dc7b06..8c6a972 100644
--- a/debug_toolbar/panels/template.py
+++ b/debug_toolbar/panels/template.py
@@ -41,6 +41,9 @@ class TemplateDebugPanel(DebugPanel):
     def _storeTemplateInfo(self, sender, **kwargs):
         self.templates.append(kwargs)
 
+    def nav_title(self):
+        return 'Templates'
+
     def title(self):
         return 'Templates'
 
@@ -72,7 +75,14 @@ class TemplateDebugPanel(DebugPanel):
             info['template'] = t
             # Clean up context for better readability
             c = d.get('context', None)
-            info['context'] = '\n'.join([pformat(_d) for _d in c.dicts])
+            
+            d_list = []
+            for _d in c.dicts:
+                try:
+                    d_list.append(pformat(d))
+                except UnicodeEncodeError:
+                    pass
+            info['context'] = '\n'.join(d_list)
             template_context.append(info)
         context = {
             'templates': template_context,
diff --git a/debug_toolbar/panels/timer.py b/debug_toolbar/panels/timer.py
index 352bf55..4ff68db 100644
--- a/debug_toolbar/panels/timer.py
+++ b/debug_toolbar/panels/timer.py
@@ -31,13 +31,19 @@ class TimerDebugPanel(DebugPanel):
         if self.has_resource:
             self._end_rusage = resource.getrusage(resource.RUSAGE_SELF)
 
-    def title(self):
+    def nav_title(self):
+        return 'Time'
+
+    def nav_subtitle(self):
         if self.has_resource:
             utime = self._end_rusage.ru_utime - self._start_rusage.ru_utime
             stime = self._end_rusage.ru_stime - self._start_rusage.ru_stime
-            return 'Time: %0.2fms, %0.2fms CPU' % (self.total_time, (utime + stime) * 1000.0)
+            return 'CPU: %0.2fms (%0.2fms)' % ((utime + stime) * 1000.0, self.total_time)
         else:
-            return 'Time: %0.2fms' % (self.total_time)
+            return 'TOTAL: %0.2fms' % (self.total_time)
+
+    def title(self):
+        return 'Resource Usage'
 
     def url(self):
         return ''
diff --git a/debug_toolbar/panels/version.py b/debug_toolbar/panels/version.py
index 7ea6543..083b9cf 100644
--- a/debug_toolbar/panels/version.py
+++ b/debug_toolbar/panels/version.py
@@ -6,9 +6,12 @@ class VersionDebugPanel(DebugPanel):
     Panel that displays the Django version.
     """
     name = 'Version'
-    
-    def title(self):
-        return 'Version: %s' % (django.get_version())
+
+    def nav_title(self):
+        return 'Django Version'
+
+    def nav_subtitle(self):
+        return django.get_version()
 
     def url(self):
         return ''
diff --git a/debug_toolbar/templates/debug_toolbar/base.html b/debug_toolbar/templates/debug_toolbar/base.html
index 748001d..830bceb 100644
--- a/debug_toolbar/templates/debug_toolbar/base.html
+++ b/debug_toolbar/templates/debug_toolbar/base.html
@@ -8,28 +8,38 @@
 		document.write(unescape('%3Cscript src="' + jquery_url + '" type="text/javascript"%3E%3C/script%3E'));
 	}
 </script>
-<script type="text/javascript" src="{{ BASE_URL }}/__debug__/m/toolbar.min.js"></script>
+<script type="text/javascript" src="{{ BASE_URL }}/__debug__/m/jquery.cookie.js"></script>
+<script type="text/javascript" src="{{ BASE_URL }}/__debug__/m/toolbar.js"></script>
 <script type="text/javascript" charset="utf-8">
 	// Now that jQuery is done loading, put the '$' variable back to what it was...
 	var $ = _$;
 </script>
 <style type="text/css">
-	@import url({{ BASE_URL }}/__debug__/m/toolbar.min.css);
+	@import url({{ BASE_URL }}/__debug__/m/toolbar.css);
 </style>
 <div id="djDebug">
 	<div style="display: none;" id="djDebugToolbar">
 		<ul id="djDebugPanelList">
 			{% if panels %}
-			<li><a id="djHideToolBarButton" href="#" title="Hide Toolbar">&laquo; {% trans "Hide" %}</a></li>
+			<li><a id="djHideToolBarButton" href="#" title="Hide Toolbar">{% trans "Hide" %} &raquo;</a></li>
 			{% else %}
 			<li id="djDebugButton">DEBUG</li>
 			{% endif %}
 			{% for panel in panels %}
 				<li>
 					{% if panel.has_content %}
-						<a href="{{ panel.url|default:"#" }}" title="{{ panel.title }}" class="{{ panel.dom_id }}">{{ panel.title }}</a>
+						<a href="{{ panel.url|default:"#" }}" title="{{ panel.title }}" class="{{ panel.dom_id }}">
 					{% else %}
-						{{ panel.title }}
+					    <div class="contentless">
+					{% endif %}
+					{{ panel.nav_title }}
+					{% with panel.nav_subtitle as subtitle %}
+						{% if subtitle %}<br><small>{{ subtitle }}</small>{% endif %}
+					{% endwith %}
+					{% if panel.has_content %}
+						</a>
+					{% else %}
+					    </div>
 					{% endif %}
 				</li>
 			{% endfor %}
@@ -37,14 +47,19 @@
 	</div>
 	<div style="display: none;" id="djDebugToolbarHandle">
 		<ul id="djDebugPanelList">
-			<li><a title="Show Toolbar" id="djShowToolBarButton" href="#">&raquo;</a></li>
+			<li><a title="Show Toolbar" id="djShowToolBarButton" href="#">&laquo;</a></li>
 		</ul>
 	</div>
 	{% for panel in panels %}
 		{% if panel.has_content %}
 			<div id="{{ panel.dom_id }}" class="panelContent">
 				<a href="" class="close">{% trans "Close" %}</a>
-				{{ panel.content|safe }}
+			    <h3>{{ panel.title|safe }}</h3>
+			    <div class="panelScrollWrap">
+			        <div class="panelScrollContent">
+			            {{ panel.content|safe }}
+			        </div>
+			    </div>
 			</div>
 		{% endif %}
 	{% endfor %}
diff --git a/debug_toolbar/templates/debug_toolbar/panels/cache.html b/debug_toolbar/templates/debug_toolbar/panels/cache.html
index 3649f0c..5c5f13b 100644
--- a/debug_toolbar/templates/debug_toolbar/panels/cache.html
+++ b/debug_toolbar/templates/debug_toolbar/panels/cache.html
@@ -1,5 +1,4 @@
 {% load i18n %}
-<h3>Cache Usage</h3>
 <table>
 	<colgroup>
 		<col width="12%"/>
diff --git a/debug_toolbar/templates/debug_toolbar/panels/headers.html b/debug_toolbar/templates/debug_toolbar/panels/headers.html
index dec83bf..ef153bf 100644
--- a/debug_toolbar/templates/debug_toolbar/panels/headers.html
+++ b/debug_toolbar/templates/debug_toolbar/panels/headers.html
@@ -1,18 +1,19 @@
 {% load i18n %}
-<h3>HTTP Headers</h3>
-<table>
-	<thead>
-		<tr>
-			<th>{% trans "Key" %}</th>
-			<th>{% trans "Value" %}</th>
-		</tr>
-	</thead>
-	<tbody>
-		{% for key, value in headers.iteritems %}
-			<tr class="{% cycle 'djDebugOdd' 'djDebugEven' %}">
-				<td>{{ key|escape }}</td>
-				<td>{{ value|escape }}</td>
-			</tr>
-		{% endfor %}
-	</tbody>
-</table>
+<div class="boxed">
+    <table>
+    	<thead>
+    		<tr>
+    			<th>{% trans "Key" %}</th>
+    			<th>{% trans "Value" %}</th>
+    		</tr>
+    	</thead>
+    	<tbody>
+    		{% for key, value in headers.iteritems %}
+    			<tr class="{% cycle 'djDebugOdd' 'djDebugEven' %}">
+    				<td>{{ key|escape }}</td>
+    				<td>{{ value|escape }}</td>
+    			</tr>
+    		{% endfor %}
+    	</tbody>
+    </table>
+</div>
\ No newline at end of file
diff --git a/debug_toolbar/templates/debug_toolbar/panels/logger.html b/debug_toolbar/templates/debug_toolbar/panels/logger.html
index 441337c..080f955 100644
--- a/debug_toolbar/templates/debug_toolbar/panels/logger.html
+++ b/debug_toolbar/templates/debug_toolbar/panels/logger.html
@@ -1,27 +1,27 @@
 {% load i18n %}
-<h3>Log Messages</h3>
-{% if records %}
-	<table>
-		<thead>
-			<tr>
-				<th>{% trans "Level" %}</th>
-				<th>{% trans "Time" %}</th>
-				<th>{% trans "Message" %}</th>
-				<th>{% trans "Location" %}</th>
-			</tr>
-		</thead>
-		<tbody>
-			{% for record in records %}
-				<tr class="{% cycle 'djDebugOdd' 'djDebugEven' %}">
-					<td>{{ record.level }}</td>
-					<td>{{ record.time|date:"h:i:s m/d/Y" }}</td>
-					<td>{{ record.message }}</td>
-					<td>{{ record.file }}:{{ record.line }}</td>
-				</tr>
-			{% endfor %}
-		</tbody>
-	</table>
-{% else %}
-	<p>{% trans "No messages logged" %}.</p>
-{% endif %}
-
+<div class="boxed">
+    {% if records %}
+    	<table>
+    		<thead>
+    			<tr>
+    				<th>{% trans "Level" %}</th>
+    				<th>{% trans "Time" %}</th>
+    				<th>{% trans "Message" %}</th>
+    				<th>{% trans "Location" %}</th>
+    			</tr>
+    		</thead>
+    		<tbody>
+    			{% for record in records %}
+    				<tr class="{% cycle 'djDebugOdd' 'djDebugEven' %}">
+    					<td>{{ record.level }}</td>
+    					<td>{{ record.time|date:"h:i:s m/d/Y" }}</td>
+    					<td>{{ record.message }}</td>
+    					<td>{{ record.file }}:{{ record.line }}</td>
+    				</tr>
+    			{% endfor %}
+    		</tbody>
+    	</table>
+    {% else %}
+    	<p>{% trans "No messages logged" %}.</p>
+    {% endif %}
+</div>
\ No newline at end of file
diff --git a/debug_toolbar/templates/debug_toolbar/panels/request_vars.html b/debug_toolbar/templates/debug_toolbar/panels/request_vars.html
index 677714d..791a736 100644
--- a/debug_toolbar/templates/debug_toolbar/panels/request_vars.html
+++ b/debug_toolbar/templates/debug_toolbar/panels/request_vars.html
@@ -1,93 +1,104 @@
 {% load i18n %}
-<h3>COOKIES Variables</h3>
-{% if cookies %}
-	<table>
-		<colgroup>
-			<col style="width:20%"/>
-			<col/>
-		</colgroup>
-		<thead>
-			<tr>
-				<th>{% trans "Key" %}</th>
-				<th>{% trans "Value" %}</th>
-			</tr>
-		</thead>
-		<tbody>
-			{% for key, value in cookies %}
-				<tr class="{% cycle 'djDebugOdd' 'djDebugEven' %}">
-					<td>{{ key|escape }}</td>
-					<td>{{ value|escape }}</td>
-				</tr>
-			{% endfor %}
-		</tbody>
-	</table>
-{% else %}
-	<p>{% trans "None" %}</p>
-{% endif %}
-<h3>SESSION Variables</h3>
-{% if session %}
-	<table>
-		<colgroup>
-			<col style="width:20%"/>
-			<col/>
-		</colgroup>
-		<thead>
-			<tr>
-				<th>{% trans "Key" %}</th>
-				<th>{% trans "Value" %}</th>
-			</tr>
-		</thead>
-		<tbody>
-			{% for key, value in session %}
-				<tr class="{% cycle 'djDebugOdd' 'djDebugEven' %}">
-					<td>{{ key|escape }}</td>
-					<td>{{ value|escape }}</td>
-				</tr>
-			{% endfor %}
-		</tbody>
-	</table>
-{% else %}
-	<p>{% trans "None" %}</p>
-{% endif %}
-<h3>GET Variables</h3>
-{% if get %}
-	<table>
-		<thead>
-			<tr>
-				<th>{% trans "Key" %}</th>
-				<th>{% trans "Value" %}</th>
-			</tr>
-		</thead>
-		<tbody>
-			{% for key, value in get %}
-				<tr class="{% cycle 'djDebugOdd' 'djDebugEven' %}">
-					<td>{{ key|escape }}</td>
-					<td>{{ value|join:", "|escape }}</td>
-				</tr>
-			{% endfor %}
-		</tbody>
-	</table>
-{% else %}
-	<p>{% trans "None" %}</p>
-{% endif %}
-<h3>POST Variables</h3>
-{% if post %}
-	<table>
-		<thead>
-			<tr>
-				<th>{% trans "Key" %}</th>
-				<th>{% trans "Value" %}</th>
-			</tr>
-		</thead>
-		<tbody>
-			{% for key, value in post %}
-				<tr class="{% cycle 'row1' 'row2' %}">
-					<td>{{ key|escape }}</td>
-					<td>{{ value|join:", "|escape }}</td>
-				</tr>
-			{% endfor %}
-		</tbody>
-	</table>
-{% else %}
-	<p>{% trans "None" %}</p>
-{% endif %}
+<h4>COOKIES Variables</h4>
+<div class="boxed">
+    {% if cookies %}
+    	<table>
+    		<colgroup>
+    			<col style="width:20%"/>
+    			<col/>
+    		</colgroup>
+    		<thead>
+    			<tr>
+    				<th>{% trans "Key" %}</th>
+    				<th>{% trans "Value" %}</th>
+    			</tr>
+    		</thead>
+    		<tbody>
+    			{% for key, value in cookies %}
+    				<tr class="{% cycle 'djDebugOdd' 'djDebugEven' %}">
+    					<td>{{ key|escape }}</td>
+    					<td>{{ value|escape }}</td>
+    				</tr>
+    			{% endfor %}
+    		</tbody>
+    	</table>
+    {% else %}
+    	<p>{% trans "None" %}</p>
+    {% endif %}
+</div>
+
+<h4>SESSION Variables</h4>
+<div class="boxed">
+    {% if session %}
+    	<table>
+    		<colgroup>
+    			<col style="width:20%"/>
+    			<col/>
+    		</colgroup>
+    		<thead>
+    			<tr>
+    				<th>{% trans "Key" %}</th>
+    				<th>{% trans "Value" %}</th>
+    			</tr>
+    		</thead>
+    		<tbody>
+    			{% for key, value in session %}
+    				<tr class="{% cycle 'djDebugOdd' 'djDebugEven' %}">
+    					<td>{{ key|escape }}</td>
+    					<td>{{ value|escape }}</td>
+    				</tr>
+    			{% endfor %}
+    		</tbody>
+    	</table>
+    {% else %}
+    	<p>{% trans "None" %}</p>
+    {% endif %}
+</div>
+
+<h4>GET Variables</h4>
+<div class="boxed">
+    {% if get %}
+    	<table>
+    		<thead>
+    			<tr>
+    				<th>{% trans "Key" %}</th>
+    				<th>{% trans "Value" %}</th>
+    			</tr>
+    		</thead>
+    		<tbody>
+    			{% for key, value in get %}
+    				<tr class="{% cycle 'djDebugOdd' 'djDebugEven' %}">
+    					<td>{{ key|escape }}</td>
+    					<td>{{ value|join:", "|escape }}</td>
+    				</tr>
+    			{% endfor %}
+    		</tbody>
+    	</table>
+    {% else %}
+    	<p>{% trans "None" %}</p>
+    {% endif %}
+</div>
+
+<h4>POST Variables</h4>
+<div class="boxed">
+    {% if post %}
+    	<table>
+    		<thead>
+    			<tr>
+    				<th>{% trans "Key" %}</th>
+    				<th>{% trans "Value" %}</th>
+    			</tr>
+    		</thead>
+    		<tbody>
+    			{% for key, value in post %}
+    				<tr class="{% cycle 'row1' 'row2' %}">
+    					<td>{{ key|escape }}</td>
+    					<td>{{ value|join:", "|escape }}</td>
+    				</tr>
+    			{% endfor %}
+    		</tbody>
+    	</table>
+    {% else %}
+    	<p>{% trans "None" %}</p>
+    {% endif %}
+</div>
diff --git a/debug_toolbar/templates/debug_toolbar/panels/settings_vars.html b/debug_toolbar/templates/debug_toolbar/panels/settings_vars.html
index 92b65cd..1b9d452 100644
--- a/debug_toolbar/templates/debug_toolbar/panels/settings_vars.html
+++ b/debug_toolbar/templates/debug_toolbar/panels/settings_vars.html
@@ -1,18 +1,19 @@
 {% load i18n %}
-<h3>{% trans "Settings from" %} <code>{{ settings.SETTINGS_MODULE }}</code></h3>
-<table>
-	<thead>
-		<tr>
-			<th>{% trans "Setting" %}</th>
-			<th>{% trans "Value" %}</th>
-		</tr>
-	</thead>
-	<tbody>
-		{% for var in settings.items|dictsort:"0" %}
-			<tr class="{% cycle 'djDebugOdd' 'djDebugEven' %}">
-				<td>{{ var.0 }}</td>
-				<td><code>{{ var.1|pprint }}</code></td>
-			</tr>
-		{% endfor %}
-	</tbody>
-</table>
+<div class="boxed">
+    <table>
+    	<thead>
+    		<tr>
+    			<th>{% trans "Setting" %}</th>
+    			<th>{% trans "Value" %}</th>
+    		</tr>
+    	</thead>
+    	<tbody>
+    		{% for var in settings.items|dictsort:"0" %}
+    			<tr class="{% cycle 'djDebugOdd' 'djDebugEven' %}">
+    				<td>{{ var.0 }}</td>
+    				<td><code>{{ var.1|pprint }}</code></td>
+    			</tr>
+    		{% endfor %}
+    	</tbody>
+    </table>
+</div>
\ No newline at end of file
diff --git a/debug_toolbar/templates/debug_toolbar/panels/signals.html b/debug_toolbar/templates/debug_toolbar/panels/signals.html
index bd2ebc2..3936dba 100644
--- a/debug_toolbar/templates/debug_toolbar/panels/signals.html
+++ b/debug_toolbar/templates/debug_toolbar/panels/signals.html
@@ -1,19 +1,20 @@
-<h3>Signals</h3>
-<table>
-    <thead>
-        <tr>
-            <th>{% trans "Signal" %}</th>
-            <th>Providing Args</th>
-            <th>Receivers</th>
-        </tr>
-    </thead>
-    <tbody>
-        {% for name, signal, receivers in signals %}
-            <tr class="{% cycle 'djDebugOdd' 'djDebugEven' %}">
-                <td>{{ name|escape }}</td>
-                <td>{{ signal.providing_args|join:", " }}</td>
-                <td>{{ receivers|join:", " }}</td>
+<div class="boxed">
+    <table>
+        <thead>
+            <tr>
+                <th>{% trans "Signal" %}</th>
+                <th>Providing Args</th>
+                <th>Receivers</th>
             </tr>
-        {% endfor %}
-    </tbody>
-</table>
+        </thead>
+        <tbody>
+            {% for name, signal, receivers in signals %}
+                <tr class="{% cycle 'djDebugOdd' 'djDebugEven' %}">
+                    <td>{{ name|escape }}</td>
+                    <td>{{ signal.providing_args|join:", " }}</td>
+                    <td>{{ receivers|join:", " }}</td>
+                </tr>
+            {% endfor %}
+        </tbody>
+    </table>
+</div>
\ No newline at end of file
diff --git a/debug_toolbar/templates/debug_toolbar/panels/sql.html b/debug_toolbar/templates/debug_toolbar/panels/sql.html
index c07c566..4c100e9 100644
--- a/debug_toolbar/templates/debug_toolbar/panels/sql.html
+++ b/debug_toolbar/templates/debug_toolbar/panels/sql.html
@@ -1,50 +1,51 @@
 {% load i18n %}
-<h3>SQL Queries</h3>
-<table>
-	<thead>
-		<tr>
-			<th>Time&nbsp;(ms)</th>
-			<th>{% trans "Action" %}</th>
-			<th>Stacktrace</th>
-			<th>Query</th>
-		</tr>
-	</thead>
-	<tbody>
-		{% for query in queries %}
-			<tr class="{% cycle 'djDebugOdd' 'djDebugEven' %}">
-				<td>{{ query.time|floatformat:"2" }}</td>
-				<td>
-				{% if query.params %}
-					<a class="remoteCall" href="/__debug__/sql_select/?sql={{ query.raw_sql|urlencode }}&params={{ query.params|urlencode }}&time={{ query.time|floatformat:"2"|urlencode }}&hash={{ query.hash }}">SELECT</a>
-					<a class="remoteCall" href="/__debug__/sql_explain/?sql={{ query.raw_sql|urlencode }}&params={{ query.params|urlencode }}&time={{ query.time|floatformat:"2"|urlencode }}&hash={{ query.hash }}">EXPLAIN</a>
-					{% if is_mysql %}
-						<a class="remoteCall" href="/__debug__/sql_profile/?sql={{ query.raw_sql|urlencode }}&params={{ query.params|urlencode }}&time={{ query.time|floatformat:"2"|urlencode }}&hash={{ query.hash }}">PROFILE</a>
-					{% endif %}
-				{% endif %}
-				</td>
-				<td>
-					{% if query.stacktrace %}
-					<div class="djSQLShowStacktraceDiv"><a class="djSQLShowStacktrace" href="#">Toggle Stacktrace</a></div>
-					<div class="djSQLHideStacktraceDiv" style="display:none;">
-						<table>
-							<tr>
-								<th>Line</th>
-								<th>Method</th>
-								<th>File</th>
-							</tr>
-							{% for file, line, method in query.stacktrace %}
-								<tr>
-									<td>{{ line }}</td>
-									<td><pre>{{ method|escape }}<pre></td>
-									<td><pre>{{ file|escape }}</pre></td>
-								</tr>
-							{% endfor %}
-						</table>
-					</div>
-					{% endif %}
-				</td>
-				<td class="syntax">{{ query.sql|safe }}</td>
-			</tr>
-		{% endfor %}
-	</tbody>
-</table>
+<div class="boxed">
+    <table>
+    	<thead>
+    		<tr>
+    			<th>Time&nbsp;(ms)</th>
+    			<th>{% trans "Action" %}</th>
+    			<th>Stacktrace</th>
+    			<th>Query</th>
+    		</tr>
+    	</thead>
+    	<tbody>
+    		{% for query in queries %}
+    			<tr class="{% cycle 'djDebugOdd' 'djDebugEven' %}">
+    				<td>{{ query.time|floatformat:"2" }}</td>
+    				<td>
+    				{% if query.params %}
+    					<a class="remoteCall" href="/__debug__/sql_select/?sql={{ query.raw_sql|urlencode }}&params={{ query.params|urlencode }}&time={{ query.time|floatformat:"2"|urlencode }}&hash={{ query.hash }}">SELECT</a>
+    					<a class="remoteCall" href="/__debug__/sql_explain/?sql={{ query.raw_sql|urlencode }}&params={{ query.params|urlencode }}&time={{ query.time|floatformat:"2"|urlencode }}&hash={{ query.hash }}">EXPLAIN</a>
+    					{% if is_mysql %}
+    						<a class="remoteCall" href="/__debug__/sql_profile/?sql={{ query.raw_sql|urlencode }}&params={{ query.params|urlencode }}&time={{ query.time|floatformat:"2"|urlencode }}&hash={{ query.hash }}">PROFILE</a>
+    					{% endif %}
+    				{% endif %}
+    				</td>
+    				<td>
+    					{% if query.stacktrace %}
+    					<div class="djSQLShowStacktraceDiv"><a class="djSQLShowStacktrace" href="#">Toggle Stacktrace</a></div>
+    					<div class="djSQLHideStacktraceDiv" style="display:none;">
+    						<table>
+    							<tr>
+    								<th>Line</th>
+    								<th>Method</th>
+    								<th>File</th>
+    							</tr>
+    							{% for file, line, method in query.stacktrace %}
+    								<tr>
+    									<td>{{ line }}</td>
+    									<td><pre>{{ method|escape }}<pre></td>
+    									<td><pre>{{ file|escape }}</pre></td>
+    								</tr>
+    							{% endfor %}
+    						</table>
+    					</div>
+    					{% endif %}
+    				</td>
+    				<td class="syntax">{{ query.sql|safe }}</td>
+    			</tr>
+    		{% endfor %}
+    	</tbody>
+    </table>
+</div>
\ No newline at end of file
diff --git a/debug_toolbar/templates/debug_toolbar/panels/template_source.html b/debug_toolbar/templates/debug_toolbar/panels/template_source.html
index e716691..a9d6a88 100644
--- a/debug_toolbar/templates/debug_toolbar/panels/template_source.html
+++ b/debug_toolbar/templates/debug_toolbar/panels/template_source.html
@@ -1,4 +1,10 @@
 {% load i18n %}
-<a class="back" href="">&laquo;&nbsp;{% trans "Back" %}</a>
-<h3>Template Source: <samp>{{ template_name }}</samp></h3>
-{{ source }}
+<a class="close back" href="">{% trans "Back" %}</a>
+<h3>Template Source: <code>{{ template_name }}</code></h3>
+<div class="panelScrollWrap">
+    <div class="panelScrollContent">
+        <div class="boxed">
+            {{ source }}
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/debug_toolbar/templates/debug_toolbar/panels/templates.html b/debug_toolbar/templates/debug_toolbar/panels/templates.html
index 6c918b1..622321f 100644
--- a/debug_toolbar/templates/debug_toolbar/panels/templates.html
+++ b/debug_toolbar/templates/debug_toolbar/panels/templates.html
@@ -1,4 +1,5 @@
-<h3>Template path{{ template_dirs|length|pluralize }}:</h3>
+<h4>Template path{{ template_dirs|length|pluralize }}</h4>
+<div class="boxed">
 {% if template_dirs %}
 	<ol>
 	{% for template in template_dirs %}
@@ -8,32 +9,39 @@
 {% else %}
 	<p>None</p>
 {% endif %}
-<h3>Template{{ templates|length|pluralize }}</h3>
-{% if templates %}
-<dl>
-{% for template in templates %}
-	<dt><strong><a class="remoteCall" href="/__debug__/template_source/?template={{ template.template.name }}">{{ template.template.name|addslashes }}</a></strong></dt>
-	<dd><samp>{{ template.template.origin_name|addslashes }}</samp></dd>
-	<dd>
-		<div class="djTemplateShowContextDiv"><a class="djTemplateShowContext">Toggle Context</a></div>
-		<div class="djTemplateHideContextDiv" style="display:none;"><pre>{{ template.context }}</pre></div>
-	</dd>
-{% endfor %}
-</dl>
-{% else %}
-	<p>None</p>
-{% endif %}
-<h3>Context processor{{ context_processors|length|pluralize }}</h3>
-{% if context_processors %}
-<dl>
-{% for key, value in context_processors.iteritems %}
-	<dt><strong>{{ key|escape }}</strong></dt>
-	<dd>
-		<div class="djTemplateShowContextDiv"><a class="djTemplateShowContext">Toggle Context</a></div>
-		<div class="djTemplateHideContextDiv" style="display:none;"><pre>{{ value|escape }}</pre></div>
-	</dd>
-{% endfor %}
-</dl>
-{% else %}
-	<p>None</p>
-{% endif %}
+</div>
+
+<h4>Template{{ templates|length|pluralize }}</h4>
+<div class="boxed">
+    {% if templates %}
+    <dl>
+    {% for template in templates %}
+    	<dt><strong><a class="remoteCall" href="/__debug__/template_source/?template={{ template.template.name }}">{{ template.template.name|addslashes }}</a></strong></dt>
+    	<dd><samp>{{ template.template.origin_name|addslashes }}</samp></dd>
+    	<dd>
+    		<div class="djTemplateShowContextDiv"><a class="djTemplateShowContext">Toggle Context</a></div>
+    		<div class="djTemplateHideContextDiv" style="display:none;"><pre>{{ template.context }}</pre></div>
+    	</dd>
+    {% endfor %}
+    </dl>
+    {% else %}
+    	<p>None</p>
+    {% endif %}
+</div>
+
+<h4>Context processor{{ context_processors|length|pluralize }}</h4>
+<div class="boxed">
+    {% if context_processors %}
+    <dl>
+    {% for key, value in context_processors.iteritems %}
+    	<dt><strong>{{ key|escape }}</strong></dt>
+    	<dd>
+    		<div class="djTemplateShowContextDiv"><a class="djTemplateShowContext">Toggle Context</a></div>
+    		<div class="djTemplateHideContextDiv" style="display:none;"><pre>{{ value|escape }}</pre></div>
+    	</dd>
+    {% endfor %}
+    </dl>
+    {% else %}
+    	<p>None</p>
+    {% endif %}
+</div>
\ No newline at end of file
diff --git a/debug_toolbar/templates/debug_toolbar/panels/timer.html b/debug_toolbar/templates/debug_toolbar/panels/timer.html
index f593b44..70ba61e 100644
--- a/debug_toolbar/templates/debug_toolbar/panels/timer.html
+++ b/debug_toolbar/templates/debug_toolbar/panels/timer.html
@@ -1,22 +1,23 @@
 {% load i18n %}
-<h3>Resource Usage</h3>
-<table>
-	<colgroup>
-		<col style="width:20%"/>
-		<col/>
-	</colgroup>
-	<thead>
-		<tr>
-			<th>{% trans "Key" %}</th>
-			<th>{% trans "Value" %}</th>
-		</tr>
-	</thead>
-	<tbody>
-		{% for key, value in rows %}
-			<tr class="{% cycle 'djDebugOdd' 'djDebugEven' %}">
-				<td>{{ key|escape }}</td>
-				<td>{{ value|escape }}</td>
-			</tr>
-		{% endfor %}
-	</tbody>
-</table>
+<div class="boxed">
+    <table>
+    	<colgroup>
+    		<col style="width:20%"/>
+    		<col/>
+    	</colgroup>
+    	<thead>
+    		<tr>
+    			<th>{% trans "Key" %}</th>
+    			<th>{% trans "Value" %}</th>
+    		</tr>
+    	</thead>
+    	<tbody>
+    		{% for key, value in rows %}
+    			<tr class="{% cycle 'djDebugOdd' 'djDebugEven' %}">
+    				<td>{{ key|escape }}</td>
+    				<td>{{ value|escape }}</td>
+    			</tr>
+    		{% endfor %}
+    	</tbody>
+    </table>
+</div>
\ No newline at end of file