﻿/*Game_All subMenu CSS3*/
input#s1, input#s2, input#s3, input#s4, input#s5, input#s6{position: absolute;left: 0;top: 0;opacity:0; filter:alpha(opacity=0);}
#gSubnav {clear: left;}
#gSubnav ul {display:block;width:800px;height:auto;margin:0 auto;}
#dNavi #gSubnav li a,#dNavi #gSubnav li a:hover,#dNavi #gSubnav li a:active,#dNavi #gSubnav li a.active {padding:0;}
#gSubnav li a label, #gSubnav li a:hover label, #gSubnav li a:active label, #gSubnav li a.active label {display: block;padding: 2px 10px;width: auto;height: auto;color: #fff9d4;text-shadow: 0 0 5px #000;-moz-text-shadow: 0 0 5px #fff;-webkit-text-shadow: 0 0 5px #fff;float: left;border-radius: 5px;-webkit-border-radius: 5px;-moz-border-radius: 5px;background: none;cursor: pointer;}
.subItem {position:relative;top:10px;width:91%;height:0px;overflow:hidden;border: 1px solid #fff9d4;border-radius:5px;margin:0 auto;padding:0px;opacity:0;filter: alpha(opacity=0);transition:all .5s; }
.subItem ul { width: 100%!important;}
input#s1:checked ~ #gSubnav .s1,input#s2:checked ~ #gSubnav .s2,input#s3:checked ~ #gSubnav .s3,input#s4:checked ~ #gSubnav .s4,input#s5:checked ~ #gSubnav .s5,input#s6:checked ~ #gSubnav .s6 {background: #483d00;border: 1px solid #ffea00;}
input#s1:checked ~ .sub1, input#s2:checked ~ .sub2, input#s3:checked ~ .sub3, input#s4:checked ~ .sub4, input#s5:checked ~ .sub5, input#s6:checked ~ .sub6 {opacity:1;filter: alpha(opacity=100);padding:10px;height:auto; margin-bottom: 15px;}
input#s2:checked ~ .sub2 {margin-top: -2px;}
input#s3:checked ~ .sub3 {margin-top: -4px;}
input#s4:checked ~ .sub4 {margin-top: -6px;}
input#s5:checked ~ .sub5 {margin-top: -8px;}
input#s6:checked ~ .sub6 {margin-top: -10px;}

.arrow {clear:both;position:relative;display:block;z-index:10;border-bottom:1px solid #404040;width:0px;height:0px;top:7px;opacity:0; filter:alpha(opacity=0);}
.arrow:after {content: '';position: absolute;top: 2px;left:-1px;opacity:1;filter: alpha(opacity=100);border-top: 0px solid #040404;border-right: 11px solid transparent;border-bottom: 11px solid #040404;border-left: 11px solid transparent; transition: all .5s;}
.arrow:before {content: '';position: absolute;top: 0px;left:0px;opacity:1;filter: alpha(opacity=100);border-top: 0px solid #fff9d4;border-right: 10px solid transparent;border-bottom: 10px solid #fff9d4;border-left: 10px solid transparent; transition: all .5s;}

input#s1:checked ~ #gSubnav li:nth-child(1) .arrow, input#s2:checked ~ #gSubnav li:nth-child(2) .arrow, input#s3:checked ~ #gSubnav li:nth-child(3) .arrow, input#s4:checked ~ #gSubnav li:nth-child(4) .arrow, input#s5:checked ~ #gSubnav li:nth-child(5) .arrow, input#s6:checked ~ #gSubnav li:nth-child(6) .arrow {opacity:100;filter:alpha(opacity=100);}
.aw1, aw2 {left:28px;}
.aw3, .aw4 {left:25px;}
.aw5, .aw6 {left:40px;}

.tipIcon {
        position: relative;
        /*width: 14px;
        height: 14px;
        background:url('../_img/Danger.png') bottom center no-repeat;
        margin-left:10px;
        float: right;
        margin-top:4px;
        animation: dropdown .3s 0s 10 ease-in-out forwards;*/
        width:30px;
        margin-left:10px;
        float: right;
        color:#f36;
        animation: subcolor 1s 0s infinite forwards;
    }

/*.tipIcon:hover {transform:scale(1.4);}*/

    @keyframes dropdown {
        0% {margin-top:-3px; }
        2% {margin-top:-5px; }
        98% { margin-top:7px;}
        100% {margin-top:4px;}
    }

    .subItem li a .newtip {float:left; margin-right:5px;color:#f36; animation: subcolor 1s 0s infinite forwards;}
    @keyframes subcolor {
        0% {color:#b6ff00;}
        25% {color:#00ffff}
        50% {color:#ffd800}
        75% {color:#ff6a00}
        100% {color:#f36;}
    }