Merge pull request #613 from tim-schilling/prefix-css-classes-604

Prefixing common CSS classes with djdt-

13 files changed, 94 insertions, 94 deletions

diff --git a/debug_toolbar/panels/profiling.py b/debug_toolbar/panels/profiling.py
index 9020799..8ee3d6f 100644
--- a/debug_toolbar/panels/profiling.py
+++ b/debug_toolbar/panels/profiling.py
@@ -62,10 +62,10 @@ class FunctionCall(object):
             file_path, file_name = file_name.rsplit(os.sep, 1)
 
             return mark_safe(
-                '<span class="path">{0}/</span>'
-                '<span class="file">{1}</span>'
-                ' in <span class="func">{3}</span>'
-                '(<span class="lineno">{2}</span>)'.format(
+                '<span class="djdt-path">{0}/</span>'
+                '<span class="djdt-file">{1}</span>'
+                ' in <span class="djdt-func">{3}</span>'
+                '(<span class="djdt-lineno">{2}</span>)'.format(
                     file_path,
                     file_name,
                     line_num,
diff --git a/debug_toolbar/static/debug_toolbar/css/toolbar.css b/debug_toolbar/static/debug_toolbar/css/toolbar.css
index c85b155..235b277 100644
--- a/debug_toolbar/static/debug_toolbar/css/toolbar.css
+++ b/debug_toolbar/static/debug_toolbar/css/toolbar.css
@@ -1,15 +1,15 @@
 /* http://www.positioniseverything.net/easyclearing.html */
-#djDebug .clearfix:after {
+#djDebug .djdt-clearfix:after {
     content: ".";
     display: block;
     height: 0;
     clear: both;
     visibility: hidden;
 }
-#djDebug .clearfix {display: inline-block;}
+#djDebug .djdt-clearfix {display: inline-block;}
 /* Hides from IE-mac \*/
-#djDebug .clearfix {display: block;}
-* html #djDebug .clearfix {height: 1%;}
+#djDebug .djdt-clearfix {display: block;}
+* html #djDebug .djdt-clearfix {height: 1%;}
 /* end hide from IE-mac */
 
 /* Debug Toolbar CSS Reset, adapted from Eric Meyer's CSS Reset */
@@ -126,7 +126,7 @@
 }
 
 #djDebug #djDebugToolbar li>a,
-#djDebug #djDebugToolbar li>div.contentless  {
+#djDebug #djDebugToolbar li>div.djdt-contentless  {
 	font-weight:normal;
 	font-style:normal;
 	text-decoration:none;
@@ -135,7 +135,7 @@
 	padding:10px 10px 5px 25px;
 	color:#fff;
 }
-#djDebug #djDebugToolbar li>div.disabled {
+#djDebug #djDebugToolbar li>div.djdt-disabled {
 	font-style: italic;
 	color: #999;
 }
@@ -145,13 +145,13 @@
 	background-color:#ffc;
 }
 
-#djDebug #djDebugToolbar li.active {
+#djDebug #djDebugToolbar li.djdt-active {
 	background: #333 no-repeat left center;
 	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAQAAAAngNWGAAABe0lEQVR4AW2SO0tDQRCFz+bGJxEUrKzsBBsb/4DYiIWdECvB/6CCYGtp6QNRjJ1FihSCVpZGMIhYSBAfIGKRx70xyY3JbrKOk7DJLp7DXm7Il9nMmREYQgQeAI1W1/zZUhR9ZI9gjSZb0iHMRSPbE1QzhhF2jN4H6YdRCHaPvOTjdDb1jWECBhiJoC1tg6Kotbw9WkxBoIUGaqiiQs8fSCj+t9qAIL1nlg9fKgSGKKNEJ2RUMqh7QCDIr58k31AlrIiA0CqhDTQJtUFAqsTFxjV85FGAz1XrkDZodPewkih8IkdwCRWu2U6VerQ0O3OzuTSJ/k62JiIXJI2NL0wBjDiTseQHW8fnGY6myf3+Dz49x88+vjr9SoPaoG6lLteuCApMiu1otAWG/s7BXtYEzv3yZOyrc5nV3XTZjPAv7Jqp2AVf9+dOyx4EFCTqCAnimZB1z9X38fk05RblfVQE1LkR5a6vwCivruANV2ynjU5FHpIE+AsCnCuNfgGtjt1gZaIn2wAAAABJRU5ErkJggg==");
 	padding-left:10px;
 }
 
