/* CSS Document */

* {margin:0px; padding:0px;}
/* 
This sets all margins and all paddings on everything to 0 pixels.
When positioning elements either by floating them or with absolute positioning, it's
important to know the exact widths. Without margin and padding specs, 
browsers will set these according to their defaults, and lots of problems will result.

Avoid giving main container elements padding or margins specs. Assign padding or margins to the elements within the containing elements. The following is an example of this.

<div id="container">
<div>
</div>
</div>

Put padding inside the div and the layout will stay true.
*/

a {outline:none;} 
/* This is a Firefox fix to eliminate annoying outlines on links in rollover or click states. */

div {position:relative;}
/*
All divs have a position of relative so elements inside these divs may use
position: absolute. If the div didn't have position and you set an element
inside it to absolute, then that element would position itself relative to the 
entire web page, not it's containing element. Notes on positioning appear 
in "general_css_notes.php" in the absolute positioning example link. 
Althouh not necessary to give all of them, it doesn't hurt.  Sometimes it's 
necessary to position something absolutely. this saves thinking about 
why it doesn't work.
*/

/* GENERAL */

body {
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
line-height:16px;
color:#5f4b3d;
background-color:#7a685d;
}

h2, h3, h4, h5, h6 {
	font-size:11px;
	font-family: Arial, Helvetica, sans-serif;
}

a {text-decoration:none;}
a:hover {text-decoration:underline;}

#wrapper, #footer {
width:1000px;
margin:0px auto;
/* this centers elements on the page. "auto" is the key.
I'm making sure that the wrapper and footer will always be the same width
because of the background images they'll have that will be interacting */
}

#wrapper {
background-image:url(../images/bg_wrapper.jpg);
background-repeat:repeat-y;
/* the background image includes the shadow around the site */
}

#masthead, #masthead_home, #links_main, #main_content {
width:980px;
margin:0px auto;
}

/*
The wrapper and footer must be 1000px wide to hold the shadow iimage 
around the edges of the entire site. These are 980px wide and centered within the wrapper 
to move them away from the outside shadow.
*/

.clear {
clear:both;
}

/* Simple and important. Text naturally wraps around floating elements. When text wrap
isn't desirable, clearing the floats, either both or just right or just left prevents wrapping
and causes the element below the float to move.*/

.dotted_border_bottom {
background-image:url(../images/bg_dotted_border.gif);
background-position:bottom left;
background-repeat:repeat-x;
}

.go_link {
	display:block;
	background-image:url(../images/btn_go.png);
	background-repeat:no-repeat;
	background-position:bottom right;
	padding-right:40px;
	padding-left:20px;
	height:31px;
	line-height:31px;
	color:#009394;
	font-size:11px;
	font-weight:bold;
	text-decoration:none;
}
/* Since these go links can be in either the right or left column and on any of the pages
they are styled here in the General section, without width. Add width as needed. */

.go_link:hover {
text-decoration:underline;
}

/* HEADER */

#header {
height:58px;
padding-left:217px;
}

#header h2 { /* Giving every element a class or id name isn't necessary. Pinpoint it this way  */
width: 260px;
height:48px;
border-left:1px solid #bfb7b1;
text-indent:-4000px; /* throws the text off the visible page */
position:relative;
top:10px; /* moves the entire header down 10px */
}
/* This one is more complicated than most because of the border to the left of it.
I could have just used an image for that border, but I prefer to use xhtml whenever
possible. Usually you size these to the exact size of the image being used for text, but 
couldn't do that here. The width gives some breathing room for the border. The height
gives us a vertical length for the border which we can change if we need to. The
background-position moves the background image to center it on the border. Unlike table tds
you can't tell a div element to place everything on the bottom. I needed the border to
come right down to the image. I accomplished that with position relative and moved it down 10px.
(see my general notes on positioning in "general_css_notes.php")
*/

#header p { /* it's not necessary to give every element a class or id name. You can pinpoint it this way  */
float:right;
color:#5f4b3d;
padding:30px 20px 0px 0px;
}

/* MASTHEAD HOME PAGE */

