body { /* set everything to zero for a good cross-browser starting point */
	margin: 0; /* zeroes the margins on the body */
	padding: 0; /* zeroes the padding on the body ~ Opera carries a default padding and requires this zeroing */
	border: 0; /* zeroes off any existing border */
	background-color: #616161; /* sets the body background colour */
	color: #383412;  /* set the default text color */
	text-align: center; /* Hack to centre the wrapper in IE5.x pc */
	font-family: Verdana, Arial, Helvetica, sans-serif; /* set the default fonts */
	font-size: 100.01%; /* Sets default font size. This odd value compensates for several browser bugs. First, setting a default font size in percent (instead of em) eliminates an IE/Win problem with growing or shrinking fonts out of proportion if they are later set in ems in other elements. Additionally, some versions of Opera will draw a default font-size of 100% too small compared to other browsers. Safari, on the other hand, has a problem with a font-size of 101%. Current "best" suggestion is to use the 100.01% value for this property */
	min-width: 770px; /* Prevents the body becoming narrower than our wrapper div - keeps the content from disappearing off the left edge with Gecko browsers */
}

#wrapper {
   width: 772px;/*sets the width for IE5.x's broken box model*/
	w\idth: 770px; /* sets the width of the wrapper for compliant browsers*/
	margin: 5px auto;/* centers the wrapper. First value - 5px is applied to the top and bottom margins, auto sets the excess space on the view port evenly to the left and right*/
	position: relative; /* important to position it relatively */
	background-color: #F7F7F7; /* sets the wrappers background color */
	border: 1px solid #000; /* sets a border to all 4 sides */
	text-align: left; /* Realigns the text to the left after the IE hack in the body rule */
}

#banner {
	position: relative;/* set a height for the banner to allow all the bg image to be seen, no text resizing in this element to worry about */
	width: 770px;
	background-color: #364971;
	height: 130px;
}

#content { /* Begin laying out and styling the content div */
	width: 560px; /* this left margin clears the leftcol div and allows our content div to become a second column */
	margin-bottom: 15px;
	position: relative;
	margin-top: 10px;
	margin-left: 200px;
}

#content p {
	font-size: 80%; /* set the font size for p, scaled from the body declaration */
	margin: 10px 6px 10px 6px; /* set the margins for the p element */
	padding: 0; /* zero off the padding */
}

.titleimages { /* used to set the "cold" title images */
	display: block; /* set to display block to ensure it has it's own line in the design */
	margin-top: 25px; /* set a margin to the top */
}

#leftcol { /* Begin laying out the leftcol div */
	float: left; /* Floats the div to the left to make a column */
	width: 169px; /* sets a width for the div - Imperative for IE mac */
	margin-bottom: 120px; /* moves the div down from the banner */
	position: relative;
	padding-left: 10px;
	padding-top: 60px;
}
#content #USFLAG {
	float: left;
	padding-top: 20px;
	padding-right: 15px;
	padding-bottom: 5px;
	padding-left: 5px;
}


#leftcol #navigation {
	line-height: 100%; /* helps out IE 5.01 PC */
	width: 169px; /* sets a width for the div */
}

#leftcol #navigation ul {
	border-top: 1px solid #000; /* sets a border to the top of the ul */
  	border-bottom: 1px solid #000; /* sets a border to the bottom of the ul */
	list-style-type: none; /* removes the bullets from our list navigation */
	margin: 0; /* zeroes off the margins */
	padding: 0; /* zeroes off the padding */
	font-size: 75%; /* scales the font to 75% of the body font declaration*/
}

#leftcol #navigation ul li { /*The 3 margin property/value pairs are a hack to make the links butt together in IE 5.01 */
	padding: 0; /* zeroes off the padding */
	margin: 0; /* zeroes off the margins */
	margin: /**/ 0 0 -3px 0; /* This takes 3px off the bottom margin in IE 5.01 - IE 5.5 cannot read this hack so stays with the 0 value from the last margin property */
	ma\rgin: 0; /* IE 5.01 and IE5.5 cannot read this selector - resets the margins on other browsers back to zero - the escape character must not come immediately before the letters a,b,c,d,e or f. If it does it will be seen as a hex character and the hack will fail */
	
}

