@charset "utf-8";
/* CSS Document */
/*The important CSS command is the first one, list-style: none, which says that we don't want any kind of bullet in our navigation menu. The others are also important to ensure maximum control over the layout and to make sure the text displays in the centre of the box.*/

#nav-menu ul
{
padding: 0;
margin: 0 0 0 5px;
}

/*To get these menu items all on to one line we'll insert this CSS rule-The float CSS command is the really important one here as that aligns the menu items up against each other. The margin CSS command gives each menu item no margin to the top or bottom and a 0.15em margin to the left and right.*/

#nav-menu li
{
float: left;
margin: 2px 0;
list-style: none;
padding: 0;
}

/*The background CSS command is perhaps the most important. In it, we specify the URL of the background image, for there to be a white background behind this image, for the image to be in the bottom-left of the box and for it to be repeated along the x-axis (i.e. horizontally). If we didn't specify the background image to be in the bottom of the box it would be placed in the top left corner. This would cause the white background colour to be visible below the background image, and not above like it is now.

We've specified the height to be double the size of the text at 2em. By specifying the height in terms of em, the height of the box will resize accordingly should a user resize the text3 on their browser. A line height equal to the height of the box must be specified too, as this is what positions the text in the middle of the box and not at the top.*/
#nav-menu li a
{
background:url(../Buttons/but-bkd-b.gif) #ffffff bottom left repeat-x;
color:#006600;
display: block;
float: left;
font-family: Arial, Helvetica, sans-serif;
font-size:14px;
font-weight: bold;
height: 1.5em;
line-height:1.5em;
text-decoration: none;
text-align: center;
width: 75px;
}

#nav-menu li a:hover
{
background:url(../Buttons/but-bkd-a.gif) #FFFFFF top left repeat;
color:#006633;
display: block;
float: left;
font-family: Arial, Helvetica, sans-serif;
font-size:14px;
font-weight: bold;
height: 1.5em;
line-height:1.5em;
text-decoration: none;
text-align: center;
width: 75px;
}
#nav-menu li a:active,
.home a#home,
.books a#books,
.muse a#muse,
.library a#library,
.photo a#photo,
.contact a#contact,
.links a#links,
.poli a#poli,
.music a#music,
.testi a#testi 
{
background:url(../Buttons/but-bkd-c.gif) #009966 bottom left repeat-x;
color:#00FF33;
display: block;
float: left;
font-family: Arial, Helvetica, sans-serif;
font-size:14px;
font-weight: bold;
height: 1.5em;
line-height:1.5em;
margin:0 0 0 15px;
text-decoration: none;
text-align: center;
width: 75px;
}

/*You may have noticed the float: left in the above CSS rule. This is there solely for the benefit of IE 5 on Mac - without it, our CSS navigation boxes will stack up on top of each other in this browser. We don't however want other browsers to use this rule, so we need to cancel it for every browser except IE 5 on Mac: The CSS command here, float: none, will cancel out the float: left CSS command because when two CSS commands are specified for the same selector, the second one always takes precedence. This will work for all browsers except IE 5 on Mac, which will be unable to read the second command because of the slashes and stars.*/

/* Hide from IE5-Mac \*/
#nav-menu li a
{
	float: left
}
/* End hide */

/*There's just one final CSS rule we need to create, and that's to assign a width to our CSS menu navigation. This is optional, but if we don't assign one then menu items on the right may be pushed below the others if users resize their screens. Our new CSS command is:*/

#nav-menu
{
padding: 0;
margin: 0;