html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var,optgroup{font-style:inherit;font-weight:inherit;}del,ins{text-decoration:none;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:baseline;}sub{vertical-align:baseline;}legend{color:#000;}input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}input,button,textarea,select{*font-size:100%;}
a{color:#0088cc;text-decoration:none;}
a:hover{color:#005580;text-decoration:underline;}
body, table{font-family: Arial, sans-serif;font-size:13px; line-height:18px;}
body{font-style: normal;}

#container{
    width: 100%;
}

.row {
    *zoom: 1;
}
.row:before,
.row:after {
    display: table;
    content: "";
}
.row:after {
    clear: both;
}

.clearfix:before, .clearfix:after{content:"."; display:block; height:0; visibility:hidden;}
.clearfix:after{clear:both;}
.clearfix{zoom:1;}

#screen{
    position: absolute;
    left:0;
    top:36px;
    right:0;
    bottom:0;
    background: #eee;
    z-index: 1000;
}

a, a:link, a:visited{color:#09c; text-decoration:underline;}
a:hover, a:active{color:#f00; text-decoration:underline;}

a.pseudo:link, a.pseudo:visited{color:#09c; border-bottom:1px dotted #09c; text-decoration:none;}
a.pseudo:hover, a.pseudo:active{color:#f00; border-bottom:1px dotted #f00; text-decoration:none;}

b{font-weight: normal;}
strong{font-weight: bold;}


#about{
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 0 0 9px 20px;
    z-index: 100;
    font-size: 11px;
    color:#666;
}
#appendix{
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 0 20px 9px 0;
    z-index: 100;
    font-size: 11px;
    color:#666;
    width:200px;
}

.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
    font-family: inherit;
    font-size: 0.95em;
    font-style: inherit;
    font-weight: inherit;
    padding: 0.1em;
}


label.prop-label{
    font-weight: bold;
}
.radio-option input{
    vertical-align: top;
}
.radio-option label{
    vertical-align: top;
    padding-left: 4px;
}

#pline,#bline,#toolbar,#leftside, #rightside{
    background:#eee;
    position:absolute;
}

#hline{
    background: #000;
    position: absolute;
    width: 100%;
    height:36px;
}

#pline{
    width: 100%;
    top:36px;
    height:108px;
    border-bottom: 1px solid #ccc;
}

#bline{
    bottom: 0;
    width: 100%;
    height:54px;
    border-top: 1px solid #ccc;
}

#toolbar{
    top:144px;
    left:240px;
    right:240px;
    height:30px;
    border: 1px solid #ccc;
    padding:8px 8px 2px 8px;
}

#leftside, #rightside{
    width:240px;
    top:144px;
    bottom:54px;
    border: 1px solid #ccc;
}

#leftside{
    left:0;
    border-left: none;
}
#rightside{
    right:0;
    border-right: none;
}

#logo{
    width:110px;
    margin: 6px 0 4px 54px;
}

#slogan{
    position: absolute;
    margin:-4px 0 0 4px;
}

#logo a:link, #logo a:visited, #logo a:hover, #logo a:active{color:#ccc; text-decoration:none; font-size:12px;}

#share{
    height: 32px;
    position: absolute;
    right: 20px;
    top: 0px;
    padding-left: 10px;
}
.share{
    float: right;
    margin-top: 8px;
}
.share.yashare{
    margin-top: 4px;
}
.share.addthis_toolbox{
    margin-top: 10px;
}
#hshare{
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 100;
    background: none repeat scroll 0 0 #000000;
    opacity: 0.5;
}

#oklass{
    width:150px;
}
#oklass .like-button-mm {
    margin-right: 30px;
}
#fblike{
    margin-right: 0;
}

#addcont{
    width: 220px;
    float:left;
}

#addlinks{
    width:184px;
    text-align: center;
    margin: -4px 0 0 20px;
    font-size: 11px;
}

#share .addthis_toolbox{
    width:144px;
}

#addlinks a{margin: 0 0.5em;}


.prop-item{
    margin:18px;
    margin-bottom:0;
}

.prop-select{
    width:200px;
}

#frames-region{
    position: absolute;
    right:0;
    left:240px;
    height:108px;

    border: 1px solid #ccc;

    /*
    background:#ccc;
    -moz-box-shadow:    inset 0 1px 5px #000000;
    -webkit-box-shadow: inset 0 1px 5px #000000;
    box-shadow:         inset 0 1px 5px #000000;
    */
}
#uploadButtonWrapper{
    margin: 20px 20px 0 20px;
}

