/***common****/
html,body,iframe
{
    padding: 0;
    margin: 0;
    background-color:#000000;
    overflow: hidden;
    border: none;
}

#afui .match_parent
{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

#afui #content
{
    display: none;
    background-color:#000000;
}

.static-box
{
    width: 1024px;
    height:576px;
    position: absolute;
    top:50%;
    left: 50%;
    margin-left: -512px;
    margin-top: -288px;
    overflow: hidden;
}


.logo
{
    width: 64px;
    height: 64px;
    position: absolute;
    left: 50%;
    margin-left: -32px;
    top:0;
    background: url(../images/logo.jpg) no-repeat;
    z-index: 900;
}

.logo-v
{
    width: 64px;
    height: 64px;
    position: absolute;
    left:50%;
    margin-left: -32px;
    top:0;
    background: url(../images/logo.jpg) no-repeat;
}
/***common****/
/**** start page****/
#start-static
{
    background: url(../images/bg_h.jpg) no-repeat;
}
.start-main
{
    position: absolute;
    width: 1156px;
    height: 452px;
    top:50%;
    left: 50%;
    margin-top: -226px;
    margin-left: -578px;
}

#start-text
{
    width: 602px;
    height: 182px;
    position: absolute;
    top:154px;
    left:211px;
    background:url(../images/start_text.png) no-repeat; 
}
#start-create
{
    width: 195px;
    height: 38px;
    position: absolute;
    left:317px;
    top:348px;
    background: url(../images/start_create.png) no-repeat;
    cursor: pointer;
}

#show-created
{
    width: 195px;
    height: 38px;
    position: absolute;
    left: 50%;
    top:348px;
    background: url(../images/show_created.png) no-repeat;
    cursor: pointer;
}
/**** start page****/

/**horizonal**/
#horizonal-static
{
    width: 576px;
    height: 1024px;
    position: absolute;
    top:50%;
    left:50%;
    margin-left: -288px;
    margin-top: -512px;
    z-index: 1000;
    background: #000000;
    display: none;
}
#black_bg
{
    width: 100%;
    height: 100%;
    background: #000000;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
    display: none;
}

/***video page**/
#video-box
{
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 100;
}
.video-play
{
    width: 200px;
    height: 200px;
    background: black;
    position: absolute;
    z-index: 300;
}
#skip_btn
{
    width: 200px;
    height: 42px;
    position: absolute;
    bottom: 34px;
    right:52px;
    background: url(../images/skip.png) no-repeat;
    cursor: pointer;
    z-index: 900;
}

/**share**/
#share-static
{
    background: url(../images/bg2.jpg) no-repeat;
}
#share-text
{
    width: 542px;
    height: 184px;
    position: absolute;
    left: 50%;
    top:50%;
    margin-left: -271px;
    margin-top: -92px;
    background: url(../images/share-text.png) no-repeat;
}
#blue_bg
{
    width: 100%;
    height: 487px;
    background: url(../images/blue.png) repeat-x;
}
#share-bottom
{
    width: 100%;
    height:89px;
    background: url(../images/share-bottom.jpg) no-repeat;
    position: absolute;
    bottom: 0;
}
#share-to
{
    width: 88px;
    height: 29px;
    position: absolute;
    bottom:30px;
    left:356px;
    background: url(../images/share_to.png) no-repeat;
}
.share_btn
{
    width: 88px;
    height: 88px;
    position: absolute;
    bottom:0px;
    background-repeat: no-repeat;
}
#sina-share
{
    width: 44px;
    height: 44px;
    bottom:22px;
    left:500px;
    background: url(../images/sina.png) no-repeat;
}

#douban-share
{
    left:563px;
    background: url(../images/douban.png) no-repeat;
}

#renren-share
{
    left:648px;
    background: url(../images/renren.png) no-repeat;
}

#wechat-share
{
    left:733px;
    background: url(../images/wechat.png) no-repeat;
}

#horizonal-text
{
    width: 597px;
    height: 231px;
    position: absolute;
    top:50%;
    left: 50%;
    margin-top: -115px;
    margin-left: -298px;
    background: url(../images/horizonal_text.png) no-repeat;
}
#share-back
{
    width: 118px;
    height: 58px;
    position: absolute;
    right:6px;
    bottom:15px;
    background: url(../images/share-back.png) no-repeat;
}
.finish-btn
{
    width: 58px;
    height: 29px;
    position: absolute;
    right:36px;
    bottom:30px;
    background: url(../images/finish.png) no-repeat;
}

/***paint page****/
#paint-bottom
{
    width: 100%;
    height:89px;
    background: url(../images/paint-bottom.jpg) no-repeat;
    position: absolute;
    bottom: 0;
}
#help_btn
{
    width: 88px;
    height: 88px;
    position: absolute;
    top: 0px;
    right:10px;
    background: url(../images/help_btn.png) no-repeat;
    z-index: 900;
}
#close_help_btn
{
    width: 88px;
    height: 88px;
    position: absolute;
    top: 0px;
    right:10px;
    background: url(../images/close.png) no-repeat;
    z-index: 900;
    display: none;
}



#help
{
    width: 100%;
    height: 576px;
    position: absolute;
    top: -576px;
    background: url(../images/blue2.png) repeat-x;
}
#paint-text
{
    width:645px;
    height: 237px;
    position: absolute;
    top: 125px;
    left: 189px;
    background: url(../images/paint-text.png) no-repeat;
}
.gap
{
    width: 1px;
    height: 59px;
    position: absolute;
    background: url(../images/gap.png) no-repeat;
    bottom: 15px;
}
#gap1
{
    left: 128px;
}
#gap2
{
    left: 215px;
}
.paint-button
{
    width: 59px;
    height: 59px;
    position: absolute;
    bottom: 15px;
    cursor: pointer;
    background-repeat: no-repeat;
}
#brush_btn
{
    background: url(../images/brush.png);
    left: 55px;
}
#eraser_btn
{
    background: url(../images/eraser.png);
    left: 142px;
}
#line_btn
{
    background: url(../images/line.png);
    left: 233px;
}
/*           #wallpaper_btn
{
    background: url(../images/wallpaper.png);
    left: 302px;
}*/
#pattern_box
{
    background: url(../images/pattern_box.png);
    left: 371px;
}
#pattern_adidas
{
    background: url(../images/pattern_adidas.png);
    left: 440px;
}
#pattern_right
{
    background: url(../images/pattern_right.png);
    left: 509px;
}
#pattern_back
{
    background: url(../images/pattern_back.png);
    left: 578px;
}
#pattern_left
{
    background: url(../images/pattern_left.png);
    left: 647px;
}
#canvas
{
    width: 100%;
    height:100%;
    position: absolute;
    left: 0;
    top: 0;
    background: url(../images/bg2.jpg) no-repeat;
}
#preview_btn
{
    width: 59px;
    height: 29px;
    position: absolute;
    bottom: 30px;
    right:167px;
    background: url(../images/preview.png) no-repeat;
}


/***paint page****/

/****season page*****/
#kv-outer
{
    width:100%;
    height: 576px;
    position: absolute;
    left: 0;
    padding: 0;
    margin: 0;
}

#kv-outer ul
{
    width:6080px;
    height: 576px;
    position: absolute;
    left: 0;
    padding: 0;
    margin: 0;
}

#kv-outer ul li
{
    height:100%;
    width: 1024px;
    float: left;
}

#kv-outer img
{
    display: block;
    float:left;
    width:1024px;
    height: 576px;
    padding: 0;
    margin:0;
    border: none;
}
#season_back
{
    width: 88px;
    height: 88px;
    position: absolute;
    top: 0px;
    right:10px;
    background: url(../images/close.png) no-repeat;
    z-index: 100;
}
#preview_back
{
    width: 88px;
    height: 88px;
    position: absolute;
    top: 0;
    right:10px;
    background:black;
    background: url(../images/close.png) no-repeat;
    z-index: 600;
}
#preview_yes
{
    width: 88px;
    height: 88px;
    position: absolute;
    bottom: 0;
    right:10px;
    background:black;
    background: url(../images/yes.png) no-repeat;
    z-index: 600;
}

#Kv-count
{
    width: 230px;
    height: 20px;
    position: absolute;
    bottom: 20px;
    left:50%;
    margin-left: -115px;
    z-index: 100;
}
#Kv-count div
{
    width: 15px;
    height: 15px;
    background:#434343;
    border-radius: 50%;
    opacity: 0.7;
    float: left;
    margin-left: 20px;
}
#Kv-count .current
{
    background: #ffffff;
    opacity: 0.7;
}
/******preview*******/
#preview-div1
{
    width: 100%;
    height: 100%;
    position:absolute;
    top: 0;
    left:0;
    background: url('../images/road1.jpg') no-repeat;
}
#preview-div1-1
{
    width:358px;
    height:576px;
    position:absolute;
    top:0;
    left:0;
    background: url('../images/road1_1.png') no-repeat;
    z-index: 100;
}

#preview-canvas1
{
    width: 184px;
    height: 390px;
    position:absolute;
    top:85px;
    left:173px;
    z-index: 1;
}
#preview-canvas2
{
    width: 184px;
    height: 390px;
    position:absolute;
    top:85px;
    left: 569px;
    z-index: 1;
}

#preview-div2
{
    width: 100%;
    height: 100%;
    position:absolute;
    top: 0;
    left:0;
    background: url('../images/road2.jpg') no-repeat;
    z-index: 0;
}
#preview-div2-1
{
    width: 456px;
    height: 576px;
    position:absolute;
    top: 0;
    right:0;
    background: url(../images/road2_1.png) no-repeat;
    z-index: 2;
}
.preview2
{
    opacity:0;
}
#final_canvas
{
    width: 1024px;
    height:576px;
    position: absolute;
    z-index: -1000;
}
/******preview*******/
/*******loading********/
.loading
{
    width: 100%;
    height:100%;
    background:#326DAD;
    /*background: url(../images/loading.jpg) no-repeat;*/
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99999999;
}
#loading-center
{
    width: 330px;
    height:140px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -165px;
    margin-top: -70px;
    z-index: 999999999;
}
.loading-text
{
    width: 200px;
    height:25px;
    position: absolute;
    top: 80px;
    left:65px;
    background: url(../loading/loading-text1.png) no-repeat;
}

#loading-bar-outer
{
    width: 290px;
    height:2px;
    border-radius: 1px;
    position:absolute;
    left:20px;
    bottom: 0;
}

#loading-bar-bg
{
    width: 100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    opacity: 0.6;
    background: #4D98C6;
    z-index: 10;
}
#loading-bar
{
    width: 0;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    background: #ffffff;
    z-index: 20;
}
.adidas-text
{
    width: 330px;
    height:70px;
    position: absolute;
    top:50%;
    left:50%;
    margin-top: -90px;
    margin-left: -165px;
    background:url('../loading/adidas-text.png') no-repeat;
    z-index: 999999999;
}
#loadinvDiv
{
    width: 100%;
    height:100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index:999999999;
    opacity:0.5;
    display:none;
}
#paint-back
{
    width: 154px;
    height: 70px;
    position: absolute;
    top:0px;
    left: 10px;
    background: url(../images/back.png) no-repeat;
    z-index: 900;
}