#header { /* controls the presentation of the main photo */
	background-color: #e3e3c3;
	background-image: url(images/sanctuary_head.jpg);
	background-size: cover;
	background-position: center;
	width: 100%;
	height: 500px;
	position: relative;
}
#header h1 { /* this one's not used if we put the header in the #content container */
	width: 760px;
	margin: 0 auto;
	padding-top: 320px;
	font-weight: 800;
	font-size: 3em;
	color: #ffffff;
	text-shadow: 3px 3px 6px #000000, -2px -2px 8px #000000;
}
#content { /* controls the presentation of the main content area */
	position: relative;
	width: 800px;
	margin: -175px auto; /* had been 100px before we put the header in here */
	font-size: 18px;
	font-family: Helvetica, Arial, "Trebuchet MS", sans-serif;
}
#content .welcome h1 {
	margin-left: 20px;
	font-weight: 800;
	font-size: 3em;
	color: #ffffff;
	text-shadow: 3px 3px 6px #000000, -2px -2px 8px #000000;
}

body {
	background-color: #006241;
}
h1 {
	font-weight: 600;
	font-size: 1.5em;
	margin-bottom: .3em;
}
h2 {
	font-weight: 600;
	margin-top: .5em;
}
h2.first {
	margin-top: 0;
}
a {
	color: #006241;
}
a:hover {
	color: #ffffff;
	text-decoration: underline;
}

.boxed { /* column content boxes */
	width: 200px;
	margin-left: 20px;
	padding: 20px;
	background-color: rgba(255,255,255,.8);
	float: left;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	/*opacity:0.6;
  filter:alpha(opacity=60);*/
}
.spacebefore {
	margin-top: .8em;
}

/* mobile-only styles down here */
@media only screen and (max-device-width: 480px) {
	#content {
		width: 80%;
		margin: -440 auto;
		font-size: 3em;
	}
	
	.boxed {
		width: 100%;
		margin: 0 0 20px 0;
	}
}