/* =============================================================================
 * Main layout elements for all templates inherited from the default template.
 * ============================================================================= */
#header {
	position:absolute;
	z-index:2;
	top:0px;
	left:0px;
	right:0px;
	height:87px;
	background:url(../img/bg_top.png) left bottom repeat-x;
}

#content {
	position:absolute;
	z-index:1;
	overflow:hidden;
	top:87px;
	left:0px;
	right:0px;
	bottom:0px;
	background:url(../img/bg.jpg) left top;
}

#sub {
	position:absolute;
	top:5px;
	left:10px;
	width:330px;
	bottom:45px;
	overflow:auto;
	-webkit-overflow-scrolling:touch;
}

#main {
	position:absolute;
	top:10px;
	left:320px;
	bottom:10px;
	right:10px;
	overflow:auto;
	min-width:500px;
	-webkit-overflow-scrolling:touch;
}


/* =============================================================================
 * #header h1 becomes the logo.
 * ============================================================================= */
#header h1 {
	position:absolute;
	z-index:3;
	left:275px;
	top:16px;
	background:url(../img/bg_logo.png) no-repeat;
	width:77px;
	height:96px;
}

#header h1 span {
	display:none;
}

body.strategus #header h1 {
	background-image:url(../img/bg_logo_strategus.png);
}

body.ladder #header h1 {
	background-image:url(../img/bg_logo_ladder.png);
}

body.clan #header h1 {
	background-image:url(../img/bg_logo_clan.png);
}


/* =============================================================================
 * #header .info is the top left corner showing char name and information.
 * ============================================================================= */
#header .info {
	position:absolute;
	left:10px;
	top:10px;
	color:#ddbe8f;
	background:url(../img/bg_info.png) no-repeat;
	padding:11px 0 0 15px;
	width:252px;
	height:49px;
}

#header .info .char {
	font-size:15px;
	line-height:19px;
	height:21px;
	font-weight:bold;
	display:block;
}

#header .info .char a {
	color:#ddbe8f;
	text-decoration:none;
}

#header .info .char a:hover {
	color:white;
}

#header .info .char a.charswitchlink {
	padding-left:16px;
	background:url(../img/hi_char_arrow.png) no-repeat 3px center;
}

#header .info .char a.charswitchlink:hover {
	background-image:url(../img/hi_char_arrow_active.png);
}

#header .info .char select {
	display:none;
	font-size:12px;
	height:19px;
	font-weight:bold;
	border:0;
	max-width:200px;
}

#header .info a.signup {
	color:#ddbe8f;
	font-size:15px;
	line-height:19px;
	font-weight:bold;
	display:block;
	text-decoration:none;
}

#header .info a.signup:hover {
	color:white;
}

#header .info a.signup .small {
	display:block;
	font-size:12px;
	line-height:16px;
	padding-top:2px;
}

#header .info .conditions {
	cursor:pointer;
	position:absolute;
	top:16px;
	right:12px;
	width:20px;
	height:11px;
	padding-top:17px;
	font-size:11px;
	text-align:center;
	opacity:0.5;
	background-position:center top, center top, center top;
	background-repeat:no-repeat, no-repeat, no-repeat;
}

#header .info .conditions:hover {
	opacity:1;
}

#header .info .conditions.rain {
	background-image:url(../img/hi_weather_rain.png);
}

#header .info .conditions.fog {
	background-image:url(../img/hi_weather_fog.png);
}

#header .info .conditions.rainfog {
	background-image:url(../img/hi_weather_rain_fog.png);
}

#header .info .conditions.clearnight {
	background-image:url(../img/hi_weather_clear_night.png);
}

#header .info .conditions.clearday {
	background-image:url(../img/hi_weather_clear_day.png);
}

#header .info .item {
	display:inline-block;
	font-size:12px;
	line-height:16px;
	font-weight:bold;
	padding-left:18px;
	background-position:left center;
	background-repeat:no-repeat;
}

#header .info .item+.item {
	margin-left:10px;
}

#header .info a.item {
	text-decoration:none;
	color:#ddbe8f;
}

#header .info a.item:hover {
	color:white;
}

#header .info .item.gold {
	background-image:url(../img/hi_gold.png);
}

#header .info .item.wealth {
	background-image:url(../img/hi_wealth.png);
}

#header .info .item.wealth .gold {
	color:#dbc63b;
}

#header .info .item.wealth .silver {
	margin-left:5px;
	color:#acacac;
}

#header .info .item.message {
	background-image:url(../img/hi_message.png);
}

#header .info .item.battle {
	background-image:url(../img/hi_battle.png);
}

#header .info .item.generation {
	background-image:url(../img/hi_emblem.png);
}

#header .info .item.level {
	background-image:url(../img/hi_sword.png);
}


/* =============================================================================
 * #header .nav contains the primary, secondary and static navigation links at the top.
 * ============================================================================= */
#header .nav {
	position:absolute;
	z-index:4;
	top:0;
	left:349px;
	background:url(../img/bg_pole.png) no-repeat right 18px;
	white-space:nowrap;
}

#header .nav .dynamic, #header .nav .static {
	display:inline-block;
	vertical-align:top;
}

#header .nav .dynamic .primary {
	margin:4px 0 0 2px;
}

#header .nav .dynamic .primary a {
	display:inline-block;
	height:26px;
	background:url(../img/button_gray_center.png) left no-repeat;	
}

#header .nav .dynamic .primary a span {
	display:inline-block;
	height:20px;
	margin:3px 0;
	font-size:12px;
	font-weight:bold;
	line-height:18px;
	padding:2px 10px 0 10px;
	text-transform:uppercase;
	text-shadow:0 1px 0 white;
	text-decoration:none;
	color:rgba(0,0,0,0.75);
	border-left:1px solid rgba(255,255,255,0.5);
	border-right:1px solid rgba(0,0,0,0.25);
}

@-moz-document url-prefix() {
	#header .nav .dynamic .primary a span {
		line-height:20px;
		padding:0 10px;
	}
}

#header .nav .dynamic .primary a:hover span {
	color:black;
}

#header .nav .dynamic .primary a:first-child {
	padding-left:15px;
	background-position:left, left;
	background-origin:content-box, padding-box;
	background-clip:content-box, padding-box;
	background-image:url(../img/button_gray_center.png), url(../img/button_gray_start.png);
}

#header .nav .dynamic .primary a:last-child {
	padding-right:15px;
	background-position:right, right;
	background-origin:content-box, padding-box;
	background-clip:content-box, padding-box;
	background-image:url(../img/button_gray_center.png), url(../img/button_gray_end.png);
}

#header .nav .dynamic .primary a:only-child {
	padding-left:15px;
	padding-right:15px;
	background-position:right, left, right;
	background-origin:content-box, padding-box, padding-box;
	background-clip:content-box, padding-box, padding-box;
	background-image:url(../img/button_gray_center.png), url(../img/button_gray_start.png), url(../img/button_gray_end.png);
}

#header .nav .dynamic .primary a:first-child span {
	border-left:0;
	padding-left:0;
}

#header .nav .dynamic .primary a:last-child span {
	border-right:0;
	padding-right:0;
}

#header .nav .dynamic .primary a:only-child span {
	border-left:0;
	border-right:0;
	padding-left:0;
	padding-right:0;
}

#header .nav .dynamic .primary a.current {
	background-image:url(../img/button_gold_center.png);
}

#header .nav .dynamic .primary a.current:first-child {
	background-image:url(../img/button_gold_center.png), url(../img/button_gold_start.png);
}

