@import url("fonts/fonts.css");

html {
	height: 100%;
}

body {
	font-family: 'RalewayWeb', sans-serif;
	font-size: 16px;
	line-height: 0.9375em;
	/* margin: 2.5em 0 0; */
	background-color: #e0e4e5;
	/* background: #e0e4e5 url('bgTexture.png') repeat; */

	/*
	position: absolute;
	right: 0;
	top: 0;
	left: 0;
	*/
	position: relative;
	text-align: center;
	margin: 0;

	width: 100%;

	min-height: 100%;
}

	/*
	@media (min-width: 1920px) { body { font-size: 32px; } }
	@media (min-width: 1680px) and (max-width: 1920px) { body { font-size: 28px; } }
	@media (min-width: 1440px) and (max-width: 1680px) { body { font-size: 24px; } }
	@media (min-width: 1200px) and (max-width: 1440px) { body { font-size: 20px; } }
	@media (min-width: 960px) and (max-width: 1200px) { body { font-size: 16px; } }
	@media (min-width: 720px) and (max-width: 960px) { body { font-size: 12px; } }
	@media (min-width: 480px) and (max-width: 720px) { body { font-size: 8px; } }
	*/


	/* @media (min-width: 2112px) { body { font-size: 32px; } }						  /* x2.00 */
	/* @media (min-width: 1920px) and (max-width: 2112px) { body { font-size: 28px; } }  /* x1.75 */
	/* @media (min-width: 1600px) and (max-width: 1920px) { body { font-size: 24px; } }  /* x1.50 */
	/* @media (min-width: 1280px) and (max-width: 1600px) { body { font-size: 20px; } }  /* x1.25 */
	/* @media (min-width: 1024px) and (max-width: 1280px) { body { font-size: 16px; } }  /* x1.00 */
	/* @media (min-width: 844px) and (max-width: 1024px) { body { font-size: 12.8px; } } /* x0.80 */
	/* @media (min-width: 844px) and (max-width: 1024px) { body { font-size: 13px; } } /* x0.8125 */
	/* @media (min-width: 792px) and (max-width: 844px) { body { font-size: 12px; } }	  /* x0.75 */
	/* @media (min-width: 640px) and (max-width: 792px) { body { font-size: 10px; } }	  /* x0.625, minimum */
	/* @media (max-width: 640px) { body { font-size: 10px; min-width: 480px; } }		  /* x0.625, minimum */


	@media (min-width: 2048px) { body { font-size: 32px; } }						  /* x2.00 */
	@media (min-width: 1920px) and (max-width: 2047px) { body { font-size: 28px; } }  /* x1.75 */
	@media (min-width: 1536px) and (max-width: 1919px) { body { font-size: 24px; } }  /* x1.50 */
	@media (min-width: 1440px) and (max-width: 1535px) { body { font-size: 21.333px; } }  /* x1.33 */
	@media (min-width: 1024px) and (max-width: 1439px) { body { font-size: 16px; } }  /* x1.00 */
	@media (min-width: 844px) and (max-width: 1023px) { body { font-size: 13px; } } /* x0.8125 */
	@media (min-width: 768px) and (max-width: 843px) { body { font-size: 12px; } }	  /* x0.75 */
	@media (min-width: 720px) and (max-width: 767px) { body { font-size: 10.667px; } }	  /* x0.667 */
	@media (min-width: 640px) and (max-width: 719px) { body { font-size: 10px; } }	  /* x0.625, minimum */
	@media (max-width: 640px) { body { font-size: 10px; min-width: 480px; } }		  /* x0.625, minimum */

	/*
	@media (min-resolution: 1.5dppx) and (max-width: 320px),
	(min-resolution: 144dpi) and (max-width: 320px),
	(-webkit-min-device-pixel-ratio: 1.5) and (max-width: 320px),
	(-o-min-device-pixel-ratio: 3/2) and (max-width: 320px) {
		body { font-size: 6px; min-width: 100%; }
	}
	*/

	input[type=text],
	textarea {
		font-family: 'RalewayWeb', sans-serif;
		font-size: 1em;
		border: none;
		border-radius: 1em;
		padding: 0.25em 0.5em;
		vertical-align: baseline;
		-webkit-box-shadow: 0.125em 0.125em 0.125em rgba(0, 0, 0, 0.4) inset; /* for Android <4 */
		box-shadow: 0.125em 0.125em 0.125em rgba(0, 0, 0, 0.4) inset;
	}

	input.error[type="text"],
	textarea.error {
		border: 1px solid red;
		background-color: #fff2f2;
	}

	input.valid[type="text"] {
		border: 1px solid green;
		background-color: #f2fff2;
	}

	form .button {
		border: 1px solid #cacecf;
		border-radius: 1em;
		padding: 0.25em 0.375em;
		vertical-align: baseline;
		cursor: pointer;
		background-color: #cacecf;
		color: black;
	}

		form .button:hover {
			color: #0b3f4b;
			background-color: #bfc2c3;
			border-color: #bfc2c3;
		}

	a {
		color: #cb461b;
		text-decoration: none;
	}

		a:hover { color: #0b3f4b; }

	a img { border: none; }

	.clear {
		visibility: hidden;
		clear: both;
		width: 0;
		height: 0;
		display: inline;
	}

	.error { color: red; }

	h1 {
		font-family: 'RalewayWeb';
		font-weight: normal;
		font-size: 1.5em;
		line-height: 1.2083em;
		color: #0b3f4b;
	}

		h1 span.subtitle {
			font-size: 0.6667em;
			color: black;
			margin-left: 1em;
		}

	h5 {
		margin: 1em 0;
		font-size: 1.0em;
		line-height: 1.25em;
		font-weight: normal;
	}

	a.slide { cursor: pointer; }

	.frame {
		border-radius: 1em;
		display: inline-block;
		overflow: hidden;
		max-width: 100%;
		background-color: #808080;

		/* Prevent background color leak outs */
		-webkit-background-clip: padding-box;
		-moz-background-clip:    padding;
		background-clip:         padding-box;
	}

		.frame img {
			display: block;
			margin: auto;
			border-radius: 1em; /* for Android 2 */
			max-width: 100%;
		}

		.frame::before {
			display: block;
			content: '';
			position: absolute;
			width: 100%;
			height: 100%;
			-webkit-box-shadow: 0 0 0.9375em rgba(0, 0, 0, 0.44) inset; /* for Android <4 */
			box-shadow: 0 0 0.9375em rgba(0, 0, 0, 0.44) inset;
			z-index: 10;
			border-radius: 1em; /* for Android 2 */
			pointer-events: none;
			overflow: hidden;
		}

		.frame .caption {
			position: absolute;
			font-size: 0.6875em;
			line-height: 1.4em;
			z-index: 3;
			border-radius: 1.4545em 0 1.4545em 0;
			bottom: 0;
			padding: 0.9em 1.2em;
			right: 0;
			left: 20%;
			background-color: rgba(207,213,214,0.9);
			text-align: left;
			overflow: hidden;
			-webkit-box-shadow: 0 0 0.9375em rgba(0, 0, 0, 0.44); /* for Android <4 */
			box-shadow: 0 0 0.9375em rgba(0, 0, 0, 0.44);
			max-height: 40%;
			overflow-y: auto;
		}

			.frame .caption.topRight {
				border-radius: 0 1.4545em 0 1.4545em;
				bottom: auto;
				top: 0;
			}

			.frame .caption.topLeft {
				bottom: auto;
				top: 0;
				right: 20%;
				left: 0;
			}

			.frame .caption.bottomLeft {
				border-radius: 0 1.4545em 0 1.4545em;
				right: 20%;
				left: 0;
			}

			.frame .caption.bottomRight { /* default */
			}

	.overlayContainer {
		top: 6.25em;
		padding: 1em;
		/* background-color: #d1d6d7; */
		/* background-color: #505050; */
		/* border-radius: 1em; */
		z-index: 1000;
		position: fixed;
		-webkit-box-shadow: 0 0 1em 1px rgba(0, 0, 0, 0.44); /* for Android <4 */
		box-shadow: 0 0 1em 1px rgba(0, 0, 0, 0.44);

		/* stronger shadow for use w/o #overlayShade */
		/* -webkit-box-shadow: 0 0 2em 1px rgba(0, 0, 0, 0.65); /* for Android <4 */
		/* box-shadow: 0 0 2em 1px rgba(0, 0, 0, 0.65);

		/* revised; darker bg, wider margins, rounder corners */
		background: -moz-linear-gradient(top,  rgba(32,32,32,1) 0%, rgba(64,64,64,1) 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(32,32,32,1)), color-stop(100%,rgba(64,64,64,1))); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top,  rgba(32,32,32,1) 0%,rgba(64,64,64,1) 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top,  rgba(32,32,32,1) 0%,rgba(64,64,64,1) 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top,  rgba(32,32,32,1) 0%,rgba(64,64,64,1) 100%); /* IE10+ */
		background: linear-gradient(to bottom,  rgba(32,32,32,1) 0%,rgba(64,64,64,1) 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#202020', endColorstr='#404040',GradientType=0 ); /* IE6-9 */
		border-radius: 2em;
		padding: 1em 1.75em; /* wider margins */
	}

		#slideOverlayContainer .image {
			width: 100%;
			height: 100%;
			-webkit-box-shadow: 0 0 1em 4px rgba(0,0,0,0.44); /* for Android <4 */
			box-shadow: 0 0 1em 4px rgba(0,0,0,0.44);
		}

		.overlayContainer .prev,
		.overlayContainer .next {
			background-size: 1em 1em;
			background-repeat: no-repeat;
			background-position: left center;
			color: transparent;
			cursor: pointer;
			height: 18.75em;
			line-height: 18.75em;
			/* opacity: 0.5; /* dark buttons */
			position: absolute;
			text-align: center;
			top: 1em;
			width: 1.0625em;
		}

			.overlayContainer .prev:hover,
			.overlayContainer .next:hover { opacity: 0.5; }

			.overlayContainer .next {
				/* background-image: url("paginationArrowRight.png"); /* dark buttons */
				background-image: url("overlayArrowRight.png");
				/* right: 0.625em; */
				right: 0.8625em; /* wider margins version */
			}

			.overlayContainer .prev {
				/* background-image: url("paginationArrowLeft.png"); /* dark buttons */
				background-image: url("overlayArrowLeft.png");
				/* left: 0.625em; */
				left: 0.8625em; /* wider margins version */
			}

		.overlayContainer .close {
			background: url('../template/graphics/overlay_close.png') transparent no-repeat top right;
			background-size: 2.25em 2.25em;
			position: absolute;
			/*
			right: -1em;
			top: -1em;
			*/
			cursor: pointer;
			height: 2.1875em;
			width: 2.1875em;
			right: -0.75em; /* wider margins version */
			top: -0.75em; /* wider margins version */
		}

		.overlayContainer #soundcloud-player {
			position: relative;
			margin: 0 1.25em;
			width: 18.75em;
			height: 18.75em;
			overflow: hidden;
			/*
			-webkit-box-shadow: 0 0 1em 1px rgba(0, 0, 0, 0.44);
			box-shadow: 0 0 1em 1px rgba(0, 0, 0, 0.44);
			*/
			/* tighter shadow */
			-webkit-box-shadow: 0 0 0.333em 1px rgba(0, 0, 0, 0.44);
			box-shadow: 0 0 0.333em 1px rgba(0, 0, 0, 0.44);
		}

			.overlayContainer #soundcloud-player .sc-player {
				position: absolute;
				left: 0;
			}

		.overlayContainer #youtube-player.player {
			height: 19.25em;
			margin: 0 1.25em;
			overflow: hidden;
			position: relative;
			width: 32em;
			/*
			-webkit-box-shadow: 0 0 1em 1px rgba(0, 0, 0, 0.44);
			box-shadow: 0 0 1em 1px rgba(0, 0, 0, 0.44);
			*/
			/* tighter shadow */
			-webkit-box-shadow: 0 0 0.333em 1px rgba(0, 0, 0, 0.44);
			box-shadow: 0 0 0.333em 1px rgba(0, 0, 0, 0.44);
		}

	#overlayShade {
		z-index: 999;
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		display: none;
		background-color: #808080;
		opacity: 0.5;
		filter: alpha(opacity=50);
	}


	#mobileSafariFix {
		/*
		position: absolute;
		right: 0;
		top: 0;
		left: 0;
		*/
		position: relative;
		width: 100%;
		text-align: center;
		margin: 0;
		padding-bottom: 1px; /* to work around a WebKit rounding bug, where this element has a height that ends up being an integer */
		                     /* rounded down from the fractional height of its child (when font-size is 21.333px), causing an extra */
		                     /* set of scrollbars.  e.g., when #templateWrapper ends up being 7905.6px tall, this element is 7905px */
		overflow-x: hidden; /* for mobile Safari, which seems to have trouble with overflow on the <body> element                     */
							/* see: http://stackoverflow.com/questions/17767176/overflow-x-value-ignored-in-mobile-safari             */
							/* This is all needed to keep #templateWrapper, with it's negative margins, from spilling out of the page */
	}

		#templateWrapper {
			position: relative;
			/*
			min-width: 60em;
			margin: auto;
			*/
			padding-top: 5em;
			padding-bottom: 7em;

			display: inline-block;
			margin: 0 -9em 7em;
			min-width: 78em;
			width: 100%;

			text-align: left;
		}

			@media (max-width: 620px) {
				#templateWrapper {
					min-width: 0;
					margin: 0;
				}
			}

	#leftMargin,
	#rightMargin {
		position: absolute;
		z-index: 6;
		top: 0;
		bottom: 0;
		width: 9em;
		pointer-events: none;
	}

		@media (max-width: 620px) {
			#leftMargin,
			#rightMargin { display: none; }
		}

	#leftMargin {
		left: -9em;
		left: 0;
		background: -moz-linear-gradient(left,  rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* IE10+ */
		background: linear-gradient(to right,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */
	}

	#rightMargin {
		right: -9em;
		right: 0;
		background: -moz-linear-gradient(left,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* IE10+ */
		background: linear-gradient(to right,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
	}

	#header {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 10em;
		text-align: center;

		/*-webkit-box-shadow: 0 0.09375em 0.09375em rgba(0, 0, 0, 0.18); *//* for Android <4 */
		/* box-shadow: 0 0.09375em 0.09375em rgba(0, 0, 0, 0.18); */

		-webkit-box-shadow: 0 0.09375em 0.35em rgba(0, 0, 0, 0.5); /* for Android <4 */
		box-shadow: 0 0.09375em 0.35em rgba(0, 0, 0, 0.5);

		z-index: 5;

		background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(212,218,218,1) 57%, rgba(207,213,214,0.94) 64%, rgba(207,213,214,0.9) 68%, rgba(207,213,214,0.38) 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(57%,rgba(212,218,218,1)), color-stop(64%,rgba(207,213,214,0.94)), color-stop(68%,rgba(207,213,214,0.9)), color-stop(100%,rgba(207,213,214,0.38))); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(212,218,218,1) 57%,rgba(207,213,214,0.94) 64%,rgba(207,213,214,0.9) 68%,rgba(207,213,214,0.38) 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(212,218,218,1) 57%,rgba(207,213,214,0.94) 64%,rgba(207,213,214,0.9) 68%,rgba(207,213,214,0.38) 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(212,218,218,1) 57%,rgba(207,213,214,0.94) 64%,rgba(207,213,214,0.9) 68%,rgba(207,213,214,0.38) 100%); /* IE10+ */
		background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(212,218,218,1) 57%,rgba(207,213,214,0.94) 64%,rgba(207,213,214,0.9) 68%,rgba(207,213,214,0.38) 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffffff', endColorstr='#61cfd5d6',GradientType=0 ); /* IE6-9 */
	}

		#header .logo {
			width: 51.625em;
			height: 1.9375em;
			z-index: 5;
			position: relative;
			margin-top: 4em;
		}

			@media (max-width: 620px) {
				#header .logo,
				#header .logo img {
					width: 90% !important; /* note that "max-width" doesn't work on SVG items in Android 4 */
				}
			}

			#header .logo path,
			#header .logo polyline {
				stroke-width: 8px; /* in px, b/c the SVG will scale anyway; using ems here will scale doubly */
				/* stroke: #606060; */
				/* stroke: #505050; */
				stroke: #303030;
			}

			#header .logo:hover path,
			#header .logo:hover polyline {
				/*
				stroke-width: 0.125em;
				stroke: white;
				opacity: 0.5;
				transition: stroke-width 0.5s ease-out, stroke 0.5s ease-out, opacity 0.5s ease-out;
				*/
				stroke: #606060;
			}

				@keyframes thump {
					0% {
						stroke-width: 8px; /* in px, b/c the SVG will scale anyway; using ems here will scale doubly */
						stroke: #303030;
						/* opacity: 1; */
					} 20% {
						/* stroke-width: 2px; */
						stroke: white;
						/* opacity: 0.5; */
					} 40% {
						/* stroke-width: 2px; */
						/* stroke: white; */
						opacity: 0.5;
					} 100% {
						stroke-width: 8px; /* in px, b/c the SVG will scale anyway; using ems here will scale doubly */
						stroke: #303030;
						/* opacity: 1; */
					}

				}

			#header .logo path:hover,
			#header .logo polyline:hover {
				/* animation: thump 0.5s ease-in-out; */
			}

			#header .logo img {
				width: 51.5625em;
				margin-top: 4em;
			}

		#nav {
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 100%;
			font-family: 'RalewayWeb';
			font-weight: normal;
			font-size: 1.09375em;
			list-style-type: none;
			padding: 0;
			margin: 0;
		}

			#nav > li {
				display: inline-block;
				height: 100%;
				margin: 0;
				padding: 0;
				background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 100%); /* W3C */
				-webkit-tap-highlight-color: rgba(0,0,0,0); /* for iOS, to hide highlight color */
			}

				/* :hover states in this section replaced with a .hover class, so that hovers can be handled in JS, */
				/* to work around iPad weirdness with iOS's handling of :hover events, which acts right in portrait */
				/* orientation, but seems to fire events in weird places in landscape */

				/* #nav > li.selected, */
				/* #nav > li:hover, */
				/* rgb(212,159,68)/#d49f44 [orange] replaced with rgb(32,32,32)/#202020 [dark grey] */
				#nav > li.hover {
					background: -moz-linear-gradient(top,  rgba(255,255,255,0.8) 0%, rgba(207,213,214,0.8) 64%, rgba(207,213,214,0.8) 98.5%, rgba(32,32,32,1) 98.5001%, rgba(32,32,32,1) 100%); /* FF3.6+ */
					background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.8)), color-stop(64%,rgba(207,213,214,0.8)), color-stop(98.5%,rgba(207,213,214,0.8)), color-stop(98.5001%,rgba(32,32,32,1)), color-stop(100%,rgba(32,32,32,1))); /* Chrome,Safari4+ */
					background: -webkit-linear-gradient(top,  rgba(255,255,255,0.8) 0%,rgba(207,213,214,0.8) 64%,rgba(207,213,214,0.8) 98.5%,rgba(32,32,32,1) 98.5001%,rgba(32,32,32,1) 100%); /* Chrome10+,Safari5.1+ */
					background: -o-linear-gradient(top,  rgba(255,255,255,0.8) 0%,rgba(207,213,214,0.8) 64%,rgba(207,213,214,0.8) 98.5%,rgba(32,32,32,1) 98.5001%,rgba(32,32,32,1) 100%); /* Opera 11.10+ */
					background: -ms-linear-gradient(top,  rgba(255,255,255,0.8) 0%,rgba(207,213,214,0.8) 64%,rgba(207,213,214,0.8) 98.5%,rgba(32,32,32,1) 98.5001%,rgba(32,32,32,1) 100%); /* IE10+ */
					background: linear-gradient(to bottom,  rgba(255,255,255,0.8) 0%,rgba(207,213,214,0.8) 64%,rgba(207,213,214,0.8) 98.5%,rgba(32,32,32,1) 98.5001%,rgba(32,32,32,1) 100%); /* W3C */
					filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ccffffff', endColorstr='#cc202020',GradientType=0 ); /* IE6-9 */
				}

				#nav > li > a {
					display: block;
					position: relative;
					height: 100%;
				}

				#nav > li.submenu > a {
					cursor: default;
					position: relative;
				}

				#nav > li.submenu > a[href] { cursor: pointer; }

				/*
				#nav > li.submenu:hover > a {
					background: url('submenuArrow.png') center bottom no-repeat transparent;
					background-size: 2.1714em 1.4571em;
					z-index: 2;
				}
				*/

				/* #nav > li.submenu:hover > a div.marker, */
				#nav > li.submenu.hover > a div.marker {
					position: absolute;
					width: 100%;
					height: 1em;
					bottom: -1em;
					background: url('downArrow.png') center bottom no-repeat transparent;
					background-size: 1em 1em;
					z-index: 2;
					opacity: 0.35;
				}

					/* #nav > li.submenu:hover ul.submenu, */
					#nav > li.submenu.hover ul.submenu { display: block; }

				#nav > li > a > span {
					display: block;
					padding: 7em 1em 1.143em;
					height: 1em;
				}

			#nav li a {
				color: black;
				text-decoration: none;
				cursor: pointer;
			}

			#nav ul.submenu {
				display: none;
				position: absolute;
				top: 10em;
				/*
				left: 12em;
				right: 12em;
				margin: 0;
				*/
				margin: 0 7em 0 -1em;
				padding: 0 1em;
				z-index: 1;
				list-style-type: none;
				font-size: 0.91429em;
				border-radius: 1em;
				-webkit-box-shadow: 0 0 0.9375em rgba(0, 0, 0, 0.44); /* for Android <4 */
				box-shadow: 0 0 0.9375em rgba(0, 0, 0, 0.44);

				background: rgb(207,213,214);
				background: -moz-linear-gradient(top,  rgba(207,213,214,1) 0%, rgba(207,213,214,0.9) 100%); /* FF3.6+ */
				background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(207,213,214,1)), color-stop(100%,rgba(207,213,214,0.9))); /* Chrome,Safari4+ */
				background: -webkit-linear-gradient(top,  rgba(207,213,214,1) 0%,rgba(207,213,214,0.9) 100%); /* Chrome10+,Safari5.1+ */
				background: -o-linear-gradient(top,  rgba(207,213,214,1) 0%,rgba(207,213,214,0.9) 100%); /* Opera 11.10+ */
				background: -ms-linear-gradient(top,  rgba(207,213,214,1) 0%,rgba(207,213,214,0.9) 100%); /* IE10+ */
				background: linear-gradient(to bottom,  rgba(207,213,214,1) 0%,rgba(207,213,214,0.9) 100%); /* W3C */
				/* no IE<10 here, b/c it interferes with border-radius, and the gradient isn't that important */

				/* for "tucked under" effect" */
				border-radius: 0 0 1em 1em;
				clip: rect(1em,1000em,1000em,-2em);
				top: 9em;
				padding: 1.5em 1em 0;

				/* for fixed-width */
				/*
				margin: 0 0 0 -24em;
				left: 50%;
				width: 48em;
				*/
			}

				/*
				@media (max-width: 844px) { #nav ul.submenu { left: 10em; right: 10em; } }
				@media (max-width: 620px) { #nav ul.submenu { left: 1.5em; right: 1.5em; } }
				*/

				#nav ul.submenu li.shadow {
					position: absolute;
					top: -2em;
					height: 1em;
					left: 0;
					right: 0;
					-webkit-box-shadow: 0 0.09375em 0.35em rgba(0, 0, 0, 0.5); /* for Android <4 */
					box-shadow: 0 0.09375em 0.35em rgba(0, 0, 0, 0.5);
				}

				#nav ul.submenu > li {
					display: inline-block;
					vertical-align: top;
					margin: 2em 0;
				}

					#nav ul.submenu > li.noTitle { margin: 0 0 0.75em; }

				#nav ul.submenu ul {
					padding: 0;
					margin: 1em 1.5em 0;
					list-style-type: none;
					text-align: left;
					font-size: 0.75em;
					/* width: 13em; */
				}

					#nav ul.submenu ul li {
						padding: 0.5em;
						min-height: 2em;
						line-height: 2em;
						max-width: 7.5em;
						position: relative;
					}

						#nav ul.submenu ul li.hasIcon {
							padding-left: 5em;
							min-height: 3em;
							line-height: 3em;
						}

						#nav ul.submenu li.overview {
							display: block;
							margin: 1em 1em -1em;
						}

							#nav ul.submenu li.overview:hover {
								background-color: #e0e4e5;
								border-radius: 1.5em;
							}

							#nav ul.submenu li.overview a {
								display: block;
								padding: 1em;
							}

						#nav ul.submenu ul li:hover {
							background-color: #e0e4e5;
							border-radius: 1.5em;
						}

						#nav ul.submenu ul li > a {
							height: 100%;
							display: block;
						}

						#nav ul.submenu ul li span.title {
							display: inline-block;
							line-height: 1.25em;
							width: 100%;
							vertical-align: middle;
						}

						#nav ul.submenu ul li span.frame {
							position: absolute;
							top: 0.5em;
							left: 0.5em;
							width: 4em;
							height: 3em;
							text-align: center; /* for alt attribute */
						}

							#nav ul.submenu ul li img {
								width: 4em;
								height: 3em;
							}

				#nav ul.submenu.alt {
					background-color: rgba(48,48,48, 0.9);
					color: white;
				}

					#nav ul.submenu.alt a { color: white; }

						#nav ul.submenu.alt ul li:hover { background-color: rgb(96,96,96); }

		.page {
			position: relative;
			width: 60em;
			margin: 0 auto;
			min-height: 40em; /* to keep the footer out of the way of the submenu */
		}

			@media (max-width: 620px) {
				.page{
					width: auto;
					margin: 0 1em;
				}
			}

			div.jp-playlist .container { min-width: 60em; } /* for an iOS bug that causes playlists narrower than the width of the banner area (i.e. <3 cols) to slide to the right when a track is selected */

				@media (max-width: 620px) {
					div.jp-playlist .container { min-width: auto; }
				}

			.bannerArea {
				position: relative;
				z-index: 4;
			}

				.bannerArea .shadow {
					position: absolute;
					left: 0;
					top: 0;
					right: 0;
					bottom: 0;
					-webkit-box-shadow: 0.125em 0.125em 0.9375em rgba(0, 0, 0, 0.44) inset; /* for Android <4 */
					box-shadow: 0.125em 0.125em 0.9375em rgba(0, 0, 0, 0.44) inset;
					pointer-events: none;
					z-index: 3;
				}

					.bannerArea .banner .shadow {
						border-radius: 0 0 0 1.5em;
						z-index: 4;
					}

				.banner {
					position: relative;
					background-color: white;
					height: 25em;
					width: 100%;
					margin: auto;
					border-radius: 0 0 0 1.5em;
					overflow: hidden; /* so contents are clipped by border-radius */

					/* background-image: url('B2_Main_HD.png'); */
					background-size: 60em 30em;
					background-position: top left;
					background-repeat: repeat-y;
				}

					.banner .transitionFromColor {
						z-index: 3;
						transition: opacity 0.5s linear;
						-webkit-transition: opacity 0.5s linear;
						width:100%;
						height:100%;
						border-radius: 0 0 0 1.5em; /* for WebKit */
						position:absolute;
						top:0;
						left:0;
					}

					.banner .slides .bannerBackground.animated {
						animation: bannerScroll 15s linear infinite;
						-webkit-animation: bannerScroll 15s linear infinite;

						/* for hardware acceleration on the above animation */
						-webkit-transform: translateZ(0);
						-moz-transform: translateZ(0);
						-ms-transform: translateZ(0);
						-o-transform: translateZ(0);
						transform: translateZ(0);
					}

						.banner .slides .bannerBackground .foreground {
							z-index: 0;
						}
						.banner .slides .bannerBackground .color {
							z-index: 1;
						}

					.banner .slides .animated:hover {
						/* removed by client request */
						/*
						animation-play-state: paused;
						-webkit-animation-play-state: paused;
						*/
					}

					.banner .slides .animated.paused {

						animation-play-state: paused;
						-webkit-animation-play-state: paused;

					}

					.banner .jp-audio {
						z-index: 1;
					}

					@keyframes bannerScroll {
						from {
							background-position: left 0;
						} to {
							background-position: left -30em;
						}
					}

					@-webkit-keyframes bannerScroll {
						from {
							background-position: left 0;
						} to {
							background-position: left -30em;
						}
					}

					.banner .foreground {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						z-index: 2;
						border-radius: 0 0 0 1.5em;
						overflow: hidden; /* so contents are clipped by border-radius */
					}

				.bannerLink {
					position: absolute;
					top: 0;
					left: 0;
					color: white;
					text-decoration: none;
					text-align: center;

					/*
					padding: 1em;
					margin: 7em 0 0 3em;
					border-radius: 1.5em;
					background-color: #0d3e4c;
					-webkit-box-shadow: 0.125em 0.125em 0.9375em rgba(0, 0, 0, 0.44); /* for Android <4 /
					box-shadow: 0.125em 0.125em 0.9375em rgba(0, 0, 0, 0.44);
					*/

					font-size: 1.25em;
					padding: 0.8em;
					margin: 5.6em 0 0 0;
					border-radius: 0 1.2em 1.2em 0;
					font-weight: bold;
					opacity: 0.75;
					text-transform: uppercase;
					background-color: black;
					-webkit-box-shadow: 0.1em 0.1em 0.75em rgba(0, 0, 0, 0.44); /* for Android <4 */
					box-shadow: 0.1em 0.1em 0.75em rgba(0, 0, 0, 0.44);
				}

				.banner .bannerBackground .slideOverlay {
					display:none;

				}

					.bannerLink:hover {
						background-color: #cb461b;
						color: white;
					}

				.bannerCredit {
					position: absolute;
					text-align: left;
					margin: 0 0 2.5em 5em;
					bottom: 0;
					left: 0;
					color: white;
					text-shadow: 0 0 0.5em rgba(0, 0, 0, 0.75);
					font-size: 0.5em;
				}

					.bannerCredit a { color: white; }
					.bannerCredit a:hover { color: #cb461b; }

				.paginationBar {
					background: url('bannerPaginationBar.png') top left no-repeat;
					background-size: 22.25em 5.5em;
					width: 22.25em;
					height: 5.5em;
					position: absolute;
					right: 0;
					top: 21em;
					z-index: 4;
				}

					/* .paginationBar.single { background-image: url('bannerPaginationBar-empty.png'); } */

					.paginationBar .prev,
					.paginationBar .next {
						position: absolute;
						width: 1em;
						height: 1em;
						top: 2.5em;
						background-position: top left;
						background-size: 1em 1em;
						background-repeat: no-repeat;
						cursor: pointer;
						opacity: 0.75;
					}

					.paginationBar .prev:hover,
					.paginationBar .next:hover { opacity: 1; }

					.paginationBar .prev {
						left: 1.9375em;
						background-image: url('paginationArrowLeft.png');
					}

					.paginationBar .next {
						right: 1em;
						background-image: url('paginationArrowRight.png');
					}

					.paginationBar .dots {
						position: absolute;
						width: 15.28125em;
						height: 1em;
						top: 2.5em;
						left: 3.9375em;
						text-align: center;
					}

						.paginationBar .dots .dot {
							width: 1em;
							height: 1em;
							background: url('paginationDot.png') transparent left top no-repeat;
							background-size: 1em 1em;
							cursor: pointer;
							opacity: 0.35;
							margin: 0 0.3125em;
							display: inline-block;
						}

							.paginationBar .dots .dot.selected { opacity: 0.75; }
							.paginationBar .dots .dot:hover { opacity: 1; }

		#newsletter {
			/* padding: 1.5em 1em 0; */
			padding: 1.5em 3em 0;
			background-color: #d1d6d7;
			border-radius: 1.5em 1em 0 0;
			/* margin: 1.5em 1em 2.5em 0; */
			/* margin: 1.5em 1.5em 3em 0; */
			margin: 1.5em 1em 2.75em 0;
			position: relative;

			/* padding: 1.5em 3em 0; */
			/* text-align: right; */
			padding: 1.5em 0 0;
		}

			@media (max-width: 620px) {
				#newsletter { height: 2.25em; }
			}

			#newsletter .shadow {
				-webkit-box-shadow: 0.125em 0.125em 0.9375em rgba(0, 0, 0, 0.3) inset; /* for Android <4 */
				box-shadow: 0.125em 0.125em 0.9375em rgba(0, 0, 0, 0.3) inset;
				border-radius: 1.5em 1em 0 0;
			}

			#newsletter .grad {
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				z-index: 3;
				background: -moz-linear-gradient(center bottom,  rgba(224,228,229,1) 0%, rgba(224,228,229,0) 100%); /* FF3.6+ */
				background: -webkit-gradient(linear, left bottom, left top, color-stop(0%,rgba(224,228,229,1)), color-stop(100%,rgba(224,228,229,0))); /* Chrome,Safari4+ */
				background: -webkit-linear-gradient(bottom,  rgba(224,228,229,1) 0%,rgba(224,228,229,0) 100%); /* Chrome10+,Safari5.1+ */
				background: -o-linear-gradient(bottom,  rgba(224,228,229,1) 0%,rgba(224,228,229,0) 100%); /* Opera 11.10+ */
				background: -ms-linear-gradient(bottom,  rgba(224,228,229,1) 0%,rgba(224,228,229,0) 100%); /* IE10+ */
				background: linear-gradient(to top,  rgba(224,228,229,1) 0%,rgba(224,228,229,0) 100%); /* W3C */
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00e0e4e5', endColorstr='#e0e4e5',GradientType=0 ); /* IE6-9 */
			}

			#newsletter .inputWrapper { display: inline-block; }

				#newsletter #emailaddr {
					/*
					margin: 0.5em 0.5em 0 1em;
					margin: 0.5em 0.5em 0 0;
					width: 14em;
					*/
					margin: 0 0.5em 0 0;
					/* width: 21em; */
					/* width: 31em; */
					/* width: 29em; */
					width: 31em;
				}
					#newsletter #emailaddrSubmit { display: none; }

					@media (max-width: 620px) {
						#newsletter .inputWrapper {
							position: absolute;
							right: 0em;
							top: 0.125em;
							left: 10em;
							width: auto;
						}
						#newsletter #emailaddr {
							width: 100%; /* left/right positioning w/a width of "auto" doesn't work on text inputs; */
							             /* ...they need an explicit width, which is why we have ".inputWrapper"   */
							             /* which we can use to apply a width of 100% against */
						}
						/*
						#newsletter #emailaddrSubmit {
							position: absolute;
							right: 0;
						}
						*/
					}

			#newsletter #newsletterForm {
				position: relative;
				z-index: 4;
				/* text-align: center; */
				/* margin-bottom: 0.5em; */

				line-height: 1.8125em;
				/* padding-top: 1.5em; */
				display: inline-block;
				/* width: 26.5em; */
				/* vertical-align: top; */
				vertical-align: middle;
				margin-right: 1em;
			}

				@media (max-width: 620px) {
					#newsletter #newsletterForm {
						position: absolute;
						right: 17em;
						left: 0;
					}
				}

			#newsletter h1 {
				/* margin: 0.6667em 0.6667em 2em; */
				/* margin: -0.45em 0.6667em 2em; */
				margin: 0 0.6667em;
				/* padding-top: 0.3333em; */
				display: inline-block;
				float: left;
			}

			#newsletter .social {
				position: relative;
				display: inline-block;
				height: 2.25em;
				z-index: 4;
				/* width: 29.25em; */
				/* padding-top: 1em; */
				vertical-align: middle;
			}

				@media (max-width: 620px) {
					#newsletter .social {
						position: absolute;
						right: 1.5em;
						top: 1.5em;
					}
				}

				#newsletter .social img {
					height: 2.25em;
					opacity: 0.15;
					margin: 0 0 0 0.25em;
				}

					#newsletter .social a:hover img {
						opacity: 0.5;
					}


		#playerArea {
			position: relative;
			margin: 0 auto;
		}

			#playerArea #soundcloud_box {
				margin: 1em;
				height: 5.0625em; /* 81px */
				height: 7.3125em; /* 117px */
			}

				#playerArea #soundcloud_box.showComments .sc-comments .sc-comment { display: block; }

			#playerArea #trackNav {
				position: absolute;
				bottom: 0.25em;
				left: 10em;
				right: 1em;
				white-space: nowrap;
				color: #0b3f4b;
				z-index: 750;
				cursor: pointer;
			}

				#playerArea #trackNav #trackPrev,
				#playerArea #trackNav #trackNext {
					display: block;
					width: 1em;
					height: 1em;
					background-image: url('track_navBtns.png');
					background-repeat: no-repeat;
					background-size: 2em 2em;
					cursor: pointer;
					position: absolute;
					top: 0;
				}
				#playerArea #trackNav #trackPrev { left: -3.75em; background-position: left top; }
				#playerArea #trackNav #trackNext { left: -2em; background-position: right top; }
				#playerArea #trackNav #trackPrev:hover { background-position: left bottom; }
				#playerArea #trackNav #trackNext:hover { background-position: right bottom; }


	div.section { clear: both; }

	div.col {
		padding: 1em 1.25em;
		text-align: justify;

		/* padding-bottom: 5.75em; */ /* to compensate for negative bottom margin on .titleSwish > .boxWrapper   */
		                              /* (the element adds to the flow without adding to height, so it throws    */
		                              /* off the size of elements making use of "height", like the page margins) */
		margin-top: -1em;
		position: relative;
	}

		/* div.col:first-child { padding-top: 8em; } */
		div.section:first-child { padding-top: 7em; }

		div.clear + div.section div.col {
			margin-top: 1em;
		}

		div.bannerArea ~ div.col { padding-top: 1.0em; }

		div.col.left { z-index: 2; }
		div.col.right {
			z-index: 1;
			margin-right: -1px; /* for when browser rounding on em values leads to the floats adding up to 100%+1px */
		}

		.section.home div.col.left {
			width: 27em;
			float: left;
			padding-right: 1em;
			padding-left: 1em;
		}

			.section.home div.col.left .frame,
			.section.home div.col.left > img { max-width: 100%; }

		.section.home div.col.right {
			float: left;
			padding-left: 3em;
			padding-right: 1em;
			width: 27em;
		}

			.section.home div.col.right img { max-width: 100%; }

		@media (max-width: 620px) {

			html .section.home div.col.left,
			html .section.home div.col.right {
				float: none;
				padding-left: 1em;
				padding-right: 1em;
				width: auto;
			}

			html .section.home div.col.left { padding-bottom: 0; }

		}

		.section.product div.col.left {
			width: 43.625em;
			float: left;
			padding-left: 1.375em;
			padding-right: 0;
			/* text-align: left; */

			/**/
			padding-left: 1em;
		}

			/*
			.section.product div.col.left > p > span,
			.section.product div.col.left > ul > li > span {
				display: inline;
				padding-right: 2.66667em;
			}
			*/

			.section.product div.col.left div.titleSwish div.titleWrapper,
			.section.product div.col.left div.titleSwish div.titleWrapper div.box {
				/**/
				/* min-width: 24.125em; */
			}

			.section.product div.col.left .frame,
			.section.product div.col.left .content > img,
			.section.product div.col.left .content > a > img { max-width: 24.125em; }

				.section.product div.col.left .frame.stretchToFill,
				.section.product div.col.left .content > img.stretchToFill,
				.section.product div.col.left .content > a > img.stretchToFill { width: 24.125em; }

					.section.product div.col.left .frame.stretchToFill img { width: 100%; }

			.section.product div.col.left .frame.wide,
			.section.product div.col.left .content > img.wide,
			.section.product div.col.left .content > a > img.wide { max-width: 100%; }

				.section.product div.col.left .frame.wide.stretchToFill,
				.section.product div.col.left .content > img.wide.stretchToFill,
				.section.product div.col.left .content > a > img.wide.stretchToFill { width: 100%; }

					.section.product div.col.left .frame.wide.stretchToFill img { width: 100%; }


		.section.product div.col.right {
			float: left;
			/*
			width: 11.5em;
			width: 12.6875em;
			width: 13.6875em;
			padding-right: 0.0625em;
			padding-left: 1.25em;

			/**/
			padding-left: 2em;
			padding-right: 1em;
			width: 12.375em;
		}

			.section.product div.col.right img { max-width: 100%; }

		@media (max-width: 620px) {

			html .section.product div.col.left,
			html .section.product div.col.right {
				float: none;
				padding-left: 1em;
				padding-right: 1em;
				width: auto;
			}

			html .section.product div.col.left { padding-bottom: 0; }

				.section.product div.col.left .frame,
				.section.product div.col.left > img { max-width: 46%; }

			html div.col .sidebar {
				margin: 0 -1em 1em 2em;
				width: 50%;
			}

		}

		.section.product div.col.right p,
		.section.product div.col.right ul {
			margin-right: 1.5238em;
			/**/
			margin-right: 0;
		}

		div.col * {
			position: relative;
			z-index: 2;
		}

			div.col .collapseContainer {
				position: static;
				z-index: auto;
			}

			div.col .sidebar {
				display: block;
				float: right;
				margin: 0 1em 1em 2em;
				width: 17.5em;
				color: #e2e4e3;
				font-size: 1em;

				/**/
				margin: 0 0 1em 2em;
				z-index: 3; /* to avoid click interference from a titleSwish that this is floating next to */
			}

				div.col .sidebar a:hover { color: white; }

				div.col .sidebar > div {
					border-radius: 1em;
					background-color: #115a6b;
					padding: 1em;
					padding: 1em 1em 1px;
					margin-bottom: 1em;
				}

					div.col .sidebar > div:nth-child(1) { background-color: #0d3e4c; }
					div.col .sidebar > div:nth-child(2) { background-color: #115a6b; }
					div.col .sidebar > div:nth-child(3) { background-color: #16758b; }
					div.col .sidebar > div:nth-child(4) { background-color: #1fa0bf; }

				div.col .sidebar > div h1 {
					margin: 0 0 0.5em 0 !important;
					color: #e2e4e3;
					text-align: left;
				}

			div.col h1 {
				margin: 1.833em 0 0.167em;
				margin: 0.66667em 0 0.167em;
				margin: 2em 0 0.167em;

				clear: both;
			}

				#content.product div.col.left h1 { clear: left; } /* so as not to push below the sidebar */

				/* div.col h1:first-of-type { margin-top: 0.66667em; } */
				div.col > .collapseContainer:first-of-type h1:first-of-type { margin-top: 0.66667em; }

					@media (max-width: 620px) { .section.product div.col.right h1:first-of-type { margin-top: 2em; } }

					/* .section.home div.col h1 { text-align: center; } */

			div.col h5 {
				text-align: left;
				margin-top: 2.66667em;
			}

				div.col h5:first-of-type { margin-top: 1em; }

			div.col > span,
			div.col p,
			div.col ul,
			div.col table {
				font-size: 0.75em;
				line-height: 1.65em;
			}

				div.col > span.frame { font-size: 1em; }

				div.col p .frame,
				div.col p > img ,
				div.col p > a.slide img {
					font-size: 1.3333em;
				}

					/* div.col p .frame img { border-radius: 0.75em; } */

					div.col .frame.right,
					div.col img.right {
						float: right;
						margin-left: 1em;
						margin-bottom: 0.75em;
						margin-top: 0.375em;
					}

					div.col .frame.left,
					div.col img.left {
						float: left;
						margin-right: 1em;
						margin-bottom: 0.75em;
						margin-top: 0.375em;
					}

			div.col table {
				width: 100%;
				border-collapse: collapse;
			}

				div.col table td { padding: 0 0.5em; }

					div.col table td:first-child {
						padding: 0 0.5em 0 0;
					}

					div.col table td:last-child {
						padding: 0 0 0 0.5em;
						text-align: right;
					}

			div.col p,
			div.col ul,
			div.col table {
				margin: 1.333333em 0;
			}

				div.col p.quote {
					font-style: italic;
					line-height: 1.5em;
					margin-bottom: 0;
				}

					div.col p.quote:before,
					div.col p.quote:after {
						/* color: #0c4248; */
						color: #cb461b;
						font-weight: bold;
					}

					div.col p.quote:before { content: '\201c'; }
					div.col p.quote:after { content: '\201d'; }

					div.col p.quote + h6 {
						margin-top: 0;
						text-align: right;
						font-weight: bold;
					}

						div.col p.quote + h6:before { content: '-\00a0'; }

					div.col p.credit {
						text-align: left;
					}

						div.col p.credit span.name {
							color: #0c4248;
							font-weight: bold;
						}

				div.col p.question {
					margin: 2em 0 1em;
					font-size: 1.0em;
					line-height: 1.25em;
					font-weight: normal;
				}

			div.col a { font-weight: bold; }

				div.col h1 a,
				div.col h2 a,
				div.col h3 a,
				div.col h4 a,
				div.col h5 a,
				div.col.grid a { font-weight: normal; }

			div.col ul {
				padding-left: 2em;
			}

				div.col li {
					margin: 1em 0;
				}

			div.col div.grad {
				position: absolute;
				left: 0;
				right: 0;
			}

			div.titleSwish {
				z-index: 1;
				margin-left: -2.25em;
				padding-left: 2.25em;
				margin-right: -1em;

				/**/
				/* display: inline-block; */
				height: 0;
				/* margin-right: -2em; */
				padding-left: 0;
				margin-left: -2em;
				margin-right: 0;
			}

			div.titleSwish div.bg {
				position: absolute;
				width: 2.25em;
				height: 100%;
				left: 0;
				top: 0;
				z-index: 1;
				background: -moz-linear-gradient(top,  rgba(234,237,238,0) 0%, rgba(234,237,238,1) 5.75em, rgba(234,237,238,1) 6.75em, rgba(234,237,238,0) 100%); /* FF3.6+ */
				background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(234,237,238,0)), color-stop(44.66%,rgba(234,237,238,1)), color-stop(52.43%,rgba(234,237,238,1)), color-stop(100%,rgba(234,237,238,0))); /* Chrome,Safari4+ */
				background: -webkit-linear-gradient(top,  rgba(234,237,238,0) 0%,rgba(234,237,238,1) 5.75em,rgba(234,237,238,1) 6.75em,rgba(234,237,238,0) 100%); /* Chrome10+,Safari5.1+ */
				background: -o-linear-gradient(top,  rgba(234,237,238,0) 0%,rgba(234,237,238,1) 5.75em,rgba(234,237,238,1) 6.75em,rgba(234,237,238,0) 100%); /* Opera 11.10+ */
				background: -ms-linear-gradient(top,  rgba(234,237,238,0) 0%,rgba(234,237,238,1) 5.75em,rgba(234,237,238,1) 6.75em,rgba(234,237,238,0) 100%); /* IE10+ */
				background: linear-gradient(to bottom,  rgba(234,237,238,0) 0%,rgba(234,237,238,1) 5.75em,rgba(234,237,238,1) 6.75em,rgba(234,237,238,0) 100%); /* W3C */
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00eaedee', endColorstr='#ffeaedee',GradientType=0 ); /* IE6-9 */

				/**/
				top: -5.75em;
				height: 12.875em;

				left: -2em;
				width: 4.25em;
			}

				div.titleSwish div.bg div.grad {
					top: 0;
					bottom: 0;
					background: -moz-linear-gradient(left,  rgba(224,228,229,1) 0%, rgba(224,228,229,0) 100%); /* FF3.6+ */
					background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(224,228,229,1)), color-stop(100%,rgba(224,228,229,0))); /* Chrome,Safari4+ */
					background: -webkit-linear-gradient(left,  rgba(224,228,229,1) 0%,rgba(224,228,229,0) 100%); /* Chrome10+,Safari5.1+ */
					background: -o-linear-gradient(left,  rgba(224,228,229,1) 0%,rgba(224,228,229,0) 100%); /* Opera 11.10+ */
					background: -ms-linear-gradient(left,  rgba(224,228,229,1) 0%,rgba(224,228,229,0) 100%); /* IE10+ */
					background: linear-gradient(to right,  rgba(224,228,229,1) 0%,rgba(224,228,229,0) 100%); /* W3C */
					filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0e4e5', endColorstr='#00e0e4e5',GradientType=1 ); /* IE6-9 */
				}

			div.titleWrapper {
				/*width: 100%;*/

				position: relative;
				overflow-x: hidden;
				padding-right: 1.0em;
				margin-top: -1.0em;
				margin-top: -5.75em;
				position: relative;
				z-index: 1;

				margin-top: 0;
				top: -5.75em;

				/**/
				/* position: absolute; */
				margin-top: 0;
				left: 2.25em;
				padding-right: 1.25em;
			}

				div.titleWrapper div.box {
					border-radius: 0 0 1.5em 0;
					background-color: rgb(234,237,238);
					-webkit-box-shadow: 0.125em 0.125em 0.9375em rgba(0, 0, 0, 0.15); /* for Android <4 */
					box-shadow: 0.125em 0.125em 0.9375em rgba(0, 0, 0, 0.15);
					padding-top: 4.0em;
					margin-bottom: 1.0em;
					height: 1.75em;
					overflow: visible;
				}

				div.titleWrapper div.grad {
					background: -moz-linear-gradient(bottom,  rgba(224,228,229,0) 0%, rgba(224,228,229,1) 100%); /* FF3.6+ */
					background: -webkit-gradient(linear, left bottom, left top, color-stop(0%,rgba(224,228,229,0)), color-stop(100%,rgba(224,228,229,1))); /* Chrome,Safari4+ */
					background: -webkit-linear-gradient(bottom,  rgba(224,228,229,0) 0%,rgba(224,228,229,1) 100%); /* Chrome10+,Safari5.1+ */
					background: -o-linear-gradient(bottom,  rgba(224,228,229,0) 0%,rgba(224,228,229,1) 100%); /* Opera 11.10+ */
					background: -ms-linear-gradient(bottom,  rgba(224,228,229,0) 0%,rgba(224,228,229,1) 100%); /* IE10+ */
					background: linear-gradient(bottom,  rgba(224,228,229,0) 0%,rgba(224,228,229,1) 100%); /* W3C */
					filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffe0e4e5', endColorstr='#00e0e4e5',GradientType=0 ); /* IE6-9 */
					bottom: 1.0em;
					right: 0.25em;
					top: 0;
				}

			div.boxWrapper {
				width: 1.0em;
				overflow-x: hidden;
				padding-left: 1.0em;
				padding-top: 1.0em;
				position: relative;
				z-index: 2;
				margin: -1.0em 0 -6.75em -1.375em;
				margin: -1.0em 0 -6.75em 0;
				left: -1.375em;

				margin: -1.0em 0 -12.5em 0;
				top: -5.75em;

				/**/
				position: absolute;
				left: 1em;
				top: 0;
				margin: 0;
			}

				div.boxWrapper div.box {
					padding: 1.0em 1.5em 0 1.0em;
					padding: 1.0em 1.5em 0 1.375em;
					padding: 0.375em 1.5em 0 1.375em;
					margin-left: -1.0em;
					margin-top: -1.0em;
					background-color: rgb(224,228,229);
					color: #666;
					border-radius: 1.5em 0 0 0;
					-webkit-box-shadow: 0.125em 0.125em 0.9375em rgba(0, 0, 0, 0.15) inset; /* for Android <4 */
					box-shadow: 0.125em 0.125em 0.9375em rgba(0, 0, 0, 0.15) inset;
					width: 100%;
					height: 6.75em;
				}

					div.boxWrapper div.grad {
						background: -moz-linear-gradient(top,  rgba(224,228,229,0) 0%, rgba(224,228,229,1) 6.75em, rgba(224,228,229,1) 100%); /* FF3.6+ */
						background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(224,228,229,0)), color-stop(100%,rgba(224,228,229,1))); /* Chrome,Safari4+ */
						background: -webkit-linear-gradient(top,  rgba(224,228,229,0) 0%,rgba(224,228,229,1) 6.75em,rgba(224,228,229,1) 100%); /* Chrome10+,Safari5.1+ */
						background: -o-linear-gradient(top,  rgba(224,228,229,0) 0%,rgba(224,228,229,1) 6.75em,rgba(224,228,229,1) 100%); /* Opera 11.10+ */
						background: -ms-linear-gradient(top,  rgba(224,228,229,0) 0%,rgba(224,228,229,1) 6.75em,rgba(224,228,229,1) 100%); /* IE10+ */
						background: linear-gradient(to bottom,  rgba(224,228,229,0) 0%,rgba(224,228,229,1) 6.75em,rgba(224,228,229,1) 100%); /* W3C */
						filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00e0e4e5', endColorstr='#ffe0e4e5',GradientType=0 ); /* IE6-9 */
						top: 1.0em;
						bottom: 0;
					}

		div.newsItem {
			margin-bottom: 2em;
		}

			div.newsItem .frame {
				float: left;
				margin: 0 1em 0.5em 0;
			}

				div.newsItem .frame img {
					width: 7.5em;
					height: 7.5em;
				}

			div.newsItem .date {
				display: block;
				color: #0b3f4b;
				font-size: 0.8em;
			}

			div.newsItem p a:last-child {
				margin-left: 0.5em;
			}

		div.tweet {
			margin: 1em 0 2em;
			padding-left: 3.5em;
		}

			div.tweet .twitter_avatar {
				border-radius: 0.5em; /* for Android 2 */
				margin-left: -3.5em;
				width: 3em;
				height: 3em;
				float: left;
			}

			div.tweet .twitter_avatar::before {
				display: block;
				content: '';
				position: absolute;
				width: 100%;
				height: 100%;
				-webkit-box-shadow: 0 0 0.9375em rgba(0, 0, 0, 0.44) inset; /* for Android <4 */
				box-shadow: 0 0 0.9375em rgba(0, 0, 0, 0.44) inset;
				z-index: 10;
				border-radius: 0.5em; /* for Android 2 */
				pointer-events: none;
				overflow: hidden;
			}

			#content.home div.tweet .name { display: none; }

			div.tweet a { color: #0b3f4b; }
			div.tweet a:hover { color: #cb461b; }

			div.tweet .twitterLink {
				text-align: right;
				float: right;
				font-size: 0.75em;
			}

				div.tweet .twitterLink a { color: #cb461b; }
				div.tweet .twitterLink a:hover { color: #0b3f4b; }

			div.tweet p.text {
				line-height: 1.45em;
				margin: 0;
			}

			div.tweet .name,
			div.tweet .date {
				color: #0b3f4b;
				font-size: 0.75em;
			}

			div.tweet .name { display: block; }

			div.tweet .date { display: inline-block; }

			a.moreTweets {
				font-size: 0.75em;
				margin-bottom: 3em;
				display: block;
				text-align: center;
			}


	div.col .subcol.left {
		width: 27em;
		float: left;
		padding-right: 1em;
		padding-left: 0;
	}

	div.col .subcol.right {
		float: left;
		padding-left: 2.5em;
		padding-right: 0;
		width: 27em;
	}

	@media (max-width: 620px) {

		html div.col .subcol.left,
		html div.col .subcol.right {
			float: none;
			padding-left: 1em;
			padding-right: 1em;
			width: auto;
		}

		html div.col .subcol.left { padding-bottom: 0; }

	}

	.twitter .moreTweets {
		clear: both;
		cursor: pointer;
		padding: 1em;
	}

	div.grid {
		/*
		padding: 8.0em 0;
		margin-top: -1em;
		position: relative;
		*/
	}

		div.grid:after { /* float clearing; can't use "overflow:auto" b/c the .titleSwishes deliberately leak */
			content: ".";
			display: block;
			height: 0;
			clear: both;
			visibility: hidden;
		}

		div.grid > .collapseContainer { /* float clearing; can't use "overflow:auto" b/c the .titleSwishes deliberately leak */
			clear: both;
		}

		div.grid h1 {
			clear: left;
		}

		div.grid .titleSwish {
			margin-bottom: 0.75em;
		}

		.itemsquare {
			position: relative;
			display: block;
			float: left;
			margin: 0.5em 0.75em 4.5em;
			cursor: pointer;
			text-decoration: none;
			color: black;
			background-color: #808080;

			border-radius: 1em;
			/* overflow: hidden; */

			/* Prevent background color leak outs */
			-webkit-background-clip: padding-box;
			-moz-background-clip:    padding;
			background-clip:         padding-box;
		}

			.itemsquare.youtube { background-color: black; }

			.itemsquare:hover {
				text-decoration: none;
				color: black;
			}

			.itemsquare,
			.itemsquare > img {
				width: 12.875em;
				height: 12.875em;
			}

			.itemsquare img {
				display: block;
				margin: auto;
				border-radius: 1em; /* for Android 2 */
				max-width: 100%;
				max-height: 100%;
			}

			.itemsquare.youtube img { border-radius: 0; }

			.itemsquare::before {
				display: block;
				content: '';
				position: absolute;
				width: 100%;
				height: 100%;
				-webkit-box-shadow: 0 0 0.9375em rgba(0, 0, 0, 0.44) inset; /* for Android <4 */
				box-shadow: 0 0 0.9375em rgba(0, 0, 0, 0.44) inset;
				z-index: 10;
				border-radius: 1em; /* for Android 2 */
				pointer-events: none;
				overflow: hidden;
			}

			.itemsquare .imagebox {
				line-height: 12.875em;
			}

			.itemsquare .imagebox img {
				width: 100%;
				display: inline;
				vertical-align: middle;
			}

			.itemsquare.medium,
			.itemsquare.medium > img {
				width: 10em;
				height: 10em;
			}
			.itemsquare.small,
			.itemsquare.small > img {
				width: 8.08333em;
				height: 8.08333em;
			}

			.itemsquare .nameribbon {
				position: absolute;
				left: 0;
				bottom: -2.25em;
				height: 2em;
				line-height: 1.25em;
				display: block;
				text-align: left;
				padding: 0 0.25em;
			}

				.itemsquare .nameribbon.externalLink { color: #0b3f4b; }

			.itemsquare .descriptionbox {
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 0;
				vertical-align: bottom;
				/* display: none; */
				overflow: hidden;

				border-radius: 1em;
				background-color: rgba(207,213,214,0.9);

				/* -webkit-box-shadow: 0 0 0.9375em rgba(0, 0, 0, 0.44); */ /* for Android <4 */
				/* box-shadow: 0 0 0.9375em rgba(0, 0, 0, 0.44); */
				/* overflow-y: auto; */
			}

				.no-touch .itemsquare:hover .descriptionbox {
					height: 100%;
					-webkit-transition: height 0.33s ease-in-out;
					transition: height 0.33s ease-in-out;
				}

				.itemsquare .descriptionbox .description {
					padding: 0.72727em 1.2em;
					display: block;
					font-size: 0.6875em;
				}


	#footer {
		position: relative;
		width: 100%;
		clear: both;
		text-align: center;
		/* z-index: 5; */ /* below page margins */
		z-index: 7; /* above page margins */

		/* border-top: 0.125em solid rgba(255,255,255,0.6); /* light & dark footer */
		border-top: 0.125em solid white; /* color footer */

		/* light footer */
		/* background: -moz-linear-gradient(top,  rgba(195,204,206,0.35) 0%, rgba(195,204,206,1) 62%, rgba(195,204,206,1) 100%); /* FF3.6+ */
		/* background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(195,204,206,0.35)), color-stop(62%,rgba(195,204,206,1)), color-stop(100%,rgba(195,204,206,1))); /* Chrome,Safari4+ */
		/* background: -webkit-linear-gradient(top,  rgba(195,204,206,0.35) 0%,rgba(195,204,206,1) 62%,rgba(195,204,206,1) 100%); /* Chrome10+,Safari5.1+ */
		/* background: -o-linear-gradient(top,  rgba(195,204,206,0.35) 0%,rgba(195,204,206,1) 62%,rgba(195,204,206,1) 100%); /* Opera 11.10+ */
		/* background: -ms-linear-gradient(top,  rgba(195,204,206,0.35) 0%,rgba(195,204,206,1) 62%,rgba(195,204,206,1) 100%); /* IE10+ */
		/* background: linear-gradient(to bottom,  rgba(195,204,206,0.35) 0%,rgba(195,204,206,1) 62%,rgba(195,204,206,1) 100%); /* W3C */
		/* filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#59c3ccce', endColorstr='#c3ccce',GradientType=0 ); /* IE6-9 */

		/* dark footer */
		/* background: -moz-linear-gradient(top,  rgba(121,127,128,0.55) 0%, rgba(121,127,128,1) 62%, rgba(121,127,128,1) 100%); /* FF3.6+ */
		/* background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(121,127,128,0.55)), color-stop(62%,rgba(121,127,128,1)), color-stop(100%,rgba(121,127,128,1))); /* Chrome,Safari4+ */
		/* background: -webkit-linear-gradient(top,  rgba(121,127,128,0.55) 0%,rgba(121,127,128,1) 62%,rgba(121,127,128,1) 100%); /* Chrome10+,Safari5.1+ */
		/* background: -o-linear-gradient(top,  rgba(121,127,128,0.55) 0%,rgba(121,127,128,1) 62%,rgba(121,127,128,1) 100%); /* Opera 11.10+ */
		/* background: -ms-linear-gradient(top,  rgba(121,127,128,0.55) 0%,rgba(121,127,128,1) 62%,rgba(121,127,128,1) 100%); /* IE10+ */
		/* background: linear-gradient(to bottom,  rgba(121,127,128,0.55) 0%,rgba(121,127,128,1) 62%,rgba(121,127,128,1) 100%); /* W3C */
		/* filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8c797f80', endColorstr='#797f80',GradientType=0 ); /* IE6-9 */

		/* colour footer (yuck) */
		background: -moz-linear-gradient(top,  rgba(32,32,32,1) 0%, rgba(64,64,64,1) 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(32,32,32,1)), color-stop(100%,rgba(64,64,64,1))); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top,  rgba(32,32,32,1) 0%,rgba(64,64,64,1) 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top,  rgba(32,32,32,1) 0%,rgba(64,64,64,1) 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top,  rgba(32,32,32,1) 0%,rgba(64,64,64,1) 100%); /* IE10+ */
		background: linear-gradient(to bottom,  rgba(32,32,32,1) 0%,rgba(64,64,64,1) 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#202020', endColorstr='#404040',GradientType=0 ); /* IE6-9 */

		color: white; /* colour footer */
	}

		#footer .logo {
			/*
			width: 22.5em;
			height: 0.84443em;
			margin: 1em auto 2em;
			*/
			z-index: 5;
			position: relative;

			/* make the logo bigger */
			width: 40em;
			height: 1.5em;
			margin: 2em auto;
		}

			#footer .logo path,
			#footer .logo polyline {
				/* stroke: #606060; /* light footer */
				/* stroke: #303030; /* dark footer */
				stroke: white; /* colour footer */
			}

			@media (max-width: 620px) { #footer .logo { margin-bottom: 1em; } }

			#footer .logo img {
				/*
				width: 22.5em;
				margin-top: 1em;
				*/

				/* make the logo bigger */
				width: 40em;
				margin-top: 2em;
			}

				@media (max-width: 620px) {
					#footer .logo,
					#footer .logo img { max-width: 90%; }
				}

		#footer ul {
			padding: 0;
		}

		#footer ul.navigation {
			display: inline-block;
			font-size: 0.6875em;
			width: 100%;
			margin: 0;
		}

			#footer ul.navigation li {
				list-style: none;
				text-align: left;
			}

			#footer ul.navigation > li {
				margin: 0 0.727272em 2em;
				display: inline-block;
				vertical-align: top;
			}

				@media (max-width: 620px) { #footer ul.navigation > li { margin: 1em 0.727272em; } }

			/* #footer ul.navigation a { color: black; } /* light & dark footer */
			/* #footer ul.navigation a { color: #c0c0c0; } /* colour footer */
			#footer ul.navigation a { color: #a0a0a0; } /* colour footer; client change */

				/* #footer ul.navigation a:hover { color: #0b3f4b; } /* light footer */
				/* #footer ul.navigation a:hover { color: white; } /* dark footer */
				#footer ul.navigation a:hover { color: #cb461b; } /* colour footer */

			#footer ul.navigation ul {
				float: left;
				margin: 0 0.5em;
			}

			#footer ul.navigation ul > li.sectionTitle {
				margin-bottom: 0.125em;
				/* border-bottom: 1px solid black; /* light & dark footer */
				/* border-bottom: 1px solid white; /* colour footer */
			}

			#footer ul.navigation ul > li:first-child {
				padding-top: 1.818181818em;
			}

			#footer ul.navigation ul:first-child > li:first-child {
				font-size: 1.27273em;
				padding-top: 0;
				padding-bottom: 0.375em;
			}

				#footer ul.navigation ul:first-child > li:first-child a { color: white; }
				#footer ul.navigation ul:first-child > li:first-child a:hover { color: #cb461b; }

