html, body { 
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

#map-canvas {
  height: calc(100% - 3em);
  width: 99%;
}

.loginForm {
	position: absolute;
	top: 45%;
  left: 40%;
  width: 300px;
  background: #fff;
  border: 1px solid #000;
  text-align: center;
  padding: 2em;
}

.flash_messages {
	position: absolute;
	top: 5px;
	background: red;
	opacity: 0.8;
	z-index: 2;
	max-width: 50%;
	min-width: 25%;
	left: 40%;
	right: 40%;
	text-align: center;
}

#menu {
	position: absolute;
	z-index: 2;
	width: 340px;
	min-height: 300px;
	background: #333;
	opacity: 0.9;
	top: 0;
	left: -340px;
	-webkit-transition:all 1.0s ease-in-out;
  -moz-transition:all 1.0s ease-in-out;
  -o-transition:all 1.0s ease-in-out;
  transition:all 1.0s ease-in-out;
  color: #ccc;
}

#menu:hover {
  transform: translate(340px, 0);
}

#menu a { color: #ccc; text-decoration: none;}
#menu a:hover { text-decoration: underline; }

div#userPic {
	position: absolute;
	top: 4px;
	right: -36px;
	border-radius: 0 4px 4px 0;
	background: #333;
  padding: 4px;
}

#menu #userPic img {
	width: 32px; height: 32px;
}