#leftcol #navigation a, 
#leftcol #navigation a:visited { /* use dual selectors if the properties and values are the same for each */
	border-bottom: 1px solid #000000; /* sets the bottom border */
	border-left: 1px solid #323C55; /* sets the left border */
	border-right: 1px solid #000000; /* sets the right border */
	color: #fff; /* changes the default text colour to white */
	display: block; /* required to make the links act like a button, having the full area "clickable" */
	padding: 4px 0 6px 4px; /* sets padding values to give the link text some "air" */
	text-decoration: none; /* removes the default underline */
	background-color: #364971; /* sets a background colour on the links which hides the roll over snowman image in the li selector */
	width: 169px; /* sets the width for IE5.x - content width plus border widths plus padding value = 6 extra pixels */
	w\idth: 163px; /* resets the width for IE6 and compliant browsers */
}

/* using the \ escape character as in w\idth - see final property declaration in the selector above */
/* IE 5.01 and IE5.5 cannot read this selector. The escape character must not come immediately before the letters a,b,c,d,e or f. If it does it will be seen as a hex character and the hack will fail */

#leftcol #navigation a:hover, 
#leftcol #navigation a:focus { /* use dual selectors if the properties and values are the same for each */
	background-color: #339966; /* prevents the dark blue background colour from the "a" selector showing and ensures the snowman image is seen on hover and focus */
	border-bottom: 1px solid #fff; /* changes the bottom border to white to give the hover state an indented look */
	color: #000; /* changes the hover and focus text to black */
}

#footer {  /* Begin laying out and styling the footer div */
background-color: #fff;  /*sets a background colour for the footer*/
width: 770px;  /*Sets the footers width*/
border-top: 1px solid #000;  /*sets the top border to define the beginning of the footer*/
font-size: 60%;  /* sets the footer text size */
text-align: right;  /* aligns the text to the right*/
margin-top: 20px;  /* Adds a margin to the top of the footer*/
clear: left;  /*clears any floats to the left - our leftcol div in this instance*/
}

#footer p {
background-color: #E4E4E4;  /*sets the background colour for the p element when it is in the footer div*/
padding: 4px 4px 4px 10px;  /* sets the padding values*/
margin: 0;  /*zeroes off the margins */
}

#footer ul{
background-color: #036;/*provides a background colour for the links list*/
margin: 0;/*zeroes off the margins*/
padding: 4px;/*add some air around the links*/
}

#footer li{
display: inline;/*set the list to display inline*/
}

#footer a {  /* Styles the links within the footer */
color: #fff;  /*sets the text to white*/
text-decoration: underline;  /*keeps the underline*/
}

