/*
Styles for .html pages.  Note that # starts a "self-defined" tag, as opposed to
a well-known tag, such as P or H1.  Most of these styles are used to position
elements on the page.

Images with a higher z index obscure images with a lower z index.
*/

/* You may change the seal position just by changing the value of Left or Top.
Also if you change the value of visibility to "hidden" the seal is not
displayed. */

/* visibility: hidden; */

/* 2007nov15, phj: Content is centered via this container. */

#container { width: 760px; margin: 0 auto; position: relative; }

#timelypicture{ Position: absolute; Left: 3px; Top: 0px;
		 visibility: visible; z-index: 4; }

#fadedtimelypicture{ Position: absolute; Left: 153px; Top: 150px;
		 visibility: hidden; z-index: 8; }

#timelyCap{ Position: absolute; Left: 617px; Top: 120px;
	   visibility: visible; }

#cross{ Position: absolute; Left: 11px; Top: 10px; visibility: visible;
        z-index: 7; }

#name{ Position: absolute; Left: 73px; Top: 17px; visibility: visible;
        z-index: 7; }

#name2{ Position: absolute; Left: 310px; Top: 61px; visibility: visible;
	 z-index: 7; }

#bnp{ Position: absolute; Left: 127px; Top: 75px; visibility: visible;
	 z-index: 7; }

#todac{ Position: absolute; Left: 330px; Top: 112px; visibility: visible;
	 z-index: 7; }

#andrew{ Position: absolute; Left: 579px; Top: 39px; visibility:
 visible; z-index: 7; }

/*
#andrew{ Position: absolute; Left: 549px; Top: 9px; visibility:
 visible; z-index: 7; }
*/

#glasspath{ Position: absolute; Left: 14px; Top: 8px; visibility: visible;
	    z-index: 6; }

/*
Positions of "off" menu items.  I believe we want to keep the sum Top
+ image height <= the value of the higher y1 limit in checkIt().  If
the preceding inequality is not met, occasionally the "on" image will
NOT turn on when user moves the pointer over the image.
*/

#layer0off{ Position: absolute; Left: 11px; Top: 133px;
	  visibility: visible; z-index: 7; }

#layer1off{ Position: absolute; Left: 11px; Top: 173px;
	   visibility: visible;  z-index: 7; }

#layer2off{ Position: absolute; Left: 11px; Top: 213px;
	   visibility: visible;  z-index: 7; }

#layer3off{ Position: absolute; Left: 11px; Top: 236px;
	   visibility: visible;  z-index: 7; }

#layer4off{ Position: absolute; Left: 11px; Top: 259px;
	   visibility: visible;  z-index: 7; }

#layer5off{ Position: absolute; Left: 11px; Top: 282px;
	   visibility: visible;  z-index: 7; }

#layer6off{ Position: absolute; Left: 11px; Top: 305px;
	   visibility: visible;  z-index: 7; }

/* Positions of "on" menu items.  Note x coordinate (Top) is slightly less
than x coordinate of corresponding "off" menu item, so user sees the item
move when it is chosen.
*/

#layer0on{ Position: absolute; Left: 11px; Top: 133px;
	     visibility: hidden;  z-index: 7; }

#layer1on{ Position: absolute; Left: 11px; Top: 173px;
	    visibility: hidden;  z-index: 7; }

#layer2on{ Position: absolute; Left: 11px; Top: 213px;
	       visibility: hidden; z-index: 7;  }

#layer3on{ Position: absolute; Left: 11px; Top: 236px;
	   visibility: hidden;  z-index: 7; }

#layer4on{ Position: absolute; Left: 11px; Top: 259px;
	   visibility: hidden;  z-index: 7; }

#layer5on{ Position: absolute; Left: 11px; Top: 282px;
	   visibility: hidden;  z-index: 7; }

#layer6on{ Position: absolute; Left: 11px; Top: 305px;
	   visibility: hidden;  z-index: 7; }

/*
These position the submenus that are displayed when hovering above a
main menu item.  If visibility is changed from hidden to visible, then
the submenu is visible when the page is first loaded (reloaded), but
becomes invisible as soon as the mouse is moved by virtue of function
checkIt().

Notice that submenu00 goes with layer0, submenu10 goes with layer1, etc.
*/

/* 2009jul02, phj: After adding a few items to layer0 menu, had to move this
menu down 25 pixels (previously Top was 142px). */
#submenu00{ Position: absolute; Left: 175px; Top: 167px; z-index: 8;
 visibility: hidden; }

