#background {
    background-image: url("../images/sky.jpg");
    background-position: 0% 50%;
    height: 100%;
    position: absolute;
    width: 100%;
}
#frame {
    bottom: 0;
    height: 552px;
    left: 0;
    margin: auto;
    max-width: 980px;
    /*min-width: 540px;*/
    overflow-x: hidden;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
}
#likePopup {
    background-color: #ffffff;
    bottom: 0;
    height: 150px;
    left: 0;
    margin: auto;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 0;
    width: 200px;
}
.page {
    height: 552px;
    overflow: hidden;
    position: absolute;
    width: 980px;
}
#tglogo {
    bottom: 10px;
    position: absolute;
    right: 15px;
    width: 100px;
}
.backButton {
    height: 21px;
    left: 15px;
    position: absolute;
    top: 10px;
    width: 88px;
}
#muteButton {
    position: absolute;
    right: 3px;
    top: 23px;
}
#background {
    background-image: url("../images/sky.jpg");
    height: 100%;
    width: 100%;
}
#intro {
}
#intro img {
    position: absolute;
}
#intro .next {
    position: absolute;
}
#term, #registration, #start, #item, #guide, #friend {
    /*background: url("../images/sky.jpg") no-repeat scroll center center #fff;*/
}
#term .next {
    position: absolute;
    top: 446px;
}
#term .centerPane .middlePart {
    background: none repeat scroll 0 0 #ffffff;
    height: 200px;
    overflow: auto;
}

#term ol, #term li , #term ul{
    margin-left: 8px;
}

#term .thai{
    font-family: Georgia;
    font-size: 14px;
}

#registration {
}
#registration .row div {
    float: left;
}
#registration .row .fieldName p {
    color: #462569;
    margin: 0 0 -5px;
}
#registration .row .fieldName {
    color: #cc007a;
    margin-left: 60px;
    width: 110px;
}
#registration .row input {
    border: 2px solid #cccccc;
    border-radius: 5px;
    float: left;
    margin-top: 5px;
    width: 240px;
}
#registration .notify {
    position: absolute;
    top: 270px;
    width: 280px;
}
#registration .notify p {
    color: #cc007a;
    text-align: center;
}
#registration .next, #registration .submit {
    position: absolute;
    top: 450px;
}
#registration .buttonArea .back {
    float: left;
    margin: auto;
}
#start .year-logo{
    margin: 20px;
}

#start > h1 {
    color: #462569;
    font-family: avenir;
    font-size: 70px;
    font-weight: bold;
    position: absolute;
    text-align: center;
    top: 71px;
    width: 100%;
}
#start .user-hi-score {
    bottom: 7px;
    height: 112px;
    position: absolute;
    right: 20px;
    transform: scale(1.7);
    transform-origin: 100% 100% 0;
    width: 70px;
}
#start .board {
    bottom: 0;
    height: 130px;
    position: absolute;
    width: 100%;
}
#start .plane-background {
    background-image: url("../images/s_14.png");
    background-repeat: no-repeat;
    background-size: contain;
    bottom: 0;
    height: 450px;
    position: absolute;
    width: 450px;
    -webkit-transition: transform 4s; /* Safari */
    transition: transform 4s;
}
#guide > .background {
    background-image: url("../images/guide.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    height: 100%;
    width: 100%;
}
#guide > .next {
    bottom: 40px;
}
#friend div {
    position: absolute;
}
#friend > h1 {
    color: #ffffff;
    font-family: avenir;
    font-size: 65px;
    font-weight: bold;
    text-align: center;
    top: 83px;
}
#friend .sub-title {
    top: 150px;
    width: 518px;
}
#friend .sub-title > h3 {
    color: #fff;
    float: left;
    font-family: avenir;
    font-size: 37px;
    font-weight: bold;
    margin: 20px;
    position: relative;
    text-align: center;
}

