diff --git a/web/app/riot/riot.component.scss b/web/app/riot/riot.component.scss
index 7f3fd9d..dbc8212 100644
--- a/web/app/riot/riot.component.scss
+++ b/web/app/riot/riot.component.scss
@@ -1,10 +1,4 @@
// component styles are encapsulated and only applied to their components
-my-scalar-close {
- position: fixed;
- top: 10px;
- right: 15px;
-}
-
.page-content {
padding: 30px;
}
\ No newline at end of file
diff --git a/web/app/riot/scalar-close/scalar-close.component.html b/web/app/riot/scalar-close/scalar-close.component.html
index 095359e..34fa9ab 100644
--- a/web/app/riot/scalar-close/scalar-close.component.html
+++ b/web/app/riot/scalar-close/scalar-close.component.html
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/web/style/_riot.scss b/web/style/_riot.scss
new file mode 100644
index 0000000..80fe0b2
--- /dev/null
+++ b/web/style/_riot.scss
@@ -0,0 +1,31 @@
+// The CSS for the Riot breadcrumb is specified here to ensure that it's style can be overridden.
+// In it's current position (as a component), the component-level stylesheet cannot access the
+// elements, so we specify it in a more generic location.
+
+.dimension-breadcrumb {
+ .fluid-bread {
+ padding: 0;
+ }
+
+ .fluid-bread .container {
+ padding: 0;
+ }
+
+ .fluid-bread .container .breadcrumb {
+ padding: 0;
+ }
+
+ .fluid-bread .breadcrumb-item a:hover {
+ text-decoration: none;
+ }
+
+ font-size: 13px;
+ display: block;
+ padding-top: 4px;
+}
+
+.header .quickAction .closeButton img {
+ position: absolute;
+ top: 25px;
+ right: 15px;
+}
\ No newline at end of file
diff --git a/web/style/app.scss b/web/style/app.scss
index 2264990..7a3ccb0 100644
--- a/web/style/app.scss
+++ b/web/style/app.scss
@@ -1,6 +1,7 @@
// styles in src/style directory are applied to the whole page
@import url('https://fonts.googleapis.com/css?family=Open+Sans:100|Roboto:300');
@import '../../node_modules/angular2-toaster/toaster';
+@import "riot";
body {
background: rgb(238, 238, 238) !important;