diff --git a/rpg-docs/client/views/GeneralCSS/colors.scss b/rpg-docs/client/style/colors.scss
similarity index 100%
rename from rpg-docs/client/views/GeneralCSS/colors.scss
rename to rpg-docs/client/style/colors.scss
diff --git a/rpg-docs/client/style/listItem.scss b/rpg-docs/client/style/listItem.scss
new file mode 100644
index 00000000..bfc7acd8
--- /dev/null
+++ b/rpg-docs/client/style/listItem.scss
@@ -0,0 +1,28 @@
+/*
+List items
+*/
+.item-slot {
+	background-color: rgb(232, 232, 232);
+	background-color: rgba(0, 0, 0, 0.1);	
+}
+
+.item {
+	background: white;
+	cursor: pointer;
+	font-size: 16px;
+	height: 40px;
+	margin: 1px 0 1px 0;
+	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;
+	}
+	&[hero], &:active{
+		box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.37);
+		z-index: 10;
+	}
+}
diff --git a/rpg-docs/client/views/GeneralCSS/main.scss b/rpg-docs/client/style/main.scss
similarity index 62%
rename from rpg-docs/client/views/GeneralCSS/main.scss
rename to rpg-docs/client/style/main.scss
index c7532e0d..55821f9a 100644
--- a/rpg-docs/client/views/GeneralCSS/main.scss
+++ b/rpg-docs/client/style/main.scss
@@ -10,12 +10,35 @@ html {
 	-webkit-box-sizing: border-box;
 	box-sizing: border-box;
 }
+
 *, *:before, *:after {
 	-moz-box-sizing: inherit;
 	-webkit-box-sizing: inherit;
 	box-sizing: inherit;
 }
 
