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

*/	

/* 	Colors:
	#191b1c; cool black L=10
	#444647; cool grey L=30
	#5c5e5e; cool grey L=40
	#515354; cool grey L=35
	#757778; cool grey L=50
	#8c9292; cool grey L=60
	#c2c8c8; cool grey L=80
	#fbfbfc; cool grey L=99
	#546066; grey-blue L=40
	#c62e00; tomato red L=45 OLD
 	#d63e11; tomato red L=50
*/

/* Block Elements */

	div, p, ul, img, h1, h2, h3, h4, h5 {
		display: block;
		position: relative;
		padding: 0;
		border-style: none;
		border-width: 0;
		margin: 0;
	}

/* List Items */

	li {
		display: list-item;
		position: relative;
		list-style-type: none;
		list-style-position: outside;
		text-indent: 0;
	}

/* Typeface */

	body,
	td,
	input,
	textarea,
	h1, h2, h3, h4, h5 {
		font-family: Georgia,serif;
		font-size: 14px;
		line-height: 20px;
		color: #444647; /* cool grey L=30 */
		text-align: left;
	}

	p {
		margin: 0 0 10px 0;
	}

	img {
		/* alt text */
		font-size: 12px;
		line-height: 18px;
		color: #8c9292;  /* cool grey L=60 */
	}

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

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

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

/* Headings */

	h1, h2, h3, h4, h5 {
		font-weight: normal;
		text-transform: uppercase;
	}

	h2 {
		margin-bottom: 9px;
		font-size: 16px;
		color: #d63e11; /* tomato red L=50 */
	}

	h3 {
		margin: 10px 0 9px 0;
		font-size: 15px;
		color: #d63e11; /* tomato red L=50 */
		text-transform: none;
	}

	h4 {
	}




/* Links */

	a {
		text-decoration: underline;
	}

	a:link,
	a:visited {
		color: #515354; /* cool grey L=35 */
		cursor: pointer;
	}
	
	a:hover,
	a:active {
		color: #d63e11; /* tomato red L=50 */
		cursor: pointer;
	}

	a:focus {
		outline: none;
	}

/* Special */

	.end {  /* used to ensure float columns fill their containing box */
		clear: left;
		border-bottom: solid 1px white;
	}

	.small-caps {
		font-size: 0.95em;
		text-transform: uppercase;
	}

/* Primary Page Organization */

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


	#page {
		width: 1100px;
		margin: 31px 0 31px 0;
	}

	#main {
		float: right;
		width: 852px;
		margin: 26px 0 0 0;
		padding-top: 46px;
	}

	#nav {
	}
	
	#footer {
		width: 1100px;
		margin: 0 0 0 0;
		clear: both;
	}
	
	




/* Wordmark */

	#wordmark {
		position: absolute;
		left: 248px;
		top: 3px;
		width: 226px;
		height: 23px;
		background: no-repeat 0 0 url(../img/global/john_hartman.gif);
	}

	#wordmark a {
		display: block;
		width: 226px;
		height: 23px;
		text-decoration: none;
		text-indent: -999px;
	}

	#wordmark a:link,
	#wordmark a:visited {
		background: none;
	}

	#wordmark a:hover,
	#wordmark a:active {
		background: no-repeat 0 -23px url(../img/global/john_hartman.gif);
	}