#header .nav .dynamic .primary a.current:last-child {
	background-image:url(../img/button_gold_center.png), url(../img/button_gold_end.png);
}

#header .nav .dynamic .primary a.current:only-child {
	background-image:url(../img/button_gold_center.png), url(../img/button_gold_start.png), url(../img/button_gold_end.png);
}

#header .nav .dynamic .secondary {
	height:20px;
	margin:4px 0 0 3px;
	text-align:right;
}

#header .nav .dynamic .secondary a {
	display:inline-block;
	font-size:12px;
	font-weight:bold;
	color:rgba(222,200,166,0.5);
	text-decoration:none;
	line-height:17px;
	border-left:8px solid transparent;
	padding-right:8px;
	margin-right:2px;
	background:url(../img/bg_tab_small_start.png) no-repeat left, url(../img/bg_tab_small_end.png) no-repeat right;
	background-origin:border-box, border-box;
	background-clip:border-box, padding-box;
}

#header .nav .dynamic .secondary a:hover {
	color:#dec8a6;
}

#header .nav .dynamic .secondary a.current {
	font-weight:bold; color:#dec8a6;
}

#header .nav .static {
	padding-right:10px;
}

#header .nav .static a {
	display:inline-block;
	background-repeat:no-repeat;
	background-position:top left;
	margin-left:3px;
	margin-top:16px;
	vertical-align:top;
}

#header .nav .static a span {
	display:none;
}

#header .nav .static a.donate {
	background-image:url(../img/bg_flag_donate.png);
	width:24px;
	height:39px;
}

#header .nav .static a.forum {
	background-image:url(../img/bg_flag_forum.png);
	width:26px;
	height:37px;
}

#header .nav .static a.download {
	background-image:url(../img/bg_flag_download.png);
	width:24px;
	height:47px;
	margin-left:4px;
}

#header .nav .static a.help {
	background-image:url(../img/bg_flag_help.png);
	width:18px;
	height:44px;
	margin-left:4px;
}

#header .nav .static a.announcement {
	background-image:url(../img/bg_flag_announcement.png);
	width:18px;
	height:39px;
	margin-left:4px;
}


/* =============================================================================
 * #navsub can be rendered as tabs above #content or as links inside #sub (which
 * is exactly the same as #navsubsection).
 * ============================================================================= */
#navsub.links, #navsubsection {
	width:300px;
	padding:13px 0 14px 0;
	margin-bottom:8px;
	background:url(../img/sub_t.png) no-repeat top, url(../img/sub_b.png) no-repeat bottom;
	background-origin:border-box, border-box;
	background-clip:padding-box, padding-box;
}

#navsub.links a, #navsubsection a {
	display:block;
	width:300px;
	height:26px;
	padding-top:1px;
	line-height:26px;
	text-align:center;
	text-decoration:none;
	background:url(../img/sub_button.png) no-repeat;
}

#navsub.links a.current, #navsubsection a.current {
	color:rgba(255,255,255,0.75);
	font-weight:bold;
	background-image:url(../img/sub_button_active.png);
}

#navsub.links a:hover, #navsubsection a:hover {
	font-weight:bold;
}

#navsub.links a .info, #navsubsection a .info {
	margin-left:5px;
	font-size:13px;
	line-height:13px;
	background-color:rgba(0,0,0,0.1);
	padding:1px 5px;
	border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px;
}

#navsub.links a.current .info, #navsubsection a.current .info {
	background-color:rgba(0,0,0,0.33);
}

#navsub.links h2, #navsubsection h2 {
	width:300px;
	padding-top:1px;
	font-size:13px;
	line-height:21px;
	text-align:center;
	color:#ddbe8f;
	background:url(../img/sub_button_sep.png) no-repeat;
}

#navsub.tabs {
	position:absolute;
	z-index:2;
	top:75px;
	left:353px;
	white-space:nowrap;
}

#navsub.tabs a {
	display:inline-block;
	line-height:22px;
	color:#dec8a6;
	margin-top:2px;
	min-width:60px;
	text-align:center;
	text-decoration:none;
	vertical-align:top;
	border-left:16px solid transparent;
	padding-right:16px;
	margin-right:2px;
	background:url(../img/bg_tab_start.png) no-repeat left top, url(../img/bg_tab_end.png) no-repeat right top;
	background-origin:border-box, border-box;
	background-clip:border-box, padding-box;
}

#navsub.tabs a.current {
	color:#ddbe8f;
	font-weight:bold;
	margin-top:0;
	line-height:26px;
	background:url(../img/bg_tab_current_start.png) no-repeat left top, url(../img/bg_tab_current_end.png) no-repeat right top;
	background-origin:border-box, border-box;
	background-clip:border-box, padding-box;
}

#navsub.tabs a:hover, #navsubtab a:focus {
	color:#e5c595;
}


/* =============================================================================
 * #footer contains a few links and copyright, displayed inside #sub.
 * ============================================================================= */
#footer {
	position:absolute;
	z-index:2;
	width:320px;
	left:0px;
	bottom:10px;
	text-align:center;
	font-size:12px;
	line-height:15px;
	font-weight:bold;
	color:rgba(255,255,255,0.5);
}

#footer a {
	color:inherit;
	text-decoration:none;
}

#footer a:hover, #footer a:focus {
	color:white;
	text-decoration:underline;
}

#footer div+div {
	margin-top:3px;
}


/* =============================================================================
 * #msg is a simple (and unstylish) overlay for error messages.
 * ============================================================================= */
#msg {
	position:absolute;
	cursor:pointer;
	text-align:center;
	z-index:102;
	top:90px;
	left:50%;
	width:200px;
	padding:25px;
	margin-left:-125px;
	font-size:15px;
	font-weight:bold;
	background-color:rgba(0,0,0,0.66);
	border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;
}

#msg.info {
	color:#0888c3;
}

#msg.warning {
	color:#e5e181;
}

#msg.error {
	color:#e3302c;
}


/* =============================================================================
 * #contentpopuplist displays the breadcrumbs for deeplinked content popups.
 * ============================================================================= */
#contentpopuplist {
	display:none;
	position:absolute;
	top:0;
	left:0;
	right:0;
	height:22px;
	z-index:101;
	text-align:center;
	padding:14px 0;
}

#contentpopuplist .links {
	display:inline-block;
	background:url(../img/popup_list_first.png) no-repeat left center;
	padding-left:21px;
}

#contentpopuplist .links * {
	display:inline-block;
	background:url(../img/popup_list_center.png) no-repeat right center;
	height:18px;
	padding:4px 20px 0px 5px;
	color:rgba(255,255,255,0.75);
	font-weight:bold;
	text-decoration:none;
	max-width:170px;
	overflow:hidden;
	white-space:nowrap;
	vertical-align:top;
}

#contentpopuplist .links a:hover {
	color:rgba(255,255,255,0.9);
}

#contentpopuplist .links *:first-child {
	padding-left:0px;
	padding-right:19px;
}

#contentpopuplist .links *:last-child {
	background-image:url(../img/popup_list_last.png);
	padding-left:5px;
	padding-right:21px;
}


/* =============================================================================
 * Components are small reuseable elements and can appear anywhere. Some of them
 * have a matching smarty component to generate the markup.
 * ============================================================================= */
.progressbar {
	display:inline-block;
	position:relative;
	width:75px;
	height:11px;
	padding:1px;
	border:1px solid rgba(0,0,0,0.25);
	background-color:rgba(0,0,0,0.1);
	text-align:right;
	vertical-align:top;
}

.progressbar .progressbarvalue {
	position:absolute;
	right:1px;
	top:0;
	font-size:12px;
	line-height:12px;
	color:rgba(0,0,0,0.25);
}

