@charset "UTF-8";

/*
	St Matthew's Church
	Site Design Copyright 2008 Infusion Design Melbourne
	www.infusiondesign.com.au
	
	Table of Contents
	1.	Browser CSS Reset
	2.	Typographic Setup
	3.	Generic Page Layout
	4. 	Masthead
	5.	Navigation
	6.	Footer
	7.	Index Specific
		7a.	Feature Box
		7b.	Column Layout
		7c.	Heading Image Replacement
	8.	Page Banner Images
	9.	Common Secondary Page Elements
	10.	News and Events
	11.	Sermons
	12.	Services
	

*/


/*  -----  1. Browser CSS Reset  -----  */

html, body, div, span, object,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
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-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
	background: #FFF;
	color: #333;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

.clearfloat {
	clear: both;
}

hr {
	display: block;
	clear: both;
	margin: 0 0 60px 0;
	padding: 60px 0 0 0;
	border: dashed #777;
	border-width: 0 0 4px 0;
}
/*  -----  2. Typographic Setup  -----  */

body {
	font-size: 12px;
	line-height: 15px;
	font-family: "Lucida Grande", Tahoma, Arial, sans-serif;
}

a {
	color: #5d95c1;
}
a:hover, a:focus {
	text-decoration: none;
}

p, h1, h2, h3, h4, h5 {
	margin: 0 0 15px 0;
}

p {
	
}

h1 {
	font-size: 40px;
	line-height: 45px;
	letter-spacing: -2px;
	color: #5d95c1;
}

h2 {
	font-size: 25px;
	font-weight: normal;
	line-height: 45px;
	color: #5d95c1;
}

h3 {
	font-size: 17px;
	line-height: 30px;
}

h4 {
	font-size: 17px;
	font-weight: normal;
	line-height: 30px;
}

/*  -----  3. Generic Page Layout  -----  */

#page_container {
	width: 910px;
	margin: 0 auto;
	position: relative;
}

/*  -----  4. Masthead  -----  */

#masthead {

}

	h1#logo {
		text-indent: -9999px;
		background: url(../images/logo.png) no-repeat 0 0;
		width: 164px;
		height: 63px;
		margin: 10px 10px 0 10px;
		float: left;
	}
	h1#logo a {
		display: block;
		width: 164px;
		height: 63px;
	}
	p#tagline {
		background: url(TAGIMAGE);
		font-style: italic;
		color: #888;
		font-size: 13px;
		letter-spacing: 0.1em;
		text-indent: 0;
		float: left;
		margin: 50px 0 0 20px;
		
	}
	
/*  -----  5. Navigation  -----  */

#navigation {
	clear: both;
	margin: 10px 0 0 0;
}

#topnav_wrap {
	position: relative;
	left: -10px;
	width: 910px;
	margin: 0 0 0 0;
	padding: 10px;
	background: url(../images/topnav_shadow.png) no-repeat 0 0;
}
	ul#topnav {
		overflow: auto;
		background: #283c77 url(../images/topnav_bg.png) repeat-x 0 0;
	}
	ul#topnav li {
		display: block;
		float: left;
	}
		ul#topnav li a {
			line-height: 40px;
			padding: 0 20px 0 20px;
			margin-right: 10px;
			display: block;
			color: #FFF;
			text-decoration: none;
		}
		ul#topnav li a:hover, ul#topnav li a:focus, ul#topnav li.active a {
			text-decoration: none;
			color: #FFF;
			background: #0b273f url(../images/topnav_bghover.png) repeat-x 0 0;
		}
		ul#topnav li.active a {
			font-weight: bold;
		}
	
#subnav_wrap {
	clear: both;
	position: relative;
	left: -10px;
	width: 910px;
	margin: -10px 0 0 0;
	padding: 0 10px 10px 10px;
	background: url(../images/subnav_shadow.png) no-repeat 0 0;
}
	ul#subnav {
		overflow: auto;
		background: #5a5a5a url(../images/subnav_bg.png) repeat-x 0 0;
	}
	ul#subnav li {
		display: block;
		float: left;
	}
		ul#subnav li a {
			line-height: 20px;
			padding: 0 20px 0 20px;
			display: block;
			color: #FFF;
			text-decoration: none;
			font-size: 11px;
		}
		ul#subnav li a:hover, ul#subnav li a:focus, ul#subnav li.active {
			text-decoration: none;
			color: #FFF;
			background: #2e2e2e url(../images/subnav_bghover.png) repeat-x 0 0;
		}
		ul#subnav li.active a {
			font-weight: bold;
		}
		
