Add points of interest

Do a bunch of refactoring in the process.  Current display on homepage
is a little shonky but that can be improved when there is something
using it.

assets/css/ojuso.css

@@ -13,6 +13,36 @@
   background: red;
 }
 
+
+/*
+ * UTILITY CLASSES
+ */
+
+/* Colours */
+.ojuso-red { color: #ea4639; }
+.ojuso-green { color: #4ac95d; }
+.ojuso-yellow { color: #f9db3c; }
+.ojuso-blue { color: #008ad5; }
+
+
+/*
+ * LAYOUT
+ */
+
+/* Narrow content area wrapper */
+.content--narrow {
+    max-width: 50em;
+    margin: auto;
+    margin-top: 2em;
+}
+
+/* Subheading, designed to sit on a paragraph after h1 */
+.subheading {
+    font-size: 120%;
+    margin-bottom: 2em;
+}
+
+
 /* Page footer */
 
 .footer {
@@ -42,8 +72,128 @@
   margin-top: 1em;
 }
 
-/* Colour utility classes */
-.ojuso-red { color: #ea4639; }
-.ojuso-green { color: #4ac95d; }
-.ojuso-yellow { color: #f9db3c; }
-.ojuso-blue { color: #008ad5; }
+
+
+/*
+ * FORMS
+ */
+
+/* Map widget - Minimum zoom help text */
+.minzoomhelptext {
+  font-size: 14px;
+  background-color: rgba(255, 255, 255, 80%);
+  padding: 2px 10px;
+  border: 1px solid #ccc;
+  font-weight: bold;
+}
+
+
+/* Case study draft functionality */
+.savebutton {
+  position: fixed;
+  bottom: 0;
+  padding: 8px 15px;
+  z-index: 9999;
+
+  background-color: hsla(111, 25%, 84%, 1);
+  border-top-right-radius: 5px;
+  border-top-left-radius: 5px;
+}
+
+.savebutton--icon { margin-left: 15px; margin-right: 2px; }
+.savebutton--icon-failed { color: #d9534f; }
+.savebutton--details { font-style: italic; }
+
+.draftprompt { display: none; }
+.draftprompt--delete { margin-left: 10px; }
+.draftprompt--details { margin-left: 10px; font-weight: bold; }
+
+
+/* File upload widget styles */
+.filewidget--input { position: absolute; left: -1000px; }
+.filewidget--list {
+  list-style-type: none;
+  padding-left: 0;
+  margin-left: 0;
+  margin-top: 12px;
+}
+
+.filewidget--file {
+  border: 1px solid #aaa;
+  display: inline-block;
+  padding: 4px 8px;
+  width: 34em;
+  background-color: #eee;
+  border-radius: 4px;
+  cursor: default;
+}
+
+.filewidget--file--icon {
+  margin-right: 8px;
+}
+
+.filewidget--file--actions {
+  float: right;
+}
+
+.filewidget--file--actions a {
+  color: black;
+  cursor: pointer;
+}
+
+.filewidget--file--actions a:hover {
+  color: red;
+}
+
+
+/*
+ * HOME PAGE
+ */
+
+/* This is the popup that you see when you first arrive on the site */
+.hello {
+  position: fixed;
+  height: 100%;
+  width: 100%;
+  top: 0;
+  left: 0;
+  overflow: auto;
+  z-index: 1000;
+  background-color: rgba(0, 0, 0, 0.5);
+  background-image: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEiIHZpZXdCb3g9IjEwMCA1IDIwMCAyNTUiPg0KICA8cGF0aCBkPSJNMjM4IDEyN2g1M2wtMjYtMTUtMjcgMTUiIGZpbGw9InJnYmEoMjUyLCAyMTEsIDI5LCAwLjUpIi8+DQogIDxwYXRoIGQ9Ik0yOTQgMTIybC0yOS01MS0yOSA1MSAyOS0xNyAyOSAxNyIgZmlsbD0icmdiYSgxMDIsIDE5OCwgODcsIDAuNSkiLz4NCiAgPHBhdGggZD0iTTIyOCAxMjRsMzItNTZoLTY0bDMyIDU2IiBmaWxsPSJyZ2JhKDIyMSwgNjgsIDU4LCAwLjUpIi8+DQogIDxwYXRoIGQ9Ik0xODYgNjNMMTUzIDdsLTMyIDU2aDY1bTExMSAxOTNsLTMyLTU2LTMyIDU2aDY0IiBmaWxsPSJyZ2JhKDEwMiwgMTk4LCA4NywgMC41KSIvPg0KICA8cGF0aCBkPSJNMjIzIDEyN2wtMzItNTYtMzMgNTZoNjUiIGZpbGw9InJnYmEoMjUyLCAyMTEsIDI5LCAwLjUpIi8+DQogIDxwYXRoIGQ9Ik0yNjAgMTkxbC0zMi01Ni0zMiA1Nmg2NCIgZmlsbD0icmdiYSgyMjEsIDY4LCA1OCwgMC41KSIvPg0KICA8cGF0aCBkPSJNMTUzIDEyNGwzMy01NmgtNjVsMzIgNTYiIGZpbGw9InJnYmEoMzcsIDE0MCwgMjEyLCAwLjUpIi8+DQogIDxwYXRoIGQ9Ik0yMjggMjUzbDMyLTU2aC02NGwzMiA1NiIgZmlsbD0icmdiYSgyNTIsIDIxMSwgMjksIDAuNSkiLz4NCiAgDQogIA0KICA8cGF0aCBkPSJNMTg2IDE5MWwtMzMtNTUtMzIgNTVoNjUiIGZpbGw9InJnYmEoMzcsIDE0MCwgMjEyLCAwLjUpIi8+DQogIA0KICANCiAgPHBhdGggZD0iTTExOSAxODRsMjctNDYtMjcgMTV2MzEiIGZpbGw9InJnYmEoMTAyLCAxOTgsIDg3LCAwLjUpIi8+DQogIDxwYXRoIGQ9Ik0xOTMgMTg0bDI3LTQ2LTI3IDE1djMxIiBmaWxsPSJyZ2JhKDM3LCAxNDAsIDIxMiwgMC41KSIvPg0KICA8cGF0aCBkPSJNMjE3IDEzM2gtNTlsMzAgNTF2LTM0bDI5LTE3IiBmaWxsPSJyZ2JhKDEwMiwgMTk4LCA4NywgMC41KSIvPg0KICA8cGF0aCBkPSJNMTg4IDIwNWwtMjcgNDYgMjctMTZ2LTMwIiBmaWxsPSJyZ2JhKDM3LCAxNDAsIDIxMiwgMC41KSIvPg0KICA8cGF0aCBkPSJNMTY0IDI1Nmg1OWwtMzAtNTF2MzRsLTI5IDE3IiBmaWxsPSJyZ2JhKDIyMSwgNjgsIDU4LCAwLjUpIi8+DQogIDxwYXRoIGQ9Ik0yMjUgMTJsLTI2IDQ2IDI2LTE2VjEyIiBmaWxsPSJyZ2JhKDI1MiwgMjExLCAyOSwgMC41KSIvPg0KICA8cGF0aCBkPSJNMjAxIDYzaDU5bC0yOS01MXYzNGwtMzAgMTciIGZpbGw9InJnYmEoMzcsIDE0MCwgMjEyLCAwLjUpIi8+DQo8L3N2Zz4=');
+  background-position: center;
+  background-blend-mode: luminosity;
+}
+
+.hello--container {
+  max-width: 40em;
+  margin: 0 auto;
+}
+
+.hello--text {
+  background-color: white;
+  margin-top: 5em;
+  margin-left: 1em;
+  margin-right: 1em;
+  margin-bottom: 1em;
+  padding: 1em;
+  z-index: 1100;
+}
+
+/* Top margin on small screns should be same as the rest */
+@media (max-width: 768px) {
+  .hello--text {
+    margin-top: 1em;
+  }
+}
+
+.hello--logo {
+  width: 200px;
+  margin-bottom: 16px;
+}
+
+.hello--logo, .hello--hide {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}