/***********************/
/******* body **********/
/***********************/
body {
	background-image:url('../images/bg_background.gif');
	b ackground-color: blue;
	t ext-align:center;
	padding:0px;
	font-family: arial, "bitstream charter", FreeSans, sans-serif;
	font-size: 10pt;
	margin: 0px;
	color: #001F53; 112F64; 
}
#body-wrap{ /*container {*/
	b ackground-color: white;
	b ackground-color: blue;
	margin-top:20px;
	margin-left:auto;
	margin-right:auto;
	padding: 0px;
	text-align:left;
	width:900px;
}

/***********************/
/***** global **********/
/***********************/
a.tpl, a.tpl:visited:active:link {
	color:#625; red;
	text-decoration: none;
}
a.tpl:hover { text-decoration: underline; }
.clear {clear: both;}
em { font-style: italic; font-weight: bold;}
img { border:0px; }
p {margin-bottom: .75em;margin-top: .75em;}
.left { float: left;}
.right {float: right;}
.error { color: red;}


/***********************/
/****** print-only *****/
/***********************/
#footer-print { display:none; }
#print-header { display:none; }

/***********************/
/******* header ********/
/***********************/
#header-wrap { 
	padding: 0px; 
	margin: 0px; 
	background-color:white;
	overflow:hidden;
}
.header-img { float: right; margin:0px; padding:0px; text-align:right; }
.header-logo {float: left; margin:12px 4px 10px 0; background-color: white;}
.header-slogan { 
	float: right; 
	margin:10px 10px 0 0; 
	padding:0px; 
	f ont-family:times,'times new roman',serif;
	text-align:right;
	font-size:14pt;
	f ont-style:italic;
	font-weight:bold;
}
.header-slogan a{	text-decoration: none; padding-right:1.5em;}
.header-slogan a:hover{	text-decoration: underline; }

.showing { border:0px; height:376px; width:292px; }

/***********************/
/**** main content *****/
/***********************/
#content-wrap{
	b ackground-image:url(../images/blue-slice.JPG);
	b ackground-color:white;
	background: white; url(../images/blue-slice.JPG) repeat-x;
	overflow:hidden;
}
#content-column{
	float:right;
	width:569px;
	m argin-left:-250px;
	p adding-left:10px;
	b order:1px solid yellow;
}
#page-content {
	clear: both;
	margin:0; padding:0;
	b ackground-color: white;
	
}

/* index */

#index-top{
	clear: both;
	height:300px;
	b ackground-color: #EEF;
}
#index-top .form { margin:5px; border:solid 3px #F00; padding:5px;}

.connect {
	clear:both;
	height: 41px;
	background-image:url(../images/orange-slice.JPG); 
	overflow:hidden;
	text-align:center;
	font-size:12pt;
	font-weight:bold;
}
#connect a {border:0;}
#connect img {
	border:0;
	vertical-align: bottom;
}
.content {
  width:100%;
  border-collapse: collapse;
  background-color: #CCC;
}
.welcome { 
	b ackground-image:url(../images/clouds4.jpg);
	background-repeat: no-repeat;
	background-position: 50% 50%;
	font-size:11pt;
	font-family: "eras demi itc", "urw gothic", FreeSans, arial, sans-serif;
	font-weight: bold;
	text-align: center;
	v ertical-align: center;
}
.welcome div{padding:10px 10px 1px 10px;}
.welcome-title { font-size:20pt; text-align:center;font-weight:bold;}
.welcome-promise{
	text-align: center;
	padding:0 15px 15px 15px;
	font-style:italic;
	font-size: 10pt;
}
#slideshow-container{
	float: right;
	background-image:url(../images/photo-stack.JPG);
	margin:5px 10px 5px 5px;
	width: 595px;
	height: 319px;
	b order: solid 1px #555;
}
#slideshow{
	margin:32px 0 0 24px; //make it fit
	width: 550px;
	height: 250px;
	b order: solid 1px #555;
}
#slideshow-sidebar{
	float:left;
	width:250px;
	margin:15px 0 0 20px;
	b order: solid 1px #555;
}
.arrow-button-container{
	float: right;
	background-image:url(../images/blue-arrow.JPG);
	margin-top:20px; 11px;
	margin-right:10px;
	width: 229px;
	height: 67px;
	b order: solid 1px #555;
}
.arrow-button{
	p adding:3px 5px 0 10px;
	padding:3px;
	font-size: 16pt;
	font-weight: bold;
	f ont-style:italic;
	text-align:center;
}
.arrow-link{ color: white}
.arrow-link:hover{ color: yellow;}
#index-info{
	text-align:center;
	width:100%;
}
#index-info td{ vertical-align:top; padding-top:10px;}
#index-info p{padding:5px;}
.title-bar{
	background-image:url(../images/title-bar.JPG);
	background-position: center;
	background-repeat:no-repeat;
	font-size: 14pt;
	font-weight: bold;
	text-align:center;
	color: white;
	width:275px;
	height:45px;
}

#now-playing {
	float: right;
	width: 370px;
	height: 500px;
	font-size: 16pt;
	font-weight: bold;
	background-color: black;  #ddd;
	color: white;
	text-align: center;
	padding-top:15px;
	padding-bottom:15px;
}

