@font-face { src: url(/font/FeENrm28C.otf); font-family: "IM FELL English PRO"; font-style: normal; font-weight: normal; }
@font-face { src: url(/font/FeENit27C.otf); font-family: "IM FELL English PRO"; font-style: italic; font-weight: normal; }

:root {
	/* BODY */
	--bgcolor: #000; /* body color, "bgnd/body.png" is applied over this color */
	
	/* FONTS */
	--txtfont: Arial, sans-serif; /* main font */
	--seriffont: "Garamond", "Times New Roman"; /* serif text */
	--monofont: "Andale Mono", monospace; /* monospace text */
	--hfont: "IM FELL English PRO"; /* font for titles */

	/* TEXT COLORS */
	--txtcolor: #eee; /* main text color */
	--txtnotice: #ddd; /* text color for notices */
	--txtother: #bbb; /* text color for some blocks */
	--prefix: #ddd; /* color for prefixes */
	--gray: #888; /* used for disabled inputs */
	--placeholder: #666; /* used for input placeholders */
	
	--anchor: #59e; /* color for anchors */
	--anchorh: #7af; /* mouse over an anchor */
	--anchord: #888; /* disabled anchor */
	
	--blue: #59e;
	--red: #e55;
	--purple: #838;
	--green: #4c4;
	--orange: #c70;
	--gold: #ec3;
	--dkgray: #AAA;
	--ltgray: #666;
	--gray: #999;
	
	/* BUTTONS */
	--btntext: #fff; /* button text color */
	--btnblue: #4C89D6; /* button default color */
	--btnblueh: #5599EE; /* mouse over a button */
	--btnpurple: #2D0F2D; /* purple button color */
	--btnpurpleh: #331133; /* mouse over a purple button */
	--btnred: #B73D3C; /* red button color */
	--btnredh: #CC4443; /* mouse over a red button */
	--btngreen: #4C894C; /* green button color */
	--btngreenh: #559955; /* mouse over a green button */
	--btnblack: #444444; /* black button color */
	--btnblackh: #4B4B4B; /* mouse over a black button */
	--btngold: #B18A00; /* gold button color */
	--btngoldh: #C49900; /* mouse over gold button */
	--btngray: #555555; /* gray button */
	
	--badge: #fd0; /* default badge color */
	--bdgtext: #111; /* badge text color */
	
	/* BACKGROUND COLORS */
	--paper: rgba(255,255,255,0.1); /* background color for blocks of text */
	--bgaltrows: rgba(0,0,0,0.25); /* Even rows of a table */
	--bginput: #222; /* background color for text inputs */
	--bgselect: #282828; /* background color for ranks inputs */
	--bgnotif: #333; /* background color for chat and notifs */
	--bgother: rgba(255,255,240,0.1); /* background color for some text blocks */
	--bgtag: #555; /* unresolved [tag] */
	--bgmap: rgba(204,204,170,0.5); /* map background */
	--bgicon: #999; /* icon background */
	--slider: #444; /* sliders background */
	--quant: #666; /* quantity slider */
	--qual: #b90; /* quality */
	--qualh: #c90; /* mouse over quality */
	--happ: #ddc; /* happiness background */
	--box: rgba(127,127,127,0.33); /* default color for image background */
	--mgmlink: rgba(140,172,204,0.33); /* management links */
	--tab: #383838;
	
	--bgmenu: #222; /* background color for the menu */
	--bgmenuh: #333; /* mouse over a menu item */
	--bgmenus: rgba(128,128,128,0.03); /* menus on the side panels */
	
	--section: rgba(66,66,66,0.25);
	--card: rgba(61,61,61,0.5);
	--preview: rgba(51,51,51,0.7);
	--postit: rgba(255,250,204,0.13);
	--translucent: rgba(128,128,128,0.33);
	--link: rgba(128,128,128,0.18);
	--notice: rgba(101,101,101,0.2);
	--status: rgba(101,101,101,0.5);
	--reqs: rgba(51,51,51,0.5);
	--tree: rgba(51,51,51,0.5);
	--important: rgba(255,241,128,0.12);
	
	--mod: rgba(110,55,55,0.5);
	--mod2: rgba(110,55,55,0.25);
	
	/* FRAMES AND LINES */
	--line: rgba(241,241,241,0.5);
	--frame: rgba(241,241,241,0.33);
	--lframe: rgba(241,241,241,0.2);

	--blur: 0.40;

}


