ojuso-map/assets/css/ojuso.css

/* Make sure that the footer doesn't have space after it */
.container { min-height: 60vh; }

/* Get the header working OK */
.navbar-brand { padding: 5px 15px; }
.navbar-brand > img { height: 40px; }
.navbar-collapse {
	z-index: 9999;
	position: relative;
}

.dropdown-menu > li > a.no-hover:hover, .dropdown-menu > li > a.no-hover:focus {
  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 {
  background-color: #444;
  color: #ddd;
  padding-top: 1em;
  margin-top: 5em;
}

.footer-list {
  list-style-type: none;
  text-align: right;
  margin-left: 0;
  padding-left: 0;
}

.footer-list-item {
  color: #ddd;
  text-decoration: underline;
}

.footer-list-item:hover {
  color: #bbb;
}

.footer-list-item--spacer {
  margin-top: 1em;
}



/*
 * 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;
}