/**
 * WoWRoster.net WoWRoster
 *
 * Character info CSS file
 *
 *
 * @copyright  2002-2011 WoWRoster.net
 * @license    http://www.gnu.org/licenses/gpl.html   Licensed under the GNU General Public License v3.
 * @version    SVN: $Id: style.css 2631 2014-08-21 17:54:35Z ulminia@gmail.com $
 * @link       http://www.wowroster.net
 * @package    CharacterInfo
 wowcdk file
 */
.Icon--remix {
    vertical-align: -3px;
    background-size: 100%;
    background-image: url(https://assets-bwa.worldofwarcraft.blizzard.com/34b77d068362d270164b.png);
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}
/*********** Common Elements ***********/
.SummaryCharacter-render {
	position: absolute;
	/*left: 50%;
	-webkit-transform: translate(-50%);
	transform: translate(-50%);*/
	z-index: -1;
	/*top: -225px;*/
}
.SummaryCharacter-render {
	top: -15px;
}
.off-screen, .screen-reader-object {
	position: absolute;
	top: 0;
	left: -9999px;
}
.off-screen, .screen-reader-object {
	position: absolute;
	top: 0;
	left: -9999px;
}
.height-full {
	height: 100%;
}
.width-full {
	width: 100%;
}

.main-panel .container { padding: 0 0 20px; background: #eaca81 url(../images/section_bg.jpg) repeat center top; margin-bottom: 3px; border: 1px solid #EEDBA2; }
.row-eq-height {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
}
.section-profile {
color: #ebdec2;
padding-top: 25px;
z-index:10;
}

.profile-background {
    width: 100%;
	height: 100%;
    position: absolute;
    right: 0;
    top: 0;
		overflow: hidden;
}
.profile-background .bg-image {
	position: absolute;
	background-repeat: no-repeat;
	background-position:center 50%;
	/*background-size: contain;*/
		padding-top: 75%;
	width: 100%;
}
/*********** Profile Page ***********/
.shader { background: url(../images/shader.png) repeat; border: 1px solid #000000; }

.main-panel { clear: left; position: relative; }

.main-panel .profile .equip-bg { margin: 10px auto; padding: 0px; height: 570px; position: relative; }

.info-box { height: 460px; width: 350px; position: absolute; left: 95px; top: 19px; }
.model-box { height: 443px; width: 321px; position: absolute; left: 110px; top: 27px; }
.model-img { position: absolute;}
.model-img img{ width: 100%;}

/* Equipment Items */
.equip .item { position:absolute; width:64px; height:64px; left: -4px; top: -4px; z-index: 100; }
/*
.equip .none { background: url(images/equip_button.png) no-repeat left top; }
.equip .poor { background: url(images/equip_poor.png no-repeat left top); }
.equip .common { background: url(images/equip_common.png) no-repeat left top; }
.equip .uncommon { background: url(images/equip_uncommon.png) no-repeat left top; }
.equip .rare { background: url(images/equip_rare.png) no-repeat left top; }
.equip .epic { background: url(images/equip_epic.png) no-repeat left top; }
.equip .legendary { background: url(images/equip_legendary.png) no-repeat left top; }
*/

.equip .none,
.equip .poor {		border: 1px solid #9d9d9d; box-shadow: 0 0 10px 1px #9d9d9d, inset 0 0 8px 1px #9d9d9d; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;} /* poor (gray) */
.equip .common {		border: 1px solid #ffffff; box-shadow: 0 0 10px 1px #ffffff, inset 0 0 8px 1px #ffffff; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;} /* common (white) */
.equip .uncommon {	border: 1px solid #1eff00; box-shadow: 0 0 10px 1px #1eff00, inset 0 0 8px 1px #1eff00; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;} /* uncommon (green) */
.equip .rare {		border: 1px solid #0081ff; box-shadow: 0 0 10px 1px #0081ff, inset 0 0 8px 1px #0081ff; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;} /* rare (blue) */
.equip .epic {		border: 1px solid #c600ff; box-shadow: 0 0 10px 1px #c600ff, inset 0 0 8px 1px #c600ff; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;} /* epic (purple) */
.equip .legendary {	border: 1px solid #ff8000; box-shadow: 0 0 10px 1px #ff8000, inset 0 0 8px 1px #ff8000; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;} /* legendary (orange) */
.equip .artifact,
.equip .heirloom { 	border: 1px solid #e5cc80; box-shadow: 0 0 10px 1px #e5cc80, inset 0 0 8px 1px #e5cc80; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } /* heirloom (gold) */

.equip .none:hover,
.equip .poor:hover,
.equip .common:hover,
.equip .uncommon:hover,
.equip .rare:hover,
.equip .epic:hover,
.equip .legendary:hover { background-position: right top; }

.equip .icon { position:absolute; clip: rect(2px 62px 62px 2px); width:64px; height:64px; cursor:pointer; left: 0; top: 0; z-index: 90; margin: 0; padding: 0; }

.equip_Head { position:absolute; cursor:pointer; left: 10px; top: 10px; }
.equip_Neck { position:absolute; cursor:pointer; left: 10px; top: 80px; }
.equip_Shoulder { position:absolute; cursor:pointer; left: 10px; top: 150px; }
.equip_Back { position:absolute; cursor:pointer; left: 10px; top: 220px; }
.equip_Chest { position:absolute; cursor:pointer; left: 10px; top: 290px; }
.equip_Shirt { position:absolute; cursor:pointer; left: 10px; top: 360px; }
.equip_Tabard { position:absolute; cursor:pointer; left: 10px; top: 430px; }
.equip_Wrist { position:absolute; cursor:pointer; left: 10px; top: 500px; }
.equip_Hands { position:absolute; cursor:pointer; left: 466px; top: 10px; }
.equip_Waist { position:absolute; cursor:pointer; left: 466px; top: 80px; }
.equip_Legs { position:absolute; cursor:pointer; left: 466px; top: 150px; }
.equip_Feet { position:absolute; cursor:pointer; left: 466px; top: 220px; }
.equip_Finger0 { position:absolute; cursor:pointer; left: 466px; top: 290px; }
.equip_Finger1 { position:absolute; cursor:pointer; left: 466px; top: 360px; }
.equip_Trinket0 { position:absolute; cursor:pointer; left: 466px; top: 430px; }
.equip_Trinket1 { position:absolute; cursor:pointer; left: 466px; top: 500px; }
.equip_MainHand { position:absolute; cursor:pointer; left: 204px; top: 500px; }
.equip_SecondaryHand { position:absolute; cursor:pointer; left: 272px; top: 500px; }
.equip_Ranged { position:absolute; cursor:pointer; left: 272px; top: 500px; }
.equip_Ammo { position:absolute; cursor:pointer; left: 374px; top: 500px; visibility: hidden; }

/* Specialization */
.profile .spec { cursor: default; padding: 5px; width: 160px; height: 102px; position: absolute; left: 0px; top: 0px; color:#FFFFFF; text-transform: uppercase; font: bold 10px Geneva, Arial, Helvetica, sans-serif;  }
.profile .spec .skill { text-align:left; color:#999; font: bold 10px Geneva, Arial, Helvetica, sans-serif; text-transform: uppercase; margin-top: 10px; position: relative; }

.profile .spec .skill .icon { height: 30px; width: 30px; top: 0; left: 0; position: absolute; }
.profile .spec .skill .icon img { position: absolute; display:block; height: 30px; width: 30px; top: 1px; left: 1px; }
.profile .spec .skill .icon .mask { border: 1px solid black; outline:1px solid black; position: absolute; display:block; height: 30px; width: 30px; z-index: 100; left: 0; top: 0; }
.profile .spec .skill .icon .mask:hover { outline-color: #FFDD00; }

.profile .spec .skill .data { margin-left: 35px; }
.profile .spec .skill .data .skill-name { position: relative; height: 10px; text-align: left; padding-bottom: 1px; }
.profile .spec .skill .data .skill-bar { height: 16px; border: 1px solid #000000; margin: 1px; position: relative; background: #333333; }
.profile .spec .skill .data .skill-bar:hover { border: 1px solid #FFFFFF; }
.profile .spec .skill .data .skill-bar .fill{ background: #006666 url(../images/skill_lvl_bg.png) repeat-x left; position: absolute; height: 16px; left: 0px; top: 0px; }
.profile .spec .skill .data .skill-bar .text { width:100%; height:16px; line-height: 16px; color:#FFFFFF; position: absolute; left: 0px; top: 0px; text-align: center; }

.profile .spec .Active { color: #FFDD00; }
.profile .spec .Active .data .skill-bar { border: 1px solid #FFDD00; }

/* Professions */
.profile .professions { cursor: default; padding: 5px; width: 160px; height: 102px; position: absolute; right: 0px; top: 0px; color:#FFFFFF; text-transform: uppercase; font: bold 10px Geneva, Arial, Helvetica, sans-serif; }
.profile .professions .skill { text-align:left; color:#FFDD00; font: bold 10px Geneva, Arial, Helvetica, sans-serif; text-transform: uppercase; margin-top: 10px; position: relative; }

.profile .professions .skill .icon { height: 30px; width: 30px; top: 0; left: 0; position: absolute; }
.profile .professions .skill .icon img { position: absolute; display:block; clip: rect(3px 33px 33px 2px); height: 35px; width: 35px; top: -2px; left: -1px; }
.profile .professions .skill .icon .mask { border: 1px solid black; outline: 1px solid black; position: absolute; display:block; height: 30px; width: 30px; z-index: 100; left: 0; top: 0; }
.profile .professions .skill .icon .mask:hover { outline-color: #FFDD00; }

.profile .professions .skill .data { margin-left: 35px; }
.profile .professions .skill-name { position: relative; height: 10px; text-align: left; padding-bottom: 1px; }
.profile .professions .skill-bar { height: 16px; border: 1px solid #000000; margin: 1px; position: relative; background: #333333; }
.profile .professions .skill-bar:hover { border: 1px solid #FFFFFF; }
.profile .professions .skill-bar .fill{ background: #006666 url(../images/skill_lvl_bg.png) repeat-x left; position: absolute; height: 16px; left: 0px; top: 0px; }
.profile .professions .skill-bar .text { width:100%; height:16px; line-height: 16px; color:#FFFFFF; position: absolute; left: 0px; top: 0px; text-align: center; }




.profile-info {
    left: 25px;
    top: 2px;
    line-height: normal;
    letter-spacing: -0.05em;
    padding: 10px;
    width: 100%;
}
.profile-info .name {
    float: left;
    font-size: 56px;
    font-weight: bold;
    color: white;
    line-height: 1.1em;
    position: relative;
    left: -3px;
    letter-spacing: -0.05em;
}
.profile-info .name a { color: white; }
.profile-info .under-name { font-size: 14px; font-weight: normal; line-height: 14px; letter-spacing: normal }
.profile-info .level strong { font-family:"Arial Black", Arial, sans-serif; font-weight:900; font-size: 14px; }
.profile-info .realm { border-bottom: 0; }
.profile-info .realm a:hover { color: white; }
.profile-info .comma { color: #cccccc; }
.profile-info .achievements { margin-top: 20px; }
.profile-info .achievements a { font-size: 20px; font-family:"Arial Black", Arial, sans-serif; font-weight:900; color: white; padding-left: 11px; background: url("../images/icons/achievements.gif") left 7px no-repeat; line-height: 23px; }







/* Framing */
.extras { cursor: default; position: absolute; height: 40px; width: 256px; left: 0px; top: 407px; padding: 5px; }
.money { cursor: default; position: absolute; height: 40px; width: 60px; right: 0px; top: 407px; padding: 5px; }
.money div { text-align: right; font-size: 10px; line-height: 12px; }
.money .coin { width:11px;height:10px; }

.powers { cursor: default; padding: 5px; width: 338px; position: absolute; left: 0; top: 125px; }

/* Buff Icons */
.buffs { position:absolute; font: bold 11px arial,helvetica,sans-serif; text-transform: uppercase; left: 0; top: 247px; padding: 5px; height: 24px; width: 338px; }
.buffs .bar { height: 24px; float: right; width: 264px; position: relative; overflow: hidden; }
.buffs .buff-name { float: right; position: relative; line-height: 24px; margin-right: 4px; }

/* Resistances */
.resist { cursor: default; position: absolute; height: 20px; width: 338px; left: 0px; top: 208px; padding: 5px; }
.resist .bar { font: bold 11px Geneva, Arial, Helvetica, sans-serif; height: 20px; text-transform: uppercase; }
.resist .bar .text { float: right; line-height: 21px; }
.resist .bar .icons { float: right; width: 220px; top: -1px; position: relative; }

.main-panel .profile .resist b { color:black; text-align:center; font-size:12px; font-weight:bold; position:absolute; right:-1px; text-align:center; top:6px; width:20px; }
.main-panel .profile .resist span { color:white; font-size:12px !important; font-weight:bold; position:absolute; right:0px; text-align:center; top:5px; width:20px; }
.main-panel .profile .resist .icon { width:20px; height:20px; cursor:default; float: left; position: relative; margin-left: 10px; border: 1px solid #000000; }
.main-panel .profile .resist .arcane { background-image:url(images/resist/arcane.gif); }
.main-panel .profile .resist .arcane:hover { border: 1px solid #FFFFFF; }
.main-panel .profile .resist .fire { background-image:url(images/resist/fire.gif); }
.main-panel .profile .resist .fire:hover { border: 1px solid #FF0000; }
.main-panel .profile .resist .nature { background-image:url(images/resist/nature.gif);  }
.main-panel .profile .resist .nature:hover { border: 1px solid #008000; }
.main-panel .profile .resist .frost { background-image:url(images/resist/frost.gif); }
.main-panel .profile .resist .frost:hover { border: 1px solid #0000FF; }
.main-panel .profile .resist .shadow { background-image:url(images/resist/shadow.gif); }
.main-panel .profile .resist .shadow:hover { border: 1px solid #4B0082; }

/* Placement of health, mana, timeplayed, etc...*/
.main-panel .profile .info_desc {
	font-size:10px;
	line-height:12px;
	color:#ffdd00;
	float: left;
}
/* Placement of values of health, mana, timeplayed, etc...*/
.main-panel .profile .info_values {
	font-size:9px;
	line-height:12px;
	text-align:right;
	width:105px;
	float: right;
}

.main-panel .profile .statselect_l { position:absolute; width:170px; left: 0; top: 288px; }
.main-panel .profile .statselect_r { position:absolute; width:170px; right: 0; top: 288px; }

/*
.main-panel .profile .padding { cursor: default; position:absolute; width:360px; height:90px; left: 0; top: 311px; z-index: 200; }
.main-panel .profile .padding .stats { float:left; width:160px; height:83px; padding:4px; color:#FFCC00; margin-right: 10px; }
.main-panel .profile .padding .stats .statline { padding:0; font:10px verdana, tahoma, sans-serif;}
.main-panel .profile .padding .stats .statline .label { overflow:hidden; width:85px;}
.main-panel .profile .padding .stats .statline .value { float:right; overflow:hidden; text-align:right; }
*/

.bonus-box { height: 457px; width: 348px; position: absolute; left: 95px; top: 19px; }
.bonus-box .bonus-container { margin: 5px; overflow: auto; height: 400px; }
.bonus-box .bonus-container .membersRow1 { background: transparent url(../images/shader.png) repeat; border-top: 1px solid #000; border-right: 0px none #000; border-bottom: 0px none #000; border-left: 0px none #000; color: #FFF; }
.bonus-box .bonus-container .membersRow2 { background: transparent; border-top: 1px solid #000; border-right: 0px none #000; border-bottom: 0px none #000; border-left: 0px none #000; color: #FFF; }

/* Adjustments to the navigation buttons */
.bonus-navigation { position:absolute; width:344px; bottom:0; }
.info-navigation { position:relative; float:right; }

.bonus-box .bonus-container .honortext {	position:absolute;	margin:25px 0 0 6px;	text-align:center;	width:337px;	color:#ffffff;	font-size:14px;	font-weight:bold;}
.bonus-box .bonus-container .honortext span {	margin-left:20px;	color:#FFCC00;}
.bonus-box .bonus-container .honortext img {	margin-left:10px;	vertical-align:middle;}
.bonus-box .bonus-container .arenatext {	position:absolute;	margin:129px 0 0 6px;	text-align:center;	width:337px;	color:#ffffff;	font-size:14px;	font-weight:bold;}
.bonus-box .bonus-container .arenatext span {	margin-left:20px;	color:#FFCC00;}
.bonus-box .bonus-container .arenatext img {	margin:0 0 0 10px;	height:20px;	width:23px;	vertical-align:middle;}
.bonus-box .bonus-container .today {	position:absolute;	margin:57px 0 0 100px;	font-size:13px;	color:#999;	font-weight:bold;	overflow:hidden;}
.bonus-box .bonus-container .yesterday {	position:absolute;	margin:57px 0 0 165px;	font-size:13px;	color:#999;	font-weight:bold;	overflow:hidden;}
.bonus-box .bonus-container .lifetime {	position:absolute;	margin:57px 0 0 215px;	font-size:13px;	color:#999;	font-weight:bold;	text-align:right;	width:120px;	overflow:hidden;}
.bonus-box .bonus-container .divider {	position:absolute;	margin:74px 0 0 0px;	border:2px outset #333333;	width:340px;	height:0;}
.bonus-box .bonus-container .killsline {	position:absolute;	margin-top:80px;	text-align:right;	width:76px;	font-size:13px;	color:#999;	font-weight:bold;	overflow:hidden;}
.bonus-box .bonus-container .killsline1 {	position:absolute;	margin:80px 0 0 70px;	text-align:right;	width:60px;	font-size:13px;	color:#FFF;	font-weight:bold;	overflow:hidden;}
.bonus-box .bonus-container .killsline2 {	position:absolute;	margin:80px 0 0 130px;	text-align:right;	width:80px;	font-size:13px;	color:#FFF;	font-weight:bold;	overflow:hidden;}
.bonus-box .bonus-container .killsline3 {	position:absolute;	margin:80px 0 0 210px;	text-align:right;	width:100px;	font-size:13px;	color:#FFF;	font-weight:bold;	overflow:hidden;}
.bonus-box .bonus-container .honorline {	position:absolute;	margin-top:100px;	text-align:right;	width:76px;	font-size:13px;	color:#999;	font-weight:bold;	overflow:hidden;}
.bonus-box .bonus-container .honorline1 {	position:absolute;	margin:100px 0 0 70px;	text-align:right;	width:60px;	font-size:13px;	color:#FFF;	font-weight:bold;	overflow:hidden;}
.bonus-box .bonus-container .honorline2 {	position:absolute;	margin:100px 0 0 130px;	text-align:right;	width:80px;	font-size:13px;	color:#FFF;	font-weight:bold;	overflow:hidden;}
.bonus-box .bonus-container .honorline3 {	position:absolute;	margin:100px 0 0 250px;	text-align:right;	width:50px;	font-size:13px;	color:#FFF;	font-weight:bold;	overflow:hidden;}

/*********** Companion Page ***********/
.main-panel .companions .container { padding: 0 0 20px; background: #eaca81 url(../images/section_bg.jpg) repeat center top; margin-bottom: 3px; border: 1px solid #EEDBA2; }
.main-panel .companions .container .box-label { height: 20px; font: bold normal 20px/24px "Times New Roman", Times, serif; color: #000000; padding: 10px 10px 10px 40px; margin-bottom: 5px; background: url(../images/skill_title_bg.png) repeat-x left top; position: relative; }

.main-panel .companions .container .box-label .icon { background: transparent no-repeat left center; height: 33px; width: 32px; position: absolute; left: 4px; top: 4px; }
.main-panel .companions .container .box-label .pets { background: url(images/icons/pets.gif); }
.main-panel .companions .container .box-label .mounts { background: url(images/icons/mounts.gif); }
.main-panel .companions .container .box-label .companions { background: url(images/icons/companions.gif); }

.main-panel .companions .container .inner { margin-right: 20px; margin-left: 20px; }

.main-panel .companions .container .item { float: left; margin: 2px; }
.main-panel .companions .container .item img{ height: 40px; width: 40px;}
.main-panel .companions .container .item .mask { background: url(../images/item_mask.png) no-repeat left top; height: 40px; width: 40px; position: absolute; z-index: 500; left: 0px; top: 0px; }
.main-panel .companions .container .item .mask:hover { background: url(../images/item_mask.png) no-repeat left bottom; }


/*********** Pet Page ***********/
.main-panel .pets .container { padding: 0; background: #eaca81 url(../images/section_bg.jpg) repeat center top; margin-bottom: 3px; border: 1px solid #EEDBA2; }
.main-panel .pets .pet { height:95px; margin: 10px; position:relative; }

.main-panel .pets .pet .icon { height: 64px; width: 64px; position:absolute; left: 3px; top: 3px; }
.main-panel .pets .pet .icon img { position: absolute; clip: rect(2px 62px 62px 2px); width:64px; height:64px; cursor: pointer; left: 0; top: 0; z-index: 90; margin: 0; padding: 0; }
.main-panel .pets .pet .icon .mask { position: absolute; width: 64px; height: 64px; z-index: 100; background: url(images/equip_button.png) no-repeat left top; }
.main-panel .pets .pet .icon .mask:hover { background-position: right top; }

.main-panel .pets .pet .basics { height: 64px; width: 200px; position:absolute; left: 75px; top: 6px; }
.main-panel .pets .pet .basics .name { font: bold 18px/20px Geneva, Arial, Helvetica, sans-serif; text-transform: capitalize; color: #FFCC00; }

.main-panel .pets .pet .padding { top: 1px; right: 1px; position: absolute; }
.main-panel .pets .pet .padding .stats {
	float:left;
	width:125px;
	height:74px;
	padding:3px 2px 1px 4px;
	color:#DFB801;
}
.main-panel .pets .pet .padding .stats .statline {
	padding:0;
	font:10px verdana, tahoma, sans-serif;
	font-weight:bold;
}
.main-panel .pets .pet .padding .stats .statline .label {
	overflow:hidden;
	width:85px;
}
.main-panel .pets .pet .padding .stats .statline .value {
	float:right;
	overflow:hidden;
	text-align:right;
}

.main-panel .pets .container .box-label .icon { background: transparent no-repeat left center; height: 33px; width: 32px; position: absolute; left: 4px; top: 4px; }
.main-panel .pets .container .box-label .pets { background: url(images/icons/pets.gif); }
.main-panel .pets .container .box-label .mounts { background: url(images/icons/mounts.gif); }
.main-panel .pets .container .box-label .companions { background: url(images/icons/companions.gif); }

.main-panel .pets .container .spell-page { margin: 10px; background: url(../images/char_info_bg.jpg) repeat-y center top; padding: 5px; border: 1px solid #333; }
.main-panel .pets .container .spell-container { height: 40px; width: 31%; float: left; padding: 2px; margin-right: 5px; margin-bottom: 5px;}
.main-panel .pets .container .spell-container .text { height: 40px; color: #FFCC00; white-space: normal; }
.main-panel .pets .container .spell-container .text img { height: 40px; width: 40px; float: left; margin-right: 5px;}

/* Powers */
.pets .powers { cursor: default; padding: 5px; width: 220px; position: absolute; left: 220px; top: 0px; }
.pets .powers .bar { font: bold 11px Geneva, Arial, Helvetica, sans-serif; position: relative; height: 20px; text-transform: uppercase; }
.pets .powers .bar .power-name { float: right; position: relative; line-height: 20px; margin-right: 6px; }
.pets .powers .bar .power-bar { background: transparent repeat-x left center; margin: 1px; float: right; line-height: 16px; height: 16px; width: 130px; position: relative; text-align: center; border: 1px solid #000000; }
.pets .powers .bar .health { background: url(../images/bars/bar-life.gif); }
.pets .powers .bar .health:hover { border-color: #7EFF00; }
.pets .powers .bar .Mana { background: url(../images/bars/bar-mana.gif); }
.pets .powers .bar .Mana:hover { border-color: #00A8FF; }
.pets .powers .bar .Rage { background: url(../images/bars/bar-rage.gif); }
.pets .powers .bar .Rage:hover { border-color: #FF0000; }
.pets .powers .bar .Focus { background: url(../images/bars/bar-energy.gif); }
.pets .powers .bar .Focus:hover { border-color: #000000; }
.pets .powers .bar .Energy { background: url(../images/bars/bar-energy.gif); }
.pets .powers .bar .Energy:hover { border-color: #000000; }

.pets .powers .bar .xp-bar .fill { background: url(../images/bars/xp-rested.gif); }
.pets .powers .bar .xp-bar .text { width:130px; height:16px; line-height: 16px; color:#FFFFFF; position: absolute; left: 0px; top: 0px; text-align: center; }
.pets .powers .bar .xp-bar:hover { border-color: #8F00FF; }

/* Resistances */
.main-panel .pets .resist { cursor: default; position: absolute; height: 20px; width: 338px; left: 70px; top: 45px; padding: 0px; }
.main-panel .pets .resist .bar { font: bold 11px Geneva, Arial, Helvetica, sans-serif; height: 20px; text-transform: uppercase; }
.main-panel .pets .resist .bar .text { float: right; line-height: 21px; }
.main-panel .pets .resist .bar .icons { float: right; width: 220px; top: -1px; position: relative; }
.main-panel .pets .resist b { color:black; text-align:center; font-size:12px; font-weight:bold; position:absolute; right:-1px; text-align:center; top:6px; width:20px; }
.main-panel .pets .resist span { color:white; font-size:12px !important; font-weight:bold; position:absolute; right:0px; text-align:center; top:5px; width:20px; }

.main-panel .pets .resist .icon { width:20px; height:20px; cursor:default; float: left; position: relative; margin-left: 2px; border: 1px solid #000000; }
.main-panel .pets .resist .arcane { background-image:url(images/resist/arcane.gif); }
.main-panel .pets .resist .arcane:hover { border: 1px solid #FFFFFF; }
.main-panel .pets .resist .fire { background-image:url(images/resist/fire.gif); }
.main-panel .pets .resist .fire:hover { border: 1px solid #FF0000; }
.main-panel .pets .resist .nature { background-image:url(images/resist/nature.gif);  }
.main-panel .pets .resist .nature:hover { border: 1px solid #008000; }
.main-panel .pets .resist .frost { background-image:url(images/resist/frost.gif); }
.main-panel .pets .resist .frost:hover { border: 1px solid #0000FF; }
.main-panel .pets .resist .shadow { background-image:url(images/resist/shadow.gif); }
.main-panel .pets .resist .shadow:hover { border: 1px solid #4B0082; }


/*********** Reputation Page ***********/

.main-panel .reputation .rep { cursor: default; text-align:left; color:#000000; height: 20px; font: bold 11px Geneva, Arial, Helvetica, sans-serif; }

.main-panel .reputation .rep-name { float: left; position: relative; line-height: 20px; }
.main-panel .reputation .rep-bar { height: 16px; width: 300px; border: 1px solid #000000; margin: 1px; float: right; position: relative; background: #333333; }
.main-panel .reputation .rep-bar:hover { border: 1px solid #FFFFFF; }
.main-panel .reputation .rep-bar .fill{ background: #006666 url(../images/skill_lvl_bg.png) repeat-x left; position: absolute; height: 16px; left: 0px; top: 0px; }
.main-panel .reputation .rep-bar .text { width:300px; height:16px; line-height: 16px; color:#FFFFFF; position: absolute; left: 0px; top: 0px; text-align: center; }
.main-panel .reputation .rep-standing { width: 110px; float: right; position: relative; line-height: 20px; text-align: center; }

.main-panel .reputation .rep-bar .Hated { background: url(../images/bars/hated.gif); }
.main-panel .reputation .rep-bar .Neutral { background: url(../images/bars/neutral.gif); }
.main-panel .reputation .rep-bar .Friendly { background: url(../images/bars/friendly.gif); }
.main-panel .reputation .rep-bar .Honored { background: url(../images/bars/honored.gif); }
.main-panel .reputation .rep-bar .Revered { background: url(../images/bars/revered.gif); }
.main-panel .reputation .rep-bar .Exhaulted { background: url(../images/bars/exhaulted.gif); }


/*********** Skill Page ***********/

.main-panel .skills .skill { cursor: default; text-align:left; color:#000000; height: 20px; font: bold 11px Geneva, Arial, Helvetica, sans-serif; }
.main-panel .skills .skill-name { float: left; position: relative; line-height: 20px; }
.main-panel .skills .skill-bar { height: 16px; width: 273px; border: 1px solid #000000; margin: 1px; float: right; position: relative; background: #333333; }
.main-panel .skills .skill-bar:hover { border: 1px solid #FFFFFF; }
.main-panel .skills .skill-bar .fill{ background: #006666 url(../images/skill_lvl_bg.png) repeat-x left; position: absolute; height: 16px; left: 0px; top: 0px; }
.main-panel .skills .skill-bar .text { width:273px; height:16px; line-height: 16px; color:#FFFFFF; position: absolute; left: 0px; top: 0px; text-align: center; }

/*********** Talent Page ***********/

.icon-dps,
.icon-healing,
.icon-healer,
.icon-tank { float: right; width: 16px; height: 16px; background: url("../images/roles.png") no-repeat; }
.icon-dps    { background-position: 0 0; }
.icon-healer,
.icon-healing { background-position: -16px 0; }
.icon-tank   { background-position: -32px 0; }

.spec { border: 1px solid #444; margin: 4px; padding: 4px; display: inline-block;background-image:url(../images/Pane-dirtBlue-27a12e492e.jpg);}
.spec .TalentTile-Header {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	color: #f8b700;
}
.spec .TalentTile-Header .SpecIcon {
	border: 1px solid #504137;
}
.margin-left-small {
	margin-left: 10px!important;
}
.color-green-light {
	color: #0f0;
}

.main-panel .talents .frames { /*margin: auto; *//* height: 473px; *//* width: auto; *//* float: center; */margin: 1px;padding: 1px;}

.main-panel .talents .spec { position: relative;/* float: left; */width: 740px; height: 450px; /* margin: 3px; *//* padding: 1px; */display: block;/* overflow: visible; */ }
.tselected { border: 2px solid #008000;}
.tnselected { border: 2px solid #000000;}
.main-panel .talents .spec-name { /*position: absolute; *//* background: url(../images/shader.png) repeat; *//* width: 730px; *//* padding: 5px; *//* left: 0; *//* bottom: 1px; *//* font-size: 10px; *//* font-weight: bold; */ }
.main-panel .talents .spec-name .name { color:#ffdd00; }

.main-panel .talents .mastery { position:absolute; background: url(../images/shader.png) repeat; width:260px; padding: 5px; left: 0; bottom: 0; font-size: 10px; font-weight: bold; height:60px;}
.main-panel .talents .mastery.name { color:#ffdd00; }
.main-panel .talents .mastery.desc { color:#ffdd00; }

.main-panel .talents .tbackground { position: absolute;width: 740px;top: 1px; height: 450px; /* z-index: 10; */ }
.main-panel .talents .content { position: relative;width: 740px;/* height: 410px; */padding: 8px;display: block;z-index: 3333333;}

.main-panel .talents .talent-cell { position: relative; float:left; width:75px; height:54px; }
.main-panel .talents .talent-icon { position: absolute; top: 14px; left: 16px; height: 40px; width: 40px; }
.main-panel .talents .talent-icon img { position: absolute; clip: rect(2px 38px 38px 2px); height: 40px; width: 40px; }
.main-panel .talents .talent-mask { background: url(../images/mask/menu_40x40_mask.png) no-repeat left top; height:40px; width:40px; position: absolute; left: 0; top: 0; }
.main-panel .talents .talent-mask:hover { background-position: right top; }

.main-panel .talents .talent-ability { background: url(images/talents/frame-ability.png) no-repeat left top; 
	height:54px; width:54px; position: absolute; left: 9px; top: 7px; }
.main-panel .talents .ability {
    background: url(images/talents/frame-ability.png) no-repeat scroll -54px 0 transparent;
    height: 54px;
    left: -9px;
    position: absolute;
    top: -9px;
    width: 54px;
}
/* points */
.main-panel .talents .points,
.main-panel .talents .points-full { position: absolute; left: 30px; top: 30px; width: 14px; height: 15px; line-height: 14px; color: #6fff5b; font-family: Arial, sans-serif; font-size: 11px; font-weight: bold; border: 1px solid #17c815; text-align: center; background: black; }
.main-panel .talents .points .frame,
.main-panel .talents .points-full .frame { position: absolute; left: -4px; top: -4px; width: 22px; height: 22px; background: url(images/talents/points-frame.png) no-repeat; }

.main-panel .talents .points-full { border-color: #c7a200; color: #ffd200; }
.main-panel .talents .points-full .frame { background-position: right top;  }

.tier { width: 683px;list-style-type:none;border: 1px solid #221d19; margin-bottom: 5px; left: -25px;height: 55px;display: block; clear: both; -moz-box-shadow: 0 0 4px #000; -webkit-box-shadow: 0 0 4px #000; box-shadow: 0 0 4px #000; }
.tier li { float: left; border-left: 1px solid #221d19; }
.tier li.unlocks { border: 0; width: 35px; text-align: center; color: #FFB100; font: normal 20px/52px "Palatino Linotype", "Georgia", "Times", serif; }
.tier li.talent { width: 215px; overflow: hidden; }
.cell { padding: 4px; }
.cell .name { width: 130px; font-size: 13px;}

.cell { display: block; margin: 1px; border: 1px solid #fff; height:42px; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; }
.cell .icon-frame { vertical-align: middle; margin-right: 5px; }
.cell .name { vertical-align: middle; display: inline-block; line-height: 150%; }
.cell .name .level { display: block; }
.cell:hover { border-color: #b67000; -moz-box-shadow: 0 0 8px #b67000 inset; -webkit-box-shadow: 0 0 8px #b67000 inset; box-shadow: 0 0 8px #b67000 inset; }
.cell.cell-selected { color: #fff; background: #5b2200; border-color: #ce5209; -moz-box-shadow: 0 0 8px #ce5209 inset; -webkit-box-shadow: 0 0 8px #ce5209 inset; box-shadow: 0 0 8px #ce5209 inset; }
.cell.cell-selected:hover { background: #732b00; border-color: #f2752c; -moz-box-shadow: 0 0 8px #f2752c inset; -webkit-box-shadow: 0 0 8px #f2752c inset; box-shadow: 0 0 8px #f2752c inset; }
.cell.cell-disabled { color: #FFB100; opacity: .6; }
.cell.cell-disabled:hover { background: #141414; border-color: #b6b6b6; -moz-box-shadow: 0 0 8px #b6b6b6 inset; -webkit-box-shadow: 0 0 8px #b6b6b6 inset; box-shadow: 0 0 8px #b6b6b6 inset; }


/* framed icons
.icon-frame { display: inline-block; padding: 1px; height: 40px; width: 40px;background-color: #000; background-position: 1px 1px; background-repeat: no-repeat; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; border: 1px solid #434445; border-bottom-color: #2f3032; border-top-color: #b1b2b4; }
.icon-frame img { display: block; vertical-align: bottom; clip:rect(2px 35px 35px 2px); height: 40px; width: 40px;}
.icon-frame.frame { height: 40px; width: 40px; -moz-box-shadow: #000 0 0 10px; -webkit-box-shadow: #000 0 0 10px; box-shadow: #000 0 0 10px; }
*/
/* Grey out unused talents */
/* filter:gray only works in IE so we do this to half-assed transparency for Mozilla and Opera */
.main-panel .talents .talent-icon .icon_grey { filter:gray;opacity:0.4; }
.main-panel .talents .talent-icon:hover  .icon_grey{ opacity:0.6; }

/* Glyphs */
.main-panel .talents .glyph-1 { float: left; height: 40px; width: 300px; margin: 2px; clear: right; }
.main-panel .talents .glyph-1 img { float: left; background: url(images/glyphs/glyph_bg_major.png); height: 30px; width: 30px; padding: 5px; }
.main-panel .talents .glyph-1 .text { background: url(images/glyphs/glyph_bg_text.png) no-repeat right center; font-size: 14px; font-weight: bold; text-transform: capitalize; color: #FFF; float: left; line-height: 30px; height: 30px; width: 250px; margin-top: 5px; margin-bottom: 5px; padding-right: 5px; padding-left: 5px;  }

.main-panel .talents .glyph-2 { float: left; height: 40px; width: 300px; margin: 2px; clear: right; }
.main-panel .talents .glyph-2 img { float: left; background: url(images/glyphs/glyph_bg_minor.png); height: 30px; width: 30px; padding: 5px; }
.main-panel .talents .glyph-2 .text { background: url(images/glyphs/glyph_bg_text.png) no-repeat right center; font-size: 14px; font-weight: bold; text-transform: capitalize; color: #FFF; float: left; line-height: 30px; height: 30px; width: 250px; margin-top: 5px; margin-bottom: 5px; padding-right: 5px; padding-left: 5px;  }

.main-panel .talents .glyph-3 { float: left; height: 40px; width: 300px; margin: 2px; position:relative; clear: left; }
.main-panel .talents .glyph-3 img { float: left; background: url(images/glyphs/glyph_bg_prime.png); height: 30px; width: 30px; padding: 5px; }
.main-panel .talents .glyph-3 .text { background: url(images/glyphs/glyph_bg_text.png) no-repeat right center; font-size: 14px; font-weight: bold; text-transform: capitalize; color: #FFF; float: left; line-height: 30px; height: 30px; width: 250px; margin-top: 5px; margin-bottom: 5px; padding-right: 5px; padding-left: 5px; }

/***********  Spellbook Page ***********/

.main-panel .spellbook .container .spell-tree { margin: 10px;  background: url(../images/char_info_bg.jpg) repeat-y center top; }
.main-panel .spellbook .container .spell-tree .tree-name { position: relative; text-transform: uppercase; font: bold 24px/40px "Times New Roman", Times, serif; color: #FFFFFF; padding: 2px; }
.main-panel .spellbook .container .spell-tree .tree-name img { height: 40px; width: 40px; float: left;}
.main-panel .spellbook .container .spell-tree .tree-name .id-name { height: 40px; float: left; margin-left: 5px; }
.main-panel .spellbook .container .spell-tree .spell-page { padding: 5px; clear: both; }
.main-panel .spellbook .container .spell-tree .spell-page .spell-container { height: 40px; width: 31%; float: left; padding: 2px; margin-right: 5px; margin-bottom: 5px;}
.main-panel .spellbook .container .spell-tree .spell-page .spell-container .text { height: 40px; color: #FFCC00; white-space: normal; }
.main-panel .spellbook .container .spell-tree .spell-page .spell-container .text img { height: 40px; width: 40px; float: left; margin-right: 5px;}
.main-panel .spellbook .container .spell-tree .spell-page .spell-container .text .rank { color: #CCCCCC; font-size: 10px; }
.icon_grey { filter:gray;opacity:0.6; }

/***********  Currency Page ***********/
.main-panel .currency .icon { height: 24px; width: 24px; float: left; margin-right: 5px; }
.main-panel .currency .icon img { height: 24px; width: 24px; }
.main-panel .currency .text { text-align: left; color: #000; font-size: 14px; line-height: 24px; }


/***********  Talent tab Arrows ***********/
.skill-icon { float:left; margin-right: 2px; width: 18px; height: 18px; }

.talentcalc-row{background:url(images/talents/mop-talents.png);height:50px;line-height:50px;margin:0 0 16px;text-align:center;}
.talentcalc-row .outer{cursor:pointer;float:left;height: 42px;
position: relative;
margin: 2px;
width:215px;border: 1px solid #fff;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;}
.talentcalc-row .outer.last-child{width:183px;}
.talentcalc-row .outer:first-child{cursor:default;font-size:22px;width:61px; border: 0px;}
.talentcalc-row[data-available="yes"] .outer:first-child{color:#ffd100;}
.talentcalc-row .outer:hover{background-position:0 -100px;}
.talentcalc-row .outer[data-selected="yes"]{background-position:0 -150px;}
.talentcalc-row .outer[data-selected="yes"]:hover{background-position:0 -250px;}
.talentcalc-row .inner{bottom:0;display:block;float:left;left:0;right:0;top:0;}
.talentcalc-row .inner>div{float:left;}
.talentcalc-row .screen{bottom:0;display:block;left:0;position:absolute;right:0;top:0;z-index:1;}
.talentcalc-row .iconmedium{left:5px;position:absolute;top:3px;}
.talentcalc-row[data-available="yes"] .outer:hover .iconmedium a{background-position:0 0;}
.talentcalc-row table{border-collapse:collapse;border-spacing:0;bottom:0;font-size:12px;font-weight:500;left:59px;line-height:normal;margin:0;position:absolute;text-align:left;top:0;display: inline-block;}
.talentcalc-row td{height:50px;padding:0;}
.talentcalc-row .outer[data-selected="yes"] td{color:#eee;}
.talentcalc-row .outer[data-selected="yes"] .inner{background-position:right -200px;box-shadow:0 0 8px rgba(255,209,0,.4);-moz-box-shadow:0 0 8px rgba(255,209,0,.4);-webkit-box-shadow:0 0 8px rgba(255,209,0,.4);z-index:1;}

.talentcalc-row .outer[data-selected="yes"] { color: #fff; background: #5b2200; border-color: #ce5209; -moz-box-shadow: 0 0 8px #ce5209 inset; -webkit-box-shadow: 0 0 8px #ce5209 inset; box-shadow: 0 0 8px #ce5209 inset; }
.talentcalc-row .outer[data-selected="yes"]:hover { background: #732b00; border-color: #f2752c; -moz-box-shadow: 0 0 8px #f2752c inset; -webkit-box-shadow: 0 0 8px #f2752c inset; box-shadow: 0 0 8px #f2752c inset; }
.talentcalc-row .outer[data-selected="no"] { color: #FFB100; opacity: .8; }
.talentcalc-row .outer[data-selected="no"]:hover { background: #141414; border-color: #b6b6b6; -moz-box-shadow: 0 0 8px #b6b6b6 inset; -webkit-box-shadow: 0 0 8px #b6b6b6 inset; box-shadow: 0 0 8px #b6b6b6 inset; }

.iconmedium {width: 44px;height: 44px;}
.iconmedium img {width: 36px;height: 36px;left: 4px;top: 4px;border-radius: 4px;-moz-border-radius: 4px;-webkit-border-radius: 4px;}
.iconsmall ins, .iconmedium ins, .iconlarge ins, .iconblizzard ins {display: block;position: absolute;z-index: 5;background-repeat: no-repeat;}



/* talents */
.summary-talents { width: 333px; float: right; position:relative; top:-9px; }

.summary-talents .category { clear: both; height: 38px; line-height: 45px;}

.summary-talents .title { float: left; }

.summary-talents .profile-box-simple { border-top: 0px; margin-top: 0px;}

.summary-talents .talent-export { float: right; font-size: 11px; letter-spacing: 0; display: inline-block; line-height: 49px;}
.summary-talents .talent-export .arrow { display: inline-block; background: url("../../images/icons/flyout-arrows.gif") no-repeat -4px -123px; width: 6px; height: 10px; margin: 0 0 -1px 6px;}

.summary-talents .talent-specs { 	background-color: rgb(0 0 0 / 40%); border-radius: 4px; border-bottom: 1px solid #3C1E12; clear: both;}
.TalentEntry-media{ 	background-color: rgb(0 0 0 / 40%);}
.talent-specs { 	background-color: rgb(0 0 0 / 40%); border-radius: 4px; border-bottom: 1px solid #3C1E12; clear: both;}
.summary-talents .talent-specs .inner { display: block; padding: 8px 7px 11px 12px; padding-bottom: 0; position: relative;}
.summary-talents .talent-specs .roles { position: absolute; left: 13px; top: 25px; width: 32px; height: 16px; }
.summary-talents .talent-specs .checkmark { background: url("../../images/talents-check.gif") no-repeat; width:15px; height:11px; float: right; position: absolute; top: 18px; right: 7px;}

.summary-talents .talent-specs .frame { float: left; width: 26px; height: 26px; margin-right: 9px; margin-top: 1px; background-color: black; border: 1px solid #434445; border-bottom-color: #2F3032; border-top-color: #B1B2B4; overflow: hidden; -webkit-box-shadow: 0px 1px 8px 0px rgba(0,0,0,0.50); box-shadow:0px 1px 8px 0px rgba(0,0,0,0.50);}
.summary-talents .talent-specs .icon img { display: block; width: 26px; height: 26px;}
.summary-talents .talent-specs .frame, .summary-talents .talent-specs .frame .icon, .summary-talents .talent-specs .icon img {-moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px;}

.summary-talents .talent-specs .name-build { float: left; line-height: 28px; margin-top:1px; }
.summary-talents .talent-specs .name { display: block; color: #FFB100; font-size: 12px; white-space: nowrap; width: 99px; overflow: hidden; text-overflow: ellipsis;}
.summary-talents .talent-specs .name.empty { color: #996E46;}
.summary-talents .talent-specs .build { display: block; color: white; padding-top: 3px; font-weight: normal; font-size: 12px; }
.summary-talents .talent-specs .build ins { color: #808080; padding: 0 4px; font-weight: normal; text-decoration: none; }

.summary-talents .talent-specs a { vertical-align: top; width: 164px; height: 47px; display: block; position: relative;overflow: hidden; border-top: 1px solid #683b27;
    background-color: #512c1b; /* Old browsers */
    background-image: -moz-linear-gradient(top,  #512c1b 0%, #30120b 100%); /* FF3.6+ */
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#512c1b), color-stop(100%,#30120b)); /* Chrome,Safari4+ */
    background-image: -webkit-linear-gradient(top,  #512c1b 0%,#30120b 100%); /* Chrome10+,Safari5.1+ */
    background-image: -o-linear-gradient(top,  #512c1b 0%,#30120b 100%); /* Opera 11.10+ */
    background-image: -ms-linear-gradient(top,  #512c1b 0%,#30120b 100%); /* IE10+ */
    background-image: linear-gradient(to bottom,  #512c1b 0%,#30120b 100%); /* W3C */
}
.summary-talents .talent-specs a:hover {
    border-top: 1px solid #73412b;
    background-color: #59301e; /* Old browsers */
    background-image: -moz-linear-gradient(top,  #59301e 0%, #35140c 100%); /* FF3.6+ */
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#59301e), color-stop(100%,#35140c)); /* Chrome,Safari4+ */
    background-image: -webkit-linear-gradient(top,  #59301e 0%,#35140c 100%); /* Chrome10+,Safari5.1+ */
    background-image: -o-linear-gradient(top,  #59301e 0%,#35140c 100%); /* Opera 11.10+ */
    background-image: -ms-linear-gradient(top,  #59301e 0%,#35140c 100%); /* IE10+ */
    background-image: linear-gradient(to bottom,  #59301e 0%,#35140c 100%); /* W3C */
}
.summary-talents .talent-specs a.disabled {
	cursor: default;
	background-color: #512c1b; /* Old browsers */
	background-image: -moz-linear-gradient(top,  #512c1b 0%, #30120b 100%); /* FF3.6+ */
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#512c1b), color-stop(100%,#30120b)); /* Chrome,Safari4+ */
	background-image: -webkit-linear-gradient(top,  #512c1b 0%,#30120b 100%); /* Chrome10+,Safari5.1+ */
	background-image: -o-linear-gradient(top,  #512c1b 0%,#30120b 100%); /* Opera 11.10+ */
	background-image: -ms-linear-gradient(top,  #512c1b 0%,#30120b 100%); /* IE10+ */
	background-image: linear-gradient(to bottom,  #512c1b 0%,#30120b 100%); /* W3C */
}

.summary-talents .talent-specs a.spec-0 { float: left; border-radius: 4px 0px 0px 4px; margin: 2px 0px 2px 2px;  }
.summary-talents .talent-specs a.spec-1 { float: right; border-radius: 0px 4px 4px 0px; margin: 2px 2px 2px 0px; }

.summary-talents .talent-specs a:hover .name { color: white !important; }
.summary-talents .talent-specs a.disabled .name { color: #996E46 !important; }

.summary-talents .talent-specs a.selected { border-top: 1px solid transparent; background: transparent; cursor: default; }
.summary-talents .talent-specs a.selected .name { color: #FFF; }

.summary-talents .talent-build { float: left; border-radius: 5px; display: none; }
.summary-talents .talent-build.selected { display: block; }

.summary-talents .talent-build .talents {  margin: 25px 0 26px 14px;}
.summary-talents .talent-build .talents ul{list-style: none;    padding-left: 0px;}
.summary-talents .talent-build .talents li { margin-bottom: 6px; height: 22px;}
.summary-talents .talent-build .talents li:last-of-type { margin-bottom: 0px;}
.summary-talents .talent-build .talents li .icon-frame { float: left; margin-right: 9px;}
.summary-talents .talent-build .talents li .icon-frame, .summary-talents .talent-build .glyphs li .icon-frame {-moz-border-radius:1px; -webkit-border-radius:1px; border-radius: 1px; -webkit-box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.45); box-shadow:0px 1px 4px 0px rgba(0,0,0,0.45);}
.summary-talents .talent-build .talents li .spell-name { line-height: 22px; color: #f3e6d0; width: 128px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; cursor:default;}

.summary-talents .talent-build .glyphs { float: right; width: 90px; margin: 27px 19px;}

.summary-talents .talent-build .glyphs ul { margin-bottom: 24px;}
.summary-talents .talent-build .glyphs li { margin-bottom: 8px;}
.summary-talents .talent-build .glyphs li h3 { color: #71401f; font-weight:normal;}
.summary-talents .talent-build .glyphs li .icon-frame { margin-right: 4px;}
.summary-talents .talent-build .glyphs li .icon-frame:last-of-type { margin-right: 0px;}

.summary-talents .talent-build .talents li.empty .spell-name { color: #572e1b;}
.summary-talents .talent-build .talents li.empty .icon-frame,
.summary-talents .talent-build .glyphs li .icon-frame.empty { vertical-align: top; font-family:Arial, sans-serif; font-size: 12px; font-weight:bold; line-height: 18px; text-align: center; color: #572e1b; background-color: #3e1f12; border-color: #4f2a18; /*text-shadow: 1px 1px 1px #000;*/ -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; -webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0); box-shadow:0px 0px 0px 0px rgba(0,0,0,0);}

.section-blue{
	color:#ebdec2;
	background-image:url(../images/Pane-dirtBlue-27a12e492e.jpg);
	padding-top: 25px;
}
.section-blue>.section-bg{
	background-color:#040f1a;
	background-image:url(../images/Pane-dirtBlue-27a12e492e.jpg);
	background-position:top;
	background-size:200%;
	background-repeat:repeat
}
@media (min-width:980px){
	.section-blue>.section-bg{
		background-size:100%;
	}
}
.section-bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #000;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}

.reputation-list {    list-style-type: none;    margin: 10px 125px;}
.reputation-category { margin-bottom: 30px; }
.reputation-category .category-header { color: #fff9b2; font-size: 22px; font-weight: normal; letter-spacing: -0.05em; padding-left: 20px; background: url("../../images/icons/collapse-expand.png") no-repeat 0 -80px; cursor: pointer; }
.reputation-category.category-collapsed .category-header { background-position: 0 -120px; }
.reputation-category .category-header:hover { color: #fff; background-position: 0 -160px; }
.reputation-category.category-collapsed .category-header:hover { color: #fff; background-position: 0 -200px; }

.reputation-subcategory { margin-top: 20px;}
.reputation-subcategory.subcategory-collapsed { }
.reputation-subcategory .faction-header { padding-left: 40px; font-size: 18px; font-weight: normal; letter-spacing: -0.05em; color: #9c3802; background: url("../../images/icons/collapse-expand.png") no-repeat 20px -4px; width: 230px;float: left; cursor: pointer;}
.reputation-subcategory.subcategory-collapsed .faction-header { background-position: 20px -44px; }
.reputation-subcategory .faction-header:hover { color: #fff; background-position: 20px -164px; }
.reputation-subcategory.subcategory-collapsed .faction-header:hover { color: #fff; background-position: 20px -204px; }
.reputation-subcategory .factions { margin: 0; }

.factions,
.reputation-entry {
    list-style-type: none;
	padding: 0px;
}
.faction-details { border-top: 1px solid #331304; line-height: 30px;}
.faction-details:first-child { border-top: 0; }
.faction-subcategory-details { border-top: 0 !important; }

.reputation-subcategory .faction-details { border-top: 1px solid #331304; }

.faction-name,
.faction-standing,
.faction-level { line-height: 22px; float: left; padding: 4px 0; }
td .faction-name,
td .faction-standing,
td .faction-level { padding: 0; margin: 0; }

.faction-name { margin-right: 20px; margin-left: 40px; width: 260px; }

.faction-standing { width: 300px; overflow: hidden; }
.faction-bar { width: 300px; height: 22px; background: #542b19 url("../images/bar-background.png") no-repeat 0 0; position: relative; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; }
.faction-score { font-weight: bold; color: #fff; text-shadow: 1px 1px 1px black; text-align: center; z-index: 2; position: absolute; left: 0; width: 100%; }
.faction-fill { height: 22px; z-index: 1; background: url("../images/bar-background.png") no-repeat 0 -44px; -moz-border-radius: 3px; -moz-border-radius-topright: 0; -moz-border-radius-bottomright: 0; -webkit-border-radius: 3px; -webkit-border-top-right-radius: 0; -webkit-border-bottom-right-radius: 0; border-radius: 3px; border-radius-topright: 0; border-radius-bottomright: 0; }
.full-fill { -moz-border-radius: inherit; -webkit-border-radius: inherit; border-radius: inherit;}

.rank-7 .faction-fill { background-position: 0 -88px; }
.rank-6 .faction-fill { background-position: 0 -66px; }
.rank-5 .faction-fill { background-position: 0 -66px; }
.rank-4 .faction-fill { background-position: 0 -66px; }
.rank-3 .faction-fill { background-position: 0 -44px; }
.rank-2 .faction-fill { background-position: 0 -22px; }
.rank-1 .faction-fill { background-position: 0 -22px; }
.rank-0 .faction-fill { background-position: 0 -22px; }

.faction-level { padding-left: 85px; font-weight: bold; }
.rank-7 .faction-level { color: #00be70; }
.rank-6 .faction-level { color: #51ab01; }
.rank-5 .faction-level { color: #51ab01; }
.rank-4 .faction-level { color: #51ab01; }
.rank-3 .faction-level { color: #d2ac00; }
.rank-2 .faction-level { color: #a00000; }
.rank-1 .faction-level { color: #a00000; }
.rank-0 .faction-level { color: #a00000; }

.faction-level-rank-7{color:#28a687;}
.faction-level-rank-6{color:#0f9601;}
.faction-level-rank-5{color:#0f9601;}
.faction-level-rank-4{color:#0f9601;}
.faction-level-rank-3{color:#e07a03;}
.faction-level-rank-2{color:#cc3609;}
.faction-level-rank-1{color:#d90e03;}
.faction-level-rank-0{color:#d90e03;}
.progress {
	overflow: hidden;
	height: 20px;
	margin-bottom: 10px;
	background-color: #212121;
	border-radius: 0px;
	/* -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); */
	/* box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); */
	border: 1px solid rgba(177,153,127,.5);
}
.rank-7{background:#28a687;background:linear-gradient(to right,#196855 0,#28a687 100%)}
.rank-6{background:#0f9601;background:linear-gradient(to right,#074a00 0,#0f9601 100%)}
.rank-5{background:#0f9601;background:linear-gradient(to right,#074a00 0,#0f9601 100%)}
.rank-4{background:#0f9601;background:linear-gradient(to right,#074a00 0,#0f9601 100%)}
.rank-3{background:#e07a03;background:linear-gradient(to right,#955102 0,#e07a03 100%)}
.rank-2{background:#cc3609;background:linear-gradient(to right,#832306 0,#cc3609 100%)}
.rank-1{background:#d90e03;background:linear-gradient(to right,#8e0902 0,#d90e03 100%)}
.rank-0{background:#d90e03;background:linear-gradient(to right,#8e0902 0,#d90e03 100%)}
.Progressbar--STRANGER>.Progressbar-progress{background:#cc3609;background:linear-gradient(to right,#832306 0,#cc3609 100%)}
.Progressbar--ACQUAINTANCE>.Progressbar-progress{background:#e07a03;background:linear-gradient(to right,#955102 0,#e07a03 100%)}
.Progressbar--BUDDY>.Progressbar-progress{background:#0f9601;background:linear-gradient(to right,#074a00 0,#0f9601 100%)}
.Progressbar--FRIEND>.Progressbar-progress{background:#0f9601;background:linear-gradient(to right,#074a00 0,#0f9601 100%)}
.Progressbar--GOOD_FRIEND>.Progressbar-progress{background:#0f9601;background:linear-gradient(to right,#074a00 0,#0f9601 100%)}
.Progressbar--BEST_FRIEND>.Progressbar-progress{background:#28a687;background:linear-gradient(to right,#196855 0,#28a687 100%)}
.Progressbar--BODYGUARD>.Progressbar-progress{background:#0f9601;background:linear-gradient(to right,#074a00 0,#0f9601 100%)}
.Progressbar--TRUSTED_BODYGUARD>.Progressbar-progress{background:#0f9601;background:linear-gradient(to right,#074a00 0,#0f9601 100%)}
.Progressbar--PERSONAL_WINGMAN>.Progressbar-progress{background:#0f9601;background:linear-gradient(to right,#074a00 0,#0f9601 100%)}

.summary-health-resource { float: left; margin: 0 0px 10px; color: white; }
.summary-health-resource li { margin-right: 11px; padding-left: 11px; text-shadow: 1px 1px 1px #000; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; cursor: help; display: inline-block; width: 157px;}
.summary-health-resource li, .summary-health-resource span { height: 23px; line-height: 23px; }
.summary-health-resource .name { font-size: 11px; }
.summary-health-resource .value { font-size: 12px; font-family:"Arial Black", Arial, sans-serif; font-weight:900; padding-left: 5px; }
.summary-health-resource .health { background-position: 0 0; margin-bottom: 7px; background-color: #248000; }
.summary-health-resource .resource-0 { background-position: 0 -23px; background-color: #1c8aff; }  /* Mana */
.summary-health-resource .resource-1 { background-position: 0 -69px; background-color: #ab0000; }  /* Rage */
.summary-health-resource .resource-2 { background-position: 0 -115px; background-color: #964414; } /* Focus */
.summary-health-resource .resource-3 { background-position: 0 -46px; background-color: #cb9501; }  /* Energy */
.summary-health-resource .resource-6 { background-position: 0 -92px; background-color: #00bcde; }  /* Runic */
.summary-health-resource .resource-11 { background-position: 0 -115px; background-color: #008fff; }  /* Maelstrom */
.summary-health-resource .resource-13 { background-position: 0 -138px; background-color: #330066; }  /* Insanity */
.summary-health-resource .resource-17 { background-position: 0 -161px; background-color: #9b6200; }  /* Fury */
.summary-health-resource .resource-18 { background-position: 0 -184px; background-color: #9b9300; }  /* Pain */


/* stats, professions, battlegrounds */
.summary-stats-profs-bgs { clear: left; padding: 0 25px 23px 25px; background-color: rgba(0, 0, 0, 0.15); -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; }

/* stats */
.summary-stats { padding-top: 15px;display: flex; }
.summary-stats .summary-stats-column h4 { color: white; font-size: 14px; font-weight: bold; margin-bottom: 7px; line-height: 21px;}
.summary-stats-column { /*width: 234px; margin-top:13px; clear: left;*/ white-space: nowrap; background: rgba(0, 0, 0, 0.35);    margin: 5px;}

.summary-stats-column li { cursor: help; }
.summary-stats-column li.has-icon { line-height: 15px; }
.summary-stats-column li.no-tooltip { cursor: inherit; }
.summary-stats-column .icon { float: left; height: 16px; margin-right: 5px; }
.summary-stats-column .name { float: left; }
.summary-stats-column .value { float: right; color: #F5EBD1; }
.summary-stats-end { clear: left; }
.summary-stats-simple { line-height: normal; }
.summary-stats-simple li { padding: 6px 0; }
a.summary-stats-simple-arrow-left { position: absolute; right: 30px; top: 1px; width: 26px; height: 20px; background: url("../../images/profile/nav.gif") left top no-repeat; }
a.summary-stats-simple-arrow-left:hover { background-position: left bottom; }
a.summary-stats-simple-arrow-right { position: absolute; right: -1px; top: 1px; width: 26px; height: 20px; background: url("../../images/profile/nav.gif") right top no-repeat; }
a.summary-stats-simple-arrow-right:hover { background-position: right bottom; }
.summary-stats-simple-base, .summary-stats-advanced-base { float: left; margin-right: 27px; }
.summary-stats-simple-other { position: relative; }
.summary-stats-simple-other, .summary-stats-advanced-role { float: left; }
.summary-stats-advanced li { padding: 10px 0; border-top: 1px solid #2f1e18; }
a.summary-stats-toggler, a.summary-stats-toggler .inner { display: block; height: 26px; line-height: 26px; background: url("../../images/stats-expand-bg.gif") left top no-repeat; font-size: 11px; }
a.summary-stats-toggler { margin-top: 15px; text-align: center; padding-left: 10px; }
a.summary-stats-toggler .inner { background-position: right top; padding-right: 10px; }
a.summary-stats-toggler:hover { background-position: left bottom; }
a.summary-stats-toggler:hover .inner { background-position: right bottom; }
.summary-stats-bottom { border-top: 1px solid #2f1e18; margin-top: 25px; padding-top: 25px; }

.summary-bottom-sub-content .category .view-more { background: url("../../images/icons/more-arrows-wide.gif") no-repeat 100% 12px; display: inline-block; padding-right: 14px; }
.summary-bottom-sub-content .category .view-more:hover { background-position: 100% -77px; }


.summary-bottom-left {
    margin-right: 367px;
}
.summary-bottom-right {
    float: right;
    width: 385px;
}

.equip-bg {padding-top: 15px;}

/* Equipment Items */
.equip .item { position:absolute; width:64px; height:64px; left: -3px; top: -3px; z-index: 100; }

.equip .none { background: url(images/equip_button.png) no-repeat left top; }
.equip .poor { background: url(images/equip_poor.png no-repeat left top); }
.equip .common { background: url(images/equip_common.png) no-repeat left top; }
.equip .uncommon { background: url(images/equip_uncommon.png) no-repeat left top; }
.equip .rare { background: url(images/equip_rare.png) no-repeat left top; }
.equip .epic { background: url(images/equip_epic.png) no-repeat left top; }
.equip .legendary { background: url(images/equip_legendary.png) no-repeat left top; }

.equip .none:hover,
.equip .poor:hover,
.equip .common:hover,
.equip .uncommon:hover,
.equip .rare:hover,
.equip .epic:hover,
.equip .legendary:hover { background-position: right top; }

.equip .icon { position:absolute; clip: rect(2px 62px 62px 2px); width:64px; height:64px; cursor:pointer; left: 0; top: 0; z-index: 90; margin: 0; padding: 0; }

.equip_Head { position:absolute; cursor:pointer; left: 10px; top: 10px; }
.equip_Neck { position:absolute; cursor:pointer; left: 10px; top: 80px; }
.equip_Shoulder { position:absolute; cursor:pointer; left: 10px; top: 150px; }
.equip_Back { position:absolute; cursor:pointer; left: 10px; top: 220px; }
.equip_Chest { position:absolute; cursor:pointer; left: 10px; top: 290px; }
.equip_Shirt { position:absolute; cursor:pointer; left: 10px; top: 360px; }
.equip_Tabard { position:absolute; cursor:pointer; left: 10px; top: 430px; }
.equip_Wrist { position:absolute; cursor:pointer; left: 10px; top: 500px; }
.equip_Hands { position:absolute; cursor:pointer; left: 466px; top: 10px; }
.equip_Waist { position:absolute; cursor:pointer; left: 466px; top: 80px; }
.equip_Legs { position:absolute; cursor:pointer; left: 466px; top: 150px; }
.equip_Feet { position:absolute; cursor:pointer; left: 466px; top: 220px; }
.equip_Finger1 { position:absolute; cursor:pointer; left: 466px; top: 290px; }
.equip_Finger2 { position:absolute; cursor:pointer; left: 466px; top: 360px; }
.equip_Trinket1 { position:absolute; cursor:pointer; left: 466px; top: 430px; }
.equip_Trinket2 { position:absolute; cursor:pointer; left: 466px; top: 500px; }
.equip_MainHand { position:absolute; cursor:pointer; left: 170px; top: 500px; }
.equip_SecondaryHand { position:absolute; cursor:pointer; left: 238px; top: 500px; }
.equip_OffHand{ position:absolute; cursor:pointer; left: 238px; top: 500px; }
.equip_Ranged { position:absolute; cursor:pointer; left: 306px; top: 500px; }
.equip_Ammo { position:absolute; cursor:pointer; left: 374px; top: 500px; visibility: hidden; }


/* Socket icons */
.socket-line { margin: 1px 0;padding: 0;clear: both;}
.icon-socket { display:inline-block; position: relative; width: 15px; height: 15px; float: left;
margin-right: 4px;
margin-top: 1px;}
.icon-socket a.gem { display: block; width: 15px; height: 15px; }
.icon-socket a.gem img { display: block; width: 13px; height: 13px; padding: 1px 0 0 1px; }
.icon-socket .empty { position: absolute; left: 1px; top: 1px; width: 13px; height: 13px; }
.icon-socket .frame { position: absolute; left: 0; top: 0; width: 15px; height: 15px; background: url("../images/sockets.png") no-repeat; }
.icon-socket.socket-meta  .empty { background-color: #29292a; } /* meta */
.icon-socket.socket-red  .empty { background-color: #301010; } /* red */
.icon-socket.socket-yellow  .empty { background-color: #403010; } /* yellow */
.icon-socket.socket-blue  .empty { background-color: #102040; } /* blue */
.icon-socket.socket-prismatic .empty { background-color: #29292a; } /* prismatic */
.icon-socket.socket-sha-touched .empty { background-color: #000; }     /* sha-touched */
.icon-socket.socket-cogwheel .empty { background-color: #29292a; } /* cogwheel */
.icon-socket.socket-meta  .frame { background-position:  -45px   0; } /* meta */
.icon-socket.socket-red  .frame { background-position:      0   0; } /* red */
.icon-socket.socket-yellow  .frame { background-position:  -15px   0; } /* yellow */
.icon-socket.socket-blue  .frame { background-position:  -30px   0; } /* blue */
.icon-socket.socket-orange  .frame { background-position:  -90px   0; } /* orange */
.icon-socket.socket-purple .frame { background-position:  -75px   0; } /* purple */
.icon-socket.socket-green .frame { background-position: -105px   0; } /* green */
.icon-socket.socket-prismatic .frame { background-position:  -60px   0; } /* prismatic */
.icon-socket.socket-sha-touched .frame { background-position: -120px   0; } /* sha-touched */
.icon-socket.socket-Cogwheel .frame { background-position:  -45px   0; } /* Cogwheel */



/* inventory (shared) */
.summary-inventory .slot { position: absolute; }
.summary-inventory a.item { width: 49px; height: 49px; display: block; position: absolute; }
.summary-inventory a.item img { display: block;width: 49px;height: 49px;padding: 1px; }
.summary-inventory a.item:hover .frame { background-color: rgba(255, 255, 255, 0.2); }
.summary-inventory a.empty { width: 49px; height: 49px; display: block; cursor: help; position: absolute; background: url("../images/item-empty-bg.png") no-repeat; opacity: 0.33333; }
.summary-inventory a.empty:hover { opacity: 0.66666; }
.summary-inventory a.item .frame, .summary-inventory a.empty .frame { position: absolute; left: 0; top: 0; width: 49px; height: 49px; background: url("../images/icons/frames/inventory-slots.png") no-repeat; }
.summary-inventory .slot,
.summary-inventory a.item,
.summary-inventory a.item .frame,
.summary-inventory a.empty { -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; }
.summary-inventory .transmog-frame { width:17px; height:17px; display:block; position:absolute; z-index:2; top:32px; left:0; background: url("../images/transmogrify-icon.gif") 0 -17px no-repeat }
.summary-inventory .transmog-frame:hover { background-position:-17px -17px }
.summary-inventory .slot-align-right .transmog-frame { left:32px; background-position:0 0 }
.summary-inventory .slot-align-right .transmog-frame:hover { background-position:-17px 0 }

/* empty slots */
.summary-inventory .slot-1  a.empty { background-position: 1px 1px;    } /* Head */
.summary-inventory .slot-2  a.empty { background-position: 1px -46px;  } /* Neck */
.summary-inventory .slot-3  a.empty { background-position: 1px -93px;  } /* Shoulder */
.summary-inventory .slot-16 a.empty,                                     /* Back */
.summary-inventory .slot-5  a.empty { background-position: 1px -140px; } /* Chest */
.summary-inventory .slot-19 a.empty { background-position: 1px -187px; } /* Tabard */
.summary-inventory .slot-4  a.empty { background-position: 1px -234px; } /* Shirt */
.summary-inventory .slot-9  a.empty { background-position: 1px -281px; } /* Wrist */
.summary-inventory .slot-10 a.empty { background-position: 1px -328px; } /* Hands */
.summary-inventory .slot-6  a.empty { background-position: 1px -375px; } /* Waist */
.summary-inventory .slot-7  a.empty { background-position: 1px -422px; } /* Legs */
.summary-inventory .slot-8  a.empty { background-position: 1px -469px; } /* Feet */
.summary-inventory .slot-11 a.empty { background-position: 1px -516px; } /* Finger */
.summary-inventory .slot-12 a.empty { background-position: 1px -563px; } /* Trinket */
.summary-inventory .slot-21 a.empty { background-position: 1px -610px; } /* Main Hand */
.summary-inventory .slot-22 a.empty { background-position: 1px -657px; } /* Off Hand */
.summary-inventory .slot-15 a.empty { background-position: 1px -704px; } /* Ranged */
.summary-inventory .slot-28 a.empty { background-position: 1px -751px; } /* Relic */

/* item quality frames */
.summary-inventory .item-quality-0 a.item .frame { background-position: -49px  0; }
.summary-inventory .item-quality-1 a.item .frame { background-position: -98px  0; }
.summary-inventory .item-quality-2 a.item .frame { background-position: -147px 0; }
.summary-inventory .item-quality-3 a.item .frame { background-position: -196px 0; }
.summary-inventory .item-quality-4 a.item .frame { background-position: -245px 0; }
.summary-inventory .item-quality-5 a.item .frame { background-position: -294px 0; }
.summary-inventory .item-quality-6 a.item .frame { background-position: -343px 0; }
.summary-inventory .item-quality-7 a.item .frame { background-position: -392px 0; }

.slot-1 {  left: 0px; top: 0px;}
.slot-2 {  left: 0px; top: 58px;}
.slot-3 {  left: 0px; top: 116px;}
.slot-16 {  left: 0px; top: 174px;}
.slot-5 {  left: 0px; top: 232px;}
.slot-4 {  left: 0px; top: 290px;}
.slot-19 {  left: 0px; top: 348px;}
.slot-9 {  left: 0px; top: 406px;}
.slot-10 {  top: 0px; right: 0px;}
.slot-6 {  top: 58px; right: 0px;}
.slot-7 {  top: 116px; right: 0px;}
.slot-8 {  top: 174px; right: 0px;}
.slot-11 {  top: 232px; right: 0px;}
.slot-12 {  top: 290px; right: 0px;}
.slot-13 {  top: 348px; right: 0px;}
.slot-14 {  top: 406px; right: 0px;}
.slot-21 {  left: 132.5px; bottom: 0px;}
.slot-22 {  left: 409.5px; bottom: 0px;}
.slot-center{    margin: auto 350px;}

/* stats block *
.stats {
height: 521px;
position: relative;
display: inline-block;
float: right;
}
*/
.clear {
    clear: both;
    display: block;
    margin: 0;
    padding: 0;
}
/* inventory (simple) */
.summary-inventory-simple { width: 612px; height: 455px; position: absolute; left: 28px; top: 1px; }
.summary-inventory a.item { -moz-box-shadow: 0 0 8px black; -webkit-box-shadow: 0 0 8px black; box-shadow: 0 0 8px black; }

/* inventory (advanced) */
.summary-inventory-advanced { background: url(../images/GarrisonLandingPageMiddleTile.png) repeat;
    height: 521px;
    display: block;
    width: 800px;
    position: relative;
    margin: 10px auto; }
.summary-inventory-advanced .slot-inner { width: 265px; height: 57px; background: url("../images/item-slot-advanced-bg.png") left top repeat-y; }
.summary-inventory-advanced .slot-highlight .slot-inner { background-position: left bottom; }
.summary-inventory-advanced .details { position: absolute; width: 204px; height: 49px; left: 60px; top: 7px; white-space: nowrap; }
.summary-inventory-advanced a.item,
.summary-inventory-advanced a.empty { position: absolute; left: 4px; top: 4px; }
.summary-inventory-advanced a.empty { opacity: 0.25; }
.summary-inventory-advanced .name, .summary-inventory-advanced .name-shadow { position: absolute; font-size: 12px !important; }
.summary-inventory-advanced .name { left: 0; top: -2px; }
.summary-inventory-advanced .audit-warning { display: inline-block; background: url("../images/icons/warning-small.png") right center no-repeat; width: 10px; height: 10px; margin-left: 5px; cursor: help; }
.summary-inventory-advanced .enchant, .summary-inventory-advanced .enchant-shadow { position: absolute; font-size: 11px; }
.summary-inventory-advanced .enchant { left: 0; top: 12px; color: #0f0; }
.summary-inventory-advanced .enchant .tip { border-bottom: 0; }
.summary-inventory-advanced .enchant-shadow { left: 1px; top: 13px; color: black; }
.summary-inventory-advanced .level { position: absolute; left: 0; bottom: -2px; color: #999999; width: 20px; height: 16px; line-height: 16px; font-size: 10px; }
.summary-inventory-advanced .sockets { position: absolute; left: 27px; bottom: 1px; }
.summary-inventory-advanced .sockets .icon-socket { float: left; margin-right: 4px; }
.summary-inventory-advanced .upgrade { position: absolute; left: 87px; bottom: -2px; color: #FFB100; height: 16px; line-height: 16px; font-size: 10px; display: none; }
.summary-inventory-advanced .details:hover .upgrade { display: block; }
.summary-inventory-advanced .transmog-frame { top:36px; left:4px }
.summary-inventory-advanced .slot-align-right .transmog-frame { left:244px }


/* overrides for right-aligned slots */
.summary-inventory-advanced .slot-align-right .details { left: auto; right: 60px; }
.summary-inventory-advanced .slot-align-right .slot-inner { background-position: right top; text-align: right; }
.summary-inventory-advanced .slot-align-right.slot-highlight .slot-inner { background-position: right bottom; }
.summary-inventory-advanced .slot-align-right a.item,
.summary-inventory-advanced .slot-align-right a.empty { left: auto; right: 4px; }
.summary-inventory-advanced .slot-align-right .name,
.summary-inventory-advanced .slot-align-right .enchant { left: auto; right: 0; }
.summary-inventory-advanced .slot-align-right .name-shadow { left: auto; right: -1px; }
.summary-inventory-advanced .slot-align-right .enchant-shadow { left: auto; right: -1px; }
.summary-inventory-advanced .slot-align-right .audit-warning { background-position: left center; margin-right: 4px; margin-left: 0; }
.summary-inventory-advanced .slot-align-right .level { left: auto; right: 0; }
.summary-inventory-advanced .slot-align-right .sockets { left: auto; right: 27px; }
.summary-inventory-advanced .slot-align-right .sockets .icon-socket { margin-right: auto; margin-left: 4px; }
.summary-inventory-advanced .slot-align-right .upgrade { text-align: right; left: auto; right: 87px; }

/* item colors */
.summary-inventory-advanced .item-quality-0 a.name { color: #9d9d9d; }
.summary-inventory-advanced .item-quality-1 a.name { color: #ffffff; }
.summary-inventory-advanced .item-quality-2 a.name { color: #1eff00; }
.summary-inventory-advanced .item-quality-3 a.name { color: #0070dd; }
.summary-inventory-advanced .item-quality-4 a.name { color: #a335ee; }
.summary-inventory-advanced .item-quality-5 a.name { color: #ff8000; }
.summary-inventory-advanced .item-quality-6 a.name { color: #e5cc80; }
.summary-inventory-advanced .item-quality-7 a.name { color: #e5cc80; }

/* gems */
.summary-gems { float: left; width: 259px; }
.summary-gems li { line-height: 15px; padding: 4px 0; }
.summary-gems li:first-child { font-size: 16px; padding-bottom: 5px; }
.summary-gems li:first-child .times { margin-left: 2px; }
.summary-gems li:first-child .name { width: 208px; }
.summary-gems .value, .summary-gems .times, .summary-gems .icon, .summary-gems a.name { display: block; float: left; }
.summary-gems .times { font-size: 10px; margin-left: 4px; margin-right: 5px; line-height: 14px; color: #997647; }
.summary-gems .icon { margin-right: 5px; }
.summary-gems .name { width: 215px; }

/* enchant/gem bonuses */
.summary-bonus-tally { float: right; width: 259px; }
.summary-bonus-tally .numerical { margin-bottom: 5px; }
.summary-bonus-tally .numerical li { line-height: 15px; padding: 4px 0; }
.summary-bonus-tally .numerical li:first-child { font-size: 16px; padding-bottom: 5px; }
.summary-bonus-tally .numerical .value, .summary-bonus-tally .other .name, .summary-bonus-tally .other .name a { color: #1EFF00; }
.summary-bonus-tally .other { line-height: 23px; }
.summary-bonus-tally .other .name a { white-space: nowrap; }
.summary-bonus-tally .other .name a:hover { color: white; }
.summary-bonus-tally .other .comma { letter-spacing: 1px; }
.summary-bonus-tally .tip { border-bottom: 0; }

.talent-build {display:none;}
.talent-build.selected {display:block;}
.talents-talent {
	width:30%;
	display: inline-block;
	padding: 3px;
	height: 56px;
	position: relative;
}
.talents-talent .spell-name {
	align-content: center;
	display: inline-grid;
	position: absolute;
	margin: 1px;
	height: 48px;
}
.spec-button {
	/*border: 1px solid;
	border-color:#fff;*/
	display: inline-block;
}
.spec-button:not(.selected) {
	opacity: .4;
}
.spec-button.selected {
	/*border-color:#e5cc80*/
}
.spec-button .TalentEntry-media {
	border: 1px solid;
	border-color:#fff;
}
.spec-button .TalentEntry-media.selected {
	border-color:#e5cc80;
}
@media (min-width: 1280px){
	.font-bliz-light-small-lightGold {
		font-size: 1.44rem;
	}
}
@media (min-width: 720px){
	.font-bliz-light-small-lightGold {
		font-size: 1.224rem;
	}
}
.font-bliz-light-small-lightGold {
	font-size: 1.08rem;
	line-height: 1.5;
	font-family: Open Sans,Arial,Helvetica,sans-serif;
	color: #f8b700;
	text-shadow: 0 0 1px transparent, 0 1px 2px rgb(0 0 0 / 80%);
	font-weight: 400;
}


/*
	new layout.. maybe
*/
.character-equip{ position: relative;}
.character-equip--left{left:0;float:left;}
.character-equip--right{right:0;float:right;}
.character-equip--right::before{right:0}
.character-equip--left,.character-equip--right{top:0}
.character-equip--left .character-slot-item,.character-equip--right .character-slot-item{margin:5px 0}
@media (min-width:540px){.character-equip--left .character-slot-item,.character-equip--right .character-slot-item{margin:10px 0}
}
.character-equip--bottom{	position: relative;
	display: block;
	margin-bottom: 70px;}
.character-equip--bottom .character-slot-item{margin:0 1px}
@media (min-width:540px){.character-equip--bottom .character-slot-item{margin:0 3px}
}
.character-equip--bottom .character-slot-item{position:absolute}
.character-equip--bottom .character-slot-item:first-child{left:50%;margin-left:-60px}
@media (min-width:980px){.character-equip--bottom .character-slot-item:first-child{margin-left:-80px}
}
.character-equip--bottom .character-slot-item:last-child{right:50%;margin-right:-60px}
@media (min-width:980px){.character-equip--bottom .character-slot-item:last-child{margin-right:-80px}
}
.character-equip--bottom .character-slot-item:last-child .character-slot-itemDetails,.character-equip--left .character-slot-itemDetails{left:100%}
.character-equip--bottom .character-slot-item:first-child .character-slot-itemDetails,.character-equip--right .character-slot-itemDetails{right:100%;text-align:right}
.character-slot-itemEnchantment{font-size:.75rem;line-height:1.5em}

.cd-slot-bg-right{
	background: linear-gradient(to right, rgba(255,0,0,0), rgb(20 18 18));
    background-size: 350px;
    background-position: right;
    background-repeat: no-repeat;
}

.cd-slot-bg-left{
	background: linear-gradient(to left, rgba(255,0,0,0), rgb(20 18 18));
    background-size: 350px;
    background-position: left;
    background-repeat: no-repeat;
}

.character-slot-item{position:relative}
.character-slot-itemDetails{font-family:"Open Sans",Arial,Helvetica,sans-serif;font-weight:400;font-size:.9rem;line-height:1em;text-shadow:0 0 1px transparent,0 1px 2px rgba(0,0,0,.8);display:none;position:absolute;top:0;width:450px;padding:4px;min-height:58px}
.character-slot-itemDetails.zh-cn,.zh-cn .character-slot-itemDetails{font-family:Arial,Helvetica,"微软雅黑","Microsoft YaHei","Hei SC",sans-serif}
.character-slot-itemDetails.ko-kr,.ko-kr .character-slot-itemDetails{font-family:Arial,Helvetica,"맑은 ê³ ë”•","Malgun Gothic","ì• í”Œì‚°ëŒê³ ë”•ë„¤ì˜¤",AppleSDGothicNeo,"ì• í”Œê³ ë”•",AppleGothic,"돋움",Dotum,sans-serif}
.character-slot-itemDetails.ru-ru,.ru-ru .character-slot-itemDetails{font-family:"Open Sans",Arial,Helvetica,sans-serif}
.character-slot-itemDetails.zh-tw,.zh-tw .character-slot-itemDetails{font-family:Arial,Helvetica,"黑體-繁","Heiti TC","微軟正黑","Microsoft JhengHei","Tei TC",sans-serif}
@media (min-width:720px){.character-slot-itemDetails{font-size:1.02rem}
}
@media (min-width:1280px){.character-slot-itemDetails{font-size:1.2rem}
}
@media (min-width:980px){.character-slot-itemDetails{display:block}
}
@media (min-width:1280px){.character-slot-itemDetails{padding:0 8px}
}
html.filter .character-slot-itemDetails::before{content:"";position:absolute;display:block;height:100%;width:400px;background-color:rgba(0,0,0,.8);-webkit-filter:blur(50px);filter:blur(50px);z-index:-1}
.character-slot-itemLevel{color:#cacaca;font-size:.75rem;line-height:1.5em;display:table-cell}
@media (min-width:720px){.character-slot-itemLevel{font-size:.85rem}
}
@media (min-width:1280px){.character-slot-itemLevel{font-size:1rem}
}
.character-slot-itemSockets{display:table-cell}
.character-slot-gear--left{left:0}
.character-slot-gear--right{right:0}
.character-slot-gear--right::before{right:0}
.character-slot-gear--left,.character-slot-gear--right{top:0}
.character-slot-gear--left .character-slot-item,.character-slot-gear--right .character-slot-item{margin:5px 0}
@media (min-width:540px){.character-slot-gear--left .character-slot-item,.character-slot-gear--right .character-slot-item{margin:10px 0}
}
.character-equip--bottom{	position: relative;
	display: block;
	margin-bottom: 70px;}
.character-equip--bottoms .character-slot-item{margin:0 1px}
@media (min-width:540px){.character-equip--bottoms .character-slot-item{margin:0 3px}
}
.character-equip--bottoms .character-slot-item{position:absolute}
.character-equip--bottoms .character-slot-item:first-child{left:50%;margin-left:-60px}
@media (min-width:980px){.character-equip--bottoms .character-slot-item:first-child{margin-left:-80px}
}
.character-equip--bottoms .character-slot-item:last-child{right:50%;margin-right:-60px}
@media (min-width:980px){.character-equip--bottoms .character-slot-item:last-child{margin-right:-80px}
}
.character-equip--bottoms .character-slot-item:last-child .character-slot-itemDetails,.character-slot-gear--left .character-slot-itemDetails{left:100%}
.character-equip--bottoms .character-slot-item:first-child .character-slot-itemDetails,.character-slot-gear--right .character-slot-itemDetails{right:100%;text-align:right}
.character-slot-itemEnchantment{font-size:.75rem;line-height:1.5em}
@media (min-width:720px){.character-slot-itemEnchantment{font-size:.85rem}
}
@media (min-width:1280px){.character-slot-itemEnchantment{font-size:1rem}
}
.character-slot-itemEnchantment--ARTIFACT,.character-slot-itemEnchantment--COMMON,.character-slot-itemEnchantment--EPIC,.character-slot-itemEnchantment--HEIRLOOM,.character-slot-itemEnchantment--LEGENDARY,.character-slot-itemEnchantment--POOR,.character-slot-itemEnchantment--RARE,.character-slot-itemEnchantment--UNCOMMON{color:#1eff00}

.CharacterProfile-render{margin:-36% -80px 0;position:absolute;left:0;right:0;top:0;z-index:-1}
@media (min-width:540px){.CharacterProfile-render{margin:-36% -50px 0}
}
@media (min-width:998px){.CharacterProfile-render{width:100%;margin:0 auto;top:-36%;max-width:940px}
}
.CharacterProfile-bg{position:absolute}
.CharacterProfile-image{z-index:-1}
.Art-image {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-position: center;
	background-size: cover;
}

.Link{cursor:pointer}
.Link--inline{display:inline-block}
.Link--block{display:block}
.Link--text{font-size:.9rem;line-height:1.5em;color:#f8b700;text-shadow:0 0 1px transparent,0 1px 2px rgba(0,0,0,.8)}


.ItemSocket{position:relative;display:inline-block;height:16px;width:16px}
.ItemSocket-frame{position:absolute;top:0;right:0;bottom:0;left:0;background-size:contain;background-repeat:no-repeat;}
.ItemSocket-icon{position:absolute;top:0;right:0;bottom:0;left:0;background-repeat:no-repeat;background-size:contain}
.ItemSocket--block{display:block}
.ItemSocket--inline{display:table-cell;text-align:center;vertical-align:middle}
.ItemSocket--META>.ItemSocket-frame{background-image:url(../assets/images/item/prismatic.png); }
.ItemSocket--PRISMATIC>.ItemSocket-frame{background-image:url(../assets/images/item/prismatic.png);}
.ItemSocket--COGWHEEL>.ItemSocket-frame{background-image:url(../assets/images/item/prismatic.png);}



.Ratiobar-percent.zh-cn,.zh-cn .Ratiobar-percent{font-family:Arial,Helvetica,微软雅黑,Microsoft YaHei,Hei SC,sans-serif}
.ko-kr .Ratiobar-percent,.Ratiobar-percent.ko-kr{font-family:Arial,Helvetica,맑은 고딕,Malgun Gothic,애플산돌고딕네오,AppleSDGothicNeo,애플고딕,AppleGothic,돋움,Dotum,sans-serif}
.Ratiobar-percent.ru-ru,.ru-ru .Ratiobar-percent{font-family:Open Sans,Arial,Helvetica,sans-serif}
.Ratiobar-percent.zh-tw,.zh-tw .Ratiobar-percent{font-family:Arial,Helvetica,黑體-繁,Heiti TC,微軟正黑,Microsoft JhengHei,Tei TC,sans-serif}
.Ratiobar-value+.Ratiobar-percent{padding-left:10px;padding-right:0}
.Ratiobar--separator .Ratiobar-right:before,.Ratiobar--winLoss .Ratiobar-right:before{background-color:#504137;content:"";height:100%;left:-2px;position:absolute;top:0;width:4px}
.Ratiobar--winLoss .Ratiobar-left{background-color:#0f0}
.Ratiobar--winLoss .Ratiobar-right{background-color:#db2300}
.Reputation{position:relative}
.Reputation-title{padding-top:5px}
.Reputation-title>*{display:inline-block}
.Reputation-progress{padding:6.66666667px 0}
.Reputation-name.Reputation-subsection{color:#fff;font-size:1.296rem;line-height:1.5;font-family:Open Sans,Arial,Helvetica,sans-serif;font-weight:400}
@media (min-width:720px){.Reputation-name.Reputation-subsection{font-size:1.4687999999999999rem}
}
@media (min-width:1280px){.Reputation-name.Reputation-subsection{font-size:1.728rem}
}
.Reputation-name.Reputation-subsection.zh-cn,.zh-cn .Reputation-name.Reputation-subsection{font-family:Arial,Helvetica,微软雅黑,Microsoft YaHei,Hei SC,sans-serif}
.ko-kr .Reputation-name.Reputation-subsection,.Reputation-name.Reputation-subsection.ko-kr{font-family:Arial,Helvetica,맑은 고딕,Malgun Gothic,애플산돌고딕네오,AppleSDGothicNeo,애플고딕,AppleGothic,돋움,Dotum,sans-serif}
.Reputation-name.Reputation-subsection.ru-ru,.ru-ru .Reputation-name.Reputation-subsection{font-family:Open Sans,Arial,Helvetica,sans-serif}
.Reputation-name.Reputation-subsection.zh-tw,.zh-tw .Reputation-name.Reputation-subsection{font-family:Arial,Helvetica,黑體-繁,Heiti TC,微軟正黑,Microsoft JhengHei,Tei TC,sans-serif}
.Reputation-name,.Reputation-standing{font-size:1.08rem;line-height:1.5;font-family:Open Sans,Arial,Helvetica,sans-serif;color:#ebdec2;text-shadow:0 0 1px transparent,0 1px 2px rgba(0,0,0,.8);font-weight:400;text-shadow:none;line-height:1.6;margin:0}
@media (min-width:720px){.Reputation-name,.Reputation-standing{font-size:1.224rem}
}
@media (min-width:1280px){.Reputation-name,.Reputation-standing{font-size:1.44rem}
}
.Reputation-name.zh-cn,.Reputation-standing.zh-cn,.zh-cn .Reputation-name,.zh-cn .Reputation-standing{font-family:Arial,Helvetica,微软雅黑,Microsoft YaHei,Hei SC,sans-serif}
.ko-kr .Reputation-name,.ko-kr .Reputation-standing,.Reputation-name.ko-kr,.Reputation-standing.ko-kr{font-family:Arial,Helvetica,맑은 고딕,Malgun Gothic,애플산돌고딕네오,AppleSDGothicNeo,애플고딕,AppleGothic,돋움,Dotum,sans-serif}
.Reputation-name.ru-ru,.Reputation-standing.ru-ru,.ru-ru .Reputation-name,.ru-ru .Reputation-standing{font-family:Open Sans,Arial,Helvetica,sans-serif}
.Reputation-name.zh-tw,.Reputation-standing.zh-tw,.zh-tw .Reputation-name,.zh-tw .Reputation-standing{font-family:Arial,Helvetica,黑體-繁,Heiti TC,微軟正黑,Microsoft JhengHei,Tei TC,sans-serif}
.Reputation-standing{position:absolute;right:0;text-align:right}
.Reputation-progress .Progressbar-body{line-height:1.5em;color:#fff;text-shadow:0 0 1px transparent,0 1px 2px rgba(0,0,0,.8);font-size:1rem;line-height:1.5;font-family:Semplicita Pro,Open Sans,Arial,Helvetica,sans-serif;font-weight:700;text-align:left;padding-left:10px}
@media (min-width:720px){.Reputation-progress .Progressbar-body{font-size:1rem}
}
@media (min-width:1280px){.Reputation-progress .Progressbar-body{font-size:1rem}
}
.Reputation-progress .Progressbar-body.zh-cn,.zh-cn .Reputation-progress .Progressbar-body{font-family:Arial,Helvetica,微软雅黑,Microsoft YaHei,Hei SC,sans-serif}
.ko-kr .Reputation-progress .Progressbar-body,.Reputation-progress .Progressbar-body.ko-kr{font-family:Nanum Gothic,Arial,Helvetica,맑은 고딕,Malgun Gothic,애플산돌고딕네오,AppleSDGothicNeo,애플고딕,AppleGothic,돋움,Dotum,sans-serif}
.Reputation-progress .Progressbar-body.ru-ru,.ru-ru .Reputation-progress .Progressbar-body{font-family:Futura Demi,Open Sans,Arial,Helvetica,sans-serif}
.Reputation-progress .Progressbar-body.zh-tw,.zh-tw .Reputation-progress .Progressbar-body{font-family:Arial,Helvetica,黑體-繁,Heiti TC,微軟正黑,Microsoft JhengHei,Tei TC,sans-serif}
.Reputation--DEFAULT .Reputation-standing{color:#0f9601}
.Reputation--EXALTED .Reputation-standing{color:#28a687}
.Reputation--FRIENDLY .Reputation-standing,.Reputation--HONORED .Reputation-standing,.Reputation--REVERED .Reputation-standing{color:#0f9601}
.Reputation--NEUTRAL .Reputation-standing{color:#edba03}
.Reputation--UNFRIENDLY .Reputation-standing{color:#cc3609}
.Reputation--HATED .Reputation-standing,.Reputation--HOSTILE .Reputation-standing{color:#d90e03}
.Reputation--STRANGER .Reputation-standing{color:#cc3609}
.Reputation--ACQUAINTANCE .Reputation-standing{color:#edba03}
.Reputation--BUDDY .Reputation-standing,.Reputation--FRIEND .Reputation-standing,.Reputation--GOOD_FRIEND .Reputation-standing{color:#0f9601}
.Reputation--BEST_FRIEND .Reputation-standing{color:#28a687}
.Reputation--BODYGUARD .Reputation-standing,.Reputation--TRUSTED_BODYGUARD .Reputation-standing{color:#0f9601}
.Reputation--PERSONAL_WINGMAN .Reputation-standing{color:#28a687}
.Reputation--BRONZE_ALLY .Reputation-standing,.Reputation--CHRONO-FRIEND .Reputation-standing,.Reputation--EPOCH-MENDER .Reputation-standing,.Reputation--TEMPORAL_TRAINEE .Reputation-standing,.Reputation--TIMEHOPPER .Reputation-standing,.Reputation--WHELPLING .Reputation-standing{color:#0f9601}
.Reputation--TIMELORD .Reputation-standing{color:#28a687}
.Reputation--AMBIVALENT .Reputation-standing,.Reputation--APPREHENSIVE .Reputation-standing,.Reputation--CORDIAL .Reputation-standing,.Reputation--DUBIOUS .Reputation-standing,.Reputation--TENTATIVE .Reputation-standing{color:#0f9601}
.Reputation--APPRECIATIVE .Reputation-standing{color:#28a687}
.Reputation--RANK_1 .Reputation-standing,.Reputation--RANK_2 .Reputation-standing,.Reputation--RANK_3 .Reputation-standing,.Reputation--RANK_4 .Reputation-standing,.Reputation--RANK_5 .Reputation-standing,.Reputation--RANK_6 .Reputation-standing,.Reputation--RANK_7 .Reputation-standing{color:#0f9601}
.Reputation--RANK_8 .Reputation-standing{color:#28a687}
.Reputation--wide{-webkit-box-sizing:border-box;box-sizing:border-box}
.Reputation--wide:after,.Reputation--wide:before{content:"";display:table;clear:both}
.Reputation--wide .Reputation-title{text-align:center;padding-top:24px}
.Reputation--wide .Reputation-name{clear:none;float:left;width:25%;text-align:right;padding:6.66666667px}
.Reputation--wide .Reputation-progress{clear:none;float:left;width:50%;padding:6.66666667px}
.Reputation--wide .Reputation-standing{clear:none;float:left;width:25%;padding:6.66666667px;text-align:left}
.Separator>*{position:relative}
.Separator>:after,.Separator>:before{content:"";top:0;bottom:0;width:2px;position:absolute;background:#000;z-index:1}
.Separator>:before{left:0}
.Separator>:after{right:0}
.Separator>:first-child:before,.Separator>:last-child:after{display:none}
.Separator>*>.bordered:before{left:2px;right:2px}
.Separator>:first-child>.bordered:before{left:0}
.Separator>:last-child>.bordered:before{right:0}
.Separator--borders>:before{border-left:1px solid #504137}
.Separator--borders>:after{border-right:1px solid #504137}
.Separator--bordersFadeTop>:before{border:solid #504137;border-width:0 0 0 1px;-o-border-image:linear-gradient(180deg,rgba(80,65,55,0) 0,#504137) 1;border-image:-webkit-gradient(linear,left top,left bottom,from(rgba(80,65,55,0)),to(#504137)) 1;border-image:linear-gradient(180deg,rgba(80,65,55,0) 0,#504137) 1}
.Separator--bordersFadeTop>:after,.Separator--bordersFadeTop>:before{background:-webkit-gradient(linear,left top,left bottom,from(transparent),to(#000));background:linear-gradient(180deg,transparent 0,#000);background-clip:content-box}
.Separator--bordersFadeTop>:after{border:solid #504137;border-width:0 1px 0 0;-o-border-image:linear-gradient(180deg,rgba(80,65,55,0) 0,#504137) 1;border-image:-webkit-gradient(linear,left top,left bottom,from(rgba(80,65,55,0)),to(#504137)) 1;border-image:linear-gradient(180deg,rgba(80,65,55,0) 0,#504137) 1}
.Separator--bordersFadeBottom>:before{border:solid #504137;border-width:0 0 0 1px;-o-border-image:linear-gradient(180deg,#504137 0,rgba(80,65,55,0)) 1;border-image:-webkit-gradient(linear,left top,left bottom,from(#504137),to(rgba(80,65,55,0))) 1;border-image:linear-gradient(180deg,#504137 0,rgba(80,65,55,0)) 1}
.Separator--bordersFadeBottom>:after,.Separator--bordersFadeBottom>:before{background:-webkit-gradient(linear,left top,left bottom,from(#000),to(transparent));background:linear-gradient(180deg,#000 0,transparent);background-clip:content-box}
.Separator--bordersFadeBottom>:after{border:solid #504137;border-width:0 1px 0 0;-o-border-image:linear-gradient(180deg,#504137 0,rgba(80,65,55,0)) 1;border-image:-webkit-gradient(linear,left top,left bottom,from(#504137),to(rgba(80,65,55,0))) 1;border-image:linear-gradient(180deg,#504137 0,rgba(80,65,55,0)) 1}
.Separator--fade>:after,.Separator--fade>:before{width:1px;border:0}
.Separator--fade>:before{background:#504137;background:-webkit-gradient(linear,left top,left bottom,from(rgba(80,65,55,0)),color-stop(40%,#504137),color-stop(60%,#504137),to(rgba(80,65,55,0)));background:linear-gradient(180deg,rgba(80,65,55,0) 0,#504137 40%,#504137 60%,rgba(80,65,55,0))}
.Separator--fade>:after{background:#211510;background:-webkit-gradient(linear,left top,left bottom,from(transparent),color-stop(40%,#000),color-stop(60%,#000),to(transparent));background:linear-gradient(180deg,transparent 0,#000 40%,#000 60%,transparent)}
.Separator--fade>*>.bordered:before{left:1px;right:1px}
.Separator--vertical>:after,.Separator--vertical>:before{top:auto;bottom:auto;width:100%;left:0;right:0;height:2px}
.Separator--vertical>:before{top:0}
.Separator--vertical>:after{bottom:0}
.Separator--vertical>*>.bordered:before{left:0;right:0;top:2px;bottom:2px}
.Separator--vertical>:first-child>.bordered:before{top:0}
.Separator--vertical>:last-child>.bordered:before{bottom:0}
.Separator--vertical.Separator--borders>:before{border-top:1px solid #504137}
.Separator--vertical.Separator--borders>:after{border-bottom:1px solid #504137}
.SiteFooter{padding:30px 0}
.SiteFooter>.NavbarFooter{margin-top:0;margin-bottom:0}
.SiteFooter>.NavbarFooter>.NavbarFooter-legal{padding-bottom:0}
.SocialLinks{color:#ebdec2;text-align:center}

.Divider{height:4px;margin: 10px 0px;width:100%;background-color:#000;position:relative;pointer-events:none;}
.Divider--thin{height:1px}
.Divider--thick{height:3px}
.Divider--short{width:33%}
.Divider--medium{width:66%}
.Divider--dark{background-color:#fff}
.Divider--lightBrown{background-color:#504137}
.Divider--silver{background-color:hsla(0,0%,66.7%,.4)}
.Divider--paperInset{background-image:-webkit-gradient(linear,left bottom,left top,color-stop(50%,#fdf3d3),color-stop(50%,#c6b390));background-image:linear-gradient(0deg,#fdf3d3 50%,#c6b390 0)}
.Divider--opaque{background:hsla(0,0%,100%,.25)}
.Divider--borders{border-top:1px solid #000;border-bottom:1px solid #000;padding:1px 0;height:2px}
.Divider--shadowTop:before{content:"";position:absolute;top:-1px;left:0;right:0;border-bottom:1px solid #000}
.Divider--shadowBottom:before{content:"";position:absolute;bottom:-1px;left:0;right:0;border-top:1px solid #000}
.Divider--legion{background:#69ba0f -webkit-gradient(linear,left top,right top,from(#b4e119),to(#1e9204));background:#69ba0f linear-gradient(90deg,#b4e119 0,#1e9204);height:2px}
.Divider--legionSwirl,.Divider--legionTribal{height:13px;background:transparent}
.Divider--legionSwirl:before,.Divider--legionTribal:before{content:"";position:absolute;top:-52px;left:0;right:0;background:transparent url(/static/components/Divider/Divider-legion-swirl.f6a96f3617ea7521df4f547daac0ecb5.png);background-size:1600px;background-position:50%;background-repeat:no-repeat;height:116px;z-index:1}
@media (min-width:1600px){.Divider--legionSwirl:before,.Divider--legionTribal:before{background-size:100%}
}
.Divider--legionTribal:before{background-image:url(/static/components/Divider/Divider-legion-tribal.5fd4bd30b305187ab0fc566ead6b302d.png)}
.Divider--goldFrame{background-image:url(/static/components/Divider/Divider-goldFrame.e7955252c1aafbb499cdf78fa428c000.png);height:5px}
.Divider--corinthian,.Divider--goldFrame{background-repeat:repeat-x;background-size:auto 100%}
.Divider--corinthian{background-image:url(/static/components/Divider/Divider-corinthianChrome.2091bfb4f4ec6cef598a70ff077fc4ec.jpg);height:6px}
.Divider--ochoThickDown,.Divider--ochoThickUp,.Divider--ochoThin{height:6px;background:transparent}
.Divider--ochoThickDown:before,.Divider--ochoThickUp:before,.Divider--ochoThin:before{content:"";position:absolute;top:-50px;left:0;right:0;background-size:1600px;background-position:50%;background-repeat:no-repeat;height:115px;z-index:1}
@media (min-width:1600px){.Divider--ochoThickDown:before,.Divider--ochoThickUp:before,.Divider--ochoThin:before{background-size:100%}
}
.Divider--ochoThickUp:before{background-image:url(/static/components/Divider/Divider-ocho-thickUp.2f840a5539afc4a43798c60e9010ad0d.png)}
.Divider--ochoThickDown:before{background-image:url(/static/components/Divider/Divider-ocho-thickDown.e1367b9e73ad90671b4fefc96b5b4c08.png);top:-46px}
.Divider--ochoThin{height:10px}
.Divider--ochoThin:before{top:-52px;background-image:url(/static/components/Divider/Divider-ocho-thin.295b144519591ef361653bfb7436da61.png)}



.CharacterHeader--horizontal{display:table;position:relative}
.CharacterHeader--horizontal>.List-item{vertical-align:middle}
.CharacterHeader--horizontal .CharacterHeader-character{margin-bottom:0}
.CharacterHeader--horizontal .CharacterHeader-nameTitle{padding-right:20px;margin-right:20px;border-right:1px solid hsla(0,0%,100%,.2)}
@media (min-width:540px){.CharacterHeader{display:table;position:relative}
.CharacterHeader>.List-item{vertical-align:middle}
.CharacterHeader .CharacterHeader-character{margin-bottom:0}
.CharacterHeader .CharacterHeader-nameTitle{padding-right:20px;margin-right:20px;border-right:1px solid hsla(0,0%,100%,.2)}
}
@media (min-width:1280px){.CharacterHeader-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}
}
.CharacterHeader-outdatedWarning{color:#ebdec2;margin-bottom:15px}
@media (min-width:1280px){.CharacterHeader-outdatedWarning{margin-bottom:10px;-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;padding-left:20px;text-align:right;max-width:500px}
}
.CharacterHeader-info{display:table-cell;vertical-align:middle;height:100%}
.CharacterHeader-character{display:table;position:relative;margin-bottom:10px}
.CharacterHeader-character>.List-item{vertical-align:middle}
.CharacterHeader-title{font-size:1.08rem;line-height:1.5;font-family:Semplicita Pro,Open Sans,Arial,Helvetica,sans-serif;color:#fff;text-shadow:0 0 1px transparent,0 1px 2px rgba(0,0,0,.8);font-weight:700;max-width:350px}
@media (min-width:720px){.CharacterHeader-title{font-size:1.224rem}
}
@media (min-width:1280px){.CharacterHeader-title{font-size:1.44rem}
}
.CharacterHeader-title.zh-cn,.zh-cn .CharacterHeader-title{font-family:Arial,Helvetica,微软雅黑,Microsoft YaHei,Hei SC,sans-serif}
.CharacterHeader-title.ko-kr,.ko-kr .CharacterHeader-title{font-family:Nanum Gothic,Arial,Helvetica,맑은 고딕,Malgun Gothic,애플산돌고딕네오,AppleSDGothicNeo,애플고딕,AppleGothic,돋움,Dotum,sans-serif}
.CharacterHeader-title.ru-ru,.ru-ru .CharacterHeader-title{font-family:Futura Demi,Open Sans,Arial,Helvetica,sans-serif}
.CharacterHeader-title.zh-tw,.zh-tw .CharacterHeader-title{font-family:Arial,Helvetica,黑體-繁,Heiti TC,微軟正黑,Microsoft JhengHei,Tei TC,sans-serif}
.CharacterHeader-logoArea{vertical-align:middle;height:100%;display:none}
@media (min-width:720px){.CharacterHeader-logoArea{display:block}
}
.CharacterHeader-logo.Logo--alliance,.CharacterHeader-logo.Logo--horde{margin-right:20px}

.Logo--horde.Logo--small {
	background-image: url(images/Logo-alliance.png);
	position: relative;
	width: 116.25px;
}

.Logo--alliance.Logo--small {
	background-image: url(images/Logo-horde.png);
	position: relative;
	width: 116.25px;
}
.Logo--alliance { 
background-image:url(images/Logo-alliance.png);
position:relative;
width:232.5px}
.Logo--alliance:before { 
content:"";
display:block;
padding-top:129.03225806%}
.Logo--alliance.Logo--small { 
background-image:url(images/Logo-alliance.png);
position:relative;
width:116.25px}
.Logo--alliance.Logo--small:before { 
content:"";
display:block;
padding-top:129.03225806%}
.Logo--alliance.Logo--smaller { 
background-image:url(images/Logo-alliance.png);
position:relative;
width:77.5px}
.Logo--alliance.Logo--smaller:before { 
content:"";
display:block;
padding-top:129.03225806%}
.Logo--alliance.Logo--tiny { 
background-image:url(images/Logo-alliance.png);
position:relative;
width:58.125px}
.Logo--alliance.Logo--tiny:before { 
content:"";
display:block;
padding-top:129.03225806%}
.Logo--allianceShadow { 
background-image:url(images/Logo-alliance-drop-shadow.png);
position:relative;
width:279px}
.Logo--allianceShadow:before { 
content:"";
display:block;
padding-top:129.03225806%}
.Logo--allianceShadow.Logo--small { 
background-image:url(images/Logo-alliance-drop-shadow.png);
position:relative;
width:139.5px}
.Logo--allianceShadow.Logo--small:before { 
content:"";
display:block;
padding-top:129.03225806%}
.Logo--allianceShadow.Logo--smaller { 
background-image:url(images/Logo-alliance-drop-shadow.png);
position:relative;
width:93px}
.Logo--allianceShadow.Logo--smaller:before { 
content:"";
display:block;
padding-top:129.03225806%}
.Logo--allianceShadow.Logo--tiny { 
background-image:url(images/Logo-alliance-drop-shadow.png);
position:relative;
width:69.75px}
.Logo--allianceShadow.Logo--tiny:before { 
content:"";
display:block;
padding-top:129.03225806%}
.Logo--allianceWireframe { 
background-image:url(images/Logo-allianceWireframe.png);
position:relative;
width:200px}
.Logo--allianceWireframe:before { 
content:"";
display:block;
padding-top:129.25%}
.Logo--allianceWireframe.Logo--small { 
background-image:url(images/Logo-allianceWireframe.png);
position:relative;
width:100px}
.Logo--allianceWireframe.Logo--small:before { 
content:"";
display:block;
padding-top:129.25%}
.Logo--allianceWireframe.Logo--smaller { 
background-image:url(images/Logo-allianceWireframe.png);
position:relative;
width:66.66666667px}
.Logo--allianceWireframe.Logo--smaller:before { 
content:"";
display:block;
padding-top:129.25%}
.Logo--allianceWireframe.Logo--tiny { 
background-image:url(images/Logo-allianceWireframe.png);
position:relative;
width:50px}
.Logo--allianceWireframe.Logo--tiny:before { 
content:"";
display:block;
padding-top:129.25%}
.Logo--allianceEmblem { 
background-image:url(images/Logo-allianceEmblem.png);
position:relative;
width:64px}
.Logo--allianceEmblem:before { 
content:"";
display:block;
padding-top:100%}
.Logo--allianceEmblem.Logo--small { 
background-image:url(images/Logo-allianceEmblem.png);
position:relative;
width:32px}
.Logo--allianceEmblem.Logo--small:before { 
content:"";
display:block;
padding-top:100%}
.Logo--allianceEmblem.Logo--smaller { 
background-image:url(images/Logo-allianceEmblem.png);
position:relative;
width:21.33333333px}
.Logo--allianceEmblem.Logo--smaller:before { 
content:"";
display:block;
padding-top:100%}
.Logo--allianceEmblem.Logo--tiny { 
background-image:url(images/Logo-allianceEmblem.png);
position:relative;
width:16px}
.Logo--allianceEmblem.Logo--tiny:before { 
content:"";
display:block;
padding-top:100%}
.Logo--horde { 
background-image:url(images/Logo-horde.png);
position:relative;
width:232.5px}
.Logo--horde:before { 
content:"";
display:block;
padding-top:129.03225806%}
.Logo--horde.Logo--small { 
background-image:url(images/Logo-horde.png);
position:relative;
width:116.25px}
.Logo--horde.Logo--small:before { 
content:"";
display:block;
padding-top:129.03225806%}
.Logo--horde.Logo--smaller { 
background-image:url(images/Logo-horde.png);
position:relative;
width:77.5px}
.Logo--horde.Logo--smaller:before { 
content:"";
display:block;
padding-top:129.03225806%}
.Logo--horde.Logo--tiny { 
background-image:url(images/Logo-horde.png);
position:relative;
width:58.125px}
.Logo--horde.Logo--tiny:before { 
content:"";
display:block;
padding-top:129.03225806%}
.Logo--hordeShadow { 
background-image:url(images/Logo-horde-drop-shadow.png);
position:relative;
width:279px}
.Logo--hordeShadow:before { 
content:"";
display:block;
padding-top:129.03225806%}
.Logo--hordeShadow.Logo--small { 
background-image:url(images/Logo-horde-drop-shadow.png);
position:relative;
width:139.5px}
.Logo--hordeShadow.Logo--small:before { 
content:"";
display:block;
padding-top:129.03225806%}
.Logo--hordeShadow.Logo--smaller { 
background-image:url(images/Logo-horde-drop-shadow.png);
position:relative;
width:93px}
.Logo--hordeShadow.Logo--smaller:before { 
content:"";
display:block;
padding-top:129.03225806%}
.Logo--hordeShadow.Logo--tiny { 
background-image:url(images/Logo-horde-drop-shadow.png);
position:relative;
width:69.75px}
.Logo--hordeShadow.Logo--tiny:before { 
content:"";
display:block;
padding-top:129.03225806%}
.Logo--hordeWireframe { 
background-image:url(images/Logo-hordeWireframe.png);
position:relative;
width:200px}
.Logo--hordeWireframe:before { 
content:"";
display:block;
padding-top:122%}
.Logo--hordeWireframe.Logo--small { 
background-image:url(images/Logo-hordeWireframe.png);
position:relative;
width:100px}
.Logo--hordeWireframe.Logo--small:before { 
content:"";
display:block;
padding-top:122%}
.Logo--hordeWireframe.Logo--smaller { 
background-image:url(images/Logo-hordeWireframe.png);
position:relative;
width:66.66666667px}
.Logo--hordeWireframe.Logo--smaller:before { 
content:"";
display:block;
padding-top:122%}
.Logo--hordeWireframe.Logo--tiny { 
background-image:url(images/Logo-hordeWireframe.png);
position:relative;
width:50px}
.Logo--hordeWireframe.Logo--tiny:before { 
content:"";
display:block;
padding-top:122%}
.Logo--hordeEmblem { 
background-image:url(images/Logo-hordeEmblem.png);
position:relative;
width:64px}
.Logo--hordeEmblem:before { 
content:"";
display:block;
padding-top:100%}
.Logo--hordeEmblem.Logo--small { 
background-image:url(images/Logo-hordeEmblem.png);
position:relative;
width:32px}
.Logo--hordeEmblem.Logo--small:before { 
content:"";
display:block;
padding-top:100%}
.Logo--hordeEmblem.Logo--smaller { 
background-image:url(images/Logo-hordeEmblem.png);
position:relative;
width:21.33333333px}
.Logo--hordeEmblem.Logo--smaller:before { 
content:"";
display:block;
padding-top:100%}
.Logo--hordeEmblem.Logo--tiny { 
background-image:url(images/Logo-hordeEmblem.png);
position:relative;
width:16px}
.Logo--hordeEmblem.Logo--tiny:before { 
content:"";
display:block;
padding-top:100%}


.CharacterHeader-nameArea{display:table-cell;vertical-align:middle;height:100%}
.CharacterHeader-name{font-family:Semplicita Pro,Open Sans,Arial,Helvetica,sans-serif;font-weight:700;font-size:2.2395rem;line-height:1.5;line-height:1em}
.CharacterHeader-name.zh-cn,.zh-cn .CharacterHeader-name{font-family:Arial,Helvetica,微软雅黑,Microsoft YaHei,Hei SC,sans-serif}
.CharacterHeader-name.ko-kr,.ko-kr .CharacterHeader-name{font-family:Nanum Gothic,Arial,Helvetica,맑은 고딕,Malgun Gothic,애플산돌고딕네오,AppleSDGothicNeo,애플고딕,AppleGothic,돋움,Dotum,sans-serif}
.CharacterHeader-name.ru-ru,.ru-ru .CharacterHeader-name{font-family:Futura Demi,Open Sans,Arial,Helvetica,sans-serif}
.CharacterHeader-name.zh-tw,.zh-tw .CharacterHeader-name{font-family:Arial,Helvetica,黑體-繁,Heiti TC,微軟正黑,Microsoft JhengHei,Tei TC,sans-serif}
@media (min-width:720px){.CharacterHeader-name{font-size:2.5381rem}
}
@media (min-width:1280px){.CharacterHeader-name{font-size:2.986rem}
}
.CharacterHeader--DEATHKNIGHT .CharacterHeader-name{color:#c41e3b}
.CharacterHeader--DEMONHUNTER .CharacterHeader-name{color:#a330c9}
.CharacterHeader--DRUID .CharacterHeader-name{color:#ff7c0a}
.CharacterHeader--EVOKER .CharacterHeader-name{color:#33937f}
.CharacterHeader--HUNTER .CharacterHeader-name{color:#aad372}
.CharacterHeader--MAGE .CharacterHeader-name{color:#68ccef}
.CharacterHeader--MONK .CharacterHeader-name{color:#00ffba}
.CharacterHeader--PALADIN .CharacterHeader-name{color:#f48cba}
.CharacterHeader--PRIEST .CharacterHeader-name{color:#f0ebe0}
.CharacterHeader--ROGUE .CharacterHeader-name{color:#fff468}
.CharacterHeader--SHAMAN .CharacterHeader-name{color:#2359ff}
.CharacterHeader--WARLOCK .CharacterHeader-name{color:#9382c9}
.CharacterHeader--WARRIOR .CharacterHeader-name{color:#c69b6d}
.CharacterHeader-media{text-transform:uppercase}
.CharacterHeader-media .Media-image{padding-right:4px}
.CharacterHeader-links{display:table;position:relative;font-size:1.296rem;line-height:1.5;color:#f8b700;margin:-10px}
.CharacterHeader-links>.List-item{vertical-align:middle}
@media (min-width:720px){.CharacterHeader-links{font-size:1.4687999999999999rem}
}
@media (min-width:1280px){.CharacterHeader-links{font-size:1.728rem}
}
.CharacterHeader-links>*{display:table-cell;vertical-align:middle;height:100%;padding:10px}
.CharacterHeader-details{font-size:1rem;line-height:1.5}
@media (min-width:720px){.CharacterHeader-details{font-size:1.02rem}
}
@media (min-width:1280px){.CharacterHeader-details{font-size:1.2rem}
}
.CharacterHeader-detail{display:inline-block}
.CharacterCovenantTooltip-header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:left;-ms-flex-pack:left;justify-content:left;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
.CharacterCovenantTooltip .CharacterCovenantTooltip-sigil{margin-right:8px}
.CovenantRank{position:relative;padding-left:0}
.CovenantRank-sigil{position:absolute;left:4px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}
.CovenantRank-rank{padding-left:40px;line-height:29px;padding-bottom:1px}
@media (min-width:980px){.CovenantRank-rank{line-height:30px}
}
.Icon-svg:not(.Icon--color) {
    fill: white;
}








.Progressbar--EXALTED>.Progressbar-progress { 
background:#28a687;
background:-webkit-gradient(linear,left top,right top,from(#196855),to(#28a687));
background:linear-gradient(90deg,#196855 0,#28a687)}
.Progressbar--FRIENDLY>.Progressbar-progress,.Progressbar--HONORED>.Progressbar-progress,.Progressbar--REVERED>.Progressbar-progress { 
background:#0f9601;
background:-webkit-gradient(linear,left top,right top,from(#074a00),to(#0f9601));
background:linear-gradient(90deg,#074a00 0,#0f9601)}
.Progressbar--NEUTRAL>.Progressbar-progress { 
background:#edba03;
background:-webkit-gradient(linear,left top,right top,from(#a17f02),to(#edba03));
background:linear-gradient(90deg,#a17f02 0,#edba03)}
.Progressbar--UNFRIENDLY>.Progressbar-progress { 
background:#cc3609;
background:-webkit-gradient(linear,left top,right top,from(#832306),to(#cc3609));
background:linear-gradient(90deg,#832306 0,#cc3609)}
.Progressbar--HATED>.Progressbar-progress,.Progressbar--HOSTILE>.Progressbar-progress { 
background:#d90e03;
background:-webkit-gradient(linear,left top,right top,from(#8e0902),to(#d90e03));
background:linear-gradient(90deg,#8e0902 0,#d90e03)}
.Progressbar--STRANGER>.Progressbar-progress { 
background:#cc3609;
background:-webkit-gradient(linear,left top,right top,from(#832306),to(#cc3609));
background:linear-gradient(90deg,#832306 0,#cc3609)}
.Progressbar--ACQUAINTANCE>.Progressbar-progress { 
background:#edba03;
background:-webkit-gradient(linear,left top,right top,from(#a17f02),to(#edba03));
background:linear-gradient(90deg,#a17f02 0,#edba03)}
.Progressbar--BUDDY>.Progressbar-progress,.Progressbar--FRIEND>.Progressbar-progress,.Progressbar--GOOD_FRIEND>.Progressbar-progress { 
background:#0f9601;
background:-webkit-gradient(linear,left top,right top,from(#074a00),to(#0f9601));
background:linear-gradient(90deg,#074a00 0,#0f9601)}
.Progressbar--BEST_FRIEND>.Progressbar-progress { 
background:#28a687;
background:-webkit-gradient(linear,left top,right top,from(#196855),to(#28a687));
background:linear-gradient(90deg,#196855 0,#28a687)}
.Progressbar--BODYGUARD>.Progressbar-progress,.Progressbar--TRUSTED_BODYGUARD>.Progressbar-progress { 
background:#0f9601;
background:-webkit-gradient(linear,left top,right top,from(#074a00),to(#0f9601));
background:linear-gradient(90deg,#074a00 0,#0f9601)}
.Progressbar--PERSONAL_WINGMAN>.Progressbar-progress { 
background:#28a687;
background:-webkit-gradient(linear,left top,right top,from(#196855),to(#28a687));
background:linear-gradient(90deg,#196855 0,#28a687)}
.Reputation--BRONZE_ALLY .Progressbar-progress,.Reputation--CHRONO-FRIEND .Progressbar-progress,.Reputation--EPOCH-MENDER .Progressbar-progress,.Reputation--TEMPORAL_TRAINEE .Progressbar-progress,.Reputation--TIMEHOPPER .Progressbar-progress,.Reputation--WHELPLING .Progressbar-progress { 
background:#0f9601;
background:-webkit-gradient(linear,left top,right top,from(#074a00),to(#0f9601));
background:linear-gradient(90deg,#074a00 0,#0f9601)}
.Progressbar--TIMELORD .Progressbar-progress { 
background:#28a687;
background:-webkit-gradient(linear,left top,right top,from(#196855),to(#28a687));
background:linear-gradient(90deg,#196855 0,#28a687)}
.Reputation--AMBIVALENT .Progressbar-progress,.Reputation--APPREHENSIVE .Progressbar-progress,.Reputation--CORDIAL .Progressbar-progress,.Reputation--DUBIOUS .Progressbar-progress,.Reputation--TENTATIVE .Progressbar-progress { 
background:#0f9601;
background:-webkit-gradient(linear,left top,right top,from(#074a00),to(#0f9601));
background:linear-gradient(90deg,#074a00 0,#0f9601)}
.Reputation--APPRECIATIVE .Progressbar-progress { 
background:#28a687;
background:-webkit-gradient(linear,left top,right top,from(#196855),to(#28a687));
background:linear-gradient(90deg,#196855 0,#28a687)}
.Reputation--RANK_1 .Progressbar-progress,.Reputation--RANK_2 .Progressbar-progress,.Reputation--RANK_3 .Progressbar-progress,.Reputation--RANK_4 .Progressbar-progress,.Reputation--RANK_5 .Progressbar-progress,.Reputation--RANK_6 .Progressbar-progress,.Reputation--RANK_7 .Progressbar-progress { 
background:#0f9601;
background:-webkit-gradient(linear,left top,right top,from(#074a00),to(#0f9601));
background:linear-gradient(90deg,#074a00 0,#0f9601)}
.Reputation--RANK_8 .Progressbar-progress { 
background:#28a687;
background:-webkit-gradient(linear,left top,right top,from(#196855),to(#28a687));
background:linear-gradient(90deg,#196855 0,#28a687)}
.Progressbar--reputation-default>.Progressbar-progress { 
background:#0f9601;
background:-webkit-gradient(linear,left top,right top,from(#074a00),to(#0f9601));
background:linear-gradient(90deg,#074a00 0,#0f9601)}
.Progressbar--red>.Progressbar-progress { 
background:#b30000;
background:-webkit-gradient(linear,left top,right top,from(#600),to(#b30000));
background:linear-gradient(90deg,#600 0,#b30000)}
.Progressbar--yellow>.Progressbar-progress { 
background:#fff468;
background:-webkit-gradient(linear,left top,right top,from(#ffee1b),to(#fff468));
background:linear-gradient(90deg,#ffee1b 0,#fff468)}
.Progressbar--green>.Progressbar-progress { 
background:#91c24e;
background:-webkit-gradient(linear,left top,right top,from(#699132),to(#91c24e));
background:linear-gradient(90deg,#699132 0,#91c24e)}
.Progressbar--blue>.Progressbar-progress { 
background:#0081ff;
background:-webkit-gradient(linear,left top,right top,from(#005ab3),to(#0081ff));
background:linear-gradient(90deg,#005ab3 0,#0081ff)}
.Progressbar--orange>.Progressbar-progress { 
background:#f63;
background:-webkit-gradient(linear,left top,right top,from(#e53900),to(#f63));
background:linear-gradient(90deg,#e53900 0,#f63)}
.Progressbar--grey>.Progressbar-progress { 
background:#444;
background:-webkit-gradient(linear,left top,right top,from(#1e1e1e),to(#444));
background:linear-gradient(90deg,#1e1e1e 0,#444)}
.Progressbar--levelColor>.Progressbar-progress[data-progressLevel=low],.Progressbar--low>.Progressbar-progress { 
background:#99755c;
background:-webkit-gradient(linear,left top,right top,from(#69503f),to(#99755c));
background:linear-gradient(90deg,#69503f 0,#99755c)}
.Progressbar--levelColor>.Progressbar-progress[data-progressLevel=medium],.Progressbar--medium>.Progressbar-progress { 
background:#c76700;
background:-webkit-gradient(linear,left top,right top,from(#7b3f00),to(#c76700));
background:linear-gradient(90deg,#7b3f00 0,#c76700)}
.Progressbar--high>.Progressbar-progress,.Progressbar--levelColor>.Progressbar-progress[data-progressLevel=high] { 
background:#1b9601;
background:-webkit-gradient(linear,left top,right top,from(#0d4a00),to(#1b9601));
background:linear-gradient(90deg,#0d4a00 0,#1b9601)}
.Progressbar--fraction .Progressbar-fraction,.Progressbar--percent .Progressbar-percent { 
display:inline-block}
.Progressbar--large .Progressbar-content { 
padding:10px}
.Progressbar--leftText .Progressbar-content { 
text-align:left;
margin-left:10px}
.Progressbar--border { 
border:1px solid rgba(177,153,127,.5)}



.Reputation-progress .Progressbar-body { 
font-size:1rem}
}
.Reputation-progress .Progressbar-body.zh-cn,.zh-cn .Reputation-progress .Progressbar-body { 
font-family:Arial,Helvetica,微软雅黑,Microsoft YaHei,Hei SC,sans-serif}
.ko-kr .Reputation-progress .Progressbar-body,.Reputation-progress .Progressbar-body.ko-kr { 
font-family:Nanum Gothic,Arial,Helvetica,맑은 고딕,Malgun Gothic,애플산돌고딕네오,AppleSDGothicNeo,애플고딕,AppleGothic,돋움,Dotum,sans-serif}
.Reputation-progress .Progressbar-body.ru-ru,.ru-ru .Reputation-progress .Progressbar-body { 
font-family:Futura Demi,Open Sans,Arial,Helvetica,sans-serif}
.Reputation-progress .Progressbar-body.zh-tw,.zh-tw .Reputation-progress .Progressbar-body { 
font-family:Arial,Helvetica,黑體-繁,Heiti TC,微軟正黑,Microsoft JhengHei,Tei TC,sans-serif}
.Reputation--DEFAULT .Reputation-standing { 
color:#0f9601}
.Reputation--EXALTED .Reputation-standing { 
color:#28a687}
.Reputation--FRIENDLY .Reputation-standing,.Reputation--HONORED .Reputation-standing,.Reputation--REVERED .Reputation-standing { 
color:#0f9601}
.Reputation--NEUTRAL .Reputation-standing { 
color:#edba03}
.Reputation--UNFRIENDLY .Reputation-standing { 
color:#cc3609}
.Reputation--HATED .Reputation-standing,.Reputation--HOSTILE .Reputation-standing { 
color:#d90e03}
.Reputation--STRANGER .Reputation-standing { 
color:#cc3609}
.Reputation--ACQUAINTANCE .Reputation-standing { 
color:#edba03}
.Reputation--BUDDY .Reputation-standing,.Reputation--FRIEND .Reputation-standing,.Reputation--GOOD_FRIEND .Reputation-standing { 
color:#0f9601}
.Reputation--BEST_FRIEND .Reputation-standing { 
color:#28a687}
.Reputation--BODYGUARD .Reputation-standing,.Reputation--TRUSTED_BODYGUARD .Reputation-standing { 
color:#0f9601}
.Reputation--PERSONAL_WINGMAN .Reputation-standing { 
color:#28a687}
.Reputation--BRONZE_ALLY .Reputation-standing,.Reputation--CHRONO-FRIEND .Reputation-standing,.Reputation--EPOCH-MENDER .Reputation-standing,.Reputation--TEMPORAL_TRAINEE .Reputation-standing,.Reputation--TIMEHOPPER .Reputation-standing,.Reputation--WHELPLING .Reputation-standing { 
color:#0f9601}
.Reputation--TIMELORD .Reputation-standing { 
color:#28a687}
.Reputation--AMBIVALENT .Reputation-standing,.Reputation--APPREHENSIVE .Reputation-standing,.Reputation--CORDIAL .Reputation-standing,.Reputation--DUBIOUS .Reputation-standing,.Reputation--TENTATIVE .Reputation-standing { 
color:#0f9601}
.Reputation--APPRECIATIVE .Reputation-standing { 
color:#28a687}
.Reputation--RANK_1 .Reputation-standing,.Reputation--RANK_2 .Reputation-standing,.Reputation--RANK_3 .Reputation-standing,.Reputation--RANK_4 .Reputation-standing,.Reputation--RANK_5 .Reputation-standing,.Reputation--RANK_6 .Reputation-standing,.Reputation--RANK_7 .Reputation-standing { 
color:#0f9601}
.Reputation--RANK_8 .Reputation-standing { 
color:#28a687}
.Reputation--wide { 
-webkit-box-sizing:border-box;
box-sizing:border-box}
.Reputation--wide:after,.Reputation--wide:before { 
content:"";
display:table;
clear:both}
.Reputation--wide .Reputation-title { 
text-align:center;
padding-top:24px}
.Reputation--wide .Reputation-name { 
clear:none;
float:left;
width:40%;
text-align:right;
padding:6.66666667px}
.Reputation--wide .Reputation-progress { 
clear:none;
float:left;
width:35%;
padding:6.66666667px}
.Reputation--wide .Reputation-standing { 
clear:none;
float:left;
width:25%;
padding:6.66666667px;
text-align:left}


.talent-tree-class,
.talent-tree-spec{
width:99%;
display:inline-grid}
.talent-tree-icon-border.unavailable div{
filter:grayscale(1)}
.talent-tree-icon-border.unavailable .hex-background div{
filter:grayscale(1)}
.talent-tree-icon-container{
display:grid;
grid-template-columns:repeat(25,.9fr);
grid-template-rows:repeat(20,.9fr);
position:relative;
height:700px}

.talent-tree-icon-container [data-col="1"] {
	grid-column: 1 / 3
}

.talent-tree-icon-container [data-col="2"] {
	grid-column: 2 / 4
}

.talent-tree-icon-container [data-col="3"] {
	grid-column: 3 / 5
}

.talent-tree-icon-container [data-col="4"] {
	grid-column: 4 / 6
}

.talent-tree-icon-container [data-col="5"] {
	grid-column: 5 / 7
}

.talent-tree-icon-container [data-col="6"] {
	grid-column: 6 / 8
}

.talent-tree-icon-container [data-col="7"] {
	grid-column: 7 / 9
}

.talent-tree-icon-container [data-col="8"] {
	grid-column: 8 / 10
}

.talent-tree-icon-container [data-col="9"] {
	grid-column: 9 / 11
}

.talent-tree-icon-container [data-col="10"] {
	grid-column: 10 / 12
}

.talent-tree-icon-container [data-col="11"] {
	grid-column: 11 / 13
}

.talent-tree-icon-container [data-col="12"] {
	grid-column: 12 / 14
}

.talent-tree-icon-container [data-col="13"] {
	grid-column: 13 / 15
}

.talent-tree-icon-container [data-col="14"] {
	grid-column: 14 / 16
}

.talent-tree-icon-container [data-col="15"] {
	grid-column: 15 / 17
}

.talent-tree-icon-container [data-col="16"] {
	grid-column: 16 / 18
}

.talent-tree-icon-container [data-col="17"] {
	grid-column: 17 / 19
}

.talent-tree-icon-container [data-col="18"] {
	grid-column: 18 / 19
}
.talent-tree-icon-container [data-col="19"] {
	grid-column: 19 / 19
}
.talent-tree-icon-container [data-col="20"] {
	grid-column: 20 / 20
}

.talent-tree-icon-container [data-row="1"] {
	grid-row: 1
}

.talent-tree-icon-container [data-row="2"] {
	grid-row: 2
}

.talent-tree-icon-container [data-row="3"] {
	grid-row: 3
}

.talent-tree-icon-container [data-row="4"] {
	grid-row: 4
}

.talent-tree-icon-container [data-row="5"] {
	grid-row: 5
}

.talent-tree-icon-container [data-row="6"] {
	grid-row: 6
}

.talent-tree-icon-container [data-row="7"] {
	grid-row: 7
}

.talent-tree-icon-container [data-row="8"] {
	grid-row: 8
}

.talent-tree-icon-container [data-row="9"] {
	grid-row: 9
}

.talent-tree-icon-container [data-row="10"] {
	grid-row: 10
}
.talent-tree-icon-container [data-row="11"] {grid-row: 11}
.talent-tree-icon-container [data-row="12"] {grid-row: 12}
.talent-tree-icon-container [data-row="13"] {grid-row: 13}
.talent-tree-icon-container [data-row="14"] {grid-row: 14}
.talent-tree-icon-container [data-row="15"] {grid-row: 15}
.talent-tree-icon-container [data-row="16"] {grid-row: 16}
.talent-tree-icon-container [data-row="17"] {grid-row: 17}
.talent-tree-icon-container [data-row="18"] {grid-row: 18}
.talent-tree-icon-container [data-row="19"] {grid-row: 19}
.talent-tree-icon-container [data-row="20"] {grid-row: 20}
[data-line-row="5"]{
grid-row:8}
[data-line-row]{
grid-column:1/-1}
[data-line-row="8"]{
grid-row:14}
.talent-tree-required-line{
stroke:#151515;
stroke-width:3;
z-index:1}
svg{
width:100%;
height:100%}
.talent-tree-icon-wrapper{
position:relative;
top:-10px}
.talent-tree-icon-wrapper svg{
position:absolute;
top:0;
right:0;
bottom:0;
left:0}
.talent-tree-icon-border.available .hex{
background:rgba(64,
191,
64,
.8)}
.talent-tree-icon-border.selected .hex{
background:#ffda24}
.talent-tree-icon-border.unavailable .hex{
background-color:#a9a9a9}
.hex{
display:block;
margin:0 auto;
position:relative;
width:30px;
height:30.64px;
box-sizing:border-box;
}
.hex-background{
position:absolute;
background-color:orange;
width:30px;
height:23.64px;
}
.hex img{
position:absolute;
width:100%;
height:100%;
object-fit:cover;
-webkit-clip-path:polygon(0% 50%,
25% 0,
75% 0,
100% 50%,
75% 100%,
25% 100%);
-moz-clip-path:polygon(0% 50%,
25% 0,
75% 0,
100% 50%,
75% 100%,
25% 100%)}
.talent-tree-icon-image-left{
width:50%;
position:absolute;
left:0;
height:30px;
background-size:30px 30px}
.talent-tree-icon-image-right{
width:50%;
position:absolute;
right:0;
height:30px;
background-size:30px 30px}
.talent-tree-point-line hr{
border:0;
border-top:1px dotted red;
color:#000;
background-color:#000;
height:1px;
width:200%}
.talent-tree-point-line span{
position:relative;
left:90%}
.talent-tree-dual-container{
position:absolute;
top:-40px}
.talent-tree-dual-container .talent-tree-icon-border.circle{
display:inline-block}
.talent-tree-dual-container .talent-tree-icon-image{
width:36px;
height:36px;
background-size:100%;
border-radius:8px;
margin:5px}
.p-talentCalc-spec-nav li{
display:inline-block;
float:none;
padding:5px}
.p-talentCalc-spec-nav h3{
clear:none}
.p-talentCalc-spec-nav ul{
float:right;
display:contents}
.talent-tree-required-line{
stroke:#a9a9a9}
.talent-tree-required-line.selected,
.talent-tree-required-line.available{
stroke:#ffda24!important}
.p-talentCalc-spec-nav{
height:100px;
text-align:center}
.p-newTalentCalc-content{
background-size:cover;
background-repeat:no-repeat;
background-position-x:right}
.talent-calc-bg-druid-balance{
background-image:url(../images/new-talent-calc/talentbg-druid-balance.jpg)}
.talent-calc-bg-druid-feral{
background-image:url(../images/new-talent-calc/talentbg-druid-feral.jpg)}
.talent-calc-bg-druid-guardian{
background-image:url(../images/new-talent-calc/talentbg-druid-guardian.jpg)}
.talent-calc-bg-druid-restoration{
background-image:url(../images/new-talent-calc/talentbg-druid-restoration.jpg)}
.talent-calc-bg-death-knight-blood,
.talent-calc-bg-deathknight-blood{
background-image:url(../images/new-talent-calc/talentbg-death-knight-blood.jpg)}
.talent-calc-bg-death-knight-frost,
.talent-calc-bg-deathknight-frost{
background-image:url(../images/new-talent-calc/talentbg-death-knight-frost.jpg)}
.talent-calc-bg-death-knight-unholy,
.talent-calc-bg-deathknight-unholy{
background-image:url(../images/new-talent-calc/talentbg-death-knight-unholy.jpg)}
.talent-calc-bg-demon-hunter-havoc,
.talent-calc-bg-demonhunter-havoc{
background-image:url(../images/new-talent-calc/talentbg-demon-hunter-havoc.jpg)}
.talent-calc-bg-demon-hunter-vengeance,
.talent-calc-bg-demonhunter-vengeance{
background-image:url(../images/new-talent-calc/talentbg-demon-hunter-vengeance.jpg)}

.talent-calc-bg-evoker-devastation{
background-image:url(../images/new-talent-calc/talentbg-evoker-devastation.jpg)}
.talent-calc-bg-evoker-preservation{
background-image:url(../images/new-talent-calc/talentbg-evoker-preservation.jpg)}
.talent-calc-bg-evoker-augmentation{
background-image:url(../images/new-talent-calc/talentbg-evoker-augmentation.jpg)}

.talent-calc-bg-hunter-beast-mastery,
.talent-calc-bg-hunter-beastmastery{
background-image:url(../images/new-talent-calc/talentbg-hunter-beastmastery.jpg)}
.talent-calc-bg-hunter-marksmanship{
background-image:url(../images/new-talent-calc/talentbg-hunter-marksmanship.jpg)}
.talent-calc-bg-hunter-survival{
background-image:url(../images/new-talent-calc/talentbg-hunter-survival.jpg)}
.talent-calc-bg-mage-arcane{
background-image:url(../images/new-talent-calc/talentbg-mage-arcane.jpg)}
.talent-calc-bg-mage-fire{
background-image:url(../images/new-talent-calc/talentbg-mage-fire.jpg)}
.talent-calc-bg-mage-frost{
background-image:url(../images/new-talent-calc/talentbg-mage-frost.jpg)}
.talent-calc-bg-monk-brewmaster{
background-image:url(../images/new-talent-calc/talentbg-monk-brewmaster.jpg)}
.talent-calc-bg-monk-mistweaver{
background-image:url(../images/new-talent-calc/talentbg-monk-mistweaver.jpg)}
.talent-calc-bg-monk-windwalker{
background-image:url(../images/new-talent-calc/talentbg-monk-windwalker.jpg)}
.talent-calc-bg-paladin-holy{
background-image:url(../images/new-talent-calc/talentbg-paladin-holy.jpg)}
.talent-calc-bg-paladin-protection{
background-image:url(../images/new-talent-calc/talentbg-paladin-protection.jpg)}
.talent-calc-bg-paladin-retribution{
background-image:url(../images/new-talent-calc/talentbg-paladin-retribution.jpg)}
.talent-calc-bg-priest-holy{
background-image:url(../images/new-talent-calc/talentbg-priest-holy.jpg)}
.talent-calc-bg-priest-shadow{
background-image:url(../images/new-talent-calc/talentbg-priest-shadow.jpg)}
.talent-calc-bg-priest-discipline{
background-image:url(../images/new-talent-calc/talentbg-priest-discipline.jpg)}
.talent-calc-bg-rogue-assassination{
background-image:url(../images/new-talent-calc/talentbg-rogue-assassination.jpg)}
.talent-calc-bg-rogue-outlaw{
background-image:url(../images/new-talent-calc/talentbg-rogue-outlaw.jpg)}
.talent-calc-bg-rogue-subtlety{
background-image:url(../images/new-talent-calc/talentbg-rogue-subtlety.jpg)}
.talent-calc-bg-shaman-elemental{
background-image:url(../images/new-talent-calc/talentbg-shaman-elemental.jpg)}
.talent-calc-bg-shaman-enhancement{
background-image:url(../images/new-talent-calc/talentbg-shaman-enhancement.jpg)}
.talent-calc-bg-shaman-restoration{
background-image:url(../images/new-talent-calc/talentbg-shaman-restoration.jpg)}
.talent-calc-bg-warlock-affliction{
background-image:url(../images/new-talent-calc/talentbg-warlock-affliction.jpg)}
.talent-calc-bg-warlock-demonology{
background-image:url(../images/new-talent-calc/talentbg-warlock-demonology.jpg)}
.talent-calc-bg-warlock-destruction{
background-image:url(../images/new-talent-calc/talentbg-warlock-destruction.jpg)}
.talent-calc-bg-warrior-arms{
background-image:url(../images/new-talent-calc/talentbg-warrior-arms.jpg)}
.talent-calc-bg-warrior-fury{
background-image:url(../images/new-talent-calc/talentbg-warrior-fury.jpg)}
.talent-calc-bg-warrior-protection{
background-image:url(../images/new-talent-calc/talentbg-warrior-protection.jpg)}
.p-talentCalc-a .p-talentCalc-content h2{
margin-left:15px}
.p-talentCalc-a .p-talentCalc-content h2{
margin-left:15px}
.talent-tree-points-class{
margin-left:15px}
.talent-tree-point-block{
background-color:#000;
width:2em;
position: absolute;
    bottom: -13px;
    right: -13px;
border-radius:5px;
color:#fff;
text-align:center;
border:1px solid grey}
.p-newTalentCalc-content{
		padding: 10px;
width:99%}
.talent-tree-class h2,
.talent-tree-spec h2{
	color:#fff;
	text-align: center;
}
.talent-tree-class span,
.talent-tree-spec span{
color:#fff;
font-size: 12px;}
.talent-tree-point-line span{
color:#fff}
.talent-tree-header span{
margin-left:15px;
padding-top:17px}
.talent-calc-bg-warrior-arms .talent-tree-spec .talent-tree-icon-container,
.talent-calc-bg-warrior-fury .talent-tree-spec .talent-tree-icon-container{
grid-template-columns:repeat(20,
36px)!important}
.talent-calc-bg-paladin .talent-tree-icon-border{
margin-left:-50px}
.talent-calc-bg-deathknight-frost .talent-tree-spec .talent-tree-icon-container{
grid-template-columns:repeat(20,
30px)!important}
.talent-calc-bg-rogue .talent-tree-class .talent-tree-icon-container{
margin-left:10px}

.dragonflight-talent-tree-talent [data-col="1"] {
	grid-column: 1 / 3
}

.dragonflight-talent-tree-talent [data-col="2"] {
	grid-column: 2 / 4
}

.dragonflight-talent-tree-talent [data-col="3"] {
	grid-column: 3 / 5
}

.dragonflight-talent-tree-talent [data-col="4"] {
	grid-column: 4 / 6
}

.dragonflight-talent-tree-talent [data-col="5"] {
	grid-column: 5 / 7
}

.dragonflight-talent-tree-talent [data-col="6"] {
	grid-column: 6 / 8
}

.dragonflight-talent-tree-talent [data-col="7"] {
	grid-column: 7 / 9
}

.dragonflight-talent-tree-talent [data-col="8"] {
	grid-column: 8 / 10
}

.dragonflight-talent-tree-talent [data-col="9"] {
	grid-column: 9 / 11
}

.dragonflight-talent-tree-talent [data-col="10"] {
	grid-column: 10 / 12
}

.dragonflight-talent-tree-talent [data-col="11"] {
	grid-column: 11 / 13
}

.dragonflight-talent-tree-talent [data-col="12"] {
	grid-column: 12 / 14
}

.dragonflight-talent-tree-talent [data-col="13"] {
	grid-column: 13 / 15
}

.dragonflight-talent-tree-talent [data-col="14"] {
	grid-column: 14 / 16
}

.dragonflight-talent-tree-talent [data-col="15"] {
	grid-column: 15 / 17
}

.dragonflight-talent-tree-talent [data-col="16"] {
	grid-column: 16 / 18
}

.dragonflight-talent-tree-talent [data-col="17"] {
	grid-column: 17 / 19
}

.dragonflight-talent-tree-talent [data-col="18"] {
	grid-column: 18 / 19
}
.dragonflight-talent-tree-talent [data-col="19"] {
	grid-column: 19 / 19
}
.dragonflight-talent-tree-talent [data-col="20"] {
	grid-column: 20 / 20
}

.dragonflight-talent-tree-talent [data-row="1"] {
	grid-row: 1
}

.dragonflight-talent-tree-talent [data-row="2"] {
	grid-row: 2
}

.dragonflight-talent-tree-talent [data-row="3"] {
	grid-row: 3
}

.dragonflight-talent-tree-talent [data-row="4"] {
	grid-row: 4
}

.dragonflight-talent-tree-talent [data-row="5"] {
	grid-row: 5
}

.dragonflight-talent-tree-talent [data-row="6"] {
	grid-row: 6
}

.dragonflight-talent-tree-talent [data-row="7"] {
	grid-row: 7
}

.dragonflight-talent-tree-talent [data-row="8"] {
	grid-row: 8
}

.dragonflight-talent-tree-talent [data-row="9"] {
	grid-row: 9
}

.dragonflight-talent-tree-talent [data-row="10"] {
	grid-row: 10
}
.dragonflight-talent-tree-talent [data-row="11"] {grid-row: 11}
.dragonflight-talent-tree-talent [data-row="12"] {grid-row: 12}
.dragonflight-talent-tree-talent [data-row="13"] {grid-row: 13}
.dragonflight-talent-tree-talent [data-row="14"] {grid-row: 14}
.dragonflight-talent-tree-talent [data-row="15"] {grid-row: 15}
.dragonflight-talent-tree-talent [data-row="16"] {grid-row: 16}
.dragonflight-talent-tree-talent [data-row="17"] {grid-row: 17}
.dragonflight-talent-tree-talent [data-row="18"] {grid-row: 18}
.dragonflight-talent-tree-talent [data-row="19"] {grid-row: 19}
.dragonflight-talent-tree-talent [data-row="20"] {grid-row: 20}

.grid-container {
  display: grid;
  	grid-template-columns: repeat(10,1fr);
	grid-template-rows: repeat(20,1fr);
  gap: 5px;
  background-color: #2196F3;
  padding: 5px;
}

.dragonflight-talent-tree{
position:relative;
user-select:none
}

.dragonflight-talent-tree-space{
position:relative
}

.dragonflight-talent-tree-grid-class {
	display: grid;
	grid-template-columns: repeat(10, 2fr);
	grid-template-rows: repeat(10, 0.2fr);
	/*position: absolute;*/
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	justify-items: center;
}

.dragonflight-talent-tree-grid-spec {
    display: grid;
    grid-template-columns: repeat(10, 2fr);
    grid-template-rows: repeat(10, 0.2fr);
    /* position: absolute; */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    justify-items: center;
}

.dragonflight-talent-tree-grid-hero {
display: grid;
    grid-template-columns: repeat(5, 0.9fr);
    grid-template-rows: repeat(6, 0.1fr);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* width: 100%; */
    align-content: space-around;
    justify-content: center;
    align-items: center;
    justify-items: stretch;
}

.dragonflight-talent-tree-grid[data-selecting] .dragonflight-talent-tree-talent{
pointer-events:none
}

.dragonflight-talent-tree-talent{
/*filter:grayscale(100%);*/
margin: 7% 7%;
position:relative;
z-index:20
}
.hex-frame {
	overflow: hidden;
}
.talent-tree-icons
{
	position:relative;
}

.dragonflight-talent-tree [data-column="1"] { grid-column: 1 / 3 }
.dragonflight-talent-tree [data-column="2"] { grid-column: 2 / 4 }
.dragonflight-talent-tree [data-column="3"] { grid-column: 3 / 5 }
.dragonflight-talent-tree [data-column="4"] { grid-column: 4 / 6 }
.dragonflight-talent-tree [data-column="5"] { grid-column: 5 / 7 }
.dragonflight-talent-tree [data-column="6"] { grid-column: 6 / 8 }
.dragonflight-talent-tree [data-column="7"] { grid-column: 7 / 9 }
.dragonflight-talent-tree [data-column="8"] { grid-column: 8 / 10 }
.dragonflight-talent-tree [data-column="9"] { grid-column: 9 / 11 }
.dragonflight-talent-tree [data-column="10"] { grid-column: 10 / 12 }
.dragonflight-talent-tree [data-column="11"] { grid-column: 11 / 13 }
.dragonflight-talent-tree [data-column="12"] { grid-column: 12 / 14 }
.dragonflight-talent-tree [data-column="13"] { grid-column: 13 / 15 }
.dragonflight-talent-tree [data-column="14"] { grid-column: 14 / 16 }
.dragonflight-talent-tree [data-column="15"] { grid-column: 15 / 17 }
.dragonflight-talent-tree [data-column="16"] { grid-column: 16 / 18 }
.dragonflight-talent-tree [data-column="17"] { grid-column: 17 / 19 }
.dragonflight-talent-tree [data-row="1"] { grid-row: 1 }
.dragonflight-talent-tree [data-row="2"] { grid-row: 2 }
.dragonflight-talent-tree [data-row="3"] { grid-row: 3 }
.dragonflight-talent-tree [data-row="4"] { grid-row: 4 }
.dragonflight-talent-tree [data-row="5"] { grid-row: 5 }
.dragonflight-talent-tree [data-row="6"] { grid-row: 6 }
.dragonflight-talent-tree [data-row="7"] { grid-row: 7 }
.dragonflight-talent-tree [data-row="8"] { grid-row: 8 }
.dragonflight-talent-tree [data-row="9"] { grid-row: 9 }
.dragonflight-talent-tree [data-row="10"] { grid-row: 10 }
.dragonflight-talent-tree [data-row="11"] { grid-row: 11 }
.dragonflight-talent-tree [data-row="12"] { grid-row: 12 }

.dragonflight-talent-trees-tree {
	/*margin: auto;
	max-width: 600px;*/
	margin: 0% auto;
}

.talent-tree-icon-border{
width:34px;
height:34px}
.talent-tree-icon-image{
width:30px;
height:30px}
.talent-tree-icon-border.unavailable div{
filter:grayscale(1)}
.talent-tree-icon-border.unavailable .hex-background div{
filter:grayscale(1)}
.talent-tree-icon-border{
	z-index:2;
	border: solid 2px gray;
    border-radius: 10px;
	}
.talent-tree-icon-border.selected{
	border: solid 2px yellow !important;
    border-radius: 10px;}

.dragonflight-talent-trees-tree-background {
	/*flex: 1;*/
	position: relative;
	width: 40%;
}

.tree-area-hero {
	width: 20% !important;
}


.dragonflight-talent-trees {
	display: flex;
	flex-flow: row nowrap;
	gap: 20px;
	justify-content: center;
	padding: 30px 0;
	position: relative;
	background-size: cover;
	background-repeat: no-repeat;
	background-position-x: right;
}
.dragonflight-talent-trees {
	margin: 0% auto;
}


.dragonflight-talent-tree-space svg {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}
svg {
	width: 100%;
	height: 100%;
}
svg {
	overflow: hidden;
	vertical-align: middle;
}


body[aria-hidden]{
text-align:left;
padding:0;
margin:0;
position:static}
.footer-ad:before{
content:"";
display:table}
.footer-ad:after{
content:"";
display:table;
clear:both}
.ie7 .footer-ad,
.ie8 .footer-ad{
zoom:1}
.footer-ad{
text-align:center;
width:1000px;
margin:0 auto}
.footer-ad-contentAd{
width:670px;
height:250px;
float:left}
.footer-ad-medRect{
width:300px;
height:250px;
float:left;
margin-left:2.05%}
.footer-ad-leaderboard{
clear:both;
padding:20px 0}
.footer-ad-leaderboard>iframe,
.footer-ad-leaderboard>object,
.footer-ad-leaderboard>embed,
.footer-ad-leaderboard>img,
.footer-ad-leaderboard>div,
.footer-ad-leaderboard>span{
display:block;
margin:0 auto}
body:not(.body-home-index) .p-header-c .logo>a{
height:100px}
body:not(.body-home-index) .p-header-c .b-search-a .b-search-input{
width:200px}
body:not(.body-home-index) form#global-search-form{
margin-top:40px}
body:not(.body-home-index) .atf-ad-leaderboard{
float:left;
margin-top:10px}
body:not(.body-home-index) .p-nav-a:after{
clear:both}
.p-talentCalc-nav h3{
font-size:30px;
padding-bottom:.7em}
.tc-choose-class-container{
display:-moz-inline-box;
-moz-box-orient:vertical;
display:block;
vertical-align:middle;
-webkit-border-radius:3px;
-moz-border-radius:3px;
-ms-border-radius:3px;
-o-border-radius:3px;
border-radius:3px;
-webkit-box-shadow:0 1px 1px rgba(0,
0,
0,
.5);
-moz-box-shadow:0 1px 1px rgba(0,
0,
0,
.5);
-ms-box-shadow:0 1px 1px rgba(0,
0,
0,
.5);
-o-box-shadow:0 1px 1px rgba(0,
0,
0,
.5);
box-shadow:0 1px 1px rgba(0,
0,
0,
.5);
overflow:hidden;
padding:1px;
background-color:#000;
background-position:1px 1px;
background-repeat:no-repeat;
border:1px solid #434445;
border-bottom-color:#2f3032;
border-top-color:#b1b2b4;
height:60px}
.p-talentCalc-nav .b-list-a.b-list_inlineBlock .b-list-item{
cursor:pointer;
width:60px;
vertical-align:top}
.p-talentCalc-nav .b-list-item:hover .tc-choose-class-container,
.p-talentCalc-nav .selected .tc-choose-class-container{
opacity:1!important}
.p-talentCalc-nav[data-chosen=false] .tc-choose-class-container{
opacity:.85}
.p-talentCalc-nav[data-chosen=true] .tc-choose-class-container{
opacity:.3}
.tc-loading{
background-image:url(../images/talent-calc/ajax.gif);
width:128px;
height:128px;
display:block;
margin:auto;
margin-top:40px;
margin-bottom:40px}
.p-talentCalc-content .level{
width:124px}
.p-talentCalc-content .talent{
width:234px}
.p-talentCalc-a .row li.selected table{
border-color:#000;
background:#252525;
-webkit-box-shadow:inset 0 0 5px rgba(255,
255,
255,
.3);
-moz-box-shadow:inset 0 0 5px rgba(255,
255,
255,
.3);
-ms-box-shadow:inset 0 0 5px rgba(255,
255,
255,
.3);
-o-box-shadow:inset 0 0 5px rgba(255,
255,
255,
.3);
box-shadow:inset 0 0 5px rgba(255,
255,
255,
.3)}
.p-talentCalc-secondary[data-haschosen=true] .collapsed p{
display:none}
.p-talentCalc-secondary h4{
font-size:16px}
.p-talentCalc-secondary .collapsed h4{
line-height:40px;
margin:0}
.p-talentCalc-secondary[data-haschosen=true] .collapsed{
margin-bottom:0}
.p-talentCalc-secondary[data-haschosen=true] .collapsed header{
padding:2px 10px}
.p-talentCalc-secondary .expanded{
margin-top:2px;
margin-bottom:2px!important}
.p-talentCalc-secondary .spec{
cursor:auto!important;
padding:0!important;
margin-bottom:0}
.p-talentCalc-secondary .spec header{
cursor:pointer;
padding:10px}
.p-talentCalc-secondary .spec.expanded{
padding-bottom:10px!important}
.p-talentCalc-secondary .expanded .spells td a{
display:block;
color:White;
line-height:18px}
.p-talentCalc-secondary .expanded .spells td a:hover{
text-decoration:none;
font-weight:700}
.p-talentCalc-secondary .spell-filters span{
display:inline-block;
padding-right:10px;
cursor:pointer}
.p-talentCalc-secondary .spell-filters span:hover{
text-decoration:underline}
.p-talentCalc-secondary .spell-filters span.active{
font-weight:700;
cursor:default;
text-shadow:-1px 0 #008}
.p-talentCalc-secondary .spell-filters span.active:hover{
text-decoration:none}
.p-talentCalc-a .row li.type{
line-height:60px;
height:60px}
#glyph-picker-container{
position:relative}
.p-talentCalc-a .p-talentCalc-content h2{
margin-bottom:.5em}
.p-talentCalc-a .p-talentCalc-reset,
.p-talentCalc-a .p-talentCalc-footer .u-button-z{
font-size:11px;
padding:2px 8px;
margin-top:8px}
.p-talentCalc-a .p-talentCalc-footer .u-button-z{
margin-top:14px}
#glyph-picker{
position:absolute;
background-color:White;
border:3px solid #000;
bottom:-120px;
box-shadow:0 0 3px 3px rgba(0,
0,
0,
.8);
position:absolute;
width:1050px;
z-index:100;
left:100px;
border-radius:10px;
padding:10px;
display:none}
#glyph-picker .table-container{
max-height:600px;
overflow:auto}
#glyph-picker table td.name{
white-space:nowrap;
cursor:pointer}
#glyph-picker table td.name:hover{
background:#c7c7c7}
#glyph-picker table td.description{
font-size:90%;
text-align:left}
#glyph-picker h2{
text-align:center;
font-size:200%;
border:0;
margin-bottom:10px}
#glyph-picker .close{
background-color:Black;
-webkit-border-radius:25px;
-moz-border-radius:25px;
border-radius:25px;
color:White;
cursor:pointer;
display:inline-block;
font-size:22px;
font-weight:700;
padding:5px 8px;
position:absolute;
right:-12px;
top:-12px;
box-shadow:0 0 1px 1px rgba(0,
0,
0,
.8)}
.p-talentCalc-a .row li.glyph{
width:333px}
.p-talentCalc-a .row li.type{
width:257px}
.p-talentCalc-a .row li.glyph.selected a{
border:0;
box-shadow:none}
.tc-sprite{
background-repeat:no-repeat;
overflow:hidden;
display:inline-block;
text-indent:-999999px}
.tc-sprite-container{
display:inline-block}
.p-talentCalc-a .spells{
height:auto}
.p-talentCalc-a .p-talentCalc-secondary div.expanded header p{
font-size:85%;
line-height:1.4}
#glyph-picker-container a:hover{
text-decoration:none;
color:#4f6e33}

.talent-tree-header {
	padding-top: 10px;
}

.GameIcon--WARRIOR .GameIcon-icon {
	background-image: url(../components/Class/GameIcon-class-warrior.jpg)
}

.GameIcon--WARLOCK .GameIcon-icon {
	background-image: url(../components/Class/GameIcon-class-warlock.jpg)
}

.GameIcon--SHAMAN .GameIcon-icon {
	background-image: url(../components/Class/GameIcon-class-shaman.jpg)
}

.GameIcon--ROGUE .GameIcon-icon {
	background-image: url(../components/Class/GameIcon-class-rogue.jpg)
}

.GameIcon--PRIEST .GameIcon-icon {
	background-image: url(../components/Class/GameIcon-class-priest.jpg)
}

.GameIcon--PALADIN .GameIcon-icon {
	background-image: url(../components/Class/GameIcon-class-paladin.jpg)
}

.GameIcon--MONK .GameIcon-icon {
	background-image: url(../components/Class/GameIcon-class-monk.jpg)
}

.GameIcon--MAGE .GameIcon-icon {
	background-image: url(../components/Class/GameIcon-class-mage.jpg)
}

.GameIcon--HUNTER .GameIcon-icon {
	background-image: url(../components/Class/GameIcon-class-hunter.jpg)
}

.GameIcon--DRUID .GameIcon-icon {
	background-image: url(../components/Class/GameIcon-class-druid.jpg)
}

.GameIcon--DEATHKNIGHT .GameIcon-icon {
	background-image: url(../components/Class/GameIcon-class-death-knight.jpg)
}

.GameIcon--DEMONHUNTER .GameIcon-icon {
	background-image: url(../components/Class/GameIcon-class-demon-hunter.jpg)
}

.GameIcon--EVOKER .GameIcon-icon {
	background-image: url(../components/Class/GameIcon-class-evoker.png)
}

.GameIcon--vector {
	border: none;
	background-color: transparent
}

.GameIcon--vector .GameIcon-icon {
	border: none;
	background-color: transparent;
	border-radius: 0
}

.GameIcon--vector.GameIcon--WARRIOR .GameIcon-icon {
	background-image: url(../assets/images/GameIcon-class-warrior-vector.png)
}

.GameIcon--vector.GameIcon--WARLOCK .GameIcon-icon {
	background-image: url(../assets/images/GameIcon-class-warlock-vector.png)
}

.GameIcon--vector.GameIcon--SHAMAN .GameIcon-icon {
	background-image: url(../assets/images/GameIcon-class-shaman-vector.png)
}

.GameIcon--vector.GameIcon--ROGUE .GameIcon-icon {
	background-image: url(../assets/images/GameIcon-class-rogue-vector.png)
}

.GameIcon--vector.GameIcon--PRIEST .GameIcon-icon {
	background-image: url(../assets/images/GameIcon-class-priest-vector.png)
}

.GameIcon--vector.GameIcon--PALADIN .GameIcon-icon {
	background-image: url(../assets/images/GameIcon-class-paladin-vector.png)
}

.GameIcon--vector.GameIcon--MONK .GameIcon-icon {
	background-image: url(../assets/images/GameIcon-class-monk-vector.png)
}

.GameIcon--vector.GameIcon--MAGE .GameIcon-icon {
	background-image: url(../assets/images/GameIcon-class-mage-vector.png)
}

.GameIcon--vector.GameIcon--HUNTER .GameIcon-icon {
	background-image: url(../assets/images/GameIcon-class-hunter-vector.png)
}

.GameIcon--vector.GameIcon--DRUID .GameIcon-icon {
	background-image: url(../assets/images/GameIcon-class-druid-vector.png)
}

.GameIcon--vector.GameIcon--DEATHKNIGHT .GameIcon-icon {
	background-image: url(../assets/images/GameIcon-class-death-knight-vector.png)
}

.GameIcon--vector.GameIcon--DEMONHUNTER .GameIcon-icon {
	background-image: url(../assets/images/GameIcon-class-demon-hunter-vector.png)
}

.GameIcon--zandalaritroll_male .GameIcon-icon {
	background-image: url(../components/Race/zandalaritroll_male.jpg)
}

.GameIcon--zandalaritroll_female .GameIcon-icon {
	background-image: url(../components/Race/zandalaritroll_female.jpg)
}

.GameIcon--voidelf_male .GameIcon-icon {
	background-image: url(../components/Race/voidelf_male.jpg)
}

.GameIcon--voidelf_female .GameIcon-icon {
	background-image: url(../components/Race/voidelf_female.jpg)
}

.GameIcon--nightborne_male .GameIcon-icon {
	background-image: url(../components/Race/nightborne_male.jpg)
}

.GameIcon--vulpera_male .GameIcon-icon {
	background-image: url(../components/Race/vulpera_male.jpg)
}

.GameIcon--vulpera_female .GameIcon-icon {
	background-image: url(../components/Race/vulpera_female.jpg)
}

.GameIcon--nightborne_female .GameIcon-icon {
	background-image: url(../components/Race/nightborne_female.jpg)
}

.GameIcon--magharorc_male .GameIcon-icon {
	background-image: url(../components/Race/magharorc_male.jpg)
}

.GameIcon--magharorc_female .GameIcon-icon {
	background-image: url(../components/Race/magharorc_female.jpg)
}

.GameIcon--lightforgeddraenei_male .GameIcon-icon {
	background-image: url(../components/Race/lightforgeddraenei_male.jpg)
}

.GameIcon--lightforgeddraenei_female .GameIcon-icon {
	background-image: url(../components/Race/lightforgeddraenei_female.jpg)
}

.GameIcon--kultiran_male .GameIcon-icon {
	background-image: url(../components/Race/kultiran_male.jpg)
}

.GameIcon--kultiran_female .GameIcon-icon {
	background-image: url(../components/Race/kultiran_female.jpg)
}

.GameIcon--highmountaintauren_male .GameIcon-icon {
	background-image: url(../components/Race/highmountaintauren_male.jpg)
}

.GameIcon--highmountaintauren_female .GameIcon-icon {
	background-image: url(../components/Race/highmountaintauren_female.jpg)
}

.GameIcon--darkirondwarf_male .GameIcon-icon {
	background-image: url(../components/Race/darkirondwarf_male.jpg)
}

.GameIcon--darkirondwarf_female .GameIcon-icon {
	background-image: url(../components/Race/darkirondwarf_female.jpg)
}

.GameIcon--goblin_male .GameIcon-icon {
	background-image: url(../components/Race/goblin_male.jpg)
}

.GameIcon--goblin_female .GameIcon-icon {
	background-image: url(../components/Race/goblin_female.jpg)
}

.GameIcon--bloodelf_male .GameIcon-icon {
	background-image: url(../components/Race/bloodelf_male.jpg)
}

.GameIcon--bloodelf_female .GameIcon-icon {
	background-image: url(../components/Race/bloodelf_female.jpg)
}

.GameIcon--troll_male .GameIcon-icon {
	background-image: url(../components/Race/troll_male.jpg)
}

.GameIcon--troll_female .GameIcon-icon {
	background-image: url(../components/Race/troll_female.jpg)
}

.GameIcon--tauren_male .GameIcon-icon {
	background-image: url(../components/Race/tauren_male.jpg)
}

.GameIcon--tauren_female .GameIcon-icon {
	background-image: url(../components/Race/tauren_female.jpg)
}

.GameIcon--undead_male .GameIcon-icon {
	background-image: url(../components/Race/undead_male.jpg)
}

.GameIcon--undead_female .GameIcon-icon {
	background-image: url(../components/Race/undead_female.jpg)
}

.GameIcon--pandaren_male .GameIcon-icon {
	background-image: url(../components/Race/pandaren_male.jpg)
}

.GameIcon--pandaren_female .GameIcon-icon {
	background-image: url(../components/Race/pandaren_female.jpg)
}

.GameIcon--worgen_male .GameIcon-icon {
	background-image: url(../components/Race/worgen_male.jpg)
}

.GameIcon--worgen_female .GameIcon-icon {
	background-image: url(../components/Race/worgen_female.jpg)
}

.GameIcon--draenei_male .GameIcon-icon {
	background-image: url(../components/Race/draenei_male.jpg)
}

.GameIcon--draenei_female .GameIcon-icon {
	background-image: url(../components/Race/draenei_female.jpg)
}

.GameIcon--gnome_male .GameIcon-icon {
	background-image: url(../components/Race/gnome_male.jpg)
}

.GameIcon--gnome_female .GameIcon-icon {
	background-image: url(../components/Race/gnome_female.jpg)
}

.GameIcon--nightelf_male .GameIcon-icon {
	background-image: url(../components/Race/nightelf_male.jpg)
}

.GameIcon--nightelf_female .GameIcon-icon {
	background-image: url(../components/Race/nightelf_female.jpg)
}

.GameIcon--dwarf_male .GameIcon-icon {
	background-image: url(../components/Race/dwarf_male.jpg)
}

.GameIcon--dwarf_female .GameIcon-icon {
	background-image: url(../components/Race/dwarf_female.jpg)
}

.GameIcon--human_male .GameIcon-icon {
	background-image: url(../components/Race/human_male.jpg)
}

.GameIcon--human_female .GameIcon-icon {
	background-image: url(../components/Race/human_female.jpg)
}

.GameIcon--orc_male .GameIcon-icon {
	background-image: url(../components/Race/orc_male.jpg)
}

.GameIcon--orc_female .GameIcon-icon {
	background-image: url(../components/Race/orc_female.jpg)
}

.GameIcon--RACE_GENDER_UNKNOWN .GameIcon-icon {
	background-image: url(../components/Race/RACE_GENDER_UNKNOWN.jpg)
}

.GameIcon--UNKNOWN .GameIcon-icon {
	background-image: url(../components/Race/role-UNKNOWN.png)
}

.GameIcon--dracthyr_male .GameIcon-icon {
	background-image: url(../components/Race/dracthyr_male.jpg)
}

.GameIcon--dracthyr_female .GameIcon-icon {
	background-image: url(../components/Race/dracthyr_female.jpg)
}

.GameIcon--TANK .GameIcon-icon {
	background-image: url(../components/Race/role-TANK.png)
}

.GameIcon--HEALER .GameIcon-icon {
	background-image: url(../components/Race/role-HEALER.png)
}

.GameIcon--DAMAGE .GameIcon-icon {
	background-image: url(../components/Race/role-DAMAGE.png)
}
.Character--border-color-DEATHKNIGHT {
	border-color: #c41e3b !important;
}

.Character--border-color-DEMONHUNTER {
	border-color: #a330c9 !important;
}

.Character--border-color-DRUID {
	border-color: #ff7c0a !important;
}

.Character--border-color-HUNTER {
	border-color: #aad372 !important;
}

.Character--border-color-MAGE {
	border-color: #68ccef !important;
}

.Character--border-color-MONK {
	border-color: #00ffba !important;
}

.Character--border-color-PALADIN {
	border-color: #f48cba !important;
}

.Character--border-color-PRIEST {
	border-color: #f0ebe0 !important;
}

.Character--border-color-ROGUE {
	border-color: #fff468 !important;
}

.Character--border-color-SHAMAN {
	border-color: #2359ff !important;
}

.Character--border-color-WARLOCK {
	border-color: #9382c9 !important;
}

.Character--border-color-WARRIOR {
	border-color: #c69b6d !important;
}
.List>.List-item {
	vertical-align: middle;
	padding-right: 4px;
}
.Media {
	display: table;
	width: 100%;
	border-collapse: collapse;
}












.mb-4c {
	margin-bottom: 1.5rem!important;
}

.profile-image {
	width: auto;
	height: 116px;
	aspect-ratio: 1;
	object-fit: cover;
	margin: 0 10px;
	border: solid 1px;
}
.profile-image-region {
	height: 30px;
}
.gap-12 {
    gap: 12px;
}

.gap-11 {
    gap: 11px;
}

.gap-48 {
    gap: 48px;
}

/* -- */
.top-nav {
    padding: 10px 0;
}

/* --- */

.top-nav P {
    margin: 0;
}

.navbar {
    border-top: 1px solid #444;
    border-bottom: 1px solid #444;
}

.navbar button {
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.nav-link:focus, .nav-link:hover {
    color: gray !important;
}

.text-a {
    color: #FFF;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.text-b {
    color: #FFF;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.text-c {
    color: #FFF;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.btn-danger {
    padding: 5px 24px;
    height: 40px;
    border-radius: 4px;
    background: #D51616;
}

/* bannar */

.border-grey {
    border-radius: 8px;
    border: 1px solid #444;
}

.form-a {
    height: 64px;
    padding: 12px 16px;
}


.form-a input {
    border-radius: 4px;
    border: 2px solid #D51616;
    width: 100%;
    height: 40px;
    padding: 9px;
    color: #A1A1A1;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}


.bg-darkgrey {
    background: #202020 !important;
}

.bg-jetgrey {
    background: #181818;
}

.bg-transparents {
    background: rgba(32, 32, 32, 0.80);
}

.bg-img {
    background-image: url(../Images/image\ \(3\).png);
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
}

.profie {
    height: 136px;
    padding: 18px 23px;
}

.profie span {
    color: #D51616;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    padding-left: 8px;
}

.profie button {
    height: 40px;
    margin-left: 8px;
    color: #FFF;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.profie button:nth-child(2) {
    background: #8D44F7;
    border: #8D44F7;
}

.summary {
    height: 64px;
    padding: 14px 24px;
}

.summary h2 {
    color: #FFF;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

/*  */
.boxs {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 24px;
}

.boxs p {
    color: #FFF;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 4px;
}

.boxs h3 {
    color: #EA3434;
    text-align: center;
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin: 0;
}

.boxs h6 {
    color: #F8B700;
    margin: 0;
}

.boxs span {
    color: #FFF;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

/* -- */
.shuffle h2 {
    color: #FFF;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

/* --- */


/*  */
.accordion button {
    height: 64px;
    color: #FFF;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.accordion-item {
    background: none;
    border: none;
}

.accordion button.accordion-button.border-grey.bg-transparents {
    background: rgba(32, 32, 32, 0.80);
    box-shadow: none;
    color: #FFF;

}
.accordion-button:not(.collapsed)::after {
    background-image: url(../Images/Page2/arrow-down-s-line.png) !important;
    transform: rotate(180deg); /* Rotate the image 180 degrees (bottom to top) */
}
.accordion-button::after {
    background-image: url(../Images/Page2/arrow-down-s-line.png) !important;
}
.accordion-button::after {
    transition: transform 0.3s ease; /* Adjust the duration and easing as needed */
}

.boxeq span {
    color: #21DE21;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.boxeq {
    height: 56px;
    margin-top: 16px;
}

.boxeq h5 {
    color: #FFF;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin: 0;
}

.boxeq p {
    color: #FFF;
    font-size: 11px;
    font-style: normal;
    font-weight: 500;
    margin: 0;
    line-height: normal;
}

.boxeq img {
    margin-top: -1px;
}

/*  */
.down-footer {
    padding: 20px 0;
}

.profile {
    padding: 12px;
}

.footer-intro {
    display: flex !important;
}

.footer-categories {
    display: flex;
}

.footer-categories p +  p {
    &::before {
        content: "|";
        margin: 0 10px !important;
    }
}
@media screen and (max-width: 1200px) {
    .footer-categories {
        width: 90%;
        flex-wrap: wrap;
    }

    .footer-categories p {
        margin: 3px 10px !important;
    }

    .footer-categories p +  p {
        &::before {
            content: "";
            display: none;
        }
    }
}

@media screen and (max-width: 991px) {

    .footer-categories {
        width: 80%;
    }

    .footer-links {
        display: flex !important;
        justify-content: space-around !important;
    }

    .navbar-collapse {
        padding: 25px;
        background: black;
        border-radius: 15px;
        margin-top: 20px;
    }

    .navbar-collapse ul li {
        border-bottom: 1px solid grey;
        margin-bottom: 7px;
        padding: 5px;
    }

    .navbar-collapse button {
        margin-top: 10px;
    }

    .profile {
        height: fit-content;
        padding: 20px 0px;
    }

    .profile > div {
        width: 100%;
        justify-content: space-around;
    }

    .profile-actions {
        display: flex;
        flex-direction: row-reverse;
    }

    .profile-update {
        display: flex;
        margin: auto 0;
    }

    .profile-update p:last-of-type {
        margin-top: 0 !important;
        margin-left: 10px;
    }

    .profile-buttons button:last-of-type {
        margin: 0 !important;
    }


}


@media screen and (max-width: 768px) {
    .profile-actions {
        flex-direction: column;
        margin: 0 20px;
    }

    .profile-update {
        margin-left: auto !important;
    }

    .profile-buttons {
        display: flex;
        justify-content: space-evenly;
    }

}

@media screen and (max-width: 680px) {
    .navbar-collapse {
        padding: 25px;
        background: black;
        border-radius: 15px;
        margin-top: 20px;
    }

    .navbar-collapse ul li {
        border-bottom: 1px solid grey;
        margin-bottom: 7px;
        padding: 5px;
    }

    .form-a .btn-danger {
        padding: 0px 0px;
        height: 40px;
        width: 50px;
    }
    .text-a {
        font-weight: 500 !important;
    }
    
    .down-footer {
        height: auto !important;
        padding: 15px 0 !important;
        margin-top: 20px;
    }
    .gap-11 {
        gap: 5px !important;
    }
    .down-footer .d-flex.gap-11.justify-content-end.pt-3 {
        justify-content: space-evenly !important;
    }

    /* .gap-11 img {
        height: 30px;
        width: auto;
    } */
    .profie {
        height: auto !important;
        padding: 18px 23px;
    }

}

@media screen and (max-width: 510px) {
    .footer-intro {
        flex-direction: column;
    }
    
    .footer-categories {
        width: 100%;
        justify-content: center;
    }
}

@media screen and (max-width: 480px) {
    .profile-buttons {
        flex-direction: column;
    }
    
    .profile-buttons button {
        margin-bottom: 10px;
    }
    
    .profile-info {
        flex-direction: column !important;
    }

    .boxeq >div {
        gap: 3px !important;
        padding: 3px !important;
    }

    .boxeq p {
        font-size: 9px !important;
    }
}
.CharacterProfile-itemEnchantment { 
font-size:1rem;
line-height:1.5}
@media (min-width:720px) { 
.CharacterProfile-itemEnchantment { 
font-size:1rem}
}
@media (min-width:1280px) { 
.CharacterProfile-itemEnchantment { 
font-size:1rem}
}
.CharacterProfile-itemEnchantment--ARTIFACT,.CharacterProfile-itemEnchantment--COMMON,.CharacterProfile-itemEnchantment--EPIC,.CharacterProfile-itemEnchantment--HEIRLOOM,.CharacterProfile-itemEnchantment--LEGENDARY,.CharacterProfile-itemEnchantment--POOR,.CharacterProfile-itemEnchantment--RARE,.CharacterProfile-itemEnchantment--UNCOMMON { 
color:#1eff00}

.Media-text { 
padding:0px;
display:table-cell;
vertical-align:middle}
.Media-text.gutter-vertical { 
padding:10px 0}
.Media-text.gutter-all { 
padding:10px}
.Media-text.gutter-negative { 
padding:0;
margin:0 -10px}
.Media-text.gutter-negative.gutter-vertical { 
margin:-10px 0}
.Media-text.gutter-negative.gutter-all { 
margin:-10px}
.Media--tiny .Icon-svg,.Media--tiny .Media-icon,.Media--tiny .Media-image { 
width:16px;
height:16px}
.Media--small .Icon-svg,.Media--small .Media-icon,.Media--small .Media-image { 
width:24px;
height:24px}
.Media--small .Media-preText { 
font-size:1.08rem;
line-height:1.5;
font-family:Open Sans,Arial,Helvetica,sans-serif;
color:#fff;
text-shadow:0 0 1px transparent,0 1px 2px rgba(0,0,0,.8);
font-weight:400;
line-height:1.4;
min-width:38px}
@media (min-width:720px) { 
.Media--small .Media-preText { 
font-size:1.224rem}
}
@media (min-width:1280px) { 
.Media--small .Media-preText { 
font-size:1.44rem}
}
.Media-image {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: 48px;
    height: 48px;
}
@media screen and (min-width: 768px) and (max-width: 1023px) {}

@media screen and (min-width: 1024px) and (max-width: 1199px) {}

@media screen and (min-width: 1200px) and (max-width: 1919px) {}

@media screen and (min-width: 1920px) {}