diff --git a/rpg-docs/.meteor/packages b/rpg-docs/.meteor/packages
index 0b2e5ed3..42ae2436 100644
--- a/rpg-docs/.meteor/packages
+++ b/rpg-docs/.meteor/packages
@@ -16,7 +16,6 @@ differential:vulcanize
 matb33:collection-hooks
 zimme:collection-softremovable
 momentjs:moment
-mike:mocha
 dburles:mongo-collection-instances
 percolate:migrations
 ecwyne:mathjs
diff --git a/rpg-docs/.meteor/versions b/rpg-docs/.meteor/versions
index 0c82f047..2c684d40 100644
--- a/rpg-docs/.meteor/versions
+++ b/rpg-docs/.meteor/versions
@@ -6,7 +6,6 @@ accounts-ui@1.1.5
 accounts-ui-unstyled@1.1.7
 aldeed:collection2@2.3.3
 aldeed:simple-schema@1.3.3
-amplify@1.0.0
 autoupdate@1.2.1
 base64@1.0.3
 binary-heap@1.0.3
@@ -51,7 +50,6 @@ logging@1.0.7
 matb33:collection-hooks@0.7.13
 meteor@1.1.6
 meteor-platform@1.2.2
-mike:mocha@0.5.4
 minifiers@1.1.5
 minimongo@1.0.8
 mobile-status-bar@1.0.3
@@ -62,19 +60,13 @@ oauth@1.1.4
 oauth2@1.1.3
 observe-sequence@1.0.6
 ordered-dict@1.0.3
-package-version-parser@3.0.3
 percolate:migrations@0.7.5
-practicalmeteor:chai@1.9.2_3
-practicalmeteor:loglevel@1.1.0_3
 random@1.0.3
 reactive-dict@1.1.0
 reactive-var@1.0.5
 reload@1.1.3
 retry@1.0.3
 routepolicy@1.0.5
-sanjo:long-running-child-process@1.0.3
-sanjo:meteor-files-helpers@1.1.0_4
-sanjo:meteor-version@1.0.0
 service-configuration@1.0.4
 session@1.1.0
 sha@1.0.3
@@ -91,11 +83,6 @@ underscore@1.0.3
 url@1.0.4
 useraccounts:core@1.9.1
 useraccounts:polymer@1.9.1
-velocity:chokidar@0.12.6_1
-velocity:core@0.6.1
-velocity:html-reporter@0.5.3
-velocity:meteor-internals@1.1.0_7
-velocity:shim@0.1.0
 webapp@1.2.0
 webapp-hashing@1.0.3
 wolves:bourbon@1.0.0
diff --git a/rpg-docs/Routes/Routes.js b/rpg-docs/Routes/Routes.js
index 6fc59ca2..cb35fd4b 100644
--- a/rpg-docs/Routes/Routes.js
+++ b/rpg-docs/Routes/Routes.js
@@ -12,7 +12,7 @@ Router.plugin("ensureSignedIn", {
 		"atResetPwd",
 		"atEnrollAccount",
 		"atVerifyEmail",
-		"atresendVerificationEmail",
+		"atResendVerificationEmail",
 		"loginButtons",
 		"notFound",
 	]
diff --git a/rpg-docs/client/style/listItem.scss b/rpg-docs/client/style/listItem.scss
index bfc7acd8..9d5f717f 100644
--- a/rpg-docs/client/style/listItem.scss
+++ b/rpg-docs/client/style/listItem.scss
@@ -21,8 +21,17 @@ List items
 	&.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;
 	}
+	core-icon, 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.scss
index 55821f9a..2a6ce72b 100644
--- a/rpg-docs/client/style/main.scss
+++ b/rpg-docs/client/style/main.scss
@@ -1,22 +1,16 @@
 @import "bourbon/bourbon";
 @import "colors";
-	
-$thickColumnWidth: 304px;
-$thinColumnWidth: 200px;
 
