/**
 * game module stylesheet file
 *
 * @author Zhang Jinlong <zhangjinlong@pwrd.com>
 * @link http://www.mk-style.com
 * @copyright Copyright &copy; 2013 C&C Media
 */

.game .tab-header ul li.active a {
    background-color: #666666;
}

.game .tab-header ul li.active span {
    border-top-color: #666666;
}

.game .tab-content {
    padding: 60px 0 80px 0;
}

.tab-content > ul > li {
    position: relative;
    border-top: 1px solid #CCCCCC;
}

.tab-content > ul > li:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: 0;
}

.tab-content a.cover,
.tab-content span.type,
.tab-content span.equipment,
.tab-content a.arrow-top,
.tab-content a.arrow-bottom {
    display: block;
}

.tab-content a.cover {
    position: relative;
    padding-right: 20px;
}

.tab-content a.title {    /* Set a.title as a block element will trigger some problems, so we set its block property as "inline-block" */
    display: inline-block;
}

.tab-content a.cover img {
    display: block;
    padding: 1px;
    width: 108px;
    height: 108px;
    border: 1px solid #DDDDDD;
}

.tab-content a.cover em {
    position: absolute;
    left: 1px;
    bottom: 1px;
    display: block;
    width: 108px;
    height: 24px;
    line-height: 24px;
    font-style: normal;
    background: red;
    color: white;
    text-align: center;
    font-size: 0.86em;
    border: 1px solid white;
}

.tab-content a.cover img#maskImg {
    position: absolute;
    border:0;
    top:1px;;
    left: 1px;;
    display: block;
    width: 108px;
    height: 108px;
}

.tab-content .title {
    margin-bottom: 10px;
    font-weight: bold;
}

.tab-content .openId {
	font-size: 0.86em;
    color: red;
}

.tab-content .type,
.tab-content .equipment {
    font-size: 0.86em;
    color: #666;
}

.tab-content .label-container {
    padding-top: 20px;
}

.tab-content .label-container span {
    width: 72px;
    color: #FF6600;
    text-align: center;
    background: white;
    border: 1px solid #FF9900;
    border-radius: 4px;
    text-shadow: none;
}

.tab-content p.desc {
    clear: both;
    color: #666666;
    font-size: 0.93em;
}


/**
 * PC游戏
 */
#game-pc > ul > li {
    margin-top: 45px;
    padding: 50px 0 0 40px;
}

#game-pc  a.mk-icon-ok {
	cursor:default;
	margin-left:8px;
}

#game-pc  a#addShortcut {
	margin-left:4px;
}

#game-pc  a#addShortcut:hover {
	cursor:pointer;
}

#game-pc p.desc {
    margin: 0;
    padding: 20px 0;
    width: 340px;
}

#game-pc .notice {
    margin: 0 0 14px;
}

#game-pc .notice a.news {
    color: #666;
    font-size: 0.93em;
}

#game-pc .notice a.news:hover {
    color: #ff8800;
    text-decoration: underline;
}

#game-pc .notice .label {
    margin-left: 14px;
    padding-left: 6px;
    padding-right: 6px;
    color: white;
    background: #444444;
    border-radius: 4px;
    font-size: 10px;
}

#game-pc ul.action li {
    float: left;
}

#game-pc ul.action li a {
    display: block;
    width: 124px;
    height: 36px;
    line-height: 36px;
    font-weight: bold;
    color: #333333;
    text-align: center;
    border: 1px solid #C6C6C6;
    border-left: 0;
    background-color: #CCCCCC;
    background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#DCDCDC), to(#CCCCCC));
    background-image: -moz-linear-gradient(top, #DCDCDC, #CCCCCC);
    background-image: -o-linear-gradient(top, #DCDCDC, #CCCCCC);
    background-image: linear-gradient(to bottom, #DCDCDC, #CCCCCC);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#DCDCDC,endcolorstr=#CCCCCC,gradientType=0);
    -ms-filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#DCDCDC,endcolorstr=#CCCCCC,gradientType=0);
}

#game-pc ul.action li a:hover {
    background: #CFCFCF;
    filter: none;
}

#game-pc ul.action li:first-child a {
    border-left: 1px solid #c6c6c6;
}

