/* -------------------------- MAIN NAVIGATION ------------------------------ */
#nav {
	position: relative;
	top: 44px;
	left: 220px;
	width: 590px;
}
#nav a { text-decoration: none; }
#nav ul li { 
	float: left;
	position: relative;
}
#nav ul li a.top {
	display: block;
	background-image: url(/img/en_CA/main-nav-english.png);
	height: 26px;	
}

#nav ul li#inside a.top { width: 119px; background-position: 0 0; }
#nav ul li#healthy a.top { width: 124px; background-position: -119px 0; }
#nav ul li#community a.top { width: 144px; background-position: -243px 0; }
#nav ul li#contests a.top { width: 137px; background-position: -387px 0; }

#nutrients #nav #inside a.top,
#nutella-history #nav #inside a.top,
#faq #nav #inside a.top { background-position: 0 -26px; }

#nav ul li#inside a.top:hover,
#nav ul li#inside a.top:active,
#nav ul li#inside a.top:focus { background-position: 0 -52px; }

#get-active #nav #healthy a.top,
#recipes #nav #healthy a.top { background-position: -119px -26px; }

#nav ul li#healthy a.top:hover, 
#nav ul li#healthy a.top:active,
#nav ul li#healthy a.top:focus { background-position: -119px -52px; } 

#social-home #nav #community a.top,
#social-twitter #nav #community a.top,
#social-flickr #nav #community a.top,
#social-foodieview #nav #community a.top,
#social-youtube #nav #community a.top { background-position: -243px -26px; }

#nav ul li#community a.top:hover,
#nav ul li#community a.top:active,
#nav ul li#community a.top:focus { background-position: -243px -52px; }

#nav ul li#contests a.top:hover,
#nav ul li#contests a.top:active, 
#nav ul li#contests a.top:focus { background-position: -387px -26px; }

#nav ul li a.top { 
	font-size: 0;
	line-height: 0;
	letter-spacing: -2em;
	overflow: hidden;
	color: #ffffff;
}

#nav ul li ul { 
	position: absolute;
	left: 0;
	top: 26px;
	padding-left: 7px;
	display: none;
	margin-right: 7px;	/* Right side of the submenu */
	background: url(/img/common/submenu-background.png) no-repeat left top;
}

#nav ul li#inside ul { width: 304px; }
#nav ul li#healthy ul { width: 144px; }
#nav ul li#community ul { width: 333px; }

/* This empty div is for the right side of the submenu */
#nav ul li ul div {
	background: url(/img/common/submenu-background.png) no-repeat right top;
	height: 27px;
	width: 7px;
	position: absolute;
	top: 0;
	right: -7px;
}

#nav ul li ul li {
	font-family: arial, helvetica, sans-serif;
	font-size: 12px;
	background-image: none;
	padding: 7px 0 0 0;
	height: 20px;
	text-align: center;
	background: url(/img/common/middot-red.gif) no-repeat left center;
}
#nav ul li ul li.first { background-image: none; }

/* It was necessary to give the links fix widths because of the bold effect applied to the link 
text (when the link is active). Any modification of these widths will probably also require an
adjustment on the width of the corresponding ul */
#nav ul li#inside ul li#inside-1 { width: 126px; }
#nav ul li#inside ul li#inside-2 { width: 126px; }
#nav ul li#inside ul li#inside-3 { width: 52px; }

#nav ul li#healthy ul li#healthy-1 { width: 72px; }
#nav ul li#healthy ul li#healthy-2 { width: 72px; }

#nav ul li#community ul li#comm-1 { width: 74px; }
#nav ul li#community ul li#comm-2 { width: 56px; }
#nav ul li#community ul li#comm-3 { width: 50px; }
#nav ul li#community ul li#comm-4 { width: 82px; }
#nav ul li#community ul li#comm-5 { width: 71px; }

#nav ul li ul li a { color: #000000; }

#nav ul li ul li a:hover,
#nav ul li ul li a:active,
#nav ul li ul li a:focus { font-weight: bold; }

#nutrients #nav #inside ul,
#nutella-history #nav #inside ul,
#faq #nav #inside ul,
#get-active #nav #healthy ul,
#recipes #nav #healthy ul,
#social-home #nav #community ul,
#social-twitter #nav #community ul,
#social-flickr #nav #community ul,
#social-foodieview #nav #community ul,
#social-youtube #nav #community ul { display: block; }

#nutrients #nav #inside-1,
#nutella-history #nav #inside-2,
#faq #nav #inside-3,
#get-active #nav #healthy-1,
#recipes #nav #healthy-2,
#social-home #nav #comm-1,
#social-twitter #nav #comm-2,
#social-flickr #nav #comm-3,
#social-foodieview #nav #comm-4,
#social-youtube #nav #comm-5 { font-weight: bold; }

/* -------------------------- HOME PAGE ------------------------------ */
.home #content { width: 230px; }
.home #content #note {
	position: absolute;
	top: 239px;
	left: -18px;
	width: 311px;
	height: 168px;
	background: url(/img/en_CA/ella-nutella.png) no-repeat center center;
}


/* -------------------------- SOCIAL PAGE ------------------------------ */
.feeds .bottom .learnMore {
	position:absolute;
	font-size:12px;
	padding-top: 8px;
	height: 24px;
	width:142px;
	text-align:center;
	margin-top: -4px;
	background:transparent url(/img/common/see-more-bubble.png) no-repeat scroll center top;
}
.feeds .bottom #twitter-more { left: 28px; }
.feeds .bottom #flickr-more { left: 213px; }
.feeds .bottom #foodieview-more { left: 398px; }
.feeds .bottom #youtube-more { left: 585px; }