#meters {
	display: block;
	width: 200px;
	height: 150px;
	position: absolute;
	top: 0;
	left: 0;
}

#topLeftMask {
	position: absolute;
	z-index: 1;
	top: 48px;
	left: 18px;
	height: 106px;
	width: 130px;
	background-image: url(../../../system/meters/leftcornerover.svg);
}

#topLeftMask.darkui {
	background-image: url(../../../system/meters/leftcornerover_dark.svg);
}

#enbolt {
	position: absolute;
	top: 95px;
	left: 13px;
	z-index: 1;
}

#energyDisks {
	position: absolute;
	top: 51px;
	left: 22px;
	background-color: #ccc;
	border-bottom-right-radius: 83%;
	width: 87px;
	height: 66px;
	z-index: 1;
	overflow: hidden;
}

#energyDisks .green, #energyDisks .red { /* These are script-rotated together */
	position: absolute;
	top: -54px;
	left: -35px;
	width: 121px;
	z-index: 1;

	transition-property: transform, opacity;
	transition-duration: 1s;
	transition-timing-function: ease-in-out;
	transition-delay: 0s;
	-webkit-transition-property: -webkit-transform, opacity;
	-webkit-transition-duration: 1s;
	-webkit-transition-timing-function: ease-in-out;
	-webkit-transition-delay: 0s;
	-moz-transition-property: -moz-transform, opacity;
	-moz-transition-duration: 1s;
	-moz-transition-timing-function: ease-in-out;
	-moz-transition-delay: 0s;
}

#energyText * {
	color: #fff;
	text-shadow: 0 0.05em rgba(0, 0, 0, 0.5);
	font-size: 13px;
}

#energyText {
	position: absolute;
	top: 50px;
	left: 120px;
	opacity: 0.5;
	z-index: 1;
	width: 150px;
}

#energyText:hover {
	opacity: 1;
}

#currEnergy {
	font-size: 19px;
}

#maxEnergy {
	font-size: 15px;
}

#leftDisk {
	position: absolute;
	top: 18px;
	left: 10px;
	border-radius: 50%;
	overflow: hidden;
	width: 75px;
	height: 75px;
	text-align: center;
	line-height: 12px;
	background: -webkit-linear-gradient(#b3dcb6, #72dddf); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(#b3dcb6, #72dddf); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(#b3dcb6, #72dddf); /* For Firefox 3.6 to 15 */
	background: linear-gradient(#b3dcb6, #72dddf); /* Standard syntax */
	transition-property: background;
	transition-duration: 0.2s;
	transition-timing-function: linear;
	transition-delay: 0.5s;
	z-index: 1;
	box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.1);

	/* this fixes the overflow:hidden in Chrome not clipping it's contents to the border-radius
	more information here: https://stackoverflow.com/questions/5736503/how-to-make-css3-rounded-corners-hide-overflow-in-chrome-opera*/
	-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);

}

#leftDisk.guideDisk {
	width: 65px;
	height: 65px;

	/* needed to prevent the color from reversing */
	border: 5px groove goldenrod;
	border-right-style: ridge;
	border-bottom-style: ridge;
}

#portrait {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	opacity: 1;
	transition-property: opacity;
	transition-duration: 0.2s;
	transition-timing-function: linear;
	transition-delay: 0.0s;
	-webkit-transition-property: opacity;
	-webkit-transition-duration: 0.2s;
	-webkit-transition-timing-function: linear;
	-webkit-transition-delay: 0.0s;
	-moz-transition-property: opacity;
	-moz-transition-duration: 0.2s;
	-moz-transition-timing-function: linear;
	-moz-transition-delay: 0.0s;
}

#moodMeter {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	opacity: 0;
	transition-property: opacity;
	transition-duration: 0.2s;
	transition-timing-function: linear;
	-webkit-transition-property: opacity;
	-webkit-transition-duration: 0.2s;
	-webkit-transition-timing-function: linear;
	-moz-transition-property: opacity;
	-moz-transition-duration: 0.2s;
	-moz-transition-timing-function: linear;
	text-shadow: 0 0.05em rgba(0, 0, 0, 0.3);
}

#moodMeter .percent {
	position: absolute;
	top: 32%;
	left: 0;
	text-align: center;
	width: 100%;
	color: #fff;
}