/*  -----  6. Footer  -----  */

#footer_wrap {
	clear: both;
	position: relative;
	left: -10px;
	margin: 20px 0 10px 0;
	padding: 10px;
	width: 910px;
	background: url(../images/footer_shadow.png) no-repeat 0 0;
}

#footer {
	background: #595959 url(../images/footer_bg.png) repeat-x 0 0;
	color: #FFF;
	height: 40px;
	width: 890px;
	padding: 10px;
}

#footer p {
	margin: 0;
	line-height: 20px;
}

	#footer p#copyright {
		font-size: 10px;
	}
	#footer a {
		color: #FFF;
		text-decoration: none;
	}
	#footer a:hover, #footer a:focus {
		text-decoration: underline;
	}

/*  -----  7. Index Specific  -----  */

img.featureimg {
	display: block;
	margin: -10px 0 20px -10px;
}

.rss_icon {
	float: right;
	position: relative;
	top: 15px;
}
/*  -----  7a. Index Feature Box  -----  */

#index_feature_outer {
	position: relative;
	left: -10px;
	width: 930px;
	margin: 0 0 0 0;
	padding: 0;
	background: url(../images/bigboxbottom.png) no-repeat 100% 100%;
}
#index_feature_wrap {
	padding: 10px 10px 10px 10px;
	background: url(../images/bigboxtop.png) no-repeat 0 0;
}

ul#index_feature_inner {
	padding: 0;
	position: relative;
	height: 230px;
}
	ul#index_feature_inner li {
		display: block;
		position: absolute;
	}
		ul#index_feature_inner li img {
			display: block;
		}

#index_feature_verse {
	position: absolute;
	bottom: 10px;
	background: transparent url(../images/indexfeature_versebar.png) repeat-x 0 0;
	width: 910px;
	
}
	#index_feature_verse p {
		width: 740px;
		padding: 10px;
		margin: 0;
		color: #FFF;
	}
	
	#index_feature_switcher {
		float: right;
		padding: 10px 10px 0 0;
	}
		#index_feature_switcher li {
			display: block;
			float: left;
			padding: 5px 3px;
			margin: 0;
			height: 10px;
			width: 10px;
			background: url(../images/indexfeature_switcher.png) no-repeat 0 5px ;
			text-indent: -9999px;
			cursor: pointer;
		}
		#index_feature_switcher li:hover {
			background: url(../images/indexfeature_switcher.png) no-repeat 0 -35px;
		}
		#index_feature_switcher li.active {
			background: url(../images/indexfeature_switcher.png) no-repeat 0 -15px;
		}

/*  -----  7b. Index Column Layout  -----  */

.left_column {
	float: left;
	width: 440px;
	padding: 0 10px;
}

.right_column {
	float: right;
	width: 365px;
	padding: 0 10px;
}
	.right_column .column_block {
		display: block;
		clear: both;
		margin-bottom: 15px;
		padding-bottom: 15px;
	}

#events_home, #news_home {
	float: left;
	width: 160px;
}

#events_home dd, #news_home dd {
	margin-bottom: 15px;
}

#events_home a, #news_home a {
	text-decoration: none;
}
#events_home a:hover, #events_home a:focus, #news_home a:hover, #news_home a:focus {
	border-bottom: 1px solid #81a7ca;
}

	
#events_home {
	margin-left: 20px;
}
#news_home {

}
	
/*  -----  7c. Index Header Image Replacement  -----  */

#newsandevents_heading {
	background: url(../images/index_newseventsheader.png) no-repeat 0 15px;
	text-indent: -9999px;	
}
#welcome_heading {
	background: url(../images/index_welcomeheader.png) no-repeat 0 15px;
	text-indent: -9999px;	
}
#thissunday_heading {
	background: url(../images/index_thissundayheader.png) no-repeat 0 15px;
	text-indent: -9999px;	
	border-top: 1px dotted #81a7ca;
}

/*  -----  8. Page Banner Images  -----  */

