/* kropper.css: this file contains the css that defines the size and appearance of all elements of the Kropper image-cropping UI. */

/* This is the container element for the cropper UI */

#cropper_box {
    background-color: #f2f2f2;
}

#image_cropper {
	width: 320px;
}

#image_cropper .form_btns {
  margin-left: -20px;
}

#crop_header {
	background: #989898 url(/images/kropper/header_bg.png) no-repeat;
	border-bottom: 1px solid #7a7a7a;
	font: 16px/31px Helvetica, Arial;
	padding-right: 10px;
	padding-left: 10px;
	text-align: center;
	color: #3b3b3b;
}


/* this element is the user's cropping workspace, so to speak */

#crop_canvas {
	width: 320px;
	height: 320px;
	overflow: hidden;
	position: relative;
}

/* this element, automatically hidden when everything has loaded, covers up the cropping canvas and displays the message that javascript is required */

#crop_loading_overlay {
	width: 320px;
	height: 320px;
	position: absolute; 
	z-index: 51;
	top: 0px;
	left: 0px;
	background-color: #000;
	text-align: center;
}

#crop_loading_overlay h2 {
	font: normal 18px/31px Helvetica, Arial;
	color: #333;
	padding: 140px 30px 10px;
}

#crop_loading_overlay p {
	font: normal 13px/18px Helvetica, Arial;
	color: #333;
	padding-right: 30px;
	padding-left: 30px;
}

/* this element contains the translucent png overlay used in the demo app */

#crop_overlay {
	width: 320px;
	height: 320px;
	position: absolute; 
	z-index: 50;
	top: 0px;
	left: 0px;
}

.crop_overlay-150x200 {
  background: url(/images/kropper/crop_stencil_150x200.png);
}

.crop_overlay-200x150 {
  background: url(/images/kropper/crop_stencil_200x150.png);
}

.crop_overlay-200x180 {
  background: url(/images/kropper/crop_stencil_200x180.png);
}

/* this element, not the overlay, is what actually controls the dimensions of the cropping stencil. if you don't want to have a translucent png overlay image, just turn on the borders of this element so users can see the stencil. */

#crop_stencil {
	position: absolute; 
	z-index: 40;
}

.crop_stencil-150x200 {
    width: 150px;
	height: 200px;
	top: 60px;
	left: 85px;
}

.crop_stencil-200x150 {
    width: 200px;
	height: 150px;
	top: 85px;
	left: 60px;
}

.crop_stencil-200x180 {
  width: 200px;
	height: 180px;
	top: 69px;
	left: 59px;
}

#image_dragger {
	width: 320px;
	height: 320px;
	position: absolute;
	z-index: 100;
	cursor: move;
}

#uncropped_image {
	position: absolute;
}

#crop_footer {
	background: url(../images/media_uploader/crop_bar.jpg) no-repeat 0 center;
	margin: -15px 0 0 27px;
}

#zoom_slider {
	width: 300px;
	height: 16px;
	position: relative;
	top: 23px;
	left: -16px;
}

#zoom_slider_handle {
	width: 114px;
	height: 46px;
	background: url(../images/media_uploader/crop_knob.png) transparent no-repeat 0 0;
	position: absolute;
}

#crop_buttons {
	padding: 30px 10px 15px;
}

#crop_reset_btn {
}

#crop_submit_btn {
	float: right;
}

#crop_subfooter a {
	text-decoration: none;
	text-align: right;
	color: #555;
}