html { 
	height: 100%;
	font-family: "Helvetica Neue", "Helvetica", sans-serif; 
	}

* {
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}
body { 
	height: 100%; 
	margin: 0; 
	padding: 0 
}
#logo {
	position: absolute;
	top: 20px;
	left: 20px;
	z-index: 2;
	width: 237px;
}
#info-container { 
	position: absolute; 
	top: 20px; 
	right: 20px;
	z-index: 2;
}

#map-canvas-wrap {
	position: relative;
}
#map-canvas {
	width: 364px;
	height: 273px;
}

#leaderboard-wrap {
	position: absolute;
	z-index: 3;
	background: #FFF;
	top: 0;
	height: 100%;
	width: 100%;
	overflow-y: scroll;
	/*opacity: 0.9;*/
	display: none;
}
#leaderboard {
	padding-left: 100px;
}
#leaderboard li {
	position: relative;
	margin-bottom: 20px;
}
#leaderboard li img {
	position: absolute;
	top: -5px;
	left: -70px;
	height: 30px;
	width: 30px;
	-webkit-border-radius: 50px;
	        border-radius: 50px;
}
#post-score, #login, #show-leaderboard, #resize-map, #hide-map, #hide-leaderboard {
	position: absolute;
	padding: 10px;
	background: #AAA; /* Fallback */
	background: rgba(0,0,0,0.5);
	cursor: pointer;
	z-index: 4;
	text-decoration: none;
	color: white;
}
#post-score, #login, #show-leaderboard {
	bottom: 0;
	right: 0;
}
#resize-map, #hide-map {
	bottom: 0;
	left: 0;
}
#hide-leaderboard {
	top: 0;
	right: 0;
}
#hide-map, #show-map, #post-score, #login, #hide-leaderboard {
	display: none;
}

#place-guess, #result, #new-guess, #score-info, #new-round {
	background: #65C5E9;
	color: #FFF;
	padding: 20px;
	border: none;
	width: 100%;
	font-size: 18px;
	cursor: pointer;
}
#pano { 
	height: 100%;
	width: 100%;
}

#result {
	width: 50%;
	float: left;
}

#new-guess, #new-round {
	width: 50%;
	float: right;
	background: #308aac;
	padding-bottom: 21px;
	display: none;
}
p, button {
	margin: 0
}

:focus {
  outline-color: transparent;
  outline-style: none;
}

#twitter {
	position: absolute;
	bottom: 20px;
	right: 20px;
	height: 40px;
}
#linkedin {
	position: absolute;
	bottom: 20px;
	right: 82px;
	height: 40px;
}

/* Phones */

@media (max-width: 767px) {
	
	#logo {
		width: 150px;
	}
	#info-container {
		display: none;
		width: 100%;
		top: 0;
		right: 0;	
	}
	#map-canvas {
		width: 100% !important;
	}
	#resize-map {
		display: none;
	}
	#hide-map {
		display: block;
		color: white;
	}
	#show-map {
		display: block;
		position: absolute;
		top: 20px;
		left: 190px;
		z-index: 2;
		padding: 10px;
		background: #AAA; /* Fallback */
		background: rgba(0,0,0,0.5r);
		cursor: pointer;
		height: 54px;
		color: white;
		font-size: 30px;
		font-weight: 100;
		background: #2AC5FF;
	}
	#twitter, #linkedin {
		height: 20px;
	}

}

/* --------------------------------------------------
	Icons
-------------------------------------------------- */

@font-face{
	font-family:Batch;
	src: url('../fonts/batch-icons-webfont.eot');
	src: url('../fonts/batch-icons-webfont.eot?#iefix') format('embedded-opentype'),
		  url('../fonts/batch-icons-webfont.woff') format('woff'),
		  url('../fonts/batch-icons-webfont.ttf') format('truetype'),
		  url('../fonts/batch-icons-webfont.svg#batchregular') format('svg');
	font-weight:normal;
	font-style:normal;
}
.batch {
	font-family:"Batch"; /*or whatever you've decalred your font name as*/
	display: inline-block;
	font-style: normal;
	position: relative;
}
.batch:before {
	content: attr(data-icon); 
}