.realminfo, .realm-details {
	padding:0;
	}

/* REALM Name and Expansion */
.realm_main_info {
	height:125px;
	background:url(images/realm_info_page_top_image.jpg) no-repeat;
	border-radius:5px 5px 0 0;
	box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
	}
	
	.realm_main_info #expansion {
		position:absolute;
		left:50%;
		margin:-87px 0 0 -385px;
		}
		
	.realm_main_info h1 {
		float:left;
		display:block;
		text-align:left;
		font-size:48px;
		color:#e4efef;
		letter-spacing:-2px;
		text-shadow:0 0 16px rgba(0,0,0,.3), 3px 2px 0 rgba(0,0,0,.3);
		margin:30px 0 0 38px;
		}
		.realm_main_info h1 .overlay_1 {
			width:100%; height:64px;
			background:url(images/realm_info_text_overlay.png) no-repeat left;
			position:absolute;
			top:0; left:0;
			z-index:1;
			}
		.realm_main_info h1 .overlay_2 {
			width:173px; height:108px;
			background:url(images/realm_info_title_overlay.png) no-repeat;
			position:absolute;
			top:-20px; left:-28px;
			z-index:2;
			}
		
	.realm_main_info h2 {
		float:right;
		display:block;
		text-align:right;
		color:#ddeced;
		font-size:21px;
		letter-spacing:-1px;
		margin:40px 40px 0 0;
		text-shadow:0 0 16px rgba(0,0,0,.3), 3px 2px 0 rgba(0,0,0,.3);
		}
		.realm_main_info h2 div {
		font-size:15px;
		color:var(--secondary-text-color);
		font-weight: normal;
		letter-spacing:0;
		display:block;
		z-index:3;
		letter-spacing:-1px;
		font-family: 'Calibri';
		}
		
		.realm_main_info h2 .overlay_1 {
			width:100%; height:64px;
			background:url(images/realm_info_text_overlay.png) no-repeat left;
			position:absolute;
			top:-30px; left:0;
			z-index:1;
			}
			.realm_main_info h2 div .overlay_1 {
			top:-35px; z-index:4;
			}
			
		.realm_main_info h2 .overlay_2 {
			width:385px; height:108px;
			background:url(images/realm_description_overlay.png) no-repeat;
			position:absolute;
			top:-36px; left:-140px;
			z-index:5;
			}

/* Realm Status */

.realm_staus_info {
	height:134px;
	background:url(images/realm_info_page_sec_image.jpg) no-repeat;
	}
	
	.realm_staus_info .realm_status {
		float:left;
		margin:20px 0 0 40px;
		}
		.realm_status h1.status {
			display:block;
			text-align:left;
			font-size:30px;
			text-shadow:0 0 16px rgba(0,0,0,.3), 3px 2px 0 rgba(0,0,0,.3);
			}
			
			.realm_status h1 .overlay_1 {
			width:120%; height:42px;
			background: url(images/text_overlay.png) left;
			position:absolute;
			top:-7px; left:-25px;
			z-index:1;
			}
			
		.realm_status h2 {
			color:#766c5f;
			font-size:20px;
			font-weight: normal;
			text-shadow:0 0 16px rgba(0,0,0,.3), 2px 2px 0 rgba(0,0,0,.3);
			}
			.realm_status h2 .overlay_1 {
			width:100%; height:42px;
			background: url(images/text_overlay.png);
			position:absolute;
			top:-8px; left:-25px;
			z-index:1;
			}
	
	.realm_online_players {
		float:right;
		text-align:right;
		margin:10px 38px 0 0;
		}
	
		.realm_online_players h1 {
			font-size:41px;
			color:var(--main-text-color);
			letter-spacing:-2px;
			text-shadow:0 0 16px rgba(0,0,0,.3), 2px 2px 0 rgba(0,0,0,.3);
			}
			.realm_online_players h1 p {
				display:inline-block;
				font-family:arialn;
				margin:0 0 0 10px;
				font-weight: normal;
				color:#625546;
				letter-spacing:0;
				}
			.realm_online_players h1 .overlay_1 {
				width:100%; height:42px;
				background: url(images/text_overlay.png);
				position:absolute;
				top:5px; left:0;
				z-index:1;
				}
		
		.realm_online_players h2 {
			color:#766c5f;
			font-size:20px;
			font-weight: normal;
			text-shadow:0 0 16px rgba(0,0,0,.3), 2px 2px 0 rgba(0,0,0,.3);
			top:-7px;
			}
			.realm_online_players h2 .overlay_1 {
				width:100%; height:42px;
				background: url(images/text_overlay.png);
				position:absolute;
				top:5px; left:0;
				z-index:1;
				}

/* Realm Info */

