/*

	Knockbreda Methodist
	Main CSS
	Created by Andi Topping on Tuesday 6th January 2009

*/

html, body, div, form {
	padding:0px;
	margin:0px;
}
p, h1, h2, h3, h4, h5 {
	padding:0.5em 0px;
	margin:0px;
}

h1 { font-size: 18px; font-weight: bold; text-transform: uppercase; }
h2 { font-size: 16px; font-weight: normal; }
h3 { font-size: 15px; font-weight: normal; }
h1.pagetitle { background-image: url(../images/bg_pagetitle.png); background-color:#D3CBBC; background-repeat:no-repeat; background-position: center; color: #401021; padding: 15px 10px; }
h1.pagetitle .section-title { font-size:14px; font-weight: normal; }

.right h1.pagetitle {
	padding: 8px 10px;
	background-position: -276px 2px;
}

img {
	border:none;
}
html {
	background-color: #FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color:#333333;
}

a { color: #333333; text-decoration: none; }

#top { background-image: url(../images/bg_header.png); background-repeat:repeat-x; height: 61px; padding: 61px 0px 0px 0px; }
#middle { background-color: #89724A; height: 15px; margin: 1px 0px 0px 0px; padding: 6px 0px; }
#bottom { margin: 1px 0px 0px 0px; }
#footer { color: #999999; font-size: 10px; padding: 0px 10px; }

.container {
	width:821px;
	margin:0px auto;
}

.image { border: 1px solid #CCCCCC; padding: 1px 1px; }
#fullGraphics, .text_description { display:none; }
#textOnly { float: right; padding-right: 10px; padding-top: 5px; font-size: 15px; color: #333333; }
#textOnly a { color: #333333; }

/* TOP BAR STYLES */
#top #logo { float: left; width: 218px; }
#top #nav { margin: 0px 0px 0px 238px; }
#top #nav ul { list-style:none; white-space:nowrap; padding: 24px 0px 0px 0px; margin: 0px 0px; font-size: 14px; }
#top #nav ul li { padding:0px 10px; display:block; float:left; position: relative; font-weight: normal;}
#top #nav ul li a{ color: #90717C; text-decoration: none; }
#top #nav ul li a:hover{ color: #FFFFFF; text-decoration: none; padding-bottom: 1px; border-bottom: 1px solid #FFFFFF; }
#top #nav ul li.selected a{ color: #FFFFFF; text-decoration: none; padding-bottom: 1px; border-bottom: 1px solid #FFFFFF; }

/* BOTTOM STYLES */
#bottom #content { background-color: #F3F1ED; border-bottom: 15px solid #89724A; }
#bottom #content .left { float: left; width:547px; }
#bottom #content .right { border-left: 1px solid #FFFFFF; font-size: 13px; margin: 0px 0px 0px 547px; }
#bottom #content .text { padding: 5px 10px; }
#bottom #content .text a{ font-weight: bold; }
#bottom #content .date { font-size: 11px; }

/* NEWS COLUMN STYLES */
#bottom #content .right .newsarea { padding: 0px 15px; }
#bottom #content .right .newstitle { color: #181512; font-weight: bold; }
#bottom #content .right .newstitle a{ color: #181512; font-weight: bold; }
#bottom #content .right .newstitle a:hover{ text-decoration: underline; }
#bottom #content .right .newsdate { color: #C8C0B3; font-size:11px; }
#bottom #content .right .newscontent { color: #666666; font-size:12px; }
#bottom #content .right .rss { font-size:11px; }
#bottom #content .right a { font-weight: bold; color: #333333; text-decoration: none; }
#bottom #content .right a:hover { text-decoration: underline; }

#bottom #content .sublinks { padding:0px 15px 10px 15px; font-size:15px; }
#bottom #content .sublinks a { color:#000000; }

/* FOOTER STYLES */
#footer a { color: #999999; }

/* form styles */
form { padding: 4px 0px; }
label { font-weight:bold; line-height:20px; width:120px; float:left; }
input { width:140px; height:14px; padding:0px; margin:0px; border:1px solid #999999; padding:2px 2px; font-size:11px; }
textarea { width:140px; height:42px; padding:0px; margin:0px; border:1px solid #999999; padding:2px 2px; font-size:11px; }
input.submit { width:75px; height: 18px; border:1px solid #000000; font-size:11px; margin: 0px 0px 0px 120px; }
input.checkbox { width: 20px; }

#sermonlist th{ background-color: #89724A; color: #FFFFFF; font-weight: bold; text-align: left; font-size: 10px; }
#sermonlist td { font-size: 10px; color: #333333; }
.row0 { background-color: #D3CBBC; }
.row1 { background-color: #FFFFFF; }

#videolist { margin: 5px 5px; text-align:center; }
#videolist h3{ text-align: left; font-size: 14px; }
#videolist td { text-align: left; vertical-align:  top; }
#videolist a { font-weight: normal; }
#videolist .highlightit img{ border: 1px solid #CCCCCC; padding: 1px 1px; }
#videolist .highlightit:hover img{ border: 1px solid #6B8644; padding: 1px 1px; }
#videolist .highlightit:hover{ color: #333366; border: 0px ; /* Dummy definition to overcome IE bug */ }

#NewsVertical {
	width: 400px; 
	height: 17px;
	display: block;
	overflow: hidden;
	position: relative;
	text-align: right;
	}
	#controller{
	padding:6px;
	font-size:11px;
	color:#666;
	}
	#play_scroll_cont{display:none;}
/* --------------- */
/* Ticker Vertical */
	#TickerVertical {
		width: 300px;
		display: block;
		list-style: none;
		margin: 0;
		padding: 0;
	}
	#TickerVertical li {
		display: block;
		width: 400px;
		color: #333333;
		text-align: left;
		margin: 0;
		padding: 0px;
		float: left;
		text-align: right;
	}
		#TickerVertical li .NewsTitle{
			display: block;
			color: #000000;
			font-size: 12px;
			font-weight:bold;
			margin-bottom:6px;
		}
		#TickerVertical li .NewsTitle a:link,
		#TickerVertical li .NewsTitle a:Visited {
			display: block;
			color: #000000;
			font-size: 12px;
			font-weight:bold;
			margin-bottom:6px;
			text-decoration:none;
		}
		#TickerVertical li .NewsTitle a:hover {
			text-decoration:underline;
		}
		
		#TickerVertical li .NewsImg{
			float:left;
			margin-right:10px;
			border: 1px solid #CCCCCC; padding: 1px 1px;
		}
		#TickerVertical li .NewsFooter{
			display: block;
			color: #000000;
			font-size: 10px;
			margin:6px 0 14px 0;
		}

