html,body,div,span,p,ul,ol,li,img{
	padding: 0;
	margin: 0;
}
body {
    background-color: rgb(33, 33, 33);
    margin: 0;
    font: 12px/1.5 Arial, 'Droid Sans', 'Hiragino Sans GB', 'Microsoft YaHei';
    /*text-shadow: rgb(17, 17, 17) 1px 1px 0px;*/
    
    line-height: 20px;
    color: #ddd;
}

a {
    color: #aaa;
    text-decoration: none;
    -webkit-transition: color 0.3s ease;
    -moz-transition: color 0.3s ease;
    -ms-transition: color 0.3s ease;
    -o-transition: color 0.3s ease;
    transition: color 0.3s ease;
}

a:hover,
a:focus {
    color: rgb(255, 255, 255);
}

li {
    list-style: none;
}

.maxtopbar {
    margin: 0 auto;
    height: 46px;
    background: #333;
    background: rgba(15, 15, 15, 0.35);
    font-size: 18px;
    width: 100%;
    min-width: 1100px;
}

.globalnav {
    width: 1100px;
    margin: 0 auto;
}

.maxtopmainbar {
    width: 100%;
    min-width: 1100px;
    height: 150px;
    margin-right: auto;
    margin-left: auto;
    position: relative;
}

.nav-head {width: 100%;margin: 0px auto;font-size: 14px;}
.nav-head > .nav-container{width: 1100px;margin: auto;height: 46px;}
.nav-head > .nav-container > a{display: block;float: left;margin-right: 7px;}
.nav-head li {
    border: 1px transparent solid;
    float: left;
    padding: 0 12px;
    line-height: 46px;
    color: #ccc;
}

