/**
 * SAAM.CSS
 * 
 * @note		This file holds core styles for layout and overall site design. 
 * 				This document is commented in a method defined by cssDoc: http://cssdoc.net/
 * @author		NavigationArts (tstephens@navigationarts.com)
 **/

/*
 * @note	debugging grid info.
 */
html {
	height: 101%;
}

#grid {
	background: url(../img/grid.png) top left repeat-y;
	width: 960px;
	top: 0;
	left: 50%;
	margin-left: -480px;
	position: absolute;
	z-index: 200;
}

body {
	margin: 0;
	padding: 0;
	background: #bababa;
}


@media screen {
/** 
 * @section		CONTAINER
 **/
	#container {
		width: 960px;
		position: relative;
		margin: 0 auto;
		background: #fff;
		overflow:visible
	}
		.templateHome #container {
			background: none;
			overflow:visible
		}


/** 
 * @section		BRANDING
 * @note		the branding div only contains the logo, but it's sized large enough to
 * 				house the NAV section as well. NAV is absolutly positioned overtop BRANDING
 **/
	/**
	 * @note	alpha level transparent PNG for the background gradient. a class on #CONTAINER
	 * 			will render the colors of the page, by default it's black and white.
	 **/
	#branding {
		border: 1px solid #000;
		border-width: 4px 0 6px 0;
		height: 123px;
		background: #666 url(../img/bgBrandingGradient.png) top left repeat-x;
		overflow:visible
	}
		/*
		 * @workaround	IE6 PNG hack
		 */
		* html #branding {
			background: #666;
			filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/@res/img/bgBrandingGradient.png', sizingMethod='scale');
		}
		/**
		 * @note	alpha level transparent PNG for the background of the logo DIV. the image inline
		 * 			is for printing, this image is for display on screen. it is a PNG so we dont have
		 * 			to create a new logo per color scheme.
		 **/
		#brandingLogo {
			margin: 10px 0 0 40px;
			width: 458px;
			height: 57px;
			background: url(../img/saamLogoScreen.png) top left no-repeat;
		}
			.templateHome #brandingLogo {
				margin: 10px 0 0 40px;
			}
		/*
		 * @workaround	IE6 PNG hack
		 */
		* html #brandingLogo {
			background: none;
			filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/@res/img/saamLogoScreen.png', sizingMethod='scale');
		}
			#brandingLogo a {
				width: 458px;
				height: 57px;
				display: block;
			}
				#brandingLogo a img {
					display: none;
				}


/** 
 * @section		NAVIGATION
 **/
	#nav {
		position: absolute;
		top: 135px;
		left: 232px;
		width: 715px;
		height: 37px;
		overflow:visible;
		z-index: 500;
	}


/** 
 * @section		GLOBAL NAVIGATION
 * @note		navigation in the upper right of the page.
 **/
	#navGlobal {
		position: absolute;
		top: -83px;
		right: 20px;
	}
		/*
		 * @workaround	IE6 needed completely different positoining.
		 */
		* html #navGlobal {
			position: relative;
			background: #666;
			z-index: 100;
			top: -165px;
			zoom: 1;
		}
		#navGlobal ul {
			margin: 0;
			padding: 0;
			list-style: none;
		}
			/*
			 * @workaround	IE6 #navGlobal is 100% wide, so to position the links right, we're floating the UL.
			 */
			* html #navGlobal ul {
				float: right;
			}
		#navGlobal li {
			display: inline;
			padding: 0 10px 0 9px;
			background: url(../img/bgNavGlobalDivider.gif) 100% 8px no-repeat;
			float: left;
		}
			/*
			 * @workaround	positioining is different in Safari.
			 */
			.isSafari #navGlobal li,
			.isOpera #navGlobal li {
				background-position: 100% 3px;
			}
			/*
			 * @workaround	positioning is different
			 */
			*+html #navGlobal li {
				background-position: 100% 4px;
				padding-bottom: 10px;
			}
			#navGlobal li:last-child,
			#navGlobal li.lastChild {
				background: none;
			}
		#navGlobal a {
			color: #ffe28d;
			font: normal 11px/11px "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif;
			text-decoration: none;
		}
			#navGlobal a:hover {
				text-decoration: underline;
			}


/** 
 * @section		MAIN NAVIGATION
 * @note		navigation elements in the bright yellow bar at the top of the page.
 **/
	#navMain {
		height: 35px;
		background: #cc9700;
		float: left;
		width: 710px;
		overflow: visible;
	}
	
		#navMain ul {
			margin: 0;
			padding: 0 14px;
			list-style: none;
			background: #ffc210;
			float: left;
			width: 960px; /* will be clipped from #navMain, but this allows font resizing without consequence */
		}

		/**
		 * @note	the padding on the LI creates the tab look to the main nav. the left padding
		 * 			is so the on state doesn't overlap the dividing elements.
		 **/
		#navMain li {
			float: left;
			background: url(../img/bgNavMainDivider.gif) 0 14px no-repeat;
			padding: 4px 0 0 2px;
		}
			#navMain li:first-child,
			#navMain li.firstChild {
				background-image: none;
				padding: 4px 0 0 0;
			}
		#navMain a {
			float: left;
			color: #252525;
			font: normal 12px/12px "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif;
			text-decoration: none;
			padding: 9px 14px 10px 15px;
		}
			#navMain li.on a,
			#navMain li a:hover {
				background-color: #000;
				color: #fff;
			}


