Styled the breadcrumbs bar

Change-Id: I1930e95532fed2e1842b59c0bec73e6fa09988b3

@@ -52,15 +52,35 @@
 }
 
 #breadcrumbs {
+    font-size: 13px;
+    background: #f5f5f5;
+    border-bottom: 1px solid #c7c7c0;
     position: absolute;
-    padding: 10px 30px;
-    top: 54px;
+    padding: 10px 20px;
+    left: 0;
+    top: 48px;
     width: 100%;
 }
 
 #breadcrumbs .breadcrumb {
     display: inline-block;
-    margin-right: 20px;
+    margin-right: 5px;
+}
+
+#breadcrumbs .breadcrumb a {
+    cursor: pointer;
+}
+
+#breadcrumbs .breadcrumb:after {
+    content: '»';
+    pointer-events: none;
+    color: #353535;
+    line-height: 20px;
+    margin-left: 5px;
+}
+
+#breadcrumbs .breadcrumb:last-child:after {
+    display: none;
 }
 
 #topo2-p-instance.floatpanel {

@@ -37,3 +37,5 @@
         notifier="notifyResize()">
     </svg>
 </div>
+
+<div id="breadcrumbs"></div>

@@ -32,7 +32,8 @@
     function init() {
         $log.debug("Topo2BreadcrumbService Initiated");
         breadcrumbs = [];
-        breadcrumbContainer = d3.select('#breadcrumbs');
+        breadcrumbContainer = d3.select('#breadcrumbs').append('span')
+            .text('Regions: ');
         render();
     }
 
@@ -69,7 +70,7 @@
             .append('div')
                 .attr('class', 'breadcrumb')
                 .on('click', navigateToRegion)
-            .append('text')
+            .append('a')
                 .text(function (d) {
                     return d.name;
                 });

@@ -238,7 +238,6 @@
          ng-controller="NavCtrl as navCtrl"
          ng-include="'nav.html'"></div>
 
-    <div id="breadcrumbs"></div>
     <div id="floatpanels"></div>
     <div id="alerts"></div>
     <div id="tooltip"></div>