.nav-head a > li:hover,
.nav-head a > li:focus {
    background: #333;
    background: -moz-linear-gradient(top, #333 0%, #444 41%);
    background: -webkit-linear-gradient(top, #333 0%, #444 41%);
    background: -o-linear-gradient(top, #333 0%, #444 41%);
    background: -ms-linear-gradient(top, #333 0%, #444 41%);
    background: linear-gradient(top, #333 0%, #444 41%);
    color: #fff !important;
}

.nav-head > .nav-container > a.nav-logo{
	width:140px;padding: 10px;padding-bottom: 0;
}
.nav-head > .nav-container > a.nav-logo > img{
	display: block;width: 100%;
}
.nav-head .nav-item-box{float: left;position: relative;margin-right: 7px;cursor: pointer;}
.nav-head .nav-item-box li{padding: 0 20px;}
.nav-head .nav-item-list{
	display: none;
	position: absolute;
	top: 46px;
	left: 0;
	z-index: 1;
	width: 100%;
	background: #1b1b1b;
}
.nav-head .nav-item-list li{line-height: 46px;}

.h-active {
    background: #333;
    background: -moz-linear-gradient(top, #333 0%, #444 41%);
    background: -webkit-linear-gradient(top, #333 0%, #444 41%);
    background: -o-linear-gradient(top, #333 0%, #444 41%);
    background: -ms-linear-gradient(top, #333 0%, #444 41%);
    background: linear-gradient(top, #333 0%, #444 41%);
    color: #fff !important;
}

.main-shadow-box {
    width: 100%;
    min-height: 420px;
    font-size: 12px;
}

.container {
    width: 1100px;
    display: table;
    margin: 0 auto;
    color: #ccc;
}

.new-box {}

.new-box-title {
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    font-weight: 700;
    padding-left: 10px;
    margin-bottom: 2px;
    border: 1px rgb(40, 40, 40) solid;
    background-color: rgb(20, 20, 20);
    box-shadow: 0 0 1px 1px rgb(10, 10, 10);
    color: #FFF;
}

.home-box {}

.home-box-title {
    border-bottom: 1px solid #b81714;
    color: #ddd;
    font-size: 14px;
    line-height: 30px;
    padding: 0 10px;
    background: #333;
    background: -moz-linear-gradient(top, #333 0, #222 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #333), color-stop(100%, #222));
    background: -webkit-linear-gradient(top, #333 0, #222 100%);
    background: -o-linear-gradient(top, #333 0, #222 100%);
    background: -ms-linear-gradient(top, #333 0, #222 100%);
    background: linear-gradient(to bottom, #333 0, #222 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0);
    border-bottom: 1px #171717 solid;
    color: #e0e0e0;
    text-shadow: -1px -1px 0 #000
}

#search-box {
    position: absolute;
    top: 55px;
    width: 100%;
}

.title-hori:before {
    margin-right: 5px;
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0);
    content: "\f0c9";
    font-size: 14px;
}

.tit-box:before {
    content: "\f00a" !important;
}

.tit-link:before {
    content: "\f0c1" !important;
}

.title-hori {
    display: table;
    width: 100%;
    color: rgb(235, 231, 232);
    background-color: rgb(20, 20, 20);
    height: 32px;
    line-height: 32px;
    font-size: 14px;
    font-weight: 400;
    padding-left: 10px;
    margin-bottom: 15px;
    margin-top: 25px;
    background: -moz-linear-gradient(left, rgba(20, 20, 20, 1) 0%, rgba(10, 10, 10, 0) 70%);
    background: -webkit-gradient(linear, left, right, color-stop(0%, rgba(20, 20, 20, 1)), color-stop(70%, rgba(10, 10, 10, 0)));
    background: -webkit-linear-gradient(left, rgba(20, 20, 20, 1) 0%, rgba(10, 10, 10, 0) 70%);
    background: -o-linear-gradient(left, rgba(20, 20, 20, 1) 0%, rgba(10, 10, 10, 0) 70%);
    background: -ms-linear-gradient(left, rgba(20, 20, 20, 1) 0%, rgba(10, 10, 10, 0) 70%);
    background: linear-gradient(left, rgba(20, 20, 20, 1) 0%, rgba(10, 10, 10, 0) 90%) 70%);
}

.circle-live {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(233, 233, 233, .94);
}

.circle-img {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(191, 191, 191, .24);
}

.circle-hero {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid rgba(191, 191, 191, .34);
}

.large-search {
    margin: 0;
    padding: 0;
    width: 420px;
    margin-left: auto;
    margin-right: auto;
}

.large-search-text {
    border: 2px solid rgba(255, 255, 255, .6);
    color: rgba(255, 255, 255, .7);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    border-radius: 28px;
    padding-right: 10px;
    padding-left: 18px;
    font-size: 13px;
    background: 0 0;
    font-weight: 400;
    width: 295px;
    height: 32px;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.large-search-text:hover,
.large-search-text:active,
.large-search-text:focus {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 2px solid rgba(255, 255, 255, .8);
}

.large-search-btn {
    height: 38px;
    background-color: transparent;
    font-size: 14px;
    color: #ccc;
    border: 0px;
    width: 35px;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    position: absolute;
    right: 30px;
}

.large-search-btn:hover,
.large-search-btn:active,
.large-search-btn:focus {
    color: #fff;
}

.main-container {
    width: 100%;
    margin: 0px auto 20px auto;
    margin-top: 0px;
    margin-bottom: 1px;
    padding-bottom: 1px;
}

.secoundbar-outer {
    width: 100%;
    min-width: 1100px;
    background: -moz-linear-gradient(top, rgb(15, 15, 15) 0%, rgb(10, 10, 10) 50%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgb(15, 15, 15)), color-stop(50%, rgb(10, 10, 10)));
    background: -webkit-linear-gradient(top, rgb(15, 15, 15) 0%, rgb(10, 10, 10) 50%);
    background: -o-linear-gradient(top, rgb(15, 15, 15) 0%, rgb(10, 10, 10) 50%);
    background: -ms-linear-gradient(top, rgb(15, 15, 15) 0%, rgb(10, 10, 10) 50%);
    background: linear-gradient(top, rgb(15, 15, 15) 0%, rgb(10, 10, 10) 50%);
    background-color: rgb(10, 10, 10);
}

.secoundbar {
    font-size: 12px;
    width: 1100px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0px !important;
    margin-top: 10px !important;
    height: 40px;
    color: #999;
    text-align: left;
    position: relative;
    margin: 0 auto;
    display: table;
}

.secoundbar li:hover,
.secoundbar li:focus {}

.secoundbar a:hover,
.secoundbar a:focus {
    color: #FFF !important;
}

.secoundbar li {
    min-width: 60px;
    text-align: center;
    float: left;
    padding-left: 15px;
    padding-right: 15px;
    height: 40px;
    line-height: 40px;
    z-index: 1000;
    background-color: rgb(10, 10, 10);
}

.secoundbar li:hover {
    background-color: rgb(26, 26, 26);
}

.active-s {
    color: #fff;
    min-width: 60px;
    text-align: center;
    float: left;
    padding-left: 5px;
    padding-right: 5px;
    height: 40px;
    line-height: 40px;
    background-color: rgb(33, 33, 33);
    background: -moz-linear-gradient(top, rgb(50, 50, 50) 0%, rgb(33, 33, 33) 41%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgb(50, 50, 50)), color-stop(41%, rgb(33, 33, 33)));
    background: -webkit-linear-gradient(top, rgb(50, 50, 50) 0%, rgb(33, 33, 33) 41%);
    background: -o-linear-gradient(top, rgb(50, 50, 50) 0%, rgb(33, 33, 33) 41%);
    background: -ms-linear-gradient(top, rgb(50, 50, 50) 0%, rgb(33, 33, 33) 41%);
    background: linear-gradient(top, rgb(50, 50, 50) 0%, rgb(33, 33, 33) 41%);
}

.table-list-small {
    border-collapse: collapse;
    border-spacing: 1px;
    color: #c0c0c0;
    font-size: 12px;
}

.table-list-small thead {
    background: linear-gradient(to bottom, rgba(5, 5, 5, 1) 0, #1c1c1c 100%);
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    cursor: pointer;
    line-height: 28px;
    font-size: 11px;
    color: #fff !important;
}

.table-list-small thead td {
    text-align: center;
}

.table-list-small tbody > tr > td {
    padding-left: 5px;
    padding-right: 5px;
    height: 40px;
    border: 0px;
    line-height: 16px;
    background-color: #1c1c1c;
    border-bottom: 1px solid rgb(15, 15, 15);
}

.table-list-small tbody tr:hover > td {
    background-color: #11212f;
}


.table-list {
    box-shadow: 0 0 1px 1px rgb(10, 10, 10);
    border-collapse: collapse;
    border-spacing: 1px;
    color: #c0c0c0;
    font-size: 12px;
}

.table-list thead {
    background: rgb(12, 12, 12);
    cursor: pointer;
    line-height: 28px;
    font-size: 12px;
    color: #fff !important;
}

.table-list thead td {
    text-align: center;
}

.table-list tbody > tr > td {
    padding-left: 5px;
    padding-right: 10px;
    height: 40px;
    border: 0px;
    line-height: 16px;
    background-color: rgb(18, 18, 18);
}

.table-list tbody > tr:nth-child(odd) > td {
    background-color: rgba(24, 24, 24, 0.8);
}

.table-list tbody tr:hover > td,
.table-hover tbody tr:hover > th {
    background-color: #11212f;
}

.table-text tr td {
    vertical-align: middle !important;
    text-align: center;
}

.table-text th {
    vertical-align: middle !important;
}

.table-text tr {
    font-size: 14px;
    vertical-align: middle;
    height: 40px !important;
    line-height: 20px !important;
}

.hero-title {
    font-size: 28px;
    color: #fff;
    font-weight: 500;
}

.overlay-grey {
    background-image: -webkit-linear-gradient(left, color-stop(rgba(255, 255, 255, 0) 0%), color-stop(#fff 100%));
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #fff 100%);
    background-repeat: repeat-x;
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#00FFFFFF', endColorstr='#FFFFFFFF', GradientType=1);
    position: absolute;
    top: 0;
    left: 0;
}

.hero-right-bar {
    width: 360px;
    margin-bottom: 0px;
    float: right;
    margin-right: 0px;
    background-color: rgb(10, 10, 10);
    background: -moz-linear-gradient(top, rgb(10, 10, 10) 0%, rgb(33, 33, 33) 70%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgb(10, 10, 10)), color-stop(70%, rgb(33, 33, 33)));
    background: -webkit-linear-gradient(top, rgb(10, 10, 10) 0%, rgb(33, 33, 33) 70%);
    background: -o-linear-gradient(top, rgb(10, 10, 10) 0%, rgb(33, 33, 33) 70%);
    background: -ms-linear-gradient(top, rgb(10, 10, 10) 0%, rgb(33, 33, 33) 70%);
    background: linear-gradient(top, rgb(10, 10, 10) 0%, rgb(33, 33, 33) 70%);
}

.none-opacity-img {
    cursor: pointer;
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    opacity: 1;
    background-color: #000000;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.none-opacity-img:focus,
.none-opacity-img:hover {
    cursor: pointer;
    filter: alpha(opacity=50);
    -moz-opacity: .5;
    opacity: .5;
    background-color: #000000;
}

.opacity-img {
    cursor: pointer;
    filter: alpha(opacity=70);
    -moz-opacity: .7;
    opacity: .7;
    background-color: #000000;
}

.overflow-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.opacity-img:focus,
.opacity-img:hover {
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    opacity: 1;
    background-color: #000000;
}

.live-box {
    box-shadow: 1px 1px 1px #000;
    width: 322px;
    float: left;
    position: relative;
    margin-left: 20px;
    margin-bottom: 20px;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

.m-live-box {
    width: 165px;
    height: 110px;
    border: 1px #111 solid;
    float: left;
    background-color: #151515;
    position: relative;
    margin-left: 12px;
    margin-bottom: 20px;
}

.live-box:hover {
    box-shadow: 1px 1px 5px #000;
}

.play-shadow {}

.play-shadow:hover,
.play-shadow:focus {}

.hero-hover {
    width: 95px;
    border-radius: 3px;
}

.more-circle:before {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0);
    content: "\f0fe";
    margin-right: 4px;
    font-size: 16px;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

.more-circle:after {}

.more-circle {
    font-size: 14px;
    font-weight: 500;
    padding: 4px 4px;
    color: #666;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.more-circle:hover,
.more-circle:focus {
    color: #ccc;
}

.more-circle:focus:before,
.more-circle:hover:before {
    color: #ccc;
    filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=1);
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

.follow-circle {
    color: #777;
    border: 1px solid #666;
    font-size: 12px;
    font-weight: 500;
    padding: 6px 10px;
    border-radius: 2px;
    text-shadow: rgb(17, 17, 17) 0px 0px 0px;
    -webkit-transition: color 0.3s ease;
    -moz-transition: color 0.3s ease;
    -ms-transition: color 0.3s ease;
    -o-transition: color 0.3s ease;
    transition: color 0.3s ease;
}

.follow-circle:hover,
.follow-circle:focus {
    color: #ccc;
    border: 1px solid #ccc;
}

.c-follow-circle {
    color: #777;
    background-color: rgb(70, 70, 70);
    background-color: rgba(255, 255, 255, 0.1);
    font-size: 12px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 2px;
    text-shadow: rgb(17, 17, 17) 0px 0px 0px;
    -webkit-transition: color 0.3s ease;
    -moz-transition: color 0.3s ease;
    -ms-transition: color 0.3s ease;
    -o-transition: color 0.3s ease;
    transition: color 0.3s ease;
}

.c-follow-circle:hover,
.c-follow-circle:focus {
    background-color: rgba(255, 255, 255, 0.2);
}

.radiant-grad {
    background-image: -webkit-radial-gradient(center right, 90% 90%, rgba(146, 164, 50, 0.7) 0%, rgba(146, 164, 50, 0) 100%);
    background-image: -moz-radial-gradient(90% 90% at center right, rgba(146, 164, 50, 0.7) 0%, rgba(146, 164, 50, 0) 100%);
    background-image: -o-radial-gradient(center right, 90% 90%, rgba(146, 164, 50, 0.7) 0%, rgba(146, 164, 50, 0) 100%);
    background-image: radial-gradient(90% 90% at center right, rgba(146, 164, 50, 0.7) 0%, rgba(146, 164, 50, 0) 100%);
}

.dire-grad {
    background-image: -webkit-radial-gradient(center left, 90% 90%, rgba(154, 55, 43, 0.7) 0%, rgba(154, 55, 43, 0) 100%);
    background-image: -moz-radial-gradient(90% 90% at center left, rgba(154, 55, 43, 0.7) 0%, rgba(154, 55, 43, 0) 100%);
    background-image: -o-radial-gradient(center left, 90% 90%, rgba(154, 55, 43, 0.7) 0%, rgba(154, 55, 43, 0) 100%);
    background-image: radial-gradient(90% 90% at center left, rgba(154, 55, 43, 0.7) 0%, rgba(154, 55, 43, 0) 100%);
}

.img-shadow {
    box-shadow: 0 1px 2px #000;
}

.match-avatars-img {
    height: 45px;
    width: 45px;
    vertical-align: middle;
    margin-right: 3px;
    box-shadow: 0 1px 2px #000;
    border-radius: 50%;
    border: 1px solid #777;
}

.video-user {
    float: left;
    line-height: 20px;
    margin: 3px;
    padding: 3px 8px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.video-user:hover,
.video-user:focus {
    padding: 3px 8px;
    background-color: rgb(15, 15, 15);
}

.trans-all {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.follow-match {
    width: 660px;
    display: table;
    background-color: rgb(25, 25, 25);
    padding: 10px 0px 5px 10px;
    cursor: pointer;
}

.follow-match:hover,
.follow-match:focus {
    background-color: rgb(10, 10, 10);
}

.follow-type {
    margin: 15px;
    display: table;
    width: 300px;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
}
/*!
 * by Ning@dotamax.com
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * first used in Dotamax project. Recommend to work with jquery together
*/

.Modify::before {
    content: "鍒犻櫎";
    color: #fff;
    position: absolute;
    top: 0px;
    left: 26px;
}

#tournament_info {
    width: 250px !important;
    border-radius: 3px !important;
    margin: 2px !important;
    padding: 4px !important;
}

.team-slot {
    width: 176px;
    height: 146px;
    margin-bottom: 8px;
    float: left;
    background-image: url(http://www.dota2.com.cn/international/announcement/images/team_slot.png);
}

.ti-title {
    font-size: 22px;
    font-weight: 700;
    line-height: 34px;
    color: #af9481;
    letter-spacing: 4.2px;
    text-transform: uppercase;
    text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.8);
}

.live-list-box {
    cursor: pointer;
    display: table;
    border: 1px solid rgb(30, 30, 30);
    background-color: rgb(14, 14, 14);
    width: 100%;
    margin-bottom: 10px;
}

.live-list-box:hover,
.live-list-box:focus {
    background-color: #11212f;
    border: 1px solid rgb(40, 40, 40);
}

.grey {
    filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
    filter: grayscale(90%);
    -moz-filter: grayscale(90%);
    -ms-filter: grayscale(90%);
    -o-filter: grayscale(90%);
    filter: gray;
    -webkit-filter: grayscale(90%)
}

.table-title-font {
    font-weight: 700;
    font-size: 12px;
    color: #FFF;
}

.news-hide {
    display: none;
}

.steam-friend {
    float: left;
    width: 220px;
    background-color: #333;
    color: #fff;
    margin: 4px;
    padding: 0px;
    border-radius: 4px;
    cursor: pointer;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.steam-friend:hover {
    background-color: #111;
}

.hero-top-list-bar {
    display: block;
    position: absolute;
    top: 0px;
    text-align: left;
    width: 95px;
    height: 20px;
    font-size: 10px;
}

.hero-list-bar {
    display: block;
    position: absolute;
    bottom: 17px;
    text-align: center;
    width: 95px;
    height: 20px;
    background-color: rgba(0, 0, 0, 0.7);
    font-size: 10px;
    color: #fff !important;
}

.hero-list-hero {
    cursor: pointer;
    width: 95px;
    height: 90px;
    position: relative;
    display: inline-block;
    margin-left: 5px;
}

.hero-img-unfocus {
    filter: alpha(opacity=80);
    -moz-opacity: .8;
    opacity: .8;
    background-color: #000000;
}

.ads-unfocus {
    filter: alpha(opacity=80);
    -moz-opacity: .8;
    opacity: .8;
    background-color: #000000;
}

.ads-unfocus:hover {
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    opacity: 1;
    border: 1px rgba(161, 0, 250, 0.7) solid;
    -moz-box-shadow: 0 0 10px rgba(161, 0, 250, 0.5);
    /*firefox*/
    
    -webkit-box-shadow: 0 0 10px rgba(161, 0, 250, 0.5);
    /*safari鎴朿hrome*/
    
    box-shadow: 0 0 10px rgba(161, 0, 250, 0.5);
    /*opera鎴杋e9*/
}

.hero-img-unfocus:hover {
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    opacity: 1;
    border: 1px rgba(0, 161, 250, 0.7) solid;
    -moz-box-shadow: 0 0 10px rgba(0, 161, 250, 0.5);
    /*firefox*/
    
    -webkit-box-shadow: 0 0 10px rgba(0, 161, 250, 0.5);
    /*safari鎴朿hrome*/
    
    box-shadow: 0 0 10px rgba(0, 161, 250, 0.5);
    /*opera鎴杋e9*/
}

.login-reply {
    color: #d74c3c;
}

.login-button-signin {
    background: #4cb162;
}

.login-button-signup {
    background: #d74c3c;
}

#player_card_player_image {
    display: none;
}

#player_card_info {
    display: none;
}

.login-button {
    text-align: center;
    vertical-align: middle;
    line-height: 38px;
    border-radius: 4px;
    width: 400px;
    border: none;
    color: white;
    font-size: 14px;
    font-weight: 200;
    cursor: pointer;
    margin-top: 5px;
    height: 40px;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.login-button-signin:focus,
.login-button-signin:hover {
    background: #4cc162 !important;
}

.login-button-signup:focus,
.login-button-signup:hover {
    background: #f74c3c !important;
}

.login-title {
    color: #272c32;
    display: block;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    margin-bottom: 25px;
}

.login-box {
    width: 400px;
    padding: 20px;
    margin: auto;
    background: #fff;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    margin-bottom: 100px;
    margin-top: 60px;
    color: #272c32;
}

.login-box li {
    padding-left: 20px;
}

.login-box a:hover,
.login-box a:focus {
    color: #272c32;
}

.login-input {
    border: 1px solid #dadada;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    padding: 10px;
    color: #272c32;
    margin-bottom: 5px;
    display: block;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.login-input:focus {
    border: 1px solid #4cb182;
    outline: 0;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.iconTooltip_tit .rare,
.items_tit_box .rare {
    color: #1a87f9
}

.iconTooltip_tit .artifact,
.items_tit_box .artifact {
    color: #e29b01
}

.iconTooltip_tit .secret_shop,
.items_tit_box .secret_shop {
    color: #ffffff
}

.iconTooltip_tit .consumable,
.items_tit_box .consumable {
    color: #1d80e7
}

.iconTooltip_tit .common,
.items_tit_box .common {
    color: #2bab01
}

.iconTooltip_tit .epic,
.items_tit_box .epic {
    color: #b812f9
}

.iconTooltip_tit .component,
.items_tit_box .component {
    color: #ffffff
}

.attribVal {
    color: rgb(251, 184, 41);
    font-size: 12px;
    font-weight: 500;
    margin-right: 5px;
}

.flat-grey-box {
    width: 700px;
    float: left;
    margin-left: 10px;
    padding: 7px;
    margin-bottom: 5px;
    margin-top: 5px;
}

.tooltip {
    display: none;
    padding: 3px;
    padding-top: 4px;
    padding-left: 10px;
    padding-right: 10px;
    color: #333;
    font-size: 10px;
    text-shadow: rgb(217, 217, 217) 1px 1px 0px;
    background: #fff;
    line-height: 17px;
    text-align: center;
    max-width: 240px;
    border-radius: 2px;
}

.jd_date {
    text-align: center;
}

.jd_date b {
    color: rgb(182, 26, 29);
}

.count_reply {
    line-height: 12px;
    font-weight: bold;
    color: white;
    background-color: rgba(170, 170, 168, 0.8);
    display: inline-block;
    padding: 2px 6px 2px 6px;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    border-radius: 12px;
    text-decoration: none;
    margin-right: 5px;
}

.replybtn:focus,
.replybtn:hover {
    color: rgb(212, 26, 29);
}

.hero-list-filter {
    display: block;
    width: 635px;
    margin-top: 10px;
}

.hero-filter {
    width: 50px;
    margin-left: 4px;
    border: 1px solid transparent;
    cursor: pointer;
}

.hero-filter-active {
    border: 1px solid #ccc;
}

.hero-filter:hover,
.hero-filter:focus {
    border: 1px solid #ccc;
}

.f-prefab {
    color: #b0c3d9;
}

.user-panel {
    width: 1040px;
    height: 45px;
    line-height: 45px;
    ;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: right;
    font-size: 20px;
    vertical-align: middle;
    color: #666 !!important;
    padding-right: 10px;
    margin-top: 15px;
}

.ans-box {
    background-color: #f5f5f5;
    border: 1px solid #d9d9d9;
    border-radius: 3px;
    margin: 10px 10px 10px 70px;
}

.ans-box-reply {
    border-bottom: 1px #d9d9d9 solid;
}

.main-ans-box {
    float: left;
    background-color: rgb(224, 224, 224);
    border-radius: 6px;
    width: 810px;
    color: rgb(68, 68, 68);
}

.main-ans-box:hover {
    background-color: rgb(234, 234, 234);
}

.main-ans-box-title {
    height: 40px;
    line-height: 40px;
    font-size: 12px;
    font-weight: bold;
    color: rgb(147, 147, 147);
    padding-left: 20px;
    padding-right: 20px;
}

.main-ans-box a {
    color: #777;
}

.main-ans-box a:focus,
.main-ans-box a:hover {
    color: rgb(212, 26, 29);
}

.home-box-more {
    border-bottom: 1px solid #b81714;
    text-align: center;
    color: #ddd;
    font-size: 13px;
    line-height: 25px;
    padding: 0 10px;
    background-color: #321A17;
    border-bottom: 1px #151515 solid;
    color: #e0e0e0;
    text-shadow: -1px -1px 0 #000
}

.content-light {
    background: #e4e4e4;
    color: #333;
    text-shadow: rgb(217, 217, 217) 1px 1px 0px;
    padding: 10px
}

.content-light li {
    list-style-type: circle;
    margin-left: 20px;
    margin-top: 3px;
}

.content-dark {
    color: #aaa;
}

.content-dark li {
    list-style-type: circle;
    margin-left: 20px;
    margin-top: 3px;
}

.news-title {
    color: #fff;
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    display: block;
    width: 100%;
    border-bottom: 1px #333 solid;
    line-height: 20px;
    padding-bottom: 10px;
    position: relative;
}

.news-title-time {
    color: #777;
    position: absolute;
    font-size: 12px;
    top: 5px;
    right: 10px;
    font-weight: 400;
}

.notice-content {
    padding: 10px;
    margin: 0px;
}

.content-dark a {
    color: #fff;
}

.content-dark a:hover,
.content-dark a:focus {
    color: rgb(212, 26, 29);
}

.content-light a {
    color: rgb(182, 26, 29);
    font-weight: bold;
}

.content-light a:hover,
.content-light a:focus {
    color: #999;
}

.arrow-up {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid rgb(40, 40, 40);
    font-size: 0;
    line-height: 0;
    margin-top: -22px;
    position: absolute;
}

.arrow-left {
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-right: 10px solid rgb(224, 224, 224);
    border-bottom: 10px solid transparent;
    font-size: 0;
    line-height: 0;
    position: absolute;
}

.loading {
    width: 160px;
    height: 56px;
    top: 50%;
    left: 50%;
    line-height: 56px;
    color: #fff;
    padding-left: 50px;
    font-size: 15px;
    background: #111 url(/static/image/loading.gif) no-repeat 10px 50%;
    z-index: 9999;
    margin: 10px auto 10px auto;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

.table-sfield th,
.table-sfield td {
    padding: 6px;
    line-height: 14px;
    text-align: left;
    vertical-align: top;
    border: 1px rgb(17, 17, 17) solid;
    background-color: rgb(32, 32, 32);
}

.changelog li {
    line-height: 20px;
    margin-left: 10px;
    margin-top: 10px;
    color: #bbb;
}

.navibar {
    padding: 0px 0 0;
    width: 100%;
    display: inline-block;
}

.navibtn {
    cursor: pointer;
    border-top: 1px rgb(20, 20, 20) solid;
    border-left: 1px rgb(20, 20, 20) solid;
    border-right: 1px rgb(20, 20, 20) solid;
    min-width: 60px;
    text-align: center;
    float: left;
    color: #777;
    padding-left: 10px;
    padding-right: 10px;
    margin-left: 4px;
    height: 35px;
    line-height: 35px;
    z-index: 1000;
    background-color: rgba(20, 20, 20, 0.7);
}

.navibtn:hover,
.navibtn:focus {
    color: #fff;
    background-color: rgb(25, 25, 25);
    background: -moz-linear-gradient(top, rgb(50, 50, 50) 0%, rgb(25, 25, 25) 41%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgb(50, 50, 50)), color-stop(41%, rgb(25, 25, 25)));
    background: -webkit-linear-gradient(top, rgb(50, 50, 50) 0%, rgb(25, 25, 25) 41%);
    background: -o-linear-gradient(top, rgb(50, 50, 50) 0%, rgb(25, 25, 25) 41%);
    background: -ms-linear-gradient(top, rgb(50, 50, 50) 0%, rgb(25, 25, 25) 41%);
    background: linear-gradient(top, rgb(50, 50, 50) 0%, rgb(25, 25, 25) 41%);
}

.navibtn-active {
    border-top: 1px rgb(20, 20, 20) solid;
    border-left: 1px rgb(20, 20, 20) solid;
    border-right: 1px rgb(20, 20, 20) solid;
    padding-left: 10px;
    padding-right: 10px;
    margin-left: 2px;
    height: 35px;
    text-align: center;
    line-height: 35px;
    float: left;
    min-width: 60px;
    color: #fff;
    background-color: rgb(25, 25, 25);
    background: -moz-linear-gradient(top, rgb(50, 50, 50) 0%, rgb(25, 25, 25) 41%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgb(50, 50, 50)), color-stop(41%, rgb(25, 25, 25)));
    background: -webkit-linear-gradient(top, rgb(50, 50, 50) 0%, rgb(25, 25, 25) 41%);
    background: -o-linear-gradient(top, rgb(50, 50, 50) 0%, rgb(25, 25, 25) 41%);
    background: -ms-linear-gradient(top, rgb(50, 50, 50) 0%, rgb(25, 25, 25) 41%);
    background: linear-gradient(top, rgb(50, 50, 50) 0%, rgb(25, 25, 25) 41%);
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

.table-thead-left thead tr th {
    text-align: left;
    padding-left: 8px;
}

.nabtn {
    display: inline;
    float: left;
    margin-left: 0px;
    margin-right: 0px;
    padding: 0 4px;
    min-width: 17px;
    line-height: 27px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #d4d4d4;
    text-align: center;
    text-decoration: none;
    border: 1px solid black;
    border-right: 0px;
    border-left: 1px solid #777;
    border-radius: 0px;
}

.nabtn-right {
    border-right: 1px solid black;
}

.nabtn-title {
    float: left;
    line-height: 30px;
    width: 80px;
    text-align: right;
    margin-right: 10px;
}

.filter-container {
    margin: 0px;
    width: 100%;
    padding-bottom: 15px;
    padding-top: 15px;
    padding-left: 0px !important;
    display: inline-block;
    vertical-align: baseline;
    zoom: 1;
    *display: inline;
    *vertical-align: auto;
}

.func-title {
    font-size: 14px;
    font-weight: solid;
    color: #fff;
    margin: 10px 0 5px 25px;
}

.shadow-bottom {
    -webkit-box-shadow: 0 1px rgba(255, 255, 255, 0.06);
    -moz-box-shadow: 0 1px rgba(255, 255, 255, 0.06);
    box-shadow: 0 1px rgba(255, 255, 255, 0.06);
    border-bottom: rgb(0, 0, 0) 1px solid;
}

.shadow-right {
    -webkit-box-shadow: 1px 0 rgba(255, 255, 255, 0.06);
    -moz-box-shadow: 1px 0 rgba(255, 255, 255, 0.06);
    box-shadow: 1px 0 rgba(255, 255, 255, 0.06);
    border-right: rgb(0, 0, 0) 1px solid;
}

.shadow-bottom-right {
    -webkit-box-shadow: 1px 1px rgba(255, 255, 255, 0.06);
    -moz-box-shadow: 1px 1px rgba(255, 255, 255, 0.06);
    box-shadow: 1px 1px rgba(255, 255, 255, 0.06);
    border-bottom: rgb(0, 0, 0) 1px solid;
    border-right: rgb(0, 0, 0) 1px solid;
}

.black-white-shadow {
    border: 1px solid #383838;
    -webkit-box-shadow: #000 0px 0px 0px 1px;
    -moz-box-shadow: #000 0px 0px 0px 1px;
    box-shadow: #000 0px 0px 0px 1px;
}

.headbar {
    right: 0;
    left: 0;
    z-index: 1030;
    margin-bottom: 0;
}

.max-nav {
    width: 1040px;
    margin: 0 auto;
    height: 43px;
    background: #141516 url(/static/image/bg-noise-white.png);
    border-bottom: 3px #C21602 solid;
    -webkit-box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.3), 0 0 5px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.3), 0 0 5px rgba(0, 0, 0, 0.5);
    -ms-box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.3), 0 0 5px rgba(0, 0, 0, 0.5);
    -o-box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.3), 0 0 5px rgba(0, 0, 0, 0.5);
    box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.3), 0 0 5px rgba(0, 0, 0, 0.5);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ff222222', endColorstr='#ff111111', GradientType=0);
}

.brand-max {
    /*color:#fff;float:left;margin-left:15px;font-size: 30px;font-family: 'Helvetica Neue', HelveticaNeue, Helvetica, Arial, sans-serif;font-style: normal;font-variant: normal;font-weight: bold;line-height: 65px;*/
    
    display: block;
    float: left;
    padding-top: 11px;
    padding-bottom: 10px;
    margin-left: 20px;
    margin-right: 15px;
    font-size: 20px;
    font-weight: 400;
    color: rgb(153, 153, 153);
}

.max {
    color: #9c3627;
    font-size: 20px;
}

.white-container {
    display: inline;
    float: left;
    border-radius: 6px;
    margin: 20px;
    font-size: 14px;
    position: relative;
    background-color: #fff;
}

.trans-container {
    display: inline;
    float: left;
    border-radius: 6px;
    margin: 20px;
    font-size: 14px;
    position: relative;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background-color: rgba(0, 0, 0, 0.40);
}

.radius-top {
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
}

.info-box {
    background-color: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.46);
    text-align: center;
    border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: 6px;
    margin: 20px 0 0 85px;
    padding: 100px 20px;
}

.footbar {
    font-size: 11px;
    margin: 0px auto 0px auto;
    background-color: #000;
    color: rgba(255, 255, 255, 0.30);
}

.footbar a {
    font-size: 11px;
    margin-right: 10px !important;
    color: rgba(255, 255, 255, .30);
    margin: 0 2px 0 5px;
}

.footbar a:hover {
    color: rgba(255, 255, 255, .70);
}

*,
*:active,
*:focus {
    outline: 0;
    outline-style: none;
    outline-width: 0;
    -moz-outline-width: 0;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.nipple {
    -webkit-font-smoothing: antialiased;
    -webkit-user-select: none;
    border-bottom-color: #2c4762;
    border-bottom-style: solid;
    border-bottom-width: 12px;
    border-left-color: rgba(0, 0, 0, 0);
    border-left-style: solid;
    border-left-width: 12px;
    border-right-color: rgba(0, 0, 0, 0);
    border-right-style: solid;
    border-right-width: 12px;
    color: rgb(255, 255, 255);
    display: block;
    font-family: 'Helvetica Neue', HelveticaNeue, Helvetica, Arial, sans-serif;
    font-size: 0px;
    font-style: normal;
    font-variant: normal;
    font-weight: bold;
    height: 0px;
    left: 50%;
    line-height: 0px;
    margin-bottom: 0px;
    margin-left: -12px;
    margin-right: 0px;
    margin-top: 0px;
    outline-color: rgb(255, 255, 255);
    outline-style: none;
    outline-width: 0px;
    position: relative;
    top: 11px;
    vertical-align: top;
    width: 0px;
}

.right-panel {
    display: inline;
    float: right;
    width: 220px;
    height: 800px;
    border-radius: 6px;
    margin: 20px 20px 20px 0;
    font-size: 14px;
    position: relative;
}

.right-panel .panel-list a:hover,
.right-panel .panel-list a:active {
    color: #eee;
    background-color: rgba(255, 255, 255, 0.08) !important;
}

.right-panel .panel-list {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.right-panel .panel-list:first-child {
    border-top: 0px;
}

.right-panel .panel-list a {
    display: block;
    position: relative;
    padding: 0 13px 0 10px;
    line-height: 36px;
    margin: 0;
    color: rgba(255, 255, 255, .50);
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
    border-top: 0
}

textarea {
    resize: none;
    text-decoration: none;
}

button,
input,
textarea {
    margin: 0;
    font-size: 100%;
    vertical-align: middle;
}

button,
input {
    *overflow: visible;
    line-height: normal;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
    padding: 0;
    border: 0;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
    cursor: pointer;
    -webkit-appearance: button;
}

label,
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
input[type="radio"],
input[type="checkbox"] {
    cursor: pointer;
}

.navbar-fixed-top,
.navbar-fixed-bottom {
    right: 0;
    left: 0;
    z-index: 1030;
    margin-bottom: 0;
}
/*bootstrap*/

#player_card_player_image img {
    width: 100px !important;
    height: 100px !important;
}

#player_card_team_image {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center;
}

.trade-container .econ_item_small,
.trade-container-out .econ_item_small,
#want-container .econ_item_small,
#have-container .econ_item_small {
    width: 80px !important;
    height: 53px !important;
}

.maxtooltip {
    outline: none;
}

.maxtooltip div {
    white-space: normal !important;
}

.maxtooltip:hover {
    text-decoration: none;
}

.maxtooltip .toolhidden span {
    font-size: 12px !important;
}

.maxtooltip .toolhidden {
    z-index: 100002;
    display: none;
    position: absolute;
    padding: 8px 13px;
    margin-left: -75px;
    min-width: 260px;
    line-height: 16px;
    color: #EEE;
    background-color: rgb(10, 10, 10);
    background-color: rgba(10, 10, 10, 0.9);
    border-radius: 5px;
    border: 1px solid rgba(30, 30, 30, 0.95);
}

.unusedbox {
    background-color: #111;
    display: inline-block;
    border: 1px solid;
    border-color: #070809 #0d0e0f #131517;
    border-color: rgba(0, 0, 0, 0.8) rgba(0, 0, 0, 0.65) rgba(0, 0, 0, 0.5);
    border-radius: 3px;
    width: 845px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 20px;
    padding-bottom: 10px;
}

.econ_item {
    float: left;
    display: inline;
    width: 140px;
    height: 93px;
    background-size: 100%;
    margin: 10px 0px 0px 10px;
}

.econ_item_grey {
    font-size: 16px;
    font-weight: bold;
    float: left;
    height: 65px;
    width: 5%;
    margin-top: 5px;
    line-height: 33px;
    background: #333;
    text-align: center;
    color: rgb(221, 221, 221);
    cursor: pointer;
    ;
}

.econ_item_have {
    font-size: 16px;
    font-weight: bold;
    float: left;
    height: 55px;
    width: 30px;
    margin-top: 3px;
    line-height: 28px;
    background: #3c9ffb;
    background: -moz-linear-gradient(top, #3c9ffb, #2577c3);
    background: -webkit-linear-gradient(top, #3c9ffb, #2577c3);
    background: -o-linear-gradient(top, #3c9ffb, #2577c3);
    background: -ms-linear-gradient(top, #3c9ffb, #2577c3);
    background: linear-gradient(top, #3c9ffb, #2577c3);
    text-align: center;
    color: rgb(221, 221, 221);
    border-bottom: solid 1px #155794;
}

.econ_item_want {
    font-size: 16px;
    font-weight: bold;
    float: left;
    height: 55px;
    width: 30px;
    margin-top: 3px;
    line-height: 28px;
    background: #e99129;
    background: -moz-linear-gradient(top, #e99129, #d57a0e);
    background: -webkit-linear-gradient(top, #e99129, #d57a0e);
    background: -o-linear-gradient(top, #e99129, #d57a0e);
    background: -ms-linear-gradient(top, #e99129, #d57a0e);
    background: linear-gradient(top, #e99129, #d57a0e);
    text-align: center;
    color: rgb(221, 221, 221);
    border-top: solid 1px #f3a447;
}

.econ_item_small {
    float: left;
    display: inline;
    width: 100px;
    height: 66px;
    background-size: 100%;
    margin: 3px 0px 0px 3px;
}

.econ_item_small_cannottrade {
    float: left;
    display: inline;
    width: 100px;
    height: 66px;
    background-size: 100%;
    margin: 3px 0px 0px 3px;
}

.econ_item-text-light {
    width: 100%;
    height: 100%;
    background: rgba(10, 10, 10, 0.2);
    cursor: pointer;
    position: absolute;
    top: 0px;
    left: 0px;
}

.econ_item-text-dark {
    width: 100%;
    height: 100%;
    background: rgba(10, 10, 10, 0.5);
    cursor: pointer;
}

.econ_item-text {
    width: 100%;
    height: 100%;
    background: rgba(10, 10, 10, 0.5);
    cursor: pointer;
}

.econ_item-bar {
    background: rgba(0, 0, 0, 0.65);
    text-align: center;
    height: 15px;
    line-height: 17px;
    position: absolute;
    bottom: 0px;
    width: 100%;
}

.unusedhero {
    float: left;
    display: inline;
    width: 100px;
    height: 50px;
    background-size: 100%;
    margin: 8px 8px 8px 8px;
}

.unusedhero-text {
    width: 100px;
    height: 50px;
    background: rgba(10, 10, 10, 0.5);
    cursor: pointer;
}

.econ_item-text-light:focus,
.econ_item-text-light:hover,
.econ_item-text:focus,
.econ_item-text:hover,
.unusedhero-text:hover,
.unusedhero-text:focus {
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    background: rgba(10, 10, 10, 0.0);
}

.black-box {
    background-color: #111;
    padding: 8px;
    border: 1px solid;
    border-color: #070809 #0d0e0f #131517;
    border-color: rgba(0, 0, 0, 0.8) rgba(0, 0, 0, 0.65) rgba(0, 0, 0, 0.5);
    border-radius: 3px;
    display: inline-block;
    vertical-align: baseline;
    zoom: 1;
    *display: inline;
    *vertical-align: auto;
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0));
    background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0));
    background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0));
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0));
    -webkit-box-shadow: 0 1px rgba(255, 255, 255, 0.05);
    box-shadow: 0 1px rgba(255, 255, 255, 0.05);
}

.filterbox {
    padding: 8px;
    display: inline-block;
    vertical-align: baseline;
    zoom: 1;
    *display: inline;
    *vertical-align: auto;
}

.trade-box-inside {
    background-color: rgb(40, 40, 40);
    margin-bottom: 0px;
    height: 59px;
    width: 95%;
    display: inline-block;
    vertical-align: baseline;
    border: 1px rgb(60, 60, 60) solid;
}

.trade-box {
    background-color: rgb(20, 20, 20);
    box-shadow: 0 0 1px 1px rgb(10, 10, 10);
    margin-bottom: 0px;
    display: inline-block;
    vertical-align: baseline;
    width: 95%;
    height: 76px;
    margin-bottom: -1px !important;
    border: 1px rgb(40, 40, 40) solid;
    cursor: pointer;
}

.blue-shadow-hover:hover {
    border: 1px rgba(0, 161, 250, 0.7) solid;
    -moz-box-shadow: 0 0 10px rgba(0, 161, 250, 0.5);
    /*firefox*/
    
    -webkit-box-shadow: 0 0 10px rgba(0, 161, 250, 0.5);
    /*safari鎴朿hrome*/
    
    box-shadow: 0 0 10px rgba(0, 161, 250, 0.5);
    /*opera鎴杋e9*/
}

.trade-box:hover {
    border: 1px rgba(0, 161, 250, 0.7) solid;
    -moz-box-shadow: 0 0 10px rgba(0, 161, 250, 0.5);
    /*firefox*/
    
    -webkit-box-shadow: 0 0 10px rgba(0, 161, 250, 0.5);
    /*safari鎴朿hrome*/
    
    box-shadow: 0 0 10px rgba(0, 161, 250, 0.5);
    /*opera鎴杋e9*/
}

.pagerbox {
    background-color: #1e1e1e;
    padding: 8px;
    background-clip: padding-box;
    border: 1px solid;
    border-color: #070809 #0d0e0f #131517;
    border-color: rgba(0, 0, 0, 0.8) rgba(0, 0, 0, 0.65) rgba(0, 0, 0, 0.5);
    border-radius: 3px;
    display: inline-block;
    vertical-align: baseline;
    zoom: 1;
    *display: inline;
    *vertical-align: auto;
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0));
    background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0));
    background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0));
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0));
    -webkit-box-shadow: 0 1px rgba(255, 255, 255, 0.05);
    box-shadow: 0 1px rgba(255, 255, 255, 0.05);
}

.pagerwidth {
    width: 17px !important;
    min-width: 15px !important;
    padding-right: 5px !important;
    padding-left: 5px !important;
    margin-right: 2px;
    border-right: 1px solid #000;
}

.nabtn {
    background-color: rgb(30, 30, 30);
    min-width: 50px;
    padding-right: 10px;
    padding-left: 10px;
    cursor: pointer;
    list-style-type: none;
    text-decoration: none;
    text-shadow: 0 1px black;
    background-clip: padding-box;
    border-color: rgb(10, 10, 10);
    background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0));
    background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0));
    background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0));
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0));
    -webkit-box-shadow: inset 0 0 0 1px rgba(55, 55, 55, 0.24), inset 0 1px rgba(55, 55, 55, 0.2), inset 0 -1px rgba(0, 0, 0, 0.15), 0 1px 1px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 0 0 1px rgba(55, 55, 55, 0.24), inset 0 1px rgba(55, 55, 55, 0.2), inset 0 -1px rgba(0, 0, 0, 0.15), 0 1px 1px rgba(0, 0, 0, 0.2);
    -webkit-transition: 0.1s ease-out;
    -moz-transition: 0.1s ease-out;
    -o-transition: 0.1s ease-out;
    transition: 0.1s ease-out;
}

