--- a/cms/app-client/app/components/discourses-component.js	Fri Jun 24 15:05:38 2016 +0200
+++ b/cms/app-client/app/components/discourses-component.js	Fri Jun 24 15:26:26 2016 +0200
@@ -6,6 +6,8 @@
 
 export default Ember.Component.extend({
 
+    classNames: ['discourses-component'],
+
     constants: Ember.inject.service(),
     filter: Ember.inject.service(),
 
@@ -23,14 +25,11 @@
                 .size([width, height])
                 .padding(250);
 
-            var element = d3.select('#' + self.get('elementId'))
-                .style("position", "relative");
+            var element = d3.select('#' + self.get('elementId'));
 
             var bubbles = bubble.nodes(self.createNodes(discourses));
 
             var caption = element.append("div")
-                .style("position", "absolute")
-                .style("transform-origin", "50% 50% 0px")
                 .attr("class", "caption");
 
             var caption_nodes = caption.selectAll(".node")
@@ -42,7 +41,6 @@
             var item = caption.selectAll(".item")
                 .style("width", function(d) { return Math.max(10 + d.r, d.r) * 2 + 'px'; })
                 .style("height", function(d) { return Math.max(10 + d.r, d.r) * 2 + 'px'; })
-                .style("position", "absolute")
                 .style("left", function(d) { return d.x - Math.max(10 + d.r, d.r) + 'px'; })
                 .style("top", function(d) { return d.y - Math.max(10 + d.r, d.r) + 'px'; })
                 .on('click', function(d) {
@@ -51,11 +49,8 @@
             
             item.append("span")
                 .text(function(d) { return d.name; })
-                .style("text-align", "center")
                 .style("display", function(d) { return d.children ? 'none' : 'inline-block'; })
                 .style("width", function() { return Ember.$(this).parent().width() > Ember.$(this).width() ? Ember.$(this).parent().width() + 'px' : ''; })
-                .style("text-transform", "capitalize")
-                .style("font-size", "15px")
                 .style("margin-left", function() { return ( Ember.$(this).width() > Ember.$(this).parent().width() ? - ( Ember.$(this).width() / 2 ) + ( Ember.$(this).parent().width() / 2 ) : 0 ) + 'px'; })
                 .style("margin-top", function() { return Ember.$(this).parent().height() / 2 - Ember.$(this).height() / 2 + 'px'; });
 
@@ -79,7 +74,7 @@
             leaf.append("circle")
                 .attr("r", function(d) { return Math.max(7.5 + d.r * 2, d.r * 2); })
                 .attr("fill", function(d) { return d.fill; })
-                .attr("stroke", function() { return "#000"; });
+                .attr("stroke", function() { return "#13212d"; });
 
             element.style("height", height + "px");
         });

--- a/cms/app-client/app/styles/app.scss	Fri Jun 24 15:05:38 2016 +0200
+++ b/cms/app-client/app/styles/app.scss	Fri Jun 24 15:26:26 2016 +0200
@@ -27,6 +27,7 @@
     @import 'components/filtering-component';
     @import 'components/filter-component';
     @import 'components/playlist-component';
+    @import 'components/discourses-component';
 }
 
 h1, h2, h3, h4, h5, h6 {

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/cms/app-client/app/styles/components/discourses-component.scss	Fri Jun 24 15:26:26 2016 +0200
@@ -0,0 +1,16 @@
+.discourses-component {
+	position: relative;
+}
+
+.discourses-component .caption .item,
+.discourses-component .caption .node {
+	cursor: pointer;
+}
+
+.discourses-component .caption .item {
+	color: #13212d;
+	text-align: center;
+	font-size: 12px;
+	text-transform: capitalize;
+	position: absolute;
+}
\ No newline at end of file