/**************************************************************** 
|  Name: layout.css
|  Revision Date: 7/03/08
|  
|  Copyright 2008 - Solutions-One
|  
|  May not be reproduced/copied/ripped in anyway.
|
|  This is the main page layout for South Bay Community Church.
|
\****************************************************************/
html {
	overflow-y: scroll;
}

body {
	margin: 0px;
	color: #999;
	font-size: 14px;
	text-align: center;
	background: #fff url(images/page_bg.png) repeat-y 50% 0;
	font-family: Arial, Helvetica, sans-serif;
}

blockquote {
	margin: 15px;
}

p {
	padding: 5px 0px 5px 0px;
	margin: 0px;
}

a, a:visited {
	color: #527ABE;
	text-decoration: none;
}

a:hover {
	color: #ffffff;
	text-decoration: underline;
}

img {
	border: 0px;
}

.warning {
	color: #ff0000;
	font-size: 9px;
}

/*************************************************************************
|
| Headers for the entire website both
| global and within specific containers.
|
/************************************************************************/
h1 {
	padding: 0px;
	margin: 0px;
	font-size: 36px;
	color: #5a86a9;
	letter-spacing: -3px;
}

h2 {
	padding: 0px;
	margin: 0px;
	font-size: 25px;
}

h3 {
	padding: 0px;
	margin: 0px;
	font-size: 20px;
}

.section_header {
	padding: 0px;
	margin: 0px;
}

.section_header h2 {
	border-bottom: #628F86 1px dashed;
	letter-spacing: -2px;
	line-height: 24px;
	color: #628F86;
	font-size: 23px;
}

.section_header h3 {
	border-bottom: #6e6f6f 1px dashed;
	letter-spacing: -2px;
	line-height: 20px;
	color: #6e6f6f;
	font-size: 23px;
}

h4 {
	padding: 0px;
	margin: 0px;
	font-size: 15px;
}

.section_header h4 {
	border-bottom: #6e6f6f 1px dashed;
	letter-spacing: -1px;
	line-height: 20px;
	color: #6e6f6f;
	font-size: 15px;
}

h5 {
	padding: 0px;
	margin: 0px;
	font-size: 10px;
}

.subHeader {
	padding-top: 40px;
}

/*************************************************************************
|
| Top Links on top of the webpage
|
\************************************************************************/
/*.topLinks a {
	font-size: 17px;
	color: #666666;
	font-weight: bold;
	text-decoration: none;
	margin-left: 22px;
	letter-spacing: -1px;
}
.topLinks a:hover {
	color: #849dad;
}*/

/************************************************************************
|
| Main container for the entire website
|
\************************************************************************/
#wrapper {
	width: 844px;
	margin-bottom: 25px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}

#wrapper2 {
	width: 500px;
	margin-bottom: 25px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}

/*************************************************************************
| .header is the header container for the main page
| Each page on the website falls under a different class for
| the header to change the image respectively.
|
| NOTE: PHP implementation in the future
\*************************************************************************/
.header {
	width: 844px;
	height: 221px;
	background-image: url(images/header.jpg);
	background-repeat: no-repeat;
	background-position: top right;
}

/*
| .header2 is the header container for the subpages
*/
.header2 {
	width: 844px;
	height: 221px;
	background-image: url(images/sub_header.jpg);
	background-repeat: no-repeat;
	background-position: top right;
}

/*
| .header_contact is the container for the Contact page
*/
.header_contact {
	width: 844px;
	height: 221px;
	background-image: url(images/contact_header.jpg);
	background-repeat: no-repeat;
	background-position: top right;
}

/*
| .header_prayer is the container for the Prayer page
*/
.header_prayer {
	width: 844px;
	height: 221px;
	background-image: url(images/prayer_header.jpg);
	background-repeat: no-repeat;
	background-position: top right;
}