* { padding: 0; margin: 0; border: none; outline: none; font: inherit; line-height: inherit; background: none; }
* { text-overflow: ellipsis; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
* { box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; -o-box-shadow: none; }
*:first-child { margin-top: 0 !important; }
*:last-child { margin-bottom: 0 !important; }
*::-moz-focus-inner { border: 0; }

* {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

window#JSConsoleWindow { display: none !important; }
#javascriptConsole {display: none !important}

html,body { width: 100%; height: 100%; }
html { background: var(--bgcolor) url(/img/bgnd/body.jpg) repeat center top; }
body { overflow-x: hidden; overflow-y: auto; cursor: default; }
body { font: 16px var(--txtfont); color: var(--txtcolor); line-height: 115%; }
body {
	-webkit-text-size-adjust:100%;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

audio { display: none; }

p, .margin { margin: 0.5em 0; }
ol, ul { margin: 0.5em 0.5em; }
li { margin: 0.4em 0.7em; list-style: disc; list-style-position: outside; }

h1, h2, h3 { margin: 0.5em 0; margin-bottom: 0.15em !important; }
h1, h2 { font-family: var(--hfont); font-weight: normal; line-height: 100%; }
h3 { font-weight: bold; }
h1 { font-size: 1.75em; text-align: left; }
h2 { font-size: 1.5em; text-align: left; }
h3 { font-size: 1em; text-align: left; }
h1+*, h2+*, h3+* { margin-top: 0 !important; }
h2 > small { font-size: 70%; }
.subtitle { margin-bottom: -0.7em; color: gray; }

.bold, b { font-weight: bold; }
.italic, i { font-style: italic; }
.big, big { font-size: 1.1em; line-height: 115%; }
.small, small { font-size: 0.9em; line-height: 115%; }
.tiny { font-size: 0.8em; }
.lowercase { text-transform: lowercase; }
.uppercase { text-transform: uppercase; }
.old { font-family: var(--hfont); }

.left { text-align: left; }
.right { text-align: right; }
.just { text-align: justify; }
.center { text-align: center; }
.top { vertical-align: top; }
.hyphen { overflow: hidden; word-break: break-word; hyphens: auto;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-o-hyphens: auto;
}
.nowrap { white-space: nowrap; }
.ellipsis { white-space: nowrap; text-overflow: ellipsis; overflow-x: hidden; }
.break { word-break: break-all; line-break: strict; }
.src { color: var(--dkgray); font-size: 12px; line-height: 13px; margin: 0 !important; }

.serif { font-family: var(--seriffont); }
.monospace { font-family: var(--monofont); }

.azure, .blue { color: var(--blue); }
.gules, .red { color: var(--red); }
.purpure, .purple { color: var(--purple); }
.vert, .green { color: var(--green); }
.orange { color: var(--orange); }
.gold { color: var(--gold); }
.gray { color: var(--gray); }
.dkgray { color: var(--dkgray); }
.ltgray { color: var(--ltgray); }
.pre { color: var(--prefix); }

table { table-layout: fixed; border-spacing: 0; }
table.pad > tbody > tr > td { padding-left: 7px; }
table.pad > tbody > tr > td:first-child { padding-left: 0; }
table.bline > tbody > tr > td { vertical-align: baseline; }

button { overflow: hidden; }
a, button { cursor: pointer; text-decoration: none; color: var(--anchor); }
a:hover, button:hover { text-decoration: underline; color: var(--anchorh); }
a:disabled, button:disabled { text-decoration: none; color: var(--anchord); }
button::-moz-focus-inner { padding: 0; border: 0; }
a.button { display: inline-block; line-height:0; }
a.red:hover,button.red:hover { color: var(--red); }
a:disabled:hover, button:disabled:hover { color: var(--anchord); }

a.strike { color: var(--txtcolor); }
a.strike:hover { text-decoration: line-through; }
a[href="!"] { font-style: italic; color: gray; pointer-events: none; }

h1 a, h2 a { color: var(--txtcolor); }
h1 a:hover, h2 a:hover { color: var(--txtcolor); text-decoration: none; }

.noMargin { margin: 0 0 !important; }
.noMargin + * { margin-top: 0 !important; }

label { vertical-align: middle; font-size: 13px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
input[type=checkbox], input[type=radio] { width: 14px; height: 14px; }

input, select { text-align: inherit; font-size: inherit; font-family: inherit; letter-spacing: inherit; }
input[type=image], input[type=button], input[type=submit], input[type=checkbox], input[type=radio], label, select { cursor: pointer; }
input[type=text], input[type=number], input[type=password], input[type=email] { padding: 2px 7px; background: var(--bginput); text-align: left; border: 1px solid var(--frame); color: var(--txtcolor); }
input[type=text], input[type=number], input[type=password], input[type=email] { appearance: none; border-radius: 7px;
	-webkit-appearance: none; -webkit-border-radius: 7px;
	-moz-appearance: none; -moz-border-radius: 7px;
	-o-appearance: none; -o-border-radius: 7px;
}
input[disabled] { color: var(--dkgray); }
input[readonly] { color: var(--dkgray); }
::placeholder { color: var(--placeholder); }

input[type=submit], input[type=button], button.submit { text-align: center; }
input[type=submit], input[type=button], button.submit { appearance: none; border-radius: 7px;
	-webkit-appearance: none; -webkit-border-radius: 7px;
	-moz-appearance: none; -moz-border-radius: 7px;
	-o-appearance: none; -o-border-radius: 7px;
}
input[type=submit], input[type=button], button.submit { padding: 5px 13px; min-width: 60px; color: var(--btntext); background-color: var(--btnblue); }
input[type=submit]:hover, input[type=button]:hover, button.submit:hover { background-color: var(--btnblueh); color: var(--btntext); }
input[type=submit]:active, input[type=button]:active, button.submit:active { background-color: var(--btnblueh); color: var(--btntext); }
input[type=range] { position: relative; top: 0.2em; cursor: pointer; width: 100px; float: right; }

input[type=image]:hover, input[type=image]:active { opacity: 0.8; }

button.submit.red, input[type=submit].red { background-color: var(--btnred); }
button.submit.red:hover, input[type=submit].red:hover { background-color: var(--btnredh); }
button.submit.red:active, input[type=submit].red:active { background-color: var(--btnredh); }

button.submit.green, input[type=submit].green { background-color: var(--btngreen); }
button.submit.green:hover, input[type=submit].green:hover { background-color: var(--btngreenh); }
button.submit.green:active, input[type=submit].green:active { background-color: var(--btngreenh); }

button.submit.black, input[type=submit].black { background-color: var(--btnblack); }
button.submit.black:hover, input[type=submit].black:hover { background-color: var(--btnblackh); }
button.submit.black:active, input[type=submit].black:active { background-color: var(--btnblackh); }

button.submit { text-decoration: none; }
button.submit[disabled], button.submit[disabled]:hover { background-color: var(--btngray); opacity: var(--blur) !important; }
button.submit.disabled, button.submit.disabled:hover { background-color: var(--btngray); opacity: var(--blur) !important; }

select { appearance: none; border-radius: 7px;
	-webkit-appearance: none; -webkit-border-radius: 7px;
	-moz-appearance: none; -moz-border-radius: 7px;
	-o-appearance: none; -o-border-radius: 7px;
}
select { background: var(--bgselect); padding: 3px 10px; border: 1px solid var(--frame); text-align: left; }
select { width: 220px; overflow-x: hidden; text-overflow: ellipsis; color: var(--txtcolor); }

textarea { width: 100%; resize: none; border: none; overflow-x: hidden; overflow-y: auto; color: var(--txtcolor); }
textarea.resizable { resize: vertical; max-height: 1000px; min-height: 190px; }
.textPad { border: 1px solid var(--frame); background: var(--bginput); overflow: hidden; padding: 0; }
.textPad { border-radius: 7px;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	-o-border-radius: 7px;
}
.textPad > * { padding: 5px 7px; box-sizing: border-box; display: block; }
.textPad > .vscroll { min-height: 100px; max-height: 190px; overflow-y: auto; }
.textPad > input { border: none; }

input, textarea, .selectable, .selectable * {
    -webkit-touch-callout: text;
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}
.selectable, .selectable * {
	cursor: text;
}

.blur { opacity: var(--blur); }
.half { opacity: 0.5; }
.light.blur { opacity: 0.75; }
a.blur:hover, a.blur:active { opacity: 1.0; }
button.blur:hover, button.blur:active { opacity: 1.0; }
button.blur[disabled] { opacity: var(--blur) !important; }
button.off { opacity: var(--blur); }

img { image-rendering: auto; }
img.txt { height: 1em; line-height: 1em; vertical-align: text-top; }
img.pad { padding: 3px 7px; }
img:-moz-loading { visibility: hidden; }
.pic { line-height: 0; }

img.emoji { height: 1em; line-height: 1em; vertical-align: text-top; transform: scale(1.2); }
img.emoji:hover { height: 1em; line-height: 1em; vertical-align: text-top; transform: scale(1.5); }
img.sticker { height: 2em; line-height: 2em; }

h2 img.txt { height: 0.75em; line-height: 0; position: relative; top: 0.2em; }

.centered { margin-left: auto; margin-right: auto; }
.floatLeft { float: left; margin-right: 17px; }
.floatRight { float: right; margin-left: 17px; }
.floatLeft + *, .floatRight + * { margin-top: 0 !important; }

.pointer { cursor: pointer; }
.hidden { display: none; }
.noMouse, .noMouse * { pointer-events: none; }
.noCursor { cursor: none; }

.round { border-radius: 7px;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	-o-border-radius: 7px;
}

.roundTop { border-top-left-radius: 7px; border-top-right-radius: 7px;
	-webkit-border-top-left-radius: 7px; -webkit-border-top-right-radius: 7px;
	-moz-border-top-left-radius: 7px; -moz-border-top-right-radius: 7px;
	-o-border-top-left-radius: 7px; -o-border-top-right-radius: 7px;
}

.roundBottom { border-bottom-left-radius: 7px; border-bottom-right-radius: 7px;
	-webkit-border-bottom-left-radius: 7px; -webkit-border-bottom-right-radius: 7px;
	-moz-border-bottom-left-radius: 7px; -moz-border-bottom-right-radius: 7px;
	-o-border-bottom-left-radius: 7px; -o-border-bottom-right-radius: 7px;
}

.bubble { border-radius: 15px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	-o-border-radius: 15px;
}

.rotcw { transform: rotate(3deg);
	-webkit-transform: rotate(3deg);
	-moz-transform: rotate(3deg);
	-o-transform: rotate(3deg);
}
.rotccw { transform: rotate(-3deg);
	-webkit-transform: rotate(-3deg);
	-moz-transform: rotate(-3deg);
	-o-transform: rotate(-3deg);
}

.txtshadow { text-shadow: 0 0 5px #000; }

.frame { border: 1px solid var(--frame); }
.bordertop { border-top: 1px solid var(--frame); padding-top: 0.2em; }
.box { background: var(--box); }
.translucent { background-color: var(--translucent); }
.badge { padding: 0 7px; background: var(--badge); color: var(--bdgtext); font-size: 12px; }
.badge.red { background: var(--btnred); color: var(--btntext); font-size: 13px; }
.badge.blue { background: var(--btnblue); color: var(--btntext); font-size: 13px; }
.badge.green { background: var(--btngreen); color: var(--btntext); font-size: 13px; }
.badge.gray { background: var(--btngray); color: var(--btntext); font-size: 13px; }
.card { padding: 7px; background: var(--card); border: 1px solid var(--lframe); box-sizing: border-box; }
.paper { padding: 3px 7px; background: var(--paper); border: 1px solid var(--lframe); box-sizing: border-box; }
.wide { width: 100%; }

.postit { padding: 5px 7px; background: var(--postit); border: 1px solid var(--lframe); box-sizing: border-box; }

div.inline { display: inline-block; }
div.progress { display: inline-block; position: relative; top: 0.05em; width: 100%; height: 0.80em; border: 1px solid var(--frame); overflow: hidden; }
div.progress > div { height: 100%; background: var(--btnblue); overflow: hidden; }
div.progress > div > p { color: var(--btntext); height: 100%; box-sizing: border-box; }

.menu > a { display: block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; position: relative; }
.menu > a:hover { text-decoration: none; }
.menu > a > .badge { position: absolute; right: 0; }
.menu > a > .value { position: absolute; right: 0; }

.tabs { height: 38px; margin-bottom: 0 !important; overflow-x: auto; width: 700px; white-space: nowrap; }
.tabs + * { margin-top: -1px !important; }
.tab { height: 38px; box-sizing: border-box; white-space: nowrap; overflow: hidden; float: left; position: relative; }
.tab { background: var(--tab); opacity: 0.5; padding: 5px 9px; margin-right: 1px; }
.tab { border: 1px solid var(--lframe); border-bottom: none; box-sizing: border-box; }
.tab { color: var(--dkgray) !important; text-decoration: none !important; font-size: 16px; font-weight: bold; line-height: 26px; }
.tab { border-top-left-radius: 7px; border-top-right-radius: 7px;
	-webkit-border-top-left-radius: 7px; -webkit-border-top-right-radius: 7px;
	-moz-border-top-left-radius: 7px; -moz-border-top-right-radius: 7px;
	-o-border-top-left-radius: 7px; -o-border-top-right-radius: 7px;
}
.tab img { height: 26px; opacity: 0.8; }
.tab img.txt { height: 1em; }
.tab.green { color: #383 !important; }
.tab.red { color: #b33 !important; }
.tab.selected { z-index: 1; }
.tab.selected, .tab:hover { opacity: 1.0; }
.tab.selected img, .tab:hover img { opacity: 1.0; }
.tab .badge { position: absolute; right: 0; bottom: 2px; font-weight: normal; line-height: 20px; padding: 0 7px; }
.tab.disabled { pointer-events: none; cursor: default; }
.tab.disabled:hover { opacity: 0.5; }

.noMarginBottom { margin-bottom: 0 !important; }
.noMarginBottom + * { margin-top: 0 !important; }

.hscroll { display: block !important; overflow-y: hidden; overflow-x: hidden; max-width: 100%; }
.hscroll:hover { overflow-x: auto !important; }
.hscroll > p { white-space: nowrap; }

.inlinemenu { box-sizing: border-box; width: 100%; white-space: nowrap; overflow-x: hidden; }
.inlinemenu { font-size: 0.9em; line-height: 115%; }
table.inlinemenu > tbody > tr > td { width: 100%; overflow: hidden; }
table.inlinemenu > tbody > tr > td.buttons { text-align: right; width: 64px; min-width: 64px; }

.carousel > * { width: 30%; }
.carousel > a > img { width: 100%; }
.carousel img { max-width: intrinsic; }

.slider { position: relative; height: 28px; background: var(--slider); overflow: hidden; margin: 7px 0; cursor: pointer; }
.slider.disabled { cursor: default; }
.slider > * { position: absolute; width: 100%; height: 28px; top: 0; left: 0; pointer-events: none; }
.slider > div { background: var(--btnblue); overflow: hidden; }
.slider:hover > div { background: var(--btnblueh); }
.slider p { padding: 5px 10px; font-size: 15px; line-height: 16px; margin: 0; white-space: nowrap; }
.slider p.front { color: var(--btntext); }
.slider p.back { color: var(--btnblue); }

.slider.red > div { background-color: var(--btnred); }
.slider.red:hover > div { background-color: var(--btntext); }
.slider.red p.back { color: var(--btnred); }

.slider.green > div { background-color: var(--btngreen); }
.slider.green:hover > div { background-color: var(--btngreenh); }
.slider.green p.back { color: var(--btngreen); }

.noHelp a[href^="/help/"] { display: none !important; }


#header { position: fixed; z-index: 11000; top: 0; left: 0; width: 100%; height: 88px; background: #000 ; opacity: 0.90; }
#header { background-repeat: repeat-x; background-position: right; background-size: contain; background-image: url(/img/bgnd/header.jpg); }
#header > div { min-width: 320px; max-width: 1188px; height: 100%; margin: 0 auto; }
#header .container { position: relative; width: 100%; height: 100%; }
#header .container { color: #fff; }
#header .container > * { position: absolute; }

#header a, #header button { color: #eee; }

#header .rightHeader { top: 0; left: 100%; width: 100%; height: 100%; background-repeat: repeat-x; background-position: left; background-size: contain; }
#header .title { left: 50px; top: 0; }

#header .menu { display: none; background: var(--bgmenu); color: var(--txtcolor); text-align: left; border: 1px solid var(--line); padding: 3px 0; }
#header .menu > a { display: block; color: var(--txtcolor); padding: 1px 10px; }
#header .menu > a:hover { background: var(--bgmenuh); }
#header .menu > div.sep { height: 1px; background: var(--line); margin: 3px 0; }
#header .menu > p.label { color: var(--gray); font-size: 10px; line-height: 10px; padding: 0 10px; margin: 0 !important; }

#home { left: 0; top: 0; width: 50px; height: 44px; }
#home > img { width: 100%; height: 100%; }

#nav { left: 3px; bottom: 0; height: 50%; font-size: 0; }
#nav > a { display: inline-block; width: 44px; height: 44px; opacity: 0.7; position: relative; }
#nav > a > img { width: 100%; height: 100%; cursor: pointer; }
#nav > a:hover, #nav > a[selected] { opacity: 1; }
#nav > a > .badge { position: absolute; bottom: 4px; right: 2px; background: var(--badge); color: var(--bdgtext); }
#nav > button { height: 44px; opacity:0.7; }
#nav > button:hover, #nav > button[selected] { opacity: 1; }
#nav > button > img { height: 44px; width: 44px; cursor: pointer; }
#nav .menu { position: absolute; top: 44px; left: 0px; width: 100%; overflow-x: hidden; font-size: 16px; }
#nav .menu { max-height: 240px; overflow-y: auto; }

#user { top: 0; right: 10px; height: 80px; padding: 4px; text-align: right; cursor: pointer; }
#user > img { height: 100%; width: 80px; background: rgba(90,90,90,0.5); }
#user > .badge { position: absolute; bottom: 2px; right: 2px; }
#user.hl > img { background: rgba(214,204,0,0.5); }
#user.del > img { background: rgba(255,102,102,0.5); }
#user .menu > a.fig.me { font-weight: bold; }
#user .menu > a.hl { background: rgba(214,204,0,0.3); }
#user .menu > a.hl:hover { background: rgba(214,204,0,0.6); }
#user .menu > a.del { background: rgba(255,102,102,0.3); }
#user .menu > a.del:hover { background: rgba(255,102,102,0.6); }
#user .menu > a .talking { display: none; }
#user .menu > a .badge { padding: 1px 7px; margin-left: 5px; position: relative; top: -1px; }

#fig { top: 0; right: 94px; height: 80px; padding: 7px; text-align: right; }
#fig #charname { font-size: 20px; font-family: var(--hfont); line-height: 22px; }
#fig #DP { font-size: 14px; font-weight: bold; padding: 2px 7px; position: relative; top: -1px;}

.underHeader { position: fixed; top: 93px; }
.underHeader.left { left: 5px; }
.underHeader.right { right: 5px; }
.underHeader.center { width: 0; left: 50%; overflow-x: visible; }

/* Small header */
@media screen and (max-height: 799px) {
	#header { height: 44px; }
	#header .title { display: none; }
	#nav { left: 50px; height: 100%; }
	#user { right: 10px; height: 40px; padding: 2px; }
	#user > img { width: 40px; }
	#fig { right: 60px; height: 40px; padding: 3px; }
	.underHeader { top: 49px; }
	#date { right: 100px; margin-right: 0; }
	#time { right: 100px; margin-right: 0; }
}

/* Hide date and time */
/* Hide user blazon */
@media screen and (max-width: 625px) {
	#date { display: none; }
	#time { display: none; }
	#user { right: 0; }
}

/* Hide 9th nav button */
@media screen and (max-width: 700px) and (max-height: 799px) {
	body.user #nav > a:nth-child(9) { display: none; }
}

/* Hide 8th nav button */
@media screen and (max-width: 656px) and (max-height: 799px) {
	body.user #nav > a:nth-child(8) { display: none; }
}

/* Hide 9th nav button */
@media screen and (max-width: 530px) {
	body.user #nav > a:nth-child(9) { display: none; }
}

/* Hide 8th nav button */
@media screen and (max-width: 486px) {
	body.user #nav > a:nth-child(8) { display: none; }
}

/* Hide 7th nav button */
@media screen and (max-width: 442px) {
	body.user #nav > a:nth-child(7) { display: none; }
}

/* Hide 6th nav button */
@media screen and (max-width: 398px) {
	body.user #nav > a:nth-child(6) { display: none; }
}

/* Hide 5th nav button */
@media screen and (max-width: 354px) {
	body.user #nav > a:nth-child(5) { display: none; }
}

/* Hide 4th nav button */
@media screen and (max-width: 310px) {
	body.user #nav > a:nth-child(4) { display: none; }
}

/* Shift under header controls */ 
@media screen and (min-width: 1870px) {
	body.user .underHeader.left { left: 350px; }
	body.user .underHeader.right { right: 350px; }
}





#page { width: 100%; }
#page > div { min-width: 320px; max-width: 1188px; height: 100%; margin: 0 auto; }
#page .container { width: 100%; height: 100%; max-width: 100%; overflow: hidden; }

#page .column { padding-top: 98px; height: 100%; overflow: visible; }
#left, #right { font-size: 14px; padding-left: 15px; padding-right: 15px; position: relative; }
#left, #right { min-width: 200px; max-width: 200px; width: 200px; }
#main { width: 100%; padding: 10px 0; max-width: 100%; }
#left { float: left; }
#right { float: right; }
#main { padding-left: 230px; padding-right: 230px; box-sizing: border-box; }
#left > div, #right > div { width: 200px; }
#left .floatLeft, #right .floatLeft { margin-right: 7px; }
#left .floatRight, #right .floatRight { margin-left: 7px; }

#page .floatingColumn > div { }
#page .floatingColumn > div > div.content { padding-bottom: 40px; width: 200px; }
#page .floatingColumn > div > div.content > *, #page .column > div > div.content > form > * { margin: 0.5em 0; }

#main h1 { text-align: center; }
#main > *, #main > form > * { padding-left: 7px; padding-right: 7px; margin: 0.5em 0; }
#main > form { padding-left: 0; padding-right: 0; }

.bg { background: var(--bgcolor) url(/img/bgnd/body.jpg) repeat center top; }

.block { background: var(--paper); padding: 0 !important; width: 100%; max-width: 100%; overflow-x: hidden; }
.block { border: 1px solid var(--lframe); box-sizing: border-box; }
.block > * { padding: 0.5em 3%; width: 100%; max-width: 100%; box-sizing: border-box; }
.block.postit { background: var(--postit); }

.block.cols { display: table; }
.block.cols > * { display: table-cell; vertical-align: top; padding-left: 0; overflow-x: hidden; }
.block.cols > *:first-child { padding-left: 3%; }
.block.cols > .pict { text-align: center; padding: 4px; line-height: 0; }
.block.cols > .pict img { width: 100%; max-width: intrinsic; }
.block.cols > * > .portrait { width: 90px; height: 90px; }
.block.cols > * > .panel { padding: 5px 10px; background: #ddd; }
.block.cols > .col > h2 { line-height: 30px; }

.nopad { padding: 0 !important; }

#main .section { margin: 0.5em 0; padding: 17px 3%; background: var(--section); }
#main .section { border: 1px solid var(--lframe); box-sizing: border-box; }
#main .section h3 { text-align: center; color: #aaa; margin-top: -13px !important; }
#main .section h3.left { text-align: left; }
#main .section h3 > .normal { font-weight: normal; }

#main .group { padding: 0 !important;  margin: 0.5em 0; }
#main .group > * { padding-left: 7px; padding-right: 7px; margin: 0.5em 0; }

#left .menu, #right .menu { border-bottom: 1px solid var(--lframe); background: var(--bgmenus); }
#left .menu > a, #right .menu > a { padding: 3px 0; color: var(--txtcolor); border-top: 1px solid var(--lframe); }
#left .menu > a:hover, #right .menu > a:hover { background-color: var(--bgmenuh); }
#left .menu > a[selected], #right .menu > a[selected] { padding-right: 10px !important; }
#left .menu > a[selected] { background: url(/img/icon/menu.png) no-repeat right center; background-size: 12px 16px; }
#right .menu > a[selected] { background: url(/img/icon/menuleft.png) no-repeat right center; background-size: 12px 16px; }

#left .ad, #right .ad { width: 200px; height: 200px; background: var(--box); opacity: 0.9; }
#main .ad { width: 100%; height: 90px; background: var(--box); overflow-x: hidden; padding: 0 0 !important; opacity: 0.9; position: relative; }
#main .ad > div { width: 728px; height: 90px; position: absolute; top: 0; right: 0; }

#main > iframe.video { background: var(--line); padding: 0 !important; width: 100%; }

#main .menu { width: 250px; margin: 0.5em auto; }
#main .menu > a { text-align: center; margin: 0.5em 0; }
#main .menu > a { padding: 5px 13px; min-width: 60px; color: #fff; background-color: #26b; }
#main .menu > a { appearance: none; border-radius: 7px;
	-webkit-appearance: none; -webkit-border-radius: 7px;
	-moz-appearance: none; -moz-border-radius: 7px;
	-o-appearance: none; -o-border-radius: 7px;
}
#main .menu > a:hover, #main .menu > a:active { background-color: #37c; }
#main .menu > a.green { background-color: #484; }
#main .menu > a.red { background-color: #b44; }
#main .menu > a.green:hover, #main .menu > a.green:active { background-color: #595; }
#main .menu > a.red:hover, #main .menu > a.red:active { background-color: #c55; }
#main .menu > a > .badge { right: 5px; }

.submenu { font-size: 13px; line-height: 1em; color: #999; margin: 0 !important; }
#main .submenu { text-align: center; }

.loader.hidden { display: none; }
.loader.bottom { height: 40px; }
.loader > .anim { display: none; }
.loader > button { display: inline; }
.loader.loading > .anim { display: inline; }
.loader.loading > button { display: none; }

.modal { position: fixed; top: 0; left: 0; z-index: 12000; padding: 5%; box-sizing: border-box; width: 100%; height: 100%; background: rgba(0,0,0,0.25); display: none; }
.modal > * { margin: auto auto !important; box-sizing: border-box; max-width: 420px; max-height: 100%; overflow: auto; background: var(--bgnotif); opacity: 0.9; }
.alert { z-index: 9999; position: fixed; width: 100%; top: 0; background: var(--bgnotif); display: none; }
.alert > div { width: 100%; max-width: 500px; margin: 0 auto; padding: 7px 15px; background: url(/img/bgnd/alert.png); border: 1px solid var(--frame); background-size: 100% 100%; text-align: center; }

.modal > .reload { width: 200px; padding: 10px; }

#search { background: none; width: 100%; max-width: 500px; padding: 0 10px; }
#search > input { width: 100%; display: block; height: 30px; padding-left: 30px; box-sizing: border-box; }
#search > input { background: var(--bginput) url(/img/icon/search.png) no-repeat 7px center; background-size: 16px 16px; }
#search > div.result { position: relative; background: var(--bgmenu); margin: 0 0.5em; top: -1px; overflow-x: hidden; border: 1px solid var(--line); }
#search > div.result > table { border-spacing: 0; width: 100%; }
#search > div.result tr { cursor: pointer; }
#search > div.result tr:hover { background-color: var(--bgmenuh); }
#search > div.result td { padding: 2px 2px; }
#search > div.result td.icon { min-width: 24px; width: 24px; text-align: center; }
#search > div.result td.name { width: 100%; white-space: nowrap; overflow: hidden; }
#search > div.result td.relevance { min-width: 50px; width: 50px; text-align: right; padding: 0 3px; background: var(--bgnotif); }
#search > div.result td.name .floatRight { position: relative; z-index: 1; }

#search.filter.help > input { background-image: url(/img/icon/search.png), url(/img/icon/nav.hlp.png); }
#search.filter.help > input { background-position: 7px center, right 7px center; padding-right: 30px; }

/* Small header */
@media screen and (max-height: 799px) {
	#page .column { padding-top: 54px; }
}

/* Hide right column */
@media screen and (max-width: 899px) {
	#left { display: none !important; }
	#main { padding-left: 0 !important; }
}

/* Hide left column */
@media screen and (max-width: 567px) {
	#right { display: none !important; }
	#main { padding-right: 0 !important; }
}

#notice { position: fixed; z-index: 99999; bottom: 0; width: 100%; display: none; }
#notice { background: var(--bgnotif); opacity: 0.8; }
#notice > table { width: 100%; }
#notice > table td { width: 100%; padding: 7px 13px; }
#notice > table td.nbtn { width: 70px; min-width: 70px; text-align: right; }







.bbinline > * { display: inline; }
.bbpreview { margin: 2px; margin-bottom: 0.5em; }
.bbpreview { padding: 10px 2.5% !important; background: var(--preview); color: var(--dkgray); }
.bbpreview { border: 1px solid var(--lframe); box-sizing: border-box; }

.smallcaps { font-variant: small-caps; }
.initial { display: block; float: left; width: 4.4em; height: 4.4em; margin-right: 0.2em; }
.quote { margin: 0.5em 0; border-left: 1px solid var(--line); padding: 0 10px; font-size: 0.9em; }
.quote p { margin: 0; }
.bullet { margin: 0.4em 1.4em; text-indent: -1.25em; }
.bullet:before { content: "✽ "; }
.line { border-top: 1px solid var(--line); }
.tag { font-weight: normal; font-style: normal; text-transform: uppercase; line-height: 0.9em; font-size: 0.8em; }
.tag { display: inline-block; vertical-align: middle; overflow-x: hidden; white-space: nowrap; max-width: 50%; }
.tag { padding: 0.15em 0.2em 0.15em 0.2em; vertical-align: middle; position: relative; top: -0.1em; }
.tag { background: var(--bgtag); }
.tag.red { background: var(--btnred); color: var(--btntext); }
.tag.green { background: var(--btngreen); color: var(--btntext); }
h2 .tag { line-height: 1em; font-size: 0.6em; padding: 0.25em 0.2em 0.15em 0.2em; top: -0.2em; }
img.pic { width: 100%; max-width: intrinsic; opacity: 0.8; filter: grayscale(100%) contrast(150%); }
a.url { box-sizing: border-box; display: inline-block; vertical-align: middle; overflow-x: hidden; white-space: nowrap; max-width: 50%; }
a.url { background: rgba(128,128,128,0.2); padding: 0.3em 0.5em; font-size: 0.9em; line-height: 0.9em; text-decoration: none; position: relative; top: -0.1em; }
a.url > b { color: #555; }
a.url:hover > .url { text-decoration: underline; }
a.link { display: block; position: relative; vertical-align: middle; width: 300px; height: 80px; overflow: hidden; margin: 0.5em 0; }
a.link { background: var(--link); font-size: 0.9em; text-decoration: none; border: 1px solid var(--lframe); }
a.link > img { display: block; position: absolute; left:0; top: 0; width: 80px; height: 80px; opacity: 0.8; filter: grayscale(90%) contrast(120%); }
a.link:hover > img { opacity: 1.0; filter: grayscale(0%); }
a.link > div { position: absolute; left:80px; top: 0; box-sizing: border-box; width: 210px; height: 80px; padding: 2px 5px; }
a.link > div > h3 { color: var(--dkgray); }
a.link:hover > div > .url { text-decoration: underline; }
a.imglink { display: block; width: max-content; max-height: 300px; overflow: hidden; margin: 0.5em 0; line-height: 0; }
a.imglink > img { max-width: 300px; max-height: 300px; opacity: 0.8; filter: grayscale(25%); }
a.imglink:hover > img { opacity: 1.0; filter: grayscale(0%); }
#main .section a.link > div > h3 { text-align: left !important; color: var(--dkgray) !important; margin-top: 0 !important; }
#main .section[data-lang] > h3 { font-weight: normal; font-size: 14px; color: var(--gray);}
#main .section { overflow-x: hidden; }

a.coord { padding: 3px 5px; background: #999; color: #fff; }

.disclosed { cursor: pointer; }
.disclosed > * { display: none; }
.disclosed > *:first-child { display: block; }
.disclosure { padding-left: 1.3em; background-size: 1em; background-position: left center; background-repeat: no-repeat; }
.disclosure { background-image: url({SKIN}/icon/disclosure.png); }
.disclosed > .disclosure { background-image: url({SKIN}/icon/menu.png); }

.tree { background: var(--tree); }
.tree ul { margin: 0 7px; }
.tree li { font-size: 1em; border-left: 1px solid var(--txtcolor); margin: 0 7px; padding-left: 10px; list-style-type: none; }​

table.online { width: 100%; }
table.online td.name { width: 166px; max-width: 166px; text-align: right; white-space: nowrap; overflow: hidden; }
table.online td.icon { width: 20px; max-width: 20px; text-align: right; }

table.nowithdraw { max-width: 450px; margin: auto; border-spacing: 7px 0; }
table.nowithdraw th { width: 1.5em; vertical-align: top; }

.w162 { width: 162px; }

.bb { color: transparent !important; }
.data { color: transparent !important; }

table.small.table.alt tr:nth-child(even) { background: var(--bgaltrows); }
table.small.table.alt td { vertical-align: top; padding: 2px 7px; }
table.small.table div.qual { width: 70px; height: 16px; }
table.small.table span.offense { width: 40px; text-align: center; color: #fff; }

div.serv { overflow: hidden; height: 20px; margin: 0 auto !important; padding: 0 !important; }
div.serv > div { height: 100%; }
div.serv.on { background: #39c; }
div.serv.off { background: #ddc; }
div.serv.on > div { background: #ddc; }
div.serv.off > div { background: #39c; }
div.serv.off.owned { background: #9bc; }
div.serv.on.owned > div { background: #9bc; }
div.block div.serv { margin-left: 0 !important; }

div.temps { display: inline-block; width: 83px; height: 83px; position: relative; overflow: hidden; }
div.temps > div { position: absolute; top: 0; width: 1px; opacity: 0.8; }

#right .content > div.state, #right .content > div.qual { width:162px; margin-left: 0 !important; }
#right .content > .card > div.state, #right .content > .card > div.qual { width:162px; margin-left: 0 !important; }
div.state.roundBottom, div.qual.roundBottom { margin-top: -5px !important; }

.grade { font-size: 15px; line-height: 15px; }

.ptelement button.bgchange { line-height: 30px; }
.ptelement button.frchange { line-height: 30px; }

.bpreview { text-align: center; margin: 0 auto !important; vertical-align: middle; }
.bpreview > img { margin: -10px !important; margin-bottom: -24px !important; }
.bpreview > img.arrow { height: 1em; margin: 0 !important; margin-bottom: 0 !important; }

.figure { position: relative; width: 120px; height: 120px; }
.figure > * { position: absolute; display: block; }
.figure > a { padding: 0; width: 100%; height: 100%; }
.figure * { width: 100%; height: 100%; }

.i88 { width: 88px; height: 88px; background: #998; }

div.work { background: var(--postit) url({SKIN}/bgnd/work.png) repeat-x left top; background-size: 64px 16px; padding-top: 16px !important; }
div.start { background: var(--postit) url({SKIN}/bgnd/start.png) repeat-x left top; background-size: 64px 16px; padding-top: 16px !important; }

/* Images loading */
button.loading { background: url({SKIN}/icon/bar.gif) no-repeat center 5px; }
button.loading > img { opacity: 0.25; }

/* Forum */
#importantThreads .block { background: var(--important); }
#bestReplies .block { background: var(--important); }
.post { padding-top: 0.5em; border-top: 1px solid var(--lframe); font-size: 13px; }
.post > * { margin: 0 0; }

.message > .step8 { opacity: 0.5; }

#main div.confirm { display: none; background: rgba(200,200,180,0.25); margin-top: -0.5em !important; }
#main div.confirm > div { padding: 17px 3% !important; }

/* Home page */
#cover { position: relative; width: 100%; height: 400px; overflow: hidden; padding: 0 !important; background-color: var(--bgmap); background-image: url(/img/cover.jpg); background-size: cover; }
#cover { border: 1px solid var(--lframe); }
#cover > * { position: absolute; }
#cover > #login { top: 220px; width: 100%; }
#cover > #welcome { top: 180px; width:100%; text-align: center; color: #fff; font-size: 36px; }

.block > .ornament { padding-left: 64px; }
.block > .ornament { background: transparent url({SKIN}/bgnd/ornament.png) repeat-y 7px top; background-size: 50px 130px; }
.block > .ornament .table { border-spacing: 10px 1px; }
.block > .ornament .table.vspacing { border-spacing: 10px 7px; }
.block > .ornament .table > tbody > tr > th { width: 25%; font-weight: bold; }
#main.noOrnament .block > .ornament { background: transparent; padding-left: 3%; }

.block.cols > .pict.help { width: 20%; padding: 1.5%; padding-right: 2%; }
.block.cols > .pict.help.bld img { width: intrinsic; }

.block.cols > .blazon { width: 44px; min-width: 44px; padding: 0; background-repeat: repeat-y; background-size: contain; }
.block.cols > .blazon img { width: 100%; }
.block.cols > .blazon + div { padding-left: 2%; }

.block.cols > .img { width: 130px; min-width: 130px; padding: 0 !important; opacity: 0.9; }
.block.cols > .img { background-color: #999; background-position: center center; background-repeat: no-repeat; }
.block.cols > .img { background-size: cover; }
.block.cols > .withImg { padding-right: 2%; }

.block.cols > .ribbon { width: 44px; min-width: 44px; padding: 0; background-repeat: repeat-y; background-size: contain; }
.block.cols > .ribbon + div { padding-left: 3%; }

.block.cols > .mgmt { width: 44px; min-width: 44px; padding: 0; }
.block.cols > .mgmt.red { background: #b33; }
.block.cols > .mgmt.green { background: #383; }
.block.cols > .mgmt img { width: 44px; }
.block.cols > .mgmt + div { padding-left: 1%; }

.block.off { opacity: 0.7; }

.labeled { position: relative; box-sizing: border-box; width: 250px !important; height: 218px !important; margin: 0.5em auto !important; }
.labeled { background-image: url({SKIN}/bgnd/label.png); background-size: contain; background-repeat: no-repeat; }
.labeled { padding: 45px 32px !important; color: #633; }
.labeled > div { height: 128px; display: table-cell; vertical-align: middle; }
.labeled > div > * { text-align: center !important; }

.id { font-family: var(--monofont); font-weight: normal; }

#right .labeled { width: 200px !important; height: 174px !important; }
#right .labeled { padding: 32px 26px !important; }
#right .labeled > div { height: 110px; }
#right .labeled > div > h1 { font-size: 1.5em; }
#right .labeled > div > p { font-size: 12px; }

/* Forms */
div.form { margin: 0.5em 0; }
div.form > p { text-align: center; margin: 0.3em 0; }
div.form label { display: inline-block; width: 25%; text-align: right; }
div.form input, div.form select { display: inline-block; width: 40%; }
div.form input + label, div.form select + label { width: 25%; text-align: left; color: #c33; }

img.private { opacity: 0.25; }
select.private { color: #CCC; }

div.chkgroup { margin: 1em 1em; }
div.chkgroup > p { margin-left: 19px; text-indent: -19px; }

/* Numeric pad */
.numpad { border-spacing: 5px; margin: 0 auto; }
.numpad td { width: 44px; height: 44px; background: #fff; border: 1px solid #468; }
.numpad td { text-align: center; font-size: 44px; color: #468; cursor: pointer; }
.numpad td:hover, .numpad td:active { background: #eee; }

/* Wardrobe */
.wrelement .label { display: inline-block; width: 220px; text-align: center; }

#popUpMessage { display: none; }

table.bspacing { border-spacing: 7px 0; }
td.name > img.txt { position: relative; top: 1px; }

#linkmenu { width: 300px; border: 1px solid var(--frame); background: var(--bginput); overflow: hidden; }
#linkmenu > button { display: block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; text-align: left; }
#linkmenu > button { opacity: 0.8; color: var(--txtcolor); padding: 3px 7px; width: 100%; box-sizing: border-box; }
#linkmenu > button:hover { opacity: 1.0; text-decoration: none; }

/* Widgets */
.widget h1 { margin: 2px 3px; font-size: 13px; font-weight: bold; color: #333; text-align: left; }
.widget h1 > img { width: 20px; height: 16px; position: relative; top: 2px; }
.widget h2 { margin: 7px 0; font-size: 13px; font-weight: bold; color: #333; }

.widget > .shade { padding: 7px 10px; background: rgba(0,0,0,0.05); border: 1px solid #ccb; }
.widget > .shade.mod { background: rgba(0,0,0,0.05) url({SKIN}/bgnd/mod.png) repeat-y right top; }

.widget table.info { width: 100%; border-spacing: 5px 0; margin: 5px 0; }
.widget table.info > tbody > tr > th { width: 50%; min-width: 50%; }
.widget table.info > tbody > tr > td input[type=text] { width: 100px; }
.widget table.info > tbody > tr > td.sum { border-top: 1px solid #999; }
.widget table.user > tbody > tr > th { width: 27%; min-width: 27%; }
.widget table.stats > tbody > tr > th { width: 70%; min-width: 70%; }
.widget table.bldstats > tbody > tr > th { width: 20%; min-width: 20%; }

.widget .menu { background: #fff; padding: 2px; }
.widget .menu a { display: block; padding: 4px 15px; text-decoration: none; border-bottom: 1px solid #ddd; }
.widget .menu a:hover { background: #e8e7e7 url({SKIN}/icon/menuarrow.png) no-repeat right center; }
.widget .menu a.selected { background: #e8e7e7; font-weight: bold; }
.widget .menu a .badge { margin-left: 7px; position: relative; top: -1px; }

.widget .list { margin: 10px 0; }
.widget .list a { display: block; padding: 1px 15px; text-decoration: none; }
.widget .list a:hover { background: #e8e7e7; }
.widget .list a.selected { background: #e8e7e7; font-weight: bold; }

.widget .html { padding: 0 10px; font-size: 12px; }

.hscroll a.button { display: inline-block; position: relative; }
.hscroll a.button .siblings { position: absolute; bottom: 7px; right: 0; width: 100%; }
.hscroll a.button .siblings { font-size: 13px; font-weight: bold; color: #222; text-align: center; }

div.detail { white-space: nowrap; }
div.detail > p { border-top: 1px dotted var(--frame); padding-top: 0.25em; }

.desc { max-width: 420px; margin: 0.5em auto !important; font-family: var(--seriffont); }
.desc table { border-spacing: 7px 0; margin-top: -0.5em; }
.desc table.modifiers td:first-child { text-align: center; width: 40px; }
.desc table.difficulty td:first-child { font-weight: bold; }
.desc table.ranks { margin-top: 0.5em; }
.desc table.ranks td { vertical-align: top; }
.desc table.ranks tr:first-child { font-weight: bold; }
.desc table.ranks td:first-child { text-align: center; width: 40px; }

.slider.info { max-width: 400px; margin: 5px auto; border: 1px solid var(--frame); background: var(--bginput); }
.slider.info > div { background: var(--btnblack); }
.slider.info:hover > div { background: var(--btnblackh); }
.slider.info p.front { color: var(--btntext); }
.slider.info p.back { color: var(--btntext); }

.rankinput { width: 70px; margin: 0 auto; padding: 2px 7px; }
.rankinput { background: var(--bgselect); border: 1px solid var(--frame); color: var(--txtcolor); }
.rankinput > span { display: inline-block; width: 20px; }

button.submit.info { background: var(--btnblack); opacity: 0.33; border: 1px solid var(--frame); }
button.submit.info > img { height: 32px; }
button.submit.info:hover { background: var(--btnblackh); }
button.submit.info.selected { opacity: 1; }

table.split { width: 100%; max-width: 440px; margin: 0.5em auto; border-spacing: 13px 0; }
table.split > tbody > tr > td { vertical-align: top; }
table.split.frame { border-spacing: 7px 3px; }
table.split > tbody > tr > td { width: 50%; }

table.users { width: 100%; }
table.users tr { cursor: pointer; }
table.users tr:hover { background: var(--bgmenuh); }
table.users td { vertical-align: top; box-sizing: border-box; }
table.users td.name { width: 150px; min-width: 150px; overflow-x: hidden; white-space: nowrap; }
table.users tr[data-id]:hover td.name, table.users tr.editing td.name { padding-left: 16px; background-image: url(/img/icon/right.png); background-position: left top; background-size: 16px 16px; background-repeat: no-repeat; }
table.users td.notes { width: 100%; font-size: 14px; font-family: var(--seriffont); overflow-x: hidden; white-space: nowrap; }

table.stats { width: 100%; max-width: 420px; margin: 0.5em auto; }
table.stats > tbody > tr > td.label { width: 100%; }
table.stats > tbody > tr > td.btn { width: 20px; min-width: 20px; text-align: center; }
table.stats > tbody > tr > td.val { width: 35px; min-width: 35px; text-align: center; }
table.stats > tbody > tr > td.bonus { width: 32px; min-width: 32px; text-align: right; }

table.skills { width: 100%; }
table.skills tr { cursor: pointer; }
table.skills tr:hover { background: var(--bgmenuh); }
table.skills td { vertical-align: top; }
table.skills td.name { width: 100%; overflow-x: hidden; white-space: nowrap; }
table.skills tr[data-type]:hover td.name, table.skills tr.editing td.name { padding-left: 16px; background-image: url(/img/icon/right.png); background-position: left top; background-size: 16px 16px; background-repeat: no-repeat; }
table.skills td.stats { width: 54px; min-width: 54px; text-align: center; font-size: 14px; font-family: var(--seriffont); }
table.skills td.ranks { width: 300px; min-width: 300px; white-space: nowrap; font-size: 14px; font-family: var(--seriffont); }
table.skills td.bonuses { width: 60px; min-width: 60px; text-align: right; }

table.talents { width: 100%; }
table.talents tr { cursor: pointer; }
table.talents tr:hover { background: var(--bgmenuh); }
table.talents td { vertical-align: top; }
table.talents td.name { width: 100%; overflow-x: hidden; white-space: nowrap; }
table.talents tr[data-type]:hover td.name, table.talents tr.editing td.name { padding-left: 16px; background-image: url(/img/icon/right.png); background-position: left top; background-size: 16px 16px; background-repeat: no-repeat; }
table.talents td.cost { width: 40px; min-width: 40px; text-align: right; }

table.spells { width: 100%; }
table.spells tr { cursor: pointer; }
table.spells tr:hover { background: var(--bgmenuh); }
table.spells td { vertical-align: top; }
table.spells td.name { width: 100%; overflow-x: hidden; white-space: nowrap; }
table.spells tr[data-type]:hover td.name, table.spells tr.editing td.name { padding-left: 16px; background-image: url(/img/icon/right.png); background-position: left top; background-size: 16px 16px; background-repeat: no-repeat; }
table.spells td.ppcost { padding: 0 5px; width: 40px; min-width: 40px; text-align: right; font-size: 14px; font-family: var(--seriffont); }
table.spells td.ranks { width: 300px; min-width: 300px; white-space: nowrap; font-size: 14px; font-family: var(--seriffont); }
table.spells td.bonuses { width: 60px; min-width: 60px; text-align: right; }

table.equip { width: 100%; }
table.equip tr[data-type], table.equip tr[data-id] { cursor: pointer; }
table.equip tr[data-type]:hover, table.equip tr[data-id]:hover { background: var(--bgmenuh); }
table.equip td { vertical-align: top;  box-sizing: border-box; }
table.equip td.name { width: 220px; min-width: 220px; max-width: 220px; overflow-x: hidden; white-space: nowrap; }
table.equip tr[data-type]:hover td.name, table.equip tr[data-id]:hover td.name, table.equip tr.editing td.name { padding-left: 16px; background-image: url(/img/icon/right.png); background-position: left top; background-size: 16px 16px; background-repeat: no-repeat; }
table.equip td.cost { width: 50px; min-width: 50px; text-align: right; }
table.equip td.weight { width: 50px; min-width: 50px; text-align: center; font-size: 14px; font-family: var(--seriffont); }
table.equip td.notes { width: 100%; font-size: 14px; font-family: var(--seriffont); overflow-x: hidden; white-space: nowrap; }
table.equip td.mph { width: 50px; min-width: 50px; text-align: center; font-size: 14px; font-family: var(--seriffont); }
table.equip td.mnbonus { width: 75px; min-width: 75px; font-size: 14px; font-family: var(--seriffont); }
table.equip td.db { width: 35px; min-width: 35px; font-size: 14px; font-family: var(--seriffont); }
table.equip td.iweight { width: 90px; min-width: 90px; text-align: right; font-size: 14px; font-family: var(--seriffont); }

table.equip[data-cat="inventory"] { width: 100%; overflow-x: hidden; white-space: nowrap; }
table.equip td.equipped { width: 90px; max-width: 90px; }
table.equip td.equipped > button { padding: 0 5px; font-size: 12px; text-align: center; appearance: none; border-radius: 5px;
	-webkit-appearance: none; -webkit-border-radius: 5px;
	-moz-appearance: none; -moz-border-radius: 5px;
	-o-appearance: none; -o-border-radius: 5px;
}
table.equip td.equipped > button { color: var(--btntext); background-color: var(--btnblack); text-decoration: none; }
table.equip td.equipped > button.selected { background-color: var(--btnblue); }
table.equip td.equipped > button:hover { background-color: var(--btnblackh); }
table.equip td.equipped > button.selected:hover { background-color: var(--btnblueh); }
table.equip td.equipped > button { text-decoration: none; }

table.scalingopts { width: 100%; font-size: 14px; font-family: var(--seriffont); margin-top: -0.5em; }
table.scalingopts td { width: 100%; overflow-x: hidden; white-space: nowrap; }
table.scalingopts td.cost { width: 46px; min-width: 46px; text-align: right; }

button.switch > img { height: 24px; }
button.switch { opacity: 0.9; }
button.switch:hover { opacity: 1.0; }

.uinfo { padding: 10px 20px; border: 1px solid var(--frame); }
.uinfo > h2 { margin-top: 0 !important; margin-bottom: 0 !important; }
.uinfo > h2 + p { margin-top: 0 !important; }
.uinfo > p.pict { margin: 0 !important; }
.uinfo > p.pict img { width: 160px; height: 160px; }
.uinfo > p.pict button.arrow { width: 36px; height: 36px; position: relative; top: -62px; }
.uinfo > p.pict button.arrow > img { width: 36px; height: 36px; }
.uinfo .state { width: 162px; }
.uinfo .note { font-size: 0.9em; line-height: 115%; }
.uinfo .note > small { font-size: 0.8em; line-height: 115%; color: #555; }

.uinfo div.confirm { display: none; background: rgba(200,200,180,0.25); margin: 0 -20px !important; }
.uinfo div.confirm > div { padding: 17px 3% !important; }

.uinfo .menu { width: 200px; margin: 0.5em auto !important; font-size: 0.9em; }
.uinfo .menu > a { text-align: center; margin: 0.5em 0; background: #05a; color: #fff; }
.uinfo .menu > a { padding: 2px 10px; min-width: 60px; color: #fff; background-color: #36b; }
.uinfo .menu > a { appearance: none; border-radius: 7px;
	-webkit-appearance: none; -webkit-border-radius: 7px;
	-moz-appearance: none; -moz-border-radius: 7px;
	-o-appearance: none; -o-border-radius: 7px;
}
.uinfo .menu > a:hover, .uinfo .menu > a:active { background-color: #37c; }

.inspector { min-height: 60px; }
.inspector > .header { font-size: 14px; margin-bottom: 0.5em; }
.inspector > .header > p { margin: 0; }
.inspector > .result > table { border-spacing: 0; width: 100%; font-size: 14px; background: #ffe; }
.inspector > .result > table > tbody > tr > td { padding: 2px 5px; }
.inspector > .result > table > tbody > tr > td.name { width: 100%; }
.inspector > .result > table > tbody > tr > td.value { width: 90px; min-width: 90px; text-align: right; }