*{font-size: 18px; margin:0; text-shadow: 3px 3px 3px rgba(0,0,0,0.5);}
td {border: 0px black solid;}
td {text-align: center;}
ul {margin: 0; padding: 0;}
li {list-style: none; text-align: center; }

body{
    width: 100%;
    height: 100%;
}
p{font-size: 24px;}

.transition{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background: #fff;
    z-index: 900;
}

.rules{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0px;
    background: url("../resources/common/rules.png") no-repeat;
    background-size: auto 90%;
    background-position: center;
    z-index: 600;
}

.album{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background: url("../resources/menu/back.jpg");
    background-size: 100% auto;
    background-position: center;
    z-index: 600;
}

@media screen and (max-aspect-ratio:16/9){
    .album{
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px;
        z-index: 600;
        background: url("../resources/menu/back.jpg");
        background-size: auto 100%;
        background-position: center;
    }
}

.main{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background: white; 
    z-index: 100;
}

.grid_layout{
    position: absolute;
    left: 50%;
    top:40%;
    margin-right: 5%;
    width: 30%;
    height: 60%;
}

.charactor_frame{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
}
#charactor_left{
    z-index: 101;
}
#charactor_center{
    z-index: 121;
}
#charactor_right{
    z-index: 111;
}

.ui_layer{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 300;
}

#top_layer{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 900; 
    cursor: pointer;
    overflow-x: auto;
    overflow-y: hidden;
}
.bottom{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 9999; 
    background: white;
    overflow-x: auto;
    overflow-y: hidden;
}
.bottom_image{
    position: absolute;
    width: 50%;
    height: 50%;
    top: 10%;
    left: 25%;
    background: url('../resources/background/horizon_hint.png') 100% 100% /100% auto no-repeat;
}
#confirm{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 901; 
    background:rgba(0,0,0,.6);
    overflow-x: auto;
    overflow-y: hidden;
}
#confirm_1{
    position: absolute;
    width: 60%;
    height: 60%;
    top: 20%;
    left: 20%;
    z-index: 902; 
    overflow-x: auto;
    overflow-y: hidden;
}
.play_again_1{
    position: absolute;
    width: 25%;
    height: 14%;
    top: 60%;
    left: 23%;
    z-index: 903; 
}
.play_again_2{
    position: absolute;
    width: 25%;
    height: 14%;
    top: 60%;
    left: 52%;
    z-index: 903; 
}
.play_again_cancel{
    position: absolute;
    width: 54%;
    height: 14%;
    top: 78%;
    left: 23%;
    z-index: 903; 
}
.cancel{
    position: absolute;
    width: 25%;
    height: 14%;
    top: 78%;
    left: 23%;
    z-index: 903; 
}
.submit{
    position: absolute;
    width: 25%;
    height: 14%;
    top: 78%;
    left: 51%;
    z-index: 903; 

}
.score_cancel{
    position: absolute;
    width: 20%;
    height: 14%;
    top: 0%;
    left: 71%;
    z-index: 903; 
}
#cg_layer{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 1100;
    text-align: center; 
    cursor: pointer;
    overflow-x: auto;
    overflow-y: hidden;
}
.cg_pic{
    display: block;
    height: 100%;
    width: auto;
    margin: 0 auto; 
}

.home_btn{
    position: fixed;
    width: 80px;
    height: 80px;
    margin: 20px;
    top: 0px;
    right: 0px;
    z-index: 810;
    background: url("../resources/common/home.png");
    background-size: 100% 100%;
    background-position: center;
    cursor: pointer;
}

.record{
    position: fixed;
    width: 300px;
    height: 50px;
    margin: 20px;
    top: 0px;
    left: 0px;
    z-index: 800;
    background: url("../resources/common/saveload.png");
    background-size: 100% 100%;
    background-position: center;

}

.record_btn{
    position: absolute;
    width: 47%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 810;
    background-size: 100% 100%;
    background-position: center;
    cursor: pointer;
}


.read_record_btn{
    position: absolute;
    width: 47%;
    height: 100%;
    top: 0px;
    right: 0px;
    z-index: 810;
    background-size: 100% 100%;
    background-position: center;
    cursor: pointer;
}

.menuscene{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 400;
    background: url("../resources/menu/back.jpg") ;
    background-size: 100% auto;
    background-position: center;
    
}
@media screen and (max-aspect-ratio:16/9){
    .menuscene{
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px;
        z-index: 400;
        background: url("../resources/menu/back_pad.jpg");
        background-size: 100% 100%;
        background-position: center;
    }
}

