/* LOGO, Social Links, Search Form */

#zooHeader  {
	width:970px;
	height:98px;
	margin: 0;
	background-image:url(/images/zoo/nav/sandiegozoo_social_searchBG.png);
	background-repeat:no-repeat;
	padding: 0;
position: absolute;
}
#searchForm {
	vertical-align:top;
	margin: 47px 0 0 730px;
	position:relative;
	float:left;
	}	
#searchForm .input_box  {
		border:none; 
		background: transparent;
		outline:none;
		color:#666;
		font-size:11px;
		width:155px;
		height:14px;
		margin: 0;
		padding:5px;
		float:left;
	}
.submit_button_search  {
		background: transparent ;
		width:60px;
		height:21px;
		border:none;
		margin:0 0 0 3px;
		outline: none;
		cursor: hand; cursor:pointer;
	}
#zooHeader a:active, a:hover, a:link {outline:none;}
#zooHeader ul  {
margin:0;
padding:0;
}
#zooHeader li {
	margin: 0;
	padding: 0;
	list-style: none;
	position: absolute;
display:block;
}

#zooHeader li, #zooHeader a {display: block; border:none; }
#linkZoo {left: 15px; top: 25px; height: 50px; width: 280px; text-indent: -5000px;}
#linkBlogs  {left: 700px; top: 0px;  height: 22px; width: 35px; text-indent: -5000px;}
#linkCams  {left: 743px; top: 0px;  height: 22px; width: 32px; text-indent: -5000px;}
#linkFacebook {left: 814px; top: 1px; height: 19px; width: 20px; text-indent: -5000px;}
#linkTwitter {left: 846px;top: 1px;  height: 19px; width: 19px; text-indent: -5000px;}
#linkYoutube {left: 879px;top: 1px;  height: 19px; width: 19px; text-indent: -5000px;}
#linkFlickr {left: 913px;top: 1px;  height: 19px; width: 19px; text-indent: -5000px;}

#linkZoo a:hover {background: transparent url(/images/zoo/nav/sandiegozoo_social_searchBG.png) -15px -125px no-repeat;}
#linkBlogs a:hover {background: transparent url(/images/zoo/nav/sandiegozoo_social_searchBG.png) -700px -100px no-repeat;}
#linkCams a:hover {background: transparent url(/images/zoo/nav/sandiegozoo_social_searchBG.png) -743px -100px no-repeat;}
#linkFacebook a:hover {background: transparent url(/images/zoo/nav/sandiegozoo_social_searchBG.png) -814px -101px no-repeat;}
#linkTwitter a:hover {background: transparent url(/images/zoo/nav/sandiegozoo_social_searchBG.png) -846px -101px no-repeat;}
#linkYoutube a:hover {background: transparent url(/images/zoo/nav/sandiegozoo_social_searchBG.png) -879px -101px no-repeat;}
#linkFlickr a:hover {background: transparent url(/images/zoo/nav/sandiegozoo_social_searchBG.png) -913px -101px no-repeat;}

/* END LOGO, Social Links, Search Form */

/* Main-Universal Navigation */

	#divNav {
		background: transparent no-repeat top left;
		margin: 0;
		padding: 0;
		height: 33px;
		width: 970px;
	}

	#nav {
		position: relative;
		height: 33px;
		width: 970px;
		padding: 0 0 0 10px;
		margin:0;
		top: 98px;
	}

	#nav li ul, #nav li ul {
		margin: 0;
		padding: 0;
	}

	#nav a {
		text-decoration: none;
	}

	#nav li { /*float the main list items*/
		margin: 0;
		float: left;
		display: block;
		padding-right: 0px;
	}

	#nav li ul {
		display: none;
	}

	#nav li.off ul, #nav li.on ul  { /*put the subnav below*/
		position: absolute;
		top: 25px;
		left: 0;
		padding-top: 0px;
		padding-left:0px;
		height: 22px;
		width: auto;
	}


	#nav li.on ul {
		background: #f90;
	}

	#nav li.on:hover ul, #nav li.over ul { /*for ie*/
		background: #89895d;
	}

	#nav li a {
		color: #89895d;
		font-weight: bold;
		display: block;
		padding: 0;
	}

	#nav li.on a {
		color: #f90;
	}

	#nav li.on ul a, #nav li.off ul a {
		border: 0;
		float: left; /*ie doesn't inherit the float*/
		color: #f90;
		width: auto;
		height:22px;
		margin-right: 0px;
		padding:7px 10px 0 10px;
	}

	#nav li.on:hover ul a, #nav li.over ul li a { /*for ie - the specificity is necessary*/
		background: #89895d;
	}

	#nav li.on ul {
		display: block;
	}

	#nav li.off:hover ul, #nav li.over ul {
		display: block;
		z-index: 6000;
	}

	#nav li.off a:hover, #nav li.on a:hover { 
		color: #fff;
		text-decoration:underline;
	}

	/*do the image replacement*/

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

	#liZoo a, #liSafariPark a,  #liConservation a, #liVideo a,  #liKids a,#liAnimalsPlants a, #liEducation a, #liMembership a, #liDonate a, #liGetInvolved a, #liShop a {
		display: block;
		position: relative;
		height: 33px;
		background: url(/images/zoo/nav/main-nav-sprite2012.jpg) no-repeat; /*contains all hover states*/
	}

     /*first, put the initial states in place*/