-#djDebug #djDebugToolbar li.active a:hover {
+#djDebug #djDebugToolbar li.djdt-active a:hover {
 	color:#b36a60;
 	background-color:transparent;
 }
@@ -214,7 +214,7 @@
 	background-color:#f5f5f5;
 }
 
-#djDebug .panelContent {
+#djDebug .djdt-panelContent {
 	display:none;
 	position:fixed;
 	margin:0;
@@ -227,7 +227,7 @@
 	z-index:100000000;
 }
 
-#djDebug .panelContent > div {
+#djDebug .djdt-panelContent > div {
 	border-bottom:1px solid #ddd;
 }
 
@@ -257,12 +257,12 @@
 	padding:5px 0 0 20px;
 }
 
-#djDebug .djDebugPanelContent .loader {
+#djDebug .djDebugPanelContent .djdt-loader {
 	display:block;
 	margin:80px auto;
 }
 
-#djDebug .djDebugPanelContent .scroll {
+#djDebug .djDebugPanelContent .djdt-scroll {
 	height:100%;
 	overflow:auto;
 	display:block;
@@ -281,7 +281,7 @@
 	margin-top:0.8em;
 }
 
-#djDebug .panelContent table {
+#djDebug .djdt-panelContent table {
 	border:1px solid #ccc;
 	border-collapse:collapse;
 	width:100%;
@@ -290,23 +290,23 @@
 	margin-top:0.8em;
 	overflow: auto;
 }
-#djDebug .panelContent tbody td,
-#djDebug .panelContent tbody th {
+#djDebug .djdt-panelContent tbody td,
+#djDebug .djdt-panelContent tbody th {
 	vertical-align:top;
 	padding:2px 3px;
 }
-#djDebug .panelContent tbody td.time {
+#djDebug .djdt-panelContent tbody td.djdt-time {
     text-align: center;
 }
 
-#djDebug .panelContent thead th {
+#djDebug .djdt-panelContent thead th {
 	padding:1px 6px 1px 3px;
 	text-align:left;
 	font-weight:bold;
 	font-size:14px;
     white-space: nowrap;
 }
-#djDebug .panelContent tbody th {
+#djDebug .djdt-panelContent tbody th {
 	width:12em;
 	text-align:right;
 	color:#666;
@@ -318,20 +318,20 @@
 }
 
 /*
-#djDebug .panelContent p a:hover, #djDebug .panelContent dd a:hover {
+#djDebug .djdt-panelContent p a:hover, #djDebug .djdt-panelContent dd a:hover {
 	color:#111;
 	background-color:#ffc;
 }
 
-#djDebug .panelContent p {
+#djDebug .djdt-panelContent p {
 	padding:0 5px;
 }
 
-#djDebug .panelContent p, #djDebug .panelContent table, #djDebug .panelContent ol, #djDebug .panelContent ul, #djDebug .panelContent dl {
+#djDebug .djdt-panelContent p, #djDebug .djdt-panelContent table, #djDebug .djdt-panelContent ol, #djDebug .djdt-panelContent ul, #djDebug .djdt-panelContent dl {
 	margin:5px 0 15px;
 	background-color:#fff;
 }
-#djDebug .panelContent table {
+#djDebug .djdt-panelContent table {
 	clear:both;
 	border:0;
 	padding:0;
@@ -340,15 +340,15 @@
 	border-spacing:0;
 }
 
-#djDebug .panelContent table a {
+#djDebug .djdt-panelContent table a {
 	color:#000;
 	padding:2px 4px;
 }
-#djDebug .panelContent table a:hover {
+#djDebug .djdt-panelContent table a:hover {
 	background-color:#ffc;
 }
 
-#djDebug .panelContent table th {
+#djDebug .djdt-panelContent table th {
 	background-color:#333;
 	font-weight:bold;
 	color:#fff;
@@ -356,7 +356,7 @@
 	text-align:left;
 	cursor:pointer;
 }
-#djDebug .panelContent table td {
+#djDebug .djdt-panelContent table td {
 	padding:5px 10px;
 	font-size:14px;
 	background-color:#fff;
@@ -364,12 +364,12 @@
 	vertical-align:top;
 	border:0;
 }
-#djDebug .panelContent table tr.djDebugOdd td {
+#djDebug .djdt-panelContent table tr.djDebugOdd td {
   background-color:#eee;
 }
 */
 
-#djDebug .panelContent .djDebugClose {
+#djDebug .djdt-panelContent .djDebugClose {
 	text-indent:-9999999px;
 	display:block;
 	position:absolute;
