html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
em, img, strong, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; }
ol, ul { list-style: none; }
table { border-collapse: collapse; border-spacing: 0; }
:focus { outline: 0; }

html, body { height: 100%; font: normal 12px/1.3 "Lucida Sans Unicode", Arial, Helvetica, sans-serif; }
a { outline: none; text-decoration: none; }
p { margin: 0.5em 0 }

/* utility classes */
.clear { clear: both; display: block; margin: 0; padding: 0 }
.clear-after:after { content: ""; display: block; height: 0; clear: both; visibility: hidden }
.float-left { float:left }
.float-right { float:right }
.align-left { text-align: left }
.align-center { text-align: center }
.align-right { text-align: right }
.relative { position:relative }
.dynamic-center { margin:0 auto }
.opacity0 { opacity: 0; position:absolute; }
.opacity50 { opacity: .50 }
.clickable { cursor: pointer; }
.table-center { margin:auto;}
.hide { display: none; }
.img { vertical-align: bottom; }
.row-hidden { display: none !important; }

/* buttons */
button::-moz-focus-inner { padding: 0; border: 0; }

.ui-button,
.ui-cancel { background: none; border: 0; cursor: pointer; display: inline-block; height: auto; overflow: visible; padding: 0; margin: 0; vertical-align: middle; outline: none; }
.ui-button span,
.ui-cancel span { outline: none; display: inline-block; padding: 0; margin: 0; font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size: 12px; font-weight: normal; height: 38px; line-height: 38px; text-align: center; text-decoration: none; text-transform: uppercase; white-space: nowrap; cursor: pointer; }
.ui-button span { padding: 0 0 0 28px; background-position: 0 0; }
.ui-button span span { padding: 0 28px 0 0; background-position: 100% -123px; }
.ui-button.hover span,
.ui-button:hover span { background-position: 0 -41px; }
.ui-button.hover span span,
.ui-button:hover span span { background-position: 100% -164px; }
.ui-button.disabled,
.ui-button.processing { cursor: default; }
.ui-button.disabled span,
.ui-button.processing span { background-position: 0 -82px; cursor: default; }
.ui-button.disabled span span,
.ui-button.processing span span { background-position: 100% -205px; cursor: default; }
a.ui-button.imgbutton span { padding: 0 0 0 10px; }
a.ui-button.imgbutton span span { padding: 0 10px 0 0; }
a.ui-button.imgbutton span span span { padding: 0 5px; }
.ui-controls { border: 0; margin: 1.5em 0; padding: 0; overflow: hidden; clear: both; }

/* breadcrumbs */
.ui-breadcrumb { list-style: none; margin: 0; padding: 0; float: left }
.ui-breadcrumb li { float: left; margin-right: 5px }
.ui-breadcrumb li.last { background: none }

/* dropdown */
.ui-dropdown { float: left; position: relative; width: 175px }
.ui-dropdown .dropdown-toggler { display: block; height: 30px; overflow: hidden; z-index: 20; padding-right: 30px; }
.ui-dropdown .dropdown-toggler span { padding-left: 10px; height: 30px; line-height: 30px; display: block; }
.ui-dropdown .dropdown-wrapper { clear: both; display: block; position: absolute; z-index: 20; top: 30px; right: 0; width: 150px }
.ui-dropdown .dropdown-wrapper ul { list-style: none; margin: 0; padding: 0 }
.ui-dropdown .dropdown-wrapper li.empty { padding: 5px; }

/* toasts */
#toast-container { position: fixed; bottom: 20px; left: 20px; z-index: 100; }
.ui-toast { width: 277px; margin-bottom: 15px; position: relative; }
.ui-toast .toast-top,
.ui-toast .toast-bot { height: 35px; display: block; }
.ui-toast .toast-content { padding: 0 35px; }
.ui-toast .toast-arrow { width: 25px; height: 11px; position: absolute; bottom: 6px; left: 70px; }
.ui-toast .toast-close { width: 11px; height: 11px; position: absolute; top: 20px; right: 20px; overflow: hidden; display: block; background: url("../images/layout/toast-close.gif") no-repeat; }
.ui-toast .toast-close:hover { background-position: 0 -11px }

