* {
	box-sizing: border-box;
}

html, body {
	margin: 0;
	padding: 0;
	overflow: hidden;
	background: #ff00e4;
	font: bold 12px 'Helvetica Neue', Arial, Helvetica, sans-serif;
}

.wrap {
	position: absolute;
	top: 0;
	left: 0;
	max-width: 300px;
	border: 2px solid #000;
}

.content {
	height: 100%;
	line-height: 1.2;
	color: #ffffff;
	padding: 6px;
	border: 2px solid #222;
	background: #333;
}

.pinned .wrap .title {
	padding-right: 15px;
}

.wrap > .close-tip {
	position: absolute;
	display: block;
	top: 2px;
	right: 5px;
	font-size: 14px;
	color: #fff;
	text-decoration: none;
	line-height: 1;
}

a {
	color: #fff;
}

h1 {
	margin: -5px 0 2px 0;
	font-size: 1.2em;
	line-height: 1.4;
}

p {
	margin: 0;
	line-height: 1.2;
}

.icon {
	display: inline-block;
	margin-right: 3px;
}


/* Themes */
.default .wrap {border-color: #1B2967;}
.default .content {border-color: #0033CC; background-color: #005CB8;}

.item .wrap {border-color: #2b7ada;}
.item .content {border-color: #182730; background-color: #47545f;}

.blob .wrap {border-color: #009900;}
.blob .content {border-color: #66FF00; background-color: #475E13;}

.wraith .wrap {border-color: #492136;}
.wraith .content {border-color: #331726; background-color: #471962;}

.overmind .wrap {border-color: #80AD32;}
.overmind .content {border-color: #352956; background-color: #5240A5;}

.flock .wrap {border-color: #40e8c4;}
.flock .content {border-color: #40e8c4; background-color: #60a092;}

.pod .wrap {border-color: #052401;}
.pod .content {border-color: #326D29; background-color: #569F4B;}

.pod-alt .wrap {border-color: #221E03;}
.pod-alt .content {border-color: #69622C; background-color: #9B924F;}

.colo-pod .wrap {border-color: #256fb9;}
.colo-pod .content {border-color: #000000; background-color: #000000;}

/* Mob health stuff */

.healthDam .content {border-color: #233b25;}
.healthDam0 .wrap, .healthDam1 .wrap, .healthDam2 .wrap, .healthDam3 .wrap, .healthDam6 .wrap {border-color: #2b7ada;}
.healthDam4 .wrap, .healthDam5 .wrap {border-color: #fefe00;}

.healthDam0 .content {background-color: #59cc00;}
.healthDam1 .content {background-color: #73cc00;}
.healthDam2 .content {background-color: #cbcc00;}
.healthDam3 .content {background-color: #f79800;}
.healthDam4 .content {background-color: #c94a00;}
.healthDam5 .content {background-color: #ad0000;}
.healthDam6 .content {background-color: #540000;}

.statusOxy .wrap {border-color: #fbfe00;}
.statusOxy .content {border-color: #3e090d; background-color: #980400;}

.statusFire .wrap {border-color: #fbfe00;}
.statusFire .content {border-color: #570d00; background-color: #db3e00;}

.statusToxin .wrap {border-color: #d0ff00;}
.statusToxin .content {border-color: #6e0000; background-color: #c70d08;}

.statusRad .wrap {border-color: #fbfe00;}
.statusRad .content {border-color: #570d00; background-color: #df5d00;}

/* Dead */

.healthDam.healthDam7 .content {border-color: #303012;}
.healthDam7 .content {background-color: #272727;}

/* Bodytemp indicator */

.tempInd .content {border-color: #233b25;}
.tempInd0 .wrap, .tempInd1 .wrap, .tempInd4 .wrap, .tempIndF .wrap, .tempInd-1 .wrap, .tempInd-4 .wrap {border-color: #2b7ada;}
.tempInd2 .wrap, .tempInd3 .wrap, .tempInd-2 .wrap, .tempInd-3 .wrap {border-color: #fefe00;}

.tempInd0 .content {background-color: #59cc00;}
.tempInd1 .content {background-color: #9dcc00;}
.tempInd2 .content {background-color: #c57200;}
.tempInd3 .content {background-color: #f79800;}
.tempInd4 .content {background-color: #c50000;}
.tempIndF .content {background-color: #c50000;}
.tempInd-1 .content {background-color: #3cbf5b;}
.tempInd-2 .content {background-color: #44cccd;}
.tempInd-3 .content {background-color: #349ace;}
.tempInd-4 .content {background-color: #1a35cf;}

/* Stamina */

.stamina .wrap {border-color: #2b7ada;}
.stamina .content {border-color: #182730; background-color: #47545f;}

/* You didn't see nothing */
.rainbow {animation:rainbow 1s infinite alternate;}

@keyframes rainbow {
0% {color: red;}
20% {color: orange;}
40% {color: yellow;}
60% {color: green;}
80% {color: aqua;}
100% {color: blue;}
}

/* Fancy newhud */

.newhud .wrap {border-color: #1c5567;}
.newhud .wrap:before, .newhud .wrap:after {
	content: '';
	position: absolute;
	width: 15px;
	height: 15px;
}
.newhud .wrap:before {
	top: -2px; /* #wrap border width */
	left: -2px; /* #wrap border width */
	background: url({{resource("images/tooltips/newhud-tl.gif")}});
}
.newhud .wrap:after {
	bottom: -2px; /* #wrap border width */
	right: -2px; /* #wrap border width */
	background: url({{resource("images/tooltips/newhud-br.gif")}});
}
.newhud .content {padding: 6px 10px; border-color: #0a131a; background: #0a131a url({{resource("images/tooltips/newhud-lines.gif")}});}