.nabtn:hover {
    background-color: rgb(69, 25, 24);
    color: #fff !important;
}

.nabtn:active {
    color: #fff !important;
    text-shadow: 0 -1px black;
    background-color: rgb(69, 25, 24);
    border-color: black rgba(0, 0, 0, 0.65) rgba(0, 0, 0, 0.6);
    -webkit-box-shadow: inset 0 1px rgba(0, 0, 0, 0.05), inset 0 2px 2px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.06);
    box-shadow: inset 0 1px rgba(0, 0, 0, 0.05), inset 0 2px 2px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.06);
}

.nabtn-lang {
    margin-top: 2px !important;
    height: 20px !important;
    line-height: 20px !important;
    border-right: 1px #111 solid !important;
    font-size: 10px !important;
    width: 50px !important;
}

.active {
    color: #fff !important;
    text-shadow: 0 -1px black;
    background-color: rgb(69, 25, 24);
    border-color: black rgba(0, 0, 0, 0.65) rgba(0, 0, 0, 0.6);
    -webkit-box-shadow: inset 0 1px rgba(0, 0, 0, 0.05), inset 0 2px 2px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.06);
    box-shadow: inset 0 1px rgba(0, 0, 0, 0.05), inset 0 2px 2px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.06);
}

.pagination .prev,
.pagination .next {
    font-family: Noteworthy, Arial, sans-serif;
    font-size: 14px;
}
/*login*/

#tbutton {
    background: #9c3627;
    border-radius: 50%;
    border: 10px solid #272728;
    font-size: 0.9em;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
    width: 85px;
    height: 85px;
    position: absolute;
    right: -42px;
    top: 54px;
    text-align: center;
    -webkit-transition: 0.5s ease;
    -moz-transition: 0.5s ease;
    -o-transition: 0.5s ease;
    -ms-transition: 0.5s ease;
    transition: 0.5s ease;
}

