.ui-overlay-a, .ui-page-theme-a, .ui-page-theme-a .ui-panel-wrapper {
    margin: 0;
 }
 .ui-mobile [data-role=page], .ui-mobile [data-role=dialog], .ui-page{
 	max-width: 432px;
 	min-height: 700px;
 	position: relative;
 	margin: 0 auto;
    overflow: visible;
    background: transparent;
 }
.ui-header .ui-title {
    font-size: 24px;
    padding: 23px 0;
}
.ui-content {
    padding: 0;
}
.ui-btn{
	font-size: 36px;
}
body{
    background: url(https://i.imgur.com/AySnSQb.jpg);
    background-size: 1920px auto;
    background-position: center -61px;
    background-repeat: no-repeat;
    padding-top: 128px;
}
.frame{
	max-width: 432px;
	min-height:700px;
	background-image: url(https://i.imgur.com/lHq1AbO.jpg);
    background-size: 100%;
	display: block;
	margin: 0 auto;
	text-align: center;
}
#homeblank{
    height: 503px;
    width: 100%;
    background: transparent;
}

/* frams*/
#homepage .frame {
    background-image: url(https://i.imgur.com/45CFpHi.jpg);
    background-repeat: no-repeat;
    padding-top: 118%;
    padding-bottom: 5%;
}
#start .frame {
    background-image: url(imgs/bg-start.jpg);
    background-repeat: no-repeat;
}
#result .frame {
    background-image: url(https://i.imgur.com/MPXmadd.jpg);
    background-repeat: no-repeat;
    height: 1078px;
}
#rotate .frame {
    background-image: url(https://i.imgur.com/ivZlHLR.gif);
    background-repeat: no-repeat;
    height: 1078px;
}
#market1 .frame {
    background-image: url(https://i.imgur.com/pDoUYIM.jpg);
    background-repeat: no-repeat;
    height: 1078px;
}
#market2 .frame {
    background-image: url(https://i.imgur.com/lnjyMjf.jpg);
    background-repeat: no-repeat;
    height: 1078px;
}
#market3 .frame {
    background-image: url(https://i.imgur.com/ci8Wfhv.jpg);
    background-repeat: no-repeat;
    height: 1078px;
}
/* Start Page*/

a.list-item{
    width: 100%;
    height: 100px;
    display: block;
    text-decoration: none;
}
#market1 .ui-content {
    padding-top: 60px;
}
#market2 .ui-content {
    padding-top: 60px;
}
#market3 .ui-content {
    padding-top: 60px;
}
a#m-6 {
    height: 95px;
}

a#m-7 {
    height: 80px;
}

a#m-8 {
    height: 140px;
}

a#m-9 {
    height: 80px;
}

/* input*/
.ui-input-text.ui-body-inherit.ui-corner-all.ui-shadow-inset {
    width: 65%;
    margin: auto;
    margin-top: 93%;
    border: none;
    text-shadow: none;
    border-radius: initial;
}
input#userName {
    text-align: center;
    font-size: 21px;
    line-height: 21px;
}

#nameDescribe{
	font-size:21px;
	margin: 50px 0;
}
#nameDescribe {
    font-size: 21px;
    display: block;
    width: 70%;
    margin: 50px auto;
}
a.ui-btn#btnDice{
    width: 75%;
    height: 40px;
    margin: 20px auto;
    margin-top:178px;
    font-size: 24px;
    font-weight: 300;
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-image: url(imgs/btnStartDice.png);
}
}

a.ui-btn.ui-state-disabled#btnDice {
    background-image: url(imgs/btnStartDice_active.png);
}
/* Results page*/
#resultImg{
    width: 100%;
}

.couponDes {
    text-shadow: none;
    font-weight: 100;
	color:green;
}

