/* MYERWEB RESET CSS - cleans out the defaults */
/* v1.0 | 20080212  - slightly purged */

	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, font, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	b, u, i, center,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td {
		margin: 0;
		padding: 0;
		border: 0;
		outline: 0;
		font-size: 100%;
		line-height: 100%;			/* i added this */
		vertical-align: baseline;
		background: transparent;
		}
	body {
		line-height: 1;
		}
	ol, ul {
		list-style: none;
		}
	/* tables still need 'cellspacing="0"' in the markup */
	table {
		border-collapse: collapse;
		border-spacing: 0;
		}
		
		
		
		
/* BASICS, FOUNDATIONS, COMMONALITIES */

body {
	background-color: white;
	color: black;
	font-size: 13px;
	font-family: georgia, times, serif;
	line-height: 160%;
	margin: 0 auto;					/* center every body */
	}
	
p {
	margin-bottom: 1em;
	display: block;
	}
	
h1 {
	font-size: 16px;
	font-weight: bold;
	display: block;
	text-align: left
	}
	
em {
	font-style: italic;
	font-weight: bold;
	}

a:link, a:visited {
	color: green;
	font-family: helvetica, arial, verdana, sans-serif;
	text-decoration: none;
	}
	a:hover {
		text-decoration: underline;
		}
	a:active {
		color: red;
		}

div#backbutton {
	clear: both;
	padding-top: 40px; 					/* why does this have to be padding? */
	text-align: center;
	}
	div#backbutton a {
		font-family: georgia, times, serif;
		font-style: italic;
		font-size: 11px;
		color: #6FB273;
		}				
		div#backbutton a:hover {
			text-decoration: none;
			color: red;
			}	
		div#backbutton a:before {		/* ie7 doesn't understand */
			content: "( "
			}
		div#backbutton a:after {
			content: " )"
			}

div#topback {							/* maybe someday if i'm feeling anal and ambitious I will make a backbutton class with common stuff then separate out top and bottom stuff into ids for particulars which is just this toplevel alignment stuff */
	float: right;						/* right now this is only used in photoblog entries */
	text-align: right;
	}
	div#topback a {
		font-family: georgia, times, serif;
		font-style: italic;
		font-size: 11px;
		color: #6FB273;
		}				
		div#topback a:hover {
			text-decoration: none;
			color: red;
			}	
		div#topback a:before {		/* ie7 doesn't understand */
			content: "( "
			}
		div#topback a:after {
			content: " )"
			}		


.new a:after {
	color: #CA000F;
	font-size: 18px;
	line-height: 60%;
	vertical-align: -10%;
	content: "*";
	}




/* INDEX.HTML */

body#index {
	margin-top: 20%; 		
	text-align: right;
	width: 580px; 							/* size of header image [506px]+ extra for new longer menu*/
	}

	body#index h1 {							/*added 9-20 to combat new larger menu text ("old" photos, "new" photoblog")*/
		float: right;
		margin-bottom: 20px;
		padding-right: 15px;
		}

	/* main list nav */
	ul#indexmenu {							
		margin-top: 12px; 					/* establish a convention: offset everything vertically with top margin */
		text-align: center;
		}	
		ul#indexmenu li {
			display: inline;
			}	
			ul#indexmenu li a {
				border-right: 1px #999999 dotted;
				padding: 0 5px;
				}
			ul#indexmenu li a.last {		/* could use a pseudo-selector but for ie7 */
				border-right: none;
				}
				
	/* little guys */
	p#tinynews, p#copyright  {				
		font-size: 10px;
		margin-right: 15px;					/* list is centered under image, so tuck 'em in a tad so they don't extend beyond it */
		}

	p#tinynews {
		line-height: 105%;
		margin-top: 15px;
		margin-left: 40px;
		}
		p#tinynews:before {					/* won't render in ie7 but neither will the other asterixs denoting new things in subsections */
			content: url("newsstar.png");
			vertical-align: -9%; 			/* i am anal (further evidence: making a png with diff-styled * and :, can't do with text in css2) */
			padding-right: 3px;
			}
	
	p#copyright {
		line-height: 90%;
		margin-top: 45px;
		padding-right: 4px; 				/* for the little dotted line */
		border-right: 1px #999999 dotted;
		} 
		p#copyright a {
			font-family: georgia, times, serif; 	/* keep it classy */
			font-style: italic;
			}




