diff --git a/rpg-docs/.meteor/packages b/rpg-docs/.meteor/packages
index db1d5e73..eb28a84f 100644
--- a/rpg-docs/.meteor/packages
+++ b/rpg-docs/.meteor/packages
@@ -41,7 +41,6 @@ wizonesolutions:canonical
 meteorhacks:fast-render
 standard-minifier-js@1.2.1
 shell-server
-fourseven:scss
 seba:minifiers-autoprefixer
 nikogosovd:multiple-uihooks
 templates:array
diff --git a/rpg-docs/.meteor/versions b/rpg-docs/.meteor/versions
index 11f314e7..191af8e6 100644
--- a/rpg-docs/.meteor/versions
+++ b/rpg-docs/.meteor/versions
@@ -41,7 +41,6 @@ ecwyne:mathjs@0.25.0
 ejson@1.0.13
 email@1.1.18
 fastclick@1.0.13
-fourseven:scss@3.13.0
 geojson-utils@1.0.10
 google@1.1.15
 hot-code-push@1.0.4
diff --git a/rpg-docs/client/style/cards.css b/rpg-docs/client/style/cards.css
new file mode 100644
index 00000000..39067162
--- /dev/null
+++ b/rpg-docs/client/style/cards.css
@@ -0,0 +1,81 @@
+/*Column layout*/
+.column-container {
+	column-fill: balance;
+	column-gap: 0px;
+	column-width: 304px;
+	padding: 4px;
+}
+
+.column-container.thin-columns {
+	column-count: 4;
+	column-width: 240px;
+}
+
+.column-container > div {
+	padding: 4px;
+	-webkit-column-break-inside: avoid;
+	page-break-inside: avoid;
+	break-inside: avoid;
+}
+
+/*Cards*/
+.card {
+	background: white;
+	border-radius: 2px;
+}
+
+.card .top {
+	cursor: pointer;
+	padding: 16px;
+	border-radius: 2px 2px 0 0;
+}
+
+.card .top.white {
+	cursor: auto;
+	padding: 16px;
+	border-bottom: rgba(0,0,0,0.12) solid 1px;
+}
+
+.card .bottom {
+	padding: 16px;
+	border-radius: 0 0 2px 2px;
+}
+
+.card .bottom.list {
+	padding: 16px 0;
+}
+
+.card .bottom.list .subhead {
+	color: rgba(0,0,0,0.54);
+	font-size: 14px;
+	font-weight: 500;
+	letter-spacing: 0.010em;
+	padding: 12px 16px 12px 16px;
+}
+
+.card .bottom.text {
+	white-space: pre-wrap;
+}
+
+.card .left {
+	padding: 16px;
+	border-radius: 2px 0 0 2px;
+	text-align: center;
+	min-width: 72px;
+}
+
+.card .right {
+	padding: 16px;
+	border-radius: 0 2px 2px 0;
+}
+
+.card .left paper-icon-button {
+	display: block;
+	height: 32px;
+	padding: 0;
+	width: 32px;
+}
+
+.card .left paper-icon-button[disabled] {
+	color: rgba(255, 255, 255, 0.2);
+}
diff --git a/rpg-docs/client/style/cards.scss b/rpg-docs/client/style/cards.scss
deleted file mode 100644
index ea3feb64..00000000
--- a/rpg-docs/client/style/cards.scss
+++ /dev/null
@@ -1,71 +0,0 @@
-$thickColumnWidth: 304px;
-$thinColumnWidth: 240px;
-
-//Column layout
-.column-container {
-	column-fill: balance;
-	column-gap: 0px;
-	column-width: $thickColumnWidth;
-	padding: 4px;
-
-	&.thin-columns {
-		column-count: 4;
-		column-width: $thinColumnWidth;
-	}
-	& > div {
-		padding: 4px;
-		//stop divs breaking over multiple columns
-		-webkit-column-break-inside: avoid;
-		page-break-inside: avoid;
-		break-inside: avoid;
-	}
-}
-
-//Cards
-.card {
-	background: white;
-	border-radius: 2px;
-
-	.top {
-		cursor: pointer;
-		padding: 16px;
-		border-radius: 2px 2px 0 0;
-		&.white {
-			cursor: auto;
-			padding: 16px;
-			border-bottom: rgba(0,0,0,0.12) solid 1px;
-		}
-	}
-	.bottom {
-		padding: 16px;
-		border-radius: 0 0 2px 2px;
-		&.list {
-			padding: 16px 0;
-			.subhead {
-				color: rgba(0,0,0,0.54);
-				font-size: 14px;
-				font-weight: 500;
-				letter-spacing: 0.010em;
-				padding: 12px 16px 12px 16px;
-			}
-		}
-		&.text {
-			white-space: pre-wrap;
-		}
-	}
-	.left {
-		padding: 16px;
-		border-radius: 2px 0 0 2px;
-		text-align: center;
-		min-width: 72px;
-	}
-	.right {
-		padding: 16px;
-		border-radius: 0 2px 2px 0;
-	}
-}
-
-/* undo pointer cursor on detail box heading */
-#globalDetail.card .top {
-	cursor: auto;
-}
diff --git a/rpg-docs/client/style/colors.scss b/rpg-docs/client/style/colors.css
similarity index 100%
rename from rpg-docs/client/style/colors.scss
rename to rpg-docs/client/style/colors.css
diff --git a/rpg-docs/client/style/listItem.scss b/rpg-docs/client/style/listItem.css
similarity index 50%
rename from rpg-docs/client/style/listItem.scss
rename to rpg-docs/client/style/listItem.css
index 7feae752..a8cc623a 100644
--- a/rpg-docs/client/style/listItem.scss
+++ b/rpg-docs/client/style/listItem.css
@@ -15,23 +15,28 @@ List items
 	padding: 0 16px 0 16px;
 	position: relative;
 	transition: box-shadow 0.3s ease, opacity 0.5s ease-in-out;
