/* Common Colors:
Light Brown: #f6daa7;#f6daa7;
Medium Tan: #ddc879;
Dark Brown: #a08d37;
Electric Blue: #3ee6f6;
*/

/*** Layout ***/
.left { text-align: left; }
.right { text-align: right; }
.center { text-align: center; }
.middle { vertical-align: middle; }
.top { vertical-align: top; }
.bottom { vertical-align: bottom; }
.clear-both { clear: both; }
.clear-left { clear: left; }
.clear-right { clear: right; }
.float-right { float: right; }
.float-left { float: left; }
div.vertical-tabs { position: absolute; padding: 10px; }
div.vertical-tabs a.tab { float: left; clear: left; display: block; text-decoration: none; }
div.vertical-tabs a.tab img { border: none; margin: 10px; }
div.container { padding: 20px; overflow: hidden; }
div.has-gutter { margin: 0 0 10px 10px; width: 700px; }
div#l_error_message { color: #FF0000; font-size: 14px; text-align: center; padding: 5px; }
div#l_warning_message { color: #FFFF00; font-size: 14px; text-align: center; padding: 5px; }
div#l_notice_message { color: #FFFFFF; font-size: 14px; text-align: center; padding: 5px; }

div.buttons { padding: 0; margin: 5px 0 15px 0; vertical-align: middle; clear: right; }
div.buttons a { text-decoration: none; background-position: 4px center; background-repeat: no-repeat; padding: 9px 4px 7px 22px; font-size: 12px; font-weight: bold; margin: 0 10px 0 0; height: 18px; vertical-align: middle; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; }
div.buttons a:hover { opacity: 0.5; }

/*** Forms ***/
FORM { margin: 0; display: block; clear: left; }
FORM div.field { clear: left; margin: 0 0 5px 10px; font-size: 12px; }
FORM div.field label { font-size: 12px; font-weight: bold; display: block; float: left; width: 175px; margin: 4px 0 4px 0; }
FORM div.field input { font-size: 12px; }

/*** Gutter **/
div#l_gutter { float: right; width: 265px; }
div#l_gutter div.vertical-dock-container { padding: 0 3px 5px 3px; }
div#l_gutter div.vertical-dock-entry { width: 35px; float: left; padding: 4px 0px 1px 0px; border-width: 1px; border-style: solid; border-color: transparent; }
div#l_gutter div.vertical-dock-entry div.day { text-align: center; font-size: 10px; }
div#l_gutter div.vertical-dock-entry div.date div.monthOfYear { text-align: center; font-size: 10px; }
div#l_gutter div.vertical-dock-entry div.date div.dayOfMonth { font-weight: bold; text-align: center; font-size: 14px; }
div#l_gutter div.today { border-color: #FFFFFF; -moz-border-radius: 4px; -webkit-border-radius: 4px; color: #FFFFFF; }
div#l_gutter div.today div.date { color: #FFFFFF; }
div#l_gutter div.today div.day { font-weight: bold; }
div#l_gutter div.vertical-dock-entry div.raid { margin: 2px; color: #FFFFFF; text-align: center; font-size: 10px; }
div#l_gutter div.vertical-dock-entry div.raid span { font-weight: bold; font-size: 8px; color: #2D2D2D; }