#submenu10{ Position: absolute; Left: 175px; Top: 172px; z-index: 8;
 visibility: hidden; }

#submenu20{ Position: absolute; Left: 175px; Top: 212px; z-index: 8;
 visibility: hidden; }

#submenu30{ Position: absolute; Left: 175px; Top: 230px; z-index: 8;
 visibility: hidden; }

/* 2004dec06, phj: Top changed from 250px to 225px. */
#submenu40{ Position: absolute; Left: 175px; Top: 225px; z-index: 8;
 visibility: hidden; }

/* 2004aug26, phj: Top changed from 145px to 130px. */
/* 2006nov30, phj: Top changed from 130px to 110px. */
/* 2006nov30, phj: Top changed from 110px to 124px. */
/* 2006nov30, phj: Top changed from 124px to 134px. */
#submenu50{ Position: absolute; Left: 175px; Top: 134px; z-index: 8;
 visibility: hidden; }

/* 2004dec06, phj: Top changed from 280px to 255px. */
#submenu60{ Position: absolute; Left: 175px; Top: 255px; z-index: 8;
 visibility: hidden; }

/*
Level two submenus.

The <DIV> of which these are ID values are outside any other <DIV>s,
so these coordinates refer to the origin in the ulhc.  win95 Netscape
JS stuff fails if a <DIV> is inside another <DIV>.
*/

/* For menu 0, currently Parish Life and Worship. */

/* 2009jul02, phj: After adding a few items to layer0 menu, had to move this
menu up 30 pixels (previously Top was 165px). */
#l2smenu00{ Position: absolute; Left: 330px; Top: 135px; z-index: 8;
 visibility: hidden; }

#l2smenu01{ Position: absolute; Left: 330px; Top: 187px; z-index: 8;
 visibility: hidden; }

/* For menu 3, currently Religious Ed. */

#l2smenu30{ Position: absolute; Left: 330px; Top: 236px; z-index: 8;
 visibility: hidden; }

#l2smenu31{ Position: absolute; Left: 330px; Top: 250px; z-index: 8;
 visibility: hidden; }

#l2smenu32{ Position: absolute; Left: 330px; Top: 264px; z-index: 8;
 visibility: hidden; }

/* School address and phone numbers. */

#addressphone{ Position: absolute; Left: 213px; Top: 378px;
	   visibility: visible; z-index: 7; }

/* Positions of the scrolling text background, the scrolling text, and
the areas at the bottom of the page. */

/* 2009dec18, phj: Added a width to this DIV cause I want text to wrap, then
added height so I could define background color of the entire div (rectangle).
Also increased font size from 12px to 14px and made the background color
yellow.  Unfortunately, a 200 pixel wide sliver of yellow was displayed just
below the other scrolling messages which comprised images, so I removed the
background-color attribute. */

/* 2010apr13, phj: Changed height of textScroller and textScrollerRight from
130px to 200px, which matches their width. */

#textScroller{ position: absolute; left: 0px; top: 349px; width: 200px;
	       height: 200px; z-index: 7; visibility: visible;
	       font-size: 14px; }

#nextMsg{ Position: absolute; Left: 10px; Top: 519px; font-size: 26px;
	       z-index: 7; visibility: visible;}

#prevMsg{ Position: absolute; Left: 40px; Top: 490px; font-size: 26px;
	       z-index: 7; visibility: visible; }

#textScrollerRight{ position: absolute; left: 470px; top: 379px; width: 200px;
	       height: 200px; z-index: 7; visibility: visible;
	       font-size: 14px; }

#nextMsgRight{ Position: absolute; Left: 640px; Top: 549px; font-size: 26px;
	       z-index: 7; visibility: visible;}

#prevMsgRight{ Position: absolute; Left: 490px; Top: 490px; font-size: 26px;
	       z-index: 7; visibility: visible; }

#nextMsg a, #prevMsg a, #nextMsgRight a, #prevMsgRight a{
    text-decoration: none; color: #000000;}

/* 2004dec06, phj: changed Left from 205px to 220px. */
/* 2010apr12, phj: Changed top: from 454px to 484px.  Changed left: from 220px
to 213px, so it matches #addressphone. */
#bottomline{ position: absolute; left: 213px; top: 484px;
	      visibility: visible; font-size: 12px; z-index: 7; }

/* 2010apr12, phj: Changed top: from 474px to 504px. */
#bottomline3{ position: absolute; left: 213px; top: 504px;
	       visibility: visible; font-size: 10px; z-index: 7; }