@charset "utf-8";
/* CSS Document */

body {
	margin: 0 0 20px 0;
	padding:0;
	background: #512d29 url(../images/blur-texture-bg2.jpg) repeat-x;
	text-align:center;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 12px;
	color: #fff;
	line-height: 1.5em;
}

a{ color:#E8A713; text-decoration: none;}
a:hover{ text-decoration: underline;}

a img{border:none;}

h2{
	font-family: Arial, Helvetica, sans-serif;
	padding: 15px 15px 0 15px;
	font-size: 18px;
	margin:0px;
}

#wrapper{
	width: 963px;
	/*border: 1px solid red;*/
	margin: 0 auto;
	text-align: left;
}
#leftColumn{
	width: 258px; /* 27% or 258px */
	height: 100%;
	text-align: left;
	float: left;
}
#rightColumn{
	margin: 0 0 0 258px;
	background: url(../images/content-top.png) 0 54px no-repeat;
	min-height: 39px;
	padding-top: 93px;
}
#rightColumnInt{ /*will include a faux column bg for the left column to appear fluid*/
	margin: 0 0 0 258px;
	background: url(../images/content-top.png) 0 54px no-repeat;
	min-height: 39px;
	padding-top: 93px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}

/* Miscellaneous classes for reuse */
.floatright { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 0px;
}
.floatleft { /* this class can be used to float an element left in your page */
	float: left;
	margin-right: 0px;
}

#logo1{height:245px;}

#menu{
	height: 452px;
	background: url(../images/menu-bg.png) no-repeat;
}

#menuExpandBg{
	height:18px; 
	background: url(../images/menuBgExpand.png) repeat-y;
}

#menuBottom{height:18px;}

#sponsorLogos{height:94px;}

#menu li{
	list-style:none;
	margin-left:50px;
	margin-bottom: 7px;
	padding:0px;
}

li.mCommunity a, li.mLifestyle a, li.mPlaces a, li.mBenefits a, li.mSurroundings a, li.mReachout a{
	width: 162px;
	height: 32px;
	display: block;
}

li#mCommunityOn a, li#mLifestyleOn a, li#mPlacesOn a, li#mSurroundingsOn a, li#mBenefitsOn a, li#mReachoutOn a{
	width: 162px;
	height: 32px;
	display: block;
}

li.mCommunity a{background: url(../images/menuCommunity.png);}
li.mCommunity a:hover, li#mCommunityOn a{background: url(../images/menuCommunity.png) 0 100%}

li.mLifestyle a{background: url(../images/menugallery.png);}
li.mLifestyle a:hover, li#mLifestyleOn a{background: url(../images/menugallery-over.png) 0 100%}

li.mPlaces a{background: url(../images/menuFloorplans.png);}
li.mPlaces a:hover, li#mPlacesOn a{background: url(../images/menuFloorplans.png) 0 100%}

li.mBenefits a{background: url(../images/menuBenefits.png);}
li.mBenefits a:hover, li#mBenefitsOn a{background: url(../images/menuBenefits.png) 0 100%}

li.mSurroundings a{background: url(../images/menuSurroundings.png);}
li.mSurroundings a:hover, li#mSurroundingsOn a{background: url(../images/menuSurroundings.png) 0 100%}

li.mReachout a{background: url(../images/menuContactUs.png);}
li.mReachout a:hover, li#mReachoutOn a{background: url(../images/menuContactUs.png) 0 100%}

.currentpage{font-weight:bold; background: url(../images/on.gif) 0 2px no-repeat;}

#menu ul li{
	margin-left:12px;
	font-family: Arial, Helvetica, sans-serif;
	
}

#menu ul li a{
	color: #fff;
	text-decoration: none; 
	padding-left: 15px; 
	background: url(../images/on.gif) 0 18px no-repeat;
	/*border: 1px solid red;*/
	height: 16px;
}

#menu ul li a:hover{color: #fff;text-decoration: underline;}

#contentMiddle{background: url(../images/content-middle.png) repeat-y}

#middleBox, #middleBoxHome{
	background: #5E6E66 url(../images/buildingsBg.png) 0 100% no-repeat; 
	width: 668px; 
	margin-left: 18px; 	
	padding-bottom: 80px;
	height: 100%;
	overflow: hidden;
}

#middleBox{min-height: 485px;}
#middleBoxHome{height: 387px;margin-top: 10px; }

#flashImg{
	height:150px;
	width: 668px;
	margin:0 0 0 18px;
}

#middleBoxFooter{
	background: #5E6E66 url(../images/buildingsBg.png) 0 100% no-repeat; 
	height:100px;
}


#middleBox p{margin:0px; padding:15px;}

#homeBox{
	width: 315px;
	height: 255px;
	background: url(../images/homeBox-bg.png);
	border: 1px solid #CCC;
	float:left;
	margin-left: 12px;
}

#homeBox img.img{margin: 10px;}
#homeBox img.read{margin-top: 7px;}
#homeBox p{margin: 0 10px;}

#footer{
	color: #CCC;
	font-family: Arial, Helvetica, sans-serif;
	size: 11px;
	margin-left:10px;
}

#footer a{color:#CCC; text-decoration:none}
#footer a:hover{color:#CCC; text-decoration:underline}

.whiteLink {color:#fff;}

form label {
	display: block;
	float: left;
	width: 40px;
	font-size: 11px;
}
form input, form textarea {
	margin-bottom: 5px;
	background: #fff;
	border: 1px solid #333;
}
form input.submit { border-style: none; }

form.maintReq label {
	display:block;
	float:left;
	width: 90px;
	font-size: 14px;
}
ul.poi-map{
	margin:0 0 0 10px;
	padding:0;
	list-style:none;
}
ul.poi-map li{padding: 0 0 15px 30px;}
ul.poi-map li.one{background: url(../images/bullet-01.gif) 0 -2px no-repeat;}
ul.poi-map li.two{background: url(../images/bullet-02.gif) 0 0 no-repeat;}
ul.poi-map li.three{background: url(../images/bullet-03.gif) 0 0 no-repeat;}
ul.poi-map li.four{background: url(../images/bullet-04.gif) 0 0 no-repeat;}
ul.poi-map li.five{background: url(../images/bullet-05.gif) 0 0 no-repeat;}
ul.poi-map li.six{background: url(../images/bullet-06.gif) 0 -3px no-repeat;}

.whiteLink{color:#fff;}

.sitePlanMap{
	float:left;
	margin-left: 20px;
}

.sitePlanColors{
	margin-left: 20px;
	float:left; 
	background: url(../images/siteplan-colors.gif) 0 -10px no-repeat;
	padding:0 0 0 50px;	
}

.sitePlanColors li{
	list-style: none;
	padding: 9px 0;
}

.sitePlanColors li.first{
	list-style: none;
	padding: 5px 0 9px 0;
}
<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.gallerycontainer{
.gallerycontainer: 300px;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}

.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
}

.thumbnail:hover{
background-color: transparent;
}

.thumbnail:hover img{
border: 1px solid blue;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;

border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 0;
left: 230px; /*position where enlarged image should offset horizontally */
z-index: 50;
}

</style>