html, body { font-family:Arial; color:#7eadc1; min-width:994px; background:#01080e url(/images/body-bg-baked.jpg) 50% 0 no-repeat }

a { color:#56c702 }
a:hover,
a:focus { color:#FFF }
h2.default-header { font-size:24px; color:#d9e5e8; text-transform:uppercase; font-family:Arial; font-weight:normal; padding:33px 0 12px 30px }
.section-headline { color:#00afff; font-family:Arial; font-size:18px; padding:0 0 24px; font-weight:normal; text-transform:uppercase }
.sub-headline { color:#FFF; padding:3px 0 4px 0 }
.section-desc {padding:13px 0 19px 30px; width:540px; font-size:12px; line-height:18px;}
.service-unavailable { color:#45b3d8; font-size:24px; text-align:center; padding-top:70px }

/* tooltip */
.ui-tooltip { color:#0b2137; background-color:#6ec7f6; background-image:-webkit-gradient(linear, left bottom, left top, color-stop(0.08, rgb(70,174,234)), color-stop(0.72, rgb(138,218,255))); background-image:-moz-linear-gradient(center bottom, rgb(70,174,234) 8%, rgb(138,218,255) 72%); padding:10px; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; -moz-box-shadow:#000 0 0 15px; -webkit-box-shadow:#000 0 0 15px; box-shadow:#000 0 0 15px; font-size:12px }
.ui-tooltip h3 { font-size:16px; font-weight:normal } /* title of the tooltip */
.ui-tooltip li { clear:both }
.ui-tooltip a { color:#0b2137 }
.ui-tooltip .tip { border-bottom:0 }
.ui-tooltip .float-right { padding-left:30px }
.ui-tooltip .frame-56 { position:absolute; left:-75px; top:-10px }
.ui-tooltip .frame-150 { position:absolute; left:-175px; top:-10px }
.ui-tooltip .tooltip-content { position:relative }
.ui-tooltip .tooltip-list { margin-top:10px }
.ui-tooltip .tooltip-list li { margin:1px 0 }
.ui-tooltip .tooltip-list .icon-frame { float:left; margin-right:5px }

/* breadcrumbs */
.content-trail { padding:10px 0 0 0; height:22px; background:url(/images/breadcrumb-flourish.png) no-repeat 100% -28px  }
.content-trail .content-trail-wrapper { height:24px; background:url(/images/breadcrumb-flourish.png) no-repeat -538px -26px; float:left; padding-left:22px }
.content-trail .content-trail-cap { background:url(/images/breadcrumb-flourish.png) no-repeat 0 10px; width:13px; height:24px; float:left }
.content-trail .content-trail-end { width:400px; float:left; height:24px; background:url(/images/breadcrumb-flourish.png) no-repeat -538px -38px }

.ui-breadcrumb { font-size:12px; font-family:Lucida Sans Unicode, Arial, Helvetica, sans-serif }
.ui-breadcrumb li { padding-right:25px; background:url(/images/flyout-arrows.gif) 98% -120px no-repeat }
.ui-breadcrumb a { color:#01c0fd }
.ui-breadcrumb li.last { background:none; padding-right:5px }
.ui-breadcrumb .last a,
.ui-breadcrumb a.opened { color:#FFF; border-color:#686B6F }

/* context menu */
.ui-context { background-color:#021a28; border-color:#003952 }
.ui-context .context .context-links a { background-image:url(/images/context.gif); background-repeat:no-repeat; background-color:#002d46; font-weight:bold }
.ui-context .context .context-links a:hover { background-color:#094363 }
.ui-context .context .context-links .icon-profile { background-position:0 0 }
.ui-context .context .context-links .icon-posts { background-position:0 -30px; -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 .context .context-links .icon-ignore { background-position:0 -60px }
.ui-context .context .context-links .icon-ban { background-position:0 -90px }
.ui-context .context .context-links .icon-auctions { display:none }
.ui-context .context .context-links .icon-events { display:none }
.ui-context .context .realm,
.ui-context .character-list .primary .char .realm { display:inline; padding-right:15px; background:url(/images/arrow-up-down.gif) 100% 2px no-repeat }
.ui-context .context .realm.down,
.ui-context .character-list .primary .char .realm.down { background-position:100% -14px }
.ui-context .context .realm.unknown,
.ui-context .character-list .primary .char .realm.unknown { background-position:100% -28px }
.ui-context .character-list { background-image:none }
.ui-context .char-wrapper { background-color:#021a28; background-image:none; -moz-box-shadow:none; -webkit-box-shadow:none; box-shadow:none }
.ui-context .character-list .primary .char.pinned,
.ui-context .character-list .primary .char:hover { background-color:#032a40 }
.ui-context .character-list .primary .char { background-image:none }
.context-link { color:#fff; background:url(/images/char-arrow.png) 100% 3px no-repeat; padding-right:14px }
.context-link:hover,
.context-link.context-open { background-position:100% 3px }
.ui-context .character-list .primary .char .race,
.ui-context .character-list .primary .char .class,
.ui-context .character-list .primary .char .realm { color:#7eadc1 }

/* dropdown */
.ui-dropdown { border:none; height:27px }
.ui-dropdown .dropdown-toggler { background:url(/images/dropdown-right.gif) 100% 0 no-repeat; height:27px }
.ui-dropdown .dropdown-toggler:hover { background:url(/images/dropdown-right.gif) 100% -30px no-repeat }
.ui-dropdown .dropdown-toggler span { color:#fab000; font-size:11px; line-height:27px; padding-left:10px; height:27px; display:block; background:url(/images/dropdown-left.gif) 0 0 no-repeat }
.ui-dropdown .dropdown-toggler:hover span { color:#fff; background:url(/images/dropdown-left.gif) 0 -30px no-repeat }
.ui-dropdown.opened .dropdown-toggler { background:url(/images/dropdown-right.gif) 100% -60px no-repeat }
.ui-dropdown.opened .dropdown-toggler span { color:#fffac1; background:url(/images/dropdown-left.gif) 0 -60px no-repeat }
.ui-dropdown .dropdown-wrapper { background-color:#021a28; border:1px solid #003952; padding:5px; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px }
.ui-dropdown .dropdown-wrapper ul li a { padding:5px; display:block }
.ui-dropdown .dropdown-wrapper ul li a:hover { text-decoration:none; color:#fff; background:#094363; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px }

/* pagination */
.ui-pagination { background:url(/images/pagination.gif) 0 50% no-repeat; padding-left:25px }
.ui-pagination li a { background:#021A28; color:#A3C9E4; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px }
.ui-pagination li a:hover { background-color:#fff; color:#00527A }
.ui-pagination li.current a { background-color:#A3C9E4; color:#00527A; font-weight:bold }

.data-options { color: #00527A; padding: 0 10px; height: 40px; line-height: 40px;}
.data-options strong { color: #A3C9E4 }
.data-options .input { padding: 1px }
.data-options .option { float: right; padding-left: 15px }
.data-options .option .input { padding-right: 2px }
.data-options .ui-pagination { padding: 0; background: none; height: 20px; display: inline }
.data-options .ui-pagination a { height: 20px; line-height: 20px; color: #A3C9E4 }



/* buttons */
.ui-button span,
.ui-cancel span { line-height:38px }
.button1 span { background-image:url(/images/button-1.png); background-repeat:no-repeat; color:#fff }
.button1.hover span,
.button1:hover span { color:#fff }
.button1.disabled span,
.button1.processing span { color:#fff }
.button1-next span { background-image:url(/images/button-1-next.png) }
.button1-next span span { padding-right:40px }
.button1-previous span { background-image:url(/images/button-1-previous.png) }
.button1-previous span span { padding-left:12px }
.button1-next-disabled span, .button1-next-disabled:hover span  { background-position: 0 -82px; cursor:default;}
.button1-next-disabled span span, .button1-next-disabled:hover span span { background-position: 100% -205px; }
.button2-next span { background-image:url(/images/button-2-next.png); line-height:26px; padding-left:16px }
.button2-next span span { padding-right:27px; margin:0; font-size:11px; text-transform:none }
.button2-previous span { background-image:url(/images/button-2-previous.png); line-height:26px; padding-right:14px !important }
.button2-previous span span { padding-left:1px; margin:0; font-size:11px; text-transform:none }

.button2 span,
.button3 span { padding:0 0 0 13px; height:30px; line-height:30px; font-size:11px }
.button2 span span,
.button3 span span { padding:0 13px 0 0 }
.button2 span { background-image:url(/images/button-2.png); background-repeat:no-repeat; color:#fff }
.button2.hover span,
.button2:hover span { color:#fff }
.button2.disabled span,
.button2.processing span { color:#fff }
.button3 span { background-image:url(/images/button-3.gif); background-repeat:no-repeat; color:#00B4FF }
.button3.hover span,
.button3:hover span { color:#fff }
.button3.disabled span,
.button3.processing span { color:#fff }

.button4 span { line-height:58px; height:60px; font-size:22px; text-transform:none; background-image:url(/images/button-4.png); background-repeat:no-repeat; color:#fff }
.button4-next span { padding-left:50px; background-image:url(/images/button-4-next.png) }
.button4-next span span { padding-left:0; padding-right:75px }
.button4.hover span,
.button4:hover span { color:#fff; background-position:0 -60px }
.button4-next-disabled span, .button4-next-disabled:hover span { color:#fff; background-position: 0 -120px; cursor: default;}
.button4 span span { background-position:100% -180px }
.button4:hover span span { background-position:100% -240px }
.button4-next-disabled span span, .button4-next-disabled:hover span span { background-position: 100% -300px; }

/* search bar */
.search-bar { position:absolute; right:5px; top:75px; width: 370px; }
.search-bar div { position: relative; }
.search-bar .input { width: 350px; background:#FFF; border: none; padding:8px; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px }
.search-bar .search-field { z-index: 5;}
.search-bar .search-field.active,
.search-bar .search-field:focus { color:#000; }
.search-bar .search-button { border:none; outline:none; position: absolute; z-index: 10; right: 7px; top: 4px; cursor:pointer; background:url(/images/icon.gif) 50% no-repeat; width:23px; height:23px }


/* menu */
.flyout-menu { background:#021016; opacity:.98; border:1px solid #0a3a58; padding:2px; -moz-border-radius:3px; -moz-box-shadow:0 0 10px #000; -webkit-border-radius:3px; -webkit-box-shadow:0 0 10px #000; border-radius:3px; box-shadow:0 0 10px #000 }
.flyout-menu ul { width:200px }
.flyout-menu ul li a { width:184px; background-color:#02121a; color:#00a6f1; padding:6px 8px; border-bottom:1px solid #06202f }
.flyout-menu ul li a.children { background-image:url(/images/flyout-arrows.gif); background-repeat:no-repeat; background-position:98% -115px }
.flyout-menu ul li a.opened,
.flyout-menu ul li a:hover { color:#fff; background-color:#062232; background-position:98% -150px }
.flyout-menu ul li .flyout-menu { left:194px; top:-2px }
.flyout-menu ul > li:last-child > a { border-bottom:none }

/* layout */
#wrapper { width:1006px; margin:0 auto; position:relative }
#content { margin:0 6px; background:#011724 url(/images/bg-center.gif) repeat-y }
#content-top { background:url(/images/content-top.jpg) 50% 0 no-repeat  }
#content-bot { padding-bottom:25px;  background:url(/images/content-bot.jpg) 50% 100% no-repeat; }
#content-bottom-corners { min-height:510px; background:url(/images/clip.gif) 0 100% no-repeat }

/* lower content wrappers */
#content-bot .lower-content-panel-wrapper { background:url(/images/lower-content-panel-bg.jpg) repeat-y; margin-top:29px }
#content-bot .lower-content-panel-top { background:url(/images/lower-content-panel-top.jpg) no-repeat }
#content-bot .lower-content-panel-inner { background-repeat:no-repeat }
#content-bot .lower-content-panel-bottom { box-shadow:0 0 30px #000000; padding:36px 0 2px 30px; background:url(/images/lower-content-panel-bottom.gif) 0 100% no-repeat; min-height:420px }

#content-bot .lower-content-wide-wrapper { background:#002234 url(/images/lower-content-wide-bg.gif) repeat-y ; margin-top:20px;}
#content-bot .lower-content-wide-top { background: url(/images/lower-content-wide-top.jpg) no-repeat }
#content-bot .lower-content-wide-inner { background-repeat:no-repeat }
#content-bot .lower-content-wide-bottom { box-shadow:0 0 30px #000000; padding-left:30px; padding-top:36px; padding-bottom:5px; background:url(/images/lower-content-wide-bottom.gif) 0 100% no-repeat; min-height:420px }

/* header */
#header { padding-top:40px; background:transparent; position:relative }
#header #logo { width:325px; height:137px; height:175px; overflow:hidden; margin-top:-22px }
#header #logo a { width:325px; height:175px; display:block; border:none; text-indent:-9999px; background: transparent; }
#header #header-plate { height:94px; position:relative }
#header .ui-context { top:80px; left:20px }
#header .user-plate { width:346px; height:89px; padding:0 2px; position:absolute; right:3px }
#header .card-login { line-height:20px; width:210px; height:59px; margin-top:14px; padding:21px 110px 0 27px; display:block; background:url(/images/login.jpg) no-repeat; color:#b6d1e4 }
#header .card-login strong { color:#7dfc20 }
#header .card-login:hover { color:#FFF; background-position:0 -81px }
#header .card-login:hover strong { color:#FFF }
#header .card-default,
#header #user-plate { line-height:20px; width:306px; height:68px; margin-top:14px; padding:12px 14px 0 27px; display:block; background:url(/images/logged-in.jpg) no-repeat; color:#b6d1e4 }
#header #user-plate:hover { background-position:0 -81px }
#header #user-plate:hover #user-portrait .icon-frame .portrait-mask { background-position:100% -88px }
#header .context-link { color:#56C702; font-size:22px; padding-right:18px; font-weight:normal; background:url(/images/portrait-frame.png) 100% 9px no-repeat }
#header .context-link:hover { color:#fff; background-position:100% -37px }
#header #user-plate #user-meta { padding-top:6px }
#header #user-plate #user-portrait { display:block; float:right; width:62px; height:62px; overflow:hidden  }
#header #user-plate #user-portrait .icon-frame { display:block; width:62px; height:62px }
#header #user-plate #user-portrait .icon-frame a { display:block; height:62px; width:62px; overflow:hidden }
#header #user-plate #user-portrait .icon-frame .portrait-mask { display:block; width:62px; height:62px; background:url(/images/portrait-frame.png) 0 -88px no-repeat }

#header #user-plate #user-portrait .icon-frame .wow-portrait { margin:2px 0 0 2px }
#header #user-plate #user-portrait .icon-frame .wow-portrait-mask { display:block; width:62px; height:62px; background:url(/images/portrait-frame.png) 0 -88px no-repeat; position:relative; top:-64px; left:0 }
#header #user-plate:hover #user-portrait .icon-frame .wow-portrait-mask { background-position:100% -88px }

/* default */
#header .card-default .icon-frame { display:block; width:62px; height:62px; float:right }
#header .card-default .player-name { padding-top:6px }
#header .card-default .context-link { font-size:22px; padding-right:18px; font-weight:normal; background:url(/images/portrait-frame.png) 100% 9px no-repeat }
#header .card-default .context-link:hover { background-position:100% -37px }

/* nochars */
#header .card-nochars { line-height:20px; width:306px; height:68px; margin-top:14px; padding:12px 14px 0 27px; display:block; background:url(/images/logged-in.jpg) no-repeat; color:#b6d1e4 }
#header .card-nochars .player-name { font-weight:bold; padding-top:7px }

/* menu */
.menu { width:648px; height:81px; position:absolute; left:6px; top:13px }
.menu li { float:left }
.menu a { width:107px; height:27px; display:block; padding-top:54px; background:url(/images/menu-tabs.jpg) 0 81px no-repeat; text-align:center; color:#88e8ff; text-transform:uppercase; font-size:10px }
.menu a:hover { color:#9fe7ff; text-decoration:none }
.menu .menu-active { color:#FFF }
.menu .menu-home a { width:111px }
.menu .menu-home a:hover,
.menu .menu-home a:focus { background-position:0 0 }
.menu .menu-home .menu-active,
.menu .menu-home .menu-active:hover,
.menu .menu-home .menu-active:focus { background-position:0 -81px }
.menu .menu-live-stream a:hover,
.menu .menu-live-stream a:focus { background-position:-111px 0 }
.menu .menu-live-stream .menu-active,
.menu .menu-live-stream .menu-active:hover,
.menu .menu-live-stream .menu-active:focus { background-position:-111px -81px }
.menu .menu-event-info a:hover,
.menu .menu-event-info a:focus { background-position:-218px 0 }
.menu .menu-event-info .menu-active,
.menu .menu-event-info .menu-active:hover,
.menu .menu-event-info .menu-active:focus { background-position:-218px -81px }
.menu .menu-media a:hover,
.menu .menu-media a:focus { background-position:-325px 0 }
.menu .menu-media .menu-active,
.menu .menu-media .menu-active:hover,
.menu .menu-media .menu-active:focus { background-position:-325px -81px }
.menu .menu-forums a:hover,
.menu .menu-forums a:focus { background-position:-432px 0 }
.menu .menu-forums .menu-active,
.menu .menu-forums .menu-active:hover,
.menu .menu-forums .menu-active:focus { background-position:-432px -81px }
.menu .menu-tournaments a:hover,
.menu .menu-tournaments a:focus { background-position:-539px 0 }
.menu .menu-tournaments .menu-active,
.menu .menu-tournaments .menu-active:hover,
.menu .menu-tournaments .menu-active:focus { background-position:-539px -81px }

/* tabs */
.navigation-tabs { width:972px; height:64px; padding:0 10px }
.navigation-tabs ul { width:952px; padding-left:11px }
.navigation-tabs li { display:block; float:left; width:158px; height:64px; text-align:center; background:url(/images/sub-nav.png) -169px 0 no-repeat;}
.navigation-tabs li.first-child { width:159px; background:url(/images/sub-nav.png) -10px 0 no-repeat }
.navigation-tabs li.last-child { width:161px; background:url(/images/sub-nav.png) -327px 0 no-repeat }
.navigation-tabs li.disabled { color: #545454; line-height: 64px; }
.navigation-tabs a { display:block; height:64px; line-height:64px;  }
.navigation-tabs .active a { color:#FFF; background:url(/images/sub-nav.png) -11px -128px no-repeat }

/* footer */
#footer { color:#505C5F }
#footer a { color:#2a4d5e }
#footer h3,
#footer h3 a,
#copyright a { color:#00afff }
#copyright { color:#22353e; border-color:#002238 }
#sitemap .column h3 { border-color:#002238; background:url(/images/footer.png) no-repeat }
#footer #sitemap h3.bnet { background-position:0 0 }
#footer #sitemap h3.games { background-position:2px -50px }
#footer #sitemap h3.classic { background-position:0 -100px }
#footer #sitemap h3.account { background-position:2px -150px }
#footer #sitemap h3.support { background-position:0 -200px }
#change-language { background-image:url(/images/arrows.gif) }
#change-language span { background-image:url(/images/map-small.gif) }
#international { border-color:#002238 }

/* sidebar-module */
.sidebar-module .sidebar-title h3 { border-bottom:2px solid #0D324B;  font-family:Arial; font-weight:normal;  margin-bottom:6px; padding-bottom:6px; text-transform:uppercase; color:#FFF }
.sidebar-module .sidebar-title a { color:#FFF; font-weight:normal }

/* sponsors sidebar */
.sidebar-module .sponsor-links { padding-left:10px; background-color:#010f19; margin-top:-6px }
.ie6 .sidebar-module .sponsor-links { zoom:1 }
.sidebar-module .sponsor-link { opacity:0.85; display:block; float:left; width:135px; background:url(/images/sponsors-small.png) no-repeat }
.sidebar-module .sponsor-link:hover { opacity:1 }
.sidebar-module .sponsor-intel        { height:112px;  background-position:0 20px }
.sidebar-module .sponsor-nvidia       { height:112px;  background-position:-135px 20px }
.sidebar-module .sponsor-asus         { height:70px;  background-position:0      -92px }
.sidebar-module .sponsor-antec        { height:70px;  background-position:-135px -92px }
.sidebar-module .sponsor-steel-series { height:117px; background-position:-135px -162px }
.sidebar-module .sponsor-direct-tv    { height:117px; background-position:0      -162px }
.sidebar-module .sponsor-razer        { height:71px;  background-position:0      -278px }
.sidebar-module .sponsor-vasco        { height:71px;  background-position:-135px -278px }

/* search */
.search .results { border-top:1px solid #0d324b }
.search .search-header .header { color:#d9e5e8; font-weight:normal; text-transform:uppercase; font-size:22px }
.search .helpers .category { color:#00b3d6; font-size:22px; font-weight:normal }
.search .subcategory { font-size:16px; font-weight:normal; color:#00b3d6 }
.search .post-results .result { background:url(/images/post-icon.gif) 0 5px no-repeat; padding-left:30px }
.search .result .subcategory .small { color:#00527a }
.search .result .subcategory,
.search .result .meta { color:#00527a }
.search .sublink,
.search .result .author { color:#a3c9e4 !important }
.search .sublink:hover,
.search .result .author:hover { color:#fff !important }
.search .dynamic-menu { margin:20px; padding-bottom:1px; font-size:13px; border-top: 1px solid #092539 }
.search .dynamic-menu li { padding-top:1px; white-space:nowrap; border-bottom: 1px solid #092539 }
.search .dynamic-menu li a { padding:6px 0; display:block }
.search .dynamic-menu li.item-active a { color:#fff; font-weight:bold; background:none }

/* overlay */
.ui-overlay { width:750px; background:#06131C; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; -moz-box-shadow:0 0 10px black; -webkit-box-shadow:0 0 10px black; box-shadow:0 0 10px black; }
.ui-overlay .overlay-middle { padding: 25px }

/* error page */
.error-page #content-top { background-image:url(/images/content-top-error.jpg) }
.error-page .error-header { color:#FFF; font-family:Arial; font-size:42px; font-weight:bold; width:500px; margin:0 auto; text-align:center; padding-top:240px }
.error-page .error-desc { color:#c68105; font-size:30px; width:600px; margin:0 auto; padding-top:40px; text-align:center }

/* class */
.color-c1,  .color-c1 a { color: #c69b6d !important; } /* warrior */
.color-c2,  .color-c2 a { color: #f48cba !important; } /* paladin */
.color-c3,  .color-c3 a, .color-g2 { color: #aad372 !important; } /* hunter */
.color-c4,  .color-c4 a, .color-g1 { color: #fff468 !important; } /* rogue */
.color-c5,  .color-c5 a { color: #f0ebe0 !important; } /* priest */
.color-c6,  .color-c6 a { color: #c41e3b !important; } /* death knight */
.color-c7,  .color-c7 a { color: #2359ff !important; } /* shaman */
.color-c8,  .color-c8 a, .color-g3 { color: #68ccef !important; } /* mage */
.color-c9,  .color-c9 a { color: #9382c9 !important; } /* warlock */
.color-c11, .color-c11 a, .color-g4 { color: #ff7c0a !important; } /* druid */