/** 
 * @section		SEARCH LINKS AND FORM
 * @note		flows right after NAVMAIN. this contains the search form and the two links above it.
 * 				because of the two links above the form it has a negative top positioning.
 **/
	#navSearch {
		position: absolute;
		right: -2px;
		top: -45px;
		width: 250px;
		overflow: hidden;
	}
		/**
		 * @note	JS renders the content of the label in the form field.
		 **/
		#navSearch label {
			display: none;
		}
		/**
		 * @note	the UL is for the links above the search form.
		 **/
		#navSearch ul {
			margin: 0;
			padding: 0;
			list-style: none;
		}
			#navSearch li {
				float: left;
				padding: 0 15px 1px 15px;
				background: url(../img/bgNavSearchDivider.gif) top left no-repeat;
			}
				#navSearch li:first-child,
				#navSearch li.firstChild {
					padding-bottom: 20px;
				}
			#navSearch a {
				text-decoration: none;
			}
			#navSearch span.label {
				color: #fff;
				font: normal 10px/10px "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif;
				display: block;
				padding: 1px 0 4px 0;
			}
			#navSearch span.action {
				color: #ffe28d;
				font: normal 10px/10px "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif;
				display: block;
				background: url(../img/bgNavSearchLink.gif) left no-repeat;
				padding: 0 0 0 7px;
			}
				#navSearch a:hover span.action {
					text-decoration: underline;
				}
		
		#navSearch form {
			padding: 0;
			margin: 0;
		}
			#navSearch form div {
				float: left;
			}
			#navSearch form div.textField {
				padding: 6px 0 0 9px;
				/* display: none; */
			}
				/*
				 * @workaround	IE7 display differences.
				 */
				*+html #navSearch form div.textField {
					padding-top: 4px;
					/* display: none; */
				}
				/*
				 * @workaround	Opera display differences.
				 */
				.isOpera #navSearch form div.textField {
					padding-top: 9px;
					/* display: none; */
				}
				#navSearch div.textField input {
					border: 1px solid #a19e9d;
					padding: 3px;
					width: 180px;
				}
					/*
					 * @workaround	Opera display differences.
					 */
					.isOpera #navSearch div.textField input {
						padding: 4px 3px 2px 3px;
					}
			#navSearch form div.submitField {
				padding: 6px 0 0 9px;
				/*display: none; */
			}
				/*
				 * @workaround	IE6 display differences.
				 */
				* html #navSearch form div.submitField {
					padding-top: 8px;
					/* display: none; */
				}
				/*
				 * @workaround	Safari display differences.
				 */
				.isSafari #navSearch form div.submitField {
					padding-top: 8px;
					/* display: none; */
				}
				/*
				 * @workaround	Opera display differences.
				 */
				.isOpera #navSearch form div.submitField {
					padding-top: 8px;
					/* display: none; */
				}
				/**
				 * @note	the content of the submit button is replaced with a background image.
				 **/
				#navSearch form div.submitField input {
					border: 0;
					padding: 0;
					margin: 0;
					background: transparent url(../img/navSearchSubmit.gif) top left no-repeat;
					height: 21px;
					width: 21px;
					cursor: pointer;
				}


/** 
 * @section		TOOLS
 * @note		container for site wide widgets. currently only contains the font sizing widget.
 **/
	#tools {
		position: absolute;
		top: 0;
		left: 0;
		width: 960px;
		height: 1px;
	}
	
	#toolsFontsize {
		position: absolute;
		top: 156px;
		right: 0;
		width: 170px;
	}
		#toolsFontsize div {
			background: url(../img/bgTypeWidget.gif) 0 1px no-repeat;
			padding: 0 0 0 16px;
			color: #0606ff;
			font: normal 12px/12px "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif;
			margin: 0 0 10px 0;
			cursor: pointer;
		}
		#toolsFontsize div:hover {
			text-decoration: underline;
		}


/** 
 * @section		CONTENT
 **/
	#content {
		position:static;
		padding: 0px 10px;
		z-index:-1;
	}
		.templateHome #content {
			padding: 0;
			z-index:-1;
		}
			#content:after {
				content: ".";
				display: block;
				height: 0;
				clear: both;
				visibility: hidden;
			}

/** Wrapper css to allow for content under left nav menu **/

#contentLeft {
		width: 160px;
		float: left;
	}

/** 
 * @section		IN CONTENT NAVIGATION
 * @note		nothing special about these links. they are just nested ULs inside a DIV.
 **/
 
	#contentNav {
        width: 160px;
		border: 1px solid #000;
		border-width: 4px 0 0 0;
		float: left;
		margin-top: 59px;
		margin-bottom:27px;
		
	}
		#contentNav.activated {
			border-width: 4px 0;
		}

	
/**
 * @section 	IN CONTENT NAVIGATION LEVEL 1
 **/
	#contentNav ul {
		padding: 0;
		margin: 0;
		list-style: none;
		font: normal 12px/16px "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif;
	}
		#contentNav li {
			margin: 2px 0;
		}
			/*
			 * @workaround	spacing issue in IE6, it's not perfect, but it's close.
			 */
			* html #contentNav li {
				zoom: 1;
			}
		#contentNav li a {
			color: #000;
			font: normal 12px/16px "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif;
			text-decoration: none;
			background: #ebebeb url(../img/bgContentNavL1.gif) 4px 7px no-repeat;
			display: block;
			padding: 2px 2px 2px 12px;
		}
			#contentNav li.on a {
				background-color: #ffc210;
			}

/**
 * @section 	IN CONTENT NAVIGATION LEVEL 2
 **/
	#contentNav li.on ul { }
		#contentNav li.on ul li {
			margin: 0;
		}
		#contentNav li.on ul li a {
			color: #000;
			font: normal 11px/15px "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif;
			background: #fff url(../img/bgContentNavL2.gif) bottom left no-repeat;
			padding: 2px 2px 3px 21px;
		}
			#contentNav li.on ul li:last-child a,
			#contentNav li.on ul li.lastChild a {
				background: none;
			}
			#contentNav li.on ul li.on a {
				color: #0606ff;
			}

/**
 * @section 	IN CONTENT NAVIGATION LEVEL 3
 **/
	#contentNav li.on li.on ul {
		background: #fff url(../img/bgContentNavL2.gif) bottom left no-repeat;
		padding-bottom: 1px;
	}
		#contentNav li.on li.on li a {
			color: #000;
			background: none;
			font: normal 10px/14px "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif;
			padding: 2px 2px 3px 30px;
		}
			#contentNav li.on li.on li.on a {
				color: #0606ff;
				background: #fff url(../img/bgContentNavL3.gif) 20px 7px no-repeat;
			}
		/*
		 * @workaround	IE7 display differences
		 */
		*+html #contentNav li.on li.on li.on a {
			background-position: 20px 9px;
		}