#moodMeter .percent .number {
	font-size: 35px;
	color: #fff;
}

#moodMeter .fraction {
	position: absolute;
	top: 65%;
	left: 0;
	color: #fff;
	width: 100%;
	text-align: center;
	font-size: 11px;
}

#moodMeter .fraction .curr, #moodMeter .fraction .max {
	color: #fff;
}

#leftDisk .hurt, #leftDisk .dead {
	transition-property: opacity;
	transition-duration: 0.2s;
	transition-timing-function: linear;
	-webkit-transition-property: opacity;
	-webkit-transition-duration: 0.2s;
	-webkit-transition-timing-function: linear;
	-moz-transition-property: opacity;
	-moz-transition-duration: 0.2s;
	-moz-transition-timing-function: linear;
}

#leftDisk:hover #moodMeter {
	opacity: 1;
}

#leftDisk:hover #portrait {
	opacity: 0;
}

#leftDisk .hurt {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: -webkit-linear-gradient(#e16732, #ec3030); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(#e16732, #ec3030); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(#e16732, #ec3030); /* For Firefox 3.6 to 15 */
	background: linear-gradient(#e16732, #ec3030); /* Standard syntax */
	opacity: 1;
}

#leftDisk .dead {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #6d6d6d;
	opacity: 1;
}

#moodAvatar {
	position: relative;
	width: 60px;
	height: 80px;
	left: 50%;
	top: 6px;
	transform: translateX(-50%) scale(.9);
	background-size: contain;
	background-repeat: no-repeat;
}

#rain {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	background-size: 20px;
	background: url(../../../system/meters/raindrop.svg) repeat;

	-webkit-animation: rain 0.7s infinite linear;
	-moz-animation: rain 0.7s infinite linear;
	animation: rain 0.7s infinite linear;
}

@-webkit-keyframes rain {
	from {
		background-position: 0 0;
	}
	to {
		background-position: -20px 20px;
	}
}

@-moz-keyframes rain {
	from {
		background-position: 0 0;
	}
	to {
		background-position: -20px 20px;
	}
}

@keyframes rain {
	from {
		background-position: 0 0;
	}
	to {
		background-position: -20px 20px;
	}
}

#rays {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;

	-webkit-animation: spin 15s infinite linear;
	-moz-animation: spin 15s infinite linear;
	animation: spin 15s infinite linear;
}

@-webkit-keyframes spin {
	from {
		-webkit-transform: rotate(0deg);
	}
	to {
		-webkit-transform: rotate(360deg);
	}
}

@-moz-keyframes spin {
	from {
		-moz-transform: rotate(0deg);
	}
	to {
		-moz-transform: rotate(360deg);
	}
}

@keyframes spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

#playerName {
	color: #444;
	font-size: 12px;
	position: absolute;
	top: 0.2em;
	left: 1em;
	text-decoration: none;
	cursor: pointer;
}

#playerName.darkui {
	color: #eee;
}

#playerName:hover {
	opacity: 0.5;
	text-decoration: underline;
}

#imaginationText {
	position: absolute;
	top: calc(24px - 0.5em);
	left: 165px;
}

#imaginationText * {
	color: #444;
	text-shadow: 0 1px rgba(100, 100, 100, 0.3);
}

#imaginationText.darkui * {
	color: #eee;
}

#imaginationText .smi {
	position: relative;
	font-size: 15px;
	top: -3px;
}

#thinkButton {
	background-image: url(../../../system/imgmenu/thoughtbubble.svg);
	width: 70px;
	height: 50px;
	position: absolute;
	display: inline;
	left: 90px;
	cursor: pointer;
}

#thinkButton.pressed {
	background-image: url(../../../system/imgmenu/thoughtbubble_pressed.svg);
}

#thinkButton:hover {
	-webkit-filter: drop-shadow(0 1px 2px cyan);
	-moz-filter: drop-shadow(0 1px 2px cyan);
	-o-filter: drop-shadow(0 1px 2px cyan);
	filter: drop-shadow(0 1px 2px cyan);
}

#thinkButton:active {
	-webkit-filter: drop-shadow(0 1px 1px cyan);
	-moz-filter: drop-shadow(0 1px 1px cyan);
	-o-filter: drop-shadow(0 1px 1px cyan);
	filter: drop-shadow(0 1px 1px cyan);
}