﻿/**********************************************************************************************

	Title: CSS
	Author: jsnr
	Date: 2009 

***********************************************************************************************

	1. Global Reset
	
	2. General Elements
	
	3. Layout	
	
	4. Sections		
		
***********************************************************************************************/


/* 1. Global Reset
-----------------------------------------------------------------------------------------------
===============================================================================================*/	

	a, img, 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, images, ins, kbd,q, s, samp, small, strike, strong, sub, sup, tt, var, 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-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; }

	ul {
		list-style: none;
	}
	
	table {
		border-collapse: separate; 
		border-spacing: 0;
	}
	
	caption, th, td {
		text-align: left; 
		font-weight: normal;
	}
	h1, h2, h3, h4, h5, h6 {
		font-weight:normal;
	}

/* 2. General Elements
-----------------------------------------------------------------------------------------------
===============================================================================================*/	

	body {
		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
		font-size: 12px;
		line-height: 1;
		color: #664733;
		background: transparent url(/new/images/layout/bg.jpg);
	}

	hr { 
		display: none;
	}
		
	strong {
		font-weight: bold;
	}
		
	em {
		font-style: italic;
	}
	
	address {
		font-style: normal;
	}

	input, textarea, select {
		font: 1em Helvetica, Arial sans-serif;
	}

	a, a:visited {
		color: #4C7B9E;
		text-decoration: none;
		outline: none;
	}
	
	a:active, a:hover, 
	#header ul.navigation li a:hover, #header ul.navigation li a:active,
	#header ul.navigation li a.green:hover, #header ul.navigation li a.green:active,
	#footer ul.navigation li a:hover, #footer ul.navigation li a:active,
	#topLinks a:hover, #topLinks a:active,
	ul#subnav li a:hover, ul#subnav li a:active,
	ul#subnav li.last a:hover, ul#subnav li.last a:active {
		color: #A2421A;
		text-decoration: none;
	}
	
	h1 {
		font: 22px/1 Georgia, Times New Roman, serif;
		font-weight: bold;
		font-style: italic;
		padding-bottom: 12px;
		color: #8C7465;
	}
	
	h2 {
		font: 14px/1.2  Georgia, Times New Roman, serif;
		font-style: italic;
		padding-bottom: 10px;
	}
	
	h3 {
		font: 14px/1 Georgia, Times New Roman, serif;
		font-weight: bold;
		font-style: italic;
		padding-bottom: 3px;
		color: #8C7465;
	}
	
	p {
		font-size: 100%;
		line-height: 1.3;
		padding-bottom: 8px;
	}
	ol {
		padding-bottom: 4px; 
	}
	ol li {
		margin-left: 20px;
		padding-bottom: 4px; 
	}
	


