@charset "utf-8";
/* CSS Document */

/* http://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
/* apply a natural box layout model to all elements */
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

/* see http://stackoverflow.com/questions/16069856/responsive-web-design-and-high-resolution-displays-iphone-4-5 */
@-ms-viewport{
    width: device-width;
}

/****** FOR JQUERY TRANSFER EFFECTS ****/
.ui-effects-transfer { border: 2px dotted gray; }
.ui-autocomplete { height: 200px; overflow-y: scroll; overflow-x: hidden;}
/****** END JQUERY TRANSFER EFFECTS ****/

body { font-family: Arial, Helvetica, sans-serif; font-size: 0.875em; /*14px*/ }

.fLeft { float: left; }
.fRight { float: right; }
.posRel { position: relative; }
.nomarg { margin: 0px !important; }
.clear { clear: both !important; }
.hideMe { display: none; }
.smaller { font-size: .85em; }
.rolloverDisabled {
	cursor: default;
}
.success {
	border: 1px solid #060;
	background-color: #D7FFD7;
}
.roundIcon {
	height: 30px;
	width: 30px;
	display: inline-block;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
}
.jquiIcon {
	height: 20px;
	width: 20px;
	margin: 0px;
	padding: 0px;
	display: inline-block;
	vertical-align: middle;
}

p { margin-top: 10px; }

/*** reviewStar is outside of any structure section because it is always the same ***/
.reviewStar {
	/* expected as a span element */
	display: inline-block;
	background-repeat: no-repeat;
	width: 16px;
	height: 15px;
	margin-right: 1px;
	position: static;
}
.reviewStarSolid {
	background-image: url('/images/misc/starSolid.png');
}
.reviewStarEmpty {
	background-image: url('/images/misc/starEmpty.png');
}

