/* Garantees page to be 100% filled for mouse not to look dodgy  */
html{
    margin:0;
    height:100%;
}
/* Garantees page to be 100% filled for mouse not to look dodgy  */
body{
    margin:0;
    min-height:100%;
}

.masterframe{
   position: relative;
   width: 100%;
   height: 100%;
   top: 0px;
   left: 0px;
}

.frame{
    position:absolute;

    height:100%;
    width:100%;

    overflow:hidden;

    cursor:grab;

/*     background-color:#000; */
    z-index:100;
}

.imageholder{
    position:absolute;
}

.buttonchangelist{
    position:absolute;
    right:5px;
    top:5px;
    height:24px;
    border-radius: 3px;
    text-align:center;
    background-color:rgba(255,255,255,0.5);
}

.fivebuttons{
   width:125px;
  display:none;
}

.twobuttons{
   width:50px;
}

.buttonchange{
    width:20px;
    height:20px;
    border:none;
    text-align:center;
    padding:0px;
    margin-top:2px;
    border-radius:2px;
}

.progressbar{
    position:absolute;
    background-color:#0033FF;
    border-radius:5px;
    left:25%;
    bottom:5px;
    width:0;
    height:auto;
    text-align:center;
    overflow:hidden;
}

.ghost{
    position:absolute;
    opacity:0.5;
/*     overflow:visible; */
    height:100%;
    width:100%;

/*     top:23%; */
/*     left:23%; */

    display:none;
}

.ghostimg{
    position:relative;
    width:100%;
    height:100%;
}

.dot{
    width:5px;
    height:5px;
    background-color:red;
    position:absolute;
}

.dot-left{
    left:-2.5px;
}

.dot-top{
    top:-2.5px;
}

.dot-right{
    right:-2.5px;
}

.dot-bottom{
    bottom:-2.5px;
}

.dot-middle{
    left:50%;
}

.dot-center{
    top:50%;
}

.nwsecursor:hover{
    cursor:nwse-resize;
}

.nscursor:hover{
    cursor:ns-resize;
}

.neswcursor:hover {
    cursor:nesw-resize;
}

.ewcursor:hover {
    cursor:ew-resize;
}