/*****************
** PAGE CONTENT **
*****************/
.page-content { padding: 0 15px 10px 15px; }
.center {text-align: center;}
.menu { font-size:12pt; f ont-weight: bold;}
.page-title { 
	font-size: 18pt; 
	font-family: "eras demi itc", "urw gothic", FreeSans, arial, sans-serif; 
	padding: 10px 0 10px 15px; margin: 0px;
	background-color: #CCC;
	font-style: italic;
}
.larger { font-size: larger;}
h2 {font-size: 14pt; margin:.2em 0 .2em 0;}
h3 {font-size: 12pt; margin:.2em 0 .2em 0;}
.top {clear: both; text-align: right;}
.top a, .top a:link:visited:active { color: red;}

/*******************
** ADMINISTRATION **
*******************/
.admin-menu {
	margin: 10px 0 0 10px;
	font-weight: bold;
}
#sidebar { 
	float:left;
	width:200px;
	margin:0px; padding:0px;
	border-right: 1px solid #CCC;
	font-size:10pt;
}
.mainpage { vertical-align:top; padding: 0 5px 10px 0; }
.dbtable{overflow-x:scroll;max-height:200px;}

/*****************
** SMALL GROUPS **
*****************/
.smallgroup-image { float: left; margin: 0;}
.smallgroup-text { f loat: left; margin: 15px; font-size:11pt;}
.smallgroup-table { margin-left: auto; margin-right: auto; }
.smallgroup-table td {
	padding:13px 7px 0 7px;
	vertical-align: top;
	color: white; 
	font-weight: bold; 
	width:158px; 
	height:120px; 
	background-image: url('../images/smallgroup-benefit.PNG');
	background-repeat: no-repeat;
	text-align: center;
}
.smallgroup-linktable { margin-left: auto; margin-right: auto; width: 700px; border-collapse: collapse;}
.smallgroup-linktable th { color: white; background-color:#001F53;padding1px; text-align: center;}
.smallgroup-linktable th, .smallgroup-linktable td{ border-right: solid 1px white; padding:3px;}
.odd { background-color:#DDD; }
.even { background-color:#EEE; }


/***********************
** CHILDRENS MINISTRY **
***********************/
.childrens-table { margin-left: auto; margin-right: auto; }
.childrens-table td {
	padding:13px 12px 0 12px;
	vertical-align: top;
	color: white; 
	font-weight: bold; 
	width:158px; 
	height:170px; 
	background-image: url('../images/children-bluebox.PNG');
	background-repeat: no-repeat;
	text-align: left;
}

/**********
** STAFF **
**********/
.staff-table {width:600px; margin-left:auto; margin-right: auto; }
.staff-table td {width:300px; }

/**********
**  MAP  **
**********/
.map-p { }

/************
**  FORMS  **
************/
.form { padding-left: 10px; }
.form label{
	display: block;  
	float: left; 
	clear: both;
	width: 135px; 
	padding: 0; 
	margin: 5px 0 0;
}
.form .form-note {
	display: block;
	margin: 0 135px 5px;
	text-align: left; 
}
.form-alarm {
	display: block; 
	m argin-bottom: -5px;
	color: red;
	text-align: left; 
}
.form input, .form textarea {
	width:300px;
	margin:5px 0 0 0px; set margin on left of form elements rather than right of
                        label aligns textarea better in IE;
	c olor: #781351;
	b ackground: #fee3ad;
	b order: 1px solid #803900;
}
.form select{ 
	margin-top: 5px;
	w idth: auto; 
}
.form input[type=submit], .form input[type=reset]{ 
	margin-top: 15px;
	width: auto; 
}
.form textarea {height:5em;}
.form-title{font-weight:bold;}

/********************
** TOOL TIP STYLES **
********************/
a.tooltip span { display: none; }
a.tooltip, a.tooltip:active:visited:link { color:red; text-decoration: none; f ont-weight:bold;}
a.tooltip:hover { position: relative; c olor:black; b ackground-color:#CCF; text-decoration: none;}
a.tooltip:hover span {
	display: block;
	position: absolute;
	top:10px; left:0px;
	min-width: 120px;
	max-width: 225px;
	padding: 5px; margin: 10px; z-index: 100;
	padding-left: 25px;
	background-image: url('../images/icon_info.gif');
	background-position: top left;
	background-repeat: no-repeat;
	background-color: #DDD; border: 1px dotted black;
	font-size: 9pt;
	color: black;
	text-decoration: none;
	font-style: normal;
	text-indent: 0px;
}



/******************
** FOOTER STYLES **
******************/
#footer-wrap {
	background-color:#CCC;
	text-align:center;
	font-size:10pt;
}
.footer-left { 
	width:560px; 
	font-size:10pt;
	padding:5px 0 5px 10px;
	text-align: left;
}
.footer-left div{ padding:5px 0 5px 10px; }
.footer-right {
	font-size:10pt;
	padding:5px 0 5px 10px;
	text-align: left;
}
.footer-right div{ padding: 5px 10px 5px 10px; }
.footer-right .highlight{ font-size:larger; font-weight: bold; c olor:red;}
#footer-close {
	clear:both;
	text-align:left;
	background-image:url(../images/nav-background.JPG); 
	height:25px;
	font-size:9pt;
	overflow:hidden;
}


.copyright { float: left; font-size: smaller; padding:7px 0 0 15px; c olor: black;}
.copyright a, .copyright a:link:visited:active{ color: white; #001F53; text-decoration: none; }
.copyright a:hover { color: #0FF; #625; black;}
.design { float: right; font-size: smaller; padding:7px 15px 0 0; }
.design a, .design a:link:visited:active{ color:white; #001F53; text-decoration: none; }
.design a:hover { color:#0FF; white;#625; black;}