/* 
	Navigation Bar CSS Document for NextGen Persuasion
	Powered by BlueFever (www.bluefevermedia.com)
	
	Date: May 20, 2009.
	Version: 1.0
 */
 

#navigation {
float: right;
position: relative;
left: 20px;
margin: 33px 0 0px 0;
z-index: 100;
}

#navigation ul {
list-style: none;
margin: 0;
padding: 0;
}

#navigation ul li {
	float: left;
}

#navigation ul li.portfolio ul li a {
width: 190px;
}

#navigation a {
margin: 0;
padding: 2px 3px;
font-size: 14px;
text-decoration: none;
display: block;
letter-spacing: -0.01em;
}

#navigation a:link, #navigation a:visited, #navigation a:focus {
	color: #383838;
}

#navigation a:hover {
	color: #fff;
}

#navigation li {position: relative;}

#navigation ul ul {
position: absolute;
z-index: 1;
background: url(pics/bg_bottomnav.png) bottom no-repeat;
min-height: 135px;
}

#navigation ul ul ul {
position: absolute;
top: 0;
}

div#navigation ul ul {
display: none;
}

div#navigation ul ul,
div#navigation ul li:hover ul ul,
div#navigation ul ul li:hover ul ul
{display: none;}

div#navigation ul li:hover ul,
div#navigation ul ul li:hover ul,
div#navigation ul ul ul li:hover ul
{display: block;}


/* Styles */

#navigation ul li a:hover {
	color: #fff;
}

#navigation ul li.about a {
	width: 68px;
	height: 24px;
	padding: 5px;
}
#navigation ul li.about a:hover {
	background: url(pics/bg_about.gif) no-repeat;
}

#navigation ul li.services a {
	width: 68px;
	height: 24px;
	padding: 5px 5px 5px 8px;
}
#navigation ul li.services a:hover {
	background: url(pics/bg_services.gif) no-repeat;
}

#navigation ul li.portfolio a {
	width: 68px;
	height: 24px;
	padding: 5px 5px 5px 8px;
}
#navigation ul li.portfolio a:hover {
	background: url(pics/bg_portfolio.gif) no-repeat;
}
#navigation ul li.portfolio ul li {
	text-align: left;
}
#navigation ul li.portfolio ul li a {
	min-width: 150px;
	max-width: 250px;
	font-size: 12px;
	height: 15px;
	padding: 3px;
	margin: 2px;
	line-height:12px;
}
#navigation ul li.portfolio ul li a:hover {
	background: none #999;
}

#navigation ul li.caption a {
	width: 115px;
	height: 24px;
	padding: 5px 5px 5px 7px;
}
#navigation ul li.caption a:hover {
	background: url(pics/bg_caption.gif) no-repeat;
}

#navigation ul li.news a {
	width: 51px;
	height: 24px;
	padding: 5px 5px 5px 8px;
}
#navigation ul li.news a:hover {
	background: url(pics/bg_news.gif) no-repeat;
}

#navigation ul li.contact a {
	width: 68px;
	height: 24px;
	padding: 5px 5px 5px 9px;
}
#navigation ul li.contact a:hover {
	background: url(pics/bg_contact.gif) no-repeat;
}

/* ---- Selected Sections ---- */

body#about #navigation ul li.about a {
	background: url(pics/bg_about.gif) no-repeat;
        color: #fff;
}

body#services #navigation ul li.services a {
	background: url(pics/bg_services.gif) no-repeat;
        color: #fff;
}

body#portfolio #navigation ul li.portfolio a {
	background: url(pics/bg_portfolio.gif) no-repeat;
        color: #fff;
}

body#portfolio #navigation ul li.portfolio ul li a {
background: none;
color: #383838;
}

body#portfolio #navigation ul li.portfolio ul li a:hover {
        background: none #999;
        color: #fff;
}

body#caption #navigation ul li.caption a {
	background: url(pics/bg_caption.gif) no-repeat;
        color: #fff;
}

body#news #navigation ul li.news a {
	background: url(pics/bg_news.gif) no-repeat;
        color: #fff;
}

body#contact #navigation ul li.contact a {
	background: url(pics/bg_contact.gif) no-repeat;
        color: #fff;
}