#uploadProcess{
    /*display:none;*/
    position:absolute;
    z-index: 2000;
    width:220px;
    height:40px;
    text-align:center;
    margin:0 0 0 -110px;
    left:50%;
    top:60px;
    background: #f9edbe;
    border:1px solid #f0c36d;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;

    -moz-box-shadow: 0px 1px 10px #666;
    -webkit-box-shadow: 0px 1px 10px #666;
    box-shadow: 0px 1px 10px #666;
}
#uploadProgressTxt{
    font-size:10px;
    margin:2px 0 0 0;
    display:inline-block;
    height:16px;}
#uploadProgressOutline{
    background: #fff;
    width:200px;
    border: 1px solid #09c;
    padding: 1px;
    margin:4px 8px;
}
#uploadProgress{
    background: url(/i/prog.gif) repeat-x 0 50%;
    width:200px;
    height: 6px;
}
#resultProcess{
    margin-left: -100px;
    padding-left: 50%;
    text-align: center;
    width: 200px;
    display: none;
}
#resultProgress{
    background: url(/i/prog.gif) repeat-x 0 50%;
    border: 1px solid #069;
    height: 12px;
    margin-top: 9px;
    width: 200px;
}

#uploadButtonPseudo{display:none; margin: 20px 20px 4px 20px; width:200px; height:64px; background:url(/i/sprites2.png) no-repeat 0 0;}

#frames-region{
    float:left;
    padding:0;
    overflow-x:auto;
    overflow-y:hidden;
}

#frames{
    /*background:url('/i/flbg.png') repeat-x 0 0;*/
}
#frames ul{
    list-style:none;
    padding: 0;
    margin: 2px 0 0 18px;
    height: 88px;
}
#frames li{
    list-style:none;
    margin:0;
    display:inline;
    float:left;
    width:130px;
}
#frames li a.afr{
    width:80px;
    height:60px;
    display:block;
    /*    cursor: move;*/
}
/*#frames li a.afr.active{
    margin:0px;
    border-color: #0099CC;
}*/

#frames a.ax{
    text-indent:-9999px;
    overflow: hidden;
    width:17px;
    height:17px;
    display:none;
    margin:-7px -8px 0 0;
    background: url('/i/sprites2.png') no-repeat -320px 0px;
    float:right;
}
#frames a.ax:hover{
    background: url('/i/sprites2.png') no-repeat -320px -20px;
}

#frames .fbox{
    background: #ccc;
    padding:3px;
    border: 1px solid #999999;
    width:80px;
    float:left;
}

#frames .fbox.active{
    background: #09c;
}

#frames .mover{
    overflow: hidden;
    width:17px;
    height:17px;
    display:none;
    margin: -7px 0 0 -7px;
    background: url('/i/sprites2.png') no-repeat -340px 0px;
    position: absolute;
    cursor: move;
}

#frames ul li input{
    text-align: center;
}

.frame-time{
    width:31px;
    font-size:10px;
    margin: 0 0 0 23px;
    padding:1px;
    border: 1px solid #999;
}


#workspace{
    position: absolute;
    left: 240px;
    right: 240px;
    top: 184px;
    bottom:54px;
    background: url(/i/trans.png);
    overflow: auto;
}
#frame-wrapper{
    margin: 0px;
    width:100%;
    height:100%;
}

#frame-valign{
    display: table-cell;
    vertical-align: middle;
}
#frame{
    line-height: 0;
    text-align: center;
    /*background: #0f0;*/
}
.table {display:table;}
.table .tr, .table .td { position: relative;}
.vmiddle {vertical-align:middle;}
.vmiddle .tr, .vmiddle .td {  //top: 50%; width: 100%;}
.vmiddle .td {//top: -50%;}
#frame{
    line-height: 0;
    text-align: left;
}

#vborder{
    display: none;
    position: absolute;
    border:1px dotted #00f;
    width:0px;
    height:0px;
    z-index: 100;
}

.smk{
    /*background: url(/i/smk.png);*/
    background: #fff;
    opacity:0.8;
    position: absolute;
}
/***/
.efblock{
    width:40px;
    height:80px;
    float:left;
}
.efbtn{
    display: block;
    position:absolute;
    width:26px;
    height:20px;
    margin: 20px 0 0 7px;
}
.ieftime{
    width:24px;
    font-size:10px;
    margin: 4px 0 0 8px;
    display: none;
}

/***/