#tbutton:hover {
    background: #272728;
    border-color: #9c3627;
    -webkit-transition: 0.5s ease;
    -moz-transition: 0.5s ease;
    -o-transition: 0.5s ease;
    -ms-transition: 0.5s ease;
    transition: 0.5s ease;
}

#tbutton i {
    font-size: 20px;
    -webkit-transition: 0.5s ease;
    -moz-transition: 0.5s ease;
    -o-transition: 0.5s ease;
    -ms-transition: 0.5s ease;
    transition: 0.5s ease;
}

#tbutton:hover i {
    color: #9c3627;
    -webkit-transition: 0.5s ease;
    -moz-transition: 0.5s ease;
    -o-transition: 0.5s ease;
    -ms-transition: 0.5s ease;
    transition: 0.5s ease;
}

#loginform {
    width: 550px;
    height: auto;
    margin: 0 auto;
}

:-moz-placeholder {
    /* Firefox 18- */
    
    color: #929999;
}

::-moz-placeholder {
    /* Firefox 19+ */
    
    color: #929999;
}

:-ms-input-placeholder {
    color: #929999;
}

#note {
    color: #88887a;
    font-size: 0.8em;
    text-align: left;
    padding-left: 5px;
}

#facebook {
    text-align: center;
    float: left;
    background: #499249;
    padding: 35px 10px 20px 10px;
    width: 170px;
    height: 135px;
    border-radius: 3px;
    cursor: pointer;
    box-shadow: 0px 0px 10px 2px #161718;
    margin-right: 10px;
    -webkit-transition: 0.5s ease;
    -moz-transition: 0.5s ease;
    -o-transition: 0.5s ease;
    -ms-transition: 0.5s ease;
    transition: 0.5s ease;
}

#facebook:hover {
    background-color: #49bb49;
    -webkit-transition: 0.5s ease;
    -moz-transition: 0.5s ease;
    -o-transition: 0.5s ease;
    -ms-transition: 0.5s ease;
    transition: 0.5s ease;
}

.fa-facebook {
    color: #fff;
    font-size: 7em;
    display: block;
}

#mainlogin {
    float: left;
    width: 250px;
    height: 170px;
    padding: 10px 15px;
    position: relative;
    background: #555555;
    border-radius: 3px;
}

#connect {
    font-weight: bold;
    color: #fff;
    font-size: 13px;
    text-align: left;
    font-family: verdana;
    padding-top: 10px;
}

#or {
    position: absolute;
    left: -25px;
    top: 10px;
    background: #222222;
    text-shadow: 0 2px 0px #121212;
    color: #999999;
    width: 40px;
    height: 40px;
    text-align: center;
    border-radius: 50%;
    font-weight: bold;
    line-height: 38px;
    font-size: 13px;
}
/*end login*/

img {
    border: 0 none;
}

li {
    outline: 0px !important;
}

.filter-skill {
    border-radius: 0px;
    margin: 0px;
    float: left;
    font-size: 12px;
    padding-left: 7px;
    padding-right: 7px;
}

.filter-skill.active {
    box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
    background-color: #161616 !important;
}

.stitle {
    margin-top: 20px;
    margin-bottom: 8px;
    text-align: center;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    text-shadow: rgb(0, 0, 0) 1px 1px 0px;
}

.table-sfield {
    text-align: left;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    margin-bottom: 20px;
    width: 90% !important;
    box-shadow: 0 3px 2px -2px rgba(0, 0, 0, 0.8);
}

.table-player-detail tr td {
    vertical-align: middle;
}

.table-search-result {
    text-align: left;
    border: 1px #101010 solid;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    width: 47.5%;
}

.shead td {
    text-align: center !important;
    vertical-align: middle !important;
    color: #ccc;
    background-color: #0f0f0f !important;
    font-size: 12px;
    text-shadow: rgba(0, 0, 0, 0.6) 1px 1px 1px;
    border-right: 0px;
    border-left: 0px;
    height: 28px;
    line-height: 28px;
}

.table .shead td {
    text-align: center;
}

.table-player-detail tr {
    cursor: pointer;
}

.table-player-detail tr td div {
    line-height: 10px;
}

.match-heroname-bar {
    background: rgba(0, 0, 0, 0.7);
    padding: 3px;
    text-align: right;
}

.table-match-detail-dire {
    background-color: rgb(25, 20, 20) !important;
}

.table-match-detail-dire tbody > tr:nth-child(odd) > td {
    background-color: rgb(33, 30, 30) !important;
}

.table-match-detail-ra {
    background-color: rgb(20, 25, 20) !important;
}

.table-match-detail-ra tbody > tr:nth-child(odd) > td {
    background-color: rgb(30, 33, 30) !important;
}

.table-match-detail {
    border: 1px rgb(17, 17, 17) solid;
    width: 98%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    margin-top: 10px;
}

.table-match-detail thead td {
    font-size: 12.5px !important;
    text-align: center;
    line-height: 20px;
}

.table-match-detail tbody > tr:nth-child(odd) > td {
    background-color: rgb(42, 42, 42);
}

.table-match-detail tr {
    height: 50px;
}

.table-match-detail tr td {
    text-align: center;
    vertical-align: middle;
}

.table-match-detail tbody tr td {
    line-height: 20px;
}

.player-not-update {
    width: 268px !important;
    border-style: solid;
    margin-left: 7px;
    margin-top: 5px;
    margin-bottom: 10px;
    border-width: 1px;
    border-color: rgba(190, 40, 40, 0.4);
    background-color: rgba(145, 0, 0, 0.2);
    color: #d67f76;
    height: 40px;
    font-size: 12px;
    text-align: center;
    line-height: 20px;
    float: left;
}

.player-update {
    width: 268px !important;
    border-style: solid;
    margin-left: 7px;
    margin-top: 5px;
    margin-bottom: 10px;
    border-width: 1px;
    border-color: rgba(70, 120, 185, 0.4);
    background-color: rgba(0, 87, 132, 0.2);
    color: #64b2de;
    height: 40px;
    font-size: 12px;
    text-align: center;
    line-height: 20px;
    float: left;
}

.max-bottom-play {
    box-shadow: 0 1px 2px #000;
    color: #ccc;
    padding: 3px 10px 3px 10px;
    font-size: 12px;
    height: 25px !important;
    background-color: #6B8805;
    margin-right: 5px;
}

.max-bottom-play:hover {
    color: #fff !important;
    background-color: #A4D007;
}

.max-nav-tab li {
    z-index: -100;
    margin-left: 2px;
    line-height: 25px;
    padding-left: 10px;
    padding-right: 10px;
    vertical-align: middle;
    float: left;
    display: block;
}

.max-nav-tab {
    border-bottom: solid 1px #000;
    box-shadow: #444 0 1px 0;
    -moz-box-shadow: #444 0 1px 0;
    -webkit-box-shadow: #444 0 1px 0;
    display: block;
    margin-left: 0px;
    padding-left: 25px;
    margin-bottom: 20px;
    margin-top: 20px;
    height: 25px;
}

.ui-tabs-active {
    height: 25px;
    background-color: #1a1a1a;
    margin-bottom: -1px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-left: 1px #444 solid !important;
    border-right: 1px #444 solid !important;
    border-top: 1px #444 solid !important;
    border-bottom: 2px #1a1a1a solid;
    box-shadow: #000 -1px -1px 0;
    -moz-box-shadow: #000 -1px -1px 0;
    -webkit-box-shadow: #000 -1px -1px 0;
}

li.ui-state-active a {
    outline: 0px !important;
    color: #f0a868;
}

li.ui-tabs-active a {
    outline: 0px !important;
    background-color: #222;
    color: #f0a868;
}
/* logo */

.logo {
    font-family: "Arial";
    font-size: 68px;
    color: #ccc;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
    font-style: inherit;
    text-align: center;
    margin-bottom: 20px;
    margin-top: 150px;
    -webkit-transition: all 0.5s ease !important;
    -moz-transition: all 0.5s ease !important;
    -ms-transition: all 0.5s ease !important;
    -o-transition: all 0.5s ease !important;
    transition: all 0.5s ease !important;
}

.logo span {
    color: #942A25;
    font-size: 90px !important;
    -webkit-transition: all 0.5s ease !important;
    -moz-transition: all 0.5s ease !important;
    -ms-transition: all 0.5s ease !important;
    -o-transition: all 0.5s ease !important;
    transition: all 0.5s ease !important;
}

.logo a:hover span {
    color: #9c3627;
}

.logo a:hover {
    color: #FFF !important;
}

.text-box {
    background-color: #f5f5f5;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    border: 1px #ccc solid;
    color: #333;
    height: 31px;
    width: 200px;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.text-box:hover {
    color: #333;
    border: 1px solid #4cb182;
}

.text-box:focus {
    height: 80px;
}

.econ-btn {
    text-align: center;
    line-height: 35px;
    width: 65px;
    height: 35px;
    cursor: pointer;
    float: left;
    background-color: rgb(87, 136, 53);
    color: #fff;
    border-radius: 2px;
    margin-left: 4px;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.econ-btn.active {
    background-color: #000 !important;
}

.econ-btn-small {
    text-align: center;
    line-height: 30px;
    width: 60px;
    height: 30px;
    cursor: pointer;
    float: left;
    background-color: rgb(87, 136, 53);
    color: #fff;
    border-radius: 2px;
    margin-left: 4px;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.econ-btn:hover,
.econ-btn:focus,
.econ-btn-small:hover,
.econ-btn-small:focus {
    background-color: rgb(106, 177, 50);
}

.econ-btn-want {
    background: #e99129;
    background: -moz-linear-gradient(top, #e99129, #d57a0e);
    background: -webkit-linear-gradient(top, #e99129, #d57a0e);
    background: -o-linear-gradient(top, #e99129, #d57a0e);
    background: -ms-linear-gradient(top, #e99129, #d57a0e);
    background: linear-gradient(top, #e99129, #d57a0e);
    color: rgb(221, 221, 221);
}

.econ-btn-have {
    background: #3c9ffb;
    background: -moz-linear-gradient(top, #3c9ffb, #2577c3);
    background: -webkit-linear-gradient(top, #3c9ffb, #2577c3);
    background: -o-linear-gradient(top, #3c9ffb, #2577c3);
    background: -ms-linear-gradient(top, #3c9ffb, #2577c3);
    background: linear-gradient(top, #3c9ffb, #2577c3);
    color: rgb(221, 221, 221);
}

.econ-btn-red {
    background-color: rgb(172, 26, 29) !important;
}

.econ-btn-red:hover,
.econ-btn-red:focus {
    background-color: rgb(212, 26, 29) !important;
}

#home-search {
    width: 400px;
    height: 35px;
    line-height: 20px;
    background-color: rgb(228, 228, 228);
    font-size: 14px;
    margin-bottom: 0px;
    margin-right: auto;
    margin-left: auto;
    padding: 0px 10px;
    border: 1px #333 solid;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    color: #777;
}

#home-search:hover,
#home-search:active,
#home-search:focus {
    background-color: #fff;
    color: #111;
}

.search-top {
    padding: 10px;
    text-align: center;
    background-color: #111;
    margin-bottom: 20px;
}

.partner-bottom {
    text-align: center;
    text-align: center;
    margin-bottom: 0px;
    bottom: 0px !important;
    height: 20px;
    float: left;
    width: 100%;
    text-align: left;
    color: #888;
}

.partner-bottom a {
    color: #666;
}

.partner-bottom a:focus,
.partner-bottom a:hover {
    color: #999;
}

.search-btn {
    margin-left: 5px;
    padding-left: 15px;
    padding-right: 15px;
    background-color: rgb(87, 136, 53);
    color: #fff;
    border: 0px;
    border-radius: 2px;
    height: 35px;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.search-btn:hover,
.search-btn:focus {
    background-color: rgb(106, 177, 50);
}

#navi-search {
    width: 180px;
    height: 28px;
    line-height: 20px;
    background-color: #272728;
    font-size: 12px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 6px;
    padding: 0 10px;
    border: 1px #666 solid;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    color: #cccccc;
}

#navi-search:hover,
#navi-search:active,
#navi-search:focus {
    color: #FFFFFF;
    background-color: #000;
    border-color: #fff;
}
/* Search box */

h3:hover span {
    color: #FF8477;
}

h3:focus {
    outline: 0px !important;
}

#navi-box {
    width: 114px;
    height: 30px;
    display: block;
    float: left;
    text-align: center;
    vertical-align: middle;
    font-size: 12px;
    color: #cccccc;
    text-indent: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 5px;
    padding-top: 0px;
    padding-bottom: 0px;
    outline-color: #FF8477;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    -webkit-appearance: none;
    -webkit-background-clip: border-box;
    -webkit-background-origin: padding-box;
    -webkit-background-size: auto;
    -webkit-rtl-ordering: logical;
    -webkit-user-select: text;
    -webkit-writing-mode: horizontal-tb;
    background-attachment: scroll;
    background-clip: border-box;
    background-origin: padding-box;
    background-size: auto;
    border-bottom-color: #000000;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-image-outset: 0px;
    border-image-repeat: stretch;
    border-image-slice: 100%;
    border-image-width: 1;
    border-left-color: #000000;
    border-left-style: solid;
    border-left-width: 1px;
    border-right-color: #000000;
    border-right-style: solid;
    border-right-width: 1px;
    border-top-color: #FF8477;
    border-top-style: solid;
    border-top-width: 1px;
}

#id-input {
    width: 82px;
    height: 30px;
    display: block;
    float: left;
    text-align: center;
    font-size: 12px;
    color: #cccccc;
    text-indent: 0px;
    padding-bottom: 0px;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 0px;
    outline-color: #FF8477;
    margin-bottom: 0px;
    margin-left: 6px;
    margin-right: 0px;
    margin-top: 0px;
    -webkit-appearance: none;
    -webkit-background-clip: border-box;
    -webkit-background-origin: padding-box;
    -webkit-background-size: auto;
    -webkit-rtl-ordering: logical;
    -webkit-user-select: text;
    -webkit-writing-mode: horizontal-tb;
    background-attachment: scroll;
    background-clip: border-box;
    background-color: rgba(0, 0, 0, 0);
    background-image: none;
    background-origin: padding-box;
    background-size: auto;
    border-bottom-color: #FF8477;
    border-bottom-style: none;
    border-bottom-width: 0px;
    border-image-outset: 0px;
    border-image-repeat: stretch;
    border-image-slice: 100%;
    border-image-source: none;
    border-image-width: 1;
    border-left-color: #FF8477;
    border-left-style: none;
    border-left-width: 0px;
    border-right-color: #FF8477;
    border-right-style: none;
    border-right-width: 0px;
    border-top-color: #FF8477;
    border-top-style: none;
    border-top-width: 0px;
}

#searchbox {
    background: url(/static/image/searchbox.png) 0 0 no-repeat;
    width: 130px;
    height: 35px;
    margin-bottom: 0px;
    margin-top: 4px;
    margin-left: 20px;
    padding: 0 30px;
    border: 0px;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    color: #cccccc;
}

#searchbox:focus {
    background: url(/static/image/searchbox_active.png) 0 0% no-repeat;
    color: #FF8477;
}

#searchbox:hover {
    background: url(/static/image/searchbox_active.png) 0 0% no-repeat;
    color: #FF8477;
}

#searchbox::-webkit-input-placeholder {
    color: #cccccc;
    -webkit-transition: all 0.4s ease !important;
    -moz-transition: all 0.4s ease !important;
    -ms-transition: all 0.4s ease !important;
    -o-transition: all 0.3s ease !important;
    transition: all 0.3s ease !important;
}

#searchbox:hover::-webkit-input-placeholder {
    color: #FF8477;
}

#searchbox:focus::-webkit-input-placeholder {
    color: #FF8477;
}

#searchbox:-moz-placeholder {
    color: #cccccc;
    -webkit-transition: all 0.4s ease !important;
    -moz-transition: all 0.4s ease !important;
    -ms-transition: all 0.4s ease !important;
    -o-transition: all 0.3s ease !important;
    transition: all 0.3s ease !important;
}

#searchbox:focus:-moz-placeholder:hover {
    color: #FF8477;
}