/*** Lists ***/
table.list { margin: 5px 0 5px 0; }
table.list th { font-size: 12px; font-weight: normal; height: 12px; }
table.list tr.listitem td { height: 35px; padding: 4px 0 4px 0; }
table.list th.nosort { cursor: default; }
table.list th.sortasc { padding: 5px 0 0 16px; background-image: url(/images/icons/bullet_arrow_up.png); }
table.list th.sortdesc { padding: 5px 0 0 16px; background-image: url(/images/icons/bullet_arrow_down.png); }
table.list td { font-size: 12px; }
table.list tr.odd { background-color: transparent; }
table.list tr.even { }
table.list tbody tr td.no_data { text-align: center; vertical-align: middle; height: 100px; color: #000000; font-size: 11px; }
table.list tfoot { height: auto; }

/*** Class Icons ***/
div.character-class { min-height: 20px; height: 20px; width: 20px; background-image: url(/images/classes.gif); }
div.druid { background-position: 0px 0px; }
div.hunter { background-position: -38px 0px; }
div.mage { background-position: -152px 0px; }
div.paladin { background-position: -76px 0px; }
div.priest { background-position: -95px 0px; }
div.rogue { background-position: -19px 0px;	}
div.shaman { background-position: -114px 0px;	}
div.warlock { background-position: -133px 0px; }
div.warrior { background-position: -57px 0px; }
div.deathknight { background-position: -171px 0px; }

/*** Race Icons ***/
div.alliance-race { min-height: 20px; height: 20px; width: 20px; background-image: url(/images/alliance-races.gif); }
div.human-female { background-position: 96px 0px; }
div.human-male {  background-position: 115px 0px;	}
div.nightelf-female { background-position: -19px 0px;	}
div.nightelf-male { background-position: 0px 0px;	}
div.gnome-female { background-position: 58px 0px;	}
div.gnome-male { background-position: 77px 0px; }
div.draenei-female { background-position: 20px 0px;	}
div.draenei-male { background-position: 39px 0px; }
div.dwarf-female { background-position: 134px 0px; }
div.dwarf-male { background-position: 153px 0px; }
div.tauren-male { background-position: 153px 0px; }
div.troll-male { background-position: 0px 0px; }
div.troll-female { background-position: -19px 0px; }
div.tauren-female { background-position: 134px 0px;	}
div.bloodelf-male { background-position: 77px 0px; }
div.undead-male { background-position: 39px 0px; }
div.bloodelf-female { background-position: 58px 0px; }
div.undead-female { background-position: 20px 0px; }
div.orc-female { background-position: 96px 0px; }
div.orc-male { background-position: 115px 0px; }

/*** Rank Bullet ***/
span.rank_bullet { background-image: url(/images/icons/bullet_black.png); background-repeat: no-repeat; background-position: -2px -1px; display: block; padding: 0 0 0 14px; }
span.rare { background-image: url(/images/icons/bullet_blue.png); }
span.epic { background-image: url(/images/icons/bullet_purple.png); }
span.legendary { background-image: url(/images/icons/bullet_orange.png); }
span.artifact { background-image: url(/images/icons/bullet_red.png); }
span.common { background-image: url(/images/icons/bullet_black.png); }
span.uncommon { background-image: url(/images/icons/bullet_green.png); }

/*** Quality/Profile Links ***/
a.quality_link { background-repeat: no-repeat; background-position: left center; vertical-align: middle; text-decoration: none; white-space: nowrap; padding: 3px 0 3px 20px; margin: 0 2px 0 0; font-size: 12px; }
a.legendary { color: #FF8000; text-decoration: underline; }
a.uncommon { color: #1EFF00; text-decoration: underline; }
a.common { color: #C0C0C0; text-decoration: underline; }
a.rare { color: #0070DD; text-decoration: underline; }
a.epic { color: #A335EE; text-decoration: underline; }
a.poor { color: #9D9D9D; text-decoration: underline; }
a.artifact { color: #FF0000; text-decoration: underline; }
a.quality_link span.name { color: #000000; }

/* Basic Layout */
BODY { padding: 0; margin: 0; background-image: url(images/background.png); background-position: top center; background-repeat: no-repeat; background-color: #000103; }
div#l_main { width: 1024px; margin: 0 auto 0 auto; font-family: helvetica, arial, sans-serif; }
div#l_header { padding: 40px 0 0 0; background-image: url(images/azeroth_hand.png); background-position: bottom right; background-repeat: no-repeat; }
div#l_header img { border: none; }
div#l_header_left { position: relative; top: 14px; display: inline; }
div#l_header_right { position: relative; color: #FFFFFF; font-size: 12px; top: 54px; left: -260px; text-align: right; }
div#l_header_right a { color: #3ee6f6; }
div#l_gutter { }
div#l_gutter div.title { text-align: center; color: #d8c77c; font-size: 12px; padding: 12px; }
div#l_gutter div.title a { color: #ffffff; }
div#l_gutter div.dock-entry { color: #ffffff; font-size: 12px; margin: 2px 10px 2px 10px; }
div#l_gutter div.dock-entry a { color: #ddc879; }
div#l_gutter div.dock-entry small a { color: #f6daa7; }
div#l_gutter div.vertical-dock-entry { color: #3ee6f6; }
div#l_gutter div.vertical-dock-entry div.day { color: #FFFFFF; font-size: 11px; }
div#l_gutter div.vertical-dock-entry div.date { }
div#l_gutter div.vertical-dock-entry div.date div.monthOfYear { color: #FFFFFF; }
div#l_gutter div.vertical-dock-entry div.date div.dayOfMonth { color: #FFFFFF; }
div#l_footer { background-image: url(images/menu_background_trans.png); border-width: 1px 0 1px 0; border-color: #3ee6f6; border-style: solid; text-align: right; }
div#l_footer img { border: none; margin: 4px; }
div#l_content { margin: 0; background-image: url(images/background.png); background-position: -50px top; background-repeat: no-repeat; }
div#l_error_message { border-width: 0 0 1px 0; border-style: solid; border-color: #3ee6f6; text-align: center; }
div#l_warning_message { border-width: 0 0 1px 0; border-style: solid; border-color: #3ee6f6; text-align: center; }
div#l_notice_message { border-width: 0 0 1px 0; border-style: solid; border-color: #3ee6f6; text-align: center; color: #3ee6f6; }
div.container { border-width: 2px; border-style: solid; border-color: #a08d37; background-color: #f6daa7; padding: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; }
div.vertical-tabs a.tab { width: 73px; border-width: 2px 0 2px 2px; border-style: solid; border-color :#a08d37; background-color: #f6daa7; -moz-border-radius: 10px 0 0 10px; -webkit-border-radius: 10px 0 0 10px; position: relative; margin: 0 0 2px 0; opacity: 0.5; font-size: 12px; color: #000000; text-align: center; }
div.vertical-tabs a.tab:hover { opacity: 0.75; }
div.vertical-tabs a.active { border-width: 2px 0 2px 2px; border-style: solid; border-color :#a08d37; background-color: #f6daa7; -moz-border-radius: 10px 0 0 10px; -webkit-border-radius: 10px 0 0 10px; position: relative; width: 75px; opacity: 1.0; }
div.top_nav { padding: 0 0 8px 0; font-size: 12px; }
div.bottom_nav { padding: 8px 0 0 0; font-size: 12px; }
table.list th { color: #000000; font-weight: bold; }
table.list tr.listitem td a { color: #2D2D2D; }
table.list tr.odd { background-color: transparent; }
table.list tr.even { background-color: #ddc879; }
table.list a tr.listitem { background-color: #d7c88e; }
div.buttons a { color: #ffffff; border-style: solid; border-width: 1px; border-color: #3ee6f6; }
div.container div.buttons { margin: 0; }
div.container div.buttons a { border-style: none; color: #a08d37; }
div.pagination { text-align: right; font-size: 13px; font-family: monospace; padding: 0; color: #a08d37; }
div.pagination a { text-decoration: none; background-color: #a08d37; padding: 2px 4px 2px 4px; color: #f6daa7; -moz-border-radius: 4px; -webkit-border-radius: 4px; }
div.pagination div.disabled {}
div.pagination div.next_page {}
div.pagination div.prev_page {}
table.list tr.listitem td img { border: none; }

div.auto_complete ul { border:1px solid #888; margin:0; padding:0; width:100%; list-style-type:none; cursor:pointer; overflow:hidden; }
div.auto_complete ul li.item { margin:0; padding:5px 3px 3px 21px; background-repeat: no-repeat; background-position: 3px 3px; font-size:12px; font-weight:bold; overflow:hidden; }
div.auto_complete ul li div.informal { font-size:10px; font-weight:normal; }
div.auto_complete ul li.selected { background-color: #ddc879; }
div.auto_complete ul strong.highlight { color: #800; margin:0; padding:0; }

/* Menu */
div#l_menu { background-image: url(images/menu_background_trans.png); height: 43px; border-width: 1px 0 1px 0; border-color: #3ee6f6; border-style: solid; }
div#l_menu a { font-size: 16px; display: block; padding: 13px 20px 13px 20px; float: left; background-image: none; text-decoration: none; color: #d8c77c; }
div#l_menu a:hover { background-image: url(images/active_menu.png); background-position: 0 -6px; color: #FFFFFF; }
div#l_menu a.active { background-image: url(images/active_menu.png); background-position: 0 -6px; color: #FFFFFF; }

/* Progress Bar */
div.upload { text-align: center; }
div.upload div#progress { border: 2px inset #ddc879; background-color: #ddc879; margin: 0 25% 0 25%; width: 50%; height: 20px; text-align: left; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
div.upload div#progress div#percent { position: absolute; font-size: 11px; z-index: 99; color: #ffffff; left: 50%; font-weight: bold; padding: 3px 25px 0 25px; width: 50px; }
div.upload div#progress div#bar { position: relative; top: -1px; left: -1px; background-color: #a08d37; width: 0; border: 2px outset #a08d37; height: 18px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; }

div#l_content { padding: 80px 0 100px 0; }
div.container { margin: 0 300px 0 300px; }
div.container div.buttons { text-align: right; font-size: 11px; }

FORM div.field input { width: 205px; }