body {
    background-color:#b2b2b2;
    margin:0;
    padding:0;
    }
.page{
    position:absolute;
    width:98vw;
    height:98vh;
    margin:1vw 1vw;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
    background-color:#e2e2e2;
    }
.udo-wrapper{
    position:relative;
    width:700px;
    height:700px;
    margin:0 auto;
    background-color:#ffffff;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
    opacity:1;
    transition:all 250ms ease;
    }
#udo-wrapper-edit{
    position:fixed;
    z-index:800;
    width:200px;
    height:200px;
    background-color:rgba(216, 216, 202, 0.950000);
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
    opacity:1;
    transition:opacity 100ms ease;
    box-sizing: border-box;
    border-radius: 6px;
    /* overflow: hidden; */
    box-shadow: 0px 3px 10px rgba(0,0,0,0.4);
    }
#udo-wrapper-layer, #udo-wrapper-image{
    position: fixed;
    z-index: 800;
    width: 200px;
    height: 200px;
    background-color: rgba(216, 216, 202, 0.95);
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
    opacity: 1;
    transition: opacity 100ms ease;
    box-sizing: border-box;
    border-radius: 6px;
    /* overflow: hidden; */
    box-shadow: 0px 3px 10px rgba(0,0,0,0.4);
    /* background-color: yellow; */
    }
body.preview #udo-wrapper-layer, body.preview #udo-wrapper-image{
    display:none;
    }
body.create #udo-wrapper-layer, body.create #udo-wrapper-image{
    display:none;
    }

#udo-wrapper-edit.selected, #udo-wrapper-layer.selected, #udo-wrapper-image.selected{
    z-index:900;
    }
#udo-wrapper-edit p, #udo-wrapper-edit input, #udo-wrapper-edit span{
    font-family: monospace;
    font-size:10px;
    line-height:14px;
    }
#udo-wrapper-edit p{
    padding-bottom: 0px;
    margin:0;
    }
#udo-wrapper-edit input{
    padding-bottom: 0px;
    margin-top: 4px;
    text-align: right;
    vertical-align: middle;
    float:left;
    background-color: transparent;
    outline:0
    }
#udo-wrapper-edit input:focus{
    background-color: white;
    }
#udo-wrapper-edit span.x{
    position:relative;
    line-height: 20px;
    height: 20px;
    float:left;
    display: block;
    width: 10%;
    text-align: center;
    }
.udo-box{
    position:absolute;
    z-index:10;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
    outline:0;
    }
.udo-box.udo-text{
    z-index:100;
    border:1px dotted black;
    font-family:monospace;
    font-size: 12px;
    padding:4px;
	-moz-user-select: text;
	-webkit-user-select: text;
	-ms-user-select: text;
	user-select: text;
    }
.udo-box.udo-text .textfield:focus{
    box-shadow:1px 0 5px rgba(0,0,0,0.5);
    }
.udo-box.udo-text .textfield{
    position:absolute;
    z-index:1;
    top:0;left:0;right:0;bottom:0;
    outline:0
    }
.udo-box.udo-text .textfield:empty:before{
    content:attr(placeholder);
    color:lightgray;
    }
.udo-box.photo:before{
    content:'click to import image';
    }
.udo-image{
    position:absolute;
    z-index:10;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
    }
.udo-image-crop-container{
    position:absolute;
    width:100%;
    height:100%;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
    }
.udo-image-crop{
    position:absolute;
    width:100%;
    height:100%;
    overflow:hidden;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
    }
div.udo-image-back{
    top:-100px;
    left:-100px;
    width:600px;
    position:absolute;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
    display:none;
    }
div.udo-image-back img{
    opacity:0.2;
    }
img.udo-image-front{
    position:absolute;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
    cursor:pointer;
    }
.udo-im-handle{
    position:absolute;
    z-index:5;
    width:16px;
    height:16px;
    background-color:#88b8ea;
    border-radius:8px;
    margin:-10.666666666667px;
    }