#searchbox:hover:-moz-placeholder:hover {
    color: #FF8477;
}

#searchbox:-ms-input-placeholder {
    color: #cccccc;
    -webkit-transition: all 0.4s ease !important;
    -moz-transition: all 0.4s ease !important;
    -ms-transition: all 0.4s ease !important;
    -o-transition: all 0.3s ease !important;
    transition: all 0.3s ease !important;
}

鈥� #searchbox:focus:-ms-input-placeholder {
    color: #FF8477;
}

#searchbox:hover:-ms-input-placeholder {
    color: #FF8477;
}
/* totop-scroller */

#totop-scroller {
    display: block;
    float: right;
    margin-top: 5px;
    z-index: 4;
    width: 36px;
    height: 36px;
    text-decoration: none;
    background: url(/static/image/totop_scroller.png) 0 0 no-repeat;
}

#totop-scroller:hover {
    background-position: 0 -50px;
}
/* pager */

#pager ul.pages {
    display: block;
    border: none;
    font-size: 10px;
    padding: 0;
}

#pager ul.pages li {
    list-style: none;
    float: left;
    border: 1px solid #999999;
    text-decoration: none;
    font-size: 10px;
    margin: 0 2px 0 0;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 5px;
    padding-right: 5px;
}

#pager ul.pages li:hover {
    border: 1px solid #999999;
    color: #222;
    font-weight: 700;
    background-color: #999999;
}

#pager ul.pages li:active {
    border: 1px solid #000000;
    color: #222;
    font-weight: 700;
    background-color: #999999;
}

#pager ul.pages li.pgEmpty {
    border: 1px solid #999999;
    color: #999999;
}

#pager ul.pages li.pgCurrent {
    border: 1px solid #999999;
    color: #000;
    font-weight: 700;
    background-color: #999999;
}
/* items */

.iconTooltip,
.hero_items_box {
    padding: 10px;
    text-align: left;
}

.hero_items_box {
    left: 100px
}

.hero_items_box h2 {
    line-height: 32px;
    font-size: 18px;
    color: #fff;
    border-bottom: 1px solid #999;
    margin-bottom: 4px;
    padding-bottom: 6px
}

.hero_items_box h3 {
    line-height: 20px;
    font-size: 14px;
    color: #fff;
    border-bottom: 1px solid #999;
    margin-bottom: 4px;
    padding-bottom: 6px
}

.hero_items_box h4 {
    line-height: 20px;
    font-size: 14px;
    color: #999;
    padding-bottom: 6px
}

.hero_items_box h4 strong {
    color: #c6c6c6
}

.hero_items_box h5,
.items_txt .items_p5 {
    height: 22px;
    padding: 6px 0
}

.hero_items_box h5 span,
.items_txt .items_p5 span {
    display: block;
    width: 50px;
    color: #999;
    line-height: 20px;
    float: left
}

.hero_items_box h6 {
    line-height: 16px;
    font-size: 12px;
    color: #a8a8a8
}

.hero_items_box p {
    line-height: 20px;
    padding-bottom: 6px;
    color: #c6c6c6;
    font-size: 14px
}

.iconTooltip_top {
    padding: 6px 0;
}

.iconTooltip_img {
    width: 74px;
    float: left;
    padding-right: 4px
}

.iconTooltip_img img {
    width: 70px;
    height: 53px
}

.iconTooltip_constr img {
    width: 45px;
    padding-top: 5px;
    vertical-align: bottom;
}

.iconTooltip_tit {
    float: left;
    text-align: left;
    height: 60px;
    width: 200px;
}

.iconTooltip_tit .items_tit,
.items_tit_box .items_tit {
    line-height: 18px;
    font-size: 16px;
    color: #fff;
}

.iconTooltip_tit .c0,
.items_tit_box .c0 {
    color: #fff
}

.iconTooltip_tit .c1,
.items_tit_box .c1 {
    color: #1D80E7
}

.iconTooltip_tit .c2,
.items_tit_box .c2 {
    color: #2BAB01
}

.iconTooltip_tit .c3,
.items_tit_box .c3 {
    color: #B812F9
}

.iconTooltip_tit .c4,
.items_tit_box .c4 {
    color: #E29B01
}

.iconTooltip_tit .price,
.items_tit_box .price {
    padding-left: 22px;
    line-height: 20px;
    font-size: 12px;
    color: #f5c433;
    background: url(/static/image/price.gif) no-repeat 0 center;
    background-size: 20px;
}

.items_txt {
    color: #c0c0c0;
    clear: both;
    text-align: left;
    margin-top: 10px;
}

.items_txt .items_p {
    width: 100%;
    height: auto;
    font-size: 12px;
    line-height: 18px;
    padding: 10px 0;
    text-align: left
}

.items_txt .items_p2 {
    line-height: 20px;
    background: url(/static/image/li01.gif) no-repeat 14px center;
    padding-left: 25px;
    text-align: left;
    font-size: 14px
}

.items_txt .items_p2 strong,
.items_txt .items_p3 strong,
.itemsShow_info li .items_p2 strong,
.itemsShow_info li .items_p3 strong {
    color: #f0a868;
    font-weight: normal;
}

.items_txt .items_p3 {
    line-height: 20px;
    padding-left: 26px;
    font-size: 14px
}

.items_txt .items_p4 {
    line-height: 14px;
    font-size: 10px;
    color: #888888;
    font-weight: normal;
    padding-top: 20px;
    padding-bottom: 10px;
}

.items_txt .items_p5 {
    line-height: 14px;
    font-size: 12px;
    color: #AFAFAF;
    font-weight: normal;
    clear: both;
    padding-top: 10px
}

.items_txt .items_p5 span {
    width: 120px
}

.skill_right p.ico1,
.hero_items_box h5 span.ico1,
.items_p5 span.ico1 {
    background: url(/static/image/ico1.gif) no-repeat left center;
    background-size: 20px;
    padding-left: 25px;
    margin-left: 13px;
}

.skill_right p.ico2,
.hero_items_box h5 span.ico2,
.items_p5 span.ico2 {
    background: url(/static/image/ico2.gif) no-repeat left center;
    background-size: 20px;
    padding-left: 25px;
    margin-left: 13px;
    margin-bottom: 3px;
}

.main-box {
    width: 1040px;
}

.gold-color {
    color: #f0a868;
}

.btn-gold .filter-option {
    color: #f0a868 !important;
}

.max-color {
    color: #9c3627;
    font-size: 15px;
}

.sepline {
    height: 10px;
    width: 100%;
    background: url(/static/image/list_line.png) 0 0 repeat-x;
}

.skill-build {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 25px;
    background-color: #000;
    border: 1px #000000 solid;
}

.skill-build tbody tr {
    border: 1px #000 solid;
    height: 30px !important;
}

.skill-build tbody tr td {
    border: 1px rgb(30, 30, 30) solid;
    width: 40px;
}

.img-shadow {
    box-shadow: 0 1px 2px #000;
}

.skill-box {
    width: 30px;
    height: 41px;
    border: 1px #ccc solid;
}

.skill-icon {
    display: block;
    height: 41px;
    width: 41px;
    margin: 0px !important;
    padding: 0px !important;
    box-shadow: 0 1px 2px #000;
}

.match-detail-info td {
    padding-left: 10px;
    padding-right: 10px;
}

.match-victory {
    text-align: center;
    font-weight: normal;
    font-size: 20px;
    text-shadow: 2px 2px 2px #000000;
    margin: 30px 50px 0 0;
}

.dire {
    text-shadow: 2px 2px 1.5px #000000;
    font-size: 18px;
    color: #9c3627;
}

.light-red {
    color: rgb(212, 26, 29);
}

.radiant {
    text-shadow: 2px 2px 1.5px #000000;
    font-size: 18px;
    color: #92A525;
}

.green-color {
    color: #499249;
}

.color-green {
    color: #499249;
}

.color-green {
    color: #499249;
}

.color-red {
    color: rgb(182, 26, 29);
    font-weight: bold;
}

.color-dire {
    color: #9c3627;
}

.table-shadow {
    box-shadow: 0 3px 3px -4px rgba(0, 0, 0, 0.8);
}

table.table-shadow thead td {
    vertical-align: middle !important;
    cursor: pointer;
    background-color: #0f0f0f;
    font-size: 13px;
    border-right: 0px;
    border-left: 0px;
}

.select-max {
    -webkit-appearance: none;
    -webkit-border-radius: 0px;
    background-color: #252525;
    color: #ffffff;
    height: 25px;
    line-height: 25px;
    width: 150px;
    padding-left: 15px;
    vertical-align: middle;
    border: #000000 1px solid;
    cursor: pointer;
}

.select-max option {
    -webkit-appearance: none;
    -webkit-border-radius: 0px;
    background-color: #2D2D2D;
    color: #ffffff;
    width: 150px;
    padding-left: 10px;
    border: #000000 1px solid;
}

.segment {
    display: inline-block;
    height: 5px;
}