-	&.small {
-		height: 32px;
-	}
-	&.tall {
-		height: 56px;
-	}
-	&.flexible {
-		height: auto;
-		padding-top: 16px;
-		padding-bottom: 16px;
-	}
-	&[hero], &:active{
-		box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.37);
-		z-index: 10;
-	}
-	iron-icon, paper-icon-button {
-		color: #747474;
-		color: rgba(0,0,0,0.54);
-	}
+}
+
+.item.small {
+	height: 32px;
+}
+
+.item.tall {
+	height: 56px;
+}
+
+.item.flexible {
+	height: auto;
+	padding-top: 16px;
+	padding-bottom: 16px;
+}
+
+.item[hero], &:active{
+	box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.37);
+	z-index: 10;
+}
+
+.item iron-icon, .item paper-icon-button {
+	color: #747474;
+	color: rgba(0,0,0,0.54);
 }
diff --git a/rpg-docs/client/style/main.scss b/rpg-docs/client/style/main.css
similarity index 91%
rename from rpg-docs/client/style/main.scss
rename to rpg-docs/client/style/main.css
index 2bf03434..7977a784 100644
--- a/rpg-docs/client/style/main.scss
+++ b/rpg-docs/client/style/main.css
@@ -1,6 +1,4 @@
-@import "colors";
-
-//apply a natural box layout model to all elements
+/*apply a natural box layout model to all elements*/
 *, *:before, *:after {
 	-moz-box-sizing: border-box;
 	-webkit-box-sizing: border-box;
@@ -18,7 +16,7 @@ body {
 	background-color: #E0E0E0;
 }
 
-//Paragraphs
+/*Paragraphs*/
 p {
 	margin-bottom: 8px;
 }
@@ -52,7 +50,7 @@ paper-icon-item::shadow #contentIcon {
     flex-shrink: 0;
 }
 
