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