@charset "utf-8";

/*
 * TODO: RUN THROUGH PREFIXR
 */

 
/* =========== Fonts =========== */
@font-face {
	font-family:'MuseoSans';
	src:url('../fonts/MuseoSans_500-webfont.eot');
	src:url('../fonts/MuseoSans_500-webfontd41d.eot?#iefix') format('embedded-opentype'),
		url('../fonts/MuseoSans_500-webfont.woff') format('woff'),
		url('../fonts/MuseoSans_500-webfont.ttf') format('truetype'),
		url('../fonts/MuseoSans_500-webfont.svg#MuseoSans500') format('svg');
	font-weight:normal;
	font-style:normal;
}

@font-face {
	font-family:'MuseoSlab';
	src:url('../fonts/Museo_Slab_500-webfont.eot');
	src:url('../fonts/Museo_Slab_500-webfontd41d.eot?#iefix') format('embedded-opentype'),
		url('../fonts/Museo_Slab_500-webfont.woff') format('woff'),
		url('../fonts/Museo_Slab_500-webfont.ttf') format('truetype'),
		url('../fonts/Museo_Slab_500-webfont.svg#Museo_Slab500') format('svg');
	font-weight:normal;
	font-style:normal;
}

/* =========== General =========== */
body {
	font-family:MuseoSans, Arial, Helvetica, Sans-seif;
	font-size:12px;
	color:#e6e6e6;
	background-image:url(../images/lower_bg.jpg), url(../images/bg.jpg);
	background-repeat:no-repeat;
	background-position:bottom center, top center;
	background-color:#060606;
	text-shadow:1px 1px 0px #000;
}

*, ul, li, h1, h2, p, b {
	font-weight:normal;
	margin:0px;
	padding:0px;
	list-style:none;
	line-height:1.5;
}

*:focus {
	outline:none;
}

.clear {
	clear:both;
}

input, select, textarea {
	box-sizing:content-box;
	-ms-box-sizing:content-box;
	-moz-box-sizing:content-box;
	-webkit-box-sizing:content-box;
}

a {
	text-decoration:none;
	color:#b4b4b8;
}

a:hover {
	color:#d6d6db;
}

a img {
	border:none;
}

#left #left_menu li a, #top_menu li a, footer #logo {
	transition:0.3s all;
	-webkit-transition:0.3s all;
	-moz-transition:0.3s all;
	-ms-transition:0.3s all;
	-o-transition:0.3s all;
}

/* =========== Main =========== */
#hand {
	background-image:url(../images/hand.png);
	position:absolute;
	height:89px;
	width:146px;
	margin-left:57px;
	margin-top:-401px;
	z-index:3;
}

#hand2 {
	background-image:url();
	position:absolute;
	height:25px;
	width:37px;
	margin-left:900px;
	margin-top:-40px;
	z-index:4;
}

#hand2:hover {
	background-image:url(../images/facebookhov.png);
	height:27px;
	width:39px;
	margin-top:-42px;
	margin-left:899px;
}

#hand3 {
	background-image:url();
	position:absolute;
	height:25px;
	width:40px;
	margin-left:940px;
	margin-top:-40px;
	z-index:4;
}

#hand3:hover {
	background-image:url(../images/ythov.png);
	height:27px;
	width:41px;
	margin-left:940px;
	margin-top:-42px;
}

#hand4 {
	background-image:url();
	position:absolute;
	height:25px;
	width:37px;
	margin-left:980px;
	margin-top:-40px;
	z-index:4;
}

#hand5 {
	background-image:url(../images/hand5.png);
	position:absolute;
	height:90px;
	width:206px;
	margin-left:-1px;
	margin-top:-33px;
	z-index:6;
}

#hand4:hover {
	background-image:url(../images/twitthov.png);
	height:27px;
	width:39px;
	margin-left:980px;
	margin-top:-42px;
}



#bottom_bg {
	position:absolute;
	background-image:url(../images/lower_bg.jpg);
	height:913px;
	width:1650px;
	left:50%;
	margin-left:-825px;
	z-index:1;
}

#wrapper {
	width:1020px;
	margin-top:420px;
	margin-bottom:119px;
	margin-left:auto;
	margin-right:auto;
	background-image:url(../images/body_bg.png);
}

#main {
	min-height:1600px;
}

/* =========== Top menu =========== */
#top_menu {
	height:70px;
	position:absolute;
	width:1020px;
	margin-top:-390px;
	background-repeat: no-repeat;
	text-align:center;
	background-image:url(../images/menu.png);
	z-index:2;
}