/**
 * @section 	IN CONTENT NAVIGATION LEVEL 4
 * @note		this is for debugging purposes only. There is not suppose to be 4 levels showing.
 **/
	#contentNav li.on li.on li.on ul {
		background: #fff url(../img/bgContentNavL2.gif) bottom left no-repeat;
		padding-bottom: 1px;
	}
		#contentNav li.on li.on li.on li a {
			color: #000;
			background: none;
			font: normal 10px/14px "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif;
			padding: 2px 2px 3px 39px;
		}
			#contentNav li.on li.on li.on li.on a {
				color: #0606ff;
				background: #fff url(../img/bgContentNavL3.gif) 29px 7px no-repeat;
			}
		/*
		 * @workaround	IE7 display differences
		 */
		*+html #contentNav li.on li.on li.on li.on a {
			background-position: 29px 9px;
		}

/** 
 * @section		MAIN CONTENT
 **/
	#contentMain {
		width: 580px;
		padding: 12px 20px 0 20px;
		float: left;
	
	}
		.templateHome #contentMain {
			width: 960px;
			padding: 0 0 120px 0;
			float: none;
			background: #999;
			z-index:-1;
		}
	
	/* @note	there should only be one H1 per page, it is the section (that you are in) title. */
	#contentMain h1 {
		color: #333;
		font: normal 25px/45px "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif;
		border-bottom: 1px solid #000;
		padding: 0px 0px 2px 0px;
		margin: 0;
	}
		.templateHome #contentMain h1 {
			padding: 6px 0px 6px 20px;
			border: 0;
			color: #fff !important;
		}
	
	#contentMain a img {
		border: 0;
	}
	
	#contentMain span.artistName {
		white-space: nowrap;
	}
	
	#contentMain div.columns {
		border-bottom: 1px solid #000;
	}
		#contentMain div.columns:after {
			content: ".";
			display: block;
			height: 0;
			clear: both;
			visibility: hidden;
		}
		* html #contentMain div.columns {
			zoom: 1;
		}
		*+html #contentMain div.columns {
			zoom: 1;
		}
		#contentMain div.callout div.columns {
			border: 0;
		}
	
	#contentMain div.callout {
		background-color: #eee;
		padding: 15px 20px;
		clear: both;
	}
		#contentMain div.callout:after {
			content: ".";
			display: block;
			height: 0;
			clear: both;
			visibility: hidden;
		}
		* html #contentMain div.callout {
			zoom: 1;
		}
		
		#contentMain div.callout h2 {
			font: 16px/28px "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif;
			margin: 0;
			padding: 0;
		}
		#contentMain div.callout div.column1 {
			width: 240px;
			float: left;
		}
		#contentMain div.callout div.column2 {
			width: 240px;
			float: right;
		}
			#contentMain div.noBiography div.column2 {
				width: auto;
				float: none;
			}

/**
 * @section		SEARCH RELATED NAVIGATION
 * @note		this is the 'back to search' links located right under the page section title.
 * 				identifiable by the links that contain an black circle and > in them.
 * 				uses the #CONTENTMAIN prefix to override old styles.
 **/
	#contentMain #contentSearchNav {
		border-bottom: 1px solid #000;
		min-height: 12px;
		padding: 12px 0;
	}
		* html #contentMain #contentSearchNav {
			height: 12px;
		}
		#contentMain #contentSearchNav p {
			float: left;
			margin: 0 15px 0 0;
			padding: 0;
			text-indent: 0; /* @workaround	Safari needed */
			font: 12px/12px "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif;
		}
		#contentMain #contentSearchNav a {
			font: 12px/12px "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif;
			text-decoration: none;
			background: url(../img/bgArrow.gif) left no-repeat;
			padding: 0 0 0 15px;
			color: #0606ff;
			border: 0;
		}
			#contentMain #contentSearchNav a:hover {
				text-decoration: underline;
			}

/**
 * @section		ALPHABET NAV FOR ARTISTS SEARCH
 * @note		A-Z located on the artist search results page.
 **/
	#contentSearchAlpha {
		height: 12px;
		padding: 12px 0 0 0;
		width: 580px;
	}
		#contentSearchAlpha ul {
			list-style: none;
			margin: 0;
			padding: 0;
		}
		#contentSearchAlpha li {
			float: left;
			padding: 0 6px;
			border-right: 1px solid #000;
			font: 12px/12px "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif !important;
		}
			#contentSearchAlpha li.lastChild {
				border-right: 0;
			}
		#contentMain #contentSearchAlpha a {
			text-decoration: none;
			color: #000;
			border: 0;
		}
			#contentMain #contentSearchAlpha a:hover {
				text-decoration: underline;
			}

/**
 * @section		ARTIST SEARCH FILTER
 * @note		located on the artist search results page, underneath the A-Z.
 **/
	#contentSearchFilter {
		font: 11px/12px "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif;
		height: 12px;
		padding: 8px 0 16px 0;
		border-bottom: 1px solid #000;
		clear: both;
	}
		#contentSearchFilter fieldset,
		#contentSearchFilter form {
			border: 0;
			padding: 0;
			margin: 0;
		}
		#contentSearchFilter legend {
			display: none;
		}
		#contentSearchFilter div {
			display: inline;
			padding: 0 24px 0 0;
		}
		#contentSearchFilter input {
			vertical-align: text-bottom;
		}
			.isSafari #contentSearchFilter input,
			.isOpera #contentSearchFilter input {
				vertical-align: middle;
			}
			*+html #contentSearchFilter input {
				vertical-align: middle;
			}
		#contentSearchFilter label {
			cursor: pointer;
		}

/**
 * @section		ARTIST SEARCH RESULTS
 **/
	#contentSearchListArtist {
	}
		#contentSearchListArtist ul {
			margin: 0;
			padding: 0;
			list-style: none;
		}
		#contentSearchListArtist li {
			border-bottom: 1px dotted #000;
			padding: 8px 0 8px 40px;
			position: relative;
			margin: 0 !important;
			font: 12px/14px "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif !important;
		}
			#contentSearchListArtist li.lastChild {
				border-bottom: 0;
			}
		#contentMain #contentSearchListArtist a {
			text-decoration: none;
			color: #000;
			border: 0;
			font: 12px/14px "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif !important;
		}
			#contentMain #contentSearchListArtist a:hover {
				text-decoration: underline;
			}
		#contentSearchListArtist span.artistName {
			font-weight: bold;
		}
		#contentSearchListArtist img {
			position: absolute;
			top: 6px;
			left: 0;
		}
			* html #contentSearchListArtist img {
				left: -40px;
			}

