jQuery(document).ready(function(){
		// Vars to store whether we're one of the browsers we need special behaviour for
		var isIE = false;
		var majorVer = null;
		
		var isIE6 = false;
		var isIE7 = false;
		
		jQuery.each(jQuery.browser, function(i, val){
			if (i == 'version') {
				var majorVerRe = new RegExp("^([0-9]+?)\\.");
				var majorVerArray = majorVerRe.exec(val);
				if (majorVerArray != null && majorVerArray.length >= 2) { majorVer = majorVerArray[1]; }
			}
			else if (i == 'msie') { isIE = true; }
		});
		
		if (majorVer != null && isIE) {
			if (majorVer == 6) { isIE6 = true; }
			else if (majorVer == 7) { isIE7 = true; }
		}
		
		if (isIE7) {
			// 'after' pseudo-class not supported.  Need to append, to add the down arrow after the list items that have submenus.
			jQuery("li.containsSubmenu > a").append(
				"<span style=\"font-size:0.5em; vertical-align:sub;\">&#x25bc;</span>"
			);
		}
		else if (isIE6) {
			/* Hehe, IE6 fun... */
			
			/*** Styles for header tabs ***/
			jQuery("ul.tabMenu").removeClass("tabMenu").addClass("tabMenuIE6");
			
			/* Header main tabs div container */
			jQuery("#headermainbartabs div").css({
				'bottom' : '-2px'  /* Haha, IE6's screwed up box model means this is a pixel off and we have to subtract an extra pixel from 'bottom' */
			});
			/* The container list */
			jQuery("ul.tabMenuIE6").css({
				'float' : 'right',
				'list-style' : 'none',
				'font-weight' : 'bold',
				'margin' : '0em 0.7em 0em 0em'
			});
			/* Any list items in the menu */
			jQuery("ul.tabMenuIE6 li").css({
				'float' : 'left',
				'clear' : 'left',
				'position' : 'relative',
				'padding' : '0px',
				'margin-right' : '2px',
				'background-color' : '#51a1a2'
			});
			/* List items which are direct child descendants of the container list */
			jQuery("ul.tabMenuIE6 > li").css({
				'vertical-align' : 'middle',
				'border-bottom' : '1px solid #ffffff',
				'clear' : 'none'
			});
			/* The currently 'selected' list item, ie. indicating we're in this section */
			jQuery("ul.tabMenuIE6 > li.selected").css({
				'background-color' : '#353535',
				'border-bottom' : '1px solid #353535'
			});
			jQuery("ul.tabMenuIE6 > li > a").css({
				'float' : 'left'   /* Gwahaha, IE6 forces block-displayed-and-floated A elements to be screen-wide!  Must manually float A's... */
			});
			/* Spans or links inside the list items, the main bit that will get displayed */
			jQuery("ul.tabMenuIE6 a").css({
				'color' : '#ffffff',
				'display' : 'block',
				'height' : '2.2em',
				'line-height' : '2.2em',
				'padding-left' : '0.75em',
				'padding-right' : '0.75em'
			});
			/* By default, submenus are hidden... and a few other stylings */
			jQuery("ul.tabMenuIE6 ul").css({
				'position' : 'absolute',
				'visibility' : 'hidden',
				'list-style' : 'none',
				'margin' : '0px',
				'padding' : '0px',
				'left' : '0px',
				'z-index' : '1',
				'top' : '2.31em'   /* Hoohoo, IE6 puts child ULs on the same vertical level as their parent LIs, so we must hardcode their vertical offset */
			});
			/* On hover over parent list items, change back color, display submenus, etc. */
			var oldBackgroundColor1 = '';
			jQuery("ul.tabMenuIE6 li").hover(
				function(){
					oldBackgroundColor1 = jQuery(this).css('background-color');
					jQuery(this).css({
						'background-color' : '#65b2b3 !important'
					});
					
					jQuery(this).find("ul").css({
						'visibility' : 'visible'
					});
				},
				function(){
					jQuery(this).css({
						'background-color' : oldBackgroundColor1
					});
					
					jQuery(this).find("ul").css({
						'visibility' : 'hidden'
					});
				}
			);
			var oldBorderBottomWidth2 = '';
			var oldBorderBottomStyle2 = '';
			var oldBorderBottomColor2 = '';
			jQuery("ul.tabMenuIE6 li.containsSubmenu").hover(
				function(){
					oldBorderBottomWidth2 = jQuery(this).css('border-bottom-width');
					oldBorderBottomStyle2 = jQuery(this).css('border-bottom-style');
					oldBorderBottomColor2 = jQuery(this).css('border-bottom-color');
					jQuery(this).css({
						'border-bottom-width' : '1px',
						'border-bottom-style' : 'solid',
						'border-bottom-color' : '#65b2b3'
					});
				},
				function(){
					jQuery(this).css({
						'border-bottom-width' : oldBorderBottomWidth2,
						'border-bottom-style' : oldBorderBottomStyle2,
						'border-bottom-color' : oldBorderBottomColor2
					});
				}
			);
			/* And submenu list items themselves... */
			jQuery("ul.tabMenuIE6 ul li").css({
				'background-color' : '#65b2b3'
			});
			var oldBackgroundColor3 = '';
			jQuery("ul.tabMenuIE6 ul li").hover(
				function(){
					oldBackgroundColor3 = jQuery(this).css('background-color');
					jQuery(this).css({
						'background-color' : '#488688'
					});
				},
				function(){
					jQuery(this).css({
						'background-color' : oldBackgroundColor3
					});
				}
			);
			jQuery("ul.tabMenuIE6 ul.width8 li").css({
				'width' : '8em'
			});
			jQuery("ul.tabMenuIE6 ul.width9pt7 li").css({
				'width' : '9.7em'
			});
			jQuery("ul.tabMenuIE6 ul.width15 li").css({
				'width' : '15em'
			});
			
			// 'after' pseudo-class not supported.  Need to append, to add the down arrow after the list items that have submenus.
			jQuery("li.containsSubmenu > a").append(
				"<span style=\"font-size:0.5em; vertical-align:sub;\">&#x25bc;</span>"
			);
		}
		
		// Special tab effects (but not for IE6... it was hard enough getting it working simply!
		if (!isIE6) {
			// Scroll tab dropdowns out
			jQuery("ul.tabMenu li").hover(
				function(){
					// On mouse over
					jQuery(this).find("ul").each(function(){
						// In case we're currently animating this list, stop the animation immediately.
						jQuery(this).stop(true, true);
						
						// Use jQuery's height/width here, it's safer.  Also NEVER suffix 'px' to the numeric height/width values, just assume pixels.
						// Suffixing 'px' seems to give IE problems.
						var origHeight = jQuery(this).height();
						var origWidth = jQuery(this).width();
						
						jQuery(this).css({
							'visibility' : 'visible',
							'opacity' : 0,
							'width' : origWidth,
							'height' : 0
						}).animate({
							'opacity' : 1,
							'width' : origWidth,
							'height' : origHeight
						}, 120, 'linear');
						
						// Only want to do this for the first matched list; break on the first iteration.
						return false;
					});
				},
				function(){
					// On mouse out
					jQuery(this).find("ul").each(function(){
						// In case we're currently animating this list, stop the animation immediately.
						jQuery(this).stop(true, true);
						
						// Use jQuery's height/width here, it's safer.  Also NEVER suffix 'px' to the numeric height/width values, just assume pixels.
						// Suffixing 'px' seems to give IE problems.
						var origHeight = jQuery(this).css("height");
						var origWidth = jQuery(this).css("width");
						
						jQuery(this).css({
							'visibility' : 'visible',
							'opacity' : 1,
							'width' : origWidth,
							'height' : origHeight
						}).animate({
							'opacity' : 0,
							'width' : origWidth,
							'height' : 0
						}, 120, 'linear', function(){
							// The height will have been collapsed to 0px.  We need it invisible and back to its original height, ready for the next
							// opening expansion animation.
							jQuery(this).css({
								'visibility' : 'hidden',
								'height' : origHeight
							});
						});
						
						// Only want to do this for the first matched list; break on the first iteration.
						return false;
					});
				}
			);
			
			// Below commented out because.... somebody.... thinks non-throbbing is better.  :-(
//			// Throb 'softHighlight' elements' text from/to white...
//			jQuery(".softHighlight").each(function(){
//				if (!jQuery(this).parent().hasClass('selected')) {  // Don't want to throb text when we're IN a highlighted section
//					var throbColor = 'rgb(255,214,105)';
//					jQuery(this).removeClass('softHighlight');  // As this class sets the highlight color to !important, we must remove it to be able to animate the color
//					jQuery(this).css('cssText', 'color:rgb(255,255,255);')
//					var atWhite = true;
//					
//					jQuery(this).everyTime(1000, function(){
//						// Beware that setting cssText will wipe out any CSS rules that were there before.  If you care about them, you'll have to parse the
//						// cssText string and change the color rule instead of just overwriting the whole string.
//						if (atWhite) {
//							jQuery(this).stop(true, true);
//							// Set to complete white, then animate to color
//							jQuery(this).css('cssText', 'color:rgb(255,255,255);')
//							atWhite = false;
//							jQuery(this).animate({
//								'color' : throbColor
//							}, 1000, 'linear');
//						}
//						else {
//							jQuery(this).stop(true, true);
//							// Set to complete color, then animate to white
//							jQuery(this).css('cssText', 'color:' + throbColor + ';');
//							atWhite = true;
//							jQuery(this).animate({
//								'color' : 'rgb(255,255,255)'
//							}, 1000, 'linear');
//						}
//					});
//				}
//			});
		}
	});