body { background-image: url(../../../images/buy-now/bg/bg-baked.jpg) }

@media (max-width: 1920px) {
	body { background-image: url("../../../images/buy-now/bg/bg-baked-1920px.jpg") }
}

@media (max-width: 1680px) {
	body { background-image: url("../../../images/buy-now/bg/bg-baked-1680px.jpg") }
}

@media (max-width: 1440px) {
	body { background-image: url("../../../images/buy-now/bg/bg-baked-1440px.jpg") }
}

@media (max-width: 1280px) {
	body { background-image: url("../../../images/buy-now/bg/bg-baked-1280px.jpg") }
}

@media (max-width: 1024px) {
	body { background-image: url("../../../images/buy-now/bg/bg-baked-1024px.jpg") }
}

/* zh-tw logo */
.zh-tw #header #logo a,
.ie6 .zh-tw #header #logo a { background:url(../../../images/game/hots-preview/tw-logo.jpg) no-repeat 0 0 !important }

/* breadcrumbs */
.hots .ui-breadcrumb li a { color:#de5816;  }
.hots .ui-breadcrumb li a .breadcrumb-text { border-bottom: 1px dotted #de5816; }
.hots .ui-breadcrumb li.last .breadcrumb-text { color: #fff; border-color: #fff; }
.hots .ui-breadcrumb li a:hover .breadcrumb-text,
.hots .ui-breadcrumb li a.opened .breadcrumb-text { color: #fff; border-color: #fff; }
.hots .ui-breadcrumb li .breadcrumb-arrow:after { border:0; content:" "; display:inline-block; background: url("../../../images/icons/hots-flyout-arrows.gif") no-repeat 0 -123px; width: 15px; height: 10px; position:relative; top:3px; margin-left:2px }

/* menu */
.flyout-menu { background-color:#4a2d4d; border:1px solid #6e4872 }
.flyout-menu ul li a { background-color:#39233b; color:#FFF }
.flyout-menu ul li a.children { background-image:url(../../../images/icons/hots-flyout-arrows.gif) }
.flyout-menu ul li a.opened,
.flyout-menu ul li a:hover { color:#fc7939; background-color:#211422 }

/* comments */
.hots-comments { padding:0 43px }
.hots-comments .widget-default { float: left; }
.hots-comments .hots-sharing { border-bottom:1px solid #360a4b; border-top:1px solid #360a4b; padding:10px 0; }
.hots-comments .hots-sharing .community-share { width:50%; float:left; height:20px  }
.hots-comments .hots-sharing .share-title { float:left; padding:3px 10px 0 0; color:#88528b }
.hots-comments .hots-sharing .hots-forum-link { float:right; color:#b74b16; font-family:Tahoma; font-size:14px; background:none }
.hots-comments .hots-sharing .hots-forum-link .text { float:left }
.hots-comments .hots-sharing .hotsforum-link .arrow { display:block; background:url(../../../images/game/hots-preview/arrows.png) -21px 0; height:9px; width:8px; float:left; margin:6px 0 0 5px; overflow:hidden }
.hots-comments .hots-sharing .hots-forum-link:hover .text { color:#FFF }
.hots-comments .hots-sharing .hots-forum-link:hover .arrow { background-position:-21px -9px }
.hots-comments #page-comments { padding:70px 0 0 0 }
.hots-comments #page-comments .new-post { background:#360a4b }
.hots-comments #page-comments .new-post .comment { background:#19081f !important }
.hots-comments #page-comments .new-post .button1 span, { color:#FFF; background-image: url(../../../images/buttons/hots-button-1.gif) }
.hots-comments #page-comments .comment { background-color:#1f0927; color:#8567BC }
.hots-comments #page-comments .comment .user .time a { color:#3c1f42 }
.hots-comments #page-comments .character-info .user-name .context-link { color:#B74B16 }
.hots-comments #page-comments .character-info .user-name .context-link:hover { color:#FFF }
.hots-comments #page-comments .portrait-a,
.hots-comments #page-comments .portrait-b,
.hots-comments #page-comments .portrait-c { background-image: url(../../../images/hots-portrait-frame.gif) }
.hots-comments #page-comments .context-link { background-image: url(../../../images/layout/cms/hots-char-arrow.gif) }
.hots-comments #page-comments .page-comment-interior { background:none }
.hots-comments #page-comments .comment-actions .reply-link { color:#B74B16; background:none }
.hots-comments #page-comments .comment-actions .reply-link:hover { color:#FFF }
.hots-comments #page-comments .ui-context { background-color:#110615; border-color:#360a4b }
.hots-comments #page-comments .ui-context a { color:#B74B16 }
.hots-comments #page-comments .ui-context a:hover { color:#FFF }
.hots-comments #page-comments .ui-context .character-list .primary .char .realm { color:#63367a }
.hots-comments #page-comments .ui-context .context .context-links a { background-color:#3c1d49 }
.hots-comments #page-comments .karma .rate-btn:hover,
.hots-comments #page-comments a { color:#B74B16 }
.hots-comments #page-comments a:hover { color:#FFF }
.hots-comments #page-comments .karma-feedback,
.hots-comments #page-comments .prev-vote { background:#110615; border-color:#110615 }
.hots-comments #page-comments .ui-dropdown .dropdown-wrapper { background:#1F0927; border-color:#360A4B }
.hots-comments #page-comments .ui-dropdown .dropdown-wrapper a { color:#B74B16 }
.hots-comments #page-comments .ui-dropdown .dropdown-wrapper ul li a:hover { color:#fff; background-color:transparent !important }
.hots-comments #page-comments .rate-action a.report  { border-top-color:#360A4B }
.hots-comments #page-comments .karma .rate-btn,
.hots-comments #page-comments .karma .rate-btn span  { background-image:url(../../../images/game/hots-preview/rate-button.png) }

.hots-comments .comments-container .ui-pagination { color: #8567BC; margin-bottom:30px }
.hots-comments .comments-container .ui-pagination li a {  background-color:#3C1D49; color:#B74B16 }
.hots-comments .comments-container .ui-pagination li.current a { background-color:#FFF; color:#B74B16; border:none }

/* content */
.hots .body { background-image: url(../../../images/layout/hots-content-bg.png); padding-top:0 }
.hots .body-bot { background:none; border-bottom-color:#270b33; padding-top:1px }
.hots .body-bot .hots-line-fix { display:block; width:1px; height:229px; position:absolute; top: 0; background:#201d20 url(../../../images/game/hots-preview/line-fix.jpg) no-repeat ;}
.hots .body-bot .hots-line-fix.left-line { background-position:0 0; left: -1px;}
.hots .body-bot .hots-line-fix.right-line { background-position:-1px 0; right: 0px;}

/* landing */
.hots .body-top { background:url(../../../images/game/hots-preview/landing/content-bg.jpg) no-repeat }
.hots.original .body-top{ background:url(../../../images/game/hots-preview/landing/content-bg-original.jpg) no-repeat }

#kerrigan-wrapper { height:920px; position:absolute; top: 0; left: 0; z-index: 6;}
#kerrigan-anim { height:920px }

/* main page submmenu */
#hots-logo { width:504px; height:220px; background:url(../../../images/game/hots-preview/landing/hots-logo.png) no-repeat 0 20px; float:right; margin-top: -10px; }

#kerrigan-wrapper .hots-submenu { font-size:19px; margin-top:70px; width: 590px; text-align: center; position: relative; z-index: 5; }
#kerrigan-wrapper .hots-submenu ul { display: table; margin: 0 auto; }
#kerrigan-wrapper .hots-submenu li { display:inline-block; border-right: 1px solid #351045; float: left;}
#kerrigan-wrapper .hots-submenu li:last-child { border-right: none;}
#kerrigan-wrapper .hots-submenu a { display:inline-block; color:#dc500f; padding:0 9px; text-shadow: #dc500f 0px 0px 10px }
#kerrigan-wrapper .hots-submenu a:hover { color:#fff; text-shadow: #fff 0px 0px 10px }

/* main page submmenu button */
.landing-right-colummn { width:450px; position:relative; right:0; float:right }
.landing-right-colummn .button1  { margin:5px 0 0 60px; }
.landing-right-colummn .button1 span,
.landing-section .button1 span { background-image: url(../../../images/buttons/hots-button-1.gif); }
.landing-right-colummn .button1 span span,
.landing-section .button1 span span { color:#FFF; background-image: url(../../../images/buttons/hots-button-1.gif); font-size:14px; width:220px }

/* original main page submmenu */
.landing-right-colummn.original #hots-logo { position:absolute; right:-32px; top:-12px }
.landing-right-colummn.original .hots-submenu { float:right;  margin-top:220px; font-family:Arial; font-size:16px; font-weight: bold; text-transform:uppercase; background:url(../../../images/game/hots-preview/landing/submenu.png) no-repeat }
.landing-right-colummn.original .hots-submenu a { display:block; color:#FFF; width:354px; padding-left:19px; height:41px; line-height:41px; text-shadow: #a35ec1 0px 0px 10px }
.landing-right-colummn.original .hots-submenu a:hover { color:#dc500f; text-shadow: #dc500f 0px 0px 10px }
.landing-right-colummn.original .hots-submenu .arrow { float:right; display:block; width:21px; height:27px; background:url(../../../images/game/hots-preview/arrows.png) 0 0 no-repeat; margin-right:76px; margin-top:9px; overflow:hidden }
.landing-right-colummn.original .hots-submenu a:hover .arrow { background-position:0 -27px  }
.landing-right-colummn.original .button1  { margin:5px 0 0 85px; }
.landing-right-colummn.original .button1 span { background-image: url(../../../images/buttons/hots-button-1.gif); }
.landing-right-colummn.original .button1 span span { color:#FFF; background-image: url(../../../images/buttons/hots-button-1.gif); font-size:14px; width:220px }



/* main page news feed */
#hots-preview-feed { width: 317px; margin-left: 40px; margin-top: 40px; min-height: 315px; }
#hots-preview-feed .update-list { background-color: #1f0927; margin-top: 8px; overflow: hidden; }
#hots-preview-feed .latest { display: block; color:#fff; font-size: 14px; }
#hots-preview-feed .sidebar-module { padding: 0; }
#hots-preview-feed .sidebar-module .update-list li { padding: 0; background-image: none; margin: 0 8px; border-bottom: 1px solid #362336;}
#hots-preview-feed .sidebar-module .update-list li a { padding: 7px 0; color:#db92db; }
#hots-preview-feed .sidebar-module .update-list li a:hover { color:#fff; }
#hots-preview-feed .sidebar-module .update-list li:last-child { border-bottom: none; }

.landing-right-colummn .anim-wrapper { width:280px; height:160px; position:absolute; right:73px; cursor:pointer; background-image:url(../../../images/game/hots-preview/landing/thumbnail-sprite.png); background-repeat:no-repeat }
.landing-right-colummn #teaser-anim-wrapper.anim-wrapper { top:500px; background-position: -8px -333px }
.landing-right-colummn #teaser-anim-wrapper.anim-wrapper:hover { background-position: -8px -508px }
.landing-right-colummn #gameplay-anim-wrapper.anim-wrapper { top:700px; background-position: -8px -689px }
.landing-right-colummn #gameplay-anim-wrapper.anim-wrapper:hover { background-position: -8px -864px }
.landing-right-colummn #blizzcon-2011-teaser-anim-wrapper.anim-wrapper { top:500px; background-position: -8px -1035px }
.landing-right-colummn #blizzcon-2011-teaser-anim-wrapper.anim-wrapper:hover { background-position: -8px -1210px }
.landing-right-colummn .video-button-title { position:absolute; width:280px; right:73px; display:block; color:#FFF; font-size:14px; font-family:Lucida Sans Unicode; text-transform:uppercase }
.landing-right-colummn .video-button-title.teaser-video-button { top:455px }
.landing-right-colummn .video-button-title.gameplay-video-button { top:672px }
.landing-right-colummn .video-button-title span { background: #dc500f; font-size: 10px; padding: 1px 5px; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; }


/* main page thumbnails */
.landing-right-colummn .media-wrapper { width:385px; margin-left: 10px;  position: absolute; top:670px; }
.landing-right-colummn .media-wrapper .video { width: 100%; height:211px; cursor:pointer; background-image:url(../../../images/game/hots-preview/landing/media-sprite.png); background-repeat:no-repeat; }
.landing-right-colummn .media-wrapper .video:hover { background-position: 0 -211px; }
.landing-right-colummn .media-wrapper .screens { margin-top: 20px; position: absolute; width: 100% }
.landing-right-colummn .media-wrapper .thumbnail-wrapper {  float: left; margin-right: 7px; }
.landing-right-colummn .media-wrapper .screens .thumbnail { width: 121px; float: left;  height: 76px; background:url(../../../images/game/hots-preview/landing/media-sprite.png) -389px 0;}
.landing-right-colummn .media-wrapper .screens .thumbnail:hover { background-position: -389px -76px; cursor: pointer; }
.landing-right-colummn .media-wrapper .screens .thumb-bg  { display: inline-block; height: 76px; width: 121px; }
.landing-right-colummn .media-wrapper .title { color: #fff; display: inline-block; margin: 4px 0 }
.landing-right-colummn .media-wrapper .media-link { float: right; display: inline-block; margin: 4px 0}
.landing-right-colummn .media-wrapper .view-all { color: #d25517; float: right; }
.landing-right-colummn .media-wrapper .view-all .arrow { display: inline-block; float: right; height: 9px; width: 8px; margin: 3px 0 5px 5px; background:url(../../../images/game/hots-preview/arrows.png) -21px 0; overflow: hidden }
.landing-right-colummn .media-wrapper .view-all:hover { color: #fff }
.landing-right-colummn .media-wrapper .view-all:hover .arrow { background-position: -21px -9px }
.landing-right-colummn .video-button-title { position:absolute; width:280px; right:73px; display:block; color:#FFF; font-size:14px; font-family:Lucida Sans Unicode; text-transform:uppercase }
.landing-right-colummn .video-button-title.teaser-video-button { top: 455px }
.landing-right-colummn .video-button-title.gameplay-video-button { top: 672px }
.landing-right-colummn .video-button-title span { background: #dc500f; font-size: 10px; padding: 1px 5px; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px }


.landing-right-colummn .thumb-groups { float:right; width:353px; padding-top:464px }
.landing-right-colummn .thumb-group { width:276px; float:right; margin:35px 78px 0 0 }
.landing-right-colummn .thumb-group .group-title { color:#FFF; font-family:Lucida Sans Unicode; font-size:14px; text-transform:uppercase; display:block }
.landing-right-colummn .thumb-group .group-desc { color:#72488B; line-height:18px }
.landing-right-colummn .thumb-group .landing-thumb { display:block; background:url(../../../images/game/hots-preview/landing/thumbnail-sprite.png) no-repeat 0 0;  height:79px; width:276px; margin:10px 0 14px }
.landing-right-colummn .thumb-group.mission-thumb        .landing-thumb { background-position:0 0 }
.landing-right-colummn .thumb-group.mission-thumb:hover  .landing-thumb { background-position:0 -80px }
.landing-right-colummn .thumb-group.gameplay-thumb       .landing-thumb { background-position:0 -160px }
.landing-right-colummn .thumb-group.gameplay-thumb:hover .landing-thumb { background-position:0 -240px }
.landing-right-colummn.original .thumb-groups { padding-top:340px }


.landing-left-column { width: 450px; padding: 630px 0 40px 40px; position: relative; z-index: 5; }
.landing-left-column .landing-title { color: #FFF; font-family: Lucida Sans Unicode; font-size: 24px }
.ko-kr .landing-left-column .landing-title { font-family: DaumRegular; }
.landing-left-column .desc1 { font-family: Tahoma; font-size: 16px; color: #88528b; line-height: 30px }
.ko-kr .landing-left-column .desc1 { font-family: Dotum; }
.landing-left-column a { color: #b74b16; font-family: Tahoma; font-size: 14px }
.landing-left-column a .text { float: left }
.landing-left-column a .arrow { display: block; background: url(../../../images/game/hots-preview/arrows.png) -21px 0; height: 9px; width: 8px; float: left; margin:6px 0 0 5px; overflow: hidden }
.landing-left-column a:hover { color: #FFF }
.landing-left-column a:hover .arrow { background-position: -21px -9px }
.landing-left-column.original { margin-top: 830px; margin-bottom: 80px; }

.landing-section { padding: 40px 0 }
.landing-section a { color: #DC500F }
.landing-section a:hover { color: #fff }
.landing-section .section-center { text-align: center; margin: 0 100px }
.landing-section h2.section-center { margin-bottom: 10px }
.landing-section .section-header { font: bold 24px tahoma; text-transform: uppercase; color: #fff; margin: 0 0 35px 40px }
.ko-kr .landing-section .section-header { font-weight:normal; font-family: DaumRegular; }
.landing-section .section-right-align { margin-left: 500px; width: 450px }
.landing-section .landing-sub-section { padding-right: 503px; margin: 0 0 20px 0 }
.landing-section .landing-sub-section .subsection-header { font-weight: bold; color: #fff; font-size: 18px; margin-bottom: 15px }
.landing-section  p { line-height: 24px; font-size: 14px; color: #72488B }
.landing-section .landing-sub-section p strong { color: #8d61a7 }
.landing-section .landing-sub-section h6 { margin-top: 30px; color: #ca89f1; font-size: 14px }
.landing-section .landing-sub-section.section-left { padding-left: 40px; width: 450px }
.landing-section .landing-sub-section.section-right { padding-left: 500px; width: 450px; padding-right: 40px }

.landing-section .landing-sub-section.story { padding-top: 150px; padding-bottom: 110px;  margin-top: -150px; background: url(../../../images/game/hots-preview/landing/continue-story-bg.png) no-repeat right 0 }
.landing-section .landing-sub-section.lead { padding-top: 90px; position: relative; z-index: 5; padding-bottom: 110px;  margin-top: -110px; background: url(../../../images/game/hots-preview/landing/lead-zerg-bg.png) no-repeat left 0 }
.landing-section .landing-sub-section.change { min-height: 340px; padding-top: 110px; padding-bottom: 100px;  margin-top: -120px; position: relative; background: url(../../../images/game/hots-preview/landing/change-swarm-bg.jpg) no-repeat right 0 }
.landing-section.multiplayer { margin-top: -70px; }
.landing-section .landing-sub-section.mapsunits { padding-top:200px; padding-bottom: 110px; margin-top: -200px; background: url(../../../images/game/hots-preview/landing/maps-units-bg.jpg) no-repeat left center }
.landing-section .landing-sub-section.universe { padding-top: 220px; padding-bottom: 140px;  margin-top: -240px; background: url(../../../images/game/hots-preview/landing/universe-bg.png) no-repeat right 110px }
.landing-section.join { margin-top: -40px; background: url(../../../images/game/hots-preview/landing/join-the-fray-bg.jpg) no-repeat 0 bottom; padding-bottom: 170px; }

/* subpages */
.hots.subpage .body-top { background: url(../../../images/game/hots-preview/subpage-content-top.jpg) no-repeat 0 -1px; padding:0 }
.hots.subpage .hots-inner-content { padding:62px 0 60px; min-height:400px }
.hots.subpage .hots-inner-content a { color: #DC500F }
.hots.subpage .hots-inner-content a:hover { color: #fff }
.hots.subpage .hots-inner-content .section-group { background-repeat:no-repeat }
.hots.subpage .logo-link { display:block; width:350px; height:130px; position:absolute; right:0; top: 30px;}
.hots.subpage .left-indent { padding-left:47px }
.hots.subpage .subpage-title { color:#FFF; font-size:36px; text-transform:uppercase; font-family:Arial; margin-bottom:14px; padding-left:47px; width:500px }
.ko-kr.hots.subpage .subpage-title { font-family: DaumRegular; }
.hots.subpage .subpage-intro-desc { font-family:Tahoma; font-size:16px; color:#88528b; line-height:30px; width:432px; padding-left:47px }
.ko-kr.hots.subpage .subpage-intro-desc { font-family: Dotum; }
.hots.subpage .subpage-intro-small { font-family:Tahoma; font-size:14px; color:#72488b; line-height:24px; width:432px; margin:20px 0; padding-left:47px }
.ko-kr.hots.subpage .subpage-intro-small { font-family: Dotum; }

.hots.subpage .hots-submenu { margin-top:108px; float:right; font-family:Arial; font-size:12px; font-weight: bold; text-transform:uppercase; padding-bottom:5px }
.ko-kr.hots.subpage .hots-submenu { font-family: Dotum; }
.hots.subpage .hots-submenu a { display:block; color:#FFF; width:186px; margin-right:89px; height:28px; line-height:30px; vertical-align:bottom; border-bottom:1px solid #331042 }
.hots.subpage .hots-submenu a:hover { color:#dc500f }
.hots.subpage .hots-submenu .arrow { display:block; float:right; background: url(../../../images/game/hots-preview/arrows.png) no-repeat 0 -54px; width:14px; height:18px; margin-top:6px; overflow:hidden }
.hots.subpage .hots-submenu a:hover .arrow { background-position:0 -72px }
.hots.subpage .hots-submenu .active a { color:#88528b }
.hots.subpage .hots-submenu .active .arrow { background:none }
.zh-tw.hots.subpage .hots-submenu { font-weight:normal }

.hots.subpage .large-section-title { color:#FFF; font-size:15px; text-transform:uppercase; width:914px; margin-left:23px; height:76px; line-height:84px; background: url(../../../images/layout/content/titles/hots-title-large.png) no-repeat; padding-bottom:22px }
.hots.subpage .large-section-title .icon { float:left; width:47px; height:47px; background-repeat:no-repeat; margin:22px 14px 0 5px }
.hots.subpage .small-section-title { position:relative; color:#FFF; font-size:15px; text-transform:uppercase; display:block; width:463px; height:88px; line-height:74px; background: url(../../../images/layout/content/titles/hots-title-small.png) no-repeat }
.hots.subpage .small-section-title .icon { float:left; width:47px; height:47px; margin:15px 14px 0 5px; background-repeat:no-repeat; background-position:50% 50% }
.hots.subpage .small-section-title .view-all { color:#d25517; display: block; font-size: 11px; text-transform: none; text-align: right; position: absolute; right: 26px; line-height: 15px; top:28px }
.hots.subpage.zh-tw .small-section-title .view-all { font-size:12px }
.hots.subpage.ko-kr .small-section-title .view-all { top:30px }
.hots.subpage.ko-kr .small-section-title .view-all .arrow { margin-top:2px }
.hots.subpage .small-section-title .arrow { margin:4px 0 0 5px; float: right; display: block; background:url(../../../images/game/hots-preview/arrows.png) -21px 0; height:9px; width:8px; overflow:hidden }
.hots.subpage .small-section-title:hover .view-all { color:#FFF }
.hots.subpage .small-section-title:hover .arrow { background-position:-21px -9px }

.hots.subpage .section-left { float:left;  padding-left:47px }
.hots.subpage .section-right { float:right;  padding-right:47px }
.hots.subpage .section-desc { width:429px; color:#72488b; font-family: Tahoma; font-size:13px; line-height:24px }
.ko-kr.hots.subpage .section-desc { font-family: Dotum; }

.hots.subpage .lightbox-thumb { display: block; width: 430px; height: 200px; margin: 43px 0 30px; position: relative; background-repeat: no-repeat; background-position: 4px 0 }
.hots.subpage .lightbox-thumb .frame-click { display: block; height: 159px; width: 430px; cursor: pointer }
.hots.subpage .lightbox-thumb .frame { display: block; width: 430px; height:200px; background:url(../../../images/game/hots-preview/lightbox-frame.png) no-repeat }
.hots.subpage .lightbox-thumb .zoom { display: block; width: 49px; height:44px; position: absolute; top: -14px; right: -3px;  background:url(../../../images/game/hots-preview/lightbox-frame.png) 100% 0 no-repeat; cursor: pointer }
.hots.subpage .lightbox-thumb .caption { text-transform: uppercase; color: #FFF; float: left; height: 24px; display: block; line-height: 28px; padding-left: 22px }
.hots.subpage .lightbox-thumb:hover .frame { background-position: 0 100% }
.hots.subpage .lightbox-thumb:hover .zoom { background-position: 100% -44px }
.hots.subpage .lightbox-thumb .view-all { color: #d25517; float: right; display: block; text-align: right; height: 24px; line-height: 24px; padding-right: 30px }
.hots.subpage .lightbox-thumb .view-all .arrow { display: block; float: right; height: 9px; width: 8px; margin: 8px 0 0 5px; background:url(../../../images/game/hots-preview/arrows.png) -21px 0; overflow: hidden }
.hots.subpage .lightbox-thumb .view-all:hover { color: #fff }
.hots.subpage .lightbox-thumb .view-all:hover .arrow { background-position: -21px -9px }
.ie7 .hots.subpage .lightbox-thumb .view-all { width: 150px }

/* mini video links */
.hots.subpage .mini-video-link { float: right; margin: -53px 54px 12px 0; color:#dc500f; display:block; width: 173px; padding-left:104px; height:53px; background-repeat:no-repeat; line-height: 50px }
.hots.subpage .mini-video-link:hover { background-position: 0 100%; color: #FFF }
.hots.subpage .mini-video-link.gameplay-video { background-image: url(../../../images/game/hots-preview/gameplay-video-button.png) }
.hots.subpage .mini-video-link.teaser-video { background-image: url(../../../images/game/hots-preview/teaser-video-button.png) }
.story-subpage.hots.subpage .mini-video-link { margin-top: 65px }


/* screenshot boxes */
.hots.subpage .screenshots-section { margin-top: 30px }
.hots.subpage .screenshots-section .large-section-title { margin-bottom: 10px }
.hots.subpage .screenshots-section .large-section-title .icon { background-image: url(../../../images/layout/content/titles/hots-icons-media.png); background-position: 0 -94px }
.hots.subpage .screenshots-section .view-all { color: #D25517; display: block; float: right; height: 24px; line-height: 24px; padding-right: 30px; text-align: right; margin: -77px 40px 0 0 }
.hots.subpage .screenshots-section .view-all .arrow { background: url("../../../images/game/hots-preview/arrows.png") repeat scroll -21px 0 transparent; display: block; float: right; height: 9px; margin: 8px 0 0 5px; overflow: hidden; width: 8px;}
.hots.subpage .screenshots-section .view-all:hover { color: #FFF }
.hots.subpage .screenshots-section .view-all:hover .arrow { background-position: -21px -9px }
.hots.subpage .screenshots-section .thumb-wrapper { display: block; width: 189px; height: 140px; float: left; margin-right: 34px }
.hots.subpage .screenshots-section .thumb-wrapper .thumb-bg { display: block; width: 188px; height: 118px; background-repeat: no-repeat; }
.hots.subpage .screenshots-section .thumb-wrapper .thumb-frame { display: block; width: 189px; height: 123px; background:url(../../../images/game/hots-preview/media/frames.png) no-repeat }
.hots.subpage .screenshots-section .thumb-wrapper:hover .thumb-frame { background-position: 0 -123px }

/* story subpage */
.story-subpage .body-top{ background-image:url(../../../images/game/hots-preview/story/content-bg.jpg); min-height: 945px }
.hots-story .intro-min-height { min-height: 848px; width: 994px }
.ie7 .hots-story .intro-min-height { margin-top: -260px }
.hots-story .cast-section .large-section-title .icon { background-image: url(../../../images/layout/content/titles/hots-icons-story.png) }
.hots-story .left-indent { margin: 50px 0 30px }
.hots-story .cast-of-characters { padding: 42px 0 0 44px }
.hots-story .cast-of-characters .character { width: 418px; height: 157px; padding: 14px 0 0 10px; margin: 0 30px 32px 0; float: left; background:url(../../../images/game/hots-preview/story/cast-of-characters.jpg) no-repeat }
.hots-story .cast-of-characters .character .portrait { width: 93px; height: 147px; float: left; margin-right: 17px; background:url(../../../images/game/hots-preview/story/cast-of-characters.jpg) no-repeat }
.hots-story .cast-of-characters .character .portrait.kerrigan { background-position: 0 -171px }
.hots-story .cast-of-characters .character .portrait.mengsk   { background-position: -93px  -171px }
.hots-story .cast-of-characters .character .portrait.abathur  { background-position: -186px -171px }
.hots-story .cast-of-characters .character .portrait.raynor   { background-position: -279px -171px }
.hots-story .cast-of-characters .character .portrait.izsha    { background-position: -372px -171px }
.hots-story .cast-of-characters .character .portrait.zagara   { background-position: -465px -171px }
.hots-story .cast-of-characters .character .title { float: left; color: #FFF; font-size: 15px; font-family: Lucida Sans Unicode; text-transform: uppercase }
.ko-kr .hots-story .cast-of-characters .character .title { font-family: Dotum; }
.hots-story .cast-of-characters .character .desc { float: left; width: 286px; color: #88528b; font-family: Tahoma; font-size: 11px; margin-top: 20px }
.ko-kr .hots-story .cast-of-characters .character .desc { font-size: 12px; line-height: 1.5em; font-family: Dotum; }
.zh-tw .hots-story .cast-of-characters .character .desc { font-size: 12px; line-height: 1.5em }

/* gameplay subpage */
.hots-gameplay .large-section-title .icon { background-image: url(../../../images/layout/content/titles/hots-icons-gameplay.png) }
.hots-gameplay .brood-queen-section { min-height:605px; background: url(../../../images/game/hots-preview/gameplay/bg1.jpg) 304px 62px }
.hots-gameplay .brood-queen-section .large-section-title .icon { background-position: 0 0 }
.hots-gameplay .unnatural-section { min-height: 651px; background: url(../../../images/game/hots-preview/gameplay/bg2.jpg) 0 63px }
.hots-gameplay .unnatural-section .large-section-title .icon { background-position: 0 -47px }

/* missions subpage */
.hots-missions .large-section-title .icon { background-image: url(../../../images/layout/content/titles/hots-icons-missions.png) }
.hots-missions .char-section { background: url(../../../images/game/hots-preview/missions/bg1.jpg) 219px 63px; min-height: 650px; padding-top: 11px }
.hots-missions .char-section .large-section-title .icon { background-position: 0 0 }
.hots-missions .kaldir-section { background: url(../../../images/game/hots-preview/missions/bg2.jpg) 0 89px; min-height: 686px; padding-top: 26px }
.hots-missions .kaldir-section .large-section-title .icon { background-position: 0 -47px }

/* media subpage */
.hots.subpage .hots-media .hots-submenu { margin-bottom: 24px }
.hots-media .small-section-title .icon { background-image: url(../../../images/layout/content/titles/hots-icons-media.png) }
.hots-media .small-section-title.artwork .icon { background-position: 0 0 }
.hots-media .small-section-title.videos .icon { background-position: 0 -47px }
.hots-media .small-section-title.screenshots .icon { background-position: 0 -94px }

.hots-media .media-index-section { width:474px; margin:5px 0 31px 0 }
.hots-media .media-index-section .left-col { margin-right:30px }
.hots-media .media-index-section .section-content { margin-left:22px; padding-top:15px; width:463px }
.hots-media .media-index-section .thumb-wrapper { display:block; width:189px; height:140px; float:left; margin-bottom: 13px; }
.hots-media .media-index-section .thumb-wrapper .thumb-bg { display: block; width: 188px; height: 118px; background-repeat: no-repeat; }
.hots-media .media-index-section .thumb-wrapper .thumb-frame { display:block; width:189px; height:123px; background:url(../../../images/game/hots-preview/media/frames.png) no-repeat }
.hots-media .media-index-section .thumb-wrapper .date-added { display: block; font-size: 11px; padding-top: 3px; color:#58345c; line-height: 15px; }
.hots-media .media-index-section .thumb-wrapper:hover .date-added { color:#FFF }
.hots-media .media-index-section .thumb-wrapper:hover .thumb-frame { background-position:0 -123px }

.hots-media .media-index-section .thumb-wrapper.video-thumb-wrapper { float:none; width:393px; margin-bottom:12px }
.hots-media .media-index-section .thumb-wrapper.video-thumb-wrapper .video-info { display: block; float: right; width: 175px; padding: 3px 10px 0 5px }
.hots-media .media-index-section .thumb-wrapper.video-thumb-wrapper .video-title { color:#72488b; display: block; font-size: 14px }
.hots-media .media-index-section .thumb-wrapper.video-thumb-wrapper:hover .video-title { color:#FFF }
.hots-media .media-index-section .thumb-wrapper.video-thumb-wrapper:hover .thumb-frame { background-position:0 -246px }

/* faq subpage */
.hots-faq .faq-outline { margin:19px 0 37px; width:700px }
.hots-faq .faq-wrapper { background:url(../../../images/game/hots-preview/faq/question-frame.jpg) no-repeat; width:862px; padding:30px 0 20px 50px; margin:0 0 20px 42px  }
.hots-faq .outline-question { display:block; width:643px; padding:3px 0 3px 62px; color:#D25517; background:url(../../../images/game/hots-preview/faq/bullet.gif) 47px 9px no-repeat; font-family: Lucida Sans Unicode }
.ko-kr .hots-faq .outline-question { font-family: Dotum; }
.hots-faq .outline-question:hover { color:#FFF; background-position:47px -22px }
.hots-faq .faq-question { font-size:15px; font-family:Lucida Sans Unicode; color:#FFF; padding-bottom:15px }
.ko-kr .hots-faq .faq-question { font-family: Dotum; }
.hots-faq .faq-answer { width:790px; color:#72488b; line-height:24px; font-size:13px; font-family:Tahoma }
.ko-kr .hots-faq .faq-answer { font-family: Dotum; }

#facebook-like { width: 150px; }