#couponSection{
    position: absolute;
    top:450px;
    width: 100%;
    color:green;

}
#resultDescribe{
	font-size: 18px;
    display: block;
    width: 80%;
    margin: 5px auto;
}
.coupons{
    position: relative;
}
#coupon{
    width: 75%;
    background-repeat: no-repeat;
    background-position: center;
    height: 160px;
    margin: auto;
    color: white;
    text-shadow: none;
    background-size: contain;
}
div#couponRemain {
    display: inline;
}
#coponPaging div{
    display: inline-block;
}
div#coponPaging {
    text-shadow: none;
    margin-bottom: 5px;
}
div#showRemain {
    color: #E9A70D;
    margin-top: 12px;
    text-shadow: none;
    font-size: 1.2em;
}
div#showRemain.fromShare {
    color: white;
    background: #1AA1E6;
    width: 60%;
    margin: auto;
    border-radius: 15px;
}
.pageBtn{
    width: 10%;
    height: 38px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    cursor: pointer;
}
#leftBtn{
    background-image: url(imgs/btnLeft.png);
    float: left;
    margin-right: 80%;
}
#leftBtn:hover,#leftBtn:active{
    background-image: url(imgs/btnLeft_active.png);
}


#rightBtn{
    background-image: url(imgs/btnRight.png);
    float: right;
}
#rightBtn:hover,#rightBtn:active{
    background-image: url(imgs/btnRight_active.png);
}
#couponSelector{
    position: absolute;
    top: 64px;
    width: 100%;
}

#resultName,#godName{
	display: inline-block;
}
#resultMain{
    font-size: 32px;
}
#resultDescript {
    margin: 70px 0;
}
#resultTitle {
    padding-top: 17px;
    font-size: 21px;
}
#sharePic {
    width: 330px;
    height: 178px;
    margin: auto;
    background: grey;
}
.decript {
    padding: 10px;
    font-size: 21px;
}
.subDes {
    font-size: 14px;
    margin-bottom: 15px;
}
div#shareInfo {
    width: 80%;
    margin: auto;
}


#btnShare {
    background-image: url(imgs/btnShareToFB.png);
    text-shadow: none;
    color: white;
    width: 81%;
    height: 50px;
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center;
    margin: 10px auto;
    font-size: 24px;
    font-weight: 200;
}

#btnShare:hover,#btnShare:active,#btnShare.remainZero {
    background-image:url(imgs/btnShareToFB_active.png);
}

#btnShareToIntro{
    display: inline-block;
    width: 32%;
    margin: 0px 10px;
    height: 100px;
    background-image:url(https://i.imgur.com/r0iD0J6.jpg);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center;
    text-decoration: none;
}
#btnShareToMyCoupons{
    display: inline-block;
    width: 32%;
    margin: 0px 10px;
    height: 100px;
    background-image:url(https://i.imgur.com/JqKZznI.jpg);
    text-decoration: none;
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center;
}
.alert{
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.85);
    position: absolute;
    background-size: 100% auto;
    background-position: top;
    background-repeat: no-repeat;
    top: 0;
}
.closeAlert {
    width: 50px;
    height: 50px;
    float: right;
    margin-top: calc( 50%);    
    margin-right: 52px;
    cursor: pointer;
}

a.alertActionBtn {
    width: 21%;
    height: 50px;
    float: left;
    margin-top: 100%;
    /* margin-left: 100px; */
    /* margin: auto; */
}
a#confirmRedeem {
    margin-left: calc(50% - 22%);
}
a#cancelRedeem {
    margin-left: calc( 2%);
    width: 22%;
}
a#btnConfirmLoginFromShare {
    margin-left: calc(40%);
    width: 30%;
}
div#redeemClose {
    margin-top: calc( 50% );
    margin-right: calc( 10% );
}
#alertLogin{
    background-image: url(https://i.imgur.com/hq2CAWq.png);
}
#alertSuccess{
    background-image: url(https://i.imgur.com/j21Ke22.png);

}
#alertRedeem{
    background-image: url(https://i.imgur.com/RgzXjRR.png);

}
#alertError{
    background-image: url(https://i.imgur.com/ZKo4Y75.png);

}
#alertNoCoupon{
    background-image: url(https://i.imgur.com/mSNECtM.png);
    display: none;
}