#footer a:hover,
#footer a:focus {
text-decoration: none;  /*removes the underline*/
}#banner h1 {
	font-size: 120%;
	text-align: center;
	font-weight: bold;
	color: #FFFFFF;
	width: 350px;
	padding: 5px;
}
#wrapper #content h1 {
	font-size: 100%;
	font-style: italic;
	color: #FFFFFF;
	background-color: #364971;
	text-indent: 15px;
	padding-top: 2px;
	padding-bottom: 2px;
}
#content a, #content a:visited {
	font-size: 95%;
	font-weight: bold;
	color: #339966;
	text-decoration: none;
}
#content a:hover, #content a:focus {

	font-size: 95%;
	font-weight: bold;
	color: #FF0000;
	text-decoration: underline;
}
#wrapper #content h2 {
	font-size: 90%;
	color: #364971;
	text-indent: 10px;
	font-style: italic;
}
.tabletitles {
	font-size: 80%;
	font-weight: bold;
	text-indent: 5px;
}
.delbutton {
	color: #FF0000;
	font-size: 75%;
	font-weight: bold;
	background-color: #FFCCFF;
	border: 1px solid #FF0000;
	text-align: center;
	cursor: pointer;
}
#content #addevent {
	text-align: right;
	width: 400px;
	font-size: 80%;
	font-weight: bold;
	line-height: 200%;
}
.addbutt {
	color: #009933;
	border: 1px solid #009933;
	background-color: #FFFFFF;
	margin-top: 10px;
	cursor: pointer;
}
.trText1 {
	font-size: 75%;
	font-weight: bold;
}
.recNav {
	font-size: 70%;
	text-align: center;
}
#content #editVerse {
	text-align: right;
	width: 400px;
	font-size: 80%;
	font-weight: bold;
	line-height: 200%;
}
.redUpdate {
	font-size: 100%;
	font-weight: bold;
	color: #FF0000;
}
dd {
	font: 9px Verdana, Arial, Helvetica, sans-serif;
	color: #000066;
	width: 500px;
}
#leftcol #othernews {
	font-size: 75%;
	padding-top: 30px;
	position: relative;
	padding-bottom: 30px;
	width: 169px;
}
#othernews h2 {
	font-size: 110%;
	font-weight: bold;
}

tt {
	font: bold normal 9px Verdana, Arial, Helvetica, sans-serif;
	color: #000000;
	text-indent: 2px;
	display: list-item;
	list-style: none;
}
#leftcol #othernews a, 
#leftcol #othernews a:visited { /* use dual selectors if the properties and values are the same for each */
	border-bottom: 1px solid #000000; /* sets the bottom border */
	border-left: 1px solid #323C55; /* sets the left border */
	border-right: 1px solid #000000; /* sets the right border */
	color: #fff; /* changes the default text colour to white */
	display: block; /* required to make the links act like a button, having the full area "clickable" */
	padding: 4px 0 6px 4px; /* sets padding values to give the link text some "air" */
	text-decoration: none; /* removes the default underline */
	background-color: #364971; /* sets a background colour on the links which hides the roll over snowman image in the li selector */
	width: 169px; /* sets the width for IE5.x - content width plus border widths plus padding value = 6 extra pixels */
	w\idth: 163px; /* resets the width for IE6 and compliant browsers */
}

/* using the \ escape character as in w\idth - see final property declaration in the selector above */
/* IE 5.01 and IE5.5 cannot read this selector. The escape character must not come immediately before the letters a,b,c,d,e or f. If it does it will be seen as a hex character and the hack will fail */

#leftcol #othernews a:hover, 
#leftcol #othernews a:focus { /* use dual selectors if the properties and values are the same for each */
	background-color: #339966; /* prevents the dark blue background colour from the "a" selector showing and ensures the snowman image is seen on hover and focus */
	border-bottom: 1px solid #fff; /* changes the bottom border to white to give the hover state an indented look */
	color: #000; /* changes the hover and focus text to black */
}
#leftcol #othernews ul {
	border-top: 1px solid #000; /* sets a border to the top of the ul */
  	border-bottom: 1px solid #000; /* sets a border to the bottom of the ul */
	list-style-type: none; /* removes the bullets from our list navigation */
	margin: 0; /* zeroes off the margins */
	padding: 0; /* zeroes off the padding */
	font-size: 75%; /* scales the font to 75% of the body font declaration*/
}

#leftcol #othernews ul li { /*The 3 margin property/value pairs are a hack to make the links butt together in IE 5.01 */
	padding: 0; /* zeroes off the padding */
	margin: 0; /* zeroes off the margins */
	margin: /**/ 0 0 -3px 0; /* This takes 3px off the bottom margin in IE 5.01 - IE 5.5 cannot read this hack so stays with the 0 value from the last margin property */
	ma\rgin: 0; /* IE 5.01 and IE5.5 cannot read this selector - resets the margins on other browsers back to zero - the escape character must not come immediately before the letters a,b,c,d,e or f. If it does it will be seen as a hex character and the hack will fail */
	
}