*{ box-sizing: border-box; }
body {
	margin: 0
}
#superContainer {
	max-width: 600px;
	/*margin: 0 auto;*/
}
#monList {
	padding: 10px;
	min-height: 400px;
	margin-bottom: 10px;
	background-color: #eee;
}
.mon {
	margin-bottom: 10px;
	border: 1px solid black;
}
.details {
	padding: 10px;
	display:flex;
	justify-content: space-between;
	background-color: white;
	height: 50px;
}
.mon[montype="water"] .details{
	background-color: #444;
	color: white;
}
.mon[montype="wood"] .details{
	background-color: limegreen;
}
.mon[montype="fire"] .details{
	background-color: firebrick;
	color: white;
}
.mon[montype="earth"] .details{
	background-color: yellow;
}
.mon[montype="metal"] .details{
	background-color: white;
}
.mon[montype="undefined"] .details{
	background-color: pink;
	color: green;
}
.partyMon:not(:only-child) {
	cursor: move;
}
.partyMon:first-child{
	font-weight: bold;
}
.partyMon:last-child{
	margin-bottom:0;
}
.nameSpan {
	cursor: pointer;
}

.hpbar {
	background-color: red;
}
.hpbarinternal {
	background-color: green;
	height: 5px;
}

#locationTabs{
	margin: 20px 0 9px;
}
.locationTab{
	color: #999;
	padding: 10px;
	border: 1px solid black;
	border-bottom: none;
	border-radius: 5px 5px 0 0;
}
.locationTab[data-unlocked=true] {
	color: black;
	cursor: pointer;
}
.locationTab[data-selected=true] {
	font-weight: bold;
}

.locationPane{
	display: none;
}
.locationPane[data-selected=true]{
	display: block;
}

#locationContainer{
	padding:10px;
	margin-bottom: 10px;
	background-color: #eee;
	border: 1px solid black;
}

#log {
	padding: 10px;
}
.logMessage {
	margin-bottom: 5px;
}