.mainblue1 { color: #2294D2; }
.mainblue2 { color: #6BB7E1; }
.lightblue { color: #B5DBF0; }
.darkblue { color: #16628c; }
.mainyellow { color: #FFC24D; }

BODY { margin: 0 0 0 0; 
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; 
font-size: 90%; color: #777; background-color: #EEE;
text-align: center; /* combined with the bodysurround div this horizontally centres the content area in the browser window */ }

H1, H2, H3, P, TD, TH, LI { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 90%; color: #777; text-align: left; }
H1 { font-size: 110%; } 
H2 { font-size: 100%; } 
H3 { font-size: 90%; }

A.bookmark, A.bookmark:hover { color: #777; text-decoration: none; }
A { color: #D27722; text-decoration: none; }
A:hover { color: #FFC24D; }

P.smallprint { font-size: 60%; }

UL { margin-left: 1.7em; padding-left: 0; }

#bodycntrng {
  width: 778px;
  margin: 0 auto; /* this is a required for the centering to work in mozilla */
	background-color: #FFF;
}

#pagecntr { position: relative; text-align: left; }
#pagebody { clear: both; position: absolute; background-color: white; }
#peoplecntr { position: relative; }
#people { right: 0px; position: absolute; }
#peopleimg { padding-top: 18px; padding-right: 5px; }
#headercntr { position: relative; text-align: left; height: 115px; }

#header {
  position: absolute;
  top: 0px; left: 0px; height: 115px;
  width: 778px; /* formerly - width: 100%; which was fine on IE6, Opera 9 and FFX 1.5 but didn't display on IE7 RC1 */ 
  background: url(topbar.png) no-repeat;
  overflow: hidden;
}

#footer { text-align: right; clear: both; padding-top: 2.5em; }

#nav { float: left; padding-top: 0; margin-top: 3em; width: 178px; }
#nav UL.nav { margin-left: 20px; padding-left: 0px; }
#nav UL.nav LI { list-style-type: none; margin: 5px 0px 6px 0px; }
#nav UL.nav LI UL { margin: 5px 0px 0px 0px; padding: 0 0 0 0; }
#nav UL.nav LI UL LI { list-style-type: none; margin: 4px 0px 0px 0px; padding: 0 0 0 0; }

/* using 'phark revisited' image replacement technique */
#nav UL.nav LI A, #nav UL.nav LI A:visited { display: block; height: 26px; text-indent: -5000px; } 
#nav UL.nav LI UL LI A, #nav UL.nav LI UL LI A:visited { display: block; height: 20px; text-indent: -5000px; } 

#content { padding: 0.5em 17px 0.5em 20px; float: left; width: 563px; }
#content H1 { padding-top: 2.4em; }

/* homepage styles */

#introcopy { width: 364px; float: left; }

#congregations H1, #highlights H1, #newsletter H1 { 
font-weight: bold; font-size: 100%; border-bottom: 1px solid #6BB7E1; margin-top: 0; 
margin-bottom: 1em; padding: 0 0 0 0; font-size: 75%; }

#newsletter { padding-top: 2em; padding-left: 20px; }
#newsletter P { margin-top: 0; font-size: 70%; }

#congregations { width: 170px; float: right; margin-top: 70px; }
#congregations P { margin-top: 0; margin-bottom: 1em; padding: 0 0 0 0; font-size: 70%; }

#highlights { width: 364px; float: left; }
DIV.highlight { float: left; width: 110px; margin-right: 14px; }
DIV.last { margin-right: 0; }
DIV.hiimgcntr { width: 110px; height: 110px; overflow: hidden; }
#highlights IMG { border: none; }
DIV.hiplaceholder { width: 110px; height: 110px; border: 1px solid #6BB7E1; }
P.hidesc { padding-top: 0px; margin-top: 0px; font-size: 75%; }