.doorobject{position:relative; display:inline-block; margin:12px 20px 0px 10px;}
 .FDdoors{position:relative; height:120px; cursor:pointer;}
 .FDframe{position:absolute; height:110px; box-shadow: inset 0 0 1px grey, 0 0 0 1px #CFCFCF, 0 0 0 3px #EEEEEE, 0 0 0 4px #CFCFCF;}
 .FDcaption{margin:-5px 0 8px 0;}

 .FDdoor {display: inline-block; position:absolute; width:53px; height:110px; background: linear-gradient(#B8DCF4, #87a3b9);
        box-shadow: inset 0 0 1px grey,inset 0 0 0 1px #CFCFCF,inset 0 0 0 3px white,inset 0 0 5px 4px #CFCFCF;}

 .FDdoor.r{transform-origin: right center;}
 .FDdoors .l2, .FDdoors .l4,.FDdoors .l6,.FDdoors .l8 {transform-origin: right center;}
 .FDdoors .l1,.FDdoors .l3,.FDdoors .l5,.FDdoors .l7 {transform-origin: left center;}
 .FDdoors .r2, .FDdoors .r4,.FDdoors .r6,.FDdoors .r8 {transform-origin: left center;}
 .FDdoors .r1,.FDdoors .r3,.FDdoors .r5,.FDdoors .r7 {transform-origin: right center;}

 .shadow{position: absolute; height:110px; width:53px; opacity:0;}
 .shadow.r{background: linear-gradient(to left, rgba(48, 48, 48, 0.5), rgba(0, 0, 0, 0.05));}
 .shadow.l{background: linear-gradient(to right, rgba(48, 48, 48, 0.5), rgba(0, 0, 0, 0.05));}

 .FDdoor .FDhandle {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAPCAMAAADeWG8gAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAB5QTFRFjIiDMjArMS4qLCwtOjYtLy8tLysjNjIqLSwoAAAA/eteEgAAAAp0Uk5T////////////ALLMLM8AAAA7SURBVHjaYmBg4kQBTAwM2IQYUYUYsatiQxViAwqxs7AwsjKDASsjCws7UIiDAQVwUGIjFlXU0wgQYADHZQbjGZqUagAAAABJRU5ErkJggg==');
    position:absolute;
    height:15px;
    width:9px;
    text-shadow: 1px 1px 3px gray;
    top:47px;
    font-family:Arial;
}
 .FDdoor.l .FDhandle{right:6px; background-position: right 0px center;}
 .FDdoor.r .FDhandle{left:6px; background-position: right 9px center;}