html { overflow: hidden; }
body { overflow: hidden; padding: 0; margin: 0;
width: 100%; height: 100%; font-family: Trebuchet MS, Trebuchet, Arial, sans-serif; }
#map { position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; overflow: auto; }
#footer { position: absolute; bottom: 0px; left: 0px; width:100%; height: 12px; overflow: hidden; background-color:#000000;}
@media screen and (max-width: 800px) {
  #map { top:0px; left:0px; width:100%; height:100%;}
}
body { background-color: #3e2e5b;}



#map { border: 1px solid #ccc; box-shadow: 0 1px 3px #CCC; }



#panelcontainer {
	float:left;
	top :5px;
	left :5px;
	z-index: 1000;
position:absolute;
}

#panel {
	padding:5px; 
	background-color: #ffffff; 

-webkit-box-shadow: 1px 2px 22px 4px rgba(50, 50, 50, 0.84);
-moz-box-shadow:    1px 2px 22px 4px rgba(50, 50, 50, 0.84);
box-shadow:         1px 2px 22px 4px rgba(50, 50, 50, 0.84);

-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
	font-size:.75em;
	margin-bottom:10px;
	padding-bottom:5px;
	border: 5px solid #cccccc;

}

#panelkey {
	padding:5px; 
	background-color: #ffffff; 
 	border: 5px solid #cccccc;

-webkit-box-shadow: 1px 2px 22px 4px rgba(50, 50, 50, 0.84);
-moz-box-shadow:    1px 2px 22px 4px rgba(50, 50, 50, 0.84);
box-shadow:         1px 2px 22px 4px rgba(50, 50, 50, 0.84);

-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
		font-size:.75em;
	visibility: hidden;
}

#photo-panel {
  background: #fff;
  padding: 5px;
  overflow-y: auto;
  overflow-x: hidden;
  width: 300px;
  max-height: 300px;
  font-size: 14px;
  font-family: Arial;
  border: 1px solid #ccc;
  box-shadow: -2px 2px 2px rgba(33, 33, 33, 0.4);
  display: none;
}

.info {
	line-height:1.35;
	overflow:hidden;
	white-space:nowrap;
}