/*This CSS was originally created by Tatiana Hamboyan Harrison for Living Water Lutheran Church. 

NOTE TO LIVING WATER CHURCH: I've commented extensively on this file in the hopes that you all can modify it in the future, if you need to. Please note that every line of code within the fancy brackets {} needs to end with a semi-colon (;). If you change the attributes of a setting, be sure to check that you've included the semi-colon at the end. IF YOU FORGET A SEMI-COLON, EVERYTHING AFTER THAT LINE WILL BREAK! Be sure to save a copy of the original CSS file before changing anything, so you can revert back to the original if you make a mistake. Also, you can always contact me by email (taniahharrison@gmail.com) with quick questions if you're really stuck.

Please visit this site for more information about CSS properties: http://www.pageresource.com/dhtml/cssprops.htm */

BODY {
	/*The following 3 lines tell the browser how to display text. Font-family is the name(s) of the font(s), font-size should always be set at a percentage to accomodate those with poor eyesight, and text-align is the alignment of the text (can be set to justify, left, right, or center).*/

	font-family: Palatino Linotyle, Times New Roman, Georgia, serif;
	font-size: 100%;	
	text-align: left;
	
	
	/*If you want to change the background color of the non-boxed section, write the basic name of the color (such as cyan, blue, grey, etc.) or the hex code (such as #000000 for black) in the line of code below this one, on the right side.*/
	
	background-color: #FFFFCC; /*#a29a8f; (The original gray)*/
	
	/*You shouldn't need to change these next 3.*/
	width: 100%;
	margin: 0px;
	padding: 0px;
	}
	
/*This is the box that holds the header, the submenu, and the main text.*/
#box {
	width: 900px; /*This should be set as a minimum to the width of the header image, plus twice the padding of the section header.*/
	margin: 20px auto; /*Don't change this. Email me with questions.*/
	border: 2px solid #9CBBE7;
	background: white; 
	}
	
/*This next section creates the header. The background is set to the image.*/
#header {
	overflow: visible;
	background-color: gray;
	background-image: url("banner.JPG"); 
	background-repeat: repeat-y;
	background-position: top right;
	width: 900px; /*set to the width of the image.*/
	padding: 0px;
	margin-bottom: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-left: 0px;
	min-height: 200px;
	height: auto !important;
	height: 200px;
	}

/*These next few sections are for the LWL logo on the top left:*/	
a.logo {
	float: left;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 10px;
	padding: 0px;
	text-decoration: none;
	background: white;
	opacity: 0.7; /*to make image slightly translucent*/
	filter: alpha(opacity=70); /*to make translucency work in IE*/
	border: 0px;
}

a.logo:hover {
	border: 0px;
	opacity: 0.9; /*to increase opacity upon hover*/
	filter: alpha(opacity=90); /*IE fix*/
}

img.logo {
	text-decoration: none; /*to prevent image from acting like text links*/
	border: 0px;
	padding: 0px;
	margin: 0px;
}

/*This sets the attributes for the Living Water Lutheran title.*/
a.h1 {
	text-align: left;
	font-size: 250%; 
	font-variant: small-caps; /*If you don't want small-caps, just delete this line of code.*/
	font-weight: bold; 
	text-indent: 0px;
	padding: 2px;
	margin: 8px;
	color: black;
	border-bottom: 3px solid #003366;
	}
	
/*Since the LWL title is a link, we set its hover properties here:*/
a.h1:hover {
	border-top: 0px;
	border-bottom: 3px solid #cccbc6;
	}
	
/*This sets the text attributes for header2, which is used for the mission statement.*/
h2 {
	background: transparent;
	text-align: right;
	font-size: 175%;
	font-weight: bold;
	margin: 8px;
	padding: 2px;
	font-variant: small-caps;
	color: #FFFFCC;
	}
	
/*This section sets the attributes for the buttons in the header:*/
ul.menu {
	text-align: center;
	background: transparent;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
	padding-left: 10px;
	padding-right: 5px;
	padding-bottom: 0px;
	padding-top: 0px;
	list-style-type: none;
	font-weight: bold;
	}
	
ul.menu li {
	background: transparent;
	padding: 0px;
	margin: 0px;
	display: inline;
	line-height: 2;
	}	

ul.menu a:link {
	font-size: 130%;
	color: black;
	padding: 2px;
	margin: 2px;
	border-bottom: 3px solid #003366;
	}
	
ul.menu a:visited {
	font-size: 130%;
	color: black;
	padding: 2px;
	margin: 2px;
	border-bottom: 3px solid #003366;
	}
		
ul.menu a:hover {
	font-size: 130%;
	color: black;
	border-top: 3px solid #cccbc6;
	border-bottom: 3px solid #cccbc6;
	}
		
ul.menu a.current:hover {
	font-size: 130%;
	border-top: 0px;
	border-bottom: 3px solid #003366;
	}
	