/* 3. LAYOUT
-----------------------------------------------------------------------------------------------
===============================================================================================*/	

	#container {
		background: transparent url(/new/images/layout/bgtop.jpg) repeat-x;
		width:100%;
		text-align: center;
		margin-bottom: 10px;
	}
	#hopeRays {
		background: transparent url(/new/images/layout/logostrip.jpg) no-repeat top center;
		text-align: center;
		width: 1150px;
		margin: 0 auto;
		padding-top: 111px;
		padding-left: 6px;
	}
	#content {
		width: 940px;
		margin: 0 auto;
		background: transparent url(/new/images/layout/content-bg.jpg);
		position: relative;
	}
	#topLinks {
		position: absolute;
		top: -100px;
		right: 65px;
		width: 400px;
	}
		#topLinks a {
			float: right;
			display: block;
			padding: 6px 8px;
			color: #B2A298;
			font-size: 11px;
			text-transform: uppercase;
		}
		.friendbutton {
			width: 88px;
			height: 24px;
			position: relative;
			float: right;
			padding-left: 4px;
		}
			.friendbutton img {
				position: absolute;
				top: 0;
				left: 0;
			}
			.friendbutton img.second {
				display: none;
			}
	img#tagline {
		position: absolute;
		top: -53px;
		right: 25px;
	}
	#content .top {
		background: transparent url(/new/images/layout/content-top.jpg) no-repeat;
		height: 168px;
		width: 940px;
	}

	#header ul.navigation {
		padding-top: 15px;
	}
	#header ul.navigation li {
		display: inline;
		padding: 0 8px;
	}
	#header ul.navigation li a {
		color: #6E6E6E;
		text-transform: uppercase;
		font-size: 15px;
	}
	#header ul.navigation li a.green {
		color: #466E28;
	}
	#area1 {
		margin-top: -136px;
		width: 940px;
		background: transparent url(/new/images/layout/area1-bg.jpg) repeat-y;
	}
		#area1 .top {
			height: 114px;
			width: 940px;
			background: transparent url(/new/images/layout/area1-top.jpg) no-repeat;
		}
		#area1 .bottom {
			height: 11px;
			width: 940px;
			background: transparent url(/new/images/layout/area1-bottom.jpg) no-repeat;
			clear: both;
		}
		#area1 .container {
			width: 900px;
			margin: -85px 0 0 31px;
			text-align: left;
		}
			#area1 .container .col1 {
				width: 600px;
				float: left;
			}
			#area1 .container .col2 {
				width: 280px;
				padding-top: 8px;
				float: left;
				text-align: left;
			}
				#area1 .container .col2 .col2top {
					border-bottom: 1px solid #ddd;
					padding-bottom: 15px;
					margin-bottom: 15px;
					padding-left: 96px;
					background: transparent url(/new/images/art/about-thumb.jpg) no-repeat 0 27px;
				}
				#area1 .container .col2 .col2top h2 {
					margin-left: -96px;
				}
				#area1 .container .col2 .col2top p {
					padding: 0 10px 3px 0;
				}
				#area1 .container .col2 .col2bottom {
					height: 158px;
					padding-bottom: 10px;
					margin-bottom: 10px;
					padding-left: 140px;
					background: transparent url(/new/images/art/expedition-thumb.jpg) no-repeat 0 27px;
				}
				#area1 .container .col2 .col2bottom h2 {
					margin-left: -140px;
				}
				#area1 .container .col2 .col2bottom p {
					padding-bottom: 3px;
				}
		#area1 .container .row2 {
			margin-left: -9px;
		}
			#area1 .container .row2 div {
				float: left;
				height: 70px;
				width: 180px;
				padding-right: 15px;
			}
			#area1 .container .row2 .video {
				background: url(/new/images/art/video-link.jpg) no-repeat;
				padding-left: 86px;
			}
			#area1 .container .row2 .slideshow {
				background: url(/new/images/art/slideshow-link.jpg) no-repeat;
				padding-left: 114px;
				margin-top: -8px;
				padding-top: 8px;
				width: 212px;
			}
			#area1 .container .row2 .charts {
				background: url(/new/images/art/blog-link.png) no-repeat;
				padding-left: 68px;
				margin-top: -2px;
				padding-top: 2px;
				padding-right: 0;
			}
	#area2 {
		background: transparent url(/new/images/layout/area2-bg.jpg) repeat-y;
		width: 614px;
		margin-right: 1px;
		float: left;
		position: relative;
	}
		#area2 .top {
			height: 7px;
			width: 614px;
			background: transparent url(/new/images/layout/area2-top.jpg) no-repeat;
		}
		#area2 .bottom {
			height: 8px;
			width: 614px;
			background: transparent url(/new/images/layout/area2-bottom.jpg) no-repeat;
		}
		#area2 .container {
			text-align: left;
			height: 93px;
			padding: 5px 20px 0;
			width: 574px;
		}
		img.ff {
			margin: -4px 0 5px;
		}
		div.ff {
			height: 96px;
			width: 135px;
			padding-right: 174px;
			position: absolute;
			right: 9px;
			top: 8px;
		}
		div.ff p {
			margin: 8px;
		}
		div.skydive {
			background: #C6B4A8 url(/new/images/art/ff-skydive-img.jpg) no-repeat right top;
		}
		div.cooking {
			background: #C6B4A8 url(/new/images/art/ff-cooking-img.jpg) no-repeat right top;
		}
		div.cycling {
			background: #C6B4A8 url(/new/images/art/ff-cycling-img.jpg) no-repeat right top;
		}
		#ff1, #ff2, #ff3 {
			display: none;
		}
	#area3 {
		background: transparent url(/new/images/layout/area3-bg.jpg) repeat-x;
		width: 320px;
		float: left;
	}
	#area3gg {
		background: transparent url(/new/images/art/gg.jpg) no-repeat -2px -2px;
		width: 152px;
		height: 116px;
		float: left;
		padding-left: 168px;
		text-align: left;
	}
	#area3gg h3 {
		color: #A2421A;
		padding: 11px 0 8px;
	}
	#area3 .top {
		height: 7px;
		width: 100%;
		background: transparent url(/new/images/layout/area3-top.jpg) no-repeat;
	}
	#area3 .bottom {
		height: 9px;
		width: 100%;
		background: transparent url(/new/images/layout/area3-bottom.jpg) no-repeat;
	}
	#footer {
		clear: left;
		text-align: right;
		position: relative;
	}
		#footer ul.navigation {
			padding: 4px 7px 10px;
		}
			#footer ul.navigation li {
				display: inline;
				padding: 0 4px;
				}
				#footer ul.navigation li a {
					color: #6E6E6E;
					font: 13px/1 Georgia, Times New Roman, serif;
					font-style: italic;
				}
		#copyright {
			position: absolute;
			top: 5px;
			left: 11px;
			width: 400px;
			color: #6E6E6E;
			font: 13px/1 Georgia, Times New Roman, serif;
			font-style: italic;
			text-align: left;
		}
	.readmore {
		width: 88px;
		height: 24px;
		margin-left: -4px;
		position: relative;
	}
	.readmore img {
		position: absolute;
		top: 0;
		left: 0;
	}
	.readmore img.second {
		display: none;
	}
	
