/*	sizes are in em, where 1em = 12px.  Adjust according to your design (converting to px as necessary)	*/

/*	OpenBox outer container */
#popup {
	margin: 0px;
    padding: 0px;
	background-color: transparent;
	position: absolute;
	top: 0px;
	left: 0px;
	display: none;
	border: 2px dotted #888;
}

/*	prior to transition	*/
#popup.ready {
	display: block;
}

/*	fully opened	*/
#popup.open {
	border: 2px solid #000;
	padding-bottom: 3.9em;
	background-color: #000;
}

/*	content between top and bottom bars	*/
#popup .popupContent {
	position: relative;
	top: 2.4em;
	background-color: #fff;
	width: 100%;
	height: 100%;
	margin: 0px;
    padding: 0px;
	overflow: auto;
}

/*	top bar	*/
#popup #moveHandle {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 2.4em;
	line-height: 1.8em;
	font-size: 1.2em;
}

/*	"name" span	*/
#popup #moveHandle span {
	margin-left: 0.3em;
	color: #fff;
	font-weight: bold;
}

/*	"close" control, top right corner	*/
#popup #closeHandle {
	position: absolute;
	top: 0.2em;
	right: 0.3em;
	width: 1.8em;
	height: 1.8em;
	background: transparent url(close.gif) no-repeat center center;
	cursor: pointer;
}

/*	"resize" control, bottom right corner	*/
#popup #resizeHandle {
	position: absolute;
	right: 0px;
	bottom: 0px;
	background: transparent url(resize.gif) no-repeat bottom right;
	color: #000000;
	width: 2.9em;
	height: 1.6em;
}

/*	modal dialog div that dims the rest of the page	*/
#veil {
	margin: 0px;
	padding: 0px;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background-color: #000;
	display: none;
}