+root {
+	display: block;
+}
+
+body {
+	font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial;
+	margin: 0;
+	overflow-x: hidden;
+}
+
+//Horizontal rule
+hr {
+	background-color: #444;
+	opacity: 0.12;
+	border-width: 0;
+	color: #444;
+	height: 1px;
+	line-height: 0;
+	margin: 16px -16px;
+	text-align: center;
+}
+
 //Column layouts of cards
 .column-container {
 	-moz-column-fill: balance;
@@ -49,41 +72,38 @@ html {
 	
 	.column-container & {
 		margin-bottom: 8px;
+		width: 100%;
+		//hack to stop flickering
+		-webkit-backface-visibility: hidden;
+		-webkit-transform: translateX(0);
+		//stop breaking over column divide
+		-webkit-column-break-inside: avoid;
+		page-break-inside: avoid;
+		break-inside: avoid;
+		//Fixes extra margin at top of columns
+		display: inline-block;
 	}
 	
 	.top {
 		cursor: pointer;
 		padding: 16px;
+		border-radius: 2px 2px 0 0;
 	}
 	.bottom {
 		padding: 16px;
+		border-radius: 0 0 2px 2px;
 		&.list {
 			padding: 0 0 16px 0;
 		}
 	}
-}
-
-/*
-List items
-*/
-.item-slot {
-	background-color: rgb(232, 232, 232);
-	background-color: rgba(0, 0, 0, 0.1);	
-}
-
-.item {
-	background: white;
-	height: 40px;
-	margin: 1px 0 1px 0;
-	&.small {
-		height: 32px;
+	.left {
+		padding: 16px;
+		border-radius: 2px 0 0 2px;
+		text-align: center;
 	}
-	&.tall {
-		height: 56px;
-	}
-	&[hero], &:active{
-		box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.37);
-		z-index: 10;
+	.right {
+		padding: 16px;
+		border-radius: 0 2px 2px 0;
 	}
 }
 
diff --git a/rpg-docs/client/views/GeneralCSS/general.css b/rpg-docs/client/views/GeneralCSS/general.css
index 494bd232..684aaa52 100644
--- a/rpg-docs/client/views/GeneralCSS/general.css
+++ b/rpg-docs/client/views/GeneralCSS/general.css
@@ -1,30 +1,7 @@
-root {
-	display: block;
-}
-
-body {
-	font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial;
-	margin: 0;
-	overflow-x: hidden;
-}
-
-body.core-narrow {
-	padding: 8px;
-}
-
 body /deep/ core-menu {
 	overflow-x: hidden !important;
 }
 
-.calculatedValue {
-	color: #021C33;
-	font-weight: bold;
-}
-
-* {
-	box-sizing: border-box;
-}
-
 td {
 	padding: 0;
 }
@@ -43,62 +20,10 @@ table {
 	text-align: left;
 }
 
-hr {
-	background-color: #444;
-	opacity: 0.12;
-	border-width: 0;
-	color: #444;
-	height: 1px;
-	line-height: 0;
-	margin: 0 -16px;
-	text-align: center;
-}
-
-paper-button {
-	font-size: 14px;
-	font-weight: 400;
-	text-transform: uppercase;
-	color: #000;
-	color: rgba(0,0,0,0.87);
-	letter-spacing: 0.010;
-}
-
 core-item {
 	cursor: pointer;
 }
 
-.listRow {
-	height: 32px;
-}
-
-.card {
-	margin-bottom: 8px;
-	/*hack to stop flickering*/
-	-webkit-backface-visibility: hidden;
-	-webkit-transform: translateX(0);
-	/*stop divs breaking over divide*/
-	-webkit-column-break-inside: avoid;
-	page-break-inside: avoid;
-	break-inside: avoid;
-	/*Fixes extra margin at top of columns*/
-	display: inline-block;
-
-	width: 100%;
-
-	font-size: 14px;
-	border-radius: 2px;
-	background-color: white;
-}
-
-.card.double {
-	padding: 0;
-}
-
-.card paper-button {
-	font-size: 14px;
-	letter-spacing: 0.01em;
-}
-
 .cardHeader {
 	height: 48px;
 	padding: 0 16px 0 16px;
@@ -112,10 +37,6 @@ core-item {
 	cursor: pointer;
 }
 
-.skillRow {
-	cursor: pointer;
-}
-
 .resourceCards {
 	padding: 4px 4px 0 4px;
 	margin-bottom: -4px;
diff --git a/rpg-docs/client/views/GeneralCSS/typography.css b/rpg-docs/client/views/GeneralCSS/typography.css
index abf084d3..f97cb577 100644
--- a/rpg-docs/client/views/GeneralCSS/typography.css
+++ b/rpg-docs/client/views/GeneralCSS/typography.css
@@ -18,7 +18,7 @@
 	letter-spacing: 0;
 }
 
-.white-text .display1{
+.white-text .display1, .white-text.display1{
 	color: rgba(255,255,255,0.54);
 }
 
diff --git a/rpg-docs/client/views/character/stats/abilityCards/abilityCards.css b/rpg-docs/client/views/character/stats/abilityCards/abilityCards.css
deleted file mode 100644
index 8163523c..00000000
--- a/rpg-docs/client/views/character/stats/abilityCards/abilityCards.css
+++ /dev/null
@@ -1,34 +0,0 @@
-.card.double {
-	display: flex;
-}
-
-.card.double > div{
-	vertical-align: top;
-	padding: 16px;
-}
-
-.abilityScore {
-	width: 70px;
-	text-align: center;
-	background-color: #D50000;
-	padding: 16px;
-	position: relative;
-	border-radius: 2px 0 0 2px;
-}
-
-#stats .card {
-	padding: 0;
-}
-
-.abilityCardRight {
-	flex-grow: 1;
-	padding-right: 0;
-}
-
-.abilityCardRight hr{
-	margin: 8px 0 8px -16px;
-}
-
-.abilityCardRight h1{
-	margin-bottom: 8px;
-}
\ No newline at end of file
diff --git a/rpg-docs/client/views/character/stats/abilityCards/abilityCards.html b/rpg-docs/client/views/character/stats/abilityCards/abilityCards.html
index 5a5d63fe..fb6585b8 100644
--- a/rpg-docs/client/views/character/stats/abilityCards/abilityCards.html
+++ b/rpg-docs/client/views/character/stats/abilityCards/abilityCards.html
@@ -1,122 +1,14 @@
 <template name="abilityMiniCard">
-	<paper-shadow class="card double abilityMiniCard" 
-				  hero-id="main" {{detailHero ability ../_id}}>
-		<div class="abilityScore white-text {{color}}"
+	<paper-shadow class="card abilityMiniCard" 
+				  hero-id="main" {{detailHero ability ../_id}}
+				  layout horizontal>
+		<div class="left white-text {{color}}"
 			 hero-id="toolbar" {{detailHero ability ../_id}}>
-			<h1 class="display1">{{../attributeValue ability}}</h1>
-			<h2>{{../abilityMod ability}}</h2>
+			<div class="display1">{{../attributeValue ability}}</div>
+			<div class="title">{{../abilityMod ability}}</div>
 		</div>
-		<div class="abilityCardRight subhead" layout horizontal center>
+		<div class="right subhead" layout horizontal center>
 			{{title}}
 		</div>
-		<paper-ripple fit></paper-ripple>
 	</paper-shadow>
 </template>
-
-<template name="strengthCard">
-	<paper-shadow class="card double">
-		<div class="abilityScore red white-text">
-			{{> ripple color="#eee"}}
-			<h1 class="display1">{{attributeValue "strength"}}</h1>
-			<h2>{{abilityMod "strength"}}</h2>
-		</div>
-		<div class="abilityCardRight">
-			<h1>Strength</h1>
-			{{> skillRow name="Save" skill="strengthSave"}}
-			<hr>
-			{{> skillRow name="Athletics" skill="athletics"}}
-		</div>
-	</paper-shadow>
-</template>
-
-<template name="dexterityCard">
-	<paper-shadow class="card double">
-		<div class="abilityScore green white-text">
-			{{> ripple color="#eee"}}
-			<h1 class="display1">{{attributeValue "dexterity"}}</h1>
-			<h2>{{abilityMod "dexterity"}}</h2>
-		</div>
-		<div class="abilityCardRight">
-			<h1>Dexterity</h1>
-			{{> skillRow name="Save" skill="dexteritySave"}}
-			<hr>
-			{{> skillRow name="Acrobatics" skill="acrobatics"}}
-			{{> skillRow name="Sleight of Hand" skill="sleightOfHand"}}
-			{{> skillRow name="Stealth" skill="stealth"}}
-		</div>
-	</paper-shadow>
-</template>
-
-<template name="constitutionCard">
-	<paper-shadow class="card double">
-		<div class="abilityScore deep-orange white-text">
-			{{> ripple color="#eee"}}
-			<h1 class="display1">{{attributeValue "constitution"}}</h1>
-			<h2>{{abilityMod "constitution"}}</h2>
-		</div>
-		<div class="abilityCardRight">
-			<h1>Constitution</h1>
-			{{> skillRow name="Save" skill="constitutionSave"}}
-			<hr>
-		</div>
-	</paper-shadow>
-</template>
-
-<template name="intelligenceCard">
-	<paper-shadow class="card double">
-		<div class="abilityScore indigo white-text">
-			{{> ripple color="#eee"}}
-			<h1 class="display1">{{attributeValue "intelligence"}}</h1>
-			<h2>{{abilityMod "intelligence"}}</h2>
-		</div>
-		<div class="abilityCardRight">
-			<h1>Intelligence</h1>
-			{{> skillRow name="Save" skill="intelligenceSave"}}
-			<hr>
-			{{> skillRow name="Arcana" skill="arcana"}}
-			{{> skillRow name="History" skill="history"}}
-			{{> skillRow name="Investigation" skill="investigation"}}
-			{{> skillRow name="Nature" skill="nature"}}
-			{{> skillRow name="Religion" skill="religion"}}
-		</div>
-	</paper-shadow>
-</template>
-
-<template name="wisdomCard">
-	<paper-shadow class="card double">
-		<div class="abilityScore purple white-text">
-			{{> ripple color="#eee"}}
-			<h1 class="display1">{{attributeValue "wisdom"}}</h1>
-			<h2>{{abilityMod "wisdom"}}</h2>
-		</div>
-		<div class="abilityCardRight">
-			<h1>Wisdom</h1>
-			{{> skillRow name="Save" skill="wisdomSave"}}
-			<hr>
-			{{> skillRow name="Animal Handling" skill="animalHandling"}}
-			{{> skillRow name="Insight" skill="insight"}}
-			{{> skillRow name="Medicine" skill="medicine"}}
-			{{> skillRow name="Perception" skill="perception" showPassive="true"}}
-			{{> skillRow name="Survival" skill="survival"}}
-		</div>
-	</paper-shadow>
-</template>
-
-<template name="charismaCard">
-	<paper-shadow class="card double">
-		<div class="abilityScore pink white-text">
-			{{> ripple color="#eee"}}
-			<h1 class="display1">{{attributeValue "charisma"}}</h1>
-			<h2>{{abilityMod "charisma"}}</h2>
-		</div>
-		<div class="abilityCardRight">
-			<h1>Charisma</h1>
-			{{> skillRow name="Save" skill="charismaSave"}}
-			<hr>
-			{{> skillRow name="Deception" skill="deception"}}
-			{{> skillRow name="Intimidation" skill="intimidation"}}
-			{{> skillRow name="Performance" skill="performance"}}
-			{{> skillRow name="Persuasion" skill="persuasion"}}
-		</div>
-	</paper-shadow>
-</template>
\ No newline at end of file
diff --git a/rpg-docs/client/views/character/stats/hitDice/hitDice.css b/rpg-docs/client/views/character/stats/hitDice/hitDice.css
new file mode 100644
index 00000000..52ca305f
--- /dev/null
+++ b/rpg-docs/client/views/character/stats/hitDice/hitDice.css
@@ -0,0 +1,15 @@
+.hit-dice paper-icon-button {
+	display: block;
+	height: 32px;
+	padding: 0;
+	width: 32px;
+}
+
+.hit-dice paper-icon-button[disabled] {
+	color: rgba(255, 255, 255, 0.2);
+}
+
+.hit-dice paper-icon-button /deep/ core-icon {
+	height: 32px;
+	width: 32px;
+}
\ No newline at end of file
diff --git a/rpg-docs/client/views/character/stats/hitDice/hitDice.html b/rpg-docs/client/views/character/stats/hitDice/hitDice.html
index 2fdb28d7..1a1d0b83 100644
--- a/rpg-docs/client/views/character/stats/hitDice/hitDice.html
+++ b/rpg-docs/client/views/character/stats/hitDice/hitDice.html
@@ -1,10 +1,20 @@
 <template name="hitDice">
 	{{#if ../attributeBase name}}
-		<paper-shadow class="card container" hero-id="main" {{detailHero name ../_id}} layout horizontal>
-			<div class="containerLeft green" layout horizontal hero-id="toolbar" {{detailHero name ../_id}}>
-				<div class="resourceButtons">
-					<paper-icon-button class="resourceUp" icon="arrow-drop-up" disabled={{cantIncrement}}></paper-icon-button>
-					<paper-icon-button class="resourceDown" icon="arrow-drop-down" disabled={{cantDecrement}}></paper-icon-button>
+		<paper-shadow class="card hit-dice" hero-id="main" 
+					  {{detailHero name ../_id}} 
+					  layout horizontal>
+			<div class="left green display1 white-text" 
+				 hero-id="toolbar" {{detailHero name ../_id}}
+				 layout horizontal>
+				<div>
+					<paper-icon-button class="resourceUp" 
+									   icon="arrow-drop-up" 
+									   disabled={{cantIncrement}}>
+					</paper-icon-button>
+					<paper-icon-button class="resourceDown"
+									   icon="arrow-drop-down"
+									   disabled={{cantDecrement}}>
+					</paper-icon-button>
 				</div>
 				<div class="resourceValue" layout vertical center>
 					<div>
@@ -15,9 +25,8 @@
 					</div>
 				</div>
 			</div>
-			<div class="containerRight clickable" flex relative horizontal layout center>
+			<div class="right clickable" flex relative horizontal layout center>
 				Hit Dice
-				<paper-ripple fit></paper-ripple>
 			</div>
 		</paper-shadow>
 	{{/if}}
diff --git a/rpg-docs/client/views/character/stats/hitDice/hitDice.js b/rpg-docs/client/views/character/stats/hitDice/hitDice.js
index 5b772b22..9e3c8df3 100644
--- a/rpg-docs/client/views/character/stats/hitDice/hitDice.js
+++ b/rpg-docs/client/views/character/stats/hitDice/hitDice.js
@@ -25,7 +25,7 @@ Template.hitDice.events({
 			Characters.update(this.char._id, modifier, {validate: false});
 		}
 	},
-	"tap .containerRight": function() {
+	"tap .right": function() {
 		var charId = Template.parentData()._id;
 		var title = "d" + this.diceNum + " Hit Dice";
 		GlobalUI.setDetail({
diff --git a/rpg-docs/client/views/character/stats/stats.html b/rpg-docs/client/views/character/stats/stats.html
index d893830c..2627dfec 100644
--- a/rpg-docs/client/views/character/stats/stats.html
+++ b/rpg-docs/client/views/character/stats/stats.html
@@ -3,7 +3,7 @@
 		<div class="resourceCards" layout horizontal wrap>
 			{{> healthCard}}
 		</div>
-		<div id="stats" class="containers" >
+		<div id="stats" class="column-container" >
 			<!--Ability Scores-->
 			{{> abilityMiniCard ability="strength" title="Strength" color="red"}}
 			{{> abilityMiniCard ability="dexterity" title="Dexterity" color="indigo"}}
@@ -27,7 +27,7 @@
 			{{>hitDice name="d10HitDice" diceNum="10" char=this}}
 			{{>hitDice name="d12HitDice" diceNum="12" char=this}}
 			<!--Saving Throws-->
-			<paper-shadow class="card container"  hero-id="main" {{detailHero}}>
+			<paper-shadow class="card"  hero-id="main" {{detailHero}}>
 				<div class="containerTop whiteTop" layout horizontal center>
 					<div class="containerName subhead" hero-id="title" flex>Saving Throws</div>
 				</div>
@@ -41,7 +41,7 @@
 				</div>
 			</paper-shadow>
 			<!--Skills-->
-			<paper-shadow class="card container"  hero-id="main" {{detailHero}}>
+			<paper-shadow class="card"  hero-id="main" {{detailHero}}>
 				<div class="containerTop whiteTop" layout horizontal center>
 					<div class="containerName subhead" hero-id="title" flex>Skills</div>
 				</div>
@@ -71,8 +71,8 @@
 </template>
 
 <template name="statCard">
-	<paper-shadow class="card container statCard" hero-id="main" {{detailHero stat ../_id}} layout horizontal>
-		<div class="containerLeft {{color}}"
+	<paper-shadow class="card statCard" hero-id="main" {{detailHero stat ../_id}} layout horizontal>
+		<div class="left display1 white-text {{color}}"
 			 hero-id="toolbar" {{detailHero stat ../_id}}>
 			{{#if isSkill}}
 				{{../skillMod stat}}
@@ -80,9 +80,8 @@
 				{{prefix}}{{../attributeValue stat}}
 			{{/if}}
 		</div>
-		<div class="containerRight" flex horizontal layout center>
+		<div class="right subhead" flex horizontal layout center>
 			{{name}}
 		</div>
-		<paper-ripple fit></paper-ripple>
 	</paper-shadow>
 </template>