﻿html, body { background: #003880; font-size:14px; }

.wrapper { background:url(../images/sc2-bg-2018.jpg) no-repeat center 0; padding:0 0 80px;}
.wrapper a { color: #fff; }
.wrapper a, 
.wrapper input { -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; }
.wrapper .content-container { width:1220px; height:100%; margin:0 auto; position:relative;}
.wrapper .content-container .content-left,
.wrapper .content-container .content-right { width:590px; float:left;}
.wrapper .content-container .content-left { padding-left:10px;}
.wrapper .content-container .content-right { padding-left:20px;}

.sidebar-container { padding:20px; }

.clear::after,
.clear::before { content: ''; display: table; clear: both; }

/* SVG */
.icons { width: 44px; }
.icons-data { display: none; }

/* Fix */
.ntes-nav-main { width:1200px !important;}

/* Head */
.head { height:300px; position:relative;}
.head .csh-logo { width:355px; height:90px; display:block; position:absolute; left:10px; top:50%; margin-top:-45px; background:url(../images/csh-logo.png) no-repeat center; }

/* Menu */
.menu-container { position:absolute; right:10px; top:50%; margin-top:-45px; }

.menu-bar { border: 2px solid rgba(255,255,255,0.2); border-left: 0; border-right: 0; position:relative; font-size:16px; float:left; }
.menu-bar:before { content:''; width:50px; height:90px; position:absolute; left:-50px; top:-2px; background:url(../images/sitenav-menu-bevel.png) no-repeat 0 0;}
.menu-bar .sitenav-menu { width: 500px; height: 86px; background: rgba(0,13,26,0.5); display:table; }
.menu-bar .sitenav-menu li { display:table-cell; vertical-align:middle; text-align:center;}
.menu-bar .sitenav-menu li a { width:100%; height:86px; line-height:86px; display:inline-block; position:relative;}
.menu-bar .sitenav-menu li a:hover:after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; opacity: 0.3; background: -webkit-linear-gradient(top,rgba(0,170,255,0),#0af); background: linear-gradient(top,rgba(0,170,255,0),#0af); }

.search-bar { min-width:70px; height:86px; background:#640; border:2px solid #f49501; position:relative; float:left; }
.search-bar .search-icon { width:70px; height:86px; background:url(../images/search-icon.png) no-repeat center; position:absolute; left:0; top:0; }
.search-bar .search-input { width:200px; font-size:16px; display:block; box-sizing:border-box; border:none; outline:none; line-height:86px; padding:0 10px 0 70px; color:#fff; background:#640;}
.search-bar .search-input::-webkit-input-placeholder { color:rgba(255,255,255,0.5);}
.search-bar .search-input::-moz-placeholder { color:rgba(255,255,255,0.5);}
.search-bar .search-input:-ms-input-placeholder { color:rgba(255,255,255,0.5);}

/* Latest Articles */
.latest-articles { margin-top: 20px; }
.latest-articles .article-item { margin-bottom: 10px; background: rgba(0,13,26,0.5); }
.latest-articles .article-item.bluepost { background: url(http://img1.cache.netease.com/game/blizzard/d3/images/blizzard-post-logo.png) no-repeat 115% center #0b1926; }
.latest-articles .article-item a { height: 90px; display: block; position: relative; }
.latest-articles .article-item a:hover { background-color: rgba(0,13,26,0.8); }
.latest-articles .article-item .article-image { height: 90px; padding: 0 15px 0 0; float: left; }
.latest-articles .article-item .article-image img { height: 100%; }
.latest-articles .article-item .article-title { font-size: 16px; }
.latest-articles .article-item .article-meta { margin: 20px 0 0; color: #69c; color: rgba(255,255,255,0.5); }
.latest-articles .article-item .article-meta .article-date,
.latest-articles .article-item .article-meta .article-comment { display: inline-block; }
.latest-articles .article-item .article-meta .article-date { padding: 0 10px 0 0; }
.latest-articles .article-item .article-meta .article-comment { height: 16px; line-height: 12px; color: #fff; opacity: .5; background: url(http://img3.cache.netease.com/game/blizzard/images/article-comment-icon.gif) no-repeat 0 0; padding: 0 0 0 20px; }
.latest-articles .article-item .article-content { padding: 17px 0; }
.latest-articles .article-item .game-icon { width:30px; height:30px; position: absolute; right: 10px; bottom: 10px; opacity: .5; }
.latest-articles .article-item .game-icon .icons { width:100%; height:100%; background-size:30px; fill:#0af; }
.latest-articles .article-item .game-icon .icon-sc2 { background-image:url(http://img1.cache.netease.com/game/blizzard/icons/starcraft-ii.svg); }
.latest-articles .article-item .game-icon .icon-ow { background-image:url(http://img1.cache.netease.com/game/blizzard/icons/overwatch.svg); }
.latest-articles .article-item .game-icon .icon-hs { background-image:url(http://img1.cache.netease.com/game/blizzard/icons/hearthstone.svg); }
.latest-articles .article-item .game-icon .icon-heroes { background-image:url(http://img1.cache.netease.com/game/blizzard/icons/heroes-of-the-storm.svg); }

.latest-articles .article-item.large { background:#000;}
.latest-articles .article-item.large a { height:100%; }
.latest-articles .article-item.large a:hover { background:#0af;}
.latest-articles .article-item.large .article-image { height:100%; float:none; padding:0; }
.latest-articles .article-item.large .article-image img { width:100%;}
.latest-articles .article-item.large .article-title { padding:0 20px; text-align:center; }
.latest-articles .article-item.large .article-meta { display:none;}

.latest-articles-more { margin: 30px 0 0; }
.latest-articles-more a { display: block; text-align: center; line-height: 45px; border:2px solid #0af; font-size: 16px; color: #0af; }
.latest-articles-more a:hover { background: #0af; color:#fff; }

/* Lightbox */
.lightbox { width: 100%; height: 100%; z-index: 999; position: absolute; }
.lightbox .loading { width: 48px; height: 48px; background: url(http://img3.cache.netease.com/game/blizzard/static/images/uber-loading.gif) no-repeat center; display: block; position: absolute; top: 50%; left: 50%; z-index: 1002; margin: -24px 0 0 -24px;  }
.lightbox .backdrop { background: #000; opacity: 0.8; position: absolute; top: 0; left: 0; z-index: 1000; }
.lightbox .viewbox {  width: 48px; height: 48px; position: absolute; left: 50%; top: 50%; z-index: 1001; margin: -24px 0 0 -24px;  }
.lightbox .viewbox img { width: 0; height: 0; }
.lightbox .viewbox .lightbox-border,
.lightbox .viewbox .corner { position: absolute; z-index: 1009; }
.lightbox .viewbox a.viewbox-close { width: 30px; height: 30px; display: block; position: absolute; right: -40px; top: 0; z-index: 1012; background: url(../images/close-icons.gif) no-repeat 0 0 #06131C; cursor: pointer; }
.lightbox .viewbox a.viewbox-close:hover { background-position:0 -130px; }

/* Media List */
.media-item { float: left; padding: 0 10px 20px; }
.media-item a { width: 279px; border-radius: 4px; overflow: hidden; display: block; position: relative; border: 3px solid rgba(255,255,255,0.3); z-index: 0; -webkit-transition: all 0.05s ease-out; transition: all 0.05s ease-out; }
.media-item a:hover { border-color: #fff; -webkit-transform: scale(1.02); -ms-transform: scale(1.05); transform: scale(1.05); }
.media-item .video-image { overflow: hidden; text-align: center; }
.media-item .video-image img { height: 180px; margin: 0 -100%; }
.media-item .video-meta { background: #000; background:rgba(0,0,0,0.5); padding: 10px 0; color: #d0d0dc; line-height: 30px; }
.media-item .video-meta .item-title { font-size: 16px; padding: 0 20px; }
.media-item .video-meta .item-date,
.media-item .video-meta .item-author { font-size: 12px; color: rgba(208,208,220,0.5); float: left; }
.media-item .video-meta .item-date { padding: 0 0 0 20px; }
.media-item .video-meta .item-author { padding: 0 0 0 10px; }