.progressbar .progressbarbar {
	position:absolute;
	left:0;
	top:0;
	height:13px;
	background-color:rgba(0,66,0,0.5);
	box-sizing:border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box;
	background-clip:padding-box; -webkit-background-clip:padding; -moz-background-clip:padding; -ms-background-clip:padding-box; -o-background-clip:padding-box;
	border:1px solid transparent;
}

.progressbar.notsatisfied .progressbarbar {
	background-color:rgba(139,0,0,0.5);
}

.factioncolor {
	border:1px solid black;
	display:inline-block;
	width:8px;
	height:8px;
}

.itemstats {
	font-size:12px;
	line-height:15px;
	color:rgba(0,0,0,0.75);
	display:block;
	width:117px;
	text-align:left;
}

.itemstats > span {
	display:inline-block;
	border:0 solid rgba(0,0,0,0.1);
	border-width:0 1px 1px 0;
	background-color:rgba(0,0,0,0.05);
}

.itemstats > span:nth-child(-n+2) {
	border-top-width:1px;
}

.itemstats > span:nth-child(2n+1) {
	border-left-width:1px;
}

.itemstats span .statname {
	display:inline-block;
	width:20px;
	text-transform:uppercase;
	text-align:right;
	font-weight:bold;
	font-size:10px;
	line-height:15px;
	padding-left:2px;
	padding-right:5px;
	color:rgba(0,0,0,0.5);
}

.itemstats span .statvalue {
	display:inline-block;
	width:30px;
	text-align:left;
	font-weight:bold;
}

.strategusbattleparties {
	position:relative;
	height:70px;
}

.strategusbattleparties .attacker, .strategusbattleparties .defender {
	position:absolute;
	top:0;
	width:50%;
}

.strategusbattleparties .banner {
	position:absolute;
	top:0;
	width:27px;
	height:70px;
}

.strategusbattleparties .desc .name {
	font-weight:bold;
}

.strategusbattleparties .desc .troops {
	margin-top:3px;
	font-size:12px;
	line-height:15px;
}

.strategusbattleparties .desc .troops .number {
	background-color:rgba(0,0,0,0.1);
	padding-left:2px;
	padding-right:2px;
	border:1px solid rgba(0,0,0,0.1);
}

.strategusbattleparties .desc .troops .commander {
	margin-left:3px;
	margin-right:3px;
}

.strategusbattleparties .attacker {
	left:0;
}

.strategusbattleparties .attacker .banner {
	right:3px;
}

.strategusbattleparties .attacker .desc {
	margin-right:37px;
	text-align:right;
}

.strategusbattleparties .defender {
	right:0;
}

.strategusbattleparties .defender .banner {
	left:3px;
}

.strategusbattleparties .defender .desc {
	margin-left:37px;
}


/* =============================================================================
 * Global styles.
 * ============================================================================= */
.heirloomrank1, .heirloomrank1 a {
	color:green !important;
}

.heirloomrank2, .heirloomrank2 a {
	color:blue !important;
}

.heirloomrank3, .heirloomrank3 a {
	color:purple !important;
}

.heirloompoint, .heirloompoint a {
	color:maroon !important;
}

.service, .service a {
	color:blueviolet !important;
}

.coloredtext {
	text-shadow:0 0 1px rgba(34, 34, 34, 0.33);
}

a.coloredtext {
	text-decoration:none;
}

.extralargetext {
	font-size:18px;
	line-height:22px;
}

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

.hint {
	border-bottom:1px #222222 dotted;
	cursor:help;
}

.bold {
	font-weight:bold;
}

.statusblock {
	text-align:center;
	padding:5px;
	font-style:italic;
	background-color:rgba(0,0,0,0.1);
}

.statusblock.notsatisfied {
	background-color:rgba(133,99,0,0.25);
}

.statusblock.satisfied {
	background-color:rgba(0,66,0,0.25);
}


/* =============================================================================
 * Blocks are used in the sub area to display data, fields or text.
 * ============================================================================= */
#sub .block {
	position:relative;
	text-align:center;
	width:268px;
	border-top:22px solid transparent;
	border-bottom:22px solid transparent;
	padding:0 16px;
	background:url(../img/sub_t.png) top no-repeat, url(../img/sub_b.png) bottom no-repeat, url(../img/sub_c.png) top repeat-y;
	background-origin:border-box, border-box, padding-box;
	background-clip:border-box, border-box, padding-box;
}

#sub .block h1 {
	display:inline-block;
	position:relative;
	top:-22px;
	margin:0 auto;
	font-size:13px;
	font-weight:bold;
	line-height:19px;
	color:#ddbe8f;
	height:22px;
	max-width:238px;
	border-left:8px solid transparent;
	padding:0 13px 0 5px;
	background:url(../img/sub_title_start.png) no-repeat left, url(../img/sub_title_end.png) no-repeat right;
	background-origin:border-box, border-box;
	background-clip:border-box, padding-box;
}

#sub .block h1.clickable {
	cursor:pointer;
}

#sub .block h1+* {
	margin-top:-20px;
}

#sub .block+.block {
	margin-top:8px;
}

#sub .block.centeredlabelvalue .labelvalue {
	text-align:left;
	line-height:16px;
}

#sub .block.centeredlabelvalue .label {
	display:inline-block;
	width:129px;
	margin-right:5px;
	text-align:right;
	color:#444444;
}

#sub .block.centeredlabelvalue .value {
	font-weight:bold;
	display:inline-block;
	max-width:129px;
	margin-left:5px;
	overflow:hidden;
	white-space:nowrap;
	vertical-align:bottom;
}

#sub .block.centeredlabelvalue .labelvalue.groupstart {
	margin-top:10px;
}

#sub .block.centeredlabelvalue .labelvalue.secondary {
	font-size:12px;
	line-height:15px;
}

#sub .block.centeredlabelvalue .labelvalue.satisfied {
	color:#3b773c;
}

#sub .block.centeredlabelvalue .labelvalue.notsatisfied {
	color:#903434;
}

#sub .block.centeredlabelvalue .labelvalue.clickable {
	cursor:pointer;
}

#sub .block.centeredlabelvalue .labelvalue.clickable:hover {
	background-color:rgba(0,0,0,0.1);
}

#sub .block.centeredlabelvalue .labelvalue .value .notsatisfied {
	font-weight:normal;
	font-size:11px;
	line-height:14px;
	margin-left:5px;
}

#sub .block.centeredlabelvalue .text {
	text-align:center;
	line-height:16px;
}

#sub .block.centeredlabelvalue .text > button+button {
	margin-left:2px;
}

#sub .block.centeredlabelvalue .text.groupstart {
	margin-top:10px;
}

#sub .block.centeredlabelvalue .text.secondary {
	font-size:12px;
	line-height:15px;
}

#sub .block.searchfields .labelvalue {
	text-align:left;
}

#sub .block.searchfields *+.labelvalue.groupstart {
	margin-top:10px;
}

#sub .block.searchfields .label {
	display:inline-block;
	width:83px;
	margin-right:5px;
}

#sub .block.searchfields .value > *+* {
	margin-left:2px;
}

#sub .block.searchfields .value select {
	max-width:160px;
}

#sub .block.searchfields .value input.text {
	width:140px;
}

#sub .block.searchfields .value input.short {
	width:25px;
}

#sub .block.searchfields .value input.medium {
	width:45px;
}

#sub .block.searchfields .value input.long {
	width:170px;
}

#sub .block.searchfields .value input.date {
	width:75px;
}

