/* @override 
	http://aprillittledesigns.com/greg-lipelt/styles.css
	http://aprillittledesigns.com/greg-lipelt/css/styles.css
*/

/* @group reset */ /** @group reset */

	html, body, div, h1, h2, h3, h4, ul, li,  p {
		margin: 0px;
		padding: 0px;
	}
	
	
	li {
		list-style-type:none;
	}

/* @end reset **/

/* @group body and wrapper */ /** @group body and wrapper */

	body {
		min-width: 800px;
		background-color: #000;
		color: #A9A9A9;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		line-height: 1.5em;
		font-size: 11px;
	}
	
	h3 {
			line-height: 1.5em;
			font-size: 12px;
	}
	
	a {
		color: #A9A9A9;
	}
	
	#wrapper {
		text-align: left;
		width: 800px;
		height: 100%;
		margin: 0 auto;
	}

/* @end body and wrapper **/

/* @group header and titles */ /** @group header and titles */

	#header {
		width:  700px;
		margin: 0 auto;
		height: 115px; /* 70px for title + 23px for main nav + 22px for secondary nav */
	}
	
	#landscapes #header, #portraits #header, #watercolor #header {
		/* on the pages with secondary nav the header
			does not need to include extra height in 			the main nav that contains the signature
			descender */
		height: 93px;
	}
	
	/* both the site and page titles are floated so the
		line up next to each other */
	#header #site-title a { /* signature */
		float: left;
		height: 70px; 
		width: 326px;
		text-indent: -9999px;
		background-position: 3px 0; /* nudge signature over to line up with nav */
		background-repeat: no-repeat;
		background-image: url(../images/headers/signature-red.gif);
	}
	
	#header #page-title {
		float: left;
		height: 70px;
		width: 350px;
		text-indent: -9999px;
		background-position: left bottom;
		background-repeat: no-repeat;
	}
	
	/* @group page titles */ /** @group page titles */
		#index h1 {
			background-image: url(../images/headers/header-artwork.gif);
		}
		
		#gallery h1, #landscapes h1, #portraits h1, #watercolor h1 {
			background-image: url(../images/headers/header-gallery.gif);
		}
		#bio h1 {
			background-image: url(../images/headers/header-biography.gif);
		}
		#classes h1 {
			background-image: url(../images/headers/header-classes.gif);
		}
		#contact h1 {
			background-image: url(../images/headers/header-contact.gif);
		}
		#illustration h1 {
			background-image: url(../images/headers/header-illustration.gif);
		}
	/* @end page titles **/
/* @end header and titles **/

