/*
	background: #271506 url("../images/events/spring_back.webp") no-repeat center bottom;
	background-size: cover;
*/

html, body {
	margin: 0;
	padding: 0;
	min-height: 100%;
}

body {
	background: #996633;	/*	<-- CLONE SITE */
/*	background: #271506;	/*	<-- REAL  SITE */
	color: #000000;
	font-family: "Times New Roman", Times, serif;
	min-height: 100svh;
}

/* --------------------------------------------------------------- */

.center {
	display: block;
	margin: auto;
}

.cent {
	text-align: center;
}

.cent_table {
	display: table;
	margin: auto;
}

.just {
	text-align: justify;
}

.left {
	padding-left: 15px !important;
	text-align: left;
}

.right {
	padding-right: 15px;
	text-align: right;
}

.txt_left {
	text-align: left;
}

.txt_right {
	text-align: right;
}

.txt_link {
	color: #330000;
	cursor: pointer;
	text-decoration: underline;
}

.txt_link:hover {
	color: #990000;
}

.vtop {
	vertical-align: top;
}

.nowrap {
	padding-right: 5px;
	white-space: nowrap;
}

#shadow_inset {
	-moz-box-shadow: inset 0 0 5px 5px #110000;
	-webkit-box-shadow: inset 0 0 5px 5px #110000;
	box-shadow: inset 0 0 5px 5px #110000;
}