#sub .block.searchfields .value textarea.full {
	width:268px;
}

#sub .block.searchfields .value textarea.rows2 {
	height:36px;
}

#sub .block.searchfields .value textarea.rows3 {
	height:54px;
}

#sub .block.searchfields .value textarea.rows4 {
	height:72px;
}

#sub .block.searchfields .value input+input, #sub .block.searchfields .value select+input, #sub .block.searchfields .value input+select {
	margin-left:2px;
}

#sub .block.searchfields .value .reset {
	font-size:12px;
	line-height:17px;
	border:0;
	border-radius:8px;
	color:rgba(0,0,0,0.2);
	background:none;
	width:17px;
	height:17px;
	padding:0;
	margin-left:1px;
	text-shadow:none;
	text-align:center;
	text-transform:uppercase;
}

#sub .block.searchfields .value .reset:hover {
	font-weight:normal;
	background:#913434;
	color:rgba(255,255,255,0.75);
}

#sub .block.searchfields div+div {
	margin-top:2px;
}

#sub .block.searchfields > .text {
	text-align:center;
}

#sub .block.searchfields > .text.groupstart {
	margin-top:10px;
}

#sub .block.searchfields > .text.secondary {
	font-size:12px;
}

#sub .block.centeredtext div {
	line-height:18px;
	text-align:center;
}

#sub .block.centeredtext div+div {
	margin-top:10px;
}

#sub .block.shopcat {
	text-align:left;
}

#sub .block.shopcat a {
	text-indent:-999px;
	overflow:hidden;
	background-repeat:no-repeat;
	background-position:center;
	width:50px;
	height:50px;
	display:inline-block;
	margin-right:3px;
	margin-bottom:3px;
	vertical-align:top;
}

#sub .block.shopcat a:hover {
	background-color:rgba(0,0,0,0.25);
}

#sub .block.shopcat a.inv {
	background-image:url(../img/equip_inv.png);
}

#sub .block.shopcat a.horse {
	background-image:url(../img/equip_horse.png);
}

#sub .block.shopcat a.body {
	background-image:url(../img/equip_body.png);
}

#sub .block.shopcat a.head {
	background-image:url(../img/equip_head.png);
}

#sub .block.shopcat a.hand {
	background-image:url(../img/equip_hand.png);
}

#sub .block.shopcat a.leg {
	background-image:url(../img/equip_leg.png);
}

#sub .block.shopcat a.onehanded {
	background-image:url(../img/equip_onehand.png);
}

#sub .block.shopcat a.twohanded {
	background-image:url(../img/equip_twohand.png);
}

#sub .block.shopcat a.polearm {
	background-image:url(../img/equip_polearm.png);
}

#sub .block.shopcat a.shield {
	background-image:url(../img/equip_shield.png);
}

#sub .block.shopcat a.throw {
	background-image:url(../img/equip_throw.png);
}

#sub .block.shopcat a.bow {
	background-image:url(../img/equip_bow.png);
}

#sub .block.shopcat a.crossbow {
	background-image:url(../img/equip_crossbow.png);
}

#sub .block.shopcat a.arrow {
	background-image:url(../img/equip_arrow.png);
}

#sub .block.shopcat a.bolt {
	background-image:url(../img/equip_bolt.png);
}


/* =============================================================================
 * Page header can contain title, description with actions and an additional
 * right-aligned section with "toolbar buttons" (preferably with icons and no text).
 * ============================================================================= */
#main .header2 {
	background:rgba(0,0,0,0.1);
	position:relative;
}

#main *+.header2 {
	margin-top:25px;
}

#main .header2 h1 {
	display:inline-block;
	font-size:13px;
	font-weight:bold;
	line-height:22px;
	padding:0 3px 0 5px;
	color:rgba(255,255,255,0.75);
	background:url(../img/bg_page_header_start.png) left no-repeat;
	max-width:175px;
	overflow:hidden;
	white-space:nowrap;
	vertical-align:top;
}

#main .header2 h1+h1 {
	background-image:url(../img/bg_page_header_center.png);
	padding-left:18px;
}

#main .header2 .desc {
	display:inline-block;
	background:url(../img/bg_page_header_end.png) left no-repeat;
	padding:0 0 0 17px;
	height:22px;
	vertical-align:top;
}

#main .header2 .desc > span {
	display:inline-block;
	font-size:12px;
	font-weight:normal;
	line-height:22px;
	padding:0 5px 0 0;
	color:rgba(0,0,0,0.5);
}

#main .header2 .desc > a+span {
	padding-left:5px;
}

#main .header2 .desc > span em {
	font-style:normal;
	font-weight:bold;
}

#main .header2 .desc > button {
	font-size:12px;
	line-height:22px;
	text-shadow:none;
	border:0;
	background:none;
	color:rgba(0,0,0,0.5);
	border-right:1px solid #eeca93;
	padding:0 5px;
	border-radius:0;
}

#main .header2 .desc > button:hover {
	color:#222222;
}

#main .header2 .desc > span+button {
	border-left:1px solid #eeca93;
}

#main .header2 .desc > a {
	font-size:12px;
	line-height:22px;
	font-weight:bold;
	display:inline-block;
	color:rgba(0,0,0,0.5);
	border-right:1px solid #eeca93;
	padding:0 5px;
	text-decoration:none;
}

#main .header2 .desc > a:hover {
	color:#222222;
}

#main .header2 .desc > a:first-child {
	padding-left:0px;
}

#main .header2 .desc > span+a {
	border-left:1px solid #eeca93;
}

#main .header2 .tools {
	position:absolute;
	right:0;
	top:0;
}

#main .header2 .tools a {
	font-size:12px;
	line-height:22px;
	font-weight:bold;
	display:inline-block;
	color:rgba(0,0,0,0.5);
	border-left:1px solid #eeca93;
	padding:0 5px;
	width:16px;
	overflow:hidden;
	text-decoration:none;
	text-indent:-999px;
	background-repeat:no-repeat;
	background-position:center center;
}

#main .header2 .tools a.text {
	text-indent:0;
	width:auto;
}

#main .header2 .tools a.list {
	background-image:url(../img/header_tools_list.png);
	margin-top:0;
}

#main .header2 .tools a.listlarge {
	background-image:url(../img/header_tools_listlarge.png);
}

#main .header2 .tools a.listadvanced {
	background-image:url(../img/header_tools_listadvanced.png);
}

#main .header2 .tools a.tile {
	background-image:url(../img/header_tools_tile.png);
	margin-top:0;
}

#main .header2 .tools a.chart {
	background-image:url(../img/header_tools_chart.png);
	margin-top:0;
}

#main .header2 .tools a.active {
	background-color:rgba(0,0,0,0.1);
}


/* =============================================================================
 * Simple gridsystem with 6 columns and fixed width.
 * ============================================================================= */
.gridrow, .gridcol {
	box-sizing:border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box;
}

.gridrow {
	width:600px;
	margin:0;
	overflow:hidden;
}

.gridrow .gridrow {
	width:auto;
	margin-left:-5px;
	margin-right:-5px;
}

#main > .gridrow, #main > form > .gridrow {
	margin-left:-5px;
}

.gridcol {
	display:inline-block;
	vertical-align:top;
	line-height:18px;
	border-left:5px solid transparent;
	border-right:5px solid transparent;
}

.gridrow+.gridrow {
	margin-top:2px;
}

.gridcol.grid1 {
	width:100px;
}

.gridcol.grid2, .gridcol.onethird, .gridcol.third {
	width:200px;
}

.gridcol.grid3, .gridcol.half {
	width:300px;
}

