/*** builds navigation menu STRUCTURALLY (inrcrement by ONE for each new nav item) ***/
a.a1, a.a2, a.a3, a.a4, a.a5, a.a6, a.a7, a.a8, a.a9, a.a10, a.a11   {
	display: block;
	height: 18px;
	width: 140px;
}

a.top_a, a.top_b, a.top_c, a.top_d, a.top_e  {
	display: block;
	height: 16px;
	width: 127px;
}

a.b1, a.b2, a.b3, a.b4, a.b5, a.b6, a.b7, a.b8, a.b9, a.b10, a.b11  {
	display: block;
	height: 15px;
	width: 140px;
}

/*** builds navigation menu VISUALLY (inrcrement by ONE for each new nav item) ***/ 

a.top_a {background: url(../images/nav/top_rate.gif) 0 0 no-repeat;} 

a.top_b {background: url(../images/nav/top_spec.gif) 0 0 no-repeat;}

a.top_d {background: url(../images/nav/top_phot.gif) 0 0 no-repeat;} 

a.top_c {background: url(../images/nav/top_virtual_tour.gif) 0 0 no-repeat;}

a.top_e {background: url(../images/nav/top_espa.gif) 0 0 no-repeat;}

a.a1   {background: url(../images/nav/home.gif) 0 0 no-repeat;}

a.a2   {background: url(../images/nav/expe.gif) 0 0 no-repeat;}

a.a3   {background: url(../images/nav/acco.gif) 0 0 no-repeat;}

a.a4   {background: url(../images/nav/spaw.gif) 0 0 no-repeat;}

a.a5   {background: url(../images/nav/cuis.gif) 0 0 no-repeat;}

a.a6   {background: url(../images/nav/wedd.gif) 0 0 no-repeat;}

a.a7   {background: url(../images/nav/hone.gif) 0 0 no-repeat;}

a.a8   {background: url(../images/nav/dive.gif) 0 0 no-repeat;}

a.a9   {background: url(../images/nav/surf.gif) 0 0 no-repeat;}

a.a10   {background: url(../images/nav/family-activities.gif) 0 0 no-repeat;}

a.a11   {background: url(../images/nav/meet.gif) 0 0 no-repeat;}

a.b1   {background: url(../images/nav/rese.gif) 0 0 no-repeat;}

a.b2   {background: url(../images/nav/spec_sm.gif) 0 0 no-repeat;}

a.b3   {background: url(../images/nav/gift.gif) 0 0 no-repeat;}

a.b4   {background: url(../images/nav/shop.gif) 0 0 no-repeat;}

a.b5   {background: url(../images/nav/mail.gif) 0 0 no-repeat;}

a.b6   {background: url(../images/nav/phot_sm.gif) 0 0 no-repeat;}

a.b7   {background: url(../images/nav/pres.gif) 0 0 no-repeat;}

a.b8   {background: url(../images/nav/dire.gif) 0 0 no-repeat;}

a.b9   {background: url(../images/nav/virtual-tour.gif) 0 0 no-repeat;}

a.b10   {background: url(../images/nav/broch.gif) 0 0 no-repeat;}

a.b11   {background: url(../images/nav/espa.gif) 0 0 no-repeat;}

/*** reveals :hover state (inrcrement by ONE for each new nav item) ***/
a.top_a:hover, a.top_b:hover, a.top_c:hover, a.top_d:hover, a.top_e:hover {
	background-position: 0 -16px;
}

a.a1:hover, a.a2:hover, a.a3:hover, a.a4:hover, a.a5:hover, a.a6:hover, a.a7:hover, a.a8:hover, a.a9:hover, a.a10:hover, a.a11:hover   {
	background-position: 0 -18px;
}

a.b1:hover, a.b2:hover, a.b3:hover, a.b4:hover, a.b5:hover, a.b6:hover, a.b7:hover, a.b8:hover, a.b9:hover, a.b10:hover, a.b11:hover   {
	background-position: 0 -15px;
}

/*** reveals :activated state ***/  /*** use #(id) in BODY tag of ACTIVE page ***/ 
#home a.a1, #hote a.a2, #acco a.a3, #spa a.a4, #cuis a.a5, #wedd a.a6, #hone a.a7, #dive a.a8, #surf a.a9, #family a.a10, #events a.a11  {
	background-position: 0 -18px;
}

#hote a.active, #acco a.active, #spa a.active, #cuis a.active, #wedd a.active, #hone a.active, #dive a.active, #surf a.active, #family a.active, #events a.active  {
	color: #6a5f57;
}

#rese a.b1, #spec a.b2, #gift a.b3, #shop a.b4, #emai a.b5, #gall a.b6, #pres a.b7, #dire a.b8, #vt a.b9  {
	background-position: 0 -15px;
}

#rese a.active, #spec a.active, #gift a.active, #shop a.active, #emai a.active, #gall a.active, #pres a.active, #dire a.active   {
	color: #6a5f57;
}