#top_menu li {
	display:inline-block;
	float:none;
	vertical-align:top;
}

#top_menu li a {
	display:block;
	margin-top:2px;
	font-family: 'Federant', cursive;
	font-size:16px;
	color:#b4b4b8;
	padding:21px 30px;
	border-right:1px solid #202024;
	border-left:1px solid #303035;
}

#top_menu li a:hover {
	color:#d6d6db;
	background-color:rgba(0,0,0,0.2);
}

/* We don't want half borders on the first and last ones */
#top_menu li:first-child a {
	border-left:none;
}

#top_menu li:last-child a {
	border-right:none;
}

/* Move the first link away from the panda's hand, and shift the whole
   centered group further right - increase padding-left below (relative
   to padding-right) to push it right more, or reduce it to bring the
   group back toward center. box-sizing:border-box keeps this padding
   inside the existing 1020px width instead of adding to it, so it
   doesn't overflow past the header background graphic. */
#top_menu {
	box-sizing:border-box;
	padding-left:260px;
	padding-right:60px;
}
#top_menu li:first-child {
	margin-left:0;
}

/* =========== Left =========== */
#left {
	width:285px;
	float:left;
}

#left article {
	border-right:1px solid #161616;
	box-shadow:0px 1px 0px #000000;
	-ms-box-shadow:0px 1px 0px #000000;
	-o-box-shadow:0px 1px 0px #000000;
	-moz-box-shadow:0px 1px 0px #000000;
	-webkit-box-shadow:0px 1px 0px #000000;
	background-color:rgba(0,0,0,0.2);
}

#left article:last-child {
	border-bottom:1px solid #161616;
	border-bottom-right-radius:3px;
}

#left article .top {
	background-image:url(../images/side_top.png);
	height:34px;
	width:284px;
	padding-top:13px;
	text-align:center;
	color:#b4b4b8;
	font-size:14px;
	font-family:MuseoSlab;
}

#left article .body {
	padding:15px;
}

#left #left_menu li:nth-child(even) a {

}

#left #left_menu li a {
	background-image:url(../images/menbutt.png);
	display:block;
	padding:10px;
	font-size:14px;
	color:#b4b4b8;
	padding-left:20px;
}

#left #left_menu a img {
	margin-right:15px;
}

#left #left_menu li a:hover {
	background-image:url(../images/menbutthov.png);
	color:#e6e6ea;
	background-color:rgba(143,78,78,0.12);
	border-left:3px solid #e6e6ea;
	padding-left:17px;
}

#left .side_divider {
    background-image: url("../images/side_divider.png");
    height: 15px;
    width: 258px;
    margin: 10px 0px 0px;
}


/* =========== Right =========== */
#right {
	width:734px;
	float:right;
	margin-right:1px;
}

#right article {
	box-shadow:0px 1px 0px #000000;
	-webkit-box-shadow:0px 1px 0px #000000;
	-o-box-shadow:0px 1px 0px #000000;
	-ms-box-shadow:0px 1px 0px #000000;
	-moz-box-shadow:0px 1px 0px #000000;
	background-color: rgba(0, 0, 0, 0.2);
}

#right article:last-child {
	border-bottom:1px solid #161616;
	margin-bottom:20px;
}

#right article .top {
	background-image:url(../images/main_top.png);
	height:37px;
	width:734px;
	padding-top:10px;
	text-align:center;
	color:#b4b4b8;
	font-size:18px;
	font-family:MuseoSlab;
	display:block;
}

#right article .body {
	padding:15px;
}

#right article .divider {
	background-image:url(../images/divider.png);
	background-position:center;
	height:32px;
	margin-top:15px;
}

#right article .news_bottom {
	margin-top:15px;
}

#right article .news_bottom a {
	color:#d6d6db;
}

#right article .news_bottom a:hover {
	color:#fff;
}

#right article .comments_button {
	float:right;
	display:block;
}

.avatar {
	float:left;
	margin-right:15px;
	margin-top:3px;
	margin-bottom:5px;
}

/* =========== Footer =========== */
footer {
	background-image:url(../images/footer.png);
	height:67px;
	color:#99999e;
	font-size:14px;
}

footer p {
	display:block;
	padding:24px;
}







/* =========== CMS: general =========== */
#slider_bg {
	background-color:#000;
	padding:1px;
}

#slider {

	width:733px;
	height:246px;
}