/* Main Nav */

	#main-nav {
		width: 219px;
		border-left: solid 4px #546066; /* grey-blue L=40 */
		font-family: Arial, sans-serif;
		font-size: 11px;
		line-height: 20px;
		white-space: nowrap;
		text-transform: uppercase;
	}

	#main-nav h4 {
		height: 16px;
		width: 200px;
		padding: 2px 0;
		margin-left: 8px;
		background-image: url(../img/global/nav.gif);
		background-repeat: no-repeat;
		text-indent: -9999px;
		overflow: hidden;
	}

	.nav-h-paintings { background-position: 0 0px; }
	.nav-h-works-on-paper { background-position: 0 -20px; }
	.nav-h-projects { background-position: 0 -40px; }
	.nav-h-publications { background-position: 0 -60px; }
	.nav-h-artist { background-position: 0 -80px; }
	.nav-h-prints { background-position: 0 -100px; }

	#main-nav ul {
		width: 200px;
		margin-left: 19px;
	}

	#main-nav li {
		height: 16px;
		padding: 2px 0;
		background-image: url(../img/global/nav.gif);
		background-repeat: no-repeat;
		list-style-type: none;
		text-indent: -9999px;
	}

	#main-nav a {
		display: block;
		position: absolute;
		width: 100%;
		height: 16px;
		text-decoration: none;
		overflow: hidden;
	}

	#main-nav a:link,
	#main-nav a:visited {
		background-image: none;
	}

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

	#main-nav .here {
		display: block;
		position: absolute;
		width: 100%;
		height: 16px;
		background-image: url(../img/global/nav.gif);
		background-repeat: no-repeat;
	}

	.nav-2009-2010 { width: 74px; background-position: -200px -0px; }
	.nav-2009-2010 a:hover,
	.nav-2009-2010 a:active { background-position: -400px -2px; }
	.nav-2009-2010 .here { background-position: -600px -2px; }

	.nav-2007-2008 { width: 74px; background-position: -200px -20px; }
	.nav-2007-2008 a:hover,
	.nav-2007-2008 a:active { background-position: -400px -22px; }
	.nav-2007-2008 .here { background-position: -600px -22px; }

	.nav-2003-2006-cities { width: 114px; background-position: -200px -40px; }
	.nav-2003-2006-cities a:hover,
	.nav-2003-2006-cities a:active { background-position: -400px -42px; }
	.nav-2003-2006-cities .here { background-position: -600px -42px; }

	.nav-1995-1998-big-north { width: 142px; background-position: -200px -60px; }
	.nav-1995-1998-big-north a:hover,
	.nav-1995-1998-big-north a:active { background-position: -400px -62px; }
	.nav-1995-1998-big-north .here { background-position: -600px -62px; }

	.nav-1999-2003 { width: 74px; background-position: -200px -80px; }
	.nav-1999-2003 a:hover,
	.nav-1999-2003 a:active { background-position: -400px -82px; }
	.nav-1999-2003 .here { background-position: -600px -82px; }

	.nav-1992-1993-painting-the-bay { width: 186px; background-position: -200px -100px; }
	.nav-1992-1993-painting-the-bay a:hover,
	.nav-1992-1993-painting-the-bay a:active { background-position: -400px -102px; }
	.nav-1992-1993-painting-the-bay .here { background-position: -600px -102px; }

	.nav-1989-1999 { width: 74px; background-position: -200px -120px; }
	.nav-1989-1999 a:hover,
	.nav-1989-1999 a:active { background-position: -400px -122px; }
	.nav-1989-1999 .here { background-position: -600px -122px; }

	.nav-garden { width: 62px; background-position: -200px -140px; }
	.nav-garden a:hover,
	.nav-garden a:active { background-position: -400px -142px; }
	.nav-garden .here { background-position: -600px -142px; }

	.nav-georgian-bay { width: 100px; background-position: -200px -160px; }
	.nav-georgian-bay a:hover,
	.nav-georgian-bay a:active { background-position: -400px -162px; }
	.nav-georgian-bay .here { background-position: -600px -162px; }

	.nav-2000-2010 { width: 74px; background-position: -200px -180px; }
	.nav-2000-2010 a:hover,
	.nav-2000-2010 a:active { background-position: -400px -182px; }
	.nav-2000-2010 .here { background-position: -600px -182px; }

	.nav-1990-2000 { width: 74px; background-position: -200px -200px; }
	.nav-1990-2000 a:hover,
	.nav-1990-2000 a:active { background-position: -400px -202px; }
	.nav-1990-2000 .here { background-position: -600px -202px; }

	.nav-1985-1989 { width: 74px; background-position: -200px -220px; }
	.nav-1985-1989 a:hover,
	.nav-1985-1989 a:active { background-position: -400px -222px; }
	.nav-1985-1989 .here { background-position: -600px -222px; }

	.nav-killarney { width: 75px; background-position: -200px -240px; }
	.nav-killarney a:hover,
	.nav-killarney a:active { background-position: -400px -242px; }
	.nav-killarney .here { background-position: -600px -242px; }

	.nav-newfoundland { width: 114px; background-position: -200px -260px; }
	.nav-newfoundland a:hover,
	.nav-newfoundland a:active { background-position: -400px -262px; }
	.nav-newfoundland .here { background-position: -600px -262px; }

	.nav-rivers-and-cities { width: 99px; background-position: -200px -280px; }
	.nav-rivers-and-cities a:hover,
	.nav-rivers-and-cities a:active { background-position: -400px -282px; }
	.nav-rivers-and-cities .here { background-position: -600px -282px; }

	.nav-cities-1 { width: 56px; background-position: -200px -300px; }
	.nav-cities-1 a:hover,
	.nav-cities-1 a:active { background-position: -400px -302px; }
	.nav-cities-1 .here { background-position: -600px -302px; }

	.nav-cities-2 { width: 58px; background-position: -200px -320px; }
	.nav-cities-2 a:hover,
	.nav-cities-2 a:active { background-position: -400px -322px; }
	.nav-cities-2 .here { background-position: -600px -322px; }

	.nav-columbia-river { width: 110px; background-position: -200px -340px; }
	.nav-columbia-river a:hover,
	.nav-columbia-river a:active { background-position: -400px -342px; }
	.nav-columbia-river .here { background-position: -600px -342px; }

	.nav-books-and-catalogues { width: 143px; background-position: -200px -360px; }
	.nav-books-and-catalogues a:hover,
	.nav-books-and-catalogues a:active { background-position: -400px -362px; }
	.nav-books-and-catalogues .here { background-position: -600px -362px; }

	.nav-articles-and-reviews { width: 128px; background-position: -200px -380px; }
	.nav-articles-and-reviews a:hover,
	.nav-articles-and-reviews a:active { background-position: -400px -382px; }
	.nav-articles-and-reviews .here { background-position: -600px -382px; }

	.nav-about { width: 54px; background-position: -200px -400px; }
	.nav-about a:hover,
	.nav-about a:active { background-position: -400px -402px; }
	.nav-about .here { background-position: -600px -402px; }

	.nav-contact { width: 69px; background-position: -200px -420px; }
	.nav-contact a:hover,
	.nav-contact a:active { background-position: -400px -422px; }
	.nav-contact .here { background-position: -600px -422px; }

	.nav-1990-1999 { width: 74px; background-position: -200px -440px; }
	.nav-1990-1999 a:hover,
	.nav-1990-1999 a:active { background-position: -400px -442px; }
	.nav-1990-1999 .here { background-position: -600px -442px; }

	.nav-2011-2012 { width: 74px; background-position: -200px -460px; }
	.nav-2011-2012 a:hover,
	.nav-2011-2012 a:active { background-position: -400px -462px; }
	.nav-2011-2012 .here { background-position: -600px -462px; }

	.nav-2013 { width: 41px; background-position: -200px -480px; }
	.nav-2013 a:hover,
	.nav-2013 a:active { background-position: -400px -482px; }
	.nav-2013 .here { background-position: -600px -482px; }

	.nav-videos { width: 58px; background-position: -200px -500px; }
	.nav-videos a:hover,
	.nav-videos a:active { background-position: -400px -502px; }
	.nav-videos .here { background-position: -600px -502px; }

	.nav-2014 { width: 41px; background-position: -200px -520px; }
	.nav-2014 a:hover,
	.nav-2014 a:active { background-position: -400px -522px; }
	.nav-2014 .here { background-position: -600px -522px; }

	.nav-continuous-landscape { width: 162px; background-position: -200px -540px; }
	.nav-continuous-landscape a:hover,
	.nav-continuous-landscape a:active { background-position: -400px -542px; }
	.nav-continuous-landscape .here { background-position: -600px -542px; }