.slider-box{
    position:absolute;
    display:block;
    background: #eee;
    border:1px solid #999;
    border-radius:3px;
    -khtml-border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    margin:8px;
    -moz-box-shadow: 0px 1px 4px #666;
    -webkit-box-shadow: 0px 1px 4px #666;
    box-shadow: 0px 1px 4px #666;
}
.slider-box .buttons{
    border:none;
    border-top:1px solid #ccc;
    padding: 6px 8px;
    text-align:center;
}
.slider-box button{
    /*float:left;
    margin:0 4px 0 0;*/
    font-size:9px;
    margin:0;
}
#gspeed-slider-title,#geffect-slider-title{
font-size: 9px;
padding: 0px 10px;
border-bottom: 1px solid #CCC;
color: #666;
}
#gspeed-slider-box{
    display:none;
    width:130px;
}
#geffect-slider-box{
    display:none;
    width:130px;
    /*padding:8px;*/
}

/***/

.ui-slider-horizontal {
    height: 4px;
    margin:8px;
}

.ui-slider-horizontal .ui-slider-handle {
    margin-left: -4px;
    top: -7px;
}
.ui-slider .ui-slider-handle {
    cursor: default;
    height: 16px;
    position: absolute;
    width: 6px;
    z-index: 2;
}

/***/

.efbtn{
    background-color: #ffffff;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee', GradientType=0 );
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(20%, #ffffff), color-stop(50%, #f6f6f6), color-stop(52%, #eeeeee), color-stop(100%, #f4f4f4));
    background-image: -webkit-linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
    background-image: -moz-linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
    background-image: -o-linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
    background-image: -ms-linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
    background-image: linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
    -webkit-border-radius: 5px;
    -moz-border-radius   : 5px;
    border-radius        : 5px;
    -moz-background-clip   : padding;
    -webkit-background-clip: padding-box;
    background-clip        : padding-box;
    border: 1px solid #aaaaaa;
    -webkit-box-shadow: 0 0 3px #ffffff inset, 0 1px 1px rgba(0,0,0,0.1);
    -moz-box-shadow   : 0 0 3px #ffffff inset, 0 1px 1px rgba(0,0,0,0.1);
    box-shadow        : 0 0 3px #ffffff inset, 0 1px 1px rgba(0,0,0,0.1);
    display: block;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    line-height: 24px;
    padding: 0 0 0 0px;
    color: #444444;
    text-decoration: none;

    width: 26px;
    height: 24px;
}

.efbtn .icon{
    width:20px;
    height:20px;
    margin:2px 3px;
    background:url(/i/effects.png) no-repeat 0 0;
}

#effectSelector{
    display:none;
    position:absolute;
    width:300px;
    /*height:300px;*/

    -moz-border-bottom-colors: none;
    -moz-border-image: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: none repeat scroll 0 0 #eee;
    border-color: #AAAAAA;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
    z-index: 999;

    background-clip: padding-box;

    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

#effectSelectorTitle{
    border-bottom: 1px solid #AAAAAA;
    color: #999999;
    font-weight: bold;
    padding: 4px;
    cursor: default;
}

#effectSelectorList{
    /*float:left;*/
    /*width:300px;*/
    background: #fff;
    height:300px;
    overflow-y:scroll;
}
#effectSelectorList ul{
    padding: 1px 0 4px;
}
#effectSelectorList ul li{
    clear:both;
    height:24px;
    vertical-align: middle;
    cursor: default;
}
#effectSelectorList ul li span{
    float:left;
    display:inline;
    margin:2px 0;
}
#effectSelectorList ul li span.icon{
    background:url(/i/effects.png) no-repeat 0 0;
    width:20px;
    height:20px;
    margin:2px 4px 2px 3px;
}
#effectSelectorList ul li span.txt{
    font-size: 12px;
    margin: 3px 0 0 0;
}

