/*
	style_global.css
	Stylesheet for metiviergallery.com
	
	Copyright (c) 2008-2010 Gordon Hicks, all rights reserved	
*/	


/* General */

	div {
		position: relative;
		margin: 0;
		padding: 0;
	}

	ul {
		position: relative;
		margin: 0;
		padding: 0;
		text-indent: 0;
		list-style: none;
	}

	li {
		position: relative;
		margin: 0;
		padding: 0;
	}

	img {
		position: relative;
		display: block;
		border: 0;
	}

	em {
		font-style: italic;
		font-weight: normal;
	}

	strong {
		font-style: normal;
		font-weight: bold;
	}
	
	cite {
		font-style: italic;
		font-weight: normal;
	}

	strong cite {
		font-style: italic;
		font-weight: bold;
	}

	h4 cite {
		font-weight: bold;
	}


/* Typeface */

	body,
	td,
	input,
	textarea {
		font-family: Arial,Helvetica,sans-serif;
		font-size: 12px;
		line-height: 18px;
		color: rgb(33,27,26); /* warm black */
		text-align: left;
	}

	p {
		position: relative;
		width: 400px;
		margin: 0 0 9px 0;
	}

	img {
		font-size: 11px;
		line-height: 14px;
		color: rgb(184,177,176)  /* light warm grey */
	}

	em {
		font-style: italic;
		font-weight: normal;
	}

	strong {
		font-style: normal;
		font-weight: bold;
	}
	
	cite {
		font-style: italic;
		font-weight: normal;
	}


	.title { /* artwork title */
		font-style: italic;
	}

	.artist { /* artist's name */
		font-weight: bold;
	}

	.caption { /* title and info underneath or beside artwork image */
		color: rgb(102,89,87); /* warm grey */
		line-height: 16px;
	}




/* Headings */


	h1 { /* see .header */
	}


	h2 {
		height: 20px;
		margin: 0 0 28px 0;
		font-size: 18px;
		line-height: 18px;
		font-weight: normal;
		color: rgb(57,48,46); /* warm black lightened */
	}

	h2 .subHead { /* vertical rule on left */
		margin-left: 5px;
		padding-left: 6px;
		border-left: 2px solid rgb(235,233,232); /* very light warm grey */
	}

	h3 {
		font-size: 14px;
		line-height: 14px;
		font-weight: normal;
		margin: 0 0 11px 0;
		color: rgb(203,68,40); /* brick red */
	}

	h4 {
		margin: 0 0 9px 0;
		font-size: 12px;
		line-height: 18px;
		font-weight: bold;
		color: rgb(57,48,46); /* warm black lightened */
	}
	
	p + h4 {
		margin-top: 27px;
	}

	h4 .subHead { font-weight: normal; }

/* Links */

	a {
		text-decoration: underline;
	}

	a:link,
	a:visited {
		color: rgb(102,89,87); /* warm grey */
	}
	
	a:hover,
	a:active {
		color: rgb(220,38,0); /* hot red */
		cursor: pointer;
	}
	
	.here,
	a.here:link,
	a.here:visited,
	.here a:link,
	.here a:visited {
		color: rgb(203,68,40); /* brick red */
	}
	
	a.here:hover,
	a.here:active {
		color: rgb(220,38,0); /* hot red */
	}
	
	.inactive {
		color: rgb(184,177,176); /* light warm grey */
	}


/* Special */

	.end {  /* used to ensure column layouts end correctly */
		clear: both;
		border-bottom: solid 1px white;
	}

	.section {
		margin-bottom: 27px;
	}


/* Page containers */

	body  {
		position: relative;
		margin: 0;
		background-color: white;
	}

	.main {
		width: 1024px;
		margin: 0 auto;
	}

	.content {
		width: 950px;
		min-height: 500px;
		margin: 0 37px 0 37px; 
	}



/* Header */

	.header {
		position: relative;
		width: 950px;
		height: 22px;
		margin: 37px 37px 32px 37px;
	}

	.header a:link,
	.header a:visited,
	.header a:hover,
	.header a:active {
		text-decoration: none;
	}

	/* wordmark - image substitution */
	.header .wordmark {  
		position: relative;
		width: 339px;
		height: 22px;
		margin: 0;
		padding: 0;
		font-size: 16px;
		line-height: 22px;
		font-weight: normal;
		text-transform: uppercase;
		letter-spacing: 0.2em;
		color: rgb(203,68,40); /* brick red */
		background: transparent url(../img/global/mnav_wordmark.gif) 0 0 no-repeat;
	}

	.header .wordmark a {  
		display: block;
		position: relative;
		width: 339px;
		height: 22px;
		margin: 0;
		padding: 0;
	}

	.header .wordmark span {
		visibility: hidden;
	}

