/* www.pcci.com.ph Navigation Bar Style Sheet
Developed by: Datu Arellano
Last updated: Wednesday; December 3, 2008 by Datu   
Copyright (C) 2006-2009 Philippine Center for Creative Imaging
------------------------------------------------------ */

#nav-container {
	height: 108px;
	float: right;
	width: 364px;
	display: inline;
	margin-bottom: 12px;
}

#nav {
position: relative;
top: 0px;
height: 88px;
margin: 0px;
padding: 0px;
}

/* hide subnavs (ul's), zero margin and padding*/
#nav li ul {
	margin: 0;
	padding: 0;
	display: none;
}

/*float the main list items*/
#nav li {
	margin: 0;
	float: left;
	display: inline;
	list-style-type: none;
	}
	
/* Position the subnavs. (yellow ul's) */
#nav li#liCourses ul {
	position: absolute;
	top: 88px;
	left: 0px;
	width: 364px;
	height: 20px;
	background: #938238;
}
#nav li#liAbout ul {
	position: absolute;
	top: 88px;
	left: 0px;
	width: 364px;
	height: 20px;
	background: #938238;
}
#nav li ul {
	-moz-border-radius-bottomleft: 8px;
	-moz-border-radius-bottomright: 8px;
	-webkit-border-bottom-left-radius: 8px;
	-webkit-border-bottom-right-radius: 8px;
	}
	
/*ACTIVE STATES: based on body ID, this shows subnavs for the page*/
body.courses #nav li#liCourses ul, 
body.about #nav li#liAbout ul {
	background: #C3AC48;
	display: block;
}	

/*HOVER STATES: on hover, assign muddy yellow bg for lists w/ level 2 items*/

/*when inactive*/
#nav li#liCourses:hover ul, #nav li#liCourses.sfhover ul,
#nav li#liAbout:hover ul, #nav li#liAbout.sfhover ul {
	background: #938238;
}
/*when active*/
body.courses #nav li#liCourses:hover ul, body.courses #nav li#liCourses.sfhover ul,
body.about #nav li#liAbout:hover ul, body.about #nav li#liAbout.sfhover ul {
	background: #938238;
}
	
/* this gives heights to level 1 links */
#nav li a#home,
	#nav li a#courses,
	#nav li a#about,
	#nav li a#services,
	#nav li a#faqs,
	#nav li a#contact { 
		display: block; 
		height: 88px;
		padding: 0;
		margin: 0;
	}

/*SUBNAV formatting*/	
#nav li.off ul a {
	color: #FFFFFF;
	width: auto;
	text-decoration: none;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 11px;
	line-height: 20px;
	font-weight: bold;
	margin-left: 8px;
	}
	
		#nav li.off ul a:hover {
		background: #938238;
		color: #252525;
		}

/*HOVER STATES: hovering over an li w/ a hidden ul, displays the ul */	
#nav li#liHome:hover ul, 
#nav li#liCourses:hover ul,	
#nav li#liAbout:hover ul,	
#nav li#liServices:hover ul,	
#nav li#liFaqs:hover ul,	
#nav li#liContact:hover ul,	
	#nav li#liHome.sfhover ul,
	#nav li#liCourses.sfhover ul,
	#nav li#liAbout.sfhover ul,
	#nav li#liServices.sfhover ul, 
	#nav li#liFaqs.sfhover ul,
	#nav li#liContact.sfhover ul { 
		display: block;
		z-index: 6000;
	}

/*IMAGE REPLACEMENT*/

#nav li span { 
	position: absolute;
	left: -9384px;
}

#liHome a#home,
#liCourses a#courses,
#liAbout a#about,
#liServices a#services,
#liFaqs a#faqs,
#liContact a#contact {
	display: block;
	position: relative;
	height: 88px;
	background: url(../images/mainnavsprite.gif) no-repeat;
}

/*initial states of the nav sprite image and unique widths of level 1 links*/
#liHome a#home {
	width: 48px;
	background: url(../images/mainnavsprite.gif) no-repeat 0 0;
}

#liCourses a#courses {
	width: 66px;
	background: url(../images/mainnavsprite.gif) no-repeat -48px 0;
}

#liAbout a#about {
	width: 72px;
	background: url(../images/mainnavsprite.gif) no-repeat -114px 0;
}

#liServices a#services {
	width: 70px;
	background: url(../images/mainnavsprite.gif) no-repeat -186px 0;
}

#liFaqs a#faqs {
	width: 44px;
	background: url(../images/mainnavsprite.gif) no-repeat -320px 0;
}

#liContact a#contact {
	width: 64px;
	background: url(../images/mainnavsprite.gif) no-repeat -364px 0;
}

/*active states of the nav sprite image based on body IDs*/

body.home #nav a#home {
	background-position: 0px -88px;
}

body.courses #nav a#courses {
	background-position: -48px -88px;
}

body.about #nav a#about {
	background-position: -114px -88px;
}

body.services #nav a#services {
	background-position: -186px -88px;
}

body.faqs #nav a#faqs {
	background-position: -320px -88px;
}

body.contact #nav a#contact {
	background-position: -364px -88px;
}

/*hover states that change the position of the nav sprite image*/

#nav #liHome a#home:hover, 
#nav #liHome:hover a#home, 
	#nav #liHome.sfhover a#home {
	background-position: 0px -176px;
}

#nav #liCourses a#courses:hover, 
#nav #liCourses:hover a#courses, 
	#nav #liCourses.sfhover a#courses {
	background-position: -48px -176px;
}

#nav #liAbout a#about:hover, 
#nav #liAbout:hover a#about, 
	#nav #liAbout.sfhover a#about {
	background-position: -114px -176px;
}

#nav #liServices a#services:hover, 
#nav #liServices:hover a#services, 
	#nav #liServices.sfhover a#services {
	background-position: -186px -176px;
}

#nav #liFaqs a#faqs:hover, 
#nav #liFaqs:hover a#faqs, 
	#nav #liFaqs.sfhover a#faqs {
	background-position: -320px -176px;
}

#nav #liContact a#contact:hover, 
#nav #liContact:hover a#contact, 
	#nav #liGallery.sfhover a#contact {
	background-position: -364px -176px;
}