/* CSS Document */
ul#nav, ul#nav li {
	list-style-type: none;
	position:relative;
} /* POS RELATIVE FOR 'HASLAYOUT' AND IE PADDING QUIRKS */

ul#nav {
	height:26px; width:850px; margin:0 auto;
} /* HEIGHT AND WIDTH TO CONSTRAIN */

ul#nav li {
	float: left; left:0px;
} /* FLOAT AND FORCE LEFT TO SNUG UP */

ul#nav li a {
	xtext-indent: -3000px;
	display: block;
	height: 26px;
	outline:none;
} /* APPLIES TO ALL LINKS - PUSH TEXT OUT AND SET BLOCK WITH FIXED HEIGHT */

ul#nav li a#offer_link {
	background:url(../img/nav_bar.jpg) 0px 0px no-repeat;
	width:230px;
}

ul#nav li a#facilities_link {
	background:url(../img/nav_bar.jpg) -230px 0px no-repeat;
	width:160px;
}

ul#nav li a#calendar_link {
	background:url(../img/nav_bar.jpg) -390px 0px no-repeat;
	width:210px;
}

ul#nav li a#history_link {
	background:url(../img/nav_bar.jpg) -600px 0px no-repeat;
	width:250px;
}

/* 	THE BACKGROUND IS SET FROM THE TOP LEFT OF THE IMAGE, THE FIRST VALUE IS LEFT, THE SECOND TOP
	IE background: url(file.ext) 100px 200px no-repeat; WILL POSITION THE TOP LEFT CORNER OF THE ELEMENTS TO THE 
	COORDINATES x=100,y=200 IN THE SOURCE IMAGE. THE HEIGHT AND WIDTH WILL CLIP IT.
	EACH ITEM IS USUALLY A DIFFERING WIDTH SO SPECIFY WIDTH IN THE INDIVIDUAL LINKS */

ul#nav li a#offer_link:hover,
body#offer ul#nav li a#offer_link {
	background:url(../img/nav_bar.jpg) 0px -26px no-repeat;
}

ul#nav li a#facilities_link:hover,
body#facilities ul#nav li a#facilities_link {
	background:url(../img/nav_bar.jpg) -230px -26px no-repeat;
}

ul#nav li a#calendar_link:hover,
body#calendar ul#nav li a#calendar_link {
	background:url(../img/nav_bar.jpg) -390px -26px no-repeat;
}

ul#nav li a#history_link:hover,
body#history ul#nav li a#history_link {
	background:url(../img/nav_bar.jpg) -600px -26px no-repeat;
}
/*	THE HOVER RULES and ACTIVE CLASS RULE MOVE THE BACKGROUND IMAGE ACCORDING TO THE SAME RULES.
	USE A CLASS OR ID ON THE BODY TO DETERMINE WHICH PAGE IS ACTIVE */