#contactForm {
	font-size: 0.75em;
	line-height: 1.65em;
}

	#contactForm .leftSide {
		float: left;
		width: 23.6667em;
	}

	#contactForm .rightSide {
		float: right;
		padding: 0 0 0 1.3333em;
		width: 51.6667em;
	}

	#contactForm h1 {
	}

	#contactForm h5 {
		font-size: 1.3333em;
		display: inline-block;
		margin-right: 1em;
		margin-bottom: 0.5em;
		color: black;
	}

	#contactForm #emailaddr {
		width: 20em;
		margin-bottom: 1.5em;
	}

	#contactForm label {
		cursor: pointer;
	}

	#contactForm label.heading {
		display: block;
		color: #0b3f4b;
	}

	#contactForm textarea {
		width: 51em;
		height: 30em;
	}

	#contactForm .captcha {
		clear: both;
		padding: 1.5em 0 3em;
	}

	#contactForm .recaptcha_image_cell {
		border-radius: 1em;
	}

	#contactForm .recaptchatable,
	#contactForm .recaptchatable #recaptcha_image { border: none !important; }

	#contactForm .recaptchatable #recaptcha_response_field {
		margin-top: 0.5em;
		font-size: 1em;
	}

	#contactForm .recaptchatable a { color: #cb461b; }
	#contactForm .recaptchatable a:hover { font-weight: bold; color: #0b3f4b; }

	#contactForm #emailaddrSubmit {
		font-size: 1.333em;
		margin-top: 2em;
		padding: 0.5em 1em;
		display: inline-block;
		font-weight: normal;
	}