/*
| .header_media is the container for the Media page
| All subsections under Media will use the same
| class.
*/
.header_media {
	width: 844px;
	height: 221px;
	background-image: url(images/media_header.jpg);
	background-repeat: no-repeat;
	background-position: top right;
}

/*
| .header_children is the container for the Children Ministries
| page
*/
.header_children {
	width: 844px;
	height: 221px;
	background-image: url(images/children_header.jpg);
	background-repeat: no-repeat;
	background-position: top right;
}

/*
| .header_youth is the container for the Youth Ministry
| page
*/
.header_youth {
	width: 844px;
	height: 221px;
	background-image: url(images/youth_header.jpg);
	background-repeat: no-repeat;
	background-position: top right;
}

/*
| .header_adult displays the background for 
|  Adult Ministry page
*/
.header_adult {
	width: 844px;
	height: 221px;
	background-image: url(images/adult_header.jpg);
	background-repeat: no-repeat;
	background-position: top right;
}

.header_regular {
	width: 844px;
	height: 221px;
	background-image: url(images/bya_header.jpg);
	background-repeat: no-repeat;
	background-position: top right;
}

/*
| .header_serve displays the background for 
|  I Want to Serve page
*/
.header_serve {
	width: 844px;
	height: 221px;
	background-image: url(images/serve_header.jpg);
	background-repeat: no-repeat;
	background-position: top right;
}

/*
| .header_event2 displays the background for 
|  Event 2 of the Flash AD for front page.
*/
.header_event2 {
	width: 844px;
	height: 221px;
	background-image: url(images/sonworld_header.jpg);
	background-repeat: no-repeat;
	background-position: top right;
}

/*
| .header_event3 displays the background for 
|  Event 3 of the Flash AD for front page.
*/
.header_event3 {
	width: 844px;
	height: 221px;
	background-image: url(images/bowling_header.jpg);
	background-repeat: no-repeat;
	background-position: top right;
}

.home {
	
	float: left;
}
.home a {
	display: block;
	cursor: pointer;
	width: 310px;
	height: 185px;
}

.topLinks {
	float: right;
	width: 732px;
	height: 18px;
	font-size: 18px;
	color: #666666;
	margin-top: 8px;
	text-align: right;
	padding-top: 7px;
	/*padding-right: 4px;*/
}
.topSpace1 {
	margin-left: 65px;
}
.topSpace {
	margin-right: 50px;
}
.midSection {
	width: 844px;
	/*border-bottom: 14px solid #cacbcb;*/
}
.navTop {
	width: 254px;
	height: 63px;
	background-image:url(images/top_nav1.jpg);
	background-repeat: no-repeat;
	background-position: right;
}
.nav {
	float: left;
	width: 254px;
	height: 378px;
	background-image: url(images/nav_bg.gif);
	background-position: right;
	background-repeat: repeat-y;
}
.navMenu {
	margin-left: 57px;
}
.mainImg {
	width: 800px;
	height: 381px;
	float: right;
	z-index: -50;
}

.rightCtn_text ul {
	padding-top: 0px;
	padding-bottom: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
}

/*************************************************************************
|  .itemCtn class used to mimic tables using float containers and
|  different div tags. This is mainly used to place items in 
|  accordance with each other such as events, dates and information
|  related to those events
\************************************************************************/
.itemCtn {
	width: 400px;
}

.itemCtn_left {
	float: left;
	width: 80px;
	text-align: left;
}

.itemCtn_right {
	float: left;
	text-align: right;
}

.upgrade {
	text-align: center;
	margin-top: 75px;
	z-index: 0
}

/*************************************************************************
|  .mainContent class used for the wrapper for content in the middle
|  of subpages.
\************************************************************************/

.mainContent {
	width: 799px;
	margin-left: 45px;
	background-image: url(images/main_bg.jpg);
	background-repeat: repeat-y;
}

.floatleft_ctn{
	float: left;
	width: 197px;
	height: 100%;
}

.floatright_ctn{
	float: right;
	width: 602px;
	height: 100%;
}

.subpage_text {
	padding-left: 20px;
}