#slider_frame {
	width:733px; height:246px;
	background:url(../images/slideframe.png) no-repeat;
	position:absolute;
	z-index:99999;
}

/* =========== CMS: general =========== */
.nice_button, input[type="submit"] {
	background-image:url(../images/button_bg.png);
	height:18px;
	border:1px solid #161616;
	border-top-color:#161616;
	border-radius:3px;
	-moz-border-radius:3px;
	-ms-border-radius:3px;
	-o-border-radius:3px;
	-webkit-border-radius:3px;
	text-align:center;
	padding:8px;
	font-size:12px;
	color:#b4b4b8;
	box-shadow:1px 1px 0px #161616;
	-webkit-box-shadow:1px 1px 0px #020508;
	-ms-box-shadow:1px 1px 0px #020508;
	-o-box-shadow:1px 1px 0px #020508;
	-moz-box-shadow:1px 1px 0px #020508;
	text-shadow:1px 1px 0px #000;
	font-family:MuseoSans;
	margin-top:10px;
	background-position:middle;
}

.nice_button:hover, .nice_active, input[type="submit"]:hover {
	background-position:0px 37px;
	color:#d6d6db;
}

.nice_button:active, input[type="submit"]:active {
	box-shadow:1px 1px 0px #020508, 0px 2px 5px #000 inset;
	-webkit-box-shadow:1px 1px 0px #020508, 0px 2px 5px #000 inset;
	-moz-box-shadow:1px 1px 0px #020508, 0px 2px 5px #000 inset;
	-ms-box-shadow:1px 1px 0px #020508, 0px 2px 5px #000 inset;
	-o-box-shadow:1px 1px 0px #020508, 0px 2px 5px #000 inset;
}
/* ===== Webshop text sizing (was inheriting the small 12px body default) ===== */
.iR_rank_type_sub.shop_nav,
.shop_nav {
	font-size: 18px;
	line-height: 1.8;
}
.shop_nav a,
.shop_nav_seelcted {
	font-size: 18px;
}
.shop_class_requirement {
	font-size: 16px;
}
.shop_title_item {
	font-size: 20px;
	font-weight: bold;
	color: #e6e6e6;
}
.shop_body_item {
	font-size: 16px;
}
/* These classes are used throughout the webshop markup but previously had
   no CSS rule at all, so they silently fell back to the 12px body
   default - the item price, stock status, and ancient-set tag were all
   much smaller than the rest of the page. */
.shop_credits_item {
	font-size: 16px;
	font-weight: bold;
	color: #d6d6db;
}
.shop_stock_a {
	font-size: 15px;
	color: #8fb37a;
}
.shop_stock_o {
	font-size: 15px;
	color: #c0605a;
}
.shop_ancient {
	font-size: 15px;
	color: #d6d6db;
}
.shop_buy_fieldset {
	border: 1px solid #303035;
	border-radius: 3px;
	padding: 10px 15px;
}
.shop_buy_fieldset legend {
	padding: 0 8px;
}
.shop_your_credits {
	display: inline-block;
	font-size: 13px;
	font-weight: normal;
	color: #d6d6db;
	background-color: rgba(0,0,0,0.25);
	border: 1px solid #303035;
	border-radius: 3px;
	padding: 6px 12px;
	margin-bottom: 8px;
}
.shop_your_credits b {
	font-weight: bold;
	color: #e6e6e6;
}
.shop_credits_icon {
	width: 16px;
	height: 16px;
	vertical-align: middle;
	margin-right: 2px;
	position: relative;
	top: -1px;
}
.shop_credits_icon_small {
	width: 13px;
	height: 13px;
	vertical-align: middle;
	margin-right: 2px;
	position: relative;
	top: -1px;
}

/* ===== News post readability fix =====
   Admin-pasted news content (.iN_news_content) is echoed verbatim from
   whatever rich-text editor it was written/pasted in - Word, Google Docs,
   another site - and that content frequently carries inline color styles
   (e.g. style="color:#000000") baked into the HTML itself. Against this
   theme's dark background those posts become unreadable. Inline styles
   normally beat external CSS, so this uses !important on every element
   inside the container (not just the container itself) to override any
   inline color the pasted markup brings with it. */
.iN_news_content,
.iN_news_content * {
	color: #e6e6e6 !important;
}
.iN_news_content a,
.iN_news_content a * {
	color: #d6d6db !important;
}
.iN_news_content a:hover,
.iN_news_content a:hover * {
	color: #fff !important;
}