-//FABs
+/*FABs*/
 .floatyButton {
 	position: fixed;
 	bottom: 24px;
@@ -67,7 +65,7 @@ paper-fab.keyboard-focus {
     background: #630c05;
 }
 
-//Buttons
+/*Buttons*/
 paper-button {
 	color: #000;
 	color: rgba(0,0,0,0.87);
@@ -77,7 +75,7 @@ paper-button {
 	text-transform: uppercase;
 }
 
-//Style shortcuts
+/*Style shortcuts*/
 .scroll-y {
 	overflow-y: auto;
 }
diff --git a/rpg-docs/client/style/shadowDom.css b/rpg-docs/client/style/shadowDom.css
deleted file mode 100644
index 3cc59356..00000000
--- a/rpg-docs/client/style/shadowDom.css
+++ /dev/null
@@ -1,24 +0,0 @@
-.card .left paper-icon-button {
-	display: block;
-	height: 32px;
-	padding: 0;
-	width: 32px;
-}
-
-.card .left paper-icon-button[disabled] {
-	color: rgba(255, 255, 255, 0.2);
-}
-
-.card .left paper-icon-button /deep/ core-icon {
-	height: 32px;
-	width: 32px;
-}
-
-/*fix paper-dropdowns*/
-body /deep/ core-menu {
-	overflow-x: hidden !important;
-}
-
-html /deep/ paper-dropdown {
-	box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
-}
diff --git a/rpg-docs/client/style/tables.css b/rpg-docs/client/style/tables.css
new file mode 100644
index 00000000..28499097
--- /dev/null
+++ b/rpg-docs/client/style/tables.css
@@ -0,0 +1,15 @@
+td {
+	padding: 8px;
+}
+
+.strengthTable{
+	width: 100%;
+}
+
+.strengthTable td:nth-child(2){
+	text-align: right;
+}
+
+.summaryTable td:nth-child(3){
+	text-align: right;
+}
diff --git a/rpg-docs/client/style/tables.scss b/rpg-docs/client/style/tables.scss
deleted file mode 100644
index 5edf7381..00000000
--- a/rpg-docs/client/style/tables.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-td {
-	padding: 8px;
-}
-
-.strengthTable{
-	width: 100%;
-	td{
-		&:nth-child(2) {
-			text-align: right;
-		}
-		&:nth-child(3) {
-			width: 250px;
-		}
-	}
-}
-
-.summaryTable  {
-	&:nth-child(3){
-		text-align: right;
-	}
-}
diff --git a/rpg-docs/client/views/character/inventory/carryCapacityBar/carryCapacityBar.css b/rpg-docs/client/views/character/inventory/carryCapacityBar/carryCapacityBar.css
new file mode 100644
index 00000000..6a0ea04f
--- /dev/null
+++ b/rpg-docs/client/views/character/inventory/carryCapacityBar/carryCapacityBar.css
@@ -0,0 +1,15 @@
+.carryCapacityBar {
+	background-color: #7DC580;
+	background-color: rgba(255,255,255,0.27);
+	position: relative;
+	height: 4px;
+}
+
+.carryCapacityBar div{
+	height: 100%;
+	position: absolute;
+}
+.carryCapacityBar .tick {
+	border-right: solid 2px #E5E5E5;
+	border-right-color: rgba(255,255,255,0.54);
+}
diff --git a/rpg-docs/client/views/character/inventory/carryCapacityBar/carryCapacityBar.scss b/rpg-docs/client/views/character/inventory/carryCapacityBar/carryCapacityBar.scss
deleted file mode 100644
index 2e06fa43..00000000
--- a/rpg-docs/client/views/character/inventory/carryCapacityBar/carryCapacityBar.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-.carryCapacityBar {
-	background-color: #7DC580;
-	background-color: rgba(255,255,255,0.27);
-	position: relative;
-	height: 4px;
-	div{
-		height: 100%;
-		position: absolute;
-	}
-	.tick {
-		border-right: solid 2px #E5E5E5;
-		border-right-color: rgba(255,255,255,0.54);
-	}
-}
\ No newline at end of file
diff --git a/rpg-docs/client/views/character/stats/skillRow/skillRow.css b/rpg-docs/client/views/character/stats/skillRow/skillRow.css
new file mode 100644
index 00000000..449a6ab6
--- /dev/null
+++ b/rpg-docs/client/views/character/stats/skillRow/skillRow.css
@@ -0,0 +1,22 @@
+.skill-row .skill-mod{
+	width: 45px;
+	text-align: center;
+}
+
+.skill-row .skill-mod.fail {
+	color: #D50000;
+}
+
+.skill-row .skill-mod.advantage{
+	background-image: url(/png/advantage/greenUp.png);
+	background-size: contain;
+	background-repeat: no-repeat;
+	background-position: center;
+}
+
+.skill-row .skill-mod.disadvantage{
+	background-image: url(/png/advantage/redDown.png);
+	background-size: contain;
+	background-repeat: no-repeat;
+	background-position: center;
+}
diff --git a/rpg-docs/client/views/character/stats/skillRow/skillRow.scss b/rpg-docs/client/views/character/stats/skillRow/skillRow.scss
deleted file mode 100644
index 11499723..00000000
--- a/rpg-docs/client/views/character/stats/skillRow/skillRow.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-.skill-row {
-	.skill-mod{
-		width: 45px;
-		text-align: center;
-		&.fail {
-			color: #D50000;
-		}
-		&.advantage{
-			background-image: url(/png/advantage/greenUp.png);
-			background-size: contain;
-			background-repeat: no-repeat;
-			background-position: center;
-		}
-		&.disadvantage{
-			background-image: url(/png/advantage/redDown.png);
-			background-size: contain;
-			background-repeat: no-repeat;
-			background-position: center;
-		}
-	}
-}
\ No newline at end of file
diff --git a/rpg-docs/client/views/home/intro/intro.scss b/rpg-docs/client/views/home/intro/intro.scss
index 0ce93765..a843da7f 100644
--- a/rpg-docs/client/views/home/intro/intro.scss
+++ b/rpg-docs/client/views/home/intro/intro.scss
@@ -1,33 +1,32 @@
-.intro {
-	.section {
-		width: 100%;
-		min-height: 200px;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		flex-direction: column;
-		padding-top: 24px;
-		padding-bottom: 24px;
-		& > div, & > h2 {
-			padding: 32px;
-			.display1 {
-				margin-bottom: 16px;
-			}
-		}
-		.columns > div{
-			max-width: 300px;
-			padding: 16px;
-			text-align: center;
-			paper-button {
-				color: #FF5252;
-			}
-		}
-	}
-	paper-button {
-		min-width: 200px;
-		a {
-			color: inherit;
-			text-decoration: inherit;
-		}
-	}
+.intro .section {
+	width: 100%;
+	min-height: 200px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-direction: column;
+	padding-top: 24px;
+	padding-bottom: 24px;
+}
+
+.intro .section > div, .intro .section > h2 {
+	padding: 32px;
+}
+
+.intro .section .display1 {
+	margin-bottom: 16px;
+}
+
+.intro .section .columns > div {
+	max-width: 300px;
+	padding: 16px;
+	text-align: center;
+}
+
+.intro .section paper-button {
+	color: #FF5252;
+}
+
+.intro paper-button {
+	min-width: 200px;
 }
diff --git a/rpg-docs/client/views/paperTemplates/fabMenu/fabMenu.css b/rpg-docs/client/views/paperTemplates/fabMenu/fabMenu.css
new file mode 100644
index 00000000..02fe95c5
--- /dev/null
+++ b/rpg-docs/client/views/paperTemplates/fabMenu/fabMenu.css
@@ -0,0 +1,41 @@
+.mini-holder {
+	position: absolute;
+	padding: 4px;
+	bottom: 80px;
+	right: 24px;
+	width: 56px;
+	pointer-events: none;
+	flex-direction: column-reverse !important;
+}
+
+.mini-holder core-tooltip{
+	transform: scale(0);
+	transition-property: transform;
+	transition-duration: 0.3s;
+	transition-timing-function: ease-in-out;
+	margin: 4px;
+}
+
+.mini-holder.active core-tooltip{
+	transform: scale(1);
+}
+
+.mini-holder.active {
+	pointer-events: auto;
+}
+
+.mini-holder.active core-tooltip:nth-child(2){
+	transition-delay: 0.1s;
+}
+
+.mini-holder.active core-tooltip:nth-child(3){
+	transition-delay: 0.2s;
+}
+
+.mini-holder.active core-tooltip:nth-child(4){
+	transition-delay: 0.3s;
+}
+
+.mini-holder.active core-tooltip:nth-child(5){
+	transition-delay: 0.4s;
+}
diff --git a/rpg-docs/client/views/paperTemplates/fabMenu/fabMenu.scss b/rpg-docs/client/views/paperTemplates/fabMenu/fabMenu.scss
deleted file mode 100644
index ddeb5309..00000000
--- a/rpg-docs/client/views/paperTemplates/fabMenu/fabMenu.scss
+++ /dev/null
@@ -1,43 +0,0 @@
-.mini-holder {
-	position: absolute;
-	padding: 4px;
-	bottom: 80px;
-	right: 24px;
-	width: 56px;
-	pointer-events: none;
-	flex-direction: column-reverse !important;
-	core-tooltip{
-		transform: scale(0);
-		transition-property: transform;
-		transition-duration: 0.3s;
-		transition-timing-function: ease-in-out;
-		margin: 4px;
-	}
-	&.active {
-		pointer-events: auto;
-		core-tooltip{
-			transform: scale(1);
-		}
-		core-tooltip:nth-child(2){
-			transition-delay: 0.1s;
-		}
-		core-tooltip:nth-child(3){
-			transition-delay: 0.2s;
-		}
-		core-tooltip:nth-child(4){
-			transition-delay: 0.3s;
-		}
-		core-tooltip:nth-child(5){
-			transition-delay: 0.4s;
-		}
-	}
-}
-
-.expand-menu {
-	&::shadow iron-icon {
-		transition: transform 0.3s ease-in-out;
-	}
-	&.active::shadow iron-icon{
-		transform: rotate(405deg);
-	}
-}