body {
	margin:0;
	padding: 0;
	font-family: verdana, helvetica, arial, sans-serif;
	font-size: 90%;
	color:#1a1a1a;
	text-align:center;
	background: url(../images/background.jpg) 50% 0;
	}

#masthead {
	margin: 0;
	background: url(../images/header-background.jpg) 50% 0;
	height: 280px;
	width: 100%;
	position: relative;
	}

#header {
	position: relative;
	margin: 0 auto;
	background: url(../images/header.jpg) no-repeat;
	height: 280px;
	width: 950px;
	}

/* ---------------------------------------------------
	NAVIGATION
--------------------------------------------------- */

#navigation {position: absolute; top: 165px; left: 185px; width: 760px; height: 30px; overflow: hidden; margin: 0; padding: 0; background: url(../images/navigation.jpg);}
#navigation li {position: absolute; top: 0px; list-style: none; text-align: center;}
#navigation a {position: relative; height: 30px; display: block; font-size: 1.4em; overflow: hidden; outline: none; font-weight: normal;}
/* ------------ "outline: none" Removes dotted focus on clicking link - remember to add "a:hover, a:active, a:focus { }" for keyboard navigation focus  ------------ */
#navigation a span {position: absolute; top: 0; left: 0; height: 30px; cursor: pointer;}
#navigation a:hover {text-decoration: none;} /* ------------ Stops IE6 misbehaving ------------ */

#navigation .home {left: 0px; width: 63px;}
#navigation .about {left: 101px; width: 65px;}
#navigation .chapel {left: 204px; width: 71px;}
#navigation .magazine {left: 314px; width: 101px;}
#navigation .events {left: 452px; width: 70px;}
#navigation .news {left: 558px; width: 62px;}
#navigation .resources {left: 657px; width: 103px;}

#navigation .home a span {width: 63px; background: url(../images/navigation.jpg) 0px 0px no-repeat;}
#navigation .about a span {width: 65px; background: url(../images/navigation.jpg) -101px 0px no-repeat;}
#navigation .chapel a span {width: 71px; background: url(../images/navigation.jpg) -204px 0px no-repeat;}
#navigation .magazine a span {width: 101px; background: url(../images/navigation.jpg) -314px 0px no-repeat;}
#navigation .events a span {width: 70px; background: url(../images/navigation.jpg) -452px 0px no-repeat;}
#navigation .news a span {width: 62px; background: url(../images/navigation.jpg) -558px 0px no-repeat;}
#navigation .resources a span {width: 103px; background: url(../images/navigation.jpg) -657px 0px no-repeat;}

#navigation .home a:hover span, #navigation .home a:active span, #navigation .home a:focus span {background: url(../images/navigation.jpg) 0px -30px no-repeat;}
#navigation .about a:hover span, #navigation .about a:active span, #navigation .about a:focus span {background: url(../images/navigation.jpg) -101px -30px no-repeat;}
#navigation .chapel a:hover span, #navigation .chapel a:active span, #navigation .chapel a:focus span {background: url(../images/navigation.jpg) -204px -30px no-repeat;}
#navigation .magazine a:hover span, #navigation .magazine a:active span, #navigation .magazine a:focus span {background: url(../images/navigation.jpg) -314px -30px no-repeat;}
#navigation .events a:hover span, #navigation .events a:active span, #navigation .events a:focus span {background: url(../images/navigation.jpg) -452px -30px no-repeat;}
#navigation .news a:hover span, #navigation .news a:active span, #navigation .news a:focus span {background: url(../images/navigation.jpg) -558px -30px no-repeat;}
#navigation .resources a:hover span, #navigation .resources a:active span, #navigation .resources a:focus span {background: url(../images/navigation.jpg) -657px -30px no-repeat;}

#home .home a span, #home .home a:hover span {background: url(../images/navigation.jpg) 0px -30px no-repeat; cursor: default;}
#about .about a span, #about .about a:hover span {background: url(../images/navigation.jpg) -101px -30px no-repeat; cursor: default;}
#chapel .chapel a span, #chapel .chapel a:hover span {background: url(../images/navigation.jpg) -204px -30px no-repeat; cursor: default;}
#magazine .magazine a span, #magazine .magazine a:hover span {background: url(../images/navigation.jpg) -314px -30px no-repeat; cursor: default;}
#events .events a span, #events .events a:hover span {background: url(../images/navigation.jpg) -452px -30px no-repeat; cursor: default;}
#news .news a span, #news .news a:hover span {background: url(../images/navigation.jpg) -558px -30px no-repeat; cursor: default;}
#resources .resources a span, #resources .resources a:hover span {background: url(../images/navigation.jpg) -657px -30px no-repeat; cursor: default;}

/* ---------------------------------------------------
	SUB-NAVIGATION
--------------------------------------------------- */

#subnav {position: absolute; top: 33px; left: 624px; width: 325px; height: 25px; overflow: hidden; margin: 0; padding: 0; background: url(../images/subnav.jpg);}
#subnav li {position: absolute; top: 0px; list-style: none; text-align: center;}
#subnav a {position: relative; height: 25px; display: block; font-size: 1.2em; overflow: hidden; outline: none; font-weight: normal;}
/* ------------ "outline: none" Removes dotted focus on clicking link - remember to add "a:hover, a:active, a:focus { }" for keyboard navigation focus  ------------ */
#subnav a span {position: absolute; top: 0; left: 0; height: 25px; cursor: pointer;}
#subnav a:hover {text-decoration: none;} /* ------------ Stops IE6 misbehaving ------------ */

