/******** COLORS *****

dirt -  #D8CBEF
tan   - #F4EECF
cloud - #EDE8E0
green - #91B54F
mint  - #E5ECC3

**********************/


body {
	margin-left: 0px;
	margin-top: 0px;
	background-color: #f4eecf;
	
	font-size: 11px;

	color: #333333;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

/*------TEXT and special image Styling------*/

table .givingType {
	font-weight: bold;
	font-size: 14px;
}

.portraits {
	font-style: italic;
}
.portraits img {
	float: right;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 12px;
	margin-left: 12px;
}

p {
	font-size: 11px;
	text-align: justify;
	color: #333333;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
li {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
}

/* Attempt to reduce line-height between h1, h2, and p elements is difficult.  I tried to work around it by setting h2 line-height as 1%, but this ruins the uniformity.  Now, there are larger gaps between h2 and p text blocks than there are between the ends of p and the beginning of h2 blocks*/

h1 {
	font-size: 14px;
	font-weight: bolder;
	color: #000000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
h2 {
	font-size: 11px;
	font-style: italic;
	font-weight: bold;
	color: #000000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	line-height: 1%;
}

/* ------- LINKS ------- 
Notes: 1) remember styling order: Link-Visited-Hover-Active.
	   2)Do NOT use '#name a:link, a:visited' as one style to edit.  Split up into two styles ('#name a:link' and '#name a:visited') or the browser will not read a:visited.   ---end---*/


a:link, a:visited{
color:#724434;
}
#turn_content a:link {
	text-decoration:underline;
}
#turn_content a:visited{
	text-decoration:underline;
}
#nav a:link{
	text-decoration:none;
}
#nav a:visited{
	text-decoration:none;
}
#nav a:hover{
	color:#333333;
	text-decoration: none;
}
#scroll_content a:link{
	text-decoration:underline;
}
#scroll_content a:visited{
	text-decoration:underline;
}
#turn_content a:hover {
	color: #999999;
	text-decoration:underline;
}
#scroll_content a:hover {
	color: #999999;
	text-decoration:underline
}
.PgTurner a:link{
	text-decoration:underline;
}
.PgTurner a:visited{
	text-decoration:underline;
}
.PgTurner a:hover {
	color: #999999;
	text-decoration:underline;
}

#page {
	height: 740px;
	width: 800px;
	background-repeat: no-repeat;
	background-image: url(images/bg.jpg);
	background-position: 0px 136px;
	left: 50%;
	position: absolute;
	margin-left:-400px;
	z-index: 10;
	margin-top: 10px;
	
}

#dropshadow {
	height:720px;
	width:840px;
	left: 50%;
	position: absolute;
	margin-left:-420px;
	z-index:1;
	background-image: url(images/dropshadow-2sides.jpg);
	background-repeat: no-repeat;
	background-position: right bottom;
	margin-top: 10px;
}

#nav {
	position:absolute;
	width:232px;
	height:253px;
	z-index:2;
	left: 19px;
	top: 156px;
	background-image: url(images/nav_bg.jpg);
	font-family: "Times New Roman", Times, serif;
	/* Note: a font-family setting of Courier or "Courier New" can cause massive delays in IE initial page load */
	font-weight: bolder;
	font-size: 12px;
	background-repeat: no-repeat;
}

#index_head {
	position:absolute;
	width:497px;
	height:86px;
	z-index:5;
	left: 251px;
	top: 156px;
}

/*  INDEX.PHP styling - anomalies: buttons and lowered top position of content layer */

#index_pg #turn_content {
	top: 366px;
}
#buttons {
	position:absolute;
	width:535px;
	height:127px;
	z-index:2;
	left: 239px;
	top: 245px;
}
/* End of INDEX.PHP anomaly styling */

#turn_content {
	position:absolute;
	height:300px;
	z-index:6;
	left: 271px;
	top: 270px;
	width: 468px;
}

#scroll_content {
	position:absolute;
	height:375px;
	z-index:6;
	left: 271px;
	top: 270px;
	width: 460px;
	overflow: auto;
	padding-right: 14px;
}
#footer {
	position:absolute;
	width:591px;
	height:17px;
	z-index:12;
	left: 148px;
	top: 684px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	text-align: right;
	visibility: visible;
}
#smbuttons {
	position:absolute;
	height:248px;
	z-index:8;
	left: 39px;
	top: 409px;
	width: 182px;
}

/* ------- little page-turner divs to be used with #page_content (beware of context text spilling over onto #PgTurner2 ----- */

.PgTurner {
	text-align: right;
	font-size: 10px;
}


#PgTurner1 {
	position:absolute;
	width:105px;
	height:18px;
	z-index:9;
	left: 635px;
	top: 246px;
	font-size: 10px;
}
#PgTurner2 {
	position:absolute;
	width:105px;
	height:24px;
	z-index:9;
	left: 635px;
	top: 647px;
	font-size: 10px;
}

/* events page */

table.eventTable td {
	vertical-align: top;

}
td.right_side {
	padding-left: 16px;
	padding-top:   4px;
}