.segment.segment-white {
    background: #FFFFFF;
    background: -moz-linear-gradient(top, #FFFFFF 0%, #777777 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #FFFFFF), color-stop(100%, #777777));
    background: -webkit-linear-gradient(top, #FFFFFF 0%, #777777 100%);
    background: -o-linear-gradient(top, #FFFFFF 0%, #777777 100%);
    background: -ms-linear-gradient(top, #FFFFFF 0%, #777777 100%);
    background: linear-gradient(to bottom, #FFFFFF 0%, #777777 100%);
}

.segment.segment-green {
    background: #76c200;
    background: -moz-linear-gradient(top, #76c200 0%, #375b00 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #76c200), color-stop(100%, #375b00));
    background: -webkit-linear-gradient(top, #76c200 0%, #375b00 100%);
    background: -o-linear-gradient(top, #76c200 0%, #375b00 100%);
    background: -ms-linear-gradient(top, #76c200 0%, #375b00 100%);
    background: linear-gradient(to bottom, #76c200 0%, #375b00 100%);
}

.segment.segment-gold {
    background: #feb20f;
    background: -moz-linear-gradient(top, #feb20f 0%, #a07838 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #feb20f), color-stop(100%, #a07838));
    background: -webkit-linear-gradient(top, #feb20f 0%, #a07838 100%);
    background: -o-linear-gradient(top, #feb20f 0%, #a07838 100%);
    background: -ms-linear-gradient(top, #feb20f 0%, #a07838 100%);
    background: linear-gradient(to bottom, #feb20f 0%, #a07838 100%);
}

.segment.segment-deepwhite {
    background: #DFF0D8;
}

.segment.segment-blue {
    background: #0096d1;
    background: -moz-linear-gradient(top, #0096d1 0%, #002dd1 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #0096d1), color-stop(100%, #002dd1));
    background: -webkit-linear-gradient(top, #0096d1 0%, #002dd1 100%);
    background: -o-linear-gradient(top, #0096d1 0%, #002dd1 100%);
    background: -ms-linear-gradient(top, #0096d1 0%, #002dd1 100%);
    background: linear-gradient(to bottom, #0096d1 0%, #002dd1 100%);
}

.segment.segment-gray {
    background: #878686;
    background: -moz-linear-gradient(top, #878686 0%, #474646 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #878686), color-stop(100%, #474646));
    background: -webkit-linear-gradient(top, #878686 0%, #474646 100%);
    background: -o-linear-gradient(top, #878686 0%, #474646 100%);
    background: -ms-linear-gradient(top, #878686 0%, #474646 100%);
    background: linear-gradient(to bottom, #878686 0%, #474646 100%);
}

.segment.segment-red {
    background: -moz-linear-gradient(top, #c30000 0%, #6b0000 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c30000), color-stop(100%, #6b0000));
    background: -webkit-linear-gradient(top, #c30000 0%, #6b0000 100%);
    background: -o-linear-gradient(top, #c30000 0%, #6b0000 100%);
    background: -ms-linear-gradient(top, #c30000 0%, #6b0000 100%);
    background: linear-gradient(to bottom, #c30000 0%, #6b0000 100%);
}

::-moz-selection {
    background: rgba(0, 161, 250, 0.12);
}

::selection {
    background: rgba(0, 161, 250, 0.12);
}

.xuning-hint {
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    border-style: solid;
    border-width: 1px;
    border-radius: 3px;
    border-color: rgba(70, 120, 185, 0.5);
    background-color: rgba(0, 87, 132, 0.2);
    color: #64b2de;
}

.blue-hint-box {
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    border-style: solid;
    border-width: 1px;
    border-radius: 3px;
    border-color: rgba(70, 120, 185, 0.5);
    background-color: rgba(0, 87, 132, 0.2);
    color: #64b2de;
}

.xuning-select {
    background-color: #eeeeee;
    border: 1px solid #000000;
    border-radius: 0px;
}

.match-items-img-list {
    height: 26px;
    vertical-align: middle;
    margin-right: 2px;
    margin-top: 3px;
    box-shadow: 0 1px 2px #000;
}

.player-account-img {
    height: 70px;
    vertical-align: middle;
    margin-right: 1px;
    margin-left: 1px;
    box-shadow: 0 1px 2px #000;
}

.match-number {
    font-size: 14px;
    font-weight: 700;
}

.match-hero-img {
    height: 38px;
    vertical-align: middle;
    margin-right: 1px;
    margin-left: 1px;
    box-shadow: 0 1px 2px #000;
}

.hero-img-list {
    height: 28px;
    vertical-align: middle;
    margin-right: 3px;
    box-shadow: 0 1px 2px #000;
}

.match-hero-img-list {
    height: 24px;
    vertical-align: middle;
    padding-right: 0px;
    padding-left: 0px;
    box-shadow: 0 1px 2px #000;
}

.hero-name-list {
    margin-left: 5px;
    height: 20px;
    vertical-align: middle;
}

.copyright {
    margin: 10px 0 0 0;
    float: left;
    width: 25%;
    font-size: 11px;
    line-height: 130%;
    color: #999;
}

.footbar-link {
    margin: 10px 0 0 0;
    float: left;
    width: 50%;
    font-size: 11px;
    line-height: 130%;
    color: #999;
}

.box-title {
    width: 95%;
    margin-bottom: 0px;
    margin-top: 20px;
    margin-left: 23.5px;
    margin-right: 23.5px;
    vertical-align: middle;
}

.sort_font {
    font-size: 10px;
    color: #ffffff;
}
/* hero index page*/

.hero_tit_box {
    background: rgb(34, 34, 34);
    width: 300px;
    margin: 20px auto 14px auto;
    padding: 14px 6px;
    border: 1px rgb(52, 52, 52) solid;
}

.hero_name {
    line-height: 40px;
    font-size: 24px;
    text-align: center;
    color: #f0a868;
    padding-bottom: 1px;
}

.hero_roles {
    line-height: 18px;
    text-align: center;
    font-size: 14px;
    padding-top: 2px;
    color: #c4c0c0
}

.hero_roles span {
    color: #fff
}

.hero_list {
    width: 284px;
    padding-left: 0px;
    padding-bottom: 10px;
    float: left;
    margin-left: 22px;
}

.hero_list li {
    width: 70px;
    height: 39px;
    margin-bottom: 1px;
    border: 1px #000;
    margin-left: 1px;
    float: left;
    position: relative
}

.hero_list li.hero_list_tit {
    width: 278px;
    height: 42px;
    text-align: center
}

.hero_list li.hero_list_tit span {
    padding-left: 40px;
    height: 42px;
    line-height: 42px;
    display: inline-block;
    font-size: 16px;
    color: #616363
}

.hero_list li.hero_list_tit span.str {
    background: url(../image/overviewicon_str.png) no-repeat 0 center;
    color: #93452E
}

.hero_list li.hero_list_tit span.agi {
    background: url(../image/overviewicon_agi.png) no-repeat 0 center;
    color: #46A546
}

.hero_list li.hero_list_tit span.int {
    background: url(../image/overviewicon_int.png) no-repeat 0 center;
    color: #0077B3
}

.heroHoverSmall {
    width: 65px;
}

.heroHoverLarge {
    width: 70px;
    height: 39px;
    border: 1px solid #aaaaaa;
    -webkit-box-shadow: 0px 0px 4px 4px #1C1E1E;
    -moz-box-shadow: 0px 0px 4px 4px #1c1e1e;
    box-shadow: 0px 0px 4px 4px #1C1E1E;
    position: absolute;
    top: -1px;
    left: -1px;
    z-index: 3;
    display: none
}

.hero_list_middle {
    width: 290px;
    padding: 0 6px 0 22px;
    float: left;
}

.filterUnmatchedHero {
    filter: alpha(opacity=10);
    -moz-opacity: .1;
    opacity: .1;
    background-color: #000000;
    cursor: default
}

.heroPickerIconLink {
    float: left;
    position: relative;
    display: block;
    width: 72px;
}

ol,
ul {
    list-style: none;
}
/*bootstrap select*/
/*!
 * bootstrap-select v1.3.1
 * http://silviomoreto.github.io/bootstrap-select/
 *
 * Copyright 2013 bootstrap-select
 * Licensed under the MIT license
 */

.bootstrap-select.btn-group,
.bootstrap-select.btn-group[class*="span"] {
    float: none;
    display: inline-block;
    margin-bottom: 10px;
    margin-left: 0;
}

.form-search .bootstrap-select.btn-group,
.form-inline .bootstrap-select.btn-group,
.form-horizontal .bootstrap-select.btn-group {
    margin-bottom: 0;
}

.bootstrap-select.btn-group.pull-right,
.bootstrap-select.btn-group[class*="span"].pull-right,
.row-fluid .bootstrap-select.btn-group[class*="span"].pull-right {
    float: right;
}

.input-append .bootstrap-select.btn-group {
    margin-left: -1px;
}

.input-prepend .bootstrap-select.btn-group {
    margin-right: -1px;
}

.bootstrap-select:not([class*="span"]) {
    width: 220px;
}

.bootstrap-select {
    /*width: 220px\9; IE8 and below*/
    
    width: 220px\0;
    /*IE9 and below*/
}

.bootstrap-select > .btn {
    width: 100%;
}

.error .bootstrap-select .btn {
    border: 1px solid #b94a48;
}

.dropdown-menu {
    z-index: 2000;
}

.bootstrap-select.show-menu-arrow.open > .btn {
    z-index: 2051;
}

.bootstrap-select .btn:focus {
    outline: thin dotted #333333 !important;
    outline: 5px auto -webkit-focus-ring-color !important;
    outline-offset: -2px;
}

.bootstrap-select.btn-group .btn .filter-option {
    overflow: hidden;
    position: absolute;
    left: 12px;
    right: 25px;
    text-align: left;
}

.bootstrap-select.btn-group .btn .caret {
    position: absolute;
    top: 50%;
    right: 12px;
    margin-top: -2px;
    vertical-align: middle;
}

.bootstrap-select.btn-group > .disabled,
.bootstrap-select.btn-group .dropdown-menu li.disabled > a {
    cursor: not-allowed;
}

.bootstrap-select.btn-group > .disabled:focus {
    outline: none !important;
}

.bootstrap-select.btn-group[class*="span"] .btn {
    width: 100%;
}

.bootstrap-select.btn-group .dropdown-menu {
    min-width: 100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.bootstrap-select.btn-group .dropdown-menu.inner {
    position: static;
    border: 0;
    padding: 0;
    margin: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.bootstrap-select.btn-group .dropdown-menu dt {
    display: block;
    padding: 3px 20px;
    cursor: default;
}

.bootstrap-select.btn-group .div-contain {
    overflow: hidden;
}

.bootstrap-select.btn-group .dropdown-menu li {
    position: relative;
}

.bootstrap-select.btn-group .dropdown-menu li > a.opt {
    position: relative;
    padding-left: 35px;
}

.bootstrap-select.btn-group .dropdown-menu li > a {
    text-align: left;
    cursor: pointer;
}

.bootstrap-select.btn-group .dropdown-menu li > dt small {
    font-weight: normal;
}

.bootstrap-select.btn-group.show-tick .dropdown-menu li.selected a i.check-mark {
    display: inline-block;
    position: absolute;
    right: 15px;
    margin-top: 2.5px;
}

.bootstrap-select.btn-group .dropdown-menu li a i.check-mark {
    display: none;
}

.bootstrap-select.btn-group.show-tick .dropdown-menu li a span.text {
    margin-right: 34px;
}

.bootstrap-select.btn-group .dropdown-menu li small {
    padding-left: 0.5em;
}

.bootstrap-select.btn-group .dropdown-menu li:not(.disabled) > a:hover small,
.bootstrap-select.btn-group .dropdown-menu li:not(.disabled) > a:focus small {
    color: #64b1d8;
    color: rgba(255, 255, 255, 0.4);
}

.bootstrap-select.btn-group .dropdown-menu li > dt small {
    font-weight: normal;
}

.bootstrap-select.show-menu-arrow .dropdown-toggle:before {
    content: '';
    display: inline-block;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #CCC;
    border-bottom-color: rgba(0, 0, 0, 0.2);
    position: absolute;
    bottom: -4px;
    left: 9px;
    display: none;
}

.bootstrap-select.show-menu-arrow .dropdown-toggle:after {
    content: '';
    display: inline-block;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid white;
    position: absolute;
    bottom: -4px;
    left: 10px;
    display: none;
}

.bootstrap-select.show-menu-arrow.dropup .dropdown-toggle:before {
    bottom: auto;
    top: -3px;
    border-top: 7px solid #ccc;
    border-bottom: 0;
    border-top-color: rgba(0, 0, 0, 0.2);
}

.bootstrap-select.show-menu-arrow.dropup .dropdown-toggle:after {
    bottom: auto;
    top: -3px;
    border-top: 6px solid #ffffff;
    border-bottom: 0;
}

.bootstrap-select.show-menu-arrow.pull-right .dropdown-toggle:before {
    right: 12px;
    left: auto;
}

.bootstrap-select.show-menu-arrow.pull-right .dropdown-toggle:after {
    right: 13px;
    left: auto;
}

.bootstrap-select.show-menu-arrow.open > .dropdown-toggle:before,
.bootstrap-select.show-menu-arrow.open > .dropdown-toggle:after {
    display: block;
}

.mobile-device {
    position: absolute;
    top: 0;
    left: 0;
    display: block !important;
    width: 100%;
    height: 100% !important;
    opacity: 0;
}

.bootstrap-select.fit-width {
    width: auto !important;
}

.bootstrap-select.btn-group.fit-width .btn .filter-option {
    position: static;
}

.bootstrap-select.btn-group.fit-width .btn .caret {
    position: static;
    top: auto;
    margin-top: -1px;
}

.control-group.error .bootstrap-select .dropdown-toggle {
    border-color: #b94a48;
}

.bootstrap-select-searchbox {
    padding: 4px 8px;
}
/* end of bootstrap-select*/
/* bootstrap */

.caret {
    display: inline-block;
    width: 0;
    height: 0;
    vertical-align: top;
    border-top: 4px solid #000000;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    content: "";
}

select {
    width: 220px;
    height: 30px;
    background-color: #ffffff;
    border: 1px solid #cccccc;
}

.dropup,
.dropdown {
    position: relative;
}

.dropdown-toggle {
    background-color: #000000;
    color: #ffffff;
    border: 1px solid #000000;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}

.dropdown-toggle:active,
.open .dropdown-toggle {
    outline: 0;
}

.caret {
    display: inline-block;
    width: 0;
    height: 0;
    vertical-align: top;
    border-top: 4px solid #000000;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    content: "";
}

.dropdown .caret {
    margin-top: 8px;
    margin-left: 2px;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    width: 140px;
    color: #ffffff;
    padding: 0px 0;
    margin: 0px 0 0;
    list-style: none;
    background-color: #2D2D2D;
    border: 1px solid #000000;
    -webkit-appearance: none;
    -webkit-border-radius: 0px;
}

.dropdown-menu.pull-right {
    right: 0;
    left: auto;
}

.dropdown-menu .divider {
    *width: 100%;
    height: 1px;
    margin: 9px 1px;
    *margin: -5px 0 5px;
    overflow: hidden;
    background-color: #e5e5e5;
    border-bottom: 1px solid #ffffff;
}

.dropdown-menu > li > a {
    cursor: pointer;
    display: block;
    background-color: #040404;
    padding: 3px 15px;
    clear: both;
    line-height: 20px;
    color: #aaaaaa;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-submenu:hover > a,
.dropdown-submenu:focus > a {
    color: #ffffff;
    text-decoration: none;
    background-color: #333333;
    background-repeat: repeat-x;
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);
}

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
    color: #ffffff;
    text-decoration: none;
    background-color: #0081c2;
    background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
    background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
    background-image: -o-linear-gradient(top, #0088cc, #0077b3);
    background-image: linear-gradient(to bottom, #0088cc, #0077b3);
    background-repeat: repeat-x;
    outline: 0;
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);
}

.dropdown-menu > .disabled > a,
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
    color: #999999;
}

.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
    text-decoration: none;
    cursor: default;
    background-color: transparent;
    background-image: none;
    filter: progid: DXImageTransform.Microsoft.gradient(enabled=false);
}

.open {
    *z-index: 1000;
}

.open > .dropdown-menu {
    display: block;
}

.dropdown-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 990;
}

.pull-right > .dropdown-menu {
    right: 0;
    left: auto;
}

.dropup .caret,
.navbar-fixed-bottom .dropdown .caret {
    border-top: 0;
    border-bottom: 4px solid #000000;
    content: "";
}

.dropup .dropdown-menu,
.navbar-fixed-bottom .dropdown .dropdown-menu {
    top: auto;
    bottom: 100%;
    margin-bottom: 1px;
}

.dropdown-submenu {
    position: relative;
}

.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px 6px;
    border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover > .dropdown-menu {
    display: block;
}

.dropup .dropdown-submenu > .dropdown-menu {
    top: auto;
    bottom: 0;
    margin-top: 0;
    margin-bottom: -2px;
    -webkit-border-radius: 5px 5px 5px 0;
    -moz-border-radius: 5px 5px 5px 0;
    border-radius: 5px 5px 5px 0;
}

.dropdown-submenu > a:after {
    display: block;
    float: right;
    width: 0;
    height: 0;
    margin-top: 5px;
    margin-right: -10px;
    border-color: transparent;
    border-left-color: #cccccc;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    content: " ";
}

.dropdown-submenu:hover > a:after {
    border-left-color: #ffffff;
}

.dropdown-submenu.pull-left {
    float: none;
}

.dropdown-submenu.pull-left > .dropdown-menu {
    left: -100%;
    margin-left: 10px;
    -webkit-border-radius: 6px 0 6px 6px;
    -moz-border-radius: 6px 0 6px 6px;
    border-radius: 6px 0 6px 6px;
}

.dropdown .dropdown-menu .nav-header {
    padding-right: 20px;
    padding-left: 20px;
}

.btn {
    display: inline-block;
    *display: inline;
    padding: 4px 12px;
    margin-bottom: 0;
    *margin-left: .3em;
    font-size: 14px;
    line-height: 20px;
    color: #333333;
    text-align: center;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
    vertical-align: middle;
    cursor: pointer;
    background-color: #f5f5f5;
    *background-color: #e6e6e6;
    background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
    background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
    background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
    background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
    background-repeat: repeat-x;
    border: 1px solid #cccccc;
    *border: 0;
    border-color: #e6e6e6 #e6e6e6 #bfbfbf;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    border-bottom-color: #b3b3b3;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
    filter: progid: DXImageTransform.Microsoft.gradient(enabled=false);
    *zoom: 1;
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}

.btn:hover,
.btn:focus,
.btn:active,
.btn.active,
.btn.disabled,
.btn[disabled] {
    color: #333333;
    background-color: #e6e6e6;
    *background-color: #d9d9d9;
}

.btn:active,
.btn.active {
    background-color: #cccccc \9;
}

.btn:first-child {
    *margin-left: 0;
}

.btn:hover,
.btn:focus {
    color: #333333;
    text-decoration: none;
    background-position: 0 -15px;
    -webkit-transition: background-position 0.1s linear;
    -moz-transition: background-position 0.1s linear;
    -o-transition: background-position 0.1s linear;
    transition: background-position 0.1s linear;
}

.btn:focus {
    outline: thin dotted #333;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}

.btn.active,
.btn:active {
    background-image: none;
    outline: 0;
    -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}

.btn.disabled,
.btn[disabled] {
    cursor: default;
    background-image: none;
    opacity: 0.65;
    filter: alpha(opacity=65);
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.btn-large {
    padding: 11px 19px;
    font-size: 17.5px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

.btn-large [class^="icon-"],
.btn-large [class*=" icon-"] {
    margin-top: 4px;
}

.btn-small {
    padding: 2px 10px;
    font-size: 11.9px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.btn-small [class^="icon-"],
.btn-small [class*=" icon-"] {
    margin-top: 0;
}

.btn-mini [class^="icon-"],
.btn-mini [class*=" icon-"] {
    margin-top: -1px;
}

.btn-mini {
    padding: 0 6px;
    font-size: 10.5px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.btn-block {
    display: block;
    width: 100%;
    padding-right: 0;
    padding-left: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.btn-block + .btn-block {
    margin-top: 5px;
}

input[type="submit"].btn-block,
input[type="reset"].btn-block,
input[type="button"].btn-block {
    width: 100%;
}

.btn-primary.active,
.btn-warning.active,
.btn-danger.active,
.btn-success.active,
.btn-info.active,
.btn-inverse.active {
    color: rgba(255, 255, 255, 0.75);
}

.btn-primary {
    color: #ffffff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    background-color: #006dcc;
    *background-color: #0044cc;
    background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
    background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
    background-image: -o-linear-gradient(top, #0088cc, #0044cc);
    background-image: linear-gradient(to bottom, #0088cc, #0044cc);
    background-repeat: repeat-x;
    border-color: #0044cc #0044cc #002a80;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0044cc', GradientType=0);
    filter: progid: DXImageTransform.Microsoft.gradient(enabled=false);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary.disabled,
.btn-primary[disabled] {
    color: #ffffff;
    background-color: #0044cc;
    *background-color: #003bb3;
}

.btn-primary:active,
.btn-primary.active {
    background-color: #003399 \9;
}

.btn-warning {
    color: #ffffff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    background-color: #faa732;
    *background-color: #f89406;
    background-image: -moz-linear-gradient(top, #fbb450, #f89406);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406));
    background-image: -webkit-linear-gradient(top, #fbb450, #f89406);
    background-image: -o-linear-gradient(top, #fbb450, #f89406);
    background-image: linear-gradient(to bottom, #fbb450, #f89406);
    background-repeat: repeat-x;
    border-color: #f89406 #f89406 #ad6704;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#fffbb450', endColorstr='#fff89406', GradientType=0);
    filter: progid: DXImageTransform.Microsoft.gradient(enabled=false);
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning.active,
.btn-warning.disabled,
.btn-warning[disabled] {
    color: #ffffff;
    background-color: #f89406;
    *background-color: #df8505;
}

.btn-warning:active,
.btn-warning.active {
    background-color: #c67605 \9;
}

.btn-danger {
    color: #ffffff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    background-color: #da4f49;
    *background-color: #bd362f;
    background-image: -moz-linear-gradient(top, #ee5f5b, #bd362f);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#bd362f));
    background-image: -webkit-linear-gradient(top, #ee5f5b, #bd362f);
    background-image: -o-linear-gradient(top, #ee5f5b, #bd362f);
    background-image: linear-gradient(to bottom, #ee5f5b, #bd362f);
    background-repeat: repeat-x;
    border-color: #bd362f #bd362f #802420;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffee5f5b', endColorstr='#ffbd362f', GradientType=0);
    filter: progid: DXImageTransform.Microsoft.gradient(enabled=false);
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger.active,
.btn-danger.disabled,
.btn-danger[disabled] {
    color: #ffffff;
    background-color: #bd362f;
    *background-color: #a9302a;
}

.btn-danger:active,
.btn-danger.active {
    background-color: #942a25 \9;
}

.btn-success {
    color: #ffffff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    background-color: #5bb75b;
    *background-color: #51a351;
    background-image: -moz-linear-gradient(top, #62c462, #51a351);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#51a351));
    background-image: -webkit-linear-gradient(top, #62c462, #51a351);
    background-image: -o-linear-gradient(top, #62c462, #51a351);
    background-image: linear-gradient(to bottom, #62c462, #51a351);
    background-repeat: repeat-x;
    border-color: #51a351 #51a351 #387038;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ff62c462', endColorstr='#ff51a351', GradientType=0);
    filter: progid: DXImageTransform.Microsoft.gradient(enabled=false);
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active,
.btn-success.disabled,
.btn-success[disabled] {
    color: #ffffff;
    background-color: #51a351;
    *background-color: #499249;
}

.btn-success:active,
.btn-success.active {
    background-color: #408140 \9;
}

.btn-info {
    color: #ffffff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    background-color: #49afcd;
    *background-color: #2f96b4;
    background-image: -moz-linear-gradient(top, #5bc0de, #2f96b4);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#2f96b4));
    background-image: -webkit-linear-gradient(top, #5bc0de, #2f96b4);
    background-image: -o-linear-gradient(top, #5bc0de, #2f96b4);
    background-image: linear-gradient(to bottom, #5bc0de, #2f96b4);
    background-repeat: repeat-x;
    border-color: #2f96b4 #2f96b4 #1f6377;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff2f96b4', GradientType=0);
    filter: progid: DXImageTransform.Microsoft.gradient(enabled=false);
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active,
.btn-info.disabled,
.btn-info[disabled] {
    color: #ffffff;
    background-color: #2f96b4;
    *background-color: #2a85a0;
}

.btn-info:active,
.btn-info.active {
    background-color: #24748c \9;
}

.btn-inverse {
    color: #ffffff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    background-color: #363636;
    *background-color: #222222;
    background-image: -moz-linear-gradient(top, #333333, #222222);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#333333), to(#222222));
    background-image: -webkit-linear-gradient(top, #333333, #222222);
    background-image: -o-linear-gradient(top, #333333, #222222);
    background-image: linear-gradient(to bottom, #333333, #222222);
    background-repeat: repeat-x;
    border-color: #000000 #000000 #000000 #000000;
    border-color: rgba(0, 0, 0, 1) rgba(0, 0, 0, 1) rgba(0, 0, 0, 1);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ff333333', endColorstr='#ff222222', GradientType=0);
    filter: progid: DXImageTransform.Microsoft.gradient(enabled=false);
}

.btn-inverse:hover,
.btn-inverse:focus,
.btn-inverse:active,
.btn-inverse.active,
.btn-inverse.disabled,
.btn-inverse[disabled] {
    color: #ffffff;
    background-color: #222222;
    *background-color: #151515;
}

.btn-inverse:active,
.btn-inverse.active {
    background-color: #080808 \9;
}

button.btn,
input[type="submit"].btn {
    *padding-top: 3px;
    *padding-bottom: 3px;
}

button.btn::-moz-focus-inner,
input[type="submit"].btn::-moz-focus-inner {
    padding: 0;
    border: 0;
}

button.btn.btn-large,
input[type="submit"].btn.btn-large {
    *padding-top: 7px;
    *padding-bottom: 7px;
}

button.btn.btn-small,
input[type="submit"].btn.btn-small {
    *padding-top: 3px;
    *padding-bottom: 3px;
}

button.btn.btn-mini,
input[type="submit"].btn.btn-mini {
    *padding-top: 1px;
    *padding-bottom: 1px;
}

.btn-link,
.btn-link:active,
.btn-link[disabled] {
    background-color: transparent;
    background-image: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.btn-link {
    color: #0088cc;
    cursor: pointer;
    border-color: transparent;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}

.btn-link:hover,
.btn-link:focus {
    color: #005580;
    text-decoration: underline;
    background-color: transparent;
}

.btn-link[disabled]:hover,
.btn-link[disabled]:focus {
    color: #333333;
    text-decoration: none;
}

.btn-group {
    position: relative;
    display: inline-block;
    *display: inline;
    *margin-left: .3em;
    font-size: 0;
    white-space: nowrap;
    vertical-align: middle;
    *zoom: 1;
}

.btn-group:first-child {
    *margin-left: 0;
}

.btn-group + .btn-group {
    margin-left: 5px;
}

.btn-toolbar {
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 0;
}

.btn-toolbar > .btn + .btn,
.btn-toolbar > .btn-group + .btn,
.btn-toolbar > .btn + .btn-group {
    margin-left: 5px;
}

.btn-group > .btn {
    position: relative;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}

.btn-group > .btn + .btn {
    margin-left: -1px;
}

.btn-group > .btn,
.btn-group > .dropdown-menu,
.btn-group > .popover {
    border: 1px rgb(10, 10, 10) solid;
    font-size: 12px;
}

.btn-group > .btn-mini {
    font-size: 10.5px;
}

.btn-group > .btn-small {
    font-size: 11.9px;
}

.btn-group > .btn-large {
    font-size: 17.5px;
}

.btn-group > .btn:first-child {
    margin-left: 0;
    -webkit-border-bottom-left-radius: 0px;
    border-bottom-left-radius: 0px;
    -webkit-border-top-left-radius: 0px;
    border-top-left-radius: 0px;
    -moz-border-radius-bottomleft: 0px;
    -moz-border-radius-topleft: 0px;
}

.btn-group > .btn:last-child,
.btn-group > .dropdown-toggle {
    -webkit-border-top-right-radius: 0px;
    border-top-right-radius: 0px;
    -webkit-border-bottom-right-radius: 0px;
    border-bottom-right-radius: 0px;
    -moz-border-radius-topright: 0px;
    -moz-border-radius-bottomright: 0px;
}

.btn-group > .btn.large:first-child {
    margin-left: 0;
    -webkit-border-bottom-left-radius: 6px;
    border-bottom-left-radius: 6px;
    -webkit-border-top-left-radius: 6px;
    border-top-left-radius: 6px;
    -moz-border-radius-bottomleft: 6px;
    -moz-border-radius-topleft: 6px;
}

.btn-group > .btn.large:last-child,
.btn-group > .large.dropdown-toggle {
    -webkit-border-top-right-radius: 6px;
    border-top-right-radius: 6px;
    -webkit-border-bottom-right-radius: 6px;
    border-bottom-right-radius: 6px;
    -moz-border-radius-topright: 6px;
    -moz-border-radius-bottomright: 6px;
}

.btn-group > .btn:hover,
.btn-group > .btn:focus,
.btn-group > .btn:active,
.btn-group > .btn.active {
    z-index: 2;
    outline: 0px !important;
}

.btn-group .dropdown-toggle:active,
.btn-group.open .dropdown-toggle {
    outline: 0;
}

.btn-group > .btn + .dropdown-toggle {
    *padding-top: 5px;
    padding-right: 8px;
    *padding-bottom: 5px;
    padding-left: 8px;
    -webkit-box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}

.btn-group > .btn-mini + .dropdown-toggle {
    *padding-top: 2px;
    padding-right: 5px;
    *padding-bottom: 2px;
    padding-left: 5px;
}

.btn-group > .btn-small + .dropdown-toggle {
    *padding-top: 5px;
    *padding-bottom: 4px;
}

.btn-group > .btn-large + .dropdown-toggle {
    *padding-top: 7px;
    padding-right: 12px;
    *padding-bottom: 7px;
    padding-left: 12px;
}

.btn-group.open .dropdown-toggle {
    background-image: none;
    -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}

.btn-group.open .btn.dropdown-toggle {
    background-color: #e6e6e6;
}

.btn-group.open .btn-primary.dropdown-toggle {
    background-color: #0044cc;
}

.btn-group.open .btn-warning.dropdown-toggle {
    background-color: #f89406;
}

.btn-group.open .btn-danger.dropdown-toggle {
    background-color: #bd362f;
}

.btn-group.open .btn-success.dropdown-toggle {
    background-color: #51a351;
}

.btn-group.open .btn-info.dropdown-toggle {
    background-color: #2f96b4;
}

.btn-group.open .btn-inverse.dropdown-toggle {
    background-color: #222222;
}

.btn .caret {
    margin-top: 8px;
    margin-left: 0;
}

.btn-large .caret {
    margin-top: 6px;
}

.btn-large .caret {
    border-top-width: 5px;
    border-right-width: 5px;
    border-left-width: 5px;
}

.btn-mini .caret,
.btn-small .caret {
    margin-top: 8px;
}

.dropup .btn-large .caret {
    border-bottom-width: 5px;
}

.btn-primary .caret,
.btn-warning .caret,
.btn-danger .caret,
.btn-info .caret,
.btn-success .caret,
.btn-inverse .caret {
    border-top-color: #ffffff;
    border-bottom-color: #ffffff;
}

.btn-group-vertical {
    display: inline-block;
    *display: inline;
    *zoom: 1;
}

.btn-group-vertical > .btn {
    display: block;
    float: none;
    max-width: 100%;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}

.btn-group-vertical > .btn + .btn {
    margin-top: -1px;
    margin-left: 0;
}

.btn-group-vertical > .btn:first-child {
    -webkit-border-radius: 4px 4px 0 0;
    -moz-border-radius: 4px 4px 0 0;
    border-radius: 4px 4px 0 0;
}

.btn-group-vertical > .btn:last-child {
    -webkit-border-radius: 0 0 4px 4px;
    -moz-border-radius: 0 0 4px 4px;
    border-radius: 0 0 4px 4px;
}

.btn-group-vertical > .btn-large:first-child {
    -webkit-border-radius: 6px 6px 0 0;
    -moz-border-radius: 6px 6px 0 0;
    border-radius: 6px 6px 0 0;
}

.btn-group-vertical > .btn-large:last-child {
    -webkit-border-radius: 0 0 6px 6px;
    -moz-border-radius: 0 0 6px 6px;
    border-radius: 0 0 6px 6px;
}

.span12 {
    width: 940px;
}

.span11 {
    width: 860px;
}

.span10 {
    width: 780px;
}

.span9 {
    width: 700px;
}

.span8 {
    width: 620px;
}

.span7 {
    width: 540px;
}

.span6 {
    width: 460px;
}

.span5 {
    width: 380px;
}

.span4 {
    width: 300px;
}

.span3 {
    width: 220px;
}

.span2 {
    width: 140px;
}

.span1 {
    width: 60px;
}

.spanselect {
    width: 146px;
}
/* end of bootstrap */

@font-face {
    font-family: 'Glyphicons Halflings';
    src: url('http://cdn.bootcss.com/bootstrap/3.1.1/fonts/glyphicons-halflings-regular.eot');
    src: url('http://cdn.bootcss.com/bootstrap/3.1.1/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('http://cdn.bootcss.com/bootstrap/3.1.1/fonts/glyphicons-halflings-regular.woff') format('woff'), url('http://cdn.bootcss.com/bootstrap/3.1.1/fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('http://cdn.bootcss.com/bootstrap/3.1.1/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

.glyphicon {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.glyphicon-asterisk:before {
    content: "\2a";
}

.glyphicon-plus:before {
    content: "\2b";
}

.glyphicon-euro:before {
    content: "\20ac";
}

.glyphicon-minus:before {
    content: "\2212";
}

.glyphicon-cloud:before {
    content: "\2601";
}

.glyphicon-envelope:before {
    content: "\2709";
}

.glyphicon-pencil:before {
    content: "\270f";
}

.glyphicon-glass:before {
    content: "\e001";
}

.glyphicon-music:before {
    content: "\e002";
}

.glyphicon-search:before {
    content: "\e003";
}

.glyphicon-heart:before {
    content: "\e005";
}

.glyphicon-star:before {
    content: "\e006";
}

.glyphicon-star-empty:before {
    content: "\e007";
}

.glyphicon-user:before {
    content: "\e008";
}

.glyphicon-film:before {
    content: "\e009";
}

.glyphicon-th-large:before {
    content: "\e010";
}

.glyphicon-th:before {
    content: "\e011";
}

.glyphicon-th-list:before {
    content: "\e012";
}

.glyphicon-ok:before {
    content: "\e013";
}

.glyphicon-remove:before {
    content: "\e014";
}

.glyphicon-zoom-in:before {
    content: "\e015";
}

.glyphicon-zoom-out:before {
    content: "\e016";
}

.glyphicon-off:before {
    content: "\e017";
}

.glyphicon-signal:before {
    content: "\e018";
}

.glyphicon-cog:before {
    content: "\e019";
}

.glyphicon-trash:before {
    content: "\e020";
}

.glyphicon-home:before {
    content: "\e021";
}

.glyphicon-file:before {
    content: "\e022";
}

.glyphicon-time:before {
    content: "\e023";
}

.glyphicon-road:before {
    content: "\e024";
}

.glyphicon-download-alt:before {
    content: "\e025";
}

.glyphicon-download:before {
    content: "\e026";
}

.glyphicon-upload:before {
    content: "\e027";
}

.glyphicon-inbox:before {
    content: "\e028";
}

.glyphicon-play-circle:before {
    content: "\e029";
}

.glyphicon-repeat:before {
    content: "\e030";
}

.glyphicon-refresh:before {
    content: "\e031";
}

.glyphicon-list-alt:before {
    content: "\e032";
}

.glyphicon-lock:before {
    content: "\e033";
}

.glyphicon-flag:before {
    content: "\e034";
}

.glyphicon-headphones:before {
    content: "\e035";
}

.glyphicon-volume-off:before {
    content: "\e036";
}

.glyphicon-volume-down:before {
    content: "\e037";
}

.glyphicon-volume-up:before {
    content: "\e038";
}

.glyphicon-qrcode:before {
    content: "\e039";
}

.glyphicon-barcode:before {
    content: "\e040";
}

.glyphicon-tag:before {
    content: "\e041";
}

.glyphicon-tags:before {
    content: "\e042";
}

.glyphicon-book:before {
    content: "\e043";
}

.glyphicon-bookmark:before {
    content: "\e044";
}

.glyphicon-print:before {
    content: "\e045";
}

.glyphicon-camera:before {
    content: "\e046";
}

.glyphicon-font:before {
    content: "\e047";
}

.glyphicon-bold:before {
    content: "\e048";
}

.glyphicon-italic:before {
    content: "\e049";
}

.glyphicon-text-height:before {
    content: "\e050";
}

.glyphicon-text-width:before {
    content: "\e051";
}

.glyphicon-align-left:before {
    content: "\e052";
}

.glyphicon-align-center:before {
    content: "\e053";
}

.glyphicon-align-right:before {
    content: "\e054";
}

.glyphicon-align-justify:before {
    content: "\e055";
}

.glyphicon-list:before {
    content: "\e056";
}

.glyphicon-indent-left:before {
    content: "\e057";
}

.glyphicon-indent-right:before {
    content: "\e058";
}

.glyphicon-facetime-video:before {
    content: "\e059";
}

.glyphicon-picture:before {
    content: "\e060";
}

.glyphicon-map-marker:before {
    content: "\e062";
}

.glyphicon-adjust:before {
    content: "\e063";
}

.glyphicon-tint:before {
    content: "\e064";
}

.glyphicon-edit:before {
    content: "\e065";
}

.glyphicon-share:before {
    content: "\e066";
}

.glyphicon-check:before {
    content: "\e067";
}

.glyphicon-move:before {
    content: "\e068";
}

.glyphicon-step-backward:before {
    content: "\e069";
}

.glyphicon-fast-backward:before {
    content: "\e070";
}

.glyphicon-backward:before {
    content: "\e071";
}

.glyphicon-play:before {
    content: "\e072";
}

.glyphicon-pause:before {
    content: "\e073";
}

.glyphicon-stop:before {
    content: "\e074";
}

.glyphicon-forward:before {
    content: "\e075";
}

.glyphicon-fast-forward:before {
    content: "\e076";
}

.glyphicon-step-forward:before {
    content: "\e077";
}

.glyphicon-eject:before {
    content: "\e078";
}

.glyphicon-chevron-left:before {
    content: "\e079";
}

.glyphicon-chevron-right:before {
    content: "\e080";
}

.glyphicon-plus-sign:before {
    content: "\e081";
}

.glyphicon-minus-sign:before {
    content: "\e082";
}

.glyphicon-remove-sign:before {
    content: "\e083";
}

.glyphicon-ok-sign:before {
    content: "\e084";
}

.glyphicon-question-sign:before {
    content: "\e085";
}

.glyphicon-info-sign:before {
    content: "\e086";
}

.glyphicon-screenshot:before {
    content: "\e087";
}

.glyphicon-remove-circle:before {
    content: "\e088";
}

.glyphicon-ok-circle:before {
    content: "\e089";
}

.glyphicon-ban-circle:before {
    content: "\e090";
}

.glyphicon-arrow-left:before {
    content: "\e091";
}

.glyphicon-arrow-right:before {
    content: "\e092";
}

.glyphicon-arrow-up:before {
    content: "\e093";
}

.glyphicon-arrow-down:before {
    content: "\e094";
}

.glyphicon-share-alt:before {
    content: "\e095";
}

.glyphicon-resize-full:before {
    content: "\e096";
}

.glyphicon-resize-small:before {
    content: "\e097";
}

.glyphicon-exclamation-sign:before {
    content: "\e101";
}

.glyphicon-gift:before {
    content: "\e102";
}

.glyphicon-leaf:before {
    content: "\e103";
}

.glyphicon-fire:before {
    content: "\e104";
}

.glyphicon-eye-open:before {
    content: "\e105";
}

.glyphicon-eye-close:before {
    content: "\e106";
}

.glyphicon-warning-sign:before {
    content: "\e107";
}

.glyphicon-plane:before {
    content: "\e108";
}

.glyphicon-calendar:before {
    content: "\e109";
}

.glyphicon-random:before {
    content: "\e110";
}

.glyphicon-comment:before {
    content: "\e111";
}

.glyphicon-magnet:before {
    content: "\e112";
}

.glyphicon-chevron-up:before {
    content: "\e113";
}

.glyphicon-chevron-down:before {
    content: "\e114";
}

.glyphicon-retweet:before {
    content: "\e115";
}

.glyphicon-shopping-cart:before {
    content: "\e116";
}

.glyphicon-folder-close:before {
    content: "\e117";
}

.glyphicon-folder-open:before {
    content: "\e118";
}

.glyphicon-resize-vertical:before {
    content: "\e119";
}

.glyphicon-resize-horizontal:before {
    content: "\e120";
}

.glyphicon-hdd:before {
    content: "\e121";
}

.glyphicon-bullhorn:before {
    content: "\e122";
}

.glyphicon-bell:before {
    content: "\e123";
}

.glyphicon-certificate:before {
    content: "\e124";
}

.glyphicon-thumbs-up:before {
    content: "\e125";
}

.glyphicon-thumbs-down:before {
    content: "\e126";
}

.glyphicon-hand-right:before {
    content: "\e127";
}

.glyphicon-hand-left:before {
    content: "\e128";
}

.glyphicon-hand-up:before {
    content: "\e129";
}

.glyphicon-hand-down:before {
    content: "\e130";
}

.glyphicon-circle-arrow-right:before {
    content: "\e131";
}

.glyphicon-circle-arrow-left:before {
    content: "\e132";
}

.glyphicon-circle-arrow-up:before {
    content: "\e133";
}

.glyphicon-circle-arrow-down:before {
    content: "\e134";
}

.glyphicon-globe:before {
    content: "\e135";
}

.glyphicon-wrench:before {
    content: "\e136";
}

.glyphicon-tasks:before {
    content: "\e137";
}

.glyphicon-filter:before {
    content: "\e138";
}

.glyphicon-briefcase:before {
    content: "\e139";
}

.glyphicon-fullscreen:before {
    content: "\e140";
}

.glyphicon-dashboard:before {
    content: "\e141";
}

.glyphicon-paperclip:before {
    content: "\e142";
}

.glyphicon-heart-empty:before {
    content: "\e143";
}

.glyphicon-link:before {
    content: "\e144";
}

.glyphicon-phone:before {
    content: "\e145";
}

.glyphicon-pushpin:before {
    content: "\e146";
}

.glyphicon-usd:before {
    content: "\e148";
}

.glyphicon-gbp:before {
    content: "\e149";
}

.glyphicon-sort:before {
    content: "\e150";
}

.glyphicon-sort-by-alphabet:before {
    content: "\e151";
}

.glyphicon-sort-by-alphabet-alt:before {
    content: "\e152";
}

.glyphicon-sort-by-order:before {
    content: "\e153";
}

.glyphicon-sort-by-order-alt:before {
    content: "\e154";
}

.glyphicon-sort-by-attributes:before {
    content: "\e155";
}

.glyphicon-sort-by-attributes-alt:before {
    content: "\e156";
}

.glyphicon-unchecked:before {
    content: "\e157";
}

.glyphicon-expand:before {
    content: "\e158";
}

.glyphicon-collapse-down:before {
    content: "\e159";
}

.glyphicon-collapse-up:before {
    content: "\e160";
}

.glyphicon-log-in:before {
    content: "\e161";
}

.glyphicon-flash:before {
    content: "\e162";
}

.glyphicon-log-out:before {
    content: "\e163";
}

.glyphicon-new-window:before {
    content: "\e164";
}

.glyphicon-record:before {
    content: "\e165";
}

.glyphicon-save:before {
    content: "\e166";
}

.glyphicon-open:before {
    content: "\e167";
}

.glyphicon-saved:before {
    content: "\e168";
}

.glyphicon-import:before {
    content: "\e169";
}

.glyphicon-export:before {
    content: "\e170";
}

.glyphicon-send:before {
    content: "\e171";
}

.glyphicon-floppy-disk:before {
    content: "\e172";
}

.glyphicon-floppy-saved:before {
    content: "\e173";
}

.glyphicon-floppy-remove:before {
    content: "\e174";
}

.glyphicon-floppy-save:before {
    content: "\e175";
}

.glyphicon-floppy-open:before {
    content: "\e176";
}

.glyphicon-credit-card:before {
    content: "\e177";
}

.glyphicon-transfer:before {
    content: "\e178";
}

.glyphicon-cutlery:before {
    content: "\e179";
}

.glyphicon-header:before {
    content: "\e180";
}

.glyphicon-compressed:before {
    content: "\e181";
}

.glyphicon-earphone:before {
    content: "\e182";
}

.glyphicon-phone-alt:before {
    content: "\e183";
}

.glyphicon-tower:before {
    content: "\e184";
}

.glyphicon-stats:before {
    content: "\e185";
}

.glyphicon-sd-video:before {
    content: "\e186";
}

.glyphicon-hd-video:before {
    content: "\e187";
}

.glyphicon-subtitles:before {
    content: "\e188";
}

.glyphicon-sound-stereo:before {
    content: "\e189";
}

.glyphicon-sound-dolby:before {
    content: "\e190";
}

.glyphicon-sound-5-1:before {
    content: "\e191";
}

.glyphicon-sound-6-1:before {
    content: "\e192";
}

.glyphicon-sound-7-1:before {
    content: "\e193";
}

.glyphicon-copyright-mark:before {
    content: "\e194";
}

.glyphicon-registration-mark:before {
    content: "\e195";
}

.glyphicon-cloud-download:before {
    content: "\e197";
}

.glyphicon-cloud-upload:before {
    content: "\e198";
}

.glyphicon-tree-conifer:before {
    content: "\e199";
}

.glyphicon-tree-deciduous:before {
    content: "\e200";
}
/* Interaction states
----------------------------------*/

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
    border: 1px solid #d3d3d3;
    background-color: #e6e6e6;
    font-weight: normal;
    color: #555555;
}

.ui-slider {
    position: relative;
    text-align: left;
}

.ui-slider .ui-slider-handle {
    position: absolute;
    z-index: 2;
    width: 7px;
    height: 10px;
    cursor: default;
    -ms-touch-action: none;
    touch-action: none;
}

.ui-slider .ui-slider-range {
    position: absolute;
    z-index: 1;
    font-size: .7em;
    display: block;
    border: 0;
    background-position: 0 0;
}
/* support: IE8 - See #6727 */

.ui-slider.ui-state-disabled .ui-slider-handle,
.ui-slider.ui-state-disabled .ui-slider-range {
    filter: inherit;
}

.ui-slider-horizontal {
    height: 5px;
}

.ui-slider-horizontal .ui-slider-handle {
    top: -.3em;
    margin-left: -.6em;
}

.ui-slider-horizontal .ui-slider-range {
    top: 0;
    height: 100%;
}

.ui-slider-horizontal .ui-slider-range-min {
    left: 0;
}

.ui-slider-horizontal .ui-slider-range-max {
    right: 0;
}

.ui-slider-vertical {
    width: .8em;
    height: 100px;
}

.ui-slider-vertical .ui-slider-handle {
    left: -.3em;
    margin-left: 0;
    margin-bottom: -.6em;
}

.ui-slider-vertical .ui-slider-range {
    left: 0;
    width: 100%;
}

.ui-slider-vertical .ui-slider-range-min {
    bottom: 0;
}

.ui-slider-vertical .ui-slider-range-max {
    top: 0;
}

.ui-sortable-handle {
    -ms-touch-action: none;
    touch-action: none;
}

.ui-spinner {
    position: relative;
    display: inline-block;
    overflow: hidden;
    padding: 0;
    vertical-align: middle;
}

.ui-spinner-input {
    border: none;
    background: none;
    color: inherit;
    padding: 0;
    margin: .2em 0;
    vertical-align: middle;
    margin-left: .4em;
    margin-right: 22px;
}

.ui-spinner-button {
    width: 16px;
    height: 50%;
    font-size: .5em;
    padding: 0;
    margin: 0;
    text-align: center;
    position: absolute;
    cursor: default;
    display: block;
    overflow: hidden;
    right: 0;
}
/* more specificity required here to override default borders */

.ui-spinner a.ui-spinner-button {
    border-top: none;
    border-bottom: none;
    border-right: none;
}
/* vertically center icon */

.ui-spinner .ui-icon {
    position: absolute;
    margin-top: -8px;
    top: 50%;
    left: 0;
}

.ui-spinner-up {
    top: 0;
}

.ui-spinner-down {
    bottom: 0;
}
/* Component containers
----------------------------------*/

.ui-widget {
    font-family: Verdana, Arial, sans-serif;
    font-size: 1.1em;
}

.ui-widget .ui-widget {
    font-size: 1em;
}

.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
    font-family: Verdana, Arial, sans-serif;
    font-size: 1em;
}

.ui-widget-content {
    border: 0px solid #aaaaaa;
    background: rgb(61, 61, 61);
    color: #222222;
}

.ui-widget-content a {
    color: #222222;
}

.ui-widget-header {
    border: 1px solid #aaaaaa;
    background-color: #cccccc;
    color: #222222;
    font-weight: bold;
}

.ui-widget-header a {
    color: #222222;
}

.hero-stats {
    margin: 5px;
    width: 70px;
    float: left;
    height: 40px;
    line-height: 20px;
    border: 1px solid rgb(45, 45, 45);
    text-align: center;
    background-color: rgb(23, 23, 23);
}

.live-nav {
    width: 150px;
    height: 50px;
    background-color: #252525;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    line-height: 50px;
    text-align: center;
    margin-right: 20px;
    float: left;
    cursor: pointer;
}

.live-nav-focus {
    background-color: #151515;
}

.live-nav:focus,
.live-nav:hover {
    background-color: #151515;
    cursor: pointer;
}

.damage-bar {
    border-top: 12px rgb(143, 44, 50) solid;
    border-right: 5px transparent solid;
    -webkit-transition: width 300ms;
    -moz-transition: width 300ms;
    -ms-transition: width 300ms;
    -o-transition: width 300ms;
    transition: width 300ms
}

.v-separator {
    margin: 5px 0px;
    background: rgba(155, 155, 155, .4);
    width: 1px;
    height: 30px
}

.ribbon {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    background-color: #a00;
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.15)));
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
    background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
    background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
    background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
    -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.5);
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.5);
    font: 700 13px "Helvetica Neue", Helvetica, Arial, sans-serif;
    z-index: 9999;
    pointer-events: auto;
}

.blur {
    filter: progid: DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false);
    -webkit-filter: blur(10px);
    -moz-filter: blur(10px);
    -o-filter: blur(10px);
    -ms-filter: blur(10px);
    filter: blur(10px);
}


.breath {
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
    -webkit-animation-name: breath;
    -webkit-animation-duration: 8s;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes 'breath' {
    from {
        filter: alpha(opacity=1);
        -moz-opacity: 0.01;
        opacity: 0.01;
    }
    30% {
        filter: alpha(opacity=50);
        -moz-opacity: 0.5;
        opacity: 0.5;
    }
    70% {
        filter: alpha(opacity=50);
        -moz-opacity: 0.5;
        opacity: 0.5;
    }
    to {
        filter: alpha(opacity=1);
        -moz-opacity: 0.01;
        opacity: 0.01;
    }
}


@-moz-keyframes fullexpand {
    0% {
        width: 0px;
    }
    15% {
        width: 90%;
    }
    100% {
        width: 100%;
    }
}

@-webkit-keyframes fullexpand {
    0% {
        width: 0px;
    }
    15% {
        width: 90%;
    }
    100% {
        width: 100%;
    }
}



.left-select {
    width: 110px;
    height: 50px;
    border-left: 4px solid rgb(38, 38, 38);
    background: -webkit-linear-gradient(left, rgba(28, 28, 28, 1) 0%, rgba(18, 18, 18, 0) 100%);
    background: -moz-linear-gradient(left, rgba(28, 28, 28, 1) 0%, rgba(18, 18, 18, 0) 100%);
    background: -webkit-gradient(left, rgba(28, 28, 28, 1) 0%, rgba(18, 18, 18, 0) 100%);
    background: -o-linear-gradient(left, rgba(28, 28, 28, 1) 0%, rgba(18, 18, 18, 0) 100%);
    background: -ms-linear-gradient(left, rgba(28, 28, 28, 1) 0%, rgba(18, 18, 18, 0) 100%);
    background: linear-gradient(left, rgba(28, 28, 28, 1) 0%, rgba(18, 18, 18, 0) 100%);
    line-height: 50px;
    padding-left: 10px;
    margin-bottom: 2px;
    margin-left: -2px;
    color:#444;
    cursor: pointer;
     -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}


.left-select:hover, .left-select:focus {
    color:#ccc;
    border-left: 4px solid rgb(180, 180, 180);
    background: -webkit-linear-gradient(left, rgba(50, 50, 50, 1) 0%, rgba(18, 18, 18, 0) 100%);
    background: -moz-linear-gradient(left, rgba(50, 50, 50, 1) 0%, rgba(18, 18, 18, 0) 100%);
    background: -webkit-gradient(left, rgba(50, 50, 50, 1) 0%, rgba(18, 18, 18, 0) 100%);
    background: -o-linear-gradient(left, rgba(50, 50, 50, 1) 0%, rgba(18, 18, 18, 0) 100%);
    background: -ms-linear-gradient(left, rgba(50, 50, 50, 1) 0%, rgba(18, 18, 18, 0) 100%);
    background: linear-gradient(left, rgba(50, 50, 50, 1) 0%, rgba(18, 18, 18, 0) 100%);

}

.left-select-active {
    width: 110px;
    height: 50px;
    background-color: #000;
    border-left: 4px solid rgb(180, 180, 180);
    background: -webkit-linear-gradient(left, rgba(50, 50, 50, 1) 0%, rgba(18, 18, 18, 0) 100%);
    background: -moz-linear-gradient(left, rgba(50, 50, 50, 1) 0%, rgba(18, 18, 18, 0) 100%);
    background: -webkit-gradient(left, rgba(50, 50, 50, 1) 0%, rgba(18, 18, 18, 0) 100%);
    background: -o-linear-gradient(left, rgba(50, 50, 50, 1) 0%, rgba(18, 18, 18, 0) 100%);
    background: -ms-linear-gradient(left, rgba(50, 50, 50, 1) 0%, rgba(18, 18, 18, 0) 100%);
    background: linear-gradient(left, rgba(50, 50, 50, 1) 0%, rgba(18, 18, 18, 0) 100%);
    line-height: 50px;
    padding-left: 10px;
    margin-bottom: 2px;
    margin-left: -2px;
    color: #ccc
}

.radar-num {
    color: #aaa;
    margin: 0px auto 3px auto;
    width: 75px;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
}

/* ghost 20160201 */
.vip_icon {
    position: relative;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
}
.vip_icon_2 {
    position: absolute;
    bottom: -18px;
    right: 0px;
    width: 14px;
    height: 14px;
}