#friend .sub-title .num-item {
    float: left;
    margin-top: -8px;
    position: relative;
}
#friend .search {
    background-color: #ffffff;
    height: 34px;
    width: 250px;
}
#friend .select-area {
    height: 250px;
    top: 239px;
    width: 100%;
}
#friend .friend-list {
    height: 150px;
    top: 45px;
    width: 570px;
}
#friend .friend-list .friend-item {
    float: left;
    height: 150px;
    margin: 0 35px;
    position: relative;
    width: 120px;
}
#friend .friend-list .friend-item > .item-plus {
    color: #fff;
    font-family: avenir;
    font-size: 27px;
    font-weight: bold;
    margin: 25px 0px;
    text-align: center;
    top: -59px;
}
#friend .friend-list .friend-item > .picture {
    background-image: url("../images/s_84.png");
    background-position: center center;
    background-size: cover;
    border-radius: 50%;
    height: 120px;
    width: 120px;
}
#friend .friend-list .friend-item > .name {
    color: #000000;
    font-size: 24px;
    left: -40px;
    text-align: center;
    top: 123px;
    width: 200px;
}
#item div {
    position: absolute;
}
#item > h1 {
    color: #ffffff;
    font-family: avenir;
    font-size: 65px;
    font-weight: bold;
    text-align: center;
    top: 83px;
}
#item .sub-title {
    top: 150px;
    width: 486px;
}
#item .sub-title > h3 {
    color: #fff;
    float: left;
    font-family: avenir;
    font-size: 37px;
    font-weight: bold;
    margin: 20px;
    position: relative;
    text-align: center;
}
#item .sub-title .num-item {
    float: left;
    position: relative;
}
#item .item-list {
    top: 226px;
    width: 785px;
}
#item .item-list .item-choice {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: initial;
    float: left;
    height: 200px;
    margin: 0 6px;
    position: relative;
    width: 145px;
}
#item .item-list .item-choice.one {
    background-image: url("../images/s_02.png");
}
#item .item-list .item-choice.two {
    background-image: url("../images/s_04.png");
}
#item .item-list .item-choice.three {
    background-image: url("../images/s_07.png");
}
#item .item-list .item-choice.four {
    background-image: url("../images/s_09.png");
}
#item .item-list .item-choice.five {
    background-image: url("../images/s_11.png");
}
#item .item-list .item-choice.one:hover,#item .item-list .item-choice.one.selected{
    background-image: url("../images/s_28.png");
}
#item .item-list .item-choice.two:hover,#item .item-list .item-choice.two.selected {
    background-image: url("../images/s_30.png");
}
#item .item-list .item-choice.three:hover,#item .item-list .item-choice.three.selected {
    background-image: url("../images/s_22.png");
}
#item .item-list .item-choice.four:hover,#item .item-list .item-choice.four.selected {
    background-image: url("../images/s_24.png");
}
#item .item-list .item-choice.five:hover,#item .item-list .item-choice.five.selected {
    background-image: url("../images/s_26.png");
}

#sound-button{
    position: absolute;
    left: -5px;
    top: 500px;
}

#sound-button img{
    position: absolute;
    left: 0;
    top: 0;
}

.num-item {
    border: 5px solid #ffffff;
    border-radius: 50%;
    color: #ffffff;
    height: 70px;
    width: 70px;
}
.num-item > .display {
    bottom: 0;
    font-family: avenir;
    font-size: 51px;
    font-weight: bold;
    height: 20px;
    left: 0;
    margin: auto;
    right: 0;
    text-align: center;
    top: -2px;
}
.tg-logo {
    background-image: url("../images/tg_logo.png");
    background-repeat: no-repeat;
    background-size: contain;
    height: 100px;
    position: absolute;
    right: 20px;
    top: 20px;
    width: 145px;
}
.user-hi-score > .frame {
    float: left;
    height: 100%;
    margin: 0 -5px;
    position: relative !important;
    width: 100%;
}
.user-hi-score > .frame div {
    position: absolute;
}
.user-hi-score > .frame > .name {
    color: black;
    font-size: 15px;
    text-align: center;
    width: 100%;
    height:25px;
}

.user-hi-score > .frame > .picture {
    background-image: url("../images/test.jpg");
    background-position: center center;
    background-size: cover;
    border-radius: 50%;
    height: 70px;
    top: 25px;
    width: 70px;
}
.user-hi-score > .frame > .hi-score {
    bottom: 0;
    color: #cc007a;
    font-size: 22px;
    text-align: center;
    width: 100%;
}