/* temporary element that draws the rectangle, use border, etc. to shade, it disappears and is replaced by the real element [.cropMe-crop-box] after dragging is complete */
.cropMe-drawing-rectangle {
  position: absolute;
  display: none;
  border: 2px solid #c71909;
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */

  /* No support for these yet, use at own risk */
  -o-user-select: none;
  user-select: none;  
  
}














.cropMe-container
	{
	
	}

.cropMe-background-transparent, .cropMe-preview-transparent
	{
	overflow: hidden,
	position: absolute, /* outer container requires position: relative; */
	top: 0,
	right: 0,  	/* necessary? */
	bottom: 0,	/* necessary? */
	left: 0,
	/* background-image is stored in the jquery object as a variable */
	/* width and height are determined in jquery */
	}
.cropMe-background-image, .cropMe-preview-image
	{
	position: absolute, /* outer container requires position: relative; */
	top: 0,
	right: 0,  	/* necessary? */
	bottom: 0,	/* necessary? */
	left: 0,
	/* background-image is stored in the jquery object as a variable */
	/* background-repeat as no-repeat is programmed */
	/* width and height are determined in jquery */
	}

.cropMe-cropping  /* box */
	{
	/* this is the initial overlay modal that becomes transparent when cropping begins */
	position: absolute,  /* outer container requires position: relative; */
	z-index; 5,
	top: 0,
	right: 0,  	/* necessary? */
	bottom: 0,	/* necessary? */
	left: 0,
	width: 100px;
	height: 100px;
	/* border: 2px dashed pink; */
	/* background-color and opacity will be applied programmatically to the psuedo-modal elements */
			/* values should be set as an option */
	/* top, left, z-index are determined in jquery */
	/* width and height are determined in jquery */
	}
.cropMe-controls-container
	{
	/* position: relative is programmed */
	}
	
.cropMe-cropping-container
	{
	/* position: relative is programmed */

	}
	
.cropMe-crop-box-drag-border
	{
	/* this border will be twice the "border" box.border option for emphasis */
	border: 2px solid black;
	background-color: yellow;
	opacity: 0.3;
	filter: alpha(opacity=30);
	}

.cropMe-drag-box
	{

	}
.cropMe-cropMe-psuedo-modal
	{
	/* these psuedo modals take the modal color when it goes transparent... false borders */

	}
.cropMe-crop-box
	{
	/* one layer above the pseudo-modals */
	position: absolute;
	border: 3px solid black;  /* border-width will be overridden in jquery */
	display: none;
	}
.cropMe-crop-box-controls
	{
	/* one layer above the pseudo-modals */
	position: absolute;
	border: 3px solid red;  /* border-width will be overridden in jquery */
	display: none;
	}
	
.cropMe-point
	{
	background-color: blue;
	opacity: none; /* don't inherit */
	filter: none;
	
	position: absolute;
	display: none;
	}



/* console controls */
.cropMe-label {
	float: left;
	width: 3em;
	text-align: right;
	}
	
.cropMe-label-small {
	float: left;
	font-size: 75%;
	width: 1.25em;
	text-align: right;
	}

.cropMe-actionable {
	cursor: pointer;
	font-size: 100%;
}

.cropMe-actionable:hover {
	color: blue;
	font-size: 150%;
}


.cropMe-top-left
	{
	position: absolute; top 0; left: 0px;
	}
.cropMe-top-right
	{
	position: absolute; top: 0; right: 0px;
	}
.cropMe-bottom-left
	{
	position: absolute; bottom: 0; left: 0px;
	}
.cropMe-bottom-right
	{
	position: absolute; bottom 0; right: 0px;
	}



.cropMe-center-top
	{
	position: absolute; top: 0px; left: 50%; transform: translateX(-50%) translateY(0%);
	}
.cropMe-center-bottom
	{
	position: absolute; bottom: 0px; left: 50%; transform: translateX(-50%) translateY(0%);
	}
.cropMe-center-center
	{
	position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);
	}
.cropMe-left-center
	{
	position: absolute; top: 50%; left: 0px; transform: translateX(0%) translateY(-50%);
	}
.cropMe-right-center
	{
	position: absolute; top: 50%; right: 0px; transform: translateX(0%) translateY(-50%);
	}




.cropMe-row-controls
	{
	float: left;
	width: 100%; 
	height: 66px; 
	clear: both; 
	padding-top: 5px;
	}
.cropMe-icons-controls
	{
	display: inline-block; width: 5%; position: relative; vertical-align: top;
	}
	
.cropMe-input
	{
	width:3em;	
	text-align: right;
	}
	
	
.cropMe-input:focus
	{
    border: 1px solid red;
	}
	

	
	
.cropMe-inline-control-info
	{
    display: inline-block; width: 25%;
	}

.cropMe-left-controls
	{
	float: left; 
	padding-right: 12px;
	}
.cropMe-right-controls
	{
	float: right; padding-left: 24px; border-left: 2px solid #cccccc;
	}	
	
.cropMe-inline-control
	{
    position: relative; width: 50px; height: 50px; display: inline-block;
	}

.cropMe-toggle-message
	{
	background-color: black; color: white; height: 15px;
	}
	
.cropMe-controls-console
	{	
	/* automatically generated in jquery */
	}