#navArea{
	float: left;
	margin: 10px 0 0 0;
	padding: 0 0 0 0;
	height: 20px;
	overflow: hidden;
	border-bottom: solid 1px #ccc;
	
}


#nav {
	margin: 0 0 0 0;
	padding: 0 0 20px 0;
	width: 544px;
	list-style: none;
}
	

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

#nav a {
	display: block;
	height: 12px;
}

#nav li {
	float: left;
	height: 12px;
	background: url('../img/nav/navSep.gif') top left repeat-y;
	
}


#nav li a
{
	padding: 0 15px 0 15px;
	overflow: hidden;
}

#nav li ul {
	position: absolute;
	width: 100px;
	left: -3000px;
}

#nav li:hover ul {
	left: auto;
}

#nav li:hover ul, #nav li.sfhover ul {
	left: auto;
}


/* top level */

#nav li {
	padding: 1px 0 0 0;
	
}

#nav li a {
	background: url('../img/nav/spriteNav.png') top left repeat-y;
	padding-left: 0;
	text-indent: -3000px;
	height: 10px;
	
}

/* RECENT WORK */
#nav li.recentWork {
	padding-left: 0;
	background: none;
}

#nav li.recentWork a{
	width: 104px;
	background-position: 0 310px;
}
#nav li.recentWork a:hover {
	background-position: 0 297px;
}

/* PAST WORK */

#nav li.pastWork a{
	width: 82px;
	background-position: 15px 283px;
	padding-left: 15px;
}
#nav li.pastWork a:hover {
	background-position: 15px 270px;
}


/* PHOTO JOURNALS */
#nav li.photoJournals a{
	width: 128px;
	background-position: 15px 255px;
	height: 12px;
	padding-left: 15px;
}
#nav li.photoJournals a:hover {
	background-position: 15px 238px;
}


/* POSTS */
#nav li.posts a{
	width: 42px;
	background-position: 15px 221px;
	padding-left: 15px;
	height: 12px;
}
#nav li.posts a:hover {
	background-position: 15px 206px;
	padding-left: 15px;
}


/* CONTACT */
#nav li.contact a{
	padding-right: 0;
	width: 68px;
	background-position: 15px 190px;
	padding-left: 15px;
}
#nav li.contact a:hover {
	background-position: 15px 174px;
	padding-left: 15px;
}



/*photo journals */

#nav li.photoJournals ul
{
	border: solid 1px #ccc;
	height: 102px;
	width: 219px;
	background : url('../img/nav/photoJournalsBG.gif') top left no-repeat #fff;
	border-top: none;
	overflow: hidden;
}


#nav li.photoJournals ul li
{
	height: 12px;
	padding-top: 10px;
	background: none;
}


#nav li.photoJournals ul li a{
	margin: 0 15px 0 15px;
	background: none;
	text-indent: 0;
}


#nav li.photoJournals ul li a:hover{
	background: none;
}

#nav li.photoJournals ul li.amazon {
	padding-top: 14px;
}

#nav li.photoJournals ul li a, #nav li.photoJournals ul li a:hover{
	background: url('../img/nav/spriteNav.png') top left repeat-y;
	text-indent: -3000px;
}

/* AMAZON */
#nav li.photoJournals ul li.amazon a{
	width: 173px;
	background-position: 0 103px;
}

#nav li.photoJournals ul li.amazon a:hover{
	background-position: 0 91px;
}

/* TOKYO */
#nav li.photoJournals ul li.tokyo a{
	background-position: 0 78px;
	width: 186px;
	
}
#nav li.photoJournals ul li.tokyo a:hover{
	background-position: 0 66px;
}


/* SARASOTA */
#nav li.photoJournals ul li.sarasota a{
	width: 185px;
	background-position: 0 28px;
}
	

#nav li.photoJournals ul li.sarasota a:hover{
	background-position: 0 16px;
}