/*
.udo-im-handle.hand1{
    top:-8px;
    left:-8px;
    }
.udo-im-handle.hand2{
    top:-8px;
    right:-8px;
    }
.udo-im-handle.hand3{
    bottom:-8px;
    right:-8px;
    }
.udo-im-handle.hand4{
    bottom:-8px;
    left:-8px;
    }
*/
.udo-box-handle{
    position:absolute;
    width:16px;
    height:16px;
    background-color:#ffffff;
    border: 1px solid #e0e0e0;
    border-radius:8px;
    margin:-10.666666666667px;
    cursor:pointer;
    display:none;
    }
.udo-box-handle.hand1, .udo-im-handle.hand1{
    top:0px;
    left:0px;
    }
.udo-box-handle.hand2, .udo-im-handle.hand2{
    top:0px;
    right:0px;
    }
.udo-box-handle.hand3, .udo-im-handle.hand3{
    bottom:0px;
    right:0px;
    }
.udo-box-handle.hand4, .udo-im-handle.hand4{
    bottom:0px;
    left:0px;
    }

.udo-finish{
    position:absolute;
    top:-22px;left:0;width:100%;height:20px;
    text-align:center;
    overflow: hidden;
    display:none;
    }
.udo-buttons{
    background-color:rgba(255,203,0,0.85);
    display:inline-block;
    border-radius: 10px;
    }
.udo-button{
    display:inline-block;
    vertical-align: top;
    font-size:30px;
    line-height:15px;
    /* text-shadow: 0px 1px 1px white; */
    color:rgb(181, 154, 0);
    /* background-color:rgba(0, 0, 0, 0.05); */
    padding: 0 6px;
    margin: 0 10px;
    height: 20px;
    cursor:pointer;
    }
.udo-button.finish{
    font-size:24px;
    line-height: 18px;
    }
.udo-button.finish:before{
    content:'×';
    }
.udo-box.edit{
    z-index: 500 !important;
    }
.udo-box.edit .udo-image-back{
    display:block;
    }
.udo-box.edit .udo-box-handle{
    display:block;
    }
.udo-box.edit .udo-image-crop{
    outline: 1px solid #e0e0e0;
    }
.udo-box.edit .udo-finish{
    display:block;
    }
.hidden {
    display:none;
    }
.hidden-o {
    opacity:0 !important;
    }
.bar-move-container {
/* 
    background-color: #ffcc00;
    font-size:24px;
    line-height: 16px;
    height:20px;
    text-align:center;
    color: rgba(0,0,0,0.2);
    cursor:pointer;
 */
    position: absolute;
top: -22px;
left: 0;
width: 100%;
height: 20px;
text-align: center;
/* overflow: hidden; */
/* display: none; */

    }
.cont {
    font-size:0;
    line-height:0;
    margin:6px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(0,0,0,0.3);
    }
.clear-fix {
    font-size:0;
    line-height: 0;
    clear:both;
    }
#udo-tools{
    position:fixed;
    z-index:1000;
    top:-5px;left:0;right:0;
    text-align:center;
    }
#udo-tools .tools {
    display:inline-block;
    }
#udo-tools .tool {
    display:inline-block;
    background-color:rgb(94, 147, 232);
    font-family: monospace;
    margin:-2px 6px;
    position: relative;
    width: 30px;
    height: 30px;
    font-size: 16px;
    line-height: 34px;
    border-radius: 15px;
    }
#udo-tools .tool.float{
    background-color:rgba(216, 216, 202, 1.000000);
    }
#udo-tools .tool.preview{
    background-color:rgb(127, 192, 246);
    margin: -2px 12px;
    }

#udo-tools .tool.select {
    background-color: black;
    color: rgb(172, 200, 243);
    }
#udo-tools .tool.preview.select {
    background-color: #990000;
    color: rgb(172, 200, 243);
    }