#game-pc ul.action li a.btn-gradient-orange {
    border-color: #cc5500;
    border-left: 1px solid #cc5500;
    color: white;
    background-color: #DD5500;
    background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#FF9900), to(#DD5500));
    background-image: -moz-linear-gradient(top, #FF9900, #DD5500);
    background-image: -o-linear-gradient(top, #FF9900, #DD5500);
    background-image: linear-gradient(to bottom, #FF9900, #DD5500);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#FF9900,endcolorstr=#DD5500,gradientType=0);
    -ms-filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#FF9900,endcolorstr=#DD5500,gradientType=0);
}

#game-pc ul.action li a.btn-gradient-orange:hover {
    background: #EE7700;
    filter: none;
}

#game-pc ul.action li a.btn-gradient-blue {
    border-color: #3333FF;
    border-left: 1px solid #3333FF;
    color: white;
    background-color: #3364FF;
    background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#3364FF), to(#3334FF));
    background-image: -moz-linear-gradient(top, #3364FF, #3334FF);
    background-image: -o-linear-gradient(top, #3364FF, #3334FF);
    background-image: linear-gradient(to bottom, #3364FF, #3334FF);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#3364FF,endcolorstr=#3334FF,gradientType=0);
    -ms-filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#3364FF,endcolorstr=#3334FF,gradientType=0);
}

#game-pc ul.action li a.btn-gradient-blue:hover {
    background: #334BFF;
    filter: none;
}

#game-pc ul.action li a.btn-gradient-gray {
    color: #CCCCCC;
    border-color: #444444;
    border-left: 1px solid #444444;
    color: white;
    cursor: not-allowed;
    background-color: #343434;
    background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#646464), to(#343434));
    background-image: -moz-linear-gradient(top, #646464, #343434);
    background-image: -o-linear-gradient(top, #646464, #343434);
    background-image: linear-gradient(to bottom, #646464, #343434);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#646464,endcolorstr=#343434,gradientType=0);
    -ms-filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#646464,endcolorstr=#343434,gradientType=0);
}

#game-pc .video {
    position: absolute;
    bottom: 60px;
    right: 0;
    width: 84px;
    padding: 10px 26px 10px 30px;
    text-align: center;
    border-left: 1px solid #E6E6E6;
}

#game-pc .video ul {
    margin: 14px 0;
    width: 90px;
    height: 111px;
    overflow: hidden;
}

#game-pc .video ul li {
    display: none;
    margin-bottom: 6px;
    line-height: 0;
}

#game-pc .video ul li.active {
    display: block;
}

#game-pc .video ul li a {
    display: block;
}

#game-pc .video ul li a img {
    width: 87px;
    height: 53px;
}

#game-pc .video a[class^="arrow"] {
    display: block;
    margin: 0 auto;    /* We must set the width of div.video because of a bug in IE7 */
    width: 0;
    height: 0;
    text-indent: -1000em;
    border: 8px solid #333333;
}

#game-pc .video a.arrow-top {
    margin-bottom: 0;
    border-color: transparent transparent #333 transparent;
}

#game-pc .video a.arrow-bottom {
    border-color: #333 transparent transparent transparent;
}

#game-effective {
	text-align: center;
}

#game-effective div.title{
	padding-bottom: 20px;	
}


/**
 * 手机游戏
 */
#game-mobile > ul > li {
    margin-top: 35px;
    padding: 50px 0 0 40px;
}

#game-mobile p.desc {
    margin: 30px 30px 0 0;
}

#game-mobile .download {
    position: absolute;
    bottom: 105px;
    right: 0;
}

#game-mobile .download li {
    float: left;
    margin-left: 10px;
    border: 1px solid #CC5500;
    border-radius: 4px;
}

