html,body {
	padding: 0;
	border: 0;
	margin: 0;
	background-color: black;
}

#viewer {
	background-color: #000000;
	position: relative;
	top: 0;
	left: 0;
	/* NOTE: the size and width should be set dynamically when initialized */
	width: 0;
	height: 0;
}

#viewer .well,#viewer .surface {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
}

#viewer .surface {
	z-index: 20;
	/* NOTE: required for IE to"see" the surface */
	background: url(../images/blank.gif) no-repeat center center;
}

#viewer .well {
	overflow: hidden;
	z-index: 10;
}

#viewer .well .tile {
	border: 0;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 0px;
	left: 0px;
	display: block;
}

#viewer .thumbnail {
	margin: 0;
	padding: 0;
	border: solid 1px white;
	background: gray;
	position: absolute;
	z-index: 40;
	line-height: 0;
	opacity: 0.8;
}

/* \*/
* html #viewer .thumbnail {
	height: 1%;
	width: 1%;
}
/* */
#viewer .thumbnail .grabbar {
	height: 8px;
	background: url(../images/grab-bar.gif) repeat-x top left;
	padding: 0;
	margin: 0;
	line-height: 0;
	margin-left: 5px;
}

#viewer .thumbnail .container {
	padding: 0;
	margin: 5px;
	position: relative;
}

#viewer .thumbnail .container .locator {
	margin: 0;
	padding: 0;
	background-color: red;
	opacity: 0.4;
	filter: alpha(opacity = 40);
	position: absolute;
	z-index: 60;
}

#iv-content {
	width: 100%;
	float: left;
	height: 500px;
	position: relative;
}

#iv-content img {
	display: block;
	margin: 0 auto;
}

#iv-thumbnail {
	position: absolute;
	right: 20px;
	top: 20px;
	border: 1px solid #d4cfb9;
}