/* I had to add this area because I completely forgot about the Flash 
and since the flash would not fit in the space for the picture the entire
header of the home page had to be reworked.
*/

#masthead_home {
height:228px;
padding:0px;
margin:0px auto;
position:relative;
}

#masthead_home #flash {
width:462px;
height:228px;
padding:0px;
margin:0px;
border-bottom:0px solid #000000;
position:relative;
z-index:10;
}

#masthead_home #flash #header_border { /* adds small border
which I had to add to the home page because that text is no longer there */
width:1px;
height:49px;
background-color:#bfb7b1;
position:absolute;
top:10px;
left:0px;
}

#masthead_home div {
float:left;
}

#masthead_home h1 {
background-image:url(../images/207x170logo.gif);
background-repeat:no-repeat;
background-position:bottom;
width:207px;
height:228px;
text-indent:-4000px;  /* this throws the text off the visible page */
float:left;
border-bottom:0px solid #000000;
border-top:0px solid #000000;
}

#masthead_home h1 a {
display:block;
width:207px;
height:140px;
}

#masthead_home #masthead_right {
width:311px;
height:228px;
float:left;
padding:0px;
}

#masthead_home #masthead_right img {
position:absolute;
bottom:0px;
left:0px;
z-index:1; /* fixes bug in IE 6 and 7 */
}

#masthead_home #masthead_right #links {
position:absolute;
bottom:0px;
right:0px;
height:170px;
padding:0px;
z-index:20; /* fixes bug in IE 6 and 7 */
}

#masthead_home #masthead_right h2 {
display:none;
}

#masthead_home #masthead_right p {
position:absolute;
top:30px;
left:26px;
width:275px;
padding:0px;
margin:0px;
text-align:right;

}

/* MASTHEAD SUBPAGES */

#masthead {height:170px;}

#masthead h1, #masthead img, #masthead div {
float:left;
height:170px;
}
/* floating all the elements is an easy way to put them next to each other without using
a table */

#masthead div,
#masthead_home #masthead_right #links {
width:147px;
background-color:#009394;
}

#masthead h1 {
background-image:url(../images/207x170logo.gif);
background-repeat:no-repeat;
width:207px;
height:170px;
text-indent:-4000px;  /* this throws the text off the visible page */
}

#masthead h1 a {
display:block;
width:207px;
height:140px; /* IE 6 FIX DO NOT CHANGE */
}

/* troubleshooting: 
The above was a nasty problem with IE 6. In all the other browsers everything
looked as it should, in IE 6 the main links area had about a 5 pixel gap between
it and the masthead (the pictures, etc). Here's what I do to troubleshoot these problems:
1. First, I just look for obvious things to change, maybe give the element some height, change
the vertical height of things within the problem area, etc. Sometimes this works.
2. If 1 doesn't work I make a back-up of my css file and then use the original to play around.
3. First I try to isolate the problem. At first I thought the problem was with the main links
area, but giving it a border-top:1px solid #FF0000; it was easy to see that the gap was actually
the problem of the masthead area.
4. Once the problem area is isolated I just start eliminating css code in that area until the 
problem goes away. Then I know where the problem is and then I start playing with that CSS code to see
if I can fix it. In the above case I had to give the <a> tag some height and width so that the link
would work. For some reason IE 6 would not allow the <a> tag to have the exact height of the masthead
though every other browser does.
NOTE: I try as much as possible not to use hacks to fix problems. Most problems in IE 6 and 7 can be fixed
by approaching the problem from a different angle. As you know, there are a million ways to do everything
in web development and there is very often a solution that does not require a hack. Before using a hack I use
IE Explorer conditional statements or PHP and then as a last resort, hacks.
*/

#links_main #left_box {
background-color:#a0a444;
width:207px;
height:31px;
float:left;
}

/* LEFT COLUMN */

#left_column {
width:207px;
position:absolute;
top:0px; /*positions the left column in the upper left hand corner of it's containing element */
left:0px; /*positions the left column in the upper left hand corner of it's containing element */
}

#left_column h4,
#left_column p {
padding-left:20px;
padding-right:10px;
}

