/*
* Start mainNav
* This is to do the hi-tech menu roll over, where both states are part of the same image. The over state needs to be at the bottom
*/

#mainNav {
width:752px;
height:28px;
position:relative;
margin-left:9px;
z-index:999;

}

#nav {
list-style:none;
margin:0;
padding:0;
position:absolute;
top:0px;
z-index:999;
}

#nav li{
float:left;

}

.propButt1 {
background: transparent url(../images/propButt1.gif) left top no-repeat;
width:42px;	
	
}

.propButt2 {
background: transparent url(../images/propButt2.gif) left top no-repeat;	
width:46px;	
	
}


.propButt3 {
background: transparent url(../images/propButt3.gif) left top no-repeat;	
width:131px;		
	
}

.propButt4 {
background: transparent url(../images/propButt4.gif) left top no-repeat;	
width:119px;		
	
}


.propButt5 {
background: transparent url(../images/propButt5.gif) left top no-repeat;	
width:169px;		
	
}


.propButt6 {
background: transparent url(../images/propButt6.gif) left top no-repeat;	
width:94px;		
	
}

.propButt7 {
background: transparent url(../images/propButt7.gif) left top no-repeat;	
width:84px;		
	
}


.propButt8 {
background: transparent url(../images/propButt8.gif) left top no-repeat;	
width:67px;		
	
}

.buttonSpace {

margin-right:151px;	
	
}


.propButt1 a:link, .propButt1 a:active, .propButt1 a:visited,
.propButt2 a:link, .propButt2 a:active, .propButt2 a:visited,
.propButt3 a:link, .propButt3 a:active, .propButt3 a:visited,
.propButt4 a:link, .propButt4 a:active, .propButt4 a:visited,
.propButt5 a:link, .propButt5 a:active, .propButt5 a:visited,
.propButt6 a:link, .propButt6 a:active, .propButt6 a:visited,
.propButt7 a:link, .propButt7 a:active, .propButt7 a:visited,
.propButt8 a:link, .propButt8 a:active, .propButt8 a:visited 
{
	display:block;
	overflow:hidden;
	height:28px;
	text-indent: -2999px;
}



.propButt1 a:hover {
	background: url(../images/propButt1.gif) no-repeat 0 -28px;
	}
	.propButt2 a:hover {
	background: url(../images/propButt2.gif) no-repeat 0 -28px;
	}
	.propButt3 a:hover {
	background: url(../images/propButt3.gif) no-repeat 0 -28px;
	}
	.propButt4 a:hover {
	background: url(../images/propButt4.gif) no-repeat 0 -28px;
	}
	.propButt5 a:hover {
	background: url(../images/propButt5.gif) no-repeat 0 -28px;
	}
	.propButt6 a:hover {
	background: url(../images/propButt6.gif) no-repeat 0 -28px;
	}
	
		.propButt7 a:hover {
	background: url(../images/propButt7.gif) no-repeat 0 -28px;
	}
		.propButt8 a:hover {
	background: url(../images/propButt8.gif) no-repeat 0 -28px;
	}
	
		
/*
* Start dropdown
* this is the suckerfish drop down menu, only requirements are that your main ul for your list has an id of "nav"
*/
	
#nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: none;
	z-index: 998;
	font: normal 10px Verdana, Arial, Helvetica, sans-serif;
}

#nav li {
	position: relative;
	z-index: 998;
	float: left;
}

#nav li ul {
	position: absolute;
	left: 0;
	top: 28px;
	display: none;
	border-top: none;
	z-index: 999;
	width:200px;
	}

.border {
	border-top: 1px solid #000;
}

#nav li ul li a { 
	color: #000000;
	background: #9d9c9c;
    padding: 5px ; 
	display: block;
	height:15px; /* MUST have heigh, IE7 Bug */
	text-decoration: none;
	vertical-align:middle;	
	border: 1px solid #000;
	border-top: none;
	width: 200px;
} 

#nav li ul li a:hover {
	color: #fff;
	background-color: #313131;
}
		
#nav li:hover ul, #nav li.over ul { 
	display: block; 
} 


/*
end dropdown
*/