/* General navigation styles */
#nav { /* navigation bar */
	background-image:url(../images/nav_bg.jpg);
	background-repeat:no-repeat;
	position:relative;
	height:58px;
	width:386px;
	top:76px;
	left:247px;
}
#nav div a, 
#nav div span { /* nav item (clickable or not) */
	text-decoration:none;
	border:0;
	height:58px;
	float:left;
	display:table-cell;
	background-image:url(../images/nav_states.jpg);
	background-repeat:no-repeat;
	cursor:pointer;
}
#nav div a span, /* nav item text (clickable link) */
#nav div strong { /* nav item text (link not clickable) */
	float:left;
	display:block;
	background-image:none;
	height:20px;
	position:relative;
	top:55px;
	text-align:center;
	border-bottom:1px dotted #FFF;
	color:#FFF;
	overflow:hidden;
}
#nav div a 		 span { padding-top:10px; } /* so the link is taller */
#nav div a:hover span { border-bottom:0; } /* disable link underlining (bottom border) on hover */

/* normal state */
a#nav_home, span#nav_home		{ margin-left:50px; width:54px; background-position:-50px  0; }
a#nav_blog, span#nav_blog, 
a#nav_blog_a 					{ margin-left:17px; width:58px; background-position:-120px 0; }

a#nav_work, span#nav_work, 
a#nav_work_a					{ margin-left:12px; width:57px; background-position:-190px 0; }

a#nav_contact, span#nav_contact	{ margin-left:22px; width:62px; background-position:-270px 0; }

/* hover state */
a:hover#nav_home	{ background-position:-50px  -58px; }
a:hover#nav_blog, 
a:hover#nav_blog_a	{ background-position:-120px -58px; }

a:hover#nav_work, 
a:hover#nav_work_a	{ background-position:-190px -58px; }

a:hover#nav_contact	{ background-position:-270px -58px; }

/* active state */
a:active#nav_home, span#nav_home		{ background-position:-50px  -116px; }
a:active#nav_blog, span#nav_blog, 
a#nav_blog_a, a:active#nav_blog_a 		{ background-position:-120px -116px; }

a:active#nav_work, span#nav_work, 
a#nav_work_a, a:active#nav_work_a		{ background-position:-190px -116px; }

a:active#nav_contact, span#nav_contact	{ background-position:-270px -116px; }
	
/* adjusting the nav item text so it centers under the icon (trial'n'error) */
a#nav_home span		{ left:10px; }
a#nav_blog span,
a#nav_blog_a span	{ left:15px; }

a#nav_work span,
a#nav_work_a span	{ left:15px; }

a#nav_contact span	{ left:8px; }
	
/* current page styles */
#nav div strong {
	font-size:16px; 
	cursor: default; 
	padding-top:10px; 
	height:22px;
	border-bottom:0;
}
span#nav_home strong	{ width:58px; }
span#nav_blog strong	{ width:58px; }
span#nav_work strong 	{ width:64px; }
span#nav_contact strong	{ width:64px; }