/*
	style_global.css
	Stylesheet for katharineharvey.com
	
	Copyright ©2009 Gordon Hicks, all rights reserved	
*/	


/* General */

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

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

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

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

	object,
	embed {
	}


/* Typeface */

	body,
	input,
	textarea {
		font-family: Arial,sans-serif;
		font-size: 12px;
		line-height: 17px;
		color: #454c4c; /* cool grey  */
		text-align: left;
	}

	p {
		position: relative;
		margin: 0 0 8px 0;
	}

	img {
		font-size: 10px;
		line-height: 12px;
		color: #727879  /* cool grey - light */
	}

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

	strong {
		font-style: normal;
		font-weight: bold;
		color: #555e5e;  /* cool grey - lightened slightly */
	}

	em strong,
	strong em {
		font-style: italic;
		font-weight: bold;
		color: #555e5e;  /* cool grey - lightened slightly */
	}
	
	cite {
		font-style: italic;
		font-weight: normal;
	}

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


/* headings */

	h1, h2, h3, h4 {
		margin: 0;
		padding: 0;
		font-size: 12px;
		line-height: 17px;
		font-weight: bold;
		color: #555e5e;  /* cool grey - lightened slightly */
	}

	h1 { /* see .header */
	}

	h2 {
		width: 600px;
		height: 24px;
		margin: 48px 0 27px 47px;
		background-repeat: no-repeat;
	}

	h2 span { visibility: hidden; }

	h3 {
		width: 360px;
		height: 20px;
		margin: 27px 0 25px -2px;
		background-repeat: no-repeat;
	}

	h3 span { visibility: hidden; }

	h1 cite, h2 cite, h3 cite, h4 cite,
	h1 em, h2 em, h3 em, h4 em {
		font-weight: bold;
		font-style: italic;
	}

/* Links */

	a {
		cursor: pointer;
		text-decoration: underline;
		/* border-bottom-style: solid; */
		/* border-bottom-width: 2px; */
	}

	a:link,
	a:visited {
		color: #596262; /* cool grey  */
		/* border-bottom-color: #bcc3c4  cool grey - light */
	}
	
	a:hover,
	a:active {
		color: #0d0f0f; /* dark cool grey  */
		/* border-bottom-color: #67c5ce;  cyan */
	}

/* Special */

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

/* Page Layout */

	html,
	body  {
		margin: 0;
		padding: 0;
		background-color: white;
	}

	.page {
		width: 1040px;
		margin: 0 auto;
	}

	.navColumn {
		width: 250px;
		float: left;
	}

	.mainColumn {
		width: 790px;
		float: left;
	}

/* logo */

	h1 {
		display: block;
		position: relative;
		width: 214px;
		height: 70px;
		margin-left: 18px; 
		background: url(../img/global/katharine_harvey.gif) no-repeat;
	}

	h1 a {
		display: block;
		width: 214px;
		height: 70px;
		text-decoration: none;
		/* border: none; */
	}

	h1 a:hover,
	h1 a:active {
		background: url(../img/global/katharine_harvey.gif) no-repeat 0 -70px;
	}
	
	h1 span { visibility: hidden; }
	
	