/* Photo */

	 .photo,
	 .photoBorder,
	 .photoNoBorder {
		display: inline;
		margin: -2px 0 0 -2px;
		border-width: 2px;
		border-style: solid;
		border-color: rgb(235,233,232); /* very light warm grey */
	}

	.photoNoBorder {
		border-color: transparent;
	}


	a:hover img.photo,
	a:active img.photo,
	a:hover img.photoBorder,
	a:active img.photoBorder,
	a:hover img.photoNoBorder,
	a:active img.photoNoBorder {
		border-color: rgb(184,177,176); /* light warm grey */
	}


/* Video */

	 .video,
	 .videoBorder,
	 .videoNoBorder {
		margin: -2px 0 0 -2px;
		border-width: 2px;
		border-style: solid;
		border-color: rgb(235,233,232); /* very light warm grey */
	}

	.videoNoBorder {
		border-color: transparent;
	}


/* Animation */

	 .animation,
	 .animationBorder,
	 .animationNoBorder {
		margin: -2px 0 0 -2px;
		border-width: 2px;
		border-style: solid;
		border-color: rgb(235,233,232); /* very light warm grey */
	}

	.animationNoBorder {
		border-color: transparent;
	}




/* Main Nav */

	.mNav {
		position: absolute;
		top: 0;
		left: 372px;
		width: 578px;
		height: 22px;
		background: transparent url(../img/global/mnav_links.gif) 0 0 no-repeat;
	}

	.mNav li {
		position: absolute;
		top: 0;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.mNav li,
	.mNav li a {
		display: block;
		height: 22px;
	} 
	
	.mNav li a {
		text-decoration: none;
		text-align: center;
	}

	.mNav li a span {
		visibility: hidden;
	}

	/* individual link areas */

	#mNavArti { left: 0px; }
	#mNavExhi { left: 77px; }
	#mNavNews { left: 187px; }
	#mNavFair { left: 249px; }
	#mNavPubl { left: 310px; }
	#mNavGall { left: 430px; }
	#mNavCont { left: 510px; }

	#mNavArti, #mNavArti a { width: 58px; }
	#mNavExhi, #mNavExhi a { width: 91px; }
	#mNavNews, #mNavNews a { width: 43px; }
	#mNavFair, #mNavFair a { width: 41px; }
	#mNavPubl, #mNavPubl a { width: 101px; }
	#mNavGall, #mNavGall a { width: 62px; }
	#mNavCont, #mNavCont a { width: 68px; }

	#mNavArti a:hover { background: transparent url(../img/global/mnav_links.gif)    0px -22px no-repeat; }
	#mNavExhi a:hover { background: transparent url(../img/global/mnav_links.gif)  -77px -22px no-repeat; }
	#mNavNews a:hover { background: transparent url(../img/global/mnav_links.gif) -187px -22px no-repeat; }
	#mNavFair a:hover { background: transparent url(../img/global/mnav_links.gif) -249px -22px no-repeat; }
	#mNavPubl a:hover { background: transparent url(../img/global/mnav_links.gif) -310px -22px no-repeat; }
	#mNavGall a:hover { background: transparent url(../img/global/mnav_links.gif) -430px -22px no-repeat; }
	#mNavCont a:hover { background: transparent url(../img/global/mnav_links.gif) -510px -22px no-repeat; }


/* sNav - secondary navigation */
	
	.sNavColumn {
		float: left;
		width: 140px;
	}

	.sNav {
		width: 125px;
		padding-bottom:21px;
		font-size: 11px;
		line-height: 13px;
		text-transform: uppercase;
	}

	.sNav li {
		margin: 0 0 9px 0;
	}

	.sNav a {
		text-decoration: none;
	}


/* tNav - tertiary navigation */

	.tNavArea {
		height: 14px;
		margin: -1px 0 8px 0;
		color: rgb(102,89,87); /* warm grey */
		text-transform: uppercase;
		font-size: 11px;
		line-height: 14px;
	}

	.tNav {
		display: inline;
	}
	
	.tNav li {
		display: inline;
		height: 12px;
		margin: 0;
	} 
	
	.tNav a {
		text-decoration: none;
	}

	/* tNav arrows (rollover) */

	.tNav li#tNavArrowLeft  { background: transparent url(../img/global/tnav_triangle.gif)   4px  0px no-repeat; }
	.tNav li#tNavArrowRight { background: transparent url(../img/global/tnav_triangle.gif) -18px 0px no-repeat; }

	.tNav li#tNavArrowLeft  a:hover { background: transparent url(../img/global/tnav_triangle.gif)   4px -20px no-repeat; }
	.tNav li#tNavArrowRight a:hover { background: transparent url(../img/global/tnav_triangle.gif) -18px -20px no-repeat; }

	.tNav li#tNavArrowLeft  span { visibility: hidden; }
	.tNav li#tNavArrowRight span { visibility: hidden; }

	/* tNav detailing */

	.tNav li#tNavIndex { margin-right: 15px; }
	.tNav li#tNavCounter { text-transform: none; }
	.tNav li#tNavPhoto { margin: 0 5px 0 30px; }
	.tNav li#tNavVideo { margin: 0 5px 0 30px; }
	.tNav li#tNavAnimation { margin: 0 5px 0 30px; }
	.tNav li#tNavCommentary { margin: 0 5px 0 30px; }




/* More link */

	.more {
		font-size: 10px;
		line-height: 16px;
		text-transform: uppercase;
	}

	.more .chevron {
		font-size: 12px;
		margin-left: 1px;
	}

	
	.more a:link,
	.more a:visited {
		color: rgb(184,177,176); /* light warm grey */
		color: rgb(102,89,87); /* warm grey */
		text-decoration: none;
	}

	.more a:hover,
	.more a:active {
		color: rgb(220,38,0); /* hot red */
		text-decoration: none;
	}




/* Lists with links */

	ul.links li {
		padding-bottom: 2px;
	}


/* Text column */

	.textColumn {
		float: left;
		width: 400px;
		margin-top: -3px;
	}



/* Sidebar Column */
	
	.sidebarColumn {
		float: left;
		width: 370px;
		margin-left: 30px;
	}

	.sidebarColumn .photoArea  {
		margin: 0 0 27px 0;
	}

	.sidebarColumn .photoArea img {
	}

	.sidebarColumn .caption {
		width: 160px; /* placeholder - should be matched to photo width */
		margin: 0 0 0 0;
	}


/* Home Page */

	.homePhotoColumn {
		float: left;
		width: 570px;
	}

	.homePhotoColumn .caption {
		color: rgb(184,177,176); /* light warm grey */
	}

	.homeTextColumn {
		float: left;
		width: 270px;
		margin-top: 40px;
		margin-left: 57px;
	}

	.homeTextColumn p,
	.homeTextColumn h3,
	.homeTextColumn h4 {
		width: 270px;
		margin: 0;
	}

	.homeTextColumn .more {
		margin-top: 1px;
	}

	.homeTextColumn h3 {
		margin-bottom: 13px;
	}

	.homeTextColumn .headline {
		margin-bottom: 3px;
	}




	.homeListing {
		margin-bottom: 13px;
	}

	.homeListing li {
		margin-bottom: 12px;
	}


/* Artists Page */

	.artistsListColumn {
		float: left;
		width: 170px;
		margin-top: 5px;
		line-height: 12px; 
		text-transform: uppercase;
		text-align: right;
		/* background-color: #fec; */
	}

	.artistsListColumn div {
		width: 100%;
		height: 30px;
	}

	.artistsListColumn a {
		text-decoration: none;
	}


	.artistsPhotoColumn {
		float: left;
		width: 244px;
		margin-top: 5px;
		margin-left: 22px;
		/* background-color: #cef; */
	}

	.artistsPhotoColumn img {
		position: absolute;
		left: 0;
		visibility: hidden;
	}


/* Artwork Column (holds a single _lg photo) */

	.artworkColumn {
		float: left;
		width: 810px;
	}

	.artworkColumn .photoArea {}
	.artworkColumn .videoArea {}
	.artworkColumn .animationArea {}

	.artworkColumn .photoArea .caption { margin-top: 0px; }
	.artworkColumn .videoArea .caption { margin-top: 0px; }
	.artworkColumn .animationArea .caption { margin-top: 4px; }

	/* commentary area */

	.artworkColumn .commentaryArea {
		top: 9px;
	}

	.artworkColumn .commentaryArea img { 
		float: left;
	}

	.artworkColumn .commentaryArea .commentary { 
		width: 400px;
		float: left;
		margin:-2px 0 0 20px;
	}



/* Artwork Index Column (holds and index of _sm photos with text on right) */

	.artworkIndexColumn {
		float: left;
		width: 810px;
	}

	.artworkIndexColumn .artwork {
		clear: left;
		width: 810px;
		padding-bottom: 27px;
	}

	.artworkIndexColumn .photoArea {
		float: left;
		width: 244px; /* optionally, this can be made narrower: width = 4px + (width of widest image in column) */
	}

	.artworkIndexColumn img {
		float: right;
	}

	.artworkIndexColumn .text {
		float: left;
		width: 400px;
		margin-top: -3px;
		margin-left: 16px;
	}

	.artworkIndexColumn p {
		margin-bottom: 0;
	}

	.artworkIndexColumn a { text-decoration: none; }

	.artworkIndexColumn a:link, .artworkIndexColumn a:visited { color: rgb(33,27,26); /* warm black */ }
	.artworkIndexColumn a:hover, .artworkIndexColumn a:active { color: rgb(220,38,0); /* hot red */ }




/* Fair Listing */

	.fairListingColumn {
		float: left;
		width: 240px;
		margin-top: -3px;
	}

	.fairListingColumn p,
	.fairListingColumn h4 {
		width: 240px;
		margin-bottom: 0;
	}

	.fairListingColumn .fair {
		margin-bottom: 27px;
	}

	.fairListingColumn .yearSection {
		margin-bottom: 9px;
	}

	.fairListingColumn .yearSection p {
		margin-bottom: 2px;
	}

	.fairListingColumn .yearSection h4 {
		margin-bottom: 2px;
	}


/* Fair Photo */

	.fairPhotoColumn {
		float: left;
		width: 504px;
		margin-left: 30px;
	}

	.fairPhotoColumn .photoArea {
		margin-bottom: 18px;
	}

	.fairPhotoColumn .caption {
		line-height: 12px;
		margin-top: -1px;
	}




/* Exhibition Photo Column */

	.exhibitionPhotoColumn {
		float: left;
		width: 370px; /* replaced by actual photo width; 370px max */
		margin-right: 30px;
	}

/* Exhibition Text */

	.exhibitionTextColumn {
		float: left;
		top: -3px;
		width: 400px;
	}

	.exhibitionTextColumn .headSection {
		margin-bottom: 27px;
	}

	.exhibitionTextColumn .section {
		margin-bottom: 18px;
	}

	.exhibitionTextColumn .link {
		margin-bottom: 2px;
	}

	

/* Exhibition Index Column (holds and index of _sm photos with text on right)  very similar to artworkIndexColumn */

	.exhibitionIndexColumn {
		float: left;
		width: 660px;
	}

	.exhibitionIndexColumn .exhibitionNoPhoto,
	.exhibitionIndexColumn .exhibition {
		clear: left;
		width: 660px;
		padding-bottom: 27px;
	}

	.exhibitionIndexColumn .photoArea {
		float: left;
		width: 244px; /* optionally, this can be made narrower: width = 4px + (width of widest image in column) */
	}

	.exhibitionIndexColumn img {
		float: right;
	}

	.exhibitionIndexColumn .text {
		float: left;
		width: 400px;
		margin-top: -3px;
		padding-left: 16px;
	}

	.exhibitionIndexColumn .exhibitionNoPhoto .text {
		float: none;
		margin-left: 238px;
		padding-left: 18px;
		border-left: solid 4px rgb(235,233,232); /* very light warm grey */
	}

	.exhibitionIndexColumn p {
		margin-bottom: 0;
	}

	.exhibitionIndexColumn p.reception {
		margin-top: 9px;
	}


/* Publication Index Column */

	.publicationIndexColumn {
		float: left;
		width: 810px;
	}

	.publicationIndexColumn .publication {
		clear: left;
		width: 810px;
		padding-bottom: 37px;
	}

	.publicationIndexColumn .photoArea {
		float: left;
		width: 214px;
	}

	.publicationIndexColumn img {
		float: right;
	}

	.publicationIndexColumn .text {
		float: left;
		width: 400px;
		margin: -3px 0 9px 16px;
	}

	.publicationIndexColumn p {
		margin-bottom: 7px;
	}

	.publicationIndexColumn .link {
		margin-bottom: 1px;
	}



/* Text Listing Column (text items on left, optional photo on right) */

	.textListingColumn {
		float: left;
		width: 810px;
		margin-top: -3px;
	}

	.textListingColumn .text {
		width: 400px;
		padding-bottom: 18px;
		font-size: 12px;
		line-height: 18px;
	}

	.textListingColumn .photoArea {
		float: right;
		clear: right;
		width: 390px;
		padding-bottom: 18px;
	}

	.textListingColumn .photoArea img {
		float: left;
	}

	.textListingColumn .caption {
		width: 130px;
		float: left;
		margin: 0 0 0 6px;
	}


/* Text Listing Column Compact (text only; whitespace tightened up) */

	.textListingColumnCompact {
		float: left;
		width: 360px;
		margin-top: -3px;
	}

	.textListingColumnCompact .text {
		padding-bottom: 27px;
		font-size: 12px;
		line-height: 18px;
	}

	.textListingColumnCompact .text p,
	.textListingColumnCompact .text h4 {
		width: 360px;
		margin-bottom: 0;
	}


/* Form Column */
	
	.formColumn {
		float: left;
		width: 475px;
		margin-top: -3px;
	}

	form {
		position: relative;
		width: 100%;
		margin-top: 27px;
		padding: 36px 0 36px 0;
		background-color: rgb(235,233,232); /* very light warm grey */
	}
	
	form .section {
		margin-bottom: 27px;
	}

	.fieldSection {
		width: 100%;
		margin: 0 0 3px 0;
	}

	.fieldTitle {
		float: left;
		width: 110px;
		padding: 2px 0 0 0;
		text-align: right;
		font-style: normal;
		line-height: 16px;
		color: rgb(57,48,46); /* warm black lightened */
	}

	.fieldArea {
		margin: 0 0 0 118px;
		padding: 0;
		color: rgb(57,48,46); /* warm black lightened */
	}

	.fieldArea p {
		width: 340px;
		margin-bottom: 4px;
	}

	input,
	textarea {
		border: solid 1px rgb(184,177,176); /* light warm grey */
		background-color: rgb(250,250,250);
	}

	input.radioButton {
		border: none;
		background-color: transparent;
		margin-right: 3px;
	}


	.submit {
		margin: 8px 0 0 118px;
	}

	.submit a:link {
		font-weight: bold;
		text-decoration: none;
		text-transform: uppercase;
	}

/* Form As Sent */

	.form-as-sent {
		margin-top: 30px;
		padding: 30px 30px 23px 30px;
		white-space: pre;
		line-height: 13px;
		color: rgb(57,48,46); /* warm black lightened */
		background-color: rgb(235,233,232); /* very light warm grey */

	}






/* Top Links */

	.topLinks {
		top: -2px;
		width: 100%;
		padding-bottom: 36px;
		line-height: 16px;
	}

	.topLinks li {
		margin-bottom: 5px;
	}

	.topLinks a:link,
	.topLinks a:visited {
		text-decoration: none;
		color: rgb(33,27,26); /* warm black */
	}
	
	.topLinks a:link strong,
	.topLinks a:visited strong {
		text-decoration: none;
		color: rgb(57,48,46); /* warm black lightened */
	}
	
	.topLinks a:hover,
	.topLinks a:active,
	.topLinks a:hover strong,
	.topLinks a:active strong {
		color: rgb(220,38,0); /* hot red */
	}
	
/* Intro Text (for use in index and Listing columns) */

	.introText {
		width: 400px;
		top: -3px;
		padding-bottom: 27px;
	}



/* Footer */

	.footer {
		position: relative;
		clear: both;
		width: 900px;
		margin: 0 37px 0 37px;
		padding: 50px 0 27px 0;
	}

/* Footer Text */

	.fText {
		width: 950px;
		letter-spacing: 1px;
		font-size: 11px;
		color:rgb(184,177,176); /* light warm grey */
		color: rgb(102,89,87); /* warm grey */
	}
	
	.fText span {
		padding: 0 5px 0 7px;
		border-left: solid 2px rgb(184,177,176); /* light warm grey */
		border-left: solid 2px rgb(235,233,232); /* very light warm grey */
	}
	
	.fText span.name {
		border: none;
		padding-left: 0;
		letter-spacing: 2px;
		text-transform: uppercase;
	}
	
	.fText a:link,
	.fText a:visited {
		text-decoration: none;
		color:rgb(184,177,176); /* light warm grey */
		color: rgb(102,89,87); /* warm grey */
	}
	
	.fText a:hover,
	.fText a:active {
		text-decoration: none;
		color: rgb(220,38,0); /* hot red */
	}