/* Photo */


	.photo {
		display: block;
		overflow: visible;
	}

	.photo img {
		display: block;
		/* clear: both; */
		width: 100%;
		height: 100%;
		/* note: <img> dimensions are placed in style for .photo element */
		z-index: 1;
	}

	.photo a {
		display: block;
		/* clear: both; */
		width: 100%;
		height: 100%;
		z-index: 1;
	}

	.photo .caption {
		display: block;
		position: absolute;
		/* clear: both; */
		margin-top: 4px;
		width: 100%;
		font-size: 12px;
		line-height: 16px;
		color: #757778; /* cool grey L=50 */
		z-index: 2;
	}

/* Shadow */

	.shadow {
		display: block;
		position: absolute;
		/* clear: both; */
		width: 100%;
		height: 100%;
		background-color: #fbfbfc; /* cool grey L=99 */
		overflow: visible;
	}

	.shadow .tl,
	.shadow .tr,
	.shadow .br,
	.shadow .bl {
		display: block;
		position: absolute;
		width: 30px;
		height: 30px;
		background-image: url(../img/global/shadow_corners.png);
		background-repeat: no-repeat;
	}

	.shadow .tl { top: -15px; left: -15px; }
	.shadow .tr { top: -15px; right: -15px; }
	.shadow .br { bottom: -15px; right: -15px; }
	.shadow .bl { bottom: -15px; left: -15px; }

	.shadow .tl, a:link .shadow .tl, a:visited .shadow .tl { background-position: 0 0; }
	.shadow .tr, a:link .shadow .tr, a:visited .shadow .tr { background-position: -30px 0; }
	.shadow .br, a:link .shadow .br, a:visited .shadow .br { background-position: -30px -30px; }
	.shadow .bl, a:link .shadow .bl, a:visited .shadow .bl { background-position: 0 -30px; }

	a:hover .shadow .tl, a:active .shadow .tl { background-position: 0 -60px; }
	a:hover .shadow .tr, a:active .shadow .tr { background-position: -30px -60px; }
	a:hover .shadow .br, a:active .shadow .br { background-position: -30px -90px; }
	a:hover .shadow .bl, a:active .shadow .bl { background-position: 0 -90px; }


	.shadow .t,
	.shadow .b {
		display: block;
		position: absolute;
		width: 100%;
		height: 15px;
		background-image: url(../img/global/shadow_top_bottom.png);
		background-repeat: repeat-x;
	}

	.shadow .t { top: -15px;}
	.shadow .b { bottom: -15px; }

	.shadow .t, a:link .shadow .t, a:visited .shadow .t { background-position: 0 0; }
	.shadow .b, a:link .shadow .b, a:visited .shadow .b { background-position: 0 -15px; }

	a:hover .shadow .t, a:active .shadow .t { background-position: 0 -30px; }
	a:hover .shadow .b, a:active .shadow .b { background-position: 0 -45px; }

	.shadow .l,
	.shadow .r {
		display: block;
		position: absolute;
		width: 15px;
		height: 100%;
		background-image: url(../img/global/shadow_left_right.png);
		background-repeat: repeat-y;
	}

	.shadow .l { left: -15px; }
	.shadow .r { right: -15px; }

	.shadow .l, a:link .shadow .l, a:visited .shadow .l { background-position: 0 0; }
	.shadow .r, a:link .shadow .r, a:visited .shadow .r { background-position: -15px 0; }

	a:hover .shadow .l, a:active .shadow .l { background-position: -30px 0; }
	a:hover .shadow .r, a:active .shadow .r { background-position: -45px 0; }