/* ---------- patch.css stuff ---------- */

.sidebar .titleSwish {
	display:none;
}

.bannerLink,
.bannerCredit {
	z-index: 2;
}

.banner .jp-audio  {
	z-index: 2;
}

div.col .sidebar {
	z-index:3;
}

.overlayContainer #soundcloud-player .sc-player.prev-player {
	left: -21.25em;
}


.overlayContainer #soundcloud-player .sc-player.next-player {
	left: 21.25em;
}

.banner .bannerBackground,
.banner .bannerBackground .color {
	border-radius: 0 0 0 1.5em; /* for WebKit */
}

.banner .bannerBackground,
.banner .slides {
	width:100%;
	height:100%;
}

.banner .slides {
	position:relative;
	z-index:2;
	height: 25em;
}

.banner .slides.stacked {
	/* width: 100% !important;*/
	-webkit-transform:none !important;
	transform: none !important;
}


.banner .slides  .bannerBackground {
	/*position:absolute !important;
	top:0 !important;
	left:0 !important;
	float: none !important;
	z-index: 0;*/
	transition: opacity 0.5s linear;
	-webkit-transition: opacity 0.5s linear;

}


.banner .slides  .bannerBackground .color {
	transition: opacity 0.5s linear;
	-webkit-transition: opacity 0.5s linear;
	width: 100%;
	height: 100%;
	-webkit-transform: translate3d(0,0,0);
	-moz-transform: translate3d(0,0,0);
	-ms-transform: translate3d(0,0,0);
	-o-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
	opacity:0;
	position:absolute;
	top:0;
	left:0;
}

