/*setup the global message properties*/
html, body { height: 100%; }
#ov1 { z-index:5010;}

#masterModal {
	display:none;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:5000;
	background-color:#000;
	-moz-opacity: 0.1;
	opacity:.10;
	filter:alpha(opacity=10);
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=10);}
#masterModal { position:fixed; }



/*set up the message bubble arrows*/
#msgbubble1 {
	height:62px;
	width:62px;
	z-index:10001;}
#vW #msgbubble1.center { display:none; } /*for modal, don't show arrow*/



/*message bubble arrows images*/
/*load the images for the panels - note there are calls to these images in the IE6 hacks sheet as well */
#vW #msgbubble1.right-center {background: url(../img/overlay/overlayArrowRightCenter.png) no-repeat right top;}
#vW #msgbubble1.right-top {background: url(../img/overlay/overlayArrowTopRight.png) no-repeat right top;}
#vW #msgbubble1.right-bottom {background: url(../img/overlay/overlayArrowRightBottom.png) no-repeat right top;}

#vW #msgbubble1.left-center, #vW #msgbubble1.left-top, #vW #msgbubble1.left-bottom {margin-left:-10px;}
#vW #msgbubble1.left-center {background: url(../img/overlay/overlayArrowLeftCenter.png) no-repeat left top;}
#vW #msgbubble1.left-top {background: url(../img/overlay/overlayArrowLeftTop.png) no-repeat left top;}
#vW #msgbubble1.left-bottom {background: url(../img/overlay/overlayArrowRightBottom.png) no-repeat left top;}

#vW #msgbubble1.top-center {background: url(../img/overlay/overlayArrowTopCenter.png) no-repeat right top;}	
#vW #msgbubble1.top-left {background: url(../img/overlay/overlayArrowTopLeft.png) no-repeat right top;}
#vW #msgbubble1.top-right {background: url(../img/overlay/overlayArrowRightTop.png) no-repeat right top;}

#vW #msgbubble1.bottom-center, #vW #msgbubble1.bottom-left, #vW #msgbubble1.bottom-right{margin-top:-2px;}
#vW #msgbubble1.bottom-center {background: url(../img/overlay/overlayArrowBottomCenter.png) no-repeat right bottom;}
#vW #msgbubble1.bottom-left {background: url(../img/overlay/overlayArrowBottomLeft.png) no-repeat right bottom;}
#vW #msgbubble1.bottom-right {background: url(../img/overlay/overlayArrowBottomRight.png) no-repeat right bottom;}



/*define the sizes of the panels*/
#vW .message300, #vW .message300Footer{ width:300px;}
#vW .message450Footer, #vW .message450 {width:450px;}
#vW .message600Footer, #vW .message600 { width:600px; }

/* heights are important when the panels appear above the link */
#vW .overFlow { overflow:auto; }
#vW .titleMonthlyRent .overFlow {height:211px;}
#vW .titleAerial .overFlow {height:429px;}
#vW .rthMessage .overFlow{ height:140px;}
#vW .titleUnitCompare .overFlow{ height:420px;}
#vW .titleUnitSearch .overFlow{ height:240px;}

#vW .titleAddApplicant .overFlow{height:337px;}



/*define the message panels*/	
#vW .message300, #vW .message450, #vW .message600 {
	background-repeat: no-repeat;
	background-position: top center;
	text-align: center;
	float:left;}
#vW .message300Footer, #vW .message450Footer, #vW .message600Footer {
	background-repeat: no-repeat;
	background-position: top center;
	float:left;
	clear:both;
	height:20px;}




/* Needs to be updated. I moved the overlay div out up to the top level */	

	
/*load the images for the panels - note there are calls to these images in the IE6 hacks sheet as well */
.message600 { background: url(../img/overlay/overlay600Body.png) no-repeat; }
.message600Footer { background: url(../img/overlay/overlay600Bottom.png) no-repeat; }
.message450 { background: url(../img/overlay/overlay450Body.png) no-repeat; }
.message450Footer { background: url(../img/overlay/overlay450Bottom.png) no-repeat; }
.message300 { background: url(../img/overlay/overlay300Body.png) no-repeat; }
.message300Footer { background: url(../img/overlay/overlay300Bottom.png) no-repeat; }



/*set up the message bubble arrows*/
#msgbubble1 {
	height:62px;
	width:62px;
	z-index:10001;}
#msgbubble1.center { display:none; } /*for modal, don't show arrow*/



/*message bubble arrows images*/
/*load the images for the panels - note there are calls to these images in the IE6 hacks sheet as well */
#msgbubble1.right-center {background: url(../img/overlay/overlayArrowRightCenter.png) no-repeat right top;}
#msgbubble1.right-top {background: url(../img/overlay/overlayArrowTopRight.png) no-repeat right top;}
#msgbubble1.right-bottom {background: url(../img/overlay/overlayArrowRightBottom.png) no-repeat right top;}

#msgbubble1.left-center, #msgbubble1.left-top, #msgbubble1.left-bottom {margin-left:-10px;}
#msgbubble1.left-center {background: url(../img/overlay/overlayArrowLeftCenter.png) no-repeat left top;}
#msgbubble1.left-top {background: url(../img/overlay/overlayArrowLeftTop.png) no-repeat left top;}
#msgbubble1.left-bottom {background: url(../img/overlay/overlayArrowRightBottom.png) no-repeat left top;}

#msgbubble1.top-center {background: url(../img/overlay/overlayArrowTopCenter.png) no-repeat right top;}	
#msgbubble1.top-left {background: url(../img/overlay/overlayArrowTopLeft.png) no-repeat right top;}
#msgbubble1.top-right {background: url(../img/overlay/overlayArrowRightTop.png) no-repeat right top;}

#msgbubble1.bottom-center, #msgbubble1.bottom-left, #msgbubble1.bottom-right{margin-top:-2px;}
#msgbubble1.bottom-center {background: url(../img/overlay/overlayArrowBottomCenter.png) no-repeat right bottom;}
#msgbubble1.bottom-left {background: url(../img/overlay/overlayArrowBottomLeft.png) no-repeat right bottom;}
#msgbubble1.bottom-right {background: url(../img/overlay/overlayArrowBottomRight.png) no-repeat right bottom;}



/*define the sizes of the panels*/
.message300, .message300Footer{ width:300px;}
.message450Footer, .message450 {width:450px;}
.message600Footer, .message600 { width:600px; }

/* heights are important when the panels appear above the link */
.overFlow { overflow:auto; }
.titleMonthlyRent .overFlow {height:211px;}
.titleAerial .overFlow {height:429px;}
.rthMessage .overFlow{ height:140px;}
.titleUnitCompare .overFlow{ height:420px;}
.titleUnitSearch .overFlow{ height:240px;}

.titleAddApplicant .overFlow{height:337px;}



/*define the message panels*/	
.message300, .message450, .message600 {
	background-repeat: no-repeat;
	text-align: center;
	float:left;}
.message300Footer, .message450Footer, .message600Footer {
	background-repeat: no-repeat;
	background-position: top;
	float:left;
	clear:both;
	height:20px;}