.creature,
.grave {
    border: 3px solid black;
	color: white;
	font-weight: bold;
	position: absolute;
    transition: border 0.2s, background 0.2s;
}
.creature {
    cursor: pointer;
    z-index: 3;
}
.grave {
    z-index: 1;
}
.grave {
    opacity: 0.5;
}

.creatureSelected {
    border-color: orange;
	z-index: 4;
}

.creatureFilling {
    position: absolute;
}

.creatureFilling.healthBar {
    left: 1px;
    top: -13px;
}

.creatureFilling.magicBarrierBar {
    left: 1px;
    top: -7px;
}

.creatureApLeft {
    background-color: rgba(255,255,255,0.9);
    bottom: -13px;
    border: solid gray 1px;
    border-radius: 7px;
    color: black;
    left: 0px;
    padding: 1px;
}

.creatureApLeft img {
    width: 15px;
}

.colorOwned {
    background: radial-gradient(at top left, rgb(150,200,150), rgb(75,175,75));
}

.colorOwned.creatureSelected {
    background: radial-gradient(at top left, rgb(150,255,200), rgb(25,200,100));
}

.grave.colorOwned {
    background: radial-gradient(at top left, rgb(200,255,200), rgb(150,225,150));
}

.colorFriendly {
    background: radial-gradient(at top left, rgb(200,200,255), rgb(125,125,250));
}

.colorFriendly.creatureSelected {
    background: radial-gradient(at top left, rgb(255,255,150), rgb(200,200,25));
}

.grave.colorFriendly {
    background: radial-gradient(at top left, rgb(200,200,255), rgb(150,150,225));
}

.colorHostile {
    background: radial-gradient(at top left, rgb(255,200,200), rgb(250,125,125));
}

.colorHostile.creatureSelected {
    background: radial-gradient(at top left, rgb(255,150,150), rgb(200,25,25));
}

.grave.colorHostile {
    background: radial-gradient(at top left, rgb(255,200,200), rgb(225,150,150));
}

.overlay {
	cursor: pointer;
	display: none;
	position: absolute;
}

.overlay img {
	opacity: 0.5;
}

.overlayThreat {
    display: block;
	opacity: 0.5;
    z-index: 2;
}

.overlayskill {
    border: 3px solid orange;
    opacity: 1;
}

.overlaySelected {
	display: block;
	z-index: 4;
}

.apCost {
    background: white;
    border: 1px solid black;
    border-radius: 7px;
    opacity: 0.9;
    padding: 3px;
    position: absolute;
}

#adventureCharacterPanel {
    background-color: white;
    border: 3px solid black;
    border-radius: 25px;
    display: none;
    padding: 25px;
    opacity: 0.9;
}

#adventureCharacterAvatar img {
    height: 250px;
    width: 250px;
}

#creatureActions {
    background-color: white;
    border: 3px solid black;
    border-radius: 25px;
    bottom: 0px;
    display: none;
    height: 50px;
    left: 0px;
    margin: 0px;
    opacity: 0.9;
    position: absolute;
    text-align: center;
    width: 99%;
    z-index: 1;
}