#left_column h4 {padding-bottom:2px;padding-top:10px;}
#left_column h4 span {color:#009394;}
#left_column p {padding-bottom:10px;}

#left_column .go_link {
width:147px;
}

#left_column div p,
#right_column p {
padding:0px;
background-image:url(../images/bg_dotted_border.gif);
background-repeat:repeat-x;
background-position:bottom;
}

#left_column div {
padding:0px;
background-image:url(../images/bg_dotted_border.gif);
background-repeat:repeat-x;
background-position:top;
}

/* to insure the dotted border being used looks like the comp I'm using an
image of the border from the comp. I use this as a background image repeated
where needed. For the newsletter link in the left column this gets a little
complicated because elements (at this point, it's going to change in the future) can 
only have one background image. We need three here. So I added a div tag and a <p> tag around the
<a> tag. */

#left_column .no_show,
#left_column ul li span {
display:none;
}
/* I've added the no_show class so that any links you need to change will only be in
one file. By giving two of the links a .no_show class I can pinpoint them in the left column
making them disappear here, but leaving them where they are needed in the footer */

#left_column ul {
list-style-type:none;
list-style-image:url(../images/img_link_pointer_2.gif);
margin-left:34px;
margin-top:15px;
}

#left_column ul li {
padding-bottom:8px;
}

#left_column ul a {
color:#5f4b3d;
text-decoration:none;
}

#left_column ul a:hover {
text-decoration:underline;
}

/* RIGHT COLUMN */

#right_column {
width:147px;
position:absolute;
top:0px; /*positions the right column in the upper right hand corner of it's containing element */
right:0px; /*positions the right column in the upper right hand corner of it's containing element */
}

#right_column .go_link {
width:87px;
}

#calendar {
background-color:#99d4d4;
padding:20px 15px;
}

#calendar table {
width:100%;
}

#calendar th {
color:#009394;
font-weight:normal;
}

#calendar td {
color:#FFFFFF;
text-align:center;
}

#calendar #month_name {
text-align:left;
padding-top:8px;
}

#calendar #month_name a {
color:#009394;
text-decoration:none;
}

#calendar #month_name a:hover {
text-decoration:underline;
}

/* CONTENT (MIDDLE COLUMN) */

#content {
width:626px;
margin-left:207px; 		
}					
/* This moves the content area away from the left column by exactly the width of the left column. */

#content, #content div { min-height: 300px;} 
/* Min-height doesn't work in IE6. */
/* This column is not positioned absolutely as are the other two columns. Positioning something absolutely removes it from the flow of the document. In a sense, it doesn't take up any space. One element in this main content area needs to take up space so that the wrapper, with its background image, will expand to enclose this content area. Positioning this area absolutely would result in the background image extending down only as far as the main links.
*/

#content div {
	border-left:1px solid #bfb7b1;
	border-right:1px solid #bfb7b1;
	padding-top: 30px;
	padding-right: 45px;
	padding-bottom: 30px;
	padding-left: 73px;
}					
/* A div within the main content area targets only that padding without affecting the layout. */


#content div a,
#calendar {
	font-weight:bold;
	text-transform:capitalize;
	font-family: Arial, Helvetica, sans-serif;
}					
/* Handy for sitewide revisions, this capitalizes the first letter of every word of text links. Comment out if no longer desired, then treat all text links individually. */

#index #content h3 {
text-transform:uppercase;
}					
/* Affects h3 only in the middle content area in the home page. A td positions something in the
middle very easily. It's a little more difficult without a td. Line-height automatically centers the text in the height you give it. Without the line-height here, the header appears off centered from the image text. Adjust accordingly. */					
					
/* Can't use padding here because of the float, so position:relative is a workaround. */

#index #content, #index #content div {min-height: 500px;}

#index #content p {			
padding-bottom:20px;
padding-right:160px;
}					
/* Affects <p> only in the home page. */

#index #content hr {
width:370px;
}

#index #content div {padding-right:43px;} 

#index #content img {
	float:right;
	border:1px solid #bfb29e;
	margin-top:10px;
}