/**
 * @section		ARTWORK SEARCH RESULTS TITLE
 * @note		this is a one off, looks different than anywhere else.
 **/
	#contentSearchListArtworkTitle {}
		#contentSearchListArtworkTitle h2 {
			margin-bottom: 6px;
		}
		#contentSearchListArtworkTitle p {
			margin: 0;
			padding: 0;
			font-weight: bold;
			font: 12px/14px "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif !important; /* @workaround		Sarfari needed */
		}

/**
 * @section		ARTWORK SEARCH RESULTS
 **/
	#contentSearchListArtwork {
		font: 12px/14px "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif;
	}
		#contentSearchListArtwork ul {
			margin: 0 !important;
			padding: 0 !important;
			list-style: none;
		}
		#contentSearchListArtwork li {
			border-bottom: 1px dotted #000;
			padding: 30px 0 20px 0;
			margin: 0 !important;
		}
			#contentSearchListArtwork li:after {
				content: ".";
				display: block;
				height: 0;
				clear: both;
				visibility: hidden;
			}
			* html #contentSearchListArtwork li {
				zoom: 1;
			}
			*+html #contentSearchListArtwork li {
				zoom: 1;
			}
		#contentSearchListArtwork div.artworkThumb {
			float: left;
			width: 160px;
		}
		#contentSearchListArtwork div.artworkDetails {
			float: left;
			width: 380px;
		}
		#contentSearchListArtwork form {
			margin: 0;
			padding: 0;
		}
		#contentSearchListArtwork h3 {
			font: normal 16px/20px "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif;
			margin: 0;
			padding: 0;
		}
			#contentMain #contentSearchListArtwork h3 a {
				text-decoration: underline;
			}
			#contentMain #contentSearchListArtwork h3 img {
				vertical-align: middle;
			}
		#contentSearchListArtwork p {
			margin: 0;
			padding: 0 0 10px 0;
			text-indent: 0 !important; /* @workaround	Safari needed */
			font: 12px/16px "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif !important; /* @workaround	Safari needed */
		}
		/* @note	#CONTENTMAIN used to override base CSS */
		#contentMain #contentSearchListArtwork a {
			text-decoration: none;
			color: #0606ff;
			border: 0;
		}
			#contentMain #contentSearchListArtwork a img {
				border: 0;
			}
		#contentSearchListArtwork span {
			display: block;
		}
			#contentSearchListArtwork span.medium {
				font-weight: bold;
			}

/**
 * @section		SITE SEARCH RESULTS
 **/
	#contentSearchListSite{
		width: 360px;
		float: left;
		overflow: hidden;
	}
		#contentSearchListSite ul {
			margin: 0;
			padding: 0;
			list-style: none;
		}
		#contentSearchListSite li {
			border-bottom: 1px dotted #000;
			padding: 20px 0;
			margin: 0 !important;
		}
		#contentSearchListSite h3 {
			font: normal 16px/20px "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif !important;
			margin: 0;
			padding: 0;
		}
		#contentSearchListSite p {
			font: normal 12px/16px "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif !important;
			margin: 0;
			padding: 0;
			text-indent: 0 !important;
		}
		/* @note	#CONTENTMAIN used to override base CSS */
		#contentMain #contentSearchListSite a {
			text-decoration: underline;
			color: #0606ff;
			border: 0;
		}
	
	/**
	 * @note search form on the site search results page
	 **/
	#contentSearchForm {}
		#contentSearchForm form {
			border: 0;
			padding: 18px 0 6px 0;
			margin: 0;
		}
		#contentSearchForm fieldset {
			border: 0;
			padding: 0;
			margin: 0;
		}
		#contentSearchForm legend {
			display: none;
		}
		#contentSearchForm div {
			float: left;
			padding: 0 20px 0 0;
		}
		#contentSearchForm input {
			width: 214px;
			font: normal 11px/11px "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif;
			border: 1px solid #666;
			color: #0606ff;
			padding: 2px;
			margin: 0;
		}
		#contentSearchForm label {
			background: url(../img/btnSearch.gif) top left no-repeat;
			height: 23px;
			width: 59px;
			display: block;
			cursor: pointer;
		}
			#contentSearchForm label input {
				display: none;
			}

	
	/**
	 * @section	ARTWORK SEARCH RESULTS
	 * @note	on the site search results page
	 **/
	#contentSearchListArt {
		width: 120px;
		padding: 0 0 35px 29px;
		margin: 0 0 0 30px;
		float: left;
		border-left: 1px dotted #000;
	}
		#contentSearchListArt ul {
			margin: 0;
			padding: 0;
			list-style: none;
			border-top: 1px solid #000;
		}
		#contentSearchListArt li {
			border-bottom: 1px dotted #999;
			padding: 0 !important;
			margin: 0 !important;
		}
		#contentSearchListArt h2 {
			font: normal 14px/18px "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif !important;
			margin: 0;
			padding: 26px 0 10px 0 !important;
		}
		#contentSearchListArt h3 {
			font: 11px/14px "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif !important;
			margin: 0 !important;
			padding: 0 !important;
		}
		#contentSearchListArt a {
			border: 0 !important;
			color: #0606ff !important;
		}
		#contentSearchListArt a:hover {
			text-decoration: underline;
		}
		#contentSearchListArt p {
			text-indent: 0 !important;
			margin: 0 !important;
			padding: 2px 0 10px 0 !important;
			font: 10px/14px "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif !important;
		}
			#contentSearchListArt p.more {
				padding: 22px 0 10px 0 !important;
			}
			#contentSearchListArt p.more a {
				text-decoration: underline;
			}
	
	/* @note	no results for site search */
	#contentNoResults {
		font: normal 11px/15px "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif;
	}
		/* @note	#CONTENTMAIN used to override base CSS */
		#contentMain #contentNoResults a {
			text-decoration: underline;
			color: #0606ff;
			border: 0;
		}
		#contentNoResults p,
		#contentNoResults li {
			text-indent: 0 !important;
			font: normal 11px/15px "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif !important;
			margin: 0 0 12px 0 !important;
		}
			#contentNoResults li {
				margin: 0 !important;
			}
		#contentNoResults p.spellCheck {
			font-size: 14px;
		}
		#contentNoResults ul {
			list-style: none;
			margin: 0;
			padding: 0;
		}
		#contentNoResults hr {
			border: 0;
			border-top: 1px dotted #000;
			height: 0;
			margin: 24px 0;
			font-size: 0;
		}

