diff --git a/CHANGELOG.md b/CHANGELOG.md
index bd85a28..273d228 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,12 @@
 # Changelog
 
+2013-10-06:
+
+ - prefixed all css classes
+ - new PhpDebugBar.utils.csscls() function
+ - changed datetime to time in datasets selector
+ - close and open buttons now uses images instead of font-awesome
+
 2013-09-23:
 
  - send the request id in headers and use the open handler to retreive the dataset
diff --git a/src/DebugBar/Resources/debugbar.css b/src/DebugBar/Resources/debugbar.css
index 54f6d00..e18c45d 100644
--- a/src/DebugBar/Resources/debugbar.css
+++ b/src/DebugBar/Resources/debugbar.css
@@ -49,7 +49,7 @@ a.phpdebugbar-minimize-btn {
   border-right: 1px solid #ddd;
 }
 
-a.phpdebugbar-tab.active {
+a.phpdebugbar-tab.phpdebugbar-active {
   background: #ccc;
   color: #444;
   background-image: linear-gradient(bottom, rgb(173,173,173) 41%, rgb(209,209,209) 71%);
@@ -59,7 +59,7 @@ a.phpdebugbar-tab.active {
   background-image: -ms-linear-gradient(bottom, rgb(173,173,173) 41%, rgb(209,209,209) 71%);
   background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.41, rgb(173,173,173)), color-stop(0.71, rgb(209,209,209)));
 }
