$( function () {
			var my_main = $('#main.where');
			var more_box = my_main.find('.more');
			var prev_height = more_box.height(); // in pixels			
			
			var more_shown = false;
			
			
			more_box.find('.text').animate({opacity: 0}, 0); 	// I use animate() instead of the fadeIn() and fadeOut()
																// functions.  animate() doesn't get confused by multiple clicks.
			
			$(document).pngFix();  // fix the PNGs for IE6
			
			my_main.find('.more_link').click(
				function () { 
				
					if ( !more_shown ) {  // .more is not shown, show it:
						more_box.stop().animate({height: 455}, 1200, 'easeOutQuint');
						my_main.find('#content > .text').stop().animate({opacity: 0}, "slow");
						more_box.children('.text').stop().animate({opacity: 1}, 1500);
						$('#page_title').html("Where | <span class='sub_page'>Directions</span>");
						//$('.more_link .changing_text').text("Less >");
						
					} else { // .more is shown, hide it:
						more_box.stop().animate({height: prev_height}, 1000, 'easeOutBounce');
						my_main.find('#content > .text').stop().animate({opacity: 1}, "slow");
						more_box.children('.text').stop().animate({opacity: 0}, "fast");
						$('#page_title').html("Where");
						//$('.more_link .changing_text').text("More >");
														
					}
				
					more_shown = !more_shown; // toggle the switch
					
					$(this).blur(); // de-select the button that was just clicked.
					return false; //disable default link behaviour
				}
			);	
		});