@@ -381,27 +381,27 @@
 	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAiCAQAAACQTsNJAAABuUlEQVR4Ab2WXeoaMRTFZxHz6pObcA0DeXUHhXktFl8LXYAPXYBLKhQGBOFqW3XS8YOW6vjHmnp6wWZyHU1maqHnQDAf/Ehu7twYhUQxdUixO/wr8ts3oeg9TQjCEx5R7SGvKCd4nPNsIyShD4QGf6QkBBkQWnrgg4zqS2fm01kbze3M3GFGjyBvCdLFqYRUySM1zLAOUXJ6dZAACcoPBOHkFpK5qY1BQBt5sExC0gAijEkriMuLfI9m8SqXNxbSd+QSbVSCnPtXyNjdCCoZ7PANF7C4/Y4tznASNzW+QqaP9lFcj4cLW4PY+vFepsSQ2Hbnp5vw2ShB231Cau72EkfUs53lC4R+YQkSXsBAiFdXc72IkupmDODDfKkhwKtdygUgHAuXw7gEIN7jCIQNsfc43sDuqlgsbC57A+u94q82nFVscv8Vy2Rbi72csGKQ+RPignvytGuZbPW0P6KNjvdpz97aIf3jLz/ArfuKXz9dCt7IojR9qihNAuUx33vL454grOqF+t2/F2rPk/H5pzaa2+Ynw3lIaOlh6BlVlDUCMlLND3pKhRdQUPof/1o4x9Qlxe6G/+T8BlqvQqkd4EyZAAAAAElFTkSuQmCC");
 }
 
-#djDebug .panelContent .djDebugClose:hover {
+#djDebug .djdt-panelContent .djDebugClose:hover {
 	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAiCAYAAAA6RwvCAAACiUlEQVR4Ad2Yz2oTURSH+xCz7cqX6DMUZtudCxExigq2WhcKYtGFVLrwAboSKoVGxT+tJWpTa2lLTDsm6SSTjtZoIq0prf+2Hu8PcmHInJvJPYwuPPDBMDPn8DE5c+fcDEgjDENHMahwOwx2zg1IsE1wFXcVvoIM+J173L8hckrRUpAlLeSmITKsKNoKMHioJRUZU1DKjNmKTCUWDWpUL21RJbcAcIxz/chM9StyvVeh8rOHtH7nJi2dOc6Ba7gnSWY8ScQ1JVdfv6C1yQlegAH3+su5XjLDvUTKXNK77H0Ul4Bck0jZJJLhEry5GV1ULvNg1iSTiYlw64SfX0ShNEAtfp3pEhnhjJmekIJapqcyEhWZZt4OtuDqlXPUWHxKYXaGli+c1Ocpf/4E1Wfv0afcPK1dG+VyTW/TdFQk6Pdp7BfWSMdhtQIZSFDbe0s6DiqezVMJtIjTfXGnuv3b9Iib+RxF47C2Te3SJkUDsqZ81GZkHIgMdV+ora8YC62MnqbvH0Iyxa/WZ3pz+awxH7UZkSH9YaMolZfPdaJZZvd9XOJLU0sYQW1ucROJoCcOyh51x1G9ip4Ri1j9NLoxDaEbWPDTWDbrx/lHsZ740dilSKChBc1q+fp+3SyQjp/NBnoi1sB4KpLXl13QSo/n2GKFW1fpaKdG+8UNSEQbmPY2VulbWKfi5A0uFzUTFzR+ib/NFJSBWolLvKYd++i9WkhNxF9i35Y29/W9KB8DxDPJJU4EBP9wMPJFoyLmCetRUc8gPK5JRDOhIBOlJ9nE4Rn3yIdnwXYi2Crq7QSOU99OaGBNKTMu3XK63GQvADXcNDbhGcWeQAA5mf/ybwkOR3FM4XbAsSOt9wcLTn8FNtAKkQAAAABJRU5ErkJggg==");
 }
 
