@charset "utf-8";
/* CSS Document */
/* A modified version of http://www.cssplay.co.uk/menus/centered_sliding_doors.html */

#nav {
	margin:0; /* margin around the navigation div. It has 0px margin assigned */
	float:left;
	width:100%;
	/*background:#dae0d2 url("../images_nautilus/nav_background.gif") repeat-x bottom;*/
	}
#nav ul {
	margin:0 auto;
	padding:10px 10px 0;
	list-style:none;
	display:table;
	font-size:1.3em;
	}
#nav li {
	display:table-cell;
	float:left;
	background:url("../images_nautilus/nav_right_both.png") no-repeat right top;
	margin:0 0 0 15px; /* This px amount is width of nav_left_both.png image. If the nav_left image is 25px wide, and we specify 25px here then the tabs will line up exactly. If I specify less than 25px, then the tabs will overlap each other */
	padding:0;
	}
#nav a {
	display:block;
	position:relative;
	left:-25px; /* This 25px amount is width of nav_left_both.png image */
	margin-right:-25px; /* This 25px amount is width of nav_left_both.png image */
	width:.1em;
	background:url("../images_nautilus/nav_left_both.png") no-repeat left top;
	padding:9px 25px 7px 25px; /* padding around the actual link text, to pad out the tabs */
	text-decoration:none;
	font-weight:bold;
	color:#fff; /* Initial colour of the navigation text */
	}
#nav > ul a {width:auto;}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#nav a {float:none;}
/* End IE5-Mac hack */
#nav a:hover {
	color:#000; /* Hover over colour of the navigation text links */
	}
#home #nav-home, 
#webdesign #nav-web,
#emaildesign #nav-email, 
#portfolio #nav-portfolio,
#estimate #nav-estimate,
#contact #nav-contact {
	background-position:100% -51px;  /* This -51px allows the down-state image to show, since both button states are actually contained on the same image */ 
	}
#home #nav-home a, 
#webdesign #nav-web a,
#emaildesign #nav-email a, 
#portfolio #nav-portfolio a,
#estimate #nav-estimate a,
#contact #nav-contact a {
	background-position:0 -51px; /* This -51px allows the down-state image to show, since both button states are actually contained on the same image */ 
	padding-bottom:7px;
	color:#000; /* Hover over colour of the navigation text links */
	}
/* not for IE5.x or IE6 */
#nav li:hover, 
#nav li:hover a {
	background-position:100% -51px; /* This -51px allows the down-state image to show, since both button states are actually contained on the same image */ 
	color:#000; /* Hover over colour of the navigation text links */
	}
#nav li:hover a {
	background-position:0 -51px; /* This -51px allows the down-state image to show, since both button states are actually contained on the same image */ 
	}