.menu_title_frame{
    width: 100%;
    height: 40%;
    background: url("../resources/common/title.png") no-repeat;
    background-size: auto 90%;
    background-position: 80%;
}
@media screen and (max-aspect-ratio:16/9){
    .menu_title_frame{
        width: 100%;
        height: 40%;
        background: url("../resources/common/title.png") no-repeat;
        background-size: 100% auto;
        background-position: center;
    }
}


.menu_btn_frame{
    width:100%;
}
.menu_btn{
    float: right;
    width: 83%;
    height: 95%;
    cursor: pointer;
}


@media screen and (max-aspect-ratio:16/9){
    .grid_layout{
        position: absolute;
        left: 53%;
        top: 40%;
        margin-right: 5%;
        width: 35%;
        height: 60%;
    }
}

#loading{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(0,0,0,0.6);
    z-index:9999;
}
.loadingFrame{
    margin: 0 auto;
    background: white;
    width: 100px;
    height: 100px;
}

.dialog{
    position: absolute;
    z-index: 200;
}

.dialog0{
    bottom: 29%;
    left: 5%;
    width: auto;
    height: auto;
    z-index: 215;
    background: rgba(64, 31, 40, 0.9);
    border: 3px solid #7d5b55;
    border-radius: 8px;
}

.dialog_click{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 217;
}
.dialog1{
    bottom: 1%;
    left: 5%;
    width: 90%;
    height: 25%;
    z-index: 210;
    background: rgba(64, 31, 40, 0.9);
    border: 3px solid  #7d5b55;
    border-radius: 8px;
    color: white;
}

.dialog2{
    top: 15%;
    left: 28%;
    width: 46%;
    height: 60%;
    z-index: 220;
}

.dialog3{
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0;
    z-index: 230;
    cursor: pointer;
}
.album_table{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.6);
    z-index:1000;
}
.album_list{
    width: 90%;
    height: 90%;
    margin: 0 auto;
    overflow: auto;
}
.album_item{
    float: left;
    height: auto;
    width: 360px;
    margin: 20px;
    border:10px solid white;
}
.album_pic{
    display:block;
    width: 360px;
    height: auto;
    cursor: pointer;
}

.link{
    position: absolute;
    width: 27%;
    height: 14%;
    top: 78%;
    left: 36%;
    z-index: 1002;
}
.tab{
    position: absolute;
    width: 12%;
    height: 14%;
    top: 78%;
    left: 81%;
    z-index: 1002; 
}
.close_btn{
    position: absolute;
    width: 10%;
    height: 15%;
    top: 3%;
    right: 5%;
    z-index: 810;
}
@media screen and (max-aspect-ratio:16/9){
    .album_list{
      width: 90%;
      height: 70%;
      margin: 0 auto;
      overflow: auto;
    }
    .link{
    position: absolute;
    width: 27%;
    height: 12%;
    top: 72%;
    left: 36%;
    z-index: 1002;
    }
    .close_btn{
        position: absolute;
    width: 20%;
    height: 12%;
    top: 15%;
    left: 75%;
    z-index: 1002; 
}

.tab{
    position: absolute;
    width: 19%;
    height: 12%;
    top: 72%;
    left: 75%;
    z-index: 1002; 

}
}

.name{ 
    padding: 5px 30px;
    font-size: 18px; 
    text-shadow: 3px 3px 3px rgba(0,0,0,0.5);
}

.choice{
    padding:10px; 
    margin: 12px 0 0 20px; 
    cursor: pointer; 
    background: rgba(64, 31, 40, 0.9);
    border: 3px solid  #7d5b55;
    color: white;
}


.move_left_center_slow{
    position:absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    animation:mymove_left_center 3s ;
    -webkit-animation:mymove_left_center 3s; /*Safari and Chrome*/
}

.move_left_center_medium{
    position:absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    animation:mymove_left_center 2s ;
    -webkit-animation:mymove_left_center 2s; /*Safari and Chrome*/
}

.move_left_center_quick{
    position:absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    animation:mymove_left_center 1s ;
    -webkit-animation:mymove_left_center 1s; /*Safari and Chrome*/
}

@keyframes mymove_left_center
{
from {background-position:10% 100%;}
to {background-position:bottom center;}
}

@-webkit-keyframes mymove_left_center /*Safari and Chrome*/
{
from {background-position:10% 100%;}
to {background-position:bottom center;}
}

.move_left_right_slow{
    position:absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    animation:mymove_left_right 3s ;
    -webkit-animation:mymove_left_right 3s; /*Safari and Chrome*/
}