a { color: #330000; }
a:hover { color: #990000; }

a.light:link { color: #ffff99; text-decoration: none; }
a.light:visited { color: #ffff99; text-decoration: none; }
a.light:active { color: #ffff99; text-decoration: none; }
a.light:hover { color: #ffff66; }

a.rights { color: #686868; }

div.navi {
	color: #cc9900;
	font-size: 14px;
	font-weight: bold;
}

.mo_85 { font-size: 85%; }

#small { font-size: 14px; }

.highlightit img { filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); opacity: 0.7; }
.highlightit:hover img { filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100); opacity: 1; }

.TGL_h1 {
	background: #330000;
	background-image: url(../images/symbols/grail.webp), url(../images/symbols/grail.webp);
	background-position: 5%, 95%;
	background-repeat: no-repeat, no-repeat;
	background-size: 18px, 18px;
	border-radius: 10px 10px 0 0;
	color: #cc9900;
	font-size: 100%;
	font-weight: bold;
	height: 35px;
	line-height: 35px;
	margin: 0px;
	text-align: center;
	text-decoration: underline;
}

.TGL_h2 {
	background: #b4a07d;
	font-size: 100%;
	font-weight: bold;
	height: 28px;
	line-height: 28px;
	margin: 0px;
	text-align: center;
	text-decoration: underline;
}

.TGL_h3 {
	border-bottom: 2px solid rgba(96, 81, 55, 1);
	color: #b00000;
	font-family: comic sans ms;
	font-size: 25px;
	height: 46px;
	margin: 0;
	text-align: center;
}

.abs { position: absolute; }
.rel { position: relative; }

.w100 { width: 100%; }

.line2px {
	border-bottom: 2px solid rgba(96, 81, 55, 1);
}

#copyright a { color: #ffffff; }

/* SCROLLBAR LAYOUT ---------------------------------------------- */

.scroll {
	overflow-x: auto;
	overflow-y: auto;
	width: 100%;
}

/* CHANGE BACKGROUND COLOR ON HOVER ------------------------------ */

.hover:hover {
	background-color: rgba(187, 136, 85, 0.3);
}

.depth {
	background: rgba(255, 255, 255, 0.3);
	border-radius: 8px;
	box-shadow: inset 0 0 5px 5px rgba(96, 81, 55, 1);
}

.shadow {
	filter: drop-shadow(0 2px 2px #000000);
}

.list {
	background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3));
	box-shadow: inset 0 0 5px 5px rgba(96, 81, 55, 1);
}

/* STANDARD: HTML TAGS ------------------------------------------- */

fieldset {
	border: 1px solid #af852b;
	border-radius: 5px;
	padding: 5px 5px 15px 5px;
}

legend {
	color: #b00000;
	font-size: 100%;
	font-weight: bold;
	text-align: left;
}

hr {
	border: 0;
	border-top: 1px solid #af852b;
}

/* THE MAIN LAYOUT OF TGL ---------------------------------------- */

.TGL_main {
	display: flex;
	filter: drop-shadow(0 0 15px);
	flex-direction: column;
	margin: auto;
	padding: 20px;
	width: 1100px;
}

.TGL_main_top {
	background: url(../images/backgrounds/TGL_main_top.webp);
	height: 20px;
}

.TGL_main_bottom {
	background: url(../images/backgrounds/TGL_main_bottom.webp);
	height: 20px;
}

.TGL_main_middle {
	background: url(../images/backgrounds/TGL_main_back.webp);
	flex: 0 0 auto;
	min-height: 600px;
	padding: 0 25px;
}

.TGL_main_navi {
	float: left;
	width: 180px;
}

.TGL_main_center {
	float: right;
	margin-left: 17px;
	width: 845px;
}

.TGL_main_footer {
	display: table;
	margin: 20px auto;
}

/* MAIN GRID LAYOUT OF TGL --------------------------------------- */

.TGL_grid-container {
	display: grid;
	margin: auto;
	padding: 20px;
	width: 1450px;
	gap: 0 0;
	grid-template-areas:
	"left middle right"
	"footer footer footer";
}

.TGL_grid-left {
	grid-area: left;
	height: 640px;
	position: relative;
	text-align: center;
	width: 170px;
}

.TGL_grid-middle {
	background: url(../images/backgrounds/grail_main.webp);
	background-size: 1100px 650px;
	filter: drop-shadow(0 0 15px);
	grid-area: middle; 
	height: 650px;
	width: 1100px;
}

.TGL_grid-right {
	grid-area: right;
	height: 640px;
	position: relative;
	text-align: center;
	width: 170px;
}

.TGL_grid-footer {
	color: silver;
	grid-area: footer;
	height: 80px;
	padding-top: 15px;
	text-align: center;
}

/* BACKGROUNDS --------------------------------------------------- */

.back_10 {
	background: url(../images/backgrounds/back_10.webp);
	filter: drop-shadow(0 0 15px #000000);
	margin: auto;
}

.bg_b4 { background-color: #b4a07d; }
.bg_d3 { background-color: #d3c4Ad; }
.bg_lt { background: rgba(255, 255, 255, 0.3); }

/* BORDERS ------------------------------------------------------- */

.bor {
	border: 1px solid #af852b;
}

.bor2 {
	border: 2px solid #af852b;
	border-radius: 8px;
}

/* BUTTONS: SUBMIT ----------------------------------------------- */

.button_arrow {
	cursor: pointer;
	display: block;
	height: 8px;
	padding: 2px 0 0 6px;
}

.button_arrow:hover {
	filter: brightness(1.50);
}

.fol_hire_button {
	border: 2px solid;
	border-color: #000081 #00003b #00003b #000081;
	border-radius: 20px;
	float: right;
	height: 40px;
	margin: 0 15px;
	width: 40px;
}

.but_gen {
	height: 22px;
	background: #b4a07d;
	border-color: #774411;
	border-radius: 5px;
	border-width: 1px;
	color: #000000;
	text-align: center;
	box-shadow: 1px 1px 1px #330000;
}

.but_gen:hover {
	background: #bb8855;
}

.button {
	filter: drop-shadow(0 3px 3px #000000);
}

.button:hover {
	filter: drop-shadow(0 3px 3px #cc9900);
}

.button_money {
	filter: drop-shadow(0 2px 1px #000000);
	padding-right: 3px;
}

/* CUSTOMIZED CSS CLASSES ---------------------------------------- */

.censha {
	display: block;
	filter: drop-shadow(0 2px 2px #000000);
	margin: auto;
}

.link_back {
	margin-top: 15px;
	text-align: center;
}

/* POP-UP -------------------------------------------------------- */

.popup_main {
	background: url(../images/backgrounds/back_popup.webp) no-repeat;
	background-size: 500px 400px;
	box-shadow: 0 0 130px 150px rgba(39,21,6,1);
	font-family: Comic Sans MS;
	font-size: 15px;
	height: 370px;
	left: 50%;
	margin-left: -250px;
	padding: 15px;
	position: fixed;
	text-align: center;
	top: 15%;
	width: 470px;
	z-index: 9;
}

/* PROGRESS BAR -------------------------------------------------- */

div.progress-bar {
	background-color: rgba(80, 45, 0, 0.2);
	border: 1px solid;
	box-shadow: 1px 1px 2px #804000;
	text-align: left;
}

div.progress-bar > div {
	background: url(../images/orange.webp) no-repeat;
	background-size: 100% 100%;
	height: 7px;
}

/* DIVS: LAYOUT BOXES -------------------------------------------- */

.box_01 {
	background: rgba(255,255,255,0.3);
	border: 1px solid #996633;
	border-radius: 8px;
	box-shadow: inset 0 0 4px 4px rgba(96, 81, 55, 1);
	font-family: Palatino Linotype;
	max-width: 100%;
	overflow-x: no;
	overflow-y: auto;
	padding: 6px;
	text-align: left;
	word-break: break-word;
	word-wrap: break-word;
}

.box_02 {
	background-color: #d3c4ad;
	border-radius: 10px;
	border: 1px solid #af852b;
	box-shadow: 3px 3px 5px #330000;
	margin: 0 auto 10px auto;
	padding: 10px;
	text-align: left;
}

.box_03 {
	background: #d3bb90;
	border: 3px outset #af852b;
	border-radius: 10px;
	box-shadow: 5px 5px 5px #330000;
	margin: 5px auto 15px auto;
	padding: 5px;
	text-align: center;
	width: 92%;
}

.box_search_result {
	background-color: #b4a07d;
	border: 1px solid #af852b;
	border-radius: 6px;
	clear: both;
	height: 30px;
	line-height: 30px;
	margin: 5px 0;
	text-align: center;
}

.TGL_box_border {
	background: url(../images/backgrounds/back_text.webp);
	box-shadow: 5px 5px 5px #330000;
	color: #b00000;
	height: 36px;
	left: 0;
	padding-top: 16px;
	position: absolute;
	margin: auto;
	right: 0;
	text-align: center;
}

.TGL_box_white {
	background: rgba(255,255,255,0.9);
	box-shadow: 0 0 15px 10px rgba(255,255,255,1);
	left: 0;
	margin: auto;
	max-height: 400px;
	overflow-x: auto;
	overflow-y: auto;
	position: absolute;
	right: 0;
	text-align: center;
	top: 150px;
	width: 550px;
	z-index: 1;
}

/* DIV: OR ------------------------------------------------------- */

.hr_or {
	color: #af852b;
	display: flex;
	flex-direction: row;
	font-weight: bold;
	padding: 10px 0;
}

.hr_or:before, .hr_or:after {
	border-bottom: 1px solid;
	content: "";
	flex: 1 1;
	margin: auto;
}

.hr_or:before {
	margin-right: 10px;
}

.hr_or:after {
	margin-left: 10px;
}

/* FLEXBOX - CONTAINER - Used to replace the old HTML tables. ---- */

.flex {
	flex: 1;
}

.flex-container {
	align-items: center;
	display: flex;
	text-align: left;
}

.flex-container + .flex-container {
	border-top: 1px solid #505050;
}

/* NAVIGATION - HORIZONTAL TABS ---------------------------------- */

.hor_nav_main a {
	color: inherit;
	text-decoration: none;
}

.hor_nav_main {
	border-bottom: 2px solid #3e240c;
	color: #f3d88b;
	display: flex;
	gap: 5px;
	height: 34px;
	line-height: 33px;
	text-align: center;
}

.hor_nav_btn {
	background: linear-gradient(to bottom, #8b5a22, #6e4217);
	border: 1px solid #3e240c;
	border-radius: 6px 6px 0 0;
	box-shadow: inset 0 1px 0 rgba(255,215,120,0.4), 0 2px 3px rgba(0,0,0,0.4);
	cursor: pointer;
	display: block;
	flex: 1 1 auto;
	font-family: "Georgia", serif;
	font-size: 15px;
	font-weight: bold;
	height: 33px;
	text-decoration: none;
	transition: all 0.15s ease-in-out;
}

.hor_nav_btn:not(.active):hover {
	background: linear-gradient(to bottom, #b07a32, #8a541f);
	color: #fff6cc;
	transform: translateY(1px);
}

.hor_nav_btn.active {
	background: linear-gradient(to bottom, #caa45a, #a8833d);
	box-shadow: inset 0 2px 4px rgba(0,0,0,0.4);
	color: #3b2b12;
	border-bottom: none;
	position: relative;
	top: 2px;
	z-index: 2;
}

/* FORMS: STANDARD ----------------------------------------------- */

form {
	margin: 0;
}

.checkbox {
}

.checkbox:hover {
	background-color: rgba(187, 136, 85, 0.3);
}

.form_key {
	background: #bb8855;
	border: 2px outset #774411;
	border-radius: 10px;
	box-shadow: 2px 2px 2px #330000;
	color: #ffd700;
	display: block;
	font-size: 13px;
	font-weight: bold;
	height: 25px;
	margin: auto;
	margin-top: 12px;
	outline: 0;
	text-align: center;
	text-shadow: 2px 2px #462200;
	width: 250px;
}

.form_key:hover {
	background: #795530;
	border: 2px inset #774411;
}

.form_key:disabled {
	background-color: #dddddd;
	border: 1px solid #999999;
	color: #505050;
	cursor: url(../images/buttons/s/button_del.webp),url(disabled.cur),auto;
	text-shadow: none;
}

.form_submit {
	display: block;
	margin: auto;
	margin-top: 12px;
	width: 250px;
}

.input {
	background: #ffffcc;
	color: #000000;
}

.input:disabled {
	background-color: #d8d8d8;
}

.input[type="text"]:focus {
	background: #e6e6ff;
}

.input:read-only {
	color: #000000;
	text-shadow: none;
}

input[type="submit"] {
	background: #bb8855;
	border: 2px outset #774411;
	border-radius: 10px;
	color: #ffd700;
	font-size: 13px;
	font-weight: bold;
	height: 25px;
	text-align: center;
	text-shadow: 2px 2px #462200;
	box-shadow: 2px 2px 2px #330000;
	outline: 0;
}

input[type="submit"]:hover {
	background: #795530;
	border: 2px inset #774411;
}

input[type="submit"][disabled] {
	background-color: #dddddd;
	border: 1px solid #999999;
	color: #505050;
	cursor: url(../images/buttons/s/button_del.webp),url(disabled.cur),auto;
	text-shadow: none;
}

/* PHP CLASS: HTML FORMS ----------------------------------------- */

.form_row {
	padding: 3px 5px;
}

.form_row + .form_row {
	border-top: 1px solid rgb(128,96,0,0.3);
}

.form_row:after {
	content: "";
	display: table;
	clear: both;
}

@media screen and (max-width: 500px) {
	.form_label, .form_input {
		padding-left: 0;
		margin-top: 0;
		width: 100%;
	}
}

.form_textarea {
	box-sizing: border-box;
	width: 100%;
}

.form_row_title {
	background: #d3c4Ad;
	border-bottom: 1px solid rgb(128,96,0,0.5);
	border-top: 1px solid rgb(128,96,0,0.5);
	font-weight: bold;
	height: 24px;
	line-height: 24px;
	padding-left: 15px;

}

/* FORMS: NUMBER INPUT ------------------------------------------- */

.html_input_number {
	background: #ffffcc;
	width: 80px;
}

.html_input_number:disabled {
	background-color: #d8d8d8;
}

.html_input_number:focus {
	background: #e6e6ff;
}

.html_input_number:read-only {
	color: #000000;
	text-shadow: none;
}

/* HEADING: 2 ---------------------------------------------------- */

.h2 {
	background-color: #330000;
	border-radius: 10px;
	color: #cc9900;
	cursor: pointer;
	font-size: 100%;
	height: 30px;
	line-height: 30px;
	margin: 3px 0 0 0;
	text-align: center;
}

.h2:hover {
	background-color: #660000;
}

.h2_arrow_down {
	background-color: #330000;
	background-image: url(../images/misc/arrow_down.webp);
	background-position: 96% 50%;
	background-repeat: no-repeat;
}

.h2_arrow_up {
	background-color: #660000;
	background-image: url(../images/misc/arrow_up.webp);
	background-position: 96% 50%;
	background-repeat: no-repeat;
}

/* IMAGES -------------------------------------------------------- */

img {
	max-height: 100%;
	max-width: 100%;
}

img.grayscale {
	filter: grayscale(100%) brightness(125%);
	-webkit-filter: grayscale(100%) brightness(125%);
}

img.heraldry {
	filter: drop-shadow(5px 5px 5px #000000);
	display: block;
	margin: auto;
}

img.img_help {
	filter: drop-shadow(0 3px 3px #000000);
	padding: 0 8px 0;
	width: 17px;
}

img.img_help:hover {
	filter: drop-shadow(0 3px 3px #cc9900);
}

img.img_identify {
	padding: 0 8px;
	vertical-align: middle;
}

/* SEEKER AVATAR DISPLAY ----------------------------------------- */

.seeker_avatar {
	border: 1px solid #af852b;
	border-radius: 5px;
	box-shadow: 2px 2px 2px #330000;
	float: left;
	height: 45px;
	margin: 0 8px 5px 0;
	width: 45px;
}

/* THUMBNAIL: AVATAR SEEKER -------------------------------------- */

.thumb_seeker {
	border-radius: 4px;
	height: 20px;
	padding: 1px;
	width: 20px;
	vertical-align: bottom;

}

/* THUMBNAIL: AVATAR TOWN ---------------------------------------- */

.thumb_town {
	border-radius: 4px;
	height: 18px;
	padding: 1px;
	width: 18px;
	vertical-align: bottom;
}

/* NPC AVATAR DISPLAY -------------------------------------------- */

.npc_avatar {
	border: 1px solid #af852b;
	box-shadow: 2px 2px 2px #330000;
	float: left;
	margin: 0 8px 5px 0;
}

.npc_avatar_popup {
	border: 1px solid #af852b;
	border-radius: 6px;
	box-shadow: 3px 3px 3px #330000;
	float: left;
	height: 55px;
	margin: 0 10px 5px 0;
	width: 55px;
}

/* ICONS - DISPLAY PROFILE SPOT (Profile & Profile Settings) ----- */

.profile_icon {
	height: 60px;
	width: 60px;
	background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)), url("./images/backgrounds/paper.webp");
	box-shadow: inset 0 0 3px 3px rgba(96, 81, 55, 1);
	border-radius: 8px;
}

/* IMAGE: GENDER ICON -------------------------------------------- */

.TGL_gender { filter: drop-shadow(0 1px 1px #202020); }

/* IMAGE: RETURN OK OR NOT OK ------------------------------------ */

.img_check {
	filter: drop-shadow(0 2px 2px);
	vertical-align: bottom;
}

/* JAVASCRIPT DROP DOWN CONTENT ---------------------------------- */

.dropdown {
	display: inline-block;
	position: relative;
}

.dropdown-content {
	background: url(../images/backgrounds/paper.webp);
	border: 1px solid #cc9900;
	border-radius: 8px;
 	box-shadow: 5px 5px 10px #330000;
	display: none;
	position: absolute;
	overflow: auto;
	z-index: 1;
}

.dropdown_show {
	display: block;
}

/* JAVASCRIPT TOOLTIP -------------------------------------- */

#TGL_tooltip {
	background-color: #99c2ff;
	border: 2px ridge #af852b;
	border-radius: 10px;
	box-shadow: 5px 5px 5px #330000;
	display: block;
	max-width: 250px;
	min-width: 50px;
	padding: 5px;
	position: absolute;
	visibility: visible;
	z-index: 10;
}

#TGL_tooltip.hidden {
	display: none;
	visibility: hidden;
}

/* TABLES -------------------------------------------------------- */

.border_bottom { border-bottom: 1px solid #505050; }
.rank { background: rgba(102, 153, 0, 0.5); }
.rank_town { background: rgba(65, 165, 190, 0.5); }

/* TABLE: NO CELLSPACING OR CELLPADDING -------------------------- */

.table_01 {
	border-collapse: collapse;
}

.table_01 td {
	padding: 0;
	margin: 0;
}

/* TABLE: INVENTORY ---------------------------------------------- */

.TGL_table_inv {
	border-collapse: collapse;
}

.TGL_table_inv th {
	background-color: rgba(225, 210, 180, 0.7);
	border-bottom: 1px double;
	height: 24px;
	line-height: 24px;
	text-align: left;
}

.TGL_table_inv tr:last-child td {
	border-bottom: 0;
}

.TGL_table_inv td {
	border-bottom: 1px solid #808080;
	padding: 2px 0;
}

/* TABLE: LIST --------------------------------------------------- */

.TGL_table_list {
	border-collapse: collapse;
	width: 100%;
}

.TGL_table_list th {
	background-color: #b4a07d;
	border-bottom: 1px double;
	border-top: 1px double;
	height: 26px;
	line-height: 26px;
	text-align: left;
}

.TGL_table_list tr:hover td {
	background-color: rgba(187, 136, 85, 0.3);
}

.TGL_table_list tr:last-child td {
	border-bottom: 0;
}

.TGL_table_list td {
	border-bottom: 1px solid #af852b;
	padding: 1px 0;
}

/* TABLE: SIMPLE ------------------------------------------------- */

.TGL_table_simple {
	border-collapse: collapse;
	width: 100%;
}

.TGL_table_simple tr:last-child td {
	border-bottom: 0;
}

.TGL_table_simple td {
	border-bottom: 1px solid #808080;
	padding: 2px 0 2px 0;
}

/* TABLE: SKILLS ------------------------------------------------- */

.TGL_table_skills {
	border-collapse: collapse;
	margin-left: 15px;
	text-align: left;
	white-space: nowrap;
}

.TGL_table_skills td {
	padding: 0;
	margin: 0;
}

/* TEXTS --------------------------------------------------------- */

.blue { color: #2952de; }
.bold { font-weight: bold; }
.bro { color: #b00000; font-weight: bold; }
.gol { color: #cc9900; font-weight: bold; }
.gray { color: #505050; }
.gray_85 { color: #505050; font-size: 85%; }
.npc { color: #330066; font-weight: bold; }
.ok { color: #008000; font-weight: bold; }
.praise { color: #000099; font-weight: bold; }
.red { color: #ff0000; font-weight: bold; }
.select_green { background: rgba(0,255,0,0.08); }
.sil { color: #686868; font-weight: bold; }
.stam { color: #004d00; font-weight: bold; }
.strike { text-decoration: line-through; }
.tok { color: #660284; font-weight: bold; }
.txt_bro { color: #b00000; }
.txt_pur { color: #800080; }
.txt_red { color: #ff0000; }
.txt_green { color: #008000; }
.unset { all: unset; }

.txt_flavor {
	border-bottom: 1px solid #af852b;
	font-style: italic;
	text-align: center;
	padding-bottom: 8px;
	margin-bottom: 7px;
}

/* TEXT - DISPLAY TEXT NOTIFICATION DIV BOXES -------------------- */

.txt_note_base {
	border-radius: 8px;
	font-size: 90%;
	padding: 8px 8px 8px 32px;
	margin: 15px auto;
	text-align: left;
	box-shadow: 2px 2px 3px 2px rgba(102, 51, 0, 0.8);
	width: 85%;
}

.txt_note_ok {
	background: rgba(0,255,0,0.08) url(../images/buttons/note_ok.webp) 8px 8px no-repeat;
	border: 1px solid #008000;
	font-weight: bold;
}

.txt_note_info {
	background: rgba(41, 82, 222, 0.15) url(../images/buttons/note_info.webp) 8px 8px no-repeat;
	border: 1px solid #2952de;
}

.txt_note_nok {
	background: rgba(204, 51, 0, 0.15) url(../images/buttons/note_nok.webp) 8px 8px no-repeat;
	border: 1px solid #ff0000;
	font-weight: bold;
}

.txt_note_warn {
	background: rgba(240, 150, 20, 0.3) url(../images/buttons/note_warn.webp) 8px 8px no-repeat;
	border: 1px solid #f09614;
}

/* TEXT - DISPLAY WARNING DIV BOX - Shows a warning layout. ------ */

.warning {
	background: rgba(204, 51, 0, 0.15) url(../images/buttons/s/button_warning.webp) 1% 50% no-repeat;
	border: 1px solid #ff0000;
	border-radius: 8px;
	font-size: 90%;
	padding: 8px 8px 8px 30px;
	margin: 15px auto;
	text-align: left;
	box-shadow: 2px 2px 3px 2px rgba(102, 51, 0, 0.8);
	width: 85%;
}

/* EQUIPMENT RARITY COLOR ---------------------------------------- */

.rarity_1 { color: #4d4d4d; }
.rarity_2 { color: #000000; }
.rarity_3 { color: #804000; }
.rarity_4 { color: #006600; }
.rarity_5 { color: #000099; }
.rarity_6 { color: #660066; font-weight: bold; }
.rarity_7 { color: #ff0000; font-weight: bold; }

/* INGREDIENT RARITY COLOR --------------------------------------- */

.c { color: #4d4d4d; font-size: 85%; font-style: italic; }
.u { color: #000000; font-size: 85%; font-style: italic; }
.r { color: #006600; font-size: 85%; font-style: italic; }
.e { color: #000099; font-size: 85%; font-style: italic; }

/* TOWN CITIZEN RANK COLOR --------------------------------------- */

.rank_1 {
	color: #990000;
	font-weight: bold;
}
.rank_2 {
	color: #cc0000;
	font-weight: bold;
}
.rank_3 { color: #ff4b0d; }
.rank_4 { color: #e89d0c; }
.rank_5 { color: #333333; }
.rank_6 { color: #336600; }
.rank_7 { color: #339933; }
.rank_8 { color: #336666; }
.rank_9 { color: #3366cc; }

/* --------------------------------------------------------------- */