/**
 * 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 2296 2011-03-14 03:50:46Z c.treyce@gmail.com $
 * @link       http://www.wowroster.net
 * @package    CharacterInfo
 */

/*********** Talent Tree Arrows ***********/
.hunterbeastmastery.arrow-1 {width: 21px; height: 19px; top: 54px; left: 138px; }
.hunterbeastmastery.arrow-2 {width: 21px; height: 73px; top: 162px; left: 82px; }
.hunterbeastmastery.arrow-3 {width: 21px; height: 19px; top: 270px; left: 82px; }
.hunterbeastmastery.arrow-4 {width: 21px; height: 19px; top: 270px; left: 138px; }

.huntermarksmanship.arrow-1 {width: 21px; height: 19px; top: 54px; left: 26px; }
.huntermarksmanship.arrow-2 {width: 21px; height: 73px; top: 270px; left: 82px; }
.huntermarksmanship.arrow-3 {width: 40px; height: 21px; top: 242px; left: 112px; }
.huntermarksmanship.arrow-4 {width: 21px; height: 33px; top: 255px; left: 138px; }

.huntersurvival.arrow-1 {width: 21px; height: 19px; top: 162px; left: 138px; }
.huntersurvival.arrow-2 {width: 20px; height: 21px; top: 242px; left: 112px; }
.huntersurvival.arrow-3 {width: 21px; height: 73px; top: 270px; left: 82px; }


.magefrost.arrow-4 {width: 21px; height: 73px; top: 270px; left: 82px; }
.magefrost.arrow-3 {width: 21px; height: 19px; top: 134px; left: 169px; }
.magefrost.arrow-2 {width: 21px; height: 19px; top: 242px; left: 51px; }
.magefrost.arrow-1 {width: 21px; height: 19px; top: 242px; left: 112px; }

.magefire.arrow-2 {width: 21px; height: 19px; top: 162px; left: 138px; }
.magefire.arrow-1 {width: 21px; height: 73px; top: 270px; left: 82px; }

.magearcane.arrow-5 {width: 21px; height: 19px; top: 108px; left: 138px; }
.magearcane.arrow-4 {width: 21px; height: 19px; top: 242px; left: 112px; }
.magearcane.arrow-3 {width: 21px; height: 19px; top: 162px; left: 82px; }
.magearcane.arrow-2 {width: 21px; height: 73px; top: 270px; left: 82px; }
.magearcane.arrow-1 {width: 21px; height: 19px; top: 134px; left: 51px; }


.druidrestoration.arrow-3 {width: 21px; height: 19px; top: 54px; left: 82px; }
.druidrestoration.arrow-2 {width: 21px; height: 73px; top: 162px; left: 26px; }
.druidrestoration.arrow-1 {width: 21px; height: 73px; top: 270px; left: 82px; }

.druidferalcombat.arrow-3 {width: 21px; height: 73px; top: 162px; left: 26px; }
.druidferalcombat.arrow-2 {width: 21px; height: 19px; top: 134px; left: 112px; }
.druidferalcombat.arrow-1 {width: 21px; height: 19px; top: 242px; left: 112px; }

.druidbalance.arrow-5 {width: 21px; height: 73px; top: 162px; left: 26px; }
.druidbalance.arrow-4 {width: 21px; height: 19px; top: 162px; left: 82px; }
.druidbalance.arrow-3 {width: 21px; height: 19px; top: 162px; left: 138px; }
.druidbalance.arrow-2 {width: 21px; height: 19px; top: 270px; left: 82px; }
.druidbalance.arrow-1 {width: 21px; height: 19px; top: 270px; left: 138px; }

.deathknightunholy.arrow-3 {width: 21px; height: 73px; top: 54px; left: 138px; }
.deathknightunholy.arrow-2 {width: 21px; height: 73px; top: 162px; left: 194px; }
.deathknightunholy.arrow-1 {width: 21px; height: 19px; top: 216px; left: 82px; }

.deathknightfrost.arrow-1 {width: 21px; height: 71px; top: 270px; left: 82px; }

.deathknightblood.arrow-1 {width: 21px; height: 19px; top: 242px; left: 51px; }


.paladinholy.arrow-1 {width: 21px; height: 19px; top: 162px; left: 138px; }
.paladinholy.arrow-2 {width: 21px; height: 71px; top: 216px; left: 82px; }

.paladinprotection.arrow-1 {width: 21px; height: 19px; top: 162px; left: 138px; }
.paladinprotection.arrow-2 {width: 21px; height: 19px; top: 162px; left: 82px; }
.paladinprotection.arrow-3 {width: 21px; height: 19px; top: 216px; left: 82px; }
.paladinprotection.arrow-4 {width: 21px; height: 19px; top: 270px; left: 82px; }

.paladincombat.arrow-1 {width: 21px; height: 71px; top: 54px; left: 138px; }


.priestdiscipline.arrow-1 {width: 21px; height: 19px; top: 80px; left:56px; }
.priestdiscipline.arrow-2 {width: 21px; height: 71px; top: 162px; left: 26px; }
.priestdiscipline.arrow-3 {width: 21px; height: 71px; top: 270px; left: 82px; }

.priestholy.arrow-1 {width: 21px; height: 71px; top: 54px; left: 26px; }
.priestholy.arrow-2 {width: 21px; height: 19px; top: 162px; left: 26px; }
.priestholy.arrow-3 {width: 21px; height: 71px; top: 162px; left: 82px; }
.priestholy.arrow-4 {width: 21px; height: 19px; top: 242px; left: 112px; }
.priestholy.arrow-5 {width: 21px; height: 19px; top: 270px; left: 82px; }

