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