/* UNIQUE SUBSECTIONS */

body#bio, body#copyright {     			/* pages full of text */ 
	margin-top: 20%; 
	text-align: left;
	width: 400px;
	}
	
	/* copyright */
	body#copyright {					/* so it looks like fine print */
		text-align: center;
		font-size: 10px;
		}
	body#copyright img {				/* center the cc logo */
		display: block;
		margin: 0 auto;
		margin-bottom: 20px;
		}

	/* bio */
	body#bio h1 {
		display: inline;
		font-variant: small-caps;
		font-size: 16px;
		letter-spacing: .1em;
		font-weight: normal;
		}
	body#bio p {
		margin-bottom: 1.5em;
		padding-top: 20px;				/* mysteriously needed to push "he can..." down */
		}

/* sketchbooks, main menu and individual pages */
	body#sketchpages {						/* I will deal with this later... left it doctype transitional, no lightview (too slow?) for the moment */
		}
	body#sketchbooks {
		margin-top: 5%;
		width: 760px;
		padding: 0;
		text-align: left;
		}
		
	/* sketchbooks subsection */
	
	div#books dl {
		float: left;
		width: 170px;
		margin: 10px 10px 0px 10px;
		padding: 0;
		}
		div#books dt {
			font-size: 14px;
			padding: 0;
			margin: 0;
			}
		div#books dd {
	    	line-height: 110%;
	    	font-size: 11px;
	    	line-height: 130%;
	    	text-align: left;
	    	margin: 4px 4px 10px 4px;
	    	}	
	    	div#books dd.dates {
	    		margin: 0;
	    		margin-left: 2px;
	    		padding: 0;
	    		font-size: 12px;
	    		font-style: italic;
	    		line-height: 100%;
	    		}
			#books dd.coverpic {
				height: 205px;
				}
				
	#books img {
		margin: 0 auto;
		text-align: center;
		}
	
	/* sketchpages */
	
	ol#sketchmenu {
		list-style: none;
		padding: 0;
		margin: 15px 0;
		text-align: center;
		}
		ol#sketchmenu li {
			display: inline;
			padding: 0;
			margin: 0 5px 0 0;
			}
	
	body#sketchpages #backbutton {
		padding: 0;
		}


	/*photoblog entries*/
	
	body#photoblogentry {
		width: 880px; 			/* exact width that LR pumps the photos out at */
		margin: 20px auto;				/* to get some breathing room? */
		}
		
		/* headers */
		body#photoblogentry h1, body#photoblogentry h2 {
			width: 890px;		/* hangs over edge, not sure if this is the best way to do this */
			text-align: left;
			}
			body#photoblogentry h1 img, body#photoblogentry h2 img {
				display: inline;
				}
			body#photoblogentry h1 a, body#photoblogentry h2 a { /* links look better bold rather than sans serif here... */
				font-family: Georgia, times, serif;
				font-weight: bold;
				}
			body#photoblogentry h1 { /* alot of these are defaults which get overriden in local styles */
				margin-top: 20px;
				margin-left: -5px;
				line-height: 100%;
				color: black;
				font-size: 18px;
				font-weight: bold;
				font-family: Georgia, Times, serif;
				letter-spacing: -1px;
				}
			body#photoblogentry h2 {

				line-height: 100%;
				color: #444;
				font-size: 10px;
				font-weight: bold;
				font-family: Georgia, Times, serif;
				}
				
		/* list of photos */
		body#photoblogentry ul {
			list-style: none;
			width: 880px;
			}
			body#photoblogentry li {
				margin-top: 10px;
				margin-bottom: 10px;
				}
				/*make sure images are centered (looking at you portrait-oriented and smaller ones) */
				body#photoblogentry li img {
					display: block;
					margin: 0 auto;
					}
				
		/* captions */
		body#photoblogentry p.caption {
			width: 950px;
			font-family: Georgia, Times, serif;
			font-size: 14px;
			padding-bottom: 3px;
			margin: 0 auto;
			margin-top: 2px;
			text-align: left;
			line-height: 20px;
			margin-bottom: 10px;
			}
			
			}
			body#photoblogentry p.caption a {
				font-family: Georgia, times, serif;
				font-weight: bold;
				}
				
		body#photoblogentry div#backbutton {
			margin-bottom: 50px;	/* breathing room, looks nicer */
			}