#liZoo a {
	background-position: -10px 0;
	width: 52px;
}
#liSafariPark a {
	background-position: -63px 0;
	width: 102px;
}

#liConservation a {
	background-position: -165px 0;
	width: 113px;
}

#liVideo a {
	background-position: -278px 0;
	width: 61px;
}

#liKids a {
	background-position: -339px 0;
	width: 56px;
}
#liAnimalsPlants a {
	background-position: -395px 0;
	width: 135px;
}

#liEducation a {
	background-position: -530px 0;
	width:91px;
}
#liMembership a {
	background-position: -621px 0;
	width: 102px;
}
#liDonate a {
	background-position: -723px 0;
	width: 73px;
}
#liGetInvolved a {
	background-position: -796px 0;
	width: 106px;
}
#liShop a {
	background-position: -902px 0;
	width: 59px;
}

     /*active area - for this demo - the code could be based on a body class, and probably work better.*/

 #liZoo.on a,  #liZoo.on a:hover {
 	background-position: -10px -33px;
 }
  #liSafariPark.on a, #liSafariPark.on a:hover {
 	background-position: -63px -33px;
 } #liConservation.on a, #liConservation.on a:hover {
 	background-position: -165px -33px;
 } #liVideo.on a, #liVideo.on a:hover {
 	background-position: -278px -33px;
 } #liKids.on a,  #liKids.on a:hover {
 	background-position: -339px -33px;
 } #liAnimalsPlants.on a, #liAnimalsPlants.on a:hover {
 	background-position: -395px -33px;
 } #liEducation.on a, #liEducation.on a:hover {
 	background-position: -530px -33px;
 } #liMembership.on a, #liMembership.on a:hover {
 	background-position: -621px -33px;
 } #liDonate.on a, #liDonate.on a:hover {
 	background-position: -723px -33px;
 } #liGetInvolved.on a, #liGetInvolved.on a:hover {
 	background-position: -796px -33px;
 } #liShop.on a, #liShop.on a:hover {
 	background-position: -902px -33px;
 }
      /*add selectors for the other li's and background-positions*/

     /*hover states*/

#liZoo a:hover, #liZoo:hover a, #liZoo.over a {
	background-position: -10px -66px;
}
#liSafariPark a:hover, #liSafariPark:hover a, #liSafariPark.over a {
	background-position: -63px -66px;
}

#liConservation a:hover, #liConservation:hover a, #liConservation.over a {
	background-position: -165px -66px;
}

#liVideo a:hover, #liVideo:hover a, #liVideo.over a {
	background-position: -278px -66px;
}
#liKids a:hover, #liKids:hover a, #liKids.over a {
	background-position: -339px -66px;
}

#liAnimalsPlants a:hover, #liAnimalsPlants:hover a, #liAnimalsPlants.over a {
	background-position: -395px -66px;
}

#liEducation a:hover, #liEducation:hover a, #liEducation.over a {
	background-position: -530px -66px;
}
#liMembership a:hover, #liMembership:hover a, #liMembership.over a {
	background-position: -621px -66px;
}
#liDonate a:hover, #liDonate:hover a, #liDonate.over a {
	background-position: -723px -66px;
}
#liGetInvolved a:hover, #liGetInvolved:hover a, #liGetInvolved.over a {
	background-position: -796px -66px;
}
#liShop a:hover, #liShop:hover a, #liShop.over a {
	background-position: -902px -66px;
}

     /*subnav formatting*/

#nav li.off ul a, #nav li.on ul a {
	display: block;
	background: #89895d;
	color: #fff;
	font-family: arial, helvetica, verdana, sans-serif;
	font-size: .65em;
}		

#nav li.on ul a {
	background: #f90;
}

/* END Main-Universal Navigation */