/*** BEGIN COLORS, MISC BEHAVIORS, ETC ***/
	/** general **/
	
		body {
			/* http://gradients.glrzad.com/ */
			/*background: url('/images/design/bubble.png') left top no-repeat;*/
			
			background:
				/* left side */
				url('/images/design/bubble.png') 1% 50px no-repeat,
				url('/images/design/bubble.png') 8% 150px no-repeat,
				url('/images/design/bubble.png') 3% 240px no-repeat,
				url('/images/design/bubble.png') 7% 320px no-repeat,
				url('/images/design/bubble.png') 1% 350px no-repeat,
				url('/images/design/bubble.png') 8% 480px no-repeat,
				url('/images/design/bubble.png') 3% 550px no-repeat,
				url('/images/design/bubble.png') 9% 670px no-repeat,
				url('/images/design/bubble.png') 1% 790px no-repeat,
				url('/images/design/bubble.png') 10% 850px no-repeat,
				url('/images/design/bubble.png') 3% 990px no-repeat,
				url('/images/design/bubble.png') 8% 1100px no-repeat,
				url('/images/design/bubble.png') 1% 1250px no-repeat,
				url('/images/design/bubble.png') 10% 1320px no-repeat,
				url('/images/design/bubble.png') 3% 1410px no-repeat,
				url('/images/design/bubble.png') 8% 1495px no-repeat,
				
				/* right side */
				url('/images/design/bubble.png') 99% 50px no-repeat,
				url('/images/design/bubble.png') 92% 150px no-repeat,
				url('/images/design/bubble.png') 97% 240px no-repeat,
				url('/images/design/bubble.png') 93% 320px no-repeat,
				url('/images/design/bubble.png') 99% 350px no-repeat,
				url('/images/design/bubble.png') 92% 480px no-repeat,
				url('/images/design/bubble.png') 97% 550px no-repeat,
				url('/images/design/bubble.png') 91% 670px no-repeat,
				url('/images/design/bubble.png') 99% 790px no-repeat,
				url('/images/design/bubble.png') 90% 850px no-repeat,
				url('/images/design/bubble.png') 97% 990px no-repeat,
				url('/images/design/bubble.png') 92% 1100px no-repeat,
				url('/images/design/bubble.png') 99% 1250px no-repeat,
				url('/images/design/bubble.png') 90% 1320px no-repeat,
				url('/images/design/bubble.png') 97% 1410px no-repeat,
				url('/images/design/bubble.png') 92% 1495px no-repeat,
				linear-gradient(bottom, #fff 5%, #DCD1E4 15%)
			;
			background:
				/* left side */
				url('/images/design/bubble.png') 1% 50px no-repeat,
				url('/images/design/bubble.png') 8% 150px no-repeat,
				url('/images/design/bubble.png') 3% 240px no-repeat,
				url('/images/design/bubble.png') 7% 320px no-repeat,
				url('/images/design/bubble.png') 1% 350px no-repeat,
				url('/images/design/bubble.png') 8% 480px no-repeat,
				url('/images/design/bubble.png') 3% 550px no-repeat,
				url('/images/design/bubble.png') 9% 670px no-repeat,
				url('/images/design/bubble.png') 1% 790px no-repeat,
				url('/images/design/bubble.png') 10% 850px no-repeat,
				url('/images/design/bubble.png') 3% 990px no-repeat,
				url('/images/design/bubble.png') 8% 1100px no-repeat,
				url('/images/design/bubble.png') 1% 1250px no-repeat,
				url('/images/design/bubble.png') 10% 1320px no-repeat,
				url('/images/design/bubble.png') 3% 1410px no-repeat,
				url('/images/design/bubble.png') 8% 1495px no-repeat,
				
				/* right side */
				url('/images/design/bubble.png') 99% 50px no-repeat,
				url('/images/design/bubble.png') 92% 150px no-repeat,
				url('/images/design/bubble.png') 97% 240px no-repeat,
				url('/images/design/bubble.png') 93% 320px no-repeat,
				url('/images/design/bubble.png') 99% 350px no-repeat,
				url('/images/design/bubble.png') 92% 480px no-repeat,
				url('/images/design/bubble.png') 97% 550px no-repeat,
				url('/images/design/bubble.png') 91% 670px no-repeat,
				url('/images/design/bubble.png') 99% 790px no-repeat,
				url('/images/design/bubble.png') 90% 850px no-repeat,
				url('/images/design/bubble.png') 97% 990px no-repeat,
				url('/images/design/bubble.png') 92% 1100px no-repeat,
				url('/images/design/bubble.png') 99% 1250px no-repeat,
				url('/images/design/bubble.png') 90% 1320px no-repeat,
				url('/images/design/bubble.png') 97% 1410px no-repeat,
				url('/images/design/bubble.png') 92% 1495px no-repeat,
				
				-o-linear-gradient(bottom, #fff 5%, #DCD1E4 15%)
			;
			background:
				/* left side */
				url('/images/design/bubble.png') 1% 50px no-repeat,
				url('/images/design/bubble.png') 8% 150px no-repeat,
				url('/images/design/bubble.png') 3% 240px no-repeat,
				url('/images/design/bubble.png') 7% 320px no-repeat,
				url('/images/design/bubble.png') 1% 350px no-repeat,
				url('/images/design/bubble.png') 8% 480px no-repeat,
				url('/images/design/bubble.png') 3% 550px no-repeat,
				url('/images/design/bubble.png') 9% 670px no-repeat,
				url('/images/design/bubble.png') 1% 790px no-repeat,
				url('/images/design/bubble.png') 10% 850px no-repeat,
				url('/images/design/bubble.png') 3% 990px no-repeat,
				url('/images/design/bubble.png') 8% 1100px no-repeat,
				url('/images/design/bubble.png') 1% 1250px no-repeat,
				url('/images/design/bubble.png') 10% 1320px no-repeat,
				url('/images/design/bubble.png') 3% 1410px no-repeat,
				url('/images/design/bubble.png') 8% 1495px no-repeat,
				
				/* right side */
				url('/images/design/bubble.png') 99% 50px no-repeat,
				url('/images/design/bubble.png') 92% 150px no-repeat,
				url('/images/design/bubble.png') 97% 240px no-repeat,
				url('/images/design/bubble.png') 93% 320px no-repeat,
				url('/images/design/bubble.png') 99% 350px no-repeat,
				url('/images/design/bubble.png') 92% 480px no-repeat,
				url('/images/design/bubble.png') 97% 550px no-repeat,
				url('/images/design/bubble.png') 91% 670px no-repeat,
				url('/images/design/bubble.png') 99% 790px no-repeat,
				url('/images/design/bubble.png') 90% 850px no-repeat,
				url('/images/design/bubble.png') 97% 990px no-repeat,
				url('/images/design/bubble.png') 92% 1100px no-repeat,
				url('/images/design/bubble.png') 99% 1250px no-repeat,
				url('/images/design/bubble.png') 90% 1320px no-repeat,
				url('/images/design/bubble.png') 97% 1410px no-repeat,
				url('/images/design/bubble.png') 92% 1495px no-repeat,
				
				-moz-linear-gradient(bottom, #fff 5%, #DCD1E4 15%)
			;
			background:
				/* left side */
				url('/images/design/bubble.png') 1% 50px no-repeat,
				url('/images/design/bubble.png') 8% 150px no-repeat,
				url('/images/design/bubble.png') 3% 240px no-repeat,
				url('/images/design/bubble.png') 7% 320px no-repeat,
				url('/images/design/bubble.png') 1% 350px no-repeat,
				url('/images/design/bubble.png') 8% 480px no-repeat,
				url('/images/design/bubble.png') 3% 550px no-repeat,
				url('/images/design/bubble.png') 9% 670px no-repeat,
				url('/images/design/bubble.png') 1% 790px no-repeat,
				url('/images/design/bubble.png') 10% 850px no-repeat,
				url('/images/design/bubble.png') 3% 990px no-repeat,
				url('/images/design/bubble.png') 8% 1100px no-repeat,
				url('/images/design/bubble.png') 1% 1250px no-repeat,
				url('/images/design/bubble.png') 10% 1320px no-repeat,
				url('/images/design/bubble.png') 3% 1410px no-repeat,
				url('/images/design/bubble.png') 8% 1495px no-repeat,
				
				/* right side */
				url('/images/design/bubble.png') 99% 50px no-repeat,
				url('/images/design/bubble.png') 92% 150px no-repeat,
				url('/images/design/bubble.png') 97% 240px no-repeat,
				url('/images/design/bubble.png') 93% 320px no-repeat,
				url('/images/design/bubble.png') 99% 350px no-repeat,
				url('/images/design/bubble.png') 92% 480px no-repeat,
				url('/images/design/bubble.png') 97% 550px no-repeat,
				url('/images/design/bubble.png') 91% 670px no-repeat,
				url('/images/design/bubble.png') 99% 790px no-repeat,
				url('/images/design/bubble.png') 90% 850px no-repeat,
				url('/images/design/bubble.png') 97% 990px no-repeat,
				url('/images/design/bubble.png') 92% 1100px no-repeat,
				url('/images/design/bubble.png') 99% 1250px no-repeat,
				url('/images/design/bubble.png') 90% 1320px no-repeat,
				url('/images/design/bubble.png') 97% 1410px no-repeat,
				url('/images/design/bubble.png') 92% 1495px no-repeat,
				
				-webkit-linear-gradient(bottom, #fff 5%, #DCD1E4 15%)
			;
			background: 
				/* left side */
				url('/images/design/bubble.png') 1% 50px no-repeat,
				url('/images/design/bubble.png') 8% 150px no-repeat,
				url('/images/design/bubble.png') 3% 240px no-repeat,
				url('/images/design/bubble.png') 7% 320px no-repeat,
				url('/images/design/bubble.png') 1% 350px no-repeat,
				url('/images/design/bubble.png') 8% 480px no-repeat,
				url('/images/design/bubble.png') 3% 550px no-repeat,
				url('/images/design/bubble.png') 9% 670px no-repeat,
				url('/images/design/bubble.png') 1% 790px no-repeat,
				url('/images/design/bubble.png') 10% 850px no-repeat,
				url('/images/design/bubble.png') 3% 990px no-repeat,
				url('/images/design/bubble.png') 8% 1100px no-repeat,
				url('/images/design/bubble.png') 1% 1250px no-repeat,
				url('/images/design/bubble.png') 10% 1320px no-repeat,
				url('/images/design/bubble.png') 3% 1410px no-repeat,
				url('/images/design/bubble.png') 8% 1495px no-repeat,
				
				/* right side */
				url('/images/design/bubble.png') 99% 50px no-repeat,
				url('/images/design/bubble.png') 92% 150px no-repeat,
				url('/images/design/bubble.png') 97% 240px no-repeat,
				url('/images/design/bubble.png') 93% 320px no-repeat,
				url('/images/design/bubble.png') 99% 350px no-repeat,
				url('/images/design/bubble.png') 92% 480px no-repeat,
				url('/images/design/bubble.png') 97% 550px no-repeat,
				url('/images/design/bubble.png') 91% 670px no-repeat,
				url('/images/design/bubble.png') 99% 790px no-repeat,
				url('/images/design/bubble.png') 90% 850px no-repeat,
				url('/images/design/bubble.png') 97% 990px no-repeat,
				url('/images/design/bubble.png') 92% 1100px no-repeat,
				url('/images/design/bubble.png') 99% 1250px no-repeat,
				url('/images/design/bubble.png') 90% 1320px no-repeat,
				url('/images/design/bubble.png') 97% 1410px no-repeat,
				url('/images/design/bubble.png') 92% 1495px no-repeat,
				
				-ms-linear-gradient(bottom, #fff 5%, #DCD1E4 15%)
			;
			background: 
				/* left side */
				url('/images/design/bubble.png') 1% 50px no-repeat,
				url('/images/design/bubble.png') 8% 150px no-repeat,
				url('/images/design/bubble.png') 3% 240px no-repeat,
				url('/images/design/bubble.png') 7% 320px no-repeat,
				url('/images/design/bubble.png') 1% 350px no-repeat,
				url('/images/design/bubble.png') 8% 480px no-repeat,
				url('/images/design/bubble.png') 3% 550px no-repeat,
				url('/images/design/bubble.png') 9% 670px no-repeat,
				url('/images/design/bubble.png') 1% 790px no-repeat,
				url('/images/design/bubble.png') 10% 850px no-repeat,
				url('/images/design/bubble.png') 3% 990px no-repeat,
				url('/images/design/bubble.png') 8% 1100px no-repeat,
				url('/images/design/bubble.png') 1% 1250px no-repeat,
				url('/images/design/bubble.png') 10% 1320px no-repeat,
				url('/images/design/bubble.png') 3% 1410px no-repeat,
				url('/images/design/bubble.png') 8% 1495px no-repeat,
				
				/* right side */
				url('/images/design/bubble.png') 99% 50px no-repeat,
				url('/images/design/bubble.png') 92% 150px no-repeat,
				url('/images/design/bubble.png') 97% 240px no-repeat,
				url('/images/design/bubble.png') 93% 320px no-repeat,
				url('/images/design/bubble.png') 99% 350px no-repeat,
				url('/images/design/bubble.png') 92% 480px no-repeat,
				url('/images/design/bubble.png') 97% 550px no-repeat,
				url('/images/design/bubble.png') 91% 670px no-repeat,
				url('/images/design/bubble.png') 99% 790px no-repeat,
				url('/images/design/bubble.png') 90% 850px no-repeat,
				url('/images/design/bubble.png') 97% 990px no-repeat,
				url('/images/design/bubble.png') 92% 1100px no-repeat,
				url('/images/design/bubble.png') 99% 1250px no-repeat,
				url('/images/design/bubble.png') 90% 1320px no-repeat,
				url('/images/design/bubble.png') 97% 1410px no-repeat,
				url('/images/design/bubble.png') 92% 1495px no-repeat,
				
				-webkit-gradient(
					linear,
					right bottom,
					right top,
					color-stop(0.05, #fff),
					color-stop(0.15, #DCD1E4)
				)
			;
		}
		.mainContent, .footer {
			background-color: #fff;
		}
	
	
	
	
		.dropShadowGrey {
			-moz-box-shadow:    0px 5px 39px -1px #ccc;
			-webkit-box-shadow: 0px 5px 39px -1px #ccc;
			box-shadow:         0px 5px 39px -1px #ccc;
		}
		
		/* use jquery to apply .touchscreenScrollbars to show
		* scrollbars on dialog boxes on ipads, droids, etc
		*/
		.touchscreenScrollbars::-webkit-scrollbar {
			-webkit-appearance: none !important;
			width: 11px !important;
		}
		.touchscreenScrollbars::-webkit-scrollbar {
			border-radius: 8px !important;
			border: 2px solid white !important;
			background-color: #ccc !important;
		}
		.touchscreenScrollbars::-webkit-scrollbar-thumb {
			border-radius: 8px !important;
			border: 2px solid white !important;
			background-color: rgba(0,0,0,.5) !important;
		}
		
		.purple, a.purple, .purple a:link, .purple a:visited, .purple a:hover, .purple:active {
			/*text-align: center;*/
			color: #553066;
		}
		.purpleBorder {
			border: 1px solid #553066;
		}
		strong, b {
			font-weight: bold;
		}
		i { font-style: italic; }
		div.purpleTable {
			/* jqueryUI's css rounded corners don't work on
			* tables unless you set the display to block
			* if you do that, the table's cells do not expand to
			* fill in the entire table
			* so instead we surround our purple table's with a div
			* this will make up the outer border of the table, with rounded corners
			*/
			border: 1px solid #CFC2D6;
			/*display: inline-block;*/
		}
		table.purpleTable {
			width: 100%;
			/*display: block;*/
		}
		table.purpleTable tr:first-child td:first-child {
			vertical-align: middle;
		}
		table.purpleTable td {
			border: 1px solid #CFC2D6;
			border-bottom: none;
			padding: 5px;
		}
		table.purpleTable td:first-child {
			border-left: none;
		}
		table.purpleTable td:last-child {
			border-right: none;
		}
		table.purpleTable tr:first-child td {
			border-top: none;
			/*border-right: none;*/
		}
		.green, a.green, .green a:link, .green a:visited, .green a:hover, .green:active {
			/*text-align: center;*/
			color: #009245;
		}
		.darkGrey, .darkGrey a { color: #474747 !important; }
		.lightGrey, .lightGrey a { color: #999999 !important; }
		.darkestGrey, .darkestGrey a { color: #2f2f2f !important; }
		.red { color: #f00 !important; }
		p.hr {
			border-top: 1px solid #ccc;
			margin: 7px 0px 7px 0px;
			height: 1px;
		}
		p.hrLight {
			border-top: 1px solid #ddd;
			margin: 1em 0px 7px 0px;
			height: 1px;
		}
		p.hrThinDark {
			border-top: 1px solid #999;
			height: 1px;
		}
		p.hrThinBlue {
			border-top: 1px solid #BBE3FD;
			height: 1px;
		}
		p.hrThinPurple {
			border-top: 1px solid #693D7E;
			height: 1px;
		}
		p.hrDouble {
			border-top: 1px solid #ccc;
			border-bottom: 1px solid #ccc;
			margin: 7px 0px 7px 0px;
			height: 3px;
		}
		.autoCenter {
			margin-left: auto !important;
			margin-right: auto !important;
		}
		.hoverUL a, .hoverUL a:link, .hoverUL a:visited, a.hoverUL:link, a.hoverUL:visited {
			text-decoration: none !important;
		}
		.hoverUL a:hover, .hoverUL a:active, a.hoverUL:hover, a.hoverUL:active {
			text-decoration: underline !important;
		}
		.backgroundHighlight {
			background-color: #ffffd7;
		}
		.backgroundHighlightPurple {
			background-color: #693D7E;
			color: #fff;
		}
		p.loading {
			text-align: center;
		}
	/** end general **/
	
	/** header **/
		.header {
			/* http://gradients.glrzad.com/ */
			background-image: linear-gradient(bottom, #EBE4F2 5%, #fff 25%);
			background-image: -o-linear-gradient(bottom, #EBE4F2 5%, #fff 25%);
			background-image: -moz-linear-gradient(bottom, #EBE4F2 5%, #fff 25%);
			background-image: -webkit-linear-gradient(bottom, #EBE4F2 5%, #fff 25%);
			background-image: -ms-linear-gradient(bottom, #EBE4F2 5%, #fff 25%);
			background-image: -webkit-gradient(
				linear,
				right bottom,
				right top,
				color-stop(0.05, #EBE4F2),
				color-stop(0.25, #fff)
			);
		}
		.header .nav .headerTopFade {
			text-align: right;
			background: #693D7E;
			color: #fff;
			
			
			/* http://gradients.glrzad.com/ */
			background-image: linear-gradient(left , #fff 0%, #7A2664 55%, #7A2664 88%);
			background-image: -o-linear-gradient(left , #fff 0%, #7A2664 55%, #7A2664 88%);
			background-image: -moz-linear-gradient(left , #fff 0%, #7A2664 55%, #7A2664 88%);
			background-image: -webkit-linear-gradient(left , #fff 0%, #7A2664 55%, #7A2664 88%);
			background-image: -ms-linear-gradient(left , #fff 0%, #7A2664 55%, #7A2664 88%);
			background-image: -webkit-gradient(
				linear,
				left top,
				right top,
				color-stop(0.0, #fff),
				color-stop(0.55, #7A2664),
				color-stop(0.88, #7A2664)
			);
		}
		.header .nav ul a:link, .header .nav ul a:visited, .header .nav ul a:hover, .header .nav ul a:active {
			text-decoration: none;
		}
		.header .nav ul a:hover, .header .nav ul a:active {
			text-decoration: underline;
		}
		.header .nav .headerTopFade li a, .header .nav .headerTopFade li a:link, .header .nav .headerTopFade li a:visited {
			color: #fff;
		}
		
		.searchField {
			border: 1px solid #CCBCD9;
		}
		.buttonLink {
			border: none;
			background-color: #A990B5;
			color: #fff;
		}
		.headerSearchArea input.buttonLink {
			text-transform: uppercase;
			cursor: pointer;
		}
		a.buttonLink:link, a.buttonLink:visited, a.buttonLink:hover, a.buttonLink:active {
			text-decoration: none;
			padding: 0px 3px 0px 3px;
		}
		.headerSearchArea form { display: inline; }
		.buttonLinkSpacer {
			border-right: 1px solid #fff;
			border-left: 1px solid #fff;
			border-top: 9px solid #A990B5;
			border-bottom: 9px solid #A990B5;
		}
		/*@media screen and (min-width: 320px) {*/
			.header .nav {
				/* http://gradients.glrzad.com/ */
				/*background-image: linear-gradient(left , #fff 0%, #AB799E 55%, #AB799E 88%) !important;
				background-image: -o-linear-gradient(left , #fff 0%, #AB799E 55%, #AB799E 88%) !important;
				background-image: -moz-linear-gradient(left , #fff 0%, #AB799E 55%, #AB799E 88%) !important;
				background-image: -webkit-linear-gradient(left , #fff 0%, #AB799E 55%, #AB799E 88%) !important;
				background-image: -ms-linear-gradient(left , #fff 0%, #AB799E 55%, #AB799E 88%) !important;
				background-image: -webkit-gradient(
					linear,
					left top,
					right top,
					color-stop(0, #fff),
					color-stop(0.45, #AB799E),
					color-stop(0.88, #AB799E)
				) !important;*/
				
				/* match headerTopFade */
				/* http://gradients.glrzad.com/ */
				background-image: linear-gradient(left , #fff 0%, #7A2664 55%, #7A2664 88%) !important;
				background-image: -o-linear-gradient(left , #fff 0%, #7A2664 55%, #7A2664 88%) !important;
				background-image: -moz-linear-gradient(left , #fff 0%, #7A2664 55%, #7A2664 88%) !important;
				background-image: -webkit-linear-gradient(left , #fff 0%, #7A2664 55%, #7A2664 88%) !important;
				background-image: -ms-linear-gradient(left , #fff 0%, #7A2664 55%, #7A2664 88%) !important;
				background-image: -webkit-gradient(
					linear,
					left top,
					right top,
					color-stop(0.0, #fff),
					color-stop(0.55, #7A2664),
					color-stop(0.88, #7A2664)
				) !important;
			}
			.header .nav .ulFade {
				/* http://gradients.glrzad.com/ */
				background-image: linear-gradient(left , #fff 0%, #A6A6A6 55%, #A6A6A6 88%);
				background-image: -o-linear-gradient(left , #fff 0%, #A6A6A6 55%, #A6A6A6 88%);
				background-image: -moz-linear-gradient(left , #fff 0%, #A6A6A6 55%, #A6A6A6 88%);
				background-image: -webkit-linear-gradient(left , #fff 0%, #A6A6A6 55%, #A6A6A6 88%);
				background-image: -ms-linear-gradient(left , #fff 0%, #A6A6A6 55%, #A6A6A6 88%);
				background-image: -webkit-gradient(
					linear,
					left top,
					right top,
					color-stop(0.0, #fff),
					color-stop(0.55, #A6A6A6),
					color-stop(0.88, #A6A6A6)
				);
			}
		/*}*/
		/*@media screen and (min-width: 480px) {
		}*/
		/*@media screen and (min-width: 600px) {*/
			.header .nav {
				background: url('/images/design/header.png') bottom right no-repeat;
				
				background:
					url('/images/design/header.png') bottom right no-repeat,
					linear-gradient(left , #fff 0%, #7A2664 45%, #7A2664 88%) !important
				;
				background:
					url('/images/design/header.png') bottom right no-repeat,
					-o-linear-gradient(left , #fff 0%, #7A2664 45%, #7A2664 88%) !important
				;
				background:
					url('/images/design/header.png') bottom right no-repeat,
					-moz-linear-gradient(left , #fff 0%, #7A2664 45%, #7A2664 88%) !important
				;
				background:
					url('/images/design/header.png') bottom right no-repeat,
					-webkit-linear-gradient(left , #fff 0%, #7A2664 45%, #7A2664 88%) !important
				;
				background:
					url('/images/design/header.png') bottom right no-repeat,
					-ms-linear-gradient(left , #fff 0%, #7A2664 45%, #7A2664 88%) !important
				;
				background:
					url('/images/design/header.png') bottom right no-repeat,
					-webkit-gradient(
						linear,
						left top,
						right top,
						color-stop(0, #fff),
						color-stop(0.45, #7A2664),
						color-stop(0.88, #7A2664)
					) !important
				;
			}
			.header .nav .ulFade {
				/* http://gradients.glrzad.com/ */
				background-image: linear-gradient(left , #fff 0%, #A6A6A6 45%, #A6A6A6 88%);
				background-image: -o-linear-gradient(left , #fff 0%, #A6A6A6 45%, #A6A6A6 88%);
				background-image: -moz-linear-gradient(left , #fff 0%, #A6A6A6 45%, #A6A6A6 88%);
				background-image: -webkit-linear-gradient(left , #fff 0%, #A6A6A6 45%, #A6A6A6 88%);
				background-image: -ms-linear-gradient(left , #fff 0%, #A6A6A6 45%, #A6A6A6 88%);
				background-image: -webkit-gradient(
					linear,
					left top,
					right top,
					color-stop(0.0, #fff),
					color-stop(0.45, #A6A6A6),
					color-stop(0.88, #A6A6A6)
				);
			}
		/*}*/
		/*@media screen and (min-width: 768px) {*/
			.header .nav {
				background: url('/images/design/header.png') bottom right no-repeat;
				
				background:
					url('/images/design/header.png') bottom right no-repeat,
					linear-gradient(left , #fff 0%, #7A2664 55%, #7A2664 88%) !important
				;
				background:
					url('/images/design/header.png') bottom right no-repeat,
					-o-linear-gradient(left , #fff 0%, #7A2664 55%, #7A2664 88%) !important
				;
				background:
					url('/images/design/header.png') bottom right no-repeat,
					-moz-linear-gradient(left , #fff 0%, #7A2664 55%, #7A2664 88%) !important
				;
				background:
					url('/images/design/header.png') bottom right no-repeat,
					-webkit-linear-gradient(left , #fff 0%, #7A2664 55%, #7A2664 88%) !important
				;
				background:
					url('/images/design/header.png') bottom right no-repeat,
					-ms-linear-gradient(left , #fff 0%, #7A2664 55%, #7A2664 88%) !important
				;
				background:
					url('/images/design/header.png') bottom right no-repeat,
					-webkit-gradient(
						linear,
						left top,
						right top,
						color-stop(0, #fff),
						color-stop(0.55, #7A2664),
						color-stop(0.88, #7A2664)
					) !important
				;
			}
			.header .nav .ulFade {
				/* http://gradients.glrzad.com/ */
				background-image: linear-gradient(left , #fff 0%, #A6A6A6 55%, #A6A6A6 88%);
				background-image: -o-linear-gradient(left , #fff 0%, #A6A6A6 55%, #A6A6A6 88%);
				background-image: -moz-linear-gradient(left , #fff 0%, #A6A6A6 55%, #A6A6A6 88%);
				background-image: -webkit-linear-gradient(left , #fff 0%, #A6A6A6 55%, #A6A6A6 88%);
				background-image: -ms-linear-gradient(left , #fff 0%, #A6A6A6 55%, #A6A6A6 88%);
				background-image: -webkit-gradient(
					linear,
					left top,
					right top,
					color-stop(0.0, #fff),
					color-stop(0.55, #A6A6A6),
					color-stop(0.88, #A6A6A6)
				);
			}
		/*}*/
		/*@media screen and (min-width: 900px) {
		}*/
	/** end header **/
	
	/** main nav **/
		.mainNav {
			float: left;
			position: relative;
			background-color: #fff;
			border-style: solid;
			border-top-color: #EBE4F2; /* same as jqui clickable: default state bg color */
			border-top-width: 5px;
		}
		.mainNav ul li ul li {
			background-image: url('/images/misc/arrows/arrowPurpleRight.png');
			background-size: 5px 6px;
			background-repeat: no-repeat;
			background-position: 0px .6em;
		}
		.mainNav ul li ul li:hover {
			background-image: url('/images/misc/arrows/arrowGreenRight.png');
		}
		.navTitle {
			background-color: #EBE4F2;  /* same as jqui clickable: default state bg color */
			text-transform: uppercase;
			color: #693D7E;
		}
		.mainNav h2 {
			/*text-align: center;*/
			color: #009245; /* .green */
		}
		.mainNav .topDept a {
			/*text-align: center;*/
			color: #553066;  /* .purple */
		}
		.mainNav .topDept a:hover, .mainNav .topDept a:active {
			/*text-align: center;*/
			color: #009245;  /* .green */
		}
		.mainNav .topDept:hover > ul a {
			/*text-align: center;*/
			color: #009245;  /* .green */
		}
		.deptSubNav a {
			/* keep these purple until they are individually hovered over */
			/*text-align: center;*/
			text-decoration: none;
			color: #553066;  /* .purple */
		}
		.mainNav .topDept:hover > ul .deptSubNav a:hover {
			/* keep these purple until they are individually hovered over */
			/*text-align: center;*/
			color: #009245;  /* .green */
		}
		.deptSubNav a:hover, .deptSubNav a:active {
			background-color: #EBE4F2;
		}
		.mainNav .topDept a {
			display: block;
			width: 100%;
		}
		.mainNav .topDept {
			border-top: 1px dotted #ccc;
		}
		.mainNav .topDept:first-child {
			border-top: none;
		}
		.mainNav .topDept h3 {
			font-weight: bold;
			font-size: 1.2em;
		}
		.mainNav .topDept > ul li {
			background-image: url('/images/misc/arrows/arrowPurpleRight.png');
			background-position: 95% center;
			background-repeat: no-repeat;
			
		}
		.mainNav .topDept:hover > ul li {
			background-image: url('/images/misc/arrows/arrowGreenRight.png');
		}
		.mainNav .topDept a:link, .mainNav .topDept a:visited, .mainNav .topDept a:hover, .mainNav .topDept a:active {
			text-decoration: none;
		}
		.deptNav {
			border-style: solid;
			border-top-color: #EBE4F2; /* same as jqui clickable: default state bg color */
			border-top-width: 5px;
			background-color: #fff;
		}
		.deptNav p.ui-state-default, .deptNav p.ui-state-hover {
			float: right;
			padding: 10px;
			margin: 2px;
		}
		.deptImage {
			/* these are contained by an absolute position element,
			* so their adjustments will be relative to that
			*/
			position: absolute;
			z-index: -1; /* this stops the images from covering links in the ul */
			background-repeat: no-repeat;
		}
		
		.subNavOn .topDept > ul > li > a { font-weight: bold; }
		.mainNav .topDept > ul li.deptSubNav, .mainNav .topDept > ul li.deptSubNav li {
			background-image: none;
		}
		
		/*** THIS IS NOT THE STRUCTURE SECTION ***/
		/*@media screen and (min-width: 320px) {*/
			.deptNavWedding, .deptNavBaby, .deptImageOtherEvents, .deptImageAccessories, .deptImagePersonalizedFavors, .deptImageWineBarFavors, .deptImagePrintedGlasses {
				background-image: none;
			}
		/*}*/
		/*** THIS IS NOT THE STRUCTURE SECTION ***/
		/*@media screen and (min-width: 600px) {*/
			/* only display these background images on higher resolution devices
			* these are more likely to NOT be phones where bandwidth is not to be wasted
			*/
			.deptNavWedding {
				background-image: url('/images/misc/topDepts/stopper.jpg');
			}
			.deptNavBaby {
				background-image: url('/images/misc/topDepts/babyJar.jpg');
			}
			.deptImageOtherEvents {
				right: -15px;
				bottom: 0px;
				height: 275px;
				width: 297px;
				background-image: url('/images/misc/topDepts/frame.png');
			}
			.deptImageAccessories {
				right: -25px;
				bottom: 10px;
				height: 261px;
				width: 328px;
				background-image: url('/images/misc/topDepts/accessories.png');
			}
			.deptImagePersonalizedFavors {
				right: -23px;
				bottom: 0px;
				height: 238px;
				width: 390px;
				background-image: url('/images/misc/topDepts/personalizedFavors.png');
			}
			.deptImageWineBarFavors {
				right: -3px;
				bottom: -8px;
				height: 380px;
				width: 439px;
				background-image: url('/images/misc/topDepts/wineBarFavors.png');
			}
			.deptImagePrintedGlasses {
				right: -3px;
				bottom: -8px;
				height: 380px;
				width: 439px;
				background-image: url('/images/misc/topDepts/printedGlasses.png');
			}
		/*}*/
	/** end main nav **/
		
	/** footer **/
		.footer p a {
			font-size: 1.2em;
		}
		.footerHRL, .footerHRC, .footerHRR {
			/* footer horizontal rule left, center and right */
			float: left;
			height: 1px;
			margin: 0px;
		}
		.footerHRL {
			background-image: linear-gradient(left , #fff 15%, #93278F 90%);
			background-image: -o-linear-gradient(left , #fff 15%, #93278F 90%);
			background-image: -moz-linear-gradient(left , #fff 15%, #93278F 90%);
			background-image: -webkit-linear-gradient(left , #fff 15%, #93278F 90%);
			background-image: -ms-linear-gradient(left , #fff 15%, #93278F 90%);
			background-image: -webkit-gradient(
				linear,
				left top,
				right top,
				color-stop(0.15, #fff),
				color-stop(0.9, #93278F)
			);
		}
		.footerHRC {
			background-color: #93278F;
		}
		.footerHRR {
			background-image: linear-gradient(left , #93278F 15%, #fff 90%);
			background-image: -o-linear-gradient(left , #93278F 15%, #fff 90%);
			background-image: -moz-linear-gradient(left , #93278F 15%, #fff 90%);
			background-image: -webkit-linear-gradient(left , #93278F 15%, #fff 90%);
			background-image: -ms-linear-gradient(left , #93278F 15%, #fff 90%);
			background-image: -webkit-gradient(
				linear,
				left top,
				right top,
				color-stop(0.15, #93278F),
				color-stop(0.9, #fff)
			);
		}
		.footer a {
			text-decoration: none;
		}
		.footer a:hover, .footer a:active {
			text-decoration: underline;
		}
	/** end footer **/
/*** END COLORS ETC ***/


/******* BEGIN STRUCTURE ************/
	/*@media screen and (min-width: 320px) {*/
		/* this is the smallest possible width, and will therefore
		* apply to every larger window
		* so larger window settings need only include the styles that are being modified
		*/
		
		ul {
			padding-left: 6%;
			margin: 5px 0px;
		}
		ul li {
			list-style-type: disc;
		}
		.breadcrumbs {
			padding-left: 0px;
		}
		.breadcrumbs li {
			float: left;
			list-style-type: none;
			margin-right: 3px;
		}
		/* sizing for major containers */
		.header, .footer, .mainContent {
			max-width: 980px;
			margin-left: auto;
			margin-right: auto;
		}
		.pageContent, .mainNavLoading {
			/* max-width of .mainContent - width of nav - left margin of pageContent*/
			/* 980 - 215 -5 = 760 */ /* 720 */
			/*max-width: 760px;*/
			/* on very small devices this will show up below mainNav */
			/* note that prod and ctgy pages may hide mainNav entirely */
			/* .mainNavLoading is (as of 2013-07-10) only on category pages
			* but the settings must exactly match .pageContent, so might as well
			* put it here
			*/
			width: 100%;
			margin: 0px;
			font-size: .9em;
			color: #444;
			line-height: 1.2em;
		}
		.mainNav {
			padding: 10px 0px 0px 0px;
			width: 100%;
			min-height: 480px;
		}
		/* end sizing for major containers */
		
		
		/** header **/
			body {
				margin-left: 2px;
			}
			.header {
				height: 170px;
				position: relative;
			}
			.header .nav {
				height: 70px;
			}
			.header .logo {
				position: absolute;
				top: 5px;
				left: 20%;
				margin-left: 2px;
			}
			.header p {
				margin-top: 0px;
			}
			.header .nav p.fLeft { margin-top: 10px; }
			.header .nav .headerTopFade {
				overflow: visible;
				float: right;
				width: 100%;
				margin: 0px;
				height: 18px;
				line-height: 18px;
				padding-left: 0px;
				padding-right: 0px;
			}
			.header .nav .headerTopFade li:first-child {
				display: none;
			}
			.header .nav .headerTopFade li {
				float: right;
				display: none; /* these links are hidden on small displays */
			}
			.header .nav .headerTopFade li a {
				padding: 0px 2px;
			}
			.header .nav ul.green, .header .nav .ulFade {
				display: none; /* these links are hidden on small displays */
			}
			.header .nav ul li {
				list-style-type: none;
			}
			.header .nav .ulFade {
				display: block;
				width: 100%;
				margin: 0px;
				height: 1px;
			}
			.header .nav ul li {
				height: 20px;
				line-height: 20px;
			}
			.header .nav ul li a {
				display: block;
				margin: 0px 3px;
			}
			.headerSearchArea {
				float: right;
				height: 40px;
				width: 75%;
				margin: 3px 50px 50px 0px;
			}
			.headerSearchArea form {
				display: block;
				margin: 0px 0px 5px 0px;
			}
			.headerSearchArea .searchField {
				height: 40px;
				width: 100%;
				padding: 0px 20% 0px 2px;
				font-size: 1.5em;
			}
			.headerSearchArea ul {
				display: inline;
				padding: 0px;
			}
			.headerSearchArea li {
				list-style-type: none;
				float: right;
				height: 40px; /* same as button images they contain */
			}
			a.buttonLink {
				display: block;
				height: 100%;
				line-height: 40px;
				width: 90px;
				text-align: center;
			}
			.headerSearchArea a.buttonLink,.headerSearchArea .buttonLinkSpacer {
				/*float: right;*/
			}
			.headerSearchArea input.buttonLink {
				position: absolute;
				left: 80%;
				top: 0px;
				height: 40px;
				width: 70px;
				border: 1px solid #CCBCD9;
			}
			.headerSearchArea .buttonLinkSpacer {
				height: 100%;
				display:  block;
			}
			.cartLinkSID img {
				vertical-align: middle;
				margin-top: -2px;
			}
		/** end header **/
		/** main nav **/
			.mainNav { font-size: .9em; }
			.mainNav p {
				margin-top: 0px;
			}
			.topDepts {
				margin-left: 1.5%;
			}
			.mainNav ul li {
				list-style-type: none;
			}
			.mainNav ul li ul li {
				padding-left: 15px; /* this is to account for the background-image bullet, do not change without changing the bullet */
			}
			.navTitle {
				height: 40px;
				line-height: 40px;
				padding: 0px 3px 0px 3px;
				position: absolute;
				top: -40px;
				left: 0px;
				text-align: center;
				min-width: 50%;
				letter-spacing: 1px;
				display: none;
			}
			.mainNav h2 {
				margin-bottom: 5px;
				letter-spacing: 2px;
				font-size: 1em;
				font-weight: bold;
				text-transform: uppercase;
			}
			.mainNav .topDept {
				/*padding-bottom: 5px;
				margin-bottom: 15px;*/
				margin-top: 3px;
				margin-bottom: 3px;
			}
			.mainNav .topDept h3 {
				margin: 10px 20px;
			}
			.mainNav .topDept ul {
				padding-left: 20px;
				margin: 0px;
			}
			.mainNav .topDept a {
				padding: 1px 0px;
			}
			.mainNav .topDept > ul a {
				/* main links (visible before flyout is opened) */
				display: block;
				padding: 10px 0px;
			}
			.mainNav .topDept > ul li.deptSubNav ul {
				padding-left: 0px;
			}
			.mainNav .topDept > ul li.deptSubNav {
				margin-top: 0px;
			}
			.mainNav .topDept > ul li.deptSubNav ul a {
				padding-top: 5px;
				padding-bottom: 5px;
			}
			.deptNav {
				display: none;
				position: absolute;
				top: -5px; /* so the 5px border is even with mainNav */
				left: 15%; /* almost entirely covers main nav */
				width: 80%;
				background-repeat: no-repeat;
				background-position: right bottom;
			}
			.deptNav p.ui-state-default, .deptNav p.ui-state-hover {
				display: none; /* this is revealed only by javascript if touchscreen device is detected */
			}
			.deptNavTopImg {
				position: relative;
				top: -8px;
				left: 20px;
			}
			.deptNavBottomImg {
				position: absolute;
				bottom: 0px;
				right: -10px;
			}
			.mainNav .topDept ul.deptNavMenu2 {
				margin-left: 20px;
				border-left: 1px dotted #CFC2D6;
			}
			.deptNav ul {
				padding-left: 0px;
				margin-left: 20px;
			}
			.mainNav .deptNav ul a {
				display: block;
				padding: 8px 0px;
			}
			.deptSubNav {
				padding-left: 25px;
				margin-top: -7px;
			}
			.deptSubNav a {
				display: block;
				padding: 4px 2px;
				margin: 2px 0px;
			}
		/** end main nav **/
		
		/** pageContent **/
		.pageContent, .mainNavLoading {
			float: left;
		}
		/** pageContent **/
		
		/** footer **/
			.footer {
				margin-top: 0px;
				padding: 25px 0px 40px 0px;
				text-align: center;
			}
			.footerHRL, .footerHRR {
				/* footer horizontal rule left, center and right */
				width: 20%;
			}
			.footerHRC {
				width: 58%;
			}
		/** end footer **/
	/*}*/

	/*@media screen and (min-width: 480px) {*/
		.pageContent, .mainNavLoading {
			/* max-width of .mainContent - width of nav - left margin of pageContent*/
			/* 980 - 215 -5 = 760 */ /* 720 */
			/*max-width: 760px;*/
			/*width: 77.75%;*/ /* does not work on macbook air / safari, not enough space for pagecontent */
			width: 77%;
			margin: 5px 0px 0px 0px;
			padding-left: 5px;
		}
		.mainNav {
			width: 22%;
		}
		/* end sizing for major containers */
		
		/** header **/
			body {
				margin-left: 15px;
			}
			.header {
				height: 135px;
			}
			.header .logo {
				left: 15px;
				top: 25px;
			}
			.header .nav {
				height: 87px;
			}
			.header .nav .headerTopFade li {
				display: block; /* these links are hidden on small displays */
			}
			.header .nav .headerTopFade li a {
				padding: 0px 3px;
			}
			.header .nav .ulFade {
				margin: 0px;
			}
			.header .nav ul li {
				float: left;
			}
			.header .nav ul li a {
				margin: 0px 5px;
			}
			.headerSearchArea {
				margin: 3px 10px 0px 0px;
			}
			.headerSearchArea form {
				display: inline;
				margin: 0px;
			}
			.headerSearchArea .searchField {
				width: 37%;
				padding: 0px 5px 0px 2px;
				margin-left: 3%;
			}
			a.buttonLink {
				width: 60px;
			}
			.headerSearchArea input.buttonLink {
				position: absolute;
				top: 0px;
				left: 39%;
			}
		/** end header **/
		
		/** main nav **/
			.navTitle {
				display: block;
			}
			.deptNav {
				left: 212px; /* almost the same as width of mainNav */
				left: 98.5%; /* almost the same as width of mainNav */
				width: 350px;
			}
			.mainNav .topDept ul {
				padding-left: 10px;
			}
			.deptSubNav {
				padding-left: 15px;
			}
		/** end main nav **/
		
		/** pageContent **/
		/** pageContent **/
		
		/** footer **/
		/** end footer **/
	/*}*/

	/*@media screen and (min-width: 600px) {*/
		/** header **/
			.header .nav ul.green, .header .nav .ulFade {
				display: block; /* make sure they are not hidden by 320px view setup*/
				float: right;
				width: 60%; /* .ulFade overrides this below */
				margin: 5px 0px 0px 0px;
			}
			.header .nav .ulFade {
				margin-top: 0px;
				width: 100%;
			}
			.headerSearchArea .searchField {
				width: 40%;
			}
			a.buttonLink {
				width: 90px;
			}
			.header .nav .headerTopFade li:first-child {
				display: block;
			}
			.header .nav .headerTopFade li a {
				padding: 0px 5px;
			}
			.header .nav ul li a {
				margin: 0px 10px;
			}
		/** end header **/
		
		/** main nav **/
			.mainNav { font-size: 1em; }
			.navTitle {
				letter-spacing: 2px;
			}
			.deptNav {
				width: 450px;
			}
			.deptSubNav {
				padding-left: 30px;
			}
			.deptSubNav a {
				padding: 2px;
				margin: 1px 0px;
			}
			.mainNav .topDept > ul li.deptSubNav {
				margin-top: -4px;
			}
			.mainNav .topDept > ul li.deptSubNav ul a {
				padding-top: 4px;
				padding-bottom: 4px;
			}
		/** end main nav **/
		
		/** pageContent **/
		/** pageContent **/
		
		/** footer **/
		/** end footer **/
	/*}*/

	/*@media screen and (min-width: 768px) {*/
		/** header **/
			.header .nav ul.green, .header .nav .ulFade {
				/*width: 70%;*/
				margin-top: 20px;
			}
			.header .nav .ulFade {
				margin: 0px;
			}
			.headerSearchArea {
				margin: 3px 50px 0px 0px;
			}
			.headerSearchArea .searchField {
				width: 55%;
			}
			.headerSearchArea input.buttonLink {
				left: 54%;
			}
		/** end header **/
		
		/** main nav **/
			.mainNav .topDept > ul li.deptSubNav {
				margin-top: -6px;
			}
			.mainNav .topDept > ul li.deptSubNav ul a {
				padding-top: 3px;
				padding-bottom: 3px;
			}
		/** end main nav **/
		
		/** pageContent **/
		/** pageContent **/
		
		/** footer **/
		/** end footer **/
	/*}*/

	/*@media screen and (min-width: 900px) {*/
		/** header **/
			.headerSearchArea input.buttonLink {
				left: 54%;
			}
		/** end header **/
		
		/** main nav **/
			.mainNav .topDept ul {
				padding-left: 20px;
			}
			.mainNav .deptNav ul a {
				padding: 5px 0px;
			}
			.mainNav .topDept > ul li.deptSubNav {
				margin-top: -7px;
			}
			.mainNav .topDept > ul li.deptSubNav ul a {
				padding-top: 2px;
				padding-bottom: 2px;
			}
		/** end main nav **/
		
		/** pageContent **/
		/** pageContent **/
		
		/** footer **/
		/** end footer **/
	/*}*/
	/*@media screen and (min-width: 1200px) {
		.header, .footer, .mainContent {
			max-width: 1150px !important;
		}
		.mainNav {
			width: 18% !important;
		}
		.pageContent, .mainNavLoading {
			width: 81% !important;
		}
	}*/
/******* END STRUCTURE ************/