/* BEGIN */
#framepage {
    position:relative;
    font-family:Arial, sans-serif;
    font-size:12px;
}

.interior_decorator form {
    display:block;
    text-align:center;
    margin:5px auto;
}

#fpselecter {
    display:inline;
    margin:0 5px;
}

#fp_img {
    position:absolute;
    z-index:2;
    width:750px;
}

.deciframe {
    position:relative;
    width:900px;
    height:800px;
    overflow:hidden;
    z-index:3;
    margin-bottom:10px;
}

.imgmax {
    width:100%;
    height:100%;
}

.furnitureselect {
    display:block;
    position:fixed;
    right:0px;
    top:0px;
    width:150px;
    height:700px;
    text-align:center;
    padding:0 0 0 0;
    z-index:4;
}

#furniture {
    width:150px;
    height:700px;
    text-indent:none;
    padding:0;
    margin:0;
    text-align:center;
}

.category {
    position:relative;
    height:620px;
    padding:0;
    overflow:hidden;
}

.category a {
    position:relative;
    display:inline-block;
    width:60px;
    height:60px;
    padding:0;
    margin:4px;
    background:#dadada;

}
#furniture .category a {
    border-radius:0px;
    -moz-border-radius:0px;
    -o-border-radius:0px;
    -webkit-border-radius:0px;
}

.category a:hover { background:#FF9; }

.category a img {
    position:relative;
    width:60px;
    height:60px;
    z-index:20;
    margin:0;
    top:0px;
}

.additem {
    display:block;
    position:absolute;
    width:60px;
    height:60px;
    background:url(../img/add.png) no-repeat;
    z-index:50;
}

.additem:hover { background-position: -60px 0px; }

.leftcolumn {
    position:absolute;
    left:5px;
    width:90px;
    height:300px;
}

.rightcolumn {
    position:absolute;
    left:90px;
    width:70px;
    height:300px;
}

#furniture div {
    font-size:12px;
    text-align:center;
}

#furniture h3 {
    font-size:12px;
    font-weight:normal;
    height:28px;
    line-height:14px;
}

#content {
    display:inline-block;
    vertical-align:top;
    position:relative;
    width:750px;
    height:800px;
    z-index:5;
}

#content form {
    position:absolute;
    bottom:10px;
    left:10px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:13px;
}

.floorplan {
    position:absolute;
    z-index:1;
    width:600px;
    height:600px;
}

.object {
    position:absolute;
    background-size:cover;
    display:block;
    overflow:visible;
    z-index:20;
    background-color: transparent;
    width:150px;
    height:150px;
    z-index:50;
    top:30%;
    left:30%;
    cursor: move;
    cursor: grab;
    cursor: -webkit-grab;
    cursor: -moz-grab;
}

.ui-draggable-dragging img:hover {
    cursor: grabbing !important;
    cursor: -webkit-grabbing !important;
    cursor: -moz-grabbing !important;
}

.object img {
    width:100%;
    height:100%;
}

.object:focus a { background-position:-26px 0px; }

.node {
    display:block;
    width:26px;
    height:26px;
    z-index:1000000;
    background-color:transparent;
}

.minus {
    position:absolute;
    bottom:-8px;
    left:42px;
    background:url(../img/nodeminus.png) no-repeat;
    background-position: 0px 0px;
}

.plus {
    position:absolute;
    top:-8px;
    left:42px;
    background:url(../img/nodeplus.png) no-repeat;
    background-position: 0px 0px;
}

.ul {
    position:absolute;
    top:-8px;
    left:-8px;
    background:url(../img/nodeul.png) no-repeat;
    background-position: 0px 0px;
}

.ur {
    position:absolute;
    top:-8px;
    right:-8px;
    background:url(../img/nodeur.png) no-repeat;
    background-position: 0px 0px;
}

.ll {
    position:absolute;
    bottom:-8px;
    left:-8px;
    background:url(../img/nodell.png) no-repeat;
    background-position: 0px 0px;
}

.lr {
    position:absolute;
    bottom:-8px;
    right:-8px;
    background:url(../img/nodelr.png) no-repeat;
    background-position: 0px 0px;
}

.interior_decorator .print {
    position:absolute;
    display:block;
    bottom:0px;
    left:10px;
    top:auto;
    right:auto;
    z-index:30;
    bottom: 20px;
    cursor:pointer;
}

