img.powerImageMask, div.powerImageEditButton {
	position:absolute;
	left:0px;
	top:0px;
}


div.powerImageEditButton img { vertical-align:middle; }


div.powerImageEditButton {
	cursor:pointer;	
	/* margin-top and margin-left should be a negative value 
		 that reflects half the width and height 
		 of the crop image "edit-crop.png"
	*/
	margin-top:-112px;
	margin-left:-112px;
}

div.powerImageEditButton span {
  /* The top and left attributes are related to the image edit-crop.png, also see definition for div.powerImageEditButton 
	  
		 left: (div.powerImageEditButton {margin-left} * -1) - (div.powerImageEditButton span {width}/2)
		 top:  (div.powerImageEditButton {margin-top} * -1) - (div.powerImageEditButton span {height}/2)
	*/
	top:87px;
	left:67px;
	font-weight:bold;
	color:black;
	position:absolute;
	display:block;
	width:90px;
	text-align:center;
}

div.powerImage {
	position:relative;
}

.cropImageContainer {text-align:center;overflow:auto;}
img.piImage { visibility:hidden; }
img.showImage { visibility:visible; }
div.admin form.piForm {
  display:inline;
	position:absolute;
	top: 10px;
	z-index:200;
}
.imgCrop_wrap {	margin:0 auto; }
.cropImageContainer p, .cropImageContainer button {	margin:10px auto 20px; }

.powerImageWaitForWindowRender {
	visibility:hidden;
}

.currentlyCroppingImage {
  background: url(../../../esuite/images/loading.gif) no-repeat center center;	
}