.priestshadow.arrow-1 {width: 21px; height: 71px; top: 108px; left: 26px; }
.priestshadow.arrow-2 {width: 21px; height: 19px; top: 188px; left: 112px; }
.priestshadow.arrow-3 {width: 21px; height: 19px; top: 216px; left: 82px; }
.priestshadow.arrow-4 {width: 21px; height: 19px; top: 270px; left: 82px; }


.rogueassassination.arrow-1 {width: 21px; height: 19px; top: 162px; left: 82px; }
.rogueassassination.arrow-2 {width: 21px; height: 71px; top: 162px; left: 138px; }

.roguecombat.arrow-1 {width: 21px; height: 71px; top: 270px; left: 82px; }

.roguesubtlety.arrow-1 {width: 21px; height: 19px; top: 54px; left: 82px; }
.roguesubtlety.arrow-2 {width: 21px; height: 71px; top: 162px; left: 138px; }


.shamanelementalcombat.arrow-1 {width: 21px; height: 19px; top: 270px; left: 82px; }
.shamanelementalcombat.arrow-2 {width: 21px; height: 19px; top: 162px; left: 82px; }
.shamanelementalcombat.arrow-3 {width: 21px; height: 71px; top: 162px; left: 26px; }

.shamanenhancement.arrow-1 {width: 21px; height: 71px; top: 216px; left: 138px; }

.shamanrestoration.arrow-1 {width: 21px; height: 19px; top: 188px; left: 169px; }
.shamanrestoration.arrow-2 {width: 21px; height: 71px; top: 162px; left: 26px; }


.warlockcurses.arrow-1 {width: 21px; height: 19px; top: 80px; left: 112px; }
.warlockcurses.arrow-2 {width: 21px; height: 71px; top: 108px; left: 82px; }

.warlocksummoning.arrow-1 {width: 21px; height: 19px; top: 188px; left: 112px; }
.warlocksummoning.arrow-2 {width: 21px; height: 19px; top: 216px; left: 82px; }
.warlocksummoning.arrow-3 {width: 21px; height: 19px; top: 270px; left: 82px; }

.warlockdestruction.arrow-1 {width: 21px; height: 71px; top: 216px; left: 26px; }
.warlockdestruction.arrow-2 {width: 21px; height: 71px; top: 270px; left: 82px; }
.warlockdestruction.arrow-3 {width: 21px; height: 19px; top: 216px; left: 194px; }


.warriorarms.arrow-1 {width: 21px; height: 19px; top: 108px; left: 138px; }
.warriorarms.arrow-2 {width: 21px; height: 71px; top: 270px; left: 82px; }
.warriorarms.arrow-3 {width: 40px; height: 21px; top: 242px; left: 112px; }
.warriorarms.arrow-4 {width: 21px; height: 33px; top: 255px; left: 138px; }

.warriorfury.arrow-1 {width: 21px; height: 19px; top: 162px; left: 82px; }
.warriorfury.arrow-2 {width: 21px; height: 19px; top: 188px; left: 112px; }
.warriorfury.arrow-3 {width: 21px; height: 71px; top: 216px; left: 82px; }

.warriorprotection.arrow-1 {width: 21px; height: 19px; top: 188px; left:167px; }
.warriorprotection.arrow-2 {width: 21px; height: 71px; top: 162px; left: 82px; }
.warriorprotection.arrow-3 {width: 21px; height: 71px; top: 216px; left: 138px; }


/*********** Common Elements ***********/
.main-panel .container { padding: 0 0 20px; background: #eaca81 url(../images/section_bg.jpg) repeat center top; margin-bottom: 3px; border: 1px solid #EEDBA2; }


/*********** Profile Page ***********/
.shader { background: url(../images/shader.png) repeat; border: 1px solid #000000; }

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

.main-panel .profile .equip-bg { background: url(images/charframe.jpg) no-repeat 0px 0px; margin: 10px auto; padding: 0px; height: 570px; width: 540px; 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; }

/* 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_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: 170px; top: 500px; }
.equip_SecondaryHand { 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; }

/* 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; }

/* 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:158px; height:74px; padding:5px; 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:80px; 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:109px;
	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 ***********/
.main-panel .talents .frames { margin: auto; height: 430px; width: auto; }

.main-panel .talents .spec { position:relative; float: left; width:250px; height:410px; margin: 3px; }
.main-panel .talents .spec-name { position:absolute; background: url(../images/shader.png) repeat; width:240px; padding: 5px; left: 0; bottom: 0; font-size: 10px; font-weight: bold; }
.main-panel .talents .spec-name .name { color:#ffdd00; }
.main-panel .talents .tbackground { position:absolute;width:250px;height:410px; }
.main-panel .talents .content { position:absolute;width:250px;height:410px; }

.main-panel .talents .talent-cell { position: relative; float:left; width:56px; 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: 0; top: 0; }

/* 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;  }


/* 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; }


/***********  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 ***********/
.requiredArrow { z-index: 100; position: absolute; display: block; }
.vArrow { background: url(images/talents/arrow-down.gif) no-repeat 0 100%; }
.hArrow { background: url(images/talents/arrow-vertical.gif) no-repeat 0 100%; }
.plain { background-image: url(images/talents/arrow-plain.gif); }
.arrowLeft { background-position: 0 0; }
.arrowRight { background-position: 100% 0; }
/*.disabledArrow { background-position: 100% 100%; }
.disabledArrowL { background-position: 0 100%; }*/


.skill-icon { float:left; margin-right: 2px; width: 18px; height: 18px; }