#trash {
    display:block;
    width:50px;
    height:50px;
    background:url(../img/trashcan.png) no-repeat;
    position:fixed;
    bottom:0px;
    right:170px;
    z-index:5;
    border:none !important;
}

#trash.active { background-position:-50px 0px; }

#clearall {
    position:fixed;
    cursor:pointer;
    display:block;
    bottom:10px;
    right:46%;
    height:30px;
    line-height:30px;
    text-align:center;
    font-family:Arial, sans-serif;
    width:100px;
    z-index:30;
    font-weight:bold;
    font-size:16px;
    color:#fff;
    background-color: #86302F;
  }

#clearall:hover {
    background-color: #a13a39

}

#content .ui-selecting { border:1px solid #ffba00; }

#content .ui-selecting .ui-icon, #content .ui-selecting img { border:none; }

#content .ui-selected { border:1px solid #ffba00; }

#content .ui-selected .ui-icon, #content .ui-selected img { border:none; }

.styler { width: 50px; }

.popupmenu {
    border-radius:5px;
    -moz-border-radius:5px;
    -o-border-radius:5px;
    -webkit-border-radius:5px;
    border:2px solid #fff6ac;
    background:#000;
    background:rgba(224,220,190,0.8);
    box-shadow:2px 2px 3px #555;
    text-indent:none;
    list-style:none;
    background-clip:border;
    max-width:156px;
    padding:3px;
}

.popupmenu li {
    display:inline-block;
    width:50px;
    height:50px;
    text-align:center;
    vertical-align:top;
    border-radius:5px;
    -moz-border-radius:5px;
    -o-border-radius:5px;
    -webkit-border-radius:5px;
}

.popupmenu li span {
    display:inline-block;
    width:100%;
    height:40px;
    line-height:40px;
}

.popupmenu li:hover { background:#fff6ac; }

.popupmenu li a {
    text-decoration:none;
    color:#08980c;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    font-weight:bold;
    display:block;
    width:50px;
    height:50px;
}
.popupmenu li a:hover { color:#ffea00; }

@media only screen and (min-width:768px) and (max-width:899px) {
    #content, #fp_img, .container { width:750px; }
    .container { height:980px; }
    #content { height:800px; }
    .deciframe {
        width:768px;
        height:980px;
    }
    .category { height:420px; }
    .furnitureselect {
        position:fixed;
        width:768px;
        height:300px;
        bottom:0;       
    }
    #furniture {
        position:relative;
        top:515px;
        left:315px;
        width:225px;
        -webkit-transform: rotate(-90deg);
           -moz-transform: rotate(-90deg);
            -ms-transform: rotate(-90deg);
             -o-transform: rotate(-90deg);
                transform: rotate(-90deg);
    }
    .category a {
        -webkit-transform: rotate(90deg);
           -moz-transform: rotate(90deg);
            -ms-transform: rotate(90deg);
             -o-transform: rotate(90deg);
                transform: rotate(90deg);       
    }
    #clearall {
        right:5px;
        top:770px;
    }
    #trash {
        right:30px;
        top:820px;
    }
    .interior_decorator .print { bottom:160px; }    
}

@media all and (min-width:480px) and (max-width:767px) {
    #content, #fp_img, .container { width:480px; }
    #content { height:520px; }
    .deciframe {
        width:480px;
        height:950px;
    }
    .category { height:250px; }
    .furnitureselect, #furniture {
        width:480px;
        height:250px;
        top:540px;
        right:0;
    }
    #clearall {
        left:20px;
        top:495px;
    }
    #trash {
        top:485px;
        right:20px;
    }
    .interior_decorator .print { display:none; }    
}

@media all and (max-width:479px) {
    #content, #fp_img, .container { width:310px; }
    #content { height:380px; }
    .deciframe {
        width:310px;
        height:900px;
    }
    .category { height:350px; }
    .furnitureselect, #furniture {
        width:310px;
        height:380px;
        top:380px;
        right:0;
    }
    #clearall {
        left:20px;
        top:330px;
    }
    #trash {
        top:320px;
        right:20px;
    }
    .interior_decorator .print { display:none; }
}

@media only print {
    form, .ui-icon, .node, .print, #clearall, #trash, .instructions, .furnitureselect { display:none !important; }
    .ui-icon { z-index:1 !important; }    
}