/* mNav */

	.mNav {
		width: 190px;
		margin: 21px 0 0 38px;
		line-height: 14px;
	}
	
	.mNav .section {
		width: 100%;
		margin-top: 2px;
		overflow: hidden; /* see note 1 */
	}
	
	.mNav .head {
		width: 190px;
		height: 14px;
		top: 5px; /* see note 1 */
		margin: 0 0 5px 0;
		background-image: url(../img/global/mnav.gif);
		background-repeat: no-repeat;
	}

	.mNav .head span { visibility: hidden; }

	
	.mNav ul {
		width: 190px;
		top: 5px; /* see note 1 */
	}
	
	.mNav li {
		width: 190px;
		height: 14px;
		padding-bottom: 5px;
		background: url(../img/global/mnav.gif) no-repeat 0 0;
	}
	
	.mNav li.here {
		background: url(../img/global/mnav.gif) no-repeat -190px 0;
	}
	
	.mNav li div {
		height: 14px;
		margin-left: 26px;
		background-image: url(../img/global/mnav.gif);
		background-repeat: no-repeat;
	}

	.mNav li a {
		display: block;
		position: relative;
		height: 14px;
		text-decoration: none;
		/* border: none; */
	}	

	.mNav li a:hover,
	.mNav li a:active {
		background-image: url(../img/global/mnav.gif);
		background-repeat: no-repeat;
	}

	.mNav li span { visibility: hidden; }	

	/* mNav heads */
	#sect-artworks .head { background-position: 0 -28px; }
	#sect-writing .head { background-position: 0 -42px; }
	#sect-calendar .head { background-position: 0 -56px; }
	#sect-artist .head { background-position: 0 -70px; }

	/* mNav links */
	/* vertical module = 14px, width = about width of text + 10px */

	#link-current-paintings div,
	#link-current-paintings a { width: 125px; } /* max 164px */
	#link-current-paintings div { background-position: 0 -84px; }
	#link-current-paintings a:hover,
	#link-current-paintings a:active { background-position: -190px -84px; }

	#link-water-works div,
	#link-water-works a { width: 92px; }
	#link-water-works div { background-position: 0 -98px; }
	#link-water-works a:hover,
	#link-water-works a:active { background-position: -190px -98px; }

	#link-caribou div,
	#link-caribou a { width: 62px; }
	#link-caribou div { background-position: 0 -112px; }
	#link-caribou a:hover,
	#link-caribou a:active { background-position: -190px -112px; }

	#link-fountains div,
	#link-fountains a { width: 70px; }
	#link-fountains div { background-position: 0 -126px; }
	#link-fountains a:hover,
	#link-fountains a:active { background-position: -190px -126px; }

	#link-lenticular-photos div,
	#link-lenticular-photos a { width: 128px; }
	#link-lenticular-photos div { background-position: 0 -140px; }
	#link-lenticular-photos a:hover,
	#link-lenticular-photos a:active { background-position: -190px -140px; }

	#link-articles-and-reviews div,
	#link-articles-and-reviews a { width: 124px; }
	#link-articles-and-reviews div { background-position: 0 -154px; }
	#link-articles-and-reviews a:hover,
	#link-articles-and-reviews a:active { background-position: -190px -154px; }

	#link-artist-statements div,
	#link-artist-statements a { width: 126px; }
	#link-artist-statements div { background-position: 0 -168px; }
	#link-artist-statements a:hover,
	#link-artist-statements a:active { background-position: -190px -168px; }

	#link-news-and-exhibitions div,
	#link-news-and-exhibitions a { width: 126px; }
	#link-news-and-exhibitions div { background-position: 0 -182px; }
	#link-news-and-exhibitions a:hover,
	#link-news-and-exhibitions a:active { background-position: -190px -182px; }

	#link-about div,
	#link-about a { width: 50px; }
	#link-about div { background-position: 0 -196px; }
	#link-about a:hover,
	#link-about a:active { background-position: -190px -196px; }

	#link-contact div,
	#link-contact a { width: 65px; }
	#link-contact div { background-position: 0 -210px; }
	#link-contact a:hover,
	#link-contact a:active { background-position: -190px -210px; }

	#link-biography div,
	#link-biography a { width: 75px; }
	#link-biography div { background-position: 0 -266px; }
	#link-biography a:hover,
	#link-biography a:active { background-position: -190px -266px; }

	#link-installations div,
	#link-installations a { width: 99px; }
	#link-installations div { background-position: 0 -280px; }
	#link-installations a:hover,
	#link-installations a:active { background-position: -190px -280px; }

	#link-earlier-works div,
	#link-earlier-works a { width: 99px; }
	#link-earlier-works div { background-position: 0 -294px; }
	#link-earlier-works a:hover,
	#link-earlier-works a:active { background-position: -190px -294px; }


/* h2 – page header */











