@charset "utf-8";
/* CSS Document */

/* Updates */
.updates { background:url(../images/updates-bg.jpg) no-repeat 0 0; width:710px; height:390px; margin:10px 0 0;}
.updates-left { float:left; width:390px; padding:40px 0 0 25px;}
.updates-left h2 { color:#141414; font-size:22px;}
.updates-left .more { font-size:12px; float:right; padding:10px 0 0 0;}
.updates-left .more a { color:#141414; }
.updates-left .data { color:#660000; font-size:12px; padding:0 0 0 10px; font-weight:bold;}
.updates-left .updates-list { margin:20px 0;}
.updates-left .updates-list h3 { color:#141414; font-weight:bold; height:20px; line-height:20px; margin:5px 0;}
.updates-left .updates-list h3 span { float:left; background:url(http://img3.cache.netease.com/game/blizzard/hs/template/images/hearthstone-icon.png) no-repeat; width:20px; height:20px; display:block; padding:0 2px 0 0;}
.updates-left .updates-list li { background:url(../images/updates-icon.gif) no-repeat left center; padding:0 0 0 20px; color:#141414; margin:0 0 0 20px;}
.updates-left .updates-list li a { color:#cc0000;}

.updates-right { float:left; width:270px; padding:10px 0 0 18px;}
.media-frame { display: inline-block; width: auto; border-collapse: collapse; position: relative; box-shadow: #000 0 0 5px; margin:2px 0; }
.media-frame span { position: absolute; display: inline-block;  background: url("http://img3.cache.netease.com/game/blizzard/hs/images/media-frame-corners.jpg") no-repeat; }

.media-frame .tl,
.media-frame .tr,
.media-frame .bl,
.media-frame .br { width: 8px; height: 8px; display: inline-block; background: url("http://img3.cache.netease.com/game/blizzard/hs/images/media-frame-corners.jpg") no-repeat; }
.media-frame .tm-left,
.media-frame .tm-right,
.media-frame .bm-left,
.media-frame .bm-right { width: 13px; height: 8px; }
.media-frame .tm-mid,
.media-frame .bm-mid { width: 4px; height: 8px; left: 50%; }
.media-frame .ml-top,
.media-frame .ml-bottom ,
.media-frame .mr-top,
.media-frame .mr-bottom { width: 8px; height: 10px; }
.media-frame .tm { height: 8px; background: url("http://img3.cache.netease.com/game/blizzard/hs/images/media-frame-bg-top.jpg") repeat-x; }
.media-frame .bm { height: 8px; background: url("http://img3.cache.netease.com/game/blizzard/hs/images/media-frame-bg-bottom.jpg") repeat-x; }
.media-frame .ml { width: 8px; background: url("http://img3.cache.netease.com/game/blizzard/hs/images/media-frame-bg-left.jpg") repeat-y; }
.media-frame .mr { width: 8px; background: url("http://img3.cache.netease.com/game/blizzard/hs/images/media-frame-bg-right.jpg") repeat-y; }
.media-frame .tm-left,
.media-frame .tm-mid,
.media-frame .tm-right { top: 0; }
.media-frame .bm-left,
.media-frame .bm-mid,
.media-frame .bm-right { bottom: 0; }
.media-frame .ml-top, 
.media-frame .mr-top { top: 8px; }
.media-frame .ml-bottom, 
.media-frame .mr-bottom { bottom: 8px; }
.media-frame .tm-left,
.media-frame .bm-left { left: 8px; }
.media-frame .tm-right,
.media-frame .bm-right { right: 8px; }
.media-frame .tm-left { background-position: -3px 0; }
.media-frame .tm-mid { background-position: -30px 0; }
.media-frame .tm-right { background-position: -16px 0; }
.media-frame .bm-left { background-position: -3px -28px; }
.media-frame .bm-mid { background-position: -30px -28px; }
.media-frame .bm-right { background-position: -16px -28px; }
.media-frame .ml-top { background-position: -8px -8px; }
.media-frame .ml-bottom { background-position: -8px -18px; }
.media-frame .mr-top { background-position: -16px -8px; }
.media-frame .mr-bottom { background-position: -16px -18px; }
.media-frame .tl { background-position: 0 -8px; }
.media-frame .tr { background-position: -24px -8px; }
.media-frame .bl { background-position: 0 -20px; }
.media-frame .br { background-position: -24px -20px; }
.media-frame .mm {display:block; position:relative;}
.media-frame .mm a {  width:250px; height:100px; overflow:hidden;  border:1px solid #141414; display:block;}
.media-frame .mm a:hover { border:1px solid #958b70;}
.media-frame .mm span { position:absolute; left:1px; bottom:1px; width:250px; height:20px; line-height:20px; text-align:center; background:#000; opacity:0.8;}
.media-frame .mm img { display:block;}

.classes-card { margin:10px 0;width:710px; }
.classes-card-title h2 { color:#fff; font-size:22px; padding:0 0 0 5px;}
.classes-card-title .class-icon {  margin:0 0 0 5px !important;}
.class-icons { float:right;}
.class-icons li { float:left;}
/* Card Carousel */
.card-carousel { background:#000; height:430px; border:1px solid #292929; margin:10px 0 0; position:relative; z-index:0;}
.card-carousel .cards-list { position:relative;height:380px; width:500px; margin:0 auto }
.card-carousel .cards-list img { width:100%; height:100%; vertical-align:middle; max-height:350px;}
.card-carousel .cards-list li { position:absolute; top:0; zIndex:0;height:350px; width:260px;}
.cards-list li{ }
.card-carousel a.prev-card {  left:20px; background:url(http://img3.cache.netease.com/game/blizzard/hs/template/images/roll-button-icons.gif) no-repeat 15px 30px #141414;}
.card-carousel a.prev-card:hover { background-position:15px -325px; border:1px solid #c17824;}
.card-carousel a.next-card {  right:20px; background:url(http://img3.cache.netease.com/game/blizzard/hs/template/images/roll-button-icons.gif) no-repeat 15px -85px #141414;}
.card-carousel a.next-card:hover { background-position:15px -204px; border:1px solid #c17824;}
.card-carousel a.scroll-button { top:145px;border:1px solid #2d2d2d; width:50px; height:100px; display:block; position:absolute; z-index:999}