@charset "gb2312";
html {
    min-width: 997px
}
body {
    font: normal 12px/1.5 Arial, sans-serif;
    text-align: left
}
a {
    color: #d96500
}
a:hover {
    color: #fff
}
th {
    text-align: left
}
.d3 .contents{
    background:none;
    width: 1190px;
}
.body-top {
}
.body-bot {
    padding-bottom: 125px;
    min-height: 500px;
    position: relative
}
.wrapper {
    width: 975px;
    margin: 0 auto;
    position: relative
}
.head .skull-eyes, .body-bot .chat-gem {
    position: absolute;
    outline: 0;
    opacity: 0;
    -webkit-transition: opacity .333s linear;
    -moz-transition: opacity .333s linear;
    -o-transition: opacity .333s linear;
    -ms-transition: opacity .333s linear;
    transition: opacity .333s linear
}
.head .skull-eyes.activated, .body-bot .chat-gem.activated {
    opacity: 1
}
.head .skull-eyes {
    left: 454px;
    top: 93px;
    width: 84px;
    height: 66px;
    background: url("../images/skull-eyes.jpg") 23px 14px no-repeat
}
.body-bot .chat-gem {
    left: 458px;
    bottom: 0;
    width: 62px;
    height: 77px;
    background: url("../images/chat-gem.jpg") no-repeat
}
.ui-button, .ui-cancel {
    background: 0;
    border: 0;
    cursor: pointer;
    display: inline-block;
    height: auto;
    overflow: visible;
    padding: 0;
    margin: 0;
    vertical-align: middle;
    outline: 0
}
.ui-button span, .ui-cancel span {
    outline: 0;
    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.disabled:hover span, .ui-button.disabled.hover span, .ui-button.processing span, .ui-button.processing:hover span, .ui-button.processing.hover span {
    background-position: 0 -82px;
    cursor: default
}
.ui-button.disabled span span, .ui-button.disabled:hover span span, .ui-button.disabled.hover span span, .ui-button.processing span span, .ui-button.processing:hover span span, .ui-button.processing.hover 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
}
.ui-cancel {
    margin-left: 15px;
    padding-left: 15px;
    border-left: 1px solid #251f1b
}
.button1 {
    height: 36px;
    -moz-box-shadow: 0 0 5px #000;
    -webkit-box-shadow: 0 0 5px #000;
    box-shadow: 0 0 5px #000
}
.button1 span {
    line-height: 36px;
    height: 36px;
    padding-left: 25px;
    background-color: transparent;
    background-image: url("../images/button-1.png");
    background-repeat: no-repeat;
    color: #ffcb8d;
    font-family: "Palatino Linotype", "Times", serif;
    text-shadow: 0 0 5px #dd3400
}
.button1 span span {
    padding: 0 25px 0 0
}
.button1.hover span, .button1:hover span {
    color: #fff
}
.button1.disabled span, .button1.processing span, .button1.disabled:hover span, .button1.processing:hover span, .button1.disabled.hover span, .button1.processing.hover span {
    color: #574b45;
    text-shadow: 0 0 5px #080505
}
.button2 span {
    height: 30px
}
.button2 span {
    padding: 0 0 0 13px;
    height: 30px;
    line-height: 30px;
    background-image: url("../images/button-2.gif");
    background-repeat: no-repeat;
    font-size: 11px;
    color: #c67000
}
.button2 span span {
    padding: 0 13px 0 0
}
.button2.hover span, .button2:hover span {
    color: #fff
}
.button2.disabled span, .button2.processing span {
    color: #574b45
}
.button3 span {
    height: 30px
}
.button3 span {
    padding: 0 0 0 13px;
    height: 30px;
    line-height: 30px;
    background-image: url("../images/button-3.gif");
    background-repeat: no-repeat;
    font-size: 11px;
    color: #00b4ff
}
.button3 span span {
    padding: 0 13px 0 0
}
.button3.hover span, .button3:hover span {
    color: #fff
}
.button3.disabled span, .button3.processing span {
    color: #b1bac3
}
.icon-24, .icon-16 {
    display: inline-block;
    width: 24px;
    height: 24px;
    vertical-align: middle;
    background: url("../images/sprite.png") no-repeat;
    font-size: 1px
}
.icon-16 {
    width: 16px;
    height: 16px
}
.icon-16-plus {
    background-position: -52px 0
}
.icon-16-rarrow {
    background-position: -52px -16px
}
.icon-16-larrow {
    background-position: -52px -32px
}
.icon-16-uarrow {
    background-position: -52px -48px
}
.icon-16-darrow {
    background-position: -52px -64px
}
.icon-16-close {
    background-position: -52px -80px
}
.icon-16-return {
    background-position: -52px -96px
}
.icon-16-jump {
    background-position: -52px -112px
}
.icon-16-rarrow-small {
    background-position: -52px -128px
}
.icon-16-gold {
    background-position: -52px -288px
}
.icon-16-reset {
    background-position: -52px -304px
}
.icon-16-search {
    background-position: -52px -320px
}
a:hover .icon-16-plus {
    background-position: -68px 0
}
a:hover .icon-16-rarrow {
    background-position: -68px -16px
}
a:hover .icon-16-larrow {
    background-position: -68px -32px
}
a:hover .icon-16-uarrow {
    background-position: -68px -48px
}
a:hover .icon-16-darrow {
    background-position: -68px -64px
}
a:hover .icon-16-close {
    background-position: -68px -80px
}
a:hover .icon-16-return {
    background-position: -68px -96px
}
a:hover .icon-16-jump {
    background-position: -68px -112px
}
a:hover .icon-16-rarrow-small {
    background-position: -68px -128px
}
.icon-24-gold {
    background-position: 0 0
}
.icon-24-utoggle {
    background-position: 0 -24px
}
.icon-24-dtoggle {
    background-position: 0 -75px
}
.icon-24-help {
    background-position: 0 -130px
}
.icon-24-close {
    background-position: 0 -156px;
    width: 24px;
    height: 24px
}
a:hover .icon-24-utoggle {
    background-position: 0 -52px
}
a:hover .icon-24-dtoggle {
    background-position: 0 -101px
}
a:hover .icon-24-close {
    background-position: 0 -182px
}
.icon-24-shield {
    background-position: -26px 0
}
.icon-24-security {
    background-position: -26px -26px
}
.icon-24-authenticator {
    background-position: -26px -52px
}
.icon-24-parental {
    background-position: -26px -78px
}
.icon-24-cart {
    background-position: -26px -104px
}
.icon-24-digital {
    background-position: -26px -130px
}
.colors-subtle .d3-color-white, .colors-subtle .d3-color-white a {
    color: #f3e6d0 !important
}
.colors-subtle .d3-color-green, .colors-subtle .d3-color-green a {
    color: #8bd442 !important
}
.colors-subtle .d3-color-yellow, .colors-subtle .d3-color-yellow a {
    color: #f8cc35 !important
}
.colors-subtle .d3-color-blue, .colors-subtle .d3-color-blue a {
    color: #7979d4 !important
}
.colors-subtle .d3-color-red, .colors-subtle .d3-color-red a {
    color: #e52817 !important
}
.colors-subtle a:hover {
    color: white !important
}
.icon-frame, .icon-portrait {
    display: inline-block;
    overflow: hidden;
    background: 50% 50% no-repeat;
    font-size: 1px
}
.icon-frame, .icon-portrait {
    -moz-box-shadow: 0 0 5px #000;
    -webkit-box-shadow: 0 0 5px #000;
    box-shadow: 0 0 5px #000
}
.icon-frame {
    background-color: black;
    padding: 1px;
    border-left: 1px solid #3a2912;
    border-right: 1px solid #59411c;
    border-bottom: 1px solid #463419;
    border-top: 1px solid #574320;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px
}
.icon-frame img {
    display: block;
    vertical-align: bottom
}
a:hover .icon-frame, .hover .icon-frame {
    background-color: #444;
    border-color: #666
}
.icon-frame-text {
    vertical-align: middle;
    margin-top: -2px;
    margin-left: 2px
}
.icon-custom {
    background: url("../images/tools.png") no-repeat;
    width: 42px;
    height: 42px
}
.icon-custom-calculator {
    background-position: 1px 1px
}
.icon-custom-gear {
    background-position: -42px 1px
}
.icon-custom-tooltip {
    background-position: -85px 1px
}
.icon-custom-followers {
    background-position: -128px 1px
}
a:hover .icon-custom-calculator {
    background-position: 1px -42px
}
a:hover .icon-custom-gear {
    background-position: -42px -42px
}
a:hover .icon-custom-tooltip {
    background-position: -85px -42px
}
.page-header {
    margin-bottom: 0
}
.page-body {
    margin: 0
}
.hero-barbarian .body-top {
    background: url("../images/barbarian.jpg") no-repeat top right;
}
.hero-demon-hunter .body-top {
    background: url("../images/demon-hunter.jpg") no-repeat top right;
}
.hero-monk .body-top {
    background: url("../images/monk.jpg") no-repeat top right;
}
.hero-witch-doctor .body-top {
    background: url("../images/witch-doctor.jpg") no-repeat top right;
}
.hero-wizard .body-top {
    background: url("../images/wizard.jpg") no-repeat top right;
}
.calculator-follower .body-top {
    background: url("../images/followers.jpg") no-repeat top right;
}
.tool-menu {
    z-index: 1;
    position: absolute;
    top: 0px;
    left: 0;
    width: 264px;
    height: 600px;
    padding-top: 100px;
    padding-right: 1px;
    background: url("../images/sidebar-bg.jpg") 0 0 no-repeat
}
.tool-menu a {
    display: block;
    padding: 6px 0 10px 30px;
    height: 50px;
    line-height: 50px
}
.tool-menu a .icon-frame {
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px
}
.tool-menu a .name {
    line-height: 120%;
    width: 130px;
    display: inline-block;
    vertical-align: middle;
    font-family: "Palatino Linotype", "Times", serif;
    font-size: 13px;
    text-transform: uppercase
}
.tool-menu a:hover {
    background: rgba(255, 255, 255, 0.03)
}
.tool-menu li {
    border-top: 1px solid #2a241c
}
.tool-menu li:first-child {
    border: 0
}
.tool-menu li.selected a {
    background-color: #060606 !important;
    color: #f3e6d0;
    font-weight: bold
}
.tool-menu .divider {
    display: block;
    height: 25px
}
.tool-dialog {
    position: absolute;
    width: 285px;
    z-index: 45;
    color: #221103;
    background: #000 url("../images/parchment-bg.jpg") repeat;
    border: 1px solid #2c251b;
    font-size: 12px;
    -moz-box-shadow: 0 0 15px 5px #000;
    -webkit-box-shadow: 0 0 15px 5px #000;
    box-shadow: 0 0 15px 5px #000
}
.tool-dialog .dialog-top {
    background: url("../images/parchment-top.jpg") no-repeat
}
.tool-dialog .dialog-bot {
    background: url("../images/parchment-bot.jpg") 100% 100% no-repeat;
    padding: 15px 20px
}
.tool-dialog .dialog-close {
    position: absolute;
    right: 8px;
    top: 8px;
    -moz-box-shadow: 0 0 5px #000;
    -webkit-box-shadow: 0 0 5px #000;
    box-shadow: 0 0 5px #000
}
.tool-dialog .dialog-arrow {
    width: 30px;
    height: 40px;
    display: none;
    position: absolute;
    top: 0;
    left: -18px;
    background: url("../images/sprite.png") 0 100% no-repeat
}
.tool-dialog .dialog-header {
    margin-bottom: 15px
}
.tool-dialog .dialog-header .subcategory {
    font-size: 20px;
    color: black;
    padding-right: 10px
}
.tool-dialog .dialog-header strong {
    color: black
}
.tool-dialog .dialog-content {
    min-height: 300px;
    margin-top: 15px
}
.tool-dialog .dialog-title {
    padding: 10px 0;
    text-align: center;
    border-top: 2px solid #b79b67
}
.tool-dialog .dialog-title:first-child {
    border-top: 0;
    padding-top: 0
}
.tool-dialog .dialog-title .category {
    font-size: 14px;
    color: #600;
    font-weight: bold
}
.tool-dialog .dialog-filter {
    margin-bottom: 15px
}
.tool-dialog .dialog-filter .input {
    width: 155px;
    margin: 0 2px
}
.tool-dialog .dialog-alert {
    margin: 15px 0
}
.tool-dialog .dark-parchment {
    background: #1a0f09 url("../images/parchment-dark.jpg") 50% 0 no-repeat;
    padding: 15px 10px 10px 10px
}
.tool-dialog .data-list {
    margin: 10px 0
}
.tool-dialog .data-list:first-child {
    margin: 0
}
.tool-dialog .data-list li {
    border-top: 1px solid #302318;
    color: #f3e6d0
}
.tool-dialog .data-list li:first-child {
    border: 0
}
.tool-dialog-load .data-list li .category {
    padding-bottom: 5px;
    font-size: 13px
}
.tool-dialog-load .data-list li .saved-delete {
    float: right;
    margin-top: 2px;
    margin-right: 3px
}
.tool-dialog-load .data-list li .saved-name {
    display: block;
    padding: 3px;
    padding-right: 18px;
    word-wrap: break-word
}
.tool-dialog-load .data-list li .saved-name:hover {
    background: #0a0604
}
.tool-sidebar {
    position: absolute;
    right: 30px;
    width: 240px;
    z-index: 0
}
.tool-sidebar .sidebar-box {
    padding: 15px;
    margin-bottom: 30px;
    background: rgba(0, 0, 0, 0.25)
}
.tool-sidebar .category {
    margin-bottom: 10px
}
.tool-sidebar-disabled {
    opacity: .25
}
.sidebar-help .bullet-list {
    margin-left: 20px
}
.sidebar-help .bullet-list li {
    line-height: 2em;
    margin: 0
}
.social-media a {
    float: left;
    display: block;
    height: 20px;
    width: 20px;
    vertical-align: middle;
    background: url("../images/sprite.png") no-repeat;
    margin-right: 5px
}
.social-media a.facebook {
    background-position: 0 0
}
.social-media a.facebook:hover {
    background-position: 0 -20px
}
.social-media a.twitter {
    background-position: -20px 0
}
.social-media a.twitter:hover {
    background-position: -20px -20px
}
.social-media a.me2day {
    background-position: -60px 0
}
.social-media a.me2day:hover {
    background-position: -60px -20px
}
.export-link .icon-16 {
    background: url("../images/sprite.png") -3px -43px no-repeat
}
.tool-dialog-export .input {
    width: 230px
}
.tool-dialog-export .box {
    margin-bottom: 20px
}
.tool-dialog-export .dialog-content .category {
    color: #600;
    margin-bottom: 10px;
    font-weight: bold
}
.buttons {
    text-align: center
}
.buttons .ui-button {
    margin: 0 5px
}
.meta-info {
    height: 20px;
    padding: 10px;
    overflow: hidden
}
.meta-info .class-link {
    float: right
}
.meta-info .required-level {
    color: #f3e6d0;
    font-weight: bold
}
.ie6 .tool-dialog .dialog-arrow, .ie6 .export-link .icon-16 {
    background-image: url("../images/sprite.gif");
    margin-right: 2px;
    margin-top: 1px
}
.ie6 .social-media a {
    background-image: url("../images/sprite.gif")
}
.ie8 .tool-sidebar .sidebar-box, .ie67 .tool-sidebar .sidebar-box {
    background: black
}
.ie67 .tool-menu {
    top: 125px
}
.ie67 .tool-dialog, .ie67 .tool-dialog .dialog-top, .ie67 .tool-dialog .dialog-bot {
    zoom: 1
}
.ui-prompt {
    background: #1c1b1b;
    border: 1px solid #322a20;
    position: absolute;
    width: 300px;
    z-index: 9005;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    -moz-box-shadow: 0 0 15px #000;
    -webkit-box-shadow: 0 0 15px #000;
    box-shadow: 0 0 15px #000
}
.ui-prompt .prompt-inner {
    padding: 15px;
    border: 1px solid #403529
}
.ui-prompt .prompt-close {
    width: 25px;
    height: 25px;
    display: block;
    position: absolute;
    top: 3px;
    right: 2px;
    background: url("../images/sprite.png") 0 -156px no-repeat
}
.ui-prompt .prompt-close:hover {
    background-position: 0 -182px
}
.ui-prompt .prompt-errors {
    margin-top: 10px;
    color: #e52817
}
.ui-prompt .prompt-buttons {
    margin-top: 20px;
    text-align: center
}
.ui-prompt .prompt-buttons button {
    margin: 0 10px
}
.ui-prompt .subheader {
    margin-bottom: 15px;
    color: #f3e6d0;
    font-size: 18px
}
.ui-prompt .input {
    width: 258px
}
.ui-typeahead {
    opacity: .99;
    overflow: hidden;
    position: absolute;
    white-space: nowrap
}
.ui-typeahead {
    background: none repeat scroll 0 0 #1f1e1e;
    border: 1px solid #403529;
    border-radius: 3px 3px 3px 3px;
    box-shadow: 0 0 10px #000;
    font-size: 12px;
    opacity: .9;
    padding: 0 1px 1px
}
.ui-tooltip {
    height: auto;
    max-width: 300px;
    position: absolute;
    width: auto;
    z-index: 9005
}
.ui-tooltip {
    background: none repeat scroll 0 0 #1d180e;
    border: 1px solid #322a20;
    border-radius: 2px 2px 2px 2px;
    box-shadow: 0 0 10px #000;
    max-width: 355px;
    opacity: .95;
    padding: 1px
}
.ui-tooltip .tooltip-content {
    height: auto;
    width: auto
}
.ui-tooltip .tooltip-content {
    background: none repeat scroll 0 0 black;
    color: #cfb991;
    font-size: 12px;
    padding: 0
}
.skill-calculator {
    width: 630px;
    min-height: 800px;
    margin: 0 0 0 219px;
    top: 37px;
    background: url("../images/calc-v2-bg.png") no-repeat;
    position: relative
}
.skill-calculator-inner {
    position: relative;
    padding: 69px 45px 0 45px;
    background: url("../images/calc-v2-bg-innerjingling.jpg") 45px 69px no-repeat
}
.skill-calculator .calculator-frame {
    width: 500px;
    min-height: 650px;
    margin: 0 auto 40px auto;
    padding-top: 12px
}
.skill-calculator .calculator-frame .category {
    text-align: center;
    text-shadow: 0 0 3px #000;
    padding-bottom: 5px;
    margin-bottom: 10px;
    background: url("../images/calc-divider.jpg") 50% 100% no-repeat
}
.skill-calculator .export-link {
    position: absolute;
    top: 40px;
    left: 50px
}
.skills .skill-button, .traits .trait-button .trait-icon, .skill-slot, .skill-slot .slot-primary, .skill-slot .slot-secondary, .tool-dialog-skills .skill-categories a span {
    background: url("../images/sprite-v2.png") 0 0 no-repeat
}
.skill-slot .slot-primary, .skill-slot .slot-secondary {
    display: inline-block;
    margin-top: 1px;
    width: 13px;
    height: 16px;
    text-indent: -9999px;
    background-position: 0 -256px
}
.skill-slot .slot-secondary {
    background-position: -13px -256px
}
.skills {
    height: 433px;
    margin-bottom: 5px;
    padding-top: 17px
}
.skills li {
    float: left;
    width: 250px;
    height: 110px;
    margin-bottom: 10px
}
.skills .skill-category {
    color: #7b6d55;
    text-shadow: 0 0 3px #000;
    display: block;
    text-align: center;
    font-size: 13px
}
.skills .skill-button {
    display: block;
    width: 168px;
    height: 68px;
    padding: 17px 17px 0 65px;
    position: relative
}
.skills .skill-button .skill-name, .skills .skill-button .skill-rune {
    display: block;
    height: 20px;
    line-height: 20px;
    color: #807667
}
.skills .skill-button .skill-rune {
    color: #d7851a;
    margin-top: 2px
}
.skills .skill-button .skill-rune .d3-icon {
    margin: -1px 3px 0 0
}
.skills .skill-button .skill-slot {
    color: #d7851a;
    display: block;
    width: 22px;
    height: 18px;
    position: absolute;
    top: 63px;
    left: 114px;
    text-align: center;
    line-height: 18px;
    background: 0
}
.skills .skill-button .skill-icon {
    display: block;
    width: 42px;
    height: 42px;
    position: absolute;
    top: 16px;
    left: 17px;
    text-align: center
}
.skills .skill-button .skill-icon .no {
    color: #5c4923;
    font-size: 18px;
    line-height: 42px
}
.skills .skill-button:hover {
    background-position: 0 -85px
}
.skills .skill-button.skill-button-active {
    background-position: 0 -170px
}
.skills .skill-button:hover .skill-icon .no, .skills .skill-button.skill-button-active .skill-icon .no {
    color: #fff
}
.skills .skill-button.skill-button-chosen .skill-name {
    color: #f3e6d0
}
.traits {
    height: 136px;
    margin-bottom: 4px;
    padding-top: 12px
}
.traits ul {
    padding-left: 47px
}
.traits li {
    display: inline-block;
    float: left;
    overflow: hidden;
    vertical-align: top;
    text-align: center
}
.traits .trait-button {
    position: relative;
    display: block;
    width: 100px
}
.traits .trait-button .trait-name {
    display: block;
    color: #807667;
    word-wrap: break-word;
    font-size: 12px
}
.traits .trait-button .trait-icon {
    display: inline-block;
    width: 55px;
    height: 55px;
    position: relative;
    background-position: -140px -255px
}
.traits .trait-button .trait-icon .no {
    position: absolute;
    width: 55px;
    line-height: 50px;
    text-align: center;
    top: 0;
    left: 0;
    color: #5c4923;
    font-size: 18px
}
.traits .trait-button:hover .trait-icon .no, .traits .trait-button.trait-button-active .trait-icon .no {
    color: #fff
}
.traits .trait-button.trait-button-active .d3-icon-trait .frame {
    background-position: top right
}
.traits .trait-button.trait-button-chosen .trait-name {
    color: #f3e6d0
}
.tool-dialog {
    right: -190px;
    top: 69px
}
.tool-dialog .dialog-arrow.slot-0, .tool-dialog .dialog-arrow.slot-1 {
    top: 101px;
    display: block
}
.tool-dialog .dialog-arrow.slot-2, .tool-dialog .dialog-arrow.slot-3 {
    top: 258px;
    display: block
}
.tool-dialog .dialog-arrow.slot-4, .tool-dialog .dialog-arrow.slot-5 {
    top: 378px;
    display: block
}
.tool-dialog .dialog-list {
    margin-bottom: 15px
}
.tool-dialog .d3-color-green, .tool-dialog a:hover .d3-color-green {
    color: #3f4220 !important
}
.tool-dialog-skills .dialog-content {
    min-height: 400px
}
.tool-dialog-skills .category {
    color: #600;
    font-size: 12px;
    text-align: center;
    font-weight: bold
}
.tool-dialog-skills .category .elective-left {
    float: left
}
.tool-dialog-skills .category .elective-right {
    float: right
}
.tool-dialog-skills .skill-choices {
    margin: 10px 0;
    text-align: center
}
.tool-dialog-skills .skill-choices a {
    margin: 0 2px;
    display: inline-block
}
.tool-dialog-skills .skill-choices a.disabled {
    cursor: default
}
.tool-dialog-skills .skill-choices a.disabled .d3-icon:not(.selected) {
    opacity: .7
}
.tool-dialog-skills .skill-categories {
    margin: 0 0 10px 0;
    text-align: center
}
.tool-dialog-skills .skill-categories a {
    display: inline-block;
    vertical-align: middle;
    padding: 5px 8px;
    height: 7px;
    overflow: hidden;
    margin: 0 -3px
}
.tool-dialog-skills .skill-categories a span {
    display: block;
    width: 7px;
    height: 7px;
    background-position: -53px -256px
}
.tool-dialog-skills .skill-categories a.active span {
    background-position: -61px -256px
}
.tool-dialog-skills .rune-choices {
    padding: 0;
    margin: 5px 0;
    position: relative
}
.tool-dialog-skills .rune-choices li {
    border-top: 1px solid #b79b67
}
.tool-dialog-skills .rune-choices li:first-child {
    border: 0
}
.tool-dialog-skills .rune-choice {
    margin: 0;
    padding: 10px;
    display: block;
    color: #221103;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px
}
.tool-dialog-skills .rune-choice .rune-name {
    display: block;
    font-size: 16px;
    font-weight: bold;
    line-height: 1em;
    margin-bottom: 5px;
    color: #790905
}
.tool-dialog-skills .rune-choice .rune-level {
    color: #4e4536;
    margin: 0 0 2px 0;
    display: block
}
.tool-dialog-skills .rune-choice .d3-icon {
    float: right;
    margin: 0 0 0 10px
}
.tool-dialog-skills .rune-choice p {
    display: block;
    line-height: 130%;
    margin: 0
}
.tool-dialog-skills .rune-choice:hover {
    background-color: rgba(0, 0, 0, 0.15)
}
.tool-dialog-skills .rune-choice:hover .rune-name {
    color: black
}
.tool-dialog-skills .rune-choice.rune-choice-active {
    background-color: rgba(0, 0, 0, 0.666);
    color: #a99877
}
.tool-dialog-skills .rune-choice.rune-choice-active .d3-color-green, .tool-dialog-skills .rune-choice.rune-choice-active .rune-name {
    color: #f3e6d0 !important
}
.tool-dialog-skills .rune-choice.rune-choice-active .rune-level {
    color: #ad835a
}
.tool-dialog-skills .chosen-skill {
    margin-top: 15px;
    font-size: 12px
}
.tool-dialog-skills .chosen-skill .d3-icon {
    float: left;
    margin-right: 10px
}
.tool-dialog-skills .chosen-skill .skill-name {
    display: block;
    font-weight: bold;
    font-size: 16px
}
.tool-dialog-skills .change-skill {
    margin: 5px 0 0 -3px
}
.tool-dialog-skills .change-skill .icon-16 {
    position: relative;
    top: -1px;
    left: -2px
}
.tool-dialog-skills .rune-intercept li {
    padding: 10px 25px;
    text-align: center
}
.tool-dialog-traits {
    top: auto;
    bottom: 65px
}
.tool-dialog-traits .dialog-list {
    text-align: center;
    padding-top: 0
}
.tool-dialog-traits .dialog-list li {
    margin: 4px;
    display: inline-block
}
.tool-dialog-traits .dialog-arrow {
    display: block;
    top: auto;
    bottom: 115px
}
.tool-dialog-traits .trait-choice {
    display: block;
    width: 51px;
    height: 51px;
    overflow: hidden;
    margin: 0 3px 5px 3px
}
.tool-dialog-traits .trait-choice .d3-icon {
    width: 42px !important;
    height: 42px !important;
    margin-top: 5px;
    overflow: visible
}
.tool-dialog-traits .trait-choice .d3-icon .frame {
    position: relative;
    top: -5px;
    left: -5px;
    background-image: url("../images/trait-42-simple.png")
}
.tool-dialog-traits .trait-choice.disabled {
    cursor: default
}
.tool-dialog-export {
    top: 140px;
    right: 171px
}
.calculator-barbarian .skill-choice .d3-icon, .calculator-barbarian .skill-choice .d3-icon-selected {
    background-image: url('../images/class-barbarian.png')
}
.calculator-barbarian .trait-choice .d3-icon {
    background-image: url('../images/class-barbarian-passive.png')
}
.calculator-demon-hunter .skill-choice .d3-icon {
    background-image: url('../images/class-demonhunter.png')
}
.calculator-demon-hunter .trait-choice .d3-icon {
    background-image: url('../images/class-demonhunter-passive.png')
}
.calculator-monk .skill-choice .d3-icon {
    background-image: url('../images/class-monk.png')
}
.calculator-monk .trait-choice .d3-icon {
    background-image: url('../images/class-monk-passive.png')
}
.calculator-witch-doctor .skill-choice .d3-icon {
    background-image: url('../images/class-witchdoctor.png')
}
.calculator-witch-doctor .trait-choice .d3-icon {
    background-image: url('../images/class-witchdoctor-passive.png')
}
.calculator-wizard .skill-choice .d3-icon {
    background-image: url('../images/class-wizard.png')
}
.calculator-wizard .trait-choice .d3-icon {
    background-image: url('../images/class-wizard-passive.png')
}
.calculator-crusader .skill-choice .d3-icon {
    background-image: url('../images/class-crusader.png')
}
.calculator-crusader .trait-choice .d3-icon {
    background-image: url('../images/class-crusader-passive.png')
}
.sprite-0-0 .d3-icon {
    background-position: -0px -0px
}
.sprite-0-0 .selected, .sprite-0-0 .disabled {
    background-position: -0px -42px !important
}
.sprite-0-1 .d3-icon {
    background-position: -42px -0px
}
.sprite-0-1 .selected, .sprite-0-1 .disabled {
    background-position: -42px -42px !important
}
.sprite-0-2 .d3-icon {
    background-position: -84px -0px
}
.sprite-0-2 .selected, .sprite-0-2 .disabled {
    background-position: -84px -42px !important
}
.sprite-0-3 .d3-icon {
    background-position: -126px -0px
}
.sprite-0-3 .selected, .sprite-0-3 .disabled {
    background-position: -126px -42px !important
}
.sprite-0-4 .d3-icon {
    background-position: -168px -0px
}
.sprite-0-4 .selected, .sprite-0-4 .disabled {
    background-position: -168px -42px !important
}
.sprite-1-0 .d3-icon {
    background-position: -0px -84px
}
.sprite-1-0 .selected, .sprite-1-0 .disabled {
    background-position: -0px -126px !important
}
.sprite-1-1 .d3-icon {
    background-position: -42px -84px
}
.sprite-1-1 .selected, .sprite-1-1 .disabled {
    background-position: -42px -126px !important
}
.sprite-1-2 .d3-icon {
    background-position: -84px -84px
}
.sprite-1-2 .selected, .sprite-1-2 .disabled {
    background-position: -84px -126px
}
.sprite-1-3 .d3-icon {
    background-position: -126px -84px
}
.sprite-1-3 .selected, .sprite-1-3 .disabled {
    background-position: -126px -126px !important
}
.sprite-1-4 .d3-icon {
    background-position: -168px -84px
}
.sprite-1-4 .selected, .sprite-1-4 .disabled {
    background-position: -168px -126px !important
}
.sprite-2-0 .d3-icon {
    background-position: -0px -168px
}
.sprite-2-0 .selected, .sprite-2-0 .disabled {
    background-position: -0px -210px !important
}
.sprite-2-1 .d3-icon {
    background-position: -42px -168px
}
.sprite-2-1 .selected, .sprite-2-1 .disabled {
    background-position: -42px -210px !important
}
.sprite-2-2 .d3-icon {
    background-position: -84px -168px
}
.sprite-2-2 .selected, .sprite-2-2 .disabled {
    background-position: -84px -210px !important
}
.sprite-2-3 .d3-icon {
    background-position: -126px -168px
}
.sprite-2-3 .selected, .sprite-2-3 .disabled {
    background-position: -126px -210px !important
}
.sprite-2-4 .d3-icon {
    background-position: -168px -168px
}
.sprite-2-4 .selected, .sprite-2-4 .disabled {
    background-position: -168px -210px !important
}
.sprite-3-0 .d3-icon {
    background-position: -0px -252px
}
.sprite-3-0 .selected, .sprite-3-0 .disabled .d3-icon {
    background-position: -0px -294px !important
}
.sprite-3-1 .d3-icon {
    background-position: -42px -252px
}
.sprite-3-1 .selected, .sprite-3-1 .disabled {
    background-position: -42px -294px !important
}
.sprite-3-2 .d3-icon {
    background-position: -84px -252px
}
.sprite-3-2 .selected, .sprite-3-2 .disabled {
    background-position: -84px -294px !important
}
.sprite-3-3 .d3-icon {
    background-position: -126px -252px
}
.sprite-3-3 .selected, .sprite-3-3 .disabled {
    background-position: -126px -294px !important
}
.sprite-3-4 .d3-icon {
    background-position: -168px -252px
}
.sprite-3-4 .selected, .sprite-3-4 .disabled {
    background-position: -168px -294px !important
}
.sprite-4-0 .d3-icon {
    background-position: -0px -336px
}
.sprite-4-0 .selected, .sprite-4-0 .disabled {
    background-position: -0px -378px !important
}
.sprite-4-1 .d3-icon {
    background-position: -42px -336px
}
.sprite-4-1 .selected, .sprite-4-1 .disabled {
    background-position: -42px -378px !important
}
.sprite-4-2 .d3-icon {
    background-position: -84px -336px
}
.sprite-4-2 .selected, .sprite-4-2 .disabled {
    background-position: -84px -378px !important
}
.sprite-4-3 .d3-icon {
    background-position: -126px -336px
}
.sprite-4-3 .selected, .sprite-4-3 .disabled {
    background-position: -126px -378px !important
}
.sprite-4-4 .d3-icon {
    background-position: -168px -336px
}
.sprite-4-4 .selected, .sprite-4-4 .disabled {
    background-position: -168px -378px !important
}
.sprite-5-0 .d3-icon {
    background-position: -0px -420px
}
.sprite-5-0 .selected, .sprite-5-0 .disabled {
    background-position: -0px -462px !important
}
.sprite-5-1 .d3-icon {
    background-position: -42px -420px
}
.sprite-5-1 .selected, .sprite-5-1 .disabled {
    background-position: -42px -462px !important
}
.sprite-5-2 .d3-icon {
    background-position: -84px -420px
}
.sprite-5-2 .selected, .sprite-5-2 .disabled {
    background-position: -84px -462px !important
}
.sprite-5-3 .d3-icon {
    background-position: -126px -420px
}
.sprite-5-3 .selected, .sprite-5-3 .disabled background-position:-126px -462px !important
}
.sprite-5-4 .d3-icon {
background-position: -168px -420px
}
.sprite-5-4 .selected, .sprite-5-4 .disabled {
background-position: -168px -462px !important
}
.sprite-trait-0 .d3-icon {
background-position: -0px 0
}
.sprite-trait-0 .d3-icon.selected, .sprite-trait-0.disabled .d3-icon {
background-position: -0px -42px !important
}
.sprite-trait-1 .d3-icon {
background-position: -42px 0
}
.sprite-trait-1 .d3-icon.selected, .sprite-trait-1.disabled .d3-icon {
background-position: -42px -42px !important
}
.sprite-trait-2 .d3-icon {
background-position: -84px 0
}
.sprite-trait-2 .d3-icon.selected, .sprite-trait-2.disabled .d3-icon {
background-position: -84px -42px !important
}
.sprite-trait-3 .d3-icon {
background-position: -126px 0
}
.sprite-trait-3 .d3-icon.selected, .sprite-trait-3.disabled .d3-icon {
background-position: -126px -42px !important
}
.sprite-trait-4 .d3-icon {
background-position: -168px 0
}
.sprite-trait-4 .d3-icon.selected, .sprite-trait-4.disabled .d3-icon {
background-position: -168px -42px !important
}
.sprite-trait-5 .d3-icon {
background-position: -210px 0
}
.sprite-trait-5 .d3-icon.selected, .sprite-trait-5.disabled .d3-icon {
background-position: -210px -42px !important
}
.sprite-trait-6 .d3-icon {
background-position: -252px 0
}
.sprite-trait-6 .d3-icon.selected, .sprite-trait-6.disabled .d3-icon {
background-position: -252px -42px !important
}
.sprite-trait-7 .d3-icon {
background-position: -294px 0
}
.sprite-trait-7 .d3-icon.selected, .sprite-trait-7.disabled .d3-icon {
background-position: -294px -42px !important
}
.sprite-trait-8 .d3-icon {
background-position: -336px 0
}
.sprite-trait-8 .d3-icon.selected, .sprite-trait-8.disabled .d3-icon {
background-position: -336px -42px !important
}
.sprite-trait-9 .d3-icon {
background-position: -378px 0
}
.sprite-trait-9 .d3-icon.selected, .sprite-trait-9.disabled .d3-icon {
background-position: -378px -42px !important
}
.sprite-trait-10 .d3-icon {
background-position: -420px 0
}
.sprite-trait-10 .d3-icon.selected, .sprite-trait-10.disabled .d3-icon {
background-position: -420px -42px !important
}
.sprite-trait-11 .d3-icon {
background-position: -462px 0
}
.sprite-trait-11 .d3-icon.selected, .sprite-trait-11.disabled .d3-icon {
background-position: -462px -42px !important
}
.sprite-trait-12 .d3-icon {
background-position: -504px 0
}
.sprite-trait-12 .d3-icon.selected, .sprite-trait-12.disabled .d3-icon {
background-position: -504px -42px !important
}
.sprite-trait-13 .d3-icon {
background-position: -546px 0
}
.sprite-trait-13 .d3-icon.selected, .sprite-trait-13.disabled .d3-icon {
background-position: -546px -42px !important
}
.sprite-trait-14 .d3-icon {
background-position: -588px 0
}
.sprite-trait-14 .d3-icon.selected, .sprite-trait-14.disabled .d3-icon {
background-position: -588px -42px !important
}
.sprite-trait-15 .d3-icon {
background-position: -630px 0
}
.sprite-trait-15 .d3-icon.selected, .sprite-trait-15.disabled .d3-icon {
background-position: -630px -42px !important
}
.sprite-trait-16 .d3-icon {
background-position: -672px 0
}
.sprite-trait-16 .d3-icon.selected, .sprite-trait-16.disabled .d3-icon {
background-position: -672px -42px !important
}
.sprite-trait-17 .d3-icon {
background-position: -714px 0
}
.sprite-trait-17 .d3-icon.selected, .sprite-trait-17.disabled .d3-icon {
background-position: -714px -42px !important
}
.sprite-trait-18 .d3-icon {
background-position: -756px 0
}
.sprite-trait-18 .d3-icon.selected, .sprite-trait-18.disabled .d3-icon {
background-position: -756px -42px !important
}
.sprite-trait-19 .d3-icon {
background-position: -798px 0
}
.sprite-trait-19 .d3-icon.selected, .sprite-trait-19.disabled .d3-icon {
background-position: -798px -42px !important
}
.sprite-trait-20 .d3-icon {
background-position: -840px 0
}
.sprite-trait-20 .d3-icon.selected, .sprite-trait-20.disabled .d3-icon {
background-position: -840px -42px !important
}
.ie8 .tool-dialog-skills .rune-choice:hover, .ie67 .tool-dialog-skills .rune-choice:hover {
background: #b39867
}
.ie8 .tool-dialog-skills .rune-choice.rune-choice-active, .ie67 .tool-dialog-skills .rune-choice.rune-choice-active {
background: #000
}
.ie7 .tool-dialog-traits .dialog-list {
padding-left: 20px
}
.ie67 .skill-slot .slot-primary, .ie67 .skill-slot .slot-secondary {
display: block
}
.ie67 .tool-dialog-traits .dialog-list li {
float: left;
margin: 0 5px 15px 5px
}
.ie67 .skills li {
margin-bottom: 5px
}
.ie67 .dialog-list a {
zoom: 1
}
.ie6 .skills .skill-button, .ie6 .traits .trait-button .trait-icon, .ie6 .skill-slot, .ie6 .skill-slot .slot-primary, .ie6 .skill-slot .slot-secondary, .ie6 .tool-dialog-skills .skill-categories a span {
background-image: url("../images/sprite-v2-ie.png")
}
.ie6 .skill-calculator {
background-image: url("../images/calc-v2-bg-ie.png")
}
.ie6 .tool-dialog-skills .dialog-content {
height: 400px
}
.ie6 .tool-dialog-traits .d3-icon-trait .frame {
background-image: url("../images/trait-42-simple.gif")
}
.ie6 .tool-dialog-traits .dialog-list a {
float: left;
display: block
}
.ie6 .tool-dialog-skills .change-skill .icon-16 {
display: none
}
.box-alert {
margin: 70px 0 0 0;
padding: 20px;
text-align: center;
background: url("../images/diag-bg.gif") repeat;
color: #7b6d55
}
.box-alert span {
background: url("../images/alert.gif") 0 50% no-repeat;
padding-left: 20px;
display: inline-block
}
.calc-des{
    background: url(../images/guide-top-all.jpg) no-repeat 0 0;
    height: 260px;
    padding-left: 30px;
    overflow: hidden;
}
.calc-des h2{
    font-size: 24px;
color: #f3e6d0;
margin: 30px 0 20px;
font-family: "Microsoft Yahei";
}
.calc-des .calc-text{
    line-height: 25px;
font-size: 12px;
width: 480px;
font-family: '\5B8B\4F53';
margin-bottom: 85px;
}
.calc-des .calc-text p{
    margin-bottom: 20px;
}
#content{
    width: 1190px;
}