/******** Menu Bar CSS *********/

/* GLOBALHEADER */
#menucontainer { width: 753px; height: 32px; margin: 9px 0px 0px 80px; position: relative; z-index: 1000; }
#menucontainer #menubar { margin: 0px 0px 0px 280px; padding: 0px; }
#menucontainer #menubar li { display: inline; }
#menucontainer #menubar li a { float: left; height: 0px; padding-top: 32px; overflow: hidden; }
/* Don't forget to set the width of all menu elements IF they are AT LEAST one different. If not, put the global width on the previous line*/
#menucontainer #menubar li#li-home a { width: 108px; }
#menucontainer #menubar li#li-blog a { width: 98px; }
#menucontainer #menubar li#li-album a { width: 121px; }
#menucontainer #menubar li#li-guestbook a { width: 146px; }
#menucontainer #menubar li a, #menucontainer { background-image: url(../images/menubar.png); background-repeat: no-repeat; }

/* BUTTONS - sets the X position of all images on their basic behaviour */
#menucontainer #menubar li#li-home a { background-position: -280px 0px; }
#menucontainer #menubar li#li-blog a { background-position: -388px 0px; }
#menucontainer #menubar li#li-album a { background-position: -486px 0px; }
#menucontainer #menubar li#li-guestbook a { background-position: -607px 0px; }

/* OVER STATES - sets the Y position of all images when mouse is over */
#menucontainer #menubar li#li-home a:hover { background-position: -280px -32px; }
#menucontainer #menubar li#li-blog a:hover { background-position: -388px -32px; }
#menucontainer #menubar li#li-album a:hover { background-position: -486px -32px; }
#menucontainer #menubar li#li-guestbook a:hover { background-position: -607px -32px; }

/* PRESSED STATES - sets the Y position of all images when clicked */
#menucontainer #menubar li#li-home a:active { background-position: -280px -64px; }
#menucontainer #menubar li#li-blog a:active { background-position: -388px -64px; }
#menucontainer #menubar li#li-album a:active { background-position: -486px -64px; }
#menucontainer #menubar li#li-guestbook a:active { background-position: -607px -64px; }

/* ON STATES - says which menu icon is highlighted, this is the "onclick" state. It may cause problems with the dynamic structure of the website, in that case comment that part */
#menucontainer.home #menubar li#li-home a:hover { background-position: -280px 0px; cursor: default; }
#menucontainer.blog #menubar li#li-blog a { background-position: -388px -96px; }
#menucontainer.album #menubar li#li-album a { background-position: -486px -96px; }
#menucontainer.guestbook #menubar li#li-guestbook a { background-position: -607px -96px; }


/******** Menu Bloc CSS *********/

/* GLOBALHEADER */
#menucontent { z-index: 1000; }
#menucontent ul { list-style-type: none; margin: 0px; padding: 5px; }
#menucontent li a { background-image: url(../images/menu.jpg); background-repeat: no-repeat; height: 25px; text-decoration: none; padding: 10px 0px 0px 20px; }

/* BUTTONS */
#menucontent li a:link, #menucontent li a:visited { color: white; display: block; }

/* OVER STATES - sets the Y position of all images when mouse is over */
#menucontent li a:hover { color: black; background-position: 0px -35px; }

/* PRESSED STATES - sets the Y position of all images when clicked */
#menucontent li a:active { color: #26370A; background-position: 0px -70px; }