/* Basic (plain ol' page) */

	.basic {
		width: 830px;
	}

	.basic p,
	.basic h2,
	.basic h3,
	.basic h4 {
		width: 380px;
	}

	.basic .section {
		width: 100%;
		margin-bottom: 30px;
	}

	.basic .sidebar {
		float: right;
		clear: right;
		width: 400px;
		text-align: left;
	}

	.basic .sidebar .photo {
		margin: 2px 0 30px 0;
	}

/* Articles */

	.article-list {
		width: 650px;
	}

	.article-list .article {
		width: 100%;
	}

	.article .caption {
		float: right;
		clear: right;
		z-index: 2;
		padding-left: 11px;
		width: 140px;
		font-size: 12px;
		line-height: 17px;
		color: #757778; /* cool grey L=50 */
	}

	.article .photo {
		float: right;
		z-index: 1;
		margin-bottom: 20px;
		margin-left: 20px;
	}

	.article .text-area {
		margin: -1px 10px 35px 0;
		font-size: 13px;
		line-height: 18px;
	}

	.article .text-area p {
		max-width: 300px;
		margin-bottom: 0;
	}

	.article .text-area h2 {
		max-width: 340px;
		font-size: 14px;
		line-height: 18px;
		text-transform: none;
		color: #d63e11; /* tomato red L=50 */
	}

/* Books */

	.book-list {
		width: 752px;
	}

	.book-list .book {
		clear: both;
		width: 100%;
	}

	.book .photo-area {
		float: left;
		width: 224px;
		margin-right: 36px;
		margin-bottom: 28px;
	}

	.book .photo-area .photo {
		float: right;
	}

	.book .text-area {
		float: left;
		width: 455px;
		font-size: 13px;
		line-height: 17px;
		margin: -1px 0 28px 0;
	}

	.book .text-area p {
		margin-bottom: 8px;
	}

	.book .text-area h2 {
		margin-bottom: 8px;
		font-size: 16px;
		line-height: 17px;
		color: #d63e11; /* tomato red L=50 */
	}

	.book .text-area h3 {
		margin-bottom: 8px;
		font-size: 15px;
		line-height: 17px;
		text-transform: none;
		color: #d63e11; /* tomato red L=50 */
	}

	.book .text-area h2 + h3 {
		margin-top: -4px;
	}


/* Commentary */

	.commentary {
		width: 370px;
		top: 2px;
		font-size: 13px;
		line-height: 17px;
	}

	.commentary h2 {
		margin: 8px 0;
		font-size: 15px;
		line-height: 17px;
		color: #d63e11; /* tomato red L=50 */
	}

	.commentary h2:first-child {
		margin-top: 0px;
	}

	.commentary h3 {
		margin: 8px 0;
		font-size: 14px;
		line-height: 16px;
	}

	.commentary h3:first-child {
		margin-top: 0px;
	}

	.commentary p {
		margin-bottom: 8px;
	}


/* Video */

	.video-area {
		width: 100%;
		margin-bottom: 30px;
	}

	.video-area:first-of-type {
		margin-top: 24px;
	}

	.video-area p {
		width: 576px;
	}

	.video-area p.title {
		margin-top: 12px;
		margin-bottom: 3px;
		font-size: 15px;
		line-height: 17px;
		text-transform: none;
		color: #d63e11; /* tomato red L=50 */
	}