/*
Stylesheet: Slideshow.css
	Slideshow.css - CSS for Slideshow.

License:
	MIT-style license.

Copyright:
	Copyright (c) 2008 [Aeron Glemann](http://www.electricprism.com/aeron/).
*/

/*
These styles are set by the Slideshow script.
You can override any of them with the !important keyword but the slideshow probably will not work as intended.
*/

.slideshow {
}
.slideshow a{ color: #FFFFFF; }
.slideshow a:hover{ color: #FFFFFF; }

.slideshow-images {
	display: block;
	/* height: height_of_slideshow_or_default_image */
	overflow: hidden;
	position: relative;
	/* width: width_of_slideshow_or_default_image */
}		
.slideshow-images img {
	display: block;
	position: absolute;
	z-index: 1;
}		
.slideshow-thumbnails {
	overflow: hidden;
}

/*
The images div is where the slides are shown.
Customize these classes to effect the slideshow transitions: fading, wiping, etc.
*/

.slideshow-images-visible { 
	left: 0; 
	opacity: 1; 
}	
.slideshow-images-next { 
	left: 0; 
	opacity: 0; 
}
.slideshow-images-prev { 
	left: 0; 
	opacity: 0; 
}

/*
These are examples of user-defined styles.
Customize these classes to your usage of Slideshow.
*/

.slideshow {
	height: 160px;
	margin: 0 auto;
	width: 547px;
}
.slideshow a img {
	border: 0;
}

.slideshow-captions {
	background: #000;
	bottom: 0;
	color: #FFF;
	font: normal 12px/22px Arial, sans-serif;
	left: 0;
	overflow: hidden;
	position: absolute;
	text-indent: 10px;
	width: 100%;
	z-index: 10000;
}
.slideshow-captions-hidden {
	height: 0;
	opacity: 0;
}
.slideshow-captions-visible {
	height: 22px;
	opacity: .7;
}

.slideshow-controller {
	background: url(controller.png) no-repeat;
	height: 42px;
	left: 50%;
	margin: -21px 0 0 -119px;
	overflow: hidden;
	position: absolute;
	top: 50%;
	width: 238px;
	z-index: 10000;
}
.slideshow-controller * {
	margin: 0;
	padding: 0;
}
.slideshow-controller-hidden { 
	opacity: 0;
}
.slideshow-controller-visible {
	opacity: 1;
}
.slideshow-controller a {
	cursor: pointer;
	display: block;
	height: 18px;
	overflow: hidden;
	position: absolute;
	top: 12px;
}
.slideshow-controller a.active {
	background-position: 0 18px;
}
.slideshow-controller li {
	list-style: none;
}
.slideshow-controller li.first a {
	background-image: url(controller-first.gif);
	left: 33px;
	width: 19px;
}
.slideshow-controller li.last a {
	background-image: url(controller-last.gif);
	left: 186px;
	width: 19px;
}
.slideshow-controller li.next a {
	background-image: url(controller-next.gif);
	left: 145px;
	width: 28px;
}
.slideshow-controller li.pause a {
	background-image: url(controller-pause.gif);
	left: 109px;
	width: 20px;
}
.slideshow-controller li.play a {
	background-image: url(controller-play.gif);
}
.slideshow-controller li.prev a {
	background-image: url(controller-prev.gif);
	left: 65px;
	width: 28px;
}

.slideshow-images img { 
	float: left;
}	

.slideshow-loader {
	height: 28px;
	right: 0;
	position: absolute;
	top: 0;
	width: 28px;
	z-index: 10001;
}
.slideshow-loader-hidden {
	opacity: 0;
}
.slideshow-loader-visible {
	opacity: 1;
}

.slideshow-thumbnails {
	bottom: -65px;
	height: 65px;
	left: 0;
	position: absolute;
	width: 100%;
}
.slideshow-thumbnails * {
	margin: 0;
	padding: 0;
}
.slideshow-thumbnails ul {
	height: 65px;
	left: 0;
	position: absolute;
	top: 0;
	width: 10000px;
}
.slideshow-thumbnails li {
	float: left;
	list-style: none;
	margin: 5px 5px 5px 0;
	position: relative;
}
.slideshow-thumbnails a {
	display: block;
	padding: 5px;
	position: relative; 
}
/*
Use the !important keyword to override any on-going javascript FX without affecting performance.
*/
.slideshow-thumbnails a:hover {
	background-color: #FF9 !important;
	opacity: 1 !important;
}
.slideshow-thumbnails img {
	display: block;
}
.slideshow-thumbnails-active {
	background-color: #9FF;
	opacity: 1;
}
.slideshow-thumbnails-inactive {
	background-color: #FFF;
	opacity: .5;
}