-//apply a natural box layout model to all elements, but allowing components to change
-html {
+$thickColumnWidth: 304px;
+$thinColumnWidth: 240px;
+
+//apply a natural box layout model to all elements
+*, *:before, *:after {
 	-moz-box-sizing: border-box;
 	-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;
 }
@@ -25,6 +19,7 @@ body {
 	font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial;
 	margin: 0;
 	overflow-x: hidden;
+	background-color: #E0E0E0;
 }
 
 //Horizontal rule
@@ -39,29 +34,23 @@ hr {
 	text-align: center;
 }
 
+//FABs
+.floatyButton {
+	position: absolute;
+	bottom: 24px;
+	right: 24px;
+}
+
 //Column layouts of cards
 .column-container {
-	-moz-column-fill: balance;
-	column-fill: balance;
-	-ms-column-gap: 8px;
-	-moz-column-gap: 8px;
-	-webkit-column-gap: 8px;
-	column-gap: 8px;
-	-moz-column-width: thickColumnWidth;
-	-ms-column-width: thickColumnWidth;
-	-webkit-column-width: thickColumnWidth;
-	column-width: thickColumnWidth;
+	@include column-fill(balance);
+	@include column-gap(8px);
+	@include column-width($thickColumnWidth);
 	padding: 8px;
-	
-	&.thin {
-		-ms-column-count: 4;
-		-moz-column-count: 4;
-		-webkit-column-count: 4;
-		column-count: 4;
-		-ms-column-width: 200px;
-		-moz-column-width: 200px;
-		-webkit-column-width: 200px;
-		column-width: 200px;
+
+	&.thin-columns {
+		@include column-count(4);
+		@include column-width($thinColumnWidth);
 	}
 }
 
@@ -69,7 +58,7 @@ hr {
 .card {
 	background: white;
 	border-radius: 2px;
-	
+
 	.column-container & {
 		margin-bottom: 8px;
 		width: 100%;
@@ -83,23 +72,55 @@ hr {
 		//Fixes extra margin at top of columns
 		display: inline-block;
 	}
-	
+
 	.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;
+		}
+		paper-checkbox::shadow #ink[checked] {
+			color: #ffffff;
+		}
+		paper-checkbox::shadow #ink {
+			color: #ffffff;
+		}
+		paper-checkbox::shadow #checkbox.checked {
+			background-color: #ffffff;
+			background-color: rgba(255,255,255,0.27);
+			border-color: #ffffff;
+			border-color: rgba(255,255,255,0.27);
+		}
+		paper-checkbox::shadow #checkbox {
+			border-color: #ffffff;
+			border-color: rgba(255,255,255,0.54);
+		}
 	}
 	.bottom {
 		padding: 16px;
 		border-radius: 0 0 2px 2px;
 		&.list {
 			padding: 0 0 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;
@@ -107,9 +128,7 @@ hr {
 	}
 }
 
-/*
-Buttons
-*/
+//Buttons
 paper-button {
 	color: #000;
 	color: rgba(0,0,0,0.87);
@@ -118,3 +137,12 @@ paper-button {
 	letter-spacing: 0.010;
 	text-transform: uppercase;
 }
+
+//Style shortcuts
+.scroll-y {
+	overflow-y: auto;
+}
+
+.clickable, core-item, paper-tab {
+	cursor: pointer;
+}
diff --git a/rpg-docs/client/style/shadowDom.css b/rpg-docs/client/style/shadowDom.css
new file mode 100644
index 00000000..0b308e20
--- /dev/null
+++ b/rpg-docs/client/style/shadowDom.css
@@ -0,0 +1,20 @@
+.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;
+}
diff --git a/rpg-docs/client/views/GeneralCSS/color.css b/rpg-docs/client/views/GeneralCSS/color.css
deleted file mode 100644
index f98b53d3..00000000
--- a/rpg-docs/client/views/GeneralCSS/color.css
+++ /dev/null
@@ -1,83 +0,0 @@
-.red {
-	background-color: #F44336;
-}
-
-.pink {
-	background-color: #E91E63;
-}
-
-.purple {
-	background-color: #9C27B0;
-}
-
-.deep-purple {
-	background-color: #673AB7;
-}
-
-.indigo {
-	background-color: #3F51B5;
-}
-
-.blue {
-	background-color: #2196F3;
-}
-
-.light-blue {
-	background-color: #03A9F4;
-}
-
-.cyan {
-	background-color: #00BCD4;
-}
-
-.teal {
-	background-color: #009688;
-}
-
-.green {
-	background-color: #4CAF50;
-}
-
-.light-green {
-	background-color: #8BC34A;
-}
-
-.lime {
-	background-color: #CDDC39;
-}
-
-.yellow {
-	background-color: #FFEB3B;
-}
-
-.amber {
-	background-color: #FFC107;
-}
-
-.orange {
-	background-color: #FF9800;
-}
-
-.deep-orange {
-	background-color: #FF5722;
-}
-
-.brown {
-	background-color: #795548;
-}
-
-.grey {
-	background-color: #9E9E9E;
-}
-
-.blue-grey {
-	background-color: #607D8B;
-}
-
-.white {
-	background-color: #ffffff;
-}
-
-.black {
-	background-color: #262626;
-}
\ No newline at end of file
diff --git a/rpg-docs/client/views/GeneralCSS/general.css b/rpg-docs/client/views/GeneralCSS/general.css
deleted file mode 100644
index 684aaa52..00000000
--- a/rpg-docs/client/views/GeneralCSS/general.css
+++ /dev/null
@@ -1,189 +0,0 @@
-body /deep/ core-menu {
-	overflow-x: hidden !important;
-}
-
-td {
-	padding: 0;
-}
-
-table {
-	border-spacing: 0;
-}
-
-.summaryTable td{
-	text-align: right;
-	padding: 4px;
-	min-width: 80px;
-}
-
-.summaryTable td:first-child {
-	text-align: left;
-}
-
-core-item {
-	cursor: pointer;
-}
-
-.cardHeader {
-	height: 48px;
-	padding: 0 16px 0 16px;
-	align-content: center;
-	font-size: 14px;
-	font-weight: 400;
-	color: rgba(0, 0, 0, 0.54);
-}
-
-.clickable, .statCard, .abilityMiniCard {
-	cursor: pointer;
-}
-
-.resourceCards {
-	padding: 4px 4px 0 4px;
-	margin-bottom: -4px;
-}
-
-.resourceCards .card {
-	width: 180px;
-	margin: 4px;
-	flex-grow: 1;
-	flex-shrink: 1;
-}
-
-.grey-background, body {
-	background-color: #E0E0E0;
-}
-
-.center {
-	text-align: center;
-}
-
-.screen-center {
-	position: fixed;
-	top: 50%;
-	left: 50%;
-	-webkit-transform: translate(-50%, -50%);
-	transform: translate(-50%, -50%);
-}
-
-.scroll-y {
-	overflow-y: auto;
-}
-
-.fab-buffer {
-	height: 88px;
-	width: 100%;
-	order: 999;
-}
-
-*[hidden] {
-	visibility: hidden;
-}
-
-.hidden{
-	opacity: 0;
-}
-
-@media (max-width: 640px) {
-	html /deep/ paper-action-dialog[global-dialog] {
-		top: 0 !important;
-		left: 0 !important;
-		width: 100%;
-		height: 100%;
-		margin: 0;
-		border-radius: 0;
-	}
-}
-
-.floatyButton {
-	position: absolute;
-	bottom: 24px;
-	right: 24px;
-}
-
-.wideTable td {
-	padding: 4px 8px 4px 8px;
-}
-
-.wideTable table {
-	padding: 8px;
-}
-
-paper-fab-menu /deep/ .container {
-	padding: 24px !important;
-}
-
-paper-slider {
-	margin-left: -8px;
-}
-
-.list-subhead {
-	color: rgba(0,0,0,0.54);
-	font-size: 14px;
-	height: 40px;
-	padding-left: 16px;
-	font-weight: 500;
-}
-
-.whiteTop {
-	cursor: initial;
-	border-bottom: black solid 0.5px;
-	border-bottom: rgba(0,0,0,0.12) solid 1px;
-	background: white;
-	padding: 16px;
-	position: relative;
-	border-radius: 2px 2px 0 0;
-}
-
-.whiteTop paper-icon-button {
-	margin: -8px;
-}
-
-.fullwidth {
-	width: 100%;
-}
-
-.padded {
-	padding: 16px;
-}
-
-.listPadded {
-	padding: 0 0 16px 0; 
-}
-
-.rightPadded {
-	padding-right: 16px;
-}
-
-.bottomPadded {
-	padding-bottom: 16px;
-}
-
-.sideMargin {
-	margin-left: 16px;
-	margin-right: 16px;
-}
-
-.vertMargin {
-	margin-top: 16px;
-	margin-bottom: 16px;
-}
-
-.spaceAfter {
-	margin-bottom: 8px;
-}
-
-.s {
-	padding: 0 0 16px 0;
-}
-
-.leftRound{
-	border-radius: 2px 0 0 2px;
-}
-
-.preline {
-	white-space: pre-line;
-}
-
-.prewrap{
-	white-space: pre-wrap;
-}
diff --git a/rpg-docs/client/views/character/features/features.html b/rpg-docs/client/views/character/features/features.html
index 86a9928c..9dbf5a84 100644
--- a/rpg-docs/client/views/character/features/features.html
+++ b/rpg-docs/client/views/character/features/features.html
@@ -1,7 +1,7 @@
 <template name="features">
 	<div fit>
 		<div class="scroll-y" fit>
-			<div class="containers">
+			<div class="column-container">
 				<!--expertiseDice-->
 				{{>resource name="expertiseDice" title="Expertise Dice" color="teal" char=this}}
 				<!--ki-->
@@ -14,22 +14,22 @@
 				{{>resource name="superiorityDice" title="Superiority Dice" color="teal" char=this}}
 				
 				<!--Attacks-->
-				<paper-shadow class="card container"  hero-id="main" {{detailHero}}>
-					<div class="whiteTop" hero-id="toolbar" layout horizontal center {{detailHero}}>
-						<div flex>
-							<div class="containerName subhead">Attacks</div>
-						</div>
-						<!--<paper-icon-button class="black54" id="addAttackButton" icon="add"></paper-icon-button>-->
+				<paper-shadow class="card">
+					<div class="top white">
+						Attacks
 					</div>
-					<div class="containerMain listPadded">
+					<div class="bottom list">
 						{{#each attacks}}
-							<div class="itemSlot">
-								<paper-item class="white attack" hero-id="main" {{detailHero}}>
-									<div layout horizontal class="fullwidth">
-										<div class="headline rightPadded" layout horizontal center>
+							<div class="item-slot">
+								<div class="flexible attack item"
+											hero-id="main" {{detailHero}}>
+									<div layout horizontal>
+										<div class="headline"
+											 style="margin-right: 16px;"
+											 layout horizontal center>
 											{{evaluateSigned ../_id attackBonus}}
 										</div>
-										<div layout vertical flex>
+										<div flex layout vertical>
 											<div class="body2">
 												{{name}}
 											</div>
@@ -43,34 +43,32 @@
 											{{/if}}
 										</div>
 									</div>
-								</paper-item>
+								</div>
 							</div>
 						{{/each}}
 					</div>
 				</paper-shadow>
 
 				<!--Proficiencies-->
-				<paper-shadow class="card container"  hero-id="main" {{detailHero "proficiencies"}}>
-					<div id="proficiencies"
-						 class="whiteTop"
-						 layout horizontal center>
-						<div class="containerName subhead">Proficiencies</div>
+				<paper-shadow class="card">
+					<div class="white top">
+						Proficiencies
 					</div>
-					<div flex class="containerMain listPadded">
+					<div flex class="bottom list">
 						{{#if weaponProfs.count}}
-							<div class="list-subhead" layout horizontal center>Weapons</div>
+							<div class="subhead">Weapons</div>
 						{{/if}}
 						{{#each weaponProfs}}
 							{{> proficiencyListItem}}
 						{{/each}}
 						{{#if armorProfs.count}}
-							<div class="list-subhead" layout horizontal center>Armor</div>
+							<div class="subhead">Armor</div>
 						{{/if}}
 						{{#each armorProfs}}
 							{{> proficiencyListItem}}
 						{{/each}}
 						{{#if toolProfs.count}}
-							<div class="list-subhead" layout horizontal center>Tools</div>
+							<div class="subhead">Tools</div>
 						{{/if}}
 						{{#each toolProfs}}
 							{{> proficiencyListItem}}
@@ -80,23 +78,42 @@
 
 				<!--features-->
 				{{#each features}}
-					<paper-shadow class="card container featureCard"  hero-id="main" {{detailHero}}>
-						<div class="containerTop {{colorClass}}" hero-id="toolbar" layout horizontal center {{detailHero}}>
-							<paper-ripple fit></paper-ripple>
-							<div class="containerName subhead" hero-id="title" flex {{detailHero}}>{{name}}</div>
-							{{#if hasUses}}<div class="subhead" style="margin-right: 8px">{{usesLeft}}/{{usesValue}}</div>{{/if}}
-							<paper-ripple fit></paper-ripple>
+					<paper-shadow class="card featureCard"
+								  hero-id="main" {{detailHero}}>
+						<div class="top {{colorClass}} subhead" 
+							 layout horizontal 
+							 hero-id="toolbar" {{detailHero}}>
+							<div flex hero-id="title" {{detailHero}}>
+								{{name}}
+							</div>
+							{{#if hasUses}}
+								<div style="margin-right: 8px">
+									{{usesLeft}}/{{usesValue}}
+								</div>
+							{{/if}}
 							{{#if canEnable}}
-								<core-tooltip label="Feature enabled" position="left">
-									<paper-checkbox class="enabledCheckbox" checked={{enabled}}></paper-checkbox>
+								<core-tooltip label="Feature enabled"
+											  position="left">
+									<paper-checkbox class="enabledCheckbox" 
+													checked={{enabled}}>
+									</paper-checkbox>
 								</core-tooltip>
 							{{/if}}
 						</div>
-						{{#if description}}<div flex class="containerMain body1 featureDescription">{{description}}</div>{{/if}}
+						{{#if description}}
+							<div flex class="bottom text"
+								 >{{description}}</div>
+						{{/if}}
 						{{#if hasUses}}
-							<div class="containerFoot" layout horizontal center end-justified>
-								<paper-button class="useFeature" disabled={{noUsesLeft}}>Use</paper-button>
-								<paper-button class="resetFeature" disabled={{usesFull}}>Reset</paper-button>
+							<div layout horizontal center end-justified>
+								<paper-button class="useFeature" 
+											  disabled={{noUsesLeft}}>
+									Use
+								</paper-button>
+								<paper-button class="resetFeature" 
+											  disabled={{usesFull}}>
+									Reset
+								</paper-button>
 							</div>
 						{{/if}}
 					</paper-shadow>
@@ -119,18 +136,28 @@
 
 <template name="resource">
 	{{#if char.attributeBase name}}
-		<paper-shadow class="card container" hero-id="main" {{detailHero name char._id}} layout horizontal>
-			<div class="containerLeft {{getColor}}" hero-id="toolbar" {{detailHero name char._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" 
+					  hero-id="main" {{detailHero name char._id}}
+					  layout horizontal>
+			<div class="left {{getColor}} display1 white-text" 
+				 hero-id="toolbar" {{detailHero name char._id}}
+				 layout horizontal center>
+				<div style="margin-right: 8px;">
+					<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">{{char.attributeValue name}}</div>
-				<!--<div class="resourceMax">{{char.attributeBase name}}</div>-->
+				<div>{{char.attributeValue name}}</div>
+				<!--<div>/{{char.attributeBase name}}</div>-->
 			</div>
-			<div class="containerRight clickable" flex relative horizontal layout center>
+			<div class="right clickable" 
+				 flex layout horizontal center>
 				{{title}}
-				<paper-ripple fit></paper-ripple>
 			</div>
 		</paper-shadow>
 	{{/if}}
diff --git a/rpg-docs/client/views/character/features/features.js b/rpg-docs/client/views/character/features/features.js
index 3095329e..3ae8b376 100644
--- a/rpg-docs/client/views/character/features/features.js
+++ b/rpg-docs/client/views/character/features/features.js
@@ -65,7 +65,7 @@ Template.features.events({
 			}
 		});
 	},
-	"tap .featureCard .containerTop": function(event){
+	"tap .featureCard .top": function(event){
 		var featureId = this._id;
 		var charId = Template.parentData()._id;
 		GlobalUI.setDetail({
@@ -128,7 +128,7 @@ Template.resource.events({
 			Characters.update(this.char._id, modifier, {validate: false});
 		}
 	},
-	"tap .containerRight": function(event, instance) {
+	"tap .right": function(event, instance) {
 		GlobalUI.setDetail({
 			template: "attributeDialog",
 			data:     {name: this.title, statName: this.name, charId: this.char._id},
diff --git a/rpg-docs/client/views/character/inventory/inventory.css b/rpg-docs/client/views/character/inventory/inventory.css
deleted file mode 100644
index dbb58299..00000000
--- a/rpg-docs/client/views/character/inventory/inventory.css
+++ /dev/null
@@ -1,152 +0,0 @@
-div#stats {
-	-webkit-column-width: 200px;
-	-moz-column-width: 200px;
-	column-width: 200px;
-	-webkit-column-count: 4;
-	-moz-column-count: 4;
-	column-count: 4;
-}
-
-.containers {
-	-webkit-column-width: 300px;
-	-moz-column-width: 300px;
-	column-width: 300px;
-	-webkit-column-gap: 8px;
-	-moz-column-gap: 8px;
-	column-gap: 8px;
-	-moz-column-fill: balance;
-	column-fill: balance;
-	padding: 8px;
-}
-
-.containerLeft {
-	padding: 16px 16px 16px 24px;
-	display: flex;
-	justify-content: center;
-	flex-direction: row;
-	border-radius: 2px 0 0 2px;
-
-	/* same style as display-1 */
-	font-size: 34px;
-	font-weight: 400;
-	color: #ffffff;
-	color: rgba(255,255,255,0.54);
-	letter-spacing: 0;
-}
-
-.statCard .containerLeft {
-	padding: 16px;
-}
-
-.containerRight {
-	padding: 16px;
-
-	/* same style as subhead */
-	font-size: 16px;
-	font-weight: 400;
-	margin: 0;
-	color: #000;
-	color: rgba(0,0,0,0.87);
-	letter-spacing: 0.010em;
-}
-
-.resourceValue {
-	display: inline-block;
-}
-
-.resourceMax {
-	display: inline-block;
-	align-self: flex-end;
-
-	/* same style as subhead */
-	font-size: 16px;
-	font-weight: 400;
-	margin: 0;
-	color: #fff;
-	color: rgba(255,255,255,0.54);
-	letter-spacing: 0.010em;
-}
-
-.resourceMax:before {
-	content: "/";
-}
-
-.resourceButtons {
-	margin: -16px 8px -16px -16px;
-	align-self: center;
-}
-
-.resourceButtons paper-icon-button{
-	width: 32px;
-	height: 32px;
-	padding: 0;
-	display: block;
-}
-
-.resourceButtons paper-icon-button[disabled]{
-	color: rgba(255, 255, 255, 0.26);
-}
-
-.resourceButtons /deep/ core-icon {
-	width: 32px;
-	height: 32px;
-}
-
-.containerTop {
-	cursor: pointer;
-	padding: 16px;
-	position: relative;
-	border-radius: 2px 2px 0 0;
-}
-
-.equipmentTop {
-	padding: 16px;
-	border-bottom: rgba(0,0,0,0.12) solid 1px;
-}
-
-.containerMain {
-	padding: 16px;
-}
-
-.equipmentMain {
-	padding-bottom: 16px;
-}
-
-.inventoryItem {
-	background: white;
-	transition: box-shadow 0.3s ease,
-		opacity 0.5s ease-in-out;
-	height: 40px;
-	margin: 1px 0 1px 0;
-	font-size: 16px;
-	color: rgba(0,0,0,0.87);
-	letter-spacing: 0.010em;
-}
-
-.inventoryItem core-icon, .inventoryItem paper-icon-button {
-	color: rgba(0,0,0,0.54);
-}
-
-.inventoryItem core-icon {
-	margin-right: 16px;
-}
-
-.inventoryItem /deep/ .button-content {
-	-webkit-flex: 1;
-	flex: 1;
-	-webkit-flex-basis: 0.000000001px;
-	flex-basis: 0.000000001px;
-}
-
-.inventoryItem[hero] {
-	box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.37);
-}
-
-.itemSlot {
-	background-color: rgb(232, 232, 232);
-	background-color: rgba(0, 0, 0, 0.1);
-}
-
-#inventory .containerMain {
-	padding: 0 0 16px 0;
-}
diff --git a/rpg-docs/client/views/character/inventory/inventory.html b/rpg-docs/client/views/character/inventory/inventory.html
index fddbfcb6..f16bd4bc 100644
--- a/rpg-docs/client/views/character/inventory/inventory.html
+++ b/rpg-docs/client/views/character/inventory/inventory.html
@@ -1,73 +1,95 @@
 <template name="inventory">
 	<div fit>
 		<div id="inventory" class="scroll-y" fit>
-			<div class="containers">
+			<div class="column-container">
 				<!--Net Worth-->
-				<paper-shadow class="card container" hero-id="main" {{detailHero}} layout horizontal>
-					<div class="indigo white-text subhead padded leftRound" layout horizontal center>
+				<paper-shadow class="card" layout horizontal>
+					<div class="indigo white-text subhead left">
 						Net Worth
 					</div>
-					<div class="padded" layout horizontal center>
+					<div class="right" flex>
 						{{valueString netWorth}}
 					</div>
 				</paper-shadow>
 				<!--Weight Carried-->
-				<paper-shadow class="card container" hero-id="main" {{detailHero}} layout horizontal>
-					<div class="green white-text subhead padded leftRound" layout horizontal center>
+				<paper-shadow class="card" layout horizontal>
+					<div class="green white-text subhead left">
 						Weight Carried
 					</div>
-					<div class="padded" layout horizontal center>
+					<div class="right" flex>
 						{{round weightCarried}}lbs
 					</div>
 				</paper-shadow>
 				<!--Equipment-->
-				<paper-shadow class="card container equipmentContainer">
-					<div class="equipmentTop" layout horizontal center>
-						<div class="containerName subhead" flex>
+				<paper-shadow class="card equipmentContainer">
+					<div class="white top" layout horizontal center>
+						<div class="subhead" flex>
 							Equipment
 						</div>
-						<div class="caption" style="margin-right: 8px">{{valueString equipmentValue}}</div>
-						<div class="caption">{{round equipmentWeight}}lbs</div>
+						<div class="caption" style="margin-right: 8px">
+							{{valueString equipmentValue}}
+						</div>
+						<div class="caption">
+							{{round equipmentWeight}}lbs
+						</div>
 					</div>
-					<div flex class="equipmentMain">
+					<div flex class="bottom list">
 						{{#if attuned.count}}
-							<div class="list-subhead" layout horizontal center>Attuned</div>
+							<div class="subhead">Attuned</div>
 						{{/if}}
 						{{#each attuned}}
 							{{>inventoryItem}}
 						{{/each}}
-						{{#if attuned.count}}<div class="list-subhead" layout horizontal center>Equipment</div>{{/if}}
+						{{#if attuned.count}}
+							<div class="subhead">Equipment</div>
+						{{/if}}
 						{{#each equipment}}
 							{{>inventoryItem}}
 						{{/each}}
 					</div>
 				</paper-shadow>
 				<!--Carried Items-->
-				<paper-shadow class="card container carriedContainer">
-					<div class="equipmentTop" layout horizontal center>
-						<div class="containerName subhead" flex>
+				<paper-shadow class="card carriedContainer">
+					<div class="white top" layout horizontal center>
+						<div class="subhead">
 							Carried
 						</div>
-						<div class="caption" style="margin-right: 8px">{{valueString carriedValue}}</div>
-						<div class="caption">{{round carriedWeight}}lbs</div>
+						<div class="caption" style="margin-right: 8px">
+							{{valueString carriedValue}}
+						</div>
+						<div class="caption">
+							{{round carriedWeight}}lbs
+						</div>
 					</div>
-					<div flex class="containerMain">
+					<div flex class="bottom list">
 						{{#each carriedItems}}
 							{{>inventoryItem}}
 						{{/each}}
 					</div>
 				</paper-shadow>
 				{{#each containers}}
-					<paper-shadow class="card container itemContainer"  hero-id="main" {{detailHero}} style="order: {{containerOrder}};">
-						<div class="containerTop {{colorClass}}" hero-id="toolbar" layout horizontal center {{detailHero}}>
-							<div class="containerName subhead" hero-id="title" flex {{detailHero}}>{{name}}</div>
-							<div class="caption" style="margin-right: 8px">{{valueString totalValue}}</div>
-							<div class="caption" style="margin-right: 8px">{{round totalWeight}}lbs</div>
+					<paper-shadow class="card itemContainer" 
+								  hero-id="main" {{detailHero}}>
+						<div class="top {{colorClass}}"
+							 hero-id="toolbar" {{detailHero}}
+							 layout horizontal center>
+							<div class="subhead" flex
+								 hero-id="title" {{detailHero}}>
+								{{name}}
+							</div>
+							<div class="caption" style="margin-right: 8px">
+								{{valueString totalValue}}
+							</div>
+							<div class="caption" style="margin-right: 8px">
+								{{round totalWeight}}lbs
+							</div>
 							<core-tooltip label="Container carried" position="left">
-								<paper-checkbox class="carriedCheckbox" checked={{isCarried}}></paper-checkbox>
+								<paper-checkbox class="carriedCheckbox"
+												checked={{isCarried}}>
+								</paper-checkbox>
 							</core-tooltip>
 						</div>
-						<div flex class="containerMain">
+						<div class="bottom list">
 							{{#each items ../_id _id}}
 								{{>inventoryItem}}
 							{{/each}}
@@ -78,17 +100,31 @@
 			<div class="fab-buffer"></div>
 		</div>
 		{{#if canEditCharacter _id}}
-			<paper-fab-menu id="inventoryAddMenu" icon="add" closeIcon="close" duration="0.3">
-				<paper-fab-menu-item id="addItem" icon="note-add" color="#d23f31" tooltip="Item"></paper-fab-menu-item>
-				<paper-fab-menu-item id="addContainer" icon="work" color="#d23f31" tooltip="Container"></paper-fab-menu-item>
+			<paper-fab-menu id="inventoryAddMenu" 
+							icon="add" 
+							closeIcon="close" 
+							duration="0.3">
+				<paper-fab-menu-item id="addItem"
+									 icon="note-add"
+									 color="#d23f31"
+									 tooltip="Item">
+				</paper-fab-menu-item>
+				<paper-fab-menu-item id="addContainer"
+									 icon="work"
+									 color="#d23f31"
+									 tooltip="Container">
+				</paper-fab-menu-item>
 			</paper-fab-menu>
 		{{/if}}
 	</div>
 </template>
 
 <template name="inventoryItem">
-	<div class="itemSlot">
-		<paper-item class="inventoryItem {{hidden}}" hero-id="main" noink {{detailHero}} layout horizontal draggable="true">
+	<div class="item-slot">
+		<paper-item class="item inventoryItem {{hidden}}" noink
+					hero-id="main" {{detailHero}}
+					layout horizontal
+					draggable="true">
 			{{#if ne1 quantity}}{{quantity}}&nbsp;{{/if}}{{pluralName}}
 		</paper-item>
 	</div>
diff --git a/rpg-docs/client/views/character/inventory/inventory.js b/rpg-docs/client/views/character/inventory/inventory.js
index ffecf135..ae0a4ce0 100644
--- a/rpg-docs/client/views/character/inventory/inventory.js
+++ b/rpg-docs/client/views/character/inventory/inventory.js
@@ -145,7 +145,7 @@ Template.inventory.events({
 			heroId:   itemId,
 		});
 	},
-	"tap .containerTop": function(event){
+	"tap .itemContainer .top": function(event){
 		GlobalUI.setDetail({
 			template: "containerDialog",
 			data:     {containerId: this._id, charId: this.charId},
diff --git a/rpg-docs/client/views/character/journal/journal.html b/rpg-docs/client/views/character/journal/journal.html
index d283493c..1bb050e1 100644
--- a/rpg-docs/client/views/character/journal/journal.html
+++ b/rpg-docs/client/views/character/journal/journal.html
@@ -1,67 +1,91 @@
 <template name="journal">
 	<div fit>
 		<div id="journal" class="scroll-y" fit>
-			<div class="containers">
+			<div class="column-container">
 				<!--Experience Table-->
-				<paper-shadow class="card container experiencesCard"  hero-id="main" {{detailHero}}>
-					<div class="whiteTop" hero-id="toolbar" layout horizontal center {{detailHero}}>
-						<div class="containerName subhead" flex>Experience</div>
-						<div class="subhead">{{experience}} XP</div>
+				<paper-shadow class="card experiencesCard"
+							  hero-id="main" {{detailHero}}>
+					<div class="top white subhead"
+						 hero-id="toolbar" {{detailHero}}
+						 layout horizontal center>
+						<div flex>Experience</div>
+						<div >{{experience}} XP</div>
 						<paper-icon-button class="black54" id="addXP" icon="add"></paper-icon-button>
 					</div>
-					<div class="containerMain experiences">
+					<div class="bottom list">
 						{{#each experiences}}
-							<div class="itemSlot">
-								<paper-item class="inventoryItem experience" hero-id="main" {{detailHero}} layout horizontal>
-									<div flex>{{name}}</div><div class="xpValue">{{value}}</div>
-								</paper-item>
+							<div class="item-slot">
+								<div class="item experience"
+									 hero-id="main" {{detailHero}}
+									 layout horizontal center>
+									<div flex>{{name}}</div>
+									<div class="xpValue">{{value}}</div>
+								</div>
 							</div>
 						{{/each}}
 					</div>
 					{{#if moreExperiencesOrCollapse}}
-						<div class="containerFoot" layout="" horizontal="" center="" end-justified="">
-							<paper-button id="moreExperiences" disabled={{notMoreExperiences}}>Load More</paper-button>
-							<paper-button id="lessExperiences" disabled={{cantCollapse}}>Collapse</paper-button>
+						<div layout horizontal center end-justified>
+							<paper-button id="moreExperiences"
+										  disabled={{notMoreExperiences}}>
+								Load More
+							</paper-button>
+							<paper-button id="lessExperiences"
+										  disabled={{cantCollapse}}>
+								Collapse
+							</paper-button>
 						</div>
 					{{/if}}
 				</paper-shadow>
 				<!--Class Table-->
-				<paper-shadow class="card container"  hero-id="main" {{detailHero}}>
-					<div class="whiteTop" hero-id="toolbar" layout horizontal center {{detailHero}}>
+				<paper-shadow class="card"
+							  hero-id="main" {{detailHero}}>
+					<div class="white top"
+						 hero-id="toolbar" {{detailHero}}
+						 layout horizontal center>
 						<div flex>
-							<div class="containerName subhead">Level {{level}}</div>
+							<div class="containerName subhead">
+								Level {{level}}
+							</div>
 							{{#if nextLevelXP}}
 								<div class="caption">
 									Next Level: {{nextLevelXP}}XP
 								</div>
 							{{/if}}
 						</div>
-						<paper-icon-button class="black54" id="addClassButton" icon="add"></paper-icon-button>
+						<paper-icon-button class="black54"
+										   id="addClassButton"
+										   icon="add">
+						</paper-icon-button>
 					</div>
-					<div class="containerMain experiences">
-						<div class="itemSlot">
-							<paper-item class="inventoryItem race" hero-id="main" {{detailHero "race" _id}} layout horizontal>
+					<div class="bottom list">
+						<div class="item-slot">
+							<div class="item race"
+								 hero-id="main" {{detailHero "race" _id}}
+								 layout horizontal center>
 								{{race}}
-							</paper-item>
+							</div>
 						</div>
 						{{#each classes}}
-							<div class="itemSlot">
-								<paper-item class="inventoryItem class" hero-id="main" {{detailHero}} layout horizontal>
+							<div class="item-slot">
+								<div class="item class"
+									 hero-id="main" {{detailHero}}
+									 layout horizontal center>
 									{{name}}&nbsp;{{level}}
-								</paper-item>
+								</div>
 							</div>
 						{{/each}}
 					</div>
 				</paper-shadow>
 				<!--Notes-->
 				{{#each notes}}
-					<paper-shadow class="card container"  hero-id="main" {{detailHero}}>
-						<div class="containerTop {{colorClass}} noteTop" hero-id="toolbar" layout horizontal center {{detailHero}}>
-							<div flex>
-								<div class="containerName subhead">{{name}}</div>
-							</div>
+					<paper-shadow class="card"  hero-id="main" {{detailHero}}>
+						<div class="top {{colorClass}} noteTop subhead"
+							 hero-id="toolbar" {{detailHero}}
+							 layout horizontal center>
+							{{name}}
 						</div>
-						<div class="containerMain preline">{{description}}</div>
+						<div class="bottom text">{{description}}</div>
 					</paper-shadow>
 				{{/each}}
 			</div>
diff --git a/rpg-docs/client/views/character/journal/noteDialog/noteDialog.html b/rpg-docs/client/views/character/journal/noteDialog/noteDialog.html
index 31425db6..18ba7a12 100644
--- a/rpg-docs/client/views/character/journal/noteDialog/noteDialog.html
+++ b/rpg-docs/client/views/character/journal/noteDialog/noteDialog.html
@@ -3,16 +3,28 @@
 		{{#baseDialog title=name class=colorClass startEditing=../startEditing}}
 			<div class="prewrap">{{description}}</div>
 		{{else}}
-			<!--Name-->
-			<div horizontal layout>
-				<paper-input id="noteNameInput" label="Name" floatinglabel value={{name}} flex></paper-input>
-			</div>
-			<!--Description-->
-			<paper-input-decorator label="Description" floatinglabel layout vertical>
-				<paper-autogrow-textarea>
-					<textarea id="noteDescriptionInput" value={{description}}></textarea>
-				</paper-autogrow-textarea>
-			</paper-input-decorator>
+			{{> noteDialogEdit}}
 		{{/baseDialog}}
 	{{/with}}
+</template>
+
+<template name="noteDialogEdit">
+	<!--Name-->
+	<div horizontal layout>
+		<paper-input id="noteNameInput"
+					 label="Name"
+					 floatinglabel
+					 value={{name}}
+					 flex>
+		</paper-input>
+	</div>
+	<!--Description, formatting this nicely breaks it, leave it as is-->
+	<paper-input-decorator label="Description"
+						   floatinglabel
+						   layout vertical>
+		<paper-autogrow-textarea>
+			<textarea id="noteDescriptionInput"
+					  value={{description}}></textarea>
+		</paper-autogrow-textarea>
+	</paper-input-decorator>
 </template>
\ No newline at end of file
diff --git a/rpg-docs/client/views/character/journal/noteDialog/noteDialog.js b/rpg-docs/client/views/character/journal/noteDialog/noteDialog.js
index 639cb77e..84a4a6c8 100644
--- a/rpg-docs/client/views/character/journal/noteDialog/noteDialog.js
+++ b/rpg-docs/client/views/character/journal/noteDialog/noteDialog.js
@@ -1,5 +1,7 @@
-Template.noteDialog.onRendered(function(){
-	updatePolymerInputs(this);
+Template.noteDialog.helpers({
+	note: function(){
+		return Notes.findOne(this.noteId);
+	}
 });
 
 Template.noteDialog.events({
@@ -11,6 +13,13 @@ Template.noteDialog.events({
 		GlobalUI.deletedToast(instance.data.noteId, "Notes", "Note");
 		GlobalUI.closeDetail();
 	},
+});
+
+Template.noteDialogEdit.onRendered(function(){
+	updatePolymerInputs(this);
+});
+
+Template.noteDialogEdit.events({
 	"change #noteNameInput, input #noteNameInput": function(event){
 		var value = event.currentTarget.value;
 		Notes.update(this._id, {$set: {name: value}});
@@ -20,9 +29,3 @@ Template.noteDialog.events({
 		Notes.update(this._id, {$set: {description: value}});
 	},
 });
-
-Template.noteDialog.helpers({
-	note: function(){
-		return Notes.findOne(this.noteId);
-	}
-});
diff --git a/rpg-docs/client/views/character/persona/persona.html b/rpg-docs/client/views/character/persona/persona.html
index 800d3396..8b5b696c 100644
--- a/rpg-docs/client/views/character/persona/persona.html
+++ b/rpg-docs/client/views/character/persona/persona.html
@@ -1,7 +1,7 @@
 <template name="persona">
 	<div fit>
 		<div id="persona" class="scroll-y" fit>
-			<div class="containers">
+			<div class="column-container">
 				{{#with characterDetails}}
 					{{#containerCardHelper this}}{{alignment}} {{gender}} {{race}}{{/containerCardHelper}}
 				{{/with}}
@@ -11,11 +11,11 @@
 				{{> containerCard characterField "bonds" "Bonds"}}
 				{{> containerCard characterField "flaws" "Flaws"}}
 				{{> containerCard characterField "backstory" "Background"}}
-				<paper-shadow class="card container">
-					<div class="containerTop whiteTop" layout horizontal center>
-						<div class="containerName subhead" flex>Languages</div>
+				<paper-shadow class="card">
+                    <div class="white top subhead">
+                      Languages
 					</div>
-					<div flex class="containerMain listPadded">
+					<div class="bottom list">
 						{{#each languages}}
 							{{> proficiencyListItem}}
 						{{/each}}
@@ -31,10 +31,15 @@
 </template>
 
 <template name="containerCardHelper">
-	<paper-shadow class="card container {{class}}"  hero-id="main" {{detailHero field ../_id}}>
-		<div class="containerTop {{colorClass}} {{topClass}}" hero-id="toolbar" layout horizontal center {{detailHero field ../_id}}>
-			<div class="containerName subhead" hero-id="title" flex {{detailHero field ../_id}}>{{title}}</div>
+	<paper-shadow class="card {{class}}"
+                  hero-id="main" {{detailHero field ../_id}}>
+        <div class="top subhead {{colorClass}} {{topClass}}"
+             hero-id="toolbar" {{detailHero field ../_id}}>
+			<div class="subhead" flex
+                 hero-id="title" {{detailHero field ../_id}}>
+              {{title}}
+          </div>
 		</div>
-		<div flex class="containerMain prewrap">{{> UI.contentBlock}}</div>
+		<div class="bottom text">{{> UI.contentBlock}}</div>
 	</paper-shadow>
 </template>
\ No newline at end of file
diff --git a/rpg-docs/client/views/character/proficiencies/proficiencyListItem/proficiencyListItem.html b/rpg-docs/client/views/character/proficiencies/proficiencyListItem/proficiencyListItem.html
index aac439eb..944e9eb4 100644
--- a/rpg-docs/client/views/character/proficiencies/proficiencyListItem/proficiencyListItem.html
+++ b/rpg-docs/client/views/character/proficiencies/proficiencyListItem/proficiencyListItem.html
@@ -1,8 +1,11 @@
 <template name="proficiencyListItem">
-	<div class="itemSlot">
-		<paper-item noink class="white proficiencyItem" hero-id="main" {{detailHero}}>
-			<core-icon icon="{{profIcon}}" class="black54"></core-icon>
-			<div class="sideMargin">{{getName}}</div>
-		</paper-item>
+	<div class="item-slot">
+		<div class="proficiency item small"
+			 hero-id="main" {{detailHero}}
+			 layout horizontal center>
+			<core-icon icon="{{profIcon}}"
+					   style="margin-right: 16px;"></core-icon>
+			<div flex>{{getName}}</div>
+		</div>
 	</div>
 </template>
\ No newline at end of file
diff --git a/rpg-docs/client/views/character/proficiencies/proficiencyListItem/proficiencyListItem.js b/rpg-docs/client/views/character/proficiencies/proficiencyListItem/proficiencyListItem.js
index 177564a0..5f5ce19b 100644
--- a/rpg-docs/client/views/character/proficiencies/proficiencyListItem/proficiencyListItem.js
+++ b/rpg-docs/client/views/character/proficiencies/proficiencyListItem/proficiencyListItem.js
@@ -14,7 +14,7 @@ Template.proficiencyListItem.helpers({
 });
 
 Template.proficiencyListItem.events({
-	"tap .proficiencyItem": function(event, instance){
+	"tap .proficiency": function(event, instance){
 		openParentDialog(this.parent, this.charId, this._id);
 	}
 });
diff --git a/rpg-docs/client/views/character/spells/spells.html b/rpg-docs/client/views/character/spells/spells.html
index 9da79085..8ee12bb1 100644
--- a/rpg-docs/client/views/character/spells/spells.html
+++ b/rpg-docs/client/views/character/spells/spells.html
@@ -1,84 +1,120 @@
 <template name="spells">
 	<div fit>
 		<div id="spells" class="scroll-y" fit>
-			<div class="spellsContainer" layout horizontal start wrap>
+			<div style="padding: 4px;" 
+				 layout horizontal start wrap>
 				{{#if hasSlots}}
-					<paper-shadow class="card container spellSlotContainer"  hero-id="main" {{detailHero}}>
-						<div class="containerTop whiteTop" layout horizontal center>
-							<div class="containerName subhead" hero-id="title" flex>Spell Slots</div>
+					<paper-shadow class="card"
+								  style="margin: 4px;"
+								  hero-id="main" {{detailHero}}>
+						<div class="white top subhead"
+							 layout horizontal center>
+							Spell Slots
 						</div>
-						<div flex class="containerMain">
+						<div class="bottom list">
 							{{#each levels}}{{#if showSlots ..}}
-								<div class="itemSlot">
-									<paper-item class="inventoryItem spellSlot" hero-id="main" {{detailHero slotStatName ../_id}} layout horizontal>
-										<div class="slotName">
+								<div class="item-slot">
+									<div class="item spellSlot"
+												hero-id="main" {{detailHero slotStatName ../_id}}
+												layout horizontal center>
+										<div style="margin-right: 16px">
 											{{name}}
 										</div>
 										<div flex layout horizontal center>
 											{{#each slotBubbles ..}}
-												<paper-icon-button class="slotBubble" icon={{icon}} disabled={{disabled}}></paper-icon-button>
+												<paper-icon-button class="slotBubble"
+																   icon={{icon}}
+																   disabled={{disabled}}>
+												</paper-icon-button>
 											{{/each}}
 										</div>
-									</paper-item>
+									</div>
 								</div>
 							{{/if}}{{/each}}
 						</div>
 					</paper-shadow>
 				{{/if}}
 				{{#each spellLists}}
-					<paper-shadow class="card container spellList"  hero-id="main" {{detailHero}} flex>
-						<div class="containerTop {{colorClass}}" hero-id="toolbar" layout horizontal center {{detailHero}}>
+					<paper-shadow class="card spellList" flex
+								  hero-id="main" {{detailHero}}
+								  style="margin: 4px;">
+						<div class="top {{colorClass}}"
+							 hero-id="toolbar" {{detailHero}}
+							 layout horizontal center>
 							<div flex>
-								<div class="containerName subhead">{{name}}</div>
+								<div class="subhead">{{name}}</div>
 								<div class="caption">
 									{{#if saveDC}}
-										Save DC: {{evaluate charId saveDC}}
-										<div style="width: 16px; display: inline-block;"></div>
+										<span style="margin-right: 16px;">
+											Save DC: {{evaluate charId saveDC}}
+										</span>
 									{{/if}}
 									{{#if attackBonus}}
-										Attack Bonus: {{evaluateSigned charId attackBonus}}
+										<span>
+											Attack Bonus: {{evaluateSigned charId attackBonus}}
+										</span>
 									{{/if}}
 								</div>
 							</div>
 							{{#if settings.showUnprepared}}
-								{{#if maxPrepared}}<div class="subhead">{{numPrepared}} / {{evaluate charId maxPrepared}}</div>{{/if}}
-								<core-tooltip label="Done" position="left">
-									<paper-icon-button class="finishPrep" icon="done"></paper-icon-button>
-							</core-tooltip>
+								{{#if maxPrepared}}
+									<div class="subhead">
+										{{numPrepared}} / {{evaluate charId maxPrepared}}
+									</div>
+								{{/if}}
+								<core-tooltip label="Done"
+											  position="left">
+									<paper-icon-button class="finishPrep"
+													   icon="done">
+									</paper-icon-button>
+								</core-tooltip>
 							{{else}}
-								<core-tooltip label="Change prepared spells" position="left">
-									<paper-icon-button class="prepSpells" icon="book"></paper-icon-button>
+								<core-tooltip label="Change prepared spells"
+											  position="left">
+									<paper-icon-button class="prepSpells"
+													   icon="book">
+									</paper-icon-button>
 								</core-tooltip>
 							{{/if}}
 						</div>
-						<div class="containerMain">
+						<div class="bottom list column-container">
 							{{#each levels}}
 								<div class="spellLevel">
 									{{#if spellCount .. ../../_id}}
-										<div class="list-subhead" layout horizontal center>
+										<div class="subhead">
 											{{name}}
 										</div>
 									{{/if}}
 									{{#each spells ../_id ../../_id}}
 										{{#if showSpell ../../settings.showUnprepared}}
-											<div class="itemSlot">
-												<paper-item class="inventoryItem spell" hero-id="main" {{detailHero}} 
-															layout horizontal center>
-														<!--disabled={{cantCast ../level ../../..}} to grey out spells above highest usable slot-->
+											<div class="item-slot">
+												<div class="tall spell item"
+													 hero-id="main" {{detailHero}}
+													 layout horizontal center>
 													<core-icon icon="social:whatshot" 
-															   style="color: {{hexColor color}};"
+															   style="color: {{hexColor color}};
+																	  margin-right: 16px;"
 															   ></core-icon>
 													<div flex layout vertical>
 														<div>{{name}}</div>
 														<div class="caption">
-															{{school}} {{castingTime}}
-															{{#if ritual}}(ritual){{/if}}{{#if spellComponents}} - {{spellComponents}}{{/if}}
+															{{school}}
+															{{castingTime}}
+															{{#if ritual}}
+																(ritual)
+															{{/if}}
+															{{#if spellComponents}}
+																- {{spellComponents}}
+															{{/if}}
 														</div>
 													</div>
 													{{#if ../../settings.showUnprepared}}
-														<paper-checkbox class="preparedCheckbox" checked={{isPrepared}} disabled={{cantUnprepare}}></paper-checkbox>
+														<paper-checkbox class="preparedCheckbox"
+																		checked={{isPrepared}}
+																		disabled={{cantUnprepare}}>
+														</paper-checkbox>
 													{{/if}}
-												</paper-item>
+												</div>
 											</div>
 										{{/if}}
 									{{/each}}
@@ -92,9 +128,20 @@
 		</div>
 	</div>
 	{{#if canEditCharacter _id}}
-		<paper-fab-menu id="inventoryAddMenu" icon="add" closeIcon="close" duration="0.3">
-			<paper-fab-menu-item id="addSpell" icon="note-add" color="#d23f31" tooltip="Spell"></paper-fab-menu-item>
-			<paper-fab-menu-item id="addSpellList" icon="work" color="#d23f31" tooltip="Spell List"></paper-fab-menu-item>
+		<paper-fab-menu id="inventoryAddMenu"
+						icon="add"
+						closeIcon="close"
+						duration="0.3">
+			<paper-fab-menu-item id="addSpell"
+								 icon="note-add"
+								 color="#d23f31"
+								 tooltip="Spell">
+			</paper-fab-menu-item>
+			<paper-fab-menu-item id="addSpellList"
+								 icon="work"
+								 color="#d23f31"
+								 tooltip="Spell List">
+			</paper-fab-menu-item>
 		</paper-fab-menu>
 	{{/if}}
 </template>
\ No newline at end of file
diff --git a/rpg-docs/client/views/character/spells/spells.js b/rpg-docs/client/views/character/spells/spells.js
index 97cfc018..c0529ffa 100644
--- a/rpg-docs/client/views/character/spells/spells.js
+++ b/rpg-docs/client/views/character/spells/spells.js
@@ -170,7 +170,7 @@ Template.spells.events({
 			heroId:   charId + stat,
 		});
 	},
-	"tap .containerTop": function(event){
+	"tap .spellList .top": function(event){
 		GlobalUI.setDetail({
 			template: "spellListDialog",
 			data:     {spellListId: this._id, charId: this.charId},
diff --git a/rpg-docs/client/views/character/stats/abilityCards/abilityCards.html b/rpg-docs/client/views/character/stats/abilityCards/abilityCards.html
index fb6585b8..eb32ac7a 100644
--- a/rpg-docs/client/views/character/stats/abilityCards/abilityCards.html
+++ b/rpg-docs/client/views/character/stats/abilityCards/abilityCards.html
@@ -1,5 +1,5 @@
 <template name="abilityMiniCard">
-	<paper-shadow class="card abilityMiniCard" 
+	<paper-shadow class="card abilityMiniCard clickable" 
 				  hero-id="main" {{detailHero ability ../_id}}
 				  layout horizontal>
 		<div class="left white-text {{color}}"
diff --git a/rpg-docs/client/views/character/stats/attributeDialog/attributeDialog.html b/rpg-docs/client/views/character/stats/attributeDialog/attributeDialog.html
index 1e7b3405..ee851349 100644
--- a/rpg-docs/client/views/character/stats/attributeDialog/attributeDialog.html
+++ b/rpg-docs/client/views/character/stats/attributeDialog/attributeDialog.html
@@ -1,6 +1,6 @@
 <!-- needs name, char, and statName -->
 <template name="attributeDialog">
-	{{#baseDialog title=name class=colorClass hideEdit=true}}
+	{{#baseDialog title=name class=color hideEdit=true}}
 		{{> attributeDialogView}}
 	{{/baseDialog}}
 </template>
diff --git a/rpg-docs/client/views/character/stats/attributeDialog/attributeDialog.js b/rpg-docs/client/views/character/stats/attributeDialog/attributeDialog.js
index 5e588a98..81b461be 100644
--- a/rpg-docs/client/views/character/stats/attributeDialog/attributeDialog.js
+++ b/rpg-docs/client/views/character/stats/attributeDialog/attributeDialog.js
@@ -93,6 +93,14 @@ var abilities = {
 	charisma: {name: "Charisma"},
 };
 
+Template.attributeDialog.helpers({
+	color: function(){
+		if (this.color) return this.color + " white-text";
+		var char = Characters.findOne(this.charId, {fields: {color: 1}});
+		if (char) return getColorClass(char.color);
+	},
+});
+
 Template.attributeDialogView.helpers({
 	or: function(a, b, c){
 		return a || b || c;
diff --git a/rpg-docs/client/views/character/stats/healthCard/healthCard.html b/rpg-docs/client/views/character/stats/healthCard/healthCard.html
index a2f58a55..20c3a788 100644
--- a/rpg-docs/client/views/character/stats/healthCard/healthCard.html
+++ b/rpg-docs/client/views/character/stats/healthCard/healthCard.html
@@ -2,19 +2,21 @@
 	<paper-shadow class="card container healthCard" 
 				  hero-id="main" {{detailHero "hitPoints" _id}} 
 				  layout horizontal wrap>
-		<div class="green white-text subhead padded leftRound" 
+		<div class="green white-text subhead left" 
 			 hero-id="toolbar" {{detailHero "hitPoints" _id}}
-			 layout vertical center>
+			 layout vertical center center-justified>
 			<div class="hitPointTitle clickable">Hit Points</div>
 			<paper-icon-button class="white54" id="addTempHP" icon="add"></paper-icon-button>
 		</div>
-		<div class="padded" flex layout vertical center-justified style="min-width: 180px;">
-			<paper-slider id="hitPointSlider"
-						  value={{attributeValue "hitPoints"}}
-						  max={{attributeBase "hitPoints"}} 
-						  editable pin
-						  role="slider"
-						  ></paper-slider>
+		<div class="right" flex layout vertical center-justified style="min-width: 180px;">
+			<div layout horizontal>
+				<paper-slider id="hitPointSlider"
+							  value={{attributeValue "hitPoints"}}
+							  max={{attributeBase "hitPoints"}} 
+							  editable pin
+							  role="slider"
+							  ></paper-slider>
+			</div>
 			{{#each tempHitPoints}}
 				<div>
 					{{name}}
diff --git a/rpg-docs/client/views/character/stats/hitDice/hitDice.css b/rpg-docs/client/views/character/stats/hitDice/hitDice.css
deleted file mode 100644
index 52ca305f..00000000
--- a/rpg-docs/client/views/character/stats/hitDice/hitDice.css
+++ /dev/null
@@ -1,15 +0,0 @@
-.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.js b/rpg-docs/client/views/character/stats/hitDice/hitDice.js
index 9e3c8df3..bdaef24d 100644
--- a/rpg-docs/client/views/character/stats/hitDice/hitDice.js
+++ b/rpg-docs/client/views/character/stats/hitDice/hitDice.js
@@ -30,7 +30,12 @@ Template.hitDice.events({
 		var title = "d" + this.diceNum + " Hit Dice";
 		GlobalUI.setDetail({
 			template: "attributeDialog",
-			data:     {name: title, statName: this.name, charId: charId},
+			data:     {
+				name: title,
+				statName: this.name,
+				charId: charId,
+				color: "green",
+			},
 			heroId:   charId + this.name,
 		});
 	},
diff --git a/rpg-docs/client/views/character/stats/skillDialog/skillDialog.html b/rpg-docs/client/views/character/stats/skillDialog/skillDialog.html
index c03a2acd..954dcd61 100644
--- a/rpg-docs/client/views/character/stats/skillDialog/skillDialog.html
+++ b/rpg-docs/client/views/character/stats/skillDialog/skillDialog.html
@@ -1,6 +1,6 @@
 <!-- needs name, char, and skillName -->
 <template name="skillDialog">
-	{{#baseDialog title=name class=colorClass hideEdit=true}}
+	{{#baseDialog title=name class=color hideEdit=true}}
 		{{> skillDialogView}}
 	{{/baseDialog}}
 </template>
diff --git a/rpg-docs/client/views/character/stats/skillDialog/skillDialog.js b/rpg-docs/client/views/character/stats/skillDialog/skillDialog.js
index 5cd1658e..8976b1aa 100644
--- a/rpg-docs/client/views/character/stats/skillDialog/skillDialog.js
+++ b/rpg-docs/client/views/character/stats/skillDialog/skillDialog.js
@@ -93,6 +93,14 @@ var abilities = {
 	charisma: {name: "Charisma"},
 };
 
+Template.skillDialog.helpers({
+	color: function(){
+		if (this.color) return this.color + " white-text";
+		var char = Characters.findOne(this.charId, {fields: {color: 1}});
+		if (char) return getColorClass(char.color);
+	},
+});
+
 Template.skillDialogView.helpers({
 	or: function(a, b, c){
 		return a || b || c;
diff --git a/rpg-docs/client/views/character/stats/skillRow/skillRow.scss b/rpg-docs/client/views/character/stats/skillRow/skillRow.scss
index c443113f..11499723 100644
--- a/rpg-docs/client/views/character/stats/skillRow/skillRow.scss
+++ b/rpg-docs/client/views/character/stats/skillRow/skillRow.scss
@@ -1,7 +1,4 @@
 .skill-row {
-	core-icon {
-		color: rgba(0,0,0,0.54);
-	}
 	.skill-mod{
 		width: 45px;
 		text-align: center;
diff --git a/rpg-docs/client/views/character/stats/stats.html b/rpg-docs/client/views/character/stats/stats.html
index 2627dfec..20a63d87 100644
--- a/rpg-docs/client/views/character/stats/stats.html
+++ b/rpg-docs/client/views/character/stats/stats.html
@@ -1,9 +1,9 @@
 <template name="stats">
 	<div class="scroll-y" fit>
-		<div class="resourceCards" layout horizontal wrap>
+		<div style="padding: 8px 8px 0 8px">
 			{{> healthCard}}
 		</div>
-		<div id="stats" class="column-container" >
+		<div class="column-container thin-columns" >
 			<!--Ability Scores-->
 			{{> abilityMiniCard ability="strength" title="Strength" color="red"}}
 			{{> abilityMiniCard ability="dexterity" title="Dexterity" color="indigo"}}
@@ -27,11 +27,11 @@
 			{{>hitDice name="d10HitDice" diceNum="10" char=this}}
 			{{>hitDice name="d12HitDice" diceNum="12" char=this}}
 			<!--Saving Throws-->
-			<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>
+			<paper-shadow class="card">
+				<div class="top white subhead">
+					Saving Throws
 				</div>
-				<div flex class="containerMain">
+				<div flex class="bottom list">
 					{{> skillRow name="Strength" skill="strengthSave"}}
 					{{> skillRow name="Dexterity" skill="dexteritySave"}}
 					{{> skillRow name="Constitution" skill="constitutionSave"}}
@@ -41,11 +41,11 @@
 				</div>
 			</paper-shadow>
 			<!--Skills-->
-			<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>
+			<paper-shadow class="card">
+				<div class="top white subhead">
+					Skills
 				</div>
-				<div flex class="containerMain">
+				<div flex class="bottom list">
 					{{> skillRow name="Acrobatics" skill="acrobatics"}}
 					{{> skillRow name="Animal Handling" skill="animalHandling"}}
 					{{> skillRow name="Arcana" skill="arcana"}}
@@ -71,7 +71,7 @@
 </template>
 
 <template name="statCard">
-	<paper-shadow class="card statCard" hero-id="main" {{detailHero stat ../_id}} layout horizontal>
+	<paper-shadow class="card statCard clickable" hero-id="main" {{detailHero stat ../_id}} layout horizontal>
 		<div class="left display1 white-text {{color}}"
 			 hero-id="toolbar" {{detailHero stat ../_id}}>
 			{{#if isSkill}}
diff --git a/rpg-docs/client/views/character/stats/stats.js b/rpg-docs/client/views/character/stats/stats.js
index 0f43e235..5322b6da 100644
--- a/rpg-docs/client/views/character/stats/stats.js
+++ b/rpg-docs/client/views/character/stats/stats.js
@@ -4,13 +4,23 @@ Template.stats.events({
 		if (this.isSkill){
 			GlobalUI.setDetail({
 				template: "skillDialog",
-				data:     {name: this.name, skillName: this.stat, charId: charId},
+				data:     {
+					name: this.name,
+					skillName: this.stat,
+					charId: charId,
+					color: this.color,
+				},
 				heroId:   charId + this.stat,
 			});
 		} else {
 			GlobalUI.setDetail({
 				template: "attributeDialog",
-				data:     {name: this.name, statName: this.stat, charId: charId},
+				data:     {
+					name: this.name,
+					statName: this.stat,
+					charId: charId,
+					color: this.color,
+				},
 				heroId:   charId + this.stat,
 			});
 		}
@@ -19,7 +29,12 @@ Template.stats.events({
 		var charId = Template.parentData()._id;
 		GlobalUI.setDetail({
 			template: "attributeDialog",
-			data:     {name: this.title, statName: this.ability, charId: charId},
+			data:     {
+				name: this.title,
+				statName: this.ability,
+				charId: charId,
+				color: this.color,
+			},
 			heroId:   charId + this.ability,
 		});
 	},
@@ -27,15 +42,24 @@ Template.stats.events({
 		var skill = this.skill;
 		var charId = instance.data._id;
 		GlobalUI.setDetail({
-				template: "skillDialog",
-				data:     {name: this.name, skillName: skill, charId: charId},
-				heroId:   charId + skill,
-			});
+			template: "skillDialog",
+			data:     {
+				name: this.name,
+				skillName: skill,
+				charId: charId,
+			},
+			heroId:   charId + skill,
+		});
 	},
 	"tap .hitPointTitle": function(event, instance) {
 		GlobalUI.setDetail({
 			template: "attributeDialog",
-			data:     {name: "Hit Points", statName: "hitPoints", charId: this._id},
+			data:     {
+				name: "Hit Points",
+				statName: "hitPoints",
+				charId: this._id,
+				color: "green",
+			},
 			heroId:   this._id + "hitPoints",
 		});
 	},
diff --git a/rpg-docs/client/views/characterList/characterSideList.css b/rpg-docs/client/views/characterList/characterSideList.css
index bff385d9..c6f4204f 100644
--- a/rpg-docs/client/views/characterList/characterSideList.css
+++ b/rpg-docs/client/views/characterList/characterSideList.css
@@ -12,4 +12,11 @@
 	height: 8px;
 	margin-right: 8px;
 	width: 8px;
+}
+
+.singleLineItem div {
+	text-overflow: ellipsis;
+	/* Required for text-overflow to do anything */
+	white-space: nowrap;
+	overflow: hidden;
 }
\ No newline at end of file
diff --git a/rpg-docs/client/views/characterList/characterSideList.js b/rpg-docs/client/views/characterList/characterSideList.js
index 901d9d97..956698cd 100644
--- a/rpg-docs/client/views/characterList/characterSideList.js
+++ b/rpg-docs/client/views/characterList/characterSideList.js
@@ -21,8 +21,10 @@ Template.characterSideList.helpers({
 Template.characterSideList.events({
 	"tap .singleLineItem": function(event, instance) {
 		Router.go("characterSheet", {_id: this._id});
+		$("core-drawer-panel").get(0).closeDrawer();
 	},
 	"tap core-item": function() {
 		Router.go("characterList");
+		$("core-drawer-panel").get(0).closeDrawer();
 	},
 });
diff --git a/rpg-docs/client/views/guide/guide.html b/rpg-docs/client/views/guide/guide.html
index 3909af1c..19cc60ab 100644
--- a/rpg-docs/client/views/guide/guide.html
+++ b/rpg-docs/client/views/guide/guide.html
@@ -1,92 +1,94 @@
 <template name="guide">
-	<div class="wallOfText">
-		<h1>Dicecloud Beta</h1>
-		<p>Welcome to the Dicecloud beta. Please don't share the link with people you don't actively play with, since the beta is intended to be small, and your experience will probably get laggy if it gets more traffic than I'm expecting.</p>
-		<p>The beta is going to start with just the character sheet. You can play D&amp;D without minis and maps, without a pre-written adventure, you can play without a lot of things, but the character sheet is necessary. So I'm starting here and working my way outwards.</p>
-		<p>I will eventually have public bug tracking and feature requests going, but for now I'm going to track comments, feedback and suggestions on <a href="http://reddit.com/r/dicecloud">this subreddit</a>. If you've never used reddit before, all you need is a username and password to sign up. So it should be pretty accessible.</p>
-		<h2>Character Sheet Philosophy</h2>
-		<p>Setting up your character on Dicecloud is going to take you a little longer than just filling it in on a paper character sheet would have. The goal of using an online sheet is to make actually playing the game more streamlined, and ultimately more fun. So putting a little extra effort into setting up your character now will pay off over and over again once you're playing.</p>
-		<p>The idea is to track where each number comes from, and allow you to easily make changes on the fly.</p>
-		<p>Lets look at a hypothetical example.</p>
-		<p>You need to swim through a sunken section of dungeon to fetch the quest's Thing.<br>You'll need to take off your magical Plate Armor of +1 Constitution to swim without sinking, of course. Taking it off will change your armor class, your speed and your constitution, which in turn changes your hitpoints and your constitution saving throw. Working out all those changes in the middle of a game will drag the game to a hault. <br> Fortunately you have a digital character sheet, so it's a matter of dragging your Plate Armor +1 Con from your "equipment" box to your "backpack" box and you're done. Your hitpoints change correctly, your saving throws are up to date, your armor class goes back to reflecting the fact that you have natural armor from being a dragonborn. Your character sheet keeps up and you ultimately get more time to play the game. Huzzah!</p>
-		<h2>Creating a Character</h2>
-		<ul>
-			<li>In the <a href={{pathFor route="characterList"}}>character list</a>, click the plus button, floating in the bottom right corner.</li>
-			<li>Give your character a name, gender and race, these can be changed later if you change your mind. Then click the Add button</li>
-			<li>Your new character should open, with most of its attributes and abilities at zero.</li>
-		</ul>
+	<div layout vertical center>
+		<paper-shadow class="wallOfText card" style="padding: 32px; max-width: 800px;">
+			<h1>Dicecloud Beta</h1>
+			<p>Welcome to the Dicecloud beta. Please don't share the link with people you don't actively play with, since the beta is intended to be small, and your experience will probably get laggy if it gets more traffic than I'm expecting.</p>
+			<p>The beta is going to start with just the character sheet. You can play D&amp;D without minis and maps, without a pre-written adventure, you can play without a lot of things, but the character sheet is necessary. So I'm starting here and working my way outwards.</p>
+			<p>I will eventually have public bug tracking and feature requests going, but for now I'm going to track comments, feedback and suggestions on <a href="http://reddit.com/r/dicecloud">this subreddit</a>. If you've never used reddit before, all you need is a username and password to sign up. So it should be pretty accessible.</p>
+			<h2>Character Sheet Philosophy</h2>
+			<p>Setting up your character on Dicecloud is going to take you a little longer than just filling it in on a paper character sheet would have. The goal of using an online sheet is to make actually playing the game more streamlined, and ultimately more fun. So putting a little extra effort into setting up your character now will pay off over and over again once you're playing.</p>
+			<p>The idea is to track where each number comes from, and allow you to easily make changes on the fly.</p>
+			<p>Lets look at a hypothetical example.</p>
+			<p>You need to swim through a sunken section of dungeon to fetch the quest's Thing.<br>You'll need to take off your magical Plate Armor of +1 Constitution to swim without sinking, of course. Taking it off will change your armor class, your speed and your constitution, which in turn changes your hitpoints and your constitution saving throw. Working out all those changes in the middle of a game will drag the game to a hault. <br> Fortunately you have a digital character sheet, so it's a matter of dragging your Plate Armor +1 Con from your "equipment" box to your "backpack" box and you're done. Your hitpoints change correctly, your saving throws are up to date, your armor class goes back to reflecting the fact that you have natural armor from being a dragonborn. Your character sheet keeps up and you ultimately get more time to play the game. Huzzah!</p>
+			<h2>Creating a Character</h2>
+			<ul>
+				<li>In the <a href={{pathFor route="characterList"}}>character list</a>, click the plus button, floating in the bottom right corner.</li>
+				<li>Give your character a name, gender and race, these can be changed later if you change your mind. Then click the Add button</li>
+				<li>Your new character should open, with most of its attributes and abilities at zero.</li>
+			</ul>
 
-		<h2>Adding Racial Effects</h2>
-		<p>You have already given your character a race, but you haven't yet specified what that race does for your character, so lets do that.</p>
-		<ul>
-			<li>Click the Journal tab</li>
-			<li>In the card that displays your level, click on your race to open the racial dialog box</li>
-			<li>Click the edit button in the top corner of the racial dialog</li>
-		</ul>
-		<p>In the edit mode of the racial dialog you can change your race's name and add effects and proficiencies your race gives you. We will only be adding the base traits our race gives us, specific features can go in the features tab so we can more easily reference them later.</p>
-		<p>Lets add some of the effects all races will give.</p>
-		<ul>
-			<li>Click the Add Effect button, a new effect should appear</li>
-			<li>In the Stat Group dropdown box, choose "Stats"</li>
-			<li>The second dropdown lets us choose which stat to effect, choose "Speed"</li>
-			<li>The third dropdown lets us choose how to effect that stat, choose "Base Value", since our character's base speed comes from their race</li>
-			<li>Finally, input the value for our characters speed, it'll probably be 30 unless you chose a slower race, such as a dwarf</li>
-			<li>Close the Race dialog and navigate to the Stats tab</li>
-			<li>The speed card should now correctly display the character's speed</li>
-			<li>Click the speed card to see how that value was calculated</li>
-			<li>Currently there is only one number effecting the total, the speed from our race, but as more effects from different sources start impacting our character's speed, they will show up here.</li>
-		</ul>
+			<h2>Adding Racial Effects</h2>
+			<p>You have already given your character a race, but you haven't yet specified what that race does for your character, so lets do that.</p>
+			<ul>
+				<li>Click the Journal tab</li>
+				<li>In the card that displays your level, click on your race to open the racial dialog box</li>
+				<li>Click the edit button in the top corner of the racial dialog</li>
+			</ul>
+			<p>In the edit mode of the racial dialog you can change your race's name and add effects and proficiencies your race gives you. We will only be adding the base traits our race gives us, specific features can go in the features tab so we can more easily reference them later.</p>
+			<p>Lets add some of the effects all races will give.</p>
+			<ul>
+				<li>Click the Add Effect button, a new effect should appear</li>
+				<li>In the Stat Group dropdown box, choose "Stats"</li>
+				<li>The second dropdown lets us choose which stat to effect, choose "Speed"</li>
+				<li>The third dropdown lets us choose how to effect that stat, choose "Base Value", since our character's base speed comes from their race</li>
+				<li>Finally, input the value for our characters speed, it'll probably be 30 unless you chose a slower race, such as a dwarf</li>
+				<li>Close the Race dialog and navigate to the Stats tab</li>
+				<li>The speed card should now correctly display the character's speed</li>
+				<li>Click the speed card to see how that value was calculated</li>
+				<li>Currently there is only one number effecting the total, the speed from our race, but as more effects from different sources start impacting our character's speed, they will show up here.</li>
+			</ul>
 
-		<h2>Adding your ability scores</h2>
-		<p>Your character currently doesn't have any ability scores, so lets fix that. Whether you roll your abilities or point-buy them, lets add a feature to represent where they came from</p>
-		<ul>
-			<li>Navigate to the <emd>Features</emd> tab</li>
-			<li>Click the plus button in the bottom right to add a new feature</li>
-			<li>Give the Feature a name, like <em>Point Buy</em></li>
-			<li>Leave the feature as always enabled, don't limit its uses, and leave the description blank</li>
-			<li>Click the <em>Add Effect</em> button</li>
-			<li>For <em>Stat Group</em> choose <em>Ability Scores</em></li>
-			<li>For <em>Stat</em> choose <em>Strength</em></li>
-			<li>For the operation choose <em>Base Value</em></li>
-			<li>Input your character's rolled or point-bought strength, without the racial modfier</li>
-			<li>Repeat for the rest of your ability scores</li>
-		</ul>
-		<p>You can now check that your ability scores appear on your <em>Stats</em> page and that your skills that use them have their values calculated accordingly.</p>
-		<p>We didn't include your character's racial ability modifiers in the feature, so you should go back to your character's  racial dialog and add them in there as effects. Remember to use the add operation, rather than base value, since your race adds to your ability scores.</p>
-		<p>By separating the source of your character's stats you can easily check how your character got their ability scores and stats, even after 20 levels, without getting confused or making mistakes.</p>
+			<h2>Adding your ability scores</h2>
+			<p>Your character currently doesn't have any ability scores, so lets fix that. Whether you roll your abilities or point-buy them, lets add a feature to represent where they came from</p>
+			<ul>
+				<li>Navigate to the <emd>Features</emd> tab</li>
+				<li>Click the plus button in the bottom right to add a new feature</li>
+				<li>Give the Feature a name, like <em>Point Buy</em></li>
+				<li>Leave the feature as always enabled, don't limit its uses, and leave the description blank</li>
+				<li>Click the <em>Add Effect</em> button</li>
+				<li>For <em>Stat Group</em> choose <em>Ability Scores</em></li>
+				<li>For <em>Stat</em> choose <em>Strength</em></li>
+				<li>For the operation choose <em>Base Value</em></li>
+				<li>Input your character's rolled or point-bought strength, without the racial modfier</li>
+				<li>Repeat for the rest of your ability scores</li>
+			</ul>
+			<p>You can now check that your ability scores appear on your <em>Stats</em> page and that your skills that use them have their values calculated accordingly.</p>
+			<p>We didn't include your character's racial ability modifiers in the feature, so you should go back to your character's  racial dialog and add them in there as effects. Remember to use the add operation, rather than base value, since your race adds to your ability scores.</p>
+			<p>By separating the source of your character's stats you can easily check how your character got their ability scores and stats, even after 20 levels, without getting confused or making mistakes.</p>
 
-		<h2>Adding a Class</h2>
-		<p>Currently your character is at level 0, because they don't have any class levels. Let's fix that.</p>
-		<ul>
-			<li>Click the plus button in the card that currently says "Level 0"</li>
-			<li>A new class has now been added, name the class in the Class Name input and leave the level as 1</li>
-		</ul>
-		<p>We now have a class, lets add the saving throw proficiencies it gives us.</p>
-		<ul>
-			<li>Click the Add Proficiency button</li>
-			<li>Click the dropdown box that currently has "Skill" selected, and choose "Saving Throw" instead</li>
-			<li>In the second dropdown choose the first saving throw your class gives you</li>
-			<li>The third dropdown lets us specify if we have half or double our proficiency bonus for this proficiency, leave it at the default "proficient" for now</li>
-		</ul>
-		<p>If you navigate back to the stat page, you will see that you now have a proficiency bonus, based on your class level, and the saving throw you are proficienct in will take your proficiency bonus into account.</p>
-		<p>One of the most important things your class gives you is your hitpoints, so lets go add those now.</p>
-		<ul>
-			<li>Navigate to the class dialog box by clicking on your class name in the journal tab and hitting the edit button</li>
-			<li>Click the Add Effect button</li>
-			<li>Choose the <em>Stats</em> stat group, and choose the <em>Hitpoints</em> stat</li>
-			<li>Choose the <em>Base Value</em> operation</li>
-		</ul>
-		<p>Now we need to decide how many hitpoints our class gives us. We will assume that we take the constant hitpoints per level, since it's both the rule used for league play and it's statistically advantageous over rolling for hitpoints every level.</p>
-		<p>We could work out our hit points every level and change the effect each time, but we can do one better, we can input the calculation directly into the value field and have the character sheet figure it out for us</p>
-		<p>Let's assume we are rolling a fighter, so in the class name you typed in "Fighter" (with the capital F, but without the quote marks). A fighter gets 10 hp at first level and 6 hitpoints every level after that.</p>
-		<p>Lets rather split that into 4 bonus hitpoints at first level, and 6 hitpoints for every fighter level your character has. We can the write this as <em>4 + 6*FighterLevel</em> where the * represents multiplication.</p>
-		<p><em>Note, we don't add the constitution modifier here, that's already taken care of by default, since all characters add their constitution modifier to their hit points</em></p>
-		<ul>
-			<li>In the value field input <em>4 + 6 * FighterLevel</em>, the spaces aren't needed, but you must spell your class name exactly as it is spelt in the class name input box, capital letters and all, in our case "Fighter"</li>
-			<li>Create a new effect that effects the base value of <em>d10 Hit Dice</em> with the value of <em>FighterLevel</em>, since we also get our fighters level worth of hit dice</li>
-			<li>Check how your changes are reflected in the <em>Stats</em> tab</li>
-			<li>Change your level and check that the <em>Stats</em> tab gets updated accordingly</li>
-		</ul>
-		<p>You can try all sorts of calculations in your effects and in certain other places too. For example if you had some feature that is used a number of times equal to your wisdom modifier or 1, whichever is lower, you could limit its uses to <em>min(1, wisdomMod)</em> and the character sheet will figure it out for you, and update itself if you wisdom modifier happens to change later.</p>
+			<h2>Adding a Class</h2>
+			<p>Currently your character is at level 0, because they don't have any class levels. Let's fix that.</p>
+			<ul>
+				<li>Click the plus button in the card that currently says "Level 0"</li>
+				<li>A new class has now been added, name the class in the Class Name input and leave the level as 1</li>
+			</ul>
+			<p>We now have a class, lets add the saving throw proficiencies it gives us.</p>
+			<ul>
+				<li>Click the Add Proficiency button</li>
+				<li>Click the dropdown box that currently has "Skill" selected, and choose "Saving Throw" instead</li>
+				<li>In the second dropdown choose the first saving throw your class gives you</li>
+				<li>The third dropdown lets us specify if we have half or double our proficiency bonus for this proficiency, leave it at the default "proficient" for now</li>
+			</ul>
+			<p>If you navigate back to the stat page, you will see that you now have a proficiency bonus, based on your class level, and the saving throw you are proficienct in will take your proficiency bonus into account.</p>
+			<p>One of the most important things your class gives you is your hitpoints, so lets go add those now.</p>
+			<ul>
+				<li>Navigate to the class dialog box by clicking on your class name in the journal tab and hitting the edit button</li>
+				<li>Click the Add Effect button</li>
+				<li>Choose the <em>Stats</em> stat group, and choose the <em>Hitpoints</em> stat</li>
+				<li>Choose the <em>Base Value</em> operation</li>
+			</ul>
+			<p>Now we need to decide how many hitpoints our class gives us. We will assume that we take the constant hitpoints per level, since it's both the rule used for league play and it's statistically advantageous over rolling for hitpoints every level.</p>
+			<p>We could work out our hit points every level and change the effect each time, but we can do one better, we can input the calculation directly into the value field and have the character sheet figure it out for us</p>
+			<p>Let's assume we are rolling a fighter, so in the class name you typed in "Fighter" (with the capital F, but without the quote marks). A fighter gets 10 hp at first level and 6 hitpoints every level after that.</p>
+			<p>Lets rather split that into 4 bonus hitpoints at first level, and 6 hitpoints for every fighter level your character has. We can the write this as <em>4 + 6*FighterLevel</em> where the * represents multiplication.</p>
+			<p><em>Note, we don't add the constitution modifier here, that's already taken care of by default, since all characters add their constitution modifier to their hit points</em></p>
+			<ul>
+				<li>In the value field input <em>4 + 6 * FighterLevel</em>, the spaces aren't needed, but you must spell your class name exactly as it is spelt in the class name input box, capital letters and all, in our case "Fighter"</li>
+				<li>Create a new effect that effects the base value of <em>d10 Hit Dice</em> with the value of <em>FighterLevel</em>, since we also get our fighters level worth of hit dice</li>
+				<li>Check how your changes are reflected in the <em>Stats</em> tab</li>
+				<li>Change your level and check that the <em>Stats</em> tab gets updated accordingly</li>
+			</ul>
+			<p>You can try all sorts of calculations in your effects and in certain other places too. For example if you had some feature that is used a number of times equal to your wisdom modifier or 1, whichever is lower, you could limit its uses to <em>min(1, wisdomMod)</em> and the character sheet will figure it out for you, and update itself if you wisdom modifier happens to change later.</p>
+		</paper-shadow>
 	</div>
 </template>
\ No newline at end of file
diff --git a/rpg-docs/client/views/home/home.html b/rpg-docs/client/views/home/home.html
index 6874a372..915283e4 100644
--- a/rpg-docs/client/views/home/home.html
+++ b/rpg-docs/client/views/home/home.html
@@ -5,7 +5,7 @@
 			DiceCloud
 		</div>
 	</core-toolbar>
-	<div class="padded scroll-y white" fit>
+	<div class="scroll-y" style="padding: 16px" fit>
 		{{> guide}}
 	</div>
 </template>
\ No newline at end of file
diff --git a/rpg-docs/client/views/layout/layout.html b/rpg-docs/client/views/layout/layout.html
index 7e1718f4..78802f05 100644
--- a/rpg-docs/client/views/layout/layout.html
+++ b/rpg-docs/client/views/layout/layout.html
@@ -1,5 +1,5 @@
 <template name="layout">
-	<core-drawer-panel responsiveWidth="900px">
+	<core-drawer-panel responsiveWidth="905px">
 		<core-header-panel drawer navigation flex mode="seamed" class="white">
 			<div id="accountSummary">
 				{{#if currentUser}}
@@ -33,7 +33,9 @@
 			<section id="detailSection">
 				<div id="detailScreenFiller">
 					<div id="screenDim" cross-fade></div>
-					<paper-shadow id="globalDetail" z="5" animated hero hero-id="main">
+					<paper-shadow id="globalDetail" class="card" z="5"
+								  animated hero hero-id="main"
+								  layout vertical>
 						{{#if globalDetailTemplate}}
 							{{> UI.dynamic template=globalDetailTemplate data=globalDetailData}}
 						{{/if}}
diff --git a/rpg-docs/client/views/layout/layout.js b/rpg-docs/client/views/layout/layout.js
index 2449230f..1edce62f 100644
--- a/rpg-docs/client/views/layout/layout.js
+++ b/rpg-docs/client/views/layout/layout.js
@@ -23,9 +23,11 @@ Template.layout.helpers({
 Template.layout.events({
 	"tap #homeNav": function(event, instance){
 		Router.go("/");
+		instance.find("core-drawer-panel").closeDrawer();
 	},
 	"tap #profileLink": function(event, instance){
 		Router.go("profile");
+		instance.find("core-drawer-panel").closeDrawer();
 	},
 	"tap #feedback": function(event, instance) {
 		GlobalUI.showDialog({
@@ -33,8 +35,10 @@ Template.layout.events({
 			template: "feedback",
 			fullOnMobile: true,
 		});
+		instance.find("core-drawer-panel").closeDrawer();
 	},
 	"tap #changeLog": function(event, instance) {
 		Router.go("changeLog");
+		instance.find("core-drawer-panel").closeDrawer();
 	},
 });
diff --git a/rpg-docs/client/views/meta/changeLog/changeLog.html b/rpg-docs/client/views/meta/changeLog/changeLog.html
index dfe24b31..d8acd4f6 100644
--- a/rpg-docs/client/views/meta/changeLog/changeLog.html
+++ b/rpg-docs/client/views/meta/changeLog/changeLog.html
@@ -6,15 +6,22 @@
 		</div>
 	</core-toolbar>
 	<div class="changeLog scroll-y" fit>
-		{{#each changeLogs}}
-			<paper-shadow class="white padded" style="margin: 8px;">
-				<h2>{{version}}</h2>
-				<ul>
-				{{#each changes}}
-					<li>{{this}}</li>
+		<div layout vertical center>
+			<div layout vertical style="max-width: 800px; padding: 4px;">
+				{{#each changeLogs}}
+					<paper-shadow class="card" 
+								  style="margin: 4px;
+										 padding: 16px;"
+								  layout vertical>
+						<h2>{{version}}</h2>
+						<ul>
+							{{#each changes}}
+							<li>{{this}}</li>
+							{{/each}}
+						</ul>
+					</paper-shadow>
 				{{/each}}
-				</ul>
-			</paper-shadow>
-		{{/each}}
+			</div>
+		</div>
 	</div>
 </template>
\ No newline at end of file
diff --git a/rpg-docs/client/views/paperTemplates/baseDialog/baseDialog.html b/rpg-docs/client/views/paperTemplates/baseDialog/baseDialog.html
index 04de2d63..a3771702 100644
--- a/rpg-docs/client/views/paperTemplates/baseDialog/baseDialog.html
+++ b/rpg-docs/client/views/paperTemplates/baseDialog/baseDialog.html
@@ -1,39 +1,44 @@
 <template name="baseDialog">
-	<core-header-panel fit>
-		<core-toolbar class={{class}} hero-id="toolbar" hero>
-			<paper-icon-button id="backButton" role="button" tabindex="0" icon="arrow-back" aria-label="close"></paper-icon-button>
-			<div flex>{{title}}</div>
-			{{#if editing}}
-				{{#unless hideDelete}}
-					<paper-icon-button id="deleteButton"
-									   role="button"
-									   tabindex="0"
-									   icon="delete"
-									   aria-label="Delete Feature"
-									   noink></paper-icon-button>
-				{{/unless}}
-				{{#unless hideColor}}
-					{{> colorDropdown}}
-				{{/unless}}
-					<paper-icon-button id="doneEditingButton"
-									   icon="done"
-									   aria-label="Delete Feature"
-									   noink></paper-icon-button>
-			{{else}}
-				{{#if showEdit}}
-					<paper-icon-button id="editButton"
-									   icon="create"
-									   aria-label="Delete Feature"
-									   noink></paper-icon-button>
-				{{/if}}
-			{{/if}}
-		</core-toolbar>
-		<div class="detailContent">
-			{{#unless editing}}
-				{{> UI.contentBlock}}
-			{{else}}
-				{{> UI.elseBlock}}
+	<div class="{{class}} top subhead"
+		 style="height: 72px;"
+		 hero-id="toolbar" hero
+		 layout horizontal center>
+		<paper-icon-button id="backButton" 
+						   icon="arrow-back">
+		</paper-icon-button>
+		<div flex>{{title}}</div>
+		{{#if editing}}
+			{{#unless hideDelete}}
+				<paper-icon-button id="deleteButton"
+								   role="button"
+								   tabindex="0"
+								   icon="delete"
+								   aria-label="Delete Feature"
+								   noink></paper-icon-button>
 			{{/unless}}
-		</div>
-	</core-header-panel>
+			{{#unless hideColor}}
+				{{> colorDropdown}}
+			{{/unless}}
+			<paper-icon-button id="doneEditingButton"
+							   icon="done"
+							   aria-label="Delete Feature"
+							   noink></paper-icon-button>
+		{{else}}
+			{{#if showEdit}}
+				<paper-icon-button id="editButton"
+								   icon="create"
+								   aria-label="Delete Feature"
+								   noink></paper-icon-button>
+			{{/if}}
+		{{/if}}
+	</div>
+	<div class="bottom scroll-y"
+		 style="padding: 24px"
+		 flex>
+		{{#unless editing}}
+			{{> UI.contentBlock}}
+		{{else}}
+			{{> UI.elseBlock}}
+		{{/unless}}
+	</div>
 </template>
\ No newline at end of file
diff --git a/rpg-docs/client/views/paperTemplates/undoToast/undoToast.js b/rpg-docs/client/views/paperTemplates/undoToast/undoToast.js
index a9f04e8f..77fdc85d 100644
--- a/rpg-docs/client/views/paperTemplates/undoToast/undoToast.js
+++ b/rpg-docs/client/views/paperTemplates/undoToast/undoToast.js
@@ -9,6 +9,10 @@ Template.undoToast.events({
 			);
 			return;
 		}
-		collection.restoreNode(this.id);
+		if (collection.restoreNode){
+			collection.restoreNode(this.id);
+		} else {
+			collection.restore(this.id);
+		}
 	}
 });
diff --git a/rpg-docs/lib/functions/parenting.js b/rpg-docs/lib/functions/parenting.js
index ee6b11f3..88da47a1 100644
--- a/rpg-docs/lib/functions/parenting.js
+++ b/rpg-docs/lib/functions/parenting.js
@@ -85,7 +85,6 @@ makeChild = function(collection, inheritedKeys){
 	collection.after.update(function(userId, doc, fieldNames, modifier, options) {
 		if (modifier && modifier.$set && modifier.$set["parent.id"]){
 			//when we change parents, inherit its properties
-			console.log("re-inheriting")
 			inheritParentProperties(doc, collection);
 		}
 	});
diff --git a/rpg-docs/private/changeLogs/changeLogs.js b/rpg-docs/private/changeLogs/changeLogs.js
new file mode 100644
index 00000000..9a6cceee
--- /dev/null
+++ b/rpg-docs/private/changeLogs/changeLogs.js
@@ -0,0 +1,70 @@
+ChangeLogs.insert({
+	version: "0.2.0 - First public release",
+	changes: [
+		"Implemented basic sharing",
+		"Detail boxes separated into view and edit modes",
+		"Spell lists now expand horizontally to make better use of wide screens",
+		"Proficiencies separated from effects and text boxes to be their own assets",
+		"Added favicons and icons for Android/iOS shortcuts",
+		"Changed menu icon from hamburger to dots",
+	],
+});
+
+ChangeLogs.insert({
+	version: "0.2.1",
+	changes: [
+		"Improved sharing functionality",
+		"Sliders no longer jump to a point, they need to be dragged",
+		"Added a list of characters to the side bar",
+	],
+});
+
+ChangeLogs.insert({
+	version: "0.2.2",
+	changes: [
+		"Removed a security vulnerability that allowed users to pretend to be other users",
+		"The character list menu item in the side bar now shows up whether you have characters yet or not",
+		"Stopped the old proficiency text dialog showing up long after it got depreciated",
+	],
+});
+
+ChangeLogs.insert({
+	version: "0.2.3",
+	changes: [
+		"Changed spacing and formatting of the intro text on the front page",
+	],
+});
+
+ChangeLogs.insert({
+	version: "0.2.4",
+	changes: [
+		"Fixed typos in the front page",
+		"Fixed character sheet loading indefinitely if the character does not exist",
+		"Prevented character sheet crashing and loading forever when a incorectly typed ability modifier variable was used in calculations",
+	],
+});
+
+ChangeLogs.insert({
+	version: "0.2.5",
+	changes: [
+		"Moved log-in to its own page and added functionality for forgot passwords, verifying email addresses and general user accounts improvements",
+	],
+});
+
+ChangeLogs.insert({
+	version: "0.2.6",
+	changes: [
+		"Re-wrote how item dragging and dropping works to allow items to be dragged to characters in the side bar, and to containers on characters in other tabs and even other windows.",
+		"Fixed how splitting stacks works. Stacks should now split and merge properly when ctrl-dragged around",
+	],
+});
+
+ChangeLogs.insert({
+	version: "0.2.7",
+	changes: [
+		"Added a quick feedback form",
+		"Improved the formatting of the side-bar's list of characters",
+		"Added a change log",
+		"Fixed the styling and rounding of some of the detail boxes",
+	],
+});