/*Container for the sub navigation*/
.subNavCtn {
	width: 183px;
	margin-left: 14px;
	height: 100%;
}

/* Container which holds top grunge pattern for sub navigation */
.subTop {
	width: 197px;
}

.subBottom {
	width: 100%;

}


.subNav a {
	color: #ffffff;
	display: block;
	margin-left: 14px;
	padding-left: 15px;
	line-height: 36px;
	margin-bottom: 3px;
	background-image: url(images/sub_nav_bg.jpg);
	background-repeat: no-repeat;
	font-size: 16px;
}

.subNav a:visited {
	color: #ffffff;
}

.subNav a:hover {
	background-image: url(images/sub_nav_hover.jpg);
	background-repeat: no-repeat;
	text-decoration: none;
}

/* Used for the currently viewed page for Left Hand Navigation*/
#sub_nav_select {
	background-image: url(images/sub_nav_hover.jpg);
	background-repeat: no-repeat;	
	font-weight: none;
}	

/* Container which holds grunge pattern for main content on subpages */
.mainTop {
	width: 602px;
	background-image: url(images/mainbg_top.jpg);
	background-repeat: no-repeat;
}

/* Container for holding text in subpages main content > right container */
.rightCtn_text {
	width: 578px;
	color: #000000;
	height: 100%;
	padding-left: 15px;
}

.clear {
	clear: both;
}

#wrapper .ads {
	width: 800px;
	height: 105px;
	margin-left: 45px;
	border-top: 14px solid #cacbcb;
	background-color: #cacbcb;
}
#wrapper .box {
	width: 183px;
	height: 105px;
	background-color: #fff;
	float: left;
	margin-left: 14px;
}

/* This class is used for the main page only as it has no blue repeating on the left */
#wrapper .bottom {
	width: 800px;
	height: 47px;
	background-image: url(images/bottom.jpg);
	background-repeat: no-repeat;
	background-position: top left;
}

/* This class is used for the main page only as it has the repeating blue bg from the
|  sub navigation menu.
*/
#wrapper .bottom_noblue {
	width: 800px;
	height: 47px;
	background-image: url(images/bottom_noblue.jpg);
	background-repeat: no-repeat;
	background-position: top left;
}

/********************************************************* 
|  FOOTER 
\********************************************************/

/* .footer is for the footer for the main page only */
.footer {
	padding-top: 45px;
	width: 800px;
	margin-left: 43px;
	text-align: center;
	color: #000000;
	font-size: 14px;
}

.footer a:hover {
	color: #5a86a9;
}

.footer a{
	color: #666666;
	text-decoration: none;
	font-size: 14px;
}

/* .footer_sub is for the footer for the sub pages only */
.footer_sub {
	width: 800px;
	margin-left: 43px;
	text-align: center;
	color: #000000;
	font-size: 12px;
}

.footer_sub a{
	color: #666666;
	text-decoration: none;
	font-size: 14px;
}

.footer_sub a:hover {
	color: #5a86a9;
	text-decoration: underline;
}

.line {
	width: 85%;
	border-top: 1px dashed #9f9f9f;
	height: 5px;
}

/***********************************************************
|	FORMS
|
|	This is global to all forms across the entire website. 
\**********************************************************/
input.txt {
  color: #747272;
  border: 1px solid #a8a8a8;
  width: 200px;
}
input.btn { 
  color: #747272;
  background-color: #fff;
  border: 1px solid #a8a8a8;
}
form p {
  clear: left;
  margin: 5px 0px 0px 0px;
  padding: 0px;
}
form p label {
  float: left;
  width: 40%;
  font: Arial, Helvetica, sans-serif;
}

.rightCtn_text form p label {
	width: 300px;
	display: block;
}
textarea {
  color: #336699;
  border: 1px solid #a8a8a8;
  width: 350px;
}
select {
  color: #747272;
  border: 1px solid #a8a8a8;
  width: 200px;
}