.realm_info {
	width: 100%;
	height:300px;
	background:url(images/realm_info_page_lst_image.jpg) no-repeat;
	padding: 20px;
	}
	
	.realm_info span {
		width: 100%;
		height: 96px;
		position: absolute;
		margin:-100px 0 0 -380px;
		background-image: url('images/fos_bg.png');
		background-repeat: no-repeat;
		background-position: center;
		z-index: 1;
		}
		
		.realm_info h1 {
			color:var(--main-text-color);
			position: absolute;
			display:block;
			width:calc(100% - 40px);
			font-size:24px;
			margin: -50px 0;
			display: flex;
			justify-content: center;
			text-shadow: #005aff 0px 0px 8px;
			line-height: 1;
			z-index: 100;
			}
			.realm_info span h1 a {
				float:right;
				font-size:14px;
				margin:7px 10px 0 10px;
				font-style:italic;
				color:#242826;
				}
				.realm_info span h1 a:hover { color:#c88a30;}
		
		.realm_info span h2 {
			font-size:14px;
			color:#666e72;
			}
			.realm_info span h2 a { color:#898074;}
			.realm_info span h2 a:hover { color:#df9d34;}
			

/* REALM STATISTICS */

.realm_statistics {
	background:rgba(0,0,0,.3);
	box-shadow:0 -1px 0 rgba(255,255,255,.02), inset 0 1px 1px rgba(0,0,0,.5);
	}
	
	/* Seperator */
	.stats-seperator {
		width:2px; height:326px;
		float:left;
		background:rgba(0,0,0,.3);
		margin:10px 0 0 0;
		box-shadow:0 0 4px rgba(255,255,255,.03), 1px 1px 0 rgba(255,255,255,.01);
		}
	
	.statistic_holder {
		width:250px;
		float:left;
		padding:10px;
		}
		.statistic_holder h1.head_info {
			line-height:100%;
			text-align:left;
			text-shadow:0 0 16px rgba(0,0,0,.3), 1px 1px 1px rgba(0,0,0,.3);
			}
			.statistic_holder h1.head_info p {
				color:var(--main-text-color);
				font-size:18px;
				font-family: 'Calibri';
				font-weight: normal;
				line-height:100%;
				margin:0 0 5px 0;
				}
			.statistic_holder h1.head_info span {
				font-family: 'Calibri';
				font-size:14px;
				color:#666e72;
				line-height:100%;
				padding:0;
				display:block;
                letter-spacing: 0;
				}
	
	/* Faction Statistics */
	
	.alliance_horde_statistics {
        padding: 5px;
		padding-top: 25px;
    }
		.faction_bars_case {
			width:230px; height:180px;
			}
		
		.faction_bars_case .faction_bar {
			width:110px; height:auto; min-height:45%;
			text-align:center;
			position:absolute;
			bottom:0;
            display: inline-flex;
            justify-content: space-around;
            align-content: center;
            flex-wrap: wrap;
			}
			.alliance_bar { background:url(images/alliance_scale_bar.jpg) no-repeat top;}
			.horde_bar { background:url(images/horde_scale_bar.jpg) no-repeat top; left:110px;}
			
			.faction_bars_case .faction_bar .grad {
				position:absolute;
				width:110px; height:223px;
				top:1px; left:0;
				z-index:1;
				background:url(images/grad.png) no-repeat;
				}
			
			.faction_bars_case .faction_bar h1 {
				color:#b4aa9b;
				font-size:42px;
				letter-spacing:1px;
				z-index:2;
				font-family: 'Calibri';
				margin:10px 0 0 0;
                margin-bottom: 0;
				}
			.faction_bars_case .faction_bar h2 {
				z-index:2;
				font-family: 'Calibri';
				font-size:13px;
				text-transform:uppercase;
				color:#867c6f;
                margin-bottom: 2px;
				}
			.faction_bars_case .faction_bar h3 {
				z-index:2;
				font-family: 'Calibri';
				font-size:12px;
				color:#7d766c;
				line-height:40%;
				}
				
	.all_characters {
		width:220px; height:40px;
		background:rgba(147,135,119,.1);
		margin:1px 0 0 0;
		box-shadow:0 1px 3px rgba(0,0,0,.5), inset 0 0 1px rgba(255,255,255,.01), inset 0 -20px 0 rgba(0,0,0,.1);
		text-align:center;
		}
		.all_characters h1 {
			font-family: 'Calibri';
			color:#534d44; 
			font-size:18px;
			padding:6px 0 0 0;
			}
	

	/* Race & Class Statistics */
	
	.race_class_stats {width:250px; margin:25px 0 0 0;}
	
	.race_class_stats .bar_row {
		width:250px; height:20px;
		margin:0 0 2px 0;
		}
		.race_class_stats .bar_row .scale {
			width:auto; height:20px;
            min-width: 45px;
			background:url(images/scale_background.gif) repeat-x;
			border-radius:0 3px 3px 0;
			float:left;
			box-shadow:0 0 3px rgba(0,0,0,.4), inset -1px 0 0 rgba(233,224,199,.08);
			}
			.race_class_stats .bar_row .scale .ico {
			width:20px; height:20px;
			border: solid 1px #63594a;
			border-radius:2px;
			box-shadow:inset 0 0 5px 2px rgba(0,0,0,.8), inset 0 0 1px 1px rgba(0,0,0,.8), 2px 0 0 rgba(0,0,0,.5);
			float:left;
			}
			.race_class_stats .bar_row .scale span {
				float:left;
				margin:2px 0 0 5px;
				font-family: 'Calibri';
				color:#635b53;
				text-shadow:0 0 3px rgba(0,0,0,.4), 1px 1px 1px rgba(0,0,0,.4);
				}
			
		.race_class_stats .bar_row h1 {
			float:left;
			font-family: 'Calibri';
			font-size:12px;
			margin:3px 0 0 4px;
			color:#6f665a;
			text-shadow:0 0 3px rgba(0,0,0,.4), 1px 1px 1px rgba(0,0,0,.4);
			}
			.race_class_stats .bar_row h1 span { color:#3a352e; letter-spacing: 0;}
		
		.bar_row .scale.dk, .bar_row .scale.dr, .bar_row .scale.ht, .bar_row .scale.mg, .bar_row .scale.pl, .bar_row .scale.pr, .bar_row .scale.rg, 
		.bar_row .scale.sh, .bar_row .scale.wl, .bar_row .scale.wr  {
			background-image:url(images/class_scale_background.gif);
			background-repeat:repeat-x;
			}
			.bar_row .scale.dk {background-position:0 -180px;}
			.bar_row .scale.dr {background-position:0 -160px;}
			.bar_row .scale.ht {background-position:0 -140px;}
			.bar_row .scale.mg {background-position:0 -120px;}
			.bar_row .scale.pl {background-position:0 -100px;}
			.bar_row .scale.pr {background-position:0 -80px;}
			.bar_row .scale.rg {background-position:0 -60px;}
			.bar_row .scale.sh {background-position:0 -40px;}
			.bar_row .scale.wl {background-position:0 -20px;}
			.bar_row .scale.wr {background-position:0 0;}
			
			
			.statistics_note {
				background:rgba(0,0,0,.2);
				padding:20px 10px;
				border-radius:8px;
				box-shadow:inset 0 0 8px rgba(0,0,0,.4);
				}
				.statistics_note h3 {
					font-size:12px;
					font-family: 'Calibri';
					color:#6b6b6b;
                    letter-spacing: 0;
                    margin-bottom: 0;
					text-shadow:0 0 3px rgba(0,0,0,.4), 1px 1px 1px rgba(0,0,0,.4);
					}

.realm-online { color:#33ff00;}
.realm-offline { color:#cd2c00;}
		
.realm_table {
	width: 100%;
	overflow: auto;
	max-height: 250px;
}

.realm_table::-webkit-scrollbar {
    width: 1em;
    height:10px;
	background-color: rgba(0,0,0,0);
}

.realm_table::-webkit-scrollbar-track {
	background-color: #00000000;
}

.nice_table tr {
	background-color: rgba(0,0,0,.2);
}

.nice_table td {
	font-size: 10px;
	padding: 0;
	height: 27px;
	color: #9f9f9f;
}

.nice_table tr td a {
	color: var(--secondary-text-color);
	transition: all 0.3s ease;
    color: gold;
}

.nice_table tr td a:hover {
	color: #a4fdf9;
}

.nice_table tr:first-child td {
	color: #666e72;
}

.nice_table tr td:first-child img {
	float: right;
}

:root{
	--frame-color: #535252b0;
}

.feats_frame {
	position: relative;
	top: 50%;
	left: 50%;
	transform: translate3d(-50%, -50%, 0);
	background-color: rgba(0, 0, 0, 0.5);
	/* width: 100%; */
	/* max-width: 700px; */
	padding: 5px;
	border: 2px solid var(--frame-color);
	border-radius: 0;
  }
  .feats_frame:before, .feats_frame:after {
	content: "•";
	position: absolute;
	width: 14px;
	height: 14px;
	font-size: 14px;
	color: var(--frame-color);
	border: 2px solid var(--frame-color);
	line-height: 12px;
	top: 5px;
	text-align: center;
  }
  .feats_frame:before {
	left: 5px;
  }
  .feats_frame:after {
	right: 5px;
  }
  .feats_frame .box-inner {
	position: relative;
	border: 2px solid var(--frame-color);
	padding: 0px;
  }
  .feats_frame .box-inner:before, .feats_frame .box-inner:after {
	content: "•";
	position: absolute;
	width: 14px;
	height: 14px;
	font-size: 14px;
	color: var(--frame-color);
	border: 2px solid var(--frame-color);
	line-height: 12px;
	bottom: -2px;
	text-align: center;
  }
  .feats_frame .box-inner:before {
	left: -2px;
  }
  .feats_frame .box-inner:after {
	right: -2px;
  }