/* @group main nav */ /** @group main nav */
	
	#nav {
		/* 23px for main nav + 22px for secondary nav placeholder since
			most pages don't have secondary nav */
		height: 45px;
		width: 700px;
		clear: left; /* clear the titles that are floated */
		background-repeat: no-repeat;
		background-position: top left;
		background-image:url(../images/nav/top-nav-bg.jpg);
	}	
	
	
	#landscapes #nav, #watercolor #nav, #portraits #nav {
		/* pages with secondary nav don't need the extra 22px of
			height for the main nav */
		height: 23px;
	}
	
	#nav li {
		float:left;
		text-indent:-9999px;
	}
	
	#nav li a {
		border:0;
		text-decoration:none;
		display:block;
		background:transparent url(../images/nav/top-nav-red.jpg) no-repeat;
		margin-top: 1px; /* let line show throug */
		height: 22px; /* 22px + 1px = 23px (main nav height) */
	}
	
	/* @group main nav hover shifts */ /** @group main nav hover shifts */
	
		#bio-link {
			/* amount of margin to the left of the bio button in the main nav background image */
			margin-left: 184px;
			display: inline; /* fixes IE double float-margin bug */
		}
		#bio-link a {
		   width:42px;
		}
		#bio #bio-link a{
			/* shift the background to the left
				to move the nav button into
				place, compensating for the left
				margin */
		   background-position: -184px 0px;
		}
		#bio-link a:link, #bio-link a:visited {
		   background-position: -184px -46px;
		}
		#bio-link a:hover, #bio-link a:focus {
		   background-position: -184px -23px;
		}
		
		#gallery-link a {
		   width: 62px;
		}
		#gallery-link a:link, #gallery-link a:visited 		{
			/* bio left margin + bio width = gallery offset */
		   background-position: -226px -46px;
		}
		#gallery-link a:hover, #gallery-link a:focus {
		   background-position: -226px -23px;
		}
		#gallery #gallery-link a, #portraits #gallery-link a, #landscapes #gallery-link a, #watercolor #gallery-link a {
		   background-position: -226px 0px;
		}
		
		#illustration-link a {
			width: 126px;
		}
		#illustration-link a:link, #illustration-link a:visited {
			/* bio left margin + bio width + gallery width = illustration offset */
		   background-position: -288px -46px;
		}
		#illustration-link a:hover, #illustration-linkt a:focus {
		   background-position: -288px -23px;
		}
		#illustration #illustration-link a{
		   background-position: -288px 0px;
		}
		
		#classes-link a {
			width: 62px;
		}
		#classes-link a:link, #classes-link a:visited 		{
			/* bio left margin + bio width + gallery width + illustration width = classes offset */
		   background-position: -414px -46px;
		}
		#classes-link a:hover, #classes-link a:focus {
		   background-position: -414px -23px;
		}
		#classes #classes-link a{
		   background-position: -414px 0px;
		}
		#contact-link a {
			width: 64px;
		}
		#contact-link a:link, #contact-link a:visited 		{
			/* bio left margin + bio width + gallery width + illustration width + classes width = contact offset */
		   background-position: -476px -46px;
		}
		#contact-link a:hover, #contact-link a:focus {
		   background-position: -476px -23px;
		}
		#contact #contact-link a{
		   background-position: -476px 0px;
		}
	
	/* @end main nav hover shifts **/

/* @end main nav **/

/* @group gallery nav */ /** @group gallery nav */

	#nav-gallery {
		background-image:url(../images/nav/sec-nav-bg.jpg);
		background-repeat: no-repeat;
		background-position: top left;
		margin-left: 50px;
		width: 690px;
		height: 22px;
	}
	
	#nav-gallery li {
		float: left;
		text-indent:-9999px;
	}
	
	#nav-gallery li a {
		height:22px;
		display:block;	
		border:0;
		text-decoration:none;
		background:transparent url(../images/nav/secondary-nav.jpg) no-repeat;
	
	}

	/* @group gallery nav hover shifts */ /** @group gallery nav hover shifts */
		
		#landscapes-link {
			/* line up with background image */
			margin-left: 220px;
			display: inline; /* fixes IE doubled float-margin bug */
		}
		#landscapes-link a {
			width: 74px;
		}
		#landscapes-link a:link, #landscapes-link a:visited {
		   background-position: 0 -44px;
		}
		#landscapes-link a:hover, #landscapes-link a:focus {
		   background-position: 0 -22px;
		}
		#landscapes #landscapes-link a {
			background-position: 0 0;
		}
		
		#portraits-link a {
			width: 67px;
		}
		#portraits-link a:link, #portraits-link a:visited {
		   background-position: -74px -44px;
		}
		#portraits-link a:hover, #portraits-link a:focus {
		   background-position: -74px -22px;
		}
		#portraits #portraits-link a {
			background-position: -74px 0;
		}
		
		#watercolor-link a {
			width: 119px;
		}
		#watercolor-link a:link, #watercolor-link a:visited {
		   background-position: -141px -44px;
		}
		#watercolor-link a:hover, #watercolor-link a:focus {
		   background-position: -141px -22px;
		}
		#watercolor #watercolor-link a {
			background-position: -141px 0;
		}
	
	/* @end gallery nav hover shifts **/

/* @end gallery nav **/


