/* Horozontal Sprite Nav
 * ------------------------------------------------------------------------- */
#nav {
	background:url(../images/menu_02.gif) no-repeat;
	width:772px;
	height:62px;
	padding:0px;
	position:relative;
	left:174px;
	z-index:200;
	}
#nav ul{
	float: right;
}	

#nav span { display:none; }

#nav li, #nav a { height:62px; display:block; } /* change height here also */

#nav li { float:left; list-style:none; _display:block; }

#nav-01 { width:86px;}
#nav-02 { width:86px;}
#nav-03 { width:86px;}
#nav-04 { width:85px;}
#nav-05 { width:120px;}
#nav-06 { width:68px;}
#nav-07 { width:69px;}
#nav-08 { width:75px;}
#nav-09 { width:96px;}

/*-------------- (-79px) X position of button / (-30px) height of image from above ------------- */

#nav-01 a:hover { background:url("../images/menu-o_02.gif")  0px 0px no-repeat; }
#nav-02 a:hover { background:url("../images/menu-o_02.gif")  -86px 0px no-repeat; }
#nav-03 a:hover { background:url("../images/menu-o_02.gif")  -172px 0px no-repeat; }
#nav-04 a:hover { background:url("../images/menu-o_02.gif")  -258px 0px no-repeat; }
#nav-05 a:hover { background:url("../images/menu-o_02.gif")  -343px 0px no-repeat; }
#nav-06 a:hover { background:url("../images/menu-o_02.gif")  -463px 0px no-repeat; }
#nav-07 a:hover { background:url("../images/menu-o_02.gif")  -531px 0px no-repeat; }
#nav-08 a:hover { background:url("../images/menu-o_02.gif")  -600px 0px no-repeat; }
#nav-09 a:hover { background:url("../images/menu-o_02.gif")  -675px 0px no-repeat; }

/*-------------- OPTIONAL - Keeps the hover state on each page based on body #id ------------- */
body#homepage #nav-01 { background:url("../images/menu-o_02.gif")  -243px 0px no-repeat;}
body#aboutpage #nav-02 { background:url("../images/menu-o_02.gif") -362px 0px no-repeat; }
body#servicepage #nav-03 { background:url("../images/menu-o_02.gif") -499px 0px no-repeat; }
body#newspage #nav-04 { background:url("../images/menu-o_02.gif") -645px 0px no-repeat; }
body#contactpage #nav-05 { background:url("../images/menu-o_02.gif") -789px 0px no-repeat; }



/* Son of Suckerfish: Horizontal Sprite Nav
 * ------------------------------------------------------------------------- */
#nav li ul {
	position:absolute;
	left:-9999px;
	padding-right:1px;			/* Fixes one px spacing for border-right in FF */
	background-color:#000;	/* Background color of drop down nav - add more styles (i.e. background image) if you want */
		padding-left:0px !important;
	}

#nav li ul li {
	height:30px; 				/* Height of each drop down nav item */
	border:1px solid #000;
	border-top:none;
	
	}	

#nav li ul li a {
	width:100%;
	height:30px;				/* Height of each drop down nav item, should match above */
	line-height:30px;			/* Height of each drop down nav item again, should match above */
	}

#nav li ul li a span {
	display:block;
	padding-left:5px;
	}

/* Drop down link styles */
#nav a:link, #nav a:visited, #nav a:hover, #nav a:active {
	font-size:0.9em;
	font-weight: bold;
	color:#fff;
	text-decoration:none;
	font-family: Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	}

#nav li:hover ul, #nav li.sfHover ul { left:auto; }

/* Hover styles for drop down items */
#nav-01 ul a:hover, #nav-02 ul a:hover, #nav-03 ul a:hover, #nav-04 ul a:hover, #nav-05 ul a:hover, #nav-06 ul a:hover, #nav-07 ul a:hover, #nav-08 ul a:hover, #nav-09 ul a:hover {
	background-image:none;
	background-color:#00924d;
	color:#000;
	text-decoration:none;
	text-transform: uppercase;
	}

/* width of drop down nav - choose width that allows items to display on one line */
#nav-01 ul, #nav-01 li { width:250px; }		
#nav-02 ul, #nav-02 li { width:250px; }
#nav-03 ul, #nav-03 li { width:200px; }		
#nav-04 ul, #nav-04 li { width:120px; }
#nav-05 ul, #nav-05 li { width:120px; }		
#nav-06 ul, #nav-06 li { width:120px; }		
#nav-07 ul, #nav-07 li { width:120px; }
#nav-08 ul, #nav-08 li { width:120px; }
#nav-09 ul, #nav-09 li { width:120px; }