/**
 * @section		SEARCH RESULT PAGE NAVIGATION
 * @note		located on all search result pages (artist, artwork, site), used to click through
 * 				the result pages.
 **/
	#contentSearchPagination {
		font: normal 12px/12px "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif !important;
		padding: 12px 0 0 0;
		clear: both;
	}
		#contentSearchPagination ul {
			list-style: none;
			margin: 0 !important;
			padding: 0 !important;
			text-align: center;
		}
		#contentSearchPagination li {
			display: inline;
			padding: 0 2px;
			font: normal 12px/12px "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif !important; /* @workaround		Safari needed */
		}
		#contentMain #contentSearchPagination a {
			text-decoration: underline;
			color: #0606ff;
			border: 0;
		}
			#contentMain #contentSearchPagination strong {
				font-weight: bold;
			}

/**
 * @section		ARTIST and ARWORK SEARCH FORM
 * @note		contains the styles for both forms since they are on one page.
 **/
		#contentSearchForms {
			font: 12px/16px "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif;
		}
			#contentSearchForms p.contentSearchTips {
				font: 12px/16px "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif; /* @workaround	Safari needed */
				margin: 0 0 0 0 !important;
				padding: 0 0 6px 0;
				text-indent: 0; /* @workaround	Safari needed */
			}
				#contentMain #contentSearchForms p.contentSearchTips a {
					border: 0;
					color: #0606ff;
					text-decoration: underline;
				}
			
			#contentSearchForms div.column1 {
				border-right: 1px dotted #000;
				padding: 0 29px 30px 0;
			}
			
			#contentSearchForms form {
				border: 0;
				margin: 0;
				padding: 0;
			}
			
			#contentSearchForms fieldset {
				border: 0;
				margin: 0;
				padding: 0;
			}
			
			#contentSearchForms legend {
				display: none;
			}
				#contentSearchForms fieldset fieldset {
					padding: 0 0 6px 0;
				}
				#contentSearchForms fieldset fieldset legend {
					display: block;
					font-weight: bold;
				}
		
			#contentSearchForms label {
				cursor: pointer;
			}
				#contentSearchForms div.selectField label,
				#contentSearchForms div.textField label {
					display: block;
				}
				#contentSearchForms div.selectField label span.example,
				#contentSearchForms div.textField label span.example {
					color: #666;
					display: block;
				}
				
			#contentSearchForms div.selectField,
			#contentSearchForms div.textField,
			#contentSearchForms div.submitField {
				padding: 6px 0;
			}
				#contentSearchForms div.selectField select {
					width: 240px;
					padding: 3px;
					border: 1px solid #666;
				}
				#contentSearchForms div.textField input {
					width: 232px;
					padding: 3px;
					border: 1px solid #666;
				}
			
			#contentSearchForms div.submitField {
				height: 23px;
			}
				#contentSearchForms div.submitField label {
					height: 23px;
					float: right;
				}
					#contentSearchForms #searchArtworksForm div.submitField label {
						background: url(../img/btnFindArtwork.gif) top left no-repeat;
						width: 101px;
					}
					#contentSearchForms #searchArtistsForm div.submitField label {
						background: url(../img/btnFindArtist.gif) top left no-repeat;
						width: 84px;
					}
					#contentSearchForms div.submitField label input {
						display: none;
					}
		
		
		
/**
 * @section		SITE SEARCH RESULT PAGES
 * @note		shows the number of pages in the result of the site search. artwork search is 
 * 				done differently.
 **/
	#contentSearchResults {
		border-bottom: 1px solid #000;
	}
		#contentSearchResults p {
			font: bold 12px/12px "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif !important;
			padding: 0 0 18px 0;
			margin: 0;
			text-indent: 0 !important;
		}
		#contentSearchResults a {
			font-weight: normal !important;
			text-decoration: underline !important;
			border: 0 !important;
		}

