/adei/ui

.imgCrop_wrap {

        /* width: 500px;   @done_in_js */

        /* height: 375px;  @done_in_js */

        position: relative;

        cursor: crosshair;

}

 

/* an extra classname is applied for Opera < 9.0 to fix it's lack of opacity support */

.imgCrop_wrap.opera8 .imgCrop_overlay,

.imgCrop_wrap.opera8 .imgCrop_clickArea { 

        background-color: transparent;

}

 

/* fix for IE displaying all boxes at line-height by default, although they are still 1 pixel high until we combine them with the pointless span */

.imgCrop_wrap,

.imgCrop_wrap * {

        font-size: 0;

}

 

.imgCrop_apply {

        position: absolute;

        background: url(applyArrow.png);

        border: green solid 1px;

        width: 19px;

        height: 20px;

        margin: 5px;

        cursor: pointer;

        z-index: 5;

}

 

.imgCrop_save {

        position: absolute;

        background: url(save.png);

        border: green solid 1px;

        width: 19px;

        height: 20px;

        margin: 5px;

        cursor: pointer;

        z-index: 5;

}

 

 

.imgCrop_overlay {

/*

        DS: Replacing selected part

        background-color: #000;

        opacity: 0.5;

        filter:alpha(opacity=50);

*/

        position: absolute;

        width: 100%;

        height: 100%;

}

 

.imgCrop_handleArea {

    position: absolute;

    cursor: move;

    z-index: 3;

}

 

.imgCrop_selArea {

/*

        DS: Selecting

*/

        background-color: #FFB;

        opacity: 0.5;

        filter:alpha(opacity=50);

        

        position: absolute;

        

        /* @done_in_js 

        top: 20px;

        left: 20px;

        width: 200px;

        height: 200px;

        background: transparent url(castle.jpg) no-repeat  -210px -110px;

        */

        cursor: move;

        z-index: 2;

}

 

/* clickArea is all a fix for IE 5.5 & 6 to allow the user to click on the given area */

.imgCrop_clickArea {

        width: 100%;

        height: 100%;

        background-color: #FFF;

        opacity: 0.01;

        filter:alpha(opacity=01);

}

 

.imgCrop_marqueeHoriz {

        position: absolute;

        width: 100%;

        height: 1px;

        background: transparent url(marqueeHoriz.gif) repeat-x 0 0;

        z-index: 4;

 

        filter:alpha(opacity=100);

}

 

.imgCrop_marqueeVert {

        position: absolute;

        height: 100%;

        width: 1px;

        background: transparent url(marqueeVert.gif) repeat-y 0 0;

        z-index: 4;

 

        filter:alpha(opacity=100);

}

 

/* 

 *  FIX MARCHING ANTS IN IE

 *      As IE <6 tries to load background images we can uncomment the follwoing hack 

 *  to remove that issue, not as pretty - but is anything in IE?

 *  And yes I do know that 'filter' is evil, but it will make it look semi decent in IE

 *

* html .imgCrop_marqueeHoriz,

* html .imgCrop_marqueeVert {

        background: transparent;

        filter: Invert; 

}

* html .imgCrop_marqueeNorth { border-top: 1px dashed #000; }

* html .imgCrop_marqueeEast  { border-right: 1px dashed #000; }

* html .imgCrop_marqueeSouth { border-bottom: 1px dashed #000; }

* html .imgCrop_marqueeWest  { border-left: 1px dashed #000; }

*/

 

.imgCrop_marqueeNorth { top: 0; left: 0; }

.imgCrop_marqueeEast  { top: 0; right: 0; }

.imgCrop_marqueeSouth { bottom: 0px; left: 0; }

.imgCrop_marqueeWest  { top: 0; left: 0; }

 

 

.imgCrop_handle {

        position: absolute;

        border: 1px solid #333;

        width: 6px;

        height: 6px;

        background: #FFF;

        opacity: 0.5;

        filter:alpha(opacity=50);

        z-index: 5;

}

 

/* fix IE 5 box model */

* html .imgCrop_handle {

        width: 8px;

        height: 8px;

        wid\th: 6px;

        hei\ght: 6px;

}

 

.imgCrop_handleN {

        top: -3px;

        left: 0;

        /* margin-left: 49%;    @done_in_js */

        cursor: n-resize;

}

 

.imgCrop_handleNE { 

        top: -3px;

        right: -3px;

        cursor: ne-resize;

}

 

.imgCrop_handleE {

        top: 0;

        right: -3px;

        /* margin-top: 49%;    @done_in_js */

        cursor: e-resize;

}

 

.imgCrop_handleSE {

        right: -3px;

        bottom: -3px;

        cursor: se-resize;

}

 

.imgCrop_handleS {

        right: 0;

        bottom: -3px;

        /* margin-right: 49%; @done_in_js */

        cursor: s-resize;

}

 

.imgCrop_handleSW {

        left: -3px;

        bottom: -3px;

        cursor: sw-resize;

}

 

.imgCrop_handleW {

        top: 0;

        left: -3px;

        /* margin-top: 49%;  @done_in_js */

        cursor: w-resize;

}

 

.imgCrop_handleNW {

        top: -3px;

        left: -3px;

        cursor: nw-resize;

}

 

/**

 * Create an area to click & drag around on as the default browser behaviour is to let you drag the image 

 */

.imgCrop_dragArea {

        width: 100%;

        height: 100%;

        z-index: 7;

        position: absolute;

        top: 0;

        left: 0;

}

 

.imgCrop_previewWrap {

        /* width: 200px;  @done_in_js */

        /* height: 200px; @done_in_js */

        overflow: hidden;

        position: relative;

}

 

.imgCrop_previewWrap img {

        position: absolute;

}