/*.float_right {
	float:right;
	clear:right;
	margin-top: -30px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 55px;
}*/

.more {
color:#009394;
margin-left:0px;
font-weight:bold;
text-decoration:none;
}

.more:hover {text-decoration:underline;}

#subpages.form_news_subscribe #content div {padding-bottom:150px;}

/* Image headers */

#apparel {
background-image:url(../images/025x300apparel.png);
background-repeat:no-repeat;
width:300px; /* must match exact width of background image */
height:25px; /* must match exact height of background image */
text-indent:-4000px; /* throws the html text off the visible page */
}

#askpastor {
background-image:url(../images/025x300location.png);
background-repeat:no-repeat;
width:300px; /* must match exact width of background image */
height:25px; /* must match exact height of background image */
text-indent:-4000px; /* throws the html text off the visible page */
}

#awana {
background-image:url(../images/025x300awana.png);
background-repeat:no-repeat;
width:300px; /* must match exact width of background image */
height:25px; /* must match exact height of background image */
text-indent:-4000px; /* throws the html text off the visible page */
}

#homiletics {
background-image:url(../images/400x022homiletics.png);
background-repeat:no-repeat;
width:400px; /* must match exact width of background image */
height:22px; /* must match exact height of background image */
text-indent:-4000px; /* throws the html text off the visible page */
}

#ifyoubelieve {
background-image:url(../images/025x300ifyoubelieve.png);
background-repeat:no-repeat;
width:300px; /* must match exact width of background image */
height:25px; /* must match exact height of background image */
text-indent:-4000px; /* throws the html text off the visible page */
}

#ifyourelooking {
background-image:url(../images/025x300ifyourelooking.png);
background-repeat:no-repeat;
width:300px; /* must match exact width of background image */
height:25px; /* must match exact height of background image */
text-indent:-4000px; /* throws the html text off the visible page */
}

#ifyourenot {
background-image:url(../images/025x300itsofficial.png);
background-repeat:no-repeat;
width:300px; /* must match exact width of background image */
height:25px; /* must match exact height of background image */
text-indent:-4000px; /* throws the html text off the visible page */
}

#itsofficial {
background-image:url(../images/025x300itsofficial.png);
background-repeat:no-repeat;
width:300px; /* must match exact width of background image */
height:25px; /* must match exact height of background image */
text-indent:-4000px; /* throws the html text off the visible page */
}

#launch {
background-image:url(../images/025x300launch.png);
background-repeat:no-repeat;
width:300px; /* must match exact width of background image */
height:25px; /* must match exact height of background image */
text-indent:-4000px; /* throws the html text off the visible page */
}

#opening {
background-image:url(../images/400x022opening.png);
background-repeat:no-repeat;
width:400px; /* must match exact width of background image */
height:22px; /* must match exact height of background image */
text-indent:-4000px; /* throws the html text off the visible page */
}

#picnic {
background-image:url(../images/400x022picnic02.png);
background-repeat:no-repeat;
width:400px; /* must match exact width of background image */
height:22px; /* must match exact height of background image */
text-indent:-4000px; /* throws the html text off the visible page */
}

#pumbackpack {
background-image:url(../images/025x300pumbackpack.png);
background-repeat:no-repeat;
width:300px; /* must match exact width of background image */
height:25px; /* must match exact height of background image */
text-indent:-4000px; /* throws the html text off the visible page */
}

#sdmomschool {
background-image:url(../images/400x022sdmomschool.png);
background-repeat:no-repeat;
width:400px; /* must match exact width of background image */
height:22px; /* must match exact height of background image */
text-indent:-4000px; /* throws the html text off the visible page */
}

#sermons {
background-image:url(../images/025x300sermons.png);
background-repeat:no-repeat;
width:300px; /* must match exact width of background image */
height:25px; /* must match exact height of background image */
text-indent:-4000px; /* throws the html text off the visible page */
}

#singalong {
background-image:url(../images/025x300singalong.png);
background-repeat:no-repeat;
width:300px; /* must match exact width of background image */
height:25px; /* must match exact height of background image */
text-indent:-4000px; /* throws the html text off the visible page */
}