/**
 * @section		ARTWORK AND ARTIST OBJECT CONTENT
 * @note		layout is very similar between these pages.
 **/
	#contentArtist a,
	#contentArtwork a {
		color: #0606ff;
		text-decoration: underline;
	}
	
		#contentArtistThumb,
		#contentArtworkThumb {
			width: 280px;
			float: left;
		}
			#contentArtistThumb p,
			#contentArtworkThumb p {
				margin: 0;
				padding: 10px 0 10px 0;
				text-indent: 0 !important;
			}
			#contentArtistThumb a,
			#contentArtworkThumb a {
				border: 0 !important;
			}
		
		.contentArtistThumbNav p,
		.contentArtworkThumbNav p { }
			.contentArtistThumbNav p,
			.contentArtworkThumbNav p {
				float: left;
				margin: 0;
				padding: 10px 15px 0 0 !important;
				text-indent: 0 !important;
			}
			#contentMain .contentArtistThumbNav a,
			#contentMain .contentArtworkThumbNav a {
				float: left !important;
				font: 12px/12px "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif;
				padding: 0 0 10px 0 !important;
				border: 0;
				color: #0606ff;
				text-decoration: underline !important;
				border: 0 !important;
			}
		
		#contentArtistDetails,
		#contentArtworkDetails {
			width: 240px;
			padding-right: 20px;
			float: right;
		}
			div.noPortrait #contentArtistDetails {
				width: auto;
				padding-right: 0;
				float: none;
			}
			#contentArtworkDetails form {
				margin: 0;
				padding: 0;
			}
			#contentArtistDetails h2,
			#contentArtworkDetails h2 {
				font: 22px/30px "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif;
				margin: 5px 0 0 0;
				padding: 0;
			}
			#contentArtistDetails p,
			#contentArtworkDetails p {
				font: 12px/16px "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif !important;
				margin: 0;
				padding: 0 0 12px 0;
				text-indent: 0 !important;
			}
				#contentArtistDetails p+ul,
				#contentArtworkDetails p+ul {
					margin-top: -12px;
				}
			#contentArtistDetails span,
			#contentArtworkDetails span {
				display: block;
			}
			#contentMain #contentArtistDetails a,
			#contentMain #contentArtworkDetails a {
				border: 0;
				color: #0606ff;
				text-decoration: none;
			}
				#contentArtistDetails a img,
				#contentArtworkDetails a img {
					border: 0;
				}
			#contentArtistDetails ul,
			#contentArtworkDetails ul {
				list-style: inside square;
				margin: 0;
				padding: 0 0 12px 0;
				font: 12px/16px "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif;
			}
			#contentArtistDetails li {
				margin: 0 !important;
				padding: 0 !important;
				font: 12px/16px "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif !important;
			}
		
		
		#contentArtistDescription h3,
		#contentArtworkDescription h3,
		#contentArtworkKeywords h3,
		#contentArtistExhibitions h3,
		#contentArtworkExhibitions h3,
		#contentArtistBlogs h3,
		#contentArtworkBlogs h3,
		#contentArtistClassroom h3,
		#contentArtworkClassroom h3,
		#contentArtworkStore h3,
		#contentArtworkMeet h3 {
			font: 18px/24px "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif !important;
			margin: 5px 0 0 0;
			padding: 0;
		}
		
		#contentArtist h4,
		#contentArtistDescription h4,
		#contentArtwork h4 {
			font: 14px/18px Georgia, "Times New Roman", Times, serif !important;
			margin: 5px 0 12px 0;
			padding: 0;
		}
		
		#contentArtistDescription,
		#contentArtworkDescription {
			padding: 0 0 12px 0;
		}
			#contentArtistDescription p,
			#contentArtworkDescription p {
				font: 14px/28px Georgia, "Times New Roman", Times, serif !important;
				margin: 0 0 14px 0 !important;
				padding: 0;
				text-indent: 0 !important;
			}
			
		#contentArtistDescription h4 a {
			cursor: pointer;
			border: 0;
			color: #0606ff;
		}
			#contentArtistDescription h4.on a {
				cursor: default;
			}
		
		#contentArtistDescriptionAdditional {
			display: none;
		}
		
		#contentArtworkKeywords {
			padding: 0 0 12px 0;
		}
			#contentArtworkKeywords p {
				font: 11px/16px "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif !important;
				margin: 0 0 6px 0 !important;
				padding: 0;
				text-indent: 0 !important;
			}
			#contentMain #contentArtworkKeywords a {
				border: 0;
				color: #0606ff;
				text-decoration: underline;
			}
		
		#contentArtworkArtist {
			padding: 6px 0 12px 0;
		}
			#contentArtworkArtist h3 {
				font: bold 11px/16px "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif !important;
				margin: 5px 0 0 0;
				padding: 0;
			}
				#contentArtworkArtist h3 a {
					color: #000 !important;
					border: 0 !important;
				}
				#contentArtworkArtist h3 a:hover {
					text-decoration: underline !important;
					color: #0606ff !important;
				}
			#contentArtworkArtist p {
				font: 11px/16px "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif !important;
				margin: 0 0 6px 0 !important;
				padding: 0;
				text-indent: 0 !important;
			}
			#contentArtworkArtist span {
				display: block;
			}
			
		#contentArtistRelated {
			padding: 6px 0 12px 0;
		}
		#contentArtworkRelated {
			padding: 12px 0;
			border-top: 1px dotted #000;
		}
			#contentArtistRelated h3,
			#contentArtworkRelated h3 {
				font: bold 11px/16px "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif !important;
				margin: 5px 0 0 0 !important;
				padding: 0;
			}
			#contentArtistRelated p,
			#contentArtworkRelated p {
				margin: 0;
				padding: 0 0 8px 0;
				text-indent: 0 !important;
				font: 11px/16px "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif !important;
			}
			#contentArtistRelated p.more,
			#contentArtworkRelated p.more {
				text-align: right;
			}
			#contentArtistRelated li a,
			#contentArtistRelated li span,
			#contentArtworkRelated li a,
			#contentArtworkRelated li span {
				display: block;
				font: 11px/16px "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif !important;
			}
			#contentMain #contentArtistRelated a,
			#contentMain #contentArtworkRelated a {
				border: 0;
				color: #0606ff;
				text-decoration: underline;
			}
			
		#contentArtistExhibitions,
		#contentArtworkExhibitions {
			padding: 12px 0;
			border-top: 1px dotted #000;
		}
			#contentMain #contentArtistExhibitions a,
			#contentMain #contentArtworkExhibitions a {
				border: 0;
				color: #0606ff;
				text-decoration: underline;
				font: 11px/16px "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif !important;
			}
		#contentArtistBlogs,
		#contentArtworkBlogs {
			padding: 12px 0;
			border-top: 1px dotted #000;
		}
			#contentArtistBlogs li,
			#contentArtworkBlogs li {
				margin: 0 !important;
				padding: 8px 0 !important;
			}
			#contentMain #contentArtistBlogs a,
			#contentMain #contentArtworkBlogs a {
				border: 0;
				color: #0606ff;
				text-decoration: underline;
				font: 11px/16px "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif !important;
			}
		#contentArtistClassroom,
		#contentArtworkClassroom {
			padding: 12px 0;
			border-top: 1px dotted #000;
		}
			#contentMain #contentArtistClassroom a,
			#contentMain #contentArtworkClassroom a {
				border: 0;
				color: #0606ff;
				text-decoration: underline;
				font: 11px/16px "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif !important;
			}
		#contentArtistStore,
		#contentArtworkStore {
			padding: 12px 0;
			border-top: 1px dotted #000;
		}
			#contentMain #contentArtistStore a,
			#contentMain #contentArtworkStore a {
				border: 0;
				color: #0606ff;
				text-decoration: underline;
				font: 11px/16px "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif !important;
			}
		#contentArtistMeet,
		#contentArtworkMeet {
			padding: 12px 0;
			border-top: 1px dotted #000;
		}
			#contentMain #contentArtistMeet a,
			#contentMain #contentArtworkMeet a {
				border: 0;
				color: #0606ff;
				text-decoration: underline;
				font: 11px/16px "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif !important;
			}
			#contentArtistRelated ul,
			#contentArtistExhibitions ul,
			#contentArtistClassroom ul,
			#contentArtistBlogs ul,
			#contentArtistStore ul,
			#contentArtistMeet ul,
			#contentArtworkRelated ul,
			#contentArtworkExhibitions ul,
			#contentArtworkClassroom ul,
			#contentArtworkBlogs ul,
			#contentArtworkStore ul,
			#contentArtworkMeet ul {
				list-style: none;
				margin: 0;
				padding: 0;
				font: 11px/16px "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif;
			}
			#contentArtistRelated li,
			#contentArtistExhibitions li,
			#contentArtistClassroom li,
			#contentArtistBlogs li,
			#contentArtistStore li,
			#contentArtistMeet li,
			#contentArtworkRelated li,
			#contentArtworkExhibitions li,
			#contentArtworkClassroom li,
			#contentArtworkBlogs li,
			#contentArtworkStore li,
			#contentArtworkMeet li {
				margin: 0 !important;
				padding: 8px 0 !important;
				font: 11px/16px "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif !important;
			}



