--- a/default/static/styles.css	Mon Mar 26 08:13:53 2018 +0200
+++ b/default/static/styles.css	Mon Mar 26 08:13:53 2018 +0200
@@ -1,5 +1,6 @@
 :root {
   --select-bg-color: #ddd;
+  --size-medium: 3em;
 }
 
 
@@ -66,12 +67,12 @@
 /*** Generic ***/
 
 .button {
-	padding: 0.5em 1em;
-	background: #333;
-	color: #ccc;
-	border: 1px solid #555;
-	border-radius: 0.8em;
-	font-weight: bold;
+    padding: 0.5em 1em;
+    background: #333;
+    color: #ccc;
+    border: 1px solid #555;
+    border-radius: 0.8em;
+    font-weight: bold;
 }
 
 
@@ -85,8 +86,14 @@
 }
 
 .instructions--alt {
-	text-align: center;
-	font-style: italic;
+    text-align: center;
+    font-style: italic;
+}
+
+.items_vert--centered {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
 }
 
 /*** blocks ***/
@@ -98,14 +105,14 @@
 
 .block_separator__label {
     display: inline-block;
-	margin: 0 0.2em;
+    margin: 0 0.2em;
 }
 
 .block_separator__line {
-	height: 1px;
-	background: #ccc;
-	flex: 1;
-	margin-top: 0.7em;
+    height: 1px;
+    background: #ccc;
+    flex: 1;
+    margin-top: 0.7em;
 }
 
 /*** grids ***/
@@ -139,10 +146,39 @@
     background-color: var(--select-bg-color);
 }
 
+/*** avatars ***/
+
+.avatar {
+    height: 2rem;
+    width: 2rem;
+    display: inline-flex;
+    flex-direction: column;
+    align-content: center;
+    justify-content: center;
+    background: #ccc;
+    border-radius: 0.2rem;
+}
+
+.avatar__content {
+
+}
+
+.avatar--medium {
+    height: var(--size-medium);
+    width: var(--size-medium);
+    border-radius: 0.5rem;
+}
+
+.avatar--generated {
+    text-align: center;
+    background:  #43d2f6;
+}
+
+
 /*** icons ***/
 
 .icon--medium {
-    height: 3em;
+    height: var(--size-medium);
     display: block;
     margin: 0 auto;
 }
@@ -311,12 +347,12 @@
 }
 
 .form_single input:not([type="submit"]) {
-	margin: 0 1em;
-	width: 15em;
-	border-radius: 0.7em;
-	outline: none;
-	border: 1px solid black;
-	padding: 0.4em;
+    margin: 0 1em;
+    width: 15em;
+    border-radius: 0.7em;
+    outline: none;
+    border: 1px solid black;
+    padding: 0.4em;
     box-shadow: none;
 }
 
@@ -419,24 +455,24 @@
 /*** Notifications ***/
 
 .notification.retry {
-	position: fixed;
-	top: 1rem;
-	margin: auto;
-	width: 80%;
-	background: #DB1616;
-	border: 3px solid silver;
-	left: 10%;
-	text-align: center;
+    position: fixed;
+    top: 1rem;
+    margin: auto;
+    width: 80%;
+    background: #DB1616;
+    border: 3px solid silver;
+    left: 10%;
+    text-align: center;
 }
 
 #retry_counter {
-	font-weight: bold;
+    font-weight: bold;
 }
 
 #retry_now {
-	color: blue;
-	text-decoration: underline;
-	cursor: pointer;
+    color: blue;
+    text-decoration: underline;
+    cursor: pointer;
 }
 
 @media (min-width: 800px) {