.gridcol.grid4, .gridcol.twothird {
	width:400px;
}

.gridcol.grid5 {
	width:500px;
}

.gridcol.grid6, .gridcol.full {
	width:600px;
}

.gridrow.nowidth {
	width:auto;
	margin-right:0 !important;
}

.gridrow.nowidth .gridcol {
	width:auto;
}

.gridcol.center {
	text-align:center;
}

.gridcol.right {
	text-align:right;
}

.gridcol.small {
	font-size:12px;
	line-height:15px;
}

.gridcol.bold {
	font-weight:bold;
}

.gridcol.inactive {
	color:rgba(0,0,0,0.5);
}

.gridcol.satisfied {
	color:#3b773c;
}

.gridcol.notsatisfied {
	color:#903434;
}

.gridrow.groupstart, .gridrow.buttons {
	margin-top:10px;
}

.gridrow.buttons .gridcol > *+* {
	margin-left:2px;
}

.gridrow.groupstart.large {
	margin-top:25px;
}

.gridrow.groupstart.fancy {
	padding-top:25px;
	background:url(../img/sep.png) no-repeat center 0px;
}

.gridcol > ul {
	padding-left:25px;
	list-style-type:disc;
}

.gridcol.grid1 img {
	max-width:90px;
}

.gridcol.grid2 img, .gridcol.onethird img, .gridcol.third img {
	max-width:190px;
}

.gridcol.grid3 img, .gridcol.half img {
	max-width:290px;
}

.gridcol.grid4 img, .gridcol.twothird img {
	max-width:390px;
}

.gridcol.grid5 img {
	max-width:490px;
}

.gridcol.grid6 img, .gridcol.full img {
	max-width:590px;
}


/* =============================================================================
 * Label+Value based on the grid to build input forms and layouts.
 * ============================================================================= */
.gridcol .labelvalue {
	line-height:16px;
	width:100%;
}

.gridcol .labelvalue.mandatory .label:after {
	content:" *";
}

.gridcol .labelvalue+.labelvalue {
	margin-top:2px;
}

.gridcol .labelvalue+.labelvalue.groupstart {
	margin-top:10px;
}

.gridcol .labelvalue.notsatisfied, .gridcol .labelvalue .value.notsatisfied, .gridcol .labelvalue .value .notsatisfied {
	color:#903434;
}

.gridcol .labelvalue.satisfied, .gridcol .labelvalue .value.satisfied, .gridcol .labelvalue .value .satisfied {
	color:#3b773c;
}

.gridcol .labelvalue .label {
	display:inline-block;
	width:100px;
	max-width:100px;
	white-space:nowrap;
	color:#444444;
}

.gridcol .labelvalue .value {
	display:inline-block;
	font-weight:bold;
	max-width:490px;
}

.gridcol.grid2 .labelvalue.right .value, .gridcol.third .labelvalue.right .value, .gridcol.onethird .labelvalue.right .value {
	text-align:right;
	width:90px;
}

.gridcol .labelvalue.multiline .label {
	vertical-align:top;
}

.gridcol .labelvalue.multilinefield .label {
	vertical-align:top;
	margin-top:3px;
}

.gridcol .labelvalue .value > *+* {
	margin-left:2px;
}

.gridcol .labelvalue.multiline .value > div+div {
	margin-left:0px;
}

.gridcol .labelvalue .value textarea {
	resize:vertical;
	width:190px;
}

.gridcol .labelvalue .value textarea.line2 {
	height:36px;
}

.gridcol .labelvalue .value textarea.line3 {
	height:53px;
}

.gridcol .labelvalue .value textarea.line4 {
	height:68px;
}

.gridcol .labelvalue .value textarea.line5 {
	height:84px;
}

.gridcol .labelvalue .value textarea.line10 {
	height:164px;
}

.gridcol .labelvalue .value textarea.line15 {
	height:246px;
}

.gridcol .labelvalue .value textarea.line20 {
	height:324px;
}

.gridcol .labelvalue .value input.date {
	width:75px;
}

.gridcol .labelvalue .value input.datetime {
	width:160px;
}

.gridcol .labelvalue .value input.number {
	width:75px;
	text-align:right;
}

.gridcol .labelvalue .value input.hexcolor {
	width:75px;
}

.gridcol .labelvalue .value input.text {
	width:190px;
}

.gridcol .labelvalue .value input.full {
	width:490px;
}

.gridcol .labelvalue .value input[type=checkbox] {
	margin-top:3px;
}

.gridcol .labelvalue .value select {
	max-width:190px;
}

.gridcol.full .labelvalue .value select, .gridcol.grid6 .labelvalue .value select {
	max-width:490px;
}

.gridcol.full .labelvalue .value textarea, .gridcol.grid6 .labelvalue .value textarea {
	width:490px;
}

.gridcol.full .labelvalue.nolabel .value textarea {
	width:590px;
}

.gridcol .labelvalue .value label {
	font-weight:normal;
}

.gridcol .labelvalue .value label.hint {
	font-size:12px;
	line-height:15px;
	color:#444444;
	border-bottom:0;
	cursor:default;
}

.gridcol .labelvalue .value span.hint {
	font-weight:normal;
	font-size:12px;
	line-height:15px;
	color:#444444;
	border-bottom:0;
	cursor:default;
	margin-left:5px;
}

.gridcol .labelvalue .value.multilineradio > input[type=radio], .gridcol .labelvalue .value.multilinecheckbox > input[type=checkbox] {
	vertical-align:top;
}

.gridcol .labelvalue .value.multilineradio > label, .gridcol .labelvalue .value.multilinecheckbox > label {
	display:inline-block;
}

.gridcol .labelvalue .value.multilineradio > label > .title, .gridcol .labelvalue .value.multilinecheckbox > label > .title {
	font-weight:bold;
}

.gridcol .labelvalue .value.multilineradio > label > .desc, .gridcol .labelvalue .value.multilinecheckbox > label > .desc {
	margin-top:2px;
	max-width:470px;
}

.gridcol .labelvalue.nolabel .value.multilineradio > label > .desc, .gridcol .labelvalue.nolabel .value.multilinecheckbox > label > .desc {
	max-width:570px;
}

.gridcol .labelvalue.inline {
	display:inline-block;
}

.gridcol .labelvalue.inline .label {
	width:auto;
	max-width:none;
}

.gridcol .labelvalue.inline .label+.value {
	margin-left:5px;
}

.gridcol .labelvalue.inline+.labelvalue.inline {
	margin-left:10px;
}

.gridcol.grid1 .labelvalue .label {
	display:block;
	font-weight:bold;
	font-size:12px;
	line-height:14px;
	color:rgba(0,0,0,0.5);
}


/* =============================================================================
 * Lists can be inside the #main container or a grid column. When possible reuse
 * the available common styles instead of creating custom ones.
 * ============================================================================= */
#main .list {
	min-width:550px;
	width:auto;
	border-spacing:0;
}

#main .gridrow .list {
	min-width:0;
	width:100%;
}

#main *+.list, #main *+.dataTables_wrapper {
	margin-top:20px;
}

#main .header2+.list, #main .header2+.dataTables_wrapper, #main .gridrow.groupstart+.list, #main .gridrow.groupstart+.dataTables_wrapper {
	margin-top:0px;
}

#main .list thead tr {
	background-color:rgba(0,0,0,0.1);
	font-weight:bold;
}

#main .list thead td.sorting {
	cursor:pointer;
	background:url(../img/listsort_both.png) no-repeat 3px center;
	padding-left:13px;
}

