#navigation {
	margin-bottom: 10px;
}

	#navigation ul,
	#navigation li {
		list-style-type: none;
		margin: 0px;
		padding: 0px;
	}

	#navigation li {
		float: left;
		display: block;
		margin-left: -8px;
		position: relative;
	}
		
	#navigation li.first {
		margin-left: 0px;
	}

	#navigation li a {
		text-decoration: none;
		display: block;
		padding: 10px 10px 8px 15px;
		min-width: 70px;
		text-align: center;
		color: #000000;
		font-size: 1.05em;
		font-weight: normal;
		font-family: "Trebuchet MS";

		-moz-border-radius-topright: 60px 2px;
		-webkit-border-top-right-radius: 60px 2px;
		-o-border-top-right-radius: 60px 2px;
		border-top-right-radius: 60px 2px;

		/* -moz- / -webkit- / -o- / -khtml- / -ms- */

		-moz-box-shadow: 2px 4px 4px rgba(0, 0, 0, 0.7);
		-webkit-box-shadow: 2px 4px 4px rgba(0, 0, 0, 0.7);
		-o-box-shadow: 2px 4px 4px rgba(0, 0, 0, 0.7);
		box-shadow: 2px 4px 4px rgba(0, 0, 0, 0.7);
		
		-moz-transition-property: -moz-transform, -moz-box-shadow;
		-moz-transition-duration: 400ms;	/* hover -> normal */
		-moz-transform-origin: left center;
		
		-webkit-transition-property: -webkit-transform, -webkit-box-shadow;
		-webkit-transition-duration: 400ms;	/* hover -> normal */
		-webkit-transform-origin: left center;
		-webkit-transform: rotate3d(0, 0, 0, 0deg) scale(1);	/* Without this the elements jump in Safari & Chrome */

		-o-transition-property: -o-transform, -o-box-shadow;
		-o-transition-duration: 400ms;	/* hover -> normal */
		-o-transform-origin: left center;
		
		-ms-transform-origin: left center;

		transition-property: transform, box-shadow;
		transition-duration: 400ms;	/* hover -> normal */
		transform-origin: left center;
		
		background-repeat: no-repeat;
		background-position: right top;
 		background-size: 83px 38px;

		/*#navigation li.piY a { - make yellow the default if nothing specified */
		background-color: #FEFF97;	/* #BF9E2B rgb(191, 158, 43) */
		background-image: -moz-linear-gradient(246deg, rgb(191, 158, 43) 0px, rgb(191, 158, 43) 5px, rgba(191, 158, 43, 0.2) 28px, rgba(191, 158, 43, 0) 33px);
		background-image: -webkit-gradient(linear, 83 0, 33 100, from(rgb(191, 158, 43)), color-stop(5%, rgb(191, 158, 43)), color-stop(25%, rgba(191, 158, 43, 0.2)), color-stop(31%, rgba(191, 158, 43, 0))/*, to(rgba(191, 158, 43, 0))*/);
		background-image: -webkit-linear-gradient(246deg, rgb(191, 158, 43) 0px, rgb(191, 158, 43) 5px, rgba(191, 158, 43, 0.2) 28px, rgba(191, 158, 43, 0) 33px);
		background-image: -o-linear-gradient(246deg, rgb(191, 158, 43) 0px, rgb(191, 158, 43) 5px, rgba(191, 158, 43, 0.2) 28px, rgba(191, 158, 43, 0) 33px);
		background-image: linear-gradient(246deg, rgb(191, 158, 43) 0px, rgb(191, 158, 43) 5px, rgba(191, 158, 43, 0.2) 28px, rgba(191, 158, 43, 0) 33px);
		/*}*/

		-moz-transform: rotate(2deg);
		-webkit-transform: rotate3d(0, 0, 1, 2deg);
		-o-transform: rotate(2deg);
		-ms-transform: rotate(2deg);
		transform: rotate(2deg);
	}
	#navigation li:nth-child(2) a {
		/* Don't offset the home nav item */
		padding: 10px 10px 8px 10px;
		min-width: 75px;
	}

	#navigation li.piB a {
		background-color: #D6E1FE;	/* #6C8EC1 rgb(108, 142, 193) */
		background-image: -moz-linear-gradient(246deg, rgb(108, 142, 193) 0px, rgb(108, 142, 193) 5px, rgba(108, 142, 193, 0.2) 28px, rgba(108, 142, 193, 0) 33px);
		background-image: -webkit-gradient(linear, 83 0, 33 100, from(rgb(108, 142, 193)), color-stop(5%, rgb(108, 142, 193)), color-stop(25%, rgba(108, 142, 193, 0.2)), color-stop(31%, rgba(108, 142, 193, 0))/*, to(rgba(108, 142, 193, 0))*/);
		background-image: -webkit-linear-gradient(246deg, rgb(108, 142, 193) 0px, rgb(108, 142, 193) 5px, rgba(108, 142, 193, 0.2) 28px, rgba(108, 142, 193, 0) 33px);
		background-image: -o-linear-gradient(246deg, rgb(108, 142, 193) 0px, rgb(108, 142, 193) 5px, rgba(108, 142, 193, 0.2) 28px, rgba(108, 142, 193, 0) 33px);
		background-image: linear-gradient(246deg, rgb(108, 142, 193) 0px, rgb(108, 142, 193) 5px, rgba(108, 142, 193, 0.2) 28px, rgba(108, 142, 193, 0) 33px);
	}
	#navigation li.piP a {
		background-color: #F9C8C8;	/* #C66C6C rgb(198, 108, 108) */
		background-image: -moz-linear-gradient(246deg, rgb(198, 108, 108) 0px, rgb(198, 108, 108) 5px, rgba(198, 108, 108, 0.2) 28px, rgba(198, 108, 108, 0) 33px);
		background-image: -webkit-gradient(linear, 83 0, 33 100, from(rgb(198, 108, 108)), color-stop(5%, rgb(198, 108, 108)), color-stop(25%, rgba(198, 108, 108, 0.2)), color-stop(31%, rgba(198, 108, 108, 0))/*, to(rgba(198, 108, 108, 0))*/);
		background-image: -webkit-linear-gradient(246deg, rgb(198, 108, 108) 0px, rgb(198, 108, 108) 5px, rgba(198, 108, 108, 0.2) 28px, rgba(198, 108, 108, 0) 33px);
		background-image: -o-linear-gradient(246deg, rgb(198, 108, 108) 0px, rgb(198, 108, 108) 5px, rgba(198, 108, 108, 0.2) 28px, rgba(198, 108, 108, 0) 33px);
	}
	#navigation li.piG a {
		background-color: #D1FAEA;	/* #719F8F rgb(113, 159, 143) */
		background-image: -moz-linear-gradient(246deg, rgb(113, 159, 143) 0px, rgb(113, 159, 143) 5px, rgba(113, 159, 143, 0.2) 28px, rgba(113, 159, 143, 0) 33px);
		background-image: -webkit-gradient(linear, 83 0, 33 100, from(rgb(113, 159, 143)), color-stop(5%, rgb(113, 159, 143)), color-stop(25%, rgba(113, 159, 143, 0.2)), color-stop(31%, rgba(113, 159, 143, 0))/*, to(rgba(113, 159, 143, 0))*/);
		background-image: -webkit-linear-gradient(246deg, rgb(113, 159, 143) 0px, rgb(113, 159, 143) 5px, rgba(113, 159, 143, 0.2) 28px, rgba(113, 159, 143, 0) 33px);
		background-image: -o-linear-gradient(246deg, rgb(113, 159, 143) 0px, rgb(113, 159, 143) 5px, rgba(113, 159, 143, 0.2) 28px, rgba(113, 159, 143, 0) 33px);
		background-image: linear-gradient(246deg, rgb(113, 159, 143) 0px, rgb(113, 159, 143) 5px, rgba(113, 159, 143, 0.2) 28px, rgba(113, 159, 143, 0) 33px);
	}
	#navigation li.piO a {
		background-color: #F19938;	/* was #F19938, but lightened up a bit */	/* #C66D0D rgb(198, 109, 13) */
		background-image: -moz-linear-gradient(246deg, rgb(198, 109, 13) 0px, rgb(198, 109, 13) 5px, rgba(198, 109, 13, 0.2) 28px, rgba(198, 109, 13, 0) 33px);
		background-image: -webkit-gradient(linear, 83 0, 33 100, from(rgb(198, 109, 13)), color-stop(5%, rgb(198, 109, 13)), color-stop(25%, rgba(198, 109, 13, 0.2)), color-stop(31%, rgba(198, 109, 13, 0))/*, to(rgba(198, 109, 13, 0))*/);
		background-image: -webkit-linear-gradient(246deg, rgb(198, 109, 13) 0px, rgb(198, 109, 13) 5px, rgba(198, 109, 13, 0.2) 28px, rgba(198, 109, 13, 0) 33px);
		background-image: -o-linear-gradient(246deg, rgb(198, 109, 13) 0px, rgb(198, 109, 13) 5px, rgba(198, 109, 13, 0.2) 28px, rgba(198, 109, 13, 0) 33px);
		background-image: linear-gradient(246deg, rgb(198, 109, 13) 0px, rgb(198, 109, 13) 5px, rgba(198, 109, 13, 0.2) 28px, rgba(198, 109, 13, 0) 33px);
	}


	#navigation li.selected a,
	#navigation li:hover a {
		-moz-transition-duration: 200ms, 200ms;	/* normal -> hover */
		-moz-transform: translateX(8px) rotate(10deg);
		-moz-box-shadow: 7px 9px 5px rgba(0, 0, 0, 0.4);
		
		-webkit-transition-duration: 200ms, 200ms;	/* normal -> hover */
		-webkit-transform: translate3d(8px, 0px, 0px) rotate3d(0, 0, 1, 10deg);
		-webkit-box-shadow: 7px 9px 5px rgba(0, 0, 0, 0.4);

		-o-transition-duration: 200ms, 200ms;	/* normal -> hover */
		-o-transform: translateX(8px) rotate(10deg);
		-o-box-shadow: 7px 9px 5px rgba(0, 0, 0, 0.4);
		
		/* Even thought we animate these using JS for IE 9, specify them here so compatibility view can pick them up */
		-ms-transform: translateX(8px) rotate(10deg);

		transition-duration: 200ms, 200ms;	/* normal -> hover */
		transform: translateX(8px) rotate(10deg);
		box-shadow: 7px 9px 5px rgba(0, 0, 0, 0.4);

		/*-webkit-transition-timing-function: ease-in-out;	/* ease [cubic-bezier(0.25, 0.1, 0.25, 1.0)] == default, linear, ease-in, ease-out, ease-in-out, cubic-bezier(x,y,x,y) */
		/*-webkit-backface-visibility: hidden;*/
	}

	#navigation li a span {
		opacity: 0.9999;	/* Fix broken font rendering in Fx 4, soften font in Safari */
	}