/* 4. Sections
-----------------------------------------------------------------------------------------------
===============================================================================================*/	

ul#subnav {
	width: 125px;
	float: left;
}
	ul#subnav li {
		border-bottom: #ddd 1px solid;
		padding: 8px 0;
		}
	ul#subnav li.last {
		border: 0;
	}
		ul#subnav li a {
			color: #B2A298;
			font-size: 12px;
			text-transform: uppercase;
			display: block;
		}
.main {
	margin: 0 0 14px 20px;
	padding: 0 14px;
	float: left;
	width: 710px;
	font-size: 13px;
}
	.main p, .main ol {
		width: 450px;
	}
	.main img.rightpic {
		float: right;
	}
	.main div.aside {
		float: right;
		width: 228px;
		margin-top: 36px;
	}
	.main div.aside img {
		margin-bottom: 24px;
	}
	


span.hidden {
	display: none;
}

.section {
	width: 695px;
	padding: 10px;
	background: transparent url(/new/images/layout/bg.jpg);
	margin-bottom: 20px;
}
.section h2 {
	font-size: 130%;
}
.section p {
	width: 100%;
}
ul#ggGallery {
	margin-bottom: 15px;
}
ul#ggGallery li {
	display: none;
}
.pagination ul li {
	float: left;
}
.pagination ul li a {
	display: block;
	padding: 5px 7px 4px;
	margin: 0 4px;
	background: transparent url(/new/images/layout/bg.jpg);
	font-size: 80%;
	text-transform: uppercase;
}
body#blog .post {
	width: 430px;
	background: transparent url(/new/images/layout/bg.jpg);
	padding: 10px;
	margin-bottom: 20px;
}

body#blog .post h2 {
	font-size: 130%;
	padding-bottom: 0;
}
body#blog .post h2 a {
	color: #A2421A;
}



.postheader {
	padding-bottom: 8px;
	margin-bottom: 4px;
	border-bottom: dashed #fff 1px;
}
.postmeta {
	font-size: 76%;
	text-transform: uppercase;
	padding-top: 3px;
}

body#blog textarea {
	width: 430px;
	padding: 10px;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 12px;
	line-height: 1;
	color: #664733;
	margin-top: 8px;
	margin-bottom: 8px;
}
body#blog input {
	margin-bottom: 8px;
}
.commentAuthor {
	font-weight: bold;
	font-family:Georgia,Times New Roman,serif;
	font-style:italic;
	font-size:110%;
}
.commentMeta {
	font-size: 76%;
	text-transform: uppercase;
	padding-bottom: 6px;
	padding-top: 3px;
}
.evencomment, .prominentcomment,.oddcomment {
	padding-bottom: 15px;
	border-bottom: dashed #999 1px;
	margin-bottom: 15px;
	width: 450px;
}

ul.ul {
	list-style: outside;
	margin-left: 16px;
	width: 434px;
	margin-top: -4px;
}
ul.ul li {
	padding-bottom: 8px;
	line-height:1.3;
}
.section img {
	padding-bottom: 8px;	
}

table.give {
	line-height: 1.8em;
}
table.give td {
	padding-left: 4px;
}

.sitemap ul {
	padding-bottom: 8px;
}
.sitemap ul li {
	line-height: 1.3em;
}




