@font-face
{
font-family: ragel;
src: url('magmed.woff');
}
@font-face
{
font-family: ragelcode;
src: url('code.woff');
}
/*BASICS*/
.b {
	font-weight: bold;
}
.u {
	text-decoration: underline;
}
.i {
	font-style: italic;
}
.centertable td
{
	text-align: center;
}
.center
{
	text-align: center;
}
.half
{
	opacity: 0.25;
}
.alignright, .right
{
	text-align: right;	
}
body
{
	background-color: rgb(0,0,0);
	background-image: linear-gradient(to right, rgba(0,0,0,0) 5%, rgba(0,0,0,0.75) 20%, rgba(0,0,0,0.75) 80%, rgba(0,0,0,0) 95%), url('default/background.png');
	background-size: auto auto, 116px 69px;
	color: white;
}
a, .attirelabel
{
	color: white;
	cursor: pointer;
}
.clickable
{
	cursor: pointer;
}
.noclick
{
	cursor: default;
}
.color
{
	color: white;
	background-color: rgb(68,164,214);
}
.colora
{
	color: white;
	background-color: rgba(68,164,214,0.5);
}
.colorb
{
	border-color: rgba(68,164,214,0.5);
}
.colors
{
	box-shadow: 0 0 3em rgba(255,255,255,0.5) inset, 0 0 3em rgba(68,164,214,1);
}
.badborder { border-color: red; }
/*ITEMS*/
.item-item { color: rgb(0,0,0); }
.item-weapon { color: rgb(255,165,0); }
.item-armor { color: rgb(0,255,255); }
.item-unit { color: rgb(170,255,255); }
.item-consumable { color: rgb(0,255,0); }
.item-disc { color: rgb(255,0,255); }
.item-partner { color: rgb(137,42,42); }
.item-rare { color: rgb(255,0,0); }
.item-veryrare { color: rgb(192,192,192); }
.item-superrare { color: rgb(255,215,0); }
.item-unknown { color: rgb(255,255,0); font-style: italic; }
/*NORMAL*/
#datacore, #userid, .hidden, .fadein, #scriptload
{
	display: none;
}
#wrapper
{
	position: absolute;
	left: 10%;
	right: 10%;
	bottom: 10%;
	top: 10%;
	border-radius: 100px;
	border: 10px inset rgba(68,164,214,0.5);
	box-shadow: 0 0 3em rgba(255,255,255,0.5) inset, 0 0 3em rgba(68,164,214,1);
}
#login
{
	position: absolute;
	width: 300px;
	height: 400px;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	border-radius: 100px;
	border: 10px inset rgba(68,164,214,0.5);
	box-shadow: 0 0 3em rgba(255,255,255,0.5) inset, 0 0 3em rgba(68,164,214,1);
	padding: 2em;
	box-sizing: border-box;
}
progress
{
	display: block;
	margin: 1em;
}
footer
{
	text-align: center;
	font-size: 0.75em;
	color: white;
	position: absolute;
	bottom: 3px;
	left: 50%;
	transform: translate(-50%,0px);
	opacity: 0.25;
}
footer:HOVER
{
	opacity: 0.75;
}
nav
{
	text-align: center;
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	width: 160px;
	border-bottom-left-radius: 100px;
	border-top-left-radius: 100px;
	padding: 2em 0 2em 0;
	overflow-x: hidden;
	overflow-y: auto;
	border-right: 3px double rgba(68,164,214,0.5);
}
nav a
{
	text-decoration: none;
	display: block;
	font-family: impact;
	font-size: 1.5em;
	padding: 2px 0 2px 0;
	text-align: center;
	border-top: 2px ridge rgba(68,164,214,0.5);
}
nav a:last-of-type
{
	border-bottom: 2px ridge rgba(68,164,214,0.5);
}
nav div:first-of-type {
	font-size: 1.5em;
}
nav a:HOVER
{
	box-shadow: inset 0 0 1em rgba(68,164,214,1);
}
main, section, #plymsg
{
	position: absolute;
	overflow: auto;
	right: 0px;
	top: 0px;
	bottom: 0px;
	left: 165px;
	border-bottom-right-radius: 100px;
	border-top-right-radius: 100px;
}
#plymsg
{
	background-color: rgba(0,0,0,0.75);
	z-index: 500;
	text-align: center;
	vertical-align: bottom;
}
#plymsg > div
{
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	font-size: 2em;
}
aside
{
	position: absolute;
	overflow: auto;
	right: 0px;
	top: 0px;
	bottom: 0px;
	left: 165px;
	text-align: center;
	padding-top: 15%;
	font-size: 4em;
	font-family: ragel;
}
.ragel
{
	font-family: ragel;
}
.impact
{
	font-family: impact;
}
#login h1
{
	text-align: center;
	font-size: 4em;
}
#login label, .block
{
	display: block;
}
#login #user, #login #pwd
{
	width: 100%;
}
#login #remember
{
	width: 20px;
	display: inline;
	margin-top: 6px;
}
#login #userlog
{
	display: inline-block;
	background-color: rgb(68,164,214);
	padding: 5px;
	border: 1px outset white;
	float: right;
	cursor: pointer;
	width: 30%;
}
#login #userlog:active
{
	border: 1px inset white;
}