.banner .slides  .bannerBackground .color.fromColor {
	opacity:1;
}


.paginationBar .dots .dot.active { opacity: 0.75; cursor: default; }

.paginationBar .next a,
.paginationBar .prev a {
	display:block;
	width:100%;
	height:100%;
}

.foreground {
	 pointer-events: none;
}

.foregroundTest {
	width: 100%;
	height:100%;
	overflow: hidden;
	left: 0;
	position: absolute;
	top: 0;
	z-index: 4;
}


.foregroundTest .text {
	position:absolute;
	top:0;
	left: 60em;
	width: 30em;
	line-height: 15em;
	font-size: 2em;
	color: #ffffff;
	animation: foregroundbannerScrollTest 30s linear infinite;
	-webkit-animation: foregroundbannerScrollTest 30s linear infinite;
}

@keyframes foregroundbannerScrollTest {
	from {
		left: 60em;
	} to {
		left: 0;
	}
}

@-webkit-keyframes foregroundbannerScrollTest {
	from {
		left: 60em;
	} to {
		left: 0;
	}
}

.paused {
   -ms-animation-play-state:paused;
   -o-animation-play-state:paused;
   -moz-animation-play-state:paused;
   -webkit-animation-play-state:paused;
  animation-play-state: paused;
}


.collapsible .content {
	display: block;
}
.collapsible.collapsed .content {
	display: none;
}