/* HWY 1*/
#nav li.photoJournals ul li.hwy1 a{
	width: 189px;
	background-position: 0 53px;

}

#nav li.photoJournals ul li.hwy1 a:hover{
	background-position: 0 41px;
}


/* posts */

#nav li.posts ul
{
	border: solid 1px #ccc;
	height: 80px;
	width: 264px;
	background : url('../img/nav/postsBG.gif') top left no-repeat #fff;
	border-top: none;
	overflow: hidden;
}


#nav li.posts ul li
{
	height: 12px;
	padding-top: 10px;
	background: none;

}


#nav li.posts ul li a{
	margin: 0 15px 0 15px;
	background: none;
	text-indent: 0;
}


#nav li.posts ul li a:hover{
	background: none;
}

#nav li.posts ul li a,#nav li.posts ul li a:hover {
	background: url('../img/nav/spriteNav.png') top left repeat-y;
	text-indent: -3000px;
	height: 10px;
}

/* PHYLLOMEDUSA BICOLOR */

#nav li.posts ul li.fieldRecordings { 
	padding-top: 14px;	
}

#nav li.posts ul li.fieldRecordings a{
	width: 180px;
	text-indent: -3000px;
	background-position: 0 0;
}

#nav li.posts ul li.fieldRecordings a:hover{
	background-position: 0 321px;
}


#nav li.posts ul li.phyllomedusaBicolor a{
	width: 180px;
	text-indent: -3000px;
	background-position: 0 128px;
}

#nav li.posts ul li.phyllomedusaBicolor a:hover{
	background-position: 0 118px;
}

/* WHISTLING PAST THE GRAVEYARD */

#nav li.posts ul li.whistlingPastTheGraveyard a{
	background-position: 0 158px;
	width: 234px;
	text-indent: -3000px;
}

#nav li.posts ul li.whistlingPastTheGraveyard a:hover{
	background-position: 0 143px;
}



#navArea h2{
	float: left;
	width: 200px;
	border: solid 1px;
}





/*** page titles ***/

#pageTitle{
	margin: 8px 0 0 0;
	height: 22px;
	float: left;
	width: 375px;
	border-bottom: solid 1px #ccc;
}

#pageTitle h2{
	float: right;
	height: 15px;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}


#pageTitle h2.recentWork
{
	text-indent: -3000px;
	background: url('../img/h2/recentWork.gif') left top no-repeat;
	width: 132px;
}


#pageTitle h2.pastWork
{
	text-indent: -3000px;
	background: url('../img/h2/pastWork.gif') left top no-repeat;
	width: 103px;
}



#pageTitle h2.whistlingPastTheGraveyard
{
	text-indent: -3000px;
	background: url('../img/h2/whistlingPastTheGraveyard.gif') left top no-repeat;
	width: 300px;
}

#pageTitle h2.phyllomedusaBicolor
{
	text-indent: -3000px;
	background: url('../img/h2/phyllomedusaBicolor.gif') left top no-repeat;
	width: 234px;
}

#pageTitle h2.amazon
{
	text-indent: -3000px;
	background: url('../img/h2/amazon.gif') left top no-repeat;
	width: 225px;
}

#pageTitle h2.tokyo
{
	text-indent: -3000px;
	background: url('../img/h2/tokyo.gif') left top no-repeat;
	width: 239px;
}

#pageTitle h2.hwy1
{
	text-indent: -3000px;
	background: url('../img/h2/hwy1.gif') left top no-repeat;
	width: 246px;
}

#pageTitle h2.sarasota
{
	text-indent: -3000px;
	background: url('../img/h2/sarasota.gif') left top no-repeat;
	width: 239px;;
}

#pageTitle h2.contact
{
	text-indent: -3000px;
	background: url('../img/h2/contact.gif') left top no-repeat;
	width: 90px;
}

#pageTitle h2.fieldRecordings
{
	text-indent: -3000px;
	background: url('../img/h2/fieldRecordings.png') left top no-repeat;
	width: 172px;
}


