html, body{
margin:0px;padding:0px;height:100%;width:100%;font-family:"Times New Roman",Serif;font-size:15px;overflow:hidden;
}
img{
vertical-align:middle;
}
/* Page Setting */
body>.page{
z-index:0;position:absolute;top:0px;left:0px;width:100%;height:100%;overflow:hidden;
}
.page>.head{
width:100%;height:45px;line-height:45px;
background-color:#f0f4f8;background:-moz-linear-gradient(top, rgba(242,245,246,1) 0%, rgba(227,234,237,1) 37%, rgba(200,215,220,1) 100%);background:-webkit-linear-gradient(top, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%);
}
.page>.head>.button{
float:left;width:45px;height:45px;background-repeat:no-repeat;background-position:center center;
}
.page>.head>.title{
width:100%;font-size:17px;font-weight:bold;text-align:center;
}
.page>.head>.menu-trigger{
float:right;width:45px;height:45px;
background-image:url("images/menu.png");background-repeat:no-repeat;background-position:center center;
}
.page>.head>.menu{
z-index:10;position:absolute;top:45px;right:0px;min-width:100px;max-width:200px;background-color:#345;display:none;
}
.page>.head>.menu>.item{
width:90%;padding:5px 10%;height:30px;line-height:30px;color:#fff;font-weight:bold;
}
.page>.content{
width:100%;overflow-y:scroll;overflow-x:visible;
}
.page>.transparency{
background-image:url("images/transparency.png");background-repeat:repeat;
}
.page>.bottom{
position:absolute;left:0px;bottom:0px;width:100%;height:55px;line-height:55px;
}
/* Home */
.head>.icon{
background-image:url("images/icon.png");
}
.content>.mode{
width:100%;height:65px;line-height:65px;text-align:center;border-bottom:1px solid #ccc;
}
.content>.news{
width:100%;height:250px;margin-top:15px;display:none;
}
/* Selector */
.head>.back{
background-image:url("images/back.png");
}
.content>.photo{
display:inline-block;overflow:hidden;text-align:center;vertical-align:top;
background-image:url("images/add.png");background-size:24px 24px;background-repeat:no-repeat;background-position:center center;
}
.content>.selected{
border:2px solid #f00;
}
.bottom>.remove-all{
float:left;width:50px;height:55px;
background-image:url("images/remove-all.png");background-repeat:no-repeat;background-position:center center;
}
.bottom>.info{
width:100%;text-align:center;
}
.bottom>.start-editor{
float:right;width:50px;height:55px;
background-image:url("images/start-editor.png");background-repeat:no-repeat;background-position:center center;
}
/* Editor */
.content>.ground{
margin-left:auto;margin-right:auto;background-color:#fff;
}
.content>.ground>canvas{
z-index:1;position:absolute;
}
.content>.ground>div{
z-index:2;position:absolute;padding-right:15px;padding-bottom:10px;white-space:nowrap;
}
.content>.ground>div>.remove{
z-index:3;position:absolute;top:-25px;right:-25px;width:30px;height:30px;line-height:30px;font-size:15px;background-color:#800000;font-weight:bold;color:#ffffff;text-align:center;display:none;
background-repeat:no-repeat;background-position:center center;background-image:url("images/text-remove.png");
opacity:1;
}
.content>.ground>.selected{
border:1px solid #f00;
}
.content>.ground>.selected>.remove{
display:block;
}
.bottom>.group{
width:100%;height:100%;
}
.bottom>.collage{
width:320px;height:100%;margin:0px auto;
}
.bottom>.frame{
width:275px;height:100%;margin:0px auto;
}
.bottom>.tuner{
width:100%;height:100%;
}
.tuner>.back{
background-image:url("images/tuner-back.png");border-right:2px dashed #ddd;
}
.tuner>.control{
margin-left:55px;width:260px;height:55px;overflow:auto;overflow-y:hidden;
}
.tuner>.control>.box{
height:55px;
}
.tuner>.control>.box>.layout, .tuner>.control>.box>.ratio, .tuner>.control>.box>.background, .tuner>.control>.box>.filter{
float:left;width:45px;height:55px;
background-repeat:no-repeat;background-position:center center;
}
.tuner>.control>.box>.text-family{
display:inline-block;width:100px;height:25px;line-height:25px;font-size:15px;vertical-align:middle;margin:0px 5px;
}
.tuner>.control>.box>.text-style{
display:inline-block;vertical-align:middle;width:40px;height:55px;
background-repeat:no-repeat;background-position:center center;
}
.tuner>.control>.box>.selected{
height:52px;border-bottom:3px solid #c96;
}
.tuner>.control>.bar{
display:inline-block;height:25px;margin-left:20px;margin-top:15px;border-radius:5px;background-color:#f0f0f0;box-shadow:0px 0px 5px #aaa inset;
}
.tuner>.control>.bar >.knob{
float:left;margin-top:-5px;width:36px;height:36px;line-height:36px;border-radius:8px;background-color:#999;color:#fff;text-align:center;
}
.tuner>.control>.bar >.move{
background-color:#f99;line-height:0px;color:#000;font-size:1.2em;
}
.group>.tool{
float:left;width:45px;height:55px;
background-repeat:no-repeat;background-position:center center;
}
.collage>.layout{
background-image:url("images/layout.png");
}
.collage>.ratio{
background-image:url("images/ratio.png");
}
.collage>.edge{
background-image:url("images/edge.png");
}
.collage>.space{
background-image:url("images/space.png");
}
.collage>.radius{
background-image:url("images/radius.png");
}
.collage>.background{
background-image:url("images/background.png");
}
.collage>.text{
background-image:url("images/text.png");
}
.frame>.zoomin{
background-image:url("images/zoomin.png");
}
.frame>.zoomout{
background-image:url("images/zoomout.png");
}
.frame>.rotate-cw{
background-image:url("images/rotate-cw-45.png");
}
.frame>.rotate-ccw{
background-image:url("images/rotate-ccw-45.png");
}
.frame>.swap{
background-image:url("images/swap.png");
}
.frame>.filter{
background-image:url("images/filter.png");
}
/* General Use */
.clear{
clear:both;
}
.mask{
z-index:10;position:absolute;top:0px;left:0px;width:100%;height:100%;background-color:#000;opacity:0.5;display:none;
}
.loading{
z-index:20;position:absolute;top:0px;left:0px;width:100%;height:60%;margin-top:30%;display:none;
color:#fff;font-size:20px;font-weight:bold;text-align:center;
}
.touch-gray{
background-color:#ccc;
}
.touch-blue{
background-color:#345;
}