-#djDebug .panelContent .djDebugClose.djDebugBack {
+#djDebug .djdt-panelContent .djDebugClose.djDebugBack {
 	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAiCAYAAAA6RwvCAAACBUlEQVR4Ad2Y0WriQBSGfYjc7tW+hM8g5HbfYMHbxcXbhT6AF30AH6cXvRCEttK0JgZi0qhQaRNtNWV2fuiADicZcxirdOCn45mccz4mMyczbXDbeDx2pH5IuRD6n7YGR3UdkPBSaiQlSoQxPOMeA+S3VIxENRXD1wZIS2rAANA1RCwuSAdBLKtTF6RnCur7fjGZTLZJkhQQ+rAdANM7FORfVaA0Td/zPBdlDWN4xgDTNYG4Zc7T6TQjASqA4jjOKmBaVSA3lNN8Pi8Es8GXBkEuGqTNh2DDtCkQvU5gal+FpYZYZJ3RQH5RxPqaWG82qmuw02uGyoHcuyB9anfowZ6el+I2jITellkOu9gWH5UwJbupvwvimWZDgVzdeWLohyqpAlF2zE7dWfEUiKMPBkGwNxt6QmjwEKik+Ltnz9ZvpTCITcA4AGnqA1EUreFkgrm+fwSEsuO3spfCIDYB0gRIi9gtlVsWSVRSAOzaMSOw4zVSDbGp4nZGIPxXg6TWXo39xarsjMV6LtuXLmiz2cx6QUNMuqAZSvxqtbJW4hHLVOKVFvpDSZK8HPmjt6C+vn9OcAz4S4FA3hcejEasoyKmlnFUVK+DklsFAl2c9vDMuE6EYbhR1wn0bV8nlEAtLKvLvXK62smeK8RwbVzC21IpAyCF77f8twQlR+onEkLow8aN9x+oYk85YNJqYQAAAABJRU5ErkJggg==");
 }
 
-#djDebug .panelContent .djDebugClose.djDebugBack:hover  {
+#djDebug .djdt-panelContent .djDebugClose.djDebugBack:hover  {
 	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAiCAYAAAA6RwvCAAACLElEQVR4Ad2YT8sSURTG/RCzbdWX8DMIs23XMrBlTLiTSIKKIqgP4C6KQAuKsLCycqGLRHNsXqck2giStIiiRdDtPtABuz0zNw+XkAYe3vHce57zY/7cOfetaI/VahVZHbOKIZz/ilU02jcBBW9YZVaGC2OYg7nhQU5ZrVlhj9bIDQFSs5ooAFzN4KUFSWASWMm+INe8pvnSvJ1PzaLfg3COmB8G3n8Jcq7MKH14z4yvXjCD0yepMIY5HpiGDyQuSj56+cSMrrQ4ABHmZi/6ZTC1MpCUJb3u3oa5SsjlIKjFQeosYda5JaZ6mLt3OAxquiBsncieP4ZRCMGLrjMuyAlG7D4To2Yi5/44eWZYDdTeBWmzt8M1W95sm09Z+kd8dv0S4maY1EthCt6m9i5ITq8GAcHx+cN7KSogEqdXx3NVcgGJ3MF3R29+MCMpiOPbx40Uxd/f4q8uNgth4E1gIoBU3YHleOgYcJjvX78AQuL4LfFCGHgTkCpAau7A4umj0nuNIlIUALtxXBEcuI0kF950cTsoEO2tQdGAtyb8w4rfiof1cF5fvqDN73dCL2jwpAuaf4m/fD7UEg8v7xIv2rqTsme9cB+9AX1btuzre0bdBuh7krMMBMr/YWOUaVpF9BP7t4rSg3DFvua5xRJF8wddb/OMOfrmWbGdyKcT2U7gPPh2QgRqE1gN7ZYzZp29Qim8QmzC61YbBcAGuf/hvyW4IqvjKAjhHDGt309H4mp9BS17eAAAAABJRU5ErkJggg==");
 }
 
-#djDebug .panelContent dt, #djDebug .panelContent dd {
+#djDebug .djdt-panelContent dt, #djDebug .djdt-panelContent dd {
 	display:block;
 }
 
-#djDebug .panelContent dt {
+#djDebug .djdt-panelContent dt {
 	margin-top:0.75em;
 }
 
-#djDebug .panelContent dd {
+#djDebug .djdt-panelContent dd {
 	margin-left:10px;
 }
 
@@ -548,45 +548,45 @@
 }
 
 
-#djDebug .panelContent ul.stats {
+#djDebug .djdt-panelContent ul.djdt-stats {
     position: relative;
     list-style-type: none;
 }
-#djDebug .panelContent ul.stats li {
+#djDebug .djdt-panelContent ul.djdt-stats li {
     width: 30%;
     float: left;
 }
-#djDebug .panelContent ul.stats li strong.label {
+#djDebug .djdt-panelContent ul.djdt-stats li strong.djdt-label {
     display: block;
 }
-#djDebug .panelContent ul.stats li span.color {
+#djDebug .djdt-panelContent ul.djdt-stats li span.djdt-color {
     height: 12px;
     width: 3px;
     display: inline-block;
 }