#main .list thead td.sorting_asc {
	cursor:pointer;
	background:url(../img/listsort_asc.png) no-repeat 3px center;
	padding-left:13px;
}

#main .list thead td.sorting_desc {
	cursor:pointer;
	background:url(../img/listsort_desc.png) no-repeat 3px center;
	padding-left:13px;
}

#main .list thead td.sorting:hover, #main .list thead td.sorting_asc:hover, #main .list thead td.sorting_desc:hover {
	background-color:rgba(0,0,0,0.1);
}

#main .list tbody tr:nth-child(even) {
	background-color:rgba(0,0,0,0.05);
}

#main .list tbody tr:hover {
	background-color:rgba(0,0,0,0.1);
}

#main .list td, #main .list th {
	border:1px solid rgba(0,0,0,0.5);
	border-top-width:0;
	border-right-width:0;
	padding:2px;
	line-height:16px;
	text-align:left;
}

#main .list tr td:last-child, #main .list tr th:last-child {
	border-right-width:1px;
}

#main .list thead td, #main .list thead th {
	border-top-width:1px;
	border-bottom-width:2px;
}

#main .list tbody th {
	background-color:rgba(0,0,0,0.05);
}

#main .list.spacious td {
	padding-left:5px;
	padding-right:5px;
}

#main .list.clickable tbody tr, #main .list tbody td.clickable {
	cursor:pointer;
}

#main .list tr.inactive, #main .list td.inactive {
	color:rgba(0,0,0,0.5);
}

#main .list tr.extraborder td, #main .list tr.extraborder th {
	border-top-width:1px;
}

#main .list td.extraborder {
	border-left-width:2px;
}

#main .list tbody tr.satisfied, #main .list tbody td.satisfied {
	background-color:rgba(0,66,0,0.25);
}

#main .list tbody tr.satisfied:hover, #main .list tbody td.satisfied:hover {
	background-color:rgba(0,66,0,0.33);
}

#main .list tbody tr.notsatisfied, #main .list tbody td.notsatisfied {
	background-color:rgba(133,99,0,0.25);
}

#main .list tbody tr.notsatisfied:hover, #main .list tbody td.notsatisfied:hover {
	background-color:rgba(133,99,0,0.33);
}

#main .list tbody tr.highlight, #main .list tbody td.highlight {
	background-color:rgba(0,0,0,0.1);
}

#main .list tbody tr.highlight:hover, #main .list tbody td.highlight:hover {
	background-color:rgba(0,0,0,0.2);
}

#main .list tbody td.nowrap {
	white-space:nowrap;
	width:1px;
}

#main .list td.center, #main .list th.center {
	text-align:center;
}

#main .list td.right, #main .list th.right {
	text-align:right;
}

#main .list tr.bold, #main .list td.bold {
	font-weight:bold;
}

#main .list td.hide {
	display:none;
}

#main .list td.top {
	vertical-align:top;
}

#main .list td.positive {
	color:#3b773c;
}

#main .list td.negative {
	color:#903434;
}

#main .list td.editable {
	padding:0;
}

#main .list td.editable input {
	border:0;
	padding-right:14px;
	text-align:right;
	height:20px;
	width:70px;
	background:transparent url(../img/listeditable.png) no-repeat right center;
}

#main .list td.editable input.short {
	width:35px;
}

#main .list td.editable input.error {
	background-color:rgba(133,0,0,0.33);
}

#main .list td.editable input.progress {
	background-color:rgba(133,99,0,0.33);
}

#main .list td.editable input.success {
	background-color:rgba(0,66,0,0.33);
}

#main .list td.editable input:focus {
	background-color:white;
}

#main .list tbody td.icon img {
	vertical-align:top;
	width:16px;
	height:16px;
	margin-right:2px;
}

#main .list tbody td .info {
	font-size:11px;
	line-height:14px;
	color:rgba(0,0,0,0.33);
}

#main .list tbody td span.info {
	display:inline-block;
	margin-left:5px;
}

#main .list tbody td.right span.info {
	margin-left:0;
	margin-right:5px;
}

#main .list tbody tr:hover td .info {
	color:#333333;
}

#main .list tbody td .info > *+* {
	margin-left:5px;
}

#main .list tbody td .info.groupstart {
	margin-top:3px;
}

#main .list tbody td a {
	text-decoration:none;
}

#main .list tbody td a:hover {
	text-decoration:underline;
}

#main .list tbody .action label+label {
	margin-left:10px;
}

#main .list tbody tr.activedropdownactions {
	background-color:rgba(0,0,0,0.2);
}

#main .list tbody tr.activedropdownactions:hover {
	background-color:rgba(0,0,0,0.25);
}

#main .list tbody td ul.dropdownactions {
	position:absolute;
	z-index:2;
	display:none;
	padding:0;
	background-color:#913434;
	border:1px solid rgba(0,0,0,0.5);
	border-bottom:0;
	border-radius:1px 1px 0 0;
	background:url(../img/border_c.png);
}

#main .list tbody td ul.dropdownactions.down {
	border-top:0;
	border-bottom:1px solid rgba(0,0,0,0.5);
	border-radius:0 0 1px 1px;
}

#main .list tbody td ul.dropdownactions li {
	background-color:rgba(0,0,0,0.2);
}

#main .list tbody tr.activedropdownactions:hover ul.dropdownactions li {
	background-color:rgba(0,0,0,0.25);
}

#main .list tbody td ul.dropdownactions li a {
	display:block;
	text-decoration:none;
	padding:2px 5px;
	color:#222222 !important;
}

#main .list tbody td ul.dropdownactions li a:hover {
	color:rgba(255,255,255,0.75) !important;
	background-color:rgba(0,0,0,0.2);
}

/* =============================================================================
 * Custom styles for lists.
 * ============================================================================= */
#main .list.messages tbody tr.unread .subject {
	padding-left:20px;
	background:url(../img/hi_message.png) no-repeat 2px center;
}

#main .list.itemsinv tbody td .item {
	position:relative;
	min-height:70px;
}

#main .list.itemsinv tbody td .item img {
	position:absolute;
	left:0;
	top:0;
	width:70px;
	height:70px;
	cursor:pointer;
}

#main .list.itemsinv tbody td .item .desc {
	margin-left:197px;
}

#main .list.itemsinv tbody td .item .desc .header {
	min-height:0; /* TODO: can be removed when we remove the old page header */
	padding-left:0;
}

#main .list.itemsinv tbody td .item .desc .header .name {
	font-weight:bold;
}

#main .list.itemsinv tbody td .restrictedactions {
	background:url(../img/lock.png) no-repeat bottom center;
	display:inline-block;
	width:16px;
	height:13px;
}

#main .list.itemsinv tbody td .item .desc .requirements, #main .list.itemsinv tbody td .item .desc .attributes {
	font-size:12px;
	line-height:15px;
	color:#222222;
}

#main .list.itemsinv tbody td .item .desc .itemstats {
	position:absolute;
	top:1px;
	left:75px;
}

#main .list.itemsinv tbody td .item .desc .actions {
	position:absolute;
	right:0;
	bottom:0;
}

#main .list.itemsinv tbody td .item .desc .actions button {
	display:inline-block;
	padding-left:5px;
	padding-right:5px;
}

#main .list.itemsinv tbody td .item .desc .actions button+button {
	margin-left:2px;
}

#main .list.itemsinv tbody td .item .desc .actions button span {
	background-repeat:no-repeat;
	background-position:left center;
	padding-left:14px;
}

#main .list.itemsinv tbody td .item .desc .actions button.sell span {
	background-image:url(../img/bi_coins.png);
}

