/* Image Replacment - Accessible Menu */

div#amenu{
	/* Your custom styling for the menu container. */
	background:#FFFFCC;
}

div#amenu ul, div#amenu ul li, div#amenu ul li a, div#amenu ul li a span{
	/* Necessary default styles.  Only change height and text-align if desired.  */
	display:block;
	margin:0;
	padding:0;
	height:20px;
	text-align:center;
	/* Add any desired margins, padding, or borders to elements below individually. */
}

div#amenu ul li, div#amenu ul li a, div#amenu ul li a span{
	/* You can use variable widths by using individual classes, or make each button the same width. */
	width:100px;
}
				
div#amenu ul{
	/* Your custom styling. */
	list-style:none;
}

	div#amenu ul li{
		/* Creates a horizontal line of items from the unordered list. */
		float:left;
	}
	
		div#amenu ul li a{
			/* Only change color, font, text, and (maybe) overflow properties. */
			position:relative;
			color:blue;
			font:bold 10pt/20px "century gothic", sans-serif;
			text-transform:uppercase;
			text-decoration:none;
			overflow:hidden;			
		}
				
		div#amenu ul li a span{
			/* Important: Causes the span element's background to overlap the plain-text link. */
			position:absolute;
			top:0px;
			left:0px;
		}
		
			/* Change your desired colors. */
			/* Using one background image and changing its position (rather than multiple images) improves performance. */
			/* Ensure that your plain text menu's font colors and styles and background colors harken to your image menu. */
			/* Accessibility guidelines recommend that you suggest a state change with more than just color, however, so keep that in mind. */
			div#amenu ul li a:visited{
				color:purple;
			}
			div#amenu a:visited span{
				background-position:center bottom;
			}
			
			div#amenu ul li a:hover{
				color:red;
				text-decoration:underline;
			}
			div#amenu a:hover span{
				background-position:center top;
			}
			
			div#amenu ul li a:active{
				color:red;
			}
			div#amenu a:active span{
				background-position:center bottom;
			}
	
		/* Set your individual image menu buttons here. */	
		li.home a span{
			background:url(amenu_home.jpg) center center no-repeat;
		}
						
		li.blog a span{
			background:url(amenu_blog.jpg) center center no-repeat;
		}
					
		li.contact a span{
			background:url(amenu_contact.jpg) center center no-repeat;
		}