*{font-size: 24px; 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: 0px;
    left: 0px;
    background: url("../resources/common/rules.png") no-repeat;
    background-size: auto 100%;
    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{
    float: right;
    margin-right: 5%;
    width: 48%;
    height: 100%;
}

.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;
}

#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; 
}

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

.home_btn{
    position: absolute;
    width: 100px;
    height: 100px;
    margin: 20px;
    top: 0px;
    left: 0px;
    z-index: 810;
    background: url("../resources/common/home.png");
    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.jpg");
        background-size: auto 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: 70%;
    height: 95%;
    cursor: pointer;
}

.menu_btn_1{
    background: url("../resources/common/startbutton.png") no-repeat;
    background-size: auto 100%;
    background-position: center;
}
.menu_btn_2{
    background: url("../resources/common/rulesbutton.png") no-repeat;
    background-size: auto 100%;
    background-position: center;
}
.menu_btn_3{
    background: url("../resources/common/cgbutton.png") no-repeat;
    background-size: auto 100%;
    background-position: center;
}

@media screen and (max-aspect-ratio:16/9){
    .menu_btn_1{
        background: url("../resources/common/startbutton.png") no-repeat;
        background-size: 100% auto;
        background-position: center;
    }
    .menu_btn_2{
        background: url("../resources/common/rulesbutton.png") no-repeat;
        background-size: 100% auto;
        background-position: center;
    }
    .menu_btn_3{
        background: url("../resources/common/cgbutton.png") no-repeat;
        background-size: 100% auto;
        background-position: center;
    }
}

#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(60, 25, 54, 0.6);
    border: 6px double rgb(68, 36, 61);

}


.dialog1{
    bottom: 1%;
    left: 5%;
    width: 90%;
    height: 25%;
    z-index: 210;
    background: rgba(60, 25, 54, 0.55);
    border: 6px double rgb(68, 36, 61);
    color: white;
}

.dialog2{
    top: 10%;
    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;
    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;
}

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

.choice{
    padding:10px; 
    margin: 20px 0 0 20px; 
    cursor: pointer; 
    background: rgba(60, 25, 54, 0.55);
    border: 6px double rgb(68, 36, 61);
    color: white;
}