#container{
	height:680px;
	text-align:center;
}

/*
	This is the picture with the grid on the homepage
	The picture is 728px wide, so there is a 36px margin on each side to center it
*/
#feature{
	width:728px;
	margin: 0 0 16px 36px;
	
}

hr#line{
	width:780px;
	height:12px;
	background:#375472;
	border:0;
	margin:0 0 0 10px;
	padding:0;
}

#products{
	float:left;
	margin:10px 10px 0 10px;
	padding:4px 0 0 7px;
	list-style-type:none;
	background: url(../images/home/fade_vertical.jpg) top left repeat-x;
	width:772px;
}

* html #products{
	margin:0px 0px 0 5px;
}

#products li{
	display:block;
	float:left;
	width:91px;
	margin:0 5px 0 0;
}
		
a.pic{
	background-color:#fff;
	background-position: top left;
	background-repeat: no-repeat;
	display:block; 
	width:91px; 
	height:0; 
	padding-top:73px; 
	color:#000; 
	overflow:hidden;
	margin: 0 0 5px 0;	
}

#pic1			{background-image: url(../images/home/pic1.jpg);}
#pic2			{background-image: url(../images/home/pic2.jpg);}
#pic3			{background-image: url(../images/home/pic3.jpg);}
#pic4			{background-image: url(../images/home/pic4.jpg);}
#pic5			{background-image: url(../images/home/pic5.jpg);}
#pic6			{background-image: url(../images/home/pic6.jpg);}
#pic7			{background-image: url(../images/home/pic7.jpg);}
#pic8			{background-image: url(../images/home/pic8.jpg);}

/*
	This defines the way the rollovers work on the home page
	Each link has link text (for accessibility) and a background image
	Half of the background image is hidden - when they roll over it, it calls the "hover" style (below)
	which moves the hidden part (the 'over' state) into view
*/		
a.rollover{
	background-color:#fff;
	background-position: top left;
	background-repeat: no-repeat;
	display:block; 
	width:91px; 
	height:0; 
	padding-top:90px; 
	color:#000; 
	overflow:hidden;
	margin-bottom:4px;
}

#tables			{background-image: url(../images/home/tables.gif);}
#ehp 				{background-image: url(../images/home/ehp.gif);}
#benches		{background-image: url(../images/home/benches.gif);}
#racks		{background-image: url(../images/home/racks.gif);}
#rests			{background-image: url(../images/home/rests.gif);}
#silica			{background-image: url(../images/home/silica.gif);}
#optic			{background-image: url(../images/home/optic.gif);}
#cases			{background-image: url(../images/home/cases.gif);}
		
a.rollover:hover{
	background-position: top right;
}