/*this css sheet is for the nav bar boxes on internal pages
refer to main.css for other elements  */

/*navmap is what makes the images display as a list*/
#navbar{
	margin: 0px 0px 0px 0px;  /*works in conjunction with navmap li margin*/
	padding: 40px 0 100px 0;
	width: 855px;
}

#navbar li {
	margin: 0 7px 30px 7px; /*works in conjunction with navmap margin*/
	float: left;
	position: relative; /* causes the links to flow*/
	list-style: none;
	}
	
#navbar a {
	margin: 0px 0px 0 0px;
	padding:  0px 0px 0 0px;	
	color: #e7e5e5;
	text-decoration: none;
	display: block;
}


/*nav  this puts the list left-aligned so that 3 images display on one line*/
#nav{
	margin: 0 auto;	
	padding: 0;
		text-align: left;
}


/*
position on the page; this makes a sort of "mask" where the image will display
////*/
#nav-about, #nav-mywork, #nav-services, #nav-articles, #nav-seemoresites, #nav-contact,
#nav-about:hover, #nav-mywork:hover, #nav-services:hover, #nav-articles:hover, #nav-seemoresites:hover, #nav-contact:hover  {
	margin: 0;
	padding: 0;
	line-height: 153px;
	width: 128px;
	background-repeat: no-repeat;
}
/*the image  they all use the same image - just change the XY position during Link (default) and Hover*/
#nav-about, #nav-mywork,  #nav-services, #nav-articles, #nav-seemoresites, #nav-contact,
#nav-about:hover, #nav-mywork:hover, #nav-services:hover, #nav-articles:hover, #nav-seemoresites:hover, #nav-contact:hover   {
	background-image: url(../images/mull_navbar.jpg);
}

/* this sets the X and Y coordinate for the images you want to display
If you want to change the order of the boxes, change it on the html page
by re-ordering the list, instead of trying to change this coords or the image itself
I am clever!*/
#nav-about {background-position: 0 0px;}
#nav-about:hover {background-position: 0 -160px; }/* //  nav box position during Hover state*/

#nav-mywork {background-position: -130px 0px;}
#nav-mywork:hover {background-position: -130px -160px; }/* //  nav box position during Hover state*/

#nav-services {background-position: -260px 0px;}
#nav-services:hover {background-position: -260px -160px; }/* //  nav box position during Hover state*/

#nav-articles {background-position: -390px 0px;}
#nav-articles:hover {background-position: -390px -160px; }/* //  nav box position during Hover state*/

#nav-seemoresites {background-position: -520px 0px;}
#nav-seemoresites:hover {background-position: -520px -160px; }/* //  nav box position during Hover state*/

#nav-contact {background-position: -650px 0px;}
#nav-contact:hover {background-position: -650px -160px; }/* //  nav box position during Hover state*/