body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote {
	margin: 0; padding: 0; border: 0;
}
hr {
	color: #A85021; background-color: #A85021;
	height: 2px;
	border: none;
	width: 75%;
	margin-bottom: 16px;
}

nav.topMenu {
	text-align: right;
	background: #EF732F; /* signature brown */
	border-bottom: 2px solid #A85021;
	font-size: 24px; line-height: 30px;
}

div.mastheadImage { 
	display: block;
	position: absolute;
	top: 0px; left: 0px;
	padding: 0px 0px 0px 5px;
	float: left;
	z-index: 1;
}

nav.topMenu ul ul {
	display: none;
}

	nav.topMenu ul li:hover > ul {
		display: block;
	}

nav.topMenu ul {
	padding: 39px 5px;
	list-style: none;
	position: relative;
	display: inline-table;
}

	nav.topMenu ul li {
		float: left;
	}

		nav.topMenu ul li:hover { /* top-level items darker background on hover */
			background: #6B3315;
		}
			nav.topMenu ul li:hover a { /* top-level items white text on hover*/
				color: #FF7632;
			}
		
		nav.topMenu ul li a {
			display: block;
			padding: 5px 15px;
			color: #6B3315;		/* darker brown */
			text-decoration: none;
		}
			
		
    /* here's stuff for the dropdowns themselves */
	nav.topMenu ul ul {
		background: #6B3315;
		padding: 0;
		position: absolute; top: 79px;
		z-index: 1;
	}
		nav.topMenu ul ul li {
			float: none; 
			position: relative;
			text-align: left;
		}
			nav.topMenu ul ul li a {
				padding: 5px 10px;
				color: #fff;
			}	
				nav.topMenu ul ul li a:hover {
					background: #4C230F; /* Even darker brown */
				}

/* main site styling */
/* Site Colors
	#EF732F; signature brown (active link color)
	#6B3315; darker brown (link color)
	#4C230F; even darker brown (submenu highlights)
	#C6A08B; desaturated brown (body background color)
	#A56342; light brown (subtle border color)
	#A85021; light brown (image border color)
*/

body {
	background: #C6A08B; /* desaturated version of signature brown */
	font-family: Helvetica, sans-serif;
}

div.bodyDiv { /* styles for the main content div. */
	margin-top: 20px;
	font-size: 12pt; line-height: 18pt;
	/* border: 2px solid black; /* debugging */
}

div.bodyDiv h1 {
	margin-bottom: 18pt;
}

div.bodyDiv h2 {
	margin-bottom: 12pt;
}

div.bodyDiv p {
	margin-bottom: 12pt;
}

div.bodyDiv a {
	text-decoration: none;
	font-weight: bold;
	color: #6B3315;
}

div.bodyDiv a:hover {
	color: #EF732f;
}

div.bodyDiv ol,
div.bodyDiv ul {
	margin-bottom: 12pt;
}
div.bodyDiv ol ul { margin-bottom: 0pt; }
div.bodyDiv ol li,
div.bodyDiv ul li {
	margin-left: 1.35em;
}

div.bodyDiv ol ul li {
	list-style: disc;
	margin-left: 0.9em;
}

/* Blog styles */
div.bodyDiv h1.blogTitle {
	margin-bottom: 0pt;
}

div.tile { /* Re-flowing blocks for Previous Articles tiles*/
	display: inline-block;
	width: 300px;
	height: 300px;
	text-align: center;
	vertical-align: center;
	border: 1px solid black;
}

div.blogImageL { /* left-justified images in blog articles */
	float: left;
	text-align: center;
	margin-right: 20px;
}
div.blogImageL img {
	border: 2px solid #A85021;
	border-bottom: none;
}
div.blogImageL p {
	margin-bottom: 6pt;
}
div.blogImageR { /* left-justified images in blog articles */
	float: right;
	text-align: center;
	margin-left: 20px;
}
div.blogImageR img {
	border: 2px solid #A85021;
	border-bottom: none;
}
div.blogImageR p {
	margin-bottom: 6pt;
}

div.blogImageStretch { /* banner-style images in blog articles */
	width: 100%; height: auto;
	text-align: center;
	margin-right: 20px;
}
div.blogImageStretch img {
	width: 100%; height: auto;
	border: 2px solid #A85021;
	border-bottom: none;
}
div.blogImageStretch p {
	margin-bottom: 6pt;
}

div.blogImageStretchBare { /* banner-style images in blog articles, no border */
	width: 100%; height: auto;
	text-align: center;
	margin-right: 20px;
}
div.blogImageFloatBare { /* image that floats in the column, no border. Good for tweets. */
	width: auto; height: auto;
	margin-left: auto; margin-right: auto;
	margin-bottom: 12pt;
	text-align: center;
}
div.blogImageStretchBare img {
	width: 100%; height: auto;
}
div.blogImageFloatBare img {
	width: auto; height: auto;
}

div.blogImageStretchBare p, div.blogImageFloatBare p {
	margin-bottom: 6pt;
}


/* table styles */
table {
	margin-bottom: 6pt;
}
td {
	padding-left: 0.5em;
	padding-right: 1em;
	border-bottom: 1px solid #A85021;
	vertical-align: top;
}
th {
	 background-color: #A85021;
}

