1 files changed, 24 insertions, 7 deletions

diff --git a/static/default.css b/static/default.css
index e9b18ee..44dde56 100644
--- a/static/default.css
+++ b/static/default.css
@@ -56,7 +56,10 @@ ul {
 
 main {
 	background-color: #f7f7f7;
+	display: flex;
+	flex-wrap: wrap;
 	flex: 1;
+	justify-content: space-between;
 	padding-left: 16px;
 	padding-right: 16px;
 	position: relative;
@@ -78,6 +81,7 @@ main {
 
 .site__header {
 	margin-bottom: 1em;
+	flex: 1 0 100%;
 }
 .site__title {
 	margin-bottom: 0;
@@ -85,6 +89,7 @@ main {
 
 .site__summary {
 	display: inline-block;
+	flex: 1 0 100%;
 }
 .summary {
 	float: left;
@@ -122,10 +127,14 @@ main {
 .panel {
 	background-color: #fff;
 	border: 1px solid #e6e9ed;
+	flex: 0 1 33%;
 	margin-bottom: .5em;
 	margin-top: .5em;
 	padding: .5em;
 }
+.panel--wide {
+	flex: 1 0 100%;
+}
 .panel__header {
 	border-bottom: 2px solid #e6e9ed;
 	font-size: 1.75em;
@@ -158,10 +167,17 @@ main {
 	top: 0;
 }
 
+.details__percent {
+	font-weight: bold;
+}
+
 /* Figures */
-.graph {
+.figure {
+	margin: 1em .5em;
+}
+.figure--graph {
 }
-.map svg {
+.figure--map svg {
 	max-width: 100%;
 	max-height: 400px;
 }
@@ -176,13 +192,13 @@ main {
 .chart.time {
 	flex-direction: row;
 	height: 200px;
-	padding-top: 2em;
-	padding-bottom: 2em;
+	padding-top: 1em;
+	padding-bottom: 1em;
 }
 .chart.vertical {
 	align-items: stretch;
 	flex-direction: row;
-	height: 100px;
+	min-height: 200px;
 	padding-top: 2em;
 	padding-bottom: 2em;
 }
@@ -201,6 +217,7 @@ main {
 .chart.horizontal .slot {
 	margin-top: 1px;
 	margin-bottom: 1px;
+	max-height: 1.5em;
 }
 .chart .slot.midnight {
 	border-left: 1px solid #ddd;
@@ -257,10 +274,10 @@ main {
 	bottom: 100%;
 	left: 50%;
 	margin-bottom: .5rem;
-	margin-left: -2.5rem;
+	margin-left: -3.5rem;
 	position: absolute;
 	text-align: center;
-	width: 5rem;
+	width: 7rem;
 }
 .chart.time .slot:after,
 .chart.vertical .slot:after {