* {
	margin:0;
	padding:0;
}
html {
	height:102%; /* ensures that all pages will have scrollbars, to keep the content from jumping horizontally when going from short image page to long story page */
}
body {
	background-color: #333;
	behavior:url("../csshover.htc") /* allows the IE star hacks below */
}
#wrap /* this div contains all of the page content; index page has embedded top margin */ {
	margin-right:auto;
	margin-left:auto;
	width:950px;
}
#printOnly {
	display:none;
}
#header {
	margin:20px 0 20px 0;
	border-bottom:1px solid #f0f0f0;
	padding-bottom:6px;
}
#header ul /* horizontal nav bar */ {
	font-family:"Trebuchet MS",Verdana,Tahoma,Geneva,Arial,Helvetica,sans-serif;
	font-weight:bold;
	list-style-type: none;
	text-transform:uppercase;
	color:#f0f0f0;
	padding-left:20px; /* nudges the type over to the right */
	padding-bottom:12px; /* nudges the rule down */
}
#header li {
	float:left;
	position:relative; /* needed for dropdown menu */
	font-size:16px;
	margin-top:3px;
	margin-right:24px;
}
#header li:first-child /* the MDM link to the home page; bigger type */ {
	font-size:24px;
	margin-top:0px; 
}
#header li a /* links in the header, unlike those in the body text, don't need a dotted bottom border */ {
	border-bottom:none;
	padding:0 6px;
}
#header li a:hover {
	color:#c00;
	background-color:#ffc;
}
#header ul li ul /* dropdown menu */ {
	margin:0;
	width:7.8em;
	position:absolute; /* needed for dropdown menu */
	top:0px; /* can't make this too large, or there will be vertical space between the li and the ul within it, meaning the dropdown menu will disppear before you can hover over it */
	left:-4px; /* makes up for the left padding in the li: hover and ul:hover below to line up the dropdown text w/the main menu li */
	padding:0;  /* alters the padding from #header ul */
	background-color:#666;
	display:none; /* it's a dropdown menu that will reappear on #header ul li:hover */
	opacity:0.92; /* a bit of transparancy on the dropdown */
	-moz-opacity:0.92;
	filter:alpha(opacity=92);
	z-index:2; /* moving it to the front in the stacking order; otherwise the Writing li will appear above it, which looks odd */
}
#header ul li ul li {
	width:100%; /* needed to make sure the list items stack */
	opacity:2;
	-moz-opacity:2;
	filter:alpha(opacity=200);
}
#header ul li ul li:first-child {
	font-size:16px; /* equalizes the type size for all items in dropdown menu */
	padding-top:34px;
}
#header ul li:hover ul, #header ul li ul:hover {
	display:block; /* this is to make the dropdown menu display */
	padding-left:4px; /* this and the padding-right bring the link background in a bit from the edges of the dropdown menu */
	padding-right:4px;
}
#header a {
	display:block; /* useful for long names in dropdown menus */
}
* html #header ul {
	font-size:24px; /* IE hack to make the MDM type the correct size */
}
* html #header ul li ul li {
	font-size:16px; /* IE hack to make the first link in the dropdown menu the correct size; may be unnecessary */
}
#left, #story, #page /* on visual art pages, #left contains the main image; on writing pages, #story contains the story; on portfolio pages, #page contains the main image */ {
	width:620px;
	height:524px;
	text-align:center;
	float:left;
	margin: 7px 20px 20px 22px; /* the left margin is 2px more to allow for the 2px padding in the #header li a:link. Bottom margin is to put some distance between the end of a story and the bottom of the page */
	padding-right:30px;
	border-right:1px solid #f0f0f0;
}
#story {
	width:540px; /* this and the padding-left keep the text from being too wide to read comfortably */
	height:100%;
	text-align:left;
	padding-left:80px;
}
#page /* contains the main image on news portfolio pages */ {
	height:100%;
}
#story img /* there's just one, the sheep in Sheep Man */ {
	margin-top:20px;
	margin-bottom:20px;
}
#right /* on visual art and news pages, this div contains the title and caption info; on writing pages, contains links to other stories; on about page, contains external links */ {
	width:200px;
	float:left;
	margin:0;
	padding:0;
}
#video /* for videos that are embedded at 500 px wide. the text-align center property fails here, at least with an embedded Flickr video, thus the larger left-hand margin. see racingpigs.html for how to keep Flash video from covering a drop-down menu (changing the z-index has no effect) */ {
	width:500px;
	margin-left:48px;
}
.clear {
	clear:both;
}
.main /* lead image on visual art pages; sheep photo in sheep man story */ {
	padding:12px;
	background-color:#f0f0f0;
}
#portfolio /* used on news design landing page */ {
	margin-right:auto;
	margin-left:auto;
	width:950px;
	text-align:center;
}
.news /* divs with 200px images and info on portfolio page; three will fit in each row */ {
	width:224px;
	margin:30px 46px 15px 46px;
	float:left;
}
.news200 /* 200px images on portfolio page */ {
	padding:12px;
	border:0;
	margin-bottom:6px;
	background-color:#f0f0f0;
}