/* photoLgAddShadow */

	.photoLgAddShadow {
		top: -20px;
		left: -20px;
	}

	.photoLgAddShadow .shadow {
		width: 100%;
		height: 100%;
		position: absolute;
		overflow: hidden;
	}

	.photoLgAddShadow .shadow .tp .lt,
	.photoLgAddShadow .shadow .tp .rt,
	.photoLgAddShadow .shadow .bm .lt,
	.photoLgAddShadow .shadow .bm .rt {
		width: 30px;
		height: 30px;
		background-repeat: no-repeat;
		background-image: url(../img/global/shadow_lg_corn.gif);
		overflow: hidden;
	}
	
	.photoLgAddShadow .shadow .tp .lt { float: left;  background-position: 0 0; }
	.photoLgAddShadow .shadow .tp .rt { float: right; background-position: -30px 0; }
	.photoLgAddShadow .shadow .bm .lt { float: left;  background-position: 0 -30px; }
	.photoLgAddShadow .shadow .bm .rt { float: right; background-position: -30px -30px; }
	
	.photoLgAddShadow .shadow .tp,
	.photoLgAddShadow .shadow .bm {
		height: 30px;
		width: 100%;
		background-repeat: repeat-x;
		background-image: url(../img/global/shadow_lg_hori.gif);
		overflow: hidden;
	}

	.photoLgAddShadow .shadow .tp { background-position: 0 0 ; }
	.photoLgAddShadow .shadow .bm { background-position: 0 -30px ; }

	.photoLgAddShadow .shadow .me {
		width: 100%;
		overflow: hidden;
	}

	.photoLgAddShadow .shadow .me .lt,
	.photoLgAddShadow .shadow .me .rt {
		width: 30px;
		height: 100%;
		background-repeat: repeat-y;
		background-image: url(../img/global/shadow_lg_vert.gif);
		overflow: hidden;
	}
	
	.photoLgAddShadow .shadow .me .lt { float: left;  background-position: 0 0 ; }
	.photoLgAddShadow .shadow .me .rt { float: right; background-position: -30px 0 ; }



	.photoLgAddShadow .imgArea {
		display: block;
		top: 20px;
		left: 20px;
		background-color: #f3f3f3;
	}

	.photoLgAddShadow a {
		display: block;
		margin: 0;
		padding: 0;
		text-decoration: none;
		/* border: none; */
	}

	.photoSmAddShadow img {
		display: block;
	}


/* photoSmAddShadow */

	.photoSmAddShadow {
		top: -12px;
		left: -12px;
	}

	.photoSmAddShadow .shadow {
		width: 100%;
		height: 100%;
		position: absolute;
		overflow: hidden;
	}

	.photoSmAddShadow .shadow .tp .lt,
	.photoSmAddShadow .shadow .tp .rt,
	.photoSmAddShadow .shadow .bm .lt,
	.photoSmAddShadow .shadow .bm .rt {
		width: 22px;
		height: 22px;
		background-repeat: no-repeat;
		background-image: url(../img/global/shadow_sm_corn.gif);
		overflow: hidden;
	}
	
	.photoSmAddShadow .shadow .tp .lt { float: left;  background-position: 0 0; }
	.photoSmAddShadow .shadow .tp .rt { float: right; background-position: -22px 0; }
	.photoSmAddShadow .shadow .bm .lt { float: left;  background-position: 0 -22px; }
	.photoSmAddShadow .shadow .bm .rt { float: right; background-position: -22px -22px; }
	
	.photoSmAddShadow .shadow .tp,
	.photoSmAddShadow .shadow .bm {
		height: 22px;
		width: 100%;
		background-repeat: repeat-x;
		background-image: url(../img/global/shadow_sm_hori.gif);
		overflow: hidden;
	}

	.photoSmAddShadow .shadow .tp { background-position: 0 0 ; }
	.photoSmAddShadow .shadow .bm { background-position: 0 -22px ; }

	.photoSmAddShadow .shadow .me {
		width: 100%;
		overflow: hidden;
	}

	.photoSmAddShadow .shadow .me .lt,
	.photoSmAddShadow .shadow .me .rt {
		width: 22px;
		height: 100%;
		background-repeat: repeat-y;
		background-image: url(../img/global/shadow_sm_vert.gif);
		overflow: hidden;
	}
	
	.photoSmAddShadow .shadow .me .lt { float: left;  background-position: 0 0 ; }
	.photoSmAddShadow .shadow .me .rt { float: right; background-position: -22px 0 ; }
	
	.photoSmAddShadow .imgArea {
		display: block;
		top: 12px;
		left: 12px;
		background-color: #f3f3f3;
	}

	.photoSmAddShadow a {
		display: block;
		margin: 0;
		padding: 0;
		text-decoration: none;
		/* border: none; */
	}

	.photoSmAddShadow img {
		display: block;
	}