#effectSelectorList ul li.title span.txt{
    margin-left:4px;
    font-weight:bold;
    color:#999;
}
#effectSelectorList ul li.effect{
    cursor: pointer;
}
#effectSelectorList ul li.effect.highlighted{
    background-color: #e6ebf2;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6ebf2', endColorstr='#c3d0e5', GradientType=0 );
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(20%, #e6ebf2), color-stop(90%, #c3d0e5));
    background-image: -webkit-linear-gradient(top, #e6ebf2 20%, #c3d0e5 90%);
    background-image: -moz-linear-gradient(top, #e6ebf2 20%, #c3d0e5 90%);
    background-image: -o-linear-gradient(top, #e6ebf2 20%, #c3d0e5 90%);
    background-image: -ms-linear-gradient(top, #e6ebf2 20%, #c3d0e5 90%);
    background-image: linear-gradient(top, #e6ebf2 20%, #c3d0e5 90%);
    color: #000;
}
#effectSelectorList ul li.effect.selected{
    background-color: #3875d7;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3875d7', endColorstr='#2a62bc', GradientType=0 );
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(20%, #3875d7), color-stop(90%, #2a62bc));
    background-image: -webkit-linear-gradient(top, #3875d7 20%, #2a62bc 90%);
    background-image: -moz-linear-gradient(top, #3875d7 20%, #2a62bc 90%);
    background-image: -o-linear-gradient(top, #3875d7 20%, #2a62bc 90%);
    background-image: -ms-linear-gradient(top, #3875d7 20%, #2a62bc 90%);
    background-image: linear-gradient(top, #3875d7 20%, #2a62bc 90%);
    color: #fff;
}


#effectSelectorPad{
    border-top:1px solid #AAA;
    padding: 8px;
}
#effectSelectorPad .buttons{
    float:right;
    /*width:80px;*/
}
#effectSelectorPad .buttons button{
    font-size:11px;
    /*padding:2px 4px 0px 4px;*/
    margin:2px 0 2px 0;
    /*width:80px;*/
}

/***/

.tba{
    background-color: #ffffff;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee', GradientType=0 );
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(20%, #ffffff), color-stop(50%, #f6f6f6), color-stop(52%, #eeeeee), color-stop(100%, #f4f4f4));
    background-image: -webkit-linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
    background-image: -moz-linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
    background-image: -o-linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
    background-image: -ms-linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
    background-image: linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
    -webkit-border-radius: 5px;
    -moz-border-radius   : 5px;
    border-radius        : 5px;
    -moz-background-clip   : padding;
    -webkit-background-clip: padding-box;
    background-clip        : padding-box;
    border: 1px solid #aaaaaa;
    -webkit-box-shadow: 0 0 3px #ffffff inset, 0 1px 1px rgba(0,0,0,0.1);
    -moz-box-shadow   : 0 0 3px #ffffff inset, 0 1px 1px rgba(0,0,0,0.1);
    box-shadow        : 0 0 3px #ffffff inset, 0 1px 1px rgba(0,0,0,0.1);
    display: block;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    line-height: 24px;
    padding: 0 0 0 0px;
    color: #444444;
    text-decoration: none;

    width: 26px;
    height: 23px;
    float:left;
    margin:0 2px 0 0;
}

.tba.checked{
    background-color: #dddddd;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dddddd', endColorstr='#cccccc', GradientType=0 );
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(20%, #dddddd), color-stop(50%, #d6d6d6), color-stop(52%, #cccccc), color-stop(100%, #d4d4d4));
    background-image: -webkit-linear-gradient(top, #dddddd 20%, #d6d6d6 50%, #cccccc 52%, #d4d4d4 100%);
    background-image: -moz-linear-gradient(top, #dddddd 20%, #d6d6d6 50%, #cccccc 52%, #d4d4d4 100%);
    background-image: -o-linear-gradient(top, #dddddd 20%, #d6d6d6 50%, #cccccc 52%, #d4d4d4 100%);
    background-image: -ms-linear-gradient(top, #dddddd 20%, #d6d6d6 50%, #cccccc 52%, #d4d4d4 100%);
    background-image: linear-gradient(top, #dddddd 20%, #d6d6d6 50%, #cccccc 52%, #d4d4d4 100%);

    box-shadow: 0 0 3px #999999 inset, 0 1px 1px rgba(0, 0, 0, 0.1);
}

.tba.drop{
    -webkit-border-radius: 5px 5px 0 0;
    -moz-border-radius   : 5px 5px 0 0;
    border-radius        : 5px 5px 0 0;
    height: 24px;
}

#cbFontName{width:150px;}
#cbFontSize{width:80px;}
#cbFontName_chzn, #cbFontSize_chzn{float:left;margin:0 2px 0 0;}

#toolbar .tba{text-decoration:none;color:#444;}
#toolbar .tba .icon{
    width: 20px;
    height:20px;
    margin: 2px 0 0 3px;
    float: left;
}
#toolbar .tba .color{
    width: 16px;
    height:2px;
    position: absolute;
    margin: 18px 0 0 4px;
    border:1px solid #999;
}
#toolbar .tba span{margin:0 8px 0 4px;}
#tbShapes, #tbDeleteShape{width:auto;}
#tbShapes.tba .icon{background: url(/i/tb.png) no-repeat -5px -3px; margin: 2px 0 0 5px; width:22px;}
#tbFontBold .icon{background: url(/i/tb.png) no-repeat -35px -3px;}
#tbFontItalic .icon{background: url(/i/tb.png) no-repeat -65px -3px;}

#tbBrushColor .icon{background: url(/i/tb.png) no-repeat -125px -3px;}
#tbPenColor .icon{background: url(/i/tb.png) no-repeat -155px -3px;}
#tbTextColor .icon{background: url(/i/tb.png) no-repeat -95px -3px;}
#tbDeleteShape .icon{background: url(/i/tb.png) no-repeat -185px -3px;}

.tbi.disabled{
    cursor:default;
    opacity:0.5;
}


/*****/
#shapeSelector{
    display:none;
    position:absolute;
    width:240px;
    /*height:300px;*/
    background:#fff;

    -moz-border-bottom-colors: none;
    -moz-border-image: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: none repeat scroll 0 0 #FFFFFF;
    border-color: #AAAAAA;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
    z-index: 999;

    background-clip: padding-box;
    /*border-radius: 0 0 4px 4px;*/
    /*padding:2px;*/

    -moz-border-radius:0 0 4px 4px;
    -webkit-border-radius:0 0 4px 4px;
    border-radius:0 0 4px 4px;
}

#shapeSelectorList{
    /*float:left;*/
    /*width:300px;*/
    height:300px;
    overflow-y:auto;
    margin:4px;
}
#shapeSelectorList ul{
    padding: 1px 0 4px;
}
#shapeSelectorList ul li{
    clear:both;
    height:24px;
    vertical-align: middle;
    cursor: default;
}
#shapeSelectorList ul li span{
    float:left;
    display:inline;
    margin:2px 0;
}
#shapeSelectorList ul li span.icon{
    background:url(/i/shapes.png) no-repeat 0 0;
    width:20px;
    height:20px;
    margin:2px 4px 2px 3px;
}
#shapeSelectorList ul li span.txt{
    font-size: 12px;
    margin: 3px 0 0 0;
}

#shapeSelectorList ul li.title span.txt{
    margin-left:4px;
    font-weight:bold;
    color:#999;
}
#shapeSelectorList ul li.shape{
    cursor: pointer;
}
/*#shapeSelectorList ul li.shape.highlighted{
    background-color: #e6ebf2;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6ebf2', endColorstr='#c3d0e5', GradientType=0 );
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(20%, #e6ebf2), color-stop(90%, #c3d0e5));
    background-image: -webkit-linear-gradient(top, #e6ebf2 20%, #c3d0e5 90%);
    background-image: -moz-linear-gradient(top, #e6ebf2 20%, #c3d0e5 90%);
    background-image: -o-linear-gradient(top, #e6ebf2 20%, #c3d0e5 90%);
    background-image: -ms-linear-gradient(top, #e6ebf2 20%, #c3d0e5 90%);
    background-image: linear-gradient(top, #e6ebf2 20%, #c3d0e5 90%);
    color: #000;
}*/
#shapeSelectorList ul li.shape.highlighted, #shapeSelectorList ul li.shape.selected{
    background-color: #3875d7;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3875d7', endColorstr='#2a62bc', GradientType=0 );
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(20%, #3875d7), color-stop(90%, #2a62bc));
    background-image: -webkit-linear-gradient(top, #3875d7 20%, #2a62bc 90%);
    background-image: -moz-linear-gradient(top, #3875d7 20%, #2a62bc 90%);
    background-image: -o-linear-gradient(top, #3875d7 20%, #2a62bc 90%);
    background-image: -ms-linear-gradient(top, #3875d7 20%, #2a62bc 90%);
    background-image: linear-gradient(top, #3875d7 20%, #2a62bc 90%);
    color: #fff;
}


/*****/
#colorSelector{
    display:none;
    position:absolute;
    width:170px;
    /*height:300px;*/
    background:#fff;

    -moz-border-bottom-colors: none;
    -moz-border-image: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: none repeat scroll 0 0 #FFFFFF;
    border-color: #AAAAAA;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
    z-index: 999;

    background-clip: padding-box;
    /*border-radius: 0 0 4px 4px;*/
    /*padding:2px;*/

    -moz-border-radius:0 0 4px 4px;
    -webkit-border-radius:0 0 4px 4px;
    border-radius:0 0 4px 4px;
}

#colorSelectorList{
    /*float:left;*/
    /*width:300px;*/
    height:146px;
    margin:4px;
}
#colorSelectorList ul{
    padding: 1px 0 4px;
}
#colorSelectorList ul li{
    /*clear:both;*/
    /*height:24px;*/
    vertical-align: middle;
    cursor: default;
    float:left;
    padding:2px;
    border: 1px solid #fff;
}
#colorSelectorList ul li span.color{
    float:left;
    display:inline;
    margin:0;
    width:10px;
    height:10px;
    border:1px solid #999;
}
#colorSelectorList ul li.selected, #colorSelectorList ul li.highlighted{
    border: 1px solid #3875d7;
    background-color: #e6ebf2;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6ebf2', endColorstr='#c3d0e5', GradientType=0 );
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(20%, #e6ebf2), color-stop(90%, #c3d0e5));
    background-image: -webkit-linear-gradient(top, #e6ebf2 20%, #c3d0e5 90%);
    background-image: -moz-linear-gradient(top, #e6ebf2 20%, #c3d0e5 90%);
    background-image: -o-linear-gradient(top, #e6ebf2 20%, #c3d0e5 90%);
    background-image: -ms-linear-gradient(top, #e6ebf2 20%, #c3d0e5 90%);
    background-image: linear-gradient(top, #e6ebf2 20%, #c3d0e5 90%);
    color: #000;
}


/**********/
.scont{
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 200;
    overflow: hidden;
}

.sbox{
    position:absolute;
    text-align: center;
    vertical-align: middle;
}


.sbox{position:absolute; text-align:center; vertical-align:middle; padding:1px; cursor:default; -moz-user-select:none; -o-user-select:none; -khtml-user-select:none;}

.rb{display:none;position:absolute; float:none; overflow: hidden; border:1px solid #000; background:#0f0;z-index:10;padding:0;margin:0;width:5px; height:5px; //width:7px;//height:7px;}
.sbox .nw{cursor:nw-resize;left:0;top:0;margin-left:-4px;margin-top:-4px;}
.sbox .ne{cursor:ne-resize;left:100%;top:0;margin-left:-3px;margin-top:-4px;}
.sbox .sw{cursor:ne-resize;left:0;top:100%;margin-left:-4px;margin-top:-3px;}
.sbox .se{cursor:nw-resize;left:100%;top:100%;margin-left:-3px;margin-top:-3px;}
.sbox .n{cursor:n-resize;left:50%;top:0;margin-left:-3px;margin-top:-4px;}
.sbox .s{cursor:n-resize;left:50%;top:100%;margin-left:-3px;margin-top:-3px;}
.sbox .w{cursor:w-resize;left:0;top:50%;margin-left:-4px;margin-top:-3px;}
.sbox .e{cursor:w-resize;left:100%;top:50%;margin-left:-3px;margin-top:-3px;}
.lb{display:none;position:absolute; float:none; overflow: hidden; border:1px solid #000;
    background:#f00;z-index:20;padding:0;margin:0;width:5px; height:5px; //width:7px;//height:7px;left:10px;top:10px; margin-left:-4px;margin-top:-4px;cursor:default;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

span.st{//display:block;//position:absolute;//top:50%;//left:0%;//width:100%;}
span.st span{//position: relative;//top: -50%;}

.sbox.selected {display:table-cell; border:1px dashed #0f0;cursor:move; padding:0;}
.sbox.selected .rb{display:block;}
.sbox.selected .lb{display:block;}
.sbox.selected canvas{margin:0px;}

.dt{position:relative; vertical-align:middle;padding:0; margin:0;}

.ta{width:100%; height:100%; text-align:center; vertical-align:middle;padding:0; margin:0;}
.ta table{width:100%; height:100%; text-align:center; vertical-align:middle;padding:0; margin:0;}
.ta table td{padding:0; margin:0; font-size:20px; line-height: 120%;}

.sbox canvas{left:1px; top:1px; position:absolute;padding:1px;}
.sbox.selected canvas{left:0; top:0; position:absolute;padding:0px;}
/*.selected .tr{padding-top:0px;padding-left:0px;}*/

#frame textarea{position:absolute; text-align:center; z-index:1000;display:none; overflow:auto; border:none; background:transparent;}

#camera{
    width: 320px;
    height: 240px;
    background:url(/i/proc2.gif) no-repeat 50% 50%;
}
#cameraLoading{
    position: absolute;
}



.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    border: 1px solid #aaa;
    font-weight: normal;
    color: #333;

    background: #cccccc;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #ffffff), color-stop(100%, #cccccc));
    background-image: -webkit-linear-gradient(top, #ffffff 0%, #cccccc 100%);
    background-image: -moz-linear-gradient(top, #ffffff 0%, #cccccc 100%);
    background-image: -o-linear-gradient(top, #ffffff 0%, #cccccc 100%);
    background-image: -ms-linear-gradient(top, #ffffff 0%, #cccccc 100%);
    background-image: linear-gradient(top, #ffffff 0%, #cccccc 100%);
}

.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
    background: #eeeeee;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #ffffff), color-stop(100%, #eeeeee));
    background-image: -webkit-linear-gradient(top, #ffffff 0%, #eeeeee 100%);
    background-image: -moz-linear-gradient(top, #ffffff 0%, #eeeeee 100%);
    background-image: -o-linear-gradient(top, #ffffff 0%, #eeeeee 100%);
    background-image: -ms-linear-gradient(top, #ffffff 0%, #eeeeee 100%);
    background-image: linear-gradient(top, #ffffff 0%, #eeeeee 100%);
}

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
    background: #ccc;
}

.ui-button-text-only .ui-button-text {
    padding: 0.2em 0.6em;
}
.ui-button .ui-button-text {
    display: block;
    line-height: 1.3;
}


.ui-corner-all{
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
}

.ui-widget button, .ui-button {
    padding: 0.1em 0.5em;
}

.ui-dialog{
    -moz-box-shadow: 0px 5px 20px #666;
    -webkit-box-shadow: 0px 5px 20px #666;
    box-shadow: 0px 5px 20px #666;
    padding: 0;
    background: #eee;
}
.ui-dialog-title{cursor: default;}
.ui-dialog .ui-dialog-titlebar {
    padding: 12px 20px;
}
.ui-widget-header {
    background: none repeat scroll 0 0 transparent;
    border: medium none;
    color: #666666;
    font-size: 17px;
    font-weight: normal;
}
.ui-widget-content {
    border: 1px solid #CCCCCC;
    color:#666;
}

.ui-dialog .ui-dialog-buttonpane {
    padding: 8px;
}

.ui-dialog .ui-dialog-titlebar-close {
    height: 18px;
    margin: -8px 0 0;
    padding: 1px;
    position: absolute;
    right: 12px;
    top: 50%;
    width: 19px;
}

.ui-dialog-titlebar-close.ui-state-hover{
    border: 1px solid #999;
}

.ui-dialog .ui-dialog-content {
    background: none repeat scroll 0 0 transparent;
    border: 0 none;
    overflow: auto;
    padding: 1em 15px 1em 24px;
    position: relative;
}

#resultDialog{
    overflow: hidden;
}
#resultDialog .main{
    overflow: auto;
}
#resultDialog .adv{
    text-align: center;
    padding-top: 18px;
}


.ui-widget-header .ui-icon {
    background-image: url(/i/sprites2.png);
}

.ui-icon-closethick {
    background-position: -320px -40px;
}

.ui-state-hover .ui-icon-closethick {
    background-position: -320px -60px;
}

#customSizeDialog .dialogItem{padding:0 0 10px 0;}
#customSizeDialog .dialogItem label{float:left;width:80px;}
#customSizeDialog .dialogItem input{width:70px;}

#urlDialog .dialogItem{padding:0 0 10px 0;}
#urlDialog .dialogItem label{float:left;margin-right:10px;}
#url{width:420px;}


#done{
    height: 36px;
    left: 50%;
    margin: 9px 0 0 -55px;
    position: absolute;
    width: 110px;
    font-size: 17px;
}
#done.ui-corner-all{
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
}
#done, #done.ui-state-focus{
    border: 1px solid #336633;
    background: #eee;
    font-weight: normal;
    color: #fff;

    /* #66cc66 #006600*/
    background: #006600;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #66cc66), color-stop(100%, #006600));
    background-image: -webkit-linear-gradient(top, #66cc66 0%, #006600 100%);
    background-image: -moz-linear-gradient(top, #66cc66 0%, #006600 100%);
    background-image: -o-linear-gradient(top, #66cc66 0%, #006600 100%);
    background-image: -ms-linear-gradient(top, #66cc66 0%, #006600 100%);
    background-image: linear-gradient(top, #66cc66 0%, #006600 100%);
}

#done.ui-state-hover{
    /* #73e573  #008000 */
    background: #008000;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #73e573), color-stop(100%, #008000));
    background-image: -webkit-linear-gradient(top, #73e573 0%, #008000 100%);
    background-image: -moz-linear-gradient(top, #73e573 0%, #008000 100%);
    background-image: -o-linear-gradient(top, #73e573 0%, #008000 100%);
    background-image: -ms-linear-gradient(top, #73e573 0%, #008000 100%);
    background-image: linear-gradient(top, #73e573 0%, #008000 100%);
}

#done.ui-state-active{
    border: 1px solid #336633;
    background: #eee;
    font-weight: normal;
    color: #fff;

    background: #060;
    /* #59b359 #004d00*/
    background:#004d00;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #59b359), color-stop(100%, #004d00));
    background-image: -webkit-linear-gradient(top, #59b359 0%, #004d00 100%);
    background-image: -moz-linear-gradient(top, #59b359 0%, #004d00 100%);
    background-image: -o-linear-gradient(top, #59b359 0%, #004d00 100%);
    background-image: -ms-linear-gradient(top, #59b359 0%, #004d00 100%);
    background-image: linear-gradient(top, #59b359 0%, #004d00 100%);
}

#done.ui-state-active span{
    margin-top: 1px;
}

#done.disabled{
    cursor: default;
    border: 1px solid #4c994c;

    /* #b8ccb8 #6bb26b*/
    background:#6bb26b;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #b8ccb8), color-stop(100%, #6bb26b));
    background-image: -webkit-linear-gradient(top, #b8ccb8 0%, #6bb26b 100%);
    background-image: -moz-linear-gradient(top, #b8ccb8 0%, #6bb26b 100%);
    background-image: -o-linear-gradient(top, #b8ccb8 0%, #6bb26b 100%);
    background-image: -ms-linear-gradient(top, #b8ccb8 0%, #6bb26b 100%);
    background-image: linear-gradient(top, #b8ccb8 0%, #6bb26b 100%);
}
#done.disabled.ui-state-active span{
    margin: 0;
}

#result{
    overflow: auto;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}







#pcontainer, #pfooter{
    padding-top: 54px;
    width: 978px;/* 231 + 18 + 480 + 18 + 231*/
    margin: 0 auto;
}
#pleftside, #prightside, #pcontent{
    float:left;
}
#pleftside, #prightside{
    width:231px;
    margin-top:72px;
}
#pleftside{

}
#prightside{

}
#pcontent{
    width:480px;
    padding:0 18px;
    font-size:14px;
    line-height: 24px;
}

.text {
}
.text p {
    padding: 0;
}
.text h2 {
    font-size: 24px;
    padding: 18px 0 6px;
}
.text h3 {
    font-size: 16px;
    font-weight: bold;
    padding: 18px 0 6px;
}
.text ol {
    padding-left: 1.6em;
}
.text ol li {
    list-style: decimal outside none;
}

.breadcrumb{
    margin: 0;
    font-size: 13px;
}

#pfooter-leftside{
    float:left;
    width:747px;
}
#pfooter-rightside{
    float:left;
    width:231px;
}


.ui-dialog-buttonpane.ui-widget-content{
    background:none;
}

#resultInfo{
    color: #999;
    font-size: 10px;
    line-height: 100%;
    margin: 11px 0 0 5px;
}



#leftside{
}

#adv1{
    margin: 18px 0 18px 18px;
}


#shareBox{
    display: none;
    overflow: auto;
}
#SharePreview{
    float:left;
    width:120px;
}


#SharePanel{
    float:left;
}

.sitem {
    margin-bottom: 1em;
}

.sitem > label {
    display: block;
}

.sitem > input{
    width: 98%;
    font-size: 11px;
    padding: 4px;
}

#mcontent{
    margin: 1em 0 1em 0;
    text-align: center;
}
#mcont{
    margin: 3em 0 0;
    text-align: center;
    min-height: 200px;
}


#camban{
    text-align: center;
    margin-top: 36px;
}
#camban a{
    display: inline-block;
    width: 160px;
    height:55px;
    background: url(/i/cambansprite.png) no-repeat 0 -80px;
}
#camban a:hover,#camban a:active{
    background: url(/i/cambansprite.png) no-repeat 0 0;
}


#zban{
    text-align: center;
    margin-top: 36px;
}
#zban a{
    display: inline-block;
    width: 132px;
    height:38px;
    background: url(/i/zban.png) no-repeat 0 0;
}
#zban a:hover,#zban a:active{
    background: url(/i/zban.png) no-repeat 0 -40px;
}



#vnban{
    text-align: center;
    margin-top: 36px;
}
#vnban a{
    display: inline-block;
    width: 160px;
    height:20px;
    background: url(/i/vnban.png) no-repeat 50% 50%;
    opacity: 0.5;
}
#vnban a:hover,#vnban a:active{
    opacity: 1.0;
}

#monban{
    text-align: center;
    margin-top: 36px;
}

#monban a{
    display: inline-block;
    width: 128px;
    height:20px;
    background: url(/i/monban.png) no-repeat 0 0;
    opacity: 0.5;
}
#monban a:hover,#zban a:active{
    background: url(/i/monban.png) no-repeat 0 -30px;
    opacity: 1.0;
}