﻿
/* Slideshow */
.slideshow { width:584px; height:289px; border-radius:4px; border:3px solid; border-color:rgba(0,102,204,0.6); position:relative; z-index:0; overflow:hidden;}
.slideshow:hover { border-color:rgba(255,255,255,0.5);}
.slideshow .slideshow-images { width:584px; height:289px; position:absolute; left:0; top:0; overflow:hidden; }
.slideshow .slideshow-images li { position:absolute; }
.slideshow .slideshow-images li a { width:584px; height:289px; display:block; position:relative; }
.slideshow .slideshow-images img { width:100%; height:100%; }
.slideshow .slideshow-title { width: 584px; height: 50px; display: block; background: #036; background: rgba(0,51,102,0.9); position: absolute; left: 0; bottom: 0; z-index: 2; }
.slideshow .slideshow-title h3 { font-size: 16px; color: #fff; margin: 15px 0 0; padding: 0 0 0 20px; }
.slideshow .slideshow-meta { display: block; margin: 10px 0 0; color: #0088cc; font-size: 12px; padding: 0 0 0 20px; }
.slideshow .slideshow-meta .slideshow-comment { background: url(http://img1.cache.netease.com/game/blizzard/blizzcon/2015/images/comment-icon.gif) no-repeat 0 2px; padding: 0 0 0 17px; }
.slideshow .slideshow-meta .slideshow-date { padding: 0 0 0 10px; }
.slideshow .slideshow-tabs { height:46px; padding:0 10px 0 0; position: absolute; right: 0; bottom: 0; z-index: 2; background:#640; border:2px solid #f49501; border-left:none; }
.slideshow .slideshow-tabs:before { content:''; width:30px; height:50px; position:absolute; left:-30px; top:-2px; background:url(../images/slideshow-tabs-bevel.png) no-repeat 0 0;}
.slideshow .slideshow-tabs li { width:28px; height:16px; float:left; margin-top:15px; overflow:hidden; position:relative; }
.slideshow .slideshow-tabs li a { width: 100%; height: 100%; transform:rotateZ(-120deg); display: block; overflow:hidden; }
.slideshow .slideshow-tabs li a:before { content:''; width:100%; height:100%; transform:rotateZ(60deg); background:rgba(244,149,1,0.3); position:absolute; left:0; top:0;}
.slideshow .slideshow-tabs li a:hover:before { background:rgba(244,149,1,0.7); }
.slideshow .slideshow-tabs li.active { display:table-cell !important;}
.slideshow .slideshow-tabs li.active a:before { background:#f49501; margin:0; }
.slideshow a.prev,
.slideshow a.next { width:40px; height:60px; margin-top:-25px; position:absolute; top:40%; display:none; background:url(http://img2.cache.netease.com/game/blizzard/images/arrow-icons.png) no-repeat -84px 5px; background-color:rgba(0,0,0,0.3); }
.slideshow a.prev { left:13px; background-position: 10px 15px;}
.slideshow a.next { right:13px; background-position:-100px 15px;}
.slideshow a.prev:hover,
.slideshow a.next:hover { background-color:#f49501; }

/* Tips */
.tips { width:586px; border:2px solid rgba(160,205,237,0.2); margin-top:20px; }
.tips span { width:100%; height:100%; display:inline-block; color:#6acded; font-size:16px; line-height:60px; background:rgba(0,0,0,0.4); text-align:center;}

/* Sidebar Common */
.sidebar-title { margin-top:20px; position:relative; }
.sidebar-title h2 { font-size:24px; color:#fff; border-bottom:2px solid rgba(255,255,255,0.1); padding-bottom:20px;}
.sidebar-title .sidebar-nav { position:absolute; right:0; bottom:0; display:table; }
.sidebar-title .sidebar-nav li { display:table-cell; padding-left: 20px;}
.sidebar-title .sidebar-nav li a { display:inline-block; font-size:16px; line-height:45px; color:rgba(255,255,255,0.5); border-bottom:5px solid transparent;}
.sidebar-title .sidebar-nav li a:hover { color:#fff;}
.sidebar-title .sidebar-nav li.on a { color:#fff; border-bottom:5px solid #fff;}
.sidebar-title a.more { display:block; position:absolute; right:0; bottom:20px; font-size:16px; color:rgba(255,255,255,0.5);}
.sidebar-title a.more:hover { color:#fff;}

.content-right .sidebar-container { background:rgba(0,37,85,0.9);}

/* Esport Event */
.esport-table { width:100%; color:#bad7f9; margin-top:20px;}
.esport-table tr { background-color:#002555;}
.esport-table tr.even { background-color:rgba(0,37,85,0.8);}
.esport-table thead { font-size:18px; color:#fff; }
.esport-table thead td { height:70px; padding:0 20px;}
.esport-table tbody td { width:25%; padding:20px;}
.esport-table tbody td img,
.esport-table tbody td span { vertical-align:middle; padding:0 5px 0 0;}
.esport-table tbody td a { display:inline-block; margin:0 20px 0 0; color:#0af;}
.esport-table tbody td a:hover { color:#fff;}
.esport-table tbody td img { max-height:50px;}

/* Sidebar News */
.sidebar-news { border:1px solid rgba(255,255,255,0.1); margin-top:20px; } 
.sidebar-news .sidebar-title { margin-top:10px;}
.sidebar-news .sidebar-title .game-icon { width:30px; height:30px; fill:#0af; position:absolute; left:0; bottom:18px; }
.sidebar-news .sidebar-title .game-icon .icons {width:100%; height:100%; }
.sidebar-news .sidebar-title h2 { font-size:18px; padding-left:35px;}
.sidebar-news .sidebar-news-list { margin-top:20px; }
.sidebar-news .sidebar-news-list li { }
.sidebar-news .sidebar-news-list li a { margin:5px 0; padding:15px 20px; border:1px solid rgba(255,255,255,0.1); display:block; color:#0af; }
.sidebar-news .sidebar-news-list li a:hover { border-color:rgba(255,255,255,0.5); color:#fff; }
.sidebar-news .sidebar-news-list li .article-date { float:right; color:rgba(255,255,255,0.5); }

/* Slidebar Special */
.sidebar-special { }
.sidebar-special .special-item { height:145px; position:relative; overflow:hidden; }
.sidebar-special .special-item:first-child { margin-bottom:5px;}
.sidebar-special .special-item a { height:141px; display:block; border:2px solid rgba(0,102,204,0.8); }
.sidebar-special .special-item a:hover { border-color:rgba(255,255,255,0.5);}
.sidebar-special .special-item img { width:100%; height:100%; }
.sidebar-special .special-item .special-meta { width:350px; height:141px; text-align:right; position:absolute; right:2px; top:2px; z-index:2; background:linear-gradient(to right, transparent, #000); }
.sidebar-special .special-item .special-meta h2 { width:40px; height:40px; font-size:16px; position:absolute; right:0; top:0; color:#fff; background:#0af; text-align:left; line-height:40px; }
.sidebar-special .special-item .special-meta h2:before { content:''; width:0; height:0; position:absolute; left:-40px; top:0; border:20px solid; border-color:#0af #0af transparent transparent; }
.sidebar-special .special-item .special-title { position:absolute; right:20px; bottom:20px; font-size:14px; }
.sidebar-special .special-item .special-title h3 { color:#fff; font-size:16px; }
.sidebar-special .special-item .special-title .game-name { color:#6acded; margin-bottom:10px; display:inline-block; }

/* Sidebar Esport Special */
.sidebar-esport-special { border:2px solid rgba(255,255,255,0.2); margin-top:20px;}

/* Slidebar Rank */
.sidebar-rank { border:1px solid rgba(255,255,255,0.1); margin-top:20px;}

.rank-table { width:100%; margin-top:20px; display:none;}
.rank-table tr { height:50px; font-size:16px;}
.rank-table thead { color:#6acded;}
.rank-table thead th { text-align:left;}
.rank-table tbody { color:#fff;}
.rank-table tbody tr { border-top:1px solid rgba(255,255,255,0.1); }
.rank-table tbody tr:hover { background:rgba(255,255,255,0.1);}

.rank-table img { max-height:30px;}
.rank-table img+* { margin-left:20px;}
.rank-table .col-rank { width:50px; padding-left:10px;}
.rank-table .col-player-img { width:100px;}
.rank-table .col-points { width:60px; text-align:right; padding-right:10px;}

/* Sidebar Player */
.sidebar-player { border:1px solid rgba(255,255,255,0.1); margin-top:20px; }

.player-avatar { }
.player-avatar li { width:156px; display:inline-block; margin:40px 0 0 35px; }
.player-avatar li:nth-child(3n+1) { margin-left:0;}
.player-avatar li a { display:block; border-radius:50%;  box-sizing:border-box; border:2px solid rgba(255,255,255,0.1); overflow:hidden;}
.player-avatar li a:hover { border-color:#fff;}
.player-avatar li a img { width:100%; background:#000;}
.player-avatar li span { line-height:2; display:block; text-align:center; color:#fff;}