.banner_wrap {
	position: relative;
	clear: both;
	left: -10px;
	width: 930px;
	margin: 0 0 5px 0;
	padding: 0;
	background: url(../images/bigboxbottom.png) no-repeat 100% 100%;
}
.banner_inner {
	padding: 10px 10px 10px 10px;
	background: url(../images/bigboxtop.png) no-repeat 0 0;
}
.banner_inner img {
	display: block;
}

/*  -----  9. Common Secondary Page Elements  -----  */

.main_header {
	margin-left: 10px;
	clear: both;
}

#page_content {
	margin: 0 10px;
}

#page_content.has_sidebar {
	width: 540px;
}

#page_content ul, #page_content ol {
	list-style-position: outside;
	margin-bottom: 15px;
}

#page_content ul {
	list-style-type: disc;
}
#page_content ol {
	list-style-type: decimal;
}
#page_content li {
	margin-left: 20px;
}

.sidebar {
	float: right;
	margin-right: -360px;
	margin-top: -10px;
}

/*  -----  10. News and Events  -----  */

.posts_wrap {
	float: left;
	width: 540px;
	margin-left: 10px;
}

.news_post {
	border-bottom: 1px dotted #81a7ca;
	margin: 0 0 15px 0;
}

.post_header {
	margin-bottom: 0;
}

.post_header a {
	text-decoration: none;
}
.post_header a:hover, .post_header a:focus {
	border-bottom: 1px solid #5d95c1;
}

.post_date {
	font-weight: bold;
}

.read_more {
	text-align: right;
}

a.rss_feed {
	display: block;
	color: #AAA;
	text-decoration: none;
	background: url(../images/rssicon.png) no-repeat 0 5px;
	text-indent: 30px;
	line-height: 30px;
	margin: 0 0 15px -15px;
}
a.rss_feed:hover, a.rss_feed:focus {
	color: #333;
}
.archive_sidebar {
	float: right;
	padding-top: 0;
	width: 150px;
}
	.archive_sidebar .archive_header {
		color: #5d95c1;
		font-weight: normal;
		margin: 0;
		font-size: 19px; // default is 17px
	}
	.archive_sidebar dl {
	}
	.archive_sidebar dl dt {
		font-weight: bold;
		margin: 10px 0 5px 0;
		background: url(../images/triangle_flipper.gif) no-repeat 130px -27px;
		display: block;
		cursor: pointer;
	}
		.archive_sidebar dl dt:hover, .archive_sidebar dl dt.closed:hover {
			background-image: url(../images/triangle_flipper_hover.gif);
			color: #888;
		}
	.archive_sidebar dl dt.closed {
		background: url(../images/triangle_flipper.gif) no-repeat 130px 3px;
	}
		.archive_sidebar dl dd ul {
			margin-left: 10px;
		}
		.archive_sidebar dl dd ul li {
			font-weight: normal;
			margin-bottom: 5px;
			list-style: inside square;
			color: #888;
		}
		.archive_sidebar dl dd ul li a {
			text-decoration: none;
		}
		.archive_sidebar dl dd ul li a:hover, .archive_sidebar dl dd ul li a:focus {
			text-decoration: underline;
		}
		
.upcoming_events_wrap, .recent_news_wrap {
	float: left;
	width: 400px;
	margin-left: 10px;
}
.upcoming_events_wrap {
	margin-left: 80px;
}

.upcoming_events_wrap h1 a, .recent_news_wrap h1 a {
	text-decoration: none;
}

.upcoming_events_wrap h1 a:hover, .upcoming_events_wrap h1 a:focus, .recent_news_wrap h1 a:hover, .recent_news_wrap h1 a:focus {
	border-bottom: 1px solid #81a7ca;
}

/*  -----  11. Sermons  -----  */

ul#series_selector {
	float: left;
	margin-bottom: 10px;
}

	ul#series_selector li {
		display: block;
		width: 195px;
		line-height: 30px;
	}
	ul#series_selector li a {
		display: block;
		text-decoration: none;
		padding: 0 10px 0 10px;
		color: #FFF;
		background: #5e95c1 url(../images/sermon_series_selector.png) repeat-x 0 0;
	}
	ul#series_selector li a:hover, ul#series_selector li a:focus {
		background: #65a1d0 url(../images/sermon_series_selector.png) repeat-x 0 -60px;
		color: #FFF;
	}
	ul#series_selector li.active a {
		background: #fefefe url(../images/sermon_series_selector.png) repeat-x 0 -30px;
		color: #1f4a7d;
	}