.preview .page{
    background-color:#909090;
    }
.preview .udo-wrapper {
    overflow:hidden;
    }
.preview .udo-image.edit .udo-image-back,
.preview .udo-image.edit .udo-finish,
.preview .udo-text.edit .udo-finish,
.preview .udo-image.edit .udo-box-handle,
.preview .udo-im-handle{
    display:none;
    }
.preview .udo-box,
.preview .udo-image.edit .udo-image-crop {
    outline:0;
    border:0;
    }
.toolbox #layers{
    position:relative;
    }
.toolbox .layeritem, .toolboxitem {
    position:relative;
    }
.toolbox .layeritem, .toolboxitem {
    position:relative;
    }
.toolbox .layeritem .icon, .toolboxitem .icon{
    float:left;
    width:20px;
    /* overflow:hidden; */
    }
.layeritem .title, .toolboxitem .title{
    /* float:left; */
    /* width:20px; */
    /* overflow:hidden; */
    }

.tools.list li, li.toolboxitem {
    background-color: inherit;
    }
.tools.list li.selected, li.toolboxitem.selected {
    background-color: rgba(255,255,255,0.5);
    }
.tools.list li .but, 
.tools.list li .label, 
li.toolboxitem .but {
    cursor: pointer;
    width: 14px;
    float: left;
   }
ul.list{
    margin:0;
    padding:0;
    }
ul.list.tools{
    position:relative;
    }
ul.list li, 
ul.list li input, 
ul.list li div, .title input, 
.sequence input,
li.toolboxitem div,
li.toolboxitem .title input{
    cursor: pointer;
    outline: none;
    list-style-type: none;
    padding: 0px 4px 0px 2px;
    text-overflow: ellipsis;
    overflow: hidden;
    margin: 0px;
    white-space: nowrap;
    }
ul.list li{
    font-size: 0;
    }
.toolbox .list li .title, .toolboxitem .title{
    /* float: left; */
    display:inline-block;
    width:142px;
    padding:0;
    cursor:move;
   }
.toolbox .list li .title input, 
.toolbox .guides div.title input, 
.sequence input,
li.toolboxitem .title input{
    padding: 0px;
    width: 100px;
    border: 0px;
    cursor: pointer;
    background-color: inherit;
    }
.toolbox div.but.color{
    /* font-size: 18px; */
    }
.toolbox .list li .but, 
.toolbox .list li .label,
li.toolboxitem but,
li.toolboxitem label {
    cursor: pointer;
    width: 14px;
    display:inline-block;
    /* float: left; */
    }
.toolbox .list li .but img,
li.toolboxitem .but img {
   display:inline-block;
    width: 14px;
    height: 14px;
    margin-top:5px;
   }
.toolbox div.but.deletebut,
li.toolboxitem div.but.deletebut {
    float:right;
    color: rgba(0,0,0,0.5);
    width: 16px;
    background-color: rgba(0,0,0,0);
    padding: 0px;
    /* position: absolute; */
    display: none;
    border: 1px solid rgba(0,0,0,.5);
    border-radius: 12px;
    text-align: center;
    }
.tools .selected div.deletebut,
li.toolboxitem.selected div.deletebut {
    display: inline-block;
    }

.toolbox .list li .but, 
.toolbox .list li .label,
.toolbox .list li .title,
.toolbox .list li input, 
.toolbox .list li div, 
.title input, 
.sequence input,
li.toolboxitem .but, 
li.toolboxitem .label,
li.toolboxitem .title,
li.toolboxitem input, 
li.toolboxitem div
    {
    font-size: 12px;
    height: 24px;
    line-height: 24px;
    }

.toolbox div.but.deletebut,
li.toolboxitem div.but.deletebut{
    font-size: 16px;
    height: 16px;
    line-height: 13px;
    margin-top: 5px;
    box-sizing: border-box;
    }
.RC{
    border-radius: 4px;
    -webkit-border-radius: 4px;
    }