-#djDebug .panelContent ul.stats li span.info {
+#djDebug .djdt-panelContent ul.djdt-stats li span.djdt-info {
     display: block;
     padding-left: 5px;
 }
 
-#djDebug .panelcontent thead th {
+#djDebug .djdt-panelContent thead th {
     white-space: nowrap;
 }
-#djDebug .djDebugRowWarning .time {
+#djDebug .djDebugRowWarning .djdt-time {
     color: red;
 }
-#djdebug .panelcontent table .toggle {
+#djdebug .djdt-panelContent table .djdt-toggle {
     width: 14px;
     padding-top: 3px;
 }
-#djDebug .panelContent table .actions {
+#djDebug .djdt-panelContent table .djdt-actions {
     min-width: 70px;
     white-space: nowrap;
 }
-#djdebug .panelcontent table .color {
+#djdebug .djdt-panelContent table .djdt-color {
     width: 3px;
 }
-#djdebug .panelcontent table .color span {
+#djdebug .djdt-panelContent table .djdt-color span {
     width: 3px;
     height: 12px;
     overflow: hidden;
@@ -630,15 +630,15 @@
     margin-bottom: 3px;
     font-family:Consolas, Monaco, "Bitstream Vera Sans Mono", "Lucida Console", monospace;
 }
-#djDebug .stack span {
+#djDebug .djdt-stack span {
     color: #000;
     font-weight: bold;
 }
-#djDebug .stack span.path {
+#djDebug .djdt-stack span.djdt-path {
     color: #777;
     font-weight: normal;
 }
-#djDebug .stack span.code {
+#djDebug .djdt-stack span.djdt-code {
     font-weight: normal;
 }
 
diff --git a/debug_toolbar/static/debug_toolbar/js/toolbar.js b/debug_toolbar/static/debug_toolbar/js/toolbar.js
index 771bdda..7bde19b 100644
--- a/debug_toolbar/static/debug_toolbar/js/toolbar.js
+++ b/debug_toolbar/static/debug_toolbar/js/toolbar.js
@@ -15,10 +15,10 @@
                 current = $('#djDebug #' + this.className);
                 if (current.is(':visible')) {
                     $(document).trigger('close.djDebug');
-                    $(this).parent().removeClass('active');
+                    $(this).parent().removeClass('djdt-active');
                 } else {
-                    $('.panelContent').hide(); // Hide any that are already open
-                    var inner = current.find('.djDebugPanelContent .scroll'),
+                    $('.djdt-panelContent').hide(); // Hide any that are already open
+                    var inner = current.find('.djDebugPanelContent .djdt-scroll'),
                         store_id = $('#djDebug').data('store-id'),
                         render_panel_url = $('#djDebug').data('render-panel-url');
                     if (store_id !== '' && inner.children().length === 0) {
@@ -39,14 +39,14 @@
                         });
                     }
                     current.show();