#travel {
background-image:url(../images/025x300travel.png);
background-repeat:no-repeat;
width:300px; /* must match exact width of background image */
height:25px; /* must match exact height of background image */
text-indent:-4000px; /* throws the html text off the visible page */
}

#vacation {
background-image:url(../images/025x300vacation.png);
background-repeat:no-repeat;
width:300px; /* must match exact width of background image */
height:25px; /* must match exact height of background image */
text-indent:-4000px; /* throws the html text off the visible page */
}

#worship {
background-image:url(../images/400x022worship.png);
background-repeat:no-repeat;
width:400px; /* must match exact width of background image */
height:22px; /* must match exact height of background image */
text-indent:-4000px; /* throws the html text off the visible page */
}


/* FOOTER */

#footer {
background-image:url(../images/bg_footer.jpg); /* this is the shadow at the bottom of the main content area */
background-repeat:no-repeat;
background-position:top left; /* I've positioned it at the top of the footer */
padding-top:25px;
text-align:center;
font-size:10px;
color:#FFFFFF;
}

#footer ul {
list-style-type:none;
clear:left; /* this really is for the second ul to clear the floats above it */
text-align:center;
width:auto;
margin-bottom:10px;
}

#footer p {
clear:left; /* and the clears the floats in the second ul */
}

#footer ul li {
display:inline; /* this allows the li's to be centered in the footer using text-align */
color:#FFFFFF;
}

#footer ul li span {
padding:0px 5px 0px 6px;
}

#footer ul li a {
color:#FFFFFF;
font-size:10px;
text-decoration:none;
letter-spacing:1px;
}

#footer ul li a:hover {
text-decoration:underline;
}

/***************************/
/* the code below is so we can have SSI's with all the links and not have to
repeat any of them. So if you change the link "Watch" in the one file where the links are
it will change both the horizontal link "Watch" and the footer link "Watch". But 
to do this we have some things in the include that are not required by the footer.
By using CSS we can just get rid of what we are not using. Not to mention that we also
need to style the links differently in both places. */
/***************************/

#footer ul li a img {
display:none; /* this elminates the image in the footer */
}

#footer ul li ul { /* this targets the dropdown links */
display:none; /* this eliminates all the dropdown links in the footer */
}

hr {
background-color: #bfb7b1;
height: 1px;
margin-bottom: 14px;
border-top-color: #FFFFFF;
border-right-color: #FFFFFF;
border-bottom-color: #FFFFFF;
border-left-color: #FFFFFF;
border-top-width: thin;
border-right-width: thick;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}

/* EMAIL FORM */
#subpages.form_news_subscribe #content div div {padding:0px;border:none;}
#subpages.form_news_subscribe #content div div .padding p {position:relative;}
#subpages.form_news_subscribe #content #email_form #btn_submit,
#subpages.form_news_subscribe #content #email_form #btn_clear {}

#left_column #email_form .padding {padding:12px 18px 0px 12px;}
#left_column #email_form h2 {padding-left:4px;}
#subpages.form_news_subscribe #content #email_form h2, #left_column #email_form h2 {
	color:#009394;
	font-size:12px;
	padding-bottom:6px;
}
#left_column #email_form p {background-image:none;position:relative;padding:0px;}
#left_column #email_form .input input {width:100%;}
#subpages.form_news_subscribe #content #email_form label, #left_column #email_form .input label {display:none;}
#left_column #email_form .input {padding-bottom:9px;}

#email_form #btn_clear, #email_form #btn_submit {
	position:absolute;
	top:0px;
}


#email_form #btn_clear {right:-4px;background-image:url(../images/089x020_btn_clear.png);}
#email_form #btn_submit {left:0px;background-image:url(../images/089x020_btn_submit.png);}

#subpages.form_news_subscribe #content div #email_form #btn_clear {left:95px;}

#email_form #btn_clear, #email_form #btn_submit {
	display:block;
	width:89px;
	height:20px;
	border:none;
	text-indent:-9999px;
}

.warning_msg {color: #ff0000;}