/* BEGIN INDEX PAGE IMAGE STYLES (some of which are also used on portfolio page */

.thumb /* small photos on index page; they're all linked, so "a .thumb" wasn't necessary */ {
	padding:6px;
	background-color:#f0f0f0;
	border:0;
	margin:0 10px;
}
a :hover.thumb, a :hover.news200 /* on hover, changes image background on index page to light yellow. also used on portfolio page */ {
	background-color:#ffc;
}
#thumbnails { /* paragraph containing thumb images on index page */
	text-align:center;
	margin-bottom:18px;
}
#thumbnails a, #portfolio a {
	border: 0;
	background-color:#333; /* matches page background so it won't appear when mouse hovers over linked images on index page. */
}

/* END INDEX PAGE IMAGE STYLES */

img.arrow /* navigation arrows on visual arts pages */{
	display:inline;
	margin:0 6px 0 6px;
	border:0;
}
h1 /* index page has embedded styles for h1 */ {
	font-family:Verdana,Tahoma,Geneva,Arial,Helvetica,sans-serif;
	font-size:1.5em;
	color:#f0f0f0;
	margin:0 0 .2em 0;
	padding:0;
}
#story h2 /* h2 appears only on writing pages and on the index. index page has an embedded style for h2 */ {
	font-family:Verdana,Tahoma,Geneva,Arial,Helvetica,sans-serif;
	color:#f0f0f0;
	font-size:1em;
	font-weight:normal;
	font-style:italic;
	border-bottom:1px solid #f0f0f0;
	padding-bottom:10px;
	margin:10px 0 12px 0;
}
h3 /* used on portfolio pages */ {
	font-family:Verdana,Tahoma,Geneva,Arial,Helvetica,sans-serif;
	font-size:1.2em;
	color:#f0f0f0;
	margin:0 0 .2em 0;
	padding:0;
}
p,ul {
	font-family:Verdana,Tahoma,Geneva,Arial,Helvetica,sans-serif;
	font-size:1em;
	color:#f0f0f0;
	line-height:1.5em;
	margin:0 0 .75em 0;
}
#small { /* copyright info on About page */
	font-size:.8em;
	font-style:italic;
	margin-top:24px;
}
#nav /* paragraph that contains the nav arrows */ {
	text-align:left;
	margin-bottom: 1em;
}
#navwithhome /* paragraph that contains nav arrows and grid-square link to portfolio home; for some reason, the grid pushes the nav arrows up 7px */ {
	text-align:left;
	margin-top:7px;
	margin-bottom: 1em;
}
#nav a, #navwithhome a {
	border-bottom:0;
	background-color:#333;
}
ul {
	list-style-type:square;
	list-style-position:outside;
	padding-left:40px;
}
li {
	margin-bottom:.2em;
}
a {
	text-decoration:none;
}
a:link, a:visited {
	color:#f0f0f0;
	border-bottom:dotted 1px #f0f0f0;
}
a:hover {
	color:#c00;
	border-bottom:none;
	background-color:#ffc;	
}