-                    $('#djDebugToolbar li').removeClass('active');
-                    $(this).parent().addClass('active');
+                    $('#djDebugToolbar li').removeClass('djdt-active');
+                    $(this).parent().addClass('djdt-active');
                 }
                 return false;
             });
             $(document).on('click', '#djDebug a.djDebugClose', function() {
                 $(document).trigger('close.djDebug');
-                $('#djDebugToolbar li').removeClass('active');
+                $('#djDebugToolbar li').removeClass('djdt-active');
                 return false;
             });
             $(document).on('click', '#djDebug .djDebugPanelButton input[type=checkbox]', function() {
@@ -168,9 +168,9 @@
                     return;
                 }
                 // If a panel is open, close that
-                if ($('.panelContent').is(':visible')) {
-                    $('.panelContent').hide();
-                    $('#djDebugToolbar li').removeClass('active');
+                if ($('.djdt-panelContent').is(':visible')) {
+                    $('.djdt-panelContent').hide();
+                    $('#djDebugToolbar li').removeClass('djdt-active');
                     return;
                 }
                 // Otherwise, just minimize the toolbar
@@ -202,8 +202,8 @@
             // close any sub panels
             $('#djDebugWindow').hide();
             // close all panels
-            $('.panelContent').hide();
-            $('#djDebugToolbar li').removeClass('active');
+            $('.djdt-panelContent').hide();
+            $('#djDebugToolbar li').removeClass('djdt-active');
             // finally close toolbar
             $('#djDebugToolbar').hide('fast');
             $('#djDebugToolbarHandle').show();
diff --git a/debug_toolbar/templates/debug_toolbar/base.html b/debug_toolbar/templates/debug_toolbar/base.html
index d8fb933..aba0862 100644
--- a/debug_toolbar/templates/debug_toolbar/base.html
+++ b/debug_toolbar/templates/debug_toolbar/base.html
@@ -28,7 +28,7 @@
 					{% if panel.has_content and panel.enabled %}
 						<a href="#" title="{{ panel.title }}" class="{{ panel.panel_id }}">
 					{% else %}
-						<div class="contentless{% if not panel.enabled %} disabled{% endif %}">
+						<div class="djdt-contentless{% if not panel.enabled %} djdt-disabled{% endif %}">
 					{% endif %}
 					{{ panel.nav_title }}
 					{% if panel.enabled %}
@@ -50,21 +50,21 @@
 	</div>
 	{% for panel in toolbar.panels %}
 		{% if panel.has_content and panel.enabled %}
-			<div id="{{ panel.panel_id }}" class="panelContent">
+			<div id="{{ panel.panel_id }}" class="djdt-panelContent">
 				<div class="djDebugPanelTitle">
 					<a href="" class="djDebugClose">{% trans "Close" %}</a>
 					<h3>{{ panel.title|safe }}</h3>
 				</div>
 				<div class="djDebugPanelContent">
 					{% if toolbar.store_id %}
-					<img src="{% static 'debug_toolbar/img/ajax-loader.gif' %}" alt="loading" class="loader" />
-					<div class="scroll"></div>
+					<img src="{% static 'debug_toolbar/img/ajax-loader.gif' %}" alt="loading" class="djdt-loader" />
+					<div class="djdt-scroll"></div>
 					{% else %}
-					<div class="scroll">{{ panel.content }}</div>
+					<div class="djdt-scroll">{{ panel.content }}</div>
 					{% endif %}
 				</div>
 			</div>
 		{% endif %}
 	{% endfor %}
-	<div id="djDebugWindow" class="panelContent"></div>
+	<div id="djDebugWindow" class="djdt-panelContent"></div>
 </div>
diff --git a/debug_toolbar/templates/debug_toolbar/panels/cache.html b/debug_toolbar/templates/debug_toolbar/panels/cache.html
index 82ccc49..527306c 100644
--- a/debug_toolbar/templates/debug_toolbar/panels/cache.html
+++ b/debug_toolbar/templates/debug_toolbar/panels/cache.html
@@ -50,7 +50,7 @@
 	<tbody>
 	{% for call in calls %}
 		<tr class="{% cycle 'djDebugOdd' 'djDebugEven' %}" id="cacheMain_{{ forloop.counter }}">
-			<td class="toggle">
+			<td class="djdt-toggle">
 				<a class="djToggleSwitch" data-toggle-name="cacheMain" data-toggle-id="{{ forloop.counter }}" data-toggle-open="+" data-toggle-close="-" href="javascript:void(0)">+</a>
 			</td>
 			<td>{{ call.time|floatformat:"4" }}</td>
@@ -61,7 +61,7 @@
 		</tr>
 		<tr class="djUnselected djDebugHoverable {% cycle 'djDebugOdd' 'djDebugEven' %} djToggleDetails_{{ forloop.counter }}" id="cacheDetails_{{ forloop.counter }}">
 			<td colspan="1"></td>
-			<td colspan="5"><pre class="stack">{{ call.trace }}</pre></td>
+			<td colspan="5"><pre class="djdt-stack">{{ call.trace }}</pre></td>
 		</tr>
 	{% endfor %}
 	</tbody>
diff --git a/debug_toolbar/templates/debug_toolbar/panels/profiling.html b/debug_toolbar/templates/debug_toolbar/panels/profiling.html
index 3800f98..0475276 100644
--- a/debug_toolbar/templates/debug_toolbar/panels/profiling.html
+++ b/debug_toolbar/templates/debug_toolbar/panels/profiling.html
@@ -21,7 +21,7 @@
 						{% else %}
 							<span class="djNoToggleSwitch"></span>
 						{% endif %}
-						<span class="stack">{{ call.func_std_string }}</span>
+						<span class="djdt-stack">{{ call.func_std_string }}</span>
 					</div>
 				</td>
 				<td>{{ call.cumtime|floatformat:3 }}</td>
diff --git a/debug_toolbar/templates/debug_toolbar/panels/sql.html b/debug_toolbar/templates/debug_toolbar/panels/sql.html
index 7dab547..8c6725d 100644
--- a/debug_toolbar/templates/debug_toolbar/panels/sql.html
+++ b/debug_toolbar/templates/debug_toolbar/panels/sql.html
@@ -1,10 +1,10 @@
 {% load i18n l10n %}{% load static from staticfiles %}{% load url from future %}
-<div class="clearfix">
-	<ul class="stats">
+<div class="djdt-clearfix">
+	<ul class="djdt-stats">
 		{% for alias, info in databases %}
 			<li>
-				<strong class="label"><span style="background-color: rgb({{ info.rgb_color|join:", " }})" class="color">&#160;</span> {{ alias }}</strong>
-				<span class="info">{{ info.time_spent|floatformat:"2" }} ms ({% blocktrans count info.num_queries as num %}{{ num }} query{% plural %}{{ num }} queries{% endblocktrans %})</span>
+				<strong class="djdt-label"><span style="background-color: rgb({{ info.rgb_color|join:", " }})" class="djdt-color">&#160;</span> {{ alias }}</strong>
+				<span class="djdt-info">{{ info.time_spent|floatformat:"2" }} ms ({% blocktrans count info.num_queries as num %}{{ num }} query{% plural %}{{ num }} queries{% endblocktrans %})</span>
 			</li>
 		{% endfor %}
 	</ul>
@@ -14,18 +14,18 @@
 	<table>
 		<thead>
 			<tr>
-				<th class="color">&#160;</th>
+				<th class="djdt-color">&#160;</th>
 				<th class="query" colspan="2">{% trans "Query" %}</th>
 				<th class="timeline">{% trans "Timeline" %}</th>
-				<th class="time">{% trans "Time (ms)" %}</th>
-				<th class="actions">{% trans "Action" %}</th>
+				<th class="djdt-time">{% trans "Time (ms)" %}</th>
+				<th class="djdt-actions">{% trans "Action" %}</th>
 			</tr>
 		</thead>
 		<tbody>
 			{% for query in queries %}
 				<tr class="djDebugHoverable {% cycle 'djDebugOdd' 'djDebugEven' %}{% if query.is_slow %} djDebugRowWarning{% endif %}{% if query.starts_trans %} djDebugStartTransaction{% endif %}{% if query.ends_trans %} djDebugEndTransaction{% endif %}{% if query.in_trans %} djDebugInTransaction{% endif %}" id="sqlMain_{{ forloop.counter }}">
-					<td class="color"><span style="background-color: rgb({{ query.rgb_color|join:", " }});">&#160;</span></td>
-					<td class="toggle">
+					<td class="djdt-color"><span style="background-color: rgb({{ query.rgb_color|join:", " }});">&#160;</span></td>
+					<td class="djdt-toggle">
 						<a class="djToggleSwitch" data-toggle-name="sqlMain" data-toggle-id="{{ forloop.counter }}" data-toggle-open="+" data-toggle-close="-" href="javascript:void(0)">+</a>
 					</td>
 					<td class="query">
@@ -36,10 +36,10 @@
 					<td class="timeline">
 						<div class="djDebugTimeline"><div class="djDebugLineChart{% if query.is_slow %} djDebugLineChartWarning{% endif %}" style="left:{{ query.start_offset|unlocalize }}%;"><strong style="width:{{ query.width_ratio_relative|unlocalize }}%; background-color:{{ query.trace_color }};">{{ query.width_ratio }}%</strong></div></div>
 					</td>
-					<td class="time">
+					<td class="djdt-time">
 						{{ query.duration|floatformat:"2" }}
 					</td>
-					<td class="actions">
+					<td class="djdt-actions">
 
 					{% if query.params %}
 						{% if query.is_select %}
@@ -69,7 +69,7 @@
 								<p><strong>{% trans "Transaction status:" %}</strong> {{ query.trans_status }}</p>
 							{% endif %}
 							{% if query.stacktrace %}
-								<pre class="stack">{{ query.stacktrace }}</pre>
+								<pre class="djdt-stack">{{ query.stacktrace }}</pre>
 							{% endif %}
 							{% if query.template_info %}
 								<table>
diff --git a/debug_toolbar/templates/debug_toolbar/panels/sql_explain.html b/debug_toolbar/templates/debug_toolbar/panels/sql_explain.html
index da9b120..30e6625 100644
--- a/debug_toolbar/templates/debug_toolbar/panels/sql_explain.html
+++ b/debug_toolbar/templates/debug_toolbar/panels/sql_explain.html
@@ -4,7 +4,7 @@
 	<h3>{% trans "SQL explained" %}</h3>
 </div>
 <div class="djDebugPanelContent">
-	<div class="scroll">
+	<div class="djdt-scroll">
 		<dl>
 			<dt>{% trans "Executed SQL" %}</dt>
 			<dd>{{ sql|safe }}</dd>
diff --git a/debug_toolbar/templates/debug_toolbar/panels/sql_profile.html b/debug_toolbar/templates/debug_toolbar/panels/sql_profile.html
index af70d92..e6ba19b 100644
--- a/debug_toolbar/templates/debug_toolbar/panels/sql_profile.html
+++ b/debug_toolbar/templates/debug_toolbar/panels/sql_profile.html
@@ -4,7 +4,7 @@
 	<h3>{% trans "SQL profiled" %}</h3>
 </div>
 <div class="djDebugPanelContent">
-	<div class="scroll">
+	<div class="djdt-scroll">
 		{% if result %}
 			<dl>
 				<dt>{% trans "Executed SQL" %}</dt>
diff --git a/debug_toolbar/templates/debug_toolbar/panels/sql_select.html b/debug_toolbar/templates/debug_toolbar/panels/sql_select.html
index 60882d3..e610b03 100644
--- a/debug_toolbar/templates/debug_toolbar/panels/sql_select.html
+++ b/debug_toolbar/templates/debug_toolbar/panels/sql_select.html
@@ -4,7 +4,7 @@
 	<h3>{% trans "SQL selected" %}</h3>
 </div>
 <div class="djDebugPanelContent">
-	<div class="scroll">
+	<div class="djdt-scroll">
 		<dl>
 			<dt>{% trans "Executed SQL" %}</dt>
 			<dd>{{ sql|safe }}</dd>
diff --git a/debug_toolbar/templates/debug_toolbar/panels/template_source.html b/debug_toolbar/templates/debug_toolbar/panels/template_source.html
index f827d1a..01c7f2d 100644
--- a/debug_toolbar/templates/debug_toolbar/panels/template_source.html
+++ b/debug_toolbar/templates/debug_toolbar/panels/template_source.html
@@ -4,7 +4,7 @@
 	<h3>{% trans "Template source:" %} <code>{{ template_name }}</code></h3>
 </div>
 <div class="djDebugPanelContent">
-	<div class="scroll">
+	<div class="djdt-scroll">
 		{% if not source.pygmentized %}
 			<code>{{ source }}</code>
 		{% else %}
diff --git a/debug_toolbar/templates/debug_toolbar/panels/timer.html b/debug_toolbar/templates/debug_toolbar/panels/timer.html
index cab0648..988c715 100644
--- a/debug_toolbar/templates/debug_toolbar/panels/timer.html
+++ b/debug_toolbar/templates/debug_toolbar/panels/timer.html
@@ -34,7 +34,7 @@
 			<tr>
 				<th>{% trans "Timing attribute" %}</th>
 				<th class="timeline">{% trans "Timeline" %}</th>
-				<th class="time">{% trans "Milliseconds since navigation start (+length)" %}</th>
+				<th class="djdt-time">{% trans "Milliseconds since navigation start (+length)" %}</th>
 			</tr>
 		</thead>
 		<tbody id="djDebugBrowserTimingTableBody">
diff --git a/debug_toolbar/utils.py b/debug_toolbar/utils.py
index 0aedb54..e5eef4b 100644
--- a/debug_toolbar/utils.py
+++ b/debug_toolbar/utils.py
@@ -71,11 +71,11 @@ def render_stacktrace(trace):
         params = map(escape, frame[0].rsplit(os.path.sep, 1) + list(frame[1:]))
         params_dict = dict((six.text_type(idx), v) for idx, v in enumerate(params))
         try:
-            stacktrace.append('<span class="path">%(0)s/</span>'
-                              '<span class="file">%(1)s</span>'
-                              ' in <span class="func">%(3)s</span>'
-                              '(<span class="lineno">%(2)s</span>)\n'
-                              '  <span class="code">%(4)s</span>'
+            stacktrace.append('<span class="djdt-path">%(0)s/</span>'
+                              '<span class="djdt-file">%(1)s</span>'
+                              ' in <span class="djdt-func">%(3)s</span>'
+                              '(<span class="djdt-lineno">%(2)s</span>)\n'
+                              '  <span class="djdt-code">%(4)s</span>'
                               % params_dict)
         except KeyError:
             # This frame doesn't have the expected format, so skip it and move on to the next one