/*
Core styles used by St. Andrew's pages.  Note that BODY.nav { ... } could be
defined.
*/

BODY {
  background-color: #ffffff;
  color: #000000; /* change this value to change the text color. */
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 12px;
}

BODY.classic {
  background-color: #ffffff;
  color: #000000; /* change this value to change the text color. */
  font-family: times-roman, times, sans-serif;
  font-size: 13px;
}

BODY.scrollText {
  background-color: #ffffff;
  color: #000000; /* change this value to change the text color. */
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 14px;
}

.center {
  text-align: center; }

/* 2010apr14, phj: .index* classes should only be used on home page. */
.indexstandard {
    font-size: 1.1em; }

.indexstandardblue { color: #4070c0; }
/* #467ec9; */

table.indexstandard {
    padding: 0; }

.center TABLE {
  width: 86%; margin-left: auto; margin-right: auto; }

/*

A proper table is just what you think it is; nothing special and definitely no
borders.  font-size in TABLE doesn't affect the size of text displayed in <TD>.
".proper TABLE" may be used in place of "TABLE.proper".

*/

TABLE.proper { text-align : left; background-color: transparent;
	    	border-style: none; 
		empty-cells: show; }

/* Used by table that displays altar server schedule.  Note, if border: style
isn't defined, no border will be displayed, as the default border style is
"none". */

/* I could find no way to make borders disappear even when using
"border-collapse: separate;".  With "border-collapse: collapse;" same result. */

TABLE.servers { table-layout: auto; width: auto; text-align: left;
		background-color: white; border-collapse: collapse; 
		border: 1px solid gray; empty-cells: hide; margin: 12px 0 0 0; }

/* 2007aug14, phj: Changed table-layout: auto; to table-layout: fixed; and the
visible result was all cells in the table had equal width.  Changed width:
800px to width: 90%.  Added margin-left: auto; margin-right: auto; to center
the table in its parent. */

TABLE.calendar { table-layout: fixed; width: 96%; margin-left: auto;
		margin-right: auto; text-align: left;
		background-color: white; border-collapse: collapse; 
		border: 1px solid gray; empty-cells: hide; }

/* Leftmost empty day (cell) at the bottom of the calendar should have
no right or bottom border.  Empty days to the right of that day should
have no right, bottom or left border. */

.emptyLeftmost2 { border: 1px solid gray; border-right: hidden;
			border-bottom: hidden; }

.emptyLeftmost3 { border: 1px solid gray; border-right: hidden;
			border-bottom: hidden; border-left: hidden; }

.emptyRightmost2 { border: 1px solid gray; border-left: hidden; }

TABLE.simpleservers { border-collapse: collapse; border: solid; }

/* Summer reading.

If "padding: 9px;" is in TABLE.summerread, 9px of padding is displayed
between the bottom of the preceding paragraph and the top of the
table, on the left of the table, and between the bottom of the table
and the top of the following paragraph.  Of course winXP IE7 doesn't
display this padding. */

/* 2009nov10, phj: Added "clear: left;" so an image above and to the left of
the table could not affect horizontal formatting of the table. */

TABLE.summerread { table-layout: auto; width: auto; text-align: left;
		background-color: white; border-collapse: separate; 
		clear: left;
		empty-cells: hide; padding: 10px 0px 0px 0px; }

/* Top and bottom padding supplies sufficient vertical spacing between rows and
the left padding supplies sufficient horizontal spacing between the two
columns. */

.summerread TD { text-align: left; padding: 5px 20px 5px 0px; }

/*
When used with:

<td class="summerreadtitle">THE BIBLE STORYBOOK</td>

the following: 

.summerreadtitle TD { background: #cc99ff; text-align: left;
			padding: 15px 30px 15px 0px; }

affects no change in the three specified properties.  When used with the same
HTML, the following:
 
TD.summerreadtitle { background: #cc99ff; text-align: left;
			padding: 15px 30px 15px 0px; }

does affect the three properties.  Reason?  The former defines a style applied
to TD elements that are in a "summerreadtitle" span (clarify...).  The latter
defines a style applied to TD elements of class "summerreadtitle". */

TD.summerreadtitle { background: #ffcccc; text-align: left;
			padding: 5px 20px 5px 0px; }

td.facultyLink { vertical-align: top; padding: 5px 20px 5px 0px;
		 text-align: left; }
/* .facultyLink td { vertical-align: top; } */

/*
font-size in TR doesn't affect the size of text displayed in <TD>.  What style
properties may be placed in TR?  How do:

"TR.proper" and ".proper TR" differ?
*/

.proper TR { border-style: none; }

/* .servers TD { border: 1px solid gray; vertical-align: top; } */

/* 2009sep27, phj: Added "padding: 0 5px 0 5px;" to .servers so there is some
blank space between a border and the text to be read.  Makes reading the text
somewhat easier on the eyes. */
.servers { border: 1px solid gray; vertical-align: top; padding: 0 5px 0 5px; }

.servers2 { border-right: hidden; border-bottom: hidden; }
.servers3 { border: solid; }
.servers4 { border: none; }

/* "Empty" cells should have no left or right border.  If there is text in an
"empty" cell, position it vertically in the middle of the cell. */

.serversEmpty { border: 1px solid gray; border-right: hidden;
		border-left: hidden; vertical-align: middle; }

/* Left most emtpy cell should have a visible left border, i.e., assuming the
border collapsing model, the border between this cell and the cell to its left
should be visible. */

.serversEmptyLeftmost { border: 1px solid gray; border-right: hidden; }

/* Next two are used where row above has data in cells 3, 4, 5, etc., but this
row (serversEmptyLeftmost2) and the row below it (serversEmptyLeftmost3) have
nothing in cells 3, 4, 5, etc.  As of 2007mar04, IE7 doesn't obey these
rules. */

.serversEmptyLeftmost2 { border: 1px solid gray; border-right: hidden;
			border-bottom: hidden; }

.serversEmptyLeftmost3 { border: 1px solid gray; border-right: hidden;
			border-bottom: hidden; border-top: hidden; }

/* Right most emtpy cell should have a visible right border. */

.serversEmptyRightmost { border: 1px solid gray; border-left: hidden;
			vertical-align: middle; }

/* Used by table that displays altar server schedule.  Cells in the header that
display time/date use this style. */

/* 2007nov16, phj: Align text with center. */
.timeHeading { text-align: center; border: 1px solid gray;
		background-color: #DBDBDB; }

/* 2007dec18, phj: When we need to list servers for a single mass, lay server
names out horizontally.  Couldn't get decimal numbering of an inline list.  If
"display: inline;" is removed from "ol.servers li", the list items are
numbered, starting with 1, but they are displayed in block mode, i.e. as a
vertical list.  If "display: inline;" is in "ol.servers li", the list items are
displayed as a horizontal list, i.e., on the same line, but they are not
numbered. */

/* ol.servers { border: none; list-style-type: decimal; display: inline; } */
ol.servers { border: none; list-style-type: decimal; }

/* ol.servers li{ padding: 0 8px 0 0; } */
ol.servers li{ display: inline; /* list-style-type: decimal; */
	       padding: 0 8px 0 0; }

/* 2008dec01, phj: A simple way to display unordered list items on a line. */

/* 2009nov10, phj: Added margin and padding attributes to ul.horizontal, so
the list items, which are by default indented 40 px, would have no
indentation. */

ul.horizontal { border: none; margin-left: 0; padding-left: 0; }
ul.horizontal li{ display: inline; padding: 0 12px 0 0; }

/* 2009nov09, phj: The list inside a list is displayed vertically. */
ul.horizontal li li{ display: block; }

/* Used by school calendars.  Padding pushes a calendar entry away
from the border of a calendar day, so the entries are easier to read. */

.dayHeading { border: 1px solid gray; text-align: center;
		font-size: 14px; background-color: #FFDBDB; }
.dayEntry { border: 1px solid gray; vertical-align: top;
	    padding: 0 4px 0 4px; }

.dayOffEntry { border: 1px solid gray; vertical-align: top;
		background-color: rgb( 240, 200, 200 );
		padding: 0 4px 0 4px; }

.calEntrySeparate { background-color: #EFEFEF; } /* separates cal entries */

.lent TD { text-align : left; background-color: #cc99ff; /* purplish */
	    	font-size : 14px;
		border-style: none; 
		margin: 0px 0px 0px 0px;
	    	padding: 10px 20px 10px 20px; }

.Whiteproper TD { text-align : left; background-color: #ffffff;
	    	font-size : 14px;
		border-style: none; 
		margin: 0px 0px 0px 0px;
	    	padding: 10px 20px 10px 20px; }

.lighterLent TD { text-align : left;
		background-color: #ccccff; /* lighter purplish */
	    	font-size : 14px;
		border-style: none; 
		margin: 0px 0px 0px 0px;
	    	padding: 10px 20px 10px 20px; }

/*
subNav defines characteristics of <A>, <TABLE>, <TR>, <TD>, <UL> and
<LI> elements used by the submenus of the main menu items.
*/

/* 2007nov15, phj: If someone is un-available on the Eucharistic
Ministers schedule, a strike through pierces their name.  'Nuf
said. */

.unavailable { text-decoration: line-through; }

/* 2007jun04, phj: At least on linux firefox, if both of these classes specify
the default cursor, the cursor doesn't blink when an element using one of the
classes is replaced by an element using the other class.  Also note if the MENU
ITEM IS CLICKABLE, we'd need .subNavMainMenuOnClickable (or some such) which
uses a hand cursor (or doesn't use the default cursor). */

.subNavMainMenuOff a{ font-size:13px; color:#8C53B5; font-weight: bolder;
			text-decoration: none; cursor: default; }

.subNavMainMenuOn { font-size:13px; color:#246DAA; font-weight: bolder;
			cursor: default; }

.subNav A{ Font-Size : 12px; color: #000000; text-decoration: none; }

/* 2007jun01, phj: Added :focus pseudo so when element gets focus via tabbing,
its attributes will change as they are changed when mouse pointer hovers over
the same element.  Probably should remove font-size:, as that isn't dependent
on focus. */

.subNav a:focus{ font-size : 12px; color: #246DAA; }
.subNav a:hover{ font-size : 12px; color: #246DAA; }

/* 2007jun05, phj: Added a simple a:focus to try to make ie6 and ie7 color
submenu items purple when they receive focus.  Didn't work.  Try a:hover.
Didn't work.

2010apr13, phj: Removed "font-size : 12px; " from a:focus cause gaining
focus shouldn't affect size. */
a:focus { color: #246DAA; }
a:hover { color: #246DAA; }

/* 2007jun02, phj: Added .subNavNotClickable so an <a> element that is tabbable
(?) but not clickable is not displayed with a "hand" cursor, but with the
proper cursor. */

/* 2010apr13, phj: Removed "font-size : 12px; " from a.subNavNotclickable
cause gaining focus shouldn't affect size. */
a.subNavNotClickable { cursor: default; color: #000; }

/* Added ".footersubNav" to ".footersubNav A" because there is plain text (not
in an <a> element) to which I want this style applied. */
.footersubNav a { font-size: 10px; color: #000000; text-decoration: none; }
.footersubNav { font-size: 10px; color: #000000; }

/* 2010apr14, phj: So links in a scrolling message behave like links elsewhere
on the home page. */
a.scrollingMessage { font-size: 11px; color: #000000; text-decoration: none; }
a:focus.scrollingMessage  { color: #246DAA }
a:hover.scrollingMessage { color: #246DAA }

/* .subNav TABLE { text-align : left; background-color: transparent; */

/* 2006nov30, phj: Added border-collapse: separate; to this TABLE
definition so border-spacing could be used to horizontally separate
cells.  Note border-spacing: has no effect in TD.  Also note as of
this date, ie7 doesn't honor border-spacing:. */

TABLE.subNav { text-align : left; background-color: transparent;
		font-size : 12px; border-collapse: separate;
		border-spacing: 40px 0px; }

/* Following does make table background red:
.subNav TD { text-align : left; background: #aa0000; */

/* 2006nov30, phj: Changed background-color from transparent to
#aa0000 (which did make background a deep red), then undid change. */

.subNav TD { text-align : left; background-color: transparent;
	    font-size : 12px; }

.subNav TR { text-align : left; background-color: transparent;
	    font-size : 15px; }


.subNav LI { list-style-image: none; list-style-type: none;

/*

Regarding margin, border-width and padding, taken from
http://www.w3.org/TR/1998/REC-CSS2-19980512/box.html#mpb-examples: If there is
only one value, it applies to all sides. If there are two values, the top and
bottom margins are set to the first value and the right and left margins are
set to the second. If there are three values, the top is set to the first
value, the left and right are set to the second, and the bottom is set to the
third. If there are four values, they apply to the top, right, bottom, and
left, respectively, i.e., clockwise from the top.

*/

/* Apply a bottom margin so a shaky mouse doesn't inadvertently choose
an adjacent item. */

/* 2006nov30, phj: Reduced bottom margin from 7px to 5px so new menu
items in submenu50 will fit. */

	margin: 0px 0px 5px 0px;
	border-width:  0px 0px 0px 0px;
	padding: 0px 0px 0px 0px; }

.subNav UL{ list-style-image: none; list-style-type: none;
		margin: 0px 0px 0px 0px;
		border-width:  0px 0px 0px 0px;
		padding: 0px 0px 0px 0px; }

.footersubNav A:HOVER{ Font-Size : 10px; color: #246DAA; }

SPAN.gold { color: #a0a000 }
SPAN.blue { color: #0000FF }

/* Used where student (people) achievements, as given by some
organization, are displayed. */
SPAN.highlightPerson { color: #0A227A }
SPAN.highlightOrg { color: #A35B5B }

SPAN.sortofblue { color: #246DAA }
SPAN.compressedsortofblue { color: #246DAA; margin-right: 40% }
SPAN.sortofpurple { color: #8C53B5 }
SPAN.purple { color: #800080 }
SPAN.summerread { background-color: #ffcccc }

SPAN.sortofred { color: rgb( 180, 0, 0 ) }
SPAN.darkred { color: #a35b5b; }
SPAN.sortofgreen { color: rgb( 0, 180, 0 ) }
SPAN.darkgreen { color: #5ba35b; }

SPAN.sortofgold { color: #B4B400 }

SPAN.underline { text-decoration: underline }
SPAN.likeAlink { text-decoration: underline }

SPAN.emphasis { font-weight: bold }

/* "color" represents text color. */

TABLE, TD { text-align : left; color: #000000; background: #FFFFFF;
	    font-size : 12px; }

/* ff8080, ffc0c0 */

/* headerDistinguished means background color plus a top solid
border.  Distinguished just means a background color; no top
border.  The "B" variant uses a different color scheme.  The "Null"
scheme uses no background color. */

TD.headerNull { border-top: #BB1111 1px solid; text-align: left; }
TD.headerNullB { border-top: #1111BB 1px solid; text-align: left; }


TD.headerDistinguished { border-top: #BB1111 1px solid; text-align: left;
                background-color: #ffc0c0 }
TD.Distinguished { text-align: left; background-color: #ffc0c0 }

TD.headerDistinguishedB { border-top: #1111BB 1px solid; text-align: left;
                background-color: #c0c0ff }
TD.DistinguishedB { text-align: left; background-color: #c0c0ff }

TD.headerDistinguishedSpaced { padding-top: 4%; border-top: #BB1111 1px
		solid; text-align: left; background-color: #ffc0c0 }

/* note that font-size: small is too big on win32 ie 5.5. */
TH.recently { background-color: #FB8B8B; font-size: 12px; }
/* red too dark TH.recently { background-color: #A35B5B; font-size: 12px; } */
TD.recently { border-top: #FB8B8B 2px solid; font-size: 12px; }
HR.recently { width: 450px; color: #336699 }

H1 { font-size: 250%; color: #a35b5b; font-weight: bold; text-align: center; }

H2 { font-size : 210%; color: #336699; font-weight: normal; text-align: center; }

H2.regular { font-size : 210%;  color: #000000; font-weight: normal; text-align: center; }

/* "banners" use centered headers. */
H3 { text-indent: 0%; color: #a35b5b; font-size: 170% }
H3.pamphlet { text-indent: 0%; color: #000000; font-size: 170% }
H3.banner { text-align: center; color: #a35b5b; font-size: 170% }
H3.banner2 { text-align: center; color: #000000; font-weight: normal;
	     font-size: 170% }
H4 { text-indent: 0%; font-size: 140% } 

/* 2007may08, phj: Used by summer reading pages, but applicable elsewhere. */

H4.summerread { margin: 0; margin-bottom: 0; margin-top: 22px;
		padding: 0; text-indent: 0%; font-size: 140% }

H4.classic { color: #000000; font-size: 140% } 
H4.banner { text-align: center; color: #000000; font-size: 140% } 
H5 { font-size: 115%; }
H5.banner { text-align: center; font-size: 115%; }
H5.classic { color: #000000; font-size: 115%; }
H6 { font-size: 100%; }

IMG { border-style: none; }

/*
Use imageLeft with <IMG CLASS= ...> inside a <P> to make the paragraph text
wrap around the right side of the image, i.e., the image floats to the
left of the text.  Similarly for imageRight.
*/

/* 2007oct08, phj: Added "margin: 20px;" to imageLeft and imageRight. */

.imageLeft { float: left; border: 0px; margin: 20px; }
.imageRight { float: right; margin: 20px; }

P { color: #000000 }
P.banner { text-align: center; } /* A banner uses center paragraphs. */

/* This works with, e.g., <P class=note> ... </P>.  Works in linux ns4.7.  */

/* A note has no indentation and is in italics. */
.note { text-indent: 0%; font-style: italic }

/* A section heading and a quote is in italics. */
.sectionHead, .quote { font-style: italic }

/* Simple text has no indentation. */
.simple { text-indent: 0% }

/* Traditional text is indented. */
.traditional { text-indent: 4% }

.letterHeading { text-align: right; }
.signature { text-indent: 50%; }

/* Similar to letterheading above, and also provides some vertical spacing.
(which looks nice). */
.letterheadingbigheadspace { margin-top: 15%; text-align: right; }
.letterheadinglottaheadspace { margin-top: 10%; text-align: right; }
.letterheadingsomeheadspace { margin-top: 7%; text-align: right; }
.letterheadingsmallheadspace { margin-top: 4%; text-align: right; }

/* Emphasized text. */
.lined { text-decoration: underline }
.emphasis { font-weight: bolder; }
.linedEmphasis { font-weight: bolder; text-decoration: underline }
.moreEmphasis { font-weight: bolder; font-size: larger }

/* Use to display "shorter" messages in a bigger font, with justified
text. */
.biggerEmphasis { font-size: larger; text-align: justify }
.fudgedEmphasis { font-size: 14px; text-align: justify }

/* Slightly "fancier" newspaper text is not indented, but displays a
drop cap first letter and is justified. */
.newsEmphasis:first-letter { font-size: 300%; font-weight: bold; float: left }
.newsEmphasis {  text-align: justify; }

/* Slightly "fancier and emphasized" newspaper text is not indented,
but displays a drop cap first letter, all upper-case letters on the
first line and is justified. */
.newsMoreEmphasis:first-letter { font-size: 300%; font-weight: bold; float: left }
.newsMoreEmphasis:first-line   { text-transform: uppercase }
.newsMoreEmphasis {  text-align: justify; }

/* For captions. */
.captionEmphasis { font-size: large }

CAPTION { color: #000000; background: #FFFFFF; font-size : 12px;
text-align : left; }

/* A footnote uses a smaller font size. */
.footnote { font-size: smaller; }

/* Use this where you want small text, such as at the bottom of a web
page where you see such things as copyright, comment and "last
updated" links.  */
.small { font-size: smaller; }

/* Book text is justified. */
.book {  text-align: justify; }

/* Newspaper text is indented and justified. */
.newspaper {  text-align: justify; text-indent: 4% }

/* First paragraph in newspaper text is also separated from the
previous element with some head space.
*/
.newspaper1stPara {  text-align: justify; text-indent: 4%; margin-top: 4% }

/* A page id is the page number, document title and issue info at the
bottom of a document page.  An example document we create is The
Counselor.  The page id should be vertically offset from the previous
element and have no indentation. */
.pageId { margin-top: 10%; margin-left: 0 }

/* attribution is used to place the title of the doc from which a
previous quote was taken. */
.attribution { margin-left: 75% }
 
/* When you want to double space text. */
.doublespace { line-height: 200% }

/* Use bigheadspace when you want some more vertical space between this
element and the previous element.  Simulates a page break or separates major
sections of a document.  Use someheadspace when you need a smaller amount of
vertical space, etc. */

.bigheadspace { margin-top: 15% }
.lottaheadspace { margin-top: 10% }
.someheadspace { margin-top: 7% }
.smallheadspace { margin-top: 4% }
.tinyheadspace { margin-top: 1% }
.closerheadspace { margin-top: -8px }

.closerbottomspace { margin-bottom: -6px }

/* Similar to those above, and also allows a paragraph to be justified
(which looks nice). */
.bookbigheadspace { margin-top: 15%; text-align: justify; }
.booklottaheadspace { margin-top: 10%; text-align: justify; }
.booksomeheadspace { margin-top: 7%; text-align: justify; }
.booksmallheadspace { margin-top: 4%; text-align: justify; }
.booktinyheadspace { margin-top: 1%; text-align: justify; }
.bookcloserheadspace { margin-top: -8px; text-align: justify; }

/* Use class listcircle to put some vertical space between list elements that
otherwise seem too vertically close.  Class listsquare is similar. */
.listcircle  { list-style-type: circle; padding-top: 3% }
.listsquare  { list-style-type: square; padding-top: 1% }
.list { padding-top: 1% }

UL.plain  { list-style: none; }
OL.upper { list-style-type: upper-alpha; }

/* 2008oct14, phj: Main items in a school board report are numbered
with upper Roman numerals; sub main items are numbered with upper
alphabetic letters. */

ol.mainReport { list-style-type: upper-roman; }
ol.subMainReport { list-style-type: upper-alpha; }
LI.square { list-style-type: square; }
LI.circle { list-style-type: circle; }
LI.disc { list-style-type: disc; }

/* 2009oct13, phj: So Big6 items are numbered 1., 1.1, 1.2, etc.
Unfortunately, ie7 on win XP failed to display these styles correctly and
http://code.google.com/p/ie7-js/ didn't help, so cannot use this extremely
subtle solution.  Note linux firefox 3.5.3 does display these styles
correctly.
*/
OL.big6 { counter-reset: item }
LI.big6 { display: block }
LI.big6:before { content: counters(item, ".") " "; counter-increment: item }

OL.big6-2 { counter-reset: item 1 }
LI.big6-2 { display: block }
LI.big6-2:before { content: counters(item, ".") " "; counter-increment: item }

OL.big6-3 { counter-reset: item 2 }
LI.big6-3 { display: block }
LI.big6-3:before { content: counters(item, ".") " "; counter-increment: item }