.move_left_right_medium{
    position:absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    animation:mymove_left_right 2s ;
    -webkit-animation:mymove_left_right 2s; /*Safari and Chrome*/
}

.move_left_right_quick{
    position:absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    animation:mymove_left_right 3s ;
    -webkit-animation:mymove_left_right 3s; /*Safari and Chrome*/
}

@keyframes mymove_left_right
{
from {background-position:10% 100%;}
to {background-position:90% 100%;}
}

@-webkit-keyframes mymove_left_right /*Safari and Chrome*/
{
from {background-position:10% 100%;}
to {background-position:90% 100%;}
}

.move_center_right_slow{
    position:absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    animation:mymove_center_right 3s ;
    -webkit-animation:mymove_center_right 3s; /*Safari and Chrome*/
}

.move_center_right_medium{
    position:absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    animation:mymove_center_right 2s ;
    -webkit-animation:mymove_center_right 2s; /*Safari and Chrome*/
}

.move_center_right_quick{
    position:absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    animation:mymove_center_right 1s ;
    -webkit-animation:mymove_center_right 1s; /*Safari and Chrome*/
}

@keyframes mymove_center_right
{
from {background-position:bottom center;}
to {background-position:90% 100%;}
}

@-webkit-keyframes mymove_center_right /*Safari and Chrome*/
{
from {background-position:bottom center;}
to {background-position:90% 100%;}
}

.move_right_center_slow{
    position:absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    animation:mymove_right_center 3s ;
    -webkit-animation:mymove_right_center 3s; /*Safari and Chrome*/
}

.move_right_center_medium{
    position:absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    animation:mymove_right_center 2s ;
    -webkit-animation:mymove_right_center 2s; /*Safari and Chrome*/
}

.move_right_center_quick{
    position:absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    animation:mymove_right_center 1s ;
    -webkit-animation:mymove_right_center 1s; /*Safari and Chrome*/
}

@keyframes mymove_right_center
{
from {background-position:90% 100%;}
to {background-position:bottom center;}
}

@-webkit-keyframes mymove_right_center /*Safari and Chrome*/
{
from {background-position:90% 100%;}
to {background-position:bottom center;}
}

.move_right_left_slow{
    position:absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    animation:mymove_right_left 3s ;
    -webkit-animation:mymove_right_left 3s; /*Safari and Chrome*/
}

.move_right_left_medium{
    position:absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    animation:mymove_right_left 2s ;
    -webkit-animation:mymove_right_left 2s; /*Safari and Chrome*/
}

.move_right_left_quick{
    position:absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    animation:mymove_right_left 1s ;
    -webkit-animation:mymove_right_left 1s; /*Safari and Chrome*/
}

@keyframes mymove_right_left
{
from {background-position:90% 100%;}
to {background-position:10% 100%;}
}

@-webkit-keyframes mymove_right_left /*Safari and Chrome*/
{
from {background-position:90% 100%;}
to {background-position:10% 100%;}
}

.move_center_left_slow{
    position:absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    animation:mymove_center_left 3s ;
    -webkit-animation:mymove_center_left 3s; /*Safari and Chrome*/
}

.move_center_left_medium{
    position:absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    animation:mymove_center_left 2s ;
    -webkit-animation:mymove_center_left 2s; /*Safari and Chrome*/
}

.move_center_left_quick{
    position:absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    animation:mymove_center_left 1s ;
    -webkit-animation:mymove_center_left 1s; /*Safari and Chrome*/
}

@keyframes mymove_center_left
{
from {background-position:bottom center;}
to {background-position:10% 100%;}
}

@-webkit-keyframes mymove_center_left /*Safari and Chrome*/
{
from {background-position:bottom center;}
to {background-position:10% 100%;}
}





.starts,.starts ul{float:left;}

.starts{
    position: absolute;
    left: 26%;
    top: 60%;
    width:57%;
    padding-left:16px;
    padding-top:7px;
}
.starts ul{
    height: 100%;
    width: 100%;
}

.starts ul li{
    width:13%;
    height:38px;
    float:left;
    background: url("../resources/common/star0.png") no-repeat;
    background-size: auto 100%;
    background-position: center;
    padding-right:5px;
}

.starts ul li.on{
    background: url("../resources/common/star1.png") no-repeat;
    background-size: auto 100%;
    background-position: center;
    padding-right:5px;
}

.starts ul span{display:inline;float:left;padding-left:10px;height:31px;line-height:31px;}