/** 
 * @section		HOMEPAGE WIDGET
 * @note		the fullsize image contains a BG image that is positioned behind the A. this way
 * 				no matter how big the fullsize image is there will be no disconect between the left
 * 				hand side and right hand side even with the way they are positioned.
 **/
	#contentMain div.homeWidget {
		background: url(../img/bgHomeWidget.gif) top left repeat-y;
		position: relative;
	}
		/* @workaround IE7 won't display the A otherwise */
		*+html #contentMain div.homeWidget {
			zoom: 1;
		}
		/* @workaround IE6 won't display the A otherwise */
		* html #contentMain div.homeWidget {
			zoom: 1;
		}
		#contentMain div.homeWidget ul {
			margin: 0;
			padding: 17px 5px;
			list-style: none;
		}
		/**
		 * @note	the LI has to be relative so that the fullsize image can be absolutely positioned.
		 **/
		#contentMain div.homeWidget li {
			height: 90px;
			width: 345px;
			margin: 0;
		}
		/**
		 * @note	the A has to be relative so that it can take a z-index, so it can be positioned
		 * 			behind the fullsize image.
		 **/
		#contentMain div.homeWidget a {
			text-decoration: none;
			display: block;
			color: #fff !important;
			font: normal 12px/18px "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif;
			height: 80px;
			position: relative;
			z-index: 190;
			padding: 5px 17px 5px 114px;
			border: 0 !important;
		}
			#contentMain div.homeWidget li.on a {
				background: #999 url(../img/bgHomeWidgetLi.gif) 314px 34px no-repeat;
			}
			#contentMain div.homeWidget ul a img {
				border: 0;
			}
			#contentMain div.homeWidget a img.thumb {
				position: absolute;
				top: 5px;
				left: 17px;
			}
		#contentMain div.homeWidget strong {
			color: #fff;
		}
		#contentMain div.homeWidget ul div.fullsize {
			position: absolute;
			text-align: center;
			width: 66px;
			top: 0;
			left: -9999px;
			padding-left: 345px;
			z-index: 100;
		}
			#contentMain div.homeWidget ul li.on div.fullsize {
				left: 0;
			}
		#contentMain div.homeWidget ul a strong {
			color: #ffe28d;
			font-size: 14px;
		}


/** 
 * @section		RELATED CONTENT
 * @note		right rail content.
 **/
	#contentRelated {
		width: 160px;
		float: left;
		padding-top: 80px;
	}
		/**
		 * @note	each bit of content in the right rail will be wrapped in a DIV.
		 **/
		#contentRelated div.widget {
			border: 1px solid #000;
			border-width: 4px 0 1px 0;
			padding: 2px 0;
			margin: 0 0 20px 0;
		}
		#contentRelated h2 {
			color: #000;
			font: bold 12px/16px "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif;
			margin: 0;
			padding: 11px 0;
		}
			#contentRelated h2 span {
				color: #333;
				font: bold 11px/16px "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif;
				display: block;
			}
		#contentRelated h3 {
			color: #000;
			font: normal 12px/16px "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif;
			margin: 0;
			padding: 11px 0;
		}
			#contentRelated h3 span {
				color: #333;
				font: normal 11px/16px "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif;
				display: block;
			}
		#contentRelated ul {
			margin: 0;
			padding: 0;
			list-style: none;
			color: #666666;
			font: normal 11px/15px "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif;
		}
			#contentRelated ul li {
				background: url(../img/bgContentRelatedLi.gif) 0 6px no-repeat;
				padding: 0 0 10px 10px;
			}
		#contentRelated ul.calendar {
			margin: 0;
			padding: 0;
			list-style: none;
			color: #000;
			font: normal 11px/15px "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif;
		}
			#contentRelated ul.calendar li {
				background: none;
				padding: 0 0 10px 0;
			}
			#contentRelated ul.calendar li h3 {
				padding: 4px 0;
			}
		#contentRelated p {
			margin: 0;
			padding: 0 0 10px 0;
			color: #666666;
			font: normal 11px/15px "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif;
		}
		#contentRelated a {
			border: 0;
			color: #0606ff;
			text-decoration: underline;
		}
			#contentRelated a img {
				border: 0;
			}
		
		#contentRelated div.shop {
			background: #feeaab;
			padding: 10px 10px 0 10px;
		}
			#contentRelated div.shop h2 {
				color: #000;
				font: normal 18px/18px "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif;
				margin: 0;
				padding: 0 0 11px 0;
			}
			#contentRelated p {
				color: #000;
			}
			
			#contentRelated .share {
				font-family: "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif; 
				font-size: 13px; 
				font-weight: bold;
			}

			#contentRelated .share a {
				color: #000;
				text-decoration: none;
			}


/** 
 * @section		SITEINFO
 * @note		footer of a page.
 **/
	#siteinfo {
		clear: both;
	}
		.templateHome #siteinfo {
			padding: 0;
		}
		
		
	#siteinfoLinks {
		border-top: 1px solid #000;
		margin: 0 190px;
		padding: 10px 0 20px 0;
		
	}
		/* @workaround		to get the border to show */
		* html #siteinfoLinks {
			zoom: 1;
		}
		.templateHome #siteinfoLinks {
			margin: 0;
			border: 0;
		}
		#siteinfoLinks ul {
			margin: 0;
			padding: 0;
			list-style: none;
			font: normal 10px/16px "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif;
		}
		#siteinfoLinks li {
			display: inline;
			background: url(../img/bgSiteinfoLinksDivider.gif) 0 4px no-repeat;
			padding: 0 15px;
		}
			#siteinfoLinks li:first-child,
			#siteinfoLinks li.firstChild {
				background: none;
				padding-left: 0;
			}
		#siteinfoLinks a {
			color: #0606ff;
			text-decoration: none;
		}
			#siteinfoLinks a:hover {
				text-decoration: underline;
			}
		

