@font-face {
	font-family: 'dpcomic';
	src: url('lib/dpcomic.eot?#iefix') format('embedded-opentype'), 
		url('lib/dpcomic.ttf');
}
body {
	font-family: 'dpcomic';
	color: #1c1117;
	background: #170e12;
	margin: 0 auto;
}
button {
	background: none;
	border: none;
	font-size: 1em;
	color: #1c1117;
	font-family: 'dpcomic';
	display: block;
	margin: 0 auto;
	outline: none;
	position: relative;
} button h3 {
	margin: 5px;
}
button.selected {
	text-shadow: 0 0 5px rgba(82,58,66,0.5);
	color: #301d27;
} button.selected::before {
	position: absolute;
	left: -60px;
	top: 10px;
	content: url('img/knife.png')
}
.playerNameForm input {
	font-family: 'dpcomic';
	font-size: 1.3em;
	src: url('lib/dpcomic.ttf');
	background: #4a313c;
	border: solid 2px #3b242f;
	text-align: center;
	margin-bottom: 20px;
}

#container {
	font-family: 'dpcomic';
	font-size: 2rem;
	position: relative;
	width: 816px;
	height: 600px;
	margin: 40px auto;
}
.menuHero {
	position: absolute;
	left: 70px;
	bottom: 70px;
}
.menuBaron {
	position: absolute;
	right: 70px;
	bottom: 70px;
}

.keyContainer {
	display: flex;
	justify-content: space-around;
	width: 100%;
	padding-bottom: 10px;
}
.keyContainer:first-of-type {
	margin-top: -40px;
}
.keyContainer > div > p {
	margin: 10px;
}
.key {
	width: 63px;
	height: 65px;
	line-height: 58px;
	margin: 0;
	background-image: url('img/button.png');
	display: inline-block;
}
.spacebar {
	width: 300px;
	height: 65px;
	line-height: 58px;
	margin: 0;
	background-image: url('img/spaceKey.png');
	display: inline-block;
}
#controlsScreen h3 {
	margin-bottom: 0;
}
.pickupText div {
	min-width: 100px;
	padding: 0 10px 0 10px;
}

.pickupText div img {
	padding: 10px;
	max-width: 100%;
	max-height: 100%;
	flex-grow: 0;
}

hr {
    padding: 0;
    border: none;
    margin: 8px auto;
    width: 50%;
    border-top: 12px double #22171c;
    color: #22171c;
    text-align: center;
}
#gameMenuDiv {
	z-index: 11;
	margin: auto;
	background-image: url('img/MenuBG.png');
	position: absolute;
	border: 5px solid #22171c;
}
.gameMenuScreen {
	padding: 40px;
	text-align: center;
	height: 100%;
	box-sizing: border-box;
}
h1, h3 {
	margin: 15px;
}
h5 {
	margin-top: 10px;
	margin-bottom: 10px;
}
h1 {
	font-size: 2.5em;
}


canvas {
	position: absolute;
	image-rendering: -moz-crisp-edges;
	image-rendering: -webkit-crisp-edges;
	image-rendering: pixelated;
	border: 5px solid #22171c;
	pointer-events: none;
}
.tileSet {
	display: none;
}
#bgCanvas {
	z-index: 1;
}
#drawableCanvas {
	z-index: 2;
}
#attackCanvas {
	z-index: 4;
}
#debugCanvas {
	z-index: 9;
}
#interfaceCanvas {
	z-index: 10;
}
#interfaceDivLeft {
	position: absolute;
	top: 40px;
	left: 40px;
	z-index: 5;
	color: rgba(255,255,255,0.65);
}
#interfaceDivRight {
	position: absolute;
	top: 40px;
	right: 40px;
	z-index: 5;
	color: rgba(255,255,255,0.65);
}
#interfaceDivMid {
	position: absolute;
	top: 43px;
	left: 50%;
	transform: translate(-50%, 0);
	z-index: 5;
	color: rgba(255,255,255,0.65);
}
#scoreDiv, #healthDiv {
	width: 100%;
}
#scoreDiv p {
	margin: 0;
	text-align: right;
}
#interfaceDivMid p {
	margin: 0;
}
#healthDiv p {
	margin: 0;
}
#musicBtn {
	z-index: 99;
	pointer-events: auto;
}
#messageDiv {
	position: absolute;
	z-index: 11;
	color: rgba(255,255,255,0.65);
}
#messageSpan {
	position: absolute;
	border-radius: 10px;
	padding: 20px;
	top: 10%;
	left: 50%;
	transform: translateX(-50%); 
	white-space: nowrap;
	background: rgba(0,0,0,0.5);
	text-align: center;
}

