/* CSS for main.html */

/*
Change history...
7/24/15	- Moved .unitInfo from right side to left side
		- Moved .unitPhotos from right side to left side
		- Added .imageFrame2 (2 pixels vs 4 pixels margin)
		
8/9/15	- Changed margins for #content img, .floatRignt, .noSmallFrame, .imageFrame 
			for consistancy. #contentImg margins were overriding others
			
8/24/15	- Added (fixed) Print Information sheet button and set position to be at
			bottom left corner of unitInfo boxes. Added position:relative &
			position:absolute to set position of icon.
		- Changed background to an image
		- Adjusted width of unitInfo box for iPad/portrait

*/

html		{overflow:hidden; height: 100%; background: white; }
body		{width:auto;  height:100%;			 /* border around web page top, bottom, left, right */	
				-webkit-text-size-adjust: 100%;
				background-image:url("../images/backgroundRepeat.jpg");
				font-family:
					/* 1 */ -apple-system, BlinkMacSystemFont,
					/* 2 */ "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
					/* 3 */ "Helvetica Neue", sans-serif;		
				} 	
		

/* computer, ipad (landscape) */
@media only screen and (min-width: 765px) {
	/*html	{background: white; }		 outside area on left & right sides */
	body	{width: 800px; margin:0 auto; padding:0 0; overflow :auto; 
				float:none; border:1px solid silver; border-width:0 1px; 
				box-shadow: 0 3px 8px 4px #d8d8d8, 0 -3px 8px 4px #d8d8d8;
				-moz-box-shadow:	0 3px 8px 4px #d8d8d8, 0 -3px 8px 4px #d8d8d8;
				-webkit-box-shadow: 0 3px 8px 4px #d8d8d8, 0 -3px 8px 4px #d8d8d8;}		/* chrome */
}
 
/* ipad (portrait) */
@media only screen and (max-width: 800px) {
	body	{width: auto;}
}		 

/* iphone (portrait & landscape) */
@media only screen and (max-width: 764px) {
	body	{width: auto;}
}		  

/*	presentation	*/	
.~~~boxDetails			{clear:both; margin:0px 0px 20px 10px; padding:0 0; overflow:hidden; 
						background-color:white; border:1px #0080C0 solid;}

.~~~boxSummary			{clear:both; margin:0px 0px 20px 10px; padding:0 0; overflow:hidden; 
						background-color:white; border:1px #0080C0 solid;}
						
.boxHighlight, .boxDetails, .boxSummary
						{clear:both; margin:0px 10px 20px 10px; padding:10px 10px; overflow:hidden; 
						position:relative; background-color:white; 
						-webkit-box-shadow: 0px 0px 7px 0px rgba(50, 50, 50, 1);
						-moz-box-shadow:    0px 0px 7px 0px rgba(50, 50, 50, 1);
						box-shadow:         0px 0px 7px 0px rgba(50, 50, 50, 1);}

.noBoxBorder			{border:0px solid white;}
						

/* Containers */
#bodyWrapper 		{ width:auto; margin:20px 20px;  }
#contentWrapper 	{ width:auto; margin:20px 0px;}

#header				{ width:auto; margin:0 0 10px 0px; overflow:hidden; }			
#vbwlogo			{ float:left; }
#vbwicon			{ float:right; }

#menuBar 			{width:auto; background-color:white; clear:both; overflow:hidden;
						padding:3px 0 2px 0;  
						background-color:white; border:1px maroon solid;}
#menuBar ul			{display:inline;  background-color:white; list-style-type:none; }
#menuBar ul li		{float:left; }
#menuBar ul li a	{padding:3px 10px 3px 10px; font-weight:bold;}

#menuBar a			{ }
#menuBar a:link		{ color:#993333; }
#menuBar a:visited	{ color:#993333; }
#menuBar a:active	{ color:#993333; }
#menuBar a:hover	{ margin:3px 0 2px 0;color:white; background-color:#993333; }

#bodyAvailable #menuBar .menuAvailable	{background-color:#f2e6d9; }
#bodyBuildings #menuBar .menuBuildings	{background-color:#f2e6d9; }
#bodyContact #menuBar .menuContact		{background-color:#f2e6d9; }
#bodyAbout #menuBar .menuAbout			{background-color:#f2e6d9; }

#bodyAvailable #menuBar .menuAvailable:hover	{color:#993333; background-color:#f2e6d9; }
#bodyBuildings #menuBar .menuBuildings:hover	{color:#993333; background-color:#f2e6d9; }
#bodyContact #menuBar .menuContact:hover		{color:#993333; background-color:#f2e6d9; }
#bodyAbout #menuBar .menuAbout:hover			{color:#993333; background-color:#f2e6d9; }

#content 			{ width:auto; clear:both; overflow:hidden;}
#content h1			{ margin:0px 0 10px 0;  border-bottom :1px gray solid; }
#content h2			{ margin:15px 0 5px 0; color:Brown}
#content h3			{ margin:10px 0px; color:#4e6096; }
#content h4			{ text-decoration:underline; font-weight:bold;}
#content h6			{ margin:-5px 0 5px 15px; color:black;text-decoration:underline;} 
#content p			{ margin:0 0px 10px 15px; color: #000000;}
#content ul li a	{ font-weight:bold; color:blue; text-decoration:underline;}

#content0 			{ width:auto; clear:both; overflow:hidden;}
#content0 h1		{ margin:0px 0 10px 0;  border-bottom :1px gray solid; }
#content0 h2		{ margin:15px 0 5px 0;}
#xcontent0 h3		{ margin:10px 0px; color:#0080C0; }
#content0 h6		{ margin:-5px 0 5px 15px; color:gray; font-size:14px;}
#content0 p			{ margin:0 0px 10px 15px; color: #000000;}
#content0 ul li a	{ font-weight:bold; color:blue; text-decoration:underline;}

#contentImgLeft		{ margin:0px 10px; padding:20px 10px;clear:both; overflow:hidden;}
#contentImgLeft h1	{ margin:0px 0 10px 0;  border-bottom :1px gray solid; }
#contentImgLeft h2	{ margin:0 0 5px 0;}
#contentImgLeft p	{ margin:0 15px 10px 15px; }
#contentImgLeft img	{ float:left; margin:0px 10px 10px 0;  }

#contentImgLeft0	{ margin:0px 10px; padding:20px 10px;clear:both; overflow:hidden;}
#contentImgLeft0 h1	{ margin:0px 0 10px 0;  border-bottom :1px gray solid; }
#contentImgLeft0 h2	{ margin:0 0 5px 0;}
#contentImgLeft0 p	{ margin:0 15px 10px 15px; }
#contentImgLeft0 img	{ float:left; margin:0px 10px 10px 0;  }

#contentImgLeft1	{ margin:0px 10px; padding:20px 10px;clear:both; overflow:hidden;}
#contentImgLeft1 h1	{ margin:0px 0 10px 0;  border-bottom :1px gray solid; }
#contentImgLeft1 h2	{ margin:0 0 5px 0;}
#contentImgLeft1 p	{ margin:0 15px 10px 15px; }
#contentImgLeft1 img	{ float:left; margin:0px 10px 10px 0;  }

#contentLeft 		{ width:50% ; margin:10px 0px; padding:20px 20px;}
#contentLeft h1		{ margin:0px 0 10px 0;  border-bottom :1px gray solid; }
#contentLeft h2		{ margin:0 0 5px 0;}
#contentLeft p		{ margin:0 15px 10px 15px; }
#contentLeft img	{ float:left; margin:0px 10px 10px 0;  }

#contentRight 		{ width:35%; float:right; margin:10px 0px; padding:20px 20px;}
#contentRight h1	{ margin:0px 0 10px 0;  border-bottom :1px gray solid; }
#contentRight h2	{ margin:0 0 5px 0;}
#contentRight p		{ margin:0 15px 10px 15px; }
#contentRight img	{ float:right; margin:0px 0px 0px 0;  }
	
#footer 			{ width:45%; margin:15px auto; clear:both; overflow:hidden; background-color:#fff7e6; 
						border:1px #9A7351 dotted; }					
#footerText			{margin:8px auto; padding:8px 8px;}
#footerText	h3		{width:94%; text-align:center; color:maroon; font-weight:bold;}
#footerText	h4		{width:94%; text-align:center; color:maroon; font-weight:bold;}
#footerText	p		{width:94%; text-align:center; color:maroon; }


.unitInfo			{padding:0px 0px 0px 0px; }
.unitInfo p			{margin:10px 0; }
.unitInfo ul		{margin:10px 0; }
.unitInfo ul li		{margin:0px 0px 0px 30px; }
.unitInfo h4		{color:Brown; text-decoration:underline; }
.boxDetails h4		{color:Brown; text-decoration:underline; }

.unitFooter			{float:left; width:98.5%; margin:0 0 20px 10px;  }

.bldgAvail			{float:left; width:100%; padding:0px; }
.bldgAvail p		{margin:0px  0;}
.bldgAvail ul		{margin:10px 0; }
.bldgAvail ul li	{margin:0px 0px 5px 30px; }
.bldgAvail h4		{color:Brown; }

.bldgInfo			{padding:0px 0px 0px 0px; }
.bldgInfo p			{margin:10px 0; }
.bldgInfo ul		{margin:10px 0; }
.bldgInfo ul li		{margin:0px 0px 0px 30px; }

.building			{float:left;}
.building ul		{float:right;}
.building img		{float:right; margin:10px 0px 10px 10px;}

#buttonList 		{clear:both; display:inline; width:auto; overflow:hidden; float:left; padding:0px 0px 0px 0px; }
#buttonList ul		{display:inline; list-style-type:none; }
#buttonList ul li	{float:left; color:#4e6096; list-style-type:none;}
#buttonList ul li a	{color:#4e6096; text-decoration:none; }

#buttonList0 		{clear:both; display:inline; width:auto; overflow:hidden; float:right; padding:5px 0px 0px 0px; }
#buttonList0 ul		{list-style-type:none; }
#buttonList0 ul li	{float:left; color:#4e6096;}
#buttonList0 ul li a	{color:#4e6096; text-decoration:none; }


#buttonSingle 		{color:#4e6096; text-decoration:none; padding:15px 0px 10px 0px; margin:5px 0px 0px 0px; }

.button				{background-color:#f2e6d9; border:1px solid #4e6096; font-weight:600
					border-radius:41px; -moz-border-radius:41px; -webkit-border-radius:41px;
					display:inline-block; list-style-type:none; cursor:pointer; 
					color:#4e6096; font-family:Arial; font-size:10px; 
					padding:1px 6px;
					text-decoration:none; text-shadow:0px 0px 0px #283966; }
.button:link		{color: #4e6096; background-color:#f2e6d9; text-decoration:none;}
.button:hover		{background-color:#cde1fa;}
.button:active		{background-color:#fac3c3;}
.button a 			{ color: #4e6096; }


.underline			{text-decoration:underline;}
.bold				{font-weight:bold;}
.italics			{font-style:italic;}
.updateDate	p		{float:right; font-style:italic; color:gray }

.imageFrame0		{margin:0px 0px 8px 4px; padding:0px 0px; border:1px gray solid; background-color:white; 
					display: none;}
.imageFrame			{margin:0px 0px 0px 0px; padding:4px 4px; border:1px gray solid; background-color:white; }
.imageFrame2		{margin:0px -4px 4px 4px; padding:2px 2px; border:1px gray solid; background-color:white; }				
.imageRight			{float:right; overflow:hidden;}
.imageRight10		{float:right; margin:0px 10px 10px 10px; overflow:hidden;}
.imageLeft			{float:left; }
.imageBottom		{vertical-align: bottom; }
.figcaption			{display: none;}
.centerSmallScreen	{ }
.imageCaption		{xfont-family: Arial, Helvetica, sans-serif;	font-size:10px; font-style: italic; margin-top:-5px;}

.printInfoSheet		{float:left; position:absolute; bottom:0; width:50%; xborder:1px red dotted;}
.printInfoSheet	img	{float:right; margin:0px 20px 10px 10px;}

.popupImageList		{margin:0px; padding:4px 0px; list-style:none; white-space: nowrap; overflow:hidden; position:absolute; }
.popupImageList li	{display: inline-block; vertical-align: top; list-style-type: none;}
.popupImageList li img	{margin:2px 0px; max-width:100%; }	

x.royalSlider .rsThumb		{width: 64px; height: 40px; background-color:white;}
.royalSlider .rsThumbs		{background-color:white;}
.royalSlider .rsThumbsVer	{width: 64px; }
.royalSlider .rsThumbsHor	{height: 40px; }
.royalSlider		{margin:0px 0px 0px 0px; padding:4px 4px; border:1px gray solid; background-color:white; }

/* computer, tablet (landscape) */
@media only screen 
	and (min-width: 800px) {
.unitPhotos			{float:right; }
.unitInfo			{float:left; width:49%;}
.bldgInfo			{float:left; width:54%;}
xbody				{background:blue}
}
 
  /* iphone, ipad font overrides (portrait & landscape) make font larger for clarity */
@media only screen 
	and (max-device-width: 805px) {
#footer 			{width: 45%; }
p           		{font-size: 15px; line-height:130%;  }
li		     		{font-size: 15px; }
ul li		    	{font-size: 15px; }
ul li a		    	{font-size: 15px; }
ol li	     		{font-size: 15px; }
.unitInfo h4		{font-size:16px; }
.bldgAvail h4		{font-size:16px; }
.bldgInfo h4		{font-size:16px; }
} 

 /* tablet (portrait) */
@media only screen 
	and (max-width: 799px) {
.unitPhotos			{float:right; }
.unitInfo			{float:left; width:48%;}
.bldgInfo			{float:left; width:52%;}
.xxprintInfoSheet		{float:left; position:absolute; bottom:0px; width:48%; xborder:1px black dotted;}
.printInfoSheet	img	{float:right; margin-right:10px;}
xbody				{background:green; } 
}

/* iphone 6, 6+ - portrait & landscape */
@media only screen and (max-device-width: 640px),
	only screen and (max-device-width: 667px),
	only screen and (max-width: 480px){ 
html				{background-image:url("../images/backgroundRepeat.jpg");}
#bodyWrapper		{margin:20px 10px; }
#menuBar ul li a	{font-size: 12px; padding:3px 4px 3px 4px; font-weight:normal;}
#footer 			{width:80%; }
.unitInfo			{float:left; width:100%; xborder:1px red dotted;}
.bldgInfo			{float:left; width:auto; }
.bldgAddress		{font-weight:normal;}
.royalSlider		{float:left; width:305px; height: 216px; }
.unit				{float:left; width:auto; padding:0 10px;}
.centerSmallScreen	{width:94%; }
.printInfoSheet		{float:left; background-color:#f2e6d9; position:absolute; bottom:232px; width:100%; 
					xborder:1px red dotted;}
.printInfoSheet	img	{float:right; margin:0px 20px 10px 10px;}
.printInfoSheet .buttonList {float:right; margin:0px 20px 10px 10px;}

xbody				{background:blue; } 
.button				{float:left;}

}

/* iphone 6, landscape */
@media only screen 
	and (min-device-width: 375px)
	and (max-device-width: 667px)
	and (orientation : landscape) { 
.unitInfo			{float:left; width:46%; xborder:1px red dotted;}
.printInfoSheet		{float:left; position:absolute; bottom:0px; width:46%; xborder:1px red dotted;}
.printInfoSheet	img	{float:right; margin:0px 10px 10px 10px}
.printInfoSheet .buttonList {float:right; margin:0px 20px 10px 10px;}


xbody				{background: red; }  
}

/* ==================================== iPhone 6, 6+ tests ======================================= */

/*iPhone 6 Portrait
@media only screen 
	and (min-device-width: 375px) 
	and (max-device-width: 667px) 
	and (orientation : portrait) { 
}*/

/*iPhone 6 landscape
@media only screen 
	and (min-device-width: 375px) 
	and (max-device-width: 667px)
	and (orientation : landscape) { 
}*/

/*iPhone 6+ Portrait
@media only screen 
	and (min-device-width: 414px) 
	and (max-device-width: 736px) 
	and (orientation : portrait) { 
}*/

/*iPhone 6+ landscape
@media only screen 
	and (min-device-width: 414px) 
	and (max-device-width: 736px) 
	and (orientation : landscape) { 
}*/

/*iPhone 6 and iPhone 6+ portrait and landscape
@media only screen and (max-device-width: 640px), 
	only screen and (max-device-width: 667px), 
	only screen and (max-width: 480px){ 
}*/

/*iPhone 6 and iPhone 6+ portrait
@media only screen and (max-device-width: 640px), 
	only screen and (max-device-width: 667px), 
	only screen and (max-width: 480px) 
	and (orientation : portrait){ 
}*/


/* ==================================== Hidden Info Requet Form ======================================= */
	
.inputForm h2		{margin: -15px 0px 5px 0px; text-align:center; color:maroon;}
.inputForm h4		{margin: 0px 0px 10px 0px; text-align:center; color:maroon;}
#infoRequestForm	{display: none;
				    background-color: #FFF;
				    height: 400px;	/* 290px; */
				    width: 300px;
				    margin: 0px;
				    xmargin-right: 0px;
				    xmargin-left: 0px;
				    xmargin-top: 0px;
				    xborder-top-left-radius: 10px;
				    xborder-top-right-radius: 10px;
				    padding: 0px;
				    text-align:center;
				    xborder: 1px #ccc dotted;}
				    
label {
				    xfont-family: Arial, Tahoma, sans-serif; font-size: 1.2em; line-height: 1.2em;    color: #333;
				    font-weight:normal;
				    width: 60px; height: 8px;
				    xborder: 1px #ccc dotted;
				    margin:2px 0px 0px -15px;
				    text-align: right;
				    float:left;}
input {
				    height: 8px;
				    width: 180px; 
				    xborder: 1px black solid;
				    border: 0px; border-bottom: 1px solid #ccc; font-weight:bold;
					xfont-family: Arial, Tahoma, sans-serif; font-size: 1.2em; line-height: 1.1em;
				    color: #0080C0;}

input.error, textarea.error
					{border-color: #973d3d; border-style: solid; background: #f0bebe; color: #a35959; }
input.error:focus, textarea.error:focus
					{border-color: #973d3d; color: #a35959; }

#irfStatusMsg		{float: left; margin :15px 0px 0px 0px;}
#irfStatusMsg p		{text-align:center; color:red; margin:5px 0px 0px 25px; font-style:italic; font-weight:bold;}
#irfStatusMsg h2	{text-align:center; color:#060;}
#irfStatusMsg h4	{text-align:right; color:#060; margin:0px 0px 0px 25px; }

.irfButton			{display: block; color: #dee5f0; background: #1e4c99; cursor: pointer; padding: 5px 11px; 
					float:right; margin: 0px 15px 10px 15px; width: 75px;
					border: solid 1px #224983; border-radius: 5px; font-size: 1.2em;
					background: -webkit-gradient(linear, left top, left bottom, from(#2f52b7), to(#0e3a7d)); 
					background: -moz-linear-gradient(top, #2f52b7, #0e3a7d); 
					background: -webkit-linear-gradient(top, #2f52b7, #0e3a7d);
					background: -o-linear-gradient(top, #2f52b7, #0e3a7d);
					background: -ms-linear-gradient(top, #2f52b7, #0e3a7d);
					background: linear-gradient(top, #2f52b7, #0e3a7d);
					filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2f52b7', endColorstr='#0e3a7d'); 
					}
		
.irfButton:hover	{background: #183d80; 
					background: -webkit-gradient(linear, left top, left bottom, from(#284f9d), to(#0c2b6b)); 
					background: -moz-linear-gradient(top,  #284f9d, #0c2b6b); 
					background: -webkit-linear-gradient(top, #284f9d, #0c2b6b);
					background: -o-linear-gradient(top, #284f9d, #0c2b6b);
					background: -ms-linear-gradient(top, #284f9d, #0c2b6b);
					background: linear-gradient(top, #284f9d, #0c2b6b);
					filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#284f9d', endColorstr='#0c2b6b');
					}
.irfButton:active	{color: #8c9dc0; 
					background: -webkit-gradient(linear, left top, left bottom, from(#0e387d), to(#2f55b7)); 
					background: -moz-linear-gradient(top,  #0e387d,  #2f55b7);
					background: -webkit-linear-gradient(top, #0e387d, #2f55b7);
					background: -o-linear-gradient(top, #0e387d, #2f55b7);
					background: -ms-linear-gradient(top, #0e387d, #2f55b7);
					background: linear-gradient(top, #0e387d, #2f55b7);
					filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0e387d', endColorstr='#2f55b7');
					}