#confirmRedeem{

}
/*buttons*/
.ui-page-theme-a .ui-btn,  .ui-page-theme-a .ui-btn:visited, .ui-page-theme-a .ui-btn:hover, .ui-page-theme-a .ui-btn:active {
    width: 50%;
    background-size: 100%;
    height: 53px;
    padding: 8px 0;
    border: 0;
    margin: auto;
    background-repeat: no-repeat;
    background-color: transparent;
}
a#btnMyCoupon{
    background-image:url(imgs/btnMyTreasure.png);
}

a#btnStart{
    background-image:url(imgs/btnStart.png);
}

a#btnFbLogout{
    background-image:url(imgs/btnFBLogut.png);
}

a#btnFbLogin{
    display: none;
    background-image:url(imgs/btnFBLogin.png);
}


a#btnIntro{
    background-image:url(imgs/btnIntro.png);
}

a#btnMap{
    background-image:url(imgs/btnTreasureMap.png);
    width: 78%;
}

a#btnProcess{
    background-image:url(imgs/btnProcess.png);
}

a#btnQA{
    background-image:url(imgs/btnQA.png);
}

a#btnVideo{
    background-image:url(imgs/btnVideo.png);
}

a#btnRedeem{
    width: 75%;
    background-image:url(imgs/btnRedeem.png);
}


.smallBtn{
    display: inline-block;
    width: 24%;
    background-size: 100%;
    height: 51px;
    background-repeat: no-repeat;
    cursor: pointer;
}
.introSmallBtn{
    display: inline-block;
    width: 25%;
    background-size: 100%;
    height: 55px;
    background-repeat: no-repeat;
    cursor: pointer;
}
/* headers*/
.ui-header.ui-bar-inherit{
    border: none;
    position: absolute;
    height: 60px;
    width: 100%;
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: 100%;
}
#result div .ui-header.ui-bar-inherit {
    background-image: url(imgs/headerResults.png);
}
#resultShare div .ui-header.ui-bar-inherit {
    background-image: url(imgs/headerResults_noback.png);
}
#start div .ui-header.ui-bar-inherit {
    background-image: url(imgs/headerStart.png);
}
#myCouponList div .ui-header.ui-bar-inherit {
    background-image: url(imgs/headerMyTreasure.png);
}
#myCouponList div .ui-header.ui-bar-inherit.no_homeBtn {
    background-image: url(imgs/headerMyTreasure_no_home.png);
}
#introPage div .ui-header.ui-bar-inherit {
    background-image: url(imgs/headerIntro.png);
}
#introPage div .ui-header.ui-bar-inherit.no_homeBtn {
    background-image: url(imgs/headerIntro_no_home.png);
}

#treasureMap div .ui-header.ui-bar-inherit {
    background-image: url(imgs/headerMap.png);
}
#treasureMap div .ui-header.ui-bar-inherit.no_homeBtn {
    background-image: url(imgs/headerMap_no_home.png);
}

#processIntro div .ui-header.ui-bar-inherit {
    background-image: url(imgs/headerProcess.png);
}
#processIntro div .ui-header.ui-bar-inherit.no_homeBtn {
    background-image: url(imgs/headerProcess_no_home.png);
}

#qaPage div .ui-header.ui-bar-inherit {
    background-image: url(imgs/headerQA.png);
}
#qaPage div .ui-header.ui-bar-inherit.no_homeBtn {
    background-image: url(imgs/headerQA_no_home.png);
}