/**
 * @section		COLOR THEMES
 * @note		the 'theme' class will determine the color of many elements on the page.
 **/
	.themeRed #contentMain div.callout h2,
	.themeGreen #contentMain div.callout h2,
	.themeBlue #contentMain div.callout h2 {
		color: #000;
	}
	
	.themeRed {}
		.themeRed #branding {
			background-color: #8f0025;
		}
		.themeRed #navMain li.on a,
		.themeRed #navMain li    a:hover {
			background-color: #620019;
		}
		.themeRed #contentMain h1,
		.themeRed #contentMain h2,
		.themeRed #contentRelated h2 span {
			color: #900025;
		}
		.themeRed #branding,
		.themeRed #contentNav,
		.themeRed #contentMain h1,
		.themeRed #contentArtistNav,
		.themeRed #contentMain #contentSearchNav,
		.themeRed #contentSearchFilter,
		.themeRed #contentSearchResults,
		.themeRed #contentMain div.callout,
		.themeRed #contentMain div.columns,
		.themeRed #contentArtworkNav,
		.themeRed #contentRelated div.widget,
		.themeRed #siteinfoLinks {
			border-color: #620019;
		}
		.templateHome .themeRed #contentMain {
			background-color: #900025;
		}
		.themeRed #contentMain div.homeWidget {
			background-image: url(../img/bgHomeWidgetRed.gif);
		}
		.themeRed #contentMain div.homeWidget li.on a {
			background-color: #ce0639;
			background-image: url(../img/bgHomeWidgetLiRed.gif);
		}
		.themeRed #navSearch div.submitField input {
			background-image: url(../img/navSearchSubmitRed.gif);
		}
	
	.themeBlue {}
		.themeBlue #branding {
			background-color: #005e7c;
		}
		.themeBlue #navMain li.on a,
		.themeBlue #navMain li    a:hover {
			background-color: #004559;
		}
		.themeBlue #contentMain h1,
		.themeBlue #contentMain h2,
		.themeBlue #contentRelated h2 span {
			color: #005e7c;
		}
		.themeBlue #branding,
		.themeBlue #contentNav,
		.themeBlue #contentMain h1,
		.themeBlue #contentArtistNav,
		.themeBlue #contentMain #contentSearchNav,
		.themeBlue #contentSearchFilter,
		.themeBlue #contentSearchResults,
		.themeBlue #contentMain div.callout,
		.themeBlue #contentMain div.columns,
		.themeBlue #contentArtworkNav,
		.themeBlue #contentRelated div.widget,
		.themeBlue #siteinfoLinks {
			border-color: #004559;
		}
		.templateHome .themeBlue #contentMain {
			background-color: #005e7c;
		}
		.themeBlue #contentMain div.homeWidget {
			background-image: url(../img/bgHomeWidgetBlue.gif);
		}
		.themeBlue #contentMain div.homeWidget li.on a {
			background-color: #0088b6;
			background-image: url(../img/bgHomeWidgetLiBlue.gif);
		}
		.themeBlue #navSearch div.submitField input {
			background-image: url(../img/navSearchSubmitBlue.gif);
		}
	
	.themeGreen {}
		.themeGreen #branding {
			background-color: #065a39;
		}
		.themeGreen #navMain li.on a,
		.themeGreen #navMain li    a:hover {
			background-color: #004227;
		}
		.themeGreen #contentMain h1,
		.themeGreen #contentMain h2,
		.themeGreen #contentRelated h2 span {
			color: #065a39;
		}
		.themeGreen #branding,
		.themeGreen #contentNav,
		.themeGreen #contentMain h1,
		.themeGreen #contentArtistNav,
		.themeGreen #contentMain #contentSearchNav,
		.themeGreen #contentSearchFilter,
		.themeGreen #contentSearchResults,
		.themeGreen #contentMain div.callout,
		.themeGreen #contentMain div.columns,
		.themeGreen #contentArtworkNav,
		.themeGreen #contentRelated div.widget,
		.themeGreen #siteinfoLinks {
			border-color: #004227;
		}
		.templateHome .themeGreen #contentMain {
			background-color: #065a39;/*main content background color*/
			/*background-image: url(../images/Bamboo.jpg);/* //....background image*/
		}
		.themeGreen #contentMain div.homeWidget {
			background-image: url(../img/bgHomeWidgetGreen.gif);
		}
		.themeGreen #contentMain div.homeWidget li.on a {
			background-color: #007445;
			background-image: url(../img/bgHomeWidgetLiGreen.gif);
		}
		.themeGreen #navSearch div.submitField input {
			background-image: url(../img/navSearchSubmitGreen.gif);
		}
}


@media print {
	#nav,
	#tools,
	#contentNav,
    #socialmedia,
	#siteinfo   
                { display: none; 
	}
	
	
	#branding {
		border-bottom: 3px solid #000;
		padding: 0 0 10px 0;
	}
		#branding a img { border: 0; }
	#contentMain {
		margin: 0 0 140px 0;
	}
		#contentMain div.homeWidget { }
			#contentMain div.homeWidget ul {
				margin: 0;
				padding: 0;
			}
			#contentMain div.homeWidget li {
				padding: 12px 0;
				page-break-after: always;
			}
			#contentMain div.homeWidget a img.thumb {
				display: none;
			}
			#contentMain div.homeWidget div.fullsize img {
				margin: 0;
			}
			
	#contentArtistDetails span,
	#contentArtworkDetails span,
	#contentSearchListArtwork span {
		display: block;
	}
	
	#contentRelated div.widget {
		border: 1px solid #000;
		border-width: 2px 0 1px 0;
		padding: 2px 0;
		margin: 0 0 70px 0;
        display: none; 
	}
	
	#clearFieldBlurred {
		color: #666; 
		font-style: italic; 
	}
	
	#clearFieldActive { 
		color: #000; 
	}

}