add badges bar

css/level-selector.css

@@ -39,13 +39,21 @@
 
 #badges {
     text-align: center;
-    vertical-align: top;
+    vertical-align: middle;
     position: fixed;
     left: 0px;
     right: 0px;
     bottom: 0px;
+    font-size: 4em;
 }
 
+.badge {
+    vertical-align: middle;
+}
+
+.ylogo {
+    width: 1em;
+}
 
 .instructionGreen {
     color: darkgreen;

css/pexeso.css

@@ -51,7 +51,7 @@ BODY, HTML {
 	text-align:left;
 }
 
-#navigationBar {
+.navigationBar {
 	background: #75755f;
 	font-size: xx-large;
 	padding: 2px 10px 2px 10px;
@@ -82,7 +82,7 @@ BODY, HTML {
     background:rgba(0,0,0,0.7);
     text-align: center;
     color: white;
-    height: 100%;
+    height: 10em;
 }
 
 #congratulation {
@@ -100,6 +100,15 @@ BODY, HTML {
 	text-align: center;
 }
 
+.levelCompleteButtonsFinal {
+	position: absolute;
+	margin-top: 10em;
+	width: 100%;
+	text-align: center;
+	height: 10em;
+	background:rgba(0,0,0,0.7);
+}
+
 .levelButton {
     font-size: 1.2em;
     background: gray;
@@ -131,4 +140,38 @@ BODY, HTML {
 
 .signature {
 	padding-bottom: 2em;
-}
+}
+
+.info {
+	color: white;
+	position: absolute;
+	top: 0;
+	left: 0;
+	z-index: 1001;
+	width: 100%;
+	height: 100%;
+	font-size: 1.5em;
+	text-align: left;
+	background: rgba(0,0,0,0.7);
+	overflow: auto;
+}
+
+.infoContent {
+	padding-left: 2em;
+}
+
+a {
+	color: yellow;
+}
+
+a:hover {
+	color: orange;
+}
+
+a.link {
+	color: purple;
+}
+
+.link {
+	cursor: pointer;
+}