#game-mobile .download a {
    display: block;
    padding: 8px 6px 12px 40px;
    width: 74px;
    height: 30px;
    line-height: 16px;
    font-size: 0.93em;
    color: white;
    word-wrap: break-word;
    background: transparent url('../../images/google_play_logo.png') no-repeat 4px center;
}

#game-mobile .download li:first-child a {
    background-image: url('../../images/apple_logo.png');
}

#password-change-info .tab-content {
    margin: 30px 0 60px;
}

#password-info p {
	text-align: center;
}	

#password-info .tip {
    margin: 40px 0 0;
    font-size: 0.95em;
}

#password-info .btn-submit[type="submit"],
#password-info .btn-reset[type="submit"] {
	margin-right: 6px;
    width: 165px;
    height: 35px;
    line-height: 35px;
    padding: 0 30px;
}

.game-active .error {
    color: red;
}

#account-rules .tab-content {
    margin: 30px 0 60px;
}

#account-rules p {
	text-align: center;
}	

#account-rules .tip {
    margin: 40px 0 0;
    font-size: 0.95em;
}

#account-rules .btn-submit[type="submit"],
#account-rules .btn-reset[type="submit"] {
	margin-right: 6px;
    width: 165px;
    height: 35px;
    line-height: 35px;
    padding: 0 30px;
}


/**
 * Responsive css start
 */
@media (max-width: 768px) {
    .tab-content a.cover {
        padding-right: 14px;
    }

    /**
     * 手机游戏
     */
    #game-pc {
        padding: 30px 0 40px;
    }

    #game-pc > ul > li {
        margin-top: 30px;
        padding: 30px 0 0 0;
    }

    #game-pc li .label-container span.label {
        width: auto;
        padding: 0 10px;
        line-height: 20px;
        font-weight: normal;
    }

    #game-pc .notice {
        margin-top: 0;
    }

    #game-pc li p.desc {
        margin: 20px 0 0;
        padding: 0;
        width: 100%;
    }

    #game-pc .action li {
        width: 50%;
    }

    #game-pc .action li.last {
        display: none;
    }
    
    #game-pc  a#addShortcut {
		display: none;
	}

    #game-pc ul.action li a {
        width: auto;
    }

    #game-pc .video {
        position: relative;
        left: 0;
        bottom: 0;
        margin: 18px 0 22px;
        padding: 0;
        width: 100%;
        border: 0;
    }

    #game-pc .video ul {
        margin: 0 auto;
        padding-left: 30px;
        width: 240px;
        height: 53px;
        overflow: hidden;
        text-align: left;
        white-space: nowrap;
    }

    #game-pc .video ul li.active {
        display: inline-block !important;
        *display: inline;
        *zoom: 1;
        margin-right: 30px;
    }

    #game-pc .video ul li a {
        display: inline-block;
    }

    #game-pc .video .arrow-top,
    #game-pc .video .arrow-bottom {
        position: absolute;
        top: 20px;
    }

    #game-pc .video a.arrow-top {
        border-color: transparent #333 transparent transparent;
    }

    #game-pc .video a.arrow-bottom {
        right: 0;
        border-color: transparent transparent transparent #333;
    }


    /**
     * 手机游戏
     */
    #game-mobile {
        padding: 30px 0 40px;
    }

    #game-mobile > ul > li {
        margin-top: 30px;
        padding: 30px 0 0;
    }

    #game-mobile li .label-container span.label {
        width: auto;
        padding: 0 10px;
        line-height: 20px;
        font-weight: normal;
    }

    #game-mobile > ul > li > .desc {
        margin: 0;
        padding-top: 86px;
    }

    #game-mobile > ul > li > .download {
        left: 0;
        top: 160px;
    }

    #game-mobile > ul > li:first-child .download {
        top: 130px;
    }

    #game-mobile > ul > li > .download > li {
        margin-left: 0;
        margin-right: 16px;
    }
}