/*
======================
MAIN NAVIGATION STYLES 
======================
*/

#nav {
	float:left;
	height:46px;
}

#nav li {
	float:left;
	display:inline;
}

#nav a {
	color: #386d9c;
	display:block;  /* to increase clickable area as a's default to inline */
	float:left;
	height:46px;
	text-align:center;
	text-decoration:none;
	width:196px;
}

#nav a:hover {
	background:#ebedf3;
}


/*
======================================
REMOVE ALL THE TEXT FOR THE NAVIGATION
======================================
*/
#nav a#nav_el1 .navText, #nav a#nav_el2 .navText, #nav a#nav_el3 .navText,
#nav a#nav_el4 .navText, #nav a#nav_el5 .navText {display:none}

#nav a#nav_pl1 .navText, #nav a#nav_pl2 .navText, #nav a#nav_pl3 .navText,
#nav a#nav_pl4 .navText, #nav a#nav_pl5 .navText {display:none}

#nav a#nav_fd1 .navText, #nav a#nav_fd2 .navText, #nav a#nav_fd3 .navText,
#nav a#nav_fd4 .navText, #nav a#nav_fd5 .navText {display:none}


/*
=======================================================
INSERT BACKGROUND IMAGES WITH ROLLOVERS FOR THE BUTTONS
=======================================================
*/
/* ---------- STYLES FOR ELLIOT LAKE */
#nav a#nav_el1 {background:url(/images/navigation/n_elliotLake.jpg) no-repeat 0 0;}
#nav a#nav_el2 {background:url(/images/navigation/n_elliotLake.jpg) no-repeat -196px 0;}
#nav a#nav_el3 {background:url(/images/navigation/n_elliotLake.jpg) no-repeat -392px 0;}
#nav a#nav_el4 {background:url(/images/navigation/n_elliotLake.jpg) no-repeat -588px 0;}
#nav a#nav_el5 {background:url(/images/navigation/n_elliotLake.jpg) no-repeat -784px 0;}
#nav a:hover#nav_el1 {background:url(/images/navigation/n_elliotLake.jpg) no-repeat 0 -46px;}
#nav a:hover#nav_el2 {background:url(/images/navigation/n_elliotLake.jpg) no-repeat -196px -46px;}
#nav a:hover#nav_el3 {background:url(/images/navigation/n_elliotLake.jpg) no-repeat -392px -46px;}
#nav a:hover#nav_el4 {background:url(/images/navigation/n_elliotLake.jpg) no-repeat -588px -46px;}
#nav a:hover#nav_el5 {background:url(/images/navigation/n_elliotLake.jpg) no-repeat -784px -46px;}

/* ---------- STYLES FOR PUBLIC LIBRARY */
#nav a#nav_pl1 {background:url(/images/navigation/n_publicLibrary.jpg) no-repeat 0 0;}
#nav a#nav_pl2 {background:url(/images/navigation/n_publicLibrary.jpg) no-repeat -196px 0;}
#nav a#nav_pl3 {background:url(/images/navigation/n_publicLibrary.jpg) no-repeat -392px 0;}
#nav a#nav_pl4 {background:url(/images/navigation/n_publicLibrary.jpg) no-repeat -588px 0;}
#nav a#nav_pl5 {background:url(/images/navigation/n_publicLibrary.jpg) no-repeat -784px 0;}
#nav a:hover#nav_pl1 {background:url(/images/navigation/n_publicLibrary.jpg) no-repeat 0 -46px;}
#nav a:hover#nav_pl2 {background:url(/images/navigation/n_publicLibrary.jpg) no-repeat -196px -46px;}
#nav a:hover#nav_pl3 {background:url(/images/navigation/n_publicLibrary.jpg) no-repeat -392px -46px;}
#nav a:hover#nav_pl4 {background:url(/images/navigation/n_publicLibrary.jpg) no-repeat -588px -46px;}
#nav a:hover#nav_pl5 {background:url(/images/navigation/n_publicLibrary.jpg) no-repeat -784px -46px;}

/* ---------- STYLES FOR FIRE DEPARTMENT */
#nav a#nav_fd1 {background:url(/images/navigation/n_fireDepartment.jpg) no-repeat 0 0;}
#nav a#nav_fd2 {background:url(/images/navigation/n_fireDepartment.jpg) no-repeat -196px 0;}
#nav a#nav_fd3 {background:url(/images/navigation/n_fireDepartment.jpg) no-repeat -392px 0;}
#nav a#nav_fd4 {background:url(/images/navigation/n_fireDepartment.jpg) no-repeat -588px 0;}
#nav a#nav_fd5 {background:url(/images/navigation/n_fireDepartment.jpg) no-repeat -784px 0;}
#nav a:hover#nav_fd1 {background:url(/images/navigation/n_fireDepartment.jpg) no-repeat 0 -46px;}
#nav a:hover#nav_fd2 {background:url(/images/navigation/n_fireDepartment.jpg) no-repeat -196px -46px;}
#nav a:hover#nav_fd3 {background:url(/images/navigation/n_fireDepartment.jpg) no-repeat -392px -46px;}
#nav a:hover#nav_fd4 {background:url(/images/navigation/n_fireDepartment.jpg) no-repeat -588px -46px;}
#nav a:hover#nav_fd5 {background:url(/images/navigation/n_fireDepartment.jpg) no-repeat -784px -46px;}


/*
==========================================
CREATE AN ON STATE FOR EACH OF THE BUTTONS
==========================================
*/
/* ---------- STYLES FOR ELLIOT LAKE */
#nav #nav_el1.current {background:url(/images/navigation/n_elliotLake.jpg) no-repeat 0 -46px;}
#nav #nav_el2.current {background:url(/images/navigation/n_elliotLake.jpg) no-repeat -196px -46px;}
#nav #nav_el3.current {background:url(/images/navigation/n_elliotLake.jpg) no-repeat -392px -46px;}
#nav #nav_el4.current {background:url(/images/navigation/n_elliotLake.jpg) no-repeat -588px -46px;}
#nav #nav_el5.current {background:url(/images/navigation/n_elliotLake.jpg) no-repeat -784px -46px;}

/* ---------- STYLES FOR PUBLIC LIBRARY */
#nav #nav_pl1.current {background:url(/images/navigation/n_publicLibrary.jpg) no-repeat 0 -46px;}
#nav #nav_pl2.current {background:url(/images/navigation/n_publicLibrary.jpg) no-repeat -196px -46px;}
#nav #nav_pl3.current {background:url(/images/navigation/n_publicLibrary.jpg) no-repeat -392px -46px;}
#nav #nav_pl4.current {background:url(/images/navigation/n_publicLibrary.jpg) no-repeat -588px -46px;}
#nav #nav_pl5.current {background:url(/images/navigation/n_publicLibrary.jpg) no-repeat -784px -46px;}

/* ---------- STYLES FOR FIRE DEPARTMENT */
#nav #nav_fd1.current {background:url(/images/navigation/n_fireDepartment.jpg) no-repeat 0 -46px;}
#nav #nav_fd2.current {background:url(/images/navigation/n_fireDepartment.jpg) no-repeat -196px -46px;}
#nav #nav_fd3.current {background:url(/images/navigation/n_fireDepartment.jpg) no-repeat -392px -46px;}
#nav #nav_fd4.current {background:url(/images/navigation/n_fireDepartment.jpg) no-repeat -588px -46px;}
#nav #nav_fd5.current {background:url(/images/navigation/n_fireDepartment.jpg) no-repeat -784px -46px;}