.skill-calculator { width: 630px; min-height: 800px; margin: 0 0 0 219px; top: -25px; background: url("../../../images/tool/skill-calculator/calc-v2-bg.png") no-repeat; position: relative; }
.skill-calculator-inner { position: relative; padding: 69px 45px 0 45px; background: url("../../../images/tool/skill-calculator/calc-v2-bg-inner.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 .header-3 { text-align: center; text-shadow: 0 0 3px #000; padding-bottom: 5px; margin-bottom: 10px; background: url("../../../images/tool/skill-calculator/calc-divider.jpg") 50% 100% no-repeat; }
.skill-calculator .export-link { position: absolute; top: 40px; left: 50px; }

/* sprites */
.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/tool/skill-calculator/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 */
.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: none; }
.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 .d3-num { 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 .d3-num,
.skills .skill-button.skill-button-active .skill-icon .d3-num { color: #fff; }
.skills .skill-button.skill-button-chosen .skill-name { color: #f3e6d0; }

/* traits */
.traits { height: 136px; margin-bottom: 4px; padding-top: 12px; }
.traits ul { padding-left: 10px; }
.traits li { display: inline-block; float: left; margin-left: 15px; 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 .d3-num { 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 .d3-num,
.traits .trait-button.trait-button-active .trait-icon .d3-num { 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; }

/* dialog boxes */
.tool-dialog { right: -200px; 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 .d3-color-gold,
.tool-dialog a:hover .d3-color-gold { color: #221103 !important; }

/* skills dialog */
.tool-dialog-skills .dialog-content { min-height: 400px; }
.tool-dialog-skills .header-3 { color: #660000; font-size: 12px; text-align: center; font-weight: bold; }
.tool-dialog-skills .header-3 .elective-left { float: left; }
.tool-dialog-skills .header-3 .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; }

/* runes dialog */
.tool-dialog-skills .rune-choices { padding: 0; margin: 5px -10px; }
.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; 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; }

/* traits dialog */
.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/icons/frames/trait-42-simple.png"); }
.tool-dialog-traits .trait-choice.disabled { cursor: default; }

/* export dialog */
.tool-dialog-export { top: 140px; right: 171px; }

/* dialog sprite maps */
.calculator-barbarian .skill-choice .d3-icon { background-image: url('../../../images/tool/skill-calculator/class-barbarian.png'); }
.calculator-barbarian .trait-choice .d3-icon { background-image: url('../../../images/tool/skill-calculator/class-barbarian-passive.png'); }
.calculator-crusader .skill-choice .d3-icon { background-image: url('../../../images/tool/skill-calculator/class-crusader.png'); }
.calculator-crusader .trait-choice .d3-icon { background-image: url('../../../images/tool/skill-calculator/class-crusader-passive.png'); }
.calculator-demon-hunter .skill-choice .d3-icon { background-image: url('../../../images/tool/skill-calculator/class-demonhunter.png'); }
.calculator-demon-hunter .trait-choice .d3-icon { background-image: url('../../../images/tool/skill-calculator/class-demonhunter-passive.png'); }
.calculator-monk .skill-choice .d3-icon { background-image: url('../../../images/tool/skill-calculator/class-monk.png'); }
.calculator-monk .trait-choice .d3-icon { background-image: url('../../../images/tool/skill-calculator/class-monk-passive.png'); }
.calculator-necromancer .skill-choice .d3-icon { background-image: url('../../../images/tool/skill-calculator/class-necromancer.png'); }
.calculator-necromancer .trait-choice .d3-icon { background-image: url('../../../images/tool/skill-calculator/class-necromancer-passive.png'); }
.calculator-witch-doctor .skill-choice .d3-icon { background-image: url('../../../images/tool/skill-calculator/class-witchdoctor.png'); }
.calculator-witch-doctor .trait-choice .d3-icon { background-image: url('../../../images/tool/skill-calculator/class-witchdoctor-passive.png'); }
.calculator-wizard .skill-choice .d3-icon { background-image: url('../../../images/tool/skill-calculator/class-wizard.png'); }
.calculator-wizard .trait-choice .d3-icon { background-image: url('../../../images/tool/skill-calculator/class-wizard-passive.png'); }

.sprite-0-0 .d3-icon { background-position: -0px -0px; }
.sprite-0-0 .d3-icon.selected,
.sprite-0-0.disabled .d3-icon { background-position: -0px -42px !important; }
.sprite-0-1 .d3-icon { background-position: -42px -0px; }
.sprite-0-1 .d3-icon.selected,
.sprite-0-1.disabled .d3-icon { background-position: -42px -42px !important; }
.sprite-0-2 .d3-icon { background-position: -84px -0px; }
.sprite-0-2 .d3-icon.selected,
.sprite-0-2.disabled .d3-icon { background-position: -84px -42px !important; }
.sprite-0-3 .d3-icon { background-position: -126px -0px; }
.sprite-0-3 .d3-icon.selected,
.sprite-0-3.disabled .d3-icon { background-position: -126px -42px !important; }
.sprite-0-4 .d3-icon { background-position: -168px -0px; }
.sprite-0-4 .d3-icon.selected,
.sprite-0-4.disabled .d3-icon { background-position: -168px -42px !important; }
.sprite-1-0 .d3-icon { background-position: -0px -84px; }
.sprite-1-0 .d3-icon.selected,
.sprite-1-0.disabled .d3-icon { background-position: -0px -126px !important; }
.sprite-1-1 .d3-icon { background-position: -42px -84px; }
.sprite-1-1 .d3-icon.selected,
.sprite-1-1.disabled .d3-icon { background-position: -42px -126px !important; }
.sprite-1-2 .d3-icon { background-position: -84px -84px; }
.sprite-1-2 .d3-icon.selected,
.sprite-1-2.disabled .d3-icon { background-position: -84px -126px !important; }
.sprite-1-3 .d3-icon { background-position: -126px -84px; }
.sprite-1-3 .d3-icon.selected,
.sprite-1-3.disabled .d3-icon { background-position: -126px -126px !important; }
.sprite-1-4 .d3-icon { background-position: -168px -84px; }
.sprite-1-4 .d3-icon.selected,
.sprite-1-4.disabled .d3-icon { background-position: -168px -126px !important; }
.sprite-2-0 .d3-icon { background-position: -0px -168px; }
.sprite-2-0 .d3-icon.selected,
.sprite-2-0.disabled .d3-icon { background-position: -0px -210px !important; }
.sprite-2-1 .d3-icon { background-position: -42px -168px; }
.sprite-2-1 .d3-icon.selected,
.sprite-2-1.disabled .d3-icon { background-position: -42px -210px !important; }
.sprite-2-2 .d3-icon { background-position: -84px -168px; }
.sprite-2-2 .d3-icon.selected,
.sprite-2-2.disabled .d3-icon { background-position: -84px -210px !important; }
.sprite-2-3 .d3-icon { background-position: -126px -168px; }
.sprite-2-3 .d3-icon.selected,
.sprite-2-3.disabled .d3-icon { background-position: -126px -210px !important; }
.sprite-2-4 .d3-icon { background-position: -168px -168px; }
.sprite-2-4 .d3-icon.selected,
.sprite-2-4.disabled .d3-icon { background-position: -168px -210px !important; }
.sprite-3-0 .d3-icon { background-position: -0px -252px; }
.sprite-3-0 .d3-icon.selected,
.sprite-3-0.disabled .d3-icon { background-position: -0px -294px !important; }
.sprite-3-1 .d3-icon { background-position: -42px -252px; }
.sprite-3-1 .d3-icon.selected,
.sprite-3-1.disabled .d3-icon { background-position: -42px -294px !important; }
.sprite-3-2 .d3-icon { background-position: -84px -252px; }
.sprite-3-2 .d3-icon.selected,
.sprite-3-2.disabled .d3-icon { background-position: -84px -294px !important; }
.sprite-3-3 .d3-icon { background-position: -126px -252px; }
.sprite-3-3 .d3-icon.selected,
.sprite-3-3.disabled .d3-icon { background-position: -126px -294px !important; }
.sprite-3-4 .d3-icon { background-position: -168px -252px; }
.sprite-3-4 .d3-icon.selected,
.sprite-3-4.disabled .d3-icon { background-position: -168px -294px !important; }
.sprite-4-0 .d3-icon { background-position: -0px -336px; }
.sprite-4-0 .d3-icon.selected,
.sprite-4-0.disabled .d3-icon { background-position: -0px -378px !important; }
.sprite-4-1 .d3-icon { background-position: -42px -336px; }
.sprite-4-1 .d3-icon.selected,
.sprite-4-1.disabled .d3-icon { background-position: -42px -378px !important; }
.sprite-4-2 .d3-icon { background-position: -84px -336px; }
.sprite-4-2 .d3-icon.selected,
.sprite-4-2.disabled .d3-icon { background-position: -84px -378px !important; }
.sprite-4-3 .d3-icon { background-position: -126px -336px; }
.sprite-4-3 .d3-icon.selected,
.sprite-4-3.disabled .d3-icon { background-position: -126px -378px !important; }
.sprite-4-4 .d3-icon { background-position: -168px -336px; }
.sprite-4-4 .d3-icon.selected,
.sprite-4-4.disabled .d3-icon { background-position: -168px -378px !important; }
.sprite-5-0 .d3-icon { background-position: -0px -420px; }
.sprite-5-0 .d3-icon.selected,
.sprite-5-0.disabled .d3-icon { background-position: -0px -462px !important; }
.sprite-5-1 .d3-icon { background-position: -42px -420px; }
.sprite-5-1 .d3-icon.selected,
.sprite-5-1.disabled .d3-icon { background-position: -42px -462px !important; }
.sprite-5-2 .d3-icon { background-position: -84px -420px; }
.sprite-5-2 .d3-icon.selected,
.sprite-5-2.disabled .d3-icon { background-position: -84px -462px !important; }
.sprite-5-3 .d3-icon { background-position: -126px -420px; }
.sprite-5-3 .d3-icon.selected,
.sprite-5-3.disabled .d3-icon { background-position: -126px -462px !important; }
.sprite-5-4 .d3-icon { background-position: -168px -420px; }
.sprite-5-4 .d3-icon.selected,
.sprite-5-4.disabled .d3-icon { 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; }

/* ie */
.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: #000000; }

.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/tool/skill-calculator/sprite-v2-ie.png"); }
.ie6 .skill-calculator { background-image: url("../../../images/tool/skill-calculator/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/icons/frames/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; }