/* ===== Server status dot ===== */
#server_status_dot {
	position: absolute;
	top: 8px;
	right: 20px;
	z-index: 10;
	display: flex;
	align-items: center;
	gap: 6px;
	font-family: MuseoSans, Arial, sans-serif;
	font-size: 11px;
	color: #b4b4b8;
}
.status_dot {
	display: inline-block;
	width: 9px;
	height: 9px;
	border-radius: 50%;
}
.status_dot.status_online {
	background-color: #4caf50;
	box-shadow: 0 0 6px 2px rgba(76,175,80,0.7);
}
.status_dot.status_offline {
	background-color: #e04b3f;
	box-shadow: 0 0 6px 2px rgba(224,75,63,0.7);
}

/* ===== User CP - was rendering with zero theme styling at all (plain
   browser-default tables/text), across every sub-page (warehouse, reset,
   account settings, vote credits, etc). Styling the shared classes here
   covers all of them in one pass, plus a couple of other pages that
   happen to reuse the same table classes (Rankings, Staff List). ===== */

.usercp_module {
	background-color: rgba(0,0,0,0.25);
	border: 1px solid #303035;
	border-radius: 3px;
	padding: 10px 15px;
	margin-bottom: 12px;
	font-family: MuseoSlab;
	font-size: 16px;
	color: #d6d6db;
}

/* Shared data-table look (account info, exchange, vote credits, rankings, staff list) */
.rankingWrap { margin-bottom: 10px; }
.rankingWrap .shadowz { padding: 0; margin: 0 0 6px 0; }
.rankingWrap .shadowz .du {
	background-color: rgba(0,0,0,0.3);
	color: #d6d6db;
	font-weight: bold;
	padding: 6px 12px;
	border-radius: 3px 3px 0 0;
}
.rankTable {
	border-collapse: collapse;
	background-color: rgba(0,0,0,0.15);
}
.rankTable th {
	background-color: rgba(0,0,0,0.3);
	color: #b4b4b8;
	padding: 7px 10px;
	text-align: left;
	border-bottom: 1px solid #303035;
}
.rankTable td {
	padding: 7px 10px;
	color: #e6e6e6;
	border-bottom: 1px solid #202024;
}
.rankTable tr:hover td {
	background-color: rgba(255,255,255,0.03);
}

/* Character list rows (reset, grand reset, clear inventory, clear skills) */
.iR_name { color: #e6e6e6; font-weight: bold; padding: 8px 6px; }
.iR_class { color: #b4b4b8; padding: 8px 6px; }
.iR_stats { color: #c9c9c9; padding: 8px 6px; font-size: 13px; }
.iR_func_status { padding: 4px 6px 8px 6px; }
.iR_func_status_lacking { color: #e0736a; font-size: 12px; }
.iRg_line_top { border-bottom: 1px solid #303035; padding: 4px 0; }

/* Account settings form + step indicator */
.step, .curent_step {
	text-align: center;
	padding: 8px;
	color: #a7a7ad;
	border-bottom: 2px solid #303035;
}
.curent_step {
	color: #d6d6db;
	border-bottom: 2px solid #d6d6db;
	font-weight: bold;
}
.iRg_line {
	color: #d6d6db;
	font-weight: bold;
	padding: 10px 4px 4px 4px;
	border-bottom: 1px solid #303035;
}
.iRg_text { color: #b4b4b8; padding: 6px 4px; }
.iRg_inf { color: #c9c9c9; padding: 6px 4px; }
.iRg_input {
	background-color: rgba(0,0,0,0.3);
	border: 1px solid #303035;
	border-radius: 3px;
	color: #e6e6e6;
	padding: 5px 8px;
	font-family: MuseoSans;
}
.iRg_input:focus { border-color: #d6d6db; }

/* Warehouse vault grid container */
.warehouse_block {
	background-color: rgba(0,0,0,0.25);
	border: 1px solid #303035;
	border-radius: 3px;
}


/* Registration form readability fix */
#sign_up_frm .iRg_input {
	color: #e6e6e6;
	background-color: rgba(0, 0, 0, 0.3);
}

#sign_up_frm .iRg_input:focus {
	color: #ffffff;
	background-color: rgba(0, 0, 0, 0.45);
	border-color: #d6d6db;
}

#sign_up_frm select.iRg_input {
	color: #e6e6e6;
	background-color: #17171a;
}

#sign_up_frm select.iRg_input option {
	color: #e6e6e6;
	background-color: #17171a;
}