body {
 	margin: 0;
	padding: 0;
	font-family: Garamond, times, serif;
	font-size: 80%;
	color: #222;
	background: #d7d6d1;
}


/****************************************
 * Content Sections
 ****************************************/
/*
	The #wrap element is used to apply the beige background color to the
	main body of the page. #content is used to specify that the page is 
	740px wide and centered.
*/

#wrap {
	float: left;
	width: 100%;
	background: #f0eee4;
	}
	
#content {
	margin: 0 auto;
	width: 740px;
	}
	
	
 
/****************************************
 * Text Styles
 ****************************************/
 
h1 {
	margin: 0 0 15px 0;
	font-size: 2.4em;
	font-weight: normal;
	text-align: center;
	}
	
h2 {
	margin: 0 0 15px 0;
	font-size: 1.8em;
	font-weight: normal;
	}
	
h3 {
	clear: both;
	margin: 0 0 15px 0;
	font-size: 1.3em;
	line-height: 1.4em;
	font-weight: bold;
	text-align: center;
	}
	
h4 {
	margin: 15px 0 3px 0;
	font-size: 1.2em;
	font-weight: bold;
	}
	
p {
	margin: 0 0 15px 0;
	font-size: 1.3em;
	line-height: 1.4em;
	}
	
tt {
	margin: 0 0 15px 0;
	font-size: 1.3em;
	line-height: 1.4em;
	}
	
ul, ol {
	margin: 0 0 15px 0;
	padding: 0;
	font-size: 1.3em;
	line-height: 1.4em;
	}
	
ul ul, ul ol, ol ol, ol ul {
	font-size: 1.0em;
	}
	
ul li {
	margin: 5px 0;
	background: url('../images/bullet.gif') no-repeat 18px 0.65em;
	list-style-type: none;
	padding-left: 30px; padding-right: 0; padding-top: 0; padding-bottom: 0
	}
 
ol li {
	margin: 5px 0 5px 30px;
	}
 
dl {
	margin: 0 0 15px 0;
	line-height: 1.4em;
	}
	
dt {
	margin: 0 0 3px 0;
	font-size: 1.2em;
	font-weight: bold;
	}
	
dd {
	margin: 0 0 15px 0;
	font-size: 1.3em;
	line-height: 1.4em;
	}
	
/* 
	Links 
	-------------------------
	Links are displayed as dark red text. The underline is replaced by a 
	lighter bottom border. Visited links have less contrast than unvisited 
	links. Both visited and unvisited links turn bright red when moused over,
	and they return to their normal state when selected.
*/

a {
	/* border-bottom: 1px solid #e5cfcf; */
	color: #b31b1b;
	text-decoration: none;
	}
	
a:visited {
	color: #b37474;
	}
	
a:hover {
	color: #f00;
	border-color: #f00;
	}
	
a:active {
	color: #b31b1b;
	border-color: #e5cfcf;	
	}
	 
/****************************************
 * Images
 ****************************************/
/*
	The following set of rules controls the appearance of images.
	
	Examples of large photos, small photos, photo captions, and secondary
	photos can all be found in the two-column template. Examples of 
	thumbnails can be found in the hub and photo gallery templates.
*/
img {
	border: 0px none;
	}
 
/* 
	Large photos 
	-------------------------
	Large photos occupy the entire width of the main column of a two-column
	page. Text does not wrap around a large photo.
*/
 
.main-photo-large {
	margin: 20px 0;
	width: 510px;
	}
	
/* 
	Small photos 
	-------------------------
	Small photos are aligned with the right edge of the page, and text wraps 
	around them to the left.
*/

.main-photo-small {
	margin: 5px 0 15px 25px;
	width: 210px;
	float: right;
	}
	
/* 
	Photo captions 
	-------------------------
	Both large photos and small photos can have captions, which are displayed
	with a white background.
*/
	
.main-photo-large .caption, .main-photo-small .caption {
	margin: 0;
	padding: 5px 10px 8px 10px;
	background: #fff;
	}
	
