.d3 .contents .content-left { background: url(../images/d3-index-left-bg.jpg) no-repeat 0 0; }

/* Slideshow */
.slideshow { width: 640px; height: 260px; margin: 15px 0 0; position: relative; z-index: 0; }
.slideshow .mask { width: 640px; height: 260px; background: url(../images/slideshow-mask.png) no-repeat 0 0; position: absolute; left: 0; top: 0; z-index: 1; cursor: pointer; }
.slideshow .slideshow-image { }
.slideshow .slideshow-image li { display: none; }
.slideshow .slideshow-image li img { display: block; line-height: 0; }
.slideshow .slideshow-image li a { display: block; }
.slideshow .slideshow-image li a:hover { color: #ff9100; }
.slideshow .slideshow-image li span { width: 625px; height: 40px; padding: 0 0 0 15px; display: block; position: absolute; left: 0; bottom: 2px; background: rgba(0,0,0,0.8); line-height: 40px; color: #f3e6d0; font-size: 14px; }
.slideshow .slideshow-tabs { position: absolute; right: 15px; bottom: 10px; z-index: 2; }
.slideshow .slideshow-tabs li { float: left; padding: 0 2px; }
.slideshow .slideshow-tabs li a { width: 20px; height: 20px; display: block; background: url(../images/slideshow-icon.png) no-repeat 0 0; }
.slideshow .slideshow-tabs li.active a { background: url(../images/slideshow-icon-active.png) no-repeat 0 0; }

/* Top Articles */
.top-articles { margin: 0 0 0 -45px; padding: 20px 0; }
.top-articles li { padding: 0 0 0 45px; }
.top-articles li a { color: #cf590b; font-size: 14px; }

.blog-articles .article-wrapper:first-child { background: none; }

.d3-tools { position: relative; z-index: 1; margin: 10px 0 0 0; }

.search { }
.search .search-input { width: 320px; height: 25px; background: #000; border: 1px solid #312818; border-radius: 5px; color: #A99877; line-height: 20px; left: 0; padding: 5px 35px 6px 10px; box-shadow: 0 0 5px #000; font-family: 'Microsoft Yahei'; }
.search .search-button { width: 32px; height: 32px; background: url(../images/search-magnifier.png) no-repeat 0 0; position: absolute; left: 330px; top: 6px; }

.global-time-location { position: absolute; left: 380px; top: 0; }
.global-time-module { position: relative; z-index: 10; color: #A99877; font-size: 12px; text-align: left; }
.global-time-module a { outline: none; text-decoration: none; color: #ffb100; }
.global-time-module a:hover { color: #fff; }
.global-time-module .hidden { display: none; }
.global-time-module a.open-module { display: block; width: 120px; height: 36px; font-size: 14px; line-height: 34px; color: #FFCB8D; text-shadow: 0 0 5px #DD3400; background: url(../images/button.png) no-repeat 0 0; cursor: pointer; text-align: center; }
.global-time-module a.open-module:hover { text-decoration: none; color: #ffb100; background-position: 0 -36px; }
.global-time-module a.close-module { width: 20px; height: 20px; position: absolute; right: 0; top: 0; background: url(../images/close.jpg) no-repeat 0 0; cursor: pointer; }
.global-time-module a.close-module:hover { background-position: 0 -20px; }
.global-time { width: 448px; height: 100px; padding: 10px 20px 30px 30px; background: #181410; border: 1px solid #302A21; position: absolute; right: 0; top: 42px; z-index: 10; box-shadow: 0 0 15px #000; }
.global-time span { height: 20px; line-height: 20px; }
.global-time input { width: 30px; height: 22px; padding: 0 5px; line-height: 22px; border: 1px solid #302A21; background: #1b1714; color: #D96500; box-shadow: inset 0 0 5px #000; }
.global-time option { line-height: 20px; box-shadow: inset 0 0 5px #000; }
.global-time .choose-timezone { margin: 15px 0 0 0; line-height: 25px; }
.global-time .choose-timezone select { width: 155px; height: 20px; color: #A99877; border: 1px solid #302A21; background: #1b1714; font-size: 12px; box-shadow: inset 0 0 5px #000; }
.global-time .conversion { width: 71px; height: 24px; border: 0 none; background: url(../images/button-70.jpg) no-repeat 0 -1px; box-shadow: 0 0 5px #000; outline: none; color: #FFCB8D; text-shadow: 0 0 5px #DD3400; font-size: 12px; cursor: pointer; margin-left: 43px; vertical-align: middle; }
.global-time .conversion:hover { background-position: 0 -30px; }
.global-time .conversion span { height: 23px; display: block; }
.global-time .input-time { margin: 10px 0 0 0; line-height: 22px; }
.global-time .display-time { margin: 10px 0 0 0; }
.global-time .result { width: 400px; display: block; line-height: 20px; }
.global-time .result span { color: #D96500; }
.global-time-open { width: 100px; height: 20px; line-height: 20px; display: block; background: #222; cursor: pointer; position: relative; }


.d3-module { margin: 30px 0 20px; position: relative; z-index: 0; }
.d3-module .up-arrow span { width: 20px; height: 36px; background: url(../images/d3-diffculty-arrow.png) no-repeat 0 center; }
.d3-module .module-navigation { padding: 2px 0; background: url(../images/d3-diffculty-arrow.png) no-repeat 2px 0; }
.d3-module .module-navigation li { float: left; padding: 0 0 0 20px; }
.d3-module .module-navigation li a { width: 145px; height: 36px; line-height: 36px; text-align: center; display: block; background: url(../images/d3-difficulty-button.png) no-repeat 0 0; }
.d3-module .module-navigation li a:hover,
.d3-module .module-navigation li.active a { background-position: 0 -48px; }
.d3-module .module-navigation li a span { height: 36px; color: #f3e6d0; padding: 0 0 0 25px; vertical-align: middle; display: inline-block; background: url(../images/d3-difficulty-icons.png) no-repeat 0 0; }
.d3-module .module-navigation li a span.l1 { background-position: 0 -2px; /*color: #909090;*/ }
.d3-module .module-navigation li a span.l2 { background-position: 0 -42px; /*color: #e5e5e5;*/ }
.d3-module .module-navigation li a span.l3 { background-position: 0 -82px; /*color: #c7b377;*/ }
.d3-module .module-navigation li a span.l4 { background-position: 0 -122px; /*color: #ff4000;*/ }
.d3-module .module-wrap { height: 120px; }
.d3-module .module-content { padding: 20px; display: none; }
.d3-module .module-content li { width: 175px; line-height: 26px; float: left; background: url(../images/bullet.gif) no-repeat 0 center; padding: 0 10px 0 15px; }

.season { width: 638px; height: 158px; border: 1px solid #262117; background: #0d0b08; position: absolute; left: 0; top: 0; z-index: 1; box-shadow: 0 0 10px #00ff00; border-radius: 5px; }
.season .close-button { width: 20px; height: 20px; position: absolute; right: 0; top: 0; z-index: 2; background: #262117 url(../images/close-icon.gif) no-repeat center 5px; cursor: pointer; }
.season .close-button:hover { background-position: center -45px; }
.season .season-container { }
.season .season-title { border-bottom: 1px solid #262117; padding: 10px 40px 10px 10px; }
.season .season-title h2 { height: 20px; line-height: 20px; color: #f3e6d0; font-size: 16px; background: url(../images/seasonal-leaf.png) no-repeat -24px -2px; padding: 0 0 0 25px; }
.season .season-title .season-countdown { float: right; color: #00ff00; font-size: 14px; }
.season .season-title .season-countdown span { height: 20px; line-height: 20px; padding: 0 5px; display: inline-block; }
.season .season-title .season-countdown span.hours,
.season .season-title .season-countdown span.minutes,
.season .season-title .season-countdown span.seconds { padding: 0; }
.season .season-content { padding: 20px; }
.season .season-content li { width: 174px; height: 26px; line-height: 26px; float: left; overflow: hidden; background: url(../images/bullet.gif) no-repeat 0 center; padding: 0 10px 0 15px; }

.patch { width: 638px; height: 158px; border: 1px solid #262117; background: #0d0b08; position: absolute; left: 0; top: 0; z-index: 1; box-shadow: 0 0 10px #6f9ca2; border-radius: 5px; }
.patch .close-button { width: 20px; height: 20px; position: absolute; right: 0; top: 0; z-index: 2; background: #262117 url(../images/close-icon.gif) no-repeat center 5px; cursor: pointer; }
.patch .close-button:hover { background-position: center -45px; }
.patch .patch-container { }
.patch .patch-title { border-bottom: 1px solid #262117; padding: 10px 40px 10px 10px; }
.patch .patch-title h2 { height: 20px; line-height: 20px; color: #f3e6d0; font-size: 16px; padding: 0 0 0 10px; }
.patch .patch-title .patch-countdown { float: right; color: #6f9ca2; font-size: 14px; }
.patch .patch-title .patch-countdown span { height: 20px; line-height: 20px; padding: 0 5px; display: inline-block; }
.patch .patch-title .patch-countdown span.hours,
.patch .patch-title .patch-countdown span.minutes,
.patch .patch-title .patch-countdown span.seconds { padding: 0; }
.patch .patch-content { padding: 20px; }
.patch .patch-content li { width: 174px; height: 26px; line-height: 26px; float: left; overflow: hidden; background: url(../images/bullet.gif) no-repeat 0 center; padding: 0 10px 0 15px; }


/* Builds */
.builds { width: 456px; }
.builds .build { background: #252017; border: 1px solid #382f1f; margin: 10px 0; cursor: pointer; }
.builds .build:hover { border-color: #824C06; }
.builds .build-head { padding: 10px 5px; }
.builds .build-head .class-icon { width: 44px; height: 44px; float: left; display: block; border: 1px solid #59411c; }
.builds .build-head .build-title { font-size: 14px; padding: 0 0 0 55px; color: #b99d6e; font-weight:normal; }
.builds .build-head .build-meta { color: #999; margin: 10px 0 0; padding: 0 0 0 55px; }
.builds .build-head .build-meta span { padding: 0 10px 0 0; }

.builds .build-contents { background: #0d0b08; border-top: 1px solid #382f1f; padding: 10px 5px; }
.builds .build-contents .skills li,
.builds .build-contents .passive li { float: left; }
.builds .build-contents .skills li { padding: 0 1px 0 0; }
.builds .build-contents .passive li { padding: 0 0 0 4px; }
.builds .build-contents .skills li a,
.builds .build-contents .passive li a { width: 42px; height: 42px; display: block; position: relative; }
.builds .build-contents .skills li a .frame,
.builds .build-contents .passive li a .frame { width: 42px; height: 42px; display: block; position: absolute; left: 0; top: 0; z-index: 10; }
.builds .build-contents .skills li a .frame { background: url(../images/skill-42.png) no-repeat 0 0; }
.builds .build-contents .passive li a .frame { background: url(../images/trait-42.png) no-repeat -42px 0; }
.builds .build-contents .skills li a:hover .frame { background-position: 0 -42px; }
.builds .build-contents .passive li a:hover .frame { background-position: -42px -42px; }

.builds .class-barbarian { background: url(../images/class-barbarian.jpg) no-repeat right 0; }
.builds .class-wizard { background: url(../images/class-wizard.jpg) no-repeat right 0; }
.builds .class-monk { background: url(../images/class-monk.jpg) no-repeat right 0; }
.builds .class-demon-hunter { background: url(../images/class-demon-hunter.jpg) no-repeat right 0; }
.builds .class-witch-doctor { background: url(../images/class-witch-doctor.jpg) no-repeat right 0; }
.builds .class-crusader { background: url(../images/class-crusader.jpg) no-repeat right 0; }
.builds .class-necromancer { background: url(../images/class-necro.jpg) no-repeat right 0; }

.builds .class-barbarian .class-icon { background: #000 url(../images/barbarian_male.png) no-repeat center; }
.builds .class-wizard .class-icon { background: #000 url(../images/wizard_female.png) no-repeat center; }
.builds .class-monk .class-icon { background: #000 url(../images/monk_male.png) no-repeat center; }
.builds .class-demon-hunter .class-icon { background: #000 url(../images/demonhunter_female.png) no-repeat center; }
.builds .class-witch-doctor .class-icon { background: #000 url(../images/witchdoctor_male.png) no-repeat center; }
.builds .class-crusader .class-icon { background: #000 url(../images/x1_crusader_male.png) no-repeat center; }
.builds .class-necromancer .class-icon { background: #000 url(../images/necro_male.png) no-repeat center; }