/*This CSS was originally created by Tatiana Hamboyan Harrison, website designer at Line by Line web design, 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: Georgia, Palatino Linotyle, Palatino, Times New Roman, 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: url("bg.jpg") repeat #5e809c; /*#FFFFCC; #a29a8f; (The original gray)*/
	
	/*You shouldn't need to change these next 3.*/
	width: 100%;
	margin: 0px;
	padding: 0px;
	}
	
#top {
	background: url("bridge.jpg") center no-repeat #9bbae6;
	height: 120px;
}
	
/*This is the box that holds the header, the submenu, and the main text.*/
#box {
	width: 970px; /*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: #FFFFE8; /*#5e809c;*/
	border: 3px solid #4D6980;

	}
	
/*This next section creates the header. The background is set to the image.*/
#header {
	overflow: visible;
	background-color: #5e809c;
	width: 970px; /*set to the width of the image.*/
	padding: 0px;
	margin: 0px auto;
	margin-bottom: 0px;
	min-height: 225px;
	height: auto !important;
	height: 225px;
	}

/*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: 0px;
	padding: 0px;
	text-decoration: none;
	background: white;
	opacity: 0.90; /*to make image slightly translucent*/
	filter: alpha(opacity=90); /*to make translucency work in IE*/
	border: 0px;
}

a.logo:hover {
	border: 0px;
	opacity: 1.0; /*to increase opacity upon hover*/
	filter: alpha(opacity=100); /*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: 220%; 
	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: 25px 5px 15px 15px;
	color: #FFFFCC;
	border-bottom: 3px solid #4D6980;
	font-family: Georgia, Palatino Linotyle, Times New Roman, serif;
	text-shadow:2px 2px 2px #653916;
	}
	
/*Since the LWL title is a link, we set its hover properties here:*/
a.h1:hover {
	border-top: 0px;
	color: #000;
	border-bottom: 3px solid #283D4F;
	text-shadow:2px 2px 2px #653916;
	}
	
/*This sets the text attributes for header2, which is used for the mission statement.*/
h2 {
	background: transparent;
	text-align: right;
	font-size: 145%;
	font-weight: normal;
	margin: 20px 20px 8px 5px;
	padding: 2px;
	font-style: italic;
	/*color: #FFFFCC;*/
	}
	
/*This section sets the attributes for the buttons in the header:*/
ul.menu {
	text-align: center;
	background: transparent;
	margin-top: 30px;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 10px;
	padding-left: 10px;
	padding-right: 5px;
	padding-bottom: 0px;
	padding-top: 0px;
	list-style-type: none;
	font-weight: bold;
	}
	
ul.menu li {
	display: inline;
}	

ul.menu li a {
	background: #FFFFCC;
	padding: 6px;
	margin: 5px;
	display: inline;
	line-height: 2.5;
	border: 2px solid #283D4F;
	border-radius: 20px 20px 20px 20px;
	}	

ul.menu a {
	font-size: 110%;
	color: #653916;
	font-weight: normal;
	}
		
ul.menu a:hover {
	background: #283D4F;
	color: #FFFFCC;
	}
		
ul.menu a.current:hover {
background: #653916;
	border: 2px solid #653916;
	}
	
/*Current is so we can tell which page we're on:*/
ul.menu a.current {
	background: #283D4F;
	color: #FFFFCC;
	border: 2px solid #FFFFCC;
	}

	
/*This creates the first bar with the title of the page for any page that does not have a sub-menu:*/
#sub, #sub1 , #random {
	float: left;
	width: 970px;
	text-align: left;
	background-color: #653916;
	margin: 0px 0px 10px 0px;
	padding: 5px 0px 8px 0px;
	font-size: 150%;
	font-weight: bold;
	font-variant: small-caps;
	color: #000;
	text-indent: 5px;
	background-image: url("bg.jpg"); 
	background-repeat: repeat;
	background-position: top right;
	clear: both;
	opacity: 0.75; /*to make image slightly translucent*/
	filter: alpha(opacity=75); /*to make translucency work in IE*/
}

/*This creates the first bar with the title of the page and the sub-menu:
#sub1 {
	float: left;
	width: 970px;
	text-align: left;
	background-color: gray;
	background-image: url("bg.jpg"); 
	background-repeat: repeat;
	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: #000;
	}
	
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: 970px;
	background-color: gray;
	background-image: url("bg.jpg"); 
	background-repeat: repeat;
	background-position: top right;
	margin: 10px 0px 10px 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: #000;
}*/
	
	
/*This sets the attributes for paragraphs. You shouldn't need to change this.*/
p, h4, ul.text {
	clear: both;
	text-indent: 15px;
	margin: 5px 25px 5px 25px;
	padding: 5px;
	text-align: left;
	line-height: 1.5;
	}

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

a:hover {
	border-bottom: 2px solid #283D4F;
	color: #283D4F;
}
	
/*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;
	clear: none;
}

/*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;
}


/*Use this for one-line tight paragraphs: List attributes without bullet:*/

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

/*Use this for brown bolded text:*/
h4 {
	color: #653916; 
	font-family: tahoma, arial, helvetica, sans-serif; 
	font-size: 110%;
	margin: 15px 5px 5px 5px;
	clear: none;
}

/*This is used on beliefs.php in the "Our Cornerstones" section:*/
ul.special {
	font-size: 110%;
	font-style: italic;
	margin-left: 30px;
	list-style-type: circle;
}