/* 
	Secondary photos 
	-------------------------
	Secondary photos occupy the entire width of the secondary column (left sidebar) 
	of a two-column page. Secondary photos should not be placed within 
	.secondary-section divs.
*/

.secondary-photo {
	margin: 0 0 50px 0;
	}

#secondary .secondary-photo .caption {
	margin: 10px 15px 0 15px;
	}
	
/* 
	Thumbnails (dropshadows) 
	-------------------------
	Thumbnails, which are required on the hub template and the photo gallery template
	(and can be used anywhere throughout the site) are square (100x100px) images that
	have a soft shadow. The shadow subtly lifts the thumbnail to the foreground.
	
	Thumbnails are given some padding to make room for the shadow background image.
	They are then repositioned to where they would have been displayed without the 
	shadow and padding. This allows the thumbnail class to be used without concern 
	for accomodating the dimensions of the shadow image.
*/
 
.thumbnail {
	position: relative;
	
	/* padding makes room for the dropshadow, but offsets the image */
	background: url('../images/layout/shadow_tn.gif') no-repeat top left;
	
	/* position and margin fix the offset */
	top: -6px;
	left: -6px;
	margin-left:0; margin-right:0; margin-top:0; margin-bottom:-15px; padding-left:6px; padding-right:9px; padding-top:6px; padding-bottom:9px
	}
 
/****************************************
 * Tables
 ****************************************/
/*
	The following rules control the appearance of tables, which are used only
	for tabular data. To create the appearance of alternating stripes of 
	background colors on rows of data, use the .row1 and .row2 classes on 
	<tr> elements.
	
	For a detailed example of how to mark up a table, see the 
	one-column or two-column template.
*/
table, tr, th, td {
	margin: 0px;
	padding: 0px;
	border: 1px solid #c7c7c7;
	border-spacing: 0px;
	font-size: 1em
	}

table thead th {
	text-transform: uppercase;
	}
	
table {
	margin: 15px 0px;
	border-bottom: 1px solid #c7c7c7;
	caption-side: bottom;
	}
	
th {
	padding: 0px 15px 5px 15px;
	font-weight: normal;
	text-align: left;
	color: #888;
	}
	
td, tbody th {
	padding: 0px 15px;
	border-top: 1px solid #c7c7c7;
	font-size: 1.4em;
	line-height: 1.4em;
	vertical-align: top;
	}
	
tbody th {
	font-weight: bold;
	color: #222;
	text-align: left;
	}
	
tfoot td {
	font-weight: bold;
	}

caption {
	margin: 0 0 15px 0;
	text-align: left;
	color: #888;
	font-size: 1.1em;
	}
	
/****************************************
 * Forms
 ****************************************/
/*
	The following rules control the appearance of forms.
	
	Related sections of form inputs should be organized in fieldsets. 
	Each fieldset should contain a series of .form-pair divs. Each
	.form-pair should contain a .form-item div and a .form-value div. The 
	.form-item should contain a <label> for the <input> or <select> 
	found in the .form-value.
	
	For a detailed example of how to mark up a form, see the 
	one-column or two-column template.
*/
form {
	float: left;
	margin: 5px 0 15px 0;
	padding: 0;
	width: 510px;
	}
	
fieldset {
	float: left;
	margin: 0;
	padding: 10px 0 15px 0;
	width: 510px;
	border: none;
	border-top: 1px solid #e7e7e7;
	}
		
form h3 {
	margin: 0 15px 5px 15px;
	}		
	
.form-pair {
	display: inline;	/* prevent ie6/win from doubling margins */
	float: left;
	margin: 5px 15px 0 15px;
	width: 480px;
	}
	
.form-item {
	float: left;
	margin-top: 5px;
	width: 165px;
	font-size: 1.1em;
	line-height: 1.5em;
	text-align: right;
	}	
	
.form-value {
	float: right;
	margin-top: 5px;
	width: 300px;
	font-size: 1.1em;
	line-height: 1.5em;
	}