/* @group content */ /** @group content */

	#content{
		width: 700px;
		margin: 22px auto 0;
	}	
	
	#content h2 {
		width: 400px;
		height: 42px;
		text-indent: -9999px;
		/* -12px compensates for top margin included
			in the image
			the 0 compensates for bottom margin 
			included in the image 
			-- this should be -14px but that causes
			problems in IE */
		margin: -12px auto 0;
		font-size: 13px;
	}
	
	#classes #content h2 {
		background:transparent url(../images/headers/header-plein-aire.gif) no-repeat;
	}
	
	#classes #content p {
		margin-top: 10px;
	}
	
	#classes #content, #contact #content {
		width: 500px;
	}

	/* @group index and bio content */ /** @group index and bio content */
		
		#index #content img {
			display: block;
			/* -9px top margin compensates for the
				margin in the image */
			margin: -9px auto 20px;
		}
		
		#bio #content img {
			display: block;
			/* auto left and right margin to center */
			margin: 0 auto;
		}
		
		#index #content div{
			margin-left: 25px;
			margin-right: 25px;
			margin-top: 25px;
		}
		
		
		#bio #content a {
			/* center the link to shutterandbrush */
			display: block;
			width: 14em;
			margin: .1em auto;
		}
		#bio #content p {
			width: 500px;
			margin: 2em auto;
		}
		
	/* @end index and bio content **/ 

	/* @group gallery content */ /** @group gallery content */
	
		/* @group main gallery content */ /** @group main gallery content */
			
			#gallery .caption img{
				border: 0;
				margin-left: 0;
			}
			#gallery .thumb div{
				margin: 0;
				float: none;
			}
			#gallery .thumb a{
				text-decoration: none;
			}
			
			#gallery-thumbnails li {
				float: left;
				margin: 0 10px;
				display: inline;
			}
			
			#landscapes-thumb a, #portraits-thumb a, #watercolor-thumb a {
				background-position: 0 0;
				border: none;
			}
			#landscapes-thumb a.caption, #portraits-thumb a.caption, #watercolor-thumb a.caption {
				display: block;
				text-indent: -9999px;
				margin: 0 auto;
				height: 20px;
			}
			
			#landscapes-thumb {
				/* 249px for image + 3px for left and
					right margins */
				width: 255px;
			}
			#landscapes-thumb a.caption {
				background-image: url(../images/gallery/landscapes-link-gallery.gif);
				width: 72px;
			}
			#landscapes-thumb a:link.caption, #landscapes-thumb a:visited.caption {
				background-position: 0 -22px;
			}
			#landscapes-thumb a:hover.caption, #landscapes-thumb a:focus.caption {
				background-position: 0 0;
			}
			
			/* 131px for image + 3px for left and
					right margins */
			#portraits-thumb {
				width: 137px;
			}
			#portraits-thumb a.caption {
				background-image: url(../images/gallery/portraits-link-gallery.gif);
				width: 62px;
			}
			#portraits-thumb a:link.caption, #portraits-thumb a:visited.caption {
				background-position: 0 -22px;
			}
			#portraits-thumb a:hover.caption, #portraits-thumb a:focus.caption {
				background-position: 0 0;
			}
			
			/* 223px for image + 3px for left and
					right margins */
			#watercolor-thumb {
				width: 229px;
			}
			#watercolor-thumb a.caption {
				background-image: url(../images/gallery/watercolor-link-gallery.gif);
				width: 126px;
			}
			#watercolor-thumb a:link.caption, #watercolor-thumb a:visited.caption {
				background-position: 0 -22px;
			}
			#watercolor-thumb a:hover.caption, #watercolor-thumb a:focus.caption {
				background-position: 0 0;
			}
	
		/* @end main gallery content **/ 
	
		/* @group gallery detail content */ /** @group gallery detail content */
		
			#landscapes #content, #portraits #content, #watercolor #content {
				width: 600px;
			}
			
			#portraits #content h2 {
				background-image: url(../images/headers/header-portraits.gif);
			}
			#watercolor #content h2 {
				background-image: url(../images/headers/header-watercolor.gif);
			}
			#landscapes #content h2 {
				background-image: url(../images/headers/header-landscapes.gif);
			}
			
			#content .top-copy {
				line-height: 1.5em;
				width: 450px;
				margin: 0 auto 15px;
			}
			
			.thumb img {
				border: solid 3px #3E3E3E;
			}
			
			#landscapes .thumb div{
				height: 185px;
				/* 600 (content width) / 2 (number of images per line) 
					- 20 for the 10px margin on each side */
				width: 280px;
			}
			#portraits .thumb div{
				height: 210px;
				/* 600 (content width) / 3 (number of images per line) 
					- 20 for the 10px margin on each side */
				width: 180px; 
			}
			#watercolor .thumb div{
				height: 175px;
				/* 600 (content width) / 2 (number of images per line) 
					- 20 for the 10px margin on each side */
				width: 280px;
			}
			.thumb div{
				float:left;
				text-align: center;
				/* top and bottom margin in em 
					to adjust for font size changes */
				margin: 2em 10px;
				display: inline; /* fixes IE doubled float-margin bug */
			}
			
			#illustration #content p {
				margin-bottom: 22px;
			}
			
			#classes #content p {
				margin-bottom: 44px;
			}

		/* @end gallery detail content **/

	/* @end gallery content **/

	/* @group illustration content */ /** @group illustration content */
	
	#content #service-description {
		margin: 0 auto;
		width: 500px;
	}
	
	#content #ads {
		width: 406px;
		margin: 10px auto;
	}
	#content #ads li {
		margin-top: 20px;
		width: 402px;
	}
	#content #ads img {
		border: solid 3px #3E3E3E;
	}
	#content #storyboard {
		margin: 20px auto;
		height: 220px;
		width: 406px;
		background-color: #393939;
		border: solid 2px #393939;
	}
	#content #storyboard li {
		float: left;
		width: 135px;
		height: 100px;
		margin: 5px auto;
	}
	#content #storyboard img {
		display: block;
		margin: 0 auto;
		border-width: 0;
	}
	
	#content #cookbooks {
		width: 406px;
		margin: 10px auto;
	}
	#content #cookbooks li {
		float: left;
		display: inline;
		/* 406px width - 6px for borders - 138px for first cookbook 
			- 139 for second cookbook = 123px remaining.
			123px / 3 (left margin, space between cookbooks, right margin)
			= 41px */
		margin-left: 41px;
	}
	#content #cookbooks img {
		display: block;
		border: solid 3px #3E3E3E;
	}
	
	/* @end illustration content **/

	/* @group classes content */ /** @group classes content */
		
		#registration {
			margin: 25px auto;
			width: 500px;
			padding: 20px;
			background-color: #FFFFFF; /*A9A9A9*/
			color: #000;
		}
		
		#registration h3 {
			text-align: center;
			font-size: 12px;
		}
		#registration li {
			padding-top: 1em;
			border-bottom: 1px solid;
			border-bottom-color: #000;
		}
		#registration #city, #registration #state, #registration #zip {
			float: left;
			display: block;
		}
		#registration #city {
			width: 220px;
		}
		#registration #state {
			width: 100px;
		}
		#registration #zip {
			width: 180px;
		}
		#registration #phone {
			clear: left;
		}
		
		#registration ul {
			margin: 3em 0;
		}
		
		#registration #mailto label {
			margin-left: 10em;
		}
		#registration #mailto span {
			margin-left: 15em;
			display: block;
			margin-top: -1.5em;
		}
		
		#registration em {
			text-decoration: underline;
		}
	
	/* @end classes content **/

/* @end content **/

/* @group footer */ /** @group footer */
	
	#footer {
		clear: both;
		width: 500px;
		margin: 0 auto;
		padding: 2em 0;
	}
	
/* @end footer **/