/* Caption */

	.caption {
		color: #737d80;
	}

	.caption .title {
		font-style: italic;
	}

	.caption .year { }

	.caption .medium { }

	.caption .dimensions {
		white-space: nowrap;
	}

	.caption .edition {
		white-space: nowrap;
	}

/* Links (list of links) */

	.links {
		line-height: 19px;
	}


/* Text Column */

	.textColumn {
		width: 360px;
		float: left;
		padding-left: 50px;
		margin-top: -4px;
	}



/* Article (Articles + Review items) */

	.article {
		margin: 0 0 20px 0;
		line-height: 19px;
	}

	.article p {
		margin: 0;
	}



/* News */

	.news {
		width: 720px;
		margin-left: 50px;
	}

/* News Item (news or exhibition item) */

	.newsItem {
		width: 360px;
		margin-bottom: 27px;
	}
	
	.newsItem .head {
		margin-bottom: 8px;
	}

	.newsItem .head p {
		margin: 0;
	}

	.newsItem .text {
		margin-bottom: 8px;
	}

	.news .photoArea {
		width: 310px;
		float: right;
		clear: right; /* note 2 */
		overflow: visible;
	}

/* Photo Column (to right of text column )*/
	
	.photoColumn {
		width: 225px;
		float: left;
		padding-left: 50px;
	}
	

/* Photo Area (for .photoColumn ) */

	.photoArea {
		margin-bottom: 30px;
	}

	.photoArea .caption {
		margin: -19px 0 0 1px;
		line-height: 15px;
	}





/* Footer */

	.footer {
		width: 1040px;
		height: 10px;
		clear: both;
		padding: 80px 0 11px 0;
	}

/* fNav */

	.fNav {
		height: 10px;
		margin-left: 12px;
		line-height: 10px;
		font-size: 10px;
		
	}

	.fNav li {
		display: block;
		position: absolute;
		height: 10px;
		border-left: solid 2px #a6f2fa;
		background-image: url(../img/global/mnav.gif);
		background-repeat: no-repeat;
	}

	.fNav a {
		display: block;
		position: relative;
		height: 10px;
		text-decoration: none;
		/* border: none; */
	}

	.fNav a:hover,
	.fNav a:active {
		background-image: url(../img/global/mnav.gif);
		background-repeat: no-repeat;
	}

	.fNav li span { visibility: hidden; }

	#foot-home   { width: 51px; background-position: 6px -226px; left: 0px; border: none;  } 
	#foot-home a { width: 51px; } 
	#foot-home a:hover, #foot-home a:active { background-position: -184px -226px; } 

	#foot-copyright   { width: 81px; background-position: 6px -240px; left: 51px; } 
	#foot-copyright a { width: 81px; } 
	#foot-copyright a:hover, #foot-copyright a:active { background-position: -184px -240px; } 

	#foot-credits   { width: 64px; background-position: 6px -254px; left: 134px; } 
	#foot-credits a { width: 64px; } 
	#foot-credits a:hover, #foot-credits a:active { background-position: -184px -254px; } 

	#foot-contact   { width: 72px; background-position: 6px -212px; left: 200px; } 
	#foot-contact a { width: 72px; } 
	#foot-contact a:hover, #foot-contact a:active { background-position: -184px -212px; } 




/*

	NOTES 
	
	note 1: To trim 5px from the bottom of the vertical rule, the 
		contents of .mNav .section are shifted down 5px, and the .section
		overflow is set to hidden

	note 2: MSIE 6 and 7 clear both left and right (bug). This means if the image is longer than the news item, there
		the top of the next item will be pushed below the bottom of the image. MSIE 8 and all other browsers seem ok.

		
*/