/* TEXTY SUBSECTIONS */

body#subsection {
	margin-top: 10%;
	}
	
	/* widths -- need to specify these for centering + to prevent dls from wrapping under each other */
	
	/* 3+ col lists stretched out to fill using percentages */
	body.photo {
		width: 85%;
	    min-width: 801px;		/* (150px dl + 10px margin) * 5 cols + 1px insurance */
	    max-width: 1201px;		/* (230px dl + 10px margin) * 5 cols + 1px insurance */
	   	padding-left: 5%;		/* make it look centered, lots of extra space in last box */
	    }
	    body.photo dl {
	    	width: 17%;			/* 100% / 4 cols - 3% insurance */
	    	}
	body.ppd {
		width: 85%;
	    min-width: 641px;		/* (150px dl + 10px margin) * 4 cols + 1px insurance */
	    max-width: 961px;		/* (230px dl + 10px margin) * 4 cols + 1px insurance */
	    padding-left: 6%;		/* make it look centered, lots of extra space in last box */
	    }
	    body.ppd dl { 
	    	width: 22%;			/* 100% / 4 cols - 3% insurance */
	    	}
	    
	/* < 3 col lists built off of left with fixed width columns */
	body.people {
	    width: 371px;			/* (175px dl + 10px margin) * 2 cols + 1px insurance */
	    margin-left: 20%;		/* don't center with auto margins! looks funny on such a small list */
	    }
	    body.people dl {
	    	width: 175px;
	    	}
	body.animation, body.photoblog {
	    width: 261px;			/* (250px dl + 10px margin) * 1 col  + 1px insurance */
	    margin-left: 20%;		/* don't center with auto margins! looks funny on such a small list */	
	    }
	    body.animation dl, body.photoblog dl {
	    	width: 300px;		/* breathing room with nothing to run into */
	    	}
	
	/* header graphics or text */
	body#subsection h1 {		/* tuck it back */
		text-indent: -15px;
		}

	/* lists */
	body#subsection dl {		/* widths all specified above */
		margin-top: 10px;
		margin-left: 10px;
		float: left;
		clear: none;
		text-align: left;
		}
			
		body#subsection dt {
			font-size: 14px;
			margin-bottom: 6px;
			}
		body#subsection dd {
			margin-bottom: 7px;
			margin-left: 8px;		/* tucks them in */
			text-indent: -2px;		/* firstline hangs back so if text wraps, subsequent lines appear indented */
			}


	/* themed works along bottom */
	div#themed {
		clear: left; 
		width: 100%;
		margin-left: 10px;			/* to match dls above */
		}
		div#themed h2 {
			clear: both;
			font-size: 14px;
			font-weight: normal;
			}
			
		div#themed dl {
			float: left;
			margin-top: 5px;
			width: 31%;				/* max 3 columns */
			margin-left: 2%;		/* this should be a percentage to allow it to scale + not overflow */
			clear: none;
			}
			div#themed dt {
				font-size: 13px;		/* otherwise they're 14 as per above = goofy */
				margin-bottom: 6px;
				}
			div#themed dd {
				clear: none;
				line-height: 110%;
				font-size: 12px;
				text-indent: 0;
				}
				
	/* hide additional images used in lightview gallerys; accessible through lightview, no-css browsers can see them */
	span.galleryimg {
		display: none;
		}

	/* date style & positioning, for photoblog (could be uesd elsewhere) */
	div.date {
		font-size: 10px;
		color: #999999;
		float:left;
		width: 55px;			/* cutting it sort of close? */
		margin-right: 15px;
		margin-left: -25px;		/* needed to tuck them back a little extra */
	    text-align: right; 		/* depends on element width <-I don't know what this comment meant to me? */ 
		}

	
/* ARTPAGES */

body#artpage.black {
	background: black;
	color: white;
	}

body#artpage h1 img {
	display: block;
	margin: 15px auto;
	}

body#artpage p, body#artpage dl {	/* must specify widths in tags for it to center; different for every img */
	font-size: 11px;
	line-height: 125%;
	margin: 0 auto;
	margin-top: 5px;
	}
	body#artpage dl {				/* inline, under main image */
		margin-top: 1px;
		}	
		body#artpage dt{
			display: inline;
			font-size: inherit;
			font-weight: bold;
			}
		body#artpage dd {
			display: inline;
			font-size: inherit;
			}