@charset "UTF-8";
/* CSS Document */

/*Define the height and width of the nav bar. The height should only be the height of a 'single state' of the nav*/
#wwwNav { width:645px; height:33px; margin-top:11px; margin-left:14px}

#wwwNav #Nav { width:645px; height:33px; margin:0; padding:0; background:url(../images/navigation.gif) 0 0 no-repeat; }

#wwwNav #Nav li { display:inline; }

/*No outline gets rid of the annoying dotted line thing when you click on the link*/
#wwwNav #Nav li a { float:left; outline:none; height:0; padding-top:33px; overflow:hidden; }

#wwwNav #Nav li a { background-image:url(../images/navigation.gif); background-repeat:no-repeat; }


/*Add in the width of EACH navigation link - see PSD for pixel widths*/
#wwwNav #Nav li#nav00 a { width:70px; background-position: 0 0; }

#wwwNav #Nav li#nav01 a { width:163px; background-position: -70px 0; }

#wwwNav #Nav li#nav02 a { width:181px; background-position: -233px 0; }

#wwwNav #Nav li#nav03 a { width:115px; background-position: -414px 0; }

#wwwNav #Nav li#nav04 a { width:116px; background-position: -529px 0; }


/*Move nav bar down ONCE for the hover state*/
#wwwNav #Nav li#nav00 a:hover { background-position: 0 -33px; }

#wwwNav #Nav li#nav01 a:hover { background-position: -70px -33px; }

#wwwNav #Nav li#nav02 a:hover { background-position: -233px -33px; }

#wwwNav #Nav li#nav03 a:hover { background-position: -414px -33px; }

#wwwNav #Nav li#nav04 a:hover { background-position: -529px -33px; }


/*Move nav bar down TWICE for the active state. Also create the body id so the 'active' state is active on a particular page*/
body#home #Nav li#nav00 a { background-position: 0 -66px; }

body#about_book #Nav li#nav01 a { background-position: -70px -66px; }

body#about_author #Nav li#nav02 a { background-position: -233px -66px; }

body#resources #Nav li#nav03 a { background-position: -414px -66px; }

body#contact #Nav li#nav04 a { background-position: -529px -66px; }