#background {
	position: absolute;
}
/*	Level map */
#mapDiv {
	position: absolute;
	top: 670px;
	background: pink;
	z-index: 99;
}
.terrain {
	width: 3px;
	height: 3px;
	margin: 0;
	padding: 0;
	background: lightgrey;
	float: left;
}
.room {
	background: blue;
}
.filledRoom {
	background: green;
}


.centredMenuScreen {
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}

.loader,
.loader:before,
.loader:after {
/*  border-radius: 50%;
*/  width: 2em;
  height: 2em;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: load7 1.8s infinite ease-in-out;
  animation: load7 1.8s infinite ease-in-out;
}
.loader {
  color: #170e12;
  font-size: 10px;
  margin: 80px auto;
  position: relative;
  text-indent: -9999em;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
.loader:before,
.loader:after {
  content: '';
  position: absolute;
  top: 0;
}
.loader:before {
  left: -3.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.loader:after {
  left: 3.5em;
}
@-webkit-keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}
@keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}


/*	Hi score formatting */
#hiScoreDiv, #creditsDiv, #footerDiv {
	margin: 40px auto;
	font-size: 2em;
	color: #82606f;
	width: 826px;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
}
#hiScoreDiv h3, #hiScoreDiv h5, #creditsDiv h3, #creditsDiv h5 {
	color: #dec0ce;
	font-weight: normal;
}
.centredDiv {
	margin: 0 auto;
}
#creditsDiv {
	color: #9f8591;
	font-size: 24px;
	padding-left: 50px;
	padding-right: 50px;
}
#creditsDiv p {
	padding: 0 60px;
	margin: 10px auto;
}
#hiScoreDiv p {
	font-size: 24px;
	margin: 0 auto;
}
#footerDiv p {
	font-size: 24px;
	margin: 0 auto;
}
#creditsDiv ul li {
	text-align: left;
	padding-bottom: 20px;
}
#creditsDiv a:hover, #hiScoreDiv a:hover {
	text-decoration: underline;
	color: #dec0ce;
}
#creditsDiv a, #hiScoreDiv a {
	text-decoration: none;
	color: #dec0ce;
}
.twitterIcon {
	margin-top: 5px;
}
.scoreboardDiv {
/*	display: flex;
*/	flex-direction: column;
	justify-content: space-around;
	text-align: center;
	width: 100%;
}
table {
	color: #1c1117;
	border: 5px solid #22171c;
	border-spacing: 0px;
	display: inline-block;
	line-height: 1.5;
}
th {
	background: #1c1117;
	color: #82606f;
	font-weight: normal;
}
tr:nth-child(odd) {
	background: #422835;
} tr:nth-child(even) {
	background: #694555;
}
th, td {
	padding: 5px 20px;
	position: relative;
}
.deadBaron {
	position: absolute;
	left: -10px;
	top: 8px;
}
.hiScoreBtn {
	padding: 5px 15px;
	display: inline-block;
	color: #422835;
}
.hiScoreBtnSelected {
	color: #82606f;
}

#disqus_thread {
	width: 826px;
	margin: 0 auto;
}