#subnav .branches {left: 0px; width: 79px;}
#subnav .membership {left: 113px; width: 108px;}
#subnav .contact {left: 254px; width: 71px;}

#subnav .branches a span {width: 79px; background: url(../images/subnav.jpg) 0px 0px no-repeat;}
#subnav .membership a span {width: 108px; background: url(../images/subnav.jpg) -113px 0px no-repeat;}
#subnav .contact a span {width: 71px; background: url(../images/subnav.jpg) -254px 0px no-repeat;}

#subnav .branches a:hover span, #subnav .branches a:active span, #subnav .branches a:focus span {background: url(../images/subnav.jpg) 0px -25px no-repeat;}
#subnav .membership a:hover span, #subnav .membership a:active span, #subnav .membership a:focus span {background: url(../images/subnav.jpg) -113px -25px no-repeat;}
#subnav .contact a:hover span, #subnav .contact a:active span, #subnav .contact a:focus span {background: url(../images/subnav.jpg) -254px -25px no-repeat;}

#branches .branches a span, #branches .branches a:hover span {background: url(../images/subnav.jpg) 0px -25px no-repeat; cursor: default;}
#membership .membership a span, #membership .membership a:hover span {background: url(../images/subnav.jpg) -113px -25px no-repeat; cursor: default;}
#contact .contact a span, #contact .contact a:hover span {background: url(../images/subnav.jpg) -254px -25px no-repeat; cursor: default;}




#wrapper {
	width: 950px;
	margin: 0 auto;
	padding: 0px;
	text-align:left;
	background: url(../images/background.jpg) 50% 80px;
	}

h1 {
	font-size: 1.5em;
	text-align:center;
	margin-bottom: 10px;
	}

h2 {
	font: 28px verdana, helvetica, arial, sans-serif;
	font: 1.7em verdana, helvetica, arial, sans-serif;
	text-align: left;
	margin: 0 25px 20px 25px;
	color: #707000;
	}


h3 {
	font-family: verdana, helvetica, arial, sans-serif;
	font: 1.1em verdana;
	text-align: left;
	margin: 0 25px 0px 25px;
	color: #606000;
	}
h3.author {
	margin: -15px 25px 15px 25px;
	}

p {
  	font-weight:normal;
   	text-align: left;
  	line-height:1.5;
  	margin: 0 25px 1.7em 25px;
	font: 1em/1.5em Verdana, Helvetica, sans-serif;
  	}

blockquote {
  	line-height:1.5;
  	margin: 0 25px 1.7em 50px;
	font: 1em/1.5em Verdana, Helvetica, sans-serif;
  	}

.info {
	font-size: .9em;
	font-style: italic;
}

/* ---------------------------------------------------
	LINKS
--------------------------------------------------- */

a:link, a:visited {
	color: #505000;
}

a:hover, a:active, a:focus {
	color: #000;
	background: #f0f0d0;
	text-decoration: none;
}

#header a:link, #header a:visited {
	color: black;
	border-bottom: 1px solid #111;
}

h3 a:link, h3 a:visited, h3 a:hover, h3 a:active {
	color: #606000;
  }

#footer {
	clear: both;
	width: 900px;
	margin: 20px auto 20px auto;
	padding-top: 20px;
	border-top: 1px solid #bbb;
	}
#footer p {
	text-align: center;
	font: .8em/1.5em Verdana, Helvetica, sans-serif;
	margin-bottom: 0.7em;
	}

.clear {
	clear: both;
	padding: 0;
	}

#main-content {
	width: 620px;
	float: left;
	}

#sidebar {
	width: 320px;
	float: right;
	}

#sidebar .image, #sidebar .polaroid {
	padding: 15px 0 0 0;
	margin: 0 0 0px 0;
	width: 320px;
	background: url(../images/dropshadow.jpg);
	text-align: center;
	}

#sidebar .image {
	padding: 10px 0 0 0;
	}

#sidebar .image-bottom, #sidebar .polaroid-bottom {
	height: 15px;
	width: 320px;
	background: url(../images/dropshadow-bottom.jpg);
	}

#sidebar .image-bottom {
	height: 10px;
	width: 320px;
	background: url(../images/dropshadow-bottom.jpg) 0px -5px;
	}

#sidebar .image img {
	margin: 0 auto;
	padding: 0;
	}
	
#sidebar h3 {
	border-top: 1px solid #bbb;
	margin: 0 10px 0px 10px;
	padding-top: 20px;
}

#sidebar p {
	margin: 0 10px 0px 10px;
}

#sidebar p.caption {
	margin-left: 15px;
	margin-right: 15px;
	padding-bottom: 20px;
	font: italic .8em arial;
}

#sidebar p.download {
	margin: 0 10px 0.5em 10px;
	line-height: 1.2em;
}

#sidebar p.download span {
	font: italic .8em arial;
}

.right {
	text-align: right;
}