/* trigger button */
#nav-button {
	background:transparent url(../images/nav/home-button.png) no-repeat scroll 0 0;
	display:block;
	height:50px;
	width:90px;
	margin:6px;
	overflow:hidden;
	text-indent:-999em;
	cursor:pointer;
}

#residents-button {
	background:transparent url(../images/nav/residents-button.png) no-repeat scroll 0 0;
	display:block;
	height:50px;
	width:130px;
	margin:6px;
	overflow:hidden;
	text-indent:-999em;
	cursor:pointer;
}

#communities-button {
	background:transparent url(../images/nav/communities-button.png) no-repeat scroll 0 0;
	display:block;
	height:50px;
	width:175px;
	margin:6px;
	overflow:hidden;
	text-indent:-999em;
	cursor:pointer;
}

#about-button {
	background:transparent url(../images/nav/about-button.png) no-repeat scroll 0 0;
	display:block;
	height:50px;
	width:90px;
	margin:6px;
	overflow:hidden;
	text-indent:-999em;
	cursor:pointer;
}

a #about-button {
	background:transparent url(../images/nav/about-button.png) no-repeat scroll 0 0;
	display:block;
	height:50px;
	width:90px;
	margin:6px;
	overflow:hidden;
	text-indent:-999em;
	cursor:pointer;
}

#contact-button {
	background:transparent url(../images/nav/contact-button.png) no-repeat scroll 0 0;
	display:block;
	height:50px;
	width:110px;
	margin:6px;
	overflow:hidden;
	text-indent:-999em;
	cursor:pointer;
}

/* mouseover state */
#nav-button:hover {
	background-position:-0px -53px ;		
}

/* clicked state */
#nav-button:focus {
	background-position:-10px -50px ;		
}

/* mouseover state */
#residents-button:hover {
	background-position:-0px -53px ;		
}

/* clicked state */
#residents-button:focus {
	background-position:-10px -50px ;		
}

/* mouseover state */
#communities-button:hover {
	background-position:-0px -53px ;		
}

/* clicked state */
#communities-button:focus {
	background-position:-10px -50px ;		
}

/* mouseover state */
#about-button:hover {
	background-position:-0px -53px ;		
}

/* clicked state */
#about-button:focus {
	background-position:-10px -50px ;		
}

/* mouseover state */
#contact-button:hover {
	background-position:-0px -53px ;		
}

/* clicked state */
#contact-button:focus {
	background-position:-10px -50px ;		
}
/* tooltip styling */
.tooltip {
	display:none;
	margin: 20px 0px 0px 0px;
	height:200px;
	padding:20px 10px 10px 10px;
	font-size:11px;
	color:#fff;
}

.arrow {
	margin:auto;
	height: 10px;
	width: 20px;
	background: url(../images/nav/nav-arrow.png);
	background-repeat: no-repeat;
}

/* a .label element inside tooltip */
.tooltip .label {
	color:yellow;
	width:35px;
}

.tooltip-content {
	font-family: Arial, Helvetica, sans-serif;
	width: 300px;
	padding: 20px;
	background: url(../images/nav/nav-bg.png) repeat-x;
	float: left;
		
}

.tooltip-content td {
	width: 100px;
	padding: 5px;
		
}

.tooltip-content h1 {
	color:#FC0;
	text-transform:uppercase;
	font-size:13px;
	font-weight:100;
	margin-bottom: 3px;
		
}

.tooltip-content h2 {
	color: #FFF;
	font-size:12px;
		
}

.tooltip-content p {
	color:#FFF;
	line-height:18px;
	font-size:12px;
}

.tooltip-content p a {
	color:#FF0;
	font-size:12px;
	text-decoration:underline;	
}

.tooltip-content p a:hover {
	color: #CCC;
	font-size:12px;
	text-decoration: underline;
}