#main .list.itemsinv tbody td .item .desc .actions button.buy span {
	background-image:url(../img/bi_coins.png);
}

#main .list.itemsinv tbody td .item .desc .actions button.repair span {
	background-image:url(../img/bi_repair.png);
}

#main .list.itemsinv tbody td .item .desc .actions button.return span {
	background-image:url(../img/bi_return.png);
}

#main .list.selectchar tbody td .char {
	position:relative;
	height:70px;
}

#main .list.selectchar tbody td .char .icon {
	position:absolute;
	left:0;
	top:0;
	width:70px;
	height:70px;
}

#main .list.selectchar tbody td .char .banner {
	position:absolute;
	right:0;
	top:0;
	width:27px;
	height:70px;
}

#main .list.selectchar tbody td .char .desc {
	margin-left:159px;
	padding-right:32px;
}

#main .list.selectchar tbody td .char .desc .name {
	font-weight:bold;
}

#main .list.selectchar tbody td .char .desc .type {
	font-size:12px;
	line-height:15px;
}

#main .list.selectchar tbody td .char .desc .details {
	margin-top:10px;
}

#main .list.selectchar tbody td .char .desc .details span {
	padding-left:18px;
	background-repeat:no-repeat;
	background-position:left center;
	font-size:12px;
}

#main .list.selectchar tbody td .char .desc .details .unreadmessages {
	background-image:url(../img/hi_message.png);
}

#main .list.selectchar tbody td .char .stats {
	font-size:12px;
	line-height:15px;
	color:rgba(0,0,0,0.75);
	display:block;
	width:79px;
	text-align:left;
	position:absolute;
	top:1px;
	left:75px;
}

#main .list.selectchar tbody td .char .stats > span {
	display:inline-block;
	border:0 solid rgba(0,0,0,0.1);
	border-width:0 1px 1px 1px;
	background-color:rgba(0,0,0,0.05);
}

#main .list.selectchar tbody td .char .stats > span:first-child {
	border-top-width:1px;
}

#main .list.selectchar tbody td .char .stats span .statname {
	display:inline-block;
	width:30px;
	text-transform:uppercase;
	text-align:right;
	font-weight:bold;
	font-size:10px;
	line-height:15px;
	padding-left:2px;
	padding-right:5px;
	color:rgba(0,0,0,0.5);
}

#main .list.selectchar tbody td .char .stats .statvalue {
	display:inline-block;
	width:40px;
	text-align:left;
	font-weight:bold;
}

#main .list.clans tbody td .clan {
	position:relative;
	height:70px;
}

#main .list.clans tbody td .clan .banner {
	position:absolute;
	left:0;
	top:0;
	width:27px;
	height:70px;
}

#main .list.clans tbody td .clan .desc {
	margin-left:32px;
}

#main .list.clans tbody td .clan .desc .name {
	font-weight:bold;
}

#main .list.clans tbody td .clan .desc .summary {
	font-size:12px;
	line-height:15px;
	margin-top:5px;
	height:45px;
	max-width:525px;
	overflow:hidden;
}


/* =============================================================================
 * Custom styles for elements in gridcol.
 * ============================================================================= */
.gridcol .marketplaceitem, .gridcol .invgearitem {display:inline-block; position:relative; padding:5px; margin:0; background-color:rgba(0,0,0,0.1); text-align:center; width:150px; cursor:pointer;}
.gridcol .marketplaceitem:hover, .gridcol .invgearitem:hover {background-color:rgba(0,0,0,0.25);}
#main .gridcol .marketplaceitem .header, #main .gridcol .invgearitem .header {text-align:center; position:relative; padding:0; margin:0; height:86px;}
.gridcol .marketplaceitem .header img, .gridcol .invgearitem .header img {height:70px; width:70px; margin-bottom:10px;}
.gridcol .invgearitem .header img {cursor:default;}
.gridcol .marketplaceitem .header .name, .gridcol .invgearitem .header .name {position:absolute; width:150px; bottom:0px; font-weight:bold; overflow:hidden; color:rgba(255,255,255,0.75); background-color:rgba(0,0,0,0.25);}
.gridcol .marketplaceitem .desc, .gridcol .invgearitem .desc {text-align:left; font-size:12px; position:relative;}
.gridcol .marketplaceitem .desc strong, .gridcol .invgearitem .desc strong {position:absolute; right:0px;}

.gridcol .marketplaceaccept {position:relative;}
.gridcol .marketplaceaccept + .marketplaceaccept {margin-top:10px;}
.gridcol .marketplaceaccept input {position:absolute; left:0px; height:100%;}
.gridcol .marketplaceaccept label {margin-left:20px; display:inline-block;}
.gridcol .marketplaceaccept .description {color:rgba(0,0,0,0.5);}

.gridcol .invgear {
	position:relative;
	height:287px;
}

.gridcol .invgear.male {
	background:url(../img/bg_gear_male.png) no-repeat center;
}

.gridcol .invgear.female {
	background:url(../img/bg_gear_female.png) no-repeat center;
}

.gridcol .invgear .item {
	position:absolute;
	width:68px;
	height:68px;
	background-color:rgba(0,0,0,0.1);
	cursor:pointer;
}

.gridcol .invgear .item.current {
	background-color:rgba(0,0,0,0.25);
}

.gridcol .invgear .item.unusable {
	background-color:rgba(128,0,0,0.33);
}

.gridcol .invgear .item.current.unusable {
	background-color:rgba(128,0,0,0.5);
}

.gridcol .invgear .item.left {
	left:0;
}

.gridcol .invgear .item.right {
	right:0;
}

.gridcol .invgear .item.center {
	left:111px;
	z-index:1;
}

.gridcol .invgear .item.row1 {
	top:0;
}

.gridcol .invgear .item.row2 {
	top:73px;
}

.gridcol .invgear .item.row3 {
	top:146px;
}

.gridcol .invgear .item.row4 {
	top:219px;
}

.gridcol .invgear .item img {
	position:absolute;
	padding:1px;
	width:58px;
	height:58px;
}

.gridcol .invgear select {
	position:absolute;
	top:0;
	left:73px;
	width:144px;
	height:214px;
	display:none;
}

.gridcol .labelvalue.charstat .label {
	cursor:pointer;
}

.gridcol .labelvalue.charstat .value span {
	display:inline-block;
	width:30px;
	text-align:right;
	margin-right:5px;
}

.gridcol .labelvalue.charstat .value a {
	font-size:14px;
	line-height:14px;
	display:inline-block;
	height:14px;
	width:14px;
	text-align:center;
	text-decoration:none;
	background-color:rgba(0,0,0,0.1);
	border:1px solid rgba(0,0,0,0.1);
	color:rgba(0,0,0,0.33);
}

.gridcol .labelvalue.charstat .value a:hover {
	background-color:rgba(0,0,0,0.1);
	border-color:rgba(0,0,0,0.1);
	color:rgba(0,0,0,0.5);
}

.gridcol .labelvalue.charstat.locked {
	opacity:0.33;
}

.gridcol .labelvalue.charstat.locked:hover {
	opacity:0.75;
}

.gridcol .labelvalue.charstat.locked .label {
	background:url(../img/lock.png) no-repeat left center;
	padding-left:10px;
	width:90px;
}

.gridcol .labelvalue.charstat.locked .value a {
	display:none;
}

.gridcol .boothsign {
	position:relative;
	overflow:hidden;
	height:80px;
}

.gridcol .boothsign img {
	padding:1px;
	height:70px;
	width:70px;
	position:absolute;
	top:0;
	left:0;
	background-color:rgba(0,0,0,0.1);
}

