/* This CSS controls the layout of the home page on Map.Hamilton.ca */
/* Written with help from http://www.cssplay.co.uk/menu/balloons.html*/


/* newHovers in the table where all the images are places */
.newHovers
{
	width: 798px;	
	margin-top: -375px;
	position: relative;
	z-index: 40;
	border-collapse:collapse;
}

.newHovers td
{
		width: 266px;		
}

/* box 1-5 c control the placement of the images on the main page */
#box1c
{
	float: none;
	clear: none;
	width: 150px;	
	height: 150px;
	position: relative;
	text-align: center;
	display: block;
	background-color: Transparent;
}

#box2c
{
	float: none;
	clear: none;
	width: 150px;
	height: 150px;
	margin-left: 41px;
	margin-top: 0px;
	position: relative;
	text-align: center;
	display: block;
	background-color: Transparent;	
}

#box3c
{
	float: none;
	clear: none;
	width: 150px;
	height: 150px;
	margin-left: 80px;
	margin-top: 0px;
	position: relative;
	text-align: center;
	display: block;
	background-color: Transparent;
}

#box4c
{
	float: none;
	clear: none;
	width: 150px;
	height: 150px;
	margin-left: 152px;
	margin-top: -60px;
	position: relative;
	text-align: center;
	display: block;
	background-color: Transparent;	
}

#box5c
{
	float: none;
	clear: none;
	width: 150px;
	height: 150px;
	margin-left: -72px;
	margin-top: -60px;
	position: relative;
	text-align: center;
	display: block;
	background-color: Transparent;
}

/* This gets rid of the bullet point beside each image */
.home li
{
	list-style-type: none;	
}

/* set the z-index of the balloon popup so it is above other elements */
.balloon 
{
	z-index: 20;
}

/* the following controls the display of the balloon callouts. 
	If the user is viewing the page with Internet Explorer, 
	HGIS_HomeIE will also be called to fix the known bugs in IE's
	CSS rendering */
.balloon ul 
{
	padding:0; 
	margin:0;
	border:0;
	list-style-type: none;
}

.balloon ul li 
{
	float:left;
	margin:5px;
	width:150px;
	height:150px;
	border: 0px;
}

.balloon ul li a, .balloon ul li a:visited 
{
	display:block;
	color:#000; 
}

.balloon ul li a img, .balloon ul li a:visited img 
{
	border:0;
	z-index: 10;
}

.balloon ul li dl
{
	visibility:hidden;
	position:absolute;
}

.balloon a { text-decoration: none;}
.balloon dl {width:200px; padding:0 0 20px 0; background:transparent url(/maphamilton/HGIS_Controls/images/bottom6.gif) no-repeat bottom left; height:auto; font-family: Arial, Tahoma, Verdana, sans-serif;}
.balloon dt {margin:0; padding:3px; font-size:18pt; color: #000080; background:transparent url(/maphamilton/HGIS_Controls/images/top6.gif) no-repeat top left; text-align:center;}
/*The background image has been taken out for now. It is currently a solid white background*/
.balloon dd {margin:0; padding:5px 15px; color:#000; border:1px solid #000; border-width:0 1px; background:#FFF/*url(/maphamilton/HGIS_Controls/images/globe-faded.jpg)*/ no-repeat bottom right;}
.balloon dd p {padding:0; margin:10px 0; font-family: Arial, Sans-Serif; font-size: 10pt;}

/* For properly alignment of the links in the bubble */
#web5 a {background-color: Transparent; display: inline; }

.balloon ul li:hover 
{
	color:#000; 
	position:relative;
}

/* balloons 3, 4, and 5 must face the opposite way*/
.balloon ul li:hover #web3, 
.balloon ul li:hover #web4,
.balloon ul li:hover #web5 
{
	visibility:visible;
	top:-60px; 
	left:-200px;
	z-index: 30;
}

.balloon ul li:hover #web3 em, 
.balloon ul li:hover #web4 em,
.balloon ul li:hover #web5 em 
{
	display:block;
	position:absolute;
	left:199px;
	top:70px;
	width:36px; 
	height:36px;
	background:transparent url(/maphamilton/HGIS_Controls/images/pointer2.gif);
}

.balloon ul li:hover dl 
{
	visibility:visible;
	top:-60px; 
	left:150px;
	z-index: 30;
}

.balloon ul li:hover dl em 
{
	display:block;
	position:absolute;
	left:-35px;
	top:75px;
	width:36px; 
	height:36px;
	background:transparent url(/maphamilton/HGIS_Controls/images/pointer.gif);
}

.balloon ul li:hover dl a 
{
	color:#606;
	background:transparent;
}

/* The images and bubbles are set to 50% 
	opacity, and changed to 100% opacity
	on a hover over */
div.transOFF 
{
	width: 100%; 
	background-color: Transparent; 
}

div.transON  
{
	width: 100%; 
	background-color: Transparent;
	opacity:.50;
	filter: alpha(opacity=50);
}