#selected_series {
	float: left;
	margin: 0 0 10px 10px;
	width: 665px;
}

	#selected_series ul {
	}
	#selected_series ul li {
		clear: both;
		padding-left: 150px;
	}
	#selected_series ul li img {
		display: block;
		margin-left: -150px;
		float: left;
	}
	#selected_series ul li h4 {
		color: #5d95c1;
	}
	
#sermon_list {
	line-height: 30px;
	clear: both;
	margin: 15px 0;
	width: 100%;
}
#sermon_list li {

}
#sermon_list li table {
	width: 100%;
}
	#sermon_list li th {
		background: #5e95c1 url(../images/sermon_series_selector.png) repeat-x 0 0;
		color: #FFF;
		text-align: left;
		font-weight: normal;
	}
	#sermon_list li td {
		background: #fefefe url(../images/sermon_series_selector.png) repeat-x 0 -30px;
	}
	
	#sermon_list li tr td {
		padding-right: 30px;	
	}
	#sermon_list li td, #sermon_list li th {
		padding-left: 10px;
	}

#sermon_list li tr {
	height: 30px;
}
#sermon_list li .sermon_description {
	max-width: 550px;
}
#sermon_list li .sermon_date {
	width: 65px;
	padding-right: 20px;
}
#sermon_list li .sermon_speaker {
/*	width: 130px;*/
	padding-right: 20px;
}
/*  -----  12. Services  -----  */

.service {
	margin-left: 10px;
	margin-bottom: 10px;
	padding-bottom: 10px;
	clear: both;
	border-bottom: 1px dotted #81a7ca;
	overflow: auto;
}
	.service p, .service h2, .service h3 {
		width: 365px;
	}
	.service img {
		float: right;
	}
	
/*  -----  13. Contact Form  -----  */

#contact_form {
	margin-left: 10px;
	width: 500px;
	float: left;
}

#contact_details {
	float: left;
	margin: 10px;
}

.contact_element {
	clear: both;
	margin: 10px;
}

	.contact_element label {
		display: block;
	}

input[type="text"], textarea {
	border: 1px solid #CCC;
	background: #FFF;
	padding: 5px;
	line-height: 15px;
	width: 300px;
}
input[type="text"]:focus, textarea:focus {
	border-color: #81a7ca;
	background: #f8f9fa;
}


.message_sent {
	line-height: 15px;
	padding: 15px 15px 0 15px;
	margin-top: 15px;
	border-left: 1px dotted #81a7ca;
	color: #555;
}
.message_sent dt {
	font-weight: bold;
}
.message_sent dd {
	font-style: oblique;
	padding-bottom: 15px;
}

/*  -----  14. Activities / About Us Landing Pages  -----  */

.launchbox {
	width: 280px;
	height: 100px;
	margin: 10px;
	float: left;
	border-bottom: 1px dotted #81a7ca;
}

.launchbox a {
	text-decoration: none;
}
.launchbox a:hover, .launchbox a:focus {
	border-bottom: 1px solid #81a7ca;
}

/*  -----  15. Recommended Reading  -----  */

.reading_box {
	float: left;
	margin: 0 10px 20px 10px;
	padding: 10px;
	width: 250px;
	background: #f8f9fa;
	min-height: 100px;
}

.book_thumb {
	max-width: 100px;
	max-height: 100px;
	overflow: hidden;
	float: left;
	margin: 0 10px 0 0;
}
	.book_thumb img {
		display: block;
		margin: 0 auto;
	}

.book_title {
	font-size: 13px;
}
.book_author {
	margin: 0;
	font-style: oblique;
}
	
.reading_category {
	display: block;
	border-bottom: 1px dotted #81a7ca;
	clear: both;
}

/*  -----  16. Staff Profile Page  -----  */

.staff_profile {
	float: left;
	width: 400px;
	margin: 0 40px 40px 0;
}
.staff_name, .staff_position {
	padding-left: 140px;
}
.staff_name {
	line-height: 20px;
}
.staff_position {
	line-height: 15px;
	font-size: 14px;
}
.staff_description {
	padding-left: 140px;
}
.staff_photo {
	float: left;
	margin: -10px 10px 10px -10px;
}

	/*  -----  IE6 Warning  -----  */
	
.ie6_warning {
	display: none;
}