#couponPage div .ui-header.ui-bar-inherit {
    background-image: url(imgs/headerCoupon.png);
}
#couponPage div .ui-header.ui-bar-inherit.no_homeBtn {
    background-image: url(imgs/headerCoupon_no_home.png);
}
a.homeBtn.ui-link.ui-btn-right.ui-btn.ui-shadow.ui-corner-all{
 height: 100%;
 background-color: transparent;
 cursor: pointer;
 box-shadow: none;
 width: 60px;
 line-height: 93px;
 position: absolute;
 right: 0;
 border: 0;
}
a.btnBack.ui-link.ui-btn-left.ui-btn.ui-shadow.ui-corner-all {
    height: 100%;
    background-color: transparent;
    box-shadow: none;
    border: 0;
    line-height: 80px;
    width: 93px;
    font-size: 21px;
    padding: 0 13px;
}


/* introduction*/

#introDes{
    width: 100%;
    height: 600px;
    background-image: url(https://i.imgur.com/Plzagse.png);
    background-size: 100% auto;
    background-position: top;
    background-repeat: no-repeat;

}
#qaDes{
    width: 100%;
    height: 1000px;
    background-image:url(https://i.imgur.com/VE68vQl.png);
    background-size: 100% auto; 
    background-repeat: no-repeat;

}
#mapDes{
    width: 100%;
    height: 762px;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url(imgs/desMap.jpg);
    background-size: 95% auto;
}

#processDes{
    width: 100%;
    height: 700px;
    background-image:url(https://i.imgur.com/c2RjPsL.png);
    background-size: 100% auto; 
    background-position: center;
    background-repeat: no-repeat;

}

#couponDes {
    height: 641px;
    width: 100%;
    background-size: 100%;
    background-position: top;
    background-repeat: no-repeat;
}

/* listCoupon*/
#myCouponList .frame .ui-content{
    padding-top: 68px;
}

a.listedCoupon{
    display: block;
    margin: auto;
    width: 95%;
    height: 92px;
    background-image:url(http://files.parsetfss.com/3c9a7e21-3cff-4c8a-950d-e2b2d5ddf45f/tfss-6fa176ec-de3d-438c-9a31-e4577fe115f9-1.png);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}

div#loginClose {
    margin-top: calc( 50% );
}
/*  outpage  */
div#couponName {
    position: absolute;
    margin-top: calc( 89% );
    color: white;
    font-size: 1em;
    margin-left: calc( 50% );
}
.btnOnFeedLinkPage{
    background-size: 94% auto;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    width: 42%;
    height: 61px;
    margin: 20px auto;
}
#btnLoginGetCoupon {
    background-image: url(imgs/btnLoginGetCoupon.png);
    
}
#btnIntroBig {
    background-image: url(imgs/btnIntroBig.png);
    
}
#goLogin{
    margin-top: calc( 107% );
    margin-left: calc(50% - 120px );
    width: 120px;
    height: 40px;
    display: inline-block;
    cursor: pointer;
}


#notification{
    background-size: 100%;
    width: 30px;
    height: 54px;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(imgs/notify.png);
    position: absolute;
    top: 0;
    display: none;
    right: 10px;
}
#homepage .frame {
    min-height: 0;
}
a#btnToSelectMarket {
    margin-top: 500px;
    width: 200px;
    height: 200px;
    /*background: red;
    /* position: absolute; */
}
@media only screen and (max-width: 430px) {
    .ui-mobile [data-role=page], .ui-mobile [data-role=dialog], .ui-page {
        min-height: 0px;
    }
    /* For mobile: */
    .ui-header.ui-bar-inherit{
        height: 60px;

    }
    .ui-page-theme-a .ui-btn,  .ui-page-theme-a .ui-btn:visited, .ui-page-theme-a .ui-btn:hover, .ui-page-theme-a .ui-btn:active{
        height: 43px;
        padding: 7px 0;
    }
    #homepage .frame{
        padding-top: 114%;
         min-height: 0px;

    }
    body{
        padding-top: 0px;
    }

}
@media only screen and (max-width: 320px) {

    .ui-page-theme-a .ui-btn,  .ui-page-theme-a .ui-btn:visited, .ui-page-theme-a .ui-btn:hover, .ui-page-theme-a .ui-btn:active{
        height: 43px;
        padding: 3px 0;
    }


}