/* 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 */

#image_cropper {
	width: 400px;
}

#talisman_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;
}

#talisman_footer {
	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 */

#talisman_canvas {
	width: 400px;
/*	height: 400px;*/
	padding-top: 30px;
	padding-bottom: 30px;
	overflow: hidden;
	/*position: relative;*/
}

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

/* 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: 400px;
	height: 400px;
	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: 400px;
	height: 400px;
	position: absolute; 
	z-index: 50;
	top: 0px;
	left: 0px;
/*  background: url(/images/kropper/crop_stencil.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 {
	width: 200px;
	height: 200px;
	position: absolute; 
	z-index: 40;
	top: 100px;
	left: 100px;
	border: 1px solid black;
}

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

#uncropped_image {
	position: absolute;
}

#crop_footer {
	background: #979797 url(/images/kropper/footer_bg.png) no-repeat;
}

#zoom_slider {
	width: 208px;
	height: 16px;
	position: relative;
	top: 11px;
	left: 96px;
}

#zoom_slider_handle {
	width: 16px;
	height: 16px;
	position: absolute;
	background: url(/images/kropper/slider.png) no-repeat;
}



#crop_reset_btn {
}

#crop_submit_btn {
	float: right;
}

#crop_subfooter {
	background: #525252 url(/images/kropper/subfooter_bg.png) no-repeat;
	border-bottom: 1px solid #525252;
	font: 9px/15px "Lucida Grande", Lucida, Verdana, sans-serif;
	text-align: left;
	padding: 6px 10px 5px 25px;
}

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

#crop_subfooter a:hover {
	text-decoration: none;
	border-bottom: 1px dotted #525252;
}

/* The stuff below is an IE6 PNG transparency fix. See http://bjorkoy.com/past/2007/4/8/the_easiest_way_to_png/ for information. */

/*img, #crop_overlay { behavior: url(iepngfix.htc); }*/

img { behavior: url('/stylesheets/iepngfix.htc');