select ~ label
{
	display: inline;
}
textarea
{
	resize: none;
}
#bgbox {
	position: absolute;
	top: 30px;
	bottom: 0px;
	overflow: hidden;
	z-index: -2;
}
#hudleft
{
	position: absolute;
	left: 0px;
	right: 25%;
	height: 150px;
	border-bottom: 5px double rgba(68,164,214,0.5);
	box-sizing: border-box;
}
#hudright
{
	position: absolute;
	left: 75%;
	right: 0;
	height: 150px;
	box-sizing: border-box;
	border-bottom: 5px double rgba(68,164,214,0.5);
}
#hpbase, #mpbase, #pcbase, #expbase
{
	position: absolute;
	background-color: rgba(255,255,255,0.5);
	height: 20px;
	right: 5%;
	left: 10%;
	box-shadow: inset 2px 2px 2px rgba(255,255,255,0.5), inset -2px -2px 2px rgba(0,0,0,0.5);
	z-index: 85;
}
#hpbase {	top: 20%; }
#mpbase {	top: 50%; }
#pcbase {	top: 80%; }
#expbase { top: 65%; right: 20%; height: 15px;}
.hp
{
	position: absolute;
	width: 100%;
	left: 0px;
	height: 100%;
	box-shadow: inset 0 2px 2px rgba(255,255,255,0.25), inset 0 -2px 2px rgba(0,0,0,0.25);
}
#damagehp
{
	background-color: rgb(250,0,0);
	z-index: 88;
}
#usedmp
{
	background-color: rgb(0,88,88);
	z-index: 88;
}
#usedpc
{
	background-color: rgb(88,88,0);
	z-index: 88;
}
#hp
{
	background-color: rgb(133,255,133);
	z-index: 89;
}
#restorehp
{
	background-color: rgb(0,255,0);
	background-image: linear-gradient(179.5deg, rgb(0,255,0), 35%, rgb(0,255,0), rgb(0,200,0), 65%, rgb(0,200,0));
	z-index: 90;
}
#mp
{
	background-color: rgb(133,255,255);	
	z-index: 89;
}
#restoremp
{
	background-color: rgb(0,255,255););
	background-image: linear-gradient(179.5deg, rgb(0,255,255), 35%, rgb(0,255,255), rgb(0,200,200), 65%, rgb(0,200,200));
	z-index: 90;
}
#pc
{
	background-color: rgb(255,255,133);
	z-index: 89;
}
#restorepc
{
	background-color: rgb(255,255,0););
	background-image: linear-gradient(179.5deg, rgb(255,255,0), 35%, rgb(255,255,0), rgb(200,200,0), 65%, rgb(200,200,0));
	z-index: 90;
}
#levellabel, #statuslabel, #rescanlabel, #explabel
{
	position: absolute;
	font-family: ragel;
	width: 80%;
	font-size: 14pt;
}
#statuslabel {top: 30%; }
#rescanlabel { top: 80%; }
#explabel {	top: 50%; }
#levellabel { top: 10%; }
#exp
{
	z-index: 90;
	background-color: rgb(255,150,0););
	background-image: linear-gradient(179.5deg, rgb(255,150,0), 35%, rgb(255,150,0), rgb(196,116,0), 65%, rgb(196,116,0));
}
.labelright {
	float: right;
	right: 10%;
	font-family: ragel;
}
#hplabel, #mplabel, #pclabel {
	position: absolute;
	left: 5%;
	font-size: 14pt;
	font-family: ragel;
	font-weight: bold;
	right: 5%;
}
#hplabel { top: 5%; }
#mplabel { top: 35%; }
#pclabel { top: 65%; }
header
{
	position: absolute;
	overflow: auto;
	right: 0px;
	top: 0px;
	height: 150px;
	left: 165px;
	border-top-right-radius: 100px;
	display: none;
}
main.maincharacter, section {
	top: 150px;
	border-top-right-radius: 0px;
}
label {
	display: inline-block;
	font-family: impact;
	width: 25px;
	text-align: center;

}


fieldset
{
	border: none;
	border-radius: 20px;
	padding: 20px;
}

legend
{
	border-radius: 5px;
	padding: 5px 10px 5px 10px;
	box-shadow: 0 0 3em rgba(255,255,255,0.5) inset, 0 0 3em rgba(68,164,214,1);
	font-family: ragel;
}
.relative { position: relative; }
section
{
	background-color: rgba(0,0,0,0.75);
	z-index: 80;
	text-align: center;
	padding-top: 5px;
	font-family: impact;
	font-size: 18pt;
	overflow: auto;
}
section div
{
	font-size: 10pt;
	font-style: italic;
}
optgroup
{
	background-color: black;
	color: white;
}
.flexbox
{
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
}
.flexrow
{
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
}
.flexcollum
{
	-webkit-flex-flow: column wrap;
	flex-flow: column wrap;
}
.flexitem
{
	-webkit-flex: 1 1 auto;
	flex: 1 1 auto;
}

.stars { text-shadow: 0 0 1px black, 0 2px black,0 0 3px black; }
.stars .cyan
{
	color: #00ffff;
}
.stars .red
{
	color: #ff0000;
}
.stars .silver
{
	color: #c0c0c0;
}
.stars .gold
{
	color: #ffdf00;
}
.ucenter
{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}
.small{
	font-size: 12px;
}
.statbox
{
	position: absolute;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
}
.statbox div, #invstats > .flexitem
{
	display: block;
	width: 45%;
	text-align: center;
	font-size: 20px;
	font-family: impact;
}
.flipshow:hover
{
	color: yellow;
}
#showleft
{
	left: 0px;
	display: none;
}
#showright
{
	right: 0px;
}
.highlight
{
	box-shadow: inset 0 0 20px white, 0 0 5px white;
}
@media only screen and (max-width: 1200px)
{
	#wrapper
	{
		left: 0px;
		right: 0px;
		bottom: 0px;
		top: 0px;
		border: 0;
		border-radius: 0;
	}
	nav
	{
		border-radius: 0;
		padding: 0;
	}
}

.tiny {font-size: 8pt; }
.floatright {float: right;}
.floatleft {float: left;}