/**
 * WoWRoster.net WoWRoster
 *
 * Main CSS file
 *
 * LICENSE: Licensed under the Creative Commons
 *          "Attribution-NonCommercial-ShareAlike 2.5" license
 *
 * @copyright  2002-2008 WoWRoster.net
 * @license    http://creativecommons.org/licenses/by-nc-sa/2.5   Creative Commons "Attribution-NonCommercial-ShareAlike 2.5"
 * @version    SVN: $Id: style.css 2118 2010-01-25 02:56:30Z Adric $
 * @link       http://www.wowroster.net
 * @since      File available since Release 1.03
 */

body { background:#000000; }
a:link, a:visited { color:#FFF; text-decoration:none; font-weight:bold; }
a:hover, a:active { color:#069; text-decoration:none; font-weight:bold; }

.roster-wrap { font:12px arial,helvetica,sans-serif; color:#FFFFFF; width: 960px; margin: auto; position: relative; padding-top: 1px; }

.char-wrap, .util-page-wrap, .util-wrap, .realm-wrap, .guild-wrap { padding: 100px 0 0 0; position: relative; }
.char-wrap {  }

.menu-select { position: absolute; top: 30px; right: 10px; }

/* Login Box */
.menu-login { margin: 5px 0 0 130px; width: 300px; }

/* General Scope Block */
.scope-menu { padding: 40px 10px 10px 0px; position: relative; z-index: 100; }
.scope-menu .menu-scope { margin:2px 0px 0px; padding:0px; width:100%; }

.scope-menu .menu-scope .frame { margin:0px; padding:0px; width:100%; display: table; position: relative; }
.scope-menu .menu-scope .frame .button { float:left; margin:3px; position: relative; }
.scope-menu .menu-scope .frame .button img { height: 50px; width: 50px; }
.scope-menu .menu-scope .frame .button a { display: block; }
.scope-menu .menu-scope .frame .button .mask { background: url(./images/mask/menu_50x50_mask.png) no-repeat left top; height:50px; width:50px; position: absolute; z-index: 100; left: 0px; top: 0px; }
.scope-menu .menu-scope .frame .button .mask:hover { background: url(./images/mask/menu_50x50_mask.png) no-repeat right top; }

.scope-menu .menu-scope-panel { background: url(images/wrap_bg.jpg) repeat-y center top; border: 2px solid #5E4A11; max-width: 100%; position: absolute; z-index: 200; left: 0; top: 40px; padding: 0px 0px 5px; }
.menu-frame .section-title { padding: 3px; font: bold 12px Georgia, "Times New Roman", Times, serif; color: #000; background: url(images/th_bg.png) repeat-x left top; }

.scope-menu .menu-scope-panel .frame { margin:5px; width:100%; position: relative; }
.scope-menu .menu-scope-panel .frame .button { float:left; margin:3px; position: relative; }
.scope-menu .menu-scope-panel .frame .button img { height: 40px; width: 40px; }
.scope-menu .menu-scope-panel .frame .button a { display: block; }
.scope-menu .menu-scope-panel .frame .button .mask { background: url(./images/mask/menu_40x40_mask.png) no-repeat left top; height:40px; width:40px; position: absolute; z-index: 100; left: 0px; top: 0px; }
.scope-menu .menu-scope-panel .frame .button .mask:hover { background: url(./images/mask/menu_40x40_mask.png) no-repeat right top; }

.qj-button { position: absolute; top: -8px; left: 154px; background: url(images/menu/quick_jump.jpg) no-repeat center center; }
.qj-button a { display: block; height: 26px; width: 100px; padding: 4px 5px 10px 45px; }

/* New Main Navagation tabs */

.top-menu { width: auto; position: absolute; z-index: 200; top: 92px; right: 10px; }
.top-menu .links { height: 40px; }
.top-menu .links a { display: block; height: 26px; width: 100px; float: left; padding: 4px 5px 10px 45px; color: #000; margin-right: 5px; font: bold 12px/normal Arial, Helvetica, sans-serif; }

.button-char { background: url(./images/menu/menu_char.png) no-repeat left top; }
.button-char:hover { background: url(./images/menu/menu_char.png) no-repeat left bottom; }
.button-members { background: url(./images/menu/mini_guild.png) no-repeat left top; }
.button-members:hover { background: url(./images/menu/mini_guild.png) no-repeat left bottom; }
.button-guild { background: url(./images/menu/menu_guild.png) no-repeat left top; }
.button-guild:hover { background: url(./images/menu/menu_guild.png) no-repeat left bottom; }
.button-realm { background: url(./images/menu/menu_realm.png) no-repeat left top; }
.button-realm:hover { background: url(./images/menu/menu_realm.png) no-repeat left bottom; }
.button-upload { background: url(./images/menu/menu_upload.png) no-repeat left top; }
.button-upload:hover { background: url(./images/menu/menu_upload.png) no-repeat left bottom; }
.button-util { background: url(./images/menu/menu_utilities.png) no-repeat left top; }
.button-util:hover { background: url(./images/menu/menu_utilities.png) no-repeat left bottom; }

/* Main Roster Wrapper Header */

.theme-wrap {
	min-height: 900px;
	width: 940px;
	margin: 20px auto auto;
	position: relative;
	border: 1px solid #9D7D1C;
	background: #e7cb79 url(./images/wrap_bg.jpg) repeat center top;
	padding: 10px;
}

.info-header { width: 100%; height: 125px; position: absolute; left: -10px; top: -20px; padding-right: 10px; padding-bottom: 45px; z-index: 50; }

.Realm { background: url(./images/bg_neutral.png) no-repeat left top; }
.alliance { background: url(./images/bg_alliance.png) no-repeat left top; }
.horde { background: url(./images/bg_horde.png) no-repeat left top; }

.info-header .text { color: #000000; text-align: left; padding: 45px 15px 15px 165px; width:580px; }
.info-header .text:hover { background: url(none); }

.info-header .name { font: bold normal 24px Georgia, "Times New Roman", Times, serif; text-transform: none; z-index: 11; position: relative; }
.info-header .guild { font: bold normal 18px Georgia, "Times New Roman", Times, serif; text-transform: none; z-index: 11; position: relative; }
.info-header .info { font: bold normal 10px Verdana, Arial, Helvetica, sans-serif; text-transform: uppercase; z-index: 11; position: relative; }

.info-header .name span { color: #FFFFFF; display: block; position: absolute; z-index: 12; left: -1px; top: -2px; }
.info-header .guild span { color: #FFCC00; display: block; position: absolute; z-index: 12; left: -1px; top: -2px; }
.info-header .info span { color: #FFFFFF; display: block; position: absolute; z-index: 12; left: -1px; top: -2px; }



/* Common Styles */

.tier-1-a { background:url('./images/tier/tier_1_a.gif') left top repeat; border:1px solid #b6803d; margin: 20px 20px 0px; }
.tier-1-b { background:url('./images/tier/tier_1_b.gif') left top repeat-x; border:1px solid #ffffd6 }
.tier-1-c { background:url('./images/tier/tier_1_c.jpg') left top no-repeat; padding:7px 7px 6px }
.tier-1-title { color:#491F14; text-decoration:none; display:block; position:relative; font: normal 22px Georgia, "Times New Roman", Times, serif; text-transform: capitalize; }

.tier-1-title .links { float: right; margin-top: 1px; }
.tier-1-title .icon { height: 22px; width: 22px; float: left; margin-left: 5px; position: relative; }
.tier-1-title .icon img { height: 22px; width: 22px; }
.tier-1-title .icon .mask { background: url(./images/mask/icon_mask_1.png) no-repeat left top; height: 22px; width: 22px; position: absolute; z-index: 100; left: 0px; top: 0px; }

.tier-1-title .toggle { height: 22px; width: 22px; float: right; margin-left: 5px; position: relative; }
.tier-1-title .toggle img { height: 22px; width: 22px; }


.tier-2-a { background:url('./images/tier/tier_2_a.jpg') left top repeat; border:1px solid #b6803d; margin-top: 4px; }
.tier-2-b { background:url('./images/tier/tier_2_b.jpg') left top repeat-x; border:1px solid #fff; padding:7px 7px 6px }
.tier-2-title { color:#135E82; padding:0; margin-bottom: 5px; font: normal 18px Georgia, "Times New Roman", Times, serif; text-transform: capitalize; }
.tier-2-title .icon { height: 22px; width: 22px; float: left; margin-right: 5px; left: -2px; top: -2px; position: relative; }
.tier-2-title .icon img { height: 22px; width: 22px; }
.tier-2-title .icon .mask { background: url(./images/mask/icon_mask_2.png) no-repeat left top; height: 22px; width: 22px; position: absolute; z-index: 100; left: 0px; top: 0px; }

.tier-3-a { background:url(./images/tier/tier_3_a.jpg) no-repeat right top; height: 24px; }
.tier-3-b { background:url(images/tier/tier_3_b.jpg) no-repeat left top; height: 24px; padding:2px 2px 2px 7px }

.tier-3-b .text { text-align: left; color: #000; font-size: 14px; line-height: 20px; height: 20px; }
.tier-3-b .text div { float: left; height: 20px; }

.tier-3-b .buttons { height: 16px; float: right; padding: 1px; }
.tier-3-b .buttons a { font: 10px/16px Georgia, "Times New Roman", Times, serif; background: #C60; height: 16px; border: 1px solid #000; margin: 1px; }

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

.tier-3-a .white { background:url(images/tier/color/tier_3_b_white.jpg) no-repeat left top; }
.tier-3-a .red { background:url(images/tier/color/tier_3_b_red.jpg) no-repeat left top; }
.tier-3-a .orange { background:url(images/tier/color/tier_3_b_orange.jpg) no-repeat left top; }
.tier-3-a .yellow { background:url(images/tier/color/tier_3_b_yellow.jpg) no-repeat left top; }
.tier-3-a .green { background:url(images/tier/color/tier_3_b_green.jpg) no-repeat left top; }
.tier-3-a .blue { background:url(images/tier/color/tier_3_b_blue.jpg) no-repeat left top; }
.tier-3-a .purple { background:url(images/tier/color/tier_3_b_purple.jpg) no-repeat left top; }
.tier-3-a .grey { background:url(images/tier/color/tier_3_b_grey.jpg) no-repeat left top; }
.tier-3-a .brown { background:url(images/tier/color/tier_3_b_brown.jpg) no-repeat left top; }

.tier-4-a { background:url(./images/tier/tier_4_a.jpg) no-repeat right top; height: 24px; }
.tier-4-b { background:url(./images/tier/tier_4_b.jpg) no-repeat left top; height: 24px; padding:2px 2px 2px 7px }

.tier-4-b .text { text-align: left; color: #000; font-size: 14px; line-height: 20px; height: 20px; }
.tier-4-b .text div { float: left; height: 20px; }

.tier-4-b  .ts_string { text-align: left; line-height: 20px; }


.tier-5-a { background:url(./images/tier/tier_5_a.jpg) no-repeat right top; height: 30px; }
.tier-5-b { background:url(./images/tier/tier_5_b.jpg) no-repeat left top; height: 30px; padding: 3px }

.tier-5-b .text { text-align: left; color: #FFF; font-size: 14px; line-height: 24px; height: 24px; }
.tier-5-b .text div { float: left; height: 24px; }
.tier-5-b .icon .item { width: 24px; height: 24px; margin: 0px; padding: 0px; }
.tier-5-b .icon .item img.icon { width: 24px; height: 24px; margin: 0px; padding: 0px; }


.tier-6-a { background:url(./images/tier/tier_6_a.jpg) no-repeat right top; height: 30px; }
.tier-6-b { background:url(./images/tier/tier_6_b.jpg) no-repeat left top; height: 30px; padding: 3px }

.tier-6-b .text { text-align: left; color: #FFF; font-size: 14px; line-height: 24px; height: 24px; }
.tier-6-b .text div { float: left; height: 24px; }

.tier-6-a .white { background:url(images/tier/color/tier_6_b_white.jpg) no-repeat left top; }
.tier-6-a .red { background:url(images/tier/color/tier_6_b_red.jpg) no-repeat left top; }
.tier-6-a .orange { background:url(images/tier/color/tier_6_b_orange.jpg) no-repeat left top; }
.tier-6-a .yellow { background:url(images/tier/color/tier_6_b_yellow.jpg) no-repeat left top; }
.tier-6-a .green { background:url(images/tier/color/tier_6_b_green.jpg) no-repeat left top; }
.tier-6-a .blue { background:url(images/tier/color/tier_6_b_blue.jpg) no-repeat left top; }
.tier-6-a .purple { background:url(images/tier/color/tier_6_b_purple.jpg) no-repeat left top; }
.tier-6-a .grey { background:url(images/tier/color/tier_6_b_grey.jpg) no-repeat left top; }
.tier-6-a .brown { background:url(images/tier/color/tier_6_b_brown.jpg) no-repeat left top; }



/* Mini Guild Member List */
.char-list { cursor:default; width: 270px; position: absolute; z-index: 300; right: 0px; top: 102px; }
.char-list .tier-1-a { margin: 0px; }
.char-list .list { max-height: 600px; overflow: auto; border: 1px solid #9D7D1C; }
.char-list .list .member { line-height: 20px; height: 20px; padding: 2px; font-weight: bold; clear: both; }
.char-list .list .plain { background: url(./images/char_row.png) repeat-x left top; color: #333333; }
.char-list .list .plain:hover { background: url(./images/char_row.png) repeat-x left bottom; }
.char-list .list .u-link { cursor:pointer; background: url(./images/char_row_link.png) repeat-x left top; color: #000000; }
.char-list .list .u-link a { color: #000000; }
.char-list .list .u-link:hover { background: url(./images/char_row_link.png) repeat-x left bottom; }
.char-list .list .select { cursor:pointer; background: url(./images/char_row_select.png) repeat-x left top; color: #FFFFFF;}
.char-list .list .select a { color: #FFFFFF; }
.char-list .list .select:hover { background: url(./images/char_row_select.png) repeat-x left bottom; }

.char-list .list .c1 { background: url(./images/miniguild/warrior.jpg) repeat-x left top; color: #FFFFFF; }
.char-list .list .c2 { background: url(./images/miniguild/paladin.jpg) repeat-x left top; color: #FFFFFF; }
.char-list .list .c3 { background: url(./images/miniguild/hunter.jpg) repeat-x left top; color: #FFFFFF; }
.char-list .list .c4 { background: url(./images/miniguild/rogue.jpg) repeat-x left top; color: #FFFFFF; }
.char-list .list .c5 { background: url(./images/miniguild/priest.jpg) repeat-x left top; color: #FFFFFF; }
.char-list .list .c6 { background: url(./images/miniguild/deathknight.jpg) repeat-x left top; color: #FFFFFF; }
.char-list .list .c7 { background: url(./images/miniguild/shaman.jpg) repeat-x left top; color: #FFFFFF; }
.char-list .list .c8 { background: url(./images/miniguild/mage.jpg) repeat-x left top; color: #FFFFFF; }
.char-list .list .c9 { background: url(./images/miniguild/warlock.jpg) repeat-x left top; color: #FFFFFF; }
.char-list .list .c11 { background: url(./images/miniguild/druid.jpg) repeat-x left top; color: #FFFFFF; }

.char-list .list .c1:hover { background: url(./images/miniguild/warrior.jpg) repeat-x left bottom; color: #FFFFFF; }
.char-list .list .c2:hover { background: url(./images/miniguild/paladin.jpg) repeat-x left bottom; color: #FFFFFF; }
.char-list .list .c3:hover { background: url(./images/miniguild/hunter.jpg) repeat-x left bottom; color: #FFFFFF; }
.char-list .list .c4:hover { background: url(./images/miniguild/rogue.jpg) repeat-x left bottom; color: #FFFFFF; }
.char-list .list .c5:hover { background: url(./images/miniguild/priest.jpg) repeat-x left bottom; color: #FFFFFF; }
.char-list .list .c6:hover { background: url(./images/miniguild/deathknight.jpg) repeat-x left bottom; color: #FFFFFF; }
.char-list .list .c7:hover { background: url(./images/miniguild/shaman.jpg) repeat-x left bottom; color: #FFFFFF; }
.char-list .list .c8:hover { background: url(./images/miniguild/mage.jpg) repeat-x left bottom; color: #FFFFFF; }
.char-list .list .c9:hover { background: url(./images/miniguild/warlock.jpg) repeat-x left bottom; color: #FFFFFF; }
.char-list .list .c11:hover { background: url(./images/miniguild/druid.jpg) repeat-x left bottom; color: #FFFFFF; }

.char-list .list .lvl { float: left; width:20px; }
.char-list .list .name { float: left; }
.char-list .list .info { float: right; }
.char-list .list .info img { float: left; margin: 0px 0px 0px 2px; padding: 0px; height: 20px; width: 20px; }


/* Container Styles */
.container { padding: 0px 0px 20px; background: #eaca81 url(./images/section_bg.jpg) repeat center top; margin-bottom: 3px; border: 1px solid #EEDBA2; }
.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; }
.container .box-label .icon { height: 33px; width: 32px; position: absolute; left: 4px; top: 4px; }
.container .box-label .icon img{ height: 33px; width: 32px;}
.container .box-label .icon .mask { background: url(./images/icon_mask.png) no-repeat left top; height: 33px; width: 32px; position: absolute; z-index: 500; left: 0px; top: 0px; }
.container .box-label .profile { background: url(./info/images/icons/profile.gif) no-repeat left top; }

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

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

/* Container Medium Item Qualities */
.container .tier-2-b .item { float: left; margin: 3px; }
.container .tier-2-b .item img{ height: 40px; width: 40px;}
.container .tier-2-b .item .mask { height: 40px; width: 40px; position: absolute; z-index: 100; left: 0px; top: 0px; }

.container .tier-2-b .item .none { background: url(./images/mask/medium/item_poor.png) no-repeat left top; }
.container .tier-2-b .item .none:hover { background: url(./images/mask/medium/item_poor.png) no-repeat left bottom; }
.container .tier-2-b .item .poor { background: url(./images/mask/medium/item_poor.png) no-repeat left top; }
.container .tier-2-b .item .poor:hover { background: url(./images/mask/medium/item_poor.png) no-repeat left bottom; }
.container .tier-2-b .item .common { background: url(./images/mask/medium/item_common.png) no-repeat left top; }
.container .tier-2-b .item .common:hover { background: url(./images/mask/medium/item_common.png) no-repeat left bottom; }
.container .tier-2-b .item .uncommon { background: url(./images/mask/medium/item_uncommon.png) no-repeat left top; }
.container .tier-2-b .item .uncommon:hover { background: url(./images/mask/medium/item_uncommon.png) no-repeat left bottom; }
.container .tier-2-b .item .rare { background: url(./images/mask/medium/item_rare.png) no-repeat left top; }
.container .tier-2-b .item .rare:hover { background: url(./images/mask/medium/item_rare.png) no-repeat left bottom; }
.container .tier-2-b .item .epic { background: url(./images/mask/medium/item_epic.png) no-repeat left top; }
.container .tier-2-b .item .epic:hover { background: url(./images/mask/medium/item_epic.png) no-repeat left bottom; }
.container .tier-2-b .item .legendary { background: url(./images/mask/medium/item_legendary.png) no-repeat left top; }
.container .tier-2-b .item .legendary:hover { background: url(./images/mask/medium/item_legendary.png) no-repeat left bottom; }
.container .tier-2-b .item .artifact { background: url(./images/mask/medium/item_artifact.png) no-repeat left top; }
.container .tier-2-b .item .artifact:hover { background: url(./images/mask/medium/item_artifact.png) no-repeat left bottom; }
.container .tier-2-b .item .heirloom { background: url(./images/mask/medium/item_artifact.png) no-repeat left top; }
.container .tier-2-b .item .heirloom:hover { background: url(./images/mask/medium/item_artifact.png) no-repeat left bottom; }

/* Container Small Item Qualities */

.container .tier-5-b .item, .container .tier-6-b .item { width: 24px; height: 24px; margin: 0px; padding: 0px; }
.container .tier-5-b .item img, .container .tier-6-b .item img { width: 24px; height: 24px; margin: 0px; padding: 0px; }
.container .tier-5-b .item .mask, .container .tier-6-b .item .mask { height: 24px; width: 24px; position: absolute; z-index: 100; left: 0px; top: 0px;}

.container .tier-5-b .item .none, .container .tier-6-b .item .none { background: url(./images/mask/small/item_poor.png) no-repeat left top; }
.container .tier-5-b .item .none:hover, .container .tier-6-b .item .none:hover { background: url(./images/mask/small/item_poor.png) no-repeat left bottom; }
.container .tier-5-b .item .poor, .container .tier-6-b .item .poor { background: url(./images/mask/small/item_poor.png) no-repeat left top; }
.container .tier-5-b .item .poor:hover,.container .tier-6-b .item .poor:hover  { background: url(./images/mask/small/item_poor.png) no-repeat left bottom; }
.container .tier-5-b .item .common, .container .tier-6-b .item .common { background: url(./images/mask/small/item_common.png) no-repeat left top; }
.container .tier-5-b .item .common:hover, .container .tier-6-b .item .common:hover { background: url(./images/mask/small/item_common.png) no-repeat left bottom; }
.container .tier-5-b .item .uncommon, .container .tier-6-b .item .uncommon { background: url(./images/mask/small/item_uncommon.png) no-repeat left top; }
.container .tier-5-b .item .uncommon:hover, .container .tier-6-b .item .uncommon:hover { background: url(./images/mask/small/item_uncommon.png) no-repeat left bottom; }
.container .tier-5-b .item .rare, .container .tier-6-b .item .rare { background: url(./images/mask/small/item_rare.png) no-repeat left top; }
.container .tier-5-b .item .rare:hover, .container .tier-6-b .item .rare:hover { background: url(./images/mask/small/item_rare.png) no-repeat left bottom; }
.container .tier-5-b .item .epic, .container .tier-6-b .item .epic { background: url(./images/mask/small/item_epic.png) no-repeat left top; }
.container .tier-5-b .item .epic:hover, .container .tier-6-b .item .epic:hover { background: url(./images/mask/small/item_epic.png) no-repeat left bottom; }
.container .tier-5-b .item .legendary, .container .tier-6-b .item .legendary { background: url(./images/mask/small/item_legendary.png) no-repeat left top; }
.container .tier-5-b .item .legendary:hover, .container .tier-6-b .item .legendary:hover { background: url(./images/mask/small/item_legendary.png) no-repeat left bottom; }
.container .tier-5-b .item .artifact, .container .tier-6-b .item .artifact { background: url(./images/mask/small/item_artifact.png) no-repeat left top; }
.container .tier-5-b .item .artifact:hover, .container .tier-6-b .item .artifact:hover { background: url(./images/mask/small/item_artifact.png) no-repeat left bottom; }
.container .tier-5-b .item .heirloom, .container .tier-6-b .item .heirloom { background: url(./images/mask/small/item_artifact.png) no-repeat left top; }
.container .tier-5-b .item .heirloom:hover, .container .tier-6-b .item .heirloom:hover { background: url(./images/mask/small/item_artifact.png) no-repeat left bottom; }

/* Misc Code Fixes */
.item { position:relative;width:40px;height:40px;cursor:pointer; }
.item span { position:absolute; bottom:0; right:3px; color:#fff; font-weight:bold; font-size:12px; z-index: 125; }
.item b { position:absolute; bottom:-1px; right:2px; color:#000; font-weight:bold; font-size:12px; z-index: 120; }
.item .icon { float:left;width:40px;height:40px;padding:1px 0 0 0; }
.item .iconsmall { float:left;width:30px;height:30px;padding:1px 0 0 0; }


#keyslist img.icon {height:20px; width:20px;}

/* Navagation tabs */
.sections { font:11px arial,helvetica,sans-serif; width:100%; }
.sections ul { margin:0; padding:0; list-style:none; }
.sections li { float:left; background:url(./images/tabs/inactive_left.png) no-repeat left top; margin:0 3px -7px 0; padding-left:7px; cursor:pointer; }
.sections .text { display:block; background:url(./images/tabs/inactive_right.png) no-repeat right top; padding:10px 11px 8px 3px; text-decoration:none; font-weight:bold; color:#333; }
.sections .text:hover { color:#000000; }
.sections .selected { background-image:url(./images/tabs/active_left.png); cursor:default; }
.sections .selected .text { background-image:url(./images/tabs/active_right.png); color:#000000; padding:8px 11px 10px 3px; }

.roster-panel { clear: left; }

.roster-panel .container { padding: 0 0 20px; background: #eaca81 url(./images/section_bg.jpg) repeat center top; margin-bottom: 3px; border: 1px solid #EEDBA2; }
.roster-panel .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; }
.roster-panel .container .box-label .icon { background: transparent no-repeat left center; height: 33px; width: 32px; position: absolute; left: 4px; top: 4px; }


img, p { padding:0;margin:0;border:0; }

input, .input {
	border:1px solid #CBA300;
	color:#FFF;
	font:10px verdana,arial;
	background-color:#202020;
}
/* FF3 doesn't honor the background-color, so we set a special style here */
input[type="file"] { border:1px solid #808080;color:#808080;background-color:#FFF; }
input[type="submit"], input[type="reset"], input[type="button"] { cursor:pointer; }

select {
	border:1px solid #CBA300;
	color:#ffffff;
	font:10px verdana,arial;
	background-color:#202020;
}

/**
 * Search Rows
 */
.SearchRowAltColor1, .SearchRowAltColor2 { background: #deb760 url(./images/set_row.png) repeat-x left top; }

.SearchRowCell {
	position:relative;
	text-align:left;
	color:#ffffff;
	font-size:11px;
	font-family:arial,helvetica,sans-serif;
	font-weight:bold;
	white-space:nowrap;
	border-style:solid;
	border-width:1px 0 0 1px;
	border-color:#000000 #5D5D5D #5D5D5D #5D5D5D;
	padding:3px 6px 3px 6px;
}

.SearchRowCellRight {
	position:relative;
	text-align:left;
	color:#ffffff;
	font-size:11px;
	font-family:arial,helvetica,sans-serif;
	font-weight:bold;
	white-space:nowrap;
	border-style:solid;
	border-width:1px 1px 0 1px;
	border-color:#000000 #5D5D5D #5D5D5D #5D5D5D;
	padding:3px 6px 3px 6px;
}

.SearchNextPrev {
	border-width:1px;
	border-style:solid;
	border-color:#000000 #5D5D5D #5D5D5D #5D5D5D;
	padding:3px 5px;
	font-size:11px;
}

.search-other td {
	text-align:left;
	border-left:1px solid #4e4d4c;
	padding:3px 5px;
	font-size:13px;
}

.search-other ul {
	padding:0px;
	margin:0px 0px;
	list-style:inside;
	font-size:11px;
}

/**
 * Custom Text Input Boxes
 */
.colorinput {
	vertical-align:middle;
	width:58px;
	height:16px;
	padding:2px 3px 0;
	font-weight:bold;
}

.title_text { font:bold 16px arial,helvetica,sans-serif; }
.headline_1 { font:bold 14px arial,helvetica,sans-serif;color:#ffffff;padding:5px 0 5px 0;margin:0; }
.headline_2 { font:bold 12px arial,helvetica,sans-serif;color:#dfb901; }
.headline_3 { font:bold 12px arial,helvetica,sans-serif; }

.expOutline { border:1px solid #5A5D5A;background-color:#000000; }

.levelbarParent { position:relative;height:1px; }
.levelbarChild {
	position:absolute;
	width:100%;
	text-align:center;
	top:2px;
	color:#ffffff;
	font:bold 10px arial,helvetica,sans-serif;
}

/* this can be used to ensure checkboxes and radio buttons do not have a border */
.checkBox { border:0;color:#ffffff;font:10px verdana,arial;background-color:transparent; }

.button_hide { border:0;background-color:transparent;padding:0;margin:0;cursor:pointer; }

.sqlwindow {
	text-align:left;
	font-size:11px;
}

/**
 * Special Radio Buttons and Checkboxes
 */
/* Off state for checkbox */
.checkboxOff {
	display:inline;
	margin:0;
	padding:2px; /* NS 6 problem */
	padding-left:20px;
	line-height:16px;
	background:transparent url(images/check_off.png) no-repeat 0% 50%;
	border:0;
}
/* On state for checkbox */
.checkboxOn {
	display:inline;
	margin:0;
	padding:2px; /* NS 6 problem */
	padding-left:20px;
	line-height:16px;
	background:transparent url(images/check_on.png) no-repeat 0% 50%;
	border:0;
}
/* Off state for radio button */
.radioOff {
	display:inline;
	margin:0;
	padding:2px;
	padding-left:15px;
	background:transparent url(images/radio_off.png) no-repeat 0% 50%;
}
/* On state for radio button */
.radioOn {
	display:inline;
	margin:0;
	padding:2px; /* NS 6 problem */
	padding-left:15px;
	background:transparent url(images/radio_on.png) no-repeat 0% 50%;
}
/* use CSS to full effect with hover states. Ohhh, perty! */
.checkboxOn:hover { background-image:url(images/check_on_hover.png); }
.checkboxOff:hover { background-image:url(images/check_off_hover.png); }
.radioOn:hover { background-image:url(images/radio_on_hover.png); }
.radioOff:hover { background-image:url(images/radio_off_hover.png); }


/**
 * Misc Defines
 */
.lastupdated { color:#0099FF;font-size:x-small;font-style:italic; }


/**
 * List Menus
 */
.tab_menu { padding:0;margin:0;font:11px arial,helvetica,sans-serif;list-style-type:none;text-align:center; }
.tab_menu li { display:block;margin:2px 2px 2px; }
.tab_menu li a {
	display:block;
	width:140px;
	text-decoration:none;
	border:solid #5D5D5D;
	border-width:1px 0 0 1px;
	color:#CBA300;
	background-color:#2E2D2B;
}
.tab_menu li a:visited { color:#CBA300; }
.tab_menu li a:hover { text-decoration:none;background-color:#7A7772;color:#EABB00; }
.tab_menu li.selected { position:relative; }
.tab_menu li.selected a { background-color:#5b5955; }
.tab_menu li.selected a:hover{ text-decoration:none;background-color:#7A7772; }


/* Ignore the following options except in the cp */

.menu_config_div {
	/* The div elements used for the menu config screen */
	position:absolute;
	width:32px;
	height:32px;
	display:block;
	text-align:center;
	vertical-align:middle;
	border:2px solid #5D5D5D;
	background-color:#2E2D2B;
	text-decoration:none;
	color:#EABB00;
	font-weight:bold;
	font-size:10px;
}
.menu_config_div:hover { border:2px solid #0066FF; }

.menu_config_div_disabled {
	/* The div elements used for the menu config screen */
	position:absolute;
	width:32px;
	height:32px;
	display:block;
	text-align:center;
	vertical-align:middle;
	border:2px solid #9A4D3A;
	background-color:#2E2D2B;
	text-decoration:none;
	color:#EABB00;
	font-weight:bold;
	font-size:10px;
}
.menu_config_div_disabled:hover { border:2px solid #FF3300; }

/**
 * Row Coloring
 */
.membersHeader, .membersHeaderRight {
	text-align:left;
	white-space:nowrap;
	color:#000000;
	font:bold 11px arial,helvetica,sans-serif;
	background: url(./images/th_bg.png) repeat-x center top;
	padding:0 6px 0 6px;
	height: 20px;
	vertical-align:middle;
}

.membersRowCell, .membersRowRightCell {
	position:relative;
	text-align:left;
	color:#000000;
	font-size:11px;
	font-family:arial,helvetica,sans-serif;
	font-weight:bold;
	white-space:nowrap;
	padding:3px 6px 3px 6px;
}

.membersRow1, .membersRow2, .membersRowRight1, .membersRowRight2 { border-top: 1px solid #9D7D1C; position:relative; text-align:left; color:#000000; background: #deb760 url(./images/set_row.png) repeat-x left top; font:bold 11px arial,helvetica,sans-serif; white-space:nowrap; padding:3px 6px 3px 6px; }

.membersRow1 a:link, .membersRow1 a:hover, .membersRow1 a:active, .membersRow1 a:visited {color:#000000;}
.membersRowRight1 a:link, .membersRowRight1 a:hover, .membersRowRight1 a:active, .membersRowRight1 a:visited {color:#000000;}
.membersRow2 a:link, .membersRow2 a:hover, .membersRow2 a:active, .membersRow2 a:visited {color:#000000;}
.membersRowRight2 a:link, .membersRowRight2 a:hover, .membersRowRight2 a:active, .membersRowRight2 a:visited {color:#000000;}


.membersRowimg { vertical-align:middle; }

/**
 * Border Styles
 */
.border_frame { border: 1px solid #EEDBA2; margin: auto; padding:0px; background: #deb760; color: #000; }
/* Minor mod, transparent background */
.border_frame_trans { border: 0px margin: auto; padding:0px; }

.border_color {
	border-width:1px;
	border-style:solid;
}

.motd_setup {
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#FFFFFF;
	font-style:normal;
	padding-right:8px;
	padding-left:23px;
	background:#660000 url(../../img/motd_left.gif) no-repeat left center;
	height:21px;
}

/* Header Text */
.header_text {
	text-align:center;
	white-space:nowrap;
	overflow:hidden;
	color:#000000;
	font:bold 16px arial,helvetica,sans-serif;
	background: url(./images/skill_title_bg.png) repeat-x left bottom;
	padding:10;
	vertical-align:middle;
}

/* Border Colors */
.swhiteborder { border-color:#FFFFFF; }
.sgreyborder, .sgrayborder { border-color:#999999; }
.sgoldborder { border-color:#D3A229; }
.sredborder { border-color:#FF0000; }
.sorangeborder { border-color:#FFA500; }
.syellowborder { border-color:#FFCC00; }
.sgreenborder { border-color:#008000; }
.sblueborder { border-color:#0000FF; }
.spurpleborder { border-color:#4B0082; }

/**
 * Bag Styles
 */
.bankbag { position:relative;float:left;margin:0 5px 10px 0;color:#ffffff;width:395px;height:275px;background-repeat:no-repeat; }
.bankbag .item { float:left;margin:0 9px 4px 0;width:40px;height:40px; }
.bankbag .item .icon { margin:0;width:40px;height:40px;border-width:0;cursor:pointer; }
.bankbag .holder { position:absolute;margin-top:70px;margin-left:35px;width:345px; }

.bag { position:relative;float:left;margin:0 5px 10px 0;color:#ffffff;width:184px;background-repeat:no-repeat; }
.bag .bagspacer0 { display:none; }
.bag .bagspacer2 { width:42px;height:41px;float:left; }
.bag .holder0 { position:absolute;margin-top:48px;margin-left:13px;width:170px; }
.bag .holder2 { position:absolute;margin-top:26px;margin-left:13px;width:170px; }
.bag .bottom { position:absolute;margin-left:7px;width:177px;height:7px;background-repeat:no-repeat; }
.bag .item { float:left;margin:0 2px 1px 0;width:40px;height:40px; }
.bag .item .icon { margin-left:2px;width:37px;height:37px;border-width:0;cursor:pointer; }
.bag .bagmask { position:absolute;top:0;left:0;width:39px;height:39px;cursor:pointer; }
.bag .bagicon { position:absolute;top:0;left:0;width:40px;height:40px;clip:rect(5px 37px 37px 5px); }

.bag_name, .key_name, .bank_name {
	margin-top:9px;
	margin-left:48px;
	font:bold 11px arial,helvetica,sans-serif;
	color:#ffffff;
	position:absolute;
	text-align:left;
	width:134px;
	height:16px;
	float:left;
	overflow:hidden;
}
.bankcont_name {
	margin-top:16px;
	margin-left:78px;
	font:bold 12px arial,helvetica,sans-serif;
	color:#ffffff;
	position:absolute;
	text-align:left;
	width:316px;
	height:16px;
	float:left;
	overflow:hidden;
}
/**
 * END Bag Styles
 */


/**
 * Class colorization
 */
.classDeathKnighttxt { color:#C41F3B; }
.classDruidtxt { color:#FF7D0A; }
.classHuntertxt { color:#ABD473; }
.classMagetxt { color:#69CCF0; }
.classPaladintxt { color:#F58CBA; }
.classPriesttxt { color:#FFFFFF; }
.classRoguetxt { color:#FFF569; }
.classShamantxt { color:#2459FF; }
.classWarlocktxt { color:#9482C9; }
.classWarriortxt { color:#C79C6E; }


/**
 * Random color defines
 */
.white { color:#ffffff; }
.yellow { color:#ffd200; }
.green { color:#7eff00; }
.grey { color:#808080; }
.red { color:#ff0000; }
.orange { color:#ff9900; }
.purple { color:#8000ff; }
.blue { color:#0068ff; }
.gold { color:#ffcc00; }
.brown { color:#593300; }

.whiteB { font-weight:bold;color:#ffffff; }
.yellowB { font-weight:bold;color:#ffd200; }
.greenB { font-weight:bold;color:#7eff00; }
.greyB { font-weight:bold;color:#808080; }
.redB { font-weight:bold;color:#ff0000; }
.orangeB { font-weight:bold;color:#ff9900; }
.purpleB { font-weight:bold;color:#8000ff; }
.blueB { font-weight:bold;color:#0068ff; }
.goldB { font-weight:bold;color:#ffcc00; }
.brownB { font-weight:bold;color:#593300; }

.iconwhite, .icongrey, .icongreen, .iconblue, .iconpurple { float:left;width:40px;height:40px;padding:1px 0 0 0;z-index:1;border:2px solid #ffffff; }
.iconwhite { }
.icongrey { border-color:#9d9d9d; }
.icongreen { border-color:#1eff00; }
.iconblue { border-color:#0070dd; }
.iconpurple { border-color:#aa00dd; }

/**
 * END Random color defines
 */


/**
 * Overlib Tooltip Styles
 */

/* Sets main text background - ol_fgclass*/
.overlib_fg { background-color:#000000; }

/* Sets the border style - ol_bgclass*/
.overlib_border { border:1px outset #CCCCCC; }

/* Sets main text style - ol_textfontclass */
.overlib_maintext { color:#ffffff;font:10px verdana,arial,helvetica,sans-serif;white-space:normal; }

/* Sets Caption Text - ol_captionfontclass */
.overlib_captiontext { color:#ffffff;background-color:#2E2D2B;font:bold 10px verdana,arial,helvetica,sans-serif; }

/* Sets Close Text - ol_closefontclass */
.overlib_closetext { color:#ffffff;background-color:#2E2D2B;font:bold 10px verdana,arial,helvetica,sans-serif; }



/**
 * Color Picker
 */
#colorPicker {
	position:absolute;
	width:250px;
	padding-bottom:1px;
	background-color:#1F1E1D;
	border:1px solid #5D5D5D;
	width:252px;	/* IE 5.x */
	width/* */:/**/250px;	/* Other browsers */
	width:/**/250px;
}
#colorPicker .colorPicker_topRow {
	padding-bottom:1px;
	border-bottom:3px double #5D5D5D;
	background-color:#2E2D2B;
	padding-left:2px;
	width:250px;	/* IE 5.x */
	width/* */:/**/248px;	/* Other browsers */
	width:/**/248px;
	height:20px;	/* IE 5.x */
	height/* */:/**/16px;	/* Other browsers */
	height:/**/16px;
}
#colorPicker .colorPicker_statusBar {
	height:13px;
	padding-bottom:2px;
	width:248px;
	border-top:3px double #5D5D5D;
	background-color:#2E2D2B;
	padding-left:2px;
	clear:both;
	width:250px;	/* IE 5.x */
	width/* */:/**/248px;	/* Other browsers */
	width:/**/248px;
	height:18px;	/* IE 5.x */
	height/* */:/**/13px;	/* Other browsers */
	height:/**/13px;
}
#colorPicker .colorSquare {
	margin-left:1px;
	margin-bottom:1px;
	float:left;
	border:1px solid #000;
	cursor:pointer;
	width:12px;	/* IE 5.x */
	width/* */:/**/10px;	/* Other browsers */
	width:/**/10px;
	height:12px;	/* IE 5.x */
	height/* */:/**/10px;	/* Other browsers */
	height:/**/10px;
}

.colorPickerTab_inactive,
.colorPickerTab_active { height:17px;padding-left:4px;cursor:pointer; }

.colorPickerTab_inactive span { background-image:url(images/color/tab_left_inactive.gif); }
.colorPickerTab_active span{ background-image:url(images/color/tab_left_active.gif); }

.colorPickerTab_inactive span,
.colorPickerTab_active span {
	line-height:16px;
	font-weight:bold;
	font-family:arial,helvetica,sans-serif;
	font-size:11px;
	color:#CBA300;
	padding-top:1px;
	vertical-align:middle;
	background-position:top left;
	background-repeat:no-repeat;
	float:left;
	padding-left:6px;
}
.colorPickerTab_inactive img,
.colorPickerTab_active img { float:left; }

.colorPickerCloseButton {
	width:16px;
	height:15px;
	position:absolute;
	right:1px;
	top:1px;
	cursor:pointer;
}
#colorPicker_statusBarTxt {
	font-size:11px;
	font-family:arial,helvetica,sans-serif;
	color:#CBA300;
	vertical-align:top;
	line-height:13px;
}

.form_widget_amount_slider {
	border-top:1px solid #9d9c99;
	border-left:1px solid #9d9c99;
	border-bottom:1px solid #eee;
	border-right:1px solid #eee;
	background-color:#2E2D2B;
	position:absolute;
	bottom:0px;
	width:5px;	/* IE 5.x */
	width/* */:/**/3px;	/* Other browsers */
	width:/**/3px;
	height:5px;	/* IE 5.x */
	height/* */:/**/3px;	/* Other browsers */
	height:/**/3px;
}
.colorSliderLabel {
	width:15px;
	height:20px;
	float:left;
	font-size:11px;
	font-weight:bold;
	color:#CBA300;
}
.colorSlider { width:175px;height:20px;float:left; }
.colorInput { width:45px;height:20px;float:left; }

.colorPreviewDiv {
	width:180px;
	margin-right:2px;
	margin-top:1px;
	border:1px solid #CCC;
	height:20px;
	float:left;
	cursor:pointer;
	width:182px;	/* IE 5.x */
	width/* */:/**/180px;	/* Other browsers */
	width:/**/180px;
	height:22px;	/* IE 5.x */
	height/* */:/**/20px;	/* Other browsers */
	height:/**/20px;
}
.colorCodeDiv { width:50px;height:20px;float:left; }