/*Current is so we can tell which page we're on:*/
ul.menu a.current:link {
	font-size: 130%;
	color: black;
	border-top: 3px solid #cccbc6;
	border-bottom: 3px solid #cccbc6;
	}
	
ul.menu a.current:visited {
	font-size: 130%;
	color: black;
	border-top: 3px solid #cccbc6;
	border-bottom: 3px solid #cccbc6;
	}
	
/*This creates the first bar with the title of the page for any page that does not have a sub-menu:*/
#sub {
	float: left;
	width: 900px;
	text-align: left;
	background-color: gray;
	background-image: url("sub.JPG"); 
	background-repeat: repeat-y;
	background-position: top right;
	margin: 0px;
	padding-top: 2px;
	font-size: 150%;
	font-weight: bold;
	font-variant: small-caps;
	color: #FFFFCC;
	text-indent: 5px;
}

/*This creates the first bar with the title of the page and the sub-menu:*/
#sub1 {
	float: left;
	width: 900px;
	text-align: left;
	background-color: gray;
	background-image: url("sub.JPG"); 
	background-repeat: repeat-y;
	background-position: top right;
	margin: 0px;
	padding: 0px;
	text-indent: 5px;
}

/*The title is displayed on the left:*/	
ul.title {
	line-height: 1.5;
	float: left;
	padding: 0px;
	border: 0px;
	margin: 0px;
	font-size: 150%;
	font-weight: bold;
	font-variant: small-caps; 
	list-style-type: none;
	color: #FFFFCC;
	}
	
ul.title li {
	border: 0px;
}	
	
/*While the sub-menu is displayed on the right:*/
ul.sub {
	background: transparent;
	float: right;
	text-align: left;
	margin: 5px;
	padding: 0px;
	list-style-type: none;
	font-size: 120%;
	}
	
ul.sub li {
	margin: 0px;
	padding: 0px;
	display: inline;
	line-height: 1.5;
	font-weight: bold;
	}	
	
ul.sub a {
	font-size: 100%;
	border-bottom: 3px solid #003366;
	padding: 2px;
	margin: 2px;
	color: black;
	text-decoration: none;
	}
	
ul.sub a:hover {
	border-top: 3px solid #cccbc6;
	border-bottom: 3px solid #cccbc6;
	}
	
/*Now we move on to the main content of the site:*/
	
/*This sets the attributes for the text dividers (the watery bits):*/
#random {
	width: 900px;
	background-color: gray;
	background-image: url("sub.JPG"); 
	background-repeat: repeat-y;
	background-position: top right;
	margin: 0px;
	padding: 0px;
	border-right: 0px;
	border-left: 0px;
	min-height: 30px;
	text-align: left;
	font-size: 150%;
	font-weight: bold;
	font-variant: small-caps;	
	text-indent: 5px;
	color: #FFFFCC;
}
	
	
/*This sets the attributes for paragraphs. You shouldn't need to change this.*/
p {
	clear: both;
	background: white;
	text-indent: 25px;
	margin: 5px;
	padding: 5px;
	text-align: left;
	line-height: 1.5;
	}

/*This sets the attributes for general links:*/	
a {
	font-family: Arial, sans serif;
	font-weight: bold;
	color: #003366;
	font-size: 85%;
	text-decoration: none;
	border-bottom: 2px solid #003366;
}

a:hover {
	border-bottom: 2px solid #cccbc6;
	border-top: 2px solid #cccbc6;
}
	
/*This sets the attributes for image links:*/
a.img:hover {
	border-top: 0px;
}

img.link {
	border: 0px;
	margin-right: 5px;
	padding-right: 2px;
}

/*General list attributes:*/
ul {
	line-height: 1.5;
}

/*List attributes without bullet:*/

ul.text {
	list-style-type: none;
}

/*These next few sections have not been used in the site, but I leave them here in case they can be useful later.*/

/*This sets the attributes for header3.*/
h3 {
	font-size: 110%;
	text-align: left;
	text-indent: 0px;
	padding-top: 5px;
	font-style: italic;
	padding-bottom: 5px;
	margin: 0px;
	}

#randompic {
	background: white;
	width: 300px;
	min-height: 340px;
	float: right;
	border-left: 1px solid black;
	border-right: 0px;
	border-bottom: 1px solid black;
	border-top: 0px;
	padding: 5px;
	margin-bottom: 2px;
	margin-top: 0px;
	margin-right: 0px;
	margin-left: 0px;
}

#randomtext {
	background: white;
	float: left;
	border-left: 0px;
	border-right: 0px;
	border-bottom: 0px;
	border-top: 0px;
	width: 579px;
	min-height: 340px;
	padding: 5px;
	margin-bottom: 2px;
	margin-top: 0px;
	margin-right: 0px;
	margin-left: 0px;
}