.gridcol .boothsign .desc {
	margin-left:85px;
	padding:2px;
}

.gridcol .boothsign .desc .message {
	text-align:center;
	font-style:italic;
}


/* =============================================================================
 * Custom styles for elements in #main.
 * ============================================================================= */
#main .retirementactions {list-style-position:inside; margin:0; padding:10px;}
#main .retirementactions li strike {color:rgba(0,0,0,0.5);}
#main .items .row {position:relative; white-space:nowrap;}
#main .items .heirloomarrow {position:absolute; height:17px; width:17px; background:url(../img/heirloom_arrow.png) no-repeat; top:74px; left:0px; z-index:2}
#main .items .heirloomselect {margin:0; padding:0; height:95px; width:20px;}
#main .items .item {display:inline-block; position:relative; padding:5px; margin:0 10px 10px 0; background-color:rgba(0,0,0,0.1); text-align:center; white-space:normal; vertical-align:top; width:150px;}
#main .items .item.withactions {padding-bottom:35px;}
#main .items .item:hover {background-color:rgba(0,0,0,0.25);}
#main .items .item .header {text-align:center; position:relative; padding:0; margin:0; height:86px;}
#main .items .item .header img {height:70px; width:70px; margin-bottom:10px; cursor:pointer; cursor:pointer;}
#main .items .item .header .name {position:absolute; width:150px; bottom:0px; font-weight:bold; line-height:16px; overflow:hidden; color:rgba(255,255,255,0.75); background-color:rgba(0,0,0,0.25);}
#main .items .item .desc {text-align:left; font-size:12px; line-height:15px; position:relative;}
#main .items .item .desc strong {position:absolute; right:0px;}
#main .items .item .actions {position:absolute; left:5px; right:5px; bottom:5px; height:30px;}
#main .items .item .actions .buy {position:absolute; right:0px; bottom:0px;}
#main .items .item .actions .sell {position:absolute; right:0px; bottom:0px;}
#main .items .item .actions .repair {position:absolute; left:0px; bottom:0px;}
#main .items .item .actions button span {background-repeat:no-repeat; background-position:left center; padding-left:14px;}
#main .items .item .actions button {padding-left:5px; padding-right:5px;}
#main .items .item .actions .buy span {background-image:url(../img/bi_coins.png);}
#main .items .item .actions .sell span {background-image:url(../img/bi_coins.png);}
#main .items .item .actions .repair span {background-image:url(../img/bi_repair.png);}
#main .items .item.disabled .header img {width:60px; height:60px; margin-top:10px; opacity:0.5;}
#main .items .item.disabled .header .name {color:rgba(255,255,255,0.25);}
#main .items .item.disabled .desc {color:rgba(0,0,0,0.25);}

#main .donators {position:absolute; top:0px; left:0px; right:0px; bottom:0px; overflow:hidden;}
#main .donators .thanks {text-align:center; color:rgba(0,0,0,0.5);}
#main .donators .donator {text-align:center; font-size:15px; font-weight:bold; font-style:italic; max-width:200px; max-height:200px; position:absolute; display:none; overflow:hidden;}


/* =============================================================================
 * Advertisement formats.
 * ============================================================================= */
.sp {
	padding:0;
	margin:0;
	height:auto;
}

.sp-300-250 {
	width:300px;
	margin-top:10px;
}

.sp-728-90 {
	width:728px;
	margin-bottom:10px;
}

*+.sp-728-90 {
	margin-top:10px;
}

.sp-160-600 {
	width:160px;
	margin-left:10px;
	float:left;
}


/* =============================================================================
 * Deprecated styles.
 * ============================================================================= */
#main .header {background-repeat:no-repeat; padding-left:40px; min-height:45px;}
#main .header h1 {padding-top:3px;}
#main .header .desc a {color:#222222;}
#main .header .desc em {font-weight:bold; font-style:normal;}
#main .header.atr {background-image:url(../img/header_fist.png);}
#main .header.wpf {background-image:url(../img/header_swords.png);}
#main .header.skills {background-image:url(../img/header_horse.png);}
#main .header.skipleveling {background-image:url(../img/header_horse.png);}
#main .header.mainchar {background-image:url(../img/header_fist.png);}
#main .header.heirloom {background-image:url(../img/header_heirloom.png);}
#main .header.heir {background-image:url(../img/header_heir.png);}
#main .header.key {background-image:url(../img/header_key.png);}
#main .header.timezone {background-image:url(../img/header_timezone.png);}
#main .header.namechange {background-image:url(../img/header_heir.png);}
#main .header.grave {background-image:url(../img/header_grave.png);}
#main .header.forum {background-image:url(../img/header_forum.png);}
#main *+.header {margin-top:20px;}

.inputfields, .inputfields input, .inputfields select {font-size:13px;}
.inputfields .labelvalue+.labelvalue.groupstart {margin-top:10px;}
.inputfields .buttons {margin-top:10px;}
.inputfields .label {display:inline-block; width:125px; margin-right:5px;}
.inputfields .value input+input, .inputfields .value input+select, .inputfields .value input+button {margin-left:2px;}
.inputfields .value select+select, .inputfields .value select+input, .inputfields .value select+button {margin-left:2px;}
.inputfields .value button+button, .inputfields .value button+input, .inputfields .value button+select {margin-left:2px;}
.inputfields .value input+label, .inputfields .value select+label, .inputfields .value button+label {margin-left:5px;}
.inputfields .value label {margin-right:5px;}
.inputfields .value input.short {width:25px;}
.inputfields .value input.medium {width:75px;}
.inputfields .value input.long {width:150px;}
.inputfields .value input.reset {width:22px; height:22px; vertical-align:top;}
.inputfields div+div {margin-top:1px;}
.inputfields.shortlabel .label {width:50px;}
.inputfields.nofixwidthlabel .label {width:auto;}
.inputfields.onerow .labelvalue {display:inline-block;}
.inputfields.onerow .buttons {display:inline-block; margin-top:0px; margin-left:10px;}
.inputfields.onerow .label {width:auto;}
.inputfields.onerow .labelvalue+.labelvalue {margin-left:10px;}

#main p {max-width:550px; margin:0px; padding:0px; line-height:18px;}
#main p+p {margin-top:20px;}
#main p a {color:#222222;}
#main p a:hover {color:black;}
#main p em {font-weight:bold; font-style:normal;}

#main *+.block {margin-top:20px;}

#main .blockwrap {
border: solid rgba(0,0,0,0.2) 2px; -webkit-border-radius: 5px; -moz-border-radius: 5px;
margin: 1em; padding: 1em;
}

#main .blockwrap .labelvalue { margin: 0.1em; padding: 0.1em; overflow: auto;}
#main .blockwrap .labelvalue:hover { background: rgba(0,0,0,0.05); }
#main .blockwrap .labelvalue span { float: left; clear: none; margin: 0.1em;}
#main .blockwrap .labelvalue .label { width: 20%; }
#main .blockwrap .labelvalue .value { width: 25%; }
#main .blockwrap .labelvalue .info { max-width: 50%; font-style: italic; }

.deleted {background: rgba(50,0,0,0.2);}

div.dataTables_filter {display:inline-block; padding: 0.3em;}

#main .list th.rightBorder {border-right:2px solid rgba(0,0,0,0.5);}

.messageIcon {
	background-image:url(../img/hi_message.png);
	width:16px;
	height:16px;
	cursor: pointer;
	display:inline-block;
}

fieldset {
	border:1px solid black;
	color: #444444;
}