/* search */
#search-field { color: #707070; width: 315px; padding: 3px; border: none; background: transparent }
#search-field.active,
#search-field:focus { font-weight: bold; }

/* context menu */
.ui-context { display: none; overflow: hidden; position: absolute; left: 0; top: 15px; z-index: 9000; opacity: .98; width: 225px; background: #151616; border: 1px solid #262626; font: normal 12px "Arial", sans-serif; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: #000 0 0 10px; -webkit-box-shadow: #000 0 0 10px; box-shadow: #000 0 0 10px; }
.ui-context a { color: #00B6FF; text-decoration: none; }
.ui-context a:hover { color: #fff; }
.ui-context a.pinned { cursor: default; }
.ui-context .context { padding: 10px; }
.ui-context .context strong { color: #fff; font-size: 14px; }
.ui-context .context span { color: #5d636b; }
.ui-context .context .close { padding: 0; position: absolute; top: 10px; right: 10px; width: 11px; height: 11px; display: block; background: url("../images/context/icons.gif") no-repeat; }
.ui-context .context .close:hover { background-position: 0 -26px; }
.ui-context .context .context-user { padding-bottom: 10px; }
.ui-context .context .context-links { height: 30px; }
.ui-context .context .context-links a { display: block; line-height: 30px; float: left; padding-left: 30px; height: 30px; background: #292a2a; margin-right: 1px; }
.ui-context .context .context-links a:hover { background-color: #525252; }
.ui-context .context .context-links .link-first { -moz-border-radius-topleft: 3px; -moz-border-radius-bottomleft: 3px; -webkit-border-top-left-radius: 3px; -webkit-border-bottom-left-radius: 3px; border-top-left-radius: 3px; border-bottom-left-radius: 3px; padding-right: 10px; }
.ui-context .context .context-links .link-last { -moz-border-radius-topright: 3px; -moz-border-radius-bottomright: 3px; -webkit-border-top-right-radius: 3px; -webkit-border-bottom-right-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; }
.ui-context .character-list { padding-top: 1px; color: #5b616a; overflow: hidden; background: url("../images/context/divider.gif") 50% 0 no-repeat; }
.ui-context .character-list.loading-chars { padding: 50px; background: url("../images/loaders/uber-loading.gif") 50% 50% no-repeat; }
.ui-context .character-list .primary { padding-bottom: 2px; }
.ui-context .character-list .primary .char { display: block; padding: 10px; opacity: .50; background: url("../images/context/divider.gif") 50% 100% no-repeat; }
.ui-context .character-list .primary .char span { display: block; }
.ui-context .character-list .primary .char .race,
.ui-context .character-list .primary .char .class,
.ui-context .character-list .primary .char .realm { text-transform: uppercase; color: #5b616a; font-size: 11px; }
.ui-context .character-list .primary .char .name { font-size: 14px; color: #fff; font-weight: bold; }
.ui-context .character-list .primary .char .pin { margin-top: 17px; float: right; width: 16px; height: 16px; display: block; background: url("../images/context/icons.gif") 0 -52px no-repeat; }
.ui-context .character-list .primary .char.pinned .pin { background-position: 0 -83px; }
.ui-context .character-list .primary .char.pinned,
.ui-context .character-list .primary .char:hover { color: #fff; background-color: #080809; opacity: 1; }
.ui-context .character-list .primary .char:last-child { margin: 0; background-image: none; }
.ui-context .character-list .secondary .viewport { width: 185px; float: left; height: 265px; overflow: hidden; position: relative; }
.ui-context .character-list .secondary .viewport a { display: block; padding: 5px; }
.ui-context .character-list .secondary .viewport a img { vertical-align: middle; margin-top: -2px; }
.ui-context .character-list .secondary .viewport a:hover { background: #080809; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
.ui-context .character-list .secondary .viewport a.filtered { display: none; }
.ui-context .character-list .secondary .overview { position: absolute; left: 0; top: 0; width: 185px; }
.ui-context .character-list .secondary .scrollbar { position: relative; float: right; width: 15px; }
.ui-context .character-list .secondary .track { background: #080808; height: 100%; width: 13px; position: relative; padding: 1px; -moz-border-radius: 5px; border-radius: 5px; }
.ui-context .character-list .secondary .thumb { height: 20px; width: 13px; cursor: pointer; overflow: hidden; position: absolute; top: 0; background: #24292e; -moz-border-radius: 5px; border-radius: 5px; }
.ui-context .character-list .secondary .thumb .end,
.ui-context .character-list .secondary .disable { display: none; }
.ui-context .character-list .secondary .char-wrapper { padding: 10px; height: 265px; width: 205px; }
.ui-context .no-results { text-align: center; padding: 15px; }
.ui-context .char-wrapper { padding-bottom: 1px; clear: both; background: #0d0e10 url("../images/context/divider.gif") 50% 100% no-repeat; -moz-box-shadow: #000 0 0 5px inset; -webkit-box-shadow: #000 0 0 5px inset; box-shadow: #000 0 0 5px inset; }
.ui-context .filter { text-align: center; }
.ui-context .filter .input { margin-bottom: 5px; }
.ui-context .filter,
.ui-context .manage-chars { padding: 10px 10px 8px 10px; display: block; line-height: 125%; }
.ui-context .manage-chars span { color: #5b616a; }
.ui-context a.manage-chars:hover span { color: #aaa; }
.ui-context a.manage-chars:hover span.plus { background-position: 0 -265px; }
.ui-context .manage-chars .plus { width: 15px; height: 15px; display: block; float: right; margin: 15px 0 15px 10px; background: url("../images/context/icons.gif") 0 -114px no-repeat; }

.context-link { background-position: 100% 4px; background-repeat: no-repeat; font-weight: bold; padding-right: 16px; white-space: nowrap; }

/* pagination */
.ui-pagination { height: 22px; overflow: hidden }
.ui-pagination li { display: inline-block; margin: 0 1px; }
.ui-pagination li a,
.ui-pagination li.expander { width: 30px; height: 22px; line-height: 22px; display: block; text-align: center; }
.ui-pagination li.expander { display: inline-block; font-weight: bold; }
.ui-pagination li.last-item,
.ui-pagination li.first-item { padding-right: 20px; background: url("../images/icons/pagination.png") 93% 50% no-repeat; }
.ui-pagination li.last-item { background-position: 4px 50%; padding: 0 1px 0 20px; }
.ui-pagination li.last-item a,
.ui-pagination li.first-item a,
.ui-pagination li.cap-item a { width: auto; padding: 0 8px; }

/* tooltip */
.ui-tooltip { position: absolute; z-index: 1000; width: auto; height: auto; max-width: 300px; }
.ui-tooltip .tooltip-content { width: auto; height: auto; }
.ui-tooltip table { border-collapse: collapse; border-spacing: 0; }
.ui-tooltip td { margin: 0; padding: 0 }
.tooltip-frame { background: transparent; border: none; display: none; height: 0; position: absolute; z-index: 999; width: auto; height: auto; max-width: 300px; }

/* menu */
.flyout-menu { z-index: 75; padding: 0; width: auto; position: absolute }
.flyout-menu ul { list-style: none; margin: 0; padding: 0; float: left; }
.flyout-menu ul li { clear: both; position: relative; }
.flyout-menu ul li a { display: block; padding: 5px; text-decoration: none; }
.flyout-menu ul li .flyout-menu { top: -1px; display: none; z-index: 80; }
.flyout-menu .header { padding: 5px; display: block; }

/* overlay */
#blackout { width: 100%; height: 100%; top: 0; left: 0; background: #000; opacity: .7; display: none; position: fixed; z-index: 9001; }
#overlay { position: fixed; z-index: 9002; }

/* service bar */
#service { position: absolute; z-index: 75; top: 0; right: 0; }
.service-bar { position: relative; z-index: 75; font-size: 11px; font-family: "Lucida Sans Unicode", "Lucida Grande", "Arial", sans-serif; display: inline-block; text-align: right; -moz-user-select: none; -webkit-user-select: none; user-select: none; }
.service-cell { position: relative; background: url("../images/service-bar/background.png") repeat-x 0 -200px; color: #7c7c7c; display: block; float: left; line-height: 33px; padding: 0 0 7px 0; }
.service-cell a { color: #d37201; text-decoration: none; }
.service-cell a:hover,
.service-cell a:focus { color: #FFF; }
.service-home { background-position: 0 0; background-repeat: no-repeat; }
.service-home a { display: block; line-height: 33px; border-left: 0; text-indent: -9999px; width: 48px; padding: 0 0 0 7px; background: url("../images/service-bar/background.png") no-repeat 0 -40px; }
.service-home a:hover,
.service-home a:focus { background-color: transparent; background-position: 0 -80px; }
.service-welcome { padding: 0 15px 7px 15px; }
.service-welcome .employee { display: inline-block; vertical-align: middle; width: 27px; height: 32px; background: url("../images/icons/employee.gif") no-repeat center center; }
.service-link { font-size: 10px; text-transform: uppercase; display: block; line-height: 33px; padding: 0 1.5em; border-left: 1px solid #862d05; }
.service-link:hover,
.service-link:focus { background-color: #862d05; }
.service-cell .service-link.active { background: #C5C5C5; color: #000; }
.service-news a { display: block; border-right: 1px solid #33373B; border-left: 0; width: 50px; background: url("../images/service-bar/background.png") repeat-x -117px -160px; }
.service-explore { background-position: 100% 0; padding: 0 0 7px 0; }
.service-explore a.dropdown { color: #f7ad01; text-transform: uppercase; display: block; line-height: 33px; padding: 0 40px 0 1.5em; background: url("../images/service-bar/background.png") repeat-x 100% -40px; }
.service-explore a.dropdown:hover,
.service-explore a.dropdown:focus { background-position: 100% -80px; }
.service-explore a.active,
.service-explore a.active:hover,
.service-explore a.active:focus { background-position: 100% -120px; }
.service-language a { height: 33px; padding: 0; width: 65px; background: url("../images/service-bar/map.png") 50% 6px no-repeat; }
.service-language a:hover { background-position: 50% -40px; }
/* explore menu */
.explore-menu { position: absolute; z-index: 85; top: 33px; right: 0; width: 425px; text-align: left; }
.explore-primary { line-height: 1.5; overflow: hidden; padding: 1em 23px 1em 25px; background: url("../images/service-bar/explore-menu.png") repeat-y 0 0; }
.explore-secondary { line-height: 1.1; overflow: hidden; padding: 0 7px 33px 9px; height: 217px; background: url("../images/service-bar/explore-menu.png") repeat-y -425px 0; }
.explore-caption { font-size: 16px; line-height: 1.333; color: #393939; letter-spacing: -1px; margin: 0 0 .5em 0; font-weight: bold; display: block; color: #E8EBF0; font-weight: normal; line-height: 1.333; margin: 0; }
.explore-nav { margin: 0; padding: 0; }
.explore-nav li { list-style: none; }
.explore-nav { width: 50%; float: left; }
.explore-nav a { display: block; color: #94989F; margin: 0 0 .5em 0; padding: 0 0 .75em 0; border-bottom: 3px solid #2A5164; }
.explore-nav a:hover,
.explore-nav a:focus,
.explore-nav a:active { border-color: #FFF; }
.explore-links { width: 40%; float: right; }
.explore-links ul { margin: 0; padding: 0; }
.explore-links ul li { list-style: none; }
.explore-links .explore-caption { margin: 0 0 .25em 0; padding: 0 4px; font-size: 14px; }
.explore-links a { margin: 0 0 .1em 0; color: #94989F; display: block; padding: 2px 4px; -moz-border-radius: 2px; border-radius: 2px; }
.explore-links a:hover,
.explore-links a:focus,
.explore-links a:active { background: #212832; }
.explore-secondary { margin: 0; }
.explore-secondary li { list-style: none; }
.explore-secondary li { width: 136px; float: left; }
.explore-secondary .explore-game-wow { width: 137px; }
.explore-secondary .explore-caption { font-size: 14px; }
.explore-secondary a { display: block; padding: 120px 10px 61px 10px; height: 35px; font-size: 11px; color: #94989F; }
.explore-game a:hover,
.explore-game a:focus { background: url("../images/service-bar/explore-menu.png") repeat-y -859px 0; }
.explore-game-sc2 a:hover,
.explore-game-sc2 a:focus { background-position: -859px 0; }
.explore-game-wow a:hover,
.explore-game-wow a:focus { background-position: -995px 0; }
.explore-game-d3 a:hover,
.explore-game-d3 a:focus { background-position: -1132px 0; }


/* footer */
#footer { font: normal 12px "Lucida Sans Unicode", Arial, Helvetica, sans-serif; padding: 25px 0 0 0; }
#footer a { color: #697489; }
#footer a:hover { color: #dcdcdc; }
#footer h3,
#footer h3 a { font-weight: normal; font-size: 13px; color: #b2bac7; text-transform: uppercase; }
#footer-ad { float: right; width: 300px; padding-bottom: 20px; }
#footer-ad a { color: #b2bac7; }
#sitemap .column { float: left;  padding-bottom: 5px; }
#sitemap .column ul a { display: block; margin: 2px 0; }
#sitemap.footer-ads .column { width: 170px; }
#copyright { color: #2a2c2f; border-top: 1px solid #414a56; text-transform: uppercase; font-size: 10px; clear: both; padding: 10px 0;  }
#copyright a { margin-left: 15px; color: #b2bac7; }
#legal { padding: 15px 0; }
#legal #blizzard { float: left; }
#legal #legal-ratings { float: right; vertical-align: top; }
#legal #legal-ratings .legal-image { vertical-align: top; }
#international { display: none; border-bottom: 1px solid #414A56; padding: 25px 0 25px 25px; background: url("../images/layout/world-map.gif") 50% 50% no-repeat; }
#international h3 { margin: 0 0 10px 0; padding: 0; }
/* language switcher */
#international { display: none; border-bottom: 1px solid #414A56; padding: 25px 0 25px 25px; background: url("../images/layout/world-map.gif") 50% 50% no-repeat; }
#international h3 { margin: 0 0 10px 0; padding: 0; }
#international .column { float: left; padding: 20px; width: 115px; }
#international .column a { display: block; padding: 3px 0; }
#international .column a.selected { background: url("../images/icons/i18n-support.gif") 0 4px no-repeat; padding-left: 15px; margin-left: -15px; color: #fff; }
#change-language { float: right; background: url("../images/icons/arrows.gif") 100% -99px no-repeat; padding-right: 20px }
#change-language.open { background-position: 100% 1px; }
#change-language span { display: inline-block; background: url("../images/icons/map-small.gif") 0 50% no-repeat; padding: 2px 0 2px 35px }

/* slideshow */
#slideshow { height: 300px; width: 640px; overflow: hidden; position: relative; }
#slideshow .container { height: 300px; width: 640px; position: relative; z-index: 10; }
#slideshow .mask { height: 300px; width: 640px; position: absolute; top: 0; left: 0; z-index: 30; cursor: pointer; }
#slideshow .caption { position: absolute; left: 30px; bottom: 30px; width: 580px; z-index: 35; }
#slideshow .caption h3 { font-size: 28px; color: #fff; font-weight: normal; }
#slideshow .paging { position: absolute; top: 15px; right: 15px; width: 15px; z-index: 35; }
#slideshow .paging a { display: block; height: 10px; margin-bottom: 5px; background-color: #fff; opacity: .5; -moz-border-radius: 3px; border-radius: 3px }
#slideshow .paging a:hover,
#slideshow .paging a.current { opacity: 1; }
#slideshow .preview { color: #000; text-align: center; width: 100px; padding: 5px; background: #fff; position: absolute; display: none; right: 35px; top: 15px; -moz-border-radius: 5px; border-radius: 5px; z-index: 35; }
#slideshow .preview span { display: block; }
#slideshow .slide { height: 300px; width: 640px; position: absolute; top: 0; left: 0; background-position: 0 0; background-repeat: no-repeat; z-index: 15; }
#slideshow .slide .click-area { width: 640px; height: 300px; position: absolute; bottom: 0; left: 0; z-index: 20; }
#slideshow .slide .click-area embed { z-index: 25; }

/* embedded login */
#login-embedded { width: 400px; position: fixed; top: 50%; left: 50%; padding: 0; margin: -200px; z-index: 9005; height: 300px; background: #000; border: 5px solid #525e67; -moz-border-radius: 3px; border-radius: 3px; -moz-box-shadow: #000 0 0 20px; box-shadow: #000 0 0 20px; }
#login-embedded object,
#login-embedded iframe { width: 400px; margin: 0; padding: 0; border: none; }
#embedded-loader { width: 200px; height: 200px; position: fixed; top: 50%; left: 50%; margin: -100px; z-index: 9005; background: url("../images/loaders/uber-loading.gif") 50% 50% no-repeat; }

/* bml */
.bml-toolbar button { width: 34px; height: 26px; padding: 0; text-indent: -9999px; border: none; background-repeat:no-repeat; margin: 0 2px 5px 0; cursor: pointer; }
.bml-toolbar .bml-bold:hover,
.bml-toolbar .bml-bold.on { background-position: -34px 0; }
.bml-toolbar .bml-italics { background-position: 0 -26px; }
.bml-toolbar .bml-italics:hover,
.bml-toolbar .bml-italics.on { background-position: -34px -26px; }
.bml-toolbar .bml-underline { background-position: 0 -52px; }
.bml-toolbar .bml-underline:hover,
.bml-toolbar .bml-underline.on { background-position: -34px -52px; }
.bml-toolbar .bml-list { background-position: 0 -78px; }
.bml-toolbar .bml-list:hover,
.bml-toolbar .bml-list.on { background-position: -34px -78px; }
.bml-toolbar .bml-listItem { background-position: 0 -208px; }
.bml-toolbar .bml-listItem:hover,
.bml-toolbar .bml-listItem.on { background-position: -34px -208px; }
.bml-toolbar .bml-code { background-position: 0 -104px; }
.bml-toolbar .bml-code:hover,
.bml-toolbar .bml-code.on { background-position: -34px -104px; }
.bml-toolbar .bml-quote { background-position: 0 -130px; }
.bml-toolbar .bml-quote:hover,
.bml-toolbar .bml-quote.on { background-position: -34px -130px; }
.bml-toolbar .bml-unformat { background-position: 0 -156px; }
.bml-toolbar .bml-unformat:hover,
.bml-toolbar .bml-unformat.on { background-position: -34px -156px; }
.bml-toolbar .bml-cleanup { background-position: 0 -182px; }
.bml-toolbar .bml-cleanup:hover,
.bml-toolbar .bml-cleanup.on { background-position: -34px -182px; }
.bml-toolbar .bml-url { background-position: -69px 0; }
.bml-toolbar .bml-url:hover,
.bml-toolbar .bml-url.on { background-position: -103px 0; }
.bml-editor { margin: 5px 0 7px; background: #fff; height: 200px; padding: 10px; -moz-border-radius: 5px; border-radius: 5px; cursor: text; -moz-box-shadow: 0 0 10px -3px #444444; box-shadow: 0 0 10px -3px #444444;}
.bml-editor iframe { width:100%; height: 200px; }

/* misc */
#ajax_error { display:none; }
.response-error { border: 1px solid #c90000 !important; -moz-box-shadow: 0 0 20px -1px #c90000; box-shadow: 0 0 20px -1px #c90000; } /*general input error style*/

/* borders */
.border-2 { -moz-border-radius: 2px; border-radius: 2px; }
.border-3 { -moz-border-radius: 3px; border-radius: 3px; }
.border-4 { -moz-border-radius: 4px; border-radius: 4px; }
.border-5 { -moz-border-radius: 5px; border-radius: 5px; }
.border-6 { -moz-border-radius: 6px; border-radius: 6px; }
.border-7 { -moz-border-radius: 7px; border-radius: 7px; }
.border-8 { -moz-border-radius: 8px; border-radius: 8px; }
.border-9 { -moz-border-radius: 9px; border-radius: 9px; }
.border-10 { -moz-border-radius: 10px; border-radius: 10px; }

/* Ads */
#sidebar-bnet-ads { margin:0 0 25px 3px; font-size:11px; line-height:normal; }
#sidebar-bnet-ads .sidebar-content { padding-top:15px; }
#sidebar-bnet-ads .desc { padding:5px 0;}
#sidebar-bnet-ads .subtitle { padding-top:5px; }