Comprehensive overhaul of the character sheet design. (#35)

source/style/Character-sheet.less

@@ -8,8 +8,12 @@
 	}
 
 	h3 {
-		margin-top: 1rem;
-	}
+		padding: 0.5rem 0.5rem 0.5rem 0.5rem ;
+		text-align: left;
+		font-weight: bold;
+		background-color: dimgray;
+		color: white;
+		}
 
 	.sheet.character {
 		form {
@@ -28,14 +32,33 @@
 		}
 
 		.profile-img {
-			height: 64px;
-			width: 64px;
+			max-width: 128px;
+			height: 160px;
+			border: 0px solid black;
 		}
 
 		.description {
 			flex: 0 0 100%;
 			margin: 0;
-		}
+		}		  
+	}
+
+	.sheet-navigation {
+		margin: 4px 0;
+		background-color: lightgrey;
+		border-top: 2px solid black;
+		border-bottom: 2px solid black;
+	}
+
+	.sheet-navigation .item {
+		padding: 8px 12px 8px 12px;
+		color: black;
+		font-weight: bold;
+		font-size: large;
+	}
+
+	.sheet-navigation .active {
+		background-color: darkgrey;
 	}
 
 	.level-display {
@@ -43,8 +66,13 @@
 		font-weight: bold;
 	}
 
+	table {
+		background-color: beige;
+	} 
+
 	td, th {
 		padding: 0 0.5rem 0 0.5rem;
+		text-align: left;
 
 		&.center {
 			text-align: center;
@@ -54,8 +82,30 @@
 			width: 3rem;
 			text-align: center;
 		}
-	}
 
+		&.attribute{
+			text-align: center;
+			font-weight: bold;
+		}
+
+		&.attribute-value {
+			background: url(/icons/svg/d20-grey.svg) no-repeat;
+			background-size: 50px 50px;
+			background-position: center;
+			color: black;
+			text-align: center;
+			font-weight: bold;
+			height: 50px;
+		}
+
+		&.title {
+			padding: 0.5rem 0.5rem 0.5rem 0.5rem ;
+			text-align: left;
+			font-weight: bold;
+			background-color: dimgray;
+		  }
+	}
+	
 	input.skill {
 		width: 5rem;
 	}
@@ -77,6 +127,7 @@
 	button.roll-button {
 		background: url(/icons/svg/d20-black.svg) no-repeat;
 		background-size: 24px 24px;
+		border: #000000 solid 0px;
 		width: 26px;
 		height: 26px;
 	}
@@ -91,7 +142,7 @@
 	}
 
 	.health-bar {
-		height: 2rem;
+		height: 1rem;
 		background-color: rgba(0, 0, 0, 0.8);
 		display: flex;
 		flex-direction: row;
@@ -100,7 +151,7 @@
 		//align-items: stretch;
 
 		input {
-			flex: 0 0 3rem;
+			flex: 0 0 2rem;
 			text-align: center;
 			height: 100%;
 			background-color: rgba(109, 108, 102, 1);
@@ -112,29 +163,31 @@
 		.lp-bar-item-empty,
 		.ap-bar-item-empty {
 			flex-grow: 1;
-			background-color: rgb(201, 201, 201);
+			background-color: white;
 		}
 
 		.lp-bar-item {
 			flex-grow: 1;
-			background-color: rgb(57, 234, 139);
+			background-color: lightgreen;
 		}
 
 		.ap-bar-item {
 			flex-grow: 1;
-			background-color: rgb(57, 163, 234);
+			background-color: lightblue;
 		}
 
 		.negative-bar-item {
 			flex-grow: 1;
-			background-color: rgb(234, 57, 57);
+			background-color: red;
 		}
 	}
 
 	.attributes {
+		padding: 0.5rem 0.5rem 0.5rem 0.5rem ;
 		display: flex;
 		flex-direction: row;
 		margin-bottom: 0.5rem;
+		background-color: beige;
 
 		.attribute {
 			flex: 0 0 7rem;