/* Example formatting styles */
div.example { margin-left: 1.5em; border-left: 1px solid #A56342; }
div.example p { padding-left: 0.5em; }
div.example p u,
div.example p mark {
	background-color: #EA9C75; /* desaturated (50) signature brown */
	color: black;
	text-decoration: none;
 }

/* styles for the two-brains scene writing example */
p.organizer::before {
	content: url(/images/blog-images/o-brain.png);
	float: left;
	width: 105px;
}
p.organizer:after { 
	content: "";
	display: block;
	clear: both;
}
p.experiencer { text-align: right; }
p.experiencer::before {
	content: url(/images/blog-images/e-brain.png);
	float: right;
	width: 105px;
}
p.experiencer:after { 
	content: "";
	display: block;
	clear: both;
}


/* misc styles */

div.headShot img { /* my ugly mug */
	border: 2px solid #A85021;
	border-bottom: none;
	margin-right: 20px;
}

div.coverImage { /* book cover images */
	float: left;
	margin-right: 20px;
	margin-bottom: 20px;
	text-align: center;
}

div.coverImage img {
	border: 2px solid #A85021;
}

div.inlineTOC { /* small tables of contents that float at the left margin */
	float: right;
	border: 2px solid #A85021;
	border-right: none;
	padding-left: 10px;
	padding-right: 10px;
	margin-left: 10px;
	margin-right: -20px;
}
div.inlineTOC ul {
	list-style: disc;
}

/* Sidebar styles */
div.sidebar h3 { margin: 12px 0px 12px 0px; }
div.sidebar p  { margin-bottom: 0px; }
div.sidebar p img { margin-bottom: 4px; }
div.sidebar hr { margin: 16px 0px 16px 0px; }

/* email obfuscation styling */
span.foo { display: none; }
span.hover { color: #EF732F; background: #6B3315; }

p.small {
	font-size: 8pt;	
}

/* resizing stuff. The masthead/menu area and the body/sidebar area get
separate treatments because I want them to adjust at different thresholds. */

/* masthead/menu stuff: */
/* 0 to 625 pixels: two-line menu, text home link, no headshot. */
@media screen and (max-width: 762px) {
	nav.topMenu {
		margin: 0px 0px 10px 0px;
		height: 112px; /* two-line menu */
		text-align: center;
	}
	nav.topMenu ul { padding: 22px 5px; }
	div.mastheadImage a.logoLink { display: none; } /* logo link off */
	div.mastheadImage a.noLogoLink { display: inherit; } /* text link on */
	div.headShot { display: none; } /* no headshot */
}
/* 626 to 949 pixels: one-line menu, text home link, headshot on */
@media screen and (min-width: 763px) and (max-width: 949px) { 
	nav.topMenu {
		margin: 0px 0px 20px 0px;
		height: 112px; /* two-line menu */
		text-align: center;
	}
	div.mastheadImage a.logoLink { display: none; } /* logo link off */
	nav.topMenu ul li.noLogoLink { display: inherit; } /* text link on */
	div.headShot { /* headshot on */
		float: left;
		text-align: center;
	}
}
/* 950 or greater: one-line menu, logo home link, headshot on */
@media screen and (min-width: 950px) {
	nav.topMenu {
		margin: 0px 0px 40px 0px;
		height: 112px; /* two-line menu */
	}
	div.mastheadImage a.logoLink { display: inherit; } /* logo link on */
	nav.topMenu ul li.noLogoLink { display: none; }    /* text link off */
	div.headShot { /* headshot on */
		float: left;
		text-align: center;
	}
}

/* body/sidebar stuff: 
   bodyDiv contains the content and the sidebar. Body div is 100% wide when
   the window is narrow; locks to 700+padding and and floats in the center
   for mid-sized windows; grows to 900+padding when the sidebar is on for
   wide windows.
   The content and sidebar divs adjust to turn the sidebar off below 1020
   pixels and for the content to take up the full width except for some
   padding.
*/

/* less than 720 pixels wide:
	bodyDiv is 100%; content is 100%; sidebar is off */
@media screen and (max-width: 719px) {
	div.bodyDiv { /* let the content fill the whole width */
		width: 100%;
	}
	div.content, div.contentNoSidebar { width: 95%; 
		padding: 0px 20px 0px 20px;
		margin-right: auto; margin-left: auto;
	}
	div.sidebar { display: none; }     /* turn off the sidebar */
}
/* 720 to 949 pixels: 
   bodyDiv is 700px centered; content is fixed-width; sidebar is off */
@media screen and (min-width: 720px) and (max-width: 949px) {
	div.bodyDiv { /* fixed-width content, centered */
		width: 700px;
		margin-left: auto; margin-right: auto;
	}
	div.content, div.contentNoSidebar {
		width: 660px;
		padding: 0px 20px 0px 20px;
	}
	div.sidebar { display: none; }           /* sidebar off */
}
/* 950 or greater: 
   bodyDiv is 900 centered; content is 700 px left; sidebar on */
@media screen and (min-width: 950px) {
	div.bodyDiv {  /* fixed-width content but fixed to the left */
		width: 900px;
		position: relative;
		margin-left: auto; margin-right: auto;
	}
	div.content {
		width: 680px;   /* fixed-width content on the left */
		position: absolute; left: 0px;
		padding-right: 20px;
	}
	div.contentNoSidebar { /* content on pages that never have sidebar */
		padding: 0px 20px 0px 20px;
	}
	div.sidebar {       /* sidebar on the right */
		width: 188px;
		position: absolute; right: 0px;
		padding-left: 10px;
		border-left: 2px solid #A56342;
	}
}