-  a.phpdebugbar-tab span.badge {
+  a.phpdebugbar-tab span.phpdebugbar-badge {
     display: none;
     margin-left: 5px;
     font-size: 11px;
@@ -70,22 +70,31 @@ a.phpdebugbar-tab.active {
     font-weight: normal;
     text-shadow: none;
   }
-  a.phpdebugbar-tab span.badge.important {
+  a.phpdebugbar-tab span.phpdebugbar-badge.phpdebugbar-important {
     background: #ed6868;
     color: white;
   }
 
 a.phpdebugbar-minimize-btn {
   display: none;
+  background: url(icons.png) no-repeat 10px 7px;
+  width: 16px;
+  height: 16px;
+}
+
+a.phpdebugbar-open-btn {
+  background: url(icons.png) no-repeat -14px 8px;
+  width: 16px;
+  height: 16px;
 }
 
 .phpdebugbar-indicator {
   position: relative;
 }
-  .phpdebugbar-indicator span.text {
+  .phpdebugbar-indicator span.phpdebugbar-text {
     margin-left: 5px;
   }
-  .phpdebugbar-indicator span.tooltip {
+  .phpdebugbar-indicator span.phpdebugbar-tooltip {
     display: none;
     position: absolute;
     top: -30px;
@@ -97,7 +106,7 @@ a.phpdebugbar-minimize-btn {
     padding: 2px 3px;
     z-index: 1000;
   }
-  .phpdebugbar-indicator:hover span.tooltip:not(.disabled) {
+  .phpdebugbar-indicator:hover span.phpdebugbar-tooltip:not(.phpdebugbar-disabled) {
     display: block;
   }
 
@@ -137,6 +146,6 @@ div.phpdebugbar-panel {
   overflow: auto;
   width: 100%;
 }
-div.phpdebugbar-panel.active {
+div.phpdebugbar-panel.phpdebugbar-active {
   display: block;
 }
diff --git a/src/DebugBar/Resources/debugbar.js b/src/DebugBar/Resources/debugbar.js
index a1c62e5..ffe1520 100644
--- a/src/DebugBar/Resources/debugbar.js
+++ b/src/DebugBar/Resources/debugbar.js
@@ -14,6 +14,10 @@ if (typeof(PhpDebugBar) == 'undefined') {
         };
     }
 
+    if (typeof(PhpDebugBar.utils) == 'undefined') {
+        PhpDebugBar.utils = {};
+    }
+
     /**
      * Returns the value from an object property.
      * Using dots in the key, it is possible to retrieve nested property values
@@ -23,7 +27,7 @@ if (typeof(PhpDebugBar) == 'undefined') {
      * @param {Object} default_value
      * @return {Object}
      */
-    function getDictValue(dict, key, default_value) {
+    var getDictValue = PhpDebugBar.utils.getDictValue = function(dict, key, default_value) {
         var d = dict, parts = key.split('.');
         for (var i = 0; i < parts.length; i++) {
             if (!d[parts[i]]) {
@@ -40,7 +44,7 @@ if (typeof(PhpDebugBar) == 'undefined') {
      * @param {Object} obj
      * @return {Integer}
      */
-    function getObjectSize(obj) {
+    var getObjectSize = PhpDebugBar.utils.getObjectSize = function(obj) {
         if (Object.keys) {
             return Object.keys(obj).length;
         }
@@ -53,6 +57,31 @@ if (typeof(PhpDebugBar) == 'undefined') {
         return count;
     }
 
+    /**
+     * Returns a prefixed css class name
+     * 
+     * @param {String} cls
+     * @return {String}
+     */
+    PhpDebugBar.utils.csscls = function(cls, prefix) {
+        if (cls.indexOf(' ') > -1) {
+            var clss = cls.split(' '), out = [];
+            for (var i = 0, c = clss.length; i < c; i++) {
+                out.push(PhpDebugBar.utils.csscls(clss[i], prefix));
+            }
+            return out.join(' ');
+        }
+        if (cls.indexOf('.') === 0) {
+            return '.' + prefix + cls.substr(1);
+        }
+        return prefix + cls;
+    };
+
+    var csscls = function(cls) { 
+        return PhpDebugBar.utils.csscls(cls, 'phpdebugbar-');
+    };
+
+
     // ------------------------------------------------------------------
     
     /**
@@ -211,13 +240,13 @@ if (typeof(PhpDebugBar) == 'undefined') {
      */
     var Tab = Widget.extend({
 
-        className: 'phpdebugbar-panel',
+        className: csscls('panel'),
 
         render: function() {
-            this.$tab = $('<a href="javascript:" class="phpdebugbar-tab" />');
-            this.bindAttr('title', $('<span class="text" />').appendTo(this.$tab));
+            this.$tab = $('<a href="javascript:" />').addClass(csscls('tab'));
+            this.bindAttr('title', $('<span />').addClass(csscls('text')).appendTo(this.$tab));
 
-            this.$badge = $('<span class="badge" />').appendTo(this.$tab);
+            this.$badge = $('<span />').addClass(csscls('badge')).appendTo(this.$tab);
             this.bindAttr('badge', function(value) {
                 if (value !== null) {
                     this.$badge.text(value);
@@ -259,7 +288,7 @@ if (typeof(PhpDebugBar) == 'undefined') {
 
         tagName: 'span',
 
-        className: 'phpdebugbar-indicator',
+        className: csscls('indicator'),
 
         defaults: {
             position: "right"
@@ -277,14 +306,14 @@ if (typeof(PhpDebugBar) == 'undefined') {
                 }
             });
 
-            this.bindAttr(['title', 'data'], $('<span class="text" />').appendTo(this.$el));
+            this.bindAttr(['title', 'data'], $('<span />').addClass(csscls('text')).appendTo(this.$el));
 
-            this.$tooltip = $('<span class="tooltip disabled" />').appendTo(this.$el);
+            this.$tooltip = $('<span />').addClass(csscls('tooltip disabled')).appendTo(this.$el);
             this.bindAttr('tooltip', function(tooltip) {
                 if (tooltip) {
-                    this.$tooltip.text(tooltip).removeClass('disabled');
+                    this.$tooltip.text(tooltip).removeClass(csscls('disabled'));
                 } else {
-                    this.$tooltip.addClass('disabled');
+                    this.$tooltip.addClass(csscls('disabled'));
                 }
             });
         }
@@ -327,7 +356,7 @@ if (typeof(PhpDebugBar) == 'undefined') {
             }
 
             var filename = data['__meta']['uri'].substr(data['__meta']['uri'].lastIndexOf('/') + 1);
-            var label = "#" + nb + " " + filename + suffix + ' (' + data['__meta']['datetime'] + ')';
+            var label = "#" + nb + " " + filename + suffix + ' (' + data['__meta']['datetime'].split(' ')[1] + ')';
             return label;
         }
 
@@ -348,7 +377,7 @@ if (typeof(PhpDebugBar) == 'undefined') {
      */
     var DebugBar = PhpDebugBar.DebugBar = Widget.extend({
 
-        className: "phpdebugbar minimized",
+        className: "phpdebugbar " + csscls('minimized'),
 
         options: {
             bodyPaddingBottom: true
@@ -371,9 +400,9 @@ if (typeof(PhpDebugBar) == 'undefined') {
         render: function() {
             var self = this;
             this.$el.appendTo('body');
-            this.$header = $('<div class="phpdebugbar-header" />').appendTo(this.$el);
-            var $body = this.$body = $('<div class="phpdebugbar-body" />').appendTo(this.$el);
-            this.$resizehdle = $('<div class="phpdebugbar-resize-handle" />').appendTo(this.$body);
+            this.$header = $('<div />').addClass(csscls('header')).appendTo(this.$el);
+            var $body = this.$body = $('<div />').addClass(csscls('body')).appendTo(this.$el);
+            this.$resizehdle = $('<div />').addClass(csscls('resize-handle')).appendTo(this.$body);
             this.recomputeBottomOffset();
 
             // dragging of resize handle
@@ -397,13 +426,13 @@ if (typeof(PhpDebugBar) == 'undefined') {
             });
             
             // minimize button
-            this.$minimizebtn = $('<a class="phpdebugbar-minimize-btn" href="javascript:"><i class="icon-remove"></i></a>').appendTo(this.$header);
+            this.$minimizebtn = $('<a href="javascript:" />').addClass(csscls('minimize-btn')).appendTo(this.$header);
             this.$minimizebtn.click(function() {
                 self.minimize();
             });
 
             // open button
-            this.$openbtn = $('<a class="phpdebugbar-open-btn" href="javascript:"><i class="icon-folder-open"></i></a>').appendTo(this.$header).hide();
+            this.$openbtn = $('<a href="javascript:" />').addClass(csscls('open-btn')).appendTo(this.$header).hide();
             this.$openbtn.click(function() {
                 self.openHandler.show(function(id, dataset) {
                     self.addDataSet(dataset, id, "(opened)");
@@ -412,7 +441,7 @@ if (typeof(PhpDebugBar) == 'undefined') {
             });
 
             // select box for data sets
-            this.$datasets = $('<select class="phpdebugbar-datasets-switcher" />').appendTo(this.$header);
+            this.$datasets = $('<select />').addClass(csscls('datasets-switcher')).appendTo(this.$header);
             this.$datasets.change(function() {
                 self.dataChangeHandler(self.datasets[this.value]);
                 self.showTab();
@@ -620,14 +649,14 @@ if (typeof(PhpDebugBar) == 'undefined') {
             this.$minimizebtn.show();
             this.recomputeBottomOffset();
 
-            $(this.$header).find('> .active').removeClass('active');
-            $(this.$body).find('> .active').removeClass('active');
+            $(this.$header).find('> .' + csscls('active')).removeClass(csscls('active'));
+            $(this.$body).find('> .' + csscls('active')).removeClass(csscls('active'));
 
-            this.controls[name].$tab.addClass('active');
-            this.controls[name].$el.addClass('active');
+            this.controls[name].$tab.addClass(csscls('active'));
+            this.controls[name].$el.addClass(csscls('active'));
             this.activePanelName = name;
 
-            this.$el.removeClass('minimized');
+            this.$el.removeClass(csscls('minimized'));
             localStorage.setItem('phpdebugbar-visible', '1');
             localStorage.setItem('phpdebugbar-tab', name);
         },
@@ -638,13 +667,13 @@ if (typeof(PhpDebugBar) == 'undefined') {
          * @this {DebugBar}
          */
         minimize: function() {
-            this.$header.find('> .active').removeClass('active');
+            this.$header.find('> .' + csscls('active')).removeClass(csscls('active'));
             this.$body.hide();
             this.$minimizebtn.hide();
             this.$resizehdle.hide();
             this.recomputeBottomOffset();
             localStorage.setItem('phpdebugbar-visible', '0');
-            this.$el.addClass('minimized');
+            this.$el.addClass(csscls('minimized'));
         },
 
         /**
@@ -653,7 +682,7 @@ if (typeof(PhpDebugBar) == 'undefined') {
          * @return {Boolean}
          */
         isMinimized: function() {
-            return this.$el.hasClass('minimized');
+            return this.$el.hasClass(csscls('minimized'));
         },
 
         /**
diff --git a/src/DebugBar/Resources/icons.png b/src/DebugBar/Resources/icons.png
new file mode 100644
index 0000000..5dc6d9c
Binary files /dev/null and b/src/DebugBar/Resources/icons.png differ
diff --git a/src/DebugBar/Resources/openhandler.css b/src/DebugBar/Resources/openhandler.css
index 5a74b44..fd5a61f 100644
--- a/src/DebugBar/Resources/openhandler.css
+++ b/src/DebugBar/Resources/openhandler.css
@@ -1,5 +1,5 @@
 div.phpdebugbar-openhandler-overlay {
-    position: absolute;
+    position: fixed;
     left: 0;
     top: 0;
     width: 100%;
@@ -10,7 +10,7 @@ div.phpdebugbar-openhandler-overlay {
 }
 
 div.phpdebugbar-openhandler {
-    position: absolute;
+    position: fixed;
     margin: auto;
     top: 0;
     bottom: 0;
@@ -26,7 +26,7 @@ div.phpdebugbar-openhandler {
     font-size: 14px;
     padding-bottom: 10px;
 }
-    div.phpdebugbar-openhandler .header {
+    div.phpdebugbar-openhandler .phpdebugbar-openhandler-header {
         background: #efefef url(php-icon.png) no-repeat 5px 4px;
         padding-left: 29px;
         min-height: 26px;
@@ -34,7 +34,7 @@ div.phpdebugbar-openhandler {
         color: #555;
         margin-bottom: 10px;
     }
-        div.phpdebugbar-openhandler .header a {
+        div.phpdebugbar-openhandler .phpdebugbar-openhandler-header a {
             font-size: 14px;
             color: #555;
             text-decoration: none;
@@ -50,11 +50,11 @@ div.phpdebugbar-openhandler {
             text-align: center;
             border-bottom: 1px solid #ddd;
         }
-    div.phpdebugbar-openhandler .actions {
+    div.phpdebugbar-openhandler .phpdebugbar-openhandler-actions {
         text-align: center;
         padding: 7px 0;
     }
-        div.phpdebugbar-openhandler .actions a {
+        div.phpdebugbar-openhandler .phpdebugbar-openhandler-actions a {
             margin: 0 10px;
             color: #555;
         }
\ No newline at end of file
diff --git a/src/DebugBar/Resources/openhandler.js b/src/DebugBar/Resources/openhandler.js
index a28d1e9..3dc1740 100644
--- a/src/DebugBar/Resources/openhandler.js
+++ b/src/DebugBar/Resources/openhandler.js
@@ -6,6 +6,10 @@ if (typeof(PhpDebugBar) == 'undefined') {
 
 (function($) {
 
+    var csscls = function(cls) {
+        return PhpDebugBar.utils.csscls(cls, 'phpdebugbar-openhandler-');
+    };
+
     PhpDebugBar.OpenHandler = PhpDebugBar.Widget.extend({
 
         className: 'phpdebugbar-openhandler',
@@ -20,9 +24,9 @@ if (typeof(PhpDebugBar) == 'undefined') {
             this.$el.appendTo('body').hide();
             this.$closebtn = $('<a href="javascript:"><i class="icon-remove"></i></a>');
             this.$table = $('<tbody />');
-            $('<div class="header">PHP DebugBar | Open</div>').append(this.$closebtn).appendTo(this.$el);
+            $('<div>PHP DebugBar | Open</div>').addClass(csscls('header')).append(this.$closebtn).appendTo(this.$el);
             $('<table><thead><tr><th>ID</th><th>URL</th><th>Date</th><th>IP</th></tr></thead></table>').append(this.$table).appendTo(this.$el);
-            this.$actions = $('<div class="actions" />').appendTo(this.$el);
+            this.$actions = $('<div />').addClass(csscls('actions')).appendTo(this.$el);
 
             this.$closebtn.on('click', function() {
                 self.hide();
@@ -55,7 +59,7 @@ if (typeof(PhpDebugBar) == 'undefined') {
                     });
                 });
 
-            this.$overlay = $('<div class="phpdebugbar-openhandler-overlay" />').hide().appendTo('body');
+            this.$overlay = $('<div />').addClass(csscls('overlay')).hide().appendTo('body');
             this.$overlay.on('click', function() {
                 self.hide();
             });
diff --git a/src/DebugBar/Resources/widgets.css b/src/DebugBar/Resources/widgets.css
index 2385c9d..5aab4ae 100644
--- a/src/DebugBar/Resources/widgets.css
+++ b/src/DebugBar/Resources/widgets.css
@@ -5,12 +5,12 @@ ul.phpdebugbar-widgets-list {
   list-style: none;
   font-family: monospace;
 }
-  ul.phpdebugbar-widgets-list li.list-item {
+  ul.phpdebugbar-widgets-list li.phpdebugbar-widgets-list-item {
     padding: 3px 6px;
     border-bottom: 1px solid #eee;
     position: relative;
   }
-  ul.phpdebugbar-widgets-list li.list-item:hover {
+  ul.phpdebugbar-widgets-list li.phpdebugbar-widgets-list-item:hover {
     background: #fafafa;
   }
 
@@ -23,25 +23,25 @@ div.phpdebugbar-widgets-messages {
   div.phpdebugbar-widgets-messages div.phpdebugbar-widgets-list {
     padding-bottom: 20px;
   }
-  div.phpdebugbar-widgets-messages li.list-item span.value.warning:before {
+  div.phpdebugbar-widgets-messages li.phpdebugbar-widgets-list-item span.phpdebugbar-widgets-value.phpdebugbar-widgets-warning:before {
     font-family: FontAwesome;
     content: "\f071";
     margin-right: 8px;
     font-size: 11px;
     color: #ecb03d;
   }
-  div.phpdebugbar-widgets-messages li.list-item span.value.error {
+  div.phpdebugbar-widgets-messages li.phpdebugbar-widgets-list-item span.phpdebugbar-widgets-value.phpdebugbar-widgets-error {
     color: red;
   }
-  div.phpdebugbar-widgets-messages li.list-item span.value.error:before {
+  div.phpdebugbar-widgets-messages li.phpdebugbar-widgets-list-item span.phpdebugbar-widgets-value.phpdebugbar-widgets-error:before {
     font-family: FontAwesome;
     content: "\f057";
     margin-right: 8px;
     font-size: 11px;
     color: red;
   }
-  div.phpdebugbar-widgets-messages li.list-item span.collector,
-  div.phpdebugbar-widgets-messages li.list-item span.label {
+  div.phpdebugbar-widgets-messages li.phpdebugbar-widgets-list-item span.phpdebugbar-widgets-collector,
+  div.phpdebugbar-widgets-messages li.phpdebugbar-widgets-list-item span.phpdebugbar-widgets-label {
     float: right;
     font-size: 12px;
     padding: 2px 4px;
@@ -52,27 +52,27 @@ div.phpdebugbar-widgets-messages {
     background: none;
     font-weight: normal;
   }
-  div.phpdebugbar-widgets-messages li.list-item span.collector {
+  div.phpdebugbar-widgets-messages li.phpdebugbar-widgets-list-item span.phpdebugbar-widgets-collector {
     color: #555;
     font-style: italic;
   }
-  div.phpdebugbar-widgets-messages div.toolbar {
+  div.phpdebugbar-widgets-messages div.phpdebugbar-widgets-toolbar {
     position: fixed;
     bottom: 0;
     width: 100%;
     background: #fff;
   }
-    div.phpdebugbar-widgets-messages div.toolbar input {
+    div.phpdebugbar-widgets-messages div.phpdebugbar-widgets-toolbar input {
       border: 0;
       margin: 0;
       margin-left: 7px;
       width: 50%;
       box-shadow: none;
     }
-    div.phpdebugbar-widgets-messages div.toolbar input:focus {
+    div.phpdebugbar-widgets-messages div.phpdebugbar-widgets-toolbar input:focus {
       outline: none;
     }
-      div.phpdebugbar-widgets-messages div.toolbar a.filter {
+      div.phpdebugbar-widgets-messages div.phpdebugbar-widgets-toolbar a.phpdebugbar-widgets-filter {
         float: right;
         font-size: 12px;
         padding: 2px 4px;
@@ -82,7 +82,7 @@ div.phpdebugbar-widgets-messages {
         color: #fff;
         text-decoration: none;
       }
-      div.phpdebugbar-widgets-messages div.toolbar a.filter.excluded {
+      div.phpdebugbar-widgets-messages div.phpdebugbar-widgets-toolbar a.phpdebugbar-widgets-filter.phpdebugbar-widgets-excluded {
         background: #eee;
         color: #888;
       }
@@ -128,7 +128,7 @@ ul.phpdebugbar-widgets-timeline {
   ul.phpdebugbar-widgets-timeline li:hover {
     background: #fafafa;
   }
-    ul.phpdebugbar-widgets-timeline li span.label {
+    ul.phpdebugbar-widgets-timeline li span.phpdebugbar-widgets-label {
       position: absolute;
       font-size: 12px;
       font-family: monospace;
@@ -139,7 +139,7 @@ ul.phpdebugbar-widgets-timeline {
       text-shadow: none;
       font-weight: normal;
     }
-    ul.phpdebugbar-widgets-timeline li span.value {
+    ul.phpdebugbar-widgets-timeline li span.phpdebugbar-widgets-value {
       display: block; 
       position: absolute;
       height: 10px;
@@ -150,21 +150,21 @@ ul.phpdebugbar-widgets-timeline {
 
 /* -------------------------------------- */
 
-div.phpdebugbar-widgets-exceptions li.list-item {
+div.phpdebugbar-widgets-exceptions li.phpdebugbar-widgets-list-item {
   cursor: pointer;
 }
-  div.phpdebugbar-widgets-exceptions li.list-item span.message {
+  div.phpdebugbar-widgets-exceptions li.phpdebugbar-widgets-list-item span.phpdebugbar-widgets-message {
     display: block;
     color: red;
   }
 
-  div.phpdebugbar-widgets-exceptions li.list-item span.filename {
+  div.phpdebugbar-widgets-exceptions li.phpdebugbar-widgets-list-item span.phpdebugbar-widgets-filename {
     display: block;
     font-style: italic;
     color: #555;
   }
 
-  div.phpdebugbar-widgets-exceptions li.list-item span.type {
+  div.phpdebugbar-widgets-exceptions li.phpdebugbar-widgets-list-item span.phpdebugbar-widgets-type {
     display: block;
     position: absolute;
     right: 4px;
@@ -172,7 +172,7 @@ div.phpdebugbar-widgets-exceptions li.list-item {
     font-weight: bold;
   }
 
-  div.phpdebugbar-widgets-exceptions li.list-item div.file {
+  div.phpdebugbar-widgets-exceptions li.phpdebugbar-widgets-list-item div.phpdebugbar-widgets-file {
     display: none;
     margin: 10px;
     padding: 5px;
@@ -182,7 +182,7 @@ div.phpdebugbar-widgets-exceptions li.list-item {
 
 /* -------------------------------------- */
 
-div.phpdebugbar-widgets-sqlqueries .status {
+div.phpdebugbar-widgets-sqlqueries .phpdebugbar-widgets-status {
   font-family: monospace;
   padding: 6px 6px;
   border-bottom: 1px solid #ddd;
@@ -191,45 +191,45 @@ div.phpdebugbar-widgets-sqlqueries .status {
   background: #fafafa;
 }
 
-div.phpdebugbar-widgets-sqlqueries li.list-item.error {
+div.phpdebugbar-widgets-sqlqueries li.phpdebugbar-widgets-list-item.phpdebugbar-widgets-error {
   color: red;
 }
 
-div.phpdebugbar-widgets-sqlqueries span.duration,
-div.phpdebugbar-widgets-sqlqueries span.memory,
-div.phpdebugbar-widgets-sqlqueries span.row-count,
-div.phpdebugbar-widgets-sqlqueries span.stmt-id {
+div.phpdebugbar-widgets-sqlqueries span.phpdebugbar-widgets-duration,
+div.phpdebugbar-widgets-sqlqueries span.phpdebugbar-widgets-memory,
+div.phpdebugbar-widgets-sqlqueries span.phpdebugbar-widgets-row-count,
+div.phpdebugbar-widgets-sqlqueries span.phpdebugbar-widgets-stmt-id {
   float: right;
   margin-left: 8px;
   color: #888;
 }
-div.phpdebugbar-widgets-sqlqueries div.status span.duration,
-div.phpdebugbar-widgets-sqlqueries div.status span.memory,
-div.phpdebugbar-widgets-sqlqueries div.status span.row-count,
-div.phpdebugbar-widgets-sqlqueries div.status span.stmt-id {
+div.phpdebugbar-widgets-sqlqueries div.phpdebugbar-widgets-status span.phpdebugbar-widgets-duration,
+div.phpdebugbar-widgets-sqlqueries div.phpdebugbar-widgets-status span.phpdebugbar-widgets-memory,
+div.phpdebugbar-widgets-sqlqueries div.phpdebugbar-widgets-status span.phpdebugbar-widgets-row-count,
+div.phpdebugbar-widgets-sqlqueries div.phpdebugbar-widgets-status span.phpdebugbar-widgets-stmt-id {
   color: #555;
 }
-div.phpdebugbar-widgets-sqlqueries span.duration:before,
-div.phpdebugbar-widgets-sqlqueries span.memory:before,
-div.phpdebugbar-widgets-sqlqueries span.row-count:before,
-div.phpdebugbar-widgets-sqlqueries span.stmt-id:before {
+div.phpdebugbar-widgets-sqlqueries span.phpdebugbar-widgets-duration:before,
+div.phpdebugbar-widgets-sqlqueries span.phpdebugbar-widgets-memory:before,
+div.phpdebugbar-widgets-sqlqueries span.phpdebugbar-widgets-row-count:before,
+div.phpdebugbar-widgets-sqlqueries span.phpdebugbar-widgets-stmt-id:before {
   font-family: FontAwesome;
   margin-right: 4px;
   font-size: 12px;
 }
-div.phpdebugbar-widgets-sqlqueries span.duration:before {
+div.phpdebugbar-widgets-sqlqueries span.phpdebugbar-widgets-duration:before {
   content: "\f017";
 }
-div.phpdebugbar-widgets-sqlqueries span.memory:before {
+div.phpdebugbar-widgets-sqlqueries span.phpdebugbar-widgets-memory:before {
   content: "\f085";
 }
-div.phpdebugbar-widgets-sqlqueries span.row-count:before {
+div.phpdebugbar-widgets-sqlqueries span.phpdebugbar-widgets-row-count:before {
   content: "\f0ce";
 }
-div.phpdebugbar-widgets-sqlqueries span.stmt-id:before {
+div.phpdebugbar-widgets-sqlqueries span.phpdebugbar-widgets-stmt-id:before {
   content: "\f08d";
 }
-div.phpdebugbar-widgets-sqlqueries table.params {
+div.phpdebugbar-widgets-sqlqueries table.phpdebugbar-widgets-params {
   display: none;
   width: 70%;
   margin: 10px;
@@ -237,23 +237,23 @@ div.phpdebugbar-widgets-sqlqueries table.params {
   font-family: monospace;
   border-collapse: collapse;
 }
-  div.phpdebugbar-widgets-sqlqueries table.params td {
+  div.phpdebugbar-widgets-sqlqueries table.phpdebugbar-widgets-params td {
     border: 1px solid #ddd;
     text-align: center;
   }
-  div.phpdebugbar-widgets-sqlqueries table.params .name {
+  div.phpdebugbar-widgets-sqlqueries table.phpdebugbar-widgets-params .phpdebugbar-widgets-name {
     width: 20%;
     font-weight: bold;
   }
 
-div.phpdebugbar-widgets-sqlqueries li.list-item span.error {
+div.phpdebugbar-widgets-sqlqueries li.phpdebugbar-widgets-list-item span.phpdebugbar-widgets-error {
   display: block;
   font-weight: bold;
 }
 
 /* -------------------------------------- */
 
-div.phpdebugbar-widgets-templates div.status {
+div.phpdebugbar-widgets-templates div.phpdebugbar-widgets-status {
   font-family: monospace;
   padding: 6px 6px;
   border-bottom: 1px solid #ddd;
@@ -262,28 +262,28 @@ div.phpdebugbar-widgets-templates div.status {
   background: #fafafa;
 }
 
-div.phpdebugbar-widgets-templates span.render_time {
+div.phpdebugbar-widgets-templates span.phpdebugbar-widgets-render_time {
   float: right;
 }
-div.phpdebugbar-widgets-templates span.render_time:before {
+div.phpdebugbar-widgets-templates span.phpdebugbar-widgets-render_time:before {
   content: "\f017";
   font-family: FontAwesome;
   font-size: 12px;
   margin-right: 4px;
 }
 
-div.phpdebugbar-widgets-templates div.status span.render_time {
+div.phpdebugbar-widgets-templates div.phpdebugbar-widgets-status span.phpdebugbar-widgets-render_time {
   color: #555;
 }
 
 
 /* -------------------------------------- */
 
-div.phpdebugbar-widgets-mails span.subject {
+div.phpdebugbar-widgets-mails span.phpdebugbar-widgets-subject {
   display: block;
 }
 
-div.phpdebugbar-widgets-mails li.list-item pre.headers {
+div.phpdebugbar-widgets-mails li.phpdebugbar-widgets-list-item pre.phpdebugbar-widgets-headers {
   display: none;
   margin: 10px;
   padding: 5px;
diff --git a/src/DebugBar/Resources/widgets.js b/src/DebugBar/Resources/widgets.js
index 56610c1..dc597f1 100644
--- a/src/DebugBar/Resources/widgets.js
+++ b/src/DebugBar/Resources/widgets.js
@@ -39,6 +39,16 @@ if (typeof(PhpDebugBar) == 'undefined') {
         return value;
     };
 
+    /**
+     * Returns a prefixed css class name
+     * 
+     * @param {String} cls
+     * @return {String}
+     */
+    var csscls = function(cls) {
+        return PhpDebugBar.utils.csscls(cls, 'phpdebugbar-widgets-');
+    };
+
 
     // ------------------------------------------------------------------
     // Generic widgets
@@ -55,7 +65,7 @@ if (typeof(PhpDebugBar) == 'undefined') {
 
         tagName: 'ul',
 
-        className: 'phpdebugbar-widgets-list',
+        className: csscls('list'),
 
         initialize: function(options) {
             if (!options['itemRenderer']) {
@@ -73,7 +83,7 @@ if (typeof(PhpDebugBar) == 'undefined') {
 
                 var data = this.get('data');
                 for (var i = 0; i < data.length; i++) {
-                    var li = $('<li class="list-item" />').appendTo(this.$el);
+                    var li = $('<li />').addClass(csscls('list-item')).appendTo(this.$el);
                     this.get('itemRenderer')(li, data[i]);
                 }
             });
@@ -104,7 +114,7 @@ if (typeof(PhpDebugBar) == 'undefined') {
 
         tagName: 'dl',
 
-        className: 'phpdebugbar-widgets-kvlist',
+        className: csscls('kvlist'),
 
         render: function() {
             this.bindAttr(['itemRenderer', 'data'], function() {
@@ -115,8 +125,8 @@ if (typeof(PhpDebugBar) == 'undefined') {
 
                 var self = this;
                 $.each(this.get('data'), function(key, value) {
-                    var dt = $('<dt class="key" />').appendTo(self.$el);
-                    var dd = $('<dd class="value" />').appendTo(self.$el);
+                    var dt = $('<dt />').addClass(csscls('key')).appendTo(self.$el);
+                    var dd = $('<dd />').addClass(csscls('value')).appendTo(self.$el);
                     self.get('itemRenderer')(dt, dd, key, value);
                 });
             });
@@ -148,7 +158,7 @@ if (typeof(PhpDebugBar) == 'undefined') {
      */
     var VariableListWidget = PhpDebugBar.Widgets.VariableListWidget = KVListWidget.extend({
 
-        className: 'phpdebugbar-widgets-kvlist phpdebugbar-widgets-varlist',
+        className: csscls('kvlist varlist'),
 
         itemRenderer: function(dt, dd, key, value) {
             dt.text(key);
@@ -158,10 +168,10 @@ if (typeof(PhpDebugBar) == 'undefined') {
                 v = v.substr(0, 100) + "...";
             }
             dd.text(v).click(function() {
-                if (dd.hasClass('pretty')) {
-                    dd.text(v).removeClass('pretty');
+                if (dd.hasClass(csscls('pretty'))) {
+                    dd.text(v).removeClass(csscls('pretty'));
                 } else {
-                    dd.html(htmlize(value)).addClass('pretty');
+                    dd.html(htmlize(value)).addClass(csscls('pretty'));
                 }
             });
         }
@@ -180,7 +190,7 @@ if (typeof(PhpDebugBar) == 'undefined') {
 
         tagName: 'iframe',
 
-        className: 'phpdebugbar-widgets-iframe',
+        className: csscls('iframe'),
 
         render: function() {
             this.$el.attr({
@@ -209,7 +219,7 @@ if (typeof(PhpDebugBar) == 'undefined') {
      */
     var MessagesWidget = PhpDebugBar.Widgets.MessagesWidget = PhpDebugBar.Widget.extend({
 
-        className: 'phpdebugbar-widgets-messages',
+        className: csscls('messages'),
 
         render: function() {
             var self = this;
@@ -220,28 +230,28 @@ if (typeof(PhpDebugBar) == 'undefined') {
                     m = m.substr(0, 100) + "...";
                 }
 
-                var val = $('<span class="value" />').text(m).appendTo(li);
+                var val = $('<span />').addClass(csscls('value')).text(m).appendTo(li);
                 if (!value.is_string || value.message.length > 100) {
                     li.css('cursor', 'pointer').click(function() {
-                        if (val.hasClass('pretty')) {
-                            val.text(m).removeClass('pretty');
+                        if (val.hasClass(csscls('pretty'))) {
+                            val.text(m).removeClass(csscls('pretty'));
                         } else {
-                            val.html(htmlize(value.message)).addClass('pretty');
+                            val.html(htmlize(value.message)).addClass(csscls('pretty'));
                         }
                     });
                 }
 
                 if (value.label) {
-                    val.addClass(value.label);
-                    $('<span class="label" />').text(value.label).appendTo(li);
+                    val.addClass(csscls(value.label));
+                    $('<span />').addClass(csscls('label')).text(value.label).appendTo(li);
                 }
                 if (value.collector) {
-                    $('<span class="collector" />').text(value.collector).appendTo(li);
+                    $('<span />').addClass(csscls('collector')).text(value.collector).appendTo(li);
                 }
             }});
 
             this.$list.$el.appendTo(this.$el);
-            this.$toolbar = $('<div class="toolbar"><i class="icon-search"></i></div>').appendTo(this.$el);
+            this.$toolbar = $('<div><i class="icon-search"></i></div>').addClass(csscls('toolbar')).appendTo(this.$el);
 
             $('<input type="text" />')
                 .on('change', function() { self.set('search', this.value); })
@@ -249,7 +259,7 @@ if (typeof(PhpDebugBar) == 'undefined') {
 
             this.bindAttr('data', function(data) {
                 this.set({ exclude: [], search: '' });
-                this.$toolbar.find('.filter').remove();
+                this.$toolbar.find(csscls('.filter')).remove();
 
                 var filters = [], self = this;
                 for (var i = 0; i < data.length; i++) {
@@ -257,7 +267,8 @@ if (typeof(PhpDebugBar) == 'undefined') {
                         continue;
                     }
                     filters.push(data[i].label);
-                    $('<a class="filter" href="javascript:" />')
+                    $('<a href="javascript:" />')
+                        .addClass(csscls('filter'))
                         .text(data[i].label)
                         .attr('rel', data[i].label)
                         .on('click', function() { self.onFilterClick(this); })
@@ -282,10 +293,10 @@ if (typeof(PhpDebugBar) == 'undefined') {
         },
 
         onFilterClick: function(el) {
-            $(el).toggleClass('excluded');
+            $(el).toggleClass(csscls('excluded'));
 
             var excludedLabels = [];
-            this.$toolbar.find('.filter.excluded').each(function() {
+            this.$toolbar.find(csscls('.filter') + csscls('.excluded')).each(function() {
                 excludedLabels.push(this.rel);
             });
 
@@ -306,19 +317,19 @@ if (typeof(PhpDebugBar) == 'undefined') {
 
         tagName: 'ul',
 
-        className: 'phpdebugbar-widgets-timeline',
+        className: csscls('timeline'),
 
         render: function() {
             this.bindAttr('data', function(data) {
                 this.$el.empty();
                 if (data.measures) {
                     for (var i = 0; i < data.measures.length; i++) {
-                        var li = $('<li class="measure" />');
-                        li.append($('<span class="value" />').css({
+                        var li = $('<li />').addClass(csscls('measure'));
+                        li.append($('<span />').addClass(csscls('value')).css({
                             left: Math.round(data.measures[i].relative_start * 100 / data.duration) + "%",
                             width: Math.round(data.measures[i].duration * 100 / data.duration) + "%"
                         }));
-                        li.append($('<span class="label" />').text(data.measures[i].label + " (" + data.measures[i].duration_str + ")"));
+                        li.append($('<span />').addClass(csscls('label')).text(data.measures[i].label + " (" + data.measures[i].duration_str + ")"));
                         this.$el.append(li);
                     }
                 }
@@ -337,19 +348,19 @@ if (typeof(PhpDebugBar) == 'undefined') {
      */
     var ExceptionsWidget = PhpDebugBar.Widgets.ExceptionsWidget = PhpDebugBar.Widget.extend({
 
-        className: 'phpdebugbar-widgets-exceptions',
+        className: csscls('exceptions'),
 
         render: function() {
             this.$list = new ListWidget({ itemRenderer: function(li, e) {
-                $('<span class="message" />').text(e.message).appendTo(li);
+                $('<span />').addClass(csscls('message')).text(e.message).appendTo(li);
                 if (e.file) {
-                    $('<span class="filename" />').text(e.file + "#" + e.line).appendTo(li);
+                    $('<span />').addClass(csscls('filename')).text(e.file + "#" + e.line).appendTo(li);
                 }
                 if (e.type) {
-                    $('<span class="type" />').text(e.type).appendTo(li);
+                    $('<span />').addClass(csscls('type')).text(e.type).appendTo(li);
                 }
                 if (e.surrounding_lines) {
-                    var file = $('<div class="file" />').html(htmlize(e.surrounding_lines.join(""))).appendTo(li);
+                    var file = $('<div />').addClass(csscls('file')).html(htmlize(e.surrounding_lines.join(""))).appendTo(li);
                     li.click(function() {
                         if (file.is(':visible')) {
                             file.hide();
@@ -364,7 +375,7 @@ if (typeof(PhpDebugBar) == 'undefined') {
             this.bindAttr('data', function(data) {
                 this.$list.set('data', data);
                 if (data.length == 1) {
-                    this.$list.$el.children().first().find('.file').show();
+                    this.$list.$el.children().first().find(csscls('.file')).show();
                 }
             });
 
@@ -382,35 +393,34 @@ if (typeof(PhpDebugBar) == 'undefined') {
      */
     var SQLQueriesWidget = PhpDebugBar.Widgets.SQLQueriesWidget = PhpDebugBar.Widget.extend({
 
-        className: 'phpdebugbar-widgets-sqlqueries',
+        className: csscls('sqlqueries'),
 
         render: function() {
-            this.$status = $('<div class="status" />').appendTo(this.$el);
+            this.$status = $('<div />').addClass(csscls('status')).appendTo(this.$el);
 
             this.$list = new ListWidget({ itemRenderer: function(li, stmt) {
-                $('<span class="sql" />').text(stmt.sql).appendTo(li);
+                $('<span />').addClass(csscls('sql')).text(stmt.sql).appendTo(li);
                 if (stmt.duration_str) {
-                    $('<span class="duration" title="Duration" />').text(stmt.duration_str).appendTo(li);
+                    $('<span title="Duration" />').addClass(csscls('duration')).text(stmt.duration_str).appendTo(li);
                 }
                 if (stmt.memory_str) {
-                    $('<span class="memory" title="Peak memory usage" />').text(stmt.memory_str).appendTo(li);
+                    $('<span title="Peak memory usage" />').addClass(csscls('memory')).text(stmt.memory_str).appendTo(li);
                 }
                 if (typeof(stmt.is_success) != 'undefined' && !stmt.is_success) {
-                    li.addClass('error');
-                    li.append($('<span class="error" />').text("[" + stmt.error_code + "] " + stmt.error_message));
+                    li.addClass(csscls('error'));
+                    li.append($('<span />').addClass(csscls('error')).text("[" + stmt.error_code + "] " + stmt.error_message));
                 } else if (typeof(stmt.row_count) != 'undefined') {
-                    $('<span class="row-count" title="Row count" />').text(stmt.row_count).appendTo(li);
+                    $('<span title="Row count" />').addClass(csscls('row-count')).text(stmt.row_count).appendTo(li);
                 }
                 if (typeof(stmt.stmt_id) != 'undefined' && stmt.stmt_id) {
-                    $('<span class="stmt-id" title="Prepared statement ID" />').text(stmt.stmt_id).appendTo(li);
+                    $('<span title="Prepared statement ID" />').addClass(csscls('stmt-id')).text(stmt.stmt_id).appendTo(li);
                 }
                 if (stmt.params && !$.isEmptyObject(stmt.params)) {
-                    var table = '<table class="params"><tr><th colspan="2">Params</th></tr>';
+                    var table = $('<table><tr><th colspan="2">Params</th></tr></table>').addClass(csscls('params')).appendTo(li);
                     for (var key in stmt.params) {
-                        table += '<tr><td class="name">' + key + '</td><td class="value">' + stmt.params[key] + '</td></tr>';
+                        table.append('<tr><td class="' + csscls('name') + '">' + key + '</td><td class="' + csscls('value') + 
+                                     '">' + stmt.params[key] + '</td></tr>');
                     }
-                    table += '</table>';
-                    table = $(table).appendTo(li);
                     li.css('cursor', 'pointer').click(function() {
                         if (table.is(':visible')) {
                             table.hide();
@@ -431,10 +441,10 @@ if (typeof(PhpDebugBar) == 'undefined') {
                     t.append(", " + data.nb_failed_statements + " of which failed");
                 }
                 if (data.accumulated_duration_str) {
-                    this.$status.append($('<span class="duration" title="Accumulated duration" />').text(data.accumulated_duration_str));
+                    this.$status.append($('<span title="Accumulated duration" />').addClass(csscls('duration')).text(data.accumulated_duration_str));
                 }
                 if (data.peak_memory_usage_str) {
-                    this.$status.append($('<span class="memory" title="Peak memory usage" />').text(data.peak_memory_usage_str));
+                    this.$status.append($('<span title="Peak memory usage" />').addClass(csscls('memory')).text(data.peak_memory_usage_str));
                 }
             });
         }
@@ -451,15 +461,15 @@ if (typeof(PhpDebugBar) == 'undefined') {
      */
     var TemplatesWidget = PhpDebugBar.Widgets.TemplatesWidget = PhpDebugBar.Widget.extend({
 
-        className: 'phpdebugbar-widgets-templates',
+        className: csscls('templates'),
 
         render: function() {
-            this.$status = $('<div class="status" />').appendTo(this.$el);
+            this.$status = $('<div />').addClass(csscls('status')).appendTo(this.$el);
 
             this.$list = new ListWidget({ itemRenderer: function(li, tpl) {
-                $('<span class="name" />').text(tpl.name).appendTo(li);
+                $('<span />').addClass(csscls('name')).text(tpl.name).appendTo(li);
                 if (tpl.render_time_str) {
-                    $('<span class="render_time" title="Render time" />').text(tpl.render_time_str).appendTo(li);
+                    $('<span title="Render time" />').addClass(csscls('render_time')).text(tpl.render_time_str).appendTo(li);
                 }
             }});
             this.$list.$el.appendTo(this.$el);
@@ -468,7 +478,7 @@ if (typeof(PhpDebugBar) == 'undefined') {
                 this.$list.set('data', data.templates);
                 this.$status.empty().append($('<span />').text(data.templates.length + " templates were rendered"));
                 if (data.accumulated_render_time_str) {
-                    this.$status.append($('<span class="render_time" title="Accumulated render time" />').text(data.accumulated_render_time_str));
+                    this.$status.append($('<span title="Accumulated render time" />').addClass(csscls('render_time')).text(data.accumulated_render_time_str));
                 }
             });
         }
@@ -485,14 +495,14 @@ if (typeof(PhpDebugBar) == 'undefined') {
      */
     var MailsWidget = PhpDebugBar.Widgets.MailsWidget = PhpDebugBar.Widget.extend({
 
-        className: 'phpdebugbar-widgets-mails',
+        className: csscls('mails'),
 
         render: function() {
             this.$list = new ListWidget({ itemRenderer: function(li, mail) {
-                $('<span class="subject" />').text(mail.subject).appendTo(li);
-                $('<span class="to" />').text(mail.to).appendTo(li);
+                $('<span />').addClass(csscls('subject')).text(mail.subject).appendTo(li);
+                $('<span />').addClass(csscls('to')).text(mail.to).appendTo(li);
                 if (mail.headers) {
-                    var headers = $('<pre class="headers" />').appendTo(li);
+                    var headers = $('<pre />').addClass(csscls('headers')).appendTo(li);
                     $('<code />').text(mail.headers).appendTo(headers);
                     li.click(function() {
                         if (headers.is(':visible')) {