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



/*  this is hiding all the feature images until the mouseover  */
.feature_detail_container {	display: none;}
.feature_detail_container .feature_detail { width: 300px; border: 1px solid #ccc; }

/* holds the entire map and it's absolute positioned components */
.map_container {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFF;
	background-image: url(../images/templates/map.jpg);
	height: 760px;
	width: 1220px;
	margin-top: 0px;
	background-repeat: no-repeat;
	background-position: 0px 0px;
	position: relative;
}

/*  clear for the feature image / text */
.map_container .clear_both {
	clear: both;
}

.map_container h3  {
	font-size: 14px;
	text-transform: uppercase;
	color: #FF0;
	letter-spacing: 2px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 12px;
	margin-left: 0px;
}
.map_container h2  {
	font-size: 18px;
	margin: 0px;
}
.map_container p  {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 12px;
	margin-left: 0px;
	font-size: 14px;
}



/* all the leaf mouseover images */
/* contains the leaf image for mouseover */
.map_container a.dot {
	display: block;
	height: 120px;
	width: 120px;
	background-image: url(../images/templates/leaf.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	cursor: pointer;
	position: absolute;
}

.map_container a.dot.selected {
	background-position: 0px -240px;
}

.map_container a.dot:hover {
	background-position: 0px -119px;
}


/* holds the form drop down */
.map_container .form_building {
	position: absolute;
	left: 400px;
	top: 50px;
}


/*  this holds all the elements that pop up when mouseover occurs <we are only using the photo element> */
.map_container .detail_container {
	position: absolute;
	height: 303px;
	width: 877px;
	left: 40px;
	top: 404px;
}

.map_container .submenu_detail {
	width: 250px;
	padding-top: 0px;
	padding-left: 0px;
	position: absolute;
}

.map_container .feature_detail {
	width: 877px;
	padding-top: 0px;
	padding-left: 0px;
	position: absolute;
	top: 1px;
	left: 1px;
}


/* for this map, this is the photo of the featured sustainable element within the building */
.map_container .feature_detail .feature_photo {
	float: left;
	margin-top: 0px;
	margin-right: 15px;
	margin-bottom: 0px;
	margin-left: 15px;
	border: 1px solid #FFF;
}

/*  this is the area for the descriptive text (if needed) we are not using this in our map*/
.map_container .feature_detail .feature_info {
	float: left;
	width: 130px;
}

/* ****************************
 *  Hover / Link Panel CSS
 */
.submenu_detail { 
	width: 300px; 
	border: 1px solid #ccc;
	background-color:#fff;
	display:none;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
	opacity:0.8;
	filter:alpha(opacity=80); /* For IE8 and earlier */
	padding: 4px;
	font-family: Verdana, Geneva, sans-serif;
	font-size:12px;
	position: relative;
}


a.p_link {
		color:#000;
		text-decoration:none;
		cursor:pointer;
		font-family: Verdana, Geneva, sans-serif;
		font-size:11px;
		line-height: 1.5em;

}

a.p_link:hover {
	text-decoration:underline;
	color: #416224;
}

/* add a cancel button */
.cancel {
	position: absolute;
	top: 10px;
	right: 10px;
	cursor: pointer;
}

/* this positions description text, center photo, and icons within feature_details */
.captionHeader {
	position: absolute;
	top: 5px;
	left: 26px;
	margin-top: 25px;
}
.description {
	position: absolute;
	top: 90px;
	left: 26px;
	width: 260px;
	color: #fff;
	font-family: 'PT Sans Caption', sans-serif;
}
.description_nophoto {
	position: absolute;
	top: 90px;
	left: 26px;
	width: 560px;
	color: #fff;
	font-family: 'PT Sans Caption', sans-serif;
}
.centerPhoto {
	position: absolute;
	top: 97px;
	left: 310px;
	width: 266px;
	text-align: center;
}
.icons {
	position: absolute;
	top: 105px;
	right: 25px;
}
a>img {
	border: none;
}