.collapseContainer.collapsible { /* to leave room for the titleSwish gradients */
	min-height: 3.8125em;
	margin-bottom: 1em;
}

.collapseContainer.collapsible .titleBar {
	cursor: pointer;
	padding-right: 1.3333em;
	padding-right: 2.75em;
}

	/* for text under the titleSwish
	.collapseContainer.collapsible.collapsed .titleBar {
		margin-bottom: -1em;
		padding-bottom: 1.16667em;
	}
	*/

	.collapseContainer.collapsible .titleBar:after {
		content: 'less';
		display: block;
		position: absolute;
		/* width: 1.3333em; */
		padding-right: 2.25em;
		height: 1.5em;
		color: transparent;
		opacity: 0.25;
		top: 0.75em;
		right: 0;
		font-size: 0.444em;
		font-weight: bold;
		line-height: 1.40625em;
		background: url('expandCollapse.png') no-repeat right bottom;
		background-size: 1.5em 3em;
	}

		.collapseContainer.collapsible.collapsed .titleBar:after {
			content: 'more';
			background-position: right top;
		}

		.collapseContainer.collapsible .titleBar:hover:after {
			opacity: 0.5;
			color: black;
		}

		.sidebar + .collapseContainer.collapsible .titleBar,
		.sidebar + .collapseContainer .collapseContainer.collapsible .titleBar { width: 13.25em; }

/* for text under the titleSwish
.collapseContainer.collapsed .titleSwish:after {
	content: "\002228 \0000a0 More \0000a0 \002228";
	content: "More... \00003E";
	display: block;
	font-size: 0.75em;
	position: absolute;
	z-index: 4;
	text-align: center;
	width: 100%;
	color: black;
	top: 0.25em;
	left: 3.25em;
	opacity: 0.5;
}

	.section.product .col .collapseContainer.collapsed .titleSwish:after {
		text-align: left;
		left: 3.75em;
	}
*/