/* CSS Document */
/* 
Title:     		The Nutty Chocolatier main navigation styles
Author:    		analogue.ca/terabit.ca
Version:   		1.5
Created:   		December 29, 2006
Updated:   		January 4, 2007
Description:	This css sheet replaces the javascript image swap commands
*/

#menu-home a {
	width: 46px;
	background: url(../images/btn-home-up.gif) top left no-repeat;
}
#menu-home a:hover, #menu-home a.menu-active {
	width: 46px;
	background: url(../images/btn-home-over.gif) top left no-repeat;
}

#menu-chocolates a {
	width: 86px;
	background: url(../images/btn-chocolates-up.gif) top left no-repeat;
}
#menu-chocolates a:hover, #menu-chocolates a.menu-active {
	width: 86px;
	background: url(../images/btn-chocolates-over.gif) top left no-repeat;
}

#menu-checkout a {
	width: 73px;
	background: url(../images/btn-checkout-up.gif) top left no-repeat;
}
#menu-checkout a:hover, #menu-checkout a.menu-active {
	width: 73px;
	background: url(../images/btn-checkout-over.gif) top left no-repeat;
}

#menu-locations a {
	width: 76px;
	background: url(../images/btn-locations-up.gif) top left no-repeat;
}
#menu-locations a:hover, #menu-locations a.menu-active {
	width: 76px;
	background: url(../images/btn-locations-over.gif) top left no-repeat;
}

#menu-faq a {
	width: 38px;
	background: url(../images/btn-faq-up.gif) top left no-repeat;
}
#menu-faq a:hover, #menu-faq a.menu-active {
	width: 38px;
	background: url(../images/btn-faq-over.gif) top left no-repeat;
}

#menu-events a {
	width: 58px;
	background: url(../images/btn-events-up.gif) top left no-repeat;
}
#menu-events a:hover, #menu-events a.menu-active {
	width: 58px;
	background: url(../images/btn-events-over.gif) top left no-repeat;
}

#menu-about a {
	width: 53px;
	background: url(../images/btn-about-up.gif) top left no-repeat;
}
#menu-about a:hover, #menu-about a.menu-active {
	width: 53px;
	background: url(../images/btn-about-over.gif) top left no-repeat;
}

#menu-franchise a {
	width: 101px;
	background: url(../images/btn-franchise-up.gif) top left no-repeat;
}
#menu-franchise a:hover, #menu-franchise a.menu-active {
	width: 101px;
	background: url(../images/btn-franchise-over.gif) top left no-repeat;
}

#menu-contact a {
	width: 67px;
	background: url(../images/btn-contact-up.gif) top left no-repeat;
}
#menu-contact a:hover, #menu-contact a.menu-active {
	width: 67px;
	background: url(../images/btn-contact-over.gif) top left no-repeat;
}

#menu-b2b a {
	width: 88px;
	background: url(../images/btn-b2b-up.gif) top left no-repeat;
}
#menu-b2b a:hover, #menu-b2b a.menu-active {
	width: 88px;
	background: url(../images/btn-b2b-over.gif) top left no-repeat;
}


.preload{
	/* I use this to preload images */
	height:0;
	width:0;
}

.preload .p1{
	background: url(../images/btn-home-over.gif) top left no-repeat;
}

.preload .p2{
	background: url(../images/btn-chocolates-over.gif) top left no-repeat;
}

.preload .p3{
	background: url(../images/btn-checkout-over.gif) top left no-repeat;
}

.preload .p4{
	background: url(../images/btn-locations-over.gif) top left no-repeat;
}

.preload .p5{
	background: url(../images/btn-faq-over.gif) top left no-repeat;
}

.preload .p6{
	background: url(../images/btn-events-over.gif) top left no-repeat;
}

.preload .p7{
	background: url(../images/btn-about-over.gif) top left no-repeat;
}

.preload .p8{
	background: url(../images/btn-franchise-over.gif) top left no-repeat;
}

.preload .p9{
	background: url(../images/btn-contact-over.gif) top left no-repeat;
}

.preload .p10{
	background: url(../images/btn-b2b-over.gif) top left no-repeat;
}