.checklist {
	margin: 0;
	font-size: 1em;
	}

.checklist li {
	margin: 0 0 5px 0;
	padding: 0;
	background: none;
	}
	
.input-text, select, textarea {
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 1em;
	}

.form-submit {
	border-top: none;
	background: #dbdbd2;
	}
	
.form-submit-buttons {
	text-align: right;
	padding-right: 15px;
	}
	
.form-submit-buttons .input-reset {
	margin-right: 5px;
	}
	
.input-submit, .input-reset {
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 1.3em;
	}
	
.input-submit {
	font-weight: bold;
	}
 
 
 
/****************************************
 * Photo Gallery
 ****************************************/
/* 
	The following rules control the appearance of the elements found
	on the photo gallery and photo pages. For more information about 
	these elements, see the photo gallery and photo templates.
*/
 
/* 
	Thumbnail index
	-------------------------
	The photo gallery page contains a #gallery div, which is an index 
	of the photos in the gallery. The index consists of thumbnails and 
	descriptive text linked to the photos. See the photo gallery template.
*/
 
#gallery {
	float: left;
	margin-top: 10px;
	font-size: 1.1em;
	line-height: 1.4em;
	}
 
.gallery-thumbnail {
	float: left;
	margin: 0 20px 30px 0;
	width: 235px;
	}
	
.gallery-thumbnail .thumbnail {
	float: left;
	}
	
/* 
	Photo 
	-------------------------
	The photo page consists of a large photo in the left column and
	a webring, caption, and photo credit in the right column. See the 
	photo template.
*/

#photo {
	float: left;
	}

#photo-meta {
	float: right;
	width: 200px;
	}	
	
#photo-meta .caption {
	margin: 10px 0;
	}
	
#photo-credit {
	color: #999;
	}
	 
/****************************************
 * Header
 ****************************************/
 
/* 
	Section Title 
	-------------------------
	The following rules control the formatting of the section title, including
	padding, font family, size, weight, color.
*/
 
#identity {
	float: left;
	width: 100%;
	padding: 25px 0;
	background: #fff;
	}
 
#identity h1 {
	margin: 0 auto;
	width: 740px;
	font-family: georgia, "times new roman", times, serif;
	font-size: 2.4em;
	font-weight: normal;
	color: #73736c;
	} 
		
/*
	Main Navigation 
	-------------------------
	The following rules control the appearance of the main navigation links.
	These links are displayed in a horizontal band with a gray background. 
	Main navigation should appear on every page of a site.
*/

#header {
	float: left;
	width: 100%;
	background: #b3b3aa;
	}
	
#navigation {
	margin: 0 auto;
	width: 740px;
	}
	
#navigation ul {
	float: left;
	margin: 0;
	padding: 0;
	border-left: 1px solid #a6a69d;
	width: 739px;
	font-size: 1em;
	}
	
#navigation li {
	margin: 0;
	padding: 0;
	float: left;
	background: none;
	}
	
#navigation a {
	float: left;
	padding: 7px 13px;
	border: none;
	border-right: 1px solid #a6a69d;
	font-size: 1.2em;
	font-weight: bold;
	color: #fff;
	text-decoration: none;
	}
	
#navigation a:hover {
	background: #a6a69d;
	}

/****************************************
 * Footer
 ****************************************/
/* 
	The following rules control the appearance of the footer found at the 
	bottom of every page. The footer contains the Cornell University copyright,
	which is displayed in a small font size. The color of the bottom border
	of the link in the footer is darker than most links to provide adequate 
	contrast with the background color of the footer.
*/
 
#footer {
	float: left;
	width: 100%;
	background: #d7d6d1;	/* footer background color */
	}
	
#footer-content {
	margin: 0 auto;
	padding: 15px 0 25px 0;
	width: 740px;
	font-size: 1.0em;
	color: #333;
	}
	
/* links */

#footer a {
	border-bottom: 1px solid #ccadad;
	}
	
#footer a:active {
	border-color: #ccadad;	
	}