1.imgCrop_wrap {
2    position: relative;
3    cursor: crosshair;
4    margin: auto;
5}
6
7/* an extra classname is applied for Opera < 9.0 to fix it's lack of opacity support */
8.imgCrop_wrap.opera8 .imgCrop_overlay,
9.imgCrop_wrap.opera8 .imgCrop_clickArea {
10    background-color: transparent;
11}
12
13/* 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 */
14.imgCrop_wrap,
15.imgCrop_wrap * {
16    font-size: 0;
17}
18
19.imgCrop_overlay {
20    background-color: #000;
21    opacity: 0.5;
22    filter:alpha(opacity=50);
23    position: absolute;
24    width: 100%;
25    height: 100%;
26}
27
28.imgCrop_selArea {
29    position: absolute;
30    cursor: move;
31    z-index: 2;
32}
33
34/* clickArea is all a fix for IE 5.5 & 6 to allow the user to click on the given area */
35.imgCrop_clickArea {
36    width: 100%;
37    height: 100%;
38    background-color: #FFF;
39    opacity: 0.01;
40    filter:alpha(opacity=01);
41}
42
43.imgCrop_marqueeHoriz {
44    position: absolute;
45    width: 100%;
46    height: 1px;
47    background: transparent url('graphics/marqueeHoriz.gif') repeat-x 0 0;
48    z-index: 3;
49}
50
51.imgCrop_marqueeVert {
52    position: absolute;
53    height: 100%;
54    width: 1px;
55    background: transparent url('graphics/marqueeVert.gif') repeat-y 0 0;
56    z-index: 3;
57}
58
59/*
60 *  FIX MARCHING ANTS IN IE
61 *	As IE <6 tries to load background images we can uncomment the follwoing hack
62 *  to remove that issue, not as pretty - but is anything in IE?
63 *  And yes I do know that 'filter' is evil, but it will make it look semi decent in IE
64 *
65* html .imgCrop_marqueeHoriz,
66* html .imgCrop_marqueeVert {
67    background: transparent;
68    filter: Invert;
69}
70* html .imgCrop_marqueeNorth { border-top: 1px dashed #000; }
71* html .imgCrop_marqueeEast  { border-right: 1px dashed #000; }
72* html .imgCrop_marqueeSouth { border-bottom: 1px dashed #000; }
73* html .imgCrop_marqueeWest  { border-left: 1px dashed #000; }
74*/
75
76.imgCrop_marqueeNorth { top: 0; left: 0; }
77.imgCrop_marqueeEast  { top: 0; right: 0; }
78.imgCrop_marqueeSouth { bottom: 0px; left: 0; }
79.imgCrop_marqueeWest  { top: 0; left: 0; }
80
81
82.imgCrop_handle {
83    position: absolute;
84    border: 1px solid #333;
85    width: 6px;
86    height: 6px;
87    background: #FFF;
88    opacity: 0.5;
89    filter:alpha(opacity=50);
90    z-index: 4;
91}
92
93/* fix IE 5 box model */
94* html .imgCrop_handle {
95    width: 8px;
96    height: 8px;
97    wid\th: 6px;
98    hei\ght: 6px;
99}
100
101.imgCrop_handleN {
102    top: -3px;
103    left: 0;
104    /* margin-left: 49%;    @done_in_js */
105    cursor: n-resize;
106}
107
108.imgCrop_handleNE {
109    top: -3px;
110    right: -3px;
111    cursor: ne-resize;
112}
113
114.imgCrop_handleE {
115    top: 0;
116    right: -3px;
117    /* margin-top: 49%;    @done_in_js */
118    cursor: e-resize;
119}
120
121.imgCrop_handleSE {
122    right: -3px;
123    bottom: -3px;
124    cursor: se-resize;
125}
126
127.imgCrop_handleS {
128    right: 0;
129    bottom: -3px;
130    /* margin-right: 49%; @done_in_js */
131    cursor: s-resize;
132}
133
134.imgCrop_handleSW {
135    left: -3px;
136    bottom: -3px;
137    cursor: sw-resize;
138}
139
140.imgCrop_handleW {
141    top: 0;
142    left: -3px;
143    /* margin-top: 49%;  @done_in_js */
144    cursor: w-resize;
145}
146
147.imgCrop_handleNW {
148    top: -3px;
149    left: -3px;
150    cursor: nw-resize;
151}
152
153/**
154 * Create an area to click & drag around on as the default browser behaviour is to let you drag the image
155 */
156.imgCrop_dragArea {
157    width: 100%;
158    height: 100%;
159    z-index: 200;
160    position: absolute;
161    top: 0;
162    left: 0;
163}
164
165.imgCrop_previewWrap {
166    /* width: 200px;  @done_in_js */
167    /* height: 200px; @done_in_js */
168    overflow: hidden;
169    position: relative;
170}
171
172.imgCrop_previewWrap img {
173    position: absolute;
174}